[gnome-shell/wip/snwh/style-updates] theme: adjust notifications area

From: Sam Hewitt <snwh src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-shell/wip/snwh/style-updates] theme: adjust notifications area
Date: Thu, 30 Dec 2021 20:06:13 +0000 (UTC)
commit 1ea28accadcfc1b097bb7b0e17187912c8200188
Author: Sam Hewitt <sam snwh org>
Date:   Thu Dec 30 16:36:08 2021 -0330

    theme: adjust notifications area

 .../gnome-shell-sass/widgets/_message-list.scss    |  45 ++++-
 data/theme/no-notifications.svg                    | 224 +--------------------
 2 files changed, 36 insertions(+), 233 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss 
b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index f77d81d98f..fa8a7ac98f 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -6,12 +6,25 @@
   width: 32em;
   padding: 0;
 
-  .message-list-placeholder { spacing: 12px; }
+  .message-list-placeholder { 
+    font-weight:1000; 
+    font-size: 18pt;
+    color: transparentize($fg_color, 0.7);
+    spacing: 12px;
+
+    // icon size and color
+    > StIcon {
+      icon-size: $base_icon_size*4; // 32px
+      -st-icon-style: symbolic;
+    }
+  }
 }
 
+
 .message-list-sections {
   spacing: $base_spacing;
   margin: 0; 
+  padding-bottom: $base_padding;
 
   // to account for scrollbar
   &:ltr {margin-right: $base_margin * 4; }
@@ -25,10 +38,10 @@
 
 // do-not-disturb + clear button
 .message-list-controls {
-  margin: ($base_margin * 2) ($base_margin * 4) 0;
   // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
-  padding: $base_margin;
-  spacing: $base_spacing * 2;
+  padding: $base_padding;
+  margin: 0;
+  spacing: $base_spacing;
 
   .dnd-button {
     // We need this because the focus outline isn't inset like for the buttons
@@ -48,13 +61,15 @@
 // message bubbles
 .message {
   @include notification_bubble;
+  padding: $base_padding * 1.5;
 
   // icon container
   .message-icon-bin {
-    padding: ($base_padding * 3) 0 ($base_padding * 3) ($base_padding * 2);
+    padding: ($base_padding * 2);
+    padding-left:$base_padding;
 
     &:rtl {
-      padding: ($base_padding * 3) ($base_padding * 2) ($base_padding * 3) 0;
+      padding-right:$base_padding;
     }
 
     // icon size and color
@@ -72,13 +87,15 @@
 
   // content
   .message-content {
-    padding: $base_padding + $base_margin * 2;
+    padding: 0;
     spacing: 4px;
   }
 
   // title
   .message-title {
     font-weight: bold;
+    /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
+    padding-top: 0.57em;
   }
 
   // secondary container in title box
@@ -99,9 +116,17 @@
 
   // close button
   .message-close-button {
-    color: lighten($fg_color, 15%);
-    &:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); }
-    &:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); }
+    color: $fg_color;
+    background-color: transparentize($fg_color, 0.9);
+    border-radius: 99px;
+    padding: $base_padding;
+    margin: 0;
+    &:hover { 
+      background-color: transparentize($fg_color, 0.8);
+    }
+    &:active {
+      background-color: transparentize($fg_color, 0.9);
+    }
   }
 
   // body
diff --git a/data/theme/no-notifications.svg b/data/theme/no-notifications.svg
index 862e2d1a9d..6bf82cf5ea 100644
--- a/data/theme/no-notifications.svg
+++ b/data/theme/no-notifications.svg
@@ -1,223 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/";
-   xmlns:cc="http://creativecommons.org/ns#";
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
-   xmlns:svg="http://www.w3.org/2000/svg";
-   xmlns="http://www.w3.org/2000/svg";
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
-   width="64px"
-   height="64px"
-   id="svg3393"
-   version="1.1"
-   inkscape:version="0.92.3 (2405546, 2018-03-11)"
-   sodipodi:docname="no-notifications.svg">
-  <defs
-     id="defs3395">
-    <clipPath
-       id="clipPath6262-0"
-       clipPathUnits="userSpaceOnUse">
-      <rect
-         
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none"
-         id="rect6264-6"
-         width="3.8250003"
-         height="6.3750005"
-         x="26.849981"
-         y="220.75" />
-    </clipPath>
-    <clipPath
-       id="clipPath6258-0"
-       clipPathUnits="userSpaceOnUse">
-      <rect
-         
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none"
-         id="rect6260-6"
-         width="2.8977275"
-         height="5.3129687"
-         x="26.965673"
-         y="221.28162" />
-    </clipPath>
-    <clipPath
-       id="clipPath6254-6"
-       clipPathUnits="userSpaceOnUse">
-      <rect
-         
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none"
-         id="rect6256-6"
-         width="1.876245"
-         height="4.8783236"
-         x="26.998718"
-         y="221.50153" />
-    </clipPath>
-    <clipPath
-       id="clipPath8028-3"
-       clipPathUnits="userSpaceOnUse">
-      <path
-         
style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m -73,-30 -7,-7 v -4.5 h 16.5 v 4.5 l -7.5,7 z"
-         id="path8030-6"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="ccccccc" />
-    </clipPath>
-    <clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath6810-7-87-7">
-      <rect
-         
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none"
-         id="rect6812-2-4-5"
-         width="14"
-         height="11"
-         x="21"
-         y="281" />
-    </clipPath>
-    <clipPath
-       id="clipPath6262"
-       clipPathUnits="userSpaceOnUse">
-      <rect
-         
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none"
-         id="rect6264"
-         width="3.8250003"
-         height="6.3750005"
-         x="26.849981"
-         y="220.75" />
-    </clipPath>
-    <clipPath
-       id="clipPath6258"
-       clipPathUnits="userSpaceOnUse">
-      <rect
-         
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none"
-         id="rect6260"
-         width="2.8977275"
-         height="5.3129687"
-         x="26.965673"
-         y="221.28162" />
-    </clipPath>
-    <clipPath
-       id="clipPath6254"
-       clipPathUnits="userSpaceOnUse">
-      <rect
-         
style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:2;marker:none"
-         id="rect6256"
-         width="1.876245"
-         height="4.8783236"
-         x="26.998718"
-         y="221.50153" />
-    </clipPath>
-    <inkscape:path-effect
-       effect="spiro"
-       id="path-effect3951"
-       is_visible="true" />
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1"
-     inkscape:cx="125.08157"
-     inkscape:cy="-13.805087"
-     inkscape:current-layer="layer1"
-     showgrid="true"
-     inkscape:document-units="px"
-     inkscape:grid-bbox="true"
-     inkscape:window-width="1664"
-     inkscape:window-height="1034"
-     inkscape:window-x="1479"
-     inkscape:window-y="252"
-     inkscape:window-maximized="0" />
-  <metadata
-     id="metadata3398">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1"
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer">
-    <g
-       style="display:inline"
-       transform="matrix(4,0,0,4,-79.702662,-0.35415646)"
-       id="g19245">
-      <g
-         id="g19247"
-         inkscape:label="status"
-         style="display:inline"
-         transform="translate(-323.02908,-649.02581)" />
-      <g
-         id="g19249"
-         inkscape:label="devices"
-         transform="translate(-323.02908,-649.02581)" />
-      <g
-         id="g19251"
-         inkscape:label="apps"
-         transform="translate(-323.02908,-649.02581)">
-        <path
-           inkscape:connector-curvature="0"
-           d="m 331.9377,653 c 0.0187,0.16677 0.0625,0.32822 0.0625,0.5 0,2.48528 -2.01472,4.5 -4.5,4.5 
-0.11769,0 -0.22834,-0.0224 -0.34375,-0.0312 v 2.21875 c 0,1.00412 0.80838,1.8125 1.8125,1.8125 l 
1.54511,-5e-5 2,2.04688 2.0625,-2.04688 h 1.61114 c 1.00413,0 1.8125,-0.80838 1.8125,-1.8125 v -5.375 c 
0,-1.00412 -0.80837,-1.8125 -1.8125,-1.8125 z"
-           id="path19253"
-           sodipodi:nodetypes="csscsscccssssc"
-           
style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:0.5;fill:#c3c3c3;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;enable-background:accumulate"
 />
-        <path
-           inkscape:connector-curvature="0"
-           d="m 327.5002,650 c -1.933,0 -3.5,1.567 -3.5,3.5 0,1.933 1.567,3.5 3.5,3.5 1.933,0 3.5,-1.567 
3.5,-3.5 0,-1.933 -1.567,-3.5 -3.5,-3.5 z m -0.53125,1 h 1.03125 l -0.0625,1.375 a 0.19951718,0.19951718 0 0 
0 0,0.0625 0.19951718,0.19951718 0 0 0 0,0.0312 0.19951718,0.19951718 0 0 0 0.125,0.125 0.19951718,0.19951718 
0 0 0 0.0312,0 0.19951718,0.19951718 0 0 0 0.0625,0 0.19951718,0.19951718 0 0 0 0.0625,0 
0.19951718,0.19951718 0 0 0 0.0312,-0.0312 l 1.15625,-0.75 0.5,0.90625 -1.21875,0.625 a 0.19951718,0.19951718 
0 0 0 -0.0312,0 0.19951718,0.19951718 0 0 0 -0.0312,0.0312 0.19951718,0.19951718 0 0 0 -0.0312,0.0937 
0.19951718,0.19951718 0 0 0 0,0.0625 0.19951718,0.19951718 0 0 0 0,0.0312 0.19951718,0.19951718 0 0 0 
0.0312,0.0625 0.19951718,0.19951718 0 0 0 0.0312,0.0312 0.19951718,0.19951718 0 0 0 0.0312,0.0312 l 
1.25,0.625 -0.53125,0.90625 -1.15625,-0.781 a 0.19951718,0.19951718 0 0 0 -0.0312,0 0.19951718,0.19951718 0 0 
0 -0.0625,-0.0312 0.19951718,0.19951718 0 0 0 -0.0625,0 0.19
 951718,0.19951718 0 0 0 -0.125,0.0937 0.19951718,0.19951718 0 0 0 -0.0312,0.0312 0.19951718,0.19951718 0 0 0 
0,0.0312 0.19951718,0.19951718 0 0 0 0,0.0625 L 328.0002,656 h -1.03125 l 0.0937,-1.375 a 
0.19951718,0.19951718 0 0 0 -0.0312,-0.0937 0.19951718,0.19951718 0 0 0 -0.0312,-0.0625 0.19951718,0.19951718 
0 0 0 -0.0625,-0.0312 0.19951718,0.19951718 0 0 0 -0.0625,-0.0312 0.19951718,0.19951718 0 0 0 -0.0312,0 
0.19951718,0.19951718 0 0 0 -0.0937,0.0312 l -1.1875,0.78125 -0.5,-0.90625 1.25,-0.625 a 
0.19951718,0.19951718 0 0 0 0.0312,-0.0312 0.19951718,0.19951718 0 0 0 0.0312,-0.0312 0.19951718,0.19951718 0 
0 0 0.0312,-0.0625 0.19951718,0.19951718 0 0 0 0,-0.0312 0.19951718,0.19951718 0 0 0 0,-0.0625 
0.19951718,0.19951718 0 0 0 0,-0.0312 0.19951718,0.19951718 0 0 0 -0.0312,-0.0625 0.19951718,0.19951718 0 0 0 
-0.0312,-0.0312 0.19951718,0.19951718 0 0 0 -0.0312,0 l -1.25,-0.625 0.5,-0.90625 1.1875,0.75 a 
0.19951718,0.19951718 0 0 0 0.0312,0.0312 0.19951718,0.19951718 0 0 0 0.0625,0 0.199
 51718,0.19951718 0 0 0 0.0625,0 0.19951718,0.19951718 0 0 0 0.0312,0 0.19951718,0.19951718 0 0 0 
0.0312,-0.0312 0.19951718,0.19951718 0 0 0 0.0312,-0.0312 0.19951718,0.19951718 0 0 0 0.0312,-0.0312 
0.19951718,0.19951718 0 0 0 0,-0.0312 0.19951718,0.19951718 0 0 0 0.0312,-0.0625 0.19951718,0.19951718 0 0 0 
0,-0.0312 z"
-           id="path19255"
-           
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;marker:none;enable-background:accumulate"
 />
-      </g>
-      <g
-         id="g19257"
-         inkscape:label="places"
-         transform="translate(-323.02908,-649.02581)" />
-      <g
-         id="g19259"
-         inkscape:label="mimetypes"
-         transform="translate(-323.02908,-649.02581)" />
-      <g
-         id="g19261"
-         inkscape:label="emblems"
-         style="display:inline"
-         transform="translate(-323.02908,-649.02581)" />
-      <g
-         id="g19263"
-         inkscape:label="emotes"
-         style="display:inline"
-         transform="translate(-323.02908,-649.02581)" />
-      <g
-         id="g19265"
-         inkscape:label="categories"
-         style="display:inline"
-         transform="translate(-323.02908,-649.02581)" />
-      <g
-         id="g19267"
-         inkscape:label="actions"
-         style="display:inline"
-         transform="translate(-323.02908,-649.02581)" />
-    </g>
-    <g
-       
style="opacity:1;vector-effect:none;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:new"
-       inkscape:label="preferences-system-notifications"
-       id="g13967"
-       transform="matrix(4,0,0,4,-1044.0008,-2172)">
-      <path
-         inkscape:connector-curvature="0"
-         d="m 268.94244,544.94838 c -2.20914,0 -3.33013,1.5 -4,4 l -1,5 c -0.10831,0.54156 -0.44772,1 -1,1 v 
1 h 12 v -1 c -0.55229,0 -0.89169,-0.45844 -1,-1 l -1,-5 c -0.53033,-2.5 -1.79086,-4 -4,-4 z"
-         id="path40220"
-         sodipodi:nodetypes="ccsccccscc"
-         
style="opacity:1;vector-effect:none;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;paint-order:normal"
 />
-      <path
-         inkscape:connector-curvature="0"
-         d="m 269.11822,556.94838 a 1.5,1.5 0 0 0 1.41211,1 1.5,1.5 0 0 0 1.41211,-1 z"
-         id="path40774"
-         
style="opacity:1;vector-effect:none;fill:#bebebe;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;paint-order:normal"
 />
-    </g>
-  </g>
-</svg>
+<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg";><path d="M-44.068 15.543c.075.667.25 1.312.25 
2 0 9.94-8.06 18-18 18-.471 0-.914-.09-1.375-.125v8.875a7.234 7.234 0 0 0 7.25 7.25h6.18l8 8.187 
8.25-8.187h6.445a7.234 7.234 0 0 0 7.25-7.25v-21.5a7.234 7.234 0 0 0-7.25-7.25z" 
style="color:#000;display:inline;overflow:visible;visibility:visible;opacity:.5;fill:#c3c3c3;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:8;marker:none;enable-background:accumulate"/><path
 d="M-61.818 3.543c-7.732 0-14 6.268-14 14s6.268 14 14 14 14-6.268 14-14-6.268-14-14-14zm-2.125 4h4.125l-.25 
5.5a.798.798 0 0 0 0 .25.798.798 0 0 0 0 .124.798.798 0 0 0 .5.5.798.798 0 0 0 .125 0 .798.798 0 0 0 .25 0 
.798.798 0 0 0 .25 0 .798.798 0 0 0 .124-.124l4.625-3 2 3.625-4.875 2.5a.798.798 0 0 0-.124 0 .798.798 0 0 
0-.125.124.798.798 0 0 0-.125.375.798.798 0 0 0 0 .25.798.798 0 0 0 0 .125.798.798 0 0 0 .125.25.798.798 0 0 
0 .125.125.798.798 0 0 0 .124.125l5 2.5-2.125 3.625-4.625-3.124a.798.798 0 0 
 0-.124 0 .798.798 0 0 0-.25-.125.798.798 0 0 0-.25 0 .798.798 0 0 0-.5.375.798.798 0 0 0-.125.124.798.798 0 
0 0 0 .125.798.798 0 0 0 0 .25l.25 5.5h-4.125l.375-5.5a.798.798 0 0 0-.125-.374.798.798 0 0 
0-.125-.25.798.798 0 0 0-.25-.125.798.798 0 0 0-.25-.125.798.798 0 0 0-.125 0 .798.798 0 0 0-.375.125l-4.75 
3.125-2-3.625 5-2.5a.798.798 0 0 0 .125-.125.798.798 0 0 0 .125-.125.798.798 0 0 0 .125-.25.798.798 0 0 0 
0-.124.798.798 0 0 0 0-.25.798.798 0 0 0 0-.125.798.798 0 0 0-.125-.25.798.798 0 0 0-.125-.125.798.798 0 0 
0-.125 0l-5-2.5 2-3.625 4.75 3a.798.798 0 0 0 .125.125.798.798 0 0 0 .25 0 .798.798 0 0 0 .25 0 .798.798 0 0 
0 .125 0 .798.798 0 0 0 .125-.125.798.798 0 0 0 .125-.125.798.798 0 0 0 .124-.125.798.798 0 0 0 
0-.124.798.798 0 0 0 .125-.25.798.798 0 0 0 0-.125z" 
style="color:#000;display:inline;overflow:visible;visibility:visible;fill:#bebebe;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;enable-background:accumulate"/><path
 style="vector-effect:none;f
 
ill:#bebebe;fill-opacity:.5;stroke:none;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;paint-order:normal"
 d="M32 8c-8.837 0-13.32 6-16 16l-4 20c-.433 2.166-1.79 4-4 4v4h48v-4c-2.21 0-3.567-1.834-4-4l-4-20C45.879 14 
40.837 8 32 8zm.703 48a6 6 0 0 0 5.649 4A6 6 0 0 0 44 56H32.703z"/></svg>
\ No newline at end of file
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]