gtk2/gtk/resources/theme/Adwaita/_common.scss

2783 lines
79 KiB
SCSS
Raw Normal View History

@function gtkalpha($c,$a) {
@return unquote("alpha(#{$c},#{$a})");
}
* {
padding: 0;
-GtkToolButton-icon-spacing: 4;
-GtkTextView-error-underline-color: $error_color;
-GtkPaned-handle-size: 1;
-GtkCheckButton-indicator-size: 16;
-GtkCheckMenuItem-indicator-size: 16;
// The size for scrollbars. The slider is 2px smaller, but we keep it
// up so that the whole area is sensitive to button presses for the
// slider. The stepper button is larger in both directions, the slider
// only in the width
-GtkScrolledWindow-scrollbar-spacing: 0;
-GtkScrolledWindow-scrollbars-within-bevel: 1;
-GtkToolItemGroup-expander-size: 11;
-GtkExpander-expander-size: 16;
-GtkTreeView-expander-size: 11;
-GtkTreeView-horizontal-separator: 4;
-GtkMenu-horizontal-padding: 0;
-GtkMenu-vertical-padding: 0;
-GtkWidget-link-color: $link_color;
-GtkWidget-visited-link-color: $link_color;
2014-06-14 13:37:36 +00:00
-GtkWidget-focus-padding: 2; // FIXME: do we still need these?
-GtkWidget-focus-line-width: 1; //
-GtkDialog-button-spacing: 4;
-GtkDialog-action-area-border: 0;
-GtkStatusbar-shadow-type: none;
// We use the outline properties to signal the focus properties
// to the adwaita engine: using real CSS properties is faster,
// and we don't use any outlines for now.
outline-color: transparentize($fg_color, 0.7);
outline-style: dashed;
outline-offset: -3px;
outline-width: 1px;
outline-radius: 2px;
}
/***************
* Base States *
***************/
.background {
color: $fg_color;
background-color: $bg_color;
}
.background:backdrop {
text-shadow: none;
icon-shadow: none;
color: lighten($fg_color,10%);
background-color: $backdrop_bg_color;
}
/*
These wildcard seems unavoidable, need to investigate.
Wildcards are bad and troublesome, use them with care,
or better, just don't.
Everytime a wildcard is used a kitten dies, painfully.
*/
*:insensitive {
-gtk-image-effect: dim;
}
.gtkstyle-fallback {
background-color: $bg_color;
color: $fg_color;
&:prelight {
background-color: lighten($bg_color, 10%);
color: $fg_color;
}
&:active {
background-color: darken($bg_color, 10%);
color: $fg_color;
}
&:insensitive {
background-color: $insensitive_bg_color;
color: $insensitive_fg_color;
}
&:selected {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
}
.view {
color: $fg_color;
background-color: $base_color;
&:backdrop {
color: $backdrop_fg_color;
background-color: $backdrop_base_color;
}
&:selected,
&:selected:focus,
&:selected:hover {
@extend %selected_items;
}
}
2014-06-19 17:11:02 +00:00
.rubberband {
border: 1px solid $selected_bg_color;
background-color: transparentize($selected_bg_color,0.8);
}
// This is used by GtkScrolledWindow, when rendering the edge
// gradient shown when content is touch-dragged past boundaries.
// The color is used as a base for such gradient, which is then
// stretched/modified as a direct result of user interaction.
.overshoot {
background-color: transparentize($selected_bg_color,0.8);
}
GtkLabel {
&.separator {
color: $fg_color;
@extend .dim-label;
&:backdrop { color: $backdrop_fg_color; }
}
&:selected,
&:selected:focus,
2014-08-26 17:24:44 +00:00
&:selected:hover {
@extend %selected_items;
}
&:insensitive {
color: $insensitive_fg_color;
2014-08-26 17:24:44 +00:00
&:backdrop { color: $backdrop_insensitive_color; }
}
}
2014-07-07 11:30:24 +00:00
.dim-label {
opacity: 0.55;
text-shadow: none;
2014-07-07 11:30:24 +00:00
}
GtkAssistant {
2014-08-26 15:51:45 +00:00
.sidebar {
background-color: $base_color;
2014-08-26 15:51:45 +00:00
border-top: 1px solid $borders_color;
&:dir(ltr) { border-right: 1px solid $borders_color; }
&:dir(rtl) { border-left: 1px solid $borders_color; }
2014-08-26 15:51:45 +00:00
&:backdrop {
background-color: $backdrop_base_color;
border-color: $backdrop_borders_color;
}
}
2014-08-26 15:51:45 +00:00
&.csd .sidebar { border-top-style: none; }
.sidebar GtkLabel {
padding: 6px 12px;
}
2014-08-26 15:51:45 +00:00
.sidebar GtkLabel.highlight {
background-color: mix($bg_color, $fg_color, 80%);
}
}
GtkTextView { // This will get overridden by .view, needed by gedit line numbers
background-color: mix($bg_color, $base_color, 50%);
&:backdrop { background-color: mix($backdrop_bg_color,
$backdrop_base_color, 50%); }
}
GtkFlowBox .grid-child {
padding: 3px;
border-radius: 3px;
&:selected {
@extend %selected_items;
outline-offset: -2px;
}
}
2014-08-26 14:54:19 +00:00
%osd, .osd {
color: $osd_fg_color;
outline-color: transparentize($osd_fg_color, 0.7);
text-shadow: 0 1px black;
2014-08-26 14:54:19 +00:00
icon-shadow: 0 1px black;
&:backdrop { text-shadow: none; }
}
/*********************
* Spinner Animation *
*********************/
@keyframes spin {
to { -gtk-icon-transform: rotate(1turn); }
}
.spinner {
background-image: none;
background-color: blue;
opacity: 0; // non spinning spinner makes no sense
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
&:active {
opacity: 1;
animation: spin 1s linear infinite;
&:insensitive {
opacity: 0.5;
}
}
}
/****************
* Text Entries *
****************/
.entry {
border: 1px solid;
padding: 5px 8px 6px;
2014-07-23 13:25:22 +00:00
&.image { // icons inside the entry
&.left { padding-left: 0; }
&.right { padding-right: 0; }
}
border-radius: 3px;
transition: all 200ms ease-out;
@include entry(normal);
2014-06-27 12:24:53 +00:00
&.flat, &.flat:focus {
padding: 2px;
@include entry(normal, $edge:none);
2014-06-27 12:24:53 +00:00
border: none;
border-radius: 0;
}
&:focus { @include entry(focus); }
&:insensitive { @include entry(insensitive); }
&:backdrop { @include entry(backdrop); }
&:backdrop:insensitive { @include entry(backdrop-insensitive); }
&:selected, &:backdrop:selected {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
&:selected,
&:selected:focus {
@extend %selected_items;
}
&.progressbar {
margin: 1px;
border-radius: 0;
border-width: 0 0 2px;
border-color: $selected_bg_color;
border-style: solid;
background-image: none;
background-color: transparent;
box-shadow: none;
&:backdrop { background-color: transparent; }
}
2014-08-06 11:20:45 +00:00
.linked & { //FIXME: use same buttons linking logic and template
&:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
&:dir(rtl) { border-right-style: none;}
}
&:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-style: none;
&:dir(rtl) { border-left-style: solid; }
}
}
&.error {
color: $error_color;
border-color: $error_color;
&:focus { @include entry(focus, $error_color); }
&:selected, &:selected:focus {
background-color: $error_color;
}
@if $variant == 'dark' {
&:selected:focus { color: $base_color; }
&:selected:backdrop { color: $backdrop_base_color; }
}
}
&.warning {
color: $warning_color;
border-color: $warning_color;
&:focus { @include entry(focus, $warning_color); }
&:selected, &:selected:focus {
background-color: $warning_color;
}
@if $variant == 'dark' {
&:selected:focus { color: $base_color; }
&:selected:backdrop { color: $backdrop_base_color; }
}
}
&.image { // entry icons colors
color: mix($fg_color,$base_color,80%);
&:hover { color: $fg_color; }
&:active { color: $selected_bg_color; }
&:backdrop { color: mix($backdrop_fg_color,$backdrop_base_color,80%); }
}
}
/***********
* Buttons *
***********/
// stuff for .needs-attention
$_dot_color: if($variant=='light', $selected_bg_color,
lighten($selected_bg_color,15%));
@keyframes needs_attention {
from {
background-image: -gtk-gradient(radial,
center center, 0,
center center, 0.01,
to($_dot_color),
to(transparent));
}
to {
background-image: -gtk-gradient(radial,
center center, 0,
center center, 0.5,
to($selected_bg_color),
to(transparent));
}
}
.button {
border: 1px solid;
border-radius: 3px;
transition: all 200ms ease-out;
padding: 5px 8px 6px;
@include button(normal);
&.flat { @include button(undecorated); }
&:hover {
@include button(hover);
2014-06-18 17:38:14 +00:00
-gtk-image-effect: highlight;
}
&:active, &:checked {
@include button(active);
transition-duration: 50ms;
}
&:backdrop, &.flat:backdrop {
@include button(backdrop);
-gtk-image-effect: none;
&:active, &:checked {
@include button(backdrop-active);
}
&:insensitive {
@include button(backdrop-insensitive);
}
&:insensitive:active, &:insensitive:checked {
@include button(backdrop-insensitive-active);
}
}
&.flat:backdrop {
@include button(undecorated);
}
&:insensitive {
@include button(insensitive);
&:active, &:checked {
@include button(insensitive-active);
}
}
2014-07-07 11:26:09 +00:00
// big standalone buttons like in Documents pager
&.osd {
&.image-button { padding: 13px; }
2014-07-07 11:26:09 +00:00
color: $osd_fg_color;
border-radius: 6px;
outline-color: transparentize($osd_fg_color, 0.8);
2014-07-07 11:26:09 +00:00
@include button(osd);
border-color: $osd_outer_borders_color;
box-shadow: none;
&:hover {
@include button(osd-hover);
border-color: $osd_outer_borders_color;
box-shadow: none;
}
&:active, &:checked {
@include button(osd-active);
border-color: $osd_outer_borders_color;
box-shadow: none
}
&:insensitive, &:backdrop:insensitive {
@include button(osd-insensitive);
border-color: $osd_outer_borders_color;
// FIXME: if this state actually exists we should probably make the button
// disappear
}
&:backdrop {
@include button(osd-backdrop);
border-color: $osd_outer_borders_color;
}
2014-07-07 11:26:09 +00:00
}
//overlay / OSD style
.osd & {
// FIXME: for some reason I can't figure out the bookmark button in gnome
// documents gets borders radius 0, when they get backdrop and
// another state
@include button(osd);
// there's a problem with sass which prevents it to extend the linked
// placeholder as expected, it should just be "@extend %linked;", the
// placeholder is basically replicated here
//
// Workaround START
border-radius: 0;
border-left-style: none;
&:dir(rtl) {
border-radius: 0;
border-right-style: none;
border-left-style: solid
}
&:first-child {
border-radius: 3px 0 0 3px;
border-left-style: solid;
}
&:last-child {
border-radius: 0 3px 3px 0;
&:dir(rtl) { border-right-style: solid; }
}
&:only-child {
border-radius: 3px;
border-style: solid;
}
// Workaround END
2014-08-06 11:20:45 +00:00
&:hover {
@include button(osd-hover);
@extend %linked;
}
&:active, &:checked, &:backdrop:active, &:backdrop:checked {
2014-08-06 11:20:45 +00:00
@include button(osd-active);
@extend %linked;
}
&:insensitive, &:backdrop:insensitive {
2014-08-06 11:20:45 +00:00
@include button(osd-insensitive);
@extend %linked;
}
&:backdrop {
@include button(osd-backdrop);
@extend %linked;
}
}
// Suggested and Destructive Action buttons
@each $b_type, $b_color in (suggested-action, $selected_bg_color),
(destructive-action, $destructive_color) {
&.#{$b_type} {
@include button(normal, $b_color, white);
2014-09-04 17:13:29 +00:00
&.flat {
@include button(undecorated);
color: $b_color; //FIXME: does it work on the dark variant?
}
&:hover { @include button(hover, $b_color, white); }
&:active, &:checked { @include button(active, $b_color, white); }
2014-09-04 17:13:29 +00:00
&:backdrop, &.flat:backdrop {
@include button(backdrop, $b_color, white);
&:active, &:checked {
@include button(backdrop-active, $b_color, white);
}
&:insensitive {
@include button(backdrop-insensitive);
&:active, &:checked {
@include button(backdrop-insensitive-active, $b_color, white);
}
}
}
2014-09-04 17:13:29 +00:00
&.flat:backdrop {
@include button(undecorated);
color: transparentize($b_color, 0.2);
}
&:insensitive {
@include button(insensitive);
&:active, &:checked {
@include button(insensitive-active, $b_color, white);
}
}
.osd & {
@include button(osd, $b_color);
@extend %linked;
&:hover {
@include button(osd-hover, $b_color);
@extend %linked;
}
&:active, &:checked, &:backdrop:active, &:backdrop:checked {
@include button(osd-active, $b_color);
@extend %linked;
}
&:insensitive, &:backdrop:insensitive {
@include button(osd-insensitive, $b_color);
@extend %linked;
}
&:backdrop {
@include button(osd-backdrop, $b_color);
@extend %linked;
}
}
}
}
&.image-button { padding: 8px; }
&.text-button {
padding-left: 16px;
padding-right: 16px;
}
// stack switcher buttons
.action-bar .stack-switcher &.image-button,
.header-bar .stack-switcher &.image-button {
// override the padding since we need to add some padding on the
// GtkImage itself to fit the circle
padding: 5px 2px;
}
.action-bar .stack-switcher &.text-button,
.header-bar .stack-switcher &.text-button {
padding-left: 10px;
padding-right: 10px;
padding-top: 5px; // I need these to not get overridden by radio
padding-bottom: 6px; // button style
outline-offset: -3px; //
}
.stack-switcher > & {
padding-left: 2px; // subtract the padding which will be added to the
padding-right: 2px; // GtkLabel
> GtkLabel {
padding-left: 6px; // label padding
padding-right: 6px; //
}
> GtkImage {
padding: 3px 6px; // image padding
}
&.needs-attention > GtkLabel,
&.needs-attention > GtkImage {
animation: needs_attention 150ms ease-in;
$_dot_shadow: _text_shadow_color();
$_dot_shadow_r: if($variant=='light',0.5,0.45);
background-image: -gtk-gradient(radial,
center center, 0,
center center, 0.5,
to($_dot_color),
to(transparent)),
-gtk-gradient(radial,
center center, 0,
center center, $_dot_shadow_r,
to($_dot_shadow),
to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
@if $variant == 'light' { background-position: right 3px, right 4px; }
@else { background-position: right 3px, right 2px; }
&:backdrop { background-size: 6px 6px, 0 0;}
&:dir(rtl) {
@if $variant == 'light' { background-position: left 3px, left 4px; }
@else { background-position: left 3px, left 2px; }
}
}
&.needs-attention:active > GtkLabel,
&.needs-attention:active > GtkImage,
&.needs-attention:checked > GtkLabel,
&.needs-attention:checked > GtkImage {
animation: none;
background-image: none;
}
}
//inline-toolbar buttons
.inline-toolbar &, .inline-toolbar &:backdrop {
border-radius: 2px;
border-width: 1px;
2014-08-06 11:20:45 +00:00
@extend %linked;
}
.primary-toolbar & { icon-shadow: none; } // tango icons don't need shadows
.linked &,
.linked &:hover,
.linked &:active,
.linked &:checked,
2014-08-06 11:20:45 +00:00
.linked &:backdrop { @extend %linked; }
2014-07-09 17:37:41 +00:00
.linked.vertical &,
.linked.vertical &:hover,
.linked.vertical &:active,
.linked.vertical &:checked,
2014-08-06 11:20:45 +00:00
.linked.vertical &:backdrop { @extend %linked_vertical; }
}
// all the following is for the +|- buttons on inline toolbars, that way
// should really be deprecated...
.inline-toolbar GtkToolButton > .button { // redefining the button look is
// needed since those are flat...
@include button(normal);
&:hover { @include button(hover); }
&:active,
&:checked{ @include button(active); }
&:insensitive { @include button(insensitive); }
&:insensitive:active,
&:insensitive:checked { @include button(insensitive-active); }
&:backdrop { @include button(backdrop); };
&:backdrop:active,
&:backdrop:checked { @include button(backdrop-active); }
&:backdrop:insensitive { @include button(backdrop-insensitive); }
&:backdrop:insensitive:active,
&:backdrop:insensitive:checked {
@include button(backdrop-insensitive-active); }
}
// More inline toolbar buttons
.inline-toolbar.toolbar GtkToolButton,
.inline-toolbar.toolbar GtkToolButton:backdrop {
2014-08-06 11:20:45 +00:00
& > .button.flat { @extend %linked_middle; }
&:dir(rtl) > .button.flat { @extend %linked_middle:dir(rtl); }
&:first-child > .button.flat { @extend %linked:first-child; }
&:last-child > .button.flat { @extend %linked:last-child; }
&:last-child:dir(rtl) > .button.flat { @extend %linked:last-child:dir(rtl); }
&:only-child > .button.flat { @extend %linked:only-child; }
}
2014-08-06 11:20:45 +00:00
%linked_middle {
border-radius: 0;
border-left-style: none;
&:dir(rtl) {
2014-08-06 11:20:45 +00:00
border-radius: 0; // needed when including %linked_middle:dir(rtl)
border-right-style: none;
border-left-style: solid
2014-08-06 11:20:45 +00:00
}
}
%linked {
@extend %linked_middle;
&:first-child {
border-radius: 3px 0 0 3px;
border-left-style: solid;
}
&:last-child {
border-radius: 0 3px 3px 0;
&:dir(rtl) { border-right-style: solid; }
}
&:only-child {
border-radius: 3px;
border-style: solid;
2014-07-09 17:37:41 +00:00
}
}
2014-08-06 11:20:45 +00:00
%linked_vertical{
2014-07-09 17:37:41 +00:00
border-left-style: solid;
border-top-style: none;
&:first-child {
border-style: solid;
border-radius: 3px 3px 0 0;
}
&:last-child {
border-radius: 0 0 3px 3px;
}
&:only-child {
border-radius: 3px;
border-style: solid;
}
}
%undecorated_button {
border-color: transparent;
background-color: transparent;
background-image: none;
box-shadow: inset 0 1px transparentize(white,1),
0 1px transparentize(white, 1);
text-shadow: none;
icon-shadow: none;
}
/* menu buttons */
.menuitem.button.flat {
@extend %undecorated_button;
outline-offset: -1px;
&:hover { background-color: mix($fg_color,$bg_color,10%); }
&:selected { @extend %selected_items; }
&:backdrop, &:backdrop:hover {
@extend %undecorated_button;
}
}
2014-07-19 08:50:01 +00:00
GtkColorButton.button {
padding: 4px; // Uniform padding on the GtkColorButton
GtkColorSwatch {
border-radius: 1.5px;
box-shadow: inset 0 1px 1px transparentize(black, 0.8),
_widget_edge();
&:backdrop { box-shadow: none; }
}
}
/*********
* Links *
*********/
2014-06-18 14:07:59 +00:00
*:link {
color: $selected_bg_color; //FIXME use a proper color
&:hover, &:active, &:visited {
color: mix($fg_color, $selected_bg_color, 40%); //FIXME same here
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
2014-06-18 14:07:59 +00:00
}
&:backdrop, &:backdrop:hover, &:backdrop:hover:selected {
2014-06-18 14:07:59 +00:00
color: $selected_bg_color;
}
&:selected, *:selected & { color: $selected_fg_color; }
2014-06-18 14:07:59 +00:00
}
.button:link, .button:visited {
@extend %undecorated_button;
@extend *:link;
text-shadow: none;
&:hover, &:active, &:checked {
@extend %undecorated_button;
text-shadow: none;
}
&:backdrop {
@extend %undecorated_button; //This shouldn't be needed but avoids
//a weird transition which for some reason
//makes borders blink on hover
}
}
/*****************
* GtkSpinButton *
*****************/
.spinbutton {
.button {
background-image: none;
border-style: none none none solid;
border-color: transparentize($borders_color,0.7);
color: mix($fg_color,$base_color,95%);
border-radius: 0;
box-shadow: none;
// padding-left: 6px;
// padding-right: 6px;
&:dir(rtl) { border-style: none solid none none; }
&:hover {
color: $fg_color;
background-color: transparentize($fg_color,0.95);
}
&:insensitive {
color: transparentize($insensitive_fg_color,0.7);
}
&:active {
box-shadow: inset 0 2px 3px -1px transparentize(black,0.8);
background-color: transparentize(black,0.9);
}
&:backdrop {
border-color: transparentize($backdrop_borders_color,0.7);
background-color: transparent;
}
&:backdrop:insensitive {
background-image: none;
color: transparentize($backdrop_insensitive_color,0.7);
border-style: none none none solid; // It is needed or it gets overridden
&:dir(rtl) { border-style: none solid none none; }
}
}
2014-07-22 18:26:43 +00:00
&.vertical, &.vertical:dir(rtl) {
.button {
padding-top: 8px; // Same vertical padding as image-buttons
padding-bottom: 8px; //
&:first-child {
@extend %top_button;
@include button(normal, $edge:none);
&:active {
@extend %top_button;
@include button(active, $edge:none);
}
&:hover {
@extend %top_button;
@include button(hover, $edge:none);
}
&:insensitive {
@extend %top_button;
@include button(insensitive, $edge:none);
}
&:backdrop {
@extend %top_button;
@include button(backdrop, $edge:none);
}
}
&:last-child {
@extend %bottom_button;
@include button(normal);
&:active {
@extend %bottom_button;
@include button(active);
}
&:hover {
@extend %bottom_button;
@include button(hover);
}
&:insensitive {
@extend %bottom_button;
@include button(insensitive);
}
&:backdrop {
@extend %bottom_button;
@include button(backdrop);
}
}
&:backdrop:insensitive {
@include button(backdrop-insensitive);
}
}
&.entry {
// we should remove the bottom edge hilight here, but seems
// like buttons are on top of it so it doesn't show up
border-radius: 0;
padding-left: 3px;
padding-right: 3px;
}
%top_button {
border-radius: 3px 3px 0 0;
border-style: solid solid none solid;
}
%bottom_button {
border-radius: 0 0 3px 3px;
border-style: none solid solid solid;
}
}
2014-06-27 12:24:53 +00:00
/* This is to fix spinbuttons in entries, but I feel like hiding code issues
* hence it's commented atm.
* GtkTreeView & {
* &.entry, &.entry:focus {
* padding: 1px;
* border-width: 1px 0;
* border-color: $selected_bg_color;
* border-radius: 0;
* box-shadow: none;
* }
* } */
}
/**************
* ComboBoxes *
**************/
GtkComboBox {
> .button { padding-top: 3px; padding-bottom: 4px; } // Otherwise combos
// are bigger then
// buttons
-GtkComboBox-arrow-scaling: 0.5;
-GtkComboBox-shadow-type: none;
box-shadow: 0 1px $borders_edge;
@include _button_text_shadow;
&:insensitive {
color: $insensitive_fg_color;
text-shadow: none;
icon-shadow: none;
}
&:backdrop {
color: $backdrop_fg_color;
text-shadow: none;
icon-shadow: none;
}
&:backdrop:insensitive {
color: $backdrop_insensitive_color;
}
.menuitem { text-shadow: none; }
.separator {
// always disable separators
-GtkWidget-wide-separators: true;
-GtkWidget-horizontal-separator: 0;
-GtkWidget-vertical-separator: 0;
}
2014-08-06 11:20:45 +00:00
&.combobox-entry .entry { @extend %linked; }
&.combobox-entry .button, &.combobox-entry .button:backdrop {
// It is needed to specify the backdrop button or it gets overridden
2014-08-06 11:20:45 +00:00
@extend %linked;
}
}
2014-08-06 10:23:47 +00:00
.linked > GtkComboBox > .button {
// the combo is a composite widget so the way we do button linkind doesn't
// work, special case needed. See
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
2014-08-06 11:20:45 +00:00
&:dir(ltr) { @extend %linked_middle; } // specificity bump
&:dir(rtl) { @extend %linked_middle:dir(rtl); }
2014-08-06 10:23:47 +00:00
}
.linked > GtkComboBox:first-child > .button {
2014-08-06 11:20:45 +00:00
@extend %linked:first-child;
2014-08-06 10:23:47 +00:00
}
.linked > GtkComboBox:last-child > .button {
2014-08-06 11:20:45 +00:00
@extend %linked:last-child;
2014-08-06 10:23:47 +00:00
}
.linked > GtkComboBox:only-child > .button {
2014-08-06 11:20:45 +00:00
@extend %linked:only-child;
2014-08-06 10:23:47 +00:00
}
/************
* Toolbars *
************/
.toolbar {
-GtkWidget-window-dragging: true;
padding: 4px;
background-color: $bg_color;
.osd &, &.osd {
padding: 13px;
border: $osd_outer_borders_color;
border-radius: 6px;
background-color: transparentize($osd_bg_color, 0.3);
background-clip: padding-box;
}
}
//searchbar, location-bar & inline-toolbar
.inline-toolbar {
@extend .toolbar;
@extend %inset-bar;
border-width: 0 1px 1px;
padding: 3px;
border-radius: 0 0 4px 4px;
}
.search-bar, .location-bar {
@extend .toolbar;
@extend %inset-bar;
border-width: 0 0 1px;
padding: 3px;
}
%inset-bar {
border-style: solid;
border-color: $borders_color;
$_bg: mix($bg_color, $borders_color, 70%);
background-color: $_bg;
box-shadow: inset 0 2px 3px -1px mix($borders_color, $_bg, 60%),
_widget_edge();
//FIXME edge would be nice, but doesn't work
&:backdrop {
border-color: $backdrop_borders_color;
2014-07-19 08:50:01 +00:00
background-color: $backdrop_dark_fill;
box-shadow: none;
}
}
/***************
* Header bars *
***************/
.titlebar,
.header-bar {
padding: 6px;
border-width: 0 0 1px;
border-style: solid;
border-color: $borders_color;
border-radius: 7px 7px 0 0;
background-color: transparent;
@include headerbar_fill;
&:backdrop {
border-color: $backdrop_borders_color;
background-color: $bg_color;
background-image: none;
box-shadow: inset 0 1px $top_hilight;
}
.title {
font-weight: bold;
padding: 0px 12px;
}
.subtitle {
font-size: smaller;
padding: 0 12px;
@extend .dim-label;
}
.header-bar-separator,
& > GtkBox > .separator.vertical {
-GtkWidget-wide-separators: true;
-GtkWidget-separator-width: 1px;
border-width: 0 1px;
border-image: linear-gradient(to bottom,
transparentize($borders_color,1),
$borders_color 30%,
$borders_color 70%,
transparentize($borders_color,1) 100%)
0 1 / 0 1px stretch; //FIXME use a proper color
&:backdrop {
border-image: linear-gradient(to bottom,
transparentize($backdrop_borders_color,
0.5))
0 1 / 1px 1px; //FIXME use a proper color
}
}
&.selection-mode {
$_hc: mix($top_hilight,$selected_bg_color, 50%); // hilight color
color: $selected_fg_color;
text-shadow: 0 -1px transparentize(black, 0.5);
border-color: $selected_borders_color;
background-image: linear-gradient(to bottom,
lighten($selected_bg_color,5%),
$selected_bg_color);
box-shadow: inset 0 -1px mix($selected_borders_color,
$selected_bg_color, 35%), //bottom shade
inset 0 1px $_hc;
&:backdrop {
background-image: linear-gradient(to bottom, $selected_bg_color);
box-shadow: inset 0 1px mix($top_hilight,$selected_bg_color, 60%);
}
.subtitle:link { @extend *:link:selected; }
.button {
@include button(normal, $selected_bg_color, $selected_fg_color, $_hc);
&.flat { @include button(undecorated); }
&:hover { @include button(hover, $selected_bg_color, $selected_fg_color,
$_hc); }
&:active, &:checked { @include button(active, $selected_bg_color,
$selected_fg_color, $_hc); }
&:backdrop, &.flat:backdrop {
@include button(backdrop, $selected_bg_color, $selected_fg_color, $_hc);
-gtk-image-effect: none;
border-color: $selected_borders_color;
&:active, &:checked {
@include button(backdrop-active, $selected_bg_color,
$selected_fg_color, $_hc);
border-color: $selected_borders_color;
}
&:insensitive {
@include button(backdrop-insensitive, $selected_bg_color,
$selected_fg_color, $_hc);
border-color: $selected_borders_color;
}
&:insensitive:active, &:insensitive:checked {
@include button(backdrop-insensitive-active, $selected_bg_color,
$selected_fg_color, $_hc);
border-color: $selected_borders_color;
}
}
&.flat:backdrop {
@include button(undecorated);
}
&:insensitive {
@include button(insensitive, $selected_bg_color, $selected_fg_color,
$_hc);
&:active, &:checked {
@include button(insensitive-active, $selected_bg_color,
$selected_fg_color, $_hc);
}
}
&.suggested-action {
@include button(normal, $edge:$_hc);
border-color: $selected_borders_color;
&:hover {
@include button(hover, $edge:$_hc);
border-color: $selected_borders_color;
}
&:active {
@include button(active, $edge:$_hc);
border-color: $selected_borders_color;
}
&:insensitive {
@include button(insensitive, $edge:$_hc);
border-color: $selected_borders_color;
}
&:backdrop {
@include button(backdrop, $edge:$_hc);
border-color: $selected_borders_color;
}
&:backdrop:insensitive {
@include button(backdrop-insensitive, $edge:$_hc);
border-color: $selected_borders_color;
}
}
}
.selection-menu {
border-color: transparentize($selected_bg_color,1);
background-image: linear-gradient(to bottom,
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);
icon-shadow: none;
}
&:backdrop { @extend .selection-menu };
}
}
.tiled &, .maximized & {
border-radius: 0; // squared corners when the window is max'd or tiled
}
}
2014-07-22 12:33:44 +00:00
/************
* Pathbars *
************/
.path-bar .button {
padding: 5px 6px 6px;
2014-07-22 12:33:44 +00:00
&:first-child { padding-left: 8px; }
&:last-child { padding-right: 8px; }
&:only-child {
padding-left: 12px;
padding-right: 12px;
}
}
// the following is for spacing the icon and the label inside the home button
2014-08-13 14:41:36 +00:00
.path-bar .button GtkLabel:last-child { padding-left: 2px; }
.path-bar .button GtkLabel:first-child { padding-right: 2px; }
.path-bar .button GtkLabel:only-child { padding-right: 0; padding-left: 0; }
/**************
* Tree Views *
**************/
GtkTreeView.view { // treeview grid lines and expanders, unfortunatelly
// the tree lines color can't be set
-GtkTreeView-grid-line-width: 1;
-GtkTreeView-grid-line-pattern: '';
-GtkTreeView-tree-line-width: 1;
-GtkTreeView-tree-line-pattern: '';
-GtkTreeView-expander-size: 16;
border-color: $bg_color; // this is actually the line color
// :selected is ignored hence no style for it
&:backdrop {
border-color: $backdrop_bg_color;
}
&.expander {
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
color: mix($fg_color, $base_color, 70%);
&:hover { color: $fg_color; }
&:selected {
color: mix($selected_fg_color, $selected_bg_color, 70%);
&:hover { color: $selected_fg_color; }
&:backdrop { color: mix($backdrop_base_color, $selected_bg_color, 70%); }
}
&:checked {
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
}
&:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); }
}
}
column-header {
.button {
@extend %column_header_button;
$_column_header_color: mix($fg_color,$base_color,50%);
color: $_column_header_color;
background-color: $base_color;
font-weight: bold;
text-shadow: none;
box-shadow: none;
&:hover {
@extend %column_header_button;
color: mix($_column_header_color,$fg_color,50%);
box-shadow: none;
transition: none; //I shouldn't need this
}
&:active {
@extend %column_header_button;
color: $fg_color;
transition: none; //I shouldn't need this
}
&.dnd {
@extend column-header.button.dnd;
}
}
&:last-child .button,
&:last-child.button { //treeview-like derived widgets in Banshee and Evolution
border-right-style: none;
}
}
column-header.button.dnd { // for treeview-like derive widgets
transition: none;
color: $selected_bg_color;
box-shadow: inset 1px 1px 0 1px $selected_bg_color,
inset -1px 0 0 1px $selected_bg_color,
inset 1px 1px $base_color, inset -1px 0 $base_color;;
&:active { @extend column-header.button.dnd; }
&:selected { @extend column-header.button.dnd; }
&:hover { @extend column-header.button.dnd; }
}
%column_header_button {
padding: 3px 6px;
border-style: none solid solid none;
border-radius: 0;
background-image: none;
border-color: $bg_color;
text-shadow: none;
&:insensitive {
border-color: $bg_color;
background-image: none;
}
&:backdrop {
border-color: $backdrop_bg_color;
border-style: none solid solid none;
color: mix($backdrop_fg_color, $backdrop_bg_color,50%);
background-image: none;
background-color: $backdrop_base_color;
&:insensitive {
border-color: $backdrop_bg_color;
background-image: none;
}
}
}
GtkTreeView.view.progressbar { //Progressbar in treeview cells
@if $variant == 'light' { color: $base_color; }
border-radius: 4px;
2014-07-10 13:47:57 +00:00
border-color: $selected_borders_color;
background-image: linear-gradient(to bottom,
$selected_bg_color,
darken($selected_bg_color,10%));
2014-07-19 07:59:10 +00:00
box-shadow: inset 0 1px if($variant=='light', transparentize(white,0.7),
transparentize(white,0.85)),
0 1px if($variant=='light', transparentize(black, 0.8),
transparentize(black,0.9));
&:selected {
2014-07-19 07:59:10 +00:00
@if $variant == 'light' {
color: $selected_bg_color;
box-shadow: none;
}
@else { box-shadow: inset 0 1px transparentize(white,0.95); }
background-image: linear-gradient(to bottom,
$base_color,
darken($base_color,10%));
&:backdrop {
@if $variant == 'light' { color: $selected_bg_color; }
2014-07-19 07:59:10 +00:00
@else { border-color: $backdrop_base_color; }
background-color: $backdrop_base_color;
}
}
&:backdrop {
@if $variant == 'light' { color: $backdrop_base_color; }
@else { border-color: $backdrop_base_color; }
background-image: none;
2014-07-19 07:59:10 +00:00
box-shadow: none;
}
}
/*********
* Menus *
*********/
.menubar {
-GtkWidget-window-dragging: true;
padding: 0px;
2014-08-13 14:19:14 +00:00
box-shadow: inset 0 -1px transparentize(black, 0.9);
&:backdrop { background-color: $backdrop_bg_color; }
& > .menuitem {
padding: 4px 8px;
&:hover { //Seems like it :hover even with keyboard focus
box-shadow: inset 0 -3px $selected_bg_color;
2014-08-13 14:19:14 +00:00
color: if($variant == 'light', $selected_bg_color,
lighten($selected_bg_color,15%));
}
&:insensitive {
color: $insensitive_fg_color;
box-shadow: none;
}
}
}
.menu {
margin: 4px;
padding: 0px;
background-color: $base_color;
.menuitem {
2014-07-08 19:33:48 +00:00
text-shadow: none;
padding: 4px;
&:hover {
color: $selected_fg_color;
background-color: $selected_bg_color;
}
&:insensitive {
color: $insensitive_fg_color;
&:backdrop { color: $backdrop_insensitive_color; }
}
&:backdrop, &:backdrop:hover {
color: $backdrop_fg_color;
background-color: $backdrop_base_color;
}
//submenu indicators
&.arrow { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2014-07-08 19:33:48 +00:00
&.arrow:dir(rtl) {-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl'); }
}
}
2014-07-23 10:33:20 +00:00
.menuitem .accelerator { color: gtkalpha(currentColor,0.55); }
/***************
* Popovers *
***************/
.popover {
margin: 10px;
padding: 2px;
border: 1px solid $borders-color;
border-radius: 5px;
//background-clip: border-box;
background-color: $bg_color;
box-shadow: 0 2px 3px transparentize(black, 0.5);
&:backdrop {
box-shadow: none;
}
& > .list,
& > .view,
& > .toolbar
&.osd > .toolbar {
border-style: none;
background-color: transparent;
}
.button.flat,
.button.flat:hover {
text-shadow: none;
transition: none;
}
&.osd { // Also used for touch cut'n'paste overlays
// FIXME Doesn't work
background-image: none;
background-color: $osd_bg_color;
border: 1px solid $borders_color;
color: $osd_fg_color;
.button {
color: white;
text-shadow: none;
@include button(osd);
&:hover { @include button(osd-hover); };
&:active { @include button(osd-active); };
&:insensitive { @include button(osd-insensitive); };
}
}
}
//touch selection handlebars for the Popover.osd above
.entry.cursor-handle,
.cursor-handle {
background-color: transparent;
background-image: none;
box-shadow: none;
border-style: none;
&.top { -gtk-icon-source: -gtk-icontheme('selection-start-symbolic'); }
&.bottom { -gtk-icon-source: -gtk-icontheme('selection-end-symbolic'); }
}
/*****************
* Notebooks and *
* Tabs *
*****************/
.notebook {
// Through me you go to the grief wracked city;
// Through me you go to everlasting pain;
// Through me you go a pass among lost souls.
// ...
// Abandon all hope — Ye Who Enter Here
padding: 0;
background-color: $base_color;
-GtkNotebook-initial-gap: 10;
-GtkNotebook-arrow-spacing: 5;
-GtkNotebook-tab-curvature: 0;
-GtkNotebook-tab-overlap: -8;
-GtkNotebook-has-tab-gap: false;
-GtkWidget-focus-padding: 0;
-GtkWidget-focus-line-width: 0;
transition: all 200ms ease-out;
&:backdrop {
background-color: $backdrop_base_color;
}
&.frame {
border: 1px solid $borders_color;
// FIXME doesn't work
&.top { border-top-width: 0; }
&.bottom { border-bottom-width: 0; }
&.right { border-right-width: 0; }
&.left { border-left-width: 0; }
&:backdrop { border-color: $backdrop_borders_color; }
}
&.header {
// FIXME: double borders in some case, can't fix it w/o a class tho
// FIXME: doesn't work on dark var
background-color: mix($bg_color, $borders_color, 70%);
// this is the shading of the header behind the tabs
&.frame {
border: 1px solid $borders_color;
&.top { border-bottom-width: 0; }
&.bottom { border-top-width: 0; }
&.right { border-left-width: 0; }
&.left { border-right-width: 0; }
&:backdrop { border-color: $backdrop_borders_color; }
}
$_header_shade: inset 0 2px 3px -1px transparentize(black, 0.85);
&.top {
box-shadow: $_header_shade,
inset 0 -1px $borders_color; // border
&:backdrop { box-shadow: inset 0 -1px $backdrop_borders_color; }
}
&.bottom {
box-shadow: $_header_shade,
inset 0 1px $borders_color;
&:backdrop { box-shadow: inset 0 1px $backdrop_borders_color; }
}
&.right {
box-shadow: $_header_shade,
inset 1px 0 $borders_color;
&:backdrop { box-shadow: inset 1px 0 $backdrop_borders_color; }
}
&.left {
box-shadow: $_header_shade,
inset -1px 0 $borders_color;
&:backdrop { box-shadow: inset -1px 0 $backdrop_borders_color; }
}
&:backdrop {
// same color as backdrop pushed button
2014-07-19 08:50:01 +00:00
background-color: $backdrop_dark_fill;
box-shadow: none;
}
}
tab {
border-width: 0;
border-style: solid;
border-color: transparent;
background-color: transparent;
outline-offset: 0;
$tab_indicator_size: 3px;
//vertical tab sizing
$vt_vpadding: 8px;
$vt_hpadding: 20px;
// horizontal tab sizing
$ht_vpadding: 5px;
$ht_hpadding: 20px;
//FIXME: we get double border in some cases, not considering the broken
//notebook content frame...
&.top, &.bottom { padding: $vt_vpadding $vt_hpadding; }
&.left, &.right { padding: $ht_vpadding $ht_hpadding; }
/* works for testnotebookdnd, but there's a superfluous border
in gedit or web, commented out for now, needs gtk fixes
&.reorderable-page {
&.top {
padding-top: ($vt_vpadding - 1px);
border-top-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
}
&.bottom {
padding-bottom: ($vt_vpadding - 1px);
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
}
&.left {
padding-left: ($ht_hpadding - 1px);
border-left-width: 1px;
border-top-width: 1px;
border-bottom-width: 1px;
}
&.right {
padding-right: ($ht_hpadding - 1px);
border-right-width: 1px;
border-top-width: 1px;
border-bottom-width: 1px;
}
}
*/
&.reorderable-page {
&.top, &.bottom {
padding-left: 12px; // for a nicer close button
padding-right: 12px; // placement
border-left-width: 1px;
border-right-width: 1px;
}
&.left, &.right {
border-bottom-width: 1px;
border-top-width: 1px;
}
}
&.top {
//padding-bottom: ($vt_vpadding -$tab_indicator_size);
border-bottom-width: $tab_indicator_size;
}
&.bottom {
//padding-top: ($vt_vpadding -$tab_indicator_size);
border-top-width: $tab_indicator_size;
}
&.left {
//padding-right: ($ht_hpadding -$tab_indicator_size);
border-right-width: $tab_indicator_size;
}
&.right {
//padding-left: ($ht_hpadding -$tab_indicator_size);
border-left-width: $tab_indicator_size;
}
//here's the interesting stuff
&:hover, &.prelight-page {
border-color: $borders_color;
}
&:active, &.active-page, &:backdrop:active {
border-color: $selected_bg_color;
}
&:backdrop {
background-color: transparent;
border-color: transparent;
}
@each $_tab, $_border in (top, bottom),
(bottom, top),
(left, right),
(right, left) {
&.reorderable-page.#{$_tab} {
border-color: transparent;
&:hover, &.prelight-page {
border-color: transparentize($borders_color,0.7);
border-#{$_border}-color: $borders_color;
background-color: transparentize($bg_color,0.8);
}
&:active, &.active-page {
background-color: transparentize($bg_color,0.5);
border-color: transparentize($borders_color,0.5);
border-#{$_border}-color: $selected_bg_color;
&:hover { background-color: transparentize($bg_color,0.3); }
&:backdrop {
border-color: $backdrop_borders_color;
background-color: $backdrop_bg_color;
border-#{$_border}-color: $selected_bg_color;
}
}
&:backdrop {
border-color: transparent;
background-color: transparent;
}
}
}
GtkLabel { //tab text
padding: 0 2px; // needed for a nicer focus ring
font-weight: bold;
color: $insensitive_fg_color;
&:backdrop, &.prelight-page:backdrop {
color: mix($backdrop_fg_color, $backdrop_insensitive_color, 50%);
}
}
.prelight-page GtkLabel, GtkLabel.prelight-page {
// prelight tab text
color: mix($fg_color, $insensitive_fg_color, 50%);
&:backdrop { // FIXME, it's the same as GtkLabel:backdrop up here
color: mix($backdrop_fg_color, $backdrop_insensitive_color, 50%);
}
}
.active-page GtkLabel, GtkLabel.active-page {
// active tab text
color: $fg_color;
&:backdrop { color: $backdrop_fg_color; }
}
.button { //tab close button
padding: 0;
border: 1px solid transparent;
@extend %undecorated_button;
icon-shadow: none;
transition: none;
2014-06-14 06:42:12 +00:00
color: transparentize($fg_color,0.7);
&:hover {
2014-06-14 06:42:12 +00:00
color: $fg_color;
@include button(hover, $edge:none);
2014-06-14 06:42:12 +00:00
background-image: none;
box-shadow: none;
}
&:active {
@include button(active, $edge:none);
2014-06-14 06:42:12 +00:00
}
&:backdrop {
color: transparentize($backdrop_fg_color,0.7);
border-color: transparent;
}
& > GtkImage { // this is a hack which makes tabs grow
padding: 2px;
}
}
}
&.arrow {
color: $insensitive_fg_color;
&:hover { color: mix($fg_color, $insensitive_fg_color, 50%); }
&:active { color: $fg_color; }
&:insensitive {
color: transparentize($insensitive_fg_color,0.7);
}
&:backdrop {
color: transparentize($backdrop_fg_color,0.6);
&:insensitive {
color: $backdrop_insensitive_color;
}
}
}
}
/**************
* Scrollbars *
**************/
.scrollbar {
background-clip: padding-box;
background-image: none;
border-style: solid;
-GtkRange-trough-border: 0;
-GtkScrollbar-has-backward-stepper: false;
-GtkScrollbar-has-forward-stepper: false;
-GtkRange-slider-width: 13;
-GtkScrollbar-min-slider-length: 42; // minimum size for the slider.
// sadly can't be in '.slider'
// where it belongs
-GtkRange-stepper-spacing: 0;
-GtkRange-trough-under-steppers: 1;
.button {
border: none;
}
2014-06-18 07:52:29 +00:00
&.trough { @extend .scrollbars-junction; }
&.slider {
border-radius: 20px;
border: 3px solid transparent; //margin :/
background-color: mix($bg_color, $fg_color, 70%);
&:hover {
background-color: mix($bg_color, $fg_color, 50%);
}
&:prelight:active {
background-color: $selected_bg_color;
}
&.fine-tune {
border-width: 5px;
&:prelight:active {
background-color: $selected_bg_color;
}
}
2014-07-08 14:36:02 +00:00
&:backdrop, &:insensitive {
background-color: mix($bg_color, $fg_color, 90%);
}
}
}
2014-06-18 07:52:29 +00:00
.scrollbars-junction { // the small square between two scrollbars
border-color: transparent;
2014-06-18 07:52:29 +00:00
background-color: darken($bg_color, 5%);
&:backdrop { background-color: transparent; }
}
/**********
* Switch *
**********/
GtkSwitch {
-GtkSwitch-slider-width: 45px; // 55px is the right value to make it as tall
// as buttons, not doing that for now
font-weight: bold;
font-size: smaller;
2014-07-08 16:24:28 +00:00
outline-offset: -4px;
box-shadow: inset 0 1px transparentize(black, 0.9), // needs to be set here
_widget_edge(); // otherwise it gets
// clipped
2014-07-08 16:24:28 +00:00
&.trough {
// similar to the .scale
border: 1px solid $borders_color;
2014-07-08 16:24:28 +00:00
border-radius: 3px;
background-image: linear-gradient(to bottom,
mix($bg_color,$borders_color,60%));
2014-07-08 16:24:28 +00:00
text-shadow: 0 1px transparentize(black, 0.9);
&:active {
@include progressbar_fill;
2014-07-08 16:24:28 +00:00
color: white;
border-color: $selected_borders_color;
box-shadow: _widget_edge();
//text-shadow: 0 1px transparentize($selected_borders_color,0.5);
text-shadow: 0 1px transparentize($selected_borders_color,0.5),
0 0 2px transparentize(white,0.4);
2014-07-08 16:24:28 +00:00
}
&:insensitive {
color: $insensitive_fg_color;
border-color: $borders_color;
background-image: none;
2014-07-08 16:24:28 +00:00
background-color: $insensitive_bg_color;
box-shadow: _widget_edge();
2014-07-08 16:24:28 +00:00
text-shadow: none;
}
&:backdrop {
color: $backdrop_fg_color;
border-color: $backdrop_borders_color;
background-image: linear-gradient(to bottom, $backdrop_dark_fill);
2014-07-08 16:24:28 +00:00
box-shadow: none;
text-shadow: none;
&:active {
@if $variant == 'light' { color: $backdrop_bg_color; }
border-color: if($variant == 'light', $selected_bg_color,
$selected_borders_color);
background-image: linear-gradient(to bottom, $selected_bg_color);
2014-07-08 16:24:28 +00:00
box-shadow: none;
}
&:insensitive {
2014-07-08 16:24:28 +00:00
color: $backdrop_insensitive_color;
border-color: $backdrop_borders_color;
background-image: none;
background-color: $insensitive_bg_color;
}
}
2014-07-08 16:24:28 +00:00
}
.list-row:selected & {
box-shadow: 0 0 0 1px $selected_fg_color;
&:backdrop { box-shadow: 0 0 0 1px $backdrop_base_color; }
}
&.slider,
.list-row:selected &.slider {
border: 1px solid;
2014-07-08 16:24:28 +00:00
border-radius: 3px;
@include button(normal);
2014-07-08 16:24:28 +00:00
box-shadow: inset 0 1px if($variant=='light', white,
transparentize(white,0.85)),
inset 0 -2px transparentize($bg_color,0.4),
inset 0 -1px mix($bg_color,$borders_color,50%);
&:hover {
@include button(hover);
box-shadow: inset 0 1px if($variant=='light', white,
transparentize(white,0.85)),
inset 0 -2px transparentize($bg_color,0.4),
inset 0 -1px mix($bg_color,$borders_color,50%);
2014-07-08 16:24:28 +00:00
}
&:active { border: 1px solid $selected_borders_color; }
&:insensitive { @include button(insensitive, $edge:none); }
&:backdrop {
@include button(backdrop);
box-shadow: none;
&:active{
border-color: if($variant == 'light', $selected_bg_color,
$selected_borders_color);
}
2014-07-08 16:24:28 +00:00
&:insensitive {
@include button(backdrop-insensitive);
box-shadow: none;
}
}
2014-07-08 16:24:28 +00:00
}
}
/*************************
* Check and Radio items *
*************************/
// draw regular check and radio items using our PNG assets
// all assets are rendered from assets.svg. never add pngs directly
$asset_suffix: if($variant=='dark', '-dark', '');
@each $w,$a in ('check', 'checkbox'),
('radio','radio') {
//standard checks and radios
@each $s,$as in ('','-unchecked'),
(':hover', '-unchecked-hover'),
(':active', '-unchecked-active'),
(':insensitive','-unchecked-insensitive'),
(':backdrop', '-unchecked-backdrop'),
(':backdrop:insensitive', '-unchecked-backdrop-insensitive'),
(':inconsistent', '-mixed'),
(':inconsistent:hover', '-mixed-hover'),
(':inconsistent:selected', '-mixed-active'),
(':inconsistent:backdrop', '-mixed-backdrop'),
(':inconsistent:insensitive', '-mixed-insensitive'),
(':inconsistent:insensitive:backdrop', '-mixed-backdrop-insensitive'),
(':checked', '-checked'),
(':checked:insensitive','-checked-insensitive'),
(':checked:hover', '-checked-hover'),
(':checked:active', '-checked-active'),
(':backdrop:checked', '-checked-backdrop'),
(':backdrop:checked:insensitive', '-checked-backdrop-insensitive') {
.#{$w}#{$s} {
-gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"),
url("assets/#{$a}#{$as}#{$asset_suffix}@2.png"));
icon-shadow: if(str-index($s,"backdrop"), none, 0 1px 0 $borders_edge); //no edge highlight for :backdrop
&.button.flat { icon-shadow: none; }
}
@if $variant == 'light' {
// the borders of the light variant versions of checks and radios are
// too similar in luminosity to the selected background color, hence
// we need special casing.
GtkTreeView.view.#{$w}#{$s}:selected,
.list-row:selected .#{$w}#{$s} {
-gtk-icon-source: -gtk-scaled(url("assets/selected-#{$a}#{$as}#{$asset_suffix}.png"),
url("assets/selected-#{$a}#{$as}#{$asset_suffix}@2.png"));
}
}
}
//menu
.menu .menuitem.#{$w} {
-gtk-icon-source: -gtk-icontheme('#{$a}-symbolic');
2014-08-28 18:33:37 +00:00
color: mix($fg_color, $bg_color, 60%);
icon-shadow: none;
&:active, &:checked {
-gtk-icon-source: -gtk-icontheme('#{$a}-checked-symbolic');
}
&:inconsistent {
-gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic');
}
2014-08-28 18:33:37 +00:00
&:hover { color: $selected_fg_color; }
&:insensitive { color: mix($insensitive_fg_color, $bg_color, 50%); }
}
}
//treeview and list-rows
GtkTreeView.view.check, GtkTreeView.view.radio,
.list-row .check, list-row .radio {
icon-shadow: none;
&:selected, &:hover { icon-shadow: none; }
}
2014-08-19 16:45:15 +00:00
//selection-mode
@each $s,$as in ('','-selectionmode'),
(':hover', '-hover-selectionmode'),
(':active', '-active-selectionmode'),
(':backdrop', '-backdrop-selectionmode'),
(':checked', '-checked-selectionmode'),
(':checked:hover', '-checked-hover-selectionmode'),
(':checked:active', '-checked-active-selectionmode'),
(':backdrop:checked', '-checked-backdrop-selectionmode') {
GtkIconView.view.check#{$s},
GtkFlowBox.view.check#{$s} {
icon-shadow: none;
2014-08-19 16:45:15 +00:00
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
url("assets/checkbox#{$as}@2.png"));
}
}
GtkCheckButton.text-button, GtkRadioButton.text-button {
// this is for a nice focus on check and radios text
padding: 1px 2px 4px;
outline-offset: 0;
&:insensitive,
&:insensitive:active,
&:insensitive:inconsistent {
// set insensitive color, which is overriden otherwise
color: $insensitive_fg_color;
&:backdrop { color: $backdrop_insensitive_color; }
}
}
/************
* GtkScale *
************/
.scale,
.scale.scale-has-marks-above.scale-has-marks-below,
.scale.vertical.scale-has-marks-above.scale-has-marks-below {
-GtkScale-slider-length: 20;
-GtkRange-slider-width: 20;
-GtkRange-trough-border: 2;
outline-offset: -9px;
outline-radius: 4px;
margin: 10px;
&.fine-tune {
margin: 8px;
outline-offset: -7px;
outline-radius: 6px;
&.trough { border-radius: 4px; }
}
&.slider {
//FIXME: better gradient on the slider and hover state
@include button(normal);
border: 1px solid;
border-radius: 50%;
border-color: darken($borders_color,3%);
box-shadow: inset 0 1px if($variant=='light', white,
transparentize(white,0.85)),
inset 0 #{-2px} $bg_color,
inset 0 #{-1px} mix($bg_color,$borders_color,50%);
&:hover {
@include button(hover);
border-color: darken($borders_color,3%);
border-radius: 50%; // needed for double marks scales
box-shadow: inset 0 1px if($variant=='light', white,
transparentize(white,0.85)),
inset 0 #{-2px} if($variant=='light', white,
transparentize(white,0.86)),
inset 0 #{-1px} mix($bg_color,$borders_color,70%);
}
&:insensitive {
border-style: solid; // needed for double marks scales or they'll get
border-radius: 50%; // overridden
background-image: linear-gradient(to bottom, $insensitive_bg_color);
box-shadow: none;
}
&:backdrop {
border-style: solid; // needed for double marks scales or they'll get
border-radius: 50%; // overridden
border-color: darken($backdrop_borders_color,3%);
background-image: linear-gradient(to bottom, $backdrop_bg_color);
box-shadow: none;
}
&:backdrop:insensitive {
@include button(backdrop-insensitive);
}
2014-07-19 08:50:01 +00:00
&:active {
border: 1px solid if($variant=='light',darken($selected_borders_color,3%),
2014-07-19 08:50:01 +00:00
darken($selected_bg_color,15%));
}
2014-07-07 11:26:09 +00:00
//OSD sliders
.osd & {
@include button(osd);
background-color: $osd_bg_color;
&:hover { @include button(osd-hover); }
&:active { @include button(osd-active); }
&:backdrop { @include button(osd-backdrop); }
2014-07-07 11:26:09 +00:00
}
}
&.trough {
border: 1px solid $borders_color;
border-radius: 3px;
background-color: mix($bg_color,$borders_color,60%);
box-shadow: inset 1px 1px transparentize(black, 0.9),
_widget_edge();
&.highlight {
@include progressbar_fill;
border-color: $selected_borders_color;
box-shadow: _widget_edge();
&.vertical { @include progressbar_fill(vertical); }
&:backdrop {
border-color: if($variant=='light', $selected_bg_color,
$selected_borders_color);
background-color: $selected_bg_color;
box-shadow: none;
}
}
&:insensitive, &.vertical:insensitive {
border-color: $insensitive_borders_color;
background-image: none;
background-color: $insensitive_bg_color;
box-shadow: _widget_edge();
}
&:backdrop {
border-color: $backdrop_borders_color;
background-color: mix($backdrop_bg_color,$borders_color);
box-shadow: none;
}
&:backdrop:insensitive, .highlight:backdrop:insensitive {
border-color: $backdrop_borders_color;
background-color: $insensitive_bg_color;
}
2014-07-07 11:26:09 +00:00
//OSD troughs
.osd & {
border-color: $osd_borders_color;
2014-07-07 11:26:09 +00:00
box-shadow: none;
margin: 9px;
&.fine-tune { margin: 7px; }
background-color: transparentize($osd_borders_color, 0.2);
outline-color: transparentize($osd_fg_color, 0.8);
outline-offset: -8px;
&.highlight {
background-image: none;
background-color: $selected_bg_color;
}
&:insensitive, &:backdrop:insensitive {
border-color: transparent;
background-color: transparent;
}
&:backdrop {
border-color: $osd_borders_color;
background-image: none;
}
2014-07-07 11:26:09 +00:00
}
}
}
2014-07-19 08:50:01 +00:00
$asset_suffix: if($variant=='dark', '-dark', '');
@each $d,$dn in ('', 'horz'),
('.vertical', 'vert') {
@each $w,$we in ('scale-has-marks-below','scale_marks_below'),
('scale-has-marks-above','scale_marks_above') {
.scale#{$d}.#{$w} {
-GtkScale-slider-length: 20;
-GtkRange-slider-width: 24;
-GtkRange-trough-border: 2;
2014-07-19 08:50:01 +00:00
@extend %#{$we}_#{$dn};
@each $s,$as in ('',''),
(':hover','-hover'),
(':active','-active'),
(':insensitive','-insensitive'),
(':backdrop','-backdrop'),
(':backdrop:insensitive','-backdrop-insensitive') {
&.slider#{$s} {
$_url: 'assets/slider-#{$dn}-#{$w}#{$as}#{$asset_suffix}';
border-style: none;
border-radius: 0;
background-color: transparent;
background-image: -gtk-scaled(url('#{$_url}.png'),
url('#{$_url}@2.png'));
background-repeat: no-repeat;
background-position: center;
box-shadow: none;
}
}
}
}
}
%scale_marks_above_horz {
margin: 14px 10px 10px;
&.fine-tune { margin: 12px 8px 8px; }
}
%scale_marks_below_horz {
margin: 10px 10px 14px;
&.fine-tune { margin: 8px 8px 12px; }
}
%scale_marks_above_vert {
margin: 10px 10px 10px 14px;
&.fine-tune { margin: 8px 8px 8px 12px; }
}
%scale_marks_below_vert {
margin: 10px 14px 10px 10px;
&.fine-tune { margin: 8px 12px 8px 8px; }
}
/*****************
* Progress bars *
*****************/
GtkProgressBar {
padding: 0;
font-size: smaller;
color: transparentize($fg_color, 0.6);
box-shadow: inset 1px 1px transparentize(black, 0.9), // needs to be set
_widget_edge(); // here ot it gets
// clipped
&:backdrop {
color: $backdrop_insensitive_color;
}
}
// moving bit
.progressbar {
@include progressbar_fill;
border: 1px solid $selected_borders_color;
2014-07-19 12:03:28 +00:00
border-radius: 1.5px;
box-shadow: none; //needed for clipping
2014-07-19 12:03:28 +00:00
&.left {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
&.right {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
&.left.right {
box-shadow: none;
}
2014-07-19 07:59:10 +00:00
&.vertical {
@include progressbar_fill(vertical);
2014-07-19 12:03:28 +00:00
&.bottom {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
box-shadow: none;
}
&.top {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
2014-07-19 07:59:10 +00:00
}
&:backdrop {
border-color: if($variant=='light', $selected_bg_color,
$selected_borders_color);
background-image: none;
background-color: $selected_bg_color;
box-shadow: none;
}
&.osd {
border-style: none;
border-radius: 0;
-GtkProgressBar-xspacing: 0;
-GtkProgressBar-yspacing: 2px;
-GtkProgressBar-min-horizontal-bar-height: 2px; //FIXME still too tall
}
}
// background
GtkProgressBar.trough {
border: 1px solid $borders_color;
border-radius: 3px;
background-color: mix($borders_color,$bg_color, 35%);
&:backdrop{
border-color: $backdrop_borders_color;
2014-07-19 08:50:01 +00:00
background-color: $backdrop_dark_fill;
box-shadow: 0 1px transparentize(white,1);
}
&.osd {
border-style: none;
background-color: transparent;
box-shadow: none;
//FIXME: there is a margin on top
}
}
/*************
* Level Bar *
*************/
GtkLevelBar {
-GtkLevelBar-min-block-width: 34;
-GtkLevelBar-min-block-height: 3;
box-shadow: _widget_edge(); // needs to be set here to avoid clipping
}
GtkLevelBar.vertical {
-GtkLevelBar-min-block-width: 3;
-GtkLevelBar-min-block-height: 34;
}
.level-bar {
&.trough {
border: 1px solid;
padding: 2px;
border-radius: 3px;
@include entry(normal);
&:backdrop {
@include entry(backdrop);
}
}
&.fill-block {
// FIXME: it would be nice to set make fill blocks bigger, but we'd need
// :nth-child working on discrete indicators
border: 1px solid if($variant=='light', darken($selected_bg_color,10%),
darken($selected_bg_color,5%));
background-color: $selected_bg_color;
box-shadow: 0 1px transparentize(black, 0.9);
border-radius: 1px;
&:backdrop {
border-color: $selected_bg_color;
box-shadow: none;
}
&.indicator-discrete {
&.horizontal { margin: 0 1px; }
&.vertical { margin: 1px 0; }
}
&.level-high {
border-color: darken($success_color,10%);
background-color: $success_color;
&:backdrop { border-color: $success_color; }
}
&.level-low {
border-color: darken($warning_color,10%);
background-color: $warning_color;
&:backdrop { border-color: $warning_color; };
}
&.empty-fill-block {
background-color: transparent;
border-color: if($variant=='light', transparentize($fg_color,0.8),
transparentize($fg_color,0.9));
box-shadow: none;
&:backdrop { border-color: transparentize($backdrop_fg_color,0.85); }
}
}
}
/**********
* Frames *
**********/
.frame {
border: 1px solid $borders_color;
&.flat { border-style: none; }
&:backdrop { border-color: $backdrop_borders_color; }
2014-06-18 10:16:55 +00:00
padding: 0;
&.action-bar {
padding: 6px;
border-width: 1px 0 0;
}
}
GtkScrolledWindow {
.frame { border-radius: 2px; }
GtkViewport.frame { // avoid double borders when viewport inside
// scrolled window
border-style: none;
}
}
//vbox and hbox separators
.separator {
// always disable separators
// -GtkWidget-wide-separators: true;
color: transparentize(black, 0.9);
// Font and File button separators
GtkFileChooserButton &,
GtkFontButton & {
// always disable separators
-GtkWidget-wide-separators: true;
-GtkWidget-horizontal-separator: 0;
-GtkWidget-vertical-separator: 0;
}
}
/*********
* Lists *
*********/
2014-06-16 17:57:56 +00:00
.list, .list-row {
background-color: $base_color;
border-color: $borders_color;
&:backdrop {
background-color: $backdrop_base_color;
border-color: $backdrop_borders_color;
}
}
2014-07-07 15:44:01 +00:00
.list-row,
.grid-child {
2014-06-28 13:22:23 +00:00
padding: 2px;
}
2014-07-14 16:29:08 +00:00
.list-row.button {
@extend %undecorated_button;
background-color: transparentize($base_color,1); // for the transition
border-style: none; // I need no borders here
border-radius: 0; // and no rounded corners
box-shadow: none; // and no box-shadow
&:hover {
background-color: mix(black, $base_color, 5%);
2014-07-14 16:29:08 +00:00
}
&:active {
box-shadow: inset 0 2px 2px -2px transparentize(black,0.8);
2014-07-14 16:29:08 +00:00
}
&:selected {
&:active { box-shadow: inset 0 2px 3px -1px transparentize(black,0.5); }
&:hover {
background-color: mix(black, $selected_bg_color, 10%);
}
2014-07-14 16:29:08 +00:00
}
&:backdrop:hover {
@extend %undecorated_button;
}
}
.list-row:selected {
@extend %selected_items;
.button {
@include button(normal, $edge:none);
@if $variant == 'light' { border-color: $selected_borders_color; }
&.flat { @include button(undecorated, $edge:none); }
&:hover {
@include button(hover, $edge:none);
@if $variant == 'light' { border-color: $selected_borders_color; }
}
&:active, &:checked {
@include button(active, $edge:none);
@if $variant == 'light' { border-color: $selected_borders_color; }
}
&:backdrop, &.flat:backdrop {
@include button(backdrop, $edge:none);
@if $variant == 'light' { border-color: $selected_borders_color; }
&:active, &:checked {
@include button(backdrop-active, $edge:none);
@if $variant == 'light' { border-color: $selected_borders_color; }
}
&:insensitive {
@include button(backdrop-insensitive, $edge:none);
@if $variant == 'light' { border-color: $selected_borders_color; }
&:active, &:checked {
@include button(backdrop-insensitive-active, $edge:none);
@if $variant == 'light' { border-color: $selected_borders_color; }
}
}
}
&.flat:backdrop { @include button(undecorated); }
&:insensitive {
@include button(insensitive, $edge:none);
@if $variant == 'light' { border-color: $selected_borders_color; }
&:active, &:checked { @include button(insensitive-active, $edge:none); }
}
//FIXME: make placeholder with buttons w/o edge to be extended around
// istead of repeating everytime this stuff.
}
}
/*********************
* App Notifications *
*********************/
.app-notification,
.app-notification.frame {
2014-08-26 14:54:19 +00:00
@extend %osd;
padding: 10px;
border-width: 0 1px 1px;
border-style: solid;
border-color: $osd_outer_borders_color;
border-radius: 0 0 6px 6px;
2014-08-26 14:54:19 +00:00
background-color: transparentize($osd_bg_color, 0.3);
background-image: linear-gradient(to bottom, transparentize(black, 0.8),
transparent 2px);
background-clip: padding-box;
&:backdrop { background-image: none; }
.button {
border: 1px solid;
color: $osd_fg_color;
outline-color: transparentize($osd_fg_color, 0.8);
@include button(osd);
2014-08-26 14:54:19 +00:00
&.flat {
@extend %undecorated_button;
icon-shadow: 0 1px black;
text-shadow: 0 1px black;
&:backdrop,
&:insensitive,
&:backdrop:insensitive { @extend %undecorated_button; }
}
&:hover { @include button(osd-hover); }
&:active, &:checked, &:backdrop:active, &:backdrop:checked {
@include button(osd-active);
}
&:insensitive, &:backdrop:insensitive {
@include button(osd-insensitive);
}
&:backdrop { @include button(osd-backdrop); }
}
}
/*************
* Expanders *
*************/
GtkExpander {
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
&:hover { color: lighten($fg_color,30%); } //only lightens the arrow
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
}
/************
* Calendar *
***********/
2014-07-19 08:50:01 +00:00
GtkCalendar {
border: 1px solid $borders_color;
&:selected {
background-color: $selected_bg_color;
color: $selected_fg_color;
border-radius: 3px;
&:backdrop {
color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color);
}
}
&.header {
@extend .titlebar;
box-shadow: inset 0 -1px mix($borders_color, $bg_color, 30%),
inset 0px 1px $top_hilight,
0 1px 2px transparentize(black,0.9);
border: 1px solid $borders_color;
border-radius: 0;
&:backdrop { box-shadow: none; }
}
&.button {
2014-07-19 08:50:01 +00:00
@extend %undecorated_button;
color: transparentize($fg-color,0.55);
&:hover {
2014-07-19 08:50:01 +00:00
@extend %undecorated_button;
color: $fg_color;
}
&:backdrop { color: transparentize($backdrop_fg_color,0.55); }
}
&.highlight { color: gtkalpha(currentColor,0.55); }
&:backdrop { border-color: $backdrop_borders_color; }
}
/***********
* Dialogs *
***********/
.message-dialog .dialog-action-area .button {
padding: 8px;
}
.message-dialog { // Message Dialog styling
-GtkDialog-button-spacing: 0;
.titlebar {
border-style: none;
box-shadow: inset 0 1px $borders_edge;
}
&.csd { // rounded bottom border styling for csd version
&.background {
// bigger radius for better antialiasing
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
}
.dialog-action-area .button {
padding: 12px;
border-radius: 0;
@include button(normal, $edge:none);
@extend %middle_button;
&:hover {
@include button(hover, $edge:none);
@extend %middle_button;
}
&:active {
@include button(active, $edge:none);
@extend %middle_button;
}
&:insensitive {
@include button(insensitive, $edge:none);
@extend %middle_button;
}
&:backdrop {
@include button(backdrop, $edge:none);
@extend %middle_button;
}
&:backdrop:insensitive {
@include button(backdrop-insensitive, $edge:none);
@extend %middle_button;
}
@each $b_type, $b_color in (suggested-action, $selected_bg_color),
(destructive-action, $destructive_color) {
&.#{$b_type} {
@include button(normal, $b_color, white, $edge:none);
@extend %middle_button;
&:hover {
@include button(hover, $b_color, white, $edge:none);
@extend %middle_button;
}
&:active {
@include button(active, $b_color, white, $edge:none);
@extend %middle_button;
}
&:backdrop {
@include button(backdrop, $b_color, white, $edge:none);
@extend %middle_button;
&:insensitive {
@include button(backdrop-insensitive, $edge:none);
@extend %middle_button;
}
}
&:insensitive {
@include button(insensitive, $edge:none);
@extend %middle_button;
}
}
}
&:first-child{ @extend %first_button; }
&:last-child { @extend %last_button; }
}
%middle_button {
border-left-style: solid;
border-right-style: none;
border-bottom-style: none;
}
%last_button {
border-bottom-right-radius: 7px;
}
%first_button {
border-left-style: none;
border-bottom-left-radius: 7px;
}
}
}
GtkFileChooserDialog {
.search-bar {
background-color: $base_color;
border-color: $bg_color;
box-shadow: none;
&:backdrop {
background-color: $backdrop_base_color;
border-color: $backdrop_bg_color;
}
}
.dialog-action-box {
border-top: 1px solid $borders_color;
&:backdrop { border-top-color: $backdrop_borders_color; }
}
}
/***********
* Sidebar *
***********/
.sidebar,
.sidebar .view {
border: none;
$_sidebar_bg: lighten($bg_color,5%);
background-color: $_sidebar_bg;
.scrollbar {
&.trough {
background-color: darken($bg_color,10%);
border-radius: 6px;
border-width: 2px;
border-color: transparent;
}
&.slider {
background-color: $_sidebar_bg;
&:hover { background-color: lighten($bg_color, 10%); }
}
}
&:backdrop {
background-color: lighten($backdrop_bg_color,5%);
}
&:selected {
background-color: $selected_bg_color;
}
.separator:backdrop { @extend .separator; } // overriden w/o this
}
GtkPaned {
// This is actually the invisible area of the paned separator, not a margin...
margin: 0 8px 8px 0; //drag area of the separator
&:dir(rtl) {
margin-right: 0;
2014-06-16 15:14:20 +00:00
margin-left: 8px;
}
}
.pane-separator {
//FIXME abusing a background-image to get rid of the handle decoration
//I'd like something better...
background-image: linear-gradient(to bottom, $borders_color);
&:backdrop {
background-image: linear-gradient(to bottom, $backdrop_borders_color);
}
}
/**************
* GtkInfoBar *
**************/
GtkInfoBar {
border-style: none;
}
.info,
.question,
.warning,
.error {
background-color: $selected_bg_color;
color: $selected_fg_color;
text-shadow: 0 1px darken($selected_bg_color, 10%);
border-color: darken($selected_bg_color, 10%);
.button {
// FIXME: extend selection mode buttons
@include button(normal, $selected_bg_color, $selected_fg_color, none);
&:hover {
@include button(hover, $selected_bg_color, $selected_fg_color, none); }
&:active {
@include button(active, $selected_bg_color, $selected_fg_color, none); }
&:insensitive {
@include button(insensitive,$selected_bg_color,$selected_fg_color,none); }
&:backdrop {
@include button(backdrop, $selected_bg_color, $selected_fg_color, none);
border-color: _border_color($selected_bg_color);
&:insensitive {
@include button(backdrop-insensitive, $selected_bg_color,
$selected_fg_color, none);
border-color: _border_color($selected_bg_color);
}
}
}
}
/************
* Tooltips *
************/
.tooltip {
&.background {
// background-color needs to be set this way otherwise it gets drawn twice
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
background-color: transparentize(black, 0.2);
background-clip: padding-box;
border: 1px solid $tooltip_borders_color; // this suble border is meant to
// not make the tooltip melt with
// very dark backgrounds
}
color: white;
padding: 4px; /* not working */
border-radius: 5px;
box-shadow: none; // otherwise it gets inherited by windowframe.csd
text-shadow: 0 1px black;
// FIXME: we need a border or tooltips vanish on black background.
&.window-frame.csd {
background-color: transparent;
}
}
.tooltip * { //Yeah this is ugly
padding: 4px;
background-color: transparent;
2014-06-18 08:01:24 +00:00
color: inherit; // just to be sure
}
/*****************
* Color Chooser *
*****************/
GtkColorSwatch {
border: 1px solid;
@if $variant == light {
border-color: transparentize(black,0.7);
box-shadow: inset 0 1px 1px transparentize(black, 0.8);
}
@else {
border-color: $borders_color;
box-shadow: inset 0 1px 1px transparentize(black, 0.6);
}
&.color-light {
&:hover {
background-image: linear-gradient(to bottom,
transparentize(white, 1) 40%,
transparentize(white, 0.6));
&:backdrop { background-image: none; }
}
}
&.color-dark {
&:hover {
background-image: linear-gradient(to bottom,
transparentize(white, 1) 40%,
transparentize(white, 0.8));
&:backdrop { background-image: none; }
}
}
&:hover {
border-color: if($variant=='light', transparentize(black, 0.5),
$backdrop_borders_color);
}
&:backdrop {
border-color: if($variant=='light', transparentize(black,0.8),
$backdrop_borders_color);
box-shadow: none;
}
&.top {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
&.bottom {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
&.left, &:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
&.right, &:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
&:only-child {
border-radius: 5px;
}
&.color-active-badge {
border-width: 2px;
&:hover { background-image: none; }
&.color-light, &.color-light:hover {
color: transparentize(black,0.7);
border-color: transparentize(black,0.7);
}
&.color-dark, &.color-dark:hover {
color: transparentize(white,0.5);
border-color: transparentize(white,0.5);
}
}
}
GtkColorChooserWidget #add-color-button {
border-color: mix($borders_color,$bg_color,50%);
background-color: mix($borders_color,$bg_color,50%);
color: $bg_color;
box-shadow: none;
&:hover {
border-color: $borders_color;
background-color: $borders_color;
}
&:backdrop {
border-color: mix($backdrop_borders_color,$backdrop_bg_color,50%);
background-color: mix($backdrop_borders_color,$backdrop_bg_color,50%);
}
}
2014-07-08 16:24:28 +00:00
/********
* Misc *
********/
2014-07-08 19:33:48 +00:00
.scale-popup .button { // +/- buttons on GtkVolumeButton popup
2014-07-08 16:24:28 +00:00
padding: 6px;
&:hover {
@extend %undecorated_button;
background-color: transparentize($fg_color,0.9);
border-radius: 4px;
}
&:backdrop,
&:backdrop:hover,
&:backdrop:insensitive { @extend %undecorated_button; }
}
2014-07-08 19:33:48 +00:00
GtkVolumeButton.button { padding: 8px; }
/**********************
* Window Decorations *
*********************/
.window-frame {
border-radius: 7px 7px 0 0;
// lamefun trick to get rounded borders regardless of CSD use
border-width: 0px;
// this needs to be transparent
// see bug #722563
$_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
$_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 0.1));
box-shadow: 0 3px 9px 1px transparentize(black, 0.5),
0 0 0 1px $_wm_border; //doing borders with box-shadow
/* this is used for the resize cursor area */
margin: 10px;
&:backdrop {
box-shadow: 0 2px 6px 2px transparentize(black, 0.8),
0 0 0 1px $_wm_border_backdrop;
}
&.tiled {
border-radius: 0;
}
&.csd {
&.popup {
border-radius: 0;
box-shadow: 0 1px 2px transparentize(black, 0.8),
0 0 0 1px transparentize($_wm_border,0.1);
}
&.tooltip {
border-radius: 5px;
box-shadow: none;
}
&.message-dialog {
border-radius: 7px;
box-shadow: 0 1px 2px transparentize(black, 0.8),
0 0 0 1px transparentize($_wm_border,0.1);
}
}
}
// Window Close button
.header-bar .button.titlebutton,
.titlebar .button.titlebutton {
@extend .button;
@extend .button.flat;
@extend .image-button;
@include _button_text_shadow;
&:backdrop { icon-shadow: none; }
}
.header-bar.selection-mode .button.titlebutton,
.titlebar.selection-mode .button.titlebutton {
@include _button_text_shadow(white, $selected_bg_color);
&:backdrop { icon-shadow: none; }
}
// catch all extend :)
%selected_items {
background-color: $selected_bg_color;
color: $selected_fg_color;
@if $variant == 'light' {
outline-color: transparentize($selected_fg_color, 0.7);
}
&:backdrop {
@if $variant == 'light' { color: $backdrop_base_color; }
@else { color: $backdrop_fg_color; };
}
}