Update layout.

This commit is contained in:
Lars Jung 2014-12-11 01:35:21 +01:00
parent 707ae0547a
commit c7c080d029
4 changed files with 33 additions and 26 deletions

View file

@ -28,3 +28,7 @@ trim_trailing_whitespace = false
[*.jade] [*.jade]
trim_trailing_whitespace = false trim_trailing_whitespace = false
[*.svg]
insert_final_newline = false

View file

@ -9,13 +9,26 @@
// @col-dark: #333; // @col-dark: #333;
@col-dark: #212121; @col-dark: #212121;
@col-text-primary-black: rgba(0,0,0,0.87);
@col-text-secondary-black: rgba(0,0,0,0.54);
@col-text-disabled-black: rgba(0,0,0,0.26);
@col-divider-black: rgba(0,0,0,0.12);
@col-text-primary-white: rgba(255,255,255,1.0);
@col-text-secondary-white: rgba(255,255,255,0.7);
@col-text-disabled-white: rgba(255,255,255,0.3);
@col-divider-white: rgba(255,255,255,0.12);
@col-text-selected: @col-text-primary-white;
@col-back-selected: @col-blue;
@col-font-light: @col-light; @col-font-light: @col-light;
@col-font-dark: @col-dark; @col-font-dark: @col-dark;
@col-back-light: @col-lightgray; @col-back-light: @col-lightgray;
@col-back-dark: @col-darkgray; @col-back-dark: @col-darkgray;
@col: @col-dark; @col: @col-text-primary-black;
@col-back: @col-back-dark; @col-back: @col-back-dark;
@col-hover: @col-blue; @col-hover: @col-blue;
@col-border: rgba(0,0,0,0.05); @col-border: rgba(0,0,0,0.05);
@ -50,8 +63,8 @@
@font-family-mono: monospace; @font-family-mono: monospace;
::-moz-selection { background: @col-blue; color: @col-font-light; text-shadow: none; } ::-moz-selection { background: @col-blue; color: @col-text-primary-white; text-shadow: none; }
::selection { background: @col-blue; color: @col-font-light; text-shadow: none; } ::selection { background: @col-blue; color: @col-text-primary-white; text-shadow: none; }
.transition (@transition) { .transition (@transition) {
-webkit-transition: @transition; -webkit-transition: @transition;
@ -82,7 +95,7 @@
.card(); .card();
.rounded(); .rounded();
.transition(all 0.2s ease-in-out); .transition(all 0.2s ease-in-out);
color: @col-light; color: @col-text-primary-white;
background: @col-blue; background: @col-blue;
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
@ -101,7 +114,7 @@
-webkit-appearance: none; -webkit-appearance: none;
font-family: @font-family; font-family: @font-family;
font-weight: @font-weight; font-weight: @font-weight;
color: @col-dark; color: @col-text-primary-black;
background: @col-light; background: @col-light;
border: none; border: none;
outline: none; outline: none;
@ -130,7 +143,7 @@ body {
font-family: @font-family; font-family: @font-family;
font-size: @font-size; font-size: @font-size;
font-weight: @font-weight; font-weight: @font-weight;
color: @col; color: @col-text-primary-black;
background: @col-back; background: @col-back;
display: flex; display: flex;

View file

@ -4,7 +4,7 @@ body#h5ai-info {
#content { #content {
flex: 1 1 auto; flex: 1 1 auto;
order: 50; order: 50;
color: @col; color: @col-text-primary-black;
text-align: center; text-align: center;
overflow-y: scroll; overflow-y: scroll;
} }
@ -24,7 +24,7 @@ body#h5ai-info {
font-size: 4em; font-size: 4em;
font-weight: 300; font-weight: 300;
margin: 0.8em 0 0 0; margin: 0.8em 0 0 0;
color: @col; color: @col-text-primary-black;
text-decoration: none; text-decoration: none;
.transition(all 0.2s ease-in-out); .transition(all 0.2s ease-in-out);

View file

@ -1,12 +1,4 @@
@item-col-hover: @col-hover;
@item-background-col-hover: #fafafa;
@item-border-col-hover: @col-border;
@item-col-sel: #fff;
@item-background-col-sel: #42a5f5;
#selection-rect { #selection-rect {
display: none; display: none;
position: absolute; position: absolute;
@ -44,24 +36,22 @@
background: #fff; background: #fff;
&:hover { &:hover {
color: @item-col-hover; color: @col-hover;
background: @item-background-col-hover; background: @col-lightgray;
border-color: @item-border-col-hover; border-color: @col-border;
}
&:hover {
.selector { .selector {
display: block; display: block;
} }
} }
&.selected:not(.selecting), &.selecting:not(.selected) { &.selected:not(.selecting), &.selecting:not(.selected) {
color: @item-col-sel; color: @col-text-selected;
background: @item-background-col-sel; background: @col-back-selected;
&:hover { &:hover {
color: @item-col-sel; color: @col-text-selected;
background: @item-background-col-sel; background: @col-back-selected;
} }
.selector { .selector {
@ -137,7 +127,7 @@
display: none; display: none;
margin-top: 36px; margin-top: 36px;
text-align: center; text-align: center;
color: #ddd; color: @col-border;
font-size: 5em; font-size: 5em;
font-weight: bold; font-weight: bold;
} }