Browse Source

CSS: replace some custom props with native values

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.
merge-requests/126/merge
Deimos 4 years ago
parent
commit
082e3b51a1
  1. 12
      tildes/scss/modules/_btn.scss
  2. 3
      tildes/scss/modules/_topic.scss
  3. 4
      tildes/scss/themes/_default.scss
  4. 39
      tildes/scss/themes/_theme_mixins.scss

12
tildes/scss/modules/_btn.scss

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

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

4
tildes/scss/themes/_default.scss

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

39
tildes/scss/themes/_theme_mixins.scss

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

Loading…
Cancel
Save