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
commit ebfa2c2dc3
76 changed files with 3627 additions and 3427 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bower.json
View File

@ -36,7 +36,7 @@
"alertifyjs": "1.0.11", "alertifyjs": "1.0.11",
"scrypt-async": "1.2.0", "scrypt-async": "1.2.0",
"require-css": "0.1.10", "require-css": "0.1.10",
"less": "^2.7.2", "less": "^3.7.1",
"bootstrap": "^v4.0.0", "bootstrap": "^v4.0.0",
"diff-dom": "2.1.1", "diff-dom": "2.1.1",
"nthen": "^0.1.5", "nthen": "^0.1.5",

40
customize.dist/src/less2/404.less
View File

@ -1,40 +0,0 @@
@import (once) './include/font.less';
.font_neuropolitical();
.font_open-sans();
body.cp-page-index { @import "./pages/page-index.less"; }
body.cp-page-contact { @import "./pages/page-contact.less"; }
body.cp-page-login { @import "./pages/page-login.less"; }
body.cp-page-register { @import "./pages/page-register.less"; }
body.cp-page-what-is-cryptpad { @import "./pages/page-what-is-cryptpad.less"; }
body.cp-page-about { @import "./pages/page-about.less"; }
body.cp-page-privacy { @import "./pages/page-privacy.less"; }
body.cp-page-terms { @import "./pages/page-terms.less"; }
// Set the HTML style for the apps which shouldn't have a body scrollbar
html.cp-app-noscroll {
@import "./include/app-noscroll.less";
.app-noscroll_main();
}
// Set the HTML style for printing slides
html.cp-app-print {
@import "./include/app-print.less";
.app-print_main();
}
body.cp-readonly .cp-hidden-if-readonly { display: none !important; }
body.cp-app-drive { @import "../../../drive/app-drive.less"; }
body.cp-app-pad { @import "../../../pad/app-pad.less"; }
body.cp-app-code { @import "../../../code/app-code.less"; }
body.cp-app-slide { @import "../../../slide/app-slide.less"; }
body.cp-app-file { @import "../../../file/app-file.less"; }
body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; }
body.cp-app-contacts { @import "../../../contacts/app-contacts.less"; }
body.cp-app-poll { @import "../../../poll/app-poll.less"; }
body.cp-app-whiteboard { @import "../../../whiteboard/app-whiteboard.less"; }
body.cp-app-todo { @import "../../../todo/app-todo.less"; }
body.cp-app-profile { @import "../../../profile/app-profile.less"; }
body.cp-app-settings { @import "../../../settings/app-settings.less"; }
body.cp-app-debug { @import "../../../debug/app-debug.less"; }

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

@ -1,8 +1,11 @@
@import (once) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
@import (once) "./browser.less"; @import (reference) "./browser.less";
@import (once) "./variables.less"; @import (reference) "./variables.less";
.alertify_main () { .alertify_main() {
--LessLoader_require: LessLoader_currentFile();
};
& {
@max-z-index: 2147483647; @max-z-index: 2147483647;
@alertify-fore: @colortheme_modal-fg; @alertify-fore: @colortheme_modal-fg;
@alertify-base: @colortheme_modal-bg; @alertify-base: @colortheme_modal-bg;

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

@ -1,5 +1,8 @@
// html .app-noscroll_main() {
.app-noscroll_main () { --LessLoader_require: LessLoader_currentFile();
}
& {
.cp-app-noscroll {
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: 0px; padding: 0px;
@ -18,5 +21,5 @@
position: relative; position: relative;
border: 0; border: 0;
} }
}
} }

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

@ -1,4 +1,8 @@
.app-print_main () { .app-print_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-app-print {
// Current scope is <html> // Current scope is <html>
@media print { @media print {
height: auto; height: auto;
@ -43,4 +47,5 @@
} }
} }
} }
}
} }

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

@ -1,6 +1,18 @@
@import (once) "./tools.less"; @import (reference) "./tools.less";
.avatar_vars(
.avatar_main (@width) { @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 { &.cp-avatar {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -9,8 +21,13 @@
align-items: center; align-items: center;
.cp-avatar-default, media-tag { .cp-avatar-default, media-tag {
display: inline-flex; display: inline-flex;
width: @width;
height: @width; width: @avatar-width;
width: var(--avatar-width);
height: @avatar-width;
height: var(--avatar-width);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 4px; border-radius: 4px;
@ -21,13 +38,21 @@
.tools_unselectable(); .tools_unselectable();
background: white; background: white;
color: black; color: black;
font-size: @width/1.2; font-size: @avatar-font-size;
font-size: var(--avatar-font-size);
} }
media-tag { media-tag {
min-height: @width; min-height: @avatar-width;
min-width: @width; min-height: var(--avatar-width);
max-height: @width;
max-width: @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 { img {
min-width: 100%; min-width: 100%;
min-height: 100%; min-height: 100%;

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); .checkmark_main(@size: 20px) {
@dim1: round(@size / 3); --LessLoader_require: LessLoader_currentFile();
@dim2: round(2 * @size / 3); .checkmark_vars(@size);
@top: round(@size / 12) - 1; --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> // <label.cp-checkmark><input><span.cp-checkmark-mark></span>Text</label>
.cp-checkmark { .cp-checkmark {
margin: 0; margin: 0;
@ -58,8 +75,10 @@
.cp-checkmark-mark { .cp-checkmark-mark {
margin-right: 10px; margin-right: 10px;
position: relative; position: relative;
height: @size; height: @checkmark-size;
width: @size; height: var(--checkmark-size);
width: @checkmark-size;
width: var(--checkmark-size);
background-color: @colortheme_checkmark-back0; background-color: @colortheme_checkmark-back0;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -68,12 +87,16 @@
&:after { &:after {
content: ""; content: "";
display: none; display: none;
margin-top: @top; margin-top: @checkmark-top;
width: @dim1; margin-top: var(--checkmark-top);
height: @dim2; width: @checkmark-dim1;
width: var(--checkmark-dim1);
height: @checkmark-dim2;
height: var(--checkmark-dim2);
transform: rotate(45deg); transform: rotate(45deg);
border: solid @colortheme_checkmark-col1; 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; position: absolute;
} }
&:focus { &:focus {
@ -129,12 +152,14 @@
} }
} }
@radio-size: @dim1 * 3;
.cp-radio-mark { .cp-radio-mark {
margin-right: 10px; margin-right: 10px;
position: relative; position: relative;
height: @radio-size; height: @checkmark-radio-size;
width: @radio-size; height: var(--checkmark-radio-size);
width: @checkmark-radio-size;
width: var(--checkmark-radio-size);
background-color: @colortheme_checkmark-back0; background-color: @colortheme_checkmark-back0;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
@ -147,12 +172,14 @@
content: ""; content: "";
border-radius: 50%; border-radius: 50%;
background: white; background: white;
width: @dim1; width: @checkmark-dim1;
height: @dim1; width: var(--checkmark-dim1);
height: @checkmark-dim1;
height: var(--checkmark-dim1);
//transform: rotate(45deg); //transform: rotate(45deg);
//border: solid @colortheme_checkmark-col1; //border: solid @colortheme_checkmark-col1;
//border-width: 0 @width @width 0; //border-width: 0 var(--checkmark-width) var(--checkmark-width) 0;
} }
&:focus { &:focus {
//border-color: #FF007C !important; //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 // create a file: customize/src/less2/include/colortheme.less
// override whatever colors you want. When you update, the new colors will be // override whatever colors you want. When you update, the new colors will be
// added ok because the original file is pulled in first. // added ok because the original file is pulled in first.
@import (once) "/customize.dist/src/less2/include/colortheme.less"; @import (reference) "/customize.dist/src/less2/include/colortheme.less";
@import (once) "/customize/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 (reference) "./browser.less";
@import (once) "./tools.less"; @import (reference) "./colortheme-all.less";
@import (once) './icon-colors.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( .creation_main(
@color: @colortheme_default-color, // Color of the text for the toolbar @color: @colortheme_default-color,
@bg-color: @colortheme_default-bg, // color of the toolbar background @bg-color: @colortheme_default-bg
@warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
) { ) {
--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-bg: #fff;
@colortheme_creation-modal: #666; @colortheme_creation-modal: #666;
@colortheme_creation-modal-title: @colortheme_loading-bg; @colortheme_creation-modal-title: @colortheme_loading-bg;
@ -265,10 +280,13 @@
border: 1px solid transparent; border: 1px solid transparent;
&.cp-creation-template-selected { &.cp-creation-template-selected {
color: @color !important; color: @creation-color !important;
background-color: @bg-color !important; color: var(--creation-color) !important;
background-color: @creation-bg-color !important;
background-color: var(--creation-bg-color) !important;
.fa { .fa {
color: @color; color: @creation-color;
color: var(--creation-color);
} }
} }
@ -300,7 +318,8 @@
max-width: 100%; max-width: 100%;
} }
.fa { .fa {
color: @bg-color; color: @creation-bg-color;
color: var(--creation-bg-color);
cursor: pointer; cursor: pointer;
width: 100px; width: 100px;
height: 100px; height: 100px;

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

@ -1,8 +1,11 @@
@import (once) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
@import (once) "./tools.less"; @import (reference) "./tools.less";
/* The container <div> - needed to position the dropdown content */ /* The container <div> - needed to position the dropdown content */
.dropdown_main () { .dropdown_main () {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-dropdown-container { .cp-dropdown-container {
@dropdown_font: @colortheme_app-font-size @colortheme_font; @dropdown_font: @colortheme_app-font-size @colortheme_font;
position: relative; position: relative;

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

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

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

@ -1,9 +1,11 @@
.font_neuropolitical () { .font_main () {
@font-face { --LessLoader_require: LessLoader_currentFile();
}
// Fonts need to go on the global scope
@font-face {
font-family: Neuropolitical; font-family: Neuropolitical;
src: url("/customize/fonts/neuropolitical.ttf"); src: url("/customize/fonts/neuropolitical.ttf");
}
}
.font_open-sans () {
@import (once) '/customize/fonts/open-sans.less';
} }
@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 (reference) "./colortheme-all.less";
@import (once) "./toolbar.less"; @import (reference) "./toolbar.less";
@import (once) './fileupload.less'; @import (reference) './fileupload.less';
@import (once) './alertify.less'; @import (reference) './alertify.less';
@import (once) './tokenfield.less'; @import (reference) './tokenfield.less';
@import (once) './creation.less'; @import (reference) './creation.less';
@import (once) './tippy.less'; @import (reference) './tippy.less';
@import (once) "./checkmark.less"; @import (reference) "./checkmark.less";
@import (once) "./password-input.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) { .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( .toolbar_main(
@bg-color: @bg-color, @bg-color: @bg-color,
@warn-color: @warn-color, @warn-color: @warn-color,
@color: @color @color: @color
); );
.fileupload_main();
.alertify_main(); .alertify_main();
.fileupload_main();
.tokenfield_main(); .tokenfield_main();
.tippy_main(); .tippy_main();
.checkmark_main(20px); .checkmark_main(20px);
.password_main(); .password_main();
.creation_main( .creation_main(
@bg-color: @bg-color, @bg-color: @bg-color,
@warn-color: @warn-color,
@color: @color @color: @color
); );
font: @colortheme_app-font; font: @colortheme_app-font;
} };
.framework_min_main( .framework_min_main(
@color: @colortheme_default-color, // Color of the text for the toolbar @color: @colortheme_default-color, // Color of the text for the toolbar
@bg-color: @colortheme_default-bg, // color of the toolbar background @bg-color: @colortheme_default-bg, // color of the toolbar background
@warn-color: @colortheme_default-warn, // color of the warning text in the toolbar @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( .toolbar_main(
@bg-color: @bg-color, @bg-color: @bg-color,
@warn-color: @warn-color, @warn-color: @warn-color,
@ -46,4 +66,6 @@
font: @colortheme_app-font; font: @colortheme_app-font;
} }
& {
body.cp-readonly .cp-hidden-if-readonly { display: none !important; }
}

36
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 { .cp-help-container {
position: relative; position: relative;
background-color: lighten(@bg-color, 15%); background-color: @help-bg-color-l15;
background-color: var(--help-bg-color-l15);
&.cp-help-hidden { &.cp-help-hidden {
display: none; display: none;
} }
@ -14,14 +35,13 @@
right: 5px; right: 5px;
} }
.cp-help-text { .cp-help-text {
color: contrast(lighten(@bg-color, 15%), #fff, #000); //@color; color: @help-text-color;
color: var(--help-text-color);
margin: 0; margin: 0;
padding: 15px; padding: 15px;
a { a {
//color: darken(@colortheme_link-color, 30%); color: @help-link-color;
@spin: spin(lighten(@bg-color, 15%), 180); color: var(--help-link-color);
color: contrast(lighten(@bg-color, 15%), lighten(@spin, 10%), darken(@spin, 10%));
//color: darken(spin(lighten(@bg-color, 15%), 180), 10%);
} }
h1 { h1 {
font-size: 20px; font-size: 20px;

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 () { .iconColors_main () {
--LessLoader_require: LessLoader_currentFile();
}
& {
// Classes used in common-interface.js // Classes used in common-interface.js
.cp-icon-color-pad { color: @colortheme_pad-bg; } .cp-icon-color-pad { color: @colortheme_pad-bg; }
.cp-icon-color-code { color: @colortheme_code-bg; } .cp-icon-color-code { color: @colortheme_code-bg; }

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

@ -39,4 +39,3 @@
} }
} }
} }

57
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_link () {
@infopages_padding: 32px; 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 () { .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; background-color: @colortheme_info-background;
a { a {
color: @cryptpad_color_blue; color: @cryptpad_color_blue;
@ -100,20 +115,8 @@
border-top: 2px solid #fff; border-top: 2px solid #fff;
} }
} }
};
.infopages_link () { // Apply this to the top bar div
text-decoration: none;
color: #0275D8;
cursor: pointer;
display: inline-flex;
&:hover {
transform: scale(1.05);
}
}
// Apply this to the top bar div
.infopages_topbar () {
.cp-topbar { .cp-topbar {
background: #fff; background: #fff;
z-index: 10000; //Z infopage toolbar z-index: 10000; //Z infopage toolbar
@ -149,10 +152,9 @@
margin-right: 0.5em; margin-right: 0.5em;
} }
} }
}
// navigation top bar // navigation top bar
.navbar { .navbar {
background: #fff; background: #fff;
.navbar-brand { .navbar-brand {
display: block; display: block;
@ -187,11 +189,11 @@
margin-top: 10px; margin-top: 10px;
color: #4591C4; color: #4591C4;
} }
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
#menuCollapse { #menuCollapse {
text-align: right; text-align: right;
/* @media (min-width: 576px) { /* @media (min-width: 576px) {
top: 100%; top: 100%;
background: rgba(255,255,255,0.8); background: rgba(255,255,255,0.8);
position: absolute; position: absolute;
@ -199,7 +201,7 @@
padding: 0 20px; padding: 0 20px;
z-index: 1; z-index: 1;
} }
*/ */
} }
.navbar-nav a { .navbar-nav a {
text-align: right !important; text-align: right !important;
@ -208,12 +210,13 @@
margin-right: 13px; margin-right: 13px;
text-align: center; text-align: center;
} }
} }
//footer general styles //footer general styles
.footer-title { .footer-title {
font-weight: bold; font-weight: bold;
font-size: 1.2em; font-size: 1.2em;
color: #1E1F1F; color: #1E1F1F;
}
} }

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

@ -1,6 +1,6 @@
@import (once) "./unselectable.less"; @import (reference) "./unselectable.less";
@import (once) "./variables.less"; @import (reference) "./variables.less";
@import (once) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
.leftside-menu_main() { .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 () { .limit-bar_main () {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-limit-container { .cp-limit-container {
@colortheme_green: #5cb85c; @colortheme_green: #5cb85c;
display: inline-flex; 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; }
}
}
}

25
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) { .markdown_preformatted-code (@color: #333) {
pre > code { pre > code {
display: block; display: block;
@ -22,16 +34,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

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

@ -1,5 +1,5 @@
@import (once) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
@import (once) "./variables.less"; @import (reference) "./variables.less";
.modal_base() { .modal_base() {
font-family: @colortheme_font; font-family: @colortheme_font;
@ -17,7 +17,11 @@
} }
} }
.cp-modal-container { .modal_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-modal-container {
display: none; display: none;
z-index: 100000; //Z modal container z-index: 100000; //Z modal container
@ -75,4 +79,5 @@
cursor: pointer; cursor: pointer;
} }
} }
}
} }

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

@ -1,4 +1,7 @@
.password_main() { .password_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-password-container { .cp-password-container {
display: flex; display: flex;
align-items: center; 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 (reference) "/customize/src/less2/include/colortheme-all.less";
@import (once) "/customize/src/less2/include/leftside-menu.less"; @import (reference) "/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;
@sidebar_button-width: 400px; @sidebar_button-width: 400px;
.sidebar-layout_main() { .sidebar-layout_main() {
--LessLoader_require: LessLoader_currentFile();
// This is way too broad to put in the global scope
input[type="text"], input[type="password"] { input[type="text"], input[type="password"] {
padding-left: 10px; 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 { #cp-sidebarlayout-container {
font-size: 16px; font-size: 16px;
display: flex; 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() { .tippy_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
.tippy-tooltip.cryptpad-theme { .tippy-tooltip.cryptpad-theme {
/* Your styling here. Example: */ /* Your styling here. Example: */
background-color: white; 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 () { .tokenfield_main () {
--LessLoader_require: LessLoader_currentFile();
}
& {
.ui-autocomplete { .ui-autocomplete {
z-index: 100001; // alertify + 1 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 () { .history_main () {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-toolbar-history { .cp-toolbar-history {
display: none; display: none;
text-align: center; text-align: center;

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

@ -1,15 +1,36 @@
@import (once) "./dropdown.less"; @import (reference) "./dropdown.less";
@import (once) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
@import (once) "./browser.less"; @import (reference) "./browser.less";
@import (once) "./ckeditor-fix.less"; @import (reference) "./ckeditor-fix.less";
@import (once) "./avatar.less"; @import (reference) "./avatar.less";
@import (once) "./toolbar-history.less"; @import (reference) "./toolbar-history.less";
@import (once) "./icon-colors.less"; @import (reference) "./icon-colors.less";
@import (once) "./tools.less"; @import (reference) "./tools.less";
@import (once) "./icons.less"; @import (reference) "./icons.less";
@import (once) "./modal.less"; @import (reference) "./modal.less";
@import (once) "./markdown-toolbar.less"; @import (reference) "./help.less";
@import (once) "./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 ( .toolbar_main (
@color: @colortheme_default-color, // Color of the text for the toolbar @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 @warn-color: @colortheme_default-warn, // color of the warning text in the toolbar
@barWidth: 600px // width of 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_line-height: 32px;
@toolbar_top-height: 64px; @toolbar_top-height: 64px;
@toolbar_button-font: @colortheme_app-font; @toolbar_button-font: @colortheme_app-font;
@ -26,12 +81,27 @@
// this is a workaround // this is a workaround
.fa-shhare-alt:before { content: "\f1e0"; } .fa-shhare-alt:before { content: "\f1e0"; }
.dropdown_main();
.ckeditor_fix(); .ckeditor_fix();
.history_main();
.iconColors_main(); .cp-markdown-toolbar {
.markdownToolbar_main(@color, @bg-color); height: @toolbar_line-height;
.help_main(@color, @bg-color); 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 { .cp-toolbar-container {
display: flex; display: flex;
@ -65,7 +135,8 @@
} }
.cp-toolbar-userlist-drawer { .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; font: @colortheme_app-font-size @colortheme_font;
min-width: 175px; min-width: 175px;
width: 175px; width: 175px;
@ -253,31 +324,39 @@
} }
.cp-toolbar-userlist-drawer { .cp-toolbar-userlist-drawer {
background-color: @bg-color; background-color: @toolbar-bg-color;
color: @color; background-color: var(--toolbar-bg-color);
color: @toolbar-color;
color: var(--toolbar-color);
.cp-toolbar-userlist-drawer-close { .cp-toolbar-userlist-drawer-close {
color: @color; color: @toolbar-color;
color: var(--toolbar-color);
} }
h2 { h2 {
background-color: darken(@bg-color, 10%); background-color: @toolbar-bg-color-d10;
color: @color; background-color: var(--toolbar-bg-color-d10);
color: @toolbar-color;
color: var(--toolbar-color);
} }
.cp-toolbar-userlist-name-input { .cp-toolbar-userlist-name-input {
background-color: darken(@bg-color, 10%); background-color: @toolbar-bg-color-d10;
color: @color; background-color: var(--toolbar-bg-color-d10);
color: @toolbar-color;
color: var(--toolbar-color);
} }
.cp-toolbar-userlist-name-edit { .cp-toolbar-userlist-name-edit {
color: contrast(@color, color: @toolbar-userlist-name-edit;
lighten(@color, 20%), color: var(--toolbar-userlist-name-edit);
darken(@color, 20%));
background: transparent; background: transparent;
&:hover { &:hover {
color: @color; color: @toolbar-color;
color: var(--toolbar-color);
} }
} }
.cp-toolbar-userlist-friend { .cp-toolbar-userlist-friend {
&:hover { &:hover {
color: darken(@color, 15%); color: @toolbar-color-d15;
color: var(--toolbar-color-d15);
} }
} }
} }
@ -297,8 +376,10 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
background-color: @bg-color; background-color: @toolbar-bg-color;
color: @color; background-color: var(--toolbar-bg-color);
color: @toolbar-color;
color: var(--toolbar-color);
.fa { .fa {
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
@ -516,42 +597,57 @@
.cp-toolbar-spinner { .cp-toolbar-spinner {
font-size: @colortheme_app-font-size; font-size: @colortheme_app-font-size;
color: @color; color: @toolbar-color;
color: var(--toolbar-color);
} }
.cp-toolbar-limit { .cp-toolbar-limit {
text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color; text-shadow: -1px 0 @toolbar-color, 0 1px @toolbar-color, 1px 0 @toolbar-color, 0 -1px @toolbar-color;
color: @warn-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 { .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 { 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-hoverable:hover {
.cp-toolbar-title-editable, .cp-toolbar-title-edit { .cp-toolbar-title-editable, .cp-toolbar-title-edit {
cursor: text; cursor: text;
border: 1px solid darken(@bg-color, 15%); border: 1px solid @toolbar-bg-color-d15;
background: darken(@bg-color, 10%); border: 1px solid var(--toolbar-bg-color-d15);
background: @toolbar-bg-color-d10;
background: var(--toolbar-bg-color-d10);
transition: all 0.15s; transition: all 0.15s;
color: @color; color: @toolbar-color;
color: var(--toolbar-color);
} }
.cp-toolbar-title-editable { .cp-toolbar-title-editable {
cursor: text; cursor: text;
} }
} }
.cp-toolbar-title-save { .cp-toolbar-title-save {
border: 1px solid darken(@bg-color, 15%); border: 1px solid @toolbar-bg-color-d15;
background: darken(@bg-color, 10%); border: 1px solid var(--toolbar-bg-color-d15);
color: @color; background: @toolbar-bg-color-d10;
background: var(--toolbar-bg-color-d10);
color: @toolbar-color;
color: var(--toolbar-color);
&:hover { &:hover {
background: darken(@bg-color, 5%); background: @toolbar-bg-color-d5;
background: var(--toolbar-bg-color-d5);
} }
} }
input { input {
border: 1px solid darken(@bg-color, 15%); border: 1px solid @toolbar-bg-color-d15;
background: darken(@bg-color, 10%); border: 1px solid var(--toolbar-bg-color-d15);
color: @color; 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 { .cp-dropdown-content.cp-dropdown-left a {
color: black; color: black;
@ -577,7 +673,8 @@
padding: 0; padding: 0;
margin: 0 5px; margin: 0 5px;
font-size: @colortheme_app-font-size; font-size: @colortheme_app-font-size;
color: @warn-color; color: @toolbar-warn-color;
color: var(--toolbar-warn-color);
.cp-pnp-msg { .cp-pnp-msg {
padding-left: 5px; padding-left: 5px;
font-family: @colortheme_font; font-family: @colortheme_font;
@ -586,7 +683,8 @@
font-size: @colortheme_app-font-size; font-size: @colortheme_app-font-size;
font-family: @colortheme_font; font-family: @colortheme_font;
font-weight: bold; font-weight: bold;
color: @warn-color; color: @toolbar-warn-color;
color: var(--toolbar-warn-color);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -880,11 +978,6 @@
display: flex; display: flex;
min-height: @toolbar_line-height; min-height: @toolbar_line-height;
overflow: hidden; overflow: hidden;
@media screen and (max-width: @barWidth) { // 450px
flex-wrap: wrap;
height: auto;
width: 100%;
}
&:empty { &:empty {
min-height: 0; min-height: 0;
height: 0; height: 0;
@ -1003,6 +1096,4 @@
} }
} }
} }
};
}

44
customize.dist/src/less2/main.less
View File

@ -1,44 +0,0 @@
@import (once) './include/font.less';
.font_neuropolitical();
.font_open-sans();
body.cp-page-index { @import "./pages/page-index.less"; }
body.cp-page-contact { @import "./pages/page-contact.less"; }
body.cp-page-login { @import "./pages/page-login.less"; }
body.cp-page-register { @import "./pages/page-register.less"; }
body.cp-page-what-is-cryptpad { @import "./pages/page-what-is-cryptpad.less"; }
body.cp-page-about { @import "./pages/page-about.less"; }
body.cp-page-privacy { @import "./pages/page-privacy.less"; }
body.cp-page-features { @import "./pages/page-features.less"; }
body.cp-page-faq { @import "./pages/page-faq.less"; }
body.cp-page-terms { @import "./pages/page-terms.less"; }
// Set the HTML style for the apps which shouldn't have a body scrollbar
html.cp-app-noscroll {
@import "./include/app-noscroll.less";
.app-noscroll_main();
}
// Set the HTML style for printing slides
html.cp-app-print {
@import "./include/app-print.less";
.app-print_main();
}
body.cp-readonly .cp-hidden-if-readonly { display: none !important; }
body.cp-app-drive { @import "../../../drive/app-drive.less"; }
body.cp-app-pad { @import "../../../pad/app-pad.less"; }
body.cp-app-code { @import "../../../code/app-code.less"; }
body.cp-app-slide { @import "../../../slide/app-slide.less"; }
body.cp-app-file { @import "../../../file/app-file.less"; }
body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; }
body.cp-app-contacts { @import "../../../contacts/app-contacts.less"; }
body.cp-app-poll { @import "../../../poll/app-poll.less"; }
body.cp-app-whiteboard { @import "../../../whiteboard/app-whiteboard.less"; }
body.cp-app-todo { @import "../../../todo/app-todo.less"; }
body.cp-app-profile { @import "../../../profile/app-profile.less"; }
body.cp-app-settings { @import "../../../settings/app-settings.less"; }
body.cp-app-debug { @import "../../../debug/app-debug.less"; }
body.cp-app-worker { @import "../../../worker/app-worker.less"; }
body.cp-app-kanban { @import "../../../kanban/app-kanban.less"; }

7
customize.dist/src/less2/pages/page-404.less
View File

@ -1,9 +1,8 @@
@import (once) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
@import (once) "../include/font.less"; @import (reference) "../include/font.less";
.font_neuropolitical();
.font_open-sans();
html, body { html, body {
.font_main();
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
#cp-main { #cp-main {

40
customize.dist/src/less2/pages/page-about.less
View File

@ -1,12 +1,13 @@
@import (once) "../include/infopages.less"; @import (reference) "../include/infopages.less";
@import (once) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
.infopages_main(); &.cp-page-about {
.infopages_topbar(); .infopages_main();
#cp-main {
#cp-main {
background: #fff; background: #fff;
} }
.cp-about-intro { .cp-about-intro {
padding-top: 3em; padding-top: 3em;
padding-bottom: 3em; padding-bottom: 3em;
background-image: url(/customize/bkabout.jpg); background-image: url(/customize/bkabout.jpg);
@ -27,8 +28,8 @@
padding-top: 1em; padding-top: 1em;
} }
} }
} }
.cp-container { .cp-container {
.row { .row {
background: #fff; background: #fff;
} }
@ -51,8 +52,8 @@
padding-left: 15px; padding-left: 15px;
} }
} }
} }
.cp-develop-about { .cp-develop-about {
.cp-icon-cent { .cp-icon-cent {
width: 6rem; width: 6rem;
background: #fff; background: #fff;
@ -73,8 +74,8 @@
color: #1E1F1F; color: #1E1F1F;
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
} }
.cp-profile-det { .cp-profile-det {
padding-left: 30px; padding-left: 30px;
h3 { h3 {
color: #1E1F1F; color: #1E1F1F;
@ -90,8 +91,8 @@
border-top: 2px solid @cryptpad_color_blue; border-top: 2px solid @cryptpad_color_blue;
} }
margin-bottom: 1em; margin-bottom: 1em;
} }
.cp-soc-media { .cp-soc-media {
font-size: 1.5em; font-size: 1.5em;
color: @cryptpad_color_blue; color: @cryptpad_color_blue;
padding-right: 1em; padding-right: 1em;
@ -102,14 +103,15 @@
&:visited { &:visited {
color: @cryptpad_color_blue; color: @cryptpad_color_blue;
} }
} }
.cp-contrib { .cp-contrib {
margin-top: 3em; margin-top: 3em;
.cp-icon-cent { .cp-icon-cent {
background-image: url(/customize/source-branch.svg); background-image: url(/customize/source-branch.svg);
background-position: 60%; background-position: 60%;
} }
} }
.cp-margin-bot { .cp-margin-bot {
margin-bottom: 1.5em; margin-bottom: 1.5em;
}
} }

23
customize.dist/src/less2/pages/page-contact.less
View File

@ -1,16 +1,16 @@
@import (once) "../include/infopages.less"; @import (reference) "../include/infopages.less";
@import (once) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
.infopages_main(); &.cp-page-contact {
.infopages_topbar(); .infopages_main();
.fa { .fa {
padding-right: 0.25em; padding-right: 0.25em;
} }
#cp-main { #cp-main {
background-color: #fff; background-color: #fff;
} }
.cp-container { .cp-container {
background: #fff; background: #fff;
.cp-iconCont { .cp-iconCont {
h4 { h4 {
@ -75,8 +75,8 @@
} }
} }
} }
} }
.cp-contdet { .cp-contdet {
padding-top: 3em; padding-top: 3em;
padding-bottom: 3em; padding-bottom: 3em;
background-image: url(/customize/images/bkcontact.jpg); background-image: url(/customize/images/bkcontact.jpg);
@ -87,4 +87,5 @@
font-weight: 700; font-weight: 700;
color: #fff; color: #fff;
} }
}
} }

25
customize.dist/src/less2/pages/page-faq.less
View File

@ -1,12 +1,13 @@
@import (once) "../include/infopages.less"; @import (reference) "../include/infopages.less";
@import (once) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
.infopages_main(); &.cp-page-faq {
.infopages_topbar(); .infopages_main();
#cp-main {
#cp-main {
background: #fff; background: #fff;
} }
.cp-faq { .cp-faq {
padding-top: 3em; padding-top: 3em;
padding-bottom: 3em; padding-bottom: 3em;
background-image: url(/customize/images/cover-faq.jpg); background-image: url(/customize/images/cover-faq.jpg);
@ -20,9 +21,9 @@
h1 { h1 {
font-weight: 700; font-weight: 700;
} }
} }
.cp-faq-ques-det { .cp-faq-ques-det {
.cp-faq-header { .cp-faq-header {
a { a {
padding: 0; padding: 0;
@ -35,8 +36,8 @@
} }
} }
} }
} }
.cp-faq-container { .cp-faq-container {
.cp-faq-questions-items { .cp-faq-questions-items {
background: #3a84b6; background: #3a84b6;
color: #fff; color: #fff;
@ -80,5 +81,5 @@
color: #212529; color: #212529;
} }
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
}
} }

36
customize.dist/src/less2/pages/page-features.less
View File

@ -1,12 +1,13 @@
@import (once) "../include/infopages.less"; @import (reference) "../include/infopages.less";
@import (once) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
.infopages_main(); &.cp-page-features {
.infopages_topbar(); .infopages_main();
#cp-main {
#cp-main {
background-color: #fff; background-color: #fff;
} }
.cp_cont_features { .cp_cont_features {
padding-top: 3em; padding-top: 3em;
padding-bottom: 3em; padding-bottom: 3em;
background-image: url('/customize/images/cover-features.jpg'); background-image: url('/customize/images/cover-features.jpg');
@ -17,12 +18,12 @@
font-weight: 700; font-weight: 700;
color: #fff; color: #fff;
} }
} }
#cp-features-register { #cp-features-register {
text-align: center; text-align: center;
padding: 20px; padding: 20px;
} }
.cp-features-register-button { .cp-features-register-button {
font-size: 20px; font-size: 20px;
color: #fff; color: #fff;
background: @cryptpad_color_blue; background: @cryptpad_color_blue;
@ -33,8 +34,8 @@
cursor: pointer; cursor: pointer;
} }
padding: 0.5em 1em; padding: 0.5em 1em;
} }
.cp-features-web { .cp-features-web {
.card { .card {
box-shadow: 0 5px 15px rgba(69, 145, 196, 0.3); box-shadow: 0 5px 15px rgba(69, 145, 196, 0.3);
border: none; border: none;
@ -66,13 +67,13 @@
.list-group-item { .list-group-item {
border-color: rgba(69, 145, 196, 0.125); border-color: rgba(69, 145, 196, 0.125);
} }
} }
.cp-anon-user { .cp-anon-user {
.card-body { .card-body {
background-color: @cryptpad_color_blue; background-color: @cryptpad_color_blue;
} }
} }
.cp-regis-user { .cp-regis-user {
@media (max-width:575px) { @media (max-width:575px) {
margin-top: 3em; margin-top: 3em;
} }
@ -83,4 +84,5 @@
background: linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false background: linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false
} }
} }
}
} }

94
customize.dist/src/less2/pages/page-index.less
View File

@ -1,12 +1,12 @@
@import (once) "../include/infopages.less"; @import (reference) "../include/infopages.less";
@import (once) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
.infopages_main(); &.cp-page-index {
.infopages_topbar(); .infopages_main();
@background_lighter: rgba(0,0,0,0.1); @background_lighter: rgba(0,0,0,0.1);
@background_darker: rgba(0,0,0,0.4); @background_darker: rgba(0,0,0,0.4);
#cp-main { #cp-main {
color: #FFF; color: #FFF;
background: linear-gradient( @background_darker, @background_lighter ), url('/customize/bg14.jpg'); background: linear-gradient( @background_darker, @background_lighter ), url('/customize/bg14.jpg');
background-size: cover; background-size: cover;
@ -21,11 +21,11 @@
margin-top: 6em; margin-top: 6em;
} }
} }
} }
body { body {
font-family: "Open Sans", Helvetica; font-family: "Open Sans", Helvetica;
} }
.cp-right { .cp-right {
.cp-register-btn { .cp-register-btn {
padding: 0.5em 1em 0.7em 1em; padding: 0.5em 1em 0.7em 1em;
border: 2px solid #fff; border: 2px solid #fff;
@ -40,8 +40,8 @@ body {
transform: scale(1.05); transform: scale(1.05);
} }
} }
} }
.cp-title { .cp-title {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
@ -62,8 +62,8 @@ body {
font-size: 20px; font-size: 20px;
//font-style: italic; //font-style: italic;
} }
} }
.navbar { .navbar {
background: transparent; background: transparent;
width: 100%; width: 100%;
@media only screen and (max-device-width: 991px) { @media only screen and (max-device-width: 991px) {
@ -91,12 +91,12 @@ body {
margin-top: 10px; margin-top: 10px;
color: #fff; color: #fff;
} }
} }
@callout-padding: 15px; @callout-padding: 15px;
a:hover { a:hover {
text-decoration: none; text-decoration: none;
} }
.bs-callout { .bs-callout {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
margin: 25px 0; margin: 25px 0;
@ -115,34 +115,34 @@ a:hover {
font-size: 1.3em; font-size: 1.3em;
} }
} }
} }
h4 { h4 {
margin: 0; margin: 0;
} }
.cp-callout-more-moremsg,.cp-callout-more-lessmsg { .cp-callout-more-moremsg,.cp-callout-more-lessmsg {
transform: none !important; transform: none !important;
} }
.bs-callout div { .bs-callout div {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
position: absolute; position: absolute;
left: 5em; left: 5em;
} }
.bs-callout+.bs-callout { .bs-callout+.bs-callout {
margin-top: -5px; margin-top: -5px;
} }
.bs-callout:hover { .bs-callout:hover {
//color: white; //color: white;
transform: scale(1.05); transform: scale(1.05);
cursor: pointer; cursor: pointer;
} }
.bs-callout:hover.cp-callout-more { .bs-callout:hover.cp-callout-more {
transform: none !important; transform: none !important;
} }
.bs-callout .fa { .bs-callout .fa {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 2em; font-size: 2em;
@ -150,16 +150,16 @@ h4 {
width: 2em; width: 2em;
transition: width 0.1s; transition: width 0.1s;
color: #fff; color: #fff;
} }
.cp-callout-pad .fa { background-color: @colortheme_pad-bg; } .cp-callout-pad .fa { background-color: @colortheme_pad-bg; }
.cp-callout-code .fa { background-color: @colortheme_code-bg; } .cp-callout-code .fa { background-color: @colortheme_code-bg; }
.cp-callout-slide .fa { background-color: @colortheme_slide-bg; } .cp-callout-slide .fa { background-color: @colortheme_slide-bg; }
.cp-callout-poll .fa { background-color: @colortheme_poll-bg; } .cp-callout-poll .fa { background-color: @colortheme_poll-bg; }
.cp-callout-kanban .fa { background-color: @colortheme_kanban-bg; } .cp-callout-kanban .fa { background-color: @colortheme_kanban-bg; }
.cp-callout-whiteboard .fa { background-color: @colortheme_whiteboard-bg; } .cp-callout-whiteboard .fa { background-color: @colortheme_whiteboard-bg; }
.cp-callout-recent .fa { background-color: @colortheme_drive-bg; } .cp-callout-recent .fa { background-color: @colortheme_drive-bg; }
.cp-hidden { display: none !important; } .cp-hidden { display: none !important; }
.cp-callout-more { .cp-callout-more {
display: inline-block; display: inline-block;
align-content: center; align-content: center;
height: 2em; height: 2em;
@ -179,8 +179,8 @@ h4 {
padding-left: 5px; padding-left: 5px;
} }
} }
} }
@media (min-width: 576px) and (max-width: 767px) { @media (min-width: 576px) and (max-width: 767px) {
.container { .container {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
@ -188,5 +188,5 @@ h4 {
div#cp-main.cp-page-index .cp-topbar .navbar-toggler-left { div#cp-main.cp-page-index .cp-topbar .navbar-toggler-left {
left: 5px; left: 5px;
} }
}
} }

27
customize.dist/src/less2/pages/page-login.less
View File

@ -1,22 +1,22 @@
@import (once) "../include/infopages.less"; @import (reference) "../include/infopages.less";
@import (once) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
@import (once) "../include/alertify.less"; @import (reference) "../include/alertify.less";
@import (once) "../include/checkmark.less"; @import (reference) "../include/checkmark.less";
.infopages_main(); &.cp-page-login {
.infopages_topbar(); .infopages_main();
.alertify_main(); .alertify_main();
.checkmark_main(20px); .checkmark_main(20px);
.form-group { .form-group {
.extra { .extra {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
} }
} }
.cp-container { .cp-container {
#data { #data {
background: #4591C4; background: #4591C4;
padding-top: 3em; padding-top: 3em;
@ -62,8 +62,9 @@
} }
} }
} }
} }
.cp-container { .cp-container {
padding-top: 3em; padding-top: 3em;
min-height: 66vh; min-height: 66vh;
}
} }

20
customize.dist/src/less2/pages/page-privacy.less
View File

@ -1,12 +1,13 @@
@import (once) "../include/infopages.less"; @import (reference) "../include/infopages.less";
@import (once) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
.infopages_main(); &.cp-page-privacy {
.infopages_topbar(); .infopages_main();
#cp-main {
#cp-main {
background: #fff; background: #fff;
} }
.cp-privacy-top { .cp-privacy-top {
padding-top: 3em; padding-top: 3em;
padding-bottom: 3em; padding-bottom: 3em;
background-image: url(/customize/images/cover-privacy.jpg); background-image: url(/customize/images/cover-privacy.jpg);
@ -27,8 +28,8 @@
padding-top: 1em; padding-top: 1em;
} }
} }
} }
.cp-privacy { .cp-privacy {
background-image: url(/customize/CryptPadlogo_op5.svg); background-image: url(/customize/CryptPadlogo_op5.svg);
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -45,4 +46,5 @@
p { p {
color: #3F4141; color: #3F4141;
} }
}
} }

40
customize.dist/src/less2/pages/page-register.less
View File

@ -1,14 +1,15 @@
@import (once) "../include/infopages.less"; @import (reference) "../include/infopages.less";
@import (once) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
@import (once) "../include/alertify.less"; @import (reference) "../include/alertify.less";
@import (once) "../include/checkmark.less"; @import (reference) "../include/checkmark.less";
.infopages_main(); &.cp-page-register {
.infopages_topbar(); .infopages_main();
.alertify_main();
.checkmark_main(20px);
.cp-container { .alertify_main();
.checkmark_main(20px);
.cp-container {
.form-group { .form-group {
.checkbox-container { .checkbox-container {
&:nth-of-type(1) { &:nth-of-type(1) {
@ -29,14 +30,14 @@
} }
padding-bottom: 3em; padding-bottom: 3em;
min-height: 5vh; min-height: 5vh;
} }
.alertify { .alertify {
// workaround for alertify making empty p // workaround for alertify making empty p
p:empty { p:empty {
display: none; display: none;
} }
} }
.cp-register-wel { .cp-register-wel {
padding-top: 6em; padding-top: 6em;
padding-bottom: 20em; padding-bottom: 20em;
background-image: url(/customize/bkregister.jpg); background-image: url(/customize/bkregister.jpg);
@ -48,9 +49,9 @@
color: #fff; color: #fff;
text-shadow: 0 1px 5px rgba(0,0,0,.2); text-shadow: 0 1px 5px rgba(0,0,0,.2);
} }
} }
.cp-register-det { .cp-register-det {
margin-top: -7em; margin-top: -7em;
background: #fff; background: #fff;
box-shadow: 0 5px 15px rgba(69,145,196, 0.3); box-shadow: 0 5px 15px rgba(69,145,196, 0.3);
@ -109,8 +110,8 @@
transform: scale(1.05); transform: scale(1.05);
} }
} }
} }
.cp-register-test { .cp-register-test {
margin-top: 3em; margin-top: 3em;
hr { hr {
width: 15rem; width: 15rem;
@ -133,7 +134,8 @@
color: @cryptpad_text_col; color: @cryptpad_text_col;
} }
} }
#cp-main { #cp-main {
background: #fff; background: #fff;
}
} }

9
customize.dist/src/less2/pages/page-terms.less
View File

@ -1,5 +1,6 @@
@import (once) "../include/infopages.less"; @import (reference) "../include/infopages.less";
@import (once) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
.infopages_main(); &.cp-page-terms {
.infopages_topbar(); .infopages_main();
}

19
customize.dist/src/less2/pages/page-what-is-cryptpad.less
View File

@ -1,10 +1,10 @@
@import (once) "../include/infopages.less"; @import (reference) "../include/infopages.less";
@import (once) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
.infopages_main(); &.cp-page-what-is-cryptpad {
.infopages_topbar(); .infopages_main();
.cp-what-is { .cp-what-is {
padding-top: 3em; padding-top: 3em;
padding-bottom: 3em; padding-bottom: 3em;
background-image: url(/customize/bkwhat.jpg); background-image: url(/customize/bkwhat.jpg);
@ -15,11 +15,11 @@
h1 { h1 {
font-weight: 700; font-weight: 700;
} }
} }
#cp-main { #cp-main {
background: #fff; background: #fff;
} }
.cp-container { .cp-container {
padding-top: 3em; padding-top: 3em;
padding-bottom: 3em; padding-bottom: 3em;
h2 { h2 {
@ -40,4 +40,5 @@
display: block; display: block;
margin: 0 auto; margin: 0 auto;
} }
}
} }

50
customize.dist/src/less2/readme.md
View File

@ -1,19 +1,45 @@
# CryptPad Styling # CryptPad Styling
How it works: ## Linking Less/CSS
* In this example, we use the index page, for each page we will have a corresponding class name and a corresponding less file.
* The index page has a main div containing everything `<div id="cp-main" class="cp-page-index">` In order to keep the amount of CSS generated under control, we use "linking", via the LessLoader.
* There is a corresponding less file called `less2/pages/page-index.less` This makes use of CSS variables in order to work. The old solution was to put all of the content into less mixins
* Finally there is a corresponding line in main.less which imports that less file: `div#main.cp-page-index { @import "./pages/page-index.less"; }` which would be used inside of the scope where they should be, but this caused a state explosion because each app needed
* cp-page-index class means: essentially the same mixins. However, these mixins had arguments such as colors which were different per-app.
* cp -> cryptpad
* page -> this is a style for accessing a page's less file The new solution is to set CSS variables for the arguments (like color) and then put the bulk of the less at the global
* index -> the name of the page and of the less file (page-index.less) scope. When you include a dependency, the following happens:
* And everything which is standardized across pages is included from `page-index.less` as variables and mixins.
1. You `@include (reference) './include/dependency.less`. The (reference) argument which means it will not emit CSS,
this is important because otherwise all of the dependencies of your app's less file would end up bundled with it, the
state explosion problem.
2. You invoke `.dependency_main(@arg1 @arg2)` inside of the scope you want it in, the name `dependency_main` is a
convention, all less variables, mixins, or CSS variables which a file creates should be prefixed with the name of the
file (in this case, "dependency").
3. The mixin `.dependency_main` does a couple of things:
* First, it sets a CSS variable called `--LessLoader_require`, this is a special variable which the browser does not
use, the only objective of this variable is to inform LessLoader that another file is needed. To do this, there is a
helper function (also specified in LessLoader.js) called `LessLoader_currentFile()`. The syntax is:
`--LessLoader_require: LessLoader_currentFile();` and in the CSS, this outputs something like:
`--LessLoader_require: "/customize/src/less2/include/dependency.less?ver=2.4.0-1531572157592";`
* Secondly, it sets browser variables for it's arguments, making sure to avoid namespace collisions:
`--dependency-arg1: @arg1;`, `--dependency-arg2: @arg2;`. Sometimes a less transformation needs to be done on a
variable, unfortunately in this case the transformation must be done here and the transformed variable must be output.
`--dependency-arg1-l10: lighten(@arg1, 10%);`.
4. After less processing is completed, the LessLoader caches the result of parsing, then scans the it for instances of
`--LessLoader_require` variable and then processes them, but it does this separately. So even if dependency.less is
required many times, it will only be processed by the less interpreter once.
## Other convensions
Rules:
* All of our new classes and ids should start with `cp-`. * All of our new classes and ids should start with `cp-`.
* You may make as many files as you need, for different purposes, but they can only contain mixins and variables. * The document body has a class on it depending on the app/page, app classes begin with `cp-app-` and page classes begin
with `cp-page-`.
* Custom classes ought to begin with `cp-` and the name of the file where the rules are written for them (see help.less as
an example of doing the right thing).
* Since the include files generate CSS and the app cannot control the scope which it's run at, be considerate avoid
making an include file which changes something significant (like making a rule for `li`). help.less is an excellent example
of doing this well, infopages.less is the worst example (fortunately it doesn't get included in any of the apps).
* All mixins and variables must be prefixed with the name of the file where they're defined and and underscore. * All mixins and variables must be prefixed with the name of the file where they're defined and and underscore.
* e.g. `@colortheme_toolbar-poll-bg: #006304;` defined in `colortheme.less` * e.g. `@colortheme_toolbar-poll-bg: #006304;` defined in `colortheme.less`
* All mixin / variable files go in an `/include/` directory. * All mixin / variable files go in an `/include/` directory.

2
customize.dist/template.js
View File

@ -26,7 +26,7 @@ $(function () {
window.Tether = function () {}; window.Tether = function () {};
require([ require([
'less!/customize/src/less2/main.less', 'less!/customize/src/less2/pages/page-' + css + '.less',
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css' 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css'
], function () { ], function () {
$body.append($main); $body.append($main);

14
www/code/app-code.less
View File

@ -1,16 +1,14 @@
@import (once) "../../customize/src/less2/include/browser.less"; @import (reference) "../../customize/src/less2/include/browser.less";
@import (once) "../../customize/src/less2/include/markdown.less"; @import (reference) "../../customize/src/less2/include/markdown.less";
@import (once) "../../customize/src/less2/include/framework.less"; @import (reference) "../../customize/src/less2/include/framework.less";
&.cp-app-code {
.framework_main( .framework_main(
@bg-color: @colortheme_code-bg, @bg-color: @colortheme_code-bg,
@warn-color: @colortheme_code-warn, @warn-color: @colortheme_code-warn,
@color: @colortheme_code-color @color: @colortheme_code-color
); );
// body
&.cp-app-code {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
max-height: 100%; max-height: 100%;

2
www/code/inner.js
View File

@ -37,6 +37,8 @@ define([
'cm/addon/fold/comment-fold', 'cm/addon/fold/comment-fold',
'cm/addon/display/placeholder', 'cm/addon/display/placeholder',
'less!/code/app-code.less'
], function ( ], function (
$, $,
DiffMd, DiffMd,

41
www/common/LessLoader.js
View File

@ -4,9 +4,11 @@ const define = (x:any, y:any) => {};
const require = define; const require = define;
*/ */
define([ define([
'/api/config' '/api/config',
], function (Config) { /*::});module.exports = (function() { '/bower_components/nthen/index.js'
], function (Config, nThen) { /*::});module.exports = (function() {
const Config = (undefined:any); const Config = (undefined:any);
const nThen = require('/bower_components/nthen/index.js');
*/ */
var module = { exports: {} }; var module = { exports: {} };
@ -100,6 +102,10 @@ define([
require(['/bower_components/less/dist/less.min.js'], function (Less) { require(['/bower_components/less/dist/less.min.js'], function (Less) {
if (lessEngine) { return void cb(lessEngine); } if (lessEngine) { return void cb(lessEngine); }
lessEngine = Less; lessEngine = Less;
Less.functions.functionRegistry.add('LessLoader_currentFile', function () {
return new Less.tree.UnicodeDescriptor('"' +
fixURL(this.currentFileInfo.filename) + '"');
});
var doXHR = lessEngine.FileManager.prototype.doXHR; var doXHR = lessEngine.FileManager.prototype.doXHR;
lessEngine.FileManager.prototype.doXHR = function (url, type, callback, errback) { lessEngine.FileManager.prototype.doXHR = function (url, type, callback, errback) {
url = fixURL(url); url = fixURL(url);
@ -133,24 +139,39 @@ define([
}); });
}; };
module.exports.load = function (url /*:string*/, cb /*:()=>void*/) { var loadSubmodulesAndInject = function (css, url, cb, stack) {
var btime = +new Date(); inject(css, url);
var nt = nThen;
nt = nt(function (w) {
css.replace(/\-\-LessLoader_require\:\s*"([^"]*)"\s*;/g, function (all, u) {
u = u.replace(/\?.*$/, '');
module.exports.load(u, w(), stack);
});
}).nThen;
nt(function () { cb(); });
};
module.exports.load = function (url /*:string*/, cb /*:()=>void*/, stack /*:?Array*/) {
var btime = stack ? null : +new Date();
stack = stack || [];
if (stack.indexOf(url) > -1) { return void cb(); }
var timeout = setTimeout(function () { console.log('failed', url); }, 10000);
var done = function () { var done = function () {
clearTimeout(timeout);
if (btime) {
console.log("Compiling [" + url + "] took " + (+new Date() - btime) + "ms"); console.log("Compiling [" + url + "] took " + (+new Date() - btime) + "ms");
}
cb(); cb();
}; };
stack.push(url);
cacheGet(url, function (css) { cacheGet(url, function (css) {
if (css) { if (css) { return void loadSubmodulesAndInject(css, url, done, stack); }
inject(css, url);
return void done();
}
console.log('CACHE MISS ' + url); console.log('CACHE MISS ' + url);
((/\.less([\?\#].*)?$/.test(url)) ? loadLess : loadCSS)(url, function (err, css) { ((/\.less([\?\#].*)?$/.test(url)) ? loadLess : loadCSS)(url, function (err, css) {
if (!css) { return void console.error(err); } if (!css) { return void console.error(err); }
var output = fixAllURLs(css, url); var output = fixAllURLs(css, url);
cachePut(url, output); cachePut(url, output);
inject(output, url); loadSubmodulesAndInject(output, url, done, stack);
done();
}); });
}); });
}; };

9
www/common/common-interface.js
View File

@ -1,3 +1,12 @@
if (!document.querySelector("#alertifyCSS")) {
// Prevent alertify from injecting CSS, we create our own in alertify.less.
// see: https://github.com/alertifyjs/alertify.js/blob/v1.0.11/src/js/alertify.js#L414
var head = document.getElementsByTagName("head")[0];
var css = document.createElement("span");
css.id = "alertifyCSS";
css.setAttribute('data-but-why', 'see: common-interface.js');
head.insertBefore(css, head.firstChild);
}
define([ define([
'jquery', 'jquery',
'/customize/messages.js', '/customize/messages.js',

5
www/common/file-dialog.less
View File

@ -1,8 +1,9 @@
@import (once) '../customize/src/less2/include/colortheme-all.less'; @import (reference) '../customize/src/less2/include/colortheme-all.less';
@import '../customize/src/less2/include/modal.less'; @import (reference) '../customize/src/less2/include/modal.less';
.fileDialog_main () { .fileDialog_main () {
#fileDialog { #fileDialog {
.modal_main();
display: none; display: none;
.cp-modal { .cp-modal {
.fileContainer { .fileContainer {

1
www/common/sframe-app-framework.js
View File

@ -18,7 +18,6 @@ define([
'/bower_components/file-saver/FileSaver.min.js', '/bower_components/file-saver/FileSaver.min.js',
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'less!/customize/src/less2/main.less',
], function ( ], function (
$, $,
Hyperjson, Hyperjson,

18
www/contacts/app-contacts.less
View File

@ -1,16 +1,14 @@
@import (once) "../../customize/src/less2/include/browser.less"; @import (reference) '../../customize/src/less2/include/avatar.less';
@import (once) "../../customize/src/less2/include/markdown.less"; @import (reference) '../../customize/src/less2/include/framework.less';
@import (once) '../../customize/src/less2/include/avatar.less';
@import (once) '../../customize/src/less2/include/framework.less';
.framework_min_main(
@bg-color: @colortheme_friends-bg,
@warn-color: @colortheme_friends-warn,
@color: @colortheme_friends-color
);
// body // body
&.cp-app-contacts { &.cp-app-contacts {
.framework_min_main(
@bg-color: @colortheme_friends-bg,
@warn-color: @colortheme_friends-warn,
@color: @colortheme_friends-color
);
@keyframes example { @keyframes example {
0% { 0% {
background: rgba(0,0,0,0.1); background: rgba(0,0,0,0.1);

2
www/contacts/inner.js
View File

@ -12,7 +12,7 @@ define([
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'less!/customize/src/less2/main.less', 'less!/contacts/app-contacts.less',
], function ( ], function (
$, $,
Crypto, Crypto,

13
www/debug/app-debug.less
View File

@ -1,14 +1,11 @@
@import (once) "../../customize/src/less2/include/browser.less"; @import (reference) '../../customize/src/less2/include/tokenfield.less';
@import (once) "../../customize/src/less2/include/markdown.less"; @import (reference) '../../customize/src/less2/include/framework.less';
@import (once) '../../customize/src/less2/include/tools.less';
@import (once) '../../customize/src/less2/include/tokenfield.less';
@import (once) '../../customize/src/less2/include/framework.less';
.tokenfield_main();
.framework_min_main();
// body // body
&.cp-app-debug { &.cp-app-debug {
.tokenfield_main();
.framework_min_main();
display: flex; display: flex;
flex-flow: column; flex-flow: column;
height: 100%; height: 100%;

2
www/debug/inner.js
View File

@ -16,7 +16,7 @@ define([
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'less!/customize/src/less2/main.less', 'less!/debug/app-debug.less',
], function ( ], function (
$, $,
Crypto, Crypto,

138
www/drive/app-drive.less
View File

@ -1,46 +1,46 @@
@import (once) "../../customize/src/less2/include/browser.less"; @import (reference) "../../customize/src/less2/include/browser.less";
@import (once) "../../customize/src/less2/include/markdown.less"; @import (reference) '../../customize/src/less2/include/leftside-menu.less';
@import (once) '../../customize/src/less2/include/leftside-menu.less'; @import (reference) "../../customize/src/less2/include/tools.less";
@import (once) "../../customize/src/less2/include/tools.less"; @import (reference) "../../customize/src/less2/include/limit-bar.less";
@import (once) "../../customize/src/less2/include/limit-bar.less"; @import (reference) "../../customize/src/less2/include/tokenfield.less";
@import (once) "../../customize/src/less2/include/tokenfield.less"; @import (reference) '../../customize/src/less2/include/framework.less';
@import (once) '../../customize/src/less2/include/framework.less';
.framework_min_main( &.cp-app-drive {
.framework_min_main(
@bg-color: @colortheme_drive-bg, @bg-color: @colortheme_drive-bg,
@warn-color: @colortheme_drive-warn, @warn-color: @colortheme_drive-warn,
@color: @colortheme_drive-color @color: @colortheme_drive-color
); );
.limit-bar_main(); .limit-bar_main();
.tokenfield_main(); .tokenfield_main();
@drive_hover: #eee; @drive_hover: #eee;
@drive_hover-light: lighten(@drive_hover, 20%); @drive_hover-light: lighten(@drive_hover, 20%);
@drive_info-box-bg: #d2e1f2; @drive_info-box-bg: #d2e1f2;
@drive_info-box-border: #bbb; @drive_info-box-border: #bbb;
@drive_table-header-fg: #555; @drive_table-header-fg: #555;
@drive_table-header-bg: #e8e8e8; @drive_table-header-bg: #e8e8e8;
@drive_mobile-tree-border-col: #ccc; @drive_mobile-tree-border-col: #ccc;
@drive_content-fg: @colortheme_sidebar-right-fg; @drive_content-fg: @colortheme_sidebar-right-fg;
@drive_content-bg: @colortheme_sidebar-right-bg; @drive_content-bg: @colortheme_sidebar-right-bg;
@drive_content-bg-ro: darken(@drive_content-bg, 10%); @drive_content-bg-ro: darken(@drive_content-bg, 10%);
/* PAGE */ /* PAGE */
display: flex; display: flex;
flex-flow: column; flex-flow: column;
max-height: 100%; max-height: 100%;
min-height: auto; min-height: auto;
.cp-unselectable { .cp-unselectable {
.tools_unselectable(); .tools_unselectable();
} }
/* local mixins */ /* local mixins */
.drive_fileIcon { .drive_fileIcon {
li { li {
display: inline-block; display: inline-block;
margin: 10px 10px; margin: 10px 10px;
@ -94,14 +94,14 @@ min-height: auto;
} }
} }
} }
} }
img.cp-app-drive-icon { img.cp-app-drive-icon {
max-width: 20px; max-width: 20px;
max-height: 16px; max-height: 16px;
} }
.cp-app-drive-container { .cp-app-drive-container {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
width: 100%; width: 100%;
@ -125,30 +125,30 @@ img.cp-app-drive-icon {
} }
} }
} }
} }
div:focus { div:focus {
outline: none; outline: none;
} }
.fa { .fa {
font-family: FontAwesome; font-family: FontAwesome;
} }
ul { ul {
list-style: none; list-style: none;
padding-left: 0px; // Remove the default padding padding-left: 0px; // Remove the default padding
} }
li { li {
padding: 0px 5px; padding: 0px 5px;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.cp-app-drive-context { .cp-app-drive-context {
display: none; display: none;
position: absolute; position: absolute;
z-index: 500; z-index: 500;
@ -159,23 +159,23 @@ li {
cursor: pointer; cursor: pointer;
} }
} }
} }
.cp-app-drive-element-droppable { .cp-app-drive-element-droppable {
background-color: #FE9A2E; background-color: #FE9A2E;
color: #222; color: #222;
} }
.cp-app-drive-element-selected { .cp-app-drive-element-selected {
background: #666 !important; background: #666 !important;
color: #eee; color: #eee;
margin: -1px; margin: -1px;
.fa-minus-square-o, .fa-plus-square-o { .fa-minus-square-o, .fa-plus-square-o {
color: @colortheme_sidebar-left-fg; color: @colortheme_sidebar-left-fg;
} }
} }
.cp-app-drive-element-selected-tmp { .cp-app-drive-element-selected-tmp {
border: 1px dotted #bbb; border: 1px dotted #bbb;
background: #AAA; background: #AAA;
color: #ddd; color: #ddd;
@ -183,19 +183,19 @@ li {
.fa-minus-square-o, .fa-plus-square-o { .fa-minus-square-o, .fa-plus-square-o {
color: @colortheme_sidebar-left-fg; color: @colortheme_sidebar-left-fg;
} }
} }
span { span {
&.fa-folder, &.fa-folder-open { &.fa-folder, &.fa-folder-open {
//color: #FEDE8B; //color: #FEDE8B;
//text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; //text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
} }
} }
/* TREE */ /* TREE */
#cp-app-drive-tree { #cp-app-drive-tree {
font-size: @colortheme_app-font-size; font-size: @colortheme_app-font-size;
//border-right: 1px solid #ccc; //border-right: 1px solid #ccc;
box-sizing: border-box; box-sizing: border-box;
@ -391,18 +391,18 @@ span {
} }
} }
} }
} }
/* CONTENT */ /* CONTENT */
#cp-app-drive-content-container { #cp-app-drive-content-container {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
flex: 1; flex: 1;
// Needed to avoid the folder's path to overflows // Needed to avoid the folder's path to overflows
// https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout // https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout
min-width: 0; min-width: 0;
} }
#cp-app-drive-content { #cp-app-drive-content {
box-sizing: border-box; box-sizing: border-box;
background: @drive_content-bg; background: @drive_content-bg;
color: @drive_content-fg; color: @drive_content-fg;
@ -654,14 +654,14 @@ span {
} }
} }
} }
} }
#cp-app-drive-content-folder { #cp-app-drive-content-folder {
padding-right: 10px; padding-right: 10px;
flex: 1; flex: 1;
} }
#cp-app-drive-new-ghost-dialog.cp-modal-container { #cp-app-drive-new-ghost-dialog.cp-modal-container {
.drive_fileIcon; .drive_fileIcon;
li:not(.cp-app-drive-element-selected):hover { li:not(.cp-app-drive-element-selected):hover {
@ -715,12 +715,12 @@ span {
} }
} }
} }
} }
/* Toolbar */ /* Toolbar */
#cp-app-drive-toolbar { #cp-app-drive-toolbar {
background: lighten(@colortheme_drive-bg, 8%); background: lighten(@colortheme_drive-bg, 8%);
color: @colortheme_drive-color; color: @colortheme_drive-color;
//height: 30px; //height: 30px;
@ -864,7 +864,5 @@ span {
} }
} }
} }
}
} }

2
www/drive/inner.js
View File

@ -19,7 +19,7 @@ define([
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'less!/customize/src/less2/main.less', 'less!/drive/app-drive.less',
], function ( ], function (
$, $,
Toolbar, Toolbar,

79
www/file/app-file.less
View File

@ -1,60 +1,60 @@
@import (once) "../../customize/src/less2/include/browser.less"; @import (reference) '../../customize/src/less2/include/tokenfield.less';
@import (once) "../../customize/src/less2/include/markdown.less"; @import (reference) '../../customize/src/less2/include/framework.less';
@import (once) '../../customize/src/less2/include/tokenfield.less';
@import (once) '../../customize/src/less2/include/framework.less';
.framework_min_main( &.cp-app-file {
.framework_min_main(
@bg-color: @colortheme_file-bg, @bg-color: @colortheme_file-bg,
@warn-color: @colortheme_file-warn, @warn-color: @colortheme_file-warn,
@color: @colortheme_file-color @color: @colortheme_file-color
); );
.tokenfield_main(); .tokenfield_main();
@button-border: 2px; @button-border: 2px;
// body // body
display: flex; display: flex;
flex-flow: column; flex-flow: column;
#cp-app-file-content { #cp-app-file-content {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-flow: column; flex-flow: column;
min-height: 0; min-height: 0;
} }
#cp-app-file-content.ready { #cp-app-file-content.ready {
//background: url('/customize/bg3.jpg') no-repeat center center; //background: url('/customize/bg3.jpg') no-repeat center center;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
#cp-app-file-upfile, #cp-app-file-dlfile { #cp-app-file-upfile, #cp-app-file-dlfile {
display: block; display: block;
height: 100%; height: 100%;
width: 100%; width: 100%;
border: @button-border solid black; border: @button-border solid black;
} }
.cp-app-file-input { .cp-app-file-input {
width: 0.1px; width: 0.1px;
height: 0.1px; height: 0.1px;
opacity: 0; opacity: 0;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
z-index: -1; z-index: -1;
} }
media-tag { media-tag {
img { img {
max-width: 100%; max-width: 100%;
max-height: ~"calc(100vh - 96px)"; max-height: ~"calc(100vh - 96px)";
} }
} }
#cp-app-file-upload-form, #cp-app-file-download-form { #cp-app-file-upload-form, #cp-app-file-download-form {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
@ -75,8 +75,8 @@ media-tag {
height: 50vh; height: 50vh;
box-sizing: border-box; box-sizing: border-box;
} }
} }
#cp-app-file-download-form { #cp-app-file-download-form {
label { label {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -90,29 +90,29 @@ media-tag {
line-height: 1.5em; line-height: 1.5em;
} }
} }
} }
.cp-app-file-hovering { .cp-app-file-hovering {
background-color: rgba(255, 0, 115, 0.5) !important; background-color: rgba(255, 0, 115, 0.5) !important;
} }
.cp-app-file-block { .cp-app-file-block {
display: block; display: block;
} }
.cp-app-file-hidden { .cp-app-file-hidden {
display: none; display: none;
} }
.cp-app-file-input + label { .cp-app-file-input + label {
//border: 2px solid black; //border: 2px solid black;
//background-color: rgba(50, 50, 50, .10); //background-color: rgba(50, 50, 50, .10);
display: block; display: block;
} }
.cp-app-file-input:focus + label, .cp-app-file-input:focus + label,
.cp-app-file-input + label:hover { .cp-app-file-input + label:hover {
//background-color: rgba(50, 50, 50, 0.30); //background-color: rgba(50, 50, 50, 0.30);
} }
#cp-app-file-dlprogress { #cp-app-file-dlprogress {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -126,9 +126,9 @@ media-tag {
background-color: rgba(255, 0, 115, 0.75); background-color: rgba(255, 0, 115, 0.75);
z-index: 10000; z-index: 10000;
display: block; display: block;
} }
#cp-app-file-download-view { #cp-app-file-download-view {
flex: 1; flex: 1;
display: flex; display: flex;
min-height: 0; min-height: 0;
@ -148,4 +148,5 @@ media-tag {
} }
} }
}
} }

2
www/file/inner.js
View File

@ -17,7 +17,7 @@ define([
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'less!/customize/src/less2/main.less', 'less!/file/app-file.less',
], function ( ], function (
$, $,

34
www/filepicker/app-filepicker.less
View File

@ -1,20 +1,22 @@
@import (once) '../../customize/src/less2/include/colortheme-all.less'; @import (reference) '../../customize/src/less2/include/colortheme-all.less';
@import (once) '../../customize/src/less2/include/modal.less'; @import (reference) '../../customize/src/less2/include/modal.less';
@import (once) '../../customize/src/less2/include/icon-colors.less'; @import (reference) '../../customize/src/less2/include/icon-colors.less';
@import (once) '../../customize/src/less2/include/fileupload.less'; @import (reference) '../../customize/src/less2/include/fileupload.less';
@import (once) '../../customize/src/less2/include/alertify.less'; @import (reference) '../../customize/src/less2/include/alertify.less';
@import (once) '../../customize/src/less2/include/tippy.less'; @import (reference) '../../customize/src/less2/include/tippy.less';
@import (once) '../../customize/src/less2/include/checkmark.less'; @import (reference) '../../customize/src/less2/include/checkmark.less';
@import (once) '../../customize/src/less2/include/password-input.less'; @import (reference) '../../customize/src/less2/include/password-input.less';
.iconColors_main(); &.cp-app-filepicker {
.fileupload_main(); .iconColors_main();
.alertify_main(); .fileupload_main();
.tippy_main(); .alertify_main();
.checkmark_main(20px); .tippy_main();
.password_main(); .checkmark_main(20px);
.password_main();
.modal_main();
#cp-filepicker-dialog { #cp-filepicker-dialog {
display: none; display: none;
.cp-modal { .cp-modal {
.cp-filepicker-content { .cp-filepicker-content {
@ -79,5 +81,5 @@
} }
} }
} }
}
} }

2
www/filepicker/inner.js
View File

@ -12,7 +12,7 @@ define([
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'less!/customize/src/less2/main.less', 'less!/filepicker/app-filepicker.less',
], function ( ], function (
$, $,
Crypto, Crypto,

16
www/kanban/app-kanban.less
View File

@ -1,13 +1,15 @@
@import (once) "../../customize/src/less2/include/browser.less"; @import (reference) "../../customize/src/less2/include/browser.less";
@import (once) "../../customize/src/less2/include/framework.less"; @import (reference) "../../customize/src/less2/include/framework.less";
@import (once) "../../customize/src/less2/include/tools.less"; @import (reference) "../../customize/src/less2/include/tools.less";
.framework_main( @bg-color: @colortheme_kanban-bg,
@warn-color: @colortheme_kanban-warn,
@color: @colortheme_kanban-color);
// body // body
&.cp-app-kanban { &.cp-app-kanban {
.framework_main(
@bg-color: @colortheme_kanban-bg,
@warn-color: @colortheme_kanban-warn,
@color: @colortheme_kanban-color
);
display: flex; display: flex;
flex-flow: column; flex-flow: column;
max-height: 100%; max-height: 100%;

2
www/kanban/inner.js
View File

@ -11,6 +11,8 @@ define([
'/customize/messages.js', '/customize/messages.js',
'/kanban/jkanban.js', '/kanban/jkanban.js',
'css!/kanban/jkanban.css', 'css!/kanban/jkanban.css',
'less!/kanban/app-kanban.less'
], function ( ], function (
$, $,
Sortify, Sortify,

20
www/pad/app-pad.less
View File

@ -1,15 +1,12 @@
@import (once) "../../customize/src/less2/include/framework.less"; @import (reference) "../../customize/src/less2/include/framework.less";
.framework_main( body.cp-app-pad {
.framework_main(
@bg-color: @colortheme_pad-bg, @bg-color: @colortheme_pad-bg,
@warn-color: @colortheme_pad-warn, @warn-color: @colortheme_pad-warn,
@color: @colortheme_pad-color @color: @colortheme_pad-color
); );
.alertify_main();
// body
&.cp-app-pad {
.tokenfield_main();
#cke_1_top { #cke_1_top {
overflow: visible; overflow: visible;
padding: 0px; padding: 0px;
@ -46,17 +43,16 @@
} }
} }
} .cke_wysiwyg_frame {
.cke_wysiwyg_frame {
min-width: 60%; min-width: 60%;
} }
@media print { @media print {
#cke_1_top { #cke_1_top {
display:none !important; display:none !important;
} }
&.cp-app-pad .cp-toolbar-userlist-drawer { &.cp-app-pad .cp-toolbar-userlist-drawer {
display:none; display:none;
} }
}
} }

2
www/pad/inner.js
View File

@ -37,7 +37,7 @@ define([
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'less!/customize/src/less2/main.less', 'less!/pad/app-pad.less'
], function ( ], function (
$, $,
Hyperjson, Hyperjson,

148
www/poll/app-poll.less
View File

@ -1,52 +1,51 @@
@import (once) "../../customize/src/less2/include/browser.less"; @import (reference) '../../customize/src/less2/include/tools.less';
@import (once) "../../customize/src/less2/include/markdown.less"; @import (reference) '../../customize/src/less2/include/avatar.less';
@import (once) '../../customize/src/less2/include/tools.less'; @import (reference) "../../customize/src/less2/include/framework.less";
@import (once) '../../customize/src/less2/include/avatar.less';
@import (once) "../../customize/src/less2/include/framework.less";
&.cp-app-poll {
.framework_main( .framework_main(
@bg-color: @colortheme_poll-bg, @bg-color: @colortheme_poll-bg,
@warn-color: @colortheme_poll-warn, @warn-color: @colortheme_poll-warn,
@color: @colortheme_poll-color @color: @colortheme_poll-color
); );
@poll-fore: #555; @poll-fore: #555;
@poll-th-bg: @colortheme_poll-th-bg; @poll-th-bg: @colortheme_poll-th-bg;
@poll-th-fg: @colortheme_poll-th-fg; @poll-th-fg: @colortheme_poll-th-fg;
@poll-th-user-bg: darken(@poll-th-bg, 10%); @poll-th-user-bg: darken(@poll-th-bg, 10%);
@poll-editing: lighten(@poll-th-bg, 10%); @poll-editing: lighten(@poll-th-bg, 10%);
@poll-winner: darken(@poll-th-bg, 15%); @poll-winner: darken(@poll-th-bg, 15%);
@poll-highlighted: lighten(@poll-th-bg, 15%); @poll-highlighted: lighten(@poll-th-bg, 15%);
@poll-td-bg: @poll-th-bg; @poll-td-bg: @poll-th-bg;
@poll-td-fg: @poll-th-fg; @poll-td-fg: @poll-th-fg;
@poll-help-bg: @colortheme_poll-help-bg; @poll-help-bg: @colortheme_poll-help-bg;
@poll-uncommitted-cell: #eee; @poll-uncommitted-cell: #eee;
@poll-uncommitted-bg: #ddd; //lighten(@poll-th-bg, 50%); @poll-uncommitted-bg: #ddd; //lighten(@poll-th-bg, 50%);
@poll-uncommitted-text: black; @poll-uncommitted-text: black;
@poll-placeholder: #fff; @poll-placeholder: #fff;
@poll-border-color: #555; @poll-border-color: #555;
@poll-cover-color: #000; @poll-cover-color: #000;
@poll-fg: #000; @poll-fg: #000;
@poll-option-yellow: #ff5; @poll-option-yellow: #ff5;
@poll-option-gray: #ccc; @poll-option-gray: #ccc;
@poll-add-color: #fff; @poll-add-color: #fff;
@poll-add-bg: #777; @poll-add-bg: #777;
@poll-add-bg-alt: #444; @poll-add-bg-alt: #444;
.bottom-left(@s: 5px) { border-bottom-left-radius: @s; } .bottom-left(@s: 5px) { border-bottom-left-radius: @s; }
.top-left(@s: 5px) { border-top-left-radius: @s; } .top-left(@s: 5px) { border-top-left-radius: @s; }
display: flex; display: flex;
flex-flow: column; flex-flow: column;
overflow-x: hidden; overflow-x: hidden;
#cp-app-poll-content { #cp-app-poll-content {
display: flex; display: flex;
flex: 1; flex: 1;
min-height: 0; min-height: 0;
@ -79,39 +78,39 @@ overflow-x: hidden;
} }
} }
} }
} }
input[type="text"], textarea { input[type="text"], textarea {
background-color: white; background-color: white;
color: black; color: black;
border: 0; border: 0;
} }
input[type="text"][disabled], textarea[disabled] { input[type="text"][disabled], textarea[disabled] {
background-color: transparent; background-color: transparent;
border: 0px; border: 0px;
} }
// The placeholder color only seems to effect Safari when not set // The placeholder color only seems to effect Safari when not set
input[type="text"][disabled]::placeholder { input[type="text"][disabled]::placeholder {
color: @poll-placeholder; color: @poll-placeholder;
opacity: 1; opacity: 1;
} }
table#cp-app-poll-table { table#cp-app-poll-table {
margin: 0px; margin: 0px;
overflow: hidden; overflow: hidden;
} }
#cp-app-poll-table-container { #cp-app-poll-table-container {
position: relative; position: relative;
margin: 20px; margin: 20px;
} }
#cp-app-poll-table-container button { #cp-app-poll-table-container button {
border-radius: 0; border-radius: 0;
border: 0; border: 0;
} }
#cp-app-poll-create-user { #cp-app-poll-create-user {
display: inline-flex; display: inline-flex;
height: 20px; height: 20px;
padding: 0 5px; padding: 0 5px;
@ -123,8 +122,8 @@ table#cp-app-poll-table {
&:hover { &:hover {
background: @poll-add-bg-alt; background: @poll-add-bg-alt;
} }
} }
#cp-app-poll-create-option { #cp-app-poll-create-option {
order: 3; order: 3;
display: inline-flex; display: inline-flex;
width: 46px; width: 46px;
@ -136,21 +135,21 @@ table#cp-app-poll-table {
&:hover { &:hover {
background: @poll-add-bg-alt; background: @poll-add-bg-alt;
} }
} }
#cp-app-poll-table-scroll { #cp-app-poll-table-scroll {
overflow-y: hidden; overflow-y: hidden;
overflow-x: auto; overflow-x: auto;
margin-left: 25%; margin-left: 25%;
max-width: ~"calc(75% - 100px - 100px)"; max-width: ~"calc(75% - 100px - 100px)";
width: auto; width: auto;
display: inline-block; display: inline-block;
} }
.cp-markdown-toolbar { .cp-markdown-toolbar {
margin: auto; margin: auto;
min-width: 80%; min-width: 80%;
width: 80%; width: 80%;
} }
#cp-app-poll-description { #cp-app-poll-description {
&~ .CodeMirror { &~ .CodeMirror {
margin: auto; margin: auto;
min-width: 80%; min-width: 80%;
@ -162,8 +161,8 @@ table#cp-app-poll-table {
color: #777; color: #777;
} }
} }
} }
#cp-app-poll-description-published { #cp-app-poll-description-published {
display: none; display: none;
padding: 15px; padding: 15px;
margin: auto; margin: auto;
@ -180,8 +179,8 @@ table#cp-app-poll-table {
max-width: 100%; max-width: 100%;
max-height: 20em; max-height: 20em;
} }
} }
div.cp-app-poll-published { div.cp-app-poll-published {
div.cp-app-poll-realtime { div.cp-app-poll-realtime {
#cp-app-poll-description { #cp-app-poll-description {
display: none; display: none;
@ -202,23 +201,23 @@ div.cp-app-poll-published {
display: block; display: block;
} }
} }
} }
#cp-app-poll-help { #cp-app-poll-help {
width: 100%; width: 100%;
margin: auto; margin: auto;
padding: 20px 10%; padding: 20px 10%;
background: @poll-help-bg; background: @poll-help-bg;
} }
// from cryptpad.less // from cryptpad.less
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
margin: 20px; margin: 20px;
} }
tbody { tbody {
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
@ -236,9 +235,9 @@ tbody {
border-right: none; border-right: none;
} }
} }
} }
div.cp-app-poll-realtime { div.cp-app-poll-realtime {
display: block; display: block;
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
@ -661,12 +660,13 @@ div.cp-app-poll-realtime {
min-width: 90%; min-width: 90%;
} }
} }
} }
.btn { .btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
}

2
www/poll/inner.js
View File

@ -26,7 +26,7 @@ define([
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'less!/customize/src/less2/main.less', 'less!/poll/app-poll.less',
], function ( ], function (
$, $,
Toolbar, Toolbar,

16
www/profile/app-profile.less
View File

@ -1,19 +1,15 @@
@import (once) "../../customize/src/less2/include/browser.less"; @import (reference) '../../customize/src/less2/include/framework.less';
@import (once) "../../customize/src/less2/include/markdown.less"; @import (reference) '../../customize/src/less2/include/sidebar-layout.less';
@import (once) '../../customize/src/less2/include/framework.less';
@import (once) '../../customize/src/less2/include/avatar.less'; &.cp-app-profile {
@import (once) '../../customize/src/less2/include/sidebar-layout.less';
.framework_min_main( .framework_min_main(
@bg-color: @colortheme_profile-bg, @bg-color: @colortheme_profile-bg,
@warn-color: @colortheme_profile-warn, @warn-color: @colortheme_profile-warn,
@color: @colortheme_profile-color @color: @colortheme_profile-color
); );
.sidebar-layout_main(); .sidebar-layout_main();
// body
&.cp-app-profile {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
#cp-app-profile-header { #cp-app-profile-header {

2
www/profile/inner.js
View File

@ -20,7 +20,7 @@ define([
'css!/bower_components/codemirror/addon/fold/foldgutter.css', 'css!/bower_components/codemirror/addon/fold/foldgutter.css',
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'less!/customize/src/less2/main.less', 'less!/profile/app-profile.less',
'/bower_components/croppie/croppie.min.js', '/bower_components/croppie/croppie.min.js',
'css!/bower_components/croppie/croppie.css', 'css!/bower_components/croppie/croppie.css',
], function ( ], function (

23
www/settings/app-settings.less
View File

@ -1,21 +1,18 @@
@import (once) "../../customize/src/less2/include/browser.less"; @import (reference) '../../customize/src/less2/include/sidebar-layout.less';
@import (once) "../../customize/src/less2/include/markdown.less"; @import (reference) "../../customize/src/less2/include/limit-bar.less";
@import (once) '../../customize/src/less2/include/sidebar-layout.less'; @import (reference) "../../customize/src/less2/include/creation.less";
@import (once) "../../customize/src/less2/include/limit-bar.less"; @import (reference) '../../customize/src/less2/include/framework.less';
@import (once) "../../customize/src/less2/include/creation.less";
@import (once) '../../customize/src/less2/include/framework.less';
.framework_min_main( &.cp-app-settings {
.framework_min_main(
@bg-color: @colortheme_settings-bg, @bg-color: @colortheme_settings-bg,
@warn-color: @colortheme_settings-warn, @warn-color: @colortheme_settings-warn,
@color: @colortheme_settings-color @color: @colortheme_settings-color
); );
.sidebar-layout_main(); .sidebar-layout_main();
.limit-bar_main(); .limit-bar_main();
.creation_main(); .creation_main();
// body
&.cp-app-settings {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
font: @colortheme_app-font; font: @colortheme_app-font;

2
www/settings/inner.js
View File

@ -16,7 +16,7 @@ define([
'/bower_components/file-saver/FileSaver.min.js', '/bower_components/file-saver/FileSaver.min.js',
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'less!/customize/src/less2/main.less', 'less!/settings/app-settings.less',
], function ( ], function (
$, $,
Toolbar, Toolbar,

109
www/slide/app-slide.less
View File

@ -1,37 +1,39 @@
@import (once) "../../customize/src/less2/include/browser.less"; @import (reference) "../../customize/src/less2/include/markdown.less";
@import (once) "../../customize/src/less2/include/markdown.less"; @import (reference) "../../customize/src/less2/include/mediatag.less";
@import (once) "../../customize/src/less2/include/mediatag.less"; @import (reference) "../../customize/src/less2/include/framework.less";
@import (once) "../../customize/src/less2/include/framework.less";
.mediatag_base(); &.cp-app-slide {
.framework_main(
.mediatag_base();
.framework_main(
@bg-color: @colortheme_slide-bg, @bg-color: @colortheme_slide-bg,
@warn-color: @colortheme_slide-warn, @warn-color: @colortheme_slide-warn,
@color: @colortheme_slide-color @color: @colortheme_slide-color
); );
// body // body
font-size: unset; font-size: unset;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
@slide-default-bg: #000; @slide-default-bg: #000;
.size (@n) { .size (@n) {
// font-size: @n * 1vmin; // font-size: @n * 1vmin;
// line-height: @n * 1.1vmin; // line-height: @n * 1.1vmin;
font-size: @n * 10%; font-size: @n * 10%;
// line-height: @n * 11%; // line-height: @n * 11%;
line-height: 110%; line-height: 110%;
} }
h1 { font-size: 40px; } h1 { font-size: 40px; }
h2 { font-size: 37px; } h2 { font-size: 37px; }
h3 { font-size: 34px; } h3 { font-size: 34px; }
h4 { font-size: 31px; } h4 { font-size: 31px; }
h5 { font-size: 27px; } h5 { font-size: 27px; }
h6 { font-size: 24px; } h6 { font-size: 24px; }
#cp-app-slide-editor-container { #cp-app-slide-editor-container {
display: inline-flex; display: inline-flex;
flex-flow: column; flex-flow: column;
height: 100%; height: 100%;
@ -42,27 +44,27 @@ h6 { font-size: 24px; }
overflow: hidden; overflow: hidden;
max-width: 100%; max-width: 100%;
flex: 1; flex: 1;
} }
.CodeMirror { .CodeMirror {
flex: 1; flex: 1;
width: 100%; width: 100%;
font-size: initial; font-size: initial;
} }
.CodeMirror-focused .cm-matchhighlight { .CodeMirror-focused .cm-matchhighlight {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
background-position: bottom; background-position: bottom;
background-repeat: repeat-x; background-repeat: repeat-x;
} }
#cp-app-slide-colorpicker { #cp-app-slide-colorpicker {
display: block; display: block;
} }
#cme_toolbox { #cme_toolbox {
z-index: 10000; z-index: 10000;
} }
#cp-app-slide-editor { #cp-app-slide-editor {
flex: 1; flex: 1;
display: flex; display: flex;
flex-flow: row; flex-flow: row;
@ -78,8 +80,8 @@ h6 { font-size: 24px; }
//width: 50vw; //width: 50vw;
} }
} }
} }
.cp-app-slide-shown { .cp-app-slide-shown {
.cp-app-slide-container { .cp-app-slide-container {
position: relative; position: relative;
&> media-tag { &> media-tag {
@ -100,8 +102,8 @@ h6 { font-size: 24px; }
} }
} }
} }
} }
.cp-app-slide-preview { .cp-app-slide-preview {
.cp-app-slide-viewer { .cp-app-slide-viewer {
width: 50vw; width: 50vw;
overflow: hidden; overflow: hidden;
@ -153,16 +155,16 @@ h6 { font-size: 24px; }
.CodeMirror { .CodeMirror {
flex: 1; flex: 1;
} }
} }
/* Slide position (print mode) */ /* Slide position (print mode) */
@ratio:0.9; @ratio:0.9;
@media print { @media print {
#cp-app-slide-editor-container { #cp-app-slide-editor-container {
display: none; display: none;
} }
} }
#cp-app-slide-print { #cp-app-slide-print {
position: relative; position: relative;
display: none; display: none;
font-size: @ratio*11.25vw; font-size: @ratio*11.25vw;
@ -213,10 +215,10 @@ h6 { font-size: 24px; }
height: ~"calc(100vh - 2px)"; height: ~"calc(100vh - 2px)";
} }
} }
} }
/* Slide position (present mode) */ /* Slide position (present mode) */
div#cp-app-slide-modal { div#cp-app-slide-modal {
display: none; display: none;
background-color: black; background-color: black;
color: white; color: white;
@ -317,10 +319,10 @@ div#cp-app-slide-modal {
display: none; display: none;
background-color: @slide-default-bg; background-color: @slide-default-bg;
} }
/* Slide content */ /* Slide content */
div#cp-app-slide-modal #cp-app-slide-modal-content, #cp-app-slide-print { div#cp-app-slide-modal #cp-app-slide-modal-content, #cp-app-slide-print {
.cp-app-slide-frame { .cp-app-slide-frame {
* { * {
.size(2.75); .size(2.75);
@ -398,20 +400,21 @@ div#cp-app-slide-modal #cp-app-slide-modal-content, #cp-app-slide-print {
text-align: left; text-align: left;
position: relative; position: relative;
} }
} }
.cp-app-slide-frame * { .cp-app-slide-frame * {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
} }
p { p {
padding: 0; padding: 0;
margin: 0; margin: 0;
min-height:0; min-height:0;
min-width:0; min-width:0;
} }
pre.cp-slide-css-error { pre.cp-slide-css-error {
color: white; color: white;
}
} }

2
www/slide/inner.js
View File

@ -15,7 +15,7 @@ define([
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'less!/customize/src/less2/main.less', 'less!/slide/app-slide.less',
'css!cm/lib/codemirror.css', 'css!cm/lib/codemirror.css',
'css!cm/addon/dialog/dialog.css', 'css!cm/addon/dialog/dialog.css',

13
www/todo/app-todo.less
View File

@ -1,16 +1,13 @@
@import (once) "../../customize/src/less2/include/browser.less"; @import (reference) '../../customize/src/less2/include/framework.less';
@import (once) "../../customize/src/less2/include/markdown.less";
@import (once) '../../customize/src/less2/include/avatar.less';
@import (once) '../../customize/src/less2/include/framework.less';
.framework_min_main( &.cp-app-todo {
.framework_min_main(
@bg-color: @colortheme_todo-bg, @bg-color: @colortheme_todo-bg,
@warn-color: @colortheme_todo-warn, @warn-color: @colortheme_todo-warn,
@color: @colortheme_todo-color @color: @colortheme_todo-color
); );
// body
&.cp-app-todo {
display: flex; display: flex;
flex-flow: column; flex-flow: column;

2
www/todo/inner.js
View File

@ -13,7 +13,7 @@ define([
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'less!/customize/src/less2/main.less', 'less!/todo/app-todo.less',
], function ( ], function (
$, $,
Crypto, Crypto,

14
www/whiteboard/app-whiteboard.less
View File

@ -1,16 +1,14 @@
@import (once) "../../customize/src/less2/include/browser.less"; @import (reference) '../../customize/src/less2/include/tools.less';
@import (once) "../../customize/src/less2/include/markdown.less"; @import (reference) "../../customize/src/less2/include/framework.less";
@import (once) '../../customize/src/less2/include/tools.less';
@import (once) "../../customize/src/less2/include/framework.less";
.framework_main( &.cp-app-whiteboard {
.framework_main(
@bg-color: @colortheme_whiteboard-bg, @bg-color: @colortheme_whiteboard-bg,
@warn-color: @colortheme_whiteboard-warn, @warn-color: @colortheme_whiteboard-warn,
@color: @colortheme_whiteboard-color @color: @colortheme_whiteboard-color
); );
// body
&.cp-app-whiteboard {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
height: 100%; height: 100%;

1
www/whiteboard/inner.js
View File

@ -15,6 +15,7 @@ define([
'/bower_components/chainpad/chainpad.dist.js', '/bower_components/chainpad/chainpad.dist.js',
'/bower_components/secure-fabric.js/dist/fabric.min.js', '/bower_components/secure-fabric.js/dist/fabric.min.js',
'less!/whiteboard/app-whiteboard.less'
], function ( ], function (
$, $,
Sortify, Sortify,

11
www/worker/app-worker.less
View File

@ -1,12 +1,9 @@
@import (once) "../../customize/src/less2/include/browser.less"; @import (reference) "../../customize/src/less2/include/colortheme-all.less";
@import (once) "../../customize/src/less2/include/markdown.less"; @import (reference) '../../customize/src/less2/include/framework.less';
@import (once) '../../customize/src/less2/include/avatar.less';
@import (once) '../../customize/src/less2/include/framework.less';
.framework_min_main();
// body
&.cp-app-worker { &.cp-app-worker {
.framework_min_main();
display: flex; display: flex;
flex-flow: column; flex-flow: column;

2
www/worker/inner.js
View File

@ -9,7 +9,7 @@ define([
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'less!/customize/src/less2/main.less', 'less!/worker/app-worker.less',
], function ( ], function (
$, $,
Toolbar, Toolbar,