Theme restore and some other styling

aes.css

@@ -1,6 +1,7 @@
 html {
-	background: #fff;
 	color: #222;
+	background: #fff;
+	transition: 0.2s filter linear;
 }
 
 html.night {
@@ -20,9 +21,9 @@ h3 {
 	margin: 20px 0 4px 0;
 }
 
-input, select {
+input, select, textarea, button {
+	color: #222;
 	font: min(1.8vw, 1.8vh) 'Julia';
-	margin-top: 2px;
 }
 
 input {
@@ -43,6 +44,9 @@ input {
 	width: min(80vw, 80vh);
 }
 
+.dir-td {
+	position: relative;
+}
 #dir {
 	position: absolute;
 	bottom: 4px;
@@ -51,10 +55,16 @@ input {
 }
 
 #mode-img {
-	background: 10px center / contain no-repeat;
-	filter: drop-shadow(0px 0px 6px #f50);
+	transition: 0.2s filter linear;
+	background: 10px 0 / contain no-repeat;
+	filter: drop-shadow(0px 0px 10px #07f);
 	position: relative;
 	width: 99%;
+	translate: 0 -4px;
+	transform: scaleY(1.1);
+}
+.night #mode-img {
+	filter: drop-shadow(0px 0px 10px #f50);
 }
 #mode-img.mode-CBC-Decryption {
 	background-image: url("modes/CBC_decryption.min.svg");
@@ -102,6 +112,7 @@ input {
 }
 
 #result {
+	transition: 0.2s filter linear;
 	font: min(1.8vw, 1.8vh)/1em 'Julia';
 	width: min(80vw, 78vh);
 	resize: none;

aes.js

@@ -19,7 +19,13 @@ const $xor = $(".xed.xor");
 
 const $result = $("#result");
 
-$("#theme").onclick = () => $("html").classList.toggle("night");
+$("#theme").onclick = () => {
+	$("html").classList.toggle("night");
+	localStorage.setItem("night", $("html").classList.contains("night"));
+}
+
+if(localStorage.getItem("night") == "true")
+	$("#theme").click();
 
 const update = () => $plain.dispatchEvent(new Event("change"));
 const setResult = (isOk, text) => {

hex.css

@@ -28,8 +28,10 @@
 
 .xed textarea:focus {
 	outline: transparent !important;
+}
+.xed textarea:read-write:focus {
 	background-color: #fff5d9;
-	box-shadow: 0 0 10px #39e;
+	box-shadow: 0 0 10px #f50;
 }
 
 .xed-top, .xed-left, .xed-size {

index.html

@@ -26,11 +26,7 @@ <h1>AES Crypto Playground</h1>
 		<option value="CTR">CTR</option>
 		<option value="OFB">OFB</option>
 		<option value="CFB">CFB</option>
-	</select></td>
-	<td id="mode-img" rowspan=7><select id="dir">
-		<option value="Decryption">Decryption</option>
-		<option value="Encryption">Encryption</option>
-	</td></tr>
+	</select></td><td id="mode-img" rowspan=8></td></tr>
 	<tr><td>Padding</td><td><select id="padding">
 		<option value="Pkcs7">PKCS7 (default)</option>
 		<option value="AnsiX923">ANSI X9.23</option>
@@ -49,6 +45,10 @@ <h1>AES Crypto Playground</h1>
 		<option value="deflate">Deflate</option>
 		<option value="gzip">Gzip</option>
 	</select></td></tr>
+	<tr><td class="dir-td" colspan=3><select id="dir">
+		<option value="Decryption">Decryption</option>
+		<option value="Encryption">Encryption</option>
+	</td></tr>
 </table>
 
 <h3>Plain</h3>