[gtk+] Adwaita: use osd style for in-app notifications



commit 96dae4b86e517902def3da2c9d3b8a2479fdb6ef
Author: Jakub Steiner <jimmac gmail com>
Date:   Fri Aug 22 18:16:23 2014 +0200

    Adwaita: use osd style for in-app notifications

 gtk/resources/theme/Adwaita/_common.scss           |   26 ++++++++--
 gtk/resources/theme/Adwaita/gtk-contained-dark.css |   51 ++++++++++++++++++--
 gtk/resources/theme/Adwaita/gtk-contained.css      |   51 ++++++++++++++++++--
 3 files changed, 116 insertions(+), 12 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index b09b148..b2d29b1 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -2242,15 +2242,33 @@ GtkScrolledWindow {
  *********************/
 
 .app-notification {
+  color: white;
+  icon-shadow: none;
   border-width: 0 1px 1px;
   border-style: solid;
-  border-color: $borders_color;
+  border-color: $osd_outer_borders_color;
   border-radius: 0 0 6px 6px;
-  background-image: linear-gradient(to bottom, mix(black, $bg_color, 6%) 5%,
-                              mix(black, $bg_color, 4%));
+    background-color: transparentize($osd_bg_color, 0.3);
+    background-clip: padding-box;
   // FIXME no space for outer shadow : box-shadow: 0 1px 1px rgba(0,0,0,.5);
   padding: 0 4px;
-  .button { padding: 6px; }
+  .button {
+    border-width: 1px;
+    color: $osd_fg_color;
+    outline-color: transparentize($osd_fg_color, 0.8);
+    @include button(osd);
+    &:hover { @include button(osd-hover); }
+    &:active, &:checked, &:backdrop:active, &:backdrop:checked {
+      @include button(osd-active);
+    }
+    &:insensitive, &:backdrop:insensitive {
+      @include button(osd-insensitive);
+    }
+    &:backdrop { @include button(osd-backdrop); }
+    &.flat, &.flat:backdrop, &.flat:backdrop:insensitive {
+      @extend %undecorated_button;
+    }
+  }
 }
 
 /*************
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css 
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 03fd583..2f28750 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -832,7 +832,7 @@ GtkAssistant .sidebar GtkLabel.highlight {
     border-radius: 3px;
     border-style: solid; }
 
-.button.flat, .button.flat:backdrop, .button.flat:backdrop:insensitive, .menuitem.button.flat, 
.menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, .button:link, .button:visited, 
.button:link:hover, .button:link:active, .button:link:checked, .button:visited:hover, .button:visited:active, 
.button:visited:checked, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, 
.list-row.button, .list-row.button:backdrop:hover, GtkCalendar.button, GtkCalendar.button:hover, .scale-popup 
.button:hover, .scale-popup .button:backdrop, .scale-popup .button:backdrop:hover, .scale-popup 
.button:backdrop:insensitive {
+.button.flat, .button.flat:backdrop, .button.flat:backdrop:insensitive, .menuitem.button.flat, 
.menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, .button:link, .button:visited, 
.button:link:hover, .button:link:active, .button:link:checked, .button:visited:hover, .button:visited:active, 
.button:visited:checked, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, 
.list-row.button, .list-row.button:backdrop:hover, .app-notification .button.flat, .app-notification 
.button.flat:backdrop, .app-notification .button.flat:backdrop:insensitive, GtkCalendar.button, 
GtkCalendar.button:hover, .scale-popup .button:hover, .scale-popup .button:backdrop, .scale-popup 
.button:backdrop:hover, .scale-popup .button:backdrop:insensitive {
   border-color: transparent;
   background-color: transparent;
   background-image: none;
@@ -2787,14 +2787,55 @@ GtkScrolledWindow GtkViewport.frame {
  * App Notifications *
  *********************/
 .app-notification {
+  color: white;
+  icon-shadow: none;
   border-width: 0 1px 1px;
   border-style: solid;
-  border-color: #1c1f1f;
+  border-color: rgba(255, 255, 255, 0.1);
   border-radius: 0 0 6px 6px;
-  background-image: linear-gradient(to bottom, #353b3b 5%, #363c3c);
+  background-color: rgba(46, 52, 54, 0.7);
+  background-clip: padding-box;
   padding: 0 4px; }
   .app-notification .button {
-    padding: 6px; }
+    border-width: 1px;
+    color: #eeeeec;
+    outline-color: rgba(238, 238, 236, 0.2);
+    border-style: solid;
+    background-color: transparent;
+    background-clip: padding-box;
+    background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+    border-color: rgba(0, 0, 0, 0.7);
+    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black; }
+    .app-notification .button:hover {
+      border-style: solid;
+      color: white;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(93, 105, 109, 0.7)); }
+    .app-notification .button:active, .app-notification .button:checked, .app-notification 
.button:backdrop:active, .app-notification .button:backdrop:checked {
+      border-style: solid;
+      color: white;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7));
+      box-shadow: none;
+      text-shadow: none;
+      icon-shadow: none; }
+    .app-notification .button:insensitive, .app-notification .button:backdrop:insensitive {
+      border-style: solid;
+      color: #939695;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(66, 71, 73, 0.7));
+      box-shadow: none;
+      text-shadow: none;
+      icon-shadow: none; }
+    .app-notification .button:backdrop {
+      border-style: solid;
+      background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+      background-clip: padding-box;
+      box-shadow: none;
+      text-shadow: none;
+      icon-shadow: none; }
 
 /*************
  * Expanders *
@@ -3292,3 +3333,5 @@ GtkCalendar.header .button.titlebutton {
     box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
     border-color: transparent;
     transition-property: border, box-shadow, color; }
+
+/*# sourceMappingURL=gtk-contained-dark.css.map */
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 63044e3..3d780e5 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -824,7 +824,7 @@ GtkAssistant .sidebar GtkLabel.highlight {
     border-radius: 3px;
     border-style: solid; }
 
-.button.flat, .button.flat:backdrop, .button.flat:backdrop:insensitive, .menuitem.button.flat, 
.menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, .button:link, .button:visited, 
.button:link:hover, .button:link:active, .button:link:checked, .button:visited:hover, .button:visited:active, 
.button:visited:checked, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, 
.list-row.button, .list-row.button:backdrop:hover, GtkCalendar.button, GtkCalendar.button:hover, .scale-popup 
.button:hover, .scale-popup .button:backdrop, .scale-popup .button:backdrop:hover, .scale-popup 
.button:backdrop:insensitive {
+.button.flat, .button.flat:backdrop, .button.flat:backdrop:insensitive, .menuitem.button.flat, 
.menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, .button:link, .button:visited, 
.button:link:hover, .button:link:active, .button:link:checked, .button:visited:hover, .button:visited:active, 
.button:visited:checked, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, 
.list-row.button, .list-row.button:backdrop:hover, .app-notification .button.flat, .app-notification 
.button.flat:backdrop, .app-notification .button.flat:backdrop:insensitive, GtkCalendar.button, 
GtkCalendar.button:hover, .scale-popup .button:hover, .scale-popup .button:backdrop, .scale-popup 
.button:backdrop:hover, .scale-popup .button:backdrop:insensitive {
   border-color: transparent;
   background-color: transparent;
   background-image: none;
@@ -2783,14 +2783,55 @@ GtkScrolledWindow GtkViewport.frame {
  * App Notifications *
  *********************/
 .app-notification {
+  color: white;
+  icon-shadow: none;
   border-width: 0 1px 1px;
   border-style: solid;
-  border-color: #a1a1a1;
+  border-color: rgba(255, 255, 255, 0.1);
   border-radius: 0 0 6px 6px;
-  background-image: linear-gradient(to bottom, #dedede 5%, #e3e3e3);
+  background-color: rgba(46, 52, 54, 0.7);
+  background-clip: padding-box;
   padding: 0 4px; }
   .app-notification .button {
-    padding: 6px; }
+    border-width: 1px;
+    color: #eeeeec;
+    outline-color: rgba(238, 238, 236, 0.2);
+    border-style: solid;
+    background-color: transparent;
+    background-clip: padding-box;
+    background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+    border-color: rgba(0, 0, 0, 0.7);
+    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black; }
+    .app-notification .button:hover {
+      border-style: solid;
+      color: white;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(93, 105, 109, 0.7)); }
+    .app-notification .button:active, .app-notification .button:checked, .app-notification 
.button:backdrop:active, .app-notification .button:backdrop:checked {
+      border-style: solid;
+      color: white;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7));
+      box-shadow: none;
+      text-shadow: none;
+      icon-shadow: none; }
+    .app-notification .button:insensitive, .app-notification .button:backdrop:insensitive {
+      border-style: solid;
+      color: #8d9091;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.7));
+      box-shadow: none;
+      text-shadow: none;
+      icon-shadow: none; }
+    .app-notification .button:backdrop {
+      border-style: solid;
+      background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
+      background-clip: padding-box;
+      box-shadow: none;
+      text-shadow: none;
+      icon-shadow: none; }
 
 /*************
  * Expanders *
@@ -3288,3 +3329,5 @@ GtkCalendar.header .button.titlebutton {
     box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
     border-color: transparent;
     transition-property: border, box-shadow, color; }
+
+/*# sourceMappingURL=gtk-contained.css.map */


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