Add fallback for browsers which do not support CSS variables

This commit is contained in:
Caleb James DeLisle
2018-07-17 16:21:54 +02:00
parent cf87d70a8f
commit 38a1e5e39f
7 changed files with 149 additions and 49 deletions

View File

@@ -1,16 +1,26 @@
@import (reference) "./colortheme-all.less";
.help_vars (
@color: @colortheme_default-color,
@bg-color: @colortheme_default-bg
) {
@help-bg-color-l15: lighten(@bg-color, 15%);
@help-text-color: contrast(@help-bg-color-l15, #fff, #000); //@color;
@help-link-color: contrast(@help-bg-color-l15, lighten(spin(@bg-color, 180), 10%), darken(spin(@bg-color, 180), 10%));
}
.help_main (@color, @bg-color) {
--LessLoader_require: LessLoader_currentFile();
--help-bg-color-l15: lighten(@bg-color, 15%);
--help-bg-color-spin: spin(@bg-color, 180);
--help-bg-color-spin-d10: darken(spin(@bg-color, 180), 10%);
--help-bg-color-spin-l10: lighten(spin(@bg-color, 180), 10%);
}
.help_vars(@color, @bg-color);
--help-bg-color-l15: @help-bg-color-l15;
--help-text-color: @help-text-color;
--help-link-color: @help-link-color;
};
& {
.help_vars();
.cp-help-container {
position: relative;
background-color: @help-bg-color-l15;
background-color: var(--help-bg-color-l15);
&.cp-help-hidden {
display: none;
@@ -22,13 +32,13 @@
right: 5px;
}
.cp-help-text {
color: contrast(var(--help-bg-color-l15), #fff, #000); //@color;
color: @help-text-color;
color: var(--help-text-color);
margin: 0;
padding: 15px;
a {
//color: darken(@colortheme_link-color, 30%);
color: contrast(var(--help-bg-color-l15), var(--help-bg-color-spin-l10), var(--help-bg-color-spin-d10));
//color: darken(spin(var(--help-bg-color-l15), 180), 10%);
color: @help-link-color;
color: var(--help-link-color);
}
h1 {
font-size: 20px;