diff --git a/playlist/static/style.css b/playlist/static/style.css index eea6bdf..3b92681 100644 --- a/playlist/static/style.css +++ b/playlist/static/style.css @@ -251,18 +251,18 @@ iframe { } /* Clippy */ -.clippy { +#clippy { position: fixed; z-index:99; - right: 5px; - bottom: 0px; display: flex; flex-flow: column nowrap; align-items: flex-end; width: 256px; + left: 550px; + top: 340px; } -.clippy .body { +#clippy .body { background: #ffffe0; color: black; padding: 10px; @@ -271,16 +271,21 @@ iframe { position: relative; } -.clippy .body .content { +#clippy .body .content { max-height:calc(100vh - 197px); overflow-y: scroll; } @media (max-width: 500px) { - .clippy { + #clippy { width: calc(100vw - 10px); + top: unset; + left: unset; + transform: none !important; + bottom: 0; + right: 0; } - .clippy .body.hide { + #clippy .body.hide { display: none; } .body.hide ~ img { @@ -288,11 +293,11 @@ iframe { } } -.clippy .body.hide { +#clippy .body.hide { display: none; } -.clippy .body::after { +#clippy .body::after { content: ""; position: absolute; bottom: -13px; @@ -304,7 +309,7 @@ iframe { width: 0; } -.clippy .body::before { +#clippy .body::before { content: ""; position: absolute; bottom: -14px; @@ -316,7 +321,7 @@ iframe { width: 0; } -.clippy .body button { +#clippy .body button { background: lightyellow; border: 1px #999 solid; border-radius: 2px; @@ -324,7 +329,7 @@ iframe { margin-top: 5px; } -.clippy img { +#clippy img { width: 128px; } diff --git a/playlist/templates/Base.html b/playlist/templates/Base.html index dce31a4..0ef654b 100644 --- a/playlist/templates/Base.html +++ b/playlist/templates/Base.html @@ -10,7 +10,8 @@ {% block window-title %}{% endblock %}