Apply style rules for admin/customize section

This commit is contained in:
yflory 2024-03-20 13:45:36 +01:00
parent 6ffa61126b
commit f233d6d248
7 changed files with 74 additions and 37 deletions

View File

@ -72,7 +72,7 @@
} }
textarea, div.cp-textarea { textarea, div.cp-textarea {
padding: 8px; padding: 8px @alertify_padding-base;
&[readonly] { &[readonly] {
overflow: hidden; overflow: hidden;
resize: none; resize: none;

View File

@ -8,7 +8,8 @@
@import (reference) "/customize/src/less2/include/leftside-menu.less"; @import (reference) "/customize/src/less2/include/leftside-menu.less";
@import (reference) "/customize/src/less2/include/browser.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() { .sidebar-layout_main() {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
@ -113,22 +114,53 @@
flex-flow: column; flex-flow: column;
align-items: baseline; align-items: baseline;
} }
input { label {
max-width: 25rem; 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 { nav {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
.btn.btn-primary { margin-top: @sidebar_base-margin;
margin: 5px 0.5rem 0 0; .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 { .cp-sidebar-bigger-alert {
font-size: 16px; font-size: 16px;
}
label {
margin-bottom: 0;
margin-top: 0.5rem;
} }
th { th {
max-width: 60vw; max-width: 60vw;
@ -140,7 +172,7 @@
margin-right: 2px; margin-right: 2px;
} }
.cp-checkmark { .cp-checkmark {
padding: 0.5rem; padding: @sidebar_base-margin;
} }
.cp-broadcast-container { .cp-broadcast-container {
display: flex; display: flex;
@ -161,7 +193,7 @@
} }
.cp-sidebar-input-block { .cp-sidebar-input-block {
display: inline-flex; display: inline-flex;
width: @sidebar_button-width; width: @sidebar_block-width;
max-width: 100%; max-width: 100%;
input { input {
flex: 1; flex: 1;
@ -192,7 +224,7 @@
.cp-sidebarlayout-description { .cp-sidebarlayout-description {
display: block; display: block;
color: @cp_sidebar-hint; color: @cp_sidebar-hint;
margin-bottom: 0.5rem; margin-bottom: @sidebar_base-margin;
p { p {
margin-bottom: 0; margin-bottom: 0;
} }
@ -221,7 +253,7 @@
} }
.cp-sidebarlayout-input-block { .cp-sidebarlayout-input-block {
display: inline-flex; display: inline-flex;
width: @sidebar_button-width; width: @sidebar_block-width;
max-width: 100%; max-width: 100%;
input { input {
flex: 1; flex: 1;
@ -243,7 +275,7 @@
margin: 10px 0; margin: 10px 0;
} }
button.btn { button.btn {
margin: 0 0.5rem 0 0; margin: 0 @sidebar_base-margin 0 0;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
@ -260,7 +292,7 @@
padding-bottom: 20px; padding-bottom: 20px;
.cp-sidebarlayout-categories { .cp-sidebarlayout-categories {
.cp-sidebarlayout-category { .cp-sidebarlayout-category {
margin: 0 0 0.5rem 0; margin: 0 0 @sidebar_base-margin 0;
span.cp-sidebar-layout-category-name { span.cp-sidebar-layout-category-name {
display: inline !important; // override "narrow" mode display: inline !important; // override "narrow" mode
} }

View File

@ -18,7 +18,7 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
[type="text"] { [type="text"] {
width: @sidebar_button-width; width: @sidebar_block-width;
margin-bottom: 10px; margin-bottom: 10px;
} }
hr { hr {
@ -26,8 +26,8 @@
} }
textarea { textarea {
box-sizing: border-box; box-sizing: border-box;
width: 2*@sidebar_button-width; width: 2*@sidebar_block-width !important;
max-width: 100%; max-width: 100% !important;
padding: 10px 15px; padding: 10px 15px;
height: 300px; height: 300px;
} }

View File

@ -19,5 +19,18 @@
display: flex; display: flex;
flex-flow: column; flex-flow: column;
font: @colortheme_app-font; 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;
}
} }

View File

@ -776,7 +776,7 @@ define([
'aria-labelledby': 'cp-admin-logo' 'aria-labelledby': 'cp-admin-logo'
}); });
var currentContainer = blocks.block(); var currentContainer = blocks.block([], 'cp-admin-customize-logo');
let redraw = () => { let redraw = () => {
var current = h('img', {src: '/api/logo?'+(+new Date())}); var current = h('img', {src: '/api/logo?'+(+new Date())});
$(currentContainer).empty().append(current); $(currentContainer).empty().append(current);
@ -856,14 +856,10 @@ define([
let current = blocks.block([], 'cp-admin-color-current'); let current = blocks.block([], 'cp-admin-color-current');
let labelCurrent = blocks.labelledInput(Messages.admin_colorCurrent, current); let labelCurrent = blocks.labelledInput(Messages.admin_colorCurrent, current);
let preview = blocks.block([ let preview = blocks.block([
blocks.block([ blocks.link('CryptPad', '/admin/#customize'),
blocks.link('CryptPad', '/admin/#customize') blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
]), blocks.button('secondary', 'fa-floppy-o', Messages.settings_save),
blocks.nav([ ], 'cp-admin-color-preview cp-sidebar-flex-block');
blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
blocks.button('secondary', 'fa-floppy-o', Messages.settings_save),
])
], 'cp-admin-color-preview');
let labelPreview = blocks.labelledInput(Messages.admin_colorPreview, preview); let labelPreview = blocks.labelledInput(Messages.admin_colorPreview, preview);
let $preview = $(preview); let $preview = $(preview);

View File

@ -56,11 +56,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
max-width: 100%; max-width: 100%;
width: 2*@sidebar_button-width; width: 2*@sidebar_block-width;
input {
//width: @sidebar_button-width !important;
//max-width: @sidebar_button-width;
}
textarea { textarea {
margin: 0; margin: 0;
height: 5rem; height: 5rem;

View File

@ -59,7 +59,7 @@
display: inline; display: inline;
} }
button.btn { button.btn {
width: @sidebar_button-width; width: @sidebar_block-width;
max-width: 100%; max-width: 100%;
margin: 0 !important; margin: 0 !important;
} }
@ -85,7 +85,7 @@
} }
.cp-settings-info-block { .cp-settings-info-block {
[type="text"] { [type="text"] {
width: @sidebar_button-width; width: @sidebar_block-width;
max-width: 100%; max-width: 100%;
} }
} }
@ -105,7 +105,7 @@
margin-top:0.5rem; margin-top:0.5rem;
} }
[type="password"], [type="text"] { [type="password"], [type="text"] {
//width: @sidebar_button-width; //width: @sidebar_block-width;
flex: unset; flex: unset;
} }
button { button {