summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--web/assets/themes/solarized-dark.css49
-rw-r--r--web/assets/themes/solarized-light.css77
2 files changed, 94 insertions, 32 deletions
diff --git a/web/assets/themes/solarized-dark.css b/web/assets/themes/solarized-dark.css
index 51bb19dd4..99dc6ea1f 100644
--- 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,18 +46,14 @@
--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);
@@ -65,7 +61,7 @@
--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
index 17af36c7e..bd357f7f3 100644
--- 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,18 +46,14 @@
--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);
@@ -65,7 +61,7 @@
--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,6 +124,7 @@ 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;
@@ -105,10 +132,12 @@ html, body {
/* 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);
}
generated by cgit v1.2.3 (git 2.46.0) at 2025-07-13 16:33:52 +0000