From 279b5bc973e6bb8b977b4f39e1a407b2880f2314 Mon Sep 17 00:00:00 2001 From: Ondrej Zara Date: Mon, 15 Apr 2019 09:48:27 +0200 Subject: [PATCH] tint --- app/app.css | 32 +++++++++++++++++--------------- app/css/nav.less | 1 + app/css/player.less | 42 +++++++++++++++++++++--------------------- app/css/variables.less | 7 ++++--- 4 files changed, 43 insertions(+), 39 deletions(-) diff --git a/app/app.css b/app/app.css index 6da1868..4a1efde 100644 --- a/app/app.css +++ b/app/app.css @@ -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; } diff --git a/app/css/nav.less b/app/css/nav.less index 6219b4e..8362760 100644 --- a/app/css/nav.less +++ b/app/css/nav.less @@ -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) { diff --git a/app/css/player.less b/app/css/player.less index 3a40a3f..e03a045 100644 --- a/app/css/player.less +++ b/app/css/player.less @@ -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,15 +27,15 @@ overflow: hidden; .flex-column; justify-content: space-around; + + h2 { + font-size: 125%; + margin: 0; + } + + .title, .subtitle { .long-line; } } - - .title, .subtitle { .long-line; } - - [type=range] { - margin: 0; - min-width: 0; // fails to shrink otherwise - } - + .timeline { .flex-row; @@ -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; } } } diff --git a/app/css/variables.less b/app/css/variables.less index 36efd2a..f7bba89 100644 --- a/app/css/variables.less +++ b/app/css/variables.less @@ -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; }