forked from AuroraMiddleware/gtk
b1c4e9afef
The last touch on this patch series is making GtkWindow able to selectively adjust various UI details based on the different tiled edges. The main driver here is that we don't want to show shadows on edges that are constrained. This patch adds the necessary code to do that, while still maintaining compatibility with the old ways. https://bugzilla.gnome.org/show_bug.cgi?id=783669
4458 lines
104 KiB
SCSS
4458 lines
104 KiB
SCSS
@function gtkalpha($c,$a) {
|
|
@return unquote("alpha(#{$c},#{$a})");
|
|
}
|
|
|
|
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
$asset_suffix: if($variant=='dark', '-dark', '');
|
|
$backdrop_transition: 200ms ease-out;
|
|
$button_transition: all 200ms $ease-out-quad;
|
|
|
|
* {
|
|
padding: 0;
|
|
|
|
-gtk-secondary-caret-color: $selected_bg_color
|
|
}
|
|
|
|
*:focus {
|
|
// We use the outline properties to signal the focus properties
|
|
// to the adwaita engine: using real CSS properties is faster,
|
|
// and we don't use any outlines for now.
|
|
|
|
outline-color: gtkalpha(currentColor, 0.3);
|
|
outline-style: dashed;
|
|
outline-offset: -3px;
|
|
outline-width: 1px;
|
|
-gtk-outline-radius: 2px;
|
|
}
|
|
|
|
|
|
/***************
|
|
* Base States *
|
|
***************/
|
|
.background {
|
|
color: $fg_color;
|
|
background-color: $bg_color;
|
|
|
|
&:backdrop {
|
|
color: $backdrop_fg_color;
|
|
background-color: $backdrop_bg_color;
|
|
text-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
}
|
|
}
|
|
|
|
/*
|
|
These wildcard seems unavoidable, need to investigate.
|
|
Wildcards are bad and troublesome, use them with care,
|
|
or better, just don't.
|
|
Everytime a wildcard is used a kitten dies, painfully.
|
|
*/
|
|
|
|
*:disabled { -gtk-icon-filter: opacity(0.5); }
|
|
|
|
.gtkstyle-fallback {
|
|
color: $fg_color;
|
|
background-color: $bg_color;
|
|
|
|
&:hover {
|
|
color: $fg_color;
|
|
background-color: lighten($bg_color, 10%);
|
|
}
|
|
|
|
&:active {
|
|
color: $fg_color;
|
|
background-color: darken($bg_color, 10%);
|
|
}
|
|
|
|
&:disabled {
|
|
color: $insensitive_fg_color;
|
|
background-color: $insensitive_bg_color;
|
|
}
|
|
|
|
&:selected {
|
|
color: $selected_fg_color;
|
|
background-color: $selected_bg_color;
|
|
}
|
|
}
|
|
|
|
.view,
|
|
%view {
|
|
color: $text_color;
|
|
background-color: $base_color;
|
|
|
|
&:backdrop {
|
|
color: $backdrop_text_color;
|
|
background-color: $backdrop_base_color;
|
|
&:disabled { color: $backdrop_insensitive_color; }
|
|
}
|
|
|
|
&:disabled {
|
|
color: $insensitive_fg_color;
|
|
background-color: $insensitive_bg_color;
|
|
}
|
|
|
|
&:selected {
|
|
&:focus, & {
|
|
@extend %selected_items;
|
|
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.view,
|
|
textview {
|
|
text {
|
|
@extend %view;
|
|
|
|
selection { &:focus, & { @extend %selected_items; }}
|
|
}
|
|
}
|
|
|
|
textview border { background-color: mix($bg_color, $base_color, 50%); }
|
|
|
|
iconview { @extend .view; }
|
|
|
|
.rubberband,
|
|
rubberband {
|
|
border: 1px solid darken($selected_bg_color, 10%);
|
|
background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
|
|
}
|
|
|
|
flowbox {
|
|
rubberband { @extend rubberband; }
|
|
|
|
flowboxchild {
|
|
padding: 3px;
|
|
|
|
&:selected {
|
|
@extend %selected_items;
|
|
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-view .tile {
|
|
margin: 2px;
|
|
background-color: if($variant=='light', transparent, black);
|
|
border-radius: 0;
|
|
padding: 0;
|
|
|
|
&:backdrop { background-color: if($variant=='light', transparent, darken($backdrop_base_color,5%)); }
|
|
&:active, &:selected { background-color: if($variant=='light', transparent, $selected_bg_color); }
|
|
&:disabled { background-color: if($variant=='light', transparent, $insensitive_bg_color); }
|
|
}
|
|
|
|
label {
|
|
caret-color: currentColor; // this shouldn't be needed.
|
|
|
|
&.separator {
|
|
@extend .dim-label;
|
|
|
|
color: $fg_color;
|
|
|
|
&:backdrop { color: $backdrop_fg_color; }
|
|
}
|
|
|
|
row:selected &,
|
|
&:selected { @extend %nobg_selected_items; }
|
|
|
|
selection {
|
|
background-color: $selected_bg_color;
|
|
color: $selected_fg_color;
|
|
}
|
|
|
|
&:disabled {
|
|
color: $insensitive_fg_color;
|
|
|
|
selection { @extend %selected_items:disabled; }
|
|
|
|
&:backdrop { color: $backdrop_insensitive_color; }
|
|
}
|
|
|
|
&:backdrop {
|
|
color: $backdrop_fg_color;
|
|
|
|
selection { @extend %selected_items:backdrop; }
|
|
}
|
|
}
|
|
|
|
.dim-label {
|
|
opacity: 0.55;
|
|
text-shadow: none;
|
|
}
|
|
|
|
assistant {
|
|
.sidebar {
|
|
background-color: $base_color;
|
|
border-top: 1px solid $borders_color;
|
|
|
|
&:backdrop {
|
|
background-color: $backdrop_base_color;
|
|
border-color: $backdrop_borders_color;
|
|
}
|
|
}
|
|
|
|
&.csd .sidebar { border-top-style: none; }
|
|
|
|
.sidebar label { padding: 6px 12px; }
|
|
|
|
.sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); }
|
|
}
|
|
|
|
%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: 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 { margin-right: 6px; }
|
|
&.right { margin-left: 6px; }
|
|
}
|
|
|
|
undershoot {
|
|
&.left { @include undershoot(left); }
|
|
&.right { @include undershoot(right); }
|
|
}
|
|
|
|
&.flat {
|
|
&:focus, & {
|
|
min-height: 0;
|
|
padding: 2px;
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
&:focus { @include entry(focus); }
|
|
|
|
&:disabled { @include entry(insensitive); }
|
|
|
|
&:backdrop {
|
|
@include entry(backdrop);
|
|
|
|
transition: $backdrop_transition;
|
|
}
|
|
|
|
&:backdrop:disabled { @include entry(backdrop-insensitive); }
|
|
|
|
selection { @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); }
|
|
|
|
selection { 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: $drop_target_color;
|
|
box-shadow: inset 0 0 0 1px $drop_target_color;
|
|
}
|
|
}
|
|
|
|
.osd & {
|
|
@include entry(osd);
|
|
|
|
&:focus { @include entry(osd-focus); }
|
|
|
|
&:backdrop { @include entry(osd-backdrop); }
|
|
|
|
&:disabled { @include entry(osd-insensitive); }
|
|
}
|
|
}
|
|
|
|
progress {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
progress>trough>progress {
|
|
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) > &:drop(active) + &,
|
|
.linked:not(.vertical) > &:drop(active) + button,
|
|
.linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_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%);
|
|
|
|
&:backdrop { border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); }
|
|
}
|
|
|
|
// 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.
|
|
// :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:drop(active):not(:only-child),
|
|
+ entry:drop(active):not(:only-child) { border-top-color: $drop_target_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(); }
|
|
}
|
|
|
|
&:drop(active):not(:only-child) {
|
|
+ %entry,
|
|
+ entry,
|
|
+ button,
|
|
+ combobox > box > button.combo { border-top-color: $drop_target_color; }
|
|
}
|
|
}
|
|
}
|
|
|
|
treeview entry {
|
|
&:focus {
|
|
&:dir(rtl), &:dir(ltr) { // specificity bump hack
|
|
background-color: $base_color;
|
|
transition-property: color, background;
|
|
}
|
|
}
|
|
|
|
&.flat, & {
|
|
border-radius: 0;
|
|
background-image: none;
|
|
background-color: $base_color;
|
|
|
|
&:focus { border-color: $selected_bg_color; }
|
|
}
|
|
}
|
|
|
|
.entry-tag {
|
|
// sizing
|
|
padding: 5px;
|
|
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
|
|
// side margins: compensate the entry padding with a negative margin
|
|
// then the negative margin itself
|
|
:dir(ltr) & {
|
|
margin-left: 8px;
|
|
margin-right: -5px;
|
|
}
|
|
:dir(rtl) & {
|
|
margin-left: -5px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
border-style: none;
|
|
|
|
$_entry_tag_color: if($variant=='light', $selected_fg_color, $base_color);
|
|
color: $_entry_tag_color;
|
|
|
|
$_entry_tag_bg: if($variant=='light', $selected_bg_color, mix($fg_color, $base_color, 50%));
|
|
background-color: $_entry_tag_bg;
|
|
|
|
&:hover {
|
|
background-color: lighten($_entry_tag_bg, 10%);
|
|
}
|
|
|
|
:backdrop & {
|
|
color: $backdrop_base_color;
|
|
background-color: if($variant=='light', $selected_bg_color,
|
|
mix($backdrop_fg_color, $backdrop_base_color, 50%));
|
|
}
|
|
|
|
&.button {
|
|
background-color: transparent;
|
|
color: transparentize($_entry_tag_color, 0.3);
|
|
}
|
|
|
|
:not(:backdrop) &.button {
|
|
&:hover {
|
|
border: 1px solid $_entry_tag_bg;
|
|
color: $_entry_tag_color;
|
|
}
|
|
&:active {
|
|
background-color: $_entry_tag_bg;
|
|
color: transparentize($_entry_tag_color, 0.3);
|
|
}
|
|
}
|
|
}
|
|
|
|
/***********
|
|
* Buttons *
|
|
***********/
|
|
// stuff for .needs-attention
|
|
$_dot_color: if($variant=='light', $selected_bg_color,
|
|
lighten($selected_bg_color,15%));
|
|
@keyframes needs_attention {
|
|
from { background-image: radial-gradient(farthest-side, $_dot_color 0%, transparentize($_dot_color, 1) 0%); }
|
|
to { background-image: radial-gradient(farthest-side, $_dot_color 95%, transparentize($_dot_color, 1)); }
|
|
}
|
|
|
|
%button,
|
|
button {
|
|
@at-root %button_basic, & {
|
|
|
|
min-height: 24px;
|
|
min-width: 16px;
|
|
padding: 4px 8px;
|
|
border: 1px solid;
|
|
border-radius: 3px;
|
|
transition: $button_transition;
|
|
|
|
@include button(normal);
|
|
|
|
&.flat {
|
|
@include button(undecorated);
|
|
// to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
|
|
// to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
|
|
// it won't fade out when the pointer leave the button allocation area. To make the transition more evident
|
|
// in this case the duration is increased.
|
|
transition: none;
|
|
|
|
&:hover {
|
|
transition: $button_transition;
|
|
transition-duration: 500ms;
|
|
|
|
&:active { transition: $button_transition; }
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
@include button(hover);
|
|
-gtk-icon-filter: brightness(1.2);
|
|
}
|
|
|
|
&:active,
|
|
&:checked {
|
|
@include button(active);
|
|
|
|
transition-duration: 50ms;
|
|
}
|
|
|
|
&:backdrop {
|
|
&.flat, & {
|
|
@include button(backdrop);
|
|
|
|
transition: $backdrop_transition;
|
|
-gtk-icon-filter: none;
|
|
|
|
&:active,
|
|
&:checked { @include button(backdrop-active); }
|
|
|
|
&:disabled {
|
|
@include button(backdrop-insensitive);
|
|
|
|
&:active,
|
|
&:checked { @include button(backdrop-insensitive-active); }
|
|
}
|
|
}
|
|
}
|
|
|
|
&.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }}
|
|
|
|
&:disabled {
|
|
@include button(insensitive);
|
|
|
|
&:active,
|
|
&:checked { @include button(insensitive-active); }
|
|
}
|
|
|
|
&.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: $drop_target_color;
|
|
border-color: $drop_target_color;
|
|
box-shadow: inset 0 0 0 1px $drop_target_color;
|
|
}
|
|
}
|
|
|
|
@at-root %button_selected, & {
|
|
row:selected & {
|
|
@if $variant == 'light' { border-color: $selected_borders_color; }
|
|
|
|
&.flat:not(:active):not(:checked):not(:hover):not(disabled) {
|
|
color: $selected_fg_color;
|
|
border-color: transparent;
|
|
|
|
&:backdrop { color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color); }
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// big standalone buttons like in Documents pager
|
|
&.osd {
|
|
min-width: 24px;
|
|
min-height: 32px;
|
|
|
|
&.image-button { min-width: 32px; }
|
|
|
|
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 in (suggested-action, $selected_bg_color),
|
|
(destructive-action, $destructive_color) {
|
|
&.#{$b_type} {
|
|
@include button(normal, $b_color, white);
|
|
|
|
&.flat {
|
|
@include button(undecorated);
|
|
|
|
color: $b_color; //FIXME: does it work on the dark variant?
|
|
}
|
|
|
|
&:hover { @include button(hover, $b_color, white); }
|
|
|
|
&:active,
|
|
&:checked { @include button(active, $b_color, white); }
|
|
|
|
&:backdrop,
|
|
&.flat:backdrop {
|
|
@include button(backdrop, $b_color, white);
|
|
|
|
&:active,
|
|
&:checked { @include button(backdrop-active, $b_color, white); }
|
|
|
|
&:disabled {
|
|
@include button(backdrop-insensitive);
|
|
|
|
&:active,
|
|
&:checked { @include button(backdrop-insensitive-active, $b_color, white); }
|
|
}
|
|
}
|
|
|
|
&.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, white); }
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// hide separators
|
|
&.font,
|
|
&.file { separator { background-color: transparent; }}
|
|
|
|
&.font { > box > box > label { font-weight: bold; }}
|
|
|
|
// inline-toolbar buttons
|
|
.inline-toolbar &, .inline-toolbar &:backdrop {
|
|
border-radius: 2px;
|
|
border-width: 1px;
|
|
@extend %linked;
|
|
}
|
|
|
|
.primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
|
|
|
|
.linked > &,
|
|
.linked > &:hover,
|
|
.linked > &:active,
|
|
.linked > &:checked,
|
|
.linked > &:backdrop { @extend %linked; }
|
|
|
|
.linked.vertical > &,
|
|
.linked.vertical > &:hover,
|
|
.linked.vertical > &:active,
|
|
.linked.vertical > &:checked,
|
|
.linked.vertical > &:backdrop { @extend %linked_vertical; }
|
|
|
|
&.circular { // The Bloody Circul Button
|
|
border-radius: 9999px;
|
|
-gtk-outline-radius: 9999px;
|
|
|
|
label { padding: 0; }
|
|
|
|
// the followind code is needed since we use a darker bottom border on buttons, which looks pretty
|
|
// bad with a 100% border radius (see https://bugzilla.gnome.org/show_bug.cgi?id=771205 for details),
|
|
// so on relevant states we an additional background-image with a gradient clipped on the border-box,
|
|
// so setting a transparent border would reveal it.
|
|
// FIXME: take care of colored circular button.
|
|
$_border_bg: linear-gradient(to top, $alt-borders-color 25%, $borders-color 50%);
|
|
|
|
&:not(.flat):not(:checked):not(:active):not(:disabled):not(:backdrop) {
|
|
@include button(normal);
|
|
background-image: $button_fill, $_border_bg;
|
|
border-color: transparent;
|
|
}
|
|
|
|
&:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) {
|
|
@include button(hover);
|
|
background-image: $button_fill, $_border_bg;
|
|
border-color: transparent;
|
|
}
|
|
|
|
background-origin: padding-box, border-box;
|
|
background-clip: padding-box, border-box;
|
|
}
|
|
}
|
|
|
|
%needs_attention {
|
|
// the dot is drawn by using two radial gradient, the first one is the actuall dot, the other
|
|
// simulates the shadow labels and icons normally have in buttons.
|
|
animation: needs_attention 150ms ease-in;
|
|
$_dot_shadow: _text_shadow_color(); // shadow color
|
|
|
|
background-image: radial-gradient(farthest-side, $_dot_color 96%, transparentize($_dot_color,1 )),
|
|
radial-gradient(farthest-side, $_dot_shadow 95%, transparentize($_dot_shadow, 1));
|
|
background-size: 6px 6px, 6px 6px;
|
|
background-repeat: no-repeat;
|
|
|
|
@if $variant == 'light' { background-position: right 3px, right 4px; }
|
|
|
|
@else { background-position: right 3px, right 2px; }
|
|
|
|
&:backdrop { background-size: 6px 6px, 0 0;}
|
|
|
|
&:dir(rtl) {
|
|
@if $variant == 'light' { background-position: left 3px, left 4px; }
|
|
|
|
@else { background-position: left 3px, left 2px; }
|
|
}
|
|
}
|
|
|
|
|
|
// all the following is for the +|- buttons on inline toolbars, that way
|
|
// should really be deprecated...
|
|
.inline-toolbar 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 {
|
|
@extend %linked_middle;
|
|
|
|
&:first-child {
|
|
border-top-left-radius: 3px;
|
|
border-bottom-left-radius: 3px;
|
|
}
|
|
|
|
&:last-child {
|
|
border-top-right-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
border-right-style: solid;
|
|
}
|
|
|
|
&:only-child {
|
|
border-radius: 3px;
|
|
border-style: solid;
|
|
}
|
|
}
|
|
|
|
%linked_vertical_middle {
|
|
border-style: solid solid none solid;
|
|
border-radius: 0;
|
|
}
|
|
|
|
%linked_vertical{
|
|
@extend %linked_vertical_middle;
|
|
|
|
&:first-child {
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
border-style: solid;
|
|
}
|
|
|
|
&:only-child {
|
|
border-radius: 3px;
|
|
border-style: solid;
|
|
}
|
|
}
|
|
|
|
%undecorated_button {
|
|
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; }
|
|
}
|
|
|
|
modelbutton.flat arrow {
|
|
background: none;
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
|
|
&: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' {
|
|
box-shadow: 0 1px _text_shadow_color();
|
|
|
|
.osd & { box-shadow: none; }
|
|
}
|
|
}
|
|
|
|
@if $variant == 'light' {
|
|
.osd &, & {
|
|
&:disabled,
|
|
&:backdrop,
|
|
&:active,
|
|
&:checked { colorswatch:only-child { box-shadow: none; }}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/*********
|
|
* Links *
|
|
*********/
|
|
|
|
%link,
|
|
*:link {
|
|
color: $link_color;
|
|
|
|
&:visited {
|
|
color: $link_visited_color;
|
|
|
|
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
|
|
}
|
|
|
|
&:hover {
|
|
color: lighten($link_color,10%);
|
|
|
|
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); }
|
|
}
|
|
|
|
&:active {
|
|
color: $link_color;
|
|
|
|
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
|
|
}
|
|
|
|
&:backdrop { &:backdrop:hover, &:backdrop:hover:selected, & { color: $selected_bg_color; }}
|
|
|
|
@at-root %link_selected,
|
|
&:selected,
|
|
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
|
|
}
|
|
|
|
button:link,
|
|
button:visited {
|
|
@extend %undecorated_button;
|
|
|
|
@extend *:link;
|
|
|
|
text-shadow: none;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:checked {
|
|
@extend %undecorated_button;
|
|
|
|
text-shadow: none;
|
|
}
|
|
|
|
> label {
|
|
@extend %link;
|
|
|
|
text-decoration-line: underline;
|
|
}
|
|
}
|
|
|
|
|
|
/*****************
|
|
* 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;
|
|
|
|
padding: 0;
|
|
|
|
entry {
|
|
min-width: 28px;
|
|
// reset all the other props since the spinbutton node is styled here
|
|
margin: 0;
|
|
background: none;
|
|
background-color: transparent;
|
|
border: none;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
|
|
&:backdrop:disabled { background-color: transparent; }
|
|
}
|
|
|
|
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-color: transparentize($borders_color, 0.7);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
|
|
&:dir(rtl) { border-style: none solid none none; }
|
|
|
|
&:hover {
|
|
color: $fg_color;
|
|
background-color: $base_hover_color;
|
|
}
|
|
|
|
&:disabled {
|
|
color: transparentize($insensitive_fg_color, 0.7);
|
|
background-color: transparent;
|
|
}
|
|
|
|
&:active {
|
|
background-color: transparentize(black, 0.9);
|
|
box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
|
|
}
|
|
|
|
&:backdrop {
|
|
color: mix($backdrop_fg_color, $backdrop_base_color, 90%);
|
|
background-color: transparent;
|
|
border-color: transparentize($backdrop_borders_color, 0.7);
|
|
transition: $backdrop_transition;
|
|
}
|
|
|
|
&:backdrop:disabled {
|
|
color: transparentize($backdrop_insensitive_color,0.7);
|
|
background-color: transparent;
|
|
border-style: none none none solid; // It is needed or it gets overridden
|
|
|
|
&:dir(rtl) { border-style: none solid none none; }
|
|
}
|
|
|
|
&:dir(ltr):last-child { border-radius: 0 3px 3px 0; }
|
|
|
|
&:dir(rtl):first-child { border-radius: 3px 0 0 3px; }
|
|
}
|
|
}
|
|
|
|
// OSD horizontal
|
|
.osd &:not(.vertical) {
|
|
button {
|
|
@include button(undecorated);
|
|
|
|
color: $osd_fg_color;
|
|
border-style: none none none solid;
|
|
border-color: transparentize($osd_borders_color, 0.3);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
-gtk-icon-shadow: 0 1px black;
|
|
|
|
&:dir(rtl) { border-style: none solid none none; }
|
|
|
|
&:hover {
|
|
@include button(undecorated);
|
|
|
|
color: $osd_fg_color;
|
|
border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
|
background-color: transparentize($osd_fg_color, 0.9);
|
|
-gtk-icon-shadow: 0 1px black;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:backdrop {
|
|
@include button(undecorated);
|
|
|
|
color: $osd_fg_color;
|
|
border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
|
-gtk-icon-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:disabled {
|
|
@include button(undecorated);
|
|
|
|
color: $osd_insensitive_fg_color;
|
|
border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
|
-gtk-icon-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:dir(ltr):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
|
|
&:disabled { color: $insensitive_fg_color; }
|
|
|
|
&:backdrop:disabled { color: $backdrop_insensitive_color; }
|
|
|
|
&:drop(active) {
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
entry {
|
|
min-height: 32px;
|
|
min-width: 32px;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
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 &:not(.vertical) {
|
|
min-height: 0;
|
|
border-style: none;
|
|
border-radius: 0;
|
|
|
|
entry {
|
|
min-height: 0;
|
|
padding: 1px 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/**************
|
|
* 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 {
|
|
padding: 4px;
|
|
background-color: $bg_color;
|
|
}
|
|
|
|
toolbar {
|
|
@extend %toolbar;
|
|
|
|
padding: 4px 3px 3px 4px;
|
|
|
|
// on OSD
|
|
.osd & { background-color: transparent; }
|
|
|
|
// stand-alone OSD toolbars
|
|
&.osd {
|
|
padding: 13px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
background-color: $osd_bg_color;
|
|
|
|
&.left,
|
|
&.right,
|
|
&.top,
|
|
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
|
|
}
|
|
|
|
// toolbar separators
|
|
&.horizontal separator { margin: 0 7px 1px 6px; }
|
|
&.vertical separator { margin: 6px 1px 7px 0; }
|
|
|
|
&:not(.inline-toolbar):not(.osd) {
|
|
switch,
|
|
scale,
|
|
entry,
|
|
spinbutton,
|
|
button {
|
|
margin-right: 1px;
|
|
margin-bottom: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
//searchbar, location-bar & inline-toolbar
|
|
.inline-toolbar {
|
|
@extend %toolbar;
|
|
|
|
@extend %darkbar;
|
|
|
|
padding: 3px;
|
|
border-width: 0 1px 1px;
|
|
border-radius: 0 0 5px 5px;
|
|
}
|
|
|
|
searchbar,
|
|
.location-bar {
|
|
@extend %toolbar;
|
|
|
|
@extend %darkbar;
|
|
|
|
border-width: 0 0 1px;
|
|
padding: 3px;
|
|
}
|
|
|
|
%darkbar {
|
|
border-style: solid;
|
|
border-color: $borders_color;
|
|
$_bg: mix($bg_color, $borders_color, 70%);
|
|
background-color: $_bg;
|
|
|
|
&:backdrop {
|
|
border-color: $backdrop_borders_color;
|
|
background-color: $backdrop_dark_fill;
|
|
box-shadow: none;
|
|
transition: $backdrop_transition;
|
|
}
|
|
}
|
|
|
|
|
|
/***************
|
|
* Header bars *
|
|
***************/
|
|
%titlebar,
|
|
headerbar {
|
|
padding: 0 6px;
|
|
min-height: 46px;
|
|
border-width: 0 0 1px;
|
|
border-style: solid;
|
|
border-color: $alt_borders_color;
|
|
border-radius: 0;
|
|
|
|
@include headerbar_fill;
|
|
|
|
&:backdrop {
|
|
border-color: $backdrop_borders_color;
|
|
background-color: $bg_color;
|
|
background-image: none;
|
|
box-shadow: inset 0 1px $top_hilight;
|
|
|
|
transition: $backdrop_transition;
|
|
}
|
|
|
|
.title {
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: smaller;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
|
|
@extend .dim-label;
|
|
}
|
|
|
|
&.selection-mode {
|
|
$_hc: mix($top_hilight,$selected_bg_color, 50%); // hilight color
|
|
|
|
color: $selected_fg_color;
|
|
border-color: $selected_borders_color;
|
|
text-shadow: 0 -1px transparentize(black, 0.5);
|
|
|
|
@include headerbar_fill($selected_bg_color, $_hc);
|
|
|
|
&:backdrop {
|
|
background-color: $selected_bg_color;
|
|
background-image: none;
|
|
box-shadow: inset 0 1px mix($top_hilight, $selected_bg_color, 60%);
|
|
}
|
|
|
|
.subtitle:link { @extend *:link:selected; }
|
|
|
|
button {
|
|
@include button(normal, $selected_bg_color, $selected_fg_color);
|
|
|
|
&.flat { @include button(undecorated); }
|
|
|
|
&:hover { @include button(hover, $selected_bg_color, $selected_fg_color); }
|
|
|
|
&:active,
|
|
&:checked { @include button(active, $selected_bg_color, $selected_fg_color); }
|
|
|
|
&:backdrop {
|
|
&.flat, & {
|
|
@include button(backdrop, $selected_bg_color, $selected_fg_color);
|
|
|
|
-gtk-icon-filter: none;
|
|
border-color: $selected_borders_color;
|
|
|
|
&:active,
|
|
&:checked {
|
|
@include button(backdrop-active, $selected_bg_color, $selected_fg_color);
|
|
|
|
border-color: $selected_borders_color;
|
|
}
|
|
|
|
&:disabled {
|
|
@include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color);
|
|
|
|
border-color: $selected_borders_color;
|
|
|
|
&:active, &:checked {
|
|
@include button(backdrop-insensitive-active, $selected_bg_color, $selected_fg_color);
|
|
|
|
border-color: $selected_borders_color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.flat { &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }}
|
|
|
|
&:disabled {
|
|
@include button(insensitive, $selected_bg_color, $selected_fg_color);
|
|
|
|
&:active,
|
|
&:checked { @include button(insensitive-active, $selected_bg_color, $selected_fg_color); }
|
|
}
|
|
|
|
&.suggested-action {
|
|
@include button(normal);
|
|
|
|
border-color: $selected_borders_color;
|
|
|
|
&:hover {
|
|
@include button(hover);
|
|
|
|
border-color: $selected_borders_color;
|
|
}
|
|
|
|
&:active {
|
|
@include button(active);
|
|
|
|
border-color: $selected_borders_color;
|
|
}
|
|
|
|
&:disabled {
|
|
@include button(insensitive);
|
|
|
|
border-color: $selected_borders_color;
|
|
}
|
|
|
|
&:backdrop {
|
|
@include button(backdrop);
|
|
|
|
border-color: $selected_borders_color;
|
|
}
|
|
|
|
&:backdrop:disabled {
|
|
@include button(backdrop-insensitive);
|
|
|
|
border-color: $selected_borders_color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.selection-menu {
|
|
&:backdrop, & {
|
|
border-color: transparentize($selected_bg_color, 1);
|
|
background-color: transparentize($selected_bg_color, 1);
|
|
background-image: none;
|
|
box-shadow: none;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
|
|
.arrow {
|
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
color: transparentize($selected_fg_color,0.5);
|
|
-gtk-icon-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// squared corners when the window is maximized, tiled, or fullscreen
|
|
.tiled &,
|
|
.tiled-top &,
|
|
.tiled-left &,
|
|
.tiled-right &,
|
|
.tiled-bottom &,
|
|
.maximized &,
|
|
.fullscreen & {
|
|
&:backdrop, & {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
&.default-decoration {
|
|
min-height: 28px;
|
|
padding: 4px;
|
|
|
|
button.titlebutton {
|
|
min-height: 26px;
|
|
min-width: 26px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.solid-csd & {
|
|
&:backdrop, & {
|
|
&:dir(rtl), &:dir(ltr) { // specificity bump
|
|
margin-left: -1px;
|
|
margin-right: -1px;
|
|
margin-top: -1px;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
headerbar {
|
|
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
|
|
entry,
|
|
spinbutton,
|
|
separator,
|
|
button {
|
|
margin-top: 6px;
|
|
margin-bottom: 6px;
|
|
}
|
|
switch {
|
|
margin-top: 9px;
|
|
margin-bottom: 9px;
|
|
}
|
|
}
|
|
|
|
.background:not(.tiled):not(.maximized):not(.solid-csd) .titlebar,
|
|
.background:not(.tiled-top):not(.maximized):not(.solid-csd) .titlebar,
|
|
.background:not(.tiled-left):not(.maximized):not(.solid-csd) .titlebar,
|
|
.background:not(.tiled-right):not(.maximized):not(.solid-csd) .titlebar,
|
|
.background:not(.tiled-bottom):not(.maximized):not(.solid-csd) .titlebar {
|
|
&:backdrop, & {
|
|
border-top-left-radius: 7px;
|
|
border-top-right-radius: 7px;
|
|
}
|
|
}
|
|
|
|
headerbar { // headerbar border rounding
|
|
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles the paned container case
|
|
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { &:backdrop, & { border-top-left-radius: 7px; }}
|
|
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:last-child { &:backdrop, & { border-top-right-radius: 7px; }}
|
|
window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack & { // tackles the stacked headerbars case
|
|
&:first-child, &:last-child {
|
|
&:backdrop, & {
|
|
border-top-left-radius: 7px;
|
|
border-top-right-radius: 7px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.titlebar:not(headerbar) {
|
|
window.csd > & {
|
|
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
|
|
padding: 0;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border-style: none;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
> separator { background-color: $borders_color; } // FIXME: use darker border?
|
|
|
|
@extend %titlebar;
|
|
}
|
|
|
|
|
|
/************
|
|
* Pathbars *
|
|
************/
|
|
.path-bar button {
|
|
&.text-button, &.image-button, & {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
&.text-button.image-button label {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
&.text-button.image-button, & {
|
|
label:last-child { padding-right: 8px; }
|
|
label:first-child { padding-left: 8px; }
|
|
}
|
|
|
|
image {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
&.slider-button {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
|
|
/**************
|
|
* Tree Views *
|
|
**************/
|
|
treeview.view {
|
|
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 {
|
|
&:focus, & {
|
|
border-radius: 0;
|
|
|
|
@extend %selected_items;
|
|
}
|
|
|
|
&:backdrop, & {
|
|
border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
|
|
border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
color: $insensitive_fg_color;
|
|
|
|
&:selected {
|
|
color: mix($selected_fg_color, $selected_bg_color, 40%);
|
|
&:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
|
|
}
|
|
|
|
&:backdrop { color: $backdrop_insensitive_color; }
|
|
}
|
|
|
|
&.separator {
|
|
min-height: 2px;
|
|
color: $bg_color;
|
|
|
|
&:backdrop { color: transparentize($bg_color, 0.9); }
|
|
}
|
|
|
|
&:backdrop {
|
|
border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
|
|
border-top: $backdrop_bg_color;
|
|
}
|
|
&:drop(active) {
|
|
border-style: solid none;
|
|
border-width: 1px;
|
|
border-color: $selected_borders_color;
|
|
|
|
&.after { border-top-style: none; }
|
|
|
|
&.before { border-bottom-style: none; }
|
|
}
|
|
|
|
&.expander {
|
|
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
|
|
|
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
|
|
|
color: mix($text_color, $base_color, 70%);
|
|
|
|
&:hover { color: $text_color; }
|
|
|
|
&:selected {
|
|
color: mix($selected_fg_color, $selected_bg_color, 70%);
|
|
|
|
&:hover { color: $selected_fg_color; }
|
|
|
|
&:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 70%); }
|
|
}
|
|
|
|
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
|
|
|
&:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); }
|
|
}
|
|
|
|
&.progressbar { // progress bar in treeviews
|
|
@if $variant == light { color: $base_color; }
|
|
|
|
border: 1px solid $selected_borders_color;
|
|
border-radius: 4px;
|
|
background-color: $selected_bg_color;
|
|
background-image: linear-gradient(to bottom,
|
|
$selected_bg_color,
|
|
darken($selected_bg_color, 10%));
|
|
box-shadow: inset 0 1px if($variant=='light', transparentize(white, 0.7), transparentize(white, 0.85)),
|
|
0 1px if($variant=='light', transparentize(black, 0.8), transparentize(black, 0.9));
|
|
|
|
&:selected {
|
|
&:focus, & {
|
|
border-radius: 4px;
|
|
|
|
@if $variant == 'light' {
|
|
color: $selected_bg_color;
|
|
box-shadow: none;
|
|
}
|
|
|
|
@else { box-shadow: inset 0 1px transparentize(white, 0.95); }
|
|
|
|
background-image: linear-gradient(to bottom, $base_color, darken($base_color,10%));
|
|
|
|
&:backdrop {
|
|
@if $variant == 'light' {
|
|
color: $selected_bg_color;
|
|
border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?)
|
|
}
|
|
|
|
@else { border-color: $backdrop_base_color; }
|
|
|
|
background-color: $backdrop_base_color;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:backdrop {
|
|
@if $variant == 'light' { color: $backdrop_base_color; }
|
|
|
|
@else { border-color: $backdrop_base_color; }
|
|
|
|
background-image: none;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&.trough { // progress bar trough in treeviews
|
|
background-color: transparentize($fg_color,0.9);
|
|
border-radius: 4px;
|
|
|
|
&:selected {
|
|
&:focus, & {
|
|
background-color: if($variant == 'light',
|
|
transparentize($selected_fg_color, 0.7),
|
|
darken($selected_bg_color, 10%));
|
|
border-radius: 4px;
|
|
|
|
@if $variant == 'light' {
|
|
border-width: 1px 0;
|
|
border-style: solid;
|
|
border-color: $selected_bg_color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
header {
|
|
button {
|
|
$_column_header_color: mix($fg_color, $base_color, 50%);
|
|
|
|
@extend %column_header_button;
|
|
|
|
color: $_column_header_color;
|
|
background-color: $base_color;
|
|
font-weight: bold;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
|
|
&:hover {
|
|
@extend %column_header_button;
|
|
|
|
color: mix($_column_header_color, $fg_color, 50%);
|
|
box-shadow: none;
|
|
transition: none; //I shouldn't need this
|
|
}
|
|
|
|
&:active {
|
|
@extend %column_header_button;
|
|
|
|
color: $fg_color;
|
|
transition: none; //I shouldn't need this
|
|
}
|
|
}
|
|
}
|
|
|
|
button.dnd,
|
|
header.button.dnd { // for treeview-like derive widgets
|
|
&:active, &:selected, &:hover, & {
|
|
padding: 0 6px;
|
|
color: $base_color;
|
|
background-image: none;
|
|
background-color: $selected_bg_color;
|
|
border-style: none;
|
|
border-radius: 0;
|
|
box-shadow: inset 0 0 0 1px $base_color;
|
|
text-shadow: none;
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
|
|
}
|
|
|
|
%column_header_button {
|
|
padding: 0 6px;
|
|
background-image: none;
|
|
border-style: none solid solid none;
|
|
border-color: $bg_color;
|
|
border-radius: 0;
|
|
text-shadow: none;
|
|
|
|
&:disabled {
|
|
border-color: $bg_color;
|
|
background-image: none;
|
|
}
|
|
|
|
&:backdrop {
|
|
color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
|
|
border-color: $backdrop_bg_color;
|
|
border-style: none solid solid none;
|
|
background-image: none;
|
|
background-color: $backdrop_base_color;
|
|
|
|
&:disabled {
|
|
border-color: $backdrop_bg_color;
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
&:last-child { &:backdrop, & { border-right-style: none; }}
|
|
}
|
|
|
|
|
|
/*********
|
|
* Menus *
|
|
*********/
|
|
menubar,
|
|
.menubar {
|
|
padding: 0px;
|
|
box-shadow: inset 0 -1px transparentize(black, 0.9);
|
|
|
|
&:backdrop { background-color: $backdrop_bg_color; }
|
|
|
|
> menuitem {
|
|
min-height: 16px;
|
|
padding: 4px 8px;
|
|
|
|
&:hover { //Seems like it :hover even with keyboard focus
|
|
box-shadow: inset 0 -3px $selected_bg_color;
|
|
color: $link_color;
|
|
}
|
|
|
|
&:disabled {
|
|
color: $insensitive_fg_color;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
menu,
|
|
.menu,
|
|
.context-menu {
|
|
// this is not a good solution, commenting out for now margin: 4px; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
|
|
padding: 2px 0px;
|
|
background-color: $menu_color;
|
|
border: 1px solid $borders_color; // adds borders in a non composited env
|
|
|
|
.csd & { border: none; } // axes borders in a composited env
|
|
|
|
&:backdrop { background-color: $backdrop_menu_color; }
|
|
|
|
menuitem {
|
|
min-height: 16px;
|
|
min-width: 40px;
|
|
padding: 4px 6px;
|
|
text-shadow: none;
|
|
|
|
&:hover {
|
|
color: $selected_fg_color;
|
|
background-color: $selected_bg_color;
|
|
}
|
|
|
|
&:disabled {
|
|
color: $insensitive_fg_color;
|
|
&:backdrop { color: $backdrop_insensitive_color; }
|
|
}
|
|
|
|
&:backdrop,
|
|
&:backdrop:hover {
|
|
color: $backdrop_fg_color;
|
|
background-color: transparent;
|
|
}
|
|
|
|
// submenu indicators
|
|
arrow {
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
|
|
&:dir(ltr) {
|
|
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
|
margin-left: 10px;
|
|
}
|
|
|
|
&:dir(rtl) {
|
|
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
// avoids labels color being overridden, see
|
|
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
|
|
label { &:dir(rtl), &:dir(ltr) { color: inherit; }}
|
|
}
|
|
|
|
// overflow arrows
|
|
> arrow {
|
|
@include button(undecorated);
|
|
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
padding: 4px;
|
|
background-color: $menu_color;
|
|
border-radius: 0;
|
|
|
|
&.top {
|
|
margin-top: -6px;
|
|
border-bottom: 1px solid mix($fg_color, $base_color, 10%);
|
|
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
|
|
}
|
|
|
|
&.bottom {
|
|
margin-bottom: -6px;
|
|
border-top: 1px solid mix($fg_color, $base_color, 10%);
|
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
}
|
|
|
|
&:hover { background-color: mix($fg_color, $base_color, 10%); }
|
|
|
|
&:backdrop { background-color: $backdrop_menu_color; }
|
|
|
|
&:disabled {
|
|
color: transparent;
|
|
background-color: transparent;
|
|
border-color: transparent ;
|
|
}
|
|
}
|
|
}
|
|
|
|
menuitem {
|
|
accelerator { color: gtkalpha(currentColor,0.55); }
|
|
|
|
check,
|
|
radio {
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
|
|
&:dir(ltr) { margin-right: 7px; }
|
|
&:dir(rtl) { margin-left: 7px; }
|
|
}
|
|
}
|
|
|
|
/***************
|
|
* Popovers *
|
|
***************/
|
|
|
|
popover>arrow {
|
|
background-color: $popover_bg_color;
|
|
border: 1px solid $borders_color;
|
|
}
|
|
|
|
popover>contents.menu {
|
|
padding: 8px;
|
|
background-color: white;
|
|
margin: 0px;
|
|
}
|
|
|
|
popover>contents {
|
|
padding: 2px;
|
|
margin: 0px;
|
|
}
|
|
|
|
popover>contents.background {
|
|
border-radius: 5px;
|
|
background-color: $popover_bg_color;
|
|
box-shadow: 0 1px 2px transparentize(black, 0.7);
|
|
.csd &, & { border: 1px solid $borders_color; }
|
|
|
|
&: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; }
|
|
}
|
|
|
|
|
|
/*************
|
|
* Notebooks *
|
|
*************/
|
|
notebook {
|
|
box> header {
|
|
padding: 1px;
|
|
border-color: $borders_color;
|
|
border-width: 1px;
|
|
background-color: $dark_fill;
|
|
|
|
&:backdrop {
|
|
border-color: $backdrop_borders_color;
|
|
background-color: $backdrop_dark_fill;
|
|
}
|
|
|
|
tabs { margin: -1px; }
|
|
|
|
&.top {
|
|
border-bottom-style: solid;
|
|
> tabs {
|
|
margin-bottom: -2px;
|
|
> tab {
|
|
&:hover { box-shadow: inset 0 -3px $borders_color; }
|
|
|
|
&:backdrop { box-shadow: none; }
|
|
|
|
&:checked { box-shadow: inset 0 -3px $selected_bg_color; }
|
|
}
|
|
}
|
|
}
|
|
|
|
&.bottom {
|
|
border-top-style: solid;
|
|
> tabs {
|
|
margin-top: -2px;
|
|
> tab {
|
|
&:hover { box-shadow: inset 0 3px $borders_color; }
|
|
|
|
&:backdrop { box-shadow: none; }
|
|
|
|
&:checked { box-shadow: inset 0 3px $selected_bg_color; }
|
|
}
|
|
}
|
|
}
|
|
|
|
&.left {
|
|
border-right-style: solid;
|
|
> tabs {
|
|
margin-right: -2px;
|
|
> tab {
|
|
&:hover { box-shadow: inset -3px 0 $borders_color; }
|
|
|
|
&:backdrop { box-shadow: none; }
|
|
|
|
&:checked { box-shadow: inset -3px 0 $selected_bg_color; }
|
|
}
|
|
}
|
|
}
|
|
|
|
&.right {
|
|
border-left-style: solid;
|
|
> tabs {
|
|
margin-left: -2px;
|
|
> tab {
|
|
&:hover { box-shadow: inset 3px 0 $borders_color; }
|
|
|
|
&:backdrop { box-shadow: none; }
|
|
|
|
&:checked { box-shadow: inset 3px 0 $selected_bg_color; }
|
|
}
|
|
}
|
|
}
|
|
|
|
&.top > tabs > arrow {
|
|
@extend %notebook_vert_arrows;
|
|
|
|
border-top-style: none;
|
|
}
|
|
|
|
&.bottom > tabs > arrow {
|
|
@extend %notebook_vert_arrows;
|
|
|
|
border-bottom-style: none;
|
|
}
|
|
|
|
@at-root %notebook_vert_arrows {
|
|
margin-left: -5px;
|
|
margin-right: -5px;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
|
|
&.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
|
|
|
|
&.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
|
|
}
|
|
|
|
&.left > tabs > arrow {
|
|
@extend %notebook_horz_arrows;
|
|
|
|
border-left-style: none;
|
|
}
|
|
|
|
&.right > tabs > arrow {
|
|
@extend %notebook_horz_arrows;
|
|
|
|
border-right-style: none;
|
|
}
|
|
|
|
@at-root %notebook_horz_arrows {
|
|
margin-top: -5px;
|
|
margin-bottom: -5px;
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
|
|
&.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
|
|
|
|
&.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
|
}
|
|
|
|
> tabs > arrow {
|
|
@extend %button_basic;
|
|
|
|
@extend %button_basic.flat;
|
|
|
|
min-height: 16px;
|
|
min-width: 16px;
|
|
border-radius: 0;
|
|
|
|
&:hover:not(:active):not(:backdrop) {
|
|
background-clip: padding-box;
|
|
background-image: none;
|
|
background-color: transparentize(white, 0.7);
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:disabled { @include button(undecorated); }
|
|
}
|
|
|
|
tab {
|
|
min-height: 30px;
|
|
min-width: 30px;
|
|
padding: 3px 12px;
|
|
|
|
outline-offset: -5px;
|
|
|
|
color: $insensitive_fg_color;
|
|
font-weight: bold;
|
|
|
|
border-width: 1px; // for reorderable tabs
|
|
border-color: transparent; //
|
|
|
|
&:hover {
|
|
color: mix($insensitive_fg_color, $fg_color, 50%);
|
|
|
|
&.reorderable-page {
|
|
border-color: transparentize($borders_color, 0.7);
|
|
background-color: transparentize($bg_color, 0.8);
|
|
}
|
|
}
|
|
|
|
&:backdrop {
|
|
color: mix($backdrop_fg_color, $backdrop_bg_color, 60%);
|
|
|
|
&.reorderable-page {
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
&:checked {
|
|
color: $fg_color;
|
|
&.reorderable-page {
|
|
border-color: transparentize($borders_color, 0.5);
|
|
background-color: transparentize($bg_color, 0.5);
|
|
|
|
&:hover { background-color: transparentize($bg_color, 0.3); }
|
|
}
|
|
}
|
|
|
|
&:backdrop:checked {
|
|
color: $backdrop_fg_color;
|
|
|
|
&.reorderable-page {
|
|
border-color: $backdrop_borders_color;
|
|
background-color: $backdrop_bg_color;
|
|
}
|
|
}
|
|
|
|
// colors the button like the label, overridden otherwise
|
|
button.flat {
|
|
&:hover { color: currentColor; }
|
|
|
|
&, &:backdrop { color: gtkalpha(currentColor, 0.3); }
|
|
|
|
padding: 0;
|
|
margin-top: 4px;
|
|
margin-bottom: 4px;
|
|
// FIXME: generalize .small-button?
|
|
min-width: 20px;
|
|
min-height: 20px;
|
|
|
|
&:last-child {
|
|
margin-left: 4px;
|
|
margin-right: -4px;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-left: -4px;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.top,
|
|
&.bottom {
|
|
tabs {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
|
|
&:not(:only-child) {
|
|
margin-left: 3px;
|
|
margin-right: 3px;
|
|
|
|
&:first-child { margin-left: -1px; }
|
|
&:last-child { margin-right: -1px; }
|
|
}
|
|
|
|
tab {
|
|
margin-left: 4px;
|
|
margin-right: 4px;
|
|
|
|
&.reorderable-page { border-style: none solid; }
|
|
}
|
|
}
|
|
}
|
|
|
|
&.left,
|
|
&.right {
|
|
tabs {
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
|
|
&:not(:only-child) {
|
|
margin-top: 3px;
|
|
margin-bottom: 3px;
|
|
|
|
&:first-child { margin-top: -1px; }
|
|
&:last-child { margin-bottom: -1px; }
|
|
}
|
|
|
|
tab {
|
|
margin-top: 4px;
|
|
margin-bottom: 4px;
|
|
|
|
&.reorderable-page { border-style: solid none; }
|
|
}
|
|
}
|
|
}
|
|
|
|
&.top tab { padding-bottom: 4px; }
|
|
&.bottom tab { padding-top: 4px; }
|
|
}
|
|
|
|
box > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
|
|
background-color: $base_color;
|
|
|
|
&:backdrop { background-color: $backdrop_base_color; }
|
|
}
|
|
}
|
|
|
|
|
|
/**************
|
|
* Scrollbars *
|
|
**************/
|
|
scrollbar {
|
|
$_slider_min_length: 40px;
|
|
|
|
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;
|
|
transition: $backdrop_transition;
|
|
}
|
|
|
|
// slider
|
|
slider {
|
|
min-width: 6px;
|
|
min-height: 6px;
|
|
margin: -1px;
|
|
border: 4px solid transparent;
|
|
border-radius: 8px;
|
|
background-clip: padding-box;
|
|
background-color: $scrollbar_slider_color;
|
|
|
|
&:hover { background-color: $scrollbar_slider_hover_color; }
|
|
|
|
&:hover:active { background-color: $scrollbar_slider_active_color; }
|
|
|
|
&:backdrop { background-color: $backdrop_scrollbar_slider_color; }
|
|
|
|
&:disabled { background-color: transparent; }
|
|
}
|
|
|
|
&.fine-tune {
|
|
slider {
|
|
min-width: 4px;
|
|
min-height: 4px;
|
|
}
|
|
|
|
&.horizontal slider { border-width: 5px 4px; }
|
|
&.vertical slider { border-width: 4px 5px; }
|
|
}
|
|
|
|
&.overlay-indicator {
|
|
&:not(.dragging):not(.hovering) {
|
|
border-color: transparent;
|
|
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-weight: bold;
|
|
font-size: smaller;
|
|
outline-offset: -4px;
|
|
|
|
// similar to the .scale
|
|
border: 1px solid $borders_color;
|
|
border-radius: 3px;
|
|
color: $fg_color;
|
|
background-color: $dark_fill;
|
|
text-shadow: 0 1px transparentize(black, 0.9);
|
|
|
|
&:checked {
|
|
color: $selected_fg_color;
|
|
border-color: $selected_borders_color;
|
|
background-color: $selected_bg_color;
|
|
text-shadow: 0 1px transparentize($selected_borders_color, 0.5),
|
|
0 0 2px transparentize(white, 0.4);
|
|
}
|
|
|
|
&: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_dark_fill;
|
|
text-shadow: none;
|
|
transition: $backdrop_transition;
|
|
|
|
&:checked {
|
|
@if $variant == 'light' { color: $backdrop_bg_color; }
|
|
border-color: if($variant == 'light', $selected_bg_color,
|
|
$selected_borders_color);
|
|
background-color: $selected_bg_color;
|
|
}
|
|
|
|
&:disabled {
|
|
color: $backdrop_insensitive_color;
|
|
border-color: $backdrop_borders_color;
|
|
background-color: $insensitive_bg_color;
|
|
}
|
|
}
|
|
|
|
slider {
|
|
margin: -1px;
|
|
min-width: 44px;
|
|
min-height: 26px;
|
|
border: 1px solid;
|
|
border-radius: 3px;
|
|
transition: $button_transition;
|
|
|
|
@include button(normal-alt, $edge: $shadow_color);
|
|
}
|
|
|
|
&:hover slider { @include button(hover-alt, $edge: $shadow_color); }
|
|
|
|
&:checked slider { border: 1px solid $selected_borders_color; }
|
|
|
|
&:disabled slider { @include button(insensitive); }
|
|
|
|
&:backdrop {
|
|
slider {
|
|
transition: $backdrop_transition;
|
|
|
|
@include button(backdrop);
|
|
}
|
|
|
|
&:checked slider { border-color: if($variant == 'light', $selected_bg_color, $selected_borders_color); }
|
|
|
|
&:disabled slider { @include button(backdrop-insensitive); }
|
|
}
|
|
|
|
row:selected & {
|
|
@if $variant == 'light' {
|
|
box-shadow: none;
|
|
border-color: $selected_borders_color;
|
|
|
|
&:backdrop { border-color: $selected_borders_color; }
|
|
|
|
slider:dir(rtl) { border-left-color: $borders_color; }
|
|
slider:dir(ltr) { border-right-color: $borders_color; }
|
|
|
|
slider { &:checked, & { border-color: $selected_borders_color; } }
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/*************************
|
|
* Check and Radio items *
|
|
*************************/
|
|
// draw regular check and radio items using our PNG assets
|
|
// all assets are rendered from assets.svg. never add pngs directly
|
|
|
|
|
|
//selection-mode
|
|
@each $s,$as in ('','-selectionmode'),
|
|
(':hover', '-hover-selectionmode'),
|
|
(':active', '-active-selectionmode'),
|
|
(':backdrop', '-backdrop-selectionmode'),
|
|
(':checked', '-checked-selectionmode'),
|
|
(':checked:hover', '-checked-hover-selectionmode'),
|
|
(':checked:active', '-checked-active-selectionmode'),
|
|
(':backdrop:checked', '-checked-backdrop-selectionmode') {
|
|
.view.content-view.check#{$s}:not(list),
|
|
.content-view .tile check#{$s}:not(list) {
|
|
-gtk-icon-shadow: none;
|
|
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"), url("assets/checkbox#{$as}@2.png"));
|
|
background-color: transparent;
|
|
min-width: 40px;
|
|
min-height: 40px;
|
|
background-image: none;
|
|
transition: none;
|
|
box-shadow: none;
|
|
border-width: 0;
|
|
}
|
|
}
|
|
|
|
checkbutton.text-button, radiobutton.text-button {
|
|
// this is for a nice focus on check and radios text
|
|
padding: 2px 0;
|
|
outline-offset: 0;
|
|
|
|
label:not(:only-child) {
|
|
&:first-child { margin-left: 4px; }
|
|
&:last-child { margin-right: 4px; }
|
|
}
|
|
}
|
|
|
|
check,
|
|
radio {
|
|
margin: 0 4px;
|
|
|
|
&:only-child { margin: 0; }
|
|
|
|
popover & { // when in a popover add more space between the label and the check, reset the other side margin.
|
|
// See https://bugzilla.gnome.org/show_bug.cgi?id=779570 for details.
|
|
&.left:dir(rtl) {
|
|
margin-left: 0;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
&.right:dir(ltr) {
|
|
margin-left: 12px;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
min-height: 14px;
|
|
min-width: 14px;
|
|
border: 1px solid;
|
|
-gtk-icon-source: none;
|
|
|
|
@include button(normal-alt, $edge: $shadow_color);
|
|
|
|
&:hover { @include button(hover-alt, $edge: $shadow_color); }
|
|
&:active { @include button(active); }
|
|
&:disabled { @include button(insensitive); }
|
|
&:backdrop {
|
|
@include button(backdrop);
|
|
|
|
transition: $backdrop_transition;
|
|
|
|
&:disabled { @include button(backdrop-insensitive); }
|
|
}
|
|
|
|
@if $variant == 'light' {
|
|
// the borders of the light variant versions of checks and radios are too similar in luminosity to the selected background
|
|
// color, hence we need special casing.
|
|
row:selected & { border-color: $selected_borders_color; }
|
|
}
|
|
|
|
.osd & {
|
|
@include button(osd);
|
|
|
|
&:hover { @include button(osd); }
|
|
&:active { @include button(osd-active); }
|
|
&:backdrop { @include button(osd-backdrop); }
|
|
&:disabled { @include button(osd-insensitive); }
|
|
}
|
|
|
|
menu menuitem & {
|
|
margin: 0; // this is a workaround for a menu check/radio size allocation issue
|
|
|
|
&, &:hover, &:disabled { //FIXME use button reset mixin
|
|
min-height: 14px;
|
|
min-width: 14px;
|
|
background-image: none;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
-gtk-icon-shadow: none;
|
|
color: inherit;
|
|
border-color: currentColor;
|
|
}
|
|
}
|
|
}
|
|
|
|
%check,
|
|
check {
|
|
border-radius: 3px;
|
|
|
|
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/check-symbolic.symbolic.png")); }
|
|
|
|
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/dash-symbolic.symbolic.png")); }
|
|
}
|
|
|
|
%radio,
|
|
radio {
|
|
border-radius: 100%;
|
|
|
|
&:checked { -gtk-icon-source: -gtk-recolor(url("assets/bullet-symbolic.symbolic.png")); }
|
|
|
|
&:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/dash-symbolic.symbolic.png")); }
|
|
}
|
|
|
|
// ANIMATION:
|
|
// this is made with those pretty convoluted transitions, since checks and radios have to animate only on state changes,
|
|
// the transformation is set on the active state and it get reset on the checked state.
|
|
radio:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: scale(0); }
|
|
|
|
check:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0); }
|
|
|
|
radio,
|
|
check {
|
|
&:active { -gtk-icon-transform: scale(0, 1); } // should tackle the indeterminate state, untested
|
|
|
|
&:checked:not(:backdrop), &:indeterminate:not(:backdrop) {
|
|
-gtk-icon-transform: unset;
|
|
transition: 400ms;
|
|
}
|
|
}
|
|
|
|
menu menuitem {
|
|
radio,
|
|
check {
|
|
&:checked:not(:backdrop), &:indeterminate:not(:backdrop) { transition: none; }
|
|
}
|
|
}
|
|
|
|
treeview.view check,
|
|
treeview.view radio {
|
|
&:selected {
|
|
&:focus, & {
|
|
color: $fg_color;
|
|
|
|
@if $variant == 'light' { border-color: $selected_borders_color; }
|
|
}
|
|
|
|
&:disabled {
|
|
color: $insensitive_fg_color;
|
|
|
|
&:backdrop { color: $backdrop_insensitive_color; }
|
|
}
|
|
}
|
|
|
|
&:backdrop { &:selected, & { color: $backdrop_fg_color; }}
|
|
}
|
|
|
|
treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a workaround
|
|
|
|
|
|
/************
|
|
* GtkScale *
|
|
************/
|
|
%scale_trough {
|
|
border: 1px solid $borders_color;
|
|
border-radius: 3px;
|
|
background-color: $dark_fill;
|
|
|
|
&:disabled { background-color: $insensitive_bg_color; }
|
|
|
|
&:backdrop {
|
|
background-color: $backdrop_dark_fill;
|
|
border-color: $backdrop_borders_color;
|
|
transition: $backdrop_transition;
|
|
|
|
&:disabled { background-color: $insensitive_bg_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);
|
|
|
|
&:disabled { background-color: $osd_insensitive_bg_color; }
|
|
}
|
|
}
|
|
|
|
%scale_highlight {
|
|
border: 1px solid $selected_borders_color;
|
|
border-radius: 3px;
|
|
background-color: $selected_bg_color;
|
|
|
|
&:disabled {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
}
|
|
|
|
&:backdrop {
|
|
border-color: if($variant=='light', $selected_bg_color,
|
|
$selected_borders_color);
|
|
&: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;
|
|
|
|
// those are inside the trough node, I need them to show their own border over the trough one, so negative margin
|
|
fill,
|
|
highlight { margin: -1px; }
|
|
|
|
// the slider is inside the trough, so to have make it bigger there's a negative margin
|
|
|
|
slider {
|
|
min-height: 18px;
|
|
min-width: 18px;
|
|
margin: -9px;
|
|
}
|
|
|
|
// click-and-hold the slider to activate
|
|
&.fine-tune {
|
|
&.horizontal {
|
|
padding-top: 9px;
|
|
padding-bottom: 9px;
|
|
min-height: 16px;
|
|
}
|
|
|
|
&.vertical {
|
|
padding-left: 9px;
|
|
padding-right: 9px;
|
|
min-width: 16px;
|
|
}
|
|
|
|
// to make the trough grow in fine-tune mode
|
|
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; }
|
|
|
|
&: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-alt, $edge: $shadow_color);
|
|
|
|
border: 1px solid darken($alt_borders_color, 3%);
|
|
border-radius: 100%;
|
|
transition: $button_transition;
|
|
transition-property: background, border, box-shadow;
|
|
|
|
&:hover { @include button(hover-alt, $edge: $shadow_color); }
|
|
|
|
&:active { border-color: $selected_borders_color; }
|
|
|
|
&:disabled { @include button(insensitive); }
|
|
|
|
&:backdrop {
|
|
transition: $backdrop_transition;
|
|
|
|
@include button(backdrop);
|
|
|
|
&:disabled { @include button(backdrop-insensitive); }
|
|
}
|
|
|
|
// ...on selected list rows
|
|
row:selected & { &:disabled, & { border-color: $selected_borders_color; } }
|
|
|
|
// OSD
|
|
.osd & {
|
|
@include button(osd);
|
|
border-color: darken($osd_borders_color, 3%);
|
|
background-color: opacify($osd_bg_color, 1); // solid background needed here
|
|
|
|
&:hover {
|
|
@include button(osd-hover);
|
|
background-color: opacify($osd_bg_color, 1); // solid background needed here
|
|
}
|
|
|
|
&:active {
|
|
@include button(osd-active);
|
|
background-color: opacify($osd_bg_color, 1); // solid background needed here
|
|
}
|
|
|
|
&:disabled {
|
|
@include button(osd-insensitive);
|
|
background-color: opacify($osd_bg_color, 1); // solid background needed here
|
|
}
|
|
|
|
&:backdrop {
|
|
@include button(osd-backdrop);
|
|
background-color: opacify($osd_bg_color, 1); // solid background needed here
|
|
|
|
&:disabled {
|
|
@include button(osd-backdrop-insensitive);
|
|
background-color: opacify($osd_bg_color, 1); // solid background needed here
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
value { color: gtkalpha(currentColor, 0.55); }
|
|
|
|
marks {
|
|
color: gtkalpha(currentColor, 0.55);
|
|
|
|
@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 {
|
|
background-color: currentColor;
|
|
min-height: $_marks_length;
|
|
min-width: 1px;
|
|
}
|
|
|
|
&.fine-tune indicator { min-height: ($_marks_length - 3px); }
|
|
}
|
|
|
|
&.vertical {
|
|
indicator {
|
|
background-color: currentColor;
|
|
min-height: 1px;
|
|
min-width: $_marks_length;
|
|
}
|
|
|
|
&.fine-tune indicator { min-width: ($_marks_length - 3px); }
|
|
}
|
|
|
|
// *WARNING* scale with marks madness following
|
|
|
|
// FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
|
|
$suffix: if($variant == 'light', '', '-dark');
|
|
|
|
@each $dir_class, $dir_infix in ('horizontal', 'horz'),
|
|
('vertical', 'vert') {
|
|
@each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
|
|
('scale-has-marks-below', 'marks-after:not(.marks-before)') {
|
|
@each $state, $state_infix in ('', ''),
|
|
(':hover', '-hover'),
|
|
(':active', '-active'),
|
|
(':disabled', '-insensitive'),
|
|
(':backdrop', '-backdrop'),
|
|
(':backdrop:disabled', '-backdrop-insensitive') {
|
|
&.#{$dir_class}.#{$marks_class} {
|
|
|
|
slider {
|
|
&#{$state} {
|
|
// an asymmetric slider asset is used here, so the margins are uneven, the smaller
|
|
// margin is set on the point side.
|
|
margin: -10px;
|
|
$_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
|
|
border-style: none;
|
|
border-radius: 0;
|
|
|
|
background-color: transparent;
|
|
background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
|
|
|
|
$_scale_slider_bg_pos: bottom;
|
|
|
|
@if $dir_class == 'horizontal' {
|
|
min-height: 26px;
|
|
min-width: 22px;
|
|
|
|
@if $marks_infix == 'scale-has-marks-above' {
|
|
margin-top: -14px;
|
|
|
|
$_scale_slider_bg_pos: top;
|
|
}
|
|
|
|
@else { margin-bottom: -14px; }
|
|
}
|
|
|
|
@else {
|
|
min-height: 22px;
|
|
min-width: 26px;
|
|
|
|
@if $marks_infix == 'scale-has-marks-above' {
|
|
margin-left: -14px;
|
|
|
|
$_scale_slider_bg_pos: left bottom;
|
|
}
|
|
|
|
@else {
|
|
margin-right: -14px;
|
|
|
|
$_scale_slider_bg_pos: right bottom;
|
|
}
|
|
}
|
|
|
|
background-position: $_scale_slider_bg_pos;
|
|
background-repeat: no-repeat;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&.fine-tune slider {
|
|
// bigger negative margins to make the trough grow here as well
|
|
margin: -7px;
|
|
|
|
@if $dir_class == 'horizontal' {
|
|
@if $marks_infix == 'scale-has-marks-above' { margin-top: -11px; }
|
|
|
|
@else { margin-bottom: -11px; }
|
|
}
|
|
|
|
@else {
|
|
@if $marks_infix == 'scale-has-marks-above' { margin-left: -11px; }
|
|
|
|
@else { margin-right: -11px; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.color {
|
|
min-height: 0;
|
|
min-width: 0;
|
|
|
|
trough {
|
|
background-image: image($borders_color);
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
&.horizontal {
|
|
padding: 0 0 15px 0;
|
|
|
|
trough {
|
|
padding-bottom: 4px;
|
|
background-position: 0 -3px;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
slider {
|
|
&:dir(ltr), &:dir(rtl) { // specificity bumb
|
|
&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
|
|
margin-bottom: -15px;
|
|
margin-top: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.vertical {
|
|
&:dir(ltr) {
|
|
padding: 0 0 0 15px;
|
|
|
|
trough {
|
|
padding-left: 4px;
|
|
background-position: 3px 0;
|
|
border-bottom-right-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
slider {
|
|
&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
|
|
margin-left: -15px;
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:dir(rtl) {
|
|
padding: 0 15px 0 0;
|
|
|
|
trough {
|
|
padding-right: 4px;
|
|
background-position: -3px 0;
|
|
border-bottom-left-radius: 0;
|
|
border-top-left-radius: 0;
|
|
}
|
|
|
|
slider {
|
|
&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
|
|
margin-right: -15px;
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.fine-tune {
|
|
&.horizontal {
|
|
&:dir(ltr), &:dir(rtl) { // specificity bump
|
|
padding: 0 0 12px 0;
|
|
|
|
trough {
|
|
padding-bottom: 7px;
|
|
background-position: 0 -6px;
|
|
}
|
|
|
|
slider {
|
|
margin-bottom: -15px;
|
|
margin-top: 6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.vertical {
|
|
&:dir(ltr) {
|
|
padding: 0 0 0 12px;
|
|
|
|
trough {
|
|
padding-left: 7px;
|
|
background-position: 6px 0;
|
|
}
|
|
|
|
slider {
|
|
margin-left: -15px;
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
|
|
&:dir(rtl) {
|
|
padding: 0 12px 0 0;
|
|
|
|
trough {
|
|
padding-right: 7px;
|
|
background-position: -6px 0;
|
|
}
|
|
|
|
slider {
|
|
margin-right: -15px;
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/*****************
|
|
* Progress bars *
|
|
*****************/
|
|
progressbar {
|
|
// sizing
|
|
&.horizontal {
|
|
trough,
|
|
progress { min-height: 2px; }
|
|
}
|
|
|
|
&.vertical {
|
|
trough,
|
|
progress { min-width: 2px; }
|
|
}
|
|
|
|
&.horizontal progress { margin: 0 -1px; } // the progress node is positioned after the trough border
|
|
&.vertical progress { margin: -1px 0; } // this moves it over it.
|
|
|
|
|
|
// FIXME: insensitive state missing and some other state should be set probably
|
|
font-size: smaller;
|
|
color: transparentize($fg_color, 0.6);
|
|
|
|
&:backdrop {
|
|
box-shadow: none;
|
|
transition: $backdrop_transition;
|
|
}
|
|
|
|
trough { @extend %scale_trough; }
|
|
|
|
&:backdrop trough { @extend %scale_trough:backdrop; } // looks like states are not passed to the trough component here
|
|
|
|
progress {
|
|
@extend %scale_highlight;
|
|
|
|
border-radius: 1.5px;
|
|
|
|
&.left {
|
|
border-top-left-radius: 2px;
|
|
border-bottom-left-radius: 2px;
|
|
}
|
|
|
|
&.right {
|
|
border-top-right-radius: 2px;
|
|
border-bottom-right-radius: 2px;
|
|
}
|
|
|
|
&.top {
|
|
border-top-right-radius: 2px;
|
|
border-top-left-radius: 2px;
|
|
}
|
|
|
|
&.bottom {
|
|
border-bottom-right-radius: 2px;
|
|
border-bottom-left-radius: 2px;
|
|
}
|
|
}
|
|
|
|
&:backdrop progress { @extend %scale_highlight:backdrop; } // states not passed here as well
|
|
|
|
&.osd { // progressbar.osd used for epiphany page loading progress
|
|
min-width: 3px;
|
|
min-height: 3px;
|
|
background-color: transparent;
|
|
|
|
trough {
|
|
border-style: none;
|
|
border-radius: 0;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
progress {
|
|
border-style: none;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
trough.empty progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
|
|
}
|
|
|
|
/*************
|
|
* Level Bar *
|
|
*************/
|
|
levelbar {
|
|
&.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;
|
|
}
|
|
}
|
|
|
|
&:backdrop { transition: $backdrop_transition; }
|
|
|
|
trough {
|
|
border: 1px solid;
|
|
padding: 2px;
|
|
border-radius: 3px;
|
|
@include entry(normal);
|
|
|
|
&:backdrop { @include entry(backdrop); }
|
|
}
|
|
|
|
block {
|
|
border: 1px solid;
|
|
border-radius: 1px;
|
|
|
|
&.low {
|
|
border-color: if($variant == 'light', darken($warning_color, 20%), $warning_color);
|
|
background-color: $warning_color;
|
|
|
|
&:backdrop { border-color: $warning_color; };
|
|
}
|
|
|
|
&.high,
|
|
&:not(.empty) {
|
|
border-color: if($variant == 'light', darken($selected_bg_color, 20%), $selected_bg_color);
|
|
background-color: $selected_bg_color;
|
|
|
|
&:backdrop { border-color: $selected_bg_color; }
|
|
}
|
|
|
|
&.full {
|
|
border-color: if($variant == 'light', darken($success_color, 20%), $success_color);
|
|
background-color: $success_color;
|
|
|
|
&:backdrop { border-color: $success_color; };
|
|
}
|
|
|
|
&.empty {
|
|
background-color: transparent;
|
|
border-color: if($variant == 'light', transparentize($fg_color,0.8), transparentize($fg_color,0.9));
|
|
|
|
&:backdrop { border-color: transparentize($backdrop_fg_color,0.85); }
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/****************
|
|
* Print dialog *
|
|
*****************/
|
|
printdialog {
|
|
paper {
|
|
color: $fg_color;
|
|
border: 1px solid $borders_color;
|
|
background: white;
|
|
padding: 0;
|
|
|
|
&:backdrop {
|
|
color: $backdrop_fg_color;
|
|
border-color: $backdrop_borders_color;
|
|
}
|
|
}
|
|
|
|
.dialog-action-box { margin: 12px; }
|
|
}
|
|
|
|
|
|
/**********
|
|
* Frames *
|
|
**********/
|
|
frame,
|
|
.frame {
|
|
box-shadow: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
border: 1px solid $borders_color;
|
|
|
|
&.flat { border-style: none; }
|
|
|
|
&:backdrop { border-color: $backdrop_borders_color; }
|
|
}
|
|
|
|
actionbar > revealer > box {
|
|
padding: 6px;
|
|
border-top: 1px solid $borders_color;
|
|
|
|
&:backdrop { border-color: $backdrop_borders_color; }
|
|
}
|
|
|
|
scrolledwindow {
|
|
viewport.frame { // avoid double borders when viewport inside scrolled window
|
|
border-style: none;
|
|
}
|
|
|
|
// This is used when content is touch-dragged past boundaries.
|
|
// draws a box on top of the content, the size changes programmatically.
|
|
overshoot {
|
|
&.top {
|
|
@include overshoot(top);
|
|
|
|
&:backdrop { @include overshoot(top, backdrop); }
|
|
}
|
|
|
|
&.bottom {
|
|
@include overshoot(bottom);
|
|
|
|
&:backdrop { @include overshoot(bottom, backdrop); }
|
|
}
|
|
|
|
&.left {
|
|
@include overshoot(left);
|
|
|
|
&:backdrop { @include overshoot(left, backdrop); }
|
|
}
|
|
|
|
&.right {
|
|
@include overshoot(right);
|
|
|
|
&:backdrop { @include overshoot(right, backdrop); }
|
|
}
|
|
}
|
|
|
|
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
|
|
undershoot {
|
|
&.top { @include undershoot(top); }
|
|
|
|
&.bottom { @include undershoot(bottom); }
|
|
|
|
&.left { @include undershoot(left); }
|
|
|
|
&.right { @include undershoot(right); }
|
|
}
|
|
|
|
junction { // the small square between two scrollbars
|
|
border-color: transparent;
|
|
// the border image is used to add the missing dot between the borders, details, details, details...
|
|
border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch;
|
|
background-color: $scrollbar_bg_color;
|
|
|
|
&:dir(rtl) { border-image-slice: 0 1 0 0; }
|
|
|
|
&:backdrop {
|
|
border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px);
|
|
background-color: $backdrop_scrollbar_bg_color;
|
|
transition: $backdrop_transition;
|
|
}
|
|
}
|
|
}
|
|
|
|
//vbox and hbox separators
|
|
separator {
|
|
background: transparentize(black, 0.9);
|
|
min-width: 1px;
|
|
min-height: 1px;
|
|
}
|
|
|
|
|
|
/*********
|
|
* Lists *
|
|
*********/
|
|
list {
|
|
color: $text_color;
|
|
background-color: $base_color;
|
|
border-color: $borders_color;
|
|
|
|
&:backdrop {
|
|
background-color: $backdrop_base_color;
|
|
border-color: $backdrop_borders_color;
|
|
}
|
|
|
|
row { padding: 2px; }
|
|
}
|
|
|
|
row {
|
|
transition: all 150ms $ease-out-quad;
|
|
|
|
&:hover { transition: none; }
|
|
|
|
&:backdrop { transition: $backdrop_transition; }
|
|
|
|
&.activatable {
|
|
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
|
|
|
|
&:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95)); }
|
|
|
|
&:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }
|
|
|
|
&:backdrop:hover { background-color: transparent; }
|
|
|
|
&:selected {
|
|
&:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
|
|
|
|
&.has-open-popup,
|
|
&:hover { background-color: mix($fg_color, $selected_bg_color, 10%); }
|
|
|
|
&:backdrop { background-color: $selected_bg_color; }
|
|
}
|
|
}
|
|
|
|
&:selected { @extend %selected_items; }
|
|
}
|
|
|
|
|
|
/*********************
|
|
* App Notifications *
|
|
*********************/
|
|
.app-notification,
|
|
.app-notification.frame {
|
|
@extend %osd;
|
|
|
|
padding: 10px;
|
|
border-radius: 0 0 5px 5px;
|
|
background-color: $osd_bg_color;
|
|
background-image: linear-gradient(to bottom, transparentize(black, 0.8),
|
|
transparent 2px);
|
|
background-clip: padding-box;
|
|
|
|
&:backdrop {
|
|
background-image: none;
|
|
transition: $backdrop_transition;
|
|
}
|
|
|
|
button { @extend %osd_button; }
|
|
|
|
border { border: none; }
|
|
}
|
|
|
|
|
|
/*************
|
|
* Expanders *
|
|
*************/
|
|
expander {
|
|
arrow {
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
|
|
|
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
|
|
|
&:hover { color: lighten($fg_color,30%); } //only lightens the arrow
|
|
|
|
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
|
}
|
|
}
|
|
|
|
|
|
/************
|
|
* Calendar *
|
|
***********/
|
|
calendar {
|
|
color: $text_color;
|
|
border: 1px solid $borders_color;
|
|
|
|
&:selected {
|
|
@extend %selected_items;
|
|
|
|
border-radius: 3px;
|
|
}
|
|
|
|
&.header {
|
|
border-bottom-color: transparentize(black, 0.9);
|
|
|
|
&:backdrop { border-bottom-color: transparentize(black, 0.9); }
|
|
}
|
|
|
|
&.button {
|
|
@extend %undecorated_button;
|
|
|
|
color: transparentize($fg_color, 0.55);
|
|
|
|
&:hover { color: $fg_color; }
|
|
|
|
&:backdrop { color: transparentize($backdrop_fg_color,0.55); }
|
|
|
|
&:disabled { color: transparentize($insensitive_fg_color,0.55); }
|
|
}
|
|
|
|
&.highlight {
|
|
color: $insensitive_fg_color;
|
|
|
|
&:backdrop { color: $backdrop_insensitive_color; }
|
|
}
|
|
|
|
&:backdrop {
|
|
color: $backdrop_text_color;
|
|
border-color: $backdrop_borders_color;
|
|
}
|
|
|
|
&:indeterminate { color: gtkalpha(currentColor, 0.1); }
|
|
}
|
|
|
|
|
|
/***********
|
|
* Dialogs *
|
|
***********/
|
|
messagedialog { // Message Dialog styling
|
|
.titlebar {
|
|
min-height: 20px;
|
|
background-image: none;
|
|
background-color: $bg_color;
|
|
border-style: none;
|
|
border-top-left-radius: 7px;
|
|
border-top-right-radius: 7px;
|
|
}
|
|
|
|
&.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: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround
|
|
border-radius: 0;
|
|
border-left-style: solid;
|
|
border-right-style: none;
|
|
border-bottom-style: none;
|
|
|
|
&:first-child{
|
|
border-left-style: none;
|
|
border-bottom-left-radius: 7px;
|
|
-gtk-outline-bottom-left-radius: 5px;
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom-right-radius: 7px;
|
|
-gtk-outline-bottom-right-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-style: none;
|
|
background-color: mix($bg_color, $base_color, 50%);
|
|
|
|
@at-root %sidebar_left,
|
|
&:dir(ltr),
|
|
&.left,
|
|
&.left:dir(rtl) {
|
|
border-right: 1px solid $borders_color;
|
|
border-left-style: none;
|
|
}
|
|
|
|
@at-root %sidebar_right
|
|
&:dir(rtl),
|
|
&.right {
|
|
border-left: 1px solid $borders_color;
|
|
border-right-style: none;
|
|
}
|
|
|
|
&:backdrop {
|
|
background-color: $backdrop_sidebar_bg_color;
|
|
border-color: $backdrop_borders_color;
|
|
transition: $backdrop_transition;
|
|
}
|
|
|
|
list { background-color: transparent; }
|
|
|
|
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
|
|
}
|
|
|
|
stacksidebar {
|
|
&.sidebar {
|
|
&:dir(ltr),
|
|
&.left,
|
|
&.left:dir(rtl) { list { @extend %sidebar_left; }}
|
|
|
|
&:dir(rtl),
|
|
&.right { list { @extend %sidebar_right; }}
|
|
}
|
|
|
|
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;
|
|
|
|
row image.sidebar-icon { opacity: $_placesidebar_icons_opacity; } // dim the sidebar icons
|
|
// see bug #786613 for details
|
|
// on this oddity
|
|
|
|
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; }
|
|
|
|
&:selected { color: $selected_fg_color; }
|
|
|
|
&:disabled { color: $insensitive_fg_color; }
|
|
|
|
&:backdrop {
|
|
color: $backdrop_fg_color;
|
|
|
|
&:selected { color: $backdrop_selected_fg_color; }
|
|
|
|
&:disabled { color: $backdrop_insensitive_color; }
|
|
}
|
|
|
|
image.sidebar-icon {
|
|
&: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: image($drop_target_color);
|
|
background-clip: content-box;
|
|
}
|
|
|
|
&.sidebar-new-bookmark-row { color: $selected_bg_color; }
|
|
|
|
&:drop(active):not(:disabled) {
|
|
color: $drop_target_color;
|
|
box-shadow: inset 0 1px $drop_target_color,
|
|
inset 0 -1px $drop_target_color;
|
|
|
|
&:selected {
|
|
color: $selected_fg_color;
|
|
background-color: $drop_target_color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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; }
|
|
|
|
// this selects the "connect to server" label
|
|
> actionbar > revealer > box > label {
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
}
|
|
|
|
|
|
/*********
|
|
* Paned *
|
|
*********/
|
|
paned {
|
|
> separator {
|
|
min-width: 1px;
|
|
min-height: 1px;
|
|
-gtk-icon-source: none; // defeats the ugly default handle decoration
|
|
border-style: none; // just to be sure
|
|
background-color: transparent;
|
|
// workaround, using background istead of a border since the border will get rendered twice (?)
|
|
background-image: image($borders_color);
|
|
background-size: 1px 1px;
|
|
|
|
&:selected { background-image: image($selected_bg_color); } // FIXME is this needed?
|
|
|
|
&:backdrop { background-image: image($backdrop_borders_color); }
|
|
|
|
&.wide {
|
|
min-width: 5px;
|
|
min-height: 5px;
|
|
background-color: $bg_color;
|
|
background-image: image($borders_color), image($borders_color);
|
|
background-size: 1px 1px, 1px 1px;
|
|
|
|
&:backdrop {
|
|
background-color: $backdrop_bg_color;
|
|
background-image: image($backdrop_borders_color),
|
|
image($backdrop_borders_color);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.horizontal > separator {
|
|
background-repeat: repeat-y;
|
|
|
|
&:dir(ltr) {
|
|
margin: 0 -8px 0 0;
|
|
padding: 0 8px 0 0;
|
|
background-position: left;
|
|
}
|
|
&:dir(rtl) {
|
|
margin: 0 0 0 -8px;
|
|
padding: 0 0 0 8px;
|
|
background-position: right;
|
|
}
|
|
|
|
&.wide {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-repeat: repeat-y, repeat-y;
|
|
background-position: left, right;
|
|
}
|
|
}
|
|
|
|
&.vertical > separator {
|
|
margin: 0 0 -8px 0;
|
|
padding: 0 0 8px 0;
|
|
background-repeat: repeat-x;
|
|
background-position: top;
|
|
|
|
&.wide {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-repeat: repeat-x, repeat-x;
|
|
background-position: bottom, top;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/**************
|
|
* GtkInfoBar *
|
|
**************/
|
|
infobar {
|
|
border-style: none;
|
|
|
|
&.info,
|
|
&.question,
|
|
&.warning,
|
|
&.error {
|
|
&:backdrop, & {
|
|
label, & { color: $selected_fg_color; }
|
|
background-color: $selected_bg_color;
|
|
border-color: darken($selected_bg_color, 10%);
|
|
}
|
|
|
|
text-shadow: 0 1px darken($selected_bg_color, 10%);
|
|
|
|
&:backdrop { text-shadow: none; }
|
|
|
|
button {
|
|
// FIXME: extend selection mode buttons
|
|
@include button(normal, $selected_bg_color, $selected_fg_color, none);
|
|
|
|
&:hover { @include button(hover, $selected_bg_color, $selected_fg_color, none); }
|
|
|
|
&:active,
|
|
&:checked { @include button(active, $selected_bg_color, $selected_fg_color, none); }
|
|
|
|
&:disabled { @include button(insensitive,$selected_bg_color,$selected_fg_color,none); }
|
|
|
|
&:backdrop {
|
|
@include button(backdrop, $selected_bg_color, $selected_fg_color, none);
|
|
border-color: _border_color($selected_bg_color);
|
|
|
|
&:disabled {
|
|
@include button(backdrop-insensitive, $selected_bg_color,
|
|
$selected_fg_color, none);
|
|
border-color: _border_color($selected_bg_color);
|
|
}
|
|
}
|
|
}
|
|
|
|
selection { background-color: darken($selected_bg_color, 10%); }
|
|
|
|
*:link { @extend %link_selected; }
|
|
}
|
|
}
|
|
|
|
|
|
/************
|
|
* Tooltips *
|
|
************/
|
|
tooltip {
|
|
&.background {
|
|
// background-color needs to be set this way otherwise it gets drawn twice
|
|
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
|
|
background-color: transparentize(black, 0.2);
|
|
background-clip: padding-box;
|
|
border: 1px solid $tooltip_borders_color; // this suble border is meant to
|
|
// not make the tooltip melt with
|
|
// very dark backgrounds
|
|
}
|
|
|
|
padding: 4px; /* not working */
|
|
border-radius: 5px;
|
|
box-shadow: none; // otherwise it gets inherited by windowframe.csd
|
|
text-shadow: 0 1px black;
|
|
|
|
// 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 {}, colorswatch has the programmatically set background, so most of the style is
|
|
// applied to the overlay box.
|
|
|
|
&:drop(active), & { border-style: none; } // FIXME: implement a proper drop(active) state
|
|
|
|
$_colorswatch_radius: 5px;
|
|
|
|
// base color corners rounding
|
|
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
|
|
// sports a bigger radius.
|
|
// nth-child is needed by the custom color strip.
|
|
|
|
&.top {
|
|
border-top-left-radius: $_colorswatch_radius + 0.5px;
|
|
border-top-right-radius: $_colorswatch_radius + 0.5px;
|
|
|
|
overlay {
|
|
border-top-left-radius: $_colorswatch_radius;
|
|
border-top-right-radius: $_colorswatch_radius;
|
|
}
|
|
}
|
|
|
|
&.bottom {
|
|
border-bottom-left-radius: $_colorswatch_radius + 0.5px;
|
|
border-bottom-right-radius: $_colorswatch_radius + 0.5px;
|
|
|
|
overlay {
|
|
border-bottom-left-radius: $_colorswatch_radius;
|
|
border-bottom-right-radius: $_colorswatch_radius;
|
|
}
|
|
}
|
|
|
|
&.left,
|
|
&:first-child:not(.top) {
|
|
border-top-left-radius: $_colorswatch_radius + 0.5px;
|
|
border-bottom-left-radius: $_colorswatch_radius + 0.5px;
|
|
|
|
overlay {
|
|
border-top-left-radius: $_colorswatch_radius;
|
|
border-bottom-left-radius: $_colorswatch_radius;
|
|
}
|
|
}
|
|
|
|
&.right,
|
|
&:last-child:not(.bottom) {
|
|
border-top-right-radius: $_colorswatch_radius + 0.5px;
|
|
border-bottom-right-radius: $_colorswatch_radius + 0.5px;
|
|
|
|
overlay {
|
|
border-top-right-radius: $_colorswatch_radius;
|
|
border-bottom-right-radius: $_colorswatch_radius;
|
|
}
|
|
}
|
|
|
|
&.dark {
|
|
outline-color: transparentize(white, 0.4);
|
|
|
|
overlay {
|
|
color: white;
|
|
|
|
&:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); }
|
|
|
|
&:backdrop { color: transparentize(white, 0.5); }
|
|
}
|
|
}
|
|
|
|
&.light {
|
|
outline-color: transparentize(black, 0.4);
|
|
|
|
overlay {
|
|
color: black;
|
|
|
|
&:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); }
|
|
|
|
&:backdrop { color: transparentize(black, 0.5); }
|
|
}
|
|
}
|
|
|
|
&:drop(active) {
|
|
box-shadow: none;
|
|
|
|
&.light overlay {
|
|
border-color: $drop_target_color;
|
|
box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color),
|
|
inset 0 0 0 1px $drop_target_color;
|
|
}
|
|
|
|
&.dark overlay {
|
|
border-color: $drop_target_color;
|
|
box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize(black, 0.7), $borders_color),
|
|
inset 0 0 0 1px $drop_target_color;
|
|
}
|
|
}
|
|
|
|
overlay {
|
|
border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
|
|
|
|
&:hover {
|
|
box-shadow: inset 0 1px transparentize(white, 0.6),
|
|
inset 0 -1px transparentize(black, 0.8);
|
|
}
|
|
|
|
&:backdrop, &:backdrop:hover {
|
|
border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&#add-color-button {
|
|
border-radius: $_colorswatch_radius $_colorswatch_radius 0 0;
|
|
|
|
&:only-child { border-radius: $_colorswatch_radius; }
|
|
|
|
overlay {
|
|
@include button(normal);
|
|
|
|
&:hover { @include button(hover); }
|
|
|
|
&:backdrop { @include button(backdrop); }
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
|
|
overlay {
|
|
border-color: transparentize(black, 0.4);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }
|
|
|
|
&#editor-color-sample {
|
|
border-radius: 4px;
|
|
|
|
overlay { border-radius: 4.5px; }
|
|
}
|
|
}
|
|
|
|
// colorscale popup
|
|
colorchooser .popover.osd { border-radius: 5px; }
|
|
|
|
/********
|
|
* Misc *
|
|
********/
|
|
//content view (grid/list)
|
|
.content-view {
|
|
background-color: darken($bg_color,7%);
|
|
|
|
&:hover { -gtk-icon-filter: brightness(1.2); }
|
|
|
|
&:backdrop { background-color: darken($bg_color,7%); }
|
|
|
|
rubberband, .rubberband { @extend rubberband; }
|
|
}
|
|
|
|
.scale-popup {
|
|
.osd & { @extend %osd; }
|
|
|
|
.osd & button.flat { //FIXME: quick hack, redo properly
|
|
border-style: none;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
button { // +/- buttons on GtkVolumeButton popup
|
|
&:hover {
|
|
@extend %undecorated_button;
|
|
background-color: transparentize($fg_color,0.9);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
&:backdrop { &:hover, &:disabled, & { @extend %undecorated_button; }}
|
|
}
|
|
}
|
|
|
|
|
|
/**********************
|
|
* 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: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
|
|
$_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 0.1));
|
|
|
|
box-shadow: 0 3px 9px 1px transparentize(black, 0.5),
|
|
0 0 0 1px $_wm_border; //doing borders with box-shadow
|
|
|
|
// FIXME rationalize shadows
|
|
|
|
// this is used for the resize cursor area
|
|
margin: 10px;
|
|
|
|
&:backdrop {
|
|
// the transparent shadow here is to enforce that the shadow extents don't
|
|
// change when we go to backdrop, to prevent jumping windows.
|
|
// The biggest shadow should be in the same order then in the active state
|
|
// or the jumping will happen during the transition.
|
|
box-shadow: 0 3px 9px 1px transparent,
|
|
0 2px 6px 2px transparentize(black, 0.8),
|
|
0 0 0 1px $_wm_border_backdrop;
|
|
transition: $backdrop_transition;
|
|
}
|
|
|
|
.maximized &,
|
|
.fullscreen &,
|
|
.tiled &,
|
|
.tiled-top &,
|
|
.tiled-left &,
|
|
.tiled-right &,
|
|
.tiled-bottom & { border-radius: 0; }
|
|
|
|
.popup & { box-shadow: none; }
|
|
|
|
// server-side decorations as used by mutter
|
|
.ssd & { box-shadow: 0 0 0 1px $_wm_border; } //just doing borders, wm draws actual shadows
|
|
|
|
.csd.popup & {
|
|
border-radius: 0;
|
|
box-shadow: 0 1px 2px transparentize(black, 0.8),
|
|
0 0 0 1px transparentize($_wm_border, 0.1);
|
|
}
|
|
|
|
tooltip.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 & {
|
|
margin: 0;
|
|
padding: 4px;
|
|
background-color: $borders_color;
|
|
border: solid 1px $borders_color;
|
|
border-radius: 0;
|
|
box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $top_hilight;
|
|
|
|
&:backdrop { box-shadow: inset 0 0 0 3px $backdrop_bg_color, inset 0 1px $top_hilight; }
|
|
}
|
|
}
|
|
|
|
// Window Close button
|
|
button.titlebutton {
|
|
@extend %button_basic;
|
|
|
|
@extend %button_basic.flat;
|
|
|
|
@include _button_text_shadow;
|
|
|
|
.selection-mode & {
|
|
@extend %button.flat.suggested-action;
|
|
|
|
@extend %nobg_selected_items;
|
|
}
|
|
|
|
&:backdrop { -gtk-icon-shadow: none; }
|
|
}
|
|
|
|
headerbar.selection-mode button.titlebutton,
|
|
.titlebar.selection-mode button.titlebutton {
|
|
@include _button_text_shadow(white, $selected_bg_color);
|
|
|
|
&:backdrop { -gtk-icon-shadow: none; }
|
|
}
|
|
|
|
|
|
// catch all extend :)
|
|
|
|
%selected_items {
|
|
background-color: $selected_bg_color;
|
|
|
|
@at-root %nobg_selected_items, & {
|
|
color: $selected_fg_color;
|
|
|
|
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
|
|
|
|
&:backdrop {
|
|
color: $backdrop_selected_fg_color;
|
|
|
|
&:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
|
|
}
|
|
}
|
|
}
|
|
|
|
.monospace { font-family: monospace; }
|
|
|
|
|
|
/**********************
|
|
* Touch Copy & Paste *
|
|
*********************/
|
|
//touch selection handlebars for the Popover.osd above
|
|
cursor-handle {
|
|
background-color: transparent;
|
|
background-image: none;
|
|
box-shadow: none;
|
|
border-style: none;
|
|
|
|
@each $s,$as in ('',''),
|
|
(':hover','-hover'),
|
|
(':active','-active') { //no need for insensitive and backdrop
|
|
&.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
|
|
$_url: 'assets/text-select-start#{$as}#{$asset_suffix}';
|
|
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
|
|
url('#{$_url}@2.png'));
|
|
padding-left: 10px;
|
|
}
|
|
|
|
&.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
|
|
$_url: 'assets/text-select-end#{$as}#{$asset_suffix}';
|
|
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
|
|
url('#{$_url}@2.png'));
|
|
padding-right: 10px;
|
|
}
|
|
|
|
&.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) {
|
|
$_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
|
|
-gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
|
|
url('#{$_url}@2.png'));
|
|
}
|
|
}
|
|
}
|
|
|
|
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
|
|
|
|
// shortcut window keys
|
|
.keycap {
|
|
min-width: 20px;
|
|
min-height: 25px;
|
|
margin-top: 2px;
|
|
padding-bottom: 3px;
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
|
|
color: $fg_color;
|
|
background-color: $base_color;
|
|
border: 1px solid;
|
|
border-color: if($variant == 'light', mix($borders_color, $bg_color, 50%), $borders_color);
|
|
border-radius: 5px;
|
|
box-shadow: if($variant == 'light', inset 0 -3px mix($base_color, $bg_color, 20%), inset 0 -3px mix($borders_color, $base_color, 60%));
|
|
font-size: smaller;
|
|
|
|
&:backdrop {
|
|
background-color: $backdrop_base_color;
|
|
color: $backdrop_fg_color;
|
|
transition: $backdrop_transition;
|
|
}
|
|
}
|
|
|
|
:not(decoration):not(window):drop(active):focus,
|
|
:not(decoration):not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
|
|
border-color: $drop_target_color;
|
|
box-shadow: inset 0 0 0 1px $drop_target_color;
|
|
caret-color: $drop_target_color;
|
|
}
|
|
|
|
stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with buttons
|
|
|
|
stackswitcher button.circular,
|
|
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
|
|
min-width: 32px;
|
|
min-height: 32px;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
/*********
|
|
* Emoji *
|
|
********/
|
|
|
|
popover.emoji-picker { padding-left: 0; padding-right: 0; }
|
|
|
|
button.emoji-section {
|
|
border-color: transparent;
|
|
border-width: 3px;
|
|
border-style: none none solid;
|
|
border-radius: 0;
|
|
|
|
margin: 2px 4px 2px 4px;
|
|
padding: 3px 0 0;
|
|
min-width: 32px;
|
|
min-height: 28px;
|
|
|
|
/* reset props inherited from the button style */
|
|
background: none;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
|
|
outline-offset: -5px;
|
|
|
|
&: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; }
|
|
}
|
|
|
|
.emoji {
|
|
font-size: x-large;
|
|
padding: 6px;
|
|
border-radius: 6px;
|
|
|
|
:hover {
|
|
background: $selected_bg_color;
|
|
}
|
|
}
|