web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add fallback for browsers which do not support CSS variables

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

94
customize.dist/src/less2/include/toolbar.less
View File

@@ -10,27 +10,52 @@
@import (reference) "./modal.less";
@import (reference) "./help.less";
.toolbar_main (
.toolbar_vars (
@color: @colortheme_default-color, // Color of the text for the toolbar
@bg-color: @colortheme_default-bg, // color of the toolbar background
@warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
@warn-color: @colortheme_default-warn // color of the warning text in the toolbar
) {
@toolbar-color: @color;
@toolbar-color-l20: lighten(@color, 20%);
@toolbar-color-d20: darken(@color, 20%);
@toolbar-color-d15: darken(@color, 15%);
@toolbar-bg-color: @bg-color;
@toolbar-bg-color-l8: lighten(@bg-color, 8%);
@toolbar-bg-color-l20: lighten(@bg-color, 20%);
@toolbar-bg-color-d5: darken(@bg-color, 5%);
@toolbar-bg-color-d10: darken(@bg-color, 10%);
@toolbar-bg-color-d15: darken(@bg-color, 15%);
@toolbar-warn-color: @warn-color;
@toolbar-userlist-name-edit: contrast(@toolbar-color, @toolbar-color-l20, @toolbar-color-d20);
};
.toolbar_main (
@color, // Color of the text for the toolbar
@bg-color, // color of the toolbar background
@warn-color, // color of the warning text in the toolbar
@barWidth: 600px // width of the toolbar
) {
--LessLoader_require: LessLoader_currentFile();
.toolbar_vars(@color, @bg-color, @warn-color);
--toolbar-color: @color;
--toolbar-color-l20: lighten(@color, 20%);
--toolbar-color-d20: darken(@color, 20%);
--toolbar-color-d15: darken(@color, 15%);
--toolbar-color: @toolbar-color;
--toolbar-color-l20: @toolbar-color-l20;
--toolbar-color-d20: @toolbar-color-d20;
--toolbar-color-d15: @toolbar-color-d15;
--toolbar-bg-color: @bg-color;
--toolbar-bg-color-l8: lighten(@bg-color, 8%);
--toolbar-bg-color-l20: lighten(@bg-color, 20%);
--toolbar-bg-color-d5: darken(@bg-color, 5%);
--toolbar-bg-color-d10: darken(@bg-color, 10%);
--toolbar-bg-color-d15: darken(@bg-color, 15%);
--toolbar-bg-color: @toolbar-bg-color;
--toolbar-bg-color-l8: @toolbar-bg-color-l8;
--toolbar-bg-color-l20: @toolbar-bg-color-l20;
--toolbar-bg-color-d5: @toolbar-bg-color-d5;
--toolbar-bg-color-d10: @toolbar-bg-color-d10;
--toolbar-bg-color-d15: @toolbar-bg-color-d15;
--toolbar-warn-color: @warn-color;
--toolbar-warn-color: @toolbar-warn-color;
--toolbar-userlist-name-edit: @toolbar-userlist-name-edit;
@media screen and (max-width: @barWidth) {
.cp-toolbar-rightside {
@@ -47,6 +72,7 @@
.modal_main();
};
& {
.toolbar_vars();
@toolbar_line-height: 32px;
@toolbar_top-height: 64px;
@toolbar_button-font: @colortheme_app-font;
@@ -59,15 +85,18 @@
.cp-markdown-toolbar {
height: @toolbar_line-height;
background-color: @toolbar-bg-color-l20;
background-color: var(--toolbar-bg-color-l20);
display: none;
button {
height: @toolbar_line-height !important;
outline: 0;
color: @toolbar-color;
color: var(--toolbar-color);
.toolbar_button;
font: normal normal normal 14px/1 FontAwesome;
&:hover {
background-color: @toolbar-bg-color-l8;
background-color: var(--toolbar-bg-color-l8);
}
&.cp-markdown-help { float: right; }
@@ -106,6 +135,7 @@
}
.cp-toolbar-userlist-drawer {
background-color: @toolbar-bg-color;
background-color: var(--toolbar-bg-color);
font: @colortheme_app-font-size @colortheme_font;
min-width: 175px;
@@ -294,30 +324,38 @@
}
.cp-toolbar-userlist-drawer {
background-color: @toolbar-bg-color;
background-color: var(--toolbar-bg-color);
color: @toolbar-color;
color: var(--toolbar-color);
.cp-toolbar-userlist-drawer-close {
color: @toolbar-color;
color: var(--toolbar-color);
}
h2 {
background-color: @toolbar-bg-color-d10;
background-color: var(--toolbar-bg-color-d10);
color: @toolbar-color;
color: var(--toolbar-color);
}
.cp-toolbar-userlist-name-input {
background-color: @toolbar-bg-color-d10;
background-color: var(--toolbar-bg-color-d10);
color: @toolbar-color;
color: var(--toolbar-color);
}
.cp-toolbar-userlist-name-edit {
color: contrast(var(--toolbar-color),
var(--toolbar-color-l20),
var(--toolbar-color-d20));
color: @toolbar-userlist-name-edit;
color: var(--toolbar-userlist-name-edit);
background: transparent;
&:hover {
color: @toolbar-color;
color: var(--toolbar-color);
}
}
.cp-toolbar-userlist-friend {
&:hover {
color: @toolbar-color-d15;
color: var(--toolbar-color-d15);
}
}
@@ -338,7 +376,9 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: @toolbar-bg-color;
background-color: var(--toolbar-bg-color);
color: @toolbar-color;
color: var(--toolbar-color);
.fa {
@@ -557,24 +597,32 @@
.cp-toolbar-spinner {
font-size: @colortheme_app-font-size;
color: @toolbar-color;
color: var(--toolbar-color);
}
.cp-toolbar-limit {
text-shadow: -1px 0 @toolbar-color, 0 1px @toolbar-color, 1px 0 @toolbar-color, 0 -1px @toolbar-color;
text-shadow: -1px 0 var(--toolbar-color), 0 1px var(--toolbar-color), 1px 0 var(--toolbar-color), 0 -1px var(--toolbar-color);
color: @toolbar-warn-color;
color: var(--toolbar-warn-color);
}
.cp-toolbar-leftside, .cp-toolbar-rightside {
background-color: @toolbar-bg-color-l8;
background-color: var(--toolbar-bg-color-l8);
button:hover, button.cp-toolbar-button-active {
background-color: @toolbar-bg-color;
background-color: var(--toolbar-bg-color);
}
}
.cp-toolbar-title-hoverable:hover {
.cp-toolbar-title-editable, .cp-toolbar-title-edit {
cursor: text;
border: 1px solid @toolbar-bg-color-d15;
border: 1px solid var(--toolbar-bg-color-d15);
background: @toolbar-bg-color-d10;
background: var(--toolbar-bg-color-d10);
transition: all 0.15s;
color: @toolbar-color;
color: var(--toolbar-color);
}
.cp-toolbar-title-editable {
@@ -582,16 +630,23 @@
}
}
.cp-toolbar-title-save {
border: 1px solid @toolbar-bg-color-d15;
border: 1px solid var(--toolbar-bg-color-d15);
background: @toolbar-bg-color-d10;
background: var(--toolbar-bg-color-d10);
color: @toolbar-color;
color: var(--toolbar-color);
&:hover {
background: @toolbar-bg-color-d5;
background: var(--toolbar-bg-color-d5);
}
}
input {
border: 1px solid @toolbar-bg-color-d15;
border: 1px solid var(--toolbar-bg-color-d15);
background: @toolbar-bg-color-d10;
background: var(--toolbar-bg-color-d10);
color: @toolbar-color;
color: var(--toolbar-color);
}
.cp-dropdown-content.cp-dropdown-left a {
@@ -618,6 +673,7 @@
padding: 0;
margin: 0 5px;
font-size: @colortheme_app-font-size;
color: @toolbar-warn-color;
color: var(--toolbar-warn-color);
.cp-pnp-msg {
padding-left: 5px;
@@ -627,6 +683,7 @@
font-size: @colortheme_app-font-size;
font-family: @colortheme_font;
font-weight: bold;
color: @toolbar-warn-color;
color: var(--toolbar-warn-color);
&:hover {
text-decoration: underline;
@@ -921,11 +978,6 @@
display: flex;
min-height: @toolbar_line-height;
overflow: hidden;
@media screen and (max-width: var(--toolbar-barWidth)) { // 450px
flex-wrap: wrap;
height: auto;
width: 100%;
}
&:empty {
min-height: 0;
height: 0;