From 7b3eeefc85e1ea32aacaf1298195bc93e587e665 Mon Sep 17 00:00:00 2001
From: Jakub Steiner <jimmac@gmail.com>
Date: Wed, 4 Feb 2015 13:03:46 +0100
Subject: [PATCH] theme: calendar widget visual cleanup

- clean up visual noise
- some typos in selectors & properties I missed
- misused opacify instead of transparentize
---
 data/theme/_common.scss                  | 39 ++++++++++++++++--------
 data/theme/gnome-shell-high-contrast.css | 29 ++++++++++--------
 data/theme/gnome-shell.css               | 29 ++++++++++--------
 3 files changed, 58 insertions(+), 39 deletions(-)

diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index 427ae4238..8fb011712 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -685,7 +685,10 @@ StScrollBar {
   .screencast-indicator { color: $warning_color; }
 }
   // calendar popover
-  .calendar { padding: .4em 1.75em .8em 1.75em; }
+  .calendar {
+    padding: .4em 1.75em .8em 1.75em;
+    margin-bottom: 2em;
+  }
 
     .datemenu-date-label { //topmost date label
       padding: .4em 1.7em;
@@ -713,7 +716,7 @@ StScrollBar {
       background-color: transparent;
       width: 32px;
       background-position: center;
-      boder-radius: 4px;
+      border-radius: 4px;
       &:hover, &:focus { background-color: transparentize($fg_color,0.95); }
       &:active { background-color: transparentize($bg_color,0.95); }
     }
@@ -731,35 +734,45 @@ StScrollBar {
       font-size: 80%;
       text-align: center;
       width: 2.4em; height: 2.4em;
+      padding: 0.1em;
+      margin: 2px;
       &:hover,&:focus { background-color: lighten($bg_color,5%); }
-      &:active { color: lighten($fg_color,5%); background-color: darken($bg_color,5%);}
+      &:active {
+        color: lighten($fg_color,5%);
+        background-color: $selected_bg_color;
+        border-color: transparent; //avoid jumparound due to today
+      }
       &.calendar-day-heading {  //day of week heading
         color: darken($fg_color,40%); 
         margin-top: 1em;
-        font-size: 90%;
+        font-size: 70%;
       }
     }
       .calendar-day { //border collapse hack - see calendar.js
-        border: 1px solid $borders_color;
-        border-top-width: 0; border-left-width: 0;
+        border-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-work-day {
+        border-radius: 1.4em;
+      }
+      .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-bottom-color: $selected_bg_color; //FIXME sadly can't have a color per side.
+        //color: lighten($fg_color,10%);
+        //background-color: darken($bg_color,5%);
+        border: 1px solid transparentize($borders_color,0.5);
       }
       .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);
+        color: transparentize($fg_color,0.7);
+        background-color: transparentize($bg_color,0.7);
         opacity: 0.5;
       }
 
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index 825d1ae5d..ecadbb750 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -861,7 +861,8 @@ StScrollBar {
     color: #f57900; }
 
 .calendar {
-  padding: .4em 1.75em .8em 1.75em; }
+  padding: .4em 1.75em .8em 1.75em;
+  margin-bottom: 2em; }
 
 .datemenu-date-label {
   padding: .4em 1.7em;
@@ -885,7 +886,7 @@ StScrollBar {
   background-color: transparent;
   width: 32px;
   background-position: center;
-  boder-radius: 4px; }
+  border-radius: 4px; }
   .pager-button:hover, .pager-button:focus {
     background-color: rgba(255, 255, 255, 0.05); }
   .pager-button:active {
@@ -905,21 +906,22 @@ StScrollBar {
   font-size: 80%;
   text-align: center;
   width: 2.4em;
-  height: 2.4em; }
+  height: 2.4em;
+  padding: 0.1em;
+  margin: 2px; }
   .calendar-day-base:hover, .calendar-day-base:focus {
     background-color: #0d0d0d; }
   .calendar-day-base:active {
     color: white;
-    background-color: black; }
+    background-color: #215d9c;
+    border-color: transparent; }
   .calendar-day-base.calendar-day-heading {
     color: #999999;
     margin-top: 1em;
-    font-size: 90%; }
+    font-size: 70%; }
 
 .calendar-day {
-  border: 1px solid black;
-  border-top-width: 0;
-  border-left-width: 0; }
+  border-width: 0; }
 
 .calendar-day-top {
   border-top-width: 1px; }
@@ -927,23 +929,24 @@ StScrollBar {
 .calendar-day-left {
   border-left-width: 1px; }
 
+.calendar-work-day {
+  border-radius: 1.4em; }
+
 .calendar-nonwork-day {
   background-color: black;
   color: #f2f2f2; }
 
 .calendar-today {
   font-weight: bold;
-  color: white;
-  border-bottom-width: 2px;
-  border-bottom-color: #215d9c; }
+  border: 1px solid rgba(0, 0, 0, 0.5); }
 
 .calendar-day-with-events {
   color: white;
   font-weight: bold; }
 
 .calendar-other-month-day {
-  color: white;
-  background-color: black;
+  color: rgba(255, 255, 255, 0.3);
+  background-color: rgba(0, 0, 0, 0.3);
   opacity: 0.5; }
 
 .events-table {
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index ab83e50ba..a51ded0f0 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -861,7 +861,8 @@ StScrollBar {
     color: #f57900; }
 
 .calendar {
-  padding: .4em 1.75em .8em 1.75em; }
+  padding: .4em 1.75em .8em 1.75em;
+  margin-bottom: 2em; }
 
 .datemenu-date-label {
   padding: .4em 1.7em;
@@ -885,7 +886,7 @@ StScrollBar {
   background-color: transparent;
   width: 32px;
   background-position: center;
-  boder-radius: 4px; }
+  border-radius: 4px; }
   .pager-button:hover, .pager-button:focus {
     background-color: rgba(238, 238, 236, 0.05); }
   .pager-button:active {
@@ -905,21 +906,22 @@ StScrollBar {
   font-size: 80%;
   text-align: center;
   width: 2.4em;
-  height: 2.4em; }
+  height: 2.4em;
+  padding: 0.1em;
+  margin: 2px; }
   .calendar-day-base:hover, .calendar-day-base:focus {
     background-color: #454c4c; }
   .calendar-day-base:active {
     color: #fafaf9;
-    background-color: #2d3232; }
+    background-color: #215d9c;
+    border-color: transparent; }
   .calendar-day-base.calendar-day-heading {
     color: #8e8e80;
     margin-top: 1em;
-    font-size: 90%; }
+    font-size: 70%; }
 
 .calendar-day {
-  border: 1px solid #1c1f1f;
-  border-top-width: 0;
-  border-left-width: 0; }
+  border-width: 0; }
 
 .calendar-day-top {
   border-top-width: 1px; }
@@ -927,23 +929,24 @@ StScrollBar {
 .calendar-day-left {
   border-left-width: 1px; }
 
+.calendar-work-day {
+  border-radius: 1.4em; }
+
 .calendar-nonwork-day {
   background-color: #343a3a;
   color: #e2e2df; }
 
 .calendar-today {
   font-weight: bold;
-  color: white;
-  border-bottom-width: 2px;
-  border-bottom-color: #215d9c; }
+  border: 1px solid rgba(28, 31, 31, 0.5); }
 
 .calendar-day-with-events {
   color: white;
   font-weight: bold; }
 
 .calendar-other-month-day {
-  color: #eeeeec;
-  background-color: #393f3f;
+  color: rgba(238, 238, 236, 0.3);
+  background-color: rgba(57, 63, 63, 0.3);
   opacity: 0.5; }
 
 .events-table {