Clippy update

Plus some refactors of the templates and styling

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;
 }