Update index.html

I-can-t-think-of-any-name · Jul 4, 2023 · 6fe8b97 · 6fe8b97
1 parent 960e54d
commit 6fe8b97
Showing 1 changed file with 26 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -10,9 +10,21 @@
       rel="stylesheet"
     />
     <style>
+      :root {
+        --color-background: #eae1df;
+        --color-generate-button-bg: #b79492;
+        --color-generate-button-text: #ffffff;
+        --color-settings-icon: #000000;
+        --color-settings-bg: #f5f5f5;
+        --color-settings-text: #b79492;
+        --color-password-bg: #f5f5f5;
+        --color-password-text: #b79492;
+        --color-hint-text: #917c78;
+      }
+
       body {
         font-family: "Manrope", sans-serif;
-        background-color: #eae1df;
+        background-color: var(--color-background);
         top: -20%;
         height: 100%;
         width: 100%;
@@ -30,6 +42,7 @@
         margin-right: 20px;
         display: inline-flex;
         align-items: center;
+        color: var(--color-settings-icon);
       }
 
       h1 {
@@ -46,49 +59,49 @@
       }
 
       .generate {
-        background-color: #b79492;
+        background-color: var(--color-generate-button-bg);
         font-size: 1em;
 
         font-family: inherit;
         border-color: transparent;
-        color: #fff;
+        color: var(--color-generate-button-text);
         border-radius: 5px;
         display: inline-flex;
         padding: 0.5em 0.75em;
         margin: 0.75em auto;
       }
 
       code {
-        background-color: #f5f5f5;
-        color: #b79492;
+        background-color: var(--color-password-bg);
+        color: var(--color-password-text);
         font-size: 2em;
         padding: 0.25em 0.5em 0.25em;
       }
 
       .to-copy {
-        color: #917c78;
+        color: var(--color-hint-text);
         font-size: smaller;
       }
 
       .tippy-box[data-theme~="custom"] {
-        background-color: #f5f5f5;
-        color: #b79492;
+        background-color: var(--color-settings-bg);
+        color: var(--color-settings-text);
       }
       .tippy-box[data-theme~="custom"][data-placement^="top"]
         > .tippy-arrow::before {
-        border-top-color: #f5f5f5;
+        border-top-color: var(--color-settings-bg);
       }
       .tippy-box[data-theme~="custom"][data-placement^="left"]
         > .tippy-arrow::before {
-        border-left-color: #f5f5f5;
+        border-left-color: var(--color-settings-bg);
       }
       .tippy-box[data-theme~="custom"][data-placement^="right"]
         > .tippy-arrow::before {
-        border-right-color: #f5f5f5;
+        border-right-color: var(--color-settings-bg);
       }
       .tippy-box[data-theme~="custom"][data-placement^="bottom"]
         > .tippy-arrow::before {
-        border-bottom-color: #f5f5f5;
+        border-bottom-color: var(--color-settings-bg);
       }
 
       .settings-row {
@@ -97,7 +110,7 @@
         align-items: center;
       }
       .input-number {
-        width: calc(2ch + 20px);
+        width: 40px;
         max-width: 100px;
         align-items: center;
         border: 1px solid transparent;