@include vendor('display', 'flex');\r
@include vendor('justify-content', 'center');\r
@include vendor('pointer-events', 'none');\r
- background: transparentize(_palette(bg), 0.1);\r
+ background: transparentize(_palette_light(bg), 0.1);\r
box-shadow: none;\r
height: 100%;\r
left: 0;\r
visibility: hidden;\r
width: 100%;\r
z-index: _misc(z-index-base) + 2;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background: transparentize(_palette_dark(bg), 0.1);\r
+ }\r
\r
.inner {\r
@include vendor('transition', (\r
\r
> a:not(.button) {\r
border: 0;\r
- border-top: solid 1px _palette(border);\r
+ border-top: solid 1px _palette_light(border);\r
display: block;\r
font-size: 0.8em;\r
font-weight: _font(weight-bold);\r
line-height: 4em;\r
text-decoration: none;\r
text-transform: uppercase;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ border-top: solid 1px _palette_dark(border);\r
+ }\r
}\r
\r
> .button {\r
}\r
\r
&:before {\r
- background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette(fg-bold)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette_light(fg-bold)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(fg-bold)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');\r
+ }\r
}\r
\r
&:after {\r
- background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette(highlight)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette_light(highlight)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');\r
opacity: 0;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(highlight)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');\r
+ }\r
}\r
\r
&:hover, &:active {\r
\r
body.is-ie {\r
#menu {\r
- background: transparentize(_palette(bg-alt), 0.025);\r
+ background: transparentize(_palette_light(bg-alt), 0.025);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background: transparentize(_palette_dark(bg-alt), 0.025);\r
+ }\r
}\r
}\r
\r