tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-29 16:54:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add form-backgrounds colour and apply to toggles and buttons

Browse Source
This commit is contained in:
Feu Mourek 2019-08-02 12:53:52 +02:00
parent 7acdf789e0
commit bc4bb6741b
1 changed files with 50 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
public/css/themes/solarized-dark.less
View File

@ -9,6 +9,7 @@
@base0: #839496; @base0: #839496;
@base1: #93a1a1; @base1: #93a1a1;
@base2: #eee8d5; @base2: #eee8d5;
@button-primary-color: #237c98;
@icinga-blue: @base1; @icinga-blue: @base1;
@body-bg-color: @base03; @body-bg-color: @base03;
@ -266,6 +267,10 @@ textarea {
} }
} }
/* Form styles */
@input-background: lighten(@base02, 5);
form .control-group { form .control-group {
input[type="text"], input[type="text"],
input[type="password"], input[type="password"],
@ -275,6 +280,50 @@ form .control-group {
input[type="time"], input[type="time"],
textarea, textarea,
select { select {
background-color: @base02; background-color: @input-background;
}
}
.icinga-controls .toggle-switch .toggle-slider {
background: @input-background;
border: 2px solid @input-background;
}
.icinga-controls .toggle-switch .toggle-slider:before {
background: @body-bg-color;
border: 1px solid @body-bg-color;
}
.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider {
background-color: @button-primary-color;
border: 1px solid @button-primary-color;
}
.icinga-controls input[type="checkbox"]:focus + .toggle-switch .toggle-slider {
box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px fade(@button-primary-color, 40);
}
.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider:before {
border: 1px solid @button-primary-color;
}
.button {
background-color: @input-background;
border: 2px solid @input-background;
color: @text-color;
&:focus,
&:hover,
&.btn-primary {
background-color: lighten(@base02, 15);
border-color: lighten(@base02, 15);
color: @text-color;
}
&.btn-primary:focus,
&.btn-primary:hover {
background-color: @button-primary-color;
border-color: @button-primary-color;
color: @text-color;
} }
} }