Adjusting colors and refactor css

kopia · Sep 30, 2023 · 6a881e0 · 6a881e0
1 parent 96115b3
commit 6a881e0
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 27 deletions.
diff --git a/src/css/App.css b/src/css/App.css
@@ -130,17 +130,14 @@ a:active {
   filter: brightness(80%);
 }
 
-.table {
-  color: var(--color-text-body);
-}
-
+.table,
 .table-hover>tbody>tr:hover>* {
   color: var(--color-text-body);
 }
 
 .table-striped>tbody>tr:nth-of-type(odd)>* {
   color: var(--color-text-body);
-  background-color: var(--color-stripe);
+  background-color: var(--color-select);
 }
 
 .table-striped>tbody>tr:nth-of-type(even)>* {
@@ -161,7 +158,6 @@ a:active {
 
 .form-control,
 .form-control[readonly],
-.form-control:focus,
 .form-control:active,
 .form-control:hover,
 .form-control:disabled {
@@ -170,7 +166,6 @@ a:active {
 }
 
 .form-select,
-.form-select:focus,
 .form-select:active,
 .form-select:hover,
 .form-select:disabled {
@@ -179,16 +174,24 @@ a:active {
 }
 
 .form-control-sm,
-.form-control-sm:focus,
 .form-control-sm:active,
 .form-control-sm:hover,
 .form-control-sm:disabled {
   color: var(--color-text-body);
   background-color: var(--background-color);
 }
 
-.form-check-input,
+.form-select:focus,
+.form-control:focus,
+.form-control-sm:focus,
 .form-check-input:focus,
+.accordion-button:focus {
+  color: var(--color-text-body);
+  background-color: var(--background-color);
+  box-shadow: 0 0 0 0.10rem var(--color-primary);
+}
+
+.form-check-input,
 .form-check-input:active,
 .form-check-input:disabled {
   color: var(--color-text-body);
@@ -207,22 +210,24 @@ a:active {
   background-color: var(--background-color)
 }
 
-.accordion-button.collapsed {
-  font-weight: bold;
-  padding: 10px;
-}
-
-.accordion-button:focus {
-  box-shadow: 0 0 0 0.10rem var(--color-badge-primary);
-}
-
 .accordion-button:link,
 .accordion-button:visited,
 .accordion-button:hover,
-.accordion-button:active {
+.accordion-button:active,
+.accordion-button:focus-within,
+.accordion-button:focus-visible {
   color: var(--color-text-body);
-  background-color: var(--background-color);
-  filter: brightness(85%)
+  background-color: var(--color-select);
+  filter: brightness(95%)
+}
+
+.accordion-item {
+  border: 1px solid rgba(0,0,0,.125);
+}
+
+.accordion-button.collapsed {
+  font-weight: bold;
+  padding: 10px;
 }
 
 .popover {
@@ -342,8 +347,8 @@ div.tab-body {
 .modal-footer,
 .modal-header,
 .modal-body {
-  background-color: var(--background-color);
   color: var(--color-text-body);
+  background-color: var(--background-color);
 }
 
 #mountedPath {

diff --git a/src/css/Theme.css b/src/css/Theme.css
@@ -6,7 +6,7 @@
   --color-warning: #e1704b;
   --color-success: #5ea5cd;
   --color-submit: #00B4D8;
-  --color-select: #f2f9ff;
+  --color-select: #f4f4f4;
   --color-link: #2A7FFF;
 
   --color-text: #ffffff;
@@ -31,8 +31,7 @@
   --color-warning: #7e0d6b;
   --color-success: #0d9aab;
   --color-submit: #00B4D8;
-  --color-stripe: #323232;
-  --color-select: #323232;
+  --color-select: #2c2c2c;
   --color-link: #6a8ec6;
 
   --color-text: #cfcfcf;
@@ -57,7 +56,7 @@
   --color-warning: #ffd6a5;
   --color-success: #bdb2ff;
   --color-submit: #a0c4ff;
-  --color-select: #f2f9ff;
+  --color-select: #f5f4f4;
   --color-link: #2A7FFF;
 
   --color-text: #000000;
@@ -82,7 +81,7 @@
   --color-warning: #e8cc2a;
   --color-success: #0077B6;
   --color-submit: #00B4D8;
-  --color-select: #f2f9ff;
+  --color-select: #f5f4f4;
   --color-link: #03045E;
 
   --color-text: #ffffff;