Update assets/index-48a6f08c.css

assets/index-48a6f08c.css

@@ -1,14 +1,8 @@
-body {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-  color: #fff;
-  background-color: #212121;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
+:root {
+  --primary-color: #212121;
+  --secondary-color: #757575;
+  --background-color: #424242;
+  --text-color: #ffffff;
 }
 
 #root {
@@ -16,6 +10,8 @@ body {
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 
 .language-container {
@@ -27,28 +23,32 @@ body {
   display: flex;
   justify-content: center;
   gap: 20px;
-  width: 100%;
-  max-width: 800px;
+  width: 800px;
 }
 
-.textbox-container>textarea {
+.textbox-container > textarea {
   width: 50%;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 
 .language-selector {
-  width: calc(50% - 20px);
+  width: 50%;
 }
 
-.language-selector>select {
+.language-selector > select {
   width: 150px;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 
 .progress-container {
   position: relative;
   font-size: 14px;
-  color: #fff;
-  background-color: #424242;
+  color: var(--text-color);
+  background-color: var(--secondary-color);
   border: solid 1px;
+  border-color: var(--secondary-color);
   border-radius: 8px;
   text-align: left;
   overflow: hidden;
@@ -61,7 +61,7 @@ body {
   width: 1%;
   height: 100%;
   overflow: hidden;
-  background-color: #2196f3;
+  background-color: var(--primary-color);
   white-space: nowrap;
 }
 
@@ -86,54 +86,63 @@ body {
   gap: 10px;
 }
 
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+  background-color: var(--background-color);
+}
+
 h1 {
   font-size: 3.2em;
   line-height: 1;
-  color: #fff;
+  color: var(--text-color);
 }
 
 h1, h2 {
   margin: 8px;
-  color: #fff;
+  color: var(--text-color);
 }
 
 select {
   padding: .3em;
   cursor: pointer;
   border-radius: 8px;
-  border: none;
+  border: 1px solid transparent;
   font-size: 1em;
   font-family: inherit;
-  background-color: #555;
+  background-color: var(--primary-color);
   transition: border-color .25s;
+  color: var(--text-color);
 }
 
 select:hover {
-  border-color: #646cff;
+  border-color: var(--text-color);
 }
 
-select:focus,
-select:focus-visible {
-  outline: 4px auto #646cff;
+select:focus, select:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
 }
 
 textarea {
   padding: .6em;
   border-radius: 8px;
-  border: none;
+  border: 1px solid transparent;
   font-size: 1em;
   font-family: inherit;
-  background-color: #555;
+  background-color: var(--primary-color);
   transition: border-color .25s;
+  color: var(--text-color);
 }
 
 textarea:hover {
-  border-color: #646cff;
+  border-color: var(--text-color);
 }
 
-textarea:focus,
-textarea:focus-visible {
-  outline: 4px auto #646cff;
+textarea:focus, textarea:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
 }
 
 button {
@@ -141,25 +150,22 @@ button {
   cursor: pointer;
   font-weight: 500;
   border-radius: 8px;
-  border: none;
+  border: 1px solid transparent;
   font-size: 1em;
   font-family: inherit;
-  background-color: #1976d2;
-  color: #fff;
-  transition: background-color .25s;
+  background-color: var(--primary-color);
+  transition: border-color .25s;
+  color: var(--text-color);
 }
 
-button[disabled] {
-  cursor: not-allowed;
-  background-color: #666;
-  color: #ccc;
+button:hover:not([disabled]) {
+  border-color: var(--text-color);
 }
 
-button:hover:not([disabled]) {
-  background-color: #005cb2;
+button:focus, button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
 }
 
-button:focus,
-button:focus-visible {
-  outline: 4px auto #646cff;
+button[disabled] {
+  cursor: not-allowed;
 }