788 lines
16 KiB
SCSS
788 lines
16 KiB
SCSS
|
|
|
|
//
|
|
// Comboboxes
|
|
//
|
|
combobox {
|
|
button.combo {
|
|
// Otherwise combos
|
|
padding-top: 3px; // are bigger than
|
|
padding-bottom: 3px; // buttons
|
|
}
|
|
arrow {
|
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
}
|
|
|
|
&:drop(active) button.combo {
|
|
@extend %button_basic_drop_active;
|
|
}
|
|
|
|
.linked:not(.vertical) > & > box > button.combo {
|
|
// the combobox is a composite widget so the way we do button linking doesn't
|
|
// work, special case needed.
|
|
&:dir(ltr),
|
|
&:dir(rtl) {
|
|
@extend %linked_middle;
|
|
}
|
|
}
|
|
|
|
.linked:not(.vertical) > &:first-child > box > button.combo {
|
|
@extend %linked_left;
|
|
}
|
|
.linked:not(.vertical) > &:last-child > box > button.combo {
|
|
@extend %linked_right;
|
|
}
|
|
.linked:not(.vertical) > &:only-child > box > button.combo {
|
|
@extend %linked_only_child;
|
|
}
|
|
|
|
.linked.vertical > & > box > button.combo {
|
|
@extend %linked_vertical_middle;
|
|
}
|
|
.linked.vertical > &:first-child > box > button.combo {
|
|
@extend %linked_vertical_top;
|
|
}
|
|
.linked.vertical > &:last-child > box > button.combo {
|
|
@extend %linked_vertical_bottom;
|
|
}
|
|
.linked.vertical > &:only-child > box > button.combo {
|
|
@extend %linked_vertical_only_child;
|
|
}
|
|
}
|
|
|
|
toolbar {
|
|
-GtkWidget-window-dragging: true;
|
|
padding: 4px;
|
|
background-color: $bg_color;
|
|
|
|
separator {
|
|
background: none;
|
|
}
|
|
&.horizontal separator {
|
|
margin: 0 6px;
|
|
}
|
|
&.vertical separator {
|
|
margin: 6px 0;
|
|
}
|
|
|
|
.osd & {
|
|
background-color: transparent;
|
|
}
|
|
|
|
&.osd {
|
|
padding: 7px;
|
|
border: 1px solid transparentize(black, 0.5);
|
|
border-radius: 3px;
|
|
background-color: transparentize($osd_bg_color, 0.1);
|
|
|
|
&.left,
|
|
&.right,
|
|
&.top,
|
|
&.bottom {
|
|
border-radius: 0;
|
|
} // positional classes for `attached` osd toolbars
|
|
|
|
&.top {
|
|
border-width: 0 0 1px 0;
|
|
}
|
|
&.bottom {
|
|
border-width: 1px 0 0 0;
|
|
}
|
|
&.left {
|
|
border-width: 0 1px 0 0;
|
|
}
|
|
&.right {
|
|
border-width: 0 0 0 1px;
|
|
}
|
|
}
|
|
|
|
&:not(.inline-toolbar) {
|
|
switch,
|
|
scale,
|
|
entry,
|
|
spinbutton,
|
|
button {
|
|
margin-right: 1px;
|
|
margin-bottom: 1px;
|
|
}
|
|
.linked > button,
|
|
.linked > entry {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.primary-toolbar toolbar,
|
|
.primary-toolbar:not(.libreoffice-toolbar) {
|
|
// LO messes up the toolbar styling, so exclude LO toolbars
|
|
color: $header_fg;
|
|
background-color: opacify($header_bg, 1);
|
|
box-shadow: none;
|
|
border-width: 0 0 1px 0;
|
|
border-style: solid;
|
|
border-image: linear-gradient(to bottom, opacify($header_bg, 1), darken($header_bg, 12%)) 1 0 1 0; //temporary hack for rhythmbox 3.1
|
|
|
|
separator {
|
|
@extend %header_separator;
|
|
}
|
|
}
|
|
|
|
.primary-toolbar toolbar,
|
|
.primary-toolbar {
|
|
@extend %header_widgets;
|
|
}
|
|
|
|
.inline-toolbar {
|
|
@extend toolbar;
|
|
background-color: darken($bg_color, 3%);
|
|
border-style: solid;
|
|
border-color: $borders_color;
|
|
border-width: 0 1px 1px;
|
|
padding: 3px;
|
|
border-radius: 0 0 3px 3px;
|
|
}
|
|
|
|
searchbar {
|
|
background-color: $bg_color;
|
|
border-style: solid;
|
|
border-color: $borders_color;
|
|
border-width: 0 0 1px;
|
|
padding: 3px;
|
|
//box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
|
|
}
|
|
|
|
actionbar {
|
|
padding: 6px;
|
|
border-top: 1px solid $borders_color;
|
|
background-color: darken($bg_color, 3%);
|
|
}
|
|
|
|
//
|
|
// Headerbars
|
|
//
|
|
headerbar,
|
|
%titlebar {
|
|
min-height: 42px;
|
|
padding: 0 7px;
|
|
|
|
border-width: 0 0 1px;
|
|
border-style: solid;
|
|
border-radius: 0;
|
|
border-color: opacify($header_border, 1);
|
|
|
|
color: $header_fg;
|
|
background-color: opacify($header_bg, 1);
|
|
box-shadow: inset 0 1px $header_highlight;
|
|
|
|
.csd & {
|
|
// Transparent header-bars only in csd windows
|
|
background-color: $header_bg;
|
|
border-color: $header_border;
|
|
}
|
|
|
|
&:backdrop {
|
|
color: transparentize($header_fg, 0.4);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: smaller;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
// Selectionmode
|
|
&.selection-mode {
|
|
color: $selected_fg_color;
|
|
background-color: $selection_mode_bg;
|
|
border-color: darken($selection_mode_bg, 4%);
|
|
box-shadow: none;
|
|
|
|
&:backdrop {
|
|
background-color: $selection_mode_bg;
|
|
color: transparentize($selected_fg_color, 0.4);
|
|
}
|
|
|
|
.subtitle:link {
|
|
@extend %link_selected;
|
|
}
|
|
|
|
button {
|
|
color: $selected_fg_color;
|
|
outline-color: transparentize($selected_fg_color, 0.7);
|
|
background-color: transparentize($selected_fg_color, 1);
|
|
border-color: transparentize($selected_fg_color, 1);
|
|
|
|
&.flat {
|
|
@include button(undecorated);
|
|
color: $selected_fg_color;
|
|
background-color: transparentize($selected_fg_color, 1);
|
|
}
|
|
&:hover {
|
|
color: $selected_fg_color;
|
|
outline-color: transparentize($selected_fg_color, 0.7);
|
|
background-color: transparentize($selected_fg_color, 0.95);
|
|
border-color: transparentize($selected_fg_color, 0.5);
|
|
}
|
|
&:active,
|
|
&:checked {
|
|
color: $selection_mode_bg;
|
|
outline-color: transparentize($selection_mode_bg, 0.7);
|
|
background-color: $selected_fg_color;
|
|
border-color: $selected_fg_color;
|
|
}
|
|
&:disabled {
|
|
color: transparentize($selected_fg_color, 0.6);
|
|
background-color: transparentize($selected_fg_color, 1);
|
|
border-color: transparentize($selected_fg_color, 1);
|
|
|
|
&:active,
|
|
&:checked {
|
|
color: transparentize($selection_mode_bg, 0.6);
|
|
background-color: transparentize($selected_fg_color, 0.85);
|
|
border-color: transparentize($selected_fg_color, 0.85);
|
|
}
|
|
}
|
|
}
|
|
|
|
.selection-menu {
|
|
box-shadow: none;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
GtkArrow {
|
|
-GtkArrow-arrow-scaling: 1;
|
|
}
|
|
.arrow {
|
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
}
|
|
}
|
|
.maximized & {
|
|
background-color: opacify($selection_mode_bg, 1);
|
|
}
|
|
}
|
|
|
|
.tiled &,
|
|
.tiled &:backdrop,
|
|
.maximized &,
|
|
.maximized &:backdrop {
|
|
border-radius: 0; // squared corners when the window is max'd or tiled
|
|
}
|
|
|
|
.maximized & {
|
|
background-color: opacify($header_bg, 1);
|
|
border-color: opacify($header_border, 1);
|
|
}
|
|
|
|
&.default-decoration,
|
|
.csd &.default-decoration, // needed under wayland, since all gtk3 windows are csd windows
|
|
&.default-decoration:backdrop,
|
|
.csd &.default-decoration:backdrop {
|
|
min-height: 28px;
|
|
padding: 0 7px;
|
|
background-color: opacify($header_bg, 1);
|
|
border-bottom-width: 0;
|
|
|
|
.maximized & {
|
|
background-color: opacify($header_bg, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.titlebar {
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
|
|
headerbar {
|
|
@extend %header_widgets;
|
|
|
|
entry,
|
|
button,
|
|
separator {
|
|
margin-top: 6px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
// Fixes split headerbars
|
|
separator:first-child + &,
|
|
&:first-child {
|
|
&,
|
|
&:backdrop {
|
|
border-top-left-radius: 8px;
|
|
|
|
.maximized &,
|
|
.tiled & {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
&,
|
|
&:backdrop {
|
|
border-top-right-radius: 8px;
|
|
|
|
.maximized &,
|
|
.tiled & {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Fixes split headerbars too
|
|
.titlebar:not(headerbar) {
|
|
window > &,
|
|
window.csd > & {
|
|
&,
|
|
&:backdrop {
|
|
padding: 0;
|
|
background: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
> separator {
|
|
background-image: _solid($header_border);
|
|
}
|
|
|
|
@extend %titlebar;
|
|
}
|
|
|
|
%header_separator {
|
|
min-width: 1px;
|
|
min-height: 1px;
|
|
border-width: 0 1px;
|
|
border-image: linear-gradient(
|
|
to bottom,
|
|
transparentize($header_fg, 1) 25%,
|
|
transparentize($header_fg, 0.65) 25%,
|
|
transparentize($header_fg, 0.65) 75%,
|
|
transparentize($header_fg, 1) 75%
|
|
)
|
|
0 1/0 1px stretch;
|
|
|
|
&:backdrop {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
%header_widgets {
|
|
// Headerbar Entries
|
|
entry {
|
|
@include entry(header-normal);
|
|
|
|
&:backdrop {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
&:focus {
|
|
@include entry(header-focus);
|
|
background-clip: padding-box;
|
|
|
|
image {
|
|
color: transparentize($header_fg, 0.15);
|
|
}
|
|
}
|
|
&:disabled {
|
|
@include entry(header-insensitive);
|
|
}
|
|
|
|
selection:focus {
|
|
background-color: $selected_bg_color;
|
|
color: $selected_fg_color;
|
|
}
|
|
|
|
progress {
|
|
border-color: $selected_bg_color;
|
|
background-image: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
@each $e_type, $e_color, $e_fg_color in (warning, $warning_color, $warning_fg_color),
|
|
(error, $error_color, $error_fg_color)
|
|
{
|
|
&.#{$e_type} {
|
|
color: $e_fg_color;
|
|
border-color: $header_entry_border;
|
|
background-color: mix($e_color, $header_bg, 60%);
|
|
|
|
&:focus {
|
|
color: $e_fg_color;
|
|
background-color: $e_color;
|
|
}
|
|
selection,
|
|
selection:focus {
|
|
background-color: $e_fg_color;
|
|
color: $e_color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Headerbar Buttons
|
|
button {
|
|
@include button(header-normal);
|
|
|
|
&:backdrop {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
&:hover {
|
|
@include button(header-hover);
|
|
}
|
|
&:active,
|
|
&:checked {
|
|
@include button(header-active);
|
|
background-clip: padding-box;
|
|
}
|
|
&:disabled {
|
|
@include button(header-insensitive);
|
|
}
|
|
&:disabled:active,
|
|
&:disabled:checked {
|
|
@include button(header-insensitive-active);
|
|
}
|
|
}
|
|
|
|
&.selection-mode button {
|
|
&,
|
|
&.flat {
|
|
@include button(undecorated);
|
|
color: $selection_mode_fg;
|
|
background-color: transparentize($selection_mode_fg, 1);
|
|
}
|
|
&:hover {
|
|
@extend %selected_button_normal;
|
|
}
|
|
&:active,
|
|
&:checked {
|
|
@extend %selected_button_active;
|
|
}
|
|
|
|
&:disabled {
|
|
@extend %selected_button_flat_disabled;
|
|
|
|
&:checked,
|
|
&:active {
|
|
@extend %selected_button_disabled_checked;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Linking stuff
|
|
|
|
// Disconnect linked buttons
|
|
.linked:not(.vertical):not(.path-bar):not(.stack-switcher) {
|
|
button:not(:last-child):not(:only-child) {
|
|
margin-right: 1px;
|
|
}
|
|
}
|
|
|
|
// Reset buttons
|
|
.linked:not(.vertical):not(.path-bar) > button {
|
|
&,
|
|
&:hover,
|
|
&:active,
|
|
&:checked,
|
|
&:disabled {
|
|
border-radius: 3px;
|
|
border-style: solid;
|
|
}
|
|
}
|
|
.linked:not(.vertical):not(.path-bar) {
|
|
$_uncolored_button: 'button:not(:checked):not(:active):not(.suggested-action):not(.destructive-action)';
|
|
|
|
> #{$_uncolored_button} + #{$_uncolored_button},
|
|
> #{$_uncolored_button}:hover:not(:only-child),
|
|
> #{$_uncolored_button}:hover + #{$_uncolored_button},
|
|
> #{$_uncolored_button}:disabled:not(:only-child),
|
|
> #{$_uncolored_button}:disabled + #{$_uncolored_button}:not(:hover) {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
// special case for path-bars and stack-switchers
|
|
.linked:not(.vertical):not(.path-bar).stack-switcher,
|
|
.linked:not(.vertical).path-bar {
|
|
> button {
|
|
@include button(header-hover);
|
|
|
|
&:hover {
|
|
background-color: lighten($header_button_bg, 15%);
|
|
}
|
|
&:active,
|
|
&:checked {
|
|
@include button(header-active);
|
|
}
|
|
&:disabled {
|
|
color: transparentize($header_fg, 0.4);
|
|
}
|
|
|
|
&,
|
|
&:hover,
|
|
&:active,
|
|
&:checked,
|
|
&:disabled {
|
|
@extend %linked;
|
|
}
|
|
}
|
|
}
|
|
|
|
// special case widgets like the linked entry and button in mintinstall toolbar
|
|
.linked:not(.vertical) entry {
|
|
box-shadow: none;
|
|
|
|
&:focus {
|
|
@include entry(header-normal);
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
& + button:last-child {
|
|
@include button(header-hover);
|
|
|
|
&:hover {
|
|
background-color: lighten($header_button_bg, 15%);
|
|
}
|
|
&:active,
|
|
&:checked {
|
|
@include button(header-active);
|
|
}
|
|
&:disabled {
|
|
color: transparentize($header_fg, 0.4);
|
|
background-color: transparentize($header_button_bg, 0.2);
|
|
border-color: $header_button_border;
|
|
|
|
&:checked {
|
|
background-color: transparentize($selected_bg_color, 0.35);
|
|
color: transparentize($selected_fg_color, 0.25);
|
|
}
|
|
}
|
|
|
|
&,
|
|
&:hover,
|
|
&:active,
|
|
&:checked,
|
|
&:disabled {
|
|
@extend %linked;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Headerbar Suggested and Destructive Action buttons
|
|
@each $b_type, $b_color in (suggested-action, $suggested_color),
|
|
(destructive-action, $destructive_color)
|
|
{
|
|
button.#{$b_type} {
|
|
@include button(suggested_destructive, $b_color);
|
|
|
|
&.flat {
|
|
@include button(undecorated);
|
|
color: $b_color;
|
|
outline-color: transparentize($b_color, 0.7);
|
|
}
|
|
&:hover {
|
|
@include button(suggested_destructive, lighten($b_color, 10%));
|
|
}
|
|
&:active,
|
|
&:checked {
|
|
@include button(suggested_destructive, darken($b_color, 10%));
|
|
}
|
|
&.flat:disabled,
|
|
&:disabled {
|
|
@include button(header-insensitive);
|
|
}
|
|
}
|
|
button.#{$b_type}:backdrop,
|
|
button.#{$b_type}:backdrop {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
// Headerbar Spinbuttons
|
|
& spinbutton {
|
|
&:focus button {
|
|
color: $selected_fg_color;
|
|
|
|
&:hover {
|
|
background-color: transparentize($selected_fg_color, 0.9);
|
|
border-color: transparent;
|
|
}
|
|
&:disabled {
|
|
color: transparentize($selected_fg_color, 0.6);
|
|
}
|
|
}
|
|
button {
|
|
color: $header_fg;
|
|
|
|
&:hover {
|
|
background-color: transparentize($header_fg, 0.75);
|
|
border-color: transparent;
|
|
}
|
|
&:disabled {
|
|
color: transparentize($header_fg, 0.3);
|
|
}
|
|
&:active {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Headerbar ComboBoxes
|
|
combobox {
|
|
&:disabled {
|
|
color: transparentize($header_fg, 0.6);
|
|
}
|
|
|
|
> .linked > button.combo {
|
|
@include entry(header-normal);
|
|
|
|
&:hover {
|
|
@include entry(header-focus);
|
|
box-shadow: none;
|
|
}
|
|
&:disabled {
|
|
@include entry(header-insensitive);
|
|
}
|
|
}
|
|
|
|
> .linked > entry.combo {
|
|
&:dir(ltr) {
|
|
border-right-style: none;
|
|
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
&:dir(rtl) {
|
|
border-left-style: none;
|
|
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
> .linked > button.combo {
|
|
&:dir(ltr) {
|
|
&,
|
|
&:hover,
|
|
&:active,
|
|
&:checked,
|
|
&:disabled {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
}
|
|
&:dir(rtl) {
|
|
&,
|
|
&:hover,
|
|
&:active,
|
|
&:checked,
|
|
&:disabled {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Headerbar Switches
|
|
switch {
|
|
&:backdrop {
|
|
opacity: 0.75;
|
|
}
|
|
}
|
|
|
|
progressbar {
|
|
trough {
|
|
background-color: $header_button_border;
|
|
}
|
|
|
|
&:backdrop {
|
|
opacity: 0.75;
|
|
}
|
|
}
|
|
|
|
// Headerbar Scale
|
|
scale {
|
|
$_trough_bg: $header_button_border;
|
|
|
|
&:backdrop {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
slider {
|
|
$_slider_border: opacify($header_button_border, 0.3);
|
|
$_slider_bg: lighten(opacify($header_bg, 1), 10%);
|
|
|
|
background-color: $_slider_bg;
|
|
border-color: $_slider_border;
|
|
|
|
&:hover {
|
|
background-color: lighten($_slider_bg, 5%);
|
|
border-color: $_slider_border;
|
|
}
|
|
&:active {
|
|
background-color: $selected_bg_color;
|
|
border-color: $selected_bg_color;
|
|
}
|
|
&:disabled {
|
|
background-color: mix($_slider_bg, $header_bg, 70%);
|
|
border-color: $_slider_border;
|
|
}
|
|
}
|
|
trough {
|
|
background-color: $_trough_bg;
|
|
|
|
&:disabled {
|
|
background-color: transparentize($_trough_bg, 0.1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Pathbars
|
|
//
|
|
.path-bar button {
|
|
&.text-button,
|
|
&.image-button,
|
|
& {
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
}
|
|
|
|
&.text-button.image-button label {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
&.text-button.image-button,
|
|
& {
|
|
label:last-child {
|
|
padding-right: 10px;
|
|
}
|
|
label:first-child {
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
|
|
&.slider-button,
|
|
&:not(.image-button):not(.text-button) {
|
|
padding-left: 1px;
|
|
padding-right: 1px;
|
|
}
|
|
|
|
image {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
} |