From adfe639cb9430fa11f4e1e8bbb03392ebc00edb0 Mon Sep 17 00:00:00 2001
From: Said Achmiz <said@saidachmiz.net>
Date: Thu, 22 Sep 2022 23:10:47 -0400
Subject: [PATCH] Mobile UI refactor, part III

---
 www/css/theme_tweaker.css | 227 +++++++++++++++++++++++++---------------------
 www/script.js             | 210 +++++++++++++++++++++---------------------
 www/theme_tweaker.css.php | 227 +++++++++++++++++++++++++---------------------
 3 files changed, 351 insertions(+), 313 deletions(-)

diff --git a/www/css/theme_tweaker.css b/www/css/theme_tweaker.css
index c38c578b..f99f309b 100644
--- a/www/css/theme_tweaker.css
+++ b/www/css/theme_tweaker.css
@@ -27,31 +27,7 @@
 	background-color: #000;
 	opacity: 0.6;
 }
-#theme-tweaker-ui::after {
-	content: "";
-	position: fixed;
-	top: 87px;
-	right: calc((100% - 900px) / 2 + 26px);
-	background-color: #bfb8bf;
-	width: 18px;
-	height: 16px;
-	z-index: 2;
-	background-image: url('data:image/gif;base64,R0lGODlhGAAUAPEAMQMDAwQEBLGpsc/iOywAAAAAGAAUAAACPJSPqcu9AR0MbNI3G8hpAidYiAgKWxRCX2lYJGucKtxxdOveqXuxXmyTBF+VWULWII6CCIDT4VzpptRqAQA7');
-	background-size: 100%;
-	background-repeat: no-repeat;
-	background-position: center center;
-	box-shadow: 
-		0 -1px 0 0 #fff8ff,
-		-1px 0 0 0 #fff8ff,
-		-1px -1px 0 0 #fff8ff,
-		0 0 0 1px #7f787f,
-		0 -1px 0 1px #dfd8df,
-		-1px 0 0 1px #dfd8df,
-		-1px -1px 0 1px #dfd8df,
-		0 0 0 2px #030303;
-	cursor: pointer;
-}
-#theme-tweaker-ui .main-theme-tweaker-window {
+.theme-tweaker-window {
 	position: fixed;
 	z-index: 1;
 	background-color: #bfb8bf;
@@ -65,16 +41,91 @@
 		-1px 0 0 1px #dfd8df,
 		-1px -1px 0 1px #dfd8df,
 		0 0 0 2px #030303;
+	display: flex;
+	flex-flow: column;
+	align-items: stretch;
+	justify-content: stretch;
+	padding: 2px;
+}
+
+.theme-tweaker-window-title-bar {
+	height: 25px;
+	width: 100%;
+	display: flex;
+	background-color: #03037f;
+}
+
+.theme-tweaker-window-title {
+	flex: 1 1 auto;
+	color: #fff8ff;
+	padding: 4px 6px 3px 30px;
+	cursor: default;
+	text-shadow: 1px 0 0 #fff;
+	letter-spacing: 1px;
+}
+.theme-tweaker-window-title h1 {
+	font-size: inherit;
+	font-weight: normal;
+	margin: 0;
+}
+
+.theme-tweaker-window-title-bar-buttons-container {
+	display: flex;
+	align-items: center;
+	padding: 4px;
+}
+
+.theme-tweaker-window-title-bar-buttons-container button {
+	width: 18px;
+	height: 16px;
+	background-size: 14px;
+	background-repeat: no-repeat;
+	background-position: center center;
+	margin: 0 0 0 7px;
+}
+
+.theme-tweaker-window-title-bar-buttons-container .help-button {
+	background-image: url('data:image/gif;base64,R0lGODdhGAAUAJEAAAAAAP///wAAAAAAACH5BAkAAAIALAAAAAAYABQAAAIvlH+gi+22InhUStqu0Hiz9HURMnaeAoYmWa6s6p5o/E50feP5zrtt/rsFacMepQAAOw==');	
+}
+
+.theme-tweaker-window-title-bar-buttons-container .minimize-button.minimize {
+	background-image: url('data:image/gif;base64,R0lGODdhGAAUAJEAAAAAAP///wAAAAAAACH5BAkAAAIALAAAAAAYABQAAAIflI+py+0Po5y02ouz3pyCD4YiwIwmWJ5mqopsi3ZyAQA7');	
+}
+.theme-tweaker-window-title-bar-buttons-container .minimize-button.maximize {
+	background-image: url('data:image/gif;base64,R0lGODdhGAAUAJEAAAAAAP///wAAAAAAACH5BAkAAAIALAAAAAAYABQAAAI3lI+pCu0PHYv0zVovjnOt1nkJOAJiGZ4GibCqu5pqnL5ye9v1CQu91/t9crSZj3jccEpKiPFZAAA7');	
+}
+
+.theme-tweaker-window-title-bar-buttons-container .close-button {
+	background-image: url('data:image/gif;base64,R0lGODlhGAAUAPEAMQMDAwQEBLGpsc/iOywAAAAAGAAUAAACPJSPqcu9AR0MbNI3G8hpAidYiAgKWxRCX2lYJGucKtxxdOveqXuxXmyTBF+VWULWII6CCIDT4VzpptRqAQA7');
+	background-size: 100%;
+	background-position: center bottom;
+}
+
+.theme-tweaker-window-content-view {
+	padding: 12px;
+	height: calc(100% - 25px);
+	display: flex;
+	flex-flow: column;
+}
+
+#theme-tweaker-ui .main-window {
 	width: calc(900px - 40px);
 	max-width: calc(100vw - 20px);
 	max-height: calc(100vh - 160px);
 	top: 80px;
 	left: calc((100% - 900px) / 2 + 20px);
-	padding: 30px 10px 10px 10px;
+	height: 1200px;
+}
+#theme-tweaker-ui .theme-tweaker-window-title-bar {
+	background-repeat: no-repeat;
+	background-size: 20px;
+	background-position: 4px 50%;
+}
+#theme-tweaker-ui .main-window .theme-tweaker-window-title-bar {
+	background-image: url('data:image/gif;base64,R0lGODdhIAAgAOYAAAAAAAMDCwMD9AQDqwQDsgUDpAoDBAoDoqsDVKsDWq4DT7ADVrIDXf4DC/8D/QQEnAUE/qQET6QEUqQEW7AESvUEA/0EBAUFEPAFCPcF/wMImgMI/gMJBZsJWvIJBJCBmIuElH2Fj4WFlIiFfImFhoOGi4qGjI6GmpKGjoKHm5OHk4mIhoWKkoqKjIqKk4SLjIeLfY2LmX2NhYSOmoeOhoKQkQOkWKOkaqWlXaulXKSmTqSmUqqmYQqnYKmnVQWoXaWocZ+pbAiqVaOqVKSqTKmqVKyqWwOrVJ+rU6WrWrCuWcS+2Mi/wMy/082/zsrCzMrDxcLE1cXExLzFy77FxMTFzMzF1bfGwbzGvrfH18vIw7/J08HJu8PJxMPJzLTKyL3KzL7Kw73Lvs3Lyr3Mt8HM0LPRuf/2A/j38//3+fz+Cv3+9P7+BO//A/T/BPT/Cfb//vf/9///7P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAAHQALAAAAAAgACAAAAf/gHSCg4SFQ0NJOTqFjI2ORXNzaZEAjpaNRnBVbA4OV0oBl4w0KS4iLjI5c11unRlsOQYgLyUutS2VjSEHBQQDDz5zb1icGVo4AATKDwO/F441vgXNQ3BSPWFsUmxURgAFAHMBcwC5jC4azb2qP0c22WBqUkMAAfXl5oUmTV5cVGBG5hxpx0YMmypJUCCjUgWLlHyEWJiJFGnHHDZCtJ0Zo4NcmR0ArMypAnGQiCUU1yCZ84WNBQxb2HgB8IINFHpzooRqZGLMnDWRcFy0QJQbGzIH2/AwsOahoxdMJDAAOseiy6IQIESxidNpoxMdiIabg0STGi9sNkAQAOGJEWQ5/0sKYoGgQYUALSKp6sLGCZusbFbgXDNFLh0FRMVSBOBjh5EdRYrswBmJy05GExJboDknDjl7+Mql9HKZUIQGmy1U2AxnTuufFGN3/iC3roUAiQGwAEpVNtUdIMoVQiD2RQQLqMP1jk2VhxsAJkzkk6AawInjyV2klD1niJsSJrxgMbdALAgZcySg3sx9Dpo1RNjMMSCltbnTm0FESpBbhGw5QCShhjAAeEGJIJltlgACCUygAHHIjUVREWs8cRE5Y+VCgWqoeaDZegDMQAUVYYDhAxtZuHERAFSEUwl1FlwQWmi5GYBPDmyEcaEBLrhIR4IAuODCCCKw4AIICd5WwlEgAOQAg3xqiEbOBKgFUAIKjcBogQGEcADADfIVSImN5bzgCABkWlkIY89NcaApKpBgyS0tyMBIkzH4R44ofDJJBABR9NjnoAAEEaRhg94pXCAAOw==');
 }
 #theme-tweaker-ui .controls-container {
 	overflow-y: scroll;
-	max-height: calc(100vh - 320px);
 	box-shadow: 
 		0 -1px 0 0 #030303,
 		-1px 0 0 0 #030303,
@@ -85,48 +136,30 @@
 		-1px -1px 0 1px #7f787f,
 		0 0 0 2px #fff8ff;
 	padding: 16px;
-	margin: 4px;
-}
-
-#theme-tweaker-ui h1 {
-	font-size: inherit;
-	font-weight: normal;
-	margin: 0;
-	position: absolute;
-	background-color: #03037f;
-	background-repeat: no-repeat;
-	background-size: 20px;
-	color: #fff8ff;
-	padding: 4px 6px 3px 30px;
-	background-position: 4px 50%;
-	left: 2px;
-	top: 2px;
-	width: calc(100% - 4px);
-	cursor: default;
-	text-shadow: 1px 0 0 #fff;
-	letter-spacing: 1px;
-}
-#theme-tweaker-ui .main-theme-tweaker-window h1 {
-	background-image: url('data:image/gif;base64,R0lGODdhIAAgAOYAAAAAAAMDCwMD9AQDqwQDsgUDpAoDBAoDoqsDVKsDWq4DT7ADVrIDXf4DC/8D/QQEnAUE/qQET6QEUqQEW7AESvUEA/0EBAUFEPAFCPcF/wMImgMI/gMJBZsJWvIJBJCBmIuElH2Fj4WFlIiFfImFhoOGi4qGjI6GmpKGjoKHm5OHk4mIhoWKkoqKjIqKk4SLjIeLfY2LmX2NhYSOmoeOhoKQkQOkWKOkaqWlXaulXKSmTqSmUqqmYQqnYKmnVQWoXaWocZ+pbAiqVaOqVKSqTKmqVKyqWwOrVJ+rU6WrWrCuWcS+2Mi/wMy/082/zsrCzMrDxcLE1cXExLzFy77FxMTFzMzF1bfGwbzGvrfH18vIw7/J08HJu8PJxMPJzLTKyL3KzL7Kw73Lvs3Lyr3Mt8HM0LPRuf/2A/j38//3+fz+Cv3+9P7+BO//A/T/BPT/Cfb//vf/9///7P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAAHQALAAAAAAgACAAAAf/gHSCg4SFQ0NJOTqFjI2ORXNzaZEAjpaNRnBVbA4OV0oBl4w0KS4iLjI5c11unRlsOQYgLyUutS2VjSEHBQQDDz5zb1icGVo4AATKDwO/F441vgXNQ3BSPWFsUmxURgAFAHMBcwC5jC4azb2qP0c22WBqUkMAAfXl5oUmTV5cVGBG5hxpx0YMmypJUCCjUgWLlHyEWJiJFGnHHDZCtJ0Zo4NcmR0ArMypAnGQiCUU1yCZ84WNBQxb2HgB8IINFHpzooRqZGLMnDWRcFy0QJQbGzIH2/AwsOahoxdMJDAAOseiy6IQIESxidNpoxMdiIabg0STGi9sNkAQAOGJEWQ5/0sKYoGgQYUALSKp6sLGCZusbFbgXDNFLh0FRMVSBOBjh5EdRYrswBmJy05GExJboDknDjl7+Mql9HKZUIQGmy1U2AxnTuufFGN3/iC3roUAiQGwAEpVNtUdIMoVQiD2RQQLqMP1jk2VhxsAJkzkk6AawInjyV2klD1niJsSJrxgMbdALAgZcySg3sx9Dpo1RNjMMSCltbnTm0FESpBbhGw5QCShhjAAeEGJIJltlgACCUygAHHIjUVREWs8cRE5Y+VCgWqoeaDZegDMQAUVYYDhAxtZuHERAFSEUwl1FlwQWmi5GYBPDmyEcaEBLrhIR4IAuODCCCKw4AIICd5WwlEgAOQAg3xqiEbOBKgFUAIKjcBogQGEcADADfIVSImN5bzgCABkWlkIY89NcaApKpBgyS0tyMBIkzH4R44ofDJJBABR9NjnoAAEEaRhg94pXCAAOw==');
 }
 
-#theme-tweaker-ui .current-theme {
-	margin: 1em -8px 1.25em -8px;
-	padding: 0 12px 1em 12px;
+#theme-tweaker-ui .main-window .theme-select {
+	display: flex;
+	align-items: center;
+	margin: 0 -12px 1.25em -12px;
+	padding: 3px 12px 13px 12px;
 	box-shadow: 
 		0 1px 0 #7f787f,
 		0 2px 0 #fff8ff;
 	cursor: default;
+	user-select: none;
 }
-#theme-tweaker-ui .current-theme span {
+#theme-tweaker-ui .main-window .theme-select .current-theme {
+	margin: 0;
+	pointer-events: none;
+}
+#theme-tweaker-ui .main-window .theme-select .current-theme span {
 	text-shadow: 1px 0 0 #000;
 	letter-spacing: 1px;
 }
 
-#theme-tweaker-ui .theme-selector {
-	position: absolute;
-	top: 19px;
-	left: 225px;
+#theme-tweaker-ui .main-window .theme-select .theme-selector {
+	margin: 0 0 0 2em;
 }
 #theme-tweaker-ui .theme-selector button {
 	width: 26px;
@@ -134,7 +167,7 @@
 	display: inline-block;
 	padding: 1px 0 0 1px;
 	border: 4px solid #bfb8bf;
-	margin: 8px 10px 8px 4px;
+	margin: 0 0 0 14px;
 }
 #theme-tweaker-ui .theme-selector button:active,
 #theme-tweaker-ui .theme-selector button.selected {
@@ -249,15 +282,7 @@
 /* This doesn't work in Mozilla browsers, so hide it */
 @-moz-document url-prefix() {
 	#theme-tweaker-ui #theme-tweak-section-text-size-adjust {
-/* 
-		height: 0;
-		overflow: hidden;
-		padding: 0;
-		border: 0;
-		margin: 0 0 -16px 0;
-		visibility: hidden;
- */
-	display: none;
+		display: none;
 	}
 }
 
@@ -478,9 +503,10 @@ input[type='range']::-ms-thumb {
 
 #theme-tweaker-ui .buttons-container {
 	text-align: right;
-	margin: 10px 3px 0 0;
+	margin: 18px 0 0 0;
 }
 #theme-tweaker-ui button {
+	background-color: #bfb8bf;
 	box-shadow: 
 		0 -1px 0 0 #fff8ff,
 		-1px 0 0 0 #fff8ff,
@@ -497,15 +523,16 @@ input[type='range']::-ms-thumb {
 #theme-tweaker-ui .controls-container button,
 #theme-tweaker-ui .buttons-container button,
 #theme-tweaker-ui .help-window button {
-	margin: 0.5em 1px 0.5em 1em;
 	width: 7em;
 	padding: 7px 0 6px 0;
 }
 #theme-tweaker-ui .buttons-container button {
 	color: inherit;
 }
+#theme-tweaker-ui .buttons-container button + button {
+	margin-left: 1em;
+}
 #theme-tweaker-ui button.default-button {
-	padding: 6px 0 6px 0;
 	box-shadow: 
 		0 -1px 0 0 #fff8ff,
 		-1px 0 0 0 #fff8ff,
@@ -537,35 +564,6 @@ input[type='range']::-ms-thumb {
 	outline: 1px dotted #000;
 }
 
-#theme-tweaker-ui .minimize-button {
-	width: 18px;
-	height: 16px;
-	position: absolute;
-	top: -1px;
-	right: 30px;
-	background-size: 14px;
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-#theme-tweaker-ui .minimize-button.minimize {
-	background-image: url('data:image/gif;base64,R0lGODdhGAAUAJEAAAAAAP///wAAAAAAACH5BAkAAAIALAAAAAAYABQAAAIflI+py+0Po5y02ouz3pyCD4YiwIwmWJ5mqopsi3ZyAQA7');	
-}
-#theme-tweaker-ui .minimize-button.maximize {
-	background-image: url('data:image/gif;base64,R0lGODdhGAAUAJEAAAAAAP///wAAAAAAACH5BAkAAAIALAAAAAAYABQAAAI3lI+pCu0PHYv0zVovjnOt1nkJOAJiGZ4GibCqu5pqnL5ye9v1CQu91/t9crSZj3jccEpKiPFZAAA7');	
-}
-
-#theme-tweaker-ui .help-button {
-	width: 18px;
-	height: 16px;
-	position: absolute;
-	top: -1px;
-	right: 55px;
-	background-image: url('data:image/gif;base64,R0lGODdhGAAUAJEAAAAAAP///wAAAAAAACH5BAkAAAIALAAAAAAYABQAAAIvlH+gi+22InhUStqu0Hiz9HURMnaeAoYmWa6s6p5o/E50feP5zrtt/rsFacMepQAAOw==');	
-	background-size: 14px;
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-
 #theme-tweaker-ui .buttons-container .reset-defaults-button {
 	width: 10em;
 	float: left;
@@ -682,10 +680,9 @@ input[type='range']::-ms-thumb {
 		0 0 0 2px #030303;
 	top: 200px;
 	left: calc((100% - 300px) / 2);
-	padding: 40px 10px 10px 10px;
 	pointer-events: auto;
 }
-#theme-tweaker-ui .help-window h1 {
+#theme-tweaker-ui .help-window .theme-tweaker-window-title-bar {
 	background-image: url('data:image/gif;base64,R0lGODdhIAAgAKIAAAAAAAAA/2xsbLKysv//DP///wAAAAAAACH5BAkAAAYALAAAAAAgACAAAAPGaGrS/jCuOaO9gtJWuieE9xGQtnBiAaZqWJromsoeYN+w0NFjeuMalIi3C3UGwI1uFmg6W54BEpArdpzYwFBqq0Kz2Q+XGlxesefncepNaz3odbdcjIPsY+9dvW/u8nQzRm5RbIFDg2FyZEpWKYoqgI1QIpCRhpOIYTSSFWYjdoOdJ0tElFuYno6ILASjCkKgfKKppK0EoYVzkzxxqLuqpwW+YrWwn6s9i23KrMtlUtHS09TGDALV2dTACz/e3+BJE+Hk4QsJADs=');
 }
 #theme-tweaker-ui div.section#theme-tweak-section-clippy {
@@ -733,6 +730,32 @@ input[type='range']::-ms-thumb {
 		0 0 0 3px #030303;
 }
 
+#theme-tweaker-ui .main-window.minimized {
+	width: 320px;
+	height: 29px;
+	overflow: hidden;
+	top: 20px;
+	right: 20px;
+	left: auto;
+}
+#theme-tweaker-ui.main-window-minimized::after {
+	top: 27px;
+	right: 27px;
+}
+#theme-tweaker-ui.main-window-minimized::before {
+	opacity: 0.0;
+	height: 0;
+}
+#theme-tweaker-ui.main-window-minimized .clippy-container {
+	opacity: 1.0;
+}
+#theme-tweaker-ui.main-window-minimized .clippy-container .hint span {
+	color: #c00;
+}
+#theme-tweaker-ui.main-window-minimized {
+	height: 0;
+}
+
 /*========*/
 /* MOBILE */
 /*========*/
diff --git a/www/script.js b/www/script.js
index bbb0f761..22047321 100644
--- a/www/script.js
+++ b/www/script.js
@@ -1268,6 +1268,8 @@ Appearance = { ...Appearance,
 
 	themeTweakerToggle: null,
 
+	themeTweakerStyleBlock: null,
+
 	themeTweakerUI: null,
 	themeTweakerUIMainWindow: null,
 	themeTweakerUIHelpWindow: null,
@@ -1786,75 +1788,92 @@ Appearance = { ...Appearance,
 	},
 
 	themeTweakerUIHTML: () => {
-		return (`<div id="theme-tweaker-ui" style="display: none;">` 
-			+ `<div class="main-theme-tweaker-window">
-				<h1>Customize appearance</h1>
-				<button type="button" class="minimize-button minimize" tabindex="-1"></button>
-				<button type="button" class="help-button" tabindex="-1"></button>
-				<p class="current-theme">Current theme: <span>` + 
-				Appearance.getSavedTheme() + 
-				`</span></p>
-				<p class="theme-selector"></p>
-				<div class="controls-container">
-					<div id="theme-tweak-section-sample-text" class="section" data-label="Sample text">
-						<div class="sample-text-container"><span class="sample-text">
-							<p>Less Wrong (text)</p>
-							<p><a href="#">Less Wrong (link)</a></p>
-						</span></div>
-					</div>
-					<div id="theme-tweak-section-text-size-adjust" class="section" data-label="Text size">
-						<button type="button" class="text-size-adjust-button decrease" title="Decrease text size"></button>
-						<button type="button" class="text-size-adjust-button default" title="Reset to default text size"></button>
-						<button type="button" class="text-size-adjust-button increase" title="Increase text size"></button>
+		return (`<div id="theme-tweaker-ui" style="display: none;">\n` 
+			+ `<div class="theme-tweaker-window main-window">
+				<div class="theme-tweaker-window-title-bar">
+					<div class="theme-tweaker-window-title">
+						<h1>Customize appearance</h1>
 					</div>
-					<div id="theme-tweak-section-invert" class="section" data-label="Invert (photo-negative)">
-						<input type="checkbox" id="theme-tweak-control-invert"></input>
-						<label for="theme-tweak-control-invert">Invert colors</label>
+					<div class="theme-tweaker-window-title-bar-buttons-container">
+						<button type="button" class="help-button" tabindex="-1"></button>
+						<button type="button" class="minimize-button minimize" tabindex="-1"></button>
+						<button type="button" class="close-button" tabindex="-1"></button>
 					</div>
-					<div id="theme-tweak-section-saturate" class="section" data-label="Saturation">
-						<input type="range" id="theme-tweak-control-saturate" min="0" max="300" data-default-value="100" data-value-suffix="%" data-label-suffix="%">
-						<p class="theme-tweak-control-label" id="theme-tweak-label-saturate"></p>
-						<div class="notch theme-tweak-slider-notch-saturate" title="Reset saturation to default value (100%)"></div>
-					</div>
-					<div id="theme-tweak-section-brightness" class="section" data-label="Brightness">
-						<input type="range" id="theme-tweak-control-brightness" min="0" max="300" data-default-value="100" data-value-suffix="%" data-label-suffix="%">
-						<p class="theme-tweak-control-label" id="theme-tweak-label-brightness"></p>
-						<div class="notch theme-tweak-slider-notch-brightness" title="Reset brightness to default value (100%)"></div>
+				</div>
+				<div class="theme-tweaker-window-content-view">
+					<div class="theme-select">
+						<p class="current-theme">Current theme:
+							<span>${Appearance.getSavedTheme()}</span>
+						</p>
+						<div class="theme-selector"></div>
 					</div>
-					<div id="theme-tweak-section-contrast" class="section" data-label="Contrast">
-						<input type="range" id="theme-tweak-control-contrast" min="0" max="300" data-default-value="100" data-value-suffix="%" data-label-suffix="%">
-						<p class="theme-tweak-control-label" id="theme-tweak-label-contrast"></p>
-						<div class="notch theme-tweak-slider-notch-contrast" title="Reset contrast to default value (100%)"></div>
+					<div class="controls-container">
+						<div id="theme-tweak-section-sample-text" class="section" data-label="Sample text">
+							<div class="sample-text-container"><span class="sample-text">
+								<p>Less Wrong (text)</p>
+								<p><a href="#">Less Wrong (link)</a></p>
+							</span></div>
+						</div>
+						<div id="theme-tweak-section-text-size-adjust" class="section" data-label="Text size">
+							<button type="button" class="text-size-adjust-button decrease" title="Decrease text size"></button>
+							<button type="button" class="text-size-adjust-button default" title="Reset to default text size"></button>
+							<button type="button" class="text-size-adjust-button increase" title="Increase text size"></button>
+						</div>
+						<div id="theme-tweak-section-invert" class="section" data-label="Invert (photo-negative)">
+							<input type="checkbox" id="theme-tweak-control-invert"></input>
+							<label for="theme-tweak-control-invert">Invert colors</label>
+						</div>
+						<div id="theme-tweak-section-saturate" class="section" data-label="Saturation">
+							<input type="range" id="theme-tweak-control-saturate" min="0" max="300" data-default-value="100" data-value-suffix="%" data-label-suffix="%">
+							<p class="theme-tweak-control-label" id="theme-tweak-label-saturate"></p>
+							<div class="notch theme-tweak-slider-notch-saturate" title="Reset saturation to default value (100%)"></div>
+						</div>
+						<div id="theme-tweak-section-brightness" class="section" data-label="Brightness">
+							<input type="range" id="theme-tweak-control-brightness" min="0" max="300" data-default-value="100" data-value-suffix="%" data-label-suffix="%">
+							<p class="theme-tweak-control-label" id="theme-tweak-label-brightness"></p>
+							<div class="notch theme-tweak-slider-notch-brightness" title="Reset brightness to default value (100%)"></div>
+						</div>
+						<div id="theme-tweak-section-contrast" class="section" data-label="Contrast">
+							<input type="range" id="theme-tweak-control-contrast" min="0" max="300" data-default-value="100" data-value-suffix="%" data-label-suffix="%">
+							<p class="theme-tweak-control-label" id="theme-tweak-label-contrast"></p>
+							<div class="notch theme-tweak-slider-notch-contrast" title="Reset contrast to default value (100%)"></div>
+						</div>
+						<div id="theme-tweak-section-hue-rotate" class="section" data-label="Hue rotation">
+							<input type="range" id="theme-tweak-control-hue-rotate" min="0" max="360" data-default-value="0" data-value-suffix="deg" data-label-suffix="°">
+							<p class="theme-tweak-control-label" id="theme-tweak-label-hue-rotate"></p>
+							<div class="notch theme-tweak-slider-notch-hue-rotate" title="Reset hue to default (0° away from standard colors for theme)"></div>
+						</div>
 					</div>
-					<div id="theme-tweak-section-hue-rotate" class="section" data-label="Hue rotation">
-						<input type="range" id="theme-tweak-control-hue-rotate" min="0" max="360" data-default-value="0" data-value-suffix="deg" data-label-suffix="°">
-						<p class="theme-tweak-control-label" id="theme-tweak-label-hue-rotate"></p>
-						<div class="notch theme-tweak-slider-notch-hue-rotate" title="Reset hue to default (0° away from standard colors for theme)"></div>
+					<div class="buttons-container">
+						<button type="button" class="reset-defaults-button">Reset to defaults</button>
+						<button type="button" class="ok-button default-button">OK</button>
+						<button type="button" class="cancel-button">Cancel</button>
 					</div>
 				</div>
-				<div class="buttons-container">
-					<button type="button" class="reset-defaults-button">Reset to defaults</button>
-					<button type="button" class="ok-button default-button">OK</button>
-					<button type="button" class="cancel-button">Cancel</button>
-				</div>
 			</div>
 			<div class="clippy-container">
 				<span class="hint">Hi, I’m Bobby the Basilisk! Click on the minimize button (<img src="data:image/gif;base64,R0lGODlhFgAUAPIAMQAAAAMDA394f7+4v9/Y3//4/2JX/38AACwAAAAAFgAUAAADRki63B6kyEkrFbCMzbvnWPSNXqiRqImm2Uqq7gfH3Uxv9p3TNuD/wFqLAywChCKi8Yc83XDD52AXCwmu2KxWG+h6v+BwNwEAOw==" />) to minimize the theme tweaker window, so that you can see what the page looks like with the current tweaked values. (But remember, <span>the changes won’t be saved until you click “OK”!</span>)
 				<div class="clippy"></div>
 				<button type="button" class="clippy-close-button" tabindex="-1" title="Hide theme tweaker assistant (you can bring him back by clicking the ? button in the title bar)"></button>
 			</div>
-			<div class="help-window" style="display: none;">
-				<h1>Theme tweaker help</h1>
-				<div id="theme-tweak-section-clippy" class="section" data-label="Theme Tweaker Assistant">
-					<input type="checkbox" id="theme-tweak-control-clippy" checked="checked"></input>
-					<label for="theme-tweak-control-clippy">Show Bobby the Basilisk</label>
+			<div class="theme-tweaker-window help-window" style="display: none;">
+				<div class="theme-tweaker-window-title-bar">
+					<div class="theme-tweaker-window-title">
+						<h1>Theme tweaker help</h1>
+					</div>
 				</div>
-				<div class="buttons-container">
-					<button type="button" class="ok-button default-button">OK</button>
-					<button type="button" class="cancel-button">Cancel</button>
+				<div class="theme-tweaker-window-content-view">
+					<div id="theme-tweak-section-clippy" class="section" data-label="Theme Tweaker Assistant">
+						<input type="checkbox" id="theme-tweak-control-clippy" checked="checked"></input>
+						<label for="theme-tweak-control-clippy">Show Bobby the Basilisk</label>
+					</div>
+					<div class="buttons-container">
+						<button type="button" class="ok-button default-button">OK</button>
+						<button type="button" class="cancel-button">Cancel</button>
+					</div>
 				</div>
 			</div>
-		` + "</div>");
+		` + `\n</div>`);
 	},
 
 	injectThemeTweaker: () => {
@@ -1897,11 +1916,12 @@ Appearance = { ...Appearance,
 				field.addEventListener("input", Appearance.themeTweakerUIFieldInputReceived);
 		});
 
-		Appearance.themeTweakerUI.query(".minimize-button").addActivateEvent(Appearance.themeTweakerUIMinimizeButtonClicked);
 		Appearance.themeTweakerUI.query(".help-button").addActivateEvent(Appearance.themeTweakerUIHelpButtonClicked);
+		Appearance.themeTweakerUI.query(".minimize-button").addActivateEvent(Appearance.themeTweakerUIMinimizeButtonClicked);
+		Appearance.themeTweakerUI.query(".close-button").addActivateEvent(Appearance.themeTweakerUICloseButtonClicked);
 		Appearance.themeTweakerUI.query(".reset-defaults-button").addActivateEvent(Appearance.themeTweakerUIResetDefaultsButtonClicked);
-		Appearance.themeTweakerUI.query(".main-theme-tweaker-window .cancel-button").addActivateEvent(Appearance.themeTweakerUICancelButtonClicked);
-		Appearance.themeTweakerUI.query(".main-theme-tweaker-window .ok-button").addActivateEvent(Appearance.themeTweakerUIOKButtonClicked);
+		Appearance.themeTweakerUI.query(".main-window .cancel-button").addActivateEvent(Appearance.themeTweakerUICancelButtonClicked);
+		Appearance.themeTweakerUI.query(".main-window .ok-button").addActivateEvent(Appearance.themeTweakerUIOKButtonClicked);
 		Appearance.themeTweakerUI.query(".help-window .cancel-button").addActivateEvent(Appearance.themeTweakerUIHelpWindowCancelButtonClicked);
 		Appearance.themeTweakerUI.query(".help-window .ok-button").addActivateEvent(Appearance.themeTweakerUIHelpWindowOKButtonClicked);
 
@@ -1912,6 +1932,7 @@ Appearance = { ...Appearance,
 		Appearance.themeTweakerUI.query(".clippy-close-button").addActivateEvent(Appearance.themeTweakerUIClippyCloseButtonClicked);
 
 		insertHeadHTML(`<style id="theme-tweaker-style"></style>`);
+		Appearance.themeTweakerStyleBlock = document.head.query("#theme-tweaker-style");
 
 		Appearance.themeTweakerUI.query(".theme-selector").innerHTML = query("#theme-selector").innerHTML;
 		Appearance.themeTweakerUI.queryAll(".theme-selector > *:not([class^='select-theme-'])").forEach(element => {
@@ -1975,14 +1996,13 @@ Appearance = { ...Appearance,
 	toggleThemeTweakerUI: () => {
 		GWLog("Appearance.toggleThemeTweakerUI");
 
-		Appearance.themeTweakerUI.style.display = Appearance.themeTweakerUI.style.display == "none" 
-											  ? "block" 
-											  : "none";
-		query("#theme-tweaker-style").innerHTML = Appearance.themeTweakerUI.style.display == "none" 
-												  ? "" 
-												  : `#content, #ui-elements-container > div:not(#theme-tweaker-ui) { pointer-events: none; }`;
+		let show = (Appearance.themeTweakerUI.style.display == "none");
+
+		Appearance.themeTweakerUI.style.display = show ? "block" : "none";
+		Appearance.setThemeTweakerWindowMinimized(false);
+		Appearance.themeTweakerStyleBlock.innerHTML = show ? `#content, #ui-elements-container > div:not(#theme-tweaker-ui) { pointer-events: none; user-select: none; }` : "";
 
-		if (Appearance.themeTweakerUI.style.display != "none") {
+		if (show) {
 			// Focus invert checkbox.
 			Appearance.themeTweakerUI.query("#theme-tweaker-ui #theme-tweak-control-invert").focus();
 			// Show sample text in appropriate font.
@@ -1992,7 +2012,7 @@ Appearance = { ...Appearance,
 			// Disable scrolling of the page.
 			togglePageScrolling(false);
 		} else {
-			query("#theme-tweaker-toggle button").disabled = false;
+			Appearance.themeTweakerToggle.query("button").disabled = false;
 			// Re-enable tab-selection of the search box.
 			setSearchBoxTabSelectable(true);
 			// Re-enable scrolling of the page.
@@ -2003,6 +2023,14 @@ Appearance = { ...Appearance,
 		Appearance.themeTweakerUIClippyContainer.style.display = (Appearance.getSavedThemeTweakerClippyState() == true) ? "block" : "none";
 	},
 
+	setThemeTweakerWindowMinimized: (minimize) => {
+		GWLog("Appearance.setThemeTweakerWindowMinimized");
+
+		Appearance.themeTweakerUIMainWindow.query(".minimize-button").swapClasses([ "minimize", "maximize" ], (minimize ? 1 : 0));
+		Appearance.themeTweakerUIMainWindow.classList.toggle("minimized", minimize);
+		Appearance.themeTweakerUI.classList.toggle("main-window-minimized", minimize);
+	},
+
 	toggleThemeTweakerHelpWindow: () => {
 		GWLog("Appearance.toggleThemeTweakerHelpWindow");
 
@@ -2260,52 +2288,16 @@ Appearance = { ...Appearance,
 		Appearance.themeTweakerUISampleTextContainer.style.filter = Appearance.filterStringFromFilters(sampleTextFilters);
 	},
 
+	themeTweakerUICloseButtonClicked: (event) => {
+		GWLog("Appearance.themeTweakerUICloseButtonClicked");
+
+		Appearance.toggleThemeTweakerUI();
+	},
+
 	themeTweakerUIMinimizeButtonClicked: (event) => {
 		GWLog("Appearance.themeTweakerUIMinimizeButtonClicked");
 
-		let themeTweakerStyleBlock = Appearance.themeTweakerUI.query("#theme-tweaker-style");
-
-		if (event.target.hasClass("minimize")) {
-			event.target.removeClass("minimize");
-			themeTweakerStyleBlock.innerHTML = 
-				`#theme-tweaker-ui .main-theme-tweaker-window {
-					width: 320px;
-					height: 31px;
-					overflow: hidden;
-					padding: 30px 0 0 0;
-					top: 20px;
-					right: 20px;
-					left: auto;
-				}
-				#theme-tweaker-ui::after {
-					top: 27px;
-					right: 27px;
-				}
-				#theme-tweaker-ui::before {
-					opacity: 0.0;
-					height: 0;
-				}
-				#theme-tweaker-ui .clippy-container {
-					opacity: 1.0;
-				}
-				#theme-tweaker-ui .clippy-container .hint span {
-					color: #c00;
-				}
-				#theme-tweaker-ui {
-					height: 0;
-				}
-				#content, #ui-elements-container > div:not(#theme-tweaker-ui) {
-					pointer-events: none;
-				}`;
-			event.target.addClass("maximize");
-		} else {
-			event.target.removeClass("maximize");
-			themeTweakerStyleBlock.innerHTML = 
-				`#content, #ui-elements-container > div:not(#theme-tweaker-ui) {
-					pointer-events: none;
-				}`;
-			event.target.addClass("minimize");
-		}
+		Appearance.setThemeTweakerWindowMinimized(event.target.hasClass("minimize"));
 	},
 
 	themeTweakerUIHelpButtonClicked: (event) => {
@@ -3994,7 +3986,7 @@ function keyboardHelpSetup() {
 	// Clicking the background overlay closes the keyboard help overlay.
 	keyboardHelpOverlay.addActivateEvent(GW.keyboardHelpOverlayClicked = (event) => {
 		GWLog("GW.keyboardHelpOverlayClicked");
-		if (event.type == 'mousedown') {
+		if (event.type == "mousedown") {
 			keyboardHelpOverlay.style.opacity = "0.01";
 		} else {
 			toggleKeyboardHelpOverlay(false);
diff --git a/www/theme_tweaker.css.php b/www/theme_tweaker.css.php
index d4fb3e09..50c09fec 100644
--- a/www/theme_tweaker.css.php
+++ b/www/theme_tweaker.css.php
@@ -27,31 +27,7 @@
 	background-color: #000;
 	opacity: 0.6;
 }
-#theme-tweaker-ui::after {
-	content: "";
-	position: fixed;
-	top: 87px;
-	right: calc((100% - 900px) / 2 + 26px);
-	background-color: #bfb8bf;
-	width: 18px;
-	height: 16px;
-	z-index: 2;
-	background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/win95_close_widget.gif")) ?>');
-	background-size: 100%;
-	background-repeat: no-repeat;
-	background-position: center center;
-	box-shadow: 
-		0 -1px 0 0 #fff8ff,
-		-1px 0 0 0 #fff8ff,
-		-1px -1px 0 0 #fff8ff,
-		0 0 0 1px #7f787f,
-		0 -1px 0 1px #dfd8df,
-		-1px 0 0 1px #dfd8df,
-		-1px -1px 0 1px #dfd8df,
-		0 0 0 2px #030303;
-	cursor: pointer;
-}
-#theme-tweaker-ui .main-theme-tweaker-window {
+.theme-tweaker-window {
 	position: fixed;
 	z-index: 1;
 	background-color: #bfb8bf;
@@ -65,16 +41,91 @@
 		-1px 0 0 1px #dfd8df,
 		-1px -1px 0 1px #dfd8df,
 		0 0 0 2px #030303;
+	display: flex;
+	flex-flow: column;
+	align-items: stretch;
+	justify-content: stretch;
+	padding: 2px;
+}
+
+.theme-tweaker-window-title-bar {
+	height: 25px;
+	width: 100%;
+	display: flex;
+	background-color: #03037f;
+}
+
+.theme-tweaker-window-title {
+	flex: 1 1 auto;
+	color: #fff8ff;
+	padding: 4px 6px 3px 30px;
+	cursor: default;
+	text-shadow: 1px 0 0 #fff;
+	letter-spacing: 1px;
+}
+.theme-tweaker-window-title h1 {
+	font-size: inherit;
+	font-weight: normal;
+	margin: 0;
+}
+
+.theme-tweaker-window-title-bar-buttons-container {
+	display: flex;
+	align-items: center;
+	padding: 4px;
+}
+
+.theme-tweaker-window-title-bar-buttons-container button {
+	width: 18px;
+	height: 16px;
+	background-size: 14px;
+	background-repeat: no-repeat;
+	background-position: center center;
+	margin: 0 0 0 7px;
+}
+
+.theme-tweaker-window-title-bar-buttons-container .help-button {
+	background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/win95_help_widget.gif")) ?>');	
+}
+
+.theme-tweaker-window-title-bar-buttons-container .minimize-button.minimize {
+	background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/win95_minimize_widget.gif")) ?>');	
+}
+.theme-tweaker-window-title-bar-buttons-container .minimize-button.maximize {
+	background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/win95_maximize_widget.gif")) ?>');	
+}
+
+.theme-tweaker-window-title-bar-buttons-container .close-button {
+	background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/win95_close_widget.gif")) ?>');
+	background-size: 100%;
+	background-position: center bottom;
+}
+
+.theme-tweaker-window-content-view {
+	padding: 12px;
+	height: calc(100% - 25px);
+	display: flex;
+	flex-flow: column;
+}
+
+#theme-tweaker-ui .main-window {
 	width: calc(900px - 40px);
 	max-width: calc(100vw - 20px);
 	max-height: calc(100vh - 160px);
 	top: 80px;
 	left: calc((100% - 900px) / 2 + 20px);
-	padding: 30px 10px 10px 10px;
+	height: 1200px;
+}
+#theme-tweaker-ui .theme-tweaker-window-title-bar {
+	background-repeat: no-repeat;
+	background-size: 20px;
+	background-position: 4px 50%;
+}
+#theme-tweaker-ui .main-window .theme-tweaker-window-title-bar {
+	background-image: url('data:image/gif;base64,R0lGODdhIAAgAOYAAAAAAAMDCwMD9AQDqwQDsgUDpAoDBAoDoqsDVKsDWq4DT7ADVrIDXf4DC/8D/QQEnAUE/qQET6QEUqQEW7AESvUEA/0EBAUFEPAFCPcF/wMImgMI/gMJBZsJWvIJBJCBmIuElH2Fj4WFlIiFfImFhoOGi4qGjI6GmpKGjoKHm5OHk4mIhoWKkoqKjIqKk4SLjIeLfY2LmX2NhYSOmoeOhoKQkQOkWKOkaqWlXaulXKSmTqSmUqqmYQqnYKmnVQWoXaWocZ+pbAiqVaOqVKSqTKmqVKyqWwOrVJ+rU6WrWrCuWcS+2Mi/wMy/082/zsrCzMrDxcLE1cXExLzFy77FxMTFzMzF1bfGwbzGvrfH18vIw7/J08HJu8PJxMPJzLTKyL3KzL7Kw73Lvs3Lyr3Mt8HM0LPRuf/2A/j38//3+fz+Cv3+9P7+BO//A/T/BPT/Cfb//vf/9///7P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAAHQALAAAAAAgACAAAAf/gHSCg4SFQ0NJOTqFjI2ORXNzaZEAjpaNRnBVbA4OV0oBl4w0KS4iLjI5c11unRlsOQYgLyUutS2VjSEHBQQDDz5zb1icGVo4AATKDwO/F441vgXNQ3BSPWFsUmxURgAFAHMBcwC5jC4azb2qP0c22WBqUkMAAfXl5oUmTV5cVGBG5hxpx0YMmypJUCCjUgWLlHyEWJiJFGnHHDZCtJ0Zo4NcmR0ArMypAnGQiCUU1yCZ84WNBQxb2HgB8IINFHpzooRqZGLMnDWRcFy0QJQbGzIH2/AwsOahoxdMJDAAOseiy6IQIESxidNpoxMdiIabg0STGi9sNkAQAOGJEWQ5/0sKYoGgQYUALSKp6sLGCZusbFbgXDNFLh0FRMVSBOBjh5EdRYrswBmJy05GExJboDknDjl7+Mql9HKZUIQGmy1U2AxnTuufFGN3/iC3roUAiQGwAEpVNtUdIMoVQiD2RQQLqMP1jk2VhxsAJkzkk6AawInjyV2klD1niJsSJrxgMbdALAgZcySg3sx9Dpo1RNjMMSCltbnTm0FESpBbhGw5QCShhjAAeEGJIJltlgACCUygAHHIjUVREWs8cRE5Y+VCgWqoeaDZegDMQAUVYYDhAxtZuHERAFSEUwl1FlwQWmi5GYBPDmyEcaEBLrhIR4IAuODCCCKw4AIICd5WwlEgAOQAg3xqiEbOBKgFUAIKjcBogQGEcADADfIVSImN5bzgCABkWlkIY89NcaApKpBgyS0tyMBIkzH4R44ofDJJBABR9NjnoAAEEaRhg94pXCAAOw==');
 }
 #theme-tweaker-ui .controls-container {
 	overflow-y: scroll;
-	max-height: calc(100vh - 320px);
 	box-shadow: 
 		0 -1px 0 0 #030303,
 		-1px 0 0 0 #030303,
@@ -85,48 +136,30 @@
 		-1px -1px 0 1px #7f787f,
 		0 0 0 2px #fff8ff;
 	padding: 16px;
-	margin: 4px;
 }
 
-#theme-tweaker-ui h1 {
-	font-size: inherit;
-	font-weight: normal;
-	margin: 0;
-	position: absolute;
-	background-color: #03037f;
-	background-repeat: no-repeat;
-	background-size: 20px;
-	color: #fff8ff;
-	padding: 4px 6px 3px 30px;
-	background-position: 4px 50%;
-	left: 2px;
-	top: 2px;
-	width: calc(100% - 4px);
-	cursor: default;
-	text-shadow: 1px 0 0 #fff;
-	letter-spacing: 1px;
-}
-#theme-tweaker-ui .main-theme-tweaker-window h1 {
-	background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/win95_themes_icon.gif")) ?>');
-}
-
-#theme-tweaker-ui .current-theme {
-	margin: 1em -8px 1.25em -8px;
-	padding: 0 12px 1em 12px;
+#theme-tweaker-ui .main-window .theme-select {
+	display: flex;
+	align-items: center;
+	margin: 0 -12px 1.25em -12px;
+	padding: 3px 12px 13px 12px;
 	box-shadow: 
 		0 1px 0 #7f787f,
 		0 2px 0 #fff8ff;
 	cursor: default;
+	user-select: none;
 }
-#theme-tweaker-ui .current-theme span {
+#theme-tweaker-ui .main-window .theme-select .current-theme {
+	margin: 0;
+	pointer-events: none;
+}
+#theme-tweaker-ui .main-window .theme-select .current-theme span {
 	text-shadow: 1px 0 0 #000;
 	letter-spacing: 1px;
 }
 
-#theme-tweaker-ui .theme-selector {
-	position: absolute;
-	top: 19px;
-	left: 225px;
+#theme-tweaker-ui .main-window .theme-select .theme-selector {
+	margin: 0 0 0 2em;
 }
 #theme-tweaker-ui .theme-selector button {
 	width: 26px;
@@ -134,7 +167,7 @@
 	display: inline-block;
 	padding: 1px 0 0 1px;
 	border: 4px solid #bfb8bf;
-	margin: 8px 10px 8px 4px;
+	margin: 0 0 0 14px;
 }
 #theme-tweaker-ui .theme-selector button:active,
 #theme-tweaker-ui .theme-selector button.selected {
@@ -249,15 +282,7 @@
 /* This doesn't work in Mozilla browsers, so hide it */
 @-moz-document url-prefix() {
 	#theme-tweaker-ui #theme-tweak-section-text-size-adjust {
-/* 
-		height: 0;
-		overflow: hidden;
-		padding: 0;
-		border: 0;
-		margin: 0 0 -16px 0;
-		visibility: hidden;
- */
-	display: none;
+		display: none;
 	}
 }
 
@@ -478,9 +503,10 @@ input[type='range']::-ms-thumb {
 
 #theme-tweaker-ui .buttons-container {
 	text-align: right;
-	margin: 10px 3px 0 0;
+	margin: 18px 0 0 0;
 }
 #theme-tweaker-ui button {
+	background-color: #bfb8bf;
 	box-shadow: 
 		0 -1px 0 0 #fff8ff,
 		-1px 0 0 0 #fff8ff,
@@ -497,15 +523,16 @@ input[type='range']::-ms-thumb {
 #theme-tweaker-ui .controls-container button,
 #theme-tweaker-ui .buttons-container button,
 #theme-tweaker-ui .help-window button {
-	margin: 0.5em 1px 0.5em 1em;
 	width: 7em;
 	padding: 7px 0 6px 0;
 }
 #theme-tweaker-ui .buttons-container button {
 	color: inherit;
 }
+#theme-tweaker-ui .buttons-container button + button {
+	margin-left: 1em;
+}
 #theme-tweaker-ui button.default-button {
-	padding: 6px 0 6px 0;
 	box-shadow: 
 		0 -1px 0 0 #fff8ff,
 		-1px 0 0 0 #fff8ff,
@@ -537,35 +564,6 @@ input[type='range']::-ms-thumb {
 	outline: 1px dotted #000;
 }
 
-#theme-tweaker-ui .minimize-button {
-	width: 18px;
-	height: 16px;
-	position: absolute;
-	top: -1px;
-	right: 30px;
-	background-size: 14px;
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-#theme-tweaker-ui .minimize-button.minimize {
-	background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/win95_minimize_widget.gif")) ?>');	
-}
-#theme-tweaker-ui .minimize-button.maximize {
-	background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/win95_maximize_widget.gif")) ?>');	
-}
-
-#theme-tweaker-ui .help-button {
-	width: 18px;
-	height: 16px;
-	position: absolute;
-	top: -1px;
-	right: 55px;
-	background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/win95_help_widget.gif")) ?>');	
-	background-size: 14px;
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-
 #theme-tweaker-ui .buttons-container .reset-defaults-button {
 	width: 10em;
 	float: left;
@@ -682,10 +680,9 @@ input[type='range']::-ms-thumb {
 		0 0 0 2px #030303;
 	top: 200px;
 	left: calc((100% - 300px) / 2);
-	padding: 40px 10px 10px 10px;
 	pointer-events: auto;
 }
-#theme-tweaker-ui .help-window h1 {
+#theme-tweaker-ui .help-window .theme-tweaker-window-title-bar {
 	background-image: url('data:image/gif;base64,<?php echo base64_encode(file_get_contents("assets/win95_help_icon.gif")) ?>');
 }
 #theme-tweaker-ui div.section#theme-tweak-section-clippy {
@@ -733,6 +730,32 @@ input[type='range']::-ms-thumb {
 		0 0 0 3px #030303;
 }
 
+#theme-tweaker-ui .main-window.minimized {
+	width: 320px;
+	height: 29px;
+	overflow: hidden;
+	top: 20px;
+	right: 20px;
+	left: auto;
+}
+#theme-tweaker-ui.main-window-minimized::after {
+	top: 27px;
+	right: 27px;
+}
+#theme-tweaker-ui.main-window-minimized::before {
+	opacity: 0.0;
+	height: 0;
+}
+#theme-tweaker-ui.main-window-minimized .clippy-container {
+	opacity: 1.0;
+}
+#theme-tweaker-ui.main-window-minimized .clippy-container .hint span {
+	color: #c00;
+}
+#theme-tweaker-ui.main-window-minimized {
+	height: 0;
+}
+
 /*========*/
 /* MOBILE */
 /*========*/
-- 
2.11.4.GIT