From 57ad5914bcad78c5e05d749100907def5cfc9dd5 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 25 Nov 2016 16:15:39 +0100 Subject: cinnamon 3.2: fix notifications inside menus (#695) --- common/cinnamon/cinnamon-dark.css | 59 ++++++++++++++++++++++++++++++++------- common/cinnamon/cinnamon.css | 59 ++++++++++++++++++++++++++++++++------- common/cinnamon/sass/_common.scss | 3 +- 3 files changed, 100 insertions(+), 21 deletions(-) (limited to 'common') diff --git a/common/cinnamon/cinnamon-dark.css b/common/cinnamon/cinnamon-dark.css index 2dabfef..54b9623 100644 --- a/common/cinnamon/cinnamon-dark.css +++ b/common/cinnamon/cinnamon-dark.css @@ -6,7 +6,9 @@ stage { .label-shadow { color: transparent; } -.popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button, .sound-button { +.menu #notification .notification-button, .menu #notification .notification-icon-button, +.popup-menu #notification .notification-button, +.popup-menu #notification .notification-icon-button, .sound-button { min-height: 20px; padding: 5px 32px; transition-duration: 0; @@ -15,33 +17,59 @@ stage { background-color: #444a58; border: 1px solid #2b2e39; box-shadow: inset 0 2px 4px rgba(68, 74, 88, 0.05); } - .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button, .sound-button, .popup-menu #notification .notification-button:focus, .popup-menu #notification .notification-icon-button:focus, .sound-button:focus, .popup-menu #notification .notification-button:hover, .popup-menu #notification .notification-icon-button:hover, .menu-favorites-button:hover, .menu-application-button-selected, .menu-category-button-selected, .sound-button:hover, .popup-menu #notification .notification-button:hover:focus, .popup-menu #notification .notification-icon-button:hover:focus, .menu-favorites-button:focus:hover, .menu-application-button-selected:focus, .menu-category-button-selected:focus, .sound-button:hover:focus, .popup-menu #notification .notification-button:active, .popup-menu #notification .notification-icon-button:active, .sound-button:active, .popup-menu #notification .notification-button:active:focus, .popup-menu #notification .notification-icon-button:active:focus, .sound-button:active:focus, .popup-menu #notification .notification-button:insensitive, .popup-menu #notification .notification-icon-button:insensitive, .sound-button:insensitive { + .menu #notification .notification-button, .menu #notification .notification-icon-button, + .popup-menu #notification .notification-button, + .popup-menu #notification .notification-icon-button, .sound-button, .menu #notification .notification-button:focus, .menu #notification .notification-icon-button:focus, + .popup-menu #notification .notification-button:focus, + .popup-menu #notification .notification-icon-button:focus, .sound-button:focus, .menu #notification .notification-button:hover, .menu #notification .notification-icon-button:hover, + .popup-menu #notification .notification-button:hover, + .popup-menu #notification .notification-icon-button:hover, .menu-favorites-button:hover, .menu-application-button-selected, .menu-category-button-selected, .sound-button:hover, .menu #notification .notification-button:hover:focus, .menu #notification .notification-icon-button:hover:focus, + .popup-menu #notification .notification-button:hover:focus, + .popup-menu #notification .notification-icon-button:hover:focus, .menu-favorites-button:focus:hover, .menu-application-button-selected:focus, .menu-category-button-selected:focus, .sound-button:hover:focus, .menu #notification .notification-button:active, .menu #notification .notification-icon-button:active, + .popup-menu #notification .notification-button:active, + .popup-menu #notification .notification-icon-button:active, .sound-button:active, .menu #notification .notification-button:active:focus, .menu #notification .notification-icon-button:active:focus, + .popup-menu #notification .notification-button:active:focus, + .popup-menu #notification .notification-icon-button:active:focus, .sound-button:active:focus, .menu #notification .notification-button:insensitive, .menu #notification .notification-icon-button:insensitive, + .popup-menu #notification .notification-button:insensitive, + .popup-menu #notification .notification-icon-button:insensitive, .sound-button:insensitive { border-radius: 2px; } - .popup-menu #notification .notification-button:focus, .popup-menu #notification .notification-icon-button:focus, .sound-button:focus { + .menu #notification .notification-button:focus, .menu #notification .notification-icon-button:focus, + .popup-menu #notification .notification-button:focus, + .popup-menu #notification .notification-icon-button:focus, .sound-button:focus { text-shadow: 0 1px rgba(64, 69, 82, 0); color: #D3DAE3; background-color: #444a58; border: 1px solid #5294e2; box-shadow: inset 0 2px 4px rgba(68, 74, 88, 0.05); } - .popup-menu #notification .notification-button:hover, .popup-menu #notification .notification-icon-button:hover, .menu-favorites-button:hover, .menu-application-button-selected, .menu-category-button-selected, .sound-button:hover { + .menu #notification .notification-button:hover, .menu #notification .notification-icon-button:hover, + .popup-menu #notification .notification-button:hover, + .popup-menu #notification .notification-icon-button:hover, .menu-favorites-button:hover, .menu-application-button-selected, .menu-category-button-selected, .sound-button:hover { text-shadow: 0 1px rgba(64, 69, 82, 0); color: #D3DAE3; background-color: #505666; border: 1px solid #2b2e39; box-shadow: inset 0 2px 4px rgba(80, 86, 102, 0.05); } - .popup-menu #notification .notification-button:hover:focus, .popup-menu #notification .notification-icon-button:hover:focus, .menu-favorites-button:focus:hover, .menu-application-button-selected:focus, .menu-category-button-selected:focus, .sound-button:hover:focus { + .menu #notification .notification-button:hover:focus, .menu #notification .notification-icon-button:hover:focus, + .popup-menu #notification .notification-button:hover:focus, + .popup-menu #notification .notification-icon-button:hover:focus, .menu-favorites-button:focus:hover, .menu-application-button-selected:focus, .menu-category-button-selected:focus, .sound-button:hover:focus { text-shadow: 0 1px rgba(64, 69, 82, 0); color: #D3DAE3; background-color: #444a58; border: 1px solid #5294e2; box-shadow: inset 0 2px 4px rgba(68, 74, 88, 0.05); } - .popup-menu #notification .notification-button:active, .popup-menu #notification .notification-icon-button:active, .sound-button:active, .popup-menu #notification .notification-button:active:focus, .popup-menu #notification .notification-icon-button:active:focus, .sound-button:active:focus { + .menu #notification .notification-button:active, .menu #notification .notification-icon-button:active, + .popup-menu #notification .notification-button:active, + .popup-menu #notification .notification-icon-button:active, .sound-button:active, .menu #notification .notification-button:active:focus, .menu #notification .notification-icon-button:active:focus, + .popup-menu #notification .notification-button:active:focus, + .popup-menu #notification .notification-icon-button:active:focus, .sound-button:active:focus { text-shadow: 0 1px rgba(64, 69, 82, 0); color: #ffffff; background-color: #5294e2; border: 1px solid #5294e2; box-shadow: inset 0 2px 4px #5294e2; } - .popup-menu #notification .notification-button:insensitive, .popup-menu #notification .notification-icon-button:insensitive, .sound-button:insensitive { + .menu #notification .notification-button:insensitive, .menu #notification .notification-icon-button:insensitive, + .popup-menu #notification .notification-button:insensitive, + .popup-menu #notification .notification-icon-button:insensitive, .sound-button:insensitive { text-shadow: 0 1px rgba(64, 69, 82, 0); color: rgba(211, 218, 227, 0.45); border: 1px solid rgba(43, 46, 57, 0.55); @@ -75,6 +103,7 @@ stage { border: 1px solid rgba(26, 28, 34, 0.35); background-color: rgba(102, 109, 132, 0.2); } +.menu #notification StEntry, .popup-menu #notification StEntry, #menu-search-entry { padding: 7px; caret-size: 1px; @@ -86,16 +115,20 @@ stage { background-color: #404552; border: 1px solid #2b2e39; box-shadow: inset 0 2px 4px rgba(64, 69, 82, 0.05); } - .popup-menu #notification StEntry:focus, #menu-search-entry:focus, .popup-menu #notification StEntry:hover, #menu-search-entry:hover { + .menu #notification StEntry:focus, + .popup-menu #notification StEntry:focus, #menu-search-entry:focus, .menu #notification StEntry:hover, + .popup-menu #notification StEntry:hover, #menu-search-entry:hover { color: #D3DAE3; background-color: #404552; border: 1px solid #5294e2; box-shadow: inset 0 2px 4px rgba(64, 69, 82, 0.05); } + .menu #notification StEntry:insensitive, .popup-menu #notification StEntry:insensitive, #menu-search-entry:insensitive { color: rgba(211, 218, 227, 0.45); background-color: #3c414e; border-color: 1px solid #313440; box-shadow: inset 0 2px 4px rgba(60, 65, 78, 0.05); } + .menu #notification StEntry StIcon.capslock-warning, .popup-menu #notification StEntry StIcon.capslock-warning, #menu-search-entry StIcon.capslock-warning { icon-size: 16px; warning-color: #F27835; @@ -661,10 +694,16 @@ StScrollBar { margin-from-right-edge-of-screen: 20px; width: 34em; color: #BAC3CF; } + .menu #notification, .popup-menu #notification { - color: #D3DAE3; border-image: url("dark-assets/misc/message.svg") 9 9 9 9; } - .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button { + .menu #notification, .menu #notification.multi-line-notification, + .popup-menu #notification, + .popup-menu #notification.multi-line-notification { + color: #D3DAE3; } + .menu #notification .notification-button, .menu #notification .notification-icon-button, + .popup-menu #notification .notification-button, + .popup-menu #notification .notification-icon-button { padding: 5px; } #notification.multi-line-notification { padding-bottom: 13px; diff --git a/common/cinnamon/cinnamon.css b/common/cinnamon/cinnamon.css index 22018ec..35b82be 100644 --- a/common/cinnamon/cinnamon.css +++ b/common/cinnamon/cinnamon.css @@ -6,7 +6,9 @@ stage { .label-shadow { color: transparent; } -.popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button, .sound-button { +.menu #notification .notification-button, .menu #notification .notification-icon-button, +.popup-menu #notification .notification-button, +.popup-menu #notification .notification-icon-button, .sound-button { min-height: 20px; padding: 5px 32px; transition-duration: 0; @@ -15,33 +17,59 @@ stage { background-color: #fbfbfc; border: 1px solid #cfd6e6; box-shadow: inset 0 2px 4px rgba(251, 251, 252, 0.05); } - .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button, .sound-button, .popup-menu #notification .notification-button:focus, .popup-menu #notification .notification-icon-button:focus, .sound-button:focus, .popup-menu #notification .notification-button:hover, .popup-menu #notification .notification-icon-button:hover, .menu-favorites-button:hover, .menu-application-button-selected, .menu-category-button-selected, .sound-button:hover, .popup-menu #notification .notification-button:hover:focus, .popup-menu #notification .notification-icon-button:hover:focus, .menu-favorites-button:focus:hover, .menu-application-button-selected:focus, .menu-category-button-selected:focus, .sound-button:hover:focus, .popup-menu #notification .notification-button:active, .popup-menu #notification .notification-icon-button:active, .sound-button:active, .popup-menu #notification .notification-button:active:focus, .popup-menu #notification .notification-icon-button:active:focus, .sound-button:active:focus, .popup-menu #notification .notification-button:insensitive, .popup-menu #notification .notification-icon-button:insensitive, .sound-button:insensitive { + .menu #notification .notification-button, .menu #notification .notification-icon-button, + .popup-menu #notification .notification-button, + .popup-menu #notification .notification-icon-button, .sound-button, .menu #notification .notification-button:focus, .menu #notification .notification-icon-button:focus, + .popup-menu #notification .notification-button:focus, + .popup-menu #notification .notification-icon-button:focus, .sound-button:focus, .menu #notification .notification-button:hover, .menu #notification .notification-icon-button:hover, + .popup-menu #notification .notification-button:hover, + .popup-menu #notification .notification-icon-button:hover, .menu-favorites-button:hover, .menu-application-button-selected, .menu-category-button-selected, .sound-button:hover, .menu #notification .notification-button:hover:focus, .menu #notification .notification-icon-button:hover:focus, + .popup-menu #notification .notification-button:hover:focus, + .popup-menu #notification .notification-icon-button:hover:focus, .menu-favorites-button:focus:hover, .menu-application-button-selected:focus, .menu-category-button-selected:focus, .sound-button:hover:focus, .menu #notification .notification-button:active, .menu #notification .notification-icon-button:active, + .popup-menu #notification .notification-button:active, + .popup-menu #notification .notification-icon-button:active, .sound-button:active, .menu #notification .notification-button:active:focus, .menu #notification .notification-icon-button:active:focus, + .popup-menu #notification .notification-button:active:focus, + .popup-menu #notification .notification-icon-button:active:focus, .sound-button:active:focus, .menu #notification .notification-button:insensitive, .menu #notification .notification-icon-button:insensitive, + .popup-menu #notification .notification-button:insensitive, + .popup-menu #notification .notification-icon-button:insensitive, .sound-button:insensitive { border-radius: 2px; } - .popup-menu #notification .notification-button:focus, .popup-menu #notification .notification-icon-button:focus, .sound-button:focus { + .menu #notification .notification-button:focus, .menu #notification .notification-icon-button:focus, + .popup-menu #notification .notification-button:focus, + .popup-menu #notification .notification-icon-button:focus, .sound-button:focus { text-shadow: 0 1px rgba(255, 255, 255, 0); color: #5c616c; background-color: #fbfbfc; border: 1px solid #5294e2; box-shadow: inset 0 2px 4px rgba(251, 251, 252, 0.05); } - .popup-menu #notification .notification-button:hover, .popup-menu #notification .notification-icon-button:hover, .menu-favorites-button:hover, .menu-application-button-selected, .menu-category-button-selected, .sound-button:hover { + .menu #notification .notification-button:hover, .menu #notification .notification-icon-button:hover, + .popup-menu #notification .notification-button:hover, + .popup-menu #notification .notification-icon-button:hover, .menu-favorites-button:hover, .menu-application-button-selected, .menu-category-button-selected, .sound-button:hover { text-shadow: 0 1px rgba(255, 255, 255, 0); color: #5c616c; background-color: white; border: 1px solid #cfd6e6; box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.05); } - .popup-menu #notification .notification-button:hover:focus, .popup-menu #notification .notification-icon-button:hover:focus, .menu-favorites-button:focus:hover, .menu-application-button-selected:focus, .menu-category-button-selected:focus, .sound-button:hover:focus { + .menu #notification .notification-button:hover:focus, .menu #notification .notification-icon-button:hover:focus, + .popup-menu #notification .notification-button:hover:focus, + .popup-menu #notification .notification-icon-button:hover:focus, .menu-favorites-button:focus:hover, .menu-application-button-selected:focus, .menu-category-button-selected:focus, .sound-button:hover:focus { text-shadow: 0 1px rgba(255, 255, 255, 0); color: #5c616c; background-color: #fbfbfc; border: 1px solid #5294e2; box-shadow: inset 0 2px 4px rgba(251, 251, 252, 0.05); } - .popup-menu #notification .notification-button:active, .popup-menu #notification .notification-icon-button:active, .sound-button:active, .popup-menu #notification .notification-button:active:focus, .popup-menu #notification .notification-icon-button:active:focus, .sound-button:active:focus { + .menu #notification .notification-button:active, .menu #notification .notification-icon-button:active, + .popup-menu #notification .notification-button:active, + .popup-menu #notification .notification-icon-button:active, .sound-button:active, .menu #notification .notification-button:active:focus, .menu #notification .notification-icon-button:active:focus, + .popup-menu #notification .notification-button:active:focus, + .popup-menu #notification .notification-icon-button:active:focus, .sound-button:active:focus { text-shadow: 0 1px rgba(255, 255, 255, 0); color: #ffffff; background-color: #5294e2; border: 1px solid #5294e2; box-shadow: inset 0 2px 4px #5294e2; } - .popup-menu #notification .notification-button:insensitive, .popup-menu #notification .notification-icon-button:insensitive, .sound-button:insensitive { + .menu #notification .notification-button:insensitive, .menu #notification .notification-icon-button:insensitive, + .popup-menu #notification .notification-button:insensitive, + .popup-menu #notification .notification-icon-button:insensitive, .sound-button:insensitive { text-shadow: 0 1px rgba(255, 255, 255, 0); color: rgba(92, 97, 108, 0.55); border: 1px solid rgba(207, 214, 230, 0.55); @@ -75,6 +103,7 @@ stage { border: 1px solid rgba(26, 28, 34, 0.35); background-color: rgba(102, 109, 132, 0.2); } +.menu #notification StEntry, .popup-menu #notification StEntry, #menu-search-entry { padding: 7px; caret-size: 1px; @@ -86,16 +115,20 @@ stage { background-color: #ffffff; border: 1px solid #cfd6e6; box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.05); } - .popup-menu #notification StEntry:focus, #menu-search-entry:focus, .popup-menu #notification StEntry:hover, #menu-search-entry:hover { + .menu #notification StEntry:focus, + .popup-menu #notification StEntry:focus, #menu-search-entry:focus, .menu #notification StEntry:hover, + .popup-menu #notification StEntry:hover, #menu-search-entry:hover { color: #5c616c; background-color: #ffffff; border: 1px solid #5294e2; box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.05); } + .menu #notification StEntry:insensitive, .popup-menu #notification StEntry:insensitive, #menu-search-entry:insensitive { color: rgba(92, 97, 108, 0.55); background-color: #fbfbfb; border-color: 1px solid #e0e4ee; box-shadow: inset 0 2px 4px rgba(251, 251, 251, 0.05); } + .menu #notification StEntry StIcon.capslock-warning, .popup-menu #notification StEntry StIcon.capslock-warning, #menu-search-entry StIcon.capslock-warning { icon-size: 16px; warning-color: #F27835; @@ -661,10 +694,16 @@ StScrollBar { margin-from-right-edge-of-screen: 20px; width: 34em; color: #BAC3CF; } + .menu #notification, .popup-menu #notification { - color: #5c616c; border-image: url("light-assets/misc/message.svg") 9 9 9 9; } - .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button { + .menu #notification, .menu #notification.multi-line-notification, + .popup-menu #notification, + .popup-menu #notification.multi-line-notification { + color: #5c616c; } + .menu #notification .notification-button, .menu #notification .notification-icon-button, + .popup-menu #notification .notification-button, + .popup-menu #notification .notification-icon-button { padding: 5px; } #notification.multi-line-notification { padding-bottom: 13px; diff --git a/common/cinnamon/sass/_common.scss b/common/cinnamon/sass/_common.scss index dbca21b..da21020 100644 --- a/common/cinnamon/sass/_common.scss +++ b/common/cinnamon/sass/_common.scss @@ -761,8 +761,9 @@ StScrollBar { width: 34em; color: $osd_fg_color; + .menu &, .popup-menu & { - color: $fg_color; + &, &.multi-line-notification { color: $fg_color; } border-image: url("#{$asset_path}/misc/message.svg") 9 9 9 9; .notification-button, .notification-icon-button { -- cgit v1.2.3