From 70d9e8b569d938b4c7bb273b28f5bec5d0a70f01 Mon Sep 17 00:00:00 2001
From: Wirlaburla <wirlaburla@worlio.com>
Date: Wed, 28 Jun 2023 19:51:06 -0500
Subject: [PATCH] Migrate button styles to separate css file.

---
 css/buttons.css | 188 +++++++++++++++++++++++++++++++++++++++++++++---
 style.css       | 185 +----------------------------------------------
 2 files changed, 179 insertions(+), 194 deletions(-)

diff --git a/css/buttons.css b/css/buttons.css
index b4a3c20..4d80693 100644
--- a/css/buttons.css
+++ b/css/buttons.css
@@ -1,16 +1,184 @@
-div.button {
+.button { 
+	background: var(--default-button-background);
+	border: var(--default-button-border);
+	font-family: var(--primary-font);
+	width: 44px;
+	height: 44px;
+	font-size: 12px;
+	font-weight: normal;
+	flex-shrink: 0;
+}
+
+.button:hover > a > img:nth-of-type(1) {
+	filter: contrast(50%);
+}
+
+.button:active > a > img:nth-of-type(1) {
+	filter: brightness(50%) saturate(0%);
+}
+
+.button > a {
 	display: block;
-	padding: 4px;
-	background: #D4D4D4;
-	border: 2px outset #B8B8B8;
+	width: 144px;
+	height: 48px;
+	margin: -2px;
 }
 
-div.button:hover {
-	background: #99D4AB;
-	border: 2px outset #77C68F;
+.button > a > img:nth-of-type(1) {
+	display: inline;
+	width: 48px;
+	height: 48px;
+	margin-right: 2px;
+	flex-shrink: 0;
 }
 
-div.button:active {
-	background: #9E9E9E;
-	border: 2px inset #707070;
+.popbutton {
+	width: 44px;
+	text-overflow: clip;
+	overflow: hidden;
+	transition-duration: 0.1s;
+}
+
+.longbutton, .smallbutton {
+	display: inline-block !important;
+	padding: 2px;
+	height: 20px;
+}
+
+.longbutton {
+	width: 116px;
+}
+
+.smallbutton {
+	width: 20px;
+}
+
+.longbutton a, .smallbutton a {
+	display: flex;
+	align-items: center;
+	height: 100% !important;
+	width: 100% !important;
+	margin: 0px -2px;
+}
+
+.longbutton.txt a {
+	display: inline-block !important;
+	width: 100%; height: 100%;
+	font-family: var(--primary-font);
+	text-decoration: none;
+	text-align: center;
+	color: var(--main-text, #000000);
+	vertical-align: middle;
+}
+
+.longbutton > a > img, .smallbutton > a > img {
+	width: 24px !important;
+	height: 24px !important;
+}
+
+.longbutton > a, .smallbutton > a {
+	color: var(--main-text);
+	text-decoration: none;
+	display: flex !important;
+	align-items: center;
+	height: 24px;
+	width: 120px;
+}
+	
+.longbutton > a img, .smallbutton > a img {
+	margin-right: 4px;
+}
+
+.oddbutton {
+	position: absolute;
+}
+
+.fakebutton {
+	display: inline-block !important;
+	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;
+		margin: 2px;
+	}
+	
+	.button a {
+		display: block;
+		width: 48px;
+		height: 48px;
+	}
+	
+	.popbutton {
+		font-size: 16px;
+		margin: 2px 4px;
+	}
+	
+	.popbutton:hover {
+		width: 140px;
+	}
+	
+	.popbutton > a {
+		color: var(--main-text);
+		text-decoration: none;
+		display: flex;
+		align-items: center;
+		height: 48px;
+		width: 144px;
+	}
+	
+	.popbutton > a img {
+		margin-right: 4px;
+	}
+	
+	.oddbutton {
+		top: 8px;
+		left: calc(64px + 8px);
+	}
+}
+
+@media only screen and (orientation: portrait) {
+	.button {
+		display: inline-block;
+		margin: 2px;
+	}
+	
+	.popbutton {
+		margin: 4px 2px;
+	}
+	
+	.popbutton:hover {
+		width: 44px;
+	}
+	
+	.popbutton a:nth-of-type(2) {
+		display: none;
+	}
+	
+	.oddbutton {
+		top: calc(64px + 8px);
+		left: 8px;
+	}
+	
+	.longbutton.collapse {
+		width: 20px;
+		margin: 2px !important;
+		font-size: 0px;
+	}
 }
\ No newline at end of file
diff --git a/style.css b/style.css
index c0f318d..bdc19e0 100644
--- a/style.css
+++ b/style.css
@@ -543,190 +543,7 @@ nav.top.alert p {
 
 /* == BUTTONS */
 
-.button { 
-	background: var(--default-button-background);
-	border: var(--default-button-border);
-	font-family: var(--primary-font);
-	width: 44px;
-	height: 44px;
-	font-size: 12px;
-	font-weight: normal;
-	flex-shrink: 0;
-}
-
-.button:hover > a > img:nth-of-type(1) {
-	filter: contrast(50%);
-}
-
-.button:active > a > img:nth-of-type(1) {
-	filter: brightness(50%) saturate(0%);
-}
-
-.button > a {
-	display: block;
-	width: 144px;
-	height: 48px;
-	margin: -2px;
-}
-
-.button > a > img:nth-of-type(1) {
-	display: inline;
-	width: 48px;
-	height: 48px;
-	margin-right: 2px;
-	flex-shrink: 0;
-}
-
-.popbutton {
-	width: 44px;
-	text-overflow: clip;
-	overflow: hidden;
-	transition-duration: 0.1s;
-}
-
-.longbutton, .smallbutton {
-	display: inline-block !important;
-	padding: 2px;
-	height: 20px;
-}
-
-.longbutton {
-	width: 116px;
-}
-
-.smallbutton {
-	width: 20px;
-}
-
-.longbutton a, .smallbutton a {
-	display: flex;
-	align-items: center;
-	height: 100% !important;
-	width: 100% !important;
-	margin: 0px -2px;
-}
-
-.longbutton.txt a {
-	display: inline-block !important;
-	width: 100%; height: 100%;
-	font-family: var(--primary-font);
-	text-decoration: none;
-	text-align: center;
-	color: var(--main-text, #000000);
-	vertical-align: middle;
-}
-
-.longbutton > a > img, .smallbutton > a > img {
-	width: 24px !important;
-	height: 24px !important;
-}
-
-.longbutton > a, .smallbutton > a {
-	color: var(--main-text);
-	text-decoration: none;
-	display: flex !important;
-	align-items: center;
-	height: 24px;
-	width: 120px;
-}
-	
-.longbutton > a img, .smallbutton > a img {
-	margin-right: 4px;
-}
-
-.oddbutton {
-	position: absolute;
-}
-
-.fakebutton {
-	display: inline-block !important;
-	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;
-		margin: 2px;
-	}
-	
-	.button a {
-		display: block;
-		width: 48px;
-		height: 48px;
-	}
-	
-	.popbutton {
-		font-size: 16px;
-		margin: 2px 4px;
-	}
-	
-	.popbutton:hover {
-		width: 140px;
-	}
-	
-	.popbutton > a {
-		color: var(--main-text);
-		text-decoration: none;
-		display: flex;
-		align-items: center;
-		height: 48px;
-		width: 144px;
-	}
-	
-	.popbutton > a img {
-		margin-right: 4px;
-	}
-	
-	.oddbutton {
-		top: 8px;
-		left: calc(64px + 8px);
-	}
-}
-
-@media only screen and (orientation: portrait) {
-	.button {
-		display: inline-block;
-		margin: 2px;
-	}
-	
-	.popbutton {
-		margin: 4px 2px;
-	}
-	
-	.popbutton:hover {
-		width: 44px;
-	}
-	
-	.popbutton a:nth-of-type(2) {
-		display: none;
-	}
-	
-	.oddbutton {
-		top: calc(64px + 8px);
-		left: 8px;
-	}
-	
-	.longbutton.collapse {
-		width: 20px;
-		margin: 2px !important;
-		font-size: 0px;
-	}
-}
+@import('css/buttons.css');
 
 /* == HEADING/HEADER */