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/dialogs/_dialog.scss b/src/ccDarkTheme/components/dialogs/_dialog.scss
new file mode 100644
index 0000000..5ae0bf1
--- /dev/null
+++ b/src/ccDarkTheme/components/dialogs/_dialog.scss
@@ -0,0 +1,52 @@
+material-dialog, material-dialog .dialog-header {
+ background-color: var(--TWPT-primary-background)!important;
+}
+
+ec-movable-dialog[showminimize] material-dialog .dialog-header {
+ background-color: #d2e3fc!important;
+}
+
+material-dialog .title {
+ color: var(--TWPT-primary-text-alt)!important;
+}
+
+ec-movable-dialog[showminimize] material-dialog .dialog-header .title, ec-movable-dialog[showminimize] material-dialog header material-icon {
+ color: var(--TWPT-primary-background)!important;
+}
+
+ec-movable-dialog material-dialog :is(.header-notice, .notice), material-dialog .legal-prompt {
+ background-color: #394457!important;
+}
+
+ec-movable-dialog material-dialog .main :is(.header-notice, .notice) material-icon[icon="info_outline"] {
+ color: var(--TWPT-blue-A100)!important;
+}
+
+material-dialog .section-title,
+ material-dialog .select-label,
+ material-dialog .input-label,
+ material-dialog .btn-no,
+ ec-display-name-editor,
+ .forum-selection-label {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+material-dialog main > .user {
+ border-bottom-color: var(--TWPT-card-border)!important;
+}
+
+ec-movable-dialog[showminimize] material-dialog footer > [footer] > .footer > [footer] > simple-html {
+ color: var(--TWPT-secondary-text)!important;
+ background-color: var(--TWPT-active-background)!important;
+ border-top-color: #25231f!important;
+}
+
+ec-movable-dialog[showminimize] material-dialog footer > [footer] > .footer > [footer] > simple-html a {
+ color: var(--TWPT-link)!important;
+}
+
+material-dialog .footer material-button[raised]:not([disabled]),
+ material-dialog .footer .mdc-button.submit:not(:disabled){
+ background-color: var(--TWPT-blue-A100)!important;
+ color: #1f1f1f!important;
+}