From 486852fb3817c6637fea837d483331f7b5127178 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Sat, 14 Sep 2024 16:09:59 +0200
Subject: [PATCH] [feature/frontend] Add dark version of brutalist theme
 (#3294)

---
 web/assets/themes/brutalist-dark.css | 161 +++++++++++++++++++++++++++
 web/assets/themes/brutalist.css      |  22 +++-
 2 files changed, 181 insertions(+), 2 deletions(-)
 create mode 100644 web/assets/themes/brutalist-dark.css

diff --git a/web/assets/themes/brutalist-dark.css b/web/assets/themes/brutalist-dark.css
new file mode 100644
index 000000000..baccaa046
--- /dev/null
+++ b/web/assets/themes/brutalist-dark.css
@@ -0,0 +1,161 @@
+/*
+  theme-title: Brutalist Dark
+  theme-description: (Pseudo-)monochrome brutality (dark version)
+*/
+
+:root {
+  /* Define our color palette, two whole colors, wow! */
+  --almost-black: #06170e;
+  --almost-white: #f1f3f2;
+
+  /* Overwrite orange trim */
+  --orange2: var(--almost-white);
+
+  /* Restyle basic colors */
+  --white1: var(--almost-black);
+  --white2: var(--almost-black);
+
+  /* Basic page styling (background + foreground) */
+  --bg:var(--almost-black);
+  --bg-accent: var(--almost-black);
+  --fg: var(--almost-white);
+  --fg-reduced: var(--almost-white);
+  --fg-accent: var(--almost-white);
+
+  /* Profile page styling (light) */
+  --profile-bg: var(--almost-black);
+
+  /* Statuses */
+  --status-bg: var(--almost-black);
+  --status-focus-bg: var(--almost-black);
+  --status-info-bg: var(--almost-black);
+  --status-focus-info-bg: var(--almost-black);
+
+  /* Used around statuses + other items */
+  --double-border: 0.5rem double var(--almost-white);
+  --dashed-border: 0.1rem dashed var(--almost-white);
+  --single-border: 0.2rem solid var(--almost-white);
+
+  /* Override some border stuff */
+  --boxshadow-border: var(--double-border);
+  --br: 0;
+  --br-inner: 0;
+}
+
+/* Scroll bar */
+html, body {
+  scrollbar-color: var(--almost-white) var(--almost-black);
+}
+
+.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-white);
+  color: var(--almost-black);
+}
+
+/* Polls */
+.status .text .poll {
+  background-color: var(--almost-black);
+  border: var(--double-border);
+}
+.status .text .poll .poll-info {
+  background-color: var(--almost-black);
+  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-white);
+}
+.status .media .media-wrapper details video.plyr-video {
+  background: var(--almost-white);
+}
+
+/* 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-white);
+  color: var(--almost-black);
+  border: var(--dashed-border);
+}
+.status button:hover, .status .button:hover {
+  background-color: var(--almost-black);
+  color: var(--almost-white);
+  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;
+}
diff --git a/web/assets/themes/brutalist.css b/web/assets/themes/brutalist.css
index ac4790ad1..e29509c21 100644
--- a/web/assets/themes/brutalist.css
+++ b/web/assets/themes/brutalist.css
@@ -90,7 +90,8 @@ html, body {
 }
 
 /* Code snippets */
-.status .text .content pre, .status .text .content code {
+.status .text .content pre,
+.status .text .content code {
   background: var(--almost-black);
   color: var(--almost-white);
 }
@@ -128,18 +129,35 @@ html, body {
   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;
+}