115 lines
4.5 KiB
CSS
115 lines
4.5 KiB
CSS
{{ $c := hex2color .Color }}
|
|
{{ $themeDim := eq .Theme "dark" | ternary (lightness 0.35 $c) (lightness 0.75 $c) | color2css }}
|
|
{{ $themeDimmer := eq .Theme "dark" | ternary (lightness 0.3 $c) (lightness 0.8 $c) | color2css }}
|
|
{{ $themeDimmest := eq .Theme "dark" | ternary (lightness 0.2 $c) (lightness 0.85 $c) | color2css }}
|
|
|
|
{{ $linkColor := eq .Theme "dark" | ternary (lightness 0.55 $c) (lightness 0.35 $c) | color2css }}
|
|
{{ $linkHoverColor := eq .Theme "dark" | ternary (lightness 0.65 $c) (lightness 0.45 $c) | color2css }}
|
|
|
|
:root {
|
|
--theme-color: {{ $c | color2css }};
|
|
--theme-color-dim: {{ $themeDim }};
|
|
--theme-color-dimmer: {{ $themeDimmer }};
|
|
--theme-color-dimmest: {{ $themeDimmest }};
|
|
|
|
--link-color: {{ $linkColor }};
|
|
--link-color-hover: {{ $linkHoverColor }};
|
|
}
|
|
|
|
.accent {
|
|
background-color: {{ $themeDim }};
|
|
background-color: var(--theme-dim);
|
|
}
|
|
.user-bar {
|
|
border-bottom-color: {{ $themeDim }};
|
|
border-bottom-color: var(--theme-dim);
|
|
}
|
|
header .content-title .subtitle {
|
|
border-top-color: {{ $themeDim }};
|
|
border-top-color: var(--theme-dim);
|
|
}
|
|
|
|
a, .thread:before, button, .button, input[type=button], input[type=submit] {
|
|
color: {{ $linkColor }};
|
|
color: var(--link-color);
|
|
}
|
|
a:hover, button:hover, .button:hover, input[type=button]:hover, input[type=submit]:hover {
|
|
color: {{ $linkHoverColor }};
|
|
color: var(--link-hover-color);
|
|
}
|
|
.unread .avatar-icon {
|
|
border: 2px solid {{ $linkColor }};
|
|
border: 2px solid var(--link-color);
|
|
}
|
|
|
|
.post-list-bg-odd:nth-of-type(odd) {
|
|
background-color: {{ .PostBgColor }};
|
|
}
|
|
|
|
/*
|
|
TODO: Manually apply sensible tachyons classes to the elements styled below, then delete
|
|
all of this CSS.
|
|
*/
|
|
|
|
/* {% if theme == "dark" %}
|
|
#search_form_input_homepage { color: #{% rgb_accent accent 0.65 %}; }
|
|
#search_form_input_homepage::-webkit-input-placeholder { color: #{% rgb_accent accent 0.65 %}; }
|
|
#search_form_input_homepage:-moz-placeholder { color: #{% rgb_accent accent 0.65 %}; }
|
|
#search_form_input_homepage::-moz-placeholder { color: #{% rgb_accent accent 0.65 %}; }
|
|
#search_form_input_homepage:-ms-input-placeholder { color: #{% rgb_accent accent 0.65 %}; }
|
|
{% else %}
|
|
#search_form_input_homepage { color: #{% rgb_accent accent 0.25 %}; }
|
|
#search_form_input_homepage::-webkit-input-placeholder { color: #{% rgb_accent accent 0.25 %}; }
|
|
#search_form_input_homepage:-moz-placeholder { color: #{% rgb_accent accent 0.25 %}; }
|
|
#search_form_input_homepage::-moz-placeholder { color: #{% rgb_accent accent 0.25 %}; }
|
|
#search_form_input_homepage:-ms-input-placeholder { color: #{% rgb_accent accent 0.25 %}; }
|
|
{% endif %} */
|
|
|
|
/* {% if theme == "dark" %}
|
|
header .menu-bar .logo { background-color: #{% rgb_accent accent 0.23 %}; }
|
|
header .menu-bar .logo:hover { background-color: #{% rgb_accent accent 0.27 %}; }
|
|
header { border-bottom-color:#{% rgb_accent accent 0.33 %}; }
|
|
.post .action.button { border-bottom-color:#{% rgb_accent accent 0.33 %}; }
|
|
:root {
|
|
--input-lite-border: #{% rgb_accent accent 0.33 %};
|
|
}
|
|
|
|
header #unfold-btn-fx { background-color: #{% rgb_accent accent 0.23 %}; }
|
|
header #unfold-btn-fx:hover { background-color: #{% rgb_accent accent 0.21 %}; }
|
|
|
|
.forum .thread:nth-of-type(odd) { background-color:#{% rgb_accent accent 0.14 False 0.03%}; }
|
|
.blog .post:nth-of-type(even) { background-color:#{% rgb_accent accent 0.14 False 0.03 %}; }
|
|
{% else %}
|
|
header .menu-bar .logo { background-color: #{% rgb_accent accent 0.25 True %}; }
|
|
header .menu-bar .logo:hover { background-color: #{% rgb_accent accent 0.28 True %}; }
|
|
header { border-bottom-color:#{% rgb_accent accent 0.18 %}; }
|
|
.post .action.button { border-bottom-color:#{% rgb_accent accent 0.25 True %}; }
|
|
:root {
|
|
--input-lite-border: #{% rgb_accent accent 0.25 True %};
|
|
}
|
|
|
|
header #unfold-btn-fx { background-color: #{% rgb_accent accent 0.20 %}; }
|
|
header #unfold-btn-fx:hover { background-color: #{% rgb_accent accent 0.16 %}; }
|
|
|
|
.forum .thread:nth-of-type(odd) { background-color:#{% rgb_accent accent 0.94 False 0.2 %}; }
|
|
.blog .post:nth-of-type(even) { background-color:#{% rgb_accent accent 0.94 False 0.2 %}; }
|
|
{% endif %} */
|
|
|
|
:root {
|
|
--background-even-background: {{ .PostBgColor }};
|
|
}
|
|
|
|
/* Assets */
|
|
|
|
header .menu-bar .hmdev-logo.project {
|
|
background-image:url("{{ static "logo_net.svg" }}");
|
|
}
|
|
|
|
.half.light {
|
|
background-image:url("{{ statictheme "light" "accent_top_a.svg" }}");
|
|
}
|
|
|
|
.half.dark {
|
|
background-image:url("{{ statictheme "dark" "accent_top_a.svg" }}");
|
|
}
|