From 149d13f7c0182ab53c2594c7dc6b30b7adfbaae7 Mon Sep 17 00:00:00 2001 From: vinceliuice Date: Tue, 11 Apr 2023 22:38:51 +0800 Subject: [PATCH] Fixed gnome-shell 44.0 issues --- install.sh | 6 +- src/sass/gnome-shell/_drawing.scss | 6 + src/sass/gnome-shell/_widgets-42-0.scss | 2 +- src/sass/gnome-shell/_widgets-44-0.scss | 45 +++ src/sass/gnome-shell/common/_dialogs.scss | 2 +- .../gnome-shell/common/_notifications.scss | 4 +- src/sass/gnome-shell/common/_popovers.scss | 4 +- .../_quick-settings.scss | 9 +- .../gnome-shell/widgets-42-0/_screenshot.scss | 10 +- .../gnome-shell/widgets-44-0/_app-grid.scss | 79 ++++++ .../widgets-44-0/_quick-settings.scss | 264 ++++++++++++++++++ 11 files changed, 417 insertions(+), 14 deletions(-) create mode 100644 src/sass/gnome-shell/_widgets-44-0.scss rename src/sass/gnome-shell/{common => widgets-42-0}/_quick-settings.scss (96%) create mode 100644 src/sass/gnome-shell/widgets-44-0/_app-grid.scss create mode 100644 src/sass/gnome-shell/widgets-44-0/_quick-settings.scss diff --git a/install.sh b/install.sh index 0942b349..b2c951fd 100755 --- a/install.sh +++ b/install.sh @@ -30,7 +30,9 @@ SIZE_VARIANTS=('' '-Compact') 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 "42" ]]; then + if [[ "${SHELL_VERSION:-}" -ge "44" ]]; then + GS_VERSION="44-0" + elif [[ "${SHELL_VERSION:-}" -ge "42" ]]; then GS_VERSION="42-0" elif [[ "${SHELL_VERSION:-}" -ge "40" ]]; then GS_VERSION="40-0" @@ -39,7 +41,7 @@ if [[ "$(command -v gnome-shell)" ]]; then fi else echo "'gnome-shell' not found, using styles for last gnome-shell version available." - GS_VERSION="42-0" + GS_VERSION="44-0" fi usage() { diff --git a/src/sass/gnome-shell/_drawing.scss b/src/sass/gnome-shell/_drawing.scss index cc808589..68214aff 100644 --- a/src/sass/gnome-shell/_drawing.scss +++ b/src/sass/gnome-shell/_drawing.scss @@ -92,6 +92,12 @@ box-shadow: none !important; } + @if $t == checked { + color: on($fc); + background-color: $fc; + box-shadow: none !important; + } + @if $t == insensitive { color: rgba($tc, 0.35); background-color: $bc; diff --git a/src/sass/gnome-shell/_widgets-42-0.scss b/src/sass/gnome-shell/_widgets-42-0.scss index 87b0737a..348ab050 100644 --- a/src/sass/gnome-shell/_widgets-42-0.scss +++ b/src/sass/gnome-shell/_widgets-42-0.scss @@ -19,7 +19,6 @@ @import 'common/notifications'; @import 'common/osd'; @import 'common/overview'; -@import 'common/quick-settings'; @import 'common/panel'; @import 'common/popovers'; @import 'common/screen-shield'; @@ -39,6 +38,7 @@ @import 'widgets-42-0/osd'; @import 'widgets-40-0/panel'; @import 'widgets-42-0/popovers'; +@import 'widgets-42-0/quick-settings'; @import 'widgets-40-0/search-entry'; @import 'widgets-42-0/screenshot'; @import 'widgets-40-0/window-picker'; diff --git a/src/sass/gnome-shell/_widgets-44-0.scss b/src/sass/gnome-shell/_widgets-44-0.scss new file mode 100644 index 00000000..9b8eaadf --- /dev/null +++ b/src/sass/gnome-shell/_widgets-44-0.scss @@ -0,0 +1,45 @@ +@import 'common/a11y'; +@import 'common/app-grid'; +@import 'common/base'; +@import 'common/buttons'; +@import 'common/calendar'; +@import 'common/check-box'; +@import 'common/corner-ripple'; +@import 'common/dash'; +@import 'common/dialogs'; +@import 'common/entries'; +@import 'common/hotplug'; +@import 'common/ibus-popup'; +@import 'common/keyboard'; +@import 'common/login-dialog'; +@import 'common/looking-glass'; +@import 'common/message-list'; +@import 'common/misc'; +@import 'common/network-dialog'; +@import 'common/notifications'; +@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/search-results'; +@import 'common/slider'; +@import 'common/switcher-popup'; +@import 'common/switches'; +@import 'common/tiled-previews'; +@import 'common/workspace-switcher'; +@import 'widgets-44-0/app-grid'; +@import 'widgets-40-0/dash'; +@import 'widgets-40-0/misc'; +@import 'widgets-42-0/message-list'; +@import 'widgets-40-0/overview'; +@import 'widgets-42-0/osd'; +@import 'widgets-40-0/panel'; +@import 'widgets-42-0/popovers'; +@import 'widgets-44-0/quick-settings'; +@import 'widgets-40-0/search-entry'; +@import 'widgets-42-0/screenshot'; +@import 'widgets-40-0/window-picker'; +@import 'widgets-40-0/workspace-thumbnails'; diff --git a/src/sass/gnome-shell/common/_dialogs.scss b/src/sass/gnome-shell/common/_dialogs.scss index 7b947c92..921ca6be 100644 --- a/src/sass/gnome-shell/common/_dialogs.scss +++ b/src/sass/gnome-shell/common/_dialogs.scss @@ -2,7 +2,7 @@ %theme_dialogs { background-color: $popover; - border-radius: $modal_radius; + border-radius: $modal_radius + $base_padding / 2; @if $rimless == 'false' { border: 1px solid $window-border; diff --git a/src/sass/gnome-shell/common/_notifications.scss b/src/sass/gnome-shell/common/_notifications.scss index 8fb71874..856c76e6 100644 --- a/src/sass/gnome-shell/common/_notifications.scss +++ b/src/sass/gnome-shell/common/_notifications.scss @@ -4,7 +4,7 @@ .notification-banner { width: 34em; min-height: 64px; - margin: 2px 5px 8px; + margin: 12px 5px 8px; border-radius: $base_radius; color: $text-secondary; background-color: $popover; @@ -17,7 +17,7 @@ color: $text; background-color: $popover; box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25); - margin: 2px 12px 17px; + margin: 12px 12px 17px; } &:focus { diff --git a/src/sass/gnome-shell/common/_popovers.scss b/src/sass/gnome-shell/common/_popovers.scss index 1e110abc..ed13c039 100644 --- a/src/sass/gnome-shell/common/_popovers.scss +++ b/src/sass/gnome-shell/common/_popovers.scss @@ -52,7 +52,7 @@ box-shadow: none; color: $text !important; background-color: $divider !important; - border-radius: $base_radius $base_radius 0 0; + border-radius: $base_radius $base_radius 0 0 !important; &:focus, &:hover, &.selected { color: $text !important; @@ -87,7 +87,7 @@ border: none; box-shadow: none; margin: 0; - border-radius: 0 0 $base_radius $base_radius; + border-radius: 0 0 $base_radius $base_radius !important; .popup-menu-item { margin: 0; diff --git a/src/sass/gnome-shell/common/_quick-settings.scss b/src/sass/gnome-shell/widgets-42-0/_quick-settings.scss similarity index 96% rename from src/sass/gnome-shell/common/_quick-settings.scss rename to src/sass/gnome-shell/widgets-42-0/_quick-settings.scss index 736e1193..1d3be2b4 100644 --- a/src/sass/gnome-shell/common/_quick-settings.scss +++ b/src/sass/gnome-shell/widgets-42-0/_quick-settings.scss @@ -5,6 +5,10 @@ .icon-button, .button { padding: $base_padding * 1.75; + + > StIcon { + icon-size: $base_icon_size; + } } } @@ -163,7 +167,10 @@ border-radius: $base_radius; @extend %button; - > StIcon { -st-icon-style: symbolic; } + > StIcon { + -st-icon-style: symbolic; + icon-size: $base_icon_size; + } } & .power-item { diff --git a/src/sass/gnome-shell/widgets-42-0/_screenshot.scss b/src/sass/gnome-shell/widgets-42-0/_screenshot.scss index 7064ed2c..24f068e9 100644 --- a/src/sass/gnome-shell/widgets-42-0/_screenshot.scss +++ b/src/sass/gnome-shell/widgets-42-0/_screenshot.scss @@ -97,7 +97,7 @@ $screenshot_ui_button_red: $error; background-color: transparent; &:hover, &:focus { background-color: lighten($osd, 10%);} &:active { background-color: $track;} - &:checked { background-color: white; color: black;} + &:checked { background-color: $white; color: $black;} &:insensitive { color: transparentize(on($osd), 0.5);} border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing; @@ -122,13 +122,13 @@ $screenshot_ui_button_red: $error; } .screenshot-ui-area-indicator-selection { - border: 2px white; + border: 2px solid $white; } } .screenshot-ui-area-selector-handle { border-radius: $circular_radius; - background-color: white; + background-color: $primary; box-shadow: 0 1px 3px 2px rgba(0,0,0, .2); width: 24px; height: 24px; @@ -158,7 +158,7 @@ $screenshot_ui_button_red: $error; .screenshot-ui-window-selector-check { transition-duration: 200ms; color: transparent; - border-radius: 99px; + border-radius: $circular_radius; border-width: 12px; icon-size: 24px; } @@ -190,7 +190,7 @@ $screenshot_ui_button_red: $error; &:active { background-color: rgba(0,0,0,.7);} &:checked { background-color: transparent; - border: 2px white; + border: 2px solid $white; } } diff --git a/src/sass/gnome-shell/widgets-44-0/_app-grid.scss b/src/sass/gnome-shell/widgets-44-0/_app-grid.scss new file mode 100644 index 00000000..5a4fbec8 --- /dev/null +++ b/src/sass/gnome-shell/widgets-44-0/_app-grid.scss @@ -0,0 +1,79 @@ + +$app_icon_size: 96px; +$app_icon_spacing: 6px; + +// app icons +.icon-grid { + row-spacing: $app_icon_spacing * 2; + column-spacing: $app_icon_spacing * 2; + max-row-spacing: $app_icon_spacing * 12; + max-column-spacing: $app_icon_spacing * 12; + page-padding-top: $app_icon_spacing * 4; + page-padding-bottom: $app_icon_spacing * 4; + page-padding-left: $app_icon_spacing * 2; + page-padding-right: $app_icon_spacing * 2; +} + +// App Grid pagination indicators +.page-indicator { + padding: $base_padding $base_padding * 2 0; + + .page-indicator-icon { + width: 10px; + height: 10px; + border-radius: 10px; // the same as height&width + background-color: white; + } +} + +.apps-scroll-view { + padding: 0; +} + +.page-navigation-hint { + width: 300px; + + &.dnd { + background: rgba(255, 255, 255, 0.1); + } + + &.next:ltr, + &.previous:rtl { + background-gradient-start: rgba(255, 255, 255, 0.05); + background-gradient-end: transparent; + background-gradient-direction: horizontal; + border-radius: 15px 0px 0px 15px; + } + + &.previous:ltr, + &.next:rtl { + background-gradient-start: transparent; + background-gradient-end: rgba(255, 255, 255, 0.05); + background-gradient-direction: horizontal; + border-radius: 0px 15px 15px 0px; + } +} + +.page-navigation-arrow { + margin: 6px; + padding: 18px; + width: 24px; + height: 24px; + border-radius: $circular-radius; + color: on($osd, secondary); + + &:insensitive { + background-color: on($osd, fill); + color: on($osd, disabled); + } + + &:hover { + background-color: on($osd, divider); + color: on($osd); + } + + &:active { + background-color: on($osd, track); + color: on($osd); + } +} diff --git a/src/sass/gnome-shell/widgets-44-0/_quick-settings.scss b/src/sass/gnome-shell/widgets-44-0/_quick-settings.scss new file mode 100644 index 00000000..8a5e7f36 --- /dev/null +++ b/src/sass/gnome-shell/widgets-44-0/_quick-settings.scss @@ -0,0 +1,264 @@ +.quick-settings { + padding: $base_padding * 3 !important; + border-radius: $base_radius + $base_padding * 3 !important; + margin-top: $base_padding !important; + + .icon-button, .button { + padding: $base_padding * 1.75; + + > StIcon { + icon-size: $base_icon_size; + } + } +} + +.quick-settings-grid { + spacing-rows: $base_padding * 2; + spacing-columns: $base_padding * 2; +} + +.quick-toggle, .quick-menu-toggle { + border-radius: $base_radius; + min-width: 12em; + max-width: 12em; + min-height: 44px; + border: none; +} + +.quick-toggle { + background-color: $button !important; + + &:hover { + background-color: $divider !important; + } + + &:active { + background-color: rgba($text, 0.15) !important; + } + + &:checked { + background-color: $primary !important; + color: on($primary); + + &: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 { font-weight: bold; } + + & StBoxLayout > .quick-toggle-subtitle { + font-weight: normal; + font-size: 12px; + } + + .quick-toggle-icon { icon-size: $base_icon_size; } +} + +.quick-menu-toggle { + & .quick-toggle { + min-width: auto; + max-width: auto; + + &:ltr { border-radius: $base_radius 0 0 $base_radius; } + &:ltr > StBoxLayout { padding-right: $base_padding * 1.5; } + &:rtl { border-radius: 0 $base_radius $base_radius 0; } + &:rtr > StBoxLayout { padding-left: $base_padding * 1.5; } + + &:ltr:last-child { border-radius: $base_radius; } + &:rtl:last-child { border-radius: $base_radius; } + } + + .quick-toggle-arrow { + background-color: $button !important; + padding: $base_padding $base_padding * 1.75; + border: none !important; + + &:hover { + background-color: $divider !important; + } + + &:active { + background-color: rgba($text, 0.15) !important; + } + + &:checked { + background-color: $primary !important; + color: on($primary); + + &:hover { + background-color: mix($text, $primary, 6%) !important; + color: on($primary); + } + + &:active { + background-color: mix($text, $primary, 15%) !important; + color: on($primary); + } + } + + &:ltr { border-radius: 0 $base_radius $base_radius 0; } + &:rtl { border-radius: $base_radius 0 0 $base_radius; } + } +} + +.quick-slider { + & > 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 { + background-color: transparent; + color: $text !important; + padding: $base_padding; + + &:hover { + background-color: $fill; + } + + &:active { + background-color: $divider; + } + } +} + +.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 * 3 0; + + .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: $base_radius; + padding: 1.5 * $base_padding; + background-color: on($popover, divider) !important; + + &.active { + background-color: $primary !important; + color: on($primary); + } + } + + & .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: $base_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; } + +// 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: $base_icon_size * 2 !important; + -st-icon-style: regular !important; + } + & .close-button { + @extend .icon-button; + padding: $base_padding; + } + + &.popup-inactive-menu-item { color: $text; } +}