Adapt extension to CC header redesign
The header at the Community Console has been redesigned (many items
which were previously at the drawer have moved to the top bar), so this
broke the dark theme and the enhancedannouncementsdot feature.
This change fixes the issues with those features.
Change-Id: Idbef33a85c3abc210632db8425306b3aedf42d29
diff --git a/src/injections/ccdarktheme.css b/src/injections/ccdarktheme.css
index fb95972..905a6d6 100644
--- a/src/injections/ccdarktheme.css
+++ b/src/injections/ccdarktheme.css
@@ -36,11 +36,13 @@
background-color: var(--TWPT-primary-background)!important;
}
-.material-content > header .app-title-button {
- color: var(--TWPT-link)!important;
+.material-content > header .app-title-button,
+ .material-content > header .app-title-text {
+ color: var(--TWPT-secondary-text)!important;
}
.material-content > header material-button,
+ .material-content > header material-button material-icon,
.material-content > header notification-bell material-icon {
color: rgba(255, 255, 255, .87)!important;
}
@@ -75,7 +77,8 @@
color: var(--TWPT-secondary-text)!important;
}
-material-drawer material-list-item, material-drawer material-list-item .title {
+material-drawer material-list-item,
+ material-drawer material-list-item .title {
color: #d2cecb!important;
}
@@ -83,6 +86,11 @@
filter: brightness(1.5);
}
+/* Header menus */
+.popup material-list-item {
+ color: #d2cecb!important;
+}
+
/* Filters (ec-query-builder) */
material-condition-builder .compound-condition-operator {
color: var(--TWPT-secondary-text)!important;
@@ -590,7 +598,8 @@
material-drawer ec-icon,
.search-results ec-thread-option ec-icon,
- ec-thread-summary material-expansionpanel .title ec-icon {
+ ec-thread-summary material-expansionpanel .title ec-icon,
+ ec-announcements-menu-item ec-icon {
fill: rgba(255, 255, 255, .87)!important;
}
@@ -731,14 +740,27 @@
color: var(--TWPT-primary-text-alt)!important;
}
+ec-announcements-content .announcement-date {
+ color: var(--TWPT-secondary-text)!important;
+}
+
ec-announcements-content .no-announcements-message {
color: #c3bfbc!important;
}
-ec-announcements-content .view-all-link {
+ec-announcements-content .view-all-link,
+ ec-announcements-content .read-more-button {
color: var(--TWPT-link)!important;
}
+ec-announcements-content ::-webkit-scrollbar-thumb {
+ background-color: rgba(255, 255, 255, .26)!important;
+}
+
+ec-announcements-content ::-webkit-scrollbar-thumb:hover {
+ background-color: #4285f4!important;
+}
+
/* Generic popup (for notification bell, account selector, etc.) */
.popup-wrapper .header-text {
color: var(--TWPT-primary-text)!important;
diff --git a/src/injections/enhanced_announcements_dot.css b/src/injections/enhanced_announcements_dot.css
index e2b5e67..5c23251 100644
--- a/src/injections/enhanced_announcements_dot.css
+++ b/src/injections/enhanced_announcements_dot.css
@@ -10,12 +10,32 @@
}
}
-header .left-control .material-drawer-button.has-updates::after {
+@keyframes TWPTAnnouncementDot-v2 {
+ from {
+ background-color: #d93025;
+ top: 4px;
+ }
+
+ to {
+ background-color: #e2b3b0;
+ top: 12px;
+ }
+}
+
+header .left-control .material-drawer-button.has-updates::after,
+ header .right-control material-button.has-updates::after {
height: 10px;
width: 10px;
+}
+
+header .left-control .material-drawer-button.has-updates::after {
animation: .5s infinite alternate ease-in TWPTAnnouncementDot;
}
+header .right-control material-button.has-updates::after {
+ animation: .5s infinite alternate ease-in TWPTAnnouncementDot-v2;
+}
+
header .sash {
display: none;
}