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

refactoring of the less infrastructure

Browse Source
This commit is contained in:
Caleb James DeLisle 2018-07-14 15:15:23 +02:00
parent 507e5b18e9
commit 0d5ac05866
72 changed files with 3321 additions and 3229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,40 +0,0 @@
@import (reference) './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 (reference) "./include/app-noscroll.less";
.app-noscroll_main();
}
// Set the HTML style for printing slides
html.cp-app-print {
@import (reference) "./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"; }

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

@ -3,6 +3,9 @@
@import (reference) "./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;

7
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;
@ -19,4 +22,4 @@
border: 0; border: 0;
} }
} }
}

5
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;
@ -44,3 +48,4 @@
} }
} }
} }
}

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

@ -1,6 +1,11 @@
@import (reference) "./tools.less"; @import (reference) "./tools.less";
.avatar_main(@width) { .avatar_main(@width) {
--LessLoader_require: LessLoader_currentFile();
--avatar-width: @width;
--avatar-font-size: @width / 1.2;
}
& {
&.cp-avatar { &.cp-avatar {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -9,8 +14,8 @@
align-items: center; align-items: center;
.cp-avatar-default, media-tag { .cp-avatar-default, media-tag {
display: inline-flex; display: inline-flex;
width: @width; width: var(--avatar-width);
height: @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 +26,13 @@
.tools_unselectable(); .tools_unselectable();
background: white; background: white;
color: black; color: black;
font-size: @width/1.2; font-size: var(--avatar-font-size);
} }
media-tag { media-tag {
min-height: @width; min-height: var(--avatar-width);
min-width: @width; min-width: var(--avatar-width);
max-height: @width; max-height: var(--avatar-width);
max-width: @width; max-width: var(--avatar-width);
img { img {
min-width: 100%; min-width: 100%;
min-height: 100%; min-height: 100%;

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

@ -1,11 +1,17 @@
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
.checkmark_main(@size) { .checkmark_main(@size) {
--LessLoader_require: LessLoader_currentFile();
@width: round(@size / 8); --checkmark-size: @size;
--checkmark-width: round(@size / 8);
@dim1: round(@size / 3); @dim1: round(@size / 3);
@dim2: round(2 * @size / 3); --checkmark-dim1: round(@size / 3);
@top: round(@size / 12) - 1; --checkmark-dim2: round(2 * @size / 3);
--checkmark-top: round(@size / 12) - 1;
--checkmark-radio-size: @dim1 * 3;
}
& {
// <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 +64,8 @@
.cp-checkmark-mark { .cp-checkmark-mark {
margin-right: 10px; margin-right: 10px;
position: relative; position: relative;
height: @size; height: var(--checkmark-size);
width: @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 +74,12 @@
&:after { &:after {
content: ""; content: "";
display: none; display: none;
margin-top: @top; margin-top: var(--checkmark-top);
width: @dim1; width: var(--checkmark-dim1);
height: @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 var(--checkmark-width) var(--checkmark-width) 0;
position: absolute; position: absolute;
} }
&:focus { &:focus {
@ -129,12 +135,12 @@
} }
} }
@radio-size: @dim1 * 3;
.cp-radio-mark { .cp-radio-mark {
margin-right: 10px; margin-right: 10px;
position: relative; position: relative;
height: @radio-size; height: var(--checkmark-radio-size);
width: @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 +153,12 @@
content: ""; content: "";
border-radius: 50%; border-radius: 50%;
background: white; background: white;
width: @dim1; width: var(--checkmark-dim1);
height: @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;

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

@ -1,3 +1,4 @@
@import (reference) "./browser.less";
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
@import (reference) "./tools.less"; @import (reference) "./tools.less";
@import (reference) './icon-colors.less'; @import (reference) './icon-colors.less';
@ -7,6 +8,13 @@
@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();
--creation-color: @color;
--creation-bg-color: @bg-color;
// --creation-warn-color: @warn-color; // unused
}
& {
@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;
@ -259,10 +267,10 @@
border: 1px solid transparent; border: 1px solid transparent;
&.cp-creation-template-selected { &.cp-creation-template-selected {
color: @color !important; color: var(--creation-color) !important;
background-color: @bg-color !important; background-color: var(--creation-bg-color) !important;
.fa { .fa {
color: @color; color: var(--creation-color);
} }
} }
@ -293,7 +301,7 @@
max-width: 100%; max-width: 100%;
} }
.fa { .fa {
color: @bg-color; color: var(--creation-bg-color);
cursor: pointer; cursor: pointer;
width: 100px; width: 100px;
height: 100px; height: 100px;

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

@ -3,6 +3,9 @@
/* 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;

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

@ -2,8 +2,11 @@
@import (reference) './modal.less'; @import (reference) './modal.less';
.fileupload_main () { .fileupload_main () {
--LessLoader_require: LessLoader_currentFile();
.modal_main();
}
& {
/* Upload status table */ /* Upload status table */
modal_main();
#cp-fileupload { #cp-fileupload {
.modal_base(); .modal_base();
position: absolute; position: absolute;
@ -55,4 +58,3 @@
} }
} }
} }

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

@ -1,9 +1,11 @@
.font_neuropolitical () { .font_main () {
--LessLoader_require: LessLoader_currentFile();
}
// Fonts need to go on the global scope
@font-face { @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';
}

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

@ -7,15 +7,27 @@
@import (reference) './tippy.less'; @import (reference) './tippy.less';
@import (reference) "./checkmark.less"; @import (reference) "./checkmark.less";
@import (reference) "./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);
@ -26,13 +38,22 @@
@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 +67,6 @@
font: @colortheme_app-font; font: @colortheme_app-font;
} }
& {
body.cp-readonly .cp-hidden-if-readonly { display: none !important; }
}

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

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

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

@ -1,5 +1,8 @@
@import (reference) "./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 @@
} }
} }
} }

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

@ -1,10 +1,25 @@
@import (reference) "./colortheme-all.less"; @import (reference) "./colortheme-all.less";
@import (reference) "./font.less";
.infopages_link () {
text-decoration: none;
color: #0275D8;
cursor: pointer;
display: inline-flex;
&:hover {
transform: scale(1.05);
}
}
.infopages_main () {
--LessLoader_require: LessLoader_currentFile();
}
body {
.font_main();
@infopages_infobar-height: 64px; @infopages_infobar-height: 64px;
@infopages_padding: 32px; @infopages_padding: 32px;
// Basic setup for info pages, this should be used at the global level // Basic setup for info pages, this should be used at the global level
.infopages_main () {
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 () {
text-decoration: none;
color: #0275D8;
cursor: pointer;
display: inline-flex;
&:hover {
transform: scale(1.05);
}
}
// Apply this to the top bar div // 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,7 +152,6 @@
margin-right: 0.5em; margin-right: 0.5em;
} }
} }
}
// navigation top bar // navigation top bar
.navbar { .navbar {
@ -217,3 +219,4 @@
font-size: 1.2em; font-size: 1.2em;
color: #1E1F1F; color: #1E1F1F;
} }
}

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

@ -1,6 +1,9 @@
@import (reference) "./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 (reference) "./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

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

@ -18,6 +18,9 @@
} }
.modal_main() { .modal_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
.cp-modal-container { .cp-modal-container {
display: none; display: none;

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;

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

@ -1,18 +1,22 @@
@import (reference) "/customize/src/less2/include/colortheme-all.less"; @import (reference) "/customize/src/less2/include/colortheme-all.less";
@import (reference) "/customize/src/less2/include/leftside-menu.less"; @import (reference) "/customize/src/less2/include/leftside-menu.less";
@sidebar_button-width: 400px;
.sidebar-layout_main() {
--LessLoader_require: LessLoader_currentFile();
// This is way too broad to put in the global scope
input[type="text"], input[type="password"] {
padding-left: 10px;
}
}
& {
@leftside-bg: @colortheme_sidebar-left-bg; @leftside-bg: @colortheme_sidebar-left-bg;
@leftside-color: @colortheme_sidebar-left-fg; @leftside-color: @colortheme_sidebar-left-fg;
@rightside-color: @colortheme_sidebar-right-fg; @rightside-color: @colortheme_sidebar-right-fg;
@description-color: @colortheme_sidebar-description; @description-color: @colortheme_sidebar-description;
@sidebar_button-width: 400px;
.sidebar-layout_main() {
input[type="text"], input[type="password"] {
padding-left: 10px;
}
#cp-sidebarlayout-container { #cp-sidebarlayout-container {
font-size: 16px; font-size: 16px;
display: flex; display: flex;

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

@ -1,6 +1,9 @@
@import (reference) './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;

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

@ -1,6 +1,9 @@
@import (reference) "./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
} }

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

@ -1,6 +1,9 @@
@import (reference) "./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;

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

@ -8,7 +8,6 @@
@import (reference) "./tools.less"; @import (reference) "./tools.less";
@import (reference) "./icons.less"; @import (reference) "./icons.less";
@import (reference) "./modal.less"; @import (reference) "./modal.less";
@import (reference) "./markdown-toolbar.less";
@import (reference) "./help.less"; @import (reference) "./help.less";
.toolbar_main ( .toolbar_main (
@ -17,7 +16,37 @@
@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-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;
@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_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,13 +55,24 @@
// 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: var(--toolbar-bg-color-l20);
.modal_main(); display: none;
button {
height: @toolbar_line-height !important;
outline: 0;
color: var(--toolbar-color);
.toolbar_button;
font: normal normal normal 14px/1 FontAwesome;
&:hover {
background-color: var(--toolbar-bg-color-l8);
}
&.cp-markdown-help { float: right; }
}
}
.cp-toolbar-container { .cp-toolbar-container {
display: flex; display: flex;
@ -66,7 +106,7 @@
} }
.cp-toolbar-userlist-drawer { .cp-toolbar-userlist-drawer {
background-color: @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;
@ -254,31 +294,31 @@
} }
.cp-toolbar-userlist-drawer { .cp-toolbar-userlist-drawer {
background-color: @bg-color; background-color: var(--toolbar-bg-color);
color: @color; color: var(--toolbar-color);
.cp-toolbar-userlist-drawer-close { .cp-toolbar-userlist-drawer-close {
color: @color; color: var(--toolbar-color);
} }
h2 { h2 {
background-color: darken(@bg-color, 10%); background-color: var(--toolbar-bg-color-d10);
color: @color; color: var(--toolbar-color);
} }
.cp-toolbar-userlist-name-input { .cp-toolbar-userlist-name-input {
background-color: darken(@bg-color, 10%); background-color: var(--toolbar-bg-color-d10);
color: @color; color: var(--toolbar-color);
} }
.cp-toolbar-userlist-name-edit { .cp-toolbar-userlist-name-edit {
color: contrast(@color, color: contrast(var(--toolbar-color),
lighten(@color, 20%), var(--toolbar-color-l20),
darken(@color, 20%)); var(--toolbar-color-d20));
background: transparent; background: transparent;
&:hover { &:hover {
color: @color; color: var(--toolbar-color);
} }
} }
.cp-toolbar-userlist-friend { .cp-toolbar-userlist-friend {
&:hover { &:hover {
color: darken(@color, 15%); color: var(--toolbar-color-d15);
} }
} }
} }
@ -298,8 +338,8 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
background-color: @bg-color; background-color: var(--toolbar-bg-color);
color: @color; color: var(--toolbar-color);
.fa { .fa {
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
@ -517,42 +557,42 @@
.cp-toolbar-spinner { .cp-toolbar-spinner {
font-size: @colortheme_app-font-size; font-size: @colortheme_app-font-size;
color: @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 var(--toolbar-color), 0 1px var(--toolbar-color), 1px 0 var(--toolbar-color), 0 -1px var(--toolbar-color);
color: @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: 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: 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 var(--toolbar-bg-color-d15);
background: darken(@bg-color, 10%); background: var(--toolbar-bg-color-d10);
transition: all 0.15s; transition: all 0.15s;
color: @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 var(--toolbar-bg-color-d15);
background: darken(@bg-color, 10%); background: var(--toolbar-bg-color-d10);
color: @color; color: var(--toolbar-color);
&:hover { &:hover {
background: darken(@bg-color, 5%); background: var(--toolbar-bg-color-d5);
} }
} }
input { input {
border: 1px solid darken(@bg-color, 15%); border: 1px solid var(--toolbar-bg-color-d15);
background: darken(@bg-color, 10%); background: var(--toolbar-bg-color-d10);
color: @color; color: var(--toolbar-color);
} }
.cp-dropdown-content.cp-dropdown-left a { .cp-dropdown-content.cp-dropdown-left a {
color: black; color: black;
@ -578,7 +618,7 @@
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: var(--toolbar-warn-color);
.cp-pnp-msg { .cp-pnp-msg {
padding-left: 5px; padding-left: 5px;
font-family: @colortheme_font; font-family: @colortheme_font;
@ -587,7 +627,7 @@
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: var(--toolbar-warn-color);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -881,7 +921,7 @@
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 @media screen and (max-width: var(--toolbar-barWidth)) { // 450px
flex-wrap: wrap; flex-wrap: wrap;
height: auto; height: auto;
width: 100%; width: 100%;
@ -1004,6 +1044,4 @@
} }
} }
} }
};
}

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

@ -1,44 +0,0 @@
@import (reference) './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 (reference) "./include/app-noscroll.less";
.app-noscroll_main();
}
// Set the HTML style for printing slides
html.cp-app-print {
@import (reference) "./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"; }

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

@ -1,9 +1,8 @@
@import (reference) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
@import (reference) "../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 {

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

@ -1,8 +1,9 @@
@import (once) "../include/infopages.less"; @import (reference) "../include/infopages.less";
@import (reference) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
&.cp-page-about {
.infopages_main(); .infopages_main();
.infopages_topbar();
#cp-main { #cp-main {
background: #fff; background: #fff;
} }
@ -113,3 +114,4 @@
.cp-margin-bot { .cp-margin-bot {
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
}

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

@ -1,8 +1,8 @@
@import (once) "../include/infopages.less"; @import (reference) "../include/infopages.less";
@import (reference) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
&.cp-page-contact {
.infopages_main(); .infopages_main();
.infopages_topbar();
.fa { .fa {
padding-right: 0.25em; padding-right: 0.25em;
@ -88,3 +88,4 @@
color: #fff; color: #fff;
} }
} }
}

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

@ -1,8 +1,9 @@
@import (once) "../include/infopages.less"; @import (reference) "../include/infopages.less";
@import (reference) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
&.cp-page-faq {
.infopages_main(); .infopages_main();
.infopages_topbar();
#cp-main { #cp-main {
background: #fff; background: #fff;
} }
@ -81,4 +82,4 @@
} }
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
}

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

@ -1,8 +1,9 @@
@import (once) "../include/infopages.less"; @import (reference) "../include/infopages.less";
@import (reference) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
&.cp-page-features {
.infopages_main(); .infopages_main();
.infopages_topbar();
#cp-main { #cp-main {
background-color: #fff; background-color: #fff;
} }
@ -84,3 +85,4 @@
} }
} }
} }
}

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

@ -1,8 +1,8 @@
@import (once) "../include/infopages.less"; @import (reference) "../include/infopages.less";
@import (reference) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
&.cp-page-index {
.infopages_main(); .infopages_main();
.infopages_topbar();
@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);
@ -189,4 +189,4 @@ h4 {
left: 5px; left: 5px;
} }
} }
}

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

@ -1,10 +1,10 @@
@import (once) "../include/infopages.less"; @import (reference) "../include/infopages.less";
@import (reference) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
@import (reference) "../include/alertify.less"; @import (reference) "../include/alertify.less";
@import (reference) "../include/checkmark.less"; @import (reference) "../include/checkmark.less";
&.cp-page-login {
.infopages_main(); .infopages_main();
.infopages_topbar();
.alertify_main(); .alertify_main();
.checkmark_main(20px); .checkmark_main(20px);
@ -67,3 +67,4 @@
padding-top: 3em; padding-top: 3em;
min-height: 66vh; min-height: 66vh;
} }
}

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

@ -1,8 +1,9 @@
@import (once) "../include/infopages.less"; @import (reference) "../include/infopages.less";
@import (reference) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
&.cp-page-privacy {
.infopages_main(); .infopages_main();
.infopages_topbar();
#cp-main { #cp-main {
background: #fff; background: #fff;
} }
@ -46,3 +47,4 @@
color: #3F4141; color: #3F4141;
} }
} }
}

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

@ -1,10 +1,11 @@
@import (once) "../include/infopages.less"; @import (reference) "../include/infopages.less";
@import (reference) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
@import (reference) "../include/alertify.less"; @import (reference) "../include/alertify.less";
@import (reference) "../include/checkmark.less"; @import (reference) "../include/checkmark.less";
&.cp-page-register {
.infopages_main(); .infopages_main();
.infopages_topbar();
.alertify_main(); .alertify_main();
.checkmark_main(20px); .checkmark_main(20px);
@ -137,3 +138,4 @@
#cp-main { #cp-main {
background: #fff; background: #fff;
} }
}

5
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 (reference) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
&.cp-page-terms {
.infopages_main(); .infopages_main();
.infopages_topbar(); }

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

@ -1,8 +1,8 @@
@import (once) "../include/infopages.less"; @import (reference) "../include/infopages.less";
@import (reference) "../include/colortheme-all.less"; @import (reference) "../include/colortheme-all.less";
&.cp-page-what-is-cryptpad {
.infopages_main(); .infopages_main();
.infopages_topbar();
.cp-what-is { .cp-what-is {
padding-top: 3em; padding-top: 3em;
@ -41,3 +41,4 @@
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);

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

@ -2,15 +2,13 @@
@import (reference) "../../customize/src/less2/include/markdown.less"; @import (reference) "../../customize/src/less2/include/markdown.less";
@import (reference) "../../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,

37
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,19 +139,32 @@ define([
}); });
}; };
module.exports.load = function (url /*:string*/, cb /*:()=>void*/) { var loadSubmodulesAndInject = function (css, url, cb, stack) {
cacheGet(url, function (css) {
if (css) {
inject(css, url); inject(css, url);
return void cb(); 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*/) {
stack = stack || [];
if (stack.indexOf(url) > -1) { return void cb(); }
var timeout = setTimeout(function () { console.log('failed', url); }, 10000);
var done = function () { clearTimeout(timeout); cb(); };
stack.push(url);
cacheGet(url, function (css) {
if (css) { return void loadSubmodulesAndInject(css, url, done, stack); }
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);
cb();
}); });
}); });
}; };

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

@ -2,8 +2,8 @@
@import (reference) '../customize/src/less2/include/modal.less'; @import (reference) '../customize/src/less2/include/modal.less';
.fileDialog_main () { .fileDialog_main () {
.modal_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,

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

@ -1,14 +1,14 @@
@import (reference) '../../customize/src/less2/include/avatar.less'; @import (reference) '../../customize/src/less2/include/avatar.less';
@import (reference) '../../customize/src/less2/include/framework.less'; @import (reference) '../../customize/src/less2/include/framework.less';
// body
&.cp-app-contacts {
.framework_min_main( .framework_min_main(
@bg-color: @colortheme_friends-bg, @bg-color: @colortheme_friends-bg,
@warn-color: @colortheme_friends-warn, @warn-color: @colortheme_friends-warn,
@color: @colortheme_friends-color @color: @colortheme_friends-color
); );
// body
&.cp-app-contacts {
@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,

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

@ -1,11 +1,11 @@
@import (reference) '../../customize/src/less2/include/tokenfield.less'; @import (reference) '../../customize/src/less2/include/tokenfield.less';
@import (reference) '../../customize/src/less2/include/framework.less'; @import (reference) '../../customize/src/less2/include/framework.less';
// body
&.cp-app-debug {
.tokenfield_main(); .tokenfield_main();
.framework_min_main(); .framework_min_main();
// body
&.cp-app-debug {
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,

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

@ -5,6 +5,7 @@
@import (reference) "../../customize/src/less2/include/tokenfield.less"; @import (reference) "../../customize/src/less2/include/tokenfield.less";
@import (reference) '../../customize/src/less2/include/framework.less'; @import (reference) '../../customize/src/less2/include/framework.less';
&.cp-app-drive {
.framework_min_main( .framework_min_main(
@bg-color: @colortheme_drive-bg, @bg-color: @colortheme_drive-bg,
@warn-color: @colortheme_drive-warn, @warn-color: @colortheme_drive-warn,
@ -864,6 +865,4 @@ 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,

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

@ -1,6 +1,8 @@
@import (reference) '../../customize/src/less2/include/tokenfield.less'; @import (reference) '../../customize/src/less2/include/tokenfield.less';
@import (reference) '../../customize/src/less2/include/framework.less'; @import (reference) '../../customize/src/less2/include/framework.less';
&.cp-app-file {
.framework_min_main( .framework_min_main(
@bg-color: @colortheme_file-bg, @bg-color: @colortheme_file-bg,
@warn-color: @colortheme_file-warn, @warn-color: @colortheme_file-warn,
@ -147,3 +149,4 @@ 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 (
$, $,

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

@ -7,6 +7,7 @@
@import (reference) '../../customize/src/less2/include/checkmark.less'; @import (reference) '../../customize/src/less2/include/checkmark.less';
@import (reference) '../../customize/src/less2/include/password-input.less'; @import (reference) '../../customize/src/less2/include/password-input.less';
&.cp-app-filepicker {
.iconColors_main(); .iconColors_main();
.fileupload_main(); .fileupload_main();
.alertify_main(); .alertify_main();
@ -81,4 +82,4 @@
} }
} }
} }
}

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,

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

@ -2,12 +2,14 @@
@import (reference) "../../customize/src/less2/include/framework.less"; @import (reference) "../../customize/src/less2/include/framework.less";
@import (reference) "../../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,

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

@ -1,15 +1,12 @@
@import (reference) "../../customize/src/less2/include/framework.less"; @import (reference) "../../customize/src/less2/include/framework.less";
body.cp-app-pad {
.framework_main( .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,8 +43,6 @@
} }
} }
}
.cke_wysiwyg_frame { .cke_wysiwyg_frame {
min-width: 60%; min-width: 60%;
} }
@ -60,3 +55,4 @@
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,

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

@ -2,6 +2,8 @@
@import (reference) '../../customize/src/less2/include/avatar.less'; @import (reference) '../../customize/src/less2/include/avatar.less';
@import (reference) "../../customize/src/less2/include/framework.less"; @import (reference) "../../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,
@ -667,3 +669,4 @@ div.cp-app-poll-realtime {
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,

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

@ -1,6 +1,8 @@
@import (reference) '../../customize/src/less2/include/framework.less'; @import (reference) '../../customize/src/less2/include/framework.less';
@import (reference) '../../customize/src/less2/include/sidebar-layout.less'; @import (reference) '../../customize/src/less2/include/sidebar-layout.less';
&.cp-app-profile {
.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,
@ -8,8 +10,6 @@
); );
.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 (

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

@ -3,6 +3,7 @@
@import (reference) "../../customize/src/less2/include/creation.less"; @import (reference) "../../customize/src/less2/include/creation.less";
@import (reference) '../../customize/src/less2/include/framework.less'; @import (reference) '../../customize/src/less2/include/framework.less';
&.cp-app-settings {
.framework_min_main( .framework_min_main(
@bg-color: @colortheme_settings-bg, @bg-color: @colortheme_settings-bg,
@warn-color: @colortheme_settings-warn, @warn-color: @colortheme_settings-warn,
@ -12,8 +13,6 @@
.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,

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

@ -2,7 +2,10 @@
@import (reference) "../../customize/src/less2/include/mediatag.less"; @import (reference) "../../customize/src/less2/include/mediatag.less";
@import (reference) "../../customize/src/less2/include/framework.less"; @import (reference) "../../customize/src/less2/include/framework.less";
&.cp-app-slide {
.mediatag_base(); .mediatag_base();
.framework_main( .framework_main(
@bg-color: @colortheme_slide-bg, @bg-color: @colortheme_slide-bg,
@warn-color: @colortheme_slide-warn, @warn-color: @colortheme_slide-warn,
@ -414,3 +417,4 @@ p {
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',

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

@ -1,13 +1,13 @@
@import (reference) '../../customize/src/less2/include/framework.less'; @import (reference) '../../customize/src/less2/include/framework.less';
&.cp-app-todo {
.framework_min_main( .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,

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

@ -1,14 +1,14 @@
@import (reference) '../../customize/src/less2/include/tools.less'; @import (reference) '../../customize/src/less2/include/tools.less';
@import (reference) "../../customize/src/less2/include/framework.less"; @import (reference) "../../customize/src/less2/include/framework.less";
&.cp-app-whiteboard {
.framework_main( .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,

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

@ -1,10 +1,9 @@
@import (reference) "../../customize/src/less2/include/colortheme-all.less"; @import (reference) "../../customize/src/less2/include/colortheme-all.less";
@import (reference) '../../customize/src/less2/include/framework.less'; @import (reference) '../../customize/src/less2/include/framework.less';
&.cp-app-worker {
.framework_min_main(); .framework_min_main();
// body
&.cp-app-worker {
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,