Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-09-04 06:57:03 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Cleanup styling and gulp merge @media queries

Browse source
This commit is contained in:
djmaze 2021-07-20 16:45:55 +02:00
parent d3d0180208
commit e13337e247
60 changed files with 699 additions and 731 deletions
Download patch file Download diff file Expand all files Collapse all files

145
dev/Styles/Admin/Layout.less Normal file
View file

@ -0,0 +1,145 @@
.UserBackground body {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#rl-left, #rl-right {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 0;
margin: 0;
border: 0;
z-index: 0;
}
#rl-left {
overflow: auto;
padding-top: 50px + @rlLowMargin + 10px;
width: @rlLeftWidth;
nav {
a {
color: var(--settings-menu-color, #333);
cursor: pointer;
display: block;
font-size: 18px;
line-height: 30px;
padding: 4px 10px;
text-decoration: none;
}
a:focus, a:hover {
background-color: var(--settings-menu-hover-bg-color, #333);
color: var(--settings-menu-hover-color, #eee);
}
a.selected {
background-color: var(--settings-menu-selected-bg-color, #333);
color: var(--settings-menu-selected-color, #eee);
}
}
}
#rl-right {
z-index: 1;
left: @rlLeftWidth;
}
.b-admin-right {
.b-toolbar {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 34px;
padding: 8px @rlLowMargin 8px 0;
color: #fff;
text-shadow: 0 1px 1px #000;
display: flex;
h4 {
flex-grow: 1;
}
}
.b-content {
position: absolute;
top: 50px + @rlLowMargin;
bottom: @rlLowMargin;
left: 0;
right: @rlLowMargin;
overflow-y: auto;
z-index: 2;
background-color: #fff;
border: 1px solid @rlMainDarkColor;
box-shadow: @rlMainShadow;
border-radius: @rlMainBorderRadius;
}
}
.btn.btn-logout {
padding-left: 12px;
padding-right: 12px;
}
#rl-popups > .rl-view-model {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1100;
overflow: auto;
background-color: rgba(0,0,0,0.3);
}
#rl-settings-subscreen {
padding: 20px;
}
/* desktop */
@media screen and (min-width: 1000px) {
.toggleLeft {
display: none;
}
}
/* desktop-large */
@media screen and (min-width: 1401px) {
#rl-left {
width: @rlLeftWidth + 20;
}
#rl-right {
left: @rlLeftWidth + 20;
}
}
/* mobile and tablet */
@media screen and (max-width: 999px) {
#rl-settings-subscreen {
padding: 10px;
}
html:not(.rl-left-panel-disabled) #rl-right {
right: 5-@rlLeftWidth;
}
html.rl-left-panel-disabled {
#rl-left {
width: 0 !important;
}
#rl-right {
left: 5px !important;
}
}
}