felixfoertsch/tildes
1
0
Fork 0
mirror of https://gitlab.com/tildes/tildes.git synced 2026-04-17 14:59:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

CSS: replace some custom props with native values

Browse Source 
This isn't perfectly equivalent in some cases, but it's a barely
noticeable difference, and it's nice to not have all of these extra
custom properties like "--button-darkened-8-color" for an extremely
niche usage.
This commit is contained in:
Deimos
2020-09-28 17:03:02 -06:00
parent 135a010aa4
commit 082e3b51a1
4 changed files with 22 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
tildes/scss/modules/_btn.scss
View File

@@ -105,7 +105,7 @@
&.btn-used:hover {
background-color: $color;
color: var(--white-color);
color: #fff;
}
}
@@ -205,8 +205,7 @@
border-color: var(--button-color);
&:hover {
background-color: var(--button-darkened-10-color);
border-color: var(--button-darkened-10-color);
filter: brightness(90%);
}
&:visited {
@@ -216,11 +215,10 @@
.btn-used {
color: var(--button-used-color);
border-color: var(--button-used-darkened-3-color);
border-color: var(--button-used-color);
&:hover {
background-color: var(--button-used-darkened-3-color);
border-color: var(--button-used-darkened-8-color);
color: var(--white-color);
filter: brightness(95%);
color: #fff;
}
}

3
tildes/scss/modules/_topic.scss
View File

@@ -209,8 +209,7 @@
border-color: transparent;
&:hover {
background-color: var(--button-darkened-3-color);
border-color: var(--button-darkened-8-color);
background-color: var(--button-color);
}
.topic-voting-votes {

4
tildes/scss/themes/_default.scss
View File

@@ -3,7 +3,6 @@ $default-theme: (
"alert": #e66b00,
"background-primary": #fff,
"background-secondary": #eee,
"black": #000,
"border": #ccc,
"button": #1460aa,
"comment-label-exemplary": #1460aa,
@@ -26,8 +25,7 @@ $default-theme: (
"syntax-literal": #2aa198, // Solarized
"syntax-string": #2aa198, // Solarized
"topic-tag-spoiler": #e66b00,
"warning": #e66b00,
"white": #fff
"warning": #e66b00
);
body {

39
tildes/scss/themes/_theme_mixins.scss
View File

@@ -188,32 +188,26 @@
--button-by-brightness-color:
#{choose-by-brightness(
map-get($theme, "button"),
map-get($theme, "black"),
map-get($theme, "white")
#000,
#fff
)};
--button-transparent-color: #{rgba(map-get($theme, "button"), 0.2)};
--button-darkened-3-color: #{darken(map-get($theme, "button"), 3%)};
--button-darkened-8-color: #{darken(map-get($theme, "button"), 8%)};
--button-darkened-10-color: #{darken(map-get($theme, "button"), 10%)};
--button-used-color: #{map-get($theme, "button-used")};
--button-used-darkened-3-color: #{darken(map-get($theme, "button-used"), 3%)};
--button-used-darkened-8-color: #{darken(map-get($theme, "button-used"), 8%)};
--error-color: #{map-get($theme, "error")};
--error-by-brightness-color:
#{choose-by-brightness(
map-get($theme, "error"),
map-get($theme, "black"),
map-get($theme, "white")
#000,
#fff
)};
--foreground-extreme-color:
#{choose-by-brightness(
map-get($theme, "background-primary"),
map-get($theme, "black"),
map-get($theme, "white")
#000,
#fff
)};
--foreground-highlight-color: #{map-get($theme, "foreground-highlight")};
--foreground-mixed-color:
@@ -225,7 +219,7 @@
--foreground-secondary-color: #{map-get($theme, "foreground-secondary")};
--link-color: #{map-get($theme, "link")};
--link-hover-color: #{darken(map-get($theme, "link"), 5%)};
--link-hover-color: #{map-get($theme, "link-hover")};
--link-visited-color: #{map-get($theme, "link-visited")};
--stripe-mine-color: #{map-get($theme, "stripe-mine")};
@@ -243,11 +237,11 @@
// Colors for the special topic tags
@if $is-light {
--topic-tag-nsfw-color: #{map-get($theme, "topic-tag-nsfw")};
--topic-tag-nsfw-foreground-color: #{map-get($theme, "white")};
--topic-tag-nsfw-foreground-color: #fff;
--topic-tag-nsfw-border-color: transparent;
--topic-tag-spoiler-color: #{map-get($theme, "topic-tag-spoiler")};
--topic-tag-spoiler-foreground-color: #{map-get($theme, "white")};
--topic-tag-spoiler-foreground-color: #fff;
--topic-tag-spoiler-border-color: transparent;
} @else {
--topic-tag-nsfw-color: transparent;
@@ -264,15 +258,12 @@
// Colors for warning toasts
@if $is-light {
--warning-background-color: #{rgba(map-get($theme, "warning"), 0.9)};
--warning-foreground-color: #{map-get($theme, "black")};
--warning-foreground-color: #000;
} @else {
--warning-background-color: transparent;
--warning-foreground-color: #{map-get($theme, "warning")};
}
// Colors that were hardcoded in previously.
--white-color: #{map-get($theme, "white")};
// Variables for the comment labels.
@if $is-light {
--background-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")};
@@ -287,11 +278,11 @@
--comment-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")};
--comment-label-malice-color: #{map-get($theme, "comment-label-malice")};
--foreground-label-exemplary-color: #{map-get($theme, "white")};
--foreground-label-joke-color: #{map-get($theme, "white")};
--foreground-label-noise-color: #{map-get($theme, "white")};
--foreground-label-offtopic-color: #{map-get($theme, "white")};
--foreground-label-malice-color: #{map-get($theme, "white")};
--foreground-label-exemplary-color: #fff;
--foreground-label-joke-color: #fff;
--foreground-label-noise-color: #fff;
--foreground-label-offtopic-color: #fff;
--foreground-label-malice-color: #fff;
} @else {
--background-label-exemplary-color: transparent;
--background-label-joke-color: transparent;