Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2025-01-01 13:14:16 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1731 from jamiewilson/darkside

Browse source 
(darkside) using new toolbar selectors, svgs, etc
This commit is contained in:
Jackie Luo 2016-03-14 18:50:43 -07:00
commit 492ae69abe
4 changed files with 97 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
internal_packages/ui-darkside/README.md
View file

@ -1,3 +1,6 @@
## [Important Notice](https://github.com/nylas/N1/releases/tag/0.4.14)
## Darkside will now come bundled with N1. New manual installation and activation instructions coming soon.
# Darkside
A customizable, dark sidebar theme for [Nylas N1](https://nylas.com/n1).

133
internal_packages/ui-darkside/styles/darkside.less
View file

@ -32,14 +32,14 @@
@sidebar-text: desaturate(lighten(@sidebar, 40%), 75%);
@active-sidebar-text: #FFFFFF;
@border-color: fade(@sidebar, 10%);
@close: #FF5F56;
@danger: #FF5F56;
@minimize: #FBD852;
@maximize: #8DD07D;
@swipe-archive: #8DD07D;
@swipe-snooze: #FBD852;
@invalid: @close;
@swipe-trash: @danger;
@invalid: @danger;
@message-width: 700px;
@sidebar-margin: 15px;
//====================================================
@ -49,7 +49,7 @@
// Make sidebar and corresponding toolbar match
.column-RootSidebar,
.account-sidebar,
.sheet-toolbar-container > div:nth-child(1) {
.toolbar-RootSidebar {
height: 100%;
background-color: @sidebar;
// If NOT Retina display, subpixel-antialias fonts instead
@ -78,12 +78,6 @@
// Window Controls
//====================================================
// Match alignment for toolbar above sidebar
.sheet-toolbar-container > div:nth-child(1) {
padding-left: @sidebar-margin;
padding-right: @sidebar-margin;
}
.toolbar-window-controls {
display: flex;
align-items: center;
@ -115,7 +109,7 @@
}
.toolbar-window-controls .close {
background-color: @close;
background-color: @danger;
background-image: none;
}
@ -172,7 +166,7 @@
// Down arrow icon
.account-switcher {
height: 16px;
height: 14px;
width: 16px;
top: 0;
right: 0;
@ -195,7 +189,7 @@
background-image: none;
background-color: @sidebar-text;
-webkit-mask-repeat: no-repeat;
-webkit-mask-image: url(../static/images/ui-darkside/down-arrow.svg);
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path fill="#FFF" d="M0 0h1l4 4 4-4h1v1L5 6 0 1z"/></svg>');
}
.account-sidebar .item,
@ -332,7 +326,7 @@
// Make corresponding toolbar match threadlist background
.column-ThreadList,
.sheet-toolbar-container > div:nth-child(2) {
.toolbar-ThreadList {
height: 100%;
background: @threadlist-bg;
border-bottom: 1px solid @border-color;
@ -474,7 +468,9 @@ body.is-blurred .list-tabular .list-tabular-item.keyboard-cursor {
// Swiping
//====================================================
.thread-list .swipe-backing.swipe-all,
.thread-list .swipe-backing.swipe-archive,
.draft-list .swipe-backing.swipe-all,
.draft-list .swipe-backing.swipe-archive {
background: @swipe-archive;
&.confirmed {
@ -490,6 +486,14 @@ body.is-blurred .list-tabular .list-tabular-item.keyboard-cursor {
}
}
.thread-list .swipe-backing.swipe-trash,
.draft-list .swipe-backing.swipe-trash {
background: @swipe-trash;
&.confirmed {
background: saturate(@swipe-trash, 10%);
}
}
//====================================================
// Mail Labels
//====================================================
@ -513,26 +517,58 @@ body.is-blurred .list-tabular .list-tabular-item.keyboard-cursor {
// Make toolbars match panels
.column-MessageList,
.sheet-toolbar-container > div:nth-child(3),
.toolbar-MessageList,
.column-MessageListSidebar,
.sheet-toolbar-container > div:nth-child(4) {
.toolbar-MessageListSidebar {
height: 100%;
background: @messagelist-bg;
border-left: 1px solid @border-color;
}
// Reducing width of message since the font size was reduced
#message-list .message-subject-wrap,
#message-list .message-item-wrap,
#message-list .footer-reply-area-wrap,
#message-list .minified-bundle .msg-lines,
#message-list .message-list-headers {
max-width: @message-width;
// Message List top and bottom spacing
#message-list .messages-wrap .scroll-region-content-inner {
padding-top: 20px;
padding-bottom: 40vh;
}
#message-list .message-item-wrap {
margin-bottom: 12px;
padding-bottom: 0;
// Reset padding
#message-list .message-header,
#message-list .message-item-wrap.collapsed .message-item-white-wrap,
#message-list .message-item-wrap.collapsed .message-item-area {
padding: 0;
}
// Make padding uniform
#message-list .message-item-area,
#message-list .footer-reply-area-wrap .footer-reply-area {
padding: 20px !important;
}
// Adjusting position of thread participants toggle
#message-list .header-toggle-control {
top: 6px !important;
left: -11px !important;
display: flex !important;
justify-content: center;
align-items: center;
}
// Reducing size and overriding invalid -webkit-mask-repeat- property
#message-list .header-toggle-control img {
zoom: 0.35 !important;
-webkit-mask-repeat: no-repeat !important;
}
.message-participants.to-participants .collapsed-participants,
.message-participants .expanded-participants .participant-type {
margin-top: 0;
}
.message-participants .from-label,
.message-participants .to-label,
.message-participants .cc-label,
.message-participants .bcc-label {
margin-right: 6px;
}
#message-list .message-item-wrap .message-item-white-wrap,
@ -550,10 +586,12 @@ body.is-blurred .list-tabular .list-tabular-item.keyboard-cursor {
margin-top: 0;
}
// Collapsed Messages Pill Label
#message-list .minified-bundle .num-messages {
padding: 3px;
}
// remove margin for last message before reply
#message-list .message-item-wrap.before-reply-area {
margin-bottom: 0;
}
@ -563,6 +601,7 @@ body.is-blurred .list-tabular .list-tabular-item.keyboard-cursor {
box-shadow: 0 0 0 1px @accent;
}
// Darken composer action bar to contrast from background
.composer-inner-wrap .composer-action-bar-wrap,
.composer-full-window .composer-inner-wrap .composer-action-bar-wrap {
background: darken(@messagelist-bg, 1%);
@ -615,10 +654,16 @@ body.is-blurred .list-tabular .list-tabular-item.keyboard-cursor {
//====================================================
// Make corresponding toolbar match threadlist background
.draft-list {
.draft-list,
.toolbar-DraftList {
background: @messagelist-bg;
}
.draft-list .list-container .list-item.selected,
.draft-list .list-tabular .list-tabular-item.keyboard-cursor {
background: white;
}
.draft-list .list-tabular .list-tabular-item .checkmark .inner {
background-color: white;
border-color: tint(@sidebar, 75%);
@ -626,7 +671,7 @@ body.is-blurred .list-tabular .list-tabular-item.keyboard-cursor {
.list-tabular .list-tabular-item.selected .checkmark .inner {
background-color: @accent;
background-image: url(../static/images/ui-darkside/checkmark.svg);
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="6" viewBox="0 0 8 6"><path fill="#FFF" d="M7 0h1v1L3 6 0 3V2h1l2 2z"/></svg>');
background-size: 8px 6px;
}
@ -683,21 +728,30 @@ body.is-blurred .list-tabular .list-tabular-item.keyboard-cursor {
right: 0;
border-left: none;
border-right: none;
background: none;
}
// Match left and right alignment across all toolbars
.toolbar-RootSidebar,
.toolbar-MessageList,
.toolbar-MessageListSidebar,
.toolbar-Center,
.toolbar-Preferences {
height: 100%;
padding-left: @sidebar-margin;
padding-right: @sidebar-margin;
}
// Slightly darker toolbar for Prefs, Single Panel Messages, and Popout
.toolbar-Preferences,
.layout-mode-list .toolbar-MessageList,
.sheet-toolbar-container.mode-popout {
// mode-list toolbar
// [data-reactid=".1.0.1.$=1$1=02Thread=02toolbar"] [data-column='0'],
// Preferences toolbar
// [data-reactid=".1.0.1.$=1$1=02Preferences=02toolbar"] [data-column='0'] {
background-image: none;
background-color: tint(@sidebar, 90%);
}
.sheet-toolbar-container.mode-popout > div:nth-child(1) {
background: transparent;
background-color: tint(@sidebar, 90%);
border: none;
}
// jackiehluo -> (themes): Fixes Windows button UI issues in #1649
body.platform-win32 .sheet-toolbar-container .btn-toolbar:hover {
background: none;
}
@ -717,8 +771,9 @@ body.platform-win32 .sheet-toolbar-container .btn-toolbar:hover {
box-shadow: 0 0 0 1px @border-color;
}
.sheet-toolbar .message-toolbar-items {
margin-right: 11.25px;
// Let toolbar define outer padding/margin
.sheet-toolbar .btn-toolbar:only-of-type {
margin-right: 0;
}
.btn-toolbar.mode-toggle.mode-false img.content-mask {

1
static/images/ui-darkside/checkmark.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="6" viewBox="0 0 8 6"><path fill="#FFF" d="M7 0h1v1L3 6 0 3V2h1l2 2z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 135 B

1
static/images/ui-darkside/down-arrow.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path fill="#FFF" d="M0 0h1l4 4 4-4h1v1L5 6 0 1z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 138 B