Fixed libadwaita issues

This commit is contained in:
vinceliuice 2022-10-09 16:02:36 +08:00
parent a89a7a8e2a
commit f2ff437d5e
6 changed files with 301 additions and 74 deletions

View file

@ -62,7 +62,7 @@
// icon size and color // icon size and color
> StIcon { > StIcon {
icon-size: 32px; // 32px icon-size: 32px;
-st-icon-style: symbolic; -st-icon-style: symbolic;
} }

View file

@ -749,8 +749,9 @@ button {
&.image-button:not(.circular), &.popup:not(.circular) { &.image-button:not(.circular), &.popup:not(.circular) {
min-height: $menuitem_size - 4px; min-height: $menuitem_size - 4px;
padding-left: $container_padding; min-width: $menuitem_size - 4px;
padding-right: $container_padding; padding-left: $container_padding - 2px;
padding-right: $container_padding - 2px;
} }
&.text-button { &.text-button {
@ -1100,10 +1101,16 @@ button:link, button:visited {
spinbutton { spinbutton {
&:drop(active) { box-shadow: none; } &:drop(active) { box-shadow: none; }
button:active { color: $selected_fg_color; }
&:disabled { color: $disabled_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; @extend %Linked_entrys;
border: 1px solid $dark_borders_color; border: 1px solid $dark_borders_color;
@ -1127,7 +1134,10 @@ spinbutton {
min-width: $menuitem_size; min-width: $menuitem_size;
} }
button, entry { @extend %linked; min-height: $small_size; } button, entry {
@extend %linked;
min-height: $small_size;
}
&:dir(ltr) entry, &:dir(ltr) entry,
&:dir(rtl) button.up { border-radius: $bt_radius 0 0 $bt_radius; } &:dir(rtl) button.up { border-radius: $bt_radius 0 0 $bt_radius; }
@ -1477,7 +1487,7 @@ actionbar {
headerbar { headerbar {
min-height: $headerbar_size; min-height: $headerbar_size;
padding: 0 $container_padding + 10px; padding: 0 8px;
color: $header_fg; color: $header_fg;
background-color: $header_bg; background-color: $header_bg;
border-bottom: 1px solid $header_border; 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 { button.flat.toggle.popup {
min-width: $medium_size; min-width: $medium_size;
border: none; 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_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_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_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_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); $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; background-image: $switch_checked_disabled_image;
color: transparent; color: transparent;
} }
}
&:backdrop { &:backdrop {
background-color: transparent; background-color: transparent;
background-image: $switch_checked_backdrop_image; background-image: $switch_checked_backdrop_image;
color: transparent; color: transparent;
}
} }
slider { slider {
@ -3411,6 +3429,10 @@ scrolledwindow {
} }
} }
scrolledwindow.frame {
border: 1px solid $borders_color;
}
> box.vertical list.content.view { > box.vertical list.content.view {
border-top-left-radius: $wm_radius; border-top-left-radius: $wm_radius;
border-top-right-radius: $wm_radius; border-top-right-radius: $wm_radius;
@ -4355,7 +4377,13 @@ decoration {
// //
// Titlebuttons // Titlebuttons
// //
headerbar { headerbar {
> box.left,
> box.right { // Titlebutton space
padding: 0 10px;
}
button.titlebutton { button.titlebutton {
&.close, &.maximize, &.minimize { &.close, &.maximize, &.minimize {
min-width: 16px; min-width: 16px;

View file

@ -5,14 +5,18 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
/* #{$cakeisalie} */ /* #{$cakeisalie} */
%side_headerbar_left { %side_headerbar_left {
background-image: none; &, &:backdrop {
background-color: rgba($dark_sidebar_bg, 1); background-image: none;
border: none; background-color: rgba($dark_sidebar_bg, 1);
border: none;
}
} }
%side_headerbar_right { %side_headerbar_right {
background-image: none; &, &:backdrop {
background-color: rgba($base_color, 1); background-image: none;
background-color: rgba($base_color, 1);
}
} }
%side_searchbar { %side_searchbar {
@ -340,6 +344,7 @@ label {
} }
&:disabled { &:disabled {
opacity: 1;
color: $disabled_fg_color; color: $disabled_fg_color;
selection { color: mix($selected_fg_color, $selected_bg_color, 50%); } 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); @include button(flat-normal);
&:hover { @include button(flat-hover); } &:hover { @include button(flat-hover); }
&:active { @include button(flat-active); } &:active { @include button(flat-active); }
&:checked { @include button(flat-checked); } &:checked, &:selected { @include button(flat-checked); }
&:disabled { @include button(flat-insensitive); } &:disabled { @include button(flat-insensitive); }
} }
@ -1458,26 +1463,47 @@ button.link {
// Spinbuttons // Spinbuttons
// //
spinbutton { spinbutton {
background: none;
&:drop(active) { box-shadow: none; } &:drop(active) { box-shadow: none; }
button:active { color: $selected_fg_color; }
&:disabled { color: $disabled_fg_color; } &:disabled { color: $disabled_fg_color; }
button:active { color: $selected_fg_color; }
&:focus-within { outline: none; }
> text { > text {
padding: $container_padding; padding: $container_padding;
@extend %Linked_entrys; @extend %Linked_entrys;
border: 1px solid $dark_borders_color; border: 1px solid $dark_borders_color;
background-clip: padding-box;
> selection {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
&:focus-within { &:focus-within {
border-color: $entry_highlight; outline: none;
@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; } @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) { &:drop(active) {
border-color: $drop_target_color; outline: none;
@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; } @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), > button.up:dir(rtl):hover:not(:active),
> text + button:not(:active):hover { box-shadow: none; } > text + button:not(:active):hover { box-shadow: none; }
> text:focus-within + button { border-left-color: $entry_highlight; } @if $variant == 'light' {
> text:drop(active) + button { border-left-color: $drop_target_color; } > text:focus-within + button { border-left-color: $entry_highlight; }
> text:drop(active) + button { border-left-color: $drop_target_color; }
}
.osd & { .osd & {
&, &:focus-within, &:drop(active) { border-image: none; } &, &:focus-within, &:drop(active) { border-image: none; }
@ -1535,8 +1563,10 @@ spinbutton {
> button.up { border-radius: $bt_radius $bt_radius 0 0; } > button.up { border-radius: $bt_radius $bt_radius 0 0; }
> text:focus-within + button { border-top-color: $entry_highlight; } @if $variant == 'light' {
> text:drop(active) + button { border-top-color: $drop_target_color; } > text:focus-within + button { border-top-color: $entry_highlight; }
> text:drop(active) + button { border-top-color: $drop_target_color; }
}
} }
// Misc // Misc
@ -1822,6 +1852,7 @@ actionbar > revealer > box {
border-top: 1px solid $borders_color; border-top: 1px solid $borders_color;
background-color: darken($bg_color, 3%); background-color: darken($bg_color, 3%);
box-shadow: none; box-shadow: none;
color: $text_color;
entry, button { margin: 0; } entry, button { margin: 0; }
@ -1859,6 +1890,7 @@ actionbar > revealer > box {
} }
&:disabled { &:disabled {
opacity: 1;
@include entry(header-insensitive); @include entry(header-insensitive);
} }
@ -1922,6 +1954,7 @@ actionbar > revealer > box {
} }
&:disabled { &:disabled {
opacity: 1;
&, &:checked, &:active { @include button(header-insensitive); } &, &:checked, &:active { @include button(header-insensitive); }
} }
@ -1932,7 +1965,7 @@ actionbar > revealer > box {
headerbar { headerbar {
min-height: $headerbar_size; min-height: $headerbar_size;
padding: 0 $container_padding + 10px; padding: 0;
color: $header_fg; color: $header_fg;
background-color: $header_bg; background-color: $header_bg;
border-bottom: 1px solid $header_border; border-bottom: 1px solid $header_border;
@ -1947,21 +1980,28 @@ headerbar {
box-shadow: none; box-shadow: none;
} }
&.flat {
border: none;
background: none;
windowcontrols {
padding: 0 $container_padding / 2;
}
}
.title { .title {
padding-left: $container_padding * 2; padding: 2px $container_padding * 2;
padding-right: $container_padding * 2;
} }
.subtitle { .subtitle {
font-size: smaller; font-size: smaller;
padding-left: $container_padding * 2; padding: 2px $container_padding * 2;
padding-right: $container_padding * 2;
margin-top: -3px; margin-top: -3px;
@extend %dim-label; @extend %dim-label;
} }
> windowhandle > box { > windowhandle > box {
padding: 0; padding: 0 8px;
&, &,
> box.start, > box.start,
@ -2460,10 +2500,10 @@ popover {
padding: $container_padding; padding: $container_padding;
border-radius: $wm_radius; border-radius: $wm_radius;
> list, list,
> .view, .view,
> toolbar { > toolbar {
border-style: none; border: none;
background-color: transparent; background-color: transparent;
} }
@ -2476,6 +2516,12 @@ popover {
padding: 0; padding: 0;
} }
stack scrolledwindow:not(.view) > viewport {
border: 1px solid $borders_color;
border-radius: $bt_radius;
background-color: $base_color;
}
listview.view { listview.view {
padding: 0; padding: 0;
margin: 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_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_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_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_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); $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; background-image: $switch_checked_disabled_image;
color: transparent; color: transparent;
} }
}
&:backdrop { &:backdrop {
background-color: transparent; background-color: transparent;
background-image: $switch_checked_backdrop_image; background-image: $switch_checked_backdrop_image;
color: transparent; color: transparent;
}
} }
> slider { > slider {
@ -3808,22 +3854,17 @@ scrolledwindow {
} }
// Overflow indication, works similarly to the overshoot, the size if fixed tho. // Overflow indication, works similarly to the overshoot, the size if fixed tho.
// > undershoot { > undershoot {
// &.top { @include undershoot(top); } background: none;
// &.bottom { @include undershoot(bottom); } border: none;
// &.left { @include undershoot(left); } padding: 0;
// &.right { @include undershoot(right); } }
//
// padding: $wm_radius / 2;
// }
> junction { // the small square between two scrollbars > junction { // the small square between two scrollbars
border-style: solid none none solid; border: none;
border-width: 1px;
border-color: $borders_color;
background-color: $_scrollbar_bg_color; 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.circular { @extend %circular_button; }
button &.activatable {
&:focus, &:hover, &:active { background: none; }
}
&:selected { &:selected {
color: $fg_color; color: $fg_color;
background-color: if($variant == 'light', rgba(black, 0.15), rgba(white, 0.15)); background-color: if($variant == 'light', rgba(black, 0.15), rgba(white, 0.15));
@ -4886,8 +4931,10 @@ window {
// //
// Titlebuttons // Titlebuttons
// //
windowcontrols { windowcontrols {
border-spacing: $container_padding; border-spacing: 2px;
padding: 0 10px;
&:not(.empty) { &:not(.empty) {
&.start:dir(ltr), &.start:dir(ltr),
@ -4901,10 +4948,11 @@ windowcontrols {
} }
} }
button { headerbar.titlebar & {
margin: 0; border-spacing: $container_padding;
padding: 0; }
button {
&.close, &.maximize, &.minimize { &.close, &.maximize, &.minimize {
min-width: 16px; min-width: 16px;
min-height: 16px; min-height: 16px;
@ -4946,9 +4994,9 @@ windowcontrols {
} }
} }
// /********* //
// * Emoji * // Emoji
// *********/ //
popover.emoji-picker { popover.emoji-picker {
padding: 0; padding: 0;
border-radius: $wm_radius; border-radius: $wm_radius;
@ -4962,11 +5010,13 @@ popover.emoji-picker {
padding: 6px; padding: 6px;
border-spacing: 6px; border-spacing: 6px;
border-bottom: 1px solid $borders_color; border-bottom: 1px solid $borders_color;
entry { margin: 0; }
} }
.emoji-toolbar { .emoji-toolbar {
padding: $container_padding / 3; padding: $container_padding / 2;
border-spacing: $container_padding / 3; border-spacing: 0;
border-top: 1px solid $borders_color; border-top: 1px solid $borders_color;
} }

View file

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

View file

@ -196,13 +196,14 @@ viewswitcher {
&.wide { &.wide {
border-spacing: $container_padding / 2; border-spacing: $container_padding / 2;
button.toggle { margin: 8px 0; } button.toggle {
margin: 8px 0;
}
} }
&.narrow button.toggle { &.narrow button.toggle {
border-radius: 0; border-radius: 0;
margin: 0; margin: 0;
min-height: 0;
} }
button.toggle { button.toggle {

View file

@ -449,6 +449,7 @@ window.background.csd {
// //
// Inkscape // Inkscape
// //
toolbar#SubToolBox { toolbar#SubToolBox {
min-height: 36px; 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 > toolbar#ToolToolbar { // Left side toolbar
background-color: $bg_color; background-color: $bg_color;
border-right: 1px solid $borders_color; border-right: 1px solid $borders_color;
@ -508,14 +518,14 @@ box#SnapToolbox {
} }
box#DesktopStatusBar { box#DesktopStatusBar {
spinbutton, button.combo { spinbutton, button.combo, button.flat {
margin-top: 6px; margin-top: $container_padding * 1.5;
margin-bottom: 6px; margin-bottom: $container_padding * 1.5;
} }
} }
scrolledwindow#DialogNotebook { scrolledwindow#DialogNotebook {
> viewport.frame > notebook.frame { > viewport.frame {
border: 1px solid $borders_color; border: 1px solid $borders_color;
button.close-button { button.close-button {
@ -547,8 +557,8 @@ grid#CanvasGrid {
dialog.background { dialog.background {
> box.dialog-vbox > filechooser { > box.dialog-vbox > filechooser {
> actionbar > revealer > box > box > box > combobox { > actionbar > revealer > box > box > box > combobox {
margin-top: 24px; margin-top: 28px;
margin-bottom: 24px; margin-bottom: 28px;
} }
} }
} }