numix-gtk-theme/gtk-3.0/scss/widgets.scss

@import "functions";
@import "colors";
@import "base";
@import "button";
@import "toggle";
@import "entry";
@import "menu";
@import "toolbar";
@import "sidebar";
@import "view";
@import "grid";
@import "progress";
@import "spinner";
@import "window";
@import "calendar";
@import "infobar";


/*****************
* miscellaneous *
*****************/
.floating-bar {
    border-width: 1px;
    border-style: solid;
    border-color: shade($bg_color, 0.8);
    border-radius: 2px;
    background-color: $bg_color;
    background-image: none;
    color: $fg_color;
}

.floating-bar.top {
    border-top-width: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.floating-bar.right {
    border-right-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.floating-bar.bottom {
    border-bottom-width: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.floating-bar.left {
    border-left-width: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.floating-bar .button {
    -GtkButton-image-spacing: 0;
    -GtkButton-inner-border: 0;

    border-style: none;
    background-color: transparent;
    background-image: none;
}



/************
* notebook *
************/
.notebook {
    padding: 0;
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: shade($base_color, 0.7);
    border-radius: 0;
    background-color: $base_color;
    background-image: none;
    background-clip: border-box;

    -GtkNotebook-initial-gap: 0;
    -GtkNotebook-arrow-spacing: 5;
    -GtkNotebook-tab-curvature: 0;
    -GtkNotebook-tab-overlap: 1;
    -GtkNotebook-has-tab-gap: false;
}

.notebook.frame {
    border-width: 1px;
}

.notebook.header {
    border-width: 0;
    background-color: shade($base_color, 0.85);
}

.notebook.header.frame {
    border-color: shade($base_color, 0.75);
}

.notebook.header.frame.top {
    border-width: 1px 1px 0 1px;
}

.notebook.header.frame.right {
    border-width: 1px 1px 1px 0;
}

.notebook.header.frame.bottom {
    border-width: 0 1px 1px 1px;
}

.notebook.header.frame.left {
    border-width: 1px 0 1px 1px;
}

.notebook GtkViewport {
    border-width: 0;
    background-color: $base_color;
    color: $text_color;
}

.notebook tab {
    padding: 4px 6px;
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
    background-color: transparent;
    background-image: none;
}

.notebook tab:active {
    background-color: transparent;
    background-image: none;
}

.notebook tab.top {
    border-bottom-width: 2px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.notebook tab.top:hover {
    border-bottom-color: alpha($selected_bg_color, 0.3);
}

.notebook tab.top:active {
    border-bottom-color: $selected_bg_color;
}

.notebook tab.right {
    border-left-width: 2px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.notebook tab.right:hover {
    border-left-color: alpha($selected_bg_color, 0.3);
}

.notebook tab.right:active {
    border-left-color: $selected_bg_color;
}

.notebook tab.bottom {
    border-top-width: 2px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.notebook tab.bottom:hover {
    border-top-color: alpha($selected_bg_color, 0.3);
}

.notebook tab.bottom:active {
    border-top-color: $selected_bg_color;
}

.notebook tab.left {
    border-right-width: 2px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.notebook tab.left:hover {
    border-right-color: alpha($selected_bg_color, 0.3);
}

.notebook tab.left:active {
    border-right-color: $selected_bg_color;
}

.notebook tab GtkLabel {
    color: mix($text_color, $base_color, 0.3);
}

.notebook .prelight-page,
.notebook .prelight-page GtkLabel {
    color: mix($text_color, $base_color, 0.15);
}

.notebook .active-page,
.notebook .active-page GtkLabel {
    color: $text_color;
}

.notebook tab.reorderable-page:hover {
    background-color: shade($base_color, 0.85);
    border-left: 0;
    border-right: 0;
    /* using box shadows instead of borders due to slanted edges */
    box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03),
        inset 1px 0 shade($base_color, 0.7), inset -1px 0 shade($base_color, 0.7);
}

.notebook tab.reorderable-page:active {
    background-color: shade($base_color, 0.90);
    border-left: 0;
    border-right: 0;
    box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03),
        inset 1px 0 shade($base_color, 0.75), inset -1px 0 shade($base_color, 0.75);
}

/* close button styling */
.notebook tab .button,
.notebook tab .button:active,
.notebook tab .button:hover {
    padding: 1px;
    border-width: 1px;
    border-radius: 2px;
    border-style: solid;
    border-color: transparent;
    background-image: none;
    background-color: transparent;
    color: mix($text_color, $base_color, 0.5);
}

.notebook tab .button:hover {
    color: $text_color;
    border-color: shade($base_color, 0.8);
}

.notebook tab .button:active,
.notebook tab .button:active:hover {
    border-color: shade($base_color, 0.7);
    background-color: shade($base_color, 0.95);
}



/*************
* scrollbar *
*************/
.scrollbar {
    border-width: 1px;
    border-style: solid;
    padding: 0;
}

.scrollbars-junction,
.scrollbar.trough {
    border-width: 0;
    border-radius: 0;
    background-color: $bg_color;
    background-image: none;
}

.scrollbar.button,
.scrollbar.button:active,
.scrollbar.button:active:hover {
    border-width: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: none;
    color: shade($bg_color, 0.6);
}

.scrollbar.slider {
    border-width: 1px;
    border-color: mix(shade($bg_color, 0.87), $fg_color, 0.21);
    border-radius: 0;
    background-color: mix($bg_color, $fg_color, 0.21);
}

.scrollbar.slider:hover,
.scrollbar.slider.vertical:hover {
    border-color: mix(shade($bg_color, 0.87), $fg_color, 0.31);
    background-color: mix($bg_color, $fg_color, 0.31);
}

.scrollbar.slider:active,
.scrollbar.slider.vertical:active {
    border-color: shade($selected_bg_color, 0.9);
    background-color: $selected_bg_color;
}

.scrollbar.slider.fine-tune:prelight:active {
    border-width: 2px;
    border-color: transparent;
}

/* overlay scrollbar */
OsThumb {
    color: shade($bg_color, 0.7);
}

OsThumb:selected,
OsScrollbar:selected {
    background-color: $selected_bg_color;
}

OsThumb:active,
OsScrollbar:active {
    background-color: $selected_bg_color;
}

OsThumb:insensitive,
OsScrollbar:insensitive {
    background-color: shade($bg_color, 0.9);
}

/*************
* separator *
*************/
.view.separator,
.separator {
    border-width: 1px;
    border-style: solid;
    border-color: shade($bg_color, 0.9);
    color: shade($bg_color, 0.9);
}

.button .separator,
.button.separator {
    border-color: shade($bg_color, 0.95);
}

.button .separator:insensitive,
.button.separator:insensitive {
    border-color: shade($bg_color, 0.85);
}

.primary-toolbar GtkSeparatorToolItem,
.primary-toolbar .separator,
.primary-toolbar .separator:insensitive,
.toolbar GtkSeparatorToolItem,
.toolbar .separator,
.toolbar .separator:insensitive {
    -GtkWidget-window-dragging: true;

    border-color: shade($toolbar_bg_color, 0.95);
    color: shade($toolbar_bg_color, 0.95);
}

.header-bar GtkSeparatorToolItem,
.header-bar .separator,
.header-bar .separator:insensitive,
.titlebar GtkSeparatorToolItem,
.titlebar .separator,
.titlebar .separator:insensitive {
    -GtkWidget-window-dragging: true;

    border-color: shade($titlebar_bg_color, 0.95);
    color: shade($titlebar_bg_color, 0.95);
}

.primary-toolbar .button .separator,
.primary-toolbar .button.separator,
.toolbar .button .separator,
.toolbar .button.separator {
    border-color: shade($toolbar_bg_color, 0.95);
}

.header-bar .button .separator,
.header-bar .button.separator,
.titlebar .button .separator,
.titlebar .button.separator {
    border-color: shade($titlebar_bg_color, 0.95);
}

.primary-toolbar .button .separator:insensitive,
.primary-toolbar .button.separator:insensitive,
.toolbar .button .separator:insensitive,
.toolbar .button.separator:insensitive {
    border-color: shade($toolbar_bg_color, 0.85);
}

.header-bar .button .separator:insensitive,
.header-bar .button.separator:insensitive,
.titlebar .button .separator:insensitive,
.titlebar .button.separator:insensitive {
    border-color: shade($titlebar_bg_color, 0.85);
}

.menuitem.separator {
    -GtkMenuItem-horizontal-padding: 0;
    -GtkWidget-separator-height: 1;

    border-style: none;
    color: shade($menu_bg_color, 0.9);
}

GtkComboBox .separator {
    /* always disable separators */
    -GtkWidget-wide-separators: true;
    -GtkWidget-horizontal-separator: 0;
    -GtkWidget-vertical-separator: 0;

    border-style: none;
}

/**************
* spinbutton *
**************/
.spinbutton .button {
    color: mix($text_color, $base_color, 0.4);
    padding: 2px 4px;
    border-width: 0;
    border-radius: 0;
    border-style: none;
    background-color: transparent;
    background-image: none;
    box-shadow: inset 1px 0 shade($base_color, 0.9);
}

.spinbutton .button:insensitive {
    color: mix($text_color, $base_color, 0.7);
    box-shadow: inset 1px 0 shade($bg_color, 0.95);
}

.spinbutton .button:active,
.spinbutton .button:hover {
    color: $fg_color;
}

.spinbutton .button:first-child {
    border-radius: 2px 0 0 2px;
    box-shadow: none;
}

.spinbutton .button:last-child {
    border-radius: 0 2px 2px 0;
}

.spinbutton .button:dir(rtl) {
    box-shadow: inset -1px 0 shade($base_color, 0.9);
}

.spinbutton.vertical .button {
    border-width: 1px;
    border-style: solid;
    border-color: shade($bg_color, 0.8);
    border-radius: 2px;
    background-color: shade($bg_color, 1.08);
    background-image: none;
    color: $fg_color;
    box-shadow: none;
}

.spinbutton.vertical .button:hover {
    border-color: shade($bg_color, 0.7);
    background-color: shade($bg_color, 1.10);
    background-image: none;
}

.spinbutton.vertical .button:active {
    border-color: shade($bg_color, 0.8);
    background-color: shade($bg_color, 0.95);
    background-image: none;
}

.spinbutton.vertical .button:active:hover {
    border-color: shade($bg_color, 0.7);
}

.spinbutton.vertical .button:focus,
.spinbutton.vertical .button:hover:focus,
.spinbutton.vertical .button:active:focus,
.spinbutton.vertical .button:active:hover:focus {
    border-color: shade($bg_color, 0.7);
}

.spinbutton.vertical .button:insensitive {
    border-color: shade($bg_color, 0.85);
    background-color: shade($bg_color, 0.9);
    background-image: none;
}

.spinbutton.vertical .button:first-child {
    border-width: 1px;
    border-bottom-width: 0;
    border-radius: 2px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.spinbutton.vertical .button:last-child {
    border-width: 1px;
    border-top-width: 0;
    border-radius: 2px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.spinbutton.vertical.entry {
    border-width: 1px;
    border-style: solid;
    border-radius: 0;
}


/*************
* statusbar *
*************/
GtkStatusbar {
    padding: 4px;
    color: $fg_color;
}

/*****************
* color chooser *
*****************/
GtkColorSwatch,
GtkColorSwatch:selected {
    border-width: 1px;
    border-style: solid;
    border-color: alpha(black, 0.1);
    border-radius: 1px;
    background-color: transparent;
    background-clip: border-box;
}

GtkColorSwatch:hover,
GtkColorSwatch:selected:hover {
    border-color: alpha(black, 0.3);
}

GtkColorSwatch.color-dark:hover {
}

GtkColorSwatch.color-light:hover {
}

GtkColorSwatch.color-light:selected:hover,
GtkColorSwatch.color-dark:selected:hover {
    background-image: none;
}

GtkColorSwatch.left,
GtkColorSwatch:first-child {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

GtkColorSwatch.right,
GtkColorSwatch:last-child {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

GtkColorSwatch:only-child {
    border-radius: 2px;
}

GtkColorSwatch.top {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

GtkColorSwatch.bottom {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

GtkColorChooserWidget #add-color-button {
    background-clip: padding-box;
    border-color: alpha(black, 0.1);
    background-color: shade($bg_color, 0.95);
    color: $fg_color;
}

GtkColorChooserWidget #add-color-button:hover {
    border-color: alpha(black, 0.3);
    background-color: shade($bg_color, 0.90);
    color: $fg_color;
}

.color-active-badge,
.color-active-badge:selected {
    border-width: 1px;
    border-style: solid;
    border-width: 2px;
    background-color: transparent;
}

.color-active-badge.color-light,
.color-active-badge.color-light:hover {
    border-color: alpha(black, 0.3);
    color: alpha(black, 0.3);
}

.color-active-badge.color-dark,
.color-active-badge.color-dark:hover {
    border-color: alpha(white, 0.3);
    color: alpha(white, 0.3);
}

GtkColorEditor GtkColorSwatch {
    border-radius: 2px;
}

GtkColorEditor GtkColorSwatch.color-dark:hover,
GtkColorEditor GtkColorSwatch.color-light:hover {
    background-image: none;
    border-color: alpha(black, 0.3);
}

GtkColorButton.button {
    padding: 2px;
}

/***********
* tooltip *
***********/
.tooltip {
    border-width: 1px;
    border-style: solid;
    border-color: shade($tooltip_bg_color, 0.8);
    border-radius: 2px;
    background-color: $tooltip_bg_color;
    background-image: none;
    color: $tooltip_fg_color;
}

.tooltip * {
    background-color: transparent;
}



/**************
* action-bar *
**************/
.action-bar {
    padding: 4px;
    border-width: 1px 0 0 0;
    border-style: solid;
    border-color: shade($bg_color, 0.8);
    background-color: $bg_color;
    background-image: none;
    color: $fg_color;
}

.action-bar .button.text-button {
    padding: 4px;
}

.action-bar .button.image-button {
    padding: 6px;
}

.action-bar .title {
    font: bold;
    padding: 0 12px;
}

.action-bar .subtitle {
    font: smaller;
    padding: 0 12px;
}

/***************
* search bars *
***************/
.search-bar {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: shade($bg_color, 0.8);
    background-color: shade($bg_color, 0.98);
}

.search-bar .button.close-button {
    padding: 4px;
}

/***********
* dialogs *
***********/
GtkMessageDialog,
.prompt {
    -GtkDialog-content-area-border: 0;
    -GtkDialog-action-area-border: 0;
    -GtkDialog-button-spacing: 0;

    margin: 0;
    padding: 0;
}

/********************
* various choosers *
********************/
GtkFontButton .separator,
GtkFileChooserButton .separator {
    /* always disable separators */
    -GtkWidget-wide-separators: true;
    -GtkWidget-horizontal-separator: 0;
    -GtkWidget-vertical-separator: 0;
}

GtkFontButton GtkLabel:last-child {
    color: alpha(currentColor, 0.7);
}

GtkFileChooserButton GtkImage:last-child {
    color: alpha(currentColor, 0.7);
}

GtkFileChooser .pane-separator,
GtkFileChooser .pane-separator:hover {
    border-width: 0 1px 0 0;
    border-style: solid;
    border-color: shade($bg_color, 0.8);
    background-color: $bg_color;
    color: shade($bg_color, 0.9);
}

/* for fallback when header bar not used */
GtkFileChooser .dialog-action-box {
    border-width: 1px 0 0;
    border-style: solid;
    border-color: shade($bg_color, 0.7);
}

/*********************
* app notifications *
*********************/
.app-notification {
    border-style: solid;
    border-color: shade($base_color, 0.8);
    border-width: 0 1px 1px 1px;
    border-radius: 0 0 2px 2px;
    padding: 8px;
    background-color: $base_color;
    background-image: none;
    color: $text_color;
}

/*******
* osd *
*******/
//.background.osd {
//    color: $osd_fg;
//    background-color: $osd_bg;
//}
//
//GtkOverlay.osd {
//    background-color: transparent;
//}
//
//.osd.frame {
//    background-clip: border-box;
//    background-origin: border-box;
//}
//
//.osd.button,
//.osd .button {
//    padding: 4px;
//    border-width: 1px;
//    border-style: solid;
//    border-color: shade($osd_bg, 0.8);
//    border-radius: 2px;
//    background-color: shade($osd_bg, 1.08);
//    background-image: none;
//    color: $osd_fg;
//}
//
//.osd.button:prelight,
//.osd.button:hover,
//.osd .button:hover {
//    border-color: shade($osd_bg, 0.7);
//    background-color: shade($osd_bg, 1.10);
//    background-image: none;
//}
//
//.osd.button:active,
//.osd .button:active,
//.osd GtkMenuButton.button:active {
//    border-color: shade($osd_bg, 0.8);
//    background-color: shade($osd_bg, 0.95);
//    background-image: none;
//}
//
//.osd.button:active:hover,
//.osd .button:active:hover,
//.osd GtkMenuButton.button:active:hover {
//    border-color: shade($osd_bg, 0.7);
//}
//
//.osd.button:insensitive,
//.osd .button:insensitive {
//    border-color: shade($osd_bg, 0.85);
//    background-color: shade($osd_bg, 0.9);
//    background-image: none;
//}
//
//.osd.button:active *:insensitive,
//.osd .button:active *:insensitive {
//    background-color: shade($osd_bg, 0.80);
//    background-image: none;
//}
//
//.osd.toolbar {
//    -GtkToolbar-button-relief: normal;
//
//    padding: 4px;
//    border-width: 1px;
//    border-style: solid;
//    border-radius: 2px;
//    border-color: shade($osd_bg, 0.8);
//    background-color: $osd_bg;
//    background-image: none;
//    color: $osd_fg;
//}
//
//.osd.toolbar .button {
//    padding: 4px;
//    border-width: 1px;
//    border-style: solid;
//    border-color: shade($osd_bg, 0.8);
//    border-radius: 2px;
//    background-color: shade($osd_bg, 1.08);
//    background-image: none;
//    color: $osd_fg;
//}
//
//.osd.toolbar .button:hover {
//    border-color: shade($osd_bg, 0.7);
//    background-color: shade($osd_bg, 1.10);
//    background-image: none;
//}
//
//.osd.toolbar .button:active {
//    border-color: shade($osd_bg, 0.8);
//    background-color: shade($osd_bg, 0.95);
//    background-image: none;
//}
//
//.osd.toolbar .button:active:hover {
//    border-color: shade($osd_bg, 0.7);
//}
//
//.osd.toolbar .button:focus,
//.osd.toolbar .button:hover:focus,
//.osd.toolbar .button:active:focus,
//.osd.toolbar .button:active:hover:focus {
//    border-color: shade($osd_bg, 0.7);
//}
//
//.osd.toolbar .button:insensitive {
//    border-color: shade($osd_bg, 0.85);
//    background-color: shade($osd_bg, 0.9);
//    background-image: none;
//}
//
//.osd.toolbar .button:active *:insensitive {
//    border-color: shade($osd_bg, 0.75);
//    background-color: shade($osd_bg, 0.80);
//    background-image: none;
//}
//
//.osd.toolbar .button:first-child {
//    border-radius: 2px 0 0 2px;
//    border-width: 1px 0 1px 1px;
//    box-shadow: inset -1px 0 shade($osd_bg, 0.9);
//}
//
//.osd.toolbar .button:last-child {
//    box-shadow: none;
//    border-radius: 0 2px 2px 0;
//    border-width: 1px 1px 1px 0;
//}
//
//.osd.toolbar .button:only-child,
//.osd.toolbar GtkToolButton .button,
//.osd.toolbar GtkToolButton:only-child .button,
//.osd.toolbar GtkToolButton:last-child .button,
//.osd.toolbar GtkToolButton:first-child .button {
//    border-width: 1px;
//    border-radius: 2px;
//    border-style: solid;
//}
//
//.osd.toolbar .separator {
//    color: shade($osd_bg, 0.9);
//}
//
///* used by gnome-settings-daemon's media-keys OSD */
//.osd.trough {
//    background-color: shade($osd_bg, 0.8);
//}
//
//.osd.progressbar {
//    background-color: $osd_fg;
//}
//
//.osd .scale.slider {
//    background-color: shade($osd_bg, 1.08);
//    background-image: none;
//    /* we will draw the border using box shadow for now */
//    box-shadow: inset 1px 0 shade($osd_bg, 0.8),
//        inset 0 1px shade($osd_bg, 0.8),
//        inset -1px 0 shade($osd_bg, 0.8),
//        inset 0 -1px shade($osd_bg, 0.8);
//}
//
//.osd .scale.slider:hover {
//    box-shadow: inset 1px 0 shade($osd_bg, 0.7),
//        inset 0 1px shade($osd_bg, 0.7),
//        inset -1px 0 shade($osd_bg, 0.7),
//        inset 0 -1px shade($osd_bg, 0.7);
//}
//
//.osd .scale.slider:insensitive {
//    background-color: shade($osd_bg, 0.9);
//    background-image: none;
//    box-shadow: inset 1px 0 shade($osd_bg, 0.85),
//        inset 0 1px shade($osd_bg, 0.85),
//        inset -1px 0 shade($osd_bg, 0.85),
//        inset 0 -1px shade($osd_bg, 0.85);
//}
//
//.osd .scale.trough {
//    border-color: shade($osd_bg, 0.8);
//    background-color: shade($osd_bg, 1.08);
//    background-image: none;
//}
//
//.osd .scale.trough.highlight {
//    border-color: $selected_bg_color;
//    background-color: $selected_bg_color;
//    background-image: none;
//}
//
//.osd .scale.trough:insensitive,
//.osd .scale.trough.highlight:insensitive {
//    border-color: shade($osd_bg, 0.85);
//    background-color: shade($osd_bg, 0.9);
//    background-image: none;
//}
//
//.osd GtkProgressBar,
//GtkProgressBar.osd {
//    -GtkProgressBar-xspacing: 0;
//    -GtkProgressBar-yspacing: 2px;
//    -GtkProgressBar-min-horizontal-bar-height: 2px;
//
//    padding: 0;
//}
//
//.osd GtkProgressBar.trough,
//GtkProgressBar.osd.trough {
//    padding: 0;
//    border-style: none;
//    border-radius: 0;
//    background-image: none;
//    background-color: transparent;
//}
//
//.osd GtkProgressBar.progressbar,
//GtkProgressBar.osd.progressbar {
//    border-style: none;
//    border-radius: 0;
//    background-color: $selected_bg_color;
//    background-image: none;
//}
//
//.osd .view,
//.osd.view {
//    background-color: $osd_base;
//}
//
//.osd .scrollbar.trough {
//    background-color: $osd_bg;
//}
//
//.osd .scrollbar.slider {
//    border-width: 1px;
//    border-color: mix(shade($osd_base, 0.87), $osd_fg, 0.21);
//    border-radius: 0;
//    background-color: mix($osd_base, $osd_fg, 0.21);
//}
//
//.osd .scrollbar.slider:hover {
//    border-color: mix(shade($osd_base, 0.87), $osd_fg, 0.31);
//    background-color: mix($osd_base, $osd_fg, 0.31);
//}
//
//.osd .scrollbar.slider:active {
//    border-color: shade($selected_bg_color, 0.9);
//    background-color: $selected_bg_color;
//}
//
//.osd GtkIconView.cell:selected,
//.osd GtkIconView.cell:selected:focus {
//    background-color: transparent;
//    border-style: solid;
//    border-radius: 2px;
//    border-width: 3px;
//    border-color: $osd_fg;
//    outline-color: transparent;
//}
//
///* used by Documents */
//.osd .page-thumbnail {
//    border-style: solid;
//    border-width: 1px;
//    border-color: shade($osd_bg, 0.9);
//    /* when there's no pixbuf yet */
//    background-color: $osd_bg;
//}

/******************************
* destructive action buttons *
******************************/
.destructive-action.button {
    border-width: 1px;
    border-style: solid;
    border-color: shade($error_color, 0.8);
    border-radius: 2px;
    background-color: $error_color;
    background-image: none;
    color: mix($selected_fg_color, $error_color, 0.1);
}

.destructive-action.button:hover {
    border-color: shade($error_color, 0.7);
    background-color: shade($error_color, 1.12);
    background-image: none;
}

.destructive-action.button:active {
    border-color: shade($error_color, 0.8);
    background-color: shade($error_color, 0.87);
    background-image: none;
}

.destructive-action.button:hover:active {
    border-color: shade($error_color, 0.7);
}

/******************************
* suggested action buttons *
******************************/
.suggested-action.button {
    border-width: 1px;
    border-style: solid;
    border-color: shade($selected_bg_color, 0.9);
    border-radius: 2px;
    background-color: shade($selected_bg_color, 1.18);
    background-image: none;
    color: mix($selected_fg_color, $selected_bg_color, 0.1);
}

.suggested-action.button:hover {
    border-color: shade($selected_bg_color, 0.8);
    background-color: shade($selected_bg_color, 1.20);
    background-image: none;
}

.suggested-action.button:active {
    border-color: shade($selected_bg_color, 0.9);
    background-color: shade($selected_bg_color, 1.05);
    background-image: none;
}

.suggested-action.button:hover:active {
    border-color: shade($selected_bg_color, 0.8);
}

/******************
* selection mode *
******************/
.selection-mode.header-bar,
.selection-mode.toolbar {
    border-style: solid;
    border-color: $selected_bg_color;
    background-color: shade($selected_bg_color, 1.6);
    background-image: none;
    color: $selected_bg_color;
}

.selection-mode.header-bar {
    border-top-color: shade($selected_bg_color, 1.6);
    border-bottom-color: $selected_bg_color;
}

.selection-mode.toolbar {
    padding: 4px;
}

/* regular button */
.selection-mode.header-bar .button,
.selection-mode.toolbar .button,
.selection-mode.toolbar GtkToolButton .button {
    border-width: 1px;
    border-style: solid;
    border-color: $selected_bg_color;
    border-radius: 2px;
    background-color: shade($selected_bg_color, 1.68);
    background-image: none;
    color: shade($selected_bg_color, 0.8);
}

.selection-mode.header-bar .button:hover,
.selection-mode.toolbar .button:hover,
.selection-mode.toolbar GtkToolButton .button:hover {
    border-color: shade($selected_bg_color, 0.9);
    background-color: shade($selected_bg_color, 1.70);
    background-image: none;
}

.selection-mode.header-bar .button:active,
.selection-mode.toolbar .button:active,
.selection-mode.toolbar GtkToolButton .button:active {
    border-color: shade($selected_bg_color, 0.9);
    background-color: shade($selected_bg_color, 1.55);
    background-image: none;
}

.selection-mode.header-bar .button:hover:active,
.selection-mode.toolbar .button:hover:active,
.selection-mode.toolbar GtkToolButton .button:hover:active {
    border-color: shade($selected_bg_color, 0.8);
}

/* suggested button */
.selection-mode.header-bar .suggested-action.button,
.selection-mode.toolbar .suggested-action.button,
.selection-mode.toolbar GtkToolButton.suggested-action .button {
    border-width: 1px;
    border-style: solid;
    border-color: shade($selected_bg_color, 0.9);
    border-radius: 2px;
    background-color: shade($selected_bg_color, 1.18);
    background-image: none;
    color: mix($selected_fg_color, $selected_bg_color, 0.1);
}

.selection-mode.header-bar .suggested-action.button:hover,
.selection-mode.toolbar .suggested-action.button:hover,
.selection-mode.toolbar GtkToolButton.suggested-action .button:hover {
    border-color: shade($selected_bg_color, 0.8);
    background-color: shade($selected_bg_color, 1.20);
    background-image: none;
}

.selection-mode.header-bar .suggested-action.button:active,
.selection-mode.toolbar .suggested-action.button:active,
.selection-mode.toolbar GtkToolButton.suggested-action:active {
    border-color: shade($selected_bg_color, 0.9);
    background-color: shade($selected_bg_color, 1.05);
    background-image: none;
}

.selection-mode.header-bar .suggested-action.button:hover:active,
.selection-mode.toolbar .suggested-action.button:hover:active,
.selection-mode.toolbar GtkToolButton.suggested-action .button:hover:active {
    border-color: shade($selected_bg_color, 0.8);
}

/* menu button */
.selection-mode.header-bar .selection-menu.button,
.selection-mode.toolbar .selection-menu.button {
    border-style: none;
    background-color: transparent;
    background-image: none;
    color: shade($selected_bg_color, 0.8);
}

.selection-mode.toolbar .dim-label,
.selection-mode.toolbar .selection-menu.button .dim-label {
    color: shade($selected_bg_color, 0.7);
}

.selection-mode.header-bar .selection-menu.button:hover,
.selection-mode.toolbar .dim-label:hover,
.selection-mode.toolbar .selection-menu.button:hover,
.selection-mode.toolbar .selection-menu.button .dim-label:hover {
    color: shade($selected_bg_color, 0.7);
}

.selection-mode.header-bar .selection-menu.button:active,
.selection-mode.toolbar .selection-menu.button:active {
    color: shade($selected_bg_color, 0.8);
    box-shadow: none;
}

/*************************
* touch text selections *
*************************/
GtkBubbleWindow {
    border-radius: 2px;
    background-clip: border-box;
}

GtkBubbleWindow.osd.background {
    //    background-color: $osd_bg;
}

GtkBubbleWindow .toolbar {
    background-color: transparent;
}