added dark theme option. It ìs selected automagically based on system choiche of...

[theme-danix.xyz.git] / assets / sass / layout / _menu.scss

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