[chore] final bits of fiddling with solarized (#3364)

* [chore] final bits of fiddling with solarized * block quote
superseriousbusiness · Sep 27, 2024 · c1c8849 · c1c8849
1 parent 2f582e2
commit c1c8849
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 32 deletions.
diff --git a/web/assets/themes/solarized-dark.css b/web/assets/themes/solarized-dark.css
@@ -1,6 +1,6 @@
 /*
-  theme-title: Solarized (dark)
-  theme-description: Solarized sloth (dark)
+  theme-title: Solarized dark
+  theme-description: Dark green and grey solarized theme with red trim
 */
 
 /*
@@ -46,26 +46,22 @@
   --blue3: var(--base1);
 
   /* Basic page styling (background + foreground) */
-  --bg: var(--white1);
-  --bg-accent: var(--white2);
+  --bg: var(--base03);
+  --bg-accent: var(--base02);
   --fg-reduced: var(--base0);
   --fg: var(--base1);
 
   /* Profile page styling */
   --profile-bg: var(--white2);
 
-  /* Solarize buttons */
-  --button-bg: var(--blue2);
-  --button-fg: var(--white1);
-
   /* Solarize 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.15rem solid var(--base01);
+  --boxshadow-border: 0.1rem solid var(--base01);
 
   --plyr-video-control-color: var(--fg);
   --plyr-video-control-color-hover: var(--fg-reduced);
@@ -84,6 +80,32 @@ html, body {
   scrollbar-color: var(--orange2) var(--white1) ;
 }
 
+/* Column headers */
+.col-header {
+  border: var(--boxshadow-border);
+}
+
+.profile .about-user .col-header {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+/* Header card */
+.profile .profile-header {
+  border: var(--boxshadow-border);
+}
+
+/* Fiddle around with borders on about sections */
+.profile .about-user .fields,
+.profile .about-user .bio,
+.profile .about-user .accountstats {
+  border-left: var(--boxshadow-border);
+  border-right: var(--boxshadow-border);
+}
+.profile .about-user .accountstats {
+  border-bottom: var(--boxshadow-border);
+}
+
 /* Profile fields */
 .profile .about-user .fields .field {
   border-bottom: var(--boxshadow-border);
@@ -98,6 +120,7 @@ html, body {
 }
 .status .media .media-wrapper details .unknown-attachment .placeholder {
   color: var(--base01);
+  border: 0.2rem dashed var(--base01);
 }
 .status .media .media-wrapper details video.plyr-video {
   background: transparent;
@@ -143,10 +166,10 @@ button, .button,
 
 /* Ensure role badge readable */
 .profile .profile-header .basic-info .namerole .role.admin {
-  color: var(--base03);
+  color: var(--base0);
 }
 
-.col-header a {
-  font-size: 1.2rem;
-  font-weight: bold;
+/* Distinguish bot icon from background */
+.profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper {
+  border: var(--boxshadow-border);
 }
diff --git a/web/assets/themes/solarized-light.css b/web/assets/themes/solarized-light.css
@@ -1,6 +1,6 @@
 /*
-  theme-title: Solarized (dark)
-  theme-description: Solarized sloth (dark)
+  theme-title: Solarized light
+  theme-description: Beige and grey solarized theme with orange trim
 */
 
 /*
@@ -46,26 +46,22 @@
   --blue3: var(--base01);
 
   /* Basic page styling (background + foreground) */
-  --bg: var(--white1);
-  --bg-accent: var(--white2);
+  --bg: var(--base2);
+  --bg-accent: var(--base3);
   --fg-reduced: var(--base00);
   --fg: var(--base01);
 
   /* Profile page styling */
   --profile-bg: var(--white2);
 
-  /* Solarize buttons */
-  --button-bg: var(--blue2);
-  --button-fg: var(--white1);
-
   /* Solarize 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.15rem solid var(--base1);
+  --boxshadow-border: 0.1rem solid var(--base1);
 
   --plyr-video-control-color: var(--fg);
   --plyr-video-control-color-hover: var(--fg-reduced);
@@ -84,6 +80,36 @@ html, body {
   scrollbar-color: var(--orange2) var(--white1) ;
 }
 
+/* Column headers */
+.col-header {
+  border: var(--boxshadow-border);
+  background: var(--base3);
+}
+
+.profile .about-user .col-header {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+/* Header card */
+.profile .profile-header {
+  border: var(--boxshadow-border);
+  background: var(--base3);
+}
+
+/* Fiddle around with borders on about sections */
+.profile .about-user .fields,
+.profile .about-user .bio,
+.profile .about-user .accountstats {
+  background: var(--base3);
+  color: var(--base01);
+  border-left: var(--boxshadow-border);
+  border-right: var(--boxshadow-border);
+}
+.profile .about-user .accountstats {
+  border-bottom: var(--boxshadow-border);
+}
+
 /* Profile fields */
 .profile .about-user .fields .field {
   border-bottom: var(--boxshadow-border);
@@ -98,17 +124,20 @@ html, body {
 }
 .status .media .media-wrapper details .unknown-attachment .placeholder {
   color: var(--base1);
+  border: 0.2rem dashed var(--base1);
 }
 .status .media .media-wrapper details video.plyr-video {
   background: transparent;
 }
 
 /* Status polls */
 .status .text .poll {
-  background-color: var(--white2);
+  background-color: var(--base3);
+  border: var(--boxshadow-border);
 }
 .status .text .poll .poll-info {
-  background-color: var(--white1);
+  background-color: var(--base3);
+  border: var(--boxshadow-border);
 }
 
 /* Code snippets */
@@ -121,7 +150,7 @@ code, code[class*="language-"] {
 /* Block quotes */
 blockquote {
   background-color: var(--base3);
-  color: var(--base00);
+  color: var(--base01);
 }
 
 button, .button,
@@ -131,22 +160,32 @@ button, .button,
 
 .button {
   color: var(--base01);
-  background: var(--base2);
+  background: var(--base3);
   border: var(--boxshadow-border);
 }
 
 .button:hover {
-  color: var(--base00);
-  background: var(--base3);
+  color: var(--base01);
+  background: var(--base2);
   border: var(--boxshadow-border);
 }
 
 /* Ensure role badge readable */
 .profile .profile-header .basic-info .namerole .role.admin {
-  color: var(--base3);
+  background: var(--base3);
+  color: var(--base01);
+}
+
+/* Back + next links */
+.backnextlinks {
+  padding: 0.5rem;
+  background: var(--base3);
+  border: var(--boxshadow-border);
+  border-radius: var(--br);
 }
 
-.col-header a {
-  font-size: 1.2rem;
-  font-weight: bold;
+.page-footer {
+  margin-top: 2rem;
+  background-color: var(--base3);
+  border-top: var(--boxshadow-border);
 }