mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 16:26:08 +08:00
5a948a7222
Summary: The Drafts tag now displays the total number of local drafts instead of the number of unread drafts from the server. The Trash label has been removed since there's no way in the UI to add or remove stuff from there. The Important label has been removed since it's a poorly understood Gmail-specific feature and there's no way in the UI to add or remove things from that label. There is no Starred label because there's no UI to indicate whther or not something is starred and no UI interface to add or remove from stars. Test Plan: edgehill --test Reviewers: bengotow Reviewed By: bengotow Differential Revision: https://review.inboxapp.com/D1296
336 lines
7 KiB
Plaintext
336 lines
7 KiB
Plaintext
// The ui-variables file is provided by base themes provided by Atom.
|
|
//
|
|
// See https://github.com/atom/atom-dark-ui/blob/master/stylesheets/ui-variables.less
|
|
// for a full listing of what's available.
|
|
@import "ui-variables";
|
|
@import "ui-mixins";
|
|
@import "buttons";
|
|
|
|
@compose-width: 800px;
|
|
@compose-min-height: 250px;
|
|
|
|
.composer-inner-wrap {
|
|
position: relative;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.composer-cover {
|
|
position: absolute;
|
|
top: -1 * @spacing-double; right: 0; bottom: 0; left: 0;
|
|
z-index: 1000;
|
|
background: rgba(255,255,255,0.7);
|
|
}
|
|
|
|
.composer-action-bar-wrap {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 100%;
|
|
background: transparent;
|
|
border-bottom: 0;
|
|
|
|
.composer-action-bar-content {
|
|
width: 100%;
|
|
max-width: @compose-width;
|
|
margin: 0 auto;
|
|
|
|
padding: @spacing-standard @spacing-double;
|
|
padding-bottom: @spacing-standard*1.1;
|
|
}
|
|
}
|
|
|
|
.pull-right {
|
|
&:first-child {margin-right: 0}
|
|
margin-right: @spacing-standard;
|
|
}
|
|
|
|
.composer-content-wrap {
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
width: 100%;
|
|
max-width: @compose-width;
|
|
margin: 0 auto;
|
|
margin-top: @spacing-standard;
|
|
padding: 0 @spacing-standard;
|
|
|
|
flex: 1;
|
|
display: flex;
|
|
flex-flow: column;
|
|
}
|
|
|
|
.text-actions {
|
|
text-align: right;
|
|
line-height: 1.4;
|
|
position: relative;
|
|
top: -3px;
|
|
}
|
|
|
|
.header-action {
|
|
color: @text-color-very-subtle;
|
|
font-size: @font-size-small;
|
|
padding-left: 1em;
|
|
&:hover {
|
|
color: @text-color-link;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.composer-participant-actions {
|
|
position: absolute;
|
|
z-index: 900;
|
|
right: @spacing-double;
|
|
.header-action {
|
|
position: relative;
|
|
top: 1em;
|
|
}
|
|
}
|
|
|
|
.tokenizing-field.to {
|
|
padding-right: 120px;
|
|
}
|
|
|
|
input, textarea, div[contenteditable] {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: block;
|
|
background: inherit;
|
|
width: 100%;
|
|
resize: none;
|
|
border: none;
|
|
}
|
|
|
|
.compose-subject-wrap {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 5px @spacing-standard 0 0;
|
|
margin: 0 @spacing-standard;
|
|
border-bottom: 1px solid @border-color-divider;
|
|
|
|
.subject-label {
|
|
color: @text-color-very-subtle;
|
|
float: left;
|
|
padding-top: 6px;
|
|
display: block;
|
|
}
|
|
|
|
input.compose-field {
|
|
display: inline-block;
|
|
width: calc(~"100% - 61px");
|
|
padding: 6px 0 2px 0;
|
|
margin: 0 0 5px 5px;
|
|
min-width: 5em;
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.compose-body {
|
|
flex: 1;
|
|
z-index: 1;
|
|
display: flex;
|
|
cursor: text;
|
|
overflow: auto;
|
|
position: relative;
|
|
|
|
.quoted-text-control {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 15px;
|
|
margin: 0;
|
|
}
|
|
|
|
div[contenteditable] {
|
|
font-size: @font-size-large;
|
|
line-height: 1.4;
|
|
min-height: @compose-min-height;
|
|
padding: @spacing-standard;
|
|
padding-top: @spacing-standard;
|
|
padding-bottom: 0;
|
|
margin-bottom: 37px;
|
|
}
|
|
.contenteditable-container {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// TODO FIXME DRY From stylesheets/message-list.less
|
|
.attachments-area {
|
|
padding: 0px 15px 0px 15px;
|
|
.attachment-file-wrap {
|
|
padding-top: 5px;
|
|
&.pending, &.started, &.progress {
|
|
color: @text-color-subtle;
|
|
.attachment-file-actions { visibility: visible; }
|
|
.attachment-file-and-name:hover { cursor: default; color: @text-color-subtle; }
|
|
}
|
|
|
|
&.completed, &.success {
|
|
color: @text-color-success; // Success state
|
|
.attachment-file-actions { visibility: hidden; }
|
|
.attachment-file-and-name:hover { cursor: default; color: @text-color-success; }
|
|
.attachment-upload-progress { background: @background-color-success; }
|
|
}
|
|
|
|
&.aborted, &.failed {
|
|
color: @text-color-error;
|
|
.attachment-file-actions { visibility: hidden; }
|
|
.attachment-file-and-name:hover { cursor: default; color: @text-color-error; }
|
|
.attachment-upload-progress { background: @background-color-error; }
|
|
}
|
|
}
|
|
|
|
.attachment-file-actions {
|
|
margin-left: 0.4em;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Overrides for the full-window popout composer
|
|
.composer-full-window {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.composer-outer-wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.composer-inner-wrap {
|
|
|
|
.composer-action-bar-wrap {
|
|
background: @background-secondary;
|
|
border-bottom: 1px solid @border-color-divider;
|
|
}
|
|
|
|
.compose-body {
|
|
margin-bottom: 0;
|
|
position: relative;
|
|
|
|
.contenteditable-container {
|
|
display: flex;
|
|
flex: 1;
|
|
width: 100%;
|
|
|
|
div[contenteditable] {
|
|
height: auto;
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
// Overrides for the composer in a message-list
|
|
#message-list {
|
|
.message-item-wrap.composer-outer-wrap {
|
|
border-top: 2px solid @border-color-divider;
|
|
&:last-child { padding-bottom: 0; }
|
|
}
|
|
}
|
|
|
|
|
|
|
|
//////////////////////////////////
|
|
// participants-text-field.cjsx //
|
|
//////////////////////////////////
|
|
.participants-text-field {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 5px @spacing-standard 0 @spacing-standard;
|
|
|
|
.completion-participant {
|
|
.participant-name, .participant-email {
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.participant-name {
|
|
display: block;
|
|
float: left;
|
|
}
|
|
.participant-email {
|
|
display: block;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.participant {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
.participant-primary {
|
|
font-weight: @font-weight-semi-bold;
|
|
}
|
|
.participant-secondary {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
}
|
|
|
|
.token.selected .participant-secondary, .token.dragging .participant-secondary {
|
|
color: @text-color-inverse-subtle;
|
|
}
|
|
}
|
|
|
|
|
|
///////////////////////////
|
|
// floating-toolbar.cjsx //
|
|
///////////////////////////
|
|
.floating-toolbar {
|
|
z-index: 10;
|
|
position: absolute;
|
|
background: @background-tertiary;
|
|
border-radius: @border-radius-base;
|
|
color: @text-color-inverse;
|
|
box-shadow: 0 0 8px rgba(0,0,0,0.4);
|
|
|
|
.toolbar-pointer {
|
|
content: " ";
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
top: -13px;
|
|
left: 50%;
|
|
margin-left: -6px;
|
|
border: 7px solid transparent;
|
|
border-bottom-color: @background-tertiary;
|
|
border-bottom-width: 6px;
|
|
}
|
|
|
|
.floating-toolbar-input {
|
|
display: inline;
|
|
width: auto;
|
|
color: @text-color-inverse;
|
|
}
|
|
|
|
@padding: 0.5em;
|
|
.btn {
|
|
background: transparent;
|
|
font-size: 16px;
|
|
height: auto;
|
|
border-radius: 0;
|
|
padding: @padding*0.75 @padding;
|
|
margin: 0;
|
|
color: @text-color-inverse;
|
|
box-shadow: none;
|
|
&:first-child {
|
|
padding-left: 1.5*@padding;
|
|
}
|
|
&:last-child {
|
|
padding-right: 1.5*@padding;
|
|
}
|
|
&:hover, &:active {
|
|
color: lighten(@text-color-link, 10%);
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
.preview-btn-icon {
|
|
position: relative;
|
|
top: 1px;
|
|
padding: 0 @padding;
|
|
}
|
|
}
|