X-Git-Url: https://git.danix.xyz/?a=blobdiff_plain;f=assets%2Fsass%2Fcomponents%2F_button.scss;h=a23e8d8eeb3e1560a5e71b141635734ae1f848d8;hb=857826795354a7f12d4641111a455ceb4267732c;hp=fc903c1303f826c28e13c19061cbd599728228d4;hpb=748286b530a4b000cac6b88bbcebb258056a9e77;p=theme-danix.xyz.git
diff --git a/assets/sass/components/_button.scss b/assets/sass/components/_button.scss
index fc903c1..a23e8d8 100644
--- a/assets/sass/components/_button.scss
+++ b/assets/sass/components/_button.scss
@@ -20,8 +20,12 @@
background-color: transparent;
border: 0;
border-radius: 0;
- box-shadow: inset 0 0 0 2px _palette(fg-bold);
- color: _palette(fg-bold);
+ box-shadow: inset 0 0 0 2px _palette_light(fg-bold);
+ color: _palette_light(fg-bold);
+ @media screen and (prefers-color-scheme: dark) {
+ box-shadow: inset 0 0 0 2px _palette_dark(fg-bold);
+ color: _palette_dark(fg-bold);
+ }
cursor: pointer;
display: inline-block;
font-size: 0.8em;
@@ -36,14 +40,23 @@
white-space: nowrap;
&:hover, &:active {
- box-shadow: inset 0 0 0 2px _palette(highlight);
- color: _palette(highlight);
+ box-shadow: inset 0 0 0 2px _palette_light(highlight);
+ color: _palette_light(highlight);
+ @media screen and (prefers-color-scheme: dark) {
+ box-shadow: inset 0 0 0 2px _palette_dark(highlight);
+ color: _palette_dark(highlight);
+ }
}
&:active {
- background-color: transparentize(_palette(highlight), 0.9);
- box-shadow: inset 0 0 0 2px desaturate(darken(_palette(highlight), 15), 5);
- color: desaturate(darken(_palette(highlight), 15), 5);
+ background-color: transparentize(_palette_light(highlight), 0.9);
+ box-shadow: inset 0 0 0 2px desaturate(darken(_palette_light(highlight), 15), 5);
+ color: desaturate(darken(_palette_light(highlight), 15), 5);
+ @media screen and (prefers-color-scheme: dark) {
+ background-color: transparentize(_palette_dark(highlight), 0.9);
+ box-shadow: inset 0 0 0 2px desaturate(darken(_palette_dark(highlight), 15), 5);
+ color: desaturate(darken(_palette_dark(highlight), 15), 5);
+ }
}
&.icon {
@@ -86,11 +99,17 @@
}
&:before {
- background-image: svg-url('');
+ background-image: svg-url('');
+ @media screen and (prefers-color-scheme: dark) {
+ background-image: svg-url('');
+ }
}
&:after {
- background-image: svg-url('');
+ background-image: svg-url('');
+ @media screen and (prefers-color-scheme: dark) {
+ background-image: svg-url('');
+ }
opacity: 0;
z-index: 1;
}
@@ -107,17 +126,28 @@
}
&.primary {
- background-color: _palette(fg-bold);
+ background-color: _palette_light(fg-bold);
box-shadow: none;
- color: _palette(bg);
+ color: _palette_light(bg);
+ @media screen and (prefers-color-scheme: dark) {
+ background-color: _palette_dark(fg-bold);
+ color: _palette_dark(bg);
+ }
&:hover, &:active {
- background-color: _palette(highlight);
- color: _palette(bg) !important;
+ background-color: _palette_light(highlight);
+ color: _palette_light(bg) !important;
+ @media screen and (prefers-color-scheme: dark) {
+ background-color: _palette_dark(highlight);
+ color: _palette_dark(bg) !important;
+ }
}
&:active {
- background-color: desaturate(darken(_palette(highlight), 15), 5);
+ background-color: desaturate(darken(_palette_light(highlight), 15), 5);
+ @media screen and (prefers-color-scheme: dark) {
+ background-color: desaturate(darken(_palette_dark(highlight), 15), 5);
+ }
}
}