forked from AuroraMiddleware/gtk
d1b14a7deb
We shouldn't give the icons here the same fg colour as the bg... which makes them disappear and the buttons look like meaningless flat squares. Fix by just using the same colour the same as foreground disabled. Note: insensitive_fg_color is more prominent than !disabled, so clearly wrong.
3606 lines
86 KiB
SCSS
3606 lines
86 KiB
SCSS
@function gtkalpha($c,$a) {
|
||
@return unquote("alpha(#{$c},#{$a})");
|
||
}
|
||
|
||
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
|
||
* {
|
||
padding: 0;
|
||
-GtkToolButton-icon-spacing: 4;
|
||
-GtkTextView-error-underline-color: $error_color;
|
||
-gtk-icon-style: symbolic; //force symbolic style icons
|
||
|
||
// 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;
|
||
|
||
-GtkTreeView-horizontal-separator: 4;
|
||
|
||
-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: currentColor;
|
||
outline-style: dashed;
|
||
outline-offset: -4px;
|
||
outline-width: 2px;
|
||
-gtk-outline-radius: 2px;
|
||
|
||
}
|
||
|
||
|
||
/***************
|
||
* Base States *
|
||
***************/
|
||
|
||
.background {
|
||
color: $fg_color;
|
||
background-color: $bg_color;
|
||
}
|
||
|
||
.background:backdrop {
|
||
text-shadow: none;
|
||
-gtk-icon-shadow: none;
|
||
|
||
color: lighten($fg_color,10%);
|
||
background-color: $backdrop_bg_color;
|
||
}
|
||
|
||
/*
|
||
These wildcard seems unavoidable, need to investigate.
|
||
Wildcards are bad and troublesome, use them with care,
|
||
or better, just don't.
|
||
Everytime a wildcard is used a kitten dies, painfully.
|
||
*/
|
||
|
||
|
||
|
||
*:disabled {
|
||
-gtk-icon-effect: dim;
|
||
}
|
||
|
||
.gtkstyle-fallback {
|
||
background-color: $bg_color;
|
||
color: $fg_color;
|
||
&:hover {
|
||
background-color: lighten($bg_color, 10%);
|
||
color: $fg_color;
|
||
}
|
||
&:active {
|
||
background-color: darken($bg_color, 10%);
|
||
color: $fg_color;
|
||
}
|
||
&:disabled {
|
||
background-color: $insensitive_bg_color;
|
||
color: $insensitive_fg_color;
|
||
}
|
||
&:selected {
|
||
background-color: $selected_bg_color;
|
||
color: $selected_fg_color;
|
||
}
|
||
}
|
||
|
||
.view {
|
||
color: $fg_color;
|
||
background-color: $base_color;
|
||
&:backdrop {
|
||
color: $backdrop_fg_color;
|
||
background-color: $backdrop_base_color;
|
||
}
|
||
&:disabled {
|
||
color: $insensitive_fg_color;
|
||
background-color: $insensitive_bg_color;
|
||
}
|
||
&:selected,
|
||
&:selected:focus,
|
||
&:selected:hover { @extend %selected_items; }
|
||
}
|
||
|
||
textview text {
|
||
@extend .view;
|
||
|
||
selection,
|
||
selection:focus,
|
||
selection:hover {
|
||
@extend %selected_items;
|
||
}
|
||
}
|
||
|
||
iconview { @extend .view ;}
|
||
|
||
.rubberband,
|
||
rubberband {
|
||
border: 1px solid $selected_bg_color;
|
||
background-color: transparentize($selected_bg_color,0.8);
|
||
}
|
||
|
||
flowbox {
|
||
& rubberband { @extend rubberband; }
|
||
flowboxchild {
|
||
padding: 3px;
|
||
border-radius: 3px;
|
||
&:selected {
|
||
@extend %selected_items;
|
||
outline-offset: -2px;
|
||
}
|
||
}
|
||
}
|
||
|
||
label {
|
||
& selection,
|
||
& selection:focus,
|
||
& selection:hover,
|
||
& selection:backdrop {
|
||
@extend %selected_items;
|
||
}
|
||
&:disabled, &:backdrop:disabled {
|
||
color: $insensitive_fg_color;
|
||
}
|
||
}
|
||
|
||
%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;
|
||
|
||
&:backdrop {
|
||
text-shadow: none;
|
||
-gtk-icon-shadow: none;
|
||
}
|
||
}
|
||
|
||
/*********************
|
||
* Spinner Animation *
|
||
*********************/
|
||
|
||
@keyframes spin {
|
||
to { -gtk-icon-transform: rotate(1turn); }
|
||
}
|
||
|
||
spinner {
|
||
background-image: none;
|
||
opacity: 0; // non spinning spinner makes no sense
|
||
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
|
||
&:checked {
|
||
opacity: 1;
|
||
animation: spin 1s linear infinite;
|
||
&:disabled {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
}
|
||
|
||
/****************
|
||
* Text Entries *
|
||
****************/
|
||
|
||
%entry,
|
||
entry {
|
||
%entry_basic, & {
|
||
min-height: 32px;
|
||
padding-left: 8px;
|
||
padding-right: 8px;
|
||
border: 1px solid;
|
||
border-radius: 3px;
|
||
transition: all 200ms $ease-out-quad;
|
||
|
||
@include entry(normal);
|
||
|
||
image { // icons inside the entry
|
||
&.left { padding-left: 0; padding-right: 6px; }
|
||
&.right { padding-left: 6px; padding-right: 0; }
|
||
}
|
||
|
||
undershoot {
|
||
&.left { @include undershoot(left); }
|
||
&.right { @include undershoot(right); }
|
||
}
|
||
|
||
&.flat {
|
||
&:focus, &:backdrop, &:disabled, & {
|
||
min-height: 0;
|
||
padding: 2px;
|
||
background-image: none;
|
||
border-color: transparent;
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
}
|
||
|
||
// Dodge transparency in selected treeview row, else bg & fg end up same
|
||
treeview &:focus { background-color: $base_color; }
|
||
}
|
||
|
||
&:focus { @include entry(focus); }
|
||
|
||
&:disabled { @include entry(insensitive); }
|
||
|
||
&:backdrop { @include entry(backdrop); }
|
||
|
||
&:backdrop:disabled { @include entry(backdrop-insensitive); }
|
||
|
||
selection { &:focus, & { @extend %selected_items; }}
|
||
|
||
// entry error and warning style
|
||
@each $e_type, $e_color in (error, $error_color),
|
||
(warning, $warning_color) {
|
||
&.#{$e_type} {
|
||
color: $e_color;
|
||
border-color: entry_focus_border($e_color);
|
||
|
||
&:focus { @include entry(focus, $e_color); }
|
||
|
||
&:selected { &:focus, & { background-color: $e_color; }}
|
||
}
|
||
}
|
||
|
||
& image { // entry icons colors
|
||
color: mix($fg_color, $base_color, 80%);
|
||
|
||
&:hover { color: $fg_color; }
|
||
|
||
&:active { color: $selected_bg_color; }
|
||
|
||
&:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); }
|
||
}
|
||
|
||
&:drop(active) {
|
||
&:focus, & {
|
||
border-color: $fg_color;
|
||
box-shadow: inset 0 0 0 1px $fg_color;
|
||
}
|
||
}
|
||
|
||
.osd & {
|
||
@include entry(osd);
|
||
|
||
&:focus { @include entry(osd-focus); }
|
||
|
||
&:backdrop { @include entry(osd-backdrop); }
|
||
|
||
&:disabled { @include entry(osd-insensitive); }
|
||
}
|
||
}
|
||
|
||
progress {
|
||
margin: 2px -6px;
|
||
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; }
|
||
}
|
||
|
||
// linked entries
|
||
.linked:not(.vertical) > & { @extend %linked; }
|
||
.linked:not(.vertical) > &:focus + &,
|
||
.linked:not(.vertical) > &:focus + button,
|
||
.linked:not(.vertical) > &:focus + combobox > box > button.combo { border-left-color: entry_focus_border(); }
|
||
|
||
.linked:not(.vertical) > &:focus.error + &,
|
||
.linked:not(.vertical) > &:focus.error + button,
|
||
.linked:not(.vertical) > &:focus.error + combobox > box > button.combo { border-left-color: $error_color; }
|
||
|
||
.linked:not(.vertical) > &:drop(active) + &,
|
||
.linked:not(.vertical) > &:drop(active) + button,
|
||
.linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $fg_color; }
|
||
|
||
// Vertically linked entries
|
||
// FIXME: take care of "colored" entries
|
||
.linked.vertical > & {
|
||
@extend %linked_vertical;
|
||
|
||
// brighter border between linked entries
|
||
&:not(:disabled) + entry:not(:disabled),
|
||
&:not(:disabled) + %entry:not(:disabled) {
|
||
border-top-color: mix($borders_color, $base_color, 30%);
|
||
background-image: _solid($base_color);
|
||
|
||
&:backdrop {
|
||
border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
|
||
background-image: _solid($backdrop_base_color);
|
||
}
|
||
}
|
||
|
||
// brighter border between linked insensitive entries
|
||
&:disabled + %entry:disabled,
|
||
&:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); }
|
||
|
||
// color back the top border of a linked focused entry following another entry and add back the focus shadow.
|
||
// :not(:only-child) is a specificity bump hack.
|
||
+ %entry:focus:not(:only-child),
|
||
+ entry:focus:not(:only-child) { border-top-color: entry_focus_border(); }
|
||
|
||
+ %entry:focus.error:not(:only-child),
|
||
+ entry:focus.error:not(:only-child) { border-top-color: $error_color; }
|
||
|
||
+ %entry:drop(active):not(:only-child),
|
||
+ entry:drop(active):not(:only-child) { border-top-color: $fg_color; }
|
||
|
||
// 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,
|
||
+ entry,
|
||
+ button,
|
||
+ combobox > box > button.combo { border-top-color: entry_focus_border(); }
|
||
}
|
||
|
||
&:focus.error:not(:only-child) {
|
||
+ %entry,
|
||
+ entry,
|
||
+ button,
|
||
+ combobox > box > button.combo { border-top-color: $error_color; }
|
||
}
|
||
|
||
&:drop(active):not(:only-child) {
|
||
+ %entry,
|
||
+ entry,
|
||
+ button,
|
||
+ combobox > box > button.combo { border-top-color: $fg_color; }
|
||
}
|
||
}
|
||
}
|
||
|
||
/***********
|
||
* Buttons *
|
||
***********/
|
||
// stuff for .needs-attention
|
||
$_dot_color: $selected_bg_color;
|
||
|
||
@keyframes needs_attention {
|
||
from {
|
||
background-image: -gtk-gradient(radial,
|
||
center center, 0,
|
||
center center, 0.01,
|
||
to($_dot_color),
|
||
to(transparent));
|
||
}
|
||
to {
|
||
background-image: -gtk-gradient(radial,
|
||
center center, 0,
|
||
center center, 0.5,
|
||
to($selected_bg_color),
|
||
to(transparent));
|
||
}
|
||
}
|
||
|
||
|
||
button {
|
||
@at-root %button_basic, & {
|
||
$_button_transition: all 200ms $ease-out-quad;
|
||
|
||
min-height: 24px;
|
||
min-width: 16px;
|
||
padding: 4px 8px;
|
||
border: 1px solid;
|
||
border-radius: 3px;
|
||
transition: $_button_transition;
|
||
|
||
@include button(normal);
|
||
|
||
&:disabled {
|
||
@include button(insensitive);
|
||
|
||
&:active,
|
||
&:checked { @include button(insensitive-active); }
|
||
}
|
||
|
||
&:backdrop {
|
||
@include button(backdrop);
|
||
|
||
-gtk-icon-effect: none;
|
||
|
||
&:active,
|
||
&:checked { @include button(backdrop-active); }
|
||
|
||
&:disabled {
|
||
@include button(backdrop-insensitive);
|
||
|
||
&:active,
|
||
&:checked { @include button(backdrop-insensitive-active); }
|
||
}
|
||
}
|
||
|
||
&.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; }
|
||
}
|
||
|
||
&:backdrop,
|
||
&:disabled,
|
||
&:backdrop:disabled {
|
||
@include button(undecorated-insensitive);
|
||
}
|
||
}
|
||
|
||
&:hover,
|
||
&.flat:hover {
|
||
@include button(hover);
|
||
-gtk-icon-effect: highlight;
|
||
}
|
||
|
||
&:active,
|
||
&:checked {
|
||
@include button(active);
|
||
|
||
transition-duration: 50ms;
|
||
}
|
||
|
||
&.image-button {
|
||
min-width: 24px;
|
||
padding-left: 4px;
|
||
padding-right: 4px;
|
||
}
|
||
|
||
&.text-button {
|
||
padding-left: 16px;
|
||
padding-right: 16px;
|
||
}
|
||
|
||
&.text-button.image-button {
|
||
padding-left: 8px;
|
||
padding-right: 8px;
|
||
|
||
label {
|
||
padding-left: 8px;
|
||
padding-right: 8px;
|
||
}
|
||
}
|
||
|
||
&:drop(active) {
|
||
color: $fg_color;
|
||
border-color: $fg_color;
|
||
box-shadow: inset 0 0 0 1px $fg_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); }
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// big standalone buttons like in Documents pager
|
||
&.osd {
|
||
&.image-button {
|
||
min-height: 48px;
|
||
min-width: 48px;
|
||
}
|
||
|
||
color: $osd_fg_color;
|
||
border-radius: 5px;
|
||
|
||
@include button(osd);
|
||
|
||
border: none;
|
||
box-shadow: none;
|
||
|
||
&:hover {
|
||
@include button(osd-hover);
|
||
|
||
border: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
&:active,
|
||
&:checked {
|
||
@include button(osd-active);
|
||
|
||
border: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
&:disabled {
|
||
&:backdrop, & {
|
||
@include button(osd-insensitive);
|
||
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
&:backdrop {
|
||
@include button(osd-backdrop);
|
||
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
//overlay / OSD style
|
||
@at-root %osd_button,
|
||
.osd & {
|
||
@include button(osd);
|
||
|
||
&:hover { @include button(osd-hover); }
|
||
|
||
&:active,
|
||
&:checked { &:backdrop, & { @include button(osd-active); }}
|
||
|
||
&:disabled { &:backdrop, & { @include button(osd-insensitive); }}
|
||
|
||
&:backdrop { @include button(osd-backdrop); }
|
||
|
||
&.flat {
|
||
@include button(undecorated);
|
||
|
||
box-shadow: none; //FIXME respect no edge on the button mixin
|
||
text-shadow: 0 1px black;
|
||
-gtk-icon-shadow: 0 1px black;
|
||
|
||
&:hover { @include button(osd-hover); }
|
||
|
||
&:disabled {
|
||
@include button(osd-insensitive);
|
||
background-image: none;
|
||
border-color: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
&:backdrop { @include button(undecorated); }
|
||
|
||
&:active,
|
||
&:checked { @include button(osd-active); }
|
||
}
|
||
}
|
||
|
||
// Suggested and Destructive Action buttons
|
||
@each $b_type, $b_color, $f_color in (suggested-action, $selected_bg_color, $selected_fg_color),
|
||
(destructive-action, $destructive_color, white) {
|
||
&.#{$b_type} {
|
||
@include button(normal, $b_color, $f_color);
|
||
|
||
&.flat {
|
||
@include button(undecorated);
|
||
|
||
color: $b_color; //FIXME: does it work on the dark variant?
|
||
}
|
||
|
||
&:hover { @include button(hover, $b_color, $f_color); }
|
||
|
||
&:active,
|
||
&:checked { @include button(active, $b_color, $f_color); }
|
||
|
||
&:backdrop,
|
||
&.flat:backdrop {
|
||
@include button(backdrop, $b_color, $f_color);
|
||
|
||
&:active,
|
||
&:checked { @include button(backdrop-active, $b_color, $f_color); }
|
||
|
||
&:disabled {
|
||
@include button(backdrop-insensitive);
|
||
|
||
&:active,
|
||
&:checked { @include button(backdrop-insensitive-active, $b_color, $f_color); }
|
||
}
|
||
}
|
||
|
||
&.flat {
|
||
&:backdrop, &:disabled, &:backdrop:disabled {
|
||
@include button(undecorated);
|
||
|
||
color: transparentize($b_color, 0.2);
|
||
}
|
||
}
|
||
|
||
&:disabled {
|
||
@include button(insensitive);
|
||
|
||
&:active,
|
||
&:checked { @include button(insensitive-active, $b_color, $f_color); }
|
||
}
|
||
|
||
.osd & {
|
||
@include button(osd, $b_color);
|
||
|
||
&:hover { @include button(osd-hover, $b_color); }
|
||
|
||
&:active,
|
||
&:checked { &:backdrop, & { @include button(osd-active, $b_color); }}
|
||
|
||
&:disabled { &:backdrop, & { @include button(osd-insensitive, $b_color); }}
|
||
|
||
&: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; //
|
||
}
|
||
|
||
> image {
|
||
padding-left: 6px; // image padding
|
||
padding-right: 6px; //
|
||
padding-top: 3px; //
|
||
padding-bottom: 3px; //
|
||
}
|
||
|
||
&.text-button {
|
||
// compensate text-button paddings
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
}
|
||
|
||
&.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;
|
||
}
|
||
|
||
&.needs-attention {
|
||
> label,
|
||
> image { @extend %needs_attention; }
|
||
|
||
&:active,
|
||
&:checked {
|
||
> label,
|
||
> image {
|
||
animation: none;
|
||
background-image: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//inline-toolbar buttons
|
||
.inline-toolbar &, .inline-toolbar &:backdrop {
|
||
border-radius: 2px;
|
||
border-width: 1px;
|
||
@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; }
|
||
}
|
||
|
||
%needs_attention {
|
||
animation: needs_attention 150ms ease-in;
|
||
background-image: -gtk-gradient(radial,
|
||
center center, 0,
|
||
center center, 0.5,
|
||
to($_dot_color),
|
||
to(transparent));
|
||
background-size: 6px 6px;
|
||
background-repeat: no-repeat;
|
||
|
||
background-position: right 3px;
|
||
|
||
&:backdrop { background-size: 6px 6px;}
|
||
|
||
&:dir(rtl) { background-position: left 3px; }
|
||
}
|
||
|
||
|
||
// all the following is for the +|- buttons on inline toolbars, that way
|
||
// should really be deprecated...
|
||
.inline-toolbar toolbutton > button { // redefining the button look is
|
||
// needed since those are flat...
|
||
@include button(normal);
|
||
|
||
&:hover { @include button(hover); }
|
||
|
||
&:active,
|
||
&:checked{ @include button(active); }
|
||
|
||
&:disabled {
|
||
@include button(insensitive);
|
||
|
||
&:active,
|
||
&:checked { @include button(insensitive-active); }
|
||
}
|
||
|
||
&:backdrop {
|
||
@include button(backdrop);
|
||
|
||
&:active,
|
||
&:checked { @include button(backdrop-active); }
|
||
|
||
&:disabled {
|
||
@include button(backdrop-insensitive);
|
||
|
||
&:active,
|
||
&:checked { @include button(backdrop-insensitive-active); }
|
||
}
|
||
}
|
||
}
|
||
|
||
// More inline toolbar buttons
|
||
toolbar.inline-toolbar toolbutton,
|
||
toolbar.inline-toolbar toolbutton:backdrop {
|
||
& > button.flat { @extend %linked_middle; }
|
||
|
||
&:first-child > button.flat { @extend %linked:first-child; }
|
||
|
||
&:last-child > button.flat { @extend %linked:last-child; }
|
||
|
||
&:only-child > button.flat { @extend %linked:only-child; }
|
||
}
|
||
|
||
%linked_middle {
|
||
border-radius: 0;
|
||
border-right-style: none;
|
||
}
|
||
|
||
%linked_left {
|
||
border-top-left-radius: 3px;
|
||
border-bottom-left-radius: 3px;
|
||
border-top-right-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
border-right-style: none;
|
||
}
|
||
|
||
%linked_right {
|
||
border-top-left-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
border-top-right-radius: 3px;
|
||
border-bottom-right-radius: 3px;
|
||
border-right-style: solid;
|
||
}
|
||
|
||
// .linked assumes Box, which reverses nodes in RTL, so 1st child is always left
|
||
%linked {
|
||
@extend %linked_middle;
|
||
|
||
&:first-child { @extend %linked_left; }
|
||
&:last-child { @extend %linked_right; }
|
||
|
||
&:only-child {
|
||
border-radius: 3px;
|
||
border-style: solid;
|
||
}
|
||
}
|
||
|
||
// Other widgets use widget child order, so 1st/last child are at text start/end
|
||
%linked_flippable {
|
||
@extend %linked_middle;
|
||
|
||
&:dir(ltr) {
|
||
&:first-child { @extend %linked_left; }
|
||
&:last-child { @extend %linked_right; }
|
||
}
|
||
|
||
&:dir(rtl) {
|
||
&:first-child { @extend %linked_right; }
|
||
&:last-child { @extend %linked_left; }
|
||
}
|
||
|
||
&:only-child {
|
||
border-radius: 3px;
|
||
border-style: solid;
|
||
}
|
||
}
|
||
|
||
%linked_vertical_middle {
|
||
border-style: solid solid none solid;
|
||
border-radius: 0;
|
||
}
|
||
|
||
%linked_vertical{
|
||
@extend %linked_vertical_middle;
|
||
|
||
&:first-child {
|
||
border-top-left-radius: 3px;
|
||
border-top-right-radius: 3px;
|
||
}
|
||
|
||
&:last-child {
|
||
border-bottom-left-radius: 3px;
|
||
border-bottom-right-radius: 3px;
|
||
border-style: solid;
|
||
}
|
||
|
||
&:only-child {
|
||
border-radius: 3px;
|
||
border-style: solid;
|
||
}
|
||
}
|
||
|
||
%undecorated_button {
|
||
background-color: transparent;
|
||
background-image: none;
|
||
border-color: transparent;
|
||
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;
|
||
|
||
&:hover { background-color: $popover_hover_color; }
|
||
|
||
&:selected { @extend %selected_items; }
|
||
|
||
&:backdrop,
|
||
&:backdrop:hover { @extend %undecorated_button; }
|
||
|
||
// FIXME: remove the following when the checks/radios rewrite lands
|
||
check:last-child,
|
||
radio:last-child { margin-left: 8px; }
|
||
|
||
check:first-child,
|
||
radio:first-child { margin-right: 8px; }
|
||
}
|
||
|
||
modelbutton.flat arrow {
|
||
background: none;
|
||
|
||
&:hover { background: none; }
|
||
|
||
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
|
||
|
||
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
|
||
}
|
||
|
||
button.color {
|
||
padding: 4px;
|
||
|
||
colorswatch:only-child {
|
||
&, overlay { border-radius: 0; }
|
||
|
||
@if $variant == 'light' {
|
||
&:disabled,
|
||
&:backdrop { box-shadow: none; }
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
/*********
|
||
* Links *
|
||
*********/
|
||
|
||
*:link {
|
||
color: $selected_bg_color; //FIXME use a proper color
|
||
&:hover, &:active, &:visited {
|
||
color: mix($fg_color, $selected_bg_color, 40%); //FIXME same here
|
||
}
|
||
&:backdrop, &:backdrop:hover {
|
||
color: $selected_bg_color;
|
||
}
|
||
}
|
||
|
||
button:link, button:visited {
|
||
color: $suggested_color;
|
||
font-weight: bold;
|
||
@extend %undecorated_button;
|
||
text-shadow: none;
|
||
&:hover, &:active {
|
||
@extend %undecorated_button;
|
||
color: mix($fg_color, $selected_bg_color, 40%); //FIXME same here
|
||
text-shadow: none;
|
||
}
|
||
&:backdrop {
|
||
@extend %undecorated_button; //This shouldn't be needed but avoids
|
||
//a weird transition which for some reason
|
||
//makes borders blink on hover
|
||
color: $selected_bg_color; //FIXME use a proper color
|
||
}
|
||
}
|
||
|
||
/*****************
|
||
* GtkSpinButton *
|
||
*****************/
|
||
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
|
||
@extend %entry;
|
||
border-width: 2px;
|
||
border-color: $borders_color;
|
||
box-shadow: none;
|
||
padding: 0;
|
||
|
||
entry {
|
||
min-width: 28px;
|
||
margin: 0;
|
||
background: none;
|
||
border: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
button {
|
||
min-height: 16px;
|
||
margin: 0;
|
||
padding-bottom: 0;
|
||
padding-top: 0;
|
||
color: mix($fg_color, $base_color, 90%);
|
||
background-image: none;
|
||
border-style: none none none solid;
|
||
border-radius: 0;
|
||
|
||
&:dir(rtl) { border-style: none solid none none; }
|
||
|
||
&:hover {
|
||
color: $fg_color;
|
||
background-color: $bg_color;
|
||
}
|
||
|
||
&:disabled,
|
||
&:backdrop:disabled {
|
||
color: transparentize($insensitive_fg_color, 0.7);
|
||
}
|
||
|
||
&:active {
|
||
background-color: $osd_bg_color;
|
||
color: $osd_fg_color;
|
||
}
|
||
|
||
&:backdrop {
|
||
color: $backdrop_fg_color;
|
||
background-color: transparent;
|
||
border-color: transparentize($backdrop_borders_color, 0.7);
|
||
}
|
||
|
||
&:backdrop:disabled {
|
||
background-image: none;
|
||
border-style: none none none solid; // It is needed or it gets overridden
|
||
|
||
&:dir(rtl) { border-style: none solid none none; }
|
||
}
|
||
}
|
||
}
|
||
|
||
// OSD horizontal
|
||
.osd &:not(.vertical) {
|
||
border-color: $osd_borders_color;
|
||
color: $fg_color;
|
||
box-shadow: none;
|
||
|
||
&:focus, &:active {
|
||
border-color: opacify($osd_borders_color,0.5);
|
||
box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
|
||
}
|
||
|
||
entry {
|
||
box-shadow: none;
|
||
color: $fg_color;
|
||
text-shadow: none;
|
||
&:focus, &:active {
|
||
box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
|
||
}
|
||
}
|
||
|
||
button {
|
||
@include button(undecorated);
|
||
|
||
color: $fg_color;
|
||
border-style: none none none solid;
|
||
border-color: transparentize($borders_color,0.8);
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
|
||
&:dir(rtl) { border-style: none solid none none; }
|
||
|
||
&:active {
|
||
background-color: $osd_bg_color;
|
||
color: $osd_fg_color;
|
||
}
|
||
&:hover {
|
||
@include button(undecorated);
|
||
|
||
border-style: none none none solid;
|
||
border-color: transparentize($borders_color,0.8);
|
||
background-color: transparentize($osd_fg_color, 0.9);
|
||
box-shadow: none;
|
||
}
|
||
|
||
&:backdrop {
|
||
@include button(undecorated);
|
||
|
||
color: $insensitive_fg_color;
|
||
border-color: transparentize($borders_color,0.9);
|
||
box-shadow: none;
|
||
border-style: none none none solid;
|
||
}
|
||
|
||
&:disabled {
|
||
//@include button(undecorated);
|
||
|
||
color: $insensitive_fg_color;
|
||
border-color: transparentize($borders_color,0.9);
|
||
border-style: none none none solid;
|
||
box-shadow: none;
|
||
}
|
||
|
||
&:last-child { border-radius: 0 3px 3px 0; }
|
||
|
||
&:dir(rtl):first-child { border-radius: 3px 0 0 3px; }
|
||
}
|
||
}
|
||
|
||
// 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
|
||
border-width: 2px;
|
||
border-color: $borders_color;
|
||
|
||
&:disabled { color: $insensitive_fg_color; }
|
||
&:backdrop:disabled { color: $insensitive_fg_color; }
|
||
|
||
&:drop(active) {
|
||
border-color: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
entry {
|
||
min-height: 32px;
|
||
min-width: 32px;
|
||
padding: 0;
|
||
border-radius: 0;
|
||
border-color: $borders_color;
|
||
}
|
||
|
||
button {
|
||
min-height: 32px;
|
||
min-width: 32px;
|
||
padding: 0;
|
||
|
||
&.up { @extend %top_button; }
|
||
|
||
&.down { @extend %bottom_button; }
|
||
}
|
||
|
||
%top_button {
|
||
border-radius: 3px 3px 0 0;
|
||
border-style: solid solid none solid;
|
||
}
|
||
|
||
%bottom_button {
|
||
border-radius: 0 0 3px 3px;
|
||
border-style: none solid solid solid;
|
||
}
|
||
}
|
||
|
||
// OSD vertical
|
||
.osd &.vertical button:first-child {
|
||
@include button(osd);
|
||
|
||
&:hover { @include button(osd-hover);}
|
||
|
||
&:active { @include button(osd-active); }
|
||
|
||
&:disabled { @include button(osd-insensitive); }
|
||
|
||
&:backdrop { @include button(osd-backdrop); }
|
||
}
|
||
|
||
// Misc
|
||
treeview & {
|
||
entry,
|
||
entry:focus {
|
||
padding: 1px;
|
||
border-width: 1px 0;
|
||
border-color: $selected_bg_color;
|
||
border-radius: 0;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
/**************
|
||
* ComboBoxes *
|
||
**************/
|
||
combobox {
|
||
arrow {
|
||
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
||
min-height: 16px;
|
||
min-width: 16px;
|
||
}
|
||
|
||
&.linked {
|
||
button:nth-child(2) {
|
||
&:dir(ltr) { @extend %linked:last-child; }
|
||
&:dir(rtl) { @extend %linked:first-child; }
|
||
}
|
||
}
|
||
|
||
&:drop(active) { // FIXME: untested
|
||
box-shadow: none;
|
||
|
||
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
|
||
// work, special case needed. See
|
||
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
|
||
|
||
&:dir(ltr),
|
||
&:dir(rtl) { @extend %linked_middle; } // specificity bump
|
||
}
|
||
|
||
.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; }
|
||
|
||
.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; }
|
||
|
||
|
||
/************
|
||
* Toolbars *
|
||
************/
|
||
toolbar { //FIXME: why is all this being ignored?
|
||
padding: 6px;
|
||
background-color: $bg_color;
|
||
&.osd {
|
||
background-color: $osd_bg_color;
|
||
border-radius: 6px;
|
||
padding: 12px;
|
||
& label { color: $osd_fg_color; }
|
||
}
|
||
//searchbar & inline-toolbar
|
||
&.inline-toolbar {
|
||
@extend %inset-bar;
|
||
border-width: 0 1px 1px;
|
||
padding: 3px;
|
||
border-radius: 0 0 4px 4px;
|
||
}
|
||
&.vertical {
|
||
border-right: 1px solid $borders_color;
|
||
&:dir(rtl) {
|
||
border-right: none;
|
||
border-left: 1px solid $borders_color;
|
||
}
|
||
}
|
||
}
|
||
|
||
searchbar > revealer > box {
|
||
@extend toolbar;
|
||
border-width: 0 0 1px;
|
||
border-color: $borders_color;
|
||
border-style: none none solid none;
|
||
|
||
// workaround: undo the GtkContainer:border-width and use CSS padding instead
|
||
margin: -6px;
|
||
padding: 9px;
|
||
}
|
||
|
||
%inset-bar {
|
||
border-style: solid;
|
||
border-color: $borders_color;
|
||
$_bg: mix($bg_color, $borders_color, 70%);
|
||
background-color: $_bg;
|
||
box-shadow: inset 0 2px 3px -1px mix($borders_color, $_bg, 60%);
|
||
//FIXME edge would be nice, but doesn't work
|
||
&:backdrop {
|
||
border-color: $backdrop_borders_color;
|
||
background-color: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
|
||
/***************
|
||
* Header bars *
|
||
***************/
|
||
|
||
%titlebar,
|
||
headerbar {
|
||
min-height: 46px;
|
||
border-width: 0 0 1px;
|
||
border-style: solid;
|
||
border-color: $borders_color;
|
||
border-radius: 7px 7px 0 0;
|
||
|
||
background-color: transparent;
|
||
background-image: linear-gradient(to bottom,
|
||
lighten($bg_color,4%),
|
||
$bg_color);
|
||
box-shadow: inset 0 -1px mix($borders_color, $bg_color, 30%), // bottom shade
|
||
inset 0 1px $borders_edge; // top highlight
|
||
padding: 6px;
|
||
|
||
&:backdrop {
|
||
border-color: $backdrop_borders_color;
|
||
background-color: $bg_color;
|
||
background-image: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.title {
|
||
font-weight: bold;
|
||
padding: 0px 12px;
|
||
}
|
||
.subtitle {
|
||
font-size: 80%;
|
||
padding: 0 12px;
|
||
}
|
||
|
||
&.selection-mode {
|
||
color: darken($selected_bg_color, 15%);
|
||
text-shadow: 0 1px transparentize(black, 0.5);
|
||
background-image: linear-gradient(to bottom,
|
||
lighten($selected_bg_color,5%),
|
||
lighten($selected_bg_color,2%));
|
||
box-shadow: inset 0 -1px mix($borders_color,$bg_color, 30%), //bottom shade
|
||
inset 0 1px mix($borders_edge,$selected_bg_color, 50%); //top highlight
|
||
button {
|
||
@include button(normal, $selected_bg_color, $selected_fg_color, $edge: none);
|
||
&:hover { @include button(hover, $selected_bg_color, $selected_fg_color, $edge: none); }
|
||
&:active { @include button(active, $selected_bg_color, $selected_fg_color, $edge: none); }
|
||
&:disabled { @include button(insensitive, $selected_bg_color, $selected_fg_color, $edge: none); }
|
||
&:backdrop {
|
||
@include button(backdrop, $selected_bg_color, $selected_fg_color, $edge: none);
|
||
border-color: darken($selected_bg_color, 15%);
|
||
}
|
||
&:backdrop:disabled { @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, $edge: none); }
|
||
&.suggested-action {
|
||
@include button($t:normal, $edge: none);
|
||
&:hover { @include button($t:hover,$edge: none); }
|
||
&:active { @include button($t:active, $edge: none); }
|
||
&:disabled { @include button($t:insensitive, $edge: none); }
|
||
&:backdrop { @include button($t:backdrop, $edge: none); }
|
||
&:backdrop:disabled { @include button($t:backdrop-insensitive, $edge: none); }
|
||
}
|
||
}
|
||
.selection-menu {
|
||
border-width: 0;
|
||
background-image: none;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
|
||
// squared corners when the window is maximized, tiled, or fullscreen
|
||
.tiled &,
|
||
.maximized &,
|
||
.fullscreen & {
|
||
border-radius: 0;
|
||
}
|
||
|
||
&.default-decoration {
|
||
min-height: 28px;
|
||
padding: 4px;
|
||
|
||
button.titlebutton {
|
||
min-height: 26px;
|
||
min-width: 26px;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
@extend %titlebar;
|
||
}
|
||
|
||
|
||
/************
|
||
* Pathbars *
|
||
************/
|
||
|
||
// GtkPathBar does not work with just .linked, so we must override that. But we
|
||
// can’t simply remove .linked from the widget as that might break other themes.
|
||
// Note also we select on filechooser to avoid interfering with NautilusPathBar.
|
||
filechooser .path-bar.linked > button {
|
||
@extend %linked_flippable;
|
||
}
|
||
|
||
.path-bar button {
|
||
padding: 5px 6px 6px;
|
||
&:first-child { padding-left: 8px; }
|
||
&:last-child { padding-right: 8px; }
|
||
&:only-child {
|
||
padding-left: 12px;
|
||
padding-right: 12px;
|
||
}
|
||
|
||
// the following is for spacing the icon and the label inside the home button
|
||
& label:last-child { padding-left: 2px; }
|
||
& label:first-child { padding-right: 2px; }
|
||
& label:only-child { padding-right: 0; padding-left: 0; }
|
||
image { padding-top: 1px; }
|
||
}
|
||
|
||
|
||
/**************
|
||
* Tree Views *
|
||
**************/
|
||
treeview.view {
|
||
-GtkTreeView-grid-line-width: 1;
|
||
-GtkTreeView-grid-line-pattern: '';
|
||
-GtkTreeView-tree-line-width: 1;
|
||
-GtkTreeView-tree-line-pattern: '';
|
||
-GtkTreeView-expander-size: 24;
|
||
|
||
border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color,
|
||
border-top-color: $bg_color; // while this is the grid lines color, better then nothing
|
||
|
||
& rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
|
||
|
||
&:selected {
|
||
border-radius: 0;
|
||
@extend %selected_items;
|
||
}
|
||
|
||
&:selected, &:backdrop:selected {
|
||
border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
|
||
border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly
|
||
}
|
||
|
||
&:disabled {
|
||
color: $insensitive_fg_color;
|
||
&:selected {
|
||
color: mix($selected_fg_color, $selected_bg_color, 40%);
|
||
&:backdrop { color: mix($selected_fg_color, $selected_bg_color, 50%); }
|
||
}
|
||
&:backdrop { color: $insensitive_fg_color; }
|
||
}
|
||
|
||
&.separator:backdrop {
|
||
min-height: 2px;
|
||
color: transparentize(black, 0.9);
|
||
}
|
||
|
||
&:backdrop {
|
||
color: $backdrop_fg_color;
|
||
border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
|
||
border-top: $backdrop_bg_color;
|
||
}
|
||
|
||
&.dnd {
|
||
border-style: solid none;
|
||
border-width: 1px;
|
||
border-color: mix($fg_color, $selected_bg_color, 50%);
|
||
}
|
||
|
||
&.expander {
|
||
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
||
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
||
color: mix($fg_color, $base_color, 70%);
|
||
&:hover { color: $fg_color; }
|
||
&:selected {
|
||
color: mix($selected_fg_color, $selected_bg_color, 70%);
|
||
&:hover { color: $selected_fg_color; }
|
||
&:backdrop { color: mix($selected_fg_color, $selected_bg_color, 70%); }
|
||
}
|
||
|
||
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
||
|
||
&:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); }
|
||
}
|
||
|
||
&.progressbar { // progress bar in treeviews
|
||
color: $base_color;
|
||
|
||
border: 1px solid $selected_borders_color;
|
||
border-radius: 4px;
|
||
background-color: $fg_color;
|
||
|
||
&:selected { color: $selected_bg_color; }
|
||
|
||
&:backdrop {
|
||
color: $selected_bg_color;
|
||
border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?)
|
||
background-color: $backdrop_base_color;
|
||
}
|
||
}
|
||
|
||
&.trough { // progress bar trough in treeviews
|
||
background-color: transparentize($fg_color,0.9);
|
||
border-radius: 4px;
|
||
|
||
&:selected {
|
||
background-color: transparentize($selected_fg_color, 0.7);
|
||
border-width: 1px 0;
|
||
border-style: solid;
|
||
border-color: $selected_bg_color;
|
||
}
|
||
}
|
||
|
||
header {
|
||
button {
|
||
@extend %column_header_button;
|
||
$_column_header_color: mix($fg_color,$base_color,50%);
|
||
color: $_column_header_color;
|
||
font-weight: bold;
|
||
text-shadow: none;
|
||
box-shadow: none;
|
||
&:hover {
|
||
@extend %column_header_button;
|
||
color: mix($_column_header_color,$fg_color,50%);
|
||
box-shadow: none;
|
||
}
|
||
&:active {
|
||
@extend %column_header_button;
|
||
color: $selected_fg_color;
|
||
}
|
||
}
|
||
& button:last-child,
|
||
& button:last-child:hover,
|
||
& button:last-child:backdrop { //treeview-like derived widgets in Banshee and Evolution
|
||
border-right-style: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
%column_header_button {
|
||
padding: 3px 6px;
|
||
border-style: none solid solid none;
|
||
border-radius: 0;
|
||
border-width: 1px;
|
||
background-image: none;
|
||
border-color: mix($backdrop_fg_color, $backdrop_bg_color,50%);
|
||
text-shadow: none;
|
||
&:disabled {
|
||
border-color: $bg_color;
|
||
background-image: none;
|
||
}
|
||
&:backdrop {
|
||
border-color: mix($backdrop_fg_color, $backdrop_bg_color,50%);
|
||
border-style: none solid solid none;
|
||
color: mix($backdrop_fg_color, $backdrop_bg_color,50%);
|
||
background-image: none;
|
||
background-color: $backdrop_base_color;
|
||
&:disabled {
|
||
border-color: $backdrop_bg_color;
|
||
background-image: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
treeview.view.progressbar { //Progressbar in treeview cells
|
||
color: $base_color;
|
||
border-radius: 4px;
|
||
background-image: linear-gradient(to bottom,
|
||
$selected_bg_color,
|
||
darken($selected_bg_color,10%));
|
||
&:selected {
|
||
color: $selected_bg_color;
|
||
background-image: linear-gradient(to bottom,
|
||
$base_color,
|
||
darken($base_color,10%));
|
||
&:backdrop {
|
||
color: $selected_bg_color;
|
||
background-image: none;
|
||
background-color: $backdrop_base_color;
|
||
}
|
||
}
|
||
&:backdrop {
|
||
color: $backdrop_base_color;
|
||
background-image: none;
|
||
}
|
||
}
|
||
|
||
/*********
|
||
* Menus *
|
||
*********/
|
||
menubar,
|
||
.menubar {
|
||
padding: 0px;
|
||
box-shadow: inset 0 -1px $borders_color;
|
||
& > menuitem {
|
||
padding: 4px 8px;
|
||
&:hover { //Seems like it :hover even with keyboard focus
|
||
box-shadow: inset 0 -3px $selected_bg_color;
|
||
color: $selected_bg_color;
|
||
}
|
||
&:disabled {
|
||
color: $insensitive_fg_color;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
menu,
|
||
.menu {
|
||
margin: 4px;
|
||
padding: 0px;
|
||
background-color: $base_color;
|
||
border: 1px solid $borders_color;
|
||
& menuitem {
|
||
text-shadow: none;
|
||
padding: 4px;
|
||
min-width: 40px;
|
||
&:hover {
|
||
color: $selected_fg_color;
|
||
background-color: $selected_bg_color;
|
||
}
|
||
&:disabled {
|
||
color: $insensitive_fg_color;
|
||
&:backdrop { color: $insensitive_fg_color; }
|
||
}
|
||
&:backdrop, &:backdrop:hover {
|
||
color: $backdrop_fg_color;
|
||
background-color: $backdrop_base_color;
|
||
}
|
||
//submenu indicators
|
||
& arrow {
|
||
min-height: 16px;
|
||
min-width: 16px;
|
||
}
|
||
& arrow:dir(ltr) {
|
||
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
||
margin-left: 10px;
|
||
}
|
||
& arrow:dir(rtl) {
|
||
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl');
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
menuitem {
|
||
& check,
|
||
& radio {
|
||
min-height: 16px;
|
||
min-width: 16px;
|
||
&:dir(ltr) { margin-right: 7px; }
|
||
&:dir(rtl) { margin-left: 7px; }
|
||
}
|
||
}
|
||
|
||
/***************
|
||
* Popovers *
|
||
***************/
|
||
|
||
popover.background {
|
||
padding: 2px;
|
||
border-radius: 5px;
|
||
background-color: $popover_bg_color;
|
||
|
||
&, .csd & { border: 1px solid $borders_color; }
|
||
|
||
box-shadow: 0 1px 2px transparentize(black, 0.7);
|
||
|
||
&:backdrop {
|
||
background-color: $backdrop_bg_color;
|
||
box-shadow: none;
|
||
}
|
||
|
||
> list,
|
||
> .view,
|
||
> toolbar {
|
||
border-style: none;
|
||
background-color: transparent;
|
||
}
|
||
|
||
&, .csd & {
|
||
&.touch-selection,
|
||
&.magnifier {
|
||
@extend %osd;
|
||
|
||
border: 1px solid transparentize(white, 0.9);
|
||
|
||
button { @extend %osd_button };
|
||
}
|
||
|
||
&.osd { @extend %osd; }
|
||
}
|
||
|
||
separator { margin: 3px; }
|
||
|
||
list separator { margin: 0px; }
|
||
|
||
checkbutton,
|
||
radiobutton { @extend modelbutton.flat; }
|
||
}
|
||
|
||
/*****************
|
||
* Notebooks and *
|
||
* Tabs *
|
||
*****************/
|
||
|
||
notebook {
|
||
// Through me you go to the grief wracked city;
|
||
// Through me you go to everlasting pain;
|
||
// Through me you go a pass among lost souls.
|
||
// ...
|
||
// Abandon all hope — Ye Who Enter Here
|
||
padding: 0;
|
||
background-color: $base_color;
|
||
transition: all 200ms ease-out;
|
||
&:backdrop {
|
||
background-color: $backdrop_base_color;
|
||
}
|
||
&.frame {
|
||
border: 1px solid $borders_color;
|
||
&:backdrop { border-color: $backdrop_borders_color; }
|
||
}
|
||
& header {
|
||
// FIXME: double borders in some case, can't fix it w/o a class tho
|
||
// FIXME: doesn't work on dark var
|
||
background-color: mix($bg_color, $borders_color, 70%);
|
||
|
||
// this is the shading of the header behind the tabs
|
||
.frame & {
|
||
border: 1px solid $borders_color;
|
||
&.top { border-bottom-width: 0; }
|
||
&.bottom { border-top-width: 0; }
|
||
&.right { border-left-width: 0; }
|
||
&.left { border-right-width: 0; }
|
||
&:backdrop { border-color: $backdrop_borders_color; }
|
||
}
|
||
|
||
$_header_shade: inset 0 2px 3px -1px transparentize(black, 0.85);
|
||
&.top {
|
||
box-shadow: $_header_shade,
|
||
inset 0 -1px $borders_color; // border
|
||
&:backdrop { box-shadow: inset 0 -1px $backdrop_borders_color; }
|
||
}
|
||
&.bottom {
|
||
box-shadow: $_header_shade,
|
||
inset 0 1px $borders_color;
|
||
&:backdrop { box-shadow: inset 0 1px $backdrop_borders_color; }
|
||
}
|
||
&.right {
|
||
box-shadow: $_header_shade,
|
||
inset 1px 0 $borders_color;
|
||
&:backdrop { box-shadow: inset 1px 0 $backdrop_borders_color; }
|
||
}
|
||
&.left {
|
||
box-shadow: $_header_shade,
|
||
inset -1px 0 $borders_color;
|
||
&:backdrop { box-shadow: inset -1px 0 $backdrop_borders_color; }
|
||
}
|
||
&:backdrop {
|
||
// same color as backdrop pushed button
|
||
background-color: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
|
||
box-shadow: none;
|
||
}
|
||
& tabs arrow {
|
||
color: $insensitive_fg_color;
|
||
&:hover { color: mix($fg_color, $insensitive_fg_color, 50%); }
|
||
&:checked { color: $fg_color; }
|
||
&:disabled { color: transparentize($insensitive_fg_color,0.7); }
|
||
&:backdrop { color: transparentize($backdrop_fg_color,0.6); }
|
||
}
|
||
}
|
||
//vertical tab sizing
|
||
$vt_vpadding: 8px;
|
||
$vt_hpadding: 20px;
|
||
// horizontal tab sizing
|
||
$ht_vpadding: 5px;
|
||
$ht_hpadding: 20px;
|
||
$tab_indicator_size: 3px;
|
||
|
||
& header.top tab {
|
||
padding: $vt_vpadding $vt_hpadding;
|
||
border-bottom-width: $tab_indicator_size;
|
||
&.reorderable-page {
|
||
padding-left: 12px; // for a nicer close button
|
||
padding-right: 12px; // placement
|
||
border-left-width: 1px;
|
||
border-right-width: 1px;
|
||
}
|
||
}
|
||
& header.bottom tab {
|
||
padding: $vt_vpadding $vt_hpadding;
|
||
border-top-width: $tab_indicator_size;
|
||
&.reorderable-page {
|
||
padding-left: 12px; // for a nicer close button
|
||
padding-right: 12px; // placement
|
||
border-left-width: 1px;
|
||
border-right-width: 1px;
|
||
}
|
||
}
|
||
& header.left tab {
|
||
padding: $ht_vpadding $ht_hpadding;
|
||
border-right-width: $tab_indicator_size;
|
||
&.reorderable-page {
|
||
border-bottom-width: 1px;
|
||
border-top-width: 1px;
|
||
}
|
||
}
|
||
& header.right tab {
|
||
padding: $ht_vpadding $ht_hpadding;
|
||
border-left-width: $tab_indicator_size;
|
||
&.reorderable-page {
|
||
border-bottom-width: 1px;
|
||
border-top-width: 1px;
|
||
}
|
||
}
|
||
|
||
& tab {
|
||
border-width: 0;
|
||
border-style: solid;
|
||
border-color: transparent;
|
||
background-color: transparent;
|
||
|
||
outline-offset: 0;
|
||
|
||
//here's the interesting stuff
|
||
&:hover {
|
||
border-color: $borders_color;
|
||
}
|
||
&:checked, &:backdrop:checked {
|
||
border-color: $selected_bg_color;
|
||
}
|
||
&:backdrop {
|
||
background-color: transparent;
|
||
border-color: transparent;
|
||
}
|
||
@each $_tab, $_border in (top, bottom),
|
||
(bottom, top),
|
||
(left, right),
|
||
(right, left) {
|
||
.#{$_tab} &.reorderable-page {
|
||
border-color: transparent;
|
||
&:hover {
|
||
border-color: transparentize($borders_color,0.7);
|
||
border-#{$_border}-color: $borders_color;
|
||
background-color: transparentize($bg_color,0.8);
|
||
}
|
||
&:checked {
|
||
background-color: transparentize($bg_color,0.5);
|
||
border-color: transparentize($borders_color,0.5);
|
||
border-#{$_border}-color: $selected_bg_color;
|
||
&:hover { background-color: transparentize($bg_color,0.3); }
|
||
&:backdrop {
|
||
border-color: $backdrop_borders_color;
|
||
background-color: $backdrop_bg_color;
|
||
border-#{$_border}-color: $selected_bg_color;
|
||
}
|
||
}
|
||
&:backdrop {
|
||
border-color: transparent;
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
}
|
||
label { //tab text
|
||
padding: 0 2px; // needed for a nicer focus ring
|
||
font-weight: bold;
|
||
color: $insensitive_fg_color; /* color: inherit doesn't work here */
|
||
&:backdrop {
|
||
color: $insensitive_fg_color;
|
||
}
|
||
}
|
||
&:hover label {
|
||
// prelight tab text
|
||
color: mix($fg_color, $insensitive_fg_color, 50%);
|
||
}
|
||
&:checked label {
|
||
// active tab text
|
||
color: $fg_color;
|
||
&:backdrop { color: $backdrop_fg_color; }
|
||
}
|
||
button { //tab close button
|
||
border: 2px solid transparent;
|
||
@extend %undecorated_button;
|
||
-gtk-icon-shadow: none;
|
||
transition: none;
|
||
color: transparentize($fg_color,0.7);
|
||
&:hover {
|
||
color: $fg_color;
|
||
@include button(hover, $edge: none);
|
||
border-width: 2px;
|
||
background-image: none;
|
||
box-shadow: none;
|
||
}
|
||
&:checked {
|
||
@include button(active, $edge: none);
|
||
border-width: 2px;
|
||
}
|
||
&:backdrop, &:backdrop:hover {
|
||
color: transparentize($backdrop_fg_color,0.7);
|
||
border-color: transparent;
|
||
border-width: 2px;
|
||
}
|
||
& > image { // this is a hack which makes tabs grow
|
||
padding: 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//.notebook > .frame,
|
||
//.notebook > .view { border: none; }
|
||
|
||
/**************
|
||
* Scrollbars *
|
||
**************/
|
||
scrollbar {
|
||
$_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;
|
||
border-color: $backdrop_borders_color;
|
||
}
|
||
|
||
// slider
|
||
slider {
|
||
min-width: 14px;
|
||
min-height: 14px;
|
||
margin: -1px;
|
||
border: 4px solid transparent;
|
||
border-radius: 12px;
|
||
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;
|
||
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;
|
||
min-width: $_slider_min_length;
|
||
}
|
||
|
||
button {
|
||
margin: 1px 2px;
|
||
min-width: 5px;
|
||
}
|
||
}
|
||
|
||
&.vertical {
|
||
slider {
|
||
margin: 2px 0;
|
||
min-height: $_slider_min_length;
|
||
}
|
||
|
||
button {
|
||
margin: 2px 1px;
|
||
min-height: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.dragging,
|
||
&.hovering { opacity: 0.8; }
|
||
}
|
||
|
||
&.horizontal slider { min-width: $_slider_min_length; }
|
||
|
||
&.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);
|
||
|
||
color: $scrollbar_slider_color;
|
||
|
||
&:hover {
|
||
@include button(undecorated);
|
||
|
||
color: $scrollbar_slider_hover_color;
|
||
}
|
||
&:active, &:checked {
|
||
@include button(undecorated);
|
||
|
||
color: $scrollbar_slider_active_color;
|
||
}
|
||
&:disabled {
|
||
@include button(undecorated);
|
||
|
||
color: transparentize($scrollbar_slider_color, 0.8);
|
||
}
|
||
&:backdrop {
|
||
@include button(undecorated);
|
||
|
||
color: $backdrop_scrollbar_slider_color;
|
||
|
||
&:disabled {
|
||
@include button(undecorated);
|
||
|
||
color: transparentize($backdrop_scrollbar_slider_color, 0.8);
|
||
}
|
||
}
|
||
}
|
||
|
||
// button icons
|
||
&.vertical {
|
||
button {
|
||
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
||
|
||
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
|
||
}
|
||
}
|
||
|
||
&.horizontal {
|
||
button {
|
||
&.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
|
||
|
||
&.up { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
|
||
}
|
||
}
|
||
}
|
||
|
||
treeview ~ scrollbar.vertical {
|
||
border-top: 1px solid $borders_color;
|
||
margin-top: -1px;
|
||
}
|
||
|
||
/**********
|
||
* Switch *
|
||
**********/
|
||
|
||
switch {
|
||
font-size: smaller;
|
||
font-stretch: condensed;
|
||
font-weight: bold;
|
||
outline-offset: -4px;
|
||
// similar to the .scale
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-radius: 3px;
|
||
border-color: $borders_color;
|
||
background-color: $dark_fill;
|
||
box-shadow: inset 0 1px transparentize(black, 0.9); /*outset not working*/
|
||
text-shadow: 0 1px transparentize(black, 0.9);
|
||
&:active {
|
||
color: $selected_fg_color;
|
||
border-color: $selected_borders_color;
|
||
background-color: $selected_bg_color;
|
||
text-shadow: 0 0 2px white;
|
||
}
|
||
&:disabled {
|
||
color: $insensitive_fg_color;
|
||
border-color: $borders_color;
|
||
background-color: $insensitive_bg_color;
|
||
text-shadow: none;
|
||
}
|
||
&:backdrop {
|
||
color: $backdrop_fg_color;
|
||
border-color: $backdrop_borders_color;
|
||
background-color: $backdrop_bg_color;
|
||
box-shadow: none;
|
||
text-shadow: none;
|
||
&:checked {
|
||
color: $selected_fg_color;
|
||
border-color: $backdrop_borders_color;
|
||
background-color: $backdrop_borders_color;
|
||
box-shadow: none;
|
||
}
|
||
&:disabled, &:disabled:checked {
|
||
background-color: $insensitive_bg_color;
|
||
color: $insensitive_fg_color;
|
||
border-color: $insensitive_fg_color;
|
||
}
|
||
}
|
||
|
||
slider {
|
||
margin: -1px;
|
||
min-width: 45px;
|
||
min-height: 27px;
|
||
border: 2px solid;
|
||
border-radius: 3px;
|
||
@include button(normal);
|
||
}
|
||
|
||
&:hover slider { @include button(hover); }
|
||
|
||
&:checked slider { border: 2px solid $selected_borders_color; }
|
||
|
||
&:disabled slider { @include button(insensitive); }
|
||
|
||
&:backdrop {
|
||
slider { @include button(backdrop); }
|
||
|
||
&:checked slider { border-color: if($variant == 'light', $selected_bg_color, $selected_borders_color); }
|
||
|
||
&:disabled slider { @include button(backdrop-insensitive); }
|
||
}
|
||
}
|
||
|
||
/*************************
|
||
* 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
|
||
|
||
|
||
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; }
|
||
}
|
||
|
||
&:disabled {
|
||
&:active, &:indeterminate, & {
|
||
// set insensitive color, which is overriden otherwise
|
||
color: $insensitive_fg_color;
|
||
|
||
&:backdrop { color: $insensitive_fg_color; }
|
||
}
|
||
}
|
||
}
|
||
|
||
check,
|
||
radio {
|
||
margin: 0 4px;
|
||
|
||
&:only-child { margin: 0; }
|
||
|
||
min-height: 14px;
|
||
min-width: 14px;
|
||
border: 1px solid;
|
||
-gtk-icon-source: none;
|
||
|
||
@include button(normal);
|
||
|
||
&:hover { @include button(hover); }
|
||
&:active { @include button(active); }
|
||
&:disabled { @include button(insensitive); }
|
||
&:backdrop {
|
||
@include button(backdrop);
|
||
|
||
&: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; }
|
||
}
|
||
|
||
.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;
|
||
animation: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
%check,
|
||
check {
|
||
border-radius: 3px;
|
||
|
||
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")),
|
||
-gtk-recolor(url("assets/check-symbolic.symbolic.png"))); }
|
||
|
||
&: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%;
|
||
|
||
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/bullet-symbolic.svg")),
|
||
-gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))); }
|
||
|
||
&:indeterminate { -gtk-icon-source: image(-gtk-recolor(url("assets/dash-symbolic.svg")),
|
||
-gtk-recolor(url("assets/dash-symbolic.symbolic.png"))); }
|
||
}
|
||
|
||
// let's animate things
|
||
@keyframes check_check {
|
||
from { -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
|
||
to { -gtk-icon-transform: unset; }
|
||
}
|
||
|
||
@keyframes check_radio {
|
||
from { -gtk-icon-transform: scale(0); }
|
||
to { -gtk-icon-transform: unset; }
|
||
}
|
||
|
||
@keyframes check_indeterminate {
|
||
from { -gtk-icon-transform: scale(0, 1); }
|
||
to { -gtk-icon-transform: unset; }
|
||
}
|
||
|
||
check:not(:indeterminate):checked { animation: check_check 400ms; }
|
||
|
||
radio:not(:indeterminate):checked { animation: check_radio 400ms; }
|
||
|
||
check:indeterminate:checked, radio:indeterminate:checked { animation: check_indeterminate 400ms; }
|
||
|
||
// no animations in menus
|
||
menu menuitem {
|
||
check:not(:indeterminate):checked,
|
||
radio:not(:indeterminate):checked,
|
||
check:indeterminate:checked:active,
|
||
radio:indeterminate:checked { animation: none; }
|
||
}
|
||
|
||
|
||
// treeview stuff, let's the fun begin:
|
||
treeview.view check:selected {
|
||
&:focus, &:backdrop, & {
|
||
&:disabled, & {
|
||
@extend %check;
|
||
}
|
||
}
|
||
}
|
||
|
||
treeview.view radio:selected {
|
||
&:focus, &:backdrop, & {
|
||
&:disabled, & {
|
||
@extend %radio;
|
||
}
|
||
}
|
||
}
|
||
|
||
treeview.view check,
|
||
treeview.view radio {
|
||
&:selected {
|
||
&:focus, &:hover, & { color: $selected_fg_color; }
|
||
|
||
&:backdrop {
|
||
&:hover, & {
|
||
color: $selected_fg_color;
|
||
border-color: $selected_fg_color;
|
||
}
|
||
|
||
&:disabled {
|
||
color: $insensitive_fg_color;
|
||
border-color: $insensitive_fg_color;
|
||
}
|
||
}
|
||
|
||
&:disabled { color: $insensitive_fg_color;}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
/************
|
||
* GtkScale *
|
||
************/
|
||
%scale_trough {
|
||
border: 2px solid $borders_color;
|
||
border-radius: 4px;
|
||
background-color: $dark_fill;
|
||
box-shadow: none;
|
||
|
||
&:disabled {
|
||
border-color: $insensitive_borders_color;
|
||
background-color: $insensitive_bg_color;
|
||
}
|
||
|
||
&:backdrop {
|
||
background-color: $backdrop_dark_fill;
|
||
border-color: $backdrop_borders_color;
|
||
|
||
&:disabled { background-color: $insensitive_bg_color; border-color: $insensitive_borders_color; }
|
||
}
|
||
|
||
// ...on selected list rows
|
||
row:selected & {
|
||
&, &:disabled { border-color: $selected_borders_color; }
|
||
}
|
||
|
||
// OSD
|
||
.osd & {
|
||
border-color: $osd_borders_color;
|
||
background-color: transparentize($osd_borders_color, 0.2);
|
||
box-shadow: none;
|
||
|
||
&:disabled { background-color: $insensitive_bg_color; }
|
||
}
|
||
}
|
||
|
||
%scale_highlight {
|
||
border: 2px solid $selected_borders_color;
|
||
border-radius: 4px;
|
||
background-color: $selected_bg_color;
|
||
|
||
&:disabled {
|
||
background-color: transparent;
|
||
border-color: transparent;
|
||
}
|
||
|
||
&:backdrop {
|
||
border-color: $backdrop_dark_fill;
|
||
&:disabled {
|
||
background-color: transparent;
|
||
border-color: transparent;
|
||
}
|
||
}
|
||
|
||
// ...on selected list rows
|
||
row:selected & { &, &:disabled { border-color: $selected_borders_color; } }
|
||
|
||
// OSD
|
||
.osd & {
|
||
border-color: $osd_borders_color;
|
||
|
||
&:disabled { border-color: transparent; }
|
||
}
|
||
}
|
||
|
||
scale {
|
||
// sizing
|
||
|
||
$_marks_length: 6px;
|
||
$_marks_distance: 6px;
|
||
|
||
min-height: 10px;
|
||
min-width: 10px;
|
||
padding: 12px;
|
||
|
||
fill,
|
||
highlight { margin: -1px; }
|
||
|
||
slider {
|
||
min-height: 18px;
|
||
min-width: 18px;
|
||
margin: -9px;
|
||
}
|
||
|
||
&.fine-tune {
|
||
&.horizontal {
|
||
padding-top: 9px;
|
||
padding-bottom: 9px;
|
||
min-height: 16px;
|
||
}
|
||
|
||
&.vertical {
|
||
padding-left: 9px;
|
||
padding-right: 9px;
|
||
min-width: 16px;
|
||
}
|
||
|
||
slider { margin: -6px; }
|
||
|
||
fill,
|
||
highlight,
|
||
trough {
|
||
border-radius: 5px;
|
||
-gtk-outline-radius: 7px;
|
||
}
|
||
}
|
||
|
||
// the backing bit
|
||
trough {
|
||
@extend %scale_trough;
|
||
|
||
outline-offset: 2px;
|
||
-gtk-outline-radius: 5px;
|
||
}
|
||
|
||
// the colored part of the backing bit
|
||
highlight { @extend %scale_highlight; }
|
||
|
||
// 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;
|
||
|
||
&, &:backdrop {
|
||
background-color: $borders_color;
|
||
box-shadow: none;
|
||
}
|
||
|
||
&:disabled {
|
||
&, &:backdrop {
|
||
border-color: transparent;
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
|
||
// OSD
|
||
.osd & {
|
||
background-color: mix($osd_fg_color, $osd_borders_color, 25%);
|
||
|
||
&:disabled {
|
||
&, &:backdrop {
|
||
border-color: transparent;
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
slider {
|
||
@include button(normal);
|
||
|
||
border: 2px solid $borders_color;
|
||
border-radius: 100%;
|
||
|
||
&:hover { @include button(hover); }
|
||
|
||
&:active { border-color: $selected_borders_color; }
|
||
|
||
&:disabled { @include button (insensitive); }
|
||
|
||
&:backdrop {
|
||
@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: $osd_borders_color;
|
||
background-color: opacify($osd_bg_color, 1); // solid background needed here
|
||
|
||
&:hover { @include button(osd-hover); }
|
||
|
||
&:active { @include button(osd-active); }
|
||
|
||
&:disabled { @include button(osd-insensitive); }
|
||
|
||
&:backdrop {
|
||
@include button(osd-backdrop);
|
||
|
||
&:disabled { @include button(osd-backdrop-insensitive); }
|
||
}
|
||
}
|
||
}
|
||
|
||
value { color: gtkalpha(currentColor, 0.4); }
|
||
|
||
marks {
|
||
color: gtkalpha(currentColor, 0.4);
|
||
|
||
@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_length);
|
||
}
|
||
}
|
||
}
|
||
|
||
&.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} {
|
||
margin-#{$marks_margin}: $_marks_distance;
|
||
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 3px);
|
||
}
|
||
}
|
||
}
|
||
&.horizontal {
|
||
indicator {
|
||
min-height: $_marks_length;
|
||
min-width: 1px;
|
||
}
|
||
|
||
&.fine-tune indicator { min-height: ($_marks_length - 3px); }
|
||
}
|
||
&.vertical {
|
||
indicator {
|
||
min-height: 1px;
|
||
min-width: $_marks_length;
|
||
}
|
||
|
||
&.fine-tune indicator { min-width: ($_marks_length - 3px); }
|
||
}
|
||
}
|
||
|
||
|
||
/*****************
|
||
* Progress bars *
|
||
*****************/
|
||
|
||
//FIXME it's a wip ok?
|
||
|
||
progressbar {
|
||
padding: 0;
|
||
font-size: 83%;
|
||
color: $fg_color;
|
||
|
||
&:backdrop {
|
||
color: $insensitive_fg_color;
|
||
}
|
||
|
||
trough {
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-radius: 3px;
|
||
border-color: $borders_color;
|
||
background-color: mix($borders_color,$bg_color, 35%);
|
||
box-shadow: inset 1px 1px transparentize(black, 0.9);
|
||
&:backdrop {
|
||
border-color: $backdrop_borders_color;
|
||
background-color: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
|
||
box-shadow: 0 1px transparentize(white,1);
|
||
}
|
||
}
|
||
&.osd trough {
|
||
background-color: transparent;
|
||
box-shadow: none;
|
||
border-width: 0;
|
||
//FIXME: there is a margin on top
|
||
}
|
||
}
|
||
|
||
// moving bit
|
||
progressbar {
|
||
&.horizontal {
|
||
trough, progress { min-height: 2px; }
|
||
}
|
||
&.vertical {
|
||
trough, progress { min-width: 2px; }
|
||
}
|
||
& progress {
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-radius: 3px;
|
||
border-color: $selected_borders_color;
|
||
background-color: $selected_bg_color;
|
||
// I really prefer these flat w/o this shadow - Lapo
|
||
box-shadow: inset 0 1px 0 transparentize($borders_edge,0.8);
|
||
&.vertical {
|
||
box-shadow: inset 1px 0 0 transparentize($borders_edge,0.8);
|
||
}
|
||
&:backdrop {
|
||
border-color: $selected_bg_color;
|
||
background-color: $selected_bg_color;
|
||
box-shadow: none;
|
||
}
|
||
&.osd {
|
||
border-width: 0;
|
||
border-radius: 0;
|
||
}
|
||
}
|
||
trough.empty progress { all: unset; } // make the progress indicator disappear when the fraction is 0
|
||
}
|
||
|
||
/*************
|
||
* Level Bar *
|
||
*************/
|
||
|
||
levelbar {
|
||
& trough {
|
||
// FIXME: outset not working
|
||
padding: 2px;
|
||
border-radius: 3px;
|
||
@include entry(normal);
|
||
&:backdrop {
|
||
@include entry(backdrop);
|
||
}
|
||
}
|
||
|
||
&.horizontal {
|
||
block {
|
||
min-height: 1px;
|
||
}
|
||
|
||
&.discrete block {
|
||
margin: 0 1px;
|
||
min-width: 32px;
|
||
}
|
||
}
|
||
|
||
&.vertical {
|
||
block {
|
||
min-width: 1px;
|
||
}
|
||
|
||
&.discrete block {
|
||
margin: 1px 0;
|
||
min-height: 32px;
|
||
}
|
||
}
|
||
|
||
& block.filled.low {
|
||
border-color: darken($warning_color,10%);
|
||
background-color: $warning_color;
|
||
&:backdrop { border-color: $warning_color; };
|
||
}
|
||
& block.filled.high {
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: darken($selected_bg_color,10%);
|
||
background-color: $selected_bg_color;
|
||
box-shadow: 0 1px transparentize(black, 0.9);
|
||
border-radius: 1px;
|
||
&:backdrop {
|
||
border-color: $selected_bg_color;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
& block.filled.full {
|
||
border-color: darken($success_color,10%);
|
||
background-color: $success_color;
|
||
&:backdrop { border-color: $success_color; }
|
||
}
|
||
& block.empty {
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
background-color: transparent;
|
||
border-color: transparentize($fg_color,0.8);
|
||
border-radius: 1px;
|
||
box-shadow: none;
|
||
&:backdrop { border-color: transparentize($backdrop_fg_color,0.85); }
|
||
}
|
||
}
|
||
|
||
|
||
// catch all extend :)
|
||
|
||
%selected_items {
|
||
background-color: $selected_bg_color;
|
||
color: $selected_fg_color;
|
||
&:backdrop { background-color: $borders_color; color: $selected_fg_color; }
|
||
}
|
||
|
||
.monospace { font-family: monospace; }
|
||
|
||
|
||
/**********
|
||
* frames *
|
||
**********/
|
||
frame > border,
|
||
.frame {
|
||
border: 1px solid $borders_color;
|
||
&.flat { border-style: none; }
|
||
&:backdrop { border-color: $backdrop_borders_color; }
|
||
padding: 0;
|
||
}
|
||
|
||
actionbar > revealer > box {
|
||
padding: 6px;
|
||
border-width: 1px 0 0;
|
||
border-color: $borders_color;
|
||
border-style: solid none none;
|
||
}
|
||
|
||
placessidebar,
|
||
scrolledwindow {
|
||
.frame { border-radius: 2px; }
|
||
viewport.frame { // avoid double borders when viewport inside scrolled window
|
||
border-style: none;
|
||
}
|
||
// This is used when content is touch-dragged past boundaries.
|
||
overshoot {
|
||
&.top {
|
||
@include overshoot(top);
|
||
&:backdrop { @include overshoot(top, backdrop); }
|
||
}
|
||
&.bottom {
|
||
@include overshoot(bottom);
|
||
&:backdrop { @include overshoot(bottom, backdrop); }
|
||
}
|
||
&.left {
|
||
@include overshoot(left);
|
||
&:backdrop { @include overshoot(left, backdrop); }
|
||
}
|
||
&.right {
|
||
@include overshoot(right);
|
||
&:backdrop { @include overshoot(right, backdrop); }
|
||
}
|
||
}
|
||
|
||
// works similarly to the overshoot, the size if fixed tho.
|
||
undershoot {
|
||
&.top {
|
||
@include undershoot(top);
|
||
}
|
||
&.bottom {
|
||
@include undershoot(bottom);
|
||
}
|
||
&.left {
|
||
@include undershoot(left);
|
||
}
|
||
&.right {
|
||
@include undershoot(right);
|
||
}
|
||
}
|
||
|
||
junction { // the small square between two scrollbars
|
||
border-color: transparent;
|
||
background-color: darken($bg_color, 5%);
|
||
&:backdrop { background-color: transparent; }
|
||
}
|
||
|
||
}
|
||
|
||
//vbox and hbox separators
|
||
separator {
|
||
background: $borders_color;
|
||
min-width: 1px;
|
||
min-height: 1px;
|
||
}
|
||
|
||
/*********
|
||
* Lists *
|
||
*********/
|
||
|
||
list {
|
||
background-color: $base_color;
|
||
border-color: $borders_color;
|
||
&:backdrop {
|
||
background-color: $backdrop_base_color;
|
||
border-color: $backdrop_borders_color;
|
||
}
|
||
& row {
|
||
padding: 2px;
|
||
}
|
||
}
|
||
|
||
row.activatable,
|
||
row.activatable:backdrop,
|
||
row.activatable:backdrop:active,
|
||
row.activatable:backdrop:checked,
|
||
row.activatable:backdrop:disabled,
|
||
row.activatable:backdrop:disabled:active,
|
||
row.activatable:backdrop:disabled:checked,
|
||
row.activatable:disabled:active,
|
||
row.activatable:disabled:checked {
|
||
// reset button inherited stuff
|
||
@extend %undecorated_button;
|
||
background-color: transparentize($base_color,1); // for the transition
|
||
border-style: none; // I need no borders here
|
||
border-radius: 0; // and no rounded corners
|
||
box-shadow: none; // and no box-shadow
|
||
}
|
||
|
||
row {
|
||
&.activatable {
|
||
color: $fg_color;
|
||
&:hover {
|
||
background-color: mix($fg_color, $base_color, 5%);
|
||
}
|
||
&:active {
|
||
box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
|
||
}
|
||
&:selected {
|
||
@extend %selected_items;
|
||
background-color: $selected_bg_color;
|
||
color: $selected_fg_color;
|
||
&:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
|
||
&:hover {
|
||
background-color: mix($fg_color, $selected_bg_color, 10%);
|
||
}
|
||
&:backdrop { background-color: $borders_color; }
|
||
.button.flat {
|
||
color: $selected_fg_color;
|
||
&:hover { color: $fg_color; }
|
||
&:active { color: $selected_fg_color; }
|
||
}
|
||
}
|
||
}
|
||
.button.flat {
|
||
color: $fg_color;
|
||
&:active { color: $selected_fg_color; }
|
||
}
|
||
}
|
||
|
||
|
||
// transition
|
||
row,
|
||
row.activatable {
|
||
transition: all 300ms $ease-out-quad;
|
||
&:hover { transition: none; }
|
||
}
|
||
|
||
|
||
/*********************
|
||
* App Notifications *
|
||
*********************/
|
||
|
||
.app-notification,
|
||
.app-notification.frame {
|
||
padding: 10px;
|
||
border-width: 0 1px 1px;
|
||
border-style: solid;
|
||
border-color: $borders_color;
|
||
border-radius: 0 0 6px 6px;
|
||
background-image: linear-gradient(to bottom, mix(black, $bg_color, 6%) 5%,
|
||
mix(black, $bg_color, 4%));
|
||
// FIXME no space for outer shadow : box-shadow: 0 1px 1px rgba(0,0,0,.5);
|
||
.button { padding: 6px; }
|
||
border { border-width: 0; }
|
||
}
|
||
|
||
/*************
|
||
* Expanders *
|
||
*************/
|
||
|
||
expander {
|
||
title > arrow {
|
||
min-width: 24px;
|
||
min-height: 24px;
|
||
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
||
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
||
|
||
&:hover { color: lighten($fg_color,30%); } //only lightens the arrow
|
||
&:disabled { color: $insensitive_fg_color; }
|
||
|
||
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
||
}
|
||
}
|
||
|
||
/************
|
||
* Calendar *
|
||
***********/
|
||
calendar {
|
||
border: 1px solid $borders_color;
|
||
&:selected {
|
||
@extend .view:selected;
|
||
}
|
||
&.button {
|
||
@extend %undecorated_button;
|
||
padding: 0 4px; //FIXME no effect on these pseudobuttons
|
||
color: mix($fg_color, $base_color, 40%); //we need a dimmed stuff var
|
||
&:hover {
|
||
@extend %undecorated_button;
|
||
color: $fg_color;
|
||
}
|
||
&:backdrop, &:backdrop:hover {
|
||
@extend %undecorated_button;
|
||
color: mix($backdrop_fg_color, $backdrop_base_color, 50%);
|
||
}
|
||
}
|
||
&.view { border-radius: 2px; }
|
||
&.header {
|
||
background: linear-gradient(to bottom,
|
||
lighten($bg_color,2%),
|
||
darken($bg_color,2%));
|
||
border-bottom-color: mix($borders_color,$bg_color,50%);
|
||
&:backdrop {
|
||
background-image: _solid($backdrop_bg_color);
|
||
border-bottom-color: mix($backdrop_borders_color,$backdrop_bg_color,50%);
|
||
}
|
||
}
|
||
|
||
&:indeterminate, &:indeterminate:backdrop { color: gtkalpha(currentColor, 0.55); }
|
||
&.highlight, &.highlight:backdrop { color: $fg_color; }
|
||
}
|
||
|
||
|
||
/***********
|
||
* Dialogs *
|
||
***********/
|
||
|
||
messagedialog .dialog-action-area button {
|
||
padding: 8px;
|
||
}
|
||
|
||
messagedialog { // Message Dialog styling
|
||
.titlebar {
|
||
border-style: none;
|
||
box-shadow: inset 0 1px $borders_edge;
|
||
}
|
||
|
||
&.csd { // rounded bottom border styling for csd version
|
||
&.background {
|
||
// bigger radius for better antialiasing
|
||
border-bottom-left-radius: 9px;
|
||
border-bottom-right-radius: 9px;
|
||
}
|
||
|
||
.dialog-action-area button {
|
||
padding: 12px;
|
||
border-radius: 0;
|
||
|
||
@include button(normal, $edge: none);
|
||
@extend %middle_button;
|
||
|
||
&:hover {
|
||
@include button(hover, $edge: none);
|
||
@extend %middle_button;
|
||
}
|
||
|
||
&:active {
|
||
@include button(active, $edge: none);
|
||
@extend %middle_button;
|
||
}
|
||
|
||
&:disabled {
|
||
@include button(insensitive, $edge: none);
|
||
@extend %middle_button;
|
||
}
|
||
|
||
&:backdrop {
|
||
@include button(backdrop, $edge: none);
|
||
@extend %middle_button;
|
||
}
|
||
&:backdrop:disabled {
|
||
@include button(backdrop-insensitive, $edge: none);
|
||
@extend %middle_button;
|
||
}
|
||
|
||
@each $b_type, $b_color in (suggested-action, $suggested_color),
|
||
(destructive-action, $destructive_color) {
|
||
&.#{$b_type} {
|
||
@include button(normal, $b_color, white, $edge: none);
|
||
@extend %middle_button;
|
||
|
||
&:hover {
|
||
@include button(hover, $b_color, white, $edge: none);
|
||
@extend %middle_button;
|
||
}
|
||
|
||
&:active {
|
||
@include button(active, $b_color, white, $edge: none);
|
||
@extend %middle_button;
|
||
}
|
||
|
||
&:backdrop {
|
||
@include button(backdrop, $b_color, white);
|
||
@extend %middle_button;
|
||
|
||
&:disabled {
|
||
@include button(backdrop-insensitive);
|
||
@extend %middle_button;
|
||
}
|
||
}
|
||
|
||
&:disabled {
|
||
@include button(insensitive);
|
||
@extend %middle_button;
|
||
}
|
||
}
|
||
}
|
||
|
||
&:first-child{ @extend %first_button; }
|
||
&:last-child { @extend %last_button; }
|
||
}
|
||
|
||
%middle_button {
|
||
border-right-style: none;
|
||
border-bottom-style: none;
|
||
}
|
||
|
||
%last_button {
|
||
border-bottom-right-radius: 7px;
|
||
-gtk-outline-bottom-right-radius: 5px;
|
||
}
|
||
|
||
%first_button {
|
||
border-left-style: none;
|
||
border-bottom-left-radius: 7px;
|
||
-gtk-outline-bottom-left-radius: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
filechooser {
|
||
.dialog-action-box {
|
||
border-top: 1px solid $borders_color;
|
||
|
||
&:backdrop { border-top-color: $backdrop_borders_color; }
|
||
}
|
||
|
||
#pathbarbox { border-bottom: 1px solid $bg_color; }
|
||
}
|
||
|
||
filechooserbutton:drop(active) {
|
||
box-shadow: none;
|
||
border-color: transparent;
|
||
}
|
||
|
||
|
||
/***********
|
||
* Sidebar *
|
||
***********/
|
||
|
||
.sidebar {
|
||
border: none;
|
||
&:backdrop {
|
||
background-color: $bg_color;
|
||
}
|
||
|
||
&:selected {
|
||
@extend %selected_items;
|
||
}
|
||
|
||
& > scrolledwindow > .frame {
|
||
border-right: 1px solid $borders_color;
|
||
&:dir(rtl) {
|
||
border-right: none;
|
||
border-left: 1px solid $borders_color;
|
||
}
|
||
}
|
||
}
|
||
|
||
stacksidebar {
|
||
& row {
|
||
padding: 10px 4px;
|
||
> label {
|
||
padding-left: 6px;
|
||
padding-right: 6px;
|
||
}
|
||
&.needs-attention > label {
|
||
@extend %needs_attention;
|
||
background-size: 6px 6px, 0 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
/****************
|
||
* 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;
|
||
|
||
// Using margins/padding directly in the SidebarRow
|
||
// will make the animation of the new bookmark row jump
|
||
> revealer {
|
||
padding: 0 14px;
|
||
}
|
||
|
||
& image.sidebar-icon {
|
||
opacity: $_placesidebar_icons_opacity; // dim the device icons
|
||
|
||
&:dir(ltr) { padding-right: 8px; }
|
||
&:dir(rtl) { padding-left: 8px; }
|
||
}
|
||
|
||
& label.sidebar-label {
|
||
&:dir(ltr) { padding-right: 2px; }
|
||
&:dir(rtl) { padding-left: 2px; }
|
||
}
|
||
|
||
@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%;
|
||
|
||
&:not(:hover):not(:active),
|
||
&:backdrop { > image { opacity: $_placesidebar_icons_opacity; }}
|
||
}
|
||
|
||
// in the sidebar case it makes no sense to click the selected row
|
||
&:selected:active { box-shadow: none; }
|
||
|
||
&.sidebar-placeholder-row {
|
||
padding: 0 8px;
|
||
min-height: 2px;
|
||
background-image: _solid($fg_color);
|
||
background-clip: content-box;
|
||
}
|
||
|
||
&.sidebar-new-bookmark-row { color: $selected_bg_color; }
|
||
|
||
&:drop(active):not(:disabled) {
|
||
color: $fg_color;
|
||
box-shadow: inset 0 1px $fg_color,
|
||
inset 0 -1px $fg_color;
|
||
|
||
&:selected {
|
||
color: $selected_fg_color;
|
||
background-color: $fg_color;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
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);
|
||
}
|
||
|
||
row.activatable:hover { background-color: transparent; }
|
||
}
|
||
|
||
|
||
/*********
|
||
* Paned *
|
||
*********/
|
||
|
||
|
||
paned {
|
||
> separator {
|
||
min-width: 1px;
|
||
min-height: 1px;
|
||
background-image: _solid($borders_color);
|
||
|
||
&:backdrop {
|
||
background-image: _solid($backdrop_borders_color);
|
||
}
|
||
}
|
||
|
||
&:dir(ltr).horizontal > separator {
|
||
margin: 0 -8px 0 0;
|
||
padding: 0 8px 0 0;
|
||
}
|
||
&:dir(rtl).horizontal > separator {
|
||
margin: 0 0 0 -8px;
|
||
padding: 0 0 0 8px;
|
||
}
|
||
|
||
&.vertical > separator {
|
||
margin: 0 0 -8px 0;
|
||
padding: 0 0 8px 0;
|
||
}
|
||
|
||
> separator:selected {
|
||
background-color: $selected_bg_color;
|
||
}
|
||
|
||
> separator.wide {
|
||
min-width: 5px;
|
||
min-height: 5px;
|
||
background-color: transparent;
|
||
border-style: none solid;
|
||
border-color: $borders_color;
|
||
border-width: 1px;
|
||
}
|
||
}
|
||
|
||
/**************
|
||
* GtkInfoBar *
|
||
**************/
|
||
infobar {
|
||
border-width: 0;
|
||
border-style: none;
|
||
}
|
||
|
||
.info,
|
||
.question,
|
||
.warning,
|
||
.error {
|
||
background-color: $selected_bg_color;
|
||
color: $selected_fg_color;
|
||
text-shadow: 0 1px darken($selected_bg_color, 10%);
|
||
border-color: darken($selected_bg_color, 10%);
|
||
button {
|
||
@include button(normal, $selected_bg_color, $selected_fg_color, $edge: none);
|
||
&:hover { @include button(hover, $selected_bg_color, $selected_fg_color, $edge: none); }
|
||
&:active { @include button(active, $selected_bg_color, $selected_fg_color, $edge: none); }
|
||
&:disabled { @include button(insensitive, $selected_bg_color, $selected_fg_color, $edge: none); }
|
||
&:backdrop { @include button(backdrop, $selected_bg_color, $selected_fg_color, $edge: none); }
|
||
&:backdrop:disabled { @include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, $edge: none); }
|
||
}
|
||
label:selected,
|
||
label:selected:focus,
|
||
label:selected:hover {
|
||
background-color: lighten($selected_bg_color, 20%);
|
||
}
|
||
}
|
||
|
||
/************
|
||
* 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.1);
|
||
background-clip: padding-box;
|
||
border: 1px solid $borders_color;
|
||
}
|
||
|
||
padding: 4px; /* not working */
|
||
border-radius: 5px;
|
||
box-shadow: none; // otherwise it gets inherited by windowframe.csd
|
||
|
||
// FIXME: we need a border or tooltips vanish on black background.
|
||
decoration { background-color: transparent; }
|
||
|
||
* { // Yeah this is ugly
|
||
padding: 4px;
|
||
background-color: transparent;
|
||
color: white;
|
||
}
|
||
}
|
||
|
||
|
||
/*****************
|
||
* 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{}, GtkColorSwatch has the programmatically set background, so most of the style
|
||
// is applied to the overlay box.
|
||
|
||
$_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
|
||
|
||
box-shadow: $_colorswatch_shadow;
|
||
|
||
// take care of colorswatches on selected elements
|
||
:selected & {
|
||
box-shadow: none;
|
||
& overlay, & overlay:hover {
|
||
border-color: $selected_fg_color;
|
||
}
|
||
}
|
||
|
||
// we need to re-set the shadow here since it get axed by the previous bit
|
||
&:selected { box-shadow: $_colorswatch_shadow; }
|
||
|
||
// border rounding
|
||
&.top {
|
||
border-top-left-radius: 6px;
|
||
border-top-right-radius: 6px;
|
||
}
|
||
&.bottom {
|
||
border-bottom-left-radius: 6px;
|
||
border-bottom-right-radius: 6px;
|
||
}
|
||
&.left, &:first-child:not(overlay):not(.top) {
|
||
border-top-left-radius: 6px;
|
||
border-bottom-left-radius: 6px;
|
||
}
|
||
&.right, &:last-child:not(overlay):not(.bottom) {
|
||
border-top-right-radius: 6px;
|
||
border-bottom-right-radius: 6px;
|
||
}
|
||
&:only-child:not(overlay) { border-radius: 6px; }
|
||
|
||
// overlay corner rounding
|
||
&.top > overlay {
|
||
border-top-left-radius: 5px;
|
||
border-top-right-radius: 5px;
|
||
}
|
||
&.bottom > overlay {
|
||
border-bottom-left-radius: 5px;
|
||
border-bottom-right-radius: 5px;
|
||
}
|
||
&:first-child:not(.top) > overlay {
|
||
border-top-left-radius: 5px;
|
||
border-bottom-left-radius: 5px;
|
||
}
|
||
&:last-child:not(.bottom) > overlay {
|
||
border-top-right-radius: 5px;
|
||
border-bottom-right-radius: 5px;
|
||
}
|
||
&:only-child > overlay { border-radius: 5px; }
|
||
|
||
// nth-child is used for the custom colors row.
|
||
// the :not() madness is needed since actually the overlay is selectable by GtkColorSwatch > .overlay
|
||
// and GtkColorSwatch.overlay, I know it's weird, but this is gtk+.
|
||
|
||
// hover effect
|
||
&.activatable:hover,
|
||
&.activatable:hover:selected {
|
||
background-image: linear-gradient(135deg, transparentize(white, 0.3),
|
||
transparentize(white, 1) 50%);
|
||
box-shadow: inset 0 1px transparentize(white, 0.6),
|
||
inset 0 -1px transparentize(black, 0.6);
|
||
}
|
||
&:backdrop,
|
||
&:backdrop:selectedi,
|
||
&.dark:backdrop,
|
||
&.dark:backdrop:selected {
|
||
background-image: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
// indicator and keynav outline colors, color-dark is a color with luminosity lower then 50%
|
||
&.dark {
|
||
color: white;
|
||
border: 1px solid transparentize(black, 0.7);
|
||
&:hover { border-color: transparentize(black, 0.5); }
|
||
&:backdrop { color: transparentize(white, 0.7); }
|
||
}
|
||
&.light {
|
||
color: black;
|
||
border: 1px solid transparentize(black, 0.7);
|
||
&:hover { border-color: transparentize(black, 0.5); }
|
||
&:backdrop { color: transparentize(black, 0.7); }
|
||
}
|
||
|
||
// border color
|
||
& overlay,
|
||
& overlay:selected {
|
||
background: none;
|
||
border: none;
|
||
}
|
||
|
||
// make the add color button looks like, well, a button
|
||
&#add-color-button {
|
||
@include button(normal);
|
||
&:hover { @include button(hover); }
|
||
&:backdrop { @include button(backdrop); }
|
||
& overlay { border-width: 0; background: none; }
|
||
}
|
||
}
|
||
|
||
|
||
/**********************
|
||
* Window Decorations *
|
||
*********************/
|
||
|
||
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: transparentize($fg_color, 0.77);
|
||
$_wm_border_backdrop: transparentize($fg_color, 0.82);
|
||
|
||
box-shadow: 0 3px 9px 1px transparentize(black, 0.5),
|
||
0 0 0 1px $_wm_border; //doing borders with box-shadow
|
||
|
||
/* this is used for the resize cursor area */
|
||
margin: 10px;
|
||
|
||
&:backdrop {
|
||
box-shadow: 0 2px 6px 2px transparentize(black, 0.8),
|
||
0 3px 9px 1px transparent,
|
||
0 0 0 1px $_wm_border_backdrop;
|
||
}
|
||
|
||
.tiled & {
|
||
border-radius: 0;
|
||
}
|
||
|
||
.csd.popup & {
|
||
border-radius: 0;
|
||
box-shadow: 0 1px 2px transparentize(black, 0.8),
|
||
0 0 0 1px transparentize($_wm_border,0.1);
|
||
}
|
||
|
||
tooltip.csd & {
|
||
border-radius: 5px;
|
||
box-shadow: none;
|
||
}
|
||
|
||
messagedialog.csd & {
|
||
border-radius: 7px;
|
||
box-shadow: 0 1px 2px transparentize(black, 0.8),
|
||
0 0 0 1px transparentize($_wm_border, 0.1);
|
||
}
|
||
|
||
.solid-csd & {
|
||
border-radius: 0;
|
||
margin: 4px;
|
||
background-color: $backdrop_bg_color;
|
||
border: solid 1px $backdrop_borders_color;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
|
||
// Window Close button
|
||
button.titlebutton {
|
||
@extend %button_basic;
|
||
|
||
@extend %button_basic.flat;
|
||
}
|
||
|
||
/**********************
|
||
* Touch Copy & Paste *
|
||
*********************/
|
||
|
||
//touch selection handlebars for the Popover.osd above
|
||
cursor-handle {
|
||
background-color: $bg_color;
|
||
background-image: none;
|
||
-gtk-icon-source: none;
|
||
box-shadow: none;
|
||
outline-style: none;
|
||
outline-color: transparent;
|
||
border: 2px solid $fg_color;
|
||
@each $s,$as in ('',''),
|
||
(':hover','-hover'),
|
||
(':active','-active') { //no need for insensitive and backdrop
|
||
&.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
|
||
border-radius: 10px 0 0 0;
|
||
padding-left: 10px;
|
||
}
|
||
&.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
|
||
border-radius: 0 10px 0 0;
|
||
padding-right: 10px;
|
||
}
|
||
&.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) {
|
||
border-radius: 10px 10px 0 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Decouple the font of context menus from their entry/textview */
|
||
.context-menu {
|
||
font: initial;
|
||
}
|
||
|
||
.touch-selection {
|
||
font: initial;
|
||
color: $osd_fg_color;
|
||
border: none;
|
||
background-color: opacify($osd_bg_color,0.2);
|
||
background-clip: padding-box;
|
||
box-shadow: none;
|
||
text-shadow: 0 1px black;
|
||
-gtk-icon-shadow: 0 1px black;
|
||
&:backdrop { text-shadow: none; }
|
||
button {
|
||
@include button(osd);
|
||
&:hover { @include button(osd-hover); }
|
||
&:active, &:checked { @include button(osd-active); }
|
||
&:disabled, &:backdrop:disabled { @include button(osd-insensitive); }
|
||
&:backdrop { @include button(osd-backdrop); }
|
||
}
|
||
// checkboxes and radios to use the -dark style for OSD style popovers
|
||
@each $w,$a in ('check', 'checkbox'),
|
||
('radio','radio') {
|
||
@each $s,$as in ('','-unchecked'),
|
||
(':hover', '-unchecked-hover'),
|
||
(':active', '-unchecked-active'),
|
||
(':disabled','-unchecked-insensitive'),
|
||
(':indeterminate', '-mixed'),
|
||
(':indeterminate:hover', '-mixed-hover'),
|
||
(':indeterminate:selected', '-mixed-active'),
|
||
(':indeterminate:disabled', '-mixed-insensitive'),
|
||
(':checked', '-checked'),
|
||
(':checked:disabled','-checked-insensitive'),
|
||
(':checked:hover', '-checked-hover'),
|
||
(':checked:active', '-checked-active'),
|
||
(':backdrop:checked', '-checked-backdrop') {
|
||
.#{$w}#{$s} {
|
||
-gtk-icon-shadow: none;
|
||
color: $osd_fg_color;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
button.circular { // FIXME: aggregate to buttons
|
||
border-radius: 20px;
|
||
-gtk-outline-radius: 20px;
|
||
|
||
label { padding: 0; }
|
||
row:selected & {
|
||
color: $selected_fg_color;
|
||
&:hover { color: $fg_color; }
|
||
&:active { color: $selected_fg_color; }
|
||
}
|
||
}
|
||
|
||
// shortcut window keys
|
||
.keycap {
|
||
min-width: 18px;
|
||
min-height: 25px;
|
||
margin-top: 3px;
|
||
padding-bottom: 2px;
|
||
padding-left: 6px;
|
||
padding-right: 6px;
|
||
|
||
color: $fg_color;
|
||
background-color: $base_color;
|
||
border: 2px solid;
|
||
border-color: $borders_color;
|
||
border-radius: 5px;
|
||
box-shadow: inset 0 -3px mix($borders_color, $bg_color, 50%),
|
||
inset 0 -2px $bg_color,
|
||
inset 0 0 0 1px $base_color;
|
||
font-size: smaller;
|
||
}
|
||
|
||
*:drop(active):focus,
|
||
*:drop(active) {
|
||
border-color: $fg_color;
|
||
box-shadow: inset 0 0 0 2px $fg_color;
|
||
}
|
||
|
||
stackswitcher button.text-button {
|
||
min-width: 100px;
|
||
}
|
||
|
||
stackswitcher button.circular {
|
||
min-width: 0px;
|
||
}
|
||
|
||
|
||
/*********
|
||
* Emoji *
|
||
********/
|
||
|
||
popover.emoji-picker { padding-left: 0; padding-right: 0; }
|
||
|
||
button.emoji-section,
|
||
button.emoji-section:backdrop { /* Dodge stuff inherited from backdrop button */
|
||
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;
|
||
|
||
&:backdrop:not(:checked) { border-color: transparent; }
|
||
&:hover { border-color: $borders_color; }
|
||
&:checked { border-color: $selected_bg_color; }
|
||
|
||
label {
|
||
padding: 0;
|
||
|
||
opacity: 0.55;
|
||
}
|
||
|
||
&:hover label { opacity: 0.775; }
|
||
|
||
&:checked label {
|
||
opacity: 1;
|
||
|
||
/* Dodge default inversion to white for non-flat, selected button */
|
||
color: $fg_color;
|
||
}
|
||
}
|
||
|
||
.emoji {
|
||
font-size: x-large;
|
||
padding: 6px;
|
||
border-radius: 6px;
|
||
|
||
:hover {
|
||
background: $selected_bg_color;
|
||
color: $selected_fg_color;
|
||
}
|
||
}
|