refactor(cc-dark-theme): organize styles in several files
Until now we had a single file for the dark theme styles with ~2500
lines, with several sections which were marked with CSS comments.
This CL separates this file into several ones to improve its
maintainability, using the folder structure suggested by
https://sass-guidelin.es/#architecture.
Fixed: twpowertools:21
Change-Id: I0c1741f58b470085c0a499b32aa64feb43d8ad31
diff --git a/src/ccDarkTheme/components/inputs/_selector.scss b/src/ccDarkTheme/components/inputs/_selector.scss
new file mode 100644
index 0000000..e0a62f0
--- /dev/null
+++ b/src/ccDarkTheme/components/inputs/_selector.scss
@@ -0,0 +1,51 @@
+// This applies not only to the selector but also to the ec-work-state-picker.
+material-list, .popup .item-group-list {
+ background-color: var(--TWPT-drawer-background)!important;
+}
+
+material-list [group]:not(.empty) + *:not(script):not(template):not(.empty),
+ .popup .item-group-list [group]:not(.empty) + *:not(script):not(template):not(.empty) {
+ box-shadow: inset 0 8px 0 0 var(--TWPT-drawer-background)!important;
+ border-top-color: #1f1f1f!important;
+}
+
+material-list material-select-item:hover,
+ material-list material-select-item:focus,
+ material-list material-select-dropdown-item:hover,
+ material-list material-select-dropdown-item:focus,
+ material-list material-select-dropdown-item.active,
+ material-list material-select-dropdown-item:not(.multiselect).selected,
+ material-select-searchbox:focus-within + material-list .single-select-item:first-of-type,
+ .popup .item-group-list material-select-item:hover,
+ .popup .item-group-list material-select-item:focus,
+ .popup .item-group-list material-select-item.active,
+ .popup .item-group-list material-select-dropdown-item:hover,
+ .popup .item-group-list material-select-dropdown-item:focus,
+ .popup .item-group-list material-select-dropdown-item.active,
+ .popup .item-group-list material-select-dropdown-item:not(.multiselect).selected {
+ background-color: var(--TWPT-highlighted-item-background)!important;
+}
+
+material-list .single-select-item,
+ material-list .menu-item-label,
+ material-list .label,
+ material-list .text-segment,
+ menu-item-groups .single-select-item,
+ menu-item-groups .menu-item-label,
+ menu-item-groups .label,
+ menu-item-groups .text-segment {
+ color: rgba(255, 255, 255, .87)!important;
+}
+
+.popup .item-group-list material-icon {
+ color: rgba(255, 255, 255, .7)!important;
+}
+
+material-list [group] > [label] {
+ color: #8a8a8a!important;
+}
+
+// This is shown in the new thread view
+ec-forum-language-picker .labeled-select .select-label {
+ color: var(--TWPT-secondary-text)!important;
+}