mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-21 15:56:10 +08:00
6b270734ef
Summary: Only applies to the main window. Will be applied to secondary windows like the composer when design decides whether that window will have a toolbar. (white or gray at the top?) Test Plan: Run tests Reviewers: evan Reviewed By: evan Differential Revision: https://review.inboxapp.com/D1298
246 lines
4.7 KiB
Plaintext
246 lines
4.7 KiB
Plaintext
@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:100%;
|
|
transition: left .20s ease-out;
|
|
}
|
|
|
|
.sheet-stack-enter.sheet-stack-enter-active {
|
|
left:0;
|
|
}
|
|
|
|
.sheet-stack-leave {
|
|
left:0;
|
|
transition: left .20s ease-in;
|
|
}
|
|
|
|
.sheet-stack-leave.sheet-stack-leave-active {
|
|
left:100%;
|
|
}
|
|
|
|
.sheet-title-bar {
|
|
height:24px;
|
|
line-height: 24px;
|
|
cursor: default;
|
|
background: @toolbar-background-color;
|
|
-webkit-app-region: drag;
|
|
padding: 3px;
|
|
padding-left:@spacing-half;
|
|
padding-right:60px;
|
|
text-align: center;
|
|
|
|
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 {
|
|
.sheet-title-bar {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
body.is-blurred {
|
|
.sheet-title-bar {
|
|
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;
|
|
|
|
// 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;
|
|
}
|
|
|
|
.btn-toolbar {
|
|
margin-top: @spacing-half;
|
|
margin-left: @spacing-three-quarters;
|
|
height:32px;
|
|
}
|
|
}
|
|
|
|
.sheet-toolbar-enter {
|
|
opacity:0;
|
|
transition: opacity .20s ease-out;
|
|
}
|
|
|
|
.sheet-toolbar-enter.sheet-toolbar-enter-active {
|
|
opacity:1;
|
|
}
|
|
|
|
.sheet-toolbar-leave {
|
|
opacity:1;
|
|
transition: opacity .20s ease-in;
|
|
}
|
|
|
|
.sheet-toolbar-leave.sheet-toolbar-leave-active {
|
|
opacity:0;
|
|
}
|
|
|
|
.sheet-edge {
|
|
height:100%;
|
|
z-index: @zindex-popover;
|
|
position: absolute;
|
|
|
|
.x {
|
|
position: absolute;
|
|
top: @spacing-standard * 1.5;
|
|
left: @spacing-standard * 1.5;
|
|
}
|
|
.gradient {
|
|
width:9px;
|
|
height:100%;
|
|
background-color: #f4f4f4;
|
|
background-image: -webkit-gradient(linear, left center, right center, from(rgb(244, 244, 244)), to(rgb(209, 209, 209)));
|
|
background-image: -webkit-linear-gradient(left, rgb(244, 244, 244), rgb(209, 209, 209));
|
|
background-image: -moz-linear-gradient(left, rgb(244, 244, 244), rgb(209, 209, 209));
|
|
background-image: -o-linear-gradient(left, rgb(244, 244, 244), rgb(209, 209, 209));
|
|
background-image: -ms-linear-gradient(left, rgb(244, 244, 244), rgb(209, 209, 209));
|
|
background-image: linear-gradient(left, rgb(244, 244, 244), rgb(209, 209, 209));
|
|
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#f4f4f4', EndColorStr='#d1d1d1');
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
} |