From bbbda507474822d39380cb45b06b779a83c8c8e6 Mon Sep 17 00:00:00 2001
From: drakkar1969 <nicolabay@outlook.com>
Date: Mon, 13 May 2019 10:15:39 +0200
Subject: [PATCH] Remove gnome shell border images (#240)

* Add color variables for border image drop shadow removal

* Remove border image drop shadow: modal dialog

* Remove border image drop shadow: panel button dropdown menu

* Remove border image drop shadow: OSD window

* Remove border image drop shadow: resize popup

* Remove border image drop shadow: window switcher

* Remove border image drop shadow: workspace switcher

* Remove border image drop shadow: notifications

* Remove border image drop shadow: looking glass

* Fix OSD/switcher/looking glass colors (always transparent, even on solid variants)

* Adjust notification margins

* Tweak switcher border color
---
 .../3.18/common-assets/misc/message-icon.svg  | 87 ++++++++++++++++++
 common/gnome-shell/3.30/sass/_colors.scss     | 16 ++++
 common/gnome-shell/3.30/sass/_common.scss     | 91 ++++++++++---------
 3 files changed, 152 insertions(+), 42 deletions(-)
 create mode 100644 common/gnome-shell/3.18/common-assets/misc/message-icon.svg

diff --git a/common/gnome-shell/3.18/common-assets/misc/message-icon.svg b/common/gnome-shell/3.18/common-assets/misc/message-icon.svg
new file mode 100644
index 0000000..7223c3a
--- /dev/null
+++ b/common/gnome-shell/3.18/common-assets/misc/message-icon.svg
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   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:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="32"
+   height="32"
+   viewBox="0 0 32 32.000001"
+   id="svg6621"
+   version="1.1"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
+   sodipodi:docname="message-icon.svg">
+  <defs
+     id="defs6623">
+    <linearGradient
+       id="selected_bg_color"
+       osb:paint="solid">
+      <stop
+         style="stop-color:#5294e2;stop-opacity:1;"
+         offset="0"
+         id="stop4138" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#selected_bg_color"
+       id="linearGradient4140"
+       x1="2"
+       y1="1021.3622"
+       x2="2"
+       y2="1051.3622"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.2"
+     inkscape:cx="-0.68428583"
+     inkscape:cy="17.181721"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid7177" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata6626">
+    <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 />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1020.3622)">
+    <path
+       style="display:inline;opacity:1;fill:url(#linearGradient4140);fill-opacity:1;stroke:none;stroke-width:1.03279555;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.39215686"
+       d="M 1.5,1020.3622 H 2 v 32 H 1.5 c -0.831,0 -1.5,-0.7136 -1.5,-1.6 v -28.8 c 0,-0.8864 0.669,-1.6 1.5,-1.6 z"
+       id="rect4162"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="sccssss" />
+  </g>
+</svg>
diff --git a/common/gnome-shell/3.30/sass/_colors.scss b/common/gnome-shell/3.30/sass/_colors.scss
index 8d3a5f2..dd567ec 100644
--- a/common/gnome-shell/3.30/sass/_colors.scss
+++ b/common/gnome-shell/3.30/sass/_colors.scss
@@ -99,3 +99,19 @@ $wm_icon_bg: if($variant == 'light' and $darker == 'false', #90949E, #90939B);
 $wm_icon_unfocused_bg: if($variant == 'light' and $darker == 'false', #B6B8C0, #666A74);
 $wm_icon_hover_bg: if($variant == 'light' and $darker == 'false', #7A7F8B, #C4C7CC);
 $wm_icon_active_bg: $selected_fg_color;
+
+// Modal dialog colors
+$modal_bg_color: if($variant =='light', #f5f6f7, #323644);
+$modal_borders_color: $borders_color;
+
+// Panel button dropdown menu colors
+$panelmenu_bg_color: if($variant =='light', #ffffff, #383C4A);
+$panelmenu_borders_color: $borders_color;
+
+// OSD popup colors
+$popup_bg_color: transparentize(#252A36, 0.05);
+$popup_borders_color: transparentize(#0F1016, 0.3);
+
+// Switcher colors
+$switcher_bg_color: transparentize(#363945, 0.05);
+$switcher_borders_color: transparentize(#161A26, 0.3);
diff --git a/common/gnome-shell/3.30/sass/_common.scss b/common/gnome-shell/3.30/sass/_common.scss
index fb63448..4117f0c 100644
--- a/common/gnome-shell/3.30/sass/_common.scss
+++ b/common/gnome-shell/3.30/sass/_common.scss
@@ -215,11 +215,11 @@ StScrollBar {
 .flashspot { background-color: white; }
 
 .modal-dialog {
+  border-radius: 3px;
   color: $fg_color;
-  background-color: transparentize($bg_color, 1);
-  border: none;
-  border-image: url("#{$asset_path}/misc/modal.svg") 9 9 9 67;
-  padding: 0 5px 6px 5px;
+  background-color: $modal_bg_color;
+  border: 1px solid $modal_borders_color;
+  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
 
   .modal-dialog-content-box {
     padding: 20px 10px 10px 10px;
@@ -619,13 +619,13 @@ StScrollBar {
 .popup-menu {
   min-width: 15em;
   color: $fg_color;
-  border-image: url("#{$asset_path}/menu/menu.svg") 9 9 9 9;
+  background-color: $panelmenu_bg_color;
 
   .popup-menu-arrow { } //defined globally in the TOP BAR
   .popup-sub-menu {
     background: if($variant=='light', rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.15));
     box-shadow: inset 0 -1px if($variant=='light', rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.15));
-    margin: 0 4px;
+    margin: 0;
 
     .popup-menu-item.selected {
       background-color: $selected_bg_color;
@@ -638,20 +638,19 @@ StScrollBar {
   .popup-menu-item {
     spacing: 12px;
 
-    &:ltr { padding: .4em 3em .4em 0em; }
-    &:rtl { padding: .4em 0em .4em 3em; }
+    &:ltr { padding: .4em 2em .4em 0em; }
+    &:rtl { padding: .4em 0em .4em 2em; }
 
     &:checked {
       font-weight: normal;
-      background: none;
-      box-shadow: none;
-      border-image: url("#{$asset_path}/menu/submenu-open.svg") 9 9 9 9;
+      background: if($variant=='light', rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.15));
+      box-shadow: inset 0 1px if($variant=='light', rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.15));
     }
 
     &:active, &.selected {
       color: $selected_fg_color;
-      background-color: transparent;
-      border-image: url("common-assets/menu/menu-hover.svg") 9 9 1 1;
+      background-color: $selected_bg_color;
+      box-shadow: none;
     }
 
     &:insensitive {
@@ -667,7 +666,7 @@ StScrollBar {
   }
   //.popup-status-menu-item { font-weight: normal;  color: pink; } //dunno what that is
   &.panel-menu {
-    -boxpointer-gap: 0px;
+    -boxpointer-gap: 4px;
     margin-bottom: 1.75em;
   }
 }
@@ -679,12 +678,13 @@ StScrollBar {
 }
 
 .popup-menu-boxpointer {
-  -arrow-border-radius: 2px;
-  -arrow-background-color:  rgba(0,0,0,0.0);
+  -arrow-border-radius: 3px;
+  -arrow-background-color: $panelmenu_bg_color;
   -arrow-border-width: 1px;
-  -arrow-border-color: rgba(0,0,0,0.0);
-  -arrow-base: 0;
+  -arrow-border-color: $panelmenu_borders_color;
+  -arrow-base: 26px;
   -arrow-rise: 0;
+  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
 }
 
 .candidate-popup-boxpointer {
@@ -726,10 +726,10 @@ StScrollBar {
   min-height: 64px;
 
   color: $_shell_fg_color;
-  background: none;
-  border: none;
+  background: $popup_bg_color;
+  border: 1px solid $popup_borders_color;
   border-radius: 5px;
-  border-image: url("common-assets/misc/osd.svg") 9 9 9 9;
+  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
 
 .osd-monitor-label { @include fontsize($font-size * 3); }
 
@@ -746,10 +746,10 @@ StScrollBar {
 
 .resize-popup {
   color: $osd_fg_color;
-  background: none;
-  border: none;
+  background: $popup_bg_color;
+  border: 1px solid $popup_borders_color;
   border-radius: 5px;
-	border-image: url("common-assets/misc/osd.svg") 9 9 9 9;
+	box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
   padding: 12px;
 }
 
@@ -762,10 +762,10 @@ StScrollBar {
 }
 
 .switcher-list {
-  background: none;
-  border: none;
-  border-image: url("common-assets/misc/bg.svg") 9 9 9 9;
+  background: $switcher_bg_color;
+  border: 1px solid $switcher_borders_color;
   border-radius: 3px;
+  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
   padding: 20px;
 
   &-item-container { spacing: 8px; }
@@ -837,8 +837,10 @@ StScrollBar {
   &-group { padding: 12px; }
 
   &-container {
-    border-image: url("common-assets/misc/bg.svg") 9 9 9 9;
+    background-color: $switcher_bg_color;
+    border: 1px solid $switcher_borders_color;
     border-radius: 3px;
+    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
     padding: 20px;
     padding-bottom: 24px;
   }
@@ -1337,24 +1339,28 @@ StScrollBar {
 }
 
 .message {
-  padding: 4px;
+  padding: 0;
   color: $fg_color;
-  border-image: url("#{$asset_path}/misc/message.svg") 9 9 9 9;
+  background-color: if($variant=='light', rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.15));
+  border: 1px solid if($variant=='light', rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.30));
+  border-radius: 3px;
 
   &:hover, &:focus {
     color: $fg_color;
-    border-image: url("#{$asset_path}/misc/message-hover.svg") 9 9 9 9;
+    border-color: $selected_bg_color;
   }
 
   &:active {
     color: $selected_fg_color;
-    border-image: url("#{$asset_path}/misc/message-active.svg") 9 9 9 9;
+    background-color: $selected_bg_color;
+    border-color: $selected_bg_color;
   }
 
   &-icon-bin {
-    padding: 8px 0px 8px 8px;
+    padding: 12px 0px 12px 12px;
+    border-image: url("common-assets/misc/message-icon.svg") 9 9 9 9;
 
-    &:rtl { padding: 8px 8px 8px 0px; }
+    &:rtl { padding: 12px 12px 12px 0px; }
 
     > StIcon {
       //icon-size: 32px;
@@ -1959,12 +1965,12 @@ StScrollBar {
 .notification-banner:focus {
   @include fontsize($font-size);
   width: 34em;
-  margin: 5px;
-  padding: 10px;
+  margin: 10px;
+  padding: 6px 4px;
   color: $fg_color;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-image: url("#{$asset_path}/menu/menu.svg") 9 9 9 9;
+  background-color: $panelmenu_bg_color;
+  border: 1px solid $panelmenu_borders_color;
+  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
 
   .notification-icon { padding: 5px; }
 
@@ -2385,12 +2391,13 @@ $legacy_icon_size: 24px;
 // Looking Glass
 //
 #LookingGlassDialog {
+  margin-top: 4px;
   spacing: 4px;
   padding: 8px 8px 10px 8px;
-  background-color: transparentize(black, 0.3);
-  border: 1px solid black;
-  border-image: url("common-assets/misc/bg.svg") 9 9 9 9;
+  background-color: $switcher_bg_color;
+  border: 1px solid $switcher_borders_color;
   border-radius: 2px;
+  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
   color: $osd_fg_color;
 
   & > #Toolbar {