[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
commit 82b9515a9d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 147 additions and 102 deletions

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