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

fix(ui-dark): Small color adjustments, resolves #299, #148

Browse source
This commit is contained in:
Ben Gotow 2015-11-09 18:52:24 -08:00
parent 04be333f3f
commit 7d7ba4fbba
10 changed files with 24 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
internal_packages/attachments/stylesheets/attachments.less
View file

@ -13,6 +13,7 @@
.inner {
border-radius: 4px;
color: @text-color;
background: @background-off-primary;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09);
padding: 13px @spacing-standard 13px @spacing-standard;

2
internal_packages/inbox-contact-elements/stylesheets/inbox-participants.less
View file

@ -17,7 +17,7 @@
.contact-chip.clickable:hover {
cursor: pointer;
border-radius: 9px;
background: darken(@background-color-secondary, 10%);
background: darken(@background-secondary, 10%);
}
.contact-chip:not(:last-child) {

1
internal_packages/message-list/stylesheets/message-list.less
View file

@ -609,6 +609,7 @@ body.platform-win32 {
background-color: @background-off-primary;
overflow: auto;
border-left: 1px solid @border-color-divider;
color: @text-color-subtle;
.flexbox-handle-horizontal div {
border-right: 0;
width: 1px;

1
internal_packages/search-bar/stylesheets/search-bar.less
View file

@ -39,7 +39,6 @@
width: 100%;
box-shadow: @standard-shadow;
background-color: @menu-color;
.item {
overflow: hidden;

13
internal_packages/ui-dark/styles/ui-variables.less
View file

@ -6,16 +6,15 @@
@gray-lighter: darken(@gray-base, 92.5%); // #eee
@white: #0a0b0c;
@background-off-primary: #333;
@background-secondary: #2D2D2D;
@background-primary: #313131;
@background-off-primary: #282828;
@background-secondary: #222;
@background-tertiary: #6d7987;
@background-primary: #313131;
@background-color: darken(#313131, 15%);
@btn-default-bg-color: #404040;
@dropdown-default-bg-color: #404040;
@accent-primary: lighten(#5AA8FA, 20%);
@accent-primary-dark: lighten(#3087E1, 20%);
@accent-primary: #5AA8FA;
@accent-primary-dark: lighten(#3087E1, 10%);
@text-color: #C2C2C2;
@text-color-subtle: fadeout(@text-color, 20%);
@ -40,7 +39,7 @@
@toolbar-background-color: @background-secondary;
.thread-icon:not(.thread-icon-unread) {
.thread-icon:not(.thread-icon-unread):not(.thread-icon-star) {
-webkit-filter: invert(100%);
}
img.content-dark {

6
static/components/menu.less
View file

@ -7,12 +7,12 @@
.header-container {
flex-shrink: 0; // Don't squish the header! There may be a search box here
background-color: @background-color-secondary;
background-color: @background-secondary;
border-bottom: 1px solid @base-border-color;
padding: 3px;
position: relative;
input.search {
border: 1px solid darken(@background-color-secondary, 10%);
border: 1px solid darken(@background-secondary, 10%);
border-radius: 3px;
padding-left: 0;
background-color: white;
@ -30,7 +30,7 @@
}
.content-container {
background: @background-color-secondary;
background: @background-secondary;
width: 100%;
margin-top: -1px;
overflow: auto;

4
static/components/popover.less
View file

@ -9,7 +9,7 @@
display: flex;
flex-direction: column;
max-height:400px;
background-color: @background-color;
background-color: @background-primary;
border-radius: @border-radius-base;
box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.15), 0 -0.5px 0 rgba(0, 0, 0, 0.15), 0.5px 0 0 rgba(0, 0, 0, 0.15), -0.5px 0 0 rgba(0, 0, 0, 0.15), 0 4px 7px rgba(0,0,0,0.15), inset 0 0 1px rgba(0,0,0,0.5);
@ -38,7 +38,7 @@
.popover-pointer {
-webkit-mask-image: url('images/tooltip/tooltip-bg-pointer@2x.png');
background-color: @background-color;
background-color: @background-primary;
}
}

2
static/components/tokenizing-text-field.less
View file

@ -22,7 +22,7 @@
border: 1px solid @border-secondary-bg;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
border-radius: @border-radius-small;
background-color: @background-color;
background-color: @background-primary;
position: absolute;
z-index: 2;
}

1
static/inputs.less
View file

@ -21,6 +21,7 @@ input[type="url"] {
line-height: @line-height-computed;
font-weight:400;
background: @input-bg;
color: @text-color;
&:disabled {
background: fadeout(@input-bg, 40%);

22
static/variables/ui-variables.less
View file

@ -47,6 +47,7 @@
@background-off-primary: #fdfdfd;
@background-secondary: #f6f6f6;
@background-tertiary: #6d7987;
@background-selected: @light-blue;
@border-primary-bg: darken(@background-primary, 10%);
@border-secondary-bg: darken(@background-secondary, 10%);
@ -210,7 +211,7 @@
@input-border-color: fadeout(@border-color, 10%);
@input-border-color-blurred: desaturate(@input-border-color, 100%);
@input-tint-color: fade(@background-color-selected, 10%);
@input-tint-color: fade(@background-selected, 10%);
@input-tint-color-hover: fade(@input-tint-color, 30%);
@input-tint-color-blurred: desaturate(@input-tint-color, 100%);
@ -299,7 +300,7 @@
@list-border-radius: @border-radius-base;
//** Background color of single list items on hover
@list-hover-bg: #f5f5f5;
@list-hover-bg: darken(@list-bg, 4%);
//** Text color of active list items
@list-focused-color: @list-bg;
@ -408,12 +409,6 @@
@progress-bar-fill: @light-blue;
@progress-bar-background: @light-gray;
@background-color: #fff;
@background-color-highlight: darken(@background-color, 2.5%);
@background-color-selected: @light-blue;
@background-color-secondary: darken(@background-color, 5%);
@background-color-accent: @blue-gray;
@background-color-info: @light-blue;
@background-color-success: @green;
@background-color-warning: #ff4800;
@ -423,18 +418,17 @@
@background-gradient: linear-gradient(to top, rgba(241,241,241,0.75) 0%,
rgba(253,253,253,0.75) 100%);
@base-border-color: darken(@background-color, 15%);
@border-color: darken(@background-color, 15%);
@border-color-subtle: darken(@background-color, 8%);
@base-border-color: darken(@background-primary, 15%);
@border-color: darken(@background-primary, 15%);
@border-color-subtle: darken(@background-primary, 8%);
// Inputs
// Menus
@menu-color: white;
@menu-divider-color: @light-gray;
@menu-item-color-hover: fade(@background-color-selected, 10%);
@menu-item-color-selected: @background-color-selected;
@menu-item-color-hover: fade(@background-selected, 10%);
@menu-item-color-selected: @background-selected;
@menu-text-color-selected: @text-color-inverse;
// Sizes