mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 16:26:08 +08:00
44a7fa7117
Summary: This commit adds a couple of missing assets, including the icon for the plugin list and other misc icons. It also switches to the new UI where we use the thread timestamps to display the reminder date in the Reminders perspective instead of using mail labels. It also adds a header to the threads inside the reminders perspective to indicate that a reminder will be triggered if no one replies to their email. It also adds a header to indicate when a message has been brought back to the inbox due to a reminder based on sdw's designs. Finally it restores some code that magically disappeared when landing reminders + other misc cleanup Test Plan: Manual Reviewers: bengotow, halla Reviewed By: bengotow, halla Differential Revision: https://phab.nylas.com/D3388
749 lines
16 KiB
Plaintext
749 lines
16 KiB
Plaintext
@import "ui-variables";
|
|
@import "ui-mixins";
|
|
|
|
@message-max-width: 800px;
|
|
@message-spacing: 6px;
|
|
|
|
.tag-picker {
|
|
.menu {
|
|
.content-container {
|
|
height:250px;
|
|
overflow-y:scroll;
|
|
}
|
|
}
|
|
}
|
|
|
|
body.platform-win32 {
|
|
.sheet-toolbar {
|
|
.message-toolbar-arrow.down {
|
|
margin: 0 0 0 1px;
|
|
padding: 0 5px;
|
|
.windows-btn-bg;
|
|
&:hover {
|
|
background: #e5e5e5;
|
|
}
|
|
&.btn-icon:hover {
|
|
color: @text-color;
|
|
img.content-mask { background: rgba(35, 31, 32, 0.8); }
|
|
}
|
|
}
|
|
.message-toolbar-arrow.up {
|
|
margin: 0 0 0 1px;
|
|
padding: 0 5px;
|
|
.windows-btn-bg;
|
|
&.btn-icon:hover {
|
|
color: @text-color;
|
|
img.content-mask { background: rgba(35, 31, 32, 0.8); }
|
|
}
|
|
}
|
|
.message-toolbar-arrow.disabled {
|
|
&:hover {
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
#message-list {
|
|
.message-item-wrap {
|
|
.message-item-white-wrap {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
.minified-bundle {
|
|
.num-messages {
|
|
border-radius: 0;
|
|
}
|
|
.msg-line {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
.footer-reply-area-wrap {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
.sidebar-section {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
.sheet-toolbar {
|
|
// This class wraps the items that appear above the message list in the
|
|
// toolbar. We want the toolbar items to sit right above the centered
|
|
// content, so we need another 800px-wide container in the toolbar...
|
|
.message-toolbar-items {
|
|
order: 200;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.message-toolbar-arrow.down {
|
|
order:201;
|
|
margin-right: 0;
|
|
margin-left: @spacing-standard * 1.5;
|
|
}
|
|
.message-toolbar-arrow.up {
|
|
order:202;
|
|
// <1 because of hit region padding on the button
|
|
margin-right: @spacing-standard * 0.75;
|
|
}
|
|
.message-toolbar-arrow.disabled {
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
.mode-split {
|
|
.message-nav-title {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.hide-sidebar-button {
|
|
font-size: @font-size-small;
|
|
color: @text-color-subtle;
|
|
margin-left: @spacing-standard;
|
|
cursor:default;
|
|
-webkit-user-select: none;
|
|
.img-wrap {
|
|
margin-right: @spacing-half;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
img { background: @text-color-subtle; }
|
|
}
|
|
|
|
#message-list.height-fix {
|
|
height: calc(~"100% - 35px");
|
|
min-height: calc(~"100% - 35px");
|
|
}
|
|
|
|
#message-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
background: @background-secondary;
|
|
|
|
transition: all 125ms ease-in-out;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 100%;
|
|
padding: 0;
|
|
order: 2;
|
|
|
|
search-match, .search-match {
|
|
background: @text-color-search-match;
|
|
border-radius: @border-radius-base;
|
|
box-shadow: 0 0.5px 0.5px rgba(0,0,0,0.25);
|
|
&.current-match {
|
|
background: @text-color-search-current-match;
|
|
}
|
|
}
|
|
|
|
.show-hidden-messages {
|
|
background-color: darken(@background-secondary, 4%);
|
|
border: 1px solid darken(@background-secondary, 8%);
|
|
border-radius: @border-radius-base;
|
|
color: @text-color-very-subtle;
|
|
margin-bottom: @padding-large-vertical;
|
|
cursor: default;
|
|
padding: @padding-base-vertical @padding-base-horizontal;
|
|
a { float: right; }
|
|
}
|
|
|
|
.message-body-error {
|
|
background-color: @background-secondary;
|
|
border: 1px solid darken(@background-secondary, 8%);
|
|
color: @text-color-very-subtle;
|
|
margin-top: @padding-large-vertical;
|
|
cursor: default;
|
|
padding: @padding-base-vertical @padding-base-horizontal;
|
|
a { float: right; }
|
|
}
|
|
|
|
.message-body-loading {
|
|
height: 1em;
|
|
align-content: center;
|
|
margin-top: @padding-large-vertical;
|
|
margin-bottom: @padding-large-vertical;
|
|
}
|
|
|
|
.message-subject-wrap {
|
|
max-width: @message-max-width;
|
|
margin: 5px auto 10px auto;
|
|
-webkit-user-select: text;
|
|
line-height: @font-size-large * 1.8;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 @padding-base-horizontal;
|
|
}
|
|
.mail-important-icon {
|
|
margin-right:@spacing-half;
|
|
margin-bottom:1px;
|
|
flex-shrink: 0;
|
|
}
|
|
.message-subject {
|
|
font-size: @font-size-large;
|
|
color: @text-color;
|
|
margin-right: @spacing-standard;
|
|
}
|
|
.message-icons-wrap {
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
background: @text-color-subtle;
|
|
}
|
|
div + div {
|
|
margin-left: @padding-small-horizontal;
|
|
}
|
|
}
|
|
.thread-injected-mail-labels {
|
|
vertical-align: top;
|
|
}
|
|
.message-list-headers {
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
max-width: @message-max-width;
|
|
display:block;
|
|
|
|
.participants {
|
|
.contact-chip {
|
|
display:inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.messages-wrap {
|
|
flex: 1;
|
|
opacity:0;
|
|
transition: opacity 0s;
|
|
|
|
&.ready {
|
|
opacity:1;
|
|
transition: opacity .1s linear;
|
|
}
|
|
|
|
.scroll-region-content-inner {
|
|
padding: 6px;
|
|
}
|
|
}
|
|
|
|
.minified-bundle + .message-item-wrap {
|
|
margin-top: -5px;
|
|
}
|
|
|
|
.message-item-wrap {
|
|
transition: height 0.1s;
|
|
position: relative;
|
|
max-width: @message-max-width;
|
|
margin: 0 auto;
|
|
|
|
.message-item-white-wrap {
|
|
background: @background-primary;
|
|
border: 0;
|
|
box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.28), 0 1px 1.5px rgba(0, 0, 0, 0.08);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
padding-bottom: @message-spacing * 2;
|
|
&.before-reply-area { padding-bottom: 0; }
|
|
|
|
&.collapsed {
|
|
.message-item-white-wrap {
|
|
background-color: darken(@background-primary, 2%);
|
|
padding-top: 19px;
|
|
padding-bottom: 8px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&+.minified-bundle {
|
|
margin-top: -@message-spacing
|
|
}
|
|
}
|
|
|
|
&.collapsed .message-item-area {
|
|
padding-bottom: 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
font-size: @font-size-small;
|
|
|
|
.collapsed-snippet {
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
cursor: default;
|
|
color: @text-color-very-subtle;
|
|
}
|
|
|
|
.collapsed-attachment {
|
|
width:15px;
|
|
height:15px;
|
|
background-size: 15px;
|
|
background-repeat: no-repeat;
|
|
background-position:center;
|
|
padding:12px;
|
|
margin-left: 0.5em;
|
|
background-image:url(../static/images/message-list/icon-attachment-@2x.png);
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
|
|
.collapsed-from {
|
|
font-weight: @font-weight-semi-bold;
|
|
color: @text-color-very-subtle;
|
|
// min-width: 60px;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.collapsed-timestamp {
|
|
margin-left: 0.5em;
|
|
color: @text-color-very-subtle;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.message-item-divider {
|
|
border:0; // remove default hr border left, right
|
|
border-top: 2px solid @border-color-secondary;
|
|
height: 3px;
|
|
background: @background-secondary;
|
|
border-bottom: 1px solid @border-color-primary;
|
|
margin: 0;
|
|
|
|
&.collapsed {
|
|
height: 0;
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.minified-bundle {
|
|
position: relative;
|
|
.num-messages {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-left: -80px;
|
|
margin-top: -15px;
|
|
border-radius: 15px;
|
|
border: 1px solid @border-color-divider;
|
|
width: 160px;
|
|
background: @background-primary;
|
|
text-align: center;
|
|
color: @text-color-very-subtle;
|
|
z-index: 2;
|
|
background: @background-primary;
|
|
&:hover {
|
|
cursor: default;
|
|
}
|
|
}
|
|
.msg-lines {
|
|
max-width: @message-max-width;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
margin-top: -13px;
|
|
}
|
|
.msg-line {
|
|
border-radius: 4px 4px 0 0;
|
|
position: relative;
|
|
border-top: 1px solid @border-color-divider;
|
|
background-color: darken(@background-primary, 2%);
|
|
box-shadow: 0 0.5px 0 rgba(0,0,0,0.1), 0 -0.5px 0 rgba(0,0,0,0.1), 0.5px 0 0 rgba(0,0,0,0.1), -0.5px 0 0 rgba(0,0,0,0.1);
|
|
}
|
|
}
|
|
|
|
.message-header {
|
|
position: relative;
|
|
font-size: @font-size-small;
|
|
padding-bottom: 0;
|
|
padding-top: 19px;
|
|
|
|
&.pending {
|
|
.message-actions-wrap {
|
|
width: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
}
|
|
.pending-spinner {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.pending-spinner {
|
|
transition: opacity 100ms;
|
|
transition-delay: 50ms, 0ms;
|
|
transition-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
|
|
.header-row {
|
|
margin-top: 0.5em;
|
|
color: @text-color-very-subtle;
|
|
|
|
.header-label {
|
|
float: left;
|
|
display: block;
|
|
font-weight: @font-weight-normal;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.header-name {
|
|
}
|
|
}
|
|
|
|
.message-actions-wrap {
|
|
transition: opacity 100ms, width 150ms;
|
|
transition-delay: 50ms, 0ms;
|
|
transition-timing-function: ease-in-out;
|
|
opacity: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
.message-actions-ellipsis {
|
|
display: block;
|
|
float: left;
|
|
}
|
|
|
|
.message-actions {
|
|
display: inline-block;
|
|
height: 23px;
|
|
border: 1px solid lighten(@border-color-divider, 6%);
|
|
border-radius: 11px;
|
|
|
|
z-index: 4;
|
|
margin-top: 0.35em;
|
|
margin-left: 0.5em;
|
|
text-align: center;
|
|
|
|
.btn-icon {
|
|
opacity: 0.75;
|
|
padding: 0 @spacing-half;
|
|
height: 20px;
|
|
line-height: 10px;
|
|
border-radius: 0;
|
|
border-right: 1px solid lighten(@border-color-divider, 6%);
|
|
&:last-child { border-right: 0; }
|
|
margin: 0;
|
|
&:active {background: transparent;}
|
|
}
|
|
}
|
|
|
|
.message-time {
|
|
padding-top: 4px;
|
|
z-index: 2; position: relative;
|
|
display: inline-block;
|
|
min-width: 125px;
|
|
cursor: default;
|
|
}
|
|
.msg-actions-tooltip {
|
|
display: inline-block;
|
|
margin-left: 1em;
|
|
}
|
|
|
|
.message-time, .message-indicator {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
|
|
.message-header-right {
|
|
z-index: 4;
|
|
position: relative;
|
|
top: -5px;
|
|
float: right;
|
|
text-align: right;
|
|
display: flex;
|
|
height: 2em;
|
|
}
|
|
|
|
}
|
|
|
|
.message-item-area {
|
|
width: 100%;
|
|
max-width: @message-max-width;
|
|
margin: 0 auto;
|
|
padding: 0 20px @spacing-standard 20px;
|
|
|
|
.iframe-container {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
|
|
iframe {
|
|
width: 100%;
|
|
border: 0;
|
|
padding: 0;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.collapse-region {
|
|
width: calc(~"100% - 30px");
|
|
height: 56px;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
.header-toggle-control {
|
|
&.inactive { display: none; }
|
|
z-index: 3;
|
|
position: absolute;
|
|
top: 0;
|
|
left: -1 * 13px;
|
|
img { background: @text-color-very-subtle; }
|
|
}
|
|
.message-item-wrap:hover {
|
|
.header-toggle-control.inactive { display: block; }
|
|
}
|
|
|
|
.footer-reply-area-wrap {
|
|
overflow: hidden;
|
|
|
|
max-width: @message-max-width;
|
|
margin: -3px auto 0 auto;
|
|
|
|
position: relative;
|
|
z-index: 2;
|
|
|
|
border: 0;
|
|
box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.28), 0 1px 1.5px rgba(0, 0, 0, 0.08);
|
|
border-top: 1px dashed @border-color-divider;
|
|
border-radius: 0 0 4px 4px;
|
|
background: @background-primary;
|
|
|
|
color: @text-color-very-subtle;
|
|
img.content-mask { background-color:@text-color-very-subtle; }
|
|
|
|
&:hover {
|
|
cursor: default;
|
|
}
|
|
|
|
.footer-reply-area {
|
|
width: 100%;
|
|
max-width: @message-max-width;
|
|
margin: 0 auto;
|
|
padding: 12px @spacing-standard * 1.5;
|
|
}
|
|
.reply-text {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-left: 0.5em;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.download-all {
|
|
@download-btn-color: fadeout(#929292, 20%);
|
|
@download-hover-color: fadeout(@component-active-color, 20%);
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
color: @download-btn-color;
|
|
font-size: 0.9em;
|
|
cursor: default;
|
|
margin-top: @spacing-three-quarters;
|
|
|
|
.separator {
|
|
margin: 0 5px;
|
|
}
|
|
|
|
.attachment-number {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
margin-right: @spacing-half;
|
|
background-color: @download-btn-color;
|
|
}
|
|
|
|
.download-all-action:hover {
|
|
color: @download-hover-color;
|
|
img {
|
|
background-color: @download-hover-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.attachments-area {
|
|
padding-top: @spacing-half + 2;
|
|
|
|
// attachments are padded on both sides so that things like the remove "X" can
|
|
// overhang them. To make the attachments line up with the body, we need to outdent
|
|
margin-left: -@spacing-standard;
|
|
margin-right: -@spacing-standard;
|
|
|
|
cursor:default;
|
|
}
|
|
|
|
|
|
///////////////////////////////
|
|
// message-participants.cjsx //
|
|
///////////////////////////////
|
|
.pending {
|
|
.message-participants {
|
|
padding-left: 34px;
|
|
}
|
|
}
|
|
.message-participants {
|
|
z-index: 1;
|
|
display: flex;
|
|
transition: padding-left 150ms;
|
|
transition-timing-function: ease-in-out;
|
|
|
|
&.collapsed:hover {cursor: default;}
|
|
|
|
.from-contact {
|
|
font-weight: @headings-font-weight;
|
|
color: @text-color;
|
|
}
|
|
.from-label, .to-label, .cc-label, .bcc-label {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
.to-contact, .cc-contact, .bcc-contact, .to-everyone {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
|
|
&.to-participants {
|
|
width: 100%;
|
|
|
|
.collapsed-participants {
|
|
width: 100%;
|
|
margin-top: -6px;
|
|
}
|
|
}
|
|
|
|
.collapsed-participants {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.to-contact {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.expanded-participants {
|
|
padding-right: 1.2em;
|
|
width: 100%;
|
|
|
|
.participant {
|
|
display: inline-block;
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
.participant-type {
|
|
margin-top: 0.5em;
|
|
&:first-child {margin-top: 0;}
|
|
}
|
|
|
|
.from-label, .to-label, .cc-label, .bcc-label {
|
|
float: left;
|
|
display: block;
|
|
text-transform: capitalize;
|
|
font-weight: @font-weight-normal;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.from-contact, .subject {
|
|
font-weight: @font-weight-semi-bold;
|
|
}
|
|
|
|
// .from-label { margin-right: 1em; }
|
|
.to-label, .cc-label { margin-right: 0.5em; }
|
|
.bcc-label { margin-right: 0; }
|
|
|
|
.participant-primary {
|
|
color: @text-color-very-subtle;
|
|
margin-right: 0.15em;
|
|
display:inline-block;
|
|
}
|
|
.participant-secondary {
|
|
color: @text-color-very-subtle;
|
|
display:inline-block;
|
|
}
|
|
|
|
.from-contact {
|
|
.participant-primary {
|
|
color: @text-color;
|
|
}
|
|
.participant-secondary {
|
|
color: @text-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
///////////////////////////////
|
|
// sidebar-contact-card.cjsx //
|
|
///////////////////////////////
|
|
.sidebar-section {
|
|
opacity: 0;
|
|
margin: 5px;
|
|
cursor: default;
|
|
border: 1px solid @border-color-primary;
|
|
border-radius: @border-radius-large;
|
|
background: @background-primary;
|
|
padding: 15px;
|
|
|
|
&.visible {
|
|
transition: opacity 0.1s ease-out;
|
|
opacity: 1;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 11px;
|
|
font-weight: @font-weight-semi-bold;
|
|
text-transform: uppercase;
|
|
color: @text-color-very-subtle;
|
|
margin: 0 0 18px 0;
|
|
position: relative;
|
|
|
|
&:after {
|
|
content: " ";
|
|
background-image: url(images/sidebar/sidebar-section-divider@2x.png);
|
|
background-size: 100%;
|
|
background-repeat: repeat-x;
|
|
background-color: transparent;
|
|
position: absolute;
|
|
left: -15px;
|
|
bottom: -10px;
|
|
width: calc(~"100% + 30px");
|
|
height: 3px;
|
|
}
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.sidebar-contact-card {
|
|
}
|
|
}
|
|
.sidebar-participant-picker {
|
|
padding: 10px 5px 20px 5px;
|
|
text-align: right;
|
|
select {
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.column-MessageListSidebar {
|
|
background-color: @background-secondary;
|
|
overflow: auto;
|
|
border-left: 1px solid @border-color-divider;
|
|
color: @text-color-subtle;
|
|
.flexbox-handle-horizontal div {
|
|
border-right: 0;
|
|
width: 1px;
|
|
}
|
|
}
|