mirror of
https://github.com/cryptpad/cryptpad.git
synced 2026-09-14 11:05:41 +05:00
349 lines
12 KiB
Plaintext
349 lines
12 KiB
Plaintext
/*
|
|
* SPDX-FileCopyrightText: 2023 XWiki CryptPad Team <contact@cryptpad.org> and contributors
|
|
*
|
|
* SPDX-License-Identifier: AGPL-3.0-or-later
|
|
*/
|
|
|
|
@import (reference) "/customize/src/less2/include/colortheme-all.less";
|
|
@import (reference) "/customize/src/less2/include/leftside-menu.less";
|
|
@import (reference) "/customize/src/less2/include/browser.less";
|
|
@import (reference) "/customize/src/less2/include/variables.less";
|
|
|
|
@sidebar_block-width: 25rem;;
|
|
@sidebar_base-margin: 0.5rem;
|
|
|
|
.sidebar-layout_main() {
|
|
--LessLoader_require: LessLoader_currentFile();
|
|
|
|
// This is way too broad to put in the global scope
|
|
input[type="text"], input[type="password"] {
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
& {
|
|
#cp-sidebarlayout-container {
|
|
font-size: 16px;
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 0;
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
@media(min-width:800px) {
|
|
#cp-sidebarlayout-leftside {
|
|
overflow-y: scroll;
|
|
}
|
|
}
|
|
#cp-sidebarlayout-leftside {
|
|
color: @cp_sidebar-left-fg;
|
|
width: 250px;
|
|
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;
|
|
white-space: nowrap;
|
|
svg {
|
|
flex: 0 0 auto;
|
|
}
|
|
.cp-sidebarlayout-category-name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.leftside-menu-category_main();
|
|
box-shadow: @cryptpad_ui_shadow;
|
|
&:focus-visible {
|
|
outline: @variables_focus_style;
|
|
}
|
|
}
|
|
}
|
|
&.cp-leftside-narrow {
|
|
transition: width 0.2s;
|
|
width: 55px;
|
|
.cp-sidebarlayout-category {
|
|
display: flex;
|
|
max-width: 100%;
|
|
align-items: center;
|
|
svg {
|
|
min-width: @variables_icon_width;
|
|
min-height: @variables_icon_height;
|
|
}
|
|
span.cp-sidebarlayout-category-name {
|
|
padding-left: 5px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
min-width: 0;
|
|
display: none;
|
|
@media screen and (max-width: @browser_media-medium-screen) {
|
|
display: inline;
|
|
}
|
|
}
|
|
}
|
|
&:hover {
|
|
transition: width 0.5s;
|
|
width: 250px;
|
|
.cp-sidebarlayout-category {
|
|
span.cp-sidebarlayout-category-name {
|
|
display: inline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#cp-sidebarlayout-rightside {
|
|
flex: 1;
|
|
padding: 5px 20px;
|
|
background: @cp_sidebar-right-bg;
|
|
color: @cp_sidebar-right-fg;
|
|
overflow: auto;
|
|
|
|
// Following rules are only in settings
|
|
.cp-sidebarlayout-element {
|
|
pre {
|
|
color: @cryptpad_text_col;
|
|
}
|
|
|
|
&.cp-sidebar-force-hide {
|
|
display: none !important;
|
|
}
|
|
|
|
&:not([data-item]) { // Old sidebar-layout blocks
|
|
label:not(.noTitle), .cp-default-label {
|
|
display: block;
|
|
font-weight: bold;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
&[data-item] { // New sidebar-layout blocks
|
|
label.cp-item-label, .cp-default-label {
|
|
display: block;
|
|
font-weight: bold;
|
|
margin-bottom: 0;
|
|
}
|
|
.cp-sidebar-form {
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: baseline;
|
|
input, textarea {
|
|
&:focus-visible {
|
|
outline: @variables_focus_style;
|
|
}
|
|
}
|
|
}
|
|
.cp-usergrid-container {
|
|
margin-bottom: 0px !important;
|
|
.cp-usergrid-grid {
|
|
margin-bottom: -3px;
|
|
}
|
|
}
|
|
label {
|
|
margin-bottom: 0;
|
|
}
|
|
input, textarea {
|
|
font-family: inherit;
|
|
max-width: @sidebar_block-width;
|
|
}
|
|
input:invalid {
|
|
border: 1px solid red;
|
|
}
|
|
[type="color"] {
|
|
width: @sidebar_block-width/5;
|
|
padding: 3px;
|
|
}
|
|
.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;
|
|
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;
|
|
}
|
|
.cp-checkmark {
|
|
padding: @sidebar_base-margin;
|
|
padding-left: 0;
|
|
}
|
|
code {
|
|
color: @cryptpad_text_col;
|
|
}
|
|
.cp-sidebar-table {
|
|
margin-top: @sidebar_base-margin;
|
|
pre {
|
|
margin: 0;
|
|
}
|
|
th {
|
|
border: 1px solid @cp_drive-icon-border;
|
|
padding: 7px;
|
|
}
|
|
td {
|
|
border: 1px solid @cp_drive-icon-border;
|
|
padding: 0.3rem;
|
|
margin-right: 2px;
|
|
*:not(:last-child) {
|
|
margin-right: @sidebar_base-margin;
|
|
}
|
|
}
|
|
tbody {
|
|
tr:nth-child(odd) {
|
|
background-color: @cp_sidebar-left-item-bg;
|
|
}
|
|
}
|
|
}
|
|
.cp-sidebar-input-block {
|
|
display: inline-flex;
|
|
width: @sidebar_block-width;
|
|
max-width: 100%;
|
|
input {
|
|
flex: 1;
|
|
//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;
|
|
&:focus-visible {
|
|
outline: @variables_focus_style;
|
|
}
|
|
}
|
|
input:invalid {
|
|
border-color: red;
|
|
}
|
|
button {
|
|
border-top-left-radius: 0px;
|
|
border-bottom-left-radius: 0px;
|
|
border-left: 0px;
|
|
height: @variables_input-height;
|
|
margin: 0 !important;
|
|
}
|
|
}
|
|
a {
|
|
color: @cryptpad_color_link;
|
|
text-decoration: underline;
|
|
}
|
|
table {
|
|
.cp-strong {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.cp-sidebarlayout-description {
|
|
display: block;
|
|
color: @cp_sidebar-hint;
|
|
margin-bottom: @sidebar_base-margin;
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
.cp-sidebarlayout-description-item {
|
|
display: block;
|
|
color: @cp_sidebar-hint;
|
|
margin-top: @sidebar_base-margin;
|
|
margin-bottom: 0;
|
|
}
|
|
label.noTitle {
|
|
display: inline-flex;
|
|
}
|
|
margin-bottom: 20px;
|
|
}
|
|
.secret-code {
|
|
margin-top: 1rem;
|
|
}
|
|
[type="text"], [type="password"], button {
|
|
vertical-align: middle;
|
|
min-width: 40px;
|
|
height: 40px;
|
|
box-sizing: border-box;
|
|
}
|
|
[type="file"] { // XXX hack, to fix with sidebar layout refactoring
|
|
height: auto;
|
|
box-sizing: border-box;
|
|
padding: 6.5px;
|
|
}
|
|
.cp-sidebarlayout-input-block {
|
|
display: inline-flex;
|
|
width: @sidebar_block-width;
|
|
max-width: 100%;
|
|
input {
|
|
flex: 1;
|
|
//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-top-left-radius: 0px;
|
|
border-bottom-left-radius: 0px;
|
|
border-left: 0px;
|
|
height: 40px;
|
|
margin: 0 !important;
|
|
}
|
|
}
|
|
&>div {
|
|
margin: 10px 0;
|
|
}
|
|
button.btn {
|
|
//margin: 0 @sidebar_base-margin 0 0;
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
span.cp-password-container {
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
@media screen and (max-width: @browser_media-medium-screen) {
|
|
flex-flow: column;
|
|
overflow: auto;
|
|
#cp-sidebarlayout-leftside {
|
|
width: 100% !important; // Override "narrow" mode
|
|
padding-bottom: 20px;
|
|
.cp-sidebarlayout-categories {
|
|
.cp-sidebarlayout-category {
|
|
margin: 0 0 @sidebar_base-margin 0;
|
|
span.cp-sidebar-layout-category-name {
|
|
display: inline !important; // override "narrow" mode
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#cp-sidebarlayout-rightside {
|
|
overflow: unset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|