[gnome-shell/wip/fmuellner/notification-redux+sass: 145/145] Apply style from sass

From: Florian Müllner <fmuellner src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-shell/wip/fmuellner/notification-redux+sass: 145/145] Apply style from sass
Date: Thu, 19 Feb 2015 18:26:31 +0000 (UTC)
commit 0e895f1732feb2a243d1733d8d9e2171e8ea0006
Author: Florian Müllner <fmuellner gnome org>
Date:   Thu Feb 19 11:54:17 2015 +0100

    Apply style from sass

 data/theme/gnome-shell-high-contrast.css |  287 ++++++++++++++----------------
 data/theme/gnome-shell.css               |  275 +++++++++++++----------------
 2 files changed, 255 insertions(+), 307 deletions(-)
---
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index 48ee64d..6b04a02 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -585,21 +585,56 @@ StScrollBar {
   #panel .screencast-indicator {
     color: #f57900; }
 
+#calendarArea {
+  padding: 0.75em 1.0em; }
+
 .calendar {
-  padding: .4em 1.75em .8em 1.75em;
-  margin-bottom: 2em; }
+  margin-bottom: 1em; }
 
-.datemenu-date-label {
-  padding: .4em 1.7em;
-  text-align: center;
-  color: #fff;
-  font-weight: bold;
-  font-size: 110%; }
+.calendar,
+.datemenu-today-button,
+.datemenu-displays-box,
+.message-list-sections {
+  margin: 0 1.5em; }
+
+.datemenu-calendar-column {
+  spacing: 0.5em;
+  padding-bottom: 3em; }
+
+.datemenu-today-button,
+.world-clocks-button,
+.message-list-section-title {
+  border-radius: 4px;
+  padding: .4em; }
+
+.message-list-section-list:ltr {
+  padding-left: .4em; }
+
+.message-list-section-list:rtl {
+  padding-right: .4em; }
+
+.datemenu-today-button:hover, .datemenu-today-button:focus,
+.world-clocks-button:hover,
+.world-clocks-button:focus,
+.message-list-section-title:hover,
+.message-list-section-title:focus {
+  background-color: #0d0d0d; }
+.datemenu-today-button:active,
+.world-clocks-button:active,
+.message-list-section-title:active {
+  color: white;
+  background-color: #215d9c; }
+
+.datemenu-today-button .date-label {
+  font-size: 1.5em; }
 
-.calendar-vertical-separator {
-  width: .3em;
-  -stipple-width: 1px;
-  -stipple-color: rgba(238, 238, 236, 0.2); }
+.world-clocks-header,
+.message-list-section-title {
+  color: #999999;
+  font-weight: bold; }
+
+.world-clocks-grid {
+  spacing-rows: 0.4em; }
 
 .calendar-month-label {
   color: #f2f2f2;
@@ -670,39 +705,54 @@ StScrollBar {
   color: rgba(255, 255, 255, 0.15);
   opacity: 0.5; }
 
-.events-table {
-  width: 15em;
-  spacing-columns: 1em;
-  padding: 0 1.4em; }
-  .events-table:ltr {
-    padding-right: 1.9em; }
-  .events-table:rtl {
-    padding-left: 1.9em; }
+/* Message list */
+.message-list {
+  width: 340px; }
 
-.events-day-header {
-  font-weight: bold;
-  color: #e6e6e6;
-  padding-left: 0;
-  padding-top: 1.2em; }
-  .events-day-header:first-child {
-    padding-top: 0; }
-
-.events-day-dayname {
-  color: #e6e6e6;
-  text-align: left;
-  min-width: 20px; }
-  .events-day-dayname:rtl {
-    text-align: right; }
-  .events-day-dayname .events-day-time {
-    text-align: right; }
-    .events-day-dayname .events-day-time:rtl {
-      text-align: left; }
-  .events-day-dayname .events-day-task {
-    color: #e6e6e6; }
-    .events-day-dayname .events-day-task:ltr {
-      padding-left: 8px; }
-    .events-day-dayname .events-day-task:rtl {
-      padding-right: 8px; }
+.message-list-sections {
+  spacing: 1.5em; }
+
+.message-list-section,
+.message-list-section-list {
+  spacing: 0.7em; }
+
+.message-list-section-title-box {
+  spacing: 0.4em; }
+
+.message-list-section-close > StIcon {
+  icon-size: 16px;
+  border-radius: 8px;
+  color: #000;
+  background-color: #666666; }
+
+/* FIXME: how do you do this in sass? */
+.message-list-section-close:hover > StIcon,
+.message-list-section-close:focus > StIcon {
+  background-color: #999999; }
+
+.message {
+  background-color: #0d0d0d; }
+  .message:hover, .message:focus {
+    background-color: #262626; }
+
+.message-icon-bin {
+  padding: 5px; }
+
+.message-icon-bin > StIcon {
+  icon-size: 48px; }
+
+.message-secondary-bin {
+  color: #999999; }
+
+.message-secondary-bin > StIcon {
+  icon-size: 16px; }
+
+.message-title {
+  font-weight: bold; }
+
+.message-content {
+  padding: 5px;
+  spacing: 5px; }
 
 .system-switch-user-submenu-icon {
   icon-size: 24px;
@@ -752,7 +802,7 @@ StScrollBar {
 .popup-menu-icon {
   icon-size: 1.09em; }
 
-.window-close, .notification-close {
+.window-close {
   background-image: url("close-window.svg");
   background-size: 32px;
   height: 32px;
@@ -763,12 +813,6 @@ StScrollBar {
   .window-close:rtl {
     -st-background-image-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5); }
 
-.notification-close {
-  -shell-close-overlap-x: 14px;
-  -shell-close-overlap-y: -12px; }
-  .notification-close:rtl {
-    -shell-close-overlap-x: -14px; }
-
 /* NETWORK DIALOGS */
 .nm-dialog {
   max-height: 500px;
@@ -918,12 +962,14 @@ StScrollBar {
 
 /* DASHBOARD */
 #dash {
-  padding: 4px;
+  font-size: 9pt;
+  color: #eeeeec;
+  background-color: #2e3436;
+  padding: 4px 0;
+  border: 1px solid rgba(128, 128, 128, 0.4);
   border-left: 0px;
   border-radius: 0px 9px 9px 0px; }
   #dash:rtl {
-    border-left-width: 1px;
-    border-right-width: 0;
     border-radius: 9px 0 0 9px; }
   #dash .placeholder {
     background-image: url("dash-placeholder.svg");
@@ -934,7 +980,7 @@ StScrollBar {
     height: 24px; }
 
 .dash-item-container > StWidget {
-  padding: 4px; }
+  padding: 4px 8px; }
 
 .dash-label {
   border-radius: 7px;
@@ -1080,7 +1126,7 @@ StScrollBar {
 .frequent-apps > StBoxLayout {
   padding: 0px 88px 10px 88px; }
 
-#dash, .workspace-thumbnails {
+.workspace-thumbnails {
   color: #eeeeec;
   background-color: #2e3436;
   border: 1px solid rgba(238, 238, 236, 0.2); }
@@ -1091,103 +1137,43 @@ StScrollBar {
   color: #fff; }
 
 /* NOTIFICATIONS & MESSAGE TRAY */
-#message-tray {
-  background: #17191a url("noise-texture.png");
-  background-repeat: repeat;
-  height: 72px;
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
-  padding: 4px; }
-  #message-tray .message-tray-summary {
-    height: 72px; }
-  #message-tray .message-tray-menu-button StIcon {
-    padding: 0 20px;
-    color: #fff;
-    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: #e6e6e6; }
-
 .url-highlighter {
   link-color: #215d9c; }
 
-.notification {
+.notification-banner {
   font-size: 11pt;
   width: 34em;
-  border-radius: 6px 6px 0 0;
+  margin: 5px;
+  border-radius: 6px;
   color: #eeeeec;
   background-color: #2e3436;
-  border: 1px solid black;
-  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; }
+  border: 1px solid black; }
+  .notification-banner:hover {
+    background-color: #2e3436; }
+  .notification-banner:focus {
+    background-color: #2e3436; }
 
-.notification-with-image {
-  min-height: 159px; }
+.notification-icon {
+  padding: 5px; }
 
-.notification-body {
+.notification-content {
+  padding: 5px;
   spacing: 5px; }
 
 .notification-actions {
-  paddinf-top: 18px;
-  spacing: 6px; }
-
-.summary-source {
-  border-radius: 0;
-  -st-natural-width: 60px;
-  padding: 9px;
-  transition-duration: 100ms; }
-
-.summary-source-button:hover .summary-source, .summary-source-button:selected .summary-source, 
.summary-source-button:focus .summary-source {
-  background-color: #33393c; }
+  background-color: black;
+  padding-top: 2px;
+  spacing: 1px; }
 
-.summary-source-counter {
-  font-size: 10pt;
-  font-weight: bold;
-  height: 1.6em;
-  width: 1.6em;
-  -shell-counter-overlap-x: 3px;
-  -shell-counter-overlap-y: 3px;
-  background-color: #215d9c;
-  color: #ffffff;
-  border: 2px solid #eeeeec;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
-  border-radius: 0.9em; }
-
-.summary-boxpointer {
-  -arrow-border-radius: 15px;
-  -arrow-background-color: #2e3436;
-  -arrow-base: 36px;
-  -arrow-rise: 18px;
-  color: #fff;
-  -boxpointer-gap: 4px; }
-  .summary-boxpointer .notification {
-    border-radius: 9px;
-    border-width: 0;
-    background-color: transparent !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-button {
+  padding: 4px 4px 5px;
+  background-color: #222728; }
+  .notification-button:first-child {
+    border-radius: 0 0 0 6px; }
+  .notification-button:last-child {
+    border-radius: 0 0 6px 0; }
+  .notification-button:hover, .notification-buttonfocus {
+    background-color: #292f30; }
 
 .notification-scrollview {
   max-height: 18em;
@@ -1197,23 +1183,12 @@ StScrollBar {
   .notification-scrollview:rtl > StScrollBar {
     padding-right: 6px; }
 
-.notification-button {
-  height: 24px; }
-
-.notification-icon-button {
-  border-radius: 5px;
-  padding: 5px;
-  height: 24px;
-  width: 24px; }
-  .notification-icon-button > StIcon {
-    icons-size: 16px;
-    width: 16px;
-    height: 16px;
-    padding: 2px; }
-
 .secondary-icon {
   icon-size: 1.09em; }
 
+.chat-body {
+  spacing: 5px; }
+
 .chat-log-message {
   color: #e6e6e6; }
 
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 0431e97..f7ecc00 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -585,21 +585,56 @@ StScrollBar {
   #panel .screencast-indicator {
     color: #f57900; }
 
+#calendarArea {
+  padding: 0.75em 1.0em; }
+
 .calendar {
-  padding: .4em 1.75em .8em 1.75em;
-  margin-bottom: 2em; }
+  margin-bottom: 1em; }
 
-.datemenu-date-label {
-  padding: .4em 1.7em;
-  text-align: center;
-  color: #eeeeec;
-  font-weight: bold;
-  font-size: 110%; }
+.calendar,
+.datemenu-today-button,
+.datemenu-displays-box,
+.message-list-sections {
+  margin: 0 1.5em; }
+
+.datemenu-calendar-column {
+  spacing: 0.5em;
+  padding-bottom: 3em; }
+
+.datemenu-today-button,
+.world-clocks-button,
+.message-list-section-title {
+  border-radius: 4px;
+  padding: .4em; }
+
+.message-list-section-list:ltr {
+  padding-left: .4em; }
+
+.message-list-section-list:rtl {
+  padding-right: .4em; }
+
+.datemenu-today-button:hover, .datemenu-today-button:focus,
+.world-clocks-button:hover,
+.world-clocks-button:focus,
+.message-list-section-title:hover,
+.message-list-section-title:focus {
+  background-color: #454c4c; }
+.datemenu-today-button:active,
+.world-clocks-button:active,
+.message-list-section-title:active {
+  color: white;
+  background-color: #215d9c; }
+
+.datemenu-today-button .date-label {
+  font-size: 1.5em; }
+
+.world-clocks-header,
+.message-list-section-title {
+  color: #8e8e80;
+  font-weight: bold; }
 
-.calendar-vertical-separator {
-  width: .3em;
-  -stipple-width: 1px;
-  -stipple-color: rgba(238, 238, 236, 0.2); }
+.world-clocks-grid {
+  spacing-rows: 0.4em; }
 
 .calendar-month-label {
   color: #e2e2df;
@@ -670,39 +705,54 @@ StScrollBar {
   color: rgba(238, 238, 236, 0.15);
   opacity: 0.5; }
 
-.events-table {
-  width: 15em;
-  spacing-columns: 1em;
-  padding: 0 1.4em; }
-  .events-table:ltr {
-    padding-right: 1.9em; }
-  .events-table:rtl {
-    padding-left: 1.9em; }
+/* Message list */
+.message-list {
+  width: 340px; }
 
-.events-day-header {
-  font-weight: bold;
-  color: #d6d6d1;
-  padding-left: 0;
-  padding-top: 1.2em; }
-  .events-day-header:first-child {
-    padding-top: 0; }
-
-.events-day-dayname {
-  color: #d6d6d1;
-  text-align: left;
-  min-width: 20px; }
-  .events-day-dayname:rtl {
-    text-align: right; }
-  .events-day-dayname .events-day-time {
-    text-align: right; }
-    .events-day-dayname .events-day-time:rtl {
-      text-align: left; }
-  .events-day-dayname .events-day-task {
-    color: #d6d6d1; }
-    .events-day-dayname .events-day-task:ltr {
-      padding-left: 8px; }
-    .events-day-dayname .events-day-task:rtl {
-      padding-right: 8px; }
+.message-list-sections {
+  spacing: 1.5em; }
+
+.message-list-section,
+.message-list-section-list {
+  spacing: 0.7em; }
+
+.message-list-section-title-box {
+  spacing: 0.4em; }
+
+.message-list-section-close > StIcon {
+  icon-size: 16px;
+  border-radius: 8px;
+  color: #393f3f;
+  background-color: #59594f; }
+
+/* FIXME: how do you do this in sass? */
+.message-list-section-close:hover > StIcon,
+.message-list-section-close:focus > StIcon {
+  background-color: #8e8e80; }
+
+.message {
+  background-color: #454c4c; }
+  .message:hover, .message:focus {
+    background-color: #5d6767; }
+
+.message-icon-bin {
+  padding: 5px; }
+
+.message-icon-bin > StIcon {
+  icon-size: 48px; }
+
+.message-secondary-bin {
+  color: #8e8e80; }
+
+.message-secondary-bin > StIcon {
+  icon-size: 16px; }
+
+.message-title {
+  font-weight: bold; }
+
+.message-content {
+  padding: 5px;
+  spacing: 5px; }
 
 .system-switch-user-submenu-icon {
   icon-size: 24px;
@@ -752,7 +802,7 @@ StScrollBar {
 .popup-menu-icon {
   icon-size: 1.09em; }
 
-.window-close, .notification-close {
+.window-close {
   background-image: url("close-window.svg");
   background-size: 32px;
   height: 32px;
@@ -763,12 +813,6 @@ StScrollBar {
   .window-close:rtl {
     -st-background-image-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5); }
 
-.notification-close {
-  -shell-close-overlap-x: 14px;
-  -shell-close-overlap-y: -12px; }
-  .notification-close:rtl {
-    -shell-close-overlap-x: -14px; }
-
 /* NETWORK DIALOGS */
 .nm-dialog {
   max-height: 500px;
@@ -1093,103 +1137,43 @@ StScrollBar {
   color: #eeeeec; }
 
 /* NOTIFICATIONS & MESSAGE TRAY */
-#message-tray {
-  background: #17191a url("noise-texture.png");
-  background-repeat: repeat;
-  height: 72px;
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
-  padding: 4px; }
-  #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 {
+.notification-banner {
   font-size: 11pt;
   width: 34em;
-  border-radius: 6px 6px 0 0;
+  margin: 5px;
+  border-radius: 6px;
   color: #eeeeec;
   background-color: #2e3436;
-  border: 1px solid #1c1f1f;
-  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; }
+  border: 1px solid #1c1f1f; }
+  .notification-banner:hover {
+    background-color: #2e3436; }
+  .notification-banner:focus {
+    background-color: #2e3436; }
 
-.notification-with-image {
-  min-height: 159px; }
+.notification-icon {
+  padding: 5px; }
 
-.notification-body {
+.notification-content {
+  padding: 5px;
   spacing: 5px; }
 
 .notification-actions {
-  paddinf-top: 18px;
-  spacing: 6px; }
-
-.summary-source {
-  border-radius: 0;
-  -st-natural-width: 60px;
-  padding: 9px;
-  transition-duration: 100ms; }
-
-.summary-source-button:hover .summary-source, .summary-source-button:selected .summary-source, 
.summary-source-button:focus .summary-source {
-  background-color: #33393c; }
+  background-color: #1c1f1f;
+  padding-top: 2px;
+  spacing: 1px; }
 
-.summary-source-counter {
-  font-size: 10pt;
-  font-weight: bold;
-  height: 1.6em;
-  width: 1.6em;
-  -shell-counter-overlap-x: 3px;
-  -shell-counter-overlap-y: 3px;
-  background-color: #215d9c;
-  color: #ffffff;
-  border: 2px solid #eeeeec;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
-  border-radius: 0.9em; }
-
-.summary-boxpointer {
-  -arrow-border-radius: 15px;
-  -arrow-background-color: #2e3436;
-  -arrow-base: 36px;
-  -arrow-rise: 18px;
-  color: #eeeeec;
-  -boxpointer-gap: 4px; }
-  .summary-boxpointer .notification {
-    border-radius: 9px;
-    border-width: 0;
-    background-color: transparent !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-button {
+  padding: 4px 4px 5px;
+  background-color: #222728; }
+  .notification-button:first-child {
+    border-radius: 0 0 0 6px; }
+  .notification-button:last-child {
+    border-radius: 0 0 6px 0; }
+  .notification-button:hover, .notification-buttonfocus {
+    background-color: #292f30; }
 
 .notification-scrollview {
   max-height: 18em;
@@ -1199,23 +1183,12 @@ StScrollBar {
   .notification-scrollview:rtl > StScrollBar {
     padding-right: 6px; }
 
-.notification-button {
-  height: 24px; }
-
-.notification-icon-button {
-  border-radius: 5px;
-  padding: 5px;
-  height: 24px;
-  width: 24px; }
-  .notification-icon-button > StIcon {
-    icons-size: 16px;
-    width: 16px;
-    height: 16px;
-    padding: 2px; }
-
 .secondary-icon {
   icon-size: 1.09em; }
 
+.chat-body {
+  spacing: 5px; }
+
 .chat-log-message {
   color: #d6d6d1; }
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]