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

Merge branch 'less-less' into staging

Browse Source
This commit is contained in:
yflory
2018-07-18 14:18:37 +02:00
parent aafcb1bc02 8d95efa144
commit ebfa2c2dc3
76 changed files with 3627 additions and 3427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
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;
@@ -406,4 +409,4 @@
}
}
}
}
}

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

@@ -1,14 +1,8 @@
// html
.app-noscroll_main () {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
box-sizing: border-box;
position: relative;
border: 0;
body {
.app-noscroll_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-app-noscroll {
height: 100%;
width: 100%;
padding: 0px;
@@ -17,6 +11,15 @@
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;
}
}
}
}

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

@@ -1,46 +1,51 @@
.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
}
}
}
}
}

63
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) - 1;
.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;
@@ -58,8 +75,10 @@
.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;
@@ -68,12 +87,16 @@
&: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 {
@@ -129,12 +152,14 @@
}
}
@radio-size: @dim1 * 3;
.cp-radio-mark {
margin-right: 10px;
position: relative;
height: @radio-size;
width: @radio-size;
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;
@@ -147,12 +172,14 @@
content: "";
border-radius: 50%;
background: white;
width: @dim1;
height: @dim1;
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 @width @width 0;
//border-width: 0 var(--checkmark-width) var(--checkmark-width) 0;
}
&:focus {
//border-color: #FF007C !important;

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

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

@@ -1,12 +1,27 @@
@import (once) "./colortheme-all.less";
@import (once) "./tools.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, // 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
@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;
@@ -265,10 +280,13 @@
border: 1px solid transparent;
&.cp-creation-template-selected {
color: @color !important;
background-color: @bg-color !important;
color: @creation-color !important;
color: var(--creation-color) !important;
background-color: @creation-bg-color !important;
background-color: var(--creation-bg-color) !important;
.fa {
color: @color;
color: @creation-color;
color: var(--creation-color);
}
}
@@ -300,7 +318,8 @@
max-width: 100%;
}
.fa {
color: @bg-color;
color: @creation-bg-color;
color: var(--creation-bg-color);
cursor: pointer;
width: 100px;
height: 100px;

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

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

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

@@ -1,9 +1,11 @@
.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");
}
@import (once) '/customize/fonts/open-sans.less';

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

@@ -1,38 +1,58 @@
@import (once) "./colortheme-all.less";
@import (once) "./toolbar.less";
@import (once) './fileupload.less';
@import (once) './alertify.less';
@import (once) './tokenfield.less';
@import (once) './creation.less';
@import (once) './tippy.less';
@import (once) "./checkmark.less";
@import (once) "./password-input.less";
@import (reference) "./colortheme-all.less";
@import (reference) "./toolbar.less";
@import (reference) './fileupload.less';
@import (reference) './alertify.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
);
.fileupload_main();
.alertify_main();
.fileupload_main();
.tokenfield_main();
.tippy_main();
.checkmark_main(20px);
.password_main();
.creation_main(
@bg-color: @bg-color,
@warn-color: @warn-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,
@@ -46,4 +66,6 @@
font: @colortheme_app-font;
}
& {
body.cp-readonly .cp-hidden-if-readonly { display: none !important; }
}

38
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: contrast(lighten(@bg-color, 15%), #fff, #000); //@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;
@@ -35,4 +55,4 @@
ul, ol, p { margin: 0; }
}
}
}
}

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

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

@@ -38,5 +38,4 @@
}
}
}
}
}

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,71 +152,71 @@
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;
// 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;
}
margin-right: 0;
}
a {
border: 2px solid transparent;
white-space: nowrap;
}
.nav-link {
padding: 0.5em 0.7em;
&:hover {
color: @cryptpad_color_light_blue;
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;
}
}
.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;
@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;
}
*/
}
.navbar-nav a {
text-align: right !important;
}
.cp-register-btn {
margin-right: 13px;
text-align: center;
}
}
//footer general styles
//footer general styles
.footer-title {
font-weight: bold;
font-size: 1.2em;
color: #1E1F1F;
}
.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; }
}
}
}

27
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;
@@ -21,17 +33,4 @@
}
}
}
}
.markdown_main() {
blockquote {
background: #e5e5e5;
padding: 10px;
border-left: 3px solid #999;
padding-right: 0;
p { margin: 0; }
blockquote { margin: 0; }
}
}
// todo ul, ol
}

111
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,67 @@
}
}
.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;
.cp-modal {
background-color: @colortheme_modal-bg;
color: @colortheme_modal-fg;
box-shadow: @variables_shadow;
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;
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;
}
}
}
}
}

3
customize.dist/src/less2/include/password-input.less
View File

@@ -1,4 +1,7 @@
.password_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-password-container {
display: flex;
align-items: center;

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

5
customize.dist/src/less2/include/tippy.less
View File

@@ -1,6 +1,9 @@
@import (once) './colortheme-all.less';
@import (reference) './colortheme-all.less';
.tippy_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
.tippy-tooltip.cryptpad-theme {
/* Your styling here. Example: */
background-color: white;

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

@@ -1,6 +1,9 @@
@import (once) "./tools.less";
@import (reference) "./tools.less";
.tokenfield_main () {
--LessLoader_require: LessLoader_currentFile();
}
& {
.ui-autocomplete {
z-index: 100001; // alertify + 1
}

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

@@ -1,6 +1,9 @@
@import (once) "./colortheme-all.less";
@import (reference) "./colortheme-all.less";
.history_main () {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-toolbar-history {
display: none;
text-align: center;

205
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,7 +38,41 @@
@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;
@@ -26,12 +81,27 @@
// this is a workaround
.fa-shhare-alt:before { content: "\f1e0"; }
.dropdown_main();
.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;
@@ -65,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;
@@ -253,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);
}
}
}
@@ -297,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;
@@ -516,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;
@@ -577,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;
@@ -586,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;
}
@@ -880,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;
@@ -1003,6 +1096,4 @@
}
}
}
}
};