[gnome-shell/wip/sass: 24/86] theme: notifications & message tray

[Carlos Soriano Sánchez <csoriano src gnome org>]

commit 6c2dcced4d159877f81472d70427dd556b85e354
Author: Jakub Steiner <jimmac gmail com>
Date:   Fri Oct 24 01:04:34 2014 +0200

    theme: notifications & message tray

 data/gnome-shell-theme.gresource.xml   |    1 -
 data/theme/_common.scss                |  184 ++++++++++++++
 data/theme/_gnome-shell-old.scss       |  285 ----------------------
 data/theme/gnome-shell.css             |  416 ++++++++++++++-----------------
 data/theme/message-tray-background.png |  Bin 25454 -> 0 bytes
 5 files changed, 372 insertions(+), 514 deletions(-)
---
diff --git a/data/gnome-shell-theme.gresource.xml b/data/gnome-shell-theme.gresource.xml
index 9b5b51e..5b15c94 100644
--- a/data/gnome-shell-theme.gresource.xml
+++ b/data/gnome-shell-theme.gresource.xml
@@ -18,7 +18,6 @@
     <file>gnome-shell.css</file>
     <file>gnome-shell-high-contrast.css</file>
     <file>logged-in-indicator.svg</file>
-    <file>message-tray-background.png</file>
     <file>more-results.svg</file>
     <file>noise-texture.png</file>
     <file>page-indicator-active.svg</file>
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index d31dabc..6775ca7 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 0e70e7c..ec9a873 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 b3fbfd9..ffda837 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);