From f1025207782230175f86c0996320aa71f54810fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Mon, 7 Feb 2022 10:56:00 +0000 Subject: [PATCH 01/88] Polish Drive sidebar --- .../src/less2/include/colortheme-dark.less | 6 ++- .../src/less2/include/colortheme.less | 6 ++- .../src/less2/include/contextmenu.less | 4 +- customize.dist/src/less2/include/drive.less | 49 ++++++++++++++----- .../src/less2/include/leftside-menu.less | 6 ++- .../src/less2/include/variables.less | 4 ++ 6 files changed, 57 insertions(+), 18 deletions(-) diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index 1c71d4f05..c8997147a 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 diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 8817f9312..9063af5fc 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 diff --git a/customize.dist/src/less2/include/contextmenu.less b/customize.dist/src/less2/include/contextmenu.less index 08c7f1d9c..7767cf9c5 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,7 +12,7 @@ & > 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; } @@ -46,6 +47,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/drive.less b/customize.dist/src/less2/include/drive.less index c6a218653..3a1e654d8 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; diff --git a/customize.dist/src/less2/include/leftside-menu.less b/customize.dist/src/less2/include/leftside-menu.less index 5a69f528f..9ec56f9af 100644 --- a/customize.dist/src/less2/include/leftside-menu.less +++ b/customize.dist/src/less2/include/leftside-menu.less @@ -4,20 +4,22 @@ .leftside-menu-category_main() { .unselectable_make(); - padding: 5px 15px; + padding: 5px; margin: 15px 0; cursor: pointer; height: @variables_bar-height; + border-radius: @variables_radius; .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/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 From 5cc163baf1330a4becca589b7ac93584eb611256 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Mon, 7 Feb 2022 14:58:18 +0000 Subject: [PATCH 02/88] Rounded form elements --- customize.dist/src/less2/include/alertify.less | 3 +++ customize.dist/src/less2/include/checkmark.less | 4 ++++ customize.dist/src/less2/include/forms.less | 11 ++++++++--- customize.dist/src/less2/include/tokenfield.less | 8 ++++++++ 4 files changed, 23 insertions(+), 3 deletions(-) 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/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/forms.less b/customize.dist/src/less2/include/forms.less index 30c2e9197..5d6b334fa 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) { @@ -79,11 +80,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 +114,7 @@ font-size: 14px; text-decoration: none; cursor: pointer; - border-radius: 0; + border-radius: @variables_radius; transition: none; i, .fa, .cptools { @@ -230,7 +235,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 +308,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/tokenfield.less b/customize.dist/src/less2/include/tokenfield.less index e71d43c96..306176842 100644 --- a/customize.dist/src/less2/include/tokenfield.less +++ b/customize.dist/src/less2/include/tokenfield.less @@ -35,6 +35,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; @@ -92,6 +98,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; From 789d11e7fe0ca909530a514ab8789a71d312122c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Mon, 7 Feb 2022 14:58:47 +0000 Subject: [PATCH 03/88] Rounded limit bar --- customize.dist/src/less2/include/colortheme.less | 2 +- customize.dist/src/less2/include/limit-bar.less | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 9063af5fc..c34df76dc 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -268,7 +268,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; 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; } } } From 612467ed927d76f31ea3bb08c70b4aa9f61538b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Mon, 7 Feb 2022 14:59:08 +0000 Subject: [PATCH 04/88] Rounded settings page --- customize.dist/src/less2/include/contextmenu.less | 5 ++++- customize.dist/src/less2/include/leftside-menu.less | 3 ++- customize.dist/src/less2/include/sidebar-layout.less | 8 ++++++-- www/settings/inner.js | 4 ++-- 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/customize.dist/src/less2/include/contextmenu.less b/customize.dist/src/less2/include/contextmenu.less index 7767cf9c5..57ca91f30 100644 --- a/customize.dist/src/less2/include/contextmenu.less +++ b/customize.dist/src/less2/include/contextmenu.less @@ -17,6 +17,9 @@ border-top: 1px solid @cp_context-border; } } + .dropdown-menu { + padding: 6px 0px; + } li { padding: 0; font-size: @colortheme_app-font-size; @@ -39,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; } } diff --git a/customize.dist/src/less2/include/leftside-menu.less b/customize.dist/src/less2/include/leftside-menu.less index 9ec56f9af..830f63334 100644 --- a/customize.dist/src/less2/include/leftside-menu.less +++ b/customize.dist/src/less2/include/leftside-menu.less @@ -5,10 +5,11 @@ .leftside-menu-category_main() { .unselectable_make(); padding: 5px; - margin: 15px 0; + 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; 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/www/settings/inner.js b/www/settings/inner.js index 183f3acbb..df38e7110 100644 --- a/www/settings/inner.js +++ b/www/settings/inner.js @@ -1449,7 +1449,7 @@ define([ $('