This commit is contained in:
vinceliuice 2025-03-28 14:56:20 +08:00
parent c20f9cf7e7
commit 8ff1fe69ab
5 changed files with 644 additions and 4 deletions

View File

@ -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-------------#

View File

@ -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';

View File

@ -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; }
}

View File

@ -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
}
}
}

View File

@ -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; }
}