Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2024-09-22 16:26:08 +08:00
Code Issues Packages Projects Releases Wiki Activity
Mailspring/internal_packages/thread-list/stylesheets/thread-list.less

510 lines
12 KiB
Plaintext
Raw Blame History

@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,&.swipe-all {
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;
overflow: hidden;
.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;
.emoji {
font-weight: @font-weight-normal;
}
}
.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;
}
}
}
.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 {
.icons-column {
display: flex;
flex-direction: column;
align-items: center;
width: 25px;
margin-right: 5px;
.thread-injected-icons {
align-items: center;
}
}
.thread-info-column {
flex: 1;
align-self: center;
.participants-wrapper {
display: flex;
align-items: center;
min-height: 24px;
}
}
.list-column {
display:block;
}
.list-tabular-item {
line-height: 21px;
}
.timestamp {
order: 100;
min-width: 0;
}
.participants {
font-size: @font-size-base;
}
.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-right: @scrollbar-margin;
}
.snippet-and-labels {
margin-right: @scrollbar-margin;
display: flex;
align-items: baseline;
overflow: hidden;
.mail-label {
font-size: 0.8em;
line-height: 17px;
}
.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;
}
}
}
}
Reference in a new issue View git blame Copy permalink