From 46c05166c0ccdbab9cc537edc0cb8222da0e01d4 Mon Sep 17 00:00:00 2001
From: vinceliuice <vinceliuice@hotmail.com>
Date: Sat, 2 Jan 2021 18:13:43 +0800
Subject: [PATCH] Fixed gnome-shell issues

---
 src/gnome-shell/gnome-shell-compact.css      | 215 ++++++++--------
 src/gnome-shell/gnome-shell-dark-compact.css | 215 ++++++++--------
 src/gnome-shell/gnome-shell-dark.css         | 215 ++++++++--------
 src/gnome-shell/gnome-shell.css              | 215 ++++++++--------
 src/gnome-shell/sass/_common.scss            | 247 +++++++++++--------
 5 files changed, 614 insertions(+), 493 deletions(-)

diff --git a/src/gnome-shell/gnome-shell-compact.css b/src/gnome-shell/gnome-shell-compact.css
index 4a630cc..b60b1ea 100644
--- a/src/gnome-shell/gnome-shell-compact.css
+++ b/src/gnome-shell/gnome-shell-compact.css
@@ -1605,18 +1605,13 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
 }
 
 .calendar {
-  margin-bottom: 0;
+  padding: 0;
+  margin: 0 8px;
   border: none;
   box-shadow: none;
   background: none;
-  padding: 0;
-}
-
-.calendar,
-.datemenu-today-button,
-.datemenu-displays-box,
-.message-list-sections {
-  margin: 0 8px;
+  text-shadow: none;
+  color: rgba(0, 0, 0, 0.54);
 }
 
 .datemenu-displays-section {
@@ -1631,6 +1626,17 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   spacing: 4px;
   border: 0 solid rgba(0, 0, 0, 0.12);
   padding: 0 8px;
+  color: rgba(0, 0, 0, 0.54);
+}
+
+.datemenu-calendar-column:hover, .datemenu-calendar-column:focus {
+  color: rgba(0, 0, 0, 0.87);
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+.datemenu-calendar-column:active {
+  color: rgba(0, 0, 0, 0.87);
+  background-color: rgba(0, 0, 0, 0.2);
 }
 
 .datemenu-calendar-column:ltr {
@@ -1643,51 +1649,17 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   border-right-width: 0;
 }
 
-.datemenu-today-button,
-.world-clocks-button,
-.weather-button,
-.events-button,
-.message-list-section-title,
-.events-section-title {
-  min-height: 20px;
+.datemenu-today-button {
+  min-height: 48px;
   padding: 4px 8px;
   border-radius: 5px;
   border: none;
   box-shadow: none;
-  background: none;
   text-shadow: none;
+  background: none;
   color: rgba(0, 0, 0, 0.54);
 }
 
-.datemenu-today-button:hover, .datemenu-today-button:focus,
-.world-clocks-button:hover,
-.world-clocks-button:focus,
-.weather-button:hover,
-.weather-button:focus,
-.events-button:hover,
-.events-button:focus,
-.message-list-section-title:hover,
-.message-list-section-title:focus,
-.events-section-title:hover,
-.events-section-title:focus {
-  color: rgba(0, 0, 0, 0.87);
-  background-color: rgba(0, 0, 0, 0.12);
-}
-
-.datemenu-today-button:active,
-.world-clocks-button:active,
-.weather-button:active,
-.events-button:active,
-.message-list-section-title:active,
-.events-section-title:active {
-  color: rgba(0, 0, 0, 0.87);
-  background-color: rgba(0, 0, 0, 0.2);
-}
-
-.datemenu-today-button {
-  min-height: 48px;
-}
-
 .datemenu-today-button .day-label {
   font-size: 15pt;
   font-weight: 500;
@@ -1699,18 +1671,29 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   font-weight: 400;
 }
 
+.datemenu-today-button:hover, .datemenu-today-button:focus {
+  color: rgba(0, 0, 0, 0.87);
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+.datemenu-today-button:active {
+  color: rgba(0, 0, 0, 0.87);
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
 .calendar-month-label {
   height: 20px;
   margin: 2px;
   padding: 6px 16px;
   border-radius: 12px;
-  color: rgba(0, 0, 0, 0.87);
+  color: rgba(0, 0, 0, 0.54);
   font-weight: bold;
   text-align: center;
   text-shadow: none;
 }
 
 .calendar-month-label:focus {
+  color: rgba(0, 0, 0, 0.87);
   background-color: rgba(0, 0, 0, 0.12);
 }
 
@@ -1720,14 +1703,16 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   margin: 2px;
   border-radius: 100px;
   background-color: transparent;
-  color: rgba(0, 0, 0, 0.87);
+  color: rgba(0, 0, 0, 0.54);
 }
 
 .pager-button:hover, .pager-button:focus {
+  color: rgba(0, 0, 0, 0.87);
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 .pager-button:active {
+  color: rgba(0, 0, 0, 0.87);
   background-color: rgba(0, 0, 0, 0.2);
 }
 
@@ -1848,12 +1833,11 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
 }
 
 .calendar-week-number {
-  width: 28px;
-  height: 21px;
-  margin: 2px;
-  padding: 7px 0 0;
+  height: 1.8em;
+  width: 2em;
+  margin: 4px 0;
   border-radius: 100px;
-  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.38);
   font-size: inherit;
   font-weight: bold;
@@ -1861,82 +1845,118 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   text-shadow: none;
 }
 
-/* Events */
-.events-button .events-box {
-  spacing: 6px;
+.world-clocks-button,
+.weather-button,
+.events-button {
+  padding: 4px 8px;
+  border-radius: 5px;
+  border: none;
+  box-shadow: none;
+  text-shadow: none;
+  color: rgba(0, 0, 0, 0.54);
+  background-color: rgba(0, 0, 0, 0.04);
 }
 
-.events-button .events-list {
-  spacing: 12px;
-  text-shadow: none;
+.world-clocks-button:hover, .world-clocks-button:focus,
+.weather-button:hover,
+.weather-button:focus,
+.events-button:hover,
+.events-button:focus {
+  color: rgba(0, 0, 0, 0.87);
+  background-color: rgba(0, 0, 0, 0.12);
 }
 
-.events-button .events-title {
+.world-clocks-button:active,
+.weather-button:active,
+.events-button:active {
+  color: rgba(0, 0, 0, 0.87);
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.world-clocks-header,
+.weather-header,
+.message-list-section-title,
+.events-section-title,
+.events-title {
   color: rgba(0, 0, 0, 0.38);
   font-weight: bold;
   margin-bottom: 4px;
   text-shadow: none;
 }
 
-.events-button .event-time {
-  color: rgba(0, 0, 0, 0.38);
-  font-feature-settings: "tnum";
-}
-
-.message-list-section-list:ltr {
-  padding-left: 0;
-}
-
-.message-list-section-list:rtl {
-  padding-right: 0;
+.weather-grid,
+.world-clocks-grid {
+  spacing-rows: 8px;
+  spacing-columns: 16px;
 }
 
 .world-clocks-header,
 .weather-header,
 .events-section-title {
-  color: rgba(0, 0, 0, 0.54);
+  color: rgba(0, 0, 0, 0.38);
   font-weight: bold;
 }
 
-.world-clocks-grid,
-.weather-grid {
-  spacing-rows: 0.4em;
-  spacing-columns: 0.8em;
+.events-button .events-box {
+  spacing: 6px;
 }
 
-.world-clocks-city {
+.events-button .events-list {
+  spacing: 12px;
+  text-shadow: none;
+}
+
+.events-button .event-time {
+  color: rgba(0, 0, 0, 0.26);
+  font-feature-settings: "tnum";
+}
+
+.world-clocks-button .world-clocks-city {
   color: rgba(0, 0, 0, 0.38);
-  font-weight: bold;
-  font-size: 0.9em;
+  font-weight: normal;
+  font-size: 1em;
 }
 
-.world-clocks-time {
+.world-clocks-button .world-clocks-time {
   color: rgba(0, 0, 0, 0.38);
   font-feature-settings: "tnum";
-  font-size: 1.2em;
+  font-weight: bold;
+  font-size: 1em;
+}
+
+.world-clocks-button .world-clocks-time:ltr {
+  text-align: right;
+}
+
+.world-clocks-button .world-clocks-time:rtl {
+  text-align: left;
 }
 
-.world-clocks-timezone {
+.world-clocks-button .world-clocks-timezone {
   color: rgba(0, 0, 0, 0.38);
   font-feature-settings: "tnum";
-  font-size: 0.9em;
+  font-size: 1em;
 }
 
-.weather-box {
-  spacing: 0.4em;
+.weather-button .weather-box {
+  spacing: 12px;
+}
+
+.weather-button .weather-header-box {
+  spacing: 8px;
 }
 
-.weather-header.location {
+.weather-button .weather-header.location {
   font-weight: normal;
-  color: rgba(0, 0, 0, 0.42);
+  color: rgba(0, 0, 0, 0.38);
 }
 
-.weather-forecast-icon {
-  icon-size: 2.18em;
-  color: rgba(0, 0, 0, 0.52);
+.weather-button .weather-forecast-icon {
+  icon-size: 32px;
+  color: rgba(0, 0, 0, 0.38);
 }
 
-.weather-forecast-time {
+.weather-button .weather-forecast-time {
   color: rgba(0, 0, 0, 0.38);
   font-size: 0.8em;
   font-feature-settings: "tnum";
@@ -1945,13 +1965,12 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   padding-bottom: 0.4em;
 }
 
-.weather-forecast-temp {
+.weather-button .weather-forecast-temp {
   font-weight: bold;
   color: rgba(0, 0, 0, 0.52);
   text-shadow: none;
 }
 
-/* Message list */
 .message-list {
   width: 31.5em;
   padding: 0 12px;
@@ -2314,14 +2333,14 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   width: 304px;
   padding: 0 8px;
   border: none;
-  selection-background-color: #4586D8;
-  selected-color: #FFFFFF;
   caret-color: rgba(0, 0, 0, 0.75);
   color: rgba(0, 0, 0, 0.75);
   background-color: rgba(255, 255, 255, 0.75);
   border-radius: 100px;
   border-color: transparent;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+  selection-background-color: #4586D8;
+  selected-color: #FFFFFF !important;
 }
 
 .search-entry:focus {
@@ -2331,6 +2350,8 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   border: none;
   box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.55);
   padding: 0 8px;
+  selection-background-color: #4586D8;
+  selected-color: #FFFFFF !important;
 }
 
 .search-entry .search-entry-icon {
@@ -3303,7 +3324,7 @@ StWidget.focused .app-well-app-running-dot {
 .login-dialog StEntry,
 .unlock-dialog StEntry {
   selection-background-color: #4586D8;
-  selected-color: rgba(255, 255, 255, 0.85);
+  selected-color: rgba(255, 255, 255, 0.85) !important;
   caret-color: rgba(0, 0, 0, 0.54);
   color: rgba(0, 0, 0, 0.54);
   background-color: #ffffff;
@@ -3774,7 +3795,7 @@ StWidget.focused .app-well-app-running-dot {
 
 .lg-dialog StEntry {
   selection-background-color: #4586D8;
-  selected-color: rgba(255, 255, 255, 0.85);
+  selected-color: rgba(255, 255, 255, 0.85) !important;
 }
 
 .lg-dialog .shell-link {
diff --git a/src/gnome-shell/gnome-shell-dark-compact.css b/src/gnome-shell/gnome-shell-dark-compact.css
index 77d6e14..b68e33d 100644
--- a/src/gnome-shell/gnome-shell-dark-compact.css
+++ b/src/gnome-shell/gnome-shell-dark-compact.css
@@ -1605,18 +1605,13 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
 }
 
 .calendar {
-  margin-bottom: 0;
+  padding: 0;
+  margin: 0 8px;
   border: none;
   box-shadow: none;
   background: none;
-  padding: 0;
-}
-
-.calendar,
-.datemenu-today-button,
-.datemenu-displays-box,
-.message-list-sections {
-  margin: 0 8px;
+  text-shadow: none;
+  color: rgba(255, 255, 255, 0.7);
 }
 
 .datemenu-displays-section {
@@ -1631,6 +1626,17 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   spacing: 4px;
   border: 0 solid rgba(255, 255, 255, 0.12);
   padding: 0 8px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.datemenu-calendar-column:hover, .datemenu-calendar-column:focus {
+  color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255, 255, 255, 0.06);
+}
+
+.datemenu-calendar-column:active {
+  color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
 .datemenu-calendar-column:ltr {
@@ -1643,51 +1649,17 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   border-right-width: 0;
 }
 
-.datemenu-today-button,
-.world-clocks-button,
-.weather-button,
-.events-button,
-.message-list-section-title,
-.events-section-title {
-  min-height: 20px;
+.datemenu-today-button {
+  min-height: 48px;
   padding: 4px 8px;
   border-radius: 5px;
   border: none;
   box-shadow: none;
-  background: none;
   text-shadow: none;
+  background: none;
   color: rgba(255, 255, 255, 0.7);
 }
 
-.datemenu-today-button:hover, .datemenu-today-button:focus,
-.world-clocks-button:hover,
-.world-clocks-button:focus,
-.weather-button:hover,
-.weather-button:focus,
-.events-button:hover,
-.events-button:focus,
-.message-list-section-title:hover,
-.message-list-section-title:focus,
-.events-section-title:hover,
-.events-section-title:focus {
-  color: rgba(255, 255, 255, 0.9);
-  background-color: rgba(255, 255, 255, 0.06);
-}
-
-.datemenu-today-button:active,
-.world-clocks-button:active,
-.weather-button:active,
-.events-button:active,
-.message-list-section-title:active,
-.events-section-title:active {
-  color: rgba(255, 255, 255, 0.9);
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.datemenu-today-button {
-  min-height: 48px;
-}
-
 .datemenu-today-button .day-label {
   font-size: 15pt;
   font-weight: 500;
@@ -1699,18 +1671,29 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   font-weight: 400;
 }
 
+.datemenu-today-button:hover, .datemenu-today-button:focus {
+  color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255, 255, 255, 0.06);
+}
+
+.datemenu-today-button:active {
+  color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
 .calendar-month-label {
   height: 20px;
   margin: 2px;
   padding: 6px 16px;
   border-radius: 12px;
-  color: rgba(255, 255, 255, 0.9);
+  color: rgba(255, 255, 255, 0.7);
   font-weight: bold;
   text-align: center;
   text-shadow: none;
 }
 
 .calendar-month-label:focus {
+  color: rgba(255, 255, 255, 0.9);
   background-color: rgba(255, 255, 255, 0.06);
 }
 
@@ -1720,14 +1703,16 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   margin: 2px;
   border-radius: 100px;
   background-color: transparent;
-  color: rgba(255, 255, 255, 0.9);
+  color: rgba(255, 255, 255, 0.7);
 }
 
 .pager-button:hover, .pager-button:focus {
+  color: rgba(255, 255, 255, 0.9);
   background-color: rgba(255, 255, 255, 0.06);
 }
 
 .pager-button:active {
+  color: rgba(255, 255, 255, 0.9);
   background-color: rgba(255, 255, 255, 0.1);
 }
 
@@ -1848,12 +1833,11 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
 }
 
 .calendar-week-number {
-  width: 28px;
-  height: 21px;
-  margin: 2px;
-  padding: 7px 0 0;
+  height: 1.8em;
+  width: 2em;
+  margin: 4px 0;
   border-radius: 100px;
-  background-color: transparent;
+  background-color: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.5);
   font-size: inherit;
   font-weight: bold;
@@ -1861,82 +1845,118 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   text-shadow: none;
 }
 
-/* Events */
-.events-button .events-box {
-  spacing: 6px;
+.world-clocks-button,
+.weather-button,
+.events-button {
+  padding: 4px 8px;
+  border-radius: 5px;
+  border: none;
+  box-shadow: none;
+  text-shadow: none;
+  color: rgba(255, 255, 255, 0.7);
+  background-color: rgba(255, 255, 255, 0.03);
 }
 
-.events-button .events-list {
-  spacing: 12px;
-  text-shadow: none;
+.world-clocks-button:hover, .world-clocks-button:focus,
+.weather-button:hover,
+.weather-button:focus,
+.events-button:hover,
+.events-button:focus {
+  color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255, 255, 255, 0.06);
 }
 
-.events-button .events-title {
+.world-clocks-button:active,
+.weather-button:active,
+.events-button:active {
+  color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.world-clocks-header,
+.weather-header,
+.message-list-section-title,
+.events-section-title,
+.events-title {
   color: rgba(255, 255, 255, 0.5);
   font-weight: bold;
   margin-bottom: 4px;
   text-shadow: none;
 }
 
-.events-button .event-time {
-  color: rgba(255, 255, 255, 0.5);
-  font-feature-settings: "tnum";
-}
-
-.message-list-section-list:ltr {
-  padding-left: 0;
-}
-
-.message-list-section-list:rtl {
-  padding-right: 0;
+.weather-grid,
+.world-clocks-grid {
+  spacing-rows: 8px;
+  spacing-columns: 16px;
 }
 
 .world-clocks-header,
 .weather-header,
 .events-section-title {
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, 0.5);
   font-weight: bold;
 }
 
-.world-clocks-grid,
-.weather-grid {
-  spacing-rows: 0.4em;
-  spacing-columns: 0.8em;
+.events-button .events-box {
+  spacing: 6px;
 }
 
-.world-clocks-city {
+.events-button .events-list {
+  spacing: 12px;
+  text-shadow: none;
+}
+
+.events-button .event-time {
+  color: rgba(255, 255, 255, 0.3);
+  font-feature-settings: "tnum";
+}
+
+.world-clocks-button .world-clocks-city {
   color: rgba(255, 255, 255, 0.5);
-  font-weight: bold;
-  font-size: 0.9em;
+  font-weight: normal;
+  font-size: 1em;
 }
 
-.world-clocks-time {
+.world-clocks-button .world-clocks-time {
   color: rgba(255, 255, 255, 0.5);
   font-feature-settings: "tnum";
-  font-size: 1.2em;
+  font-weight: bold;
+  font-size: 1em;
+}
+
+.world-clocks-button .world-clocks-time:ltr {
+  text-align: right;
 }
 
-.world-clocks-timezone {
+.world-clocks-button .world-clocks-time:rtl {
+  text-align: left;
+}
+
+.world-clocks-button .world-clocks-timezone {
   color: rgba(255, 255, 255, 0.5);
   font-feature-settings: "tnum";
-  font-size: 0.9em;
+  font-size: 1em;
 }
 
-.weather-box {
-  spacing: 0.4em;
+.weather-button .weather-box {
+  spacing: 12px;
 }
 
-.weather-header.location {
+.weather-button .weather-header-box {
+  spacing: 8px;
+}
+
+.weather-button .weather-header.location {
   font-weight: normal;
-  color: rgba(255, 255, 255, 0.45);
+  color: rgba(255, 255, 255, 0.5);
 }
 
-.weather-forecast-icon {
-  icon-size: 2.18em;
-  color: rgba(255, 255, 255, 0.55);
+.weather-button .weather-forecast-icon {
+  icon-size: 32px;
+  color: rgba(255, 255, 255, 0.5);
 }
 
-.weather-forecast-time {
+.weather-button .weather-forecast-time {
   color: rgba(255, 255, 255, 0.5);
   font-size: 0.8em;
   font-feature-settings: "tnum";
@@ -1945,13 +1965,12 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   padding-bottom: 0.4em;
 }
 
-.weather-forecast-temp {
+.weather-button .weather-forecast-temp {
   font-weight: bold;
   color: rgba(255, 255, 255, 0.55);
   text-shadow: none;
 }
 
-/* Message list */
 .message-list {
   width: 31.5em;
   padding: 0 12px;
@@ -2314,14 +2333,14 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   width: 304px;
   padding: 0 8px;
   border: none;
-  selection-background-color: #4586D8;
-  selected-color: #FFFFFF;
   caret-color: rgba(0, 0, 0, 0.75);
   color: rgba(0, 0, 0, 0.75);
   background-color: rgba(255, 255, 255, 0.75);
   border-radius: 100px;
   border-color: transparent;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+  selection-background-color: #4586D8;
+  selected-color: #FFFFFF !important;
 }
 
 .search-entry:focus {
@@ -2331,6 +2350,8 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   border: none;
   box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.55);
   padding: 0 8px;
+  selection-background-color: #4586D8;
+  selected-color: #FFFFFF !important;
 }
 
 .search-entry .search-entry-icon {
@@ -3303,7 +3324,7 @@ StWidget.focused .app-well-app-running-dot {
 .login-dialog StEntry,
 .unlock-dialog StEntry {
   selection-background-color: #4586D8;
-  selected-color: rgba(255, 255, 255, 0.85);
+  selected-color: rgba(255, 255, 255, 0.85) !important;
   caret-color: rgba(255, 255, 255, 0.7);
   color: rgba(255, 255, 255, 0.7);
   background-color: rgba(255, 255, 255, 0.15);
@@ -3774,7 +3795,7 @@ StWidget.focused .app-well-app-running-dot {
 
 .lg-dialog StEntry {
   selection-background-color: #4586D8;
-  selected-color: rgba(255, 255, 255, 0.85);
+  selected-color: rgba(255, 255, 255, 0.85) !important;
 }
 
 .lg-dialog .shell-link {
diff --git a/src/gnome-shell/gnome-shell-dark.css b/src/gnome-shell/gnome-shell-dark.css
index 96a110f..1df9d52 100644
--- a/src/gnome-shell/gnome-shell-dark.css
+++ b/src/gnome-shell/gnome-shell-dark.css
@@ -1605,18 +1605,13 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
 }
 
 .calendar {
-  margin-bottom: 0;
+  padding: 0;
+  margin: 0 8px;
   border: none;
   box-shadow: none;
   background: none;
-  padding: 0;
-}
-
-.calendar,
-.datemenu-today-button,
-.datemenu-displays-box,
-.message-list-sections {
-  margin: 0 8px;
+  text-shadow: none;
+  color: rgba(255, 255, 255, 0.7);
 }
 
 .datemenu-displays-section {
@@ -1631,6 +1626,17 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   spacing: 6px;
   border: 0 solid rgba(255, 255, 255, 0.12);
   padding: 0 12px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.datemenu-calendar-column:hover, .datemenu-calendar-column:focus {
+  color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255, 255, 255, 0.06);
+}
+
+.datemenu-calendar-column:active {
+  color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
 .datemenu-calendar-column:ltr {
@@ -1643,51 +1649,17 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   border-right-width: 0;
 }
 
-.datemenu-today-button,
-.world-clocks-button,
-.weather-button,
-.events-button,
-.message-list-section-title,
-.events-section-title {
-  min-height: 24px;
+.datemenu-today-button {
+  min-height: 56px;
   padding: 6px 8px;
   border-radius: 5px;
   border: none;
   box-shadow: none;
-  background: none;
   text-shadow: none;
+  background: none;
   color: rgba(255, 255, 255, 0.7);
 }
 
-.datemenu-today-button:hover, .datemenu-today-button:focus,
-.world-clocks-button:hover,
-.world-clocks-button:focus,
-.weather-button:hover,
-.weather-button:focus,
-.events-button:hover,
-.events-button:focus,
-.message-list-section-title:hover,
-.message-list-section-title:focus,
-.events-section-title:hover,
-.events-section-title:focus {
-  color: rgba(255, 255, 255, 0.9);
-  background-color: rgba(255, 255, 255, 0.06);
-}
-
-.datemenu-today-button:active,
-.world-clocks-button:active,
-.weather-button:active,
-.events-button:active,
-.message-list-section-title:active,
-.events-section-title:active {
-  color: rgba(255, 255, 255, 0.9);
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.datemenu-today-button {
-  min-height: 56px;
-}
-
 .datemenu-today-button .day-label {
   font-size: 15pt;
   font-weight: 500;
@@ -1699,18 +1671,29 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   font-weight: 400;
 }
 
+.datemenu-today-button:hover, .datemenu-today-button:focus {
+  color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255, 255, 255, 0.06);
+}
+
+.datemenu-today-button:active {
+  color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
 .calendar-month-label {
   height: 24px;
   margin: 2px;
   padding: 6px 16px;
   border-radius: 12px;
-  color: rgba(255, 255, 255, 0.9);
+  color: rgba(255, 255, 255, 0.7);
   font-weight: bold;
   text-align: center;
   text-shadow: none;
 }
 
 .calendar-month-label:focus {
+  color: rgba(255, 255, 255, 0.9);
   background-color: rgba(255, 255, 255, 0.06);
 }
 
@@ -1720,14 +1703,16 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   margin: 2px;
   border-radius: 100px;
   background-color: transparent;
-  color: rgba(255, 255, 255, 0.9);
+  color: rgba(255, 255, 255, 0.7);
 }
 
 .pager-button:hover, .pager-button:focus {
+  color: rgba(255, 255, 255, 0.9);
   background-color: rgba(255, 255, 255, 0.06);
 }
 
 .pager-button:active {
+  color: rgba(255, 255, 255, 0.9);
   background-color: rgba(255, 255, 255, 0.1);
 }
 
@@ -1848,12 +1833,11 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
 }
 
 .calendar-week-number {
-  width: 32px;
-  height: 25px;
-  margin: 2px;
-  padding: 7px 0 0;
+  height: 1.8em;
+  width: 2em;
+  margin: 6px 0;
   border-radius: 100px;
-  background-color: transparent;
+  background-color: rgba(255, 255, 255, 0.03);
   color: rgba(255, 255, 255, 0.5);
   font-size: inherit;
   font-weight: bold;
@@ -1861,82 +1845,118 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   text-shadow: none;
 }
 
-/* Events */
-.events-button .events-box {
-  spacing: 6px;
+.world-clocks-button,
+.weather-button,
+.events-button {
+  padding: 6px 8px;
+  border-radius: 5px;
+  border: none;
+  box-shadow: none;
+  text-shadow: none;
+  color: rgba(255, 255, 255, 0.7);
+  background-color: rgba(255, 255, 255, 0.03);
 }
 
-.events-button .events-list {
-  spacing: 12px;
-  text-shadow: none;
+.world-clocks-button:hover, .world-clocks-button:focus,
+.weather-button:hover,
+.weather-button:focus,
+.events-button:hover,
+.events-button:focus {
+  color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255, 255, 255, 0.06);
 }
 
-.events-button .events-title {
+.world-clocks-button:active,
+.weather-button:active,
+.events-button:active {
+  color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.world-clocks-header,
+.weather-header,
+.message-list-section-title,
+.events-section-title,
+.events-title {
   color: rgba(255, 255, 255, 0.5);
   font-weight: bold;
   margin-bottom: 4px;
   text-shadow: none;
 }
 
-.events-button .event-time {
-  color: rgba(255, 255, 255, 0.5);
-  font-feature-settings: "tnum";
-}
-
-.message-list-section-list:ltr {
-  padding-left: 0;
-}
-
-.message-list-section-list:rtl {
-  padding-right: 0;
+.weather-grid,
+.world-clocks-grid {
+  spacing-rows: 8px;
+  spacing-columns: 16px;
 }
 
 .world-clocks-header,
 .weather-header,
 .events-section-title {
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, 0.5);
   font-weight: bold;
 }
 
-.world-clocks-grid,
-.weather-grid {
-  spacing-rows: 0.4em;
-  spacing-columns: 0.8em;
+.events-button .events-box {
+  spacing: 6px;
 }
 
-.world-clocks-city {
+.events-button .events-list {
+  spacing: 12px;
+  text-shadow: none;
+}
+
+.events-button .event-time {
+  color: rgba(255, 255, 255, 0.3);
+  font-feature-settings: "tnum";
+}
+
+.world-clocks-button .world-clocks-city {
   color: rgba(255, 255, 255, 0.5);
-  font-weight: bold;
-  font-size: 0.9em;
+  font-weight: normal;
+  font-size: 1em;
 }
 
-.world-clocks-time {
+.world-clocks-button .world-clocks-time {
   color: rgba(255, 255, 255, 0.5);
   font-feature-settings: "tnum";
-  font-size: 1.2em;
+  font-weight: bold;
+  font-size: 1em;
+}
+
+.world-clocks-button .world-clocks-time:ltr {
+  text-align: right;
 }
 
-.world-clocks-timezone {
+.world-clocks-button .world-clocks-time:rtl {
+  text-align: left;
+}
+
+.world-clocks-button .world-clocks-timezone {
   color: rgba(255, 255, 255, 0.5);
   font-feature-settings: "tnum";
-  font-size: 0.9em;
+  font-size: 1em;
 }
 
-.weather-box {
-  spacing: 0.4em;
+.weather-button .weather-box {
+  spacing: 12px;
 }
 
-.weather-header.location {
+.weather-button .weather-header-box {
+  spacing: 8px;
+}
+
+.weather-button .weather-header.location {
   font-weight: normal;
-  color: rgba(255, 255, 255, 0.45);
+  color: rgba(255, 255, 255, 0.5);
 }
 
-.weather-forecast-icon {
-  icon-size: 2.18em;
-  color: rgba(255, 255, 255, 0.55);
+.weather-button .weather-forecast-icon {
+  icon-size: 32px;
+  color: rgba(255, 255, 255, 0.5);
 }
 
-.weather-forecast-time {
+.weather-button .weather-forecast-time {
   color: rgba(255, 255, 255, 0.5);
   font-size: 0.8em;
   font-feature-settings: "tnum";
@@ -1945,13 +1965,12 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   padding-bottom: 0.4em;
 }
 
-.weather-forecast-temp {
+.weather-button .weather-forecast-temp {
   font-weight: bold;
   color: rgba(255, 255, 255, 0.55);
   text-shadow: none;
 }
 
-/* Message list */
 .message-list {
   width: 31.5em;
   padding: 0 12px;
@@ -2314,14 +2333,14 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   width: 304px;
   padding: 0 8px;
   border: none;
-  selection-background-color: #4586D8;
-  selected-color: #FFFFFF;
   caret-color: rgba(0, 0, 0, 0.75);
   color: rgba(0, 0, 0, 0.75);
   background-color: rgba(255, 255, 255, 0.75);
   border-radius: 100px;
   border-color: transparent;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+  selection-background-color: #4586D8;
+  selected-color: #FFFFFF !important;
 }
 
 .search-entry:focus {
@@ -2331,6 +2350,8 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   border: none;
   box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.55);
   padding: 0 8px;
+  selection-background-color: #4586D8;
+  selected-color: #FFFFFF !important;
 }
 
 .search-entry .search-entry-icon {
@@ -3303,7 +3324,7 @@ StWidget.focused .app-well-app-running-dot {
 .login-dialog StEntry,
 .unlock-dialog StEntry {
   selection-background-color: #4586D8;
-  selected-color: rgba(255, 255, 255, 0.85);
+  selected-color: rgba(255, 255, 255, 0.85) !important;
   caret-color: rgba(255, 255, 255, 0.7);
   color: rgba(255, 255, 255, 0.7);
   background-color: rgba(255, 255, 255, 0.15);
@@ -3774,7 +3795,7 @@ StWidget.focused .app-well-app-running-dot {
 
 .lg-dialog StEntry {
   selection-background-color: #4586D8;
-  selected-color: rgba(255, 255, 255, 0.85);
+  selected-color: rgba(255, 255, 255, 0.85) !important;
 }
 
 .lg-dialog .shell-link {
diff --git a/src/gnome-shell/gnome-shell.css b/src/gnome-shell/gnome-shell.css
index f6e64de..a627fc7 100644
--- a/src/gnome-shell/gnome-shell.css
+++ b/src/gnome-shell/gnome-shell.css
@@ -1605,18 +1605,13 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
 }
 
 .calendar {
-  margin-bottom: 0;
+  padding: 0;
+  margin: 0 8px;
   border: none;
   box-shadow: none;
   background: none;
-  padding: 0;
-}
-
-.calendar,
-.datemenu-today-button,
-.datemenu-displays-box,
-.message-list-sections {
-  margin: 0 8px;
+  text-shadow: none;
+  color: rgba(0, 0, 0, 0.54);
 }
 
 .datemenu-displays-section {
@@ -1631,6 +1626,17 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   spacing: 6px;
   border: 0 solid rgba(0, 0, 0, 0.12);
   padding: 0 12px;
+  color: rgba(0, 0, 0, 0.54);
+}
+
+.datemenu-calendar-column:hover, .datemenu-calendar-column:focus {
+  color: rgba(0, 0, 0, 0.87);
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+.datemenu-calendar-column:active {
+  color: rgba(0, 0, 0, 0.87);
+  background-color: rgba(0, 0, 0, 0.2);
 }
 
 .datemenu-calendar-column:ltr {
@@ -1643,51 +1649,17 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   border-right-width: 0;
 }
 
-.datemenu-today-button,
-.world-clocks-button,
-.weather-button,
-.events-button,
-.message-list-section-title,
-.events-section-title {
-  min-height: 24px;
+.datemenu-today-button {
+  min-height: 56px;
   padding: 6px 8px;
   border-radius: 5px;
   border: none;
   box-shadow: none;
-  background: none;
   text-shadow: none;
+  background: none;
   color: rgba(0, 0, 0, 0.54);
 }
 
-.datemenu-today-button:hover, .datemenu-today-button:focus,
-.world-clocks-button:hover,
-.world-clocks-button:focus,
-.weather-button:hover,
-.weather-button:focus,
-.events-button:hover,
-.events-button:focus,
-.message-list-section-title:hover,
-.message-list-section-title:focus,
-.events-section-title:hover,
-.events-section-title:focus {
-  color: rgba(0, 0, 0, 0.87);
-  background-color: rgba(0, 0, 0, 0.12);
-}
-
-.datemenu-today-button:active,
-.world-clocks-button:active,
-.weather-button:active,
-.events-button:active,
-.message-list-section-title:active,
-.events-section-title:active {
-  color: rgba(0, 0, 0, 0.87);
-  background-color: rgba(0, 0, 0, 0.2);
-}
-
-.datemenu-today-button {
-  min-height: 56px;
-}
-
 .datemenu-today-button .day-label {
   font-size: 15pt;
   font-weight: 500;
@@ -1699,18 +1671,29 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   font-weight: 400;
 }
 
+.datemenu-today-button:hover, .datemenu-today-button:focus {
+  color: rgba(0, 0, 0, 0.87);
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+.datemenu-today-button:active {
+  color: rgba(0, 0, 0, 0.87);
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
 .calendar-month-label {
   height: 24px;
   margin: 2px;
   padding: 6px 16px;
   border-radius: 12px;
-  color: rgba(0, 0, 0, 0.87);
+  color: rgba(0, 0, 0, 0.54);
   font-weight: bold;
   text-align: center;
   text-shadow: none;
 }
 
 .calendar-month-label:focus {
+  color: rgba(0, 0, 0, 0.87);
   background-color: rgba(0, 0, 0, 0.12);
 }
 
@@ -1720,14 +1703,16 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   margin: 2px;
   border-radius: 100px;
   background-color: transparent;
-  color: rgba(0, 0, 0, 0.87);
+  color: rgba(0, 0, 0, 0.54);
 }
 
 .pager-button:hover, .pager-button:focus {
+  color: rgba(0, 0, 0, 0.87);
   background-color: rgba(0, 0, 0, 0.12);
 }
 
 .pager-button:active {
+  color: rgba(0, 0, 0, 0.87);
   background-color: rgba(0, 0, 0, 0.2);
 }
 
@@ -1848,12 +1833,11 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
 }
 
 .calendar-week-number {
-  width: 32px;
-  height: 25px;
-  margin: 2px;
-  padding: 7px 0 0;
+  height: 1.8em;
+  width: 2em;
+  margin: 6px 0;
   border-radius: 100px;
-  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0.04);
   color: rgba(0, 0, 0, 0.38);
   font-size: inherit;
   font-weight: bold;
@@ -1861,82 +1845,118 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   text-shadow: none;
 }
 
-/* Events */
-.events-button .events-box {
-  spacing: 6px;
+.world-clocks-button,
+.weather-button,
+.events-button {
+  padding: 6px 8px;
+  border-radius: 5px;
+  border: none;
+  box-shadow: none;
+  text-shadow: none;
+  color: rgba(0, 0, 0, 0.54);
+  background-color: rgba(0, 0, 0, 0.04);
 }
 
-.events-button .events-list {
-  spacing: 12px;
-  text-shadow: none;
+.world-clocks-button:hover, .world-clocks-button:focus,
+.weather-button:hover,
+.weather-button:focus,
+.events-button:hover,
+.events-button:focus {
+  color: rgba(0, 0, 0, 0.87);
+  background-color: rgba(0, 0, 0, 0.12);
 }
 
-.events-button .events-title {
+.world-clocks-button:active,
+.weather-button:active,
+.events-button:active {
+  color: rgba(0, 0, 0, 0.87);
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.world-clocks-header,
+.weather-header,
+.message-list-section-title,
+.events-section-title,
+.events-title {
   color: rgba(0, 0, 0, 0.38);
   font-weight: bold;
   margin-bottom: 4px;
   text-shadow: none;
 }
 
-.events-button .event-time {
-  color: rgba(0, 0, 0, 0.38);
-  font-feature-settings: "tnum";
-}
-
-.message-list-section-list:ltr {
-  padding-left: 0;
-}
-
-.message-list-section-list:rtl {
-  padding-right: 0;
+.weather-grid,
+.world-clocks-grid {
+  spacing-rows: 8px;
+  spacing-columns: 16px;
 }
 
 .world-clocks-header,
 .weather-header,
 .events-section-title {
-  color: rgba(0, 0, 0, 0.54);
+  color: rgba(0, 0, 0, 0.38);
   font-weight: bold;
 }
 
-.world-clocks-grid,
-.weather-grid {
-  spacing-rows: 0.4em;
-  spacing-columns: 0.8em;
+.events-button .events-box {
+  spacing: 6px;
 }
 
-.world-clocks-city {
+.events-button .events-list {
+  spacing: 12px;
+  text-shadow: none;
+}
+
+.events-button .event-time {
+  color: rgba(0, 0, 0, 0.26);
+  font-feature-settings: "tnum";
+}
+
+.world-clocks-button .world-clocks-city {
   color: rgba(0, 0, 0, 0.38);
-  font-weight: bold;
-  font-size: 0.9em;
+  font-weight: normal;
+  font-size: 1em;
 }
 
-.world-clocks-time {
+.world-clocks-button .world-clocks-time {
   color: rgba(0, 0, 0, 0.38);
   font-feature-settings: "tnum";
-  font-size: 1.2em;
+  font-weight: bold;
+  font-size: 1em;
+}
+
+.world-clocks-button .world-clocks-time:ltr {
+  text-align: right;
+}
+
+.world-clocks-button .world-clocks-time:rtl {
+  text-align: left;
 }
 
-.world-clocks-timezone {
+.world-clocks-button .world-clocks-timezone {
   color: rgba(0, 0, 0, 0.38);
   font-feature-settings: "tnum";
-  font-size: 0.9em;
+  font-size: 1em;
 }
 
-.weather-box {
-  spacing: 0.4em;
+.weather-button .weather-box {
+  spacing: 12px;
+}
+
+.weather-button .weather-header-box {
+  spacing: 8px;
 }
 
-.weather-header.location {
+.weather-button .weather-header.location {
   font-weight: normal;
-  color: rgba(0, 0, 0, 0.42);
+  color: rgba(0, 0, 0, 0.38);
 }
 
-.weather-forecast-icon {
-  icon-size: 2.18em;
-  color: rgba(0, 0, 0, 0.52);
+.weather-button .weather-forecast-icon {
+  icon-size: 32px;
+  color: rgba(0, 0, 0, 0.38);
 }
 
-.weather-forecast-time {
+.weather-button .weather-forecast-time {
   color: rgba(0, 0, 0, 0.38);
   font-size: 0.8em;
   font-feature-settings: "tnum";
@@ -1945,13 +1965,12 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   padding-bottom: 0.4em;
 }
 
-.weather-forecast-temp {
+.weather-button .weather-forecast-temp {
   font-weight: bold;
   color: rgba(0, 0, 0, 0.52);
   text-shadow: none;
 }
 
-/* Message list */
 .message-list {
   width: 31.5em;
   padding: 0 12px;
@@ -2314,14 +2333,14 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   width: 304px;
   padding: 0 8px;
   border: none;
-  selection-background-color: #4586D8;
-  selected-color: #FFFFFF;
   caret-color: rgba(0, 0, 0, 0.75);
   color: rgba(0, 0, 0, 0.75);
   background-color: rgba(255, 255, 255, 0.75);
   border-radius: 100px;
   border-color: transparent;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+  selection-background-color: #4586D8;
+  selected-color: #FFFFFF !important;
 }
 
 .search-entry:focus {
@@ -2331,6 +2350,8 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
   border: none;
   box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.55);
   padding: 0 8px;
+  selection-background-color: #4586D8;
+  selected-color: #FFFFFF !important;
 }
 
 .search-entry .search-entry-icon {
@@ -3303,7 +3324,7 @@ StWidget.focused .app-well-app-running-dot {
 .login-dialog StEntry,
 .unlock-dialog StEntry {
   selection-background-color: #4586D8;
-  selected-color: rgba(255, 255, 255, 0.85);
+  selected-color: rgba(255, 255, 255, 0.85) !important;
   caret-color: rgba(0, 0, 0, 0.54);
   color: rgba(0, 0, 0, 0.54);
   background-color: #ffffff;
@@ -3774,7 +3795,7 @@ StWidget.focused .app-well-app-running-dot {
 
 .lg-dialog StEntry {
   selection-background-color: #4586D8;
-  selected-color: rgba(255, 255, 255, 0.85);
+  selected-color: rgba(255, 255, 255, 0.85) !important;
 }
 
 .lg-dialog .shell-link {
diff --git a/src/gnome-shell/sass/_common.scss b/src/gnome-shell/sass/_common.scss
index 36b2aae..d1b1c62 100644
--- a/src/gnome-shell/sass/_common.scss
+++ b/src/gnome-shell/sass/_common.scss
@@ -1376,18 +1376,13 @@ Gjs_ui_panel_ActivitiesButton.panel-button {
 }
 
 .calendar {
-  margin-bottom: 0;
+  padding: 0;
+  margin: 0 8px;
   border: none;
   box-shadow: none;
   background: none;
-  padding: 0;
-}
-
-.calendar,
-.datemenu-today-button,
-.datemenu-displays-box,
-.message-list-sections {
-  margin: 0 8px;
+  text-shadow: none;
+  color: $secondary_fg_color;
 }
 
 .datemenu-displays-section { padding-bottom: 0; }
@@ -1397,36 +1392,26 @@ Gjs_ui_panel_ActivitiesButton.panel-button {
   spacing: $container_padding;
   border: 0 solid $border_color;
   padding: 0 $container_padding * 2;
+  color: $secondary_fg_color;
+
+  &:hover, &:focus { color: $fg_color; background-color: $divider_color; }
+
+  &:active { color: $fg_color; background-color: $track_color; }
 
   &:ltr { margin-right: $container_padding * 2; border-left-width: 0; }
   &:rtl { margin-left: $container_padding * 2; border-right-width: 0; }
 }
 
-.datemenu-today-button,
-.world-clocks-button,
-.weather-button,
-.events-button,
-.message-list-section-title,
-.events-section-title {
-  min-height: $menuitem_size - 4px * 2;
+.datemenu-today-button {
+  min-height: $menuitem_size * 2 - 4px * 2;
   padding: $container_padding 8px;
   border-radius: $material_radius;
   border: none;
   box-shadow: none;
-  background: none;
   text-shadow: none;
+  background: none;
   color: $secondary_fg_color;
 
-  &:hover,&:focus { color: $fg_color; background-color: $divider_color; }
-  &:active {
-    color: $fg_color;
-    background-color: $track_color;
-  }
-}
-
-.datemenu-today-button {
-  min-height: $menuitem_size * 2 - 4px * 2;
-
   // weekday label
   .day-label {
     @include font(title);
@@ -1437,6 +1422,16 @@ Gjs_ui_panel_ActivitiesButton.panel-button {
   .date-label {
     @include font(headline);
   }
+
+  &:hover, &:focus {
+    color: $fg_color;
+    background-color: $divider_color;
+  }
+
+  &:active {
+    color: $fg_color;
+    background-color: $track_color;
+  }
 }
 
 .calendar-month-label {
@@ -1444,11 +1439,12 @@ Gjs_ui_panel_ActivitiesButton.panel-button {
   margin: 2px;
   padding: 6px 16px;
   border-radius: $bt_radius;
-  color: $fg_color;
+  color: $secondary_fg_color;
   font-weight: bold;
   text-align: center;
   text-shadow: none;
-  &:focus { background-color: $divider_color; }
+
+  &:focus { color: $fg_color; background-color: $divider_color; }
 }
 
 .pager-button {
@@ -1457,9 +1453,11 @@ Gjs_ui_panel_ActivitiesButton.panel-button {
   margin: 2px;
   border-radius: 100px;
   background-color: transparent;
-  color: $fg_color;
-  &:hover, &:focus { background-color: $divider_color; }
-  &:active { background-color: $track_color; }
+  color: $secondary_fg_color;
+
+  &:hover, &:focus { color: $fg_color; background-color: $divider_color; }
+
+  &:active { color: $fg_color; background-color: $track_color; }
 }
 
 .calendar-change-month-back { //arrow back
@@ -1467,6 +1465,7 @@ Gjs_ui_panel_ActivitiesButton.panel-button {
   background-image: url("assets/calendar-arrow-left.svg");
   &:rtl { background-image: url("assets/calendar-arrow-right.svg"); }
 }
+
 .calendar-change-month-forward { //arrow foreward
   padding: 0 2px;
   background-image: url("assets/calendar-arrow-right.svg");
@@ -1485,17 +1484,21 @@ Gjs_ui_panel_ActivitiesButton.panel-button {
   border: none;
   font-feature-settings: "tnum";
   text-shadow: none;
+
   &:hover, &:focus { background-color: $divider_color; }
+
   &:active {
     color: $secondary_fg_color;
     background-color: $track_color;
     border-color: transparent; //avoid jumparound due to today
   }
+
   &:selected {
     color: $fg_color;
     background-color: $track_color;
     border-color: transparent; //avoid jumparound due to today
   }
+
   &.calendar-day-heading {  //day of week heading
     width: $menuitem_size; height: $menuitem_size - 7px;
     margin-top: 2px;
@@ -1558,12 +1561,11 @@ Gjs_ui_panel_ActivitiesButton.panel-button {
 }
 
 .calendar-week-number {
-  width: $menuitem_size;
-  height: $menuitem_size - 7px;
-  margin: 2px;
-  padding: 7px 0 0;
+  height: 1.8em;
+  width: 2em;
+  margin: $container_padding 0;
   border-radius: 100px;
-  background-color: transparent;
+  background-color: if($variant == 'light', rgba(black, 0.04), rgba(white, 0.03));
   color: $hint_fg_color;
   font-size: inherit;
   font-weight: bold;
@@ -1571,99 +1573,132 @@ Gjs_ui_panel_ActivitiesButton.panel-button {
   text-shadow: none;
 }
 
-/* Events */
+// buttons under calendar
+.world-clocks-button,
+.weather-button,
 .events-button {
-  .events-box {
-    spacing: 6px;
-  }
-
-  .events-list {
-    spacing: 12px;
-    text-shadow: none;
-  }
+  padding: $container_padding 8px;
+  border-radius: $material_radius;
+  border: none;
+  box-shadow: none;
+  text-shadow: none;
+  color: $secondary_fg_color;
+  background-color: if($variant == 'light', rgba(black, 0.04), rgba(white, 0.03));
 
-  .events-title {
-    color: $hint_fg_color;
-    font-weight: bold;
-    margin-bottom: 4px;
-    text-shadow: none;
+  &:hover, &:focus {
+    color: $fg_color;
+    background-color: $divider_color;
   }
 
-  .event-time {
-    color: $hint_fg_color;
-    font-feature-settings: "tnum";
+  &:active {
+    color: $fg_color;
+    background-color: $track_color;
   }
 }
 
-.message-list-section-list:ltr {
-  padding-left: 0;
+.world-clocks-header,
+.weather-header,
+.message-list-section-title,
+.events-section-title,
+.events-title {
+  color: $hint_fg_color;
+  font-weight: bold;
+  margin-bottom: 4px;
+  text-shadow: none;
 }
 
-.message-list-section-list:rtl {
-  padding-right: 0;
+.weather-grid,
+.world-clocks-grid {
+  spacing-rows: 8px;
+  spacing-columns: 16px;
 }
 
 .world-clocks-header,
 .weather-header,
 .events-section-title {
-  color: $secondary_fg_color;
+  color: $hint_fg_color;
   font-weight: bold;
 }
 
-.world-clocks-grid,
-.weather-grid {
-  spacing-rows: 0.4em;
-  spacing-columns: 0.8em;
-}
+// Events button
+.events-button {
+  .events-box {
+    spacing: 6px;
+  }
 
-.world-clocks-city {
-  color: $hint_fg_color;
-  font-weight: bold;
-  font-size: 0.9em;
-}
+  .events-list {
+    spacing: 12px;
+    text-shadow: none;
+  }
 
-.world-clocks-time {
-  color: $hint_fg_color;
-  font-feature-settings: "tnum";
-  font-size: 1.2em;
+  .event-time {
+    color: $disabled_secondary_fg_color;
+    font-feature-settings: "tnum";
+  }
 }
 
-.world-clocks-timezone {
-  color: $hint_fg_color;
-  font-feature-settings: "tnum";
-  font-size: 0.9em;
-}
+// World clocks button
+.world-clocks-button {
+  .world-clocks-city {
+    color: $hint_fg_color;
+    font-weight: normal;
+    font-size: 1em;
+  }
 
-.weather-box {
-  spacing: 0.4em;
-}
+  .world-clocks-time {
+    color: $hint_fg_color;
+    font-feature-settings: "tnum";
+    font-weight: bold;
+    font-size: 1em;
 
-.weather-header.location {
-  font-weight: normal;
-  color: transparentize($fg_color, 0.45);
-}
+    &:ltr { text-align: right; }
+    &:rtl { text-align: left; }
+  }
 
-.weather-forecast-icon {
-  icon-size: 2.18em;
-  color: transparentize($fg_color, 0.35);
+  .world-clocks-timezone {
+    color: $hint_fg_color;
+    font-feature-settings: "tnum";
+    font-size: 1em;
+  }
 }
 
-.weather-forecast-time {
-  color: $hint_fg_color;
-  font-size: 0.8em;
-  font-feature-settings: "tnum";
-  font-weight: normal;
-  padding-top: 0.2em;
-  padding-bottom: 0.4em;
-}
+// Weather button
+.weather-button {
+  .weather-box {
+    spacing: 12px;
+  }
 
-.weather-forecast-temp {
-  font-weight: bold;
-  color: transparentize($fg_color, 0.35);
-  text-shadow: none;
+  .weather-header-box {
+    spacing: 8px;
+  }
+
+  .weather-header.location {
+    font-weight: normal;
+    color: $hint_fg_color;
+  }
+
+  .weather-forecast-icon {
+    icon-size: 32px;
+    color: $hint_fg_color;
+  }
+
+  .weather-forecast-time {
+    color: $hint_fg_color;
+    font-size: 0.8em;
+    font-feature-settings: "tnum";
+    font-weight: normal;
+    padding-top: 0.2em;
+    padding-bottom: 0.4em;
+  }
+
+  .weather-forecast-temp {
+    font-weight: bold;
+    color: transparentize($fg_color, 0.35);
+    text-shadow: none;
+  }
 }
 
-/* Message list */
+// Message list
 .message-list {
   width: 31.5em;
   padding: 0 12px;
@@ -1960,13 +1995,15 @@ Gjs_ui_panel_ActivitiesButton.panel-button {
   width: 320px - 8px * 2;
   padding: 0 8px;
   border: none;
-  selection-background-color: $primary_color;
-  selected-color: $light_fg_color;
   @include search_entry(normal);
+  selection-background-color: $primary_color;
+  selected-color: $light_fg_color !important;
 
   &:focus {
     @include search_entry(focus);
     padding: 0 8px;
+    selection-background-color: $primary_color;
+    selected-color: $light_fg_color !important;
   }
 
   .search-entry-icon { icon-size: 16px; padding: 0 0; color: rgba(black, 0.75); }
@@ -2765,7 +2802,7 @@ $keyboard_active_bg_color: if($variant == 'light', darken($keyboard_bg_color, 20
 
   StEntry {
     selection-background-color: $primary_color;
-    selected-color: $inverse_fg_color;
+    selected-color: $inverse_fg_color !important;
     @include entry(normal, $fc:$inverse_track_color);
     &:focus { @include entry(focus, $fc:$inverse_fg_color); }
     &:insensitive {
@@ -3067,7 +3104,7 @@ $keyboard_active_bg_color: if($variant == 'light', darken($keyboard_bg_color, 20
 .lg-dialog {
   StEntry {
     selection-background-color: $primary_color;
-    selected-color: $inverse_fg_color;
+    selected-color: $inverse_fg_color !important;
   }
 
   .shell-link {