Various tweaks

pull/242/head
Satyajit Sahoo 2015-08-07 01:09:22 +05:30
parent bf32925cb7
commit 7f0f008de0
14 changed files with 952 additions and 935 deletions

View File

@ -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; }
}

View File

@ -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); }
}

View File

@ -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; }
}
}

View File

@ -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;
}
}

View File

@ -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);
}
}
}

View File

@ -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; }
}
}

View File

@ -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; }
}
}
}
}
}

View File

@ -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;

View File

@ -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; }
}

View File

@ -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);
}
}
}
}

View File

@ -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);
}
}
}
}
}

View File

@ -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);
}
}
}
}

View File

@ -102,7 +102,7 @@
&:hover, &:hover:focus {
background-image: none;
background-color: transparent;
color: $selected_bg-color;
color: $selected_bg_color;
box-shadow: none;
}

View File

@ -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;
}
}
}
}