mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-03-16 10:13:34 +08:00
Summary: Now all elements by default have selection set to inherit with the root level body object set to no selection. This makes everything (except input elements) not selectable by default. You can explicitly set the css class or use the new `.selectable` class. Test Plan: edgehill --test Reviewers: bengotow Reviewed By: bengotow Differential Revision: https://review.inboxapp.com/D1355
233 lines
4 KiB
Text
233 lines
4 KiB
Text
@import "ui-variables";
|
|
@import "ui-mixins";
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
font-family: @font-family;
|
|
font-size: @font-size;
|
|
line-height: @line-height-base;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
atom-workspace {
|
|
display: block;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
font-family: @font-family;
|
|
|
|
atom-workspace-axis.horizontal {
|
|
display: -webkit-flex;
|
|
height: 100%;
|
|
}
|
|
|
|
atom-workspace-axis.vertical {
|
|
display: -webkit-flex;
|
|
-webkit-flex: 1;
|
|
-webkit-flex-flow: column;
|
|
}
|
|
}
|
|
|
|
.sheet-container {
|
|
height:100%;
|
|
}
|
|
|
|
.sheet-stack-enter {
|
|
left:30px;
|
|
opacity: 0;
|
|
transition: all .125s ease-out;
|
|
}
|
|
|
|
.sheet-stack-enter.sheet-stack-enter-active {
|
|
left:0;
|
|
opacity: 1;
|
|
}
|
|
|
|
.sheet-stack-leave {
|
|
left:0;
|
|
opacity: 1;
|
|
transition: all .125s ease-in;
|
|
}
|
|
|
|
.sheet-stack-leave.sheet-stack-leave-active {
|
|
left:30px;
|
|
opacity: 0;
|
|
}
|
|
|
|
.toolbar-window-controls {
|
|
margin-top:14px;
|
|
margin-left:@spacing-half;
|
|
order: -1000;
|
|
min-width: 72px;
|
|
width: 72px;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
|
|
button {
|
|
-webkit-app-region: no-drag;
|
|
display:inline-block;
|
|
padding:0;
|
|
width:13px;
|
|
height:13px;
|
|
margin:4px;
|
|
border-radius: 13px;
|
|
border: 1px solid rgba(0,0,0,0.2);
|
|
float:left;
|
|
}
|
|
.close {
|
|
background-color: #FB0015;
|
|
&:hover {
|
|
background-color: darken(#FB0015, 10%);
|
|
}
|
|
&:active {
|
|
background-color: darken(#FB0015, 20%);
|
|
}
|
|
}
|
|
.minimize {
|
|
background-color: #FCB40A;
|
|
&:hover {
|
|
background-color: darken(#FCB40A, 10%);
|
|
}
|
|
&:active {
|
|
background-color: darken(#FCB40A, 20%);
|
|
}
|
|
}
|
|
.maximize {
|
|
background-color: #0AAF00;
|
|
&:hover {
|
|
background-color: darken(#0AAF00, 10%);
|
|
}
|
|
&:active {
|
|
background-color: darken(#0AAF00, 20%);
|
|
}
|
|
}
|
|
}
|
|
|
|
body.platform-win32, body.platform-linux {
|
|
.toolbar-window-controls {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
body.is-blurred {
|
|
.toolbar-window-controls {
|
|
button {
|
|
background-color: desaturate(fade(#FCB40A, 20%), 100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.sheet-toolbar {
|
|
position: relative;
|
|
-webkit-app-region: drag;
|
|
background: @toolbar-background-color;
|
|
border-bottom: 1px solid @border-color-divider;
|
|
width: 100%;
|
|
height: 50px;
|
|
|
|
box-shadow: 0 0 6px rgba(0,0,0,0.09);
|
|
|
|
// prevent flexbox from ever, ever resizing toolbars, no matter
|
|
// how much it thinks other content is being squished
|
|
min-height: 50px;
|
|
max-height: 50px;
|
|
|
|
// cover up the vertical resizing separators, so the toolbar appears
|
|
// to be one continuous bar.
|
|
z-index: 10;
|
|
|
|
.item-container > * {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
.item-spacer {
|
|
-webkit-app-region: drag;
|
|
}
|
|
.item-back {
|
|
order:-999;
|
|
padding-top: 5px;
|
|
padding-left: @spacing-three-quarters;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.btn-toolbar {
|
|
margin-top: @spacing-half;
|
|
margin-left: @spacing-three-quarters;
|
|
height:32px;
|
|
}
|
|
}
|
|
|
|
.sheet-toolbar-enter {
|
|
opacity:0;
|
|
transition: opacity .125s ease-out;
|
|
}
|
|
|
|
.sheet-toolbar-enter.sheet-toolbar-enter-active {
|
|
opacity:1;
|
|
}
|
|
|
|
.sheet-toolbar-leave {
|
|
opacity:1;
|
|
transition: opacity .125s ease-in;
|
|
}
|
|
|
|
.sheet-toolbar-leave.sheet-toolbar-leave-active {
|
|
opacity:0;
|
|
}
|
|
|
|
.flexbox-handle-horizontal {
|
|
width: 6px;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
position: absolute;
|
|
cursor: col-resize;
|
|
div {
|
|
height:100%;
|
|
border-right: 1px solid @border-color-divider;
|
|
}
|
|
|
|
&.flexbox-handle-right {
|
|
right:-3px;
|
|
padding-right:3px;
|
|
}
|
|
&.flexbox-handle-left {
|
|
left:-3px;
|
|
padding-right:2px;
|
|
}
|
|
}
|
|
|
|
.flexbox-handle-vertical {
|
|
width:100%;
|
|
height:6px;
|
|
left:0;
|
|
right:0;
|
|
z-index:2;
|
|
position:absolute;
|
|
cursor: row-resize;
|
|
div {
|
|
width:100%;
|
|
// border-top: 1px solid @border-color-divider;
|
|
}
|
|
&.flexbox-handle-top {
|
|
top:-3px;
|
|
padding-right:3px;
|
|
}
|
|
&.flexbox-handle-bottom {
|
|
bottom: 0;
|
|
padding-right:2px;
|
|
}
|
|
}
|
|
|
|
|
|
body.platform-win32 {
|
|
.flexbox-handle-vertical {
|
|
cursor:ns-resize;
|
|
}
|
|
.flexbox-handle-horizontal {
|
|
cursor:ew-resize;
|
|
}
|
|
}
|