[chore] Fix some contrast issues in themes; performance tweaks (#3358)

web/assets/themes/blurple-dark.css

@@ -22,7 +22,7 @@
   --blue3: var(--blurple3);
 
   /* Basic page styling (background + foreground) */
-  --bg: linear-gradient(var(--blurple7), black);
+  --bg: var(--blurple7);
   --bg-accent: var(--blurple6);
   --fg: var(--blurple1);
   --fg-reduced: var(--blurple2);
@@ -44,6 +44,11 @@
   --boxshadow-border: 0.08rem solid black;
 }
 
+/* Main page background */
+body {
+  background: linear-gradient(var(--blurple7), black);
+}
+
 /* Scroll bar */
 html, body {
   scrollbar-color: var(--blurple4) var(--blurple7);

web/assets/themes/blurple-light.css

@@ -24,7 +24,7 @@
   --blue3: var(--blurple6);
 
   /* Basic page styling (background + foreground) */
-  --bg: linear-gradient(var(--blurple1), white);
+  --bg: var(--blurple1);
   --bg-accent: var(--white2);
   --fg: var(--gray1);
   --fg-reduced: var(--gray2);
@@ -46,6 +46,11 @@
   --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);

web/assets/themes/ecks-pee.css

@@ -66,11 +66,7 @@
   --blue3: var(--ecks-pee-white);
 
   /* Basic page styling (background + foreground) */
-  --bg: radial-gradient(
+  --bg: var(--ecks-pee-light-blue);
-    circle closest-corner at 20% 20%,
-    var(--ecks-pee-lighter-blue),
-    var(--ecks-pee-light-blue)
-  );
   --bg-accent: var(--ecks-pee-blue);
   --fg: var(--ecks-pee-white);
   --fg-reduced: var(--ecks-pee-lightest-blue);
@@ -122,6 +118,15 @@
   src: url(/assets/fonts/Atkinson-Hyperlegible-BoldItalic-102.woff) format('woff');
 }
 
+/* Main page background */
+body {
+  background: radial-gradient(
+    circle closest-corner at 20% 20%,
+    var(--ecks-pee-lighter-blue),
+    var(--ecks-pee-light-blue)
+  );
+}
+
 /* Scroll bar */
 html, body {
   /* Try Atkinson, fall back to default GtS fonts */

web/assets/themes/midnight-trip.css

@@ -19,8 +19,14 @@
   --blue3: var(--acid-green);
 }
 
+/* Main page background */
 body {
-  background: linear-gradient(90deg, var(--darkmagenta), black, var(--darkmagenta));
+  background: linear-gradient(
+    90deg,
+    var(--darkmagenta),
+    black,
+    var(--darkmagenta)
+  );
 }
 
 html, body {

web/assets/themes/rain-forest.css

@@ -8,21 +8,21 @@
    v1.0 by xmgz at github */
 
 :root {
-/* color definitions */
+  /* color definitions */
---dgreen1: #003333;
+  --dgreen1: #003333;
---dgreen2: #196C41;
+  --dgreen2: #196C41;
---dgreen3: #027C68;
+  --dgreen3: #027C68;
---dgreen4: #009933;
+  --dgreen4: #009933;
---dblue1: #141E46;   /* very dark blue */
+  --dblue1: #141E46;   /* very dark blue */
---typecolor: #F8F4EC;
+  --typecolor: #F8F4EC;
---linkcolor: #c0f0c0; /* very soft lime green */
+  --linkcolor: #c0f0c0; /* very soft lime green */
---sunny: #FCDC2A;
+  --sunny: #FCDC2A;
---lesssunny: #FF7431; /* papaya */
+  --lesssunny: #FF7431; /* papaya */
-/* wood/earth colors */
+  /* wood/earth colors */
---codebg: #3A2722;  /* darker caoba */
+  --codebg: #3A2722;  /* darker caoba */
---quotebg: #800000; /* maroon */
+  --quotebg: #800000; /* maroon */
-/* water, post's date and stats. User stats */
+  /* water, post's date and stats. User stats */
---fg-reduced: #BBEBFF;
+  --fg-reduced: #BBEBFF;
 
   /* Restyle basic colors  */
   --blue1: var(--dgreen2);
@@ -43,12 +43,9 @@
   --button-bg: var(--lesssunny);
   --button-fg: var(--dblue1);
 
-
-
   /* Used around statuses + other items */
   --boxshadow: 0 0.4rem 0.7rem -0.1rem rgba(252,220,42,0.15); /* subtle status glow */
   --boxshadow-border: 0.07rem solid var(--lesssunny);  /* thin papaya border */
-
 }
 
 

web/assets/themes/soft.css

@@ -20,7 +20,7 @@
   --br-inner: 0.4rem; 
 
   /* Basic page styling (background + foreground) */
-  --bg: linear-gradient(-90deg, var(--soft-blue), var(--soft-pink), white, var(--soft-pink), var(--soft-blue));
+  --bg: var(--soft-pink);
   --bg-accent: var(--soft-pink-translucent);
   --fg: var(--gray1);
   --fg-reduced: var(--gray3);
@@ -41,6 +41,18 @@
   --boxshadow-border: 0.08rem solid var(--gray8);
 }
 
+/* Main page background */
+body {
+  background: linear-gradient(
+    -90deg,
+    var(--soft-blue),
+    var(--soft-pink),
+    white,
+    var(--soft-pink),
+    var(--soft-blue)
+  );
+}
+
 /* Scroll bar */
 html, body {
   scrollbar-color: var(--orange2) var(--soft-pink);

web/assets/themes/solarized-dark.css

@@ -29,40 +29,29 @@
 
 :root {
   /* Define solarized palette */
-  --base3:     #002b36;
+  --base03:    #002b36; /* Background. */
-  --base2:     #073642;
+  --base02:    #073642; /* Background highlights. */
-  --base1:     #586e75;
+  --base01:    #586e75; /* Comments / secondary color. */
-  --base0:     #657b83;
+  --base0:     #839496; /* Body text / default code / primary content. */
-  --base00:    #839496;
+  --base1:     #93a1a1; /* Optional emphasized content. */
-  --base01:    #93a1a1;
+  --red:       #dc322f; /* Trim. */
-  --base02:    #eee8d5;
-  --base03:    #fdf6e3;
-  --yellow:    #b58900;
-  --orange:    #cb4b16;
-  --red:       #dc322f;
-  --magenta:   #d33682;
-  --violet:    #6c71c4;
-  --blue:      #268bd2;
-  --cyan:      #2aa198;
-  --green:     #859900;
 
   /* Override orange trim */
   --orange2: var(--red);
 
   /* Restyle basic colors to use Solarized */
-  --white1: var(--base3);
+  --white1: var(--base02);
-  --white2: var(--base2);
+  --white2: var(--base03);
-  --blue1: var(--cyan);
+  --blue2: var(--base0);
-  --blue2: var(--base03);
+  --blue3: var(--base1);
-  --blue3: var(--base02);
 
   /* Basic page styling (background + foreground) */
   --bg: var(--white1);
   --bg-accent: var(--white2);
-  --fg: var(--base02);
+  --fg-reduced: var(--base0);
-  --fg-reduced: var(--base01);
+  --fg: var(--base1);
 
-  /* Profile page styling (light) */
+  /* Profile page styling */
   --profile-bg: var(--white2);
 
   /* Solarize buttons */
@@ -76,10 +65,10 @@
   --status-focus-info-bg: var(--white2);
 
   /* Used around statuses + other items */
-  --boxshadow-border: 0.1rem solid var(--base1);
+  --boxshadow-border: 0.15rem solid var(--base01);
 
-  --plyr-video-control-color: var(--fg-reduced);
+  --plyr-video-control-color: var(--fg);
-  --plyr-video-control-color-hover: var(--fg);
+  --plyr-video-control-color-hover: var(--fg-reduced);
 }
 
 @font-face {
@@ -108,7 +97,7 @@ html, body {
   border: var(--boxshadow-border);
 }
 .status .media .media-wrapper details .unknown-attachment .placeholder {
-  color: var(--blue2);
+  color: var(--base01);
 }
 .status .media .media-wrapper details video.plyr-video {
   background: transparent;
@@ -126,22 +115,38 @@ html, body {
 pre, pre[class*="language-"],
 code, code[class*="language-"] {
   background-color: black;
-  color: var(--base03);
+  color: #93a1a1;
 }
 
 /* Block quotes */
 blockquote {
-  background-color: var(--bg-accent);
+  background-color: var(--base03);
-  color: var(--fg);
+  color: var(--base0);
 }
 
-button,
+button, .button,
-.button,
 .status .text-spoiler > summary .button {
   font-family: 'Noto Sans Mono', monospace;
 }
 
+.button {
+  color: var(--base0);
+  background: var(--base03);
+  border: var(--boxshadow-border);
+}
+
+.button:hover {
+  color: var(--base1);
+  background: var(--base02);
+  border: var(--boxshadow-border);
+}
+
 /* Ensure role badge readable */
 .profile .profile-header .basic-info .namerole .role.admin {
   color: var(--base03);
 }
+
+.col-header a {
+  font-size: 1.2rem;
+  font-weight: bold;
+}

web/assets/themes/solarized-light.css

@@ -1,6 +1,6 @@
 /*
-  theme-title: Solarized (light)
+  theme-title: Solarized (dark)
-  theme-description: Solarized sloth (light)
+  theme-description: Solarized sloth (dark)
 */
 
 /*
@@ -29,40 +29,29 @@
 
 :root {
   /* Define solarized palette */
-  --base03:    #002b36;
+  --base3:     #fdf6e3; /* Background. */
-  --base02:    #073642;
+  --base2:     #eee8d5; /* Background highlights. */
-  --base01:    #586e75;
+  --base1:     #93a1a1; /* Comments / secondary color. */
-  --base00:    #657b83;
+  --base00:    #657b83; /* Body text / default code / primary content. */
-  --base0:     #839496;
+  --base01:    #586e75; /* Optional emphasized content. */
-  --base1:     #93a1a1;
+  --red:       #cb4b16; /* Trim. */
-  --base2:     #eee8d5;
-  --base3:     #fdf6e3;
-  --yellow:    #b58900;
-  --orange:    #cb4b16;
-  --red:       #dc322f;
-  --magenta:   #d33682;
-  --violet:    #6c71c4;
-  --blue:      #268bd2;
-  --cyan:      #2aa198;
-  --green:     #859900;
 
   /* Override orange trim */
-  --orange2: var(--orange);
+  --orange2: var(--red);
 
   /* Restyle basic colors to use Solarized */
   --white1: var(--base3);
   --white2: var(--base2);
-  --blue1: var(--cyan);
+  --blue2: var(--base00);
-  --blue2: var(--base03);
+  --blue3: var(--base01);
-  --blue3: var(--base02);
 
   /* Basic page styling (background + foreground) */
   --bg: var(--white1);
   --bg-accent: var(--white2);
-  --fg: var(--base02);
+  --fg-reduced: var(--base00);
-  --fg-reduced: var(--base01);
+  --fg: var(--base01);
 
-  /* Profile page styling (light) */
+  /* Profile page styling */
   --profile-bg: var(--white2);
 
   /* Solarize buttons */
@@ -76,10 +65,10 @@
   --status-focus-info-bg: var(--white2);
 
   /* Used around statuses + other items */
-  --boxshadow-border: 0.1rem solid var(--base1);
+  --boxshadow-border: 0.15rem solid var(--base1);
 
-  --plyr-video-control-color: var(--fg-reduced);
+  --plyr-video-control-color: var(--fg);
-  --plyr-video-control-color-hover: var(--fg);
+  --plyr-video-control-color-hover: var(--fg-reduced);
 }
 
 @font-face {
@@ -108,7 +97,7 @@ html, body {
   border: var(--boxshadow-border);
 }
 .status .media .media-wrapper details .unknown-attachment .placeholder {
-  color: var(--blue2);
+  color: var(--base1);
 }
 .status .media .media-wrapper details video.plyr-video {
   background: transparent;
@@ -126,22 +115,38 @@ html, body {
 pre, pre[class*="language-"],
 code, code[class*="language-"] {
   background-color: black;
-  color: var(--base3);
+  color: #93a1a1;
 }
 
 /* Block quotes */
 blockquote {
-  background-color: var(--bg-accent);
+  background-color: var(--base3);
-  color: var(--fg);
+  color: var(--base00);
 }
 
-button,
+button, .button,
-.button,
 .status .text-spoiler > summary .button {
   font-family: 'Noto Sans Mono', monospace;
 }
 
+.button {
+  color: var(--base01);
+  background: var(--base2);
+  border: var(--boxshadow-border);
+}
+
+.button:hover {
+  color: var(--base00);
+  background: var(--base3);
+  border: var(--boxshadow-border);
+}
+
 /* Ensure role badge readable */
 .profile .profile-header .basic-info .namerole .role.admin {
-  color: var(--base03);
+  color: var(--base3);
+}
+
+.col-header a {
+  font-size: 1.2rem;
+  font-weight: bold;
 }

web/assets/themes/sunset-light.css

@@ -23,7 +23,7 @@
   --orange2: var(--pink);
 
   /* Basic page styling (background + foreground) */
-  --bg: linear-gradient(var(--eggplant1), var(--pink), var(--orange), var(--yellow), var(--eggshell));
+  --bg: var(--eggshell);
   --bg-accent: var(--white2);
   --fg: var(--eggplant4);
   --fg-reduced: var(--eggplant3);
@@ -45,6 +45,17 @@
   --boxshadow-border: 0.08rem solid var(--orange);
 }
 
+/* Main page background */
+body {
+  background: linear-gradient(
+    var(--eggplant1),
+    var(--pink),
+    var(--orange),
+    var(--yellow),
+    var(--eggshell)
+  );
+}
+
 /* Scroll bar */
 html, body {
   scrollbar-color: var(--pink) var(--eggshell);
@@ -55,12 +66,6 @@ html, body {
   color: var(--eggshell);
 }
 
-/* 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(--eggshell);
-}
-
 /* Profile fields */
 .profile .about-user .fields .field {
   border-bottom: 0.1rem solid var(--orange);