[gnome-shell/wip/snwh/sass-cleanup: 445/475] theme: calendar fixes



commit 7d43b62089d5a102268a7ef6df0816feae625b8d
Author: Sam Hewitt <sam snwh org>
Date:   Thu Sep 12 13:16:10 2019 -0400

    theme: calendar fixes

 data/theme/gnome-shell-sass/widgets/_calendar.scss | 354 +++++++++++----------
 .../gnome-shell-sass/widgets/_message-list.scss    |  17 +-
 data/theme/gnome-shell-sass/widgets/_panel.scss    |  24 +-
 data/theme/gnome-shell-sass/widgets/_popovers.scss |  96 +++---
 4 files changed, 244 insertions(+), 247 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss 
b/data/theme/gnome-shell-sass/widgets/_calendar.scss
index 8dac62fbd5..00a54b9803 100644
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -1,49 +1,12 @@
 /* Date/Time Menu */
 
+// overall menu
 #calendarArea {
-       padding:$base_padding;
+       padding:0;
        margin:0;
 }
 
-// common style
-%calendar_box {
-       border: 1px solid $bubble_borders_color;
-       border-radius:$base_border_radius + 2px;
-       background-color: lighten($bg_color, 5%);
-       box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
-       // padding: $base_padding;
-       padding: 0;
-       margin: $base_margin;
-
-       &:hover,
-       &:focus {
-               background-color: $hover_bg_color;
-               box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
-               margin-top: $base_margin - 1px;
-               margin-bottom: $base_margin + 1px;
-       }
-       &:active { background-color: transparentize($fg_color, 0.84) }
-}
-
-
-// today button
-.datemenu-today-button {
-       margin:0;
-
-       // weekday label
-       .day-label {
-               font-size: $base_font_size + 1pt;
-               font-weight: bold;
-       }
-
-       // date label
-       .date-label {
-               font-size: $base_font_size * 1.5;
-               font-weight: 1000;
-       }
-}
-
-// calendar column
+// Calendar menu side column
 .datemenu-calendar-column {
        spacing: 0;
        border: 0 solid $bubble_borders_color;
@@ -53,8 +16,47 @@
        &:ltr { border-left-width: 1px; }
        &:rtl { border-right-width: 1px; }
 
-       &:hover, &:focus { background-color: $hover_bg_color }
-       &:active { background-color: $active_bg_color }
+
+       // today button (the date)
+       .datemenu-today-button {
+               padding: $base_padding * 1.5;
+               margin: $base_margin;
+               border: 1px solid transparent;
+
+               &:hover,
+               &:focus {
+                       border-color: $bubble_borders_color;
+                       border-radius:$base_border_radius + 2px;
+                       background-color: $hover_bg_color;
+                       box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
+                       margin-top: $base_margin - 1px;
+                       margin-bottom: $base_margin + 1px;
+               }
+
+               &:active { background-color: transparentize($fg_color, 0.84) }
+
+               // weekday label
+               .day-label {
+                       font-size: $base_font_size + 1pt;
+                       font-weight: bold;
+               }
+
+               // date label
+               .date-label {
+                       font-size: $base_font_size * 1.5;
+                       font-weight: 1000;
+               }
+       }
+
+       // calendar
+       .calendar {
+               @extend %notification_bubble;
+               margin:$base_margin !important;
+               margin-bottom: $base_padding + $base_margin !important;
+               padding:$base_padding !important;
+
+               // more below for sub-elements
+       }
 
        .datemenu-displays-section {
                margin:0;
@@ -63,21 +65,25 @@
        .datemenu-displays-box {
                spacing: $base_spacing;
                margin:0;
+
+               // world clocks and weather
+               .world-clocks-button,
+               .weather-button {
+                       @extend %notification_bubble;
+                       padding:$base_padding !important;
+               }
        }
 }
 
-.datemenu-today-button,
 .events-section-title {
+       color: desaturate(darken($fg_color,40%), 10%);
+       font-weight: bold;
        border-radius: 4px;
        padding: .4em;
 }
 
 /* Calendar */
 .calendar {
-       @extend %calendar_box;
-       margin:$base_margin;
-       margin-bottom: $base_padding + $base_margin     ;
-       padding:$base_padding;
 
        // month
        .calendar-month-label {
@@ -92,165 +98,167 @@
        .calendar-change-month-forward StIcon {
                icon-size: $base_icon_size;
        }
-}
-
-.events-section-title {
-}
 
+       .pager-button {
+               background-color: transparent;
+               height: 32px;
+               width: 32px;
+               border-radius: $base_border_radius;
+               &:hover, &:focus { background-color: $hover_bg_color; }
+               &:active { background-color: transparentize($fg_color, 0.84); }
+       }
 
-.pager-button {
-       background-color: transparent;
-       height: 32px;
-       width: 32px;
-       border-radius: $base_border_radius;
-       &:hover, &:focus { background-color: $hover_bg_color; }
-       &:active { background-color: transparentize($fg_color, 0.84); }
-}
 
+       $calendar_day_size: 32px;
+
+       .calendar-day-base {
+               font-size: 80%;
+               text-align: center;
+               width: $calendar_day_size;
+               height: $calendar_day_size;
+               padding: 0;
+               margin: 2px;
+               border-radius: $calendar_day_size * 0.5 + 2px;
+               border: 1px solid transparent; //avoid jumparound due to today
+               font-feature-settings: "tnum";
+               &:hover, &:focus { background-color: $hover_bg_color; }
+               &:active,&:selected {
+                       color: lighten($fg_color,10%);
+                       background-color: darken($bg_color,5%);
+               }
 
-$calendar_day_size: 32px;
-
-.calendar-day-base {
-       font-size: 80%;
-       text-align: center;
-       width: $calendar_day_size;
-       height: $calendar_day_size;
-       padding: 0;
-       margin: 2px;
-       border-radius: $calendar_day_size * 0.5 + 2px;
-       border: 1px solid transparent; //avoid jumparound due to today
-       font-feature-settings: "tnum";
-       &:hover, &:focus { background-color: $hover_bg_color; }
-       &:active,&:selected {
-               color: lighten($fg_color,10%);
-               background-color: darken($bg_color,5%);
+               // day of week heading
+               &.calendar-day-heading {
+                       color: lighten($fg_color,10%);
+                       margin-top: 1em;
+                       font-size: 70%;
+               }
        }
-
-       // day of week heading
-       &.calendar-day-heading {
-               color: lighten($fg_color,10%);
-               margin-top: 1em;
-               font-size: 70%;
+       .calendar-day { //border collapse hack - see calendar.js
+               border-width: 0;
        }
-}
-.calendar-day { //border collapse hack - see calendar.js
-       border-width: 0;
-}
-
-.calendar-day-top {
-       border-top-width: 1px;
-}
 
-.calendar-day-left { border-left-width: 1px; }
-.calendar-work-day {}
-.calendar-nonwork-day {
-       color: $insensitive_fg_color;
-}
-
-// Today
-.calendar-today {
-       font-weight: bold;
-       border: 1px solid transparent;
-       background-color: $selected_bg_color;
-       color: $selected_fg_color;
+       .calendar-day-top {
+               border-top-width: 1px;
+       }
 
-       &:hover,&:focus {
-               background-color:lighten($selected_bg_color, 3%);
-               color: $selected_fg_color;
+       .calendar-day-left { border-left-width: 1px; }
+       .calendar-work-day {}
+       .calendar-nonwork-day {
+               color: $insensitive_fg_color;
        }
 
-       &:active,&:selected {
+       // Today
+       .calendar-today {
+               font-weight: bold;
+               border: 1px solid transparent;
                background-color: $selected_bg_color;
                color: $selected_fg_color;
+
                &:hover,&:focus {
                        background-color:lighten($selected_bg_color, 3%);
                        color: $selected_fg_color;
                }
-       }
 
-}
-.calendar-day-with-events {
-       color: lighten($fg_color,10%);
-       font-weight: bold;
-       background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg");
-}
-
-.calendar-other-month-day {
-       color: transparentize($fg_color ,0.5);
-       opacity: 0.5;
-}
+               &:active,&:selected {
+                       background-color: $selected_bg_color;
+                       color: $selected_fg_color;
+                       &:hover,&:focus {
+                               background-color:lighten($selected_bg_color, 3%);
+                               color: $selected_fg_color;
+                       }
+               }
 
-.calendar-week-number {
-       font-size: 70%;
-       font-weight: bold;
-       height: 1.8em;
-       width: 2.3em; 
-       border-radius: 2px;
-       padding: 0.5em 0 0;
-       margin: 6px;
-       background-color: darken($bg_color, 2%);
-       color: lighten($fg_color, 5%);
-}
+       }
+       .calendar-day-with-events {
+               color: lighten($fg_color,10%);
+               font-weight: bold;
+               background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg");
+       }
 
+       .calendar-other-month-day {
+               color: transparentize($fg_color ,0.5);
+               opacity: 0.5;
+       }
 
-.world-clocks-button,
-.weather-button {
-       @extend %calendar_box;
-       padding:$base_padding;
+       .calendar-week-number {
+               font-size: 70%;
+               font-weight: bold;
+               height: 1.8em;
+               width: 2.3em; 
+               border-radius: 2px;
+               padding: 0.5em 0 0;
+               margin: 6px;
+               background-color: darken($bg_color, 2%);
+               color: lighten($fg_color, 5%);
+       }
 }
 
+
 /* Weather */
 .weather-box {
-       spacing: 0.4em;
+       spacing: $base_spacing;
        padding:$base_padding;
-}
 
-.weather-header.location {
-       font-weight: normal;
-       font-size: 0.9em;
-}
+       .weather-header {
+               color: desaturate(darken($fg_color,40%), 10%);
+               font-weight: bold;
+               &.location {
+                       font-weight: normal;
+                       font-size: $base_font_size - 1pt;
+               }
+       }
 
+       .weather-grid {
+               margin-top: $base_margin;
+               spacing-rows: $base_spacing;
+               spacing-columns: $base_spacing * 2;
+       }
 
-/* World clocks */
-.world-clocks-header,
-.weather-header,
-.events-section-title {
-       color: darken($fg_color,40%);
-       font-weight: bold;
+       .weather-forecast-icon {
+               icon-size: $base_icon_size * 2;
+       }
+
+       .weather-forecast-time {
+               color: darken($fg_color,30%);
+               font-feature-settings: "tnum";
+               font-size: $base_font_size - 2pt;
+               font-weight: normal;
+       }
 }
 
+/* World clocks */
 .world-clocks-grid {
        padding:$base_padding;
-}
+       spacing-rows: $base_spacing;
+       spacing-columns: $base_spacing * 2;
 
-.world-clocks-grid,
-.weather-grid {
-       spacing-rows: 0.4em;
-       spacing-columns: 0.8em;
-}
-
-.world-clocks-city {
-       font-weight: bold;
-       font-size: 0.9em;
-}
-
-.world-clocks-time {
-       color: darken($fg_color,20%);
-       font-feature-settings: "tnum";
-       font-size: 1.2em;
-}
+       // title
+       .world-clocks-header {
+               color: desaturate(darken($fg_color,40%), 10%);
+               font-weight: bold;
+       }
 
-.world-clocks-timezone {
-       color: $fg_color;
-       font-feature-settings: "tnum";
-       font-size: 0.9em;
-}
+       // city label
+       .world-clocks-city {
+               color: $fg_color;
+               font-size: $base_font_size;
+               font-weight: normal;
+       }
 
-.weather-forecast-icon {
-       icon-size: $base_icon_size * 2;
-}
+       // timezone time
+       .world-clocks-time {
+               font-weight: bold;
+               color: $fg_color;
+               font-feature-settings: "lnum";
+               font-size: $base_font_size;
+               text-align:right;
+       }
 
-.weather-forecast-time {
-       color: darken($fg_color,40%);
-       font-size: 0.8em;
-}
+       // timezone offset label
+       .world-clocks-timezone {
+               color: darken($fg_color,20%);
+               font-feature-settings: "tnum";
+               font-size: $base_font_size - 1pt;
+       }
+}
\ No newline at end of file
diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss 
b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index 13b2da795b..b546fc589a 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -32,22 +32,7 @@
 
 // message bubbles
 .message {
-       border: 1px solid $bubble_borders_color;
-       border-radius:$base_border_radius + 2px;
-       background-color: lighten($bg_color, 5%);
-       box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
-       // padding: $base_padding;
-       padding: 0;
-       margin: $base_margin;
-
-       &:hover,
-       &:focus {
-               background-color: $hover_bg_color;
-               box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
-               margin-top: $base_margin - 1px;
-               margin-bottom: $base_margin + 1px;
-       }
-       &:active { background-color: transparentize($fg_color, 0.84) }
+       @extend %notification_bubble;
 
        // title
        .message-title {
diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index a041ee0973..0250c8a580 100644
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
@@ -25,6 +25,22 @@ $panel_height: 1.86em;
                spacing: $base_spacing;
        }
 
+       // App Menu
+       #appMenu {
+               spacing: $base_spacing;
+
+               .label-shadow { color: transparent; }
+
+               // app menu icon
+               .app-menu-icon {
+                       -st-icon-style: symbolic;
+                       margin-left: $base_margin;
+                       margin-right: $base_margin;
+                       // dimensions of the icon are hardcoded
+               }
+       }
+
+
        // the rounded outset corners
        .panel-corner {
                -panel_corner_radius: $panel_corner_radius;
@@ -61,14 +77,6 @@ $panel_height: 1.86em;
                        color: lighten($panel_fg_color, 20%);
                }
 
-               // app menu icon
-               .app-menu-icon {
-                       -st-icon-style: symbolic;
-                       margin-left: $base_margin;
-                       margin-right: $base_margin;
-                       // dimensions of the icon are hardcoded
-               }
-
                // status area icons
                .system-status-icon {
                        icon-size: $base_icon_size;
diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss 
b/data/theme/gnome-shell-sass/widgets/_popovers.scss
index 42f617de9c..448fefe69e 100644
--- a/data/theme/gnome-shell-sass/widgets/_popovers.scss
+++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss
@@ -1,24 +1,24 @@
 /* Popovers/Menus */
 
-$popover_width: 15em;
-
 .popup-menu {
-       min-width: $popover_width;
+       min-width: 15em;
        color: $fg_color;
        border-color: $bubble_borders_color;
 
-       .popup-menu-arrow { } //defined globally in the TOP BAR
        .popup-sub-menu {
                background-color: darken($bg_color,5%);
                box-shadow: inset 0 -1px 0px $bubble_borders_color;
        }
 
-       .popup-menu-content { padding: 1em 0em; }
+       .popup-menu-content { padding: calc(#{$base_padding} * 2 + #{$base_margin}) 0; }
+
+       // menu items
        .popup-menu-item {
-               spacing: 12px;
+               spacing: $base_padding;
 
                &:ltr { padding: .4em 1.75em .4em 0em; }
                &:rtl { padding: .4em 0em .4em 1.75em; }
+
                &:checked {
                        background-color: $bg_color;
                        box-shadow: inset 0 -1px 0px $bubble_borders_color;
@@ -35,7 +35,7 @@ $popover_width: 15em;
                &:insensitive { color: transparentize($fg_color,.5); }
        }
 
-       //all icons and other graphical elements
+       // all icons and other graphical elements
        .popup-inactive-menu-item {
                color: $fg_color;
 
@@ -44,9 +44,13 @@ $popover_width: 15em;
 
        //.popup-status-menu-item { font-weight: normal;  color: pink; } //dunno what that is
        &.panel-menu {
-               -boxpointer-gap: 4px;
+               -boxpointer-gap: $base_margin; // distance from the panel
                margin-bottom: 1.75em;
        }
+
+       // symbolic icons in popover
+       .popup-menu-arrow,
+       .popup-menu-icon { icon-size: $base_icon_size; }
 }
 
 .popup-menu-ornament {
@@ -59,81 +63,73 @@ $popover_width: 15em;
        -arrow-border-radius: $base_border_radius+4;
        -arrow-background-color: $bg_color;
        -arrow-border-width: 1px;
-       -arrow-border-color: if($variant=='light', transparentize(black, 0.6), $borders_color);
+       -arrow-border-color: if($variant=='light', rgba(0,0,0,0.6), $borders_color);
        -arrow-base: 24px;
        -arrow-rise: 11px;
-       -arrow-box-shadow: 0 1px 3px black; //dreaming. bug #689995
+       -arrow-box-shadow: 0 1px 3px rgba(0,0,0,0.5); //dreaming. bug #689995
 }
 
 .popup-separator-menu-item {
        //-margin-horizontal: 24px;
        height: 1px; //not really the whole box
-       margin: 6px 64px;
+       // margin: 6px 64px;
+       margin: 6px 0;
        background-color: transparent;
        border-color: $bubble_borders_color;
        border-bottom-width: 1px;
        border-bottom-style: solid;
 }
 
-// not really top bar only
-.popup-menu-arrow { icon-size: $base_icon_size; }
-.popup-menu-icon { icon-size: $base_icon_size; }
-
-
-// Background menu
-.background-menu { -boxpointer-gap: 4px; -arrow-rise: 0px; }
+// Desktop background menu
+.background-menu { -boxpointer-gap: $base_margin; -arrow-rise: 0px; }
 
 /* fallback menu
 - odd thing for styling App menu when apparently not running under shell. Light Adwaita styled app menu 
inside the main app window itself rather than the top bar
 */
 
-// a little unstructured mess:
-#appMenu {
-       spacing: $base_spacing;
-
-       .label-shadow { color: transparent; }
-}
-
+// App menu
 .app-menu,
 .app-well-menu {
        max-width: 27.25em;
 }
 
+// System status menu
 .aggregate-menu {
        min-width: 21em;
+
        .popup-menu-icon { padding: 0 4px; }
+
        .popup-sub-menu .popup-menu-item > :first-child {
+               // account for icons in submenus with padding
                &:ltr {
-                       // 12px spacing + 2*4px padding
-                       padding-left: 20px; 
-                       margin-left: 1.09em;
+                       padding-left: $base_padding + $base_margin * 2; 
+                       margin-left: $base_icon_size;
                }
                &:rtl {
-                       // 12px spacing + 2*4px padding
-                       padding-right: 20px;
-                       margin-right: 1.09em;
+                       padding-right: $base_padding + $base_margin * 2; ;
+                       margin-right: $base_icon_size;
                }
        }
-}
 
-// lock screen, shutdown, etc. buttons
-.system-menu-action {
-       -st-icon-style: symbolic;
-       color: $fg_color;
-       border-radius: 32px; /* wish we could do 50% */
-       padding: 13px;
-       border: 1px solid $bubble_borders_color;
-
-       &:hover, &:focus {
-               background-color: $hover_bg_color;
+       // lock screen, shutdown, etc. buttons
+       .system-menu-action {
+               -st-icon-style: symbolic;
                color: $fg_color;
-               border: none;
-               padding: 14px;
-       }
-       &:active { 
-               background-color: $selected_bg_color;
-               color: $selected_fg_color;
-       }
+               border-radius: 32px; /* wish we could do 50% */
+               padding: 13px;
+               border: 1px solid $bubble_borders_color;
+
+               &:hover, &:focus {
+                       background-color: $hover_bg_color;
+                       color: $fg_color;
+                       border: none;
+                       padding: 14px;
+               }
+               &:active { 
+                       background-color: $selected_bg_color;
+                       color: $selected_fg_color;
+               }
 
-       & > StIcon { icon-size: $base_icon_size; }
+               & > StIcon { icon-size: $base_icon_size; }
+       }
 }
\ No newline at end of file


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]