diff --git a/muzak/settings.py b/muzak/settings.py index 9bfdf25..b7ecac3 100644 --- a/muzak/settings.py +++ b/muzak/settings.py @@ -12,7 +12,7 @@ SECRET_KEY = 'oefjei1lwe918Alkfwuf3ionwu-@kt)6m1e)ah$&^_i9y!qffhm-a$#m6+++' # SECURITY WARNING: don't run with debug turned on in production! DEBUG = True -ALLOWED_HOSTS = [] +ALLOWED_HOSTS = ['*'] INSTALLED_APPS = [ diff --git a/playlist/static/style.css b/playlist/static/style.css index 5755cda..873e05a 100644 --- a/playlist/static/style.css +++ b/playlist/static/style.css @@ -1,8 +1,9 @@ -.popup { +.window:not([role="tabpanel"]) { position: fixed; z-index:99; min-width: 380px; - max-width:540px; + min-height: 520px; + width:max(560px, 50vw); resize: both; overflow-y:scroll; overflow-x:visible; @@ -11,12 +12,38 @@ justify-content: space-between; } +@media (max-width: 600px) { + .window:not([role="tabpanel"]) { + left: 0; + width: calc(100% - 6px); + } +} + +.window { + flex-grow: 1; + flex-shrink: 0; +} + +.window-body { + flex-grow: 1; + display: flex; + flex-flow: column nowrap; +} + +/* tab menu fix */ +menu[role="tablist"] > li > a { + padding: 6px; + margin: 0; +} + iframe { opacity: 0; position: fixed; left: 100%; } +/* Media player */ + #album { background: black; width: 100%; @@ -58,5 +85,65 @@ input[type="range"]::-moz-range-thumb { background: transparent; border: 3px solid lightgray; border-bottom-color: darkgrey; - box-shadow: 1px 0 0 #fff,1px 1px 0 #fff,0 1px 0 #fff,-1px 0 0 #a9a9a9,-1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,-1px 1px 0 #fff,1px -1px #a9a9a9; +} + +/* Clippy */ +.clippy { + position: fixed; + z-index:99; + right: 5px; + bottom: 0px; + display: flex; + flex-flow: column nowrap; + align-items: flex-end; + width: 256px; +} + +.clippy .body { + background: lightyellow; + color: black; + padding: 10px; + border-radius: 10px; + border: 1px solid black; + position: relative; +} + +.clippy .body.hide { + display: none; +} + +.clippy .body::after { + content: ""; + position: absolute; + bottom: -13px; + left: 128px; + border-width: 13px 17px 0; + border-style: solid; + border-color: lightyellow transparent; + display: block; + width: 0; +} + +.clippy .body::before { + content: ""; + position: absolute; + bottom: -14px; + left: 126px; + border-width: 14px 19px 0; + border-style: solid; + border-color: black transparent; + display: block; + width: 0; +} + +.clippy .body button { + background: lightyellow; + border: 1px #999 solid; + border-radius: 2px; + box-shadow: none; + margin-top: 5px; +} + +.clippy img { + width: 128px; } diff --git a/playlist/templates/Base.html b/playlist/templates/Base.html index b6bdb05..8e94d36 100644 --- a/playlist/templates/Base.html +++ b/playlist/templates/Base.html @@ -10,41 +10,52 @@ -
-