diff --git a/customize.dist/src/less2/404.less b/customize.dist/src/less2/404.less deleted file mode 100644 index 1aabf463b..000000000 --- a/customize.dist/src/less2/404.less +++ /dev/null @@ -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"; } - diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index c35c46a98..61da93d95 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/customize.dist/src/less2/include/alertify.less @@ -2,7 +2,10 @@ @import (reference) "./browser.less"; @import (reference) "./variables.less"; -.alertify_main () { +.alertify_main() { + --LessLoader_require: LessLoader_currentFile(); +}; +& { @max-z-index: 2147483647; @alertify-fore: @colortheme_modal-fg; @alertify-base: @colortheme_modal-bg; @@ -406,4 +409,4 @@ } } } -} +} \ No newline at end of file diff --git a/customize.dist/src/less2/include/app-noscroll.less b/customize.dist/src/less2/include/app-noscroll.less index f0a760b5f..c9fc59bbf 100644 --- a/customize.dist/src/less2/include/app-noscroll.less +++ b/customize.dist/src/less2/include/app-noscroll.less @@ -1,14 +1,8 @@ -// html -.app-noscroll_main () { - height: 100%; - width: 100%; - padding: 0px; - margin: 0px; - overflow: hidden; - box-sizing: border-box; - position: relative; - border: 0; - body { +.app-noscroll_main() { + --LessLoader_require: LessLoader_currentFile(); +} +& { + .cp-app-noscroll { height: 100%; width: 100%; padding: 0px; @@ -17,6 +11,15 @@ box-sizing: border-box; position: relative; border: 0; + body { + height: 100%; + width: 100%; + padding: 0px; + margin: 0px; + overflow: hidden; + box-sizing: border-box; + position: relative; + border: 0; + } } -} - +} \ No newline at end of file diff --git a/customize.dist/src/less2/include/app-print.less b/customize.dist/src/less2/include/app-print.less index 957170044..a22a10300 100644 --- a/customize.dist/src/less2/include/app-print.less +++ b/customize.dist/src/less2/include/app-print.less @@ -1,46 +1,51 @@ -.app-print_main () { - // Current scope is - @media print { - height: auto; - max-height: none; - overflow: visible; - display: block; - @page { - margin: 0; - size: landscape; - } - // Slide app - body.cp-app-slide { +.app-print_main() { + --LessLoader_require: LessLoader_currentFile(); +} +& { + .cp-app-print { + // Current scope is + @media print { + height: auto; + max-height: none; + overflow: visible; display: block; - .CodeMirror, #cme_toolbox { - display: none; + @page { + margin: 0; + size: landscape; } - * { - visibility: hidden; - height: auto; - max-height: none; - } - .cp-app-slide-viewer #cp-app-slide-print { + // Slide app + body.cp-app-slide { display: block; - visibility: visible; + .CodeMirror, #cme_toolbox { + display: none; + } * { + visibility: hidden; + height: auto; + max-height: none; + } + .cp-app-slide-viewer #cp-app-slide-print { + display: block; visibility: visible; + * { + visibility: visible; + } + } + .cp-app-slide-viewer #cp-app-slide-modal { + display: none !important; + } + .cp-app-slide-viewer { + flex: 1 !important; + overflow: visible !important; + } + .cp-toolbar-userlist-drawer { + display: none !important; + } + #cp-app-slide-editor { + height: auto; + display: block; } - } - .cp-app-slide-viewer #cp-app-slide-modal { - display: none !important; - } - .cp-app-slide-viewer { - flex: 1 !important; - overflow: visible !important; - } - .cp-toolbar-userlist-drawer { - display: none !important; - } - #cp-app-slide-editor { - height: auto; - display: block; } } } -} +} \ No newline at end of file diff --git a/customize.dist/src/less2/include/avatar.less b/customize.dist/src/less2/include/avatar.less index 93d3f24c6..367034972 100644 --- a/customize.dist/src/less2/include/avatar.less +++ b/customize.dist/src/less2/include/avatar.less @@ -1,40 +1,45 @@ @import (reference) "./tools.less"; +.avatar_main(@width) { + --LessLoader_require: LessLoader_currentFile(); -.avatar_main (@width) { + --avatar-width: @width; + --avatar-font-size: @width / 1.2; +} +& { &.cp-avatar { - overflow: hidden; - text-overflow: ellipsis; - font-size: 16px; - display: flex; - align-items: center; - .cp-avatar-default, media-tag { - display: inline-flex; - width: @width; - height: @width; - justify-content: center; - align-items: center; - border-radius: 4px; overflow: hidden; - box-sizing: content-box; - } - .cp-avatar-default { - .tools_unselectable(); - background: white; - color: black; - font-size: @width/1.2; - } - media-tag { - min-height: @width; - min-width: @width; - max-height: @width; - max-width: @width; - img { - min-width: 100%; - min-height: 100%; - max-width: none; - max-height: none; // To override 'media-tag img' in slide.less + text-overflow: ellipsis; + font-size: 16px; + display: flex; + align-items: center; + .cp-avatar-default, media-tag { + display: inline-flex; + width: var(--avatar-width); + height: var(--avatar-width); + justify-content: center; + align-items: center; + border-radius: 4px; + overflow: hidden; + box-sizing: content-box; + } + .cp-avatar-default { + .tools_unselectable(); + background: white; + color: black; + font-size: var(--avatar-font-size); + } + media-tag { + min-height: var(--avatar-width); + min-width: var(--avatar-width); + max-height: var(--avatar-width); + max-width: var(--avatar-width); + img { + min-width: 100%; + min-height: 100%; + max-width: none; + max-height: none; // To override 'media-tag img' in slide.less + } } - } } } diff --git a/customize.dist/src/less2/include/checkmark.less b/customize.dist/src/less2/include/checkmark.less index fe80ddfcd..2f606f7ec 100644 --- a/customize.dist/src/less2/include/checkmark.less +++ b/customize.dist/src/less2/include/checkmark.less @@ -1,11 +1,17 @@ @import (reference) "./colortheme-all.less"; .checkmark_main(@size) { + --LessLoader_require: LessLoader_currentFile(); - @width: round(@size / 8); + --checkmark-size: @size; + --checkmark-width: round(@size / 8); @dim1: round(@size / 3); - @dim2: round(2 * @size / 3); - @top: round(@size / 12) - 1; + --checkmark-dim1: round(@size / 3); + --checkmark-dim2: round(2 * @size / 3); + --checkmark-top: round(@size / 12) - 1; + --checkmark-radio-size: @dim1 * 3; +} +& { // Text .cp-checkmark { margin: 0; @@ -58,8 +64,8 @@ .cp-checkmark-mark { margin-right: 10px; position: relative; - height: @size; - width: @size; + height: var(--checkmark-size); + width: var(--checkmark-size); background-color: @colortheme_checkmark-back0; display: flex; justify-content: center; @@ -68,12 +74,12 @@ &:after { content: ""; display: none; - margin-top: @top; - width: @dim1; - height: @dim2; + margin-top: var(--checkmark-top); + width: var(--checkmark-dim1); + height: var(--checkmark-dim2); transform: rotate(45deg); border: solid @colortheme_checkmark-col1; - border-width: 0 @width @width 0; + border-width: 0 var(--checkmark-width) var(--checkmark-width) 0; position: absolute; } &:focus { @@ -129,12 +135,12 @@ } } - @radio-size: @dim1 * 3; + .cp-radio-mark { margin-right: 10px; position: relative; - height: @radio-size; - width: @radio-size; + height: var(--checkmark-radio-size); + width: var(--checkmark-radio-size); background-color: @colortheme_checkmark-back0; border-radius: 50%; display: flex; @@ -147,12 +153,12 @@ content: ""; border-radius: 50%; background: white; - width: @dim1; - height: @dim1; + width: var(--checkmark-dim1); + height: var(--checkmark-dim1); //transform: rotate(45deg); //border: solid @colortheme_checkmark-col1; - //border-width: 0 @width @width 0; + //border-width: 0 var(--checkmark-width) var(--checkmark-width) 0; } &:focus { //border-color: #FF007C !important; diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less index b860d0b91..bb1d38958 100644 --- a/customize.dist/src/less2/include/creation.less +++ b/customize.dist/src/less2/include/creation.less @@ -1,3 +1,4 @@ +@import (reference) "./browser.less"; @import (reference) "./colortheme-all.less"; @import (reference) "./tools.less"; @import (reference) './icon-colors.less'; @@ -7,6 +8,13 @@ @bg-color: @colortheme_default-bg, // color of the toolbar background @warn-color: @colortheme_default-warn, // color of the warning text in the toolbar ) { + --LessLoader_require: LessLoader_currentFile(); + + --creation-color: @color; + --creation-bg-color: @bg-color; + // --creation-warn-color: @warn-color; // unused +} +& { @colortheme_creation-modal-bg: #fff; @colortheme_creation-modal: #666; @colortheme_creation-modal-title: @colortheme_loading-bg; @@ -259,10 +267,10 @@ border: 1px solid transparent; &.cp-creation-template-selected { - color: @color !important; - background-color: @bg-color !important; + color: var(--creation-color) !important; + background-color: var(--creation-bg-color) !important; .fa { - color: @color; + color: var(--creation-color); } } @@ -293,7 +301,7 @@ max-width: 100%; } .fa { - color: @bg-color; + color: var(--creation-bg-color); cursor: pointer; width: 100px; height: 100px; diff --git a/customize.dist/src/less2/include/dropdown.less b/customize.dist/src/less2/include/dropdown.less index 8524e2b7d..ac393fe3a 100644 --- a/customize.dist/src/less2/include/dropdown.less +++ b/customize.dist/src/less2/include/dropdown.less @@ -3,6 +3,9 @@ /* The container
- needed to position the dropdown content */ .dropdown_main () { + --LessLoader_require: LessLoader_currentFile(); +} +& { .cp-dropdown-container { @dropdown_font: @colortheme_app-font-size @colortheme_font; position: relative; diff --git a/customize.dist/src/less2/include/fileupload.less b/customize.dist/src/less2/include/fileupload.less index bc4787869..c10abeec4 100644 --- a/customize.dist/src/less2/include/fileupload.less +++ b/customize.dist/src/less2/include/fileupload.less @@ -2,8 +2,11 @@ @import (reference) './modal.less'; .fileupload_main () { + --LessLoader_require: LessLoader_currentFile(); + .modal_main(); +} +& { /* Upload status table */ - modal_main(); #cp-fileupload { .modal_base(); position: absolute; @@ -55,4 +58,3 @@ } } } - diff --git a/customize.dist/src/less2/include/font.less b/customize.dist/src/less2/include/font.less index ec8e77f0f..6dc4dc129 100644 --- a/customize.dist/src/less2/include/font.less +++ b/customize.dist/src/less2/include/font.less @@ -1,9 +1,11 @@ -.font_neuropolitical () { - @font-face { - font-family: Neuropolitical; - src: url("/customize/fonts/neuropolitical.ttf"); - } +.font_main () { + --LessLoader_require: LessLoader_currentFile(); } -.font_open-sans () { - @import (once) '/customize/fonts/open-sans.less'; + +// Fonts need to go on the global scope +@font-face { + font-family: Neuropolitical; + src: url("/customize/fonts/neuropolitical.ttf"); } + +@import (once) '/customize/fonts/open-sans.less'; \ No newline at end of file diff --git a/customize.dist/src/less2/include/framework.less b/customize.dist/src/less2/include/framework.less index af2ccf3b8..36db08a61 100644 --- a/customize.dist/src/less2/include/framework.less +++ b/customize.dist/src/less2/include/framework.less @@ -7,15 +7,27 @@ @import (reference) './tippy.less'; @import (reference) "./checkmark.less"; @import (reference) "./password-input.less"; +@import (reference) './font.less'; +@import (reference) "./app-print.less"; +@import (reference) "./app-noscroll.less"; .framework_main(@bg-color, @warn-color, @color) { + --LessLoader_require: LessLoader_currentFile(); + // Set the HTML style for the apps which shouldn't have a body scrollbar + .app-noscroll_main(); + + // Set the HTML style for printing slides + .app-print_main(); + + .font_main(); + .toolbar_main( @bg-color: @bg-color, @warn-color: @warn-color, @color: @color ); - .fileupload_main(); .alertify_main(); + .fileupload_main(); .tokenfield_main(); .tippy_main(); .checkmark_main(20px); @@ -26,13 +38,22 @@ @color: @color ); font: @colortheme_app-font; -} +}; .framework_min_main( @color: @colortheme_default-color, // Color of the text for the toolbar @bg-color: @colortheme_default-bg, // color of the toolbar background @warn-color: @colortheme_default-warn, // color of the warning text in the toolbar ) { + --LessLoader_require: LessLoader_currentFile(); + // Set the HTML style for the apps which shouldn't have a body scrollbar + .app-noscroll_main(); + + // Set the HTML style for printing slides + .app-print_main(); + + .font_main(); + .toolbar_main( @bg-color: @bg-color, @warn-color: @warn-color, @@ -46,4 +67,6 @@ font: @colortheme_app-font; } - +& { + body.cp-readonly .cp-hidden-if-readonly { display: none !important; } +} \ No newline at end of file diff --git a/customize.dist/src/less2/include/help.less b/customize.dist/src/less2/include/help.less index 097c74f79..cd54aaff2 100644 --- a/customize.dist/src/less2/include/help.less +++ b/customize.dist/src/less2/include/help.less @@ -1,9 +1,17 @@ @import (reference) "./colortheme-all.less"; .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 { position: relative; - background-color: lighten(@bg-color, 15%); + background-color: var(--help-bg-color-l15); &.cp-help-hidden { display: none; } @@ -14,14 +22,13 @@ right: 5px; } .cp-help-text { - color: contrast(lighten(@bg-color, 15%), #fff, #000); //@color; + color: contrast(var(--help-bg-color-l15), #fff, #000); //@color; margin: 0; padding: 15px; a { //color: darken(@colortheme_link-color, 30%); - @spin: spin(lighten(@bg-color, 15%), 180); - color: contrast(lighten(@bg-color, 15%), lighten(@spin, 10%), darken(@spin, 10%)); - //color: darken(spin(lighten(@bg-color, 15%), 180), 10%); + color: contrast(var(--help-bg-color-l15), var(--help-bg-color-spin-l10), var(--help-bg-color-spin-d10)); + //color: darken(spin(var(--help-bg-color-l15), 180), 10%); } h1 { font-size: 20px; @@ -35,4 +42,4 @@ ul, ol, p { margin: 0; } } } -} +} \ No newline at end of file diff --git a/customize.dist/src/less2/include/icon-colors.less b/customize.dist/src/less2/include/icon-colors.less index b7a7935c6..e18578c6a 100644 --- a/customize.dist/src/less2/include/icon-colors.less +++ b/customize.dist/src/less2/include/icon-colors.less @@ -1,5 +1,8 @@ @import (reference) "./colortheme-all.less"; .iconColors_main () { + --LessLoader_require: LessLoader_currentFile(); +} +& { // Classes used in common-interface.js .cp-icon-color-pad { color: @colortheme_pad-bg; } .cp-icon-color-code { color: @colortheme_code-bg; } diff --git a/customize.dist/src/less2/include/icons.less b/customize.dist/src/less2/include/icons.less index c2ddfef32..1068f59ba 100644 --- a/customize.dist/src/less2/include/icons.less +++ b/customize.dist/src/less2/include/icons.less @@ -38,5 +38,4 @@ } } } -} - +} \ No newline at end of file diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less index b824e8cfb..eb600bf52 100644 --- a/customize.dist/src/less2/include/infopages.less +++ b/customize.dist/src/less2/include/infopages.less @@ -1,10 +1,25 @@ @import (reference) "./colortheme-all.less"; +@import (reference) "./font.less"; -@infopages_infobar-height: 64px; -@infopages_padding: 32px; +.infopages_link () { + text-decoration: none; + color: #0275D8; + cursor: pointer; + display: inline-flex; + &:hover { + transform: scale(1.05); + } +} -// Basic setup for info pages, this should be used at the global level .infopages_main () { + --LessLoader_require: LessLoader_currentFile(); +} +body { + .font_main(); + @infopages_infobar-height: 64px; + @infopages_padding: 32px; + + // Basic setup for info pages, this should be used at the global level background-color: @colortheme_info-background; a { color: @cryptpad_color_blue; @@ -100,20 +115,8 @@ border-top: 2px solid #fff; } } -}; -.infopages_link () { - text-decoration: none; - color: #0275D8; - cursor: pointer; - display: inline-flex; - &:hover { - transform: scale(1.05); - } -} - -// Apply this to the top bar div -.infopages_topbar () { + // Apply this to the top bar div .cp-topbar { background: #fff; z-index: 10000; //Z infopage toolbar @@ -149,71 +152,71 @@ margin-right: 0.5em; } } -} -// navigation top bar -.navbar { - background: #fff; - .navbar-brand { - display: block; - background-image: url(/customize/CryptPad_logo_color.svg); - background-repeat: no-repeat; - background-size: contain; - height: 50px; - width: 250px; - @media (max-width: 326px) { - width: 180px; - } - margin-right: 0; - } - a { - border: 2px solid transparent; - white-space: nowrap; - } - .nav-link { - padding: 0.5em 0.7em; - &:hover { - color: @cryptpad_color_light_blue; + // navigation top bar + .navbar { + background: #fff; + .navbar-brand { + display: block; + background-image: url(/customize/CryptPad_logo_color.svg); + background-repeat: no-repeat; + background-size: contain; + height: 50px; + width: 250px; + @media (max-width: 326px) { + width: 180px; + } + margin-right: 0; + } + a { + border: 2px solid transparent; + white-space: nowrap; + } + .nav-link { + padding: 0.5em 0.7em; + &:hover { + color: @cryptpad_color_light_blue; + } + } + .cp-register-btn { + border: 2px solid #4591C4; + display: inline-block; + } + button:focus { + outline: none; + } + .navbar-toggler { + margin-top: 10px; + color: #4591C4; } } - .cp-register-btn { - border: 2px solid #4591C4; - display: inline-block; - } - button:focus { - outline: none; - } - .navbar-toggler { - margin-top: 10px; - color: #4591C4; - } -} -@media (max-width: 1000px) { - #menuCollapse { - text-align: right; -/* @media (min-width: 576px) { - top: 100%; - background: rgba(255,255,255,0.8); - position: absolute; - right: 0px; - padding: 0 20px; - z-index: 1; - } -*/ - } - .navbar-nav a { - text-align: right !important; - } - .cp-register-btn { - margin-right: 13px; - text-align: center; + @media (max-width: 1000px) { + #menuCollapse { + text-align: right; + /* @media (min-width: 576px) { + top: 100%; + background: rgba(255,255,255,0.8); + position: absolute; + right: 0px; + padding: 0 20px; + z-index: 1; + } + */ + } + .navbar-nav a { + text-align: right !important; + } + .cp-register-btn { + margin-right: 13px; + text-align: center; + } } -} -//footer general styles + //footer general styles -.footer-title { - font-weight: bold; - font-size: 1.2em; - color: #1E1F1F; -} + .footer-title { + font-weight: bold; + font-size: 1.2em; + color: #1E1F1F; + } +} \ No newline at end of file diff --git a/customize.dist/src/less2/include/limit-bar.less b/customize.dist/src/less2/include/limit-bar.less index 5f61219c2..3ed7bd454 100644 --- a/customize.dist/src/less2/include/limit-bar.less +++ b/customize.dist/src/less2/include/limit-bar.less @@ -1,6 +1,9 @@ @import (reference) "./colortheme-all.less"; .limit-bar_main () { + --LessLoader_require: LessLoader_currentFile(); +} +& { .cp-limit-container { @colortheme_green: #5cb85c; display: inline-flex; diff --git a/customize.dist/src/less2/include/markdown-toolbar.less b/customize.dist/src/less2/include/markdown-toolbar.less deleted file mode 100644 index fbdaaa4a2..000000000 --- a/customize.dist/src/less2/include/markdown-toolbar.less +++ /dev/null @@ -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; } - } - } -} diff --git a/customize.dist/src/less2/include/markdown.less b/customize.dist/src/less2/include/markdown.less index 470f81a82..39be15426 100644 --- a/customize.dist/src/less2/include/markdown.less +++ b/customize.dist/src/less2/include/markdown.less @@ -1,3 +1,15 @@ +.markdown_main() { + blockquote { + background: #e5e5e5; + padding: 10px; + border-left: 3px solid #999; + padding-right: 0; + p { margin: 0; } + blockquote { margin: 0; } + } + // todo ul, ol +} + .markdown_preformatted-code (@color: #333) { pre > code { display: block; @@ -21,17 +33,4 @@ } } } -} - -.markdown_main() { - blockquote { - background: #e5e5e5; - padding: 10px; - border-left: 3px solid #999; - padding-right: 0; - p { margin: 0; } - blockquote { margin: 0; } - } -} -// todo ul, ol - +} \ No newline at end of file diff --git a/customize.dist/src/less2/include/modal.less b/customize.dist/src/less2/include/modal.less index 154c8d1ad..3ab463b1d 100644 --- a/customize.dist/src/less2/include/modal.less +++ b/customize.dist/src/less2/include/modal.less @@ -18,6 +18,9 @@ } .modal_main() { + --LessLoader_require: LessLoader_currentFile(); +} +& { .cp-modal-container { display: none; diff --git a/customize.dist/src/less2/include/password-input.less b/customize.dist/src/less2/include/password-input.less index 8836476fd..a2f2fb044 100644 --- a/customize.dist/src/less2/include/password-input.less +++ b/customize.dist/src/less2/include/password-input.less @@ -1,4 +1,7 @@ .password_main() { + --LessLoader_require: LessLoader_currentFile(); +} +& { .cp-password-container { display: flex; align-items: center; diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less index 9a038ffe6..07471183a 100644 --- a/customize.dist/src/less2/include/sidebar-layout.less +++ b/customize.dist/src/less2/include/sidebar-layout.less @@ -1,18 +1,22 @@ @import (reference) "/customize/src/less2/include/colortheme-all.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-layout_main() { + --LessLoader_require: LessLoader_currentFile(); + + // This is way too broad to put in the global scope input[type="text"], input[type="password"] { padding-left: 10px; } +} +& { + @leftside-bg: @colortheme_sidebar-left-bg; + @leftside-color: @colortheme_sidebar-left-fg; + @rightside-color: @colortheme_sidebar-right-fg; + @description-color: @colortheme_sidebar-description; + #cp-sidebarlayout-container { font-size: 16px; display: flex; diff --git a/customize.dist/src/less2/include/tippy.less b/customize.dist/src/less2/include/tippy.less index d873b98d8..794159ba7 100644 --- a/customize.dist/src/less2/include/tippy.less +++ b/customize.dist/src/less2/include/tippy.less @@ -1,6 +1,9 @@ @import (reference) './colortheme-all.less'; .tippy_main() { + --LessLoader_require: LessLoader_currentFile(); +} +& { .tippy-tooltip.cryptpad-theme { /* Your styling here. Example: */ background-color: white; diff --git a/customize.dist/src/less2/include/tokenfield.less b/customize.dist/src/less2/include/tokenfield.less index ad435ad31..faa302b0a 100644 --- a/customize.dist/src/less2/include/tokenfield.less +++ b/customize.dist/src/less2/include/tokenfield.less @@ -1,6 +1,9 @@ @import (reference) "./tools.less"; .tokenfield_main () { + --LessLoader_require: LessLoader_currentFile(); +} +& { .ui-autocomplete { z-index: 100001; // alertify + 1 } diff --git a/customize.dist/src/less2/include/toolbar-history.less b/customize.dist/src/less2/include/toolbar-history.less index 7bee5c0fc..cb41c2112 100644 --- a/customize.dist/src/less2/include/toolbar-history.less +++ b/customize.dist/src/less2/include/toolbar-history.less @@ -1,6 +1,9 @@ @import (reference) "./colortheme-all.less"; .history_main () { + --LessLoader_require: LessLoader_currentFile(); +} +& { .cp-toolbar-history { display: none; text-align: center; diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index 3587b6eaf..d3e57981e 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -8,7 +8,6 @@ @import (reference) "./tools.less"; @import (reference) "./icons.less"; @import (reference) "./modal.less"; -@import (reference) "./markdown-toolbar.less"; @import (reference) "./help.less"; .toolbar_main ( @@ -17,7 +16,37 @@ @warn-color: @colortheme_default-warn, // color of the warning text in 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_top-height: 64px; @toolbar_button-font: @colortheme_app-font; @@ -26,13 +55,24 @@ // this is a workaround .fa-shhare-alt:before { content: "\f1e0"; } - .dropdown_main(); .ckeditor_fix(); - .history_main(); - .iconColors_main(); - .markdownToolbar_main(@color, @bg-color); - .help_main(@color, @bg-color); - .modal_main(); + + .cp-markdown-toolbar { + height: @toolbar_line-height; + background-color: var(--toolbar-bg-color-l20); + 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 { display: flex; @@ -66,7 +106,7 @@ } .cp-toolbar-userlist-drawer { - background-color: @bg-color; + background-color: var(--toolbar-bg-color); font: @colortheme_app-font-size @colortheme_font; min-width: 175px; width: 175px; @@ -254,31 +294,31 @@ } .cp-toolbar-userlist-drawer { - background-color: @bg-color; - color: @color; + background-color: var(--toolbar-bg-color); + color: var(--toolbar-color); .cp-toolbar-userlist-drawer-close { - color: @color; + color: var(--toolbar-color); } h2 { - background-color: darken(@bg-color, 10%); - color: @color; + background-color: var(--toolbar-bg-color-d10); + color: var(--toolbar-color); } .cp-toolbar-userlist-name-input { - background-color: darken(@bg-color, 10%); - color: @color; + background-color: var(--toolbar-bg-color-d10); + color: var(--toolbar-color); } .cp-toolbar-userlist-name-edit { - color: contrast(@color, - lighten(@color, 20%), - darken(@color, 20%)); + color: contrast(var(--toolbar-color), + var(--toolbar-color-l20), + var(--toolbar-color-d20)); background: transparent; &:hover { - color: @color; + color: var(--toolbar-color); } } .cp-toolbar-userlist-friend { &:hover { - color: darken(@color, 15%); + color: var(--toolbar-color-d15); } } } @@ -298,8 +338,8 @@ display: flex; flex-wrap: wrap; justify-content: space-between; - background-color: @bg-color; - color: @color; + background-color: var(--toolbar-bg-color); + color: var(--toolbar-color); .fa { font: normal normal normal 14px/1 FontAwesome; @@ -517,42 +557,42 @@ .cp-toolbar-spinner { font-size: @colortheme_app-font-size; - color: @color; + color: var(--toolbar-color); } .cp-toolbar-limit { - text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color; - color: @warn-color; + text-shadow: -1px 0 var(--toolbar-color), 0 1px var(--toolbar-color), 1px 0 var(--toolbar-color), 0 -1px var(--toolbar-color); + color: var(--toolbar-warn-color); } .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 { - background-color: @bg-color; + background-color: var(--toolbar-bg-color); } } .cp-toolbar-title-hoverable:hover { .cp-toolbar-title-editable, .cp-toolbar-title-edit { cursor: text; - border: 1px solid darken(@bg-color, 15%); - background: darken(@bg-color, 10%); + border: 1px solid var(--toolbar-bg-color-d15); + background: var(--toolbar-bg-color-d10); transition: all 0.15s; - color: @color; + color: var(--toolbar-color); } .cp-toolbar-title-editable { cursor: text; } } .cp-toolbar-title-save { - border: 1px solid darken(@bg-color, 15%); - background: darken(@bg-color, 10%); - color: @color; + border: 1px solid var(--toolbar-bg-color-d15); + background: var(--toolbar-bg-color-d10); + color: var(--toolbar-color); &:hover { - background: darken(@bg-color, 5%); + background: var(--toolbar-bg-color-d5); } } input { - border: 1px solid darken(@bg-color, 15%); - background: darken(@bg-color, 10%); - color: @color; + border: 1px solid var(--toolbar-bg-color-d15); + background: var(--toolbar-bg-color-d10); + color: var(--toolbar-color); } .cp-dropdown-content.cp-dropdown-left a { color: black; @@ -578,7 +618,7 @@ padding: 0; margin: 0 5px; font-size: @colortheme_app-font-size; - color: @warn-color; + color: var(--toolbar-warn-color); .cp-pnp-msg { padding-left: 5px; font-family: @colortheme_font; @@ -587,7 +627,7 @@ font-size: @colortheme_app-font-size; font-family: @colortheme_font; font-weight: bold; - color: @warn-color; + color: var(--toolbar-warn-color); &:hover { text-decoration: underline; } @@ -881,7 +921,7 @@ display: flex; min-height: @toolbar_line-height; overflow: hidden; - @media screen and (max-width: @barWidth) { // 450px + @media screen and (max-width: var(--toolbar-barWidth)) { // 450px flex-wrap: wrap; height: auto; width: 100%; @@ -1004,6 +1044,4 @@ } } } - -} - +}; \ No newline at end of file diff --git a/customize.dist/src/less2/main.less b/customize.dist/src/less2/main.less deleted file mode 100644 index d14045194..000000000 --- a/customize.dist/src/less2/main.less +++ /dev/null @@ -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"; } - diff --git a/customize.dist/src/less2/pages/page-404.less b/customize.dist/src/less2/pages/page-404.less index 4e26951a1..9ff9cdcc3 100644 --- a/customize.dist/src/less2/pages/page-404.less +++ b/customize.dist/src/less2/pages/page-404.less @@ -1,9 +1,8 @@ @import (reference) "../include/colortheme-all.less"; @import (reference) "../include/font.less"; -.font_neuropolitical(); -.font_open-sans(); html, body { + .font_main(); margin: 0px; padding: 0px; #cp-main { diff --git a/customize.dist/src/less2/pages/page-about.less b/customize.dist/src/less2/pages/page-about.less index 350ffee4a..1e23c0b07 100644 --- a/customize.dist/src/less2/pages/page-about.less +++ b/customize.dist/src/less2/pages/page-about.less @@ -1,115 +1,117 @@ -@import (once) "../include/infopages.less"; +@import (reference) "../include/infopages.less"; @import (reference) "../include/colortheme-all.less"; -.infopages_main(); -.infopages_topbar(); -#cp-main { - background: #fff; -} -.cp-about-intro { - padding-top: 3em; - padding-bottom: 3em; - background-image: url(/customize/bkabout.jpg); - background-size: cover; - background-repeat: no-repeat; - background-position: center; - .container { - color: #fff; - font-family: "Open Sans"; - h1 { - font-weight: 700; - } - a { +&.cp-page-about { + .infopages_main(); + + #cp-main { + background: #fff; + } + .cp-about-intro { + padding-top: 3em; + padding-bottom: 3em; + background-image: url(/customize/bkabout.jpg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + .container { color: #fff; - text-decoration: underline; - } - p { - padding-top: 1em; + font-family: "Open Sans"; + h1 { + font-weight: 700; + } + a { + color: #fff; + text-decoration: underline; + } + p { + padding-top: 1em; + } } } -} -.cp-container { - .row { - background: #fff; - } - .cp-bio-avatar { - padding-right: 0; - @media (max-width: 991px) { - padding-right: 15px; + .cp-container { + .row { + background: #fff; } - img { + .cp-bio-avatar { + padding-right: 0; @media (max-width: 991px) { - margin: 0 auto; - display: block; + padding-right: 15px; + } + img { + @media (max-width: 991px) { + margin: 0 auto; + display: block; + } } } - } - .cp-bio-avatar-right { - padding-right: 15px; - padding-left: 0; - @media (max-width: 991px) { - padding-left: 15px; + .cp-bio-avatar-right { + padding-right: 15px; + padding-left: 0; + @media (max-width: 991px) { + padding-left: 15px; + } } } -} -.cp-develop-about { - .cp-icon-cent { - width: 6rem; - background: #fff; - border-radius: 50%; - height: 6rem; - box-shadow: 0 5px 15px rgba(69,145,196, 0.3); - margin: 0 auto; - background-image: url(/customize/code.svg); - background-repeat: no-repeat; - margin-top: 1em; - margin-bottom: 1.5em; - background-position: 50%; - background-size: 4rem; - } - h2 { - margin-top: 0; - font-weight: 600; - color: #1E1F1F; - margin-bottom: 1.5em; - } -} -.cp-profile-det { - padding-left: 30px; - h3 { - color: #1E1F1F; - font-weight: 700; + .cp-develop-about { + .cp-icon-cent { + width: 6rem; + background: #fff; + border-radius: 50%; + height: 6rem; + box-shadow: 0 5px 15px rgba(69,145,196, 0.3); + margin: 0 auto; + background-image: url(/customize/code.svg); + background-repeat: no-repeat; + margin-top: 1em; + margin-bottom: 1.5em; + background-position: 50%; + background-size: 4rem; + } + h2 { + margin-top: 0; + font-weight: 600; + color: #1E1F1F; + margin-bottom: 1.5em; + } } - p { - color: #3F4141; + .cp-profile-det { + padding-left: 30px; + h3 { + color: #1E1F1F; + font-weight: 700; + } + p { + color: #3F4141; + margin-bottom: 1em; + } + hr { + margin-left: 0; + width: 15rem; + border-top: 2px solid @cryptpad_color_blue; + } margin-bottom: 1em; } - hr { - margin-left: 0; - width: 15rem; - border-top: 2px solid @cryptpad_color_blue; - } - margin-bottom: 1em; -} -.cp-soc-media { - font-size: 1.5em; - color: @cryptpad_color_blue; - padding-right: 1em; - display: inline-block; - &:hover { - transform: scale(1.1); - } - &:visited { + .cp-soc-media { + font-size: 1.5em; color: @cryptpad_color_blue; + padding-right: 1em; + display: inline-block; + &:hover { + transform: scale(1.1); + } + &:visited { + color: @cryptpad_color_blue; + } + } + .cp-contrib { + margin-top: 3em; + .cp-icon-cent { + background-image: url(/customize/source-branch.svg); + background-position: 60%; } -} -.cp-contrib { - margin-top: 3em; - .cp-icon-cent { - background-image: url(/customize/source-branch.svg); - background-position: 60%; } -} -.cp-margin-bot { - margin-bottom: 1.5em; -} + .cp-margin-bot { + margin-bottom: 1.5em; + } +} \ No newline at end of file diff --git a/customize.dist/src/less2/pages/page-contact.less b/customize.dist/src/less2/pages/page-contact.less index 4cab7b742..30cf702df 100644 --- a/customize.dist/src/less2/pages/page-contact.less +++ b/customize.dist/src/less2/pages/page-contact.less @@ -1,90 +1,91 @@ -@import (once) "../include/infopages.less"; +@import (reference) "../include/infopages.less"; @import (reference) "../include/colortheme-all.less"; -.infopages_main(); -.infopages_topbar(); +&.cp-page-contact { + .infopages_main(); -.fa { - padding-right: 0.25em; -} -#cp-main { - background-color: #fff; -} -.cp-container { - background: #fff; - .cp-iconCont { - h4 { - margin-top: 1.5em; - margin-bottom: 1.5em; - } - div { - .card { - padding: 4em 1em 0.5em 1em; - box-shadow: 0 5px 15px rgba(69,145,196, 0.3); - border-color: #fff; - text-align: center; - margin-bottom: 1em; - &:hover, &:focus { - text-decoration: none; - transform: scale(1.05); - } - @media (max-width: 1200px) and (min-width: 769px) { - min-height: 139px; - } - @media (max-width: 768px) and (min-width: 576px) { - min-height: 164px; - } - @media (max-width: 496px) { - min-height: 140px; - } - @media (max-width: 335px) { - min-height: 162px; - } + .fa { + padding-right: 0.25em; + } + #cp-main { + background-color: #fff; + } + .cp-container { + background: #fff; + .cp-iconCont { + h4 { + margin-top: 1.5em; + margin-bottom: 1.5em; } - &:nth-child(2) { + div { .card { - background-image: url(/customize/images/twitter.svg); - background-repeat: no-repeat; - background-position: 50% 10%; - background-size: 3rem; + padding: 4em 1em 0.5em 1em; + box-shadow: 0 5px 15px rgba(69,145,196, 0.3); + border-color: #fff; + text-align: center; + margin-bottom: 1em; + &:hover, &:focus { + text-decoration: none; + transform: scale(1.05); + } + @media (max-width: 1200px) and (min-width: 769px) { + min-height: 139px; + } + @media (max-width: 768px) and (min-width: 576px) { + min-height: 164px; + } + @media (max-width: 496px) { + min-height: 140px; + } + @media (max-width: 335px) { + min-height: 162px; + } } - } - &:nth-child(3) { - .card { - background-image: url(/customize/images/issue.svg); - background-repeat: no-repeat; - background-position: 50% 10%; - background-size: 3rem; + &:nth-child(2) { + .card { + background-image: url(/customize/images/twitter.svg); + background-repeat: no-repeat; + background-position: 50% 10%; + background-size: 3rem; + } } - } - &:nth-child(4) { - .card { - background-image: url(/customize/images/sayhi.svg); - background-repeat: no-repeat; - background-position: 50% 10%; - background-size: 3rem; + &:nth-child(3) { + .card { + background-image: url(/customize/images/issue.svg); + background-repeat: no-repeat; + background-position: 50% 10%; + background-size: 3rem; + } } - } - &:nth-child(5) { - .card { - background-image: url(/customize/images/email.svg); - background-repeat: no-repeat; - background-position: 50% 10%; - background-size: 3rem; + &:nth-child(4) { + .card { + background-image: url(/customize/images/sayhi.svg); + background-repeat: no-repeat; + background-position: 50% 10%; + background-size: 3rem; + } + } + &:nth-child(5) { + .card { + background-image: url(/customize/images/email.svg); + background-repeat: no-repeat; + background-position: 50% 10%; + background-size: 3rem; + } } } } } -} -.cp-contdet { - padding-top: 3em; - padding-bottom: 3em; - background-image: url(/customize/images/bkcontact.jpg); - background-size: cover; - background-repeat: no-repeat; - background-position: center; - h1 { - font-weight: 700; - color: #fff; + .cp-contdet { + padding-top: 3em; + padding-bottom: 3em; + background-image: url(/customize/images/bkcontact.jpg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + h1 { + font-weight: 700; + color: #fff; + } } -} +} \ No newline at end of file diff --git a/customize.dist/src/less2/pages/page-faq.less b/customize.dist/src/less2/pages/page-faq.less index e08fc42ed..01e360a29 100644 --- a/customize.dist/src/less2/pages/page-faq.less +++ b/customize.dist/src/less2/pages/page-faq.less @@ -1,84 +1,85 @@ -@import (once) "../include/infopages.less"; +@import (reference) "../include/infopages.less"; @import (reference) "../include/colortheme-all.less"; -.infopages_main(); -.infopages_topbar(); -#cp-main { - background: #fff; -} -.cp-faq { - padding-top: 3em; - padding-bottom: 3em; - background-image: url(/customize/images/cover-faq.jpg); - background-size: cover; - background-repeat: no-repeat; - background-position: center; - .container { - color: #fff; - font-family: "Open Sans"; +&.cp-page-faq { + .infopages_main(); + + #cp-main { + background: #fff; } - h1 { - font-weight: 700; + .cp-faq { + padding-top: 3em; + padding-bottom: 3em; + background-image: url(/customize/images/cover-faq.jpg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + .container { + color: #fff; + font-family: "Open Sans"; + } + h1 { + font-weight: 700; + } } -} -.cp-faq-ques-det { - .cp-faq-header { - a { - padding: 0; - h4 { - margin-top: 1.5rem; - margin-bottom: 1.5rem; - .cp-brand-font { - font-family: "Neuropolitical"; + .cp-faq-ques-det { + .cp-faq-header { + a { + padding: 0; + h4 { + margin-top: 1.5rem; + margin-bottom: 1.5rem; + .cp-brand-font { + font-family: "Neuropolitical"; + } } } } } -} -.cp-faq-container { - .cp-faq-questions-items { - background: #3a84b6; - color: #fff; - padding: 1rem 1rem 0.5rem 1rem; - margin-bottom: 1rem; - } - .cp-faq-questions-q { - padding: 0; - margin-bottom: 0.5rem; - cursor: pointer; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - &:hover { - text-decoration: none; + .cp-faq-container { + .cp-faq-questions-items { + background: #3a84b6; + color: #fff; + padding: 1rem 1rem 0.5rem 1rem; + margin-bottom: 1rem; } - &:after { - content: '\f067'; - font-family: FontAwesome; - font-weight: normal; - font-style: normal; - float: right; - text-decoration: none; - font-size: 13px; - line-height: 1.5; + .cp-faq-questions-q { + padding: 0; + margin-bottom: 0.5rem; + cursor: pointer; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + &:hover { + text-decoration: none; + } + &:after { + content: '\f067'; + font-family: FontAwesome; + font-weight: normal; + font-style: normal; + float: right; + text-decoration: none; + font-size: 13px; + line-height: 1.5; + } } - } - .cp-faq-questions-q.active-faq { - &:after { - content: '\f068'; + .cp-faq-questions-q.active-faq { + &:after { + content: '\f068'; + } } + .cp-faq-questions-a { + display: none; + padding: 0.5rem; + margin-bottom: 0.5rem; + background-color: #fff; + color: #212529; + } + margin-bottom: 1.5rem; } - .cp-faq-questions-a { - display: none; - padding: 0.5rem; - margin-bottom: 0.5rem; - background-color: #fff; - color: #212529; - } - margin-bottom: 1.5rem; -} - +} \ No newline at end of file diff --git a/customize.dist/src/less2/pages/page-features.less b/customize.dist/src/less2/pages/page-features.less index 57c1335cf..51ee53165 100644 --- a/customize.dist/src/less2/pages/page-features.less +++ b/customize.dist/src/less2/pages/page-features.less @@ -1,86 +1,88 @@ -@import (once) "../include/infopages.less"; +@import (reference) "../include/infopages.less"; @import (reference) "../include/colortheme-all.less"; -.infopages_main(); -.infopages_topbar(); -#cp-main { - background-color: #fff; -} -.cp_cont_features { - padding-top: 3em; - padding-bottom: 3em; - background-image: url('/customize/images/cover-features.jpg'); - background-size: cover; - background-repeat: no-repeat; - background-position: center; - h1 { - font-weight: 700; - color: #fff; +&.cp-page-features { + .infopages_main(); + + #cp-main { + background-color: #fff; } -} -#cp-features-register { - text-align: center; - padding: 20px; -} -.cp-features-register-button { - font-size: 20px; - color: #fff; - background: @cryptpad_color_blue; - border: 2px solid @cryptpad_color_blue; - border-radius: 0; - &:hover { - transform: scale(1.05); - cursor: pointer; + .cp_cont_features { + padding-top: 3em; + padding-bottom: 3em; + background-image: url('/customize/images/cover-features.jpg'); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + h1 { + font-weight: 700; + color: #fff; + } } - padding: 0.5em 1em; -} -.cp-features-web { - .card { - box-shadow: 0 5px 15px rgba(69, 145, 196, 0.3); - border: none; + #cp-features-register { + text-align: center; + padding: 20px; } - h3 { + .cp-features-register-button { + font-size: 20px; color: #fff; + background: @cryptpad_color_blue; + border: 2px solid @cryptpad_color_blue; + border-radius: 0; + &:hover { + transform: scale(1.05); + cursor: pointer; + } + padding: 0.5em 1em; } - .list-group { - li { - &:before { - content: "\f00c"; - font-family: "FontAwesome"; - font-size: 14px; - color: @cryptpad_color_blue; - padding-right: 10px; + .cp-features-web { + .card { + box-shadow: 0 5px 15px rgba(69, 145, 196, 0.3); + border: none; + } + h3 { + color: #fff; + } + .list-group { + li { + &:before { + content: "\f00c"; + font-family: "FontAwesome"; + font-size: 14px; + color: @cryptpad_color_blue; + padding-right: 10px; + } + } + div { + display: inline; } } - div { - display: inline; + a.voted { + opacity: 0.6; + margin-left: 15px; + &:hover { + opacity: 1; + } } - } - a.voted { - opacity: 0.6; - margin-left: 15px; - &:hover { - opacity: 1; + .list-group-item { + border-color: rgba(69, 145, 196, 0.125); } } - .list-group-item { - border-color: rgba(69, 145, 196, 0.125); - } -} -.cp-anon-user { - .card-body { - background-color: @cryptpad_color_blue; - } -} -.cp-regis-user { - @media (max-width:575px) { - margin-top: 3em; + .cp-anon-user { + .card-body { + background-color: @cryptpad_color_blue; + } } - .card-body { - &:first-of-type { - background: #4591C4; - background: -webkit-linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false - background: linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false + .cp-regis-user { + @media (max-width:575px) { + margin-top: 3em; + } + .card-body { + &:first-of-type { + background: #4591C4; + background: -webkit-linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false + background: linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false + } } } -} +} \ No newline at end of file diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less index 54f8c6275..f6217e300 100644 --- a/customize.dist/src/less2/pages/page-index.less +++ b/customize.dist/src/less2/pages/page-index.less @@ -1,192 +1,192 @@ -@import (once) "../include/infopages.less"; +@import (reference) "../include/infopages.less"; @import (reference) "../include/colortheme-all.less"; -.infopages_main(); -.infopages_topbar(); +&.cp-page-index { + .infopages_main(); -@background_lighter: rgba(0,0,0,0.1); -@background_darker: rgba(0,0,0,0.4); -#cp-main { - color: #FFF; - background: linear-gradient( @background_darker, @background_lighter ), url('/customize/bg14.jpg'); - background-size: cover; - background-position: center; - min-height: 100vh; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - .container { - @media only screen and (max-device-width : 576px) { - margin-top: 6em; - } - } -} -body { - font-family: "Open Sans", Helvetica; -} -.cp-right { - .cp-register-btn { - padding: 0.5em 1em 0.7em 1em; - border: 2px solid #fff; - &:hover { - transform: scale(1.05); - } - } - .cp-login-btn { - color: #fff; - padding: 0.5em 1em 0.7em 1em; - &:hover { - transform: scale(1.05); - } - } -} -.cp-title { - display: flex; - align-items: center; - flex-direction: column; - margin-top: 1.5em; - img { - height: 20vh; - margin-bottom: 1.5em; - } - margin-left: 0; - h1 { - font-family: "Neuropolitical"; - //font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif; - //font-family: "Raleway"; - font-size: 45px; - } - p { - //font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 20px; - //font-style: italic; - } -} -.navbar { - background: transparent; - width: 100%; - @media only screen and (max-device-width: 991px) { - margin-top: 0; + @background_lighter: rgba(0,0,0,0.1); + @background_darker: rgba(0,0,0,0.4); + #cp-main { + color: #FFF; + background: linear-gradient( @background_darker, @background_lighter ), url('/customize/bg14.jpg'); + background-size: cover; + background-position: center; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + .container { + @media only screen and (max-device-width : 576px) { + margin-top: 6em; + } + } } - .navbar-brand { - background-image: url(/customize/CryptPad-white-logo.svg); + body { + font-family: "Open Sans", Helvetica; } - a { - color: #fff; - &:visited { - color: rgba(255,255,255,.9); - }; + .cp-right { + .cp-register-btn { + padding: 0.5em 1em 0.7em 1em; + border: 2px solid #fff; + &:hover { + transform: scale(1.05); + } + } + .cp-login-btn { + color: #fff; + padding: 0.5em 1em 0.7em 1em; + &:hover { + transform: scale(1.05); + } + } } - .nav-link { - &:hover { - color: inherit; - transform: scale(1.05); - }; + .cp-title { + display: flex; + align-items: center; + flex-direction: column; + margin-top: 1.5em; + img { + height: 20vh; + margin-bottom: 1.5em; + } + margin-left: 0; + h1 { + font-family: "Neuropolitical"; + //font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif; + //font-family: "Raleway"; + font-size: 45px; + } + p { + //font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 20px; + //font-style: italic; + } } - .cp-register-btn { - border: 2px solid #fff; + .navbar { + background: transparent; + width: 100%; + @media only screen and (max-device-width: 991px) { + margin-top: 0; + } + .navbar-brand { + background-image: url(/customize/CryptPad-white-logo.svg); + } + a { + color: #fff; + &:visited { + color: rgba(255,255,255,.9); + }; + } + .nav-link { + &:hover { + color: inherit; + transform: scale(1.05); + }; + } + .cp-register-btn { + border: 2px solid #fff; + } + .navbar-toggler { + margin-top: 10px; + color: #fff; + } } - .navbar-toggler { - margin-top: 10px; - color: #fff; + @callout-padding: 15px; + a:hover { + text-decoration: none; } -} -@callout-padding: 15px; -a:hover { - text-decoration: none; -} -.bs-callout { - display: flex; - align-items: stretch; - margin: 25px 0; - background: rgba(255,255,255,0.6); - color: black; - transition: all .1s ease-in-out; - box-sizing: border-box; - height: 5em; - position: relative; - a { + .bs-callout { + display: flex; + align-items: stretch; + margin: 25px 0; + background: rgba(255,255,255,0.6); color: black; - &:hover { text-decoration-line: none; } - } - div h4 { - @media only screen and (min-device-width: 576px) and (max-device-width: 767px) { - font-size: 1.3em; - } - } -} -h4 { - margin: 0; -} -.cp-callout-more-moremsg,.cp-callout-more-lessmsg { - transform: none !important; -} -.bs-callout div { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - position: absolute; - left: 5em; -} -.bs-callout+.bs-callout { - margin-top: -5px; -} - -.bs-callout:hover { - //color: white; - transform: scale(1.05); - cursor: pointer; -} -.bs-callout:hover.cp-callout-more { - transform: none !important; -} -.bs-callout .fa { - display: flex; - align-items: center; - font-size: 2em; - padding-left: 0.57em; - width: 2em; - transition: width 0.1s; - color: #fff; -} -.cp-callout-pad .fa { background-color: @colortheme_pad-bg; } -.cp-callout-code .fa { background-color: @colortheme_code-bg; } -.cp-callout-slide .fa { background-color: @colortheme_slide-bg; } -.cp-callout-poll .fa { background-color: @colortheme_poll-bg; } -.cp-callout-kanban .fa { background-color: @colortheme_kanban-bg; } -.cp-callout-whiteboard .fa { background-color: @colortheme_whiteboard-bg; } -.cp-callout-recent .fa { background-color: @colortheme_drive-bg; } -.cp-hidden { display: none !important; } -.cp-callout-more { - display: inline-block; - align-content: center; - height: 2em; - border-radius: 1em; - margin-left: auto; - margin-right: auto; - margin-top: 0; - background: none; - width: 100%; - div { - .infopages_link(); - color: #fff; - .fa { - font-size: inherit; - padding: 0; - width: 1em; - padding-left: 5px; + transition: all .1s ease-in-out; + box-sizing: border-box; + height: 5em; + position: relative; + a { + color: black; + &:hover { text-decoration-line: none; } } + div h4 { + @media only screen and (min-device-width: 576px) and (max-device-width: 767px) { + font-size: 1.3em; + } + } + } + h4 { + margin: 0; + } + .cp-callout-more-moremsg,.cp-callout-more-lessmsg { + transform: none !important; } -} -@media (min-width: 576px) and (max-width: 767px) { - .container { - padding-left: 0; - padding-right: 0; + .bs-callout div { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + position: absolute; + left: 5em; } - div#cp-main.cp-page-index .cp-topbar .navbar-toggler-left { - left: 5px; + .bs-callout+.bs-callout { + margin-top: -5px; } -} + .bs-callout:hover { + //color: white; + transform: scale(1.05); + cursor: pointer; + } + .bs-callout:hover.cp-callout-more { + transform: none !important; + } + .bs-callout .fa { + display: flex; + align-items: center; + font-size: 2em; + padding-left: 0.57em; + width: 2em; + transition: width 0.1s; + color: #fff; + } + .cp-callout-pad .fa { background-color: @colortheme_pad-bg; } + .cp-callout-code .fa { background-color: @colortheme_code-bg; } + .cp-callout-slide .fa { background-color: @colortheme_slide-bg; } + .cp-callout-poll .fa { background-color: @colortheme_poll-bg; } + .cp-callout-kanban .fa { background-color: @colortheme_kanban-bg; } + .cp-callout-whiteboard .fa { background-color: @colortheme_whiteboard-bg; } + .cp-callout-recent .fa { background-color: @colortheme_drive-bg; } + .cp-hidden { display: none !important; } + .cp-callout-more { + display: inline-block; + align-content: center; + height: 2em; + border-radius: 1em; + margin-left: auto; + margin-right: auto; + margin-top: 0; + background: none; + width: 100%; + div { + .infopages_link(); + color: #fff; + .fa { + font-size: inherit; + padding: 0; + width: 1em; + padding-left: 5px; + } + } + } + @media (min-width: 576px) and (max-width: 767px) { + .container { + padding-left: 0; + padding-right: 0; + } + div#cp-main.cp-page-index .cp-topbar .navbar-toggler-left { + left: 5px; + } + } +} \ No newline at end of file diff --git a/customize.dist/src/less2/pages/page-login.less b/customize.dist/src/less2/pages/page-login.less index 8eec31f67..329e09077 100644 --- a/customize.dist/src/less2/pages/page-login.less +++ b/customize.dist/src/less2/pages/page-login.less @@ -1,69 +1,70 @@ -@import (once) "../include/infopages.less"; +@import (reference) "../include/infopages.less"; @import (reference) "../include/colortheme-all.less"; @import (reference) "../include/alertify.less"; @import (reference) "../include/checkmark.less"; -.infopages_main(); -.infopages_topbar(); -.alertify_main(); -.checkmark_main(20px); +&.cp-page-login { + .infopages_main(); + .alertify_main(); + .checkmark_main(20px); -.form-group { - .extra { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - } -} -.cp-container { - #data { - background: #4591C4; - padding-top: 3em; - padding-bottom: 7em; - padding-left: 30px; - padding-right: 30px; - p { - color: #fff; - } - h2 { - font-weight: 700; - color: @cryptpad_header_col; + .form-group { + .extra { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; } } - #userForm { - padding-top: 3em; - padding-bottom: 2em; - .form-control { - border-radius: 0; - color: @cryptpad_text_col; - margin-top: 1em; - &:focus { - border-color: @cryptpad_color_blue; + .cp-container { + #data { + background: #4591C4; + padding-top: 3em; + padding-bottom: 7em; + padding-left: 30px; + padding-right: 30px; + p { + color: #fff; + } + h2 { + font-weight: 700; + color: @cryptpad_header_col; + } + } + #userForm { + padding-top: 3em; + padding-bottom: 2em; + .form-control { + border-radius: 0; + color: @cryptpad_text_col; + margin-top: 1em; + &:focus { + border-color: @cryptpad_color_blue; + } + } + .checkbox-container { + color: @cryptpad_text_col; } } - .checkbox-container { - color: @cryptpad_text_col; + .align-items-center { + box-shadow: 0 5px 15px rgba(69,145,196, 0.3); + background: #fff; } - } - .align-items-center { - box-shadow: 0 5px 15px rgba(69,145,196, 0.3); - background: #fff; - } - .extra { - margin-top: 1em; - .login { - background: @cryptpad_color_blue; - color: #fff; - padding: 10px; - border-radius: 0; - &:hover { - transform: scale(1.05); + .extra { + margin-top: 1em; + .login { + background: @cryptpad_color_blue; + color: #fff; + padding: 10px; + border-radius: 0; + &:hover { + transform: scale(1.05); + } } } } -} -.cp-container { - padding-top: 3em; - min-height: 66vh; -} + .cp-container { + padding-top: 3em; + min-height: 66vh; + } +} \ No newline at end of file diff --git a/customize.dist/src/less2/pages/page-privacy.less b/customize.dist/src/less2/pages/page-privacy.less index 3abbc43c3..137f34683 100644 --- a/customize.dist/src/less2/pages/page-privacy.less +++ b/customize.dist/src/less2/pages/page-privacy.less @@ -1,48 +1,50 @@ -@import (once) "../include/infopages.less"; +@import (reference) "../include/infopages.less"; @import (reference) "../include/colortheme-all.less"; -.infopages_main(); -.infopages_topbar(); -#cp-main { - background: #fff; -} -.cp-privacy-top { - padding-top: 3em; - padding-bottom: 3em; - background-image: url(/customize/images/cover-privacy.jpg); - background-size: cover; - background-repeat: no-repeat; - background-position: center; - .container { - color: #fff; - font-family: "Open Sans"; - h1 { - font-weight: 700; - } - a { +&.cp-page-privacy { + .infopages_main(); + + #cp-main { + background: #fff; + } + .cp-privacy-top { + padding-top: 3em; + padding-bottom: 3em; + background-image: url(/customize/images/cover-privacy.jpg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + .container { color: #fff; - text-decoration: underline; + font-family: "Open Sans"; + h1 { + font-weight: 700; + } + a { + color: #fff; + text-decoration: underline; + } + p { + padding-top: 1em; + } + } + } + .cp-privacy { + background-image: url(/customize/CryptPadlogo_op5.svg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + hr { + margin-left: 0; + width: 15rem; + border-top: 2px solid #4591C4; + } + h3 { + color: #1E1F1F; + font-weight: 700; } p { - padding-top: 1em; + color: #3F4141; } } -} -.cp-privacy { - background-image: url(/customize/CryptPadlogo_op5.svg); - background-size: cover; - background-repeat: no-repeat; - background-position: center; - hr { - margin-left: 0; - width: 15rem; - border-top: 2px solid #4591C4; - } - h3 { - color: #1E1F1F; - font-weight: 700; - } - p { - color: #3F4141; - } -} +} \ No newline at end of file diff --git a/customize.dist/src/less2/pages/page-register.less b/customize.dist/src/less2/pages/page-register.less index 26c8b0f1f..37ddf333f 100644 --- a/customize.dist/src/less2/pages/page-register.less +++ b/customize.dist/src/less2/pages/page-register.less @@ -1,139 +1,141 @@ -@import (once) "../include/infopages.less"; +@import (reference) "../include/infopages.less"; @import (reference) "../include/colortheme-all.less"; @import (reference) "../include/alertify.less"; @import (reference) "../include/checkmark.less"; -.infopages_main(); -.infopages_topbar(); -.alertify_main(); -.checkmark_main(20px); +&.cp-page-register { + .infopages_main(); -.cp-container { - .form-group { - .checkbox-container { - &:nth-of-type(1) { - margin-top: 2em; - } - &:last-of-type { - margin-bottom: 1em; + .alertify_main(); + .checkmark_main(20px); + + .cp-container { + .form-group { + .checkbox-container { + &:nth-of-type(1) { + margin-top: 2em; + } + &:last-of-type { + margin-bottom: 1em; + } } - } - #register { - &.btn { - padding: .5rem .5rem; + #register { + &.btn { + padding: .5rem .5rem; + } + margin-top: 16px; + font-size: 1.25em; + min-width: 30%; } - margin-top: 16px; - font-size: 1.25em; - min-width: 30%; } + padding-bottom: 3em; + min-height: 5vh; } - padding-bottom: 3em; - min-height: 5vh; -} -.alertify { - // workaround for alertify making empty p - p:empty { - display: none; + .alertify { + // workaround for alertify making empty p + p:empty { + display: none; + } } -} -.cp-register-wel { - padding-top: 6em; - padding-bottom: 20em; - background-image: url(/customize/bkregister.jpg); - background-size: cover; - background-repeat: no-repeat; - background-position: center; - h1 { - font-weight: 700; - color: #fff; - text-shadow: 0 1px 5px rgba(0,0,0,.2); + .cp-register-wel { + padding-top: 6em; + padding-bottom: 20em; + background-image: url(/customize/bkregister.jpg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + h1 { + font-weight: 700; + color: #fff; + text-shadow: 0 1px 5px rgba(0,0,0,.2); + } } -} -.cp-register-det { - margin-top: -7em; - background: #fff; - box-shadow: 0 5px 15px rgba(69,145,196, 0.3); + .cp-register-det { + margin-top: -7em; + background: #fff; + box-shadow: 0 5px 15px rgba(69,145,196, 0.3); - #data { - // Old browsers - background: #4591C4; + #data { + // Old browsers + background: #4591C4; - // Chrome 10-25, Safari 5.1-6 - background: -webkit-linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false + // Chrome 10-25, Safari 5.1-6 + background: -webkit-linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false - // W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ - background: linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false + // W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ + background: linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false - padding-top: 3em; - padding-bottom: 7em; - padding-left: 30px; - padding-right: 30px; - p { - color: #fff; - li { - margin-bottom: 1em; + padding-top: 3em; + padding-bottom: 7em; + padding-left: 30px; + padding-right: 30px; + p { + color: #fff; + li { + margin-bottom: 1em; + } + .fa { + font-size: 1.5em; + padding-right: 10px; + color: #000; + } } - .fa { - font-size: 1.5em; - padding-right: 10px; - color: #000; + h3 { + font-weight: 700; + margin-bottom: 1em; } } - h3 { - font-weight: 700; - margin-bottom: 1em; + #userForm { + padding-top: 3em; + padding-bottom: 2em; + .form-control { + border-radius: 0; + color: @cryptpad_text_col; + margin-top: 1em; + &:focus { + border-color: @cryptpad_color_blue; + } + } + .checkbox-container { + color: @cryptpad_text_col; + } } - } - #userForm { - padding-top: 3em; - padding-bottom: 2em; - .form-control { + .cp-login-register { + color: @cryptpad_color_blue; + background: #fff; + border: 2px solid @cryptpad_color_blue; border-radius: 0; - color: @cryptpad_text_col; - margin-top: 1em; - &:focus { - border-color: @cryptpad_color_blue; + &:hover { + transform: scale(1.05); } } - .checkbox-container { + } + .cp-register-test { + margin-top: 3em; + hr { + width: 15rem; + border-top: 2px solid @cryptpad_color_blue; + margin-top: 0; + margin-bottom: 2em; + } + p { + margin-bottom: 0; + } + .cp-test-source { + font-style: italic; + } + .test-details { + padding-left: 4em; + background-image: url(/customize/testimonial.svg); + background-repeat: no-repeat; + background-position: left top; + background-size: 3em; color: @cryptpad_text_col; } + } - .cp-login-register { - color: @cryptpad_color_blue; + #cp-main { background: #fff; - border: 2px solid @cryptpad_color_blue; - border-radius: 0; - &:hover { - transform: scale(1.05); - } - } -} -.cp-register-test { - margin-top: 3em; - hr { - width: 15rem; - border-top: 2px solid @cryptpad_color_blue; - margin-top: 0; - margin-bottom: 2em; - } - p { - margin-bottom: 0; } - .cp-test-source { - font-style: italic; - } - .test-details { - padding-left: 4em; - background-image: url(/customize/testimonial.svg); - background-repeat: no-repeat; - background-position: left top; - background-size: 3em; - color: @cryptpad_text_col; - } - -} -#cp-main { - background: #fff; -} +} \ No newline at end of file diff --git a/customize.dist/src/less2/pages/page-terms.less b/customize.dist/src/less2/pages/page-terms.less index d16a7d589..79fdafd1f 100644 --- a/customize.dist/src/less2/pages/page-terms.less +++ b/customize.dist/src/less2/pages/page-terms.less @@ -1,5 +1,6 @@ -@import (once) "../include/infopages.less"; +@import (reference) "../include/infopages.less"; @import (reference) "../include/colortheme-all.less"; -.infopages_main(); -.infopages_topbar(); +&.cp-page-terms { + .infopages_main(); +} diff --git a/customize.dist/src/less2/pages/page-what-is-cryptpad.less b/customize.dist/src/less2/pages/page-what-is-cryptpad.less index 0e26f91ed..28522f337 100644 --- a/customize.dist/src/less2/pages/page-what-is-cryptpad.less +++ b/customize.dist/src/less2/pages/page-what-is-cryptpad.less @@ -1,43 +1,44 @@ -@import (once) "../include/infopages.less"; +@import (reference) "../include/infopages.less"; @import (reference) "../include/colortheme-all.less"; -.infopages_main(); -.infopages_topbar(); +&.cp-page-what-is-cryptpad { + .infopages_main(); -.cp-what-is { + .cp-what-is { + padding-top: 3em; + padding-bottom: 3em; + background-image: url(/customize/bkwhat.jpg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + color: #fff; + h1 { + font-weight: 700; + } + } + #cp-main { + background: #fff; + } + .cp-container { padding-top: 3em; padding-bottom: 3em; - background-image: url(/customize/bkwhat.jpg); - background-size: cover; - background-repeat: no-repeat; - background-position: center; - color: #fff; - h1 { + h2 { + margin-top: 0; font-weight: 700; + color: @cryptpad_header_col; + } + p { + color: @cryptpad_text_col; + } + #zeroknowledge { + width: 65%; + } + .row { + margin-bottom: 1.5em; + } + img { + display: block; + margin: 0 auto; } -} -#cp-main { - background: #fff; -} -.cp-container { - padding-top: 3em; - padding-bottom: 3em; - h2 { - margin-top: 0; - font-weight: 700; - color: @cryptpad_header_col; - } - p { - color: @cryptpad_text_col; - } - #zeroknowledge { - width: 65%; - } - .row { - margin-bottom: 1.5em; - } - img { - display: block; - margin: 0 auto; } -} +} \ No newline at end of file diff --git a/customize.dist/src/less2/readme.md b/customize.dist/src/less2/readme.md index 08a26ec9b..062b5baff 100644 --- a/customize.dist/src/less2/readme.md +++ b/customize.dist/src/less2/readme.md @@ -1,19 +1,45 @@ # CryptPad Styling -How it works: -* 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 `
` -* There is a corresponding less file called `less2/pages/page-index.less` -* Finally there is a corresponding line in main.less which imports that less file: `div#main.cp-page-index { @import "./pages/page-index.less"; }` - * cp-page-index class means: - * cp -> cryptpad - * page -> this is a style for accessing a page's less file - * index -> the name of the page and of the less file (page-index.less) -* And everything which is standardized across pages is included from `page-index.less` as variables and mixins. +## Linking Less/CSS + +In order to keep the amount of CSS generated under control, we use "linking", via the LessLoader. +This makes use of CSS variables in order to work. The old solution was to put all of the content into less mixins +which would be used inside of the scope where they should be, but this caused a state explosion because each app needed +essentially the same mixins. However, these mixins had arguments such as colors which were different per-app. + +The new solution is to set CSS variables for the arguments (like color) and then put the bulk of the less at the global +scope. When you include a dependency, the following happens: + +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-`. -* 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. * e.g. `@colortheme_toolbar-poll-bg: #006304;` defined in `colortheme.less` * All mixin / variable files go in an `/include/` directory. diff --git a/customize.dist/template.js b/customize.dist/template.js index 0ee34d407..661ce6687 100644 --- a/customize.dist/template.js +++ b/customize.dist/template.js @@ -26,7 +26,7 @@ $(function () { window.Tether = function () {}; require([ - 'less!/customize/src/less2/main.less', + 'less!/customize/src/less2/pages/page-' + css + '.less', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css' ], function () { $body.append($main); diff --git a/www/code/app-code.less b/www/code/app-code.less index a8c78fc02..37a18b4ee 100644 --- a/www/code/app-code.less +++ b/www/code/app-code.less @@ -2,15 +2,13 @@ @import (reference) "../../customize/src/less2/include/markdown.less"; @import (reference) "../../customize/src/less2/include/framework.less"; - -.framework_main( - @bg-color: @colortheme_code-bg, - @warn-color: @colortheme_code-warn, - @color: @colortheme_code-color -); - -// body &.cp-app-code { + .framework_main( + @bg-color: @colortheme_code-bg, + @warn-color: @colortheme_code-warn, + @color: @colortheme_code-color + ); + display: flex; flex-flow: column; max-height: 100%; diff --git a/www/code/inner.js b/www/code/inner.js index afb4cdcd0..9b52f9806 100644 --- a/www/code/inner.js +++ b/www/code/inner.js @@ -37,6 +37,8 @@ define([ 'cm/addon/fold/comment-fold', 'cm/addon/display/placeholder', + 'less!/code/app-code.less' + ], function ( $, DiffMd, diff --git a/www/common/LessLoader.js b/www/common/LessLoader.js index 04fa68714..39f04db5c 100644 --- a/www/common/LessLoader.js +++ b/www/common/LessLoader.js @@ -4,9 +4,11 @@ const define = (x:any, y:any) => {}; const require = define; */ define([ - '/api/config' -], function (Config) { /*::});module.exports = (function() { + '/api/config', + '/bower_components/nthen/index.js' +], function (Config, nThen) { /*::});module.exports = (function() { const Config = (undefined:any); + const nThen = require('/bower_components/nthen/index.js'); */ var module = { exports: {} }; @@ -100,6 +102,10 @@ define([ require(['/bower_components/less/dist/less.min.js'], function (Less) { if (lessEngine) { return void cb(lessEngine); } lessEngine = Less; + Less.functions.functionRegistry.add('LessLoader_currentFile', function () { + return new Less.tree.UnicodeDescriptor('"' + + fixURL(this.currentFileInfo.filename) + '"'); + }); var doXHR = lessEngine.FileManager.prototype.doXHR; lessEngine.FileManager.prototype.doXHR = function (url, type, callback, errback) { url = fixURL(url); @@ -133,19 +139,32 @@ define([ }); }; - module.exports.load = function (url /*:string*/, cb /*:()=>void*/) { + var loadSubmodulesAndInject = function (css, url, cb, stack) { + 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*/) { + 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) { - inject(css, url); - return void cb(); - } + if (css) { return void loadSubmodulesAndInject(css, url, done, stack); } console.log('CACHE MISS ' + url); ((/\.less([\?\#].*)?$/.test(url)) ? loadLess : loadCSS)(url, function (err, css) { if (!css) { return void console.error(err); } var output = fixAllURLs(css, url); cachePut(url, output); - inject(output, url); - cb(); + loadSubmodulesAndInject(output, url, done, stack); }); }); }; diff --git a/www/common/file-dialog.less b/www/common/file-dialog.less index 8f47f6024..5fc260f43 100644 --- a/www/common/file-dialog.less +++ b/www/common/file-dialog.less @@ -2,8 +2,8 @@ @import (reference) '../customize/src/less2/include/modal.less'; .fileDialog_main () { - .modal_main(); #fileDialog { + .modal_main(); display: none; .cp-modal { .fileContainer { diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js index e0b9aa1ea..656b6535f 100644 --- a/www/common/sframe-app-framework.js +++ b/www/common/sframe-app-framework.js @@ -18,7 +18,6 @@ define([ '/bower_components/file-saver/FileSaver.min.js', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css', - 'less!/customize/src/less2/main.less', ], function ( $, Hyperjson, diff --git a/www/contacts/app-contacts.less b/www/contacts/app-contacts.less index 66fdb7a8b..35021bb73 100644 --- a/www/contacts/app-contacts.less +++ b/www/contacts/app-contacts.less @@ -1,14 +1,14 @@ @import (reference) '../../customize/src/less2/include/avatar.less'; @import (reference) '../../customize/src/less2/include/framework.less'; -.framework_min_main( - @bg-color: @colortheme_friends-bg, - @warn-color: @colortheme_friends-warn, - @color: @colortheme_friends-color -); - // body &.cp-app-contacts { + .framework_min_main( + @bg-color: @colortheme_friends-bg, + @warn-color: @colortheme_friends-warn, + @color: @colortheme_friends-color + ); + @keyframes example { 0% { background: rgba(0,0,0,0.1); diff --git a/www/contacts/inner.js b/www/contacts/inner.js index 7f9983c5d..0aa4ecbbc 100644 --- a/www/contacts/inner.js +++ b/www/contacts/inner.js @@ -12,7 +12,7 @@ define([ 'css!/bower_components/bootstrap/dist/css/bootstrap.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 ( $, Crypto, diff --git a/www/debug/app-debug.less b/www/debug/app-debug.less index c1e8a25b3..d1651642d 100644 --- a/www/debug/app-debug.less +++ b/www/debug/app-debug.less @@ -1,11 +1,11 @@ @import (reference) '../../customize/src/less2/include/tokenfield.less'; @import (reference) '../../customize/src/less2/include/framework.less'; -.tokenfield_main(); -.framework_min_main(); - // body &.cp-app-debug { + .tokenfield_main(); + .framework_min_main(); + display: flex; flex-flow: column; height: 100%; diff --git a/www/debug/inner.js b/www/debug/inner.js index 9968ab13b..5efffd8fe 100644 --- a/www/debug/inner.js +++ b/www/debug/inner.js @@ -16,7 +16,7 @@ define([ 'css!/bower_components/bootstrap/dist/css/bootstrap.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 ( $, Crypto, diff --git a/www/drive/app-drive.less b/www/drive/app-drive.less index eabc6df08..8c0c1a083 100644 --- a/www/drive/app-drive.less +++ b/www/drive/app-drive.less @@ -5,865 +5,864 @@ @import (reference) "../../customize/src/less2/include/tokenfield.less"; @import (reference) '../../customize/src/less2/include/framework.less'; -.framework_min_main( - @bg-color: @colortheme_drive-bg, - @warn-color: @colortheme_drive-warn, - @color: @colortheme_drive-color -); +&.cp-app-drive { + .framework_min_main( + @bg-color: @colortheme_drive-bg, + @warn-color: @colortheme_drive-warn, + @color: @colortheme_drive-color + ); -.limit-bar_main(); -.tokenfield_main(); + .limit-bar_main(); + .tokenfield_main(); -@drive_hover: #eee; -@drive_hover-light: lighten(@drive_hover, 20%); -@drive_info-box-bg: #d2e1f2; -@drive_info-box-border: #bbb; -@drive_table-header-fg: #555; -@drive_table-header-bg: #e8e8e8; -@drive_mobile-tree-border-col: #ccc; + @drive_hover: #eee; + @drive_hover-light: lighten(@drive_hover, 20%); + @drive_info-box-bg: #d2e1f2; + @drive_info-box-border: #bbb; + @drive_table-header-fg: #555; + @drive_table-header-bg: #e8e8e8; + @drive_mobile-tree-border-col: #ccc; -@drive_content-fg: @colortheme_sidebar-right-fg; -@drive_content-bg: @colortheme_sidebar-right-bg; -@drive_content-bg-ro: darken(@drive_content-bg, 10%); + @drive_content-fg: @colortheme_sidebar-right-fg; + @drive_content-bg: @colortheme_sidebar-right-bg; + @drive_content-bg-ro: darken(@drive_content-bg, 10%); -/* PAGE */ + /* PAGE */ -display: flex; -flex-flow: column; -max-height: 100%; -min-height: auto; + display: flex; + flex-flow: column; + max-height: 100%; + min-height: auto; -.cp-unselectable { - .tools_unselectable(); -} + .cp-unselectable { + .tools_unselectable(); + } -/* local mixins */ -.drive_fileIcon { - li { - display: inline-block; - margin: 10px 10px; - width: 140px; - height: 140px; - text-align: center; - vertical-align: top; - overflow: hidden; - text-overflow: ellipsis; - padding-top: 5px; - padding-bottom: 5px; - border: 1px solid transparent; - - &:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-selected-tmp) { - border: 1px solid #CCC; - } - .cp-app-drive-element-name { - width: 100%; - height: 24px; - margin: 0; + /* local mixins */ + .drive_fileIcon { + li { display: inline-block; - font-size: 14px; - //align-items: center; - //justify-content: center; + margin: 10px 10px; + width: 140px; + height: 140px; + text-align: center; + vertical-align: top; overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; - word-wrap: break-word; - } - .cp-app-drive-element-truncated { - display: block; - position: absolute; - bottom: 0px; - left: 0; right: 0; - text-align: center; - } - img.cp-app-drive-content-icon { - height: 48px; - max-height: none; - max-width: none; - margin: 8px 0; - } - .fa { - display: block; - margin: auto; - font-size: 64px; - margin: 18px 0; - text-align: center; - &.listonly { - display: none; + padding-top: 5px; + padding-bottom: 5px; + border: 1px solid transparent; + + &:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-selected-tmp) { + border: 1px solid #CCC; + } + .cp-app-drive-element-name { + width: 100%; + height: 24px; + margin: 0; + display: inline-block; + font-size: 14px; + //align-items: center; + //justify-content: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + word-wrap: break-word; + } + .cp-app-drive-element-truncated { + display: block; + position: absolute; + bottom: 0px; + left: 0; right: 0; + text-align: center; + } + img.cp-app-drive-content-icon { + height: 48px; + max-height: none; + max-width: none; + margin: 8px 0; + } + .fa { + display: block; + margin: auto; + font-size: 64px; + margin: 18px 0; + text-align: center; + &.listonly { + display: none; + } } } } -} -img.cp-app-drive-icon { - max-width: 20px; - max-height: 16px; -} + img.cp-app-drive-icon { + max-width: 20px; + max-height: 16px; + } -.cp-app-drive-container { - flex: 1; - overflow: auto; - width: 100%; - display: flex; - flex-flow: row; - @media screen and (max-width: @browser_media-medium-screen) { - display: block; - #cp-app-drive-toolbar { - .path .element { - display: none; + .cp-app-drive-container { + flex: 1; + overflow: auto; + width: 100%; + display: flex; + flex-flow: row; + @media screen and (max-width: @browser_media-medium-screen) { + display: block; + #cp-app-drive-toolbar { + .path .element { + display: none; + } } - } - #cp-app-drive-tree { - resize: none; - width: 100%; - max-width: unset; - max-height: unset; - border-bottom: 1px solid @drive_mobile-tree-border-col; - .cp-app-drive-tree-category { - margin-top: 0.5em; + #cp-app-drive-tree { + resize: none; + width: 100%; + max-width: unset; + max-height: unset; + border-bottom: 1px solid @drive_mobile-tree-border-col; + .cp-app-drive-tree-category { + margin-top: 0.5em; + } } } } -} - -div:focus { - outline: none; -} - -.fa { - font-family: FontAwesome; -} - -ul { - list-style: none; - padding-left: 0px; // Remove the default padding -} - -li { - padding: 0px 5px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.cp-app-drive-context { - display: none; - position: absolute; - z-index: 500; - li { - padding: 0; - font-size: @colortheme_app-font-size; - a { - cursor: pointer; - } - } -} - -.cp-app-drive-element-droppable { - background-color: #FE9A2E; - color: #222; -} - -.cp-app-drive-element-selected { - background: #666 !important; - color: #eee; - margin: -1px; - .fa-minus-square-o, .fa-plus-square-o { - color: @colortheme_sidebar-left-fg; - } -} - -.cp-app-drive-element-selected-tmp { - border: 1px dotted #bbb; - background: #AAA; - color: #ddd; - margin: -1px; - .fa-minus-square-o, .fa-plus-square-o { - color: @colortheme_sidebar-left-fg; + + div:focus { + outline: none; } -} -span { - &.fa-folder, &.fa-folder-open { - //color: #FEDE8B; - //text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; + .fa { + font-family: FontAwesome; } -} - -/* TREE */ - - -#cp-app-drive-tree { - font-size: @colortheme_app-font-size; - //border-right: 1px solid #ccc; - box-sizing: border-box; - background: @colortheme_sidebar-left-bg; - overflow: auto; - resize: horizontal; - width: auto; - white-space: nowrap; - max-width: 500px; - min-width: 200px; - padding: 0px; - color: @colortheme_sidebar-left-fg; - display: flex; - flex-flow: column; - max-height: 100%; - .cp-app-drive-tree-categories-container { - flex: 1; - max-width: 500px; - overflow: auto; + + ul { + list-style: none; + padding-left: 0px; // Remove the default padding } - img.cp-app-drive-icon { - margin-bottom: 3px; - margin-left: -2px; + + li { + padding: 0px 5px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } - .cp-app-drive-tree-docs { - margin-top: 20px; - //padding: 0 0 0 20px; - padding: 0; - cursor: auto; - &li, li { + + .cp-app-drive-context { + display: none; + position: absolute; + z-index: 500; + li { padding: 0; - &.cp-app-drive-element-collapsed ul { - display: none; - } - input { - width: ~"calc(100% - 30px)"; - padding: 0 10px; - border: 0; - color: lighten(@colortheme_sidebar-left-fg, 40%); - } - & > span.cp-app-drive-element-row { - overflow: hidden; - text-overflow: ellipsis; - //min-width: ~"calc(100% + 5px)"; - .leftside-menu-category_main(); - width: ~"calc(100% + 5px)"; - margin: 0; - margin-bottom: -6px; - display: inline-block; + font-size: @colortheme_app-font-size; + a { cursor: pointer; - margin-left: -5px; - padding-left: 5px; - } - & > span.cp-app-drive-element-row:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-active):hover { } } } - span.cp-app-drive-element { - cursor: pointer; + + .cp-app-drive-element-droppable { + background-color: #FE9A2E; + color: #222; } - .cp-app-drive-tree-category { - margin: 0; - margin-top: 15px; - .cp-app-drive-tree-root { - &> .fa { - min-width: 30px; - cursor: pointer; - } - } - li { - padding: 0; - .cp-app-drive-element-row { - display: block; - padding-left: 20px; - .leftside-menu-category_main(); - margin: 0; - .fa { - width: 25px; - } - } + + .cp-app-drive-element-selected { + background: #666 !important; + color: #eee; + margin: -1px; + .fa-minus-square-o, .fa-plus-square-o { + color: @colortheme_sidebar-left-fg; } } - .cp-app-drive-tree-category:last-child { - margin-bottom: 20px; + + .cp-app-drive-element-selected-tmp { + border: 1px dotted #bbb; + background: #AAA; + color: #ddd; + margin: -1px; + .fa-minus-square-o, .fa-plus-square-o { + color: @colortheme_sidebar-left-fg; + } } - .cp-limit-container { - margin-top: 5px; + + span { + &.fa-folder, &.fa-folder-open { + //color: #FEDE8B; + //text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; + } } - #cp-app-drive-tree-search { - text-align: center; - padding: 0; - position: relative; - input { - background: lighten(@colortheme_drive-bg, 8%); - color: @colortheme_drive-color; - .tools_placeholder-color(@colortheme_drive-color); - outline-width: 0px; - border-radius: 0; - width: 100%; - //border: 1px solid #ccc; - border: 0; - border-right: 1px solid lighten(@colortheme_drive-bg, 16%); - //border-right: 0; - height: @variables_bar-height; - padding: 0 5px; - padding-left: 45px; - &:focus { - outline-width: 0px; + + /* TREE */ + + + #cp-app-drive-tree { + font-size: @colortheme_app-font-size; + //border-right: 1px solid #ccc; + box-sizing: border-box; + background: @colortheme_sidebar-left-bg; + overflow: auto; + resize: horizontal; + width: auto; + white-space: nowrap; + max-width: 500px; + min-width: 200px; + padding: 0px; + color: @colortheme_sidebar-left-fg; + display: flex; + flex-flow: column; + max-height: 100%; + .cp-app-drive-tree-categories-container { + flex: 1; + max-width: 500px; + overflow: auto; + } + img.cp-app-drive-icon { + margin-bottom: 3px; + margin-left: -2px; + } + .cp-app-drive-tree-docs { + margin-top: 20px; + //padding: 0 0 0 20px; + padding: 0; + cursor: auto; + &li, li { + padding: 0; + &.cp-app-drive-element-collapsed ul { + display: none; + } + input { + width: ~"calc(100% - 30px)"; + padding: 0 10px; + border: 0; + color: lighten(@colortheme_sidebar-left-fg, 40%); + } + & > span.cp-app-drive-element-row { + overflow: hidden; + text-overflow: ellipsis; + //min-width: ~"calc(100% + 5px)"; + .leftside-menu-category_main(); + width: ~"calc(100% + 5px)"; + margin: 0; + margin-bottom: -6px; + display: inline-block; + cursor: pointer; + margin-left: -5px; + padding-left: 5px; + } + & > span.cp-app-drive-element-row:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-active):hover { + } } } - .cp-app-drive-tree-search-con { - color: @colortheme_drive-color; - position: absolute; - left: 20px; // TODO align with drive categories - top: 8px; + span.cp-app-drive-element { + cursor: pointer; } - } - .fa.cp-app-drive-icon-expcol { - margin-left: -10px; - font-size: 14px; - position: absolute; - left: -20px; - top: 10px; - width: 11px !important; - height: 11px !important; - padding: 0; - margin: 0; - background: white; - z-index: 10; - cursor: default; - &:before { - position:relative; - top: -1px; + .cp-app-drive-tree-category { + margin: 0; + margin-top: 15px; + .cp-app-drive-tree-root { + &> .fa { + min-width: 30px; + cursor: pointer; + } + } + li { + padding: 0; + .cp-app-drive-element-row { + display: block; + padding-left: 20px; + .leftside-menu-category_main(); + margin: 0; + .fa { + width: 25px; + } + } + } } - } - .cp-app-drive-tree-docs { - .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-expcol { - position: relative; - top:0; - left: -10px; + .cp-app-drive-tree-category:last-child { + margin-bottom: 20px; } - .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-folder { - margin-left: -5px; + .cp-limit-container { + margin-top: 5px; } - .cp-app-drive-tree-root { - &> .cp-app-drive-element-row { - padding-left: 20px; + #cp-app-drive-tree-search { + text-align: center; + padding: 0; + position: relative; + input { + background: lighten(@colortheme_drive-bg, 8%); + color: @colortheme_drive-color; + .tools_placeholder-color(@colortheme_drive-color); + outline-width: 0px; + border-radius: 0; + width: 100%; + //border: 1px solid #ccc; + border: 0; + border-right: 1px solid lighten(@colortheme_drive-bg, 16%); + //border-right: 0; + height: @variables_bar-height; + padding: 0 5px; + padding-left: 45px; + &:focus { + outline-width: 0px; + } } - &> ul { - padding-left: 30px; + .cp-app-drive-tree-search-con { + color: @colortheme_drive-color; + position: absolute; + left: 20px; // TODO align with drive categories + top: 8px; } } - } - - // Expand/collapse lines - .cp-app-drive-tree-docs ul { - margin: 0px 0px 0px 10px; - list-style: none; - padding-left: 10px; - li { - position: relative; + .fa.cp-app-drive-icon-expcol { + margin-left: -10px; + font-size: 14px; + position: absolute; + left: -20px; + top: 10px; + width: 11px !important; + height: 11px !important; + padding: 0; + margin: 0; + background: white; + z-index: 10; + cursor: default; &:before { - position: absolute; - left: -15px; - top: -11px; - content: ''; - display: block; - border-left: 1px solid @colortheme_sidebar-left-branch; - height: ~"calc(1em + 11px)"; - border-bottom: 1px solid @colortheme_sidebar-left-branch; - width: 15px; + position:relative; + top: -1px; } - &:after { - position: absolute; - left: -15px; - bottom: -7px; - content: ''; - display: block; - border-left: 1px solid @colortheme_sidebar-left-branch; - height: 100%; + } + .cp-app-drive-tree-docs { + .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-expcol { + position: relative; + top:0; + left: -10px; } - &.cp-app-drive-tree-root { - margin: 0px 0px 0px -10px; + .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-folder { + margin-left: -5px; + } + .cp-app-drive-tree-root { + &> .cp-app-drive-element-row { + padding-left: 20px; + } + &> ul { + padding-left: 30px; + } + } + } + + // Expand/collapse lines + .cp-app-drive-tree-docs ul { + margin: 0px 0px 0px 10px; + list-style: none; + padding-left: 10px; + li { + position: relative; &:before { - display: none; + position: absolute; + left: -15px; + top: -11px; + content: ''; + display: block; + border-left: 1px solid @colortheme_sidebar-left-branch; + height: ~"calc(1em + 11px)"; + border-bottom: 1px solid @colortheme_sidebar-left-branch; + width: 15px; } &:after { + position: absolute; + left: -15px; + bottom: -7px; + content: ''; + display: block; + border-left: 1px solid @colortheme_sidebar-left-branch; + height: 100%; + } + &.cp-app-drive-tree-root { + margin: 0px 0px 0px -10px; + &:before { + display: none; + } + &:after { + display: none; + } + } + &:last-child:after { display: none; } } - &:last-child:after { - display: none; - } } } -} -/* CONTENT */ -#cp-app-drive-content-container { - display: flex; - flex-flow: column; - flex: 1; - // Needed to avoid the folder's path to overflows - // https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout - min-width: 0; -} -#cp-app-drive-content { - box-sizing: border-box; - background: @drive_content-bg; - color: @drive_content-fg; - overflow: auto; - flex: 1; - display: flex; - flex-flow: column; - position: relative; - .cp-app-drive-content-select-box { - display: none; - background-color: rgba(100, 100, 100, 0.7); - position: absolute; - z-index: 50; - } - &.cp-app-drive-readonly { - background: @drive_content-bg-ro; - } - h1 { - padding-left: 10px; - margin-top: 10px; - } - .cp-app-drive-content-info-box { - line-height: 2em; - padding: 0.25em 0.75em; - margin: 1em; - background: @drive_info-box-bg; - span { - cursor: pointer; - float: right; - margin-top: 0.5em; + /* CONTENT */ + #cp-app-drive-content-container { + display: flex; + flex-flow: column; + flex: 1; + // Needed to avoid the folder's path to overflows + // https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout + min-width: 0; + } + #cp-app-drive-content { + box-sizing: border-box; + background: @drive_content-bg; + color: @drive_content-fg; + overflow: auto; + flex: 1; + display: flex; + flex-flow: column; + position: relative; + .cp-app-drive-content-select-box { + display: none; + background-color: rgba(100, 100, 100, 0.7); + position: absolute; + z-index: 50; } - } - li { - cursor: default; - &:not(.cp-app-drive-element-header) { - &:hover { - &:not(.-cp-app-drive-element-selected, .cp-app-drive-element-selected-tmp) { - background-color: @drive_hover; - } + &.cp-app-drive-readonly { + background: @drive_content-bg-ro; + } + h1 { + padding-left: 10px; + margin-top: 10px; + } + .cp-app-drive-content-info-box { + line-height: 2em; + padding: 0.25em 0.75em; + margin: 1em; + background: @drive_info-box-bg; + span { + cursor: pointer; + float: right; + margin-top: 0.5em; } } - } - #cp-app-drive-content-folder { li { - &.cp-app-drive-search-result { - border-bottom: 1px solid @drive_info-box-border; - display: block; + cursor: default; + &:not(.cp-app-drive-element-header) { &:hover { - background-color: initial; + &:not(.-cp-app-drive-element-selected, .cp-app-drive-element-selected-tmp) { + background-color: @drive_hover; + } } - table { - width: 100%; - .cp-app-drive-search-label2 { - width: 150px; - font-size: 15px; - text-align: right; - padding-right: 15px; + } + } + #cp-app-drive-content-folder { + li { + &.cp-app-drive-search-result { + border-bottom: 1px solid @drive_info-box-border; + display: block; + &:hover { + background-color: initial; } - .cp-app-drive-search-opendir { - display: flex; - justify-content: space-between; - a { + table { + width: 100%; + .cp-app-drive-search-label2 { + width: 150px; + font-size: 15px; + text-align: right; + padding-right: 15px; + } + .cp-app-drive-search-opendir { + display: flex; + justify-content: space-between; + a { + cursor: pointer; + color: #41b7d8; + &:hover { + color: #014c8c; + text-decoration: underline; + } + } + } + .cp-app-drive-search-path { + font-style: italic; + direction: rtl; + .cp-app-drive-path-element { + display: inline-block; + margin-right: 5px; + } + } + .cp-app-drive-search-title { + font-weight: bold; cursor: pointer; - color: #41b7d8; &:hover { - color: #014c8c; - text-decoration: underline; + background-color: @drive_hover; } } - } - .cp-app-drive-search-path { - font-style: italic; - direction: rtl; - .cp-app-drive-path-element { - display: inline-block; - margin-right: 5px; + .cp-app-drive-search-col2 { + width: 250px; } - } - .cp-app-drive-search-title { - font-weight: bold; - cursor: pointer; - &:hover { - background-color: @drive_hover; + td.cp-app-drive-search-icon { + width: 50px; + font-size: 40px; } } - .cp-app-drive-search-col2 { - width: 250px; - } - td.cp-app-drive-search-icon { - width: 50px; - font-size: 40px; - } } - } - &.cp-app-drive-tags-list { - width: 100%; - table { - margin: 10px 50px; - width: ~"calc(100% - 100px)"; - table-layout: fixed; - td, th { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + &.cp-app-drive-tags-list { + width: 100%; + table { + margin: 10px 50px; + width: ~"calc(100% - 100px)"; + table-layout: fixed; + td, th { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } } } } - } - .cp-app-drive-element { - .cp-app-drive-element-truncated { display: none; } - } - div.cp-app-drive-content-grid { - padding: 20px; - .drive_fileIcon; - li { - &.cp-app-drive-element { - position: relative; - } - input { - width: 100%; - margin: 0; - padding: 0; - border-radius: 0; - border: 1px solid #ddd; - font-size: 14px; - } - .cp-app-drive-element-state { - position: absolute; - top: 3px; - right: 3px; - .fa { - margin:0; - font-size: 18px; + .cp-app-drive-element { + .cp-app-drive-element-truncated { display: none; } + } + div.cp-app-drive-content-grid { + padding: 20px; + .drive_fileIcon; + li { + &.cp-app-drive-element { + position: relative; } - } - .cp-app-drive-element-thumbnail { - max-width: 100px; - max-height: 100px; - & ~ .fa { - display: inline; - font-size: 17px; + input { + width: 100%; + margin: 0; + padding: 0; + border-radius: 0; + border: 1px solid #ddd; + font-size: 14px; + } + .cp-app-drive-element-state { position: absolute; top: 3px; - left: 3px; - margin: 0; + right: 3px; + .fa { + margin:0; + font-size: 18px; + } + } + .cp-app-drive-element-thumbnail { + max-width: 100px; + max-height: 100px; + & ~ .fa { + display: inline; + font-size: 17px; + position: absolute; + top: 3px; + left: 3px; + margin: 0; + } } } - } - .cp-app-drive-element-list { - display: none; - } - .cp-app-drive-new-ghost { - cursor: pointer; - opacity: 0.5; - padding: 0; - flex-flow: column; - align-items: center; - justify-content: center; - display: inline-flex; - &:hover { - opacity: 0.7; + .cp-app-drive-element-list { + display: none; } - .fa { + .cp-app-drive-new-ghost { cursor: pointer; - font-size: 90px; - margin-top: 5px; - margin-bottom: 0; + opacity: 0.5; + padding: 0; + flex-flow: column; + align-items: center; + justify-content: center; + display: inline-flex; + &:hover { + opacity: 0.7; + } + .fa { + cursor: pointer; + font-size: 90px; + margin-top: 5px; + margin-bottom: 0; + } } } - } - .cp-app-drive-content-list { - .cp-app-drive-element-grid { - display: none; - } - // Make it act as a table! - padding-left: 20px; - ul { - display: table; - width: 100%; - padding: 0px 10px; - } - li { - display: table-row; - input { - border: 1px solid #ddd; - margin: 0; - padding: 0 4px; - } - &> span { - padding: 0 5px; - display: table-cell; + .cp-app-drive-content-list { + .cp-app-drive-element-grid { + display: none; } - &:not(.cp-app-drive-element-header) { - height: @variables_bar-height; - line-height: @variables_bar-height; + // Make it act as a table! + padding-left: 20px; + ul { + display: table; + width: 100%; + padding: 0px 10px; } - &.cp-app-drive-element-header { - cursor: default; - color: @drive_table-header-fg; - span { - &:not(.fa) { - text-align: left; - } - &.sortasc, &.sortdesc { - float: right; - } + li { + display: table-row; + input { + border: 1px solid #ddd; + margin: 0; + padding: 0 4px; } &> span { - padding: 15px 5px; - &.cp-app-drive-sort-active { - font-weight: bold; + padding: 0 5px; + display: table-cell; + } + &:not(.cp-app-drive-element-header) { + height: @variables_bar-height; + line-height: @variables_bar-height; + } + &.cp-app-drive-element-header { + cursor: default; + color: @drive_table-header-fg; + span { + &:not(.fa) { + text-align: left; + } + &.sortasc, &.sortdesc { + float: right; + } } - &.cp-app-drive-sort-clickable { - cursor: pointer; - &:hover { - background: @drive_table-header-bg; + &> span { + padding: 15px 5px; + &.cp-app-drive-sort-active { + font-weight: bold; + } + &.cp-app-drive-sort-clickable { + cursor: pointer; + &:hover { + background: @drive_table-header-bg; + } } } } } - } - .cp-app-drive-element { - span { - overflow: hidden; - white-space: nowrap; - box-sizing: border-box; - &.cp-app-drive-element-state { - .fa:not(:last-child) { - margin-right: 5px; + .cp-app-drive-element { + span { + overflow: hidden; + white-space: nowrap; + box-sizing: border-box; + &.cp-app-drive-element-state { + .fa:not(:last-child) { + margin-right: 5px; + } } - } - &.cp-app-drive-content-icon, &.cp-app-drive-element-state, &.cp-icon { - width: 30px; - } - &.cp-app-drive-element-type, &.cp-app-drive-element-atime, &.cp-app-drive-element-ctime { - width: 175px; - } - &.cp-app-drive-element-title { - width: 250px; - @media screen and (max-width: 1200px) { - display: none; + &.cp-app-drive-content-icon, &.cp-app-drive-element-state, &.cp-icon { + width: 30px; + } + &.cp-app-drive-element-type, &.cp-app-drive-element-atime, &.cp-app-drive-element-ctime { + width: 175px; + } + &.cp-app-drive-element-title { + width: 250px; + @media screen and (max-width: 1200px) { + display: none; + } + } + &.cp-app-drive-element-folders, &.cp-app-drive-element-files { + width: 150px; } - } - &.cp-app-drive-element-folders, &.cp-app-drive-element-files { - width: 150px; } } } } -} -#cp-app-drive-content-folder { - padding-right: 10px; - flex: 1; -} + #cp-app-drive-content-folder { + padding-right: 10px; + flex: 1; + } -#cp-app-drive-new-ghost-dialog.cp-modal-container { - .drive_fileIcon; + #cp-app-drive-new-ghost-dialog.cp-modal-container { + .drive_fileIcon; - li:not(.cp-app-drive-element-selected):hover { - border: 1px solid white; - } - .cp-modal { - display: flex; - flex-flow: column; - li, li .fa { - cursor: pointer; - } - &> p { - margin: 50px; + li:not(.cp-app-drive-element-selected):hover { + border: 1px solid white; } - &> div { + .cp-modal { display: flex; - flex-wrap: wrap; - justify-content: center; - align-content: center; - overflow-y: auto; - .cp-app-drive-new-upload { - break-after: always; - page-break-after: always; + flex-flow: column; + li, li .fa { + cursor: pointer; + } + &> p { + margin: 50px; + } + &> div { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + overflow-y: auto; + .cp-app-drive-new-upload { + break-after: always; + page-break-after: always; + } } } - } - .cp-app-drive-new-name { - white-space: nowrap; - } + .cp-app-drive-new-name { + white-space: nowrap; + } - @media screen and (max-height: @browser_media-not-big) { - .cp-modal { - & > p { - display: none; - } - & > div { - align-content: unset; - li { - height: 40px; - width: 90%; - display: flex; - align-items: center; - .fa { - font-size: 32px; - } - .cp-app-drive-new-name { - height: auto; + @media screen and (max-height: @browser_media-not-big) { + .cp-modal { + & > p { + display: none; + } + & > div { + align-content: unset; + li { + height: 40px; + width: 90%; + display: flex; + align-items: center; + .fa { + font-size: 32px; + } + .cp-app-drive-new-name { + height: auto; + } } } } } } -} -/* Toolbar */ + /* Toolbar */ -#cp-app-drive-toolbar { - background: lighten(@colortheme_drive-bg, 8%); - color: @colortheme_drive-color; - //height: 30px; - //display: flex; - //flex-flow: row; - z-index: 100; - box-sizing: border-box; - height: @variables_bar-height; - padding: 0; - display: flex; - flex-flow: row; + #cp-app-drive-toolbar { + background: lighten(@colortheme_drive-bg, 8%); + color: @colortheme_drive-color; + //height: 30px; + //display: flex; + //flex-flow: row; + z-index: 100; + box-sizing: border-box; + height: @variables_bar-height; + padding: 0; + display: flex; + flex-flow: row; - * { - outline-width: 0; - &:focus { + * { outline-width: 0; + &:focus { + outline-width: 0; + } } - } - .cp-toolbar-icon-history { - float: right; - .cp-toolbar-drawer-element { - display: none; + .cp-toolbar-icon-history { + float: right; + .cp-toolbar-drawer-element { + display: none; + } } - } - .cp-app-drive-toolbar-rightside, .cp-app-drive-toolbar-leftside { - display: inline-block; - margin: 0; - padding: 0; - .fa { + .cp-app-drive-toolbar-rightside, .cp-app-drive-toolbar-leftside { + display: inline-block; margin: 0; - } - button { - height: @variables_bar-height; - padding: 0 10px; - border: none; - border-radius: 0; - box-sizing: border-box; - background: transparent; - font-size: @colortheme_app-font-size; - color: @colortheme_drive-color; - transition: all 0.15s; - .drawer { - display: none; + padding: 0; + .fa { + margin: 0; } - .fa, span { + button { + height: @variables_bar-height; + padding: 0 10px; + border: none; + border-radius: 0; + box-sizing: border-box; + background: transparent; font-size: @colortheme_app-font-size; - } - &:hover { - background: @colortheme_drive-bg; - } - &.cp-app-drive-toolbar-active { - display: none; + color: @colortheme_drive-color; + transition: all 0.15s; + .drawer { + display: none; + } + .fa, span { + font-size: @colortheme_app-font-size; + } + &:hover { + background: @colortheme_drive-bg; + } + &.cp-app-drive-toolbar-active { + display: none; + } } } - } - .cp-app-drive-toolbar-rightside { - float: right; - & > * { + .cp-app-drive-toolbar-rightside { float: right; + & > * { + float: right; + } + #cp-app-drive-toolbar-contextbuttons { + display: inline-block; + height: 100%; + } + padding-left: 10px; } - #cp-app-drive-toolbar-contextbuttons { - display: inline-block; - height: 100%; - } - padding-left: 10px; - } - .cp-app-drive-toolbar-leftside { - & > span { - height: 100%; - margin: 0; - } - button { - padding: 0 10px; - .fa { - margin-right: 5px; + .cp-app-drive-toolbar-leftside { + & > span { + height: 100%; + margin: 0; } - .cp-dropdown-button-title { - display: inline-flex; - height: @variables_bar-height; - align-items: center; - span:not(.fa) { - line-height: 23px; + button { + padding: 0 10px; + .fa { + margin-right: 5px; + } + .cp-dropdown-button-title { + display: inline-flex; + height: @variables_bar-height; + align-items: center; + span:not(.fa) { + line-height: 23px; + } } } } - } - button { - font: @colortheme_app-font; - span { + button { font: @colortheme_app-font; + span { + font: @colortheme_app-font; + } + .fa, &.fa { + font-family: FontAwesome; + } } - .fa, &.fa { - font-family: FontAwesome; + /* The container
- needed to position the dropdown content */ + .cp-dropdown-container { + margin: 2px 2px; + line-height: 1em; + position: relative; + display: inline-block; + } + .cp-dropdown-content { + margin-right: 2px; } - } - /* The container
- needed to position the dropdown content */ - .cp-dropdown-container { - margin: 2px 2px; - line-height: 1em; - position: relative; - display: inline-block; - } - .cp-dropdown-content { - margin-right: 2px; - } - .cp-app-drive-path { - flex: 1; - width: 100%; - height: @variables_bar-height; - line-height: @variables_bar-height; - cursor: default; - width: auto; - overflow: hidden; - white-space: nowrap; - direction: rtl; - max-width: 100%; - text-align: left; - .cp-app-drive-path-element { - display: inline-block; + .cp-app-drive-path { + flex: 1; + width: 100%; height: @variables_bar-height; line-height: @variables_bar-height; - font-size: @colortheme_app-font-size; - padding: 0 5px; - border: 0; - background: darken(@colortheme_drive-bg, 10%); - color: @colortheme_drive-color; - box-sizing: border-box; - transition: all 0.15s; - &.cp-app-drive-path-separator { - color: #ccc; - } - &.cp-app-drive-path-lickable { - cursor: pointer; - &:hover { - background: darken(@colortheme_drive-bg, 15%); + cursor: default; + width: auto; + overflow: hidden; + white-space: nowrap; + direction: rtl; + max-width: 100%; + text-align: left; + .cp-app-drive-path-element { + display: inline-block; + height: @variables_bar-height; + line-height: @variables_bar-height; + font-size: @colortheme_app-font-size; + padding: 0 5px; + border: 0; + background: darken(@colortheme_drive-bg, 10%); + color: @colortheme_drive-color; + box-sizing: border-box; + transition: all 0.15s; + &.cp-app-drive-path-separator { + color: #ccc; + } + &.cp-app-drive-path-lickable { + cursor: pointer; + &:hover { + background: darken(@colortheme_drive-bg, 15%); + } } } } } -} - - - +} \ No newline at end of file diff --git a/www/drive/inner.js b/www/drive/inner.js index d072992d6..5e3207019 100644 --- a/www/drive/inner.js +++ b/www/drive/inner.js @@ -19,7 +19,7 @@ define([ 'css!/bower_components/bootstrap/dist/css/bootstrap.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 ( $, Toolbar, diff --git a/www/file/app-file.less b/www/file/app-file.less index 9d78d5ec3..20428b382 100644 --- a/www/file/app-file.less +++ b/www/file/app-file.less @@ -1,149 +1,152 @@ @import (reference) '../../customize/src/less2/include/tokenfield.less'; @import (reference) '../../customize/src/less2/include/framework.less'; -.framework_min_main( - @bg-color: @colortheme_file-bg, - @warn-color: @colortheme_file-warn, - @color: @colortheme_file-color -); -.tokenfield_main(); +&.cp-app-file { -@button-border: 2px; + .framework_min_main( + @bg-color: @colortheme_file-bg, + @warn-color: @colortheme_file-warn, + @color: @colortheme_file-color + ); + .tokenfield_main(); -// body -display: flex; -flex-flow: column; + @button-border: 2px; -#cp-app-file-content { - flex: 1; + // body display: flex; - justify-content: center; - align-items: center; flex-flow: column; - min-height: 0; -} - -#cp-app-file-content.ready { - //background: url('/customize/bg3.jpg') no-repeat center center; - background-size: cover; - background-position: center; -} - -#cp-app-file-upfile, #cp-app-file-dlfile { - display: block; - height: 100%; - width: 100%; - border: @button-border solid black; -} - -.cp-app-file-input { - width: 0.1px; - height: 0.1px; - opacity: 0; - overflow: hidden; - position: absolute; - z-index: -1; -} - -media-tag { - img { - max-width: 100%; - max-height: ~"calc(100vh - 96px)"; - } -} - -#cp-app-file-upload-form, #cp-app-file-download-form { - padding: 0px; - margin: 0px; - - position: relative; - width: 50vh; - height: 50vh; - display: block; - margin: 50px auto; - max-width: 80vw; - label { - line-height: ~"calc(50vh - 20px)"; - text-align: center; - position: relative; - padding: 10px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - height: 50vh; - box-sizing: border-box; - } -} -#cp-app-file-download-form { - label { + + #cp-app-file-content { + flex: 1; display: flex; justify-content: center; align-items: center; - white-space: normal; - word-wrap: break-word; - span { - width: 50vh; - max-width: 80vw; + flex-flow: column; + min-height: 0; + } + + #cp-app-file-content.ready { + //background: url('/customize/bg3.jpg') no-repeat center center; + background-size: cover; + background-position: center; + } + + #cp-app-file-upfile, #cp-app-file-dlfile { + display: block; + height: 100%; + width: 100%; + border: @button-border solid black; + } + + .cp-app-file-input { + width: 0.1px; + height: 0.1px; + opacity: 0; + overflow: hidden; + position: absolute; + z-index: -1; + } + + media-tag { + img { + max-width: 100%; + max-height: ~"calc(100vh - 96px)"; + } + } + + #cp-app-file-upload-form, #cp-app-file-download-form { + padding: 0px; + margin: 0px; + + position: relative; + width: 50vh; + height: 50vh; + display: block; + margin: 50px auto; + max-width: 80vw; + label { + line-height: ~"calc(50vh - 20px)"; text-align: center; - line-height: 1.5em; + position: relative; + padding: 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + height: 50vh; + box-sizing: border-box; } } -} -.cp-app-file-hovering { - background-color: rgba(255, 0, 115, 0.5) !important; -} - -.cp-app-file-block { - display: block; -} -.cp-app-file-hidden { - display: none; -} -.cp-app-file-input + label { - //border: 2px solid black; - //background-color: rgba(50, 50, 50, .10); - display: block; -} - -.cp-app-file-input:focus + label, -.cp-app-file-input + label:hover { - //background-color: rgba(50, 50, 50, 0.30); -} - -#cp-app-file-dlprogress { - position: absolute; - top: 0; - left: 0; - height: 100%; - - - transition: width 200ms; - width: 0%; - max-width: 100%; - max-height: 100%; - background-color: rgba(255, 0, 115, 0.75); - z-index: 10000; - display: block; -} - -#cp-app-file-download-view { - flex: 1; - display: flex; - min-height: 0; - align-items: center; - justify-content: center; - flex-flow: column; - media-tag { + #cp-app-file-download-form { + label { + display: flex; + justify-content: center; + align-items: center; + white-space: normal; + word-wrap: break-word; + span { + width: 50vh; + max-width: 80vw; + text-align: center; + line-height: 1.5em; + } + } + } + .cp-app-file-hovering { + background-color: rgba(255, 0, 115, 0.5) !important; + } + + .cp-app-file-block { + display: block; + } + .cp-app-file-hidden { + display: none; + } + .cp-app-file-input + label { + //border: 2px solid black; + //background-color: rgba(50, 50, 50, .10); + display: block; + } + + .cp-app-file-input:focus + label, + .cp-app-file-input + label:hover { + //background-color: rgba(50, 50, 50, 0.30); + } + + #cp-app-file-dlprogress { + position: absolute; + top: 0; + left: 0; + height: 100%; + + + transition: width 200ms; + width: 0%; + max-width: 100%; + max-height: 100%; + background-color: rgba(255, 0, 115, 0.75); + z-index: 10000; + display: block; + } + + #cp-app-file-download-view { flex: 1; - min-height: 0; - max-width: 100vw; display: flex; + min-height: 0; align-items: center; justify-content: center; - &> * { - max-height: 100%; - max-width: 100%; + flex-flow: column; + media-tag { + flex: 1; + min-height: 0; + max-width: 100vw; + display: flex; + align-items: center; + justify-content: center; + &> * { + max-height: 100%; + max-width: 100%; + } } - } -} + } +} \ No newline at end of file diff --git a/www/file/inner.js b/www/file/inner.js index e9e2d868d..b184d6b9b 100644 --- a/www/file/inner.js +++ b/www/file/inner.js @@ -17,7 +17,7 @@ define([ 'css!/bower_components/bootstrap/dist/css/bootstrap.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 ( $, diff --git a/www/filepicker/app-filepicker.less b/www/filepicker/app-filepicker.less index 712700451..03780c796 100644 --- a/www/filepicker/app-filepicker.less +++ b/www/filepicker/app-filepicker.less @@ -7,78 +7,79 @@ @import (reference) '../../customize/src/less2/include/checkmark.less'; @import (reference) '../../customize/src/less2/include/password-input.less'; -.iconColors_main(); -.fileupload_main(); -.alertify_main(); -.tippy_main(); -.checkmark_main(20px); -.password_main(); -.modal_main(); +&.cp-app-filepicker { + .iconColors_main(); + .fileupload_main(); + .alertify_main(); + .tippy_main(); + .checkmark_main(20px); + .password_main(); + .modal_main(); -#cp-filepicker-dialog { - display: none; - .cp-modal { - .cp-filepicker-content { - display: flex; - flex-wrap: wrap; - justify-content: center; - overflow-y: auto; - } + #cp-filepicker-dialog { + display: none; + .cp-modal { + .cp-filepicker-content { + display: flex; + flex-wrap: wrap; + justify-content: center; + overflow-y: auto; + } - .cp-filepicker-content-element { - @darker: darken(@colortheme_modal-fg, 30%); + .cp-filepicker-content-element { + @darker: darken(@colortheme_modal-fg, 30%); - width: 125px; - //min-width: 200px; - //height: 1em; - padding: 10px; - margin: 5px; + width: 125px; + //min-width: 200px; + //height: 1em; + padding: 10px; + margin: 5px; - display: inline-flex; - flex-flow: column; + display: inline-flex; + flex-flow: column; - box-sizing: content-box; + box-sizing: content-box; - text-align: left; - line-height: 1em; - cursor: pointer; + text-align: left; + line-height: 1em; + cursor: pointer; - background-color: @colortheme_modal-bg; - box-shadow: 2px 2px 5px #000; - color: @darker; + background-color: @colortheme_modal-bg; + box-shadow: 2px 2px 5px #000; + color: @darker; - transition: all 0.1s; + transition: all 0.1s; - &:hover { - color: @colortheme_modal-fg; - } + &:hover { + color: @colortheme_modal-fg; + } - align-items: center; + align-items: center; - img { - max-width: 100px; - max-height: 100px; - background: #fff; - } + img { + max-width: 100px; + max-height: 100px; + background: #fff; + } - .cp-filepicker-content-element-name { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - height: 20px; - line-height: 20px; - margin-top: 5px; - max-width: 100%; - } - .fa { - cursor: pointer; - width: 100px; - height: 100px; - font-size: 70px; - text-align: center; - line-height: 100px; + .cp-filepicker-content-element-name { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + height: 20px; + line-height: 20px; + margin-top: 5px; + max-width: 100%; + } + .fa { + cursor: pointer; + width: 100px; + height: 100px; + font-size: 70px; + text-align: center; + line-height: 100px; + } } } } -} - +} \ No newline at end of file diff --git a/www/filepicker/inner.js b/www/filepicker/inner.js index c30ada772..0ca8bddcc 100644 --- a/www/filepicker/inner.js +++ b/www/filepicker/inner.js @@ -12,7 +12,7 @@ define([ 'css!/bower_components/bootstrap/dist/css/bootstrap.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 ( $, Crypto, diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index 417f4fd14..190a8e548 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -2,12 +2,14 @@ @import (reference) "../../customize/src/less2/include/framework.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 &.cp-app-kanban { + .framework_main( + @bg-color: @colortheme_kanban-bg, + @warn-color: @colortheme_kanban-warn, + @color: @colortheme_kanban-color + ); + display: flex; flex-flow: column; max-height: 100%; diff --git a/www/kanban/inner.js b/www/kanban/inner.js index 647032548..11eb4f932 100644 --- a/www/kanban/inner.js +++ b/www/kanban/inner.js @@ -11,6 +11,8 @@ define([ '/customize/messages.js', '/kanban/jkanban.js', 'css!/kanban/jkanban.css', + + 'less!/kanban/app-kanban.less' ], function ( $, Sortify, diff --git a/www/pad/app-pad.less b/www/pad/app-pad.less index 74862650c..1bc4db423 100644 --- a/www/pad/app-pad.less +++ b/www/pad/app-pad.less @@ -1,15 +1,12 @@ @import (reference) "../../customize/src/less2/include/framework.less"; -.framework_main( - @bg-color: @colortheme_pad-bg, - @warn-color: @colortheme_pad-warn, - @color: @colortheme_pad-color -); -.alertify_main(); +body.cp-app-pad { + .framework_main( + @bg-color: @colortheme_pad-bg, + @warn-color: @colortheme_pad-warn, + @color: @colortheme_pad-color + ); -// body -&.cp-app-pad { - .tokenfield_main(); #cke_1_top { overflow: visible; padding: 0px; @@ -46,17 +43,16 @@ } } -} - -.cke_wysiwyg_frame { - min-width: 60%; -} - -@media print { - #cke_1_top { - display:none !important; + .cke_wysiwyg_frame { + min-width: 60%; } - &.cp-app-pad .cp-toolbar-userlist-drawer { - display:none; + + @media print { + #cke_1_top { + display:none !important; + } + &.cp-app-pad .cp-toolbar-userlist-drawer { + display:none; + } } -} +} \ No newline at end of file diff --git a/www/pad/inner.js b/www/pad/inner.js index 865be9ef8..a564a9687 100644 --- a/www/pad/inner.js +++ b/www/pad/inner.js @@ -37,7 +37,7 @@ define([ 'css!/bower_components/bootstrap/dist/css/bootstrap.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 ( $, Hyperjson, diff --git a/www/poll/app-poll.less b/www/poll/app-poll.less index 69713cce9..c1920ca5a 100644 --- a/www/poll/app-poll.less +++ b/www/poll/app-poll.less @@ -2,668 +2,671 @@ @import (reference) '../../customize/src/less2/include/avatar.less'; @import (reference) "../../customize/src/less2/include/framework.less"; -.framework_main( - @bg-color: @colortheme_poll-bg, - @warn-color: @colortheme_poll-warn, - @color: @colortheme_poll-color -); - -@poll-fore: #555; - -@poll-th-bg: @colortheme_poll-th-bg; -@poll-th-fg: @colortheme_poll-th-fg; -@poll-th-user-bg: darken(@poll-th-bg, 10%); -@poll-editing: lighten(@poll-th-bg, 10%); -@poll-winner: darken(@poll-th-bg, 15%); -@poll-highlighted: lighten(@poll-th-bg, 15%); -@poll-td-bg: @poll-th-bg; -@poll-td-fg: @poll-th-fg; - -@poll-help-bg: @colortheme_poll-help-bg; - -@poll-uncommitted-cell: #eee; -@poll-uncommitted-bg: #ddd; //lighten(@poll-th-bg, 50%); -@poll-uncommitted-text: black; - -@poll-placeholder: #fff; -@poll-border-color: #555; -@poll-cover-color: #000; -@poll-fg: #000; -@poll-option-yellow: #ff5; -@poll-option-gray: #ccc; - -@poll-add-color: #fff; -@poll-add-bg: #777; -@poll-add-bg-alt: #444; - -.bottom-left(@s: 5px) { border-bottom-left-radius: @s; } -.top-left(@s: 5px) { border-top-left-radius: @s; } - -display: flex; -flex-flow: column; -overflow-x: hidden; - -#cp-app-poll-content { +&.cp-app-poll { + + .framework_main( + @bg-color: @colortheme_poll-bg, + @warn-color: @colortheme_poll-warn, + @color: @colortheme_poll-color + ); + + @poll-fore: #555; + + @poll-th-bg: @colortheme_poll-th-bg; + @poll-th-fg: @colortheme_poll-th-fg; + @poll-th-user-bg: darken(@poll-th-bg, 10%); + @poll-editing: lighten(@poll-th-bg, 10%); + @poll-winner: darken(@poll-th-bg, 15%); + @poll-highlighted: lighten(@poll-th-bg, 15%); + @poll-td-bg: @poll-th-bg; + @poll-td-fg: @poll-th-fg; + + @poll-help-bg: @colortheme_poll-help-bg; + + @poll-uncommitted-cell: #eee; + @poll-uncommitted-bg: #ddd; //lighten(@poll-th-bg, 50%); + @poll-uncommitted-text: black; + + @poll-placeholder: #fff; + @poll-border-color: #555; + @poll-cover-color: #000; + @poll-fg: #000; + @poll-option-yellow: #ff5; + @poll-option-gray: #ccc; + + @poll-add-color: #fff; + @poll-add-bg: #777; + @poll-add-bg-alt: #444; + + .bottom-left(@s: 5px) { border-bottom-left-radius: @s; } + .top-left(@s: 5px) { border-top-left-radius: @s; } + display: flex; - flex: 1; - min-height: 0; - #cp-app-poll-form { + flex-flow: column; + overflow-x: hidden; + + #cp-app-poll-content { + display: flex; flex: 1; - overflow-y: auto; - &.cp-app-poll-readonly { - #cp-app-poll-table-scroll { - max-width: ~"calc(75% - 30px - 100px)"; - } - table { - width: 100%; - } - table tr td:last-child { - margin-left: 0; // uncommitted is hidden + min-height: 0; + #cp-app-poll-form { + flex: 1; + overflow-y: auto; + &.cp-app-poll-readonly { + #cp-app-poll-table-scroll { + max-width: ~"calc(75% - 30px - 100px)"; + } + table { + width: 100%; + } + table tr td:last-child { + margin-left: 0; // uncommitted is hidden + } + td.cp-app-poll-table-uncommitted { + display: none; + } } - td.cp-app-poll-table-uncommitted { - display: none; + &.cp-app-poll-published { + #cp-app-poll-create-option { + display: none; + } + .cp-app-poll-table-remove[data-rt-id^="y"], .cp-app-poll-table-edit[data-rt-id^="y"] { + display: none; + } + tr.cp-app-poll-table-uncommitted { + display: none; + } } } - &.cp-app-poll-published { - #cp-app-poll-create-option { - display: none; - } - .cp-app-poll-table-remove[data-rt-id^="y"], .cp-app-poll-table-edit[data-rt-id^="y"] { - display: none; - } - tr.cp-app-poll-table-uncommitted { - display: none; - } + } + + input[type="text"], textarea { + background-color: white; + color: black; + border: 0; + } + + input[type="text"][disabled], textarea[disabled] { + background-color: transparent; + border: 0px; + } + + // The placeholder color only seems to effect Safari when not set + + input[type="text"][disabled]::placeholder { + color: @poll-placeholder; + opacity: 1; + } + + table#cp-app-poll-table { + margin: 0px; + overflow: hidden; + } + #cp-app-poll-table-container { + position: relative; + margin: 20px; + } + #cp-app-poll-table-container button { + border-radius: 0; + border: 0; + } + #cp-app-poll-create-user { + display: inline-flex; + height: 20px; + padding: 0 5px; + margin: 2px auto; + width: auto; + overflow: hidden; + color: @poll-add-color; + background: @poll-add-bg; + &:hover { + background: @poll-add-bg-alt; } } -} - -input[type="text"], textarea { - background-color: white; - color: black; - border: 0; -} - -input[type="text"][disabled], textarea[disabled] { - background-color: transparent; - border: 0px; -} - -// The placeholder color only seems to effect Safari when not set - -input[type="text"][disabled]::placeholder { - color: @poll-placeholder; - opacity: 1; -} - -table#cp-app-poll-table { - margin: 0px; - overflow: hidden; -} -#cp-app-poll-table-container { - position: relative; - margin: 20px; -} -#cp-app-poll-table-container button { - border-radius: 0; - border: 0; -} -#cp-app-poll-create-user { - display: inline-flex; - height: 20px; - padding: 0 5px; - margin: 2px auto; - width: auto; - overflow: hidden; - color: @poll-add-color; - background: @poll-add-bg; - &:hover { - background: @poll-add-bg-alt; + #cp-app-poll-create-option { + order: 3; + display: inline-flex; + width: 46px; + height: 20px; + margin: 2px; + padding: 0; + color: @poll-add-color; + background: @poll-add-bg; + &:hover { + background: @poll-add-bg-alt; + } } -} -#cp-app-poll-create-option { - order: 3; - display: inline-flex; - width: 46px; - height: 20px; - margin: 2px; - padding: 0; - color: @poll-add-color; - background: @poll-add-bg; - &:hover { - background: @poll-add-bg-alt; + #cp-app-poll-table-scroll { + overflow-y: hidden; + overflow-x: auto; + margin-left: 25%; + max-width: ~"calc(75% - 100px - 100px)"; + width: auto; + display: inline-block; } -} -#cp-app-poll-table-scroll { - overflow-y: hidden; - overflow-x: auto; - margin-left: 25%; - max-width: ~"calc(75% - 100px - 100px)"; - width: auto; - display: inline-block; -} -.cp-markdown-toolbar { - margin: auto; - min-width: 80%; - width: 80%; -} -#cp-app-poll-description { - &~ .CodeMirror { + .cp-markdown-toolbar { margin: auto; min-width: 80%; width: 80%; - min-height: 200px; - height: 200px; - border: 1px solid black; - .CodeMirror-placeholder { - color: #777; + } + #cp-app-poll-description { + &~ .CodeMirror { + margin: auto; + min-width: 80%; + width: 80%; + min-height: 200px; + height: 200px; + border: 1px solid black; + .CodeMirror-placeholder { + color: #777; + } } } -} -#cp-app-poll-description-published { - display: none; - padding: 15px; - margin: auto; - - min-width: 80%; - width: 80%; - min-height: 7em; - color: #000; - border: 1px solid transparent; - background-color: #eeeeee; - font: @colortheme_app-font; - text-align: left; - media-tag > * { - max-width: 100%; - max-height: 20em; + #cp-app-poll-description-published { + display: none; + padding: 15px; + margin: auto; + + min-width: 80%; + width: 80%; + min-height: 7em; + color: #000; + border: 1px solid transparent; + background-color: #eeeeee; + font: @colortheme_app-font; + text-align: left; + media-tag > * { + max-width: 100%; + max-height: 20em; + } } -} -div.cp-app-poll-published { - div.cp-app-poll-realtime { - #cp-app-poll-description { - display: none; - &~ .CodeMirror { + div.cp-app-poll-published { + div.cp-app-poll-realtime { + #cp-app-poll-description { display: none; + &~ .CodeMirror { + display: none; + } } - } - #cp-app-poll-description-published { - display: block; - &:empty { + #cp-app-poll-description-published { + display: block; + &:empty { + display: none; + } + } + #cp-app-poll-nocomments { display: none; } - } - #cp-app-poll-nocomments { - display: none; - } - #cp-app-poll-comments { - display: block; + #cp-app-poll-comments { + display: block; + } } } -} - -#cp-app-poll-help { - width: 100%; - margin: auto; - padding: 20px 10%; - background: @poll-help-bg; -} - -// from cryptpad.less - -table { - border-collapse: collapse; - border-spacing: 0; - margin: 20px; -} -tbody { - * { - box-sizing: border-box; - } - tr { - text-align: center; - } - td { - .tools_unselectable(); - border-right: 1px solid @poll-border-color; - padding: 12px; - padding-top: 0px; - padding-bottom: 0px; - &:last-child { - border-right: none; - } + #cp-app-poll-help { + width: 100%; + margin: auto; + padding: 20px 10%; + background: @poll-help-bg; } -} -div.cp-app-poll-realtime { - display: block; - max-height: 100%; - max-width: 100%; + // from cryptpad.less - input { - &[type="text"] { - height: 1em; - margin: 0px; - } + table { + border-collapse: collapse; + border-spacing: 0; + margin: 20px; } - > textarea { - width: 50%; - height: 15vh; + tbody { + * { + box-sizing: border-box; + } + tr { + text-align: center; + } + + td { + .tools_unselectable(); + border-right: 1px solid @poll-border-color; + padding: 12px; + padding-top: 0px; + padding-bottom: 0px; + &:last-child { + border-right: none; + } + } } - padding: 0px; - margin: 0px; + div.cp-app-poll-realtime { + display: block; + max-height: 100%; + max-width: 100%; - .cp-app-poll-table-scrolled { - tr td:last-child { - right: 0; + input { + &[type="text"] { + height: 1em; + margin: 0px; + } } - tr td:nth-last-child(2) { - right: 100px; + > textarea { + width: 50%; + height: 15vh; } - } - table { - border-collapse: collapse; - width: ~"calc(100% - 1px)"; - .cp-app-poll-table-editing { - background-color: @poll-editing; - } - .cp-app-poll-table-uncommitted { - .cp-app-poll-table-cover { - background-color: @poll-uncommitted-cell !important; + padding: 0px; + margin: 0px; + + .cp-app-poll-table-scrolled { + tr td:last-child { + right: 0; } - div.cp-app-poll-table-text-cell { - background-color: @poll-uncommitted-bg !important; - color: @poll-uncommitted-text !important; + tr td:nth-last-child(2) { + right: 100px; } - text-align: center; - background-color: @poll-uncommitted-bg !important; - color: @poll-uncommitted-text !important; } - tr { - height: 28px; - /* Options */ - td:first-child { - position:absolute; - left: 0; - top: auto; - width: 25%; - } - /* Uncommitted column */ - td:nth-last-child(2) { - position: absolute; - top: auto; - width: 100px; - min-width: unset !important; - height: auto !important; - } - /* Results */ - td:last-child { - color: @poll-th-fg; - position:absolute; - top: auto; - margin-left: 100px; - width: 100px; - min-width: unset !important; - background-color: @poll-th-bg; - } - td { - padding: 0px; - margin: 0px; + table { + border-collapse: collapse; + width: ~"calc(100% - 1px)"; + .cp-app-poll-table-editing { + background-color: @poll-editing; + } + .cp-app-poll-table-uncommitted { + .cp-app-poll-table-cover { + background-color: @poll-uncommitted-cell !important; + } div.cp-app-poll-table-text-cell { - height: 28px; + background-color: @poll-uncommitted-bg !important; + color: @poll-uncommitted-text !important; + } + text-align: center; + background-color: @poll-uncommitted-bg !important; + color: @poll-uncommitted-text !important; + } + tr { + height: 28px; + /* Options */ + td:first-child { + position:absolute; + left: 0; + top: auto; + width: 25%; + } + /* Uncommitted column */ + td:nth-last-child(2) { + position: absolute; + top: auto; + width: 100px; + min-width: unset !important; + height: auto !important; + } + /* Results */ + td:last-child { + color: @poll-th-fg; + position:absolute; + top: auto; + margin-left: 100px; + width: 100px; + min-width: unset !important; + background-color: @poll-th-bg; + } + td { padding: 0px; margin: 0px; - display: flex; - align-items: center; - .cp-app-poll-table-remove { - order: 1; - } - .cp-app-poll-table-edit { - order: 3; - } - input { - min-width: 0; - order: 2; - flex: 1; - height: 24px; - border: 0px; - margin: 2px; - &[disabled] { - background-color: transparent; - color: @poll-td-fg; - //font-weight: bold; + + div.cp-app-poll-table-text-cell { + height: 28px; + padding: 0px; + margin: 0px; + display: flex; + align-items: center; + .cp-app-poll-table-remove { + order: 1; + } + .cp-app-poll-table-edit { + order: 3; + } + input { + min-width: 0; + order: 2; + flex: 1; + height: 24px; + border: 0px; + margin: 2px; + &[disabled] { + background-color: transparent; + color: @poll-td-fg; + //font-weight: bold; + } } } - } - - &.cp-app-poll-table-checkbox-cell { - margin: 0px; - padding: 0px; - height: 100%; - min-width: 100px; - div.cp-app-poll-table-checkbox-contain { - display: inline-block; + &.cp-app-poll-table-checkbox-cell { + margin: 0px; + padding: 0px; height: 100%; - width: 100%; - position: relative; + min-width: 100px; - label { - background-color: transparent; - display: block; - position: absolute; - top: 0px; - left: 0px; + div.cp-app-poll-table-checkbox-contain { + display: inline-block; height: 100%; width: 100%; - } - - input { - &[type="number"] { - &:not(.editable) { - display: none; + position: relative; - ~ .cp-app-poll-table-cover { - line-height: 28px; - display: block; - font-weight: bold; - height: 100%; - display: block; + label { + background-color: transparent; + display: block; + position: absolute; + top: 0px; + left: 0px; + height: 100%; + width: 100%; + } - color: @poll-cover-color; + input { + &[type="number"] { + &:not(.editable) { + display: none; - &:after { + ~ .cp-app-poll-table-cover { + line-height: 28px; + display: block; + font-weight: bold; height: 100%; - } + display: block; + color: @poll-cover-color; + + &:after { + height: 100%; + } + + } } } } - } - input[type="number"][value="0"] { - ~ .cp-app-poll-table-cover { - background-color: @colortheme_cp-red; - &:after { content: "✖"; } + input[type="number"][value="0"] { + ~ .cp-app-poll-table-cover { + background-color: @colortheme_cp-red; + &:after { content: "✖"; } + } } - } - input[type="number"][value="1"] { - ~ .cp-app-poll-table-cover { - background-color: @colortheme_cp-green; - &:after { content: "✔"; } + input[type="number"][value="1"] { + ~ .cp-app-poll-table-cover { + background-color: @colortheme_cp-green; + &:after { content: "✔"; } + } } - } - input[type="number"][value="2"] { - ~ .cp-app-poll-table-cover { - background-color: @poll-option-yellow; - &:after { content: "~"; } + input[type="number"][value="2"] { + ~ .cp-app-poll-table-cover { + background-color: @poll-option-yellow; + &:after { content: "~"; } + } } - } - input[type="number"][value="3"] { - ~ .cp-app-poll-table-cover { - background-color: @poll-option-gray; - &:after { content: "?"; } + input[type="number"][value="3"] { + ~ .cp-app-poll-table-cover { + background-color: @poll-option-gray; + &:after { content: "?"; } + } } } } } } - } - input { - &[type="text"] { - height: auto; - width: 80%; + input { + &[type="text"] { + height: auto; + width: 80%; + } } - } - span { - .tools_unselectable(); - } - thead { - height: 52px; - tr { - height: 52px; + span { + .tools_unselectable(); } - td { - padding: 0px 5px; - background: @poll-th-bg; - color: @poll-th-fg; - &:not(:last-child) { - border-right: 1px solid rgba(255,255,255,0.2); - } - &:last-child { + thead { + height: 52px; + tr { height: 52px; - line-height: 52px; - text-align: center; - } - &:nth-last-child(2) { - border-right: 1px solid @poll-border-color; } - &.cp-app-poll-table-own { - background: @poll-th-user-bg; - .cp-app-poll-table-lock { - cursor: default; + td { + padding: 0px 5px; + background: @poll-th-bg; + color: @poll-th-fg; + &:not(:last-child) { + border-right: 1px solid rgba(255,255,255,0.2); } - } - .cp-app-poll-table-buttons { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - align-items: center; - span { - cursor: pointer; - width: 1em; + &:last-child { + height: 52px; + line-height: 52px; text-align: center; } - .cp-app-poll-table-bookmark { - color: darken(@poll-th-fg, 30%); - &.cp-app-poll-table-bookmark-full { - color: @poll-th-fg; + &:nth-last-child(2) { + border-right: 1px solid @poll-border-color; + } + &.cp-app-poll-table-own { + background: @poll-th-user-bg; + .cp-app-poll-table-lock { + cursor: default; } } - } - input { - &[type="text"] { - overflow: hidden; - text-overflow: ellipsis; - break-after: always; - width: ~"calc(100% - 2px)"; // borders... - box-sizing: border-box; - padding: 1px 5px; - margin: 1px; - &[disabled] { - color: @poll-th-fg; + .cp-app-poll-table-buttons { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-items: center; + span { + cursor: pointer; + width: 1em; + text-align: center; + } + .cp-app-poll-table-bookmark { + color: darken(@poll-th-fg, 30%); + &.cp-app-poll-table-bookmark-full { + color: @poll-th-fg; + } + } + } + input { + &[type="text"] { + overflow: hidden; + text-overflow: ellipsis; + break-after: always; + width: ~"calc(100% - 2px)"; // borders... + box-sizing: border-box; + padding: 1px 5px; + margin: 1px; + &[disabled] { + color: @poll-th-fg; + } } } } } - } - tbody { - td:first-child { - background: @poll-td-bg; - color: @poll-td-fg; - } - td.cp-app-poll-table-winner { - background-color: @poll-winner; - &:last-child { font-weight: bold; } - } - .cp-app-poll-table-text-cell { - input[type="text"] { - width: ~"calc(100% - 50px)"; - padding: 0 0.5em; + tbody { + td:first-child { + background: @poll-td-bg; + color: @poll-td-fg; } - .cp-app-poll-table-edit { - float:right; - margin: 2px 10px 0 0; + td.cp-app-poll-table-winner { + background-color: @poll-winner; + &:last-child { font-weight: bold; } } - .cp-app-poll-table-remove { - float: left; - margin: 2px 0 0 10px; + .cp-app-poll-table-text-cell { + input[type="text"] { + width: ~"calc(100% - 50px)"; + padding: 0 0.5em; + } + .cp-app-poll-table-edit { + float:right; + margin: 2px 10px 0 0; + } + .cp-app-poll-table-remove { + float: left; + margin: 2px 0 0 10px; + } } - } - tr:not(:first-child) { - td:not(:first-child) { - label { - border-top: 1px solid @poll-border-color; + tr:not(:first-child) { + td:not(:first-child) { + label { + border-top: 1px solid @poll-border-color; + } } } - } - tr:not(:last-child) { - &:hover { - td:first-child { - background-color: @poll-highlighted; + tr:not(:last-child) { + &:hover { + td:first-child { + background-color: @poll-highlighted; + } } } } - } - .cp-app-poll-table-edit { - //color: @poll-cover-color; - cursor: pointer; - float: left; - margin-left: 10px; - } + .cp-app-poll-table-edit { + //color: @poll-cover-color; + cursor: pointer; + float: left; + margin-left: 10px; + } - thead { - tr { - th { - input[type="text"][disabled] { - background-color: transparent; - color: @poll-fore; - font-weight: bold; - } - .cp-app-poll-table-remove { - cursor: pointer; - font-size: 20px; + thead { + tr { + th { + input[type="text"][disabled] { + background-color: transparent; + color: @poll-fore; + font-weight: bold; + } + .cp-app-poll-table-remove { + cursor: pointer; + font-size: 20px; + } } } } - } - tbody { - tr { - td { + tbody { + tr { + td { + } } } - } - tfoot { - display: none; - } - } - #cp-app-poll-nocomments { - color: #999; - text-align: center; - margin: 20px; - font: @colortheme_app-font; - } - #cp-app-poll-comments { - width: 50%; - margin: 20px auto; - min-width: 400px; - padding-bottom: 5px; - display: none; - button { - border-radius: 0; - } - #cp-app-poll-comments-add { - input, textarea { - border: 1px solid black; - width: 90%; - margin: 5px 5%; - } - input { - padding: 5px; - height: 26px; - &[disabled] { - background: #eee; - } - } - textarea { - padding: 5px; - height: 8em; - line-height: 1.5em; - } - button { - padding: 10px; + tfoot { + display: none; } + } + #cp-app-poll-nocomments { + color: #999; text-align: center; + margin: 20px; + font: @colortheme_app-font; } - #cp-app-poll-comments-list { - .cp-app-poll-comments-list-el { - width: 90%; - margin: 5px 5%; + #cp-app-poll-comments { + width: 50%; + margin: 20px auto; + min-width: 400px; + padding-bottom: 5px; + display: none; + button { + border-radius: 0; } - .cp-app-poll-comments-list-msg { - display: flex; - background: #eee; - padding: 5px 10px; - .cp-app-poll-comments-list-msg-text { - flex: 1; - white-space: pre-wrap; - } - .cp-app-poll-comments-list-msg-actions { - button { - padding: 0; - width: 25px; - line-height: 20px; + #cp-app-poll-comments-add { + input, textarea { + border: 1px solid black; + width: 90%; + margin: 5px 5%; + } + input { + padding: 5px; + height: 26px; + &[disabled] { + background: #eee; } } + textarea { + padding: 5px; + height: 8em; + line-height: 1.5em; + } + button { + padding: 10px; + } + text-align: center; } - .cp-app-poll-comments-list-data { - background: #ddd; - padding: 5px 10px; - display: flex; - align-items: center; - .cp-app-poll-comments-list-data-name { - margin-left: 10px; - flex: 1; - } - .cp-app-poll-comments-list-data-avatar { .avatar_main(30px); } + #cp-app-poll-comments-list { + .cp-app-poll-comments-list-el { + width: 90%; + margin: 5px 5%; + } + .cp-app-poll-comments-list-msg { + display: flex; + background: #eee; + padding: 5px 10px; + .cp-app-poll-comments-list-msg-text { + flex: 1; + white-space: pre-wrap; + } + .cp-app-poll-comments-list-msg-actions { + button { + padding: 0; + width: 25px; + line-height: 20px; + } + } + } + .cp-app-poll-comments-list-data { + background: #ddd; + padding: 5px 10px; + display: flex; + align-items: center; + .cp-app-poll-comments-list-data-name { + margin-left: 10px; + flex: 1; + } + .cp-app-poll-comments-list-data-avatar { .avatar_main(30px); } + } } } - } - @media screen and (max-width: 500px) { - #cp-app-poll-table-scroll { - max-width: 100%; - padding: 0; - margin: 0; - table { - tr { - td { - &:first-child { - position: unset; - min-width: 100px; - &:hover:not(:empty) { - position: absolute; + @media screen and (max-width: 500px) { + #cp-app-poll-table-scroll { + max-width: 100%; + padding: 0; + margin: 0; + table { + tr { + td { + &:first-child { + position: unset; min-width: 100px; - width: auto; - z-index: 100; + &:hover:not(:empty) { + position: absolute; + min-width: 100px; + width: auto; + z-index: 100; + } + } + &:nth-last-child(2) { + position: unset; + } + &:last-child { + position: unset; } - } - &:nth-last-child(2) { - position: unset; - } - &:last-child { - position: unset; } } } } - } - #cp-app-poll-comments { - min-width: 90%; + #cp-app-poll-comments { + min-width: 90%; + } } } -} -.btn { - display: inline-flex; - align-items: center; - justify-content: center; -} + .btn { + display: inline-flex; + align-items: center; + justify-content: center; + } +} \ No newline at end of file diff --git a/www/poll/inner.js b/www/poll/inner.js index ad0ea5ada..7a287b7db 100644 --- a/www/poll/inner.js +++ b/www/poll/inner.js @@ -26,7 +26,7 @@ define([ 'css!/bower_components/bootstrap/dist/css/bootstrap.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 ( $, Toolbar, diff --git a/www/profile/app-profile.less b/www/profile/app-profile.less index 0fce9ea7b..ec41c4e31 100644 --- a/www/profile/app-profile.less +++ b/www/profile/app-profile.less @@ -1,15 +1,15 @@ @import (reference) '../../customize/src/less2/include/framework.less'; @import (reference) '../../customize/src/less2/include/sidebar-layout.less'; -.framework_min_main( - @bg-color: @colortheme_profile-bg, - @warn-color: @colortheme_profile-warn, - @color: @colortheme_profile-color -); -.sidebar-layout_main(); - -// body &.cp-app-profile { + + .framework_min_main( + @bg-color: @colortheme_profile-bg, + @warn-color: @colortheme_profile-warn, + @color: @colortheme_profile-color + ); + .sidebar-layout_main(); + display: flex; flex-flow: column; #cp-app-profile-header { diff --git a/www/profile/inner.js b/www/profile/inner.js index 76c279ce0..b8f2ed31d 100644 --- a/www/profile/inner.js +++ b/www/profile/inner.js @@ -20,7 +20,7 @@ define([ 'css!/bower_components/codemirror/addon/fold/foldgutter.css', 'css!/bower_components/bootstrap/dist/css/bootstrap.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', 'css!/bower_components/croppie/croppie.css', ], function ( diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less index 3e8f1ed92..c8e5eb2e3 100644 --- a/www/settings/app-settings.less +++ b/www/settings/app-settings.less @@ -3,17 +3,16 @@ @import (reference) "../../customize/src/less2/include/creation.less"; @import (reference) '../../customize/src/less2/include/framework.less'; -.framework_min_main( - @bg-color: @colortheme_settings-bg, - @warn-color: @colortheme_settings-warn, - @color: @colortheme_settings-color -); -.sidebar-layout_main(); -.limit-bar_main(); -.creation_main(); - -// body &.cp-app-settings { + .framework_min_main( + @bg-color: @colortheme_settings-bg, + @warn-color: @colortheme_settings-warn, + @color: @colortheme_settings-color + ); + .sidebar-layout_main(); + .limit-bar_main(); + .creation_main(); + display: flex; flex-flow: column; font: @colortheme_app-font; diff --git a/www/settings/inner.js b/www/settings/inner.js index 9cdda9d00..7bc15bdc8 100644 --- a/www/settings/inner.js +++ b/www/settings/inner.js @@ -16,7 +16,7 @@ define([ '/bower_components/file-saver/FileSaver.min.js', 'css!/bower_components/bootstrap/dist/css/bootstrap.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 ( $, Toolbar, diff --git a/www/slide/app-slide.less b/www/slide/app-slide.less index 8a56db15f..27dcef34e 100644 --- a/www/slide/app-slide.less +++ b/www/slide/app-slide.less @@ -2,415 +2,419 @@ @import (reference) "../../customize/src/less2/include/mediatag.less"; @import (reference) "../../customize/src/less2/include/framework.less"; -.mediatag_base(); -.framework_main( - @bg-color: @colortheme_slide-bg, - @warn-color: @colortheme_slide-warn, - @color: @colortheme_slide-color -); - -// body -font-size: unset; -display: flex; -flex-flow: column; - -@slide-default-bg: #000; -.size (@n) { - // font-size: @n * 1vmin; - // line-height: @n * 1.1vmin; - font-size: @n * 10%; - // line-height: @n * 11%; - line-height: 110%; -} - -h1 { font-size: 40px; } -h2 { font-size: 37px; } -h3 { font-size: 34px; } -h4 { font-size: 31px; } -h5 { font-size: 27px; } -h6 { font-size: 24px; } - -#cp-app-slide-editor-container { - display: inline-flex; - flex-flow: column; - height: 100%; - min-height: 100%; - width: 50%; - min-width: 20%; - max-width: 80%; - overflow: hidden; - max-width: 100%; - flex: 1; -} -.CodeMirror { - flex: 1; - width: 100%; - font-size: initial; -} -.CodeMirror-focused .cm-matchhighlight { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==); - background-position: bottom; - background-repeat: repeat-x; -} - -#cp-app-slide-colorpicker { - display: block; -} - -#cme_toolbox { - z-index: 10000; -} - -#cp-app-slide-editor { - flex: 1; +&.cp-app-slide { + + .mediatag_base(); + + .framework_main( + @bg-color: @colortheme_slide-bg, + @warn-color: @colortheme_slide-warn, + @color: @colortheme_slide-color + ); + + // body + font-size: unset; display: flex; - flex-flow: row; - height: 100%; - overflow: hidden; + flex-flow: column; + + @slide-default-bg: #000; + .size (@n) { + // font-size: @n * 1vmin; + // line-height: @n * 1.1vmin; + font-size: @n * 10%; + // line-height: @n * 11%; + line-height: 110%; + } + + h1 { font-size: 40px; } + h2 { font-size: 37px; } + h3 { font-size: 34px; } + h4 { font-size: 31px; } + h5 { font-size: 27px; } + h6 { font-size: 24px; } + + #cp-app-slide-editor-container { + display: inline-flex; + flex-flow: column; + height: 100%; + min-height: 100%; + width: 50%; + min-width: 20%; + max-width: 80%; + overflow: hidden; + max-width: 100%; + flex: 1; + } .CodeMirror { - resize: none; - //width: 100vw; + flex: 1; + width: 100%; + font-size: initial; + } + .CodeMirror-focused .cm-matchhighlight { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==); + background-position: bottom; + background-repeat: repeat-x; + } + + #cp-app-slide-colorpicker { + display: block; + } + + #cme_toolbox { + z-index: 10000; } - &.cp-app-slide-preview { + + #cp-app-slide-editor { + flex: 1; + display: flex; + flex-flow: row; + height: 100%; + overflow: hidden; .CodeMirror { - //resize: horizontal; - //width: 50vw; + resize: none; + //width: 100vw; + } + &.cp-app-slide-preview { + .CodeMirror { + //resize: horizontal; + //width: 50vw; + } } } -} -.cp-app-slide-shown { - .cp-app-slide-container { - position: relative; - &> media-tag { - position: absolute; - top:0; right: 0; bottom: 0; left: 0; - z-index: -1; - &> img { - width: 100vw; - height: 56.25vw; // height:width ratio = 9/16 = .5625 - max-height: 100vh; - max-width: 177.78vh; // 16/9 = 1.778 + .cp-app-slide-shown { + .cp-app-slide-container { + position: relative; + &> media-tag { position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - margin: auto; + top:0; right: 0; bottom: 0; left: 0; + z-index: -1; + &> img { + width: 100vw; + height: 56.25vw; // height:width ratio = 9/16 = .5625 + max-height: 100vh; + max-width: 177.78vh; // 16/9 = 1.778 + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + } } } } -} -.cp-app-slide-preview { - .cp-app-slide-viewer { - width: 50vw; - overflow: hidden; - div#cp-app-slide-modal:not(.cp-app-slide-shown) { - position: relative; - top: auto; - left: auto; - width: auto; - display: block; - height: 100%; - #cp-app-slide-modal-content { - .cp-app-slide-container { - position: relative; - &> media-tag { - position: absolute; - top:0; right: 0; bottom: 0; left: 0; - z-index: -1; - &> img { - width: 50vw; - height: 28.125vw; - max-height: ~"calc(100vh - 96px)"; - max-width: ~"calc(16 / 9 * (100vh - 96px))"; + .cp-app-slide-preview { + .cp-app-slide-viewer { + width: 50vw; + overflow: hidden; + div#cp-app-slide-modal:not(.cp-app-slide-shown) { + position: relative; + top: auto; + left: auto; + width: auto; + display: block; + height: 100%; + #cp-app-slide-modal-content { + .cp-app-slide-container { + position: relative; + &> media-tag { position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - margin: auto; + top:0; right: 0; bottom: 0; left: 0; + z-index: -1; + &> img { + width: 50vw; + height: 28.125vw; + max-height: ~"calc(100vh - 96px)"; + max-width: ~"calc(16 / 9 * (100vh - 96px))"; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + } } } + .cp-app-slide-container { + width: 100%; + } + .cp-app-slide-frame { + width: 50vw; + height: 28.125vw; // height:width ratio = 9/16 = .5625 + max-height: ~"calc(100vh - 96px)"; + max-width: ~"calc(16 / 9 * (100vh - 96px))"; + //max-height: 100vh; + //max-width: 177.78vh; // 16/9 = 1.778 + } } - .cp-app-slide-container { - width: 100%; - } - .cp-app-slide-frame { - width: 50vw; - height: 28.125vw; // height:width ratio = 9/16 = .5625 - max-height: ~"calc(100vh - 96px)"; - max-width: ~"calc(16 / 9 * (100vh - 96px))"; - //max-height: 100vh; - //max-width: 177.78vh; // 16/9 = 1.778 + #cp-app-slide-modal-exit { + visibility: hidden; } } - #cp-app-slide-modal-exit { - visibility: hidden; - } + } + .CodeMirror { + flex: 1; } } - .CodeMirror { - flex: 1; - } -} -/* Slide position (print mode) */ -@ratio:0.9; -@media print { - #cp-app-slide-editor-container { - display: none; - } -} -#cp-app-slide-print { - position: relative; - display: none; - font-size: @ratio*11.25vw; - .cp-app-slide-frame { - display: flex !important; - flex-flow: column; - padding: 0.5em; - margin: auto; - border: 1px solid black; - height: @ratio*56.25vw; - width: @ratio*100vw; - page-break-after: always; - position: relative; - box-sizing: border-box; - overflow: hidden; - li { - min-width: @ratio*50vw; - } - h1 { - padding-top: 0; + /* Slide position (print mode) */ + @ratio:0.9; + @media print { + #cp-app-slide-editor-container { + display: none; } - } - .cp-app-slide-container { + #cp-app-slide-print { position: relative; - &> media-tag { - position: absolute; - top:0; right: 0; bottom: 0; left: 0; - z-index: -1; - &> img { - width: 90vw; - height: 50.625vw; + display: none; + font-size: @ratio*11.25vw; + .cp-app-slide-frame { + display: flex !important; + flex-flow: column; + padding: 0.5em; + margin: auto; + border: 1px solid black; + height: @ratio*56.25vw; + width: @ratio*100vw; + page-break-after: always; + position: relative; + box-sizing: border-box; + overflow: hidden; + li { + min-width: @ratio*50vw; + } + h1 { + padding-top: 0; + } + + } + .cp-app-slide-container { + position: relative; + &> media-tag { position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - margin: auto; + top:0; right: 0; bottom: 0; left: 0; + z-index: -1; + &> img { + width: 90vw; + height: 50.625vw; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + } } } - } - .cp-app-slide-container { - width: 90vw; - height: 100vh; - margin: 0vh 5vw !important; - display: flex; - &:last-child { - height: ~"calc(100vh - 2px)"; + .cp-app-slide-container { + width: 90vw; + height: 100vh; + margin: 0vh 5vw !important; + display: flex; + &:last-child { + height: ~"calc(100vh - 2px)"; + } } } -} -/* Slide position (present mode) */ -div#cp-app-slide-modal { - display: none; - background-color: black; - color: white; + /* Slide position (present mode) */ + div#cp-app-slide-modal { + display: none; + background-color: black; + color: white; - .cp-app-slide-isempty { - display: flex; - align-items: center; - justify-content: center; - img { - max-width: 100%; - max-height: 100%; + .cp-app-slide-isempty { + display: flex; + align-items: center; + justify-content: center; + img { + max-width: 100%; + max-height: 100%; + } } - } - /* Navigation buttons */ - .cp-app-slide-modal-button { - position: absolute; - cursor: pointer; - font-size: 30px; - opacity: 0.6; - display: none; - z-index: 9001; - } - .cp-app-slide-modal-button:hover { - opacity: 1; - display: block !important; - } - #cp-app-slide-modal-exit { - left: 20px; - top: 20px; - } - #cp-app-slide-modal-left { - left: 6vw; - bottom: 10vh; - } - #cp-app-slide-modal-right { - right: 6vw; - bottom: 10vh; - } - &.cp-app-slide-shown { - display: block; - position: fixed; - top: 0px; - left: 0px; - z-index: 1000000; // one order of magnitude higher than alertify - height: 100vh; - width: 100%; - } - #cp-app-slide-modal-content { - font-size: 20vh; - position: relative; - height: 100%; - overflow: visible; - white-space: nowrap; - .cp-app-slide-frame { - overflow: hidden; - display: flex; - flex-flow: column !important; + /* Navigation buttons */ + .cp-app-slide-modal-button { + position: absolute; + cursor: pointer; + font-size: 30px; + opacity: 0.6; + display: none; + z-index: 9001; + } + .cp-app-slide-modal-button:hover { + opacity: 1; + display: block !important; + } + #cp-app-slide-modal-exit { + left: 20px; + top: 20px; + } + #cp-app-slide-modal-left { + left: 6vw; + bottom: 10vh; + } + #cp-app-slide-modal-right { + right: 6vw; + bottom: 10vh; + } + &.cp-app-slide-shown { + display: block; + position: fixed; + top: 0px; + left: 0px; + z-index: 1000000; // one order of magnitude higher than alertify + height: 100vh; + width: 100%; + } + #cp-app-slide-modal-content { + font-size: 20vh; + position: relative; + height: 100%; + overflow: visible; + white-space: nowrap; + .cp-app-slide-frame { + overflow: hidden; + display: flex; + flex-flow: column !important; - box-sizing: border-box; - border: 1px solid; - white-space: normal; + box-sizing: border-box; + border: 1px solid; + white-space: normal; - vertical-align: middle; + vertical-align: middle; - padding: 0.5em; - width: 100vw; - height: 56.25vw; // height:width ratio = 9/16 = .5625 - max-height: 100vh; - max-width: 177.78vh; // 16/9 = 1.778 - margin: auto; - } - .cp-app-slide-container { - display: inline-flex; - height: 100%; width: 100vw; - text-align: center; - vertical-align: top; - } - &.cp-app-slide-transition { + padding: 0.5em; + width: 100vw; + height: 56.25vw; // height:width ratio = 9/16 = .5625 + max-height: 100vh; + max-width: 177.78vh; // 16/9 = 1.778 + margin: auto; + } .cp-app-slide-container { - transition: margin-left 1s; + display: inline-flex; + height: 100%; width: 100vw; + text-align: center; + vertical-align: top; + } + &.cp-app-slide-transition { + .cp-app-slide-container { + transition: margin-left 1s; + } + } + media-tag button { + max-height: none; } } - media-tag button { - max-height: none; - } - } - box-sizing: border-box; - z-index: 9001; - position: fixed; + box-sizing: border-box; + z-index: 9001; + position: fixed; - top: 0px; - left: 0px; + top: 0px; + left: 0px; - width: 100%; - height: 100vh; - display: none; + width: 100%; + height: 100vh; + display: none; - background-color: @slide-default-bg; -} + background-color: @slide-default-bg; + } -/* Slide content */ -div#cp-app-slide-modal #cp-app-slide-modal-content, #cp-app-slide-print { - .cp-app-slide-frame { - * { - .size(2.75); + /* Slide content */ + div#cp-app-slide-modal #cp-app-slide-modal-content, #cp-app-slide-print { + .cp-app-slide-frame { * { - font-size: 1em; - line-height: 1em; + .size(2.75); + * { + font-size: 1em; + line-height: 1em; + } } - } - ul, ol { ul, ol { - margin: 0; + ul, ol { + margin: 0; + } } - } - h1 { .size(5); } - h2 { .size(4.2); } - h3 { .size(3.6); } - h4 { .size (3); } - h5 { .size(2.2); } - h6 { .size(1.6); } - - h1, h2, h3, h4, h5, h6 { - color: inherit; - text-align: center; - padding-top: 0; - margin-bottom: 0.5em; - } + h1 { .size(5); } + h2 { .size(4.2); } + h3 { .size(3.6); } + h4 { .size (3); } + h5 { .size(2.2); } + h6 { .size(1.6); } - .markdown_preformatted-code; + h1, h2, h3, h4, h5, h6 { + color: inherit; + text-align: center; + padding-top: 0; + margin-bottom: 0.5em; + } - ul, ol { - min-width: 50%; - max-width: 100%; - display: table; - margin: 0 auto; - padding-left: 0.3em; - } + .markdown_preformatted-code; - // fixes image overflowing - media-tag { - height: 100%; - flex-flow: row; - justify-content: center; + ul, ol { + min-width: 50%; + max-width: 100%; + display: table; + margin: 0 auto; + padding-left: 0.3em; + } - & + * { - margin-top: 1rem; + // fixes image overflowing + media-tag { + height: 100%; + flex-flow: row; + justify-content: center; + + & + * { + margin-top: 1rem; + } + img { flex: unset; } } - img { flex: unset; } - } - img { + img { + position: relative; + min-width: 1%; + margin: auto; + } + .cp-app-slide-number { + position: absolute; + right: 5vh; + bottom: 5vh; + .size(1); + } + .cp-app-slide-date { + position: absolute; + left: 5vh; + bottom: 5vh; + .size(1); + } + .cp-app-slide-title { + position: absolute; + bottom: 5vh; + left: 0px; right: 0px; + text-align: center; + .size(1); + } + text-align: left; position: relative; - min-width: 1%; - margin: auto; } - .cp-app-slide-number { - position: absolute; - right: 5vh; - bottom: 5vh; - .size(1); - } - .cp-app-slide-date { - position: absolute; - left: 5vh; - bottom: 5vh; - .size(1); - } - .cp-app-slide-title { - position: absolute; - bottom: 5vh; - left: 0px; right: 0px; - text-align: center; - .size(1); - } - text-align: left; - position: relative; } -} - -.cp-app-slide-frame * { - max-width: 100%; - max-height: 100%; -} - -p { - padding: 0; - margin: 0; - min-height:0; - min-width:0; -} - -pre.cp-slide-css-error { - color: white; -} + + .cp-app-slide-frame * { + max-width: 100%; + max-height: 100%; + } + + p { + padding: 0; + margin: 0; + min-height:0; + min-width:0; + } + + pre.cp-slide-css-error { + color: white; + } +} \ No newline at end of file diff --git a/www/slide/inner.js b/www/slide/inner.js index 497b0b8ca..89ec0dafa 100644 --- a/www/slide/inner.js +++ b/www/slide/inner.js @@ -15,7 +15,7 @@ define([ 'css!/bower_components/bootstrap/dist/css/bootstrap.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/addon/dialog/dialog.css', diff --git a/www/todo/app-todo.less b/www/todo/app-todo.less index 191252f53..29818c6fb 100644 --- a/www/todo/app-todo.less +++ b/www/todo/app-todo.less @@ -1,13 +1,13 @@ @import (reference) '../../customize/src/less2/include/framework.less'; -.framework_min_main( - @bg-color: @colortheme_todo-bg, - @warn-color: @colortheme_todo-warn, - @color: @colortheme_todo-color -); - -// body &.cp-app-todo { + + .framework_min_main( + @bg-color: @colortheme_todo-bg, + @warn-color: @colortheme_todo-warn, + @color: @colortheme_todo-color + ); + display: flex; flex-flow: column; diff --git a/www/todo/inner.js b/www/todo/inner.js index 07a8b3f42..eb749c35a 100644 --- a/www/todo/inner.js +++ b/www/todo/inner.js @@ -13,7 +13,7 @@ define([ 'css!/bower_components/bootstrap/dist/css/bootstrap.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 ( $, Crypto, diff --git a/www/whiteboard/app-whiteboard.less b/www/whiteboard/app-whiteboard.less index c05405fa0..0ac575df6 100644 --- a/www/whiteboard/app-whiteboard.less +++ b/www/whiteboard/app-whiteboard.less @@ -1,14 +1,14 @@ @import (reference) '../../customize/src/less2/include/tools.less'; @import (reference) "../../customize/src/less2/include/framework.less"; -.framework_main( - @bg-color: @colortheme_whiteboard-bg, - @warn-color: @colortheme_whiteboard-warn, - @color: @colortheme_whiteboard-color -); - -// body &.cp-app-whiteboard { + + .framework_main( + @bg-color: @colortheme_whiteboard-bg, + @warn-color: @colortheme_whiteboard-warn, + @color: @colortheme_whiteboard-color + ); + display: flex; flex-flow: column; height: 100%; diff --git a/www/whiteboard/inner.js b/www/whiteboard/inner.js index bf57e89b7..82bf2f816 100644 --- a/www/whiteboard/inner.js +++ b/www/whiteboard/inner.js @@ -15,6 +15,7 @@ define([ '/bower_components/chainpad/chainpad.dist.js', '/bower_components/secure-fabric.js/dist/fabric.min.js', + 'less!/whiteboard/app-whiteboard.less' ], function ( $, Sortify, diff --git a/www/worker/app-worker.less b/www/worker/app-worker.less index 47295b0aa..9357c8be4 100644 --- a/www/worker/app-worker.less +++ b/www/worker/app-worker.less @@ -1,10 +1,9 @@ @import (reference) "../../customize/src/less2/include/colortheme-all.less"; @import (reference) '../../customize/src/less2/include/framework.less'; -.framework_min_main(); - -// body &.cp-app-worker { + .framework_min_main(); + display: flex; flex-flow: column; diff --git a/www/worker/inner.js b/www/worker/inner.js index 20992b023..2e6d98153 100644 --- a/www/worker/inner.js +++ b/www/worker/inner.js @@ -9,7 +9,7 @@ define([ 'css!/bower_components/bootstrap/dist/css/bootstrap.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 ( $, Toolbar,