[gnome-shell/wip/snwh/sass-cleanup: 444/475] theme: more fixes for popover menus; make calendar and notifications consistent

From: Sam Hewitt <snwh src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-shell/wip/snwh/sass-cleanup: 444/475] theme: more fixes for popover menus; make calendar and notifications consistent
Date: Wed, 18 Dec 2019 16:01:39 +0000 (UTC)
commit 72d5626084f5b268ee94dadf8c3353fda0fc7f3d
Author: Sam Hewitt <sam snwh org>
Date:   Thu Sep 12 11:58:40 2019 -0400

    theme: more fixes for popover menus; make calendar and notifications consistent

 data/theme/gnome-shell-sass/widgets/_calendar.scss |  98 ++++++++++++-------
 .../theme/gnome-shell-sass/widgets/_check-box.scss |   9 +-
 .../gnome-shell-sass/widgets/_message-list.scss    | 108 ++++++++++++---------
 .../{_message-tray.scss => _notifications.scss}    |   0
 data/theme/gnome-shell-sass/widgets/_panel.scss    |  42 +++++---
 data/theme/gnome-shell-sass/widgets/_popovers.scss |   2 +-
 data/theme/gnome-shell-sass/widgets/_slider.scss   |  10 +-
 7 files changed, 163 insertions(+), 106 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss 
b/data/theme/gnome-shell-sass/widgets/_calendar.scss
index f8e46d0ecd..8dac62fbd5 100644
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -10,28 +10,63 @@
        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) }
 }
 
 
-.datemenu-today-button,
-.datemenu-displays-box {
+// today button
+.datemenu-today-button {
        margin:0;
-}
 
-.datemenu-calendar-column { spacing: 0.5em; }
-.datemenu-displays-section { padding-bottom: 3em; }
-.datemenu-displays-box { spacing: 1em; }
+       // 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
 .datemenu-calendar-column {
+       spacing: 0;
        border: 0 solid $bubble_borders_color;
-       &:ltr { border-left-width: 1px; }app_icon_size
+       padding: $base_padding + $base_margin;
+       padding-bottom: 3em;
+
+       &:ltr { border-left-width: 1px; }
        &:rtl { border-right-width: 1px; }
-       padding: 0 12px;
+
+       &:hover, &:focus { background-color: $hover_bg_color }
+       &:active { background-color: $active_bg_color }
+
+       .datemenu-displays-section {
+               margin:0;
+       }
+
+       .datemenu-displays-box {
+               spacing: $base_spacing;
+               margin:0;
+       }
 }
 
 .datemenu-today-button,
-.world-clocks-button,
-.weather-button,
 .events-section-title {
        border-radius: 4px;
        padding: .4em;
@@ -40,35 +75,28 @@
 /* Calendar */
 .calendar {
        @extend %calendar_box;
-       margin:0;
-       margin-bottom: $base_padding;
+       margin:$base_margin;
+       margin-bottom: $base_padding + $base_margin     ;
        padding:$base_padding;
-}
 
-.datemenu-today-button,
-.world-clocks-button,
-.weather-button,
-.events-section-title {
-       &:hover, &:focus { background-color: $hover_bg_color }
-       &:active { background-color: $active_bg_color }
-}
+       // month
+       .calendar-month-label {
+               color: lighten($fg_color,5%);
+               font-weight: bold;
+               padding: 8px 0;
+               &:focus {}
+       }
 
-.datemenu-today-button .day-label {
-       font-size: $base_font_size + 1pt;
-       font-weight: bold;
+       // prev/next month icons
+       .calendar-change-month-back StIcon,
+       .calendar-change-month-forward StIcon {
+               icon-size: $base_icon_size;
+       }
 }
 
-.datemenu-today-button .date-label {
-       font-size: $base_font_size * 1.5;
-       font-weight: 1000;
+.events-section-title {
 }
 
-.calendar-month-label {
-       color: lighten($fg_color,5%);
-       font-weight: bold;
-       padding: 8px 0;
-       &:focus {}
-}
 
 .pager-button {
        background-color: transparent;
@@ -79,11 +107,6 @@
        &:active { background-color: transparentize($fg_color, 0.84); }
 }
 
-// prev/next month icons
-.calendar-change-month-back StIcon,
-.calendar-change-month-forward StIcon {
-       icon-size: $base_icon_size;
-}
 
 $calendar_day_size: 32px;
 
@@ -173,6 +196,7 @@ $calendar_day_size: 32px;
 .world-clocks-button,
 .weather-button {
        @extend %calendar_box;
+       padding:$base_padding;
 }
 
 /* Weather */
diff --git a/data/theme/gnome-shell-sass/widgets/_check-box.scss 
b/data/theme/gnome-shell-sass/widgets/_check-box.scss
index b53c9e24e8..a5b4b7849f 100644
--- a/data/theme/gnome-shell-sass/widgets/_check-box.scss
+++ b/data/theme/gnome-shell-sass/widgets/_check-box.scss
@@ -1,10 +1,15 @@
 /* Check Boxes */
 
+// these are equal to the size of the SVG assets
+$check_height: 22px;
+$check_width: 24px;
+
+
 .check-box {
        StBoxLayout { spacing: .8em; }
        StBin {
-               width: 24px;
-               height: 22px;
+               width: $check_width;
+               height: $check_height;
                background-image: url("resource:///org/gnome/shell/theme/checkbox-off.svg");
        }
        &:focus StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"); }
diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss 
b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index 7b3bfa453a..13b2da795b 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -1,5 +1,5 @@
 /* Message List */
-
+// a.k.a. notifications in the menu
 
 // main list
 .message-list {
@@ -24,6 +24,7 @@
 
 // clear button
 .message-list-clear-button {
+       margin:$base_margin;
        .button {
                @extend %button;
        }
@@ -47,63 +48,69 @@
                margin-bottom: $base_margin + 1px;
        }
        &:active { background-color: transparentize($fg_color, 0.84) }
-}
-
-// title
-.message-title {
-       color: $fg_color;
-       font-weight: bold;
-       margin-bottom:4px;
-}
 
-// content
-.message-content {
-       color: darken($fg_color, 10%);
-       padding: $base_padding 0;
-       margin:$base_margin * 2;
-}
-
-// message icon
-.message-icon-bin {
-       // padding: $base_padding;
-       margin:$base_padding 0;
+       // title
+       .message-title {
+               color: $fg_color;
+               font-weight: bold;
+               margin-bottom:4px;
+       }
 
-       &:rtl {
-               padding: $base_padding;
+       // content
+       .message-content {
+               color: darken($fg_color, 10%);
+               padding: $base_padding 0;
+               margin:$base_margin * 2;
+               &:ltr {
+                       margin-left: $base_margin;
+                       padding-right:$base_padding;
+               }
+               &:rtl {
+                       margin-right: $base_margin;
+                       padding-left:$base_padding;
+               }
        }
 
-       // icon size and color
-       > StIcon {
-               color: $fg_color;
-               icon-size: $base_icon_size * 2;
-               -st-icon-style: symbolic;
+       // message icon
+       .message-icon-bin {
+               // padding: $base_padding;
+               margin:$base_padding 0;
 
-               padding:$base_padding;
-       }
+               &:rtl {
+                       padding: $base_padding;
+               }
 
-       // fallback
-       > .fallback-window-icon {
-               width: $base_icon_size;
-               height: $base_icon_size;
-       }
-}
+               // icon size and color
+               > StIcon {
+                       color: $fg_color;
+                       icon-size: $base_icon_size * 2; // 32px
+                       -st-icon-style: symbolic;
 
-.message-secondary-bin {
-       padding: 0;
+                       padding:$base_padding;
+               }
 
-       > StIcon {
-               icon-size: $base_icon_size;
+               // fallback
+               > .fallback-window-icon {
+                       width: $base_icon_size;
+                       height: $base_icon_size;
+               }
        }
 
-       // notification time stamp
-       > .event-time {
-               color: transparentize($fg_color, 0.5);
-               font-size: 80%;
-               text-align: right;
-               margin: 0 $base_margin * 2;
-               /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom 
padding */
-               padding-bottom: $base_padding;
+       // secondary container in title box
+       .message-secondary-bin {
+               padding: 0;
+
+               // notification time stamp
+               > .event-time {
+                       color: transparentize($fg_color, 0.5);
+                       font-size: 80%;
+                       text-align: right;
+                       margin: 0 $base_margin * 2;
+                       /* HACK: the label should be baseline-aligned with a 1em label, fake this with some 
bottom padding */
+                       padding-bottom: $base_padding;
+               }
        }
+
 }
 
 /* Media Controls */
@@ -113,6 +120,7 @@
        // border: 0 solid $borders_color;
        // border-left-width:1px;
 
+
        &:hover { 
                background-color: lighten($hover_bg_color, 5%);
                color: $fg_color;
@@ -124,6 +132,12 @@
                        border-radius: $base_border_radius 0 0 $base_border_radius;
                }
        }
+
+       &:active { 
+               background-color: darken($hover_bg_color, 2%);
+               color: $fg_color;
+       }
+
        &:insensitive { color: darken($fg_color,40%); }
 }
 
diff --git a/data/theme/gnome-shell-sass/widgets/_message-tray.scss 
b/data/theme/gnome-shell-sass/widgets/_notifications.scss
similarity index 100%
rename from data/theme/gnome-shell-sass/widgets/_message-tray.scss
rename to data/theme/gnome-shell-sass/widgets/_notifications.scss
diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index 3d9ca5ddc9..a041ee0973 100644
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
@@ -6,22 +6,26 @@ $panel_bg_color: if($variant == 'light', #fff, #000);
 $panel_fg_color: if($variant == 'light', $fg_color, darken($fg_color, 10%));
 $panel_height: 1.86em;
 
+
 #panel {
        background-color: $panel_bg_color;
        font-weight: bold;
        height: $panel_height;
        font-feature-settings: "tnum";
 
+       // transparent panel on lock & login screens
        &.unlock-screen,
        &.login-screen,
        &.lock-screen {
                background-color: transparent;
        }
 
-       #panelLeft, #panelCenter { // spacing between activities<>app menu and such
+       // spacing between activities<>app menu and such
+       #panelLeft, #panelCenter {
                spacing: $base_spacing;
        }
 
+       // the rounded outset corners
        .panel-corner {
                -panel_corner_radius: $panel_corner_radius;
                -panel-corner-background-color: $panel_bg_color;
@@ -39,32 +43,39 @@ $panel_height: 1.86em;
                }
        }
 
+       // panel menus
        .panel-button {
-               -natural-hpadding: $base_padding * 2;
-               -minimum-hpadding: 6px;
                font-weight: bold;
                color: $panel_fg_color;
-
-               .app-menu-icon {
-                       -st-icon-style: symbolic;
-                       margin-left: 4px;
-                       margin-right: 4px;
-                       //dimensions of the icon are hardcoded
-               }
+               -natural-hpadding: $base_padding * 2;
+               -minimum-hpadding: $base_padding;
 
                &:hover {
                        color: lighten($panel_fg_color, 20%);
                }
 
                &:active, &:overview, &:focus, &:checked {
-                       // Trick due to St limitations. It needs a background to draw
-                       // a box-shadow
-                       background-color: rgba(0, 0, 0, 0.01);
-                       box-shadow: inset 0 -2px 0px lighten($selected_bg_color,5%);
+                       background-color: $panel_bg_color; // Trick due to St limitations. It needs a 
background to draw a box-shadow
+                       box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color,5%);
+
                        color: lighten($panel_fg_color, 20%);
                }
 
-               .system-status-icon { icon-size: $base_icon_size; padding: 0 5px; }
+               // 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;
+                       padding: $base_padding - 1px;
+               }
+
+               // lock & login screen styles
                .unlock-screen &,
                .login-screen &,
                .lock-screen & {
@@ -83,6 +94,7 @@ $panel_height: 1.86em;
                spacing: 0;
        }
 
+       // indicator for active
        .screencast-indicator,
        .remote-access-indicator { color: $warning_color; }
 }
\ No newline at end of file
diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss 
b/data/theme/gnome-shell-sass/widgets/_popovers.scss
index 2ff045bc49..42f617de9c 100644
--- a/data/theme/gnome-shell-sass/widgets/_popovers.scss
+++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss
@@ -135,5 +135,5 @@ $popover_width: 15em;
                color: $selected_fg_color;
        }
 
-       & > StIcon { icon-size: 16px; }
+       & > StIcon { icon-size: $base_icon_size; }
 }
\ No newline at end of file
diff --git a/data/theme/gnome-shell-sass/widgets/_slider.scss 
b/data/theme/gnome-shell-sass/widgets/_slider.scss
index 4a26c30df6..8865fda35c 100644
--- a/data/theme/gnome-shell-sass/widgets/_slider.scss
+++ b/data/theme/gnome-shell-sass/widgets/_slider.scss
@@ -1,8 +1,10 @@
 /* Slider */
 
+$slider_size: 16px;
+
 .slider {
-       height: 16px;
-       -barlevel-height: 4px;
+       height: $slider_size;
+       -barlevel-height: $slider_size * 0.25;
        -barlevel-background-color: lighten($borders_color, 5%); //background of the trough
        -barlevel-border-color: $borders_color; //trough border color
        -barlevel-active-background-color: $selected_bg_color; //active trough fill
@@ -11,10 +13,10 @@
        -barlevel-overdrive-border-color: $borders_color;
        -barlevel-overdrive-separator-width:1px;
        -barlevel-border-width: 1px;
-       -slider-handle-radius: 8px;
+       -slider-handle-radius: $slider_size * 0.5;
        -slider-handle-border-width: 1px;
        -slider-handle-border-color: $borders_color;
-       color: if($variant == 'light', lighten($bg_color, 10%), darken($bg_color,4%));
+       color: if($variant == 'light', lighten($bg_color, 10%), $fg_color);
        &:hover { color: $hover_bg_color; }
        &:active { color: $active_bg_color; }
 }
\ No newline at end of file
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]