Restored functionality of dark theme

src/style/dark-mode.css

@@ -1,97 +1,86 @@
-html.dark-mode ::-webkit-scrollbar-track { /* Scrollbar track */
-  background: var(--dark-grey) !important;
+html.dark-mode ::-webkit-scrollbar-track {
+  background-color: var(--dark-grey) !important;
 }
-html.dark-mode select {
-  background: var(--dark-grey);
-  border: 1px solid var(--dark-grey);
+html.dark-mode .sidebar, html.dark-mode #main, html.dark-mode .steps, html.dark-mode .detailFooter {
+  background-color: var(--dark-grey) !important;
 }
-html.dark-mode #sidebar {
-  background: var(--dark-grey) !important;
+html.dark-mode .steps {
+  border: 1px solid var(--dark-grey) !important;
 }
-html.dark-mode .todayToolbar-item.active, html.dark-mode .todayToolbar.active {
-  background: var(--grey) !important;
+html.dark-mode .step .step-body {
+  box-shadow: 0 1px 0 0 var(--grey);
 }
-html.dark-mode .settingsSection-header, html.dark-mode .modal-settings .modal-title, html.dark-mode .editableContent-display, html.dark-mode button.notificationToast-cancelButton, html.dark-mode .notificationToast-text, html.dark-mode .modal .modal-content, html.dark-mode .editableContent-edit, html.dark-mode .datePicker-headerLabel, html.dark-mode .popover-title, html.dark-mode #detail .section-item:hover .section-description, html.dark-mode #detail .section-item:hover .section-title, html.dark-mode .editableContent.multiLine .editableContent-display, html.dark-mode .listItem .listItem-title, html.dark-mode .todayToolbar-title, html.dark-mode .userToolbar-name, html.dark-mode .taskItem-titleWrapper, html.dark-mode .taskCard-label, html.dark-mode .listItem.active .listItem-count, html.dark-mode .listItem:hover .listItem-count, html.dark-mode .addTask .addTask-input, html.dark-mode .popoverMenuItem .popoverMenuItem-label, html.dark-mode .searchToolbar input.searchToolbar-input[type=text], html.dark-mode .popover-header {
-  color: #767678 !important;
-}
-html.dark-mode #main .main-background {
+html.dark-mode .details .details-separator {
   background: var(--dark-grey) !important;
-  border-left: 1px solid var(--dark-grey) !important;
+  border: 1px solid var(--dark-grey) !important;
+}
+html.dark-mode .details .section, html.dark-mode .details .section-item.detailNote, html.dark-mode .detailHeader {
+  border: 1px solid var(--dark-grey) !important;
+  background-color: var(--dark-grey) !important;
 }
-html.dark-mode html[dir=ltr] #main .main-background {
+html.dark-mode .button:hover {
   background: var(--dark-grey) !important;
 }
-html.dark-mode .taskItem {
+html.dark-mode .backgroundLines, html.dark-mode #main .main-background, html.dark-mode .rightColumn {
+  background-color: var(--dark-grey) !important;
   background: var(--dark-grey) !important;
 }
-html.dark-mode .taskItem.selected .taskItem-body {
+html.dark-mode .active, html.dark-mode .details, html.dark-mode .details .section-item:hover {
   background: var(--grey) !important;
-  box-shadow: inset 0 0 0 1px var(--grey) !important;
 }
-html.dark-mode .taskItem:hover .taskItem-body {
+html.dark-mode .detailNote .editableContent .editableContent-edit {
   background-color: var(--grey) !important;
-  box-shadow: inset 0 0 0 1px var(--grey) !important;
+  background: var(--grey) !important;
 }
-html.dark-mode .active {
+html.dark-mode .listItem:hover, html.dark-mode .todayToolbar-item:hover, html.dark-mode .baseAdd.addList:hover, html.dark-mode .baseAdd.addList:active:hover, html.dark-mode .baseAdd.addList:hover:hover, html.dark-mode .hamburgerMenu button:hover, html.dark-mode .step:hover, html.dark-mode .step.selected, html.dark-mode .step.selected:hover, html.dark-mode .searchStep:hover .searchStep-body, html.dark-mode .searchStep.selected .searchStep-body, html.dark-mode .searchStep.selected:hover .searchStep-body, html.dark-mode .modal-close:hover, html.dark-mode .modal-return:hover {
   background-color: var(--grey) !important;
 }
-html.dark-mode .addTask {
-  background: var(--dark-grey) !important;
-}
-html.dark-mode .listItem.active .emoji {
-  background-color: var(--trasparent-white) !important;
+html.dark-mode .hamburgerMenu button:hover {
+  box-shadow: 0 0 0 1px var(--grey) !important;
 }
-html.dark-mode div.backgroundLines, html.dark-mode #detail .detail-inner {
-  background: var(--trasparent-white) !important;
-}
-html.dark-mode .taskCard {
-  background-color: var(--dark-grey) !important;
-}
-html.dark-mode .detailFooter .detailFooter-trash:hover, html.dark-mode .detailFooter .detailFooter-close:hover, html.dark-mode .userToolbar:hover, html.dark-mode .listItem:hover, html.dark-mode .todayToolbar:hover, html.dark-mode .searchToolbar:hover, html.dark-mode .popoverMenuItem:hover, html.dark-mode .todayToolbar-item:hover, html.dark-mode #sidebar.search-is-open .searchToolbar-icon.stop:hover {
-  background-color: var(--grey) !important;
+html.dark-mode .taskItem.selected .taskItem-body, html.dark-mode .taskItem:hover .taskItem-body {
+  background: var(--grey) !important;
+  box-shadow: inset 0 0 0 0px var(--grey) !important;
 }
-html.dark-mode .popover, html.dark-mode .popover-footer, html.dark-mode .popover-footerRight {
-  background-color: var(--dark-grey) !important;
+html.dark-mode #app > div.leftColumn.leftColumn-entered, html.dark-mode #app > div.leftColumn.leftColumn-exited {
+  border-right: 1px solid var(--grey) !important;
 }
-html.dark-mode #sidebar.search-is-open .sidebar-header .searchToolbar {
-  background-color: var(--dark-grey) !important;
+html.dark-mode #app > div.rightColumn.rightColumn-entered > div, html.dark-mode #app > div.rightColumn.rightColumn-exited > div {
+  border-left: 1px solid var(--grey) !important;
 }
-html.dark-mode .avatar {
-  background-color: var(--dark-grey) !important;
+html.dark-mode .sidebar-footer {
+  border-top: 1px solid var(--grey) !important;
 }
-html.dark-mode #detail .section, html.dark-mode .detailHeader, html.dark-mode .detailFooter {
-  background-color: var(--dark-grey) !important;
+html.dark-mode .taskItem-body, html.dark-mode .collapsible-taskCard .taskCard {
+  box-shadow: 0 17px 0 -16px var(--grey) !important;
 }
-html.dark-mode #detail .detail-body {
-  background-color: var(--grey) !important;
+html.dark-mode .baseAdd.addTask, html.dark-mode .searchStep .searchStep-body {
+  box-shadow: 0 -17px 0 -16px var(--grey) !important;
 }
-html.dark-mode .editableContent-textarea {
-  background-color: var(--dark-grey) !important;
+html.dark-mode .backgroundLines {
+  border-top: 1px solid var(--grey);
 }
-html.dark-mode .detailHeader .detailHeader-title:hover, html.dark-mode #detail .section-item:hover, html.dark-mode #detail .section-item.detailNote:hover {
-  background-color: var(--dark-grey) !important;
+html.dark-mode .backgroundLines {
+  border-top: 1px solid var(--grey);
 }
-html.dark-mode #detail .detail-inner {
-  background-color: var(--dark-grey) !important;
+html.dark-mode .detailFooter {
+  border-top: 1px solid var(--grey);
 }
-html.dark-mode .addList:active:hover, html.dark-mode .addList:hover, html.dark-mode .addList:hover:hover {
+html.dark-mode .detailFooter .detailFooter-close:hover, .detailFooter .detailFooter-trash:hover {
   background-color: var(--grey) !important;
 }
-html.dark-mode .datePicker-gridCell.today.active {
-  border-radius: 50% !important;
-}
-html.dark-mode .modal {
-  background-color: var(--dark-grey) !important;
+html.dark-mode .modal, html.dark-mode .popover, html.dark-mode .popoverMenuItem:hover, html.dark-mode .isOpen, html.dark-mode .notificationToast, html.dark-mode .datePicker-header, html.dark-mode .popover-footerRight, html.dark-mode .timePicker-input {
+  background: var(--grey) !important;
 }
-html.dark-mode .notificationToast {
-  background-color: var(--dark-grey) !important;
+html.dark-mode .notificationToast-postponeButton {
+  border-bottom: 1px solid var(--dark-grey) !important;
 }
-html.dark-mode .settingsSection-header {
-  background-color: var(--dark-grey) !important;
+html.dark-mode .notificationToast-buttons button {
+  border-left: 1px solid var(--dark-grey) !important;
 }
-html.dark-mode .callout {
-  background-color: var(--dark-grey) !important;
+html.dark-mode .popover-header, html.dark-mode .popover-footer, html.dark-mode .popover-headerLeft, html.dark-mode .popover-footerRight, html.dark-mode .modal-sharing .modal-header {
+  border-bottom: 1px solid var(--dark-grey) !important;
 }
-html.dark-mode .todayToolbar-count {
-  color: #767678 !important;
+html.dark-mode .modal-sharing .shared .modal-footer {
+  border-top: 1px solid var(--dark-grey) !important;
 }