mirror of
https://github.com/Icinga/icingaweb2.git
synced 2025-07-27 07:44:04 +02:00
css: Respect --icinga-*
This commit is contained in:
parent
6c235c64b5
commit
b88dad9525
@ -22,7 +22,7 @@
|
|||||||
// General styles
|
// General styles
|
||||||
|
|
||||||
code {
|
code {
|
||||||
color: @icinga-blue;
|
.var(color, icinga-blue);
|
||||||
font-family: @font-family-fixed;
|
font-family: @font-family-fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -49,7 +49,7 @@ pre > code {
|
|||||||
.search-highlight {
|
.search-highlight {
|
||||||
.rounded-corners();
|
.rounded-corners();
|
||||||
|
|
||||||
background: @icinga-blue;
|
.var(background, icinga-blue);
|
||||||
.var(color, text-color-on-icinga-blue);
|
.var(color, text-color-on-icinga-blue);
|
||||||
padding: 0 0.3em 0 0.3em;
|
padding: 0 0.3em 0 0.3em;
|
||||||
}
|
}
|
||||||
@ -70,7 +70,7 @@ pre > code {
|
|||||||
|
|
||||||
a {
|
a {
|
||||||
&:before {
|
&:before {
|
||||||
color: @icinga-blue;
|
.var(color, icinga-blue);
|
||||||
content: counters(li,".") " ";
|
content: counters(li,".") " ";
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: small;
|
font-size: small;
|
||||||
@ -111,7 +111,8 @@ td {
|
|||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
border-bottom: 2px solid @icinga-blue;
|
border-bottom: 2px solid;
|
||||||
|
.var(border-bottom-color, icinga-blue);
|
||||||
font-weight: @font-weight-bold;
|
font-weight: @font-weight-bold;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
@ -32,7 +32,7 @@
|
|||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
|
|
||||||
&.-active {
|
&.-active {
|
||||||
color: @icinga-blue;
|
.var(color, icinga-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.-inactive {
|
&.-inactive {
|
||||||
@ -187,7 +187,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
color: @icinga-blue;
|
.var(color, icinga-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
a,
|
a,
|
||||||
|
@ -40,7 +40,7 @@
|
|||||||
.var(color, text-color-light);
|
.var(color, text-color-light);
|
||||||
}
|
}
|
||||||
&:focus, &:active {
|
&:focus, &:active {
|
||||||
color: @icinga-blue;
|
.var(color, icinga-blue);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -11,7 +11,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.about-social i:hover {
|
.about-social i:hover {
|
||||||
color: @icinga-blue;
|
.var(color, icinga-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-links {
|
.about-links {
|
||||||
@ -27,7 +27,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.about-links i:hover {
|
.about-links i:hover {
|
||||||
color: @icinga-blue;
|
.var(color, icinga-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.common-table th {
|
.common-table th {
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
.var(border-color, low-sat-blue);
|
.var(border-color, low-sat-blue);
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
border-color: @icinga-blue;
|
.var(border-color, icinga-blue);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -33,9 +33,10 @@
|
|||||||
// Icinga colors
|
// Icinga colors
|
||||||
@icinga-blue: #00C3ED;
|
@icinga-blue: #00C3ED;
|
||||||
@icinga-secondary: #EF4F98;
|
@icinga-secondary: #EF4F98;
|
||||||
|
@icinga-secondary-dark: darken(@icinga-secondary, 10%);
|
||||||
@low-sat-blue: #404d72;
|
@low-sat-blue: #404d72;
|
||||||
@low-sat-blue-dark: #434374;
|
@low-sat-blue-dark: #434374;
|
||||||
@icinga-blue-light: #a5c4cd;
|
@icinga-blue-light: fade(@icinga-blue, 50%);
|
||||||
@icinga-blue-dark: #0081a6;
|
@icinga-blue-dark: #0081a6;
|
||||||
|
|
||||||
// Notification colors
|
// Notification colors
|
||||||
@ -57,8 +58,8 @@
|
|||||||
// Text color on <a>
|
// Text color on <a>
|
||||||
@link-color: @text-color;
|
@link-color: @text-color;
|
||||||
|
|
||||||
@tr-active-color: rgba(0,195,237,0.5);
|
@tr-active-color: fade(@icinga-blue, 25);
|
||||||
@tr-hover-color: rgba(0,195,237,0.2);
|
@tr-hover-color: fade(@icinga-blue, 5);
|
||||||
|
|
||||||
// Menu colors
|
// Menu colors
|
||||||
@menu-bg-color: #06062B;
|
@menu-bg-color: #06062B;
|
||||||
|
@ -39,7 +39,7 @@ input.search {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:focus:not([readonly]) {
|
&:focus:not([readonly]) {
|
||||||
border-color: @icinga-blue;
|
.var(border-color, icinga-blue);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -64,7 +64,7 @@ input.search {
|
|||||||
margin: .5em 0;
|
margin: .5em 0;
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
color: @icinga-blue;
|
.var(color, icinga-blue);
|
||||||
padding: .5em;
|
padding: .5em;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
@ -104,11 +104,12 @@ input.search {
|
|||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
border-bottom: 2px solid @icinga-blue;
|
border-bottom: 2px solid;
|
||||||
|
.var(border-bottom-color, icinga-blue);
|
||||||
|
|
||||||
> a,
|
> a,
|
||||||
> a:hover {
|
> a:hover {
|
||||||
color: @icinga-blue;
|
.var(color, icinga-blue);
|
||||||
/* Compensate border-bottom: 2px */
|
/* Compensate border-bottom: 2px */
|
||||||
margin-bottom: -2px;
|
margin-bottom: -2px;
|
||||||
}
|
}
|
||||||
|
@ -373,17 +373,19 @@ form.inline {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider {
|
.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider {
|
||||||
background-color: @icinga-blue;
|
.var(background-color, icinga-blue);
|
||||||
border: 1px solid @icinga-blue;
|
border: 1px solid;
|
||||||
|
.var(border-color, icinga-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icinga-controls input[type="checkbox"]:focus + .toggle-switch .toggle-slider {
|
.icinga-controls input[type="checkbox"]:focus + .toggle-switch .toggle-slider {
|
||||||
box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px fade(@icinga-blue, 40);
|
box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px @icinga-blue-light;
|
||||||
box-shadow: 0 0 0 2px var(--body-bg-color, @body-bg-color), 0 0 0 4px fade(@icinga-blue, 40);
|
box-shadow: 0 0 0 2px var(--body-bg-color, @body-bg-color), 0 0 0 4px var(--icinga-blue-light, @icinga-blue-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider:before {
|
.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider:before {
|
||||||
border: 1px solid @icinga-blue;
|
border: 1px solid;
|
||||||
|
.var(border-color, icinga-blue);
|
||||||
left: 100%;
|
left: 100%;
|
||||||
margin-left: -4/3em;
|
margin-left: -4/3em;
|
||||||
}
|
}
|
||||||
@ -522,7 +524,7 @@ form.icinga-form .form-info {
|
|||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
&:checked + img {
|
&:checked + img {
|
||||||
border-color: @icinga-blue;
|
.var(border-color, icinga-blue);
|
||||||
border-radius: .25em;
|
border-radius: .25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#guest-error {
|
#guest-error {
|
||||||
background-color: @icinga-blue;
|
.var(background-color, icinga-blue);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
@ -96,7 +96,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
input[type="submit"]:focus {
|
input[type="submit"]:focus {
|
||||||
outline: 3px solid fade(@icinga-blue, 50%);
|
outline: 3px solid;
|
||||||
|
.var(outline-color, icinga-blue-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-controls {
|
.form-controls {
|
||||||
@ -105,7 +106,7 @@
|
|||||||
|
|
||||||
input[type=submit] {
|
input[type=submit] {
|
||||||
border-radius: .25em;
|
border-radius: .25em;
|
||||||
background: @icinga-secondary;
|
.var(background, icinga-secondary);
|
||||||
color: white;
|
color: white;
|
||||||
border: none;
|
border: none;
|
||||||
height: 2.5em;
|
height: 2.5em;
|
||||||
@ -113,7 +114,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: darken(@icinga-secondary, 10)
|
.var(background-color, icinga-secondary-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -196,11 +197,11 @@
|
|||||||
|
|
||||||
a {
|
a {
|
||||||
font-weight: @font-weight-bold;
|
font-weight: @font-weight-bold;
|
||||||
color: @icinga-secondary;
|
.var(color, icinga-secondary);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: darken(@icinga-blue, 10);
|
.var(color, icinga-secondary-dark);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
@name-value-table-name-width: 38/3em;
|
@name-value-table-name-width: 38/3em;
|
||||||
|
|
||||||
.action-link {
|
.action-link {
|
||||||
color: @icinga-blue;
|
.var(color, icinga-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-message {
|
.error-message {
|
||||||
@ -179,7 +179,7 @@ a:hover > .icon-cancel {
|
|||||||
|
|
||||||
tr[href].active {
|
tr[href].active {
|
||||||
.var(background-color, tr-active-color);
|
.var(background-color, tr-active-color);
|
||||||
border-left-color: @icinga-blue;
|
.var(border-left-color, icinga-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
tr[href]:hover {
|
tr[href]:hover {
|
||||||
|
@ -6,7 +6,11 @@
|
|||||||
box-shadow: @arguments;
|
box-shadow: @arguments;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button(@background-color: ~"var(--body-bg-color, @{body-bg-color})", @border-font-color: @icinga-blue, @color-dark: darken(@icinga-blue, 10%)) {
|
.button(
|
||||||
|
@background-color: ~"var(--body-bg-color, @{body-bg-color})",
|
||||||
|
@border-font-color: ~"var(--icinga-blue, @{icinga-blue})",
|
||||||
|
@color-dark: ~"var(--icinga-blue-dark, @{icinga-blue-dark})"
|
||||||
|
) {
|
||||||
.rounded-corners(3px);
|
.rounded-corners(3px);
|
||||||
|
|
||||||
background-color: extract-variable-default(@background-color);
|
background-color: extract-variable-default(@background-color);
|
||||||
|
@ -16,7 +16,7 @@
|
|||||||
.setup-header {
|
.setup-header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 5.5em;
|
height: 5.5em;
|
||||||
background-color: @icinga-blue;
|
.var(background-color, icinga-blue);
|
||||||
border-bottom: 1px solid #d9d9d9;
|
border-bottom: 1px solid #d9d9d9;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
@ -15,7 +15,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
color: @icinga-blue;
|
.var(color, icinga-blue);
|
||||||
content: "\e811";
|
content: "\e811";
|
||||||
font-family: 'ifont';
|
font-family: 'ifont';
|
||||||
|
|
||||||
@ -28,7 +28,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: @icinga-blue;
|
.var(color, icinga-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.message {
|
.message {
|
||||||
@ -56,7 +56,7 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
||||||
&:hover .icon-cancel {
|
&:hover .icon-cancel {
|
||||||
color: @icinga-blue;
|
.var(color, icinga-blue);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -206,7 +206,7 @@ table.multiselect tr[href] td {
|
|||||||
.var(color, text-color);
|
.var(color, text-color);
|
||||||
|
|
||||||
&:hover, &:focus {
|
&:hover, &:focus {
|
||||||
color: @icinga-blue;
|
.var(color, icinga-blue);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user