mirror of
https://github.com/vinceliuice/Colloid-gtk-theme.git
synced 2025-10-01 22:04:41 -07:00
320 lines
6.7 KiB
SCSS
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;
|
|
}
|
|
}
|
|
}
|
|
}
|