From ac3f195b56c2ea67818ac90fe4bdc057af672471 Mon Sep 17 00:00:00 2001 From: tobi <31960611+tsmethurst@users.noreply.github.com> Date: Tue, 26 Mar 2024 12:02:09 +0100 Subject: [PATCH] [chore/frontend] Adjust contrast, mute blurple a bit (#2785) --- web/assets/themes/blurple-dark.css | 58 ++++++++++++++--------------- web/assets/themes/blurple-light.css | 44 +++++++++++----------- web/assets/themes/midnight-trip.css | 24 +----------- web/assets/themes/sunset-light.css | 6 +++ 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);