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

Cleanup and improve HTML/CSS and it's JavaScript handling

Browse source
This commit is contained in:
djmaze 2021-11-06 12:27:37 +01:00
parent 6273869b32
commit 2e34f98c80
26 changed files with 516 additions and 598 deletions
Download patch file Download diff file Expand all files Collapse all files

223
dev/Styles/User/Layout.less
View file

@ -17,6 +17,15 @@
z-index: 0;
}
#rl-left {
width: @rlLeftWidth;
}
#rl-right {
z-index: 1;
left: @rlLeftWidth;
}
html.rl-mobile {
&:not(.rl-left-panel-disabled) #rl-right {
@ -28,10 +37,6 @@ html.rl-mobile {
}
}
#rl-left {
width: @rlLeftWidth;
}
/*
.resizable::after {
background-color: #aaa;
@ -50,7 +55,7 @@ html.rl-mobile {
}
*/
.resizable > .resizer {
.resizer {
background: #aaa;
background: rgba(255,255,255,0.5);
display: none;
@ -58,11 +63,11 @@ html.rl-mobile {
position: absolute;
z-index: 102;
}
.resizable > .resizer:hover {
.resizer:hover {
opacity: 1;
}
html:not(.rl-left-panel-disabled) #rl-left.resizable {
html:not(.rl-left-panel-disabled) #rl-left {
resize: horizontal;
overflow: hidden;
min-width: 155px;
@ -78,6 +83,99 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable {
width: 5px;
}
.rl-side-preview-pane .RL-MailMessageList {
resize: horizontal;
min-width: 320px;
max-width: 60%;
}
.rl-bottom-preview-pane .RL-MailMessageList {
resize: vertical;
min-height: 200px;
max-height: 60%;
}
.rl-bottom-preview-pane .RL-MailMessageList > .resizer {
cursor: ns-resize;
height: 5px;
left: 0;
bottom: 0;
width: 100%;
}
html:not(.rl-left-panel-disabled) #rl-left > .resizer,
.RL-MailMessageList > .resizer {
display: block;
}
.RL-MailMessageList {
position: absolute;
top: 0;
bottom: @rlBottomMargin;
left: 0;
width: 50%;
}
.RL-MailMessageView {
position: absolute;
top: 50px + @rlLowMargin;
bottom: 13px;
right: 0;
left: 0;
.b-message-view-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .4);
z-index: 10;
text-align: center;
.backdrop-message {
position: relative;
display: inline-block;
color: white;
font-size: 20px;
line-height: 30px;
background: rgba(0, 0, 0, .6);
padding: 15px;
border-radius: 5px;
text-shadow: 0 1px 1px #000;
transform: translateY(-50%);
top: 50%;
}
}
}
html.rl-side-preview-pane {
.RL-MailMessageView {
left: 50%;
}
}
/*
#rl-popups > dialog {
top: 0;
margin: 10px auto;
padding: 0;
border: 0;
}
*/
#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;
}
.dropdown-menu {
max-height: 60vh;
max-width: 90vw;
@ -107,98 +205,6 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable {
}
}
.rl-side-preview-pane .RL-MailMessageList.resizable {
resize: horizontal;
min-width: 320px;
max-width: 60%;
}
.rl-bottom-preview-pane .RL-MailMessageList.resizable {
resize: vertical;
min-height: 200px;
max-height: 60%;
}
.rl-bottom-preview-pane .RL-MailMessageList > .resizer {
cursor: ns-resize;
height: 5px;
left: 0;
bottom: 0;
width: 100%;
}
html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
.RL-MailMessageList > .resizer {
display: block;
}
#rl-right {
z-index: 1;
left: @rlLeftWidth;
}
.RL-MailMessageList {
position: absolute;
top: 50px;
bottom: @rlBottomMargin;
left: 0;
width: 50%;
}
.RL-MailMessageView {
position: absolute;
top: 50px + @rlLowMargin;
bottom: 13px;
right: 0;
left: 50%;
.b-message-view-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .4);
z-index: 10;
text-align: center;
.backdrop-message {
position: relative;
display: inline-block;
color: white;
font-size: 20px;
line-height: 30px;
background: rgba(0, 0, 0, .6);
padding: 15px;
border-radius: 5px;
text-shadow: 0 1px 1px #000;
transform: translateY(-50%);
top: 50%;
}
}
}
/*
#rl-popups > dialog {
top: 0;
margin: 10px auto;
padding: 0;
border: 0;
}
*/
#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;
}
.dropdown-menu * + .dividerbar {
margin-top: 9px;
padding-top: 9px;
@ -254,8 +260,10 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
width: 40%;
}
.RL-MailMessageView {
left: 40%;
html.rl-side-preview-pane {
.RL-MailMessageView {
left: 40%;
}
}
}
@ -307,7 +315,6 @@ html.rl-left-panel-disabled {
}
}
html.rl-mobile,
html.rl-no-preview-pane {
.RL-MailMessageList {
@ -315,28 +322,24 @@ html.rl-no-preview-pane {
width: inherit;
}
.RL-MailMessageView {
left: 0 !important;
}
}
html.rl-mobile #rl-left > .resizer,
html.rl-no-preview-pane #rl-right .resizer,
html.rl-mobile #rl-right .resizer {
html.rl-no-preview-pane #rl-right .resizer {
display: none !important;
}
html.rl-bottom-preview-pane:not(.rl-mobile) {
html.rl-bottom-preview-pane {
.RL-MailMessageList {
right: @rlBottomMargin !important;
bottom: inherit;
width: inherit;
height: 300px;
right: 0;
}
.RL-MailMessageView {
left: 0 !important;
left: 0;
top: 356px;
}
}