GNOME.org
 

[gnome-shell/wip/fmuellner/notification-redux+sass: 121/122] Bring back style, sass'ified

commit 5c4ed842234495e1842b333ab71275ebe7686d76
Author: Florian Müllner <fmuellner gnome org>
Date:   Tue Feb 17 15:20:00 2015 +0100

    Bring back style, sass'ified

 data/theme/_common.scss    |  290 +++++++++++++++++++++----------------------
 data/theme/gnome-shell.css |  265 +++++++++++++++++++---------------------
 2 files changed, 268 insertions(+), 287 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index ac5a4b2..4c86d88 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -697,11 +697,69 @@ StScrollBar {
   .screencast-indicator { color: $warning_color; }
 }
   // calendar popover
+
+  #calendarArea {
+    padding: 0.75em 1.0em;
+  }
+
+  .datemenu-today-button,
+  .calendar,
+  .datemenu-displays-box,
+  .message-list-sections {
+      margin: 0 1.5em;
+  }
+
+  .datemenu-calendar-column {
+      spacing: 0.5em;
+      padding-bottom: 3em;
+  }
+
   .calendar {
-    padding: .4em 1.75em .8em 1.75em;
-    margin-bottom: 2em;
+      margin-bottom: 1em;
+  }
+
+  .message-list-section-title,
+  .datemenu-today-button,
+  .world-clocks-button {
+      border-radius: 4px;
+      padding: .4em;
+  }
+
+  .message-list-section-list:ltr {
+      padding-left: .4em;
+  }
+
+  .message-list-section-list:rtl {
+      padding-right: .4em;
   }
 
+.message-list-section-title,
+.datemenu-today-button,
+.world-clocks-button {
+      &:hover,&:focus { background-color: lighten($bg_color,5%); }
+      &:active {
+        color: lighten($selected_fg_color,5%);
+        background-color: $selected_bg_color;
+      }
+}
+
+.datemenu-today-button .day-label {
+}
+
+.datemenu-today-button .date-label {
+    font-size: 1.5em;
+}
+
+.world-clocks-header,
+.message-list-section-title {
+    color: darken($fg_color,40%);
+    font-weight: bold;
+}
+
+.world-clocks-grid {
+    spacing-rows: 0.4em;
+}
+
     .datemenu-date-label { //topmost date label
       padding: .4em 1.7em;
       text-align: center;
@@ -710,12 +768,6 @@ StScrollBar {
       font-size: 110%;
     }
 
-    .calendar-vertical-separator {
-      width: .3em;
-      -stipple-width: 1px;
-      -stipple-color: $_bubble_borders_color;
-    }
-    
     .calendar-month-label {
       color: darken($fg_color,5%);
       font-weight: bold;
@@ -787,36 +839,67 @@ StScrollBar {
         opacity: 0.5;
       }
 
-    .events-table { //right hand side
-      width: 15em;
-      spacing-columns: 1em;
-      padding: 0 1.4em;
-      &:ltr { padding-right: 1.9em; }
-      &:rtl { padding-left: 1.9em; }
-    }
-      .events-day-header {
-        font-weight: bold;
-        color: darken($fg_color,10%);
-        padding-left: 0;
-        padding-top: 1.2em;
-        &:first-child { padding-top: 0; }
-      }
-      .events-day-dayname {
-        color: darken($fg_color,10%);
-        text-align: left;
-        min-width: 20px;
-        &:rtl { text-align: right; }
-        .events-day-time {
-          text-align: right;
-          &:rtl { text-align: left; }
-        }
-        .events-day-task {
-          color: darken($fg_color,10%);
-          &:ltr { padding-left: 8px; }
-          &:rtl { padding-right: 8px; }
-        }
-      }
-        
+/* Message list */
+
+.message-list {
+    width: 340px;
+}
+
+.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: $bg_color;
+    background-color: darken($fg_color,60%);
+}
+
+/* FIXME: how do you do this in sass? */
+.message-list-section-close:hover > StIcon,
+.message-list-section-close:focus > StIcon {
+      background-color: darken($fg_color,40%);
+}
+
+.message {
+    background-color: lighten($bg_color,5%);
+      &:hover,&:focus { background-color: lighten($bg_color,15%); }
+}
+
+.message-icon-bin {
+    padding: 5px;
+}
+
+.message-icon-bin > StIcon {
+    icon-size: 48px;
+}
+
+.message-secondary-bin {
+    color: darken($fg_color,40%);
+}
+
+.message-secondary-bin > StIcon {
+    icon-size: 16px;
+}
+
+.message-title {
+    font-weight: bold;
+}
+
+.message-content {
+    padding: 5px;
+    spacing: 5px;
+}
 
   // a little unstructured mess:
 
@@ -872,7 +955,7 @@ StScrollBar {
 
 //close buttons
 
-.window-close, .notification-close {
+.window-close {
   background-image: url("close-window.svg");
   background-size: 32px;
   height: 32px;
@@ -882,12 +965,6 @@ StScrollBar {
     -shell-close-overlap: 16px;
     &: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;
-    
-    &:rtl { -shell-close-overlap-x: -14px; }
-  }
 
 /* NETWORK DIALOGS */
 
@@ -1273,88 +1350,35 @@ StScrollBar {
   .url-highlighter { link-color: $selected_bg_color; }
   
   // Banners
-  .notification { 
+  .notification-banner { 
     font-size: 11pt;
     width: 34em;
-    border-radius: 6px 6px 0 0;
+    margin: 5px;
+    border-radius: 6px;
     color: $_bubble_fg_color;
     background-color: $_bubble_bg_color;
     border: 1px solid $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: 0;
-    -st-natural-width: 60px; //FIXME left aligned rather than centered
-    padding: 9px;
-    transition-duration: 100ms;
+    &:hover { background-color: $_bubble_bg_color; }
   }
-  .summary-source-button { 
-    &:hover .summary-source,
-    &:selected .summary-source,
-    &:focus .summary-source { background-color: lighten($osd_bg_color,2%); }
+  .notification-icon { 
+    padding: 5px;
   }
-  .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: $selected_bg_color;
-    color: $selected_fg_color;
-    border: 2px solid $osd_fg_color;
-    box-shadow: 0 2px 2px rgba(0,0,0,0.5);
-    border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
+  .notification-content {
+    padding: 5px;
+    spacing: 5px;
   }
-  
-  //Message tray popovers
-  .summary-boxpointer {
-    -arrow-border-radius: 15px;
-    -arrow-background-color: $_bubble_bg_color;
-    -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: transparent !important;
-      padding-bottom: 12px;
-    }
-    #summary-right-click-menu {
-      padding-top: 12px;
-      padding-bottom: 12px;
-    }
+  .notification-actions {
+    background-color: $borders_color;
+    padding-top: 2px;
+    spacing: 1px;
   }
-  .summary-notification-stack-scrollview {
-    max-height: 24em;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    &:ltr { padding-right: 8px; }
-    &:rtl { padding-left: 8px; }
+  .notification-button {
+    padding: 4px 4px 5px;
+    background-color: darken($_bubble_bg_color,5%);
+    &:first-child { border-radius: 0 0 0 6px; }
+    &:last-child { border-radius: 0 0 6px 0; }
+    &:hover, &focus { background-color: darken($_bubble_bg_color,2%); }
   }
   .notification-scrollview {
     max-height: 18em;
@@ -1362,10 +1386,6 @@ StScrollBar {
     &:ltr > StScrollBar { padding-left: 6px; }
     &:rtl > StScrollBar { padding-right: 6px; }
   }
-  .notification-button {
-    //-st-natural-width: 140px;
-    height: 24px;
-  }
   .notification-icon-button { 
     border-radius: 5px; 
     padding: 5px;
@@ -1376,6 +1396,7 @@ StScrollBar {
   .secondary-icon { icon-size: 1.09em; }
 
   //chat bubbles
+  .chat-body { spacing: 5px; }
   .chat-log-message { color: darken($fg_color,10%); }
   .chat-empty-line { font-size: 4px; }
   .chat-received { 
@@ -1412,33 +1433,6 @@ StScrollBar {
       padding: 2px 5px;
     }
 
-    .hotplug-resident-box { spacing: 8px; }
-
-    .hotplug-resident-mount { 
-      spacing: 8px;
-      border-radius: 4px;
-      &:hover { background-color: transparentize($bg_color,0.7); }
-    }
-
-    .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 */
 
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 023f6a2..8086416 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -580,16 +580,64 @@ StScrollBar {
     border-color: #256ab1;
     border-bottom-width: 2px; }
   #panel .panel-menu {
-    -boxpointer-gap: 4px; }
+    -boxpointer-gap: 4px;
+    margin-bottom: 1.75em; }
   #panel .panel-status-indicators-box,
   #panel .panel-status-menu-box {
     spacing: 2px; }
   #panel .screencast-indicator {
     color: #f57900; }
 
+#calendarArea {
+  padding: 0.75em 1.0em; }
+
+.datemenu-today-button,
+.calendar,
+.datemenu-displays-box,
+.message-list-sections {
+  margin: 0 1.5em; }
+
+.datemenu-calendar-column {
+  spacing: 0.5em;
+  padding-bottom: 3em; }
+
 .calendar {
-  padding: .4em 1.75em .8em 1.75em;
-  margin-bottom: 2em; }
+  margin-bottom: 1em; }
+
+.message-list-section-title,
+.datemenu-today-button,
+.world-clocks-button {
+  border-radius: 4px;
+  padding: .4em; }
+
+.message-list-section-list:ltr {
+  padding-left: .4em; }
+
+.message-list-section-list:rtl {
+  padding-right: .4em; }
+
+.message-list-section-title:hover, .message-list-section-title:focus,
+.datemenu-today-button:hover,
+.datemenu-today-button:focus,
+.world-clocks-button:hover,
+.world-clocks-button:focus {
+  background-color: #454c4c; }
+.message-list-section-title:active,
+.datemenu-today-button:active,
+.world-clocks-button: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; }
+
+.world-clocks-grid {
+  spacing-rows: 0.4em; }
 
 .datemenu-date-label {
   padding: .4em 1.7em;
@@ -598,11 +646,6 @@ StScrollBar {
   font-weight: bold;
   font-size: 110%; }
 
-.calendar-vertical-separator {
-  width: .3em;
-  -stipple-width: 1px;
-  -stipple-color: rgba(238, 238, 236, 0.2); }
-
 .calendar-month-label {
   color: #e2e2df;
   font-weight: bold;
@@ -672,39 +715,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;
@@ -754,7 +812,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;
@@ -765,12 +823,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;
@@ -1121,80 +1173,38 @@ StScrollBar {
 .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-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;
@@ -1204,9 +1214,6 @@ StScrollBar {
   .notification-scrollview:rtl > StScrollBar {
     padding-right: 6px; }
 
-.notification-button {
-  height: 24px; }
-
 .notification-icon-button {
   border-radius: 5px;
   padding: 5px;
@@ -1221,6 +1228,9 @@ StScrollBar {
 .secondary-icon {
   icon-size: 1.09em; }
 
+.chat-body {
+  spacing: 5px; }
+
 .chat-log-message {
   color: #d6d6d1; }
 
@@ -1268,31 +1278,6 @@ StScrollBar {
   icon-size: 24px;
   padding: 2px 5px; }
 
-.hotplug-resident-box {
-  spacing: 8px; }
-
-.hotplug-resident-mount {
-  spacing: 8px;
-  border-radius: 4px; }
-  .hotplug-resident-mount:hover {
-    background-color: rgba(57, 63, 63, 0.3); }
-
-.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 */
 .magnifier-zoom-region {
   border: 2px solid #215d9c; }
@@ -1678,3 +1663,5 @@ StScrollBar {
   border: 2px solid grey;
   border-radius: 4px;
   padding: 6px; }
+
+/*# sourceMappingURL=gnome-shell.css.map */
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]