css: Respect --icinga-*

This commit is contained in:
Johannes Meyer 2021-06-28 16:22:19 +02:00
parent 6c235c64b5
commit b88dad9525
14 changed files with 47 additions and 37 deletions

View File

@ -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;

View File

@ -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,

View File

@ -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);
} }
} }

View File

@ -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 {

View File

@ -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);
} }
} }
} }

View File

@ -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;

View File

@ -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;
} }

View File

@ -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;
} }

View File

@ -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;
} }

View File

@ -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);
} }
} }
} }

View File

@ -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 {

View File

@ -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);

View File

@ -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;

View File

@ -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);
} }
} }