forked from AuroraMiddleware/gtk
825ef99e17
Since widgets subelements are now both widget childs and widget classes, say .spinbutton.button and .spinbutton .button, the linking logic needs to be adapted to be stricter with child selectors. This fixes vertically linked spinbuttons.
3245 lines
91 KiB
SCSS
3245 lines
91 KiB
SCSS
@function gtkalpha($c,$a) {
|
|
@return unquote("alpha(#{$c},#{$a})");
|
|
}
|
|
|
|
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
|
|
* {
|
|
padding: 0;
|
|
-GtkToolButton-icon-spacing: 4;
|
|
-GtkTextView-error-underline-color: $error_color;
|
|
|
|
-GtkCheckButton-indicator-size: 16;
|
|
-GtkCheckMenuItem-indicator-size: 16;
|
|
|
|
// The size for scrollbars. The slider is 2px smaller, but we keep it
|
|
// up so that the whole area is sensitive to button presses for the
|
|
// slider. The stepper button is larger in both directions, the slider
|
|
// only in the width
|
|
|
|
-GtkScrolledWindow-scrollbar-spacing: 0;
|
|
-GtkScrolledWindow-scrollbars-within-bevel: 1;
|
|
|
|
-GtkToolItemGroup-expander-size: 11;
|
|
-GtkExpander-expander-size: 16;
|
|
-GtkTreeView-expander-size: 11;
|
|
|
|
-GtkTreeView-horizontal-separator: 4;
|
|
|
|
-GtkMenu-horizontal-padding: 0;
|
|
-GtkMenu-vertical-padding: 0;
|
|
|
|
-GtkWidget-link-color: $link_color;
|
|
-GtkWidget-visited-link-color: $link_visited_color;
|
|
|
|
-GtkWidget-focus-padding: 2; // FIXME: do we still need these?
|
|
-GtkWidget-focus-line-width: 1; //
|
|
|
|
-GtkDialog-button-spacing: 4;
|
|
-GtkDialog-action-area-border: 0;
|
|
|
|
-GtkStatusbar-shadow-type: none;
|
|
|
|
// We use the outline properties to signal the focus properties
|
|
// to the adwaita engine: using real CSS properties is faster,
|
|
// and we don't use any outlines for now.
|
|
|
|
outline-color: transparentize($fg_color, 0.7);
|
|
outline-style: dashed;
|
|
outline-offset: -3px;
|
|
outline-width: 1px;
|
|
outline-radius: 2px;
|
|
}
|
|
|
|
|
|
/***************
|
|
* Base States *
|
|
***************/
|
|
|
|
.background {
|
|
color: $fg_color;
|
|
background-color: if($variant == 'light', darken($bg_color, 1.5%), $bg_color);
|
|
|
|
&:backdrop {
|
|
text-shadow: none;
|
|
icon-shadow: none;
|
|
color: $backdrop_fg_color;
|
|
background-color: $backdrop_bg_color;
|
|
}
|
|
}
|
|
|
|
/*
|
|
These wildcard seems unavoidable, need to investigate.
|
|
Wildcards are bad and troublesome, use them with care,
|
|
or better, just don't.
|
|
Everytime a wildcard is used a kitten dies, painfully.
|
|
*/
|
|
|
|
*:insensitive {
|
|
-gtk-image-effect: dim;
|
|
}
|
|
|
|
.gtkstyle-fallback {
|
|
background-color: $bg_color;
|
|
color: $fg_color;
|
|
&:prelight {
|
|
background-color: lighten($bg_color, 10%);
|
|
color: $fg_color;
|
|
}
|
|
&:active {
|
|
background-color: darken($bg_color, 10%);
|
|
color: $fg_color;
|
|
}
|
|
&:insensitive {
|
|
background-color: $insensitive_bg_color;
|
|
color: $insensitive_fg_color;
|
|
}
|
|
&:selected {
|
|
background-color: $selected_bg_color;
|
|
color: $selected_fg_color;
|
|
}
|
|
}
|
|
|
|
.view {
|
|
color: $text_color;
|
|
background-color: $base_color;
|
|
&:backdrop {
|
|
color: $backdrop_text_color;
|
|
background-color: $backdrop_base_color;
|
|
}
|
|
&:selected,
|
|
&:selected:focus,
|
|
&:selected:hover {
|
|
border-radius: 3px;
|
|
@extend %selected_items;
|
|
}
|
|
}
|
|
|
|
.rubberband {
|
|
border: 1px solid $selected_bg_color;
|
|
background-color: transparentize($selected_bg_color,0.8);
|
|
}
|
|
|
|
// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
|
|
.overshoot {
|
|
&.top {
|
|
@include overshoot(top);
|
|
&:backdrop { @include overshoot(top, backdrop); }
|
|
}
|
|
&.bottom {
|
|
@include overshoot(bottom);
|
|
&:backdrop { @include overshoot(bottom, backdrop); }
|
|
}
|
|
&.left {
|
|
@include overshoot(left);
|
|
&:backdrop { @include overshoot(left, backdrop); }
|
|
}
|
|
&.right {
|
|
@include overshoot(right);
|
|
&:backdrop { @include overshoot(right, backdrop); }
|
|
}
|
|
}
|
|
|
|
.label {
|
|
&.separator {
|
|
color: $fg_color;
|
|
@extend .dim-label;
|
|
&:backdrop { color: $backdrop_fg_color; }
|
|
}
|
|
&:selected,
|
|
&:selected:focus,
|
|
&:selected:hover {
|
|
@extend %selected_items;
|
|
}
|
|
&:insensitive {
|
|
color: $insensitive_fg_color;
|
|
&:backdrop { color: $backdrop_insensitive_color; }
|
|
}
|
|
}
|
|
|
|
.dim-label {
|
|
opacity: 0.55;
|
|
text-shadow: none;
|
|
}
|
|
|
|
GtkAssistant {
|
|
.sidebar {
|
|
background-color: $base_color;
|
|
border-top: 1px solid $borders_color;
|
|
&:dir(ltr) { border-right: 1px solid $borders_color; }
|
|
&:dir(rtl) { border-left: 1px solid $borders_color; }
|
|
&:backdrop {
|
|
background-color: $backdrop_base_color;
|
|
border-color: $backdrop_borders_color;
|
|
}
|
|
}
|
|
&.csd .sidebar { border-top-style: none; }
|
|
.sidebar .label {
|
|
padding: 6px 12px;
|
|
}
|
|
.sidebar .label.highlight {
|
|
background-color: mix($bg_color, $fg_color, 80%);
|
|
}
|
|
}
|
|
|
|
GtkTextView { // This will get overridden by .view, needed by gedit line numbers
|
|
background-color: mix($bg_color, $base_color, 50%);
|
|
&:backdrop { background-color: mix($backdrop_bg_color,
|
|
$backdrop_base_color, 50%); }
|
|
}
|
|
|
|
.grid-child {
|
|
padding: 3px;
|
|
border-radius: 3px;
|
|
&:selected {
|
|
@extend %selected_items;
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
|
|
%osd, .osd {
|
|
color: $osd_fg_color;
|
|
border: none;
|
|
background-color: $osd_bg_color;
|
|
background-clip: padding-box;
|
|
outline-color: transparentize($osd_fg_color, 0.7);
|
|
box-shadow: none;
|
|
text-shadow: 0 1px black;
|
|
icon-shadow: 0 1px black;
|
|
&:backdrop { text-shadow: none; }
|
|
}
|
|
|
|
/*********************
|
|
* Spinner Animation *
|
|
*********************/
|
|
|
|
@keyframes spin {
|
|
to { -gtk-icon-transform: rotate(1turn); }
|
|
}
|
|
|
|
.spinner {
|
|
background-image: none;
|
|
background-color: blue;
|
|
opacity: 0; // non spinning spinner makes no sense
|
|
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
|
|
&:active {
|
|
opacity: 1;
|
|
animation: spin 1s linear infinite;
|
|
&:insensitive {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
/****************
|
|
* Text Entries *
|
|
****************/
|
|
|
|
.entry {
|
|
border: 1px solid;
|
|
padding: 5px 8px 6px;
|
|
|
|
&.image { // icons inside the entry
|
|
&.left { padding-left: 0; }
|
|
&.right { padding-right: 0; }
|
|
}
|
|
|
|
border-radius: 3px;
|
|
transition: all 200ms $ease-out-quad;
|
|
@include entry(normal);
|
|
|
|
&.flat, &.flat:focus {
|
|
padding: 2px;
|
|
@include entry(normal, $edge:none);
|
|
border: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
&:focus { @include entry(focus); }
|
|
&:insensitive { @include entry(insensitive); }
|
|
&:backdrop { @include entry(backdrop); }
|
|
&:backdrop:insensitive { @include entry(backdrop-insensitive); }
|
|
|
|
&:selected,
|
|
&:selected:focus {
|
|
@extend %selected_items;
|
|
}
|
|
|
|
&.progressbar {
|
|
margin: 1px;
|
|
border-radius: 0;
|
|
border-width: 0 0 2px;
|
|
border-color: $selected_bg_color;
|
|
border-style: solid;
|
|
background-image: none;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
&:backdrop { background-color: transparent; }
|
|
}
|
|
|
|
.linked > & { //FIXME: use same buttons linking logic and template
|
|
border-radius: 0;
|
|
&:first-child {
|
|
border-top-left-radius: 3px;
|
|
border-bottom-left-radius: 3px;
|
|
&:dir(rtl) { border-right-style: none;}
|
|
}
|
|
&:last-child {
|
|
border-top-right-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
border-left-style: none;
|
|
&:dir(rtl) { border-left-style: solid; }
|
|
}
|
|
}
|
|
|
|
&.error { // FIXME: dark variant love needed
|
|
color: $error_color;
|
|
border-color: $error_color;
|
|
&:focus { @include entry(focus, $error_color); }
|
|
&:selected, &:selected:focus {
|
|
background-color: $error_color;
|
|
}
|
|
}
|
|
|
|
&.warning { // FIXME: dark variant love needed
|
|
color: $warning_color;
|
|
border-color: $warning_color;
|
|
&:focus { @include entry(focus, $warning_color); }
|
|
&:selected, &:selected:focus {
|
|
background-color: $warning_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%); }
|
|
}
|
|
|
|
.linked.vertical > & { //FIXME comment stuff and make the whole thing smarter.
|
|
@include entry(normal, $edge: none);
|
|
background-image: linear-gradient(to bottom, $base_color);
|
|
border-bottom-color: mix($borders_color, $base_color, 30%);
|
|
box-shadow: none;
|
|
@extend %linked_vertical;
|
|
&:focus {
|
|
border-color: entry_focus_border($selected_bg_color);
|
|
box-shadow: entry_focus_glow($selected_bg_color),
|
|
0 -1px 0 0 entry_focus_border($selected_bg_color);
|
|
@extend %linked_vertical;
|
|
}
|
|
&:insensitive {
|
|
@include entry(insensitive, $edge: none);
|
|
border-bottom-color: mix($borders_color, $base_color, 30%);
|
|
@extend %linked_vertical;
|
|
&:backdrop {
|
|
@include entry(backdrop-insensitive, $edge: none);
|
|
border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
|
|
@extend %linked_vertical;
|
|
}
|
|
}
|
|
&:backdrop {
|
|
@include entry(backdrop, $edge: none);
|
|
border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
|
|
@extend %linked_vertical;
|
|
}
|
|
&:first-child {
|
|
@include entry(normal, $edge: none);
|
|
border-bottom-color: mix($borders_color, $base_color, 30%);
|
|
&:focus { @include entry(focus, $edge: none); }
|
|
&:insensitive {
|
|
@include entry(insensitive, $edge: none);
|
|
border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
|
|
@extend %linked_vertical:first-child;
|
|
&:backdrop {
|
|
@include entry(backdrop-insensitive, $edge: none);
|
|
border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
|
|
border-top-style: solid;
|
|
}
|
|
}
|
|
&:backdrop {
|
|
@include entry(backdrop, $edge: none);
|
|
border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
|
|
@extend %linked_vertical:first-child;
|
|
}
|
|
}
|
|
&:last-child {
|
|
@include entry(normal);
|
|
background-image: linear-gradient(to bottom, $base_color);
|
|
box-shadow: _widget_edge();
|
|
&:focus {
|
|
border-color: entry_focus_border($selected_bg_color);
|
|
box-shadow: entry_focus_glow($selected_bg_color),
|
|
0 -1px 0 0 entry_focus_border($selected_bg_color),
|
|
_widget_edge();
|
|
@extend %linked_vertical:last-child;
|
|
}
|
|
&:insensitive {
|
|
@include entry(insensitive);
|
|
@extend %linked_vertical:last-child;
|
|
&:backdrop {
|
|
@include entry(backdrop-insensitive);
|
|
@extend %linked_vertical:last-child;
|
|
}
|
|
}
|
|
&:backdrop {
|
|
@include entry(backdrop);
|
|
@extend %linked_vertical:last-child;
|
|
}
|
|
}
|
|
}
|
|
.osd & {
|
|
@include entry(osd);
|
|
&:focus { @include entry(osd-focus); }
|
|
&:backdrop { @include entry(osd-backdrop); }
|
|
&:insensitive { @include entry(osd-insensitive); }
|
|
}
|
|
}
|
|
|
|
/***********
|
|
* Buttons *
|
|
***********/
|
|
|
|
// stuff for .needs-attention
|
|
$_dot_color: if($variant=='light', $selected_bg_color,
|
|
lighten($selected_bg_color,15%));
|
|
@keyframes needs_attention {
|
|
from {
|
|
background-image: -gtk-gradient(radial,
|
|
center center, 0,
|
|
center center, 0.01,
|
|
to($_dot_color),
|
|
to(transparent));
|
|
}
|
|
to {
|
|
background-image: -gtk-gradient(radial,
|
|
center center, 0,
|
|
center center, 0.5,
|
|
to($selected_bg_color),
|
|
to(transparent));
|
|
}
|
|
}
|
|
|
|
|
|
.button {
|
|
|
|
$_button_transition: all 200ms $ease-out-quad;
|
|
|
|
border: 1px solid;
|
|
border-radius: 3px;
|
|
padding: 5px 8px 6px;
|
|
transition: $_button_transition;
|
|
@include button(normal);
|
|
&.flat {
|
|
@include button(undecorated);
|
|
// to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
|
|
// to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
|
|
// it won't fade out when the pointer leave the button allocation area. To make the transition more evident
|
|
// in this case the duration is increased.
|
|
transition: none;
|
|
&:hover {
|
|
transition: $_button_transition;
|
|
transition-duration: 500ms;
|
|
&:active { transition: $_button_transition; }
|
|
}
|
|
}
|
|
&:hover {
|
|
@include button(hover);
|
|
-gtk-image-effect: highlight;
|
|
}
|
|
&:active, &:checked {
|
|
@include button(active);
|
|
transition-duration: 50ms;
|
|
}
|
|
&:backdrop, &.flat:backdrop {
|
|
@include button(backdrop);
|
|
-gtk-image-effect: none;
|
|
&:active, &:checked {
|
|
@include button(backdrop-active);
|
|
}
|
|
&:insensitive {
|
|
@include button(backdrop-insensitive);
|
|
}
|
|
&:insensitive:active, &:insensitive:checked {
|
|
@include button(backdrop-insensitive-active);
|
|
}
|
|
}
|
|
&.flat:backdrop, &.flat:insensitive, &.flat:backdrop:insensitive {
|
|
@include button(undecorated);
|
|
}
|
|
&:insensitive {
|
|
@include button(insensitive);
|
|
&:active, &:checked {
|
|
@include button(insensitive-active);
|
|
}
|
|
}
|
|
// big standalone buttons like in Documents pager
|
|
&.osd {
|
|
&.image-button { padding: 13px; }
|
|
color: $osd_fg_color;
|
|
border-radius: 5px;
|
|
outline-color: transparentize($osd_fg_color, 0.7); //FIXME: define a color var?
|
|
@include button(osd);
|
|
border: none;
|
|
box-shadow: none;
|
|
&:hover {
|
|
@include button(osd-hover);
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
&:active, &:checked {
|
|
@include button(osd-active);
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
&:insensitive, &:backdrop:insensitive {
|
|
@include button(osd-insensitive);
|
|
border: none;
|
|
}
|
|
&:backdrop {
|
|
@include button(osd-backdrop);
|
|
border: none;
|
|
}
|
|
}
|
|
//overlay / OSD style
|
|
.osd & {
|
|
@include button(osd);
|
|
// there's a problem with sass which prevents it to extend the linked
|
|
// placeholder as expected, it should just be "@extend %linked;", the
|
|
// placeholder is basically replicated here
|
|
//
|
|
// Workaround START
|
|
border-radius: 0;
|
|
border-left-style: none;
|
|
&:dir(rtl) {
|
|
border-radius: 0;
|
|
border-right-style: none;
|
|
border-left-style: solid
|
|
}
|
|
&:first-child {
|
|
border-radius: 3px 0 0 3px;
|
|
border-left-style: solid;
|
|
}
|
|
&:last-child {
|
|
border-radius: 0 3px 3px 0;
|
|
&:dir(rtl) { border-right-style: solid; }
|
|
}
|
|
&:only-child {
|
|
border-radius: 3px;
|
|
border-style: solid;
|
|
}
|
|
// Workaround END
|
|
&:hover {
|
|
@include button(osd-hover);
|
|
@extend %linked;
|
|
}
|
|
&:active, &:checked, &:backdrop:active, &:backdrop:checked {
|
|
@include button(osd-active);
|
|
@extend %linked;
|
|
}
|
|
&:insensitive, &:backdrop:insensitive {
|
|
@include button(osd-insensitive);
|
|
@extend %linked;
|
|
}
|
|
&:backdrop {
|
|
@include button(osd-backdrop);
|
|
@extend %linked;
|
|
}
|
|
&.flat {
|
|
@include button(undecorated);
|
|
box-shadow: none; //FIXME respect no edge on the button mixin
|
|
text-shadow: 0 1px black;
|
|
icon-shadow: 0 1px black;
|
|
&:hover {
|
|
@include button(osd-hover);
|
|
background-clip: padding-box;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
&:insensitive {
|
|
@include button(osd-insensitive);
|
|
background-image: none;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
&:backdrop { @include button(undecorated); }
|
|
&:active, &:checked {
|
|
@include button(osd-active);
|
|
background-clip: padding-box;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Suggested and Destructive Action buttons
|
|
@each $b_type, $b_color in (suggested-action, $selected_bg_color),
|
|
(destructive-action, $destructive_color) {
|
|
&.#{$b_type} {
|
|
@include button(normal, $b_color, white);
|
|
&.flat {
|
|
@include button(undecorated);
|
|
color: $b_color; //FIXME: does it work on the dark variant?
|
|
}
|
|
&:hover { @include button(hover, $b_color, white); }
|
|
&:active, &:checked { @include button(active, $b_color, white); }
|
|
&:backdrop, &.flat:backdrop {
|
|
@include button(backdrop, $b_color, white);
|
|
&:active, &:checked {
|
|
@include button(backdrop-active, $b_color, white);
|
|
}
|
|
&:insensitive {
|
|
@include button(backdrop-insensitive);
|
|
&:active, &:checked {
|
|
@include button(backdrop-insensitive-active, $b_color, white);
|
|
}
|
|
}
|
|
}
|
|
&.flat:backdrop, &.flat:insensitive, &.flat:backdrop:insensitive {
|
|
@include button(undecorated);
|
|
color: transparentize($b_color, 0.2);
|
|
}
|
|
&:insensitive {
|
|
@include button(insensitive);
|
|
&:active, &:checked {
|
|
@include button(insensitive-active, $b_color, white);
|
|
}
|
|
}
|
|
.osd & {
|
|
@include button(osd, $b_color);
|
|
@extend %linked;
|
|
&:hover {
|
|
@include button(osd-hover, $b_color);
|
|
@extend %linked;
|
|
}
|
|
&:active, &:checked, &:backdrop:active, &:backdrop:checked {
|
|
@include button(osd-active, $b_color);
|
|
@extend %linked;
|
|
}
|
|
&:insensitive, &:backdrop:insensitive {
|
|
@include button(osd-insensitive, $b_color);
|
|
@extend %linked;
|
|
}
|
|
&:backdrop {
|
|
@include button(osd-backdrop, $b_color);
|
|
@extend %linked;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.image-button { padding: 8px; }
|
|
|
|
&.text-button {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
&.text-button.image-button {
|
|
// those buttons needs uneven horizontal padding, we want the icon side
|
|
// to have the image-button padding, while the text side the text-button
|
|
// one, so we're adding the missing padding to the label depending on
|
|
// its position inside the button
|
|
padding: 5px 8px 6px; // same as .button
|
|
.label:first-child { padding-left: 8px; }
|
|
.label:last-child { padding-right: 8px; }
|
|
}
|
|
|
|
.stack-switcher > & {
|
|
// to position the needs attention dot, padding is added to the button
|
|
// child, a label needs just lateral padding while an icon needs vertical
|
|
// padding added too.
|
|
|
|
outline-offset: -3px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
|
|
|
|
> .label {
|
|
padding-left: 6px; // label padding
|
|
padding-right: 6px; //
|
|
}
|
|
> GtkImage {
|
|
padding-left: 6px; // image padding
|
|
padding-right: 6px; //
|
|
padding-top: 3px; //
|
|
padding-bottom: 3px; //
|
|
}
|
|
&.text-button {
|
|
padding: 5px 10px 6px; // needed or it will get overridden
|
|
}
|
|
&.image-button {
|
|
// we want image buttons to have a 1:1 aspect ratio, so compensation
|
|
// of the padding added to the GtkImage is needed
|
|
padding: 5px 2px;
|
|
}
|
|
&.needs-attention > .label,
|
|
&.needs-attention > GtkImage { @extend %needs_attention; }
|
|
&.needs-attention:active > .label,
|
|
&.needs-attention:active > GtkImage,
|
|
&.needs-attention:checked > .label,
|
|
&.needs-attention:checked > GtkImage {
|
|
animation: none;
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
//inline-toolbar buttons
|
|
.inline-toolbar &, .inline-toolbar &:backdrop {
|
|
border-radius: 2px;
|
|
border-width: 1px;
|
|
@extend %linked;
|
|
}
|
|
|
|
.primary-toolbar & { icon-shadow: none; } // tango icons don't need shadows
|
|
|
|
.linked > &,
|
|
.linked > &:hover,
|
|
.linked > &:active,
|
|
.linked > &:checked,
|
|
.linked > &:backdrop { @extend %linked; }
|
|
|
|
.linked.vertical > &,
|
|
.linked.vertical > &:hover,
|
|
.linked.vertical > &:active,
|
|
.linked.vertical > &:checked,
|
|
.linked.vertical > &:backdrop { @extend %linked_vertical; }
|
|
}
|
|
|
|
%needs_attention {
|
|
animation: needs_attention 150ms ease-in;
|
|
$_dot_shadow: _text_shadow_color();
|
|
$_dot_shadow_r: if($variant=='light',0.5,0.45);
|
|
background-image: -gtk-gradient(radial,
|
|
center center, 0,
|
|
center center, 0.5,
|
|
to($_dot_color),
|
|
to(transparent)),
|
|
-gtk-gradient(radial,
|
|
center center, 0,
|
|
center center, $_dot_shadow_r,
|
|
to($_dot_shadow),
|
|
to(transparent));
|
|
background-size: 6px 6px, 6px 6px;
|
|
background-repeat: no-repeat;
|
|
@if $variant == 'light' { background-position: right 3px, right 4px; }
|
|
@else { background-position: right 3px, right 2px; }
|
|
&:backdrop { background-size: 6px 6px, 0 0;}
|
|
&:dir(rtl) {
|
|
@if $variant == 'light' { background-position: left 3px, left 4px; }
|
|
@else { background-position: left 3px, left 2px; }
|
|
}
|
|
}
|
|
|
|
|
|
// all the following is for the +|- buttons on inline toolbars, that way
|
|
// should really be deprecated...
|
|
.inline-toolbar GtkToolButton > .button { // redefining the button look is
|
|
// needed since those are flat...
|
|
@include button(normal);
|
|
&:hover { @include button(hover); }
|
|
&:active,
|
|
&:checked{ @include button(active); }
|
|
&:insensitive { @include button(insensitive); }
|
|
&:insensitive:active,
|
|
&:insensitive:checked { @include button(insensitive-active); }
|
|
&:backdrop { @include button(backdrop); };
|
|
&:backdrop:active,
|
|
&:backdrop:checked { @include button(backdrop-active); }
|
|
&:backdrop:insensitive { @include button(backdrop-insensitive); }
|
|
&:backdrop:insensitive:active,
|
|
&:backdrop:insensitive:checked {
|
|
@include button(backdrop-insensitive-active); }
|
|
}
|
|
|
|
// More inline toolbar buttons
|
|
.inline-toolbar.toolbar GtkToolButton,
|
|
.inline-toolbar.toolbar GtkToolButton:backdrop {
|
|
& > .button.flat { @extend %linked_middle; }
|
|
&:dir(rtl) > .button.flat { @extend %linked_middle:dir(rtl); }
|
|
&:first-child > .button.flat { @extend %linked:first-child; }
|
|
&:last-child > .button.flat { @extend %linked:last-child; }
|
|
&:last-child:dir(rtl) > .button.flat { @extend %linked:last-child:dir(rtl); }
|
|
&:only-child > .button.flat { @extend %linked:only-child; }
|
|
}
|
|
|
|
%linked_middle {
|
|
border-radius: 0;
|
|
border-left-style: none;
|
|
&:dir(rtl) {
|
|
border-radius: 0; // needed when including %linked_middle:dir(rtl)
|
|
border-right-style: none;
|
|
border-left-style: solid
|
|
}
|
|
}
|
|
|
|
%linked {
|
|
@extend %linked_middle;
|
|
&:first-child {
|
|
border-radius: 3px 0 0 3px;
|
|
border-left-style: solid;
|
|
}
|
|
&:last-child {
|
|
border-radius: 0 3px 3px 0;
|
|
&:dir(rtl) { border-right-style: solid; }
|
|
}
|
|
&:only-child {
|
|
border-radius: 3px;
|
|
border-style: solid;
|
|
}
|
|
}
|
|
|
|
%linked_vertical_middle {
|
|
border-left-style: solid;
|
|
border-top-style: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
%linked_vertical{
|
|
@extend %linked_vertical_middle;
|
|
&:first-child {
|
|
border-style: solid;
|
|
border-radius: 3px 3px 0 0;
|
|
}
|
|
&:last-child {
|
|
border-radius: 0 0 3px 3px;
|
|
}
|
|
&:only-child {
|
|
border-radius: 3px;
|
|
border-style: solid;
|
|
}
|
|
}
|
|
|
|
%undecorated_button {
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
box-shadow: inset 0 1px transparentize(white,1),
|
|
0 1px transparentize(white, 1);
|
|
text-shadow: none;
|
|
icon-shadow: none;
|
|
}
|
|
|
|
/* menu buttons */
|
|
.menuitem.button.flat {
|
|
@extend %undecorated_button;
|
|
outline-offset: -1px;
|
|
&:hover { background-color: mix($fg_color, $bg_color, 10%); }
|
|
&:selected { @extend %selected_items; }
|
|
&:backdrop, &:backdrop:hover {
|
|
@extend %undecorated_button;
|
|
}
|
|
}
|
|
|
|
GtkColorButton.button {
|
|
padding: 5px; // Uniform padding on the GtkColorButton
|
|
GtkColorSwatch {
|
|
border-radius: 0;
|
|
box-shadow: inset 0 1px 1px transparentize(black, 0.9),
|
|
_widget_edge();
|
|
&:insensitive,
|
|
&:backdrop { box-shadow: none; }
|
|
}
|
|
}
|
|
|
|
/*********
|
|
* Links *
|
|
*********/
|
|
|
|
*:link {
|
|
color: $link_color;
|
|
&:visited {
|
|
color: $link_visited_color;
|
|
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
|
|
}
|
|
&:hover {
|
|
color: lighten($link_color,10%);
|
|
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); }
|
|
}
|
|
&:active {
|
|
color: $link_color;
|
|
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
|
|
}
|
|
&:backdrop, &:backdrop:hover, &:backdrop:hover:selected {
|
|
color: $selected_bg_color;
|
|
}
|
|
&:selected, *:selected & {
|
|
color: mix($selected_fg_color, $selected_bg_color, 80%);
|
|
}
|
|
}
|
|
|
|
.button:link, .button:visited {
|
|
@extend %undecorated_button;
|
|
@extend *:link;
|
|
text-shadow: none;
|
|
&:hover, &:active, &:checked {
|
|
@extend %undecorated_button;
|
|
text-shadow: none;
|
|
}
|
|
&:backdrop {
|
|
@extend %undecorated_button; //This shouldn't be needed but avoids
|
|
//a weird transition which for some reason
|
|
//makes borders blink on hover
|
|
}
|
|
}
|
|
|
|
/*****************
|
|
* GtkSpinButton *
|
|
*****************/
|
|
|
|
.spinbutton {
|
|
.button {
|
|
background-image: none;
|
|
border-style: none none none solid;
|
|
border-color: transparentize($borders_color, 0.7);
|
|
color: mix($fg_color, $base_color, 90%);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
// padding-left: 6px;
|
|
// padding-right: 6px;
|
|
&:dir(rtl) { border-style: none solid none none; }
|
|
&:hover {
|
|
color: $fg_color;
|
|
background-color: transparentize($fg_color, 0.95);
|
|
}
|
|
&:insensitive {
|
|
color: transparentize($insensitive_fg_color, 0.7);
|
|
}
|
|
&:active {
|
|
box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
|
|
background-color: transparentize(black, 0.9);
|
|
}
|
|
&:backdrop {
|
|
color: mix($backdrop_fg_color, $backdrop_base_color, 90%);
|
|
border-color: transparentize($backdrop_borders_color, 0.7);
|
|
background-color: transparent;
|
|
}
|
|
&:backdrop:insensitive {
|
|
background-image: none;
|
|
color: transparentize($backdrop_insensitive_color,0.7);
|
|
border-style: none none none solid; // It is needed or it gets overridden
|
|
&:dir(rtl) { border-style: none solid none none; }
|
|
}
|
|
}
|
|
.osd & {
|
|
.button {
|
|
@include button(undecorated);
|
|
color: $osd_fg_color;
|
|
border-style: none none none solid;
|
|
border-color: transparentize($osd_borders_color, 0.3);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
icon-shadow: 0 1px black;
|
|
&:dir(rtl) { border-style: none solid none none; }
|
|
&:hover {
|
|
@include button(undecorated);
|
|
color: $osd_fg_color;
|
|
border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
|
background-color: transparentize($osd_fg_color, 0.9);
|
|
icon-shadow: 0 1px black;
|
|
box-shadow: none;
|
|
}
|
|
&:backdrop {
|
|
@include button(undecorated);
|
|
color: $osd_fg_color;
|
|
border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
|
icon-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
&:insensitive {
|
|
@include button(undecorated);
|
|
color: $osd_insensitive_fg_color;
|
|
border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
|
icon-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
&:last-child { border-radius: 0 3px 3px 0; }
|
|
&:dir(rtl):first-child { border-radius: 3px 0 0 3px; }
|
|
}
|
|
}
|
|
&.vertical, &.vertical:dir(rtl) { //FIXME: try using linking templates for vertically linked stuff
|
|
.button {
|
|
padding-top: 8px; // Same vertical padding as image-buttons
|
|
padding-bottom: 8px; //
|
|
&:first-child {
|
|
@extend %top_button;
|
|
@include button(normal, $edge:none);
|
|
&:active {
|
|
@extend %top_button;
|
|
@include button(active, $edge:none);
|
|
}
|
|
&:hover {
|
|
@extend %top_button;
|
|
@include button(hover, $edge:none);
|
|
}
|
|
&:insensitive {
|
|
@extend %top_button;
|
|
@include button(insensitive, $edge:none);
|
|
}
|
|
&:backdrop {
|
|
@extend %top_button;
|
|
@include button(backdrop, $edge:none);
|
|
}
|
|
}
|
|
&:last-child {
|
|
@extend %bottom_button;
|
|
@include button(normal);
|
|
&:active {
|
|
@extend %bottom_button;
|
|
@include button(active);
|
|
}
|
|
&:hover {
|
|
@extend %bottom_button;
|
|
@include button(hover);
|
|
}
|
|
&:insensitive {
|
|
@extend %bottom_button;
|
|
@include button(insensitive);
|
|
}
|
|
&:backdrop {
|
|
@extend %bottom_button;
|
|
@include button(backdrop);
|
|
}
|
|
}
|
|
&:backdrop:insensitive {
|
|
@include button(backdrop-insensitive);
|
|
}
|
|
}
|
|
&.entry {
|
|
// we should remove the bottom edge hilight here, but seems
|
|
// like buttons are on top of it so it doesn't show up
|
|
border-radius: 0;
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
}
|
|
%top_button {
|
|
border-radius: 3px 3px 0 0;
|
|
border-style: solid solid none solid;
|
|
}
|
|
%bottom_button {
|
|
border-radius: 0 0 3px 3px;
|
|
border-style: none solid solid solid;
|
|
}
|
|
}
|
|
/* This is to fix spinbuttons in entries, but I feel like hiding code issues
|
|
* hence it's commented atm.
|
|
* GtkTreeView & {
|
|
* &.entry, &.entry:focus {
|
|
* padding: 1px;
|
|
* border-width: 1px 0;
|
|
* border-color: $selected_bg_color;
|
|
* border-radius: 0;
|
|
* box-shadow: none;
|
|
* }
|
|
* } */
|
|
}
|
|
|
|
/**************
|
|
* ComboBoxes *
|
|
**************/
|
|
GtkComboBox {
|
|
> .button { padding-top: 3px; padding-bottom: 4px; } // Otherwise combos
|
|
// are bigger then
|
|
// buttons
|
|
-GtkComboBox-arrow-scaling: 0.5;
|
|
-GtkComboBox-shadow-type: none;
|
|
|
|
box-shadow: 0 1px $borders_edge;
|
|
|
|
@include _button_text_shadow;
|
|
|
|
&:insensitive {
|
|
color: $insensitive_fg_color;
|
|
text-shadow: none;
|
|
icon-shadow: none;
|
|
}
|
|
&:backdrop {
|
|
color: $backdrop_fg_color;
|
|
text-shadow: none;
|
|
icon-shadow: none;
|
|
}
|
|
&:backdrop:insensitive {
|
|
color: $backdrop_insensitive_color;
|
|
}
|
|
.menuitem { text-shadow: none; }
|
|
.separator {
|
|
// always disable separators
|
|
-GtkWidget-wide-separators: true;
|
|
-GtkWidget-horizontal-separator: 0;
|
|
-GtkWidget-vertical-separator: 0;
|
|
}
|
|
&.combobox-entry .entry { @extend %linked; }
|
|
&.combobox-entry .button, &.combobox-entry .button:backdrop {
|
|
// It is needed to specify the backdrop button or it gets overridden
|
|
@extend %linked;
|
|
}
|
|
}
|
|
|
|
.linked > GtkComboBox > .button {
|
|
// the combo is a composite widget so the way we do button linkind doesn't
|
|
// work, special case needed. See
|
|
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
|
|
&:dir(ltr) { @extend %linked_middle; } // specificity bump
|
|
&:dir(rtl) { @extend %linked_middle:dir(rtl); }
|
|
}
|
|
.linked > GtkComboBox:first-child > .button {
|
|
@extend %linked:first-child;
|
|
}
|
|
.linked > GtkComboBox:last-child > .button {
|
|
@extend %linked:last-child;
|
|
}
|
|
.linked > GtkComboBox:only-child > .button {
|
|
@extend %linked:only-child;
|
|
}
|
|
.linked.vertical > GtkComboBoxText > .button,
|
|
.linked.vertical > GtkComboBox > .button { @extend %linked_vertical_middle; }
|
|
.linked.vertical > GtkComboBoxText:first-child > .button,
|
|
.linked.vertical > GtkComboBox:first-child > .button { @extend %linked_vertical:first-child; }
|
|
.linked.vertical > GtkComboBoxText:last-child > .button,
|
|
.linked.vertical > GtkComboBox:last-child > .button { @extend %linked_vertical:last-child; }
|
|
.linked.vertical > GtkComboBoxText:only-child > .button,
|
|
.linked.vertical > GtkComboBox:only-child > .button { @extend %linked_vertical:only-child; }
|
|
|
|
/************
|
|
* Toolbars *
|
|
************/
|
|
.toolbar {
|
|
-GtkWidget-window-dragging: true;
|
|
padding: 4px;
|
|
background-color: $bg_color;
|
|
.osd &, &.osd {
|
|
padding: 13px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
background-color: $osd_bg_color;
|
|
}
|
|
}
|
|
|
|
//searchbar, location-bar & inline-toolbar
|
|
.inline-toolbar {
|
|
@extend .toolbar;
|
|
@extend %inset-bar;
|
|
border-width: 0 1px 1px;
|
|
padding: 3px;
|
|
border-radius: 0 0 5px 5px;
|
|
}
|
|
.search-bar, .location-bar {
|
|
@extend .toolbar;
|
|
@extend %inset-bar;
|
|
border-width: 0 0 1px;
|
|
padding: 3px;
|
|
}
|
|
|
|
%inset-bar {
|
|
border-style: solid;
|
|
border-color: $borders_color;
|
|
$_bg: mix($bg_color, $borders_color, 70%);
|
|
background-color: $_bg;
|
|
box-shadow: inset 0 2px 3px -1px mix($borders_color, $_bg, 60%),
|
|
_widget_edge();
|
|
//FIXME edge would be nice, but doesn't work
|
|
&:backdrop {
|
|
border-color: $backdrop_borders_color;
|
|
background-color: $backdrop_dark_fill;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
/***************
|
|
* Header bars *
|
|
***************/
|
|
|
|
.titlebar,
|
|
.header-bar {
|
|
padding: 6px;
|
|
border-width: 0 0 1px;
|
|
border-style: solid;
|
|
border-color: $borders_color;
|
|
border-radius: 7px 7px 0 0;
|
|
background-color: transparent;
|
|
|
|
@include headerbar_fill;
|
|
|
|
&:backdrop {
|
|
border-color: $backdrop_borders_color;
|
|
background-color: $bg_color;
|
|
background-image: none;
|
|
box-shadow: inset 0 1px $top_hilight;
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
padding: 0px 12px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: smaller;
|
|
padding: 0 12px;
|
|
@extend .dim-label;
|
|
}
|
|
|
|
.header-bar-separator,
|
|
& > GtkBox > .separator.vertical {
|
|
-GtkWidget-wide-separators: true;
|
|
-GtkWidget-separator-width: 1px;
|
|
border-width: 0 1px;
|
|
border-image: linear-gradient(to bottom,
|
|
transparentize($borders_color,1),
|
|
$borders_color 30%,
|
|
$borders_color 70%,
|
|
transparentize($borders_color,1) 100%)
|
|
0 1 / 0 1px stretch; //FIXME use a proper color
|
|
|
|
&:backdrop {
|
|
border-image: linear-gradient(to bottom, transparentize($backdrop_borders_color, 0.5))
|
|
0 1 / 1px 1px; //FIXME use a proper color
|
|
}
|
|
}
|
|
|
|
&.selection-mode {
|
|
$_hc: mix($top_hilight,$selected_bg_color, 50%); // hilight color
|
|
|
|
color: $selected_fg_color;
|
|
text-shadow: 0 -1px transparentize(black, 0.5);
|
|
border-color: $selected_borders_color;
|
|
background-image: linear-gradient(to bottom,
|
|
lighten($selected_bg_color,5%),
|
|
$selected_bg_color);
|
|
box-shadow: inset 0 -1px mix($selected_borders_color, $selected_bg_color, 35%), //bottom shade
|
|
inset 0 1px $_hc;
|
|
|
|
&:backdrop {
|
|
background-image: linear-gradient(to bottom, $selected_bg_color);
|
|
box-shadow: inset 0 1px mix($top_hilight, $selected_bg_color, 60%);
|
|
}
|
|
|
|
.subtitle:link { @extend *:link:selected; }
|
|
|
|
.button {
|
|
@include button(normal, $selected_bg_color, $selected_fg_color, $_hc);
|
|
|
|
&.flat { @include button(undecorated); }
|
|
|
|
&:hover { @include button(hover, $selected_bg_color, $selected_fg_color, $_hc); }
|
|
|
|
&:active, &:checked { @include button(active, $selected_bg_color, $selected_fg_color, $_hc); }
|
|
|
|
&:backdrop,
|
|
&.flat:backdrop {
|
|
@include button(backdrop, $selected_bg_color, $selected_fg_color, $_hc);
|
|
-gtk-image-effect: none;
|
|
border-color: $selected_borders_color;
|
|
|
|
&:active,
|
|
&:checked {
|
|
@include button(backdrop-active, $selected_bg_color, $selected_fg_color, $_hc);
|
|
border-color: $selected_borders_color;
|
|
}
|
|
|
|
&:insensitive {
|
|
@include button(backdrop-insensitive, $selected_bg_color, $selected_fg_color, $_hc);
|
|
border-color: $selected_borders_color;
|
|
}
|
|
|
|
&:insensitive:active,
|
|
&:insensitive:checked {
|
|
@include button(backdrop-insensitive-active, $selected_bg_color,
|
|
$selected_fg_color, $_hc);
|
|
border-color: $selected_borders_color;
|
|
}
|
|
}
|
|
|
|
&.flat:backdrop,
|
|
&.flat:insensitive,
|
|
&.flat:insensitive:backdrop {
|
|
@include button(undecorated);
|
|
}
|
|
|
|
&:insensitive {
|
|
@include button(insensitive, $selected_bg_color, $selected_fg_color, $_hc);
|
|
|
|
&:active, &:checked { @include button(insensitive-active, $selected_bg_color, $selected_fg_color, $_hc); }
|
|
}
|
|
|
|
&.suggested-action {
|
|
@include button(normal, $edge:$_hc);
|
|
border-color: $selected_borders_color;
|
|
|
|
&:hover {
|
|
@include button(hover, $edge:$_hc);
|
|
border-color: $selected_borders_color;
|
|
}
|
|
|
|
&:active {
|
|
@include button(active, $edge:$_hc);
|
|
border-color: $selected_borders_color;
|
|
}
|
|
|
|
&:insensitive {
|
|
@include button(insensitive, $edge:$_hc);
|
|
border-color: $selected_borders_color;
|
|
}
|
|
|
|
&:backdrop {
|
|
@include button(backdrop, $edge:$_hc);
|
|
border-color: $selected_borders_color;
|
|
}
|
|
|
|
&:backdrop:insensitive {
|
|
@include button(backdrop-insensitive, $edge:$_hc);
|
|
border-color: $selected_borders_color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.selection-menu {
|
|
border-color: transparentize($selected_bg_color, 1);
|
|
background-image: linear-gradient(to bottom, transparentize($selected_bg_color, 1));
|
|
box-shadow: none;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
|
|
GtkArrow { -GtkArrow-arrow-scaling: 1; }
|
|
|
|
.arrow {
|
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
color: transparentize($selected_fg_color,0.5);
|
|
icon-shadow: none;
|
|
}
|
|
|
|
&:backdrop { @extend .selection-menu };
|
|
}
|
|
}
|
|
|
|
.tiled &, .maximized & {
|
|
border-radius: 0; // squared corners when the window is max'd or tiled
|
|
}
|
|
|
|
&.default-decoration {
|
|
padding: 4px;
|
|
.button { padding: 5px; }
|
|
}
|
|
}
|
|
|
|
/************
|
|
* Pathbars *
|
|
************/
|
|
|
|
.path-bar .button {
|
|
padding: 5px 6px 6px;
|
|
&:first-child { padding-left: 8px; }
|
|
&:last-child { padding-right: 8px; }
|
|
&:only-child {
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
// the following is for spacing the icon and the label inside the home button
|
|
.label:last-child { padding-left: 2px; }
|
|
.label:first-child { padding-right: 2px; }
|
|
.label:only-child { padding-right: 0; padding-left: 0; }
|
|
GtkImage { padding-top: 1px; }
|
|
}
|
|
|
|
/**************
|
|
* Tree Views *
|
|
**************/
|
|
GtkTreeView.view {
|
|
-GtkTreeView-grid-line-width: 1;
|
|
-GtkTreeView-grid-line-pattern: '';
|
|
-GtkTreeView-tree-line-width: 1;
|
|
-GtkTreeView-tree-line-pattern: '';
|
|
-GtkTreeView-expander-size: 16;
|
|
|
|
border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color,
|
|
border-top-color: $bg_color; // while this is the grid lines color, better then nothing
|
|
|
|
&:selected,
|
|
&:selected:focus,
|
|
&:selected:hover { border-radius: 0; } // rest border radius in lists
|
|
|
|
&:selected, &:backdrop:selected {
|
|
border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
|
|
border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly
|
|
}
|
|
|
|
&:insensitive {
|
|
color: $insensitive_fg_color;
|
|
&:selected {
|
|
color: mix($selected_fg_color, $selected_bg_color, 40%);
|
|
&:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
|
|
}
|
|
&:backdrop { color: $backdrop_insensitive_color; }
|
|
}
|
|
|
|
&:backdrop {
|
|
border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
|
|
border-top: $backdrop_bg_color;
|
|
}
|
|
|
|
&.expander {
|
|
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
|
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
|
color: mix($fg_color, $base_color, 70%);
|
|
&:hover { color: $fg_color; }
|
|
&:selected {
|
|
color: mix($selected_fg_color, $selected_bg_color, 70%);
|
|
&:hover { color: $selected_fg_color; }
|
|
&:backdrop { color: mix($backdrop_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-radius: 4px;
|
|
border-color: $selected_borders_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 {
|
|
@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; }
|
|
@else { border-color: $backdrop_base_color; }
|
|
background-color: $backdrop_base_color;
|
|
}
|
|
}
|
|
|
|
&:backdrop {
|
|
@if $variant == 'light' { color: $backdrop_base_color; }
|
|
@else { border-color: $backdrop_base_color; }
|
|
background-image: none;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&.trough { // progress bar trough in treeviews
|
|
background-color: transparentize($fg_color,0.9);
|
|
border-radius: 4px;
|
|
|
|
&:selected {
|
|
background-color: if($variant == 'light',
|
|
transparentize($selected_fg_color, 0.7),
|
|
darken($selected_bg_color, 10%));
|
|
@if $variant == 'light' {
|
|
border-width: 1px 0;
|
|
border-style: solid;
|
|
border-color: $selected_bg_color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
column-header {
|
|
.button {
|
|
@extend %column_header_button;
|
|
$_column_header_color: mix($fg_color, $base_color, 50%);
|
|
color: $_column_header_color;
|
|
background-color: $base_color;
|
|
font-weight: bold;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
&:hover {
|
|
@extend %column_header_button;
|
|
color: mix($_column_header_color, $fg_color, 50%);
|
|
box-shadow: none;
|
|
transition: none; //I shouldn't need this
|
|
}
|
|
&:active {
|
|
@extend %column_header_button;
|
|
color: $fg_color;
|
|
transition: none; //I shouldn't need this
|
|
}
|
|
&.dnd {
|
|
@extend column-header.button.dnd;
|
|
}
|
|
}
|
|
&:last-child .button,
|
|
&:last-child .button:backdrop, // set :backdrop too or the border will be visibile there
|
|
&:last-child.button,
|
|
&:last-child.button:backdrop { //treeview-like derived widgets in Banshee and Evolution
|
|
border-right-style: none;
|
|
}
|
|
}
|
|
|
|
column-header.button.dnd { // for treeview-like derive widgets
|
|
transition: none;
|
|
color: $selected_bg_color;
|
|
box-shadow: inset 1px 1px 0 1px $selected_bg_color,
|
|
inset -1px 0 0 1px $selected_bg_color,
|
|
inset 1px 1px $base_color, inset -1px 0 $base_color;;
|
|
&:active { @extend column-header.button.dnd; }
|
|
&:selected { @extend column-header.button.dnd; }
|
|
&:hover { @extend column-header.button.dnd; }
|
|
}
|
|
|
|
%column_header_button {
|
|
padding: 3px 6px;
|
|
border-style: none solid solid none;
|
|
border-radius: 0;
|
|
background-image: none;
|
|
border-color: $bg_color;
|
|
text-shadow: none;
|
|
&:insensitive {
|
|
border-color: $bg_color;
|
|
background-image: none;
|
|
}
|
|
&:backdrop {
|
|
border-color: $backdrop_bg_color;
|
|
border-style: none solid solid none;
|
|
color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
|
|
background-image: none;
|
|
background-color: $backdrop_base_color;
|
|
&:insensitive {
|
|
border-color: $backdrop_bg_color;
|
|
background-image: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/*********
|
|
* Menus *
|
|
*********/
|
|
.menubar {
|
|
-GtkWidget-window-dragging: true;
|
|
padding: 0px;
|
|
box-shadow: inset 0 -1px transparentize(black, 0.9);
|
|
&:backdrop { background-color: $backdrop_bg_color; }
|
|
& > .menuitem {
|
|
padding: 4px 8px;
|
|
&:hover { //Seems like it :hover even with keyboard focus
|
|
box-shadow: inset 0 -3px $selected_bg_color;
|
|
color: $link_color;
|
|
}
|
|
&:insensitive {
|
|
color: $insensitive_fg_color;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu {
|
|
margin: 4px;
|
|
padding: 0px;
|
|
background-color: $base_color;
|
|
border: 1px solid $borders_color; // adds borders in a non composited env
|
|
.csd & { border: none; } // axes borders in a composited env
|
|
.menuitem {
|
|
text-shadow: none;
|
|
padding: 4px;
|
|
&:hover {
|
|
color: $selected_fg_color;
|
|
background-color: $selected_bg_color;
|
|
}
|
|
&:insensitive {
|
|
color: $insensitive_fg_color;
|
|
&:backdrop { color: $backdrop_insensitive_color; }
|
|
}
|
|
&:backdrop, &:backdrop:hover {
|
|
color: $backdrop_fg_color;
|
|
background-color: $backdrop_base_color;
|
|
}
|
|
//submenu indicators
|
|
&.arrow { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
|
|
&.arrow:dir(rtl) {-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl'); }
|
|
}
|
|
&.button { // overlow buttons
|
|
@extend %undecorated_button;
|
|
border-style: none;
|
|
border-radius: 0;
|
|
&.top { border-bottom: 1px solid mix($fg_color, $base_color, 10%); }
|
|
&.bottom { border-top: 1px solid mix($fg_color, $base_color, 10%); }
|
|
&:hover { background-color: mix($fg_color, $base_color, 10%); }
|
|
&:insensitive {
|
|
color: transparent;
|
|
background-color: transparent;
|
|
border-color: transparent ;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menuitem .accelerator { color: gtkalpha(currentColor,0.55); }
|
|
|
|
|
|
/***************
|
|
* Popovers *
|
|
***************/
|
|
|
|
.popover {
|
|
padding: 2px;
|
|
border: 1px solid $borders_color;
|
|
border-radius: 5px;
|
|
background-color: mix($bg_color, $base_color, 50%);
|
|
|
|
box-shadow: 0 2px 3px transparentize(black, 0.5);
|
|
|
|
&:backdrop {
|
|
box-shadow: none;
|
|
}
|
|
|
|
> .list,
|
|
> .view,
|
|
> .toolbar,
|
|
&.osd > .toolbar {
|
|
border-style: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.button.flat,
|
|
.button.flat:hover {
|
|
text-shadow: none;
|
|
transition: none;
|
|
}
|
|
|
|
&.osd { @extend %osd; }
|
|
}
|
|
|
|
//touch selection handlebars for the Popover.osd above
|
|
.entry.cursor-handle,
|
|
.cursor-handle {
|
|
background-color: transparent;
|
|
background-image: none;
|
|
box-shadow: none;
|
|
border-style: none;
|
|
&.top { -gtk-icon-source: -gtk-icontheme('selection-start-symbolic'); }
|
|
&.bottom { -gtk-icon-source: -gtk-icontheme('selection-end-symbolic'); }
|
|
}
|
|
|
|
/*****************
|
|
* Notebooks and *
|
|
* Tabs *
|
|
*****************/
|
|
|
|
.notebook {
|
|
// Through me you go to the grief wracked city;
|
|
// Through me you go to everlasting pain;
|
|
// Through me you go a pass among lost souls.
|
|
// ...
|
|
// Abandon all hope — Ye Who Enter Here
|
|
padding: 0;
|
|
background-color: $base_color;
|
|
-GtkNotebook-initial-gap: 10;
|
|
-GtkNotebook-arrow-spacing: 5;
|
|
-GtkNotebook-tab-curvature: 0;
|
|
-GtkNotebook-tab-overlap: -8;
|
|
-GtkNotebook-has-tab-gap: false;
|
|
-GtkWidget-focus-padding: 0;
|
|
-GtkWidget-focus-line-width: 0;
|
|
transition: all 200ms $ease-out-quad;
|
|
&:backdrop {
|
|
background-color: $backdrop_base_color;
|
|
}
|
|
&.frame {
|
|
border: 1px solid $borders_color;
|
|
// FIXME doesn't work
|
|
&.top { border-top-width: 0; }
|
|
&.bottom { border-bottom-width: 0; }
|
|
&.right { border-right-width: 0; }
|
|
&.left { border-left-width: 0; }
|
|
&:backdrop { border-color: $backdrop_borders_color; }
|
|
}
|
|
&.header {
|
|
// FIXME: double borders in some case, can't fix it w/o a class tho
|
|
// FIXME: doesn't work on dark var
|
|
background-color: mix($bg_color, $borders_color, 70%);
|
|
|
|
// this is the shading of the header behind the tabs
|
|
&.frame {
|
|
border: 1px solid $borders_color;
|
|
&.top { border-bottom-width: 0; }
|
|
&.bottom { border-top-width: 0; }
|
|
&.right { border-left-width: 0; }
|
|
&.left { border-right-width: 0; }
|
|
&:backdrop { border-color: $backdrop_borders_color; }
|
|
}
|
|
|
|
$_header_shade: inset 0 2px 3px -1px transparentize(black, 0.85);
|
|
&.top {
|
|
box-shadow: $_header_shade,
|
|
inset 0 -1px $borders_color; // border
|
|
&:backdrop { box-shadow: inset 0 -1px $backdrop_borders_color; }
|
|
}
|
|
&.bottom {
|
|
box-shadow: $_header_shade,
|
|
inset 0 1px $borders_color;
|
|
&:backdrop { box-shadow: inset 0 1px $backdrop_borders_color; }
|
|
}
|
|
&.right {
|
|
box-shadow: $_header_shade,
|
|
inset 1px 0 $borders_color;
|
|
&:backdrop { box-shadow: inset 1px 0 $backdrop_borders_color; }
|
|
}
|
|
&.left {
|
|
box-shadow: $_header_shade,
|
|
inset -1px 0 $borders_color;
|
|
&:backdrop { box-shadow: inset -1px 0 $backdrop_borders_color; }
|
|
}
|
|
&:backdrop {
|
|
// same color as backdrop pushed button
|
|
background-color: $backdrop_dark_fill;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
tab {
|
|
border-width: 0;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
|
|
outline-offset: 0;
|
|
|
|
$tab_indicator_size: 3px;
|
|
//vertical tab sizing
|
|
$vt_vpadding: 8px;
|
|
$vt_hpadding: 20px;
|
|
// horizontal tab sizing
|
|
$ht_vpadding: 5px;
|
|
$ht_hpadding: 20px;
|
|
|
|
//FIXME: we get double border in some cases, not considering the broken
|
|
//notebook content frame...
|
|
&.top, &.bottom { padding: $vt_vpadding $vt_hpadding; }
|
|
&.left, &.right { padding: $ht_vpadding $ht_hpadding; }
|
|
|
|
|
|
/* works for testnotebookdnd, but there's a superfluous border
|
|
in gedit or web, commented out for now, needs gtk fixes
|
|
&.reorderable-page {
|
|
&.top {
|
|
padding-top: ($vt_vpadding - 1px);
|
|
border-top-width: 1px;
|
|
border-left-width: 1px;
|
|
border-right-width: 1px;
|
|
}
|
|
&.bottom {
|
|
padding-bottom: ($vt_vpadding - 1px);
|
|
border-bottom-width: 1px;
|
|
border-left-width: 1px;
|
|
border-right-width: 1px;
|
|
}
|
|
&.left {
|
|
padding-left: ($ht_hpadding - 1px);
|
|
border-left-width: 1px;
|
|
border-top-width: 1px;
|
|
border-bottom-width: 1px;
|
|
}
|
|
&.right {
|
|
padding-right: ($ht_hpadding - 1px);
|
|
border-right-width: 1px;
|
|
border-top-width: 1px;
|
|
border-bottom-width: 1px;
|
|
}
|
|
}
|
|
*/
|
|
&.reorderable-page {
|
|
&.top, &.bottom {
|
|
padding-left: 12px; // for a nicer close button
|
|
padding-right: 12px; // placement
|
|
border-left-width: 1px;
|
|
border-right-width: 1px;
|
|
}
|
|
&.left, &.right {
|
|
border-bottom-width: 1px;
|
|
border-top-width: 1px;
|
|
}
|
|
}
|
|
&.top {
|
|
//padding-bottom: ($vt_vpadding -$tab_indicator_size);
|
|
border-bottom-width: $tab_indicator_size;
|
|
}
|
|
&.bottom {
|
|
//padding-top: ($vt_vpadding -$tab_indicator_size);
|
|
border-top-width: $tab_indicator_size;
|
|
}
|
|
&.left {
|
|
//padding-right: ($ht_hpadding -$tab_indicator_size);
|
|
border-right-width: $tab_indicator_size;
|
|
}
|
|
&.right {
|
|
//padding-left: ($ht_hpadding -$tab_indicator_size);
|
|
border-left-width: $tab_indicator_size;
|
|
}
|
|
|
|
//here's the interesting stuff
|
|
&:hover, &.prelight-page {
|
|
border-color: $borders_color;
|
|
}
|
|
&:active, &.active-page, &:backdrop:active {
|
|
border-color: $selected_bg_color;
|
|
}
|
|
&:backdrop {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
}
|
|
@each $_tab, $_border in (top, bottom),
|
|
(bottom, top),
|
|
(left, right),
|
|
(right, left) {
|
|
&.reorderable-page.#{$_tab} {
|
|
border-color: transparent;
|
|
&:hover, &.prelight-page {
|
|
border-color: transparentize($borders_color,0.7);
|
|
border-#{$_border}-color: $borders_color;
|
|
background-color: transparentize($bg_color,0.8);
|
|
}
|
|
&:active, &.active-page {
|
|
background-color: transparentize($bg_color,0.5);
|
|
border-color: transparentize($borders_color,0.5);
|
|
border-#{$_border}-color: $selected_bg_color;
|
|
&:hover { background-color: transparentize($bg_color,0.3); }
|
|
&:backdrop {
|
|
border-color: $backdrop_borders_color;
|
|
background-color: $backdrop_bg_color;
|
|
border-#{$_border}-color: $selected_bg_color;
|
|
}
|
|
}
|
|
&:backdrop {
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
.label { //tab text
|
|
padding: 0 2px; // needed for a nicer focus ring
|
|
font-weight: bold;
|
|
color: $insensitive_fg_color;
|
|
&:backdrop, &.prelight-page:backdrop {
|
|
color: mix($backdrop_fg_color, $backdrop_insensitive_color, 50%);
|
|
}
|
|
}
|
|
.prelight-page .label, .label.prelight-page {
|
|
// prelight tab text
|
|
color: mix($fg_color, $insensitive_fg_color, 50%);
|
|
&:backdrop { // FIXME, it's the same as .label:backdrop up here
|
|
color: mix($backdrop_fg_color, $backdrop_insensitive_color, 50%);
|
|
}
|
|
}
|
|
.active-page .label, .label.active-page {
|
|
// active tab text
|
|
color: $fg_color;
|
|
&:backdrop { color: $backdrop_fg_color; }
|
|
}
|
|
.button { //tab close button
|
|
padding: 0;
|
|
border: 1px solid transparent;
|
|
@extend %undecorated_button;
|
|
icon-shadow: none;
|
|
transition: none;
|
|
color: transparentize($fg_color,0.7);
|
|
&:hover {
|
|
color: $fg_color;
|
|
@include button(hover, $edge:none);
|
|
background-image: none;
|
|
box-shadow: none;
|
|
}
|
|
&:active {
|
|
@include button(active, $edge:none);
|
|
}
|
|
&:backdrop {
|
|
color: transparentize($backdrop_fg_color,0.7);
|
|
border-color: transparent;
|
|
}
|
|
& > GtkImage { // this is a hack which makes tabs grow
|
|
padding: 2px;
|
|
}
|
|
}
|
|
}
|
|
&.arrow {
|
|
color: $insensitive_fg_color;
|
|
&:hover { color: mix($fg_color, $insensitive_fg_color, 50%); }
|
|
&:active { color: $fg_color; }
|
|
&:insensitive {
|
|
color: transparentize($insensitive_fg_color,0.7);
|
|
}
|
|
&:backdrop {
|
|
color: transparentize($backdrop_fg_color,0.6);
|
|
&:insensitive {
|
|
color: $backdrop_insensitive_color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**************
|
|
* Scrollbars *
|
|
**************/
|
|
|
|
.scrollbar {
|
|
-GtkRange-slider-width: 13;
|
|
-GtkRange-trough-border: 1;
|
|
-GtkScrollbar-has-backward-stepper: false;
|
|
-GtkScrollbar-has-forward-stepper: false;
|
|
-GtkScrollbar-min-slider-length: 42; // minimum size for the slider.
|
|
// sadly can't be in '.slider'
|
|
// where it belongs
|
|
-GtkRange-stepper-spacing: 0;
|
|
-GtkRange-trough-under-steppers: 1;
|
|
|
|
.button {
|
|
border: none;
|
|
}
|
|
|
|
// trough coloring
|
|
.trough {
|
|
background-color: $scrollbar_bg_color;
|
|
border: 1px none $borders_color;
|
|
|
|
&:backdrop {
|
|
background-color: $backdrop_scrollbar_bg_color;
|
|
border-color: $backdrop_borders_color;
|
|
}
|
|
}
|
|
|
|
// slider coloring
|
|
.slider {
|
|
border-color: transparent;
|
|
border-style: solid;
|
|
background-color: mix($fg_color, $bg_color, 40%);
|
|
background-clip: padding-box; // needed since we use the borders as margins
|
|
|
|
&:hover { background-color: mix($fg_color, $bg_color, 60%); }
|
|
|
|
&:prelight:active { background-color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%));}
|
|
|
|
&:backdrop { background-color: mix($backdrop_fg_color, $backdrop_bg_color, 40%); }
|
|
|
|
&:insensitive {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
&.overlay-indicator { // Overlay scrolling indicator
|
|
-GtkRange-slider-width: 8px;
|
|
|
|
.slider {
|
|
background-color: transparentize($fg_color, 0.7);
|
|
border-width: 2px;
|
|
border-radius: 100px;
|
|
}
|
|
|
|
.trough {
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
}
|
|
|
|
&.dragging,
|
|
&.hovering {
|
|
-GtkRange-slider-width: 13;
|
|
|
|
.slider { border-width: 1px; }
|
|
|
|
.trough {
|
|
border-color: transparentize($borders_color, 0.3);
|
|
background-color: transparentize($scrollbar_bg_color, 0.3);
|
|
}
|
|
|
|
&.fine-tune {
|
|
|
|
.slider { border-width: 3px; }
|
|
|
|
.trough { background-color: if($variant=='light', darken($scrollbar_bg_color, 3%), lighten($scrollbar_bg_color, 3%)); }
|
|
}
|
|
}
|
|
}
|
|
|
|
// borders and margins
|
|
.slider {
|
|
border-width: 3px;
|
|
border-radius: 100px;
|
|
}
|
|
|
|
&.fine-tune .slider { border-width: 4px; }
|
|
|
|
&.vertical {
|
|
|
|
.slider {
|
|
margin-left: 1px;
|
|
|
|
&:dir(rtl) {
|
|
margin-left: 0;
|
|
margin-right: 1px;
|
|
}
|
|
}
|
|
|
|
.trough {
|
|
border-left-style: solid;
|
|
|
|
&:dir(rtl) {
|
|
border-left-style: none;
|
|
border-right-style: solid;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.horizontal {
|
|
|
|
.slider {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.trough { border-top-style: solid; }
|
|
}
|
|
}
|
|
|
|
.scrollbars-junction,
|
|
.scrollbars-junction.frame { // the small square between two scrollbars
|
|
border-color: transparent;
|
|
// the border image is used to add the missing dot between the borders, details, details, details...
|
|
border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch;
|
|
background-color: $scrollbar_bg_color;
|
|
|
|
&:dir(rtl) { border-image-slice: 0 1 0 0; }
|
|
|
|
&:backdrop {
|
|
border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px);
|
|
background-color: $backdrop_scrollbar_bg_color;
|
|
}
|
|
}
|
|
|
|
|
|
/**********
|
|
* Switch *
|
|
**********/
|
|
|
|
GtkSwitch {
|
|
-GtkSwitch-slider-width: 45px; // 55px is the right value to make it as tall
|
|
// as buttons, not doing that for now
|
|
font-weight: bold;
|
|
font-size: smaller;
|
|
outline-offset: -4px;
|
|
box-shadow: inset 0 1px transparentize(black, 0.9), // needs to be set here
|
|
_widget_edge(); // otherwise it gets
|
|
// clipped
|
|
&.trough {
|
|
// similar to the .scale
|
|
border: 1px solid $borders_color;
|
|
border-radius: 3px;
|
|
color: $fg_color;
|
|
background-image: linear-gradient(to bottom, mix($bg_color, $borders_color, 60%));
|
|
text-shadow: 0 1px transparentize(black, 0.9);
|
|
&:active {
|
|
@include progressbar_fill;
|
|
color: white;
|
|
border-color: $selected_borders_color;
|
|
box-shadow: _widget_edge();
|
|
text-shadow: 0 1px transparentize($selected_borders_color, 0.5),
|
|
0 0 2px transparentize(white, 0.4);
|
|
}
|
|
&:insensitive {
|
|
color: $insensitive_fg_color;
|
|
border-color: $borders_color;
|
|
background-image: none;
|
|
background-color: $insensitive_bg_color;
|
|
box-shadow: _widget_edge();
|
|
text-shadow: none;
|
|
}
|
|
&:backdrop {
|
|
color: $backdrop_fg_color;
|
|
border-color: $backdrop_borders_color;
|
|
background-image: linear-gradient(to bottom, $backdrop_dark_fill);
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
&:active {
|
|
@if $variant == 'light' { color: $backdrop_bg_color; }
|
|
border-color: if($variant == 'light', $selected_bg_color,
|
|
$selected_borders_color);
|
|
background-image: linear-gradient(to bottom, $selected_bg_color);
|
|
box-shadow: none;
|
|
}
|
|
&:insensitive {
|
|
color: $backdrop_insensitive_color;
|
|
border-color: $backdrop_borders_color;
|
|
background-image: none;
|
|
background-color: $insensitive_bg_color;
|
|
}
|
|
}
|
|
}
|
|
&.slider {
|
|
border: 1px solid;
|
|
border-radius: 3px;
|
|
@include button(normal);
|
|
box-shadow: inset 0 1px if($variant=='light', white,
|
|
transparentize(white, 0.85)),
|
|
inset 0 -2px transparentize($bg_color, 0.4),
|
|
inset 0 -1px mix($bg_color, $borders_color, 50%);
|
|
&:hover {
|
|
@include button(hover);
|
|
box-shadow: inset 0 1px if($variant=='light', white,
|
|
transparentize(white, 0.85)),
|
|
inset 0 -2px transparentize($bg_color, 0.4),
|
|
inset 0 -1px mix($bg_color, $borders_color, 50%);
|
|
}
|
|
&:active { border: 1px solid $selected_borders_color; }
|
|
&:insensitive { @include button(insensitive, $edge:none); }
|
|
&:backdrop {
|
|
@include button(backdrop);
|
|
box-shadow: none;
|
|
&:active{
|
|
border-color: if($variant == 'light', $selected_bg_color,
|
|
$selected_borders_color);
|
|
}
|
|
&:insensitive {
|
|
@include button(backdrop-insensitive);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
.list-row:selected & {
|
|
@if $variant == 'light' {
|
|
box-shadow: none;
|
|
border-color: $selected_borders_color;
|
|
&:backdrop { border-color: $selected_borders_color; }
|
|
&.slider:dir(rtl) { border-left-color: $borders_color; }
|
|
&.slider:dir(ltr) { border-right-color: $borders_color; }
|
|
&.slider,
|
|
&.slider:active { border-color: $selected_borders_color; }
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/*************************
|
|
* Check and Radio items *
|
|
*************************/
|
|
|
|
// draw regular check and radio items using our PNG assets
|
|
// all assets are rendered from assets.svg. never add pngs directly
|
|
|
|
$asset_suffix: if($variant=='dark', '-dark', '');
|
|
@each $w,$a in ('check', 'checkbox'),
|
|
('radio','radio') {
|
|
|
|
//standard checks and radios
|
|
@each $s,$as in ('','-unchecked'),
|
|
(':hover', '-unchecked-hover'),
|
|
(':active', '-unchecked-active'),
|
|
(':insensitive','-unchecked-insensitive'),
|
|
(':backdrop', '-unchecked-backdrop'),
|
|
(':backdrop:insensitive', '-unchecked-backdrop-insensitive'),
|
|
(':inconsistent', '-mixed'),
|
|
(':inconsistent:hover', '-mixed-hover'),
|
|
(':inconsistent:selected', '-mixed-active'),
|
|
(':inconsistent:backdrop', '-mixed-backdrop'),
|
|
(':inconsistent:insensitive', '-mixed-insensitive'),
|
|
(':inconsistent:insensitive:backdrop', '-mixed-backdrop-insensitive'),
|
|
(':checked', '-checked'),
|
|
(':checked:insensitive','-checked-insensitive'),
|
|
(':checked:hover', '-checked-hover'),
|
|
(':checked:active', '-checked-active'),
|
|
(':backdrop:checked', '-checked-backdrop'),
|
|
(':backdrop:checked:insensitive', '-checked-backdrop-insensitive') {
|
|
.#{$w}#{$s} {
|
|
-gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"),
|
|
url("assets/#{$a}#{$as}#{$asset_suffix}@2.png"));
|
|
icon-shadow: if(str-index($s,"backdrop"), none, 0 1px 0 $borders_edge); //no edge highlight for :backdrop
|
|
&.button.flat { icon-shadow: none; }
|
|
}
|
|
@if $variant == 'light' {
|
|
// the borders of the light variant versions of checks and radios are
|
|
// too similar in luminosity to the selected background color, hence
|
|
// we need special casing.
|
|
.view.#{$w}#{$s}:selected,
|
|
.list-row:selected .#{$w}#{$s} {
|
|
-gtk-icon-source: -gtk-scaled(url("assets/selected-#{$a}#{$as}#{$asset_suffix}.png"),
|
|
url("assets/selected-#{$a}#{$as}#{$asset_suffix}@2.png"));
|
|
}
|
|
}
|
|
}
|
|
|
|
//menu
|
|
.menu .menuitem.#{$w} {
|
|
-gtk-icon-source: -gtk-icontheme('#{$a}-symbolic');
|
|
color: mix($fg_color, $bg_color, 60%);
|
|
icon-shadow: none;
|
|
&:active, &:checked {
|
|
-gtk-icon-source: -gtk-icontheme('#{$a}-checked-symbolic');
|
|
}
|
|
&:inconsistent {
|
|
-gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic');
|
|
}
|
|
&:hover { color: $selected_fg_color; }
|
|
&:insensitive { color: mix($insensitive_fg_color, $bg_color, 50%); }
|
|
}
|
|
}
|
|
|
|
//treeview and list-rows
|
|
.view.check, .view.radio,
|
|
.list-row .check, list-row .radio {
|
|
icon-shadow: none;
|
|
&:selected, &:hover { icon-shadow: none; }
|
|
}
|
|
|
|
//selection-mode
|
|
@each $s,$as in ('','-selectionmode'),
|
|
(':hover', '-hover-selectionmode'),
|
|
(':active', '-active-selectionmode'),
|
|
(':backdrop', '-backdrop-selectionmode'),
|
|
(':checked', '-checked-selectionmode'),
|
|
(':checked:hover', '-checked-hover-selectionmode'),
|
|
(':checked:active', '-checked-active-selectionmode'),
|
|
(':backdrop:checked', '-checked-backdrop-selectionmode') {
|
|
.view.content-view.check#{$s} {
|
|
icon-shadow: none;
|
|
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
|
|
url("assets/checkbox#{$as}@2.png"));
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
GtkCheckButton.text-button, GtkRadioButton.text-button {
|
|
// this is for a nice focus on check and radios text
|
|
padding: 1px 2px 4px;
|
|
outline-offset: 0;
|
|
&:insensitive,
|
|
&:insensitive:active,
|
|
&:insensitive:inconsistent {
|
|
// set insensitive color, which is overriden otherwise
|
|
color: $insensitive_fg_color;
|
|
&:backdrop { color: $backdrop_insensitive_color; }
|
|
}
|
|
}
|
|
|
|
/************
|
|
* GtkScale *
|
|
************/
|
|
.scale,
|
|
.scale.scale-has-marks-above.scale-has-marks-below,
|
|
.scale.vertical.scale-has-marks-above.scale-has-marks-below {
|
|
// FIXME: rationalize
|
|
-GtkScale-slider-length: 20;
|
|
-GtkRange-slider-width: 20;
|
|
-GtkRange-trough-border: 2;
|
|
outline-offset: -9px;
|
|
outline-radius: 4px;
|
|
|
|
&.fine-tune {
|
|
outline-offset: -7px;
|
|
outline-radius: 6px;
|
|
&.trough {
|
|
margin: 8px;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
&.slider {
|
|
//FIXME: better gradient on the slider and hover state
|
|
@include button(normal);
|
|
border: 1px solid;
|
|
border-radius: 50%;
|
|
border-color: darken($borders_color,3%);
|
|
box-shadow: inset 0 1px if($variant=='light', white,
|
|
transparentize(white,0.85)),
|
|
inset 0 #{-2px} $bg_color,
|
|
inset 0 #{-1px} mix($bg_color, $borders_color, 50%);
|
|
&:hover {
|
|
@include button(hover);
|
|
border-color: darken($borders_color,3%);
|
|
border-radius: 50%; // needed for double marks scales
|
|
box-shadow: inset 0 1px if($variant=='light', white,
|
|
transparentize(white, 0.85)),
|
|
inset 0 #{-2px} if($variant=='light', white,
|
|
transparentize(white, 0.86)),
|
|
inset 0 #{-1px} mix($bg_color, $borders_color, 70%);
|
|
}
|
|
&:insensitive {
|
|
border-style: solid; // needed for double marks scales or they'll get
|
|
border-radius: 50%; // overridden
|
|
background-image: linear-gradient(to bottom, $insensitive_bg_color);
|
|
box-shadow: none;
|
|
}
|
|
&:backdrop {
|
|
border-style: solid; // needed for double marks scales or they'll get
|
|
border-radius: 50%; // overridden
|
|
border-color: darken($backdrop_borders_color,3%);
|
|
background-image: linear-gradient(to bottom, $backdrop_bg_color);
|
|
box-shadow: none;
|
|
}
|
|
&:backdrop:insensitive {
|
|
@include button(backdrop-insensitive);
|
|
}
|
|
&:active {
|
|
border: 1px solid if($variant=='light',darken($selected_borders_color,3%),
|
|
darken($selected_bg_color,15%));
|
|
}
|
|
//OSD sliders
|
|
.osd & {
|
|
@include button(osd);
|
|
background-color: opacify($osd_bg_color, 1);
|
|
&:hover { @include button(osd-hover); }
|
|
&:active { @include button(osd-active); }
|
|
&:backdrop { @include button(osd-backdrop); }
|
|
}
|
|
}
|
|
&.trough {
|
|
margin: 10px;
|
|
border: 1px solid $borders_color;
|
|
border-radius: 3px;
|
|
background-color: mix($bg_color, $borders_color, 60%);
|
|
box-shadow: inset 1px 1px transparentize(black, 0.9),
|
|
_widget_edge();
|
|
&.highlight {
|
|
@include progressbar_fill;
|
|
border-color: $selected_borders_color;
|
|
box-shadow: _widget_edge();
|
|
&.vertical { @include progressbar_fill(vertical); }
|
|
&:backdrop {
|
|
border-color: if($variant=='light', $selected_bg_color,
|
|
$selected_borders_color);
|
|
background-color: $selected_bg_color;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
&:insensitive, &.vertical:insensitive {
|
|
border-color: $insensitive_borders_color;
|
|
background-image: none;
|
|
background-color: $insensitive_bg_color;
|
|
box-shadow: _widget_edge();
|
|
}
|
|
&:backdrop {
|
|
border-color: $backdrop_borders_color;
|
|
background-color: mix($backdrop_bg_color, $borders_color, 50%);
|
|
box-shadow: none;
|
|
}
|
|
&:backdrop:insensitive, .highlight:backdrop:insensitive {
|
|
border-color: $backdrop_borders_color;
|
|
background-color: $insensitive_bg_color;
|
|
}
|
|
//OSD troughs
|
|
.osd & {
|
|
border-color: $osd_borders_color;
|
|
box-shadow: none;
|
|
margin: 9px;
|
|
&.fine-tune { margin: 7px; }
|
|
background-color: transparentize($osd_borders_color, 0.2);
|
|
outline-color: transparentize($osd_fg_color, 0.8);
|
|
outline-offset: -8px;
|
|
&.highlight {
|
|
background-image: none;
|
|
background-color: $selected_bg_color;
|
|
}
|
|
&:insensitive, &:backdrop:insensitive {
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
}
|
|
&:backdrop {
|
|
border-color: $osd_borders_color;
|
|
background-image: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
$asset_suffix: if($variant=='dark', '-dark', '');
|
|
@each $d,$dn in ('', 'horz'),
|
|
('.vertical', 'vert') {
|
|
@each $w,$we in ('scale-has-marks-below','scale_marks_below'),
|
|
('scale-has-marks-above','scale_marks_above') {
|
|
.scale#{$d}.#{$w} {
|
|
-GtkScale-slider-length: 20;
|
|
-GtkRange-slider-width: 24;
|
|
-GtkRange-trough-border: 2;
|
|
|
|
@extend %#{$we}_#{$dn};
|
|
|
|
@each $s,$as in ('',''),
|
|
(':hover','-hover'),
|
|
(':active','-active'),
|
|
(':insensitive','-insensitive'),
|
|
(':backdrop','-backdrop'),
|
|
(':backdrop:insensitive','-backdrop-insensitive') {
|
|
&.slider#{$s} {
|
|
$_url: 'assets/slider-#{$dn}-#{$w}#{$as}#{$asset_suffix}';
|
|
border-style: none;
|
|
border-radius: 0;
|
|
background-color: transparent;
|
|
background-image: -gtk-scaled(url('#{$_url}.png'),
|
|
url('#{$_url}@2.png'));
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
%scale_marks_above_horz {
|
|
.trough { margin: 14px 10px 10px; }
|
|
&.fine-tune .trough { margin: 12px 8px 8px; }
|
|
}
|
|
%scale_marks_below_horz {
|
|
.trough { margin: 10px 10px 14px; }
|
|
&.fine-tune .trough { margin: 8px 8px 12px; }
|
|
}
|
|
%scale_marks_above_vert {
|
|
.trough { margin: 10px 10px 10px 14px; }
|
|
&.fine-tune .trough { margin: 8px 8px 8px 12px; }
|
|
}
|
|
%scale_marks_below_vert {
|
|
.trough { margin: 10px 14px 10px 10px; }
|
|
&.fine-tune .trough { margin: 8px 12px 8px 8px; }
|
|
}
|
|
|
|
/*****************
|
|
* Progress bars *
|
|
*****************/
|
|
|
|
GtkProgressBar {
|
|
padding: 0;
|
|
font-size: smaller;
|
|
color: transparentize($fg_color, 0.6);
|
|
box-shadow: inset 1px 1px transparentize(black, 0.9), // needs to be set
|
|
_widget_edge(); // here ot it gets
|
|
// clipped
|
|
&:backdrop {
|
|
color: $backdrop_insensitive_color;
|
|
}
|
|
&.osd {
|
|
-GtkProgressBar-xspacing: 0;
|
|
-GtkProgressBar-yspacing: 0;
|
|
-GtkProgressBar-min-horizontal-bar-height: 3;
|
|
}
|
|
&.trough { // background
|
|
border: 1px solid $borders_color;
|
|
border-radius: 3px;
|
|
background-color: mix($borders_color, $bg_color, 35%);
|
|
&:backdrop{
|
|
border-color: $backdrop_borders_color;
|
|
background-color: $backdrop_dark_fill;
|
|
box-shadow: 0 1px transparentize(white,1);
|
|
}
|
|
&.osd {
|
|
border-style: none;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// moving bit
|
|
.progressbar {
|
|
@include progressbar_fill;
|
|
border: 1px solid $selected_borders_color;
|
|
border-radius: 1.5px;
|
|
box-shadow: none; //needed for clipping
|
|
&.left {
|
|
border-top-left-radius: 3px;
|
|
border-bottom-left-radius: 3px;
|
|
}
|
|
&.right {
|
|
border-top-right-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
&.left.right {
|
|
box-shadow: none;
|
|
}
|
|
&.vertical {
|
|
@include progressbar_fill(vertical);
|
|
&.bottom {
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
box-shadow: none;
|
|
}
|
|
&.top {
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
}
|
|
}
|
|
&:backdrop {
|
|
border-color: if($variant=='light', $selected_bg_color,
|
|
$selected_borders_color);
|
|
background-image: none;
|
|
background-color: $selected_bg_color;
|
|
box-shadow: none;
|
|
}
|
|
&.osd {
|
|
background-image: none;
|
|
background-color: $selected_bg_color;
|
|
border-style: none;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/*************
|
|
* Level Bar *
|
|
*************/
|
|
|
|
.level-bar.vertical {
|
|
-GtkLevelBar-min-block-width: 3;
|
|
-GtkLevelBar-min-block-height: 34;
|
|
}
|
|
|
|
.level-bar {
|
|
box-shadow: _widget_edge(); // needs to be set here to avoid clipping
|
|
-GtkLevelBar-min-block-width: 34;
|
|
-GtkLevelBar-min-block-height: 3;
|
|
&.vertical {
|
|
-GtkLevelBar-min-block-width: 3;
|
|
-GtkLevelBar-min-block-height: 34;
|
|
}
|
|
&.trough {
|
|
border: 1px solid;
|
|
padding: 2px;
|
|
border-radius: 3px;
|
|
@include entry(normal);
|
|
&:backdrop {
|
|
@include entry(backdrop);
|
|
}
|
|
}
|
|
&.fill-block {
|
|
// FIXME: it would be nice to set make fill blocks bigger, but we'd need
|
|
// :nth-child working on discrete indicators
|
|
border: 1px solid if($variant=='light', darken($selected_bg_color,10%),
|
|
darken($selected_bg_color,5%));
|
|
background-color: $selected_bg_color;
|
|
box-shadow: 0 1px transparentize(black, 0.9);
|
|
border-radius: 1px;
|
|
&:backdrop {
|
|
border-color: $selected_bg_color;
|
|
box-shadow: none;
|
|
}
|
|
&.indicator-discrete {
|
|
&.horizontal { margin: 0 1px; }
|
|
&.vertical { margin: 1px 0; }
|
|
}
|
|
&.level-high {
|
|
border-color: darken($success_color,10%);
|
|
background-color: $success_color;
|
|
&:backdrop { border-color: $success_color; }
|
|
}
|
|
&.level-low {
|
|
border-color: darken($warning_color,10%);
|
|
background-color: $warning_color;
|
|
&:backdrop { border-color: $warning_color; };
|
|
}
|
|
&.empty-fill-block {
|
|
background-color: transparent;
|
|
border-color: if($variant=='light', transparentize($fg_color,0.8),
|
|
transparentize($fg_color,0.9));
|
|
box-shadow: none;
|
|
&:backdrop { border-color: transparentize($backdrop_fg_color,0.85); }
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/**********
|
|
* Frames *
|
|
**********/
|
|
.frame {
|
|
border: 1px solid $borders_color;
|
|
&.flat { border-style: none; }
|
|
&:backdrop { border-color: $backdrop_borders_color; }
|
|
padding: 0;
|
|
&.action-bar {
|
|
padding: 6px;
|
|
border-width: 1px 0 0;
|
|
}
|
|
}
|
|
|
|
GtkScrolledWindow {
|
|
GtkViewport.frame { // avoid double borders when viewport inside
|
|
// scrolled window
|
|
border-style: none;
|
|
}
|
|
}
|
|
|
|
//vbox and hbox separators
|
|
.separator {
|
|
// always disable separators
|
|
// -GtkWidget-wide-separators: true;
|
|
color: transparentize(black, 0.9);
|
|
|
|
// Font and File button separators
|
|
GtkFileChooserButton &,
|
|
GtkFontButton & {
|
|
// always disable separators
|
|
-GtkWidget-wide-separators: true;
|
|
-GtkWidget-horizontal-separator: 0;
|
|
-GtkWidget-vertical-separator: 0;
|
|
}
|
|
}
|
|
|
|
/*********
|
|
* Lists *
|
|
*********/
|
|
|
|
.list, .list-row {
|
|
background-color: $base_color;
|
|
border-color: $borders_color;
|
|
&:backdrop {
|
|
background-color: $backdrop_base_color;
|
|
border-color: $backdrop_borders_color;
|
|
}
|
|
}
|
|
|
|
.list-row,
|
|
.grid-child {
|
|
padding: 2px;
|
|
}
|
|
|
|
.list-row.button {
|
|
@extend %undecorated_button;
|
|
background-color: transparentize($base_color,1); // for the transition
|
|
border-style: none; // I need no borders here
|
|
border-radius: 0; // and no rounded corners
|
|
box-shadow: none; // and no box-shadow
|
|
&:hover {
|
|
background-color: mix($fg_color, $base_color, 5%);
|
|
}
|
|
&:active {
|
|
box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
|
|
}
|
|
&:selected {
|
|
&:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
|
|
&:hover {
|
|
background-color: mix($fg_color, $selected_bg_color, 10%);
|
|
}
|
|
&:backdrop { background-color: $selected_bg_color; }
|
|
}
|
|
&:backdrop:hover {
|
|
@extend %undecorated_button;
|
|
}
|
|
}
|
|
|
|
.list-row:selected {
|
|
@extend %selected_items;
|
|
.button {
|
|
@include button(normal, $edge:none);
|
|
@if $variant == 'light' { border-color: $selected_borders_color; }
|
|
&.flat {
|
|
@include button(undecorated, $edge:none);
|
|
color: $selected_fg_color;
|
|
}
|
|
&:hover {
|
|
@include button(hover, $edge:none);
|
|
@if $variant == 'light' { border-color: $selected_borders_color; }
|
|
}
|
|
&:active, &:checked {
|
|
@include button(active, $edge:none);
|
|
@if $variant == 'light' { border-color: $selected_borders_color; }
|
|
}
|
|
&:backdrop, &.flat:backdrop {
|
|
@include button(backdrop, $edge:none);
|
|
@if $variant == 'light' { border-color: $selected_borders_color; }
|
|
&:active, &:checked {
|
|
@include button(backdrop-active, $edge:none);
|
|
@if $variant == 'light' { border-color: $selected_borders_color; }
|
|
}
|
|
&:insensitive {
|
|
@include button(backdrop-insensitive, $edge:none);
|
|
@if $variant == 'light' { border-color: $selected_borders_color; }
|
|
&:active, &:checked {
|
|
@include button(backdrop-insensitive-active, $edge:none);
|
|
@if $variant == 'light' { border-color: $selected_borders_color; }
|
|
}
|
|
}
|
|
}
|
|
&.flat:backdrop {
|
|
@include button(undecorated);
|
|
color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color);
|
|
}
|
|
&:insensitive {
|
|
@include button(insensitive, $edge:none);
|
|
@if $variant == 'light' { border-color: $selected_borders_color; }
|
|
&:active, &:checked { @include button(insensitive-active, $edge:none); }
|
|
}
|
|
//FIXME: make placeholder with buttons w/o edge to be extended around
|
|
// istead of repeating everytime this stuff.
|
|
}
|
|
}
|
|
|
|
// transition
|
|
.list-row, list-row.button {
|
|
transition: all 300ms $ease-out-quad;
|
|
&:hover { transition: none; }
|
|
}
|
|
|
|
|
|
/*********************
|
|
* App Notifications *
|
|
*********************/
|
|
|
|
.app-notification,
|
|
.app-notification.frame {
|
|
@extend %osd;
|
|
padding: 10px;
|
|
border: none;
|
|
border-radius: 0 0 6px 6px;
|
|
background-color: $osd_bg_color;
|
|
background-image: linear-gradient(to bottom, transparentize(black, 0.8),
|
|
transparent 2px);
|
|
background-clip: padding-box;
|
|
&:backdrop { background-image: none; }
|
|
.button {
|
|
@include button(osd);
|
|
&.flat {
|
|
@extend %undecorated_button;
|
|
icon-shadow: 0 1px black;
|
|
text-shadow: 0 1px black;
|
|
&:backdrop,
|
|
&:insensitive,
|
|
&:backdrop:insensitive { @extend %undecorated_button; }
|
|
}
|
|
&:hover { @include button(osd-hover); }
|
|
&:active,
|
|
&:checked,
|
|
&:backdrop:active,
|
|
&:backdrop:checked {
|
|
@include button(osd-active);
|
|
}
|
|
&:insensitive,
|
|
&:backdrop:insensitive {
|
|
@include button(osd-insensitive);
|
|
}
|
|
&:backdrop { @include button(osd-backdrop); }
|
|
}
|
|
}
|
|
|
|
/*************
|
|
* Expanders *
|
|
*************/
|
|
|
|
.expander {
|
|
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
|
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
|
&:hover { color: lighten($fg_color,30%); } //only lightens the arrow
|
|
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
|
}
|
|
|
|
/************
|
|
* Calendar *
|
|
***********/
|
|
GtkCalendar {
|
|
color: $text_color;
|
|
border: 1px solid $borders_color;
|
|
|
|
&:selected {
|
|
@extend .view:selected;
|
|
}
|
|
|
|
&.header {
|
|
border: 1px solid transparentize(black, 0.9);
|
|
border-radius: 0;
|
|
|
|
&:backdrop { border-color: transparentize(black, 0.9); }
|
|
}
|
|
|
|
&.button {
|
|
@extend %undecorated_button;
|
|
color: transparentize($fg_color, 0.55);
|
|
|
|
&:hover {
|
|
@extend %undecorated_button;
|
|
color: $fg_color;
|
|
}
|
|
|
|
&:backdrop {
|
|
@extend %undecorated_button;
|
|
color: transparentize($backdrop_fg_color,0.55);
|
|
}
|
|
}
|
|
|
|
&.highlight, &.highlight:backdrop { color: gtkalpha(currentColor, 0.55); }
|
|
|
|
&:backdrop {
|
|
color: $backdrop_text_color;
|
|
border-color: $backdrop_borders_color;
|
|
}
|
|
}
|
|
|
|
/***********
|
|
* Dialogs *
|
|
***********/
|
|
|
|
.message-dialog .dialog-action-area .button {
|
|
padding: 8px;
|
|
}
|
|
|
|
.message-dialog { // Message Dialog styling
|
|
-GtkDialog-button-spacing: 0;
|
|
.titlebar {
|
|
border-style: none;
|
|
box-shadow: inset 0 1px $borders_edge;
|
|
}
|
|
&.csd { // rounded bottom border styling for csd version
|
|
&.background {
|
|
// bigger radius for better antialiasing
|
|
border-bottom-left-radius: 9px;
|
|
border-bottom-right-radius: 9px;
|
|
}
|
|
.dialog-action-area .button {
|
|
padding: 12px;
|
|
border-radius: 0;
|
|
@include button(normal, $edge:none);
|
|
@extend %middle_button;
|
|
&:hover {
|
|
@include button(hover, $edge:none);
|
|
@extend %middle_button;
|
|
}
|
|
&:active {
|
|
@include button(active, $edge:none);
|
|
@extend %middle_button;
|
|
}
|
|
&:insensitive {
|
|
@include button(insensitive, $edge:none);
|
|
@extend %middle_button;
|
|
}
|
|
&:backdrop {
|
|
@include button(backdrop, $edge:none);
|
|
@extend %middle_button;
|
|
}
|
|
&:backdrop:insensitive {
|
|
@include button(backdrop-insensitive, $edge:none);
|
|
@extend %middle_button;
|
|
}
|
|
@each $b_type, $b_color in (suggested-action, $selected_bg_color),
|
|
(destructive-action, $destructive_color) {
|
|
&.#{$b_type} {
|
|
@include button(normal, $b_color, white, $edge:none);
|
|
@extend %middle_button;
|
|
&:hover {
|
|
@include button(hover, $b_color, white, $edge:none);
|
|
@extend %middle_button;
|
|
}
|
|
&:active {
|
|
@include button(active, $b_color, white, $edge:none);
|
|
@extend %middle_button;
|
|
}
|
|
&:backdrop {
|
|
@include button(backdrop, $b_color, white, $edge:none);
|
|
@extend %middle_button;
|
|
&:insensitive {
|
|
@include button(backdrop-insensitive, $edge:none);
|
|
@extend %middle_button;
|
|
}
|
|
}
|
|
&:insensitive {
|
|
@include button(insensitive, $edge:none);
|
|
@extend %middle_button;
|
|
}
|
|
}
|
|
}
|
|
&:first-child{ @extend %first_button; }
|
|
&:last-child { @extend %last_button; }
|
|
}
|
|
%middle_button {
|
|
border-left-style: solid;
|
|
border-right-style: none;
|
|
border-bottom-style: none;
|
|
}
|
|
%last_button {
|
|
border-bottom-right-radius: 7px;
|
|
}
|
|
%first_button {
|
|
border-left-style: none;
|
|
border-bottom-left-radius: 7px;
|
|
}
|
|
}
|
|
}
|
|
|
|
GtkFileChooserDialog {
|
|
.search-bar {
|
|
background-color: $base_color;
|
|
border-color: $bg_color;
|
|
box-shadow: none;
|
|
&:backdrop {
|
|
background-color: $backdrop_base_color;
|
|
border-color: $backdrop_bg_color;
|
|
}
|
|
}
|
|
.dialog-action-box {
|
|
border-top: 1px solid $borders_color;
|
|
&:backdrop { border-top-color: $backdrop_borders_color; }
|
|
}
|
|
}
|
|
|
|
/***********
|
|
* Sidebar *
|
|
***********/
|
|
|
|
.sidebar {
|
|
border: none;
|
|
background-color: $sidebar_bg_color;
|
|
|
|
&:backdrop {
|
|
background-color: $backdrop_sidebar_bg_color;
|
|
}
|
|
|
|
&:selected {
|
|
@extend %selected_items;
|
|
}
|
|
}
|
|
|
|
// Places sidebar is a special case, since the view here have to look like chrome not content, so we override text color
|
|
GtkPlacesSidebar.sidebar .view {
|
|
|
|
color: $fg_color;
|
|
background-color: transparent;
|
|
|
|
.separator,
|
|
.separator:backdrop { @extend .separator; }
|
|
|
|
.image { // icons color
|
|
color: mix($fg_color, $sidebar_bg_color, 70%);
|
|
|
|
&:selected {
|
|
color: mix($selected_fg_color, $selected_bg_color, 90%);
|
|
|
|
&:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 90%); }
|
|
}
|
|
|
|
&:backdrop { color: mix($backdrop_fg_color, $sidebar_bg_color, 70%); }
|
|
}
|
|
|
|
&:backdrop { color: $backdrop_fg_color; }
|
|
|
|
&:selected {
|
|
@extend %selected_items;
|
|
}
|
|
}
|
|
|
|
|
|
.sidebar-item {
|
|
padding: 10px 4px;
|
|
> .label {
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
}
|
|
&.needs-attention > .label {
|
|
@extend %needs_attention;
|
|
background-size: 6px 6px, 0 0;
|
|
}
|
|
}
|
|
|
|
|
|
/*********
|
|
* Paned *
|
|
*********/
|
|
|
|
GtkPaned { // this is for the standard paned separator
|
|
|
|
-GtkPaned-handle-size: 1; // sets separator width
|
|
|
|
-gtk-icon-source: none; // removes handle decoration
|
|
margin: 0 8px 8px 0; // drag area of the separator, not a real margin
|
|
&:dir(rtl) {
|
|
margin-right: 0;
|
|
margin-left: 8px;
|
|
}
|
|
.pane-separator {
|
|
background-color: $borders_color;
|
|
&:backdrop {
|
|
background-color: $backdrop_borders_color;
|
|
}
|
|
}
|
|
}
|
|
|
|
GtkPaned.wide { // this is for the paned with wide separator
|
|
-GtkPaned-handle-size: 5; // wider separator here
|
|
margin: 0; // no need of the invisible drag area so, reset margin
|
|
.pane-separator {
|
|
background-color: transparent;
|
|
border-style: none solid;
|
|
border-color: $borders_color;
|
|
border-width: 1px;
|
|
}
|
|
&.vertical .pane-separator { border-style: solid none;}
|
|
.pane-separator:backdrop { border-color: $backdrop_borders_color; }
|
|
}
|
|
|
|
|
|
/**************
|
|
* GtkInfoBar *
|
|
**************/
|
|
GtkInfoBar {
|
|
border-style: none;
|
|
}
|
|
|
|
.info,
|
|
.question,
|
|
.warning,
|
|
.error {
|
|
background-color: $selected_bg_color;
|
|
color: $selected_fg_color;
|
|
text-shadow: 0 1px darken($selected_bg_color, 10%);
|
|
border-color: darken($selected_bg_color, 10%);
|
|
.button {
|
|
// FIXME: extend selection mode buttons
|
|
@include button(normal, $selected_bg_color, $selected_fg_color, none);
|
|
&:hover {
|
|
@include button(hover, $selected_bg_color, $selected_fg_color, none); }
|
|
&:active {
|
|
@include button(active, $selected_bg_color, $selected_fg_color, none); }
|
|
&:insensitive {
|
|
@include button(insensitive,$selected_bg_color,$selected_fg_color,none); }
|
|
&:backdrop {
|
|
@include button(backdrop, $selected_bg_color, $selected_fg_color, none);
|
|
border-color: _border_color($selected_bg_color);
|
|
&:insensitive {
|
|
@include button(backdrop-insensitive, $selected_bg_color,
|
|
$selected_fg_color, none);
|
|
border-color: _border_color($selected_bg_color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/************
|
|
* Tooltips *
|
|
************/
|
|
|
|
.tooltip {
|
|
&.background {
|
|
// background-color needs to be set this way otherwise it gets drawn twice
|
|
// see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
|
|
background-color: transparentize(black, 0.2);
|
|
background-clip: padding-box;
|
|
border: 1px solid $tooltip_borders_color; // this suble border is meant to
|
|
// not make the tooltip melt with
|
|
// very dark backgrounds
|
|
}
|
|
|
|
color: white;
|
|
padding: 4px; /* not working */
|
|
border-radius: 5px;
|
|
box-shadow: none; // otherwise it gets inherited by windowframe.csd
|
|
text-shadow: 0 1px black;
|
|
// FIXME: we need a border or tooltips vanish on black background.
|
|
&.window-frame.csd {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.tooltip * { //Yeah this is ugly
|
|
padding: 4px;
|
|
background-color: transparent;
|
|
color: inherit; // just to be sure
|
|
}
|
|
|
|
/*****************
|
|
* Color Chooser *
|
|
*****************/
|
|
|
|
GtkColorSwatch {
|
|
// This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other one
|
|
// is GtkColorSwatch .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style
|
|
// is applied to the overlay box.
|
|
|
|
$_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
|
|
|
|
box-shadow: $_colorswatch_shadow;
|
|
|
|
// take care of colorswatches on selected elements
|
|
:selected & {
|
|
box-shadow: none;
|
|
&.overlay, &.overlay:hover {
|
|
border-color: $selected_fg_color;
|
|
}
|
|
}
|
|
|
|
// we need to re-set the shadow here since it get axed by the previous bit
|
|
&:selected { box-shadow: $_colorswatch_shadow; }
|
|
|
|
// border rounding
|
|
&.top {
|
|
border-top-left-radius: 5px;
|
|
border-top-right-radius: 5px;
|
|
}
|
|
&.bottom {
|
|
border-bottom-left-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
}
|
|
&.left, &:first-child, &:first-child .overlay {
|
|
border-top-left-radius: 5px;
|
|
border-bottom-left-radius: 5px;
|
|
}
|
|
&.right, &:last-child, &:last-child .overlay {
|
|
border-top-right-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
}
|
|
&:only-child, &:only-child .overlay {
|
|
border-radius: 5px;
|
|
}
|
|
// nth-child works just on the custom colors row
|
|
|
|
// hover effect
|
|
&:hover,
|
|
&:hover:selected {
|
|
background-image: linear-gradient(135deg, transparentize(white, 0.3),
|
|
transparentize(white, 1) 50%);
|
|
box-shadow: inset 0 1px transparentize(white, 0.6),
|
|
inset 0 -1px if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.6));
|
|
}
|
|
&:backdrop,
|
|
&:backdrop:selected {
|
|
background-image: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
// no hover effect for the colorswatch in the color editor
|
|
GtkColorEditor & {
|
|
border-radius: 3px; // same radius as the entry
|
|
&:hover {
|
|
background-image: none;
|
|
box-shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
|
|
}
|
|
&:backdrop { box-shadow: none; }
|
|
}
|
|
|
|
// indicator and keynav outline colors, color-dark is a color with luminosity lower then 50%
|
|
&.color-dark {
|
|
color: white;
|
|
outline-color: transparentize(black, 0.7);
|
|
&:backdrop { color: transparentize(white, 0.7); }
|
|
}
|
|
&.color-light {
|
|
color: black;
|
|
outline-color: transparentize(white, 0.5);
|
|
&:backdrop { color: transparentize(black, 0.7); }
|
|
}
|
|
|
|
// border color
|
|
&.overlay,
|
|
&.overlay:selected {
|
|
border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
|
|
&:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); }
|
|
}
|
|
|
|
// make the add color button looks like, well, a button
|
|
&#add-color-button {
|
|
border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi
|
|
border-width: 1px; // translucent on the colored background, here it's not necessary so they need to be set
|
|
@include button(normal);
|
|
&:hover { @include button(hover); }
|
|
&:backdrop { @include button(backdrop); }
|
|
.overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat
|
|
}
|
|
}
|
|
|
|
|
|
/********
|
|
* Misc *
|
|
********/
|
|
|
|
.scale-popup .button { // +/- buttons on GtkVolumeButton popup
|
|
padding: 6px;
|
|
&:hover {
|
|
@extend %undecorated_button;
|
|
background-color: transparentize($fg_color,0.9);
|
|
border-radius: 5px;
|
|
}
|
|
&:backdrop,
|
|
&:backdrop:hover,
|
|
&:backdrop:insensitive { @extend %undecorated_button; }
|
|
}
|
|
|
|
GtkVolumeButton.button { padding: 8px; }
|
|
|
|
/**********************
|
|
* Window Decorations *
|
|
*********************/
|
|
|
|
.window-frame {
|
|
border-radius: 7px 7px 0 0;
|
|
// lamefun trick to get rounded borders regardless of CSD use
|
|
border-width: 0px;
|
|
|
|
// this needs to be transparent
|
|
// see bug #722563
|
|
$_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
|
|
$_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 0.1));
|
|
|
|
box-shadow: 0 3px 9px 1px transparentize(black, 0.5),
|
|
0 0 0 1px $_wm_border; //doing borders with box-shadow
|
|
|
|
// FIXME rationalize window-frame shadows
|
|
|
|
/* this is used for the resize cursor area */
|
|
margin: 10px;
|
|
|
|
&:backdrop {
|
|
box-shadow: 0 2px 6px 2px transparentize(black, 0.8),
|
|
0 0 0 1px $_wm_border_backdrop;
|
|
}
|
|
&.tiled {
|
|
border-radius: 0;
|
|
}
|
|
&.popup {
|
|
box-shadow: none;
|
|
}
|
|
&.csd {
|
|
.popup {
|
|
border-radius: 0;
|
|
box-shadow: 0 1px 2px transparentize(black, 0.8),
|
|
0 0 0 1px transparentize($_wm_border,0.1);
|
|
}
|
|
&.tooltip {
|
|
border-radius: 5px;
|
|
box-shadow: none;
|
|
}
|
|
&.message-dialog {
|
|
border-radius: 7px;
|
|
box-shadow: 0 1px 2px transparentize(black, 0.8),
|
|
0 0 0 1px transparentize($_wm_border,0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Window Close button
|
|
.header-bar .button.titlebutton,
|
|
.titlebar .button.titlebutton {
|
|
@extend .button;
|
|
@extend .button.flat;
|
|
@extend .image-button;
|
|
@include _button_text_shadow;
|
|
&:backdrop { icon-shadow: none; }
|
|
}
|
|
|
|
.header-bar.selection-mode .button.titlebutton,
|
|
.titlebar.selection-mode .button.titlebutton {
|
|
@include _button_text_shadow(white, $selected_bg_color);
|
|
&:backdrop { icon-shadow: none; }
|
|
}
|
|
|
|
|
|
// catch all extend :)
|
|
|
|
%selected_items {
|
|
background-color: $selected_bg_color;
|
|
color: $selected_fg_color;
|
|
@if $variant == 'light' {
|
|
outline-color: transparentize($selected_fg_color, 0.7);
|
|
}
|
|
&:backdrop { color: $backdrop_selected_fg_color; }
|
|
}
|
|
|
|
/* Decouple the font of context menus from their entry/textview */
|
|
.touch-selection,
|
|
.context-menu {
|
|
font: initial;
|
|
}
|
|
|
|
.monospace {
|
|
font: Monospace;
|
|
}
|