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/_thread-composer.scss b/src/ccDarkTheme/components/_thread-composer.scss
new file mode 100644
index 0000000..b4a8cfa
--- /dev/null
+++ b/src/ccDarkTheme/components/_thread-composer.scss
@@ -0,0 +1,73 @@
+ec-thread-composer .main-content .title-label,
+ ec-thread-composer .main-content .post-label {
+ color: var(--TWPT-primary-text-alt)!important;
+}
+
+ec-thread-composer .main-content .title-input,
+ ec-thread-composer .main-content ec-rich-text-editor {
+ border-color: var(--TWPT-card-border)!important;
+}
+
+ec-thread-composer .main-content .title-alert,
+ ec-thread-composer .main-content .footer-disclaimer-error {
+ color: var(--TWPT-bad-text)!important;
+}
+
+ec-thread-composer .main-content .hero-button-container material-button {
+ border-color: var(--TWPT-input-underline);
+}
+
+ec-thread-composer .main-content .hero-button-container material-button .content {
+ color: var(--TWPT-blue-A100)!important;
+}
+
+ec-thread-composer .main-content .draft-button {
+ background: revert!important;
+ color: var(--TWPT-interop-blue);
+ border-color: var(--TWPT-card-border)!important;
+}
+
+ec-thread-composer .main-content .post-button {
+ background: var(--TWPT-interop-blue)!important;
+ color: #1f1f1f!important;
+}
+
+ec-thread-composer .main-content .post-button[disabled] {
+ background: rgba(227, 227, 227, 0.122)!important;
+}
+
+ec-thread-composer material-drawer {
+ background-color: inherit!important;
+}
+
+ec-thread-composer material-drawer .right-panel {
+ border-left-color: var(--TWPT-card-border)!important;
+}
+
+ec-thread-composer material-drawer .panel-section-title {
+ color: var(--TWPT-primary-text)!important;
+}
+
+ec-thread-composer material-drawer .panel-section-divider {
+ border-color: var(--TWPT-card-border)!important;
+}
+
+ec-thread-composer material-drawer material-radio .radio-label {
+ color: var(--TWPT-primary-text-alt)!important;
+}
+
+ec-thread-composer material-drawer material-radio .radio-description,
+ ec-thread-composer material-drawer .settings-section .panel-section-item .select-label {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+material-dialog.community-video-dialog .footer material-button.cancel {
+ color: var(--TWPT-interop-blue)!important;
+}
+
+material-dialog.community-video-dialog .footer material-button.update:not([disabled]) {
+ background: var(--TWPT-interop-blue)!important;
+ color: #1f1f1f!important;
+}
+
+// Note: see _thread-view.scss. There is a rule for the thread creation footer.