Fix color scheme in mobile menu
This commit is contained in:
@@ -13,6 +13,8 @@ $palette-primary-30: color.adjust($palette-primary, $lightness: 65%);
|
||||
// $color-blue-super-thin
|
||||
$palette-primary-40: color.adjust($palette-primary, $lightness: 69%);
|
||||
|
||||
$palette-primary-dark-10: color.adjust($palette-primary, $lightness: -10%);
|
||||
|
||||
$color-vh-vorne: #ddcb55;
|
||||
$color-vh-mitte: #c98879;
|
||||
$color-vh-hinten: #0082c9;
|
||||
@@ -36,6 +38,7 @@ $color-img-dots-light-blue: $palette-primary-10;
|
||||
// Mobile menu colors
|
||||
--color-bg-mobile-menu-header: #{$palette-primary-20};
|
||||
--color-bg-mobile-menu: #{$palette-primary-40};
|
||||
--color-fg-mobile-menu: var(--color-fg-primary);
|
||||
|
||||
--color-hor-line: #{$palette-primary-10};
|
||||
|
||||
@@ -52,4 +55,40 @@ $color-img-dots-light-blue: $palette-primary-10;
|
||||
// Overlay for image galleries
|
||||
--color-overlay-bg: #d3d3d3B0;
|
||||
--color-overlay-bg-inner: white;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-bg: #333;
|
||||
--color-wrapper-bg: black;
|
||||
|
||||
--color-fg: white;
|
||||
--color-fg-inverted: black;
|
||||
|
||||
// Former $color-blue
|
||||
--color-fg-primary: #{$palette-primary-10};
|
||||
// Former $color-blue-thin
|
||||
--color-bg-primary: #{$palette-primary-dark-10};
|
||||
|
||||
// Mobile menu colors
|
||||
--color-bg-mobile-menu-header: #{$palette-primary};
|
||||
--color-bg-mobile-menu: #{$palette-primary-dark-10};
|
||||
--color-fg-mobile-menu: #{$palette-primary-30};
|
||||
|
||||
--color-hor-line: #{$palette-primary-10};
|
||||
|
||||
--color-tr-a: #dedede;
|
||||
--color-tr-b: #f7f7f7;
|
||||
|
||||
--color-th-bg: #{$palette-primary};
|
||||
--color-th-fg: white;
|
||||
|
||||
--color-dots-gray: #{$color-img-dots-gray};
|
||||
--color-dots-dark-blue: #{$color-img-dots-dark-blue};
|
||||
--color-dots-light-blue: #{$color-img-dots-light-blue};
|
||||
|
||||
// Overlay for image galleries
|
||||
--color-overlay-bg: #d3d3d3B0;
|
||||
--color-overlay-bg-inner: white;
|
||||
}
|
||||
}
|
||||
@@ -29,6 +29,7 @@ body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-fg);
|
||||
font: 90% 'Open Sans', sans-serif;
|
||||
height: 100vh;
|
||||
}
|
||||
@@ -568,7 +569,10 @@ table {
|
||||
width: 100%;
|
||||
|
||||
a {
|
||||
@include menu-style;
|
||||
|
||||
background-color: var(--color-bg-mobile-menu-header);
|
||||
color: var(--color-fg-mobile-menu);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -576,7 +580,10 @@ table {
|
||||
width: 50%;
|
||||
|
||||
a {
|
||||
@include menu-style;
|
||||
|
||||
background-color: var(--color-bg-mobile-menu);
|
||||
color: var(--color-fg-mobile-menu);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -591,8 +598,6 @@ table {
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include menu-style;
|
||||
|
||||
&.active {
|
||||
color: var(--color-fg-inverted);
|
||||
background-color: var(--color-fg-primary);
|
||||
@@ -603,12 +608,13 @@ table {
|
||||
|
||||
.mobile-menu-link {
|
||||
display: block;
|
||||
border: 1px solid black;
|
||||
border: 1px solid var(--color-fg);
|
||||
width: max-content;
|
||||
padding: 5px 75px 5px 15px;
|
||||
margin: 5px 0 5px 20px;
|
||||
|
||||
@include menu-style;
|
||||
color: var(--color-fg-mobile-menu);
|
||||
|
||||
@include r.media-large {
|
||||
display: none;
|
||||
|
||||
Reference in New Issue
Block a user