Colours map; Commands interface
This commit is contained in:
James Barnsley
@ -32,8 +32,8 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 97;
|
||||
background: $dark_grey;
|
||||
color: $white;
|
||||
background: colour(dark_grey);
|
||||
color: colour(white);
|
||||
|
||||
.type {
|
||||
&:not(:first-child){
|
||||
@ -50,11 +50,11 @@
|
||||
.result {
|
||||
display: block;
|
||||
padding: 10px 14px;
|
||||
border-top: 1px solid lighten($dark_grey, 10%);
|
||||
border-top: 1px solid lighten(colour(dark_grey), 10%);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: lighten($dark_grey, 10%);
|
||||
background: lighten(colour(dark_grey), 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -62,12 +62,12 @@
|
||||
.all-results {
|
||||
display: block;
|
||||
padding: 10px 14px;
|
||||
border-top: 1px solid lighten($dark_grey, 10%);
|
||||
border-top: 1px solid lighten(colour(dark_grey), 10%);
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
background: lighten($dark_grey, 10%);
|
||||
background: lighten(colour(dark_grey), 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
width: 190px;
|
||||
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
|
||||
border-radius: 3px;
|
||||
background: $grey;
|
||||
background: colour(grey);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: "Overpass";
|
||||
@ -28,7 +28,7 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
background: $darkest_grey;
|
||||
background: colour(darkest_grey);
|
||||
|
||||
.background {
|
||||
@include blur(5px);
|
||||
@ -83,7 +83,7 @@
|
||||
padding: 9px 12px 8px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
color: $white;
|
||||
color: colour(white);
|
||||
|
||||
.notouch &:hover {
|
||||
&:before {
|
||||
@ -92,8 +92,8 @@
|
||||
}
|
||||
|
||||
.notouch &:active {
|
||||
background: $black;
|
||||
color: $white;
|
||||
background: colour(black);
|
||||
color: colour(white);
|
||||
}
|
||||
}
|
||||
|
||||
@ -119,7 +119,7 @@
|
||||
width: 0;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
background: lighten($grey, 10%);
|
||||
background: lighten(colour(grey), 10%);
|
||||
z-index: 3;
|
||||
border-radius: 3px;
|
||||
|
||||
@ -139,7 +139,7 @@
|
||||
width: 100%;
|
||||
|
||||
&.close-submenu {
|
||||
color: $mid_grey;
|
||||
color: colour(mid_grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -149,7 +149,7 @@
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: lighten($grey, 5%);
|
||||
background: lighten(colour(grey), 5%);
|
||||
}
|
||||
|
||||
& > span {
|
||||
@ -170,7 +170,7 @@
|
||||
text-transform: none;
|
||||
font-weight: 300;
|
||||
color: inherit;
|
||||
border-bottom: 1px solid lighten($grey, 5%) !important;
|
||||
border-bottom: 1px solid lighten(colour(grey), 5%) !important;
|
||||
|
||||
.icon,
|
||||
.icon {
|
||||
@ -178,7 +178,7 @@
|
||||
}
|
||||
|
||||
.notouch &:hover {
|
||||
background: lighten($dark_grey, 5%);
|
||||
background: lighten(colour(dark_grey), 5%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -211,7 +211,7 @@
|
||||
|
||||
& > .liner {
|
||||
background: transparent;
|
||||
color: $white !important;
|
||||
color: colour(white) !important;
|
||||
margin: -3px -5px;
|
||||
|
||||
&:before {
|
||||
@ -223,7 +223,7 @@
|
||||
padding: 3px 5px;
|
||||
border-radius: 0;
|
||||
opacity: 0.6;
|
||||
color: $white !important;
|
||||
color: colour(white) !important;
|
||||
|
||||
&:before {
|
||||
display: none !important;
|
||||
@ -257,7 +257,7 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: $overlay_dark;
|
||||
background: colour(overlay_dark);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@ -279,13 +279,13 @@
|
||||
& > span {
|
||||
button,
|
||||
.button {
|
||||
color: $white;
|
||||
color: colour(white);
|
||||
font-weight: 800;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.dropdown-field {
|
||||
color: $white;
|
||||
color: colour(white);
|
||||
}
|
||||
}
|
||||
|
||||
@ -315,7 +315,7 @@
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $blue !important;
|
||||
color: colour(blue) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
z-index: 96;
|
||||
padding: 10px;
|
||||
background: rgba(100,100,100, 0.8);
|
||||
color: $white;
|
||||
color: colour(white);
|
||||
pointer-events: none;
|
||||
width: 220px;
|
||||
max-width: 98vw;
|
||||
|
||||
@ -15,8 +15,8 @@
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 97;
|
||||
background: $blue;
|
||||
color: $white;
|
||||
background: colour(blue);
|
||||
color: colour(white);
|
||||
padding: 12px 20px;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -28,10 +28,10 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 98;
|
||||
background: darken($dark_grey, 1%);
|
||||
background: darken(colour(dark_grey), 1%);
|
||||
|
||||
.light-theme & {
|
||||
background: $faint_grey;
|
||||
background: colour(faint_grey);
|
||||
}
|
||||
|
||||
.dropzone {
|
||||
@ -39,16 +39,16 @@
|
||||
@include gradient_overlay(3px,0);
|
||||
margin: 15px;
|
||||
padding: 40px 20px;
|
||||
background: $grey;
|
||||
background: colour(grey);
|
||||
border: 5px solid transparent;
|
||||
border-radius: 3px;
|
||||
color: $white;
|
||||
color: colour(white);
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
|
||||
.light-theme & {
|
||||
background: $light_grey;
|
||||
color: $darkest_grey;
|
||||
background: colour(light_grey);
|
||||
color: colour(darkest_grey);
|
||||
}
|
||||
|
||||
& * {
|
||||
@ -62,7 +62,7 @@
|
||||
}
|
||||
|
||||
&.hover {
|
||||
border-color: $blue;
|
||||
border-color: colour(blue);
|
||||
|
||||
&:before {
|
||||
opacity: 0.15;
|
||||
|
||||
@ -18,14 +18,14 @@
|
||||
cursor: pointer;
|
||||
|
||||
.notouch &:hover {
|
||||
color: $blue;
|
||||
color: colour(blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
.label:not(.button) {
|
||||
color: $blue;
|
||||
color: colour(blue);
|
||||
}
|
||||
.options {
|
||||
display: block;
|
||||
@ -59,7 +59,7 @@
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: $white;
|
||||
background: colour(white);
|
||||
-ms-transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
@ -68,20 +68,20 @@
|
||||
right: 9px;
|
||||
|
||||
.light-theme & {
|
||||
background: $faint_grey;
|
||||
background: colour(faint_grey);
|
||||
}
|
||||
}
|
||||
|
||||
& > .liner {
|
||||
color: $black;
|
||||
background: $white;
|
||||
color: colour(black);
|
||||
background: colour(white);
|
||||
min-width: 120px;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
border-radius: 3px;
|
||||
|
||||
.light-theme & {
|
||||
background: $faint_grey;
|
||||
background: colour(faint_grey);
|
||||
}
|
||||
|
||||
.option {
|
||||
@ -89,7 +89,7 @@
|
||||
position: relative;
|
||||
padding: 9px 12px 8px 24px;
|
||||
cursor: pointer;
|
||||
color: $black;
|
||||
color: colour(black);
|
||||
|
||||
&:before {
|
||||
@include animate();
|
||||
@ -116,7 +116,7 @@
|
||||
}
|
||||
|
||||
.notouch &:hover {
|
||||
color: $black;
|
||||
color: colour(black);
|
||||
|
||||
&:before {
|
||||
opacity: 0.15;
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
|
||||
&:hover {
|
||||
.icon {
|
||||
color: $blue;
|
||||
color: colour(blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -35,7 +35,7 @@
|
||||
input {
|
||||
width: 180px;
|
||||
padding-left: 35px;
|
||||
background: $grey;
|
||||
background: colour(grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -43,12 +43,12 @@
|
||||
#context-menu {
|
||||
.filter-field {
|
||||
display: block;
|
||||
border-bottom: 1px solid lighten($grey, 5%);
|
||||
border-bottom: 1px solid lighten(colour(grey), 5%);
|
||||
|
||||
.icon {
|
||||
top: 15px;
|
||||
left: 24px;
|
||||
color: $white !important;
|
||||
color: colour(white) !important;
|
||||
}
|
||||
|
||||
form {
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
.secondary {
|
||||
@include one_line_text;
|
||||
padding-top: 2px;
|
||||
color: $secondary_grey;
|
||||
color: colour(secondary_grey);
|
||||
|
||||
.source {
|
||||
padding-right: 6px;
|
||||
@ -193,7 +193,7 @@
|
||||
padding-bottom: 60px;
|
||||
|
||||
.tile {
|
||||
color: $white;
|
||||
color: colour(white);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@ -202,7 +202,7 @@
|
||||
border-radius: 3px;
|
||||
|
||||
.light-theme & {
|
||||
color: $darkest_grey;
|
||||
color: colour(darkest_grey);
|
||||
}
|
||||
|
||||
.content {
|
||||
@ -226,11 +226,11 @@
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-bottom: 100%;
|
||||
background: lighten($dark_grey, 2%);
|
||||
background: lighten(colour(dark_grey), 2%);
|
||||
z-index: -2;
|
||||
|
||||
.light-theme & {
|
||||
background: $faint_grey;
|
||||
background: colour(faint_grey);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -38,10 +38,10 @@ main {
|
||||
padding: 13px 10px;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
color: $light_grey;
|
||||
color: colour(light_grey);
|
||||
|
||||
&:hover {
|
||||
color: $blue;
|
||||
color: colour(blue);
|
||||
box-shadow: none;
|
||||
|
||||
&:before {
|
||||
@ -50,10 +50,10 @@ main {
|
||||
}
|
||||
|
||||
.light-theme & {
|
||||
color: $darkest_grey;
|
||||
color: colour(darkest_grey);
|
||||
|
||||
&:hover {
|
||||
color: $blue;
|
||||
color: colour(blue);
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
@ -11,13 +11,13 @@
|
||||
padding-bottom: 100%;
|
||||
position: relative;
|
||||
background-repeat: no-repeat;
|
||||
background-color: lighten($dark_grey, 2%);
|
||||
background-color: lighten(colour(dark_grey), 2%);
|
||||
background-position: 50% 50%;
|
||||
background-size: cover;
|
||||
border-radius: 3px;
|
||||
|
||||
.light-theme & {
|
||||
background-color: $faint_grey;
|
||||
background-color: colour(faint_grey);
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
border: 0;
|
||||
|
||||
&:hover {
|
||||
background: $black;
|
||||
background: colour(black);
|
||||
}
|
||||
}
|
||||
|
||||
@ -67,7 +67,7 @@
|
||||
height: 50vh;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: $dark_grey;
|
||||
background: colour(dark_grey);
|
||||
position: relative;
|
||||
|
||||
canvas {
|
||||
@ -90,6 +90,6 @@
|
||||
}
|
||||
|
||||
.light-theme & {
|
||||
background: $white;
|
||||
background: colour(white);
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,8 +31,8 @@
|
||||
|
||||
.select-zone {
|
||||
&::after {
|
||||
background: $blue;
|
||||
border-color: $blue !important;
|
||||
background: colour(blue);
|
||||
border-color: colour(blue) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -41,12 +41,12 @@
|
||||
border-color: rgba(0,0,0,0.05);
|
||||
|
||||
&.selected {
|
||||
background: $faint_grey !important;
|
||||
background: colour(faint_grey) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.playing {
|
||||
color: $turquoise;
|
||||
color: colour(turquoise);
|
||||
}
|
||||
|
||||
.select-zone,
|
||||
@ -71,7 +71,7 @@
|
||||
}
|
||||
|
||||
.icon.source {
|
||||
color: $mid_grey;
|
||||
color: colour(mid_grey);
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 40px;
|
||||
@ -79,7 +79,7 @@
|
||||
|
||||
&.header {
|
||||
font-size: 10px;
|
||||
color: $grey;
|
||||
color: colour(grey);
|
||||
text-transform: uppercase;
|
||||
border-top: 0;
|
||||
padding-bottom: 2px;
|
||||
@ -110,8 +110,8 @@
|
||||
width: 36%;
|
||||
|
||||
.light-theme & .flag {
|
||||
background: $light_grey;
|
||||
color: $white;
|
||||
background: colour(light_grey);
|
||||
color: colour(white);
|
||||
}
|
||||
}
|
||||
&.artists,
|
||||
@ -128,7 +128,7 @@
|
||||
|
||||
:root .dragging &.hover,
|
||||
&.touch-drag-hover {
|
||||
border-top: 3px solid $blue;
|
||||
border-top: 3px solid colour(blue);
|
||||
margin-top: -3px;
|
||||
background: transparent;
|
||||
}
|
||||
@ -144,7 +144,7 @@
|
||||
width: 34px;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
color: $mid_grey;
|
||||
color: colour(mid_grey);
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
@ -313,7 +313,7 @@
|
||||
|
||||
a.artist:hover {
|
||||
.thumbnail {
|
||||
border-color: $turquoise;
|
||||
border-color: colour(turquoise);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -357,7 +357,7 @@
|
||||
}
|
||||
|
||||
&:not(.name):not(.duration):not(.album):not(.added){
|
||||
color: $mid_grey;
|
||||
color: colour(mid_grey);
|
||||
display: inline;
|
||||
width: auto !important;
|
||||
float: none !important;
|
||||
|
||||
@ -25,10 +25,10 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-color: lighten($dark_grey, 5%);
|
||||
border-color: lighten(colour(dark_grey), 5%);
|
||||
|
||||
.light-theme & {
|
||||
border-color: $faint_grey;
|
||||
border-color: colour(faint_grey);
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
border-top-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-right-color: $blue;
|
||||
border-right-color: colour(blue);
|
||||
}
|
||||
}
|
||||
|
||||
@ -77,10 +77,10 @@
|
||||
opacity: 1;
|
||||
|
||||
&:before {
|
||||
border-color: darken($secondary_grey, 5%);
|
||||
border-color: darken(colour(secondary_grey), 5%);
|
||||
|
||||
.light-theme & {
|
||||
border-color: $faint_grey;
|
||||
border-color: colour(faint_grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,10 +12,10 @@
|
||||
@include fadein();
|
||||
display: block;
|
||||
position: relative;
|
||||
background: $grey;
|
||||
background: colour(grey);
|
||||
padding: 16px 40px 16px 22px;
|
||||
margin: 10px 0 0 0;
|
||||
color: $white;
|
||||
color: colour(white);
|
||||
pointer-events: all;
|
||||
border-radius: 3px;
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
|
||||
&:not(.button) {
|
||||
color: inherit;
|
||||
border-bottom: 1px dotted $black;
|
||||
border-bottom: 1px dotted colour(black);
|
||||
}
|
||||
}
|
||||
|
||||
@ -58,24 +58,24 @@
|
||||
}
|
||||
|
||||
&--good {
|
||||
background: $green;
|
||||
background: colour(green);
|
||||
}
|
||||
|
||||
&--broadcast {
|
||||
background: $yellow;
|
||||
color: $black;
|
||||
background: colour(yellow);
|
||||
color: colour(black);
|
||||
}
|
||||
|
||||
&--info {
|
||||
background: $blue;
|
||||
background: colour(blue);
|
||||
}
|
||||
|
||||
&--warning {
|
||||
background: $orange;
|
||||
background: colour(orange);
|
||||
}
|
||||
|
||||
&--bad {
|
||||
background: $red;
|
||||
background: colour(red);
|
||||
}
|
||||
|
||||
&--shortcut {
|
||||
@ -85,8 +85,8 @@
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
margin: -200px 0 0 -200px;
|
||||
background: $overlay_dark;
|
||||
color: $white;
|
||||
background: colour(overlay_dark);
|
||||
color: colour(white);
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
position: relative;
|
||||
padding-right: 18px;
|
||||
padding-left: 50px;
|
||||
background: $blue;
|
||||
background: colour(blue);
|
||||
|
||||
&.cancelling {
|
||||
color: rgba(255,255,255,0.5);
|
||||
@ -120,7 +120,7 @@
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-right-color: $white;
|
||||
border-right-color: colour(white);
|
||||
}
|
||||
|
||||
.progress {
|
||||
@ -133,7 +133,7 @@
|
||||
overflow: hidden;
|
||||
|
||||
.fill {
|
||||
background: $white;
|
||||
background: colour(white);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -158,18 +158,18 @@
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: $mid_grey;
|
||||
background: colour(mid_grey);
|
||||
|
||||
&.high {
|
||||
background: $red;
|
||||
background: colour(red);
|
||||
}
|
||||
|
||||
&.medium {
|
||||
background: $orange;
|
||||
background: colour(orange);
|
||||
}
|
||||
|
||||
&.low {
|
||||
background: $green;
|
||||
background: colour(green);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -14,8 +14,8 @@
|
||||
bottom: 40px;
|
||||
right: -150px;
|
||||
width: 300px;
|
||||
background: $white;
|
||||
color: $black;
|
||||
background: colour(white);
|
||||
color: colour(black);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
@ -28,7 +28,7 @@
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: $white;
|
||||
background: colour(white);
|
||||
-ms-transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
@ -49,6 +49,41 @@
|
||||
padding: 12px 18px 8px;
|
||||
position: relative;
|
||||
|
||||
&--commands {
|
||||
@include clearfix();
|
||||
background: rgba(0,0,0,0.1);
|
||||
|
||||
.commands__item {
|
||||
@include click_feedback(rgba(0,0,0,0.5));
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
margin-bottom: 4px;
|
||||
text-align: center;
|
||||
color: colour(white);
|
||||
cursor: pointer;
|
||||
margin-right: 6px;
|
||||
float: left;
|
||||
|
||||
&__icon {
|
||||
padding-top: 7px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&__background {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 100%;
|
||||
background: colour(light_grey);
|
||||
z-index: -1;
|
||||
border-radius: 50%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid rgba(0,0,0,0.05);
|
||||
}
|
||||
@ -59,10 +94,10 @@
|
||||
.action {
|
||||
@include animate();
|
||||
cursor: pointer;
|
||||
color: $mid_grey;
|
||||
color: colour(mid_grey);
|
||||
|
||||
&:hover {
|
||||
color: $dark_grey;
|
||||
color: colour(dark_grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -81,41 +116,10 @@
|
||||
&__mute.control {
|
||||
@include click_feedback(rgba(0,0,0,0.5));
|
||||
padding: 2px;
|
||||
color: $black;
|
||||
color: colour(black);
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&__power {
|
||||
@include click_feedback(rgba(0,0,0,0.5));
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
margin-top: -2px;
|
||||
margin-right: 6px;
|
||||
|
||||
.icon {
|
||||
padding-top: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-bottom: 100%;
|
||||
background: $red;
|
||||
z-index: -1;
|
||||
border-radius: 50%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive($bp_medium){
|
||||
@ -135,8 +139,8 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: auto;
|
||||
padding: 4px 0 0;
|
||||
background: lighten($dark_grey, 17.5%);
|
||||
padding: 0;
|
||||
background: lighten(colour(dark_grey), 17.5%);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
max-height: 50vh;
|
||||
@ -160,7 +164,7 @@
|
||||
}
|
||||
|
||||
&__name {
|
||||
color: $white;
|
||||
color: colour(white);
|
||||
font-weight: 400;
|
||||
width: 30%;
|
||||
float: left;
|
||||
@ -174,7 +178,7 @@
|
||||
}
|
||||
|
||||
&__mute.control {
|
||||
color: $white;
|
||||
color: colour(white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
background: lighten($dark_grey, 15%);
|
||||
color: $white;
|
||||
background: lighten(colour(dark_grey), 15%);
|
||||
color: colour(white);
|
||||
|
||||
.current-track {
|
||||
@include animate();
|
||||
@ -15,11 +15,11 @@
|
||||
bottom: 50px;
|
||||
width: 220px;
|
||||
font-size: 14px;
|
||||
color: $white;
|
||||
color: colour(white);
|
||||
text-decoration: none;
|
||||
|
||||
.light-theme & {
|
||||
color: $darkest_grey;
|
||||
color: colour(darkest_grey);
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
@ -40,7 +40,7 @@
|
||||
margin-top: -9px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: $white;
|
||||
color: colour(white);
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
}
|
||||
@ -88,7 +88,7 @@
|
||||
.control {
|
||||
@include animate();
|
||||
@include noselect();
|
||||
color: $white;
|
||||
color: colour(white);
|
||||
cursor: pointer;
|
||||
padding: 10px 6px;
|
||||
display: inline-block;
|
||||
@ -105,7 +105,7 @@
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $turquoise !important;
|
||||
color: colour(turquoise) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -137,7 +137,7 @@
|
||||
right: 260px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
color: $mid_grey;
|
||||
color: colour(mid_grey);
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
@ -199,7 +199,7 @@
|
||||
right: 80px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: $white !important;
|
||||
color: colour(white) !important;
|
||||
|
||||
.title {
|
||||
padding-top: 0;
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
width: 2px;
|
||||
height: 0.5em;
|
||||
margin: 0.25em 1px;
|
||||
background: $light_grey;
|
||||
background: colour(light_grey);
|
||||
opacity: 0.2;
|
||||
|
||||
&.filled {
|
||||
@ -18,7 +18,7 @@
|
||||
}
|
||||
|
||||
.light-theme & {
|
||||
background: $darkest_grey;
|
||||
background: colour(darkest_grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
padding: 30px 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 3px;
|
||||
background: $darkest_grey;
|
||||
background: colour(darkest_grey);
|
||||
display: block;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
@ -60,7 +60,7 @@
|
||||
|
||||
&:hover {
|
||||
.menu-item__inner {
|
||||
background: lighten($dark_grey, 4%);
|
||||
background: lighten(colour(dark_grey), 4%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
|
||||
&--active {
|
||||
.menu-item__inner {
|
||||
background: lighten($dark_grey, 4%);
|
||||
background: lighten(colour(dark_grey), 4%);
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
padding-bottom: 40px;
|
||||
@ -82,20 +82,20 @@
|
||||
|
||||
.light-theme & {
|
||||
.menu-item__inner {
|
||||
background: $faint_grey;
|
||||
background: colour(faint_grey);
|
||||
|
||||
&:hover{
|
||||
background: darken($faint_grey, 4%);
|
||||
background: darken(colour(faint_grey), 4%);
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: darken($faint_grey, 4%);
|
||||
background: darken(colour(faint_grey), 4%);
|
||||
}
|
||||
}
|
||||
|
||||
&--active {
|
||||
.menu-item__inner {
|
||||
background: darken($faint_grey, 4%);
|
||||
background: darken(colour(faint_grey), 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -105,14 +105,14 @@
|
||||
.service {
|
||||
padding: 20px;
|
||||
border-radius: 0 0 3px 3px;
|
||||
background: lighten($dark_grey, 4%);
|
||||
background: lighten(colour(dark_grey), 4%);
|
||||
|
||||
.field:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.light-theme & {
|
||||
background: darken($faint_grey, 4%);
|
||||
background: darken(colour(faint_grey), 4%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -7,13 +7,13 @@ aside{
|
||||
z-index: 96;
|
||||
width: 220px;
|
||||
overflow: hidden;
|
||||
background: $darkest_grey;
|
||||
border-right: 1px solid lighten($dark_grey, 2%);
|
||||
color: $white;
|
||||
background: colour(darkest_grey);
|
||||
border-right: 1px solid lighten(colour(dark_grey), 2%);
|
||||
color: colour(white);
|
||||
box-sizing: border-box;
|
||||
|
||||
.light-theme & {
|
||||
background: lighten($faint_grey, 2%);
|
||||
background: lighten(colour(faint_grey), 2%);
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
@ -53,7 +53,7 @@ aside{
|
||||
font-family: "Overpass";
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: $white;
|
||||
color: colour(white);
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 10px 10px 8px;
|
||||
@ -61,7 +61,7 @@ aside{
|
||||
border-radius: 3px;
|
||||
|
||||
.light-theme & {
|
||||
color: $dark_grey;
|
||||
color: colour(dark_grey);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@ -83,12 +83,12 @@ aside{
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $turquoise;
|
||||
color: $white;
|
||||
background: colour(turquoise);
|
||||
color: colour(white);
|
||||
|
||||
.status {
|
||||
.icon {
|
||||
color: $white !important;
|
||||
color: colour(white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,7 +123,7 @@ aside{
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.5;
|
||||
color: $mid_grey;
|
||||
color: colour(mid_grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
|
||||
&__progress {
|
||||
position: absolute;
|
||||
background: $turquoise;
|
||||
background: colour(turquoise);
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -55,7 +55,7 @@
|
||||
@include animate(0.1s);
|
||||
content: '';
|
||||
display: block;
|
||||
background: $turquoise;
|
||||
background: colour(turquoise);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -1px;
|
||||
@ -69,10 +69,10 @@
|
||||
&--disabled,
|
||||
&--muted {
|
||||
.slider__track__progress {
|
||||
background: $mid_grey;
|
||||
background: colour(mid_grey);
|
||||
|
||||
&:after {
|
||||
background: $mid_grey !important;
|
||||
background: colour(mid_grey) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -85,7 +85,7 @@
|
||||
height: 12px;
|
||||
top: -4px;
|
||||
right: -6px;
|
||||
background: lighten($turquoise, 10%);
|
||||
background: lighten(colour(turquoise), 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
|
||||
&__group {
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid $grey;
|
||||
border-top: 1px solid colour(grey);
|
||||
|
||||
&:not(:last-child){
|
||||
padding-bottom: 20px;
|
||||
@ -79,7 +79,7 @@
|
||||
padding-left: 6px;
|
||||
|
||||
&.disconnected {
|
||||
color: $red;
|
||||
color: colour(red);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -119,7 +119,7 @@
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: $grey;
|
||||
background: colour(grey);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -12,16 +12,16 @@
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: $white;
|
||||
color: colour(white);
|
||||
|
||||
&.sortable-chosen {
|
||||
background: $grey;
|
||||
background: colour(grey);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 14px;
|
||||
padding-right: 0.1em;
|
||||
color: $darkest_grey;
|
||||
color: colour(darkest_grey);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -31,22 +31,22 @@
|
||||
&:focus,
|
||||
&:active {
|
||||
@include noanimate();
|
||||
background: $blue;
|
||||
color: $white;
|
||||
background: colour(blue);
|
||||
color: colour(white);
|
||||
}
|
||||
|
||||
.light-theme & {
|
||||
background: $faint_grey;
|
||||
background: colour(faint_grey);
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
background: darken($faint_grey, 4%);
|
||||
background: darken(colour(faint_grey), 4%);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background: $blue;
|
||||
color: $white;
|
||||
background: colour(blue);
|
||||
color: colour(white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
.sub-views {
|
||||
.option {
|
||||
@include feature_font();
|
||||
color: $white;
|
||||
color: colour(white);
|
||||
display: inline-block;
|
||||
margin-right: 25px;
|
||||
font-size: 15px;
|
||||
@ -11,7 +11,7 @@
|
||||
cursor: pointer;
|
||||
|
||||
.light-theme & {
|
||||
color: $darkest_grey;
|
||||
color: colour(darkest_grey);
|
||||
}
|
||||
|
||||
h4 {
|
||||
@ -19,10 +19,10 @@
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: $white;
|
||||
border-color: colour(white);
|
||||
|
||||
.light-theme & {
|
||||
border-color: $darkest_grey
|
||||
border-color: colour(darkest_grey)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -15,8 +15,8 @@ $module: 'tooltip';
|
||||
padding: 8px 10px 6px;
|
||||
border-radius: 3px;
|
||||
pointer-events: none;
|
||||
background: $white;
|
||||
color: $black;
|
||||
background: colour(white);
|
||||
color: colour(black);
|
||||
font-size: 11px;
|
||||
z-index: 97;
|
||||
white-space: nowrap;
|
||||
@ -31,7 +31,7 @@ $module: 'tooltip';
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: $white;
|
||||
background: colour(white);
|
||||
-ms-transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
@ -41,11 +41,11 @@ $module: 'tooltip';
|
||||
}
|
||||
|
||||
.light-theme & {
|
||||
background: $grey;
|
||||
color: $white;
|
||||
background: colour(grey);
|
||||
color: colour(white);
|
||||
|
||||
&:after {
|
||||
background: $grey;
|
||||
background: colour(grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user