[chore/themes] Tweak colors on new themes (#3397)

This commit is contained in:
tobi 2024-10-06 13:05:13 +02:00 committed by GitHub
parent c023bd30f3
commit 02470db5f6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 48 additions and 36 deletions

View file

@ -30,14 +30,10 @@
/* Buttons */
--bloodshot: linear-gradient(
var(--blood-red) 0%,
var(--feral-orange) 2%,
var(--bright-red) 5%,
var(--blood-red) 40%,
var(--blood-red) 60%,
var(--bright-red) 95%,
var(--feral-orange) 98%,
var(--blood-red) 100%
var(--bright-red),
var(--blood-red),
var(--blood-red),
var(--bright-red)
);
--button-bg: var(--bloodshot);
--button-fg: var(--bleached-bone);

View file

@ -40,31 +40,31 @@
--orange2: var(--red);
/* Restyle basic colors to use Solarized */
--white1: var(--base02);
--white2: var(--base03);
--blue2: var(--base0);
--white1: var(--base03);
--white2: var(--base02);
--blue2: var(--base1);
--blue3: var(--base1);
/* Basic page styling (background + foreground) */
--bg: var(--base03);
--bg: var(--base02);
--bg-accent: var(--base02);
--fg-reduced: var(--base0);
--fg: var(--base1);
--fg: var(--base0);
/* Profile page styling */
--profile-bg: var(--white2);
/* Solarize statuses */
--status-bg: var(--white1);
--status-focus-bg: var(--white1);
--status-info-bg: var(--white2);
--status-focus-info-bg: var(--white2);
--status-bg: var(--base03);
--status-focus-bg: var(--base03);
--status-info-bg: var(--base02);
--status-focus-info-bg: var(--base02);
/* Used around statuses + other items */
--boxshadow-border: 0.1rem solid var(--base01);
--boxshadow-border: 0.15rem solid var(--base01);
--plyr-video-control-color: var(--fg);
--plyr-video-control-color-hover: var(--fg-reduced);
--plyr-video-control-color: var(--base1);
--plyr-video-control-color-hover: var(--base03);
}
@font-face {
@ -83,6 +83,7 @@ html, body {
/* Column headers */
.col-header {
border: var(--boxshadow-border);
color: var(--base1);
}
.profile .about-user .col-header {
@ -90,20 +91,32 @@ html, body {
margin-bottom: 0;
}
/* Instance title color */
.page-header a h1 {
color: var(--base1);
}
/* Header card */
.profile .profile-header {
border: var(--boxshadow-border);
background: var(--base03);
}
/* Fiddle around with borders on about sections */
.profile .about-user .fields,
.profile .about-user .bio,
.profile .about-user .accountstats {
background: var(--base03);
border-left: var(--boxshadow-border);
border-right: var(--boxshadow-border);
}
.profile .about-user .accountstats {
border-bottom: var(--boxshadow-border);
color: var(--base0);
}
.profile .about-user .fields {
padding-top: 0;
}
/* Profile fields */
@ -117,10 +130,11 @@ html, body {
/* Status media */
.status .media .media-wrapper {
border: var(--boxshadow-border);
background: var(--base02);
}
.status .media .media-wrapper details .unknown-attachment .placeholder {
color: var(--base01);
border: 0.2rem dashed var(--base01);
color: var(--base1);
border: 0.2rem dashed var(--base1);
}
.status .media .media-wrapper details video.plyr-video {
background: transparent;
@ -128,10 +142,11 @@ html, body {
/* Status polls */
.status .text .poll {
background-color: var(--white2);
background-color: var(--base03);
border: var(--boxshadow-border);
}
.status .text .poll .poll-info {
background-color: var(--white1);
background-color: var(--base03);
}
/* Code snippets */
@ -153,23 +168,24 @@ button, .button,
}
.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 {
.button:hover {
color: var(--base0);
}
/* Distinguish bot icon from background */
.profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper {
background: var(--base03);
border: var(--boxshadow-border);
}
/* Ensure role badge readable */
.profile .profile-header .basic-info .namerole .role.admin {
color: var(--base1);
}
/* Distinguish bot icon */
.profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper {
border: var(--boxshadow-border);
color: var(--base1);
}