gotosocial/web/assets/themes/blurple-light.css

/*
  theme-title: Blurple (light)
  theme-description: Official light blurple theme
*/

:root {
  /* Define our nice blurple palette */
  --blurple1: #ebe6f8;
  --blurple2: #d6cceb;
  --blurple3: #c2b3e1;
  --blurple4: #aa60ff;
  --blurple5: #783d9f;
  --blurple6: #2d2b55;
  --blurple7: #1f1f41;

  /* Override orange trim */
  --orange2: #700000;

  /* Restyle basic colors to use blurple */
  --white1: var(--blurple2);
  --white2: var(--blurple3);
  --blue1: var(--blurple4);
  --blue2: var(--blurple5);
  --blue3: var(--blurple6);

  /* Basic page styling (background + foreground) */
  --bg: var(--blurple1);
  --bg-accent: var(--white2);
  --fg: var(--gray1);
  --fg-reduced: var(--gray2);

  /* Profile page styling (light) */
  --profile-bg: var(--white2);

  /* Blurpleize buttons */
  --button-bg: var(--blue2);
  --button-fg: var(--white1);

  /* Blurpleize statuses */
  --status-bg: var(--white1);
  --status-focus-bg: var(--white1);
  --status-info-bg: var(--white2);
  --status-focus-info-bg: var(--white2);

  /* Used around statuses + other items */
  --boxshadow-border: 0.08rem solid var(--blurple6);
}

/* Main page background */
body {
  background: linear-gradient(var(--blurple1), white);
}

/* Scroll bar */
html, body {
  scrollbar-color: var(--blurple5) var(--blurple2);
}

/* Profile fields */
.profile .about-user .fields .field {
  border-bottom: 0.1rem solid var(--blurple6);
}
.profile .about-user .fields .field:first-child {
  border-top: 0.1rem solid var(--blurple6);
}

/* Status media */
.status .media .media-wrapper {
  border: 0.08rem solid var(--blurple6);
}
.status .media .media-wrapper details .unknown-attachment .placeholder {
  color: var(--blue2);
}
.status .media .media-wrapper details video.plyr-video {
  background: var(--blurple2);
}

/* Status polls */
.status .text .poll {
  background-color: var(--white2);
}
.status .text .poll .poll-info {
  background-color: var(--white1);
}

/* Code snippets */
pre, pre[class*="language-"],
code, code[class*="language-"] {
	background-color: var(--blurple7);
  color: var(--blurple2);
}

/* Block quotes */
blockquote {
	background-color: var(--blurple1);
  color: var(--blurple7);
}