styling updates, button functions

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;