From 38a1e5e39fb854cdbad8896333901beb85ee6510 Mon Sep 17 00:00:00 2001 From: Caleb James DeLisle Date: Tue, 17 Jul 2018 16:21:54 +0200 Subject: [PATCH] Add fallback for browsers which do not support CSS variables --- bower.json | 2 +- customize.dist/src/less2/include/avatar.less | 13 ++- .../src/less2/include/checkmark.less | 37 ++++++-- .../src/less2/include/creation.less | 21 ++++- .../src/less2/include/framework.less | 1 - customize.dist/src/less2/include/help.less | 30 ++++-- customize.dist/src/less2/include/toolbar.less | 94 ++++++++++++++----- 7 files changed, 149 insertions(+), 49 deletions(-) diff --git a/bower.json b/bower.json index 28db3ec8e..79859659e 100644 --- a/bower.json +++ b/bower.json @@ -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", diff --git a/customize.dist/src/less2/include/avatar.less b/customize.dist/src/less2/include/avatar.less index 367034972..8e9cfd8fa 100644 --- a/customize.dist/src/less2/include/avatar.less +++ b/customize.dist/src/less2/include/avatar.less @@ -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; diff --git a/customize.dist/src/less2/include/checkmark.less b/customize.dist/src/less2/include/checkmark.less index 2f606f7ec..8f6e38cbb 100644 --- a/customize.dist/src/less2/include/checkmark.less +++ b/customize.dist/src/less2/include/checkmark.less @@ -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(); // Text .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); diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less index bb1d38958..284c5ed39 100644 --- a/customize.dist/src/less2/include/creation.less +++ b/customize.dist/src/less2/include/creation.less @@ -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; diff --git a/customize.dist/src/less2/include/framework.less b/customize.dist/src/less2/include/framework.less index 36db08a61..ae49f0660 100644 --- a/customize.dist/src/less2/include/framework.less +++ b/customize.dist/src/less2/include/framework.less @@ -34,7 +34,6 @@ .password_main(); .creation_main( @bg-color: @bg-color, - @warn-color: @warn-color, @color: @color ); font: @colortheme_app-font; diff --git a/customize.dist/src/less2/include/help.less b/customize.dist/src/less2/include/help.less index cd54aaff2..c39d167d0 100644 --- a/customize.dist/src/less2/include/help.less +++ b/customize.dist/src/less2/include/help.less @@ -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; diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index d3e57981e..122fff891 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -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;