From e6855498e3ace268dbbd05c3aea34768eda64f27 Mon Sep 17 00:00:00 2001
From: Wirlaburla <wirlaburla@worlio.com>
Date: Thu, 8 Jun 2023 12:54:17 -0500
Subject: [PATCH] Add buttontab

---
 style.css | 552 +++++-------------------------------------------------
 1 file changed, 44 insertions(+), 508 deletions(-)

diff --git a/style.css b/style.css
index c68104e..4974927 100644
--- a/style.css
+++ b/style.css
@@ -573,6 +573,21 @@ nav.top.alert p {
 	cursor: pointer;
 }
 
+.button:hover, .button.selected {
+	background: var(--hover-button-background);
+    border: var(--hover-button-border);
+}
+
+.button:active {
+	background: var(--active-button-background);
+    border: var(--active-button-border);
+}
+
+.button.disabled, .longbutton.disabled, .smallbutton.disabled {
+	background: var(--disabled-button-background);
+    border: var(--disabled-button-border);
+}
+
 @media only screen and (orientation: landscape) {
 	.button {
 		display: block;
@@ -751,6 +766,35 @@ nav.top.alert p {
 	height: 75%;
 }
 
+.header div.buttontab {
+  background: var(--default-button-background);
+  border: var(--default-button-border);
+  margin: -8px 4px 4px 4px;
+  padding: 8px 4px 2px 4px;
+}
+
+.header div.buttontab a {
+  color: var(--main-text);
+  display: inline-block;
+  text-decoration: none;
+  font-family: var(--primary-font);
+  height: 100%;
+}
+
+.header div.buttontab a img {
+  vertical-align: top;
+}
+
+.header div.buttontab:hover {
+  background: var(--hover-button-background);
+  border: var(--hover-button-border);
+}
+
+.header div.buttontab:active {
+  background: var(--active-button-background);
+  border: var(--active-button-border);
+}
+
 @media only screen and (orientation: landscape) {
 	.heading {
 		width: calc(100% + 8px);
@@ -860,47 +904,6 @@ body.home .home-container .blog-contents .blog-item {
 }
 body.home .home-container .blog-contents .blog-item i { text-align: right; }
 
-
-
-@media only screen and (orientation: landscape) {
-	body.forum .main{
-		max-width: 1200px;
-		margin: 4px auto;
-	}
-	
-	.forum .thread .reply, .forum .errors {
-		margin: 8px 32px;
-	}
-
-	.forum .thread .post {
-		display: flex;
-	}
-}
-
-.forum .thread .post { margin: 8px; }
-
-@media only screen and (orientation: portrait) {
-	.forum .thread .post, .forum .thread .reply, .errors {
-		margin: 8px;
-	}
-	
-	.forum .thread .threadsub {
-		flex-direction: column;
-	}
-	
-	.forum .thread .threadsub .buttons {
-		text-align: right;
-	}
-	
-	.forum .thread .post .bottombar {
-		flex-direction: column;
-	}
-	
-	.forum .thread .post .bottombar .buttons {
-		flex-direction: row;
-	}
-}
-
 /* == LIBRARY */
 
 body.library .lib {
@@ -964,63 +967,9 @@ body.library .lib.tiny > a {
 	min-width: 64px;
 }
 
-c, code, .codeblock:not(.title) {
-	background: var(--code-bg);
-	color: var(--code-text, #000000);
-	display: inline-block;
-	max-width: calc(100% - 4px);
-	/*white-space: pre-wrap;*/
-	word-wrap: anywhere;
-	font-family: Courier New;
-	padding: 2px;
-}
-
-code p {
-	margin: 2px;
-}
-
-.centerdiv {
-	padding: 8px;
-	text-align: center;
-	margin: auto;
-	max-width: 50%;
-	width: 50%;
-}
-
-.centerdiv img {
-	width: 100%;
-}
 
 
 
-.comments {
-	max-width: 100%;
-	overflow: auto;
-	margin: unset;
-	border-collapse: unset;
-	border: none;
-}
-
-.link {
-	text-decoration: underline;
-	color: blue;
-	cursor: pointer;
-}
-
-.link:hover {
-	color: blueviolet;
-}
-
-.styled-table > tbody > tr {
-	border-bottom: 1px dashed var(--border-line);
-}
-
-.styled-table > tbody > tr th {
-	background-color: rgba(255,255,255,0.4);
-	border-bottom: 1px solid var(--border-header);
-}
-
-.styled-table > tbody > tr td { border: 1px dotted var(--border-line); }
 
 .status.success, .output .success {color: var(--status-success);}
 .status.error, .output .error {color: var(--status-error);}
@@ -1402,15 +1351,6 @@ table {
 	.overlay .popup, .overlay .attachment {
 		max-height: 90%;
 	}
-	
-	.forum .thread .threadsub {
-		top: 100px;
-	}
-
-	.forum .thread .post .authorbar .user-stat {flex-direction: row;}
-	.forum .thread .post .authorbar .user-stat b {flex-grow: 1;}
-	.forum .thread .post .authorbar .avatar { width: 64px; height: 64px;}
-	.forum .thread .post-anchor { top: -10px; }
 }
 
 @media only screen and (orientation: landscape) {
@@ -1449,21 +1389,6 @@ table {
 		background: linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);
 		border: var(--tab-border);
 	}
-	
-	.forum .thread .threadsub {
-		top: 35px;
-	}
-
-	.forum .thread .post .authorbar {
-		width: 150px;
-		flex-shrink: 0;
-		text-align: center;
-		flex-direction: column;
-	}
-
-	.forum .thread .post .authorbar .user-stat {flex-direction: column;}
-	.forum .thread .post .authorbar .avatar { width: 128px; height: 128px;}
-	.forum .thread .post-anchor { top: -74px; }
 }
 
 .close {
@@ -1477,336 +1402,6 @@ table {
 	right: 8px;
 }
 
-.verinfo {
-	display: inline;
-	position: fixed;
-	bottom: 4px;
-	right: 4px;
-	opacity: 0.3;
-	pointer-events: none;
-}
-
-/* FORUM */
-table.board { font-family: var(--primary-font); }
-
-table.board th { 
-	text-align: left;
-	padding: 4px;
-	background-color: var(--forum-header, #f3dca9);
-}
-
-body.forum.board table.board tr:nth-child(0) { border: var(--forum-header-border); }
-
-body.forum.board table.board tr:not(.subboard) td:nth-child(4),
-body.forum.board table.board tr:not(.subboard) th:nth-child(3) { text-align: right; }
-
-body.forum table.board td:nth-child(3) * { vertical-align: middle; }
-
-body.forum table.board th {
-	cursor: pointer;
-	user-select: none;
-	border: var(--forum-header-border);
-}
-
-table.board tr { 
-	text-align: left;
-	padding: 4px;
-	background-color: var(--forum-content);
-	border: var(--forum-content-border);
-}
-
-body.forum.board table.board th {
-	font-weight: normal;
-}
-
-body.forum table.board.collapsed td { display: none; }
-
-@media only screen and (max-width: 1024px) {
-	body.forum table.board td:nth-child(4),
-	body.forum table.board col:nth-child(4) { display: none; }
-	body.forum.board table.board td:nth-child(4),
-	body.forum.board table.board col:nth-child(4),
-	body.forum_watched table.board td:nth-child(4),
-	body.forum_watched table.board col:nth-child(4) { display: none; }
-	table.board td:nth-child(3) { border-right: var(--forum-content-border); }
-}
-
-table.board .status {
-	position: relative;
-	height: 0px;
-	top: -20px;
-	text-align: right;
-}
-
-.forum .category {
-	font-family: var(--primary-font);
-}
-
-.forum > .category,
-.forum > .board,
-.forum > .thread {
-	margin-top: 8px;
-}
-
-.forum .category.collapsed .board {
-	display: none;
-}
-
-.forum .category.collapsed name {
-	opacity: 0.5;
-}
-
-.forum .board name,
-.forum .category name,
-.forum .thread name {
-	display: flex;
-	background-color: var(--forum-header);
-	border: var(--forum-header-border);
-	font-family: var(--primary-font);
-	padding: 4px;
-}
-
-.forum .category name {
-	cursor: pointer;
-	user-select: none;
-	margin-bottom: -1px;
-}
-
-.forum .board name .info,
-.forum .category name .info,
-.forum .thread name .info {
-	flex-grow: 1;
-}
-
-.forum .board name .info i,
-.forum .category name .info i,
-.forum .thread name .info i {
-	font-size: 12px;
-	color: var(--subtitle);
-}
-
-.forum .board name .buttons,
-.forum .category name .buttons,
-.forum .thread name .buttons {
-	flex-grow: 0;
-	padding: 2px;
-}
-
-.forum .thread name .infobox {
-	flex-grow:1;
-}
-
-.forum .thread name .infobox .author {
-	color: var(--subtitle);
-}
-
-.forum .category .board.sub {
-	margin-left: 16px;
-}
-
-.forum .category .board {
-	display: flex;
-	background-color: var(--forum-content);
-	border: var(--forum-content-border);
-	padding: 8px;
-	margin-left: 8px;
-	margin-bottom: -1px;
-}
-
-.forum .category .board .details1 {
-	flex-grow: 1;
-}
-
-.forum .category .board .details2 {
-	flex-grow: 0;
-	text-align: center;
-	padding: 0px 4px;
-}
-
-.forum .category .board .desc {
-	font-size: 12px;
-}
-
-.forum .board .thread {
-	display: flex;
-	background-color: var(--forum-content);
-	border: var(--forum-content-border);
-	border-top: none;
-	margin-left: 8px;
-	margin-right: 8px;
-	padding: 8px;
-	font-family: var(--primary-font);
-}
-
-.forum .board .thread .userlink {
-	margin: unset;
-}
-
-.forum .board .thread .details1 {
-	flex-grow: 1;
-}
-
-.forum .board .thread .details1 .post-count {
-	color: var(--subtitle);
-}
-
-.forum .board .thread .details2 {
-	flex-grow: 0;
-	text-align: right;
-}
-
-.forum .board .thread .author {
-	display: inline-block;
-	height: 16px;
-	padding-top: 4px;
-}
-
-.forum .board .thread .time {
-	color: var(--subtitle);
-}
-
-.forum .thread .post .post-content,
-.forum .thread .reply,
-.forum .errors {
-	background-color: var(--post);
-	border: var(--post-border);
-	padding: 4px;
-}
-
-.forum .thread .post .post-sig {
-	margin: 0px -4px;
-	margin-top: 8px;
-	padding: 4px;
-	max-height: 128px;
-	overflow-y: hidden;
-}
-
-.forum .thread .reply .submit {
-	display: flex;
-}
-
-.forum .thread .reply .title,
-.forum .errors .title {
-	display: flex;
-	font-family: var(--primary-font);
-	padding: 4px;
-	margin: -8px;
-	margin-bottom: 8px;
-}
-
-.forum .thread .reply .title {
-	display: flex;
-}
-
-.forum .thread .reply .title input {
-	flex-grow: 1;
-}
-
-.forum .thread .post .authorbar {
-	background-color: var(--post-author);
-	border: var(--post-author-border);
-	display: flex;
-	min-height: 64px;
-	padding: 2px;
-}
-
-.forum .thread .post .authorbar .author {
-	display: flex;
-	flex-grow:1;
-	flex-direction: column;
-}
-
-.forum .thread .post .authorbar .user-stat {
-	font-family: var(--primary-font);
-	color: var(--subtitle);
-	display: flex;
-}
-
-.forum .thread .post .authorbar img.avatar {
-	margin: 10px;
-	border: var(--primary-container-border);
-}
-
-.forum .thread .reply .title,
-.forum .errors .title {
-	background-color: var(--forum-sub, #d7ccb6);
-	border: var(--forum-sub-border, 1px solid #99907b);
-}
-
-.forum .thread .threadsub {
-	background-color: var(--forum-sub, #d7ccb6);
-	position: sticky;
-	border: var(--forum-sub-border, 1px solid #99907b);
-	border-top: none;
-	display: flex;
-	padding: 2px;
-	margin: 0px 16px;
-	font-family: var(--primary-font);
-	z-index: 5;
-}
-
-.forum .thread .threadsub .author {
-	flex-grow: 1;
-}
-
-.forum .thread .post img,
-.forum .thread .post video,
-.forum .thread .post audio,
-.forum .thread .post iframe {
-	max-width: 100%;
-}
-
-.forum .thread .post .topbar {
-	/*border: var(--post-border, 1px solid #bfb9a9);*/
-	border-bottom: none;
-	background-color: var(--post-bottombar, #d2d2d2);
-	padding: 4px;
-	display: flex;
-	font-family: var(--primary-font);
-	margin: -4px; margin-bottom: 4px;
-}
-
-.forum .thread .post .topbar .timestamp {
-	color: var(--subtitle, #525252);
-	flex-grow: 1;
-}
-
-.forum .thread .post .topbar .idtag {
-	color: var(--subtitle, #525252);
-}
-
-.forum .thread .post .post-content {
-	display: flex;
-	flex-direction: column;
-	flex-grow: 1;
-}
-
-.forum .thread .post-anchor {
-	pointer-events: none;
-	position: relatve;
-}
-
-.forum .thread .post .post-content .post-body { flex-grow: 1; }
-
-.forum .thread .post .buttonbar {
-	background-color: var(--post-bottombar, #d2d2d2);
-	display: flex;
-	margin: -4px; margin-top: 8px;
-	font-family: var(--primary-font);
-}
-
-.forum .thread .post .buttonbar a {
-	padding: 2px 4px;
-}
-
-.forum .thread .options .option .name {
-	font-family: var(--primary-font);
-}
-
-.forum .thread name .thricon {
-	margin: 0px 4px;
-}
-
 .thricon {
 	height: 16px;
 }
@@ -1978,66 +1573,7 @@ div.emotebox .emote-container:hover {
 	cursor: pointer;
 }
 
-body.forum .main { display: flex; gap: 4px; }
-@media only screen and (orientation: portrait) {
-	body.forum .main { flex-direction: column; }
-}
-@media only screen and (orientation: landscape) {
-	body.forum .sidebar {
-		width: 512px;
-	}
-}
 
-body.forum .main .forum { 
-	flex-grow: 1;
-}
-body.forum .sidebar { 
-	display: flex;
-	flex-direction: column;
-	margin: 4px;
-	gap: 4px;
-	margin-top: 8px;
-}
-body.forum .sidebar .box {
-	display: flex;
-	flex-direction: column;
-}
-body.forum .sidebar .box {
-	background: var(--primary-container-background);
-	border: var(--primary-container-border);
-	padding: 4px;
-}
-
-body.forum .sidebar .box .content .thread {
-  background: var(--secondary-container-background);
-  border: var(--secondary-container-border);
-  padding: 2px;
-  margin: 4px 0px;
-}
-
-body.forum .sidebar .box .content .subject {font-family: var(--primary-font);}
-body.forum .sidebar .box name {
-	font-family: var(--primary-font);
-	font-weight: bold;
-}
-body.forum .sidebar .box .thread .info {font-family: var(--primary-font);}
-body.forum .sidebar .box .thread .info .loc {font-size: 12px;}
-body.forum .sidebar .box .thread .info .timestamp {color: var(--subtitle);}
-
-.button:hover, .button.selected {
-	background: var(--hover-button-background);
-    border: var(--hover-button-border);
-}
-
-.button:active {
-	background: var(--active-button-background);
-    border: var(--active-button-border);
-}
-
-.button.disabled, .longbutton.disabled, .smallbutton.disabled {
-	background: var(--disabled-button-background);
-    border: var(--disabled-button-border);
-}
 
 /* USER PROFILE PAGE */
 body.user-profile .user-infobox {