From a6f572e49aea7ffec8551c6544d68460366cd0cc Mon Sep 17 00:00:00 2001 From: Jakub Steiner Date: Fri, 17 Oct 2014 21:13:53 +0200 Subject: [PATCH] theme: better running, hover and active states for icons - the active state behaves oddly though, not respecting the fill color, just changing alpha it seems... --- data/theme/_common.scss | 15 ++++++++++----- data/theme/gnome-shell.css | 13 ++++++++----- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/data/theme/_common.scss b/data/theme/_common.scss index eff7cb587..305f51448 100644 --- a/data/theme/_common.scss +++ b/data/theme/_common.scss @@ -457,7 +457,7 @@ StScrollBar { #dash { @extend %overview-panel; - padding: 4px 0; + padding: 4px; border-left: 0px; border-radius: 0px 9px 9px 0px; @@ -517,8 +517,11 @@ StScrollBar { .search-provider-icon, .list-search-result { @extend %icon_tile; - &:active, &:checked { background-color: transparentize($osd_bg_color,.1); } - &:focus, &:selected, &:hover { background-color: transparentize($osd_bg_color,.5); } + &:active, &:checked { background-color: transparentize(darken($osd_bg_color,10%),.1); } + &:focus, &:selected, &:hover { + background-color: transparentize($fg_color,.9); + transition-duration: 200ms; + } } .app-well-app, .show-apps, @@ -531,13 +534,15 @@ StScrollBar { } &:active > .overview-icon, &:checked > .overview-icon { - background-color: transparentize($osd_bg_color,.1); + background-color: transparentize(darken($osd_bg_color,10%),.1); //FIXME not working? + box-shadow: inset 0 1px 2px $osd_borders_color; } &:hover > .overview-icon, &.running:hover > .overview-icon, &:focus > .overview-icon, &:selected > .overview-icon { - background-color: transparentize($osd_bg_color,.5); + background-color: transparentize($fg_color,.9); + transition-duration: 200ms; border-image: none; background-image: none; } diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index 674f5f2e9..4f6184876 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -1689,7 +1689,7 @@ StScrollBar { /* DASHBOARD */ #dash { - padding: 4px 0; + padding: 4px; border-left: 0px; border-radius: 0px 9px 9px 0px; } #dash:rtl { @@ -1738,12 +1738,13 @@ StScrollBar { .search-provider-icon:active, .search-provider-icon:checked, .list-search-result:active, .list-search-result:checked { - background-color: rgba(46, 52, 54, 0.9); } + background-color: rgba(23, 25, 26, 0.9); } .search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover, .list-search-result:focus, .list-search-result:selected, .list-search-result:hover { - background-color: rgba(46, 52, 54, 0.5); } + background-color: rgba(238, 238, 236, 0.1); + transition-duration: 200ms; } .app-well-app.running > .overview-icon, .show-apps.running > .overview-icon, @@ -1754,7 +1755,8 @@ StScrollBar { .show-apps:checked > .overview-icon, .grid-search-result:active > .overview-icon, .grid-search-result:checked > .overview-icon { - background-color: rgba(46, 52, 54, 0.9); } + background-color: rgba(23, 25, 26, 0.9); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); } .app-well-app:hover > .overview-icon, .app-well-app.running:hover > .overview-icon, .app-well-app:focus > .overview-icon, .app-well-app:selected > .overview-icon, .show-apps:hover > .overview-icon, .show-apps.running:hover > .overview-icon, @@ -1764,7 +1766,8 @@ StScrollBar { .grid-search-result.running:hover > .overview-icon, .grid-search-result:focus > .overview-icon, .grid-search-result:selected > .overview-icon { - background-color: rgba(46, 52, 54, 0.5); + background-color: rgba(238, 238, 236, 0.1); + transition-duration: 200ms; border-image: none; background-image: none; }