\r
#header {\r
@include vendor('display', 'flex');\r
- background-color: _palette(bg-alt);\r
+ background-color: _palette_light(bg-alt);\r
box-shadow: 0 0 0.25em 0 rgba(0,0,0,0.15);\r
cursor: default;\r
font-weight: _font(weight-bold);\r
top: 0;\r
width: 100%;\r
z-index: _misc(z-index-base);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(bg-alt);\r
+ }\r
\r
.logo {\r
border: 0;\r
'background-color #{_duration(transition)} ease-in-out',\r
'color #{_duration(transition)} ease-in-out'\r
));\r
- background-color: _palette(fg-bold);\r
- color: _palette(bg);\r
+ background-color: _palette_light(fg-bold);\r
+ color: _palette_light(bg);\r
display: inline-block;\r
line-height: 1.65em;\r
margin-right: 0.325em;\r
padding: 0 0.125em 0 (_font(letter-spacing-alt) + 0.125em);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(fg-bold);\r
+ color: _palette_dark(bg);\r
+ }\r
}\r
\r
&:hover {\r
strong {\r
- background-color: _palette(highlight);\r
+ background-color: _palette_light(highlight);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(highlight);\r
+ }\r
}\r
}\r
\r
&:active {\r
strong {\r
- background-color: desaturate(darken(_palette(highlight), 15), 5);\r
+ background-color: desaturate(darken(_palette_light(highlight), 15), 5);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: desaturate(darken(_palette_dark(highlight), 15), 5);\r
+ }\r
}\r
}\r
}\r
padding-right: 3.325em !important;\r
\r
&:before, &:after {\r
- background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette(fg-bold)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_light(fg-bold)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');\r
background-position: center;\r
background-repeat: no-repeat;\r
background-size: 24px 32px;\r
top: 0;\r
vertical-align: middle;\r
width: 24px;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_dark(fg-bold)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');\r
+ }\r
}\r
\r
&:after {\r
@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');\r
- background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette(highlight)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_light(highlight)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');\r
opacity: 0;\r
z-index: 1;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32" preserveAspectRatio="none"><style>line { stroke-width: 2px; stroke: #{_palette_dark(highlight)}; }</style><line x1="0" y1="11" x2="24" y2="11" /><line x1="0" y1="21" x2="24" y2="21" /><line x1="0" y1="16" x2="24" y2="16" /></svg>');\r
+ }\r
}\r
\r
&:hover, &:active {\r
box-shadow: none;\r
position: absolute;\r
\r
- &.style1 { .logo { strong { color: _palette(accent1); } } }\r
- &.style2 { .logo { strong { color: _palette(accent2); } } }\r
- &.style3 { .logo { strong { color: _palette(accent3); } } }\r
- &.style4 { .logo { strong { color: _palette(accent4); } } }\r
- &.style5 { .logo { strong { color: _palette(accent5); } } }\r
- &.style6 { .logo { strong { color: _palette(accent6); } } }\r
+ &.style1 { .logo { strong { color: _palette_light(accent1); } } }\r
+ &.style2 { .logo { strong { color: _palette_light(accent2); } } }\r
+ &.style3 { .logo { strong { color: _palette_light(accent3); } } }\r
+ &.style4 { .logo { strong { color: _palette_light(accent4); } } }\r
+ &.style5 { .logo { strong { color: _palette_light(accent5); } } }\r
+ &.style6 { .logo { strong { color: _palette_light(accent6); } } }\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ &.style1 { .logo { strong { color: _palette_dark(accent1); } } }\r
+ &.style2 { .logo { strong { color: _palette_dark(accent2); } } }\r
+ &.style3 { .logo { strong { color: _palette_dark(accent3); } } }\r
+ &.style4 { .logo { strong { color: _palette_dark(accent4); } } }\r
+ &.style5 { .logo { strong { color: _palette_dark(accent5); } } }\r
+ &.style6 { .logo { strong { color: _palette_dark(accent6); } } }\r
+ }\r
}\r
\r
body.is-preload & {\r
