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

src/injections/ccdarktheme.css

@@ -36,11 +36,13 @@ body.ec a {
   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,14 +77,20 @@ material-drawer .drawer-section-title, material-drawer .header > material-icon {
   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;
 }
 
 material-drawer ec-forum-drawer-item material-checkbox material-icon {
   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 @@ ec-filter-drawer-item material-icon,
 
 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 @@ ec-announcements-content .header .title, ec-announcements-content .announcement-
   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;

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;
 }