diff --git a/customize.dist/ckeditor-contents.css b/customize.dist/ckeditor-contents.css index 0d5b5cff7..e78cef7da 100644 --- a/customize.dist/ckeditor-contents.css +++ b/customize.dist/ckeditor-contents.css @@ -3,6 +3,29 @@ Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.md or http://ckeditor.com/license */ +html { + scrollbar-color: rgba(0,0,0,0.2) transparent; + scrollbar-width: thin; +} +body::-webkit-scrollbar { + width: 6px; + background-color: #FFF !important; +} +body::-webkit-scrollbar-thumb { + width: 6px; + background-color: rgba(0,0,0,0.2) !important; +} +html.cp-dark { + scrollbar-color: rgba(255,255,255,0.2) transparent; +} +html.cp-dark ::-webkit-scrollbar { + background-color: #222 !important; /* should match the value un pad/inner.js */ +} +html.cp-dark ::-webkit-scrollbar-thumb { + background-color: rgba(255,255,255,0.2) !important; +} + + body { /* Font */ @@ -10,10 +33,10 @@ body font-size: 13px; /* Text color */ - color: #333; + color: inherit; /* Remove the background color to make it transparent */ - background-color: #fff; + background-color: inherit !important; margin: 0; padding: 20px; 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/pages/index.js b/customize.dist/pages/index.js index dc882ad32..d099640e4 100644 --- a/customize.dist/pages/index.js +++ b/customize.dist/pages/index.js @@ -73,9 +73,9 @@ define([ UI.addTooltips(); var blocks = [ - h('div.row.cp-index-section', [ + h('div.row.cp-page-section', [ h('div.col-sm-6', - h('img.img-fluid', { + h('img.img-fluid.cp-img-invert', { src:'/customize/images/shredder.png', alt:'', 'aria-hidden': 'true' @@ -86,17 +86,17 @@ define([ h('p', Msg.home_privacy_text) ]) ]), - h('div.row.cp-index-section', + h('div.row.cp-page-section', h('div.col-sm-12', [ h('h2', Msg.home_host_title), h('p'), Msg.home_host ]) ), - h('div.row.cp-index-section', [ + h('div.row.cp-page-section', [ h('div.col-sm-6', [ h('h2', Msg.home_opensource_title), Pages.setHTML(h('p'), Msg.home_opensource), - h('img.small-logo', { + h('img.small-logo.cp-img-invert', { src: '/customize/images/logo_AGPLv3.svg', alt: 'APGL3 License Logo' }) diff --git a/customize.dist/pages/what-is-cryptpad.js b/customize.dist/pages/what-is-cryptpad.js index a686476b3..c100782ce 100644 --- a/customize.dist/pages/what-is-cryptpad.js +++ b/customize.dist/pages/what-is-cryptpad.js @@ -20,7 +20,7 @@ define([ Pages.setHTML(h('span'), Msg.whatis_collaboration_info), ]), h('div.col-md-6', [ - h('img', { + h('img.cp-img-invert', { src: '/customize/images/collaboration.png?' + urlArgs, alt: '', 'aria-hidden': 'true' @@ -66,11 +66,11 @@ define([ }), ]), h('div.col-md-6.order-md-1.small-logos', [ - h('img', { + h('img.cp-img-invert', { src: '/customize/images/logo_ngi.png?' + urlArgs, alt: 'NGI Award 2019' }), - h('img', { + h('img.cp-img-invert', { src: '/customize/images/logo_nlnet.svg?' + urlArgs, alt: 'NLNet Foundation logo' }), diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index fd52420b0..2f95a637e 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; @@ -169,6 +157,10 @@ &:last-child { margin-bottom: 0; } + a { + color: @cryptpad_text_col; + text-decoration: underline; + } .cp-info-menu-container { .logo-block { text-align: center; @@ -181,10 +173,6 @@ max-width: 100px; } } - a { - color: @colortheme_logo-2; - text-decoration: underline; - } } } .cp-alertify-type-container { @@ -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,14 +196,12 @@ 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; + color: @cp_alertify-disable-border; cursor: not-allowed; } &:not(.alertify-tabs-active) { @@ -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; } @@ -485,36 +471,5 @@ overflow-x: auto; } } - // Bootstrap Alerts - .alert { - margin: 0px 0px @alertify_padding-base 0px; - font-size: 12px; - padding: 5px; - border-radius: 0px; - i { - margin-right: 10px; - } - &.cp-alert-top { - margin-top: @alertify_padding-base; - } - &.alert-primary { - background-color: @alertify-base; - color: @alertify-fg; - border-color: @alertify-fg; - a { - color: @alertify-fg; - text-decoration: underline; - } - } - &.dismissable { - display: flex; - align-items: center; - span.fa-times { - font-size: @colortheme_app-font-size; - margin-left: 20px; - cursor: pointer; - } - } - } } diff --git a/customize.dist/src/less2/include/app-noscroll.less b/customize.dist/src/less2/include/app-noscroll.less index fcd8f5d01..e30fa5f2d 100644 --- a/customize.dist/src/less2/include/app-noscroll.less +++ b/customize.dist/src/less2/include/app-noscroll.less @@ -1,8 +1,21 @@ +@import (reference) "./colortheme-all.less"; + .app-noscroll_main() { --LessLoader_require: LessLoader_currentFile(); } & { .cp-app-noscroll { + scrollbar-color: @scrollbar_color; + * { + scrollbar-width: thin; + } + ::-webkit-scrollbar { + width: 6px; + } + ::-webkit-scrollbar-thumb { + background-color: @cp_scrollbar-fg; + width: 6px; + } height: 100%; width: 100%; padding: 0px; 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..f638cb8cf 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 @@ -22,6 +23,14 @@ --checkmark-radio-size: @checkmark-radio-size; } & { + @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(); // Text .cp-checkmark { @@ -29,10 +38,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; @@ -41,40 +47,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,10 +97,10 @@ 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; + border: 1px solid @cp_checkmark-disabled; flex-shrink: 0; &:after { content: ""; @@ -106,14 +112,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 +138,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,30 +188,25 @@ 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; align-items: center; - border: 1px solid @colortheme_form-border; + border: 1px solid @cp_checkmark-disabled; flex-shrink: 0; &:after { 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-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..32059d4dc --- /dev/null +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -0,0 +1,427 @@ +@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_apps: { + default: #0087FF; + 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: #0087FF; + teams: #4A3BBD; + contacts: #607B8D; +} + +// Colors +@cryptpad_color_brand: #0087FF; +@cryptpad_color_brand_300: lighten(@cryptpad_color_brand, 30%); +@cryptpad_color_brand_fade: fade(@cryptpad_color_brand, 75%); +@cryptpad_color_brand_fader: fade(@cryptpad_color_brand, 50%); +@cryptpad_color_brand_fadest: fade(@cryptpad_color_brand, 25%); + +// XXX this whole block was copy-pasted from colortheme.less to avoid a reference error --ansuz +@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_white: #FFF; +@cryptpad_color_grey_50: #FAFAFA; +@cryptpad_color_grey_100: #F5F5F5; +@cryptpad_color_grey_200: #EEEEEE; +@cryptpad_color_grey_300: #E0E0E0; +@cryptpad_color_grey_400: #BDBDBD; +@cryptpad_color_grey_500: #9E9E9E; +@cryptpad_color_grey_600: #757575; +@cryptpad_color_grey_700: #616161; +@cryptpad_color_grey_800: #424242; +@cryptpad_color_grey_850: #323232; +@cryptpad_color_grey_900: #212121; +@cryptpad_color_grey_950: #121212; +@cryptpad_color_black: #000; + +@cryptpad_text_col: @cryptpad_color_grey_200; + +@cryptpad_color_blue: #326599; // former logo-1 +@cryptpad_color_light_blue: #00b7d8; +@cryptpad_color_red: #ff1100; +@cryptpad_color_red_fade: fade(@cryptpad_color_red, 50%); +@cryptpad_color_red_fader: fade(@cryptpad_color_red, 25%); +@cryptpad_color_warn_red: @cryptpad_color_red_fade; +@cryptpad_color_dark_red: #9e0000; +@cryptpad_color_light_red: #FFD4D4; +@cryptpad_color_light_red_fade: fade(@cryptpad_color_light_red, 20%); +@cryptpad_color_orange: #f49842; +@cryptpad_color_green: #5cb85c; +@cryptpad_color_green_fade: fade(@cryptpad_color_green, 50%); +@cryptpad_color_light_green: #c5ffa8; +@cryptpad_color_light_green_fade: fade(@cryptpad_color_light_green, 20%); +@cryptpad_color_light_yellow: #FFE69C; +@cryptpad_color_yellow_fade: fade(#FFE69C, 15%); +@cryptpad_color_lighter_blue: #d2e1f2; // XXX replace with @cryptpad_color_brand_fadest + +@cryptpad_color_link:@cryptpad_color_brand_300; + +// Premium plans colors +@cryptpad_color_basic: darken(desaturate(#DDEFFF, 70%), 75%); +@cryptpad_color_pro: darken(desaturate(#E4FFDD, 70%), 75%); +@cryptpad_color_power: darken(desaturate(#F6DDFF, 70%), 75%); + +@cp_scrollbar-fg: hsla(0,0%,100%,.2); +@scrollbar_color: @cp_scrollbar-fg transparent; + +// Loading screen +@cp_loading-bg: @cryptpad_color_grey_900; +@cp_loading-fg: @cryptpad_text_col; +@cp_loading-msg-bg: @cryptpad_color_grey_700; +@cp_loading-link: @cryptpad_color_brand_300; +@cp_loading-error-bg: @cryptpad_color_warn_red; +@cp_loading-error-fg: @cryptpad_text_col; +@cp_loading-progress-bg: @cryptpad_color_grey_800; +@cp_loading-progress-bar-bg: @cryptpad_color_brand; +@cp_loading-spinner: @cryptpad_color_grey_600; + +// Chat +@cp_messenger-bg: @cryptpad_color_grey_900; +@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_grey_800; +@cp_alertify-fg: lighten(@cryptpad_color_brand, 30%); +@cp_alertify-hover: fade(@cp_alertify-fg, 25%); +@cp_alertify-overlay: fade(@cryptpad_color_grey_900, 50%); +@cp_alertify-log-bg: fade(@cryptpad_color_brand_300, 90%); +@cp_alertify-log-fg: @cryptpad_color_grey_900; +@cp_alertify-warn-bg: rgba(205, 37, 50); +@cp_alertify-disable-border: @cryptpad_color_grey_600; + +// Forms +@cp_forms-fg: @cryptpad_text_col; +@cp_forms-bg: @cryptpad_color_grey_700; +@cp_forms-border: lighten(@cryptpad_color_brand, 30%); +@cp_forms-placeholder: fade(@cryptpad_text_col, 75%); +@cp_forms-readonly: @cryptpad_color_brand_fadest; +@cp_forms-readonly-border: @cryptpad_color_brand; +@cp_forms-disabled: @cryptpad_color_grey_500; + +// Bootstrap alerts +@cp_alerts-warning-bg: @cryptpad_color_yellow_fade; +@cp_alerts-warning-fg: @cryptpad_color_light_yellow; +@cp_alerts-warning-text: @cryptpad_color_light_yellow; +@cp_alerts-danger-bg: @cryptpad_color_red_fader; +@cp_alerts-danger-fg: @cryptpad_color_light_red; +@cp_alerts-danger-text: @cryptpad_color_light_red; +@cp_alerts-info-bg: @cryptpad_color_brand_fadest; +@cp_alerts-info-text: @cryptpad_color_brand_300; +@cp_alerts-info-fg: @cryptpad_color_brand_300; +@cp_alerts-success-bg: @cryptpad_color_light_green_fade; +@cp_alerts-success-fg: @cryptpad_color_green; +@cp_alerts-success-text: @cryptpad_color_light_green; + +// Buttons +@cp_buttons-fg: @cryptpad_color_brand_300; +@cp_buttons-hover: @cryptpad_color_brand_fadest; +@cp_buttons-default: @cryptpad_color_grey_700; +@cp_buttons-default-color: @cryptpad_text_col; +@cp_buttons-default-border: @cryptpad_text_col; +@cp_buttons-red: #E55236; +@cp_buttons-red-text: @cryptpad_color_light_red; +@cp_buttons-red-color: #FFF; +@cp_buttons-red-border: transparent; +@cp_buttons-primary: @cryptpad_color_brand; +@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: transparent; +@cp_buttons-cancel-border: @cryptpad_color_grey_400; + +// Sidebar layout +@cp_sidebar-left-bg: @cryptpad_color_grey_800; +@cp_sidebar-left-fg: @cryptpad_text_col; +@cp_sidebar-right-bg: @cryptpad_color_grey_900; +@cp_sidebar-right-fg: @cryptpad_text_col; // XXX was black +@cp_sidebar-left-active: @cp_sidebar-right-bg; +@cp_sidebar-hint: fade(@cryptpad_text_col, 80%); + +// Drive +@cp_drive-bg: @cp_sidebar-right-bg; +@cp_drive-fg: @cp_sidebar-right-fg; +@cp_drive-header-fg: fade(@cryptpad_text_col, 70%); +@cp_drive-icon-hover: fade(@cryptpad_text_col, 5%); +@cp_drive-icon-border: fade(@cryptpad_text_col, 20%); +@cp_drive-thumb-bg: transparent; +@cp_drive-selected-bg: fade(@cryptpad_text_col, 10%); +@cp_drive-selected-fg: @cryptpad_text_col; +@cp_drive-selection-overlay: fade(@cryptpad_text_col, 5%); +@cp_drive-selection-bg: @cryptpad_color_grey_800; +@cp_drive-selection-fg: @cryptpad_text_col; +@cp_drive-droppable-bg: @cryptpad_color_grey_700; +@cp_drive-droppable-fg: @cryptpad_text_col; +@cp_drive-infobox-bg: @cryptpad_color_brand_fadest; +@cp_drive-infobox-fg: @cryptpad_text_col; +@cp_drive-warnbox-bg: @cryptpad_color_warn_red; +@cp_drive-warnbox-fg: @cryptpad_text_col; +@cp_drive-tree-branch: @cryptpad_text_col; + +// Contextmenu +@cp_context-bg: @cryptpad_color_grey_800; +@cp_context-border: @cryptpad_color_grey_600; +@cp_context-bg-hover: @cryptpad_color_grey_700; +@cp_context-bg-active: @cryptpad_color_grey_600; +@cp_context-fg: @cryptpad_text_col; +@cp_context-icon: @cryptpad_text_col; +@cp_context-disabled: @cryptpad_color_grey_600; + +// Tooltip background +@cp_tooltip-bg: @cryptpad_color_grey_700; +@cp_tooltip-fg: @cryptpad_text_col; + +// Dropdown +@cp_dropdown-fg: @cryptpad_text_col; +@cp_dropdown-bg: @cryptpad_color_grey_800; +@cp_dropdown-bg-hover: @cryptpad_color_grey_700; +@cp_dropdown-bg-active: @cryptpad_color_grey_600; + +// Rendered Markdown +@cp_markdown-bg: @cryptpad_color_grey_900; +@cp_markdown-border: @cryptpad_color_grey_700; +@cp_markdown-contrast-fg: white; // XXX +@cp_markdown-contrast-bg: @cryptpad_color_grey; // XXX + +// Avatar +@cp_avatar-bg: @cryptpad_color_grey_700; +@cp_avatar-fg: @cryptpad_text_col; + +// Corner +@cp_corner-bg: @cryptpad_color_grey_800; +@cp_corner-fg: @cryptpad_color_brand_300; +@cp_corner-text: @cryptpad_text_col; + +// Pad Creation Screen +@cp_creation-bg: @cryptpad_color_grey_800; +@cp_creation-fg: @cryptpad_text_col; +@cp_creation-button-bg: @cryptpad_color_brand; +@cp_creation-button-fg: @cryptpad_color_white; +@cp_creation-error-bg: @cryptpad_color_blue; +@cp_creation-error-fg: @cryptpad_color_grey_100; // XXX + +// Export +@cp_export-bg: @cryptpad_color_grey_900; +@cp_export-fg: @cryptpad_text_col; +@cp_export-hint: fade(@cryptpad_text_col, 80%); +@cp_export-error-bg: @cryptpad_color_grey_800; +@cp_export-error-bg2: @cryptpad_color_red_fader; + +// File upload +@cp_upload-fg: @cryptpad_color_brand_300; +@cp_upload-header: @cryptpad_color_grey_700; +@cp_upload-progress: @cryptpad_color_grey_700; + +// Help +@cp_help-bg: @cryptpad_color_grey_800; +@cp_help-fg: @cryptpad_text_col; +@cp_help-link: @cryptpad_color_link; + +// Static pages +@cp_static-bg: @cryptpad_color_grey_900; +@cp_static-fg: @cryptpad_text_col; +@cp_static-link: @cryptpad_color_brand_300; +@cp_static-title: @cryptpad_color_brand; +@cp_static-footer: @cryptpad_color_grey_950; +@cp_static-footer-border: @cryptpad_color_grey_600; +@cp_static-topbar-fg: @cryptpad_color_brand_300; +@cp_static-card-bg: @cryptpad_color_grey_800; +@cp_static-img-invert-filter: hue-rotate(200grad) invert(); + +// Limit +@cp_limit-fg: @cryptpad_text_col; +@cp-limit-bar-bg: @cryptpad_color_grey_600; +@cp-limit-bar-normal: @cryptpad_color_green; +@cp-limit-bar-warning: @cryptpad_color_orange; +@cp-limit-bar-above: @cryptpad_color_red; + +// Mentions +@cp_mentions-bg: @cryptpad_color_grey_700; +@cp_mentions-hover: @cryptpad_color_grey_900; + +// Autocomplete +@cp_autocomplete-bg: @cryptpad_color_grey_900; +@cp_autocomplete-fg: @cryptpad_text_col; +@cp_autocomplete-border: @cryptpad_color_grey_700; +@cp_autocomplete-hover: @cryptpad_color_brand_fadest; + +// Modals +@cp_access-overlay: fade(@cp_alertify-bg, 50%); +@cp_snapshots-hover: @cryptpad_color_grey_850; + +// Support +@cp_support-bg: @cryptpad_color_grey_800; +@cp_support-msg-fg: @cryptpad_text_col; +@cp_support-msg-bg: @cryptpad_color_grey_900; +@cp_support-header-bg: @cryptpad_color_grey_800; + +// Toolbar +@cp_toolbar-bg: @cryptpad_color_grey_900; +@cp_toolbar-fg: @cryptpad_text_col; +@cp_toolbar-bottom-fg: @cryptpad_text_col; +@cp_toolbar-logo-bg: @cryptpad_color_grey_200; + +@cp_toolbar-fade1: fade(@cryptpad_text_col, 10%); +@cp_toolbar-fade3: fade(@cryptpad_text_col, 30%); +@cp_toolbar-warn: @cp_buttons-red; + +@cp_history-line-bg: @cryptpad_color_grey_900; +@cp_history-bg1: @cryptpad_color_grey_600; +@cp_history-bg2: @cryptpad_color_grey_800; +@cp_history-fg: @cp_toolbar-bottom-fg; + +// Tokenfield +@cp_token-bg: @cryptpad_color_grey_700; +@cp_token-fg: @cryptpad_text_col; +@cp_token-bg-hover: @cryptpad_color_grey_600; +@cp_token-invalid: @cryptpad_color_warn_red; + +// Usergrid +@cp_usergrid-fg: @cryptpad_text_col; +@cp_usergrid-selected-bg: @cryptpad_color_brand; +@cp_usergrid-selected-fg: @cryptpad_color_white; + +// Other +@cp_shadow-color: fade(@cryptpad_color_black, 60%); + +// Apps +@cp_app-bg: @cryptpad_color_grey_900; +@cp_app-fg: @cryptpad_text_col; + +// Accounts +@cp_accounts-basic: @cryptpad_color_basic; +@cp_accounts-pro: @cryptpad_color_pro; +@cp_accounts-power: @cryptpad_color_power; +@cp_accounts-active: @cryptpad_color_green_fade; +@cp_accounts-inactive: @cryptpad_color_red_fade; +@cp_accounts-mysubs-alert: @cryptpad_color_grey_700; +@cp_accounts-mysubs-bg: @cryptpad_color_grey_800; +@cp_accounts-mysubs-fg: @cryptpad_text_col; +@cp_accounts-contact-hover: fade(@cryptpad_color_black, 20%); +@cp_accounts-tab-bg: @cryptpad_color_grey_800; +@cp_accounts-tab-hover: @cryptpad_color_grey_700; +@cp_accounts-tab-border: @cryptpad_color_grey_600; + +// Admin +@cp_admin-isadmin-fg: @cryptpad_color_brand; +@cp_admin-isadmin-bg: @cryptpad_color_white; +@cp_admin-premium-fg: @cryptpad_color_warn_red; +@cp_admin-premium-bg: lighten(@cryptpad_color_warn_red, 25%); +@cp_admin-last-fg: @cryptpad_color_warn_red; +@cp_admin-last-bg: lighten(@cryptpad_color_orange, 25%); + +// Code +@cp_preview-bg: @cryptpad_color_grey_900; +@cp_preview-fg: @cryptpad_text_col; +@cp_preview-link: @cryptpad_color_brand_300; + +// Debug +@cp_debug-hover: fade(@cryptpad_color_black, 10%); +@cp_debug-icon-hover: @cryptpad_color_grey_500; + +// Mediatag +@cp_mediatag-text-bg: @cryptpad_color_white; +@cp_mediatag-text-fg: @cryptpad_text_col; + +// File +@cp_file-progress-bg: @cryptpad_color_brand; +@cp_file-progress-fg: @cryptpad_text_col; + +// Kanban +@cp_kanban-fg: @cryptpad_text_col; +@cp_kanban-item-bg: @cryptpad_color_grey_800; +@cp_kanban-link: @cryptpad_color_brand_300; +@cp_kanban-board-bg: @cryptpad_color_grey_700; +@cp_kanban-conflict-bg: @cryptpad_color_grey_700; +@cp_kanban-tags-bg: @cryptpad_color_grey_700; +@cp_kanban-add-hover: fade(@cryptpad_color_black, 10%); +@cp_kanban-trash-bg: @cryptpad_color_warn_red; +@cp_kanban-color0: @cryptpad_color_grey_600; +@cp_kanban-colors: + darken(desaturate(#FFD4D4,60%), 60%), + darken(desaturate(#FFDECA,60%), 60%), + darken(desaturate(#FFE69C,55%), 60%), + darken(desaturate(#DBFFB7,55%), 70%), + darken(desaturate(#AFFDC2,60%), 65%), + darken(desaturate(#C9FFFE,60%), 70%), + darken(desaturate(#C8D6FF,60%), 60%), + darken(desaturate(#E4CAFF,70%), 60%); + +// Notifications +@cp_notif-hover: fade(@cryptpad_color_black, 10%); +@cp_notif-header-bg: @cryptpad_color_grey_700; +@cp_notif-header-fg: @cryptpad_text_col; +@cp_notif-table-border: @cryptpad_color_grey_900; +@cp_notif-bg: @cryptpad_color_grey_800; +@cp_notif-fg: @cryptpad_text_col; + +// OO +@cp_oo-offline-overlay: fade(@cryptpad_color_white, 50%); + +// Rich text +@cp_pad-fg: @cryptpad_text_col; +@cp_pad-icon-filter: invert(); +// Comments +@cp_comments-fg: @cryptpad_text_col; +@cp_comments-bg: @cryptpad_color_grey_800; +@cp_comments-header: @cryptpad_color_grey_500; + +// Poll +@cp_poll-th-bg: @cryptpad_color_brand_fadest; +@cp_poll-th-fg: @cryptpad_text_col; +@cp_poll-uncommitted-bg: @cryptpad_color_grey_800; +@cp_poll-border-color: @cryptpad_color_grey_600; +@cp_poll-cell-fg: @cryptpad_text_col; +@cp_poll-unset: @cryptpad_color_grey_700; +@cp_poll-yes: @cryptpad_color_green_fade; +@cp_poll-no: @cryptpad_color_red_fade; +@cp_poll-maybe: @cryptpad_color_grey_600; +@cp_poll-hint: @cryptpad_color_grey_500; + +// Profile +@cp_profile-border: @cryptpad_color_grey_500; +@cp_profile-hint: @cryptpad_color_grey_400; + +// SLide +@cp_slide-fg: @cp_app-fg; +@cp_slide-css-error: @cryptpad_color_red_fader; + +// Teams +@cp_teams-card-bg: @cryptpad_color_grey_800; +@cp_teams-leftside-bg: darken(@cryptpad_color_grey_800, 5%); +@cp_teams-invite-bg: fade(@cryptpad_color_brand, 50%); +@cp_teams-invite-fg: @cryptpad_text_col; +@cp_teams-roster-odd: fade(@cryptpad_text_col, 15%); + +// Whiteboard +@cp_whiteboard-board-bg: @cryptpad_color_grey_950; +@cp_whiteboard-board-border: @cryptpad_color_grey_800; +@cp_whiteboard-bg: @cp_app-bg; +@cp_whiteboard-fg: @cryptpad_text_col; diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 4b7cc97bf..fc252f876 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -3,82 +3,9 @@ @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: #0087FF; - drive: #0087FF; + drive: #0087FF; // Used as icon color in index.js (index.html) pad: #256ad5; code: #EAA000; slide: #e57614; @@ -97,34 +24,403 @@ contacts: #607B8D; } -@colortheme_poll-color: #fff; -@colortheme_poll-help-bg: #bbffbb; -@colortheme_poll-th-bg: #005bef; -@colortheme_poll-th-fg: #fff; +// Colors +@cryptpad_color_brand: #0087FF; +@cryptpad_color_brand_300: lighten(@cryptpad_color_brand, 30%); +@cryptpad_color_brand_fade: fade(@cryptpad_color_brand, 75%); +@cryptpad_color_brand_fader: fade(@cryptpad_color_brand, 50%); +@cryptpad_color_brand_fadest: fade(@cryptpad_color_brand, 25%); -// 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_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_blue: #4591C4; -@cryptpad_color_grey: #999999; -@cryptpad_color_light_grey: #e0e0e0; -@cryptpad_header_col: #1E1F1F; -@cryptpad_text_col: #3F4141; +@cryptpad_color_white: #FFF; +@cryptpad_color_grey_50: #FAFAFA; +@cryptpad_color_grey_100: #F5F5F5; +@cryptpad_color_grey_200: #EEEEEE; +@cryptpad_color_grey_300: #E0E0E0; +@cryptpad_color_grey_400: #BDBDBD; +@cryptpad_color_grey_500: #9E9E9E; +@cryptpad_color_grey_600: #757575; +@cryptpad_color_grey_700: #616161; +@cryptpad_color_grey_800: #424242; +@cryptpad_color_grey_850: #323232; +@cryptpad_color_grey_900: #212121; +@cryptpad_color_grey_950: #121212; +@cryptpad_color_black: #000; + +@cryptpad_text_col:@cryptpad_color_grey_800; + +@cryptpad_color_blue: #326599; // former logo-1 @cryptpad_color_light_blue: #00b7d8; +@cryptpad_color_red: #ff1100; +@cryptpad_color_red_fade: fade(@cryptpad_color_red, 50%); +@cryptpad_color_red_fader: fade(@cryptpad_color_red, 25%); +@cryptpad_color_warn_red: @cryptpad_color_red_fade; +@cryptpad_color_dark_red: #9e0000; +@cryptpad_color_light_red: #FFD4D4; +@cryptpad_color_light_red_fade: fade(@cryptpad_color_light_red, 75%); +@cryptpad_color_orange: #f49842; +@cryptpad_color_green: #5cb85c; +@cryptpad_color_green_fade: fade(@cryptpad_color_green, 50%); +@cryptpad_color_light_green: #c5ffa8; +@cryptpad_color_light_green_fade: fade(@cryptpad_color_light_green, 20%); +@cryptpad_color_light_yellow: #FFE69C; +@cryptpad_color_yellow_fade: fade(#FFE69C, 50%); // XXX diff from dark +@cryptpad_color_lighter_blue: #d2e1f2; -@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; +@cryptpad_color_link: #0275D8; + +// Premium plans colors +@cryptpad_color_basic: #DDEFFF; +@cryptpad_color_pro: #E4FFDD; +@cryptpad_color_power: #F6DDFF; + +@cp_scrollbar-fg: fade(@cryptpad_color_black, 20%); +@scrollbar_color: @cp_scrollbar-fg transparent; + +// Loading screen +@cp_loading-bg: @cryptpad_color_grey_200; +@cp_loading-fg: @cryptpad_text_col; +@cp_loading-msg-bg: @cryptpad_color_white; +@cp_loading-link: @cryptpad_color_brand; +@cp_loading-error-bg: @cryptpad_color_warn_red; +@cp_loading-error-fg: @cryptpad_text_col; +@cp_loading-progress-bg: @cryptpad_color_white; +@cp_loading-progress-bar-bg: @cryptpad_color_brand; +@cp_loading-spinner: @cryptpad_color_grey_500; + +// Chat +@cp_messenger-bg: @cryptpad_color_grey_200; +@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: @cryptpad_color_brand; +@cp_alertify-hover: fade(@cp_alertify-fg, 25%); +@cp_alertify-overlay: fade(@cryptpad_text_col, 50%); +@cp_alertify-log-bg: fade(@cryptpad_color_brand, 90%); +@cp_alertify-log-fg: @cryptpad_color_white; +@cp_alertify-warn-bg: rgba(205, 37, 50); +@cp_alertify-disable-border: @cryptpad_color_dark_grey; + +// Forms +@cp_forms-fg: @cryptpad_text_col; +@cp_forms-bg: @cryptpad_color_grey_100; +@cp_forms-border: @cryptpad_color_brand; +@cp_forms-placeholder: fade(@cryptpad_text_col, 75%); +@cp_forms-readonly: @cryptpad_color_brand_fadest; +@cp_forms-readonly-border: @cryptpad_color_brand; +@cp_forms-disabled: @cryptpad_color_grey_500; + +// Bootstrap alerts +@cp_alerts-warning-bg: @cryptpad_color_yellow_fade; +@cp_alerts-warning-fg: @cryptpad_color_light_yellow; +@cp_alerts-warning-text: darken(@cp_alerts-warning-fg, 55%); +@cp_alerts-danger-bg: @cryptpad_color_light_red_fade; +@cp_alerts-danger-fg: @cryptpad_color_light_red; +@cp_alerts-danger-text: darken(@cp_alerts-danger-fg, 55%); +@cp_alerts-info-bg: fade(@cryptpad_color_brand, 15%); +@cp_alerts-info-text: @cryptpad_color_brand; +@cp_alerts-info-fg: @cryptpad_color_brand; +@cp_alerts-success-bg: @cryptpad_color_light_green_fade; +@cp_alerts-success-fg: @cryptpad_color_green; +@cp_alerts-success-text: darken(@cryptpad_color_green, 20%); + +// Buttons +@cp_buttons-fg: @cryptpad_color_brand; +@cp_buttons-hover: @cryptpad_color_brand_fadest; +@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-text: @cp_buttons-red; +@cp_buttons-red-color: #FFF; +@cp_buttons-red-border: transparent; +@cp_buttons-primary: @cryptpad_color_brand; +@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_toolbar_grey; +@cp_sidebar-left-fg: @cryptpad_text_col; +@cp_sidebar-right-bg: @cryptpad_color_white; +@cp_sidebar-right-fg: @cryptpad_text_col; // XXX was black +@cp_sidebar-left-active: @cp_sidebar-right-bg; +@cp_sidebar-hint: @cryptpad_color_hint_grey; + +// Drive +@cp_drive-bg: @cp_sidebar-right-bg; +@cp_drive-fg: @cp_sidebar-right-fg; +@cp_drive-header-fg: fade(@cryptpad_text_col, 70%); +@cp_drive-icon-hover: fade(@cryptpad_text_col, 5%); +@cp_drive-icon-border: fade(@cryptpad_text_col, 20%); +@cp_drive-thumb-bg: transparent; +@cp_drive-selected-bg: fade(@cryptpad_text_col, 10%); +@cp_drive-selected-fg: @cryptpad_text_col; +@cp_drive-selection-overlay: fade(@cryptpad_text_col, 5%); +@cp_drive-selection-bg: @cryptpad_color_grey_200; +@cp_drive-selection-fg: @cryptpad_text_col; +@cp_drive-droppable-bg: @cryptpad_color_grey_400; +@cp_drive-droppable-fg: @cryptpad_text_col; +@cp_drive-infobox-bg: @cryptpad_color_brand_fadest; +@cp_drive-infobox-fg: @cryptpad_text_col; +@cp_drive-warnbox-bg: @cryptpad_color_warn_red; +@cp_drive-warnbox-fg: @cryptpad_text_col; +@cp_drive-tree-branch: @cryptpad_text_col; + +// Contextmenu +@cp_context-bg: @cryptpad_color_white; +@cp_context-border: @cryptpad_color_grey_400; +@cp_context-bg-hover: @cryptpad_color_grey_300; +@cp_context-bg-active: @cryptpad_color_grey_400; +@cp_context-fg: @cryptpad_text_col; +@cp_context-icon: @cryptpad_text_col; +@cp_context-disabled: @cryptpad_color_grey_400; + +// Tooltip background +@cp_tooltip-bg: @cryptpad_color_grey_300; +@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_lighter_grey; +@cp_markdown-border: @cryptpad_color_grey; +@cp_markdown-contrast-fg: @cryptpad_text_col; // XXX +@cp_markdown-contrast-bg: transparent; // XXX + +// Avatar +@cp_avatar-bg: @cryptpad_color_grey; +@cp_avatar-fg: @cryptpad_text_col; + +// Corner +@cp_corner-bg: @cryptpad_color_grey_100; +@cp_corner-fg: @cryptpad_color_brand; +@cp_corner-text: @cryptpad_text_col; + +// Pad Creation Screen +@cp_creation-bg: @cryptpad_color_white; +@cp_creation-fg: @cryptpad_text_col; +@cp_creation-button-bg: @cryptpad_color_brand; +@cp_creation-button-fg: @cryptpad_color_white; +@cp_creation-error-bg: @cryptpad_color_blue; +@cp_creation-error-fg: @cryptpad_color_light_grey; + +// Export +@cp_export-bg: @cryptpad_color_grey_200; +@cp_export-fg: @cryptpad_text_col; +@cp_export-hint: fade(@cryptpad_text_col, 80%); +@cp_export-error-bg: @cryptpad_color_grey_300; +@cp_export-error-bg2: @cryptpad_color_red_fader; + +// File upload +@cp_upload-fg: @cryptpad_color_brand; +@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_toolbar_grey; +@cp_static-fg: @cryptpad_text_col; +@cp_static-link: @cryptpad_color_brand; +@cp_static-title: @cryptpad_color_brand; +@cp_static-footer: @cryptpad_color_help_grey; +@cp_static-footer-border: @cryptpad_color_white; +@cp_static-topbar-fg: @cryptpad_color_brand; +@cp_static-card-bg: @cryptpad_color_white; +@cp_static-img-invert-filter: none; + +// Limit +@cp_limit-fg: @cryptpad_text_col; +@cp-limit-bar-bg: @cryptpad_color_white; +@cp-limit-bar-normal: @cryptpad_color_green; +@cp-limit-bar-warning: @cryptpad_color_orange; +@cp-limit-bar-above: @cryptpad_color_red; + +// Mentions +@cp_mentions-bg: @cryptpad_color_grey; +@cp_mentions-hover: @cryptpad_color_help_grey; + +// Autocomplete +@cp_autocomplete-bg: @cryptpad_color_grey_100; +@cp_autocomplete-fg: @cryptpad_text_col; +@cp_autocomplete-border: @cryptpad_color_grey_300; +@cp_autocomplete-hover: @cryptpad_color_brand_fadest; + +// 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-fg: @cryptpad_text_col; +@cp_support-msg-bg: @cryptpad_color_grey; +@cp_support-header-bg: @cryptpad_color_help_grey; + +// Toolbar +@cp_toolbar-bg: @cryptpad_color_grey_200; +@cp_toolbar-fg: @cryptpad_text_col; +@cp_toolbar-bottom-fg: @cryptpad_text_col; +@cp_toolbar-logo-bg: @cryptpad_color_white; + +@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; + +// Tokenfield +@cp_token-bg: @cryptpad_color_neutral2_grey; +@cp_token-fg: @cryptpad_text_col; +@cp_token-bg-hover: @cryptpad_color_neutral_grey; +@cp_token-invalid: @cryptpad_color_warn_red; + +// Usergrid +@cp_usergrid-fg: @cryptpad_text_col; +@cp_usergrid-selected-bg: @cryptpad_color_brand; +@cp_usergrid-selected-fg: @cryptpad_color_white; + +// Other +@cp_shadow-color: fade(@cryptpad_color_black, 40%); + +// Apps +@cp_app-bg: @cryptpad_color_light_grey; +@cp_app-fg: @cryptpad_text_col; + +// Accounts +@cp_accounts-basic: @cryptpad_color_basic; +@cp_accounts-pro: @cryptpad_color_pro; +@cp_accounts-power: @cryptpad_color_power; +@cp_accounts-active: @cryptpad_color_light_green; +@cp_accounts-inactive: @cryptpad_color_light_red; +@cp_accounts-mysubs-alert: @cryptpad_color_white; +@cp_accounts-mysubs-bg: @cryptpad_color_toolbar_grey; +@cp_accounts-mysubs-fg: @cryptpad_text_col; +@cp_accounts-contact-hover: fade(@cryptpad_color_black, 20%); +@cp_accounts-tab-bg: @cryptpad_color_toolbar_grey; +@cp_accounts-tab-hover: @cryptpad_color_grey; +@cp_accounts-tab-border: @cryptpad_color_neutral_grey; + +// Admin +@cp_admin-isadmin-fg: @cryptpad_color_brand; +@cp_admin-isadmin-bg: @cryptpad_color_white; +@cp_admin-premium-fg: @cryptpad_color_warn_red; +@cp_admin-premium-bg: lighten(@cryptpad_color_warn_red, 25%); +@cp_admin-last-fg: @cryptpad_color_warn_red; +@cp_admin-last-bg: lighten(@cryptpad_color_orange, 25%); + +// Code +@cp_preview-bg: @cryptpad_color_white; +@cp_preview-fg: @cryptpad_text_col; +@cp_preview-link: @cryptpad_color_brand; + +// Debug +@cp_debug-hover: fade(@cryptpad_color_black, 10%); +@cp_debug-icon-hover: @cryptpad_color_dark_grey; + +// Mediatag +@cp_mediatag-text-bg: @cryptpad_color_white; +@cp_mediatag-text-fg: @cryptpad_text_col; + +// File +@cp_file-progress-bg: @cryptpad_color_brand; +@cp_file-progress-fg: @cryptpad_text_col; + +// Kanban +@cp_kanban-fg: @cryptpad_text_col; +@cp_kanban-item-bg: @cryptpad_color_grey_50; +@cp_kanban-link: @cryptpad_color_brand; +@cp_kanban-board-bg: @cryptpad_color_grey_300; +@cp_kanban-conflict-bg: @cryptpad_color_grey_200; +@cp_kanban-tags-bg: @cryptpad_color_grey_300; +@cp_kanban-add-hover: fade(@cryptpad_color_black, 10%); +@cp_kanban-trash-bg: @cryptpad_color_warn_red; +@cp_kanban-color0: @cryptpad_color_grey_400; +@cp_kanban-colors: + #FFD4D4, + #FFDECA, + #FFE69C, + #DBFFB7, + #AFFDC2, + #C9FFFE, + #C8D6FF, + #E4CAFF; + +// Notifications +@cp_notif-hover: fade(@cryptpad_color_black, 10%); +@cp_notif-header-bg: @cryptpad_color_grey_200; +@cp_notif-header-fg: @cryptpad_text_col; +@cp_notif-table-border: @cryptpad_color_white; +@cp_notif-bg: @cryptpad_color_grey_100; +@cp_notif-fg: @cryptpad_text_col; + +// OO +@cp_oo-offline-overlay: fade(@cryptpad_color_white, 50%); + +// Rich text +@cp_pad-fg: @cryptpad_text_col; +@cp_pad-icon-filter: none; +// Comments +@cp_comments-fg: @cryptpad_text_col; +@cp_comments-bg: @cryptpad_color_white; +@cp_comments-header: @cryptpad_color_grey_600; + +// Poll +@cp_poll-th-bg: @cryptpad_color_lighter_blue; +@cp_poll-th-fg: @cryptpad_text_col; +@cp_poll-uncommitted-bg: @cryptpad_color_toolbar_grey; +@cp_poll-border-color: @cryptpad_color_hint_grey; +@cp_poll-cell-fg: @cryptpad_text_col; +@cp_poll-unset: @cryptpad_color_help_grey; +@cp_poll-yes: @cryptpad_color_light_green; +@cp_poll-no: @cryptpad_color_light_red; +@cp_poll-maybe: @cryptpad_color_light_yellow; +@cp_poll-hint: @cryptpad_color_dark_grey; + +// Profile +@cp_profile-border: @cryptpad_color_grey_400; +@cp_profile-hint: @cryptpad_color_grey_600; + +// SLide +@cp_slide-fg: @cp_app-fg; +@cp_slide-css-error: @cryptpad_color_red_fader; + +// Teams +@cp_teams-card-bg: @cryptpad_color_grey_300; +@cp_teams-leftside-bg: darken(@cryptpad_color_grey_200, 5%); +@cp_teams-invite-bg: fade(@cryptpad_color_brand, 50%); +@cp_teams-invite-fg: @cryptpad_text_col; +@cp_teams-roster-odd: fade(@cryptpad_text_col, 15%); + +// Whiteboard +@cp_whiteboard-board-bg: @cryptpad_color_white; +@cp_whiteboard-board-border: @cryptpad_color_hint_grey; +@cp_whiteboard-bg: @cp_app-bg; +@cp_whiteboard-fg: @cryptpad_text_col; 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..09b26dda9 100644 --- a/customize.dist/src/less2/include/contextmenu.less +++ b/customize.dist/src/less2/include/contextmenu.less @@ -6,8 +6,16 @@ & { .cp-contextmenu { display: none; - position: absolute; + position: absolute !important; z-index: 50000; + & > ul { + border: 1px solid @cp_context-border; + background-color: @cp_context-bg; + border-radius: 0px; + .dropdown-divider { + border-top: 1px solid @cp_context-border; + } + } li { padding: 0; font-size: @colortheme_app-font-size; @@ -29,20 +37,33 @@ .dropdown-menu { top: -0.7rem; left: 100%; + background-color: @cp_context-bg; + border-radius: 0px; + border: 1px solid @cp_context-border; } } a { cursor: pointer; + color: @cp_context-fg; + padding-left: 10px; + &: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; + margin-right: 10px; + 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..476e6bf88 100644 --- a/customize.dist/src/less2/include/corner.less +++ b/customize.dist/src/less2/include/corner.less @@ -4,9 +4,12 @@ --LessLoader_require: LessLoader_currentFile(); }; & { - @corner-link: #ffff7a; - @corner-blue: @colortheme_logo-1; - @corner-white: @colortheme_base; + @corner-bg: @cp_corner-bg; + @corner-fg: @cp_corner-fg; + @corner-text: @cp_corner-text; + @corner-bg-alt: darken(@corner-bg, 10%); + @corner-fg-alt: darken(@corner-fg, 10%); + @keyframes appear { 0% { @@ -31,18 +34,18 @@ bottom: 10px; width: 350px; padding: 10px; - background-color: fade(@corner-blue, 95%); - border: 1px solid @corner-blue; - color: @corner-white; + background-color: fade(@corner-bg, 95%); + color: @corner-text; z-index: 9999; transform-origin: bottom right; animation: appear 0.8s ease-in-out; - //box-shadow: 0 0 10px 0 @corner-blue; + border: 1px solid @corner-fg; + box-shadow: 0 0 10px 0 @cp_shadow-color; &.cp-corner-alt { - background-color: fade(@corner-white, 95%); - border: 1px solid @corner-blue; - color: @corner-blue; + background-color: fade(@corner-bg, 95%); + color: @corner-fg; + border-color: @corner-fg; } h1, h2, h3 { @@ -54,39 +57,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 +69,16 @@ font-size: 1.1em; } &:hover { - color: darken(@corner-white, 10%); + color: @corner-fg-alt; + } } &.cp-corner-alt { .cp-corner-dontshow { + display: inline-block; + color: @corner-text; &:hover { - color: lighten(@corner-blue, 10%); + color: @corner-fg; } } } @@ -121,63 +94,44 @@ } .cp-corner-footer, .cp-corner-text { a { - color: @corner-white; + color: @corner-fg; text-decoration: underline; &:hover { - color: darken(@corner-white, 10%); + color: @corner-fg-alt; } } } &.cp-corner-alt a { - color: @corner-blue; + color: @corner-text; &:hover { - color: lighten(@corner-blue, 10%); + color: @corner-fg; } } button { - padding: 5px; - color: @corner-white; + padding: 5px; + color: @corner-fg; &:not(:first-child) { margin-left: 10px; } - outline: none; text-transform: uppercase; - border: 1px solid @corner-white; + border: 1px solid @corner-fg; .fa, .cptools { margin-right: 0.3em; } &.cp-corner-primary { - background-color: @corner-white; - color: @corner-blue; + background-color: @corner-fg; + color: @corner-bg; &:hover { - background-color: lighten(@corner-blue, 50%); - border-color: lighten(@corner-blue, 50%); + background-color: @corner-fg-alt; + border-color: @corner-fg-alt; } } &.cp-corner-cancel { - background-color: @corner-blue; - color: @corner-white; + background-color: @corner-bg; + color: @corner-fg; &:hover { - background-color: darken(@corner-blue, 10%); - } - } - } - &.cp-corner-alt button { - border-color: @corner-blue; - &.cp-corner-primary { - background-color: @corner-blue; - color: @corner-white; - &:hover { - background-color: darken(@corner-blue, 10%); - border-color: darken(@corner-blue, 10%); - } - } - &.cp-corner-cancel { - background-color: @corner-white; - color: @corner-blue; - &:hover { - background-color: lighten(@corner-blue, 50%); + background-color: @corner-bg-alt; } } } diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less index daef0b876..f4f4d0193 100644 --- a/customize.dist/src/less2/include/creation.less +++ b/customize.dist/src/less2/include/creation.less @@ -7,9 +7,10 @@ .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%); + @desat-color: desaturate(@bg-color, 20%); + @creation-bg-color-light: contrast(@creation-color, lighten(@bg-color, 30%), darken(@desat-color, 20%)); }; .creation_main( @@ -17,23 +18,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 +56,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 +123,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 +167,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 +191,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 +216,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 +237,7 @@ text-align: center; line-height: 18px; } - border: 1px solid @colortheme_alertify-primary; + border: 1px solid @cp_creation-button-bg; } } @@ -294,19 +288,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 +322,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 +385,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 b82e3513b..cc71507d1 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; - .tools_placeholder-color(@cryptpad_color_grey); + 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; @@ -269,7 +248,7 @@ font-size: 30px; padding: 15px; font-style: italic; - color: @cryptpad_color_grey; + color: fade(@cryptpad_text_col, 80%); } @@ -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 { @@ -389,9 +352,9 @@ top: 10px; width: 11px !important; height: 11px !important; + background-color: @cp_sidebar-left-bg; padding: 0; margin: 0; - background: 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,8 @@ line-height: 2em; padding: 0.25em 0.75em; margin: 1em; - background: @drive_info-box-bg; + background: @cp_drive-infobox-bg; + color: @cp_drive-infobox-fg; cursor: default; span { cursor: pointer; @@ -508,7 +472,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 +499,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 +567,7 @@ margin: 0; padding: 0; border-radius: 0; - border: 1px solid #ddd; + border: 1px solid transparent; font-size: 14px; height: auto; } @@ -619,6 +583,7 @@ .cp-app-drive-element-thumbnail { max-width: 100px; max-height: 100px; + background: @cp_drive-thumb-bg; & ~ .fa, & ~ .cptools { display: inline; font-size: 17px; @@ -658,7 +623,7 @@ li { display: flex; input { - border: 1px solid #ddd; + border: 1px solid transparent; margin: 0; padding: 0 4px; flex: 1; @@ -734,7 +699,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 +713,7 @@ &.cp-app-drive-sort-clickable { cursor: pointer; &:hover { - background: @drive_table-header-bg; + background: @cp_drive-icon-hover; } } } @@ -821,7 +786,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 +797,7 @@ } &.cp-app-drive-path-separator { - color: #ccc; + color: @cp_drive-header-fg; cursor: default; } @@ -841,7 +806,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 +833,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 +861,7 @@ } .cp-app-drive-new-name { - color: @cryptpad_text_col; + color: @cp_drive-fg; white-space: nowrap; } @@ -954,8 +915,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 +926,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/dropdown.less b/customize.dist/src/less2/include/dropdown.less index 0cabeabbf..277fab81d 100644 --- a/customize.dist/src/less2/include/dropdown.less +++ b/customize.dist/src/less2/include/dropdown.less @@ -7,6 +7,18 @@ --LessLoader_require: LessLoader_currentFile(); } & { + .ui-autocomplete { + background-color: @cp_autocomplete-bg; + color: @cp_autocomplete-fg; + } + ul.ui-menu { + border: 1px solid @cp_autocomplete-border; // XXX doesn't work + .ui-state-active { + background-color: @cp_autocomplete-hover; + color: @cp_autocomplete-fg; + border-color: @cp_autocomplete-hover; + } + } .cp-autocomplete-value { display: flex; align-items: center; @@ -46,7 +58,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 +76,7 @@ } & > a, & > span { - color: @colortheme_dropdown-color; + color: @cp_dropdown-fg; padding: 5px 16px; text-decoration: none; display: flex; @@ -100,13 +112,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 +150,7 @@ hr { margin: 5px 0px; height: 1px; - background: #bbb; + background: @cp_dropdown-bg-active; & + hr { display: none; } @@ -150,21 +162,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/export.less b/customize.dist/src/less2/include/export.less index d1ee37d4b..301bd1404 100644 --- a/customize.dist/src/less2/include/export.less +++ b/customize.dist/src/less2/include/export.less @@ -6,19 +6,22 @@ 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; + background: @cp_loading-progress-bg; + border: 1px solid @cp_loading-progress-bar-bg; width: 80%; margin: auto; position: relative; .cp-export-progress-bar { height: 100%; - background: #5cb85c; // Same color as loading screen bar + background: @cp_loading-progress-bar-bg; // Same color as loading screen bar width: 0%; display: inline-block; } @@ -33,7 +36,7 @@ } } & > p { - color: #777; + color: @cp_export-hint; } .cp-export-progress { margin-bottom: 1rem; @@ -58,8 +61,7 @@ display: none; overflow-x: auto; max-height: 300px; - background: #ededed; - border: 1px solid #777; + background: @cp_export-error-bg; padding: 5px 20px; margin-top: 1rem; & > p { @@ -69,17 +71,20 @@ & > div { padding: 5px 10px; margin: 5px 0; - background: #dedede; + background: @cp_export-error-bg2; .title { font-weight: bold; } .link { padding: 0 20px; font-size: 14px; + a { + color: @cp_loading-link; + } } .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 56d5cd235..4962f3891 100644 --- a/customize.dist/src/less2/include/forms.less +++ b/customize.dist/src/less2/include/forms.less @@ -6,24 +6,20 @@ } & { - @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; + background-color: @cp_forms-bg; + 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; + border-color: @cp_forms-readonly-border; + color: @cp_forms-fg; } } @@ -58,7 +54,6 @@ div.cp-textarea { height: 60px; width: 100%; - background-color: white; cursor: text; outline: none; white-space: pre-wrap; @@ -76,9 +71,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 +84,7 @@ button.btn { - background-color: @colortheme_alertify-cancel; + background-color: @cp_buttons-cancel; box-sizing: border-box; outline: 0; align-items: center; @@ -111,80 +106,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: @cp_buttons-hover; } &.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(@cp_buttons-red, 10%)); } } &.danger-alt, &.btn-danger-alt, &.btn-danger-outline { - border-color: @colortheme_alertify-red; - color: @colortheme_alertify-red; + border-color: @cp_buttons-red; + color: @cp_buttons-red-text; &: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; - &: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(@cp_buttons-primary-text, darken(@cp_buttons-primary, 10%), lighten(@cp_buttons-primary, 10%)); } } - &.btn-light { + &.btn-light { // XXX DARK border-color: @cryptpad_text_col; color: @cryptpad_text_col; background-color: transparent; @@ -196,12 +174,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 +190,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 +199,66 @@ &: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; + } + } + } + // Bootstrap Alerts + .alert { + margin: 0px 0px @alertify_padding-base 0px; + font-size: 12px; + padding: 5px; + border-radius: 0px; + i { + margin-right: 10px; + } + &.cp-alert-top { + margin-top: @alertify_padding-base; + } + a { + color: @cryptpad_text_col; + text-decoration: underline; + } + &.alert-primary { + background-color: fade(@cryptpad_color_brand, 15%); + color: @cp_alertify-fg; + border-color: @cp_alertify-fg; + a { + color: @cp_alertify-fg; + text-decoration: underline; + } + } + &.alert-warning { + background-color: @cp_alerts-warning-bg; + color: @cp_alerts-warning-text; + border-color: @cp_alerts-warning-fg; + } + &.alert-danger { + background-color: @cp_alerts-danger-bg; + color: @cp_alerts-danger-text; + border-color: @cp_alerts-danger-fg; + } + &.alert-info { + background-color: @cp_alerts-info-bg; + color: @cp_alerts-info-text; + border-color: @cp_alerts-info-fg; + } + &.alert-success { + background-color: @cp_alerts-success-bg; + color: @cp_alerts-success-text; + border-color: @cp_alerts-success-fg; + } + &.dismissable { + display: flex; + align-items: center; + span.fa-times { + font-size: @colortheme_app-font-size; + margin-left: 20px; + cursor: pointer; } } } 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/help.less b/customize.dist/src/less2/include/help.less index 3bc9ae1e0..b3e5022ad 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 { @@ -16,16 +16,18 @@ .cp-help-close { position: absolute; + color: @cryptpad_text_col; top: 5px; right: 5px; 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; + text-decoration: underline; } h1 { font-size: 20px; diff --git a/customize.dist/src/less2/include/icons.less b/customize.dist/src/less2/include/icons.less index 228e10c3d..6c05803c7 100644 --- a/customize.dist/src/less2/include/icons.less +++ b/customize.dist/src/less2/include/icons.less @@ -10,6 +10,7 @@ text-overflow: ellipsis; padding-top: 5px; padding-bottom: 5px; + border: 1px solid transparent; .cp-icons-name { width: 100%; @@ -22,11 +23,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 +40,3 @@ } } } - diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less index 8373ff2e8..e64e38744 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 { @@ -11,23 +11,23 @@ } } .cp-shadow() { - box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.34); + box-shadow: 0px 0px 25px 0px @cp_shadow-color; } .infopages_main () { --LessLoader_require: LessLoader_currentFile(); } -body { +body.html { .font_main(); @infopages_infobar-height: 64px; @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,34 +77,48 @@ body { .cp-page-title { h1 { font-family: "IBM Plex Mono"; - color: @colortheme_logo-2; + color: @cp_static-title; margin: 50px auto; } } + p { + a { + text-decoration: underline; + } + } .row.cp-page-section { margin: 50px 0px; + a { + text-decoration: underline; + } + .small-logo { + max-width: 40%; + } } img.cp-shadow { .cp-shadow(); } + img.cp-img-invert { + filter: @cp_static-img-invert-filter; + } 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 +142,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 +169,18 @@ body { display: block; font-family: "IBM Plex Mono"; font-size: 1.5rem; - color: @colortheme_logo-2; + color: @cp_static-title; 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 +188,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; @@ -234,18 +210,17 @@ body { a { border: 2px solid transparent; white-space: nowrap; - &:visited { - color: @colortheme_logo-2; - } + color: @cp_static-title; } .nav-link { padding: 0.5em 0.7em; + color: @cp_static-link; &:hover { color: @cryptpad_text_col; } } .cp-register-btn { - border: 2px solid @colortheme_logo-2; + border: 2px solid @cp_static-topbar-fg; display: inline-block; } button:focus { @@ -253,7 +228,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..46e6dcf11 100644 --- a/customize.dist/src/less2/include/limit-bar.less +++ b/customize.dist/src/less2/include/limit-bar.less @@ -18,7 +18,7 @@ margin: 5px; box-sizing: border-box; border-radius: 3px; - background: white; + background: @cp-limit-bar-bg; position: relative; text-align: center; width: ~"calc(100% - 10px)"; @@ -32,20 +32,21 @@ 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; + background: @cp-limit-bar-normal; } &.cp-limit-usage-warning { - background: orange; + background: @cp-limit-bar-warning; } &.cp-limit-usage-above { - background: red; + background: @cp-limit-bar-above; } } } .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; @@ -66,6 +67,7 @@ padding-bottom: 0; justify-content: center; flex: 1; + border-radius: 0px; } } } diff --git a/customize.dist/src/less2/include/loading.less b/customize.dist/src/less2/include/loading.less new file mode 100644 index 000000000..ba76e32ae --- /dev/null +++ b/customize.dist/src/less2/include/loading.less @@ -0,0 +1,212 @@ +@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; + a { + color: @cp_loading-link; + } + } + + #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); + } + +} diff --git a/customize.dist/src/less2/include/markdown.less b/customize.dist/src/less2/include/markdown.less index 37fd4fce8..1bc271122 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; } @@ -151,31 +148,56 @@ .tools_unselectable(); } } + + // XXX apply the styles below in modals-ui-elements.less + + pre.mermaid[mermaid-source^="pie"] { // XXX + g.legend text, text.pieTitleText { + fill: @cp_markdown-contrast-fg; + } + } + + pre.mermaid[mermaid-source^="gantt"] { // XXX + background-color: @cp_markdown-contrast-bg; + background-color: #444; + text.titleText { + fill: @cp_markdown-contrast-fg; + } + } + + /* make sure markmap text shows up in dark mode */ + pre.markmap svg { // XXX + color: @cp_markdown-contrast-fg; + } + + pre.mathjax { // XXX + background-color: @cp_markdown-contrast-bg; + } } -.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; overflow-x: auto; overflow-y: hidden; + background-color: @cp_markdown-contrast-bg; // XXX } } -.markdown_gfm-table (@color: black) { +.markdown_gfm-table () { table { border-collapse: collapse; tr { th { - border: 1px solid @color; padding: 15px; } - td { - border: 1px solid @color; + th, td { + border: 1px solid @cp_markdown-border; // XXX } } } 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/messenger.less b/customize.dist/src/less2/include/messenger.less index 4a05af91c..dffcd741e 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: @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%); } } @@ -46,6 +49,7 @@ justify-content: center; align-items: center; min-height: 0; + color: @cp_messenger-fg; &.ready { background-size: cover; background-position: center; @@ -58,7 +62,7 @@ .cp-app-contacts-initializing { .cp-app-contacts-spinner { - color: white; + color: @cp_messenger-fg; display: block; } .cp-app-contacts-info { @@ -77,11 +81,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 +101,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 +124,7 @@ width: 20px; text-align: center; &:hover { - color: @cryptpad_text_col; + color: @msg-color-hover; } } @@ -128,7 +138,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 +183,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 +205,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,50 +214,27 @@ 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 { padding: 20px; } .cp-app-contacts-header { - background-color: @msg-bg-color; - background-color: var(--msg-bg-color); + background-color: @msg-bg-color-dark; + background-color: var(--msg-bg-color-dark); padding: 0; display: flex; justify-content: space-between; @@ -293,7 +246,8 @@ line-height: 30px; padding: 10px; &:hover { - background-color: rgba(50,50,50,0.3); + background-color: @msg-bg-color-darker; + background-color: var(--msg-color-darker); } } @@ -409,23 +363,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/modal.less b/customize.dist/src/less2/include/modal.less index 3496d8efa..feed09a70 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: @cryptpad_color_link; &:visited { - color: @colortheme_modal-link-visited; + color: @cryptpad_color_link; } } } @@ -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/modals-ui-elements.less b/customize.dist/src/less2/include/modals-ui-elements.less index ff40729a6..527d3c4e4 100644 --- a/customize.dist/src/less2/include/modals-ui-elements.less +++ b/customize.dist/src/less2/include/modals-ui-elements.less @@ -38,25 +38,19 @@ // 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; + background-color: @cryptpad_color_brand; margin: 10px 0; padding: 0; div { height: 20px; margin: 0; padding: 0; - background-color: #CCCCCC; + background-color: @cryptpad_color_grey_500; } } .cp-app-prop-size-legend { - color: @colortheme_modal-fg; display: flex; margin: 10px 0; & > div { @@ -73,10 +67,10 @@ margin-right: 10px; } .cp-app-prop-history-size-color { - background-color: #CCCCCC; + background-color: @cryptpad_color_grey_500; } .cp-app-prop-contents-size-color { - background-color: @colortheme_logo-2; + background-color: @cryptpad_color_brand; } } } @@ -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; } } } @@ -255,7 +249,7 @@ } } .cp-spinner { - border-color: @colortheme_logo-1; + border-color: @cryptpad_color_brand; border-top-color: transparent; } } diff --git a/customize.dist/src/less2/include/notifications.less b/customize.dist/src/less2/include/notifications.less index a24ad32d3..46209eb6a 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,19 +35,19 @@ &.cp-clickable { cursor: pointer; &:hover { - background-color: rgba(0,0,0,0.1); + background-color: @cp_dropdown-bg-hover; } } } .cp-notification-dismiss { - color: black; + color: @cp_dropdown-fg; width: 25px; display: flex; align-items: center; 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..0ca6930a6 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(@cryptpad_color_brand, 10%); } } } diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less index 4273b0b9a..35d22f197 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,12 +66,16 @@ #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; // Following rules are only in settings .cp-sidebarlayout-element { + pre { + color: @cryptpad_text_col; // XXX + } label:not(.noTitle), .label { display: block; font-weight: bold; @@ -84,7 +83,7 @@ } .cp-sidebarlayout-description { display: block; - color: @description-color; + color: @cp_sidebar-hint; margin-bottom: 5px; p { margin-bottom: 0; @@ -111,7 +110,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 { @@ -131,38 +130,6 @@ span.cp-password-container { margin-bottom: 1px; } -/* - button.btn { - @button-bg: @colortheme_sidebar-button-bg; - @button-red-bg: @colortheme_sidebar-button-red-bg; - @button-alt-bg: @colortheme_sidebar-button-alt-bg; - background-color: @button-bg; - border-color: darken(@button-bg, 10%); - color: white; - .fa { - margin-right: 0.2em; - } - &:hover { - background-color: darken(@button-bg, 10%); - } - &.btn-secondary { - background-color: @button-alt-bg; - border-color: darken(@button-alt-bg, 10%); - color: black; - &:hover { - background-color: darken(@button-alt-bg, 10%); - } - } - &.btn-danger { - background-color: @button-red-bg; - border-color: darken(@button-red-bg, 10%); - color: white; - &:hover { - background-color: darken(@button-red-bg, 10%); - } - } - } -*/ } @media screen and (max-width: @browser_media-medium-screen) { flex-flow: column; diff --git a/customize.dist/src/less2/include/support.less b/customize.dist/src/less2/include/support.less index 105599ada..1667b7d6e 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; @@ -11,6 +11,9 @@ width: @sidebar_button-width; margin-bottom: 10px; } + hr { + border-color: @msg-bg; + } textarea { width: 2*@sidebar_button-width; max-width: 90%; @@ -25,7 +28,7 @@ margin-right: 10px; } &> span { - border: 1px solid #ddd; + border: 1px solid @fromme-bg; margin-right: 5px; padding: 10px; } @@ -58,6 +61,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/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/tokenfield.less b/customize.dist/src/less2/include/tokenfield.less index e3d2c3e5d..a8a9805ce 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; @@ -74,6 +69,7 @@ opacity: 1; font-family: Arial; display: inline-block; + text-decoration: none !important; line-height: 1.49em; font-size: 1.1em; margin-left: 5px; @@ -81,16 +77,13 @@ height: 100%; vertical-align: middle; padding-right: 4px; - } - &.active { - border-color: rgba(82, 168, 236, 0.8); - } - &.duplicate { - border-color: #ebccd1; + color: @cp_token-fg; + &:hover { + color: contrast(@cp_token-fg, darken(@cp_token-fg, 10%), lighten(@cp_token-fg, 10%)); + } } } .token-input { - background: none; flex: 1; border: 0; padding: 0; 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 70abfea03..90d072063 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -15,8 +15,9 @@ @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%); + @desat-color: desaturate(@bg-color, 20%); + @toolbar-bg-color-light: contrast(@cp_toolbar-fg, lighten(@bg-color, 30%), darken(@desat-color, 20%)); + @toolbar-bg-color-active: contrast(@cp_toolbar-fg, lighten(@bg-color, 20%), darken(@desat-color, 10%)); }; .toolbar_main ( @@ -37,11 +38,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 +60,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 +70,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 +103,7 @@ } background: transparent; &:hover { - background-color: rgba(50,50,50,0.3); + background-color: @cp_toolbar-fade3; } } @@ -174,7 +175,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 +195,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 +204,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 +264,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 +337,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 +346,13 @@ 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; + color: @cryptpad_text_col; &:hover { - color: @toolbar-color-light; + color: contrast(@cp_toolbar-bg, darken(@cp_toolbar-fg, 10%), lighten(@cp_toolbar-fg, 10%)); } } } @@ -366,8 +365,6 @@ } } - @toolbar-green: #5cb85c; - box-sizing: border-box; padding: 0px; display: flex; @@ -431,6 +428,7 @@ margin: 0; }*/ + // XXX I don't think we still use any select in the toolbar select { margin-left: 5px; margin-right: 5px; @@ -568,10 +566,7 @@ } .cp-toolbar-limit { - color: @colortheme_toolbar-warn; - } - .cp-dropdown-content.cp-dropdown-left a { - color: black; + color: @cp_toolbar-warn; } } @@ -594,7 +589,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; @@ -603,7 +598,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; } @@ -624,7 +619,7 @@ //flex: 1; } .cp-toolbar-title { - color: @cryptpad_text_col; + color: @cp_toolbar-fg; flex: 1; overflow: hidden; text-overflow: ellipsis; @@ -759,7 +754,7 @@ } &:hover { border-color: transparent; - background-color: rgba(50,50,50,0.1); + background-color: @cp_toolbar-fade1; } span { vertical-align: top; @@ -769,7 +764,7 @@ } } .cp-notifications-empty { - color: black; + color: @cp_dropdown-fg; padding: 5px; } button { @@ -809,8 +804,13 @@ padding: 10px; svg { - fill: @toolbar-bg-color; - fill: var(--toolbar-bg-color); + #outline, #squares { + fill: @toolbar-bg-color; + fill: var(--toolbar-bg-color); + } + #background { + fill: @cp_toolbar-logo-bg; + } } img { @@ -852,6 +852,7 @@ .cp-dropdown-content { margin: 0; + padding-bottom: 10px; } & > button { display: flex; @@ -862,7 +863,7 @@ padding: 0; &:hover { border-color: transparent; - background-color: rgba(50,50,50,0.1); + background-color: @cp_toolbar-fade1; } span { text-align: center; @@ -891,7 +892,7 @@ border-radius: 0; background: transparent; &:hover { - background-color: rgba(0,0,0,0.2); + background-color: @cp_toolbar-fade1; } } } @@ -900,7 +901,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; @@ -928,7 +929,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; @@ -939,7 +940,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); @@ -1065,7 +1066,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 { @@ -1076,11 +1077,11 @@ 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 - color: black; + color: @cp_dropdown-fg; .tools_unselectable(); .fa { font-size: 17px; @@ -1111,8 +1112,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; } } } @@ -1120,7 +1121,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/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..d4b03e89c 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 { @@ -62,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 { @@ -101,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 { @@ -114,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/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/customize.dist/src/less2/pages/page-404.less b/customize.dist/src/less2/pages/page-404.less index a42391e66..1fe18bd90 100644 --- a/customize.dist/src/less2/pages/page-404.less +++ b/customize.dist/src/less2/pages/page-404.less @@ -5,7 +5,7 @@ html, body { .font_main(); margin: 0px; padding: 0px; - background-color: @colortheme_info-background; + background-color: @cp_static-bg; color: @cryptpad_text_col; font-family: "IBM Plex Mono"; #cp-main { @@ -29,6 +29,9 @@ html, body { #cp-scramble, #cp-link { font-size: 20px; } + #cp-link { + color: @cryptpad_color_link; + } } } diff --git a/customize.dist/src/less2/pages/page-contact.less b/customize.dist/src/less2/pages/page-contact.less index 4ae651d61..c305f087a 100644 --- a/customize.dist/src/less2/pages/page-contact.less +++ b/customize.dist/src/less2/pages/page-contact.less @@ -21,9 +21,11 @@ border-radius: 0; margin-bottom: 1em; border: 0; + background-color: @cp_static-card-bg; &:hover, &:focus { text-decoration: none; - background-color: @colortheme_logo_2_light; + color: @cryptpad_text_col; + background-color: @cryptpad_color_brand_fadest; } @media (max-width: 1200px) and (min-width: 769px) { min-height: 139px; diff --git a/customize.dist/src/less2/pages/page-features.less b/customize.dist/src/less2/pages/page-features.less index 95c79b1b0..5ec076a34 100644 --- a/customize.dist/src/less2/pages/page-features.less +++ b/customize.dist/src/less2/pages/page-features.less @@ -10,8 +10,8 @@ } .cp-features-register-button { font-size: 20px; - color: #fff; - background: @colortheme_logo-2; + color: @cryptpad_color_white; + background: @cryptpad_color_brand; border-radius: 0; &:hover { cursor: pointer; @@ -21,8 +21,10 @@ .card { .cp-shadow(); border: none; + background-color: @cp_static-card-bg; + border-radius: 0px;; .title-card { - background-color: @colortheme_logo-2; + background-color: @cryptpad_color_brand; padding: 20px; } .card-body, .title-card { @@ -37,7 +39,10 @@ &.cp-pricing { div { font-size: 1.2em; - color: @colortheme_logo-2; + color: @cp_static-link; + a { + text-decoration: underline; + } &:first-child { font-weight: bold; } @@ -46,10 +51,13 @@ } } } + &:last-child { + border-top: 1px solid fade(@cryptpad_text_col, 30%); + } } } h3 { - color: #fff; + color: @cryptpad_color_white; } .list-group { li { @@ -67,7 +75,7 @@ content: "\f00c"; font-family: "FontAwesome"; font-size: 14px; - color: @colortheme_logo-2; + color: @cryptpad_color_brand; } } &.cp-content { @@ -84,13 +92,12 @@ font-size: 0.8em; } .list-group-item { - border-bottom: 1px solid rgba(0,0,0,0.125); + background-color: transparent; &:first-child { - border-top: 1px solid rgba(0,0,0,0.125); + border-top: 1px solid fade(@cryptpad_text_col, 30%); } - &:last-child { - border-bottom-right-radius: 0px; - border-bottom-left-radius: 0px; + &:not(:last-child) { + border-bottom: 1px solid fade(@cryptpad_text_col, 30%); } } } diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less index 98fe7ae4b..8c5fdc164 100644 --- a/customize.dist/src/less2/pages/page-index.less +++ b/customize.dist/src/less2/pages/page-index.less @@ -21,28 +21,17 @@ flex-flow: column; justify-content: space-around; justify-content: space-evenly; + .alert-info { + font-size: 16px; + border-radius: 0px; + } } } body { font-family: "Open Sans", Helvetica; color: @cryptpad_text_col; } - .cp-right { - .cp-register-btn { - padding: 0.5em 1em 0.7em 1em; - border: 2px solid #fff; - &:hover { - transform: scale(1.05); - } - } - .cp-login-btn { - color: #fff; - padding: 0.5em 1em 0.7em 1em; - &:hover { - transform: scale(1.05); - } - } - } + .cp-home-hero { width: 100%; margin-bottom: 50px; @@ -54,7 +43,7 @@ align-items: center; justify-content: center; flex-direction: column; - color: @colortheme_logo-2; + color: @cryptpad_color_brand; margin-top: 1.5em; img { max-width: 200px; @@ -71,7 +60,7 @@ .tag-line { text-align: center; font-size: 1.4em; - //font-style: italic; + color: @cp_static-link; } } @@ -86,6 +75,7 @@ justify-content: space-around; a { margin: 10px; + text-decoration: none; } @media screen and (max-width: 768px) { margin-top: 40px; @@ -158,7 +148,8 @@ .cp-callout-@{key} { i { color: @value; } &:hover { - background-color: lighten(@value, 30%); + @desat: desaturate(@value, 15%); + background-color: contrast(@cryptpad_text_col, lighten(@value, 30%), darken(@desat, 20%)); i { color: @cryptpad_text_col; } } } @@ -177,7 +168,7 @@ width: 100%; div { .infopages_link(); - color: #fff; + color: @cryptpad_color_white; .fa, .cptools { font-size: inherit; padding: 0; @@ -187,17 +178,6 @@ } } - #cp-main { - .cp-container { - .row.cp-index-section { - margin: 50px 0px; - .small-logo { - max-width: 40%; - } - } - } - } - @media (min-width: 576px) and (max-width: 767px) { .container { padding-left: 0; diff --git a/customize.dist/src/less2/pages/page-login.less b/customize.dist/src/less2/pages/page-login.less index 98eafe483..07fcc7cb5 100644 --- a/customize.dist/src/less2/pages/page-login.less +++ b/customize.dist/src/less2/pages/page-login.less @@ -21,33 +21,36 @@ .cp-container { #userForm { .cp-shadow(); - background-color: white; + background-color: @cp_static-card-bg; padding: 10px; .form-control { border-radius: 0; color: @cryptpad_text_col; + background-color: @cp_forms-bg; margin-bottom: 5px; &:focus { - border-color: @colortheme_logo-2; + border-color: @cryptpad_color_brand; } + .tools_placeholder-color(); } .checkbox-container { color: @cryptpad_text_col; } } .align-items-center { - box-shadow: 0 5px 15px rgba(69,145,196, 0.3); - background: #fff; + box-shadow: 0 5px 15px @cp_shadow-color; + background: @cryptpad_color_white; } .extra { margin-top: 1em; #register { - border-color: @colortheme_logo-2; - background: #fff; - color: @colortheme_logo-2; + border-color: @cryptpad_color_brand; + background: @cryptpad_color_white; + color: @cryptpad_color_brand; padding: 10px; border-radius: 0; + margin: 0px; } } } diff --git a/customize.dist/src/less2/pages/page-register.less b/customize.dist/src/less2/pages/page-register.less index ebd89ed07..ce4309822 100644 --- a/customize.dist/src/less2/pages/page-register.less +++ b/customize.dist/src/less2/pages/page-register.less @@ -78,7 +78,7 @@ } #userForm { padding: 15px; - background-color: white; + background-color: @cp_static-card-bg; position: relative; z-index: 2; margin-bottom: 100px; @@ -86,14 +86,19 @@ .form-control { border-radius: 0; color: @cryptpad_text_col; + background-color: @cp_forms-bg; margin-top: 5px; &:focus { - border-color: @cryptpad_color_blue; + border-color: @cryptpad_color_brand; } + .tools_placeholder-color(); } .checkbox-container { color: @cryptpad_text_col; } + button#register { + margin: 0px; + } } .cp-register-notes { @@ -111,7 +116,7 @@ content: "\f071"; } .red { - color: #ff0000; + color: @cryptpad_color_red; } } } diff --git a/customize.dist/src/less2/pages/page-what-is-cryptpad.less b/customize.dist/src/less2/pages/page-what-is-cryptpad.less index 4fabcf50b..e6c1edc92 100644 --- a/customize.dist/src/less2/pages/page-what-is-cryptpad.less +++ b/customize.dist/src/less2/pages/page-what-is-cryptpad.less @@ -6,33 +6,10 @@ .small-logos { img { - max-width: 40%; + max-width: 40% !important; padding: 10px; margin-top: 0px; } } - - // .cp-container { - // padding-top: 3em; - // padding-bottom: 3em; - // h2 { - // margin-top: 0; - // font-weight: 700; - // color: @cryptpad_header_col; - // } - // p { - // color: @cryptpad_text_col; - // } - // #zeroknowledge { - // width: 65%; - // } - // .row { - // margin-bottom: 1.5em; - // } - // img { - // display: block; - // margin: 0 auto; - // } - // } } diff --git a/customize.dist/src/outer.css b/customize.dist/src/outer.css index 75f449e61..564dc8472 100644 --- a/customize.dist/src/outer.css +++ b/customize.dist/src/outer.css @@ -2,7 +2,12 @@ html, body { margin: 0px; padding: 0px; } -#sbox-iframe, #sbox-secure-iframe { +@media (prefers-color-scheme: dark) { + html, body { + background: black; + } +} +iframe-placeholder, #sbox-iframe, #sbox-secure-iframe { position: fixed; top:0; left:0; bottom:0; right:0; diff --git a/customize.dist/template.js b/customize.dist/template.js index 427dafd00..7721339f3 100644 --- a/customize.dist/template.js +++ b/customize.dist/template.js @@ -52,8 +52,6 @@ $(function () { } else if (/^\/($|^\/index\.html$)/.test(pathname)) { // TODO use different top bar require([ '/customize/main.js', ], function () {}); - } else if (/invite/.test(pathname)) { - require([ '/invite/main.js'], function () {}); } else { require([ '/customize/main.js', ], function () {}); } diff --git a/www/admin/app-admin.less b/www/admin/app-admin.less index 940d6d712..2ecf99bed 100644 --- a/www/admin/app-admin.less +++ b/www/admin/app-admin.less @@ -104,8 +104,8 @@ color: #666; .cp-support-ispremium { padding: 0 5px; - color: @colortheme_cp-red; - background-color: lighten(@colortheme_cp-red, 25%); + color: @cp_admin-premium-fg; + background-color: @cp_admin-premium-bg; } } } @@ -119,18 +119,18 @@ } .cp-support-list-message { &:last-child:not(.cp-support-fromadmin) { - color: @colortheme_cp-red; - background-color: lighten(@colortheme_form-warning, 25%); + color: @cp_admin-last-fg; + background-color: @cp_admin-last-bg; .cp-support-showdata { - background-color: lighten(@colortheme_form-warning, 30%); + background-color: lighten(@cp_admin-last-bg, 5%); } } &:last-child { &.cp-support-frompremium { - background-color: lighten(@colortheme_cp-red, 25%); + background-color: @cp_admin-premium-bg; .cp-support-showdata { - background-color: lighten(@colortheme_cp-red, 30%); + background-color: lighten(@cp_admin-premium-bg, 30%); } } } @@ -160,17 +160,18 @@ } .cp-support-fromadmin { - color: @colortheme_logo-2; - background-color: #FFF; + color: @cp_admin-isadmin-fg; + background-color: @cp_admin-isadmin-bg; .cp-support-message-content { - color: @colortheme_logo-2; + color: @cp_admin-isadmin-fg; } } table#cp-performance-table { td, th { padding: 5px; - border: 1px solid #222; + color: @cryptpad_text_col; + border: 1px solid @cryptpad_text_col; } } diff --git a/www/admin/index.html b/www/admin/index.html index c59dd8edc..96a3cce86 100644 --- a/www/admin/index.html +++ b/www/admin/index.html @@ -6,7 +6,7 @@ - + - diff --git a/www/kanban/inner.js b/www/kanban/inner.js index b45a01c60..3c399389a 100644 --- a/www/kanban/inner.js +++ b/www/kanban/inner.js @@ -266,6 +266,7 @@ define([ editor.refresh(); } }; + cm.configureTheme(common, function () {}); SFCodeMirror.mkIndentSettings(editor, framework._.cpNfInner.metadataMgr); editor.on('change', function () { var val = editor.getValue(); diff --git a/www/kanban/jkanban.css b/www/kanban/jkanban.css deleted file mode 100644 index bb8d5eb6a..000000000 --- a/www/kanban/jkanban.css +++ /dev/null @@ -1,97 +0,0 @@ -.kanban-container * { - box-sizing: border-box; -} - -.kanban-board { - position: relative; - transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); - margin: 10px; - vertical-align: top; - display: flex; - flex-flow: column; - width: 300px; - margin: 10px 5px; -} - -.kanban-board.disabled-board { - opacity: .3; -} - -.kanban-board.is-moving.gu-mirror { - transform: rotate(3deg); - opacity: 0.8; -} - -.kanban-board.is-moving.gu-mirror .kanban-drag { - overflow: hidden; - padding-right: 50px; -} - -.kanban-board header { - font-size: 16px; - padding: 10px; -} - -.kanban-board header .kanban-title-board { - font-weight: 700; - margin: 0; - padding: 0; - display: inline; - cursor: text; -} - -.kanban-board header .kanban-title-button { - float: right; - line-height: 1; - padding: .25rem .5rem; -} - - -.kanban-item { - background: #fff; - padding: 15px; - margin-bottom: 10px; -} - -.kanban-item:hover { - cursor: move; -} - -.kanban-item:last-child { - margin: 0; -} - -.kanban-item.is-moving.gu-mirror { - transform: rotate(3deg); - height: auto !important; - opacity: 0.8; -} - -/* Dragula CSS */ - -.gu-mirror { - position: fixed !important; - margin: 0 !important; - z-index: 9999 !important; -} - -.gu-hide { - display: none !important; -} - -.gu-unselectable { - -webkit-user-select: none !important; - -moz-user-select: none !important; - -ms-user-select: none !important; - user-select: none !important; -} - -.gu-transit { - opacity: 0.2 !important; - transform: rotate(0deg) !important; -} - -.form-group { - text-align: right; - margin-button: 5px; -} diff --git a/www/notifications/app-notifications.less b/www/notifications/app-notifications.less index bcb0c9dd7..26fbf48d7 100644 --- a/www/notifications/app-notifications.less +++ b/www/notifications/app-notifications.less @@ -13,7 +13,7 @@ .cp-clickable { cursor: pointer; &:hover { - background-color: rgba(0,0,0,0.1); + background-color: @cp_notif-hover; } } @@ -29,9 +29,8 @@ flex-direction: row; justify-content: flex-start; align-items: center; -// border-radius: 5px 5px 0 0; - background-color: #888; - color: #fff; + background-color: @cp_notif-header-bg; + color: @cp_notif-header-fg; .cp-app-notifications-panel-title { flex-grow: 1; @@ -63,9 +62,8 @@ flex-direction: column; justify-content: flex-start; align-items: stretch; - border: 1px solid #ccc; + border: 1px solid @cp_notif-table-border; border-top: none; -// border-radius: 0 0 5px 5px; overflow: hidden; .cp-notification { @@ -73,12 +71,12 @@ flex-direction: row; justify-content: flex-start; align-items: center; - background-color: #ffffff; + background-color: @cp_notif-bg; &.no-notifications { display: none; padding: 1rem 1rem; font-style: italic; - color: #777; + color: @cp_notif-fg; &:only-child { display: block; } @@ -88,14 +86,14 @@ padding: 0 10px; cursor: pointer; &:hover { - background-color: rgba(0,0,0,0.1); + background-color: @cp_notif-hover; } } &.cp-app-notification-archived { - background-color: #f1f1f1; + background-color: @cp_notif-bg; } &:not(:first-child) { - border-top: 1px solid #ccc; + border-top: 1px solid @cp_notif-table-border; } &.dismissed { display: none; @@ -127,7 +125,7 @@ flex-direction: column; justify-content: center; align-items: center; - border-left: 1px solid #ccc; + border-left: 1px solid @cp_notif-table-border; width: 3rem; } } @@ -141,8 +139,9 @@ align-items: center; width: 100%; padding: 0.5rem; - border: 1px solid #ccc; - color: #333; + background-color: @cp_notif-bg; + border: 1px solid @cp_notif-table-border; + color: @cp_notif-fg; } } diff --git a/www/notifications/index.html b/www/notifications/index.html index c59dd8edc..96a3cce86 100644 --- a/www/notifications/index.html +++ b/www/notifications/index.html @@ -6,7 +6,7 @@ - + -