GNOME.org
 

[gnome-shell-sass] calendarMenu: Fix several visual issues with calendar and notifications

commit e56b7fac8fbfffdd72e5dd50d83f4d056d77639c
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
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2161>

 _common.scss               |   2 +-
 widgets/_calendar.scss     | 124 +++++++++++++++++++++------------------------
 widgets/_dash.scss         |   2 +-
 widgets/_message-list.scss |  32 ++++++------
 widgets/_popovers.scss     |  28 +++++-----
 widgets/_scrollbars.scss   |  14 ++---
 6 files changed, 97 insertions(+), 105 deletions(-)
---
diff --git a/_common.scss b/_common.scss
index a782d8f..b682602 100644
--- a/_common.scss
+++ b/_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/widgets/_calendar.scss b/widgets/_calendar.scss
index fee76b0..4e58946 100644
--- a/widgets/_calendar.scss
+++ b/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/widgets/_dash.scss b/widgets/_dash.scss
index 4a8a1f9..9d820e7 100644
--- a/widgets/_dash.scss
+++ b/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/widgets/_message-list.scss b/widgets/_message-list.scss
index 3cb2d53..0dc2092 100644
--- a/widgets/_message-list.scss
+++ b/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/widgets/_popovers.scss b/widgets/_popovers.scss
index d0bdfa9..c0e3414 100644
--- a/widgets/_popovers.scss
+++ b/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/widgets/_scrollbars.scss b/widgets/_scrollbars.scss
index c1de7ad..77cde65 100644
--- a/widgets/_scrollbars.scss
+++ b/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%);}
   }
 }
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]