Dark theme: polish generic components
This change makes some changes to the styles of components used
throughout the entire CC UI, and also some specific components.
Change-Id: Idf35d0f31a2acdb2e53c827c75a74efd7c4eb503
diff --git a/src/injections/ccdarktheme.css b/src/injections/ccdarktheme.css
index e4f3023..475d451 100644
--- a/src/injections/ccdarktheme.css
+++ b/src/injections/ccdarktheme.css
@@ -12,6 +12,7 @@
--TWPT-thread-read-background: var(--TWPT-highlighted-item-background);
--TWPT-drawer-background: #2d2e30;
--TWPT-button-background: #3c3e42;
+ --TWPT-input-underline: rgba(255, 255, 255, .28);
--TWPT-green-A400: #00E676;
--TWPT-red-A400: #FF1744;
--TWPT-blue-A100: #82B1FF;
@@ -78,6 +79,16 @@
filter: brightness(1.5);
}
+/* Filters (ec-query-builder) */
+material-condition-builder .compound-condition-operator {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+material-condition-builder .compound-condition-operator::before,
+ material-condition-builder .compound-condition-operator::after {
+ border-left-color: rgba(255, 255, 255, .20)!important;
+}
+
/* Selector */
/*
@@ -157,7 +168,7 @@
color: var(--TWPT-primary-text)!important;
}
-.card .card-section-hint {
+.card .card-section-hint, .card .card-section-checkbox-hint {
color: var(--TWPT-secondary-text)!important;
}
@@ -365,6 +376,10 @@
background-color: var(--TWPT-button-background)!important;
}
+ec-message .alert {
+ color: var(--TWPT-secondary-text)!important;
+}
+
ec-question .me-too-button.selected,
ec-question .subscribe-button.selected,
ec-message .upvote-button.selected,
@@ -443,17 +458,26 @@
color: var(--TWPT-blue-A100)!important;
}
-/* New thread view */
+/* New thread and edit message views */
+material-stepper {
+ border-top-color: var(--TWPT-card-border)!important;
+}
+
material-stepper .stepper-step-name,
material-stepper .purpose-title {
color: var(--TWPT-primary-text)!important;
}
ec-ask-flow .display-name-label,
- material-stepper .additional-details-label {
+ material-stepper .additional-details-label,
+ material-stepper .detail-label {
color: var(--TWPT-secondary-text)!important;
}
+material-stepper .stepper-step[selectable=true]:focus {
+ background-color: rgba(60, 64, 67, .24)!important;
+}
+
/* Note: see thread view section. There is a rule for the thread creation
* footer.
**/
@@ -545,12 +569,14 @@
.search-results ec-thread-option ec-icon,
ec-rich-text-editor material-icon,
ec-editor-command material-icon,
- ec-canned-responses ec-canned-response-row material-icon {
+ ec-canned-responses ec-canned-response-row material-icon,
+ ec-ask-flow > .header material-button {
color: rgba(255, 255, 255, .87)!important;
}
material-drawer ec-icon,
- .search-results ec-thread-option ec-icon {
+ .search-results ec-thread-option ec-icon,
+ ec-thread-summary material-expansionpanel .title ec-icon {
fill: rgba(255, 255, 255, .87)!important;
}
@@ -575,6 +601,10 @@
background-color: #170f01!important;
}
+ec-movable-dialog[showminimize] material-dialog .main .header-notice material-icon[icon="info_outline"] {
+ color: var(--TWPT-blue-A100)!important;
+}
+
material-dialog .section-title,
material-dialog .select-label,
material-dialog .input-label,
@@ -648,7 +678,7 @@
}
material-input .underline .unfocused-underline {
- background-color: rgba(255, 255, 255, .12)!important;
+ background-color: var(--TWPT-input-underline)!important;
}
label .label {
@@ -658,7 +688,7 @@
/* Input underline */
material-input .underline .unfocused-underline,
material-dropdown-select dropdown-button [buttondecorator] {
- border-bottom-color: rgba(255, 255, 255, .12)!important;
+ border-bottom-color: var(--TWPT-input-underline)!important;
}
/* Checkbox input */
@@ -668,7 +698,7 @@
/* Material menu button and dropdown select */
material-menu material-button, material-dropdown-select dropdown-button {
- color: rgba(255, 255, 255, .54)!important;
+ color: var(--TWPT-primary-text)!important;
}
material-dropdown-select dropdown-button .button.is-disabled .button-text,
@@ -677,6 +707,12 @@
}
/* Announcements content */
+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;
}
@@ -685,6 +721,10 @@
color: #c3bfbc!important;
}
+ec-announcements-content .view-all-link {
+ color: var(--TWPT-link)!important;
+}
+
/* Generic popup (for notification bell, account selector, etc.) */
.popup-wrapper .header-text {
color: var(--TWPT-primary-text)!important;
@@ -748,6 +788,19 @@
color: var(--TWPT-primary-background)!important;
}
+/* Settings view */
+ec-settings .forum-language-container {
+ border-bottom-color: var(--TWPT-subtle-border)!important;
+}
+
+ec-settings .forum-language-container material-button {
+ color: var(--TWPT-secondary-text)!important;
+}
+
+ec-settings material-checkbox, ec-settings material-checkbox .content {
+ color: var(--TWPT-primary-text)!important;
+}
+
/* Custom injected components */
.TWPT-log {
background-color: #424242!important;