diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 5c2d33249..fe49b3870 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -87,11 +87,12 @@ define([ ]); }; - var footLink = function (ref, loc, text) { + var footLink = function (ref, loc, text, icon) { if (!ref) { return; } var attrs = { href: ref, }; + var iconName = ''; if (!/^\//.test(ref)) { attrs.target = '_blank'; attrs.rel = 'noopener noreferrer'; @@ -100,7 +101,11 @@ define([ attrs['data-localization'] = loc; text = Msg[loc]; } - return h('a', attrs, text); + if (icon) { + iconName = 'i.fa.fa-' + icon; + icon = h(iconName); + } + return h('a', attrs, [icon, text]); }; Pages.versionString = "v4.14.0"; @@ -117,13 +122,12 @@ define([ var l = Msg._getLanguage(); ['imprint', 'privacy', 'terms', 'roadmap', 'source'].forEach(function (k) { var value = AppConfig[k]; + console.log('links', k, value); if (value === false) { return; } if (value === true) { customURLs[k] = defaultURLs[k]; return; } - - if (!value) { return; } if (typeof(value) === 'string') { customURLs[k] = value; return; @@ -142,7 +146,8 @@ define([ Pages.docsLink = footLink('https://docs.cryptpad.fr', 'docs_link'); Pages.roadmapLink = footLink(customURLs.roadmap, 'footer_roadmap'); - Pages.infopageFooter = function () { + Pages.infopageOldFooter = function () { // XXX DB: not used, kept to copy/paste + //var terms = footLink('/terms.html', 'footer_tos'); // FIXME this should be configurable like the other legal pages var legalFooter; // only display the legal part of the footer if it has content @@ -193,57 +198,94 @@ define([ ]); }; + Pages.infopageFooter = function () { + return h('footer.cp-footer', [ + h('div.cp-footer-left', [ + h('div.cp-logo-foot', [ + h('img', { + src: '/customize/CryptPad_logo.svg', + "aria-hidden": true, + alt: '' + }), + h('span.logo-font', 'CryptPad') + ]), + footLink('https://cryptpad.org', null, 'Website', 'link'), + footLink('https://opencollective.com/cryptpad/contribute/', 'footer_donate') // XXX DB: add OpenCollective icon + ]), + h('.div.cp-footer-center', [ + h('div.cp-footer-language', [ + h('i.fa.fa-language', {'aria-hidden': 'true'}), + languageSelector() + ]) + ]), + h('div.cp-footer-right', [ + h('span.cp-footer-version', 'Version: ' + Pages.versionString) // XXX DB: translate 'Version' ? + ]) + ]); + }; + Pages.infopageTopbar = function () { var rightLinks; var username = window.localStorage.getItem('User_name'); var registerLink; if (!ApiConfig.restrictRegistration) { - registerLink = h('a.nav-item.nav-link.cp-register-btn', { href: '/register/'}, Msg.login_register); + registerLink = h('a.nav-item.nav-link.cp-register-btn', { href: '/register/'}, [ + h('i.fa.fa-user', {'aria-hidden':'true'}), + Msg.login_register + ]); } if (username === null) { rightLinks = [ - h('a.nav-item.nav-link.cp-login-btn', { href: '/login/'}, Msg.login_login), + h('a.nav-item.nav-link.cp-login-btn', { href: '/login/'}, [ + h('i.fa.fa-sign-in', {'aria-hidden':'true'}), + Msg.login_login + ]), registerLink, ]; } else { rightLinks = h('a.nav-item.nav-link.cp-user-btn', { href: '/drive/' }, [ - h('i.fa.fa-user-circle'), + h('i.fa.fa-user-circle', {'aria-hidden':'true'}), " ", username ]); } +/* var button = h('button.navbar-toggler', { 'type':'button', /*'data-toggle':'collapse', 'data-target':'#menuCollapse', 'aria-controls': 'menuCollapse', 'aria-expanded':'false', - 'aria-label':'Toggle navigation'*/ - }, h('i.fa.fa-bars ')); + 'aria-label':'Toggle navigation' + }, h('i.fa.fa-bars ')); */ - $(button).click(function () { - if ($('#menuCollapse').is(':visible')) { - return void $('#menuCollapse').slideUp(); - } - $('#menuCollapse').slideDown(); - }); + // XXX button to collapse navbar on small screens + // $(button).click(function () { + // if ($('#menuCollapse').is(':visible')) { + // return void $('#menuCollapse').slideUp(); + // } + // $('#menuCollapse').slideDown(); + // }); return h('nav.navbar.navbar-expand-lg', - h('a.navbar-brand', { href: '/index.html'}, [ - h('img', { - src: '/customize/CryptPad_logo.svg?', - 'aria-hidden': true, - alt: '' - }), 'CryptPad' - ]), - button, - h('div.collapse.navbar-collapse.justify-content-end#menuCollapse', [ - h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, Msg.about), - h('a.nav-item.nav-link', { href: 'https://docs.cryptpad.fr'}, Msg.docs_link), + // XXX add link back to index.html on footer logo + // h('a.navbar-brand', { href: '/index.html'}, [ + // h('img', { + // src: '/customize/CryptPad_logo.svg?', + // 'aria-hidden': true, + // alt: '' + // }), 'CryptPad' + // ]), + //button, XXX collapse button + h('div', [ + // XXX remove about page + // h('a.nav-item.nav-link', { href: '/what-is-cryptpad.html'}, Msg.about), h('a.nav-item.nav-link', { href: '/features.html'}, Pages.areSubscriptionsAllowed()? Msg.pricing: Msg.features), + h('a.nav-item.nav-link', { href: 'https://docs.cryptpad.fr'}, + [h('i.fa.fa-book', {'aria-hidden':'true'}),Msg.docs_link]), ].concat(rightLinks)) ); }; diff --git a/customize.dist/pages/index.js b/customize.dist/pages/index.js index 816dbd49b..279bbe5fc 100644 --- a/customize.dist/pages/index.js +++ b/customize.dist/pages/index.js @@ -46,8 +46,7 @@ define([ [ 'code', Msg.type.code], [ 'form', Msg.type.form], [ 'whiteboard', Msg.type.whiteboard], - [ 'slide', Msg.type.slide], - [ 'drive', Msg.type.drive] + [ 'slide', Msg.type.slide] ].filter(function (x) { return isAvailableType(x[0]); }) @@ -99,51 +98,28 @@ define([ }); } - var supportText = Pages.setHTML(h('span'), Msg.home_support); - Pages.documentationLink(supportText.querySelector('a'), "https://docs.cryptpad.fr/en/how_to_contribute.html"); + var pageLink = function (ref, loc, text) { + if (!ref) { return; } + var attrs = { + href: ref, + }; + if (!/^\//.test(ref)) { + attrs.target = '_blank'; + attrs.rel = 'noopener noreferrer'; + } + if (loc) { + attrs['data-localization'] = loc; + text = Msg[loc]; + } + return h('a', attrs, text); + }; - var opensource = Pages.setHTML(h('p'), Msg.home_opensource); - Pages.externalLink(opensource.querySelector('a'), "https://github.com/xwiki-labs/cryptpad"); - - var blocks = [ - h('div.row.cp-page-section', [ - h('div.col-sm-6', - h('img.img-fluid.cp-img-invert', { - src:'/customize/images/shredder.png', - alt:'', - 'aria-hidden': 'true' - }) - ), - h('div.col-sm-6', [ - h('h2', Msg.home_privacy_title), - h('p', Msg.home_privacy_text) - ]) - ]), - h('div.row.cp-page-section', - h('div.col-sm-12', [ - h('h2', Msg.home_host_title), - h('p'), Msg.home_host - ]) - ), - h('div.row.cp-page-section', [ - h('div.col-sm-6', [ - h('h2', Msg.home_opensource_title), - opensource, - h('img.small-logo.cp-img-invert', { - src: '/customize/images/logo_AGPLv3.svg', - alt: 'APGL3 License Logo' - }) - ]), - h('div.col-sm-6', [ - h('h2', Msg.home_support_title), - supportText, - subscribeButton, - Pages.crowdfundingButton(function () { - Feedback.send('HOME_SUPPORT_CRYPTPAD'); - }), - ]) - ]) - ]; + // XXX DB: this may be wrong, pasted over form pages.js + var imprintUrl = AppConfig.imprint && (typeof(AppConfig.imprint) === "boolean" ? + '/imprint.html' : AppConfig.imprint); + imprintLink = AppConfig.imprint ? pageLink(imprintUrl, 'imprint') : undefined; + privacyLink = pageLink(AppConfig.privacy, 'privacy'); + termsLink = pageLink(AppConfig.terms, 'terms'); var notice; /* Admins can specify a notice to display in application_config.js via the `homeNotice` attribute. @@ -161,21 +137,39 @@ define([ Pages.infopageTopbar(), h('div.container.cp-container', [ h('div.row.cp-home-hero', [ - h('div.cp-title.col-md-7', [ + h('div.cp-title.col-md-6', [ h('img', { src: '/customize/CryptPad_logo.svg?' + urlArgs, 'aria-hidden': 'true', alt: '' }), - h('h1', 'CryptPad'), - UI.setHTML(h('span.tag-line'), Msg.main_catch_phrase) + h('h1', 'CryptPad.fr'), // XXX use instance name + UI.setHTML(h('span.tag-line'), Msg.main_catch_phrase), // XXX Use instance description + h('div.cp-instance-location', [ + h('i.fa.fa-map-pin', {'aria-hidden': 'true'}), + 'Encrypted data is hosted in: France (OVH)' // XXX Use instance location + ]), + termsLink, // XXX DB: insert link to ToS if available + privacyLink, // XXX DB: insert link to privacy policy if available + imprintLink // XXX DB: insert link to imprint if available ]), - h('div.col-md-5.cp-app-grid', [ - icons, + h('div.col-md-6', [ + h('div.cp-app-grid', [ + h('span.cp-app-new', [ + h('i.fa.fa-plus'), + Msg.fm_newFile + ]), + h('div.cp-app-grid-apps', [ + icons, + ]) + ]), + h('a.cp-app-drive', {'href': '/drive/'}, [ // XXX check this is correct + h('i.fa.fa-hdd-o', {'aria-hidden': 'true'}), + 'Drive: 1GB' // XXX Use instance default storage + ]) // XXX DB TODO: add drive link ]) ]), - notice, - blocks + notice ]), Pages.infopageFooter(), ]), diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less index 5c829cec4..5bf91f351 100644 --- a/customize.dist/src/less2/include/alertify.less +++ b/customize.dist/src/less2/include/alertify.less @@ -122,6 +122,7 @@ .dialog { & > div { background-color: @cp_alertify-bg; + border-radius: @variables_radius_L; &.half { width: 50%; max-width: 50%; @@ -205,6 +206,8 @@ box-sizing: border-box; padding: 0 15px; cursor: pointer; + border-top-left-radius: @variables_radius; + border-top-right-radius: @variables_radius; &:not(.disabled):hover { background-color: @cp_alertify-hover; } diff --git a/customize.dist/src/less2/include/avatar.less b/customize.dist/src/less2/include/avatar.less index acaa13351..bfb920a03 100644 --- a/customize.dist/src/less2/include/avatar.less +++ b/customize.dist/src/less2/include/avatar.less @@ -1,5 +1,6 @@ @import (reference) "./tools.less"; @import (reference) "./colortheme-all.less"; +@import (reference) "./variables.less"; .avatar_vars( @width: 30px ) { @@ -24,6 +25,7 @@ font-size: 16px; display: flex; align-items: center; + border-radius: @variables_radius; .cp-avatar-default, media-tag { display: inline-flex; @@ -32,6 +34,8 @@ height: @avatar-width; height: var(--avatar-width); + border-radius: @variables_radius; + justify-content: center; align-items: center; diff --git a/customize.dist/src/less2/include/checkmark.less b/customize.dist/src/less2/include/checkmark.less index f638cb8cf..f41f1bcb8 100644 --- a/customize.dist/src/less2/include/checkmark.less +++ b/customize.dist/src/less2/include/checkmark.less @@ -1,5 +1,6 @@ @import (reference) "./colortheme-all.less"; @import (reference) "./tools.less"; +@import (reference) "./variables.less"; .checkmark_vars( @size: 20px @@ -39,6 +40,9 @@ align-items: center; position: relative; .tools_unselectable(); + .cp-checkmark-mark { + border-radius: @variables_radius; + } & > a { margin-left: 0.25em; diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index 1c71d4f05..e2f585b6e 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -168,11 +168,13 @@ @cp_buttons-cancel-border: @cryptpad_color_grey_400; // Sidebar layout -@cp_sidebar-left-bg: @cryptpad_color_grey_850; +@cp_sidebar-left-bg: @cryptpad_color_grey_900; @cp_sidebar-left-fg: @cryptpad_text_col; +@cp_sidebar-left-item-bg: @cryptpad_color_grey_800; @cp_sidebar-right-bg: @cryptpad_color_grey_900; @cp_sidebar-right-fg: @cryptpad_text_col; -@cp_sidebar-left-active: @cp_sidebar-right-bg; +@cp_sidebar-left-active: @cryptpad_color_grey_400; +@cp_sidebar-left-active-fg: @cryptpad_color_grey_900; // XXX create text_col_inv ? @cp_sidebar-hint: fade(@cryptpad_text_col, 80%); // Drive @@ -232,6 +234,7 @@ // Pad Creation Screen @cp_creation-bg: @cryptpad_color_grey_800; @cp_creation-fg: @cryptpad_text_col; +@cp_creation-template: @cryptpad_color_grey_700; @cp_creation-button-bg: @cryptpad_color_brand; @cp_creation-button-fg: @cryptpad_color_white; @cp_creation-error-bg: @cryptpad_color_blue; @@ -259,7 +262,7 @@ @cp_static-fg: @cryptpad_text_col; @cp_static-link: @cryptpad_color_brand_300; @cp_static-title: @cryptpad_color_brand; -@cp_static-footer: @cryptpad_color_grey_950; +@cp_static-footer: fade(@cryptpad_color_brand, 20%); @cp_static-footer-border: @cryptpad_color_grey_600; @cp_static-topbar-fg: @cryptpad_color_brand_300; @cp_static-card-bg: @cryptpad_color_grey_800; @@ -293,9 +296,10 @@ @cp_support-header-bg: @cryptpad_color_grey_700; // Toolbar -@cp_toolbar-bg: @cryptpad_color_grey_850; +@cp_toolbar-bg: @cryptpad_color_grey_900; @cp_toolbar-fg: @cryptpad_text_col; -@cp_toolbar-bottom-fg: @cryptpad_text_col; +@cp_toolbar-bottom-bg: @cryptpad_text_col; +@cp_toolbar-bottom-fg: @cryptpad_color_grey_900; @cp_toolbar-logo-bg: @cryptpad_color_grey_200; @cp_toolbar-fade1: fade(@cryptpad_text_col, 10%); @@ -305,7 +309,7 @@ @cp_history-line-bg: @cryptpad_color_grey_900; @cp_history-bg1: @cryptpad_color_grey_600; @cp_history-bg2: @cryptpad_color_grey_800; -@cp_history-fg: @cp_toolbar-bottom-fg; +@cp_history-fg: @cp_toolbar-fg; // Tokenfield @cp_token-bg: @cryptpad_color_grey_700; @@ -417,7 +421,7 @@ // Teams @cp_teams-card-bg: @cryptpad_color_grey_800; -@cp_teams-leftside-bg: darken(@cryptpad_color_grey_800, 10%); +@cp_teams-leftside-bg: @cp_sidebar-left-bg; @cp_teams-invite-bg: fade(@cryptpad_color_brand, 50%); @cp_teams-invite-fg: @cryptpad_text_col; @cp_teams-roster-odd: fade(@cryptpad_text_col, 15%); diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 8817f9312..55bfe92db 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -167,11 +167,13 @@ @cp_buttons-cancel-border: #949494; // Sidebar layout -@cp_sidebar-left-bg: @cryptpad_color_grey_200; +@cp_sidebar-left-bg: @cryptpad_color_white; @cp_sidebar-left-fg: @cryptpad_text_col; +@cp_sidebar-left-item-bg: @cryptpad_color_grey_200; @cp_sidebar-right-bg: @cryptpad_color_white; @cp_sidebar-right-fg: @cryptpad_text_col; -@cp_sidebar-left-active: @cp_sidebar-right-bg; +@cp_sidebar-left-active: @cryptpad_color_grey_700; +@cp_sidebar-left-active-fg: @cryptpad_color_grey_200; @cp_sidebar-hint: @cryptpad_color_grey_600; // Drive @@ -231,6 +233,7 @@ // Pad Creation Screen @cp_creation-bg: @cryptpad_color_white; @cp_creation-fg: @cryptpad_text_col; +@cp_creation-template: @cryptpad_color_grey_100; @cp_creation-button-bg: @cryptpad_color_brand; @cp_creation-button-fg: @cryptpad_color_white; @cp_creation-error-bg: @cryptpad_color_blue; @@ -258,7 +261,7 @@ @cp_static-fg: @cryptpad_text_col; @cp_static-link: @cryptpad_color_brand; @cp_static-title: @cryptpad_color_brand; -@cp_static-footer: @cryptpad_color_grey_300; +@cp_static-footer: fade(@cryptpad_color_brand_300, 30%); @cp_static-footer-border: @cryptpad_color_white; @cp_static-topbar-fg: @cryptpad_color_brand; @cp_static-card-bg: @cryptpad_color_white; @@ -266,7 +269,7 @@ // Limit @cp_limit-fg: @cryptpad_text_col; -@cp-limit-bar-bg: @cryptpad_color_white; +@cp-limit-bar-bg: @cryptpad_color_grey_200; @cp-limit-bar-normal: @cryptpad_color_green; @cp-limit-bar-warning: @cryptpad_color_orange; @cp-limit-bar-above: @cryptpad_color_red; @@ -292,8 +295,9 @@ @cp_support-header-bg: @cryptpad_color_grey_300; // Toolbar -@cp_toolbar-bg: @cryptpad_color_grey_200; +@cp_toolbar-bg: @cryptpad_color_white; @cp_toolbar-fg: @cryptpad_text_col; +@cp_toolbar-bottom-bg: @cryptpad_color_grey_200; @cp_toolbar-bottom-fg: @cryptpad_text_col; @cp_toolbar-logo-bg: @cryptpad_color_white; @@ -304,7 +308,7 @@ @cp_history-line-bg: @cryptpad_color_white; @cp_history-bg1: #DDD; @cp_history-bg2: #BBB; -@cp_history-fg: @cp_toolbar-bottom-fg; +@cp_history-fg: @cp_toolbar-fg; // Tokenfield @cp_token-bg: @cryptpad_color_grey_400; @@ -321,7 +325,7 @@ @cp_shadow-color: fade(@cryptpad_color_black, 30%); // Apps -@cp_app-bg: @cryptpad_color_grey_100; +@cp_app-bg: @cryptpad_color_white; @cp_app-fg: @cryptpad_text_col; // Accounts @@ -416,7 +420,7 @@ // Teams @cp_teams-card-bg: @cryptpad_color_grey_300; -@cp_teams-leftside-bg: darken(@cryptpad_color_grey_200, 5%); +@cp_teams-leftside-bg: @cp_sidebar-left-bg; @cp_teams-invite-bg: fade(@cryptpad_color_brand, 50%); @cp_teams-invite-fg: @cryptpad_text_col; @cp_teams-roster-odd: fade(@cryptpad_text_col, 15%); diff --git a/customize.dist/src/less2/include/comments.less b/customize.dist/src/less2/include/comments.less index 360a64c18..e0c97a1ec 100644 --- a/customize.dist/src/less2/include/comments.less +++ b/customize.dist/src/less2/include/comments.less @@ -98,6 +98,8 @@ background-color: @cp_comments-bg; position: relative; padding: 5px; + border-top-left-radius: @variables_radius; + border-top-right-radius: @variables_radius; box-sizing: content-box; .avatar_main(40px); .cp-comment-metadata { @@ -114,8 +116,8 @@ cursor: pointer; outline: none; position: absolute; - right: 0; - top: 0; + right: 5px; + top: 5px; width: 20px; height: 20px; text-align: center; @@ -128,6 +130,8 @@ .cp-comment-content { background-color: @cp_comments-bg; padding: 0px 5px 5px 5px; + border-bottom-left-radius: @variables_radius; + border-bottom-right-radius: @variables_radius; white-space: pre-wrap; word-break: break-word; } @@ -150,6 +154,7 @@ } .cp-comment-active { background-color: rgba(0,0,0,0.2); + border-radius: @variables_radius; .cp-comment-actions { display: block; } diff --git a/customize.dist/src/less2/include/contextmenu.less b/customize.dist/src/less2/include/contextmenu.less index 08c7f1d9c..57ca91f30 100644 --- a/customize.dist/src/less2/include/contextmenu.less +++ b/customize.dist/src/less2/include/contextmenu.less @@ -1,4 +1,5 @@ @import (reference) "./colortheme-all.less"; +@import (reference) "./variables.less"; .contextmenu_main() { --LessLoader_require: LessLoader_currentFile(); @@ -11,11 +12,14 @@ & > ul { border: 1px solid @cp_context-border; background-color: @cp_context-bg; - border-radius: 0px; + border-radius: @variables_radius; .dropdown-divider { border-top: 1px solid @cp_context-border; } } + .dropdown-menu { + padding: 6px 0px; + } li { padding: 0; font-size: @colortheme_app-font-size; @@ -38,7 +42,7 @@ top: -0.7rem; left: 100%; background-color: @cp_context-bg; - border-radius: 0px; + border-radius: @variables_radius; border: 1px solid @cp_context-border; } } @@ -46,6 +50,7 @@ cursor: pointer; color: @cp_context-fg; padding-left: 10px; + border-radius: @variables_radius; &:hover { background-color: @cp_context-bg-hover; color: @cp_context-fg; diff --git a/customize.dist/src/less2/include/corner.less b/customize.dist/src/less2/include/corner.less index 476e6bf88..0e9c67535 100644 --- a/customize.dist/src/less2/include/corner.less +++ b/customize.dist/src/less2/include/corner.less @@ -1,4 +1,5 @@ @import (reference) "./colortheme-all.less"; +@import (reference) "./variables.less"; .corner_main() { --LessLoader_require: LessLoader_currentFile(); @@ -40,6 +41,7 @@ transform-origin: bottom right; animation: appear 0.8s ease-in-out; border: 1px solid @corner-fg; + border-radius: @variables_radius; box-shadow: 0 0 10px 0 @cp_shadow-color; &.cp-corner-alt { @@ -116,6 +118,7 @@ } text-transform: uppercase; border: 1px solid @corner-fg; + border-radius: @variables_radius; .fa, .cptools { margin-right: 0.3em; } diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less index 1449a341a..f0189ff0e 100644 --- a/customize.dist/src/less2/include/creation.less +++ b/customize.dist/src/less2/include/creation.less @@ -3,6 +3,7 @@ @import (reference) "./tools.less"; @import (reference) './icon-colors.less'; @import (reference) "./avatar.less"; +@import (reference) "./variables.less"; .creation_vars( @bg-color: @colortheme_apps[default] @@ -63,6 +64,7 @@ width: 700px; max-width: 90vw; height: 500px; + border-radius: @variables_radius_L; max-height: ~"calc(100vh - 20px)"; margin: 0px; flex-shrink: 0; @@ -131,6 +133,7 @@ color: @cp_creation-button-fg; margin: 3px 10px; border: none; + border-radius: @variables_radius; cursor: pointer; outline: none; text-transform: uppercase; @@ -256,6 +259,7 @@ } select { margin-right: 5px; + border-radius: @variables_radius; } } &.active { @@ -325,11 +329,12 @@ max-height: 159px; align-items: center; .cp-creation-template-element { - box-shadow: 2px 2px 7px @cp_shadow-color; + box-shadow: 0px 0px 5px 1px #00000030; // XXX width: 300px; max-width: calc(100% - 10px); - padding: 2px; + padding: 5px; margin: 5px; + border-radius: @variables_radius; display: inline-flex; box-sizing: border-box; @@ -337,7 +342,7 @@ text-align: left; line-height: 1em; cursor: pointer; - + background-color: @cp_creation-template; color: @creation-color; color: var(--creation-color); border: 1px solid transparent; diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less index c6a218653..fa4d4846b 100644 --- a/customize.dist/src/less2/include/drive.less +++ b/customize.dist/src/less2/include/drive.less @@ -270,7 +270,7 @@ white-space: nowrap; max-width: 500px; min-width: 200px; - padding: 0px; + padding: 10px 0px 0px 0px; color: @cp_sidebar-left-fg; display: flex; flex-flow: column; @@ -279,6 +279,7 @@ .cp-app-drive-tree-categories-container { flex: 1; overflow: auto; + padding: 0px 5px; } img.cp-app-drive-icon { margin-bottom: 3px; @@ -288,6 +289,8 @@ margin-top: 15px; //padding: 0 0 0 20px; padding: 0; + background-color: @cp_sidebar-left-item-bg; + border-radius: @variables_radius; cursor: auto; &li, li { padding: 0; @@ -307,7 +310,7 @@ text-overflow: ellipsis; //min-width: ~"calc(100% + 5px)"; .leftside-menu-category_main(); - width: ~"calc(100% + 5px)"; + //width: ~"calc(100% + 5px)"; // XXX remove margin: 0; //margin-bottom: -6px; display: flex; @@ -318,8 +321,9 @@ .fa, .cptools { display: inline-block; min-width: 0; - width: 25px; + width: 20px; margin-right: 0px; + z-index: 99; } .cp-app-drive-element { flex: 1; @@ -335,7 +339,10 @@ } .cp-app-drive-tree-category { margin: 0; - margin-top: 15px; + margin-top: 10px; + background-color: @cp_sidebar-left-item-bg; + border-radius: @variables_radius; + box-shadow: 0px 0px 5px 1px #00000030; // XXX .cp-app-drive-tree-root { .fa-trash-o { padding-left: 2px; @@ -361,11 +368,11 @@ margin-left: -10px; font-size: 14px; position: absolute; - left: -20px; - top: 10px; + left: -17px; + top: 11px; width: 11px !important; height: 11px !important; - background-color: @cp_sidebar-left-bg; + background-color: @cp_sidebar-left-item-bg; padding: 0; margin: 0; z-index: 10; @@ -376,17 +383,36 @@ } } .cp-app-drive-tree-docs { + box-shadow: 0px 0px 5px 1px #00000030; // XXX + padding: 2px; + + .cp-app-drive-element-row { + &.cp-leftside-active { + .cp-app-drive-icon-expcol { + color: @cryptpad_text_col; // +/- expand icon for folders + } + } + } + .cp-app-drive-tree-root > .cp-app-drive-element-row { + margin-left: 0px; + &.cp-app-drive-element-active { + .cp-app-drive-icon-expcol { + color: @cp_sidebar-left-active-fg; // +/- expand icon for drive + } + } + } .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-expcol { position: relative; top: 0; left: -10px; + background-color: transparent; } .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; + padding-left: 15px; } &> ul { padding-left: 30px; @@ -403,8 +429,8 @@ position: relative; &:before { position: absolute; - left: -15px; - top: -11px; + left: -12px; + top: -10px; content: ''; display: block; border-left: 1px solid @cp_drive-tree-branch; @@ -414,7 +440,7 @@ } &:after { position: absolute; - left: -15px; + left: -12px; bottom: -7px; content: ''; display: block; @@ -448,6 +474,7 @@ box-sizing: border-box; background: @cp_sidebar-right-bg; color: @cp_sidebar-right-fg; + padding-top: 10px; overflow-y: auto; flex: 1; display: flex; @@ -459,7 +486,7 @@ position: absolute; z-index: 50; } - &.cp-app-drive-readonly { + &.cp-app-drive-readonly { // XXX DB find new appearance for disabled/read-only drive? background: contrast(@cp_sidebar-right-bg, darken(@cp_sidebar-right-bg, 10%), lighten(@cp_sidebar-right-bg, 10%)); } h1 { @@ -570,6 +597,7 @@ } .drive_fileIcon; li { + border-radius: @variables_radius; &.cp-app-drive-element { position: relative; } @@ -639,6 +667,7 @@ } li { display: flex; + border-radius: @variables_radius; input { border: 1px solid transparent; margin: 0; @@ -727,6 +756,7 @@ } &> span { padding: 14px 5px; + border-radius: @variables_radius; &.cp-app-drive-sort-clickable { cursor: pointer; &:hover { @@ -912,6 +942,18 @@ .cp-toolbar-bottom { + .cp-toolbar-bottom-left { + @drive-light: lighten(@cryptpad_color_brand, 30%); + .cp-app-drive-toolbar-new { + border-radius: @variables_radius; + color: @cryptpad_color_grey_900; + border-color: @drive-light; + background-color: @drive-light; + &:hover { + background-color: fade(@drive-light, 80%); + } + } + } .cp-toolbar-bottom-right { .fa-history { order: 50; } // .fa-list, .fa-th-large, diff --git a/customize.dist/src/less2/include/dropdown.less b/customize.dist/src/less2/include/dropdown.less index 5ce3ee677..0526900ec 100644 --- a/customize.dist/src/less2/include/dropdown.less +++ b/customize.dist/src/less2/include/dropdown.less @@ -60,6 +60,8 @@ position: absolute; background-color: @cp_dropdown-bg; min-width: 250px; + padding: 5px; + border-radius: @variables_radius; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); z-index: 1000; //Z dropdown content max-height: 300px; @@ -77,7 +79,8 @@ & > a, & > span { color: @cp_dropdown-fg; - padding: 5px 16px; + border-radius: @variables_radius; + padding: 5px; text-decoration: none; display: flex; cursor: pointer; @@ -160,7 +163,7 @@ height: 1px; background: @cp_dropdown-bg-active; border: 0 !important; - border-top: 1px solid rgba(0,0,0,.1) !important; + //border-top: 1px solid rgba(0,0,0,.1) !important; // XXX & + hr { display: none; } diff --git a/customize.dist/src/less2/include/fileupload.less b/customize.dist/src/less2/include/fileupload.less index bd36faf8d..9a1b0c3d2 100644 --- a/customize.dist/src/less2/include/fileupload.less +++ b/customize.dist/src/less2/include/fileupload.less @@ -1,6 +1,7 @@ @import (reference) "./browser.less"; @import (reference) './colortheme-all.less'; @import (reference) './modal.less'; +@import (reference) './variables.less'; .fileupload_main () { --LessLoader_require: LessLoader_currentFile(); @@ -13,6 +14,7 @@ position: absolute; right: 10vw; bottom: 10vh; + border-radius: @variables_radius; box-sizing: border-box; z-index: 100001; //Z file upload table container: just above the file picker display: none; @@ -88,6 +90,7 @@ height: 100%; background-color: @cp_upload-progress; z-index: -1; //Z file upload progress container + border-radius: @variables_radius; } .cp-fileupload-table-cancel { text-align: center; diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less index 30c2e9197..56460e08a 100644 --- a/customize.dist/src/less2/include/forms.less +++ b/customize.dist/src/less2/include/forms.less @@ -14,6 +14,7 @@ color: @cp_forms-fg; background-color: @cp_forms-bg; border: 1px solid @cp_forms-border; + border-radius: @variables_radius; font-size: 100%; padding: @alertify_padding-base; &:not(.tui-full-calendar-content) { @@ -39,6 +40,7 @@ input { margin: 0 !important; flex: 1; + border-radius: @variables_radius 0 0 @variables_radius !important; min-width: 0; } span { @@ -47,6 +49,7 @@ height: 100%; margin-left: -1px; text-transform: unset !important; + border-radius: 0 @variables_radius @variables_radius 0; } } } @@ -79,11 +82,15 @@ } button { margin: 0 !important; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; } .cp-button-timer { height: 3px; & > div { height: 100%; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; background-color: @cp_buttons-primary; &.danger, &.btn-danger, &.danger-alt, &.btn-danger-alt { background-color: @cp_buttons-red; @@ -109,7 +116,7 @@ font-size: 14px; text-decoration: none; cursor: pointer; - border-radius: 0; + border-radius: @variables_radius; transition: none; i, .fa, .cptools { @@ -230,7 +237,7 @@ margin: 0px 0px @alertify_padding-base 0px; font-size: 12px; padding: 5px; - border-radius: 0px; + border-radius: @variables_radius; i { margin-right: 10px; } @@ -303,7 +310,7 @@ .flatpickr-calendar { background: @cp_flatpickr-bg; color: @cryptpad_text_col; - border-radius: 0; + border-radius: @variables_radius; box-shadow: @variables_shadow; -webkit-box-shadow: @variables_shadow; &.arrowTop::before, &.arrowTop::after { diff --git a/customize.dist/src/less2/include/infopages.less b/customize.dist/src/less2/include/infopages.less index e64e38744..1df1a2354 100644 --- a/customize.dist/src/less2/include/infopages.less +++ b/customize.dist/src/less2/include/infopages.less @@ -1,6 +1,9 @@ @import (reference) "./colortheme-all.less"; @import (reference) "./font.less"; +@infopages-radius: 5px; +@infopages-radius-L: 10px; + .infopages_link () { text-decoration: none; color: @cryptpad_color_link; @@ -52,7 +55,7 @@ body.html { padding-top: @infopages_padding; padding-bottom: @infopages_padding; min-height: 75vh; - max-width: 950px; + max-width: 1200px; h1 { font-size: 3em; margin-bottom: 0.5em; @@ -144,54 +147,102 @@ body.html { footer { background-color: @cp_static-footer; - padding-top: 20px; + padding: 10px; align-self: normal; // override align-items:center from parent in index.html - - .container { - margin-bottom: 20px; + box-shadow: inset 0px 7px 15px -7px rgba(0,0,0,0.3); + display: flex; + align-items: center; + justify-content: space-between; + // .container { + // margin-bottom: 20px; + // a { + // color: @cp_static-link; + // &:visited { + // color: @cp_static-link; + // } + // } + // } + .cp-footer-left, .cp-footer-right { + display: flex; + flex-direction: row; + align-items: center; a { - color: @cp_static-link; - &:visited { - color: @cp_static-link; - } + margin-left: 10px; + } + } + + a { + background-color: @cp_static-card-bg; + border-radius: @infopages-radius; + padding: 0.5em 0.7em; + * { + display: inline; + } + i { + margin-right: 5px; + } + &:hover { + color: @cryptpad_text_col; } } .cp-logo-foot { display: flex; - flex-flow: column; + flex-flow: row; width: 100%; align-items: center; + margin-right: 20px; img { - max-width: 60px; + max-height: 40px; display: block; + margin-right: 10px; } .logo-font { display: block; font-family: "IBM Plex Mono"; font-size: 1.5rem; color: @cp_static-title; - margin-bottom: 10px; + height: 40px; } } - .cp-version-footer { - background-color: @cp_static-footer; - display: flex; - flex-flow: column; - align-items: center; - padding: 0.5em; - border-top: 1px solid @cp_static-footer-border; + + .cp-footer-language{ + margin-right: 10px; + i { + font-size: 1.3em; + margin-right: 5px; + } select { min-width: 0; - margin-bottom: 10px; + background-color: @cp_static-card-bg; + color: @cryptpad_text_col; + border: 0px; + border-radius: @infopages-radius; + padding: 0.5em 0.7em; } } + .cp-footer-version { + font-family: 'IBM Plex Mono'; + } + // .cp-version-footer { + // background-color: @cp_static-footer; + // display: flex; + // flex-flow: column; + // align-items: center; + // padding: 0.5em; + // border-top: 1px solid @cp_static-footer-border; + // select { + // min-width: 0; + // margin-bottom: 10px; + // } + // } } // navigation top bar .navbar { width: 100%; color: @cp_static-topbar-fg; + justify-content: flex-end; .navbar-brand { display: block; height: 50px; @@ -208,20 +259,32 @@ body.html { margin-right: 0; } a { - border: 2px solid transparent; + //border: 2px solid transparent; white-space: nowrap; color: @cp_static-title; + background-color: @cp_static-card-bg; + border-radius: @infopages-radius; } .nav-link { padding: 0.5em 0.7em; + margin-left: 10px; color: @cp_static-link; + display: inline-block; &:hover { color: @cryptpad_text_col; } + i { + margin-right: 5px; + } } .cp-register-btn { - border: 2px solid @cp_static-topbar-fg; + background-color: @cp_static-topbar-fg; + color: @cp_static-bg; display: inline-block; + &:hover { + background-color: @cp_static-card-bg; + color: @cryptpad_text_col; + } } button:focus { outline: none; diff --git a/customize.dist/src/less2/include/leftside-menu.less b/customize.dist/src/less2/include/leftside-menu.less index 5a69f528f..830f63334 100644 --- a/customize.dist/src/less2/include/leftside-menu.less +++ b/customize.dist/src/less2/include/leftside-menu.less @@ -4,20 +4,23 @@ .leftside-menu-category_main() { .unselectable_make(); - padding: 5px 15px; - margin: 15px 0; + padding: 5px; + margin: 10px 0; cursor: pointer; height: @variables_bar-height; + border-radius: @variables_radius; + background-color: @cp_sidebar-left-item-bg; .fa, .cptools { display: inline-flex; justify-content: center; margin-right: 5px; - min-width: 25px; + min-width: 20px; } &:hover { background: fade(@cryptpad_text_col, 10%); } &.cp-leftside-active { background: @cp_sidebar-left-active; + color: @cp_sidebar-left-active-fg; } } diff --git a/customize.dist/src/less2/include/limit-bar.less b/customize.dist/src/less2/include/limit-bar.less index 324daf722..a219674ba 100644 --- a/customize.dist/src/less2/include/limit-bar.less +++ b/customize.dist/src/less2/include/limit-bar.less @@ -1,4 +1,5 @@ @import (reference) "./colortheme-all.less"; +@import (reference) "./variables.less"; .limit-bar_main () { --LessLoader_require: LessLoader_currentFile(); @@ -23,6 +24,7 @@ width: ~"calc(100% - 10px)"; height: 10px; overflow: hidden; + border-radius: @variables_radius; .cp-limit-usage { height: 10px; display: inline-block; @@ -65,7 +67,7 @@ padding-bottom: 0; justify-content: center; flex: 1; - border-radius: 0px; + border-radius: @variables_radius; } } } diff --git a/customize.dist/src/less2/include/loading.less b/customize.dist/src/less2/include/loading.less index ba76e32ae..03b4929db 100644 --- a/customize.dist/src/less2/include/loading.less +++ b/customize.dist/src/less2/include/loading.less @@ -180,6 +180,7 @@ height: 24px; background: @cp_loading-progress-bg; border: 1px solid @cp_loading-progress-bar-bg; + border-radius: @variables_radius; } .cp-loading-progress-bar-value { height: 100%; diff --git a/customize.dist/src/less2/include/modals-ui-elements.less b/customize.dist/src/less2/include/modals-ui-elements.less index ffb6f95c9..2b52c0cc0 100644 --- a/customize.dist/src/less2/include/modals-ui-elements.less +++ b/customize.dist/src/less2/include/modals-ui-elements.less @@ -41,6 +41,7 @@ .cp-app-prop-size-container { height: 20px; background-color: @cryptpad_color_brand; + border-radius: @variables_radius; margin: 10px 0; padding: 0; div { @@ -48,6 +49,8 @@ margin: 0; padding: 0; background-color: @cryptpad_color_grey_500; + border-top-left-radius: @variables_radius; + border-bottom-left-radius: @variables_radius; } } .cp-app-prop-size-legend { @@ -65,6 +68,7 @@ height: 20px; width: 20px; margin-right: 10px; + border-radius: @variables_radius; } .cp-app-prop-history-size-color { background-color: @cryptpad_color_grey_500; @@ -159,6 +163,7 @@ align-items: center; padding: 5px 0; outline: none; + border-radius: @variables_radius; & > i { margin-left: @snapshot_spacing; text-align: center; diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less index 564067fb7..39f142742 100644 --- a/customize.dist/src/less2/include/sidebar-layout.less +++ b/customize.dist/src/less2/include/sidebar-layout.less @@ -24,12 +24,14 @@ background: @cp_sidebar-left-bg; display: flex; flex-flow: column; + padding: 0px 5px; .cp-sidebarlayout-categories { flex: 1; .cp-sidebarlayout-category { display: flex; align-items: center; .leftside-menu-category_main(); + box-shadow: 0px 0px 5px 1px #00000030; // XXX } } &.cp-leftside-narrow { @@ -111,10 +113,12 @@ //border-radius: 0.25em 0 0 0.25em; border: 1px solid @cryptpad_color_grey_500; border-right: 0px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; } button { - //border-radius: 0 0.25em 0.25em 0; - //border: 1px solid #adadad; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; border-left: 0px; height: 40px; margin: 0 !important; diff --git a/customize.dist/src/less2/include/support.less b/customize.dist/src/less2/include/support.less index a07d9d316..3e4b3ac9c 100644 --- a/customize.dist/src/less2/include/support.less +++ b/customize.dist/src/less2/include/support.less @@ -42,10 +42,11 @@ width: 1200px; max-width: 90%; margin: 5px auto; + border-radius: @variables_radius; .cp-support-list-message { background-color: @msg-bg; - margin: 2px; - padding: 2px 5px; + padding: 5px 5px; + border-radius: @variables_radius; .cp-support-fromme { background-color: @fromme-bg; } @@ -73,6 +74,7 @@ .cp-support-list-actions { display: flex; order: 3; + margin-top: 5px; .cp-support-hide { display: none; } diff --git a/customize.dist/src/less2/include/tokenfield.less b/customize.dist/src/less2/include/tokenfield.less index e71d43c96..cf5eef0e7 100644 --- a/customize.dist/src/less2/include/tokenfield.less +++ b/customize.dist/src/less2/include/tokenfield.less @@ -1,5 +1,6 @@ @import (reference) "./colortheme-all.less"; @import (reference) "./tools.less"; +@import (reference) "./variables.less"; .tokenfield_main () { --LessLoader_require: LessLoader_currentFile(); @@ -35,6 +36,12 @@ flex: 1; min-width: 0 !important; } + button { + // no radius in input + button combo + // input .token-input is styled at the bottom of this file + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + } } .token { box-sizing: border-box; @@ -45,6 +52,7 @@ margin: 2px 0; margin-right: 5px; height: 24px; + border-radius: @variables_radius; vertical-align: middle; cursor: default; color: @cp_token-fg; @@ -92,6 +100,8 @@ max-width: 100%; width: 100%; min-width: 100% !important; + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; &:focus { outline: 0; box-shadow: none; diff --git a/customize.dist/src/less2/include/toolbar-history.less b/customize.dist/src/less2/include/toolbar-history.less index 2c97de873..707dd47ea 100644 --- a/customize.dist/src/less2/include/toolbar-history.less +++ b/customize.dist/src/less2/include/toolbar-history.less @@ -1,4 +1,5 @@ @import (reference) "./colortheme-all.less"; +@import (reference) "./variables.less"; .history_main () { --LessLoader_require: LessLoader_currentFile(); @@ -88,13 +89,20 @@ } button { margin: 0 5px; - border: 1px solid @cryptpad_text_col; + border: 1px solid @cp_toolbar-fg; + background-color: @cp_toolbar-bg; + color: @cp_toolbar-fg; + border-radius: @variables_radius; text-transform: uppercase; display: inline-flex; align-items: center; .fa:not(:last-child) { margin-right: 5px; } + &:hover { + // XXX DB: check hover in light/dark themes + background-color: fade(@cp_toolbar-fg, 30%); + } &:disabled { cursor: not-allowed !important; opacity: 0.6; @@ -233,9 +241,11 @@ display: flex; justify-content: space-between; align-items: center; - margin-left: 40px; + margin: 5px 0px 5px 40px; button { width: 50px; + color: @cp_toolbar-fg; + border-radius: @variables_radius; .fa:first-child:not(:last-child) { margin-right: 5px; } diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index 6ccec507d..dc5c52116 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -15,9 +15,12 @@ @bg-color: @colortheme_apps[default], // color of the toolbar background ) { @toolbar-bg-color: @bg-color; - @desat-color: desaturate(@bg-color, 20%); - @toolbar-bg-color-light: contrast(@cp_toolbar-fg, lighten(@bg-color, 30%), darken(@desat-color, 20%)); - @toolbar-bg-color-active: contrast(@cp_toolbar-fg, lighten(@bg-color, 20%), darken(@desat-color, 10%)); + // XXX Todo: clean up unused variables + // XXX: check contrasts of app colors used as btn background + // @desat-color: desaturate(@bg-color, 20%); + // @toolbar-bg-color-active: contrast(@cp_toolbar-fg, lighten(@bg-color, 20%), darken(@desat-color, 10%)); + @toolbar-bg-color-light: lighten(@bg-color, 30%); + @toolbar-bg-color-fade: fade(@toolbar-bg-color-light, 80%); }; .toolbar_main ( @@ -27,8 +30,9 @@ .toolbar_vars(@bg-color); --toolbar-bg-color: @toolbar-bg-color; + --toolbar-bg-color-fade: @toolbar-bg-color-fade; --toolbar-bg-color-light: @toolbar-bg-color-light; - --toolbar-bg-color-active: @toolbar-bg-color-active; + // --toolbar-bg-color-active: @toolbar-bg-color-active; .help_main(); .notifications_main(); @@ -392,7 +396,6 @@ //display: inline-block; button { height: 100%; - border-radius: 0; margin: 0; background: transparent; } @@ -439,6 +442,7 @@ screen and (max-height: 500px) { flex-wrap: wrap; height: @toolbar_line-height; + // XXX DB TODO: scale down icon logo on small screens .cp-pad-not-pinned { line-height: 32px; flex: unset; @@ -503,9 +507,12 @@ .cp-toolbar-link { height: @toolbar_line-height; width: @toolbar_line-height; - transform: scale(0.5); + //transform: scale(0.5); .cp-toolbar-link-logo { padding: 5px; + span { + font-size: 24px; + } } } .cp-toolbar-user { @@ -514,16 +521,20 @@ height: @toolbar_line-height; width: @toolbar_line-height; margin-left: 0; + padding: 0px; button { height: @toolbar_line-height; width: @toolbar_line-height; font-size: 15px; margin-top: -1px; - .cp-dropdown-button-title { - transform: scale(0.5); - bottom: -5px; - right: -5px; + &::before { + padding-top: 1px; } + // .cp-dropdown-button-title { + // transform: scale(0.5); + // bottom: -5px; + // right: -5px; + // } } } .cp-toolbar-user-dropdown { @@ -723,7 +734,7 @@ line-height: @toolbar_top-height; width: @toolbar_top-height; height: @toolbar_top-height; - padding: 0; + padding: 5px; box-sizing: border-box; display: inline-block; } @@ -735,9 +746,10 @@ display: flex; align-items: center; justify-content: center; - width: @toolbar_top-height; + width: @toolbar_top-height - 10px; font-size: 1em; - height: @toolbar_top-height; + height: @toolbar_top-height - 10px; + border-radius: @variables_radius; padding: 0px; margin: 0; &::before { @@ -795,22 +807,28 @@ text-decoration: none; height: auto; padding: 10px; + color: @toolbar-bg-color; + color: var(--toolbar-bg-color); - svg { - #outline, #squares { - fill: @toolbar-bg-color; - fill: var(--toolbar-bg-color); - } - #background { - fill: @cp_toolbar-logo-bg; - } + span { + font-size: 45px; } - img { - cursor: pointer; - height: 100%; - width: 100%; - } + // svg { + // #outline, #squares { + // fill: @toolbar-bg-color; + // fill: var(--toolbar-bg-color); + // } + // #background { + // fill: @cp_toolbar-logo-bg; + // } + // } + + // img { + // cursor: pointer; + // height: 100%; + // width: 100%; + // } } } .cp-toolbar-user { @@ -876,6 +894,19 @@ } } } + .cp-user-menu-logo { + text-align: left; + font-family: "IBM Plex Mono"; + color: @cryptpad_color_grey_500; + font-size: 1.5em; + padding: 5px; + img { + width: 25px; + } + .cp-user-menu-logo-text { + margin-left: 10px; + } + } p.cp-toolbar-account { &> span { font-weight: bold; @@ -896,8 +927,8 @@ } .cp-toolbar-history, .cp-toolbar-snapshots { - background-color: @toolbar-bg-color-light; - background-color: var(--toolbar-bg-color-light); + background-color: @cp_toolbar-bg; + //background-color: var(--toolbar-bg-color-light); color: @toolbar-color; } .cp-toolbar-snapshots { @@ -935,24 +966,9 @@ } } .cp-toolbar-bottom { - background-color: @toolbar-bg-color-light; - background-color: var(--toolbar-bg-color-light); color: @cp_toolbar-bottom-fg; - button:hover, button.cp-toolbar-button-active { - background-color: @toolbar-bg-color-active; - background-color: var(--toolbar-bg-color-active); - } - button.cp-toolbar-button-active { - border-color: @toolbar-bg-color-active; - border-color: var(--toolbar-bg-color-active); - } - button:hover, button:focus { - border-color: @toolbar-bg-color-active; - border-color: var(--toolbar-bg-color-active); - //border-color: @cryptpad_text_col; - } - display: inline-flex; + margin: 5px 0px; align-items: center; justify-content: space-between; max-width: 100%; @@ -967,18 +983,59 @@ margin: 5px 0px; } } + button { - border: 1px solid transparent; + border: 1px solid @cp_toolbar-bottom-bg; box-sizing: border-box; position: relative; margin: 0px; - border-radius: 0; + border-radius: @variables_radius; height: @toolbar_line-height; display: inline-flex; align-items: center; .fa, .cptools { margin-right: 5px; } + &:hover { + // XXX DB: not working well in dark/light + background-color: fade(@cp_toolbar-bottom-bg, 70%); + } + } + .cp-toolbar-bottom-left > button, + .cp-toolbar-bottom-mid > button, + .cp-toolbar-bottom-right > button, + .cp-toolbar-bottom-right > span > button { + background-color: @cp_toolbar-bottom-bg; + color: @cp_toolbar-bottom-fg; + &:hover { + // XXX DB: not working well in dark/light + background-color: fade(@cp_toolbar-bottom-bg, 50%); + border-color: fade(@cp_toolbar-bottom-bg, 50%); + } + &.cp-toolbar-button-active { + background-color: @cp_toolbar-bg; + border-color: @cp_toolbar-fg; + color: @cp_toolbar-fg; + &:hover { + // XXX DB: not working well in dark/light + background-color: fade(@cp_toolbar-bottom-bg, 50%); + } + } + } + + button.cp-toolbar-button-primary { + background-color: @toolbar-bg-color-light; + background-color: var(--toolbar-bg-color-light); + border-color: @toolbar-bg-color-light; + border-color: var(--toolbar-bg-color-light); + color: @cp_toolbar-bottom-fg; + &:hover { + // XXX DB: not working well in dark/light + background-color: fade(@toolbar-bg-color-light, 80%); + background-color: var(--toolbar-bg-color-fade); + border-color: fade(@toolbar-bg-color-light, 80%); + border-color: var(--toolbar-bg-color-fade); + } } button.cp-toolbar-collapse { /* @@ -988,10 +1045,24 @@ is very small, which makes it unlikely that you'll see the title unless you hover perfectly. The same is true of the drive's grid/list view toggle. */ - + position: relative; .fa { margin-right: 0px; } + .cp-collapsed-notif { + display: inline-block; + width: 12px; + height: 12px; + background-color: @cryptpad_color_red; + position: absolute; + bottom: -3px; + right: -3px; + border: 2px solid @cp_toolbar-bg; + border-radius: 50%; + } + &:not(.cp-toolbar-button-active) .cp-collapsed-notif { + display: none; + } } &.cp-toolbar-small { @@ -1013,14 +1084,25 @@ .cp-toolbar-bottom-left { display: flex; order: 1; + padding-left: 5px; + button { + margin-right: 5px; + } } .cp-toolbar-bottom-mid { display: flex; order: 2; + button { + margin-right: 5px; + } } .cp-toolbar-bottom-right { order: 3; display: flex; + padding-right: 5px; + button { + margin-left: 5px; + } #cp-toolbar-chat-drawer-open { order: 0; } #cp-toolbar-userlist-drawer-open { order: 1; } & > .cp-dropdown-container { @@ -1081,6 +1163,7 @@ } .cp-toolbar-drawer-content { box-shadow: 0px 1px 5px 0px @cp_shadow-color; + border-radius: @variables_radius; overflow-y: auto; overflow-x: hidden; &.cp-dropdown-visible { @@ -1089,7 +1172,8 @@ position: absolute; left: 0px; top: @toolbar_line-height; - margin: -1px; + //margin: -1px; + padding: 5px; min-width: 50px; background: @cp_dropdown-bg; display: flex; @@ -1105,15 +1189,15 @@ box-sizing: border-box; min-width: 150px; height: @toolbar_line-height; - border-radius: 0; + border-radius: @variables_radius; border: 0; } button { white-space: nowrap; - padding: 5px 16px; + padding: 5px; text-align: left; margin: 0; - border-radius: 0; + border-radius: @variables_radius; border: 0; width: 100%; line-height: 1em; diff --git a/customize.dist/src/less2/include/usergrid.less b/customize.dist/src/less2/include/usergrid.less index d4b03e89c..bb5605dc4 100644 --- a/customize.dist/src/less2/include/usergrid.less +++ b/customize.dist/src/less2/include/usergrid.less @@ -1,6 +1,7 @@ @import (reference) "./colortheme-all.less"; @import (reference) "./avatar.less"; @import (reference) "./tools.less"; +@import (reference) "./variables.less"; .usergrid_main() { --LessLoader_require: LessLoader_currentFile(); @@ -52,6 +53,7 @@ justify-content: center; align-items: center; padding: 5px; + border-radius: @variables_radius; margin: 3px !important; cursor: default; transition: order 0.5s, background-color 0.5s; diff --git a/customize.dist/src/less2/include/variables.less b/customize.dist/src/less2/include/variables.less index 077e32d52..815fe11be 100644 --- a/customize.dist/src/less2/include/variables.less +++ b/customize.dist/src/less2/include/variables.less @@ -10,3 +10,7 @@ // Used in modal.less and alertify.less @variables_padding: 12px; @variables_shadow: 0 8px 32px 0 @cp_shadow-color; + +// Rounded corners +@variables_radius: 5px; +@variables_radius_L: 10px; \ 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 26ef0328d..157e1d886 100644 --- a/customize.dist/src/less2/pages/page-index.less +++ b/customize.dist/src/less2/pages/page-index.less @@ -43,7 +43,6 @@ align-items: center; justify-content: center; flex-direction: column; - color: @cryptpad_color_brand; margin-top: 1.5em; img { max-width: 200px; @@ -53,14 +52,19 @@ h1 { font-family: "IBM Plex Mono"; font-weight: 500; - //font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", Times, serif; - //font-family: "Raleway"; + color: @cryptpad_color_brand; font-size: 3.7rem; } .tag-line { text-align: center; font-size: 1.4em; - color: @cp_static-link; + } + .cp-instance-location { + margin-top: 20px; + i { + font-size: 1.2em; + margin-right: 5px; + } } } @@ -70,12 +74,25 @@ } .cp-app-grid { - display: flex; - flex-wrap: wrap; - justify-content: space-around; + background-color: @cp_alertify-bg; + border-radius: @infopages-radius-L; + padding: 15px; + box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2); + .cp-app-new { + font-size: 1.4em; + line-height: 100%; + color: fade(@cryptpad_text_col, 80%); + i { + margin-right: 5px; + } + } + .cp-app-grid-apps { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + } a { margin: 10px; - text-decoration: none; } @media screen and (max-width: 768px) { margin-top: 40px; @@ -153,6 +170,7 @@ each(@colortheme_apps, { .cp-callout-@{key} { + border-radius: @infopages-radius; i { color: @value; } &:hover { @desat: desaturate(@value, 15%); @@ -161,6 +179,25 @@ } } }); + a.cp-app-drive { + color: @cryptpad_text_col; + font-size: 1.5em; + display: inline-block; + margin: 20px 0px; + padding: 10px; + border-radius: @infopages-radius-L; + &:visited { + color: @cryptpad_text_col; + } + &:hover { + background-color: fade(@cryptpad_text_col, 10%); + } + i { + color: @cryptpad_color_brand; + margin-right: 10px; + font-size: 1.3em; + } + } .cp-hidden { display: none !important; } .cp-callout-more { diff --git a/www/calendar/app-calendar.less b/www/calendar/app-calendar.less index d48914532..05bc4f31f 100644 --- a/www/calendar/app-calendar.less +++ b/www/calendar/app-calendar.less @@ -2,6 +2,7 @@ @import (reference) '../../customize/src/less2/include/sidebar-layout.less'; @import (reference) '../../customize/src/less2/include/tools.less'; @import (reference) '../../customize/src/less2/include/avatar.less'; +@import (reference) '../../customize/src/less2/include/variables.less'; &.cp-app-calendar { @@ -117,6 +118,7 @@ .tui-full-calendar-popup-container { background: @cp_flatpickr-bg; color: @cryptpad_text_col; + border-radius: @variables_radius; .tui-full-calendar-icon:not(.tui-full-calendar-calendar-dot):not(.tui-full-calendar-dropdown-arrow):not(.tui-full-calendar-ic-checkbox) { display: none; } @@ -182,6 +184,11 @@ .tui-full-calendar-section-allday { width: 100%; height: 32px; + border-radius: @variables_radius; + .tui-full-calendar-ic-checkbox { + margin-left: 5px; + border-radius: 2px; + } } } } @@ -255,7 +262,8 @@ align-items: center; margin-bottom: 20px; input { - width: 100px; + width: 80px; + margin-right: 5px; } } } @@ -273,6 +281,26 @@ #cp-toolbar .cp-calendar-browse { display: flex; align-items: center; + button { + color: @cp_toolbar-fg; + border-color: @cp_toolbar-fg; + &:hover { + background-color: fade(@cp_toolbar-fg, 50%); //XXX check light theme + cursor: pointer; + } + } + } + + .cp-calendar-newevent { + &:hover { + cursor: pointer; + } + } + + .cp-toolbar-bottom-right button, .cp-toolbar-user button { + &:hover { + cursor: pointer; + } } #cp-sidebarlayout-leftside { @@ -300,7 +328,7 @@ display: flex; align-items: center; justify-content: center; - margin: 5px 0; + margin: 5px 0 10px 0; &:not(:first-child) { margin-top: 30px; } @@ -310,12 +338,20 @@ align-items: center; justify-content: space-between; padding: 5px; + border-radius: @variables_radius; + background-color: @cp_sidebar-left-bg; &:not(.cp-unclickable) { cursor: pointer; } .cp-dropdown-container { position: initial; } + button.cp-calendar-actions { + background-color: transparent; + &:hover { + background-color: @cp_sidebar-left-bg; + } + } &.cp-ghost { padding: 0; button { @@ -326,12 +362,19 @@ justify-content: space-between; background: transparent; border: 1px solid @cryptpad_text_col; + border-radius: @variables_radius; + padding: 5px; height: 36px; font: @colortheme_app-font; align-items: center; color: @cryptpad_text_col; &:hover { - background: @cp_sidebar-left-active; + background-color: @cp_sidebar-left-active; + color: @cp_sidebar-left-active-fg; + border: 0px; + } + i { + margin-left: 5px; } } } @@ -339,21 +382,21 @@ margin-bottom: 10px; } &:hover { - background: fade(@cryptpad_text_col, 10%); + background: @cp_sidebar-left-item-bg; } &.cp-restricted { color: @cp_drive-header-fg; } .cp-calendar-icon { - width: 36px; + width: 30px; display: inline-flex; - height: 36px; - margin: -5px; + height: 30px; align-items: center; justify-content: center; + border-radius: @variables_radius; } &.cp-active { - background: @cp_sidebar-left-active; + background-color: @cp_sidebar-left-item-bg; .cp-calendar-inactive { display: none; } diff --git a/www/calendar/inner.js b/www/calendar/inner.js index 80b5606f2..2f1475f48 100644 --- a/www/calendar/inner.js +++ b/www/calendar/inner.js @@ -599,7 +599,7 @@ define([ text: '', options: options, // Entries displayed in the menu common: common, - buttonCls: 'btn btn-cancel fa fa-ellipsis-h small' + buttonCls: 'btn btn-default fa fa-gear small cp-calendar-actions' }; return UIElements.createDropdown(dropdownConfig)[0]; }; diff --git a/www/common/application_config_internal.js b/www/common/application_config_internal.js index 67d1d92cd..3625e11e9 100644 --- a/www/common/application_config_internal.js +++ b/www/common/application_config_internal.js @@ -177,12 +177,17 @@ define(function() { whiteboard: 'cptools-whiteboard', todo: 'cptools-todo', contacts: 'fa-address-book', + calendar: 'fa-calendar', kanban: 'cptools-kanban', doc: 'fa-file-word-o', presentation: 'fa-file-powerpoint-o', sheet: 'fa-file-excel-o', drive: 'fa-hdd-o', teams: 'fa-users', + admin: 'fa-gears', + settings: 'fa-gear', + profile: 'fa-user-circle', + support: 'fa-life-ring' }; // Ability to create owned pads and expiring pads through a new pad creation screen. diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 422820361..fd422c617 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -1732,6 +1732,14 @@ define([ var padType = metadataMgr.getMetadata().type; var options = []; + options.push({ + tag: 'div', + attributes: {'class': 'cp-user-menu-logo'}, + content: h('span', [ + h('img', {src: '/customize/CryptPad_logo_grey.svg',alt: 'CryptPad logo',}), + h('span.cp-user-menu-logo-text', "CryptPad") + ]), + }); if (config.displayNameCls) { var userAdminContent = []; if (accountName) { diff --git a/www/common/toolbar.js b/www/common/toolbar.js index 11772ca06..147359f06 100644 --- a/www/common/toolbar.js +++ b/www/common/toolbar.js @@ -463,15 +463,18 @@ MessengerUI, Messages, Pages) { createCollapse = function (toolbar) { var up = h('i.fa.fa-chevron-up', {title: Messages.toolbar_collapse}); var down = h('i.fa.fa-chevron-down', {title: Messages.toolbar_expand}); + var notif = h('span.cp-collapsed-notif'); var $button = $(h('button.cp-toolbar-collapse',[ up, - down + down, + notif ])); var $up = $(up); var $down = $(down); toolbar.$bottomR.prepend($button); $down.hide(); + $(notif).hide(); $button.click(function () { toolbar.$top.toggleClass('toolbar-hidden'); var hidden = toolbar.$top.hasClass('toolbar-hidden'); @@ -482,6 +485,7 @@ MessengerUI, Messages, Pages) { } else { $up.show(); $down.hide(); + $(notif).hide(); } }); }; @@ -574,7 +578,7 @@ MessengerUI, Messages, Pages) { throw new Error("You must provide a `metadataMgr` to display the share button"); } - var $shareBlock = $(h('button.cp-toolar-share-button', [ + var $shareBlock = $(h('button.cp-toolar-share-button.cp-toolbar-button-primary', [ h('i.fa.fa-shhare-alt'), h('span.cp-button-name', Messages.shareButton) ])); @@ -608,7 +612,7 @@ MessengerUI, Messages, Pages) { throw new Error("You must provide a `metadataMgr` to display the access button"); } - var $accessBlock = $(h('button.cp-toolar-access-button', [ + var $accessBlock = $(h('button.cp-toolar-access-button.cp-toolbar-button-primary', [ h('i.fa.fa-unlock-alt'), h('span.cp-button-name', Messages.accessButton) ])); @@ -638,7 +642,7 @@ MessengerUI, Messages, Pages) { throw new Error("You must provide a `metadataMgr` to display the userlist"); } - var $shareBlock = $(h('button.cp-toolar-share-button', [ + var $shareBlock = $(h('button.cp-toolar-share-button.cp-toolbar-button-primary', [ h('i.fa.fa-shhare-alt'), h('span.cp-button-name', Messages.shareButton) ])); @@ -902,7 +906,7 @@ MessengerUI, Messages, Pages) { href: href, title: buttonTitle, 'class': "cp-toolbar-link-logo" - }).append(UIElements.getSvgLogo()); + }).append(UI.getIcon(privateData.app)); var onClick = function (e) { e.preventDefault(); @@ -1179,6 +1183,9 @@ MessengerUI, Messages, Pages) { Common.mailbox.subscribe(['notifications', 'team', 'broadcast', 'reminders'], { onMessage: function (data, el) { + if (toolbar.$top.hasClass('toolbar-hidden')) { + $('.cp-collapsed-notif').css('display', ''); + } if (el) { $(div).prepend(el); } diff --git a/www/form/app-form.less b/www/form/app-form.less index d703a4a65..2d13f618e 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -526,6 +526,7 @@ background: @cp_form-bg1; padding: 10px; box-shadow: 0px 0px 15px @cp_shadow-color; + border-radius: @variables_radius; &:not(:last-child) { margin-bottom: 20px; } @@ -878,6 +879,7 @@ background: @cp_form-bg1; padding: 10px; margin-bottom: 20px; + border-radius: @variables_radius; & > *:not(:last-child) { margin-right: 10px; } @@ -900,6 +902,7 @@ padding: 5px; margin-top: -10px; margin-right: -10px; + border-radius: 0px @variables_radius 0px 0px; i { margin-right: 5px; } background: fade(@cryptpad_text_col, 10%); } diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index 79d5a87a3..7aaa8537c 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -26,6 +26,7 @@ .kanban-board-header { background-color: @palette0; color: @cp_kanban-fg; + border-radius: @variables_radius @variables_radius 0px 0px; } .kanban-board { .kanban-board-inner { @@ -34,6 +35,8 @@ max-height: 100%; display: flex; flex-flow: column; + border-radius: @variables_radius; + box-shadow: 0px 0px 5px 1px #00000030; // XXX DB } color: @cp_kanban-fg; button { @@ -81,9 +84,11 @@ } #cp-kanban-edit-body { border: 1px solid @cp_forms-border; + border-radius: @variables_radius; .CodeMirror { height: 105px; resize: vertical; + border-radius: 0px 0px @variables_radius @variables_radius; } .CodeMirror-scroll { box-sizing: content-box; @@ -91,6 +96,7 @@ .cp-markdown-toolbar { background-color: @cp_kanban-conflict-bg; color: @cp_kanban-fg; + border-radius: @variables_radius @variables_radius 0px 0px; button { &:hover { background-color: @cp_kanban-fg; @@ -174,8 +180,10 @@ align-items: center; justify-content: space-between; padding: 5px; + border-radius: @variables_radius; flex-wrap: wrap; background: @cp_kanban-item-bg; + box-shadow: 0px 0px 5px 1px #00000030; // XXX DB make this a variable? .tools_unselectable(); touch-action: none; cursor: move; @@ -250,6 +258,7 @@ padding: 0 5px; margin-right: 5px; margin-top: 5px; + border-radius: @variables_radius; background-color: @cp_kanban-tags-bg; display: inline-block; font-size: 12px; @@ -291,8 +300,8 @@ } main { - padding: 0 10px; - margin: 10px 0; + padding: 10px 5px; + //margin: 10px 0; flex: 1; overflow-y: auto; justify-content: space-around; @@ -327,8 +336,8 @@ } } footer { - margin: 10px; - margin-top: 0px; + margin: 5px; + margin-top: 5px; display: flex; span { .tools_unselectable(); @@ -336,7 +345,7 @@ width: 50%; border: 1px solid fade(@cp_kanban-fg, 70%); color: fade(@cp_kanban-fg, 70%); - border-radius: 0px; + border-radius: @variables_radius; font-size: 25px; display: inline-flex; justify-content: center; @@ -420,6 +429,7 @@ margin-right: 5px; margin-top: 5px; background-color: @cp_kanban-tags-bg; + border-radius: @variables_radius; display: inline-block; font-size: 14px; cursor: pointer; @@ -445,6 +455,12 @@ &:hover { background-color: darken(@board-bg, 10%); } + &:first-child { + border-radius: @variables_radius 0px 0px @variables_radius; + } + &:last-child { + border-radius: 0px @variables_radius @variables_radius 0px; + } } } } @@ -456,16 +472,16 @@ background-color: @cp_kanban-fg !important; color: @cp_app-bg; } - span.cp-kanban-view-small { - } + // span.cp-kanban-view-small { + // } } } } &.cp-kanban-quick { #cp-kanban-controls { .cp-kanban-changeView { - span.cp-kanban-view { - } + // span.cp-kanban-view { + // } span.cp-kanban-view-small { background-color: @cp_kanban-fg !important; color: @cp_app-bg; @@ -558,6 +574,7 @@ width: 50px; margin: 10px 5px; border: 1px solid @cp_kanban-fg; + border-radius: @variables_radius; color: @cp_kanban-fg; height: 40px; display: inline-flex; @@ -655,6 +672,6 @@ .form-group { text-align: right; - margin-button: 5px; + margin-bottom: 5px; } } diff --git a/www/settings/inner.js b/www/settings/inner.js index ee48e19cd..b761aa5a5 100644 --- a/www/settings/inner.js +++ b/www/settings/inner.js @@ -1450,7 +1450,7 @@ define([ $('