tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3743 from Icinga/feature/add-colorblind-theme 

Add colorblind theme
This commit is contained in:
Johannes Meyer 2019-05-22 12:21:16 +02:00 committed by GitHub
parent 13ab1292e5 e90c4430c1
commit 687c28acd1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
doc/01-About.md
View File

@ -74,3 +74,10 @@ Currently provided languages:
* Portuguese
More details about this module can be found in [this chapter](../modules/translation/doc/01-About.md#translation-module-about).
## Accessibility <a id="about-accessibility"></a>
In the Icinga Web 2 interface even the blind can see -
easy navigation with a screen reader and specific themes for different kinds of vision deficiencies
make it possible for everyone to monitor their systems without impairments.

2
doc/03-Configuration.md
View File

@ -65,7 +65,7 @@ file = "/usr/share/icingaweb2/log/icingaweb2.log"
Option | Description
-------------------------|-----------------------------------------------
default | **Optional.** Choose the default theme. Can be set to `Icinga`, `high-contrast`, `Winter` or your own installed theme. Defaults to `Icinga`. Note that this setting is case-sensitive because it refers to the filename of the theme.
default | **Optional.** Choose the default theme. Can be set to `Icinga`, `high-contrast`, `Winter`, 'colorblind' or your own installed theme. Defaults to `Icinga`. Note that this setting is case-sensitive because it refers to the filename of the theme.
disabled | **Optional.** Set this to `1` if users should not be allowed to change their theme. Defaults to `0`.
Example:

47
public/css/themes/colorblind.less Normal file
View File

@ -0,0 +1,47 @@
/*! Icinga Web 2 | (c) 2019 Icinga Development Team | GPLv2+ */
@color-ok: #CCFFD7;
@color-critical: #FE5566;
@color-critical-handled: #FF99AA;
@color-warning: #EAD010;
@color-warning-handled: #FFF399;
@color-unknown: #7791E0;
@color-unknown-handled: #B8C6FF;
@color-unreachable: @color-unknown;
@color-unreachable-handled: @color-unknown-handled;
@color-pending: #000000;
/* Adapt font color to match handled / unhandled states and maintain readability with text-shadows */
.badge {
font-weight: 800;
}
.state-ok,
.state-up {
color: black;
}
.state-warning,
.state-critical,
.state-down,
.state-unknown {
&.handled {
color: black;
}
}
.state-warning,
.state-critical,
.state-down,
.state-unknown {
color: white;
}
.state-warning:not(.handled) {
text-shadow: 0 0 3px mix(#000000, @color-warning, 60);
}
.state-critical:not(.handled),
.state-down:not(.handled) {
text-shadow: 0 0 1px mix(#000000, @color-critical, 20);
}
.state-unknown:not(.handled),
.state-unreachable:not(.handled) {
text-shadow: 0 0 1px mix(#000000, @color-unknown, 20);
}