Various tweaks
Satyajit Sahoo
parent
bf32925cb7
commit
7f0f008de0
|
|
@ -80,7 +80,7 @@
|
|||
@include toolbar($selected_bg_color, $selected_fg_color);
|
||||
|
||||
.button {
|
||||
@include button(shade($selected_bg_color, 1.68), shade($selected_bg_color, 0.8));
|
||||
@include button($selected_bg_color, $selected_fg_color);
|
||||
|
||||
&.suggested-action { @extend .suggested-action.button; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,19 +3,19 @@
|
|||
***************/
|
||||
|
||||
* {
|
||||
-GtkArrow-arrow-scaling: 0.5;
|
||||
-GtkExpander-expander-size: 8;
|
||||
-GtkStatusbar-shadow-type: none;
|
||||
-GtkToolItemGroup-expander-size: 8;
|
||||
-GtkWindow-resize-grip-height: 0;
|
||||
-GtkWindow-resize-grip-width: 0;
|
||||
-WnckTasklist-fade-overlay-rect: 0;
|
||||
-GtkArrow-arrow-scaling: 0.5;
|
||||
-GtkExpander-expander-size: 8;
|
||||
-GtkStatusbar-shadow-type: none;
|
||||
-GtkToolItemGroup-expander-size: 8;
|
||||
-GtkWindow-resize-grip-height: 0;
|
||||
-GtkWindow-resize-grip-width: 0;
|
||||
-WnckTasklist-fade-overlay-rect: 0;
|
||||
|
||||
outline-color: alpha($selected_bg_color, 0.5);
|
||||
outline-style: dashed;
|
||||
outline-width: 1px;
|
||||
outline-offset: -1px;
|
||||
outline-radius: $roundness;
|
||||
outline-color: alpha($selected_bg_color, 0.5);
|
||||
outline-style: dashed;
|
||||
outline-width: 1px;
|
||||
outline-offset: -1px;
|
||||
outline-radius: $roundness;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -24,77 +24,77 @@
|
|||
*************/
|
||||
|
||||
%selected {
|
||||
&, &:focus {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
&, &:focus {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
&:selected { @extend %selected; }
|
||||
&:selected { @extend %selected; }
|
||||
|
||||
&:insensitive,
|
||||
&:insensitive:insensitive { color: mix($fg_color, $bg_color, 0.50); }
|
||||
&:insensitive,
|
||||
&:insensitive:insensitive { color: mix($fg_color, $bg_color, 0.50); }
|
||||
|
||||
&:insensitive { -gtk-image-effect: dim; }
|
||||
&:insensitive { -gtk-image-effect: dim; }
|
||||
|
||||
&:hover { -gtk-image-effect: highlight; }
|
||||
&:hover { -gtk-image-effect: highlight; }
|
||||
|
||||
/* hyperlinks */
|
||||
-GtkHTML-link-color: $link_color;
|
||||
-GtkIMHtml-hyperlink-color: $link_color;
|
||||
-GtkWidget-link-color: $link_color;
|
||||
-GtkWidget-visited-link-color: $link_color;
|
||||
/* hyperlinks */
|
||||
-GtkHTML-link-color: $link_color;
|
||||
-GtkIMHtml-hyperlink-color: $link_color;
|
||||
-GtkWidget-link-color: $link_color;
|
||||
-GtkWidget-visited-link-color: $link_color;
|
||||
|
||||
&:link, &:visited { color: $link_color; }
|
||||
&:link, &:visited { color: $link_color; }
|
||||
}
|
||||
|
||||
.background {
|
||||
background-color: $bg_color;
|
||||
color: $fg_color;
|
||||
background-color: $bg_color;
|
||||
color: $fg_color;
|
||||
|
||||
&:backdrop {
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
}
|
||||
&:backdrop {
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
}
|
||||
|
||||
&.csd { background-color: $bg_color; }
|
||||
&.csd { background-color: $bg_color; }
|
||||
}
|
||||
|
||||
.gtkstyle-fallback {
|
||||
background-color: alpha($bg_color, .5);
|
||||
color: $fg_color;
|
||||
background-color: alpha($bg_color, .5);
|
||||
color: $fg_color;
|
||||
|
||||
&:prelight {
|
||||
background-color: shade($bg_color, 1.1);
|
||||
color: $fg_color;
|
||||
}
|
||||
&:prelight {
|
||||
background-color: shade($bg_color, 1.1);
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: shade($bg_color, 0.9);
|
||||
color: $fg_color;
|
||||
}
|
||||
&:active {
|
||||
background-color: shade($bg_color, 0.9);
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
&:insensitive {
|
||||
background-color: shade(shade($bg_color, 0.95), 1.05);
|
||||
color: mix($fg_color, $bg_color, 0.50);
|
||||
}
|
||||
&:insensitive {
|
||||
background-color: shade(shade($bg_color, 0.95), 1.05);
|
||||
color: mix($fg_color, $bg_color, 0.50);
|
||||
}
|
||||
|
||||
&:selected { @extend %selected; }
|
||||
&:selected { @extend %selected; }
|
||||
}
|
||||
|
||||
GtkImage, GtkLabel, GtkBox, GtkGrid {
|
||||
&, &:insensitive { background-color: transparent; }
|
||||
&, &:insensitive { background-color: transparent; }
|
||||
}
|
||||
|
||||
GtkLabel {
|
||||
&.separator {
|
||||
color: $fg_color;
|
||||
&.separator {
|
||||
color: $fg_color;
|
||||
|
||||
@extend .dim-label;
|
||||
}
|
||||
@extend .dim-label;
|
||||
}
|
||||
|
||||
&:selected { @extend %selected; }
|
||||
&:selected { @extend %selected; }
|
||||
|
||||
&:insensitive { color: mix($fg_color, $bg_color, 0.50); }
|
||||
&:insensitive { color: mix($fg_color, $bg_color, 0.50); }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,304 +2,317 @@
|
|||
! Buttons
|
||||
**********/
|
||||
|
||||
$shadow_strength: .3;
|
||||
|
||||
@include exports("button_extends") {
|
||||
%button {
|
||||
padding: $spacing ($spacing + 2px);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: $roundness;
|
||||
transition: 150ms ease;
|
||||
outline-color: transparent;
|
||||
%button {
|
||||
padding: $spacing ($spacing + 2px);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: $roundness;
|
||||
transition: 150ms ease;
|
||||
outline-color: transparent;
|
||||
|
||||
-GtkWidget-focus-padding: 1;
|
||||
-GtkWidget-focus-line-width: 0;
|
||||
-GtkWidget-focus-padding: 1;
|
||||
-GtkWidget-focus-line-width: 0;
|
||||
|
||||
&:focus, &:hover, &:active { transition: none; }
|
||||
}
|
||||
}
|
||||
|
||||
%linked_middle {
|
||||
border-radius: 0;
|
||||
border-left-style: none;
|
||||
border-right-style: solid;
|
||||
%linked_middle {
|
||||
border-radius: 0;
|
||||
border-left-style: none;
|
||||
border-right-style: solid;
|
||||
|
||||
&:dir(rtl) {
|
||||
border-radius: 0; // needed when including %linked_middle:dir(rtl)
|
||||
border-right-style: none;
|
||||
border-left-style: solid
|
||||
}
|
||||
}
|
||||
&:dir(rtl) {
|
||||
border-radius: 0; // needed when including %linked_middle:dir(rtl)
|
||||
border-right-style: none;
|
||||
border-left-style: solid
|
||||
}
|
||||
}
|
||||
|
||||
%linked_button {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 0;
|
||||
border-right-style: none;
|
||||
border-left-style: none;
|
||||
%linked_button {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 0;
|
||||
border-right-style: none;
|
||||
border-left-style: none;
|
||||
|
||||
&:first-child {
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
border-left-style: solid;
|
||||
border-right-style: none;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
&:first-child {
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
border-left-style: solid;
|
||||
border-right-style: none;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
&:dir(rtl) {
|
||||
border-left-style: none;
|
||||
border-right-style: solid;
|
||||
}
|
||||
}
|
||||
&:dir(rtl) {
|
||||
border-left-style: none;
|
||||
border-right-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
border-left-style: none;
|
||||
border-right-style: solid;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
&:last-child {
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
border-left-style: none;
|
||||
border-right-style: solid;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
&:dir(rtl) {
|
||||
border-left-style: solid;
|
||||
border-right-style: none;
|
||||
}
|
||||
}
|
||||
&:dir(rtl) {
|
||||
border-left-style: solid;
|
||||
border-right-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:only-child, &:first-child:only-child {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: $roundness;
|
||||
}
|
||||
}
|
||||
&:only-child, &:first-child:only-child {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: $roundness;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin linked_button($bg) {
|
||||
@extend %linked_button;
|
||||
$border_strength: if(lightness($bg) > 50, 0, .1);
|
||||
$shadow_strength: if(lightness($bg) > 50, 0, .1);
|
||||
|
||||
box-shadow: inset -1px 0 border_normal(rgba(0,0,0,.12)),
|
||||
0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
|
||||
@extend %linked_button;
|
||||
|
||||
&:focus, &:hover {
|
||||
box-shadow: inset -1px 0 border_focus(rgba(0,0,0,.12)),
|
||||
0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
|
||||
}
|
||||
box-shadow: inset -1px 0 border_normal(rgba(0,0,0,.12 + $border_strength)),
|
||||
0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
|
||||
|
||||
&:active, &:active:hover,
|
||||
&:active:focus, &:active:hover:focus,
|
||||
&:checked, &:checked:hover,
|
||||
&:checked:focus, &:checked:hover:focus {
|
||||
box-shadow: inset -1px 0 border_active(rgba(0,0,0,.12)),
|
||||
inset 0 1px alpha($dark_shadow, .07),
|
||||
inset 0 -1px alpha($dark_shadow, .05);
|
||||
}
|
||||
&:focus, &:hover {
|
||||
box-shadow: inset -1px 0 border_focus(rgba(0,0,0,.12 + $border_strength)),
|
||||
0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
|
||||
}
|
||||
|
||||
&:insensitive { box-shadow: inset -1px 0 shade($bg, .8); }
|
||||
&:active, &:active:hover,
|
||||
&:active:focus, &:active:hover:focus,
|
||||
&:checked, &:checked:hover,
|
||||
&:checked:focus, &:checked:hover:focus {
|
||||
box-shadow: inset -1px 0 border_active(rgba(0,0,0,.12 + $border_strength)),
|
||||
inset 0 1px alpha($dark_shadow, .07),
|
||||
inset 0 -1px alpha($dark_shadow, .05);
|
||||
}
|
||||
|
||||
&:last-child, &:only-child { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); }
|
||||
&:insensitive { box-shadow: inset -1px 0 shade($bg, .8); }
|
||||
|
||||
&:last-child:hover, &:only-child:hover { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); }
|
||||
&:last-child, &:only-child { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); }
|
||||
|
||||
&:insensitive:last-child, &:insensitive:only-child,
|
||||
&:active:insensitive:last-child, &:active:insensitive:only-child,
|
||||
&:checked:insensitive:last-child, &:checked:insensitive:only-child { box-shadow: none; }
|
||||
&:last-child:hover, &:only-child:hover { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); }
|
||||
|
||||
&:active:last-child, &:active:last-child:focus, &:active:last-child:hover, &:active:last-child:hover:focus,
|
||||
&:checked:last-child, &:checked:last-child:focus, &:checked:last-child:hover, &:checked:last-child:hover:focus, {
|
||||
box-shadow: inset 0 1px alpha($dark_shadow, .07),
|
||||
inset -1px 0 alpha($dark_shadow, .06);
|
||||
}
|
||||
&:insensitive:last-child, &:insensitive:only-child,
|
||||
&:active:insensitive:last-child, &:active:insensitive:only-child,
|
||||
&:checked:insensitive:last-child, &:checked:insensitive:only-child { box-shadow: none; }
|
||||
|
||||
&:active:only-child, &:active:only-child:focus, &:active:only-child:hover, &:active:only-child:hover:focus,
|
||||
&:checked:only-child, &:checked:only-child:focus, &:checked:only-child:hover, &:checked:only-child:hover:focus {
|
||||
box-shadow: inset 1px 0 alpha($dark_shadow, .06),
|
||||
inset 0 1px alpha($dark_shadow, .07),
|
||||
inset -1px 0 alpha($dark_shadow, .06);
|
||||
}
|
||||
&:active:last-child, &:active:last-child:focus, &:active:last-child:hover, &:active:last-child:hover:focus,
|
||||
&:checked:last-child, &:checked:last-child:focus, &:checked:last-child:hover, &:checked:last-child:hover:focus, {
|
||||
box-shadow: inset 0 1px alpha($dark_shadow, .07),
|
||||
inset -1px 0 alpha($dark_shadow, .06);
|
||||
}
|
||||
|
||||
&:active:only-child, &:active:only-child:focus, &:active:only-child:hover, &:active:only-child:hover:focus,
|
||||
&:checked:only-child, &:checked:only-child:focus, &:checked:only-child:hover, &:checked:only-child:hover:focus {
|
||||
box-shadow: inset 1px 0 alpha($dark_shadow, .06),
|
||||
inset 0 1px alpha($dark_shadow, .07),
|
||||
inset -1px 0 alpha($dark_shadow, .06);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button($bg, $fg) {
|
||||
@extend %button;
|
||||
@include linear-gradient(shade($bg, 1.3));
|
||||
@include border(rgba(0,0,0,.12));
|
||||
$border_strength: if(lightness($bg) > 50, 0, .1);
|
||||
$shadow_strength: if(lightness($bg) > 50, 0, .1);
|
||||
|
||||
color: $fg;
|
||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
|
||||
border-color: alpha($bg, 0);
|
||||
$button_bg: if(hue($bg) == 0deg, shade($bg, 1.2), $bg);
|
||||
|
||||
&.flat {
|
||||
border-color: alpha($bg, 0);
|
||||
background-color: alpha($bg, 0);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
@extend %button;
|
||||
@include linear-gradient($button_bg);
|
||||
@include border(rgba(0,0,0,.12 + $border_strength));
|
||||
|
||||
&, &.flat {
|
||||
&:focus, &:hover {
|
||||
@include linear-gradient(shade($bg, 1.4));
|
||||
color: $fg;
|
||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
|
||||
|
||||
border-color: alpha($bg, 0);
|
||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
|
||||
}
|
||||
&.flat {
|
||||
border-color: alpha($button_bg, 0);
|
||||
background-color: alpha($button_bg, 0);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active, &:checked {
|
||||
@include linear-gradient(shade($bg, .9), to top);
|
||||
&, &.flat {
|
||||
&:focus, &:hover {
|
||||
@include linear-gradient(shade($button_bg, 1.2));
|
||||
@include border(rgba(0,0,0,.2 + $border_strength));
|
||||
|
||||
color: $fg;
|
||||
box-shadow: inset 1px 0 alpha($dark_shadow, .06),
|
||||
inset 0 1px alpha($dark_shadow, .07),
|
||||
inset -1px 0 alpha($dark_shadow, .06),
|
||||
inset 0 -1px alpha($dark_shadow, .05);
|
||||
}
|
||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
|
||||
}
|
||||
|
||||
&:active:insensitive, &:checked:insensitive {
|
||||
@include linear-gradient(shade($bg, .8));
|
||||
&:active, &:checked {
|
||||
@include linear-gradient(shade($button_bg, .7), to top);
|
||||
|
||||
color: $fg;
|
||||
box-shadow: none;
|
||||
}
|
||||
color: white;
|
||||
box-shadow: inset 1px 0 alpha($dark_shadow, .06),
|
||||
inset 0 1px alpha($dark_shadow, .07),
|
||||
inset -1px 0 alpha($dark_shadow, .06),
|
||||
inset 0 -1px alpha($dark_shadow, .05);
|
||||
|
||||
&:focus, &:hover {
|
||||
@include linear-gradient(shade($button_bg, .65), to top);
|
||||
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus, &:hover { color: $fg; }
|
||||
|
||||
&:active:insensitive, &:checked:insensitive {
|
||||
@include linear-gradient(shade($button_bg, .9));
|
||||
|
||||
color: $fg;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:insensitive:insensitive {
|
||||
@if (lightness($bg) > 50) {
|
||||
@include linear-gradient(shade($bg, .95));
|
||||
@if (lightness($button_bg) > 50) {
|
||||
@include linear-gradient(shade($button_bg, .95));
|
||||
} @else {
|
||||
@include linear-gradient(alpha($bg, .3));
|
||||
@include linear-gradient(alpha($button_bg, .3));
|
||||
}
|
||||
|
||||
color: mix($bg, $fg, .5);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.separator, .separator {
|
||||
border: 1px solid currentColor;
|
||||
color: shade($bg, ($contrast + .1));
|
||||
&.separator, .separator {
|
||||
border: 1px solid currentColor;
|
||||
color: shade($bg, ($contrast + .1));
|
||||
|
||||
&:insensitive { color: shade($bg, .85); }
|
||||
}
|
||||
&:insensitive { color: shade($button_bg, .85); }
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("button") {
|
||||
* {
|
||||
-GtkButton-child-displacement-x: 0;
|
||||
-GtkButton-child-displacement-y: 0;
|
||||
-GtkButton-default-border: 0;
|
||||
-GtkButton-image-spacing: 0;
|
||||
-GtkButton-inner-border: 1;
|
||||
-GtkButton-interior-focus: true;
|
||||
-GtkButtonBox-child-min-height: 24;
|
||||
-GtkButtonBox-child-internal-pad-y: 1;
|
||||
-GtkToolButton-icon-spacing: 6;
|
||||
}
|
||||
* {
|
||||
-GtkButton-child-displacement-x: 0;
|
||||
-GtkButton-child-displacement-y: 0;
|
||||
-GtkButton-default-border: 0;
|
||||
-GtkButton-image-spacing: 0;
|
||||
-GtkButton-inner-border: 1;
|
||||
-GtkButton-interior-focus: true;
|
||||
-GtkButtonBox-child-min-height: 24;
|
||||
-GtkButtonBox-child-internal-pad-y: 1;
|
||||
-GtkToolButton-icon-spacing: 6;
|
||||
}
|
||||
|
||||
%close_button {
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
%close_button {
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
|
||||
&:focus, &:hover {
|
||||
border: 1px solid alpha(black, .3);
|
||||
background-color: alpha(white, .2);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:focus, &:hover {
|
||||
border: 1px solid alpha(black, .3);
|
||||
background-color: alpha(white, .2);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active, &:checked, &:active:hover, &:checked:hover {
|
||||
border: 1px solid alpha(black, .3);
|
||||
background-color: alpha(black, .1);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&:active, &:checked, &:active:hover, &:checked:hover {
|
||||
border: 1px solid alpha(black, .3);
|
||||
background-color: alpha(black, .1);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
@include button($bg_color, $fg_color);
|
||||
.button {
|
||||
@include button(shade($bg_color, 1.2), $fg_color);
|
||||
|
||||
&.default { @include button($selected_bg_color, $selected_fg_color); }
|
||||
&.default { @include button($selected_bg_color, $selected_fg_color); }
|
||||
|
||||
&.linked, .linked & { @include linked_button(shade($bg_color, 1.2)); }
|
||||
&.linked, .linked & { @include linked_button(shade($bg_color, 1.2)); }
|
||||
|
||||
.spinbutton & {
|
||||
color: mix($text_color, $base_color, .4);
|
||||
padding: $spacing ($spacing * 2);
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 1px 0 shade($base_color, .9);
|
||||
.spinbutton & {
|
||||
color: mix($text_color, $base_color, .4);
|
||||
padding: $spacing ($spacing * 2);
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 1px 0 shade($base_color, .9);
|
||||
|
||||
&:insensitive {
|
||||
color: mix($text_color, $base_color, .7);
|
||||
box-shadow: inset 1px 0 shade($base_color, .85);
|
||||
}
|
||||
&:insensitive {
|
||||
color: mix($text_color, $base_color, .7);
|
||||
box-shadow: inset 1px 0 shade($base_color, .85);
|
||||
}
|
||||
|
||||
&:active, &:checked, &:hover { color: $text_color; }
|
||||
&:active, &:checked, &:hover { color: $text_color; }
|
||||
|
||||
&:first-child {
|
||||
border-radius: $roundness 0 0 $roundness;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:first-child {
|
||||
border-radius: $roundness 0 0 $roundness;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:last-child { border-radius: 0 $roundness $roundness 0; }
|
||||
&:last-child { border-radius: 0 $roundness $roundness 0; }
|
||||
|
||||
&:dir(rtl) { box-shadow: inset -1px 0 shade($base_color, .9); }
|
||||
}
|
||||
&:dir(rtl) { box-shadow: inset -1px 0 shade($base_color, .9); }
|
||||
}
|
||||
|
||||
.spinbutton.vertical & {
|
||||
border: 1px solid shade($bg_color, .8);
|
||||
border-radius: $roundness;
|
||||
background-color: shade($bg_color, 1.08);
|
||||
background-image: none;
|
||||
color: $fg_color;
|
||||
box-shadow: none;
|
||||
.spinbutton.vertical & {
|
||||
border: 1px solid shade($bg_color, .8);
|
||||
border-radius: $roundness;
|
||||
background-color: shade($bg_color, 1.08);
|
||||
background-image: none;
|
||||
color: $fg_color;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
border-color: shade($bg_color, .7);
|
||||
background-color: shade($bg_color, 1.1);
|
||||
background-image: none;
|
||||
}
|
||||
&:hover {
|
||||
border-color: shade($bg_color, .7);
|
||||
background-color: shade($bg_color, 1.1);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:active, &:checked {
|
||||
border-color: shade($bg_color, .8);
|
||||
background-color: shade($bg_color, .95);
|
||||
background-image: none;
|
||||
}
|
||||
&:active, &:checked {
|
||||
border-color: shade($bg_color, .8);
|
||||
background-color: shade($bg_color, .95);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:active:hover, &:checked:hover {
|
||||
border-color: shade($bg_color, .7);
|
||||
}
|
||||
&:active:hover, &:checked:hover {
|
||||
border-color: shade($bg_color, .7);
|
||||
}
|
||||
|
||||
&:focus, &:hover:focus, &:active:focus, &:active:hover:focus { border-color: shade($bg_color, .7); }
|
||||
&:focus, &:hover:focus, &:active:focus, &:active:hover:focus { border-color: shade($bg_color, .7); }
|
||||
|
||||
&:insensitive {
|
||||
border-color: shade($bg_color, .85);
|
||||
background-color: shade($bg_color, .9);
|
||||
background-image: none;
|
||||
}
|
||||
&:insensitive {
|
||||
border-color: shade($bg_color, .85);
|
||||
background-color: shade($bg_color, .9);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-width: 1px;
|
||||
border-bottom-width: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
&:first-child {
|
||||
border-width: 1px;
|
||||
border-bottom-width: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-width: 1px;
|
||||
border-top-width: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
border-width: 1px;
|
||||
border-top-width: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.spinbutton.vertical.entry {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.spinbutton.vertical.entry {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -308,41 +321,41 @@ $shadow_strength: .3;
|
|||
*******************/
|
||||
|
||||
@include exports("combobox") {
|
||||
GtkComboBox {
|
||||
> .button {
|
||||
padding: ($spacing - 2px) ($spacing + 1px);
|
||||
GtkComboBox {
|
||||
> .button {
|
||||
padding: ($spacing - 2px) ($spacing + 1px);
|
||||
|
||||
-GtkComboBox-arrow-scaling: .5;
|
||||
-GtkComboBox-shadow-type: none;
|
||||
}
|
||||
-GtkComboBox-arrow-scaling: .5;
|
||||
-GtkComboBox-shadow-type: none;
|
||||
}
|
||||
|
||||
&.combobox-entry {
|
||||
.entry, .button { @extend %linked_button; }
|
||||
}
|
||||
&.combobox-entry {
|
||||
.entry, .button { @extend %linked_button; }
|
||||
}
|
||||
|
||||
.separator {
|
||||
/* always disable separators */
|
||||
-GtkWidget-wide-separators: true;
|
||||
-GtkWidget-horizontal-separator: 0;
|
||||
-GtkWidget-vertical-separator: 0;
|
||||
.separator {
|
||||
/* always disable separators */
|
||||
-GtkWidget-wide-separators: true;
|
||||
-GtkWidget-horizontal-separator: 0;
|
||||
-GtkWidget-vertical-separator: 0;
|
||||
|
||||
border-style: none;
|
||||
}
|
||||
}
|
||||
border-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.linked > GtkComboBox {
|
||||
> .button {
|
||||
// the combo is a composite widget so the way we do button linked 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 {
|
||||
> .button {
|
||||
// the combo is a composite widget so the way we do button linked 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); }
|
||||
}
|
||||
|
||||
&:first-child > .button { @extend %linked_button:first-child; }
|
||||
&:first-child > .button { @extend %linked_button:first-child; }
|
||||
|
||||
&:last-child > .button { @extend %linked_button:last-child; }
|
||||
&:last-child > .button { @extend %linked_button:last-child; }
|
||||
|
||||
&:only-child > .button { @extend %linked_button:only-child; }
|
||||
}
|
||||
&:only-child > .button { @extend %linked_button:only-child; }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,27 +3,27 @@
|
|||
***********/
|
||||
|
||||
@include exports("calendar") {
|
||||
GtkCalendar {
|
||||
padding: $spacing;
|
||||
outline-offset: -1px;
|
||||
GtkCalendar {
|
||||
padding: $spacing;
|
||||
outline-offset: -1px;
|
||||
|
||||
&:inconsistent { color: mix($fg_color, $bg_color, 0.5); }
|
||||
&:inconsistent { color: mix($fg_color, $bg_color, 0.5); }
|
||||
|
||||
&.view, &.highlight, &.header, &.button {
|
||||
&, &:focus, &:hover, &:insensitive {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
&.view, &.highlight, &.header, &.button {
|
||||
&, &:focus, &:hover, &:insensitive {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight { color: $selected_bg_color; }
|
||||
}
|
||||
&.highlight { color: $selected_bg_color; }
|
||||
}
|
||||
|
||||
/* gnome-calendar */
|
||||
.calendar-view {
|
||||
background-color: $base_color;
|
||||
color: $text_color;
|
||||
}
|
||||
/* gnome-calendar */
|
||||
.calendar-view {
|
||||
background-color: $base_color;
|
||||
color: $text_color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,86 +3,86 @@
|
|||
****************/
|
||||
|
||||
@include exports("colorchooser") {
|
||||
GtkColorSwatch {
|
||||
&, &:selected {
|
||||
border: 1px solid alpha(black, 0.1);
|
||||
border-radius: $roundness - 1px;
|
||||
background-color: transparent;
|
||||
background-clip: border-box;
|
||||
GtkColorSwatch {
|
||||
&, &:selected {
|
||||
border: 1px solid alpha(black, 0.1);
|
||||
border-radius: $roundness - 1px;
|
||||
background-color: transparent;
|
||||
background-clip: border-box;
|
||||
|
||||
&:hover { border-color: alpha(black, 0.3); }
|
||||
}
|
||||
&:hover { border-color: alpha(black, 0.3); }
|
||||
}
|
||||
|
||||
&.color-light:selected:hover, &.color-dark:selected:hover { background-image: none; }
|
||||
&.color-light:selected:hover, &.color-dark:selected:hover { background-image: none; }
|
||||
|
||||
&.left, &:first-child {
|
||||
border-top-left-radius: $roundness;
|
||||
border-bottom-left-radius: $roundness;
|
||||
}
|
||||
&.left, &:first-child {
|
||||
border-top-left-radius: $roundness;
|
||||
border-bottom-left-radius: $roundness;
|
||||
}
|
||||
|
||||
&.right, &:last-child {
|
||||
border-top-right-radius: $roundness;
|
||||
border-bottom-right-radius: $roundness;
|
||||
}
|
||||
&.right, &:last-child {
|
||||
border-top-right-radius: $roundness;
|
||||
border-bottom-right-radius: $roundness;
|
||||
}
|
||||
|
||||
&:only-child { border-radius: $roundness; }
|
||||
&:only-child { border-radius: $roundness; }
|
||||
|
||||
&.top {
|
||||
border-top-left-radius: $roundness;
|
||||
border-top-right-radius: $roundness;
|
||||
}
|
||||
&.top {
|
||||
border-top-left-radius: $roundness;
|
||||
border-top-right-radius: $roundness;
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
border-bottom-left-radius: $roundness;
|
||||
border-bottom-right-radius: $roundness;
|
||||
}
|
||||
&.bottom {
|
||||
border-bottom-left-radius: $roundness;
|
||||
border-bottom-right-radius: $roundness;
|
||||
}
|
||||
|
||||
GtkColorEditor & {
|
||||
border-radius: $roundness;
|
||||
GtkColorEditor & {
|
||||
border-radius: $roundness;
|
||||
|
||||
&.color-dark:hover, &.color-light:hover {
|
||||
background-image: none;
|
||||
border-color: alpha(black, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.color-dark:hover, &.color-light:hover {
|
||||
background-image: none;
|
||||
border-color: alpha(black, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
GtkColorChooserWidget #add-color-button {
|
||||
background-clip: padding-box;
|
||||
border-color: alpha(black, 0.1);
|
||||
background-color: shade($bg_color, 0.95);
|
||||
color: $fg_color;
|
||||
GtkColorChooserWidget #add-color-button {
|
||||
background-clip: padding-box;
|
||||
border-color: alpha(black, 0.1);
|
||||
background-color: shade($bg_color, 0.95);
|
||||
color: $fg_color;
|
||||
|
||||
&:hover {
|
||||
border-color: alpha(black, 0.3);
|
||||
background-color: shade($bg_color, 0.90);
|
||||
color: $fg_color;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
border-color: alpha(black, 0.3);
|
||||
background-color: shade($bg_color, 0.90);
|
||||
color: $fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
.color-active-badge {
|
||||
&, &:selected {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
background-color: transparent;
|
||||
}
|
||||
.color-active-badge {
|
||||
&, &:selected {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.color-light {
|
||||
&, &:hover {
|
||||
border-color: alpha(black, 0.3);
|
||||
color: alpha(black, 0.3);
|
||||
}
|
||||
}
|
||||
&.color-light {
|
||||
&, &:hover {
|
||||
border-color: alpha(black, 0.3);
|
||||
color: alpha(black, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&.color-dark {
|
||||
&, &:hover {
|
||||
border-color: alpha(white, 0.3);
|
||||
color: alpha(white, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.color-dark {
|
||||
&, &:hover {
|
||||
border-color: alpha(white, 0.3);
|
||||
color: alpha(white, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
GtkColorButton.button { padding: $spacing; }
|
||||
GtkColorButton.button { padding: $spacing; }
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -91,35 +91,35 @@
|
|||
************************/
|
||||
|
||||
@include exports("miscchoosers") {
|
||||
GtkFontButton, GtkFileChooserButton {
|
||||
.separator {
|
||||
/* always disable separators */
|
||||
-GtkWidget-wide-separators: true;
|
||||
-GtkWidget-horizontal-separator: 0;
|
||||
-GtkWidget-vertical-separator: 0;
|
||||
}
|
||||
GtkFontButton, GtkFileChooserButton {
|
||||
.separator {
|
||||
/* always disable separators */
|
||||
-GtkWidget-wide-separators: true;
|
||||
-GtkWidget-horizontal-separator: 0;
|
||||
-GtkWidget-vertical-separator: 0;
|
||||
}
|
||||
|
||||
GtkLabel:last-child { color: alpha(currentColor, 0.7); }
|
||||
GtkLabel:last-child { color: alpha(currentColor, 0.7); }
|
||||
|
||||
GtkImage:last-child { color: alpha(currentColor, 0.7); }
|
||||
}
|
||||
GtkImage:last-child { color: alpha(currentColor, 0.7); }
|
||||
}
|
||||
|
||||
GtkFileChooser {
|
||||
.pane-separator {
|
||||
&, &:hover {
|
||||
border-width: 0 1px 0 0;
|
||||
border-style: solid;
|
||||
border-color: currentColor;
|
||||
background-color: $bg_color;
|
||||
color: shade($bg_color, ($contrast + .1));
|
||||
}
|
||||
}
|
||||
GtkFileChooser {
|
||||
.pane-separator {
|
||||
&, &:hover {
|
||||
border-width: 0 1px 0 0;
|
||||
border-style: solid;
|
||||
border-color: currentColor;
|
||||
background-color: $bg_color;
|
||||
color: shade($bg_color, ($contrast + .1));
|
||||
}
|
||||
}
|
||||
|
||||
/* for fallback when header bar not used */
|
||||
.dialog-action-box {
|
||||
border-width: 1px 0 0;
|
||||
border-style: solid;
|
||||
border-color: shade($bg_color, 0.7);
|
||||
}
|
||||
}
|
||||
/* for fallback when header bar not used */
|
||||
.dialog-action-box {
|
||||
border-width: 1px 0 0;
|
||||
border-style: solid;
|
||||
border-color: shade($bg_color, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,82 +3,82 @@
|
|||
**********/
|
||||
|
||||
%linked_entry {
|
||||
border-width: 1px;
|
||||
border-radius: 0;
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
border-width: 1px;
|
||||
border-radius: 0;
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
|
||||
&:first-child {
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
border-right-width: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
&:first-child {
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
border-right-width: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
border-left-width: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
border-left-width: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
}
|
||||
&:only-child {
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
}
|
||||
}
|
||||
|
||||
%entry {
|
||||
padding: ($spacing - 1px) $spacing;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: $roundness;
|
||||
transition: border 150ms ease;
|
||||
box-shadow: inset 1px 1px alpha($dark_shadow, .06),
|
||||
inset -1px 0 alpha($dark_shadow, .06);
|
||||
padding: ($spacing - 1px) $spacing;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: $roundness;
|
||||
transition: border 150ms ease;
|
||||
box-shadow: inset 1px 1px alpha($dark_shadow, .06),
|
||||
inset -1px 0 alpha($dark_shadow, .06);
|
||||
|
||||
&:focus, &:hover, &:active { transition: none; }
|
||||
|
||||
&:selected, &:selected:focus {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
&:selected, &:selected:focus {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
|
||||
&:insensitive { box-shadow: none; }
|
||||
&:insensitive { box-shadow: none; }
|
||||
|
||||
&.progressbar {
|
||||
@include linear-gradient($selected_bg_color);
|
||||
&.progressbar {
|
||||
@include linear-gradient($selected_bg_color);
|
||||
|
||||
border-width: 0;
|
||||
border-radius: $roundness;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
border-width: 0;
|
||||
border-radius: $roundness;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
|
||||
&.image.left { padding-right: $spacing; }
|
||||
&.image.left { padding-right: $spacing; }
|
||||
}
|
||||
|
||||
@mixin entry($bg, $fg) {
|
||||
@extend %entry;
|
||||
@include linear-gradient($bg, to top);
|
||||
@include border($bg);
|
||||
@extend %entry;
|
||||
@include linear-gradient($bg, to top);
|
||||
@include border($bg);
|
||||
|
||||
color: $fg;
|
||||
color: $fg;
|
||||
|
||||
&:focus, &:active { border-color: $selected_bg_color; }
|
||||
&:focus, &:active { border-color: $selected_bg_color; }
|
||||
|
||||
&:insensitive {
|
||||
@include linear-gradient(shade($bg, .9), to top);
|
||||
&:insensitive {
|
||||
@include linear-gradient(shade($bg, .9), to top);
|
||||
|
||||
color: mix($bg, $fg, .5);
|
||||
}
|
||||
color: mix($bg, $fg, .5);
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("entry") {
|
||||
.entry {
|
||||
@include entry($base_color, $text_color);
|
||||
.entry {
|
||||
@include entry($base_color, $text_color);
|
||||
|
||||
&.linked, .linked & { @extend %linked_entry; }
|
||||
}
|
||||
&.linked, .linked & { @extend %linked_entry; }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,33 +6,33 @@
|
|||
**********/
|
||||
|
||||
@include exports("infobar") {
|
||||
GtkInfoBar {
|
||||
border: none;
|
||||
GtkInfoBar {
|
||||
border: none;
|
||||
|
||||
$types: (
|
||||
info: ( $info_fg_color, $info_bg_color ),
|
||||
warning: ( $warning_fg_color, $warning_bg_color ),
|
||||
question: ( $question_fg_color, $question_bg_color ),
|
||||
error: ( $error_fg_color, $error_bg_color ),
|
||||
);
|
||||
$types: (
|
||||
info: ( $info_fg_color, $info_bg_color ),
|
||||
warning: ( $warning_fg_color, $warning_bg_color ),
|
||||
question: ( $question_fg_color, $question_bg_color ),
|
||||
error: ( $error_fg_color, $error_bg_color ),
|
||||
);
|
||||
|
||||
|
||||
@each $type, $colors in $types {
|
||||
$fg_color: nth($colors, 1);
|
||||
$bg_color: nth($colors, 2);
|
||||
@each $type, $colors in $types {
|
||||
$fg_color: nth($colors, 1);
|
||||
$bg_color: nth($colors, 2);
|
||||
|
||||
&.#{$type} {
|
||||
@include linear-gradient($bg_color);
|
||||
&.#{$type} {
|
||||
@include linear-gradient($bg_color);
|
||||
|
||||
border: 1px solid shade($bg_color, 0.8);
|
||||
color: $fg_color;
|
||||
border: 1px solid shade($bg_color, 0.8);
|
||||
color: $fg_color;
|
||||
|
||||
.button {
|
||||
@include button($bg_color, $fg_color);
|
||||
.button {
|
||||
@include button($bg_color, $fg_color);
|
||||
|
||||
&.close { @extend %close_button; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.close { @extend %close_button; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -117,18 +117,18 @@
|
|||
color: shade($menu_bg_color, ($contrast + .1));
|
||||
}
|
||||
|
||||
&.button {
|
||||
&.button, &.button.flat {
|
||||
&, &:focus, &:active, &:insensitive, &:active:insensitive {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
&:hover, &:focus:hover, &:active:hover, &:selected {
|
||||
background-color: $selected_bg_color;
|
||||
background-image: none;
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
background-color: $menu_bg_color;
|
||||
background-image: none;
|
||||
color: $menu_fg_color;
|
||||
box-shadow: 0 2px 3px alpha(black, .5);
|
||||
box-shadow: 0 3px 6px alpha(black, .16);
|
||||
|
||||
&.background {
|
||||
background-image: none;
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@
|
|||
****************/
|
||||
|
||||
@include exports("dimlabel") {
|
||||
.dim-label {
|
||||
opacity: 0.5;
|
||||
text-shadow: none;
|
||||
}
|
||||
.dim-label {
|
||||
opacity: 0.5;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -15,15 +15,15 @@
|
|||
************/
|
||||
|
||||
@include exports("tooltip") {
|
||||
.tooltip {
|
||||
@include linear-gradient($tooltip_bg_color);
|
||||
.tooltip {
|
||||
@include linear-gradient($tooltip_bg_color);
|
||||
|
||||
border: none;
|
||||
border-radius: $roundness;
|
||||
color: $tooltip_fg_color;
|
||||
border: none;
|
||||
border-radius: $roundness;
|
||||
color: $tooltip_fg_color;
|
||||
|
||||
* { background-color: transparent; }
|
||||
}
|
||||
* { background-color: transparent; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -32,14 +32,14 @@
|
|||
************/
|
||||
|
||||
@include exports("dialogs") {
|
||||
GtkMessageDialog, .message-dialog, .prompt {
|
||||
-GtkDialog-content-area-border: 0;
|
||||
-GtkDialog-action-area-border: $spacing;
|
||||
-GtkDialog-button-spacing: 0;
|
||||
GtkMessageDialog, .message-dialog, .prompt {
|
||||
-GtkDialog-content-area-border: 0;
|
||||
-GtkDialog-action-area-border: $spacing;
|
||||
-GtkDialog-button-spacing: 0;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -48,16 +48,20 @@
|
|||
**********************/
|
||||
|
||||
@include exports("notifications") {
|
||||
.app-notification {
|
||||
border-style: solid;
|
||||
border-color: border_normal($base_color);
|
||||
border-width: 0 1px 1px 1px;
|
||||
border-radius: 0 0 $roundness $roundness;
|
||||
padding: $spacing * 3;
|
||||
background-color: $base_color;
|
||||
background-image: none;
|
||||
color: $text_color;
|
||||
}
|
||||
.app-notification {
|
||||
&, &.frame {
|
||||
border-style: solid;
|
||||
border-color: border_normal($osd_bg);
|
||||
border-width: 0 1px 1px 1px;
|
||||
border-radius: 0 0 $roundness $roundness;
|
||||
padding: $spacing * 2;
|
||||
background-color: $osd_bg;
|
||||
background-image: none;
|
||||
color: $osd_fg;
|
||||
|
||||
.button { @include button($osd_bg, $osd_fg); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -66,25 +70,25 @@
|
|||
**************/
|
||||
|
||||
@include exports("expander") {
|
||||
GtkExpander {
|
||||
padding: $spacing;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
GtkExpander {
|
||||
padding: $spacing;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.expander {
|
||||
color: alpha(currentColor, 0.7);
|
||||
border: alpha(currentColor, 0.7);
|
||||
.expander {
|
||||
color: alpha(currentColor, 0.7);
|
||||
border: alpha(currentColor, 0.7);
|
||||
|
||||
&:hover {
|
||||
color: alpha(currentColor, 0.8);
|
||||
border-color: alpha(currentColor, 0.8);
|
||||
}
|
||||
&:hover {
|
||||
color: alpha(currentColor, 0.8);
|
||||
border-color: alpha(currentColor, 0.8);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: alpha(currentColor, 0.9);
|
||||
border-color: alpha(currentColor, 0.9);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
color: alpha(currentColor, 0.9);
|
||||
border-color: alpha(currentColor, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -93,13 +97,13 @@
|
|||
********************/
|
||||
|
||||
@include exports("symbolicimage") {
|
||||
.image {
|
||||
color: alpha(currentColor, 0.5);
|
||||
.image {
|
||||
color: alpha(currentColor, 0.5);
|
||||
|
||||
&:hover { color: alpha(currentColor, 0.9); }
|
||||
&:hover { color: alpha(currentColor, 0.9); }
|
||||
|
||||
&:selected, &:selected:hover { color: $selected_fg_color; }
|
||||
}
|
||||
&:selected, &:selected:hover { color: $selected_fg_color; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -108,46 +112,46 @@
|
|||
*****************/
|
||||
|
||||
@include exports("floatingbar") {
|
||||
.floating-bar {
|
||||
@include linear-gradient($bg_color);
|
||||
.floating-bar {
|
||||
@include linear-gradient($bg_color);
|
||||
|
||||
border: 1px solid border_normal($bg_color);
|
||||
border-radius: $roundness;
|
||||
color: $fg_color;
|
||||
border: 1px solid border_normal($bg_color);
|
||||
border-radius: $roundness;
|
||||
color: $fg_color;
|
||||
|
||||
&.top {
|
||||
border-top-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
&.top {
|
||||
border-top-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
&.right {
|
||||
border-right-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
&.right {
|
||||
border-right-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
border-bottom-width: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
&.bottom {
|
||||
border-bottom-width: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&.left {
|
||||
border-left-width: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
&.left {
|
||||
border-left-width: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
-GtkButton-image-spacing: 0;
|
||||
-GtkButton-inner-border: 0;
|
||||
.button {
|
||||
-GtkButton-image-spacing: 0;
|
||||
-GtkButton-inner-border: 0;
|
||||
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -156,14 +160,14 @@
|
|||
**************************/
|
||||
|
||||
@include exports("touchbubble") {
|
||||
GtkBubbleWindow {
|
||||
border-radius: $roundness;
|
||||
background-clip: border-box;
|
||||
GtkBubbleWindow {
|
||||
border-radius: $roundness;
|
||||
background-clip: border-box;
|
||||
|
||||
&.osd.background { background-color: $osd_bg; }
|
||||
&.osd.background { background-color: $osd_bg; }
|
||||
|
||||
.toolbar { background-color: transparent; }
|
||||
}
|
||||
.toolbar { background-color: transparent; }
|
||||
}
|
||||
}
|
||||
|
||||
/***************
|
||||
|
|
@ -171,9 +175,9 @@
|
|||
****************/
|
||||
|
||||
@include exports("fontviewer") {
|
||||
SushiFontWidget {
|
||||
padding: $spacing ($spacing * 2);
|
||||
}
|
||||
SushiFontWidget {
|
||||
padding: $spacing ($spacing * 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -182,12 +186,12 @@
|
|||
**************/
|
||||
|
||||
@include exports("charmap") {
|
||||
GucharmapChartable {
|
||||
background-color: $base_color;
|
||||
color: $text_color;
|
||||
GucharmapChartable {
|
||||
background-color: $base_color;
|
||||
color: $text_color;
|
||||
|
||||
&:focus, &:hover, &:active, &:selected { @extend %selected; }
|
||||
}
|
||||
&:focus, &:hover, &:active, &:selected { @extend %selected; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -196,10 +200,10 @@
|
|||
**************/
|
||||
|
||||
@include exports("evolution") {
|
||||
EPreviewPane .entry {
|
||||
background-color: $base_color;
|
||||
color: $text_color;
|
||||
}
|
||||
EPreviewPane .entry {
|
||||
background-color: $base_color;
|
||||
color: $text_color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -208,11 +212,11 @@
|
|||
********************/
|
||||
|
||||
@include exports("gnome-bluetooth") {
|
||||
GtkEntry.entry.pin-entry {
|
||||
font: regular 50;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
GtkEntry.entry.pin-entry {
|
||||
font: regular 50;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
GtkLabel.pin-label { font: regular 50; }
|
||||
GtkLabel.pin-label { font: regular 50; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,121 +6,121 @@
|
|||
***********/
|
||||
|
||||
@include exports("notebook") {
|
||||
.notebook {
|
||||
padding: 0;
|
||||
border-width: 1px 0 0 0;
|
||||
border-style: solid;
|
||||
border-color: border_normal($base_color);
|
||||
border-radius: 0;
|
||||
background-color: $base_color;
|
||||
background-image: none;
|
||||
background-clip: border-box;
|
||||
color: $text_color;
|
||||
.notebook {
|
||||
padding: 0;
|
||||
border-width: 1px 0 0 0;
|
||||
border-style: solid;
|
||||
border-color: border_normal($base_color);
|
||||
border-radius: 0;
|
||||
background-color: $base_color;
|
||||
background-image: none;
|
||||
background-clip: border-box;
|
||||
color: $text_color;
|
||||
|
||||
-GtkNotebook-initial-gap: 0;
|
||||
-GtkNotebook-arrow-spacing: 5;
|
||||
-GtkNotebook-tab-curvature: 0;
|
||||
-GtkNotebook-tab-overlap: 1;
|
||||
-GtkNotebook-has-tab-gap: false;
|
||||
-GtkNotebook-initial-gap: 0;
|
||||
-GtkNotebook-arrow-spacing: 5;
|
||||
-GtkNotebook-tab-curvature: 0;
|
||||
-GtkNotebook-tab-overlap: 1;
|
||||
-GtkNotebook-has-tab-gap: false;
|
||||
|
||||
&.frame { border-width: 1px; }
|
||||
&.frame { border-width: 1px; }
|
||||
|
||||
&.header {
|
||||
border-width: 0;
|
||||
background-color: shade($base_color, .9);
|
||||
&.header {
|
||||
border-width: 0;
|
||||
background-color: shade($base_color, .9);
|
||||
|
||||
&.frame {
|
||||
border-color: border_normal($base_color);
|
||||
&.frame {
|
||||
border-color: border_normal($base_color);
|
||||
|
||||
&.top { border-width: 1px 1px 0 1px; }
|
||||
&.top { border-width: 1px 1px 0 1px; }
|
||||
|
||||
&.right { border-width: 1px 1px 1px 0; }
|
||||
&.right { border-width: 1px 1px 1px 0; }
|
||||
|
||||
&.bottom { border-width: 0 1px 1px 1px; }
|
||||
&.bottom { border-width: 0 1px 1px 1px; }
|
||||
|
||||
&.left { border-width: 1px 0 1px 1px; }
|
||||
}
|
||||
}
|
||||
&.left { border-width: 1px 0 1px 1px; }
|
||||
}
|
||||
}
|
||||
|
||||
GtkViewport {
|
||||
border-width: 0;
|
||||
background-color: $base_color;
|
||||
color: $text_color;
|
||||
}
|
||||
GtkViewport {
|
||||
border-width: 0;
|
||||
background-color: $base_color;
|
||||
color: $text_color;
|
||||
}
|
||||
|
||||
tab {
|
||||
padding: ($spacing + 1px) ($spacing * 2);
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
tab {
|
||||
padding: ($spacing + 1px) ($spacing * 2);
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
|
||||
&:hover {
|
||||
background-color: shade($base_color, .95);
|
||||
border-color: shade($base_color, .8);
|
||||
}
|
||||
&:hover {
|
||||
background-color: shade($base_color, .95);
|
||||
border-color: shade($base_color, .8);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $base_color;
|
||||
background-image: none;
|
||||
border-color: shade($base_color, .85);
|
||||
}
|
||||
&:active {
|
||||
background-color: $base_color;
|
||||
background-image: none;
|
||||
border-color: shade($base_color, .85);
|
||||
}
|
||||
|
||||
&.top {
|
||||
border-bottom-width: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
&.top {
|
||||
border-bottom-width: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&.right {
|
||||
border-left-width: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
&.right {
|
||||
border-left-width: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
&.bottom {
|
||||
border-top-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
&.bottom {
|
||||
border-top-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
&.left {
|
||||
border-right-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
&.left {
|
||||
border-right-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
GtkLabel { color: mix($text_color, $base_color, 0.3); }
|
||||
GtkLabel { color: mix($text_color, $base_color, 0.3); }
|
||||
|
||||
/* close button styling */
|
||||
.button { @extend %close_button; }
|
||||
}
|
||||
/* close button styling */
|
||||
.button { @extend %close_button; }
|
||||
}
|
||||
|
||||
.prelight-page {
|
||||
&, GtkLabel { color: mix($text_color, $base_color, 0.15); }
|
||||
}
|
||||
.prelight-page {
|
||||
&, GtkLabel { color: mix($text_color, $base_color, 0.15); }
|
||||
}
|
||||
|
||||
.active-page {
|
||||
&, GtkLabel { color: $text_color; }
|
||||
}
|
||||
.active-page {
|
||||
&, GtkLabel { color: $text_color; }
|
||||
}
|
||||
|
||||
.reorderable-page {
|
||||
&:hover {
|
||||
background-color: shade($base_color, 0.85);
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
/* using box shadows instead of borders due to slanted edges */
|
||||
box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03),
|
||||
inset 1px 0 shade($base_color, 0.7), inset -1px 0 shade($base_color, 0.7);
|
||||
}
|
||||
.reorderable-page {
|
||||
&:hover {
|
||||
background-color: shade($base_color, 0.85);
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
/* using box shadows instead of borders due to slanted edges */
|
||||
box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03),
|
||||
inset 1px 0 shade($base_color, 0.7), inset -1px 0 shade($base_color, 0.7);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: shade($base_color, 0.90);
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03),
|
||||
inset 1px 0 shade($base_color, 0.75), inset -1px 0 shade($base_color, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
background-color: shade($base_color, 0.90);
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03),
|
||||
inset 1px 0 shade($base_color, 0.75), inset -1px 0 shade($base_color, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,170 +3,170 @@
|
|||
******************/
|
||||
|
||||
@include exports("progressbar") {
|
||||
GtkProgressBar {
|
||||
padding: 0;
|
||||
border-radius: $roundness;
|
||||
font-size: smaller;
|
||||
color: alpha($fg_color, 0.6);
|
||||
GtkProgressBar {
|
||||
padding: 0;
|
||||
border-radius: $roundness;
|
||||
font-size: smaller;
|
||||
color: alpha($fg_color, 0.6);
|
||||
|
||||
-GtkProgressBar-min-horizontal-bar-height: 6;
|
||||
-GtkProgressBar-min-vertical-bar-width: 6;
|
||||
-GtkProgressBar-min-horizontal-bar-height: 6;
|
||||
-GtkProgressBar-min-vertical-bar-width: 6;
|
||||
|
||||
&.osd {
|
||||
-GtkProgressBar-xspacing: 0;
|
||||
-GtkProgressBar-yspacing: 0;
|
||||
-GtkProgressBar-min-horizontal-bar-height: 4;
|
||||
}
|
||||
&.osd {
|
||||
-GtkProgressBar-xspacing: 0;
|
||||
-GtkProgressBar-yspacing: 0;
|
||||
-GtkProgressBar-min-horizontal-bar-height: 3;
|
||||
}
|
||||
|
||||
&.trough {
|
||||
border: 1px solid alpha(border_normal($bg_color), 0.5);
|
||||
background-color: shade($bg_color, 1.08);
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
&.trough {
|
||||
border: 1px solid alpha(border_normal($bg_color), 0.5);
|
||||
background-color: shade($bg_color, 1.08);
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
.progressbar {
|
||||
@include linear-gradient($selected_bg_color);
|
||||
.progressbar {
|
||||
@include linear-gradient($selected_bg_color);
|
||||
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&.left {
|
||||
border-top-left-radius: $roundness;
|
||||
border-bottom-left-radius: $roundness;
|
||||
}
|
||||
&.left {
|
||||
border-top-left-radius: $roundness;
|
||||
border-bottom-left-radius: $roundness;
|
||||
}
|
||||
|
||||
&.right {
|
||||
border-top-right-radius: $roundness;
|
||||
border-bottom-right-radius: $roundness;
|
||||
}
|
||||
&.right {
|
||||
border-top-right-radius: $roundness;
|
||||
border-bottom-right-radius: $roundness;
|
||||
}
|
||||
|
||||
&.left.right { box-shadow: none; }
|
||||
&.left.right { box-shadow: none; }
|
||||
|
||||
&.vertical {
|
||||
@include linear-gradient($selected_bg_color, to right);
|
||||
&.vertical {
|
||||
@include linear-gradient($selected_bg_color, to right);
|
||||
|
||||
&.bottom {
|
||||
border-bottom-left-radius: $roundness;
|
||||
border-bottom-right-radius: $roundness;
|
||||
}
|
||||
&.bottom {
|
||||
border-bottom-left-radius: $roundness;
|
||||
border-bottom-right-radius: $roundness;
|
||||
}
|
||||
|
||||
&.top {
|
||||
border-top-left-radius: $roundness;
|
||||
border-top-right-radius: $roundness;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.top {
|
||||
border-top-left-radius: $roundness;
|
||||
border-top-right-radius: $roundness;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
GtkLevelBar {
|
||||
-GtkLevelBar-min-block-width: 34;
|
||||
-GtkLevelBar-min-block-height: 3;
|
||||
GtkLevelBar {
|
||||
-GtkLevelBar-min-block-width: 34;
|
||||
-GtkLevelBar-min-block-height: 3;
|
||||
|
||||
&.vertical {
|
||||
-GtkLevelBar-min-block-width: 3;
|
||||
-GtkLevelBar-min-block-height: 34;
|
||||
}
|
||||
}
|
||||
&.vertical {
|
||||
-GtkLevelBar-min-block-width: 3;
|
||||
-GtkLevelBar-min-block-height: 34;
|
||||
}
|
||||
}
|
||||
|
||||
.level-bar {
|
||||
&.trough {
|
||||
@include linear-gradient(shade($bg_color, 1.08), to top);
|
||||
.level-bar {
|
||||
&.trough {
|
||||
@include linear-gradient(shade($bg_color, 1.08), to top);
|
||||
|
||||
border: 1px solid alpha(border_normal($bg_color), 0.5);
|
||||
border-radius: $roundness;
|
||||
}
|
||||
border: 1px solid alpha(border_normal($bg_color), 0.5);
|
||||
border-radius: $roundness;
|
||||
}
|
||||
|
||||
&.fill-block {
|
||||
@include linear-gradient($selected_bg_color);
|
||||
&.fill-block {
|
||||
@include linear-gradient($selected_bg_color);
|
||||
|
||||
// FIXME: it would be nice to set make fill blocks bigger, but we'd need
|
||||
// :nth-child working on discrete indicators
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
// FIXME: it would be nice to set make fill blocks bigger, but we'd need
|
||||
// :nth-child working on discrete indicators
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
|
||||
&.indicator-discrete {
|
||||
&.horizontal { margin-right: 1px; }
|
||||
&.vertical { margin-bottom: 1px; }
|
||||
}
|
||||
&.indicator-discrete {
|
||||
&.horizontal { margin-right: 1px; }
|
||||
&.vertical { margin-bottom: 1px; }
|
||||
}
|
||||
|
||||
&.level-high {
|
||||
background-color: $success_color;
|
||||
border-color: transparent;
|
||||
}
|
||||
&.level-high {
|
||||
background-color: $success_color;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.level-low {
|
||||
background-color: $warning_color;
|
||||
border-color: transparent;
|
||||
}
|
||||
&.level-low {
|
||||
background-color: $warning_color;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.empty-fill-block {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.empty-fill-block {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scale {
|
||||
-GtkRange-slider-width: 16;
|
||||
-GtkRange-trough-border: 1;
|
||||
-GtkScale-slider-length: 16;
|
||||
.scale {
|
||||
-GtkRange-slider-width: 16;
|
||||
-GtkRange-trough-border: 1;
|
||||
-GtkScale-slider-length: 16;
|
||||
|
||||
padding: 0;
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
outline-offset: -1px;
|
||||
padding: 0;
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
outline-offset: -1px;
|
||||
|
||||
|
||||
&.slider {
|
||||
@include linear-gradient($base_color);
|
||||
@include border($base_color);
|
||||
&.slider {
|
||||
@include linear-gradient(shade($bg_color, 1.08));
|
||||
@include border($bg_color);
|
||||
|
||||
border-radius: 8px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .3);
|
||||
border-radius: 8px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .3);
|
||||
|
||||
&:insensitive { @include linear-gradient(shade($bg_color, 0.9)); }
|
||||
}
|
||||
&:insensitive { @include linear-gradient(shade($bg_color, 0.9)); }
|
||||
}
|
||||
|
||||
&.fine-tune {
|
||||
&, &.horizontal {
|
||||
&:active, &:active:hover {
|
||||
background-size: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.fine-tune {
|
||||
&, &.horizontal {
|
||||
&:active, &:active:hover {
|
||||
background-size: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mark { border-color: alpha(border_normal($bg_color), 0.5); }
|
||||
&.mark { border-color: alpha(border_normal($bg_color), 0.5); }
|
||||
|
||||
|
||||
&.trough {
|
||||
@include linear-gradient(shade($bg_color, 1.08));
|
||||
&.trough {
|
||||
@include linear-gradient(shade($bg_color, 1.08));
|
||||
|
||||
margin: 8px 0;
|
||||
border: 0;
|
||||
border-radius: $roundness;
|
||||
margin: 7px 0;
|
||||
border: 1px solid alpha(border_normal($bg_color), 0.5);
|
||||
border-radius: $roundness;
|
||||
|
||||
&:insensitive { @include linear-gradient(shade($bg_color, 0.9)); }
|
||||
&:insensitive { @include linear-gradient(shade($bg_color, 0.9)); }
|
||||
|
||||
&.vertical { margin: 0 8px; }
|
||||
}
|
||||
&.vertical { margin: 0 7px; }
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
&, &.left, &.bottom {
|
||||
@include linear-gradient($selected_bg_color);
|
||||
&.highlight {
|
||||
&, &.left, &.bottom {
|
||||
@include linear-gradient($selected_bg_color);
|
||||
|
||||
border-color: $selected_bg_color;
|
||||
border-color: $selected_bg_color;
|
||||
|
||||
&:insensitive {
|
||||
@include linear-gradient(shade($bg_color, 0.8));
|
||||
&:insensitive {
|
||||
@include linear-gradient(shade($bg_color, 0.8));
|
||||
|
||||
border-color: shade($bg_color, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
border-color: shade($bg_color, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,62 +5,62 @@
|
|||
$suffix: if($variant == "dark", "-dark", "");
|
||||
|
||||
@mixin toggle($type) {
|
||||
background-image: none;
|
||||
background-image: none;
|
||||
|
||||
-gtk-icon-source: url("../assets/#{$type}-unchecked#{$suffix}.png");
|
||||
-gtk-icon-source: url("../assets/#{$type}-unchecked#{$suffix}.png");
|
||||
|
||||
&:insensitive { -gtk-icon-source: url("../assets/#{$type}-unchecked-insensitive#{$suffix}.png"); }
|
||||
&:insensitive { -gtk-icon-source: url("../assets/#{$type}-unchecked-insensitive#{$suffix}.png"); }
|
||||
|
||||
&:checked, &:active {
|
||||
-gtk-icon-source: url("../assets/#{$type}-checked#{$suffix}.png");
|
||||
&:checked, &:active {
|
||||
-gtk-icon-source: url("../assets/#{$type}-checked#{$suffix}.png");
|
||||
|
||||
&:insensitive { -gtk-icon-source: url("../assets/#{$type}-checked-insensitive#{$suffix}.png"); }
|
||||
}
|
||||
&:insensitive { -gtk-icon-source: url("../assets/#{$type}-checked-insensitive#{$suffix}.png"); }
|
||||
}
|
||||
|
||||
&:inconsistent {
|
||||
-gtk-icon-source: url("../assets/#{$type}-mixed#{$suffix}.png");
|
||||
&:inconsistent {
|
||||
-gtk-icon-source: url("../assets/#{$type}-mixed#{$suffix}.png");
|
||||
|
||||
&:insensitive { -gtk-icon-source: url("../assets/#{$type}-mixed-insensitive#{$suffix}.png"); }
|
||||
}
|
||||
&:insensitive { -gtk-icon-source: url("../assets/#{$type}-mixed-insensitive#{$suffix}.png"); }
|
||||
}
|
||||
|
||||
&.menuitem {
|
||||
-gtk-icon-source: none;
|
||||
&.menuitem {
|
||||
-gtk-icon-source: none;
|
||||
|
||||
&:insensitive { -gtk-icon-source: none; }
|
||||
&:insensitive { -gtk-icon-source: none; }
|
||||
|
||||
&:checked, &:active {
|
||||
-gtk-icon-source: url("../assets/menuitem-#{$type}-checked.png");
|
||||
&:checked, &:active {
|
||||
-gtk-icon-source: url("../assets/menuitem-#{$type}-checked.png");
|
||||
|
||||
&:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-hover.png"); }
|
||||
&:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-hover.png"); }
|
||||
|
||||
&:insensitive { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-insensitive.png"); }
|
||||
}
|
||||
&:insensitive { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-insensitive.png"); }
|
||||
}
|
||||
|
||||
&:inconsistent {
|
||||
-gtk-icon-source: url("../assets/menuitem-#{$type}-mixed.png");
|
||||
&:inconsistent {
|
||||
-gtk-icon-source: url("../assets/menuitem-#{$type}-mixed.png");
|
||||
|
||||
&:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-hover.png"); }
|
||||
&:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-hover.png"); }
|
||||
|
||||
&:insensitive { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-insensitive.png"); }
|
||||
}
|
||||
}
|
||||
&:insensitive { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-insensitive.png"); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("checkradio") {
|
||||
* {
|
||||
-GtkCheckButton-indicator-size: 16;
|
||||
-GtkCheckMenuItem-indicator-size: 16;
|
||||
}
|
||||
* {
|
||||
-GtkCheckButton-indicator-size: 16;
|
||||
-GtkCheckMenuItem-indicator-size: 16;
|
||||
}
|
||||
|
||||
.radio { @include toggle("radio"); }
|
||||
.radio { @include toggle("radio"); }
|
||||
|
||||
.check { @include toggle("checkbox"); }
|
||||
.check { @include toggle("checkbox"); }
|
||||
|
||||
GtkIconView.content-view.cell.check {
|
||||
-gtk-icon-source: url("assets/grid-selection-unchecked#{$suffix}.png");
|
||||
GtkIconView.content-view.cell.check {
|
||||
-gtk-icon-source: url("assets/grid-selection-unchecked#{$suffix}.png");
|
||||
|
||||
&:active { -gtk-icon-source: url("assets/grid-selection-checked#{$suffix}.png"); }
|
||||
}
|
||||
&:active { -gtk-icon-source: url("assets/grid-selection-checked#{$suffix}.png"); }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -69,48 +69,48 @@ $suffix: if($variant == "dark", "-dark", "");
|
|||
*********/
|
||||
|
||||
@include exports("switch") {
|
||||
GtkSwitch {
|
||||
padding: 0;
|
||||
border-radius: $roundness;
|
||||
font: bold condensed;
|
||||
outline-offset: -4px;
|
||||
GtkSwitch {
|
||||
padding: 0;
|
||||
border-radius: $roundness;
|
||||
font: bold condensed;
|
||||
outline-offset: -4px;
|
||||
|
||||
&.slider {
|
||||
@include linear-gradient(shade($bg_color, 1.2));
|
||||
&.slider {
|
||||
@include linear-gradient(shade($bg_color, 1.2));
|
||||
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12);
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12);
|
||||
|
||||
&:insensitive {
|
||||
border-color: rgba(0,0,0,0.1);
|
||||
background-color: shade($bg_color, 0.9);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&:insensitive {
|
||||
border-color: rgba(0,0,0,0.1);
|
||||
background-color: shade($bg_color, 0.9);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.trough {
|
||||
@include linear-gradient(shade($bg_color, .95), to top);
|
||||
&.trough {
|
||||
@include linear-gradient(shade($bg_color, .95), to top);
|
||||
|
||||
border: 1px solid border_normal($bg_color);
|
||||
color: $fg_color;
|
||||
box-shadow: inset 1px 0 alpha($dark_shadow, .07),
|
||||
inset 0 1px alpha($dark_shadow, .08),
|
||||
inset -1px 0 alpha($dark_shadow, .07),
|
||||
inset 0 -1px alpha($dark_shadow, .05);
|
||||
border: 1px solid border_normal($bg_color);
|
||||
color: $fg_color;
|
||||
box-shadow: inset 1px 0 alpha($dark_shadow, .07),
|
||||
inset 0 1px alpha($dark_shadow, .08),
|
||||
inset -1px 0 alpha($dark_shadow, .07),
|
||||
inset 0 -1px alpha($dark_shadow, .05);
|
||||
|
||||
&:active {
|
||||
@include linear-gradient($selected_bg_color, to top);
|
||||
&:active {
|
||||
@include linear-gradient($selected_bg_color, to top);
|
||||
|
||||
border-color: shade($selected_bg_color, 0.9);
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
border-color: shade($selected_bg_color, 0.9);
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
|
||||
&:insensitive {
|
||||
@include linear-gradient(shade($bg_color, .9), to top);
|
||||
&:insensitive {
|
||||
@include linear-gradient(shade($bg_color, .9), to top);
|
||||
|
||||
border-color: border_insensitive($bg_color);
|
||||
color: mix($fg_color, $bg_color, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
border-color: border_insensitive($bg_color);
|
||||
color: mix($fg_color, $bg_color, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@
|
|||
&:hover, &:hover:focus {
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
color: $selected_bg-color;
|
||||
color: $selected_bg_color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,44 +3,44 @@
|
|||
***************/
|
||||
|
||||
@include exports("window") {
|
||||
%window {
|
||||
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22),
|
||||
0 0 0 1px $wm_border_focused;
|
||||
%window {
|
||||
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22),
|
||||
0 0 0 1px $wm_border_focused;
|
||||
|
||||
&:backdrop {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
|
||||
0 0 0 1px $wm_border_unfocused;
|
||||
}
|
||||
}
|
||||
&:backdrop {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
|
||||
0 0 0 1px $wm_border_unfocused;
|
||||
}
|
||||
}
|
||||
|
||||
.window-frame {
|
||||
@extend %window;
|
||||
.window-frame {
|
||||
@extend %window;
|
||||
|
||||
border: 0;
|
||||
border-radius: $roundness + 1;
|
||||
border: none;
|
||||
border-radius: $roundness $roundness 0 0;
|
||||
|
||||
/* this is used for the resize cursor area */
|
||||
margin: $spacing * 3;
|
||||
/* this is used for the resize cursor area */
|
||||
margin: $spacing * 3;
|
||||
|
||||
&.tiled { border-radius: 0; }
|
||||
&.tiled { border-radius: 0; }
|
||||
|
||||
&.csd {
|
||||
&.popup {
|
||||
@extend %window;
|
||||
&.csd {
|
||||
&.popup {
|
||||
@extend %window;
|
||||
|
||||
border-radius: 0;
|
||||
}
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.tooltip {
|
||||
border-radius: $roundness;
|
||||
box-shadow: none;
|
||||
}
|
||||
&.tooltip {
|
||||
border-radius: $roundness;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.message-dialog {
|
||||
@extend %window;
|
||||
&.message-dialog {
|
||||
@extend %window;
|
||||
|
||||
border-radius: $roundness;
|
||||
}
|
||||
}
|
||||
}
|
||||
border-radius: $roundness;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue