theme: use regular borders for top bar buttons

- no need to abuse image assets.
- big thanks to carlos for making it possible.

data/gnome-shell-theme.gresource.xml

@@ -24,7 +24,6 @@
     <file>page-indicator-inactive.svg</file>
     <file>page-indicator-checked.svg</file>
     <file>page-indicator-hover.svg</file>
-    <file>panel-button-border.svg</file>
     <file>process-working.svg</file>
     <file>running-indicator.svg</file>
     <file>source-button-border.svg</file>

data/theme/_common.scss

@@ -256,7 +256,7 @@ StScrollBar {
     -panel-corner-border-width: 2px;
     -panel-corner-border-color: transparent; 
     
-    &:active, &:overview, &:focus { -panel-corner-border-color: #729fcf; } //fixed due to SVG image-border
+    &:active, &:overview, &:focus { -panel-corner-border-color: lighten($selected_bg_color,5%); } 
     &.lock-screen, &.login-screen, &unlock-screen {
       -panel-corner-radius: 0;
       -panel-corner-background-color: transparent;
@@ -270,7 +270,7 @@ StScrollBar {
     font-weight: bold;
     color: #ccc;
     transition-duration: 100ms;
-   
+    padding: 2px;
     #appMenuIcon { 
       app-icon-bottom-clip: 1px;
       
@@ -288,7 +288,9 @@ StScrollBar {
     }
     
     &:active, &:overview, &:focus, &:checked {
-      border-image: url("panel-button-border.svg") 6 10 0 2;
+      border-color: lighten($selected_bg_color,5%);
+      border-bottom-width: 2px;
+      padding: 2px 2px 0 2px;
       color: lighten($fg_color,10%);
       text-shadow: black 0px 2px 2px;
       
@@ -307,7 +309,8 @@ StScrollBar {
   .panel-status-button {
   
     &:active, &:overview, &:focus, &:checked {
-      border-image: url("panel-button-border.svg") 6 10 0 2;
+      border-color: lighten($selected_bg_color,5%);
+      border-bottom-width: 2px;
     }
   }
   

data/theme/gnome-shell.css

@@ -1195,7 +1195,7 @@ StScrollBar {
     -panel-corner-border-width: 2px;
     -panel-corner-border-color: transparent; }
     #panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
-      -panel-corner-border-color: #729fcf; }
+      -panel-corner-border-color: #256ab1; }
     #panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-cornerunlock-screen {
       -panel-corner-radius: 0;
       -panel-corner-background-color: transparent;
@@ -1205,7 +1205,8 @@ StScrollBar {
     -minimum-hpadding: 6px;
     font-weight: bold;
     color: #ccc;
-    transition-duration: 100ms; }
+    transition-duration: 100ms;
+    padding: 2px; }
     #panel .panel-button #appMenuIcon {
       app-icon-bottom-clip: 1px; }
       .panel-button:active #panel .panel-button #appMenuIcon, .panel-button:overview #panel .panel-button #appMenuIcon, .panel-button:focus #panel .panel-button #appMenuIcon, .panel-button:checked #panel .panel-button #appMenuIcon {
@@ -1214,7 +1215,9 @@ StScrollBar {
       color: white;
       text-shadow: black 0 2px 2px; }
     #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
-      border-image: url("panel-button-border.svg") 6 10 0 2;
+      border-color: #256ab1;
+      border-bottom-width: 2px;
+      padding: 2px 2px 0 2px;
       color: white;
       text-shadow: black 0px 2px 2px; }
       #panel .panel-button:active > .system-status-icon, #panel .panel-button:overview > .system-status-icon, #panel .panel-button:focus > .system-status-icon, #panel .panel-button:checked > .system-status-icon {
@@ -1227,7 +1230,8 @@ StScrollBar {
       .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active, .login-screen #panel .panel-button:focus, .login-screen #panel .panel-button:hover, .login-screen #panel .panel-button:active, .lock-screen #panel .panel-button:focus, .lock-screen #panel .panel-button:hover, .lock-screen #panel .panel-button:active {
         color: white; }
   #panel .panel-status-button:active, #panel .panel-status-button:overview, #panel .panel-status-button:focus, #panel .panel-status-button:checked {
-    border-image: url("panel-button-border.svg") 6 10 0 2; }
+    border-color: #256ab1;
+    border-bottom-width: 2px; }
   #panel .panel-menu {
     -boxpointer-gap: 4px; }
   #panel .panel-status-indicators-box,

data/theme/panel-button-border.svg

@@ -1,74 +0,0 @@
-<?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="17"
-   height="10"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.48.5 r10040"
-   sodipodi:docname="panel-button-border.svg">
-  <defs
-     id="defs4" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#000000"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="44.8"
-     inkscape:cx="4.7420784"
-     inkscape:cy="5.7029946"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="true"
-     showguides="true"
-     inkscape:guide-bbox="true"
-     inkscape:window-width="2560"
-     inkscape:window-height="1402"
-     inkscape:window-x="2560"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     guidetolerance="10000"
-     objecttolerance="10000">
-    <inkscape:grid
-       type="xygrid"
-       id="grid3792"
-       empspacing="10"
-       visible="true"
-       enabled="true"
-       snapvisiblegridlinesonly="true" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata7">
-    <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="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <rect
-       style="opacity:1;fill:#729fcf;fill-opacity:1;stroke-width:0.43599999000000000;stroke-miterlimit:4;stroke-dasharray:none"
-       id="rect3796"
-       width="7"
-       height="2"
-       x="5"
-       y="8" />
-  </g>
-</svg>