mirrors
/
gotosocial
mirror of
1
Fork 0
Code Issues Releases Activity

[chore] Fix some contrast issues in themes; performance tweaks (#3358)

This commit is contained in:
tobi 2024-09-26 17:00:13 +02:00 committed by GitHub
parent 53ee6aef08
commit 82b9515a9d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 147 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/assets/themes/blurple-dark.css
View File

@ -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);

7
web/assets/themes/blurple-light.css
View File

@ -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);

15
web/assets/themes/ecks-pee.css
View File

@ -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 */

8
web/assets/themes/midnight-trip.css
View File

@ -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 {

3
web/assets/themes/rain-forest.css
View File

@ -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 */
}

14
web/assets/themes/soft.css
View File

@ -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);

71
web/assets/themes/solarized-dark.css
View File

@ -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;
}

75
web/assets/themes/solarized-light.css
View File

@ -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;
}

19
web/assets/themes/sunset-light.css
View File

@ -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);