[gnome-shell/wip/sass: 31/51] theme: better running, hover and active states for icons



commit 361ebf0895579c76cd223a3f05b835ab356c609c
Author: Jakub Steiner <jimmac gmail com>
Date:   Fri Oct 17 21:13:53 2014 +0200

    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 eff7cb5..305f514 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 674f5f2..4f61848 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; }
 


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]