From 4995018b4050a265081a569b55f2faaccc539cfd Mon Sep 17 00:00:00 2001 From: Ondrej Zara Date: Sat, 30 Mar 2019 22:05:33 +0100 Subject: [PATCH] styling --- app/app.css | 81 ++++++++++++++++++++++++++++++++++++++++++-- app/css/app.less | 5 +++ app/css/library.less | 4 +++ app/css/player.less | 2 -- app/css/yt.less | 38 +++++++++++++++++++++ app/index.html | 1 + app/js/conf.js | 1 + app/js/yt.js | 16 +++++++-- 8 files changed, 141 insertions(+), 7 deletions(-) create mode 100644 app/css/yt.less diff --git a/app/app.css b/app/app.css index 04c61d4..0e8f3f1 100644 --- a/app/app.css +++ b/app/app.css @@ -40,6 +40,9 @@ button { cursor: pointer; flex-shrink: 0; } +.art img { + vertical-align: top; +} @font-face { font-family: 'Lato'; src: url('font/LatoLatin-Regular.woff2') format('woff2'); @@ -101,9 +104,6 @@ nav ul li.active { #player:not([data-flags~=repeat]) .repeat { opacity: 0.5; } -#player .art img { - vertical-align: top; -} #player .info { flex-grow: 1; white-space: nowrap; @@ -245,6 +245,9 @@ nav ul li.active { width: 32px; } } +#library li { + padding: 0; +} #library .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); @@ -341,6 +344,78 @@ nav ul li.active { width: 32px; } } +#yt { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +#yt ul { + flex-grow: 1; + overflow: auto; + list-style: none; + margin: 0; + padding: 0; +} +#yt li { + display: flex; + flex-direction: row; + align-items: center; + padding: 0 4px; + white-space: nowrap; +} +#yt h2 { + flex-grow: 1; + font-size: 100%; + font-weight: normal; + margin: 0; + overflow: hidden; + text-overflow: ellipsis; +} +#yt h2 .icon { + margin-right: 4px; + color: var(--primary); +} +#yt li:nth-child(odd) { + background-color: #555; +} +@media (pointer: coarse) { + #yt .icon { + width: 32px; + } +} +#yt .go { + width: 96px; + height: 96px; +} +#yt .go:disabled { + position: relative; +} +#yt .go:disabled::before { + content: ""; + display: block; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + border-top: 3px solid var(--primary); + border-radius: 50%; + animation: rotate linear 3s infinite; +} +#yt p { + margin: 16px 8px; + white-space: pre-wrap; +} +@keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} :root { --primary: dodgerblue; --fg: #fff; diff --git a/app/css/app.less b/app/css/app.less index cdbf6fe..4655ea4 100644 --- a/app/css/app.less +++ b/app/css/app.less @@ -40,6 +40,10 @@ button { flex-shrink: 0; } +.art img { + vertical-align: top; +} + @import "font.less"; @import "icons.less"; @import "main.less"; @@ -50,4 +54,5 @@ button { @import "library.less"; @import "fs.less"; @import "playlists.less"; +@import "yt.less"; @import "variables.less"; diff --git a/app/css/library.less b/app/css/library.less index cf01e49..2ecac4b 100644 --- a/app/css/library.less +++ b/app/css/library.less @@ -1,6 +1,10 @@ #library { .component; + li { + padding: 0; + } + .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); diff --git a/app/css/player.less b/app/css/player.less index 6efee57..f1e4ee0 100644 --- a/app/css/player.less +++ b/app/css/player.less @@ -7,8 +7,6 @@ &[data-state=play] .play { display: none; } &:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; } - .art img { vertical-align: top; } - .info { flex-grow: 1; white-space: nowrap; diff --git a/app/css/yt.less b/app/css/yt.less new file mode 100644 index 0000000..fe88962 --- /dev/null +++ b/app/css/yt.less @@ -0,0 +1,38 @@ +#yt { + .component; + + align-items: center; + justify-content: center; + + .go { + width: 96px; + height: 96px; + + &:disabled { + position: relative; + + &::before { + content: ""; + display: block; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + border-top: 3px solid var(--primary); + border-radius: 50%; + animation: rotate linear 3s infinite; + } + } + } + + p { + margin: 16px 8px; + white-space: pre-wrap; + } +} + +@keyframes rotate { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} diff --git a/app/index.html b/app/index.html index b47d941..14c91ca 100644 --- a/app/index.html +++ b/app/index.html @@ -50,6 +50,7 @@
+