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

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 {