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/popups/_account-selector.scss b/src/ccDarkTheme/components/popups/_account-selector.scss
new file mode 100644
index 0000000..f4da84b
--- /dev/null
+++ b/src/ccDarkTheme/components/popups/_account-selector.scss
@@ -0,0 +1,12 @@
+.popup-wrapper .profile .email {
+ color: var(--TWPT-subtle-button-background)!important;
+}
+
+material-gaia-picker-footer {
+ color: var(--TWPT-subtle-button-background)!important;
+ background-color: var(--TWPT-active-background)!important;
+}
+
+material-gaia-picker-footer material-button {
+ color: var(--TWPT-secondary-text)!important;
+}
diff --git a/src/ccDarkTheme/components/popups/_announcements.scss b/src/ccDarkTheme/components/popups/_announcements.scss
new file mode 100644
index 0000000..03b12d1
--- /dev/null
+++ b/src/ccDarkTheme/components/popups/_announcements.scss
@@ -0,0 +1,30 @@
+ec-announcements-content .header,
+ ec-announcements-content .no-announcements,
+ ec-announcements-content .announcement {
+ border-bottom-color: var(--TWPT-card-border)!important;
+}
+
+ec-announcements-content .header .title, ec-announcements-content .announcement-title {
+ color: var(--TWPT-primary-text-alt)!important;
+}
+
+ec-announcements-content .announcement-date {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+ec-announcements-content .no-announcements-message {
+ color: #c3bfbc!important;
+}
+
+ec-announcements-content .view-all-link,
+ ec-announcements-content .read-more-button {
+ color: var(--TWPT-link)!important;
+}
+
+ec-announcements-content ::-webkit-scrollbar-thumb {
+ background-color: rgba(255, 255, 255, .26)!important;
+}
+
+ec-announcements-content ::-webkit-scrollbar-thumb:hover {
+ background-color: #4285f4!important;
+}
diff --git a/src/ccDarkTheme/components/popups/_index.scss b/src/ccDarkTheme/components/popups/_index.scss
new file mode 100644
index 0000000..a12ea2c
--- /dev/null
+++ b/src/ccDarkTheme/components/popups/_index.scss
@@ -0,0 +1,3 @@
+@forward 'popup';
+@forward 'account-selector';
+@forward 'announcements';
diff --git a/src/ccDarkTheme/components/popups/_popup.scss b/src/ccDarkTheme/components/popups/_popup.scss
new file mode 100644
index 0000000..11f01e7
--- /dev/null
+++ b/src/ccDarkTheme/components/popups/_popup.scss
@@ -0,0 +1,8 @@
+// Generic popup (for notification bell, account selector, etc.)
+.popup-wrapper {
+ background-color: var(--TWPT-drawer-background)!important;
+
+ .header-text {
+ color: var(--TWPT-primary-text)!important;
+ }
+}