From f2ff437d5efa8cf01267eeed1298079c977b80c1 Mon Sep 17 00:00:00 2001 From: vinceliuice Date: Sun, 9 Oct 2022 16:02:36 +0800 Subject: [PATCH] Fixed libadwaita issues --- .../gnome-shell/common/_message-list.scss | 2 +- src/sass/gtk/_common-3.0.scss | 52 ++++-- src/sass/gtk/_common-4.0.scss | 156 ++++++++++++------ src/sass/gtk/apps/_gnome-40.0.scss | 138 ++++++++++++++++ src/sass/gtk/apps/_libadwaita.scss | 5 +- src/sass/gtk/apps/_misc.scss | 22 ++- 6 files changed, 301 insertions(+), 74 deletions(-) diff --git a/src/sass/gnome-shell/common/_message-list.scss b/src/sass/gnome-shell/common/_message-list.scss index bbba108..3119c31 100644 --- a/src/sass/gnome-shell/common/_message-list.scss +++ b/src/sass/gnome-shell/common/_message-list.scss @@ -62,7 +62,7 @@ // icon size and color > StIcon { - icon-size: 32px; // 32px + icon-size: 32px; -st-icon-style: symbolic; } diff --git a/src/sass/gtk/_common-3.0.scss b/src/sass/gtk/_common-3.0.scss index 6a790ef..ba7b7e0 100644 --- a/src/sass/gtk/_common-3.0.scss +++ b/src/sass/gtk/_common-3.0.scss @@ -749,8 +749,9 @@ button { &.image-button:not(.circular), &.popup:not(.circular) { min-height: $menuitem_size - 4px; - padding-left: $container_padding; - padding-right: $container_padding; + min-width: $menuitem_size - 4px; + padding-left: $container_padding - 2px; + padding-right: $container_padding - 2px; } &.text-button { @@ -1100,10 +1101,16 @@ button:link, button:visited { spinbutton { &:drop(active) { box-shadow: none; } - button:active { color: $selected_fg_color; } &:disabled { color: $disabled_fg_color; } - entry { + > button { + min-width: 24px; + padding: 0 $container_padding / 2; + + &:active { color: $selected_fg_color; } + } + + > entry { @extend %Linked_entrys; border: 1px solid $dark_borders_color; @@ -1127,7 +1134,10 @@ spinbutton { min-width: $menuitem_size; } - button, entry { @extend %linked; min-height: $small_size; } + button, entry { + @extend %linked; + min-height: $small_size; + } &:dir(ltr) entry, &:dir(rtl) button.up { border-radius: $bt_radius 0 0 $bt_radius; } @@ -1477,7 +1487,7 @@ actionbar { headerbar { min-height: $headerbar_size; - padding: 0 $container_padding + 10px; + padding: 0 8px; color: $header_fg; background-color: $header_bg; border-bottom: 1px solid $header_border; @@ -2487,6 +2497,14 @@ notebook { } } + button.image-button { + @extend %flat_button; + + @if $monterey == 'false' { + border-radius: 0; + } + } + button.flat.toggle.popup { min-width: $medium_size; border: none; @@ -2737,7 +2755,7 @@ scrollbar { $switch_image: linear-gradient(0deg, rgba($fg_color, 0.25) 0%, rgba($fg_color, 0.35) 100%); $switch_disabled_image: linear-gradient(0deg, rgba($fg_color, 0.1) 0%, rgba($fg_color, 0.15) 100%); $switch_checked_image: linear-gradient(0deg, lighten($selected_bg_color, 10%) 0%, $selected_bg_color 100%); -$switch_checked_backdrop_image: linear-gradient(0deg, lighten($bg_color, 15%) 0%, lighten($bg_color, 5%) 100%); +$switch_checked_backdrop_image: linear-gradient(0deg, rgba($fg_color, 0.45) 0%, rgba($fg_color, 0.55) 100%); $switch_checked_disabled_image: linear-gradient(0deg, lighten($selected_bg_color, 35%) 0%, lighten($selected_bg_color, 25%) 100%); $switch_animation: switch_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1); @@ -2786,12 +2804,12 @@ switch { background-image: $switch_checked_disabled_image; color: transparent; } - } - &:backdrop { - background-color: transparent; - background-image: $switch_checked_backdrop_image; - color: transparent; + &:backdrop { + background-color: transparent; + background-image: $switch_checked_backdrop_image; + color: transparent; + } } slider { @@ -3411,6 +3429,10 @@ scrolledwindow { } } + scrolledwindow.frame { + border: 1px solid $borders_color; + } + > box.vertical list.content.view { border-top-left-radius: $wm_radius; border-top-right-radius: $wm_radius; @@ -4355,7 +4377,13 @@ decoration { // // Titlebuttons // + headerbar { + > box.left, + > box.right { // Titlebutton space + padding: 0 10px; + } + button.titlebutton { &.close, &.maximize, &.minimize { min-width: 16px; diff --git a/src/sass/gtk/_common-4.0.scss b/src/sass/gtk/_common-4.0.scss index d5ae341..8765af2 100644 --- a/src/sass/gtk/_common-4.0.scss +++ b/src/sass/gtk/_common-4.0.scss @@ -5,14 +5,18 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT"; /* #{$cakeisalie} */ %side_headerbar_left { - background-image: none; - background-color: rgba($dark_sidebar_bg, 1); - border: none; + &, &:backdrop { + background-image: none; + background-color: rgba($dark_sidebar_bg, 1); + border: none; + } } %side_headerbar_right { - background-image: none; - background-color: rgba($base_color, 1); + &, &:backdrop { + background-image: none; + background-color: rgba($base_color, 1); + } } %side_searchbar { @@ -340,6 +344,7 @@ label { } &:disabled { + opacity: 1; color: $disabled_fg_color; selection { color: mix($selected_fg_color, $selected_bg_color, 50%); } } @@ -724,7 +729,7 @@ $_dot_color: if($variant=='light', $selected_bg_color, @include button(flat-normal); &:hover { @include button(flat-hover); } &:active { @include button(flat-active); } - &:checked { @include button(flat-checked); } + &:checked, &:selected { @include button(flat-checked); } &:disabled { @include button(flat-insensitive); } } @@ -1458,26 +1463,47 @@ button.link { // Spinbuttons // spinbutton { + background: none; + &:drop(active) { box-shadow: none; } - button:active { color: $selected_fg_color; } &:disabled { color: $disabled_fg_color; } + button:active { color: $selected_fg_color; } + + &:focus-within { outline: none; } + > text { padding: $container_padding; @extend %Linked_entrys; border: 1px solid $dark_borders_color; + background-clip: padding-box; + + > selection { + background-color: $selected_bg_color; + color: $selected_fg_color; + } &:focus-within { - border-color: $entry_highlight; - @if $variant == 'dark' { box-shadow: inset 0 0 0 1px $entry_highlight; } - @if $variant == 'light' { box-shadow: 0 1px 1px 0 transparent, inset 0 0 0 1px $entry_highlight; } + outline: none; + + @if $variant == 'dark' { box-shadow: inset 0 0 0 2px $entry_highlight; } + + @if $variant == 'light' { + border-color: $entry_highlight; + box-shadow: 0 1px 1px 0 transparent, inset 0 0 0 1px $entry_highlight; + } } &:drop(active) { - border-color: $drop_target_color; - @if $variant == 'dark' { box-shadow: inset 0 0 0 1px $drop_target_color; } - @if $variant == 'light' { box-shadow: 0 1px 1px 0 transparent, inset 0 0 0 1px $drop_target_color; } + outline: none; + + @if $variant == 'dark' { box-shadow: inset 0 0 0 2px $drop_target_color; } + + @if $variant == 'light' { + border-color: $drop_target_color; + box-shadow: 0 1px 1px 0 transparent, inset 0 0 0 1px $drop_target_color; + } } } @@ -1508,8 +1534,10 @@ spinbutton { > button.up:dir(rtl):hover:not(:active), > text + button:not(:active):hover { box-shadow: none; } - > text:focus-within + button { border-left-color: $entry_highlight; } - > text:drop(active) + button { border-left-color: $drop_target_color; } + @if $variant == 'light' { + > text:focus-within + button { border-left-color: $entry_highlight; } + > text:drop(active) + button { border-left-color: $drop_target_color; } + } .osd & { &, &:focus-within, &:drop(active) { border-image: none; } @@ -1535,8 +1563,10 @@ spinbutton { > button.up { border-radius: $bt_radius $bt_radius 0 0; } - > text:focus-within + button { border-top-color: $entry_highlight; } - > text:drop(active) + button { border-top-color: $drop_target_color; } + @if $variant == 'light' { + > text:focus-within + button { border-top-color: $entry_highlight; } + > text:drop(active) + button { border-top-color: $drop_target_color; } + } } // Misc @@ -1822,6 +1852,7 @@ actionbar > revealer > box { border-top: 1px solid $borders_color; background-color: darken($bg_color, 3%); box-shadow: none; + color: $text_color; entry, button { margin: 0; } @@ -1859,6 +1890,7 @@ actionbar > revealer > box { } &:disabled { + opacity: 1; @include entry(header-insensitive); } @@ -1922,6 +1954,7 @@ actionbar > revealer > box { } &:disabled { + opacity: 1; &, &:checked, &:active { @include button(header-insensitive); } } @@ -1932,7 +1965,7 @@ actionbar > revealer > box { headerbar { min-height: $headerbar_size; - padding: 0 $container_padding + 10px; + padding: 0; color: $header_fg; background-color: $header_bg; border-bottom: 1px solid $header_border; @@ -1947,21 +1980,28 @@ headerbar { box-shadow: none; } + &.flat { + border: none; + background: none; + + windowcontrols { + padding: 0 $container_padding / 2; + } + } + .title { - padding-left: $container_padding * 2; - padding-right: $container_padding * 2; + padding: 2px $container_padding * 2; } .subtitle { font-size: smaller; - padding-left: $container_padding * 2; - padding-right: $container_padding * 2; + padding: 2px $container_padding * 2; margin-top: -3px; @extend %dim-label; } > windowhandle > box { - padding: 0; + padding: 0 8px; &, > box.start, @@ -2460,10 +2500,10 @@ popover { padding: $container_padding; border-radius: $wm_radius; - > list, - > .view, + list, + .view, > toolbar { - border-style: none; + border: none; background-color: transparent; } @@ -2476,6 +2516,12 @@ popover { padding: 0; } + stack scrolledwindow:not(.view) > viewport { + border: 1px solid $borders_color; + border-radius: $bt_radius; + background-color: $base_color; + } + listview.view { padding: 0; margin: 0; @@ -3073,7 +3119,7 @@ scrollbar { $switch_image: linear-gradient(0deg, rgba($fg_color, 0.25) 0%, rgba($fg_color, 0.35) 100%); $switch_disabled_image: linear-gradient(0deg, rgba($fg_color, 0.1) 0%, rgba($fg_color, 0.15) 100%); $switch_checked_image: linear-gradient(0deg, lighten($selected_bg_color, 10%) 0%, $selected_bg_color 100%); -$switch_checked_backdrop_image: linear-gradient(0deg, lighten($bg_color, 15%) 0%, lighten($bg_color, 5%) 100%); +$switch_checked_backdrop_image: linear-gradient(0deg, rgba($fg_color, 0.45) 0%, rgba($fg_color, 0.55) 100%); $switch_checked_disabled_image: linear-gradient(0deg, lighten($selected_bg_color, 35%) 0%, lighten($selected_bg_color, 25%) 100%); $switch_animation: switch_ripple_effect 0.3s cubic-bezier(0, 0, 0.2, 1); @@ -3123,12 +3169,12 @@ switch { background-image: $switch_checked_disabled_image; color: transparent; } - } - &:backdrop { - background-color: transparent; - background-image: $switch_checked_backdrop_image; - color: transparent; + &:backdrop { + background-color: transparent; + background-image: $switch_checked_backdrop_image; + color: transparent; + } } > slider { @@ -3808,22 +3854,17 @@ scrolledwindow { } // Overflow indication, works similarly to the overshoot, the size if fixed tho. - // > undershoot { - // &.top { @include undershoot(top); } - // &.bottom { @include undershoot(bottom); } - // &.left { @include undershoot(left); } - // &.right { @include undershoot(right); } - // - // padding: $wm_radius / 2; - // } + > undershoot { + background: none; + border: none; + padding: 0; + } > junction { // the small square between two scrollbars - border-style: solid none none solid; - border-width: 1px; - border-color: $borders_color; + border: none; background-color: $_scrollbar_bg_color; - &:dir(rtl) { border-style: solid solid none none; } + // &:dir(rtl) { border-style: solid solid none none; } } } @@ -3958,6 +3999,10 @@ row { button.circular { @extend %circular_button; } + button &.activatable { + &:focus, &:hover, &:active { background: none; } + } + &:selected { color: $fg_color; background-color: if($variant == 'light', rgba(black, 0.15), rgba(white, 0.15)); @@ -4886,8 +4931,10 @@ window { // // Titlebuttons // + windowcontrols { - border-spacing: $container_padding; + border-spacing: 2px; + padding: 0 10px; &:not(.empty) { &.start:dir(ltr), @@ -4901,10 +4948,11 @@ windowcontrols { } } - button { - margin: 0; - padding: 0; + headerbar.titlebar & { + border-spacing: $container_padding; + } + button { &.close, &.maximize, &.minimize { min-width: 16px; min-height: 16px; @@ -4946,9 +4994,9 @@ windowcontrols { } } -// /********* -// * Emoji * -// *********/ +// +// Emoji +// popover.emoji-picker { padding: 0; border-radius: $wm_radius; @@ -4962,11 +5010,13 @@ popover.emoji-picker { padding: 6px; border-spacing: 6px; border-bottom: 1px solid $borders_color; + + entry { margin: 0; } } .emoji-toolbar { - padding: $container_padding / 3; - border-spacing: $container_padding / 3; + padding: $container_padding / 2; + border-spacing: 0; border-top: 1px solid $borders_color; } diff --git a/src/sass/gtk/apps/_gnome-40.0.scss b/src/sass/gtk/apps/_gnome-40.0.scss index a961fde..d126750 100644 --- a/src/sass/gtk/apps/_gnome-40.0.scss +++ b/src/sass/gtk/apps/_gnome-40.0.scss @@ -118,3 +118,141 @@ window.background.csd { } } } + + +// +// Gnome Calendar / Gnome Contacts +// + +window.background { + > contents > toastoverlay > leaflet { + > box { + background-color: $base_color; + + > headerbar { + &, &:backdrop { + background: none; + border: none; + } + } + + + separator { + @extend %side_separator; + + + box { + background-color: $dark_sidebar_bg; + } + } + + > .view, list:not(.boxed-list) { + background-color: transparent; + } + + list > row textview { + padding: $container_padding; + border-left: 1px solid $borders_color; + + &, & > text { + background: none; + } + } + } + + .current-week { + background-color: $fill_color; + } + + button.circular.day { + border: none; + box-shadow: none; + @extend %flat_button; + } + + datechooser navigator > button.flat.pill { + padding: 0 $container_padding * 2; + min-height: $menuitem_size; + min-width: $menuitem_size; + } + } + + &.maximized, &.tiled { + > contents > toastoverlay > leaflet { + > box { + > headerbar { + &, &:backdrop { + background: none; + border: none; + } + } + } + } + } +} + +menubutton.flat.popup.sources-button { + margin: 0; + + > button { + margin: 0; + border-radius: 0; + padding: 0 $container_padding * 2; + + .title { + font-size: small; + font-weight: normal; + } + + .title, .subtitle { + padding: 2px 0 2px $container_padding; + } + + image.calendar-color-image { + -gtk-icon-size: 8px; + } + } +} + +// Contacts +.contacts-editor-address { + > entry.flat { + &:not(:last-child) { + box-shadow: inset 0 -1px $borders_color; + } + + &:first-child { + border-radius: $bt_radius $bt_radius 0 0; + } + + &:last-child { + border-radius: 0 0 $bt_radius $bt_radius; + } + } +} + +// +// Calculator +// + +.history-view { background-color: $base_color; } + +.card { + &.display-container { + border: 1px solid $borders_color; + } + + #displayitem { + border-top: 1px solid $borders_color; + } + + .small & { + border-radius: 0; + + &.forecast-card { + border-width: 1px 0; + } + + &.display-container { + border-width: 0 0 1px 0; + } + } +} \ No newline at end of file diff --git a/src/sass/gtk/apps/_libadwaita.scss b/src/sass/gtk/apps/_libadwaita.scss index d02fa70..1fce50a 100644 --- a/src/sass/gtk/apps/_libadwaita.scss +++ b/src/sass/gtk/apps/_libadwaita.scss @@ -196,13 +196,14 @@ viewswitcher { &.wide { border-spacing: $container_padding / 2; - button.toggle { margin: 8px 0; } + button.toggle { + margin: 8px 0; + } } &.narrow button.toggle { border-radius: 0; margin: 0; - min-height: 0; } button.toggle { diff --git a/src/sass/gtk/apps/_misc.scss b/src/sass/gtk/apps/_misc.scss index e668b62..4440634 100644 --- a/src/sass/gtk/apps/_misc.scss +++ b/src/sass/gtk/apps/_misc.scss @@ -449,6 +449,7 @@ window.background.csd { // // Inkscape // + toolbar#SubToolBox { min-height: 36px; @@ -480,6 +481,15 @@ widget#ToolboxCommon { } } + > #CommandsToolbox { + border-bottom: 1px solid $borders_color; + + > toolbar { + background: none; + border: none; + } + } + > toolbar#ToolToolbar { // Left side toolbar background-color: $bg_color; border-right: 1px solid $borders_color; @@ -508,14 +518,14 @@ box#SnapToolbox { } box#DesktopStatusBar { - spinbutton, button.combo { - margin-top: 6px; - margin-bottom: 6px; + spinbutton, button.combo, button.flat { + margin-top: $container_padding * 1.5; + margin-bottom: $container_padding * 1.5; } } scrolledwindow#DialogNotebook { - > viewport.frame > notebook.frame { + > viewport.frame { border: 1px solid $borders_color; button.close-button { @@ -547,8 +557,8 @@ grid#CanvasGrid { dialog.background { > box.dialog-vbox > filechooser { > actionbar > revealer > box > box > box > combobox { - margin-top: 24px; - margin-bottom: 24px; + margin-top: 28px; + margin-bottom: 28px; } } }