mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-08-29 20:19:22 +03:00
Cleanup styling and gulp merge @media queries
This commit is contained in:
djmaze
parent
d3d0180208
commit
e13337e247
60 changed files with 699 additions and 731 deletions
|
|
@ -2,7 +2,7 @@ import ko from 'ko';
|
|||
|
||||
import { Scope, Notification } from 'Common/Enums';
|
||||
import { MessageSetAction } from 'Common/EnumsUser';
|
||||
import { doc, createElement, elementById } from 'Common/Globals';
|
||||
import { doc, $htmlCL, createElement, elementById } from 'Common/Globals';
|
||||
import { isNonEmptyArray, pInt, pString, addObservablesTo, addSubscribablesTo } from 'Common/Utils';
|
||||
import { plainToHtml } from 'Common/UtilsUser';
|
||||
|
||||
|
|
@ -186,6 +186,8 @@ export const MessageUserStore = new class {
|
|||
}
|
||||
},
|
||||
|
||||
listLoadingAnimation: value => $htmlCL.toggle('list-loading', value),
|
||||
|
||||
listLoading: value =>
|
||||
this.listCompleteLoading(value || this.listIsNotCompleted()),
|
||||
|
||||
|
|
|
|||
|
|
@ -23,20 +23,19 @@
|
|||
|
||||
@import "Ui.less";
|
||||
@import "Main.less";
|
||||
@import "LayoutAdmin.less";
|
||||
@import "Components.less";
|
||||
@import "Login.less";
|
||||
@import "Ask.less";
|
||||
@import "Languages.less";
|
||||
|
||||
@import "Admin.less";
|
||||
@import "AdminGeneral.less";
|
||||
@import "AdminBranding.less";
|
||||
@import "AdminDomains.less";
|
||||
@import "AdminDomain.less";
|
||||
@import "AdminPackages.less";
|
||||
@import "AdminPlugin.less";
|
||||
@import "AdminAbout.less";
|
||||
@import "Admin/Layout.less";
|
||||
@import "Admin/General.less";
|
||||
@import "Admin/Branding.less";
|
||||
@import "Admin/Domains.less";
|
||||
@import "Admin/Domain.less";
|
||||
@import "Admin/Packages.less";
|
||||
@import "Admin/Plugin.less";
|
||||
@import "Admin/About.less";
|
||||
|
||||
@import "Animations.less";
|
||||
|
||||
|
|
|
|||
|
|
@ -24,45 +24,39 @@
|
|||
|
||||
@import "Ui.less";
|
||||
@import "Main.less";
|
||||
@import "Layout.less";
|
||||
@import "Components.less";
|
||||
@import "Login.less";
|
||||
@import "Ask.less";
|
||||
@import "Languages.less";
|
||||
|
||||
@import "SystemDropDown.less";
|
||||
@import "Shortcuts.less";
|
||||
@import "FolderList.less";
|
||||
/*
|
||||
@import "FolderClear.less";
|
||||
@import "FolderCreate.less";
|
||||
@import "FolderSystem.less";
|
||||
@import "Account.less";
|
||||
*/
|
||||
@import "Filter.less";
|
||||
@import "Template.less";
|
||||
@import "OpenPgpKey.less";
|
||||
@import "Identity.less";
|
||||
@import "AdvancedSearch.less";
|
||||
@import "Attachmnets.less";
|
||||
@import "MessageList.less";
|
||||
@import "MessageView.less";
|
||||
@import "Contacts.less";
|
||||
@import "Compose.less";
|
||||
@import "EmailAddresses.less";
|
||||
@import "User/Layout.less";
|
||||
@import "User/SystemDropDown.less";
|
||||
@import "User/Shortcuts.less";
|
||||
@import "User/FolderList.less";
|
||||
@import "User/Filter.less";
|
||||
@import "User/Template.less";
|
||||
@import "User/OpenPgpKey.less";
|
||||
@import "User/Identity.less";
|
||||
@import "User/AdvancedSearch.less";
|
||||
@import "User/Attachmnets.less";
|
||||
@import "User/MessageList.less";
|
||||
@import "User/MessageView.less";
|
||||
@import "User/Contacts.less";
|
||||
@import "User/Compose.less";
|
||||
@import "User/EmailAddresses.less";
|
||||
|
||||
@import "Settings.less";
|
||||
@import "SettingsGeneral.less";
|
||||
@import "SettingsAccounts.less";
|
||||
@import "SettingsTemplates.less";
|
||||
@import "SettingsOpenPGP.less";
|
||||
@import "SettingsFolders.less";
|
||||
@import "SettingsThemes.less";
|
||||
@import "SettingsFilters.less";
|
||||
@import "User/Settings.less";
|
||||
@import "User/SettingsGeneral.less";
|
||||
@import "User/SettingsAccounts.less";
|
||||
@import "User/SettingsTemplates.less";
|
||||
@import "User/SettingsOpenPGP.less";
|
||||
@import "User/SettingsFolders.less";
|
||||
@import "User/SettingsThemes.less";
|
||||
@import "User/SettingsFilters.less";
|
||||
|
||||
@import "SquireUI.less";
|
||||
@import "User/SquireUI.less";
|
||||
|
||||
@import "AnimationsUser.less";
|
||||
@import "User/Animations.less";
|
||||
@import "Animations.less";
|
||||
|
||||
@import "_End.less";
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
.b-account-add-content {
|
||||
.modal-header {
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
.b-domain-alias-content {
|
||||
&.modal {
|
||||
width: 330px;
|
||||
max-width: 330px;
|
||||
}
|
||||
|
||||
.error-desc {
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
.b-domain-content {
|
||||
|
||||
&.modal {
|
||||
width: 810px;
|
||||
max-width: 810px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
|
|
@ -1,7 +1,25 @@
|
|||
.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 {
|
||||
|
|
@ -26,6 +44,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
#rl-right {
|
||||
z-index: 1;
|
||||
left: @rlLeftWidth;
|
||||
}
|
||||
|
||||
.b-admin-right {
|
||||
|
||||
.b-toolbar {
|
||||
|
|
@ -67,3 +90,56 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
.b-plugin-content {
|
||||
|
||||
&.modal {
|
||||
width: 660px;
|
||||
max-width: 660px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
|
||||
.b-admin-plugins-list-table {
|
||||
max-width: 620px; /* span8 */
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.b-admin-plugin-property {
|
||||
.help-block {
|
||||
display: block; // account for any element using help-block
|
||||
font-style: italic;
|
||||
opacity: 0.5;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.controls {
|
||||
width: 470px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
.b-folder-clear-content {
|
||||
.modal-header {
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
.b-folder-create-content {
|
||||
.modal-header {
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
.b-folder-system-content {
|
||||
.modal-header {
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +1,15 @@
|
|||
.b-languages-content {
|
||||
|
||||
&.modal {
|
||||
width: 700px;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.lang-item {
|
||||
label {
|
||||
display: inline-block;
|
||||
padding: 5px 15px;
|
||||
margin: 2px 5px;
|
||||
width: 180px;
|
||||
background-color: rgba(128, 128, 128, 0.1);
|
||||
text-align: left;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
|
|
@ -26,7 +25,6 @@
|
|||
}
|
||||
&.selected::after {
|
||||
content: "✔";
|
||||
color: #080;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
font-family: snappymail;
|
||||
|
|
@ -39,7 +37,7 @@
|
|||
}
|
||||
|
||||
@media screen and (max-width: 999px) {
|
||||
.b-languages-content .lang-item {
|
||||
.b-languages-content label {
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,80 +0,0 @@
|
|||
|
||||
.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 {
|
||||
width: @rlLeftWidth;
|
||||
}
|
||||
|
||||
#rl-right {
|
||||
z-index: 1;
|
||||
left: @rlLeftWidth;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -20,6 +20,11 @@ body {
|
|||
right: 0;
|
||||
}
|
||||
|
||||
html.list-loading body {
|
||||
/* cursor: wait;*/
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
html:not(.rl-mobile) {
|
||||
min-width: 700px;
|
||||
}
|
||||
|
|
@ -32,10 +37,6 @@ html:not(.rl-mobile) {
|
|||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
option:disabled {
|
||||
color: #aaa;
|
||||
cursor: not-allowed;
|
||||
|
|
|
|||
|
|
@ -16,32 +16,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.e-paginator {
|
||||
|
||||
.e-page {
|
||||
|
||||
display: inline-block;
|
||||
opacity: 0.5;
|
||||
text-decoration: none;
|
||||
font-size: 22px;
|
||||
padding: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.current {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.current .e-page-number {
|
||||
font-size: 115%;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-save-trigger {
|
||||
|
||||
display: inline-block;
|
||||
|
|
@ -93,25 +67,6 @@ textarea + .settings-save-trigger {
|
|||
}
|
||||
}
|
||||
|
||||
.e-languages {
|
||||
|
||||
margin-top: 8px;
|
||||
color: #333;
|
||||
|
||||
.flag-name {
|
||||
|
||||
color: #333;
|
||||
border-bottom: 1px dashed #333;
|
||||
cursor: pointer;
|
||||
padding: 2px 0;
|
||||
|
||||
&:focus {
|
||||
outline: 1px;
|
||||
outline-style: dotted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.e-action {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.b-advanced-search-content {
|
||||
&.modal {
|
||||
width: 780px;
|
||||
max-width: 780px;
|
||||
}
|
||||
.control-label {
|
||||
width: 110px;
|
||||
|
|
@ -43,15 +43,6 @@
|
|||
transition: opacity 0.3s linear;
|
||||
}
|
||||
|
||||
.messageList {
|
||||
.messageListItem {
|
||||
transition: max-height 400ms ease;
|
||||
}
|
||||
.listDragOver {
|
||||
transition: all 400ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
.b-list-content {
|
||||
.e-contact-item {
|
||||
transition: max-height 400ms ease;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
.b-identity-content {
|
||||
|
||||
&.modal {
|
||||
width: 770px;
|
||||
max-width: 770px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
|
|
@ -371,3 +371,24 @@ html:not(.rl-mobile) .show-mobile {
|
|||
html.rl-mobile .width100-on-mobile {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.e-paginator {
|
||||
|
||||
.e-page {
|
||||
opacity: 0.5;
|
||||
text-decoration: none;
|
||||
font-size: 22px;
|
||||
padding: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.current {
|
||||
opacity: 1;
|
||||
font-size: 25px;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -198,215 +198,6 @@ html.rl-no-preview-pane {
|
|||
}
|
||||
}
|
||||
|
||||
.messageListItem {
|
||||
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
margin: 0;
|
||||
padding: 5px 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba(153, 153, 153, 0.2);
|
||||
border-left: 6px solid #eee;
|
||||
|
||||
z-index: 100;
|
||||
|
||||
&.focused {
|
||||
background-color: rgba(128, 128, 128, 0.1);
|
||||
border-left-color: #ccc;
|
||||
}
|
||||
|
||||
.importantMark {
|
||||
display: none;
|
||||
|
||||
color:red;
|
||||
margin-right:5px
|
||||
}
|
||||
|
||||
&.deleted-mark {
|
||||
opacity: .7;
|
||||
.subjectParent {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
&.important .importantMark {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
&.new {
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
&.deleted {
|
||||
max-height: 0;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.checkboxMessage {
|
||||
line-height: 12px;
|
||||
padding: 0 8px 0 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.flagParent {
|
||||
padding: 0 10px 0 5px;
|
||||
}
|
||||
|
||||
time, .sizeParent {
|
||||
margin: 0 5px;
|
||||
opacity: 0.6;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.threadsParent {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.attachmentParent {
|
||||
position: relative;
|
||||
margin: 2px 10px 0 5px;
|
||||
color: #666;
|
||||
text-shadow: 0 1px 0 #eee;
|
||||
}
|
||||
|
||||
.senderParent, .subjectParent {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.threadsCountParent {
|
||||
display: inline;
|
||||
overflow: hidden;
|
||||
background-color: #eee;
|
||||
padding: 1px 5px;
|
||||
margin-right: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.threadsCountParent.lastSelected {
|
||||
background-color: #999;
|
||||
border-color: #999;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.threadsCountParent:hover {
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
.subjectParent .emptySubjectText {
|
||||
display: none;
|
||||
font-style: italic;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.emptySubject .subjectParent {
|
||||
.subject {
|
||||
display: none;
|
||||
}
|
||||
.emptySubjectText {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.sender, .subject {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.threads-len {
|
||||
.threads-len-data {
|
||||
|
||||
border-radius: 6px;
|
||||
padding: 2px 0 1px 4px;
|
||||
border: 1px solid #ccc;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(127,127,127,0.3);
|
||||
border-color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flagOff {
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.flagOn, .flagOnHalf {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.replyFlag, .forwardFlag {
|
||||
display: none;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
&.answered .replyFlag {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.forwarded .forwardFlag {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:not(.withAttachments) .attachmentParent {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.hasUnseenSubMessage {
|
||||
background-color: rgba(255, 255, 64, 0.15);
|
||||
border-left-color: lighten(orange, 30%);
|
||||
&.focused {
|
||||
border-left-color: darken(orange, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&.unseen {
|
||||
background-color: rgba(255, 255, 64, 0.15);
|
||||
border-left-color: orange;
|
||||
.sender, .subjectParent {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
border-left-color: darken(orange, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&.checked {
|
||||
border-left-color: lighten(#398CF2, 10%);
|
||||
|
||||
&.focused {
|
||||
border-left-color: darken(#398CF2, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: rgba(140, 200, 255, 0.3);
|
||||
border-bottom-color: rgba(57, 140, 242, 0.2);
|
||||
border-left-color: #398CF2;
|
||||
z-index: 101;
|
||||
|
||||
+ .messageListItem {
|
||||
border-bottom-color: rgba(57, 140, 242, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.flagged) .flagOn,
|
||||
&:not(.hasFlaggedSubMessage) .flagOnHalf,
|
||||
&.flagged .flagOff, &.hasFlaggedSubMessage .flagOff {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.message-focused {
|
||||
.b-message-list-wrapper {
|
||||
background-color: #000;
|
||||
|
|
@ -415,17 +206,250 @@ html.rl-no-preview-pane {
|
|||
opacity: 0.97;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hideMessageListCheckbox {
|
||||
.checkboxMessage, .checkboxCheckAll {
|
||||
visibility: hidden;
|
||||
.hideMessageListCheckbox {
|
||||
.checkboxCheckAll {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.checkboxMessage {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.messageListItem {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
margin: 0;
|
||||
padding: 5px 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba(153, 153, 153, 0.2);
|
||||
border-left: 6px solid #eee;
|
||||
|
||||
z-index: 100;
|
||||
|
||||
> * {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
background-color: rgba(128, 128, 128, 0.1);
|
||||
border-left-color: #ccc;
|
||||
}
|
||||
|
||||
.importantMark {
|
||||
display: none;
|
||||
|
||||
color:red;
|
||||
margin-right:5px
|
||||
}
|
||||
|
||||
&.deleted-mark {
|
||||
opacity: .7;
|
||||
.subjectParent {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
&.important .importantMark {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
&.new {
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
&.deleted {
|
||||
max-height: 0;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.checkboxMessage {
|
||||
line-height: 12px;
|
||||
padding: 0 8px 0 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.flagParent {
|
||||
padding: 0 10px 0 5px;
|
||||
}
|
||||
|
||||
time, .sizeParent {
|
||||
margin: 0 5px;
|
||||
opacity: 0.6;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.threadsParent {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.attachmentParent {
|
||||
position: relative;
|
||||
margin: 2px 10px 0 5px;
|
||||
color: #666;
|
||||
text-shadow: 0 1px 0 #eee;
|
||||
}
|
||||
|
||||
.senderParent, .subjectParent {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.threadsCountParent {
|
||||
display: inline;
|
||||
overflow: hidden;
|
||||
background-color: #eee;
|
||||
padding: 1px 5px;
|
||||
margin-right: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.threadsCountParent.lastSelected {
|
||||
background-color: #999;
|
||||
border-color: #999;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.threadsCountParent:hover {
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
.subjectParent .emptySubjectText {
|
||||
display: none;
|
||||
font-style: italic;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.emptySubject .subjectParent {
|
||||
.subject {
|
||||
display: none;
|
||||
}
|
||||
.emptySubjectText {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.sender, .subject {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.threads-len {
|
||||
.threads-len-data {
|
||||
|
||||
border-radius: 6px;
|
||||
padding: 2px 0 1px 4px;
|
||||
border: 1px solid #ccc;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(127,127,127,0.3);
|
||||
border-color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flagOff {
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.flagOn, .flagOnHalf {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.replyFlag, .forwardFlag {
|
||||
display: none;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
&.answered .replyFlag {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.forwarded .forwardFlag {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:not(.withAttachments) .attachmentParent {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.hasUnseenSubMessage {
|
||||
background-color: rgba(255, 255, 64, 0.15);
|
||||
border-left-color: lighten(orange, 30%);
|
||||
&.focused {
|
||||
border-left-color: darken(orange, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&.unseen {
|
||||
background-color: rgba(255, 255, 64, 0.15);
|
||||
border-left-color: orange;
|
||||
.sender, .subjectParent {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
border-left-color: darken(orange, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&.checked {
|
||||
border-left-color: lighten(#398CF2, 10%);
|
||||
|
||||
&.focused {
|
||||
border-left-color: darken(#398CF2, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: rgba(140, 200, 255, 0.3);
|
||||
border-bottom-color: rgba(57, 140, 242, 0.2);
|
||||
border-left-color: #398CF2;
|
||||
z-index: 101;
|
||||
|
||||
+ .messageListItem {
|
||||
border-bottom-color: rgba(57, 140, 242, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.flagged) .flagOn,
|
||||
&:not(.hasFlaggedSubMessage) .flagOnHalf,
|
||||
&.flagged .flagOff, &.hasFlaggedSubMessage .flagOff {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
html.rl-ctrl-key-pressed .messageListItem {
|
||||
cursor: copy;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
.messageList {
|
||||
.listDragOver {
|
||||
transition: all 400ms ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* desktop-large */
|
||||
@media screen and (min-width: 1401px) {
|
||||
.messageList .messageListItem {
|
||||
.messageListItem {
|
||||
font-size: 13px;
|
||||
time {
|
||||
font-size: 13px;
|
||||
|
|
@ -448,18 +472,6 @@ html .messageList .line-loading {
|
|||
top: 0;
|
||||
}
|
||||
|
||||
.messageListItem {
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> * {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
order: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-side-preview-pane, .rl-mobile {
|
||||
|
||||
.messageListItem {
|
||||
|
|
@ -471,7 +483,6 @@ html .messageList .line-loading {
|
|||
.subjectParent {
|
||||
flex: 1 0 auto;
|
||||
line-height: 16px;
|
||||
margin-left: 30px;
|
||||
order: 1;
|
||||
width: calc(100% - 120px);
|
||||
}
|
||||
|
|
@ -492,9 +503,13 @@ html .messageList .line-loading {
|
|||
order: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.b-message-list-wrapper:not(.hideMessageListCheckbox) .subjectParent {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
html:not(.rl-mobile):not(.rl-side-preview-pane) .messageList {
|
||||
html:not(.rl-mobile):not(.rl-side-preview-pane) {
|
||||
|
||||
.messageListItem {
|
||||
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
.b-open-pgp-key-view-content, .b-open-pgp-key-generate-content {
|
||||
&.modal {
|
||||
width: 570px;
|
||||
max-width: 570px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
.b-compose-open-pgp-content {
|
||||
&.modal {
|
||||
width: 800px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.key-list {
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
|
||||
.b-message-open-pgp-content {
|
||||
&.modal {
|
||||
width: 700px;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.key-list {
|
||||
|
|
@ -134,7 +134,7 @@
|
|||
|
||||
.b-open-pgp-key-add-content {
|
||||
&.modal {
|
||||
width: 645px;
|
||||
max-width: 645px;
|
||||
}
|
||||
.inputKey {
|
||||
font-family: var(--fontMono);
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
.rl-view-model {
|
||||
.b-shortcuts-content {
|
||||
&.modal {
|
||||
width: 700px;
|
||||
max-width: 700px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
.b-template-add-content {
|
||||
|
||||
&.modal {
|
||||
width: 750px;
|
||||
max-width: 750px;
|
||||
}
|
||||
|
||||
.e-template-place {
|
||||
|
|
@ -51,19 +51,8 @@ label.inline, span.inline {
|
|||
color: #b94a48;
|
||||
}
|
||||
|
||||
.form-horizontal.long-label .control-group {
|
||||
.control-label {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
/* mobile and tablet */
|
||||
@media screen and (max-width: 999px) {
|
||||
|
||||
.modal {
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.form-horizontal {
|
||||
.control-group {
|
||||
.control-label {
|
||||
|
|
|
|||
|
|
@ -63,7 +63,8 @@
|
|||
margin: -1px -2px;
|
||||
}
|
||||
|
||||
.icon-spinner:not(.not-animated) {
|
||||
.icon-spinner:not(.not-animated),
|
||||
.list-loading .icon-spinner.not-animated {
|
||||
border-color: transparent;
|
||||
border-top-color: #999;
|
||||
animation: rotation .8s infinite ease-in-out;
|
||||
|
|
|
|||
|
|
@ -86,7 +86,6 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
|
|||
|
||||
this.messageListCheckedOrSelected = MessageUserStore.listCheckedOrSelected;
|
||||
this.messageListCompleteLoadingThrottle = MessageUserStore.listCompleteLoading;
|
||||
this.messageListCompleteLoadingThrottleForAnimation = MessageUserStore.listLoadingAnimation;
|
||||
|
||||
initOnStartOrLangChange(() => this.emptySubjectValue = i18n('MESSAGE_LIST/EMPTY_SUBJECT_TEXT'));
|
||||
|
||||
|
|
@ -670,31 +669,31 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
|
|||
}
|
||||
|
||||
onBuild(dom) {
|
||||
const eqs = (ev, s) => ev.target.closestWithin(s, dom);
|
||||
const eqs = (ev, s) => ev.target.closestWithin('.messageList '+s, dom);
|
||||
|
||||
this.selector.init(dom.querySelector('.b-content'), Scope.MessageList);
|
||||
|
||||
dom.addEventListener('click', event => {
|
||||
ThemeStore.isMobile() && leftPanelDisabled(true);
|
||||
|
||||
if (eqs(event, '.messageList .b-message-list-wrapper') && Scope.MessageView === AppUserStore.focusedState()) {
|
||||
if (eqs(event, '.b-message-list-wrapper') && Scope.MessageView === AppUserStore.focusedState()) {
|
||||
AppUserStore.focusedState(Scope.MessageList);
|
||||
}
|
||||
|
||||
let el = eqs(event, '.e-paginator .e-page');
|
||||
el && this.gotoPage(ko.dataFor(el));
|
||||
|
||||
eqs(event, '.messageList .checkboxCheckAll') && this.checkAll(!this.checkAll());
|
||||
eqs(event, '.checkboxCheckAll') && this.checkAll(!this.checkAll());
|
||||
|
||||
el = eqs(event, '.messageList .messageListItem .flagParent');
|
||||
el = eqs(event, '.messageListItem .flagParent');
|
||||
el && this.flagMessages(ko.dataFor(el));
|
||||
|
||||
el = eqs(event, '.messageList .messageListItem .threads-len');
|
||||
el = eqs(event, '.messageListItem .threads-len');
|
||||
el && this.gotoThread(ko.dataFor(el));
|
||||
});
|
||||
|
||||
dom.addEventListener('dblclick', event => {
|
||||
let el = eqs(event, '.messageList .messageListItem .actionHandle');
|
||||
let el = eqs(event, '.messageListItem .actionHandle');
|
||||
el && this.gotoThread(ko.dataFor(el));
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue