diff --git a/shell/lib-core.sh b/shell/lib-core.sh index d1fe2d0b..9fc7af3d 100755 --- a/shell/lib-core.sh +++ b/shell/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 "44" ]]; then + if [[ "${SHELL_VERSION:-}" -ge "46" ]]; then + GNOME_VERSION="46-0" + elif [[ "${SHELL_VERSION:-}" -ge "44" ]]; then GNOME_VERSION="44-0" elif [[ "${SHELL_VERSION:-}" -ge "42" ]]; then GNOME_VERSION="42-0" diff --git a/src/main/gnome-shell/shell-46-0/gnome-shell-Dark.scss b/src/main/gnome-shell/shell-46-0/gnome-shell-Dark.scss new file mode 100644 index 00000000..48227f58 --- /dev/null +++ b/src/main/gnome-shell/shell-46-0/gnome-shell-Dark.scss @@ -0,0 +1,8 @@ +$variant: 'dark'; + +@import '../../../sass/variables'; +@import '../../../sass/colors'; +@import '../../../sass/gnome-shell/drawing'; +@import '../../../sass/gnome-shell/common'; +@import '../../../sass/gnome-shell/widgets-46-0'; +@import '../../../sass/gnome-shell/extensions-40-0'; diff --git a/src/main/gnome-shell/shell-46-0/gnome-shell-Light.scss b/src/main/gnome-shell/shell-46-0/gnome-shell-Light.scss new file mode 100644 index 00000000..db71c8f3 --- /dev/null +++ b/src/main/gnome-shell/shell-46-0/gnome-shell-Light.scss @@ -0,0 +1,8 @@ +$variant: 'light'; + +@import '../../../sass/variables'; +@import '../../../sass/colors'; +@import '../../../sass/gnome-shell/drawing'; +@import '../../../sass/gnome-shell/common'; +@import '../../../sass/gnome-shell/widgets-46-0'; +@import '../../../sass/gnome-shell/extensions-40-0'; diff --git a/src/sass/gnome-shell/_drawing.scss b/src/sass/gnome-shell/_drawing.scss index 31b07aac..db6be2c6 100644 --- a/src/sass/gnome-shell/_drawing.scss +++ b/src/sass/gnome-shell/_drawing.scss @@ -104,18 +104,19 @@ @if $t == normal { background-color: $bc; border-radius: $circular_radius; - border: 2px solid transparent; - box-shadow: inset 0 0 0 1px rgba($borders_color, 0); + border: 2px solid transparent !important; + box-shadow: inset 0 0 0 1px rgba($borders_color, 0) !important; + outline: none; } @if $t == hover { - box-shadow: inset 0 0 0 1px rgba($borders_color, 0.1); - border: 2px solid transparent; + box-shadow: inset 0 0 0 1px rgba($borders_color, 0.1) !important; + border: 2px solid transparent !important; } @if $t == focus { - border: 2px solid lighten($fc, 15%); - box-shadow: inset 0 0 0 1px rgba($borders_color, 0); + border: 2px solid lighten($fc, 15%) !important; + box-shadow: inset 0 0 0 1px rgba($borders_color, 0) !important; } @if $t == insensitive { @@ -126,25 +127,25 @@ @if $t == flat-normal { background-color: $bc; border-radius: $circular_radius; - border: none; - box-shadow: none; + border: none !important; + box-shadow: none !important; color: $tc; } @if $t == flat-hover { background-color: $bc; - box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05); + box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05) !important; color: $tc; } @if $t == flat-focus { - border: none; + border: none !important; background-color: rgba($bc, 0.2); color: $tc; } @if $t == flat-insensitive { - border: none; + border: none !important; background-color: rgba($bc, 0.05); color: rgba($tc, 0.45); } @@ -161,26 +162,26 @@ @if $t == normal { background-color: rgba(white, 0.12); border-radius: $bd_radius; - border-color: transparent; - box-shadow: 1px 2px 3px rgba(black, 0); + border-color: transparent !important; + box-shadow: none !important; } @if $t == focus { - border-color: transparent; + border-color: transparent !important; background-color: rgba(white, 0.18); - box-shadow: 1px 2px 3px rgba(black, 0); + box-shadow: none !important; } @if $t == hover { background-color: rgba(white, 0.2); - border-color: transparent; - box-shadow: 1px 2px 3px rgba(black, 0.35); + border-color: transparent !important; + box-shadow: none !important; } @if $t == insensitive { color: $disabled_fg_color; - border-color: transparent; - box-shadow: 1px 2px 3px rgba(black, 0); + border-color: transparent !important; + box-shadow: none !important; } } diff --git a/src/sass/gnome-shell/_widgets-46-0.scss b/src/sass/gnome-shell/_widgets-46-0.scss new file mode 100644 index 00000000..cc14efa2 --- /dev/null +++ b/src/sass/gnome-shell/_widgets-46-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-46-0/app-grid'; +@import 'widgets-46-0/dash'; +@import 'widgets-40-0/misc'; +@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/screen-shield'; +@import 'widgets-42-0/screenshot'; +@import 'widgets-40-0/search-entry'; +@import 'widgets-40-0/window-picker'; +@import 'widgets-40-0/workspace-thumbnails'; diff --git a/src/sass/gnome-shell/common/_app-grid.scss b/src/sass/gnome-shell/common/_app-grid.scss index 20dabdc5..9dea5b98 100644 --- a/src/sass/gnome-shell/common/_app-grid.scss +++ b/src/sass/gnome-shell/common/_app-grid.scss @@ -1,18 +1,6 @@ /* App Icons */ -.show-apps, -.app-well-app, %app-well-app { - @include font(body-1); - - .overview-icon.overview-icon-with-label { - padding: 10px 12px 14px; - - > StBoxLayout { - spacing: 6px; - } - } - .overview-icon { color: $light_fg_color; border-radius: $wm_radius * 1.5; @@ -21,6 +9,7 @@ transition-duration: 100ms; text-align: center; text-shadow: none; + background-color: transparent; } &:hover .overview-icon, @@ -38,31 +27,13 @@ } } -// App Folders -.app-folder { - background: none; - border-radius: $wm_radius * 1.5; - - .overview-icon { - background-color: $light_divider_color; - border-radius: $wm_radius * 1.5; - } - - &:hover .overview-icon { - background-color: rgba(white, 0.2); - } - - &:active .overview-icon { - background-color: rgba(white, 0.3); - } -} - // expanded folder .app-folder-dialog { border-radius: $bd_radius * 4; border: none; box-shadow: none; background-color: rgba(if($colorscheme == 'nord', #20242c, #262626), 0.9); + color: $light_alt_fg_color; .folder-name-container { padding: 24px 36px 0; diff --git a/src/sass/gnome-shell/common/_calendar.scss b/src/sass/gnome-shell/common/_calendar.scss index 8e3582cd..5d81c251 100644 --- a/src/sass/gnome-shell/common/_calendar.scss +++ b/src/sass/gnome-shell/common/_calendar.scss @@ -169,6 +169,7 @@ $popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($bas border-radius: $circular_radius; color: $alt_fg_color; font-feature-settings: "tnum"; + background-color: transparent; &:hover, &:focus { background-color: $divider_color; diff --git a/src/sass/gnome-shell/widgets-3-28/_app-grid.scss b/src/sass/gnome-shell/widgets-3-28/_app-grid.scss index 196b355c..f8c5dee3 100644 --- a/src/sass/gnome-shell/widgets-3-28/_app-grid.scss +++ b/src/sass/gnome-shell/widgets-3-28/_app-grid.scss @@ -19,6 +19,66 @@ $app_icon_padding: 24px; } } +/* App Icons */ +.show-apps, +.app-well-app { + @include font(body-1); + + .overview-icon.overview-icon-with-label { + padding: 10px 12px 14px; + + > StBoxLayout { + spacing: 6px; + } + } + + .overview-icon { + color: $light_fg_color; + border-radius: $wm_radius * 1.5; + padding: 12px; + border: none; + transition-duration: 100ms; + text-align: center; + text-shadow: none; + background-color: transparent; + } + + &:hover .overview-icon, + &:focus .overview-icon, + &:selected .overview-icon { + background-color: $light_divider_color; + border-image: none; + background-image: none; + } + + &:active .overview-icon, + &:checked .overview-icon { + background-color: $light_track_color; + box-shadow: none; + } +} + +// App Folders +.app-folder { + background: none; + border-radius: $wm_radius * 1.5; + padding: 0; + margin: 0; + + .overview-icon { + background-color: $light_divider_color; + border-radius: $wm_radius * 1.5; + } + + &:hover .overview-icon { + background-color: rgba(white, 0.2); + } + + &:active .overview-icon { + background-color: rgba(white, 0.3); + } +} + .app-folder-icon { padding: $base_padding; spacing-rows: $base_spacing; diff --git a/src/sass/gnome-shell/widgets-40-0/_app-grid.scss b/src/sass/gnome-shell/widgets-40-0/_app-grid.scss index e4567d06..edfd98f6 100644 --- a/src/sass/gnome-shell/widgets-40-0/_app-grid.scss +++ b/src/sass/gnome-shell/widgets-40-0/_app-grid.scss @@ -11,6 +11,66 @@ page-padding-right: 12px; } +/* App Icons */ +.show-apps, +.app-well-app { + @include font(body-1); + + .overview-icon.overview-icon-with-label { + padding: 10px 12px 14px; + + > StBoxLayout { + spacing: 6px; + } + } + + .overview-icon { + color: $light_fg_color; + border-radius: $wm_radius * 1.5; + padding: 12px; + border: none; + transition-duration: 100ms; + text-align: center; + text-shadow: none; + background-color: transparent; + } + + &:hover .overview-icon, + &:focus .overview-icon, + &:selected .overview-icon { + background-color: $light_divider_color; + border-image: none; + background-image: none; + } + + &:active .overview-icon, + &:checked .overview-icon { + background-color: $light_track_color; + box-shadow: none; + } +} + +// App Folders +.app-folder { + background: none; + border-radius: $wm_radius * 1.5; + padding: 0; + margin: 0; + + .overview-icon { + background-color: $light_divider_color; + border-radius: $wm_radius * 1.5; + } + + &:hover .overview-icon { + background-color: rgba(white, 0.2); + } + + &:active .overview-icon { + background-color: rgba(white, 0.3); + } +} + .app-folder-dialog { .page-navigation-hint { width: if($laptop == 'true', 60px, 80px); diff --git a/src/sass/gnome-shell/widgets-42-0/_app-grid.scss b/src/sass/gnome-shell/widgets-42-0/_app-grid.scss index 9ef2daf2..a7407141 100644 --- a/src/sass/gnome-shell/widgets-42-0/_app-grid.scss +++ b/src/sass/gnome-shell/widgets-42-0/_app-grid.scss @@ -11,6 +11,66 @@ page-padding-right: 18px; } +/* App Icons */ +.show-apps, +.app-well-app { + @include font(body-1); + + .overview-icon.overview-icon-with-label { + padding: 10px 12px 14px; + + > StBoxLayout { + spacing: 6px; + } + } + + .overview-icon { + color: $light_fg_color; + border-radius: $wm_radius * 1.5; + padding: 12px; + border: none; + transition-duration: 100ms; + text-align: center; + text-shadow: none; + background-color: transparent; + } + + &:hover .overview-icon, + &:focus .overview-icon, + &:selected .overview-icon { + background-color: $light_divider_color; + border-image: none; + background-image: none; + } + + &:active .overview-icon, + &:checked .overview-icon { + background-color: $light_track_color; + box-shadow: none; + } +} + +// App Folders +.app-folder { + background: none; + border-radius: $wm_radius * 1.5; + padding: 0; + margin: 0; + + .overview-icon { + background-color: $light_divider_color; + border-radius: $wm_radius * 1.5; + } + + &:hover .overview-icon { + background-color: rgba(white, 0.2); + } + + &:active .overview-icon { + background-color: rgba(white, 0.3); + } +} + .app-folder-dialog { .page-navigation-hint { width: if($laptop == 'true', 60px, 80px); diff --git a/src/sass/gnome-shell/widgets-46-0/_app-grid.scss b/src/sass/gnome-shell/widgets-46-0/_app-grid.scss new file mode 100644 index 00000000..c4a40b2f --- /dev/null +++ b/src/sass/gnome-shell/widgets-46-0/_app-grid.scss @@ -0,0 +1,136 @@ +/* App Grid */ + +$app_icon_size: 96px; +$app_folder_size: 720px; + +// app icons +.icon-grid { + row-spacing: 12px; + column-spacing: 12px; + max-row-spacing: 36px; + max-column-spacing: 36px; + page-padding-top: 24px; + page-padding-bottom: 24px; + page-padding-left: 18px; + page-padding-right: 18px; +} + +/* App Icons */ + +// items in the app grid and dash +.overview-tile { + background-color: transparent; + + &:focus { background-color: $light_divider_color; } + &:hover { background-color: $light_divider_color; } + &:active { background-color: $light_track_color; } + &:highlighted,&:selected, + &:checked { background-color: $light_track_color; } + &:insensitive { background-color: transparent; } + + // override the %tile style + border-radius: $wm_radius * 1.5; + padding: 12px; + + // the icon itself + .overview-icon { + // item with a label + &.overview-icon-with-label { + > StBoxLayout { + spacing: 6px; + } + } + } +} + +.app-folder { + background-color: $light_divider_color; + + &:focus { background-color: $light_divider_color; } + &:hover { background-color: rgba(white, 0.2); } + &:active { background-color: rgba(white, 0.3); } + &:highlighted,&:selected, + &:checked { background-color: rgba(white, 0.3); } + &:insensitive { background-color: transparent; } +} + +.app-folder-dialog-container { + // pad the top with panel height so the folder doesn't overlap the panel on smaller resolutions + padding-top: $menuitem_size; +} + +// Expanded app folder dialog +.app-folder-dialog { + width: $app_folder_size; + height: $app_folder_size; + + & .page-indicators { + margin-bottom: $base_padding * 4; + } + + & .icon-button, & .page-navigation-arrow { + color: $light_alt_fg_color; + background-color: transparent; + + &:hover { + background-color: $light_divider_color; + color: $light_fg_color; + } + + &:active { + background-color: $light_track_color; + color: $light_fg_color; + } + } +} + +.page-navigation-hint { + width: if($laptop == 'true', 220px, 300px); + + &.dnd { + background: rgba(255, 255, 255, 0.1); + } + + &.next:ltr, + &.previous:rtl { + background-gradient-start: $light_divider_color; + background-gradient-end: transparent; + background-gradient-direction: horizontal; + border-radius: $modal_radius 0px 0px $modal_radius; + } + + &.previous:ltr, + &.next:rtl { + background-gradient-start: transparent; + background-gradient-end: $light_divider_color; + background-gradient-direction: horizontal; + border-radius: 0px $modal_radius $modal_radius 0px; + } +} + +.page-navigation-arrow { + margin: $base_padding; + padding: $base_padding * 3; + width: 24px; + height: 24px; + border-radius: $circular_radius; + color: $light_alt_fg_color; + background-color: transparent; + + > StIcon { color: $light_fg_color; } + + &:insensitive { + background-color: $light_fill_color; + color: $light_alt_disabled_fg_color; + } + + &:hover { + background-color: $light_divider_color; + color: $light_fg_color; + } + + &:active { + background-color: $light_track_color; + color: $light_fg_color; + } +} diff --git a/src/sass/gnome-shell/widgets-46-0/_dash.scss b/src/sass/gnome-shell/widgets-46-0/_dash.scss new file mode 100644 index 00000000..62ac39a3 --- /dev/null +++ b/src/sass/gnome-shell/widgets-46-0/_dash.scss @@ -0,0 +1,94 @@ +/* Dash */ +$dash_background_color: rgba(white, 0.15); + +$dash_placeholder_size: 32px; +$dash_padding: $base_padding * 2; +$dash_edge_offset: $base_margin * 3; +$dash_border_radius: 16px + $dash_padding; +$dash_spacing: $base_margin * 0.5; + +// container for the dash +#dash { + margin-top: $dash_edge_offset; + + // background behind item container + .dash-background { + background-color: $dash_background_color; + border-radius: $dash_border_radius; + padding-top: $dash_padding; + padding-bottom: $dash_padding; + padding-left: $dash_padding - $dash_spacing; // subtract the margins added to .overview-tile below + padding-right: $dash_padding - $dash_spacing; + } + + // items on the dash + .dash-item-container { + + .placeholder { + // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg"); + background-image: none; + background-size: contain; + height: $dash_placeholder_size; + } + + .empty-dash-drop-target { + width: $dash_placeholder_size; + height: $dash_placeholder_size; + } + + // IMPORTANT: items on the dash need to extend to the edge to be adequate click targets + // as such the %tile style is overriden and button styles are applied to the child class .overview-icon + .show-apps, + .overview-tile { + // remove styles + background: none; + box-shadow: none; + border: none; + border-radius: 0; + padding: 0; + margin: 0 $dash_spacing; + padding-bottom: $dash_edge_offset; // align with other items + + .overview-icon { + border-radius: 16px; + padding: $base_padding; + spacing: $base_padding; + text-align: center; + transition-duration: 100ms; + background: none; + } + + &:focus .overview-icon { background-color: $light_divider_color; } + &:hover .overview-icon { background-color: $light_divider_color; } + &:active .overview-icon { background-color: $light_track_color; } + &:highlighted .overview-icon,&:selected .overview-icon, + &:checked .overview-icon { background-color: $light_track_color; } + &:insensitive .overview-icon { background-color: transparent; } + } + + // running app dot + .app-grid-running-dot { + // manually position the dot within the dash item + margin-bottom: $dash_padding + $dash_edge_offset - 3px; // 3px = size of dot (5px) subtracted from its translationY from appDisplay.js + } + } + + // separator between pinned and running apps + .dash-separator { + width: 1px; + margin-left:$base_margin; + margin-right:$base_margin; + background-color: rgba(white, 0.25); + } + + // make sure all dash components have same margin from screen edge + .dash-separator, + .dash-background { + margin-bottom: $dash_edge_offset; + } +} + +// OSD Tooltip +.dash-label { + -y-offset: $base_margin * 2; // distance from the dash edge +}