From 7f0f008de08c33ef5e0a65d7c67d5a45d9b83e7e Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Fri, 7 Aug 2015 01:09:22 +0530 Subject: [PATCH] Various tweaks --- gtk-3.0/scss/widgets/_actionbar.scss | 2 +- gtk-3.0/scss/widgets/_base.scss | 112 +++--- gtk-3.0/scss/widgets/_button.scss | 529 ++++++++++++++------------- gtk-3.0/scss/widgets/_calendar.scss | 36 +- gtk-3.0/scss/widgets/_choosers.scss | 184 +++++----- gtk-3.0/scss/widgets/_entry.scss | 108 +++--- gtk-3.0/scss/widgets/_infobar.scss | 44 +-- gtk-3.0/scss/widgets/_menu.scss | 10 +- gtk-3.0/scss/widgets/_misc.scss | 216 +++++------ gtk-3.0/scss/widgets/_notebook.scss | 188 +++++----- gtk-3.0/scss/widgets/_progress.scss | 256 ++++++------- gtk-3.0/scss/widgets/_toggle.scss | 140 +++---- gtk-3.0/scss/widgets/_toolbar.scss | 2 +- gtk-3.0/scss/widgets/_window.scss | 60 +-- 14 files changed, 952 insertions(+), 935 deletions(-) diff --git a/gtk-3.0/scss/widgets/_actionbar.scss b/gtk-3.0/scss/widgets/_actionbar.scss index 6745b23..cfae302 100644 --- a/gtk-3.0/scss/widgets/_actionbar.scss +++ b/gtk-3.0/scss/widgets/_actionbar.scss @@ -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; } } diff --git a/gtk-3.0/scss/widgets/_base.scss b/gtk-3.0/scss/widgets/_base.scss index bad015d..9897e50 100755 --- a/gtk-3.0/scss/widgets/_base.scss +++ b/gtk-3.0/scss/widgets/_base.scss @@ -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); } } diff --git a/gtk-3.0/scss/widgets/_button.scss b/gtk-3.0/scss/widgets/_button.scss index 60c81cd..e62bf60 100755 --- a/gtk-3.0/scss/widgets/_button.scss +++ b/gtk-3.0/scss/widgets/_button.scss @@ -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; } + } } diff --git a/gtk-3.0/scss/widgets/_calendar.scss b/gtk-3.0/scss/widgets/_calendar.scss index 909ea9c..d9705f4 100644 --- a/gtk-3.0/scss/widgets/_calendar.scss +++ b/gtk-3.0/scss/widgets/_calendar.scss @@ -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; + } } diff --git a/gtk-3.0/scss/widgets/_choosers.scss b/gtk-3.0/scss/widgets/_choosers.scss index 6b00d52..53f1de2 100644 --- a/gtk-3.0/scss/widgets/_choosers.scss +++ b/gtk-3.0/scss/widgets/_choosers.scss @@ -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); + } + } } diff --git a/gtk-3.0/scss/widgets/_entry.scss b/gtk-3.0/scss/widgets/_entry.scss index 6605f01..e8d7562 100755 --- a/gtk-3.0/scss/widgets/_entry.scss +++ b/gtk-3.0/scss/widgets/_entry.scss @@ -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; } + } } diff --git a/gtk-3.0/scss/widgets/_infobar.scss b/gtk-3.0/scss/widgets/_infobar.scss index faf4e5c..1579c01 100644 --- a/gtk-3.0/scss/widgets/_infobar.scss +++ b/gtk-3.0/scss/widgets/_infobar.scss @@ -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; } + } + } + } + } } diff --git a/gtk-3.0/scss/widgets/_menu.scss b/gtk-3.0/scss/widgets/_menu.scss index 35a2581..8b08c5c 100755 --- a/gtk-3.0/scss/widgets/_menu.scss +++ b/gtk-3.0/scss/widgets/_menu.scss @@ -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; @@ -199,7 +199,7 @@ .view, .list { background-color: transparent; background-image: none; - color: $menu_fg_color; + color: $menu_fg_color; } .list-row { diff --git a/gtk-3.0/scss/widgets/_misc.scss b/gtk-3.0/scss/widgets/_misc.scss index 8eb1de3..177f8de 100644 --- a/gtk-3.0/scss/widgets/_misc.scss +++ b/gtk-3.0/scss/widgets/_misc.scss @@ -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; } } diff --git a/gtk-3.0/scss/widgets/_notebook.scss b/gtk-3.0/scss/widgets/_notebook.scss index e3c155e..b0ecfbb 100644 --- a/gtk-3.0/scss/widgets/_notebook.scss +++ b/gtk-3.0/scss/widgets/_notebook.scss @@ -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); + } + } + } } diff --git a/gtk-3.0/scss/widgets/_progress.scss b/gtk-3.0/scss/widgets/_progress.scss index f6943df..25064a9 100644 --- a/gtk-3.0/scss/widgets/_progress.scss +++ b/gtk-3.0/scss/widgets/_progress.scss @@ -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); + } + } + } + } } diff --git a/gtk-3.0/scss/widgets/_toggle.scss b/gtk-3.0/scss/widgets/_toggle.scss index c9e40f0..a13a427 100755 --- a/gtk-3.0/scss/widgets/_toggle.scss +++ b/gtk-3.0/scss/widgets/_toggle.scss @@ -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); + } + } + } } diff --git a/gtk-3.0/scss/widgets/_toolbar.scss b/gtk-3.0/scss/widgets/_toolbar.scss index f8866ea..e391f3d 100755 --- a/gtk-3.0/scss/widgets/_toolbar.scss +++ b/gtk-3.0/scss/widgets/_toolbar.scss @@ -102,7 +102,7 @@ &:hover, &:hover:focus { background-image: none; background-color: transparent; - color: $selected_bg-color; + color: $selected_bg_color; box-shadow: none; } diff --git a/gtk-3.0/scss/widgets/_window.scss b/gtk-3.0/scss/widgets/_window.scss index 0b8f88b..0921bd8 100755 --- a/gtk-3.0/scss/widgets/_window.scss +++ b/gtk-3.0/scss/widgets/_window.scss @@ -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; + } + } + } }