mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 16:26:08 +08:00
a5f05f52fd
Previously, we were adding 160px of padding to the entire To field. Now the buttons in the top right are floating inside the container and only impact the first line of participants. I also stripped out a lot of zIndex rules on the participant fields, subject, body that I think were only necessary because "once you've started adding zindexes you need them everywhere". Also changed the hover state of the buttons to be consistent.
395 lines
8.7 KiB
Plaintext
395 lines
8.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: 150px;
|
|
|
|
.composer-inner-wrap {
|
|
position: relative;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.composer-drop-cover {
|
|
position: absolute;
|
|
top: 0; right: 0; bottom: 0; left: 0;
|
|
z-index: 1000;
|
|
background: rgba(255,255,255,0.7);
|
|
border-radius: @border-radius-base;
|
|
border: 4px dashed lighten(@gray, 30%);
|
|
text-align: center;
|
|
line-height:2.3em;
|
|
|
|
.centered {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: lighten(@gray, 20%);
|
|
font-weight: 500;
|
|
font-size:1.1em;
|
|
img { margin: auto; display:block; margin-bottom:20px; background-color: lighten(@gray, 20%); }
|
|
}
|
|
}
|
|
|
|
.composer-action-bar-wrap {
|
|
position: relative;
|
|
width: 100%;
|
|
background: transparent;
|
|
border-bottom: 0;
|
|
|
|
.btn {
|
|
// Yes, 4px taller than in the rest of the app: https://phab.nylas.com/T2418
|
|
height:28px;
|
|
}
|
|
.composer-action-bar-content {
|
|
display:flex;
|
|
margin: 0 auto;
|
|
flex-direction:row;
|
|
max-width: @compose-width;
|
|
padding: @spacing-standard;
|
|
|
|
> * {
|
|
margin-left: @spacing-standard / 2;
|
|
margin-right: @spacing-standard / 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.composer-content-wrap {
|
|
padding: 0;
|
|
flex: 1;
|
|
display: flex;
|
|
position: relative;
|
|
flex-flow: column;
|
|
}
|
|
|
|
.composer-centered {
|
|
display:flex;
|
|
position: relative;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
width: 100%;
|
|
max-width: @compose-width;
|
|
margin: 0 auto;
|
|
margin-top:@spacing-standard;
|
|
}
|
|
.text-actions {
|
|
text-align: right;
|
|
line-height: 1.4;
|
|
position: relative;
|
|
top: -3px;
|
|
}
|
|
|
|
.header-action {
|
|
color: @text-color-very-subtle;
|
|
img.content-mask { background-color: @text-color-very-subtle; }
|
|
font-size: @font-size-small;
|
|
padding-left: 1em;
|
|
&:hover {
|
|
color: @text-color-link;
|
|
img.content-mask { background-color: @text-color-link; }
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
.composer-participant-actions {
|
|
position: relative;
|
|
float: right;
|
|
z-index: 2;
|
|
cursor: default;
|
|
padding-right: @spacing-standard + @spacing-half;
|
|
padding-left: @spacing-standard;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
input, textarea, div[contenteditable] {
|
|
color: @text-color;
|
|
position: relative;
|
|
display: block;
|
|
background: inherit;
|
|
width: 100%;
|
|
resize: none;
|
|
border: none;
|
|
}
|
|
|
|
.compose-subject-wrap {
|
|
position: relative;
|
|
margin: 0 23px;
|
|
border-bottom: 1px solid @border-color-divider;
|
|
flex-shrink:0;
|
|
|
|
.subject-label {
|
|
color: @text-color-very-subtle;
|
|
float: left;
|
|
padding-top: 6px;
|
|
display: block;
|
|
}
|
|
|
|
input {
|
|
display: inline-block;
|
|
padding: 13px 0 9px 0;
|
|
margin: 0 0 0 5px;
|
|
min-width: 5em;
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
input {
|
|
&::-webkit-input-placeholder {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.compose-body-scroll {
|
|
position:initial;
|
|
}
|
|
|
|
.compose-body {
|
|
flex: 1;
|
|
cursor: text;
|
|
overflow: auto;
|
|
position: relative;
|
|
margin: 0 8px;
|
|
|
|
.quoted-text-control {
|
|
margin: @spacing-standard;
|
|
margin-top:0;
|
|
}
|
|
|
|
div[contenteditable] {
|
|
font-size: @font-size;
|
|
line-height: 1.4;
|
|
min-height: @compose-min-height;
|
|
padding: @spacing-standard;
|
|
padding-top: 20px;
|
|
padding-bottom: 0;
|
|
margin-bottom: 30px;
|
|
}
|
|
.contenteditable-container {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.composer-footer-region {
|
|
cursor: default;
|
|
&:hover {
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
// TODO FIXME DRY From stylesheets/message-list.less
|
|
.attachments-area {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
// 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: #fcfcfc;
|
|
border-top: 1px solid #eaeaea;
|
|
box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
|
|
}
|
|
|
|
.composer-action-bar-content {
|
|
padding: 8px 0.5px;
|
|
}
|
|
|
|
.compose-body {
|
|
margin-bottom: 0;
|
|
position: relative;
|
|
|
|
.contenteditable-container {
|
|
flex: 1;
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
div[contenteditable] {
|
|
height: auto;
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.compose-body {
|
|
div[contenteditable] {
|
|
min-height: @line-height-computed;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Overrides for the composer in a message-list
|
|
#message-list {
|
|
.message-item-wrap {
|
|
.message-item-white-wrap.composer-outer-wrap.focused {
|
|
box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.28), 0 1px 1.5px rgba(0, 0, 0, 0.08), 0 0 3px @accent-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
//////////////////////////////////
|
|
// participants-text-field.cjsx //
|
|
//////////////////////////////////
|
|
.participants-text-field {
|
|
position: relative;
|
|
padding: 5px @spacing-standard 0 @spacing-standard;
|
|
margin: 0 8px;
|
|
flex-shrink: 0;
|
|
|
|
.participant {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
|
|
.participant-primary {
|
|
font-weight: @font-weight-semi-bold;
|
|
}
|
|
.participant-secondary {
|
|
color: @text-color-very-subtle;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
///////////////////////////
|
|
// floating-toolbar.cjsx //
|
|
///////////////////////////
|
|
.floating-toolbar {
|
|
z-index: 10;
|
|
position: absolute;
|
|
|
|
background: #fff;
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.19), inset 0 0 1px rgba(0,0,0,0.5);
|
|
border-radius: @border-radius-base;
|
|
color: @text-color;
|
|
|
|
transition-duration: .15s;
|
|
transition-property: opacity, margin;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
margin-top: 3px;
|
|
|
|
&.toolbar-visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.toolbar-pointer {
|
|
position: absolute;
|
|
width: 22.5px;
|
|
height: 10px;
|
|
background: transparent url('images/tooltip/tooltip-bg-pointer@2x.png') no-repeat;
|
|
background-size: 22.5px 10.5px;
|
|
margin-left: -11.2px;
|
|
}
|
|
|
|
&.above {
|
|
.toolbar-pointer {
|
|
transform: rotate(0deg);
|
|
bottom: -9px;
|
|
}
|
|
}
|
|
&.below {
|
|
.toolbar-pointer {
|
|
transform: rotate(180deg);
|
|
top: -9px;
|
|
}
|
|
}
|
|
|
|
.floating-toolbar-input {
|
|
display: inline;
|
|
// The hardcoded numbers here represent the widths of the various
|
|
// icons and buttons that surround the input. They are hardcoded here
|
|
// because CSS does the calculation for us that we'd otherwise have to
|
|
// do in React before the element renders to the page.
|
|
width: calc(~"100% - 62px");
|
|
&.with-remove {
|
|
width: calc(~"100% - 95px");
|
|
}
|
|
color: @text-color;
|
|
}
|
|
|
|
@padding: 0.5em;
|
|
.btn {
|
|
background: transparent;
|
|
font-size: 16px;
|
|
height: auto;
|
|
border-radius: 0;
|
|
padding: @padding*0.75 @padding;
|
|
margin: 0;
|
|
color: @text-color;
|
|
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;
|
|
}
|
|
|
|
.toolbar-btn {
|
|
@padding-top: 4px;
|
|
@padding-left: 8px;
|
|
|
|
width: 12.5px + 2*@padding-left;
|
|
height: 12.5px + 2*@padding-top;
|
|
margin: 7.5px 0;
|
|
box-shadow: none;
|
|
border: 0;
|
|
border-right: 1px solid @border-color-divider;
|
|
&:last-child { border-right: 0 }
|
|
|
|
background: no-repeat;
|
|
background-size: 12.5px 12.5px;
|
|
background-position: @padding-left @padding-top;
|
|
&.btn-bold { background-image: url("images/composer/tooltip-bold-black@2x.png") }
|
|
&.btn-italic { background-image: url("images/composer/tooltip-italic-black@2x.png") }
|
|
&.btn-underline { background-image: url("images/composer/tooltip-underline-black@2x.png") }
|
|
&.btn-link { background-image: url("images/composer/tooltip-link-black@2x.png") }
|
|
&:hover {
|
|
cursor: pointer;
|
|
background: no-repeat;
|
|
background-size: 12.5px 12.5px;
|
|
background-position: @padding-left @padding-top;
|
|
&.btn-bold { background-image: url("images/composer/tooltip-bold-blue@2x.png") }
|
|
&.btn-italic { background-image: url("images/composer/tooltip-italic-blue@2x.png") }
|
|
&.btn-underline { background-image: url("images/composer/tooltip-underline-blue@2x.png") }
|
|
&.btn-link { background-image: url("images/composer/tooltip-link-blue@2x.png") }
|
|
}
|
|
}
|
|
}
|