129 lines
4.9 KiB
CSS
129 lines
4.9 KiB
CSS
{{ $themeDim := eq .Theme "dark" | ternary (darken .Color 0.5) (brighten .Color 0.2) }}
|
|
{{ $themeDimmer := eq .Theme "dark" | ternary (darken .Color 0.65) (brighten .Color 0.4) }}
|
|
{{ $themeDimmest := eq .Theme "dark" | ternary (darken .Color 0.8) (brighten .Color 0.6) }}
|
|
|
|
{{ $linkColor := eq .Theme "dark" | ternary (brighten .Color 0.1) (darken .Color 0.2) }}
|
|
{{ $linkHoverColor := eq .Theme "dark" | ternary (brighten .Color 0.2) (darken .Color 0.1) }}
|
|
|
|
:root {
|
|
--theme-color: #{{ .Color }};
|
|
--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);
|
|
}
|
|
|
|
/*
|
|
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: #{{ eq .Theme "dark" | ternary (darken .Color 0.8) (brighten .Color 0.9) }};
|
|
}
|
|
|
|
/* Assets */
|
|
|
|
header .menu-bar .hmdev-logo {
|
|
background-image:url("{{ static "logo_nounder.svg" }}");
|
|
}
|
|
header .menu-bar .hmdev-logo .underscore {
|
|
background-image:url("{{ static "logo_underscore.svg" }}");
|
|
}
|
|
|
|
header .menu-bar .hmdev-logo.project {
|
|
background-image:url("{{ static "logo_net.svg" }}");
|
|
}
|
|
|
|
.links .thing#projects {
|
|
background-image:url("{{ statictheme .Theme "project_thing.svg" }}");
|
|
}
|
|
|
|
.links .thing#discussion {
|
|
background-image:url("{{ statictheme .Theme "discuss_thing.svg" }}");
|
|
}
|
|
|
|
.links .thing#blogs {
|
|
background-image:url("{{ statictheme .Theme "blog_thing.svg" }}");
|
|
}
|
|
|
|
.half.light {
|
|
background-image:url("{{ statictheme "light" "accent_top_a.svg" }}");
|
|
}
|
|
|
|
.half.dark {
|
|
background-image:url("{{ statictheme "dark" "accent_top_a.svg" }}");
|
|
}
|