background-color: transparent;\r
border: 0;\r
border-radius: 0;\r
- box-shadow: inset 0 0 0 2px _palette(fg-bold);\r
- color: _palette(fg-bold);\r
+ box-shadow: inset 0 0 0 2px _palette_light(fg-bold);\r
+ color: _palette_light(fg-bold);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ box-shadow: inset 0 0 0 2px _palette_dark(fg-bold);\r
+ color: _palette_dark(fg-bold);\r
+ }\r
cursor: pointer;\r
display: inline-block;\r
font-size: 0.8em;\r
white-space: nowrap;\r
\r
&:hover, &:active {\r
- box-shadow: inset 0 0 0 2px _palette(highlight);\r
- color: _palette(highlight);\r
+ box-shadow: inset 0 0 0 2px _palette_light(highlight);\r
+ color: _palette_light(highlight);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ box-shadow: inset 0 0 0 2px _palette_dark(highlight);\r
+ color: _palette_dark(highlight);\r
+ }\r
}\r
\r
&:active {\r
- background-color: transparentize(_palette(highlight), 0.9);\r
- box-shadow: inset 0 0 0 2px desaturate(darken(_palette(highlight), 15), 5);\r
- color: desaturate(darken(_palette(highlight), 15), 5);\r
+ background-color: transparentize(_palette_light(highlight), 0.9);\r
+ box-shadow: inset 0 0 0 2px desaturate(darken(_palette_light(highlight), 15), 5);\r
+ color: desaturate(darken(_palette_light(highlight), 15), 5);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: transparentize(_palette_dark(highlight), 0.9);\r
+ box-shadow: inset 0 0 0 2px desaturate(darken(_palette_dark(highlight), 15), 5);\r
+ color: desaturate(darken(_palette_dark(highlight), 15), 5);\r
+ }\r
}\r
\r
&.icon {\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="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette(fg-bold)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_light(fg-bold)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></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="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(fg-bold)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></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="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette(highlight)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');\r
+ background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_light(highlight)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></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="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(highlight)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');\r
+ }\r
opacity: 0;\r
z-index: 1;\r
}\r
}\r
\r
&.primary {\r
- background-color: _palette(fg-bold);\r
+ background-color: _palette_light(fg-bold);\r
box-shadow: none;\r
- color: _palette(bg);\r
+ color: _palette_light(bg);\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(fg-bold);\r
+ color: _palette_dark(bg);\r
+ }\r
\r
&:hover, &:active {\r
- background-color: _palette(highlight);\r
- color: _palette(bg) !important;\r
+ background-color: _palette_light(highlight);\r
+ color: _palette_light(bg) !important;\r
+ @media screen and (prefers-color-scheme: dark) {\r
+ background-color: _palette_dark(highlight);\r
+ color: _palette_dark(bg) !important;\r
+ }\r
}\r
\r
&:active {\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