clippy move

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