From 2a4e21ec5eebff621d6f5cd3aeee3cad4cccc445 Mon Sep 17 00:00:00 2001 From: vinceliuice Date: Mon, 28 Oct 2024 11:27:19 +0800 Subject: [PATCH] Update #201 --- install.sh | 16 +- src/sass/_tweaks.scss | 3 + src/sass/gnome-shell/_widgets-47-0.scss | 42 ++ .../gnome-shell/widgets-47-0/_app-grid.scss | 209 ++++++++++ .../gnome-shell/widgets-47-0/_calendar.scss | 387 ++++++++++++++++++ src/sass/gnome-shell/widgets-47-0/_dash.scss | 105 +++++ .../widgets-47-0/_message-list.scss | 241 +++++++++++ .../widgets-47-0/_notifications.scss | 87 ++++ .../widgets-47-0/_quick-settings.scss | 265 ++++++++++++ .../widgets-47-0/_search-results.scss | 113 +++++ src/sass/libadwaita/_colors.scss | 4 +- src/sass/libadwaita/apps/_control-center.scss | 106 ++--- .../libadwaita/widgets/_view-switcher.scss | 2 +- 13 files changed, 1522 insertions(+), 58 deletions(-) create mode 100644 src/sass/gnome-shell/_widgets-47-0.scss create mode 100644 src/sass/gnome-shell/widgets-47-0/_app-grid.scss create mode 100644 src/sass/gnome-shell/widgets-47-0/_calendar.scss create mode 100644 src/sass/gnome-shell/widgets-47-0/_dash.scss create mode 100644 src/sass/gnome-shell/widgets-47-0/_message-list.scss create mode 100644 src/sass/gnome-shell/widgets-47-0/_notifications.scss create mode 100644 src/sass/gnome-shell/widgets-47-0/_quick-settings.scss create mode 100644 src/sass/gnome-shell/widgets-47-0/_search-results.scss diff --git a/install.sh b/install.sh index ce55b1f5..14522e32 100755 --- a/install.sh +++ b/install.sh @@ -38,7 +38,9 @@ SIZE_VARIANTS=('' '-Compact') if [[ "$(command -v gnome-shell)" ]]; then echo && gnome-shell --version SHELL_VERSION="$(gnome-shell --version | cut -d ' ' -f 3 | cut -d . -f -1)" - if [[ "${SHELL_VERSION:-}" -ge "46" ]]; then + if [[ "${SHELL_VERSION:-}" -ge "47" ]]; then + GS_VERSION="47-0" + elif [[ "${SHELL_VERSION:-}" -ge "46" ]]; then GS_VERSION="46-0" elif [[ "${SHELL_VERSION:-}" -ge "44" ]]; then GS_VERSION="44-0" @@ -51,7 +53,7 @@ if [[ "$(command -v gnome-shell)" ]]; then fi else echo "'gnome-shell' not found, using styles for last gnome-shell version available." - GS_VERSION="46-0" + GS_VERSION="47-0" fi usage() { @@ -508,8 +510,14 @@ gnome_shell_version() { sed -i "/\widgets/s/40-0/${GS_VERSION}/" "${SRC_DIR}/sass/gnome-shell/_common-temp.scss" - if [[ "${GS_VERSION}" != '40-0' && "${GS_VERSION}" != '42-0' && "${GS_VERSION}" != '44-0' ]]; then - sed -i "/\extensions/s/40-0/${GS_VERSION}/" "${SRC_DIR}/sass/gnome-shell/_common-temp.scss" + if [[ "${GS_VERSION}" == '3-28' ]]; then + sed -i "/\extensions/s/40-0/3-28/" "${SRC_DIR}/sass/gnome-shell/_common-temp.scss" + elif [[ "${GS_VERSION}" -ge '46-0' ]]; then + sed -i "/\extensions/s/40-0/46-0/" "${SRC_DIR}/sass/gnome-shell/_common-temp.scss" + fi + + if [[ "${SHELL_VERSION:-}" -ge "47" ]]; then + sed -i "/\gnome_version/s/default/new/" "${SRC_DIR}/sass/_tweaks-temp.scss" fi } diff --git a/src/sass/_tweaks.scss b/src/sass/_tweaks.scss index c198934b..6170a53e 100644 --- a/src/sass/_tweaks.scss +++ b/src/sass/_tweaks.scss @@ -33,3 +33,6 @@ $window_button: 'mac'; // Gnome-Shell float panel version $float: 'false'; + +// Gnome-Shell version +$gnome_version: 'default'; diff --git a/src/sass/gnome-shell/_widgets-47-0.scss b/src/sass/gnome-shell/_widgets-47-0.scss new file mode 100644 index 00000000..58264b10 --- /dev/null +++ b/src/sass/gnome-shell/_widgets-47-0.scss @@ -0,0 +1,42 @@ +@import 'common/a11y'; +@import 'common/base'; +@import 'common/buttons'; +@import 'common/check-box'; +@import 'common/corner-ripple'; +@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/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/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/calendar'; +@import 'widgets-46-0/dash'; +@import 'widgets-46-0/message-list'; +@import 'widgets-40-0/misc'; +@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-46-0/quick-settings'; +@import 'widgets-40-0/search-entry'; +@import 'widgets-46-0/search-results'; +@import 'widgets-42-0/screenshot'; +@import 'widgets-40-0/window-picker'; +@import 'widgets-40-0/workspace-thumbnails'; diff --git a/src/sass/gnome-shell/widgets-47-0/_app-grid.scss b/src/sass/gnome-shell/widgets-47-0/_app-grid.scss new file mode 100644 index 00000000..8fdb8bec --- /dev/null +++ b/src/sass/gnome-shell/widgets-47-0/_app-grid.scss @@ -0,0 +1,209 @@ + +/* App Icons */ + +$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; +} + +.overview-tile { + color: on($osd, secondary); + border-radius: $base_radius * 2.5; + padding: 6px; + border: none; + transition-duration: 100ms; + text-align: center; + background-color: transparent; + + &:hover, + &:focus, + &:selected { + color: on($osd); + background-color: on($osd, divider); + border-image: none; + background-image: none; + } + + &:active, + &:checked, { + color: on($osd); + background-color: on($osd, track); + box-shadow: none; + } +} + +// App Folders +.app-folder { + background-color: on($osd, divider); + border-radius: $base_radius * 2.5; + color: on($osd, secondary); + + .overview-icon { + background-color: transparent; + border-radius: $base_radius * 2.5; + } + + &:hover { + background-color: overlay($osd, active); + color: on($osd); + } + + &:active { + background-color: on($osd, track); + color: on($osd); + } +} + +// Running app indicator (also shown in dash) +.app-grid-running-dot { + width: $base_padding; + height: 3px; + border-radius: 2px; + background-color: on($osd, track); + margin-bottom: 0; + + StWidget.focused & { + width: $base_padding * 4; + background-color: $inverse-indicator !important; + } +} + +.app-folder-dialog-container { + // pad the top with panel height so the folder doesn't overlap the panel on smaller resolutions + padding-top: $item_size; +} + +// expanded folder +.app-folder-dialog { + width: $app_folder_size; + height: $app_folder_size; + border-radius: $menu_radius * 3; + padding: $base_padding * 2; + background-color: $osd; + + @if $rimless == 'false' { + border: 1px solid black; + box-shadow: inset 0 0 0 1px highlight($osd); + } @else { + border: none; + box-shadow: none; + } + + .folder-name-container { + padding: $base_padding * 4 $base_padding * 6; + padding-bottom: 0; + + .folder-name-label, + .folder-name-entry { + @extend %title_1; + } + + .folder-name-entry { + width: 12em; + border: none; + caret-color: on($osd); + + &:focus { + background-color: on($osd, divider); + color: on($osd); + } + } + } + + .icon-button { + background-color: overlay($osd); + color: on($osd, secondary); + border: none; + padding: 0; + width: 36px; + height: 36px; + border-radius: $circular_radius; + + > StIcon { icon-size: $base_icon_size; } + + &:hover { background-color: overlay($osd, hover); } + &:checked, &:active { background-color: $inverse-indicator; color: on($inverse-indicator); } + } + + .page-indicators { + margin-bottom: 18px; + } +} + +// Rename popup for app folders +.rename-folder-popup { + .rename-folder-popup-item { + spacing: $base_padding; + &:ltr, &:rtl { padding: 0 $base_padding * 2; } + } +} + +// shutdown and other actions in the grid +.system-action-icon { + box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); // FIXME: this should really have a highlight + background-color: $osd; + color: on($osd); + border-radius: $circular_radius; + icon-size: $app_icon_size * 0.5; +} + +// page navigation +.page-navigation-hint { + &.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: $modal_radius * 1.5 0px 0px $modal_radius * 1.5; + } + + &.previous:ltr, + &.next:rtl { + background-gradient-start: transparent; + background-gradient-end: rgba(255, 255, 255, 0.05); + background-gradient-direction: horizontal; + border-radius: 0px $modal_radius * 1.5 $modal_radius * 1.5 0px; + } +} + +.page-navigation-arrow { + margin: $base_padding; + padding: $base_padding * 3; + width: $medium_icon_size; + height: $medium_icon_size; + border-radius: $circular_radius; + transition-duration: 100ms; + color: on($osd, secondary); + background-color: transparent; + + > StIcon { color: on($osd); } + + &:insensitive { + background-color: transparent; + 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-47-0/_calendar.scss b/src/sass/gnome-shell/widgets-47-0/_calendar.scss new file mode 100644 index 00000000..ccb92bf8 --- /dev/null +++ b/src/sass/gnome-shell/widgets-47-0/_calendar.scss @@ -0,0 +1,387 @@ +/* Date/Time Menu */ + +%popover_bubble { + color: $text-secondary; + background-color: $fill; + border-radius: $base_radius; + border: none; + box-shadow: none; + text-shadow: none; + + &:hover, &:focus { + color: $text; + background-color: overlay($base, hover); + box-shadow: none; + } + + &:active { + color: $text; + background-color: overlay($base, active); + box-shadow: none; + } +} + +// overall menu +#calendarArea { + padding: $base_padding / 2; +} + +.datemenu-popover { + border-radius: $base_radius + $base_padding * 2 !important; +} + +// Calendar menu side column +.datemenu-calendar-column { + spacing: $base_spacing; + border: none; + padding: 0 !important; + margin: 0 !important; + + &:ltr { margin-right: 0; border-left-width: 0; } + &:rtl { margin-left: 0; border-right-width: 0; } + + .datemenu-displays-section { padding-bottom: 0; } + + .datemenu-displays-box { + spacing: $base_spacing; + } +} + +.world-clocks-header, +.weather-header, +.events-section-title { + color: $text-secondary; + font-weight: bold; +} + +.datemenu-today-button, +.datemenu-displays-box { + margin: $base_margin $base_spacing; +} + +/* today button (the date) */ +.datemenu-today-button { + border: none; + box-shadow: none; + background: none; + padding: $base_padding $base_padding * 2; + margin: 0; + text-shadow: none; + color: $text-secondary; + border-radius: $base_radius; + margin: $base_margin; + + &:ltr { margin-left: $base_margin; } + &:rtl { margin-right: $base_margin; } + + &:hover, &:focus { + background-color: overlay($base, hover); + } + + &:active { + background-color: overlay($base, active); + } + + // weekday label + .day-label { + @include fontsize($font_size + 1); + font-weight: bold; + } + + // date label + .date-label { + @include fontsize($font_size + 7); + font-weight: normal; + } +} + +/* Calendar */ +.calendar { + border: none; + box-shadow: none; + background-color: transparent; + padding: $base_padding / 2 !important; + margin: 0 !important; + text-shadow: none; + border-radius: $menu_radius; + color: $text-secondary; + + // month + .calendar-month-label { + @extend %heading; + padding: $base_padding 0; + color: $text-secondary !important; + font-weight: bold; + text-align: center; + text-shadow: none; + background-color: transparent; + } + + // prev/next month icons + .calendar-change-month-back, + .calendar-change-month-forward { + padding: 0 !important; + margin: ($base_padding / 2) 0 !important; + + StIcon { + icon-size: $base_icon_size; + } + } + + .pager-button { + width: $item_size !important; + height: $item_size !important; + margin: 2px !important; + border-radius: $circular_radius; + background-color: transparent; + color: $text; + box-shadow: none !important; + + &:hover, &:focus { background-color: $divider; box-shadow: none !important; } + &:active { background-color: $track; box-shadow: none !important; } + } + + .calendar-day { + @include fontsize($font_size - 1); + text-align: center; + width: $item_size + 2px !important; + height: $item_size + 2px !important; + padding: 0 !important; + margin: 2px !important; + border-radius: $circular_radius; + color: $text-secondary !important; + border: none; + font-feature-settings: "tnum"; + background-color: transparent; + + &:hover, &:focus { + background-color: $divider; + box-shadow: none !important; + outline: none !important; + } + + &:active, &:selected { + color: $text !important; + background-color: $track; + border-color: transparent !important; //avoid jumparound due to today + box-shadow: none !important; + outline: none !important; + } + + &.calendar-weekday {} + + &.calendar-weekend { + color: $text-disabled !important; + // font-weight: normal; + } + } + + .calendar-day { //border collapse hack - see calendar.js + border-width: 0; + } + + .calendar-day-top { + border-top-width: 0; + } + + .calendar-day-left { + border-left-width: 0; + } + + .calendar-nonwork-day { + color: $text; + // font-weight: normal; + } + + // Today + .calendar-today { + font-weight: bold; + color: $text-secondary !important; + background-color: overlay($base); + border: none; + + &:hover, &:focus { + background-color: overlay($base, hover); + color: $text !important; + } + + &:active { + background-color: darken($primary, 5%); + color: on($primary) !important; + } + + &:selected { + background-color: $primary; + color: on($primary) !important; + + &:hover, &:focus { + background-color: lighten($primary, 8%); + color: on($primary) !important; + } + } + } + + .calendar-day-with-events { + color: $text-secondary; + background-image: url("assets/calendar-today.svg"); + + &.calendar-work-day { + color: $text-secondary; + font-weight: bold; + } + } + + .calendar-other-month { + color: $text-secondary-disabled !important; + font-weight: normal; + + &.calendar-weekend { + color: $text-secondary-disabled !important; + } + } + + // day of week heading + .calendar-day-heading { + @extend %numeric; + @extend %smaller; + font-weight: bold; + text-align: center; + margin: $base_margin; + padding: $base_padding * 0.5 $base_padding; + border-radius: $base_radius; + background-color: transparent; + color: $text; + } + + .calendar-week-number { + width: $item_size - 6px; + height: $item_size - 12px; + margin: 6px $base_margin / 2 !important; + padding: 0; + border-radius: $base_radius; + background-color: $fill; + color: $text-disabled; + @extend %smaller; + font-weight: bold; + font-feature-settings: "tnum"; + text-align: center; + } +} + +.world-clocks-button, +.weather-button, +.events-button { + @extend %popover_bubble; + padding: $base_padding * 2 !important; + margin: $base_margin / 2 0 !important; +} + +// Events +.events-button { + .events-box { + spacing: $base_spacing; + } + + .events-list { + spacing: 2 * $base_spacing; + text-shadow: none; + color: $text-secondary; + } + + .events-title { + font-weight: bold; + text-shadow: none; + color: $text-disabled; + } + + .event-time { + font-feature-settings: "tnum"; + @include fontsize($font_size - 1); + color: $text-disabled; + } +} + +// World Clock +.world-clocks-button { + .world-clocks-grid { + spacing-rows: $base_padding; + spacing-columns: $base_padding * 2; + } + + // title + .world-clocks-header { + @extend %heading; + color: $text-disabled; + } + + .world-clocks-city { + font-weight: bold; + @include fontsize($font_size); + color: $text-secondary; + } + + .world-clocks-time { + font-feature-settings: "tnum"; + @include fontsize($font_size); + color: $text; + + &:ltr { text-align: right; } + &:rtl { text-align: left; } + } + + .world-clocks-timezone { + font-feature-settings: "tnum"; + @include fontsize($font_size - 1); + color: $text-disabled; + } +} + +.world-clocks-grid, +.weather-grid { + spacing-rows: 0.4em; + spacing-columns: 0.8em; +} + +// Weather +.weather-button { + .weather-box { + spacing: $base_spacing + $base_margin; + } + + .weather-header-box { + spacing: $base_spacing; + } + + .weather-header { + font-weight: bold; + color: $text-secondary; + + &.location { + font-weight: normal; + @include fontsize($font_size - 1); + color: $text-disabled; + } + } + + .weather-grid { + spacing-rows: $base_spacing; + spacing-columns: $base_spacing * 2; + } + + .weather-forecast-time { + font-feature-settings: "tnum"; + @include fontsize($font_size - 2); + font-weight: normal; + padding-top: 0.2em; + padding-bottom: 0.4em; + color: $text-secondary; + } + + .weather-forecast-icon { + icon-size: 32px; + } + + .weather-forecast-temp { + font-weight: bold; + } +} diff --git a/src/sass/gnome-shell/widgets-47-0/_dash.scss b/src/sass/gnome-shell/widgets-47-0/_dash.scss new file mode 100644 index 00000000..77215b20 --- /dev/null +++ b/src/sass/gnome-shell/widgets-47-0/_dash.scss @@ -0,0 +1,105 @@ +/* Dash */ + +// uses system colors +$dash_background_color: on($osd, divider); + +$dash_placeholder_size: 32px; +$dash_padding: $base_padding * 2; +$dash_edge_offset: $base_margin * 3; +$dash_border_radius: $modal_radius + $dash_padding; +$dash_spacing: $base_margin * 0.5; + +// container for the dash +#dash { + // a bit of spacing so that dash doesn't touch the screen edges + padding-left: $base_padding; + padding-right: $base_padding; + + // 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; + box-shadow: inset 0 1px rgba(white, 0.08); + } + + // 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 { + 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: $modal_radius; + padding: $base_padding; + spacing: $base_padding; + text-align: center; + transition-duration: 100ms; + background-color: transparent; + color: on($osd); + } + + &:focus .overview-icon { background-color: on($osd, divider); } + &:hover .overview-icon { background-color: on($osd, divider); } + &:active .overview-icon { background-color: on($osd, track); } + &:checked .overview-icon { background-color: on($osd, divider); } + } + + // running app dot + .app-grid-running-dot { + // manually position the dot within the dash item + offset-y: -$dash_padding; + } + } + + // separator between pinned and running apps + .dash-separator { + width: 1px; + margin-left: $base_margin; + margin-right: $base_margin; + background-color: on($osd, divider); + } + + // make sure all dash components have same margin from screen edge + .dash-separator, + .dash-background { + margin-bottom: $dash_edge_offset; + } +} + +// OSD Tooltip +.dash-label { + color: rgba(white, 0.9); + background-color: rgba(black, 0.75); + border-radius: $circular_radius; + padding: $base_padding $base_padding * 2; + margin: $base_margin * 2; + box-shadow: none; + border: none; + text-align: center; + -y-offset: $base_margin; // distance from the dash edge + -x-offset: 8px; +} diff --git a/src/sass/gnome-shell/widgets-47-0/_message-list.scss b/src/sass/gnome-shell/widgets-47-0/_message-list.scss new file mode 100644 index 00000000..a2f3b346 --- /dev/null +++ b/src/sass/gnome-shell/widgets-47-0/_message-list.scss @@ -0,0 +1,241 @@ +/* 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_2; + 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-list-sections { + margin: 0; // to account for scrollbar + padding-bottom: $base_padding; + + // to account for scrollbar + &:ltr { margin-right: 0; } + &:rtl { margin-left: 0; } +} + +.message-list-section, +.message-list-sections, +.message-list-section-list { + spacing: $base_spacing; +} + +// 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 bubbles +.message { + padding: 0; + margin: $base_spacing / 2; + border-radius: $window_radius; + + .popup-menu & { + border-radius: $base_radius; + @extend %popover_bubble; + + .notification-button { + &:first-child:ltr { + border-radius: 0 0 0 $base_radius; + } + + &:last-child:ltr { + border-radius: 0 0 $base_radius; + } + + &:first-child:rtl { + border-radius: 0 0 $base_radius; + } + + &:last-child:rtl { + border-radius: 0 0 0 $base_radius; + } + + &:first-child:last-child { + border-radius: 0 0 $base_radius $base_radius; + } + } + } + + // message header + .message-header { + padding: 0 $scaled_padding; + margin: $base_padding; + margin-bottom: 0; + spacing: $base_padding; + color: $text-disabled; + + // 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, &:active { + color: $text; + } + + &:hover, &:focus { background-color: $divider; } + &:active, &:active:hover { background-color: $track; } + &: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; + } + } + } +} + +// 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 + } + } +} \ No newline at end of file diff --git a/src/sass/gnome-shell/widgets-47-0/_notifications.scss b/src/sass/gnome-shell/widgets-47-0/_notifications.scss new file mode 100644 index 00000000..03c8ff66 --- /dev/null +++ b/src/sass/gnome-shell/widgets-47-0/_notifications.scss @@ -0,0 +1,87 @@ +/* Notifications & Message Tray */ + +$notification_banner_height: 64px; +$notification_banner_width: 34em; + +// Banner notifications +.notification-banner { + 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; + + @if $rimless == 'false' and $variant == 'dark' { + border: 1px solid $window-border; + box-shadow: inset 0 0 0 1px highlight($popover); + } @else { + border: none; + box-shadow: 0 3px 6px rgba(black, 0.25); + } + + &:hover, &:active, &:focus { + color: $text; + background-color: $popover; + } +} + +.notification-buttons-bin { + background-color: transparent; + padding-top: 0; + border: none; + border-top: 1px solid $border; + spacing: 0; +} + +.notification-button { + min-height: $item_size + $base_padding * 2; + padding: 0 $base_padding * 3; + background-color: transparent; + color: $text-secondary; + font-weight: 500; + border: none; + + &:focus { + background-color: transparent; + color: $text; + box-shadow: inset 0 0 0 2px $divider; + } + + &:hover, &:focus:hover { + background-color: $divider; + color: $text; + box-shadow: none; + } + + &:active { + background-color: $track; + color: $text; + } + + &:first-child:ltr { + border-radius: 0 0 0 $menu_radius; + } + + &:last-child:ltr { + border-radius: 0 0 $menu_radius; + margin-right: 0 !important; + } + + &:first-child:rtl { + border-radius: 0 0 $menu_radius; + } + + &:last-child:rtl { + border-radius: 0 0 0 $menu_radius; + margin-left: 0 !important; + } + + &:first-child:last-child { + border-radius: 0 0 $menu_radius $menu_radius; + margin-left: 0 !important; + margin-right: 0 !important; + } +} diff --git a/src/sass/gnome-shell/widgets-47-0/_quick-settings.scss b/src/sass/gnome-shell/widgets-47-0/_quick-settings.scss new file mode 100644 index 00000000..013e32d8 --- /dev/null +++ b/src/sass/gnome-shell/widgets-47-0/_quick-settings.scss @@ -0,0 +1,265 @@ +.quick-settings { + padding: $base_padding * 3 !important; + border-radius: $base_radius + $base_padding * 3 !important; + margin-top: 4px !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; + color: $text; + + &: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 * 1.5; + + &: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; } +} diff --git a/src/sass/gnome-shell/widgets-47-0/_search-results.scss b/src/sass/gnome-shell/widgets-47-0/_search-results.scss new file mode 100644 index 00000000..009cb5ec --- /dev/null +++ b/src/sass/gnome-shell/widgets-47-0/_search-results.scss @@ -0,0 +1,113 @@ +/* Search */ + +%search-section-content-item { + border-radius: $base_radius; + padding: $base_padding; + transition-duration: 100ms; + text-align: center; + background-color: transparent; + + &:focus, + &:hover, + &:selected { + background-color: overlay($osd, hover); + transition-duration: 0; + } + + &:active, + &:checked { + background-color: overlay($osd, active); + } +} + +// search overview container +#searchResults { + margin: 0 $base_margin; +} + +#searchResultsContent { + max-width: 1044px; +} + +// search results sections "the boxes" +.search-section { + // This should be equal to #searchResultsContent spacing + spacing: $base_padding * 3; + + // separator (unstyled) + .search-section-separator { + height: $base_margin * 2; // use it as a spacer + background-color: transparent; + } +} + +// content +.search-section-content { // This is the space between the provider icon and the results container + border-radius: $modal_radius * 1.5; + padding: $base_padding * 2; + margin:0 $base_margin * 3; + border: none; + box-shadow: none; + background: none; + text-shadow: none; + color: on($osd, secondary); + background-color: on($osd, divider); +} + +// "no results" text +.search-statustext { + @extend %title_1; + color: on($osd, disabled); +} + +.grid-search-results { + spacing: $base_padding * 5; + margin:0 $base_margin * 3; +} + +// Search results with icons +.grid-search-result { + @extend .overview-tile; +} + +// search result provider +.search-provider-icon { + @extend %search-section-content-item; + + &:ltr { margin-right: $base_margin; } + &:rtl { margin-left: $base_margin; } + + // content + .list-search-provider-content { + spacing: $base_spacing * 2; + + // provider labels + .list-search-provider-details { + width: 120px; + color: on($osd, secondary); + } + } +} + +// search results list +.list-search-results { + spacing: $base_spacing; +} + +// search result listitem +.list-search-result { + @extend %search-section-content-item; + + // content + .list-search-result-content { + spacing: $base_padding; + } + + // list item title (with leading icon) + .list-search-result-title { + spacing: $base_spacing * 2; + } + + // list item description + .list-search-result-description { color: on($osd, secondary); } +} diff --git a/src/sass/libadwaita/_colors.scss b/src/sass/libadwaita/_colors.scss index 41928c1b..669c4773 100644 --- a/src/sass/libadwaita/_colors.scss +++ b/src/sass/libadwaita/_colors.scss @@ -132,6 +132,7 @@ $dimmer_opacity: 0.3; $disabled_opacity: 0.45; $strong_disabled_opacity: 0.3; +@if $gnome_version == 'new' { :root { --accent-blue: #3584e4; --accent-teal: #2190a4; @@ -199,4 +200,5 @@ $strong_disabled_opacity: 0.3; --shade-color: @shade_color; --scrollbar-outline-color: @scrollbar_outline_color; -} \ No newline at end of file +} +} diff --git a/src/sass/libadwaita/apps/_control-center.scss b/src/sass/libadwaita/apps/_control-center.scss index 4c295419..8ca5b138 100644 --- a/src/sass/libadwaita/apps/_control-center.scss +++ b/src/sass/libadwaita/apps/_control-center.scss @@ -27,58 +27,60 @@ preferencesgroup > box { .cutout-button { background-color: $dialog_bg_color; } - button.accent-button { - min-height: 24px; - min-width: 24px; - padding: $base_padding / 2; - border-radius: $circular_radius; - background: var(--accent-bg-color); - outline: none; - background-clip: content-box; - box-shadow: none; - - &:hover { box-shadow: 0 0 0 3px $hover_color; } - - &:checked { box-shadow: 0 0 0 3px $accent_color; } - - &.blue, &.teal, &.green, &.yellow, &.orange, &.red, &.pink, &.purple, &.slate { - --accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab)); - } - - &.blue { - --accent-bg-color: var(--accent-blue); - } - - &.teal { - --accent-bg-color: var(--accent-teal); - } - - &.green { - --accent-bg-color: var(--accent-green); - } - - &.yellow { - --accent-bg-color: var(--accent-yellow); - } - - &.orange { - --accent-bg-color: var(--accent-orange); - } - - &.red { - --accent-bg-color: var(--accent-red); - } - - &.pink { - --accent-bg-color: var(--accent-pink); - } - - &.purple { - --accent-bg-color: var(--accent-purple); - } - - &.slate { - --accent-bg-color: var(--accent-slate); + @if $gnome_version == 'new' { + button.accent-button { + min-height: 24px; + min-width: 24px; + padding: $base_padding / 2; + border-radius: $circular_radius; + background: var(--accent-bg-color); + outline: none; + background-clip: content-box; + box-shadow: none; + + &:hover { box-shadow: 0 0 0 3px $hover_color; } + + &:checked { box-shadow: 0 0 0 3px $accent_color; } + + &.blue, &.teal, &.green, &.yellow, &.orange, &.red, &.pink, &.purple, &.slate { + --accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab)); + } + + &.blue { + --accent-bg-color: var(--accent-blue); + } + + &.teal { + --accent-bg-color: var(--accent-teal); + } + + &.green { + --accent-bg-color: var(--accent-green); + } + + &.yellow { + --accent-bg-color: var(--accent-yellow); + } + + &.orange { + --accent-bg-color: var(--accent-orange); + } + + &.red { + --accent-bg-color: var(--accent-red); + } + + &.pink { + --accent-bg-color: var(--accent-pink); + } + + &.purple { + --accent-bg-color: var(--accent-purple); + } + + &.slate { + --accent-bg-color: var(--accent-slate); + } } } } diff --git a/src/sass/libadwaita/widgets/_view-switcher.scss b/src/sass/libadwaita/widgets/_view-switcher.scss index 6af0bd28..58689f66 100644 --- a/src/sass/libadwaita/widgets/_view-switcher.scss +++ b/src/sass/libadwaita/widgets/_view-switcher.scss @@ -56,7 +56,7 @@ viewswitchertitle { viewswitcher { margin-left: $base_padding * 2; - margin-right: $base_padding 8 2; + margin-right: $base_padding * 2; &.narrow { margin-top: $base_padding / 2;