diff --git a/CHANGELOG.md b/CHANGELOG.md index bb11c061d..6ad1f31f3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,52 @@ +# 4.0.0 (A) + +We're very happy to introduce CryptPad v4.0! + +This release is the culmination of a great deal of work over the last year, in which we searched for the right metaphors and imagery to clearly represent what CryptPad is all about. We've reworked our logo, color theme, text on our static pages, and the icons throughout the platform to convey the calm and safety we want our users to feel. + +Our release schedule typically follows an alphabetical naming scheme, ranging from A for the first (or zero-th) release of the cycle to Z for the last, with a thematic name for each letter. In the rush of preparing translations and double-checking all of our changes we never found time to settle on a theme for this release, but we do find there's some value in maintaining the otherwise arbitrary rhythm we've followed all this time. The progression through the alphabet gives a sense of pace to what can otherwise seem like a endless stream of problems that need solving, and the end of the alphabet prompts us to build towards major milestones like this one. + +With that in mind, you can expect 25 more major releases in this cycle before version 5.0, roughly every three weeks or so depending on circumstances. + +## Goals + +The main intent of this release was to deploy our `rebrand` branch which had been in development for some time. Along the way we also made notable improvements to the sheet editor which will be mentioned below. + +## Update notes + +In the process of redesigning the platform we started using some new features of the LESS CSS pre-processor language that were not supported by the version of lesshint that we were using to scan for errors. We've updated that dev dependency to a newer version (4.5.0 => 6.3.7) which introduced a rather large number of minor dependencies. These are only used during development, not by the server itself, so this is unlikely to have any impact on the software itself. + +Otherwise, this release includes lots of changes to the platform's style sheets and static pages. If you've applied heavy customizations to your instance you might notice errors due to incompatibilities with your local changes. We recommend that you test your customizations against the latest release locally before updating a public instance to avoid service outages. + +To update from 3.25.1 to 4.0.0: + +1. Stop your server +2. Get the latest code from the 4.0.0 tag +3. Install the latest dependencies with `bower update` and `npm i` +4. Restart your server + +## Features + +* We've built a new version of the web-assembly code used to convert between OnlyOffice's internal representation of spreadsheet data and standard formats like XLSX, ODS, and CSV. We've also improved the ability to print whole sheets and selections in the UI. This still depends on the host browser's support of the required web APIs, but it should work in common browsers except maybe Safari and Internet Explorer. +* We found that certain issues reported via the built-in support ticket system were not easy to debug without knowing the id of the user's drive. Support tickets now include a `driveChannel` attribute to simplify this process. +* We've added a variety of settings for the control of how your browser uses a local database to speed up loading times and display cached versions of documents even when disconnected from our server. These are available in the "confidentiality" section of the settings page (https://cryptpad.fr/settings/#security). + +Finally, the "rebrand" part of this release: + +* Our home page features our new logo, a cleaner layout, new text (notably dropping the use of "zero-knowledge" from our explanation), new app icons, softer colors, neater fonts, and a custom illustration of a document shredder that hints at how CryptPad works. +* We no longer include a FAQ page with each instance, and instead link to relevant parts of our dedicated documentation platform (https://docs.cryptpad.fr) from any place that previously referenced the FAQ. This will make it easier for translators to focus on text for the platform's interface if they wish. An updated Frequently Asked Questions will be added to the documentation in the near future. +* Each of our editors now features a dedicated favicon to make it easier to distinguish different CryptPad tabs in your browser. +* The contact page now points to _Element_ instead of Riot, since the Matrix team rebranded in the last while as well. +* The "pricing" or "features" page (features.html) reads the server's configured storage limits from a server endpoint and displays them, rather than hardcoding the default values in the text. +* There is now a custom illustration of a person swallowing a key on the registration page to convey that CryptPad admins cannot restore access to documents if users lose or forget their credentials. This is underscored by highlights to the explanatory text displayed to the left of the form. +* Our loading screen now features a much simpler color scheme instead of the vibrant blue blocks. This is part of an effort to pave the way for a _dark theme_ that we hope to introduce very soon. +* Lastly, we've added a number of semantic cues in various places to improve the experience of users that rely on screen-readers. There's still a lot to do in this regard, but this big rewrite was a good opportunity to review some easy pain-points to alleviate. + +## Bug fixes + +* We found andd fixed a regression in the slide app which caused newly created documents to be initialized without a title. +* Thanks to a helpful user-report we were able to identify an issue in our rich text editor's _comments_ system that prevented iOS users from typing. + # ZyzomysPedunculatus' revenge (3.25.1) This minor release is primarily intended to fix some minor issues that were introduced or detected following our 3.25.0 release, but it also includes some major improvements that we want to test and stabilize before our upcoming 4.0.0 release. diff --git a/customize.dist/CryptPad_logo_grey.svg b/customize.dist/CryptPad_logo_grey.svg index cbadd7697..083bbd4e1 100644 --- a/customize.dist/CryptPad_logo_grey.svg +++ b/customize.dist/CryptPad_logo_grey.svg @@ -1,129 +1,22 @@ - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + 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/images/collaboration.png b/customize.dist/images/collaboration.png index 16e5dc77b..decbb9b58 100644 Binary files a/customize.dist/images/collaboration.png and b/customize.dist/images/collaboration.png differ diff --git a/customize.dist/loading-logo.png b/customize.dist/loading-logo.png deleted file mode 100644 index 23753684f..000000000 Binary files a/customize.dist/loading-logo.png and /dev/null differ 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.js b/customize.dist/pages.js index 08bd29357..838378e9a 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -179,5 +179,22 @@ define([ return crowdFunding; }; + Pages.subscribeButton = function (onClick) { + var _link = h('a', { + href: "/accounts/", + }); + + var subscribe = h('button', [ + Msg.subscribe_button + ]); + + $(subscribe).click(function () { + _link.click(); + if (typeof(onClick) === 'function') { onClick(); } + }); + + return subscribe; + }; + return Pages; }); diff --git a/customize.dist/pages/features.js b/customize.dist/pages/features.js index 14c901ce4..a71d085d5 100644 --- a/customize.dist/pages/features.js +++ b/customize.dist/pages/features.js @@ -1,12 +1,13 @@ define([ 'jquery', '/common/hyperscript.js', + '/common/common-util.js', '/customize/messages.js', '/customize/application_config.js', '/common/outer/local-store.js', '/customize/pages.js', '/api/config', -], function ($, h, Msg, AppConfig, LocalStore, Pages, Config) { +], function ($, h, Util, Msg, AppConfig, LocalStore, Pages, Config) { var accounts = { donateURL: AppConfig.donateURL || "https://opencollective.com/cryptpad/", upgradeURL: AppConfig.upgradeURL @@ -55,7 +56,7 @@ define([ }; SPECIAL_GROUP_ITEMS.storage1 = function (f) { return groupItemTemplate( - Msg._getKey('features_f_' + f, [Config.defaultStorageLimit / 1024 / 1024]), + Msg._getKey('features_f_' + f, [Util.getPrettySize(Config.defaultStorageLimit, Msg)]), Msg['features_f_' + f + '_note'] ); }; diff --git a/customize.dist/pages/index.js b/customize.dist/pages/index.js index ef51d18b3..d099640e4 100644 --- a/customize.dist/pages/index.js +++ b/customize.dist/pages/index.js @@ -72,14 +72,10 @@ define([ }); UI.addTooltips(); - var crowdFunding = Pages.crowdfundingButton(function () { - Feedback.send('HOME_SUPPORT_CRYPTPAD'); - }); - 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' @@ -90,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' }) @@ -108,7 +104,9 @@ define([ h('div.col-sm-6', [ h('h2', Msg.home_support_title), Pages.setHTML(h('span'), Msg.home_support), - crowdFunding + Pages.crowdfundingButton(function () { + Feedback.send('HOME_SUPPORT_CRYPTPAD'); + }), ]) ]) ]; @@ -131,7 +129,7 @@ define([ icons, ]) ]), - blocks, + blocks ]), Pages.infopageFooter(), ]), diff --git a/customize.dist/pages/what-is-cryptpad.js b/customize.dist/pages/what-is-cryptpad.js index a2c46ec52..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' @@ -57,16 +57,20 @@ define([ h('div.col-md-6.order-md-2', [ Pages.setHTML(h('h2'), Msg.whatis_model), Pages.setHTML(h('span'), Msg.whatis_model_info), + Config.allowSubscriptions ? + Pages.subscribeButton(function () { + Feedback.send('WHATIS_SUBSCRIBE_CRYPTPAD'); + }) : undefined, Pages.crowdfundingButton(function () { Feedback.send('WHATIS_SUPPORT_CRYPTPAD'); }), ]), 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; - -// Sidebar layout (profile / settings) -@colortheme_sidebar-active: #fff; -@colortheme_sidebar-left-bg: #eee; -@colortheme_sidebar-left-fg: #000; -@colortheme_sidebar-left-branch: #888; -@colortheme_sidebar-right-bg: #fff; -@colortheme_sidebar-right-fg: #000; -@colortheme_sidebar-description: #777; -@colortheme_sidebar-button-bg: #3066e5; -@colortheme_sidebar-button-red-bg: #e54e4e; -@colortheme_sidebar-button-alt-bg: #fff; - -@cryptpad_color_blue: #4591C4; -@cryptpad_color_grey: #999999; -@cryptpad_color_light_grey: #e0e0e0; -@cryptpad_header_col: #1E1F1F; -@cryptpad_text_col: #3F4141; +// 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%); + +@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_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; + +@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%); -@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; +// 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; - &:hover { - background-color: lighten(@corner-blue, 50%); - border-color: lighten(@corner-blue, 50%); - } - } - &.cp-corner-cancel { - background-color: @corner-blue; - color: @corner-white; - &: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; + background-color: @corner-fg; + color: @corner-bg; &:hover { - background-color: darken(@corner-blue, 10%); - border-color: darken(@corner-blue, 10%); + background-color: @corner-fg-alt; + border-color: @corner-fg-alt; } } &.cp-corner-cancel { - background-color: @corner-white; - color: @corner-blue; + background-color: @corner-bg; + color: @corner-fg; &: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 da2b10485..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,35 +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: @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; } } @@ -202,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; } } } @@ -228,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; @@ -252,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; @@ -266,7 +248,7 @@ font-size: 30px; padding: 15px; font-style: italic; - color: @cryptpad_color_grey; + color: fade(@cryptpad_text_col, 80%); } @@ -277,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; @@ -285,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; @@ -327,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 { @@ -386,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 { @@ -428,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 { @@ -439,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 { @@ -467,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; @@ -476,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; @@ -492,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; @@ -505,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; } } } @@ -532,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 { @@ -600,7 +567,7 @@ margin: 0; padding: 0; border-radius: 0; - border: 1px solid #ddd; + border: 1px solid transparent; font-size: 14px; height: auto; } @@ -616,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; @@ -655,7 +623,7 @@ li { display: flex; input { - border: 1px solid #ddd; + border: 1px solid transparent; margin: 0; padding: 0 4px; flex: 1; @@ -731,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; @@ -745,7 +713,7 @@ &.cp-app-drive-sort-clickable { cursor: pointer; &:hover { - background: @drive_table-header-bg; + background: @cp_drive-icon-hover; } } } @@ -818,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; @@ -829,7 +797,7 @@ } &.cp-app-drive-path-separator { - color: #ccc; + color: @cp_drive-header-fg; cursor: default; } @@ -838,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; @@ -864,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; @@ -897,7 +861,7 @@ } .cp-app-drive-new-name { - color: @cryptpad_text_col; + color: @cp_drive-fg; white-space: nowrap; } @@ -951,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; @@ -962,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 b6d909a73..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; @@ -105,86 +100,69 @@ transition: none; .fa, .cptools { - margin-right: 0.2em; + margin-right: 5px; } .cptools { 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; - &:hover, &:not(:disabled):active, &:focus { - border-color: @colortheme_alertify-red; - color: @colortheme_alertify-red-color; - background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%)); - } - } - - &.safe, &.btn-safe { - background-color: @colortheme_alertify-green; - border-color: @colortheme_alertify-green-border; - color: @colortheme_alertify-green-color; + border-color: @cp_buttons-red; + color: @cp_buttons-red-text; &: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 354493e1f..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,33 +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 { @@ -127,19 +142,18 @@ body { } } footer { - @footer-color: #d9d9d9; // XXX 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 { @@ -155,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; @@ -174,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; @@ -233,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 { @@ -252,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/lib/commands/admin-rpc.js b/lib/commands/admin-rpc.js index 595b4c6dc..32338b772 100644 --- a/lib/commands/admin-rpc.js +++ b/lib/commands/admin-rpc.js @@ -5,6 +5,7 @@ const getFolderSize = require("get-folder-size"); const Util = require("../common-util"); const Ulimit = require("ulimit"); const Decrees = require("../decrees"); +const Pinning = require("./pin-rpc"); var Fs = require("fs"); @@ -324,6 +325,13 @@ var getLimits = function (Env, Server, cb) { cb(void 0, Env.limits); }; +// CryptPad_AsyncStore.rpc.send('ADMIN', ['GET_USER_TOTAL_SIZE', "CrufexqXcY/z+eKJlEbNELVy5Sb7E/EAAEFI8GnEtZ0="], console.log) +var getUserTotalSize = function (Env, Server, cb, data) { + var signingKey = Array.isArray(data) && data[1]; + if (typeof(signingKey) !== 'string' || signingKey.length < 44) { return void cb("EINVAL"); } // FIXME use a standard check for this + Pinning.getTotalSize(Env, signingKey, cb); +}; + var commands = { ACTIVE_SESSIONS: getActiveSessions, ACTIVE_PADS: getActiveChannelCount, @@ -349,6 +357,7 @@ var commands = { GET_LIMITS: getLimits, SET_LAST_EVICTION: setLastEviction, GET_WORKER_PROFILES: getWorkerProfiles, + GET_USER_TOTAL_SIZE: getUserTotalSize, }; Admin.command = function (Env, safeKey, data, _cb, Server) { diff --git a/lib/defaults.js b/lib/defaults.js index 246994d7c..3d5e74576 100644 --- a/lib/defaults.js +++ b/lib/defaults.js @@ -50,7 +50,6 @@ Default.httpHeaders = function () { "Access-Control-Allow-Origin": "*", }; }; -// XXX check here for any deleted pages Default.mainPages = function () { return [ 'index', diff --git a/lib/hk-util.js b/lib/hk-util.js index af114c989..2872b802d 100644 --- a/lib/hk-util.js +++ b/lib/hk-util.js @@ -653,7 +653,15 @@ const handleGetHistory = function (Env, Server, seq, userId, parsed) { Server.send(userId, [0, HISTORY_KEEPER_ID, 'MSG', userId, JSON.stringify(msg)], readMore); }, (err) => { if (err && err.code !== 'ENOENT') { - if (err.message !== 'EINVAL') { Log.error("HK_GET_HISTORY", { + if (err.message === "EUNKNOWN") { + Log.error("HK_GET_HISTORY", { + channel: channelName, + lastKnownHash: lastKnownHash, + userId: userId, + sessions: Object.keys(HK.getNetfluxSession(Env, userId) || {}), + err: err && err.message || err, + }); + } else if (err.message !== 'EINVAL') { Log.error("HK_GET_HISTORY", { channel: channelName, err: err && err.message || err, stack: err && err.stack, diff --git a/package-lock.json b/package-lock.json index a7c734b9a..08335a04c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "cryptpad", - "version": "3.25.1", + "version": "4.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 8cb129a6a..b93299935 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "cryptpad", "description": "realtime collaborative visual editor with zero knowlege server", - "version": "3.25.1", + "version": "4.0.0", "license": "AGPL-3.0+", "repository": { "type": "git", diff --git a/profile.md b/profile.md deleted file mode 100644 index 469617cb5..000000000 --- a/profile.md +++ /dev/null @@ -1,22 +0,0 @@ -```javascript -CryptPad_AsyncStore.rpc.send('ADMIN', - ['GET_WORKER_PROFILES'], - (e, _o) => { - var o = _o[0]; - // console.log(o[0]) - var sorted = Object.keys(o).sort(function (a, b) { - if (o[b] - o[a] <= 0) { return -1; } - return 1; - }); - var x = {}; - //console.log(sorted); - var total = 0; - sorted.forEach(function (k) { total += o[k]; }); - sorted.forEach(function (k) { - console.log("[%s] %ss running time (%s%)", k, o[k], Math.floor((o[k] / total) * 100)); - }); - } -) -``` - - diff --git a/www/admin/app-admin.less b/www/admin/app-admin.less index d19e6b4d7..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,10 +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; + 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 61a7ad23d..3c399389a 100644 --- a/www/kanban/inner.js +++ b/www/kanban/inner.js @@ -134,6 +134,24 @@ define([ }; var addEditItemButton = function () {}; + + var now = function () { return +new Date(); }; + var _lastUpdate = 0; + var _updateBoards = function (framework, kanban, boards) { + _lastUpdate = now(); + kanban.setBoards(Util.clone(boards)); + kanban.inEditMode = false; + addEditItemButton(framework, kanban); + }; + var _updateBoardsThrottle = Util.throttle(_updateBoards, 1000); + var updateBoards = function (framework, kanban, boards) { + if ((now() - _lastUpdate) > 5000 || framework.isLocked()) { + _updateBoards(framework, kanban, boards); + return; + } + _updateBoardsThrottle(framework, kanban, boards); + }; + var onRemoteChange = Util.mkEvent(); var editModal; var PROPERTIES = ['title', 'body', 'tags', 'color']; @@ -146,10 +164,9 @@ define([ var isBoard, id; var offline = false; - var update = Util.throttle(function () { - kanban.setBoards(kanban.options.boards); - addEditItemButton(framework, kanban); - }, 400); + var update = function () { + updateBoards(framework, kanban, kanban.options.boards); + }; var commit = function () { framework.localChange(); @@ -249,6 +266,7 @@ define([ editor.refresh(); } }; + cm.configureTheme(common, function () {}); SFCodeMirror.mkIndentSettings(editor, framework._.cpNfInner.metadataMgr); editor.on('change', function () { var val = editor.getValue(); @@ -399,7 +417,9 @@ define([ framework.onEditableChange(function (unlocked) { editor.setOption('readOnly', !unlocked); $title.prop('disabled', unlocked ? '' : 'disabled'); - $(_field.element).tokenfield(unlocked ? 'enable' : 'disable'); + if (_field) { + $(_field.element).tokenfield(unlocked ? 'enable' : 'disable'); + } $modal.find('nav button.danger').prop('disabled', unlocked ? '' : 'disabled'); offline = !unlocked; @@ -616,7 +636,7 @@ define([ gutter: '5px', widthBoard: '300px', buttonContent: '❌', - readOnly: framework.isReadOnly(), + readOnly: framework.isReadOnly() || framework.isLocked(), tagsAnd: _tagsAnd, refresh: function () { onRedraw.fire(); @@ -830,7 +850,8 @@ define([ openLink: openLink, getTags: getExistingTags, cursors: remoteCursors, - boards: boards + boards: boards, + _boards: Util.clone(boards), }); framework._.cpNfInner.metadataMgr.onChange(function () { @@ -841,7 +862,7 @@ define([ // If the rendering has changed, update the value and redraw kanban.options.tagsAnd = tagsAnd; _tagsAnd = tagsAnd; - kanban.setBoards(kanban.options.boards); + updateBoards(framework, kanban, kanban.options.boards); }); if (migrated) { framework.localChange(); } @@ -849,7 +870,7 @@ define([ var addBoardDefault = document.getElementById('kanban-addboard'); $(addBoardDefault).attr('title', Messages.kanban_addBoard); addBoardDefault.addEventListener('click', function () { - if (framework.isReadOnly()) { return; } + if (framework.isReadOnly() || framework.isLocked()) { return; } /*var counter = 1; // Get the new board id @@ -1031,7 +1052,7 @@ define([ mkHelpMenu(framework); } - if (framework.isReadOnly()) { + if (framework.isReadOnly() || framework.isLocked()) { $container.addClass('cp-app-readonly'); } else { framework.setFileImporter({}, function (content /*, file */) { @@ -1166,9 +1187,8 @@ define([ if (Sortify(currentContent) !== Sortify(remoteContent)) { var cursor = getCursor(); verbose("Content is different.. Applying content"); - kanban.setBoards(remoteContent); - kanban.inEditMode = false; - addEditItemButton(framework, kanban); + kanban.options.boards = remoteContent; + updateBoards(framework, kanban, remoteContent); restoreCursor(cursor); onRemoteChange.fire(); } @@ -1190,8 +1210,17 @@ define([ var items = boards.items || {}; var data = boards.data || {}; var list = boards.list || []; + + // Remove duplicate boards + list = boards.list = Util.deduplicateString(list); + Object.keys(data).forEach(function (id) { - if (list.indexOf(Number(id)) === -1) { delete data[id]; } + if (list.indexOf(Number(id)) === -1) { + list.push(Number(id)); + } + // Remove duplicate items + var b = data[id]; + b.item = Util.deduplicateString(b.item || []); }); Object.keys(items).forEach(function (eid) { var exists = Object.keys(data).some(function (id) { 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/kanban/jkanban_cp.js b/www/kanban/jkanban_cp.js index f122eed59..b5285de27 100644 --- a/www/kanban/jkanban_cp.js +++ b/www/kanban/jkanban_cp.js @@ -26,13 +26,14 @@ define([ element: '', gutter: '15px', widthBoard: '250px', - responsive: '700', + responsive: 0, //'700', responsivePercentage: false, boards: { data: {}, items: {}, list: [] - }, + }, // The realtime kanban + _boards: {}, // The displayed kanban. We need to remember the old columns when we redraw getAvatar: function () {}, openLink: function () {}, getTags: function () {}, @@ -298,7 +299,9 @@ define([ // Move to trash? if (target.classList.contains('kanban-trash')) { list.splice(index1, 1); - delete self.options.boards.data[id]; + if (list.indexOf(id) === -1) { + delete self.options.boards.data[id]; + } self.onChange(); return; } @@ -393,10 +396,11 @@ define([ console.log("In drop"); var id1 = Number($(el).attr('data-eid')); + var boardId = Number($(source).closest('.kanban-board').data('id')); // Move to trash? if (target.classList.contains('kanban-trash')) { - self.moveItem(id1); + self.moveItem(boardId, id1); self.onChange(); return; } @@ -416,7 +420,7 @@ define([ } // Move the item - self.moveItem(id1, board2, pos2); + self.moveItem(boardId, id1, board2, pos2); // send event that board has changed self.onChange(); @@ -443,21 +447,43 @@ define([ }); return res; }; - this.moveItem = function (eid, board, pos) { + this.checkItem = function (eid) { var boards = self.options.boards; - var same = -1; - var from = findItem(eid); - // Remove the item from its board - from.forEach(function (obj) { - obj.board.item.splice(obj.pos, 1); - if (obj.board === board) { same = obj.pos; } + var data = boards.data || {}; + var exists = Object.keys(data).some(function (id) { + return (data[id].item || []).indexOf(Number(eid)) !== -1; }); - // If it's a deletion, remove the item data + return exists; + }; + this.moveItem = function (source, eid, board, pos) { + var boards = self.options.boards; + var same = -1; + if (source && boards.data[source]) { + // Remove from this board only + var l = boards.data[source].item; + var idx = l.indexOf(Number(eid)); + if (idx !== -1) { l.splice(idx, 1); } + if (boards.data[source] === board) { same = idx; } + } else { + // Remove the item from all its board + var from = findItem(eid); + from.forEach(function (obj) { + obj.board.item.splice(obj.pos, 1); + if (obj.board === board) { same = obj.pos; } + }); + } + // If it's a deletion and not a duplicate, remove the item data if (!board) { - delete boards.items[eid]; - delete self.cache[eid]; - removeUnusedTags(boards); - self.options.refresh(); + if (!self.checkItem(eid)) { + delete boards.items[eid]; + delete self.cache[eid]; + removeUnusedTags(boards); + self.options.refresh(); + } + return; + } + // If the item already exists in the target board, abort (duplicate) + if (board.item.indexOf(eid) !== -1) { return; } // If it's moved to the same board at a bigger index, decrement the index by one @@ -707,21 +733,29 @@ define([ }; this.addBoard = function (board) { if (!board || !board.id) { return; } + // We need to store all the columns in _boards too because it's used to + // remember what columns were already displayed when we redraw (in order to + // preserve their scroll value) var boards = self.options.boards; boards.data = boards.data || {}; boards.list = boards.list || []; + var _boards = self.options._boards; + _boards.data = _boards.data || {}; + _boards.list = _boards.list || []; // If it already there, abort boards.data[board.id] = board; + _boards.data[board.id] = board; if (boards.list.indexOf(board.id) !== -1) { return; } boards.list.push(board.id); + _boards.list.push(board.id); var boardNode = getBoardNode(board); self.container.appendChild(boardNode); }; this.addBoards = function() { //for on all the boards - var boards = self.options.boards; + var boards = self.options._boards; boards.list = boards.list || []; boards.data = boards.data || {}; var toRemove = []; @@ -759,10 +793,10 @@ define([ var $el = $(self.element); var scrollLeft = $el.scrollLeft(); // Get existing boards list - var list = Util.clone(this.options.boards.list); + var list = Util.clone(this.options._boards.list); // Update memory - this.options.boards = boards; + this.options._boards = Util.clone(boards); // If the tab is not focused but a handler already exists: abort if (!Visible.currently() && onVisibleHandler) { return; } @@ -779,7 +813,7 @@ define([ self.addBoards(); self.options.refresh(); // Preserve scroll - self.options.boards.list.forEach(function (id) { + self.options._boards.list.forEach(function (id) { if (!scroll[id]) { return; } $('.kanban-board[data-id="'+id+'"] .kanban-drag').scrollTop(scroll[id]); }); diff --git a/www/lib/fabric-history.min.js b/www/lib/fabric-history.min.js new file mode 100644 index 000000000..5dd7ebd4f --- /dev/null +++ b/www/lib/fabric-history.min.js @@ -0,0 +1 @@ +fabric.Canvas.prototype.initialize=function(t){return function(...i){return t.call(this,...i),this._historyInit(),this}}(fabric.Canvas.prototype.initialize),fabric.Canvas.prototype.dispose=function(t){return function(...i){return t.call(this,...i),this._historyDispose(),this}}(fabric.Canvas.prototype.dispose),fabric.Canvas.prototype._historyNext=function(){return JSON.stringify(this.toDatalessJSON(this.extraProps))},fabric.Canvas.prototype._historyEvents=function(){return{"object:added":this._historySaveAction,"object:removed":this._historySaveAction,"object:modified":this._historySaveAction,"object:skewing":this._historySaveAction}},fabric.Canvas.prototype._historyInit=function(){this.historyUndo=[],this.historyRedo=[],this.extraProps=["selectable"],this.historyNextState=this._historyNext(),this.on(this._historyEvents())},fabric.Canvas.prototype._historyDispose=function(){this.off(this._historyEvents())},fabric.Canvas.prototype._historySaveAction=function(){if(this.historyProcessing)return;const t=this.historyNextState;this.historyUndo.push(t),this.historyNextState=this._historyNext(),this.fire("history:append",{json:t})},fabric.Canvas.prototype.undo=function(t){this.historyProcessing=!0;const i=this.historyUndo.pop();i?(this.historyRedo.push(this._historyNext()),this.historyNextState=i,this._loadHistory(i,"history:undo",t)):this.historyProcessing=!1},fabric.Canvas.prototype.redo=function(t){this.historyProcessing=!0;const i=this.historyRedo.pop();i?(this.historyUndo.push(this._historyNext()),this.historyNextState=i,this._loadHistory(i,"history:redo",t)):this.historyProcessing=!1},fabric.Canvas.prototype._loadHistory=function(t,i,s){var o=this;this.loadFromJSON(t,function(){o.renderAll(),o.fire(i),o.historyProcessing=!1,s&&"function"==typeof s&&s()})},fabric.Canvas.prototype.clearHistory=function(){this.historyUndo=[],this.historyRedo=[],this.fire("history:clear")},fabric.Canvas.prototype.offHistory=function(){this.historyProcessing=!0},fabric.Canvas.prototype.onHistory=function(){this.historyProcessing=!1,this._historySaveAction()}; \ No newline at end of file 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 @@ - + -