summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--web/assets/themes/blurple-dark.css58
-rw-r--r--web/assets/themes/blurple-light.css44
-rw-r--r--web/assets/themes/midnight-trip.css24
-rw-r--r--web/assets/themes/sunset-light.css6
4 files changed, 56 insertions, 76 deletions
diff --git a/web/assets/themes/blurple-dark.css b/web/assets/themes/blurple-dark.css
index 7e4a9cc9a..60978ad00 100644
--- a/web/assets/themes/blurple-dark.css
+++ b/web/assets/themes/blurple-dark.css
@@ -5,18 +5,16 @@
:root {
/* Define our nice blurple palette */
- --blurple1: #ffffff;
- --blurple2: #ebe6f8;
- --blurple3: #d6cceb;
- --blurple4: #c2b3e1;
- --blurple5: #ad99d7;
- --blurple6: #9980cd;
- --blurple7: #8566c2;
- --blurple8: #704db8;
- --blurple9: #5c33ae;
- --blurple10: #471aa4;
- --blurple11: #33009a;
- --blurple12: #170044;
+ --blurple1: #ebe6f8;
+ --blurple2: #d6cceb;
+ --blurple3: #c2b3e1;
+ --blurple4: #aa60ff;
+ --blurple5: #783d9f;
+ --blurple6: #2d2b55;
+ --blurple7: #1f1f41;
+
+ /* Override orange trim */
+ --orange2: #fad000;
/* Restyle basic colors to use blurple */
--blue1: var(--blurple1);
@@ -24,23 +22,23 @@
--blue3: var(--blurple3);
/* Basic page styling (background + foreground) */
- --bg: var(--blurple12);
- --bg-accent: var(--blurple11);
+ --bg: linear-gradient(var(--blurple7), black);
+ --bg-accent: var(--blurple6);
--fg: var(--blurple1);
- --fg-reduced: var(--blurple3);
+ --fg-reduced: var(--blurple2);
- /* Profile page styling (light) */
- --profile-bg: var(--blurple11);
+ /* Profile page styling */
+ --profile-bg: var(--blurple6);
/* Blurpleize buttons */
--button-bg: var(--blurple2);
- --button-fg: var(--blurple11);
+ --button-fg: var(--blurple5);
/* Blurpleize statuses */
- --status-bg: var(--blurple11);
- --status-focus-bg: var(--blurple11);
- --status-info-bg: var(--blurple9);
- --status-focus-info-bg: var(--blurple9);
+ --status-bg: var(--blurple6);
+ --status-focus-bg: var(--blurple6);
+ --status-info-bg: var(--blurple5);
+ --status-focus-info-bg: var(--blurple5);
/* Used around statuses + other items */
--boxshadow-border: 0.08rem solid black;
@@ -48,26 +46,26 @@
/* Scroll bar */
html, body {
- scrollbar-color: var(--blurple8) var(--blurple12);
+ scrollbar-color: var(--blurple4) var(--blurple7);
}
/* Profile fields */
.profile .about-user .fields .field {
- border-bottom: 0.1rem solid var(--blurple8);
+ border-bottom: 0.1rem solid var(--blurple4);
}
.profile .about-user .fields .field:first-child {
- border-top: 0.1rem solid var(--blurple8);
+ border-top: 0.1rem solid var(--blurple4);
}
/* Status media */
.status .media .media-wrapper {
- border: 0.08rem solid var(--blurple9);
+ border: 0.08rem solid var(--blurple5);
}
.status .media .media-wrapper details .unknown-attachment .placeholder {
color: var(--blue2);
}
.status .media .media-wrapper details video.plyr-video {
- background: var(--blurple11);
+ background: var(--blurple6);
}
/* Status polls */
@@ -75,18 +73,18 @@ html, body {
background-color: var(--bg);
}
.status .text .poll .poll-info {
- background-color: var(--blurple11);
+ background-color: var(--blurple6);
}
/* Code snippets */
pre, pre[class*="language-"],
code, code[class*="language-"] {
- background-color: var(--blurple12);
+ background-color: var(--blurple7);
color: var(--fg-reduced);
}
/* Block quotes */
blockquote {
- background-color: var(--blurple12);
+ background-color: var(--blurple7);
color: var(--fg-reduced);
}
diff --git a/web/assets/themes/blurple-light.css b/web/assets/themes/blurple-light.css
index 7f5811401..c3c6cbfa1 100644
--- a/web/assets/themes/blurple-light.css
+++ b/web/assets/themes/blurple-light.css
@@ -5,28 +5,26 @@
:root {
/* Define our nice blurple palette */
- --blurple1: #ffffff;
- --blurple2: #ebe6f8;
- --blurple3: #d6cceb;
- --blurple4: #c2b3e1;
- --blurple5: #ad99d7;
- --blurple6: #9980cd;
- --blurple7: #8566c2;
- --blurple8: #704db8;
- --blurple9: #5c33ae;
- --blurple10: #471aa4;
- --blurple11: #33009a;
- --blurple12: #170044;
+ --blurple1: #ebe6f8;
+ --blurple2: #d6cceb;
+ --blurple3: #c2b3e1;
+ --blurple4: #aa60ff;
+ --blurple5: #783d9f;
+ --blurple6: #2d2b55;
+ --blurple7: #1f1f41;
+
+ /* Override orange trim */
+ --orange2: #700000;
/* Restyle basic colors to use blurple */
--white1: var(--blurple2);
--white2: var(--blurple3);
- --blue1: var(--blurple6);
- --blue2: var(--blurple8);
- --blue3: var(--blurple10);
+ --blue1: var(--blurple4);
+ --blue2: var(--blurple5);
+ --blue3: var(--blurple6);
/* Basic page styling (background + foreground) */
- --bg: linear-gradient(var(--blurple2), var(--blurple1));
+ --bg: linear-gradient(var(--blurple1), white);
--bg-accent: var(--white2);
--fg: var(--gray1);
--fg-reduced: var(--gray2);
@@ -45,25 +43,25 @@
--status-focus-info-bg: var(--white2);
/* Used around statuses + other items */
- --boxshadow-border: 0.08rem solid var(--blurple10);
+ --boxshadow-border: 0.08rem solid var(--blurple6);
}
/* Scroll bar */
html, body {
- scrollbar-color: var(--blurple8) var(--blurple2);
+ scrollbar-color: var(--blurple5) var(--blurple2);
}
/* Profile fields */
.profile .about-user .fields .field {
- border-bottom: 0.1rem solid var(--blurple10);
+ border-bottom: 0.1rem solid var(--blurple6);
}
.profile .about-user .fields .field:first-child {
- border-top: 0.1rem solid var(--blurple10);
+ border-top: 0.1rem solid var(--blurple6);
}
/* Status media */
.status .media .media-wrapper {
- border: 0.08rem solid var(--blurple10);
+ border: 0.08rem solid var(--blurple6);
}
.status .media .media-wrapper details .unknown-attachment .placeholder {
color: var(--blue2);
@@ -83,12 +81,12 @@ html, body {
/* Code snippets */
pre, pre[class*="language-"],
code, code[class*="language-"] {
- background-color: var(--blurple12);
+ background-color: var(--blurple7);
color: var(--blurple2);
}
/* Block quotes */
blockquote {
background-color: var(--blurple1);
- color: var(--blurple12);
+ color: var(--blurple7);
}
diff --git a/web/assets/themes/midnight-trip.css b/web/assets/themes/midnight-trip.css
index c6b1623ee..27da46c1d 100644
--- a/web/assets/themes/midnight-trip.css
+++ b/web/assets/themes/midnight-trip.css
@@ -9,8 +9,6 @@
--acid-green-light: #79FF4D;
--acid-green-dark: #269900;
--magenta: rgb(153, 50, 204);
- --darkred: rgb(58, 0, 15);
- --darkblue: rgb(0, 0, 58);
--darkmagenta: rgb(47, 1, 65);
/* Override */
@@ -22,27 +20,7 @@
}
body {
- background: linear-gradient(-45deg, black, var(--darkmagenta), var(--darkblue), var(--darkred));
- background-size: 400% 400%;
- height: 100%;
-}
-
-@media not (prefers-reduced-motion) {
- body {
- animation: gradient 30s ease infinite;
- }
-
- @keyframes gradient {
- 0% {
- background-position: 0% 50%;
- }
- 50% {
- background-position: 100% 50%;
- }
- 100% {
- background-position: 0% 50%;
- }
- }
+ background: linear-gradient(90deg, var(--darkmagenta), black, var(--darkmagenta));
}
html, body {
diff --git a/web/assets/themes/sunset-light.css b/web/assets/themes/sunset-light.css
index c9612e36b..d6c33d720 100644
--- a/web/assets/themes/sunset-light.css
+++ b/web/assets/themes/sunset-light.css
@@ -50,10 +50,16 @@ html, body {
scrollbar-color: var(--pink) var(--eggshell);
}
+/* Instance title color */
.page-header a h1 {
color: var(--eggshell);
}
+/* Role badge background */
+.profile .profile-header .basic-info .namerole .role {
+ 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-11-04 04:26:00 +0000