Add fallback for browsers which do not support CSS variables
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user