mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 16:26:08 +08:00
f5ee557e2e
Summary: By default, the messages in a thread are now filtered to exclude ones moved to trash or spam. You can choose to view those messages by clicking the new bar in the message list. When you view your spam or trash, we only show the messages on those threads that have been marked as spam/trash. Test Plan: Run a couple new tests Reviewers: juan, evan Reviewed By: evan Differential Revision: https://phab.nylas.com/D2662
563 lines
13 KiB
Plaintext
563 lines
13 KiB
Plaintext
@import "ui-variables";
|
|
@import "ui-mixins";
|
|
|
|
@scrollbar-margin: 8px;
|
|
|
|
// MIXINS
|
|
|
|
.inverseContent() {
|
|
// Note: these styles are also applied below
|
|
// subpixel antialiasing looks awful against dark background colors
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
color: @text-color-inverse;
|
|
|
|
.participants {
|
|
.unread-true {
|
|
font-weight: @font-weight-normal;
|
|
}
|
|
}
|
|
.subject {
|
|
font-weight: @font-weight-normal;
|
|
}
|
|
|
|
.thread-icon, .draft-icon, .mail-important-icon {
|
|
-webkit-filter: brightness(600%) grayscale(100%);
|
|
}
|
|
|
|
.mail-label {
|
|
// Note - these !important styles override values set by a style tag
|
|
// since the color of the label is detemined programatically.
|
|
background: fade(@text-color-inverse, 20%) !important;
|
|
box-shadow: none !important;
|
|
-webkit-filter: brightness(600%) grayscale(100%);
|
|
}
|
|
|
|
}
|
|
|
|
// STYLES
|
|
|
|
*:focus, input:focus {
|
|
outline:none;
|
|
}
|
|
|
|
.thread-list, .draft-list {
|
|
.list-container, .scroll-region {
|
|
width:100%;
|
|
height:100%;
|
|
-webkit-font-smoothing: subpixel-antialiased;
|
|
}
|
|
|
|
.swipe-backing {
|
|
background-color: darken(@background-primary, 10%);
|
|
&::after {
|
|
color: fade(white, 90%);
|
|
padding-top: 45px;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
font-size: @font-size-small;
|
|
position: absolute;
|
|
top: 0;
|
|
transform: translateX(0%);
|
|
width: 80px;
|
|
bottom: 0;
|
|
opacity: 0.8;
|
|
transition: opacity linear 150ms;
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 35%;
|
|
background-size: 24px 24px;
|
|
}
|
|
|
|
&.swipe-trash {
|
|
transition: background-color linear 150ms;
|
|
background-color: mix(#ed304b, @background-primary, 75%);
|
|
&::after {
|
|
transition: left linear 150ms, transform linear 150ms;
|
|
content: "Trash";
|
|
left: 0;
|
|
background-image: url(../static/images/swipe/icon-swipe-trash@2x.png);
|
|
}
|
|
&.confirmed {
|
|
background-color: #ed304b;
|
|
&::after {
|
|
left: 100%;
|
|
transform: translateX(-100%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
&.swipe-archive {
|
|
transition: background-color linear 150ms;
|
|
background-color: mix(#6cd420, @background-primary, 75%);
|
|
&::after {
|
|
transition: left linear 150ms, transform linear 150ms;
|
|
content: "Archive";
|
|
left: 0;
|
|
background-image: url(../static/images/swipe/icon-swipe-archive@2x.png);
|
|
}
|
|
&.confirmed {
|
|
background-color: #6cd420;
|
|
&::after {
|
|
left: 100%;
|
|
transform: translateX(-100%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
&.swipe-snooze {
|
|
transition: background-color linear 150ms;
|
|
background-color: mix(#8d6be3, @background-primary, 75%);
|
|
&::after {
|
|
transition: right linear 150ms, transform linear 150ms;
|
|
content: "Snooze";
|
|
right: 0;
|
|
background-image: url(../static/images/swipe/icon-swipe-snooze@2x.png);
|
|
}
|
|
&.confirmed {
|
|
background-color: #8d6be3;
|
|
&::after {
|
|
right: 100%;
|
|
transform: translateX(100%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-item {
|
|
background-color: darken(@background-primary, 2%);
|
|
border-bottom: 1px solid fade(@list-border, 60%);
|
|
line-height: 36px;
|
|
}
|
|
|
|
.mail-important-icon {
|
|
margin-left:6px;
|
|
padding: 12px;
|
|
vertical-align: initial;
|
|
&:not(.active) {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.message-count {
|
|
color: @text-color-inverse;
|
|
background: @background-tertiary;
|
|
padding: 4px 6px 2px 6px;
|
|
margin-left: 1em;
|
|
}
|
|
|
|
.draft-icon {
|
|
margin-left:10px;
|
|
flex-shrink: 0;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.participants {
|
|
font-size: @font-size-small;
|
|
text-overflow: ellipsis;
|
|
text-align: left;
|
|
overflow: hidden;
|
|
|
|
&.no-recipients {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
}
|
|
|
|
.details {
|
|
display:flex;
|
|
align-items: center;
|
|
|
|
.subject {
|
|
font-size: @font-size-small;
|
|
font-weight: @font-weight-normal;
|
|
padding-right: @padding-base-horizontal;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
|
|
// Shrink, but only after snippet has shrunk
|
|
flex-shrink:0.1;
|
|
}
|
|
.snippet {
|
|
font-size: @font-size-small;
|
|
font-weight: @font-weight-normal;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
opacity: 0.62;
|
|
flex: 1;
|
|
}
|
|
.thread-icon {
|
|
margin-right:@padding-base-horizontal;
|
|
margin-left:@padding-base-horizontal;
|
|
}
|
|
}
|
|
|
|
.list-column-State {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.list-column-Date {
|
|
text-align: right;
|
|
}
|
|
|
|
.timestamp {
|
|
font-size: @font-size-small;
|
|
font-weight: @font-weight-normal;
|
|
min-width:70px;
|
|
margin-right:@scrollbar-margin;
|
|
opacity: 0.62;
|
|
}
|
|
|
|
.unread:not(.focused):not(.selected) {
|
|
background-color: @background-primary;
|
|
&:hover {
|
|
background: darken(@background-primary, 2%);
|
|
}
|
|
.snippet {
|
|
color: @text-color-subtle;
|
|
}
|
|
}
|
|
|
|
.unread:not(.focused):not(.selected):not(.next-is-selected) {
|
|
border-bottom: 1px solid @list-border;
|
|
}
|
|
|
|
.unread:not(.focused) {
|
|
// Never show any unread styles when the thread is focused.
|
|
// It will be marked as read and the delay from focus=>read
|
|
// is noticeable.
|
|
.subject {
|
|
font-weight: @font-weight-semi-bold;
|
|
}
|
|
.participants {
|
|
.unread-true {
|
|
font-weight: @font-weight-semi-bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.focused {
|
|
.inverseContent;
|
|
}
|
|
|
|
.thread-injected-icons {
|
|
vertical-align: top;
|
|
}
|
|
.thread-injected-mail-labels {
|
|
margin-right: 6px;
|
|
}
|
|
.thread-icon {
|
|
width:25px;
|
|
height:24px;
|
|
flex-shrink:0;
|
|
background-size: 15px;
|
|
display:inline-block;
|
|
background-repeat: no-repeat;
|
|
background-position:center;
|
|
|
|
&.thread-icon-attachment {
|
|
background-image:url(../static/images/thread-list/icon-attachment-@2x.png);
|
|
margin-right:0;
|
|
margin-left:0;
|
|
}
|
|
&.thread-icon-unread {
|
|
background-image:url(../static/images/thread-list/icon-unread-@2x.png);
|
|
}
|
|
&.thread-icon-replied {
|
|
background-image:url(../static/images/thread-list/icon-replied-@2x.png);
|
|
}
|
|
&.thread-icon-forwarded {
|
|
background-image:url(../static/images/thread-list/icon-forwarded-@2x.png);
|
|
}
|
|
&.thread-icon-star {
|
|
background-size: 16px;
|
|
background-image:url(../static/images/thread-list/icon-star-@2x.png);
|
|
}
|
|
}
|
|
.star-button {
|
|
font-size: 16px;
|
|
.fa-star {
|
|
color: rgb(239, 209, 0);
|
|
&:hover {
|
|
cursor: pointer;
|
|
color: rgb(220,220,220);
|
|
}
|
|
}
|
|
.fa-star-o {
|
|
color: rgb(220,220,220);
|
|
&:hover {
|
|
cursor: pointer;
|
|
color: rgb(239, 209, 0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// quick actions
|
|
@archive-img: "../static/images/thread-list-quick-actions/ic-quick-button-archive@2x.png";
|
|
@trash-img: "../static/images/thread-list-quick-actions/ic-quick-button-trash@2x.png";
|
|
@snooze-img: "../static/images/thread-list-quick-actions/ic-quickaction-snooze@2x.png";
|
|
|
|
.thread-list .list-item .list-column-HoverActions {
|
|
display:none;
|
|
.action {
|
|
display:inline-block;
|
|
background-size: 100%;
|
|
zoom:0.5;
|
|
width: 81px;
|
|
height: 51px;
|
|
margin: 9px 16px 0 16px;
|
|
}
|
|
.action.action-archive {
|
|
background: url(@archive-img) center no-repeat, @background-gradient;
|
|
}
|
|
.action.action-trash {
|
|
background: url(@trash-img) center no-repeat, @background-gradient;
|
|
}
|
|
.action.action-snooze {
|
|
background: url(@snooze-img) center no-repeat, @background-gradient;
|
|
}
|
|
}
|
|
body.platform-win32 {
|
|
.thread-list .list-item .list-column-HoverActions {
|
|
.action {
|
|
border: 0;
|
|
margin: 9px 0 0 0;
|
|
}
|
|
.action.action-archive {
|
|
background: url(@archive-img) center no-repeat;
|
|
}
|
|
.action.action-trash {
|
|
background: url(@trash-img) center no-repeat;
|
|
}
|
|
.action.action-snooze {
|
|
background: url(@snooze-img) center no-repeat;
|
|
}
|
|
}
|
|
}
|
|
.thread-list .list-item:hover .list-column-HoverActions {
|
|
width: 0;
|
|
padding: 0;
|
|
display:block;
|
|
overflow: visible;
|
|
height:100%;
|
|
|
|
.inner {
|
|
position:relative;
|
|
width:300px;
|
|
height:100%;
|
|
left: -300px;
|
|
.thread-injected-quick-actions {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.thread-list .list-item:hover .list-column-HoverActions .inner {
|
|
background-image: -webkit-linear-gradient(left, fade(darken(@list-bg, 5%), 0%) 0%, darken(@list-bg, 5%) 50%, darken(@list-bg, 5%) 100%);
|
|
}
|
|
|
|
.thread-list .list-item.selected:hover .list-column-HoverActions .inner {
|
|
background-image: -webkit-linear-gradient(left, fade(@list-selected-bg, 0%) 0%, @list-selected-bg 50%, @list-selected-bg 100%);
|
|
}
|
|
|
|
.thread-list .list-item.focused:hover .list-column-HoverActions .inner {
|
|
background-image: -webkit-linear-gradient(left, fade(@list-focused-bg, 0%) 0%, @list-focused-bg 50%, @list-focused-bg 100%);
|
|
.action {
|
|
-webkit-filter: invert(100%) brightness(300%);
|
|
}
|
|
.action.action-archive {
|
|
background: url(@archive-img) center no-repeat;
|
|
}
|
|
.action.action-trash {
|
|
background: url(@trash-img) center no-repeat;
|
|
}
|
|
.action.action-snooze {
|
|
background: url(@snooze-img) center no-repeat;
|
|
}
|
|
}
|
|
|
|
|
|
// stars
|
|
|
|
.thread-list .thread-icon-star:hover
|
|
{
|
|
background-image:url(../static/images/thread-list/icon-star-@2x.png);
|
|
background-size: 16px;
|
|
-webkit-filter: brightness(90%);
|
|
}
|
|
.thread-list .list-item:hover .thread-icon-none:hover {
|
|
background-image:url(../static/images/thread-list/icon-star-action-hover-@2x.png);
|
|
background-size: 16px;
|
|
}
|
|
.thread-list .list-item:hover .thread-icon-none {
|
|
background-image:url(../static/images/thread-list/icon-star-hover-@2x.png);
|
|
background-size: 16px;
|
|
}
|
|
.thread-list .list-item:hover .mail-important-icon.enabled {
|
|
visibility: inherit;
|
|
}
|
|
.thread-list .thread-icon-star-on-hover:hover {
|
|
background-image:url(../static/images/thread-list/icon-star-hover-@2x.png);
|
|
background-size: 16px;
|
|
}
|
|
|
|
.thread-list-narrow {
|
|
.list-column {
|
|
display:block;
|
|
}
|
|
.list-tabular-item {
|
|
line-height: 21px;
|
|
}
|
|
.timestamp {
|
|
order: 100;
|
|
min-width: 0;
|
|
}
|
|
.participants {
|
|
font-size: @font-size-base;
|
|
}
|
|
.thread-icon {
|
|
margin-right:5px;
|
|
}
|
|
|
|
.mail-important-icon {
|
|
margin-left:1px;
|
|
float:left;
|
|
padding: 12px;
|
|
vertical-align: initial;
|
|
}
|
|
|
|
.subject {
|
|
font-size: @font-size-base;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-align: left;
|
|
margin-left:30px;
|
|
margin-right:@scrollbar-margin;
|
|
}
|
|
.snippet-and-labels {
|
|
margin-left:30px;
|
|
margin-right:@scrollbar-margin;
|
|
display: flex;
|
|
align-items: baseline;
|
|
overflow: hidden;
|
|
|
|
.mail-label {
|
|
padding: 1px 8px;
|
|
font-size: 0.8em;
|
|
line-height: 17px;
|
|
.inner {
|
|
position: inherit;
|
|
}
|
|
.x {
|
|
display: none;
|
|
}
|
|
}
|
|
.snippet {
|
|
font-size: @font-size-small;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
opacity: 0.7;
|
|
text-align: left;
|
|
min-height: 21px;
|
|
margin-right:4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// selection looks like focus in split mode
|
|
|
|
.thread-list.handler-split {
|
|
.list-item {
|
|
&.selected {
|
|
background: @list-focused-bg;
|
|
color: @list-focused-color;
|
|
.inverseContent;
|
|
}
|
|
}
|
|
.list-item.selected:hover .list-column-HoverActions .inner {
|
|
background-image: -webkit-linear-gradient(left, fade(@list-focused-bg, 0%) 0%, @list-focused-bg 50%, @list-focused-bg 100%);
|
|
.action {
|
|
-webkit-filter: invert(100%) brightness(300%);
|
|
}
|
|
.action.action-archive {
|
|
background: url(@archive-img) center no-repeat;
|
|
}
|
|
.action.action-trash {
|
|
background: url(@trash-img) center no-repeat;
|
|
}
|
|
.action.action-snooze {
|
|
background: url(@snooze-img) center no-repeat;
|
|
}
|
|
}
|
|
}
|
|
body.is-blurred {
|
|
.thread-list.handler-split {
|
|
.list-item {
|
|
&.selected {
|
|
background: fadeout(desaturate(@list-focused-bg, 100%), 65%);
|
|
border-bottom: 1px solid fadeout(desaturate(@list-focused-border, 100%), 65%);
|
|
color: @text-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes sending-progress-move {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
|
|
.draft-list {
|
|
.sending {
|
|
background-color: @background-primary;
|
|
&:hover {
|
|
background-color: @background-primary;
|
|
}
|
|
}
|
|
|
|
.sending-progress {
|
|
display: block;
|
|
height:7px;
|
|
margin-top:10px;
|
|
background-color: @background-primary;
|
|
border-bottom:1px solid @border-color-divider;
|
|
position: relative;
|
|
|
|
.filled {
|
|
display: block;
|
|
background: @component-active-color;
|
|
height:6px;
|
|
width: 0; //overridden by style
|
|
transition: width 1000ms linear;
|
|
}
|
|
.indeterminate {
|
|
display: block;
|
|
background: @component-active-color;
|
|
height:6px;
|
|
width: 100%;
|
|
}
|
|
.indeterminate:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0; left: 0; bottom: 0; right: 0;
|
|
background-image: linear-gradient(
|
|
-45deg,
|
|
rgba(255, 255, 255, .2) 25%,
|
|
transparent 25%,
|
|
transparent 50%,
|
|
rgba(255, 255, 255, .2) 50%,
|
|
rgba(255, 255, 255, .2) 75%,
|
|
transparent 75%,
|
|
transparent
|
|
);
|
|
background-size: 50px 50px;
|
|
animation: sending-progress-move 2s linear infinite;
|
|
}
|
|
}
|
|
}
|