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

Refining fonts and colours

Browse Source
This commit is contained in:
James Barnsley
2017-07-24 06:03:09 +12:00
parent 396aec1a49
commit bde12b7673
16 changed files with 57 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.html
View File

@ -14,7 +14,7 @@
<link rel="shortcut icon" type="image/x-icon" href="/iris/assets/favicon.ico" />
<link rel="shortcut-icon" href="/iris/assets/favicon.ico" />
<link href="//fonts.googleapis.com/css?family=Archivo+Narrow:400,700|Lato:400,400i,700|Overpass:400,400i,600,700,800|Montserrat:400|500|600|News+Cycle:400,700|PT+Sans+Narrow:400,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Archivo+Narrow:400,700|Lato:400,400i,700|Overpass:400,400i,600,700,800|Montserrat:400|500|600|News+Cycle:400,700|PT+Sans+Narrow:400,700|Roboto+Condensed:300,400,700|Fira+Sans:400,500,600,700|Open+Sans:400,600,700|Source+Sans+Pro:400,600,700" rel="stylesheet">
<link href="/iris/app.css" rel="stylesheet" />
<link rel="manifest" href="/iris/assets/manifest.json">

4
src/js/views/Artist.js
View File

@ -205,10 +205,9 @@ class Artist extends React.Component{
<div className="intro">
<Parallax blur image={image} />
<Parallax image={image} />
<div className="liner">
<Thumbnail image={image} canZoom circle />
<h1>{this.props.artist ? this.props.artist.name : null}</h1>
<div className="actions">
{ can_play_radio ? <button className="primary" onClick={e => this.props.pusherActions.startRadio([this.props.artist.uri])}>Start radio</button> : <button className="primary" onClick={e => this.props.mopidyActions.playURIs(this.props.artist.albums_uris, this.props.artist.uri)}>Play all</button>}
@ -231,7 +230,6 @@ class Artist extends React.Component{
<div className="intro">
<Parallax />
<div className="liner">
<Thumbnail circle />
<h1>
<span className="placeholder"></span>
</h1>

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

@ -28,7 +28,7 @@
width: 100%;
height: 100%;
z-index: 98;
background: $off_white;
background: darken($dark_grey, 1%);
.dropzone {
@include animate();

6
src/scss/components/_dropdown-field.scss
View File

@ -46,9 +46,9 @@
background: $white;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 6px solid $mid_grey;
border-left: 5px solid $darkest_grey;
border-right: 5px solid $darkest_grey;
border-bottom: 6px solid $white;
}
.option {

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

@ -94,7 +94,7 @@
}
&:not(.mini){
.grid-item {
@include grid_item( 5 )
@include grid_item( 4 )
}
}
}

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

@ -39,7 +39,7 @@ main {
padding: 13px 10px;
margin: 0;
min-width: 0;
color: $black;
color: $white;
&:hover {
color: $blue;
@ -57,20 +57,7 @@ main {
top: 0;
left: 0;
width: 100%;
color: $white;
z-index: 95;
.icon {
-webkit-filter: invert(1);
-moz-filter: invert(1);
filter: invert(1);
}
.context-menu-trigger {
.dot {
background: $white;
}
}
}
@include responsive( $bp_medium ){

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

@ -76,9 +76,9 @@
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));
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 {
@ -90,7 +90,7 @@
left: -5%;
&.loaded {
opacity: 0.4;
opacity: 0.8;
}
}
@ -105,7 +105,7 @@
padding-bottom: 60px;
.tile {
color: $dark_grey;
color: $white;
text-align: center;
position: relative;
z-index: 1;
@ -133,7 +133,7 @@
margin-top: -27px;
font-size: 60px;
z-index: -1;
color: $faint_grey;
opacity: 0.1;
}
}
@ -142,7 +142,7 @@
display: block;
width: 100%;
padding-bottom: 100%;
background: $light_grey;
background: lighten($dark_grey,2%);
z-index: -2;
}

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

@ -12,7 +12,7 @@
display: block;
position: relative;
padding: 12px 10px;
padding: 14px 10px;
margin: 0 -10px -1px -10px;
cursor: pointer;
border-radius: 3px;
@ -334,10 +334,10 @@
&.track-list {
.list-item.can-sort {
padding: 8px 30px 8px 78px !important;
padding-left: 78px !important;
}
.list-item:not(.can-sort){
padding: 8px 30px 8px 38px !important;
padding-left: 42px !important;
}
}
}

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

@ -28,7 +28,7 @@
top: 0;
left: 0;
border: {
color: $darkest_grey;
color: lighten($dark_grey, 5%);
}
}

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

@ -5,8 +5,9 @@
bottom: 0;
right: 0;
left: 0;
height: 50px;
background: darken($darkest_grey, 5%);
height: 49px;
background: lighten($dark_grey, 3%);
border-top: 1px solid lighten($dark_grey, 8%);
color: $white;
.current-track {

10
src/scss/components/_sidebar-toggle-button.scss
View File

@ -6,7 +6,7 @@
left: 0;
padding: 18px;
z-index: 98;
color: #FFFFFF;
color: $white;
font-size: 18px;
cursor: pointer;
display: none;
@ -15,14 +15,6 @@
display: block;
}
header & {
color: $dark_grey;
}
header.overlay & {
color: $white;
}
&.open {
position: fixed;
top: 0;

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

@ -30,10 +30,10 @@ aside{
line-height: 1em;
a {
@include feature_font();
@include gradient_overlay(3px);
font-weight: 800;
font-size: 15px;
font-family: "Overpass";
font-weight: 500;
font-size: 14px;
color: $white;
text-decoration: none;
display: block;

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

@ -3,7 +3,7 @@
body,
html {
background: $dark_grey;
color: $white;
color: $light_grey;
font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
font-size: 14px;
touch-action: manipulation;
@ -51,9 +51,10 @@ main {
color: inherit;
text-decoration: none;
cursor: pointer;
border-bottom: 1px solid transparent;
&:hover {
opacity: 0.7;
border-color: $mid_grey;
}
}
@ -84,6 +85,7 @@ main {
h1 {
@include feature_font();
color: $white;
font-weight: 800;
font-size: 3rem;
line-height: 3.2rem;
@ -114,7 +116,7 @@ h4 {
&.underline {
padding-bottom: 4px;
border-bottom: 1px solid #000000;
border-bottom: 1px solid $grey;
}
&:not(:first-child){

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

@ -16,10 +16,15 @@ input[type="email"],
input[type="date"],
select {
padding: 10px 14px;
background: $faint_grey;
color: $darkest_grey;
background: rgba(255,255,255,0.1);
color: $white;
font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
font-size: 14px;
&:focus,
&:active {
background: rgba(255,255,255,0.2);
}
}
.button-wrapper {
@ -49,8 +54,8 @@ input[type="submit"] {
display: inline-block;
padding: 9px 30px 7px;
margin: 0 20px 10px 0;
color: $white;
background: $black;
color: $black;
background: $white;
font-size: 14px;
box-sizing: border-box;
border-radius: 3px;
@ -69,8 +74,7 @@ input[type="submit"] {
&:active {
@include noanimate();
background: $black;
color: $white;
background: darken($white,5%);
margin-top: 1px;
margin-bottom: 9px;
}
@ -170,9 +174,6 @@ input[type="submit"] {
padding-left: 20px;
padding-right: 20px;
}
@include responsive( $bp_narrow ){
}
}
.field {
@ -239,40 +240,29 @@ input[type="submit"] {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid #000000;
border: 2px solid $mid_grey;
position: absolute;
top: 4px;
left: 0;
}
input:checked + .label:before {
background: #000000;
box-shadow: inset 0px 0px 0px 4px #f5f5f5;
}
&.white {
input + .label:before {
border-color: #FFFFFF;
}
input:checked + .label:before {
background: #FFFFFF;
background: $mid_grey;
box-shadow: inset 0px 0px 0px 4px #222222;
}
}
}
&.checkbox {
input + .label:before {
font-family: FontAwesome;
font-size: 8px;
content: ' ';
color: #000000;
color: $mid_grey;
display: inline-block;
width: 11px;
height: 11px;
padding: 3px 0 0 3px;
border: 2px solid #000000;
border: 2px solid $mid_grey;
position: absolute;
top: 5px;
left: 0;
@ -281,16 +271,6 @@ input[type="submit"] {
input:checked + .label:before {
content: '\f00c';
}
&.white {
input + .label:before {
border-color: #FFFFFF;
}
input:checked + .label:before {
color: #FFFFFF;
}
}
}
.error {

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

@ -2,11 +2,11 @@
$turquoise: #08d58f;
$off_white: #F5F5F5;
$faint_grey: #f4f2f0;
$light_grey: #edeae7;
$light_grey: #cecac4;
$mid_grey: #a3a19f;
$grey: #383734;
$dark_grey: #262728;
$darkest_grey: #1d1e1f;
$darkest_grey: #171819;
$secondary_grey: #888888;
$white: #FFFFFF;
$black: #000000;

29
src/scss/views/_artist.scss
View File

@ -22,27 +22,16 @@
.liner {
position: relative;
z-index: 1;
padding: 30vh 40px 0 350px;
.thumbnail {
position: absolute;
z-index: 2;
left: 40px;
bottom: 40px;
max-width: 264px;
.image {
background-color: $darkest_grey;
}
}
padding: 35vh 40px 0;
h1 {
color: $white;
padding-bottom: 25px;
font-size: 4rem;
}
.actions {
padding-bottom: 60px;
padding-bottom: 20px;
.context-menu-trigger {
color: $white;
@ -50,19 +39,19 @@
}
.sub-views {
color: #FFFFFF;
.option {
@include feature_font();
color: $white;
display: inline-block;
padding: 8px 0;
margin-right: 25px;
font-size: 18px;
font-weight: 400;
border-bottom: 4px solid transparent;
font-size: 15px;
font-weight: 500;
border-bottom: 1px solid transparent;
cursor: pointer;
&.active {
border-color: $off_white;
border-color: $white;
}
&:not(.active):hover {