From 360ad7727b35c7c23aa366755ac5129e8f7b82f6 Mon Sep 17 00:00:00 2001 From: vinceliuice Date: Wed, 9 Apr 2025 05:38:34 +0800 Subject: [PATCH] Fixed issues --- install.sh | 6 +- src/sass/gnome-shell/_widgets-48-0.scss | 42 +++ src/sass/gnome-shell/common/_calendar.scss | 4 +- .../gnome-shell/common/_notifications.scss | 1 - .../gnome-shell/widgets-46-0/_calendar.scss | 4 +- .../widgets-46-0/_notifications.scss | 1 - .../widgets-47-0/_message-list.scss | 1 - .../widgets-47-0/_notifications.scss | 5 +- .../widgets-48-0/_message-list.scss | 291 ++++++++++++++++++ .../widgets-48-0/_quick-settings.scss | 281 +++++++++++++++++ src/sass/gtk/apps/_gnome-4.0.scss | 23 +- 11 files changed, 644 insertions(+), 15 deletions(-) create mode 100644 src/sass/gnome-shell/_widgets-48-0.scss create mode 100644 src/sass/gnome-shell/widgets-48-0/_message-list.scss create mode 100644 src/sass/gnome-shell/widgets-48-0/_quick-settings.scss diff --git a/install.sh b/install.sh index 71f704e..938ffdb 100755 --- a/install.sh +++ b/install.sh @@ -31,7 +31,9 @@ icon='default' if [[ "$(command -v gnome-shell)" ]]; then gnome-shell --version SHELL_VERSION="$(gnome-shell --version | cut -d ' ' -f 3 | cut -d . -f -1)" - if [[ "${SHELL_VERSION:-}" -ge "47" ]]; then + if [[ "${SHELL_VERSION:-}" -ge "48" ]]; then + GS_VERSION="48-0" + elif [[ "${SHELL_VERSION:-}" -ge "47" ]]; then GS_VERSION="47-0" elif [[ "${SHELL_VERSION:-}" -ge "46" ]]; then GS_VERSION="46-0" @@ -46,7 +48,7 @@ if [[ "$(command -v gnome-shell)" ]]; then fi else echo "'gnome-shell' not found, using styles for last gnome-shell version available." - GS_VERSION="47-0" + GS_VERSION="48-0" fi usage() { diff --git a/src/sass/gnome-shell/_widgets-48-0.scss b/src/sass/gnome-shell/_widgets-48-0.scss new file mode 100644 index 0000000..9359d46 --- /dev/null +++ b/src/sass/gnome-shell/_widgets-48-0.scss @@ -0,0 +1,42 @@ +@import 'common/a11y'; +@import 'common/base'; +@import 'common/buttons'; +@import 'common/corner-ripple'; +@import 'common/entries'; +@import 'common/hotplug'; +@import 'common/ibus-popup'; +@import 'common/keyboard'; +@import 'common/login-dialog'; +@import 'common/looking-glass'; +@import 'common/misc'; +@import 'common/network-dialog'; +@import 'common/osd'; +@import 'common/overview'; +@import 'common/panel'; +@import 'common/popovers'; +@import 'common/screen-shield'; +@import 'common/scrollbars'; +@import 'common/search-entry'; +@import 'common/switcher-popup'; +@import 'common/tiled-previews'; +@import 'common/workspace-switcher'; +@import 'widgets-46-0/app-grid'; +@import 'widgets-46-0/calendar'; +@import 'widgets-47-0/check-box'; +@import 'widgets-46-0/dash'; +@import 'widgets-47-0/dialogs'; +@import 'widgets-48-0/message-list'; +@import 'widgets-40-0/misc'; +@import 'widgets-47-0/notifications'; +@import 'widgets-40-0/overview'; +@import 'widgets-42-0/osd'; +@import 'widgets-40-0/panel'; +@import 'widgets-42-0/popovers'; +@import 'widgets-48-0/quick-settings'; +@import 'widgets-40-0/search-entry'; +@import 'widgets-46-0/search-results'; +@import 'widgets-42-0/screenshot'; +@import 'widgets-47-0/slider'; +@import 'widgets-47-0/switches'; +@import 'widgets-40-0/window-picker'; +@import 'widgets-40-0/workspace-thumbnails'; diff --git a/src/sass/gnome-shell/common/_calendar.scss b/src/sass/gnome-shell/common/_calendar.scss index a4c8ed2..35b776a 100644 --- a/src/sass/gnome-shell/common/_calendar.scss +++ b/src/sass/gnome-shell/common/_calendar.scss @@ -3,7 +3,7 @@ %popover_bubble { color: $text-secondary; background-color: $fill; - border-radius: $base_radius; + border-radius: $menu_radius; border: none; box-shadow: none; text-shadow: none; @@ -63,7 +63,7 @@ margin: 0 $base_padding * 2; text-shadow: none; color: $text-secondary; - border-radius: $base_radius; + border-radius: $menu_radius; &:hover, &:focus { background-color: overlay($base, hover); diff --git a/src/sass/gnome-shell/common/_notifications.scss b/src/sass/gnome-shell/common/_notifications.scss index f6227a2..66ba06e 100644 --- a/src/sass/gnome-shell/common/_notifications.scss +++ b/src/sass/gnome-shell/common/_notifications.scss @@ -5,7 +5,6 @@ width: 34em; min-height: 64px; margin: $base_padding * 2 6px 8px !important; - border-radius: $base_radius; color: $text-secondary; background-color: $popover; border: none; diff --git a/src/sass/gnome-shell/widgets-46-0/_calendar.scss b/src/sass/gnome-shell/widgets-46-0/_calendar.scss index ccb92bf..a06dd9c 100644 --- a/src/sass/gnome-shell/widgets-46-0/_calendar.scss +++ b/src/sass/gnome-shell/widgets-46-0/_calendar.scss @@ -3,7 +3,7 @@ %popover_bubble { color: $text-secondary; background-color: $fill; - border-radius: $base_radius; + border-radius: $menu_radius; border: none; box-shadow: none; text-shadow: none; @@ -27,7 +27,7 @@ } .datemenu-popover { - border-radius: $base_radius + $base_padding * 2 !important; + border-radius: $menu_radius + $base_padding * 2 !important; } // Calendar menu side column diff --git a/src/sass/gnome-shell/widgets-46-0/_notifications.scss b/src/sass/gnome-shell/widgets-46-0/_notifications.scss index 949df84..4bcab5c 100644 --- a/src/sass/gnome-shell/widgets-46-0/_notifications.scss +++ b/src/sass/gnome-shell/widgets-46-0/_notifications.scss @@ -8,7 +8,6 @@ $notification_banner_width: 34em; min-height: $notification_banner_height; width: $notification_banner_width; margin: 12px 8px 8px; - border-radius: $base_radius; color: $text-secondary; background-color: $popover; text-shadow: none; diff --git a/src/sass/gnome-shell/widgets-47-0/_message-list.scss b/src/sass/gnome-shell/widgets-47-0/_message-list.scss index 8b19a1a..6538c65 100644 --- a/src/sass/gnome-shell/widgets-47-0/_message-list.scss +++ b/src/sass/gnome-shell/widgets-47-0/_message-list.scss @@ -70,7 +70,6 @@ border-radius: $window_radius; .popup-menu & { - border-radius: $base_radius; @extend %popover_bubble; } diff --git a/src/sass/gnome-shell/widgets-47-0/_notifications.scss b/src/sass/gnome-shell/widgets-47-0/_notifications.scss index 820f755..6e64a0b 100644 --- a/src/sass/gnome-shell/widgets-47-0/_notifications.scss +++ b/src/sass/gnome-shell/widgets-47-0/_notifications.scss @@ -8,11 +8,10 @@ $notification_banner_width: 34em; min-height: $notification_banner_height; width: $notification_banner_width; margin: 12px 8px 8px; - border-radius: $base_radius; color: $text-secondary; background-color: $popover; text-shadow: none; - border-radius: $menu_radius; + border-radius: $base_radius + $base_padding + $base_margin; border: none; box-shadow: 0 3px 6px rgba(black, 0.25); @@ -30,7 +29,7 @@ $notification_banner_width: 34em; min-height: $item_size + $base_padding * 2; padding: 0 $base_padding * 3; margin: 0; - background-color: transparent; + background-color: $fill; color: $text-secondary; font-weight: 500; border: none; diff --git a/src/sass/gnome-shell/widgets-48-0/_message-list.scss b/src/sass/gnome-shell/widgets-48-0/_message-list.scss new file mode 100644 index 0000000..87d91cc --- /dev/null +++ b/src/sass/gnome-shell/widgets-48-0/_message-list.scss @@ -0,0 +1,291 @@ +/* Message List */ +// a.k.a. notifications in the menu + +.message-list { + width: if($compact == 'true', 25.5em, 29em); + text-shadow: none; + border: solid $border; + padding: 0; + + // padding and margins to account for scrollbar + &:ltr { margin-left: 0; margin-right: $base_margin * 2; padding-right: $base_padding + $base_margin; border-right-width: 0; } + &:rtl { margin-right: 0; margin-left: $base_margin * 2; padding-left: $base_padding + $base_margin; border-left-width: 0; } + + .message-list-placeholder { + @extend %title_3; + spacing: $base_spacing * 2; + color: $text-secondary-disabled; + + // icon size and color + > StIcon { + icon-size: 96px; // 48px + margin-bottom: $base_margin * 3; + -st-icon-style: symbolic; + } + } +} + +.message-view { + // to account for scrollbar + &:ltr { margin-right: $base_margin * 3; } + &:rtl { margin-left: $base_margin * 3; } + + -st-vfade-offset: 68px; + + .message { + margin-bottom: $base_padding * 2 !important; + } +} + +// do-not-disturb + clear button +.message-list-controls { + margin: ($base_margin * 2) ($base_margin * 4) 0; + // NOTE: remove the padding if notification_bubble could remove margin for drop shadow + padding: $base_padding; + spacing: $base_padding; + @extend %heading; + + .dnd-button { + // We need this because the focus outline isn't inset like for the buttons + // so the dnd button would grow when it gets focus if we didn't change only + // its color when focusing. + border-width: 2px; + border-color: transparent; + border-radius: 32px; + border-style: solid; + + &:focus { + border-color: transparentize($primary, 0.4); + } + } +} + +// message notification group +.message-notification-group { + spacing: $base_padding * 2; + + .message-group-header { + padding: $base_padding; + .message-group-title { + @extend %title_2; + margin: 0 $base_margin; + } + } + + // close button + .message-collapse-button { + @extend .icon-button; + color: $text; + background-color: transparentize($text, 0.8); + padding: 4px !important; + border: 4px transparent solid; + &:hover {background-color: transparentize($text, 0.7);} + &:active {background-color: transparentize($text, 0.8);} + } +} + +$card_bg_color: mix($text, $base, 6%); + +// message bubbles +.message { + padding: $base_padding; + margin: $base_spacing / 2; + border-radius: $window_radius; + + .popup-menu & { + border-radius: $menu_radius; + color: $text-secondary; + background-color: $card_bg_color; + border: none; + box-shadow: none; + text-shadow: none; + + &:hover, &:focus { + color: $text; + background-color: mix($text, $card_bg_color, 6%); + box-shadow: none; + } + + &:active { + color: $text; + background-color: mix($text, $card_bg_color, 12%); + box-shadow: none; + } + } + + &:second-in-stack { + background-color: mix($text, $base, 4%); + box-shadow: none; + } + + &:lower-in-stack { + background-color: mix($text, $base, 2%); + box-shadow: none; + border-color: transparent; // a not ideal workaround for light theme + } + + // message header + .message-header { + padding: 0 $base_padding; + spacing: $base_padding; + color: $text-disabled; + + // remove side padding to accommodate the close button + &:ltr { padding-right: 0; } + &:rtl { padding-left: 0; } + + // header source icon + .message-source-icon { + icon-size: $scalable_icon_size; // 16px + -st-icon-style: symbolic; + } + + // box that contains the source icon, source name and timestamp of the message + .message-header-content { + spacing: $base_padding; + min-height: to_em(24px); + padding-bottom: $base_padding; + + // header source title + .message-source-title { + font-weight: bold; + } + + // Time label + .event-time { + @extend %caption; + // Add bottom padding to align the app name with the time horizontally + padding-bottom: to_em(1px); + color: $text-disabled; + + &:ltr { text-align: right; } + &:rtl { text-align: left; } + } + } + + // buttons in the message header + .message-expand-button, + .message-close-button { + @extend .icon-button; + color: $text; + background-color: $fill; + padding: 4px; + border: none; + + &, &:hover { + color: $text; + } + + &:hover, &:focus { background-color: $divider; } + &:active, &:active:hover { background-color: $primary; color: on($primary); } + &:insensitive { background-color: $fill; } + } + + .message-expand-button { + padding: 4px; + border: none; + + &:ltr { margin-right: $base_padding; } + &:rtl { margin-left: $base_padding; } + } + } + + // container for message contents + .message-box { + padding: $base_padding; + margin: $base_padding; + margin-top: 0; + spacing: $base_padding; + + // icon of the message + .message-icon { + &:ltr { margin-right: $base_padding; } + &:rtl { margin-left: $base_padding; } + + // icon size and color + icon-size: $base_icon_size * 3; // 48px + -st-icon-style: symbolic; + + &.message-themed-icon { + border-radius: $circular_radius; // is circular + icon-size: $base_icon_size; + min-width: $base_icon_size * 3; + min-height: $base_icon_size * 3; + color: $text-disabled; + background-color: $divider; + } + } + + // If the header isn't displayed we need more top margin + &:first-child { + margin-top: $base_padding * 2; + } + + // text of the message + .message-content { + spacing: $base_margin; + + // message title + .message-title { + font-weight: bold; + } + } + } + + // container for message buttons + .message-action-bin { + padding: $base_margin; + spacing: $base_padding; + + // set margin on children + * { + margin: 0 $base_margin; + // remove margins + &:first-child { + &:ltr { margin-left:0;} + &:rtl { margin-right:0;} + } + &:last-child { + &:ltr { margin-right:0;} + &:rtl { margin-left:0;} + } + } + } +} + +// URLs in messages +.url-highlighter { + link-color: $link; +} + +.message-media-control { + margin: 4px $base_padding; + padding: $base_padding * 2; + border-radius: $circular_radius; + border: none; + color: $text-secondary; + + &:hover, &:focus { background-color: $divider; } + &:active { background-color: $track; } + + &:hover, &:focus, &:active { + color: $text; + } + + &:insensitive { + color: $text-disabled; + } + + StIcon { icon-size: $base_icon_size; } +} + +.media-message { + // album-art + .message-icon { + border-radius: $base_radius / 2 !important; + + &.message-themed-icon { + icon-size: $large_icon_size !important; // 32px + } + } +} diff --git a/src/sass/gnome-shell/widgets-48-0/_quick-settings.scss b/src/sass/gnome-shell/widgets-48-0/_quick-settings.scss new file mode 100644 index 0000000..3077c92 --- /dev/null +++ b/src/sass/gnome-shell/widgets-48-0/_quick-settings.scss @@ -0,0 +1,281 @@ +.quick-settings { + padding: $base_padding * 3 !important; + border-radius: 20px + $base_padding * 3 !important; + margin-top: 4px !important; + + .icon-button, .button { + padding: $base_padding * 2; + + > StIcon { + -st-icon-style: symbolic; + icon-size: $scalable_icon_size; + } + } +} + +.quick-settings-grid { + spacing-rows: $base_padding * 2; + spacing-columns: $base_padding * 2; +} + +.quick-toggle, .quick-toggle-has-menu { + border-radius: $circular_radius; + min-width: 12em; + max-width: 12em; + min-height: 40px; + border: none; +} + +.quick-toggle { + background-color: $button !important; + + &:hover { + background-color: overlay($base, hover) !important; + } + + &:active, &:checked { + background-color: $primary !important; + color: on($primary); + background-gradient-direction: horizontal; + background-gradient-start: $primary-left; + background-gradient-end: $primary-right; + + &:hover { + background-color: mix($text, $primary, 6%) !important; + color: on($primary); + } + + &:active { + background-color: mix($text, $primary, 15%) !important; + color: on($primary); + } + } + + & > StBoxLayout { spacing: $base_padding; } + + /* Move padding into the box; this is to allow menu arrows + to extend to the border */ + &.button { padding: 0; } + & > StBoxLayout { padding: 0 $base_padding * 2; } + &:ltr > StBoxLayout { padding-left: $base_padding * 2.5; } + &:rtl > StBoxLayout { padding-right: $base_padding * 2.5; } + + .quick-toggle-title { + @extend %heading; + } + + .quick-toggle-subtitle { + @extend %caption; + font-weight: normal; + } + + .quick-toggle-icon { icon-size: $scalable_icon_size; } +} + +// toggle with a menu button +.quick-toggle-has-menu { + .quick-toggle { + min-width: auto; + max-width: auto; + + &:ltr { border-radius: $circular_radius 0 0 $circular_radius; } + &:ltr > StBoxLayout { padding-right: $base_padding * 1.5; } + &:rtl { border-radius: 0 $circular_radius $circular_radius 0; } + &:rtr > StBoxLayout { padding-left: $base_padding * 1.5; } + + &:ltr:last-child { border-radius: $circular_radius; } + &:rtl:last-child { border-radius: $circular_radius; } + } + + .quick-toggle-menu-button { + background-color: overlay($base, normal) !important; + padding: $scaled_padding $scaled_padding * 1.75; + + &:hover { + background-color: overlay($base, hover) !important; + } + + &:active { + background-color: $primary !important; + color: on($primary); + background-gradient-direction: horizontal; + background-gradient-start: $primary-left; + background-gradient-end: $primary-right; + } + + &:checked { + background-color: $primary-right !important; + color: on($primary-right); + + &:hover { + background-color: mix($text, $primary-right, 6%) !important; + color: on($primary-right); + } + + &:active { + background-color: mix($text, $primary-right, 15%) !important; + color: on($primary-right); + } + } + + &:ltr { + border-radius: 0 $circular_radius $circular_radius 0; + } + + &:rtl { + border-radius: $circular_radius 0 0 $circular_radius; + } + } + + & .quick-toggle-separator { + width: 0; + } +} + +.quick-slider { + padding: 0 $base_padding; + + & > StBoxLayout { spacing: $base_padding; } + + .slider-bin { + &:focus { @include button(focus); } + min-height: 16px; // slider size + padding: $base_padding; + border-radius: $circular_radius; + } + + .quick-toggle-icon { + icon-size: $base_icon_size; + } + + .icon-button { + padding: $base_padding * 1.5; + } +} + +.quick-toggle-menu { + background-color: $popover !important; + color: $text !important; + border-radius: $base_radius + $base_padding * 2 !important; + padding: $base_padding * 2; + margin: $base_padding * 2 $base_padding * 4 0 !important; + + .popup-menu-item { + border-radius: $base_radius !important; + + &:focus, &:hover, &.selected { + color: $text !important; + background-color: rgba($text, 0.1) !important; + } + + &:active { + color: $text !important; + background-color: rgba($text, 0.2) !important; + } + + > StIcon { -st-icon-style: symbolic; } + } + + & .header { + spacing-rows: 0.5 * $base_padding; + spacing-columns: $base_padding * 2; + padding-bottom: 2 * $base_padding; + + & .icon { + icon-size: $base_icon_size * 1.5; // a non-standard symbolic size but ok + border-radius: $circular_radius; + padding: 1.5 * $base_padding; + background-color: on($popover, divider) !important; + + &.active { + background-color: $primary !important; + color: on($primary); + background-gradient-direction: horizontal; + background-gradient-start: $primary-left; + background-gradient-end: $primary-right; + } + } + + & .title { + @extend %title_3; + } + + & .subtitle { + @extend %caption_heading; + } + } +} + +.quick-settings-system-item { + & > StBoxLayout { spacing: 2 * $base_padding; } + + .icon-button { + background-color: $button; + color: $text; + border-radius: $circular_radius; + @extend %button; + + > StIcon { + -st-icon-style: symbolic; + icon-size: $base_icon_size; + } + } + + & .power-item { + min-height: 0; + min-width: 0; + + &:insensitive { + @include button(normal); + background-color: transparent; + } + } +} + +.nm-network-item { + .wireless-secure-icon { icon-size: 0.5 * $base_icon_size; } +} + +.bt-device-item { + .popup-menu-icon { -st-icon-style: symbolic; } +} + +.bt-menu-placeholder.popup-menu-item { + @extend %title_4; + text-align: center; + + padding: 2em 4em; +} + +.device-subtitle { color: $text-disabled; } + +.keyboard-brightness-level { + spacing: $base_padding; + + .button:checked { @include button(active); } +} + +// background apps + +.background-apps-quick-toggle { + min-height: 40px; + background-color: transparent; + + & StIcon { icon-size: $base_icon_size !important; } +} + +.background-app-item { + & .title { @extend %heading; } + & .subtitle { @extend %caption; } + & .popup-menu-icon { + icon-size: $large_icon_size !important; + -st-icon-style: regular !important; + } + + & .icon-button { + @extend .icon-button; + padding: $base_padding; + } + + &.popup-inactive-menu-item { color: $text; } +} diff --git a/src/sass/gtk/apps/_gnome-4.0.scss b/src/sass/gtk/apps/_gnome-4.0.scss index 1005dc8..20f156e 100644 --- a/src/sass/gtk/apps/_gnome-4.0.scss +++ b/src/sass/gtk/apps/_gnome-4.0.scss @@ -58,7 +58,7 @@ box-shadow: inset 0 1px highlight($titlebar); background-color: $titlebar; border-bottom: 1px solid $border; - + &:backdrop { background-color: $titlebar-backdrop; } @@ -67,7 +67,7 @@ toolbarview.undershoot-top scrolledwindow { @include undershoot(top); } - + toolbarview.undershoot-bottom scrolledwindow { @include undershoot(bottom); } @@ -82,12 +82,29 @@ @extend %row_activatable; } } + + .nautilus-list-view { + columnview { padding: 0 $space-size * 2; } + + listview.view { + border-spacing: $space-size; + padding: $space-size * 1.5 0 $space-size * 2.5; + + row.activatable > cell { + padding: $space-size / 2 $space-size; + + > #NautilusViewCell { + padding: 0; + } + } + } + } } .floating-bar { min-height: 32px; padding: 0; - margin: $space-size; + margin: $space-size / 2; border-style: none; border-radius: $corner-radius; background-color: $primary;