GNOME.org
 

[gnome-shell/wip/snwh/sass-cleanup: 440/475] theme: message list improvements

commit 5a7204788c20645053c142e1b27539c70cf0a4d6
Author: Sam Hewitt <sam snwh org>
Date:   Tue Sep 10 14:50:08 2019 -0400

    theme: message list improvements

 data/theme/gnome-shell-sass/widgets/_app-grid.scss |  8 +--
 .../gnome-shell-sass/widgets/_app-switcher.scss    |  2 +-
 data/theme/gnome-shell-sass/widgets/_calendar.scss | 19 +-----
 .../gnome-shell-sass/widgets/_looking-glass.scss   |  2 +-
 .../gnome-shell-sass/widgets/_message-list.scss    | 71 ++++++++++++++++------
 .../gnome-shell-sass/widgets/_message-tray.scss    |  2 +-
 .../gnome-shell-sass/widgets/_network-dialog.scss  |  2 +-
 data/theme/gnome-shell-sass/widgets/_panel.scss    |  2 +-
 .../gnome-shell-sass/widgets/_search-results.scss  |  4 +-
 data/theme/gnome-shell-sass/widgets/_slider.scss   |  1 -
 .../widgets/_workspace-switcher.scss               |  2 +-
 11 files changed, 67 insertions(+), 48 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss 
b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index 187cdd9f17..2809c6979d 100644
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -46,7 +46,7 @@ $app_grid_fg_color: #fff;
                        color: $app_grid_fg_color;
                }
        }
-       
+
        &:hover .overview-icon,
        &:focus .overview-icon,
        &:selected .overview-icon {
@@ -93,9 +93,9 @@ $app_grid_fg_color: #fff;
 
 .app-folder-popup-bin { padding: 5px; }
 .app-folder-icon {
-       padding: 5px;
-       spacing-rows: 5px;
-       spacing-columns: 5px;
+       padding: $base_padding;
+       spacing-rows: $base_spacing;
+       spacing-columns: $base_spacing;
 }
 
 
diff --git a/data/theme/gnome-shell-sass/widgets/_app-switcher.scss 
b/data/theme/gnome-shell-sass/widgets/_app-switcher.scss
index bdc66c0b46..7fbc9dab1e 100644
--- a/data/theme/gnome-shell-sass/widgets/_app-switcher.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-switcher.scss
@@ -22,7 +22,7 @@
 
                &:selected {
                        background-color: transparentize($osd_fg_color, 0.9);
-                       color: $selected_fg_color;
+                       color: $osd_fg_color;
                }
        }
 
diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss 
b/data/theme/gnome-shell-sass/widgets/_calendar.scss
index 6383135cbb..f8e46d0ecd 100644
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -37,25 +37,12 @@
        padding: .4em;
 }
 
-/* Message List */
-.message-list-sections {
-       margin:0;
-}
-
-.message-list-section-list:ltr {
-       padding-left: .4em;
-}
-
-.message-list-section-list:rtl {
-       padding-right: .4em;
-}
-
 /* Calendar */
 .calendar {
        @extend %calendar_box;
        margin:0;
        margin-bottom: $base_padding;
-       padding:$base_padding * 0.5;
+       padding:$base_padding;
 }
 
 .datemenu-today-button,
@@ -191,7 +178,7 @@ $calendar_day_size: 32px;
 /* Weather */
 .weather-box {
        spacing: 0.4em;
-       padding:$base_padding * 0.5;
+       padding:$base_padding;
 }
 
 .weather-header.location {
@@ -209,7 +196,7 @@ $calendar_day_size: 32px;
 }
 
 .world-clocks-grid {
-       padding:$base_padding * 0.5;
+       padding:$base_padding;
 }
 
 .world-clocks-grid,
diff --git a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss 
b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
index 8792677ab8..f065812d7c 100644
--- a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
+++ b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
@@ -17,7 +17,7 @@
 
        .labels { spacing: $base_spacing; }
        .notebook-tab {
-               -natural-hpadding: $base_padding;
+               -natural-hpadding: $base_padding * 2;
                -minimum-hpadding: 6px;
                font-weight: bold;
                color: $fg_color;
diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss 
b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index 71d6d7054d..4fe13f2800 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -1,29 +1,55 @@
 /* Message List */
 
-.message-list {
-       width: 31.5em;
+
+// common style
+%message_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;
+       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) }
 }
 
-.message-list-clear-button.button {
-       @extend %button;
-       margin: 1.5em 1.5em 0;
+// main list
+.message-list {
+       width: 31.5em;
+       padding: $base_padding * 2;
 }
 
 .message-list-sections {
-       spacing: 1em;
+       margin:0;
+       spacing: $base_spacing;
 }
 
 .message-list-section,
 .message-list-section-list {
-       spacing: 0.4em;
+       spacing: $base_spacing;
 }
 
+.message-list-section-list {
+       &:ltr {padding:0;}
+       &:rtl {padding:0;}
+}
+
+// clear button
+.message-list-clear-button {
+       .button {
+               @extend %button;
+       }
+}
+
+// message list item
 .message {
-       border: 1px solid $bubble_borders_color;
-       background-color: lighten($bg_color, 2%);
-       &:hover,&:focus { background-color: $hover_bg_color; }
-       &:active { background-color: transparentize($fg_color, 0.84) }
-       border-radius: 5px;
+       @extend %message_box;
 }
 
 .message-icon-bin {
@@ -33,8 +59,10 @@
 
 .message-icon-bin > StIcon {
        color: $fg_color;
-       icon-size: $base_icon_size;
+       icon-size: $base_icon_size * 2;
        -st-icon-style: symbolic;
+
+       margin:$base_margin;
 }
 
 .message-icon-bin > .fallback-window-icon {
@@ -48,7 +76,8 @@
 
 .message-secondary-bin > .event-time {
        color: $fg_color;
-       font-size: 0.7em;
+       font-size: 80%;
+       text-align: right;
        /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
        padding-bottom: 0.13em;
 }
@@ -57,8 +86,10 @@
        icon-size: $base_icon_size;
 }
 
+// title
 .message-title {
        color: $fg_color;
+       font-weight: bold;
 }
 
 .message-content {
@@ -66,24 +97,26 @@
        padding: 10px;
 }
 
+/* Media Controls */
 .message-media-control {
-       padding: $base_padding;
+       padding: $base_padding * 2;
        color: lighten($fg_color, 15%);
 
-       &:last-child:ltr { padding-right: 18px; }
-       &:last-child:rtl { padding-left: 18px; }
+       &:last-child:ltr { padding-right: $base_padding * 3; }
+       &:last-child:rtl { padding-left: $base_padding * 3; }
        &:hover { color: $fg_color; }
        &:insensitive { color: darken($fg_color,40%); }
 }
 
+// album-art
 .media-message-cover-icon {
        icon-size: 48px !important;
        &.fallback {
-               color: lighten($fg_color,10%);
+               color: darken($fg_color, 10%);
                background-color: $bg_color;
                border: 1px solid $bg_color;
                border-radius: 2px;
                icon-size: 32px !important;
-               padding: 6px;
+               padding: $base_padding;
        }
 }
\ No newline at end of file
diff --git a/data/theme/gnome-shell-sass/widgets/_message-tray.scss 
b/data/theme/gnome-shell-sass/widgets/_message-tray.scss
index ce50d4e5d2..376838d0e1 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-tray.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-tray.scss
@@ -7,7 +7,7 @@ $notification_banner_width: 34em;
 .notification-banner {
        font-size: $base_font_size;
        width: $notification_banner_width;
-       margin: 5px;
+       margin: $base_margin;
        border-radius: $dialog_border_radius;
        border: if($variant == 'light', none, $bubble_borders_color);
        min-height: $notification_banner_height;
diff --git a/data/theme/gnome-shell-sass/widgets/_network-dialog.scss 
b/data/theme/gnome-shell-sass/widgets/_network-dialog.scss
index f2eb7f3e14..5b3aa63dfd 100644
--- a/data/theme/gnome-shell-sass/widgets/_network-dialog.scss
+++ b/data/theme/gnome-shell-sass/widgets/_network-dialog.scss
@@ -40,7 +40,7 @@
 .nm-dialog-item {
        font-size: $base_font_size;
        border-bottom: 1px solid $borders_color;
-       padding: $base_padding;
+       padding: $base_padding * 2;
        spacing: 0px;
        &:selected {
                background-color: $selected_bg_color;
diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index f90a918a3b..3d9ca5ddc9 100644
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
@@ -40,7 +40,7 @@ $panel_height: 1.86em;
        }
 
        .panel-button {
-               -natural-hpadding: $base_padding;
+               -natural-hpadding: $base_padding * 2;
                -minimum-hpadding: 6px;
                font-weight: bold;
                color: $panel_fg_color;
diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss 
b/data/theme/gnome-shell-sass/widgets/_search-results.scss
index 490ef7eeac..5015280f14 100644
--- a/data/theme/gnome-shell-sass/widgets/_search-results.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss
@@ -2,7 +2,7 @@
 
 #searchResultsContent {
        max-width: 1000px;
-       padding: $base_padding;
+       padding: $base_padding * 2;
        spacing: 0;
 }
 
@@ -13,7 +13,7 @@
        box-shadow: 0 1px 4px 0 rgba(0,0,0,0.3);
        color: $osd_fg_color;
        text-shadow: 1px rgba(0,0,0,0.3);
-       padding: $base_padding;
+       padding: $base_padding * 2;
        margin-bottom: $base_padding;
        spacing:0;
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_slider.scss 
b/data/theme/gnome-shell-sass/widgets/_slider.scss
index bc7370bd70..4a26c30df6 100644
--- a/data/theme/gnome-shell-sass/widgets/_slider.scss
+++ b/data/theme/gnome-shell-sass/widgets/_slider.scss
@@ -15,7 +15,6 @@
        -slider-handle-border-width: 1px;
        -slider-handle-border-color: $borders_color;
        color: if($variant == 'light', lighten($bg_color, 10%), darken($bg_color,4%));
-       color: $fg_color;
        &:hover { color: $hover_bg_color; }
        &:active { color: $active_bg_color; }
 }
\ No newline at end of file
diff --git a/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss 
b/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
index 6af04a6fc1..abfdfc8b70 100644
--- a/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
+++ b/data/theme/gnome-shell-sass/widgets/_workspace-switcher.scss
@@ -1,6 +1,6 @@
 /* Workspace Switcher */
 .workspace-switcher-group {
-       padding: $base_padding;
+       padding: $base_padding * 2;
 }
 
 .workspace-switcher-container {
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]