Theme fixes (Velocidex#1895)

apersonintech · Jun 21, 2022 · 54a8246 · 54a8246
1 parent 0fa74f2
commit 54a8246
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 35 deletions.
diff --git a/gui/velociraptor/src/css/_variables.css b/gui/velociraptor/src/css/_variables.css
@@ -3,7 +3,7 @@
     --color-sidebar-inactive-foreground-hover: #000e7b;
     --color-sidebar-inactive-background-hover: var(--color-sidebar-background);
     --color-sidebar-foreground: #8f8f8f;
-    --color-sidebar-disabled-foreground: var(--color-sidebar-background);
+    --color-sidebar-disabled-foreground: lightgrey;
     --color-sidebar-background: #f5f5f5;
     --color-sidebar-active-foreground: #f0f0f0;
     --color-sidebar-active-background: #8f8f8f;

diff --git a/gui/velociraptor/src/themes/coolgray-dark.css b/gui/velociraptor/src/themes/coolgray-dark.css
@@ -48,8 +48,8 @@
 
   --color-sidebar-inactive-foreground-hover: #73C3FF;
   --color-sidebar-inactive-background-hover: rgb(52, 65, 75);
-  --color-sidebar-foreground: var(--color-foreground-dimmed);
-  --color-sidebar-disabled-foreground: var(--color-sidebar-background);
+  --color-sidebar-foreground: var(--color-foreground);
+  --color-sidebar-disabled-foreground: #B2B4B5;
   --color-sidebar-background: #2a343c;
   --color-sidebar-active-foreground: var(--color-foreground);
   --color-sidebar-active-background: rgb(68, 85, 97);

diff --git a/gui/velociraptor/src/themes/github-dimmed-dark.css b/gui/velociraptor/src/themes/github-dimmed-dark.css
@@ -45,8 +45,8 @@
 
   --color-sidebar-inactive-foreground-hover: var(--color-sidebar-foreground);
   --color-sidebar-inactive-background-hover: var(--color-btn-border);
-  --color-sidebar-foreground: var(--color-foreground-dimmed);
-  --color-sidebar-disabled-foreground: var(--color-sidebar-background);
+  --color-sidebar-foreground: var(--color-foreground);
+  --color-sidebar-disabled-foreground: var(--color-foreground-dimmed);
   --color-sidebar-background: var(--color-canvas-background);
   --color-sidebar-active-foreground: var(--color-foreground);
   --color-sidebar-active-background: var(--color-table-row-selected);
@@ -211,6 +211,12 @@ body.github-dimmed-dark {
   background: var(--color-sidebar-active-background);
 }
 
+.github-dimmed-dark .navigator.nav-pills.nav .nav-link.disabled {
+  color: var(--color-sidebar-disabled-foreground);
+  background: var(--color-sidebar-background);
+  pointer-events: none;
+}
+
 /* Buttons */
 
 .github-dimmed-dark .button.close:focus {
@@ -524,40 +530,22 @@ body.github-dimmed-dark {
 
 /* Form controls */
 .github-dimmed-dark .form-control,
-.github-dimmed-dark .timezone-selector,
-.github-dimmed-dark .labels,
-.github-dimmed-dark .velo__multi-value,
-.github-dimmed-dark .velo__option,
 .github-dimmed-dark .velo__control,
-.github-dimmed-dark .velo__value-container,
-.github-dimmed-dark .velo__indicator,
-.github-dimmed-dark .velo__dropdown-indicator,
-.github-dimmed-dark .velo__menu,
-.github-dimmed-dark .velo__input {
+.github-dimmed-dark .velo__menu {
   background: var(--color-btn-default-background);
   color: var(--color-foreground) !important;
   border-color: var(--color-btn-default-border);
   font-size: var(--font-size-base);
   box-shadow: none;
 }
 
-.github-dimmed-dark .form-control:focus {
+.github-dimmed-dark .form-control:focus,
+.github-dimmed-dark .velo__control:focus{
   box-shadow: none;
 }
 
 .github-dimmed-dark .form-control:hover,
-.github-dimmed-dark .timezone-selector:hover,
-.github-dimmed-dark .labels:hover,
-.github-dimmed-dark .velo__multi-value:hover,
-.github-dimmed-dark .velo__option:hover,
-.github-dimmed-dark .velo__control:hover,
-.github-dimmed-dark .velo__menu:hover,
-.github-dimmed-dark .velo__input:hover,
-.github-dimmed-dark .velo__option:hover,
-.github-dimmed-dark .velo__option--is-focused,
-.github-dimmed-dark .velo__control--is-focused,
-.github-dimmed-dark .velo__control--menu-is-open,
-.github-dimmed-dark .velo__multi-value:hover {
+.github-dimmed-dark .velo__control:hover {
   border-color: var(--color-btn-default-border-hover);
   box-shadow: none;
 }

diff --git a/gui/velociraptor/src/themes/ncurses.css b/gui/velociraptor/src/themes/ncurses.css
@@ -42,7 +42,7 @@
   --color-sidebar-inactive-foreground-hover: var(--color-foreground);
   --color-sidebar-inactive-background-hover: var(--color-accent-75);
   --color-sidebar-foreground: var(--color-foreground-inverse);
-  --color-sidebar-disabled-foreground: var(--color-sidebar-background);
+  --color-sidebar-disabled-foreground: lightgrey;
   --color-sidebar-background: darkgrey;
   --color-sidebar-active-foreground: var(--color-foreground-inverse);
   --color-sidebar-active-background: var(--color-foreground);

diff --git a/gui/velociraptor/src/themes/pink-light.css b/gui/velociraptor/src/themes/pink-light.css
@@ -47,7 +47,7 @@
   --color-sidebar-inactive-foreground-hover: #f06292;
   --color-sidebar-inactive-background-hover: #fce4ec;
   --color-sidebar-foreground: #f48fb1;
-  --color-sidebar-disabled-foreground: var(--color-sidebar-background);
+  --color-sidebar-disabled-foreground: var(--color-tab-active);
   --color-sidebar-background: #fef4f8;
   --color-sidebar-active-foreground: white;
   --color-sidebar-active-background: var(--color-sidebar-foreground);

diff --git a/gui/velociraptor/src/themes/veloci-dark.css b/gui/velociraptor/src/themes/veloci-dark.css
@@ -48,7 +48,7 @@
   --color-sidebar-inactive-foreground-hover: var(--color-foreground);
   --color-sidebar-inactive-background-hover: var(--color-btn-border);
   --color-sidebar-foreground: #bfbfbf;
-  --color-sidebar-disabled-foreground: var(--color-sidebar-background);
+  --color-sidebar-disabled-foreground: #5E5E5E;
   --color-sidebar-background: #121212;
   --color-sidebar-active-foreground: var(--color-foreground);
   --color-sidebar-active-background: var(--color-accent-100);
@@ -210,11 +210,21 @@ body.veloci-dark {
   background: var(--color-sidebar-inactive-background-hover);
 }
 
+.veloci-dark a {
+    color: var(--color-client-link);
+}
+
 .veloci-dark a.active .navigator.nav-pills.nav li {
   color: var(--color-sidebar-active-foreground);
   background: var(--color-sidebar-active-background);
 }
 
+.veloci-dark .navigator.nav-pills.nav .nav-link.disabled {
+  color: var(--color-sidebar-disabled-foreground);
+  background: var(--color-sidebar-background);
+  pointer-events: none;
+}
+
 /* Buttons */
 .veloci-dark .btn,
 .veloci-dark .btn-default {
@@ -262,10 +272,6 @@ body.veloci-dark {
   background: none;
 }
 
-.veloci-dark a {
-    color: var(--color-client-link);
-}
-
 .veloci-dark .btn-outline-info,
 .veloci-dark .btn-link {
   color: var(--color-btn-outline-link);

diff --git a/gui/velociraptor/src/themes/veloci-light.css b/gui/velociraptor/src/themes/veloci-light.css
@@ -48,7 +48,7 @@
   --color-sidebar-inactive-foreground-hover: var(--color-foreground);
   --color-sidebar-inactive-background-hover: var(--color-canvas-background);
   --color-sidebar-foreground: #404040;
-  --color-sidebar-disabled-foreground: var(--color-sidebar-background);
+  --color-sidebar-disabled-foreground: #B0B0B0;
   --color-sidebar-background: #ededed;
   --color-sidebar-active-foreground: var(--color-accent-100);
   --color-sidebar-active-background: var(--color-canvas-background);