[gnome-shell/wip/snwh/calendar-popover-fixes] calendarMenu: Fix several visual issues with calendar and notifications

From: Sam Hewitt <snwh src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-shell/wip/snwh/calendar-popover-fixes] calendarMenu: Fix several visual issues with calendar and notifications
Date: Mon, 7 Feb 2022 17:43:16 +0000 (UTC)

commit 06e68b7665493d3fc3ef9c447b6138081338c29a
Author: Sam Hewitt <sam snwh org>
Date:   Mon Feb 7 14:07:54 2022 -0330

    calendarMenu: Fix several visual issues with calendar and notifications
    
    - drop card style from calendar
    - remove focus ability from non-interactive calendar elements
    - flesh out the styles for the calendar grid
    - fix margin and padding issue with login screen calendar
    - update no-notifications icon
    - add padding to media player buttons
    - catch a couple other minor style papercuts

 .../scalable/actions/preview-close-symbolic.svg    |   2 +-
 .../scalable/status/no-notifications-symbolic.svg  |   2 +-
 data/org.gnome.Shell-symbolic.Source.svg           |  20 ++--
 data/theme/gnome-shell-sass/_common.scss           |   2 +-
 data/theme/gnome-shell-sass/widgets/_calendar.scss | 124 ++++++++++-----------
 data/theme/gnome-shell-sass/widgets/_dash.scss     |   2 +-
 .../gnome-shell-sass/widgets/_message-list.scss    |  32 +++---
 data/theme/gnome-shell-sass/widgets/_popovers.scss |  28 ++---
 .../gnome-shell-sass/widgets/_scrollbars.scss      |  14 +--
 js/ui/calendar.js                                  |   9 +-
 10 files changed, 113 insertions(+), 122 deletions(-)
---
diff --git a/data/icons/scalable/actions/preview-close-symbolic.svg 
b/data/icons/scalable/actions/preview-close-symbolic.svg
index 9ba08edbf1..34f0823caa 100644
--- a/data/icons/scalable/actions/preview-close-symbolic.svg
+++ b/data/icons/scalable/actions/preview-close-symbolic.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg height="24px" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg";>
-    <path d="m 5 5 v 1 c 0 0.277344 0.113281 0.527344 0.292969 0.707031 l 5.292969 5.292969 l -5.292969 
5.292969 c -0.179688 0.179687 -0.292969 0.707031 -0.292969 0.707031 v 1 h 1 c 0.265625 0 0.519531 -0.105469 
0.707031 -0.292969 l 5.292969 -5.292969 l 5.292969 5.292969 c 0.1875 0.1875 0.441406 0.292969 0.707031 
0.292969 h 1 v -1 c 0.003906 -0.328125 -0.113281 -0.527344 -0.292969 -0.707031 l -5.292969 -5.292969 l 
5.292969 -5.292969 c 0.179688 -0.179687 0.296875 -0.378906 0.292969 -0.707031 v -1 h -1 c -0.265625 0 
-0.519531 0.105469 -0.707031 0.292969 l -5.292969 5.292969 l -5.292969 -5.292969 c -0.1875 -0.1875 -0.441406 
-0.292969 -0.707031 -0.292969 z m 0 0" fill="#241f31"/>
+    <path d="m 7 6 c -0.265625 0 -0.519531 0.105469 -0.707031 0.292969 c -0.390625 0.390625 -0.390625 
1.023437 0 1.414062 l 4.292969 4.292969 l -4.292969 4.292969 c -0.390625 0.390625 -0.390625 1.023437 0 
1.414062 s 1.023437 0.390625 1.414062 0 l 4.292969 -4.292969 l 4.292969 4.292969 c 0.390625 0.390625 1.023437 
0.390625 1.414062 0 s 0.390625 -1.023437 0 -1.414062 l -4.292969 -4.292969 l 4.292969 -4.292969 c 0.390625 
-0.390625 0.390625 -1.023437 0 -1.414062 c -0.1875 -0.1875 -0.441406 -0.292969 -0.707031 -0.292969 s 
-0.519531 0.105469 -0.707031 0.292969 l -4.292969 4.292969 l -4.292969 -4.292969 c -0.1875 -0.1875 -0.441406 
-0.292969 -0.707031 -0.292969 z m 0 0" fill="#241f31"/>
 </svg>
diff --git a/data/icons/scalable/status/no-notifications-symbolic.svg 
b/data/icons/scalable/status/no-notifications-symbolic.svg
index 91f2a2b63c..d30f7e1f69 100644
--- a/data/icons/scalable/status/no-notifications-symbolic.svg
+++ b/data/icons/scalable/status/no-notifications-symbolic.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg height="64px" viewBox="0 0 64 64" width="64px" xmlns="http://www.w3.org/2000/svg";>
-    <path d="m 32 0 c -3.3125 0 -6 2.6875 -6 6 c 0 0.304688 0.023438 0.601562 0.066406 0.894531 c -8.148437 
2.527344 -14.066406 10.125 -14.066406 19.105469 v 18 h -2 c -2.203125 0 -4 1.796875 -4 4 s 1.796875 4 4 4 h 
44 c 2.203125 0 4 -1.796875 4 -4 s -1.796875 -4 -4 -4 h -2 v -18 c 0 -8.980469 -5.917969 -16.578125 
-14.066406 -19.105469 c 0.042968 -0.292969 0.066406 -0.589843 0.066406 -0.894531 c 0 -3.3125 -2.6875 -6 -6 -6 
z m -8 56 c 0 2.859375 1.53125 5.5 4 6.921875 c 2.46875 1.4375 5.53125 1.4375 8 0 c 2.46875 -1.421875 4 
-4.0625 4 -6.921875 z m 0 0" fill="#241f31" fill-opacity="0.35"/>
+    <path d="m 32 0 c -3.3125 0 -6 2.6875 -6 6 c 0 0.304688 0.023438 0.601562 0.066406 0.894531 c -8.148437 
2.527344 -14.066406 10.125 -14.066406 19.105469 v 18 h -2 c -2.203125 0 -4 1.796875 -4 4 s 1.796875 4 4 4 h 
44 c 2.203125 0 4 -1.796875 4 -4 s -1.796875 -4 -4 -4 h -2 v -18 c 0 -8.980469 -5.917969 -16.578125 
-14.066406 -19.105469 c 0.042968 -0.292969 0.066406 -0.589843 0.066406 -0.894531 c 0 -3.3125 -2.6875 -6 -6 -6 
z m -8 56 c 0 2.859375 1.53125 5.5 4 6.921875 c 2.46875 1.4375 5.53125 1.4375 8 0 c 2.46875 -1.421875 4 
-4.0625 4 -6.921875 z m 0 0" fill="#241f31"/>
 </svg>
diff --git a/data/org.gnome.Shell-symbolic.Source.svg b/data/org.gnome.Shell-symbolic.Source.svg
index 3117847ab7..b017734e3d 100644
--- a/data/org.gnome.Shell-symbolic.Source.svg
+++ b/data/org.gnome.Shell-symbolic.Source.svg
@@ -22,17 +22,17 @@
      borderopacity="1.0"
      inkscape:pageopacity="1"
      inkscape:pageshadow="2"
-     inkscape:zoom="1.7898453"
-     inkscape:cx="-9.7773811"
-     inkscape:cy="212.30885"
+     inkscape:zoom="1"
+     inkscape:cx="51.5"
+     inkscape:cy="258"
      inkscape:document-units="px"
-     inkscape:current-layer="layer1"
+     inkscape:current-layer="layer2"
      showgrid="false"
      units="px"
      inkscape:window-width="1920"
      inkscape:window-height="1011"
      inkscape:window-x="0"
-     inkscape:window-y="0"
+     inkscape:window-y="32"
      inkscape:window-maximized="1"
      inkscape:snap-bbox="true"
      inkscape:bbox-paths="true"
@@ -82,7 +82,7 @@
       <path
          id="path81"
          d="m 320,473.53331 c -3.3125,0 -6,2.6875 -6,6 0,0.30385 0.0228,0.60279 0.0664,0.89453 C 
305.91768,482.95558 300,490.55273 300,499.53331 v 18 h -2 c -2.20312,0 -4,1.79688 -4,4 0,2.20312 1.79688,4 
4,4 h 44 c 2.20312,0 4,-1.79688 4,-4 0,-2.20312 -1.79688,-4 -4,-4 h -2 v -18 c 0,-8.98058 -5.91768,-16.57773 
-14.06641,-19.10547 0.0436,-0.29174 0.0664,-0.59068 0.0664,-0.89453 0,-3.3125 -2.6875,-6 -6,-6 z m -8,56 c 
0,2.85938 1.53125,5.5 4,6.92188 2.46875,1.43749 5.53125,1.43749 8,0 2.46875,-1.42188 4,-4.0625 4,-6.92188 z"
-         style="fill:#241f31;fill-opacity:0.35" />
+         style="fill:#241f31;fill-opacity:1" />
       <rect
          transform="scale(-1,1)"
          y="473.53333"
@@ -502,10 +502,10 @@
          id="rect14223"
          transform="matrix(0,-1,-1,0,0,0)"
          style="fill:none" />
-      <path
-         id="path14225"
-         d="m 141,469 v 1 c 0,0.277 0.11197,0.52603 0.29297,0.70703 l 5.29297,5.29297 -5.29297,5.29297 C 
141.11197,481.47397 141,482 141,482 v 1 h 1 c 0.26528,3.8e-4 0.51979,-0.10505 0.70703,-0.29297 L 
148,477.41406 l 5.29297,5.29297 c 0.18724,0.18792 0.44175,0.29335 0.70703,0.29297 h 1 v -1 c 0.003,-0.327 
-0.11297,-0.52703 -0.29297,-0.70703 L 149.41406,476 l 5.29297,-5.29297 C 154.88703,470.52703 155.003,470.327 
155,470 v -1 h -1 c -0.26529,-4e-4 -0.51978,0.10505 -0.70703,0.29297 L 148,474.58594 142.70703,469.29297 C 
142.51978,469.10505 142.26529,468.9996 142,469 Z"
-         style="fill:#241f31;fill-opacity:1" />
     </g>
+    <path
+       id="path986"
+       d="M 71 262 A 1 1 0 0 0 70.292969 262.29297 A 1 1 0 0 0 70.292969 263.70703 L 74.585938 268 L 
70.292969 272.29297 A 1 1 0 0 0 70.292969 273.70703 A 1 1 0 0 0 71.707031 273.70703 L 76 269.41406 L 
80.292969 273.70703 A 1 1 0 0 0 81.707031 273.70703 A 1 1 0 0 0 81.707031 272.29297 L 77.414062 268 L 
81.707031 263.70703 A 1 1 0 0 0 81.707031 262.29297 A 1 1 0 0 0 81 262 A 1 1 0 0 0 80.292969 262.29297 L 76 
266.58594 L 71.707031 262.29297 A 1 1 0 0 0 71 262 z "
+       style="fill:#241f31;fill-opacity:1" />
   </g>
 </svg>
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index a782d8f3dd..b68260236c 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -46,7 +46,7 @@ $hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color,
 $hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 7%));
 
 // derived active colors
-$active_bg_color: darken($bubble_buttons_color,if($variant=='light', 9%, 2%));
+$active_bg_color: darken($bg_color,if($variant=='light', 9%, 5%));
 $active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%));
 
 // fonts
diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss 
b/data/theme/gnome-shell-sass/widgets/_calendar.scss
index fee76b0c98..4e589462f3 100644
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -1,9 +1,7 @@
 /* Date/Time Menu */
 
 // overall menu
-#calendarArea {
-  padding:0;
-}
+#calendarArea {}
 
 // Calendar menu side column
 .datemenu-calendar-column {
@@ -11,24 +9,11 @@
   border: none;
   border-style: solid;
   border-color: $borders_color;
-  padding: 0;
-
-  &:ltr {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; }
-  &:rtl {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; }
 
-  .datemenu-displays-section {
-  }
-
-  .datemenu-displays-box {
-    spacing: $base_spacing;
-  }
-}
+  &:ltr {padding-left: $base_padding;}
+  &:rtl {padding-right: $base_padding;}
 
-.events-section-title {
-  @include card($flat: true);
-  color: $insensitive_fg_color;
-  font-weight: bold;
-  padding: .4em;
+  .datemenu-displays-box {spacing: $base_spacing;}
 }
 
 /* today button (the date) */
@@ -52,29 +37,31 @@
 
 /* Calendar */
 .calendar {
-  @include card;
-  padding: $base_padding;
+  @include card(flat);
 
-  // month
-  .calendar-month-label {
-    color: lighten($fg_color,5%);
-    font-weight: bold;
-    padding: 8px 0;
-  }
+  // month header
+  .calendar-month-header {
 
-  // prev/next month icons
-  .calendar-change-month-back StIcon,
-  .calendar-change-month-forward StIcon {
-    icon-size: $base_icon_size;
-  }
+    // prev/next month icons
+    .calendar-change-month-back StIcon,
+    .calendar-change-month-forward StIcon {
+      icon-size: $base_icon_size;
+    }
 
-  .pager-button {
-    background-color: transparent;
-    height: 32px;
-    width: 32px;
-    border-radius: $base_border_radius - 2px;
-    &:hover, &:focus { background-color: $hover_bg_color; }
-    &:active { background-color: $active_bg_color; }
+    // month label
+    .calendar-month-label {
+      font-weight: bold;
+    }
+
+    .pager-button {
+      background-color: transparent;
+      height: 32px;
+      width: 32px;
+      margin: 2px;
+      border-radius: $base_border_radius - 2px;
+      &:hover, &:focus {background-color: $hover_bg_color;}
+      &:active {background-color: $active_bg_color;}
+    }
   }
 
   $calendar_day_size: 32px;
@@ -82,51 +69,60 @@
   .calendar-day-base {
     @include fontsize($base_font_size - 3);
     text-align: center;
-    padding: 0;
     margin: 2px;
     height: $calendar_day_size;
     width: $calendar_day_size;
     border-radius: $calendar_day_size * 0.5 + 2px;
     font-feature-settings: "tnum";
     
-    &:hover, &:focus { background-color: $hover_bg_color; }
+    &:hover {background-color: $hover_bg_color;}
+    &:focus {
+      font-weight: 1000;
+      background-color: mix($bg_color, $selected_bg_color, 80%);
+      color: $selected_fg_color;
+      box-shadow: 0 0 0 2px transparentize($selected_bg_color, 0.4);
+    }
+
     &:active,&:selected {
-      color: lighten($fg_color,10%);
-      background-color: darken($bg_color,5%);
+      font-weight: 1000;
+      color: $active_fg_color;
+      background-color: $active_bg_color;
+      &:focus {
+        background-color: mix($active_bg_color, $selected_bg_color, 80%);
+      }
     }
 
     // day of week heading
     &.calendar-day-heading {
       color: $insensitive_fg_color;
-      font-weight: 1000;
       padding-top: $base_padding;
       height: 16px !important; // force heading to be smaller height
       @include fontsize($base_font_size - 2);
     }
   }
 
-  .calendar-day { //border collapse hack - see calendar.js
-    border-width: 0;
+  .calendar-day {
+    border-width: 0; // border collapse hack - see calendar.js
   }
 
-  .calendar-day-top {
-    border-top-width: 1px;
-  }
+  .calendar-work-day {}
 
-  .calendar-day-left {
-    border-left-width: 1px;
+  .calendar-nonwork-day {
+    color: $insensitive_fg_color;
   }
 
-  .calendar-work-day {
+  .calendar-other-month-day {
+    color: transparentize($fg_color, 0.5);
+    &.calendar-nonwork-day {
+      color: transparentize($insensitive_fg_color, 0.5);
+    }
   }
 
-  .calendar-nonwork-day {
-    color: $insensitive_fg_color;
-  }
 
   // Today
   .calendar-today {
     background-color: $selected_bg_color;
+    font-weight: 1000;
     color: $selected_fg_color !important;
 
     &:hover,&:focus {
@@ -146,7 +142,7 @@
   }
 
   .calendar-day-with-events {
-    background-image: if($variant == 'light', 
url("resource:///org/gnome/shell/theme/calendar-today-light.svg"), 
url("resource:///org/gnome/shell/theme/calendar-today.svg"));
+    background-image: if($variant == 'light', 
url("resource:///org/gnome/shell/theme/calendar-today-light.svg"),url("resource:///org/gnome/shell/theme/calendar-today.svg"));
     background-size: contain;
     &.calendar-work-day {
       color: lighten($fg_color,10%);
@@ -154,19 +150,15 @@
     }
   }
 
-  .calendar-other-month-day {
-    color: transparentize($fg_color ,0.5) !important;
-  }
-
   .calendar-week-number {
     @include fontsize($base_font_size - 4);
     font-weight: bold;
-    height: 1.8em;
-    width: 2.3em; 
-    border-radius: 2px;
+    font-feature-settings: "tnum";
     margin: 6px;
+    padding: $base_padding;
+    border-radius: 3px;
     background-color: darken($bg_color, 2%);
-    color: lighten($fg_color, 5%);
+    color: $insensitive_fg_color
   }
 }
 
@@ -226,8 +218,8 @@
     font-feature-settings: "tnum";
     @include fontsize($base_font_size);
 
-    &:ltr { text-align: right; }
-    &:rtl { text-align: left; }
+    &:ltr {text-align: right;}
+    &:rtl {text-align: left;}
   }
 
   // timezone offset label
diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index 4a8a1f9b61..9d820e7848 100644
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -68,7 +68,7 @@ $dash_border_radius: $modal_radius + 8px;
 .dash-separator {
   width: 1px;
   margin: 0 $base_margin*2;
-  background-color: transparentize($borders_color,0.2);
+  background-color: $borders_color;
 }
 
 // OSD Tooltip
diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss 
b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index 3cb2d53a29..0dc2092198 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -4,12 +4,19 @@
 // main list
 .message-list {
   width: 32em;
-  padding: 0;
+  border: none;
+  border-style: solid;
+  border-color: $borders_color;
+  padding: $base_padding;
+
+  // padding and margins to account for scrollbar
+  &:ltr {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; }
+  &:rtl {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; }
 
   .message-list-placeholder { 
     font-weight:1000; 
     font-size: 18pt;
-    color: $insensitive_fg_color;
+    color: transparentize($fg_color, .8);
     spacing: 12px;
 
     // icon size and color
@@ -21,15 +28,14 @@
   }
 }
 
-
 .message-list-sections {
   spacing: $base_spacing;
   margin: 0; 
   padding-bottom: $base_padding;
 
   // to account for scrollbar
-  &:ltr {margin-right: $base_margin * 4; }
-  &:rtl {margin-left: $base_margin * 4;}
+  &:ltr {margin-right: $base_margin * 3; }
+  &:rtl {margin-left: $base_margin * 3;}
 }
 
 .message-list-section,
@@ -122,18 +128,12 @@
     border-radius: 99px;
     padding: $base_padding - 1px;
     margin: 1px;
-    &:hover { 
-      background-color: transparentize($fg_color, 0.8);
-    }
-    &:active {
-      background-color: transparentize($fg_color, 0.9);
-    }
+    &:hover {background-color: transparentize($fg_color, 0.8);}
+    &:active {background-color: transparentize($fg_color, 0.9);}
   }
 
   // body
-  .message-body {
-    color: darken($fg_color, 10%);
-  }
+  .message-body {color: darken($fg_color, 10%);}
 }
 
 // URLs in messages
@@ -143,7 +143,7 @@
 
 /* Media Controls */
 .message-media-control {
-  padding: 0 $base_padding*2;
+  padding: 0 $base_padding*3;
   margin: $base_padding*2 0;
   border-radius: $base_border_radius;
   color: $fg_color;
@@ -161,7 +161,7 @@
 
   &:insensitive { color: lighten($insensitive_fg_color, 5%); }
   
-  // fix border-radius for last button
+  // fix margin for last button
   &:last-child:ltr { margin-right: $base_margin*3; }
   &:last-child:rtl { margin-left: $base_margin*3; }
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss 
b/data/theme/gnome-shell-sass/widgets/_popovers.scss
index d0bdfa985c..c0e34142c2 100644
--- a/data/theme/gnome-shell-sass/widgets/_popovers.scss
+++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss
@@ -19,7 +19,7 @@
   min-width: 15em;
   color: $fg_color;
 
-  //.popup-status-menu-item { font-weight: normal;  color: pink; } //dunno what that is
+  //.popup-status-menu-item {font-weight: normal;  color: pink;} //dunno what that is
   &.panel-menu {
     -boxpointer-gap: $base_margin+2px; // distance from the panel
     margin-bottom: 1.75em; // so it doesn't touch the bottom of the screen
@@ -50,8 +50,8 @@
   border-radius: $base_border_radius;
   transition: 0.2s all ease;
 
-  &:ltr { padding-right:$base_padding; padding-left: 0; }
-  &:rtl { padding-right: 0; padding-left:$base_padding; }
+  &:ltr {padding-right:$base_padding; padding-left: 0;}
+  &:rtl {padding-right: 0; padding-left:$base_padding;}
 
   &:hover {
     background-color: $hover_bg_color;
@@ -60,7 +60,7 @@
   &:checked {
     background-color: $hover_bg_color;
     margin-bottom: 0;
-    box-shadow: inset 0 -1px 0 0 darken($hover_bg_color, 5%);
+    box-shadow: inset 0 -1px 0 0 darken($hover_bg_color, 3%);
     border-radius: $base_border_radius $base_border_radius 0 0;
     
     &:hover {
@@ -73,12 +73,12 @@
     color: $fg_color;
   }
 
-  &:active { 
+  &:active {
     background-color: lighten($active_bg_color,3%);
     color: lighten($active_fg_color,3%);
   }
 
-  &:insensitive { color: transparentize($fg_color,0.5);}
+  &:insensitive {color: transparentize($fg_color,0.5);}
 }
 
 // all icons and other graphical elements
@@ -89,12 +89,12 @@
   font-weight: bold;
   font-size: smaller;
 
-  &:insensitive { color: $insensitive_fg_color; }
+  &:insensitive {color: $insensitive_fg_color;}
 }
 
 // symbolic icons in popover
 .popup-menu-arrow,
-.popup-menu-icon { 
+.popup-menu-icon {
   icon-size: 16px !important;
 }
 
@@ -123,7 +123,7 @@
   }
 
   .popup-menu-section {
-    .popup-menu-item:last-child:hover { border-radius: 0 }
+    .popup-menu-item:last-child:hover {border-radius: 0 }
     &:last-child .popup-menu-item:last-child {
       border-radius: 0 0 $base_border_radius $base_border_radius;
     }
@@ -136,8 +136,8 @@
   font-weight: bold;
   font-size: 1em;
 
-  &:ltr { text-align: right; };
-  &:rtl { text-align: left; };
+  &:ltr {text-align: right;};
+  &:rtl {text-align: left;};
 }
 
 // separator
@@ -179,12 +179,12 @@
   .popup-menu-ornament {width:0;padding:0;margin:0;}
 
   .popup-menu-item {
-    &:ltr { padding-left:$base_padding;padding-right:$base_padding*2; }
-    &:rtl { padding-right:$base_padding;padding-left:$base_padding*2; }
+    &:ltr {padding-left:$base_padding;padding-right:$base_padding*2;}
+    &:rtl {padding-right:$base_padding;padding-left:$base_padding*2;}
   }
 
   // lock screen, shutdown, etc. buttons
-  .popup-menu-icon { 
+  .popup-menu-icon {
     padding:0;
     margin: 0 $base_margin;
     -st-icon-style: symbolic;
diff --git a/data/theme/gnome-shell-sass/widgets/_scrollbars.scss 
b/data/theme/gnome-shell-sass/widgets/_scrollbars.scss
index c1de7ad708..77cde6533d 100644
--- a/data/theme/gnome-shell-sass/widgets/_scrollbars.scss
+++ b/data/theme/gnome-shell-sass/widgets/_scrollbars.scss
@@ -9,8 +9,8 @@ StScrollBar {
   padding: 0;
 
   StScrollView & {
-    min-width: 14px;
-    min-height: 14px;
+    min-width: 8px;
+    min-height: 8px;
   }
 
   StBin#trough {
@@ -20,10 +20,10 @@ StScrollBar {
 
   StButton#vhandle, StButton#hhandle {
     border-radius: 8px;
-    background-color: mix($fg_color, $bg_color, 60%);
-    //border: 3px solid transparent; //would be nice to margin or at least to transparent
-    margin: 3px;
-    &:hover { background-color: mix($fg_color, $bg_color, 80%); }
-    &:active { background-color: $selected_bg_color; }
+    background-color: mix($fg_color, $bg_color, 30%);
+    border: 3px solid transparent; //would be nice to margin or at least to transparent
+    transition: 500ms all ease;
+    &:hover {background-color: mix($fg_color, $bg_color, 50%);}
+    &:active {background-color: mix($fg_color, $bg_color, 40%);}
   }
 }
diff --git a/js/ui/calendar.js b/js/ui/calendar.js
index 4ed17cf73a..c7aaab6a8b 100644
--- a/js/ui/calendar.js
+++ b/js/ui/calendar.js
@@ -462,7 +462,7 @@ var Calendar = GObject.registerClass({
         this.destroy_all_children();
 
         // Top line of the calendar '<| September 2009 |>'
-        this._topBox = new St.BoxLayout();
+        this._topBox = new St.BoxLayout({style_class: 'calendar-month-header'});
         layout.attach(this._topBox, 0, 0, offsetCols + 7, 1);
 
         this._backButton = new St.Button({ style_class: 'calendar-change-month-back pager-button',
@@ -477,6 +477,7 @@ var Calendar = GObject.registerClass({
             can_focus: true,
             x_align: Clutter.ActorAlign.CENTER,
             x_expand: true,
+            y_align: Clutter.ActorAlign.CENTER,
         });
         this._topBox.add_child(this._monthLabel);
 
@@ -500,8 +501,7 @@ var Calendar = GObject.registerClass({
             // and we want, ideally, a single character for e.g. S M T W T F S
             let customDayAbbrev = _getCalendarDayAbbreviation(iter.getDay());
             let label = new St.Label({ style_class: 'calendar-day-base calendar-day-heading',
-                                       text: customDayAbbrev,
-                                       can_focus: true });
+                                       text: customDayAbbrev });
             label.accessible_name = iter.toLocaleFormat('%A');
             let col;
             if (this.get_text_direction() == Clutter.TextDirection.RTL)
@@ -683,8 +683,7 @@ var Calendar = GObject.registerClass({
 
             if (this._useWeekdate && iter.getDay() == 4) {
                 let label = new St.Label({ text: iter.toLocaleFormat('%V'),
-                                           style_class: 'calendar-day-base calendar-week-number',
-                                           can_focus: true });
+                                           style_class: 'calendar-week-number' });
                 let weekFormat = Shell.util_translate_time_string(N_("Week %V"));
                 label.clutter_text.y_align = Clutter.ActorAlign.CENTER;
                 label.accessible_name = iter.toLocaleFormat(weekFormat);
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]