Chillcraft/Colloid-gtk-theme
3
0
Fork 0
mirror of https://github.com/vinceliuice/Colloid-gtk-theme.git synced 2025-09-16 05:18:38 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fixed #239, Fixed #240

Browse Source
This commit is contained in:
vinceliuice
2025-07-27 12:07:22 +08:00
parent 15f9b99ef4
commit a71fcfceec
4 changed files with 160 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/sass/libadwaita/apps/_nautilus.scss
View File

@@ -72,9 +72,9 @@
margin: $base_padding 0; margin: $base_padding 0;
> button.image-button { > button.image-button {
min-width: 24px; min-width: 16px;
min-height: 24px; min-height: 16px;
padding: $medium_size / 2 - $base_padding - 12px; padding: $base_padding / 2;
} }
} }
} }

16
src/sass/libadwaita/widgets/_header-bar.scss
View File

@@ -164,6 +164,22 @@ leaflet:first-child > headerbar {
} }
} }
windowcontrols > button {
@if $window_button =='mac' {
&.minimize, &.maximize, &.close {
&:backdrop {
> image {
background-color: gtkalpha($window_fg_color, 0.3);
}
&:hover, &:active {
color: gtkalpha($window_fg_color, 0.45);
}
}
}
}
}
.maximized &, .maximized &,
.fullscreen &, .fullscreen &,
.tiled &, .tiled &,

90
src/sass/libadwaita/widgets/_toggle-group.scss
View File

@@ -7,30 +7,28 @@ $toggle_transition: color 200ms $ease-out-quad,
box-shadow 200ms $ease-out-quad; box-shadow 200ms $ease-out-quad;
toggle-group { toggle-group {
---group-padding: 3px;
background: $button_color; background: $button_color;
border-radius: $button_radius; border-radius: $button_radius + $base_padding / 2;
padding: var(---group-padding); padding: $base_padding / 2;
&:disabled { &:disabled {
background-color: color-mix(in srgb, $button_color var(--disabled-opacity), transparent); background-color: color-mix(in srgb, $button_color 45%, transparent);
} }
> toggle { > toggle {
border-radius: calc(#{$button_radius} - var(---group-padding); border-radius: $button_radius;
font-weight: bold; font-weight: bold;
min-width: 34px; min-width: 34px;
min-height: calc(34px - var(---group-padding) * 2); min-height: 34px - $base_padding;
&.image-button > image:disabled { &.image-button > image:disabled {
filter: opacity($strong_disabled_opacity); filter: opacity($strong_disabled_opacity);
} }
&.text-button { &.text-button {
min-width: calc(18px + var(---group-padding) * 2); min-width: 18px - $base_padding;
padding-left: calc(11px - var(---group-padding)); padding-left: 11px - $base_padding / 2;
padding-right: calc(11px - var(---group-padding)); padding-right: 11px - $base_padding / 2;
> label:disabled { > label:disabled {
filter: opacity($strong_disabled_opacity); filter: opacity($strong_disabled_opacity);
@@ -38,9 +36,9 @@ toggle-group {
} }
&.image-text-button { &.image-text-button {
min-width: calc(10px + var(---group-padding) * 2); min-width: 10px + $base_padding;
padding-left: calc(11px - var(---group-padding)); padding-left: 11px - $base_padding / 2;
padding-right: calc(11px - var(---group-padding)); padding-right: 11px - $base_padding / 2;
> buttoncontent > box > label { > buttoncontent > box > label {
padding: 0; padding: 0;
@@ -63,13 +61,12 @@ toggle-group {
} }
&:checked { &:checked {
background-color: var(--active-toggle-bg-color); background-color: $selected_color;
color: var(--active-toggle-fg-color); color: $card_fg_color;
box-shadow: 0 1px 3px 1px RGB(0 0 6 / 7%), box-shadow: none;
0 2px 6px 2px RGB(0 0 6 / 3%);
&:disabled { &:disabled {
background-color: color-mix(in srgb, var(--active-toggle-bg-color) var(--disabled-opacity), transparent); background-color: $hover_color;
box-shadow: none; box-shadow: none;
} }
} }
@@ -81,24 +78,22 @@ toggle-group {
--active-toggle-fg-color: rgb(0 0 0 / 80%); --active-toggle-fg-color: rgb(0 0 0 / 80%);
&:not(.flat) > toggle:checked { &: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); @include focus-ring($transition: $toggle_transition, $outer: true, $offset: 1px);
&:focus:focus-visible { &:focus:focus-visible {
outline-color: color-mix(in srgb, RGB(255 255 255 / 75%) $focus_border_opacity, transparent); outline-color: color-mix(in srgb, #ffffff 25%, transparent);
} }
box-shadow: 0 1px 3px 1px RGB(0 0 6 / 7%), &, &:hover, &:active, &.keyboard-activating {
0 2px 6px 2px RGB(0 0 6 / 3%); color: $osd_fg_color;
}
&:checked {
background-color: $accent_bg_color;
color: $accent_fg_color;
}
box-shadow: none;
&:disabled { &:disabled {
box-shadow: none; box-shadow: none;
@@ -107,18 +102,18 @@ toggle-group {
} }
&.vertical > toggle:not(.text-button):not(.image-text-button) { &.vertical > toggle:not(.text-button):not(.image-text-button) {
min-width: calc(34px - var(---group-padding) * 2); min-width: 34px - $base_padding;
} }
> separator { > separator {
transition: opacity 200ms $ease-out-quad; transition: opacity 200ms $ease-out-quad;
&.horizontal { &.horizontal {
margin: calc(6px - var(---group-padding)) 1px; margin: $base_padding / 2 1px;
} }
&.vertical { &.vertical {
margin: 1px calc(6px - var(---group-padding)); margin: 1px $base_padding / 2;
} }
&.hidden { &.hidden {
@@ -126,7 +121,7 @@ toggle-group {
} }
&:disabled { &:disabled {
filter: Opacity(var(--disabled-opacity)); filter: Opacity($disabled_opacity);
} }
} }
@@ -134,34 +129,47 @@ toggle-group {
border-radius: 17px; border-radius: 17px;
toggle { toggle {
border-radius: calc(17px - var(---group-padding)); border-radius: 17px - $base_padding / 2;
&.text-button, &.text-button,
&.image-text-button { &.image-text-button {
padding-left: calc(15px - var(---group-padding)); padding-left: 15px - $base_padding;
padding-right: calc(15px - var(---group-padding)); padding-right: 15px - $base_padding;
} }
} }
separator { separator {
&.horizontal { &.horizontal {
margin: calc(9px - var(---group-padding)) 1px; margin: $base_padding 1px;
} }
&.vertical { &.vertical {
margin: 1px calc(9px - var(---group-padding)); margin: 1px $base_padding;
} }
} }
} }
&.flat { &.flat {
---group-padding: 0px;
background: none; background: none;
color: inherit; color: inherit;
box-shadow: none; box-shadow: none;
padding: 0;
> toggle { > toggle {
@include focus-ring($transition: $button_transition); @include focus-ring($transition: $button_transition);
min-height: 34px;
&.text-button {
min-width: 18px;
padding-left: 11px - $base_padding / 2;
padding-right: 11px - $base_padding / 2;
}
&.image-text-button {
min-width: 10px + $base_padding;
padding-left: 11px;
padding-right: 11px;
}
&:checked { &:checked {
background-color: $selected_color; background-color: $selected_color;

122
src/sass/libadwaita/widgets/_toolbars.scss
View File

@@ -97,12 +97,12 @@
searchbar { searchbar {
> revealer > box { > revealer > box {
padding: $base_padding $base_padding $base_padding + 1px $base_padding; padding: $base_padding $base_padding $base_padding + 1px $base_padding;
background-color: $headerbar_backdrop_color; background-color: $window_bg_color;
color: $headerbar_fg_color; color: $window_fg_color;
box-shadow: inset 0 -1px $headerbar_border_color; box-shadow: inset 0 -1px $headerbar_border_color;
&:backdrop { &:backdrop {
background-color: $headerbar_bg_color; background-color: $view_bg_color;
transition: background-color $backdrop_transition; transition: background-color $backdrop_transition;
> * { > * {
@@ -168,8 +168,8 @@ searchbar {
****************/ ****************/
actionbar > revealer > box { actionbar > revealer > box {
background-color: $headerbar_backdrop_color; background-color: $window_bg_color;
color: $headerbar_fg_color; color: $window_fg_color;
box-shadow: inset 0 1px $headerbar_border_color; box-shadow: inset 0 1px $headerbar_border_color;
padding: $base_padding + 1px $base_padding $base_padding $base_padding; padding: $base_padding + 1px $base_padding $base_padding $base_padding;
@extend %toolbar; @extend %toolbar;
@@ -179,7 +179,7 @@ actionbar > revealer > box {
} }
&:backdrop { &:backdrop {
background-color: $headerbar_bg_color; background-color: $view_bg_color;
transition: background-color $backdrop_transition; transition: background-color $backdrop_transition;
> * { > * {
@@ -237,6 +237,10 @@ banner > revealer > widget {
toolbarview { toolbarview {
> .top-bar, > .top-bar,
> .bottom-bar { > .bottom-bar {
button.pill {
padding: ($medium_size - 24px) / 2 $small_size;
}
headerbar { @extend %headerbar-inline; } headerbar { @extend %headerbar-inline; }
searchbar { @extend %searchbar-inline; } searchbar { @extend %searchbar-inline; }
actionbar { @extend %actionbar-inline; } actionbar { @extend %actionbar-inline; }
@@ -261,6 +265,33 @@ toolbarview {
viewswitcherbar { @extend %viewswitcherbar-shrunk; } viewswitcherbar { @extend %viewswitcherbar-shrunk; }
} }
&.raised {
background-color: $headerbar_backdrop_color;
color: $headerbar_fg_color;
&:backdrop {
background-color: $headerbar_bg_color;
transition: background-color $backdrop_transition;
> windowhandle {
filter: opacity(.5);
transition: filter $backdrop_transition;
}
}
searchbar, actionbar {
> revealer > box {
background-color: $headerbar_backdrop_color;
color: $headerbar_fg_color;
box-shadow: inset 0 1px $headerbar_border_color;
&:backdrop {
background-color: $headerbar_bg_color;
}
}
}
}
} }
&.undershoot-top scrolledwindow { @include undershoot(top); } &.undershoot-top scrolledwindow { @include undershoot(top); }
@@ -277,27 +308,7 @@ toolbarview {
background-repeat: unset; background-repeat: unset;
} }
> .top-bar, > .top-bar.raised {
> .bottom-bar {
background-color: $headerbar_backdrop_color;
color: $headerbar_fg_color;
&:backdrop {
background-color: $headerbar_bg_color;
transition: background-color $backdrop_transition;
> windowhandle {
filter: opacity(.5);
transition: filter $backdrop_transition;
}
}
button.pill {
padding: ($medium_size - 24px) / 2 $small_size;
}
}
> .top-bar {
box-shadow: 0 1px $border_color; box-shadow: 0 1px $border_color;
&.border { &.border {
@@ -305,7 +316,7 @@ toolbarview {
} }
} }
> .bottom-bar { > .bottom-bar.raised {
box-shadow: 0 -1px $border_color; box-shadow: 0 -1px $border_color;
&.border { &.border {
@@ -313,16 +324,67 @@ toolbarview {
} }
} }
columnview, treeview.view {
> header > button {
border-bottom: none;
border-color: transparent;
border-image: linear-gradient(to bottom,
$window_bg_color 20%,
$border_color 20%,
$border_color 80%,
$window_bg_color 80%) 0 0 0 1 / 0 0 0 1px stretch;
&:first-child {
border-image: none;
}
}
}
.sidebar-pane &, .sidebar-pane &,
.content-pane &, .content-pane &,
.about & { // reset .about & { // reset
> .top-bar, > .top-bar.raised,
> .bottom-bar { > .bottom-bar.raised {
box-shadow: none; box-shadow: none;
&, &:backdrop { &, &:backdrop {
color: inherit;
background-color: transparent; background-color: transparent;
} }
} }
} }
.sidebar-pane & { // reset
> .top-bar.raised,
> .bottom-bar.raised {
searchbar, actionbar {
> revealer > box {
background-color: transparent;
color: $sidebar_fg_color;
box-shadow: inset 0 1px $sidebar_border_color;
&:backdrop {
background-color: transparent;
}
}
}
}
}
.content-pane & { // reset
> .top-bar.raised,
> .bottom-bar.raised {
searchbar, actionbar {
> revealer > box {
background-color: transparent;
color: $window_fg_color;
box-shadow: inset 0 1px $border_color;
&:backdrop {
background-color: transparent;
}
}
}
}
}
} }