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 {
border-bottom: 1px @gray-light dotted;
border-bottom: 1px dotted;
.var(border-bottom-color, gray-light);
font-weight: @font-weight-bold;
&:hover {

View File

@ -35,7 +35,7 @@
}
&.-inactive {
color: @gray-light;
.var(color, gray-light);
}
}
}
@ -70,7 +70,7 @@
color: white;
}
.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 {
margin: .35em;
color: @gray-light;
.var(color, gray-light);
font-style: italic;
}
}
@ -702,7 +702,8 @@ form.instance-features span.description, form.object-features span.description {
.markdown,
.plugin-output {
a {
border-bottom: 1px @gray-light dotted;
border-bottom: 1px dotted;
.var(border-bottom-color, gray-light);
&:hover {
border-bottom: 1px solid;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -207,7 +207,8 @@
.var(color, text-color);
display: block;
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);
margin-bottom: 1px;
box-shadow: 0 0 1em 0 rgba(0,0,0,0.25);

View File

@ -162,7 +162,8 @@ a:hover > .icon-cancel {
}
thead {
border-bottom: 1px solid @gray-light;
border-bottom: 1px solid;
.var(border-bottom-color, gray-light);
}
tbody tr {
@ -282,7 +283,7 @@ a:hover > .icon-cancel {
box-shadow: 0 0 1/3em rgba(0,0,0,.3);
&: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 {
> .nav-level-2 {
background-color: @menu-flyout-bg-color;
border: 1px solid @gray-light;
border: 1px solid;
.var(border-color, gray-light);
border-radius: .25em;
box-shadow: 0 0 1em 0 rgba(0,0,0,.3);
padding: @vertical-padding 0;
@ -253,8 +254,10 @@
.transform(rotate(45deg));
.var(background-color, body-bg-color);
border-bottom: 1px solid @gray-light;
border-left: 1px solid @gray-light;
border-bottom: 1px solid;
.var(border-bottom-color, gray-light);
border-left: 1px solid;
.var(border-left-color, gray-light);
content: "";
display: block;
height: 1.1em;
@ -415,19 +418,19 @@ input[type=text].search-input {
}
.search-input:focus:-moz-placeholder { // FF 18-
color: @gray-light;
.var(color, gray-light);
}
.search-input:focus::-moz-placeholder { // FF 19+
color: @gray-light;
.var(color, gray-light);
}
.search-input:focus:-ms-input-placeholder {
color: @gray-light;
.var(color, gray-light);
}
.search-input:focus::-webkit-input-placeholder {
color: @gray-light;
.var(color, gray-light);
}
.search-input ~ .search-reset {

View File

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

View File

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

View File

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