infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Add fallback for browsers which do not support CSS variables

Browse Source
pull/1/head
Caleb James DeLisle 6 years ago
parent cf87d70a8f
commit 38a1e5e39f
7 changed files with 149 additions and 49 deletions
Show Stats Download Patch File Download Diff File

2
bower.json
Unescape Escape View File

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

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

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

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

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

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

@ -3,18 +3,25 @@
@import (reference) "./tools.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(
@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
@color,
@bg-color
) {
--LessLoader_require: LessLoader_currentFile();
.creation_vars(@color, @bg-color);
--creation-color: @color;
--creation-bg-color: @bg-color;
// --creation-warn-color: @warn-color; // unused
}
& {
.creation_vars();
@colortheme_creation-modal-bg: #fff;
@colortheme_creation-modal: #666;
@colortheme_creation-modal-title: @colortheme_loading-bg;
@ -267,9 +274,12 @@
border: 1px solid transparent;
&.cp-creation-template-selected {
color: @creation-color !important;
color: var(--creation-color) !important;
background-color: @creation-bg-color !important;
background-color: var(--creation-bg-color) !important;
.fa {
color: @creation-color;
color: var(--creation-color);
}
}
@ -301,6 +311,7 @@
max-width: 100%;
}
.fa {
color: @creation-bg-color;
color: var(--creation-bg-color);
cursor: pointer;
width: 100px;

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

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

30
customize.dist/src/less2/include/help.less
Unescape Escape 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;

94
customize.dist/src/less2/include/toolbar.less
Unescape Escape 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: @toolbar-color;
--toolbar-color-l20: @toolbar-color-l20;
--toolbar-color-d20: @toolbar-color-d20;
--toolbar-color-d15: @toolbar-color-d15;
--toolbar-color: @color;
--toolbar-color-l20: lighten(@color, 20%);
--toolbar-color-d20: darken(@color, 20%);
--toolbar-color-d15: darken(@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-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: @toolbar-warn-color;
--toolbar-warn-color: @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;

Write Preview
Loading…
Cancel
Save