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

[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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/assets/themes/moonlight-hunt.css
View File

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

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

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