css: Use `@light-mode` to register light mode rules

This commit is contained in:
Johannes Meyer 2022-02-08 17:03:51 +01:00
parent 212a3fb01f
commit 3ba4727bbd
3 changed files with 12 additions and 11 deletions

View File

@ -113,10 +113,11 @@
@vertical-padding: 0.5em; // 6px @vertical-padding: 0.5em; // 6px
@horizontal-padding: 1em; // 12px @horizontal-padding: 1em; // 12px
@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) { @light-mode: {
@light-body-bg-color: #F5F9FA; @light-body-bg-color: #F5F9FA;
@iplWebLightRules();
:root { :root {
--body-bg-color: @light-body-bg-color; --body-bg-color: @light-body-bg-color;
--body-bg-color-transparent: fade(@light-body-bg-color, 0); --body-bg-color-transparent: fade(@light-body-bg-color, 0);
@ -151,7 +152,7 @@
--gray-lighter: #e8ecef; --gray-lighter: #e8ecef;
--gray-lightest: #F7F7F7; --gray-lightest: #F7F7F7;
} }
} };
// Make padding not affect the final computed width of an element // Make padding not affect the final computed width of an element
html { html {
@ -293,11 +294,11 @@ td, th {
} }
} }
@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) { @light-mode: {
.container { .container {
&:before, &:before,
> .content:before { > .content:before {
background-image: url(../img/icinga-loader-light.gif) background-image: url(../img/icinga-loader-light.gif)
} }
} }
} };

View File

@ -43,13 +43,13 @@ input.search {
} }
} }
@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) { @light-mode: {
#menu input.search, #menu input.search,
.controls input.search, .controls input.search,
input.search { input.search {
background-image: url(../img/icons/search.png); background-image: url(../img/icons/search.png);
} }
} };
.backend-selection, .backend-selection,
.pagination-control, .pagination-control,
@ -241,7 +241,7 @@ input.search {
} }
} }
@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) { @light-mode: {
:root { :root {
// These are actually the default colors for the flatpickr // These are actually the default colors for the flatpickr
@ -276,6 +276,6 @@ input.search {
--fp-hoverNumChooserBg: fadeout(black, 90%); --fp-hoverNumChooserBg: fadeout(black, 90%);
--fp-numChooserBorderColor: fadeout(@fp-dayForeground, 85%); --fp-numChooserBorderColor: fadeout(@fp-dayForeground, 85%);
} }
} };
// Datetime picker colors (end) // Datetime picker colors (end)

View File

@ -366,10 +366,10 @@
} }
} }
@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) { @light-mode: {
#header-logo, #header-logo,
#mobile-menu-logo, #mobile-menu-logo,
#about .icinga-logo { #about .icinga-logo {
filter: brightness(0.415) sepia(1) ~"saturate(0.1)" hue-rotate(144deg); filter: brightness(0.415) sepia(1) ~"saturate(0.1)" hue-rotate(144deg);
} }
} };