gotosocial/web/assets/themes/brutalist.css

/*
  theme-title: Brutalist
  theme-description: (Pseudo-)monochrome brutality
*/

:root {
  /* Define our color palette, two whole colors, wow! */
  --almost-black: #06170e;
  --almost-white: #f1f3f2;

  /* Overwrite orange trim */
  --orange2: var(--almost-black);

  /* Restyle basic colors */
  --white1: var(--almost-white);
  --white2: var(--almost-white);

  /* Basic page styling (background + foreground) */
  --bg:var(--almost-white);
  --bg-accent: var(--almost-white);
  --fg: var(--almost-black);
  --fg-reduced: var(--almost-black);
  --fg-accent: var(--almost-black);

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

  /* Statuses */
  --status-bg: var(--almost-white);
  --status-focus-bg: var(--almost-white);
  --status-info-bg: var(--almost-white);
  --status-focus-info-bg: var(--almost-white);

  /* Used around statuses + other items */
  --double-border: 0.5rem double var(--almost-black);
  --dashed-border: 0.1rem dashed var(--almost-black);
  --single-border: 0.2rem solid var(--almost-black);

  /* Override some border stuff */
  --boxshadow-border: var(--double-border);
  --br: 0;
  --br-inner: 0;

  --plyr-video-control-color: var(--almost-black);
}

/* Scroll bar */
html, body {
  scrollbar-color: var(--almost-black) var(--almost-white);
}

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

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

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

.profile .profile-header .basic-info .avatar-image-wrapper {
  border: var(--single-border);
}
.status .status-header > address > a .avatar {
  border: var(--single-border);
}

/* Make about sections transparent */
.profile .about-user .fields,
.profile .about-user .bio,
.profile .about-user .accountstats {
  border-left: var(--double-border);
  border-right: var(--double-border);
}

/* Fiddle around with borders on about sections */
.profile .about-user .fields .field:first-child {
  border-top: var(--dashed-border);
}
.profile .about-user .fields .field {
  border-bottom: var(--dashed-border);
}
.profile .about-user .accountstats {
  border-top: var(--dashed-border);
  border-bottom: var(--double-border);
}

/* Code snippets */
.status .text .content pre,
.status .text .content code {
  background: var(--almost-black);
  color: var(--almost-white);
}

/* Block quotes */
.status .text .content blockquote {
  background-color: var(--almost-black);
  color: var(--almost-white);
}

/* Polls */
.status .text .poll {
  background-color: var(--almost-white);
  border: var(--double-border);
}
.status .text .poll .poll-info {
  background-color: var(--almost-white);
  border: var(--dashed-border);
}

/* Status media */
.status .media .media-wrapper {
  border: var(--single-border);
}
.status .media .media-wrapper details .unknown-attachment .placeholder {
  color: var(--almost-black);
}
.status .media .media-wrapper details video.plyr-video {
  background: var(--almost-black);
}

/* Status info bars */
.status .status-info,
.status.expanded .status-info {
  border-top: var(--dashed-border);
}

/* Make show more/less buttons more legible */
.status button, .status .button {
  background-color: var(--almost-black);
  color: var(--almost-white);
  border: var(--dashed-border);
}
.status button:hover, .status .button:hover {
  background-color: var(--almost-white);
  color: var(--almost-black);
  border: var(--dashed-border);
}

/*
  Border looks terrible on emoji hover
  with this scheme so disable it.
*/
.emoji:hover {
  border: none;
}

/*
  Our borders are real thick + juicy,
  so outdent the left margin a bit
  more to compensate.
*/
.thread .status.indent-1 .status-link,
.thread .status.indent-2 .status-link,
.thread .status.indent-3 .status-link,
.thread .status.indent-4 .status-link,
.thread .status.indent-5 .status-link { 
  margin-left: -1rem;
}