X-Git-Url: https://git.danix.xyz/?a=blobdiff_plain;f=assets%2Fsass%2Flayout%2F_menu.scss;fp=assets%2Fsass%2Flayout%2F_menu.scss;h=a12dca23fe57f83838e7b06b23a1935f29cf5237;hb=cb4379e19f22b0e389f369a048c5cce9321366c6;hp=e53f21f0b41522960ab9f721ad8efdf707d06d8e;hpb=7e7766c9ada48098c94bd94aaac04f919dfb3297;p=theme-danix.xyz.git

diff --git a/assets/sass/layout/_menu.scss b/assets/sass/layout/_menu.scss
index e53f21f..a12dca2 100644
--- a/assets/sass/layout/_menu.scss
+++ b/assets/sass/layout/_menu.scss
@@ -16,7 +16,7 @@
 		@include vendor('display', 'flex');
 		@include vendor('justify-content', 'center');
 		@include vendor('pointer-events', 'none');
-		background: transparentize(_palette(bg), 0.1);
+		background: transparentize(_palette_light(bg), 0.1);
 		box-shadow: none;
 		height: 100%;
 		left: 0;
@@ -28,6 +28,9 @@
 		visibility: hidden;
 		width: 100%;
 		z-index: _misc(z-index-base) + 2;
+		@media screen and (prefers-color-scheme: dark) {
+			background: transparentize(_palette_dark(bg), 0.1);
+		}
 
 		.inner {
 			@include vendor('transition', (
@@ -66,7 +69,7 @@
 
 					> a:not(.button) {
 						border: 0;
-						border-top: solid 1px _palette(border);
+						border-top: solid 1px _palette_light(border);
 						display: block;
 						font-size: 0.8em;
 						font-weight: _font(weight-bold);
@@ -74,6 +77,9 @@
 						line-height: 4em;
 						text-decoration: none;
 						text-transform: uppercase;
+						@media screen and (prefers-color-scheme: dark) {
+							border-top: solid 1px _palette_dark(border);
+						}
 					}
 
 					> .button {
@@ -123,12 +129,18 @@
 			}
 
 			&:before {
-				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>');
+				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>');
+				@media screen and (prefers-color-scheme: dark) {
+					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>');
+				}
 			}
 
 			&:after {
-				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>');
+				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>');
 				opacity: 0;
+				@media screen and (prefers-color-scheme: dark) {
+					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>');
+				}
 			}
 
 			&:hover, &:active {
@@ -141,7 +153,10 @@
 
 	body.is-ie {
 		#menu {
-			background: transparentize(_palette(bg-alt), 0.025);
+			background: transparentize(_palette_light(bg-alt), 0.025);
+			@media screen and (prefers-color-scheme: dark) {
+				background: transparentize(_palette_dark(bg-alt), 0.025);
+			}
 		}
 	}