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



commit 43346b4120ba852fe9775fefae8abb6269b5bbb5
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    |   20 +++++++++++++-------
 data/theme/gnome-shell.css |   18 +++++++++++-------
 2 files changed, 24 insertions(+), 14 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index 2414bb4..bb642bd 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,22 +534,25 @@ 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;
     }
     
   }
   
-  .app-well-app-running-dot {
-    width: 10px; height: 5px;
+  .app-well-app-running-dot { //running apps indicator
+    width: 10px; height: 3px;
     background-color: $selected_bg_color;
+    margin-bottom: 2px; //FIXME will happen :)
   }
   
   %icon_tile {
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index c02ca63..025f670 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,14 +1766,16 @@ 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; }
 
 .app-well-app-running-dot {
   width: 10px;
-  height: 5px;
-  background-color: #215d9c; }
+  height: 3px;
+  background-color: #215d9c;
+  margin-bottom: 2px; }
 
 .search-provider-icon,
 .list-search-result, .app-well-app > .overview-icon,


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