From 82b9515a9d5436eb58b5270e634c57a9e3281da7 Mon Sep 17 00:00:00 2001 From: tobi <31960611+tsmethurst@users.noreply.github.com> Date: Thu, 26 Sep 2024 17:00:13 +0200 Subject: [PATCH] [chore] Fix some contrast issues in themes; performance tweaks (#3358) --- web/assets/themes/blurple-dark.css | 7 ++- web/assets/themes/blurple-light.css | 7 ++- web/assets/themes/ecks-pee.css | 15 ++++-- web/assets/themes/midnight-trip.css | 8 ++- web/assets/themes/rain-forest.css | 33 ++++++------ web/assets/themes/soft.css | 14 ++++- web/assets/themes/solarized-dark.css | 71 +++++++++++++------------ web/assets/themes/solarized-light.css | 75 ++++++++++++++------------- web/assets/themes/sunset-light.css | 19 ++++--- 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);