gtk2/gtk/theme/Adwaita/_common.scss

4465 lines
104 KiB
SCSS
Raw Normal View History

@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', '');
$backdrop_transition: 200ms ease-out;
$button_transition: all 200ms $ease-out-quad;
* {
padding: 0;
-GtkToolButton-icon-spacing: 4;
-GtkTextView-error-underline-color: $error_color;
// 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;
-GtkToolItemGroup-expander-size: 11;
-GtkWidget-text-handle-width: 20;
-GtkWidget-text-handle-height: 24;
-GtkDialog-button-spacing: 4;
-GtkDialog-action-area-border: 0;
// 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: gtkalpha(currentColor, 0.3);
outline-style: dashed;
outline-offset: -3px;
outline-width: 1px;
-gtk-outline-radius: 2px;
-gtk-secondary-caret-color: $selected_bg_color
}
/***************
* Base States *
***************/
.background {
color: $fg_color;
2015-12-04 17:42:56 +00:00
background-color: $bg_color;
&:backdrop {
color: $backdrop_fg_color;
background-color: $backdrop_bg_color;
2016-03-12 14:03:07 +00:00
text-shadow: none;
-gtk-icon-shadow: none;
}
}
/*
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.
*/
2016-03-12 14:03:07 +00:00
*:disabled { -gtk-icon-effect: dim; }
.gtkstyle-fallback {
color: $fg_color;
2016-03-12 14:03:07 +00:00
background-color: $bg_color;
&:hover {
color: $fg_color;
2016-03-12 14:03:07 +00:00
background-color: lighten($bg_color, 10%);
}
2016-03-12 14:03:07 +00:00
&:active {
color: $fg_color;
2016-03-12 14:03:07 +00:00
background-color: darken($bg_color, 10%);
}
2016-03-12 14:03:07 +00:00
&:disabled {
color: $insensitive_fg_color;
2016-03-12 14:03:07 +00:00
background-color: $insensitive_bg_color;
}
2016-03-12 14:03:07 +00:00
&:selected {
color: $selected_fg_color;
2016-03-12 14:03:07 +00:00
background-color: $selected_bg_color;
}
}
.view,
%view {
color: $text_color;
background-color: $base_color;
&:backdrop {
color: $backdrop_text_color;
background-color: $backdrop_base_color;
&:disabled { color: $backdrop_insensitive_color; }
}
&:disabled {
color: $insensitive_fg_color;
background-color: $insensitive_bg_color;
}
2016-01-09 13:36:05 +00:00
2016-03-12 14:03:07 +00:00
&:selected {
&:focus, & {
@extend %selected_items;
border-radius: 3px;
}
}
}
.view,
textview {
text {
@extend %view;
2016-03-12 14:03:07 +00:00
selection { &:focus, & { @extend %selected_items; }}
}
}
textview border { background-color: mix($bg_color, $base_color, 50%); }
iconview { @extend .view; }
.rubberband,
rubberband {
border: 1px solid darken($selected_bg_color, 10%);
background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
2014-06-19 17:11:02 +00:00
}
flowbox {
2016-01-09 13:36:05 +00:00
rubberband { @extend rubberband; }
flowboxchild {
padding: 3px;
2016-03-12 14:03:07 +00:00
&:selected {
@extend %selected_items;
2016-03-12 14:03:07 +00:00
outline-offset: -2px;
}
}
}
.content-view .tile {
margin: 2px;
background-color: if($variant=='light', transparent, black);
border-radius: 0;
padding: 0;
&:backdrop { background-color: if($variant=='light', transparent, darken($backdrop_base_color,5%)); }
&:active, &:selected { background-color: if($variant=='light', transparent, $selected_bg_color); }
&:disabled { background-color: if($variant=='light', transparent, $insensitive_bg_color); }
}
label {
caret-color: currentColor; // this shouldn't be needed.
&.separator {
@extend .dim-label;
2016-03-12 14:03:07 +00:00
color: $fg_color;
&:backdrop { color: $backdrop_fg_color; }
}
2016-01-09 13:36:05 +00:00
row:selected &,
&:selected { @extend %nobg_selected_items; }
selection {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
2016-01-09 13:36:05 +00:00
&:disabled {
color: $insensitive_fg_color;
2016-03-12 14:03:07 +00:00
selection { @extend %selected_items:disabled; }
2014-08-26 17:24:44 +00:00
&:backdrop { color: $backdrop_insensitive_color; }
}
&:backdrop {
color: $backdrop_fg_color;
selection { @extend %selected_items:backdrop; }
}
}
2014-07-07 11:30:24 +00:00
.dim-label {
opacity: 0.55;
text-shadow: none;
2014-07-07 11:30:24 +00:00
}
assistant {
2014-08-26 15:51:45 +00:00
.sidebar {
background-color: $base_color;
2014-08-26 15:51:45 +00:00
border-top: 1px solid $borders_color;
2014-08-26 15:51:45 +00:00
&:backdrop {
background-color: $backdrop_base_color;
border-color: $backdrop_borders_color;
}
}
2016-01-09 13:36:05 +00:00
2014-08-26 15:51:45 +00:00
&.csd .sidebar { border-top-style: none; }
2016-01-09 13:36:05 +00:00
.sidebar label { padding: 6px 12px; }
.sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); }
}
2016-04-17 21:40:29 +00:00
%osd,
.osd {
color: $osd_fg_color;
border: none;
background-color: $osd_bg_color;
background-clip: padding-box;
text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black;
2016-01-09 13:36:05 +00:00
&:backdrop {
text-shadow: none;
-gtk-icon-shadow: none;
}
}
2016-02-14 13:33:30 +00:00
/*********************
* Spinner Animation *
*********************/
@keyframes spin {
to { -gtk-icon-transform: rotate(1turn); }
}
spinner {
background: none;
opacity: 0; // non spinning spinner makes no sense
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
2016-01-09 13:36:05 +00:00
&:checked {
opacity: 1;
animation: spin 1s linear infinite;
2016-01-09 13:36:05 +00:00
&:disabled { opacity: 0.5; }
}
}
2016-02-14 13:33:30 +00:00
/****************
* Text Entries *
****************/
2016-03-14 09:19:05 +00:00
%entry,
2015-10-30 12:17:52 +00:00
entry {
2016-03-14 09:19:05 +00:00
%entry_basic, & {
min-height: 32px;
padding-left: 8px;
padding-right: 8px;
border: 1px solid;
border-radius: 3px;
transition: all 200ms $ease-out-quad;
2016-03-14 09:19:05 +00:00
@include entry(normal);
2016-03-14 09:19:05 +00:00
image { // icons inside the entry
&.left { margin-right: 6px; }
&.right { margin-left: 6px; }
2016-03-14 09:19:05 +00:00
}
2016-03-12 14:03:07 +00:00
2016-03-14 09:19:05 +00:00
undershoot {
&.left { @include undershoot(left); }
&.right { @include undershoot(right); }
}
2016-03-14 09:19:05 +00:00
&.flat {
&:focus, & {
min-height: 0;
padding: 2px;
background-color: transparent;
2016-03-14 09:19:05 +00:00
border-color: transparent;
border-radius: 0;
}
2016-03-12 14:03:07 +00:00
}
2016-03-14 09:19:05 +00:00
&:focus { @include entry(focus); }
&:disabled { @include entry(insensitive); }
&:backdrop {
@include entry(backdrop);
transition: $backdrop_transition;
}
2016-03-14 09:19:05 +00:00
&:backdrop:disabled { @include entry(backdrop-insensitive); }
selection { @extend %selected_items; }
2016-03-14 09:19:05 +00:00
// 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); }
selection { background-color: $e_color; }
2016-03-14 09:19:05 +00:00
}
}
2016-03-29 13:01:57 +00:00
image { // entry icons colors
2016-03-14 09:19:05 +00:00
color: mix($fg_color, $base_color, 80%);
2016-01-09 13:36:05 +00:00
2016-03-14 09:19:05 +00:00
&:hover { color: $fg_color; }
2016-01-09 13:36:05 +00:00
2016-03-14 09:19:05 +00:00
&:active { color: $selected_bg_color; }
2016-01-09 13:36:05 +00:00
2016-03-14 09:19:05 +00:00
&:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); }
}
&:drop(active) {
&:focus, & {
border-color: $drop_target_color;
box-shadow: inset 0 0 0 1px $drop_target_color;
}
}
2016-03-14 09:19:05 +00:00
.osd & {
@include entry(osd);
&:focus { @include entry(osd-focus); }
&:backdrop { @include entry(osd-backdrop); }
&:disabled { @include entry(osd-insensitive); }
}
}
2016-01-09 13:36:05 +00:00
progress {
margin: 2px -6px;
2016-03-12 14:03:07 +00:00
background-color: transparent;
background-image: none;
border-radius: 0;
border-width: 0 0 2px;
border-color: $selected_bg_color;
border-style: solid;
box-shadow: none;
&:backdrop { background-color: transparent; }
}
2016-03-14 09:19:05 +00:00
// linked entries
.linked:not(.vertical) > & { @extend %linked; }
.linked:not(.vertical) > &:focus + &,
2015-10-30 03:17:41 +00:00
.linked:not(.vertical) > &:focus + button,
.linked:not(.vertical) > &:focus + combobox > box > button.combo { border-left-color: entry_focus_border(); }
.linked:not(.vertical) > &:drop(active) + &,
.linked:not(.vertical) > &:drop(active) + button,
.linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; }
2016-03-14 09:19:05 +00:00
// Vertically linked entries
// FIXME: take care of "colored" entries
.linked.vertical > & {
@extend %linked_vertical;
2016-01-09 13:36:05 +00:00
2016-03-14 09:19:05 +00:00
// brighter border between linked entries
&:not(:disabled) + entry:not(:disabled),
&:not(:disabled) + %entry:not(:disabled) {
2016-03-14 09:19:05 +00:00
border-top-color: mix($borders_color, $base_color, 30%);
2016-01-09 13:36:05 +00:00
&:backdrop { border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); }
}
2016-01-09 13:36:05 +00:00
2016-03-14 09:19:05 +00:00
// brighter border between linked insensitive entries
&:disabled + %entry:disabled,
2016-03-14 09:19:05 +00:00
&:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); }
2016-01-09 13:36:05 +00:00
// color back the top border of a linked focused entry following another entry.
2016-03-14 09:19:05 +00:00
// :not(:only-child) is a specificity bump hack.
+ %entry:focus:not(:only-child),
2016-03-14 09:19:05 +00:00
+ entry:focus:not(:only-child) { border-top-color: entry_focus_border(); }
2016-01-09 13:36:05 +00:00
+ %entry:drop(active):not(:only-child),
2016-03-14 09:19:05 +00:00
+ entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; }
2016-03-14 09:19:05 +00:00
// this takes care of coloring the top border of the focused entry subsequent widget.
// :not(:only-child) is a specificity bump hack.
&:focus:not(:only-child) {
+ %entry,
2016-03-14 09:19:05 +00:00
+ entry,
+ button,
+ combobox > box > button.combo { border-top-color: entry_focus_border(); }
}
2016-03-14 09:19:05 +00:00
&:drop(active):not(:only-child) {
+ %entry,
2016-03-14 09:19:05 +00:00
+ entry,
+ button,
+ combobox > box > button.combo { border-top-color: $drop_target_color; }
}
}
}
treeview entry {
&:focus {
&:dir(rtl), &:dir(ltr) { // specificity bump hack
background-color: $base_color;
transition-property: color, background;
}
}
&.flat, & {
border-radius: 0;
background-image: none;
background-color: $base_color;
&:focus { border-color: $selected_bg_color; }
}
}
.entry-tag {
// sizing
padding: 5px;
margin-top: 2px;
margin-bottom: 2px;
// side margins: compensate the entry padding with a negative margin
// then the negative margin itself
:dir(ltr) & {
margin-left: 8px;
margin-right: -5px;
}
:dir(rtl) & {
margin-left: -5px;
margin-right: 8px;
}
border-style: none;
$_entry_tag_color: if($variant=='light', $selected_fg_color, $base_color);
color: $_entry_tag_color;
$_entry_tag_bg: if($variant=='light', $selected_bg_color, mix($fg_color, $base_color, 50%));
background-color: $_entry_tag_bg;
&:hover {
background-color: lighten($_entry_tag_bg, 10%);
}
:backdrop & {
color: $backdrop_base_color;
background-color: if($variant=='light', $selected_bg_color,
mix($backdrop_fg_color, $backdrop_base_color, 50%));
}
&.button {
background-color: transparent;
color: transparentize($_entry_tag_color, 0.3);
}
:not(:backdrop) &.button {
&:hover {
border: 1px solid $_entry_tag_bg;
color: $_entry_tag_color;
}
&:active {
background-color: $_entry_tag_bg;
color: transparentize($_entry_tag_color, 0.3);
}
}
}
/***********
* 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));
}
2016-01-09 13:36:05 +00:00
to {
background-image: -gtk-gradient(radial,
center center, 0,
center center, 0.5,
to($selected_bg_color),
to(transparent));
}
}
%button,
2015-10-30 03:17:41 +00:00
button {
2016-03-14 09:53:59 +00:00
@at-root %button_basic, & {
min-height: 24px;
min-width: 16px;
padding: 4px 8px;
border: 1px solid;
border-radius: 3px;
transition: $button_transition;
2016-03-12 14:03:07 +00:00
@include button(normal);
2016-03-12 14:03:07 +00:00
&.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; }
}
}
2016-01-09 13:36:05 +00:00
&:hover {
@include button(hover);
-gtk-icon-effect: highlight;
}
2016-01-09 13:36:05 +00:00
2016-03-12 14:03:07 +00:00
&:active,
&:checked {
@include button(active);
2016-03-12 14:03:07 +00:00
transition-duration: 50ms;
}
2016-01-09 13:36:05 +00:00
2016-03-12 14:03:07 +00:00
&:backdrop {
&.flat, & {
@include button(backdrop);
2016-01-09 13:36:05 +00:00
transition: $backdrop_transition;
2016-03-12 14:03:07 +00:00
-gtk-icon-effect: none;
2016-01-09 13:36:05 +00:00
2016-03-12 14:03:07 +00:00
&:active,
&:checked { @include button(backdrop-active); }
&:disabled {
@include button(backdrop-insensitive);
2016-01-09 13:36:05 +00:00
2016-03-12 14:03:07 +00:00
&:active,
&:checked { @include button(backdrop-insensitive-active); }
}
}
}
2016-01-09 13:36:05 +00:00
2016-03-12 14:03:07 +00:00
&.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }}
2016-01-09 13:36:05 +00:00
&:disabled {
@include button(insensitive);
2016-01-09 13:36:05 +00:00
&:active,
&:checked { @include button(insensitive-active); }
}
2016-01-09 13:36:05 +00:00
2016-02-14 20:06:38 +00:00
&.image-button {
min-width: 24px;
padding-left: 4px;
padding-right: 4px;
2016-02-14 20:06:38 +00:00
}
&.text-button {
padding-left: 16px;
padding-right: 16px;
}
2016-01-09 13:36:05 +00:00
&.text-button.image-button {
padding-left: 8px;
padding-right: 8px;
label {
padding-left: 8px;
padding-right: 8px;
}
}
&:drop(active) {
color: $drop_target_color;
border-color: $drop_target_color;
box-shadow: inset 0 0 0 1px $drop_target_color;
}
}
@at-root %button_selected, & {
row:selected & {
@if $variant == 'light' { border-color: $selected_borders_color; }
&.flat:not(:active):not(:checked):not(:hover):not(disabled) {
color: $selected_fg_color;
border-color: transparent;
&:backdrop { color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color); }
}
}
}
2014-07-07 11:26:09 +00:00
// big standalone buttons like in Documents pager
&.osd {
min-width: 24px;
min-height: 32px;
&.image-button { min-width: 32px; }
2016-01-09 13:36:05 +00:00
2014-07-07 11:26:09 +00:00
color: $osd_fg_color;
border-radius: 5px;
2016-03-12 14:03:07 +00:00
2014-07-07 11:26:09 +00:00
@include button(osd);
2016-03-12 14:03:07 +00:00
border: none;
box-shadow: none;
2016-01-09 13:36:05 +00:00
&:hover {
@include button(osd-hover);
2016-03-12 14:03:07 +00:00
border: none;
box-shadow: none;
}
2016-01-09 13:36:05 +00:00
&:active,
&:checked {
@include button(osd-active);
2016-03-12 14:03:07 +00:00
border: none;
box-shadow: none;
}
2016-01-09 13:36:05 +00:00
2016-03-12 14:03:07 +00:00
&:disabled {
&:backdrop, & {
@include button(osd-insensitive);
border: none;
}
}
2016-01-09 13:36:05 +00:00
&:backdrop {
@include button(osd-backdrop);
2016-03-12 14:03:07 +00:00
border: none;
}
2014-07-07 11:26:09 +00:00
}
2016-01-09 13:36:05 +00:00
//overlay / OSD style
@at-root %osd_button,
.osd & {
@include button(osd);
2016-03-12 14:03:07 +00:00
2016-01-09 13:36:05 +00:00
&:hover { @include button(osd-hover); }
&:active,
2016-03-12 14:03:07 +00:00
&:checked { &:backdrop, & { @include button(osd-active); }}
2016-01-09 13:36:05 +00:00
2016-03-12 14:03:07 +00:00
&:disabled { &:backdrop, & { @include button(osd-insensitive); }}
2016-01-09 13:36:05 +00:00
&:backdrop { @include button(osd-backdrop); }
&.flat {
@include button(undecorated);
2016-03-12 14:03:07 +00:00
box-shadow: none; //FIXME respect no edge on the button mixin
text-shadow: 0 1px black;
-gtk-icon-shadow: 0 1px black;
2016-01-09 13:36:05 +00:00
&:hover { @include button(osd-hover); }
&:disabled {
@include button(osd-insensitive);
background-image: none;
border-color: transparent;
box-shadow: none;
}
2016-01-09 13:36:05 +00:00
&:backdrop { @include button(undecorated); }
2016-01-09 13:36:05 +00:00
&:active,
&:checked { @include button(osd-active); }
}
}
// 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);
2016-01-09 13:36:05 +00:00
2014-09-04 17:13:29 +00:00
&.flat {
@include button(undecorated);
2016-03-12 14:03:07 +00:00
2014-09-04 17:13:29 +00:00
color: $b_color; //FIXME: does it work on the dark variant?
}
2016-01-09 13:36:05 +00:00
&:hover { @include button(hover, $b_color, white); }
2016-01-09 13:36:05 +00:00
&:active,
&:checked { @include button(active, $b_color, white); }
&:backdrop,
&.flat:backdrop {
@include button(backdrop, $b_color, white);
2016-01-09 13:36:05 +00:00
&:active,
&:checked { @include button(backdrop-active, $b_color, white); }
&:disabled {
@include button(backdrop-insensitive);
2016-01-09 13:36:05 +00:00
2016-03-12 14:03:07 +00:00
&:active,
&:checked { @include button(backdrop-insensitive-active, $b_color, white); }
}
}
2016-01-09 13:36:05 +00:00
2016-03-12 14:03:07 +00:00
&.flat {
&:backdrop, &:disabled, &:backdrop:disabled {
@include button(undecorated);
color: transparentize($b_color, 0.2);
}
2014-09-04 17:13:29 +00:00
}
2016-01-09 13:36:05 +00:00
&:disabled {
@include button(insensitive);
2016-01-09 13:36:05 +00:00
&:active,
&:checked { @include button(insensitive-active, $b_color, white); }
}
2016-01-09 13:36:05 +00:00
.osd & {
@include button(osd, $b_color);
2016-01-09 13:36:05 +00:00
&:hover { @include button(osd-hover, $b_color); }
&:active,
2016-03-12 14:03:07 +00:00
&:checked { &:backdrop, & { @include button(osd-active, $b_color); }}
2016-01-09 13:36:05 +00:00
2016-03-12 14:03:07 +00:00
&:disabled { &:backdrop, & { @include button(osd-insensitive, $b_color); }}
2016-01-09 13:36:05 +00:00
&:backdrop { @include button(osd-backdrop, $b_color); }
}
}
}
.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; //
}
2016-01-09 13:36:05 +00:00
> image {
padding-left: 6px; // image padding
padding-right: 6px; //
padding-top: 3px; //
padding-bottom: 3px; //
}
2016-01-09 13:36:05 +00:00
&.text-button {
// compensate text-button paddings
padding-left: 10px;
padding-right: 10px;
}
2016-01-09 13:36:05 +00:00
&.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-left: 2px;
padding-right: 2px;
}
2016-01-09 13:36:05 +00:00
2016-03-14 09:53:59 +00:00
&.needs-attention {
> label,
> image { @extend %needs_attention; }
&:active,
&:checked {
> label,
> image {
animation: none;
background-image: none;
}
}
}
}
// hide separators
&.font,
&.file { separator { background-color: transparent; }}
&.font { > box > box > label { font-weight: bold; }}
// inline-toolbar buttons
.inline-toolbar &, .inline-toolbar &:backdrop {
border-radius: 2px;
border-width: 1px;
2014-08-06 11:20:45 +00:00
@extend %linked;
}
.primary-toolbar & { -gtk-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; }
&.circular { // The Bloody Circul Button
border-radius: 9999px;
-gtk-outline-radius: 9999px;
label { padding: 0; }
// the followind code is needed since we use a darker bottom border on buttons, which looks pretty
// bad with a 100% border radius (see https://bugzilla.gnome.org/show_bug.cgi?id=771205 for details),
// so on relevant states we an additional background-image with a gradient clipped on the border-box,
// so setting a transparent border would reveal it.
// FIXME: take care of colored circular button.
$_border_bg: linear-gradient(to top, $alt-borders-color 25%, $borders-color 50%);
&:not(.flat):not(:checked):not(:active):not(:disabled):not(:backdrop) {
@include button(normal);
background-image: $button_fill, $_border_bg;
border-color: transparent;
}
&:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) {
@include button(hover);
background-image: $button_fill, $_border_bg;
border-color: transparent;
}
background-origin: padding-box, border-box;
background-clip: padding-box, border-box;
}
}
%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;
2016-03-12 14:03:07 +00:00
@if $variant == 'light' { background-position: right 3px, right 4px; }
2016-03-12 14:03:07 +00:00
@else { background-position: right 3px, right 2px; }
2016-03-12 14:03:07 +00:00
&:backdrop { background-size: 6px 6px, 0 0;}
2016-03-12 14:03:07 +00:00
&:dir(rtl) {
@if $variant == 'light' { background-position: left 3px, left 4px; }
2016-03-12 14:03:07 +00:00
@else { background-position: left 3px, left 2px; }
}
}
// all the following is for the +|- buttons on inline toolbars, that way
// should really be deprecated...
2015-11-01 00:52:41 +00:00
.inline-toolbar toolbutton > button { // redefining the button look is
// needed since those are flat...
@include button(normal);
2016-01-09 13:36:05 +00:00
&:hover { @include button(hover); }
2016-01-09 13:36:05 +00:00
&:active,
&:checked{ @include button(active); }
2016-01-09 13:36:05 +00:00
2016-03-12 14:03:07 +00:00
&:disabled {
@include button(insensitive);
2016-01-09 13:36:05 +00:00
2016-03-12 14:03:07 +00:00
&:active,
&:checked { @include button(insensitive-active); }
}
2016-01-09 13:36:05 +00:00
2016-03-12 14:03:07 +00:00
&:backdrop {
@include button(backdrop);
2016-01-09 13:36:05 +00:00
2016-03-12 14:03:07 +00:00
&:active,
&:checked { @include button(backdrop-active); }
2016-01-09 13:36:05 +00:00
2016-03-12 14:03:07 +00:00
&:disabled {
@include button(backdrop-insensitive);
2016-01-09 13:36:05 +00:00
2016-03-12 14:03:07 +00:00
&:active,
&:checked { @include button(backdrop-insensitive-active); }
}
}
}
// More inline toolbar buttons
2015-11-01 00:52:41 +00:00
toolbar.inline-toolbar toolbutton,
toolbar.inline-toolbar toolbutton:backdrop {
2016-04-02 14:03:02 +00:00
> button.flat { @extend %linked_middle; }
2016-01-09 13:36:05 +00:00
2015-10-30 03:17:41 +00:00
&:first-child > button.flat { @extend %linked:first-child; }
2016-01-09 13:36:05 +00:00
2015-10-30 03:17:41 +00:00
&:last-child > button.flat { @extend %linked:last-child; }
2016-01-09 13:36:05 +00:00
2015-10-30 03:17:41 +00:00
&:only-child > button.flat { @extend %linked:only-child; }
}
2014-08-06 11:20:45 +00:00
%linked_middle {
border-radius: 0;
border-right-style: none;
2014-08-06 11:20:45 +00:00
}
%linked {
@extend %linked_middle;
2016-01-09 13:36:05 +00:00
&:first-child {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
2016-01-09 13:36:05 +00:00
&:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-right-style: solid;
}
2016-01-09 13:36:05 +00:00
&:only-child {
border-radius: 3px;
border-style: solid;
2014-07-09 17:37:41 +00:00
}
}
2014-10-04 22:56:48 +00:00
%linked_vertical_middle {
border-style: solid solid none solid;
2014-10-04 22:56:48 +00:00
border-radius: 0;
}
%linked_vertical{
@extend %linked_vertical_middle;
2016-01-09 13:36:05 +00:00
2014-07-09 17:37:41 +00:00
&:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
2014-07-09 17:37:41 +00:00
}
2016-01-09 13:36:05 +00:00
2014-07-09 17:37:41 +00:00
&:last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-style: solid;
2014-07-09 17:37:41 +00:00
}
2016-01-09 13:36:05 +00:00
2014-07-09 17:37:41 +00:00
&:only-child {
border-radius: 3px;
border-style: solid;
}
}
%undecorated_button {
background-color: transparent;
background-image: none;
2016-03-12 14:03:07 +00:00
border-color: transparent;
2016-04-17 21:40:29 +00:00
box-shadow: inset 0 1px transparentize(white, 1),
0 1px transparentize(white, 1);
text-shadow: none;
-gtk-icon-shadow: none;
}
/* menu buttons */
modelbutton.flat,
.menuitem.button.flat {
min-height: 26px;
padding-left: 5px;
padding-right: 5px;
border-radius: 3px;
outline-offset: -2px;
@extend %undecorated_button;
2016-03-12 14:03:07 +00:00
&:hover { background-color: $popover_hover_color; }
2016-01-09 13:36:05 +00:00
&:selected { @extend %selected_items; }
2016-01-09 13:36:05 +00:00
&:backdrop,
&:backdrop:hover { @extend %undecorated_button; }
}
modelbutton.flat arrow {
background: none;
2016-01-09 13:36:05 +00:00
&:hover { background: none; }
2016-01-09 13:36:05 +00:00
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
2016-01-09 13:36:05 +00:00
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
}
button.color {
padding: 4px;
2016-03-12 14:03:07 +00:00
colorswatch:only-child {
&, overlay { border-radius: 0; }
2016-01-09 13:36:05 +00:00
@if $variant == 'light' {
box-shadow: 0 1px _text_shadow_color();
.osd & { box-shadow: none; }
}
}
2016-01-09 13:36:05 +00:00
@if $variant == 'light' {
.osd &, & {
&:disabled,
&:backdrop,
&:active,
&:checked { colorswatch:only-child { box-shadow: none; }}
}
}
}
2016-02-14 13:33:30 +00:00
/*********
* Links *
*********/
%link,
2014-06-18 14:07:59 +00:00
*:link {
color: $link_color;
2016-03-12 14:03:07 +00:00
&:visited {
color: $link_visited_color;
2016-03-12 14:03:07 +00:00
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
}
2016-01-09 13:36:05 +00:00
&:hover {
color: lighten($link_color,10%);
2016-03-12 14:03:07 +00:00
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); }
}
2016-01-09 13:36:05 +00:00
&:active {
color: $link_color;
2016-03-12 14:03:07 +00:00
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
2014-06-18 14:07:59 +00:00
}
2016-01-09 13:36:05 +00:00
2016-03-12 14:03:07 +00:00
&:backdrop { &:backdrop:hover, &:backdrop:hover:selected, & { color: $selected_bg_color; }}
2016-01-09 13:36:05 +00:00
@at-root %link_selected,
2016-01-09 13:36:05 +00:00
&:selected,
2016-03-12 14:03:07 +00:00
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
2014-06-18 14:07:59 +00:00
}
2016-01-09 13:36:05 +00:00
button:link,
button:visited {
@extend %undecorated_button;
2016-03-12 14:03:07 +00:00
@extend *:link;
2016-03-12 14:03:07 +00:00
text-shadow: none;
2016-01-09 13:36:05 +00:00
&:hover,
&:active,
&:checked {
@extend %undecorated_button;
2016-03-12 14:03:07 +00:00
text-shadow: none;
}
2016-01-09 13:36:05 +00:00
> label {
@extend %link;
text-decoration-line: underline;
}
}
2016-02-14 13:33:30 +00:00
/*****************
* GtkSpinButton *
*****************/
2015-10-29 01:55:07 +00:00
spinbutton {
&:not(.vertical) {
// in this horizontal configuration, the whole spinbutton
// behaves as the entry, so we extend the entry styling
// and nuke the style on the internal entry
2016-03-14 09:53:59 +00:00
@extend %entry;
2016-03-12 14:03:07 +00:00
padding: 0;
entry {
min-width: 28px;
// reset all the other props since the spinbutton node is styled here
margin: 0;
background: none;
background-color: transparent;
border: none;
border-radius: 0;
box-shadow: none;
&:backdrop:disabled { background-color: transparent; }
}
2015-10-29 01:55:07 +00:00
button {
2016-03-12 14:03:07 +00:00
min-height: 16px;
margin: 0;
2016-03-12 14:03:07 +00:00
padding-bottom: 0;
padding-top: 0;
color: mix($fg_color, $base_color, 90%);
background-image: none;
border-style: none none none solid;
border-color: transparentize($borders_color, 0.7);
border-radius: 0;
box-shadow: none;
2016-01-09 13:36:05 +00:00
&:dir(rtl) { border-style: none solid none none; }
2016-01-09 13:36:05 +00:00
&:hover {
color: $fg_color;
2016-01-12 00:03:47 +00:00
background-color: $base_hover_color;
}
2016-01-09 13:36:05 +00:00
&:disabled {
color: transparentize($insensitive_fg_color, 0.7);
background-color: transparent;
}
2016-01-09 13:36:05 +00:00
&:active {
background-color: transparentize(black, 0.9);
2016-03-12 14:03:07 +00:00
box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
}
2016-01-09 13:36:05 +00:00
&:backdrop {
color: mix($backdrop_fg_color, $backdrop_base_color, 90%);
background-color: transparent;
2016-03-12 14:03:07 +00:00
border-color: transparentize($backdrop_borders_color, 0.7);
transition: $backdrop_transition;
}
2016-01-09 13:36:05 +00:00
&:backdrop:disabled {
color: transparentize($backdrop_insensitive_color,0.7);
background-color: transparent;
border-style: none none none solid; // It is needed or it gets overridden
2016-01-09 13:36:05 +00:00
&:dir(rtl) { border-style: none solid none none; }
}
&:dir(ltr):last-child { border-radius: 0 3px 3px 0; }
&:dir(rtl):first-child { border-radius: 3px 0 0 3px; }
}
}
2015-10-10 15:42:40 +00:00
// OSD horizontal
.osd &:not(.vertical) {
2016-01-09 13:36:05 +00:00
button {
@include button(undecorated);
2016-03-12 14:03:07 +00:00
color: $osd_fg_color;
border-style: none none none solid;
border-color: transparentize($osd_borders_color, 0.3);
border-radius: 0;
box-shadow: none;
-gtk-icon-shadow: 0 1px black;
2016-01-09 13:36:05 +00:00
&:dir(rtl) { border-style: none solid none none; }
2016-01-09 13:36:05 +00:00
&:hover {
@include button(undecorated);
2016-03-12 14:03:07 +00:00
color: $osd_fg_color;
border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
background-color: transparentize($osd_fg_color, 0.9);
-gtk-icon-shadow: 0 1px black;
box-shadow: none;
}
2016-01-09 13:36:05 +00:00
&:backdrop {
@include button(undecorated);
2016-03-12 14:03:07 +00:00
color: $osd_fg_color;
border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
-gtk-icon-shadow: none;
box-shadow: none;
}
2016-01-09 13:36:05 +00:00
&:disabled {
@include button(undecorated);
2016-03-12 14:03:07 +00:00
color: $osd_insensitive_fg_color;
border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
-gtk-icon-shadow: none;
box-shadow: none;
}
2016-01-09 13:36:05 +00:00
&:dir(ltr):last-child { border-radius: 0 3px 3px 0; }
2016-01-09 13:36:05 +00:00
&:dir(rtl):first-child { border-radius: 3px 0 0 3px; }
}
}
2015-10-10 15:42:40 +00:00
// Vertical
&.vertical {
// in the vertical configuration, we treat the spinbutton
// as a box, and tweak the style of the entry in the middle
// so that it's linked
// FIXME: this should not be set at all, but otherwise it gets the wrong
// color
&:disabled { color: $insensitive_fg_color; }
2016-04-17 21:40:29 +00:00
&:backdrop:disabled { color: $backdrop_insensitive_color; }
&:drop(active) {
border-color: transparent;
box-shadow: none;
}
entry {
min-height: 32px;
min-width: 32px;
padding: 0;
border-radius: 0;
}
2016-01-09 13:36:05 +00:00
2015-10-29 01:55:07 +00:00
button {
min-height: 32px;
min-width: 32px;
padding: 0;
2016-01-09 13:36:05 +00:00
&.up { @extend %top_button; }
2016-01-09 13:36:05 +00:00
&.down { @extend %bottom_button; }
}
2016-01-09 13:36:05 +00:00
%top_button {
border-radius: 3px 3px 0 0;
border-style: solid solid none solid;
}
2016-03-12 14:03:07 +00:00
%bottom_button {
border-radius: 0 0 3px 3px;
border-style: none solid solid solid;
}
}
2015-10-10 15:42:40 +00:00
// OSD vertical
2015-10-29 01:55:07 +00:00
.osd &.vertical button:first-child {
2015-10-10 15:42:40 +00:00
@include button(osd);
2015-10-10 15:42:40 +00:00
&:hover { @include button(osd-hover);}
2016-01-09 13:36:05 +00:00
2015-10-10 15:42:40 +00:00
&:active { @include button(osd-active); }
2016-01-09 13:36:05 +00:00
&:disabled { @include button(osd-insensitive); }
2016-01-09 13:36:05 +00:00
2015-10-10 15:42:40 +00:00
&:backdrop { @include button(osd-backdrop); }
}
// Misc
2016-03-20 22:33:25 +00:00
treeview &:not(.vertical) {
min-height: 0;
border-style: none;
border-radius: 0;
entry {
min-height: 0;
padding: 1px 2px;
}
}
}
2016-02-14 13:33:30 +00:00
/**************
* ComboBoxes *
**************/
combobox {
2016-01-09 13:36:05 +00:00
arrow {
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
min-height: 16px;
min-width: 16px;
}
2016-01-09 13:36:05 +00:00
&.linked {
button:nth-child(2) {
&:dir(ltr) { @extend %linked:last-child; }
&:dir(rtl) { @extend %linked:first-child; }
}
}
&:drop(active) { // FIXME: untested
box-shadow: none;
2016-03-14 09:53:59 +00:00
button.combo { @extend %button_basic:drop(active); }
}
}
.linked > combobox > box > button.combo {
// the combo is a composite widget so the way we do button linking doesn't
2014-08-06 10:23:47 +00:00
// work, special case needed. See
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
2016-01-09 13:36:05 +00:00
&:dir(ltr),
&:dir(rtl) { @extend %linked_middle; } // specificity bump
2014-08-06 10:23:47 +00:00
}
2016-01-09 13:36:05 +00:00
.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked:first-child; }
.linked:not(.vertical) > combobox:last-child > box > button.combo { @extend %linked:last-child; }
.linked:not(.vertical) > combobox:only-child > box > button.combo { @extend %linked:only-child; }
2016-01-09 13:36:05 +00:00
.linked.vertical > combobox > box > button.combo { @extend %linked_vertical_middle; }
.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical:first-child;}
.linked.vertical > combobox:last-child > box > button.combo { @extend %linked_vertical:last-child; }
.linked.vertical > combobox:only-child > box > button.combo { @extend %linked_vertical:only-child; }
2014-08-06 10:23:47 +00:00
2016-02-14 13:33:30 +00:00
/************
* Toolbars *
************/
%toolbar {
-GtkWidget-window-dragging: true;
padding: 4px;
background-color: $bg_color;
}
toolbar {
@extend %toolbar;
2016-03-12 14:03:07 +00:00
padding: 4px 3px 3px 4px;
2016-03-12 14:03:07 +00:00
// on OSD
.osd & { background-color: transparent; }
// stand-alone OSD toolbars
&.osd {
padding: 13px;
border: none;
border-radius: 5px;
background-color: $osd_bg_color;
2016-03-12 14:03:07 +00:00
&.left,
&.right,
&.top,
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
}
// toolbar separators
&.horizontal separator { margin: 0 7px 1px 6px; }
&.vertical separator { margin: 6px 1px 7px 0; }
&:not(.inline-toolbar):not(.osd) {
switch,
scale,
entry,
2016-03-14 09:53:59 +00:00
spinbutton,
button {
margin-right: 1px;
margin-bottom: 1px;
}
}
}
//searchbar, location-bar & inline-toolbar
.inline-toolbar {
@extend %toolbar;
2016-03-12 14:03:07 +00:00
@extend %darkbar;
2016-03-12 14:03:07 +00:00
padding: 3px;
2016-03-12 14:03:07 +00:00
border-width: 0 1px 1px;
border-radius: 0 0 5px 5px;
}
2016-01-09 13:36:05 +00:00
searchbar,
.location-bar {
@extend %toolbar;
2016-03-14 09:53:59 +00:00
@extend %darkbar;
2016-03-14 09:53:59 +00:00
border-width: 0 0 1px;
padding: 3px;
}
%darkbar {
border-style: solid;
border-color: $borders_color;
$_bg: mix($bg_color, $borders_color, 70%);
background-color: $_bg;
2016-01-09 13:36:05 +00:00
&:backdrop {
border-color: $backdrop_borders_color;
2014-07-19 08:50:01 +00:00
background-color: $backdrop_dark_fill;
box-shadow: none;
transition: $backdrop_transition;
}
}
2016-02-14 13:33:30 +00:00
/***************
* Header bars *
***************/
%titlebar,
headerbar {
padding: 0 6px;
min-height: 46px;
border-width: 0 0 1px;
border-style: solid;
2016-04-16 12:28:29 +00:00
border-color: $alt_borders_color;
border-radius: 0;
@include headerbar_fill;
&:backdrop {
border-color: $backdrop_borders_color;
background-color: $bg_color;
background-image: none;
box-shadow: inset 0 1px $top_hilight;
transition: $backdrop_transition;
}
.title {
padding-left: 12px;
padding-right: 12px;
2016-04-17 21:40:29 +00:00
font-weight: bold;
}
.subtitle {
font-size: smaller;
padding-left: 12px;
padding-right: 12px;
2016-03-14 09:53:59 +00:00
@extend .dim-label;
}
&.selection-mode {
$_hc: mix($top_hilight,$selected_bg_color, 50%); // hilight color
color: $selected_fg_color;
border-color: $selected_borders_color;
2016-04-17 21:40:29 +00:00
text-shadow: 0 -1px transparentize(black, 0.5);
2016-03-19 16:23:39 +00:00
@include headerbar_fill($selected_bg_color, $_hc);
&:backdrop {
2016-03-19 16:23:39 +00:00
background-color: $selected_bg_color;
background-image: none;
2014-12-01 09:14:47 +00:00
box-shadow: inset 0 1px mix($top_hilight, $selected_bg_color, 60%);
}
.subtitle:link { @extend *:link:selected; }
2015-10-30 03:17:41 +00:00
button {
@include button(normal, $selected_bg_color, $selected_fg_color);
&.flat { @include button(undecorated); }
&:hover { @include button(hover, $selected_bg_color, $selected_fg_color); }
2016-03-12 14:03:07 +00:00
&:active,
&:checked { @include button(active, $selected_bg_color, $selected_fg_color); }
2016-03-12 14:03:07 +00:00
&:backdrop {
&.flat, & {
@include button(backdrop, $selected_bg_color, $selected_fg_color);
2016-03-12 14:03:07 +00:00
-gtk-icon-effect: none;
border-color: $selected_borders_color;
2016-03-12 14:03:07 +00:00
&:active,
&:checked {
@include button(backdrop-active, $selected_bg_color, $selected_fg_color);
2016-03-12 14:03:07 +00:00
border-color: $selected_borders_color;
}
&:disabled {
@include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color);
border-color: $selected_borders_color;
&:active, &:checked {
@include button(backdrop-insensitive-active, $selected_bg_color, $selected_fg_color);
border-color: $selected_borders_color;
}
}
}
}
2016-03-12 14:03:07 +00:00
&.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }}
&:disabled {
@include button(insensitive, $selected_bg_color, $selected_fg_color);
2016-01-09 13:36:05 +00:00
&:active,
&:checked { @include button(insensitive-active, $selected_bg_color, $selected_fg_color); }
}
&.suggested-action {
@include button(normal);
2016-03-12 14:03:07 +00:00
border-color: $selected_borders_color;
&:hover {
@include button(hover);
2016-03-12 14:03:07 +00:00
border-color: $selected_borders_color;
}
&:active {
@include button(active);
2016-03-12 14:03:07 +00:00
border-color: $selected_borders_color;
}
&:disabled {
@include button(insensitive);
2016-03-12 14:03:07 +00:00
border-color: $selected_borders_color;
}
&:backdrop {
@include button(backdrop);
2016-03-12 14:03:07 +00:00
border-color: $selected_borders_color;
}
&:backdrop:disabled {
@include button(backdrop-insensitive);
2016-03-12 14:03:07 +00:00
border-color: $selected_borders_color;
}
}
}
.selection-menu {
2016-03-14 09:53:59 +00:00
&:backdrop, & {
border-color: transparentize($selected_bg_color, 1);
background-color: transparentize($selected_bg_color, 1);
background-image: none;
2016-03-14 09:53:59 +00:00
box-shadow: none;
padding-left: 10px;
padding-right: 10px;
2016-03-14 09:53:59 +00:00
GtkArrow { -GtkArrow-arrow-scaling: 1; }
2016-03-14 09:53:59 +00:00
.arrow {
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
color: transparentize($selected_fg_color,0.5);
-gtk-icon-shadow: none;
}
}
}
}
// squared corners when the window is maximized, tiled, or fullscreen
2016-01-09 13:36:05 +00:00
.tiled &,
.maximized &,
.fullscreen & {
&:backdrop, & {
border-radius: 0;
}
}
&.default-decoration {
min-height: 28px;
2016-04-17 21:40:29 +00:00
padding: 4px;
2016-01-09 13:36:05 +00:00
button.titlebutton {
min-height: 26px;
min-width: 26px;
margin: 0;
padding: 0;
}
}
2016-04-15 14:51:29 +00:00
.solid-csd & {
&:backdrop, & {
&:dir(rtl), &:dir(ltr) { // specificity bump
margin-left: -1px;
margin-right: -1px;
margin-top: -1px;
border-radius: 0;
box-shadow: none;
}
}
2016-04-15 14:51:29 +00:00
}
}
headerbar {
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
entry,
spinbutton,
separator,
button {
margin-top: 6px;
margin-bottom: 6px;
}
switch {
margin-top: 9px;
margin-bottom: 9px;
}
}
.background:not(.tiled):not(.maximized):not(.solid-csd) .titlebar {
&:backdrop, & {
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
}
headerbar { // headerbar border rounding
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { &:backdrop, & { border-top-left-radius: 7px; }}
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { &:backdrop, & { border-top-right-radius: 7px; }}
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
&:first-child, &:last-child {
&:backdrop, & {
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
}
}
}
.titlebar:not(headerbar) {
window.csd > & {
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
padding: 0;
background-color: transparent;
background-image: none;
border-style: none;
border-color: transparent;
box-shadow: none;
}
2016-01-09 13:36:05 +00:00
2016-04-17 21:40:29 +00:00
> separator { background-color: $borders_color; } // FIXME: use darker border?
@extend %titlebar;
}
2016-02-14 13:33:30 +00:00
2014-07-22 12:33:44 +00:00
/************
* Pathbars *
************/
2015-10-30 03:17:41 +00:00
.path-bar button {
&.text-button, &.image-button, & {
padding-left: 4px;
padding-right: 4px;
2014-07-22 12:33:44 +00:00
}
2016-03-12 14:03:07 +00:00
&.text-button.image-button label {
padding-left: 0;
padding-right: 0;
}
2014-07-22 12:33:44 +00:00
&.text-button.image-button, & {
label:last-child { padding-right: 8px; }
label:first-child { padding-left: 8px; }
}
image {
padding-left: 4px;
padding-right: 4px;
}
&.slider-button {
padding-left: 0;
padding-right: 0;
}
}
2016-02-14 13:33:30 +00:00
/**************
* Tree Views *
**************/
treeview.view {
@at-root * {
-GtkTreeView-horizontal-separator: 4;
-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
2016-04-02 14:03:02 +00:00
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
2016-03-12 14:03:07 +00:00
&:selected {
&:focus, & {
border-radius: 0;
2016-03-12 14:03:07 +00:00
@extend %selected_items;
}
2016-03-12 14:03:07 +00:00
&:backdrop, & {
border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly
}
}
&:disabled {
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 {
min-height: 2px;
2016-02-12 03:03:47 +00:00
color: $bg_color;
2016-01-09 13:36:05 +00:00
2016-02-12 03:03:47 +00:00
&:backdrop { color: transparentize($bg_color, 0.9); }
}
&:backdrop {
border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
border-top: $backdrop_bg_color;
}
&:drop(active) {
border-style: solid none;
border-width: 1px;
border-color: $selected_borders_color;
&.after { border-top-style: none; }
&.before { border-bottom-style: none; }
}
&.expander {
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
2016-01-09 13:36:05 +00:00
2016-05-06 17:34:12 +00:00
color: mix($text_color, $base_color, 70%);
2016-01-09 13:36:05 +00:00
2016-05-06 17:34:12 +00:00
&:hover { color: $text_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%); }
}
2014-12-01 09:14:47 +00:00
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
&:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); }
}
2014-12-01 09:14:47 +00:00
&.progressbar { // progress bar in treeviews
@if $variant == light { color: $base_color; }
border: 1px solid $selected_borders_color;
border-radius: 4px;
background-color: $selected_bg_color;
background-image: linear-gradient(to bottom,
$selected_bg_color,
2016-04-17 21:40:29 +00:00
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));
2014-12-01 09:14:47 +00:00
&:selected {
&:focus, & {
border-radius: 4px;
2014-12-01 09:14:47 +00:00
@if $variant == 'light' {
color: $selected_bg_color;
box-shadow: none;
}
2016-01-09 13:36:05 +00:00
@else { box-shadow: inset 0 1px transparentize(white, 0.95); }
2016-04-17 21:40:29 +00:00
background-image: linear-gradient(to bottom, $base_color, darken($base_color,10%));
2016-01-09 13:36:05 +00:00
&: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;
}
}
}
2014-12-01 09:14:47 +00:00
&:backdrop {
@if $variant == 'light' { color: $backdrop_base_color; }
2016-03-12 14:03:07 +00:00
@else { border-color: $backdrop_base_color; }
2016-01-09 13:36:05 +00:00
background-image: none;
box-shadow: none;
}
}
2014-12-01 09:14:47 +00:00
&.trough { // progress bar trough in treeviews
background-color: transparentize($fg_color,0.9);
border-radius: 4px;
2014-12-01 09:14:47 +00:00
&:selected {
&:focus, & {
background-color: if($variant == 'light',
transparentize($selected_fg_color, 0.7),
darken($selected_bg_color, 10%));
border-radius: 4px;
2016-01-09 13:36:05 +00:00
@if $variant == 'light' {
border-width: 1px 0;
border-style: solid;
border-color: $selected_bg_color;
}
}
}
}
header {
button {
$_column_header_color: mix($fg_color, $base_color, 50%);
2016-03-12 14:03:07 +00:00
@extend %column_header_button;
color: $_column_header_color;
background-color: $base_color;
font-weight: bold;
text-shadow: none;
box-shadow: none;
2016-01-09 13:36:05 +00:00
&:hover {
@extend %column_header_button;
2016-03-12 14:03:07 +00:00
color: mix($_column_header_color, $fg_color, 50%);
box-shadow: none;
transition: none; //I shouldn't need this
}
2016-01-09 13:36:05 +00:00
&:active {
@extend %column_header_button;
2016-03-12 14:03:07 +00:00
color: $fg_color;
transition: none; //I shouldn't need this
}
}
}
button.dnd,
header.button.dnd { // for treeview-like derive widgets
&:active, &:selected, &:hover, & {
padding: 0 6px;
2016-04-17 21:40:29 +00:00
color: $base_color;
background-image: none;
background-color: $selected_bg_color;
border-style: none;
2016-04-17 21:40:29 +00:00
border-radius: 0;
box-shadow: inset 0 0 0 1px $base_color;
text-shadow: none;
2016-04-17 21:40:29 +00:00
transition: none;
}
}
acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
}
%column_header_button {
padding: 0 6px;
background-image: none;
border-style: none solid solid none;
border-color: $bg_color;
2016-04-17 21:40:29 +00:00
border-radius: 0;
text-shadow: none;
2016-01-09 13:36:05 +00:00
&:disabled {
border-color: $bg_color;
background-image: none;
}
2016-01-09 13:36:05 +00:00
&:backdrop {
2016-04-17 21:40:29 +00:00
color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
border-color: $backdrop_bg_color;
border-style: none solid solid none;
background-image: none;
background-color: $backdrop_base_color;
2016-01-09 13:36:05 +00:00
&:disabled {
border-color: $backdrop_bg_color;
background-image: none;
}
}
&:last-child { &:backdrop, & { border-right-style: none; }}
}
/*********
* Menus *
*********/
menubar,
.menubar {
-GtkWidget-window-dragging: true;
padding: 0px;
2014-08-13 14:19:14 +00:00
box-shadow: inset 0 -1px transparentize(black, 0.9);
2016-01-09 13:36:05 +00:00
&:backdrop { background-color: $backdrop_bg_color; }
2016-01-09 13:36:05 +00:00
> menuitem {
min-height: 16px;
padding: 4px 8px;
2016-01-09 13:36:05 +00:00
&:hover { //Seems like it :hover even with keyboard focus
box-shadow: inset 0 -3px $selected_bg_color;
color: $link_color;
}
2016-01-09 13:36:05 +00:00
&:disabled {
color: $insensitive_fg_color;
box-shadow: none;
}
}
}
menu,
.menu,
.context-menu {
margin: 4px; // see https://bugzilla.gnome.org/show_bug.cgi?id=591258
padding: 2px 0px;
background-color: $menu_color;
border: 1px solid $borders_color; // adds borders in a non composited env
2016-01-09 13:36:05 +00:00
.csd & { border: none; } // axes borders in a composited env
2016-01-09 13:36:05 +00:00
&:backdrop { background-color: $backdrop_menu_color; }
2016-01-09 13:36:05 +00:00
menuitem {
min-height: 16px;
min-width: 40px;
padding: 4px 6px;
text-shadow: none;
2016-01-09 13:36:05 +00:00
&:hover {
color: $selected_fg_color;
background-color: $selected_bg_color;
}
2016-01-09 13:36:05 +00:00
&:disabled {
color: $insensitive_fg_color;
&:backdrop { color: $backdrop_insensitive_color; }
}
2016-01-09 13:36:05 +00:00
&:backdrop,
&:backdrop:hover {
color: $backdrop_fg_color;
background-color: transparent;
}
2016-01-09 13:36:05 +00:00
// submenu indicators
2016-01-09 13:36:05 +00:00
arrow {
min-height: 16px;
min-width: 16px;
2016-01-09 13:36:05 +00:00
&:dir(ltr) {
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
margin-left: 10px;
}
&:dir(rtl) {
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
margin-right: 10px;
}
}
// avoids labels color being overridden, see
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
}
2016-01-09 13:36:05 +00:00
// overflow arrows
> arrow {
@include button(undecorated);
2016-03-12 14:03:07 +00:00
min-height: 16px;
min-width: 16px;
padding: 4px;
background-color: $menu_color;
border-radius: 0;
2016-01-09 13:36:05 +00:00
&.top {
margin-top: -6px;
border-bottom: 1px solid mix($fg_color, $base_color, 10%);
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
}
2016-01-09 13:36:05 +00:00
&.bottom {
margin-bottom: -6px;
border-top: 1px solid mix($fg_color, $base_color, 10%);
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
}
2016-01-09 13:36:05 +00:00
&:hover { background-color: mix($fg_color, $base_color, 10%); }
2016-01-09 13:36:05 +00:00
&:backdrop { background-color: $backdrop_menu_color; }
&:disabled {
color: transparent;
background-color: transparent;
border-color: transparent ;
}
}
}
menuitem {
2016-01-09 13:36:05 +00:00
accelerator { color: gtkalpha(currentColor,0.55); }
check,
radio {
min-height: 16px;
min-width: 16px;
2016-03-12 14:03:07 +00:00
&:dir(ltr) { margin-right: 7px; }
&:dir(rtl) { margin-left: 7px; }
}
}
/***************
* Popovers *
***************/
popover.background {
padding: 2px;
border-radius: 5px;
background-color: $popover_bg_color;
2016-01-09 13:36:05 +00:00
2016-04-02 14:03:02 +00:00
.csd &, & { border: 1px solid $borders_color; }
2016-01-09 13:36:05 +00:00
2015-05-07 08:16:46 +00:00
box-shadow: 0 1px 2px transparentize(black, 0.7);
2014-11-14 18:34:09 +00:00
&:backdrop {
background-color: $backdrop_bg_color;
box-shadow: none;
}
2014-11-14 18:34:09 +00:00
> list,
2014-11-14 18:34:09 +00:00
> .view,
> toolbar {
border-style: none;
background-color: transparent;
}
2014-11-14 18:34:09 +00:00
2016-04-02 14:03:02 +00:00
.csd &, & {
&.touch-selection,
&.magnifier {
@extend %osd;
2016-03-12 14:03:07 +00:00
border: 1px solid transparentize(white, 0.9);
2016-03-12 14:03:07 +00:00
button { @extend %osd_button };
}
&.osd { @extend %osd; }
}
2016-01-12 00:03:47 +00:00
separator { margin: 3px; }
list separator { margin: 0px; }
}
/*************
* Notebooks *
*************/
notebook {
2016-01-29 15:32:43 +00:00
> header {
padding: 1px;
2016-01-29 15:32:43 +00:00
border-color: $borders_color;
border-width: 1px;
background-color: $dark_fill;
2016-03-12 14:03:07 +00:00
2016-01-29 15:32:43 +00:00
&:backdrop {
border-color: $backdrop_borders_color;
background-color: $backdrop_dark_fill;
}
tabs { margin: -1px; }
&.top {
2016-01-29 15:32:43 +00:00
border-bottom-style: solid;
> tabs {
margin-bottom: -2px;
2016-01-29 15:32:43 +00:00
> tab {
&:hover { box-shadow: inset 0 -3px $borders_color; }
2016-03-12 14:03:07 +00:00
2016-01-29 15:32:43 +00:00
&:backdrop { box-shadow: none; }
2016-03-12 14:03:07 +00:00
&:checked { box-shadow: inset 0 -3px $selected_bg_color; }
}
}
}
2016-01-29 15:32:43 +00:00
&.bottom {
2016-01-29 15:32:43 +00:00
border-top-style: solid;
> tabs {
margin-top: -2px;
2016-01-29 15:32:43 +00:00
> tab {
&:hover { box-shadow: inset 0 3px $borders_color; }
2016-03-12 14:03:07 +00:00
2016-01-29 15:32:43 +00:00
&:backdrop { box-shadow: none; }
2016-03-12 14:03:07 +00:00
&:checked { box-shadow: inset 0 3px $selected_bg_color; }
}
}
}
2016-01-29 15:32:43 +00:00
&.left {
border-right-style: solid;
> tabs {
margin-right: -2px;
2016-01-29 15:32:43 +00:00
> tab {
&:hover { box-shadow: inset -3px 0 $borders_color; }
2016-03-12 14:03:07 +00:00
2016-01-29 15:32:43 +00:00
&:backdrop { box-shadow: none; }
2016-03-12 14:03:07 +00:00
&:checked { box-shadow: inset -3px 0 $selected_bg_color; }
}
}
}
2016-01-29 15:32:43 +00:00
&.right {
border-left-style: solid;
> tabs {
margin-left: -2px;
2016-01-29 15:32:43 +00:00
> tab {
&:hover { box-shadow: inset 3px 0 $borders_color; }
2016-03-12 14:03:07 +00:00
2016-01-29 15:32:43 +00:00
&:backdrop { box-shadow: none; }
2016-03-12 14:03:07 +00:00
&:checked { box-shadow: inset 3px 0 $selected_bg_color; }
}
}
}
2016-01-09 13:36:05 +00:00
&.top > tabs > arrow {
@extend %notebook_vert_arrows;
2016-03-12 14:03:07 +00:00
border-top-style: none;
}
&.bottom > tabs > arrow {
@extend %notebook_vert_arrows;
2016-03-12 14:03:07 +00:00
border-bottom-style: none;
}
@at-root %notebook_vert_arrows {
margin-left: -5px;
margin-right: -5px;
padding-left: 4px;
padding-right: 4px;
&.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
&.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
}
&.left > tabs > arrow {
@extend %notebook_horz_arrows;
2016-03-12 14:03:07 +00:00
border-left-style: none;
}
&.right > tabs > arrow {
@extend %notebook_horz_arrows;
2016-03-12 14:03:07 +00:00
border-right-style: none;
}
@at-root %notebook_horz_arrows {
margin-top: -5px;
margin-bottom: -5px;
padding-top: 4px;
padding-bottom: 4px;
&.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
&.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
}
2016-02-13 23:25:04 +00:00
> tabs > arrow {
@extend %button_basic;
2016-03-12 14:03:07 +00:00
@extend %button_basic.flat;
2016-02-13 23:25:04 +00:00
min-height: 16px;
min-width: 16px;
border-radius: 0;
&:hover:not(:active):not(:backdrop) {
background-clip: padding-box;
2016-02-13 23:25:04 +00:00
background-image: none;
background-color: transparentize(white, 0.7);
border-color: transparent;
2016-02-13 23:25:04 +00:00
box-shadow: none;
}
&:disabled { @include button(undecorated); }
}
2016-01-29 15:32:43 +00:00
tab {
min-height: 30px;
min-width: 30px;
padding: 3px 12px;
outline-offset: -5px;
2016-01-29 15:32:43 +00:00
color: $insensitive_fg_color;
font-weight: bold;
2016-01-29 15:32:43 +00:00
border-width: 1px; // for reorderable tabs
border-color: transparent; //
2016-01-09 13:36:05 +00:00
2016-01-29 15:32:43 +00:00
&:hover {
color: mix($insensitive_fg_color, $fg_color, 50%);
2016-01-09 13:36:05 +00:00
2016-01-29 15:32:43 +00:00
&.reorderable-page {
border-color: transparentize($borders_color, 0.7);
background-color: transparentize($bg_color, 0.8);
}
}
2016-01-09 13:36:05 +00:00
2016-01-29 15:32:43 +00:00
&:backdrop {
color: mix($backdrop_fg_color, $backdrop_bg_color, 60%);
2016-01-29 15:32:43 +00:00
&.reorderable-page {
border-color: transparent;
background-color: transparent;
}
}
&:checked {
2016-01-29 15:32:43 +00:00
color: $fg_color;
&.reorderable-page {
border-color: transparentize($borders_color, 0.5);
background-color: transparentize($bg_color, 0.5);
2016-01-29 15:32:43 +00:00
&:hover { background-color: transparentize($bg_color, 0.3); }
}
}
2016-01-09 13:36:05 +00:00
&:backdrop:checked {
2016-01-29 15:32:43 +00:00
color: $backdrop_fg_color;
2016-01-09 13:36:05 +00:00
2016-01-29 15:32:43 +00:00
&.reorderable-page {
border-color: $backdrop_borders_color;
background-color: $backdrop_bg_color;
}
}
2016-01-09 13:36:05 +00:00
2016-01-29 15:32:43 +00:00
// colors the button like the label, overridden otherwise
button.flat {
&:hover { color: currentColor; }
2016-01-09 13:36:05 +00:00
2016-01-29 15:32:43 +00:00
&, &:backdrop { color: gtkalpha(currentColor, 0.3); }
2016-01-09 13:36:05 +00:00
padding: 0;
margin-top: 4px;
margin-bottom: 4px;
2016-01-29 15:32:43 +00:00
// FIXME: generalize .small-button?
min-width: 20px;
min-height: 20px;
2016-01-09 13:36:05 +00:00
2016-01-29 15:32:43 +00:00
&:last-child {
margin-left: 4px;
margin-right: -4px;
}
2016-01-09 13:36:05 +00:00
2016-01-29 15:32:43 +00:00
&:first-child {
margin-left: -4px;
margin-right: 4px;
}
}
}
2016-01-09 13:36:05 +00:00
2016-01-29 15:32:43 +00:00
&.top,
&.bottom {
tabs {
padding-left: 4px;
padding-right: 4px;
&:not(:only-child) {
margin-left: 3px;
margin-right: 3px;
&:first-child { margin-left: -1px; }
&:last-child { margin-right: -1px; }
}
2016-01-29 15:32:43 +00:00
tab {
margin-left: 4px;
margin-right: 4px;
2016-01-09 13:36:05 +00:00
2016-01-29 15:32:43 +00:00
&.reorderable-page { border-style: none solid; }
}
}
}
2016-01-09 13:36:05 +00:00
2016-01-29 15:32:43 +00:00
&.left,
&.right {
tabs {
padding-top: 4px;
padding-bottom: 4px;
&:not(:only-child) {
margin-top: 3px;
margin-bottom: 3px;
&:first-child { margin-top: -1px; }
&:last-child { margin-bottom: -1px; }
}
2016-01-29 15:32:43 +00:00
tab {
margin-top: 4px;
margin-bottom: 4px;
2016-01-09 13:36:05 +00:00
2016-01-29 15:32:43 +00:00
&.reorderable-page { border-style: solid none; }
}
}
2016-01-29 15:32:43 +00:00
}
2016-02-26 18:01:19 +00:00
&.top tab { padding-bottom: 4px; }
&.bottom tab { padding-top: 4px; }
2016-01-29 15:32:43 +00:00
}
2016-01-09 13:36:05 +00:00
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
2016-01-29 15:32:43 +00:00
background-color: $base_color;
2016-01-09 13:36:05 +00:00
2016-01-29 15:32:43 +00:00
&:backdrop { background-color: $backdrop_base_color; }
}
}
2016-01-29 15:32:43 +00:00
/**************
* Scrollbars *
**************/
scrollbar {
2016-03-08 13:00:01 +00:00
$_slider_min_length: 40px;
// disable steppers
@at-root * {
-GtkScrollbar-has-backward-stepper: false;
-GtkScrollbar-has-forward-stepper: false;
}
background-color: $scrollbar_bg_color;
transition: 300ms $ease-out-quad;
// scrollbar border
&.top { border-bottom: 1px solid $borders_color; }
&.bottom { border-top: 1px solid $borders_color; }
&.left { border-right: 1px solid $borders_color; }
&.right { border-left: 1px solid $borders_color; }
&:backdrop {
background-color: $backdrop_scrollbar_bg_color;
2016-03-05 00:50:18 +00:00
border-color: $backdrop_borders_color;
transition: $backdrop_transition;
}
// slider
slider {
min-width: 6px;
min-height: 6px;
margin: -1px;
border: 4px solid transparent;
border-radius: 8px;
background-clip: padding-box;
background-color: $scrollbar_slider_color;
&:hover { background-color: $scrollbar_slider_hover_color; }
&:hover:active { background-color: $scrollbar_slider_active_color; }
&:backdrop { background-color: $backdrop_scrollbar_slider_color; }
&:disabled { background-color: transparent; }
}
&.fine-tune {
slider {
min-width: 4px;
min-height: 4px;
}
&.horizontal slider { border-width: 5px 4px; }
&.vertical slider { border-width: 4px 5px; }
}
&.overlay-indicator {
&:not(.dragging):not(.hovering) {
border-color: transparent;
2015-04-17 13:33:04 +00:00
opacity: 0.4;
background-color: transparent;
slider {
margin: 0;
min-width: 3px;
min-height: 3px;
background-color: $fg_color;
border: 1px solid if($variant == 'light', white, black);
}
button {
min-width: 5px;
min-height: 5px;
background-color: $fg_color;
background-clip: padding-box;
border-radius: 100%;
border: 1px solid if($variant == 'light', white, black);
-gtk-icon-source: none;
}
&.horizontal {
slider {
margin: 0 2px;
2016-03-08 13:00:01 +00:00
min-width: $_slider_min_length;
}
button {
margin: 1px 2px;
min-width: 5px;
}
}
&.vertical {
slider {
margin: 2px 0;
2016-03-08 13:00:01 +00:00
min-height: $_slider_min_length;
}
button {
margin: 2px 1px;
min-height: 5px;
}
}
}
&.dragging,
&.hovering { opacity: 0.8; }
}
2016-03-08 13:00:01 +00:00
&.horizontal slider { min-width: $_slider_min_length; }
2016-03-08 13:00:01 +00:00
&.vertical slider { min-height: $_slider_min_length; }
// button styling
button {
padding: 0;
min-width: 12px;
min-height: 12px;
border-style: none;
border-radius: 0;
transition-property: min-height, min-width, color;
@include button(undecorated);
2016-03-12 14:03:07 +00:00
color: $scrollbar_slider_color;
&:hover {
@include button(undecorated);
2016-03-12 14:03:07 +00:00
color: $scrollbar_slider_hover_color;
}
&:active, &:checked {
@include button(undecorated);
2016-03-12 14:03:07 +00:00
color: $scrollbar_slider_active_color;
}
&:disabled {
@include button(undecorated);
2016-03-12 14:03:07 +00:00
color: transparentize($scrollbar_slider_color, 0.8);
}
&:backdrop {
@include button(undecorated);
2016-03-12 14:03:07 +00:00
color: $backdrop_scrollbar_slider_color;
&:disabled {
@include button(undecorated);
2016-03-12 14:03:07 +00:00
color: transparentize($backdrop_scrollbar_slider_color, 0.8);
}
}
}
// button icons
&.vertical {
button {
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2016-03-12 14:03:07 +00:00
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
}
}
&.horizontal {
button {
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
2016-03-12 14:03:07 +00:00
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
}
}
}
treeview ~ scrollbar.vertical {
border-top: 1px solid $borders_color;
margin-top: -1px;
}
/**********
* Switch *
**********/
switch {
font-weight: bold;
font-size: smaller;
2014-07-08 16:24:28 +00:00
outline-offset: -4px;
2016-04-16 11:41:32 +00:00
// similar to the .scale
border: 1px solid $borders_color;
border-radius: 3px;
color: $fg_color;
2016-04-16 11:41:32 +00:00
background-color: $dark_fill;
text-shadow: 0 1px transparentize(black, 0.9);
2016-01-09 13:36:05 +00:00
&:checked {
2016-04-16 11:41:32 +00:00
color: $selected_fg_color;
2016-01-09 13:36:05 +00:00
border-color: $selected_borders_color;
background-color: $selected_bg_color;
text-shadow: 0 1px transparentize($selected_borders_color, 0.5),
0 0 2px transparentize(white, 0.4);
}
2016-01-09 13:36:05 +00:00
&:disabled {
2016-01-09 13:36:05 +00:00
color: $insensitive_fg_color;
border-color: $borders_color;
background-color: $insensitive_bg_color;
text-shadow: none;
}
2016-01-09 13:36:05 +00:00
&:backdrop {
2016-01-09 13:36:05 +00:00
color: $backdrop_fg_color;
border-color: $backdrop_borders_color;
2016-04-16 11:41:32 +00:00
background-color: $backdrop_dark_fill;
2016-01-09 13:36:05 +00:00
text-shadow: none;
transition: $backdrop_transition;
2016-01-09 13:36:05 +00:00
&:checked {
2016-01-09 13:36:05 +00:00
@if $variant == 'light' { color: $backdrop_bg_color; }
border-color: if($variant == 'light', $selected_bg_color,
$selected_borders_color);
2016-04-16 11:41:32 +00:00
background-color: $selected_bg_color;
2016-01-09 13:36:05 +00:00
}
&:disabled {
color: $backdrop_insensitive_color;
border-color: $backdrop_borders_color;
background-color: $insensitive_bg_color;
}
2014-07-08 16:24:28 +00:00
}
2016-01-09 13:36:05 +00:00
slider {
2015-12-23 17:57:04 +00:00
margin: -1px;
min-width: 44px;
min-height: 26px;
border: 1px solid;
2014-07-08 16:24:28 +00:00
border-radius: 3px;
transition: $button_transition;
@include button(normal-alt, $edge: $shadow_color);
}
2016-01-09 13:36:05 +00:00
&:hover slider { @include button(hover-alt, $edge: $shadow_color); }
2016-01-09 13:36:05 +00:00
&:checked slider { border: 1px solid $selected_borders_color; }
&:disabled slider { @include button(insensitive); }
&:backdrop {
slider {
transition: $backdrop_transition;
@include button(backdrop);
}
&:checked slider { border-color: if($variant == 'light', $selected_bg_color, $selected_borders_color); }
&:disabled slider { @include button(backdrop-insensitive); }
2014-07-08 16:24:28 +00:00
}
2016-01-09 13:36:05 +00:00
row:selected & {
@if $variant == 'light' {
box-shadow: none;
border-color: $selected_borders_color;
2016-01-09 13:36:05 +00:00
&:backdrop { border-color: $selected_borders_color; }
2016-01-09 13:36:05 +00:00
&.slider:dir(rtl) { border-left-color: $borders_color; }
&.slider:dir(ltr) { border-right-color: $borders_color; }
2016-01-09 13:36:05 +00:00
&.slider { &:checked, & { border-color: $selected_borders_color; } }
}
}
}
2016-02-14 13:33:30 +00:00
/*************************
* Check and Radio items *
*************************/
// draw regular check and radio items using our PNG assets
// all assets are rendered from assets.svg. never add pngs directly
2014-08-19 16:45:15 +00:00
//selection-mode
@each $s,$as in ('','-selectionmode'),
(':hover', '-hover-selectionmode'),
(':active', '-active-selectionmode'),
(':backdrop', '-backdrop-selectionmode'),
(':checked', '-checked-selectionmode'),
(':checked:hover', '-checked-hover-selectionmode'),
(':checked:active', '-checked-active-selectionmode'),
(':backdrop:checked', '-checked-backdrop-selectionmode') {
.view.content-view.check#{$s}:not(list),
.content-view .tile check#{$s}:not(list) {
-gtk-icon-shadow: none;
2016-04-17 21:40:29 +00:00
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"), url("assets/checkbox#{$as}@2.png"));
background-color: transparent;
min-width: 40px;
min-height: 40px;
background-image: none;
transition: none;
box-shadow: none;
border-width: 0;
2014-08-19 16:45:15 +00:00
}
}
checkbutton.text-button, radiobutton.text-button {
// this is for a nice focus on check and radios text
padding: 2px 0;
outline-offset: 0;
label:not(:only-child) {
&:first-child { margin-left: 4px; }
&:last-child { margin-right: 4px; }
}
}
check,
radio {
margin: 0 4px;
2016-01-09 13:36:05 +00:00
&:only-child { margin: 0; }
popover & { // when in a popover add more space between the label and the check, reset the other side margin.
// See https://bugzilla.gnome.org/show_bug.cgi?id=779570 for details.
&.left:dir(rtl) {
margin-left: 0;
margin-right: 12px;
}
&.right:dir(ltr) {
margin-left: 12px;
margin-right: 0;
}
}
min-height: 14px;
min-width: 14px;
border: 1px solid;
-gtk-icon-source: none;
2016-03-11 15:34:30 +00:00
@include button(normal-alt, $edge: $shadow_color);
&:hover { @include button(hover-alt, $edge: $shadow_color); }
&:active { @include button(active); }
&:disabled { @include button(insensitive); }
&:backdrop {
@include button(backdrop);
transition: $backdrop_transition;
&:disabled { @include button(backdrop-insensitive); }
}
@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.
row:selected & { border-color: $selected_borders_color; }
}
2016-03-11 15:34:30 +00:00
.osd & {
@include button(osd);
&:hover { @include button(osd); }
&:active { @include button(osd-active); }
&:backdrop { @include button(osd-backdrop); }
&:disabled { @include button(osd-insensitive); }
}
menu menuitem & {
margin: 0; // this is a workaround for a menu check/radio size allocation issue
&, &:hover, &:disabled { //FIXME use button reset mixin
min-height: 14px;
min-width: 14px;
background-image: none;
background-color: transparent;
box-shadow: none;
-gtk-icon-shadow: none;
color: inherit;
border-color: currentColor;
}
}
}
%check,
check {
border-radius: 3px;
2016-03-12 14:03:07 +00:00
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")),
-gtk-recolor(url("assets/check-symbolic.symbolic.png"))); }
2016-03-12 14:03:07 +00:00
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")),
-gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
}
%radio,
radio {
border-radius: 100%;
2016-03-12 14:03:07 +00:00
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/bullet-symbolic.svg")),
-gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))); }
2016-03-12 14:03:07 +00:00
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")),
-gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
}
// ANIMATION:
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
// the transformation is set on the active state and it get reset on the checked state.
radio:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: scale(0); }
2016-02-11 17:27:25 +00:00
check:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
2016-02-11 17:27:25 +00:00
radio,
check {
&:active { -gtk-icon-transform: scale(0, 1); } // should tackle the indeterminate state, untested
2016-02-11 17:27:25 +00:00
&:checked:not(:backdrop), &:indeterminate:not(:backdrop) {
-gtk-icon-transform: unset;
transition: 400ms;
}
}
2016-02-11 17:27:25 +00:00
menu menuitem {
radio,
check {
&:checked:not(:backdrop), &:indeterminate:not(:backdrop) { transition: none; }
}
2016-02-11 17:27:25 +00:00
}
treeview.view check,
treeview.view radio {
&:selected {
&:focus, & {
color: $fg_color;
2016-03-12 14:03:07 +00:00
@if $variant == 'light' { border-color: $selected_borders_color; }
}
&:disabled {
color: $insensitive_fg_color;
2016-03-12 14:03:07 +00:00
&:backdrop { color: $backdrop_insensitive_color; }
}
}
&:backdrop { &:selected, & { color: $backdrop_fg_color; }}
}
treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a workaround
/************
* GtkScale *
************/
2015-12-03 11:18:17 +00:00
%scale_trough {
border: 1px solid $borders_color;
border-radius: 3px;
background-color: $dark_fill;
&:disabled { background-color: $insensitive_bg_color; }
2015-12-03 11:18:17 +00:00
&:backdrop {
background-color: $backdrop_dark_fill;
border-color: $backdrop_borders_color;
transition: $backdrop_transition;
2016-03-12 14:03:07 +00:00
&:disabled { background-color: $insensitive_bg_color; }
2015-12-03 11:18:17 +00:00
}
// ...on selected list rows
row:selected & { &:disabled, & { border-color: $selected_borders_color; }}
2015-12-03 11:18:17 +00:00
// OSD
.osd & {
border-color: $osd_borders_color;
background-color: transparentize($osd_borders_color, 0.2);
&:disabled { background-color: $osd_insensitive_bg_color; }
2015-12-03 11:18:17 +00:00
}
}
%scale_highlight {
border: 1px solid $selected_borders_color;
border-radius: 3px;
background-color: $selected_bg_color;
&:disabled {
2015-12-03 11:18:17 +00:00
background-color: transparent;
border-color: transparent;
}
&:backdrop {
border-color: if($variant=='light', $selected_bg_color,
$selected_borders_color);
&:disabled {
2015-12-03 11:18:17 +00:00
background-color: transparent;
border-color: transparent;
}
}
// ...on selected list rows
row:selected & { &:disabled, & { border-color: $selected_borders_color; }}
2015-12-03 11:18:17 +00:00
// OSD
.osd & {
border-color: $osd_borders_color;
2016-01-09 13:36:05 +00:00
&:disabled { border-color: transparent; }
2015-12-03 11:18:17 +00:00
}
}
scale {
2016-02-24 21:36:14 +00:00
// sizing
$_marks_lenght: 6px;
$_marks_distance: 6px;
min-height: 10px;
min-width: 10px;
padding: 12px;
2016-02-24 21:36:14 +00:00
// those are inside the trough node, I need them to show their own border over the trough one, so negative margin
fill,
highlight { margin: -1px; }
// the slider is inside the trough, so to have make it bigger there's a negative margin
slider {
min-height: 18px;
min-width: 18px;
margin: -9px;
}
// click-and-hold the slider to activate
&.fine-tune {
&.horizontal {
padding-top: 9px;
padding-bottom: 9px;
min-height: 16px;
}
&.vertical {
padding-left: 9px;
padding-right: 9px;
min-width: 16px;
}
// to make the trough grow in fine-tune mode
2016-03-02 22:07:37 +00:00
slider { margin: -6px; }
fill,
highlight,
trough {
border-radius: 5px;
-gtk-outline-radius: 7px;
}
}
2015-12-03 11:18:17 +00:00
// the backing bit
2016-03-01 20:53:44 +00:00
trough {
@extend %scale_trough;
outline-offset: 2px;
2016-03-02 22:07:37 +00:00
-gtk-outline-radius: 5px;
2016-03-01 20:53:44 +00:00
}
2015-12-03 11:18:17 +00:00
// the colored part of the backing bit
highlight { @extend %scale_highlight; }
2015-12-03 11:18:17 +00:00
// this is another differently styled part of the backing bit, the most relevant use case is for example
// in media player to indicate how much video stream as been cached
fill {
@extend %scale_trough;
2016-01-09 13:36:05 +00:00
&:backdrop, & { background-color: $borders_color; }
2015-12-03 11:18:17 +00:00
&:disabled {
&:backdrop, & {
2015-12-03 11:18:17 +00:00
border-color: transparent;
background-color: transparent;
}
}
// OSD
.osd & {
background-color: mix($osd_fg_color, $osd_borders_color, 25%);
2016-03-12 14:03:07 +00:00
&:disabled {
&:backdrop, & {
2015-12-03 11:18:17 +00:00
border-color: transparent;
background-color: transparent;
}
}
}
}
slider {
@include button(normal-alt, $edge: $shadow_color);
2016-03-12 14:03:07 +00:00
border: 1px solid darken($alt_borders_color, 3%);
border-radius: 100%;
transition: $button_transition;
transition-property: background, border, box-shadow;
&:hover { @include button(hover-alt, $edge: $shadow_color); }
&:active { border-color: $selected_borders_color; }
&:disabled { @include button(insensitive); }
&:backdrop {
transition: $backdrop_transition;
@include button(backdrop);
&:disabled { @include button(backdrop-insensitive); }
}
// ...on selected list rows
row:selected & { &:disabled, & { border-color: $selected_borders_color; } }
// OSD
.osd & {
@include button(osd);
border-color: darken($osd_borders_color, 3%);
background-color: opacify($osd_bg_color, 1); // solid background needed here
&:hover {
@include button(osd-hover);
background-color: opacify($osd_bg_color, 1); // solid background needed here
}
&:active {
@include button(osd-active);
background-color: opacify($osd_bg_color, 1); // solid background needed here
}
&:disabled {
@include button(osd-insensitive);
background-color: opacify($osd_bg_color, 1); // solid background needed here
}
&:backdrop {
@include button(osd-backdrop);
background-color: opacify($osd_bg_color, 1); // solid background needed here
&:disabled {
@include button(osd-backdrop-insensitive);
background-color: opacify($osd_bg_color, 1); // solid background needed here
}
}
}
}
2015-12-03 15:18:12 +00:00
value { color: gtkalpha(currentColor, 0.55); }
marks {
color: gtkalpha(currentColor, 0.55);
2016-03-02 22:07:37 +00:00
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
(bottom, bottom, top),
(top, left, right),
(bottom, right, left) {
&.#{$marks_class} {
margin-#{$marks_margin}: $_marks_distance;
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
}
}
}
&.fine-tune marks {
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
(bottom, bottom, top),
(top, left, right),
(bottom, right, left) {
&.#{$marks_class} {
2016-03-02 20:47:24 +00:00
margin-#{$marks_margin}: $_marks_distance;
margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght - 3px);
2016-03-02 20:47:24 +00:00
}
}
}
2016-03-02 22:07:37 +00:00
&.horizontal {
indicator {
min-height: $_marks_lenght;
min-width: 1px;
}
2016-03-12 14:03:07 +00:00
&.fine-tune indicator { min-height: ($_marks_lenght - 3px); }
}
2016-03-02 22:07:37 +00:00
&.vertical {
indicator {
min-height: 1px;
min-width: $_marks_lenght;
}
2016-03-12 14:03:07 +00:00
&.fine-tune indicator { min-width: ($_marks_lenght - 3px); }
}
// *WARNING* scale with marks madness following
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
$suffix: if($variant == 'light', '', '-dark');
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
('vertical', 'vert') {
@each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
('scale-has-marks-below', 'marks-after:not(.marks-before)') {
@each $state, $state_infix in ('', ''),
(':hover', '-hover'),
(':active', '-active'),
(':disabled', '-insensitive'),
(':backdrop', '-backdrop'),
(':backdrop:disabled', '-backdrop-insensitive') {
&.#{$dir_class}.#{$marks_class} {
slider {
&#{$state} {
// an asymmetric slider asset is used here, so the margins are uneven, the smaller
// margin is set on the point side.
margin: -10px;
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
border-style: none;
border-radius: 0;
background-color: transparent;
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
$_scale_slider_bg_pos: bottom;
2016-02-24 21:36:14 +00:00
@if $dir_class == 'horizontal' {
min-height: 26px;
min-width: 22px;
@if $marks_infix == 'scale-has-marks-above' {
margin-top: -14px;
2016-02-24 21:36:14 +00:00
$_scale_slider_bg_pos: top;
}
2016-03-12 14:03:07 +00:00
@else { margin-bottom: -14px; }
}
@else {
2016-02-24 21:36:14 +00:00
min-height: 22px;
min-width: 26px;
@if $marks_infix == 'scale-has-marks-above' {
margin-left: -14px;
2016-02-24 21:36:14 +00:00
$_scale_slider_bg_pos: left bottom;
}
@else {
margin-right: -14px;
2016-02-24 21:36:14 +00:00
$_scale_slider_bg_pos: right bottom;
}
}
background-position: $_scale_slider_bg_pos;
background-repeat: no-repeat;
box-shadow: none;
}
}
2016-03-02 22:07:37 +00:00
&.fine-tune slider {
// bigger negative margins to make the trough grow here as well
2016-03-02 22:07:37 +00:00
margin: -7px;
@if $dir_class == 'horizontal' {
@if $marks_infix == 'scale-has-marks-above' { margin-top: -11px; }
2016-03-12 14:03:07 +00:00
2016-03-02 22:07:37 +00:00
@else { margin-bottom: -11px; }
}
@else {
@if $marks_infix == 'scale-has-marks-above' { margin-left: -11px; }
2016-03-12 14:03:07 +00:00
2016-03-02 22:07:37 +00:00
@else { margin-right: -11px; }
}
}
}
}
}
}
&.color {
2016-03-10 12:35:08 +00:00
min-height: 0;
min-width: 0;
trough {
background-image: image($borders_color);
2016-03-10 12:35:08 +00:00
background-repeat: no-repeat;
}
&.horizontal {
padding: 0 0 15px 0;
trough {
padding-bottom: 4px;
background-position: 0 -3px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
slider {
&:dir(ltr), &:dir(rtl) { // specificity bumb
&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
margin-bottom: -15px;
margin-top: 6px;
}
2016-03-10 12:35:08 +00:00
}
}
}
&.vertical {
2016-03-10 12:35:08 +00:00
&:dir(ltr) {
padding: 0 0 0 15px;
trough {
padding-left: 4px;
background-position: 3px 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
slider {
&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
2016-03-10 12:35:08 +00:00
margin-left: -15px;
margin-right: 6px;
}
}
}
&:dir(rtl) {
padding: 0 15px 0 0;
trough {
padding-right: 4px;
background-position: -3px 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
slider {
&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
2016-03-10 12:35:08 +00:00
margin-right: -15px;
margin-left: 6px;
}
}
}
}
&.fine-tune {
&.horizontal {
&:dir(ltr), &:dir(rtl) { // specificity bump
padding: 0 0 12px 0;
2016-03-10 12:35:08 +00:00
trough {
padding-bottom: 7px;
background-position: 0 -6px;
}
2016-03-10 12:35:08 +00:00
slider {
margin-bottom: -15px;
margin-top: 6px;
}
2016-03-10 12:35:08 +00:00
}
}
&.vertical {
&:dir(ltr) {
padding: 0 0 0 12px;
trough {
padding-left: 7px;
background-position: 6px 0;
}
slider {
margin-left: -15px;
margin-right: 6px;
}
}
&:dir(rtl) {
padding: 0 12px 0 0;
trough {
padding-right: 7px;
background-position: -6px 0;
}
slider {
margin-right: -15px;
margin-left: 6px;
}
}
}
}
}
}
/*****************
* Progress bars *
*****************/
progressbar {
// sizing
&.horizontal {
trough,
progress { min-height: 2px; }
}
&.vertical {
trough,
2016-01-09 17:03:26 +00:00
progress { min-width: 2px; }
}
&.horizontal progress { margin: 0 -1px; } // the progress node is positioned after the trough border
&.vertical progress { margin: -1px 0; } // this moves it over it.
// FIXME: insensitive state missing and some other state should be set probably
font-size: smaller;
color: transparentize($fg_color, 0.6);
&:backdrop {
box-shadow: none;
transition: $backdrop_transition;
}
2016-01-09 13:36:05 +00:00
trough { @extend %scale_trough; }
&:backdrop trough { @extend %scale_trough:backdrop; } // looks like states are not passed to the trough component here
progress {
@extend %scale_highlight;
2016-03-14 09:53:59 +00:00
border-radius: 1.5px;
2016-01-09 13:36:05 +00:00
&.left {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
2016-01-09 13:36:05 +00:00
&.right {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
2016-01-09 13:36:05 +00:00
&.top {
border-top-right-radius: 2px;
border-top-left-radius: 2px;
}
2016-01-09 13:36:05 +00:00
&.bottom {
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
}
}
&:backdrop progress { @extend %scale_highlight:backdrop; } // states not passed here as well
&.osd { // progressbar.osd used for epiphany page loading progress
min-width: 3px;
min-height: 3px;
background-color: transparent;
trough {
border-style: none;
border-radius: 0;
background-color: transparent;
box-shadow: none;
}
progress {
border-style: none;
border-radius: 0;
}
}
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
}
2016-02-14 13:33:30 +00:00
/*************
* Level Bar *
*************/
levelbar {
2016-01-09 13:36:05 +00:00
block {
min-width: 32px;
min-height: 1px;
}
2016-01-09 13:36:05 +00:00
&.vertical block {
min-width: 1px;
min-height: 32px;
}
2016-01-09 13:36:05 +00:00
&:backdrop { transition: $backdrop_transition; }
2016-01-09 13:36:05 +00:00
trough {
border: 1px solid;
padding: 2px;
border-radius: 3px;
@include entry(normal);
2016-03-12 14:03:07 +00:00
&:backdrop { @include entry(backdrop); }
}
2016-01-09 13:36:05 +00:00
&.horizontal.discrete block { margin: 0 1px; }
2016-01-09 13:36:05 +00:00
&.vertical.discrete block { margin: 1px 0; }
2016-01-09 13:36:05 +00:00
2016-04-28 13:45:12 +00:00
block {
border: 1px solid;
border-radius: 1px;
2016-01-09 13:36:05 +00:00
&.low {
2016-04-28 13:45:12 +00:00
border-color: if($variant == 'light', darken($warning_color, 20%), $warning_color);
2016-01-09 13:36:05 +00:00
background-color: $warning_color;
&:backdrop { border-color: $warning_color; };
}
2016-04-28 13:45:12 +00:00
&.high,
&:not(.empty) {
border-color: if($variant == 'light', darken($selected_bg_color, 20%), $selected_bg_color);
2016-01-09 13:36:05 +00:00
background-color: $selected_bg_color;
&:backdrop { border-color: $selected_bg_color; }
}
&.full {
2016-04-28 13:45:12 +00:00
border-color: if($variant == 'light', darken($success_color, 20%), $success_color);
2016-01-09 13:36:05 +00:00
background-color: $success_color;
&:backdrop { border-color: $success_color; };
}
&.empty {
background-color: transparent;
2016-04-28 13:45:12 +00:00
border-color: if($variant == 'light', transparentize($fg_color,0.8), transparentize($fg_color,0.9));
2016-01-09 13:36:05 +00:00
&:backdrop { border-color: transparentize($backdrop_fg_color,0.85); }
}
}
}
2016-02-14 13:33:30 +00:00
/****************
* Print dialog *
*****************/
printdialog {
paper {
color: $fg_color;
border: 1px solid $borders_color;
background: white;
padding: 0;
2016-03-12 14:03:07 +00:00
&:backdrop {
color: $backdrop_fg_color;
border-color: $backdrop_borders_color;
}
}
2016-03-12 14:03:07 +00:00
.dialog-action-box { margin: 12px; }
}
2016-02-14 13:33:30 +00:00
/**********
* Frames *
**********/
frame > border,
.frame {
box-shadow: none;
margin: 0;
padding: 0;
border-radius: 0;
border: 1px solid $borders_color;
2016-01-09 13:36:05 +00:00
&.flat { border-style: none; }
&:backdrop { border-color: $backdrop_borders_color; }
}
actionbar > revealer > box {
padding: 6px;
border-top: 1px solid $borders_color;
&:backdrop { border-color: $backdrop_borders_color; }
}
scrolledwindow {
viewport.frame { // avoid double borders when viewport inside scrolled window
border-style: none;
}
// This is used when content is touch-dragged past boundaries.
// draws a box on top of the content, the size changes programmatically.
overshoot {
&.top {
@include overshoot(top);
2016-01-09 13:36:05 +00:00
&:backdrop { @include overshoot(top, backdrop); }
}
2016-01-09 13:36:05 +00:00
&.bottom {
@include overshoot(bottom);
2016-01-09 13:36:05 +00:00
&:backdrop { @include overshoot(bottom, backdrop); }
}
2016-01-09 13:36:05 +00:00
&.left {
@include overshoot(left);
2016-01-09 13:36:05 +00:00
&:backdrop { @include overshoot(left, backdrop); }
}
2016-01-09 13:36:05 +00:00
&.right {
@include overshoot(right);
2016-01-09 13:36:05 +00:00
&:backdrop { @include overshoot(right, backdrop); }
}
}
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
undershoot {
&.top { @include undershoot(top); }
2016-01-09 13:36:05 +00:00
&.bottom { @include undershoot(bottom); }
2016-01-09 13:36:05 +00:00
&.left { @include undershoot(left); }
2016-01-09 13:36:05 +00:00
&.right { @include undershoot(right); }
}
junction { // 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;
transition: $backdrop_transition;
}
}
}
//vbox and hbox separators
separator {
background: transparentize(black, 0.9);
min-width: 1px;
min-height: 1px;
}
2016-02-14 13:33:30 +00:00
/*********
* Lists *
*********/
list {
color: $text_color;
background-color: $base_color;
border-color: $borders_color;
2016-01-09 13:36:05 +00:00
&:backdrop {
background-color: $backdrop_base_color;
border-color: $backdrop_borders_color;
}
2016-01-09 13:36:05 +00:00
row { padding: 2px; }
}
row {
transition: all 150ms $ease-out-quad;
&:hover { transition: none; }
&:backdrop { transition: $backdrop_transition; }
&.activatable {
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
&:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95)); }
&:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }
2014-07-14 16:29:08 +00:00
&:backdrop:hover { background-color: transparent; }
2016-01-09 13:36:05 +00:00
&:selected {
&:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
2016-01-09 13:36:05 +00:00
&.has-open-popup,
&:hover { background-color: mix($fg_color, $selected_bg_color, 10%); }
2016-01-09 13:36:05 +00:00
&:backdrop { background-color: $selected_bg_color; }
}
}
&:selected { @extend %selected_items; }
}
/*********************
* App Notifications *
*********************/
.app-notification,
.app-notification.frame {
2014-08-26 14:54:19 +00:00
@extend %osd;
2016-03-14 09:53:59 +00:00
padding: 10px;
border-radius: 0 0 5px 5px;
background-color: $osd_bg_color;
2014-08-26 14:54:19 +00:00
background-image: linear-gradient(to bottom, transparentize(black, 0.8),
transparent 2px);
background-clip: padding-box;
2016-01-09 13:36:05 +00:00
&:backdrop {
background-image: none;
transition: $backdrop_transition;
}
button { @extend %osd_button; }
2016-01-09 13:36:05 +00:00
border { border: none; }
}
2016-02-14 13:33:30 +00:00
/*************
* Expanders *
*************/
expander {
2016-01-09 13:36:05 +00:00
arrow {
min-width: 16px;
min-height: 16px;
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2016-01-09 13:36:05 +00:00
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
2016-01-09 13:36:05 +00:00
&:hover { color: lighten($fg_color,30%); } //only lightens the arrow
2016-01-09 13:36:05 +00:00
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
}
}
2016-02-14 13:33:30 +00:00
/************
* Calendar *
***********/
calendar {
color: $text_color;
2014-07-19 08:50:01 +00:00
border: 1px solid $borders_color;
&:selected {
@extend %selected_items;
2016-03-14 09:53:59 +00:00
border-radius: 3px;
}
&.header {
border-bottom-color: transparentize(black, 0.9);
&:backdrop { border-bottom-color: transparentize(black, 0.9); }
}
&.button {
2014-07-19 08:50:01 +00:00
@extend %undecorated_button;
2016-03-14 09:53:59 +00:00
color: transparentize($fg_color, 0.55);
&:hover { color: $fg_color; }
2016-03-14 09:53:59 +00:00
&:backdrop { color: transparentize($backdrop_fg_color,0.55); }
&:disabled { color: transparentize($insensitive_fg_color,0.55); }
}
&.highlight {
color: $insensitive_fg_color;
2016-01-09 13:36:05 +00:00
&:backdrop { color: $backdrop_insensitive_color; }
}
&:backdrop {
color: $backdrop_text_color;
border-color: $backdrop_borders_color;
}
&:indeterminate { color: gtkalpha(currentColor, 0.1); }
}
2016-02-14 13:33:30 +00:00
/***********
* Dialogs *
***********/
2015-10-31 03:49:17 +00:00
messagedialog { // Message Dialog styling
.titlebar {
min-height: 20px;
background-image: none;
background-color: $bg_color;
border-style: none;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
2016-01-09 13:36:05 +00:00
&.csd { // rounded bottom border styling for csd version
&.background {
// bigger radius for better antialiasing
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
}
2016-01-09 13:36:05 +00:00
2015-10-30 03:17:41 +00:00
.dialog-action-area button {
padding: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround
border-radius: 0;
border-left-style: solid;
border-right-style: none;
border-bottom-style: none;
2016-01-09 13:36:05 +00:00
&:first-child{
border-left-style: none;
border-bottom-left-radius: 7px;
-gtk-outline-bottom-left-radius: 5px;
}
2016-01-09 13:36:05 +00:00
&:last-child {
border-bottom-right-radius: 7px;
-gtk-outline-bottom-right-radius: 5px;
}
}
}
}
filechooser {
.dialog-action-box {
border-top: 1px solid $borders_color;
2016-01-09 13:36:05 +00:00
&:backdrop { border-top-color: $backdrop_borders_color; }
}
#pathbarbox { border-bottom: 1px solid $bg_color; }
}
filechooserbutton:drop(active) {
box-shadow: none;
border-color: transparent;
}
2016-02-14 13:33:30 +00:00
/***********
* Sidebar *
***********/
.sidebar {
border-style: none;
background-color: mix($bg_color, $base_color, 50%);
@at-root %sidebar_left,
&:dir(ltr),
&.left,
&.left:dir(rtl) {
border-right: 1px solid $borders_color;
border-left-style: none;
}
@at-root %sidebar_right
&:dir(rtl),
&.right {
border-left: 1px solid $borders_color;
border-right-style: none;
}
&:backdrop {
background-color: $backdrop_sidebar_bg_color;
border-color: $backdrop_borders_color;
transition: $backdrop_transition;
}
list { background-color: transparent; }
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
}
stacksidebar {
&.sidebar {
2016-03-14 09:53:59 +00:00
&:dir(ltr),
&.left,
&.left:dir(rtl) { list { @extend %sidebar_left; }}
2016-03-14 09:53:59 +00:00
&:dir(rtl),
&.right { list { @extend %sidebar_right; }}
}
2016-01-09 13:36:05 +00:00
row {
padding: 10px 4px;
2016-01-09 13:36:05 +00:00
> label {
padding-left: 6px;
padding-right: 6px;
}
2016-01-09 13:36:05 +00:00
&.needs-attention > label {
@extend %needs_attention;
2016-03-14 09:53:59 +00:00
background-size: 6px 6px, 0 0;
}
}
}
2016-02-14 13:33:30 +00:00
/****************
* File chooser *
****************/
$_placesidebar_icons_opacity: 0.7;
placessidebar {
> viewport.frame { border-style: none; }
row {
// Needs overriding of the GtkListBoxRow padding
min-height: 36px;
padding: 0px;
2016-01-09 13:36:05 +00:00
// Using margins/padding directly in the SidebarRow
// will make the animation of the new bookmark row jump
2016-03-20 23:22:01 +00:00
> revealer { padding: 0 14px; }
&:selected { color: $selected_fg_color; }
2016-01-09 13:36:05 +00:00
&:disabled { color: $insensitive_fg_color; }
&:backdrop {
color: $backdrop_fg_color;
2016-03-20 23:22:01 +00:00
&:selected { color: $backdrop_selected_fg_color; }
&:disabled { color: $backdrop_insensitive_color; }
}
image.sidebar-icon {
opacity: $_placesidebar_icons_opacity; // dim the device icons
2016-01-09 13:36:05 +00:00
&:dir(ltr) { padding-right: 8px; }
&:dir(rtl) { padding-left: 8px; }
}
2016-01-09 13:36:05 +00:00
label.sidebar-label {
&:dir(ltr) { padding-right: 2px; }
&:dir(rtl) { padding-left: 2px; }
}
2016-01-09 13:36:05 +00:00
@at-root button.sidebar-button {
@extend %button_basic.flat;
@extend %button_selected.flat;
min-height: 26px;
min-width: 26px;
margin-top: 3px;
margin-bottom: 3px;
padding: 0;
border-radius: 100%;
-gtk-outline-radius: 100%;
2016-01-09 13:36:05 +00:00
2016-03-14 09:53:59 +00:00
&:not(:hover):not(:active),
&:backdrop { > image { opacity: $_placesidebar_icons_opacity; }}
}
2016-03-14 17:33:40 +00:00
// in the sidebar case it makes no sense to click the selected row
&:selected:active { box-shadow: none; }
2015-09-01 16:14:45 +00:00
2016-03-14 17:33:40 +00:00
&.sidebar-placeholder-row {
padding: 0 8px;
min-height: 2px;
background-image: image($drop_target_color);
2016-03-14 17:33:40 +00:00
background-clip: content-box;
}
2016-03-14 17:33:40 +00:00
&.sidebar-new-bookmark-row { color: $selected_bg_color; }
2015-09-01 16:14:45 +00:00
2016-03-14 17:33:40 +00:00
&:drop(active):not(:disabled) {
color: $drop_target_color;
box-shadow: inset 0 1px $drop_target_color,
inset 0 -1px $drop_target_color;
&:selected {
color: $selected_fg_color;
background-color: $drop_target_color;
}
2016-03-14 17:33:40 +00:00
}
}
}
placesview {
.server-list-button > image {
transition: 200ms $ease-out-quad;
-gtk-icon-transform: rotate(0turn);
}
.server-list-button:checked > image {
transition: 200ms $ease-out-quad;
-gtk-icon-transform: rotate(-0.5turn);
}
2016-01-09 13:36:05 +00:00
row.activatable:hover { background-color: transparent; }
// this selects the "connect to server" label
> actionbar > revealer > box > label {
padding-left: 8px;
padding-right: 8px;
}
}
2016-02-14 13:33:30 +00:00
/*********
* Paned *
*********/
paned {
> separator {
2015-12-09 05:17:51 +00:00
min-width: 1px;
min-height: 1px;
2016-01-09 11:31:41 +00:00
-gtk-icon-source: none; // defeats the ugly default handle decoration
border-style: none; // just to be sure
2016-01-09 11:31:41 +00:00
background-color: transparent;
2016-03-17 09:32:35 +00:00
// workaround, using background istead of a border since the border will get rendered twice (?)
background-image: image($borders_color);
2016-01-09 11:31:41 +00:00
background-size: 1px 1px;
&:selected { background-image: image($selected_bg_color); } // FIXME is this needed?
2016-01-09 13:36:05 +00:00
&:backdrop { background-image: image($backdrop_borders_color); }
&.wide {
min-width: 5px;
min-height: 5px;
2016-03-17 09:32:35 +00:00
background-color: $bg_color;
background-image: image($borders_color), image($borders_color);
background-size: 1px 1px, 1px 1px;
2016-01-09 13:36:05 +00:00
2016-03-12 14:03:07 +00:00
&:backdrop {
2016-03-17 09:32:35 +00:00
background-color: $backdrop_bg_color;
background-image: image($backdrop_borders_color),
image($backdrop_borders_color);
2016-03-12 14:03:07 +00:00
}
}
}
2016-01-09 11:31:41 +00:00
&.horizontal > separator {
background-repeat: repeat-y;
2016-01-09 13:36:05 +00:00
2016-01-09 11:31:41 +00:00
&:dir(ltr) {
margin: 0 -8px 0 0;
padding: 0 8px 0 0;
background-position: left;
}
&:dir(rtl) {
margin: 0 0 0 -8px;
padding: 0 0 0 8px;
background-position: right;
}
&.wide {
2016-03-17 09:32:35 +00:00
margin: 0;
padding: 0;
background-repeat: repeat-y, repeat-y;
background-position: left, right;
}
}
&.vertical > separator {
margin: 0 0 -8px 0;
padding: 0 0 8px 0;
2016-01-09 11:31:41 +00:00
background-repeat: repeat-x;
background-position: top;
&.wide {
2016-03-17 09:32:35 +00:00
margin: 0;
padding: 0;
background-repeat: repeat-x, repeat-x;
background-position: bottom, top;
}
}
}
/**************
* GtkInfoBar *
**************/
infobar {
border-style: none;
&.info,
&.question,
&.warning,
&.error {
&:backdrop, & {
label, & { color: $selected_fg_color; }
background-color: $selected_bg_color;
border-color: darken($selected_bg_color, 10%);
}
text-shadow: 0 1px darken($selected_bg_color, 10%);
2016-01-09 13:36:05 +00:00
&:backdrop { text-shadow: none; }
2016-01-09 13:36:05 +00:00
button {
// FIXME: extend selection mode buttons
@include button(normal, $selected_bg_color, $selected_fg_color, none);
2016-01-09 13:36:05 +00:00
&:hover { @include button(hover, $selected_bg_color, $selected_fg_color, none); }
2016-01-09 13:36:05 +00:00
&:active,
&:checked { @include button(active, $selected_bg_color, $selected_fg_color, none); }
2016-01-09 13:36:05 +00:00
&:disabled { @include button(insensitive,$selected_bg_color,$selected_fg_color,none); }
2016-01-09 13:36:05 +00:00
&:backdrop {
@include button(backdrop, $selected_bg_color, $selected_fg_color, none);
border-color: _border_color($selected_bg_color);
&:disabled {
@include button(backdrop-insensitive, $selected_bg_color,
$selected_fg_color, none);
border-color: _border_color($selected_bg_color);
}
}
}
2016-01-09 13:36:05 +00:00
selection { background-color: darken($selected_bg_color, 10%); }
*:link { @extend %link_selected; }
}
}
2016-02-14 13:33:30 +00:00
/************
* 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
}
padding: 4px; /* not working */
border-radius: 5px;
box-shadow: none; // otherwise it gets inherited by windowframe.csd
text-shadow: 0 1px black;
2016-01-09 13:36:05 +00:00
// FIXME: we need a border or tooltips vanish on black background.
2016-01-09 13:36:05 +00:00
decoration { background-color: transparent; }
* { // Yeah this is ugly
padding: 4px;
background-color: transparent;
color: white;
}
}
2016-02-14 13:33:30 +00:00
/*****************
* Color Chooser *
*****************/
colorswatch {
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
// applied to the overlay box.
2016-04-17 16:17:07 +00:00
&:drop(active), & { border-style: none; } // FIXME: implement a proper drop(active) state
$_colorswatch_radius: 5px;
// 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.
2016-01-09 13:36:05 +00:00
&.top {
border-top-left-radius: $_colorswatch_radius + 0.5px;
border-top-right-radius: $_colorswatch_radius + 0.5px;
2016-01-09 13:36:05 +00:00
overlay {
border-top-left-radius: $_colorswatch_radius;
border-top-right-radius: $_colorswatch_radius;
}
}
2016-01-09 13:36:05 +00:00
&.bottom {
border-bottom-left-radius: $_colorswatch_radius + 0.5px;
border-bottom-right-radius: $_colorswatch_radius + 0.5px;
2016-01-09 13:36:05 +00:00
overlay {
border-bottom-left-radius: $_colorswatch_radius;
border-bottom-right-radius: $_colorswatch_radius;
}
}
2016-01-09 13:36:05 +00:00
&.left,
&:first-child:not(.top) {
border-top-left-radius: $_colorswatch_radius + 0.5px;
border-bottom-left-radius: $_colorswatch_radius + 0.5px;
2016-01-09 13:36:05 +00:00
overlay {
border-top-left-radius: $_colorswatch_radius;
border-bottom-left-radius: $_colorswatch_radius;
}
}
2016-01-09 13:36:05 +00:00
&.right,
&:last-child:not(.bottom) {
border-top-right-radius: $_colorswatch_radius + 0.5px;
border-bottom-right-radius: $_colorswatch_radius + 0.5px;
2016-01-09 13:36:05 +00:00
overlay {
border-top-right-radius: $_colorswatch_radius;
border-bottom-right-radius: $_colorswatch_radius;
}
}
&.dark overlay {
color: $selected_fg_color;
2016-01-09 13:36:05 +00:00
&:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); }
2016-01-09 13:36:05 +00:00
&:backdrop { color: $backdrop_selected_fg_color; }
}
&.light overlay {
color: $text_color;
2016-01-09 13:36:05 +00:00
&:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); }
2016-01-09 13:36:05 +00:00
&:backdrop { color: $backdrop_text_color; }
}
&:drop(active) {
box-shadow: none;
&.light overlay {
border-color: $drop_target_color;
box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color),
inset 0 0 0 1px $drop_target_color;
}
&.dark overlay {
border-color: $drop_target_color;
box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize(black, 0.7), $borders_color),
inset 0 0 0 1px $drop_target_color;
}
}
overlay {
border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
2016-01-09 13:36:05 +00:00
2016-04-17 16:17:07 +00:00
&:hover {
box-shadow: inset 0 1px transparentize(white, 0.6),
inset 0 -1px transparentize(black, 0.8);
}
2016-01-09 13:36:05 +00:00
&:backdrop, &:backdrop:hover {
border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color);
box-shadow: none;
}
}
&#add-color-button {
border-radius: $_colorswatch_radius $_colorswatch_radius 0 0;
2016-01-09 13:36:05 +00:00
&:only-child { border-radius: $_colorswatch_radius; }
2016-01-09 13:36:05 +00:00
overlay {
@include button(normal);
2016-01-09 13:36:05 +00:00
&:hover { @include button(hover); }
2016-01-09 13:36:05 +00:00
&:backdrop { @include button(backdrop); }
}
}
&:disabled {
opacity: 0.5;
2016-01-09 13:36:05 +00:00
overlay {
border-color: transparentize(black, 0.4);
box-shadow: none;
}
}
row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }
&#editor-color-sample {
border-radius: 4px;
overlay { border-radius: 4.5px; }
}
}
// colorscale popup
colorchooser .popover.osd { border-radius: 5px; }
2014-07-08 16:24:28 +00:00
/********
* Misc *
********/
//content view (grid/list)
.content-view {
background-color: darken($bg_color,7%);
2016-01-09 13:36:05 +00:00
&:hover { -gtk-icon-effect: highlight; }
2016-01-09 13:36:05 +00:00
&:backdrop { background-color: darken($bg_color,7%); }
2016-01-09 13:36:05 +00:00
rubberband, .rubberband { @extend rubberband; }
}
2015-06-18 10:33:04 +00:00
.scale-popup {
2016-02-14 13:21:01 +00:00
.osd & { @extend %osd; }
2015-06-18 10:33:04 +00:00
2016-02-14 13:21:01 +00:00
.osd & button.flat { //FIXME: quick hack, redo properly
border-style: none;
border-radius: 5px;
}
2015-06-18 10:33:04 +00:00
2015-10-30 03:17:41 +00:00
button { // +/- buttons on GtkVolumeButton popup
2015-06-18 10:33:04 +00:00
&:hover {
@extend %undecorated_button;
background-color: transparentize($fg_color,0.9);
border-radius: 5px;
}
2016-01-09 13:36:05 +00:00
2016-04-02 14:03:02 +00:00
&:backdrop { &:hover, &:disabled, & { @extend %undecorated_button; }}
2014-07-08 16:24:28 +00:00
}
}
2016-02-14 13:33:30 +00:00
/**********************
* Window Decorations *
*********************/
2015-09-07 19:42:25 +00:00
decoration {
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
2015-09-07 19:42:25 +00:00
// FIXME rationalize shadows
// this is used for the resize cursor area
margin: 10px;
&:backdrop {
// the transparent shadow here is to enforce that the shadow extents don't
// change when we go to backdrop, to prevent jumping windows.
// The biggest shadow should be in the same order then in the active state
// or the jumping will happen during the transition.
box-shadow: 0 3px 9px 1px transparent,
0 2px 6px 2px transparentize(black, 0.8),
0 0 0 1px $_wm_border_backdrop;
transition: $backdrop_transition;
}
2016-01-09 13:36:05 +00:00
.maximized &,
.fullscreen &,
2016-01-09 13:36:05 +00:00
.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
2016-01-09 13:36:05 +00:00
.csd.popup & {
border-radius: 0;
box-shadow: 0 1px 2px transparentize(black, 0.8),
2016-04-15 14:51:29 +00:00
0 0 0 1px transparentize($_wm_border, 0.1);
}
2016-01-09 13:36:05 +00:00
tooltip.csd & {
border-radius: 5px;
box-shadow: none;
}
2016-01-09 13:36:05 +00:00
messagedialog.csd & {
border-radius: 7px;
box-shadow: 0 1px 2px transparentize(black, 0.8),
2016-04-15 14:51:29 +00:00
0 0 0 1px transparentize($_wm_border, 0.1);
}
2016-01-09 13:36:05 +00:00
.solid-csd & {
2016-04-15 14:51:29 +00:00
margin: 0;
padding: 4px;
background-color: $borders_color;
border: solid 1px $borders_color;
border-radius: 0;
2016-04-15 14:51:29 +00:00
box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $top_hilight;
&:backdrop { box-shadow: inset 0 0 0 3px $backdrop_bg_color, inset 0 1px $top_hilight; }
}
}
// Window Close button
button.titlebutton {
@extend %button_basic;
@extend %button_basic.flat;
@include _button_text_shadow;
2016-01-09 13:36:05 +00:00
.selection-mode & {
@extend %button.flat.suggested-action;
@extend %nobg_selected_items;
}
&:backdrop { -gtk-icon-shadow: none; }
}
headerbar.selection-mode button.titlebutton,
2015-10-30 03:17:41 +00:00
.titlebar.selection-mode button.titlebutton {
@include _button_text_shadow(white, $selected_bg_color);
2016-01-09 13:36:05 +00:00
&:backdrop { -gtk-icon-shadow: none; }
}
// catch all extend :)
%selected_items {
background-color: $selected_bg_color;
@at-root %nobg_selected_items, & {
color: $selected_fg_color;
2016-01-09 13:36:05 +00:00
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
2016-01-09 13:36:05 +00:00
&:backdrop {
color: $backdrop_selected_fg_color;
&:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
}
}
}
2016-04-18 15:45:55 +00:00
.monospace { font-family: monospace; }
2016-02-14 13:33:30 +00:00
/**********************
* Touch Copy & Paste *
*********************/
//touch selection handlebars for the Popover.osd above
cursor-handle {
background-color: transparent;
background-image: none;
box-shadow: none;
border-style: none;
2016-01-09 13:36:05 +00:00
@each $s,$as in ('',''),
(':hover','-hover'),
(':active','-active') { //no need for insensitive and backdrop
2016-01-09 13:36:05 +00:00
&.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'));
}
}
}
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
2016-01-09 17:03:26 +00:00
// shortcut window keys
.keycap {
min-width: 20px;
min-height: 25px;
margin-top: 2px;
2016-01-09 17:03:26 +00:00
padding-bottom: 3px;
padding-left: 6px;
padding-right: 6px;
color: $fg_color;
2016-01-09 17:03:26 +00:00
background-color: $base_color;
border: 1px solid;
border-color: if($variant == 'light', mix($borders_color, $bg_color, 50%), $borders_color);
border-radius: 5px;
2016-01-09 17:03:26 +00:00
box-shadow: if($variant == 'light', inset 0 -3px mix($base_color, $bg_color, 20%), inset 0 -3px mix($borders_color, $base_color, 60%));
font-size: smaller;
&:backdrop {
background-color: $backdrop_base_color;
color: $backdrop_fg_color;
transition: $backdrop_transition;
2016-01-09 17:03:26 +00:00
}
}
:not(decoration):not(window):drop(active):focus,
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
2016-03-14 18:19:43 +00:00
border-color: $drop_target_color;
box-shadow: inset 0 0 0 1px $drop_target_color;
caret-color: $drop_target_color;
}
2016-01-09 13:36:05 +00:00
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
2016-01-09 17:03:26 +00:00
stackswitcher button.circular,
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
min-width: 32px;
min-height: 32px;
padding: 0;
}
popover.emoji-picker { padding-left: 0; padding-right: 0; }
button.emoji-section {
border-color: transparent;
border-width: 3px;
border-style: none none solid;
border-radius: 0;
margin: 2px 4px 2px 4px;
padding: 3px 0 0;
min-width: 32px;
min-height: 28px;
/* reset props inherited from the button style */
background: none;
box-shadow: none;
text-shadow: none;
outline-offset: -5px;
}
button.emoji-section label { padding: 0; }
button.emoji-section:hover { border-color: $borders_color; }
button.emoji-section:checked { border-color: $selected_bg_color; }
button.emoji-section:backdrop:not(:checked) { border-color: transparent; }
button.emoji-section { color: $borders_color; }
button.emoji-section:hover { color: mix($fg_color, $borders_color, 0.5); }
button.emoji-section:checked { color: $fg_color; }
button.emoji-section:backdrop { color: $backdrop_borders_color; }
button.emoji-section:backdrop:checked { color: $backdrop_fg_color; }
.emoji {
font-size: x-large;
padding: 6px;
border-radius: 6px;
}
.emoji :hover {
background: $selected_bg_color;
}