From c3bc33386c4e55617471e4fabab469dbd1701666 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Sun, 23 Nov 2014 22:36:45 +0530 Subject: [PATCH] Fix linked buttons and other fixes --- gtk-3.0/scss/_base.scss | 93 ++++---------------------- gtk-3.0/scss/_button.scss | 21 ++++-- gtk-3.0/scss/_entry.scss | 6 ++ gtk-3.0/scss/_functions.scss | 9 +++ gtk-3.0/scss/_grid.scss | 19 +++++- gtk-3.0/scss/_menu.scss | 11 ++++ gtk-3.0/scss/_sidebar.scss | 17 +++++ gtk-3.0/scss/_spinner.scss | 26 ++++++++ gtk-3.0/scss/_toggle.scss | 63 +++++++++++++++--- gtk-3.0/scss/_toolbar.scss | 5 ++ gtk-3.0/scss/_view.scss | 124 +++++++++++++++++++++-------------- gtk-3.0/scss/_window.scss | 8 +++ 12 files changed, 256 insertions(+), 146 deletions(-) create mode 100644 gtk-3.0/scss/_spinner.scss diff --git a/gtk-3.0/scss/_base.scss b/gtk-3.0/scss/_base.scss index 521af8f..1407017 100755 --- a/gtk-3.0/scss/_base.scss +++ b/gtk-3.0/scss/_base.scss @@ -1,6 +1,11 @@ @import "functions"; @import "global"; + +/************** + ! GTK settings +***************/ + * { -GtkArrow-arrow-scaling: 0.5; -GtkButton-child-displacement-x: 0; @@ -11,8 +16,6 @@ -GtkButton-interior-focus: true; -GtkButtonBox-child-min-height: 24; -GtkButtonBox-child-internal-pad-y: 1; - -GtkCheckButton-indicator-size: 16; - -GtkCheckMenuItem-indicator-size: 14; -GtkExpander-expander-size: 8; -GtkMenu-horizontal-padding: 0; -GtkMenu-vertical-padding: 0; @@ -37,10 +40,6 @@ -GtkWindow-resize-grip-width: 0; -WnckTasklist-fade-overlay-rect: 0; - /* legacy stuff */ - -GtkWidget-focus-line-width: 1; - -GtkWidget-focus-padding: 0; - outline-color: alpha($selected_bg_color, 0.5); outline-style: dashed; outline-width: 1px; @@ -48,9 +47,11 @@ outline-radius: 2px; } -/*************** - * base states * - ***************/ + +/************* + ! Base states + *************/ + %selected_items { &, &:focus { background-color: $selected_bg_color; @@ -88,7 +89,7 @@ } .gtkstyle-fallback { - background-color: $bg_color; + background-color: alpha($bg_color, .5); color: $fg_color; &:prelight { @@ -129,75 +130,3 @@ GtkLabel { opacity: 0.5; text-shadow: none; } - -.view { - color: $text_color; - background-color: $base_color; - - &:selected { @extend %selected_items; } -} - -.rubberband { - border: 1px solid $selected_bg_color; - background-color: alpha($selected_bg_color, 0.2); -} - -/* used by GtkScrolledWindow, shown when content is touch-dragged past boundaries. */ -.overshoot { background-color: alpha($selected_bg_color, 0.2); } - -GtkAssistant { - .sidebar { - background-color: $base_color; - border-top: 1px solid border_normal($base_color); - - &:dir(ltr) { border-right: 1px solid border_normal($base_color); } - &:dir(rtl) { border-left: 1px solid border_normal($base_color); } - - GtkLabel { - padding: $spacing ($spacing * 2); - - &.highlight { background-color: mix($bg_color, $fg_color, 0.80); } - } - } - - &.csd .sidebar { border-top-style: none; } -} - -GtkTextView { - /* this will get overridden by .view, needed by gedit line numbers */ - background-color: mix($bg_color, $base_color, 0.50); -} - - -GtkFlowBox .grid-child { - padding: 3px; - border-radius: 3px; - - &:selected { - @extend %selected_items; - - outline-offset: -2px; - } -} - -/********************* - * spinner animation * - *********************/ -@keyframes spin { - to { -gtk-icon-transform: rotate(1turn); } -} - -.spinner { - background-image: none; - background-color: blue; - opacity: 0; // non spinning spinner makes no sense - - -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); - - &:active { - opacity: 1; - animation: spin 1s linear infinite; - - &:insensitive { opacity: 0.5; } - } -} diff --git a/gtk-3.0/scss/_button.scss b/gtk-3.0/scss/_button.scss index 8efdfdc..5546310 100755 --- a/gtk-3.0/scss/_button.scss +++ b/gtk-3.0/scss/_button.scss @@ -1,4 +1,10 @@ @import "functions"; +@import "global"; + + +/********* + ! Buttons +**********/ @mixin linked_button($bg, $shadow) { border: 1px solid border_normal($bg); @@ -47,7 +53,9 @@ } &:active, &:active:hover, - &:active:focus, &:active:hover:focus { + &:active:focus, &:active:hover:focus, + &:checked, &:checked:hover, + &:checked:focus, &:checked:hover:focus { box-shadow: inset -1px 0 border_active($bg), inset 1px 0 alpha($shadow, .07), inset 0 1px alpha($shadow, .08), @@ -58,9 +66,11 @@ &:last-child, &:only-child, &:insensitive:last-child, &:insensitive:only-child, - &:active *:insensitive:last-child, &:active *:insensitive:only-child { box-shadow: none; } + &:active *:insensitive:last-child, &:active *:insensitive:only-child, + &:checked *:insensitive:last-child, &:checked *:insensitive:only-child { box-shadow: none; } - &:active:last-child, &:active:only-child { + &:active:last-child, &:active:only-child, + &:checked:last-child, &:checked:only-child { box-shadow: inset 1px 0 alpha($shadow, .07), inset 0 1px alpha($shadow, .08), inset -1px 0 alpha($shadow, .07); @@ -90,9 +100,7 @@ &:checked, &:active { @include linear-gradient(shade($bg, .95)); - } - &:active { box-shadow: inset 1px 0 alpha($dark_shadow, .07), inset 0 1px alpha($dark_shadow, .08), inset -1px 0 alpha($dark_shadow, .07), @@ -106,7 +114,8 @@ box-shadow: none; } - &:active *:insensitive { + &:active *:insensitive, + &:checked *:insensitive { @include linear-gradient(shade($bg, .8)); box-shadow: none; diff --git a/gtk-3.0/scss/_entry.scss b/gtk-3.0/scss/_entry.scss index f86563b..ce11777 100755 --- a/gtk-3.0/scss/_entry.scss +++ b/gtk-3.0/scss/_entry.scss @@ -1,4 +1,10 @@ @import "functions"; +@import "global"; + + +/******* + ! Entry +********/ @mixin linked_entry($bg) { border-width: 1px; diff --git a/gtk-3.0/scss/_functions.scss b/gtk-3.0/scss/_functions.scss index 5d90e85..0c81dcd 100755 --- a/gtk-3.0/scss/_functions.scss +++ b/gtk-3.0/scss/_functions.scss @@ -1,5 +1,14 @@ @import "global"; +$modules: () !default; + +@mixin exports($name) { + @if (not index($modules, $name)) { + $modules: append($modules, $name) !global; + @content; + } +} + @function alpha($color, $amount) { @if type-of($color) == "color" { @return fade-out($color, (1 - $amount)); diff --git a/gtk-3.0/scss/_grid.scss b/gtk-3.0/scss/_grid.scss index 7975977..1f60beb 100644 --- a/gtk-3.0/scss/_grid.scss +++ b/gtk-3.0/scss/_grid.scss @@ -1,4 +1,10 @@ @import "functions"; +@import "global"; + + +/****************** + ! Grid and flowbox +*******************/ .list { background-color: shade($bg_color, 0.97); @@ -26,4 +32,15 @@ } } -.grid-child { padding: $spacing; } +.grid-child { + &, GtkFlowBox & { + padding: $spacing; + border-radius: $roundness; + + &:selected { + @extend %selected_items; + + outline-offset: -2px; + } + } +} diff --git a/gtk-3.0/scss/_menu.scss b/gtk-3.0/scss/_menu.scss index 3859a6f..94c7f6d 100755 --- a/gtk-3.0/scss/_menu.scss +++ b/gtk-3.0/scss/_menu.scss @@ -1,6 +1,12 @@ @import "functions"; +@import "global"; @import "entry"; + +/****** + ! Menu +*******/ + GtkTreeMenu, GtkMenuToolButton, GtkComboBox { &.menu, .menu { background-color: $menu_bg_color; @@ -113,6 +119,11 @@ GtkTreeMenu, GtkMenuToolButton, GtkComboBox { GtkModelMenuItem GtkBox GtkImage { padding-right: $spacing; } + +/********* + ! Popover +**********/ + GtkPopover { @include border($menu_bg_color); diff --git a/gtk-3.0/scss/_sidebar.scss b/gtk-3.0/scss/_sidebar.scss index 78619cd..4cb626d 100755 --- a/gtk-3.0/scss/_sidebar.scss +++ b/gtk-3.0/scss/_sidebar.scss @@ -1,4 +1,10 @@ @import "functions"; +@import "global"; + + +/********* + ! Sidebar +**********/ .sidebar { &, &.view, & .view, & GtkScrolledWindow { @@ -51,6 +57,17 @@ background-color: $bg_color; color: mix($fg_color, $bg_color, 0.1); + &:dir(ltr) { border-width: 0 1px 0 0; } + &:dir(rtl) { border-width: 0 0 0 1px; } + + GtkLabel { + padding: $spacing ($spacing * 2); + + &.highlight { background-color: mix($bg_color, $fg_color, 0.80); } + } + + &.csd .sidebar { border-top-style: none; } + .highlight { font: bold; } } } diff --git a/gtk-3.0/scss/_spinner.scss b/gtk-3.0/scss/_spinner.scss new file mode 100644 index 0000000..f8b00e7 --- /dev/null +++ b/gtk-3.0/scss/_spinner.scss @@ -0,0 +1,26 @@ +@import "functions"; +@import "global"; + + +/******************* + ! Spinner animation +********************/ + +@keyframes spin { + to { -gtk-icon-transform: rotate(1turn); } +} + +.spinner { + background-image: none; + background-color: $selected_bg_color; + opacity: 0; // non spinning spinner makes no sense + + -gtk-icon-source: -gtk-icontheme("process-working-symbolic"); + + &:active { + opacity: 1; + animation: spin 1s linear infinite; + + &:insensitive { opacity: 0.5; } + } +} diff --git a/gtk-3.0/scss/_toggle.scss b/gtk-3.0/scss/_toggle.scss index a3af16a..4ef007a 100755 --- a/gtk-3.0/scss/_toggle.scss +++ b/gtk-3.0/scss/_toggle.scss @@ -1,6 +1,16 @@ -/************************* - * Check and Radio items * - *************************/ +@import "functions"; +@import "global"; + + +/*********************** + ! Check and Radio items +************************/ + +* { + -GtkCheckButton-indicator-size: 16; + -GtkCheckMenuItem-indicator-size: 14; +} + @mixin toggle($type, $bg, $fg) { color: $fg; background-image: none; @@ -32,9 +42,46 @@ } -.radio { - @include toggle("radio", $bg_color, $fg_color); -} -.check { - @include toggle("checkbox", $bg_color, $fg_color); +.radio { @include toggle("radio", $bg_color, $fg_color); } + +.check { @include toggle("checkbox", $bg_color, $fg_color); } + + +/******** + ! Switch +*********/ + +GtkSwitch { + padding: 0; + border-radius: $roundness; + font: bold condensed; + outline-offset: -4px; + + &.slider { + border: 1px solid shade($bg_color, 0.8); + background-color: shade($bg_color, 1.08); + + &:insensitive { + border-color: shade($bg_color, 0.85); + background-color: shade($bg_color, 0.9); + } + } + + &.trough { + border-color: shade($bg_color, 0.8); + background-color: shade($bg_color, 0.95); + color: $fg_color; + + &:active { + border-color: shade($selected_bg_color, 0.9); + background-color: $selected_bg_color; + color: $selected_fg_color; + } + + &:insensitive { + border-color: shade($bg_color, 0.85); + background-color: shade($bg_color, 0.9); + color: mix($fg_color, $bg_color, 0.5); + } + } } diff --git a/gtk-3.0/scss/_toolbar.scss b/gtk-3.0/scss/_toolbar.scss index 0590dbd..4721a6d 100755 --- a/gtk-3.0/scss/_toolbar.scss +++ b/gtk-3.0/scss/_toolbar.scss @@ -1,6 +1,11 @@ @import "functions"; +@import "global"; @import "button"; +/********* + ! Toolbar +**********/ + @mixin toolbar($bg, $fg) { @include linear-gradient($bg); @include border($bg); diff --git a/gtk-3.0/scss/_view.scss b/gtk-3.0/scss/_view.scss index 169e180..5ba4ad2 100644 --- a/gtk-3.0/scss/_view.scss +++ b/gtk-3.0/scss/_view.scss @@ -1,4 +1,17 @@ @import "functions"; +@import "global"; + + +/*************** + ! Generic views +****************/ + +.view { + color: $text_color; + background-color: $base_color; + + &:selected { @extend %selected_items; } +} .cell { border-width: 0; @@ -24,6 +37,68 @@ row { } } +.content-view { + &.view { + background-color: $base_color; + + &:prelight { background-color: alpha($selected_bg_color, 0.6); } + + &:selected, &:active { background-color: $selected_bg_color; } + + &:insensitive { background-color: shade($base_color, 0.9); } + + &.check { + &, &:active, &:prelight, &:insensitive, &:selected { background-color: transparent; } + } + } + + .subtitle { + font: smaller; + padding: 0 12px; + } +} + +GtkIconView { + &.content-view.check { @extend .content-view.check; } + + &.view.cell { + &:selected, &:selected:focus { + border: none; + border-radius: 2px; + background-image: none; + background-color: $selected_bg_color; + color: $selected_fg_color; + } + } +} + +.rubberband { + &, &.view, &.content-view.view { + border: 1px solid $selected_bg_color; + border-radius: 0; + background-color: alpha($selected_bg_color, 0.3); + } +} + +/* used by GtkScrolledWindow, shown when content is touch-dragged past boundaries. */ +.overshoot { background-color: alpha($selected_bg_color, 0.3); } + +GdMainIconView.content-view { -GdMainIconView-icon-size: 40; } + +/* this will get overridden by .view, needed by gedit line numbers */ +GtkTextView { background-color: mix($bg_color, $base_color, 0.50); } + +GtkDrawingArea, GtkHTML { + @extend .view; + + &:insensitive { background-color: shade($base_color, 0.9); } +} + + +/********************* + ! Column view headers +**********************/ + column-header { .button { &, &:active { @@ -48,52 +123,3 @@ column-header { &:last-child .button { border-width: 0 0 1px 0; } } } - -.content-view { - &.view { - background-color: $base_color; - - &:prelight { background-color: alpha($selected_bg_color, 0.6); } - - &:selected, &:active { background-color: $selected_bg_color; } - - &:insensitive { background-color: shade($base_color, 0.9); } - - &.check { - &, &:active, &:prelight, &:insensitive, &:selected { background-color: transparent; } - } - } - - .subtitle { - font: smaller; - padding: 0 12px; - } -} - -GtkIconView { - &.content-view.check { - &, &:active, &:prelight, &:insensitive, &:selected { background-color: transparent; } - } - - &.view.cell { - &:selected, &:selected:focus { - border: none; - border-radius: 2px; - background-color: $selected_bg_color; - background-image: none; - color: $selected_fg_color; - } - } -} - -.rubberband { - &, &.view, &.content-view.view { - border-width: 1px; - border-style: solid; - border-color: $selected_bg_color; - border-radius: 0; - background-color: alpha($selected_bg_color, 0.3); - } -} - -GdMainIconView.content-view { -GdMainIconView-icon-size: 40; } diff --git a/gtk-3.0/scss/_window.scss b/gtk-3.0/scss/_window.scss index cad2ef9..fc31783 100755 --- a/gtk-3.0/scss/_window.scss +++ b/gtk-3.0/scss/_window.scss @@ -1,3 +1,11 @@ +@import "functions"; +@import "global"; + + +/************** + ! Window frame +***************/ + .window-frame { border: none; border-radius: $roundness $roundness 0 0;