theme: notifications & message tray

This commit is contained in:
Jakub Steiner 2014-10-24 01:04:34 +02:00 committed by Florian Müllner
parent b053f4c74b
commit 95e141e47e
5 changed files with 372 additions and 514 deletions

View File

@ -18,7 +18,6 @@
<file>gnome-shell.css</file> <file>gnome-shell.css</file>
<file>gnome-shell-high-contrast.css</file> <file>gnome-shell-high-contrast.css</file>
<file>logged-in-indicator.svg</file> <file>logged-in-indicator.svg</file>
<file>message-tray-background.png</file>
<file>more-results.svg</file> <file>more-results.svg</file>
<file>noise-texture.png</file> <file>noise-texture.png</file>
<file>page-indicator-active.svg</file> <file>page-indicator-active.svg</file>

View File

@ -656,6 +656,190 @@ StScrollBar {
/* NOTIFICATIONS & MESSAGE TRAY */ /* 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 */ /* Eeeky things */
//Mess that is Looking Glass //Mess that is Looking Glass

View File

@ -301,291 +301,6 @@
/* Message Tray */ /* 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 */
.osd-window { .osd-window {

View File

@ -236,234 +236,6 @@
padding-right: 8pt; } padding-right: 8pt; }
/* Message Tray */ /* 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 */
.osd-window { .osd-window {
text-align: center; text-align: center;
@ -1774,6 +1546,194 @@ StScrollBar {
color: #eeeeec; } color: #eeeeec; }
/* NOTIFICATIONS & MESSAGE TRAY */ /* 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 */ /* Eeeky things */
#LookingGlassDialog { #LookingGlassDialog {
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);

Binary file not shown.

Before

(image error) Size: 25 KiB