From 96dae4b86e517902def3da2c9d3b8a2479fdb6ef Mon Sep 17 00:00:00 2001 From: Jakub Steiner Date: Fri, 22 Aug 2014 18:16:23 +0200 Subject: [PATCH] Adwaita: use osd style for in-app notifications --- gtk/resources/theme/Adwaita/_common.scss | 26 ++++++++-- .../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 b09b148c32..b2d29b1ac0 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 03fd583634..2f2875081c 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 63044e3d31..3d780e5d72 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 */