From bda1f362632b4e1e453117a679c2580c7ba5b208 Mon Sep 17 00:00:00 2001 From: yflory Date: Fri, 22 Jan 2021 14:27:17 +0100 Subject: [PATCH 01/97] Dark mode selection --- .../src/less2/include/colortheme-all.less | 1 - .../src/less2/include/colortheme-dark.less | 130 ++++++++++++++++++ .../src/less2/include/colortheme.less | 2 +- www/common/LessLoader.js | 18 +++ www/common/boot2.js | 38 +++++ www/common/sframe-boot2.js | 10 ++ www/settings/inner.js | 108 +++++++++++++++ www/settings/main.js | 9 ++ www/teams/app-team.less | 2 +- 9 files changed, 315 insertions(+), 3 deletions(-) create mode 100644 customize.dist/src/less2/include/colortheme-dark.less diff --git a/customize.dist/src/less2/include/colortheme-all.less b/customize.dist/src/less2/include/colortheme-all.less index be048d7bc..c212ac9ff 100644 --- a/customize.dist/src/less2/include/colortheme-all.less +++ b/customize.dist/src/less2/include/colortheme-all.less @@ -2,5 +2,4 @@ // create a file: customize/src/less2/include/colortheme.less // override whatever colors you want. When you update, the new colors will be // added ok because the original file is pulled in first. -@import (reference) "/customize.dist/src/less2/include/colortheme.less"; @import (reference) "/customize/src/less2/include/colortheme.less"; diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less new file mode 100644 index 000000000..0028af616 --- /dev/null +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -0,0 +1,130 @@ +@colortheme_font: 'Open Sans', 'Helvetica Neue', sans-serif; +@colortheme_app-font-size: 16px; +@colortheme_app-font-size-small: 13px; +@colortheme_app-font: @colortheme_app-font-size @colortheme_font; + +@colortheme_logo-1: #326599; +@colortheme_logo-2: #0087FF; +@colortheme_logo_2_light: lighten(@colortheme_logo-2, 40%); +@colortheme_loading_bg: #E7E7E7; + +@colortheme_link-color: #0275D8; +@colortheme_link-color-visited: #005999; +@colortheme_info-background: #eeeeee; + +@colortheme_old-base: #302B28; +@colortheme_old-fore: #fafafa; + +@colortheme_base: #fff; +@colortheme_light-base: lighten(@colortheme_base, 20%); + +@colortheme_cp-red: #FA5858; // remove red +@colortheme_cp-green: #46E981; + +@colortheme_form-border: #bbbbbb; +@colortheme_form-bg: @colortheme_logo-2; +@colortheme_form-color: #ffffff; +@colortheme_form-bg-alt: #ffffff; +@colortheme_form-color-alt: @colortheme_logo-2; +@colortheme_form-warning: #f49842; +@colortheme_form-warning-hov: darken(@colortheme_form-warning, 5%); + +@colortheme_context-menu-icon-color: #7b7b7b; + +@colortheme_modal-bg: @colortheme_form-bg-alt; // TODO Modals bg +@colortheme_modal-fg: @colortheme_form-color-alt; +@colortheme_modal-link: @colortheme_link-color; +@colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%); +@colortheme_modal-dim: fade(@cryptpad_text_col, 50%); // TODO transparent background behind modals +@colortheme_modal-input: @colortheme_form-bg; +@colortheme_modal-input-fg: @colortheme_form-color; + +@colortheme_loading-bg: @colortheme_logo-1; +@colortheme_loading-bg-alt: @colortheme_logo-2; +@colortheme_loading-color: @colortheme_old-fore; + + +// TODO modals buttons +@colortheme_alertify-red: #E55236; +@colortheme_alertify-red-color: #FFF; +@colortheme_alertify-red-border: transparent; +@colortheme_alertify-green: #77C825; +@colortheme_alertify-green-color: #FFF; +@colortheme_alertify-green-border: transparent; +@colortheme_alertify-primary: @colortheme_form-bg; +@colortheme_alertify-primary-text: @colortheme_form-color; +@colortheme_alertify-primary-border: transparent; +@colortheme_alertify-disabled: #6c757d; +@colortheme_alertify-disabled-text: #ffffff; +@colortheme_alertify-disabled-border: #6c757d; +@colortheme_alertify-cancel: @colortheme_modal-bg; +@colortheme_alertify-cancel-border: #949494; + +@colortheme_notification-log: fade(@colortheme_logo-2, 90%); +@colortheme_notification-color: #fff;; +@colortheme_notification-warn: rgba(205, 37, 50, 0.8); + +@colortheme_dropdown-bg: #f9f9f9; +@colortheme_dropdown-color: black; +@colortheme_dropdown-bg-hover: #f1f1f1; +@colortheme_dropdown-bg-active: #e8e8e8; + +// Apps, these colors are used for customizing the toolbar for the apps. +@colortheme_toolbar-warn: @colortheme_alertify-red; +@colortheme_pad-toolbar-bg: #eeeeee; +@colortheme_help-bg: #ddd; +@colortheme_userlist-bg: #eee; +@colortheme_pad-chat-bg: #AAA; + +@colortheme_apps: { + default: #000000; + drive: #0087FF; // Used as icon color in index.js (index.html) + pad: #256ad5; + code: #EAA000; + slide: #e57614; + poll: #2c9e98; + whiteboard: #a72ba7; + kanban: #8C4; + sheet: #40865c; + oodoc: #5170B5; + ooslide: #C65D27; + file: #CD2532; +} + +@colortheme_static_apps: { + default: #000000; + teams: #4A3BBD; + contacts: #607B8D; +} + +@colortheme_poll-color: #fff; +@colortheme_poll-help-bg: #bbffbb; +@colortheme_poll-th-bg: #005bef; +@colortheme_poll-th-fg: #fff; + +// Sidebar layout (profile / settings) +@colortheme_sidebar-active: #fff; +@colortheme_sidebar-left-bg: #eee; +@colortheme_sidebar-left-fg: #000; +@colortheme_sidebar-left-branch: #888; +@colortheme_sidebar-right-bg: #fff; +@colortheme_sidebar-right-fg: #000; +@colortheme_sidebar-description: #777; +@colortheme_sidebar-button-bg: #3066e5; +@colortheme_sidebar-button-red-bg: #e54e4e; +@colortheme_sidebar-button-alt-bg: #fff; + +@cryptpad_color_blue: #4591C4; +@cryptpad_color_grey: #999999; +@cryptpad_color_light_grey: #e0e0e0; +@cryptpad_header_col: #1E1F1F; +@cryptpad_text_col: #3F4141; +@cryptpad_color_light_blue: #00b7d8; + +@colortheme_checkmark-back0: @colortheme_form-bg-alt; +@colortheme_checkmark-back0-active: @colortheme_form-border; +@colortheme_checkmark-back1: @colortheme_form-bg; +@colortheme_checkmark-col1: @colortheme_form-color; +@colortheme_checkmark-back2: @colortheme_form-bg-alt; +@colortheme_checkmark-col2: @colortheme_form-color-alt; +@colortheme_checkmark-disabled: #AAA; diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 4b7cc97bf..700ee8d91 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -78,7 +78,7 @@ @colortheme_apps: { default: #0087FF; - drive: #0087FF; + drive: #0087FF; // Used as icon color in index.js (index.html) pad: #256ad5; code: #EAA000; slide: #e57614; diff --git a/www/common/LessLoader.js b/www/common/LessLoader.js index 5b52b3d2c..cabf5411b 100644 --- a/www/common/LessLoader.js +++ b/www/common/LessLoader.js @@ -93,6 +93,13 @@ define([ xhr.send(null); }; + var COLORTHEME = '/customize/src/less2/include/colortheme.less'; + var COLORTHEME_DARK = '/customize/src/less2/include/colortheme-dark.less'; + var getColorthemeURL = function () { + if (window.CryptPad_theme === 'dark') { return COLORTHEME_DARK; } + return COLORTHEME; + }; + var lessEngine; var tempCache = { key: Math.random() }; var getLessEngine = function (cb) { @@ -108,6 +115,13 @@ define([ }); var doXHR = lessEngine.FileManager.prototype.doXHR; lessEngine.FileManager.prototype.doXHR = function (url, type, callback, errback) { + console.error(url, COLORTHEME); // XXX + var col = false; + if (url === COLORTHEME) { + col = true; + url = getColorthemeURL(); + console.warn(url); + } url = fixURL(url); var cached = tempCache[url]; if (cached && cached.res) { @@ -117,6 +131,10 @@ define([ if (cached) { return void cached.queue.push(callback); } cached = tempCache[url] = { queue: [ callback ], res: undefined }; return doXHR(url, type, function (text, lastModified) { + if (col) { + console.warn(text, lastModified); + // XXX COLOR: append custom theme here + } cached.res = [ text, lastModified ]; var queue = cached.queue; cached.queue = []; diff --git a/www/common/boot2.js b/www/common/boot2.js index 30f776a25..8ed428cbb 100644 --- a/www/common/boot2.js +++ b/www/common/boot2.js @@ -1,3 +1,41 @@ +(function () { +try { + var isDarkOS = function () { + try { + return window.matchMedia('(prefers-color-scheme: dark)').matches; + } catch (e) { return false; } + }; + var flush = window.CryptPad_flushCache = function () { + Object.keys(localStorage).forEach(function (k) { + if (k.indexOf('CRYPTPAD_CACHE|') !== 0 && k.indexOf('LESS_CACHE') !== 0) { return; } + delete localStorage[k]; + }); + }; + var os = isDarkOS() ? 'dark' : 'light'; + var key = 'CRYPTPAD_STORE|colortheme'; + window.CryptPad_theme = localStorage[key] || os; + if (!localStorage[key]) { + // We're using OS theme, check if we need to change + if (os !== localStorage[key+'_default']) { + console.warn('New OS theme, flush cache'); + flush(); + localStorage[key+'_default'] = os; + } + } + //localStorage[key] = theme; + // If the wrong theme is built, flush it + /* XXX flush cache when change + if (theme !== built) { + console.warn('New theme, flush cache'); + Object.keys(localStorage).forEach(function (k) { + if (k.indexOf('CRYPTPAD_CACHE|') !== 0 && k.indexOf('LESS_CACHE') !== 0) { return; } + delete localStorage[k]; + }); + } + */ +} catch (e) { console.error(e); } +})(); + // This is stage 1, it can be changed but you must bump the version of the project. define([ '/common/requireconfig.js' diff --git a/www/common/sframe-boot2.js b/www/common/sframe-boot2.js index 66a93545f..828c244a8 100644 --- a/www/common/sframe-boot2.js +++ b/www/common/sframe-boot2.js @@ -1,3 +1,13 @@ +(function () { +try { + if (!window.cryptpadStore) { return; } + var theme = window.cryptpadStore.store['colortheme']; + var os = window.cryptpadStore.store['colortheme_default']; + window.CryptPad_theme = theme || os; + console.error(theme, os); +} catch (e) { console.error(e); } +})(); + // This is stage 1, it can be changed but you must bump the version of the project. // Note: This must only be loaded from inside of a sandbox-iframe. define([ diff --git a/www/settings/inner.js b/www/settings/inner.js index 38a4f4b88..f94287b41 100644 --- a/www/settings/inner.js +++ b/www/settings/inner.js @@ -62,6 +62,10 @@ define([ 'cp-settings-userfeedback', 'cp-settings-cache', ], + 'style': [ + 'cp-settings-colortheme', + 'cp-settings-custom-theme', + ], 'drive': [ 'cp-settings-resettips', 'cp-settings-drive-duplicate', @@ -408,6 +412,110 @@ define([ ]); }, true); + // XXX + Messages.settings_colorthemeTitle = "Color theme"; + Messages.settings_colorthemeHint = "Change the overall colors of CryptPad on this machine."; + Messages.settings_colortheme_default = "Default ({0})"; + Messages.settings_colortheme_light = "Light"; + Messages.settings_colortheme_dark = "Dark"; + Messages.settings_colortheme_custom = "Custom"; + + makeBlock('colortheme', function (cb) { + var store = window.cryptpadStore; + + var theme = window.cryptpadStore.store['colortheme'] || 'default'; + var os = window.cryptpadStore.store['colortheme_default'] || 'light'; + var values = ['default', 'light', 'dark', 'custom']; + + var defaultTheme = Messages['settings_colortheme_'+os]; + var opts = h('div.cp-settings-radio-container', [ + values.map(function (key, i) { + return UI.createRadio('cp-colortheme-radio', 'cp-colortheme-radio-'+key, + Messages._getKey('settings_colortheme_' + key, [defaultTheme]), + key === theme, { + input: { value: key }, + label: { class: 'noTitle' } + }); + }) + ]); + + cb(opts); + + var spinner = UI.makeSpinner($(opts)); + $(opts).find('input[name="cp-colortheme-radio"]').change(function () { + var val = this.value; + if (values.indexOf(val) === -1) { return; } + if (val === theme) { return; } + spinner.spin(); + + // Check if we need to flush cache + var flush = false; + if (val === "default" && os === theme) { + // Switch from a theme to default without changing value: nothing to do + } else if (theme === "default" && os === val) { + // Switch from default to a selected value without any change: nothing to do + } else { + // The theme is different, flush cache + flush = true; + } + + if (val === 'default') { val = ''; } + sframeChan.query('Q_COLORTHEME_CHANGE', { + theme: val, + flush: flush + }, function () { + window.cryptpadStore.store['colortheme'] = val; + theme = val || 'default'; + spinner.done(); + }); + }); + + return; + var $cbox = $(UI.createCheckbox('cp-settings-cache', + Messages.settings_cacheCheckbox, + false, { label: { class: 'noTitle' } })); + var spinner = UI.makeSpinner($cbox); + + // Checkbox: "Enable safe links" + var $checkbox = $(opts).find('.cp-radio-colortheme input').on('change', function() { + spinner.spin(); + var val = !$checkbox.is(':checked') ? '1' : undefined; + store.put('disableCache', val, function () { + sframeChan.query('Q_CACHE_DISABLE', { + disabled: Boolean(val) + }, function () { + spinner.done(); + }); + }); + }); + + store.get('disableCache', function (val) { + if (!val) { + $checkbox.attr('checked', 'checked'); + } + }); + + var button = h('button.btn.btn-danger', [ + h('i.fa.fa-trash-o'), + h('span', Messages.settings_cacheButton) + ]); + var buttonContainer = h('div.cp-settings-clear-cache', button); + var spinner2 = UI.makeSpinner($(buttonContainer)); + UI.confirmButton(button, { + classes: 'btn-danger' + }, function () { + spinner2.spin(); + sframeChan.query('Q_CLEAR_CACHE', null, function() { + spinner2.done(); + }); + }); + + cb([ + $cbox[0], + buttonContainer + ]); + }, true); + create['delete'] = function() { if (!common.isLoggedIn()) { return; } var $div = $('
', { 'class': 'cp-settings-delete cp-sidebarlayout-element' }); diff --git a/www/settings/main.js b/www/settings/main.js index 750423a1d..be8018ca7 100644 --- a/www/settings/main.js +++ b/www/settings/main.js @@ -69,6 +69,15 @@ define([ sframeChan.on('Q_SETTINGS_DELETE_ACCOUNT', function (data, cb) { Cryptpad.deleteAccount(cb); }); + sframeChan.on('Q_COLORTHEME_CHANGE', function (data, cb) { + localStorage['CRYPTPAD_STORE|colortheme'] = data.theme; + if (data.flush && window.CryptPad_flushCache) { + window.CryptPad_flushCache(); + window.location.reload(); + return; + } + cb(); + }); }; var category; if (window.location.hash) { diff --git a/www/teams/app-team.less b/www/teams/app-team.less index 7792b0c5f..ee170ffbe 100644 --- a/www/teams/app-team.less +++ b/www/teams/app-team.less @@ -3,7 +3,7 @@ @import (reference) '../../customize/src/less2/include/messenger.less'; @import (reference) '../../customize/src/less2/include/sidebar-layout.less'; @import (reference) "../../customize/src/less2/include/tools.less"; -@import (reference) "../../customize/src/less2/include/colortheme.less"; +@import (reference) "../../customize/src/less2/include/colortheme-all.less"; @import (reference) '../../customize/src/less2/include/export.less'; From 2554dacc4b59e3ac8d0a4f18224c39b7650aaf0a Mon Sep 17 00:00:00 2001 From: yflory Date: Fri, 22 Jan 2021 15:12:11 +0100 Subject: [PATCH 02/97] Add custom colortheme --- www/common/LessLoader.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/www/common/LessLoader.js b/www/common/LessLoader.js index cabf5411b..e9b60c381 100644 --- a/www/common/LessLoader.js +++ b/www/common/LessLoader.js @@ -95,6 +95,9 @@ define([ var COLORTHEME = '/customize/src/less2/include/colortheme.less'; var COLORTHEME_DARK = '/customize/src/less2/include/colortheme-dark.less'; + var getColortheme = function () { + return window.CryptPad_theme; + }; var getColorthemeURL = function () { if (window.CryptPad_theme === 'dark') { return COLORTHEME_DARK; } return COLORTHEME; @@ -133,7 +136,13 @@ define([ return doXHR(url, type, function (text, lastModified) { if (col) { console.warn(text, lastModified); - // XXX COLOR: append custom theme here + if (getColortheme() === "custom") { + // XXX COLOR: append custom theme here + var custom = [ + '@cryptpad_text_col: #FF0000;' + ].join('\n'); + text += '\n'+custom; + } } cached.res = [ text, lastModified ]; var queue = cached.queue; From 45dff2f5c460c613424d8fe86c43769961a9de58 Mon Sep 17 00:00:00 2001 From: yflory Date: Fri, 22 Jan 2021 18:30:54 +0100 Subject: [PATCH 03/97] Cleanup --- .../src/less2/include/alertify.less | 62 ++++------ customize.dist/src/less2/include/avatar.less | 6 +- .../src/less2/include/checkmark.less | 65 +++++----- .../src/less2/include/colortheme.less | 86 ++++++++++--- customize.dist/src/less2/include/drive.less | 2 +- .../src/less2/include/dropdown.less | 26 ++-- customize.dist/src/less2/include/forms.less | 113 +++++++----------- .../src/less2/include/markdown.less | 29 ++--- customize.dist/src/less2/include/modal.less | 20 ++-- customize.dist/src/less2/include/tippy.less | 9 +- customize.dist/src/less2/include/toolbar.less | 9 +- customize.dist/src/less2/include/tools.less | 7 +- .../src/less2/include/usergrid.less | 5 +- .../src/less2/include/variables.less | 4 +- www/code/app-code.less | 4 +- www/common/markdown.less | 27 ----- www/kanban/app-kanban.less | 4 +- www/settings/inner.js | 1 - www/slide/app-slide.less | 2 +- 19 files changed, 223 insertions(+), 258 deletions(-) delete mode 100644 www/common/markdown.less diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index fd52420b0..8410cc7ca 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/customize.dist/src/less2/include/alertify.less @@ -10,20 +10,8 @@ }; & { @max-z-index: 2147483647; - @alertify-fore: @colortheme_modal-fg; - @alertify-base: @colortheme_modal-bg; - @alertify-dialog-bg: @alertify-base; - @alertify-dialog-fg: @alertify-fore; - - @alertify-btn-fg: @alertify-fore; - - @alertify-light-bg: fade(@alertify-fore, 25%); - @alertify-bg: @colortheme_modal-dim; - @alertify-fg: @alertify-fore; - - @alertify-input-bg: @colortheme_modal-input; - @alertify-input-fg: @colortheme_modal-input-fg; + @alertify-light-bg: fade(@cp_alertify-fg, 25%); @alertify_padding-base: @variables_padding; @alertify_box-shadow: @variables_shadow; @@ -39,7 +27,7 @@ } > * { padding: @alertify_padding-base @alertify_padding-base * 4; - color: @colortheme_notification-color; + color: @cp_alertify-log-fg; font-family: @colortheme_font; font-size: large; @@ -47,22 +35,22 @@ box-shadow: @alertify_box-shadow; &, &.default { // FIXME - background: @colortheme_notification-log; + background: @cp_alertify-log-bg; } &.error { font-weight: bold; - background: @colortheme_notification-warn; + background: @cp_alertify-warn-bg; } &.success { - background: @colortheme_notification-log; + background: @cp_alertify-log-bg; } } } .alertify { position: fixed; - background-color: @alertify-bg; - color: @alertify-fg; + background-color: @cp_alertify-overlay; + color: @cp_alertify-fg; left: 0; right: 0; top: 0; @@ -86,7 +74,7 @@ .message { h1, h2, h3, h4, h5, h6 { - color: @alertify-fg; + color: @cp_alertify-fg; } } @@ -118,17 +106,17 @@ } color: @colortheme_light-base; - background-color: @alertify-dialog-bg; + background-color: @cp_alertify-bg; input[id$="tokenfield"][type="text"].token-input { - background-color: @alertify-dialog-bg !important; + background-color: @cp_alertify-bg !important; } }*/ } .dialog { & > div { - background-color: @alertify-dialog-bg; + background-color: @cp_alertify-bg; &.half { width: 50%; max-width: 50%; @@ -154,7 +142,7 @@ max-width: 500px; margin: 0 auto; text-align: left; - background: #fff; + background: @cp_alertify-bg; box-shadow: @alertify_box-shadow; &.wide { max-width: 850px; @@ -198,7 +186,7 @@ .alertify-tabs-titles { height: 40px; display: flex; - border-bottom: 1px solid @alertify-fore; + border-bottom: 1px solid @cp_alertify-fg; margin-bottom: 10px; box-sizing: content-box; .alertify-tabs-title { @@ -208,11 +196,9 @@ line-height: 40px; box-sizing: border-box; padding: 0 15px; - border-left: 1px solid lighten(@alertify-base, 10%); - border-right: 1px solid lighten(@alertify-base, 10%); cursor: pointer; &:not(.disabled):hover { - background-color: @alertify-light-bg; + background-color: @cp_alertify-hover; } &.disabled { color: @colortheme_alertify-cancel-border; @@ -227,10 +213,8 @@ } } span.alertify-tabs-active { - background-color: @alertify-fore !important; - border-left: 1px solid @alertify-fore; - border-right: 1px solid @alertify-fore; - color: @alertify-base; + background-color: @cp_alertify-fg !important; + color: @cp_alertify-bg; cursor: default; } } @@ -251,7 +235,9 @@ } } - .tools_placeholder-color(@cryptpad_color_grey); + input { + .tools_placeholder-color(); + } span.cp-password-container { display: flex; @@ -267,7 +253,7 @@ } .fa-question-circle { // help links to Docs - color: @colortheme_logo-2; + color: @cp_alertify-fg; &:hover { text-decoration: none; } @@ -498,11 +484,11 @@ margin-top: @alertify_padding-base; } &.alert-primary { - background-color: @alertify-base; - color: @alertify-fg; - border-color: @alertify-fg; + background-color: @cp_alertify-bg; + color: @cp_alertify-fg; + border-color: @cp_alertify-fg; a { - color: @alertify-fg; + color: @cp_alertify-fg; text-decoration: underline; } } diff --git a/customize.dist/src/less2/include/avatar.less b/customize.dist/src/less2/include/avatar.less index c85c34877..725c7748f 100644 --- a/customize.dist/src/less2/include/avatar.less +++ b/customize.dist/src/less2/include/avatar.less @@ -5,8 +5,6 @@ ) { @avatar-width: @width; @avatar-font-size: @width / 1.2; - @avatar-default-bg: #D9D8D8; - @avatar-default-fg: darken(@avatar-default-bg, 40%); } .avatar_main(@width: 30px) { --LessLoader_require: LessLoader_currentFile(); @@ -38,8 +36,8 @@ } .cp-avatar-default { .tools_unselectable(); - background: @avatar-default-bg; - color: @avatar-default-fg; + background: @cp_avatar-bg; + color: @cp_avatar-fg; font-size: @avatar-font-size; font-size: var(--avatar-font-size); text-transform: capitalize; diff --git a/customize.dist/src/less2/include/checkmark.less b/customize.dist/src/less2/include/checkmark.less index da5a07a26..15cbc5cea 100644 --- a/customize.dist/src/less2/include/checkmark.less +++ b/customize.dist/src/less2/include/checkmark.less @@ -22,6 +22,15 @@ --checkmark-radio-size: @checkmark-radio-size; } & { + // XXX DARK + @cp_checkmark-back0: @colortheme_form-bg-alt; + @cp_checkmark-back0-active: @colortheme_form-border; + @cp_checkmark-back1: @colortheme_form-bg; + @cp_checkmark-col1: @colortheme_form-color; + @cp_checkmark-back2: @colortheme_form-bg-alt; + @cp_checkmark-col2: @colortheme_form-color-alt; + @cp_checkmark-disabled: @cp_forms-disabled; + .checkmark_vars(); // Text .cp-checkmark { @@ -41,40 +50,40 @@ &.cp-checkmark-secondary { .cp-checkmark-mark { &:after { - border-color: @colortheme_checkmark-col2; + border-color: @cp_checkmark-col2; } } input { &:checked ~ .cp-checkmark-mark { - background-color: @colortheme_checkmark-back2; - border-color: @colortheme_checkmark-back2; + background-color: @cp_checkmark-back2; + border-color: @cp_checkmark-back2; } &:disabled ~ .cp-checkmark-mark { - background-color: @colortheme_checkmark-disabled; + background-color: @cp_checkmark-disabled; } &:disabled ~ .cp-checkmark-label { - color: @colortheme_checkmark-disabled; + color: @cp_checkmark-disabled; } } } &:hover .cp-checkmark-mark { - background-color: @colortheme_checkmark-back0-active; + background-color: @cp_checkmark-back0-active; } input { display: none; &:checked ~ .cp-checkmark-mark { - background-color: @colortheme_checkmark-back1; - border-color: @colortheme_checkmark-back1; + background-color: @cp_checkmark-back1; + border-color: @cp_checkmark-back1; &:after { display: block; } } &:disabled ~ .cp-checkmark-mark { - background-color: @colortheme_checkmark-disabled; + background-color: @cp_checkmark-disabled; } &:disabled ~ .cp-checkmark-label { - color: @colortheme_checkmark-disabled; + color: @cp_checkmark-disabled; } } @@ -91,7 +100,7 @@ height: var(--checkmark-size); width: @checkmark-size; width: var(--checkmark-size); - background-color: @colortheme_checkmark-back0; + background-color: @cp_checkmark-back0; display: flex; justify-content: center; border: 1px solid @colortheme_form-border; @@ -106,14 +115,13 @@ height: @checkmark-dim2; height: var(--checkmark-dim2); transform: rotate(45deg); - border: solid @colortheme_checkmark-col1; + border: solid @cp_checkmark-col1; border-width: 0 @checkmark-width @checkmark-width 0; border-width: 0 var(--checkmark-width) var(--checkmark-width) 0; position: absolute; } &:focus { - //border-color: #FF007C !important; - box-shadow: 0px 0px 5px @colortheme_checkmark-back1; + box-shadow: 0px 0px 5px @cp_checkmark-back1; outline: none; } } @@ -133,39 +141,39 @@ &.cp-radio-secondary { .cp-radio-mark { &:after { - border-color: @colortheme_checkmark-col2; + border-color: @cp_checkmark-col2; } } input { &:checked ~ .cp-radio-mark { - background-color: @colortheme_checkmark-back2; + background-color: @cp_checkmark-back2; } &:disabled ~ .cp-checkmark-mark { - background-color: @colortheme_checkmark-disabled; + background-color: @cp_checkmark-disabled; } &:disabled ~ .cp-checkmark-label { - color: @colortheme_checkmark-disabled; + color: @cp_checkmark-disabled; } } } &:hover .cp-radio-mark { - background-color: @colortheme_checkmark-back0-active; + background-color: @cp_checkmark-back0-active; } input { display: none; &:checked ~ .cp-radio-mark { - background-color: @colortheme_checkmark-back1; - border-color: @colortheme_checkmark-back1; + background-color: @cp_checkmark-back1; + border-color: @cp_checkmark-back1; &:after { display: block; } } &:disabled ~ .cp-checkmark-mark { - background-color: @colortheme_checkmark-disabled; + background-color: @cp_checkmark-disabled; } &:disabled ~ .cp-checkmark-label { - color: @colortheme_checkmark-disabled; + color: @cp_checkmark-disabled; } } @@ -183,7 +191,7 @@ height: var(--checkmark-radio-size); width: @checkmark-radio-size; width: var(--checkmark-radio-size); - background-color: @colortheme_checkmark-back0; + background-color: @cp_checkmark-back0; border-radius: 50%; display: flex; justify-content: center; @@ -194,19 +202,14 @@ display: none; content: ""; border-radius: 50%; - background: white; + background: @cp_checkmark-back0; width: @checkmark-dim1; width: var(--checkmark-dim1); height: @checkmark-dim1; height: var(--checkmark-dim1); - - //transform: rotate(45deg); - //border: solid @colortheme_checkmark-col1; - //border-width: 0 var(--checkmark-width) var(--checkmark-width) 0; } &:focus { - //border-color: #FF007C !important; - box-shadow: 0px 0px 5px @colortheme_checkmark-back1; + box-shadow: 0px 0px 5px @cp_checkmark-back1; outline: none; } } diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 700ee8d91..924891005 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -9,18 +9,17 @@ @colortheme_loading_bg: #E7E7E7; @colortheme_link-color: #0275D8; -@colortheme_link-color-visited: #005999; +@colortheme_link-color-visited: lighten(@colortheme_link-color, 10%); @colortheme_info-background: #eeeeee; -@colortheme_old-base: #302B28; -@colortheme_old-fore: #fafafa; - @colortheme_base: #fff; @colortheme_light-base: lighten(@colortheme_base, 20%); @colortheme_cp-red: #FA5858; // remove red @colortheme_cp-green: #46E981; +@colortheme_old-fore: #fafafa; + @colortheme_form-border: #bbbbbb; @colortheme_form-bg: @colortheme_logo-2; @colortheme_form-color: #ffffff; @@ -48,9 +47,6 @@ @colortheme_alertify-red: #E55236; @colortheme_alertify-red-color: #FFF; @colortheme_alertify-red-border: transparent; -@colortheme_alertify-green: #77C825; -@colortheme_alertify-green-color: #FFF; -@colortheme_alertify-green-border: transparent; @colortheme_alertify-primary: @colortheme_form-bg; @colortheme_alertify-primary-text: @colortheme_form-color; @colortheme_alertify-primary-border: transparent; @@ -60,15 +56,8 @@ @colortheme_alertify-cancel: @colortheme_modal-bg; @colortheme_alertify-cancel-border: #949494; -@colortheme_notification-log: fade(@colortheme_logo-2, 90%); -@colortheme_notification-color: #fff;; @colortheme_notification-warn: rgba(205, 37, 50, 0.8); -@colortheme_dropdown-bg: #f9f9f9; -@colortheme_dropdown-color: black; -@colortheme_dropdown-bg-hover: #f1f1f1; -@colortheme_dropdown-bg-active: #e8e8e8; - // Apps, these colors are used for customizing the toolbar for the apps. @colortheme_toolbar-warn: @colortheme_alertify-red; @colortheme_pad-toolbar-bg: #eeeeee; @@ -115,11 +104,8 @@ @colortheme_sidebar-button-alt-bg: #fff; @cryptpad_color_blue: #4591C4; -@cryptpad_color_grey: #999999; -@cryptpad_color_light_grey: #e0e0e0; @cryptpad_header_col: #1E1F1F; @cryptpad_text_col: #3F4141; -@cryptpad_color_light_blue: #00b7d8; @colortheme_checkmark-back0: @colortheme_form-bg-alt; @colortheme_checkmark-back0-active: @colortheme_form-border; @@ -128,3 +114,69 @@ @colortheme_checkmark-back2: @colortheme_form-bg-alt; @colortheme_checkmark-col2: @colortheme_form-color-alt; @colortheme_checkmark-disabled: #AAA; + +// New variables + +// Colors +@cryptpad_color_dark_grey: #999999; +@cryptpad_color_grey: #e0e0e0; +@cryptpad_color_light_grey: #f1f1f1; +@cryptpad_color_lighter_grey: #f9f9f9; +@cryptpad_color_light_blue: #00b7d8; +@cryptpad_color_black: #000; +@cryptpad_color_white: #FFF; + +// Alertify +@cp_alertify-bg: @cryptpad_color_white; +@cp_alertify-fg: @colortheme_logo-2; +@cp_alertify-hover: fade(@cp_alertify-fg, 25%); +@cp_alertify-overlay: fade(@cryptpad_text_col, 50%); +@cp_alertify-log-bg: fade(@colortheme_logo-2, 90%); +@cp_alertify-log-fg: @cryptpad_color_white; +@cp_alertify-warn-bg: rgba(205, 37, 50); + +// Forms +@cp_forms-fg: @cryptpad_text_col; +@cp_forms-border: @colortheme_logo-2; +@cp_forms-placeholder: @cryptpad_color_dark_grey; +@cp_forms-readonly: fade(@colortheme_logo-2, 25%); +@cp_forms-disabled: #AAA; + +// Buttons +@cp_buttons-fg: @colortheme_logo-2; +@cp_buttons-default: #CCC; +@cp_buttons-default-color: @cryptpad_text_col; +@cp_buttons-default-border: @cryptpad_text_col; +@cp_buttons-red: #E55236; +@cp_buttons-red-color: #FFF; +@cp_buttons-red-border: transparent; +@cp_buttons-primary: @colortheme_form-bg; +@cp_buttons-primary-text: @colortheme_form-color; +@cp_buttons-primary-border: transparent; +@cp_buttons-disabled: #6c757d; +@cp_buttons-disabled-text: #ffffff; +@cp_buttons-disabled-border: #6c757d; +@cp_buttons-cancel: @colortheme_modal-bg; +@cp_buttons-cancel-border: #949494; + + +// Tooltip background +@cp_tooltip-bg: @cryptpad_color_grey; +@cp_tooltip-fg: @cryptpad_text_col; + +// Dropdown +@cp_dropdown-fg: @cryptpad_text_col; +@cp_dropdown-bg: @cryptpad_color_lighter_grey; +@cp_dropdown-bg-hover: @cryptpad_color_light_grey; +@cp_dropdown-bg-active: @cryptpad_color_grey; + +// Rendered Markdown +@cp_markdown-bg: @cryptpad_color_light_grey; +@cp_markdown-border: @cryptpad_color_grey; + +// Avatar +@cp_avatar-bg: @cryptpad_color_grey; +@cp_avatar-fg: @cryptpad_text_col; + +// Other +@cp_shadow-color: rgba(0,0,0,0.4); diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less index b82e3513b..b933fa32f 100644 --- a/customize.dist/src/less2/include/drive.less +++ b/customize.dist/src/less2/include/drive.less @@ -232,7 +232,7 @@ input { background: transparent; color: @colortheme_drive-color; - .tools_placeholder-color(@cryptpad_color_grey); + .tools_placeholder-color(); outline-width: 0px; border-radius: 0; width: 100%; diff --git a/customize.dist/src/less2/include/dropdown.less b/customize.dist/src/less2/include/dropdown.less index 0cabeabbf..febef30d1 100644 --- a/customize.dist/src/less2/include/dropdown.less +++ b/customize.dist/src/less2/include/dropdown.less @@ -46,7 +46,7 @@ .cp-dropdown-content { display: none; position: absolute; - background-color: @colortheme_dropdown-bg; + background-color: @cp_dropdown-bg; min-width: 250px; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); z-index: 1000; //Z dropdown content @@ -64,7 +64,7 @@ } & > a, & > span { - color: @colortheme_dropdown-color; + color: @cp_dropdown-fg; padding: 5px 16px; text-decoration: none; display: flex; @@ -100,13 +100,13 @@ } &:hover { - background-color: @colortheme_dropdown-bg-hover; - color: @colortheme_dropdown-color; + background-color: @cp_dropdown-bg-hover; + color: @cp_dropdown-fg; } &.cp-dropdown-element-active { - background-color: @colortheme_dropdown-bg-active; - color: @colortheme_dropdown-color; + background-color: @cp_dropdown-bg-active; + color: @cp_dropdown-fg; } } &> span { @@ -138,7 +138,7 @@ hr { margin: 5px 0px; height: 1px; - background: #bbb; + background: @cp_dropdown-bg-active; & + hr { display: none; } @@ -150,21 +150,11 @@ margin: 0; white-space: normal; text-align: left; - color: black; + color: @cp_dropdown-fg; font-size: 14px; * { font-size: 14px; } - h2 { - color: black; - font-weight: bold; - text-align: center; - background-color: #EEEEEE; - padding: 5px 0px; - margin: 5px 0px; - font-size: 16px; - white-space: normal; - } } } } diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less index b6d909a73..13583ad85 100644 --- a/customize.dist/src/less2/include/forms.less +++ b/customize.dist/src/less2/include/forms.less @@ -6,24 +6,18 @@ } & { - @alertify-fore: @colortheme_modal-fg; - @alertify-btn-fg: @alertify-fore; - @alertify-light-bg: fade(@alertify-fore, 25%); @alertify_padding-base: @variables_padding; - @alertify-input-bg: @colortheme_modal-input; - @alertify-input-fg: @colortheme_modal-input-fg; input:not(.form-control):not([type="checkbox"]), textarea, div.cp-textarea { // background-color: @alertify-input-fg; - color: @cryptpad_text_col; - border: 1px solid @alertify-input-bg; + color: @cp_forms-fg; + border: 1px solid @cp_forms-border; width: 100%; font-size: 100%; padding: @alertify_padding-base; &[readonly] { - background-color: @alertify-light-bg; - color: @cryptpad_text_col; - border-color: @alertify-input-fg; + background-color: @cp_forms-readonly; + color: @cp_forms-fg; } } @@ -76,9 +70,9 @@ height: 3px; & > div { height: 100%; - background-color: @colortheme_alertify-primary; + background-color: @cp_buttons-primary; &.danger, &.btn-danger, &.danger-alt, &.btn-danger-alt { - background-color: @colortheme_alertify-red; + background-color: @cp_buttons-red; } } } @@ -89,7 +83,7 @@ button.btn { - background-color: @colortheme_alertify-cancel; + background-color: @cp_buttons-cancel; box-sizing: border-box; outline: 0; align-items: center; @@ -111,80 +105,63 @@ vertical-align: middle; } - color: @alertify-btn-fg; - border: 1px solid @alertify-btn-fg; + color: @cp_buttons-fg; + border: 1px solid @cp_buttons-fg; &.no-margin { margin: 0; } &:hover, &:not(:disabled):not(.disabled):active, &:focus { - color: @alertify-btn-fg; - border: 1px solid @alertify-btn-fg; - background-color: lighten(@alertify-fore, 35%); - } - - &.safe, &.danger, &.btn-safe, &.btn-danger { - color: @colortheme_old-base; - white-space: normal; - font-weight: bold; + color: @cp_buttons-fg; + border: 1px solid @cp_buttons-fg; + background-color: lighten(@cp_buttons-fg, 35%); } &.btn-default { - border-color: @cryptpad_text_col; - color: @cryptpad_text_col; + border-color: @cp_buttons-default-border; + color: @cp_buttons-default-color; &:hover, &:not(:disabled):active, &:focus { - border-color: @cryptpad_text_col; - color: @cryptpad_text_col; - background-color: #ccc; + border-color: @cp_buttons-default-border; + color: @cp_buttons-default-color; + background-color: @cp_buttons-default; } } &.danger, &.btn-danger { - background-color: @colortheme_alertify-red; - border-color: @colortheme_alertify-red-border; - color: @colortheme_alertify-red-color; + background-color: @cp_buttons-red; + border-color: @cp_buttons-red-border; + color: @cp_buttons-red-color; &:hover, &:not(:disabled):active, &:focus { - border-color: @colortheme_alertify-red-border; - color: @colortheme_alertify-red-color; - background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%)); + border-color: @cp_buttons-red-border; + color: @cp_buttons-red-color; + background-color: contrast(@cp_buttons-red-color, darken(@cp_buttons-red, 10%), lighten(@colortheme_alertify-red, 10%)); } } &.danger-alt, &.btn-danger-alt, &.btn-danger-outline { - border-color: @colortheme_alertify-red; - color: @colortheme_alertify-red; - &:hover, &:not(:disabled):active, &:focus { - border-color: @colortheme_alertify-red; - color: @colortheme_alertify-red-color; - background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%)); - } - } - - &.safe, &.btn-safe { - background-color: @colortheme_alertify-green; - border-color: @colortheme_alertify-green-border; - color: @colortheme_alertify-green-color; + border-color: @cp_buttons-red; + color: @cp_buttons-red; &:hover, &:not(:disabled):active, &:focus { - border-color: @colortheme_alertify-green-border; - color: @colortheme_alertify-green-color; - background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-green, 10%), lighten(@colortheme_alertify-green, 10%)); + border-color: @cp_buttons-red; + color: @cp_buttons-red-color; + background-color: @cp_buttons-red; } } &.primary, &.btn-primary, &.btn-success { - background-color: @colortheme_alertify-primary; - color: @colortheme_alertify-primary-text; - border-color: @colortheme_alertify-primary-border; + background-color: @cp_buttons-primary; + color: @cp_buttons-primary-text; + border-color: @cp_buttons-primary-border; font-weight: bold; &:hover, &:not(:disabled):active, &:focus { - color: @colortheme_alertify-primary-text; - border-color: @colortheme_alertify-primary-border; - background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-primary, 10%), lighten(@colortheme_alertify-primary, 10%)); + color: @cp_buttons-primary-text; + border-color: @cp_buttons-primary-border; + background-color: contrast(@colortheme_modal-bg, darken(@cp_buttons-primary, 10%), lighten(@colortheme_alertify-primary, 10%)); } } - &.btn-light { + &.btn-light { // XXX DARK border-color: @cryptpad_text_col; color: @cryptpad_text_col; background-color: transparent; @@ -196,12 +173,12 @@ } &.cancel, &.btn-cancel { - border-color: @colortheme_alertify-cancel-border; - color: @colortheme_alertify-cancel-border; + border-color: @cp_buttons-cancel-border; + color: @cp_buttons-cancel-border; &:hover, &:not(:disabled):active, &:focus { - border-color: @colortheme_alertify-cancel-border; - color: @colortheme_alertify-cancel-border; - background-color: fade(@colortheme_alertify-cancel-border, 25%); + border-color: @cp_buttons-cancel-border; + color: @cp_buttons-cancel-border; + background-color: fade(@cp_buttons-cancel-border, 25%); } } &.btn-register { @@ -212,7 +189,7 @@ &:focus { //border: 1px dotted @alertify-base; - box-shadow: 0px 0px 5px @colortheme_alertify-primary !important; + box-shadow: 0px 0px 5px @cp_buttons-primary !important; outline: none; } &::-moz-focus-inner { @@ -221,11 +198,11 @@ &:disabled { cursor: not-allowed !important; - background-color: @colortheme_alertify-disabled; - color: @colortheme_alertify-disabled-text; - border-color: @colortheme_alertify-disabled-border; + background-color: @cp_buttons-disabled; + color: @cp_buttons-disabled-text; + border-color: @cp_buttons-disabled-border; &:hover, &:active { - background-color: @colortheme_alertify-disabled; + background-color: @cp_buttons-disabled; } } } diff --git a/customize.dist/src/less2/include/markdown.less b/customize.dist/src/less2/include/markdown.less index 37fd4fce8..50a2ab45e 100644 --- a/customize.dist/src/less2/include/markdown.less +++ b/customize.dist/src/less2/include/markdown.less @@ -1,16 +1,13 @@ @import (reference) "./tools.less"; .markdown_main() { - @nice-grey: #f3f3f3; - @accent-grey: rgba(0, 0, 0, 0.2); hr { - border-top: 1px solid @accent-grey; + border-top: 1px solid @cp_markdown-border; } blockquote { - background: @nice-grey; - background: rgba(144, 144, 144, 0.2); + background: @cp_markdown-bg; padding: 10px; - border-left: 2px solid @accent-grey; + border-left: 2px solid @cp_markdown-border; padding-right: 0; p { margin: 0; } blockquote { margin: 0; } @@ -21,7 +18,7 @@ // todo ul, ol // TOC div.cp-md-toc { - background: @nice-grey; + background: @cp_markdown-bg; padding: 20px; * { margin: 5px; @@ -57,7 +54,7 @@ } div.plain-text-reader { - background: #f3f3f3; + background: @cp_markdown-bg; padding: 10px; color: black; text-align: left; @@ -111,7 +108,7 @@ width: 100px; height: 100px; display: inline-block; - border: 1px solid #BBB; + border: 1px solid @cp_markdown-border; } } @@ -121,7 +118,7 @@ h1, h2, h3, h4, h5, h6 { font-weight: bold; padding-bottom: 0.3em; - border-bottom: 1px solid #eee; + border-bottom: 1px solid @cp_markdown-border; } li { min-height: 22px; @@ -139,7 +136,7 @@ .mediatag_cryptpad(); pre.markmap { - border: 1px solid #ddd; + border: 1px solid @cp_markdown-border; svg { height: 400px; } @@ -153,11 +150,11 @@ } } -.markdown_preformatted-code (@color: #333) { +.markdown_preformatted-code () { pre > code { display: block; position: relative; - border: 1px solid @color; + border: 1px solid @cp_markdown-border; width: 90%; margin: auto; padding-left: .25vw; @@ -166,16 +163,16 @@ } } -.markdown_gfm-table (@color: black) { +.markdown_gfm-table () { table { border-collapse: collapse; tr { th { - border: 1px solid @color; + border: 1px solid @cryptpad_color_black; padding: 15px; } td { - border: 1px solid @color; + border: 1px solid @cryptpad_color_black; } } } diff --git a/customize.dist/src/less2/include/modal.less b/customize.dist/src/less2/include/modal.less index 3496d8efa..bf2175bfb 100644 --- a/customize.dist/src/less2/include/modal.less +++ b/customize.dist/src/less2/include/modal.less @@ -4,15 +4,15 @@ .modal_base() { font-family: @colortheme_font; - background-color: @colortheme_modal-bg; - color: @colortheme_modal-fg; + background-color: @cp_alertify-bg; + color: @cp_alertify-fg; box-shadow: @variables_shadow; a { - color: @colortheme_modal-link; + color: @colortheme_link-color; &:visited { - color: @colortheme_modal-link-visited; + color: @colortheme_link-color-visited; } } } @@ -33,11 +33,11 @@ bottom: 0; left: 0; right: 0; - background-color: @colortheme_modal-dim; + background-color: @cp_alertify-overlay; .cp-modal { - background-color: @colortheme_modal-bg; - color: @colortheme_modal-fg; + background-color: @cp_alertify-bg; + color: @cp_alertify-fg; box-shadow: @variables_shadow; padding: @variables_padding; @@ -71,16 +71,10 @@ } input { - background-color: @colortheme_modal-input; - color: @colortheme_modal-input-fg; - border: 0; padding: 8px 12px; margin: 1em; width: 300px; &[type="text"] { - background-color: @colortheme_modal-input-fg; - color: @cryptpad_text_col; - border: 1px solid @colortheme_modal-input; width: auto; } } diff --git a/customize.dist/src/less2/include/tippy.less b/customize.dist/src/less2/include/tippy.less index cabde79b9..5cb7c2f59 100644 --- a/customize.dist/src/less2/include/tippy.less +++ b/customize.dist/src/less2/include/tippy.less @@ -5,19 +5,16 @@ } & { .tippy-tooltip.cryptpad-theme { - /* Your styling here. Example: */ - background-color: @cryptpad_color_light_grey; + background-color: @cp_tooltip-bg; border-radius: 0px; - // box-shadow: 2px 2px 10px #000; - // font-weight: bold; - color: #333; + color: @cp_tooltip-fg; overflow-wrap: break-word; [x-circle] { background-color: unset; } } .tippy-popper { - @arrow-color: @cryptpad_color_light_grey; + @arrow-color: @cp_tooltip-bg; &[x-placement^='top'] .tippy-arrow { border-top-color: @arrow-color; } diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index 70abfea03..b267b9dad 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -570,9 +570,6 @@ .cp-toolbar-limit { color: @colortheme_toolbar-warn; } - .cp-dropdown-content.cp-dropdown-left a { - color: black; - } } .cp-toolbar-top { @@ -1076,7 +1073,7 @@ top: @toolbar_line-height; margin: -1px; min-width: 50px; - background: @colortheme_dropdown-bg; + background: @cp_dropdown-bg; display: flex; flex-flow: column; z-index: 10000; //Z cp-toolbar-drawer-content @@ -1111,8 +1108,8 @@ vertical-align: baseline; } &:hover { - background-color: @colortheme_dropdown-bg-hover !important; - color: @colortheme_dropdown-color; + background-color: @cp_dropdown-bg-hover !important; + color: @cp_dropdown-fg; } } } diff --git a/customize.dist/src/less2/include/tools.less b/customize.dist/src/less2/include/tools.less index 68feb9314..87650ccdd 100644 --- a/customize.dist/src/less2/include/tools.less +++ b/customize.dist/src/less2/include/tools.less @@ -1,6 +1,9 @@ -.tools_placeholder-color (@color) { +@import (reference) "./colortheme-all.less"; + +.tools_placeholder-color () { + @color: @cp_forms-placeholder; &::-webkit-input-placeholder { /* WebKit, Blink, Edge */ - color: @color;; + color: @color; } &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: @color; diff --git a/customize.dist/src/less2/include/usergrid.less b/customize.dist/src/less2/include/usergrid.less index 9fbcb1da0..ea755b1dd 100644 --- a/customize.dist/src/less2/include/usergrid.less +++ b/customize.dist/src/less2/include/usergrid.less @@ -33,10 +33,7 @@ margin: 0; margin-bottom: 0 !important; height: 38px; - &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ - color: @cryptpad_color_grey; - opacity: 1; /* Firefox */ - } + .tools_placeholder-color(); } margin-bottom: 10px; &:empty { diff --git a/customize.dist/src/less2/include/variables.less b/customize.dist/src/less2/include/variables.less index 570779f05..077e32d52 100644 --- a/customize.dist/src/less2/include/variables.less +++ b/customize.dist/src/less2/include/variables.less @@ -1,3 +1,5 @@ +@import (reference) "./colortheme-all.less"; + // This is a file for generic constants which we didn't want to hardcode everywhere. // However, unlike colortheme, customizing these variables will cause breakage. @@ -7,4 +9,4 @@ // Used in modal.less and alertify.less @variables_padding: 12px; -@variables_shadow: 0 8px 32px 0 rgba(0,0,0,.4); +@variables_shadow: 0 8px 32px 0 @cp_shadow-color; diff --git a/www/code/app-code.less b/www/code/app-code.less index 7ba5142a7..fbeac6f23 100644 --- a/www/code/app-code.less +++ b/www/code/app-code.less @@ -102,7 +102,7 @@ margin: 1em auto; .markdown_preformatted-code; - .markdown_gfm-table(black); + .markdown_gfm-table(); table { margin-bottom: 1rem; } @@ -135,7 +135,7 @@ position: relative; display: none; .markdown_preformatted-code; - .markdown_gfm-table(black); + .markdown_gfm-table(); } } diff --git a/www/common/markdown.less b/www/common/markdown.less deleted file mode 100644 index 4759ea5cb..000000000 --- a/www/common/markdown.less +++ /dev/null @@ -1,27 +0,0 @@ -.markdown_preformatted-code (@color: #333) { - pre > code { - display: block; - position: relative; - border: 1px solid @color; - width: 90%; - margin: auto; - padding-left: .25vw; - overflow-x: auto; - overflow-y: hidden; - } -} - -.markdown_gfm-table (@color: black) { - table { - border-collapse: collapse; - tr { - th { - border: 3px solid @color; - padding: 15px; - } - } - } -} - -// todo ul, ol - diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index 524d414b4..ac91a9e1a 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -183,7 +183,7 @@ .markdown_main(); .markdown_cryptpad(); .markdown_preformatted-code; - .markdown_gfm-table(black); + .markdown_gfm-table(); p { margin-bottom: 5px; } @@ -197,7 +197,7 @@ border: none; padding: 5px; margin: 0; - background-color: @cryptpad_color_light_grey; + background-color: @cryptpad_color_grey; width: 100%; } table { diff --git a/www/settings/inner.js b/www/settings/inner.js index f94287b41..3171519d6 100644 --- a/www/settings/inner.js +++ b/www/settings/inner.js @@ -655,7 +655,6 @@ define([ }, { ok: Messages.register_writtenPassword, cancel: Messages.register_cancel, - cancelClass: 'btn.btn-safe', okClass: 'btn.btn-danger', reverseOrder: true, done: function($dialog) { diff --git a/www/slide/app-slide.less b/www/slide/app-slide.less index 2646df1e4..2719f4ca6 100644 --- a/www/slide/app-slide.less +++ b/www/slide/app-slide.less @@ -369,7 +369,7 @@ .markdown_main(); .markdown_preformatted-code; - .markdown_gfm-table(#ddd); + .markdown_gfm-table(); ul, ol { min-width: 50%; From baddf8ae1172d25dbd65e3d9bd1ce68e04bd37dc Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 25 Jan 2021 18:07:05 +0100 Subject: [PATCH 04/97] Move all color variables to colortheme.less --- .../src/less2/include/checkmark.less | 22 +- .../src/less2/include/colortheme-dark.less | 219 ++++++++++++++++-- .../src/less2/include/colortheme.less | 134 ++++++++++- .../src/less2/include/comments.less | 15 +- .../src/less2/include/contextmenu.less | 16 +- customize.dist/src/less2/include/corner.less | 62 ++--- .../src/less2/include/creation.less | 60 ++--- customize.dist/src/less2/include/drive.less | 137 ++++------- customize.dist/src/less2/include/export.less | 15 +- .../src/less2/include/fileupload.less | 8 +- customize.dist/src/less2/include/forms.less | 5 +- customize.dist/src/less2/include/help.less | 6 +- customize.dist/src/less2/include/icons.less | 9 +- .../src/less2/include/infopages.less | 84 ++----- .../src/less2/include/leftside-menu.less | 2 +- .../src/less2/include/limit-bar.less | 3 +- .../src/less2/include/mentions.less | 4 +- customize.dist/src/less2/include/modal.less | 4 +- .../src/less2/include/modals-ui-elements.less | 14 +- .../src/less2/include/notifications.less | 8 +- .../src/less2/include/password-input.less | 2 +- .../src/less2/include/sidebar-layout.less | 16 +- customize.dist/src/less2/include/support.less | 8 +- .../src/less2/include/toolbar-history.less | 10 +- customize.dist/src/less2/include/toolbar.less | 62 +++-- .../src/less2/include/usergrid.less | 12 +- www/common/LessLoader.js | 1 + www/common/common-interface.js | 3 - www/common/common-ui-elements.js | 1 + www/common/drive-ui.js | 10 - 30 files changed, 559 insertions(+), 393 deletions(-) diff --git a/customize.dist/src/less2/include/checkmark.less b/customize.dist/src/less2/include/checkmark.less index 15cbc5cea..17a434fd3 100644 --- a/customize.dist/src/less2/include/checkmark.less +++ b/customize.dist/src/less2/include/checkmark.less @@ -1,4 +1,5 @@ @import (reference) "./colortheme-all.less"; +@import (reference) "./tools.less"; .checkmark_vars( @size: 20px @@ -23,12 +24,12 @@ } & { // XXX DARK - @cp_checkmark-back0: @colortheme_form-bg-alt; - @cp_checkmark-back0-active: @colortheme_form-border; - @cp_checkmark-back1: @colortheme_form-bg; - @cp_checkmark-col1: @colortheme_form-color; - @cp_checkmark-back2: @colortheme_form-bg-alt; - @cp_checkmark-col2: @colortheme_form-color-alt; + @cp_checkmark-back0: @cp_forms-bg; + @cp_checkmark-back0-active: @cp_forms-disabled; + @cp_checkmark-back1: @cp_forms-border; + @cp_checkmark-col1: @cp_forms-bg; + @cp_checkmark-back2: @cp_forms-bg; + @cp_checkmark-col2: @cp_forms-border; @cp_checkmark-disabled: @cp_forms-disabled; .checkmark_vars(); @@ -38,10 +39,7 @@ display: flex; align-items: center; position: relative; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + .tools_unselectable(); & > a { margin-left: 0.25em; @@ -103,7 +101,7 @@ background-color: @cp_checkmark-back0; display: flex; justify-content: center; - border: 1px solid @colortheme_form-border; + border: 1px solid @cp_checkmark-disabled; flex-shrink: 0; &:after { content: ""; @@ -196,7 +194,7 @@ display: flex; justify-content: center; align-items: center; - border: 1px solid @colortheme_form-border; + border: 1px solid @cp_checkmark-disabled; flex-shrink: 0; &:after { display: none; diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index 0028af616..d7615072a 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -9,18 +9,17 @@ @colortheme_loading_bg: #E7E7E7; @colortheme_link-color: #0275D8; -@colortheme_link-color-visited: #005999; +@colortheme_link-color-visited: lighten(@colortheme_link-color, 10%); @colortheme_info-background: #eeeeee; -@colortheme_old-base: #302B28; -@colortheme_old-fore: #fafafa; - @colortheme_base: #fff; @colortheme_light-base: lighten(@colortheme_base, 20%); @colortheme_cp-red: #FA5858; // remove red @colortheme_cp-green: #46E981; +@colortheme_old-fore: #fafafa; + @colortheme_form-border: #bbbbbb; @colortheme_form-bg: @colortheme_logo-2; @colortheme_form-color: #ffffff; @@ -48,9 +47,6 @@ @colortheme_alertify-red: #E55236; @colortheme_alertify-red-color: #FFF; @colortheme_alertify-red-border: transparent; -@colortheme_alertify-green: #77C825; -@colortheme_alertify-green-color: #FFF; -@colortheme_alertify-green-border: transparent; @colortheme_alertify-primary: @colortheme_form-bg; @colortheme_alertify-primary-text: @colortheme_form-color; @colortheme_alertify-primary-border: transparent; @@ -60,15 +56,8 @@ @colortheme_alertify-cancel: @colortheme_modal-bg; @colortheme_alertify-cancel-border: #949494; -@colortheme_notification-log: fade(@colortheme_logo-2, 90%); -@colortheme_notification-color: #fff;; @colortheme_notification-warn: rgba(205, 37, 50, 0.8); -@colortheme_dropdown-bg: #f9f9f9; -@colortheme_dropdown-color: black; -@colortheme_dropdown-bg-hover: #f1f1f1; -@colortheme_dropdown-bg-active: #e8e8e8; - // Apps, these colors are used for customizing the toolbar for the apps. @colortheme_toolbar-warn: @colortheme_alertify-red; @colortheme_pad-toolbar-bg: #eeeeee; @@ -77,7 +66,7 @@ @colortheme_pad-chat-bg: #AAA; @colortheme_apps: { - default: #000000; + default: #0087FF; drive: #0087FF; // Used as icon color in index.js (index.html) pad: #256ad5; code: #EAA000; @@ -92,7 +81,7 @@ } @colortheme_static_apps: { - default: #000000; + default: #0087FF; teams: #4A3BBD; contacts: #607B8D; } @@ -115,11 +104,8 @@ @colortheme_sidebar-button-alt-bg: #fff; @cryptpad_color_blue: #4591C4; -@cryptpad_color_grey: #999999; -@cryptpad_color_light_grey: #e0e0e0; @cryptpad_header_col: #1E1F1F; -@cryptpad_text_col: #3F4141; -@cryptpad_color_light_blue: #00b7d8; +@cryptpad_text_col: #FFF-#3F4141; @colortheme_checkmark-back0: @colortheme_form-bg-alt; @colortheme_checkmark-back0-active: @colortheme_form-border; @@ -128,3 +114,196 @@ @colortheme_checkmark-back2: @colortheme_form-bg-alt; @colortheme_checkmark-col2: @colortheme_form-color-alt; @colortheme_checkmark-disabled: #AAA; + +// New variables + +// Colors +@cryptpad_color_hint_grey: #FFF-#777; +@cryptpad_color_dark_grey: #FFF-#999999; +@cryptpad_color_neutral_grey: #FFF-#aaaaaa; +@cryptpad_color_neutral2_grey: #FFF-#cccccc; +@cryptpad_color_help_grey: #FFF-#dddddd; +@cryptpad_color_grey: #FFF-#e0e0e0; +@cryptpad_color_toolbar_grey: #FFF-#EEEEEE; +@cryptpad_color_light_grey: #FFF-#f1f1f1; +@cryptpad_color_lighter_grey: #FFF-#f9f9f9; + +@cryptpad_color_light_blue: #FFF-#00b7d8; +@cryptpad_color_lighter_blue: #FFF-#d2e1f2; +@cryptpad_color_warn_red: #FFF-#eb675e; +@cryptpad_color_black: #FFF-#000; +@cryptpad_color_white: #FFF-#FFF; + +@cryptpad_color_link: #FFF-#0275D8; + +@cp_loading-bg: #FFF-#E7E7E7; + +// Alertify +@cp_alertify-bg: @cryptpad_color_white; +@cp_alertify-fg: @colortheme_logo-2; +@cp_alertify-hover: fade(@cp_alertify-fg, 25%); +@cp_alertify-overlay: fade(@cryptpad_text_col, 50%); +@cp_alertify-log-bg: fade(@colortheme_logo-2, 90%); +@cp_alertify-log-fg: @cryptpad_color_white; +@cp_alertify-warn-bg: rgba(205, 37, 50); + +// Forms +@cp_forms-fg: @cryptpad_text_col; +@cp_forms-bg: @cryptpad_color_white; +@cp_forms-border: @colortheme_logo-2; +@cp_forms-placeholder: @cryptpad_color_dark_grey; +@cp_forms-readonly: fade(@colortheme_logo-2, 25%); +@cp_forms-readonly-border: @cryptpad_color_white; +@cp_forms-disabled: #AAA; + +// Buttons +@cp_buttons-fg: @colortheme_logo-2; +@cp_buttons-default: #CCC; +@cp_buttons-default-color: @cryptpad_text_col; +@cp_buttons-default-border: @cryptpad_text_col; +@cp_buttons-red: #E55236; +@cp_buttons-red-color: #FFF; +@cp_buttons-red-border: transparent; +@cp_buttons-primary: @colortheme_logo-2; +@cp_buttons-primary-text: #FFFFFF; +@cp_buttons-primary-border: transparent; +@cp_buttons-disabled: #6c757d; +@cp_buttons-disabled-text: #ffffff; +@cp_buttons-disabled-border: #6c757d; +@cp_buttons-cancel: #ffffff; +@cp_buttons-cancel-border: #949494; + +// Sidebar layout +@cp_sidebar-left-bg: @cryptpad_color_grey; +@cp_sidebar-left-fg: @cryptpad_color_black; +@cp_sidebar-left-active: @cryptpad_color_white; +@cp_sidebar-right-bg: @cryptpad_color_white; +@cp_sidebar-right-fg: @cryptpad_text_col; // XXX was black +@cp_sidebar-hint: @cryptpad_color_hint_grey; + +// Drive +@cp_drive-bg: @cryptpad_color_white; +@cp_drive-fg: @cryptpad_text_col; +@cp_drive-header-fg: @cryptpad_color_dark_grey; +@cp_drive-icon-hover: @cryptpad_color_grey; +@cp_drive-icon-border: @cryptpad_color_neutral2_grey; +@cp_drive-selected-bg: @cryptpad_color_dark_grey; +@cp_drive-selected-fg: contrast(@cp_drive-droppable-bg, @cryptpad_text_col, @cryptpad_color_light_grey); +@cp_drive-selection-overlay: fade(@cryptpad_color_black, 70%); +@cp_drive-selection-bg: @cryptpad_color_neutral_grey; +@cp_drive-selection-fg: @cryptpad_text_col; +@cp_drive-droppable-bg: @colortheme_logo-2; +@cp_drive-droppable-fg: contrast(@cp_drive-droppable-bg, @cryptpad_text_col, @cryptpad_color_light_grey); +@cp_drive-infobox-bg: @cryptpad_color_lighter_blue; +@cp_drive-infobox-fg: @cryptpad_color_black; +@cp_drive-warnbox-bg: @cryptpad_color_warn_red; +@cp_drive-warnbox-fg: @cryptpad_color_white; +@cp_drive-tree-branch: @cryptpad_color_dark_grey; + + +// Tooltip background +@cp_tooltip-bg: @cryptpad_color_grey; +@cp_tooltip-fg: @cryptpad_text_col; + +// Dropdown +@cp_dropdown-fg: @cryptpad_text_col; +@cp_dropdown-bg: @cryptpad_color_lighter_grey; +@cp_dropdown-bg-hover: @cryptpad_color_light_grey; +@cp_dropdown-bg-active: @cryptpad_color_grey; + +// Rendered Markdown +@cp_markdown-bg: @cryptpad_color_light_grey; +@cp_markdown-border: @cryptpad_color_grey; + +// Avatar +@cp_avatar-bg: @cryptpad_color_grey; +@cp_avatar-fg: @cryptpad_text_col; + +// Comments +@cp_comments-fg: @cryptpad_text_col; +@cp_comments-bg: @cryptpad_color_white; +@cp_comments-header: @cryptpad_color_dark_grey; + +// Contextmenu +@cp_context-bg: @cryptpad_color_white; +@cp_context-bg-hover: @cryptpad_color_lighter_grey; +@cp_context-bg-active: @cryptpad_color_light_grey; +@cp_context-fg: @cryptpad_text_col; +@cp_context-icon: @cryptpad_color_dark_grey; +@cp_context-disabled: @cryptpad_color_neutral_grey; + +// Corner +@cp_corner-primary: @colortheme_logo-1; +@cp_corner-secondary: @cryptpad_color_white; + +// Pad Creation Screen +@cp_creation-bg: @cryptpad_color_white; +@cp_creation-fg: @cryptpad_text_col; +@cp_creation-button-bg: @colortheme_logo-2; +@cp_creation-button-fg: @cryptpad_color_white; +@cp_creation-error-bg: @colortheme_logo-1; +@cp_creation-error-fg: @cryptpad_color_light_grey; + +// Export +@cp_export-bg: @cryptpad_color_white; +@cp_export-fg: @cryptpad_text_col; +@cp_export-hint: @cryptpad_color_hint_grey; +@cp_export-error-bg: @cryptpad_color_grey; +@cp_export-error-bg2: @cryptpad_color_neutral2_grey; + +// File upload +@cp_upload-fg: @colortheme_logo-2; +@cp_upload-header: @cryptpad_color_help_grey; +@cp_upload-progress: @cryptpad_color_help_grey; + +// Help +@cp_help-bg: @cryptpad_color_help_grey; +@cp_help-fg: @cryptpad_text_col; +@cp_help-link: @cryptpad_color_link; + +// Static pages +@cp_static-bg: @cryptpad_color_grey; +@cp_static-fg: @cryptpad_text_col; +@cp_static-link: @colortheme_logo-2; +@cp_static-title: @colortheme_logo-2; +@cp_static-footer: @cryptpad_color_help_grey; +@cp_static-footer-border: @cryptpad_color_white; +@cp_static-topbar-fg: @colortheme_logo-2; + +// Limit +@cp_limit-fg: @cryptpad_text_col; + +// Mentions +@cp_mentions-bg: @cryptpad_color_grey; +@cp_mentions-hover: @cryptpad_color_help_grey; + +// Modals +@cp_access-overlay: fade(@cryptpad_color_white, 50%); +@cp_snapshots-hover: @cryptpad_color_help_grey; + +// Support +@cp_support-bg: @cryptpad_color_lighter_grey; +@cp_support-msg-bg: @cryptpad_color_grey; +@cp_support-header-bg: @cryptpad_color_help_grey; + +// Toolbar +@cp_toolbar-bg: @cryptpad_color_toolbar_grey; +@cp_toolbar-fg: @cryptpad_text_col; +@cp_toolbar-bottom-fg: @cryptpad_text_col; + +@cp_toolbar-fade1: fade(@cryptpad_color_black, 10%); +@cp_toolbar-fade3: fade(@cryptpad_color_black, 30%); +@cp_toolbar-warn: @cp_buttons-red; + +@cp_history-line-bg: @cryptpad_color_white; +@cp_history-bg1: #DDD; +@cp_history-bg2: #BBB; +@cp_history-fg: @cp_toolbar-bottom-fg; + +// Usergrid +@cp_usergrid-fg: @cryptpad_text_col; +@cp_usergrid-selected-bg: @colortheme_logo-2; +@cp_usergrid-selected-fg: @cryptpad_color_white; + +// Other +@cp_shadow-color: rgba(0,0,0,0.4); diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 924891005..2982ed374 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -118,13 +118,26 @@ // New variables // Colors +@cryptpad_color_hint_grey: #777; @cryptpad_color_dark_grey: #999999; +@cryptpad_color_neutral_grey: #aaaaaa; +@cryptpad_color_neutral2_grey: #cccccc; +@cryptpad_color_help_grey: #dddddd; @cryptpad_color_grey: #e0e0e0; +@cryptpad_color_toolbar_grey: #EEEEEE; @cryptpad_color_light_grey: #f1f1f1; @cryptpad_color_lighter_grey: #f9f9f9; + @cryptpad_color_light_blue: #00b7d8; +@cryptpad_color_lighter_blue: #d2e1f2; +@cryptpad_color_warn_red: #eb675e; @cryptpad_color_black: #000; @cryptpad_color_white: #FFF; +@cryptpad_color_green: #5cb85c; + +@cryptpad_color_link: #0275D8; + +@cp_loading-bg: #E7E7E7; // Alertify @cp_alertify-bg: @cryptpad_color_white; @@ -137,9 +150,11 @@ // Forms @cp_forms-fg: @cryptpad_text_col; +@cp_forms-bg: @cryptpad_color_white; @cp_forms-border: @colortheme_logo-2; @cp_forms-placeholder: @cryptpad_color_dark_grey; @cp_forms-readonly: fade(@colortheme_logo-2, 25%); +@cp_forms-readonly-border: @cryptpad_color_white; @cp_forms-disabled: #AAA; // Buttons @@ -150,15 +165,42 @@ @cp_buttons-red: #E55236; @cp_buttons-red-color: #FFF; @cp_buttons-red-border: transparent; -@cp_buttons-primary: @colortheme_form-bg; -@cp_buttons-primary-text: @colortheme_form-color; +@cp_buttons-primary: @colortheme_logo-2; +@cp_buttons-primary-text: #FFFFFF; @cp_buttons-primary-border: transparent; @cp_buttons-disabled: #6c757d; @cp_buttons-disabled-text: #ffffff; @cp_buttons-disabled-border: #6c757d; -@cp_buttons-cancel: @colortheme_modal-bg; +@cp_buttons-cancel: #ffffff; @cp_buttons-cancel-border: #949494; +// Sidebar layout +@cp_sidebar-left-bg: @cryptpad_color_grey; +@cp_sidebar-left-fg: @cryptpad_color_black; +@cp_sidebar-left-active: @cryptpad_color_white; +@cp_sidebar-right-bg: @cryptpad_color_white; +@cp_sidebar-right-fg: @cryptpad_text_col; // XXX was black +@cp_sidebar-hint: @cryptpad_color_hint_grey; + +// Drive +@cp_drive-bg: @cryptpad_color_white; +@cp_drive-fg: @cryptpad_text_col; +@cp_drive-header-fg: @cryptpad_color_dark_grey; +@cp_drive-icon-hover: @cryptpad_color_grey; +@cp_drive-icon-border: @cryptpad_color_neutral2_grey; +@cp_drive-selected-bg: @cryptpad_color_dark_grey; +@cp_drive-selected-fg: contrast(@cp_drive-droppable-bg, @cryptpad_text_col, @cryptpad_color_light_grey); +@cp_drive-selection-overlay: fade(@cryptpad_color_black, 70%); +@cp_drive-selection-bg: @cryptpad_color_neutral_grey; +@cp_drive-selection-fg: @cryptpad_text_col; +@cp_drive-droppable-bg: @colortheme_logo-2; +@cp_drive-droppable-fg: contrast(@cp_drive-droppable-bg, @cryptpad_text_col, @cryptpad_color_light_grey); +@cp_drive-infobox-bg: @cryptpad_color_lighter_blue; +@cp_drive-infobox-fg: @cryptpad_color_black; +@cp_drive-warnbox-bg: @cryptpad_color_warn_red; +@cp_drive-warnbox-fg: @cryptpad_color_white; +@cp_drive-tree-branch: @cryptpad_color_dark_grey; + // Tooltip background @cp_tooltip-bg: @cryptpad_color_grey; @@ -178,5 +220,91 @@ @cp_avatar-bg: @cryptpad_color_grey; @cp_avatar-fg: @cryptpad_text_col; +// Comments +@cp_comments-fg: @cryptpad_text_col; +@cp_comments-bg: @cryptpad_color_white; +@cp_comments-header: @cryptpad_color_dark_grey; + +// Contextmenu +@cp_context-bg: @cryptpad_color_white; +@cp_context-bg-hover: @cryptpad_color_lighter_grey; +@cp_context-bg-active: @cryptpad_color_light_grey; +@cp_context-fg: @cryptpad_text_col; +@cp_context-icon: @cryptpad_color_dark_grey; +@cp_context-disabled: @cryptpad_color_neutral_grey; + +// Corner +@cp_corner-primary: @colortheme_logo-1; +@cp_corner-secondary: @cryptpad_color_white; + +// Pad Creation Screen +@cp_creation-bg: @cryptpad_color_white; +@cp_creation-fg: @cryptpad_text_col; +@cp_creation-button-bg: @colortheme_logo-2; +@cp_creation-button-fg: @cryptpad_color_white; +@cp_creation-error-bg: @colortheme_logo-1; +@cp_creation-error-fg: @cryptpad_color_light_grey; + +// Export +@cp_export-bg: @cryptpad_color_white; +@cp_export-fg: @cryptpad_text_col; +@cp_export-hint: @cryptpad_color_hint_grey; +@cp_export-error-bg: @cryptpad_color_grey; +@cp_export-error-bg2: @cryptpad_color_neutral2_grey; + +// File upload +@cp_upload-fg: @colortheme_logo-2; +@cp_upload-header: @cryptpad_color_help_grey; +@cp_upload-progress: @cryptpad_color_help_grey; + +// Help +@cp_help-bg: @cryptpad_color_help_grey; +@cp_help-fg: @cryptpad_text_col; +@cp_help-link: @cryptpad_color_link; + +// Static pages +@cp_static-bg: @cryptpad_color_grey; +@cp_static-fg: @cryptpad_text_col; +@cp_static-link: @colortheme_logo-2; +@cp_static-title: @colortheme_logo-2; +@cp_static-footer: @cryptpad_color_help_grey; +@cp_static-footer-border: @cryptpad_color_white; +@cp_static-topbar-fg: @colortheme_logo-2; + +// Limit +@cp_limit-fg: @cryptpad_text_col; + +// Mentions +@cp_mentions-bg: @cryptpad_color_grey; +@cp_mentions-hover: @cryptpad_color_help_grey; + +// Modals +@cp_access-overlay: fade(@cryptpad_color_white, 50%); +@cp_snapshots-hover: @cryptpad_color_help_grey; + +// Support +@cp_support-bg: @cryptpad_color_lighter_grey; +@cp_support-msg-bg: @cryptpad_color_grey; +@cp_support-header-bg: @cryptpad_color_help_grey; + +// Toolbar +@cp_toolbar-bg: @cryptpad_color_toolbar_grey; +@cp_toolbar-fg: @cryptpad_text_col; +@cp_toolbar-bottom-fg: @cryptpad_text_col; + +@cp_toolbar-fade1: fade(@cryptpad_color_black, 10%); +@cp_toolbar-fade3: fade(@cryptpad_color_black, 30%); +@cp_toolbar-warn: @cp_buttons-red; + +@cp_history-line-bg: @cryptpad_color_white; +@cp_history-bg1: #DDD; +@cp_history-bg2: #BBB; +@cp_history-fg: @cp_toolbar-bottom-fg; + +// Usergrid +@cp_usergrid-fg: @cryptpad_text_col; +@cp_usergrid-selected-bg: @colortheme_logo-2; +@cp_usergrid-selected-fg: @cryptpad_color_white; + // Other @cp_shadow-color: rgba(0,0,0,0.4); diff --git a/customize.dist/src/less2/include/comments.less b/customize.dist/src/less2/include/comments.less index f53fb00ff..360a64c18 100644 --- a/customize.dist/src/less2/include/comments.less +++ b/customize.dist/src/less2/include/comments.less @@ -4,9 +4,8 @@ @import (reference) "./tools.less"; .comments_main() { - @data-color: #888; overflow-y: auto; - color: @cryptpad_text_col; + color: @cp_comments-fg; &:empty { display: none !important; @@ -29,7 +28,7 @@ margin-left: 30px; } .cp-comment-deleted { - background: white; + background-color: @cp_comments-bg; font-size: 14px; padding: 5px; } @@ -96,7 +95,7 @@ height: 40px; align-items: center; display: flex; - background-color: white; + background-color: @cp_comments-bg; position: relative; padding: 5px; box-sizing: content-box; @@ -108,7 +107,7 @@ margin-left: 5px; .cp-comment-time { font-size: 13px; - color: @data-color; + color: @cp_comments-header; } } .cp-comment-edit { @@ -127,15 +126,15 @@ } } .cp-comment-content { - background-color: white; + background-color: @cp_comments-bg; padding: 0px 5px 5px 5px; white-space: pre-wrap; word-break: break-word; } .cp-comment-edited { - background-color: white; + background-color: @cp_comments-bg; font-size: 13px; - color: @data-color; + color: @cp_comments-header; padding: 0 5px; } .cp-comment-actions { diff --git a/customize.dist/src/less2/include/contextmenu.less b/customize.dist/src/less2/include/contextmenu.less index 023053438..d17f2c217 100644 --- a/customize.dist/src/less2/include/contextmenu.less +++ b/customize.dist/src/less2/include/contextmenu.less @@ -8,6 +8,9 @@ display: none; position: absolute; z-index: 50000; + & > ul { + background-color: @cp_context-bg; + } li { padding: 0; font-size: @colortheme_app-font-size; @@ -33,16 +36,25 @@ } a { cursor: pointer; + color: @cp_context-fg; + &:hover { + background-color: @cp_context-bg-hover; + color: @cp_context-fg; + } + &:active { + background-color: @cp_context-bg-active; + color: @cp_context-fg; + } .fa, .cptools { margin-right: 1rem; - color: @colortheme_context-menu-icon-color; + color: @cp_context-icon; width: 16px; } } } .cp-app-drive-context-noAction { font-style: italic; - color: #aaa; + color: @cp_context-disabled; cursor: default; display: none; } diff --git a/customize.dist/src/less2/include/corner.less b/customize.dist/src/less2/include/corner.less index 04d503cc9..f1b72b640 100644 --- a/customize.dist/src/less2/include/corner.less +++ b/customize.dist/src/less2/include/corner.less @@ -4,9 +4,11 @@ --LessLoader_require: LessLoader_currentFile(); }; & { - @corner-link: #ffff7a; @corner-blue: @colortheme_logo-1; @corner-white: @colortheme_base; + @corner-blue-alt: darken(@corner-blue, 10%); + @corner-white-alt: darken(@corner-white, 10%); + @keyframes appear { 0% { @@ -32,7 +34,6 @@ width: 350px; padding: 10px; background-color: fade(@corner-blue, 95%); - border: 1px solid @corner-blue; color: @corner-white; z-index: 9999; transform-origin: bottom right; @@ -41,7 +42,6 @@ &.cp-corner-alt { background-color: fade(@corner-white, 95%); - border: 1px solid @corner-blue; color: @corner-blue; } @@ -54,39 +54,6 @@ clear: left; height: 21px; } - .cp-corner-minimize, .cp-corner-maximize { - position: absolute; - height: 15px; - width: 20px; - top: 0; - right: 0; - font-size: 12px; - text-align: left; - cursor: pointer; - line-height: 15px; - display: none; - &:hover { - color: darken(@corner-white, 15%); - } - } - .cp-corner-minimize { - display: inline; - } - &.cp-minimized { - transition: transform 0.8s ease-in-out; - transform: scale(0.1); - animation: none; - .cp-corner-text, .cp-corner-actions, .cp-corner-footer { - display: none; - } - .cp-corner-maximize { - display: inline; - font-size: 130px; - width: 180px; - height: 200px; - line-height: 200px; - } - } &.cp-corner-big { width: 500px; max-width: 95%; @@ -99,13 +66,14 @@ font-size: 1.1em; } &:hover { - color: darken(@corner-white, 10%); + color: @corner-white-alt; + } } &.cp-corner-alt { .cp-corner-dontshow { &:hover { - color: lighten(@corner-blue, 10%); + color: @corner-blue-alt; } } } @@ -124,19 +92,19 @@ color: @corner-white; text-decoration: underline; &:hover { - color: darken(@corner-white, 10%); + color: @corner-white-alt; } } } &.cp-corner-alt a { color: @corner-blue; &:hover { - color: lighten(@corner-blue, 10%); + color: @corner-blue-alt; } } button { - padding: 5px; + padding: 5px; color: @corner-white; &:not(:first-child) { margin-left: 10px; @@ -151,15 +119,15 @@ background-color: @corner-white; color: @corner-blue; &:hover { - background-color: lighten(@corner-blue, 50%); - border-color: lighten(@corner-blue, 50%); + background-color: @corner-white-alt; + border-color: @corner-white-alt; } } &.cp-corner-cancel { background-color: @corner-blue; color: @corner-white; &:hover { - background-color: darken(@corner-blue, 10%); + background-color: @corner-blue-alt; } } } @@ -169,15 +137,15 @@ background-color: @corner-blue; color: @corner-white; &:hover { - background-color: darken(@corner-blue, 10%); - border-color: darken(@corner-blue, 10%); + background-color: @corner-blue-alt; + border-color: @corner-blue-alt; } } &.cp-corner-cancel { background-color: @corner-white; color: @corner-blue; &:hover { - background-color: lighten(@corner-blue, 50%); + background-color: @corner-white-alt; } } } diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less index daef0b876..3bb187b9e 100644 --- a/customize.dist/src/less2/include/creation.less +++ b/customize.dist/src/less2/include/creation.less @@ -7,9 +7,9 @@ .creation_vars( @bg-color: @colortheme_apps[default] ) { - @creation-color: @cryptpad_text_col; + @creation-color: @cp_creation-fg; @creation-bg-color: @bg-color; - @creation-bg-color-light: lighten(@bg-color, 30%); + @creation-bg-color-light: contrast(@creation-color, lighten(@bg-color, 30%), darken(@bg-color, 30%)); }; .creation_main( @@ -17,23 +17,18 @@ ) { --LessLoader_require: LessLoader_currentFile(); .creation_vars(@bg-color); - --creation-color: @cryptpad_text_col; + --creation-color: @cp_creation-fg; --creation-bg-color: @bg-color; --creation-bg-color-light: @creation-bg-color-light; } & { .creation_vars(); - @colortheme_creation-modal-bg: #fff; - @colortheme_creation-modal: #666; - @colortheme_creation-modal-title: @colortheme_loading-bg; #cp-creation-container { position: absolute; z-index: 100000000; // #loading * 10 top: 0px; - //background: @colortheme_loading-bg; - background: @colortheme_loading_bg; - color: @colortheme_loading-color; + background: @cp_loading-bg; display: flex; flex-flow: column; /* we need column so that the child can shrink vertically */ justify-content: center; @@ -60,8 +55,8 @@ #cp-creation { overflow: auto; text-align: center; - background: @colortheme_creation-modal-bg; - color: @colortheme_creation-modal; + background: @cp_creation-bg; + color: @cp_creation-fg; font: @colortheme_app-font; outline: none; width: 700px; @@ -127,16 +122,16 @@ button { .tools_unselectable(); padding: 6px; - background: @colortheme_logo-2; + background: @cp_creation-button-bg; font-size: 20px; - color: #FFF; + color: @cp_creation-button-fg; margin: 3px 10px; border: none; cursor: pointer; outline: none; text-transform: uppercase; &:hover { - background: lighten(@colortheme_logo-2, 5%); + background: contrast(@cp_creation-button-fg, lighten(@cp_creation-button-bg, 5%), darken(@cp_creation-button-bg, 5%)); } } } @@ -171,10 +166,9 @@ } } .cp-creation-help, .cp-creation-warning { - font-size: 18px; - color: @colortheme_form-warning; + font-size: 16px; + color: @cp_creation-fg; &:hover { - color: @colortheme_form-warning-hov; text-decoration: none; } } @@ -196,11 +190,11 @@ input, select { font-size: 14px; - border: 1px solid @colortheme_form-bg; + background: @cp_forms-bg; + border: 1px solid @cp_forms-border; height: 26px; line-height: 26px; - //background-color: @colortheme_form-bg; - color: @cryptpad_text_col; + color: @cp_forms-fg; } .cp-creation-teams { @@ -221,14 +215,13 @@ padding: 5px; cursor: default; font: @colortheme_app-font; - color: @colortheme_modal-fg; margin: 0 1px; .tools_unselectable(); &.cp-selected { - background-color: @colortheme_alertify-primary; - color: @colortheme_alertify-primary-text; + background-color: @cp_creation-button-bg; + color: @cp_creation-button-fg; } .cp-creation-team-avatar { .fa { @@ -243,7 +236,7 @@ text-align: center; line-height: 18px; } - border: 1px solid @colortheme_alertify-primary; + border: 1px solid @cp_creation-button-bg; } } @@ -294,19 +287,6 @@ .cp-filler { flex: 1; } } - div.cp-creation-remember { - .cp-creation-remember-help { - width: 100%; - //font-style: italic; - font-size: 12px; - font-weight: bold; - color: @colortheme_form-bg; - line-height: 20px; - .fa { - margin-right: 10px; - } - } - } div.cp-creation-template { width: 100%; //flex: 1 0 auto; @@ -341,7 +321,7 @@ max-height: 159px; align-items: center; .cp-creation-template-element { - box-shadow: 2px 2px 7px @colortheme_form-border; + box-shadow: 2px 2px 7px @cp_shadow-color; width: 300px; max-width: calc(100% - 10px); padding: 2px; @@ -404,8 +384,8 @@ text-align: center; .cp-creation-deleted { margin: 0 10px; - background: @colortheme_loading-bg; - color: @colortheme_loading-color; + background: @cp_creation-error-bg; + color: @cp_creation-error-fg; padding: 10px; text-align: center; font-weight: bold; diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less index b933fa32f..b6dac22c7 100644 --- a/customize.dist/src/less2/include/drive.less +++ b/customize.dist/src/less2/include/drive.less @@ -13,23 +13,6 @@ .tokenfield_main(); @colortheme_drive-bg-active: lighten(@colortheme_static_apps[default], 20%); - @colortheme_drive-color: @cryptpad_text_col; - - @drive_hover: #eee; - @drive_hover-light: lighten(@drive_hover, 20%); - @drive_info-box-bg: #d2e1f2; - @drive_info-box-border: #bbb; - @drive_table-header-fg: #555; - @drive_table-header-bg: #e8e8e8; - @drive_mobile-tree-border-col: #ccc; - - @drive_content-fg: @colortheme_sidebar-right-fg; - @drive_content-bg: @colortheme_sidebar-right-bg; - @drive_content-bg-ro: darken(@drive_content-bg, 10%); - - @drive_selected-bg: #888; - @drive_droppable-bg: #FE9A2E; - /* PAGE */ @@ -59,7 +42,7 @@ border: 1px solid transparent; &:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-selected-tmp) { - border: 1px solid #CCC; + border: 1px solid @cp_drive-icon-border; } .cp-app-drive-element-name { width: 100%; @@ -126,7 +109,6 @@ min-width: unset; max-width: unset; max-height: unset; - border-bottom: 1px solid @drive_mobile-tree-border-col; .cp-app-drive-tree-category { margin-top: 0.5em; } @@ -152,38 +134,34 @@ li { padding: 0px 5px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + .tools_unselectable(); } .cp-app-drive-element-restricted { - color: #939393; + color: @cp_drive-header-fg; } .cp-app-drive-element-droppable { - background-color: @drive_droppable-bg; - color: #222; + background-color: @cp_drive-droppable-bg; + color: @cp_drive-droppable-fg; } .cp-app-drive-element-selected { - background: @drive_selected-bg !important; - color: #eee; + background: @cp_drive-selected-bg !important; + color: @cp_drive-selected-fg; .fa-minus-square-o, .fa-plus-square-o { - color: @colortheme_sidebar-left-fg; + color: @cp_sidebar-left-fg; } .cptools { - color: #eee; + color: @cp_drive-selected-fg; } } .cp-app-drive-element-selected-tmp { - border: 1px dotted #bbb; - background: #AAA; - color: #ddd; + background: @cp_drive-selection-bg; + color: @cp_drive-selection-fg; .fa-minus-square-o, .fa-plus-square-o { - color: @colortheme_sidebar-left-fg; + color: @cp_sidebar-left-fg; } } @@ -205,19 +183,20 @@ font-size: 50px; } .cptools-folder-no-color { - color: #bbb; + color: #bbb; // XXX } .fa-check { position: absolute; top: 40%; left: 35%; color: transparent; } + // XXX Check colors in the "change folder color" modal &.cp-app-drive-current-color > .fa-check { - color: white; + color: @cryptpad_color_white; } &.cp-app-drive-current-color:first-child > .fa-check { - color: black; + color: @cryptpad_color_black; } } } @@ -231,13 +210,13 @@ margin: 15px; input { background: transparent; - color: @colortheme_drive-color; + color: @cp_drive-fg; .tools_placeholder-color(); outline-width: 0px; border-radius: 0; width: 100%; border: 0; - border-bottom: 3px solid @colortheme_drive-color; + border-bottom: 3px solid @cp_drive-fg; margin: 0 5px; flex: 1; min-width: 0; @@ -255,12 +234,12 @@ cursor: pointer; } .cp-app-drive-tree-search-icon, .cp-app-drive-search-cancel { - color: @colortheme_drive-color; + color: @cp_drive-fg; } } .cp-app-drive-search-spinner { display: inline-flex; - color: @colortheme_drive-color; + color: @cp_drive-fg; font-size: 40px; align-items: center; justify-content: center; @@ -280,7 +259,7 @@ font-size: @colortheme_app-font-size; //border-right: 1px solid #ccc; box-sizing: border-box; - background: @colortheme_sidebar-left-bg; + background: @cp_sidebar-left-bg; overflow: auto; resize: horizontal; width: auto; @@ -288,26 +267,11 @@ max-width: 500px; min-width: 200px; padding: 0px; - color: @colortheme_sidebar-left-fg; + color: @cp_sidebar-left-fg; display: flex; flex-flow: column; max-height: 100%; position: relative; - .cp-close-button { - position: absolute; - cursor: pointer; - right: 5px; - top: 5px; - font-size: 18px; - padding: 3px; - margin: 0; - border: 0; - background-color: transparent; - outline: none; - &:hover { - color: #000; - } - } .cp-app-drive-tree-categories-container { flex: 1; overflow: auto; @@ -330,7 +294,6 @@ width: ~"calc(100% - 30px)"; padding: 0 10px; border: 0; - color: lighten(@colortheme_sidebar-left-fg, 40%); height: auto; } & > span.cp-app-drive-element-row { @@ -391,7 +354,7 @@ height: 11px !important; padding: 0; margin: 0; - background: white; + background: @cryptpad_color_white; z-index: 10; cursor: default; &:before { @@ -431,9 +394,9 @@ top: -11px; content: ''; display: block; - border-left: 1px solid @colortheme_sidebar-left-branch; + border-left: 1px solid @cp_drive-tree-branch; height: ~"calc(1em + 11px)"; - border-bottom: 1px solid @colortheme_sidebar-left-branch; + border-bottom: 1px solid @cp_drive-tree-branch; width: 15px; } &:after { @@ -442,7 +405,7 @@ bottom: -7px; content: ''; display: block; - border-left: 1px solid @colortheme_sidebar-left-branch; + border-left: 1px solid @cp_drive-tree-branch; height: 100%; } &.cp-app-drive-tree-root { @@ -470,8 +433,8 @@ } #cp-app-drive-content { box-sizing: border-box; - background: @drive_content-bg; - color: @drive_content-fg; + background: @cp_sidebar-right-bg; + color: @cp_sidebar-right-fg; overflow-y: auto; flex: 1; display: flex; @@ -479,12 +442,12 @@ position: relative; .cp-app-drive-content-select-box { display: none; - background-color: rgba(100, 100, 100, 0.7); + background-color: @cp_drive-selection-overlay; position: absolute; z-index: 50; } &.cp-app-drive-readonly { - background: @drive_content-bg-ro; + background: contrast(@cp_sidebar-right-bg, darken(@cp_sidebar-right-bg, 10%), lighten(@cp_sidebar-right-bg, 10%)); } h1 { padding-left: 10px; @@ -495,7 +458,7 @@ line-height: 2em; padding: 0.25em 0.75em; margin: 1em; - background: @drive_info-box-bg; + background: @cp_drive-infobox-bg; cursor: default; span { cursor: pointer; @@ -508,7 +471,7 @@ &:not(.cp-app-drive-element-header) { &:hover { &:not(.-cp-app-drive-element-selected, .cp-app-drive-element-selected-tmp) { - background-color: @drive_hover; + background-color: @cp_drive-icon-hover; } } } @@ -535,13 +498,13 @@ .cp-app-drive-path-clickable { cursor: pointer; &:hover { - background-color: #eee; + color: @cp_drive-fg; } } } font-size: 12px; line-height: 16px; - color: @drive_table-header-fg; + color: @cp_drive-header-fg; } } &.cp-app-drive-tags-list { @@ -603,7 +566,7 @@ margin: 0; padding: 0; border-radius: 0; - border: 1px solid #ddd; + border: 1px solid transparent; font-size: 14px; height: auto; } @@ -658,7 +621,7 @@ li { display: flex; input { - border: 1px solid #ddd; + border: 1px solid transparent; margin: 0; padding: 0 4px; flex: 1; @@ -734,7 +697,7 @@ } &.cp-app-drive-element-header { cursor: default; - color: @drive_table-header-fg; + color: @cp_drive-header-fg; span { &:not(.fa):not(.cptools) { text-align: left; @@ -748,7 +711,7 @@ &.cp-app-drive-sort-clickable { cursor: pointer; &:hover { - background: @drive_table-header-bg; + background: @cp_drive-icon-hover; } } } @@ -821,7 +784,7 @@ font-size: @colortheme_app-font-size; padding: 0 5px; border: 0; - color: @colortheme_drive-color; + color: @cp_drive-fg; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; @@ -832,7 +795,7 @@ } &.cp-app-drive-path-separator { - color: #ccc; + color: @cp_drive-header-fg; cursor: default; } @@ -841,7 +804,8 @@ } &.cp-app-drive-element-droppable { - background-color: @drive_droppable-bg; + background-color: @cp_drive-droppable-bg; + color: @cp_drive-droppable-fg; } &.cp-app-drive-path-clickable { cursor: pointer; @@ -867,13 +831,8 @@ #cp-app-drive-new-ghost-dialog.cp-modal-container { .drive_fileIcon; - border: 1px solid @colortheme_modal-fg; li:not(.cp-app-drive-element-selected):hover { - background: @colortheme_logo_2_light; - color: @cryptpad_text_col; - .cptools { - color: @cryptpad_text_col; - } + background: @cp_drive-icon-hover; } .cp-modal { display: flex; @@ -900,7 +859,7 @@ } .cp-app-drive-new-name { - color: @cryptpad_text_col; + color: @cp_drive-fg; white-space: nowrap; } @@ -954,8 +913,8 @@ display: flex; align-items: center; justify-content: center; - background-color: @colortheme_drive-bg-active; - color: black; + background-color: @cp_drive-infobox-bg; + color: @cp_drive-infobox-fg; font-weight: bold; text-transform: uppercase; cursor: default; @@ -965,8 +924,8 @@ display: flex; align-items: center; justify-content: center; - background-color: #eb675e; - color: white; + background-color: @cp_drive-warnbox-bg; + color: @cp_drive-warnbox-fg; font-weight: bold; text-transform: uppercase; cursor: default; diff --git a/customize.dist/src/less2/include/export.less b/customize.dist/src/less2/include/export.less index d1ee37d4b..548bc6ec6 100644 --- a/customize.dist/src/less2/include/export.less +++ b/customize.dist/src/less2/include/export.less @@ -6,13 +6,16 @@ min-height: 0; align-items: center; justify-content: center; + background-color: @cp_export-bg; + color: @cp_export-fg; .cp-export-block { width: 800px; max-width: 90vw; + // XXX Keep hardcoded progress bar colors for now... .cp-export-progress-bar-container { height: 24px; background: white; - border: 1px solid #DDD; + border: 1px solid ; width: 80%; margin: auto; position: relative; @@ -33,7 +36,7 @@ } } & > p { - color: #777; + color: @cp_export-hint; } .cp-export-progress { margin-bottom: 1rem; @@ -58,8 +61,8 @@ display: none; overflow-x: auto; max-height: 300px; - background: #ededed; - border: 1px solid #777; + background: @cp_export-error-bg; + border: 1px solid @cp_export-hint; padding: 5px 20px; margin-top: 1rem; & > p { @@ -69,7 +72,7 @@ & > div { padding: 5px 10px; margin: 5px 0; - background: #dedede; + background: @cp_export-error-bg2; .title { font-weight: bold; } @@ -79,7 +82,7 @@ } .reason { padding: 0 20px; - color: #777; + color: @cp_export-hint; } } } diff --git a/customize.dist/src/less2/include/fileupload.less b/customize.dist/src/less2/include/fileupload.less index d2f2fff18..bd36faf8d 100644 --- a/customize.dist/src/less2/include/fileupload.less +++ b/customize.dist/src/less2/include/fileupload.less @@ -16,7 +16,7 @@ box-sizing: border-box; z-index: 100001; //Z file upload table container: just above the file picker display: none; - color: darken(@colortheme_static_apps[default], 10%); + color: @cp_upload-fg; max-height: 180px; overflow-y: auto; @@ -26,7 +26,7 @@ .cp-fileupload-header { display: flex; - background-color: darken(@colortheme_modal-bg, 10%); + background-color: @cp_upload-header; font-weight: bold; position: sticky; top: 0; @@ -39,7 +39,7 @@ padding: 0.25em 0.5em; cursor: pointer; &:hover { - background-color: rgba(0,0,0,0.1); + color: lighten(@cp_upload-fg, 10%); } } } @@ -86,7 +86,7 @@ position: absolute; width: 0px; height: 100%; - background-color: #dddddd; + background-color: @cp_upload-progress; z-index: -1; //Z file upload progress container } .cp-fileupload-table-cancel { diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less index 13583ad85..26ba00d96 100644 --- a/customize.dist/src/less2/include/forms.less +++ b/customize.dist/src/less2/include/forms.less @@ -17,6 +17,7 @@ padding: @alertify_padding-base; &[readonly] { background-color: @cp_forms-readonly; + border-color: @cp_forms-readonly-border; color: @cp_forms-fg; } } @@ -135,7 +136,7 @@ &:hover, &:not(:disabled):active, &:focus { border-color: @cp_buttons-red-border; color: @cp_buttons-red-color; - background-color: contrast(@cp_buttons-red-color, darken(@cp_buttons-red, 10%), lighten(@colortheme_alertify-red, 10%)); + background-color: contrast(@cp_buttons-red-color, darken(@cp_buttons-red, 10%), lighten(@cp_buttons-red, 10%)); } } @@ -157,7 +158,7 @@ &:hover, &:not(:disabled):active, &:focus { color: @cp_buttons-primary-text; border-color: @cp_buttons-primary-border; - background-color: contrast(@colortheme_modal-bg, darken(@cp_buttons-primary, 10%), lighten(@colortheme_alertify-primary, 10%)); + background-color: contrast(@cp_buttons-primary-text, darken(@cp_buttons-primary, 10%), lighten(@cp_buttons-primary, 10%)); } } diff --git a/customize.dist/src/less2/include/help.less b/customize.dist/src/less2/include/help.less index 3bc9ae1e0..04a20f4f3 100644 --- a/customize.dist/src/less2/include/help.less +++ b/customize.dist/src/less2/include/help.less @@ -7,7 +7,7 @@ .cp-help-container { position: relative; - background-color: @colortheme_help-bg; + background-color: @cp_help-bg; max-height: 50%; overflow-y: auto; &.cp-help-hidden { @@ -21,11 +21,11 @@ cursor: pointer; } .cp-help-text { - color: @cryptpad_text_col; + color: @cp_help-fg; margin: 0; padding: 5px 15px; a { - color: @colortheme_link-color; + color: @cp_help-link; } h1 { font-size: 20px; diff --git a/customize.dist/src/less2/include/icons.less b/customize.dist/src/less2/include/icons.less index 228e10c3d..118367b56 100644 --- a/customize.dist/src/less2/include/icons.less +++ b/customize.dist/src/less2/include/icons.less @@ -10,6 +10,8 @@ text-overflow: ellipsis; padding-top: 5px; padding-bottom: 5px; + border: 1px solid transparent; + background: @cp_drive-bg; .cp-icons-name { width: 100%; @@ -22,11 +24,11 @@ white-space: nowrap; text-overflow: ellipsis; word-wrap: break-word; - color: @cryptpad_text_col; + color: @cp_drive-fg; } &.cp-icons-element-selected { - background-color: rgba(0,0,0,0.2); - color: #666; + background: @cp_drive-icon-hover; + color: @cp_drive-fg; } .fa, .cptools { display: block; @@ -39,4 +41,3 @@ } } } - diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less index 8373ff2e8..ead6f812c 100644 --- a/customize.dist/src/less2/include/infopages.less +++ b/customize.dist/src/less2/include/infopages.less @@ -3,7 +3,7 @@ .infopages_link () { text-decoration: none; - color: #0275D8; + color: @cryptpad_color_link; cursor: pointer; display: inline-flex; &:hover { @@ -23,11 +23,11 @@ body { @infopages_padding: 32px; // Basic setup for info pages, this should be used at the global level - background-color: @colortheme_info-background; - color: @cryptpad_text_col; + background-color: @cp_static-bg; + color: @cp_static-fg; a { - color: @colortheme_logo-2; - &:visited { color: darken(@colortheme_logo-2, 5%); } + color: @cp_static-link; + &:visited { color: darken(@cp_static-link, 5%); } } a:hover { opacity: 1; @@ -77,7 +77,7 @@ body { .cp-page-title { h1 { font-family: "IBM Plex Mono"; - color: @colortheme_logo-2; + color: @cp_static-title; margin: 50px auto; } } @@ -90,21 +90,21 @@ body { button { outline: none; - background-color: @colortheme_logo-2; - color: @colortheme_base; + background-color: @cp_buttons-primary; + color: @cp_buttons-primary-text; border: none; padding: 10px 20px; margin-right: 10px; border-radius: 0px; cursor: pointer; &:hover, &:focus { - background-color: darken(@colortheme_logo-2, 5%); + background-color: contrast(@cp_buttons-primary-text, darken(@cp_buttons-primary, 10%), lighten(@cp_buttons-primary, 10%)); } } button.cp-secondary { - background-color: white; - color: @colortheme_logo-2; - border: 1px solid @colortheme_logo-2; + background-color: @cp_buttons-cancel; + color: @cp_buttons-fg; + border: 1px solid @cp_buttons-fg; } .form-group { @@ -128,19 +128,18 @@ body { } } footer { - @footer-color: #d9d9d9; // FIXME use/make variable - background-color: @footer-color; + background-color: @cp_static-footer; padding-top: 20px; align-self: normal; // override align-items:center from parent in index.html .container { margin-bottom: 20px; a { - color: @colortheme_logo-2; + color: @cp_static-link; &:visited { - color: @colortheme_logo-2; - }; + color: @cp_static-link; + } } } .cp-logo-foot { @@ -156,18 +155,18 @@ body { display: block; font-family: "IBM Plex Mono"; font-size: 1.5rem; - color: @colortheme_logo-2; + color: @cp_static-link; margin-bottom: 10px; } } .cp-version-footer { - background-color: @footer-color; + background-color: @cp_static-footer; display: flex; flex-flow: column; align-items: center; padding: 0.5em; - border-top: 1px solid #fff; + border-top: 1px solid @cp_static-footer-border; select { min-width: 0; margin-bottom: 10px; @@ -175,47 +174,10 @@ body { } } - // Apply this to the top bar div - .cp-topbar { - background: #fff; - z-index: 10000; //Z infopage toolbar - position: fixed; - top: 0; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - box-sizing: border-box; - width: 100%; - height: @infopages_infobar-height; - padding-left: 0.5em; - padding-right: 0.5em; - vertical-align: middle; - font-size: 1.25em; - line-height: 1.25em; - cursor: default; - user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - .navbar-nav { - display: flex; - align-items: center; - } - a { - font-weight: 500; - padding: 0.6em; - .infopages_link() - } - .cp-logo { - margin-right: 0.5em; - } - } - // navigation top bar .navbar { width: 100%; - color: @colortheme_logo-2; + color: @cp_static-topbar-fg; .navbar-brand { display: block; height: 50px; @@ -235,7 +197,7 @@ body { border: 2px solid transparent; white-space: nowrap; &:visited { - color: @colortheme_logo-2; + color: @cp_static-link; } } .nav-link { @@ -245,7 +207,7 @@ body { } } .cp-register-btn { - border: 2px solid @colortheme_logo-2; + border: 2px solid @cp_static-topbar-fg; display: inline-block; } button:focus { @@ -253,7 +215,7 @@ body { } .navbar-toggler { margin-top: 10px; - color: @colortheme_logo-2; + color: @cp_static-topbar-fg; } } @media (max-width: 1000px) { diff --git a/customize.dist/src/less2/include/leftside-menu.less b/customize.dist/src/less2/include/leftside-menu.less index e69a3e816..807055184 100644 --- a/customize.dist/src/less2/include/leftside-menu.less +++ b/customize.dist/src/less2/include/leftside-menu.less @@ -18,6 +18,6 @@ background: rgba(0,0,0,0.05); } &.cp-leftside-active { - background: @colortheme_sidebar-active; + background: @cp_sidebar-left-active; } } diff --git a/customize.dist/src/less2/include/limit-bar.less b/customize.dist/src/less2/include/limit-bar.less index cb6bfdd42..d5618ea62 100644 --- a/customize.dist/src/less2/include/limit-bar.less +++ b/customize.dist/src/less2/include/limit-bar.less @@ -32,6 +32,7 @@ left: 0; top: 0; z-index: 1; // .usage + // XXX Check if we can keep the same colors in dark themes &.cp-limit-usage-normal { background: @colortheme_green; } @@ -45,7 +46,7 @@ } .cp-limit-usage-text { - color: @cryptpad_text_col; + color: @cp_limit-fg; margin-left: 5px; z-index: 2; // .usageText font-size: @colortheme_app-font-size-small; diff --git a/customize.dist/src/less2/include/mentions.less b/customize.dist/src/less2/include/mentions.less index 9ef96acba..f15dad068 100644 --- a/customize.dist/src/less2/include/mentions.less +++ b/customize.dist/src/less2/include/mentions.less @@ -12,7 +12,7 @@ display: inline-flex; align-items: center; vertical-align: bottom; - background-color: #eee; + background-color: @cp_mentions-bg; span.cp-mentions-name { max-width: 150px; @@ -25,7 +25,7 @@ outline: none; cursor: pointer; &:hover { - background-color: #ddd; + background-color: @cp_mentions-hover; } } } diff --git a/customize.dist/src/less2/include/modal.less b/customize.dist/src/less2/include/modal.less index bf2175bfb..feed09a70 100644 --- a/customize.dist/src/less2/include/modal.less +++ b/customize.dist/src/less2/include/modal.less @@ -9,10 +9,10 @@ box-shadow: @variables_shadow; a { - color: @colortheme_link-color; + color: @cryptpad_color_link; &:visited { - color: @colortheme_link-color-visited; + color: @cryptpad_color_link; } } } diff --git a/customize.dist/src/less2/include/modals-ui-elements.less b/customize.dist/src/less2/include/modals-ui-elements.less index ff40729a6..0d9320eb4 100644 --- a/customize.dist/src/less2/include/modals-ui-elements.less +++ b/customize.dist/src/less2/include/modals-ui-elements.less @@ -38,11 +38,6 @@ // Properties modal .cp-app-prop { margin-bottom: 10px; - .cp-app-prop-hint { - color: @cryptpad_text_col; - font-size: 0.8em; - margin-bottom: 5px; - } .cp-app-prop-size-container { height: 20px; background-color: @colortheme_logo-2; @@ -52,11 +47,10 @@ height: 20px; margin: 0; padding: 0; - background-color: #CCCCCC; + background-color: @cryptpad_color_neutral2_grey; } } .cp-app-prop-size-legend { - color: @colortheme_modal-fg; display: flex; margin: 10px 0; & > div { @@ -73,7 +67,7 @@ margin-right: 10px; } .cp-app-prop-history-size-color { - background-color: #CCCCCC; + background-color: @cryptpad_color_neutral2_grey; } .cp-app-prop-contents-size-color { background-color: @colortheme_logo-2; @@ -108,7 +102,7 @@ position: relative; .cp-overlay { position: absolute; - background-color: rgba(255,255,255,0.5); + background-color: @cp_access-overlay; top: 0; bottom: 0; left: 0; @@ -200,7 +194,7 @@ .cp-snapshot-buttons { display: flex; } - background-color: #DDD; + background-color: @cp_snapshots-hover; } } } diff --git a/customize.dist/src/less2/include/notifications.less b/customize.dist/src/less2/include/notifications.less index a24ad32d3..54f866654 100644 --- a/customize.dist/src/less2/include/notifications.less +++ b/customize.dist/src/less2/include/notifications.less @@ -22,7 +22,7 @@ padding: 0 5px; cursor: pointer; &:hover { - background-color: rgba(0,0,0,0.1); + background-color: @cp_dropdown-bg-hover; } } .cp-notification-content { @@ -35,7 +35,7 @@ &.cp-clickable { cursor: pointer; &:hover { - background-color: rgba(0,0,0,0.1); + background-color: @cp_dropdown-bg-hover; } } } @@ -47,7 +47,7 @@ justify-content: center; cursor: pointer; &:hover { - background-color: rgba(0,0,0,0.1); + background-color: @cp_dropdown-bg-hover; } } } @@ -59,7 +59,7 @@ font-weight: bold; cursor: pointer; &:hover { - background-color: rgba(0,0,0,0.1); + background-color: @cp_dropdown-bg-hover; } } } diff --git a/customize.dist/src/less2/include/password-input.less b/customize.dist/src/less2/include/password-input.less index 0f476390a..ef99dddb8 100644 --- a/customize.dist/src/less2/include/password-input.less +++ b/customize.dist/src/less2/include/password-input.less @@ -18,7 +18,7 @@ justify-content: center; cursor: pointer; &:hover { - color: darken(@colortheme_alertify-primary, 10%); + color: darken(@colortheme_logo-2, 10%); } } } diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less index 4273b0b9a..70509577b 100644 --- a/customize.dist/src/less2/include/sidebar-layout.less +++ b/customize.dist/src/less2/include/sidebar-layout.less @@ -13,20 +13,15 @@ } } & { - @leftside-bg: @colortheme_sidebar-left-bg; - @leftside-color: @colortheme_sidebar-left-fg; - @rightside-color: @colortheme_sidebar-right-fg; - @description-color: @colortheme_sidebar-description; - #cp-sidebarlayout-container { font-size: 16px; display: flex; flex: 1; min-height: 0; #cp-sidebarlayout-leftside { - color: @leftside-color; + color: @cp_sidebar-left-fg; width: 250px; - background: @leftside-bg; + background: @cp_sidebar-left-bg; display: flex; flex-flow: column; .cp-sidebarlayout-categories { @@ -71,7 +66,8 @@ #cp-sidebarlayout-rightside { flex: 1; padding: 5px 20px; - color: @rightside-color; + background: @cp_sidebar-right-bg; + color: @cp_sidebar-right-fg; overflow: auto; padding-bottom: 200px; @@ -84,7 +80,7 @@ } .cp-sidebarlayout-description { display: block; - color: @description-color; + color: @cp_sidebar-hint; margin-bottom: 5px; p { margin-bottom: 0; @@ -111,7 +107,7 @@ input { flex: 1; //border-radius: 0.25em 0 0 0.25em; - border: 1px solid #adadad; + border: 1px solid @cryptpad_color_neutral_grey; border-right: 0px; } button { diff --git a/customize.dist/src/less2/include/support.less b/customize.dist/src/less2/include/support.less index 105599ada..2c06a7c4d 100644 --- a/customize.dist/src/less2/include/support.less +++ b/customize.dist/src/less2/include/support.less @@ -1,8 +1,8 @@ @import (reference) "./colortheme-all.less"; .support_main () { - @ticket-bg: #F7F7F7; - @msg-bg: #eee; - @fromme-bg: #ddd; + @ticket-bg: @cp_support-bg; + @msg-bg: @cp_support-msg-bg; + @fromme-bg: @cp_support-header-bg; .cp-support-form-container { div { margin-bottom: 10px; @@ -25,7 +25,7 @@ margin-right: 10px; } &> span { - border: 1px solid #ddd; + border: 1px solid @fromme-bg; margin-right: 5px; padding: 10px; } diff --git a/customize.dist/src/less2/include/toolbar-history.less b/customize.dist/src/less2/include/toolbar-history.less index 2759fe71b..2c97de873 100644 --- a/customize.dist/src/less2/include/toolbar-history.less +++ b/customize.dist/src/less2/include/toolbar-history.less @@ -6,10 +6,10 @@ & { .cp-toolbar-history { - @history_lineBg: #FFFFFF; - @history_userBg1: #DDD; - @history_userBg2: #BBB; - @pos-color: @cryptpad_text_col; + @history_lineBg: @cp_history-line-bg; + @history_userBg1: @cp_history-bg1; + @history_userBg2: @cp_history-bg2; + @pos-color: @cp_history-fg; @fill-width: 40px; display: none; @@ -17,7 +17,7 @@ padding: 10px 0 0; align-items: center; justify-content: center; - color: @cryptpad_text_col; + color: @cp_history-fg; * { font: @colortheme_app-font; } diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index b267b9dad..1951aa940 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -37,11 +37,10 @@ .modal_main(); }; & { - @toolbar-color: @cryptpad_text_col; - @toolbar-color-light: lighten(@cryptpad_text_col, 10%); + @toolbar-color: @cp_toolbar-fg; .toolbar_vars(); - @toolbar-top-bg: #eee; + @toolbar-top-bg: @cp_toolbar-bg; @toolbar_line-height: 32px; @toolbar_top-height: 76px; @toolbar_button-font: @colortheme_app-font; @@ -60,7 +59,8 @@ .cp-markdown-toolbar { height: @toolbar_line-height; - background-color: @colortheme_pad-toolbar-bg; + background-color: @cp_toolbar-bg; + color: @cp_toolbar-fg; display: none; button { height: @toolbar_line-height !important; @@ -69,7 +69,7 @@ .toolbar_button; font: normal normal normal 14px/1 FontAwesome; &:hover { - background-color: darken(@colortheme_pad-toolbar-bg, 5%); + background-color: contrast(@cp_toolbar-bg, darken(@cp_toolbar-bg, 5%), lighten(@cp_toolbar-bg, 5%)); } &.cp-markdown-help { float: right; } } @@ -102,7 +102,7 @@ } background: transparent; &:hover { - background-color: rgba(50,50,50,0.3); + background-color: @cp_toolbar-fade3; } } @@ -174,7 +174,7 @@ .cp-toolbar-userlist-viewer { font-style: italic; padding: 5px; - background: rgba(0,0,0,0.1); + background: @cp_toolbar-fade1; margin: 2px 0; } @@ -194,7 +194,7 @@ height: 48px; padding: 5px; margin: 2px 0; - background: rgba(0,0,0,0.1); + background: @cp_toolbar-fade1; border-right: 3px solid transparent; .avatar_main(30px); .cp-avatar-default, media-tag { @@ -203,7 +203,7 @@ &.cp-userlist-clickable { cursor: pointer; &:hover { - background-color: rgba(0,0,0,0.3); + background: @cp_toolbar-fade3; } } .cp-toolbar-userlist-rightcol { @@ -263,14 +263,11 @@ .icons_main(); li { - border: 1px solid @colortheme_modal-fg; + color: @cp_drive-fg; + border: 1px solid @cp_drive-icon-border; &:hover { - //border: 1px solid @colortheme_modal-fg; - background: @colortheme_logo_2_light; - color: @cryptpad_text_col; - .cptools { - color: @cryptpad_text_col; - } + background: @cp_drive-icon-hover; + color: @cp_drive-fg; } } .cp-modal { @@ -339,7 +336,7 @@ } .cp-toolbar-userlist-drawer { - background-color: @colortheme_userlist-bg; + background-color: @cp_toolbar-bg; color: @toolbar-color; .cp-toolbar-userlist-drawer-close { color: @toolbar-color; @@ -348,12 +345,12 @@ color: @toolbar-color; } .cp-toolbar-userlist-name-input { - background-color: rgba(0,0,0,0.1); + background: @cp_toolbar-fade1; } .cp-toolbar-userlist-button { background: transparent; &:hover { - color: @toolbar-color-light; + color: contrast(@cp_toolbar-bg, lighten(@cp_toolbar-fg, 10%), darken(@cp_toolbar-fg, 10%)); } } } @@ -366,8 +363,6 @@ } } - @toolbar-green: #5cb85c; - box-sizing: border-box; padding: 0px; display: flex; @@ -431,6 +426,7 @@ margin: 0; }*/ + // XXX I don't think we still use any select in the toolbar select { margin-left: 5px; margin-right: 5px; @@ -568,7 +564,7 @@ } .cp-toolbar-limit { - color: @colortheme_toolbar-warn; + color: @cp_toolbar-warn; } } @@ -591,7 +587,7 @@ padding: 0; margin: 0 5px; font-size: @colortheme_app-font-size; - color: @colortheme_toolbar-warn; + color: @cp_toolbar-warn; .cp-pnp-msg { padding-left: 5px; font-family: @colortheme_font; @@ -600,7 +596,7 @@ font-size: @colortheme_app-font-size; font-family: @colortheme_font; font-weight: bold; - color: @colortheme_toolbar-warn; + color: @cp_toolbar-warn; &:hover { text-decoration: underline; } @@ -621,7 +617,7 @@ //flex: 1; } .cp-toolbar-title { - color: @cryptpad_text_col; + color: @cp_toolbar-fg; flex: 1; overflow: hidden; text-overflow: ellipsis; @@ -756,7 +752,7 @@ } &:hover { border-color: transparent; - background-color: rgba(50,50,50,0.1); + background-color: @cp_toolbar-fade1; } span { vertical-align: top; @@ -859,7 +855,7 @@ padding: 0; &:hover { border-color: transparent; - background-color: rgba(50,50,50,0.1); + background-color: @cp_toolbar-fade1; } span { text-align: center; @@ -888,7 +884,7 @@ border-radius: 0; background: transparent; &:hover { - background-color: rgba(0,0,0,0.2); + background-color: @cp_toolbar-fade1; } } } @@ -897,7 +893,7 @@ .cp-toolbar-history, .cp-toolbar-snapshots { background-color: @toolbar-bg-color-light; background-color: var(--toolbar-bg-color-light); - color: @cryptpad_text_col; + color: @toolbar-color; } .cp-toolbar-snapshots { display: none; @@ -925,7 +921,7 @@ .cp-toolbar-snapshots-actions { button { margin: 0 5px; - border: 1px solid @cryptpad_text_col; + border: 1px solid @toolbar-color; text-transform: uppercase; i:not(:last-child) { margin-right: 5px; @@ -936,7 +932,7 @@ .cp-toolbar-bottom { background-color: @toolbar-bg-color-light; background-color: var(--toolbar-bg-color-light); - color: @cryptpad_text_col; + color: @cp_toolbar-bottom-fg; button:hover, button.cp-toolbar-button-active { background-color: @toolbar-bg-color-active; background-color: var(--toolbar-bg-color-active); @@ -1062,7 +1058,7 @@ display: none; } .cp-toolbar-drawer-content { - box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 1px 5px 0px @cp_shadow-color; overflow-y: auto; overflow-x: hidden; &.cp-dropdown-visible { @@ -1117,7 +1113,7 @@ } .cp-toolbar-spinner { - color: @cryptpad_text_col; + color: @cp_toolbar-fg; font-family: "Open Sans"; font-size: 14px; padding: 0 8px; diff --git a/customize.dist/src/less2/include/usergrid.less b/customize.dist/src/less2/include/usergrid.less index ea755b1dd..d4b03e89c 100644 --- a/customize.dist/src/less2/include/usergrid.less +++ b/customize.dist/src/less2/include/usergrid.less @@ -59,8 +59,8 @@ .tools_unselectable(); &.cp-selected { - background-color: @colortheme_alertify-primary; - color: @colortheme_alertify-primary-text; + background-color: @cp_usergrid-selected-bg; + color: @cp_usergrid-selected-fg; order: -1 !important; .cp-usergrid-avatar { media-tag, .cp-avatar-default { @@ -98,12 +98,12 @@ margin-left: 5px; text-align: left; line-height: 150%; - color: @cryptpad_text_col; + color: @cp_usergrid-fg; } } &.cp-selected { .cp-usergrid-user-name { - color: @colortheme_alertify-primary-text; + color: @cp_usergrid-selected-fg; } } .fa-times { @@ -111,9 +111,9 @@ cursor: pointer; height: 100%; line-height: 25px; - color: @cryptpad_text_col; + color: @cp_usergrid-fg; &:hover { - color: lighten(@cryptpad_text_col, 10%); + color: lighten(@cp_usergrid-fg, 10%); } } } diff --git a/www/common/LessLoader.js b/www/common/LessLoader.js index e9b60c381..796004429 100644 --- a/www/common/LessLoader.js +++ b/www/common/LessLoader.js @@ -95,6 +95,7 @@ define([ var COLORTHEME = '/customize/src/less2/include/colortheme.less'; var COLORTHEME_DARK = '/customize/src/less2/include/colortheme-dark.less'; + //COLORTHEME_DARK = '/customize/src/less2/include/colortheme.less'; // XXX var getColortheme = function () { return window.CryptPad_theme; }; diff --git a/www/common/common-interface.js b/www/common/common-interface.js index e5e35ffe1..3f7db9149 100644 --- a/www/common/common-interface.js +++ b/www/common/common-interface.js @@ -1265,9 +1265,6 @@ define([ var $popup = $(popup); - if (opts.hidden) { - $popup.addClass('cp-minimized'); - } if (opts.big) { $popup.addClass('cp-corner-big'); } diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 7f080d9df..f1d8ae78c 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -2130,6 +2130,7 @@ define([ // Team pad var team; + // FIXME: broken wen cache is enabled var teamExists = privateData.teams && Object.keys(privateData.teams).length; var teamValue; // storeInTeam can be diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js index 972675487..814853013 100644 --- a/www/common/drive-ui.js +++ b/www/common/drive-ui.js @@ -4023,16 +4023,6 @@ define([ $tree.html(''); - /* - $(h('button.fa.fa-times.cp-close-button', { - title: Messages.filePicker_close - })).click(function (e) { - e.stopPropagation(); - $tree.hide(); - checkCollapseButton(); - }).appendTo($tree); - */ - var $div = $('
', {'class': 'cp-app-drive-tree-categories-container'}) .appendTo($tree); if (displayedCategories.indexOf(SEARCH) !== -1) { createCategory($div, SEARCH); } From 4c17cfcf44ba71310321acc250519f8ba4673101 Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 25 Jan 2021 18:09:30 +0100 Subject: [PATCH 05/97] lint compliance --- .../src/less2/include/checkmark.less | 1 - customize.dist/src/less2/include/export.less | 2 +- www/settings/inner.js | 49 +------------------ 3 files changed, 2 insertions(+), 50 deletions(-) diff --git a/customize.dist/src/less2/include/checkmark.less b/customize.dist/src/less2/include/checkmark.less index 17a434fd3..f638cb8cf 100644 --- a/customize.dist/src/less2/include/checkmark.less +++ b/customize.dist/src/less2/include/checkmark.less @@ -23,7 +23,6 @@ --checkmark-radio-size: @checkmark-radio-size; } & { - // XXX DARK @cp_checkmark-back0: @cp_forms-bg; @cp_checkmark-back0-active: @cp_forms-disabled; @cp_checkmark-back1: @cp_forms-border; diff --git a/customize.dist/src/less2/include/export.less b/customize.dist/src/less2/include/export.less index 548bc6ec6..208832851 100644 --- a/customize.dist/src/less2/include/export.less +++ b/customize.dist/src/less2/include/export.less @@ -15,7 +15,7 @@ .cp-export-progress-bar-container { height: 24px; background: white; - border: 1px solid ; + border: 1px solid @cryptpad_color_grey; width: 80%; margin: auto; position: relative; diff --git a/www/settings/inner.js b/www/settings/inner.js index 3171519d6..45bc91ce4 100644 --- a/www/settings/inner.js +++ b/www/settings/inner.js @@ -421,15 +421,13 @@ define([ Messages.settings_colortheme_custom = "Custom"; makeBlock('colortheme', function (cb) { - var store = window.cryptpadStore; - var theme = window.cryptpadStore.store['colortheme'] || 'default'; var os = window.cryptpadStore.store['colortheme_default'] || 'light'; var values = ['default', 'light', 'dark', 'custom']; var defaultTheme = Messages['settings_colortheme_'+os]; var opts = h('div.cp-settings-radio-container', [ - values.map(function (key, i) { + values.map(function (key) { return UI.createRadio('cp-colortheme-radio', 'cp-colortheme-radio-'+key, Messages._getKey('settings_colortheme_' + key, [defaultTheme]), key === theme, { @@ -469,51 +467,6 @@ define([ spinner.done(); }); }); - - return; - var $cbox = $(UI.createCheckbox('cp-settings-cache', - Messages.settings_cacheCheckbox, - false, { label: { class: 'noTitle' } })); - var spinner = UI.makeSpinner($cbox); - - // Checkbox: "Enable safe links" - var $checkbox = $(opts).find('.cp-radio-colortheme input').on('change', function() { - spinner.spin(); - var val = !$checkbox.is(':checked') ? '1' : undefined; - store.put('disableCache', val, function () { - sframeChan.query('Q_CACHE_DISABLE', { - disabled: Boolean(val) - }, function () { - spinner.done(); - }); - }); - }); - - store.get('disableCache', function (val) { - if (!val) { - $checkbox.attr('checked', 'checked'); - } - }); - - var button = h('button.btn.btn-danger', [ - h('i.fa.fa-trash-o'), - h('span', Messages.settings_cacheButton) - ]); - var buttonContainer = h('div.cp-settings-clear-cache', button); - var spinner2 = UI.makeSpinner($(buttonContainer)); - UI.confirmButton(button, { - classes: 'btn-danger' - }, function () { - spinner2.spin(); - sframeChan.query('Q_CLEAR_CACHE', null, function() { - spinner2.done(); - }); - }); - - cb([ - $cbox[0], - buttonContainer - ]); }, true); create['delete'] = function() { From 36472855ff6da878bf0d98faf502465f90197f17 Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 26 Jan 2021 12:15:28 +0100 Subject: [PATCH 06/97] LESS loading screen --- customize.dist/loading.js | 273 +----------------- .../src/less2/include/colortheme.less | 10 + www/common/LessLoader.js | 2 +- www/common/common-ui-elements.js | 4 +- 4 files changed, 17 insertions(+), 272 deletions(-) diff --git a/customize.dist/loading.js b/customize.dist/loading.js index 819e0d89d..59cba470c 100644 --- a/customize.dist/loading.js +++ b/customize.dist/loading.js @@ -1,279 +1,14 @@ // bg #e7e7e7 // blue #0087FF // text #3F4141 -define(['/customize/messages.js'], function (Messages) { - var loadingStyle = (function(){/* -@font-face { - font-family: 'Open Sans'; - src: url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.eot'); - src: url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.eot?#iefix') format('embedded-opentype'), - url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.woff') format('woff'), - url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.ttf') format('truetype'), - url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.svg#OpenSansRegular') format('svg'); - font-weight: normal; - font-style: normal; -} - -#cp-loading { - visibility: visible; - position: fixed; - z-index: 10000000; - top: 0px; - bottom: 0px; - left: 0px; - right: 0px; - background-color: #e7e7e7; - color: #3F4141; - font-size: 1.3em; - line-height: 120%; - opacity: 1; - display: flex; - flex-flow: column; - justify-content: center; - align-items: center; - font: 20px 'Open Sans', 'Helvetica Neue', sans-serif !important; -} -#cp-loading.cp-loading-transparent { - background-color: rgba(231, 231, 231, 0.7); -} -#cp-loading.cp-loading-hidden { - opacity: 0; - visibility: hidden; - transition: opacity 0.75s, visibility 0s 0.75s; -} -#cp-loading .cp-loading-logo { - height: 300px; - width: 300px; - margin-top: 50px; - flex: 0 1 auto; - min-height: 0; - text-align: center; -} -#cp-loading .cp-loading-logo img { - max-width: 100%; - max-height: 100%; -} -#cp-loading .cp-loading-container { - width: 700px; - max-width: 90vw; - height: 236px; - max-height: calc(100vh - 20px); - margin: 50px; - flex-shrink: 0; - display: flex; - flex-flow: column; - align-items: center; -} -#cp-loading .cp-loading-cryptofist { - margin-left: auto; - margin-right: auto; - max-width: 90vw; - max-height: 300px; - width: auto; - height: auto; - margin-bottom: 2em; -} -@media screen and (max-width: 500px) { - #cp-loading { - font-size: 16px !important; - } - #cp-loading .cp-loading-container { - height: 206px; - } -} -@media screen and (max-height: 700px) { - #cp-loading { - font-size: 16px !important; - } - #cp-loading .cp-loading-container { - height: 206px; - } -} -@media screen and (max-height: 500px) { - #cp-loading .cp-loading-logo { - display: none; - } -} -#cp-loading-message { - background: #FFF; - padding: 20px; - width: 100%; - color: #3F4141; - text-align: left; - display: none; -} - -#cp-loading-password-prompt p.cp-password-error { - color: white; - background: #9e0000; - padding: 5px; - margin-bottom: 15px; -} -#cp-loading-password-prompt .cp-password-info { - text-align: left; - margin-bottom: 15px; -} -#cp-loading-burn-after-reading .cp-password-info { - margin-bottom: 15px; -} - -p.cp-password-info{ - text-align: left; -} -#cp-loading-password-prompt .cp-password-form { - display: flex; - flex-wrap: wrap; -} -#cp-loading-password-prompt .cp-password-form button{ - background-color: #4591c4; - color: white; - border: 1px solid #4591c4; -} - -.cp-password-input{ - font-size:16px; - border: 1px solid #4591c4; - background-color: white; - border-radius 0; -} - -.cp-password-form button{ - padding: 8px 12px; - font-weight: bold; - text-transform: uppercase; -} - -#cp-loading-password-prompt .cp-password-form{ - width: 100%; -} - -#cp-loading-password-prompt .cp-password-form .cp-password-container { - flex-shrink: 1; - min-width: 0; -} - -#cp-loading-password-prompt .cp-password-form .cp-password-container .cp-password-reveal{ - color: #4591c4; - padding: 0px 24px; -} - -#cp-loading-password-prompt .cp-password-form input { - flex: 1; - padding: 12px; - min-width: 0; - text-overflow: ellipsis; -} -#cp-loading-password-prompt .cp-password-form button:hover { - background-color: #326599; -} -#cp-loading-password-prompt ::placeholder { - color: #999999; - opacity: 1; -} -#cp-loading-password-prompt :-ms-input-placeholder { - color: #d9d9d9; -} -#cp-loading-password-prompt ::-ms-input-placeholder { - color: #d9d9d9; -} -#cp-loading .cp-loading-spinner-container { - position: relative; - height: 80px; - margin-bottom: 50px; -} -.cp-loading-progress { - width: 100%; - text-align: center; -} -.cp-loading-progress p { - margin: 5px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} -.cp-loading-progress-list { - text-align: left; - display: inline-block; - margin-bottom: 50px; - max-width: 100%; -} -.cp-loading-progress-list ul { - list-style: none; - padding-left: 0; - margin: 0; -} -.cp-loading-progress-list li { - padding: 0px 5px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.cp-loading-progress-list li i { - width: 22px; -} -.cp-loading-progress-list li span{ - margin-left: 10px; -} -.cp-loading-progress-list li span.percent { - position: absolute; -} - -.cp-loading-progress-bar { - height: 24px; - background: white; - border: 1px solid #0087FF; -} -.cp-loading-progress-bar-value { - height: 100%; - background: #0087FF; -} - -@keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(1800deg); - } -} - -.cp-spinner { - display: inline-block; - box-sizing: border-box; - width: 80px; - height: 80px; - border: 11px solid #999999; - border-radius: 50%; - border-top-color: transparent; - animation: spin infinite 3s; - animation-timing-function: cubic-bezier(.6,0.15,0.4,0.85); -} - -button:not(.btn).primary{ - border: 1px solid #4591c4; - padding: 8px 12px; - text-transform: uppercase; - background-color: #4591c4; - color: white; - font-weight: bold; -} - -button:not(.btn).primary:hover{ - background-color: rgb(52, 118, 162); -} - -*/}).toString().slice(14, -3); +define([ + '/customize/messages.js', + 'less!/customize/src/less2/include/loading.less' +], function (Messages) { var urlArgs = window.location.href.replace(/^.*\?([^\?]*)$/, function (all, x) { return x; }); var elem = document.createElement('div'); elem.setAttribute('id', 'cp-loading'); elem.innerHTML = [ - '', '', diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 2982ed374..aec174310 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -131,13 +131,23 @@ @cryptpad_color_light_blue: #00b7d8; @cryptpad_color_lighter_blue: #d2e1f2; @cryptpad_color_warn_red: #eb675e; +@cryptpad_color_dark_red: #9e0000; @cryptpad_color_black: #000; @cryptpad_color_white: #FFF; @cryptpad_color_green: #5cb85c; @cryptpad_color_link: #0275D8; +// Loading screen @cp_loading-bg: #E7E7E7; +@cp_loading-fg: @cryptpad_text_col; +@cp_loading-msg-bg: @cryptpad_color_white; +@cp_loading-error-bg: @cryptpad_color_dark_red; +@cp_loading-error-fg: @cryptpad_color_white; +@cp_loading-progress-bg: @cryptpad_color_white; +@cp_loading-progress-bar-bg: @colortheme_logo-2; +@cp_loading-spinner: @cryptpad_color_dark_grey; + // Alertify @cp_alertify-bg: @cryptpad_color_white; diff --git a/www/common/LessLoader.js b/www/common/LessLoader.js index 796004429..9ad5e8cc5 100644 --- a/www/common/LessLoader.js +++ b/www/common/LessLoader.js @@ -95,7 +95,7 @@ define([ var COLORTHEME = '/customize/src/less2/include/colortheme.less'; var COLORTHEME_DARK = '/customize/src/less2/include/colortheme-dark.less'; - //COLORTHEME_DARK = '/customize/src/less2/include/colortheme.less'; // XXX + COLORTHEME_DARK = '/customize/src/less2/include/colortheme.less'; // XXX var getColortheme = function () { return window.CryptPad_theme; }; diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index f1d8ae78c..924cf84fa 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -2546,7 +2546,7 @@ define([ var info = h('p.cp-password-info', Messages.password_info); var password = UI.passwordInput({placeholder: Messages.password_placeholder}); var $password = $(password); - var button = h('button', Messages.password_submit); + var button = h('button.btn.btn-primary', Messages.password_submit); cfg = cfg || {}; if (cfg.value && !isError) { @@ -2587,7 +2587,7 @@ define([ UIElements.displayBurnAfterReadingPage = function (common, cb) { var info = h('p.cp-password-info', Messages.burnAfterReading_warningAccess); - var button = h('button.primary', Messages.burnAfterReading_proceed); + var button = h('button.btn.primary', Messages.burnAfterReading_proceed); $(button).on('click', function () { cb(); From bf50d805197ebd28ef7f91c3df98d66d1512ff9d Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 26 Jan 2021 12:18:08 +0100 Subject: [PATCH 07/97] Add LESS file --- customize.dist/src/less2/include/loading.less | 209 ++++++++++++++++++ 1 file changed, 209 insertions(+) create mode 100644 customize.dist/src/less2/include/loading.less diff --git a/customize.dist/src/less2/include/loading.less b/customize.dist/src/less2/include/loading.less new file mode 100644 index 000000000..0c0cf5a1c --- /dev/null +++ b/customize.dist/src/less2/include/loading.less @@ -0,0 +1,209 @@ +@import (reference) "./colortheme-all.less"; +@import (reference) "./password-input.less"; +@import (reference) "./forms.less"; +@import (reference) "./tools.less"; + +#cp-loading { + @font-face { + font-family: 'Open Sans'; + src: url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.eot'); + src: url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.eot?#iefix') format('embedded-opentype'), + url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.woff') format('woff'), + url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.ttf') format('truetype'), + url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.svg#OpenSansRegular') format('svg'); + font-weight: normal; + font-style: normal; + } + + .password_main(); + .forms_main(); + visibility: visible; + position: fixed; + z-index: 10000000; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + background-color: @cp_loading-bg; + color: @cp_loading-fg; + font-size: 1.3em; + line-height: 120%; + opacity: 1; + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + font: 20px 'Open Sans', 'Helvetica Neue', sans-serif !important; + &.cp-loading-transparent { + background-color: fade(@cp_loading-bg, 70%); + } + &.cp-loading-hidden { + opacity: 0; + visibility: hidden; + transition: opacity 0.75s, visibility 0s 0.75s; + } + .cp-loading-logo { + height: 300px; + width: 300px; + margin-top: 50px; + flex: 0 1 auto; + min-height: 0; + text-align: center; + } + .cp-loading-logo img { + max-width: 100%; + max-height: 100%; + } + .cp-loading-container { + width: 700px; + max-width: 90vw; + height: 236px; + max-height: calc(100vh - 20px); + margin: 50px; + flex-shrink: 0; + display: flex; + flex-flow: column; + align-items: center; + } + .cp-loading-cryptofist { + margin-left: auto; + margin-right: auto; + max-width: 90vw; + max-height: 300px; + width: auto; + height: auto; + margin-bottom: 2em; + } + + @media screen and (max-width: 500px) { + font-size: 16px !important; + .cp-loading-container { + height: 206px; + } + } + @media screen and (max-height: 700px) { + font-size: 16px !important; + .cp-loading-container { + height: 206px; + } + } + @media screen and (max-height: 500px) { + .cp-loading-logo { + display: none; + } + } + #cp-loading-message { + background: @cp_loading-msg-bg; + padding: 20px; + width: 100%; + color: @cp_loading-fg; + text-align: left; + display: none; + } + + #cp-loading-password-prompt { + p.cp-password-error { + color: @cp_loading-error-fg; + background: @cp_loading-error-bg; + padding: 5px; + margin-bottom: 15px; + } + .cp-password-form { + display: flex; + flex-wrap: wrap; + width: 100%; + .cp-password-container { + flex-shrink: 1; + min-width: 0; + } + .cp-password-reveal{ + padding: 0px 24px; + } + } + .cp-password-input { + font-size:16px; + } + .tools_placeholder-color(); + } + + p.cp-password-info { + text-align: left; + margin-bottom: 15px; + } + + .cp-loading-spinner-container { + position: relative; + height: 80px; + margin-bottom: 50px; + } + .cp-loading-progress { + width: 100%; + text-align: center; + p { + margin: 5px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + .cp-loading-progress-list { + text-align: left; + display: inline-block; + margin-bottom: 50px; + max-width: 100%; + ul { + list-style: none; + padding-left: 0; + margin: 0; + } + li { + padding: 0px 5px; + .tools_unselectable(); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + i { + width: 22px; + } + span{ + margin-left: 10px; + &.percent { + position: absolute; + } + } + } + } + + .cp-loading-progress-bar { + height: 24px; + background: @cp_loading-progress-bg; + border: 1px solid @cp_loading-progress-bar-bg; + } + .cp-loading-progress-bar-value { + height: 100%; + background: @cp_loading-progress-bar-bg; + } + + } + + @keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(1800deg); + } + } + + .cp-spinner { + display: inline-block; + box-sizing: border-box; + width: 80px; + height: 80px; + border: 11px solid @cp_loading-spinner; + border-radius: 50%; + border-top-color: transparent; + animation: spin infinite 3s; + animation-timing-function: cubic-bezier(.6,0.15,0.4,0.85); + } + +} From 123ea9b390f7709adf26449b455cc3115066c8ce Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 26 Jan 2021 12:34:42 +0100 Subject: [PATCH 08/97] Add tokenfield --- .../src/less2/include/colortheme.less | 6 ++++++ .../src/less2/include/tokenfield.less | 20 ++++--------------- 2 files changed, 10 insertions(+), 16 deletions(-) diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index aec174310..1be721c66 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -311,6 +311,12 @@ @cp_history-bg2: #BBB; @cp_history-fg: @cp_toolbar-bottom-fg; +// Tokenfield +@cp_token-bg: @cryptpad_color_lighter_grey; +@cp_token-fg: @cryptpad_text_col; +@cp_token-bg-hover: @cryptpad_color_light_grey; +@cp_token-invalid: @cryptpad_color_warn_red; + // Usergrid @cp_usergrid-fg: @cryptpad_text_col; @cp_usergrid-selected-bg: @colortheme_logo-2; diff --git a/customize.dist/src/less2/include/tokenfield.less b/customize.dist/src/less2/include/tokenfield.less index e3d2c3e5d..5b78414b3 100644 --- a/customize.dist/src/less2/include/tokenfield.less +++ b/customize.dist/src/less2/include/tokenfield.less @@ -40,28 +40,23 @@ box-sizing: border-box; display: inline-flex; align-items: center; - background-color: rgba(0, 0, 0, 0.1); + background-color: @cp_token-bg; white-space: nowrap; margin: 2px 0; margin-right: 5px; height: 24px; vertical-align: middle; cursor: default; - color: @cryptpad_text_col; + color: @cp_token-fg; &:hover { - background-color: rgba(0, 0, 0, 0.2); + background-color: @cp_token-bg-hover; } &.invalid { background: none; border: 1px solid transparent; border-radius: 0; - border-bottom: 1px dotted #d9534f; - } - &.invalid.active { - background: #ededed; - border: 1px solid #ededed; - border-radius: 3px; + border-bottom: 1px dotted @cp_token-invalid; } .token-label { display: inline-block; @@ -82,15 +77,8 @@ vertical-align: middle; padding-right: 4px; } - &.active { - border-color: rgba(82, 168, 236, 0.8); - } - &.duplicate { - border-color: #ebccd1; - } } .token-input { - background: none; flex: 1; border: 0; padding: 0; From 40c2a6541ff4d95de015d2b392ff086b18e63cef Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 26 Jan 2021 12:35:00 +0100 Subject: [PATCH 09/97] Reenable dark theme --- www/common/LessLoader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/common/LessLoader.js b/www/common/LessLoader.js index 9ad5e8cc5..796004429 100644 --- a/www/common/LessLoader.js +++ b/www/common/LessLoader.js @@ -95,7 +95,7 @@ define([ var COLORTHEME = '/customize/src/less2/include/colortheme.less'; var COLORTHEME_DARK = '/customize/src/less2/include/colortheme-dark.less'; - COLORTHEME_DARK = '/customize/src/less2/include/colortheme.less'; // XXX + //COLORTHEME_DARK = '/customize/src/less2/include/colortheme.less'; // XXX var getColortheme = function () { return window.CryptPad_theme; }; From 89455eeb97f49c5f0a4b35dcf78d23f0c44f5747 Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 26 Jan 2021 12:37:31 +0100 Subject: [PATCH 10/97] Fix dark theme --- .../src/less2/include/colortheme-dark.less | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index d7615072a..8efc73d6f 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -131,12 +131,21 @@ @cryptpad_color_light_blue: #FFF-#00b7d8; @cryptpad_color_lighter_blue: #FFF-#d2e1f2; @cryptpad_color_warn_red: #FFF-#eb675e; +@cryptpad_color_dark_red: #9e0000; @cryptpad_color_black: #FFF-#000; @cryptpad_color_white: #FFF-#FFF; @cryptpad_color_link: #FFF-#0275D8; +// Loading screen @cp_loading-bg: #FFF-#E7E7E7; +@cp_loading-fg: @cryptpad_text_col; +@cp_loading-msg-bg: @cryptpad_color_white; +@cp_loading-error-bg: @cryptpad_color_dark_red; +@cp_loading-error-fg: @cryptpad_color_white; +@cp_loading-progress-bg: @cryptpad_color_white; +@cp_loading-progress-bar-bg: @colortheme_logo-2; +@cp_loading-spinner: @cryptpad_color_dark_grey; // Alertify @cp_alertify-bg: @cryptpad_color_white; @@ -300,6 +309,12 @@ @cp_history-bg2: #BBB; @cp_history-fg: @cp_toolbar-bottom-fg; +// Tokenfield +@cp_token-bg: @cryptpad_color_lighter_grey; +@cp_token-fg: @cryptpad_text_col; +@cp_token-bg-hover: @cryptpad_color_light_grey; +@cp_token-invalid: @cryptpad_color_warn_red; + // Usergrid @cp_usergrid-fg: @cryptpad_text_col; @cp_usergrid-selected-bg: @colortheme_logo-2; From 44889a291dc03789d81a9fcb1f3c8195ca605379 Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 26 Jan 2021 15:26:46 +0100 Subject: [PATCH 11/97] Fix messenger colors --- .../src/less2/include/colortheme.less | 7 ++ .../src/less2/include/framework.less | 2 +- .../src/less2/include/messenger.less | 117 +++++------------- .../src/less2/include/notifications.less | 2 +- customize.dist/src/less2/include/toolbar.less | 4 +- www/contacts/app-contacts.less | 4 +- www/teams/app-team.less | 4 +- 7 files changed, 50 insertions(+), 90 deletions(-) diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 1be721c66..ff76b03ee 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -134,6 +134,7 @@ @cryptpad_color_dark_red: #9e0000; @cryptpad_color_black: #000; @cryptpad_color_white: #FFF; +@cryptpad_color_light_green: #c5ffa8; @cryptpad_color_green: #5cb85c; @cryptpad_color_link: #0275D8; @@ -148,6 +149,12 @@ @cp_loading-progress-bar-bg: @colortheme_logo-2; @cp_loading-spinner: @cryptpad_color_dark_grey; +// Chat +@cp_messenger-bg: @cryptpad_color_neutral2_grey; +@cp_messenger-fg: @cryptpad_text_col; +@cp_messenger-notif: @cryptpad_color_black; +@cp_messenger-friend: @cryptpad_color_black; +@cp_messenger-online: @cryptpad_color_light_green; // Alertify @cp_alertify-bg: @cryptpad_color_white; diff --git a/customize.dist/src/less2/include/framework.less b/customize.dist/src/less2/include/framework.less index da379a164..3d5ed36a6 100644 --- a/customize.dist/src/less2/include/framework.less +++ b/customize.dist/src/less2/include/framework.less @@ -44,7 +44,7 @@ .checkmark_main(20px); .password_main(); .messenger_main( - @bg-color: @colortheme_pad-chat-bg + @bg-color: @cp_messenger-bg ); .cursor_main(); .usergrid_main(); diff --git a/customize.dist/src/less2/include/messenger.less b/customize.dist/src/less2/include/messenger.less index 4a05af91c..c79659869 100644 --- a/customize.dist/src/less2/include/messenger.less +++ b/customize.dist/src/less2/include/messenger.less @@ -2,17 +2,20 @@ @import (reference) "./colortheme-all.less"; .messenger_vars ( - @bg-color: @colortheme_static_apps[contacts], // color of the toolbar background + @bg-color: @cp_messenger-bg, ) { @msg-color: @cryptpad_text_col; + @msg-color-hover: contrast(@msg-color, lighten(@msg-color, 10%), darken(@msg-color, 10%)); @msg-bg-color: @bg-color; - @msg-bg-color-light: lighten(@bg-color, 15%); - @msg-bg-color-lighter: lighten(@bg-color, 20%); - @msg-bg-color-dark: darken(@bg-color, 10%); - @msg-bg-color-darker: darken(@bg-color, 20%); + @invert: #FFF-@bg-color; + // XXX Adjust chat colors + @msg-bg-color-light: contrast(@invert, lighten(@bg-color, 5%), darken(@bg-color, 5%)); + @msg-bg-color-lighter: contrast(@invert, lighten(@bg-color, 10%), darken(@bg-color, 10%)); + @msg-bg-color-dark: contrast(@bg-color, lighten(@bg-color, 5%), darken(@bg-color, 5%)); + @msg-bg-color-darker: contrast(@bg-color, lighten(@bg-color, 10%), darken(@bg-color, 10%)); }; .messenger_main( - @bg-color: @colortheme_static_apps[contacts], // color of the toolbar background + @bg-color: @cp_messenger-bg, ) { --LessLoader_require: LessLoader_currentFile(); .messenger_vars(@bg-color); @@ -26,13 +29,13 @@ & { @keyframes notif { 0% { - background: rgba(0,0,0,0.1); + background: fade(@cp_messenger-notif, 10%); } 50% { - background: rgba(0,0,0,0.3); + background: fade(@cp_messenger-notif, 30%); } 100% { - background: rgba(0,0,0,0.1); + background: fade(@cp_messenger-notif, 10%); } } @@ -58,7 +61,7 @@ .cp-app-contacts-initializing { .cp-app-contacts-spinner { - color: white; + color: @cp_messenger-fg; display: block; } .cp-app-contacts-info { @@ -77,11 +80,14 @@ height: 100%; background-color: @msg-bg-color; background-color: var(--msg-bg-color); + color: @msg-color; + color: var(--msg-color); overflow-y: auto; display: flex; flex-flow: column; .cp-app-contacts-friend { - background: rgba(0,0,0,0.1); + background-color: @msg-bg-color-dark; + background-color: var(--msg-bg-color-dark); padding: 5px; margin: 10px; margin-bottom: 0; @@ -94,16 +100,19 @@ flex-flow: column; flex: 1; min-width: 0; - color: @colortheme_base; .cp-app-contacts-name { white-space: nowrap; } .cp-app-contacts-icons { text-align: right; + & > span:hover { + color: @msg-color-hover; + } } } &:hover { - background-color: rgba(0,0,0,0.3); + background-color: @msg-bg-color-darker; + background-color: var(--msg-bg-color-darker); } &.cp-app-contacts-notify { animation: notif 2s ease-in-out infinite; @@ -114,7 +123,7 @@ width: 20px; text-align: center; &:hover { - color: @cryptpad_text_col; + color: @msg-color-hover; } } @@ -128,7 +137,8 @@ font-size: 18px; margin: 0px 5px; text-align: center; - background: rgba(0,0,0,0.1); + background-color: @msg-bg-color-dark; + background-color: var(--msg-bg-color-dark); font-weight: bold; height: 22px; line-height: 22px; @@ -172,28 +182,6 @@ #cp-app-contacts-container.cp-app-contacts-inapp { #cp-app-contacts-friendlist { display: none; -/* - transition: width 0.2s ease-in-out 0.2s; - width: 68px; - .cp-app-contacts-friend { - .cp-app-contacts-right-col { - overflow: hidden; - } - } - .cp-app-contacts-category-title { - transition: font-size 0.2s ease-in-out 0.2s; - margin: 0px 2px; - font-size: 16px; - } - &:hover { - transition-delay: 1.5s; - width: 200px !important; - .cp-app-contacts-category-title { - transition-delay: 1.5s; - font-size: 18px; - } - } -*/ } } @@ -216,21 +204,8 @@ margin: 4px; } .cp-app-contacts-status { - //width: 5px; display: inline-block; position: absolute; - //right: 0; - //top: 0; - //bottom: 0; - //opacity: 0.7; - //background-color: #777; - -/* width: (@room-height - 6px); - top: 3px; - bottom: 3px; - left: 3px; - border-radius: 100%; -*/ width: 10px; height: 10px; top: 0; @@ -238,42 +213,19 @@ border-bottom-left-radius: 100%; &.cp-app-contacts-online { - //background-color: green; - //background-color: white; - background-color: #c5ffa8; + background-color: @cp_messenger-online; } &.cp-app-contacts-offline { display: none; - //background-color: red; } } } - .placeholder (@color: #bbb) { - &::-webkit-input-placeholder { /* WebKit, Blink, Edge */ - color: @color; - } - &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ - color: @color; - opacity: 1; - } - &::-moz-placeholder { /* Mozilla Firefox 19+ */ - color: @color; - opacity: 1; - } - &:-ms-input-placeholder { /* Internet Explorer 10-11 */ - color: @color; - } - &::-ms-input-placeholder { /* Microsoft Edge */ - color: @color; - } - } - #cp-app-contacts-messaging { flex: 1; height: 100%; - background-color: @msg-bg-color-lighter; - background-color: var(--msg-bg-color-lighter); + background-color: @msg-bg-color-light; + background-color: var(--msg-bg-color-light); min-width: 0; .cp-app-contacts-info { @@ -409,23 +361,20 @@ border: none; height: 54px; // 2 lines (22px height) + 2 margins (5px) flex: 1; - background-color: white; - color: @cryptpad_text_col; - //background-color: @msg-bg-color-dark; - //background-color: var(--msg-bg-color-dark); - //color: @msg-color; + background-color: @cp_forms-bg; + color: @cp_forms-fg; resize: none; overflow-y: auto; - .placeholder(#999); + .tools_placeholder-color(); &[disabled="true"] { - .placeholder(#666); + .tools_placeholder-color(); } } button { height: 54px !important; border-radius: 0; border: none; - color: #eee; + color: @cp_messenger-fg; background-color: @msg-bg-color-darker; background-color: var(--msg-bg-color-darker); &:hover { diff --git a/customize.dist/src/less2/include/notifications.less b/customize.dist/src/less2/include/notifications.less index 54f866654..46209eb6a 100644 --- a/customize.dist/src/less2/include/notifications.less +++ b/customize.dist/src/less2/include/notifications.less @@ -40,7 +40,7 @@ } } .cp-notification-dismiss { - color: black; + color: @cp_dropdown-fg; width: 25px; display: flex; align-items: center; diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index 1951aa940..86df76523 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -762,7 +762,7 @@ } } .cp-notifications-empty { - color: black; + color: @cp_dropdown-fg; padding: 5px; } button { @@ -1073,7 +1073,7 @@ display: flex; flex-flow: column; z-index: 10000; //Z cp-toolbar-drawer-content - color: black; + color: @cp_dropdown-fg; .tools_unselectable(); .fa { font-size: 17px; diff --git a/www/contacts/app-contacts.less b/www/contacts/app-contacts.less index ba45c962c..4cf263f60 100644 --- a/www/contacts/app-contacts.less +++ b/www/contacts/app-contacts.less @@ -27,6 +27,8 @@ } } - .messenger_main(); + .messenger_main( + @bg-color: @cp_messenger-bg; + ); } diff --git a/www/teams/app-team.less b/www/teams/app-team.less index ee170ffbe..eb187369b 100644 --- a/www/teams/app-team.less +++ b/www/teams/app-team.less @@ -13,7 +13,9 @@ ); .drive_main(); - .messenger_main(); + .messenger_main( + @bg-color: @colortheme_pad-chat-bg + ); .sidebar-layout_main(); @roster-bg-color: #efefef; From 32103d13d7ce44330fc92db0ebe4d9293d0815c5 Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 26 Jan 2021 15:37:45 +0100 Subject: [PATCH 12/97] Fix support colors --- customize.dist/src/less2/include/colortheme-dark.less | 10 ++++++++++ customize.dist/src/less2/include/colortheme.less | 1 + customize.dist/src/less2/include/support.less | 1 + customize.dist/src/less2/include/toolbar.less | 4 ++-- 4 files changed, 14 insertions(+), 2 deletions(-) diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index 8efc73d6f..286b8f68d 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -134,6 +134,8 @@ @cryptpad_color_dark_red: #9e0000; @cryptpad_color_black: #FFF-#000; @cryptpad_color_white: #FFF-#FFF; +@cryptpad_color_light_green: #c5ffa8; +@cryptpad_color_green: #5cb85c; @cryptpad_color_link: #FFF-#0275D8; @@ -147,6 +149,13 @@ @cp_loading-progress-bar-bg: @colortheme_logo-2; @cp_loading-spinner: @cryptpad_color_dark_grey; +// Chat +@cp_messenger-bg: @cryptpad_color_neutral2_grey; +@cp_messenger-fg: @cryptpad_text_col; +@cp_messenger-notif: @cryptpad_color_black; +@cp_messenger-friend: @cryptpad_color_black; +@cp_messenger-online: @cryptpad_color_light_green; + // Alertify @cp_alertify-bg: @cryptpad_color_white; @cp_alertify-fg: @colortheme_logo-2; @@ -292,6 +301,7 @@ // Support @cp_support-bg: @cryptpad_color_lighter_grey; +@cp_support-msg-fg: @cryptpad_text_col; @cp_support-msg-bg: @cryptpad_color_grey; @cp_support-header-bg: @cryptpad_color_help_grey; diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index ff76b03ee..4f38333b8 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -301,6 +301,7 @@ // Support @cp_support-bg: @cryptpad_color_lighter_grey; +@cp_support-msg-fg: @cryptpad_text_col; @cp_support-msg-bg: @cryptpad_color_grey; @cp_support-header-bg: @cryptpad_color_help_grey; diff --git a/customize.dist/src/less2/include/support.less b/customize.dist/src/less2/include/support.less index 2c06a7c4d..05dac86b8 100644 --- a/customize.dist/src/less2/include/support.less +++ b/customize.dist/src/less2/include/support.less @@ -58,6 +58,7 @@ float: right; } pre { + color: @cp_support-msg-fg; margin-bottom: 0; white-space: pre-wrap; &.cp-support-message-content { diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index 86df76523..ec6178973 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -15,8 +15,8 @@ @bg-color: @colortheme_apps[default], // color of the toolbar background ) { @toolbar-bg-color: @bg-color; - @toolbar-bg-color-light: lighten(@bg-color, 30%); - @toolbar-bg-color-active: lighten(@bg-color, 20%); + @toolbar-bg-color-light: contrast(@cp_toolbar-fg, lighten(@bg-color, 30%), darken(@bg-color, 30%)); + @toolbar-bg-color-active: contrast(@cp_toolbar-fg, lighten(@bg-color, 20%), darken(@bg-color, 20%)); }; .toolbar_main ( From ead767658fc3bc6beca815d58c4c049b69f8096f Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 26 Jan 2021 15:57:25 +0100 Subject: [PATCH 13/97] Fix race condition --- www/common/loading.js | 15 +++++++++++++++ www/common/sframe-boot2.js | 10 ---------- www/common/sframe-common-outer.js | 3 +++ 3 files changed, 18 insertions(+), 10 deletions(-) diff --git a/www/common/loading.js b/www/common/loading.js index 9394c6ae3..98003daba 100644 --- a/www/common/loading.js +++ b/www/common/loading.js @@ -1,3 +1,18 @@ +(function () { +try { + var req = JSON.parse(decodeURIComponent(window.location.hash.substring(1))); + var theme = req.theme; + var os = req.themeOS; + window.CryptPad_theme = theme || os; + if ((theme || os) === 'dark') { + var s = document.createElement('style'); + s.innerHTML = 'body { background: black; }'; + document.body.appendChild(s); + } + console.error(theme, os); +} catch (e) { console.error(e); } +})(); + require(['/customize/loading.js'], function (Loading) { Loading(); }); diff --git a/www/common/sframe-boot2.js b/www/common/sframe-boot2.js index 828c244a8..66a93545f 100644 --- a/www/common/sframe-boot2.js +++ b/www/common/sframe-boot2.js @@ -1,13 +1,3 @@ -(function () { -try { - if (!window.cryptpadStore) { return; } - var theme = window.cryptpadStore.store['colortheme']; - var os = window.cryptpadStore.store['colortheme_default']; - window.CryptPad_theme = theme || os; - console.error(theme, os); -} catch (e) { console.error(e); } -})(); - // This is stage 1, it can be changed but you must bump the version of the project. // Note: This must only be loaded from inside of a sandbox-iframe. define([ diff --git a/www/common/sframe-common-outer.js b/www/common/sframe-common-outer.js index 80bce6cc2..b3540c7e6 100644 --- a/www/common/sframe-common-outer.js +++ b/www/common/sframe-common-outer.js @@ -11,10 +11,13 @@ define([ common.initIframe = function (waitFor, isRt, pathname) { var requireConfig = RequireConfig(); var lang = Messages._languageUsed; + var themeKey = 'CRYPTPAD_STORE|colortheme'; var req = { cfg: requireConfig, req: [ '/common/loading.js' ], pfx: window.location.origin, + theme: localStorage[themeKey], + themeOS: localStorage[themeKey+'_default'], lang: lang }; window.rc = requireConfig; From 3084cf7129dcb07513163eae259d43865a18bc42 Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 26 Jan 2021 16:00:24 +0100 Subject: [PATCH 14/97] Dark background in boot2 --- www/common/boot2.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/www/common/boot2.js b/www/common/boot2.js index 8ed428cbb..24a853251 100644 --- a/www/common/boot2.js +++ b/www/common/boot2.js @@ -22,6 +22,11 @@ try { localStorage[key+'_default'] = os; } } + if (window.CryptPad_theme === 'dark') { + var s = document.createElement('style'); + s.innerHTML = 'body { background: black; }'; + document.body.appendChild(s); + } //localStorage[key] = theme; // If the wrong theme is built, flush it /* XXX flush cache when change From e25b87534e47c7c939b4bbbb9857ff0e1af31d94 Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 26 Jan 2021 16:05:27 +0100 Subject: [PATCH 15/97] Fix LESS cache --- www/common/LessLoader.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/www/common/LessLoader.js b/www/common/LessLoader.js index 796004429..db7a4688a 100644 --- a/www/common/LessLoader.js +++ b/www/common/LessLoader.js @@ -121,19 +121,20 @@ define([ lessEngine.FileManager.prototype.doXHR = function (url, type, callback, errback) { console.error(url, COLORTHEME); // XXX var col = false; + var _url = url; if (url === COLORTHEME) { col = true; url = getColorthemeURL(); console.warn(url); } url = fixURL(url); - var cached = tempCache[url]; + var cached = tempCache[_url]; if (cached && cached.res) { var res = cached.res; return void setTimeout(function () { callback(res[0], res[1]); }); } if (cached) { return void cached.queue.push(callback); } - cached = tempCache[url] = { queue: [ callback ], res: undefined }; + cached = tempCache[_url] = { queue: [ callback ], res: undefined }; return doXHR(url, type, function (text, lastModified) { if (col) { console.warn(text, lastModified); From d372c64c62c2a4c64faed25d94005fceb62358c6 Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 26 Jan 2021 16:57:31 +0100 Subject: [PATCH 16/97] Fix race condition against Firefox... --- www/settings/inner.js | 1 + 1 file changed, 1 insertion(+) diff --git a/www/settings/inner.js b/www/settings/inner.js index 45bc91ce4..e913d8f9b 100644 --- a/www/settings/inner.js +++ b/www/settings/inner.js @@ -458,6 +458,7 @@ define([ } if (val === 'default') { val = ''; } + window.location.hash = ''; // XXX This is a hack to fix Firefox trying to be smart sframeChan.query('Q_COLORTHEME_CHANGE', { theme: val, flush: flush From 89406f5d89b27cb477a8f15d85678d81dabb1866 Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 26 Jan 2021 17:09:10 +0100 Subject: [PATCH 17/97] Start with black background when OS is set to dark theme --- customize.dist/src/outer.css | 5 +++++ www/admin/index.html | 2 +- www/code/index.html | 2 +- www/contacts/index.html | 2 +- www/debug/index.html | 2 +- www/drive/index.html | 2 +- www/file/index.html | 2 +- www/kanban/index.html | 2 +- www/notifications/index.html | 2 +- www/oodoc/index.html | 2 +- www/ooslide/index.html | 2 +- www/pad/index.html | 2 +- www/poll/index.html | 2 +- www/profile/index.html | 2 +- www/settings/index.html | 2 +- www/sheet/index.html | 2 +- www/slide/index.html | 2 +- www/support/index.html | 2 +- www/teams/index.html | 2 +- www/todo/index.html | 2 +- www/whiteboard/index.html | 2 +- 21 files changed, 25 insertions(+), 20 deletions(-) diff --git a/customize.dist/src/outer.css b/customize.dist/src/outer.css index 75f449e61..ba35bf168 100644 --- a/customize.dist/src/outer.css +++ b/customize.dist/src/outer.css @@ -2,6 +2,11 @@ html, body { margin: 0px; padding: 0px; } +@media (prefers-color-scheme: dark) { + html, body { + background: black; + } +} #sbox-iframe, #sbox-secure-iframe { position: fixed; top:0; left:0; diff --git a/www/admin/index.html b/www/admin/index.html index c59dd8edc..959d7b9e8 100644 --- a/www/admin/index.html +++ b/www/admin/index.html @@ -6,7 +6,7 @@ - + diff --git a/www/notifications/index.html b/www/notifications/index.html index 959d7b9e8..96a3cce86 100644 --- a/www/notifications/index.html +++ b/www/notifications/index.html @@ -6,7 +6,7 @@ - + -