diff --git a/README.md b/README.md index 6509db4a..bc324897 100644 --- a/README.md +++ b/README.md @@ -71,6 +71,14 @@ Default ColorSchemes themes will follow the system style now ! (switch [light/da https://github.com/vinceliuice/Colloid-gtk-theme/assets/7604295/d5c24086-08bc-45a4-b4d9-124c02249216 +### Fix for Flatpak + +```sh +sudo flatpak override --filesystem=xdg-config/gtk-3.0 && sudo flatpak override --filesystem=xdg-config/gtk-4.0 +``` + +If you use flatpak apps, you can run this to fix theme issue + ### ColorSchemes ![colorschemes](colorschemes.png?raw=true) @@ -79,7 +87,7 @@ https://github.com/vinceliuice/Colloid-gtk-theme/assets/7604295/d5c24086-08bc-45 ![tweaks](tweaks.png?raw=true) -### Flatpak Installation +### Flatpak Installation (gtk-3.0) Automatically install your host GTK+ theme as a Flatpak. Use this: diff --git a/src/sass/libadwaita/_apps.scss b/src/sass/libadwaita/_apps.scss index 2cdce4ca..2eac7b86 100644 --- a/src/sass/libadwaita/_apps.scss +++ b/src/sass/libadwaita/_apps.scss @@ -1,5 +1,6 @@ @import 'apps/builder'; @import 'apps/calculator'; +@import 'apps/control-center'; @import 'apps/editor'; @import 'apps/nautilus'; @import 'apps/weather'; diff --git a/src/sass/libadwaita/_colors.scss b/src/sass/libadwaita/_colors.scss index e51ef704..49c29d76 100644 --- a/src/sass/libadwaita/_colors.scss +++ b/src/sass/libadwaita/_colors.scss @@ -130,4 +130,73 @@ $focus_border_color: gtkalpha($accent_color, $focus_border_opacity); $dim_label_opacity: 0.55; $dimmer_opacity: 0.3; $disabled_opacity: 0.45; -$strong_disabled_opacity: 0.3; \ No newline at end of file +$strong_disabled_opacity: 0.3; + +:root { + --accent-blue: #3584e4; + --accent-teal: #2190a4; + --accent-green: #3a944a; + --accent-yellow: #c88800; + --accent-orange: #ed5b00; + --accent-red: #e62d42; + --accent-pink: #d56199; + --accent-purple: #9141ac; + --accent-slate: #6f8396; + + --accent-bg-color: @accent_bg_color; + --accent-fg-color: @accent_fg_color; + + --destructive-bg-color: @destructive_bg_color; + --destructive-fg-color: @destructive_fg_color; + + --success-bg-color: @success_bg_color; + --success-fg-color: @success_fg_color; + + --warning-bg-color: @warning_bg_color; + --warning-fg-color: @warning_fg_color; + + --error-bg-color: @error_bg_color; + --error-fg-color: @error_fg_color; + + --window-bg-color: @window_bg_color; + --window-fg-color: @window_fg_color; + + --view-bg-color: @view_bg_color; + --view-fg-color: @view_fg_color; + + --headerbar-bg-color: @headerbar_bg_color; + --headerbar-fg-color: @headerbar_fg_color; + --headerbar-border-color: @headerbar_border_color; + --headerbar-backdrop-color: @headerbar_backdrop_color; + --headerbar-shade-color: @headerbar_shade_color; + --headerbar-darker-shade-color: @headerbar_darker_shade_color; + + --sidebar-bg-color: @sidebar_bg_color; + --sidebar-fg-color: @sidebar_fg_color; + --sidebar-backdrop-color: @sidebar_backdrop_color; + --sidebar-border-color: @sidebar_border_color; + --sidebar-shade-color: @sidebar_shade_color; + + --secondary-sidebar-bg-color: @secondary_sidebar_bg_color; + --secondary-sidebar-fg-color: @secondary_sidebar_fg_color; + --secondary-sidebar-backdrop-color: @secondary_sidebar_backdrop_color; + --secondary-sidebar-border-color: @secondary_sidebar_border_color; + --secondary-sidebar-shade-color: @secondary_sidebar_shade_color; + + --card-bg-color: @card_bg_color; + --card-fg-color: @card_fg_color; + --card-shade-color: @card_shade_color; + + --dialog-bg-color: @dialog_bg_color; + --dialog-fg-color: @dialog_fg_color; + + --popover-bg-color: @popover_bg_color; + --popover-fg-color: @popover_fg_color; + --popover-shade-color: @popover_shade_color; + + --thumbnail-bg-color: @thumbnail_bg_color; + --thumbnail-fg-color: @thumbnail_fg_color; + + --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 new file mode 100644 index 00000000..4c295419 --- /dev/null +++ b/src/sass/libadwaita/apps/_control-center.scss @@ -0,0 +1,84 @@ +preferencesgroup > box { + button.background-preview-button.toggle { + padding: 0; + background: none; + box-shadow: none; + outline-color: transparent; + outline-width: 3px; + outline-offset: $base_padding / 2; + outline-style: solid; + + &, > background-preview { + border-radius: $button_radius; + } + + &:hover { + outline-color: $hover_color; + } + + &:active { + outline-color: $active_color; + } + + &:checked { + outline-color: $accent_color; + } + } + + .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); + } + } +} diff --git a/src/sass/libadwaita/apps/_nautilus.scss b/src/sass/libadwaita/apps/_nautilus.scss index ae048502..fb114cb2 100644 --- a/src/sass/libadwaita/apps/_nautilus.scss +++ b/src/sass/libadwaita/apps/_nautilus.scss @@ -43,4 +43,16 @@ margin: 0; border-radius: $button_radius; @extend %button_basic_flat; +} + +list.operations-list { + background: none; + + > row { + &, &:hover, &:active, &:focus, &:selected { + background: none; + transition: none; + animation: none; + } + } } \ No newline at end of file diff --git a/src/sass/libadwaita/widgets/_buttons.scss b/src/sass/libadwaita/widgets/_buttons.scss index 695b8498..ba2a9b73 100644 --- a/src/sass/libadwaita/widgets/_buttons.scss +++ b/src/sass/libadwaita/widgets/_buttons.scss @@ -306,7 +306,7 @@ button { @at-root %pill_button, &.pill { - padding: 10px 32px; + padding: $base_padding * 1.5 $medium_size - 4px; border-radius: $circular_radius; } diff --git a/src/sass/libadwaita/widgets/_file-chooser.scss b/src/sass/libadwaita/widgets/_file-chooser.scss index e3247533..9274e497 100644 --- a/src/sass/libadwaita/widgets/_file-chooser.scss +++ b/src/sass/libadwaita/widgets/_file-chooser.scss @@ -231,3 +231,19 @@ window.filechooser headerbar box.start + box.vertical { margin-bottom: -$base_padding; min-height: 12px; } + + +.fr-sidebar { + > row { + padding: $base_padding $base_padding * 1.5; + + &:not(.fr-sidebar-row) { + &, &:hover, &:active, &:focus, &:selected, + &:active:hover, &:focus:hover, &:selected:hover { + background: none; + animation: none; + transition: none; + } + } + } +} \ No newline at end of file diff --git a/src/sass/libadwaita/widgets/_lists.scss b/src/sass/libadwaita/widgets/_lists.scss index 6c942b4a..50f77017 100644 --- a/src/sass/libadwaita/widgets/_lists.scss +++ b/src/sass/libadwaita/widgets/_lists.scss @@ -28,6 +28,10 @@ list { } } +button listview.view { + background: none; +} + list.frame { border-radius: $button_radius; } listview > header { diff --git a/src/sass/libadwaita/widgets/_message-dialog.scss b/src/sass/libadwaita/widgets/_message-dialog.scss index 7d82f715..1dcf13b8 100644 --- a/src/sass/libadwaita/widgets/_message-dialog.scss +++ b/src/sass/libadwaita/widgets/_message-dialog.scss @@ -7,58 +7,46 @@ window.dialog.message { min-height: 20px; background: none; box-shadow: none; - border-style: none; - border-top-left-radius: 7px; - border-top-right-radius: 7px; + border: none; + } + + .dialog-action-area { + border: none; + box-shadow: inset 0 1px $border_color; + margin: 0; + border-spacing: $base_padding; + padding: $base_padding; + + > button { + @extend %button_basic_flat; + padding: $base_padding + 4px $base_padding + 8px; // labels are not vertically centered on message dialog, this is a workaround + border-radius: $button_radius; + border: none; + background-clip: padding-box; + + &.suggested-action { + color: $accent_color; + } + + &.destructive-action { + color: $destructive_color; + } + + &.default { + &, &:focus:not(:hover):not(:active) { color: $success_color; } + } + } } box.dialog-vbox.vertical { - margin-top: 6px; - border-spacing: 24px; + margin-top: $base_padding; + border-spacing: $small_size; > box > box > box > label.title { font-weight: 800; font-size: 15pt; } } - - &.csd { - // bigger radius for better antialiasing - border-bottom-left-radius: $window_radius+1; - border-bottom-right-radius: $window_radius+1; - - .dialog-action-area { - border-top: 1px solid $border_color; - margin: 0; - border-spacing: 0; - - > button { - @extend %button_basic_flat; - padding: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround - border-radius: 0; - border: none; - background-clip: padding-box; - border-left: 1px solid $border_color; - - &:first-child { - border-bottom-left-radius: $window_radius+1; - border-left: none; - } - - &:last-child { - border-bottom-right-radius: $window_radius+1; - } - - &.suggested-action { - color: $accent_color; - } - - &.destructive-action { - color: $destructive_color; - } - } - } - } } /******************** @@ -74,81 +62,86 @@ window.dialog-window.alert { dialog-host > dialog.alert.floating sheet, window.dialog-window.alert { - border-radius: $window_radius+1; - outline: none; -} + border-radius: $window_radius + $base_padding; -window.messagedialog, -dialog.alert { - .message-area { - padding: 24px 30px; - border-spacing: 24px; - - &.has-heading.has-body { - border-spacing: 10px; - } - } - - .response-area > button { - padding: 10px 14px; - border-radius: 0; - - &.suggested { - color: $accent_color; - } - - &.destructive { - color: $destructive_color; - } - } - - .response-area { - &:not(.compact) > button { - margin-top: -1px; - margin-right: -1px; - margin-left: -1px; - - &:first-child:dir(ltr), - &:last-child:dir(rtl) { - margin-left: 0; - } - - &:last-child:dir(ltr), - &:first-child:dir(rtl) { - margin-right: 0; - } - } - - &.compact > button { - margin-top: -1px; - margin-bottom: -1px; - - &:first-child { - margin-bottom: 0; - } - } + @if $rimless == 'true' { + outline: 0 none transparent; + box-shadow: $shadow-z16, + 0 0 36px transparent; + } @else { + outline-offset: -1px; + outline: 1px solid $window_outline_color; + box-shadow: $shadow-z16, + 0 0 36px transparent, + 0 0 0 1px $headerbar_darker_shade_color; } } window.messagedialog, dialog.alert.floating { - .response-area { - &:not(.compact) > button { - &:first-child:dir(ltr), - &:last-child:dir(rtl) { - border-bottom-left-radius: $window_radius+1; - } + .message-area { + padding-top: $medium_size - 4px; + padding-bottom: $base_padding * 2; + border-spacing: $small_size; - &:last-child:dir(ltr), - &:first-child:dir(rtl) { - border-bottom-right-radius: $window_radius+1; + &.has-heading.has-body { + border-spacing: $base_padding + 4px; + + > .child { + margin-top: $base_padding + 2px; } } - &.compact > button { - &:first-child { - border-bottom-left-radius: $window_radius+1; - border-bottom-right-radius: $window_radius+1; + > .heading-bin, > .body, > .child { + padding-left: $small_size; + padding-right: $small_size; + } + } + + .response-area { + padding: $base_padding * 2; + padding-top: $base_padding * 3; + border-spacing: $base_padding * 2; + + > button { + min-height: $small_size; + min-width: $large_size + 12px; + padding: $base_padding + 4px $base_padding + 8px; + border-radius: $button_radius; + margin: 0; + + &.suggested { + color: $accent_color; + } + + &.destructive { + color: $destructive_color; + } + } + } + + &.short { + .message-area { + padding-top: $small_size; + border-spacing: $base_padding * 2 + 6px; + + > .heading-bin, > .body, > .child { + padding-left: $base_padding * 2 + 6px; + padding-right: $base_padding * 2 + 6px; + } + + &.has-heading.has-body { + border-spacing: $base_padding; + } + } + + .response-area { + padding: $base_padding * 2 + 6px; + padding-top: $base_padding * 1.5; + + > button { + min-width: 0; + padding: $base_padding + 2px $base_padding * 2 + 4px; } } } diff --git a/src/sass/libadwaita/widgets/_popovers.scss b/src/sass/libadwaita/widgets/_popovers.scss index c38f85b5..a7bc861b 100644 --- a/src/sass/libadwaita/widgets/_popovers.scss +++ b/src/sass/libadwaita/widgets/_popovers.scss @@ -34,8 +34,9 @@ popover { > list, > .view, - > toolbar { - border-style: none; + > toolbar, + > scrolledwindow > viewport > list { + border: none; background-color: transparent; } diff --git a/src/sass/libadwaita/widgets/_toolbars.scss b/src/sass/libadwaita/widgets/_toolbars.scss index 49e5e5ae..ff597b27 100644 --- a/src/sass/libadwaita/widgets/_toolbars.scss +++ b/src/sass/libadwaita/widgets/_toolbars.scss @@ -291,6 +291,10 @@ toolbarview { transition: filter $backdrop_transition; } } + + button.pill { + padding: ($medium_size - 24px) / 2 $small_size; + } } > .top-bar {