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

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2161>

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>

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>

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:zoom="1"
-     inkscape:cx="-9.7773811"
+     inkscape:cx="51.5"
-     inkscape:cy="212.30885"
+     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>

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

data/theme/gnome-shell-sass/widgets/_calendar.scss

@@ -1,9 +1,7 @@
 /* Date/Time Menu */
 
 // overall menu
-#calendarArea {
+#calendarArea {}
-  padding:0;
-}
 
 // 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; }
+  &:ltr {padding-left: $base_padding;}
-  &:rtl {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; }
+  &:rtl {padding-right: $base_padding;}
 
-  .datemenu-displays-section {
+  .datemenu-displays-box {spacing: $base_spacing;}
-  }
-
-  .datemenu-displays-box {
-    spacing: $base_spacing;
-  }
-}
-
-.events-section-title {
-  @include card($flat: true);
-  color: $insensitive_fg_color;
-  font-weight: bold;
-  padding: .4em;
 }
 
 /* today button (the date) */
@@ -52,29 +37,31 @@
 
 /* Calendar */
 .calendar {
-  @include card;
+  @include card(flat);
-  padding: $base_padding;
 
-  // month
+  // month header
-  .calendar-month-label {
+  .calendar-month-header {
-    color: lighten($fg_color,5%);
-    font-weight: bold;
-    padding: 8px 0;
-  }
 
-  // prev/next month icons
+    // prev/next month icons
-  .calendar-change-month-back StIcon,
+    .calendar-change-month-back StIcon,
-  .calendar-change-month-forward StIcon {
+    .calendar-change-month-forward StIcon {
-    icon-size: $base_icon_size;
+      icon-size: $base_icon_size;
-  }
+    }
 
-  .pager-button {
+    // month label
-    background-color: transparent;
+    .calendar-month-label {
-    height: 32px;
+      font-weight: bold;
-    width: 32px;
+    }
-    border-radius: $base_border_radius - 2px;
+
-    &:hover, &:focus { background-color: $hover_bg_color; }
+    .pager-button {
-    &:active { background-color: $active_bg_color; }
+      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%);
+      font-weight: 1000;
-      background-color: darken($bg_color,5%);
+      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
+  .calendar-day {
-    border-width: 0;
+    border-width: 0; // border collapse hack - see calendar.js
   }
 
-  .calendar-day-top {
+  .calendar-work-day {}
-    border-top-width: 1px;
-  }
-
-  .calendar-day-left {
-    border-left-width: 1px;
-  }
-
-  .calendar-work-day {
-  }
 
   .calendar-nonwork-day {
     color: $insensitive_fg_color;
   }
 
+  .calendar-other-month-day {
+    color: transparentize($fg_color, 0.5);
+    &.calendar-nonwork-day {
+      color: transparentize($insensitive_fg_color, 0.5);
+    }
+  }
+
+
   // 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;
+    font-feature-settings: "tnum";
-    width: 2.3em; 
-    border-radius: 2px;
     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; }
+    &:ltr {text-align: right;}
-    &:rtl { text-align: left; }
+    &:rtl {text-align: left;}
   }
 
   // timezone offset label

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

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; }
+  &:ltr {margin-right: $base_margin * 3; }
-  &:rtl {margin-left: $base_margin * 4;}
+  &:rtl {margin-left: $base_margin * 3;}
 }
 
 .message-list-section,
@@ -122,18 +128,12 @@
     border-radius: 99px;
     padding: $base_padding - 1px;
     margin: 1px;
-    &:hover { 
+    &:hover {background-color: transparentize($fg_color, 0.8);}
-      background-color: transparentize($fg_color, 0.8);
+    &:active {background-color: transparentize($fg_color, 0.9);}
-    }
-    &:active {
-      background-color: transparentize($fg_color, 0.9);
-    }
   }
 
   // body
-  .message-body {
+  .message-body {color: darken($fg_color, 10%);}
-    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; }
 }

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; }
+  &:ltr {padding-right:$base_padding; padding-left: 0;}
-  &:rtl { padding-right: 0; padding-left:$base_padding; }
+  &: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; };
+  &:ltr {text-align: right;};
-  &:rtl { text-align: left; };
+  &: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; }
+    &:ltr {padding-left:$base_padding;padding-right:$base_padding*2;}
-    &:rtl { padding-right:$base_padding;padding-left:$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;

data/theme/gnome-shell-sass/widgets/_scrollbars.scss

@@ -9,8 +9,8 @@ StScrollBar {
   padding: 0;
 
   StScrollView & {
-    min-width: 14px;
+    min-width: 8px;
-    min-height: 14px;
+    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%);
+    background-color: mix($fg_color, $bg_color, 30%);
-    //border: 3px solid transparent; //would be nice to margin or at least to transparent
+    border: 3px solid transparent; //would be nice to margin or at least to transparent
-    margin: 3px;
+    transition: 500ms all ease;
-    &:hover { background-color: mix($fg_color, $bg_color, 80%); }
+    &:hover {background-color: mix($fg_color, $bg_color, 50%);}
-    &:active { background-color: $selected_bg_color; }
+    &:active {background-color: mix($fg_color, $bg_color, 40%);}
   }
 }

js/ui/calendar.js

@@ -464,7 +464,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({
@@ -481,6 +481,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);
 
@@ -694,7 +695,7 @@ var Calendar = GObject.registerClass({
             if (this._useWeekdate && iter.getDay() == 4) {
                 const label = new St.Label({
                     text: iter.toLocaleFormat('%V'),
-                    style_class: 'calendar-day-base calendar-week-number',
+                    style_class: 'calendar-week-number',
                     can_focus: true,
                 });
                 let weekFormat = Shell.util_translate_time_string(N_("Week %V"));