Integrate light theme's `gray-light` using a media query

This commit is contained in:
Johannes Meyer 2021-06-23 11:56:56 +02:00
parent 62979c31f0
commit b7f42e52dc
13 changed files with 45 additions and 33 deletions

View File

@ -24,7 +24,8 @@ pre > code {
} }
.chapter a { .chapter a {
border-bottom: 1px @gray-light dotted; border-bottom: 1px dotted;
.var(border-bottom-color, gray-light);
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
&:hover { &:hover {

View File

@ -35,7 +35,7 @@
} }
&.-inactive { &.-inactive {
color: @gray-light; .var(color, gray-light);
} }
} }
} }
@ -70,7 +70,7 @@
color: white; color: white;
} }
.group-grid-cell > div.state-none { .group-grid-cell > div.state-none {
background-color: @gray-light; .var(background-color, gray-light);
} }
} }
@ -651,7 +651,7 @@ form.instance-features span.description, form.object-features span.description {
& + span.hint { & + span.hint {
margin: .35em; margin: .35em;
color: @gray-light; .var(color, gray-light);
font-style: italic; font-style: italic;
} }
} }
@ -702,7 +702,8 @@ form.instance-features span.description, form.object-features span.description {
.markdown, .markdown,
.plugin-output { .plugin-output {
a { a {
border-bottom: 1px @gray-light dotted; border-bottom: 1px dotted;
.var(border-bottom-color, gray-light);
&:hover { &:hover {
border-bottom: 1px solid; border-bottom: 1px solid;

View File

@ -5,7 +5,7 @@
white-space: nowrap; white-space: nowrap;
td { td {
color: @gray-light; .var(color, gray-light);
padding: 0.2em; padding: 0.2em;
text-align: center; text-align: center;
width: 1em; width: 1em;
@ -66,7 +66,7 @@ form.filter-toggle {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
margin-left: .5em; margin-left: .5em;
color: @gray-light; .var(color, gray-light);
} }
input[type="checkbox"]:checked ~ label { input[type="checkbox"]:checked ~ label {

View File

@ -20,7 +20,8 @@
} }
h3 { h3 {
border-bottom: 1px solid @gray-light; border-bottom: 1px solid;
.var(border-bottom-color, gray-light);
} }
h3 em, h3 em,
@ -36,7 +37,7 @@
} }
.icon { .icon {
color: @gray-light; .var(color, gray-light);
&.granted { &.granted {
color: @color-granted; color: @color-granted;
@ -59,7 +60,8 @@
&:hover .spacer { &:hover .spacer {
.transition(opacity .25s .25s ease-in); .transition(opacity .25s .25s ease-in);
border: 0 dashed @gray-light; border: 0 dashed;
.var(border-color, gray-light);
border-top-width: .2em; border-top-width: .2em;
opacity: 1; opacity: 1;
} }

View File

@ -127,6 +127,7 @@
--gray: #7F7F7F; --gray: #7F7F7F;
--gray-semilight: #A9A9A9; --gray-semilight: #A9A9A9;
--gray-light: #C9C9C9;
} }
} }

View File

@ -110,7 +110,8 @@ form.icinga-form.inline .control-label-group {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
border-top: 1px solid @gray-light; border-top: 1px solid;
.var(border-top-color, gray-light);
legend, .description { legend, .description {
margin-left: .7em; margin-left: .7em;
@ -393,12 +394,12 @@ form.inline {
cursor: default; cursor: default;
& > .toggle-slider { & > .toggle-slider {
background-color: @gray-light; .var(background-color, gray-light);
border-color: @gray-light; .var(border-color, gray-light);
&:before { &:before {
background-color: @gray-lighter; background-color: @gray-lighter;
border-color: @gray-light; .var(border-color, gray-light);
} }
} }
} }

View File

@ -36,7 +36,8 @@
} }
tr:not(:last-child) td { tr:not(:last-child) td {
border: 0 solid @gray-light; border: 0 solid;
.var(border-color, gray-light);
border-bottom-width: 1px; border-bottom-width: 1px;
} }

View File

@ -207,7 +207,8 @@
.var(color, text-color); .var(color, text-color);
display: block; display: block;
line-height: 2.5em; line-height: 2.5em;
border-left: .5em solid @gray-light; border-left: .5em solid;
.var(border-left-color, gray-light);
.var(background, body-bg-color); .var(background, body-bg-color);
margin-bottom: 1px; margin-bottom: 1px;
box-shadow: 0 0 1em 0 rgba(0,0,0,0.25); box-shadow: 0 0 1em 0 rgba(0,0,0,0.25);

View File

@ -162,7 +162,8 @@ a:hover > .icon-cancel {
} }
thead { thead {
border-bottom: 1px solid @gray-light; border-bottom: 1px solid;
.var(border-bottom-color, gray-light);
} }
tbody tr { tbody tr {
@ -282,7 +283,7 @@ a:hover > .icon-cancel {
box-shadow: 0 0 1/3em rgba(0,0,0,.3); box-shadow: 0 0 1/3em rgba(0,0,0,.3);
&:hover { &:hover {
background: @gray-light; .var(background, gray-light);
} }
} }

View File

@ -241,7 +241,8 @@
#layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover { #layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover {
> .nav-level-2 { > .nav-level-2 {
background-color: @menu-flyout-bg-color; background-color: @menu-flyout-bg-color;
border: 1px solid @gray-light; border: 1px solid;
.var(border-color, gray-light);
border-radius: .25em; border-radius: .25em;
box-shadow: 0 0 1em 0 rgba(0,0,0,.3); box-shadow: 0 0 1em 0 rgba(0,0,0,.3);
padding: @vertical-padding 0; padding: @vertical-padding 0;
@ -253,8 +254,10 @@
.transform(rotate(45deg)); .transform(rotate(45deg));
.var(background-color, body-bg-color); .var(background-color, body-bg-color);
border-bottom: 1px solid @gray-light; border-bottom: 1px solid;
border-left: 1px solid @gray-light; .var(border-bottom-color, gray-light);
border-left: 1px solid;
.var(border-left-color, gray-light);
content: ""; content: "";
display: block; display: block;
height: 1.1em; height: 1.1em;
@ -415,19 +418,19 @@ input[type=text].search-input {
} }
.search-input:focus:-moz-placeholder { // FF 18- .search-input:focus:-moz-placeholder { // FF 18-
color: @gray-light; .var(color, gray-light);
} }
.search-input:focus::-moz-placeholder { // FF 19+ .search-input:focus::-moz-placeholder { // FF 19+
color: @gray-light; .var(color, gray-light);
} }
.search-input:focus:-ms-input-placeholder { .search-input:focus:-ms-input-placeholder {
color: @gray-light; .var(color, gray-light);
} }
.search-input:focus::-webkit-input-placeholder { .search-input:focus::-webkit-input-placeholder {
color: @gray-light; .var(color, gray-light);
} }
.search-input ~ .search-reset { .search-input ~ .search-reset {

View File

@ -65,7 +65,8 @@
.rounded-corners(0 0 0.3em 0.3em); .rounded-corners(0 0 0.3em 0.3em);
.var(background-color, body-bg-color); .var(background-color, body-bg-color);
border: 1px solid @gray-light; border: 1px solid;
.var(border-color, gray-light);
border-top: none; border-top: none;
margin-left: -1px; margin-left: -1px;
min-width: 14em; min-width: 14em;

View File

@ -286,7 +286,8 @@ form.role-form {
} }
.collapsible-control { .collapsible-control {
border-bottom: 1px solid @gray-light; border-bottom: 1px solid;
.var(border-bottom-color, gray-light);
cursor: pointer; cursor: pointer;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -362,7 +363,7 @@ ul.tree li::before, ul.tree li::after {
position: absolute; position: absolute;
right: auto; right: auto;
left: -0.2em; left: -0.2em;
border-color: @gray-light; .var(border-color, gray-light);
border-style: dotted; border-style: dotted;
border-width: 0; border-width: 0;
} }
@ -543,8 +544,8 @@ ul.tree li a.error:hover {
} }
.slice-state-not-checked { .slice-state-not-checked {
stroke: @gray-light; .var(stroke, gray-light);
background: @gray-light; .var(background, gray-light);
} }
.donut { .donut {
@ -570,7 +571,7 @@ ul.tree li a.error:hover {
} }
.donut-label-big { .donut-label-big {
color: @gray-light; .var(color, gray-light);
font-size: 6em; font-size: 6em;
line-height: 0; line-height: 0;
text-anchor: middle; text-anchor: middle;

View File

@ -1,5 +1,3 @@
@gray-semilight: #A9A9A9;
@gray-light: #C9C9C9;
@gray-lighter: #EEEEEE; @gray-lighter: #EEEEEE;
@gray-lightest: #F7F7F7; @gray-lightest: #F7F7F7;