From d8722d7f7a671b1c21585cacb197cf7576f31c72 Mon Sep 17 00:00:00 2001 From: Vladyslav Hroshev Date: Tue, 25 Mar 2025 17:26:23 +0200 Subject: [PATCH] GNOME 48 support. Fixed messages, decreased calendar. Fixed #50 --- README.md | 2 +- colors.json | 18 ++++++++-- theme/gnome-shell/.css/controls.css | 13 +++++++ theme/gnome-shell/.css/datemenu.css | 36 ++++++++++--------- theme/gnome-shell/.css/messages.css | 55 ++++++++++++++++++++--------- 5 files changed, 88 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index de180fd..c268748 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ Icon theme: https://github.com/vinceliuice/Colloid-icon-theme ## 🚧 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+. diff --git a/colors.json b/colors.json index fafc1af..d2f9ecf 100644 --- a/colors.json +++ b/colors.json @@ -600,13 +600,25 @@ "light" : { "s" : 45, "l" : 92, - "a" : 0.8 + "a" : 0.9 }, "dark" : { "s" : 6, - "l" : 12, - "a" : 0.9 + "l" : 14, + "a" : 0.95 + } + }, + "SECTION-OPAQUE_HOVER": { + "light": { + "s": 45, + "l": 89, + "a": 0.95 + }, + "dark": { + "s": 11, + "l": 17, + "a": 0.95 } }, diff --git a/theme/gnome-shell/.css/controls.css b/theme/gnome-shell/.css/controls.css index f6d1357..74cea9f 100644 --- a/theme/gnome-shell/.css/controls.css +++ b/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; diff --git a/theme/gnome-shell/.css/datemenu.css b/theme/gnome-shell/.css/datemenu.css index 38d91f8..e5199f6 100644 --- a/theme/gnome-shell/.css/datemenu.css +++ b/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 { - font-weight: 600; -} +.day-label { font-weight: 600; } /* date label */ -.date-label { - font-weight: 700; -} +.date-label { 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; - padding: 5px; + border-color: transparent; + 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 */ - height: 2.2em !important; - width: 2.2em !important; +.calendar-month-header .pager-button { + height: 2.2em; + 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; } diff --git a/theme/gnome-shell/.css/messages.css b/theme/gnome-shell/.css/messages.css index e6a6d26..a3f7686 100644 --- a/theme/gnome-shell/.css/messages.css +++ b/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:rtl { padding: auto 6px 0 0; } +.message-list-controls:ltr { padding: auto 5px 0 6px; } +.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:rtl, .message-list-sections:rtl { margin-left: 0; } +.message-list:ltr, +.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 { - border-radius: 99px; - padding: 5px; +.message-expand-button, +.message-collapse-button { /* collapse group of messages button */ 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; }