web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'staging' into oo2

Browse Source
This commit is contained in:
yflory
2018-09-03 10:39:34 +02:00
parent dcd27f0da4 ee1027ceb9
commit bf9cf95292
197 changed files with 20203 additions and 8239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
customize.dist/src/less2/include/alertify.less
View File

@@ -1,8 +1,11 @@
@import (once) "./colortheme-all.less";
@import (once) "./browser.less";
@import (once) "./variables.less";
@import (reference) "./colortheme-all.less";
@import (reference) "./browser.less";
@import (reference) "./variables.less";
.alertify_main () {
.alertify_main() {
--LessLoader_require: LessLoader_currentFile();
};
& {
@max-z-index: 2147483647;
@alertify-fore: @colortheme_modal-fg;
@alertify-base: @colortheme_modal-bg;
@@ -12,14 +15,11 @@
@alertify-btn-fg: @alertify-fore;
@alertify-btn-bg: rgba(200, 200, 200, 0.1);
@alertify-btn-bg-hover: rgba(200, 200, 200, .3);
@alertify-bg: @colortheme_modal-dim;
@alertify-fg: @alertify-fore;
@alertify-input-bg: @colortheme_modal-input;
@alertify-input-fg: @colortheme_modal-fg;
@alertify-input-fg: @colortheme_modal-input-fg;
@alertify_padding-base: @variables_padding;
@alertify_box-shadow: @variables_shadow;
@@ -34,7 +34,7 @@
}
> * {
padding: @alertify_padding-base @alertify_padding-base * 4;
color: @alertify-fore;
color: @colortheme_notification-color;
font-family: @colortheme_font;
font-size: large;
@@ -65,6 +65,8 @@
width: 100%;
height: 100%;
z-index: 100000; // alertify container
font: @colortheme_app-font;
&.forefront {
z-index: @max-z-index; // alertify max forefront
}
@@ -112,10 +114,6 @@
}
.dialog, .alert {
.bright {
color: @colortheme_light-base;
}
& > div {
background-color: @alertify-dialog-bg;
&.half {
@@ -208,6 +206,19 @@
padding: @alertify_padding-base;
}
span.cp-password-container {
display: flex;
align-items: center;
margin-bottom: 15px;
justify-content: space-between;
& > * {
margin-bottom: 0 !important;
}
button {
margin: 0 !important;
}
}
input[type="checkbox"], input[type="radio"] {
width: auto;
padding: 0;
@@ -221,76 +232,83 @@
}
}
nav {
button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
text-align: right;
background-color: @colortheme_alertify-cancel;
box-sizing: border-box;
position: relative;
outline: 0;
display: inline-block;
align-items: center;
padding: 0 6px;
margin: 6px 8px;
line-height: 36px;
min-height: 36px;
white-space: nowrap;
min-width: 88px;
text-align: center;
text-transform: uppercase;
font-size: 14px;
text-decoration: none;
cursor: pointer;
border-radius: 0;
button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
background-color: @alertify-btn-bg;
box-sizing: border-box;
position: relative;
outline: 0;
display: inline-block;
align-items: center;
padding: 0 6px;
margin: 6px 8px;
line-height: 36px;
min-height: 36px;
white-space: nowrap;
min-width: 88px;
text-align: center;
text-transform: uppercase;
font-size: 14px;
text-decoration: none;
cursor: pointer;
border-radius: 0;
color: @alertify-btn-fg;
border: 1px solid transparent;
&.safe, &.danger {
color: @colortheme_old-base;
white-space: normal;
font-weight: bold;
}
&.danger {
background-color: @colortheme_alertify-red;
&:hover, &:active {
background-color: lighten(@colortheme_alertify-red, 5%);
}
}
&.safe {
background-color: @colortheme_alertify-green;
&:hover, &:active {
background-color: lighten(@colortheme_alertify-green, 10%);
}
}
&.primary {
background-color: @colortheme_alertify-primary;
color: @colortheme_alertify-primary-text;
&:hover, &:active {
background-color: darken(@colortheme_alertify-primary, 10%);
}
}
color: @alertify-btn-fg;
border: 1px solid @colortheme_alertify-cancel-border;
&.safe, &.danger {
color: @colortheme_old-base;
white-space: normal;
font-weight: bold;
}
&.danger {
background-color: @colortheme_alertify-red;
border-color: @colortheme_alertify-red-border;
color: @colortheme_alertify-red-color;
&:hover, &:active {
background-color: @alertify-btn-bg-hover;
}
&:focus {
border: 1px dotted @alertify-base;
}
&::-moz-focus-inner {
border: 0;
background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%));
}
}
button.btn {
margin: 6px 4px;
&.safe {
background-color: @colortheme_alertify-green;
border-color: @colortheme_alertify-green-border;
color: @colortheme_alertify-green-color;
&:hover, &:active {
background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-green, 10%), lighten(@colortheme_alertify-green, 10%));
}
}
&.primary {
background-color: @colortheme_alertify-primary;
color: @colortheme_alertify-primary-text;
border-color: @colortheme_alertify-primary-border;
font-weight: bold;
&:hover, &:active {
background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-primary, 10%), lighten(@colortheme_alertify-primary, 10%));
}
}
&:hover, &:active {
background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-cancel, 10%), lighten(@colortheme_alertify-cancel, 10%));
}
&:focus {
//border: 1px dotted @alertify-base;
box-shadow: 0px 0px 5px @colortheme_alertify-primary;
outline: none;
}
&::-moz-focus-inner {
border: 0;
}
}
button.btn {
margin: 6px 4px;
}
nav {
text-align: right;
}
}
}
@@ -392,3 +410,4 @@
}
}
}

26
customize.dist/src/less2/include/app-noscroll.less
View File

@@ -1,13 +1,8 @@
// html
.app-noscroll_main () {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
box-sizing: border-box;
position: relative;
body {
.app-noscroll_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-app-noscroll {
height: 100%;
width: 100%;
padding: 0px;
@@ -15,6 +10,17 @@
overflow: hidden;
box-sizing: border-box;
position: relative;
border: 0;
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
box-sizing: border-box;
position: relative;
border: 0;
}
}
}

82
customize.dist/src/less2/include/app-print.less
View File

@@ -1,46 +1,52 @@
.app-print_main () {
// Current scope is <html>
@media print {
height: auto;
max-height: none;
overflow: visible;
display: block;
@page {
margin: 0;
size: landscape;
}
// Slide app
body.cp-app-slide {
.app-print_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-app-print {
// Current scope is <html>
@media print {
height: auto;
max-height: none;
overflow: visible;
display: block;
.CodeMirror, #cme_toolbox {
display: none;
@page {
margin: 0;
size: landscape;
}
* {
visibility: hidden;
height: auto;
max-height: none;
}
.cp-app-slide-viewer #cp-app-slide-print {
// Slide app
body.cp-app-slide {
display: block;
visibility: visible;
* {
visibility: visible;
.CodeMirror, #cme_toolbox {
display: none;
}
* {
visibility: hidden;
height: auto;
max-height: none;
}
.cp-app-slide-viewer #cp-app-slide-print {
display: block;
visibility: visible;
* {
visibility: visible;
}
}
.cp-app-slide-viewer #cp-app-slide-modal {
display: none !important;
}
.cp-app-slide-viewer {
flex: 1 !important;
overflow: visible !important;
}
.cp-toolbar-userlist-drawer {
display: none !important;
}
#cp-app-slide-editor {
height: auto;
display: block;
}
}
.cp-app-slide-viewer #cp-app-slide-modal {
display: none !important;
}
.cp-app-slide-viewer {
flex: 1 !important;
overflow: visible !important;
}
.cp-toolbar-userlist-drawer {
display: none !important;
}
#cp-app-slide-editor {
height: auto;
display: block;
}
}
}
}

93
customize.dist/src/less2/include/avatar.less
View File

@@ -1,40 +1,65 @@
@import (once) "./tools.less";
.avatar_main (@width) {
@import (reference) "./tools.less";
.avatar_vars(
@width: 30px
) {
@avatar-width: @width;
@avatar-font-size: @width / 1.2;
}
.avatar_main(@width: 30px) {
--LessLoader_require: LessLoader_currentFile();
.avatar_vars(@width);
--avatar-width: @avatar-width;
--avatar-font-size: @avatar-font-size;
}
& {
.avatar_vars();
&.cp-avatar {
overflow: hidden;
text-overflow: ellipsis;
font-size: 16px;
display: flex;
align-items: center;
.cp-avatar-default, media-tag {
display: inline-flex;
width: @width;
height: @width;
justify-content: center;
align-items: center;
border-radius: 4px;
overflow: hidden;
box-sizing: content-box;
}
.cp-avatar-default {
.tools_unselectable();
background: white;
color: black;
font-size: @width/1.2;
}
media-tag {
min-height: @width;
min-width: @width;
max-height: @width;
max-width: @width;
img {
min-width: 100%;
min-height: 100%;
max-width: none;
max-height: none; // To override 'media-tag img' in slide.less
text-overflow: ellipsis;
font-size: 16px;
display: flex;
align-items: center;
.cp-avatar-default, media-tag {
display: inline-flex;
width: @avatar-width;
width: var(--avatar-width);
height: @avatar-width;
height: var(--avatar-width);
justify-content: center;
align-items: center;
border-radius: 4px;
overflow: hidden;
box-sizing: content-box;
}
.cp-avatar-default {
.tools_unselectable();
background: white;
color: black;
font-size: @avatar-font-size;
font-size: var(--avatar-font-size);
}
media-tag {
min-height: @avatar-width;
min-height: var(--avatar-width);
min-width: @avatar-width;
min-width: var(--avatar-width);
max-height: @avatar-width;
max-height: var(--avatar-width);
max-width: @avatar-width;
max-width: var(--avatar-width);
img {
min-width: 100%;
min-height: 100%;
max-width: none;
max-height: none; // To override 'media-tag img' in slide.less
}
}
}
}
}

172
customize.dist/src/less2/include/checkmark.less
View File

@@ -1,11 +1,28 @@
@import (once) "./colortheme-all.less";
@import (reference) "./colortheme-all.less";
.checkmark_main(@size) {
.checkmark_vars(
@size: 20px
) {
@checkmark-size: @size;
@checkmark-width: round(@size / 8);
@checkmark-dim1: round(@size / 3);
@checkmark-dim2: round(2 * @size / 3);
@checkmark-top: round(@size / 12) - 1;
@checkmark-radio-size: @checkmark-dim1 * 3;
}
@width: round(@size / 8);
@dim1: round(@size / 3);
@dim2: round(2 * @size / 3);
@top: round(@size / 12);
.checkmark_main(@size: 20px) {
--LessLoader_require: LessLoader_currentFile();
.checkmark_vars(@size);
--checkmark-size: @checkmark-size;
--checkmark-width: @checkmark-width;
--checkmark-dim1: @checkmark-dim1;
--checkmark-dim2: @checkmark-dim2;
--checkmark-top: @checkmark-top;
--checkmark-radio-size: @checkmark-radio-size;
}
& {
.checkmark_vars();
// <label.cp-checkmark><input><span.cp-checkmark-mark></span>Text</label>
.cp-checkmark {
margin: 0;
@@ -17,6 +34,10 @@
-ms-user-select: none;
user-select: none;
& > a {
margin-left: 0.25em;
}
&.cp-checkmark-secondary {
.cp-checkmark-mark {
&:after {
@@ -26,6 +47,13 @@
input {
&:checked ~ .cp-checkmark-mark {
background-color: @colortheme_checkmark-back2;
border-color: @colortheme_checkmark-back2;
}
&:disabled ~ .cp-checkmark-mark {
background-color: @colortheme_checkmark-disabled;
}
&:disabled ~ .cp-checkmark-label {
color: @colortheme_checkmark-disabled;
}
}
}
@@ -37,29 +65,149 @@
display: none;
&:checked ~ .cp-checkmark-mark {
background-color: @colortheme_checkmark-back1;
border-color: @colortheme_checkmark-back1;
&:after {
display: block;
}
}
&:disabled ~ .cp-checkmark-mark {
background-color: @colortheme_checkmark-disabled;
}
&:disabled ~ .cp-checkmark-label {
color: @colortheme_checkmark-disabled;
}
}
.cp-checkmark-label {
cursor: default;
&:empty {
display: none;
}
}
.cp-checkmark-mark {
margin-right: 10px;
position: relative;
height: @size;
width: @size;
height: @checkmark-size;
height: var(--checkmark-size);
width: @checkmark-size;
width: var(--checkmark-size);
background-color: @colortheme_checkmark-back0;
display: flex;
justify-content: center;
border: 1px solid @colortheme_form-border;
flex-shrink: 0;
&:after {
content: "";
display: none;
margin-top: @top;
width: @dim1;
height: @dim2;
margin-top: @checkmark-top;
margin-top: var(--checkmark-top);
width: @checkmark-dim1;
width: var(--checkmark-dim1);
height: @checkmark-dim2;
height: var(--checkmark-dim2);
transform: rotate(45deg);
border: solid @colortheme_checkmark-col1;
border-width: 0 @width @width 0;
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;
outline: none;
}
}
}
.cp-radio {
margin: 0;
display: flex;
align-items: center;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
&.cp-radio-secondary {
.cp-radio-mark {
&:after {
border-color: @colortheme_checkmark-col2;
}
}
input {
&:checked ~ .cp-radio-mark {
background-color: @colortheme_checkmark-back2;
}
&:disabled ~ .cp-checkmark-mark {
background-color: @colortheme_checkmark-disabled;
}
&:disabled ~ .cp-checkmark-label {
color: @colortheme_checkmark-disabled;
}
}
}
&:hover .cp-radio-mark {
background-color: @colortheme_checkmark-back0-active;
}
input {
display: none;
&:checked ~ .cp-radio-mark {
background-color: @colortheme_checkmark-back1;
border-color: @colortheme_checkmark-back1;
&:after {
display: block;
}
}
&:disabled ~ .cp-checkmark-mark {
background-color: @colortheme_checkmark-disabled;
}
&:disabled ~ .cp-checkmark-label {
color: @colortheme_checkmark-disabled;
}
}
.cp-checkmark-label {
cursor: default;
&:empty {
display: none;
}
}
.cp-radio-mark {
margin-right: 10px;
position: relative;
height: @checkmark-radio-size;
height: var(--checkmark-radio-size);
width: @checkmark-radio-size;
width: var(--checkmark-radio-size);
background-color: @colortheme_checkmark-back0;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid @colortheme_form-border;
flex-shrink: 0;
&:after {
display: none;
content: "";
border-radius: 50%;
background: white;
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;
outline: none;
}
}

4
customize.dist/src/less2/include/colortheme-all.less
View File

@@ -2,5 +2,5 @@
// 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 (once) "/customize.dist/src/less2/include/colortheme.less";
@import (once) "/customize/src/less2/include/colortheme.less";
@import (reference) "/customize.dist/src/less2/include/colortheme.less";
@import (reference) "/customize/src/less2/include/colortheme.less";

64
customize.dist/src/less2/include/colortheme.less
View File

@@ -2,6 +2,9 @@
@colortheme_app-font-size: 16px;
@colortheme_app-font: @colortheme_app-font-size @colortheme_font;
@colortheme_logo-1: #326599;
@colortheme_logo-2: #4591c4;
@colortheme_link-color: #0275D8;
@colortheme_link-color-visited: #005999;
@colortheme_info-background: #fafafa;
@@ -15,23 +18,42 @@
@colortheme_cp-red: #FA5858; // remove red
@colortheme_cp-green: #46E981;
@colortheme_modal-bg: #222;
@colortheme_modal-fg: #fff;
@colortheme_modal-link: #eee;
@colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%);
@colortheme_modal-dim: rgba(0, 0, 0, 0.4);
@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-1;
@colortheme_form-warning: #f49842;
@colortheme_form-warning-hov: darken(@colortheme_form-warning, 5%);
@colortheme_loading-bg: #222;
@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(@colortheme_logo-2, 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;
@colortheme_modal-input: #111;
// TODO modals buttons
@colortheme_alertify-red: #E55236;
@colortheme_alertify-red-color: #FFF;
@colortheme_alertify-red-border: transparent;
@colortheme_alertify-green: #77C825;
@colortheme_alertify-primary: #fff;
@colortheme_alertify-primary-text: #000;
@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-cancel: @colortheme_modal-bg;
@colortheme_alertify-cancel-border: #ccc;
@colortheme_notification-log: rgba(0, 0, 0, 0.8);
@colortheme_notification-log: fade(@colortheme_logo-1, 90%);
@colortheme_notification-color: #fff;;
@colortheme_notification-warn: rgba(205, 37, 50, 0.8);
@colortheme_dropdown-bg: #f9f9f9;
@@ -77,8 +99,8 @@
@colortheme_friends-color: #fff;
@colortheme_friends-warn: #cd2532;
@colortheme_default-bg: #ddd;
@colortheme_default-color: #000;
@colortheme_default-bg: #326599;
@colortheme_default-color: #FFF;
@colortheme_default-warn: #cd2532;
@colortheme_settings-bg: #0087ff;
@@ -105,6 +127,10 @@
@colortheme_oocell-color: #FFF;
@colortheme_oocell-warn: #cd2532;
@colortheme_kanban-bg: #8C4;
@colortheme_kanban-color: #000;
@colortheme_kanban-warn: #e6385d;
// Sidebar layout (profile / settings)
@colortheme_sidebar-active: #fff;
@colortheme_sidebar-left-bg: #eee;
@@ -121,10 +147,12 @@
@cryptpad_color_grey: #999999;
@cryptpad_header_col: #1E1F1F;
@cryptpad_text_col: #3F4141;
@cryptpad_color_light_blue: #00b7d8;
@colortheme_checkmark-back0: #ffffff;
@colortheme_checkmark-back0-active: #bbbbbb;
@colortheme_checkmark-back1: #FF0073;
@colortheme_checkmark-col1: #ffffff;
@colortheme_checkmark-back2: #FFFFFF;
@colortheme_checkmark-col2: #000000;
@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;

19
customize.dist/src/less2/include/contextmenu.less Normal file
View File

@@ -0,0 +1,19 @@
@import (reference) "./colortheme-all.less";
.contextmenu_main() {
--LessLoader_require: LessLoader_currentFile();
};
& {
.cp-contextmenu {
display: none;
position: absolute;
z-index: 50000;
li {
padding: 0;
font-size: @colortheme_app-font-size;
a {
cursor: pointer;
}
}
}
}

127
customize.dist/src/less2/include/corner.less Normal file
View File

@@ -0,0 +1,127 @@
@import (reference) "./colortheme-all.less";
.corner_main() {
--LessLoader_require: LessLoader_currentFile();
};
& {
@corner-button-ok: #2c9b00;
@corner-button-cancel: #990000;
@corner-link: #ffff7a;
@keyframes appear {
0% {
transform: scale(0.1);
}
100% {
transform: scale(1.0);
}
}
@keyframes minimize {
0% {
transform: scale(1.0);
}
100% {
transform: scale(0.1);
}
}
.cp-corner-container {
position: absolute;
right: 0;
bottom: 0;
width: 300px;
height: 200px;
border-top-left-radius: 200px;
padding: 15px;
text-align: right;
background-color: @colortheme_logo-1;
color: @colortheme_base;
z-index: 999;
transform-origin: bottom right;
animation: appear 0.8s ease-in-out;
box-shadow: 0 0 10px 0 @colortheme_logo-1;
//transform: scale(0.1);
//transform: scale(1);
.cp-corner-filler {
float: left;
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(@colortheme_base, 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: 400px;
height: 250px;
}
.cp-corner-actions {
min-height: 30px;
margin: 15px auto;
display: inline-block;
}
.cp-corner-footer {
font-style: italic;
font-size: 0.8em;
a {
color: @corner-link;
&:hover {
color: darken(@corner-link, 20%);
}
}
}
button {
color: white;
border: 0px;
padding: 5px;
color: @colortheme_base;
&.cp-corner-primary {
background-color: @corner-button-ok;
font-weight: bold;
&:hover {
background-color: lighten(@corner-button-ok, 10%);
}
}
&.cp-corner-cancel {
background-color: @corner-button-cancel;
margin-left: 10px;
&:hover {
background-color: lighten(@corner-button-cancel, 10%);
}
}
}
}
}

316
customize.dist/src/less2/include/creation.less
View File

@@ -1,47 +1,93 @@
@import (once) "./colortheme-all.less";
@import (once) "./tools.less";
@import (once) "./checkmark.less";
@import (once) './icon-colors.less';
@import (reference) "./browser.less";
@import (reference) "./colortheme-all.less";
@import (reference) "./tools.less";
@import (reference) './icon-colors.less';
.creation_vars(
@color: @colortheme_default-color,
@bg-color: @colortheme_default-bg
) {
@creation-color: @color;
@creation-bg-color: @bg-color;
};
.creation_main(
@color: @colortheme_default-color,
@bg-color: @colortheme_default-bg
) {
--LessLoader_require: LessLoader_currentFile();
.creation_vars(@color, @bg-color);
--creation-color: @color;
--creation-bg-color: @bg-color;
}
& {
.creation_vars();
@colortheme_creation-modal-bg: #fff;
@colortheme_creation-modal: #666;
@colortheme_creation-modal-title: @colortheme_loading-bg;
.creation_main() {
.tippy-popper {
z-index: 100000001 !important;
}
#cp-creation-container {
position: absolute;
z-index: 100000000; // #loading * 10
top: 0px;
background: @colortheme_loading-bg;
//background: @colortheme_loading-bg;
background: linear-gradient(to right, @colortheme_loading-bg 0%, @colortheme_loading-bg 50%, @colortheme_loading-bg-alt 50%, @colortheme_loading-bg-alt 100%);
color: @colortheme_loading-color;
display: flex;
flex-flow: column; /* we need column so that the child can shrink vertically */
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow: auto;
.cp-creation-logo {
height: 300px;
width: 300px;
margin-top: 50px;
flex: 0 1 auto; /* allows shrink */
min-height: 0;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
}
}
}
#cp-creation {
flex: 0 1 auto; /* allows shrink */
min-height: 0;
overflow: auto;
text-align: center;
background: @colortheme_creation-modal-bg;
color: @colortheme_creation-modal;
font: @colortheme_app-font;
width: 100%;
outline: none;
width: 700px;
max-width: 90vw;
height: 500px;
max-height: calc(~"100vh - 20px");
margin: 50px;
flex-shrink: 0;
display: flex;
flex-flow: column;
& > div {
width: 60vw;
width: 100%;
max-width: 100%;
margin: 40px auto;
margin: auto;
text-align: left;
}
.cp-creation-create, .cp-creation-settings {
.cp-creation-title {
color: @colortheme_creation-modal-title;
font-weight: bold;
margin: 15px;
}
.cp-creation-create {
margin-top: 0px;
@creation-button: #30B239;
button {
.tools_unselectable();
padding: 15px;
background: @creation-button;
background: linear-gradient(to right, @colortheme_logo-2, @colortheme_logo-1);
color: #FFF;
font-weight: bold;
margin: 3px 10px;
@@ -50,15 +96,16 @@
outline: none;
width: 100%;
&:hover {
background: linear-gradient(to right, lighten(@colortheme_logo-2, 5%), lighten(@colortheme_logo-1, 5%));
//background: darken(@creation-button, 5%);
background: lighten(@creation-button, 5%);
//background: lighten(@creation-button, 5%);
}
}
}
.cp-creation-create {
text-align: center;
margin: auto;
margin-top: 20px;
//margin: auto;
//margin-top: 20px;
width: 400px;
max-width: 100%;
button {
@@ -70,6 +117,8 @@
display: flex;
flex-flow: column;
align-items: center;
flex: 1 0 auto;
justify-content: space-around;
& > div {
width: 400px;
max-width: 100%;
@@ -77,9 +126,13 @@
align-items: center;
flex-wrap: wrap;
font-size: 16px;
margin: 10px 0;
//margin: 10px 0;
min-height: 28px;
line-height: 28px;
label {
flex: 1;
// Force wrap when the other element in the line is 100% (IE bug):
min-width: 1px;
}
input[type="checkbox"] {
&+ label {
@@ -88,31 +141,72 @@
padding: 0 10px;
}
}
.cp-creation-help {
font-size: 18px;
color: white;
&:hover {
color: #AAA;
text-decoration: none;
}
}
.cp-creation-help, .cp-creation-warning {
font-size: 18px;
color: @colortheme_form-warning;
&:hover {
color: @colortheme_form-warning-hov;
text-decoration: none;
}
}
.cp-creation-slider {
display: block;
overflow: hidden;
max-height: 0px;
transition: max-height 0.5s ease-in-out;
width: 100%;
margin-top: 10px;
max-width: 0px;
//margin-top: 10px;
&.active {
max-height: 40px;
transition: max-height 0.5s ease-in-out;
max-width: none;
max-height: 100px;
}
input, select {
vertical-align: middle;
}
}
input, select {
font-size: 14px;
border: 1px solid @colortheme_form-border;
height: 26px;
line-height: 26px;
background-color: @colortheme_form-bg;
color: @colortheme_form-color;
}
.cp-creation-expire {
.cp-creation-expire-picker {
text-align: center;
input {
width: 100px;
width: 50px;
margin: 0 5px;
}
select {
margin-right: 5px;
}
}
&.active {
label {
flex: none;
}
.cp-creation-slider {
flex: 1;
}
}
}
.cp-creation-password {
.cp-creation-password-picker {
text-align: center;
width: 100%;
.cp-password-container {
input {
width: 150px;
padding: 0 5px;
}
label {
flex: none;
}
}
}
}
@@ -125,31 +219,51 @@
}
div.cp-creation-remember {
margin-top: 30px;
.cp-creation-remember-help {
font-style: italic;
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%;
background-color: darken(@colortheme_modal-bg, 3%);
padding: 20px;
margin: 30px 0;
.cp-creation-title {
padding: 0 0 10px 10px;
margin: auto;
//flex: 1 0 auto;
flex-wrap: nowrap;
.cp-creation-template-more {
font-size: 30px;
cursor: pointer;
margin: 0 5px;
text-align: center;
&:first-child {
left: 5px;
}
&:last-child {
right: 5px;
}
&:hover {
color: #888;
}
&.hidden {
visibility: hidden;
}
}
}
.cp-creation-template-container {
width: 100%;
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
overflow-y: auto;
//overflow-y: auto;
align-items: center;
.cp-creation-template-element {
@darker: darken(@colortheme_modal-fg, 30%);
box-shadow: 2px 2px 7px @colortheme_form-border;
width: 135px;
padding: 5px;
margin: 5px;
@@ -162,21 +276,22 @@
line-height: 1em;
cursor: pointer;
background-color: #111;
color: @darker;
color: black;
border: 1px solid transparent;
&.cp-creation-template-selected {
border: 1px solid white;
background-color: #222;
&.cp-creation-template-selected, &:hover {
color: @creation-color !important;
color: var(--creation-color) !important;
background-color: @creation-bg-color !important;
background-color: var(--creation-bg-color) !important;
.fa, .cptools {
color: @creation-color;
color: var(--creation-color);
}
}
transition: all 0.1s;
&:hover {
color: @colortheme_modal-fg;
}
align-items: center;
img {
@@ -190,12 +305,15 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-height: 20px;
height: 20px;
line-height: 20px;
margin-top: 5px;
max-width: 100%;
}
.fa {
.fa, .cptools {
color: @creation-bg-color;
color: var(--creation-bg-color);
cursor: pointer;
width: 100px;
height: 100px;
@@ -210,52 +328,78 @@
.cp-creation-deleted-container {
text-align: center;
.cp-creation-deleted {
background: #111;
margin: 0 10px;
background: @colortheme_loading-bg;
color: @colortheme_loading-color;
padding: 10px;
text-align: center;
font-weight: bold;
display: inline-block;
}
}
}
.checkmark_main(30px);
@media screen and (max-width: @browser_media-narrow-screen) {
& > div {
width: 95%;
margin: 10px auto;
@media screen and (max-height: 700px) {
#cp-creation-container {
.cp-creation-logo {
//flex-shrink: 0;
display: none;
}
}
}
@media screen and (max-width: @browser_media-medium-screen) {
#cp-creation-form {
div.cp-creation-template {
margin: 0;
padding: 5px;
.cp-creation-template-container {
.cp-creation-template-element {
flex-flow: row;
margin: 1px;
padding: 5px;
width: 155px;
img {
display: none;
@media screen and (max-width: 500px) {
#cp-creation {
#cp-creation-form {
& > div {
width: 95%;
margin: 10px auto;
}
.cp-creation-expire {
&.active {
label {
flex: 1;
}
.fa {
font-size: 18px;
width: 20px;
height: 20px;
line-height: 20px;
display: inline !important;
}
.cp-creation-template-element-name {
margin: 0;
margin-left: 5px;
.cp-creation-slider {
flex: none;
order: 10;
width: 100%;
}
}
}
}
}
}
@media screen and (max-width: @browser_media-medium-screen) {
#cp-creation {
height: auto;
#cp-creation-form {
div.cp-creation-template {
margin: 0;
padding: 5px;
.cp-creation-template-container {
.cp-creation-template-element {
flex-flow: row;
margin: 1px;
padding: 5px;
width: 155px;
img {
display: none;
}
.fa {
font-size: 18px;
width: 20px;
height: 20px;
line-height: 20px;
display: inline !important;
}
.cp-creation-template-element-name {
margin: 0;
margin-left: 5px;
}
}
}
}
}
}
}
}
}

23
customize.dist/src/less2/include/dropdown.less
View File

@@ -1,8 +1,11 @@
@import (once) "./colortheme-all.less";
@import (once) "./tools.less";
@import (reference) "./colortheme-all.less";
@import (reference) "./tools.less";
/* The container <div> - needed to position the dropdown content */
.dropdown_main () {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-dropdown-container {
@dropdown_font: @colortheme_app-font-size @colortheme_font;
position: relative;
@@ -55,9 +58,23 @@
user-select: none;
float: none;
text-align: left;
font: @dropdown_font;
line-height: 1em;
align-items: center;
&:not(.fa) {
font: @dropdown_font;
}
&.fa {
font-size: 18px;
&::before {
width: 40px;
margin-left: -10px;
text-align: center;
}
* {
font: @dropdown_font;
}
}
.fa {
width: 20px;

9
customize.dist/src/less2/include/fileupload.less
View File

@@ -1,7 +1,11 @@
@import (once) './colortheme-all.less';
@import (once) './modal.less';
@import (reference) './colortheme-all.less';
@import (reference) './modal.less';
.fileupload_main () {
--LessLoader_require: LessLoader_currentFile();
.modal_main();
}
& {
/* Upload status table */
#cp-fileupload {
.modal_base();
@@ -54,4 +58,3 @@
}
}
}

23
customize.dist/src/less2/include/font.less
View File

@@ -1,9 +1,18 @@
.font_neuropolitical () {
@font-face {
font-family: Neuropolitical;
src: url("/customize/fonts/neuropolitical.ttf");
}
.font_main () {
--LessLoader_require: LessLoader_currentFile();
}
.font_open-sans () {
@import (once) '/customize/fonts/open-sans.less';
// Fonts need to go on the global scope
@font-face {
font-family: Neuropolitical;
src: url("/customize/fonts/neuropolitical.ttf");
}
// Fonts need to go on the global scope
@font-tools {
font-family: CryptPadTools;
src: url("/customize/fonts/cryptpadtools.ttf");
}
@import (once) '/customize/fonts/open-sans.less';

74
customize.dist/src/less2/include/framework.less
View File

@@ -1,10 +1,62 @@
@import (once) "./toolbar.less";
@import (once) './fileupload.less';
@import (once) './alertify.less';
@import (once) './tokenfield.less';
@import (once) './creation.less';
@import (reference) "./colortheme-all.less";
@import (reference) "./toolbar.less";
@import (reference) './fileupload.less';
@import (reference) './alertify.less';
@import (reference) './corner.less';
@import (reference) './contextmenu.less';
@import (reference) './tokenfield.less';
@import (reference) './creation.less';
@import (reference) './tippy.less';
@import (reference) "./checkmark.less";
@import (reference) "./password-input.less";
@import (reference) './font.less';
@import (reference) "./app-print.less";
@import (reference) "./app-noscroll.less";
.framework_main(@bg-color, @warn-color, @color) {
--LessLoader_require: LessLoader_currentFile();
// Set the HTML style for the apps which shouldn't have a body scrollbar
.app-noscroll_main();
// Set the HTML style for printing slides
.app-print_main();
.font_main();
.toolbar_main(
@bg-color: @bg-color,
@warn-color: @warn-color,
@color: @color
);
.alertify_main();
.corner_main();
.contextmenu_main();
.fileupload_main();
.tokenfield_main();
.tippy_main();
.checkmark_main(20px);
.password_main();
.creation_main(
@bg-color: @bg-color,
@color: @color
);
font: @colortheme_app-font;
};
.framework_min_main(
@color: @colortheme_default-color, // Color of the text for the toolbar
@bg-color: @colortheme_default-bg, // color of the toolbar background
@warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
) {
--LessLoader_require: LessLoader_currentFile();
// Set the HTML style for the apps which shouldn't have a body scrollbar
.app-noscroll_main();
// Set the HTML style for printing slides
.app-print_main();
.font_main();
.toolbar_main(
@bg-color: @bg-color,
@warn-color: @warn-color,
@@ -12,7 +64,15 @@
);
.fileupload_main();
.alertify_main();
.tokenfield_main();
.creation_main();
.corner_main();
.contextmenu_main();
.tippy_main();
.checkmark_main(20px);
.password_main();
font: @colortheme_app-font;
}
& {
body.cp-readonly .cp-hidden-if-readonly { display: none !important; }
}

37
customize.dist/src/less2/include/help.less
View File

@@ -1,9 +1,30 @@
@import (once) "./colortheme-all.less";
@import (reference) "./colortheme-all.less";
.help_main (@color, @bg-color) {
.help_vars (
@color: @colortheme_default-color,
@bg-color: @colortheme_default-bg
) {
@help-bg-color-l15: lighten(@bg-color, 15%);
@help-text-color: contrast(@help-bg-color-l15, #fff, #000); //@color;
@help-link-color: contrast(@help-bg-color-l15, lighten(spin(@bg-color, 180), 10%), darken(spin(@bg-color, 180), 10%));
}
.help_main (
@color: @colortheme_default-color,
@bg-color: @colortheme_default-bg
) {
--LessLoader_require: LessLoader_currentFile();
.help_vars(@color, @bg-color);
--help-bg-color-l15: @help-bg-color-l15;
--help-text-color: @help-text-color;
--help-link-color: @help-link-color;
};
& {
.help_vars();
.cp-help-container {
position: relative;
background-color: lighten(@bg-color, 15%);
background-color: @help-bg-color-l15;
background-color: var(--help-bg-color-l15);
&.cp-help-hidden {
display: none;
}
@@ -14,14 +35,13 @@
right: 5px;
}
.cp-help-text {
color: @color;
color: @help-text-color;
color: var(--help-text-color);
margin: 0;
padding: 15px;
a {
//color: darken(@colortheme_link-color, 30%);
@spin: spin(lighten(@bg-color, 15%), 180);
color: contrast(lighten(@bg-color, 15%), lighten(@spin, 10%), darken(@spin, 10%));
//color: darken(spin(lighten(@bg-color, 15%), 180), 10%);
color: @help-link-color;
color: var(--help-link-color);
}
h1 {
font-size: 20px;
@@ -36,3 +56,4 @@
}
}
}

7
customize.dist/src/less2/include/icon-colors.less
View File

@@ -1,5 +1,8 @@
@import (once) "./colortheme-all.less";
@import (reference) "./colortheme-all.less";
.iconColors_main () {
--LessLoader_require: LessLoader_currentFile();
}
& {
// Classes used in common-interface.js
.cp-icon-color-pad { color: @colortheme_pad-bg; }
.cp-icon-color-code { color: @colortheme_code-bg; }
@@ -16,6 +19,7 @@
.cp-icon-color-oodoc { color: @colortheme_oodoc-bg; }
.cp-icon-color-ooslide { color: @colortheme_ooslide-bg; }
.cp-icon-color-oocell { color: @colortheme_oocell-bg; }
.cp-icon-color-kanban { color: @colortheme_kanban-bg; }
.cp-border-color-pad { border-color: @colortheme_pad-bg !important; }
.cp-border-color-code { border-color: @colortheme_code-bg !important; }
@@ -32,5 +36,6 @@
.cp-border-color-oodoc { border-color: @colortheme_oodoc-bg !important; }
.cp-border-color-ooslide { border-color: @colortheme_ooslide-bg !important; }
.cp-border-color-oocell { border-color: @colortheme_oocell-bg !important; }
.cp-border-color-kanban { border-color: @colortheme_kanban-bg !important; }
}

3
customize.dist/src/less2/include/icons.less
View File

@@ -10,7 +10,6 @@
text-overflow: ellipsis;
padding-top: 5px;
padding-bottom: 5px;
border: 1px solid white;
.cp-icons-name {
width: 100%;
@@ -26,7 +25,7 @@
word-wrap: break-word;
}
&.cp-icons-element-selected {
background-color: white;
background-color: rgba(0,0,0,0.2);
color: #666;
}
.fa {

157
customize.dist/src/less2/include/infopages.less
View File

@@ -1,10 +1,25 @@
@import (once) "./colortheme-all.less";
@import (reference) "./colortheme-all.less";
@import (reference) "./font.less";
@infopages_infobar-height: 64px;
@infopages_padding: 32px;
.infopages_link () {
text-decoration: none;
color: #0275D8;
cursor: pointer;
display: inline-flex;
&:hover {
transform: scale(1.05);
}
}
// Basic setup for info pages, this should be used at the global level
.infopages_main () {
--LessLoader_require: LessLoader_currentFile();
}
body {
.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;
a {
color: @cryptpad_color_blue;
@@ -100,20 +115,8 @@
border-top: 2px solid #fff;
}
}
};
.infopages_link () {
text-decoration: none;
color: #0275D8;
cursor: pointer;
display: inline-flex;
&:hover {
transform: scale(1.05);
}
}
// Apply this to the top bar div
.infopages_topbar () {
// Apply this to the top bar div
.cp-topbar {
background: #fff;
z-index: 10000; //Z infopage toolbar
@@ -149,58 +152,72 @@
margin-right: 0.5em;
}
}
// navigation top bar
.navbar {
background: #fff;
.navbar-brand {
display: block;
background-image: url(/customize/CryptPad_logo_color.svg);
background-repeat: no-repeat;
background-size: contain;
height: 50px;
width: 250px;
@media (max-width: 326px) {
width: 180px;
}
margin-right: 0;
}
a {
border: 2px solid transparent;
white-space: nowrap;
}
.nav-link {
padding: 0.5em 0.7em;
&:hover {
color: @cryptpad_color_light_blue;
}
}
.cp-register-btn {
border: 2px solid #4591C4;
display: inline-block;
}
button:focus {
outline: none;
}
.navbar-toggler {
margin-top: 10px;
color: #4591C4;
}
}
@media (max-width: 1000px) {
#menuCollapse {
text-align: right;
/* @media (min-width: 576px) {
top: 100%;
background: rgba(255,255,255,0.8);
position: absolute;
right: 0px;
padding: 0 20px;
z-index: 1;
}
*/
}
.navbar-nav a {
text-align: right !important;
}
.cp-register-btn {
margin-right: 13px;
text-align: center;
}
}
//footer general styles
.footer-title {
font-weight: bold;
font-size: 1.2em;
color: #1E1F1F;
}
}
// navigation top bar
.navbar {
background: #fff;
.navbar-brand {
display: block;
background-image: url(/customize/CryptPad_logo_color.svg);
background-repeat: no-repeat;
background-size: contain;
height: 50px;
width: 250px;
}
a {
border: 2px solid transparent;
white-space: nowrap;
}
.nav-link {
padding: 0.5em 0.7em;
&:hover {
transform: scale(1.05);
};
}
.cp-register-btn {
border: 2px solid #4591C4;
display: inline-block;
}
button:focus {
outline: none;
}
.navbar-toggler {
margin-top: 10px;
color: #4591C4;
}
}
@media (max-width: 991px) {
#menuCollapse {
text-align: right;
}
.navbar-nav a {
text-align: right !important;
}
.cp-register-btn {
margin-right: 13px;
text-align: center;
}
}
//footer general styles
.footer-title {
font-weight: bold;
font-size: 1.2em;
color: #1E1F1F;
}

6
customize.dist/src/less2/include/leftside-menu.less
View File

@@ -1,6 +1,6 @@
@import (once) "./unselectable.less";
@import (once) "./variables.less";
@import (once) "./colortheme-all.less";
@import (reference) "./unselectable.less";
@import (reference) "./variables.less";
@import (reference) "./colortheme-all.less";
.leftside-menu_main() {
}

5
customize.dist/src/less2/include/limit-bar.less
View File

@@ -1,6 +1,9 @@
@import (once) "./colortheme-all.less";
@import (reference) "./colortheme-all.less";
.limit-bar_main () {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-limit-container {
@colortheme_green: #5cb85c;
display: inline-flex;

20
customize.dist/src/less2/include/markdown-toolbar.less
View File

@@ -1,20 +0,0 @@
@import (once) "./colortheme-all.less";
.markdownToolbar_main (@color, @bg-color) {
.cp-markdown-toolbar {
height: @toolbar_line-height;
background-color: lighten(@bg-color, 20%);
display: none;
button {
height: @toolbar_line-height !important;
outline: 0;
color: @color;
.toolbar_button;
font: normal normal normal 14px/1 FontAwesome;
&:hover {
background-color: lighten(@bg-color, 8%);
}
&.cp-markdown-help { float: right; }
}
}
}

24
customize.dist/src/less2/include/markdown.less
View File

@@ -1,3 +1,15 @@
.markdown_main() {
blockquote {
background: #e5e5e5;
padding: 10px;
border-left: 3px solid #999;
padding-right: 0;
p { margin: 0; }
blockquote { margin: 0; }
}
// todo ul, ol
}
.markdown_preformatted-code (@color: #333) {
pre > code {
display: block;
@@ -23,15 +35,3 @@
}
}
.markdown_main() {
blockquote {
background: #e5e5e5;
padding: 10px;
border-left: 3px solid #999;
padding-right: 0;
p { margin: 0; }
blockquote { margin: 0; }
}
}
// todo ul, ol

108
customize.dist/src/less2/include/modal.less
View File

@@ -1,5 +1,5 @@
@import (once) "./colortheme-all.less";
@import (once) "./variables.less";
@import (reference) "./colortheme-all.less";
@import (reference) "./variables.less";
.modal_base() {
font-family: @colortheme_font;
@@ -17,62 +17,68 @@
}
}
.cp-modal-container {
display: none;
z-index: 100000; //Z modal container
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: @colortheme_modal-dim;
.cp-modal {
background-color: @colortheme_modal-bg;
color: @colortheme_modal-fg;
box-shadow: @variables_shadow;
padding: @variables_padding;
.modal_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-modal-container {
display: none;
z-index: 100000; //Z modal container
position: absolute;
top: 15vh; bottom: 15vh;
left: 10vw; right: 10vw;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: @colortheme_modal-dim;
overflow: auto;
font-family: @colortheme_font;
text-align: center;
& > p {
margin-bottom: 1em;
}
.cp-modal-form {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
input {
background-color: @colortheme_modal-input;
.cp-modal {
background-color: @colortheme_modal-bg;
color: @colortheme_modal-fg;
border: 0;
padding: 8px 12px;
margin: 1em;
width: 300px;
}
box-shadow: @variables_shadow;
.cp-modal-close {
text-shadow: none;
color: inherit;
padding: @variables_padding;
position: absolute;
top: 0;
right: 0;
margin: @variables_padding;
cursor: pointer;
top: 15vh; bottom: 15vh;
left: 10vw; right: 10vw;
overflow: auto;
font-family: @colortheme_font;
text-align: center;
& > p {
margin-bottom: 1em;
}
.cp-modal-form {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
input {
background-color: @colortheme_modal-input;
color: @colortheme_modal-input-fg;
border: 0;
padding: 8px 12px;
margin: 1em;
width: 300px;
}
.cp-modal-close {
text-shadow: none;
color: inherit;
position: absolute;
top: 0;
right: 0;
margin: @variables_padding;
cursor: pointer;
}
}
}
}

16
customize.dist/src/less2/include/password-input.less Normal file
View File

@@ -0,0 +1,16 @@
.password_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-password-container {
display: flex;
align-items: center;
input {
flex: 1;
min-width: 0;
}
label, .fa {
margin-left: 10px;
}
}
}

30
customize.dist/src/less2/include/sidebar-layout.less
View File

@@ -1,18 +1,22 @@
@import (once) "/customize/src/less2/include/colortheme-all.less";
@import (once) "/customize/src/less2/include/leftside-menu.less";
@leftside-bg: @colortheme_sidebar-left-bg;
@leftside-color: @colortheme_sidebar-left-fg;
@rightside-color: @colortheme_sidebar-right-fg;
@description-color: @colortheme_sidebar-description;
@import (reference) "/customize/src/less2/include/colortheme-all.less";
@import (reference) "/customize/src/less2/include/leftside-menu.less";
@sidebar_button-width: 400px;
.sidebar-layout_main() {
input[type="text"] {
--LessLoader_require: LessLoader_currentFile();
// This is way too broad to put in the global scope
input[type="text"], input[type="password"] {
padding-left: 10px;
}
}
& {
@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;
@@ -52,9 +56,15 @@
margin-bottom: 0;
}
}
label.noTitle {
display: inline-flex;
.fa {
margin-left: 10px;
}
}
margin-bottom: 20px;
}
[type="text"], button {
[type="text"], [type="password"], button {
vertical-align: middle;
height: 40px;
box-sizing: border-box;

18
customize.dist/src/less2/include/tippy.less Normal file
View File

@@ -0,0 +1,18 @@
@import (reference) './colortheme-all.less';
.tippy_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
.tippy-tooltip.cryptpad-theme {
/* Your styling here. Example: */
background-color: white;
box-shadow: 2px 2px 10px #000;
font-weight: bold;
color: #333;
overflow-wrap: break-word;
[x-circle] {
background-color: unset;
}
}
}

27
customize.dist/src/less2/include/tokenfield.less
View File

@@ -1,25 +1,34 @@
@import (once) "./tools.less";
@import (reference) "./tools.less";
.tokenfield_main () {
--LessLoader_require: LessLoader_currentFile();
}
& {
.ui-autocomplete {
z-index: 100001; // alertify + 1
}
.tokenfield {
.tools_unselectable();
display: flex;
flex-wrap: wrap;
justify-content: space-around;
height: auto;
min-height: 34px;
padding-bottom: 0px;
background-color: unset;
border: none;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0 10px;
margin: 0 10px;
padding: 0;
width: ~"calc(100% - 20px)";
.token {
box-sizing: border-box;
border-radius: 3px;
display: inline-block;
display: inline-flex;
align-items: center;
border: 1px solid #d9d9d9;
background-color: #ededed;
white-space: nowrap;
margin: 10px 5px;
margin: 2px 0;
height: 24px;
vertical-align: middle;
cursor: default;
@@ -50,7 +59,7 @@
.close {
font-family: Arial;
display: inline-block;
line-height: 24px;
line-height: 1.49em;
font-size: 1.1em;
margin-left: 5px;
float: none;
@@ -73,6 +82,8 @@
margin: 0 !important; // Override alertify
box-shadow: none;
max-width: 100%;
width: 100%;
min-width: 100% !important;
&:focus {
border-color: transparent;
outline: 0;

78
customize.dist/src/less2/include/toolbar-history.less
View File

@@ -1,27 +1,55 @@
@import (once) "./colortheme-all.less";
@import (reference) "./colortheme-all.less";
.history_main () {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-toolbar-history {
display: none;
text-align: center;
width: 100%;
padding: 10px 0;
align-items: center;
justify-content: center;
* {
font: @colortheme_app-font;
}
.cp-toolbar-history-next {
display: inline-block;
vertical-align: middle;
margin: 20px;
.cp-history-filler {
flex: 1;
}
.cp-toolbar-history-previous {
display: inline-block;
vertical-align: middle;
margin: 20px;
.cp-toolbar-history-close,
.cp-toolbar-history-revert {
background: white;
color: black;
//margin-top: 5px;
&:hover {
background-color: #e6e6e6;
}
}
.cp-toolbar-history-loadmore {
height: 100%;
color: black;
width: 25px;
position: absolute;
left: 0;
padding: 0;
}
.cp-toolbar-history-version {
position: absolute;
height: 25px;
line-height: 25px;
width: 100%;
text-align: center;
color: black;
}
.cp-toolbar-history-goto {
display: inline-block;
vertical-align: middle;
text-align: center;
flex: 1;
flex-basis: 80%;
min-width: 0;
max-width: 600px;
input { width: 75px; }
}
.cp-toolbar-history-goto-input {
@@ -29,6 +57,30 @@
margin-left: 5px;
vertical-align: middle;
}
.cp-toolbar-history-bar {
width: 100%;
background: white;
height: 25px;
margin: auto;
position: relative;
}
.cp-toolbar-history-pos-container {
width: ~"calc(100% - 2px)";
height: 25px;
position: relative;
}
@pos-color: #55FF55;
.cp-toolbar-history-pos {
width: 2px;
height: 25px;
background: @pos-color;
&:after {
content: '';
border: 6px solid transparent;
border-top-color: @pos-color;
margin-left: -5px;
}
}
button {
color: inherit;
background-color: rgba(0,0,0,0.2);
@@ -36,14 +88,6 @@
background-color: rgba(0,0,0,0.4);
}
}
.cp-toolbar-history-close {
background: white;
color: black;
margin-top: 5px;
&:hover {
background-color: #e6e6e6;
}
}
.fa-spinner {
font-size: 66px;
}

215
customize.dist/src/less2/include/toolbar.less
View File

@@ -1,15 +1,36 @@
@import (once) "./dropdown.less";
@import (once) "./colortheme-all.less";
@import (once) "./browser.less";
@import (once) "./ckeditor-fix.less";
@import (once) "./avatar.less";
@import (once) "./toolbar-history.less";
@import (once) "./icon-colors.less";
@import (once) "./tools.less";
@import (once) "./icons.less";
@import (once) "./modal.less";
@import (once) "./markdown-toolbar.less";
@import (once) "./help.less";
@import (reference) "./dropdown.less";
@import (reference) "./colortheme-all.less";
@import (reference) "./browser.less";
@import (reference) "./ckeditor-fix.less";
@import (reference) "./avatar.less";
@import (reference) "./toolbar-history.less";
@import (reference) "./icon-colors.less";
@import (reference) "./tools.less";
@import (reference) "./icons.less";
@import (reference) "./modal.less";
@import (reference) "./help.less";
.toolbar_vars (
@color: @colortheme_default-color, // Color of the text for the toolbar
@bg-color: @colortheme_default-bg, // color of the toolbar background
@warn-color: @colortheme_default-warn // color of the warning text in the toolbar
) {
@toolbar-color: @color;
@toolbar-color-l20: lighten(@color, 20%);
@toolbar-color-d20: darken(@color, 20%);
@toolbar-color-d15: darken(@color, 15%);
@toolbar-bg-color: @bg-color;
@toolbar-bg-color-l8: lighten(@bg-color, 8%);
@toolbar-bg-color-l20: lighten(@bg-color, 20%);
@toolbar-bg-color-d5: darken(@bg-color, 5%);
@toolbar-bg-color-d10: darken(@bg-color, 10%);
@toolbar-bg-color-d15: darken(@bg-color, 15%);
@toolbar-warn-color: @warn-color;
@toolbar-userlist-name-edit: contrast(@toolbar-color, @toolbar-color-l20, @toolbar-color-d20);
};
.toolbar_main (
@color: @colortheme_default-color, // Color of the text for the toolbar
@@ -17,17 +38,70 @@
@warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
@barWidth: 600px // width of the toolbar
) {
--LessLoader_require: LessLoader_currentFile();
.toolbar_vars(@color, @bg-color, @warn-color);
--toolbar-color: @toolbar-color;
--toolbar-color-l20: @toolbar-color-l20;
--toolbar-color-d20: @toolbar-color-d20;
--toolbar-color-d15: @toolbar-color-d15;
--toolbar-bg-color: @toolbar-bg-color;
--toolbar-bg-color-l8: @toolbar-bg-color-l8;
--toolbar-bg-color-l20: @toolbar-bg-color-l20;
--toolbar-bg-color-d5: @toolbar-bg-color-d5;
--toolbar-bg-color-d10: @toolbar-bg-color-d10;
--toolbar-bg-color-d15: @toolbar-bg-color-d15;
--toolbar-warn-color: @toolbar-warn-color;
--toolbar-userlist-name-edit: @toolbar-userlist-name-edit;
@media screen and (max-width: @barWidth) {
.cp-toolbar-rightside {
flex-wrap: wrap;
height: auto;
width: 100%;
}
}
.help_main(@color, @bg-color);
.dropdown_main();
.history_main();
.iconColors_main();
.modal_main();
};
& {
.toolbar_vars();
@toolbar_line-height: 32px;
@toolbar_top-height: 64px;
@toolbar_button-font: @colortheme_app-font;
.dropdown_main();
// if we spell 'share' correctly, then adblock plus hides the share button
// this is a workaround
.fa-shhare-alt:before { content: "\f1e0"; }
.ckeditor_fix();
.history_main();
.iconColors_main();
.markdownToolbar_main(@color, @bg-color);
.help_main(@color, @bg-color);
.cp-markdown-toolbar {
height: @toolbar_line-height;
background-color: @toolbar-bg-color-l20;
background-color: var(--toolbar-bg-color-l20);
display: none;
button {
height: @toolbar_line-height !important;
outline: 0;
color: @toolbar-color;
color: var(--toolbar-color);
.toolbar_button;
font: normal normal normal 14px/1 FontAwesome;
&:hover {
background-color: @toolbar-bg-color-l8;
background-color: var(--toolbar-bg-color-l8);
}
&.cp-markdown-help { float: right; }
}
}
.cp-toolbar-container {
display: flex;
@@ -61,7 +135,8 @@
}
.cp-toolbar-userlist-drawer {
background-color: @bg-color;
background-color: @toolbar-bg-color;
background-color: var(--toolbar-bg-color);
font: @colortheme_app-font-size @colortheme_font;
min-width: 175px;
width: 175px;
@@ -183,8 +258,13 @@
#cp-app-toolbar-creation-dialog.cp-modal-container {
.icons_main();
li:hover {
border: 1px solid white;
li {
border: 1px solid @colortheme_modal-fg;
&:hover {
//border: 1px solid @colortheme_modal-fg;
background: @colortheme_modal-fg;
color: @colortheme_modal-bg;
}
}
.cp-modal {
display: flex;
@@ -244,31 +324,39 @@
}
.cp-toolbar-userlist-drawer {
background-color: @bg-color;
color: @color;
background-color: @toolbar-bg-color;
background-color: var(--toolbar-bg-color);
color: @toolbar-color;
color: var(--toolbar-color);
.cp-toolbar-userlist-drawer-close {
color: @color;
color: @toolbar-color;
color: var(--toolbar-color);
}
h2 {
background-color: darken(@bg-color, 10%);
color: @color;
background-color: @toolbar-bg-color-d10;
background-color: var(--toolbar-bg-color-d10);
color: @toolbar-color;
color: var(--toolbar-color);
}
.cp-toolbar-userlist-name-input {
background-color: darken(@bg-color, 10%);
color: @color;
background-color: @toolbar-bg-color-d10;
background-color: var(--toolbar-bg-color-d10);
color: @toolbar-color;
color: var(--toolbar-color);
}
.cp-toolbar-userlist-name-edit {
color: contrast(@color,
lighten(@color, 20%),
darken(@color, 20%));
color: @toolbar-userlist-name-edit;
color: var(--toolbar-userlist-name-edit);
background: transparent;
&:hover {
color: @color;
color: @toolbar-color;
color: var(--toolbar-color);
}
}
.cp-toolbar-userlist-friend {
&:hover {
color: darken(@color, 15%);
color: @toolbar-color-d15;
color: var(--toolbar-color-d15);
}
}
}
@@ -288,8 +376,10 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: @bg-color;
color: @color;
background-color: @toolbar-bg-color;
background-color: var(--toolbar-bg-color);
color: @toolbar-color;
color: var(--toolbar-color);
.fa {
font: normal normal normal 14px/1 FontAwesome;
@@ -507,42 +597,57 @@
.cp-toolbar-spinner {
font-size: @colortheme_app-font-size;
color: @color;
color: @toolbar-color;
color: var(--toolbar-color);
}
.cp-toolbar-limit {
text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color;
color: @warn-color;
text-shadow: -1px 0 @toolbar-color, 0 1px @toolbar-color, 1px 0 @toolbar-color, 0 -1px @toolbar-color;
text-shadow: -1px 0 var(--toolbar-color), 0 1px var(--toolbar-color), 1px 0 var(--toolbar-color), 0 -1px var(--toolbar-color);
color: @toolbar-warn-color;
color: var(--toolbar-warn-color);
}
.cp-toolbar-leftside, .cp-toolbar-rightside {
background-color: lighten(@bg-color, 8%);
background-color: @toolbar-bg-color-l8;
background-color: var(--toolbar-bg-color-l8);
button:hover, button.cp-toolbar-button-active {
background-color: @bg-color;
background-color: @toolbar-bg-color;
background-color: var(--toolbar-bg-color);
}
}
.cp-toolbar-title-hoverable:hover {
.cp-toolbar-title-editable, .cp-toolbar-title-edit {
cursor: text;
border: 1px solid darken(@bg-color, 15%);
background: darken(@bg-color, 10%);
border: 1px solid @toolbar-bg-color-d15;
border: 1px solid var(--toolbar-bg-color-d15);
background: @toolbar-bg-color-d10;
background: var(--toolbar-bg-color-d10);
transition: all 0.15s;
color: @color;
color: @toolbar-color;
color: var(--toolbar-color);
}
.cp-toolbar-title-editable {
cursor: text;
}
}
.cp-toolbar-title-save {
border: 1px solid darken(@bg-color, 15%);
background: darken(@bg-color, 10%);
color: @color;
border: 1px solid @toolbar-bg-color-d15;
border: 1px solid var(--toolbar-bg-color-d15);
background: @toolbar-bg-color-d10;
background: var(--toolbar-bg-color-d10);
color: @toolbar-color;
color: var(--toolbar-color);
&:hover {
background: darken(@bg-color, 5%);
background: @toolbar-bg-color-d5;
background: var(--toolbar-bg-color-d5);
}
}
input {
border: 1px solid darken(@bg-color, 15%);
background: darken(@bg-color, 10%);
color: @color;
border: 1px solid @toolbar-bg-color-d15;
border: 1px solid var(--toolbar-bg-color-d15);
background: @toolbar-bg-color-d10;
background: var(--toolbar-bg-color-d10);
color: @toolbar-color;
color: var(--toolbar-color);
}
.cp-dropdown-content.cp-dropdown-left a {
color: black;
@@ -568,7 +673,8 @@
padding: 0;
margin: 0 5px;
font-size: @colortheme_app-font-size;
color: @warn-color;
color: @toolbar-warn-color;
color: var(--toolbar-warn-color);
.cp-pnp-msg {
padding-left: 5px;
font-family: @colortheme_font;
@@ -577,7 +683,8 @@
font-size: @colortheme_app-font-size;
font-family: @colortheme_font;
font-weight: bold;
color: @warn-color;
color: @toolbar-warn-color;
color: var(--toolbar-warn-color);
&:hover {
text-decoration: underline;
}
@@ -871,11 +978,6 @@
display: flex;
min-height: @toolbar_line-height;
overflow: hidden;
@media screen and (max-width: @barWidth) { // 450px
flex-wrap: wrap;
height: auto;
width: 100%;
}
&:empty {
min-height: 0;
height: 0;
@@ -994,6 +1096,5 @@
}
}
}
}

1
customize.dist/src/less2/include/tools.less
View File

@@ -19,6 +19,7 @@
}
.tools_unselectable () {
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;