This commit is contained in:
Ondrej Zara 2019-04-15 09:48:27 +02:00
parent 8331a0d3a3
commit 279b5bc973
4 changed files with 43 additions and 39 deletions

View file

@ -121,6 +121,7 @@ nav ul li .icon {
nav ul li.active {
border-top-color: var(--primary);
color: var(--primary);
background-color: rgb(var(--primary-raw), 0.1);
}
@media (max-width: 480px) {
nav ul li {
@ -147,6 +148,10 @@ nav ul li.active {
#player:not([data-flags~=repeat]) .repeat {
opacity: 0.5;
}
#player [type=range] {
margin: 0;
min-width: 0;
}
#player .art {
margin-right: 0;
height: 96px;
@ -155,10 +160,6 @@ nav ul li.active {
#player .art .icon {
width: 96px;
}
#player h2 {
font-size: 125%;
margin: 0;
}
#player .info {
flex-grow: 1;
padding-left: var(--icon-spacing);
@ -167,16 +168,16 @@ nav ul li.active {
flex-direction: column;
justify-content: space-around;
}
#player .title,
#player .subtitle {
#player .info h2 {
font-size: 125%;
margin: 0;
}
#player .info .title,
#player .info .subtitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#player [type=range] {
margin: 0;
min-width: 0;
}
#player .timeline {
display: flex;
flex-direction: row;
@ -202,11 +203,11 @@ nav ul li.active {
justify-content: space-around;
}
#player .controls .playback .icon {
width: 32px;
width: 40px;
}
#player .controls .playback .icon-play,
#player .controls .playback .icon-pause {
width: 48px;
width: 64px;
}
#player .controls .volume {
display: flex;
@ -746,6 +747,7 @@ nav ul li.active {
:root {
--font-size-large: 112.5%;
--icon-spacing: 4px;
--primary: rgb(var(--primary-raw));
}
:root[data-theme=light] {
--fg: #333;
@ -760,11 +762,11 @@ nav ul li.active {
--shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}
:root[data-color=dodgerblue] {
--primary: dodgerblue;
--primary-raw: 30, 144, 255;
}
:root[data-color=darkorange] {
--primary: darkorange;
--primary-raw: 255, 140, 0;
}
:root[data-color=limegreen] {
--primary: limegreen;
--primary-raw: 50, 205, 50;
}

View file

@ -22,6 +22,7 @@ nav ul {
&.active {
border-top-color: var(--primary);
color: var(--primary);
background-color: rgb(var(--primary-raw), 0.1);
}
@media (max-width: 480px) {

View file

@ -1,4 +1,5 @@
#player {
@art-size: 96px;
.flex-row;
align-items: stretch;
@ -6,18 +7,17 @@
&[data-state=play] .play { display: none; }
&:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; }
.art {
margin-right: 0;
@size: 96px;
height: @size;
img, .icon {
width: @size;
}
[type=range] {
margin: 0;
min-width: 0; // fails to shrink otherwise
}
h2 {
font-size: 125%;
margin: 0;
.art {
margin-right: 0;
height: @art-size;
img, .icon {
width: @art-size;
}
}
.info {
@ -27,13 +27,13 @@
overflow: hidden;
.flex-column;
justify-content: space-around;
}
.title, .subtitle { .long-line; }
h2 {
font-size: 125%;
margin: 0;
}
[type=range] {
margin: 0;
min-width: 0; // fails to shrink otherwise
.title, .subtitle { .long-line; }
}
.timeline {
@ -58,11 +58,11 @@
justify-content: space-around;
.icon {
width: 32px;
width: 40px;
}
.icon-play, .icon-pause {
width: 48px;
width: 64px;
}
}
@ -93,7 +93,7 @@
.info {
order: 1;
height: 96px;
height: @art-size;
}
}
}

View file

@ -1,6 +1,7 @@
:root {
--font-size-large: 112.5%;
--icon-spacing: 4px;
--primary: rgb(var(--primary-raw));
}
:root[data-theme=light] {
@ -18,13 +19,13 @@
}
:root[data-color=dodgerblue] {
--primary: dodgerblue;
--primary-raw: 30, 144, 255;
}
:root[data-color=darkorange] {
--primary: darkorange;
--primary-raw: 255, 140, 0;
}
:root[data-color=limegreen] {
--primary: limegreen;
--primary-raw: 50, 205, 50;
}