summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--web/assets/themes/blurple-dark.css7
-rw-r--r--web/assets/themes/blurple-light.css7
-rw-r--r--web/assets/themes/ecks-pee.css15
-rw-r--r--web/assets/themes/midnight-trip.css8
-rw-r--r--web/assets/themes/rain-forest.css33
-rw-r--r--web/assets/themes/soft.css14
-rw-r--r--web/assets/themes/solarized-dark.css71
-rw-r--r--web/assets/themes/solarized-light.css75
-rw-r--r--web/assets/themes/sunset-light.css19
9 files changed, 147 insertions, 102 deletions
diff --git a/web/assets/themes/blurple-dark.css b/web/assets/themes/blurple-dark.css
index 60978ad00..2899ecf24 100644
--- a/web/assets/themes/blurple-dark.css
+++ b/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);
diff --git a/web/assets/themes/blurple-light.css b/web/assets/themes/blurple-light.css
index c3c6cbfa1..5076ba9cc 100644
--- a/web/assets/themes/blurple-light.css
+++ b/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);
diff --git a/web/assets/themes/ecks-pee.css b/web/assets/themes/ecks-pee.css
index 09e5da6a9..f474f800c 100644
--- a/web/assets/themes/ecks-pee.css
+++ b/web/assets/themes/ecks-pee.css
@@ -66,11 +66,7 @@
--blue3: var(--ecks-pee-white);
/* Basic page styling (background + foreground) */
- --bg: radial-gradient(
- circle closest-corner at 20% 20%,
- var(--ecks-pee-lighter-blue),
- var(--ecks-pee-light-blue)
- );
+ --bg: 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 */
diff --git a/web/assets/themes/midnight-trip.css b/web/assets/themes/midnight-trip.css
index 27da46c1d..d817d56ae 100644
--- a/web/assets/themes/midnight-trip.css
+++ b/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 {
diff --git a/web/assets/themes/rain-forest.css b/web/assets/themes/rain-forest.css
index fb4d6ba3f..3a890ef64 100644
--- a/web/assets/themes/rain-forest.css
+++ b/web/assets/themes/rain-forest.css
@@ -8,21 +8,21 @@
v1.0 by xmgz at github */
:root {
-/* color definitions */
---dgreen1: #003333;
---dgreen2: #196C41;
---dgreen3: #027C68;
---dgreen4: #009933;
---dblue1: #141E46; /* very dark blue */
---typecolor: #F8F4EC;
---linkcolor: #c0f0c0; /* very soft lime green */
---sunny: #FCDC2A;
---lesssunny: #FF7431; /* papaya */
-/* wood/earth colors */
---codebg: #3A2722; /* darker caoba */
---quotebg: #800000; /* maroon */
-/* water, post's date and stats. User stats */
---fg-reduced: #BBEBFF;
+ /* color definitions */
+ --dgreen1: #003333;
+ --dgreen2: #196C41;
+ --dgreen3: #027C68;
+ --dgreen4: #009933;
+ --dblue1: #141E46; /* very dark blue */
+ --typecolor: #F8F4EC;
+ --linkcolor: #c0f0c0; /* very soft lime green */
+ --sunny: #FCDC2A;
+ --lesssunny: #FF7431; /* papaya */
+ /* wood/earth colors */
+ --codebg: #3A2722; /* darker caoba */
+ --quotebg: #800000; /* maroon */
+ /* water, post's date and stats. User stats */
+ --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 */
-
}
diff --git a/web/assets/themes/soft.css b/web/assets/themes/soft.css
index 2eb641e35..05923d91d 100644
--- a/web/assets/themes/soft.css
+++ b/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);
diff --git a/web/assets/themes/solarized-dark.css b/web/assets/themes/solarized-dark.css
index f642e0374..51bb19dd4 100644
--- a/web/assets/themes/solarized-dark.css
+++ b/web/assets/themes/solarized-dark.css
@@ -29,40 +29,29 @@
:root {
/* Define solarized palette */
- --base3: #002b36;
- --base2: #073642;
- --base1: #586e75;
- --base0: #657b83;
- --base00: #839496;
- --base01: #93a1a1;
- --base02: #eee8d5;
- --base03: #fdf6e3;
- --yellow: #b58900;
- --orange: #cb4b16;
- --red: #dc322f;
- --magenta: #d33682;
- --violet: #6c71c4;
- --blue: #268bd2;
- --cyan: #2aa198;
- --green: #859900;
+ --base03: #002b36; /* Background. */
+ --base02: #073642; /* Background highlights. */
+ --base01: #586e75; /* Comments / secondary color. */
+ --base0: #839496; /* Body text / default code / primary content. */
+ --base1: #93a1a1; /* Optional emphasized content. */
+ --red: #dc322f; /* Trim. */
/* Override orange trim */
--orange2: var(--red);
/* Restyle basic colors to use Solarized */
- --white1: var(--base3);
- --white2: var(--base2);
- --blue1: var(--cyan);
- --blue2: var(--base03);
- --blue3: var(--base02);
+ --white1: var(--base02);
+ --white2: var(--base03);
+ --blue2: var(--base0);
+ --blue3: var(--base1);
/* Basic page styling (background + foreground) */
--bg: var(--white1);
--bg-accent: var(--white2);
- --fg: var(--base02);
- --fg-reduced: var(--base01);
+ --fg-reduced: var(--base0);
+ --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-hover: var(--fg);
+ --plyr-video-control-color: 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);
- color: var(--fg);
+ background-color: var(--base03);
+ 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;
+}
diff --git a/web/assets/themes/solarized-light.css b/web/assets/themes/solarized-light.css
index 8801c4438..17af36c7e 100644
--- a/web/assets/themes/solarized-light.css
+++ b/web/assets/themes/solarized-light.css
@@ -1,6 +1,6 @@
/*
- theme-title: Solarized (light)
- theme-description: Solarized sloth (light)
+ theme-title: Solarized (dark)
+ theme-description: Solarized sloth (dark)
*/
/*
@@ -29,40 +29,29 @@
:root {
/* Define solarized palette */
- --base03: #002b36;
- --base02: #073642;
- --base01: #586e75;
- --base00: #657b83;
- --base0: #839496;
- --base1: #93a1a1;
- --base2: #eee8d5;
- --base3: #fdf6e3;
- --yellow: #b58900;
- --orange: #cb4b16;
- --red: #dc322f;
- --magenta: #d33682;
- --violet: #6c71c4;
- --blue: #268bd2;
- --cyan: #2aa198;
- --green: #859900;
+ --base3: #fdf6e3; /* Background. */
+ --base2: #eee8d5; /* Background highlights. */
+ --base1: #93a1a1; /* Comments / secondary color. */
+ --base00: #657b83; /* Body text / default code / primary content. */
+ --base01: #586e75; /* Optional emphasized content. */
+ --red: #cb4b16; /* Trim. */
/* 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(--base03);
- --blue3: var(--base02);
+ --blue2: var(--base00);
+ --blue3: var(--base01);
/* Basic page styling (background + foreground) */
--bg: var(--white1);
--bg-accent: var(--white2);
- --fg: var(--base02);
- --fg-reduced: var(--base01);
+ --fg-reduced: var(--base00);
+ --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-hover: var(--fg);
+ --plyr-video-control-color: 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);
- color: var(--fg);
+ background-color: var(--base3);
+ 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;
}
diff --git a/web/assets/themes/sunset-light.css b/web/assets/themes/sunset-light.css
index 25bf1fad7..a37fa7fb7 100644
--- a/web/assets/themes/sunset-light.css
+++ b/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);
generated by cgit v1.2.3 (git 2.46.0) at 2025-07-13 16:23:35 +0000