From 1a2c8ee60a1b952158898e22487073727d1f81ef Mon Sep 17 00:00:00 2001 From: Dmitriy Titarenko Date: Tue, 27 Feb 2024 23:32:09 +0500 Subject: [PATCH] Theme restore and some other styling --- aes.css | 21 ++++++++++++++++----- aes.js | 8 +++++++- hex.css | 4 +++- index.html | 10 +++++----- modes/CBC_decryption.min.svg | 2 +- modes/CBC_encryption.min.svg | 2 +- modes/CFB_decryption.min.svg | 2 +- modes/CFB_encryption.min.svg | 2 +- modes/CTR_decryption.min.svg | 2 +- modes/CTR_encryption.min.svg | 2 +- modes/ECB_decryption.min.svg | 2 +- modes/ECB_encryption.min.svg | 2 +- modes/OFB_decryption.min.svg | 2 +- modes/OFB_encryption.min.svg | 2 +- 14 files changed, 41 insertions(+), 22 deletions(-) diff --git a/aes.css b/aes.css index a65cd38..cb77d29 100644 --- a/aes.css +++ b/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; diff --git a/aes.js b/aes.js index 319b1b6..65b29dd 100644 --- a/aes.js +++ b/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) => { diff --git a/hex.css b/hex.css index 704ce70..6e04967 100644 --- a/hex.css +++ b/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 { diff --git a/index.html b/index.html index 7babe7f..7034ee5 100644 --- a/index.html +++ b/index.html @@ -26,11 +26,7 @@

AES Crypto Playground

- - Padding +