gotosocial/web/assets/themes/moonlight-hunt.css

/*
  theme-title: Moonlight Hunt
  theme-description: Moonlit grey-blue-green with a tinge of blood red. You may think it all a mere bad dream.
*/

:root {
  /* Define our palette */
  --ghastly-moon-shadow: #f3e3d4;
  --ghastly-moon: #fdf2d2;
  --blue-mood: #456e74;
  --blue-mood-see-through: rgb(69, 110, 116, 50%);
  --ice-blue: #96abae;
  --ice-blue-see-through: rgb(150, 171, 174, 75%);
  --ice-blue-almost-see-through: rgb(150, 171, 174, 85%);
  --blood-red: #6c1619;
  --bright-red: #f61a1ae6;
  --feral-orange: #f78d17;
  --earth-grey: #48372f;
  --charred-brown: #1f1714;

  /* Restyle basic colors */
  --white1: var(--ice-blue-see-through);
  --white2: var(--ice-blue-see-through);
  --orange2: var(--blood-red);
  --blue1: var(--blue-mood);
  --blue2: var(--blue-mood);
  --blue3: var(--charred-brown);

  /* Basic page styling (background + foreground) */
  --bg: radial-gradient(
    circle at 85% 22.5%,
    var(--ghastly-moon-shadow) 10%,
    var(--ghastly-moon) 13%,
    var(--ice-blue) 40%,
    var(--blue-mood) 65%,
    var(--blood-red) 85%,
    var(--charred-brown) 100%
  );
  --bg-accent: var(--white2);
  --fg: var(--charred-brown);
  --fg-reduced: var(--charred-brown);
  --profile-bg: var(--white2); 

  /* Buttons */
  --bloodshot: linear-gradient(
    var(--blood-red) 0%,
    var(--feral-orange) 2%,
    var(--bright-red) 5%,
    var(--blood-red) 40%,
    var(--blood-red) 60%,
    var(--bright-red) 95%,
    var(--feral-orange) 98%,
    var(--blood-red) 100%
  );
  --button-bg: var(--bloodshot);
  --button-fg: var(--ghastly-moon);

  /* Statuses */
  --status-bg: var(--ice-blue-almost-see-through);
  --status-focus-bg: var(--ice-blue-almost-see-through);

  /* Used around statuses + other items */
  --ghastly-border: 0.1rem solid var(--ghastly-moon);
  --boxshadow-border: var(--ghastly-border);
}

/* Scroll bar */
html, body {
  scrollbar-color: var(--blood-red) var(--ice-blue);
}

/* Instance title color */
.page-header {
  grid-column: 2;
  align-self: start;
  margin: 1rem 0 1rem 0;
  background: var(--ice-blue-see-through);
  color: var(--charred-brown);
  border-radius: var(--br);
  border: var(--ghastly-border);
}

.profile .profile-header {
  border: var(--ghastly-border);
}

.col-header {
  border: var(--ghastly-border);
}

.profile .about-user .col-header {
  border-bottom: none;
  margin-bottom: 0;
}

/* Fiddle around with borders on about sections */
.profile .about-user .fields,
.profile .about-user .bio,
.profile .about-user .accountstats {
  border-left: var(--ghastly-border);
  border-right: var(--ghastly-border);
}
.profile .about-user .accountstats {
  border-bottom: var(--ghastly-border);
}

/* Role and bot badge backgrounds */
.profile .profile-header .basic-info .namerole .role,
.profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper {
  background: var(--ghastly-moon);
}

/* Status media */
.status .media .media-wrapper {
  border: var(--ghastly-border);
}
.status .media .media-wrapper details .unknown-attachment .placeholder {
  color: var(--charred-brown);
}
.status .media .media-wrapper details video.plyr-video {
  background: var(--ice-blue-see-through);
}

/* Status polls */
.status .text .poll {
  background-color: var(--ice-blue-see-through);
  border: var(--ghastly-border);
}
.status .text .poll .poll-info {
  background-color: var(--ice-blue-see-through);
  border: var(--ghastly-border);
}

/* Code snippets */
pre, pre[class*="language-"],
code, code[class*="language-"] {
  background-color: var(--charred-brown);
  color: var(--ghastly-moon);
}

/* Block quotes */
blockquote {
  background-color: var(--charred-brown);
  color: var(--ghastly-moon);
}

/* Status info bars */
.status .status-info,
.status.expanded .status-info {
  color: var(--ghastly-moon-shadow);
  border-top: var(--ghastly-border);
  background: var(--blue-mood);
}

/* Make show more/less buttons more legible */
.status button, .status .button {
  border: 1px solid var(--blood-red);
}
.status button:hover, .status .button:hover {
  border: 1px solid var(--ghastly-moon);
  background: var(--bloodshot);
}

/* Back + next links */
.backnextlinks {
  background: var(--ice-blue-see-through);
  padding: 0.5rem;
  border: var(--ghastly-border);
  border-radius: var(--br);
  font-weight: bold;
}

.page-footer {
  margin-top: 2rem;
  background: var(--ice-blue-almost-see-through);
  border-top: var(--ghastly-border);
}