[Frontend] IN-PROGRESS Theme changes continuing

open #95
Grid items;

platform/commonUI/general/res/sass/_mixins.scss

@@ -145,32 +145,6 @@
     background-repeat: $repeatDir;
 }
 
-@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
-    $ltnRatio: 7%;
-    $gradRatio: 5%;
-    $hovRatio: 7%;
-    $bgBase: $bg; //pullForward($bg, $ltnRatio);
-    $fgBase: $fg; // pullForward($fg, $ltnRatio);
-    $gradC1: lighten($bgBase, $gradRatio); // Container should be lighter higher up
-    $gradC2: $bgBase;
-    $cInvokeBase: #fff;
-
-    @include background-image(linear-gradient($gradC1, $gradC2));
-    @include border-radius($controlCr);
-    @include box-sizing(border-box);
-    @include boxShdwSubtle();
-    border: none;
-    //border-top: 1px solid lighten($gradC1, 2%);
-    color: $fg;
-    display: inline-block;
-    @if $hover == true {
-        &:not(.disabled):hover {
-            @include background-image(linear-gradient(pullForward($gradC1, $hovRatio), pullForward($gradC2, $hovRatio)));
-            color: pullForward($fgBase, $hovRatio);
-        }
-    }
-}
-
 @mixin sliderTrack($bg: $scrollbarTrackColorBg) {
     $b: 1px solid lighten($bg, 30%);
     @include border-radius(2px);
@@ -210,25 +184,6 @@
     }
 }
 
-@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorKey) {
-	// $ic: Icon color
-    @include border-radius($controlCr);
-    @include containerSubtle($bg, $fg, true);
-    @include text-shadow(rgba(black, 0.3) 0 1px 1px);
-	.icon {
-		color: $ic;
-	}
-	&:not(.disabled) {
-		&:not(.paused) {
-			&:hover {
-				.icon {
-					color: lighten($ic, $ltGamma);
-				}
-			}
-		}
-	}
-}
-
 @mixin boxIncised($sVal: 0.6) {
     @include box-shadow(inset rgba(black, $sVal) 0 1px 5px);
 }
@@ -267,6 +222,12 @@
     @include background-image(linear-gradient($deg, rgba($c, $a0), rgba($c, $a1) 100%));
 }
 
+@mixin txtShdw($sVal) {
+	@if $sVal != 'none' {
+		@include text-shadow($sVal);
+	}
+}
+
 @mixin txtShdwSubtle($sVal: 0.1) {
 	@if $sVal != 'none' {
 	    @include text-shadow(rgba(black, $sVal) 0 1px 2px);

platform/commonUI/general/res/sass/items/_item.scss

@@ -33,7 +33,8 @@
             $iconMargin: 40px;
             $iconD: ($d - ($iconMargin * 2)) * 0.85;
             $transTime: 200ms;
-            @include btnSubtle($colorItemBase);
+            //@include btnSubtle($colorItemBg);
+            @include btnSubtle($colorItemBg, $colorItemFg, $colorItemIcon);
             box-sizing: border-box;
             cursor: pointer;
             float: left;
@@ -44,7 +45,7 @@
             position: relative;
             &:hover .item-main {
 	            .item-type {
-		            color: lighten($colorKey, 10%) !important;
+		            color: lighten($colorKey, 10%);
                     .l-icon-link {
                         color: $colorIconLink;
                     }
@@ -62,6 +63,7 @@
             .bar {
                 &.top-bar {
                     bottom: auto;
+	                color: $colorItemSubIcons;
                     height: $ueBrowseGridItemTopBarH;
                     line-height: $ueBrowseGridItemTopBarH;
                     text-align: right;
@@ -85,14 +87,14 @@
             .item-main {
 	            $h: $ueBrowseGridItemLg;
 	            $lh: $h * 0.8;
-                //top: $ueBrowseGridItemTopBarH; bottom: $ueBrowseGridItemBottomBarH;
+                //top: $ueBrowseGridItemTopBarH; bottom: $ueBrowseGridItemBottomBarH; //
                 line-height: $lh;
 	            z-index: 1;
                 .item-type {
                     //@include trans-prop-nice("color", $transTime);
                     @include absPosDefault($iconMargin, false);
                     //@include test(red);
-                    //color: $colorItemFg;
+                    color: $colorItemIcon;
                     text-align: center;
                     font-size: $iconD * 0.95; //6em;
                     line-height: $iconD;
@@ -102,7 +104,6 @@
                     //line-height: $lh;
                     .l-icon-link {
                         // When the link icon is in the item-type icon holder
-                        //color: darken($colorIconLink, 25%);
                         color: $colorIconLink;
                         height: auto;
                         line-height: 100%;
@@ -117,27 +118,27 @@
                     //@include test();
                     @include trans-prop-nice("opacity", $transTime);
                     opacity: 0;
-	                //display: none;
+	                color: $colorItemOpenIcon;
                     font-size: 3em;
-                    //line-height: $lh;
                     left: auto; width: 50px;
                     pointer-events: none;
                     text-align: right;
                 }
             }
             .title {
-	            @include txtShdwSubtle();
+	            @include txtShdw($shdwItemText);
                 @include ellipsize();
-                color: lighten($colorBodyFg, 20%);
+                color: $colorItemFg;
             }
             .details {
                 @include ellipsize();
+	            color: $colorItemFgDetails;
                 font-size: 0.8em;
             }
 	        &.selected {
-		        $cfg: lighten($colorItemSelected, 35%);
+		        $cfg: lighten($colorItemBgSelected, 35%);
 		        $cfgh: lighten($cfg, 30%);
-		        @include btnSubtle($colorItemSelected);
+		        @include btnSubtle($colorItemBgSelected);
 		        color: $cfg;
 		        .item-type, .top-bar .icon:not(.alert) { color: $cfg }
 		        .item-main .item-open { color: $cfg }