tweak standalone osd buttons

14 files changed, 42 insertions, 114 deletions

diff --git a/common/gtk-3.0/3.14/gtk-contained-dark.css b/common/gtk-3.0/3.14/gtk-contained-dark.css
index 62db47b..42b858f 100644
--- a/common/gtk-3.0/3.14/gtk-contained-dark.css
+++ b/common/gtk-3.0/3.14/gtk-contained-dark.css
@@ -330,20 +330,14 @@ GtkSearchEntry.entry {
       .button:insensitive:active > GtkLabel, .button:insensitive:checked > GtkLabel {
         color: inherit; }
   .button.osd {
-    outline-color: rgba(186, 195, 207, 0.3);
     color: #BAC3CF;
     outline-color: rgba(186, 195, 207, 0.3);
-    border-color: rgba(26, 28, 34, 0.35);
-    background-color: rgba(102, 109, 132, 0.35);
-    background-color: rgba(53, 57, 69, 0.95); }
+    background-color: rgba(53, 57, 69, 0.95);
+    border-color: rgba(35, 38, 46, 0.95); }
     .button.osd.image-button {
       padding: 10px; }
     .button.osd:hover {
-      color: #BAC3CF;
-      outline-color: rgba(186, 195, 207, 0.3);
-      border-color: rgba(26, 28, 34, 0.35);
-      background-color: rgba(119, 127, 151, 0.45);
-      background-color: rgba(53, 57, 69, 0.95); }
+      color: #5294E2; }
     .button.osd:active, .button.osd:checked {
       color: #ffffff;
       outline-color: rgba(255, 255, 255, 0.3);
diff --git a/common/gtk-3.0/3.14/gtk-contained-darker.css b/common/gtk-3.0/3.14/gtk-contained-darker.css
index 77c92ac..2d2523f 100644
--- a/common/gtk-3.0/3.14/gtk-contained-darker.css
+++ b/common/gtk-3.0/3.14/gtk-contained-darker.css
@@ -330,20 +330,14 @@ GtkSearchEntry.entry {
       .button:insensitive:active > GtkLabel, .button:insensitive:checked > GtkLabel {
         color: inherit; }
   .button.osd {
-    outline-color: rgba(186, 195, 207, 0.3);
     color: #BAC3CF;
     outline-color: rgba(186, 195, 207, 0.3);
-    border-color: rgba(26, 28, 34, 0.35);
-    background-color: rgba(102, 109, 132, 0.35);
-    background-color: rgba(53, 57, 69, 0.95); }
+    background-color: rgba(53, 57, 69, 0.95);
+    border-color: rgba(35, 38, 46, 0.95); }
     .button.osd.image-button {
       padding: 10px; }
     .button.osd:hover {
-      color: #BAC3CF;
-      outline-color: rgba(186, 195, 207, 0.3);
-      border-color: rgba(26, 28, 34, 0.35);
-      background-color: rgba(119, 127, 151, 0.45);
-      background-color: rgba(53, 57, 69, 0.95); }
+      color: #5294E2; }
     .button.osd:active, .button.osd:checked {
       color: #ffffff;
       outline-color: rgba(255, 255, 255, 0.3);
diff --git a/common/gtk-3.0/3.14/gtk-contained-solid-dark.css b/common/gtk-3.0/3.14/gtk-contained-solid-dark.css
index e3f1200..be60037 100644
--- a/common/gtk-3.0/3.14/gtk-contained-solid-dark.css
+++ b/common/gtk-3.0/3.14/gtk-contained-solid-dark.css
@@ -330,20 +330,14 @@ GtkSearchEntry.entry {
       .button:insensitive:active > GtkLabel, .button:insensitive:checked > GtkLabel {
         color: inherit; }
   .button.osd {
-    outline-color: rgba(186, 195, 207, 0.3);
     color: #BAC3CF;
     outline-color: rgba(186, 195, 207, 0.3);
-    border-color: rgba(26, 28, 34, 0.4);
-    background-color: rgba(102, 109, 132, 0.4);
-    background-color: #353945; }
+    background-color: #353945;
+    border-color: #23262e; }
     .button.osd.image-button {
       padding: 10px; }
     .button.osd:hover {
-      color: #BAC3CF;
-      outline-color: rgba(186, 195, 207, 0.3);
-      border-color: rgba(26, 28, 34, 0.4);
-      background-color: rgba(119, 127, 151, 0.5);
-      background-color: #353945; }
+      color: #5294E2; }
     .button.osd:active, .button.osd:checked {
       color: #ffffff;
       outline-color: rgba(255, 255, 255, 0.3);
diff --git a/common/gtk-3.0/3.14/gtk-contained-solid-darker.css b/common/gtk-3.0/3.14/gtk-contained-solid-darker.css
index e0dbb2c..249859f 100644
--- a/common/gtk-3.0/3.14/gtk-contained-solid-darker.css
+++ b/common/gtk-3.0/3.14/gtk-contained-solid-darker.css
@@ -330,20 +330,14 @@ GtkSearchEntry.entry {
       .button:insensitive:active > GtkLabel, .button:insensitive:checked > GtkLabel {
         color: inherit; }
   .button.osd {
-    outline-color: rgba(186, 195, 207, 0.3);
     color: #BAC3CF;
     outline-color: rgba(186, 195, 207, 0.3);
-    border-color: rgba(26, 28, 34, 0.4);
-    background-color: rgba(102, 109, 132, 0.4);
-    background-color: #353945; }
+    background-color: #353945;
+    border-color: #23262e; }
     .button.osd.image-button {
       padding: 10px; }
     .button.osd:hover {
-      color: #BAC3CF;
-      outline-color: rgba(186, 195, 207, 0.3);
-      border-color: rgba(26, 28, 34, 0.4);
-      background-color: rgba(119, 127, 151, 0.5);
-      background-color: #353945; }
+      color: #5294E2; }
     .button.osd:active, .button.osd:checked {
       color: #ffffff;
       outline-color: rgba(255, 255, 255, 0.3);
diff --git a/common/gtk-3.0/3.14/gtk-contained-solid.css b/common/gtk-3.0/3.14/gtk-contained-solid.css
index d2f5156..2fe72f4 100644
--- a/common/gtk-3.0/3.14/gtk-contained-solid.css
+++ b/common/gtk-3.0/3.14/gtk-contained-solid.css
@@ -330,20 +330,14 @@ GtkSearchEntry.entry {
       .button:insensitive:active > GtkLabel, .button:insensitive:checked > GtkLabel {
         color: inherit; }
   .button.osd {
-    outline-color: rgba(186, 195, 207, 0.3);
     color: #BAC3CF;
     outline-color: rgba(186, 195, 207, 0.3);
-    border-color: rgba(26, 28, 34, 0.4);
-    background-color: rgba(102, 109, 132, 0.4);
-    background-color: #353945; }
+    background-color: #353945;
+    border-color: #23262e; }
     .button.osd.image-button {
       padding: 10px; }
     .button.osd:hover {
-      color: #BAC3CF;
-      outline-color: rgba(186, 195, 207, 0.3);
-      border-color: rgba(26, 28, 34, 0.4);
-      background-color: rgba(119, 127, 151, 0.5);
-      background-color: #353945; }
+      color: #5294E2; }
     .button.osd:active, .button.osd:checked {
       color: #ffffff;
       outline-color: rgba(255, 255, 255, 0.3);
diff --git a/common/gtk-3.0/3.14/gtk-contained.css b/common/gtk-3.0/3.14/gtk-contained.css
index 7aefef5..eb43577 100644
--- a/common/gtk-3.0/3.14/gtk-contained.css
+++ b/common/gtk-3.0/3.14/gtk-contained.css
@@ -330,20 +330,14 @@ GtkSearchEntry.entry {
       .button:insensitive:active > GtkLabel, .button:insensitive:checked > GtkLabel {
         color: inherit; }
   .button.osd {
-    outline-color: rgba(186, 195, 207, 0.3);
     color: #BAC3CF;
     outline-color: rgba(186, 195, 207, 0.3);
-    border-color: rgba(26, 28, 34, 0.35);
-    background-color: rgba(102, 109, 132, 0.35);
-    background-color: rgba(53, 57, 69, 0.95); }
+    background-color: rgba(53, 57, 69, 0.95);
+    border-color: rgba(35, 38, 46, 0.95); }
     .button.osd.image-button {
       padding: 10px; }
     .button.osd:hover {
-      color: #BAC3CF;
-      outline-color: rgba(186, 195, 207, 0.3);
-      border-color: rgba(26, 28, 34, 0.35);
-      background-color: rgba(119, 127, 151, 0.45);
-      background-color: rgba(53, 57, 69, 0.95); }
+      color: #5294E2; }
     .button.osd:active, .button.osd:checked {
       color: #ffffff;
       outline-color: rgba(255, 255, 255, 0.3);
diff --git a/common/gtk-3.0/3.14/sass/_common.scss b/common/gtk-3.0/3.14/sass/_common.scss
index 665ae6a..f97c1bc 100644
--- a/common/gtk-3.0/3.14/sass/_common.scss
+++ b/common/gtk-3.0/3.14/sass/_common.scss
@@ -437,14 +437,14 @@ $_dot_color: $selected_bg_color;
   }
   // big standalone buttons like in Documents pager
   &.osd {
+    color: $osd_fg_color;
     outline-color: transparentize($osd_fg_color, 0.7);
-
-    @include button(osd);
     background-color: $osd_bg_color;
+    border-color: darken($osd_bg_color, 8%);
 
     &.image-button { padding: 10px; }
 
-    &:hover { @include button(osd-hover); background-color: $osd_bg_color; }
+    &:hover { color: $selected_bg_color; }
     &:active, &:checked { @include button(osd-active); }
     &:insensitive { @include button(osd-insensitive); }
   }
diff --git a/common/gtk-3.0/3.16/gtk-contained-dark.css b/common/gtk-3.0/3.16/gtk-contained-dark.css
index 6eed2d8..194213a 100644
--- a/common/gtk-3.0/3.16/gtk-contained-dark.css
+++ b/common/gtk-3.0/3.16/gtk-contained-dark.css
@@ -328,20 +328,14 @@ GtkSearchEntry.entry {
       .button:insensitive:active > GtkLabel, .button:insensitive:checked > GtkLabel {
         color: inherit; }
   .button.osd {
-    outline-color: rgba(186, 195, 207, 0.3);
     color: #BAC3CF;
     outline-color: rgba(186, 195, 207, 0.3);
-    border-color: rgba(26, 28, 34, 0.35);
-    background-color: rgba(102, 109, 132, 0.35);
-    background-color: rgba(53, 57, 69, 0.95); }
+    background-color: rgba(53, 57, 69, 0.95);
+    border-color: rgba(35, 38, 46, 0.95); }
     .button.osd.image-button {
       padding: 10px; }
     .button.osd:hover {
-      color: #BAC3CF;
-      outline-color: rgba(186, 195, 207, 0.3);
-      border-color: rgba(26, 28, 34, 0.35);
-      background-color: rgba(119, 127, 151, 0.45);
-      background-color: rgba(53, 57, 69, 0.95); }
+      color: #5294E2; }
     .button.osd:active, .button.osd:checked {
       color: #ffffff;
       outline-color: rgba(255, 255, 255, 0.3);
diff --git a/common/gtk-3.0/3.16/gtk-contained-darker.css b/common/gtk-3.0/3.16/gtk-contained-darker.css
index 7ad34f1..aebf17f 100644
--- a/common/gtk-3.0/3.16/gtk-contained-darker.css
+++ b/common/gtk-3.0/3.16/gtk-contained-darker.css
@@ -328,20 +328,14 @@ GtkSearchEntry.entry {
       .button:insensitive:active > GtkLabel, .button:insensitive:checked > GtkLabel {
         color: inherit; }
   .button.osd {
-    outline-color: rgba(186, 195, 207, 0.3);
     color: #BAC3CF;
     outline-color: rgba(186, 195, 207, 0.3);
-    border-color: rgba(26, 28, 34, 0.35);
-    background-color: rgba(102, 109, 132, 0.35);
-    background-color: rgba(53, 57, 69, 0.95); }
+    background-color: rgba(53, 57, 69, 0.95);
+    border-color: rgba(35, 38, 46, 0.95); }
     .button.osd.image-button {
       padding: 10px; }
     .button.osd:hover {
-      color: #BAC3CF;
-      outline-color: rgba(186, 195, 207, 0.3);
-      border-color: rgba(26, 28, 34, 0.35);
-      background-color: rgba(119, 127, 151, 0.45);
-      background-color: rgba(53, 57, 69, 0.95); }
+      color: #5294E2; }
     .button.osd:active, .button.osd:checked {
       color: #ffffff;
       outline-color: rgba(255, 255, 255, 0.3);
diff --git a/common/gtk-3.0/3.16/gtk-contained-solid-dark.css b/common/gtk-3.0/3.16/gtk-contained-solid-dark.css
index 9dadbbd..8a92fd0 100644
--- a/common/gtk-3.0/3.16/gtk-contained-solid-dark.css
+++ b/common/gtk-3.0/3.16/gtk-contained-solid-dark.css
@@ -328,20 +328,14 @@ GtkSearchEntry.entry {
       .button:insensitive:active > GtkLabel, .button:insensitive:checked > GtkLabel {
         color: inherit; }
   .button.osd {
-    outline-color: rgba(186, 195, 207, 0.3);
     color: #BAC3CF;
     outline-color: rgba(186, 195, 207, 0.3);
-    border-color: rgba(26, 28, 34, 0.4);
-    background-color: rgba(102, 109, 132, 0.4);
-    background-color: #353945; }
+    background-color: #353945;
+    border-color: #23262e; }
     .button.osd.image-button {
       padding: 10px; }
     .button.osd:hover {
-      color: #BAC3CF;
-      outline-color: rgba(186, 195, 207, 0.3);
-      border-color: rgba(26, 28, 34, 0.4);
-      background-color: rgba(119, 127, 151, 0.5);
-      background-color: #353945; }
+      color: #5294E2; }
     .button.osd:active, .button.osd:checked {
       color: #ffffff;
       outline-color: rgba(255, 255, 255, 0.3);
diff --git a/common/gtk-3.0/3.16/gtk-contained-solid-darker.css b/common/gtk-3.0/3.16/gtk-contained-solid-darker.css
index e3d6c15..15cb1c4 100644
--- a/common/gtk-3.0/3.16/gtk-contained-solid-darker.css
+++ b/common/gtk-3.0/3.16/gtk-contained-solid-darker.css
@@ -328,20 +328,14 @@ GtkSearchEntry.entry {
       .button:insensitive:active > GtkLabel, .button:insensitive:checked > GtkLabel {
         color: inherit; }
   .button.osd {
-    outline-color: rgba(186, 195, 207, 0.3);
     color: #BAC3CF;
     outline-color: rgba(186, 195, 207, 0.3);
-    border-color: rgba(26, 28, 34, 0.4);
-    background-color: rgba(102, 109, 132, 0.4);
-    background-color: #353945; }
+    background-color: #353945;
+    border-color: #23262e; }
     .button.osd.image-button {
       padding: 10px; }
     .button.osd:hover {
-      color: #BAC3CF;
-      outline-color: rgba(186, 195, 207, 0.3);
-      border-color: rgba(26, 28, 34, 0.4);
-      background-color: rgba(119, 127, 151, 0.5);
-      background-color: #353945; }
+      color: #5294E2; }
     .button.osd:active, .button.osd:checked {
       color: #ffffff;
       outline-color: rgba(255, 255, 255, 0.3);
diff --git a/common/gtk-3.0/3.16/gtk-contained-solid.css b/common/gtk-3.0/3.16/gtk-contained-solid.css
index 24c6232..5eed3fb 100644
--- a/common/gtk-3.0/3.16/gtk-contained-solid.css
+++ b/common/gtk-3.0/3.16/gtk-contained-solid.css
@@ -328,20 +328,14 @@ GtkSearchEntry.entry {
       .button:insensitive:active > GtkLabel, .button:insensitive:checked > GtkLabel {
         color: inherit; }
   .button.osd {
-    outline-color: rgba(186, 195, 207, 0.3);
     color: #BAC3CF;
     outline-color: rgba(186, 195, 207, 0.3);
-    border-color: rgba(26, 28, 34, 0.4);
-    background-color: rgba(102, 109, 132, 0.4);
-    background-color: #353945; }
+    background-color: #353945;
+    border-color: #23262e; }
     .button.osd.image-button {
       padding: 10px; }
     .button.osd:hover {
-      color: #BAC3CF;
-      outline-color: rgba(186, 195, 207, 0.3);
-      border-color: rgba(26, 28, 34, 0.4);
-      background-color: rgba(119, 127, 151, 0.5);
-      background-color: #353945; }
+      color: #5294E2; }
     .button.osd:active, .button.osd:checked {
       color: #ffffff;
       outline-color: rgba(255, 255, 255, 0.3);
diff --git a/common/gtk-3.0/3.16/gtk-contained.css b/common/gtk-3.0/3.16/gtk-contained.css
index 24f3671..94ff0bc 100644
--- a/common/gtk-3.0/3.16/gtk-contained.css
+++ b/common/gtk-3.0/3.16/gtk-contained.css
@@ -328,20 +328,14 @@ GtkSearchEntry.entry {
       .button:insensitive:active > GtkLabel, .button:insensitive:checked > GtkLabel {
         color: inherit; }
   .button.osd {
-    outline-color: rgba(186, 195, 207, 0.3);
     color: #BAC3CF;
     outline-color: rgba(186, 195, 207, 0.3);
-    border-color: rgba(26, 28, 34, 0.35);
-    background-color: rgba(102, 109, 132, 0.35);
-    background-color: rgba(53, 57, 69, 0.95); }
+    background-color: rgba(53, 57, 69, 0.95);
+    border-color: rgba(35, 38, 46, 0.95); }
     .button.osd.image-button {
       padding: 10px; }
     .button.osd:hover {
-      color: #BAC3CF;
-      outline-color: rgba(186, 195, 207, 0.3);
-      border-color: rgba(26, 28, 34, 0.35);
-      background-color: rgba(119, 127, 151, 0.45);
-      background-color: rgba(53, 57, 69, 0.95); }
+      color: #5294E2; }
     .button.osd:active, .button.osd:checked {
       color: #ffffff;
       outline-color: rgba(255, 255, 255, 0.3);
diff --git a/common/gtk-3.0/3.16/sass/_common.scss b/common/gtk-3.0/3.16/sass/_common.scss
index 4505d9a..0cf2345 100644
--- a/common/gtk-3.0/3.16/sass/_common.scss
+++ b/common/gtk-3.0/3.16/sass/_common.scss
@@ -437,14 +437,14 @@ $_dot_color: $selected_bg_color;
   }
   // big standalone buttons like in Documents pager
   &.osd {
+    color: $osd_fg_color;
     outline-color: transparentize($osd_fg_color, 0.7);
-
-    @include button(osd);
     background-color: $osd_bg_color;
+    border-color: darken($osd_bg_color, 8%);
 
     &.image-button { padding: 10px; }
 
-    &:hover { @include button(osd-hover); background-color: $osd_bg_color; }
+    &:hover { color: $selected_bg_color; }
     &:active, &:checked { @include button(osd-active); }
     &:insensitive { @include button(osd-insensitive); }
   }