forked from AuroraMiddleware/gtk
c32fa1aa8d
Since being 'activatable' istead of 'button' now that reset is not needed anymore, the patch is pretty noisy since sass interpreter changes, those look innocuous though.
3438 lines
98 KiB
SCSS
3438 lines
98 KiB
SCSS
@function gtkalpha($c,$a) {
|
|
@return unquote("alpha(#{$c},#{$a})");
|
|
}
|
|
|
|
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
$asset_suffix: if($variant=='dark', '-dark', '');
|
|
|
|
* {
|
|
padding: 0;
|
|
-GtkToolButton-icon-spacing: 4;
|
|
-GtkTextView-error-underline-color: $error_color;
|
|
|
|
-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_visited_color;
|
|
|
|
-GtkWidget-focus-padding: 2; // FIXME: do we still need these?
|
|
-GtkWidget-focus-line-width: 1; //
|
|
|
|
-GtkWidget-text-handle-width: 20;
|
|
-GtkWidget-text-handle-height: 24;
|
|
|
|
-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: if($variant == 'light', darken($bg_color, 1.5%), $bg_color);
|
|
|
|
&:backdrop {
|
|
text-shadow: none;
|
|
icon-shadow: none;
|
|
color: $backdrop_fg_color;
|
|
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: $text_color;
|
|
background-color: $base_color;
|
|
|
|
&:backdrop {
|
|
color: $backdrop_text_color;
|
|
background-color: $backdrop_base_color;
|
|
}
|
|
|
|
&:selected {
|
|
border-radius: 3px;
|
|
@extend %selected_items;
|
|
}
|
|
}
|
|
|
|
.rubberband {
|
|
border: 1px solid darken($selected_bg_color, 10%);
|
|
background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
|
|
}
|
|
|
|
.label {
|
|
&.separator {
|
|
color: $fg_color;
|
|
@extend .dim-label;
|
|
&:backdrop { color: $backdrop_fg_color; }
|
|
}
|
|
&:selected,
|
|
&:selected:focus,
|
|
&:selected:hover {
|
|
@extend %selected_items;
|
|
}
|
|
&:insensitive {
|
|
color: $insensitive_fg_color;
|
|
&:backdrop { color: $backdrop_insensitive_color; }
|
|
}
|
|
}
|
|
|
|
.dim-label {
|
|
opacity: 0.55;
|
|
text-shadow: none;
|
|
}
|
|
|
|
GtkAssistant {
|
|
.sidebar {
|
|
background-color: $base_color;
|
|
border-top: 1px solid $borders_color;
|
|
&:dir(ltr) { border-right: 1px solid $borders_color; }
|
|
&:dir(rtl) { border-left: 1px solid $borders_color; }
|
|
&:backdrop {
|
|
background-color: $backdrop_base_color;
|
|
border-color: $backdrop_borders_color;
|
|
}
|
|
}
|
|
&.csd .sidebar { border-top-style: none; }
|
|
.sidebar .label {
|
|
padding: 6px 12px;
|
|
}
|
|
.sidebar .label.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%); }
|
|
}
|
|
|
|
.grid-child {
|
|
padding: 3px;
|
|
border-radius: 3px;
|
|
&:selected {
|
|
@extend %selected_items;
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
|
|
%osd, .osd {
|
|
color: $osd_fg_color;
|
|
border: none;
|
|
background-color: $osd_bg_color;
|
|
background-clip: padding-box;
|
|
outline-color: transparentize($osd_fg_color, 0.7);
|
|
box-shadow: none;
|
|
text-shadow: 0 1px black;
|
|
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;
|
|
|
|
&.image { // icons inside the entry
|
|
&.left { padding-left: 0; }
|
|
&.right { padding-right: 0; }
|
|
}
|
|
|
|
border-radius: 3px;
|
|
transition: all 200ms $ease-out-quad;
|
|
@include entry(normal);
|
|
|
|
&.flat, &.flat:focus {
|
|
padding: 2px;
|
|
@include entry(normal, $edge:none);
|
|
border: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
&:focus { @include entry(focus); }
|
|
&:insensitive { @include entry(insensitive); }
|
|
&:backdrop { @include entry(backdrop); }
|
|
&:backdrop:insensitive { @include entry(backdrop-insensitive); }
|
|
|
|
&: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; }
|
|
}
|
|
|
|
.linked:not(.vertical) > & { @extend %linked; }
|
|
|
|
.linked:not(.vertical) > &:focus + .entry,
|
|
.linked:not(.vertical) > &:focus + .button,
|
|
.linked:not(.vertical) > &:focus + GtkComboBox > .the-button-in-the-combobox,
|
|
.linked:not(.vertical) > &:focus + GtkComboBoxText > .the-button-in-the-combobox {
|
|
border-left-color: entry_focus_border(); // colors the border of the widget following a focused entry
|
|
}
|
|
|
|
// entry error and warning style
|
|
@each $e_type, $e_color in (error, $error_color),
|
|
(warning, $warning_color) {
|
|
&.#{$e_type} {
|
|
color: $e_color;
|
|
border-color: entry_focus_border($e_color);
|
|
&:focus { @include entry(focus, $e_color); }
|
|
&:selected, &:selected:focus { background-color: $e_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%); }
|
|
}
|
|
|
|
.osd & {
|
|
@include entry(osd);
|
|
&:focus { @include entry(osd-focus); }
|
|
&:backdrop { @include entry(osd-backdrop); }
|
|
&:insensitive { @include entry(osd-insensitive); }
|
|
}
|
|
}
|
|
|
|
// Vertically linked entries
|
|
// FIXME: take care of "colored" entries
|
|
.linked.vertical {
|
|
> .entry { @extend %linked_vertical; }
|
|
|
|
// remove the edge hilight and the focus shadow (unfortunatelly)
|
|
> .entry:not(:last-child) { box-shadow: none; }
|
|
// add back the focus shadow
|
|
> .entry:focus:not(:last-child) { box-shadow: entry_focus_shadow(); }
|
|
|
|
// brighter border between linked entries
|
|
> .entry:not(:insensitive) + .entry:not(:insensitive) {
|
|
border-top-color: mix($borders_color, $base_color, 30%);
|
|
background-image: linear-gradient(to bottom, $base_color);
|
|
&:backdrop {
|
|
border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
|
|
background-image: linear-gradient(to bottom, $backdrop_base_color);
|
|
}
|
|
}
|
|
|
|
// color back the top border of a linked focused entry following another entry and add back the focus shadow.
|
|
> .entry + .entry:focus:not(:last-child) {
|
|
border-top-color: entry_focus_border();
|
|
box-shadow: entry_focus_shadow();
|
|
}
|
|
// just recolor the top border on the last focused entry, since we don't reset the shadow here letting that be
|
|
// inherited by the entry styling.
|
|
> .entry + .entry:focus:last-child {
|
|
border-top-color: entry_focus_border();
|
|
}
|
|
|
|
// this takes care of coloring the top border of the focused entry subsequent widget.
|
|
// :not(:only-child) is a specificity bump hack.
|
|
> .entry:focus:not(:only-child) + .entry,
|
|
> .entry:focus:not(:only-child) + .button,
|
|
> .entry:focus:not(:only-child) + GtkComboBox > .the-button-in-the-combobox,
|
|
> .entry:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-top-color: entry_focus_border(); }
|
|
}
|
|
|
|
|
|
/***********
|
|
* 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 {
|
|
|
|
$_button_transition: all 200ms $ease-out-quad;
|
|
|
|
border: 1px solid;
|
|
border-radius: 3px;
|
|
padding: 5px 8px 6px;
|
|
transition: $_button_transition;
|
|
@include button(normal);
|
|
&.flat {
|
|
@include button(undecorated);
|
|
// to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
|
|
// to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
|
|
// it won't fade out when the pointer leave the button allocation area. To make the transition more evident
|
|
// in this case the duration is increased.
|
|
transition: none;
|
|
&:hover {
|
|
transition: $_button_transition;
|
|
transition-duration: 500ms;
|
|
&:active { transition: $_button_transition; }
|
|
}
|
|
}
|
|
&:hover {
|
|
@include button(hover);
|
|
-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, &.flat:insensitive, &.flat:backdrop:insensitive {
|
|
@include button(undecorated);
|
|
}
|
|
&:insensitive {
|
|
@include button(insensitive);
|
|
&:active, &:checked {
|
|
@include button(insensitive-active);
|
|
}
|
|
}
|
|
// big standalone buttons like in Documents pager
|
|
&.osd {
|
|
&.image-button { padding: 13px; }
|
|
color: $osd_fg_color;
|
|
border-radius: 5px;
|
|
outline-color: transparentize($osd_fg_color, 0.7); //FIXME: define a color var?
|
|
@include button(osd);
|
|
border: none;
|
|
box-shadow: none;
|
|
&:hover {
|
|
@include button(osd-hover);
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
&:active, &:checked {
|
|
@include button(osd-active);
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
&:insensitive, &:backdrop:insensitive {
|
|
@include button(osd-insensitive);
|
|
border: none;
|
|
}
|
|
&:backdrop {
|
|
@include button(osd-backdrop);
|
|
border: none;
|
|
}
|
|
}
|
|
//overlay / OSD style
|
|
.osd & {
|
|
@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
|
|
&:hover {
|
|
@include button(osd-hover);
|
|
@extend %linked;
|
|
}
|
|
&:active, &:checked, &:backdrop:active, &:backdrop:checked {
|
|
@include button(osd-active);
|
|
@extend %linked;
|
|
}
|
|
&:insensitive, &:backdrop:insensitive {
|
|
@include button(osd-insensitive);
|
|
@extend %linked;
|
|
}
|
|
&:backdrop {
|
|
@include button(osd-backdrop);
|
|
@extend %linked;
|
|
}
|
|
&.flat {
|
|
@include button(undecorated);
|
|
box-shadow: none; //FIXME respect no edge on the button mixin
|
|
text-shadow: 0 1px black;
|
|
icon-shadow: 0 1px black;
|
|
&:hover {
|
|
@include button(osd-hover);
|
|
background-clip: padding-box;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
&:insensitive {
|
|
@include button(osd-insensitive);
|
|
background-image: none;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
&:backdrop { @include button(undecorated); }
|
|
&:active, &:checked {
|
|
@include button(osd-active);
|
|
background-clip: padding-box;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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);
|
|
&.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); }
|
|
&: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);
|
|
}
|
|
}
|
|
}
|
|
&.flat:backdrop, &.flat:insensitive, &.flat:backdrop:insensitive {
|
|
@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;
|
|
}
|
|
|
|
&.text-button.image-button {
|
|
// those buttons needs uneven horizontal padding, we want the icon side
|
|
// to have the image-button padding, while the text side the text-button
|
|
// one, so we're adding the missing padding to the label depending on
|
|
// its position inside the button
|
|
padding: 5px 8px 6px; // same as .button
|
|
.label:first-child { padding-left: 8px; }
|
|
.label:last-child { padding-right: 8px; }
|
|
}
|
|
|
|
.stack-switcher > & {
|
|
// to position the needs attention dot, padding is added to the button
|
|
// child, a label needs just lateral padding while an icon needs vertical
|
|
// padding added too.
|
|
|
|
outline-offset: -3px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
|
|
|
|
> .label {
|
|
padding-left: 6px; // label padding
|
|
padding-right: 6px; //
|
|
}
|
|
> GtkImage {
|
|
padding-left: 6px; // image padding
|
|
padding-right: 6px; //
|
|
padding-top: 3px; //
|
|
padding-bottom: 3px; //
|
|
}
|
|
&.text-button {
|
|
padding: 5px 10px 6px; // needed or it will get overridden
|
|
}
|
|
&.image-button {
|
|
// we want image buttons to have a 1:1 aspect ratio, so compensation
|
|
// of the padding added to the GtkImage is needed
|
|
padding: 5px 2px;
|
|
}
|
|
&.needs-attention > .label,
|
|
&.needs-attention > GtkImage { @extend %needs_attention; }
|
|
&.needs-attention:active > .label,
|
|
&.needs-attention:active > GtkImage,
|
|
&.needs-attention:checked > .label,
|
|
&.needs-attention:checked > GtkImage {
|
|
animation: none;
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
//inline-toolbar buttons
|
|
.inline-toolbar &, .inline-toolbar &:backdrop {
|
|
border-radius: 2px;
|
|
border-width: 1px;
|
|
@extend %linked;
|
|
}
|
|
|
|
.primary-toolbar & { icon-shadow: none; } // tango icons don't need shadows
|
|
|
|
.linked > &,
|
|
.linked > &:hover,
|
|
.linked > &:active,
|
|
.linked > &:checked,
|
|
.linked > &:backdrop { @extend %linked; }
|
|
|
|
.linked.vertical > &,
|
|
.linked.vertical > &:hover,
|
|
.linked.vertical > &:active,
|
|
.linked.vertical > &:checked,
|
|
.linked.vertical > &:backdrop { @extend %linked_vertical; }
|
|
}
|
|
|
|
%needs_attention {
|
|
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; }
|
|
}
|
|
}
|
|
|
|
|
|
// 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 {
|
|
& > .button.flat { @extend %linked_middle; }
|
|
&:first-child > .button.flat { @extend %linked:first-child; }
|
|
&:last-child > .button.flat { @extend %linked:last-child; }
|
|
&:only-child > .button.flat { @extend %linked:only-child; }
|
|
}
|
|
|
|
%linked_middle {
|
|
border-radius: 0;
|
|
border-right-style: none;
|
|
}
|
|
|
|
%linked {
|
|
@extend %linked_middle;
|
|
&:first-child {
|
|
border-top-left-radius: 3px;
|
|
border-bottom-left-radius: 3px;
|
|
}
|
|
&:last-child {
|
|
border-top-right-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
border-right-style: solid;
|
|
}
|
|
&:only-child {
|
|
border-radius: 3px;
|
|
border-style: solid;
|
|
}
|
|
}
|
|
|
|
%linked_vertical_middle {
|
|
border-style: solid solid none solid;
|
|
border-radius: 0;
|
|
}
|
|
|
|
%linked_vertical{
|
|
@extend %linked_vertical_middle;
|
|
&:first-child {
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
}
|
|
&:last-child {
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
border-style: solid;
|
|
}
|
|
&: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;
|
|
}
|
|
}
|
|
|
|
|
|
GtkColorButton.button {
|
|
padding: 5px; // Uniform padding on the GtkColorButton
|
|
|
|
GtkColorSwatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets overridden by the
|
|
// colorpicker style, otherwise
|
|
border-radius: 0;
|
|
box-shadow: inset 0 1px 1px transparentize(black, 0.9),
|
|
_widget_edge();
|
|
&:insensitive,
|
|
&:backdrop { box-shadow: none; }
|
|
}
|
|
}
|
|
|
|
/*********
|
|
* Links *
|
|
*********/
|
|
|
|
*:link {
|
|
color: $link_color;
|
|
&:visited {
|
|
color: $link_visited_color;
|
|
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
|
|
}
|
|
&:hover {
|
|
color: lighten($link_color,10%);
|
|
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); }
|
|
}
|
|
&:active {
|
|
color: $link_color;
|
|
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
|
|
}
|
|
&:backdrop, &:backdrop:hover, &:backdrop:hover:selected {
|
|
color: $selected_bg_color;
|
|
}
|
|
&:selected, *:selected & {
|
|
color: mix($selected_fg_color, $selected_bg_color, 80%);
|
|
}
|
|
}
|
|
|
|
.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
|
|
}
|
|
& > .label {
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
|
|
/*****************
|
|
* 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, 90%);
|
|
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 {
|
|
color: mix($backdrop_fg_color, $backdrop_base_color, 90%);
|
|
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; }
|
|
}
|
|
}
|
|
.osd & {
|
|
.button {
|
|
@include button(undecorated);
|
|
color: $osd_fg_color;
|
|
border-style: none none none solid;
|
|
border-color: transparentize($osd_borders_color, 0.3);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
icon-shadow: 0 1px black;
|
|
&:dir(rtl) { border-style: none solid none none; }
|
|
&:hover {
|
|
@include button(undecorated);
|
|
color: $osd_fg_color;
|
|
border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
|
background-color: transparentize($osd_fg_color, 0.9);
|
|
icon-shadow: 0 1px black;
|
|
box-shadow: none;
|
|
}
|
|
&:backdrop {
|
|
@include button(undecorated);
|
|
color: $osd_fg_color;
|
|
border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
|
icon-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
&:insensitive {
|
|
@include button(undecorated);
|
|
color: $osd_insensitive_fg_color;
|
|
border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
|
icon-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
&:last-child { border-radius: 0 3px 3px 0; }
|
|
&:dir(rtl):first-child { border-radius: 3px 0 0 3px; }
|
|
}
|
|
}
|
|
&.vertical, &.vertical:dir(rtl) { //FIXME: try using linking templates for vertically linked stuff
|
|
.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;
|
|
}
|
|
}
|
|
GtkTreeView & {
|
|
&.entry, &.entry:focus {
|
|
padding: 1px;
|
|
border-width: 1px 0;
|
|
border-color: $selected_bg_color;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**************
|
|
* ComboBoxes *
|
|
**************/
|
|
GtkComboBox {
|
|
> .the-button-in-the-combobox { 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.vertical {
|
|
// always disable separators
|
|
-GtkWidget-wide-separators: true;
|
|
}
|
|
&.combobox-entry .entry {
|
|
&:dir(ltr) {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
&:dir(rtl) {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
}
|
|
&.combobox-entry .button {
|
|
&:dir(ltr) {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
border-left-style: none;
|
|
}
|
|
&:dir(rtl) {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-right-style: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.linked > GtkComboBox > .the-button-in-the-combobox,
|
|
.linked > GtkComboBoxText > .the-button-in-the-combobox {
|
|
// 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
|
|
&:dir(ltr),
|
|
&:dir(rtl) { @extend %linked_middle; } // specificity bump
|
|
}
|
|
.linked > GtkComboBox:first-child > .the-button-in-the-combobox,
|
|
.linked > GtkComboBoxText:first-child > .the-button-in-the-combobox {
|
|
@extend %linked:first-child;
|
|
}
|
|
.linked > GtkComboBox:last-child > .the-button-in-the-combobox,
|
|
.linked > GtkComboBoxText:last-child > .the-button-in-the-combobox {
|
|
@extend %linked:last-child;
|
|
}
|
|
.linked > GtkComboBox:only-child > .the-button-in-the-combobox,
|
|
.linked > GtkComboBoxText:only-child > .the-button-in-the-combobox {
|
|
@extend %linked:only-child;
|
|
}
|
|
|
|
.linked.vertical > GtkComboBoxText > .the-button-in-the-combobox,
|
|
.linked.vertical > GtkComboBox > .the-button-in-the-combobox { @extend %linked_vertical_middle; }
|
|
.linked.vertical > GtkComboBoxText:first-child > .the-button-in-the-combobox,
|
|
.linked.vertical > GtkComboBox:first-child > .the-button-in-the-combobox { @extend %linked_vertical:first-child; }
|
|
.linked.vertical > GtkComboBoxText:last-child > .the-button-in-the-combobox,
|
|
.linked.vertical > GtkComboBox:last-child > .the-button-in-the-combobox { @extend %linked_vertical:last-child; }
|
|
.linked.vertical > GtkComboBoxText:only-child > .the-button-in-the-combobox,
|
|
.linked.vertical > GtkComboBox:only-child > .the-button-in-the-combobox { @extend %linked_vertical:only-child; }
|
|
|
|
/************
|
|
* Toolbars *
|
|
************/
|
|
.toolbar {
|
|
-GtkWidget-window-dragging: true;
|
|
padding: 4px;
|
|
background-color: $bg_color;
|
|
.osd &, &.osd {
|
|
padding: 13px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
background-color: $osd_bg_color;
|
|
}
|
|
}
|
|
|
|
//searchbar, location-bar & inline-toolbar
|
|
.inline-toolbar {
|
|
@extend .toolbar;
|
|
@extend %inset-bar;
|
|
border-width: 0 1px 1px;
|
|
padding: 3px;
|
|
border-radius: 0 0 5px 5px;
|
|
}
|
|
.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;
|
|
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-left: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: smaller;
|
|
padding-left: 12px;
|
|
padding-right: 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,
|
|
&.flat:insensitive,
|
|
&.flat:insensitive: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
|
|
}
|
|
|
|
&.default-decoration {
|
|
padding: 4px;
|
|
.button { padding: 5px; }
|
|
}
|
|
}
|
|
|
|
/************
|
|
* Pathbars *
|
|
************/
|
|
|
|
.path-bar .button {
|
|
padding: 5px 6px 6px;
|
|
&: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
|
|
.label:last-child { padding-left: 2px; }
|
|
.label:first-child { padding-right: 2px; }
|
|
.label:only-child { padding-right: 0; padding-left: 0; }
|
|
GtkImage { padding-top: 1px; }
|
|
}
|
|
|
|
/**************
|
|
* Tree Views *
|
|
**************/
|
|
GtkTreeView.view {
|
|
-GtkTreeView-grid-line-width: 1;
|
|
-GtkTreeView-grid-line-pattern: '';
|
|
-GtkTreeView-tree-line-width: 1;
|
|
-GtkTreeView-tree-line-pattern: '';
|
|
-GtkTreeView-expander-size: 16;
|
|
|
|
border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color,
|
|
border-top-color: $bg_color; // while this is the grid lines color, better then nothing
|
|
|
|
&.rubberband { @extend .rubberband; } // to avoid borders being overridden by the previously set props
|
|
|
|
&:selected { border-radius: 0; } // rest border radius in lists
|
|
|
|
&:selected, &:backdrop:selected {
|
|
border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
|
|
border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly
|
|
}
|
|
|
|
&:insensitive {
|
|
color: $insensitive_fg_color;
|
|
&:selected {
|
|
color: mix($selected_fg_color, $selected_bg_color, 40%);
|
|
&:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
|
|
}
|
|
&:backdrop { color: $backdrop_insensitive_color; }
|
|
}
|
|
|
|
&.separator:backdrop {
|
|
color: transparentize(black, 0.9);
|
|
}
|
|
|
|
&:backdrop {
|
|
border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
|
|
border-top: $backdrop_bg_color;
|
|
}
|
|
|
|
&.dnd {
|
|
border-style: solid none;
|
|
border-width: 1px;
|
|
border-color: mix($fg_color, $selected_bg_color, 50%);
|
|
}
|
|
|
|
&.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_selected_fg_color, $selected_bg_color, 70%); }
|
|
}
|
|
|
|
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
|
|
|
&:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); }
|
|
}
|
|
|
|
&.progressbar { // progress bar in treeviews
|
|
@if $variant == light { color: $base_color; }
|
|
|
|
border: 1px solid $selected_borders_color;
|
|
border-radius: 4px;
|
|
background-image: linear-gradient(to bottom,
|
|
$selected_bg_color,
|
|
darken($selected_bg_color,10%));
|
|
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 {
|
|
@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;
|
|
border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?)
|
|
}
|
|
@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;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&.trough { // progress bar trough in treeviews
|
|
background-color: transparentize($fg_color,0.9);
|
|
border-radius: 4px;
|
|
|
|
&:selected {
|
|
background-color: if($variant == 'light',
|
|
transparentize($selected_fg_color, 0.7),
|
|
darken($selected_bg_color, 10%));
|
|
@if $variant == 'light' {
|
|
border-width: 1px 0;
|
|
border-style: solid;
|
|
border-color: $selected_bg_color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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:backdrop, // set :backdrop too or the border will be visibile there
|
|
&:last-child.button,
|
|
&:last-child.button:backdrop { //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;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/*********
|
|
* Menus *
|
|
*********/
|
|
.menubar {
|
|
-GtkWidget-window-dragging: true;
|
|
padding: 0px;
|
|
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;
|
|
color: $link_color;
|
|
}
|
|
&:insensitive {
|
|
color: $insensitive_fg_color;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu {
|
|
margin: 4px;
|
|
padding: 0px;
|
|
background-color: $base_color;
|
|
border: 1px solid $borders_color; // adds borders in a non composited env
|
|
.csd & { border: none; } // axes borders in a composited env
|
|
.menuitem {
|
|
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'); }
|
|
&.arrow:dir(rtl) {-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl'); }
|
|
}
|
|
&.button { // overlow buttons
|
|
@extend %undecorated_button;
|
|
border-style: none;
|
|
border-radius: 0;
|
|
&.top { border-bottom: 1px solid mix($fg_color, $base_color, 10%); }
|
|
&.bottom { border-top: 1px solid mix($fg_color, $base_color, 10%); }
|
|
&:hover { background-color: mix($fg_color, $base_color, 10%); }
|
|
&:insensitive {
|
|
color: transparent;
|
|
background-color: transparent;
|
|
border-color: transparent ;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menuitem .accelerator { color: gtkalpha(currentColor,0.55); }
|
|
|
|
|
|
/***************
|
|
* Popovers *
|
|
***************/
|
|
|
|
.popover {
|
|
padding: 2px;
|
|
border: 1px solid $borders_color;
|
|
border-radius: 5px;
|
|
background-color: mix($bg_color, $base_color, 50%);
|
|
|
|
box-shadow: 0 1px 2px transparentize(black, 0.7);
|
|
|
|
&: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 { @extend %osd; }
|
|
}
|
|
|
|
/*****************
|
|
* 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-quad;
|
|
&: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
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
.label { //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 .label, .label.prelight-page {
|
|
// prelight tab text
|
|
color: mix($fg_color, $insensitive_fg_color, 50%);
|
|
&:backdrop { // FIXME, it's the same as .label:backdrop up here
|
|
color: mix($backdrop_fg_color, $backdrop_insensitive_color, 50%);
|
|
}
|
|
}
|
|
.active-page .label, .label.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;
|
|
color: transparentize($fg_color,0.7);
|
|
&:hover {
|
|
color: $fg_color;
|
|
@include button(hover, $edge:none);
|
|
background-image: none;
|
|
box-shadow: none;
|
|
}
|
|
&:active {
|
|
@include button(active, $edge:none);
|
|
}
|
|
&: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 {
|
|
-GtkRange-slider-width: 13;
|
|
-GtkRange-trough-border: 1;
|
|
-GtkScrollbar-has-backward-stepper: false;
|
|
-GtkScrollbar-has-forward-stepper: false;
|
|
-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;
|
|
|
|
$_slider_margin: 3px;
|
|
$_slider_fine_tune_margin: 4px;
|
|
|
|
.button {
|
|
border: none;
|
|
}
|
|
|
|
&.overlay-indicator {
|
|
&:not(.dragging):not(.hovering) { // Overlay scrolling indicator
|
|
opacity: 0.4;
|
|
|
|
-GtkRange-slider-width: 5px;
|
|
|
|
.slider {
|
|
margin: 0;
|
|
background-color: $fg_color;
|
|
border: 1px solid if($variant==light, white, black);
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.trough {
|
|
border-style: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
// w/o the following margin tweaks the slider shrinks when hovering/dragging
|
|
&.vertical .slider {
|
|
margin-top: $_slider_margin - 1px;
|
|
margin-bottom: $_slider_margin - 1px;
|
|
}
|
|
|
|
&.horizontal .slider {
|
|
margin-left: $_slider_margin - 1px;
|
|
margin-right: $_slider_margin - 1px;
|
|
}
|
|
|
|
}
|
|
|
|
&.dragging,
|
|
&.hovering { opacity: 0.7; }
|
|
}
|
|
|
|
// trough coloring
|
|
.trough {
|
|
background-color: $scrollbar_bg_color;
|
|
border: 1px none $borders_color;
|
|
|
|
&:backdrop {
|
|
background-color: $backdrop_scrollbar_bg_color;
|
|
border-color: $backdrop_borders_color;
|
|
}
|
|
}
|
|
|
|
// slider coloring
|
|
.slider {
|
|
background-color: mix($fg_color, $bg_color, 60%);
|
|
|
|
&:hover { background-color: mix($fg_color, $bg_color, 80%); }
|
|
|
|
&:prelight:active { background-color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%));}
|
|
|
|
&:backdrop { background-color: mix($backdrop_fg_color, $backdrop_bg_color, 40%); }
|
|
|
|
&:insensitive {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
|
|
// sizing
|
|
.slider {
|
|
border-radius: 100px;
|
|
margin: $_slider_margin;
|
|
}
|
|
|
|
&.fine-tune .slider { margin: $_slider_fine_tune_margin; }
|
|
|
|
&.vertical {
|
|
|
|
.slider {
|
|
margin-left: 1px + $_slider_margin;
|
|
|
|
&:dir(rtl) {
|
|
margin-left: $_slider_margin;
|
|
margin-right: 1px + $_slider_margin;
|
|
}
|
|
}
|
|
|
|
&.fine-tune .slider {
|
|
margin-left: 1px + $_slider_fine_tune_margin;
|
|
|
|
&:dir(rtl) {
|
|
margin-left: $_slider_fine_tune_margin;
|
|
margin-right: 1px + $_slider_fine_tune_margin;
|
|
}
|
|
}
|
|
|
|
.trough {
|
|
border-left-style: solid;
|
|
|
|
&:dir(rtl) {
|
|
border-left-style: none;
|
|
border-right-style: solid;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.horizontal {
|
|
|
|
.slider { margin-top: 1px + $_slider_margin; }
|
|
|
|
&.fine-tune .slider { margin-top: 1px + $_slider_fine_tune_margin; }
|
|
|
|
.trough { border-top-style: solid; }
|
|
}
|
|
}
|
|
|
|
.scrollbars-junction,
|
|
.scrollbars-junction.frame { // the small square between two scrollbars
|
|
border-color: transparent;
|
|
// the border image is used to add the missing dot between the borders, details, details, details...
|
|
border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch;
|
|
background-color: $scrollbar_bg_color;
|
|
|
|
&:dir(rtl) { border-image-slice: 0 1 0 0; }
|
|
|
|
&:backdrop {
|
|
border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px);
|
|
background-color: $backdrop_scrollbar_bg_color;
|
|
}
|
|
}
|
|
|
|
|
|
/**********
|
|
* Switch *
|
|
**********/
|
|
|
|
GtkSwitch {
|
|
-GtkSwitch-slider-width: 45px; // 55px is the right value to make it as tall
|
|
// as buttons, not doing that for now
|
|
-GtkSwitch-slider-height: 27px;
|
|
|
|
font-weight: bold;
|
|
font-size: smaller;
|
|
outline-offset: -4px;
|
|
box-shadow: inset 0 1px transparentize(black, 0.9), // needs to be set here
|
|
_widget_edge(); // otherwise it gets
|
|
// clipped
|
|
&.trough {
|
|
// similar to the .scale
|
|
border: 1px solid $borders_color;
|
|
border-radius: 3px;
|
|
color: $fg_color;
|
|
background-image: linear-gradient(to bottom, mix($bg_color, $borders_color, 60%));
|
|
text-shadow: 0 1px transparentize(black, 0.9);
|
|
&:active {
|
|
@include progressbar_fill;
|
|
color: white;
|
|
border-color: $selected_borders_color;
|
|
box-shadow: _widget_edge();
|
|
text-shadow: 0 1px transparentize($selected_borders_color, 0.5),
|
|
0 0 2px transparentize(white, 0.4);
|
|
}
|
|
&:insensitive {
|
|
color: $insensitive_fg_color;
|
|
border-color: $borders_color;
|
|
background-image: none;
|
|
background-color: $insensitive_bg_color;
|
|
box-shadow: _widget_edge();
|
|
text-shadow: none;
|
|
}
|
|
&:backdrop {
|
|
color: $backdrop_fg_color;
|
|
border-color: $backdrop_borders_color;
|
|
background-image: linear-gradient(to bottom, $backdrop_dark_fill);
|
|
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);
|
|
box-shadow: none;
|
|
}
|
|
&:insensitive {
|
|
color: $backdrop_insensitive_color;
|
|
border-color: $backdrop_borders_color;
|
|
background-image: none;
|
|
background-color: $insensitive_bg_color;
|
|
}
|
|
}
|
|
}
|
|
&.slider {
|
|
border: 1px solid;
|
|
border-radius: 3px;
|
|
@include button(normal);
|
|
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%);
|
|
}
|
|
&: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);
|
|
}
|
|
&:insensitive {
|
|
@include button(backdrop-insensitive);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
.list-row:selected & {
|
|
@if $variant == 'light' {
|
|
box-shadow: none;
|
|
border-color: $selected_borders_color;
|
|
&:backdrop { border-color: $selected_borders_color; }
|
|
&.slider:dir(rtl) { border-left-color: $borders_color; }
|
|
&.slider:dir(ltr) { border-right-color: $borders_color; }
|
|
&.slider,
|
|
&.slider:active { border-color: $selected_borders_color; }
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/*************************
|
|
* 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
|
|
|
|
@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.
|
|
.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');
|
|
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');
|
|
}
|
|
&:hover { color: $selected_fg_color; }
|
|
&:insensitive { color: mix($insensitive_fg_color, $bg_color, 50%); }
|
|
}
|
|
}
|
|
|
|
//treeview and list-rows
|
|
.view.check, .view.radio,
|
|
.list-row .check, list-row .radio {
|
|
icon-shadow: none;
|
|
&:selected, &:hover { icon-shadow: none; }
|
|
}
|
|
|
|
//content view (grid/list)
|
|
|
|
.content-view {
|
|
background-color: darken($bg_color,7%);
|
|
&:backdrop { background-color: darken($bg_color,7%); }
|
|
}
|
|
|
|
//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') {
|
|
.view.content-view.check#{$s} {
|
|
icon-shadow: none;
|
|
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
|
|
url("assets/checkbox#{$as}@2.png"));
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
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 {
|
|
// FIXME: rationalize
|
|
-GtkScale-slider-length: 20;
|
|
-GtkRange-slider-width: 20;
|
|
-GtkRange-trough-border: 2;
|
|
outline-offset: -9px;
|
|
outline-radius: 4px;
|
|
|
|
&.fine-tune {
|
|
outline-offset: -7px;
|
|
outline-radius: 6px;
|
|
&.trough {
|
|
margin: 8px;
|
|
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);
|
|
}
|
|
&:active {
|
|
border: 1px solid if($variant=='light',darken($selected_borders_color,3%),
|
|
darken($selected_bg_color,15%));
|
|
}
|
|
//OSD sliders
|
|
.osd & {
|
|
@include button(osd);
|
|
background-color: opacify($osd_bg_color, 1);
|
|
&:hover { @include button(osd-hover); }
|
|
&:active { @include button(osd-active); }
|
|
&:backdrop { @include button(osd-backdrop); }
|
|
}
|
|
}
|
|
&.trough {
|
|
margin: 10px;
|
|
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, 50%);
|
|
box-shadow: none;
|
|
}
|
|
&:backdrop:insensitive, .highlight:backdrop:insensitive {
|
|
border-color: $backdrop_borders_color;
|
|
background-color: $insensitive_bg_color;
|
|
}
|
|
//OSD troughs
|
|
.osd & {
|
|
border-color: $osd_borders_color;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@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;
|
|
|
|
color: transparentize($fg_color, 0.7); // marks color
|
|
|
|
@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 {
|
|
.trough { margin: 14px 10px 10px; }
|
|
&.fine-tune .trough { margin: 12px 8px 8px; }
|
|
}
|
|
%scale_marks_below_horz {
|
|
.trough { margin: 10px 10px 14px; }
|
|
&.fine-tune .trough { margin: 8px 8px 12px; }
|
|
}
|
|
%scale_marks_above_vert {
|
|
.trough { margin: 10px 10px 10px 14px; }
|
|
&.fine-tune .trough { margin: 8px 8px 8px 12px; }
|
|
}
|
|
%scale_marks_below_vert {
|
|
.trough { margin: 10px 14px 10px 10px; }
|
|
&.fine-tune .trough { 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;
|
|
}
|
|
&.osd {
|
|
-GtkProgressBar-xspacing: 0;
|
|
-GtkProgressBar-yspacing: 0;
|
|
-GtkProgressBar-min-horizontal-bar-height: 3;
|
|
}
|
|
&.trough { // background
|
|
border: 1px solid $borders_color;
|
|
border-radius: 3px;
|
|
background-color: mix($borders_color, $bg_color, 35%);
|
|
&:backdrop{
|
|
border-color: $backdrop_borders_color;
|
|
background-color: $backdrop_dark_fill;
|
|
box-shadow: 0 1px transparentize(white,1);
|
|
}
|
|
&.osd {
|
|
border-style: none;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// moving bit
|
|
.progressbar {
|
|
@include progressbar_fill;
|
|
border: 1px solid $selected_borders_color;
|
|
border-radius: 1.5px;
|
|
box-shadow: none; //needed for clipping
|
|
&.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;
|
|
}
|
|
&.vertical {
|
|
@include progressbar_fill(vertical);
|
|
&.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;
|
|
}
|
|
}
|
|
&:backdrop {
|
|
border-color: if($variant=='light', $selected_bg_color,
|
|
$selected_borders_color);
|
|
background-image: none;
|
|
background-color: $selected_bg_color;
|
|
box-shadow: none;
|
|
}
|
|
&.osd {
|
|
background-image: none;
|
|
background-color: $selected_bg_color;
|
|
border-style: none;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/*************
|
|
* Level Bar *
|
|
*************/
|
|
|
|
.level-bar {
|
|
box-shadow: _widget_edge(); // needs to be set here to avoid clipping
|
|
-GtkLevelBar-min-block-width: 34;
|
|
-GtkLevelBar-min-block-height: 3;
|
|
&.vertical {
|
|
-GtkLevelBar-min-block-width: 3;
|
|
-GtkLevelBar-min-block-height: 34;
|
|
}
|
|
&.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; }
|
|
padding: 0;
|
|
&.action-bar {
|
|
padding: 6px;
|
|
border-width: 1px 0 0;
|
|
}
|
|
}
|
|
|
|
GtkScrolledWindow {
|
|
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 &.vertical,
|
|
GtkFontButton &.vertical {
|
|
// always disable separators
|
|
-GtkWidget-wide-separators: true;
|
|
}
|
|
}
|
|
|
|
/*********
|
|
* Lists *
|
|
*********/
|
|
|
|
.list, .list-row {
|
|
background-color: $base_color;
|
|
border-color: $borders_color;
|
|
&:backdrop {
|
|
background-color: $backdrop_base_color;
|
|
border-color: $backdrop_borders_color;
|
|
}
|
|
}
|
|
|
|
.list-row,
|
|
.grid-child {
|
|
padding: 2px;
|
|
}
|
|
|
|
.list-row.activatable {
|
|
// let's take care of background colors
|
|
&:hover {
|
|
background-color: mix($fg_color, $base_color, 5%);
|
|
}
|
|
&:active {
|
|
box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
|
|
}
|
|
&:backdrop:hover { background-color: transparent; }
|
|
&:selected {
|
|
&:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
|
|
&:hover {
|
|
background-color: mix($fg_color, $selected_bg_color, 10%);
|
|
}
|
|
&:backdrop { background-color: $selected_bg_color; }
|
|
}
|
|
}
|
|
|
|
.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);
|
|
color: $selected_fg_color;
|
|
}
|
|
&: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);
|
|
color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color);
|
|
}
|
|
&: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.
|
|
}
|
|
}
|
|
|
|
// transition
|
|
.list-row {
|
|
transition: all 150ms $ease-out-quad;
|
|
&:hover { transition: none; }
|
|
}
|
|
|
|
|
|
/*********************
|
|
* App Notifications *
|
|
*********************/
|
|
|
|
.app-notification,
|
|
.app-notification.frame {
|
|
@extend %osd;
|
|
padding: 10px;
|
|
border: none;
|
|
border-radius: 0 0 6px 6px;
|
|
background-color: $osd_bg_color;
|
|
background-image: linear-gradient(to bottom, transparentize(black, 0.8),
|
|
transparent 2px);
|
|
background-clip: padding-box;
|
|
&:backdrop { background-image: none; }
|
|
.button {
|
|
@include button(osd);
|
|
&.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 *
|
|
*************/
|
|
|
|
.expander {
|
|
-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 *
|
|
***********/
|
|
GtkCalendar {
|
|
color: $text_color;
|
|
border: 1px solid $borders_color;
|
|
|
|
&:selected {
|
|
@extend .view:selected;
|
|
}
|
|
|
|
&.header {
|
|
border: 1px solid transparentize(black, 0.9);
|
|
border-radius: 0;
|
|
|
|
&:backdrop { border-color: transparentize(black, 0.9); }
|
|
}
|
|
|
|
&.button {
|
|
@extend %undecorated_button;
|
|
color: transparentize($fg_color, 0.55);
|
|
|
|
&:hover {
|
|
@extend %undecorated_button;
|
|
color: $fg_color;
|
|
}
|
|
|
|
&:backdrop {
|
|
@extend %undecorated_button;
|
|
color: transparentize($backdrop_fg_color,0.55);
|
|
}
|
|
|
|
&:insensitive {
|
|
@extend %undecorated_button;
|
|
color: transparentize($insensitive_fg_color,0.55);
|
|
}
|
|
}
|
|
|
|
&:inconsistent, &:inconsistent:backdrop { color: gtkalpha(currentColor, 0.55); }
|
|
&.highlight, &.highlight:backdrop {
|
|
color: $fg_color;
|
|
background: $borders_color;
|
|
}
|
|
|
|
|
|
&:backdrop {
|
|
color: $backdrop_text_color;
|
|
border-color: $backdrop_borders_color;
|
|
}
|
|
}
|
|
|
|
/***********
|
|
* Dialogs *
|
|
***********/
|
|
|
|
.message-dialog .dialog-action-area .button {
|
|
padding: 8px;
|
|
}
|
|
|
|
.message-dialog { // Message Dialog styling
|
|
@if $variant==light {
|
|
// the bright variant as a slightly darker bg which in this case clashes with the window decoration, overriding
|
|
&.background { background-color: $bg_color; }
|
|
}
|
|
|
|
.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;
|
|
outline-bottom-right-radius: 5px;
|
|
}
|
|
%first_button {
|
|
border-left-style: none;
|
|
border-bottom-left-radius: 7px;
|
|
outline-bottom-left-radius: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
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 {
|
|
border: none;
|
|
// Popover background color
|
|
background-color: mix($bg_color, $base_color, 50%);
|
|
|
|
&:backdrop {
|
|
background-color: $backdrop_sidebar_bg_color;
|
|
}
|
|
|
|
&:selected {
|
|
@extend %selected_items;
|
|
}
|
|
}
|
|
|
|
$_placesidebar_icons_opacity: 0.7;
|
|
GtkSidebarRow {
|
|
// Needs overriding of the GtkListBoxRow padding
|
|
@at-root .list-row {
|
|
padding: 0px;
|
|
}
|
|
// Using margins/padding directly in the SidebarRow
|
|
// will make the animation of the new bookmark row jump
|
|
.sidebar-revealer {
|
|
padding: 4px 14px 4px 12px;
|
|
}
|
|
.sidebar-icon {
|
|
opacity: $_placesidebar_icons_opacity; // dim the device icons
|
|
&:dir(ltr) { padding-right: 8px; }
|
|
&:dir(rtl) { padding-left: 8px; }
|
|
}
|
|
.sidebar-label {
|
|
&:dir(ltr) { padding-right: 2px; }
|
|
&:dir(rtl) { padding-left: 2px; }
|
|
}
|
|
}
|
|
|
|
GtkPlacesSidebar.sidebar {
|
|
.sidebar-placeholder-row {
|
|
border: solid 1px $selected_bg_color;
|
|
}
|
|
.sidebar-new-bookmark-row {
|
|
background-color: darken($sidebar_bg_color, 10%);
|
|
}
|
|
// Preserve everything else of the list-row class
|
|
@at-root .list-row.button {
|
|
// Popover menuitem color
|
|
&:hover {
|
|
background-color: mix($fg_color, $bg_color, 10%);
|
|
}
|
|
}
|
|
@at-root .sidebar-button.button { // @at-root needded to not change the specificity making button styling inheritance broken
|
|
// so istead of "GtkPlacesSidebar.sidebar .sidebar-button.button" [specificity 0,0,3,1]
|
|
// the extended selector ".sidebar-button.button" [specificity 0,0,2,0]
|
|
|
|
&.image-button { padding: 5px; }
|
|
|
|
@extend .button.flat;
|
|
border-radius: 100%;
|
|
outline-radius: 100%;
|
|
/* &:hover:not(:active):not(:backdrop) {
|
|
background-image: none;
|
|
background-color: gtkalpha(currentColor, 0.1);
|
|
border-color: transparentize($borders_color, 1);
|
|
box-shadow: inset 0 0 transparentize(white, 1);
|
|
icon-shadow: none;
|
|
} */
|
|
&:not(:hover):not(:active) > GtkImage,
|
|
&:backdrop > GtkImage { opacity: $_placesidebar_icons_opacity };
|
|
}
|
|
}
|
|
|
|
.sidebar-item {
|
|
padding: 10px 4px;
|
|
> .label {
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
}
|
|
&.needs-attention > .label {
|
|
@extend %needs_attention;
|
|
background-size: 6px 6px, 0 0;
|
|
}
|
|
}
|
|
|
|
/*********
|
|
* Paned *
|
|
*********/
|
|
|
|
GtkPaned { // this is for the standard paned separator
|
|
|
|
-GtkPaned-handle-size: 1; // sets separator width
|
|
|
|
-gtk-icon-source: none; // removes handle decoration
|
|
margin: 0 8px 8px 0; // drag area of the separator, not a real margin
|
|
&:dir(rtl) {
|
|
margin-right: 0;
|
|
margin-left: 8px;
|
|
}
|
|
.pane-separator {
|
|
background-color: $borders_color;
|
|
&:backdrop {
|
|
background-color: $backdrop_borders_color;
|
|
}
|
|
}
|
|
}
|
|
|
|
GtkPaned.wide { // this is for the paned with wide separator
|
|
-GtkPaned-handle-size: 5; // wider separator here
|
|
margin: 0; // no need of the invisible drag area so, reset margin
|
|
.pane-separator {
|
|
background-color: transparent;
|
|
border-style: none solid;
|
|
border-color: $borders_color;
|
|
border-width: 1px;
|
|
}
|
|
&.vertical .pane-separator { border-style: solid none;}
|
|
.pane-separator:backdrop { border-color: $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);
|
|
}
|
|
}
|
|
}
|
|
.label:selected,
|
|
.label:selected:focus,
|
|
.label:selected:hover {
|
|
background-color: darken($selected_bg_color, 10%);
|
|
}
|
|
}
|
|
|
|
/************
|
|
* 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;
|
|
color: inherit; // just to be sure
|
|
}
|
|
|
|
/*****************
|
|
* Color Chooser *
|
|
*****************/
|
|
|
|
GtkColorSwatch {
|
|
// This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other one
|
|
// is GtkColorSwatch > .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style
|
|
// is applied to the overlay box.
|
|
|
|
$_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
|
|
|
|
$_colorswatch_radius: 5px;
|
|
|
|
box-shadow: $_colorswatch_shadow;
|
|
|
|
// take care of colorswatches on selected elements
|
|
:selected & {
|
|
box-shadow: none;
|
|
&.overlay, &.overlay:hover {
|
|
border-color: $selected_fg_color;
|
|
}
|
|
}
|
|
|
|
// we need to re-set the shadow here since it get axed by the previous bit
|
|
&:selected { box-shadow: $_colorswatch_shadow; }
|
|
|
|
// base color corners rounding
|
|
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
|
|
// sports a bigger radius.
|
|
// nth-child is needed by the custom color strip.
|
|
// The :not() madness is needed since actually the overlay is selectable by GtkColorSwatch > .overlay
|
|
// and GtkColorSwatch.overlay, I know it's weird, but this is gtk+, not a browser.
|
|
&.top {
|
|
border-top-left-radius: $_colorswatch-radius + 1px;
|
|
border-top-right-radius: $_colorswatch-radius + 1px;
|
|
}
|
|
&.bottom {
|
|
border-bottom-left-radius: $_colorswatch-radius + 1px;
|
|
border-bottom-right-radius: $_colorswatch-radius + 1px;
|
|
}
|
|
&.left, &:first-child:not(.overlay):not(.top) {
|
|
border-top-left-radius: $_colorswatch-radius + 1px;
|
|
border-bottom-left-radius: $_colorswatch-radius + 1px;
|
|
}
|
|
&.right, &:last-child:not(.overlay):not(.bottom) {
|
|
border-top-right-radius: $_colorswatch-radius + 1px;
|
|
border-bottom-right-radius: $_colorswatch-radius + 1px;
|
|
}
|
|
&:only-child:not(.overlay) { border-radius: $_colorswatch-radius + 1px; }
|
|
|
|
// overlay corner rounding
|
|
&.top > .overlay {
|
|
border-top-left-radius: $_colorswatch-radius;
|
|
border-top-right-radius: $_colorswatch-radius;
|
|
}
|
|
&.bottom > .overlay {
|
|
border-bottom-left-radius: $_colorswatch-radius;
|
|
border-bottom-right-radius: $_colorswatch-radius;
|
|
}
|
|
&:first-child:not(.top) > .overlay {
|
|
border-top-left-radius: $_colorswatch-radius;
|
|
border-bottom-left-radius: $_colorswatch-radius;
|
|
}
|
|
&:last-child:not(.bottom) > .overlay {
|
|
border-top-right-radius: $_colorswatch-radius;
|
|
border-bottom-right-radius: $_colorswatch-radius;
|
|
}
|
|
&:only-child > .overlay { border-radius: $_colorswatch-radius; }
|
|
|
|
// hover effect
|
|
&:hover,
|
|
&:hover:selected {
|
|
background-image: linear-gradient(135deg, transparentize(white, 0.3),
|
|
transparentize(white, 1) 50%);
|
|
box-shadow: inset 0 1px transparentize(white, 0.6),
|
|
inset 0 -1px if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.6));
|
|
&.color-dark { // swatches with colors with luminosity lower than 50% get the color-dark class
|
|
background-image: linear-gradient(135deg, transparentize(white, 0.5),
|
|
transparentize(white, 1) 50%);
|
|
}
|
|
}
|
|
&:backdrop,
|
|
&:backdrop:selected
|
|
&.color-dark:backdrop,
|
|
&.color-dark:backdrop:selected {
|
|
background-image: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
// no hover effect for the colorswatch in the color editor
|
|
GtkColorEditor & {
|
|
border-radius: 3px; // same radius as the entry
|
|
&:hover {
|
|
background-image: none;
|
|
box-shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
|
|
}
|
|
&:backdrop { box-shadow: none; }
|
|
}
|
|
|
|
// indicator and keynav outline colors
|
|
&.color-dark {
|
|
color: white;
|
|
outline-color: transparentize(black, 0.7);
|
|
&:backdrop { color: transparentize(white, 0.7); }
|
|
}
|
|
&.color-light {
|
|
color: black;
|
|
outline-color: transparentize(white, 0.5);
|
|
&:backdrop { color: transparentize(black, 0.7); }
|
|
}
|
|
|
|
// border color
|
|
&.overlay,
|
|
&.overlay:selected {
|
|
border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
|
|
&:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); }
|
|
}
|
|
|
|
// make the add color button looks like, well, a button
|
|
&#add-color-button {
|
|
border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi
|
|
border-width: 1px; // translucent on the colored background, here it's not necessary so they need to be set
|
|
@include button(normal);
|
|
&:hover { @include button(hover); }
|
|
&:backdrop { @include button(backdrop); }
|
|
.overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat
|
|
}
|
|
}
|
|
|
|
|
|
/********
|
|
* Misc *
|
|
********/
|
|
|
|
.scale-popup {
|
|
|
|
.osd & { @extend %osd; }
|
|
|
|
.osd & .button.flat { //FIXME: quick hack, redo properly
|
|
padding: 6px;
|
|
border-style: none;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.button { // +/- buttons on GtkVolumeButton popup
|
|
padding: 6px;
|
|
&:hover {
|
|
@extend %undecorated_button;
|
|
background-color: transparentize($fg_color,0.9);
|
|
border-radius: 5px;
|
|
}
|
|
&:backdrop,
|
|
&:backdrop:hover,
|
|
&:backdrop:insensitive { @extend %undecorated_button; }
|
|
}
|
|
}
|
|
|
|
GtkScaleButton.button,
|
|
GtkVolumeButton.button {
|
|
// I assume both are image-button *by default*
|
|
// with the image-button/text-button classes automagically applied depending on the button child these selectors can be deleted.
|
|
@extend .image-button;
|
|
|
|
&.text-button { @extend .text-button }
|
|
}
|
|
|
|
/**********************
|
|
* 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
|
|
|
|
// FIXME rationalize window-frame shadows
|
|
|
|
/* 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;
|
|
}
|
|
&.popup {
|
|
box-shadow: none;
|
|
}
|
|
// server-side decorations as used by mutter
|
|
&.ssd {
|
|
box-shadow: 0 0 0 1px $_wm_border; //just doing borders, wm draws actual shadows
|
|
}
|
|
&.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);
|
|
}
|
|
}
|
|
&.solid-csd {
|
|
border-radius: 0;
|
|
margin: 4px;
|
|
background-color: $backdrop_bg_color;
|
|
border: solid 1px $backdrop_borders_color;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
// 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 { color: $backdrop_selected_fg_color; }
|
|
}
|
|
|
|
.monospace {
|
|
font: Monospace;
|
|
}
|
|
|
|
/**********************
|
|
* Touch Copy & Paste *
|
|
*********************/
|
|
|
|
//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;
|
|
@each $s,$as in ('',''),
|
|
(':hover','-hover'),
|
|
(':active','-active') { //no need for insensitive and backdrop
|
|
&.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
|
|
$_url: 'assets/text-select-start#{$as}#{$asset_suffix}';
|
|
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
|
|
url('#{$_url}@2.png'));
|
|
padding-left: 10px;
|
|
}
|
|
&.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
|
|
$_url: 'assets/text-select-end#{$as}#{$asset_suffix}';
|
|
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
|
|
url('#{$_url}@2.png'));
|
|
padding-right: 10px;
|
|
}
|
|
&.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) {
|
|
$_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
|
|
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
|
|
url('#{$_url}@2.png'));
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Decouple the font of context menus from their entry/textview */
|
|
.context-menu {
|
|
font: initial;
|
|
}
|
|
|
|
.touch-selection {
|
|
font: initial;
|
|
color: $osd_fg_color;
|
|
border: none;
|
|
background-color: opacify($osd_bg_color,0.2);
|
|
background-clip: padding-box;
|
|
outline-color: transparentize($osd_fg_color, 0.7);
|
|
box-shadow: none;
|
|
text-shadow: 0 1px black;
|
|
icon-shadow: 0 1px black;
|
|
&:backdrop { text-shadow: none; }
|
|
.button {
|
|
@include button(osd);
|
|
&:hover { @include button(osd-hover); }
|
|
&:active, &:checked { @include button(osd-active); }
|
|
&:insensitive, &:backdrop:insensitive { @include button(osd-insensitive); }
|
|
&:backdrop { @include button(osd-backdrop); }
|
|
}
|
|
// checkboxes and radios to use the -dark style for OSD style popovers
|
|
@each $w,$a in ('check', 'checkbox'),
|
|
('radio','radio') {
|
|
@each $s,$as in ('','-unchecked'),
|
|
(':hover', '-unchecked-hover'),
|
|
(':active', '-unchecked-active'),
|
|
(':insensitive','-unchecked-insensitive'),
|
|
(':inconsistent', '-mixed'),
|
|
(':inconsistent:hover', '-mixed-hover'),
|
|
(':inconsistent:selected', '-mixed-active'),
|
|
(':inconsistent:insensitive', '-mixed-insensitive'),
|
|
(':checked', '-checked'),
|
|
(':checked:insensitive','-checked-insensitive'),
|
|
(':checked:hover', '-checked-hover'),
|
|
(':checked:active', '-checked-active'),
|
|
(':backdrop:checked', '-checked-backdrop') {
|
|
.#{$w}#{$s} {
|
|
icon-shadow: none;
|
|
-gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-dark.png"),
|
|
url("assets/#{$a}#{$as}-dark@2.png"));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
|
|
// This draws a box on top of the content, the size changes programmatically.
|
|
.overshoot {
|
|
&.top {
|
|
@include overshoot(top);
|
|
&:backdrop { @include overshoot(top, backdrop); }
|
|
}
|
|
&.bottom {
|
|
@include overshoot(bottom);
|
|
&:backdrop { @include overshoot(bottom, backdrop); }
|
|
}
|
|
&.left {
|
|
@include overshoot(left);
|
|
&:backdrop { @include overshoot(left, backdrop); }
|
|
}
|
|
&.right {
|
|
@include overshoot(right);
|
|
&:backdrop { @include overshoot(right, backdrop); }
|
|
}
|
|
}
|
|
|
|
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
|
|
.undershoot {
|
|
&.top {
|
|
@include undershoot(top);
|
|
}
|
|
|
|
&.bottom {
|
|
@include undershoot(bottom);
|
|
}
|
|
|
|
&.left {
|
|
@include undershoot(left);
|
|
}
|
|
|
|
&.right {
|
|
@include undershoot(right);
|
|
}
|
|
}
|