[gnome-shell/wip/sass: 38/50] datetime/calendar popup

[Jakub Steiner <jimmac src gnome org>]

commit 2215488d11aab49ec85f0c92d11260f7ec4cda3f
Author: Jakub Steiner <jimmac gmail com>
Date:   Tue Nov 25 15:14:32 2014 +0100

    datetime/calendar popup
    
    - separator seems to have a semi-opaque top that interfers
      with the bottom row of teh calendar
    
    - current day can't have a blue brder on the bottom,
      but $borders_color on the sides. Apparently cannot
      use non-uniform border colors.
    
    - month pager missing

 data/theme/_common.scss          |   95 ++++++++++++++
 data/theme/_gnome-shell-old.scss |  213 ------------------------------
 data/theme/gnome-shell.css       |  263 ++++++++++++++------------------------
 3 files changed, 191 insertions(+), 380 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index 67fd017..dc9c01d 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -334,6 +334,101 @@ StScrollBar {
   
   .screencast-indicator { color: $warning_color; }
 }
+  // calendar popover
+  .calendar { padding: .4em 1.75em .8em 1.75em; }
+
+    .calendar-vertical-separator {
+      width: .3em;
+      -stipple-width: 1px;
+      -stipple-color: transparentize($fg_color,0.8);
+    }
+    
+    .calendar-month-label {
+      color: darken($fg_color,5%);
+      font-weight: bold;
+      padding: 8px 0;
+      &:focus {}
+    }
+    
+    .calendar-change-month-back { //arrow back
+      &:rtl {}
+      &:hover, &:focus {}
+      &:active {}
+    }
+    .calendar-change-month-forward { //arrow foreward
+      &:rtl {}
+      &:hover, &:focus {}
+      &:active {}
+    }
+    .datemenu-date-label {
+      padding: .4em 1.7em;
+      text-align: center;
+      color: darken($fg_color,10%);
+      font-size: 130%;
+      border-radius: 4px;
+    }
+    
+    .calendar-day-base {
+      font-size: 80%;
+      text-align: center;
+      width: 2.4em; height: 2.4em;
+      &:hover,&:focus { background-color: lighten($bg_color,5%); }
+      &:active { color: lighten($fg_color,5%); background-color: darken($bg_color,5%);}
+    }
+      .calendar-day { //border collapse hack - see calendar.js
+        border: 1px solid $borders_color;
+        border-top-width: 0; border-left-width: 0;
+      }
+      .calendar-day-top { border-top-width: 1px; }
+      .calendar-day-left { border-left-width: 1px; }
+      .calendar-work-day {}
+      .calendar-nonwork-day { background-color: darken($bg_color, 2%); color: darken($fg_color,5%); }
+      .calendar-today {
+        font-weight: bold;
+        color: lighten($fg_color,10%);
+        border-bottom-width: 2px;
+        border-color: $selected_bg_color; //FIXME sadly can't have a color per side.
+      }
+      .calendar-day-with-events {
+        color: white;
+        font-weight: bold;
+      }
+      .calendar-other-month-day {
+        color: opacify($fg_color,0.5);
+        background-color: opacify($bg_color,0.5);
+        opacity: 0.5;
+      }
+
+    .events-table {
+      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; }
+        }
+      }
+        
 
   // a little unstructured mess:
 
diff --git a/data/theme/_gnome-shell-old.scss b/data/theme/_gnome-shell-old.scss
index ec9a873..c9918d2 100644
--- a/data/theme/_gnome-shell-old.scss
+++ b/data/theme/_gnome-shell-old.scss
@@ -89,219 +89,6 @@
 }
 
 
-
-
-
-/* Overview */
-
-/* Calendar popup */
-
-.calendar-vertical-separator {
-    -stipple-width: 1px;
-    -stipple-color: #505050;
-    width: 0.3em;
-}
-
-.calendar {
-    padding: .4em 1.75em .8em 1.75em;
-}
-
-.calendar-month-label {
-    color: #888a85;
-    font-size: 9.5pt;
-    font-weight: bold;
-    padding-bottom: 8px;
-    padding-top: 8px;
-}
-
-.calendar-month-label:focus {
-    background-color: #999999;
-}
-
-.calendar-change-month-back {
-    width: 18px;
-    height: 12px;
-    background-image: url("calendar-arrow-left.svg");
-    border-radius: 4px;
-}
-
-.calendar-change-month-back:rtl {
-    background-image: url("calendar-arrow-right.svg");
-}
-
-.calendar-change-month-back:hover,
-.calendar-change-month-back:focus {
-    background-color: #999999;
-}
-.calendar-change-month-back:active {
-    background-color: #aaaaaa;
-}
-
-.calendar-change-month-forward {
-    width: 18px;
-    height: 12px;
-    background-image: url("calendar-arrow-right.svg");
-    border-radius: 4px;
-}
-
-.calendar-change-month-forward:rtl {
-    background-image: url("calendar-arrow-left.svg");
-}
-
-.calendar-change-month-forward:hover,
-.calendar-change-month-forward:focus {
-    background-color: #999999;
-}
-.calendar-change-month-forward:active {
-    background-color: #aaaaaa;
-}
-
-.datemenu-date-label {
-    padding: .4em 1.7em;
-    font-weight: bold;
-    text-align: center;
-    color: #eeeeec;
-    border-radius: 4px;
-}
-
-.datemenu-date-label:hover,
-.datemenu-date-label:focus {
-    background-color: #999999;
-}
-
-.datemenu-date-label:active {
-    background-color: #aaaaaa;
-}
-
-.calendar-day-base {
-    font-size: 9pt;
-    text-align: center;
-    width: 2.4em;
-    height: 2.4em;
-}
-
-.calendar-day-base:hover,
-.calendar-day-base:focus {
-    background-color: #777777;
-}
-
-.calendar-day-base:active {
-    font-size: 9pt;
-    background-color: #555555;
-    color: white;
-}
-
-.calendar-day-heading {
-    color: #888a85;
-    padding-top: .2em;
-    height: 1.7em;
-}
-
-.calendar-week-number {
-    color: #babdb6;
-    font-weight: bold;
-}
-
-/* Hack used in lieu of border-collapse - see calendar.js */
-.calendar-day {
-    border: 1px solid #505050;
-    color: #babdb6;
-    border-top-width: 0;
-    border-left-width: 0;
-}
-
-.calendar-day-top {
-    border-top-width: 1px;
-}
-
-.calendar-day-left {
-    border-left-width: 1px;
-}
-
-.calendar-work-day {
-}
-
-.calendar-nonwork-day {
-    background-color: rgba(128, 128, 128, .1);
-}
-
-.calendar-today {
-    background-image: url("calendar-today.svg");
-    text-shadow: black 0px 2px 2px;
-    font-weight: bold;
-}
-
-.calendar-day-with-events {
-    font-weight: bold;
-    color: white;
-}
-
-.calendar-other-month-day {
-    color: #333333;
-}
-
-.events-table {
-    width: 320px;
-    spacing-columns: 6pt;
-    padding: 0 1.4em;
-}
-
-.events-table:ltr {
-    padding-right: 1.9em;
-}
-
-.events-table:rtl {
-    padding-left: 1.9em;
-}
-
-.events-day-header {
-    font-weight: bold;
-    color: #999999;
-    padding-left: 0.4em;
-    padding-top: 1.2em;
-}
-
-.events-day-header:first-child {
-    padding-top: 0;
-}
-
-.events-day-header:rtl {
-    padding-left: 0;
-    padding-right: 0.4em;
-}
-
-.events-day-dayname {
-    color: rgba(153, 153, 153, 1.0);
-    text-align: left;
-    min-width: 20px;
-}
-
-.events-day-dayname:rtl {
-    text-align: right;
-}
-
-.events-day-time {
-    color: #fff;
-    text-align: right;
-}
-
-.events-day-time:rtl {
-    text-align: left;
-}
-
-.events-day-task {
-    color: rgba(153, 153, 153, 1.0);
-    padding-left: 8pt;
-}
-
-.events-day-task:rtl {
-    padding-left: 0px;
-    padding-right: 8pt;
-}
-
-/* Message Tray */
-
-
 /* OSD */
 .osd-window {
     text-align: center;
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 61d9f1b..ddb6fdf 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -70,172 +70,6 @@
 .no-networks-box {
   spacing: 12px; }
 
-/* Overview */
-/* Calendar popup */
-.calendar-vertical-separator {
-  -stipple-width: 1px;
-  -stipple-color: #505050;
-  width: 0.3em; }
-
-.calendar {
-  padding: .4em 1.75em .8em 1.75em; }
-
-.calendar-month-label {
-  color: #888a85;
-  font-size: 9.5pt;
-  font-weight: bold;
-  padding-bottom: 8px;
-  padding-top: 8px; }
-
-.calendar-month-label:focus {
-  background-color: #999999; }
-
-.calendar-change-month-back {
-  width: 18px;
-  height: 12px;
-  background-image: url("calendar-arrow-left.svg");
-  border-radius: 4px; }
-
-.calendar-change-month-back:rtl {
-  background-image: url("calendar-arrow-right.svg"); }
-
-.calendar-change-month-back:hover,
-.calendar-change-month-back:focus {
-  background-color: #999999; }
-
-.calendar-change-month-back:active {
-  background-color: #aaaaaa; }
-
-.calendar-change-month-forward {
-  width: 18px;
-  height: 12px;
-  background-image: url("calendar-arrow-right.svg");
-  border-radius: 4px; }
-
-.calendar-change-month-forward:rtl {
-  background-image: url("calendar-arrow-left.svg"); }
-
-.calendar-change-month-forward:hover,
-.calendar-change-month-forward:focus {
-  background-color: #999999; }
-
-.calendar-change-month-forward:active {
-  background-color: #aaaaaa; }
-
-.datemenu-date-label {
-  padding: .4em 1.7em;
-  font-weight: bold;
-  text-align: center;
-  color: #eeeeec;
-  border-radius: 4px; }
-
-.datemenu-date-label:hover,
-.datemenu-date-label:focus {
-  background-color: #999999; }
-
-.datemenu-date-label:active {
-  background-color: #aaaaaa; }
-
-.calendar-day-base {
-  font-size: 9pt;
-  text-align: center;
-  width: 2.4em;
-  height: 2.4em; }
-
-.calendar-day-base:hover,
-.calendar-day-base:focus {
-  background-color: #777777; }
-
-.calendar-day-base:active {
-  font-size: 9pt;
-  background-color: #555555;
-  color: white; }
-
-.calendar-day-heading {
-  color: #888a85;
-  padding-top: .2em;
-  height: 1.7em; }
-
-.calendar-week-number {
-  color: #babdb6;
-  font-weight: bold; }
-
-/* Hack used in lieu of border-collapse - see calendar.js */
-.calendar-day {
-  border: 1px solid #505050;
-  color: #babdb6;
-  border-top-width: 0;
-  border-left-width: 0; }
-
-.calendar-day-top {
-  border-top-width: 1px; }
-
-.calendar-day-left {
-  border-left-width: 1px; }
-
-.calendar-nonwork-day {
-  background-color: rgba(128, 128, 128, 0.1); }
-
-.calendar-today {
-  background-image: url("calendar-today.svg");
-  text-shadow: black 0px 2px 2px;
-  font-weight: bold; }
-
-.calendar-day-with-events {
-  font-weight: bold;
-  color: white; }
-
-.calendar-other-month-day {
-  color: #333333; }
-
-.events-table {
-  width: 320px;
-  spacing-columns: 6pt;
-  padding: 0 1.4em; }
-
-.events-table:ltr {
-  padding-right: 1.9em; }
-
-.events-table:rtl {
-  padding-left: 1.9em; }
-
-.events-day-header {
-  font-weight: bold;
-  color: #999999;
-  padding-left: 0.4em;
-  padding-top: 1.2em; }
-
-.events-day-header:first-child {
-  padding-top: 0; }
-
-.events-day-header:rtl {
-  padding-left: 0;
-  padding-right: 0.4em; }
-
-.events-day-dayname {
-  color: #999999;
-  text-align: left;
-  min-width: 20px; }
-
-.events-day-dayname:rtl {
-  text-align: right; }
-
-.events-day-time {
-  color: #fff;
-  text-align: right; }
-
-.events-day-time:rtl {
-  text-align: left; }
-
-.events-day-task {
-  color: #999999;
-  padding-left: 8pt; }
-
-.events-day-task:rtl {
-  padding-left: 0px;
-  padding-right: 8pt; }
-
-/* Message Tray */
 /* OSD */
 .osd-window {
   text-align: center;
@@ -1026,7 +860,7 @@ StEntry {
   border-color: #1c1f1f;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
   selection-background-color: #215d9c;
-  selected-color: white; }
+  selected-color: #ffffff; }
   StEntry:focus {
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
     border-color: rgba(154, 154, 142, 0.5); }
@@ -1246,6 +1080,101 @@ StScrollBar {
   #panel .screencast-indicator {
     color: #f57900; }
 
+.calendar {
+  padding: .4em 1.75em .8em 1.75em; }
+
+.calendar-vertical-separator {
+  width: .3em;
+  -stipple-width: 1px;
+  -stipple-color: rgba(238, 238, 236, 0.2); }
+
+.calendar-month-label {
+  color: #e2e2df;
+  font-weight: bold;
+  padding: 8px 0; }
+
+.datemenu-date-label {
+  padding: .4em 1.7em;
+  text-align: center;
+  color: #d6d6d1;
+  font-size: 130%;
+  border-radius: 4px; }
+
+.calendar-day-base {
+  font-size: 80%;
+  text-align: center;
+  width: 2.4em;
+  height: 2.4em; }
+  .calendar-day-base:hover, .calendar-day-base:focus {
+    background-color: #454c4c; }
+  .calendar-day-base:active {
+    color: #fafaf9;
+    background-color: #2d3232; }
+
+.calendar-day {
+  border: 1px solid #1c1f1f;
+  border-top-width: 0;
+  border-left-width: 0; }
+
+.calendar-day-top {
+  border-top-width: 1px; }
+
+.calendar-day-left {
+  border-left-width: 1px; }
+
+.calendar-nonwork-day {
+  background-color: #343a3a;
+  color: #e2e2df; }
+
+.calendar-today {
+  font-weight: bold;
+  color: white;
+  border-bottom-width: 2px;
+  border-color: #215d9c; }
+
+.calendar-day-with-events {
+  color: white;
+  font-weight: bold; }
+
+.calendar-other-month-day {
+  color: #eeeeec;
+  background-color: #393f3f;
+  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; }
+
+.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; }
+
 .system-switch-user-submenu-icon {
   icon-size: 24px;
   border: 1px solid rgba(238, 238, 236, 0.4); }