secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Experimenting with colour options

Browse Source
This commit is contained in:
James Barnsley
2017-07-23 10:15:02 +12:00
parent d38a2c9934
commit 396aec1a49
12 changed files with 61 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
package.json
View File

@ -10,11 +10,11 @@
}, },
"main": "app.js", "main": "app.js",
"dependencies": { "dependencies": {
"babel-core": "^6.23.1", "babel-core": "^6.25.0",
"babel-loader": "^7.1.1", "babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.22.0", "babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0", "babel-preset-react": "^6.22.0",
"babel-preset-stage-0": "^6.22.0", "babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-2": "^6.22.0", "babel-preset-stage-2": "^6.22.0",
"css-loader": "0.28.4", "css-loader": "0.28.4",
"expose-loader": "0.7.3", "expose-loader": "0.7.3",
@ -23,7 +23,7 @@
"flux": "^3.1.2", "flux": "^3.1.2",
"jquery": "3.1.1", "jquery": "3.1.1",
"mopidy": "^0.5.0", "mopidy": "^0.5.0",
"node-sass": "4.5.0", "node-sass": "^4.5.0",
"react": "15.6.1", "react": "15.6.1",
"react-dom": "15.6.1", "react-dom": "15.6.1",
"react-fontawesome": "*", "react-fontawesome": "*",
@ -33,10 +33,10 @@
"redux": "3.7.2", "redux": "3.7.2",
"redux-devtools": "3.4.0", "redux-devtools": "3.4.0",
"redux-thunk": "2.2.0", "redux-thunk": "2.2.0",
"sass-loader": "6.0.2", "sass-loader": "^6.0.2",
"style-loader": "0.13.2", "style-loader": "^0.13.2",
"url-loader": "0.5.8", "url-loader": "^0.5.8",
"webpack": "3.3.0", "webpack": "^3.3.0",
"webpack-strip": "0.1.0" "webpack-strip": "0.1.0"
}, },
"scripts": { "scripts": {

12
src/scss/components/_context-menu.scss
View File

@ -15,7 +15,7 @@
width: 160px; width: 160px;
box-shadow: 2px 3px 6px rgba(0,0,0,0.2); box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
border-radius: 3px; border-radius: 3px;
background: $dark_grey; background: $darkest_grey;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
font-family: "Overpass"; font-family: "Overpass";
@ -236,7 +236,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: $overlay_light; background: $overlay_dark;
z-index: 1; z-index: 1;
} }
@ -291,17 +291,11 @@
width: 6px; width: 6px;
height: 6px; height: 6px;
border-radius: 5px; border-radius: 5px;
background: $black; background: $white;
display: inline-block; display: inline-block;
margin: 1px; margin: 1px;
} }
&.white {
.dot {
background: $white;
}
}
&:before { &:before {
@include animate(); @include animate();
content: ''; content: '';

1
src/scss/components/_header.scss
View File

@ -10,6 +10,7 @@ main {
} }
.icon { .icon {
@include invert();
display: inline-block; display: inline-block;
padding-right: 14px; padding-right: 14px;
height: 2.6rem; height: 2.6rem;

20
src/scss/components/_images.scss
View File

@ -11,7 +11,7 @@
padding-bottom: 100%; padding-bottom: 100%;
position: relative; position: relative;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: $light_grey; background-color: $grey;
background-position: 50% 50%; background-position: 50% 50%;
background-size: cover; background-size: cover;
border-radius: 3px; border-radius: 3px;
@ -62,9 +62,25 @@
height: 50vh; height: 50vh;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
background: #111111; background: $darkest_grey;
position: relative; position: relative;
&:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9;
pointer-events: none;
background: -webkit-linear-gradient(rgba(38,39,40,0), rgba(38,39,40,1));
background: -moz-linear-gradient(rgba(38,39,40,0), rgba(38,39,40,1));
background: -o-linear-gradient(rgba(38,39,40,0), rgba(38,39,40,1));
background: linear-gradient(rgba(38,39,40,0), rgba(38,39,40,1));
}
canvas { canvas {
width: 110%; width: 110%;
height: 110%; height: 110%;

20
src/scss/components/_lists.scss
View File

@ -16,17 +16,16 @@
margin: 0 -10px -1px -10px; margin: 0 -10px -1px -10px;
cursor: pointer; cursor: pointer;
border-radius: 3px; border-radius: 3px;
border-bottom: 1px solid #FAFAFA; border-bottom: 1px solid rgba(255,255,255,0.05);
border-top: 1px solid #FAFAFA; border-top: 1px solid rgba(255,255,255,0.05);
&.selected { &.selected {
background: $yellow !important; background: rgba(255,255,255,0.08) !important;
border-color: darken($yellow,10%);
.select-zone { .select-zone {
&::after { &::after {
background: $dark_grey; background: $blue;
border-color: $dark_grey; border-color: $blue;
} }
} }
} }
@ -41,13 +40,13 @@
} }
:root .notouch:not(.dragging) &:not(.header):not(.no-click).hover { :root .notouch:not(.dragging) &:not(.header):not(.no-click).hover {
background: lighten($yellow, 10%); background: rgba(255,255,255,0.03);
cursor: pointer; cursor: pointer;
} }
&.header { &.header {
font-size: 10px; font-size: 10px;
color: #CCCCCC; color: $grey;
text-transform: uppercase; text-transform: uppercase;
border-top: 0; border-top: 0;
padding-bottom: 2px; padding-bottom: 2px;
@ -205,7 +204,7 @@
a.artist:hover { a.artist:hover {
.thumbnail { .thumbnail {
border-color: $turquoise; border-color: $turquoise;
opacity: 0.8; opacity: 1;
} }
} }
} }
@ -241,7 +240,7 @@
&:after { &:after {
display: block; display: block;
content: ''; content: '';
border: 1px solid $darkest_grey; border: 1px solid $mid_grey;
border-radius: 50%; border-radius: 50%;
width: 14px; width: 14px;
height: 14px; height: 14px;
@ -259,6 +258,7 @@
width: 38px; width: 38px;
font-size: 14px; font-size: 14px;
display: block; display: block;
color: $mid_grey;
.fa { .fa {
position: absolute; position: absolute;

4
src/scss/components/_loader.scss
View File

@ -28,7 +28,7 @@
top: 0; top: 0;
left: 0; left: 0;
border: { border: {
color: $light_grey; color: $darkest_grey;
} }
} }
@ -37,7 +37,7 @@
border-top-color: transparent; border-top-color: transparent;
border-left-color: transparent; border-left-color: transparent;
border-bottom-color: transparent; border-bottom-color: transparent;
border-right-color: $mid_grey; border-right-color: $blue;
} }
} }

16
src/scss/components/_playback-controls.scss
View File

@ -6,13 +6,8 @@
right: 0; right: 0;
left: 0; left: 0;
height: 50px; height: 50px;
background: $light_grey; background: darken($darkest_grey, 5%);
color: $black; color: $white;
background: -webkit-linear-gradient(to bottom left, $light_grey, darken($light_grey,5%));
background: -moz-linear-gradient(to bottom left, $light_grey, darken($light_grey,5%));
background: -o-linear-gradient(to bottom left, $light_grey, darken($light_grey,5%));
background: linear-gradient(to bottom left, $light_grey, darken($light_grey,5%));
.current-track { .current-track {
@include animate(); @include animate();
@ -21,7 +16,7 @@
bottom: 50px; bottom: 50px;
width: 220px; width: 220px;
font-size: 14px; font-size: 14px;
color: $black; color: $white;
text-decoration: none; text-decoration: none;
.thumbnail { .thumbnail {
@ -89,11 +84,12 @@
.control { .control {
@include animate(); @include animate();
font-size: 12px; font-size: 12px;
color: $dark_grey; color: $white;
cursor: pointer; cursor: pointer;
padding: 8px; padding: 8px;
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
opacity: 0.8;
&.play { &.play {
font-size: 24px; font-size: 24px;
@ -105,7 +101,7 @@
} }
&:hover { &:hover {
color: $black; opacity: 1;
} }
} }

14
src/scss/components/_sidebar.scss
View File

@ -5,10 +5,11 @@ aside{
left: 0; left: 0;
bottom: 0; bottom: 0;
z-index: 96; z-index: 96;
width: 220px; width: 219px;
overflow: hidden; overflow: hidden;
background: $off_white; background: darken($dark_grey, 1%);
color: $darkest_grey; border-right: 1px solid lighten($dark_grey, 5%);
color: $white;
.liner { .liner {
overflow-y: auto; overflow-y: auto;
@ -33,7 +34,7 @@ aside{
@include gradient_overlay(3px); @include gradient_overlay(3px);
font-weight: 800; font-weight: 800;
font-size: 15px; font-size: 15px;
color: $darkest_grey; color: $white;
text-decoration: none; text-decoration: none;
display: block; display: block;
padding: 9px 10px 5px; padding: 9px 10px 5px;
@ -42,6 +43,7 @@ aside{
line-height: 18px; line-height: 18px;
.icon { .icon {
@include invert();
height: 14px; height: 14px;
padding-right: 12px; padding-right: 12px;
vertical-align: top; vertical-align: top;
@ -55,10 +57,6 @@ aside{
&:before { &:before {
opacity: 0.15; opacity: 0.15;
} }
.icon {
@include invert();
}
} }
&[disabled] { &[disabled] {

2
src/scss/components/_slider.scss
View File

@ -5,7 +5,7 @@
.track { .track {
position: absolute; position: absolute;
background: darken($light_grey, 6%); background: $dark_grey;
border-radius: 2px; border-radius: 2px;
.progress { .progress {

7
src/scss/global/_core.scss
View File

@ -2,8 +2,8 @@
body, body,
html { html {
background: $white; background: $dark_grey;
color: $darkest_grey; color: $white;
font-family: "Archivo Narrow", Helvetica, Arial, sans-serif; font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
touch-action: manipulation; touch-action: manipulation;
@ -50,11 +50,10 @@ main {
a { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
border-bottom: 1px dotted transparent;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
border-color: #000000; opacity: 0.7;
} }
} }

2
src/scss/global/_forms.scss
View File

@ -50,7 +50,7 @@ input[type="submit"] {
padding: 9px 30px 7px; padding: 9px 30px 7px;
margin: 0 20px 10px 0; margin: 0 20px 10px 0;
color: $white; color: $white;
background: $dark_grey; background: $black;
font-size: 14px; font-size: 14px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 3px; border-radius: 3px;

6
src/scss/global/_variables.scss
View File

@ -4,9 +4,9 @@ $off_white: #F5F5F5;
$faint_grey: #f4f2f0; $faint_grey: #f4f2f0;
$light_grey: #edeae7; $light_grey: #edeae7;
$mid_grey: #a3a19f; $mid_grey: #a3a19f;
$grey: #888888; $grey: #383734;
$dark_grey: #232221; $dark_grey: #262728;
$darkest_grey: #1b1a19; $darkest_grey: #1d1e1f;
$secondary_grey: #888888; $secondary_grey: #888888;
$white: #FFFFFF; $white: #FFFFFF;
$black: #000000; $black: #000000;