[chore] final bits of fiddling with solarized (#3364)

* [chore] final bits of fiddling with solarized

* block quote
This commit is contained in:
tobi 2024-09-27 13:14:47 +02:00 committed by GitHub
parent 2f582e2e33
commit c1c8849322
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 94 additions and 32 deletions

View File

@ -1,6 +1,6 @@
/* /*
theme-title: Solarized (dark) theme-title: Solarized dark
theme-description: Solarized sloth (dark) theme-description: Dark green and grey solarized theme with red trim
*/ */
/* /*
@ -46,18 +46,14 @@
--blue3: var(--base1); --blue3: var(--base1);
/* Basic page styling (background + foreground) */ /* Basic page styling (background + foreground) */
--bg: var(--white1); --bg: var(--base03);
--bg-accent: var(--white2); --bg-accent: var(--base02);
--fg-reduced: var(--base0); --fg-reduced: var(--base0);
--fg: var(--base1); --fg: var(--base1);
/* Profile page styling */ /* Profile page styling */
--profile-bg: var(--white2); --profile-bg: var(--white2);
/* Solarize buttons */
--button-bg: var(--blue2);
--button-fg: var(--white1);
/* Solarize statuses */ /* Solarize statuses */
--status-bg: var(--white1); --status-bg: var(--white1);
--status-focus-bg: var(--white1); --status-focus-bg: var(--white1);
@ -65,7 +61,7 @@
--status-focus-info-bg: var(--white2); --status-focus-info-bg: var(--white2);
/* Used around statuses + other items */ /* Used around statuses + other items */
--boxshadow-border: 0.15rem solid var(--base01); --boxshadow-border: 0.1rem solid var(--base01);
--plyr-video-control-color: var(--fg); --plyr-video-control-color: var(--fg);
--plyr-video-control-color-hover: var(--fg-reduced); --plyr-video-control-color-hover: var(--fg-reduced);
@ -84,6 +80,32 @@ html, body {
scrollbar-color: var(--orange2) var(--white1) ; scrollbar-color: var(--orange2) var(--white1) ;
} }
/* Column headers */
.col-header {
border: var(--boxshadow-border);
}
.profile .about-user .col-header {
border-bottom: none;
margin-bottom: 0;
}
/* Header card */
.profile .profile-header {
border: var(--boxshadow-border);
}
/* Fiddle around with borders on about sections */
.profile .about-user .fields,
.profile .about-user .bio,
.profile .about-user .accountstats {
border-left: var(--boxshadow-border);
border-right: var(--boxshadow-border);
}
.profile .about-user .accountstats {
border-bottom: var(--boxshadow-border);
}
/* Profile fields */ /* Profile fields */
.profile .about-user .fields .field { .profile .about-user .fields .field {
border-bottom: var(--boxshadow-border); border-bottom: var(--boxshadow-border);
@ -98,6 +120,7 @@ html, body {
} }
.status .media .media-wrapper details .unknown-attachment .placeholder { .status .media .media-wrapper details .unknown-attachment .placeholder {
color: var(--base01); color: var(--base01);
border: 0.2rem dashed var(--base01);
} }
.status .media .media-wrapper details video.plyr-video { .status .media .media-wrapper details video.plyr-video {
background: transparent; background: transparent;
@ -143,10 +166,10 @@ button, .button,
/* Ensure role badge readable */ /* Ensure role badge readable */
.profile .profile-header .basic-info .namerole .role.admin { .profile .profile-header .basic-info .namerole .role.admin {
color: var(--base03); color: var(--base0);
} }
.col-header a { /* Distinguish bot icon from background */
font-size: 1.2rem; .profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper {
font-weight: bold; border: var(--boxshadow-border);
} }

View File

@ -1,6 +1,6 @@
/* /*
theme-title: Solarized (dark) theme-title: Solarized light
theme-description: Solarized sloth (dark) theme-description: Beige and grey solarized theme with orange trim
*/ */
/* /*
@ -46,18 +46,14 @@
--blue3: var(--base01); --blue3: var(--base01);
/* Basic page styling (background + foreground) */ /* Basic page styling (background + foreground) */
--bg: var(--white1); --bg: var(--base2);
--bg-accent: var(--white2); --bg-accent: var(--base3);
--fg-reduced: var(--base00); --fg-reduced: var(--base00);
--fg: var(--base01); --fg: var(--base01);
/* Profile page styling */ /* Profile page styling */
--profile-bg: var(--white2); --profile-bg: var(--white2);
/* Solarize buttons */
--button-bg: var(--blue2);
--button-fg: var(--white1);
/* Solarize statuses */ /* Solarize statuses */
--status-bg: var(--white1); --status-bg: var(--white1);
--status-focus-bg: var(--white1); --status-focus-bg: var(--white1);
@ -65,7 +61,7 @@
--status-focus-info-bg: var(--white2); --status-focus-info-bg: var(--white2);
/* Used around statuses + other items */ /* Used around statuses + other items */
--boxshadow-border: 0.15rem solid var(--base1); --boxshadow-border: 0.1rem solid var(--base1);
--plyr-video-control-color: var(--fg); --plyr-video-control-color: var(--fg);
--plyr-video-control-color-hover: var(--fg-reduced); --plyr-video-control-color-hover: var(--fg-reduced);
@ -84,6 +80,36 @@ html, body {
scrollbar-color: var(--orange2) var(--white1) ; scrollbar-color: var(--orange2) var(--white1) ;
} }
/* Column headers */
.col-header {
border: var(--boxshadow-border);
background: var(--base3);
}
.profile .about-user .col-header {
border-bottom: none;
margin-bottom: 0;
}
/* Header card */
.profile .profile-header {
border: var(--boxshadow-border);
background: var(--base3);
}
/* Fiddle around with borders on about sections */
.profile .about-user .fields,
.profile .about-user .bio,
.profile .about-user .accountstats {
background: var(--base3);
color: var(--base01);
border-left: var(--boxshadow-border);
border-right: var(--boxshadow-border);
}
.profile .about-user .accountstats {
border-bottom: var(--boxshadow-border);
}
/* Profile fields */ /* Profile fields */
.profile .about-user .fields .field { .profile .about-user .fields .field {
border-bottom: var(--boxshadow-border); border-bottom: var(--boxshadow-border);
@ -98,6 +124,7 @@ html, body {
} }
.status .media .media-wrapper details .unknown-attachment .placeholder { .status .media .media-wrapper details .unknown-attachment .placeholder {
color: var(--base1); color: var(--base1);
border: 0.2rem dashed var(--base1);
} }
.status .media .media-wrapper details video.plyr-video { .status .media .media-wrapper details video.plyr-video {
background: transparent; background: transparent;
@ -105,10 +132,12 @@ html, body {
/* Status polls */ /* Status polls */
.status .text .poll { .status .text .poll {
background-color: var(--white2); background-color: var(--base3);
border: var(--boxshadow-border);
} }
.status .text .poll .poll-info { .status .text .poll .poll-info {
background-color: var(--white1); background-color: var(--base3);
border: var(--boxshadow-border);
} }
/* Code snippets */ /* Code snippets */
@ -121,7 +150,7 @@ code, code[class*="language-"] {
/* Block quotes */ /* Block quotes */
blockquote { blockquote {
background-color: var(--base3); background-color: var(--base3);
color: var(--base00); color: var(--base01);
} }
button, .button, button, .button,
@ -131,22 +160,32 @@ button, .button,
.button { .button {
color: var(--base01); color: var(--base01);
background: var(--base2); background: var(--base3);
border: var(--boxshadow-border); border: var(--boxshadow-border);
} }
.button:hover { .button:hover {
color: var(--base00); color: var(--base01);
background: var(--base3); background: var(--base2);
border: var(--boxshadow-border); border: var(--boxshadow-border);
} }
/* Ensure role badge readable */ /* Ensure role badge readable */
.profile .profile-header .basic-info .namerole .role.admin { .profile .profile-header .basic-info .namerole .role.admin {
color: var(--base3); background: var(--base3);
color: var(--base01);
} }
.col-header a { /* Back + next links */
font-size: 1.2rem; .backnextlinks {
font-weight: bold; padding: 0.5rem;
background: var(--base3);
border: var(--boxshadow-border);
border-radius: var(--br);
}
.page-footer {
margin-top: 2rem;
background-color: var(--base3);
border-top: var(--boxshadow-border);
} }