forked from AuroraMiddleware/gtk
0ff5cf7daf
The padding there previously made the pathbar 1px taller then buttons, not good in general and specifically not good for Nautilus.
2740 lines
78 KiB
SCSS
2740 lines
78 KiB
SCSS
@function gtkalpha($c,$a) {
|
|
@return unquote("alpha(#{$c},#{$a})");
|
|
}
|
|
|
|
* {
|
|
padding: 0;
|
|
-GtkToolButton-icon-spacing: 4;
|
|
-GtkTextView-error-underline-color: $error_color;
|
|
-GtkPaned-handle-size: 1;
|
|
|
|
-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_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: $bg_color;
|
|
}
|
|
|
|
.background:backdrop {
|
|
text-shadow: none;
|
|
icon-shadow: none;
|
|
|
|
color: lighten($fg_color,10%);
|
|
background-color: $backdrop_bg_color;
|
|
}
|
|
|
|
/*
|
|
These wildcard seems unavoidable, need to investigate.
|
|
Wildcards are bad and troublesome, use them with care,
|
|
or better, just don't.
|
|
Everytime a wildcard is used a kitten dies, painfully.
|
|
*/
|
|
|
|
|
|
|
|
*: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: $fg_color;
|
|
background-color: $base_color;
|
|
&:backdrop {
|
|
color: $backdrop_fg_color;
|
|
background-color: $backdrop_base_color;
|
|
}
|
|
&:selected,
|
|
&:selected:focus,
|
|
&:selected:hover {
|
|
@extend %selected_items;
|
|
}
|
|
}
|
|
|
|
.rubberband {
|
|
border: 1px solid $selected_bg_color;
|
|
background-color: transparentize($selected_bg_color,0.8);
|
|
}
|
|
|
|
/* This is used by GtkScrolledWindow, when rendering the edge
|
|
* gradient shown when content is touch-dragged past boundaries.
|
|
* The color is used as a base for such gradient, which is then
|
|
* stretched/modified as a direct result of user interaction.
|
|
*/
|
|
.overshoot {
|
|
background-color: transparentize($selected_bg_color,0.8);
|
|
}
|
|
|
|
GtkLabel {
|
|
&.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 GtkLabel {
|
|
padding: 6px 12px;
|
|
}
|
|
.sidebar GtkLabel.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%); }
|
|
}
|
|
|
|
GtkFlowBox .grid-child {
|
|
padding: 3px;
|
|
border-radius: 3px;
|
|
&:selected {
|
|
@extend %selected_items;
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
|
|
%osd, .osd {
|
|
color: $osd_fg_color;
|
|
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;
|
|
@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, &:backdrop:selected {
|
|
background-color: $selected_bg_color;
|
|
color: $selected_fg_color;
|
|
}
|
|
&: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
|
|
&:first-child {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
&:dir(rtl) { border-right-style: none;}
|
|
}
|
|
&:last-child {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
border-left-style: none;
|
|
&:dir(rtl) { border-left-style: solid; }
|
|
}
|
|
}
|
|
&.error {
|
|
color: $error_color;
|
|
border-color: $error_color;
|
|
&:focus { @include entry(focus, $error_color); }
|
|
&:selected, &:selected:focus {
|
|
background-color: $error_color;
|
|
}
|
|
@if $variant == 'dark' {
|
|
&:selected:focus { color: $base_color; }
|
|
&:selected:backdrop { color: $backdrop_base_color; }
|
|
}
|
|
}
|
|
&.warning {
|
|
color: $warning_color;
|
|
border-color: $warning_color;
|
|
&:focus { @include entry(focus, $warning_color); }
|
|
&:selected, &:selected:focus {
|
|
background-color: $warning_color;
|
|
}
|
|
@if $variant == 'dark' {
|
|
&:selected:focus { color: $base_color; }
|
|
&:selected:backdrop { color: $backdrop_base_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%); }
|
|
}
|
|
}
|
|
|
|
/***********
|
|
* 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 {
|
|
border: 1px solid;
|
|
border-radius: 3px;
|
|
transition: all 200ms ease-out;
|
|
padding: 5px 8px 6px;
|
|
@include button(normal);
|
|
&:hover, &.flat:hover {
|
|
@include button(hover);
|
|
-gtk-image-effect: highlight;
|
|
}
|
|
&:active, &.flat:active,
|
|
&:checked, &.flat:checked {
|
|
@include button(active);
|
|
transition-duration: 50ms;
|
|
}
|
|
&: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);
|
|
}
|
|
}
|
|
&:insensitive {
|
|
@include button(insensitive);
|
|
&:active, &.flat:active,
|
|
&:checked, &.flat:checked {
|
|
@include button(insensitive-active);
|
|
}
|
|
}
|
|
&.flat, &.flat:backdrop, &.flat:backdrop:insensitive {
|
|
@extend %undecorated_button;
|
|
}
|
|
// big standalone buttons like in Documents pager
|
|
&.osd {
|
|
&.image-button { padding: 13px; }
|
|
color: $osd_fg_color;
|
|
border-radius: 6px;
|
|
outline-color: transparentize($osd_fg_color, 0.8);
|
|
@include button(osd);
|
|
border-color: $osd_outer_borders_color;
|
|
box-shadow: none;
|
|
&:hover {
|
|
@include button(osd-hover);
|
|
border-color: $osd_outer_borders_color;
|
|
box-shadow: none;
|
|
}
|
|
&:active, &:checked {
|
|
@include button(osd-active);
|
|
border-color: $osd_outer_borders_color;
|
|
box-shadow: none
|
|
}
|
|
&:insensitive, &:backdrop:insensitive {
|
|
@include button(osd-insensitive);
|
|
border-color: $osd_outer_borders_color;
|
|
// FIXME: if this state actually exists we should probably make the button
|
|
// disappear
|
|
}
|
|
&:backdrop {
|
|
@include button(osd-backdrop);
|
|
border-color: $osd_outer_borders_color;
|
|
}
|
|
}
|
|
//overlay / OSD style
|
|
.osd & {
|
|
// FIXME: for some reason I can't figure out the bookmark button in gnome documents
|
|
// gets borders radius 0, when they get backdrop and another state
|
|
color: $osd_fg_color;
|
|
outline-color: transparentize($osd_fg_color, 0.8);
|
|
@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;
|
|
}
|
|
}
|
|
// 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);
|
|
outline-color: transparentize($selected_fg_color, 0.7);
|
|
&:hover {
|
|
@include button(hover,$b_color, white);
|
|
}
|
|
&:active, &:checked {
|
|
@include button(active,$b_color, white);
|
|
}
|
|
&:backdrop {
|
|
@include button(backdrop,$b_color,white);
|
|
&:insensitive {
|
|
@include button(backdrop-insensitive);
|
|
}
|
|
}
|
|
&:insensitive {
|
|
@include button(insensitive);
|
|
}
|
|
.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,
|
|
&.image-button { padding: 8px; }
|
|
|
|
&.text-button {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
// stack switcher buttons
|
|
.action-bar .stack-switcher &.image-button,
|
|
.header-bar .stack-switcher &.image-button {
|
|
// override the padding since we need to add some padding on the
|
|
// GtkImage itself to fit the circle
|
|
padding: 5px 2px;
|
|
}
|
|
.action-bar .stack-switcher &.text-button,
|
|
.header-bar .stack-switcher &.text-button {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
padding-top: 5px; // I need these to not get overridden by radio
|
|
padding-bottom: 6px; // button style
|
|
outline-offset: -3px; //
|
|
|
|
}
|
|
.stack-switcher > & {
|
|
padding-left: 2px; // subtract the padding which will be added to the
|
|
padding-right: 2px; // GtkLabel
|
|
> GtkLabel {
|
|
padding-left: 6px; // label padding
|
|
padding-right: 6px; //
|
|
}
|
|
> GtkImage {
|
|
padding: 3px 6px; // image padding
|
|
}
|
|
&.needs-attention > GtkLabel,
|
|
&.needs-attention > GtkImage {
|
|
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; }
|
|
}
|
|
}
|
|
&.needs-attention:active > GtkLabel,
|
|
&.needs-attention:active > GtkImage,
|
|
&.needs-attention:checked > GtkLabel,
|
|
&.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 added shadows
|
|
// .separator {
|
|
// -GtkWidget-wide-separators: true;
|
|
// -GtkWidget-horizontal-separator: 0;
|
|
// }
|
|
.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; }
|
|
}
|
|
|
|
// 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, $edge:none); // the box-shadow outset doesn't work
|
|
// in this case, hence $edge: none
|
|
&:hover { @include button(hover, $edge:none); }
|
|
&:active { @include button(active, $edge:none); }
|
|
&:checked{ @include button(active, $edge:none); }
|
|
&:insensitive { @include button(insensitive, $edge:none); }
|
|
&:insensitive:active { @include button(insensitive-active, $edge:none); }
|
|
&:insensitive:checked { @include button(insensitive-active, $edge:none); }
|
|
&:backdrop { @include button(backdrop, $edge:none); };
|
|
&:backdrop:active { @include button(backdrop-active, $edge:none); }
|
|
&:backdrop:checked { @include button(backdrop-active, $edge:none); }
|
|
&:backdrop:insensitive { @include button(backdrop-insensitive, $edge:none); }
|
|
&:backdrop:insensitive:active {
|
|
@include button(backdrop-insensitive-active, $edge:none); }
|
|
&:backdrop:insensitive:checked {
|
|
@include button(backdrop-insensitive-active, $edge:none); }
|
|
}
|
|
.inline-toolbar.toolbar GtkToolButton,
|
|
.inline-toolbar.toolbar GtkToolButton:backdrop { // .inline-toolbar.toolbar here for
|
|
// higher specificity than the
|
|
// previous "button look" selector
|
|
& > .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{
|
|
border-left-style: solid;
|
|
border-top-style: none;
|
|
&: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: 4px; // Uniform padding on the GtkColorButton
|
|
GtkColorSwatch {
|
|
border-radius: 1.5px;
|
|
box-shadow: inset 0 1px 1px transparentize(black, 0.8),
|
|
_widget_edge();
|
|
&:backdrop { box-shadow: none; }
|
|
}
|
|
}
|
|
|
|
/*********
|
|
* Links *
|
|
*********/
|
|
|
|
*:link {
|
|
color: $selected_bg_color; //FIXME use a proper color
|
|
&:hover, &:active, &:visited {
|
|
color: mix($fg_color, $selected_bg_color, 40%); //FIXME same here
|
|
*:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
|
|
}
|
|
&:backdrop, &:backdrop:hover, &:backdrop:hover:selected {
|
|
color: $selected_bg_color;
|
|
}
|
|
&:selected, *:selected & { color: $selected_fg_color; }
|
|
}
|
|
|
|
.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,95%);
|
|
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 {
|
|
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; }
|
|
}
|
|
}
|
|
&.vertical, &.vertical:dir(rtl) {
|
|
.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;
|
|
}
|
|
|
|
/************
|
|
* Toolbars *
|
|
************/
|
|
.toolbar {
|
|
-GtkWidget-window-dragging: true;
|
|
padding: 4px;
|
|
background-color: $bg_color;
|
|
.osd &, &.osd {
|
|
padding: 13px;
|
|
border: $osd_outer_borders_color;
|
|
border-radius: 6px;
|
|
background-color: transparentize($osd_bg_color, 0.3);
|
|
background-clip: padding-box;
|
|
}
|
|
}
|
|
|
|
//searchbar, location-bar & inline-toolbar
|
|
.inline-toolbar {
|
|
@extend .toolbar;
|
|
@extend %inset-bar;
|
|
border-width: 0 1px 1px;
|
|
padding: 3px;
|
|
border-radius: 0 0 4px 4px;
|
|
}
|
|
.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 {
|
|
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 mix($top_hilight,$selected_bg_color, 60%);
|
|
&: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, none);
|
|
&:hover { @include button(hover, $selected_bg_color, $selected_fg_color,
|
|
none); }
|
|
&:active,
|
|
&:checked { @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: $selected_borders_color;
|
|
}
|
|
&:backdrop:insensitive {
|
|
@include button(backdrop-insensitive, $selected_bg_color,
|
|
$selected_fg_color, none);
|
|
}
|
|
&.suggested-action {
|
|
@include button(normal, $edge:none);
|
|
border-color: $selected_borders_color;
|
|
&:hover {
|
|
@include button(hover, $edge:none);
|
|
border-color: $selected_borders_color;
|
|
}
|
|
&:active {
|
|
@include button(active, $edge:none);
|
|
border-color: $selected_borders_color;
|
|
}
|
|
&:insensitive {
|
|
@include button(insensitive, $edge:none);
|
|
border-color: $selected_borders_color;
|
|
}
|
|
&:backdrop {
|
|
@include button(backdrop, $edge:none);
|
|
border-color: $selected_borders_color;
|
|
}
|
|
&:backdrop:insensitive {
|
|
@include button(backdrop-insensitive, $edge:none);
|
|
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
|
|
}
|
|
}
|
|
|
|
/************
|
|
* 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
|
|
.path-bar .button GtkLabel:last-child { padding-left: 2px; }
|
|
.path-bar .button GtkLabel:first-child { padding-right: 2px; }
|
|
.path-bar .button GtkLabel:only-child { padding-right: 0; padding-left: 0; }
|
|
|
|
|
|
|
|
/**************
|
|
* Tree Views *
|
|
**************/
|
|
GtkTreeView.view { // treeview grid lines and expanders, unfortunatelly
|
|
// the tree lines color can't be set
|
|
-GtkTreeView-grid-line-width: 1;
|
|
-GtkTreeView-grid-line-pattern: '';
|
|
-GtkTreeView-tree-line-width: 1;
|
|
-GtkTreeView-tree-line-pattern: '';
|
|
-GtkTreeView-expander-size: 16;
|
|
border-color: $bg_color; // this is actually the line color
|
|
// :selected is ignored hence no style for it
|
|
&:backdrop {
|
|
border-color: $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_base_color, $selected_bg_color, 70%); }
|
|
}
|
|
&:checked {
|
|
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
|
}
|
|
&:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); }
|
|
}
|
|
}
|
|
|
|
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 { //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;
|
|
}
|
|
}
|
|
}
|
|
GtkTreeView.view.progressbar { //Progressbar in treeview cells
|
|
@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;
|
|
}
|
|
}
|
|
|
|
/*********
|
|
* 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: if($variant == 'light', $selected_bg_color,
|
|
lighten($selected_bg_color,15%));
|
|
}
|
|
&:insensitive {
|
|
color: $insensitive_fg_color;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu {
|
|
margin: 4px;
|
|
padding: 0px;
|
|
background-color: $base_color;
|
|
.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'); }
|
|
}
|
|
}
|
|
|
|
.menuitem .accelerator { color: gtkalpha(currentColor,0.55); }
|
|
|
|
|
|
/***************
|
|
* Popovers *
|
|
***************/
|
|
|
|
.popover {
|
|
margin: 10px;
|
|
padding: 2px;
|
|
border: 1px solid $borders-color;
|
|
border-radius: 5px;
|
|
//background-clip: border-box;
|
|
background-color: $bg_color;
|
|
|
|
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 { // Also used for touch cut'n'paste overlays
|
|
// FIXME Doesn't work
|
|
background-image: none;
|
|
background-color: $osd_bg_color;
|
|
border: 1px solid $borders_color;
|
|
color: $osd_fg_color;
|
|
.button {
|
|
color: white;
|
|
text-shadow: none;
|
|
@include button(osd);
|
|
&:hover { @include button(osd-hover); };
|
|
&:active { @include button(osd-active); };
|
|
&:insensitive { @include button(osd-insensitive); };
|
|
}
|
|
}
|
|
}
|
|
|
|
//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;
|
|
&: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;
|
|
}
|
|
}
|
|
}
|
|
GtkLabel { //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 GtkLabel, GtkLabel.prelight-page {
|
|
// prelight tab text
|
|
color: mix($fg_color, $insensitive_fg_color, 50%);
|
|
&:backdrop { // FIXME, it's the same as GtkLabel:backdrop up here
|
|
color: mix($backdrop_fg_color, $backdrop_insensitive_color, 50%);
|
|
}
|
|
}
|
|
.active-page GtkLabel, GtkLabel.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 {
|
|
background-clip: padding-box;
|
|
background-image: none;
|
|
border-style: solid;
|
|
-GtkRange-trough-border: 0;
|
|
-GtkScrollbar-has-backward-stepper: false;
|
|
-GtkScrollbar-has-forward-stepper: false;
|
|
-GtkRange-slider-width: 13;
|
|
-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 { @extend .scrollbars-junction; }
|
|
&.slider {
|
|
border-radius: 20px;
|
|
border: 3px solid transparent; //margin :/
|
|
background-color: mix($bg_color, $fg_color, 70%);
|
|
&:hover {
|
|
background-color: mix($bg_color, $fg_color, 50%);
|
|
}
|
|
&:prelight:active {
|
|
background-color: $selected_bg_color;
|
|
}
|
|
&.fine-tune {
|
|
border-width: 5px;
|
|
&:prelight:active {
|
|
background-color: $selected_bg_color;
|
|
}
|
|
}
|
|
&:backdrop, &:insensitive {
|
|
background-color: mix($bg_color, $fg_color, 90%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.scrollbars-junction { // the small square between two scrollbars
|
|
border-color: transparent;
|
|
background-color: darken($bg_color, 5%);
|
|
&:backdrop { background-color: transparent; }
|
|
}
|
|
|
|
|
|
/**********
|
|
* 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;
|
|
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);
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
.list-row:selected & {
|
|
box-shadow: 0 0 0 1px $selected_fg_color;
|
|
&:backdrop { box-shadow: 0 0 0 1px $backdrop_base_color; }
|
|
}
|
|
&.slider,
|
|
.list-row:selected &.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*************************
|
|
* 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.
|
|
GtkTreeView.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
|
|
GtkTreeView.view.check, GtkTreeView.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') {
|
|
GtkIconView.view.check#{$s},
|
|
GtkFlowBox.view.check#{$s} {
|
|
icon-shadow: none;
|
|
-gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}.png"),
|
|
url("assets/checkbox#{$as}@2.png"));
|
|
}
|
|
}
|
|
|
|
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 {
|
|
-GtkScale-slider-length: 20;
|
|
-GtkRange-slider-width: 20;
|
|
-GtkRange-trough-border: 2;
|
|
outline-offset: -9px;
|
|
outline-radius: 4px;
|
|
margin: 10px;
|
|
&.fine-tune {
|
|
margin: 8px;
|
|
outline-offset: -7px;
|
|
outline-radius: 6px;
|
|
&.trough { 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: $osd_bg_color;
|
|
&:hover { @include button(osd-hover); }
|
|
&:active { @include button(osd-active); }
|
|
&:backdrop { @include button(osd-backdrop); }
|
|
}
|
|
}
|
|
&.trough {
|
|
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);
|
|
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 {
|
|
margin: 14px 10px 10px;
|
|
&.fine-tune { margin: 12px 8px 8px; }
|
|
}
|
|
%scale_marks_below_horz {
|
|
margin: 10px 10px 14px;
|
|
&.fine-tune { margin: 8px 8px 12px; }
|
|
}
|
|
%scale_marks_above_vert {
|
|
margin: 10px 10px 10px 14px;
|
|
&.fine-tune { margin: 8px 8px 8px 12px; }
|
|
}
|
|
%scale_marks_below_vert {
|
|
margin: 10px 14px 10px 10px;
|
|
&.fine-tune { 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;
|
|
}
|
|
}
|
|
|
|
// 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 {
|
|
border-style: none;
|
|
border-radius: 0;
|
|
-GtkProgressBar-xspacing: 0;
|
|
-GtkProgressBar-yspacing: 2px;
|
|
-GtkProgressBar-min-horizontal-bar-height: 2px; //FIXME still too tall
|
|
}
|
|
}
|
|
|
|
// background
|
|
GtkProgressBar.trough {
|
|
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;
|
|
//FIXME: there is a margin on top
|
|
}
|
|
}
|
|
|
|
/*************
|
|
* Level Bar *
|
|
*************/
|
|
|
|
GtkLevelBar {
|
|
-GtkLevelBar-min-block-width: 34;
|
|
-GtkLevelBar-min-block-height: 3;
|
|
box-shadow: _widget_edge(); // needs to be set here to avoid clipping
|
|
}
|
|
|
|
GtkLevelBar.vertical {
|
|
-GtkLevelBar-min-block-width: 3;
|
|
-GtkLevelBar-min-block-height: 34;
|
|
}
|
|
|
|
.level-bar {
|
|
&.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 {
|
|
.frame { border-radius: 2px; }
|
|
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(black, $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(black, $selected_bg_color, 10%);
|
|
}
|
|
}
|
|
&: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; }
|
|
&:hover, &.flat:hover {
|
|
@include button(hover, $edge:none);
|
|
@if $variant == 'light' { border-color: $selected_borders_color; }
|
|
}
|
|
&:active, &.flat:active,
|
|
&:checked, &.flat:checked {
|
|
@include button(active, $edge:none);
|
|
@if $variant == 'light' { border-color: $selected_borders_color; }
|
|
}
|
|
&: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; }
|
|
}
|
|
&:insensitive:active {
|
|
@include button(backdrop-insensitive-active, $edge:none);
|
|
@if $variant == 'light' { border-color: $selected_borders_color; }
|
|
}
|
|
}
|
|
&:insensitive {
|
|
@include button(insensitive, $edge:none);
|
|
@if $variant == 'light' { border-color: $selected_borders_color; }
|
|
}
|
|
&.flat, &.flat:backdrop, &.flat:backdrop:insensitive {
|
|
@extend %undecorated_button;
|
|
}
|
|
//FIXME: make placeholder with buttons w/o edge to be extended around
|
|
// istead of repeating everytime this stuff.
|
|
}
|
|
}
|
|
|
|
/*.list-row.button:selected,
|
|
.list-row:selected {
|
|
background-color: $selected_bg_color;
|
|
color: $selected_fg_color;
|
|
&:backdrop { color: $backdrop_base_color;}
|
|
}*/
|
|
|
|
/*********************
|
|
* App Notifications *
|
|
*********************/
|
|
|
|
.app-notification {
|
|
@extend %osd;
|
|
border-width: 0 1px 1px;
|
|
border-style: solid;
|
|
border-color: $osd_outer_borders_color;
|
|
border-radius: 0 0 6px 6px;
|
|
background-color: transparentize($osd_bg_color, 0.3);
|
|
background-image: linear-gradient(to bottom, transparentize(black, 0.8),
|
|
transparent 2px);
|
|
background-clip: padding-box;
|
|
padding: 0 4px;
|
|
&:backdrop { background-image: none; }
|
|
.button {
|
|
border: 1px solid;
|
|
color: $osd_fg_color;
|
|
outline-color: transparentize($osd_fg_color, 0.8);
|
|
@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 *
|
|
*************/
|
|
|
|
GtkExpander {
|
|
-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 {
|
|
border: 1px solid $borders_color;
|
|
&:selected {
|
|
background-color: $selected_bg_color;
|
|
color: $selected_fg_color;
|
|
border-radius: 3px;
|
|
&:backdrop {
|
|
color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color);
|
|
}
|
|
}
|
|
&.header {
|
|
@extend .titlebar;
|
|
box-shadow: inset 0 -1px mix($borders_color, $bg_color, 30%),
|
|
inset 0px 1px $top_hilight,
|
|
0 1px 2px transparentize(black,0.9);
|
|
border: 1px solid $borders_color;
|
|
border-radius: 0;
|
|
&:backdrop { box-shadow: none; }
|
|
}
|
|
&.button {
|
|
@extend %undecorated_button;
|
|
color: transparentize($fg-color,0.55);
|
|
&:hover {
|
|
@extend %undecorated_button;
|
|
color: $fg_color;
|
|
}
|
|
&:backdrop { color: transparentize($backdrop_fg_color,0.55); }
|
|
}
|
|
&.highlight { color: gtkalpha(currentColor,0.55); }
|
|
&:backdrop { 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,
|
|
.sidebar .view {
|
|
border: none;
|
|
$_sidebar_bg: lighten($bg_color,5%);
|
|
background-color: $_sidebar_bg;
|
|
.scrollbar {
|
|
&.trough {
|
|
background-color: darken($bg_color,10%);
|
|
border-radius: 6px;
|
|
border-width: 2px;
|
|
border-color: transparent;
|
|
}
|
|
&.slider {
|
|
background-color: $_sidebar_bg;
|
|
&:hover { background-color: lighten($bg_color, 10%); }
|
|
}
|
|
}
|
|
&:backdrop {
|
|
background-color: lighten($backdrop_bg_color,5%);
|
|
}
|
|
&:selected {
|
|
background-color: $selected_bg_color;
|
|
}
|
|
.separator:backdrop { @extend .separator; } // overriden w/o this
|
|
}
|
|
|
|
GtkPaned {
|
|
// This is actually the invisible area of the paned separator, not a margin...
|
|
margin: 0 8px 8px 0; //drag area of the separator
|
|
&:dir(rtl) {
|
|
margin-right: 0;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
|
|
.pane-separator {
|
|
//FIXME abusing a background-image to get rid of the handle decoration
|
|
//I'd like something better...
|
|
background-image: linear-gradient(to bottom, $borders_color);
|
|
&:backdrop {
|
|
background-image: linear-gradient(to bottom, $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 {
|
|
@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 {
|
|
color: white;
|
|
padding: 4px; /* not working */
|
|
border-radius: 5px;
|
|
background-color: transparentize(black,0.2); //FIXME proper color
|
|
text-shadow: 0 1px black;
|
|
}
|
|
|
|
.tooltip * { //Yeah this is ugly
|
|
padding: 4px;
|
|
background-color: transparent;
|
|
color: inherit; // just to be sure
|
|
}
|
|
|
|
/*****************
|
|
* Color Chooser *
|
|
*****************/
|
|
|
|
GtkColorSwatch {
|
|
border: 1px solid;
|
|
@if $variant == light {
|
|
border-color: transparentize(black,0.7);
|
|
box-shadow: inset 0 1px 1px transparentize(black, 0.8);
|
|
}
|
|
@else {
|
|
border-color: $borders_color;
|
|
box-shadow: inset 0 1px 1px transparentize(black, 0.6);
|
|
}
|
|
|
|
&.color-light {
|
|
&:hover {
|
|
background-image: linear-gradient(to bottom,
|
|
transparentize(white, 1) 40%,
|
|
transparentize(white, 0.6));
|
|
&:backdrop { background-image: none; }
|
|
}
|
|
}
|
|
&.color-dark {
|
|
&:hover {
|
|
background-image: linear-gradient(to bottom,
|
|
transparentize(white, 1) 40%,
|
|
transparentize(white, 0.8));
|
|
&:backdrop { background-image: none; }
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
border-color: if($variant=='light', transparentize(black, 0.5),
|
|
$backdrop_borders_color);
|
|
}
|
|
|
|
&:backdrop {
|
|
border-color: if($variant=='light', transparentize(black,0.8),
|
|
$backdrop_borders_color);
|
|
box-shadow: none;
|
|
}
|
|
|
|
&.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 {
|
|
border-top-left-radius: 5px;
|
|
border-bottom-left-radius: 5px;
|
|
}
|
|
&.right, &:last-child {
|
|
border-top-right-radius: 5px;
|
|
border-bottom-right-radius: 5px;
|
|
}
|
|
&:only-child {
|
|
border-radius: 5px;
|
|
}
|
|
&.color-active-badge {
|
|
border-width: 2px;
|
|
&:hover { background-image: none; }
|
|
&.color-light, &.color-light:hover {
|
|
color: transparentize(black,0.7);
|
|
border-color: transparentize(black,0.7);
|
|
}
|
|
&.color-dark, &.color-dark:hover {
|
|
color: transparentize(white,0.5);
|
|
border-color: transparentize(white,0.5);
|
|
}
|
|
}
|
|
}
|
|
GtkColorChooserWidget #add-color-button {
|
|
border-color: mix($borders_color,$bg_color,50%);
|
|
background-color: mix($borders_color,$bg_color,50%);
|
|
color: $bg_color;
|
|
box-shadow: none;
|
|
&:hover {
|
|
border-color: $borders_color;
|
|
background-color: $borders_color;
|
|
}
|
|
&:backdrop {
|
|
border-color: mix($backdrop_borders_color,$backdrop_bg_color,50%);
|
|
background-color: mix($backdrop_borders_color,$backdrop_bg_color,50%);
|
|
}
|
|
}
|
|
|
|
|
|
/********
|
|
* Misc *
|
|
********/
|
|
|
|
.scale-popup .button { // +/- buttons on GtkVolumeButton popup
|
|
padding: 6px;
|
|
&:hover {
|
|
@extend %undecorated_button;
|
|
background-color: transparentize($fg_color,0.9);
|
|
border-radius: 4px;
|
|
}
|
|
&: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
|
|
|
|
/* 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;
|
|
}
|
|
&.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.flat;
|
|
@extend .image-button;
|
|
}
|
|
|
|
|
|
// 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 {
|
|
@if $variant == 'light' { color: $backdrop_base_color; }
|
|
@else { color: $backdrop_fg_color; };
|
|
}
|
|
}
|
|
|