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

2
bower.json
View File

@ -36,7 +36,7 @@
"alertifyjs": "1.0.11", "alertifyjs": "1.0.11",
"scrypt-async": "1.2.0", "scrypt-async": "1.2.0",
"require-css": "0.1.10", "require-css": "0.1.10",
"less": "^2.7.2", "less": "^3.7.1",
"bootstrap": "^v4.0.0", "bootstrap": "^v4.0.0",
"diff-dom": "2.1.1", "diff-dom": "2.1.1",
"nthen": "^0.1.5", "nthen": "^0.1.5",

13
customize.dist/src/less2/include/avatar.less
View File

@ -1,11 +1,18 @@
@import (reference) "./tools.less"; @import (reference) "./tools.less";
.avatar_vars(
@width: 30px
) {
@avatar-width: @width;
@avatar-font-size: @width / 1.2;
}
.avatar_main(@width) { .avatar_main(@width) {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
.avatar_vars(@width);
--avatar-width: @width; --avatar-width: @avatar-width;
--avatar-font-size: @width / 1.2; --avatar-font-size: @avatar-font-size;
} }
& { & {
.avatar_vars();
&.cp-avatar { &.cp-avatar {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

37
customize.dist/src/less2/include/checkmark.less
View File

@ -1,17 +1,28 @@
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
.checkmark_vars(
@size: 20px
) {
@checkmark-size: @size;
@checkmark-width: round(@size / 8);
@checkmark-dim1: round(@size / 3);
@checkmark-dim2: round(2 * @size / 3);
@checkmark-top: round(@size / 12) - 1;
@checkmark-radio-size: @checkmark-dim1 * 3;
}
.checkmark_main(@size) { .checkmark_main(@size) {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
.checkmark_vars(@size);
--checkmark-size: @size; --checkmark-size: @checkmark-size;
--checkmark-width: round(@size / 8); --checkmark-width: @checkmark-width;
@dim1: round(@size / 3); --checkmark-dim1: @checkmark-dim1;
--checkmark-dim1: round(@size / 3); --checkmark-dim2: @checkmark-dim2;
--checkmark-dim2: round(2 * @size / 3); --checkmark-top: @checkmark-top;
--checkmark-top: round(@size / 12) - 1; --checkmark-radio-size: @checkmark-radio-size;
--checkmark-radio-size: @dim1 * 3;
} }
& { & {
.checkmark_vars();
// <label.cp-checkmark><input><span.cp-checkmark-mark></span>Text</label> // <label.cp-checkmark><input><span.cp-checkmark-mark></span>Text</label>
.cp-checkmark { .cp-checkmark {
margin: 0; margin: 0;
@ -64,7 +75,9 @@
.cp-checkmark-mark { .cp-checkmark-mark {
margin-right: 10px; margin-right: 10px;
position: relative; position: relative;
height: @checkmark-size;
height: var(--checkmark-size); height: var(--checkmark-size);
width: @checkmark-size;
width: var(--checkmark-size); width: var(--checkmark-size);
background-color: @colortheme_checkmark-back0; background-color: @colortheme_checkmark-back0;
display: flex; display: flex;
@ -74,11 +87,15 @@
&:after { &:after {
content: ""; content: "";
display: none; display: none;
margin-top: @checkmark-top;
margin-top: var(--checkmark-top); margin-top: var(--checkmark-top);
width: @checkmark-dim1;
width: var(--checkmark-dim1); width: var(--checkmark-dim1);
height: @checkmark-dim2;
height: var(--checkmark-dim2); height: var(--checkmark-dim2);
transform: rotate(45deg); transform: rotate(45deg);
border: solid @colortheme_checkmark-col1; border: solid @colortheme_checkmark-col1;
border-width: 0 @checkmark-width @checkmark-width 0;
border-width: 0 var(--checkmark-width) var(--checkmark-width) 0; border-width: 0 var(--checkmark-width) var(--checkmark-width) 0;
position: absolute; position: absolute;
} }
@ -139,7 +156,9 @@
.cp-radio-mark { .cp-radio-mark {
margin-right: 10px; margin-right: 10px;
position: relative; position: relative;
height: @checkmark-radio-size;
height: var(--checkmark-radio-size); height: var(--checkmark-radio-size);
width: @checkmark-radio-size;
width: var(--checkmark-radio-size); width: var(--checkmark-radio-size);
background-color: @colortheme_checkmark-back0; background-color: @colortheme_checkmark-back0;
border-radius: 50%; border-radius: 50%;
@ -153,7 +172,9 @@
content: ""; content: "";
border-radius: 50%; border-radius: 50%;
background: white; background: white;
width: @checkmark-dim1;
width: var(--checkmark-dim1); width: var(--checkmark-dim1);
height: @checkmark-dim1;
height: var(--checkmark-dim1); height: var(--checkmark-dim1);
//transform: rotate(45deg); //transform: rotate(45deg);

21
customize.dist/src/less2/include/creation.less
View File

@ -3,18 +3,25 @@
@import (reference) "./tools.less"; @import (reference) "./tools.less";
@import (reference) './icon-colors.less'; @import (reference) './icon-colors.less';
.creation_vars(
@color: @colortheme_default-color,
@bg-color: @colortheme_default-bg
) {
@creation-color: @color;
@creation-bg-color: @bg-color;
};
.creation_main( .creation_main(
@color: @colortheme_default-color, // Color of the text for the toolbar @color,
@bg-color: @colortheme_default-bg, // color of the toolbar background @bg-color
@warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
) { ) {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
.creation_vars(@color, @bg-color);
--creation-color: @color; --creation-color: @color;
--creation-bg-color: @bg-color; --creation-bg-color: @bg-color;
// --creation-warn-color: @warn-color; // unused
} }
& { & {
.creation_vars();
@colortheme_creation-modal-bg: #fff; @colortheme_creation-modal-bg: #fff;
@colortheme_creation-modal: #666; @colortheme_creation-modal: #666;
@colortheme_creation-modal-title: @colortheme_loading-bg; @colortheme_creation-modal-title: @colortheme_loading-bg;
@ -267,9 +274,12 @@
border: 1px solid transparent; border: 1px solid transparent;
&.cp-creation-template-selected { &.cp-creation-template-selected {
color: @creation-color !important;
color: var(--creation-color) !important; color: var(--creation-color) !important;
background-color: @creation-bg-color !important;
background-color: var(--creation-bg-color) !important; background-color: var(--creation-bg-color) !important;
.fa { .fa {
color: @creation-color;
color: var(--creation-color); color: var(--creation-color);
} }
} }
@ -301,6 +311,7 @@
max-width: 100%; max-width: 100%;
} }
.fa { .fa {
color: @creation-bg-color;
color: var(--creation-bg-color); color: var(--creation-bg-color);
cursor: pointer; cursor: pointer;
width: 100px; width: 100px;

1
customize.dist/src/less2/include/framework.less
View File

@ -34,7 +34,6 @@
.password_main(); .password_main();
.creation_main( .creation_main(
@bg-color: @bg-color, @bg-color: @bg-color,
@warn-color: @warn-color,
@color: @color @color: @color
); );
font: @colortheme_app-font; font: @colortheme_app-font;

30
customize.dist/src/less2/include/help.less
View File

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

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

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