Fixed #1245, fixed #1237

libs/lib-core.sh

@@ -26,7 +26,9 @@ MY_HOME=$(getent passwd "${MY_USERNAME}" | cut -d: -f6)
 
 if command -v gnome-shell &> /dev/null; then
   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
+    GNOME_VERSION="48-0"
+  elif [[ "${SHELL_VERSION:-}" -ge "47" ]]; then
     GNOME_VERSION="47-0"
   elif [[ "${SHELL_VERSION:-}" -ge "46" ]]; then
     GNOME_VERSION="46-0"
@@ -40,7 +42,7 @@ if command -v gnome-shell &> /dev/null; then
     GNOME_VERSION="3-28"
   fi
 else
-  GNOME_VERSION="47-0"
+  GNOME_VERSION="48-0"
 fi
 
 #----------Program options-------------#

src/sass/gnome-shell/_widgets-48-0.scss

@@ -0,0 +1,45 @@
+@import 'common';
+@import 'common/a11y';
+@import 'common/app-grid';
+@import 'common/base';
+@import 'common/buttons';
+@import 'common/calendar';
+@import 'common/corner-ripple';
+@import 'common/dash';
+@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/search-results';
+@import 'common/switcher-popup';
+@import 'common/tiled-previews';
+@import 'common/workspace-switcher';
+@import 'widgets-46-0/app-grid';
+@import 'widgets-47-0/check-box';
+@import 'widgets-46-0/dash';
+@import 'widgets-47-0/dialogs';
+@import 'widgets-48-0/message-list';
+@import 'widgets-46-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/screen-shield';
+@import 'widgets-42-0/screenshot';
+@import 'widgets-40-0/search-entry';
+@import 'widgets-47-0/slider';
+@import 'widgets-47-0/switches';
+@import 'widgets-40-0/window-picker';
+@import 'widgets-40-0/workspace-thumbnails';

src/sass/gnome-shell/widgets-44-0/_quick-settings.scss

@@ -265,13 +265,18 @@
   & .title { @extend %heading; }
   & .subtitle { @extend %caption; }
   & .popup-menu-icon {
-    icon-size: $base_icon_size * 2 !important;
+    icon-size: $base_icon_size * 1.5 !important;
     -st-icon-style: regular !important;
   }
-  & .close-button {
+
+  & .icon-button {
     @extend .icon-button;
     padding: $base_padding;
   }
 
+  & .spinner {
+    padding: $base_padding;
+  }
+
   &.popup-inactive-menu-item { color: $fg_color; }
 }

src/sass/gnome-shell/widgets-48-0/_message-list.scss

@@ -0,0 +1,300 @@
+/* Message List */
+// a.k.a. notifications in the menu
+
+.message-list {
+  width: 29em;
+  padding: 0 $base_margin;
+  text-shadow: none;
+  border: none;
+
+  // padding and margins to account for scrollbar
+  &:ltr {
+    margin-left: 0;
+    margin-right: 0;
+    padding-right: 0;
+    border-right-width: 0;
+  }
+
+  &:rtl {
+    margin-right: 0;
+    margin-left: 0;
+    padding-left: 0;
+    border-left-width: 0;
+  }
+
+  .message-list-placeholder {
+    @extend %title_2;
+    color: $disabled_fg_color;
+
+    // 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 {
+  // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
+  padding: $base_padding * 2;
+  padding-bottom: $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 {
+      @if $gnome_version == 'old' {
+        border-color: transparentize($selected_bg_color, 0.4);
+      } @else {
+        border-color: st-transparentize($selected_bg_color, 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: $fg_color;
+    background-color: transparentize($fg_color, 0.8);
+    padding: 4px !important;
+    border: 4px transparent solid;
+    &:hover { background-color: transparentize($fg_color, 0.7); }
+    &:active { background-color: transparentize($fg_color, 0.8); }
+  }
+}
+
+$card_bg_color: if($variant == 'light', mix(white, $bg_color, 95%), lighten($base_color, 7%));
+
+%card {
+  border-radius: $base_border_radius;
+  padding: $base_padding;
+  margin: $base_margin;
+  background-color: $card_bg_color;
+  box-shadow: 0 1px 2px 0 rgba(black, 0.02);
+  // bit of a hack here with border since we can't have double box-shadow
+  color: $alt_fg_color;
+
+  &:hover, &:focus {
+    color: $fg_color;
+    background-color: if($variant == 'light', $card_bg_color, lighten($card_bg_color, 5%));
+    box-shadow: 0 1px 3px rgba(black, 0.05) !important;
+  }
+
+  &:active {
+    color: $fg_color;
+    background-color: if($variant == 'light', darken($card_bg_color, 1%), lighten($card_bg_color, 3%));
+    box-shadow: none !important;
+  }
+
+  &:insensitive {
+    color: $alt_disabled_fg_color;
+    background-color: rgba($card_bg_color, 0.5);
+    box-shadow: none !important;
+  }
+}
+
+// message bubbles
+.message {
+  border: 1px solid transparent;
+  border-left: none;
+
+  .popup-menu & {
+    @extend %card;
+  }
+
+  &:second-in-stack {
+    background-color: if($variant == 'light', darken($card_bg_color, 4%), darken($card_bg_color, 1%));
+    box-shadow: 0 1px 3px rgba(black, 0.05);
+  }
+
+  &:lower-in-stack {
+    background-color: if($variant == 'light', darken($card_bg_color, 7%), darken($card_bg_color, 4%));
+    box-shadow: none;
+    border-color: if($variant == 'light', darken($card_bg_color, 10%), transparent); // a not ideal workaround for light theme
+  }
+
+  // message header
+  .message-header {
+    padding: 0 $base_padding;
+    spacing: $base_padding;
+    color: $disabled_fg_color;
+
+    // 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;
+        color: $disabled_fg_color;
+        // Add bottom padding to align the app name with the time horizontally
+        padding-bottom: to_em(1px);
+
+        &:ltr { text-align: right; }
+        &:rtl { text-align: left; }
+      }
+    }
+
+    // buttons in the message header
+    .message-expand-button,
+    .message-close-button {
+      @extend .icon-button;
+      color: $fg_color;
+      background-color: transparentize($fg_color, .9);
+      padding: 4px;
+      border: none;
+      &:hover { background-color: transparentize($fg_color, .81); }
+      &:active,
+      &:active:hover { background-color: transparentize($fg_color, .76); }
+      &:insensitive { background-color: transparentize($fg_color, .93); }
+    }
+
+    .message-expand-button {
+      padding: 4px;
+      &: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
+        background-color: transparentize($fg_color, 0.8);
+        icon-size: $base_icon_size;
+        min-width: $base_icon_size * 3;
+        min-height: $base_icon_size * 3;
+      }
+    }
+
+    // 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_color;
+}
+
+.message-media-control {
+  margin: 7px 4px !important;
+  padding: 8px !important;
+  border-radius: $circular_radius;
+  color: $alt_fg_color;
+  &:hover, &:focus { color: $fg_color; background-color: $divider_color; }
+  &:active { color: $fg_color; background-color: $track_color; }
+  &:insensitive { color: $disabled_fg_color; }
+
+  StIcon { icon-size: $base_icon_size; }
+}
+
+.media-message {
+  // album-art
+  .message-icon {
+    border-radius: $bt_radius !important;
+
+    &.message-themed-icon {
+      icon-size: $large_icon_size !important; // 32px
+    }
+  }
+}

src/sass/gnome-shell/widgets-48-0/_quick-settings.scss

@@ -0,0 +1,288 @@
+.quick-settings {
+  padding: $base_padding * 3 !important;
+  border-radius: 21px + $base_padding * 3 !important;
+  margin-top: $base_padding * 2 !important;
+
+  .icon-button, .button {
+    padding: $base_padding * 1.75;
+
+    StIcon { icon-size: $scalable_icon_size; }
+  }
+}
+
+.quick-settings-grid {
+  spacing-rows: $container_padding * 2;
+  spacing-columns: $container_padding * 2;
+}
+
+.quick-toggle, .quick-toggle-has-menu {
+  border-radius: $circular_radius;
+  min-width: 12em;
+  max-width: 12em;
+  min-height: $scalable_icon_size * 3;
+  border: none;
+}
+
+.quick-toggle {
+  background-color: $fill_color !important;
+
+  &:hover {
+    background-color: $divider_color !important;
+  }
+
+  &:active {
+    background-color: $visit_color !important;
+  }
+
+  &:checked {
+    background-color: $primary_color !important;
+    color: $light_fg_color;
+
+    &:hover {
+      color: $light_fg_color;
+      @if $gnome_version == 'old' {
+        background-color: mix($text_color, $primary_color, 6%) !important;
+      } @else {
+        background-color: st-mix($text_color, $primary_color, 6%) !important;
+      }
+    }
+
+    &:active {
+      color: $light_fg_color;
+      @if $gnome_version == 'old' {
+        background-color: mix($text_color, $primary_color, 15%) !important;
+      } @else {
+        background-color: st-mix($text_color, $primary_color, 15%) !important;
+      }
+    }
+  }
+
+  & > StBoxLayout { spacing: $base_padding * 1.5; }
+
+  /* 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 * 4; }
+  &:rtl > StBoxLayout { padding-right: $base_padding * 4; }
+
+  .quick-toggle-title {
+    @extend %heading;
+  }
+
+  .quick-toggle-subtitle {
+    @extend %caption;
+    font-weight: normal;
+  }
+
+  .quick-toggle-icon { icon-size: $scalable_icon_size; }
+}
+
+.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 * 2; }
+    &:rtl { border-radius: 0 $circular_radius $circular_radius 0; }
+    &:rtr > StBoxLayout { padding-left: $base_padding * 2; }
+
+    &:ltr:last-child { border-radius: $circular_radius; }
+    &:rtl:last-child { border-radius: $circular_radius; }
+  }
+
+  & .quick-toggle-menu-button {
+    padding: $scaled_padding $scaled_padding * 2;
+    border: none;
+    background-color: $fill_color !important;
+
+    &:hover {
+      background-color: $divider_color !important;
+    }
+  
+    &:active {
+      background-color: $visit_color !important;
+    }
+  
+    &:checked {
+      background-color: $primary_color !important;
+      color: $light_fg_color;
+  
+      &:hover {
+        color: $light_fg_color;
+        @if $gnome_version == 'old' {
+          background-color: mix($text_color, $primary_color, 6%) !important;
+        } @else {
+          background-color: st-mix($text_color, $primary_color, 6%) !important;
+        }
+      }
+  
+      &:active {
+        color: $light_fg_color;
+        @if $gnome_version == 'old' {
+          background-color: mix($text_color, $primary_color, 15%) !important;
+        } @else {
+          background-color: st-mix($text_color, $primary_color, 15%) !important;
+        }
+      }
+    }
+
+    &:ltr {
+      border-radius: 0 $circular_radius $circular_radius 0;
+      border-left-width: 0;
+    }
+
+    &:rtl {
+      border-radius: $circular_radius 0 0 $circular_radius;
+      border-right-width: 0;
+    }
+  }
+
+  & .quick-toggle-separator {
+    width: 0;
+  }
+}
+
+.quick-slider {
+  & > StBoxLayout { spacing: $base_padding; }
+
+  .icon-button { padding: $scaled_padding * 1.5; }
+
+  .slider-bin {
+    &:focus { @include button(focus); }
+    min-height: 16px; // slider size
+    padding: $base_padding;
+    border-radius: $circular_radius;
+  }
+}
+
+.quick-toggle-menu {
+  background-color: $menu_bg !important;
+  color: $text_color !important;
+  border-radius: $base_border_radius * 3;
+  padding: $base_padding * 3;
+  margin: $base_padding * 2 $base_padding * 6 0;
+  border: none !important;
+
+  .popup-menu-item {
+    border-radius: $circular_radius !important;
+    min-height: 20px;
+
+    &:focus, &:hover, &.selected {
+      color: $text_color !important;
+      background-color: $divider_color !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: transparentize($fg_color, 0.8);
+
+      &.active {
+        background-color: $selected_bg_color;
+        color: $selected_fg_color;
+      }
+    }
+
+    & .title {
+      @extend %title_3;
+    }
+
+    & .subtitle {
+      @extend %caption_heading;
+    }
+  }
+}
+
+.quick-settings-system-item {
+  & > StBoxLayout { spacing: 2 * $base_padding; }
+
+  .icon-button {
+    background-color: $fill_color;
+    color: $text_color;
+    border-radius: $circular_radius;
+    min-height: $menuitem_size !important;
+    min-width: $menuitem_size !important;
+    // padding: $container_padding;
+
+    &:hover { @include button(flat-hover); }
+    &:active { @include button(flat-active); }
+
+    > 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: transparentize($fg_color, 0.5); }
+
+.keyboard-brightness-level {
+  spacing: $base_padding;
+
+  .button:checked { @extend %default_button; }
+}
+
+// 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 * 1.5 !important;
+    -st-icon-style: regular !important;
+  }
+
+  & .icon-button {
+    @extend .icon-button;
+    padding: $base_padding;
+  }
+
+  & .spinner {
+    padding: $base_padding;
+  }
+
+  &.popup-inactive-menu-item { color: $fg_color; }
+}