You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
cryptpad/customize.dist/src/less2/include/sidebar-layout.less

113 lines
3.5 KiB
Plaintext

@import (reference) "/customize/src/less2/include/colortheme-all.less";
@import (reference) "/customize/src/less2/include/leftside-menu.less";
@sidebar_button-width: 400px;
.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;
}
}
& {
@leftside-bg: @colortheme_sidebar-left-bg;
@leftside-color: @colortheme_sidebar-left-fg;
@rightside-color: @colortheme_sidebar-right-fg;
@description-color: @colortheme_sidebar-description;
#cp-sidebarlayout-container {
font-size: 16px;
display: flex;
flex: 1;
min-height: 0;
#cp-sidebarlayout-leftside {
color: @leftside-color;
width: 250px;
background: @leftside-bg;
display: flex;
flex-flow: column;
.cp-sidebarlayout-categories {
flex: 1;
.cp-sidebarlayout-category {
.leftside-menu-category_main();
}
}
}
#cp-sidebarlayout-rightside {
flex: 1;
padding: 5px 20px;
color: @rightside-color;
overflow: auto;
// Following rules are only in settings
.cp-sidebarlayout-element {
label:not(.noTitle), .label {
display: block;
font-weight: bold;
margin-bottom: 0;
}
.cp-sidebarlayout-description {
display: block;
color: @description-color;
margin-bottom: 5px;
p {
margin-bottom: 0;
}
}
label.noTitle {
display: inline-flex;
.fa {
margin-left: 10px;
}
}
margin-bottom: 20px;
}
[type="text"], [type="password"], button {
vertical-align: middle;
height: 40px;
box-sizing: border-box;
}
.cp-sidebarlayout-input-block {
display: inline-flex;
width: @sidebar_button-width;
input {
flex: 1;
border-radius: 0.25em 0 0 0.25em;
border: 1px solid #adadad;
border-right: 0px;
}
button {
border-radius: 0 0.25em 0.25em 0;
//border: 1px solid #adadad;
border-left: 0px;
}
}
&>div {
margin: 10px 0;
}
button.btn {
@button-bg: @colortheme_sidebar-button-bg;
@button-red-bg: @colortheme_sidebar-button-red-bg;
background-color: @button-bg;
border-color: darken(@button-bg, 10%);
color: white;
&:hover {
background-color: darken(@button-bg, 10%);
}
&.btn-danger {
background-color: @button-red-bg;
border-color: darken(@button-red-bg, 10%);
color: white;
&:hover {
background-color: darken(@button-red-bg, 10%);
}
}
}
}
}
}