diff --git a/data/gnome-shell-theme.gresource.xml b/data/gnome-shell-theme.gresource.xml index 0d90fcabe..86d6b4ebf 100644 --- a/data/gnome-shell-theme.gresource.xml +++ b/data/gnome-shell-theme.gresource.xml @@ -17,7 +17,6 @@ filter-selected-rtl.svg gnome-shell.css logged-in-indicator.svg - message-tray-background.png more-results.svg noise-texture.png page-indicator-active.svg diff --git a/data/theme/_common.scss b/data/theme/_common.scss index d31dabc6e..6775ca7ab 100644 --- a/data/theme/_common.scss +++ b/data/theme/_common.scss @@ -656,6 +656,190 @@ StScrollBar { /* NOTIFICATIONS & MESSAGE TRAY */ +#message-tray { + background: darken($bg_color,10%) url("noise-texture.png"); + background-repeat: repeat; + height: 72px; + box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); + .message-tray-summary { height: 72px; } + + .message-tray-menu-button { + StIcon { + padding: 0 20px; + color: $fg_color; + icon-size: 24px; + opacity: 1; + } + &:hover StIcon { color: lighten($fg_color, 15%); } + &:active StIcon { color: lighten($selected_bg_color, 10%); } + } + .no-messages-label { color: darken($fg_color,10%); } +} + .url-highlighter { link-color: $selected_bg_color; } + + // Banners + .notification { + font-size: 11pt; + width: 34em; + border-radius: 6px 6px 0 0; + background-color: transparentize(darken($osd_bg_color,8%),.05); + border: 1px solid $osd_borders_color; + border-bottom-width: 0; + //box-shadow: 0 1px 4px black; + spacing-rows: 4px; + padding: 8px 8px 4px 8px; + spacing-columns: 10px; + &.multi-line-notification { padding-bottom: 8px; } + } + .notification-unexpanded { + // We want to force the actor at a specific size, irrespective + // of its minimum and preferred size, so we override both + min-height: 36px; + height: 36px; + } + // We use row-span = 2 for the image cell, which prevents its height preferences to be + // taken into account during allocation, so its height ends up being limited by the height + // of the content in the other rows. To avoid showing a stretched image, we set the minimum + // height of the table to be ICON_SIZE + IMAGE_SIZE + spacing-rows = 24 + 125 + 10 = 159 + .notification-with-image { + min-height: 159px; + } + .notification-body { spacing: 5px; } + .notification-actions { + paddinf-top: 18px; + spacing: 6px; + } + //Message tray items + .summary-source { + border-radius: 4px; + padding: 6px; + transition-duration: 100ms; + } + .summary-source-button { + &:hover .summary-source, + &:selected .summary-source, + &:focus .summary-source { background-color: lighten($bg_color,2%); } + } + .summary-source-counter { + font-size: 10pt; + font-weight: bold; + height: 2.4em; width: 2.4em; + -shell-counter-overlap-x: 13px; + -shell-counter-overlap-y: 13px; + background-color: $selected_bg_color; + border: 2px solid $fg_color; + box-shadow: 0 2px 2px rgba(0,0,0,0.5); + } + + //Message tray popovers + .summary-boxpointer { + -arrow-border-radius: 15px; + -arrow-background-color: transparentize(darken($osd_bg_color,8%),.05); + -arrow-base: 36px; + -arrow-rise: 18px; + color: $fg_color; + -boxpointer-gap: 4px; + .notification { + border-radius: 9px; + border-width: 0; //temporary workaround for border brokenness + background-color: transparentize(darken($osd_bg_color,8%),.05) !important; + padding-bottom: 12px; + } + #summary-right-click-menu { + padding-top: 12px; + padding-bottom: 12px; + } + } + .summary-notification-stack-scrollview { + max-height: 24em; + padding-top: 8px; + padding-bottom: 8px; + &:ltr { padding-right: 8px; } + &:rtl { padding-left: 8px; } + } + .notification-scrollview { + max-height: 18em; + -st-vfade-offset: 24px; + &:ltr > StScrollBar { padding-left: 6px; } + &:rtl > StScrollBar { padding-right: 6px; } + } + .notification-button { -st-natural-width: 140px; } + .notification-icon-button { + border-radius: 5px; + padding: 5px; + &:focus { }//FIXME + & > StIcon { icons-size: 16px; padding: 8px; } + } + .secondary-icon { icon-size: 1.09em; } //FIXME + + //chat bubbles + .chat-log-message { color: darken($fg_color,10%); } + .chat-empty-line { font-size: 4px; } + .chat-received { + padding-left: 4px; + &:rtl { padding-left: 0px; padding-right: 4px; } + } + .chat-sent { + padding-left: 18pt; + color: darken($fg_color, 15%); + &:rtl { padding-left: 0; padding-right: 18pt; } + } + .chat-meta-message { + padding-left: 4px; + font-size: 9pt; + font-weight: bold; + color: darken($fg_color,20%); + &:rtl { padding-left: 0; padding-right: 4px; } + } + .chat-notification-scrollview { max-height: 22em; } + .subscription-message { font-style: italic; } + + //hotplug + .hotplug-transient-box { + spacing: 6px; + padding: 2px 72px 2px 12px;//FIXME wat? + } + .hotplug-notification-item { + padding: 2px 10px; + &:focus { padding: 1px 71px 1px 11px; } //FIXME wat? + } + + .hotplug-notification-item-icon { + icon-size: 24px; + padding: 2px 5px; + } + + .hotplug-resident-box { spacing: 8px; } + + .hotplug-resident-mount { + spacing: 8px; + border-radius: 4px; + color: green; + &:hover { + color: red; + background-color: blue; + } + } + + .hotplug-resident-mount-label { + color: inherit; + padding-left: 6px; + } + + .hotplug-resident-mount-icon { + icon-size: 24px; + padding-left: 6px; + } + + .hotplug-resident-eject-icon { + icon-size: 16px; + } + + .hotplug-resident-eject-button { + padding: 7px; + border-radius: 5px; + color: pink; + } /* Eeeky things */ //Mess that is Looking Glass diff --git a/data/theme/_gnome-shell-old.scss b/data/theme/_gnome-shell-old.scss index 0e70e7cfa..ec9a87302 100644 --- a/data/theme/_gnome-shell-old.scss +++ b/data/theme/_gnome-shell-old.scss @@ -301,291 +301,6 @@ /* Message Tray */ -#message-tray { - background: #2e3436 url(message-tray-background.png); - background-repeat: repeat; - height: 72px; -} - -.message-tray-summary { - height: 72px; -} - -.message-tray-menu-button StIcon { - padding: 0 20px; - color: #aaaaaa; - icon-size: 24px; -} - -.message-tray-menu-button:hover StIcon, -.message-tray-menu-button:active StIcon, -.message-tray-menu-button:focus StIcon { - color: #eeeeee; -} - -.url-highlighter { - link-color: #ccccff; -} - -.no-messages-label { - color: #999999; -} - -.notification { - border-radius: 10px 10px 0px 0px; - background: rgba(0,0,0,0.9); - padding: 8px 8px 4px 8px; - spacing-rows: 4px; - spacing-columns: 10px; -} - -.notification, #notification-container { - font-size: 11pt; - width: 34em; -} - -.notification.multi-line-notification { - padding-bottom: 8px; -} - -.notification-unexpanded { - /* We want to force the actor at a specific size, irrespective - of its minimum and preferred size, so we override both */ - min-height: 36px; - height: 36px; -} - -/* We use row-span = 2 for the image cell, which prevents its height preferences to be - taken into account during allocation, so its height ends up being limited by the height - of the content in the other rows. To avoid showing a stretched image, we set the minimum - height of the table to be ICON_SIZE + IMAGE_SIZE + spacing-rows = 24 + 125 + 10 = 159 */ -.notification-with-image { - min-height: 159px; -} - -.summary-boxpointer { - -arrow-border-radius: 15px; - -arrow-background-color: rgba(0,0,0,0.9); - -arrow-base: 36px; - -arrow-rise: 18px; - color: white; - -boxpointer-gap: 4px; -} - -.summary-boxpointer .notification { - border-radius: 9px; - background: rgba(0,0,0,0) !important; - padding-bottom: 12px; -} - -.summary-boxpointer #summary-right-click-menu { - padding-top: 12px; - padding-bottom: 12px; -} - -.summary-notification-stack-scrollview { - max-height: 18em; - padding-top: 8px; - padding-bottom: 8px; -} - -.summary-notification-stack-scrollview:ltr { - padding-right: 8px; -} - -.summary-notification-stack-scrollview:rtl { - padding-left: 8px; -} - -.notification-scrollview { - max-height: 10em; - -st-vfade-offset: 24px; -} - -.notification-scrollview:ltr > StScrollBar { - padding-left: 6px; -} - -.notification-scrollview:rtl > StScrollBar { - padding-right: 6px; -} - -.notification-body { - spacing: 5px; -} - -.notification-actions { - padding-top: 18px; - spacing: 10px; -} - -.notification-button { - -st-natural-width: 140px; -} - -.notification-icon-button { - border-radius: 5px; - padding: 5px; -} - -.notification-icon-button:focus { - padding: 4px; -} - -.notification-icon-button > StIcon { - icon-size: 16px; - padding: 8px; -} - -.secondary-icon { - icon-size: 1.09em; -} - -.hotplug-transient-box { - spacing: 6px; - padding: 2px 72px 2px 12px; -} - -.hotplug-notification-item { - padding: 2px 10px; -} - -.hotplug-notification-item:focus { - padding: 1px 71px 1px 11px; -} - -.hotplug-notification-item-icon { - icon-size: 24px; - padding: 2px 5px; -} - -.hotplug-resident-box { - spacing: 8px; -} - -.hotplug-resident-mount { - spacing: 8px; - border-radius: 4px; - - color: #ccc; -} - -.hotplug-resident-mount:hover { - background-gradient-direction: horizontal; - background-gradient-start: rgba(255, 255, 255, 0.1); - background-gradient-end: rgba(255, 255, 255, 0); - - color: #fff; -} - -.hotplug-resident-mount-label { - color: inherit; - padding-left: 6px; -} - -.hotplug-resident-mount-icon { - icon-size: 24px; - padding-left: 6px; -} - -.hotplug-resident-eject-icon { - icon-size: 16px; -} - -.hotplug-resident-eject-button { - padding: 7px; - border-radius: 5px; - color: #ccc; -} - -.chat-log-message { - color: #888888; -} - -.chat-empty-line { - font-size: 4px; -} - -.chat-received { - padding-left: 4px; -} - -.chat-received:rtl { - padding-left: 0px; - padding-right: 4px; -} - -.chat-sent { - padding-left: 18pt; - color: #959595; -} - -.chat-sent:rtl { - padding-left: 0px; - padding-right: 18pt; -} - -.chat-meta-message { - padding-left: 4px; - font-size: 9pt; - font-weight: bold; - color: #bbbbbb; -} - -.chat-meta-message:rtl { - padding-left: 0px; - padding-right: 4px; -} - -.chat-notification-scrollview{ - max-height: 22em; -} - -.subscription-message { - font-style: italic; -} - -.notification StEntry { - border-radius: 4px; -} - -.summary-source-button { - padding: 6px 3px 6px 3px; -} - -.summary-source-button:last-child:ltr { - padding-right: 6px; -} - -.summary-source-button:last-child:rtl { - padding-left: 6px; -} - -.summary-source-button:hover .summary-source { - background-color: rgba(255,255,255,0.1); -} - -.summary-source-button:focus .summary-source, -.summary-source-button:selected .summary-source { - background-color: rgba(255,255,255,0.33); -} - -.summary-source { - border-radius: 4px; - padding: 0 6px 0 6px; - transition-duration: 100ms; -} - -.summary-source-counter { - background-image: url("summary-counter.svg"); - background-size: 2.4em; - font-size: 10pt; - font-weight: bold; - height: 2.4em; - width: 2.4em; - -shell-counter-overlap-x: 13px; - -shell-counter-overlap-y: 13px; -} /* OSD */ .osd-window { diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index b3fbfd9b7..ffda8374c 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -236,234 +236,6 @@ padding-right: 8pt; } /* Message Tray */ -#message-tray { - background: #2e3436 url(message-tray-background.png); - background-repeat: repeat; - height: 72px; } - -.message-tray-summary { - height: 72px; } - -.message-tray-menu-button StIcon { - padding: 0 20px; - color: #aaaaaa; - icon-size: 24px; } - -.message-tray-menu-button:hover StIcon, -.message-tray-menu-button:active StIcon, -.message-tray-menu-button:focus StIcon { - color: #eeeeee; } - -.url-highlighter { - link-color: #ccccff; } - -.no-messages-label { - color: #999999; } - -.notification { - border-radius: 10px 10px 0px 0px; - background: rgba(0, 0, 0, 0.9); - padding: 8px 8px 4px 8px; - spacing-rows: 4px; - spacing-columns: 10px; } - -.notification, #notification-container { - font-size: 11pt; - width: 34em; } - -.notification.multi-line-notification { - padding-bottom: 8px; } - -.notification-unexpanded { - /* We want to force the actor at a specific size, irrespective - of its minimum and preferred size, so we override both */ - min-height: 36px; - height: 36px; } - -/* We use row-span = 2 for the image cell, which prevents its height preferences to be - taken into account during allocation, so its height ends up being limited by the height - of the content in the other rows. To avoid showing a stretched image, we set the minimum - height of the table to be ICON_SIZE + IMAGE_SIZE + spacing-rows = 24 + 125 + 10 = 159 */ -.notification-with-image { - min-height: 159px; } - -.summary-boxpointer { - -arrow-border-radius: 15px; - -arrow-background-color: rgba(0, 0, 0, 0.9); - -arrow-base: 36px; - -arrow-rise: 18px; - color: white; - -boxpointer-gap: 4px; } - -.summary-boxpointer .notification { - border-radius: 9px; - background: transparent !important; - padding-bottom: 12px; } - -.summary-boxpointer #summary-right-click-menu { - padding-top: 12px; - padding-bottom: 12px; } - -.summary-notification-stack-scrollview { - max-height: 18em; - padding-top: 8px; - padding-bottom: 8px; } - -.summary-notification-stack-scrollview:ltr { - padding-right: 8px; } - -.summary-notification-stack-scrollview:rtl { - padding-left: 8px; } - -.notification-scrollview { - max-height: 10em; - -st-vfade-offset: 24px; } - -.notification-scrollview:ltr > StScrollBar { - padding-left: 6px; } - -.notification-scrollview:rtl > StScrollBar { - padding-right: 6px; } - -.notification-body { - spacing: 5px; } - -.notification-actions { - padding-top: 18px; - spacing: 10px; } - -.notification-button { - -st-natural-width: 140px; } - -.notification-icon-button { - border-radius: 5px; - padding: 5px; } - -.notification-icon-button:focus { - padding: 4px; } - -.notification-icon-button > StIcon { - icon-size: 16px; - padding: 8px; } - -.secondary-icon { - icon-size: 1.09em; } - -.hotplug-transient-box { - spacing: 6px; - padding: 2px 72px 2px 12px; } - -.hotplug-notification-item { - padding: 2px 10px; } - -.hotplug-notification-item:focus { - padding: 1px 71px 1px 11px; } - -.hotplug-notification-item-icon { - icon-size: 24px; - padding: 2px 5px; } - -.hotplug-resident-box { - spacing: 8px; } - -.hotplug-resident-mount { - spacing: 8px; - border-radius: 4px; - color: #ccc; } - -.hotplug-resident-mount:hover { - background-gradient-direction: horizontal; - background-gradient-start: rgba(255, 255, 255, 0.1); - background-gradient-end: rgba(255, 255, 255, 0); - color: #fff; } - -.hotplug-resident-mount-label { - color: inherit; - padding-left: 6px; } - -.hotplug-resident-mount-icon { - icon-size: 24px; - padding-left: 6px; } - -.hotplug-resident-eject-icon { - icon-size: 16px; } - -.hotplug-resident-eject-button { - padding: 7px; - border-radius: 5px; - color: #ccc; } - -.chat-log-message { - color: #888888; } - -.chat-empty-line { - font-size: 4px; } - -.chat-received { - padding-left: 4px; } - -.chat-received:rtl { - padding-left: 0px; - padding-right: 4px; } - -.chat-sent { - padding-left: 18pt; - color: #959595; } - -.chat-sent:rtl { - padding-left: 0px; - padding-right: 18pt; } - -.chat-meta-message { - padding-left: 4px; - font-size: 9pt; - font-weight: bold; - color: #bbbbbb; } - -.chat-meta-message:rtl { - padding-left: 0px; - padding-right: 4px; } - -.chat-notification-scrollview { - max-height: 22em; } - -.subscription-message { - font-style: italic; } - -.notification StEntry { - border-radius: 4px; } - -.summary-source-button { - padding: 6px 3px 6px 3px; } - -.summary-source-button:last-child:ltr { - padding-right: 6px; } - -.summary-source-button:last-child:rtl { - padding-left: 6px; } - -.summary-source-button:hover .summary-source { - background-color: rgba(255, 255, 255, 0.1); } - -.summary-source-button:focus .summary-source, -.summary-source-button:selected .summary-source { - background-color: rgba(255, 255, 255, 0.33); } - -.summary-source { - border-radius: 4px; - padding: 0 6px 0 6px; - transition-duration: 100ms; } - -.summary-source-counter { - background-image: url("summary-counter.svg"); - background-size: 2.4em; - font-size: 10pt; - font-weight: bold; - height: 2.4em; - width: 2.4em; - -shell-counter-overlap-x: 13px; - -shell-counter-overlap-y: 13px; } - /* OSD */ .osd-window { text-align: center; @@ -1774,6 +1546,194 @@ StScrollBar { color: #eeeeec; } /* NOTIFICATIONS & MESSAGE TRAY */ +#message-tray { + background: #212424 url("noise-texture.png"); + background-repeat: repeat; + height: 72px; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); } + #message-tray .message-tray-summary { + height: 72px; } + #message-tray .message-tray-menu-button StIcon { + padding: 0 20px; + color: #eeeeec; + icon-size: 24px; + opacity: 1; } + #message-tray .message-tray-menu-button:hover StIcon { + color: white; } + #message-tray .message-tray-menu-button:active StIcon { + color: #2a76c6; } + #message-tray .no-messages-label { + color: #d6d6d1; } + +.url-highlighter { + link-color: #215d9c; } + +.notification { + font-size: 11pt; + width: 34em; + border-radius: 6px 6px 0 0; + background-color: rgba(27, 31, 32, 0.95); + border: 1px solid rgba(0, 0, 0, 0.7); + border-bottom-width: 0; + spacing-rows: 4px; + padding: 8px 8px 4px 8px; + spacing-columns: 10px; } + .notification.multi-line-notification { + padding-bottom: 8px; } + +.notification-unexpanded { + min-height: 36px; + height: 36px; } + +.notification-with-image { + min-height: 159px; } + +.notification-body { + spacing: 5px; } + +.notification-actions { + paddinf-top: 18px; + spacing: 6px; } + +.summary-source { + border-radius: 4px; + padding: 6px; + transition-duration: 100ms; } + +.summary-source-button:hover .summary-source, .summary-source-button:selected .summary-source, .summary-source-button:focus .summary-source { + background-color: #3e4444; } + +.summary-source-counter { + font-size: 10pt; + font-weight: bold; + height: 2.4em; + width: 2.4em; + -shell-counter-overlap-x: 13px; + -shell-counter-overlap-y: 13px; + background-color: #215d9c; + border: 2px solid #eeeeec; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); } + +.summary-boxpointer { + -arrow-border-radius: 15px; + -arrow-background-color: rgba(27, 31, 32, 0.95); + -arrow-base: 36px; + -arrow-rise: 18px; + color: #eeeeec; + -boxpointer-gap: 4px; } + .summary-boxpointer .notification { + border-radius: 9px; + border-width: 0; + background-color: rgba(27, 31, 32, 0.95) !important; + padding-bottom: 12px; } + .summary-boxpointer #summary-right-click-menu { + padding-top: 12px; + padding-bottom: 12px; } + +.summary-notification-stack-scrollview { + max-height: 24em; + padding-top: 8px; + padding-bottom: 8px; } + .summary-notification-stack-scrollview:ltr { + padding-right: 8px; } + .summary-notification-stack-scrollview:rtl { + padding-left: 8px; } + +.notification-scrollview { + max-height: 18em; + -st-vfade-offset: 24px; } + .notification-scrollview:ltr > StScrollBar { + padding-left: 6px; } + .notification-scrollview:rtl > StScrollBar { + padding-right: 6px; } + +.notification-button { + -st-natural-width: 140px; } + +.notification-icon-button { + border-radius: 5px; + padding: 5px; } + .notification-icon-button > StIcon { + icons-size: 16px; + padding: 8px; } + +.secondary-icon { + icon-size: 1.09em; } + +.chat-log-message { + color: #d6d6d1; } + +.chat-empty-line { + font-size: 4px; } + +.chat-received { + padding-left: 4px; } + .chat-received:rtl { + padding-left: 0px; + padding-right: 4px; } + +.chat-sent { + padding-left: 18pt; + color: #cacac4; } + .chat-sent:rtl { + padding-left: 0; + padding-right: 18pt; } + +.chat-meta-message { + padding-left: 4px; + font-size: 9pt; + font-weight: bold; + color: #bebeb6; } + .chat-meta-message:rtl { + padding-left: 0; + padding-right: 4px; } + +.chat-notification-scrollview { + max-height: 22em; } + +.subscription-message { + font-style: italic; } + +.hotplug-transient-box { + spacing: 6px; + padding: 2px 72px 2px 12px; } + +.hotplug-notification-item { + padding: 2px 10px; } + .hotplug-notification-item:focus { + padding: 1px 71px 1px 11px; } + +.hotplug-notification-item-icon { + icon-size: 24px; + padding: 2px 5px; } + +.hotplug-resident-box { + spacing: 8px; } + +.hotplug-resident-mount { + spacing: 8px; + border-radius: 4px; + color: green; } + .hotplug-resident-mount:hover { + color: red; + background-color: blue; } + +.hotplug-resident-mount-label { + color: inherit; + padding-left: 6px; } + +.hotplug-resident-mount-icon { + icon-size: 24px; + padding-left: 6px; } + +.hotplug-resident-eject-icon { + icon-size: 16px; } + +.hotplug-resident-eject-button { + padding: 7px; + border-radius: 5px; + color: pink; } + /* Eeeky things */ #LookingGlassDialog { background-color: rgba(0, 0, 0, 0.8); diff --git a/data/theme/message-tray-background.png b/data/theme/message-tray-background.png deleted file mode 100644 index 357dae0d0..000000000 Binary files a/data/theme/message-tray-background.png and /dev/null differ