Adwaita: in app-notification padding

Adwaita now adds the `right` padding to the app notification, so it
shouldn't be set in the code via margins or whatever.
This commit is contained in:
Lapo Calamandrei 2014-09-04 19:18:13 +02:00
parent fa415d58a2
commit e5d34372c4
3 changed files with 151 additions and 32 deletions

View File

@ -2269,8 +2269,10 @@ GtkScrolledWindow {
* App Notifications *
*********************/
.app-notification {
.app-notification,
.app-notification.frame {
@extend %osd;
padding: 10px;
border-width: 0 1px 1px;
border-style: solid;
border-color: $osd_outer_borders_color;
@ -2279,7 +2281,6 @@ GtkScrolledWindow {
background-image: linear-gradient(to bottom, transparentize(black, 0.8),
transparent 2px);
background-clip: padding-box;
padding: 0 4px;
&:backdrop { background-image: none; }
.button {
border: 1px solid;

View File

@ -123,7 +123,8 @@ GtkFlowBox .grid-child {
GtkFlowBox .grid-child:selected {
outline-offset: -2px; }
.app-notification, .osd {
.app-notification,
.app-notification.frame, .osd {
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3);
text-shadow: 0 1px black;
@ -997,7 +998,9 @@ GtkCalendar.header .inline-toolbar GtkToolButton:backdrop:only-child > .button.t
.menuitem.button.flat, .header-bar .menuitem.titlebutton.button,
.titlebar .menuitem.titlebutton.button,
GtkCalendar.header .menuitem.titlebutton.button, .menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, .header-bar .menuitem.titlebutton.button:backdrop:hover,
GtkCalendar.header .menuitem.titlebutton.button, .menuitem.button.flat:backdrop, .header-bar .menuitem.titlebutton.button:backdrop,
.titlebar .menuitem.titlebutton.button:backdrop,
GtkCalendar.header .menuitem.titlebutton.button:backdrop, .menuitem.button.flat:backdrop:hover, .header-bar .menuitem.titlebutton.button:backdrop:hover,
.titlebar .menuitem.titlebutton.button:backdrop:hover,
GtkCalendar.header .menuitem.titlebutton.button:backdrop:hover, .button:link, .header-bar .button.titlebutton:link,
.titlebar .button.titlebutton:link,
@ -1013,13 +1016,51 @@ GtkCalendar.header .list-row.button.titlebutton, .list-row.button:backdrop:hover
.app-notification .titlebar .titlebutton.button,
.titlebar .app-notification .titlebutton.button,
.app-notification GtkCalendar.header .titlebutton.button,
GtkCalendar.header .app-notification .titlebutton.button, .app-notification .button.flat:backdrop, .app-notification .button.flat:insensitive, .app-notification .button.flat:backdrop:insensitive, .app-notification .header-bar .titlebutton.button:backdrop:insensitive, .header-bar .app-notification .titlebutton.button:backdrop:insensitive,
GtkCalendar.header .app-notification .titlebutton.button,
.app-notification.frame .button.flat,
.app-notification.frame .header-bar .button.titlebutton,
.header-bar .app-notification.frame .button.titlebutton,
.app-notification.frame .titlebar .button.titlebutton,
.titlebar .app-notification.frame .button.titlebutton,
.app-notification.frame GtkCalendar.header .button.titlebutton,
GtkCalendar.header .app-notification.frame .button.titlebutton, .app-notification .button.flat:backdrop, .app-notification .header-bar .titlebutton.button:backdrop, .header-bar .app-notification .titlebutton.button:backdrop,
.app-notification .titlebar .titlebutton.button:backdrop,
.titlebar .app-notification .titlebutton.button:backdrop,
.app-notification GtkCalendar.header .titlebutton.button:backdrop,
GtkCalendar.header .app-notification .titlebutton.button:backdrop, .app-notification .button.flat:insensitive, .app-notification .header-bar .titlebutton.button:insensitive, .header-bar .app-notification .titlebutton.button:insensitive,
.app-notification .titlebar .titlebutton.button:insensitive,
.titlebar .app-notification .titlebutton.button:insensitive,
.app-notification GtkCalendar.header .titlebutton.button:insensitive,
GtkCalendar.header .app-notification .titlebutton.button:insensitive, .app-notification .button.flat:backdrop:insensitive, .app-notification .header-bar .titlebutton.button:backdrop:insensitive, .header-bar .app-notification .titlebutton.button:backdrop:insensitive,
.app-notification .titlebar .titlebutton.button:backdrop:insensitive,
.titlebar .app-notification .titlebutton.button:backdrop:insensitive,
.app-notification GtkCalendar.header .titlebutton.button:backdrop:insensitive,
GtkCalendar.header .app-notification .titlebutton.button:backdrop:insensitive, GtkCalendar.button, .header-bar GtkCalendar.button.titlebutton,
GtkCalendar.header .app-notification .titlebutton.button:backdrop:insensitive,
.app-notification.frame .button.flat:backdrop,
.app-notification.frame .header-bar .button.titlebutton:backdrop,
.header-bar .app-notification.frame .button.titlebutton:backdrop,
.app-notification.frame .titlebar .button.titlebutton:backdrop,
.titlebar .app-notification.frame .button.titlebutton:backdrop,
.app-notification.frame GtkCalendar.header .button.titlebutton:backdrop,
GtkCalendar.header .app-notification.frame .button.titlebutton:backdrop,
.app-notification.frame .button.flat:insensitive,
.app-notification.frame .header-bar .button.titlebutton:insensitive,
.header-bar .app-notification.frame .button.titlebutton:insensitive,
.app-notification.frame .titlebar .button.titlebutton:insensitive,
.titlebar .app-notification.frame .button.titlebutton:insensitive,
.app-notification.frame GtkCalendar.header .button.titlebutton:insensitive,
GtkCalendar.header .app-notification.frame .button.titlebutton:insensitive,
.app-notification.frame .button.flat:backdrop:insensitive,
.app-notification.frame .header-bar .button.titlebutton:backdrop:insensitive,
.header-bar .app-notification.frame .button.titlebutton:backdrop:insensitive,
.app-notification.frame .titlebar .button.titlebutton:backdrop:insensitive,
.titlebar .app-notification.frame .button.titlebutton:backdrop:insensitive,
.app-notification.frame GtkCalendar.header .button.titlebutton:backdrop:insensitive,
GtkCalendar.header .app-notification.frame .button.titlebutton:backdrop:insensitive, GtkCalendar.button, .header-bar GtkCalendar.button.titlebutton,
.titlebar GtkCalendar.button.titlebutton,
GtkCalendar.header GtkCalendar.button.titlebutton, GtkCalendar.button:hover, .scale-popup .button:hover, .scale-popup .button:backdrop, .scale-popup .button:backdrop:hover, .scale-popup .button:backdrop:insensitive {
GtkCalendar.header GtkCalendar.button.titlebutton, GtkCalendar.button:hover, .header-bar GtkCalendar.button.titlebutton:hover,
.titlebar GtkCalendar.button.titlebutton:hover,
GtkCalendar.header GtkCalendar.button.titlebutton: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;
@ -3384,22 +3425,25 @@ GtkCalendar.header .list-row.button.titlebutton {
/*********************
* App Notifications *
*********************/
.app-notification {
.app-notification,
.app-notification.frame {
padding: 10px;
border-width: 0 1px 1px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.1);
border-radius: 0 0 6px 6px;
background-color: rgba(46, 52, 54, 0.7);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px);
background-clip: padding-box;
padding: 0 4px; }
.app-notification:backdrop {
background-clip: padding-box; }
.app-notification:backdrop,
.app-notification.frame:backdrop {
background-image: none; }
.app-notification .button, .app-notification .header-bar .button.titlebutton, .header-bar .app-notification .button.titlebutton,
.app-notification .titlebar .button.titlebutton,
.titlebar .app-notification .button.titlebutton,
.app-notification GtkCalendar.header .button.titlebutton,
GtkCalendar.header .app-notification .button.titlebutton {
GtkCalendar.header .app-notification .button.titlebutton,
.app-notification.frame .button {
border: 1px solid;
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.2);
@ -3416,31 +3460,46 @@ GtkCalendar.header .list-row.button.titlebutton {
.app-notification .titlebar .titlebutton.button,
.titlebar .app-notification .titlebutton.button,
.app-notification GtkCalendar.header .titlebutton.button,
GtkCalendar.header .app-notification .titlebutton.button {
GtkCalendar.header .app-notification .titlebutton.button,
.app-notification.frame .button.flat,
.app-notification.frame .header-bar .titlebutton.button,
.header-bar .app-notification.frame .titlebutton.button,
.app-notification.frame .titlebar .titlebutton.button,
.titlebar .app-notification.frame .titlebutton.button,
.app-notification.frame GtkCalendar.header .titlebutton.button,
GtkCalendar.header .app-notification.frame .titlebutton.button {
icon-shadow: 0 1px black;
text-shadow: 0 1px black; }
.app-notification .button:hover {
.app-notification .button:hover,
.app-notification.frame .button:hover {
color: white;
border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(74, 84, 87, 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:active, .app-notification .button:checked, .app-notification .button:backdrop:active, .app-notification .button:backdrop:checked {
.app-notification .button:active, .app-notification .button:checked, .app-notification .button:backdrop:active, .app-notification .button:backdrop:checked,
.app-notification.frame .button:active,
.app-notification.frame .button:checked,
.app-notification.frame .button:backdrop:active,
.app-notification.frame .button:backdrop:checked {
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 {
.app-notification .button:insensitive, .app-notification .button:backdrop:insensitive,
.app-notification.frame .button:insensitive,
.app-notification.frame .button:backdrop:insensitive {
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 {
.app-notification .button:backdrop,
.app-notification.frame .button:backdrop {
color: #eeeeec;
background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
background-clip: padding-box;

View File

@ -123,7 +123,8 @@ GtkFlowBox .grid-child {
GtkFlowBox .grid-child:selected {
outline-offset: -2px; }
.app-notification, .osd {
.app-notification,
.app-notification.frame, .osd {
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3);
text-shadow: 0 1px black;
@ -989,7 +990,9 @@ GtkCalendar.header .inline-toolbar GtkToolButton:backdrop:only-child > .button.t
.menuitem.button.flat, .header-bar .menuitem.titlebutton.button,
.titlebar .menuitem.titlebutton.button,
GtkCalendar.header .menuitem.titlebutton.button, .menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, .header-bar .menuitem.titlebutton.button:backdrop:hover,
GtkCalendar.header .menuitem.titlebutton.button, .menuitem.button.flat:backdrop, .header-bar .menuitem.titlebutton.button:backdrop,
.titlebar .menuitem.titlebutton.button:backdrop,
GtkCalendar.header .menuitem.titlebutton.button:backdrop, .menuitem.button.flat:backdrop:hover, .header-bar .menuitem.titlebutton.button:backdrop:hover,
.titlebar .menuitem.titlebutton.button:backdrop:hover,
GtkCalendar.header .menuitem.titlebutton.button:backdrop:hover, .button:link, .header-bar .button.titlebutton:link,
.titlebar .button.titlebutton:link,
@ -1005,13 +1008,51 @@ GtkCalendar.header .list-row.button.titlebutton, .list-row.button:backdrop:hover
.app-notification .titlebar .titlebutton.button,
.titlebar .app-notification .titlebutton.button,
.app-notification GtkCalendar.header .titlebutton.button,
GtkCalendar.header .app-notification .titlebutton.button, .app-notification .button.flat:backdrop, .app-notification .button.flat:insensitive, .app-notification .button.flat:backdrop:insensitive, .app-notification .header-bar .titlebutton.button:backdrop:insensitive, .header-bar .app-notification .titlebutton.button:backdrop:insensitive,
GtkCalendar.header .app-notification .titlebutton.button,
.app-notification.frame .button.flat,
.app-notification.frame .header-bar .button.titlebutton,
.header-bar .app-notification.frame .button.titlebutton,
.app-notification.frame .titlebar .button.titlebutton,
.titlebar .app-notification.frame .button.titlebutton,
.app-notification.frame GtkCalendar.header .button.titlebutton,
GtkCalendar.header .app-notification.frame .button.titlebutton, .app-notification .button.flat:backdrop, .app-notification .header-bar .titlebutton.button:backdrop, .header-bar .app-notification .titlebutton.button:backdrop,
.app-notification .titlebar .titlebutton.button:backdrop,
.titlebar .app-notification .titlebutton.button:backdrop,
.app-notification GtkCalendar.header .titlebutton.button:backdrop,
GtkCalendar.header .app-notification .titlebutton.button:backdrop, .app-notification .button.flat:insensitive, .app-notification .header-bar .titlebutton.button:insensitive, .header-bar .app-notification .titlebutton.button:insensitive,
.app-notification .titlebar .titlebutton.button:insensitive,
.titlebar .app-notification .titlebutton.button:insensitive,
.app-notification GtkCalendar.header .titlebutton.button:insensitive,
GtkCalendar.header .app-notification .titlebutton.button:insensitive, .app-notification .button.flat:backdrop:insensitive, .app-notification .header-bar .titlebutton.button:backdrop:insensitive, .header-bar .app-notification .titlebutton.button:backdrop:insensitive,
.app-notification .titlebar .titlebutton.button:backdrop:insensitive,
.titlebar .app-notification .titlebutton.button:backdrop:insensitive,
.app-notification GtkCalendar.header .titlebutton.button:backdrop:insensitive,
GtkCalendar.header .app-notification .titlebutton.button:backdrop:insensitive, GtkCalendar.button, .header-bar GtkCalendar.button.titlebutton,
GtkCalendar.header .app-notification .titlebutton.button:backdrop:insensitive,
.app-notification.frame .button.flat:backdrop,
.app-notification.frame .header-bar .button.titlebutton:backdrop,
.header-bar .app-notification.frame .button.titlebutton:backdrop,
.app-notification.frame .titlebar .button.titlebutton:backdrop,
.titlebar .app-notification.frame .button.titlebutton:backdrop,
.app-notification.frame GtkCalendar.header .button.titlebutton:backdrop,
GtkCalendar.header .app-notification.frame .button.titlebutton:backdrop,
.app-notification.frame .button.flat:insensitive,
.app-notification.frame .header-bar .button.titlebutton:insensitive,
.header-bar .app-notification.frame .button.titlebutton:insensitive,
.app-notification.frame .titlebar .button.titlebutton:insensitive,
.titlebar .app-notification.frame .button.titlebutton:insensitive,
.app-notification.frame GtkCalendar.header .button.titlebutton:insensitive,
GtkCalendar.header .app-notification.frame .button.titlebutton:insensitive,
.app-notification.frame .button.flat:backdrop:insensitive,
.app-notification.frame .header-bar .button.titlebutton:backdrop:insensitive,
.header-bar .app-notification.frame .button.titlebutton:backdrop:insensitive,
.app-notification.frame .titlebar .button.titlebutton:backdrop:insensitive,
.titlebar .app-notification.frame .button.titlebutton:backdrop:insensitive,
.app-notification.frame GtkCalendar.header .button.titlebutton:backdrop:insensitive,
GtkCalendar.header .app-notification.frame .button.titlebutton:backdrop:insensitive, GtkCalendar.button, .header-bar GtkCalendar.button.titlebutton,
.titlebar GtkCalendar.button.titlebutton,
GtkCalendar.header GtkCalendar.button.titlebutton, GtkCalendar.button:hover, .scale-popup .button:hover, .scale-popup .button:backdrop, .scale-popup .button:backdrop:hover, .scale-popup .button:backdrop:insensitive {
GtkCalendar.header GtkCalendar.button.titlebutton, GtkCalendar.button:hover, .header-bar GtkCalendar.button.titlebutton:hover,
.titlebar GtkCalendar.button.titlebutton:hover,
GtkCalendar.header GtkCalendar.button.titlebutton: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;
@ -3531,22 +3572,25 @@ GtkCalendar.header .list-row.button.titlebutton {
/*********************
* App Notifications *
*********************/
.app-notification {
.app-notification,
.app-notification.frame {
padding: 10px;
border-width: 0 1px 1px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.1);
border-radius: 0 0 6px 6px;
background-color: rgba(46, 52, 54, 0.7);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px);
background-clip: padding-box;
padding: 0 4px; }
.app-notification:backdrop {
background-clip: padding-box; }
.app-notification:backdrop,
.app-notification.frame:backdrop {
background-image: none; }
.app-notification .button, .app-notification .header-bar .button.titlebutton, .header-bar .app-notification .button.titlebutton,
.app-notification .titlebar .button.titlebutton,
.titlebar .app-notification .button.titlebutton,
.app-notification GtkCalendar.header .button.titlebutton,
GtkCalendar.header .app-notification .button.titlebutton {
GtkCalendar.header .app-notification .button.titlebutton,
.app-notification.frame .button {
border: 1px solid;
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.2);
@ -3563,31 +3607,46 @@ GtkCalendar.header .list-row.button.titlebutton {
.app-notification .titlebar .titlebutton.button,
.titlebar .app-notification .titlebutton.button,
.app-notification GtkCalendar.header .titlebutton.button,
GtkCalendar.header .app-notification .titlebutton.button {
GtkCalendar.header .app-notification .titlebutton.button,
.app-notification.frame .button.flat,
.app-notification.frame .header-bar .titlebutton.button,
.header-bar .app-notification.frame .titlebutton.button,
.app-notification.frame .titlebar .titlebutton.button,
.titlebar .app-notification.frame .titlebutton.button,
.app-notification.frame GtkCalendar.header .titlebutton.button,
GtkCalendar.header .app-notification.frame .titlebutton.button {
icon-shadow: 0 1px black;
text-shadow: 0 1px black; }
.app-notification .button:hover {
.app-notification .button:hover,
.app-notification.frame .button:hover {
color: white;
border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(74, 84, 87, 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:active, .app-notification .button:checked, .app-notification .button:backdrop:active, .app-notification .button:backdrop:checked {
.app-notification .button:active, .app-notification .button:checked, .app-notification .button:backdrop:active, .app-notification .button:backdrop:checked,
.app-notification.frame .button:active,
.app-notification.frame .button:checked,
.app-notification.frame .button:backdrop:active,
.app-notification.frame .button:backdrop:checked {
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 {
.app-notification .button:insensitive, .app-notification .button:backdrop:insensitive,
.app-notification.frame .button:insensitive,
.app-notification.frame .button:backdrop:insensitive {
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 {
.app-notification .button:backdrop,
.app-notification.frame .button:backdrop {
color: #eeeeec;
background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
background-clip: padding-box;