mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-08-30 20:49:20 +03:00
Replace my old ResizeObserver workaround for RainLoop bugs with proper CSS flex.
And removed wysiwyg resize() in favor of flexbox.
This commit is contained in:
djmaze
parent
d305e090c5
commit
789dc264f7
11 changed files with 386 additions and 441 deletions
|
|
@ -2,21 +2,32 @@
|
|||
.b-compose {
|
||||
|
||||
&.modal {
|
||||
width: 98%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 52px);
|
||||
max-width: 1000px;
|
||||
min-height: calc(100% - 52px);
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.textAreaParent, .attachmentAreaParent {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
min-height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.textAreaParent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.attachmentAreaParent {
|
||||
border-top: 1px solid #ccc;
|
||||
overflow-y: auto;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,11 @@ html.rl-no-preview-pane {
|
|||
|
||||
.messageList {
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
border: 1px solid @rlMainDarkColor;
|
||||
border-radius: @rlMainBorderRadius;
|
||||
box-shadow: @rlMainShadow;
|
||||
z-index: 101;
|
||||
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
|
|
@ -25,14 +30,15 @@ html.rl-no-preview-pane {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.b-message-list-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.b-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 30px;
|
||||
flex-shrink: 0;
|
||||
padding: 7px;
|
||||
z-index: 101;
|
||||
|
||||
background-color: var(--message-list-toolbar-bg-color, #eee);
|
||||
// #gradient > .vertical(#f4f4f4, #dfdfdf);
|
||||
|
|
@ -59,23 +65,9 @@ html.rl-no-preview-pane {
|
|||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.b-message-list-wrapper {
|
||||
border: 1px solid @rlMainDarkColor;
|
||||
height: 100%;
|
||||
|
||||
box-shadow: @rlMainShadow;
|
||||
border-radius: @rlMainBorderRadius;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.second-toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 29px;
|
||||
flex-shrink: 0;
|
||||
padding: 10px 8px 10px 11px;
|
||||
z-index: 101;
|
||||
white-space: nowrap;
|
||||
|
||||
background-color: var(--message-list-toolbar-bg-color, #eee);
|
||||
|
|
@ -108,18 +100,11 @@ html.rl-no-preview-pane {
|
|||
}
|
||||
|
||||
.b-content {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
bottom: 45px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
z-index: 101;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
.listClear {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
|
|
@ -179,8 +164,7 @@ html.rl-no-preview-pane {
|
|||
}
|
||||
}
|
||||
|
||||
&.focused .b-message-list-wrapper {
|
||||
background-color: #000;
|
||||
&.focused {
|
||||
border-color: #9d9d9d;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
}
|
||||
|
||||
.messageView {
|
||||
background-color: #fff;
|
||||
border: 1px solid @rlMainDarkColor;
|
||||
border-radius: @rlMainBorderRadius;
|
||||
height: 100%;
|
||||
|
||||
.toolbar {
|
||||
|
|
@ -16,75 +19,79 @@
|
|||
}
|
||||
|
||||
.b-content {
|
||||
background-color: #fff;
|
||||
border: 1px solid @rlMainDarkColor;
|
||||
border-radius: @rlMainBorderRadius;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.b-message-view-checked-helper {
|
||||
text-align: center;
|
||||
font-size: 70px;
|
||||
line-height: 70px;
|
||||
padding-top: 100px;
|
||||
color: #999;
|
||||
.b-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.icon-mail {
|
||||
font-size: 100px;
|
||||
font-size: 50px;
|
||||
line-height: 90px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.b-message-view-checked-helper {
|
||||
text-align: center;
|
||||
font-size: 70px;
|
||||
line-height: 70px;
|
||||
padding-top: 100px;
|
||||
color: #999;
|
||||
|
||||
.icon-mail {
|
||||
font-size: 100px;
|
||||
font-size: 50px;
|
||||
line-height: 90px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.b-message-view-desc {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
color: #999;
|
||||
padding: 120px 10px 0 10px;
|
||||
}
|
||||
|
||||
.b-message-view-desc.error {
|
||||
color: #DA4F49;
|
||||
}
|
||||
|
||||
.message-fixed-button-toolbar {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
top: 33px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.infoParent {
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.flagParent {
|
||||
|
||||
cursor: pointer;
|
||||
margin: 0 0.25em;
|
||||
|
||||
.flagOn {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.b-message-view-desc {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
color: #999;
|
||||
padding: 120px 10px 0 10px;
|
||||
}
|
||||
|
||||
.b-message-view-desc.error {
|
||||
color: #DA4F49;
|
||||
}
|
||||
|
||||
.message-fixed-button-toolbar {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
top: 33px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.infoParent {
|
||||
cursor: pointer;
|
||||
&.flagOff:not(:hover) {
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.flagParent {
|
||||
|
||||
cursor: pointer;
|
||||
margin: 0 0.25em;
|
||||
|
||||
.flagOn {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
&.flagOff:not(:hover) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messageItemHeader {
|
||||
|
||||
padding: 10px;
|
||||
background-color: #f8f8f8;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-radius: @rlMainBorderRadius @rlMainBorderRadius 0 0;
|
||||
padding: 10px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.subjectParent {
|
||||
font-size: 18px;
|
||||
|
|
@ -162,11 +169,7 @@
|
|||
.messageItem {
|
||||
|
||||
color: #000;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
|
|
@ -443,8 +446,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.focused .b-content {
|
||||
z-index: 101;
|
||||
&.focused {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
border-color: darken(@rlMainDarkColor, 5%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
|
||||
.squire-toolbar {
|
||||
padding: 2px;
|
||||
border-bottom: 1px solid #b6b6b6;
|
||||
min-height: 28px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -38,6 +39,7 @@
|
|||
.squire-wysiwyg, .squire-plain {
|
||||
box-sizing: border-box;
|
||||
font-size: 13px;
|
||||
height: 100%;
|
||||
line-height: 16px;
|
||||
min-height: 200px;
|
||||
overflow: auto;
|
||||
|
|
@ -155,16 +157,22 @@ Secondly, we can't rely on MUA's what to do with :empty
|
|||
}
|
||||
|
||||
/* @media (hover: none) */
|
||||
.rl-mobile .textAreaParent:not(:focus-within) .squire-toolbar {
|
||||
display: none;
|
||||
}
|
||||
.rl-mobile .squire-toolbar {
|
||||
background: #EEE;
|
||||
padding: 1px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@media screen and (max-height: 600px) {
|
||||
.rl-mobile .textAreaParent:not(:focus-within) .squire-toolbar {
|
||||
display: none;
|
||||
}
|
||||
.rl-mobile .squire-toolbar {
|
||||
background: #EEE;
|
||||
padding: 1px;
|
||||
position: fixed;
|
||||
top: 18px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/*
|
||||
transform: translateY(-42px);
|
||||
z-index: 9;
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
.rl-mobile .b-compose.modal,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue