From e574d5a98ee4424a7d4e40c2cc02fa088ba35f49 Mon Sep 17 00:00:00 2001
From: Kloon ImKloon <kloon15@gmail.com>
Date: Tue, 10 Oct 2023 18:29:45 +0200
Subject: [PATCH] Integrate dark mode into main css

---
 frontend/src/css/_share.css        |   3 +-
 frontend/src/css/_shell.css        |   4 +-
 frontend/src/css/_variables.css    |  10 ++-
 frontend/src/css/base.css          |  33 ++++++-
 frontend/src/css/dark.css          | 136 -----------------------------
 frontend/src/css/dashboard.css     |  22 +++--
 frontend/src/css/header.css        |  42 +++++----
 frontend/src/css/listing-icons.css |   2 +-
 frontend/src/css/listing.css       |  17 ++--
 frontend/src/css/mobile.css        |   8 +-
 frontend/src/css/styles.css        |  32 +++----
 11 files changed, 103 insertions(+), 206 deletions(-)
 delete mode 100644 frontend/src/css/dark.css

diff --git a/frontend/src/css/_share.css b/frontend/src/css/_share.css
index d4772dac..04034a32 100644
--- a/frontend/src/css/_share.css
+++ b/frontend/src/css/_share.css
@@ -15,7 +15,8 @@
   box-shadow:
     rgba(0, 0, 0, 0.06) 0px 1px 3px,
     rgba(0, 0, 0, 0.12) 0px 1px 2px;
-  background: #fff;
+  background: var(--surfacePrimary);
+  color: var(--textPrimary);
   border-radius: 0.2em;
   margin: 5px;
   overflow: hidden;
diff --git a/frontend/src/css/_shell.css b/frontend/src/css/_shell.css
index a2ff3b8b..7ca3ec9e 100644
--- a/frontend/src/css/_shell.css
+++ b/frontend/src/css/_shell.css
@@ -4,8 +4,8 @@
   left: 0;
   height: 25em;
   max-height: calc(100% - 4em);
-  background: white;
-  color: #212121;
+  background: var(--surfacePrimary);
+  color: var(--textPrimary);
   z-index: 9999;
   width: 100%;
   font-family: monospace;
diff --git a/frontend/src/css/_variables.css b/frontend/src/css/_variables.css
index 228e0810..468b08dd 100644
--- a/frontend/src/css/_variables.css
+++ b/frontend/src/css/_variables.css
@@ -15,6 +15,10 @@
   --input-red: rgb(252, 208, 205);
   --input-green: rgb(201, 242, 218);
 
+  --item-selected: white;
+
+  --action: rgb(84, 110, 122);
+
   --background: rgb(250, 250, 250);
   --surfacePrimary: rgb(255, 255, 255);
   --surfaceSecondary: rgb(230, 230, 230);
@@ -22,10 +26,9 @@
   --iconPrimary: var(--icon-blue);
   --iconSecondary: rgb(255, 255, 255);
   --iconTertiary: rgb(204, 204, 204);
-  --action: rgb(84, 110, 122);
   --textPrimary: rgb(111, 111, 111);
   --textSecondary: rgb(51, 51, 51);
-  --hover: rgba(255, 255, 255, 0.1);
+  --hover: rgba(0, 0, 0, 0.1);
   --borderPrimary: rgba(0, 0, 0, 0.1);
   --borderSecondary: rgba(0, 0, 0, 0.2);
 }
@@ -34,6 +37,8 @@
   --input-red: rgb(115, 48, 45);
   --input-green: rgb(20, 122, 65);
 
+  --action: rgb(255, 255, 255);
+
   --background: rgb(20, 29, 36);
   --surfacePrimary: rgb(32, 41, 47);
   --surfaceSecondary: rgb(58, 65, 71);
@@ -43,7 +48,6 @@
   --iconPrimary: rgb(255, 255, 255);
   --iconSecondary: rgb(255, 255, 255);
   --iconTertiary: rgb(255, 255, 255);
-  --action: rgb(255, 255, 255);
   --hover: rgba(255, 255, 255, 0.1);
   --borderPrimary: rgba(255, 255, 255, 0.05);
   --borderSecondary: rgba(255, 255, 255, 0.15);
diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
index 90b6fbec..7d90468e 100644
--- a/frontend/src/css/base.css
+++ b/frontend/src/css/base.css
@@ -94,6 +94,7 @@ main {
 
 .breadcrumbs {
   height: 3em;
+  background: var(--background);
   border-bottom: 1px solid var(--divider);
 }
 
@@ -101,7 +102,7 @@ main {
 .breadcrumbs {
   display: flex;
   align-items: center;
-  color: #6f6f6f;
+  color: var(--textPrimary);
 }
 
 .breadcrumbs a {
@@ -147,3 +148,33 @@ html[dir="rtl"] .breadcrumbs a {
 .break-word {
   word-break: break-all;
 }
+
+.vue-number-input > input {
+  background: var(--surfacePrimary) !important;
+  border-color: var(--surfaceSecondary) !important;
+  color: var(--textSecondary) !important;
+}
+
+.vue-number-input--small > input {
+  height: 1rem !important;
+  font-size: 1rem !important;
+}
+
+.vue-number-input :hover,
+.vue-number-input :focus {
+  border-color: var(--borderSecondary) !important;
+}
+
+.vue-number-input__button {
+  background: var(--surfacePrimary) !important;
+}
+
+.vue-number-input__button--minus,
+.vue-number-input__button--plus {
+  border-color: var(--surfaceSecondary) !important;
+}
+
+.vue-number-input__button::before,
+.vue-number-input__button::after {
+  background: var(--textSecondary) !important;
+}
diff --git a/frontend/src/css/dark.css b/frontend/src/css/dark.css
deleted file mode 100644
index e1d12d78..00000000
--- a/frontend/src/css/dark.css
+++ /dev/null
@@ -1,136 +0,0 @@
-#search #input {
-  background: var(--surfaceSecondary);
-  border-color: var(--surfacePrimary);
-}
-#search #input input::placeholder {
-  color: var(--textSecondary);
-}
-#search.active #input {
-  background: var(--surfacePrimary);
-}
-#search.active input {
-  color: var(--textPrimary);
-}
-#search #result {
-  background: var(--background);
-  color: var(--textPrimary);
-}
-#search .boxes {
-  background: var(--surfacePrimary);
-}
-#search .boxes h3 {
-  color: var(--textSecondary);
-}
-
-.action {
-  color: var(--action) !important;
-}
-.action:hover {
-  background-color: var(--hover);
-}
-.action i {
-  color: var(--action) !important;
-}
-.action .counter {
-  border-color: var(--surfacePrimary);
-}
-
-.breadcrumbs {
-  border-color: var(--divider);
-  color: var(--textPrimary) !important;
-}
-.breadcrumbs span {
-  color: var(--textPrimary) !important;
-}
-.breadcrumbs a:hover {
-  background-color: var(--hover);
-}
-
-#listing .item {
-  background: var(--surfacePrimary);
-  color: var(--textPrimary);
-  border-color: var(--divider) !important;
-}
-#listing .item i {
-  color: var(--iconPrimary);
-}
-#listing .item[aria-selected="true"] i {
-  color: var(--iconSecondary);
-}
-#listing h2,
-#listing.list .header span {
-  color: var(--textPrimary) !important;
-}
-#listing.list .header i {
-  color: var(--textPrimary);
-}
-#listing.list .item.header {
-  background: var(--background);
-}
-
-.card h3 {
-  color: var(--textPrimary);
-}
-.card#share input,
-.card#share select {
-  background: var(--surfacePrimary);
-  color: var(--textPrimary);
-  border: 1px solid var(--borderPrimary);
-}
-
-.collapsible {
-  border-color: var(--divider);
-}
-.collapsible > label * {
-  color: var(--textPrimary);
-}
-
-.file-list li:hover {
-  background: var(--surfaceSecondary);
-}
-.file-list li:before {
-  color: var(--textSecondary);
-}
-.file-list li[aria-selected="true"]:before {
-  color: var(--iconSecondary);
-}
-
-.shell {
-  background: var(--surfacePrimary);
-  color: var(--textPrimary);
-}
-.shell__result {
-  border-top: 1px solid var(--divider);
-}
-
-#editor-container {
-  background: var(--background);
-}
-
-#editor-container .bar {
-  background: var(--surfacePrimary);
-}
-
-@media (max-width: 736px) {
-  #file-selection {
-    background: var(--surfaceSecondary) !important;
-  }
-  #file-selection span {
-    color: var(--textPrimary) !important;
-  }
-  nav {
-    background: var(--surfaceSecondary) !important;
-  }
-  #dropdown {
-    background: var(--surfaceSecondary) !important;
-  }
-}
-
-.share__box {
-  background: var(--surfacePrimary) !important;
-  color: var(--textPrimary);
-}
-
-.share__box__element {
-  border-top-color: var(--divider);
-}
diff --git a/frontend/src/css/dashboard.css b/frontend/src/css/dashboard.css
index 959d58be..311c9b41 100644
--- a/frontend/src/css/dashboard.css
+++ b/frontend/src/css/dashboard.css
@@ -233,7 +233,7 @@ html[dir="rtl"] .card .card-title > *:first-child {
 }
 
 .card h3 {
-  color: rgba(0, 0, 0, 0.53);
+  color: var(--textPrimary);
   font-size: 1em;
   font-weight: 500;
   margin: 2em 0 1em;
@@ -252,6 +252,14 @@ html[dir="rtl"] .card .card-title > *:first-child {
   max-width: 15em;
 }
 
+.card#share input,
+.card#share select,
+.card#share input::-webkit-inner-spin-button,
+.card#share input::-webkit-outer-spin-button {
+  background: var(--surfacePrimary);
+  color: var(--textSecondary);
+}
+
 .card#share ul {
   list-style: none;
   padding: 0;
@@ -278,7 +286,7 @@ html[dir="rtl"] .card .card-title > *:first-child {
 .card#share ul li select {
   padding: 0.2em;
   margin-right: 0.5em;
-  border: 1px solid #dadada;
+  border: 1px solid var(--borderPrimary);
 }
 
 .card#share .action.copy-clipboard::after {
@@ -348,18 +356,18 @@ html[dir="rtl"] .card .card-title > *:first-child {
 
 .file-list li[aria-selected="true"] {
   background: var(--blue) !important;
-  color: #fff !important;
+  color: var(--iconSecondary) !important;
   transition: 0.1s ease all;
 }
 
 .file-list li:hover {
-  background-color: #e9eaeb;
+  background: var(--surfaceSecondary);
   cursor: pointer;
 }
 
 .file-list li:before {
   content: "folder";
-  color: #6f6f6f;
+  color: var(--textPrimary);
   vertical-align: middle;
   line-height: 1.4;
   font-family: "Material Icons";
@@ -368,7 +376,7 @@ html[dir="rtl"] .card .card-title > *:first-child {
 }
 
 .file-list li[aria-selected="true"]:before {
-  color: white;
+  color: var(--iconSecondary);
 }
 
 .help {
@@ -419,7 +427,7 @@ html[dir="rtl"] .card .card-title > *:first-child {
 
 .collapsible > label * {
   margin: 0;
-  color: rgba(0, 0, 0, 0.57);
+  color: var(--textPrimary);
 }
 
 .collapsible > label i {
diff --git a/frontend/src/css/header.css b/frontend/src/css/header.css
index 314f19bf..a35a576d 100644
--- a/frontend/src/css/header.css
+++ b/frontend/src/css/header.css
@@ -82,7 +82,8 @@ header .menu-button {
 }
 
 #search #input {
-  background-color: #f5f5f5;
+  background: var(--surfaceSecondary);
+  border-color: var(--surfacePrimary);
   display: flex;
   height: 100%;
   padding: 0em 0.75em;
@@ -92,10 +93,14 @@ header .menu-button {
   z-index: 2;
 }
 
+#search #input input::placeholder {
+  color: var(--textSecondary);
+}
+
 #search.active #input {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
+  border-bottom: 1px solid var(--borderPrimary);
   box-shadow: 0 0 5px var(--borderPrimary);
-  background-color: #fff;
+  background: var(--surfacePrimary);
   height: 4em;
 }
 
@@ -105,7 +110,7 @@ header .menu-button {
 
 #search.active i,
 #search.active input {
-  color: #212121;
+  color: var(--textPrimary);
 }
 
 #search #input > .action,
@@ -124,10 +129,10 @@ header .menu-button {
 #search #result {
   visibility: visible;
   max-height: none;
-  background-color: #f8f8f8;
+  background: var(--background);
   text-align: left;
   padding: 0;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--textPrimary);
   height: 0;
   transition:
     0.1s ease height,
@@ -146,7 +151,6 @@ html[dir="rtl"] #search #result {
 }
 
 html[dir="rtl"] #search #result {
-  direction: rtl;
   text-align: right;
 }
 
@@ -208,28 +212,28 @@ html[dir="rtl"] #search #result ul > * {
   margin-right: 0.3em;
 }
 
-#search::-webkit-input-placeholder {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-#search:-moz-placeholder {
-  opacity: 1;
-  color: rgba(255, 255, 255, 0.5);
+// I dont think we need these anymore
+/* #search::-webkit-input-placeholder {
+  color: var(--textPrimary);
 }
 
 #search::-moz-placeholder {
   opacity: 1;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--textPrimary);
 }
 
 #search:-ms-input-placeholder {
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--textPrimary);
 }
 
+#search #input input::placeholder {
+  color: var(--textPrimary);
+} */
+
 #search .boxes {
-  border: 1px solid rgba(0, 0, 0, 0.075);
+  border: 1px solid var(--borderPrimary);
   box-shadow: 0 0 5px var(--borderPrimary);
-  background: #fff;
+  background: var(--surfacePrimary);
   margin: 1em 0;
 }
 
@@ -237,7 +241,7 @@ html[dir="rtl"] #search #result ul > * {
   margin: 0;
   font-weight: 500;
   font-size: 1em;
-  color: #212121;
+  color: var(--textSecondary);
   padding: 0.5em;
 }
 
diff --git a/frontend/src/css/listing-icons.css b/frontend/src/css/listing-icons.css
index 3fa2d2e5..49db1acb 100644
--- a/frontend/src/css/listing-icons.css
+++ b/frontend/src/css/listing-icons.css
@@ -249,5 +249,5 @@
   content: "folder";
 }
 .file-icons [aria-selected="true"] i {
-  color: var(--item-selected);
+  color: var(--iconSecondary);
 }
diff --git a/frontend/src/css/listing.css b/frontend/src/css/listing.css
index 94a55aba..565815a4 100644
--- a/frontend/src/css/listing.css
+++ b/frontend/src/css/listing.css
@@ -1,7 +1,3 @@
-#listing {
-  --item-selected: white;
-}
-
 html[dir="rtl"] #listing {
   margin-right: 16em;
 }
@@ -9,7 +5,7 @@ html[dir="rtl"] #listing {
 #listing h2 {
   margin: 0 0 0 0.5em;
   font-size: 0.9em;
-  color: rgba(0, 0, 0, 0.38);
+  color: var(--textPrimary);
   font-weight: 500;
 }
 
@@ -25,11 +21,12 @@ html[dir="rtl"] #listing {
 }
 
 #listing .item {
-  background-color: #fff;
+  background: var(--surfacePrimary);
+  border-color: var(--divider);
   position: relative;
   display: flex;
   flex-wrap: nowrap;
-  color: #6f6f6f;
+  color: var(--textPrimary);
   transition:
     0.1s ease background,
     0.1s ease opacity;
@@ -176,7 +173,7 @@ html[dir="rtl"] #listing {
 
 #listing .item[aria-selected="true"] {
   background: var(--blue) !important;
-  color: var(--item-selected) !important;
+  color: var(--iconSecondary) !important;
 }
 
 #listing.list .item div:first-of-type {
@@ -219,7 +216,7 @@ html[dir="rtl"] #listing {
 
 #listing.list .item.header {
   display: flex !important;
-  background: #fafafa;
+  background: var(--background);
   z-index: 999;
   padding: 0.85em;
   border: 0;
@@ -287,5 +284,5 @@ html[dir="rtl"] #listing {
 
 #listing #multiple-selection p,
 #listing #multiple-selection i {
-  color: var(--item-selected);
+  color: var(--iconSecondary);
 }
diff --git a/frontend/src/css/mobile.css b/frontend/src/css/mobile.css
index 8dcb5804..d19e4936 100644
--- a/frontend/src/css/mobile.css
+++ b/frontend/src/css/mobile.css
@@ -37,7 +37,7 @@
     top: 1em;
     right: 1em;
     display: block;
-    background-color: #fff;
+    background: var(--surfaceSecondary);
     box-shadow: 0 0 5px var(--borderPrimary);
     transform: scale(0);
     transition: 0.1s ease-in-out transform;
@@ -77,7 +77,7 @@
     transform: translateX(-50%);
     display: flex;
     align-items: center;
-    background: #fff;
+    background: var(--surfaceSecondary);
     box-shadow:
       rgba(0, 0, 0, 0.06) 0px 1px 3px,
       rgba(0, 0, 0, 0.12) 0px 1px 2px;
@@ -92,7 +92,7 @@
   #file-selection > span {
     display: inline-block;
     margin-left: 1em;
-    color: #6f6f6f;
+    color: var(--textPrimary);
     margin-right: auto;
   }
   #file-selection .action span {
@@ -101,7 +101,7 @@
   nav {
     top: 0;
     z-index: 99999;
-    background: #fff;
+    background: var(--surfaceSecondary);
     height: 100%;
     width: 16em;
     box-shadow: 0 0 5px var(--borderPrimary);
diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css
index 7a369302..f593bed7 100644
--- a/frontend/src/css/styles.css
+++ b/frontend/src/css/styles.css
@@ -79,7 +79,7 @@ main .spinner .bounce2 {
   transition: 0.2s ease all;
   border: 0;
   margin: 0;
-  color: #546e7a;
+  color: var(--action);
   border-radius: 50%;
   background: transparent;
   padding: 0;
@@ -101,7 +101,7 @@ main .spinner .bounce2 {
 }
 
 .action:hover {
-  background-color: var(--borderPrimary);
+  background-color: var(--hover);
 }
 
 .action ul {
@@ -122,7 +122,7 @@ main .spinner .bounce2 {
 }
 
 .action ul li:hover {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: var(--divider);
 }
 
 #click-overlay {
@@ -145,7 +145,7 @@ main .spinner .bounce2 {
   bottom: 0;
   right: 0;
   background: var(--blue);
-  color: #fff;
+  color: var(--iconSecondary);
   border-radius: 50%;
   font-size: 0.75em;
   width: 1.8em;
@@ -153,7 +153,7 @@ main .spinner .bounce2 {
   text-align: center;
   line-height: 1.55em;
   font-weight: bold;
-  border: 2px solid white;
+  border: 2px solid var(--borderPrimary);
 }
 
 /* PREVIEWER */
@@ -302,7 +302,7 @@ main .spinner .bounce2 {
 #editor-container {
   display: flex;
   flex-direction: column;
-  background-color: #fafafa;
+  background-color: var(--background);
   position: fixed;
   padding-top: 4em;
   top: 0;
@@ -313,6 +313,10 @@ main .spinner .bounce2 {
   overflow: hidden;
 }
 
+#editor-container .bar {
+  background: var(--surfacePrimary);
+}
+
 #editor-container #editor {
   flex: 1;
 }
@@ -335,22 +339,6 @@ html[dir="rtl"] .breadcrumbs .chevron {
   font-size: 1rem;
 }
 
-/* * * * * * * * * * * * * * * *
- *            PROMPT           *
- * * * * * * * * * * * * * * * */
-
-.noty_buttons {
-  text-align: right;
-  padding: 0 10px 10px !important;
-}
-
-.noty_buttons button {
-  background: var(--divider);
-  border: 1px solid var(--borderPrimary);
-  box-shadow: 0 0 0 0;
-  font-size: 1rem;
-}
-
 /* * * * * * * * * * * * * * * *
  *            FOOTER           *
  * * * * * * * * * * * * * * * */