316 lines
7.7 KiB
SCSS
316 lines
7.7 KiB
SCSS
/***************
|
|
* Header bars *
|
|
***************/
|
|
%titlebar,
|
|
headerbar {
|
|
padding: 0 6px;
|
|
min-height: 34px;
|
|
background-color: $headerbar_color;
|
|
color: $headerbar_fg_color;
|
|
border-radius: 0;
|
|
|
|
&:backdrop {
|
|
border-color: $backdrop_borders_color;
|
|
background-image: none;
|
|
|
|
transition: $backdrop_transition;
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: smaller;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
|
|
@extend .dim-label;
|
|
}
|
|
|
|
%linked-header {
|
|
border: none;
|
|
border-radius: 0;
|
|
border-right-style: none;
|
|
box-shadow: none;
|
|
|
|
&:first-child {
|
|
border-top-left-radius: 0px;
|
|
border-bottom-left-radius: 0px;
|
|
}
|
|
|
|
&:last-child {
|
|
border-top-right-radius: 0px;
|
|
border-bottom-right-radius: 0px;
|
|
border-right-style: solid;
|
|
}
|
|
|
|
&:only-child {
|
|
border-radius: 0px;
|
|
border-style: solid;
|
|
}
|
|
}
|
|
entry { min-height: 24px; }
|
|
button {
|
|
@include button(normal-header);
|
|
min-height: 34px;
|
|
&:hover {
|
|
@include button(hover-header, transparent, $purple);
|
|
}
|
|
&:active,
|
|
&:checked {
|
|
@include button(active-header, transparent, $purple);
|
|
}
|
|
|
|
&:backdrop,
|
|
&:disabled,
|
|
&:backdrop:disabled {
|
|
@include button(backdrop-header,transparent,transparentize(white,0.7));
|
|
}
|
|
|
|
&:backdrop {
|
|
&:hover,
|
|
&:active,
|
|
&:checked {
|
|
background-color: transparent;
|
|
color: $selected_bg_color;
|
|
box-shadow: none;
|
|
// @include button(hover-header,transparent,transparentize(white,0.7));
|
|
}
|
|
}
|
|
|
|
@each $b_type, $b_color in (suggested-action, $cyan),
|
|
(destructive-action, $destructive_color) {
|
|
&.#{$b_type} {
|
|
font-weight: bold;
|
|
min-height: 24px;
|
|
margin-top: 4px;
|
|
margin-bottom: 4px;
|
|
border-radius: 3px;
|
|
@include button(normal, $b_color, white);
|
|
|
|
&:hover { @include button(hover, $b_color, white); }
|
|
|
|
&:active { @include button(active, $b_color, white); }
|
|
|
|
&:disabled {
|
|
@include button(insensitive, $b_color, white);
|
|
label {color: transparentize(white,0.5);}
|
|
}
|
|
|
|
&:backdrop {
|
|
@include button(backdrop, $b_color, white);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
&:backdrop:disabled { @include button(backdrop-insensitive, $b_color, white); }
|
|
|
|
}
|
|
}
|
|
|
|
//Reset style
|
|
&.titlebutton {
|
|
color: transparent;
|
|
box-shadow: none;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:checked,
|
|
&:backdrop,
|
|
&:backdrop:hover,* {
|
|
color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
.linked > button,
|
|
.linked > button:hover,
|
|
.linked > button:active,
|
|
.linked > button:checked,
|
|
.linked > button:backdrop { @extend %linked-header; }
|
|
.linked > button:active,
|
|
.linked > button:checked{
|
|
&:backdrop{
|
|
color: $backdrop_selected_bg_color;
|
|
label{
|
|
color: $backdrop_selected_bg_color;
|
|
}
|
|
}
|
|
}
|
|
// End reset style
|
|
|
|
&.selection-mode {
|
|
$_hc: mix($top_highlight,$selected_bg_color, 50%); // highlight color
|
|
|
|
color: $selected_fg_color;
|
|
text-shadow: 0 -1px transparentize(black, 0.5);
|
|
border-color: $selected_borders_color;
|
|
|
|
@include headerbar_fill($selected_bg_color, $_hc);
|
|
|
|
&:backdrop {
|
|
background-color: $selected_bg_color;
|
|
background-image: none;
|
|
box-shadow: inset 0 1px mix($top_highlight, $selected_bg_color, 60%);
|
|
}
|
|
|
|
.subtitle:link { @extend *:link:selected; }
|
|
|
|
button {
|
|
@include button(normal, $selected_bg_color, $selected_fg_color);
|
|
|
|
&.flat { @include button(undecorated); }
|
|
|
|
&:hover { @include button(hover, $selected_bg_color, $selected_fg_color); }
|
|
|
|
&:active,
|
|
&:checked { @include button(active, $selected_bg_color, $selected_fg_color); }
|
|
|
|
&:backdrop {
|
|
&.flat, & {
|
|
@include button(backdrop, $selected_bg_color, $selected_fg_color);
|
|
|
|
-gtk-icon-effect: none;
|
|
border-color: $selected_borders_color;
|
|
|
|
&:active,
|
|
&:checked {
|
|
@include button(backdrop-active, $selected_bg_color, $selected_fg_color);
|
|
|
|
border-color: $selected_borders_color;
|
|
}
|
|
|
|
&:disabled {
|
|
@include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color);
|
|
|
|
border-color: $selected_borders_color;
|
|
|
|
&:active, &:checked {
|
|
@include button(backdrop-insensitive-active, $selected_bg_color, $selected_fg_color);
|
|
|
|
border-color: $selected_borders_color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }}
|
|
|
|
&:disabled {
|
|
@include button(insensitive, $selected_bg_color, $selected_fg_color);
|
|
|
|
&:active,
|
|
&:checked { @include button(insensitive-active, $selected_bg_color, $selected_fg_color); }
|
|
}
|
|
|
|
&.suggested-action {
|
|
@include button(normal, $cyan, white);
|
|
|
|
&:hover { @include button(hover, $cyan, white); }
|
|
|
|
&:active { @include button(active, $cyan, white); }
|
|
|
|
&:disabled { @include button(insensitive, $cyan, white); }
|
|
|
|
&:backdrop { @include button(backdrop, $cyan, white); }
|
|
|
|
&:backdrop:disabled { @include button(backdrop-insensitive, $cyan, white); }
|
|
}
|
|
}
|
|
|
|
.selection-menu {
|
|
&:backdrop, & {
|
|
border-color: transparentize($selected_bg_color, 1);
|
|
background-image: linear-gradient(to bottom, transparentize($selected_bg_color, 1), transparentize($selected_bg_color, 1));
|
|
box-shadow: none;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
|
|
GtkArrow { -GtkArrow-arrow-scaling: 1; }
|
|
|
|
.arrow {
|
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
color: transparentize($selected_fg_color,0.5);
|
|
-gtk-icon-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tiled &,
|
|
.maximized & {
|
|
&.titlebar {
|
|
@if $variant == 'light' { box-shadow: none; }
|
|
@else { box-shadow: inset 0 -1px $bottom_highlight; }
|
|
}
|
|
&:backdrop, & { border-radius: 0; }
|
|
} // squared corners when the window is maximized or tiled
|
|
|
|
&.default-decoration {
|
|
padding: 4px;
|
|
min-height: 28px;
|
|
|
|
button.titlebutton {
|
|
min-height: 26px;
|
|
min-width: 26px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
headerbar {
|
|
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
|
|
entry,
|
|
spinbutton,
|
|
separator {
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
switch {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
separator { background: transparent; }
|
|
}
|
|
|
|
.background:not(.tiled):not(.maximized) .titlebar {
|
|
@if $variant == 'light' { box-shadow: inset 0 1px lighten($headerbar_color, 5%); }
|
|
@else { box-shadow: inset 0 1px $top_highlight,inset 0 -1px $bottom_highlight; }
|
|
|
|
|
|
&:backdrop, & {
|
|
border-top-left-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
}
|
|
}
|
|
|
|
headerbar {
|
|
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: 4px; }}
|
|
|
|
window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: 4px; }}
|
|
}
|
|
|
|
.titlebar:not(headerbar) {
|
|
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 {
|
|
&, &:backdrop {
|
|
background: $headerbar_color;
|
|
}
|
|
}
|
|
|
|
@extend %titlebar;
|
|
}
|