[gnome-shell/wip/sassWithSomeFixes: 44/62] theme: overview styling

[Carlos Soriano Sánchez <csoriano src gnome org>]

commit 6b7c76d19844c308f81f2492021f1ab016c3a3f8
Author: Jakub Steiner <jimmac gmail com>
Date:   Tue Oct 14 18:52:34 2014 +0200

    theme: overview styling
    
    - still some quirks
    - boy is this unstructured mess a pain to clean up :(

 data/theme/_common.scss          |  273 ++++++++++++++++++++++++-
 data/theme/_drawing.scss         |    2 +-
 data/theme/_gnome-shell-old.scss |  419 --------------------------------------
 3 files changed, 265 insertions(+), 429 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index 43a50d0..b089495 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -66,15 +66,7 @@ StEntry {
   //&:hover { @include entry(hover);}
   &:focus { @include entry(focus,$fc:transparentize($fg_color,0.5));}
   &:insensitive { @include entry(insensitive);}
-  
-  .search-entry {
-    padding: 7px 9px;
-    border-radius: 24px;
-    &:focus {
-      padding: 6px 8px;
-      border-width: 2px;
-    }
-  }
+ 
 }
 
 
@@ -367,4 +359,267 @@ StScrollBar {
 .popup-menu-arrow { width: 16px; height: 16px; }
 .popup-menu-icon { icon-size: 1.09em; }
 
+//close buttons
+
+.window-close, .notification-close {
+  background-image: url("close-window.svg");
+  background-size: 32px;
+  height: 32px;
+  width: 32px;
+}
+  .window-close { 
+    -shell-close-overlap: 16px;
+    &:rtl { -st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5); }
+  }
+  .notification-close {
+    -shell-close-overlap-x: 14px;
+    -shell-close-overlap-y: -12px;
+    
+    &:rtl { -shell-close-overlap-x: -14px; }
+  }
+
+/* OVERVIEW */
+
+#overview {
+  spacing: 24px; //
+
+}
+  .window-picker { //container around window thumbnails
+    -horizontal-spacing: 32px;
+    -vertical-spacing: 32px;
+    padding-left: 32px;
+    padding-right: 32px;
+    padding-bottom: 48px;
+    
+    &.external-monitor { padding: 32px; }
+  }
+
+  .messages-indicator { color: transparentize($fg_color,.2); height: 32px; }
+  .messages-indicator-contents { spacing: 12px; padding-bottom: 12px; }
+
+  //search entry
+  .search-entry {
+    width: 320px;
+    padding: 7px 9px;
+    border-radius: 24px;
+    &:focus {
+      padding: 6px 8px;
+      border-width: 2px;
+    }
+    
+    .search-entry-icon { icon-size: 1em; padding: 0 4px; color: transparentize($fg_color,.3); }
+    
+    &:hover, &:focus {
+      .search-entry-icon { color: $fg_color; }
+    }
+  }
+  
+  //search results
+  
+  #searchResultsBin {
+    max-width: 1000px;
+  }
+
+  #searchResultsContent {
+      padding-left: 20px;
+      padding-right: 20px;
+      spacing: 16px;
+  }
+  
+  .search-selection { spacing: 16px; } // This should be equal to #searchResultsContent spacing
+  .search-selection-content { spacing: 32px; } // This is the space between the provider icon and the 
results container
+  .search-statustext { // "no results"
+    @extend %status_text;
+  }
+  .list-search-results { spacing: 3px; }
+  
+  .search-section-separator {
+    -gradient-height: 1px;
+    -gradient-start: rgba(255,255,255,0);
+    -gradient-end: rgba(255,255,255,0.1);
+    -margin-horizontal: 1.5em;
+    height: 1px;
+  }
+  
+  .list-search-result-content { spacing: 12px; padding: 12px; }
+  .list-search-result-title { font-size: 1.5em; color: darken($fg_color,5%); }
+  .list-search-result-description { color: darken($fg_color,15%); }
+  .search-provider-icon { padding: 15px; }
+  .search-provider-icon-more {
+    width: 16px;
+    height: 16px;
+    background-image: url("more-results.svg");
+  }
+  
+
+  /* DASHBOARD */
+  
+  #dash {
+    color: red;
+    padding: 4px 0;
+    color: $osd_fg_color;
+    background-color: $osd_bg_color;
+    border: 1px solid transparentize($fg_color,0.8);
+    border-left: 0px;
+    border-radius: 0px 9px 9px 0px;
+    
+    &:rtl {
+      border-left-width: 1px;
+      border-right-width: 0;
+      border-radius: 9px 0 0 9px;
+    }
+    
+    .placeholder {
+      background-image: url("dash-placeholder.svg");
+      background-size: contain;
+      height: 24px;
+    }
+    
+    .empty-dash-drop-target {
+      width: 24px;
+      height: 24px;
+    }
+    
+    .overview-icon {
+      &:hover {
+        background-color: transparentize($osd_bg_color,0.6);
+      }
+    }
+  }
+  
+  .dash-label { //osd tooltip
+    border-radius: 7px;
+    padding: 4px 12px;
+    background-color: transparentize($osd_bg_color,0.3);
+    text-align: center;
+    -x-offset: 8px;
+  }
+  
+  /* App Vault/Grid */
+  .icon-grid {
+    spacing: 30px;
+    -shell-grid-horizontal-item-size: 136px;
+    -shell-grid-vertical-item-size: 136px;
+    
+    //.overview-icon { icon-size: 96px; } FIXME no effect
+  }
+  //.app-display { spacing: 20px; }
+
+  .app-view-controls { //favorties | all toggle container
+    padding-bottom: 32px;
+  }
+  .app-view-control { //favorties | all toggle button
+    padding: 4px 32px; 
+    &:checked { @include button(active); }
+    &:first-child { 
+      border-right-width: 0;
+      border-radius: 3px 0 0 3px;
+    }
+    &:last-child {
+     border-radius: 0 3px 3px 0;
+    }
+  }
+
+  //Icon tile
+  .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); }
+  }
+  .app-well-app, 
+  .show-apps,
+  .grid-search-result {
+    & > .overview-icon { 
+      @extend %icon_tile;
+    }
+    &:active > .overview-icon, 
+    &:checked > .overview-icon {
+      background-color: transparentize($osd_bg_color,.1);
+    }
+    &:hover > .overview-icon, 
+    &:focus > .overview-icon, 
+    &:selected > .overview-icon { 
+      background-color: transparentize($osd_bg_color,.5); 
+    }
+    
+  }
+  
+  %icon_tile {
+    border-radius: 4px;
+    padding: 6px;
+    border: 1px solid transparent;
+    transition-duration: 100ms;
+    text-align: center;
+  }
+  
+  .app-well-app.running > .overview-icon {
+    text-shadow: black 0px 2px 2px;
+    border-image: url("panel-button-border.svg") 6 10 0 2; //fixme needs to not be blurry and a little 
narrower
+  }
+  .app-well-app.app-folder > .overview-icon {
+    background-color: transparentize($osd_bg_color,.6);
+  }
+  
+  .show-apps:checked .show-apps-icon,
+  .show-apps:focus .show-apps-icon {
+    color: white;
+    transition-duration: 100ms;
+  }
+
+  
+  // Collections
+  .app-folder-popup { //expanded collection
+    -arrow-border-radius: 8px;
+    -arrow-background-color: transparentize($osd_bg_color,0.7);
+    -arrow-base: 24px;
+    -arrow-rise: 11px;
+  }
+  .app-folder-popup-bin { padding: 5px; }
+  .app-folder-icon {
+    padding: 5px;
+    spacing-rows: 5px;
+    spacing-columns: 5px;
+  }
+  
+  .page-indicator { 
+    padding: 15px 20px;
+    
+    .page-indicator-icon {
+      width: 18px;
+      height: 18px;
+      background-image: url(page-indicator-inactive.svg);
+    }
+    
+    &:hover .page-indicator-icon { background-image: url(page-indicator-hover.svg); }
+    &:active .page-indicator-icon { background-image: url(page-indicator-active.svg); }
+    &:checked .page-indicator-icon,
+    &:checked:active { background-image: url(page-indicator-checked.svg); }
+  }
+  
+  .no-frequent-applications-label { @extend %status_text; }
+  
+  .app-well-app > .overview-icon.overview-icon-with-label,
+  .grid-search-result .overview-icon.overview-icon-with-label {
+    padding: 10px 8px 5px 8px;
+    spacing: 4px;
+  }
+  
+
+
+  //Some hacks I don't even
+  // FIXME
+  .search-display > StBoxLayout,
+  .all-apps,
+  .frequent-apps > StBoxLayout {
+    // horizontal padding to make sure scrollbars or dash don't overlap content
+    padding: 0px 88px 10px 88px;
+  }
+
+%status_text {
+  font-size: 2em;
+  font-weight: bold;
+  color: $fg_color;
+}
+
 /* NOTIFICATIONS & MESSAGE TRAY */
diff --git a/data/theme/_drawing.scss b/data/theme/_drawing.scss
index e537a80..28335ea 100644
--- a/data/theme/_drawing.scss
+++ b/data/theme/_drawing.scss
@@ -183,7 +183,7 @@
 
     color: white;
     border-color: $osd_borders_color;
-    background-color: $_bg;
+    background-color: darken($_bg,5%);
     box-shadow: none;
     text-shadow: none;
     icon-shadow: none;
diff --git a/data/theme/_gnome-shell-old.scss b/data/theme/_gnome-shell-old.scss
index 6db08d3..1408150 100644
--- a/data/theme/_gnome-shell-old.scss
+++ b/data/theme/_gnome-shell-old.scss
@@ -94,425 +94,6 @@
 
 /* Overview */
 
-#overview {
-    spacing: 24px;
-}
-
-.overview-controls {
-    padding-bottom: 32px;
-}
-
-.workspace-thumbnails {
-    spacing: 11px;
-    visible-width: 32px; /* Amount visible before hovering */
-    border: 1px solid rgba(128, 128, 128, 0.4);
-    border-right: 0px;
-    border-radius: 9px 0px 0px 9px;
-    background-color: rgba(0, 0, 0, 0.5);
-    padding: 11px 7px 11px 11px;
-}
-
-.workspace-thumbnails:rtl {
-    border-right: 1px;
-    border-left: 0px;
-    border-radius: 0px 9px 9px 0px;
-    padding: 11px 11px 11px 7px;
-}
-
-.workspace-thumbnail-indicator {
-    border: 4px solid rgba(255,255,255,0.7);
-    border-radius: 4px;
-    padding: 1px;
-}
-
-.window-caption {
-    spacing: 25px;
-    background: rgba(0,0,0,0.5);
-    border-radius: 8px;
-    padding: 4px 12px;
-    -shell-caption-spacing: 12px;
-    border: 2px solid rgba(0, 0, 0, 0);
-}
-
-.window-caption:hover {
-    border: 2px solid rgba(255, 255, 255, 0);
-}
-
-.window-close, .notification-close {
-    background-image: url("close-window.svg");
-    background-size: 32px;
-    height: 32px;
-    width: 32px;
-}
-
-.window-close {
-    -shell-close-overlap: 16px;
-}
-
-.window-clone-border {
-    border: 4px solid rgba(255, 255, 255, 0.5);
-    border-radius: 4px;
-}
-
-.notification-close {
-    /* we start out in the top right of the
-     * notification, inset.
-     *
-     * center is 32px/2 = 16px
-     *
-     * adjust left 2px
-     * adjust down 8px */
-
-    -shell-close-overlap-x: 14px;
-    -shell-close-overlap-y: -12px;
-}
-
-.notification-close:rtl {
-    /* as above, but starting out in the top left of the
-     * notification. */
-
-    -shell-close-overlap-x: -14px;
-}
-
-.window-close:rtl {
-    -st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5);
-}
-
-.window-picker {
-    -horizontal-spacing: 32px;
-    -vertical-spacing: 32px;
-    padding-left: 32px;
-    padding-right: 32px;
-    padding-bottom: 48px;
-}
-
-.window-picker.external-monitor {
-    padding: 32px;
-}
-
-.messages-indicator {
-    color: #999999;
-    height: 32px;
-}
-
-.messages-indicator-contents {
-    spacing: 12px;
-    padding-bottom: 12px;
-}
-
-.messages-indicator-contents:hover {
-    color: white;
-    text-shadow: black 0px 2px 2px;
-}
-
-.messages-indicator-highlight {
-    background-gradient-start: transparent;
-    background-gradient-end: #999999;
-    background-gradient-direction: vertical;
-
-    height: 6px;
-}
-
-/* Dash */
-
-#dash {
-    color: #5f5f5f;
-    font-size: 9pt;
-    padding: 4px 0px;
-    background-color: rgba(0, 0, 0, 0.5);
-    border: 1px solid rgba(128, 128, 128, 0.4);
-    border-left: 0px;
-    border-radius: 0px 9px 9px 0px;
-}
-
-#dash:rtl {
-    border-left: 1px;
-    border-right: 0px;
-    border-radius: 9px 0px 0px 9px;
-}
-
-.placeholder {
-    background-image: url("dash-placeholder.svg");
-    background-size: contain;
-    height: 24px;
-}
-
-.empty-dash-drop-target {
-    width: 24px;
-    height: 24px;
-}
-
-/* Search Box */
-
-.search-entry {
-    width: 320px;
-}
-
-.search-entry-icon {
-    icon-size: 1em;
-    color: #c0c0c0;
-}
-
-.search-entry:hover .search-entry-icon,
-.search-entry:focus .search-entry-icon {
-    color: #8d8f8a;
-}
-
-/* Search Results */
-
-#searchResults {
-    padding: 20px 10px 0px 10px;
-    spacing: 18px;
-}
-
-#searchResultsBin {
-    max-width: 1000px;
-}
-
-#searchResultsContent {
-    padding-left: 20px;
-    padding-right: 20px;
-    spacing: 16px;
-}
-
-.search-section {
-    /* This should be equal to #searchResultsContent spacing */
-    spacing: 16px;
-}
-
-.search-section-separator {
-    -gradient-height: 1px;
-    -gradient-start: rgba(255,255,255,0);
-    -gradient-end: rgba(255,255,255,0.5);
-    -margin-horizontal: 1.5em;
-    height: 1px;
-}
-
-.search-section-content {
-    /* This is the space between the provider icon and the results container */
-    spacing: 32px;
-}
-
-.search-statustext {
-    color: #efefef;
-    font-size: 2em;
-    font-weight: bold;
-}
-
-.list-search-results {
-    spacing: 3px;
-}
-
-.dash-label {
-    border-radius: 7px;
-    padding: 4px 12px;
-    background-color: rgba(0,0,0,0.5);
-    text-align: center;
-    -x-offset: 8px;
-}
-
-/* Application Launchers, Grid and List results */
-
-.icon-grid {
-    spacing: 30px;
-    -shell-grid-horizontal-item-size: 136px;
-    -shell-grid-vertical-item-size: 136px;
-}
-
-.icon-grid .overview-icon {
-    icon-size: 96px;
-}
-
-.app-display {
-    spacing: 20px;
-}
-
-.app-view-controls {
-    padding-bottom: 32px;
-}
-
-.app-view-control {
-    padding: 4px 32px;
-}
-
-.app-view-control:focus {
-    padding: 3px 31px;
-}
-
-.search-display > StBoxLayout,
-.all-apps,
-.frequent-apps > StBoxLayout {
-    /* horizontal padding to make sure scrollbars or dash don't overlap content */
-    padding: 0px 88px 10px 88px;
-}
-
-.page-indicator {
-    padding: 15px 20px;
-}
-
-.page-indicator .page-indicator-icon {
-    width: 18px;
-    height: 18px;
-    background-image: url(page-indicator-inactive.svg);
-}
-
-.page-indicator:hover .page-indicator-icon {
-    background-image: url(page-indicator-hover.svg);
-}
-
-.page-indicator:active .page-indicator-icon {
-    background-image: url(page-indicator-active.svg);
-}
-
-.page-indicator:checked .page-indicator-icon,
-.page-indicator:checked:active .page-indicator-icon {
-    background-image: url(page-indicator-checked.svg);
-}
-
-.no-frequent-applications-label {
-    font-size: 18pt;
-    color: #999999;
-}
-
-.app-folder-icon {
-    padding: 5px;
-    spacing-rows: 5px;
-    spacing-columns: 5px;
-}
-
-.dash-item-container > StButton {
-    padding: 4px 8px;
-}
-
-.list-search-result-content {
-    spacing: 12px;
-    padding: 12px;
-}
-
-.list-search-result-title {
-    font-weight: bold;
-    font-size: 14pt;
-    color: white;
-}
-
-.list-search-result-description {
-    color: #eeeeec;
-}
-
-.search-provider-icon-more {
-    width: 16px;
-    height: 16px;
-    background-image: url("more-results.svg");
-}
-
-.app-well-app > .overview-icon.overview-icon-with-label,
-.grid-search-result .overview-icon.overview-icon-with-label {
-    /* since the label controls its own spacing, it is visually more
-    consistent to use different padding values for top and bottom */
-    padding: 10px 8px 5px 8px;
-    spacing: 4px;
-}
-
-.app-well-app > .overview-icon,
-.show-apps > .overview-icon,
-.search-provider-icon,
-.list-search-result,
-.grid-search-result .overview-icon {
-    border-radius: 4px;
-    padding: 6px;
-    border: 1px rgba(0,0,0,0);
-    transition-duration: 100ms;
-    text-align: center;
-}
-
-.search-provider-icon {
-    padding: 15px;
-}
-
-.app-folder-popup {
-    -arrow-border-radius: 8px;
-    -arrow-background-color: rgba(0,0,0,0.3);
-    -arrow-base: 24px;
-    -arrow-rise: 11px;
-}
-
-.app-folder-popup-bin {
-    padding: 5px;
-}
-
-.app-well-app.running > .overview-icon {
-    text-shadow: black 0px 2px 2px;
-    background-image: url("running-indicator.svg");
-    background-size: contain;
-}
-
-.app-well-app.app-folder > .overview-icon {
-    background-color: rgba(0,0,0,0.3);
-}
-
-.app-well-app:hover > .overview-icon,
-.show-apps:hover > .overview-icon,
-.search-provider-icon:hover,
-.list-search-result:hover,
-.grid-search-result:hover .overview-icon {
-    background-color: rgba(255,255,255,0.1);
-    text-shadow: black 0px 2px 2px;
-    transition-duration: 100ms;
-    color:white;
-}
-
-.app-display .app-well-app > .overview-icon {
-    border-radius: 4px;
-}
-
-.list-search-result:hover .list-search-result-description {
-    text-shadow: rgba(0,0,0,0.8) 0px 1px 2px;
-}
-
-.show-apps {
-    padding: 4px 0;
-}
-
-.show-apps-icon {
-    color: #a0a0a0;
-}
-
-.show-apps:hover .show-apps-icon {
-    color: white;
-}
-
-.app-well-app:checked > .overview-icon,
-.app-well-app:active > .overview-icon,
-.show-apps:checked > .overview-icon,
-.show-apps:active > .overview-icon,
-.search-provider-icon:active,
-.grid-search-result:active .overview-icon,
-.list-search-result:active {
-    background-gradient-start: rgba(255, 255, 255, .05);
-    background-gradient-end: rgba(255, 255, 255, .15);
-    background-gradient-direction: vertical;
-    border-radius: 4px;
-    box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.7);
-    transition-duration: 100ms;
-}
-
-.show-apps:checked .show-apps-icon,
-.show-apps:focus .show-apps-icon {
-    color: white;
-    transition-duration: 100ms;
-}
-
-.app-well-app:focus > .overview-icon,
-.grid-search-result:focus .overview-icon,
-.show-apps:focus > .overview-icon,
-.search-provider-icon:focus,
-.list-search-result:focus,
-.app-well-app:selected > .overview-icon,
-.grid-search-result:selected .overview-icon,
-.search-provider-icon:selected,
-.list-search-result:selected {
-    background-color: rgba(255,255,255,0.33);
-}
 
 /* LookingGlass */