+
🔙 Back
+
💾 Save History
+
❌ Clear History
-
- 🔙 Back
- 💾 Save History
- ❌ Clear History
-
+
-
-
-
diff --git a/popup.js b/popup.js
index bfe6341..079d1ea 100644
--- a/popup.js
+++ b/popup.js
@@ -74,30 +74,16 @@ async function autoSelect(){
if (clearkey) {
document.getElementById('noEME').style.display = 'none';
- document.getElementById('wvHome').style.display = 'none';
- document.getElementById('ckHome').style.display = 'flex';
- document.getElementById('history').style.display = 'none'
- document.getElementById('selectPssh').style.display = 'none';
- document.getElementById('selectRequest').style.display = 'none';
+ document.getElementById('ckHome').style.display = 'grid';
document.getElementById('ckResult').value = clearkey;
document.getElementById('ckResult').addEventListener("click", copyResult);
document.getElementById('toggleHistory').style.display = 'none'
} else if (psshs.length) {
- document.getElementById('wvHome').style.display = 'flex';
document.getElementById('noEME').style.display = 'none';
- document.getElementById('ckHome').style.display = 'none';
- document.getElementById('history').style.display = 'none';
+ document.getElementById('home').style.display = 'grid';
document.getElementById('guess').addEventListener("click", guess);
document.getElementById('result').addEventListener("click", copyResult);
drawList(psshs, 'psshSearch', 'psshList', 'pssh');
drawList(requests.map(r => r['url']), 'requestSearch', 'requestList', 'license');
autoSelect();
}
-else {
- document.getElementById('noEME').style.display = 'flex';
- document.getElementById('wvHome').style.display = 'none';
- document.getElementById('ckHome').style.display = 'none';
- document.getElementById('selectPssh').style.display = 'none';
- document.getElementById('selectRequest').style.display = 'none';
- document.getElementById('history').style.display = 'none';
-}
diff --git a/style.css b/style.css
index d8dfb53..1b253bc 100644
--- a/style.css
+++ b/style.css
@@ -1,192 +1,114 @@
-body {
- background: linear-gradient(to bottom, rgb(14, 116, 144), rgb(21, 94, 117), rgb(22, 78, 99));
- height: 100%;
- width: 100%;
- margin: 0;
- padding: 0;
- display: flex;
- flex-direction: column;
-}
-
-#updateNoticeExtension {
+.hidden {
display: none;
- justify-content: center;
- align-items: center;
- gap: 2%;
- color: black;
}
-#updateNoticeExtension a {
- text-decoration: none;
- color: white;
-}
-
-#ckHome {
- flex-direction: column;
- align-items: center;
+html, body {
+ display: grid;
height: 100%;
width: 100%;
+ margin: 0; /* Reset default margin */
+ padding: 0; /* Reset default padding */
}
-#h3, label {
- flex-shrink: 1;
+body {
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ background: linear-gradient(45deg, #0d364c, #062535, #02141e);
+ grid-template-rows: auto 1fr auto;
}
-#ckResult {
- width: 70%;
- height: 50%;
- overflow: hidden;
- resize: none;
- text-align: center;
- background-color: rgba(0, 0, 0, 0.5);
- border-radius: 1%;
- outline: none;
+#noEME {
+ justify-self: center;
+ align-self: center;
color: white;
}
-#wvForm {
- flex-direction: column;
- align-self: center;
+#updateNotice {
justify-self: center;
- width: 100%;
- height: 100%;
- gap: 1%;
-}
-
-#wvHome {
- flex-direction: column;
- width: 100%;
- height: 100%;
-}
-
-
-#history {
- flex-direction: column;
- height: 100%;
- width: 100%;
- overflow-x: auto;
-}
-
-#histButtons {
- flex-shrink: 1;
-}
-
-#histDisp {
- flex-grow: 1;
-}
-
-#selectPssh {
- flex-direction: column;
- height: 100%;
- width: 100%;
-}
-
-#selectRequest {
- flex-direction: column;
- height: 100%;
- width: 100%;
-}
-
-#requestList {
- overflow-y: scroll;
- background-color: rgba(0, 0, 0, 0.5);
- border-radius: 1%;
- outline: none;
+ align-self: end;
color: white;
- padding: 2%;
- width: 100%;
- height: 100%;
}
-#psshList {
- overflow-y: scroll;
- background-color: rgba(0, 0, 0, 0.5);
- border-radius: 1%;
- outline: none;
- color: white;
- padding: 2%;
- width: 100%;
- height: 100%;
+#updateNotice a{
+ color: aqua;
}
-#noEME {
- flex-direction: column;
- height: 100%;
- width: 100%;
- text-align: center;
+#wvForm {
+ display: grid;
+ grid-template-rows: auto;
color: white;
}
-#wvHomePSSHLines {
- display: flex;
- flex-direction: row;
- color: black;
- gap: 1%;
+#wvForm label {
+ justify-self: center;
}
#pssh {
- flex-grow: 1;
+ width: 80%;
+ justify-self: center;
}
-#wvHomeLicenseLine {
- color: black;
- flex-direction: row;
- display: flex;
- gap: 1%;
+#psshButton {
+ width: 20%;
+ justify-self: center;
}
#license {
- flex-grow: 1;
+ width: 80%;
+ justify-self: center;
}
-#wvHomeSchemeLine {
- display: flex;
- flex-direction: row;
- color: black;
- gap: 1%;
+#licenseButton {
+ width: 20%;
+ justify-self: center;
}
#scheme {
- flex-grow: 1;
+ width: 80%;
+ justify-self: center;
+}
+
+#toggleHistory {
+ display: grid;
+}
+
+#toggleHistory button {
+ width: 20%;
+ height: auto;
}
-#wvHomeResultLine {
- display: flex;
+#guess {
+ width: 20%;
justify-self: center;
- align-items: center;
- flex-direction: column;
- gap: 1%;
+ margin-top: 5%;
}
#result {
+ width: 90%;
+ overflow-y: scroll;
+ overflow-x: hidden;
resize: none;
- background-color: rgba(0, 0, 0, 0.5);
- border-radius: 1%;
- outline: none;
- width: 60%;
- text-align: center;
- color: white;
+ justify-self: center;
}
-.json-container {
- display: flex;
- flex-direction: column;
- color: black !important;
- background-color: unset !important;
+#psshList, #requestList {
+ color: white;
}
-.json-key {
- color:black !important;
+#ckHome h3, label {
+ color: white;
+ justify-self: center;
}
-.json-boolean{
- color:yellow !important;
-}
-.json-container .json-string{
- color:white !important;
-}
-.json-container .fa-caret-down{
- border-color:white rgba(0,0,0,0) !important;
+
+#ckHome label {
+ align-self: end;
}
-.json-container .fa-caret-right{
- border-color:rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) white !important;
+
+#ckResult {
+ width: 90%;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ resize: none;
+ justify-self: center;
}