From bc05f7cbfef37694eb777e9afe1ce98bcff67876 Mon Sep 17 00:00:00 2001 From: vinceliuice Date: Tue, 17 Jun 2025 21:41:30 +0800 Subject: [PATCH] update --- src/sass/gtk/_common-3.0.scss | 6 +- src/sass/libadwaita/_colors.scss | 3 + src/sass/libadwaita/_widgets.scss | 4 +- src/sass/libadwaita/widgets/_inspector.scss | 77 ++++++ .../libadwaita/widgets/_toggle-group.scss | 226 ++++++++++++++++++ 5 files changed, 314 insertions(+), 2 deletions(-) create mode 100644 src/sass/libadwaita/widgets/_inspector.scss create mode 100644 src/sass/libadwaita/widgets/_toggle-group.scss diff --git a/src/sass/gtk/_common-3.0.scss b/src/sass/gtk/_common-3.0.scss index b472646d..0e7008af 100644 --- a/src/sass/gtk/_common-3.0.scss +++ b/src/sass/gtk/_common-3.0.scss @@ -3988,11 +3988,15 @@ stackswitcher { border: none; &.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action) { - margin: 0 0; + margin: 0; background-color: transparent; border-radius: $corner-radius; padding: ($medium-size - 24px - $space-size) / 2 ($medium-size - 16px) / 2; + + button { + margin-left: $space-size / 2; + } + &.text-button { min-width: 100px; } &:focus:not(:hover):not(:checked) { box-shadow: none; } diff --git a/src/sass/libadwaita/_colors.scss b/src/sass/libadwaita/_colors.scss index c18d329c..dcb31ce4 100644 --- a/src/sass/libadwaita/_colors.scss +++ b/src/sass/libadwaita/_colors.scss @@ -132,6 +132,9 @@ $dimmer_opacity: 0.3; $disabled_opacity: 0.45; $strong_disabled_opacity: 0.3; +$standalone-color-oklab-light: Min(l, 0.5) a b; +$standalone-color-oklab-dark: Max(l, 0.85) a b; + @if $gnome_version == 'new' { :root { --accent-blue: #3584e4; diff --git a/src/sass/libadwaita/_widgets.scss b/src/sass/libadwaita/_widgets.scss index 471d0a90..b1526c51 100644 --- a/src/sass/libadwaita/_widgets.scss +++ b/src/sass/libadwaita/_widgets.scss @@ -13,6 +13,7 @@ @import 'widgets/expanders'; @import 'widgets/file-chooser'; @import 'widgets/header-bar'; +@import 'widgets/inspector'; @import 'widgets/labels'; @import 'widgets/level-bar'; @import 'widgets/linked'; @@ -35,8 +36,9 @@ @import 'widgets/switch'; @import 'widgets/tab-view'; @import 'widgets/text-selection'; +@import 'widgets/toggle-group'; @import 'widgets/toolbars'; @import 'widgets/tooltip'; @import 'widgets/views'; @import 'widgets/view-switcher'; -@import 'widgets/window'; +@import 'widgets/window'; \ No newline at end of file diff --git a/src/sass/libadwaita/widgets/_inspector.scss b/src/sass/libadwaita/widgets/_inspector.scss new file mode 100644 index 00000000..c9d1c667 --- /dev/null +++ b/src/sass/libadwaita/widgets/_inspector.scss @@ -0,0 +1,77 @@ +.accent-color-row color { + min-width: 16px; + min-height: 16px; + border-radius: 16px; +} + +.accent-color-row color:disabled { + opacity: $disabled_opacity; +} + +adaptive-preview { + headerbar.adaptive-mode-flat { + @extend .flat; + } + + .device-view { + background: #101011; + color: white; + box-shadow: 0 0 0 2px RGB(255 255 255 / 15%); + margin: 2px; + padding: var(--top-bezel) var(--side-bezel) var(--bottom-bezel); + border-radius: var(--top-device-corner-radius) + var(--top-device-corner-radius) + var(--bottom-device-corner-radius) + var(--bottom-device-corner-radius); + + --window-radius: 0px; + + /* Hack to make GtkGraphicsOffload disable offload in this case */ + opacity: 99.9999999999999%; + + &.custom { + padding: 0; + border-radius: 0; + margin: 0; + box-shadow: 0 2px 8px 2px RGB(0 0 0 / 7%), + 0 3px 20px 10px RGB(0 0 0 / 5%), + 0 6px 32px 16px RGB(0 0 0 / 2%), + 0 0 0 1px RGB(0 0 0 / 5%); + } + + &.highlight { + background: oklab(from $accent_bg_color 0.5 a b); + box-shadow: none; + + .screen-view .shell-top-bar, + .screen-view .shell-bottom-bar { + background: none; + } + + &.custom { + box-shadow: 0 2px 8px 2px RGB(0 0 0 / 7%), + 0 3px 20px 10px RGB(0 0 0 / 5%), + 0 6px 32px 16px RGB(0 0 0 / 2%), + 0 0 0 3px oklab(from $accent_bg_color 0.5 a b); + } + } + + .screen-view { + border-radius: var(--top-screen-corner-radius) + var(--top-screen-corner-radius) + var(--bottom-screen-corner-radius) + var(--bottom-screen-corner-radius); + + &.outline { + filter: drop-shadow( 3px 0 0 $accent_bg_color) + drop-shadow(-3px 0 0 $accent_bg_color) + drop-shadow(0 3px 0 $accent_bg_color) + drop-shadow(0 -3px 0 $accent_bg_color); + } + + .shell-top-bar, .shell-bottom-bar { + background: black; + } + } + } +} diff --git a/src/sass/libadwaita/widgets/_toggle-group.scss b/src/sass/libadwaita/widgets/_toggle-group.scss new file mode 100644 index 00000000..4601c009 --- /dev/null +++ b/src/sass/libadwaita/widgets/_toggle-group.scss @@ -0,0 +1,226 @@ +/****************** + * AdwToggleGroup * + ******************/ + +$toggle_transition: color 200ms $ease-out-quad, + background 200ms $ease-out-quad, + box-shadow 200ms $ease-out-quad; + +toggle-group { + ---group-padding: 3px; + + background: $button_color; + border-radius: $button_radius; + padding: var(---group-padding); + + &:disabled { + background-color: color-mix(in srgb, $button_color var(--disabled-opacity), transparent); + } + + > toggle { + border-radius: calc(#{$button_radius} - var(---group-padding); + font-weight: bold; + min-width: 34px; + min-height: calc(34px - var(---group-padding) * 2); + + &.image-button > image:disabled { + filter: opacity($strong_disabled_opacity); + } + + &.text-button { + min-width: calc(18px + var(---group-padding) * 2); + padding-left: calc(11px - var(---group-padding)); + padding-right: calc(11px - var(---group-padding)); + + > label:disabled { + filter: opacity($strong_disabled_opacity); + } + } + + &.image-text-button { + min-width: calc(10px + var(---group-padding) * 2); + padding-left: calc(11px - var(---group-padding)); + padding-right: calc(11px - var(---group-padding)); + + > buttoncontent > box > label { + padding: 0; + } + + > buttoncontent > box > image:disabled, + > buttoncontent > box > label:disabled { + filter: opacity($strong_disabled_opacity); + } + } + + @include focus-ring($transition: $toggle_transition, $outer: true, $offset: 0); + + &:hover { + background-color: $hover_color; + } + + &:active, &.keyboard-activating { + background-color: $active_color; + } + + &:checked { + background-color: var(--active-toggle-bg-color); + color: var(--active-toggle-fg-color); + box-shadow: 0 1px 3px 1px RGB(0 0 6 / 7%), + 0 2px 6px 2px RGB(0 0 6 / 3%); + + &:disabled { + background-color: color-mix(in srgb, var(--active-toggle-bg-color) var(--disabled-opacity), transparent); + box-shadow: none; + } + } + } + + &.osd, + .osd & { + --active-toggle-bg-color: white; + --active-toggle-fg-color: rgb(0 0 0 / 80%); + + &:not(.flat) > toggle:checked { + --accent-bg-color: rgb(0 0 0 / 75%); + --accent-fg-color: white; + + --standalone-color-oklab: #{$standalone-color-oklab-light}; + --accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab)); + --destructive-color: oklab(from var(--destructive-bg-color) var(--standalone-color-oklab)); + --success-color: oklab(from var(--success-bg-color) var(--standalone-color-oklab)); + --warning-color: oklab(from var(--warning-bg-color) var(--standalone-color-oklab)); + --error-color: oklab(from var(--error-bg-color) var(--standalone-color-oklab)); + + @include focus-ring($transition: $toggle_transition, $outer: true, $offset: 1px); + + &:focus:focus-visible { + outline-color: color-mix(in srgb, RGB(255 255 255 / 75%) $focus_border_opacity, transparent); + } + + box-shadow: 0 1px 3px 1px RGB(0 0 6 / 7%), + 0 2px 6px 2px RGB(0 0 6 / 3%); + + &:disabled { + box-shadow: none; + } + } + } + + &.vertical > toggle:not(.text-button):not(.image-text-button) { + min-width: calc(34px - var(---group-padding) * 2); + } + + > separator { + transition: opacity 200ms $ease-out-quad; + + &.horizontal { + margin: calc(6px - var(---group-padding)) 1px; + } + + &.vertical { + margin: 1px calc(6px - var(---group-padding)); + } + + &.hidden { + opacity: 0; + } + + &:disabled { + filter: Opacity(var(--disabled-opacity)); + } + } + + &.round { + border-radius: 17px; + + toggle { + border-radius: calc(17px - var(---group-padding)); + + &.text-button, + &.image-text-button { + padding-left: calc(15px - var(---group-padding)); + padding-right: calc(15px - var(---group-padding)); + } + } + + separator { + &.horizontal { + margin: calc(9px - var(---group-padding)) 1px; + } + + &.vertical { + margin: 1px calc(9px - var(---group-padding)); + } + } + } + + &.flat { + ---group-padding: 0px; + background: none; + color: inherit; + box-shadow: none; + + > toggle { + @include focus-ring($transition: $button_transition); + + &:checked { + background-color: $selected_color; + color: inherit; + box-shadow: none; + + &:hover { + background-color: $selected_hover_color; + } + + &:active, &.keyboard-activating { + background-color: $selected_active_color; + } + + &:disabled { + background-color: color-mix(in srgb, $selected_color var(--disabled-opacity), transparent); + } + } + } + + > separator { + background: none; + } + } +} + +/************************* + * AdwInlineViewSwitcher * + *************************/ + +inline-view-switcher > toggle-group { + &.icons > toggle { + min-width: 34px; + } + + &.labels > toggle { + min-width: calc(18px + var(---group-padding) * 2); + + > widget > indicatorbin { + padding-left: calc(11px - var(---group-padding)); + padding-right: calc(11px - var(---group-padding)); + + > label { + padding: 0 6px; + } + + > indicator, > mask { + transform: translateY(2px); + } + } + } + + &.both > toggle { + min-width: calc(10px + var(---group-padding) * 2); + + > widget > box { + padding-left: calc(15px - var(---group-padding)); + padding-right: calc(15px - var(---group-padding)); + border-spacing: 6px; + } + } +}