fix: dark mode (Stopwatch, Category Builder) (#570)

BelKed · Mykola Korniichuk · web-flow · commit 8245c3748f78 · 2024-05-09T18:54:47.000+02:00
* dark mod support for hovering StopwatchEntry

* fix for filter button in dark mode

* fix: dark mode for category builder

* Remove `#root`

---------

Co-authored-by: Mykola Korniichuk &lt;mykola.korniichuk.ua@gmail.vom&gt;
diff --git a/src/components/StopwatchEntry.vue b/src/components/StopwatchEntry.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 div
-  div.row.px-3.py-2#root
+  div.row.px-3.py-2.stopwatch-entry#root
     div.flex-fill
       span #[b {{event.data.label || 'No label'}}]
       span(style="color: #888") &nbsp;|&nbsp;
diff --git a/src/views/settings/CategoryBuilder.vue b/src/views/settings/CategoryBuilder.vue
@@ -43,7 +43,7 @@ div
     div(v-if="words_by_duration.length == 0")
       | No words with significant duration. You're good to go!
     div(v-else)
-      div.row(v-for="word in words_by_duration")
+      div.row.category-builder-word(v-for="word in words_by_duration")
         div.col.hover-highlight
           div.d-flex.flex-row.py-2
             div.flex-grow-1
diff --git a/static/dark.css b/static/dark.css
@@ -8,7 +8,7 @@ a, button, span, div, select {
   outline: none;
 }
 
-body, button, html {
+body, button, html, table {
   color: #e9ebf0 !important;
 }
 
@@ -207,3 +207,17 @@ div[style="background-color: rgb(238, 238, 238);"] {
 div[style="color: rgb(85, 85, 85); font-size: 0.9em;"] {
   color: #e9ebf0 !important;
 }
+
+.stopwatch-entry:hover,
+.category-builder-word:hover>* {
+  background-color: #282c32 !important;
+}
+
+.category-builder-word .table td,
+.category-builder-word .table th {
+  border-color: #3d444d;
+}
+
+.bg-light {
+  background-color: #1a1d24 !important;
+}
