From fd2a390954ec287bf794c99efe6f78c18e6e5cd2 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Sat, 13 Dec 2014 18:23:59 +0530
Subject: [PATCH] Added OSD styles

---
 gtk-3.0/scss/_colors.scss |   3 +-
 gtk-3.0/scss/_global.scss |   3 +-
 gtk-3.0/scss/_osd.scss    | 152 +++++++++++++++++++++
 gtk-3.0/scss/widgets.scss | 275 +-------------------------------------
 4 files changed, 156 insertions(+), 277 deletions(-)
 create mode 100644 gtk-3.0/scss/_osd.scss

diff --git a/gtk-3.0/scss/_colors.scss b/gtk-3.0/scss/_colors.scss
index f00aaba..dcb562c 100755
--- a/gtk-3.0/scss/_colors.scss
+++ b/gtk-3.0/scss/_colors.scss
@@ -45,9 +45,8 @@
 @define-color panel_fg_color @dark_fg_color;
 
 /* osd */
-@define-color osd_base #{"" + $osd_base};
-@define-color osd_fg #{"" + $osd_fg};
 @define-color osd_bg #{"" + $osd_bg};
+@define-color osd_fg #{"" + $osd_fg};
 
 /* lightdm greeter colors */
 @define-color lightdm_bg_color #{"" + $lightdm_bg_color};
diff --git a/gtk-3.0/scss/_global.scss b/gtk-3.0/scss/_global.scss
index bbb300f..844731c 100755
--- a/gtk-3.0/scss/_global.scss
+++ b/gtk-3.0/scss/_global.scss
@@ -42,9 +42,8 @@ $menu_fg_color: $dark_fg_color;
 $menubar_bg_color: $dark_bg_color;
 $menubar_fg_color: $dark_fg_color;
 
-$osd_base: $dark_bg_color;
+$osd_bg: $dark_bg_color;
 $osd_fg: $dark_fg_color;
-$osd_bg: fade-out($dark_fg_color, 0.8);
 
 $lightdm_bg_color: $dark_bg_color;
 $lightdm_fg_color: $dark_fg_color;
diff --git a/gtk-3.0/scss/_osd.scss b/gtk-3.0/scss/_osd.scss
new file mode 100644
index 0000000..a2d3e5a
--- /dev/null
+++ b/gtk-3.0/scss/_osd.scss
@@ -0,0 +1,152 @@
+@import "functions";
+@import "global";
+@import "button";
+
+
+/*******
+ ! OSD *
+********/
+
+GtkOverlay.osd {
+    background-color: transparent;
+}
+
+.osd {
+    &.background {
+        background-color: alpha($osd_bg, 0.8);
+        color: $osd_fg;
+    }
+
+    &.frame {
+        background-clip: border-box;
+        background-origin: border-box;
+    }
+
+    &.button, .button { @include button($osd_bg, $osd_fg); }
+
+
+    &.toolbar {
+        -GtkToolbar-button-relief: normal;
+
+        padding: $spacing;
+        border-width: 1px solid border_normal($osd_bg);
+        border-radius: $roundness;
+        background-color: $osd_bg;
+        background-image: none;
+        color: $osd_fg;
+
+        .separator { color: shade($osd_bg, 0.9); }
+    }
+
+    /* used by gnome-settings-daemon's media-keys OSD */
+    &.trough { background-color: shade($osd_bg, 0.8); }
+
+    &.progressbar { background-color: $osd_fg; }
+
+    .scale {
+        &.slider {
+            background-color: shade($osd_bg, 1.08);
+            background-image: none;
+            /* we will draw the border using box shadow for now */
+            box-shadow: inset 1px 0 shade($osd_bg, 0.8),
+                inset 0 1px shade($osd_bg, 0.8),
+                inset -1px 0 shade($osd_bg, 0.8),
+                inset 0 -1px shade($osd_bg, 0.8);
+
+            &:hover {
+                box-shadow: inset 1px 0 shade($osd_bg, 0.7),
+                    inset 0 1px shade($osd_bg, 0.7),
+                    inset -1px 0 shade($osd_bg, 0.7),
+                    inset 0 -1px shade($osd_bg, 0.7);
+            }
+
+            &:insensitive {
+                background-color: shade($osd_bg, 0.9);
+                background-image: none;
+                box-shadow: inset 1px 0 shade($osd_bg, 0.85),
+                    inset 0 1px shade($osd_bg, 0.85),
+                    inset -1px 0 shade($osd_bg, 0.85),
+                    inset 0 -1px shade($osd_bg, 0.85);
+            }
+        }
+
+        &.trough {
+            border-color: shade($osd_bg, 0.8);
+            background-color: shade($osd_bg, 1.08);
+            background-image: none;
+
+            &.highlight {
+                border-color: $selected_bg_color;
+                background-color: $selected_bg_color;
+                background-image: none;
+            }
+
+            &:insensitive, &.highlight:insensitive {
+                border-color: shade($osd_bg, 0.85);
+                background-color: shade($osd_bg, 0.9);
+                background-image: none;
+            }
+        }
+    }
+
+    &.view, .view { background-color: $osd_bg; }
+
+    .scrollbar {
+        .trough { background-color: $osd_bg; }
+
+        .slider {
+            border: 1px solid mix(shade($osd_bg, 0.87), $osd_fg, 0.21);
+            border-radius: 0;
+            background-color: mix($osd_bg, $osd_fg, 0.21);
+
+            &:hover {
+                border-color: mix(shade($osd_bg, 0.87), $osd_fg, 0.31);
+                background-color: mix($osd_bg, $osd_fg, 0.31);
+            }
+
+            &:active {
+                border-color: shade($selected_bg_color, 0.9);
+                background-color: $selected_bg_color;
+            }
+        }
+    }
+
+    GtkIconView.cell {
+        &:selected, &:selected:focus {
+            background-color: transparent;
+            border: 3px solid solid mix(shade($osd_bg, 0.87), $osd_fg, 0.21);
+            border-radius: $roundness;
+            outline-color: transparent;
+        }
+    }
+
+    /* used by Documents */
+    .page-thumbnail {
+        border: 1px solid shade($osd_bg, 0.9);
+        /* when there's no pixbuf yet */
+        background-color: $osd_bg;
+    }
+}
+
+.osd GtkProgressBar, GtkProgressBar.osd {
+    -GtkProgressBar-xspacing: 0;
+    -GtkProgressBar-yspacing: 2px;
+    -GtkProgressBar-min-horizontal-bar-height: 2px;
+
+    padding: 0;
+
+    &.trough {
+        padding: 0;
+        border-style: none;
+        border-radius: 0;
+        background-image: none;
+        background-color: transparent;
+    }
+
+    &.progressbar {
+        border-style: none;
+        border-radius: 0;
+        background-color: $selected_bg_color;
+        background-image: none;
+    }
+}
diff --git a/gtk-3.0/scss/widgets.scss b/gtk-3.0/scss/widgets.scss
index 562273c..e5613bf 100755
--- a/gtk-3.0/scss/widgets.scss
+++ b/gtk-3.0/scss/widgets.scss
@@ -10,6 +10,7 @@
 @import "menu";
 @import "misc";
 @import "notebook";
+@import "osd";
 @import "progress";
 @import "scrollbar";
 @import "sidebar";
@@ -65,279 +66,7 @@
     padding: 4px;
 }
 
-/*******
-* osd *
-*******/
-//.background.osd {
-//    color: $osd_fg;
-//    background-color: $osd_bg;
-//}
-//
-//GtkOverlay.osd {
-//    background-color: transparent;
-//}
-//
-//.osd.frame {
-//    background-clip: border-box;
-//    background-origin: border-box;
-//}
-//
-//.osd.button,
-//.osd .button {
-//    padding: 4px;
-//    border-width: 1px;
-//    border-style: solid;
-//    border-color: shade($osd_bg, 0.8);
-//    border-radius: 2px;
-//    background-color: shade($osd_bg, 1.08);
-//    background-image: none;
-//    color: $osd_fg;
-//}
-//
-//.osd.button:prelight,
-//.osd.button:hover,
-//.osd .button:hover {
-//    border-color: shade($osd_bg, 0.7);
-//    background-color: shade($osd_bg, 1.10);
-//    background-image: none;
-//}
-//
-//.osd.button:active,
-//.osd .button:active,
-//.osd GtkMenuButton.button:active {
-//    border-color: shade($osd_bg, 0.8);
-//    background-color: shade($osd_bg, 0.95);
-//    background-image: none;
-//}
-//
-//.osd.button:active:hover,
-//.osd .button:active:hover,
-//.osd GtkMenuButton.button:active:hover {
-//    border-color: shade($osd_bg, 0.7);
-//}
-//
-//.osd.button:insensitive,
-//.osd .button:insensitive {
-//    border-color: shade($osd_bg, 0.85);
-//    background-color: shade($osd_bg, 0.9);
-//    background-image: none;
-//}
-//
-//.osd.button:active *:insensitive,
-//.osd .button:active *:insensitive {
-//    background-color: shade($osd_bg, 0.80);
-//    background-image: none;
-//}
-//
-//.osd.toolbar {
-//    -GtkToolbar-button-relief: normal;
-//
-//    padding: 4px;
-//    border-width: 1px;
-//    border-style: solid;
-//    border-radius: 2px;
-//    border-color: shade($osd_bg, 0.8);
-//    background-color: $osd_bg;
-//    background-image: none;
-//    color: $osd_fg;
-//}
-//
-//.osd.toolbar .button {
-//    padding: 4px;
-//    border-width: 1px;
-//    border-style: solid;
-//    border-color: shade($osd_bg, 0.8);
-//    border-radius: 2px;
-//    background-color: shade($osd_bg, 1.08);
-//    background-image: none;
-//    color: $osd_fg;
-//}
-//
-//.osd.toolbar .button:hover {
-//    border-color: shade($osd_bg, 0.7);
-//    background-color: shade($osd_bg, 1.10);
-//    background-image: none;
-//}
-//
-//.osd.toolbar .button:active {
-//    border-color: shade($osd_bg, 0.8);
-//    background-color: shade($osd_bg, 0.95);
-//    background-image: none;
-//}
-//
-//.osd.toolbar .button:active:hover {
-//    border-color: shade($osd_bg, 0.7);
-//}
-//
-//.osd.toolbar .button:focus,
-//.osd.toolbar .button:hover:focus,
-//.osd.toolbar .button:active:focus,
-//.osd.toolbar .button:active:hover:focus {
-//    border-color: shade($osd_bg, 0.7);
-//}
-//
-//.osd.toolbar .button:insensitive {
-//    border-color: shade($osd_bg, 0.85);
-//    background-color: shade($osd_bg, 0.9);
-//    background-image: none;
-//}
-//
-//.osd.toolbar .button:active *:insensitive {
-//    border-color: shade($osd_bg, 0.75);
-//    background-color: shade($osd_bg, 0.80);
-//    background-image: none;
-//}
-//
-//.osd.toolbar .button:first-child {
-//    border-radius: 2px 0 0 2px;
-//    border-width: 1px 0 1px 1px;
-//    box-shadow: inset -1px 0 shade($osd_bg, 0.9);
-//}
-//
-//.osd.toolbar .button:last-child {
-//    box-shadow: none;
-//    border-radius: 0 2px 2px 0;
-//    border-width: 1px 1px 1px 0;
-//}
-//
-//.osd.toolbar .button:only-child,
-//.osd.toolbar GtkToolButton .button,
-//.osd.toolbar GtkToolButton:only-child .button,
-//.osd.toolbar GtkToolButton:last-child .button,
-//.osd.toolbar GtkToolButton:first-child .button {
-//    border-width: 1px;
-//    border-radius: 2px;
-//    border-style: solid;
-//}
-//
-//.osd.toolbar .separator {
-//    color: shade($osd_bg, 0.9);
-//}
-//
-///* used by gnome-settings-daemon's media-keys OSD */
-//.osd.trough {
-//    background-color: shade($osd_bg, 0.8);
-//}
-//
-//.osd.progressbar {
-//    background-color: $osd_fg;
-//}
-//
-//.osd .scale.slider {
-//    background-color: shade($osd_bg, 1.08);
-//    background-image: none;
-//    /* we will draw the border using box shadow for now */
-//    box-shadow: inset 1px 0 shade($osd_bg, 0.8),
-//        inset 0 1px shade($osd_bg, 0.8),
-//        inset -1px 0 shade($osd_bg, 0.8),
-//        inset 0 -1px shade($osd_bg, 0.8);
-//}
-//
-//.osd .scale.slider:hover {
-//    box-shadow: inset 1px 0 shade($osd_bg, 0.7),
-//        inset 0 1px shade($osd_bg, 0.7),
-//        inset -1px 0 shade($osd_bg, 0.7),
-//        inset 0 -1px shade($osd_bg, 0.7);
-//}
-//
-//.osd .scale.slider:insensitive {
-//    background-color: shade($osd_bg, 0.9);
-//    background-image: none;
-//    box-shadow: inset 1px 0 shade($osd_bg, 0.85),
-//        inset 0 1px shade($osd_bg, 0.85),
-//        inset -1px 0 shade($osd_bg, 0.85),
-//        inset 0 -1px shade($osd_bg, 0.85);
-//}
-//
-//.osd .scale.trough {
-//    border-color: shade($osd_bg, 0.8);
-//    background-color: shade($osd_bg, 1.08);
-//    background-image: none;
-//}
-//
-//.osd .scale.trough.highlight {
-//    border-color: $selected_bg_color;
-//    background-color: $selected_bg_color;
-//    background-image: none;
-//}
-//
-//.osd .scale.trough:insensitive,
-//.osd .scale.trough.highlight:insensitive {
-//    border-color: shade($osd_bg, 0.85);
-//    background-color: shade($osd_bg, 0.9);
-//    background-image: none;
-//}
-//
-//.osd GtkProgressBar,
-//GtkProgressBar.osd {
-//    -GtkProgressBar-xspacing: 0;
-//    -GtkProgressBar-yspacing: 2px;
-//    -GtkProgressBar-min-horizontal-bar-height: 2px;
-//
-//    padding: 0;
-//}
-//
-//.osd GtkProgressBar.trough,
-//GtkProgressBar.osd.trough {
-//    padding: 0;
-//    border-style: none;
-//    border-radius: 0;
-//    background-image: none;
-//    background-color: transparent;
-//}
-//
-//.osd GtkProgressBar.progressbar,
-//GtkProgressBar.osd.progressbar {
-//    border-style: none;
-//    border-radius: 0;
-//    background-color: $selected_bg_color;
-//    background-image: none;
-//}
-//
-//.osd .view,
-//.osd.view {
-//    background-color: $osd_base;
-//}
-//
-//.osd .scrollbar.trough {
-//    background-color: $osd_bg;
-//}
-//
-//.osd .scrollbar.slider {
-//    border-width: 1px;
-//    border-color: mix(shade($osd_base, 0.87), $osd_fg, 0.21);
-//    border-radius: 0;
-//    background-color: mix($osd_base, $osd_fg, 0.21);
-//}
-//
-//.osd .scrollbar.slider:hover {
-//    border-color: mix(shade($osd_base, 0.87), $osd_fg, 0.31);
-//    background-color: mix($osd_base, $osd_fg, 0.31);
-//}
-//
-//.osd .scrollbar.slider:active {
-//    border-color: shade($selected_bg_color, 0.9);
-//    background-color: $selected_bg_color;
-//}
-//
-//.osd GtkIconView.cell:selected,
-//.osd GtkIconView.cell:selected:focus {
-//    background-color: transparent;
-//    border-style: solid;
-//    border-radius: 2px;
-//    border-width: 3px;
-//    border-color: $osd_fg;
-//    outline-color: transparent;
-//}
-//
-///* used by Documents */
-//.osd .page-thumbnail {
-//    border-style: solid;
-//    border-width: 1px;
-//    border-color: shade($osd_bg, 0.9);
-//    /* when there's no pixbuf yet */
-//    background-color: $osd_bg;
-//}
+
 
 /******************************
 * destructive action buttons *