325 lines
8.3 KiB
SCSS
325 lines
8.3 KiB
SCSS
@import "button";
|
|
|
|
|
|
/*********
|
|
! Toolbar
|
|
**********/
|
|
|
|
@mixin toolbar($bg, $fg) {
|
|
@include linear-gradient($bg);
|
|
@include border_tng($fg, $bg, .8);
|
|
|
|
color: $fg;
|
|
|
|
&:disabled {
|
|
@include linear-gradient(shade($bg, .9));
|
|
|
|
color: mix($fg, $bg, .5);
|
|
}
|
|
|
|
.background {
|
|
background-color: $bg;
|
|
border-color: mix($bg, $fg, .3);
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
padding: 0 ($spacing * 2);
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: smaller;
|
|
padding: 0 ($spacing * 2);
|
|
}
|
|
|
|
button {
|
|
@include button($bg, $fg);
|
|
|
|
&.image-button {
|
|
padding: $spacing;
|
|
}
|
|
}
|
|
|
|
viewswitcher button,
|
|
.linked > button {
|
|
@include linked_button($bg, $fg);
|
|
}
|
|
|
|
//combobox, button {
|
|
//padding: $spacing;
|
|
|
|
//&.text-button { padding: $spacing; }
|
|
//}
|
|
|
|
box button.image-button {
|
|
padding: $spacing $spacing + 4px;
|
|
}
|
|
|
|
separator {
|
|
&, &:disabled {
|
|
color: shade($bg, ($contrast - .2));
|
|
border-color: currentColor;
|
|
|
|
-GtkWidget-window-dragging: true;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin inline-toolbar($bg, $fg) {
|
|
padding: 1px;
|
|
border-width: 0 1px 1px;
|
|
border-style: solid;
|
|
border-color: $borders_color;
|
|
background-color: mix($borders_color, $bg_color, .7);
|
|
background-image: none;
|
|
|
|
&:backdrop {
|
|
border-color: $backdrop_borders_color;
|
|
background-color: $backdrop_dark_fill;
|
|
transition: 200ms ease-out;
|
|
}
|
|
|
|
button { @include button($toolbar_bg_color, $toolbar_fg_color); }
|
|
|
|
toolbutton,
|
|
toolbutton:backdrop {
|
|
> button.flat {
|
|
@extend %linked_button;
|
|
|
|
&:dir(ltr) { @extend %linked_middle; }
|
|
|
|
&:dir(rtl) { @extend %linked_middle-rtl; }
|
|
}
|
|
|
|
&:first-child > button.flat { @extend %linked_button-first-child; }
|
|
|
|
&:last-child > button.flat { @extend %linked_button-last-child; }
|
|
|
|
&:only-child > button.flat { @extend %linked_button-only-child; }
|
|
}
|
|
}
|
|
|
|
@include exports("toolbar_extends") {
|
|
%toolbar {
|
|
padding: if($spacing > 1px, $spacing, 1px) - 1px;
|
|
border-style: none;
|
|
|
|
// toolbar separators
|
|
&.horizontal separator { margin: 0 ($spacing + 2px) 1px; }
|
|
|
|
&.vertical separator { margin: ($spacing + 2px) 1px ($spacing + 2px) 0; }
|
|
}
|
|
|
|
%headerbar {
|
|
border-width: 0 0 1px;
|
|
border-style: solid;
|
|
|
|
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
|
|
entry,
|
|
spinbutton,
|
|
separator,
|
|
button { // Size height
|
|
margin-top: $spacing + 3px;
|
|
margin-bottom: $spacing + 3px;
|
|
}
|
|
|
|
switch { // Size height
|
|
margin-top: $spacing + 1px;
|
|
margin-bottom: $spacing + 1px;
|
|
}
|
|
|
|
window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case
|
|
window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { border-top-left-radius: $roundness; } }
|
|
|
|
window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: $roundness; } }
|
|
}
|
|
|
|
%titlebar { // Default headerbar and titlebar code.
|
|
@include toolbar($titlebar_bg_focused, $titlebar_fg_focused);
|
|
@include linear-gradient($titlebar_bg_focused);
|
|
|
|
border-radius: $roundness $roundness 0 0;
|
|
color: $titlebar_fg_focused;
|
|
padding: 0 6px;
|
|
min-height: 42px;
|
|
|
|
separator {
|
|
background-image: image(mix($titlebar_fg_focused, $titlebar_bg_focused, .9));
|
|
}
|
|
|
|
&:backdrop {
|
|
@include linear-gradient($titlebar_bg_unfocused);
|
|
|
|
color: $titlebar_fg_unfocused;
|
|
text-shadow: none;
|
|
border-color: mix($backdrop_borders_color, $bg_color, .5);
|
|
}
|
|
|
|
&.default-decoration { // Default titlebar (old metacity)
|
|
min-height: 24px;
|
|
box-shadow: none;
|
|
border: 0;
|
|
|
|
button.titlebutton {
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.solid-csd & {
|
|
&:backdrop, & {
|
|
&:dir(rtl), &:dir(ltr) { // specificity bump
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tiled &,
|
|
.maximized & { &:backdrop, & { border-radius: 0; } } // squared corners when the window is maximized or tiled
|
|
|
|
.title { font-weight: bold; }
|
|
|
|
separator.titlebutton { margin-left: $spacing; }
|
|
|
|
button {
|
|
@include button($header_button_bg_color, $header_button_fg_color);
|
|
|
|
$sidepadding: $spacing + ($roundness / 14px * if($spacing > 0, $spacing, 1px));
|
|
padding: $spacing;
|
|
|
|
&.text-button {
|
|
padding: $spacing if($sidepadding > 5px, $sidepadding, 5px);
|
|
}
|
|
|
|
&.flat {
|
|
color: $menubar_fg_color;
|
|
}
|
|
|
|
&.flat:hover {
|
|
color: $header_button_fg_color;
|
|
}
|
|
|
|
//&.image-button {
|
|
//padding: $spacing;
|
|
//}
|
|
|
|
&:backdrop {
|
|
color: $titlebar_fg_unfocused;
|
|
}
|
|
|
|
stack box.narrow {
|
|
/* have no clue why it's ignored by gtk and forced to 5px and 7px */
|
|
padding: 0;
|
|
}
|
|
|
|
&:not(:checked):not(:hover) stack box {
|
|
color: $menubar_fg_color;
|
|
}
|
|
|
|
}
|
|
|
|
viewswitcher {
|
|
button:not(:checked):not(:hover) stack box {
|
|
color: $button_fg_color;
|
|
}
|
|
}
|
|
|
|
button.titlebutton + separator.titlebutton {
|
|
margin-left: 0;
|
|
margin-right: $spacing;
|
|
}
|
|
|
|
button.titlebutton {
|
|
border: 0;
|
|
padding: $spacing;
|
|
background-image: none;
|
|
background-color: transparent;
|
|
color: $titlebar_fg_focused;
|
|
box-shadow: none;
|
|
|
|
&:hover, &:hover:focus {
|
|
background-image: none;
|
|
background-color: transparent;
|
|
color: $selected_bg_color;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:active, &:active:hover {
|
|
background-image: none;
|
|
background-color: transparent;
|
|
color: shade($selected_bg_color, .9);
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:backdrop {
|
|
background: none;
|
|
color: $titlebar_fg_unfocused;
|
|
-gtk-icon-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include exports("toolbar") {
|
|
toolbar {
|
|
@extend %toolbar;
|
|
@include toolbar($toolbar_bg_color, $toolbar_fg_color);
|
|
|
|
&.inline-toolbar { @include inline-toolbar($toolbar_bg_color, $toolbar_fg_color); }
|
|
}
|
|
|
|
headerbar {
|
|
@extend %titlebar;
|
|
@extend %headerbar;
|
|
}
|
|
|
|
.titlebar:not(headerbar) {
|
|
@extend %titlebar;
|
|
|
|
window.csd > & {
|
|
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
|
|
padding: 0;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border-style: none;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
> separator { background-color: shade($titlebar_bg_focused, .88); } // $borders_color
|
|
}
|
|
|
|
.background .titlebar {
|
|
&:backdrop, & {
|
|
border-top-left-radius: $roundness;
|
|
border-top-right-radius: $roundness;
|
|
}
|
|
}
|
|
|
|
.background.tiled .titlebar,
|
|
.background.tiled-top .titlebar,
|
|
.background.tiled-right .titlebar,
|
|
.background.tiled-bottom .titlebar,
|
|
.background.tiled-left .titlebar,
|
|
.background.maximized .titlebar,
|
|
.background.solid-csd .titlebar {
|
|
&:backdrop, & {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
}
|
|
|
|
// Fixed: https://github.com/numixproject/numix-gtk-theme/issues/585
|
|
// workaround for ugly Ubuntu-related CSD patches
|
|
.background:not(.csd):not(.ssd):not(.solid-csd) headerbar {
|
|
&, &:backdrop {
|
|
&, &:not(:last-child) {
|
|
border-radius: 0;
|
|
border-top-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|