Files
Colloid-gtk-theme/src/sass/libadwaita/widgets/_toolbars.scss
2024-04-24 18:03:05 +08:00

320 lines
6.7 KiB
SCSS

%toolbar {
button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
&.arrow-button,
&.image-button,
&.image-text-button {
@extend %button_basic_flat;
}
}
&.osd button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
&:focus:focus-visible {
outline-color: $osd_focus_color;
}
}
menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
&.image-button > button {
@extend %button_basic_flat;
}
}
.linked button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
&.arrow-button,
&.image-button,
&.image-text-button {
@extend %button_basic_raised;
}
}
menubutton.raised > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
&.arrow-button,
&.image-button,
&.image-text-button {
@extend %button_basic_raised;
}
}
menubutton.suggested-action,
menubutton.destructive-action,
menubutton.opaque {
> button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
@extend %opaque_button;
color: inherit;
background-color: transparent;
}
}
splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
@extend %flat_split_button;
}
switch {
margin-top: 4px;
margin-bottom: 4px;
}
// Reset styles for popovers
popover {
button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
&.arrow-button,
&.image-button,
&.image-text-button {
@extend %button_basic_raised;
}
}
menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
&.image-button > button {
@extend %button_basic_raised;
}
}
}
}
.toolbar {
padding: 6px;
border-spacing: 6px;
@extend %toolbar;
// stand-alone OSD toolbars
&.osd {
padding: 12px;
border-radius: $card_radius;
}
}
%toolbar-shrunk {
padding-top: 3px;
padding-bottom: 3px;
}
/****************
* GtkSearchBar *
****************/
searchbar {
> revealer > box {
padding: 6px 6px 7px 6px;
background-color: $headerbar_backdrop_color;
color: $headerbar_fg_color;
box-shadow: inset 0 -1px $headerbar_border_color;
&:backdrop {
background-color: $headerbar_bg_color;
transition: background-color $backdrop_transition;
> * {
filter: opacity(.5);
transition: filter $backdrop_transition;
}
}
@extend %toolbar;
.close {
min-width: 18px;
min-height: 18px;
padding: 4px;
border-radius: 50%;
@extend %button_basic_flat;
&:dir(ltr) {
margin-left: 10px;
margin-right: 4px;
}
&:dir(rtl) {
margin-left: 4px;
margin-right: 10px;
}
}
}
&.inline {
@extend %searchbar-inline;
}
}
%searchbar-flat > revealer > box {
background-color: transparent;
color: inherit;
box-shadow: none;
padding-bottom: 6px;
}
%searchbar-inline {
@extend %searchbar-flat;
> revealer > box:backdrop {
background-color: transparent;
transition: none;
> * {
filter: none;
transition: none;
}
}
}
%searchbar-shrunk > revealer > box {
padding-top: 3px;
padding-bottom: 3px;
}
/****************
* GtkActionBar *
****************/
actionbar > revealer > box {
background-color: $headerbar_backdrop_color;
color: $headerbar_fg_color;
box-shadow: inset 0 1px $headerbar_border_color;
padding: 7px 6px 6px 6px;
@extend %toolbar;
&, > box.start, > box.end {
border-spacing: $base_padding;
}
&:backdrop {
background-color: $headerbar_bg_color;
transition: background-color $backdrop_transition;
> * {
filter: opacity(.5);
transition: filter $backdrop_transition;
}
}
}
%actionbar-inline > revealer > box {
background-color: transparent;
color: inherit;
box-shadow: none;
padding-top: $base_padding;
&:backdrop {
background-color: transparent;
transition: none;
> * {
filter: none;
transition: none;
}
}
}
%actionbar-shrunk > revealer > box {
padding-top: $base_padding / 2;
padding-bottom: $base_padding / 2;
}
/*************
* AdwBanner *
*************/
banner > revealer > widget {
/* There are 2 more instances in _sidebars.css, keep in sync with that */
background-color: gtkmix($accent_bg_color, $window_bg_color, 30%);
color: $window_fg_color;
padding: $base_padding;
&:backdrop {
background-color: gtkmix($accent_bg_color, $window_bg_color, 15%);
transition: background-color $backdrop_transition;
> label, > button {
filter: opacity(.5);
transition: filter $backdrop_transition;
}
}
}
/******************
* AdwToolbarView *
******************/
toolbarview {
> .top-bar,
> .bottom-bar {
headerbar { @extend %headerbar-inline; }
searchbar { @extend %searchbar-inline; }
actionbar { @extend %actionbar-inline; }
menubar { @extend %menubar-inline; }
tabbar { @extend %tabbar-inline; }
.collapse-spacing {
padding-top: $base_padding / 2;
padding-bottom: $base_padding / 2;
headerbar { @extend %headerbar-shrunk; }
searchbar { @extend %searchbar-shrunk; }
actionbar { @extend %actionbar-shrunk; }
menubar { @extend %menubar-shrunk; }
.toolbar { @extend %toolbar-shrunk; }
tabbar { @extend %tabbar-shrunk; }
viewswitcherbar { @extend %viewswitcherbar-shrunk; }
}
}
&.undershoot-top scrolledwindow { @include undershoot(top); }
&.undershoot-bottom scrolledwindow { @include undershoot(bottom); }
window.devel & > .top-bar {
background-image: cross-fade(5% -gtk-recolor(url("assets/devel-symbolic.svg")),
image(transparent));
background-repeat: repeat-x;
}
window.devel dialog & > .top-bar {
background-image: unset;
background-repeat: unset;
}
> .top-bar,
> .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;
}
}
}
> .top-bar {
box-shadow: 0 1px $border_color;
&.border {
box-shadow: 0 1px $border_color;
}
}
> .bottom-bar {
box-shadow: 0 -1px $border_color;
&.border {
box-shadow: 0 -1px $border_color;
}
}
.sidebar-pane &,
.content-pane &,
.about & { // reset
> .top-bar,
> .bottom-bar {
box-shadow: none;
&, &:backdrop {
background-color: transparent;
}
}
}
}