From f233d6d248450d0061478a1549d7ac8a87a5bddd Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 20 Mar 2024 13:45:36 +0100 Subject: [PATCH] Apply style rules for admin/customize section --- customize.dist/src/less2/include/forms.less | 2 +- .../src/less2/include/sidebar-layout.less | 64 ++++++++++++++----- customize.dist/src/less2/include/support.less | 6 +- www/admin/app-admin.less | 13 ++++ www/admin/inner.js | 14 ++-- www/moderation/app-moderation.less | 6 +- www/settings/app-settings.less | 6 +- 7 files changed, 74 insertions(+), 37 deletions(-) diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less index cd8b9ee3e..c78bac7ad 100644 --- a/customize.dist/src/less2/include/forms.less +++ b/customize.dist/src/less2/include/forms.less @@ -72,7 +72,7 @@ } textarea, div.cp-textarea { - padding: 8px; + padding: 8px @alertify_padding-base; &[readonly] { overflow: hidden; resize: none; diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less index 838aa071c..fb13a4a3a 100644 --- a/customize.dist/src/less2/include/sidebar-layout.less +++ b/customize.dist/src/less2/include/sidebar-layout.less @@ -8,7 +8,8 @@ @import (reference) "/customize/src/less2/include/leftside-menu.less"; @import (reference) "/customize/src/less2/include/browser.less"; -@sidebar_button-width: 25rem;; +@sidebar_block-width: 25rem;; +@sidebar_base-margin: 0.5rem; .sidebar-layout_main() { --LessLoader_require: LessLoader_currentFile(); @@ -113,22 +114,53 @@ flex-flow: column; align-items: baseline; } - input { - max-width: 25rem; + label { + margin-bottom: 0; + } + input, textarea { + font-family: inherit; + } + input, textarea { + max-width: @sidebar_block-width; + } + [type="color"] { + width: @sidebar_block-width/5; + } + .cp-labelled-input { + margin-top: @sidebar_base-margin; + max-width: ~"min(100%, 25rem)"; + width: @sidebar_block-width; + label { + width: 100%; + } } nav { display: flex; align-items: baseline; - .btn.btn-primary { - margin: 5px 0.5rem 0 0; + margin-top: @sidebar_base-margin; + .btn { + margin-top: 0; + margin-bottom: 0; + margin-left: 0; + } + } + .cp-sidebar-flex-block { + display: flex; + align-items: center; + nav { + margin-top: 0; + } + } + nav, .cp-sidebar-flex-block { + & > * { + margin-right: @sidebar_base-margin; + &:last-child { + margin-right: 0; + } } } .cp-sidebar-bigger-alert { - font-size: 16px; - } - label { - margin-bottom: 0; - margin-top: 0.5rem; + font-size: 16px; } th { max-width: 60vw; @@ -140,7 +172,7 @@ margin-right: 2px; } .cp-checkmark { - padding: 0.5rem; + padding: @sidebar_base-margin; } .cp-broadcast-container { display: flex; @@ -161,7 +193,7 @@ } .cp-sidebar-input-block { display: inline-flex; - width: @sidebar_button-width; + width: @sidebar_block-width; max-width: 100%; input { flex: 1; @@ -192,7 +224,7 @@ .cp-sidebarlayout-description { display: block; color: @cp_sidebar-hint; - margin-bottom: 0.5rem; + margin-bottom: @sidebar_base-margin; p { margin-bottom: 0; } @@ -221,7 +253,7 @@ } .cp-sidebarlayout-input-block { display: inline-flex; - width: @sidebar_button-width; + width: @sidebar_block-width; max-width: 100%; input { flex: 1; @@ -243,7 +275,7 @@ margin: 10px 0; } button.btn { - margin: 0 0.5rem 0 0; + margin: 0 @sidebar_base-margin 0 0; &:last-child { margin-right: 0; } @@ -260,7 +292,7 @@ padding-bottom: 20px; .cp-sidebarlayout-categories { .cp-sidebarlayout-category { - margin: 0 0 0.5rem 0; + margin: 0 0 @sidebar_base-margin 0; span.cp-sidebar-layout-category-name { display: inline !important; // override "narrow" mode } diff --git a/customize.dist/src/less2/include/support.less b/customize.dist/src/less2/include/support.less index 2e40946ef..c8fb74f2d 100644 --- a/customize.dist/src/less2/include/support.less +++ b/customize.dist/src/less2/include/support.less @@ -18,7 +18,7 @@ margin-bottom: 10px; } [type="text"] { - width: @sidebar_button-width; + width: @sidebar_block-width; margin-bottom: 10px; } hr { @@ -26,8 +26,8 @@ } textarea { box-sizing: border-box; - width: 2*@sidebar_button-width; - max-width: 100%; + width: 2*@sidebar_block-width !important; + max-width: 100% !important; padding: 10px 15px; height: 300px; } diff --git a/www/admin/app-admin.less b/www/admin/app-admin.less index 242f368a2..dbf468705 100644 --- a/www/admin/app-admin.less +++ b/www/admin/app-admin.less @@ -19,5 +19,18 @@ display: flex; flex-flow: column; font: @colortheme_app-font; + + .cp-admin-customize-logo { + padding: 1em; + img { + max-height: 250px; + } + } + .cp-admin-color-current { + width: 20px; + height: 20px; + border-radius: 5px; + background-color: @cryptpad_color_brand; + } } diff --git a/www/admin/inner.js b/www/admin/inner.js index 727233bf8..d9dbde5a5 100644 --- a/www/admin/inner.js +++ b/www/admin/inner.js @@ -776,7 +776,7 @@ define([ 'aria-labelledby': 'cp-admin-logo' }); - var currentContainer = blocks.block(); + var currentContainer = blocks.block([], 'cp-admin-customize-logo'); let redraw = () => { var current = h('img', {src: '/api/logo?'+(+new Date())}); $(currentContainer).empty().append(current); @@ -856,14 +856,10 @@ define([ let current = blocks.block([], 'cp-admin-color-current'); let labelCurrent = blocks.labelledInput(Messages.admin_colorCurrent, current); let preview = blocks.block([ - blocks.block([ - blocks.link('CryptPad', '/admin/#customize') - ]), - blocks.nav([ - blocks.button('primary', 'fa-floppy-o', Messages.settings_save), - blocks.button('secondary', 'fa-floppy-o', Messages.settings_save), - ]) - ], 'cp-admin-color-preview'); + blocks.link('CryptPad', '/admin/#customize'), + blocks.button('primary', 'fa-floppy-o', Messages.settings_save), + blocks.button('secondary', 'fa-floppy-o', Messages.settings_save), + ], 'cp-admin-color-preview cp-sidebar-flex-block'); let labelPreview = blocks.labelledInput(Messages.admin_colorPreview, preview); let $preview = $(preview); diff --git a/www/moderation/app-moderation.less b/www/moderation/app-moderation.less index 46e4f61bd..1cf4e1810 100644 --- a/www/moderation/app-moderation.less +++ b/www/moderation/app-moderation.less @@ -56,11 +56,7 @@ display: flex; align-items: center; max-width: 100%; - width: 2*@sidebar_button-width; - input { - //width: @sidebar_button-width !important; - //max-width: @sidebar_button-width; - } + width: 2*@sidebar_block-width; textarea { margin: 0; height: 5rem; diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less index 4b89b1c74..ee5c1afc9 100644 --- a/www/settings/app-settings.less +++ b/www/settings/app-settings.less @@ -59,7 +59,7 @@ display: inline; } button.btn { - width: @sidebar_button-width; + width: @sidebar_block-width; max-width: 100%; margin: 0 !important; } @@ -85,7 +85,7 @@ } .cp-settings-info-block { [type="text"] { - width: @sidebar_button-width; + width: @sidebar_block-width; max-width: 100%; } } @@ -105,7 +105,7 @@ margin-top:0.5rem; } [type="password"], [type="text"] { - //width: @sidebar_button-width; + //width: @sidebar_block-width; flex: unset; } button {