mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-08-30 20:49:20 +03:00
Cleanup and improve HTML/CSS and it's JavaScript handling
This commit is contained in:
djmaze
parent
6273869b32
commit
2e34f98c80
26 changed files with 516 additions and 598 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,40 +1,34 @@
|
|||
|
||||
html.rl-mobile,
|
||||
html.rl-no-preview-pane {
|
||||
.messageList.message-selected {
|
||||
.message-selected .RL-MailMessageList {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.RL-MailMessageList.focused .messageList {
|
||||
border-color: #9d9d9d;
|
||||
}
|
||||
|
||||
#sort-list-dropdown-id {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.RL-MailMessageList .btn-toolbar {
|
||||
height: 30px;
|
||||
padding: 10px 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.messageList {
|
||||
height: 100%;
|
||||
height: calc(100% - 50px);
|
||||
background-color: #fff;
|
||||
border: 1px solid @rlMainDarkColor;
|
||||
border-radius: @rlMainBorderRadius;
|
||||
box-shadow: @rlMainShadow;
|
||||
z-index: 101;
|
||||
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 30px;
|
||||
padding: 10px 1px;
|
||||
z-index: 102;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.b-message-list-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.b-footer {
|
||||
flex-shrink: 0;
|
||||
|
|
@ -163,10 +157,6 @@ html.rl-no-preview-pane {
|
|||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.focused {
|
||||
border-color: #9d9d9d;
|
||||
}
|
||||
}
|
||||
|
||||
.hideMessageListCheckbox {
|
||||
|
|
@ -414,7 +404,7 @@ html.rl-ctrl-key-pressed .messageListItem {
|
|||
}
|
||||
}
|
||||
|
||||
.b-message-list-wrapper:not(.hideMessageListCheckbox) .subjectParent {
|
||||
.messageList:not(.hideMessageListCheckbox) .subjectParent {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,13 @@
|
|||
.g-ui-min-height-300 {
|
||||
min-height: 300px;
|
||||
|
||||
html.rl-no-preview-pane {
|
||||
#rl-right:not(.message-selected) .RL-MailMessageView {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.RL-MailMessageView.focused .messageView {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
border-color: darken(@rlMainDarkColor, 5%);
|
||||
}
|
||||
|
||||
.messageView {
|
||||
|
|
@ -204,7 +212,7 @@
|
|||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: grey;
|
||||
padding-top: 50px;
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
.showImages, .readReceipt, .pgpSigned, .pgpEncrypted {
|
||||
|
|
@ -446,11 +454,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.focused {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
border-color: darken(@rlMainDarkColor, 5%);
|
||||
}
|
||||
|
||||
.thread-controls {
|
||||
.dropdown-toggle {
|
||||
padding-left: 10px;
|
||||
|
|
@ -463,13 +466,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
html.rl-mobile .messageView,
|
||||
html.rl-no-preview-pane .messageView {
|
||||
|
||||
&:not(.message-selected) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
|
@ -490,7 +488,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) .messageView {
|
|||
}
|
||||
}
|
||||
|
||||
html.rl-bottom-preview-pane:not(.rl-mobile) .messageView {
|
||||
html.rl-bottom-preview-pane .messageView {
|
||||
.b-content {
|
||||
bottom: @rlBottomMargin;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,16 +10,14 @@
|
|||
top: 40px;
|
||||
}
|
||||
|
||||
.b-system-drop-down {
|
||||
.RL-SystemDropDown {
|
||||
|
||||
.b-toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 30px;
|
||||
padding: 10px @rlLowMargin;
|
||||
z-index: 103;
|
||||
}
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 30px;
|
||||
padding: 10px @rlLowMargin;
|
||||
z-index: 103;
|
||||
|
||||
.email-title {
|
||||
display: inline-block;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue