|
|
|
@ -10,12 +10,12 @@ |
|
|
|
} |
|
|
|
|
|
|
|
@function map-get-fallback($map, $preferred-key, $fallback-key) { |
|
|
|
// map-get that will fall back to a second key if the first isn't set |
|
|
|
// map.get that will fall back to a second key if the first isn't set |
|
|
|
@if (map-has-key($map, $preferred-key)) { |
|
|
|
@return map-get($map, $preferred-key); |
|
|
|
@return map.get($map, $preferred-key); |
|
|
|
} |
|
|
|
|
|
|
|
@return map-get($map, $fallback-key); |
|
|
|
@return map.get($map, $fallback-key); |
|
|
|
} |
|
|
|
|
|
|
|
@function init-theme($theme) { |
|
|
|
@ -62,27 +62,27 @@ |
|
|
|
$topic-tag-spoiler: map-get-fallback($theme, "topic-tag-spoiler", "warning"); |
|
|
|
|
|
|
|
// foreground-extreme: if not defined, use white on a dark bg and black on a light one |
|
|
|
$foreground-extreme: map-get($theme, "foreground-extreme"); |
|
|
|
$foreground-extreme: map.get($theme, "foreground-extreme"); |
|
|
|
$foreground-extreme: |
|
|
|
choose-by-brightness( |
|
|
|
map-get($theme, "background-primary"), |
|
|
|
map.get($theme, "background-primary"), |
|
|
|
#000, |
|
|
|
#fff, |
|
|
|
) !default; |
|
|
|
|
|
|
|
// foreground-middle: if not defined, mix foreground-primary and foreground-secondary |
|
|
|
$foreground-middle: map-get($theme, "foreground-middle"); |
|
|
|
$foreground-middle: map.get($theme, "foreground-middle"); |
|
|
|
$foreground-middle: |
|
|
|
mix( |
|
|
|
map-get($theme, "foreground-primary"), |
|
|
|
map-get($theme, "foreground-secondary") |
|
|
|
color.mix( |
|
|
|
map.get($theme, "foreground-primary"), |
|
|
|
map.get($theme, "foreground-secondary") |
|
|
|
) !default; |
|
|
|
|
|
|
|
// link-hover: if not defined, darken the link color slightly |
|
|
|
$link-hover: map-get($theme, "link-hover"); |
|
|
|
$link-hover: darken(map-get($theme, "link"), 5%) !default; |
|
|
|
$link-hover: map.get($theme, "link-hover"); |
|
|
|
$link-hover: color.adjust(map.get($theme, "link"), $lightness: -5%) !default; |
|
|
|
$new-theme: |
|
|
|
map-merge( |
|
|
|
map.merge( |
|
|
|
$theme, |
|
|
|
( |
|
|
|
"background-input": $background-input, |
|
|
|
@ -106,7 +106,7 @@ |
|
|
|
) |
|
|
|
); |
|
|
|
|
|
|
|
@return map-merge($default-theme, $new-theme); |
|
|
|
@return map.merge($default-theme, $new-theme); |
|
|
|
} |
|
|
|
|
|
|
|
@mixin minimal-hardcoded-theme($theme) { |
|
|
|
@ -117,9 +117,9 @@ |
|
|
|
@supports not (--test: green) { |
|
|
|
*, |
|
|
|
#sidebar { |
|
|
|
background-color: map-get($theme, "background-primary"); |
|
|
|
border-color: map-get($theme, "border"); |
|
|
|
color: map-get($theme, "foreground-primary"); |
|
|
|
background-color: map.get($theme, "background-primary"); |
|
|
|
border-color: map.get($theme, "border"); |
|
|
|
color: map.get($theme, "foreground-primary"); |
|
|
|
} |
|
|
|
|
|
|
|
a, |
|
|
|
@ -128,7 +128,7 @@ |
|
|
|
.btn-link, |
|
|
|
.nav-item a, |
|
|
|
.tab-item { |
|
|
|
color: map-get($theme, "link"); |
|
|
|
color: map.get($theme, "link"); |
|
|
|
} |
|
|
|
|
|
|
|
// "&" represents the <body> element itself |
|
|
|
@ -137,15 +137,15 @@ |
|
|
|
#site-header *, |
|
|
|
.comment-header, |
|
|
|
.comment-header * { |
|
|
|
background-color: map-get($theme, "background-secondary"); |
|
|
|
background-color: map.get($theme, "background-secondary"); |
|
|
|
} |
|
|
|
|
|
|
|
input, |
|
|
|
input[readonly], |
|
|
|
textarea, |
|
|
|
textarea[readonly], |
|
|
|
.form-select:not([multiple]):not([size]) { |
|
|
|
background-color: map-get($theme, "background-input"); |
|
|
|
.form-select:not([multiple], [size]) { |
|
|
|
background-color: map.get($theme, "background-input"); |
|
|
|
} |
|
|
|
|
|
|
|
.btn.btn-primary { |
|
|
|
@ -153,7 +153,7 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.text-secondary { |
|
|
|
color: map-get($theme, "foreground-secondary"); |
|
|
|
color: map.get($theme, "foreground-secondary"); |
|
|
|
} |
|
|
|
|
|
|
|
// Prevents the * rule from causing a <span> to override its parent |
|
|
|
@ -165,119 +165,105 @@ |
|
|
|
|
|
|
|
@mixin use-theme($selected-theme) { |
|
|
|
$theme: init-theme($selected-theme); |
|
|
|
$is-light: is-color-bright(map-get($theme, "background-primary")); |
|
|
|
$is-light: is-color-bright(map.get($theme, "background-primary")); |
|
|
|
|
|
|
|
@include minimal-hardcoded-theme($theme); |
|
|
|
|
|
|
|
// When creating CSS custom properties and using any of Sass' capabilities |
|
|
|
// you'll have to interpolate it with the Sass syntax `#{...}` as seen below. |
|
|
|
--alert-color: #{map-get($theme, "alert")}; |
|
|
|
|
|
|
|
--background-input-color: #{map-get($theme, "background-input")}; |
|
|
|
--alert-color: #{map.get($theme, "alert")}; |
|
|
|
--background-input-color: #{map.get($theme, "background-input")}; |
|
|
|
--background-mixed-color: |
|
|
|
#{mix( |
|
|
|
map-get($theme, "background-primary"), |
|
|
|
map-get($theme, "background-secondary") |
|
|
|
#{color.mix( |
|
|
|
map.get($theme, "background-primary"), |
|
|
|
map.get($theme, "background-secondary") |
|
|
|
)}; |
|
|
|
--background-primary-color: #{map-get($theme, "background-primary")}; |
|
|
|
--background-secondary-color: #{map-get($theme, "background-secondary")}; |
|
|
|
|
|
|
|
--border-color: #{map-get($theme, "border")}; |
|
|
|
|
|
|
|
--button-color: #{map-get($theme, "button")}; |
|
|
|
--background-primary-color: #{map.get($theme, "background-primary")}; |
|
|
|
--background-secondary-color: #{map.get($theme, "background-secondary")}; |
|
|
|
--border-color: #{map.get($theme, "border")}; |
|
|
|
--button-color: #{map.get($theme, "button")}; |
|
|
|
--button-by-brightness-color: |
|
|
|
#{choose-by-brightness( |
|
|
|
map-get($theme, "button"), |
|
|
|
map.get($theme, "button"), |
|
|
|
#000, |
|
|
|
#fff |
|
|
|
)}; |
|
|
|
--button-transparent-color: #{rgba(map-get($theme, "button"), 0.2)}; |
|
|
|
|
|
|
|
--button-used-color: #{map-get($theme, "button-used")}; |
|
|
|
|
|
|
|
--error-color: #{map-get($theme, "error")}; |
|
|
|
--button-transparent-color: #{rgba(map.get($theme, "button"), 0.2)}; |
|
|
|
--button-used-color: #{map.get($theme, "button-used")}; |
|
|
|
--error-color: #{map.get($theme, "error")}; |
|
|
|
--error-by-brightness-color: |
|
|
|
#{choose-by-brightness( |
|
|
|
map-get($theme, "error"), |
|
|
|
map.get($theme, "error"), |
|
|
|
#000, |
|
|
|
#fff |
|
|
|
)}; |
|
|
|
|
|
|
|
--foreground-extreme-color: |
|
|
|
#{choose-by-brightness( |
|
|
|
map-get($theme, "background-primary"), |
|
|
|
map.get($theme, "background-primary"), |
|
|
|
#000, |
|
|
|
#fff |
|
|
|
)}; |
|
|
|
--foreground-highlight-color: #{map-get($theme, "foreground-highlight")}; |
|
|
|
--foreground-highlight-color: #{map.get($theme, "foreground-highlight")}; |
|
|
|
--foreground-mixed-color: |
|
|
|
#{mix( |
|
|
|
map-get($theme, "foreground-primary"), |
|
|
|
map-get($theme, "foreground-highlight") |
|
|
|
#{color.mix( |
|
|
|
map.get($theme, "foreground-primary"), |
|
|
|
map.get($theme, "foreground-highlight") |
|
|
|
)}; |
|
|
|
--foreground-primary-color: #{map-get($theme, "foreground-primary")}; |
|
|
|
--foreground-secondary-color: #{map-get($theme, "foreground-secondary")}; |
|
|
|
|
|
|
|
--link-color: #{map-get($theme, "link")}; |
|
|
|
--link-hover-color: #{map-get($theme, "link-hover")}; |
|
|
|
--link-visited-color: #{map-get($theme, "link-visited")}; |
|
|
|
|
|
|
|
--stripe-mine-color: #{map-get($theme, "stripe-mine")}; |
|
|
|
--stripe-target-color: #{map-get($theme, "stripe-target")}; |
|
|
|
|
|
|
|
--success-color: #{map-get($theme, "success")}; |
|
|
|
|
|
|
|
--syntax-builtin-color: #{map-get($theme, "syntax-builtin")}; |
|
|
|
--syntax-comment-color: #{map-get($theme, "syntax-comment")}; |
|
|
|
--syntax-constant-color: #{map-get($theme, "syntax-constant")}; |
|
|
|
--syntax-keyword-color: #{map-get($theme, "syntax-keyword")}; |
|
|
|
--syntax-literal-color: #{map-get($theme, "syntax-literal")}; |
|
|
|
--syntax-string-color: #{map-get($theme, "syntax-string")}; |
|
|
|
--foreground-primary-color: #{map.get($theme, "foreground-primary")}; |
|
|
|
--foreground-secondary-color: #{map.get($theme, "foreground-secondary")}; |
|
|
|
--link-color: #{map.get($theme, "link")}; |
|
|
|
--link-hover-color: #{map.get($theme, "link-hover")}; |
|
|
|
--link-visited-color: #{map.get($theme, "link-visited")}; |
|
|
|
--stripe-mine-color: #{map.get($theme, "stripe-mine")}; |
|
|
|
--stripe-target-color: #{map.get($theme, "stripe-target")}; |
|
|
|
--success-color: #{map.get($theme, "success")}; |
|
|
|
--syntax-builtin-color: #{map.get($theme, "syntax-builtin")}; |
|
|
|
--syntax-comment-color: #{map.get($theme, "syntax-comment")}; |
|
|
|
--syntax-constant-color: #{map.get($theme, "syntax-constant")}; |
|
|
|
--syntax-keyword-color: #{map.get($theme, "syntax-keyword")}; |
|
|
|
--syntax-literal-color: #{map.get($theme, "syntax-literal")}; |
|
|
|
--syntax-string-color: #{map.get($theme, "syntax-string")}; |
|
|
|
|
|
|
|
// Colors for the special topic tags |
|
|
|
@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: #fff; |
|
|
|
--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: #fff; |
|
|
|
--topic-tag-spoiler-border-color: transparent; |
|
|
|
} @else { |
|
|
|
--topic-tag-nsfw-color: transparent; |
|
|
|
--topic-tag-nsfw-foreground-color: #{map-get($theme, "topic-tag-nsfw")}; |
|
|
|
--topic-tag-nsfw-border-color: #{map-get($theme, "topic-tag-nsfw")}; |
|
|
|
|
|
|
|
--topic-tag-nsfw-foreground-color: #{map.get($theme, "topic-tag-nsfw")}; |
|
|
|
--topic-tag-nsfw-border-color: #{map.get($theme, "topic-tag-nsfw")}; |
|
|
|
--topic-tag-spoiler-color: transparent; |
|
|
|
--topic-tag-spoiler-foreground-color: #{map-get($theme, "topic-tag-spoiler")}; |
|
|
|
--topic-tag-spoiler-border-color: #{map-get($theme, "topic-tag-spoiler")}; |
|
|
|
--topic-tag-spoiler-foreground-color: #{map.get($theme, "topic-tag-spoiler")}; |
|
|
|
--topic-tag-spoiler-border-color: #{map.get($theme, "topic-tag-spoiler")}; |
|
|
|
} |
|
|
|
|
|
|
|
--warning-color: #{map-get($theme, "warning")}; |
|
|
|
--warning-color: #{map.get($theme, "warning")}; |
|
|
|
|
|
|
|
// Colors for warning toasts |
|
|
|
@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: #000; |
|
|
|
} @else { |
|
|
|
--warning-background-color: transparent; |
|
|
|
--warning-foreground-color: #{map-get($theme, "warning")}; |
|
|
|
--warning-foreground-color: #{map.get($theme, "warning")}; |
|
|
|
} |
|
|
|
|
|
|
|
// Variables for the comment labels. |
|
|
|
@if $is-light { |
|
|
|
--background-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")}; |
|
|
|
--background-label-joke-color: #{map-get($theme, "comment-label-joke")}; |
|
|
|
--background-label-noise-color: #{map-get($theme, "comment-label-noise")}; |
|
|
|
--background-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")}; |
|
|
|
--background-label-malice-color: #{map-get($theme, "comment-label-malice")}; |
|
|
|
|
|
|
|
--comment-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")}; |
|
|
|
--comment-label-joke-color: #{map-get($theme, "comment-label-joke")}; |
|
|
|
--comment-label-noise-color: #{map-get($theme, "comment-label-noise")}; |
|
|
|
--comment-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")}; |
|
|
|
--comment-label-malice-color: #{map-get($theme, "comment-label-malice")}; |
|
|
|
|
|
|
|
--background-label-exemplary-color: #{map.get($theme, "comment-label-exemplary")}; |
|
|
|
--background-label-joke-color: #{map.get($theme, "comment-label-joke")}; |
|
|
|
--background-label-noise-color: #{map.get($theme, "comment-label-noise")}; |
|
|
|
--background-label-offtopic-color: #{map.get($theme, "comment-label-offtopic")}; |
|
|
|
--background-label-malice-color: #{map.get($theme, "comment-label-malice")}; |
|
|
|
--comment-label-exemplary-color: #{map.get($theme, "comment-label-exemplary")}; |
|
|
|
--comment-label-joke-color: #{map.get($theme, "comment-label-joke")}; |
|
|
|
--comment-label-noise-color: #{map.get($theme, "comment-label-noise")}; |
|
|
|
--comment-label-offtopic-color: #{map.get($theme, "comment-label-offtopic")}; |
|
|
|
--comment-label-malice-color: #{map.get($theme, "comment-label-malice")}; |
|
|
|
--foreground-label-exemplary-color: #fff; |
|
|
|
--foreground-label-joke-color: #fff; |
|
|
|
--foreground-label-noise-color: #fff; |
|
|
|
@ -289,17 +275,15 @@ |
|
|
|
--background-label-noise-color: transparent; |
|
|
|
--background-label-offtopic-color: transparent; |
|
|
|
--background-label-malice-color: transparent; |
|
|
|
|
|
|
|
--comment-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")}; |
|
|
|
--comment-label-joke-color: #{map-get($theme, "comment-label-joke")}; |
|
|
|
--comment-label-noise-color: #{map-get($theme, "comment-label-noise")}; |
|
|
|
--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, "comment-label-exemplary")}; |
|
|
|
--foreground-label-joke-color: #{map-get($theme, "comment-label-joke")}; |
|
|
|
--foreground-label-noise-color: #{map-get($theme, "comment-label-noise")}; |
|
|
|
--foreground-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")}; |
|
|
|
--foreground-label-malice-color: #{map-get($theme, "comment-label-malice")}; |
|
|
|
--comment-label-exemplary-color: #{map.get($theme, "comment-label-exemplary")}; |
|
|
|
--comment-label-joke-color: #{map.get($theme, "comment-label-joke")}; |
|
|
|
--comment-label-noise-color: #{map.get($theme, "comment-label-noise")}; |
|
|
|
--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, "comment-label-exemplary")}; |
|
|
|
--foreground-label-joke-color: #{map.get($theme, "comment-label-joke")}; |
|
|
|
--foreground-label-noise-color: #{map.get($theme, "comment-label-noise")}; |
|
|
|
--foreground-label-offtopic-color: #{map.get($theme, "comment-label-offtopic")}; |
|
|
|
--foreground-label-malice-color: #{map.get($theme, "comment-label-malice")}; |
|
|
|
} |
|
|
|
} |
Andrew Shu
4 weeks ago