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",
"dependencies": {
"babel-core": "^6.23.1",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^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",
"css-loader": "0.28.4",
"expose-loader": "0.7.3",
@ -23,7 +23,7 @@
"flux": "^3.1.2",
"jquery": "3.1.1",
"mopidy": "^0.5.0",
"node-sass": "4.5.0",
"node-sass": "^4.5.0",
"react": "15.6.1",
"react-dom": "15.6.1",
"react-fontawesome": "*",
@ -33,10 +33,10 @@
"redux": "3.7.2",
"redux-devtools": "3.4.0",
"redux-thunk": "2.2.0",
"sass-loader": "6.0.2",
"style-loader": "0.13.2",
"url-loader": "0.5.8",
"webpack": "3.3.0",
"sass-loader": "^6.0.2",
"style-loader": "^0.13.2",
"url-loader": "^0.5.8",
"webpack": "^3.3.0",
"webpack-strip": "0.1.0"
},
"scripts": {

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

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

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

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

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

@ -11,7 +11,7 @@
padding-bottom: 100%;
position: relative;
background-repeat: no-repeat;
background-color: $light_grey;
background-color: $grey;
background-position: 50% 50%;
background-size: cover;
border-radius: 3px;
@ -62,9 +62,25 @@
height: 50vh;
width: 100%;
overflow: hidden;
background: #111111;
background: $darkest_grey;
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 {
width: 110%;
height: 110%;

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

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

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

@ -28,7 +28,7 @@
top: 0;
left: 0;
border: {
color: $light_grey;
color: $darkest_grey;
}
}
@ -37,7 +37,7 @@
border-top-color: transparent;
border-left-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;
left: 0;
height: 50px;
background: $light_grey;
color: $black;
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%));
background: darken($darkest_grey, 5%);
color: $white;
.current-track {
@include animate();
@ -21,7 +16,7 @@
bottom: 50px;
width: 220px;
font-size: 14px;
color: $black;
color: $white;
text-decoration: none;
.thumbnail {
@ -89,11 +84,12 @@
.control {
@include animate();
font-size: 12px;
color: $dark_grey;
color: $white;
cursor: pointer;
padding: 8px;
display: inline-block;
vertical-align: bottom;
opacity: 0.8;
&.play {
font-size: 24px;
@ -105,7 +101,7 @@
}
&:hover {
color: $black;
opacity: 1;
}
}

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

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

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

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

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

@ -2,8 +2,8 @@
body,
html {
background: $white;
color: $darkest_grey;
background: $dark_grey;
color: $white;
font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
font-size: 14px;
touch-action: manipulation;
@ -50,11 +50,10 @@ main {
a {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted transparent;
cursor: pointer;
&: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;
margin: 0 20px 10px 0;
color: $white;
background: $dark_grey;
background: $black;
font-size: 14px;
box-sizing: border-box;
border-radius: 3px;

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

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