diff --git a/playlist/static/style.css b/playlist/static/style.css index 319d2ad..7cccadf 100644 --- a/playlist/static/style.css +++ b/playlist/static/style.css @@ -1,11 +1,14 @@ body { background-color: #01817F; + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; + margin: 0; } .window:not([role="tabpanel"]) { position: fixed; z-index:99; - min-width: 380px; min-height: 520px; width:max(560px, 50vw); resize: both; @@ -28,6 +31,14 @@ body { flex-shrink: 0; } +.window.hide { + display:none; +} + +.window form { + margin: 0; +} + .window-body { flex-grow: 1; display: flex; @@ -60,6 +71,10 @@ iframe { #album h1, #album h2 { color: white; margin: 0; + overflow: hidden; + max-width: 100%; + white-space: nowrap; + text-overflow:ellipsis; } #album h1 { @@ -112,6 +127,23 @@ input[type="range"]::-moz-range-thumb { position: relative; } +.clippy .body .content { + max-height:calc(100vh - 197px); + overflow-y: scroll; +} + +@media (max-width: 500px) { + .clippy { + width: calc(100vw - 10px); + } + .clippy .body.hide { + display: none; + } + .body.hide ~ img { + display:none; + } +} + .clippy .body.hide { display: none; } @@ -120,7 +152,7 @@ input[type="range"]::-moz-range-thumb { content: ""; position: absolute; bottom: -13px; - left: 128px; + right: 128px; border-width: 13px 17px 0; border-style: solid; border-color: lightyellow transparent; @@ -132,7 +164,7 @@ input[type="range"]::-moz-range-thumb { content: ""; position: absolute; bottom: -14px; - left: 126px; + right: 127px; border-width: 14px 19px 0; border-style: solid; border-color: black transparent; diff --git a/playlist/templates/Base.html b/playlist/templates/Base.html index c44ab41..8607386 100644 --- a/playlist/templates/Base.html +++ b/playlist/templates/Base.html @@ -10,8 +10,11 @@ {% block window-title %}{% endblock %}