Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-08-29 20:19:22 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Replace my old ResizeObserver workaround for RainLoop bugs with proper CSS flex.

Browse source 
And removed wysiwyg resize() in favor of flexbox.
This commit is contained in:
djmaze 2021-11-05 14:47:19 +01:00
parent d305e090c5
commit 789dc264f7
11 changed files with 386 additions and 441 deletions
Download patch file Download diff file Expand all files Collapse all files

126
dev/Styles/User/MessageView.less
View file

@ -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%);
}