From e4e7819a9793c556cb931c06b49fb1ec534750a4 Mon Sep 17 00:00:00 2001
From: Wirlaburla <wirlaburla@worlio.com>
Date: Tue, 20 Jun 2023 18:47:11 -0500
Subject: [PATCH] Organize overlay dialog and tabbed-containers

---
 style.css | 295 ++++++++++++++++++++++++++++--------------------------
 1 file changed, 152 insertions(+), 143 deletions(-)

diff --git a/style.css b/style.css
index be726d6..a68cb2b 100644
--- a/style.css
+++ b/style.css
@@ -89,6 +89,156 @@ hr.arrow.right { background-position: 100% 0; }
 hr.arrow.up { background-position: 0 100%; }
 hr.arrow.down { background-position: 100% 100%; }
 
+/* = OVERLAY DIALOGS */
+
+body > div.overlay {
+	position: fixed;
+	top: 0px; bottom: 0px; left: 0px; right: 0px;
+	z-index: 20;
+	background-color: #0006;
+	width: 100%;
+	height: 100%;
+}
+
+body > div.overlay .dialog {
+	background: linear-gradient(180deg, #ffffff 0%, #f3dca9 8px);
+	border: 1px outset #a48e65;
+	max-height: 80%;
+	max-width: 400px;
+	margin: auto;
+}
+
+body > div.overlay .dialog table {
+	width: 100%;
+	max-width: unset;
+	margin: 0px;
+}
+
+body > div.overlay .dialog table th, body > div.overlay .dialog table td { padding: 4px; }
+
+body > div.overlay .dialog table.titlebox { font-family: var(--primary-font); }
+
+body > div.overlay .dialog table.titlebox img.close-button {
+	cursor: pointer;
+	user-select: none;
+}
+
+body > div.overlay .dialog table tr th:nth-of-type(1) {
+	text-align: left;
+}
+
+body > div.overlay .dialog table:not(.titlebox) {
+	background: #b3b3b3;
+	border: 1px outset #636363;
+	display: block;
+	height: 400px;
+	overflow: auto;
+}
+
+/* = TABBED CONTAINERS */
+
+.tabbed-container {
+	display: flex;
+	flex-direction: column;
+}
+
+.tabbed-container .tablist {
+	position: relative;
+	bottom: -2px;
+	display: flex;
+	flex-direction: row;
+	flex-shrink: 0;
+	overflow-x: auto;
+	overflow-y: hidden;
+}
+
+.tabbed-container .tablist .tab,
+.tabbed-container .tablist .faketab {
+	cursor: pointer;
+}
+
+.tablist a,
+.tablist a:link, .tablist a:visited {
+	color: var(--main-text);
+	text-decoration: none;
+}
+
+.tabbed-container .tablist .tab,
+.tabbed-container .tablist .faketab {
+	background-color: var(--tab-inactive);
+	border: var(--tab-border);
+	display: inline-block;
+	padding: 8px;
+	position: relative;
+	margin: auto 2px 0px 2px;
+	bottom: -2px;
+	text-align: center;
+	font-family: var(--primary-font);
+}
+
+.tabbed-container .tablist .tab *:not(.userlink) img,
+.tabbed-container .tablist .faketab img {
+	vertical-align: middle;
+}
+
+.tabbed-container .tablist .tab.selected, 
+.tabbed-container .tablist .faketab.selected {
+	background: var(--tab-selected, #d3d3d3);
+	background: -moz-linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%);
+	background: -webkit-linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%);
+	background: linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%);
+	bottom: -2px;
+	/*border-bottom: none;*/
+}
+
+.tabbed-container .box,
+.tabbed-container .dropdown {
+	background-color: var(--tab-selected);
+	border: var(--tab-border);
+	padding: 4px;
+	display: block;
+	flex: auto;
+}
+
+/* JS should handle positions and shit */
+.tabbed-container .dropdown {
+	position: absolute;
+	border-top: none;
+}
+
+@media only screen and (orientation: landscape) {
+	.tabbed-container.vertical {
+		flex-direction: row;
+	}
+
+	.tabbed-container.vertical > .tablist {
+		position: relative;
+		right: -1px;
+		bottom: 0px;
+		display: flex;
+		flex-direction: column;
+		overflow-x: hidden;
+		overflow-y: auto;
+		flex-shrink: 0;
+	}
+
+	.tabbed-container.vertical > .tablist .tab,
+	.tabbed-container.vertical > .tablist .faketab {
+		margin: 2px 0px;
+		right: -1px;
+		bottom: 0px;
+	}
+
+	.tabbed-container.vertical > .tablist .tab.selected,
+	.tabbed-container.vertical > .tablist .faketab.selected {
+		background: var(--tab-selected, #d3d3d3);
+		background: -moz-linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);
+		background: -webkit-linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);
+		background: linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);
+		border: var(--tab-border);
+	}
+}
+
 /* == MAIN BODY */
 
 body {
@@ -1284,6 +1434,7 @@ body.forum.new table.board-display tr.title-row input {
 }
 
 
+
 heading .button {
 	display: inline-block !important;
 }
@@ -1450,77 +1601,12 @@ textarea {
 	margin: 4px;
 }
 
-.tabbed-container .tablist .tab,
-.tabbed-container .tablist .faketab {
-	cursor: pointer;
-}
-
 .mailbox a,
-.mailbox a:link, .mailbox a:visited,
-.tablist a,
-.tablist a:link, .tablist a:visited {
+.mailbox a:link, .mailbox a:visited {
 	color: var(--main-text);
 	text-decoration: none;
 }
 
-.tabbed-container {
-	display: flex;
-	flex-direction: column;
-}
-
-.tabbed-container .tablist {
-	position: relative;
-	bottom: -2px;
-	display: flex;
-	flex-direction: row;
-	flex-shrink: 0;
-	overflow-x: auto;
-	overflow-y: hidden;
-}
-
-.tabbed-container .tablist .tab,
-.tabbed-container .tablist .faketab {
-	background-color: var(--tab-inactive);
-	border: var(--tab-border);
-	display: inline-block;
-	padding: 8px;
-	position: relative;
-	margin: auto 2px 0px 2px;
-	bottom: -2px;
-	text-align: center;
-	font-family: var(--primary-font);
-}
-
-.tabbed-container .tablist .tab *:not(.userlink) img,
-.tabbed-container .tablist .faketab img {
-	vertical-align: middle;
-}
-
-.tabbed-container .tablist .tab.selected, 
-.tabbed-container .tablist .faketab.selected {
-	background: var(--tab-selected, #d3d3d3);
-	background: -moz-linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%);
-	background: -webkit-linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%);
-	background: linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%);
-	bottom: -2px;
-	/*border-bottom: none;*/
-}
-
-.tabbed-container .box,
-.tabbed-container .dropdown {
-	background-color: var(--tab-selected);
-	border: var(--tab-border);
-	padding: 4px;
-	display: block;
-	flex: auto;
-}
-
-/* JS should handle positions and shit */
-.tabbed-container .dropdown {
-	position: absolute;
-	border-top: none;
-}
-
 .mailbox .message,
 .userbox .member {
 	background-color: var(--primary-container-background);
@@ -1536,83 +1622,6 @@ textarea {
 	image-rendering: pixelated;
 }
 
-body > div.overlay {
-	position: fixed;
-	top: 0px; bottom: 0px; left: 0px; right: 0px;
-	z-index: 20;
-	background-color: #0006;
-	width: 100%;
-	height: 100%;
-}
-
-body > div.overlay .dialog {
-	background: linear-gradient(180deg, #ffffff 0%, #f3dca9 8px);
-	border: 1px outset #a48e65;
-	max-height: 80%;
-	max-width: 400px;
-	margin: auto;
-}
-
-body > div.overlay .dialog table {
-	width: 100%;
-	max-width: unset;
-	margin: 0px;
-}
-
-body > div.overlay .dialog table th, body > div.overlay .dialog table td { padding: 4px; }
-
-body > div.overlay .dialog table.titlebox { font-family: var(--primary-font); }
-
-body > div.overlay .dialog table.titlebox img.close-button {
-	cursor: pointer;
-	user-select: none;
-}
-
-body > div.overlay .dialog table tr th:nth-of-type(1) {
-	text-align: left;
-}
-
-body > div.overlay .dialog table:not(.titlebox) {
-	background: #b3b3b3;
-	border: 1px outset #636363;
-	display: block;
-	height: 400px;
-	overflow: auto;
-}
-
-@media only screen and (orientation: landscape) {
-	.tabbed-container.vertical {
-		flex-direction: row;
-	}
-
-	.tabbed-container.vertical > .tablist {
-		position: relative;
-		right: -1px;
-		bottom: 0px;
-		display: flex;
-		flex-direction: column;
-		overflow-x: hidden;
-		overflow-y: auto;
-		flex-shrink: 0;
-	}
-
-	.tabbed-container.vertical > .tablist .tab,
-	.tabbed-container.vertical > .tablist .faketab {
-		margin: 2px 0px;
-		right: -1px;
-		bottom: 0px;
-	}
-
-	.tabbed-container.vertical > .tablist .tab.selected,
-	.tabbed-container.vertical > .tablist .faketab.selected {
-		background: var(--tab-selected, #d3d3d3);
-		background: -moz-linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);
-		background: -webkit-linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);
-		background: linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);
-		border: var(--tab-border);
-	}
-}
-
 .close {
 	position: absolute;
 	background-image: url('//assets.worlio.com/style/icons/deny');