mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2024-11-24 12:46:38 +00:00
[chore/themes] Tweak colors on new themes (#3397)
This commit is contained in:
parent
c023bd30f3
commit
02470db5f6
|
@ -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);
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue