X-Git-Url: https://git.danix.xyz/?a=blobdiff_plain;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("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>");
+		background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette_light(border)}' /></svg>");
 		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("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette_dark(border)}' /></svg>");
+		}
 
 		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