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