mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 16:26:08 +08:00
b0f93dc52c
React-dnd is a nice library but it assumes it's going to be the only thing managing your drag and drop in the entire app. It also hides the underlying dataTransfer object so it's difficult to implement native drag and drop behaviors other than for Files and Urls, which they special-case. Implementing it manually really isn't hard, and we can do things like attach a text/plain version of contact data to the contact drag. Fixes T2054
488 lines
10 KiB
Plaintext
488 lines
10 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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-items.hidden {
|
|
opacity: 0;
|
|
}
|
|
|
|
.message-toolbar-arrow.down {
|
|
order:101;
|
|
margin-right: 0;
|
|
padding-top:6px;
|
|
}
|
|
.message-toolbar-arrow.up {
|
|
order:102;
|
|
padding-top:6px;
|
|
// <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;
|
|
}
|
|
}
|
|
|
|
#message-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 100%;
|
|
padding: 0;
|
|
order: 2;
|
|
|
|
.message-subject-wrap {
|
|
width: calc(~"100% - 12px");
|
|
max-width: @message-max-width;
|
|
margin: 11px auto 10px auto;
|
|
padding: 0 20px;
|
|
-webkit-user-select: text;
|
|
}
|
|
.message-subject {
|
|
font-size: @font-size-large;
|
|
}
|
|
.message-count {
|
|
float: right;
|
|
font-size: @font-size-small;
|
|
color: @text-color-very-subtle;
|
|
}
|
|
|
|
.message-list-headers {
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
max-width: @message-max-width;
|
|
display:block;
|
|
|
|
.participants {
|
|
.contact-chip {
|
|
display:inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.message-list-notification-bars {
|
|
display:block;
|
|
}
|
|
|
|
.messages-wrap {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
opacity:0;
|
|
transition: opacity 0s;
|
|
background: @background-secondary;
|
|
}
|
|
.messages-wrap.ready {
|
|
opacity:1;
|
|
transition: opacity .1s linear;
|
|
}
|
|
|
|
.minified-bundle + .message-item-wrap {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.message-item-wrap {
|
|
|
|
transition: height 0.1s;
|
|
position: relative;
|
|
|
|
max-width: @message-max-width;
|
|
width: calc(~"100% - 12px");
|
|
|
|
margin: @message-spacing auto;
|
|
padding: 0;
|
|
|
|
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;
|
|
|
|
&:first-child { padding-top: 0; }
|
|
|
|
&.before-reply-area { margin-bottom: 0; }
|
|
|
|
&.collapsed {
|
|
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;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.collapsed-participants {
|
|
padding: 10px 10px 10px 0;
|
|
}
|
|
|
|
.message-item-divider {
|
|
border:0; // remove default hr border left, right
|
|
border-top: 2px solid @border-secondary-bg;
|
|
height: 3px;
|
|
background: @background-secondary;
|
|
border-bottom: 1px solid @border-primary-bg;
|
|
margin: 0;
|
|
|
|
&.collapsed {
|
|
height: 0;
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.minified-bundle {
|
|
margin-right: @message-spacing;
|
|
margin-left: @message-spacing;
|
|
position: relative;
|
|
.num-messages {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-left: -80px;
|
|
margin-top: -12px;
|
|
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%;
|
|
}
|
|
.msg-line {
|
|
border-radius: 4px 4px 0 0;
|
|
position: relative;
|
|
border-top: 1px solid @border-color-divider;
|
|
border-right: 1px solid @border-color-divider;
|
|
border-left: 1px solid @border-color-divider;
|
|
background-color: darken(@background-primary, 2%);
|
|
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
|
|
}
|
|
}
|
|
|
|
.message-header {
|
|
position: relative;
|
|
font-size: @font-size-small;
|
|
padding-bottom: @spacing-standard;
|
|
padding-top: 19px;
|
|
|
|
.message-actions-wrap {
|
|
text-align: right;
|
|
}
|
|
|
|
.message-actions-ellipsis {
|
|
display: inline-block;
|
|
}
|
|
|
|
.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: 5px;
|
|
z-index: 2; position: relative;
|
|
display: inline-block;
|
|
min-width: 125px;
|
|
}
|
|
.msg-actions-tooltip {
|
|
display: inline-block;
|
|
margin-left: 1em;
|
|
}
|
|
.message-participants { z-index: 1; position: relative; }
|
|
|
|
.message-time, .message-indicator {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
|
|
.message-header-right {
|
|
z-index: 4;
|
|
position: relative;
|
|
float: right;
|
|
text-align: right;
|
|
display: flex;
|
|
}
|
|
|
|
}
|
|
|
|
.message-item-area {
|
|
width: 100%;
|
|
max-width: @message-max-width;
|
|
margin: 0 auto;
|
|
padding: 0 20px @spacing-standard 20px;
|
|
|
|
iframe {
|
|
width: 100%;
|
|
border: 0;
|
|
padding: 0;
|
|
margin-top: @spacing-sub-double;
|
|
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 {
|
|
width: calc(~"100% - 12px");
|
|
max-width: @message-max-width;
|
|
margin: -3px auto @spacing-double 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: 20px @spacing-double;
|
|
}
|
|
.reply-text {
|
|
display: inline-block;
|
|
margin-left: 0.5em;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
}
|
|
|
|
}
|
|
.attachments-area {
|
|
padding-top: @spacing-standard;
|
|
|
|
// 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 //
|
|
///////////////////////////////
|
|
.message-participants {
|
|
|
|
&.collapsed:hover {cursor: default;}
|
|
|
|
.from-contact {
|
|
font-weight: @headings-font-weight;
|
|
color: @text-color;
|
|
}
|
|
.from-label, .to-label, .cc-label, .bcc-label, .subject-label {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
.to-label, .cc-label, .bcc-label, .subject-label { margin-left: @spacing-standard; }
|
|
.to-contact, .cc-contact, .to-everyone {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
|
|
.expanded-participants {
|
|
position: relative;
|
|
padding-right: 1.2em;
|
|
|
|
.participant {
|
|
display: inline-block;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.participant-type {
|
|
margin-top: 0.5em;
|
|
&:first-child {margin-top: 0;}
|
|
}
|
|
|
|
.from-label, .to-label, .cc-label, .bcc-label, .subject-label {
|
|
float: left;
|
|
display: block;
|
|
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;
|
|
}
|
|
.participant-secondary {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
.from-contact {
|
|
.participant-primary {
|
|
color: @text-color;
|
|
}
|
|
.participant-secondary {
|
|
color: @text-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
///////////////////////////////
|
|
// sidebar-thread-participants.cjsx //
|
|
///////////////////////////////
|
|
.sidebar-thread-participants {
|
|
padding: @spacing-standard;
|
|
cursor: default;
|
|
|
|
.other-contact {
|
|
color: @text-color-subtle;
|
|
font-size: @font-size-smaller;
|
|
&.selected {
|
|
font-weight: @font-weight-semi-bold;
|
|
}
|
|
}
|
|
|
|
// TODO: DRY
|
|
h2.sidebar-h2 {
|
|
font-size: 11px;
|
|
font-weight: @font-weight-semi-bold;
|
|
text-transform: uppercase;
|
|
color: @text-color-very-subtle;
|
|
border-bottom: 1px solid @border-color-divider;
|
|
margin: 2em 0 1em 0;
|
|
}
|
|
}
|
|
|
|
.column-MessageListSidebar {
|
|
background-color: @background-off-primary;
|
|
overflow: auto;
|
|
border-left: 1px solid @border-color-divider;
|
|
.flexbox-handle-horizontal div {
|
|
border-right: 0;
|
|
width: 1px;
|
|
}
|
|
}
|