GNOME 48 support. Fixed messages, decreased calendar. Fixed #50

README.md

@@ -41,7 +41,7 @@ Icon theme: https://github.com/vinceliuice/Colloid-icon-theme
 </details>
 
 ## 🚧 Requirements
-- GNOME 42-47. Correct functionality on other versions is not guaranteed.
+- GNOME 42-48. Correct functionality on other versions is not guaranteed.
 - [User Themes](https://extensions.gnome.org/extension/19/user-themes/ "User Themes") extension.
 - Python 3.2+.
 

colors.json

@@ -600,13 +600,25 @@
             "light" : {
                 "s" : 45,
                 "l" : 92,
-                "a" : 0.8
+                "a" : 0.9
             },
 
             "dark" : {
                 "s" : 6,
-                "l" : 12,
+                "l" : 14,
-                "a" : 0.9
+                "a" : 0.95
+            }
+        },
+        "SECTION-OPAQUE_HOVER": {
+            "light": {
+                "s": 45,
+                "l": 89,
+                "a": 0.95
+            },
+            "dark": {
+                "s": 11,
+                "l": 17,
+                "a": 0.95
             }
         },
 

theme/gnome-shell/.css/controls.css

@@ -144,6 +144,13 @@ StScrollView StScrollBar {
 	min-height: 8px;
 }
 
+.message-list StScrollView StScrollBar,
+.message-view StScrollView StScrollBar {
+	min-width: 3px;
+	min-height: 3px;
+}
+
+
 StScrollBar StBin#trough {
 	border-radius: 0;
 	background-color: transparent;
@@ -157,6 +164,12 @@ StScrollBar StButton#hhandle {
 	transition-duration: 100ms;
 }
 
+.message-list StScrollBar StButton#vhandle,
+.message-view StScrollBar StButton#hhandle {
+	border-radius: 0;
+	border: 0px solid transparent
+}
+
 StScrollBar StButton#vhandle:hover,
 StScrollBar StButton#hhandle:hover {
 	background-color: SCROLLBAR_HOVER;

theme/gnome-shell/.css/datemenu.css

@@ -3,11 +3,10 @@
 /* overall menu */
 #calendarArea {
 	padding: 0;
-	spacing: 9px;
 }
 
 /* set padding here instead of #calendarArea for GNOME older than 46 */
-.datemenu-popover { padding: 9px;  }
+.datemenu-popover { padding: 8px;  }
 
 /* padding property for older gnome versions */
 .datemenu-calendar-column:ltr { margin-left: 0; padding-left: 0; }
@@ -15,7 +14,7 @@
 
 .datemenu-calendar-column, /* Calendar menu side column */
 .datemenu-calendar-column .datemenu-displays-box { /* widgets below calendar */
-	spacing: 9px; 
+	spacing: 8px; 
 }
 
 
@@ -40,14 +39,10 @@
 }
 
 /* weekday label */
-.day-label {
+.day-label { font-weight: 600; }
-	font-weight: 600;
-}
 
 /* date label */
-.date-label {
+.date-label { font-weight: 700; }
-	font-weight: 700;
-}
 
 
 /* Calendar */
@@ -56,11 +51,15 @@
 	border-radius: 14px;
 	background-color: SECTION-COLOR;
 	box-shadow: inset 0 0 0 1px BORDER-SHADOW !important;
-	border: 0;
+	border-color: transparent;
-	padding: 5px;
+	padding: 3px;
 	margin: 0;
 }
 
+.calendar-month-header {
+	padding: 2px;
+}
+
 /* month header */
 .calendar-month-header .calendar-month-label {
 	color: TEXT-PRIMARY-COLOR !important;
@@ -68,9 +67,9 @@
 	background-color: transparent; /* 46+ */
 }
 
-.calendar-month-header .pager-button { /* override because of gdm */
+.calendar-month-header .pager-button {
-	height: 2.2em !important;
+	height: 2.2em;
-	width: 2.2em !important;
+	width: 2.2em;
 }
 
 /* days of week */
@@ -86,11 +85,16 @@
 .calendar-month-header .pager-button {
 	color: TEXT-PRIMARY-COLOR;
 	background-color: transparent; /* 46+ */
-	border-radius: 10px;
+	border-radius: 9px;
 	padding: 0;
 	transition-duration: 100ms;
 }
 
+.calendar-day {
+	width: 2.8em;
+	height: 2.8em;
+}
+
 .calendar-day:hover,
 .calendar-day:selected:hover,
 .calendar .calendar-day-heading:hover, /* 46+ */
@@ -176,7 +180,7 @@
 	color: TEXT-SECONDARY-COLOR;
 	border-radius: 14px;
 	margin: 0;
-	border: 0;
+	border-color: transparent;
 	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
 	transition-duration: 125ms;
 }

theme/gnome-shell/.css/messages.css

@@ -7,8 +7,8 @@
 }
 
 /* dnd and clear button */
-.message-list-controls:ltr { padding: auto 0 0 6px; }
+.message-list-controls:ltr { padding: auto 5px 0 6px; }
-.message-list-controls:rtl { padding: auto 6px 0 0; }
+.message-list-controls:rtl { padding: auto 6px 0 5px; }
 
 /* "No Notifications" text */
 .message-list-placeholder {
@@ -17,8 +17,16 @@
 }
 
 /* remove right margin in message list section (datemenu) (a.k.a scrollbar) */
-.message-list:ltr, .message-list-sections:ltr { margin-right: 0; }
+.message-list:ltr,
-.message-list:rtl, .message-list-sections:rtl { margin-left: 0; }
+.message-list-sections:ltr, /* up to 47 */
+.message-view:ltr { /* 48+ */
+	margin-right: 1px;
+	padding-right: 5px;
+}
+.message-list:rtl, .message-list-sections:rtl, .message-view:rtl { 
+	margin-left: 1px;
+	padding-left: 5px;
+}
 
 
 /* popup messages */
@@ -35,18 +43,15 @@
 	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
 }
 
-/* Box layout for messages. I know looks weird but i can't find a better way to do it */
-.message-list > StBoxLayout > StScrollView > StViewport, /* gap between player and messages box */
-.message-list > StBoxLayout > StScrollView > StViewport > StBoxLayout > StBoxLayout { /* gap between messages */
-	spacing: 9px; 
-}
-
 /* messages in menus */
-.message-list .message, .popup-menu-content .message {
+.message-list .message, 
+.popup-menu-content .message, 
+.message-view .message { /* 48+ */
 	background-color: SECTION-COLOR;
 	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
 	border: 0;
 	margin: 0; /* fix margins for GNOME older than 46 */
+	margin-bottom: 9px !important;
 	border-radius: 13px;
 	transition-duration: 100ms;
 }
@@ -58,6 +63,14 @@
 	box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
 }
 
+.message-view .message {
+	background-color: SECTION-OPAQUE-COLOR;
+}
+
+.message-view .message:hover {
+	background-color: SECTION-OPAQUE_HOVER;
+}
+
 /* text / header in message */
 .message .message-body,
 .message-title {
@@ -84,22 +97,32 @@
 
 /* close button, expand button (46+) */
 .message-close-button,
-.message-expand-button {
+.message-expand-button,
-	border-radius: 99px;
+.message-collapse-button { /* collapse group of messages button */
-	padding: 5px;
 	color: TEXT-PRIMARY-COLOR;
 	background-color: ACCENT-DISABLED-COLOR;
 	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
 	transition-duration: 100ms;
+	border-radius: 99px;
 }
 
+.message-collapse-button {
+	border: 0;
+	padding: 6px !important;
+	margin: 2px;
+}
+
+.message-close-button,.message-expand-button { padding: 5px; }
+
 .message-close-button:hover,
-.message-expand-button:hover {
+.message-expand-button:hover,
+.message-collapse-button:hover {
 	background-color: ACCENT-DISABLED_HOVER;
 }
 
 .message-close-button:active,
-.message-expand-button:active {
+.message-expand-button:active,
+.message-collapse-button:active {
 	color: TEXT-SECONDARY-COLOR;
 }