mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2024-11-15 22:11:04 +00:00
[chore] Fix some contrast issues in themes; performance tweaks (#3358)
This commit is contained in:
tobi
GitHub
parent
53ee6aef08
commit
82b9515a9d
9 changed files with 147 additions and 102 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue