X-Git-Url: https://git.danix.xyz/?a=blobdiff_plain;ds=sidebyside;f=assets%2Fsass%2Fcomponents%2F_form.scss;h=5bfe29f01fd2e351093dd2d3f3dad9c6fa0a6166;hb=ca7530825d1ff39bb77947934ef24187a9590fcf;hp=fed297deb032cc0d4ba559d4fea56955b69ada92;hpb=748286b530a4b000cac6b88bbcebb258056a9e77;p=theme-danix.xyz.git
diff --git a/assets/sass/components/_form.scss b/assets/sass/components/_form.scss
index fed297d..5bfe29f 100644
--- a/assets/sass/components/_form.scss
+++ b/assets/sass/components/_form.scss
@@ -69,13 +69,16 @@
}
label {
- color: _palette(fg-bold);
+ color: _palette_light(fg-bold);
display: block;
font-size: 0.8em;
font-weight: _font(weight-bold);
letter-spacing: _font(letter-spacing-alt);
margin: 0 0 (_size(element-margin) * 0.5) 0;
text-transform: uppercase;
+ @media screen and (prefers-color-scheme: dark) {
+ color: _palette_dark(fg-bold);
+ }
}
input[type="text"],
@@ -87,8 +90,8 @@
select,
textarea {
@include vendor('appearance', 'none');
- background: _palette(border-bg);
- border: none;
+ background: _palette_light(border-bg);
+ border: 1px solid _palette_light(fg-light);
border-radius: 0;
color: inherit;
display: block;
@@ -96,29 +99,44 @@
padding: 0 1em;
text-decoration: none;
width: 100%;
+ @media screen and (prefers-color-scheme: dark) {
+ background: _palette_dark(border);
+ border: 1px solid _palette_dark(fg-light);
+ }
&:invalid {
box-shadow: none;
}
&:focus {
- border-color: _palette(highlight);
- box-shadow: 0 0 0 2px _palette(highlight);
+ border-color: _palette_light(highlight);
+ box-shadow: inset 0 0 0 2px _palette_light(highlight);
+ @media screen and (prefers-color-scheme: dark) {
+ border-color: _palette_dark(highlight);
+ box-shadow: inset 0 0 0 2px _palette_dark(highlight);
+ }
}
}
select {
- background-image: svg-url("");
+ background-image: svg-url("");
background-size: 1.25rem;
background-repeat: no-repeat;
background-position: calc(100% - 1rem) center;
height: _size(element-height);
padding-right: _size(element-height);
text-overflow: ellipsis;
+ @media screen and (prefers-color-scheme: dark) {
+ background-image: svg-url("");
+ }
option {
- color: _palette(fg-bold);
- background: _palette(bg);
+ color: _palette_light(fg-bold);
+ background: _palette_light(bg);
+ @media screen and (prefers-color-scheme: dark) {
+ color: _palette_dark(fg-bold);
+ background: _palette_dark(bg);
+ }
}
&:focus {
@@ -158,16 +176,19 @@
& + label {
@include icon(false, solid);
- color: _palette(fg);
+ color: _palette_light(fg);
cursor: pointer;
display: inline-block;
font-weight: _font(weight);
padding-left: (_size(element-height) * 0.6) + 1em;
padding-right: 0.75em;
position: relative;
+ @media screen and (prefers-color-scheme: dark) {
+ color: _palette_dark(fg);
+ }
&:before {
- background: _palette(border-bg);
+ background: _palette_light(border-bg);
content: '';
display: inline-block;
font-size: 0.8em;
@@ -179,21 +200,32 @@
text-align: center;
top: 0;
width: (_size(element-height) * 0.75);
+ @media screen and (prefers-color-scheme: dark) {
+ background: _palette_dark(border-bg);
+ }
}
}
&:checked + label {
&:before {
- background: _palette(fg-bold);
- border-color: _palette(highlight);
+ background: _palette_light(fg-bold);
+ border-color: _palette_light(highlight);
content: '\f00c';
- color: _palette(bg);
+ color: _palette_light(bg);
+ @media screen and (prefers-color-scheme: dark) {
+ background: _palette_dark(fg-bold);
+ border-color: _palette_dark(highlight);
+ color: _palette_dark(bg);
+ }
}
}
&:focus + label {
&:before {
- box-shadow: 0 0 0 2px _palette(highlight);
+ box-shadow: inset 0 0 0 2px _palette_light(highlight);
+ @media screen and (prefers-color-scheme: dark) {
+ box-shadow: inset 0 0 0 2px _palette_dark(highlight);
+ }
}
}
}
@@ -214,21 +246,33 @@
}
::-webkit-input-placeholder {
- color: _palette(fg-light) !important;
+ color: _palette_light(fg-light) !important;
opacity: 1.0;
+ @media screen and (prefers-color-scheme: dark) {
+ color: _palette_dark(fg-light) !important;
+ }
}
:-moz-placeholder {
- color: _palette(fg-light) !important;
+ color: _palette_light(fg-light) !important;
opacity: 1.0;
+ @media screen and (prefers-color-scheme: dark) {
+ color: _palette_dark(fg-light) !important;
+ }
}
::-moz-placeholder {
- color: _palette(fg-light) !important;
+ color: _palette_light(fg-light) !important;
opacity: 1.0;
+ @media screen and (prefers-color-scheme: dark) {
+ color: _palette_dark(fg-light) !important;
+ }
}
:-ms-input-placeholder {
- color: _palette(fg-light) !important;
+ color: _palette_light(fg-light) !important;
opacity: 1.0;
+ @media screen and (prefers-color-scheme: dark) {
+ color: _palette_dark(fg-light) !important;
+ }
}
\ No newline at end of file