Polish the dark theme
The dark theme CSS stylesheet has been modified to polish how it looks.
Change-Id: I4a8a6f4c12831a8ab87fd55e5d0be20216337a85
diff --git a/src/injections/ccdarktheme.css b/src/injections/ccdarktheme.css
index 24359ad..5b37497 100644
--- a/src/injections/ccdarktheme.css
+++ b/src/injections/ccdarktheme.css
@@ -11,6 +11,8 @@
--TWPT-thread-read-background: rgba(255, 255, 255, .08);
--TWPT-drawer-background: #2d2e30;
--TWPT-button-background: #3c3e42;
+ --TWPT-green-A400: #00E676;
+ --TWPT-red-A400: #FF1744;
}
body {
@@ -137,7 +139,9 @@
/* Action bar */
.material-content .action-bar material-button,
ec-bulk-actions material-button,
- ec-back-button material-button {
+ ec-back-button material-button,
+ .sort-options material-button,
+ notification-bell material-icon {
color: rgba(255, 255, 255, .54)!important;
}
@@ -196,15 +200,55 @@
color: var(--TWPT-primary-text)!important;
}
-/* Thread view */
+/* Thread view (including review/live review components) */
ec-question, .heading + .group, ec-message {
background-color: var(--TWPT-secondary-background)!important;
}
-ec-question ec-review-bar {
+ec-thread .no-review-needed {
+ background-color: #155829!important;
+ border-color: var(--TWPT-subtle-border)!important;
+}
+
+/* Review bar shown above the main message or replies */
+ec-review-bar {
background-color: var(--TWPT-active-background)!important;
}
+ec-review-bar material-chip {
+ background-color: var(--TWPT-button-background)!important;
+}
+
+ec-review-bar material-chip:not(.relevant-active):not(.active) {
+ color: var(--TWPT-primary-text)!important;
+ border-color: var(--TWPT-card-border)!important;
+}
+
+ec-review-bar material-chip:not(.relevant-active):not(.active) material-icon {
+ color: var(--TWPT-primary-text)!important;
+ fill: var(--TWPT-primary-text)!important;
+}
+
+ec-review-bar material-chip.relevant-active {
+ color: var(--TWPT-green-A400)!important;
+ border-color: var(--TWPT-green-A400)!important;
+}
+
+ec-review-bar material-chip.relevant-active material-icon {
+ color: var(--TWPT-green-A400)!important;
+ fill: var(--TWPT-green-A400)!important;
+}
+
+ec-review-bar material-chip.active {
+ color: var(--TWPT-red-A400)!important;
+ border-color: var(--TWPT-red-A400)!important;
+}
+
+ec-review-bar material-chip.active material-icon {
+ color: var(--TWPT-red-A400)!important;
+ fill: var(--TWPT-red-A400)!important;
+}
+
ec-message-header .header, ec-question .state, ec-question ec-thread-counts > span, ec-message ec-thread-counts > span {
color: var(--TWPT-secondary-text)!important;
}
@@ -226,7 +270,12 @@
color: var(--TWPT-primary-text-alt)!important;
}
-ec-message-header ec-avatar svg, ec-message-header .role {
+ec-user-link .name-text {
+ color: var(--TWPT-link)!important;
+}
+
+ec-message-header ec-avatar svg, ec-message-header .role,
+ ec-message .footer .role {
filter: brightness(1.5);
}
@@ -301,6 +350,10 @@
color: rgba(255, 255, 255, .38)!important;
}
+ec-thread button.reply.collapsed {
+ color: var(--TWPT-secondary-text)!important;
+}
+
ec-thread .finished-question {
background-color: var(--TWPT-active-background)!important;
border: var(--TWPT-card-border)!important;
@@ -567,6 +620,11 @@
color: #c3bfbc!important;
}
+/* Generic popup (for notification bell, account selector, etc.) */
+.popup-wrapper .header-text {
+ color: var(--TWPT-primary-text)!important;
+}
+
/* Account selector */
.popup-wrapper .profile .email {
color: rgba(255, 255, 255, .54)!important;