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/layout/_header.scss b/src/ccDarkTheme/layout/_header.scss
new file mode 100644
index 0000000..abad975
--- /dev/null
+++ b/src/ccDarkTheme/layout/_header.scss
@@ -0,0 +1,34 @@
+.material-content > header {
+ background-color: var(--TWPT-primary-background)!important;
+}
+
+.material-content > header .app-title-button,
+ .material-content > header .app-title-text {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+.material-content > header :is(material-button,
+ material-button material-icon,
+ .mdc-button.mdc-icon-button,
+ .mdc-button.mdc-icon-button material-icon,
+ notification-bell material-icon) {
+ color: rgba(255, 255, 255, .87)!important;
+}
+
+.search-box {
+ background-color: #313235!important;
+}
+
+.search-box .clear-icon {
+ opacity: 0.8;
+ color: rgba(255, 255, 255, .87)!important;
+}
+
+.material-content > header .bell.mixin {
+ fill: rgba(255, 255, 255, .87)!important;
+}
+
+// Header menus
+.popup material-list-item {
+ color: #d2cecb!important;
+}
diff --git a/src/ccDarkTheme/layout/_index.scss b/src/ccDarkTheme/layout/_index.scss
new file mode 100644
index 0000000..c50e4e1
--- /dev/null
+++ b/src/ccDarkTheme/layout/_index.scss
@@ -0,0 +1,2 @@
+@forward 'header';
+@forward 'main';
diff --git a/src/ccDarkTheme/layout/_main.scss b/src/ccDarkTheme/layout/_main.scss
new file mode 100644
index 0000000..0f50d46
--- /dev/null
+++ b/src/ccDarkTheme/layout/_main.scss
@@ -0,0 +1,27 @@
+.main {
+ color: var(--TWPT-primary-text)!important;
+}
+
+// Border color for the page title bar (most pages use .title-bar although
+// some use .page-header).
+main .title-bar, main .page-header {
+ border-bottom-color: var(--TWPT-subtle-border)!important;
+}
+
+main .title-bar .title, main .page-header h1, main .header h1 {
+ color: var(--TWPT-primary-text)!important;
+}
+
+.card {
+ background-color: var(--TWPT-secondary-background)!important;
+ color: var(--TWPT-primary-text)!important;
+ border-color: var(--TWPT-card-border)!important;
+}
+
+.card .card-title, .card, .card-section-title {
+ color: var(--TWPT-primary-text)!important;
+}
+
+.card .card-section-hint, .card .card-section-checkbox-hint {
+ color: var(--TWPT-secondary-text)!important;
+}