From 5a47a0a5e15e028b6f72e003652e33941e4ab94e Mon Sep 17 00:00:00 2001
From: "Alexander \"Arav\" Andreev" <me@arav.top>
Date: Tue, 20 Sep 2022 03:38:35 +0400
Subject: [PATCH] Styled a new overlay.

---
 web/assets/css/main.css | 58 +++++++++++++++++++++++++----------------
 1 file changed, 35 insertions(+), 23 deletions(-)

diff --git a/web/assets/css/main.css b/web/assets/css/main.css
index 2cbc75b..b3f2840 100644
--- a/web/assets/css/main.css
+++ b/web/assets/css/main.css
@@ -105,8 +105,9 @@ section { margin-top: 1rem; }
 	align-items: center;
 	background-color: var(--overlay-background-color);
 	display: flex;
-	flex-direction: column;
-	height: 100%; 
+	flex-direction: row;
+	height: 100%;
+	justify-content: space-between;
 	left: 0;
 	max-height: 100%;
 	position: fixed;
@@ -114,18 +115,39 @@ section { margin-top: 1rem; }
 	visibility: hidden;
 	width: 100%; }
 
-#overlay video,
-#overlay audio,
-#overlay img {
+#overlay div {
+	align-items: center;
+	display: flex;
+	height: 100%;
+	width: 100%;
+	z-index: 9999; }
+
+#overlay :is(video, audio, img) {
 	margin: auto;
 	max-height: 100%;
-	max-width: 86%;
-}
+	max-width: 86%; }
 
 #overlay span {
+	bottom: 0;
 	color: var(--background-color);
+	left: 0;
+	position: fixed;
 	text-shadow: 0 0 .3rem var(--secondary-color);
-}
+	z-index: 999; }
+
+#overlay button {
+	background: none;
+	border: none;
+	color: var(--background-color);
+	font: inherit;
+	font-size: 2rem;
+	padding: 0 1rem;
+	height: 100%;
+	z-index: 999; }
+
+#overlay button:hover {
+	background-color: var(--background-color);
+	color: var(--primary-color); }
 
 table { overflow-y: scroll; width: 100%; }
 
@@ -153,25 +175,15 @@ td a:hover { transition: none; }
 td:nth-child(2),
 td:last-child { white-space: nowrap; }
 
-thead tr th.clickable {
-	cursor: pointer;
-}
+thead tr th.clickable { cursor: pointer; }
 
-thead tr th.clickable:hover {
-	color: var(--secondary-color);
-}
+thead tr th.clickable:hover { color: var(--secondary-color); }
 
-thead tr th.clickable:not(.sort-up):not(.sort-down)::after {
-	content: '⇅';
-}
+thead tr th.clickable:not(.sort-up):not(.sort-down)::after { content: '⇅'; }
 
-thead tr th.clickable.sort-up::after {
-	content: '↑';
-}
+thead tr th.clickable.sort-up::after { content: '↑'; }
 
-thead tr th.clickable.sort-down::after {
-	content: '↓';
-}
+thead tr th.clickable.sort-down::after { content: '↓'; }
 
 footer {
 	font-size: .8rem;