diff --git a/gtk-3.0/gtk-dark.css b/gtk-3.0/gtk-dark.css index 52488cb..654ae16 100755 --- a/gtk-3.0/gtk-dark.css +++ b/gtk-3.0/gtk-dark.css @@ -118,6 +118,21 @@ read if you used those and something break with a version upgrade you're on your .app-notification.frame:backdrop { background-image: none; transition: 200ms ease-out; } + .app-notification button, .app-notification button.flat, + .app-notification.frame button, + .app-notification.frame button.flat { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(20, 23, 26, 0.8); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + .app-notification button:hover, .app-notification button.flat:hover, + .app-notification.frame button:hover, + .app-notification.frame button.flat:hover { + background: rgba(47, 54, 61, 0.8); } .app-notification border, .app-notification.frame border { border: none; } @@ -482,8 +497,7 @@ button.osd { -gtk-icon-shadow: none; border: none; } -.app-notification button, -.app-notification.frame button, .csd popover.background.touch-selection button, .csd popover.background.magnifier button, popover.background.touch-selection button, popover.background.magnifier button, +.csd popover.background.touch-selection button, .csd popover.background.magnifier button, popover.background.touch-selection button, popover.background.magnifier button, .osd button { color: #fefefe; @@ -494,7 +508,7 @@ button { text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(254, 254, 254, 0.3); } - .app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, + popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd button:hover { color: white; @@ -505,7 +519,7 @@ button { text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(254, 254, 254, 0.3); } - .app-notification button:active:backdrop, popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, .app-notification button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, .app-notification button:checked:backdrop, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, .app-notification button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, + popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, popover.background.touch-selection button:active, popover.background.magnifier button:active, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .osd button:active:backdrop, .osd @@ -522,7 +536,7 @@ button { text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(254, 254, 254, 0.3); } - .app-notification button:disabled:backdrop, popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, .app-notification button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, + popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, .osd button:disabled:backdrop, .osd @@ -534,7 +548,7 @@ button { box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } - .app-notification button:backdrop, popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop, + popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop, .osd button:backdrop { color: #fefefe; @@ -544,7 +558,7 @@ button { box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } - .app-notification button.flat, popover.background.touch-selection button.flat, popover.background.magnifier button.flat, + popover.background.touch-selection button.flat, popover.background.magnifier button.flat, .osd button.flat { background-color: transparent; @@ -556,7 +570,7 @@ button { box-shadow: none; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } - .app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, + popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .osd button.flat:hover { color: white; @@ -567,7 +581,7 @@ button { text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(254, 254, 254, 0.3); } - .app-notification button.flat:disabled, popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, + popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, .osd button.flat:disabled { color: #898b8c; @@ -580,7 +594,7 @@ button { background-image: none; border-color: transparent; box-shadow: none; } - .app-notification button.flat:backdrop, popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop, + popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop, .osd button.flat:backdrop { background-color: transparent; @@ -589,7 +603,7 @@ button { box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } - .app-notification button.flat:active, popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, .app-notification button.flat:checked, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked, + popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked, .osd button.flat:active, .osd diff --git a/gtk-3.0/gtk.css b/gtk-3.0/gtk.css index fe9f531..d7b515b 100755 --- a/gtk-3.0/gtk.css +++ b/gtk-3.0/gtk.css @@ -118,6 +118,21 @@ read if you used those and something break with a version upgrade you're on your .app-notification.frame:backdrop { background-image: none; transition: 200ms ease-out; } + .app-notification button, .app-notification button.flat, + .app-notification.frame button, + .app-notification.frame button.flat { + color: #fefefe; + border-color: rgba(0, 0, 0, 0.7); + background-color: rgba(20, 23, 26, 0.8); + background-clip: padding-box; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: rgba(254, 254, 254, 0.3); } + .app-notification button:hover, .app-notification button.flat:hover, + .app-notification.frame button:hover, + .app-notification.frame button.flat:hover { + background: rgba(47, 54, 61, 0.8); } .app-notification border, .app-notification.frame border { border: none; } @@ -485,8 +500,7 @@ button.osd { -gtk-icon-shadow: none; border: none; } -.app-notification button, -.app-notification.frame button, .csd popover.background.touch-selection button, .csd popover.background.magnifier button, popover.background.touch-selection button, popover.background.magnifier button, +.csd popover.background.touch-selection button, .csd popover.background.magnifier button, popover.background.touch-selection button, popover.background.magnifier button, .osd button { color: #fefefe; @@ -497,7 +511,7 @@ button { text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(254, 254, 254, 0.3); } - .app-notification button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, + popover.background.touch-selection button:hover, popover.background.magnifier button:hover, .osd button:hover { color: white; @@ -508,7 +522,7 @@ button { text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(254, 254, 254, 0.3); } - .app-notification button:active:backdrop, popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, .app-notification button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, .app-notification button:checked:backdrop, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, .app-notification button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, + popover.background.touch-selection button:active:backdrop, popover.background.magnifier button:active:backdrop, popover.background.touch-selection button:active, popover.background.magnifier button:active, popover.background.touch-selection button:checked:backdrop, popover.background.magnifier button:checked:backdrop, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, .osd button:active:backdrop, .osd @@ -525,7 +539,7 @@ button { text-shadow: none; -gtk-icon-shadow: none; outline-color: rgba(254, 254, 254, 0.3); } - .app-notification button:disabled:backdrop, popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, .app-notification button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, + popover.background.touch-selection button:disabled:backdrop, popover.background.magnifier button:disabled:backdrop, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, .osd button:disabled:backdrop, .osd @@ -537,7 +551,7 @@ button { box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } - .app-notification button:backdrop, popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop, + popover.background.touch-selection button:backdrop, popover.background.magnifier button:backdrop, .osd button:backdrop { color: #fefefe; @@ -547,7 +561,7 @@ button { box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; } - .app-notification button.flat, popover.background.touch-selection button.flat, popover.background.magnifier button.flat, + popover.background.touch-selection button.flat, popover.background.magnifier button.flat, .osd button.flat { background-color: transparent; @@ -559,7 +573,7 @@ button { box-shadow: none; text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; } - .app-notification button.flat:hover, popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, + popover.background.touch-selection button.flat:hover, popover.background.magnifier button.flat:hover, .osd button.flat:hover { color: white; @@ -570,7 +584,7 @@ button { text-shadow: 0 1px black; -gtk-icon-shadow: 0 1px black; outline-color: rgba(254, 254, 254, 0.3); } - .app-notification button.flat:disabled, popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, + popover.background.touch-selection button.flat:disabled, popover.background.magnifier button.flat:disabled, .osd button.flat:disabled { color: #898b8c; @@ -583,7 +597,7 @@ button { background-image: none; border-color: transparent; box-shadow: none; } - .app-notification button.flat:backdrop, popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop, + popover.background.touch-selection button.flat:backdrop, popover.background.magnifier button.flat:backdrop, .osd button.flat:backdrop { background-color: transparent; @@ -592,7 +606,7 @@ button { box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; } - .app-notification button.flat:active, popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, .app-notification button.flat:checked, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked, + popover.background.touch-selection button.flat:active, popover.background.magnifier button.flat:active, popover.background.touch-selection button.flat:checked, popover.background.magnifier button.flat:checked, .osd button.flat:active, .osd diff --git a/gtk-3.0/widgets/_app-notifications.scss b/gtk-3.0/widgets/_app-notifications.scss index fa46542..0f0f56c 100644 --- a/gtk-3.0/widgets/_app-notifications.scss +++ b/gtk-3.0/widgets/_app-notifications.scss @@ -17,7 +17,12 @@ transition: $backdrop_transition; } - button { @extend %osd_button; } + button, button.flat { + @include button(osd); + &:hover { + background: lighten($osd_bg_color, 12%); + } + } border { border: none; } }