blitzwing/cryptpad
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'dark' into staging

Browse source
This commit is contained in:
ansuz 2021-02-09 17:31:41 +05:30
commit b3f4ea5e5c
124 changed files with 2417 additions and 1888 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
customize.dist/ckeditor-contents.css
View file

@ -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;

273
customize.dist/loading.js
View file

@ -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 = [
'<style>',
loadingStyle,
'</style>',
'<div class="cp-loading-logo">',
'<img class="cp-loading-cryptofist" src="/customize/CryptPad_logo.svg?' + urlArgs + '">',
'</div>',

10
customize.dist/pages/index.js
View file

@ -73,9 +73,9 @@ define([
UI.addTooltips();
var blocks = [
h('div.row.cp-index-section', [
h('div.row.cp-page-section', [
h('div.col-sm-6',
h('img.img-fluid', {
h('img.img-fluid.cp-img-invert', {
src:'/customize/images/shredder.png',
alt:'',
'aria-hidden': 'true'
@ -86,17 +86,17 @@ define([
h('p', Msg.home_privacy_text)
])
]),
h('div.row.cp-index-section',
h('div.row.cp-page-section',
h('div.col-sm-12', [
h('h2', Msg.home_host_title),
h('p'), Msg.home_host
])
),
h('div.row.cp-index-section', [
h('div.row.cp-page-section', [
h('div.col-sm-6', [
h('h2', Msg.home_opensource_title),
Pages.setHTML(h('p'), Msg.home_opensource),
h('img.small-logo', {
h('img.small-logo.cp-img-invert', {
src: '/customize/images/logo_AGPLv3.svg',
alt: 'APGL3 License Logo'
})

6
customize.dist/pages/what-is-cryptpad.js
View file

@ -20,7 +20,7 @@ define([
Pages.setHTML(h('span'), Msg.whatis_collaboration_info),
]),
h('div.col-md-6', [
h('img', {
h('img.cp-img-invert', {
src: '/customize/images/collaboration.png?' + urlArgs,
alt: '',
'aria-hidden': 'true'
@ -66,11 +66,11 @@ define([
}),
]),
h('div.col-md-6.order-md-1.small-logos', [
h('img', {
h('img.cp-img-invert', {
src: '/customize/images/logo_ngi.png?' + urlArgs,
alt: 'NGI Award 2019'
}),
h('img', {
h('img.cp-img-invert', {
src: '/customize/images/logo_nlnet.svg?' + urlArgs,
alt: 'NLNet Foundation logo'
}),

95
customize.dist/src/less2/include/alertify.less
View file

@ -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;
}
}
}
}

13
customize.dist/src/less2/include/app-noscroll.less
View file

@ -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;

6
customize.dist/src/less2/include/avatar.less
View file

@ -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;

74
customize.dist/src/less2/include/checkmark.less
View file

@ -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();
// <label.cp-checkmark><input><span.cp-checkmark-mark></span>Text</label>
.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;
}
}

1
customize.dist/src/less2/include/colortheme-all.less
View file

@ -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";

427
customize.dist/src/less2/include/colortheme-dark.less Normal file
View file

@ -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;

498
customize.dist/src/less2/include/colortheme.less
View file

@ -3,82 +3,9 @@
@colortheme_app-font-size-small: 13px;
@colortheme_app-font: @colortheme_app-font-size @colortheme_font;
@colortheme_logo-1: #326599;
@colortheme_logo-2: #0087FF;
@colortheme_logo_2_light: lighten(@colortheme_logo-2, 40%);
@colortheme_loading_bg: #E7E7E7;
@colortheme_link-color: #0275D8;
@colortheme_link-color-visited: #005999;
@colortheme_info-background: #eeeeee;
@colortheme_old-base: #302B28;
@colortheme_old-fore: #fafafa;
@colortheme_base: #fff;
@colortheme_light-base: lighten(@colortheme_base, 20%);
@colortheme_cp-red: #FA5858; // remove red
@colortheme_cp-green: #46E981;
@colortheme_form-border: #bbbbbb;
@colortheme_form-bg: @colortheme_logo-2;
@colortheme_form-color: #ffffff;
@colortheme_form-bg-alt: #ffffff;
@colortheme_form-color-alt: @colortheme_logo-2;
@colortheme_form-warning: #f49842;
@colortheme_form-warning-hov: darken(@colortheme_form-warning, 5%);
@colortheme_context-menu-icon-color: #7b7b7b;
@colortheme_modal-bg: @colortheme_form-bg-alt; // TODO Modals bg
@colortheme_modal-fg: @colortheme_form-color-alt;
@colortheme_modal-link: @colortheme_link-color;
@colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%);
@colortheme_modal-dim: fade(@cryptpad_text_col, 50%); // TODO transparent background behind modals
@colortheme_modal-input: @colortheme_form-bg;
@colortheme_modal-input-fg: @colortheme_form-color;
@colortheme_loading-bg: @colortheme_logo-1;
@colortheme_loading-bg-alt: @colortheme_logo-2;
@colortheme_loading-color: @colortheme_old-fore;
// TODO modals buttons
@colortheme_alertify-red: #E55236;
@colortheme_alertify-red-color: #FFF;
@colortheme_alertify-red-border: transparent;
@colortheme_alertify-green: #77C825;
@colortheme_alertify-green-color: #FFF;
@colortheme_alertify-green-border: transparent;
@colortheme_alertify-primary: @colortheme_form-bg;
@colortheme_alertify-primary-text: @colortheme_form-color;
@colortheme_alertify-primary-border: transparent;
@colortheme_alertify-disabled: #6c757d;
@colortheme_alertify-disabled-text: #ffffff;
@colortheme_alertify-disabled-border: #6c757d;
@colortheme_alertify-cancel: @colortheme_modal-bg;
@colortheme_alertify-cancel-border: #949494;
@colortheme_notification-log: fade(@colortheme_logo-2, 90%);
@colortheme_notification-color: #fff;;
@colortheme_notification-warn: rgba(205, 37, 50, 0.8);
@colortheme_dropdown-bg: #f9f9f9;
@colortheme_dropdown-color: black;
@colortheme_dropdown-bg-hover: #f1f1f1;
@colortheme_dropdown-bg-active: #e8e8e8;
// Apps, these colors are used for customizing the toolbar for the apps.
@colortheme_toolbar-warn: @colortheme_alertify-red;
@colortheme_pad-toolbar-bg: #eeeeee;
@colortheme_help-bg: #ddd;
@colortheme_userlist-bg: #eee;
@colortheme_pad-chat-bg: #AAA;
@colortheme_apps: {
default: #0087FF;
drive: #0087FF;
drive: #0087FF; // Used as icon color in index.js (index.html)
pad: #256ad5;
code: #EAA000;
slide: #e57614;
@ -97,34 +24,403 @@
contacts: #607B8D;
}
@colortheme_poll-color: #fff;
@colortheme_poll-help-bg: #bbffbb;
@colortheme_poll-th-bg: #005bef;
@colortheme_poll-th-fg: #fff;
// Colors
@cryptpad_color_brand: #0087FF;
@cryptpad_color_brand_300: lighten(@cryptpad_color_brand, 30%);
@cryptpad_color_brand_fade: fade(@cryptpad_color_brand, 75%);
@cryptpad_color_brand_fader: fade(@cryptpad_color_brand, 50%);
@cryptpad_color_brand_fadest: fade(@cryptpad_color_brand, 25%);
// Sidebar layout (profile / settings)
@colortheme_sidebar-active: #fff;
@colortheme_sidebar-left-bg: #eee;
@colortheme_sidebar-left-fg: #000;
@colortheme_sidebar-left-branch: #888;
@colortheme_sidebar-right-bg: #fff;
@colortheme_sidebar-right-fg: #000;
@colortheme_sidebar-description: #777;
@colortheme_sidebar-button-bg: #3066e5;
@colortheme_sidebar-button-red-bg: #e54e4e;
@colortheme_sidebar-button-alt-bg: #fff;
@cryptpad_color_hint_grey: #777;
@cryptpad_color_dark_grey: #999999;
@cryptpad_color_neutral_grey: #aaaaaa;
@cryptpad_color_neutral2_grey: #cccccc;
@cryptpad_color_help_grey: #dddddd;
@cryptpad_color_grey: #e0e0e0;
@cryptpad_color_toolbar_grey: #EEEEEE;
@cryptpad_color_light_grey: #f1f1f1;
@cryptpad_color_lighter_grey: #f9f9f9;
@cryptpad_color_blue: #4591C4;
@cryptpad_color_grey: #999999;
@cryptpad_color_light_grey: #e0e0e0;
@cryptpad_header_col: #1E1F1F;
@cryptpad_text_col: #3F4141;
@cryptpad_color_white: #FFF;
@cryptpad_color_grey_50: #FAFAFA;
@cryptpad_color_grey_100: #F5F5F5;
@cryptpad_color_grey_200: #EEEEEE;
@cryptpad_color_grey_300: #E0E0E0;
@cryptpad_color_grey_400: #BDBDBD;
@cryptpad_color_grey_500: #9E9E9E;
@cryptpad_color_grey_600: #757575;
@cryptpad_color_grey_700: #616161;
@cryptpad_color_grey_800: #424242;
@cryptpad_color_grey_850: #323232;
@cryptpad_color_grey_900: #212121;
@cryptpad_color_grey_950: #121212;
@cryptpad_color_black: #000;
@cryptpad_text_col:@cryptpad_color_grey_800;
@cryptpad_color_blue: #326599; // former logo-1
@cryptpad_color_light_blue: #00b7d8;
@cryptpad_color_red: #ff1100;
@cryptpad_color_red_fade: fade(@cryptpad_color_red, 50%);
@cryptpad_color_red_fader: fade(@cryptpad_color_red, 25%);
@cryptpad_color_warn_red: @cryptpad_color_red_fade;
@cryptpad_color_dark_red: #9e0000;
@cryptpad_color_light_red: #FFD4D4;
@cryptpad_color_light_red_fade: fade(@cryptpad_color_light_red, 75%);
@cryptpad_color_orange: #f49842;
@cryptpad_color_green: #5cb85c;
@cryptpad_color_green_fade: fade(@cryptpad_color_green, 50%);
@cryptpad_color_light_green: #c5ffa8;
@cryptpad_color_light_green_fade: fade(@cryptpad_color_light_green, 20%);
@cryptpad_color_light_yellow: #FFE69C;
@cryptpad_color_yellow_fade: fade(#FFE69C, 50%); // XXX diff from dark
@cryptpad_color_lighter_blue: #d2e1f2;
@colortheme_checkmark-back0: @colortheme_form-bg-alt;
@colortheme_checkmark-back0-active: @colortheme_form-border;
@colortheme_checkmark-back1: @colortheme_form-bg;
@colortheme_checkmark-col1: @colortheme_form-color;
@colortheme_checkmark-back2: @colortheme_form-bg-alt;
@colortheme_checkmark-col2: @colortheme_form-color-alt;
@colortheme_checkmark-disabled: #AAA;
@cryptpad_color_link: #0275D8;
// Premium plans colors
@cryptpad_color_basic: #DDEFFF;
@cryptpad_color_pro: #E4FFDD;
@cryptpad_color_power: #F6DDFF;
@cp_scrollbar-fg: fade(@cryptpad_color_black, 20%);
@scrollbar_color: @cp_scrollbar-fg transparent;
// Loading screen
@cp_loading-bg: @cryptpad_color_grey_200;
@cp_loading-fg: @cryptpad_text_col;
@cp_loading-msg-bg: @cryptpad_color_white;
@cp_loading-link: @cryptpad_color_brand;
@cp_loading-error-bg: @cryptpad_color_warn_red;
@cp_loading-error-fg: @cryptpad_text_col;
@cp_loading-progress-bg: @cryptpad_color_white;
@cp_loading-progress-bar-bg: @cryptpad_color_brand;
@cp_loading-spinner: @cryptpad_color_grey_500;
// Chat
@cp_messenger-bg: @cryptpad_color_grey_200;
@cp_messenger-fg: @cryptpad_text_col;
@cp_messenger-notif: @cryptpad_color_black;
@cp_messenger-friend: @cryptpad_color_black;
@cp_messenger-online: @cryptpad_color_light_green;
// Alertify
@cp_alertify-bg: @cryptpad_color_white;
@cp_alertify-fg: @cryptpad_color_brand;
@cp_alertify-hover: fade(@cp_alertify-fg, 25%);
@cp_alertify-overlay: fade(@cryptpad_text_col, 50%);
@cp_alertify-log-bg: fade(@cryptpad_color_brand, 90%);
@cp_alertify-log-fg: @cryptpad_color_white;
@cp_alertify-warn-bg: rgba(205, 37, 50);
@cp_alertify-disable-border: @cryptpad_color_dark_grey;
// Forms
@cp_forms-fg: @cryptpad_text_col;
@cp_forms-bg: @cryptpad_color_grey_100;
@cp_forms-border: @cryptpad_color_brand;
@cp_forms-placeholder: fade(@cryptpad_text_col, 75%);
@cp_forms-readonly: @cryptpad_color_brand_fadest;
@cp_forms-readonly-border: @cryptpad_color_brand;
@cp_forms-disabled: @cryptpad_color_grey_500;
// Bootstrap alerts
@cp_alerts-warning-bg: @cryptpad_color_yellow_fade;
@cp_alerts-warning-fg: @cryptpad_color_light_yellow;
@cp_alerts-warning-text: darken(@cp_alerts-warning-fg, 55%);
@cp_alerts-danger-bg: @cryptpad_color_light_red_fade;
@cp_alerts-danger-fg: @cryptpad_color_light_red;
@cp_alerts-danger-text: darken(@cp_alerts-danger-fg, 55%);
@cp_alerts-info-bg: fade(@cryptpad_color_brand, 15%);
@cp_alerts-info-text: @cryptpad_color_brand;
@cp_alerts-info-fg: @cryptpad_color_brand;
@cp_alerts-success-bg: @cryptpad_color_light_green_fade;
@cp_alerts-success-fg: @cryptpad_color_green;
@cp_alerts-success-text: darken(@cryptpad_color_green, 20%);
// Buttons
@cp_buttons-fg: @cryptpad_color_brand;
@cp_buttons-hover: @cryptpad_color_brand_fadest;
@cp_buttons-default: #CCC;
@cp_buttons-default-color: @cryptpad_text_col;
@cp_buttons-default-border: @cryptpad_text_col;
@cp_buttons-red: #E55236;
@cp_buttons-red-text: @cp_buttons-red;
@cp_buttons-red-color: #FFF;
@cp_buttons-red-border: transparent;
@cp_buttons-primary: @cryptpad_color_brand;
@cp_buttons-primary-text: #FFFFFF;
@cp_buttons-primary-border: transparent;
@cp_buttons-disabled: #6c757d;
@cp_buttons-disabled-text: #ffffff;
@cp_buttons-disabled-border: #6c757d;
@cp_buttons-cancel: #ffffff;
@cp_buttons-cancel-border: #949494;
// Sidebar layout
@cp_sidebar-left-bg: @cryptpad_color_toolbar_grey;
@cp_sidebar-left-fg: @cryptpad_text_col;
@cp_sidebar-right-bg: @cryptpad_color_white;
@cp_sidebar-right-fg: @cryptpad_text_col; // XXX was black
@cp_sidebar-left-active: @cp_sidebar-right-bg;
@cp_sidebar-hint: @cryptpad_color_hint_grey;
// Drive
@cp_drive-bg: @cp_sidebar-right-bg;
@cp_drive-fg: @cp_sidebar-right-fg;
@cp_drive-header-fg: fade(@cryptpad_text_col, 70%);
@cp_drive-icon-hover: fade(@cryptpad_text_col, 5%);
@cp_drive-icon-border: fade(@cryptpad_text_col, 20%);
@cp_drive-thumb-bg: transparent;
@cp_drive-selected-bg: fade(@cryptpad_text_col, 10%);
@cp_drive-selected-fg: @cryptpad_text_col;
@cp_drive-selection-overlay: fade(@cryptpad_text_col, 5%);
@cp_drive-selection-bg: @cryptpad_color_grey_200;
@cp_drive-selection-fg: @cryptpad_text_col;
@cp_drive-droppable-bg: @cryptpad_color_grey_400;
@cp_drive-droppable-fg: @cryptpad_text_col;
@cp_drive-infobox-bg: @cryptpad_color_brand_fadest;
@cp_drive-infobox-fg: @cryptpad_text_col;
@cp_drive-warnbox-bg: @cryptpad_color_warn_red;
@cp_drive-warnbox-fg: @cryptpad_text_col;
@cp_drive-tree-branch: @cryptpad_text_col;
// Contextmenu
@cp_context-bg: @cryptpad_color_white;
@cp_context-border: @cryptpad_color_grey_400;
@cp_context-bg-hover: @cryptpad_color_grey_300;
@cp_context-bg-active: @cryptpad_color_grey_400;
@cp_context-fg: @cryptpad_text_col;
@cp_context-icon: @cryptpad_text_col;
@cp_context-disabled: @cryptpad_color_grey_400;
// Tooltip background
@cp_tooltip-bg: @cryptpad_color_grey_300;
@cp_tooltip-fg: @cryptpad_text_col;
// Dropdown
@cp_dropdown-fg: @cryptpad_text_col;
@cp_dropdown-bg: @cryptpad_color_lighter_grey;
@cp_dropdown-bg-hover: @cryptpad_color_light_grey;
@cp_dropdown-bg-active: @cryptpad_color_grey;
// Rendered Markdown
@cp_markdown-bg: @cryptpad_color_lighter_grey;
@cp_markdown-border: @cryptpad_color_grey;
@cp_markdown-contrast-fg: @cryptpad_text_col; // XXX
@cp_markdown-contrast-bg: transparent; // XXX
// Avatar
@cp_avatar-bg: @cryptpad_color_grey;
@cp_avatar-fg: @cryptpad_text_col;
// Corner
@cp_corner-bg: @cryptpad_color_grey_100;
@cp_corner-fg: @cryptpad_color_brand;
@cp_corner-text: @cryptpad_text_col;
// Pad Creation Screen
@cp_creation-bg: @cryptpad_color_white;
@cp_creation-fg: @cryptpad_text_col;
@cp_creation-button-bg: @cryptpad_color_brand;
@cp_creation-button-fg: @cryptpad_color_white;
@cp_creation-error-bg: @cryptpad_color_blue;
@cp_creation-error-fg: @cryptpad_color_light_grey;
// Export
@cp_export-bg: @cryptpad_color_grey_200;
@cp_export-fg: @cryptpad_text_col;
@cp_export-hint: fade(@cryptpad_text_col, 80%);
@cp_export-error-bg: @cryptpad_color_grey_300;
@cp_export-error-bg2: @cryptpad_color_red_fader;
// File upload
@cp_upload-fg: @cryptpad_color_brand;
@cp_upload-header: @cryptpad_color_help_grey;
@cp_upload-progress: @cryptpad_color_help_grey;
// Help
@cp_help-bg: @cryptpad_color_help_grey;
@cp_help-fg: @cryptpad_text_col;
@cp_help-link: @cryptpad_color_link;
// Static pages
@cp_static-bg: @cryptpad_color_toolbar_grey;
@cp_static-fg: @cryptpad_text_col;
@cp_static-link: @cryptpad_color_brand;
@cp_static-title: @cryptpad_color_brand;
@cp_static-footer: @cryptpad_color_help_grey;
@cp_static-footer-border: @cryptpad_color_white;
@cp_static-topbar-fg: @cryptpad_color_brand;
@cp_static-card-bg: @cryptpad_color_white;
@cp_static-img-invert-filter: none;
// Limit
@cp_limit-fg: @cryptpad_text_col;
@cp-limit-bar-bg: @cryptpad_color_white;
@cp-limit-bar-normal: @cryptpad_color_green;
@cp-limit-bar-warning: @cryptpad_color_orange;
@cp-limit-bar-above: @cryptpad_color_red;
// Mentions
@cp_mentions-bg: @cryptpad_color_grey;
@cp_mentions-hover: @cryptpad_color_help_grey;
// Autocomplete
@cp_autocomplete-bg: @cryptpad_color_grey_100;
@cp_autocomplete-fg: @cryptpad_text_col;
@cp_autocomplete-border: @cryptpad_color_grey_300;
@cp_autocomplete-hover: @cryptpad_color_brand_fadest;
// Modals
@cp_access-overlay: fade(@cryptpad_color_white, 50%);
@cp_snapshots-hover: @cryptpad_color_help_grey;
// Support
@cp_support-bg: @cryptpad_color_lighter_grey;
@cp_support-msg-fg: @cryptpad_text_col;
@cp_support-msg-bg: @cryptpad_color_grey;
@cp_support-header-bg: @cryptpad_color_help_grey;
// Toolbar
@cp_toolbar-bg: @cryptpad_color_grey_200;
@cp_toolbar-fg: @cryptpad_text_col;
@cp_toolbar-bottom-fg: @cryptpad_text_col;
@cp_toolbar-logo-bg: @cryptpad_color_white;
@cp_toolbar-fade1: fade(@cryptpad_color_black, 10%);
@cp_toolbar-fade3: fade(@cryptpad_color_black, 30%);
@cp_toolbar-warn: @cp_buttons-red;
@cp_history-line-bg: @cryptpad_color_white;
@cp_history-bg1: #DDD;
@cp_history-bg2: #BBB;
@cp_history-fg: @cp_toolbar-bottom-fg;
// Tokenfield
@cp_token-bg: @cryptpad_color_neutral2_grey;
@cp_token-fg: @cryptpad_text_col;
@cp_token-bg-hover: @cryptpad_color_neutral_grey;
@cp_token-invalid: @cryptpad_color_warn_red;
// Usergrid
@cp_usergrid-fg: @cryptpad_text_col;
@cp_usergrid-selected-bg: @cryptpad_color_brand;
@cp_usergrid-selected-fg: @cryptpad_color_white;
// Other
@cp_shadow-color: fade(@cryptpad_color_black, 40%);
// Apps
@cp_app-bg: @cryptpad_color_light_grey;
@cp_app-fg: @cryptpad_text_col;
// Accounts
@cp_accounts-basic: @cryptpad_color_basic;
@cp_accounts-pro: @cryptpad_color_pro;
@cp_accounts-power: @cryptpad_color_power;
@cp_accounts-active: @cryptpad_color_light_green;
@cp_accounts-inactive: @cryptpad_color_light_red;
@cp_accounts-mysubs-alert: @cryptpad_color_white;
@cp_accounts-mysubs-bg: @cryptpad_color_toolbar_grey;
@cp_accounts-mysubs-fg: @cryptpad_text_col;
@cp_accounts-contact-hover: fade(@cryptpad_color_black, 20%);
@cp_accounts-tab-bg: @cryptpad_color_toolbar_grey;
@cp_accounts-tab-hover: @cryptpad_color_grey;
@cp_accounts-tab-border: @cryptpad_color_neutral_grey;
// Admin
@cp_admin-isadmin-fg: @cryptpad_color_brand;
@cp_admin-isadmin-bg: @cryptpad_color_white;
@cp_admin-premium-fg: @cryptpad_color_warn_red;
@cp_admin-premium-bg: lighten(@cryptpad_color_warn_red, 25%);
@cp_admin-last-fg: @cryptpad_color_warn_red;
@cp_admin-last-bg: lighten(@cryptpad_color_orange, 25%);
// Code
@cp_preview-bg: @cryptpad_color_white;
@cp_preview-fg: @cryptpad_text_col;
@cp_preview-link: @cryptpad_color_brand;
// Debug
@cp_debug-hover: fade(@cryptpad_color_black, 10%);
@cp_debug-icon-hover: @cryptpad_color_dark_grey;
// Mediatag
@cp_mediatag-text-bg: @cryptpad_color_white;
@cp_mediatag-text-fg: @cryptpad_text_col;
// File
@cp_file-progress-bg: @cryptpad_color_brand;
@cp_file-progress-fg: @cryptpad_text_col;
// Kanban
@cp_kanban-fg: @cryptpad_text_col;
@cp_kanban-item-bg: @cryptpad_color_grey_50;
@cp_kanban-link: @cryptpad_color_brand;
@cp_kanban-board-bg: @cryptpad_color_grey_300;
@cp_kanban-conflict-bg: @cryptpad_color_grey_200;
@cp_kanban-tags-bg: @cryptpad_color_grey_300;
@cp_kanban-add-hover: fade(@cryptpad_color_black, 10%);
@cp_kanban-trash-bg: @cryptpad_color_warn_red;
@cp_kanban-color0: @cryptpad_color_grey_400;
@cp_kanban-colors:
#FFD4D4,
#FFDECA,
#FFE69C,
#DBFFB7,
#AFFDC2,
#C9FFFE,
#C8D6FF,
#E4CAFF;
// Notifications
@cp_notif-hover: fade(@cryptpad_color_black, 10%);
@cp_notif-header-bg: @cryptpad_color_grey_200;
@cp_notif-header-fg: @cryptpad_text_col;
@cp_notif-table-border: @cryptpad_color_white;
@cp_notif-bg: @cryptpad_color_grey_100;
@cp_notif-fg: @cryptpad_text_col;
// OO
@cp_oo-offline-overlay: fade(@cryptpad_color_white, 50%);
// Rich text
@cp_pad-fg: @cryptpad_text_col;
@cp_pad-icon-filter: none;
// Comments
@cp_comments-fg: @cryptpad_text_col;
@cp_comments-bg: @cryptpad_color_white;
@cp_comments-header: @cryptpad_color_grey_600;
// Poll
@cp_poll-th-bg: @cryptpad_color_lighter_blue;
@cp_poll-th-fg: @cryptpad_text_col;
@cp_poll-uncommitted-bg: @cryptpad_color_toolbar_grey;
@cp_poll-border-color: @cryptpad_color_hint_grey;
@cp_poll-cell-fg: @cryptpad_text_col;
@cp_poll-unset: @cryptpad_color_help_grey;
@cp_poll-yes: @cryptpad_color_light_green;
@cp_poll-no: @cryptpad_color_light_red;
@cp_poll-maybe: @cryptpad_color_light_yellow;
@cp_poll-hint: @cryptpad_color_dark_grey;
// Profile
@cp_profile-border: @cryptpad_color_grey_400;
@cp_profile-hint: @cryptpad_color_grey_600;
// SLide
@cp_slide-fg: @cp_app-fg;
@cp_slide-css-error: @cryptpad_color_red_fader;
// Teams
@cp_teams-card-bg: @cryptpad_color_grey_300;
@cp_teams-leftside-bg: darken(@cryptpad_color_grey_200, 5%);
@cp_teams-invite-bg: fade(@cryptpad_color_brand, 50%);
@cp_teams-invite-fg: @cryptpad_text_col;
@cp_teams-roster-odd: fade(@cryptpad_text_col, 15%);
// Whiteboard
@cp_whiteboard-board-bg: @cryptpad_color_white;
@cp_whiteboard-board-border: @cryptpad_color_hint_grey;
@cp_whiteboard-bg: @cp_app-bg;
@cp_whiteboard-fg: @cryptpad_text_col;

15
customize.dist/src/less2/include/comments.less
View file

@ -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 {

29
customize.dist/src/less2/include/contextmenu.less
View file

@ -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;
}

110
customize.dist/src/less2/include/corner.less
View file

@ -4,9 +4,12 @@
--LessLoader_require: LessLoader_currentFile();
};
& {
@corner-link: #ffff7a;
@corner-blue: @colortheme_logo-1;
@corner-white: @colortheme_base;
@corner-bg: @cp_corner-bg;
@corner-fg: @cp_corner-fg;
@corner-text: @cp_corner-text;
@corner-bg-alt: darken(@corner-bg, 10%);
@corner-fg-alt: darken(@corner-fg, 10%);
@keyframes appear {
0% {
@ -31,18 +34,18 @@
bottom: 10px;
width: 350px;
padding: 10px;
background-color: fade(@corner-blue, 95%);
border: 1px solid @corner-blue;
color: @corner-white;
background-color: fade(@corner-bg, 95%);
color: @corner-text;
z-index: 9999;
transform-origin: bottom right;
animation: appear 0.8s ease-in-out;
//box-shadow: 0 0 10px 0 @corner-blue;
border: 1px solid @corner-fg;
box-shadow: 0 0 10px 0 @cp_shadow-color;
&.cp-corner-alt {
background-color: fade(@corner-white, 95%);
border: 1px solid @corner-blue;
color: @corner-blue;
background-color: fade(@corner-bg, 95%);
color: @corner-fg;
border-color: @corner-fg;
}
h1, h2, h3 {
@ -54,39 +57,6 @@
clear: left;
height: 21px;
}
.cp-corner-minimize, .cp-corner-maximize {
position: absolute;
height: 15px;
width: 20px;
top: 0;
right: 0;
font-size: 12px;
text-align: left;
cursor: pointer;
line-height: 15px;
display: none;
&:hover {
color: darken(@corner-white, 15%);
}
}
.cp-corner-minimize {
display: inline;
}
&.cp-minimized {
transition: transform 0.8s ease-in-out;
transform: scale(0.1);
animation: none;
.cp-corner-text, .cp-corner-actions, .cp-corner-footer {
display: none;
}
.cp-corner-maximize {
display: inline;
font-size: 130px;
width: 180px;
height: 200px;
line-height: 200px;
}
}
&.cp-corner-big {
width: 500px;
max-width: 95%;
@ -99,13 +69,16 @@
font-size: 1.1em;
}
&:hover {
color: darken(@corner-white, 10%);
color: @corner-fg-alt;
}
}
&.cp-corner-alt {
.cp-corner-dontshow {
display: inline-block;
color: @corner-text;
&:hover {
color: lighten(@corner-blue, 10%);
color: @corner-fg;
}
}
}
@ -121,63 +94,44 @@
}
.cp-corner-footer, .cp-corner-text {
a {
color: @corner-white;
color: @corner-fg;
text-decoration: underline;
&:hover {
color: darken(@corner-white, 10%);
color: @corner-fg-alt;
}
}
}
&.cp-corner-alt a {
color: @corner-blue;
color: @corner-text;
&:hover {
color: lighten(@corner-blue, 10%);
color: @corner-fg;
}
}
button {
padding: 5px;
color: @corner-white;
padding: 5px;
color: @corner-fg;
&:not(:first-child) {
margin-left: 10px;
}
outline: none;
text-transform: uppercase;
border: 1px solid @corner-white;
border: 1px solid @corner-fg;
.fa, .cptools {
margin-right: 0.3em;
}
&.cp-corner-primary {
background-color: @corner-white;
color: @corner-blue;
background-color: @corner-fg;
color: @corner-bg;
&:hover {
background-color: lighten(@corner-blue, 50%);
border-color: lighten(@corner-blue, 50%);
background-color: @corner-fg-alt;
border-color: @corner-fg-alt;
}
}
&.cp-corner-cancel {
background-color: @corner-blue;
color: @corner-white;
background-color: @corner-bg;
color: @corner-fg;
&:hover {
background-color: darken(@corner-blue, 10%);
}
}
}
&.cp-corner-alt button {
border-color: @corner-blue;
&.cp-corner-primary {
background-color: @corner-blue;
color: @corner-white;
&:hover {
background-color: darken(@corner-blue, 10%);
border-color: darken(@corner-blue, 10%);
}
}
&.cp-corner-cancel {
background-color: @corner-white;
color: @corner-blue;
&:hover {
background-color: lighten(@corner-blue, 50%);
background-color: @corner-bg-alt;
}
}
}

61
customize.dist/src/less2/include/creation.less
View file

@ -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;

143
customize.dist/src/less2/include/drive.less
View file

@ -13,23 +13,6 @@
.tokenfield_main();
@colortheme_drive-bg-active: lighten(@colortheme_static_apps[default], 20%);
@colortheme_drive-color: @cryptpad_text_col;
@drive_hover: #eee;
@drive_hover-light: lighten(@drive_hover, 20%);
@drive_info-box-bg: #d2e1f2;
@drive_info-box-border: #bbb;
@drive_table-header-fg: #555;
@drive_table-header-bg: #e8e8e8;
@drive_mobile-tree-border-col: #ccc;
@drive_content-fg: @colortheme_sidebar-right-fg;
@drive_content-bg: @colortheme_sidebar-right-bg;
@drive_content-bg-ro: darken(@drive_content-bg, 10%);
@drive_selected-bg: #888;
@drive_droppable-bg: #FE9A2E;
/* PAGE */
@ -59,7 +42,7 @@
border: 1px solid transparent;
&:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-selected-tmp) {
border: 1px solid #CCC;
border: 1px solid @cp_drive-icon-border;
}
.cp-app-drive-element-name {
width: 100%;
@ -126,7 +109,6 @@
min-width: unset;
max-width: unset;
max-height: unset;
border-bottom: 1px solid @drive_mobile-tree-border-col;
.cp-app-drive-tree-category {
margin-top: 0.5em;
}
@ -152,38 +134,34 @@
li {
padding: 0px 5px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.tools_unselectable();
}
.cp-app-drive-element-restricted {
color: #939393;
color: @cp_drive-header-fg;
}
.cp-app-drive-element-droppable {
background-color: @drive_droppable-bg;
color: #222;
background-color: @cp_drive-droppable-bg;
color: @cp_drive-droppable-fg;
}
.cp-app-drive-element-selected {
background: @drive_selected-bg !important;
color: #eee;
background: @cp_drive-selected-bg !important;
color: @cp_drive-selected-fg;
.fa-minus-square-o, .fa-plus-square-o {
color: @colortheme_sidebar-left-fg;
color: @cp_sidebar-left-fg;
}
.cptools {
color: #eee;
color: @cp_drive-selected-fg;
}
}
.cp-app-drive-element-selected-tmp {
border: 1px dotted #bbb;
background: #AAA;
color: #ddd;
background: @cp_drive-selection-bg;
color: @cp_drive-selection-fg;
.fa-minus-square-o, .fa-plus-square-o {
color: @colortheme_sidebar-left-fg;
color: @cp_sidebar-left-fg;
}
}
@ -205,19 +183,20 @@
font-size: 50px;
}
.cptools-folder-no-color {
color: #bbb;
color: #bbb; // XXX
}
.fa-check {
position: absolute;
top: 40%; left: 35%;
color: transparent;
}
// XXX Check colors in the "change folder color" modal
&.cp-app-drive-current-color > .fa-check {
color: white;
color: @cryptpad_color_white;
}
&.cp-app-drive-current-color:first-child > .fa-check {
color: black;
color: @cryptpad_color_black;
}
}
}
@ -231,13 +210,13 @@
margin: 15px;
input {
background: transparent;
color: @colortheme_drive-color;
.tools_placeholder-color(@cryptpad_color_grey);
color: @cp_drive-fg;
.tools_placeholder-color();
outline-width: 0px;
border-radius: 0;
width: 100%;
border: 0;
border-bottom: 3px solid @colortheme_drive-color;
border-bottom: 3px solid @cp_drive-fg;
margin: 0 5px;
flex: 1;
min-width: 0;
@ -255,12 +234,12 @@
cursor: pointer;
}
.cp-app-drive-tree-search-icon, .cp-app-drive-search-cancel {
color: @colortheme_drive-color;
color: @cp_drive-fg;
}
}
.cp-app-drive-search-spinner {
display: inline-flex;
color: @colortheme_drive-color;
color: @cp_drive-fg;
font-size: 40px;
align-items: center;
justify-content: center;
@ -269,7 +248,7 @@
font-size: 30px;
padding: 15px;
font-style: italic;
color: @cryptpad_color_grey;
color: fade(@cryptpad_text_col, 80%);
}
@ -280,7 +259,7 @@
font-size: @colortheme_app-font-size;
//border-right: 1px solid #ccc;
box-sizing: border-box;
background: @colortheme_sidebar-left-bg;
background: @cp_sidebar-left-bg;
overflow: auto;
resize: horizontal;
width: auto;
@ -288,26 +267,11 @@
max-width: 500px;
min-width: 200px;
padding: 0px;
color: @colortheme_sidebar-left-fg;
color: @cp_sidebar-left-fg;
display: flex;
flex-flow: column;
max-height: 100%;
position: relative;
.cp-close-button {
position: absolute;
cursor: pointer;
right: 5px;
top: 5px;
font-size: 18px;
padding: 3px;
margin: 0;
border: 0;
background-color: transparent;
outline: none;
&:hover {
color: #000;
}
}
.cp-app-drive-tree-categories-container {
flex: 1;
overflow: auto;
@ -330,7 +294,6 @@
width: ~"calc(100% - 30px)";
padding: 0 10px;
border: 0;
color: lighten(@colortheme_sidebar-left-fg, 40%);
height: auto;
}
& > span.cp-app-drive-element-row {
@ -389,9 +352,9 @@
top: 10px;
width: 11px !important;
height: 11px !important;
background-color: @cp_sidebar-left-bg;
padding: 0;
margin: 0;
background: white;
z-index: 10;
cursor: default;
&:before {
@ -431,9 +394,9 @@
top: -11px;
content: '';
display: block;
border-left: 1px solid @colortheme_sidebar-left-branch;
border-left: 1px solid @cp_drive-tree-branch;
height: ~"calc(1em + 11px)";
border-bottom: 1px solid @colortheme_sidebar-left-branch;
border-bottom: 1px solid @cp_drive-tree-branch;
width: 15px;
}
&:after {
@ -442,7 +405,7 @@
bottom: -7px;
content: '';
display: block;
border-left: 1px solid @colortheme_sidebar-left-branch;
border-left: 1px solid @cp_drive-tree-branch;
height: 100%;
}
&.cp-app-drive-tree-root {
@ -470,8 +433,8 @@
}
#cp-app-drive-content {
box-sizing: border-box;
background: @drive_content-bg;
color: @drive_content-fg;
background: @cp_sidebar-right-bg;
color: @cp_sidebar-right-fg;
overflow-y: auto;
flex: 1;
display: flex;
@ -479,12 +442,12 @@
position: relative;
.cp-app-drive-content-select-box {
display: none;
background-color: rgba(100, 100, 100, 0.7);
background-color: @cp_drive-selection-overlay;
position: absolute;
z-index: 50;
}
&.cp-app-drive-readonly {
background: @drive_content-bg-ro;
background: contrast(@cp_sidebar-right-bg, darken(@cp_sidebar-right-bg, 10%), lighten(@cp_sidebar-right-bg, 10%));
}
h1 {
padding-left: 10px;
@ -495,7 +458,8 @@
line-height: 2em;
padding: 0.25em 0.75em;
margin: 1em;
background: @drive_info-box-bg;
background: @cp_drive-infobox-bg;
color: @cp_drive-infobox-fg;
cursor: default;
span {
cursor: pointer;
@ -508,7 +472,7 @@
&:not(.cp-app-drive-element-header) {
&:hover {
&:not(.-cp-app-drive-element-selected, .cp-app-drive-element-selected-tmp) {
background-color: @drive_hover;
background-color: @cp_drive-icon-hover;
}
}
}
@ -535,13 +499,13 @@
.cp-app-drive-path-clickable {
cursor: pointer;
&:hover {
background-color: #eee;
color: @cp_drive-fg;
}
}
}
font-size: 12px;
line-height: 16px;
color: @drive_table-header-fg;
color: @cp_drive-header-fg;
}
}
&.cp-app-drive-tags-list {
@ -603,7 +567,7 @@
margin: 0;
padding: 0;
border-radius: 0;
border: 1px solid #ddd;
border: 1px solid transparent;
font-size: 14px;
height: auto;
}
@ -619,6 +583,7 @@
.cp-app-drive-element-thumbnail {
max-width: 100px;
max-height: 100px;
background: @cp_drive-thumb-bg;
& ~ .fa, & ~ .cptools {
display: inline;
font-size: 17px;
@ -658,7 +623,7 @@
li {
display: flex;
input {
border: 1px solid #ddd;
border: 1px solid transparent;
margin: 0;
padding: 0 4px;
flex: 1;
@ -734,7 +699,7 @@
}
&.cp-app-drive-element-header {
cursor: default;
color: @drive_table-header-fg;
color: @cp_drive-header-fg;
span {
&:not(.fa):not(.cptools) {
text-align: left;
@ -748,7 +713,7 @@
&.cp-app-drive-sort-clickable {
cursor: pointer;
&:hover {
background: @drive_table-header-bg;
background: @cp_drive-icon-hover;
}
}
}
@ -821,7 +786,7 @@
font-size: @colortheme_app-font-size;
padding: 0 5px;
border: 0;
color: @colortheme_drive-color;
color: @cp_drive-fg;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
@ -832,7 +797,7 @@
}
&.cp-app-drive-path-separator {
color: #ccc;
color: @cp_drive-header-fg;
cursor: default;
}
@ -841,7 +806,8 @@
}
&.cp-app-drive-element-droppable {
background-color: @drive_droppable-bg;
background-color: @cp_drive-droppable-bg;
color: @cp_drive-droppable-fg;
}
&.cp-app-drive-path-clickable {
cursor: pointer;
@ -867,13 +833,8 @@
#cp-app-drive-new-ghost-dialog.cp-modal-container {
.drive_fileIcon;
border: 1px solid @colortheme_modal-fg;
li:not(.cp-app-drive-element-selected):hover {
background: @colortheme_logo_2_light;
color: @cryptpad_text_col;
.cptools {
color: @cryptpad_text_col;
}
background: @cp_drive-icon-hover;
}
.cp-modal {
display: flex;
@ -900,7 +861,7 @@
}
.cp-app-drive-new-name {
color: @cryptpad_text_col;
color: @cp_drive-fg;
white-space: nowrap;
}
@ -954,8 +915,8 @@
display: flex;
align-items: center;
justify-content: center;
background-color: @colortheme_drive-bg-active;
color: black;
background-color: @cp_drive-infobox-bg;
color: @cp_drive-infobox-fg;
font-weight: bold;
text-transform: uppercase;
cursor: default;
@ -965,8 +926,8 @@
display: flex;
align-items: center;
justify-content: center;
background-color: #eb675e;
color: white;
background-color: @cp_drive-warnbox-bg;
color: @cp_drive-warnbox-fg;
font-weight: bold;
text-transform: uppercase;
cursor: default;

38
customize.dist/src/less2/include/dropdown.less
View file

@ -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;
}
}
}
}

21
customize.dist/src/less2/include/export.less
View file

@ -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;
}
}
}

8
customize.dist/src/less2/include/fileupload.less
View file

@ -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 {

171
customize.dist/src/less2/include/forms.less
View file

@ -6,24 +6,20 @@
}
& {
@alertify-fore: @colortheme_modal-fg;
@alertify-btn-fg: @alertify-fore;
@alertify-light-bg: fade(@alertify-fore, 25%);
@alertify_padding-base: @variables_padding;
@alertify-input-bg: @colortheme_modal-input;
@alertify-input-fg: @colortheme_modal-input-fg;
input:not(.form-control):not([type="checkbox"]), textarea, div.cp-textarea {
// background-color: @alertify-input-fg;
color: @cryptpad_text_col;
border: 1px solid @alertify-input-bg;
color: @cp_forms-fg;
background-color: @cp_forms-bg;
border: 1px solid @cp_forms-border;
width: 100%;
font-size: 100%;
padding: @alertify_padding-base;
&[readonly] {
background-color: @alertify-light-bg;
color: @cryptpad_text_col;
border-color: @alertify-input-fg;
background-color: @cp_forms-readonly;
border-color: @cp_forms-readonly-border;
color: @cp_forms-fg;
}
}
@ -58,7 +54,6 @@
div.cp-textarea {
height: 60px;
width: 100%;
background-color: white;
cursor: text;
outline: none;
white-space: pre-wrap;
@ -76,9 +71,9 @@
height: 3px;
& > div {
height: 100%;
background-color: @colortheme_alertify-primary;
background-color: @cp_buttons-primary;
&.danger, &.btn-danger, &.danger-alt, &.btn-danger-alt {
background-color: @colortheme_alertify-red;
background-color: @cp_buttons-red;
}
}
}
@ -89,7 +84,7 @@
button.btn {
background-color: @colortheme_alertify-cancel;
background-color: @cp_buttons-cancel;
box-sizing: border-box;
outline: 0;
align-items: center;
@ -111,80 +106,63 @@
vertical-align: middle;
}
color: @alertify-btn-fg;
border: 1px solid @alertify-btn-fg;
color: @cp_buttons-fg;
border: 1px solid @cp_buttons-fg;
&.no-margin {
margin: 0;
}
&:hover, &:not(:disabled):not(.disabled):active, &:focus {
color: @alertify-btn-fg;
border: 1px solid @alertify-btn-fg;
background-color: lighten(@alertify-fore, 35%);
}
&.safe, &.danger, &.btn-safe, &.btn-danger {
color: @colortheme_old-base;
white-space: normal;
font-weight: bold;
color: @cp_buttons-fg;
border: 1px solid @cp_buttons-fg;
background-color: @cp_buttons-hover;
}
&.btn-default {
border-color: @cryptpad_text_col;
color: @cryptpad_text_col;
border-color: @cp_buttons-default-border;
color: @cp_buttons-default-color;
&:hover, &:not(:disabled):active, &:focus {
border-color: @cryptpad_text_col;
color: @cryptpad_text_col;
background-color: #ccc;
border-color: @cp_buttons-default-border;
color: @cp_buttons-default-color;
background-color: @cp_buttons-default;
}
}
&.danger, &.btn-danger {
background-color: @colortheme_alertify-red;
border-color: @colortheme_alertify-red-border;
color: @colortheme_alertify-red-color;
background-color: @cp_buttons-red;
border-color: @cp_buttons-red-border;
color: @cp_buttons-red-color;
&:hover, &:not(:disabled):active, &:focus {
border-color: @colortheme_alertify-red-border;
color: @colortheme_alertify-red-color;
background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%));
border-color: @cp_buttons-red-border;
color: @cp_buttons-red-color;
background-color: contrast(@cp_buttons-red-color, darken(@cp_buttons-red, 10%), lighten(@cp_buttons-red, 10%));
}
}
&.danger-alt, &.btn-danger-alt, &.btn-danger-outline {
border-color: @colortheme_alertify-red;
color: @colortheme_alertify-red;
border-color: @cp_buttons-red;
color: @cp_buttons-red-text;
&:hover, &:not(:disabled):active, &:focus {
border-color: @colortheme_alertify-red;
color: @colortheme_alertify-red-color;
background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%));
}
}
&.safe, &.btn-safe {
background-color: @colortheme_alertify-green;
border-color: @colortheme_alertify-green-border;
color: @colortheme_alertify-green-color;
&:hover, &:not(:disabled):active, &:focus {
border-color: @colortheme_alertify-green-border;
color: @colortheme_alertify-green-color;
background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-green, 10%), lighten(@colortheme_alertify-green, 10%));
border-color: @cp_buttons-red;
color: @cp_buttons-red-color;
background-color: @cp_buttons-red;
}
}
&.primary, &.btn-primary, &.btn-success {
background-color: @colortheme_alertify-primary;
color: @colortheme_alertify-primary-text;
border-color: @colortheme_alertify-primary-border;
background-color: @cp_buttons-primary;
color: @cp_buttons-primary-text;
border-color: @cp_buttons-primary-border;
font-weight: bold;
&:hover, &:not(:disabled):active, &:focus {
color: @colortheme_alertify-primary-text;
border-color: @colortheme_alertify-primary-border;
background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-primary, 10%), lighten(@colortheme_alertify-primary, 10%));
color: @cp_buttons-primary-text;
border-color: @cp_buttons-primary-border;
background-color: contrast(@cp_buttons-primary-text, darken(@cp_buttons-primary, 10%), lighten(@cp_buttons-primary, 10%));
}
}
&.btn-light {
&.btn-light { // XXX DARK
border-color: @cryptpad_text_col;
color: @cryptpad_text_col;
background-color: transparent;
@ -196,12 +174,12 @@
}
&.cancel, &.btn-cancel {
border-color: @colortheme_alertify-cancel-border;
color: @colortheme_alertify-cancel-border;
border-color: @cp_buttons-cancel-border;
color: @cp_buttons-cancel-border;
&:hover, &:not(:disabled):active, &:focus {
border-color: @colortheme_alertify-cancel-border;
color: @colortheme_alertify-cancel-border;
background-color: fade(@colortheme_alertify-cancel-border, 25%);
border-color: @cp_buttons-cancel-border;
color: @cp_buttons-cancel-border;
background-color: fade(@cp_buttons-cancel-border, 25%);
}
}
&.btn-register {
@ -212,7 +190,7 @@
&:focus {
//border: 1px dotted @alertify-base;
box-shadow: 0px 0px 5px @colortheme_alertify-primary !important;
box-shadow: 0px 0px 5px @cp_buttons-primary !important;
outline: none;
}
&::-moz-focus-inner {
@ -221,11 +199,66 @@
&:disabled {
cursor: not-allowed !important;
background-color: @colortheme_alertify-disabled;
color: @colortheme_alertify-disabled-text;
border-color: @colortheme_alertify-disabled-border;
background-color: @cp_buttons-disabled;
color: @cp_buttons-disabled-text;
border-color: @cp_buttons-disabled-border;
&:hover, &:active {
background-color: @colortheme_alertify-disabled;
background-color: @cp_buttons-disabled;
}
}
}
// Bootstrap Alerts
.alert {
margin: 0px 0px @alertify_padding-base 0px;
font-size: 12px;
padding: 5px;
border-radius: 0px;
i {
margin-right: 10px;
}
&.cp-alert-top {
margin-top: @alertify_padding-base;
}
a {
color: @cryptpad_text_col;
text-decoration: underline;
}
&.alert-primary {
background-color: fade(@cryptpad_color_brand, 15%);
color: @cp_alertify-fg;
border-color: @cp_alertify-fg;
a {
color: @cp_alertify-fg;
text-decoration: underline;
}
}
&.alert-warning {
background-color: @cp_alerts-warning-bg;
color: @cp_alerts-warning-text;
border-color: @cp_alerts-warning-fg;
}
&.alert-danger {
background-color: @cp_alerts-danger-bg;
color: @cp_alerts-danger-text;
border-color: @cp_alerts-danger-fg;
}
&.alert-info {
background-color: @cp_alerts-info-bg;
color: @cp_alerts-info-text;
border-color: @cp_alerts-info-fg;
}
&.alert-success {
background-color: @cp_alerts-success-bg;
color: @cp_alerts-success-text;
border-color: @cp_alerts-success-fg;
}
&.dismissable {
display: flex;
align-items: center;
span.fa-times {
font-size: @colortheme_app-font-size;
margin-left: 20px;
cursor: pointer;
}
}
}

2
customize.dist/src/less2/include/framework.less
View file

@ -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();

8
customize.dist/src/less2/include/help.less
View file

@ -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;

8
customize.dist/src/less2/include/icons.less
View file

@ -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 @@
}
}
}

105
customize.dist/src/less2/include/infopages.less
View file

@ -3,7 +3,7 @@
.infopages_link () {
text-decoration: none;
color: #0275D8;
color: @cryptpad_color_link;
cursor: pointer;
display: inline-flex;
&:hover {
@ -11,23 +11,23 @@
}
}
.cp-shadow() {
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.34);
box-shadow: 0px 0px 25px 0px @cp_shadow-color;
}
.infopages_main () {
--LessLoader_require: LessLoader_currentFile();
}
body {
body.html {
.font_main();
@infopages_infobar-height: 64px;
@infopages_padding: 32px;
// Basic setup for info pages, this should be used at the global level
background-color: @colortheme_info-background;
color: @cryptpad_text_col;
background-color: @cp_static-bg;
color: @cp_static-fg;
a {
color: @colortheme_logo-2;
&:visited { color: darken(@colortheme_logo-2, 5%); }
color: @cp_static-link;
&:visited { color: darken(@cp_static-link, 5%); }
}
a:hover {
opacity: 1;
@ -77,34 +77,48 @@ body {
.cp-page-title {
h1 {
font-family: "IBM Plex Mono";
color: @colortheme_logo-2;
color: @cp_static-title;
margin: 50px auto;
}
}
p {
a {
text-decoration: underline;
}
}
.row.cp-page-section {
margin: 50px 0px;
a {
text-decoration: underline;
}
.small-logo {
max-width: 40%;
}
}
img.cp-shadow {
.cp-shadow();
}
img.cp-img-invert {
filter: @cp_static-img-invert-filter;
}
button {
outline: none;
background-color: @colortheme_logo-2;
color: @colortheme_base;
background-color: @cp_buttons-primary;
color: @cp_buttons-primary-text;
border: none;
padding: 10px 20px;
margin-right: 10px;
border-radius: 0px;
cursor: pointer;
&:hover, &:focus {
background-color: darken(@colortheme_logo-2, 5%);
background-color: contrast(@cp_buttons-primary-text, darken(@cp_buttons-primary, 10%), lighten(@cp_buttons-primary, 10%));
}
}
button.cp-secondary {
background-color: white;
color: @colortheme_logo-2;
border: 1px solid @colortheme_logo-2;
background-color: @cp_buttons-cancel;
color: @cp_buttons-fg;
border: 1px solid @cp_buttons-fg;
}
.form-group {
@ -128,19 +142,18 @@ body {
}
}
footer {
@footer-color: #d9d9d9; // FIXME use/make variable
background-color: @footer-color;
background-color: @cp_static-footer;
padding-top: 20px;
align-self: normal; // override align-items:center from parent in index.html
.container {
margin-bottom: 20px;
a {
color: @colortheme_logo-2;
color: @cp_static-link;
&:visited {
color: @colortheme_logo-2;
};
color: @cp_static-link;
}
}
}
.cp-logo-foot {
@ -156,18 +169,18 @@ body {
display: block;
font-family: "IBM Plex Mono";
font-size: 1.5rem;
color: @colortheme_logo-2;
color: @cp_static-title;
margin-bottom: 10px;
}
}
.cp-version-footer {
background-color: @footer-color;
background-color: @cp_static-footer;
display: flex;
flex-flow: column;
align-items: center;
padding: 0.5em;
border-top: 1px solid #fff;
border-top: 1px solid @cp_static-footer-border;
select {
min-width: 0;
margin-bottom: 10px;
@ -175,47 +188,10 @@ body {
}
}
// Apply this to the top bar div
.cp-topbar {
background: #fff;
z-index: 10000; //Z infopage toolbar
position: fixed;
top: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
width: 100%;
height: @infopages_infobar-height;
padding-left: 0.5em;
padding-right: 0.5em;
vertical-align: middle;
font-size: 1.25em;
line-height: 1.25em;
cursor: default;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
.navbar-nav {
display: flex;
align-items: center;
}
a {
font-weight: 500;
padding: 0.6em;
.infopages_link()
}
.cp-logo {
margin-right: 0.5em;
}
}
// navigation top bar
.navbar {
width: 100%;
color: @colortheme_logo-2;
color: @cp_static-topbar-fg;
.navbar-brand {
display: block;
height: 50px;
@ -234,18 +210,17 @@ body {
a {
border: 2px solid transparent;
white-space: nowrap;
&:visited {
color: @colortheme_logo-2;
}
color: @cp_static-title;
}
.nav-link {
padding: 0.5em 0.7em;
color: @cp_static-link;
&:hover {
color: @cryptpad_text_col;
}
}
.cp-register-btn {
border: 2px solid @colortheme_logo-2;
border: 2px solid @cp_static-topbar-fg;
display: inline-block;
}
button:focus {
@ -253,7 +228,7 @@ body {
}
.navbar-toggler {
margin-top: 10px;
color: @colortheme_logo-2;
color: @cp_static-topbar-fg;
}
}
@media (max-width: 1000px) {

2
customize.dist/src/less2/include/leftside-menu.less
View file

@ -18,6 +18,6 @@
background: rgba(0,0,0,0.05);
}
&.cp-leftside-active {
background: @colortheme_sidebar-active;
background: @cp_sidebar-left-active;
}
}

12
customize.dist/src/less2/include/limit-bar.less
View file

@ -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;
}
}
}

212
customize.dist/src/less2/include/loading.less Normal file
View file

@ -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);
}
}

56
customize.dist/src/less2/include/markdown.less
View file

@ -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
}
}
}

4
customize.dist/src/less2/include/mentions.less
View file

@ -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;
}
}
}

125
customize.dist/src/less2/include/messenger.less
View file

@ -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 {

20
customize.dist/src/less2/include/modal.less
View file

@ -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;
}
}

20
customize.dist/src/less2/include/modals-ui-elements.less
View file

@ -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;
}
}

10
customize.dist/src/less2/include/notifications.less
View file

@ -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;
}
}
}

2
customize.dist/src/less2/include/password-input.less
View file

@ -18,7 +18,7 @@
justify-content: center;
cursor: pointer;
&:hover {
color: darken(@colortheme_alertify-primary, 10%);
color: darken(@cryptpad_color_brand, 10%);
}
}
}

51
customize.dist/src/less2/include/sidebar-layout.less
View file

@ -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;

12
customize.dist/src/less2/include/support.less
View file

@ -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 {

9
customize.dist/src/less2/include/tippy.less
View file

@ -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;
}

25
customize.dist/src/less2/include/tokenfield.less
View file

@ -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;

10
customize.dist/src/less2/include/toolbar-history.less
View file

@ -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;
}

91
customize.dist/src/less2/include/toolbar.less
View file

@ -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;

7
customize.dist/src/less2/include/tools.less
View file

@ -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;

17
customize.dist/src/less2/include/usergrid.less
View file

@ -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%);
}
}
}

4
customize.dist/src/less2/include/variables.less
View file

@ -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;

5
customize.dist/src/less2/pages/page-404.less
View file

@ -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;
}
}
}

4
customize.dist/src/less2/pages/page-contact.less
View file

@ -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;

29
customize.dist/src/less2/pages/page-features.less
View file

@ -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%);
}
}
}

42
customize.dist/src/less2/pages/page-index.less
View file

@ -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;

17
customize.dist/src/less2/pages/page-login.less
View file

@ -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;
}
}
}

11
customize.dist/src/less2/pages/page-register.less
View file

@ -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;
}
}
}

25
customize.dist/src/less2/pages/page-what-is-cryptpad.less
View file

@ -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;
// }
// }
}

7
customize.dist/src/outer.css
View file

@ -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;

2
customize.dist/template.js
View file

@ -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 () {});
}

23
www/admin/app-admin.less
View file

@ -104,8 +104,8 @@
color: #666;
.cp-support-ispremium {
padding: 0 5px;
color: @colortheme_cp-red;
background-color: lighten(@colortheme_cp-red, 25%);
color: @cp_admin-premium-fg;
background-color: @cp_admin-premium-bg;
}
}
}
@ -119,18 +119,18 @@
}
.cp-support-list-message {
&:last-child:not(.cp-support-fromadmin) {
color: @colortheme_cp-red;
background-color: lighten(@colortheme_form-warning, 25%);
color: @cp_admin-last-fg;
background-color: @cp_admin-last-bg;
.cp-support-showdata {
background-color: lighten(@colortheme_form-warning, 30%);
background-color: lighten(@cp_admin-last-bg, 5%);
}
}
&:last-child {
&.cp-support-frompremium {
background-color: lighten(@colortheme_cp-red, 25%);
background-color: @cp_admin-premium-bg;
.cp-support-showdata {
background-color: lighten(@colortheme_cp-red, 30%);
background-color: lighten(@cp_admin-premium-bg, 30%);
}
}
}
@ -160,17 +160,18 @@
}
.cp-support-fromadmin {
color: @colortheme_logo-2;
background-color: #FFF;
color: @cp_admin-isadmin-fg;
background-color: @cp_admin-isadmin-bg;
.cp-support-message-content {
color: @colortheme_logo-2;
color: @cp_admin-isadmin-fg;
}
}
table#cp-performance-table {
td, th {
padding: 5px;
border: 1px solid #222;
color: @cryptpad_text_col;
border: 1px solid @cryptpad_text_col;
}
}

4
www/admin/index.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer" />
<script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
<link href="/customize/src/outer.css?ver=1.1" rel="stylesheet" type="text/css">
<link href="/customize/src/outer.css?ver=1.3.2" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="sbox-iframe">
<iframe-placeholder>

12
www/admin/inner.js
View file

@ -50,8 +50,8 @@ define([
'quota': [
'cp-admin-defaultlimit',
'cp-admin-setlimit',
'cp-admin-getlimits',
'cp-admin-getquota',
'cp-admin-getlimits',
],
'stats': [
'cp-admin-refresh-stats',
@ -697,7 +697,7 @@ define([
var premium = t.some(function (msg) {
var _ed = Util.find(msg, ['content', 'msg', 'content', 'sender', 'edPublic']);
if (ed !== _ed) { return; }
return Util.find(t[0], ['content', 'msg', 'content', 'sender', 'plan']);
return Util.find(msg, ['content', 'msg', 'content', 'sender', 'plan']);
});
var lastMsg = t[t.length - 1];
var lastMsgEd = Util.find(lastMsg, ['content', 'msg', 'content', 'sender', 'edPublic']);
@ -931,14 +931,6 @@ define([
return;
};
Messages.admin_cat_performance = "Performance"; // XXX admin
Messages.admin_performanceProfilingHint = "Measure the running time of various server tasks by type"; // XXX admin
Messages.admin_performanceProfilingTitle = "Performance"; // XXX admin
Messages.admin_performanceKeyHeading = 'KEY'; // XXX admin
Messages.admin_performanceTimeHeading = 'Time (seconds)'; // XXX admin
Messages.admin_performancePercentHeading = '%'; // XXX admin
create['performance-profiling'] = function () {
var $div = makeBlock('performance-profiling');

11
www/code/app-code.less
View file

@ -11,6 +11,7 @@
flex-flow: column;
max-height: 100%;
min-height: auto;
background-color: @cp_preview-bg;
#cp-app-code-container {
display: inline-flex;
@ -98,17 +99,23 @@
}
#cp-app-code-preview-content {
background-color: @cp_preview-bg;
color: @cp_preview-fg;
max-width: 40vw;
margin: 1em auto;
.markdown_preformatted-code;
.markdown_gfm-table(black);
.markdown_gfm-table();
table {
margin-bottom: 1rem;
}
media-tag > * {
margin-bottom: 1rem;
}
a {
color: @cp_preview-link;
text-decoration: underline;
}
}
.cp-splitter {
@ -135,7 +142,7 @@
position: relative;
display: none;
.markdown_preformatted-code;
.markdown_gfm-table(black);
.markdown_gfm-table();
}
}

4
www/code/index.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer" />
<script async data-bootload="/common/sframe-app-outer.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
<link href="/customize/src/outer.css?ver=1.1" rel="stylesheet" type="text/css">
<link href="/customize/src/outer.css?ver=1.3.2" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="sbox-iframe">
<iframe-placeholder>

33
www/common/LessLoader.js
View file

@ -93,6 +93,17 @@ define([
xhr.send(null);
};
var COLORTHEME = '/customize/src/less2/include/colortheme.less';
var COLORTHEME_DARK = '/customize/src/less2/include/colortheme-dark.less';
//COLORTHEME_DARK = '/customize/src/less2/include/colortheme.less'; // XXX
var getColortheme = function () {
return window.CryptPad_theme;
};
var getColorthemeURL = function () {
if (window.CryptPad_theme === 'dark') { return COLORTHEME_DARK; }
return COLORTHEME;
};
var lessEngine;
var tempCache = { key: Math.random() };
var getLessEngine = function (cb) {
@ -108,15 +119,33 @@ define([
});
var doXHR = lessEngine.FileManager.prototype.doXHR;
lessEngine.FileManager.prototype.doXHR = function (url, type, callback, errback) {
//console.error(url, COLORTHEME);
var col = false;
var _url = url;
if (url === COLORTHEME) {
col = true;
url = getColorthemeURL();
//console.warn(url);
}
url = fixURL(url);
var cached = tempCache[url];
var cached = tempCache[_url];
if (cached && cached.res) {
var res = cached.res;
return void setTimeout(function () { callback(res[0], res[1]); });
}
if (cached) { return void cached.queue.push(callback); }
cached = tempCache[url] = { queue: [ callback ], res: undefined };
cached = tempCache[_url] = { queue: [ callback ], res: undefined };
return doXHR(url, type, function (text, lastModified) {
if (col) {
//console.warn(text, lastModified);
if (getColortheme() === "custom") {
// XXX COLOR: append custom theme here
var custom = [
'@cryptpad_text_col: #FF0000;'
].join('\n');
text += '\n'+custom;
}
}
cached.res = [ text, lastModified ];
var queue = cached.queue;
cached.queue = [];

32
www/common/boot2.js
View file

@ -1,3 +1,35 @@
(function () {
try {
var isDarkOS = function () {
try {
return window.matchMedia('(prefers-color-scheme: dark)').matches;
} catch (e) { return false; }
};
var flush = window.CryptPad_flushCache = function () {
Object.keys(localStorage).forEach(function (k) {
if (k.indexOf('CRYPTPAD_CACHE|') !== 0 && k.indexOf('LESS_CACHE') !== 0) { return; }
delete localStorage[k];
});
};
var os = isDarkOS() ? 'dark' : 'light';
var key = 'CRYPTPAD_STORE|colortheme';
window.CryptPad_theme = localStorage[key] || os;
if (!localStorage[key]) {
// We're using OS theme, check if we need to change
if (os !== localStorage[key+'_default']) {
console.warn('New OS theme, flush cache');
flush();
localStorage[key+'_default'] = os;
}
}
if (window.CryptPad_theme === 'dark') {
var s = document.createElement('style');
s.innerHTML = 'body { background: black; }';
document.body.appendChild(s);
}
} catch (e) { console.error(e); }
})();
// This is stage 1, it can be changed but you must bump the version of the project.
define([
'/common/requireconfig.js'

4
www/common/common-interface.js
View file

@ -388,6 +388,7 @@ define([
}));
};
$t.closest('.tokenfield').removeClass('form-control');
t.focus = function () {
var $temp = $t.closest('.tokenfield').find('.token-input');
$temp.css('width', '20%');
@ -1265,9 +1266,6 @@ define([
var $popup = $(popup);
if (opts.hidden) {
$popup.addClass('cp-minimized');
}
if (opts.big) {
$popup.addClass('cp-corner-big');
}

13
www/common/common-ui-elements.js
View file

@ -24,10 +24,10 @@ define([
UIElements.getSvgLogo = function () {
var svg = (function(){/*
<svg width="45" height="50" version="1.1" viewBox="0 0 11.906 13.229" xmlns="http://www.w3.org/2000/svg" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb">
<path id="squares" d="m1.1842 0.63976 0.078593 5.614h4.693l5.844e-4 -5.614zm4.7749 5.614 4.383e-4 6.2231c1.8161-0.83261 4.6393-2.4183 4.691-6.1113l0.0016-0.11174z" fill-opacity=".39608"/>
<path id="outline" d="m0.80493 0.26501 0.004684 0.37943 0.079911 6.475c0.024028 1.9418 0.81004 3.2247 1.8144 4.0729 1.0043 0.84824 2.2063 1.2937 3.0935 1.7018l0.16787 0.0775 0.16377-0.08657c0.7899-0.41719 1.9998-0.86054 3.028-1.6991 1.0282-0.83852 1.8614-2.1164 1.8614-4.0713v-3.689l-3.4016-3.1607zm0.75864 0.74949h5.2426v3.1854h3.4628v2.9148c0 1.7505-0.68311 2.7546-1.5854 3.4905-0.84909 0.69243-1.8906 1.1058-2.7348 1.5342-0.89552-0.40429-1.9335-0.8206-2.7611-1.5196-0.87538-0.73932-1.5269-1.7585-1.5485-3.5098zm5.9918 0.21646 2.3888 2.2196h-2.3888z" color="#000000" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" shape-rendering="auto" solid-color="#000000" stop-color="#000000" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;font-variation-settings:normal;inline-size:0;isolation:auto;mix-blend-mode:normal;shape-margin:0;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
<path id="keyhole" d="m5.9073 4.8889a1.2769 1.2769 0 0 0-1.276 1.277 1.2769 1.2769 0 0 0 0.72454 1.1513l-0.4458 2.3541h1.9965l-0.4458-2.3541a1.2769 1.2769 0 0 0 0.72447-1.1512 1.2769 1.2769 0 0 0-1.2769-1.277 1.2769 1.2769 0 0 0-9.488e-4 0z" />
<svg width="45" height="50" version="1.1" viewBox="0 0 11.906 13.229" xmlns="http://www.w3.org/2000/svg">
<path id="background" d="m1.0914 0.43939h6.464l3.2642 3.0329v3.6261c0 3.8106-3.1186 4.6934-4.8229 5.5936-1.8663-0.85843-4.7759-1.7955-4.8229-5.5936z" style="stroke-width:0"/>
<path id="squares" transform="matrix(.26458 0 0 .26458 -5.37e-5 0)" d="m4.125 1.6582 0.30469 21.82h18.242l0.001953-21.82h-18.549zm18.555 21.822 0.001953 24.188c7.0591-3.2362 18.032-9.399 18.232-23.754l0.007813-0.43359h-18.242z" style="fill-opacity:.4;stroke-width:.55042"/>
<path id="outline" transform="matrix(.26458 0 0 .26458 -5.37e-5 0)" d="m2.6504 0.19922 0.021484 1.4766 0.31055 25.172c0.093479 7.5478 3.1451 12.529 7.0488 15.826 3.9038 3.297 8.5769 5.029 12.025 6.6152l0.65039 0.30274 0.63477-0.33984c3.0702-1.6216 7.7769-3.3403 11.773-6.5996 3.9966-3.2593 7.2344-8.2277 7.2344-15.826v-14.336l-13.221-12.291zm2.9453 2.916h20.381v12.379h13.457v11.332c0 6.8038-2.6491 10.706-6.1562 13.566-3.2982 2.6898-7.3426 4.2502-10.623 5.9141-3.4806-1.5714-7.5236-3.1369-10.74-5.8535-3.4025-2.8737-5.9391-6.8355-6.0234-13.643zm23.289 0.83789 9.2871 8.6328h-9.2871zm-6.5176 14.223a4.9632 4.9632 0 0 0-4.8496 4.9629 4.9632 4.9632 0 0 0 2.8184 4.4746l-1.7324 9.1504h7.7598l-1.7324-9.1523a4.9632 4.9632 0 0 0 2.8145-4.4727 4.9632 4.9632 0 0 0-4.9629-4.9629 4.9632 4.9632 0 0 0-0.11523 0z" style="color-rendering:auto;color:#000000;dominant-baseline:auto;font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;font-variation-settings:normal;image-rendering:auto;inline-size:0;isolation:auto;mix-blend-mode:normal;shape-margin:0;shape-padding:0;shape-rendering:auto;solid-color:#000000;stop-color:#000000;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
</svg>
*/}).toString().slice(14,-3);
return svg;
@ -2160,6 +2160,7 @@ define([
// Team pad
var team;
// FIXME: broken wen cache is enabled
var teamExists = privateData.teams && Object.keys(privateData.teams).length;
var teamValue;
// storeInTeam can be
@ -2575,7 +2576,7 @@ define([
var info = h('p.cp-password-info', Messages.password_info);
var password = UI.passwordInput({placeholder: Messages.password_placeholder});
var $password = $(password);
var button = h('button', Messages.password_submit);
var button = h('button.btn.btn-primary', Messages.password_submit);
cfg = cfg || {};
if (cfg.value && !isError) {
@ -2616,7 +2617,7 @@ define([
UIElements.displayBurnAfterReadingPage = function (common, cb) {
var info = h('p.cp-password-info', Messages.burnAfterReading_warningAccess);
var button = h('button.primary', Messages.burnAfterReading_proceed);
var button = h('button.btn.primary', Messages.burnAfterReading_proceed);
$(button).on('click', function () {
cb();

3
www/common/diffMarked.js
View file

@ -11,7 +11,7 @@ define([
'/common/highlight/highlight.pack.js',
'/bower_components/diff-dom/diffDOM.js',
'/bower_components/tweetnacl/nacl-fast.min.js',
'css!/common/highlight/styles/github.css'
'css!/common/highlight/styles/'+ (window.CryptPad_theme === 'dark' ? 'dracula.css' : 'github.css')
],function ($, ApiConfig, Marked, Hash, Util, h, MT, MediaTag, Messages) {
var DiffMd = {};
@ -40,6 +40,7 @@ define([
Mermaid = _Mermaid;
Mermaid.initialize({
gantt: { axisFormat: '%m-%d', },
theme: (window.CryptPad_theme === 'dark') ? 'dark' : undefined,
"themeCSS": mermaidThemeCSS,
});
}

12
www/common/drive-ui.js
View file

@ -124,7 +124,7 @@ define([
var $gridIcon = $('<button>', {"class": "fa fa-th-large"});
var $sortAscIcon = $('<span>', {"class": "fa fa-angle-up sortasc"});
var $sortDescIcon = $('<span>', {"class": "fa fa-angle-down sortdesc"});
var $closeIcon = $('<span>', {"class": "fa fa-window-close"});
var $closeIcon = $('<span>', {"class": "fa fa-times"});
//var $backupIcon = $('<span>', {"class": "fa fa-life-ring"});
var $searchIcon = $('<span>', {"class": "fa fa-search cp-app-drive-tree-search-icon"});
var $addIcon = $('<span>', {"class": "fa fa-plus"});
@ -4028,16 +4028,6 @@ define([
$tree.html('');
/*
$(h('button.fa.fa-times.cp-close-button', {
title: Messages.filePicker_close
})).click(function (e) {
e.stopPropagation();
$tree.hide();
checkCollapseButton();
}).appendTo($tree);
*/
var $div = $('<div>', {'class': 'cp-app-drive-tree-categories-container'})
.appendTo($tree);
if (displayedCategories.indexOf(SEARCH) !== -1) { createCategory($div, SEARCH); }

52
www/common/file-dialog.less
View file

@ -1,52 +0,0 @@
@import (reference) '../customize/src/less2/include/colortheme-all.less';
@import (reference) '../customize/src/less2/include/modal.less';
.fileDialog_main () {
#fileDialog {
.modal_main();
display: none;
.cp-modal {
.fileContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
overflow-y: auto;
}
.element {
@darker: darken(@colortheme_modal-fg, 30%);
width: 200px;
min-width: 200px;
height: 1em;
padding: 0.5em;
margin: 5px;
box-sizing: content-box;
text-align: left;
line-height: 1em;
cursor: pointer;
background-color: #111;
color: @darker;
transition: all 0.1s;
&:hover {
color: @colortheme_modal-fg;
}
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
align-items: center;
.fa {
cursor: pointer;
margin-right: 0.5em;
}
}
}
}
}

76
www/common/highlight/styles/dracula.css Normal file
View file

@ -0,0 +1,76 @@
/*
Dracula Theme v1.2.0
https://github.com/zenorocha/dracula-theme
Copyright 2015, All rights reserved
Code licensed under the MIT license
http://zenorocha.mit-license.org
@author Éverton Ribeiro <nuxlli@gmail.com>
@author Zeno Rocha <hi@zenorocha.com>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #282a36;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-link {
color: #8be9fd;
}
.hljs-function .hljs-keyword {
color: #ff79c6;
}
.hljs,
.hljs-subst {
color: #f8f8f2;
}
.hljs-string,
.hljs-title,
.hljs-name,
.hljs-type,
.hljs-attribute,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
color: #f1fa8c;
}
.hljs-comment,
.hljs-quote,
.hljs-deletion,
.hljs-meta {
color: #6272a4;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-title,
.hljs-section,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-strong {
font-weight: bold;
}
.hljs-emphasis {
font-style: italic;
}

2
www/common/inner/access.js
View file

@ -948,7 +948,7 @@ define([
$d.append(changePass);
}
if (owned) {
var deleteOwned = h('button.btn.btn-danger-alt', [h('i.cptools.cptools-destroy'), Messages.fc_delete_owned]);
var deleteOwned = h('button.btn.btn-danger', [h('i.cptools.cptools-destroy'), Messages.fc_delete_owned]);
var spinner = UI.makeSpinner();
UI.confirmButton(deleteOwned, {
classes: 'btn-danger'

14
www/common/loading.js
View file

@ -1,3 +1,17 @@
(function () {
try {
var req = JSON.parse(decodeURIComponent(window.location.hash.substring(1)));
var theme = req.theme;
var os = req.themeOS;
window.CryptPad_theme = theme || os;
if ((theme || os) === 'dark') {
var s = document.createElement('style');
s.innerHTML = 'body { background: black; }';
document.body.appendChild(s);
}
} catch (e) { console.error(e); }
})();
require(['/customize/loading.js'], function (Loading) {
Loading();
});

27
www/common/markdown.less
View file

@ -1,27 +0,0 @@
.markdown_preformatted-code (@color: #333) {
pre > code {
display: block;
position: relative;
border: 1px solid @color;
width: 90%;
margin: auto;
padding-left: .25vw;
overflow-x: auto;
overflow-y: hidden;
}
}
.markdown_gfm-table (@color: black) {
table {
border-collapse: collapse;
tr {
th {
border: 3px solid @color;
padding: 15px;
}
}
}
}
// todo ul, ol

6
www/common/onlyoffice/app-oo.less
View file

@ -46,14 +46,14 @@ body.cp-app-sheet, body.cp-app-oodoc, body.cp-app-ooslide {
#cp-app-oo-container {
flex: 1;
height: 100%;
background-color: lightgrey;
background-color: @cp_app-bg;
display: flex;
min-height: 0;
}
#cp-app-oo-editor {
flex: 1;
height: 100%;
background-color: lightgrey;
background-color: @cp_app-bg;
display: flex;
flex-flow: column;
position: relative;
@ -67,7 +67,7 @@ body.cp-app-sheet, body.cp-app-oodoc, body.cp-app-ooslide {
bottom: 0;
right: 0;
left: 0;
background-color: rgba(255,255,255,0.5);
background-color: @cp_oo-offline-overlay;
}
#ooframe {
flex: 1;

2
www/common/outer/local-store.js
View file

@ -100,7 +100,7 @@ define([
try {
Object.keys(localStorage || {}).forEach(function (k) {
// Remvoe everything in localStorage except CACHE and FS_hash
if (/^CRYPTPAD_CACHE/.test(k) || /^LESS_CACHE/.test(k) || k === Constants.fileHashKey) { return; }
if (/^CRYPTPAD_CACHE/.test(k) || /^LESS_CACHE/.test(k) || k === Constants.fileHashKey || /^CRYPTPAD_STORE|colortheme/.test(k)) { return; }
delete localStorage[k];
});
} catch (e) { console.error(e); }

6
www/common/sframe-common-codemirror.js
View file

@ -379,10 +379,12 @@ define([
exp.configureTheme = function (Common, cb) {
/* Remember the user's last choice of theme using localStorage */
var themeKey = ['codemirror', 'theme'];
var isDark = window.CryptPad_theme === "dark";
var themeKey = ['codemirror', isDark ? 'themedark' : 'theme'];
var defaultTheme = isDark ? 'dracula' : 'default';
var todo = function (err, lastTheme) {
lastTheme = lastTheme || 'default';
lastTheme = lastTheme || defaultTheme;
var options = [];
Themes.forEach(function (l) {
options.push({

4
www/common/sframe-common-file.js
View file

@ -32,7 +32,7 @@ define([
module.create = function (common, config) {
var File = {};
var origin = common.getMetadataMgr().getPrivateData().origin;
//var origin = common.getMetadataMgr().getPrivateData().origin;
var response = Util.response(function (label, info) {
console.error('COMMON_UPLOAD__' + label, info);
});
@ -288,7 +288,7 @@ define([
store: true
};
var createHelper = function (href, text) {
return UI.createHelper(origin + href, text);
return UI.createHelper(href, text);
};
var createManualStore = function (isFolderUpload) {
var privateData = common.getMetadataMgr().getPrivateData();

7
www/common/sframe-common-outer.js
View file

@ -11,10 +11,13 @@ define([
common.initIframe = function (waitFor, isRt, pathname) {
var requireConfig = RequireConfig();
var lang = Messages._languageUsed;
var themeKey = 'CRYPTPAD_STORE|colortheme';
var req = {
cfg: requireConfig,
req: [ '/common/loading.js' ],
pfx: window.location.origin,
theme: localStorage[themeKey],
themeOS: localStorage[themeKey+'_default'],
lang: lang
};
window.rc = requireConfig;
@ -30,9 +33,11 @@ define([
}
}
document.getElementById('sbox-iframe').setAttribute('src',
var $i = $('<iframe>').attr('id', 'sbox-iframe').attr('src',
ApiConfig.httpSafeOrigin + (pathname || window.location.pathname) + 'inner.html?' +
requireConfig.urlArgs + '#' + encodeURIComponent(JSON.stringify(req)));
$('iframe-placeholder').after($i).remove();
// This is a cheap trick to avoid loading sframe-channel in parallel with the
// loading screen setup.

4
www/contacts/app-contacts.less
View file

@ -27,6 +27,8 @@
}
}
.messenger_main();
.messenger_main(
@bg-color: @cp_messenger-bg;
);
}

4
www/contacts/index.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer" />
<script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
<link href="/customize/src/outer.css?ver=1.1" rel="stylesheet" type="text/css">
<link href="/customize/src/outer.css?ver=1.3.2" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="sbox-iframe">
<iframe-placeholder>

10
www/debug/app-debug.less
View file

@ -20,6 +20,8 @@
overflow: auto;
white-space: pre-wrap;
display: none;
color: @cp_preview-fg;
background-color: @cp_preview-bg;
}
#cp-app-debug-content {
margin: 10px 50px;
@ -49,20 +51,20 @@
max-width: 500px;
}
.cp-debug-ok {
background-color: #eeffee;
background-color: @cryptpad_color_light_green;
}
.cp-debug-nok {
background-color: #ffeeee;
background-color: @cryptpad_color_light_red;
}
tr:not(:first-child):hover {
background-color: rgba(0,0,0,0.1);
background-color: @cp_debug-hover;
}
}
.fa-chevron-left, .fa-chevron-right {
margin: 5px 20px;
cursor: pointer;
&:hover {
color: #777;
color: @cp_debug-icon-hover;
}
}
.cp-app-debug-progress {

4
www/debug/index.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer" />
<script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
<link href="/customize/src/outer.css?ver=1.1" rel="stylesheet" type="text/css">
<link href="/customize/src/outer.css?ver=1.3.3" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="sbox-iframe">
<iframe-placeholder>

26
www/debug/main.js
View file

@ -23,37 +23,11 @@ define([
UI: UI
};
var requireConfig = RequireConfig();
// Loaded in load #2
nThen(function (waitFor) {
$(waitFor());
}).nThen(function (waitFor) {
SFCommonO.initIframe(waitFor);
}).nThen(function (waitFor) {
var req = {
cfg: requireConfig,
req: [ '/common/loading.js' ],
pfx: window.location.origin
};
window.rc = requireConfig;
window.apiconf = ApiConfig;
$('#sbox-iframe').attr('src',
ApiConfig.httpSafeOrigin + '/debug/inner.html?' + requireConfig.urlArgs +
'#' + encodeURIComponent(JSON.stringify(req)));
// This is a cheap trick to avoid loading sframe-channel in parallel with the
// loading screen setup.
var done = waitFor();
var onMsg = function (msg) {
var data = JSON.parse(msg.data);
if (data.q !== 'READY') { return; }
window.removeEventListener('message', onMsg);
var _done = done;
done = function () { };
_done();
};
window.addEventListener('message', onMsg);
}).nThen(function (/*waitFor*/) {
var hash = localStorage[Constants.userHashKey] || localStorage[Constants.fileHashKey];
var drive = hash && ('#'+hash === window.location.hash);

4
www/drive/index.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer" />
<script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
<link href="/customize/src/outer.css?ver=1.1" rel="stylesheet" type="text/css">
<link href="/customize/src/outer.css?ver=1.3.2" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="sbox-iframe">
<iframe-placeholder>

41
www/file/app-file.less
View file

@ -14,6 +14,7 @@
// body
display: flex;
flex-flow: column;
background-color: @cp_app-bg;
#cp-app-file-content {
flex: 1;
@ -57,7 +58,8 @@
width: 90vw;
height: 100%;
padding: 2em;
background-color: white;
background-color: @cp_mediatag-text-bg;
color: @cp_mediatag-text-fg;
overflow-y: auto;
word-wrap: break-word;
white-space: pre-wrap;
@ -77,14 +79,14 @@
margin-top: 5px;
height: 40px;
font-size: 20px;
border: 1px solid @colortheme_logo-2;
border: 1px solid @cp_file-progress-bg;
background: white;
color: @cryptpad_text_col;
color: @cp_file-progress-fg;
display: flex;
justify-content: space-between;
position: relative;
.cp-app-file-progress-dl {
border-right: 1px solid @cryptpad_text_col;
border-right: 1px solid @cp_file-progress-fg;
}
.cp-app-file-progress-dl, .cp-app-file-progress-dc {
width: 50%;
@ -99,7 +101,7 @@
top: 0;
left: 0;
bottom: 0;
background: @colortheme_logo-2;
background: @cp_file-progress-bg;
}
}
.cp-app-file-progress-txt {
@ -116,7 +118,8 @@
display: block;
margin: 50px auto;
max-width: 80vw;
label {
button {
width: 100%;
line-height: ~"calc(50vh - 20px)";
text-align: center;
position: relative;
@ -143,10 +146,6 @@
}
}
}
.cp-app-file-hovering {
background-color: rgba(255, 0, 115, 0.5) !important;
}
.cp-app-file-block {
display: block;
}
@ -154,31 +153,9 @@
display: none;
}
.cp-app-file-input + label {
//border: 2px solid black;
//background-color: rgba(50, 50, 50, .10);
display: block;
}
.cp-app-file-input:focus + label,
.cp-app-file-input + label:hover {
//background-color: rgba(50, 50, 50, 0.30);
}
#cp-app-file-dlprogress {
position: absolute;
top: 0;
left: 0;
height: 100%;
transition: width 200ms;
width: 0%;
max-width: 100%;
max-height: 100%;
background-color: rgba(255, 0, 115, 0.75);
z-index: 10000;
display: block;
}
#cp-app-file-download-view {
flex: 1;

4
www/file/index.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer" />
<script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
<link href="/customize/src/outer.css?ver=1.1" rel="stylesheet" type="text/css">
<link href="/customize/src/outer.css?ver=1.3.2" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="sbox-iframe">
<iframe-placeholder>

2
www/file/inner.html
View file

@ -13,7 +13,7 @@
<div id="cp-app-file-content">
<div id="cp-app-file-upload-form" style="display: none;">
<input type="file" name="file" id="cp-app-file-upfile" class="cp-app-file-input" />
<label for="cp-app-file-upfile" class="btn btn-primary cp-app-file-block unselectable" data-localization-title="upload_choose"
<button for="cp-app-file-upfile" class="btn btn-primary cp-app-file-block unselectable" data-localization-title="upload_choose"
data-localization="upload_choose"></label>
</div>
<div id="cp-app-file-download-view" style="display: none;">

6
www/file/inner.js
View file

@ -44,7 +44,7 @@ define([
var $appContainer = $('#cp-app-file-content');
var $form = $('#cp-app-file-upload-form');
var $dlview = $('#cp-app-file-download-view');
var $label = $form.find('label');
var $label = $form.find('button');
var $bar = $('.cp-toolbar-container');
var $body = $('body');
@ -175,6 +175,10 @@ define([
});
}
$label.click(function () {
$form.find('input[type="file"]').click();
});
$form.css({
display: 'block',
});

134
www/kanban/app-kanban.less
View file

@ -14,24 +14,18 @@
flex-flow: column;
max-height: 100%;
min-height: auto;
color: @cryptpad_text_col;
color: @cp_kanban-fg;
background-color: @cp_app-bg;
@board-bg: #eaeaea;
@board-bg: @cp_kanban-board-bg;
@palette0: #C9C9C9; // Default bg color for header
@palette0: @cp_kanban-color0; // Default bg color for header
@kanban-colors:
#FFD4D4,
#FFDECA,
#FFE69C,
#DBFFB7,
#AFFDC2,
#C9FFFE,
#C8D6FF,
#E4CAFF;
@kanban-colors: @cp_kanban-colors;
.kanban-board-header {
background-color: @palette0;
color: @cp_kanban-fg;
}
.kanban-board {
.kanban-board-inner {
@ -41,7 +35,10 @@
display: flex;
flex-flow: column;
}
color: @cryptpad_text_col;
color: @cp_kanban-fg;
button {
color: @cp_kanban-fg;
}
}
.cp-kanban-palette-nocolor {
@ -54,9 +51,9 @@
@color: extract(@kanban-colors, @index);
// make a numbered class selector for each color
.cp-kanban-palette-color@{index}{
background-color: @color;
background-color: @color !important;
&.kanban-board-inner {
background-color: fade(@color, 50%);
background-color: fade(@color, 50%) !important;
}
}
}
@ -70,8 +67,8 @@
}
#cp-kanban-edit-conflicts {
padding: 5px;
background: #eee;
color: @cryptpad_text_col;
background: @cp_kanban-conflict-bg;
color: @cp_kanban-fg;
font-size: 14px;
div {
display: inline;
@ -83,7 +80,7 @@
margin-bottom: 5px;
}
#cp-kanban-edit-body {
border: 1px solid @colortheme_modal-input;
border: 1px solid @cp_forms-border;
.CodeMirror {
height: 105px;
resize: vertical;
@ -92,12 +89,12 @@
box-sizing: content-box;
}
.cp-markdown-toolbar {
background-color: #eee;
color: @cryptpad_text_col;
background-color: @cp_kanban-conflict-bg;
color: @cp_kanban-fg;
button {
&:hover {
background-color: @cryptpad_text_col;
color: white;
background-color: @cp_kanban-fg;
color: @cp_kanban-conflict-bg;
}
}
}
@ -113,7 +110,8 @@
width: 30px;
text-align: center;
line-height: 30px;
color: @cryptpad_text_col;
color: @cp_kanban-fg;
border: 1px solid fade(@cp_kanban-fg, 40%);
}
}
#cp-kanban-edit-tags {
@ -169,7 +167,7 @@
justify-content: space-between;
padding: 5px;
flex-wrap: wrap;
touch-action: none;
background: @cp_kanban-item-bg;
.tools_unselectable();
touch-action: none;
cursor: move;
@ -201,10 +199,14 @@
.markdown_main();
.markdown_cryptpad();
.markdown_preformatted-code;
.markdown_gfm-table(black);
.markdown_gfm-table();
p {
margin-bottom: 5px;
}
a {
color: @cp_kanban-link;
text-decoration: underline;
}
ul {
padding-left: 20px;
}
@ -215,17 +217,19 @@
border: none;
padding: 5px;
margin: 0;
background-color: @cryptpad_color_light_grey;
//background-color: @cp_markdown-bg; // XXX disabled for being unreadable in dark mode
//color: @cp_kanban-fg; // XXX disabled for being unreadable in dark mode
width: 100%;
}
table {
color: @cryptpad_text_col;
border-color: @cryptpad_text_col;
color: @cp_kanban-fg;
th {
padding: 5px !important;
background-color: fade(@cryptpad_text_col, 10%);
background-color: fade(@cp_kanban-fg, 10%);
border-color: @cp_kanban-fg !important;
}
td {
border-color: @cp_kanban-fg !important;
padding: 5px;
}
}
@ -238,7 +242,7 @@
padding: 0 5px;
margin-right: 5px;
margin-top: 5px;
background-color: rgba(0,0,0,0.1);
background-color: @cp_kanban-tags-bg;
display: inline-block;
font-size: 12px;
}
@ -298,12 +302,18 @@
cursor: grab;
.kanban-title-board {
flex: 1;
margin-right: 10px;
min-width: 0;
overflow: hidden;
//white-space: nowrap;
text-overflow: ellipsis;
font-weight: 700;
margin: 0;
margin-right: 10px;
padding: 0;
display: inline;
cursor: text;
}
#kanban-edit {
font-weight: bold;
}
@ -316,8 +326,8 @@
.tools_unselectable();
outline: none;
width: 50%;
border: 1px solid fade(@cryptpad_text_col, 70%);
color: fade(@cryptpad_text_col, 70%);
border: 1px solid fade(@cp_kanban-fg, 70%);
color: fade(@cp_kanban-fg, 70%);
border-radius: 0px;
font-size: 25px;
display: inline-flex;
@ -333,7 +343,7 @@
margin-left: 5px;
}
&:hover {
background-color: rgba(0,0,0,0.1);
background-color: @cp_kanban-add-hover;
}
.fa {
margin-right: 5px;
@ -391,7 +401,7 @@
}
em {
font-size: 14px;
color: lighten(@cryptpad_text_col, 10%);
color: lighten(@cp_kanban-fg, 10%);
}
span {
@ -399,13 +409,13 @@
padding: 0 5px;
margin-right: 5px;
margin-top: 5px;
background-color: rgba(0,0,0,0.1);
background-color: @cp_kanban-tags-bg;
display: inline-block;
font-size: 14px;
cursor: pointer;
&.active {
background-color: @cryptpad_text_col;
color: #fff;
background-color: @cp_kanban-fg;
color: @cp_kanban-item-bg;
}
}
}
@ -433,8 +443,8 @@
#cp-kanban-controls {
.cp-kanban-changeView {
span.cp-kanban-view {
background-color: @cryptpad_text_col !important;
color: white;
background-color: @cp_kanban-fg !important;
color: @cp_app-bg;
}
span.cp-kanban-view-small {
}
@ -447,8 +457,8 @@
span.cp-kanban-view {
}
span.cp-kanban-view-small {
background-color: @cryptpad_text_col !important;
color: white;
background-color: @cp_kanban-fg !important;
color: @cp_app-bg;
}
}
}
@ -511,14 +521,14 @@
right: 0;
}
&.kanban-trash-active {
color: @colortheme_notification-warn;
color: @cp_kanban-trash-bg;
div {
background: fade(@colortheme_notification-warn, 20%);
background: fade(@cp_kanban-trash-bg, 20%);
}
}
&.kanban-trash-suggest {
div {
background: fade(@cryptpad_text_col, 20%);
background: fade(@cp_kanban-fg, 20%);
}
}
.kanban-item, .kanban-board {
@ -529,7 +539,7 @@
#kanban-edit {
width: 100%;
background: transparent;
border: 1px solid rgba(0,0,0,0.3);
border: 1px solid @cp_kanban-add-hover;
color: inherit;
}
@ -537,8 +547,8 @@
order: 2;
width: 300px;
margin: 10px 5px;
border: 1px solid @cryptpad_text_col;
color: @cryptpad_text_col;
border: 1px solid @cp_kanban-fg;
color: @cp_kanban-fg;
height: 40px;
display: inline-flex;
justify-content: center;
@ -549,7 +559,7 @@
cursor: pointer;
.tools_unselectable();
&:hover {
background-color: rgba(0,0,0,0.1);
background-color: @cp_kanban-add-hover;
}
}
@ -611,4 +621,30 @@
}
}
.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;
}
}

4
www/kanban/index.html
View file

@ -7,11 +7,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer" />
<script async data-bootload="/common/sframe-app-outer.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
<link href="/customize/src/outer.css?ver=1.1" rel="stylesheet" type="text/css">
<link href="/customize/src/outer.css?ver=1.3.2" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="sbox-iframe">
<iframe-placeholder>
</iframe>
</body>
</html>

1
www/kanban/inner.js
View file

@ -266,6 +266,7 @@ define([
editor.refresh();
}
};
cm.configureTheme(common, function () {});
SFCodeMirror.mkIndentSettings(editor, framework._.cpNfInner.metadataMgr);
editor.on('change', function () {
var val = editor.getValue();

97
www/kanban/jkanban.css
View file

@ -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;
}

27
www/notifications/app-notifications.less
View file

@ -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;
}
}

4
www/notifications/index.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer" />
<script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
<link href="/customize/src/outer.css?ver=1.1" rel="stylesheet" type="text/css">
<link href="/customize/src/outer.css?ver=1.3.2" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="sbox-iframe">
<iframe-placeholder>

2
www/notifications/inner.js
View file

@ -202,7 +202,7 @@ define([
var $category = $('<div>', {'class': 'cp-sidebarlayout-category'}).appendTo($categories);
if (key === 'all') { $category.append($('<span>', {'class': 'fa fa-bars'})); }
if (key === 'friends') { $category.append($('<span>', {'class': 'fa fa-user'})); }
if (key === 'pads') { $category.append($('<span>', {'class': 'cptools cptools-pad'})); }
if (key === 'pads') { $category.append($('<span>', {'class': 'cptools cptools-richtext'})); }
if (key === 'archived') { $category.append($('<span>', {'class': 'fa fa-archive'})); }
if (key === active) {

4
www/oodoc/index.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer" />
<script async data-bootload="/common/onlyoffice/main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
<link href="/customize/src/outer.css?ver=1.1" rel="stylesheet" type="text/css">
<link href="/customize/src/outer.css?ver=1.3.2" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="sbox-iframe">
<iframe-placeholder>

4
www/ooslide/index.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer" />
<script async data-bootload="/common/onlyoffice/main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
<link href="/customize/src/outer.css?ver=1.1" rel="stylesheet" type="text/css">
<link href="/customize/src/outer.css?ver=1.3.2" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="sbox-iframe">
<iframe-placeholder>

30
www/pad/app-pad.less
View file

@ -7,7 +7,9 @@ body.cp-app-pad {
@bg-color: @colortheme_apps[pad],
);
@bg-color: #e3e3e3;
@bg-color: @cp_app-bg;
@toolbar-bg-active: contrast(@cp_toolbar-bg, darken(@cp_toolbar-bg, 10%), lighten(@cp_toolbar-bg, 10%));
display: flex;
flex-flow: column;
@ -29,7 +31,7 @@ body.cp-app-pad {
margin-top: 10px;
margin-left: 10px;
width: 200px;
color: @cryptpad_text_col;
color: @cp_pad-fg;
h2 {
font-size: 1.5rem;
}
@ -39,7 +41,7 @@ body.cp-app-pad {
white-space: nowrap;
text-overflow: ellipsis;
a {
color: @cryptpad_text_col;
color: @cp_pad-fg;
}
&.cp-pad-toc-2 {
margin-left: @toc-level-indent;
@ -51,7 +53,8 @@ body.cp-app-pad {
}
.cke_toolbox_main {
background-color: @colortheme_pad-toolbar-bg;
background-color: @cp_toolbar-bg;
color: @cp_toolbar-fg;
.cke_toolbar {
height: 28px;
padding: 2px 0;
@ -62,12 +65,27 @@ body.cp-app-pad {
height: 24px;
align-items: center;
padding: 4px;
color: @cryptpad_text_col;
}
.cke_button__print {
display: none !important;
}
.cke_button {
.cke_combo_on .cke_combo_button {
background-color: @toolbar-bg-active;
border-color: @toolbar-bg-active;
}
.cke_button, .cke_combo_button {
.tools_unselectable();
&.cke_button_on, &.cke_combo_button:hover, &.cke_button_off:hover {
background-color: @toolbar-bg-active;
border-color: @toolbar-bg-active;
}
.cke_combo_text {
color: @cp_toolbar-fg;
}
.cke_button_icon {
filter: @cp_pad-icon-filter;
}
}
}
.cke_wysiwyg_frame {
@ -98,6 +116,7 @@ body.cp-app-pad {
background-color: @bg-color;
justify-content: center;
iframe {
background-color: transparent;
flex: 1;
min-width: 0;
order: 1;
@ -116,7 +135,6 @@ body.cp-app-pad {
#cp-app-pad-comments {
order: 3;
width: 330px;
//background-color: white;
margin: 0px 20px;
.comments_main();
}

2
www/pad/comment.js
View file

@ -30,7 +30,7 @@
CKEDITOR.plugins.add('comments', {
onLoad: function() {
CKEDITOR.addCss('comment { background-color: ' + color1 + '; }' +
CKEDITOR.addCss('comment { background-color: ' + color1 + '; color:#333; }' +
'@keyframes color { 0% { background-color: ' + color2 + '; } 50% { background-color: ' + color1 + '; } 100% { background-color: ' + color2 + '; } }' +
'comment.active { animation-name: color; animation-duration: 1s; animation-iteration-count: 2; background-color: ' + color2 + '; outline: none;}' +
'comment media-tag { border: 2px solid ' + color1 + ' !important; }' +

4
www/pad/index.html
View file

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer" />
<script async data-bootload="/common/sframe-app-outer.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
<link href="/customize/src/outer.css?ver=1.1" rel="stylesheet" type="text/css">
<link href="/customize/src/outer.css?ver=1.3.2" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="sbox-iframe">
<iframe-placeholder>

12
www/pad/inner.js
View file

@ -1216,6 +1216,18 @@ define([
$contentContainer.append(h('div#cp-app-pad-comments'));
$contentContainer.prepend(h('div#cp-app-pad-toc'));
$ckeToolbar.find('.cke_button__image_icon').parent().hide();
var $iframe = $('iframe').contents();
if (window.CryptPad_theme === 'dark') {
$iframe.find('html').addClass('cp-dark').css({
'background-color': '#323232', // grey_850
'color': '#EEEEEE' // dark text_col
});
} else {
$iframe.find('html').css({
'background-color': '#FFF'
});
}
}).nThen(waitFor());
}).nThen(function(waitFor) {

101
www/poll/app-poll.less
View file

@ -11,8 +11,8 @@
@poll-fore: #555;
@poll-th-bg: @colortheme_poll-th-bg;
@poll-th-fg: @colortheme_poll-th-fg;
@poll-th-bg: @cp_poll-th-bg;
@poll-th-fg: @cp_poll-th-fg;
@poll-th-user-bg: darken(@poll-th-bg, 10%);
@poll-editing: lighten(@poll-th-bg, 10%);
@poll-winner: darken(@poll-th-bg, 15%);
@ -20,22 +20,15 @@
@poll-td-bg: @poll-th-bg;
@poll-td-fg: @poll-th-fg;
@poll-help-bg: @colortheme_poll-help-bg;
@poll-uncommitted-cell: @cp_poll-uncommitted-bg;
@poll-uncommitted-text: @cp_poll-cell-fg;
@poll-cover-color: @cp_poll-cell-fg;
@poll-uncommitted-cell: #eee;
@poll-uncommitted-bg: #ddd; //lighten(@poll-th-bg, 50%);
@poll-uncommitted-text: black;
@poll-placeholder: #fff;
@poll-border-color: #555;
@poll-cover-color: #000;
@poll-fg: #000;
@poll-option-yellow: #ff5;
@poll-option-gray: #ccc;
@poll-add-color: #fff;
@poll-add-bg: #777;
@poll-add-bg-alt: #444;
@poll-border-color: @cp_poll-border-color;
@poll-option-green: @cp_poll-yes;
@poll-option-red: @cp_poll-no;
@poll-option-yellow: @cp_poll-maybe;
@poll-option-gray: @cp_poll-unset;
.bottom-left(@s: 5px) { border-bottom-left-radius: @s; }
.top-left(@s: 5px) { border-top-left-radius: @s; }
@ -48,6 +41,7 @@
display: flex;
flex: 1;
min-height: 0;
background-color: @cp_app-bg;
#cp-app-poll-form {
flex: 1;
overflow-y: auto;
@ -80,8 +74,6 @@
}
input[type="text"], textarea {
background-color: white;
color: black;
border: 0;
}
@ -92,8 +84,9 @@
// The placeholder color only seems to effect Safari when not set
// XXX placeholder in forms.less
input[type="text"][disabled]::placeholder {
color: @poll-placeholder;
color: @poll-th-fg;
opacity: 1;
}
@ -107,7 +100,6 @@
}
#cp-app-poll-table-container button {
border-radius: 0;
border: 0;
}
#cp-app-poll-create-user {
display: inline-flex;
@ -116,11 +108,6 @@
margin: 2px auto;
width: auto;
overflow: hidden;
color: @poll-add-color;
background: @poll-add-bg;
&:hover {
background: @poll-add-bg-alt;
}
}
#cp-app-poll-create-option {
order: 3;
@ -129,11 +116,6 @@
height: 20px;
margin: 2px;
padding: 0;
color: @poll-add-color;
background: @poll-add-bg;
&:hover {
background: @poll-add-bg-alt;
}
}
#cp-app-poll-table-scroll {
overflow-y: hidden;
@ -155,7 +137,7 @@
width: 80%;
min-height: 200px;
height: 200px;
border: 1px solid black;
border: 1px solid @cp_forms-border;
.CodeMirror-placeholder {
color: #777;
}
@ -169,9 +151,9 @@
min-width: 80%;
width: 80%;
min-height: 7em;
color: #000;
color: @poll-uncommitted-text;
border: 1px solid transparent;
background-color: #eeeeee;
background-color: @poll-uncommitted-cell;
font: @colortheme_app-font;
text-align: left;
media-tag > * {
@ -202,13 +184,6 @@
}
}
#cp-app-poll-help {
width: 100%;
margin: auto;
padding: 20px 10%;
background: @poll-help-bg;
}
// from cryptpad.less
#cp-app-poll-table-container {
@ -277,11 +252,11 @@
background-color: @poll-uncommitted-cell !important;
}
div.cp-app-poll-table-text-cell {
background-color: @poll-uncommitted-bg !important;
background-color: @poll-uncommitted-cell !important;
color: @poll-uncommitted-text !important;
}
text-align: center;
background-color: @poll-uncommitted-bg !important;
background-color: @poll-uncommitted-cell !important;
color: @poll-uncommitted-text !important;
}
tr {
@ -389,13 +364,13 @@
input[type="number"][value="0"] {
~ .cp-app-poll-table-cover {
background-color: @colortheme_cp-red;
background-color: @poll-option-red;
&:after { content: "✖"; }
}
}
input[type="number"][value="1"] {
~ .cp-app-poll-table-cover {
background-color: @colortheme_cp-green;
background-color: @poll-option-green;
&:after { content: "✔"; }
}
}
@ -477,6 +452,7 @@
box-sizing: border-box;
padding: 1px 5px;
margin: 1px;
margin-bottom: 5px;
&[disabled] {
color: @poll-th-fg;
}
@ -530,35 +506,13 @@
margin-left: 10px;
}
thead {
tr {
th {
input[type="text"][disabled] {
background-color: transparent;
color: @poll-fore;
font-weight: bold;
}
.cp-app-poll-table-remove {
cursor: pointer;
font-size: 20px;
}
}
}
}
tbody {
tr {
td {
}
}
}
tfoot {
display: none;
}
}
}
#cp-app-poll-nocomments {
color: #999;
color: @cp_poll-hint;
text-align: center;
margin: 20px;
font: @colortheme_app-font;
@ -574,7 +528,7 @@
}
#cp-app-poll-comments-add {
input, textarea {
border: 1px solid black;
border: 1px solid @cp_forms-border;
width: 90%;
margin: 5px 5%;
}
@ -582,7 +536,7 @@
padding: 5px;
height: 26px;
&[disabled] {
background: #eee;
background: @poll-uncommitted-cell;
}
}
textarea {
@ -602,7 +556,8 @@
}
.cp-app-poll-comments-list-msg {
display: flex;
background: #eee;
background: @poll-uncommitted-cell;
color: @cryptpad_text_col;
padding: 5px 10px;
.cp-app-poll-comments-list-msg-text {
flex: 1;
@ -617,11 +572,13 @@
}
}
.cp-app-poll-comments-list-data {
background: #ddd;
background: @poll-option-gray;
color: @cryptpad_text_col;
padding: 5px 10px;
display: flex;
align-items: center;
.cp-app-poll-comments-list-data-name {
color: @cryptpad_color_link;
margin-left: 10px;
flex: 1;
}

4
www/poll/index.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer" />
<script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
<link href="/customize/src/outer.css?ver=1.1" rel="stylesheet" type="text/css">
<link href="/customize/src/outer.css?ver=1.3.2" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="sbox-iframe">
<iframe-placeholder>

19
www/poll/inner.js
View file

@ -17,6 +17,7 @@ define([
'/common/common-ui-elements.js',
'/common/hyperscript.js',
'/customize/messages.js',
'/common/sframe-common-codemirror.js',
'cm/lib/codemirror',
'/common/test.js',
@ -48,6 +49,7 @@ define([
UIElements,
h,
Messages,
SFCodeMirror,
CMeditor,
Test)
{
@ -1263,10 +1265,10 @@ define([
]),
h('div#cp-app-poll-table-container', [
h('div#cp-app-poll-table-scroll', [h('table')]),
h('button#cp-app-poll-create-user.btn.btn-secondary', {
h('button#cp-app-poll-create-user.btn.btn-default', {
title: Messages.poll_create_user
}, Messages.poll_commit),
h('button#cp-app-poll-create-option.btn.btn-secondary', {
h('button#cp-app-poll-create-option.btn.btn-default', {
title: Messages.poll_create_option
}, h('span.fa.fa-plus')),
]),
@ -1330,12 +1332,13 @@ define([
APP.$comments = $('#cp-app-poll-comments-list');
APP.$addComment = $('#cp-app-poll-comments-add');
APP.editor = CMeditor.fromTextArea(APP.$description[0], {
lineNumbers: true,
lineWrapping: true,
styleActiveLine : true,
mode: "markdown",
});
var cm = SFCodeMirror.create("gfm", CMeditor, APP.$description[0]);
var editor = APP.editor = cm.editor;
editor.setOption('lineNumbers', true);
editor.setOption('lineWrapping', true);
editor.setOption('styleActiveLine', true);
editor.setOption('readOnly', false);
cm.configureTheme(common, function () {});
APP.$descriptionPublished.click(function (e) {
if (!e.target) { return; }

6
www/profile/app-profile.less
View file

@ -6,7 +6,7 @@
.framework_min_main();
.sidebar-layout_main();
@cp-profile-is-your-friend: #777;
@cp-profile-is-your-friend: @cp_profile-hint;
display: flex;
flex-flow: column;
@ -35,7 +35,7 @@
text-align: center;
height: 300px;
width: 300px;
border: 1px solid black;
border: 1px solid @cp_profile-border;
border-radius: 4px;
overflow: hidden;
position: relative;
@ -151,7 +151,7 @@
display: none;
}
.cp-app-profile-description-rendered {
border: 1px solid #DDD;
border: 1px solid @cp_profile-border;
padding: 0 15px;
&:empty {
display: none;

Some files were not shown because too many files have changed in this diff Show more