Gtk3 BlackMATE: more panel adjustments

- style system-monitor applet
- set icon-padding for na-tray-applet
- adjust hide panel buttons
- don't draw a bg on icons in na-tray-applet
  fixes https://github.com/mate-desktop/mate-panel/issues/336

3 files changed, 250 insertions, 64 deletions

diff --git a/desktop-themes/BlackMATE/gtk-3.0/assets/Makefile.am b/desktop-themes/BlackMATE/gtk-3.0/assets/Makefile.am
index 9e9f15bc..d3b8a268 100644
--- a/desktop-themes/BlackMATE/gtk-3.0/assets/Makefile.am
+++ b/desktop-themes/BlackMATE/gtk-3.0/assets/Makefile.am
@@ -38,6 +38,7 @@ theme_DATA = \
 	pane-separator-grip.svg \
 	pane-separator-grip-vertical-hover.svg \
 	pane-separator-grip-vertical.svg \
+	panel-grid.svg \
 	primary-toolbar-button-active-border-dark.svg \
 	primary-toolbar-raised-button-border-dark.svg \
 	progressbar-border-dark.svg \
diff --git a/desktop-themes/BlackMATE/gtk-3.0/assets/panel-grid.svg b/desktop-themes/BlackMATE/gtk-3.0/assets/panel-grid.svg
new file mode 100644
index 00000000..c057ca53
--- /dev/null
+++ b/desktop-themes/BlackMATE/gtk-3.0/assets/panel-grid.svg
@@ -0,0 +1,173 @@
+<?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"
+   sodipodi:docname="view-more-symbolic.svg"
+   height="22"
+   id="svg7384"
+   inkscape:version="0.91 r13725"
+   version="1.1"
+   width="12">
+  <metadata
+     id="metadata90">
+    <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>Gnome Symbolic Icon Theme</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:bbox-nodes="false"
+     inkscape:bbox-paths="true"
+     bordercolor="#666666"
+     borderopacity="1"
+     inkscape:current-layer="layer12"
+     inkscape:cx="37.386562"
+     inkscape:cy="10"
+     gridtolerance="10"
+     inkscape:guide-bbox="true"
+     guidetolerance="10"
+     id="namedview88"
+     inkscape:object-nodes="false"
+     inkscape:object-paths="false"
+     objecttolerance="10"
+     pagecolor="#3a3b39"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     showborder="true"
+     showgrid="false"
+     showguides="true"
+     inkscape:snap-bbox="true"
+     inkscape:snap-bbox-midpoints="false"
+     inkscape:snap-global="true"
+     inkscape:snap-grids="true"
+     inkscape:snap-nodes="true"
+     inkscape:snap-others="false"
+     inkscape:snap-to-guides="true"
+     inkscape:window-height="444"
+     inkscape:window-maximized="0"
+     inkscape:window-width="534"
+     inkscape:window-x="788"
+     inkscape:window-y="500"
+     inkscape:zoom="2.8284271">
+    <inkscape:grid
+       empspacing="2"
+       enabled="true"
+       id="grid4866"
+       originx="119.9998px"
+       originy="650px"
+       snapvisiblegridlinesonly="true"
+       spacingx="1px"
+       spacingy="1px"
+       type="xygrid"
+       visible="true" />
+    <inkscape:grid
+       color="#000000"
+       empcolor="#000000"
+       empopacity="0"
+       empspacing="4"
+       enabled="true"
+       id="grid5968"
+       opacity="0.1254902"
+       originx="119.9998px"
+       originy="650px"
+       snapvisiblegridlinesonly="true"
+       spacingx="0.5px"
+       spacingy="0.5px"
+       type="xygrid"
+       visible="true" />
+  </sodipodi:namedview>
+  <title
+     id="title9167">Gnome Symbolic Icon Theme</title>
+  <defs
+     id="defs7386" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer9"
+     inkscape:label="status"
+     style="display:inline"
+     transform="translate(-121.0004,-861)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer10"
+     inkscape:label="devices"
+     transform="translate(-121.0004,-861)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer11"
+     inkscape:label="apps"
+     transform="translate(-121.0004,-861)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer13"
+     inkscape:label="places"
+     transform="translate(-121.0004,-861)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer14"
+     inkscape:label="mimetypes"
+     transform="translate(-121.0004,-861)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer15"
+     inkscape:label="emblems"
+     style="display:inline"
+     transform="translate(-121.0004,-861)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g71291"
+     inkscape:label="emotes"
+     style="display:inline"
+     transform="translate(-121.0004,-861)" />
+  <g
+     inkscape:groupmode="layer"
+     id="g4953"
+     inkscape:label="categories"
+     style="display:inline"
+     transform="translate(-121.0004,-861)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer12"
+     inkscape:label="actions"
+     style="display:inline"
+     transform="translate(-121.0004,-861)">
+    <rect
+       height="4"
+       id="rect20592"
+       rx="0.38461545"
+       ry="0.50229359"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#555555;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:new"
+       width="4"
+       x="125.23243"
+       y="864.17157" />
+    <rect
+       height="4"
+       id="rect16730"
+       rx="0.38461545"
+       ry="0.50229359"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#555555;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:new"
+       width="4"
+       x="125.23243"
+       y="870.17157" />
+    <rect
+       height="4"
+       id="rect16732"
+       rx="0.38461545"
+       ry="0.50229359"
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#555555;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:new"
+       width="4"
+       x="125.23243"
+       y="876.17157" />
+  </g>
+</svg>
diff --git a/desktop-themes/BlackMATE/gtk-3.0/mate-applications.css b/desktop-themes/BlackMATE/gtk-3.0/mate-applications.css
index 24b1a6ba..4af874a5 100644
--- a/desktop-themes/BlackMATE/gtk-3.0/mate-applications.css
+++ b/desktop-themes/BlackMATE/gtk-3.0/mate-applications.css
@@ -292,10 +292,10 @@ CajaQueryEditor .toolbar .entry:focus {
 
 /* the panel bar itself */
 .mate-panel-menu-bar {
-	background-color: @theme_bg_color;
+    background-color: @theme_bg_color;
     background-image: none;
     /* normal panel */
-	color: @theme_fg_color;
+    color: @theme_fg_color;
     /* transparent panel light desktop background*/
 /*    color: @theme_selected_fg_color; */
     text-shadow: none;
@@ -338,20 +338,17 @@ PanelToplevel.background.mate-custom-panel-background .button {
 }
 
 PanelToplevel.background.mate-custom-panel-background .button:hover {
-    box-shadow: inset  0px  1px shade (@theme_selected_bg_color, 1.3),
-                inset  1px  0px shade (@theme_selected_bg_color, 1.3),
-                inset -1px  0px shade (@theme_selected_bg_color, 1.3),
-                inset  0px -1px shade (@theme_selected_bg_color, 1.3);
+    border-image: url("assets/button-active-border-dark.svg") 3 / 3px stretch;
 }
 
 MatePanelAppletFrameDBus PanelSeparator,
 PanelSeparator {
-	border-width: 0;
-	background-image: -gtk-gradient (linear, left top, left bottom,
-		from (shade (@theme_bg_color, 0.96)),
-		to (shade (@theme_bg_color, 1.05)));
-	color: shade (@theme_fg_color, 0.45);
-	text-shadow: none;
+    border-width: 0;
+    background-image: -gtk-gradient (linear, left top, left bottom,
+                                     from (shade (@theme_bg_color, 0.96)),
+                                     to (shade (@theme_bg_color, 1.05)));
+    color: shade (@theme_fg_color, 0.45);
+    text-shadow: none;
 }
 
 /* dictionary applet */
@@ -453,19 +450,6 @@ MatePanelApplet .button.flat:hover {
                       to (shade(@button_gradient_color_b, 0.7)));
 }
 
-/* drivemount */
-DriveList .button,
-DriveList .button.flat,
-DriveList .button:hover,
-DriveList .button.flat:hover,
-DriveList .button:active,
-DriveList .button.flat:active {
-    padding: 4px;
-    border-radius: 5px;
-    border-color: transparent;
-    box-shadow: none;
-}
-
 /*Wncklist */
 WnckTasklist .button {
     transition: all 400ms ease-out;
@@ -488,25 +472,25 @@ WnckTasklist .button:checked:hover,
 WnckTasklist .button:checked,
 WnckTasklist .button:active:hover,
 WnckTasklist .button:active {
-	border-radius: 3px;
-	color: @theme_fg_color;
-	border-style: solid;
-	background-image: linear-gradient(to bottom,
-	                                  shade(@button_gradient_color_b, 0.7),
-	                                  @theme_bg_color 50%,
-	                                  shade(@button_gradient_color_a, 1.5));
+    border-radius: 3px;
+    color: @theme_fg_color;
+    border-style: solid;
+    background-image: linear-gradient(to bottom,
+                                      shade(@button_gradient_color_b, 0.7),
+                                      @theme_bg_color 50%,
+                                      shade(@button_gradient_color_a, 1.5));
 }
 
 WnckTasklist .button:hover {
-	border-radius: 3px;
-	border-image: none;
-	border-style: solid;
-	border-color: shade(@button_border, 1.1);
-	background-image: linear-gradient(to bottom,
-	                                  shade(@button_gradient_color_a, 1.5),
-	                                  shade(@button_gradient_color_a, 0.7) 39%,
-	                                  @theme_bg_color 40%,
-	                                  shade(@less_dark_color, 0.4));
+    border-radius: 3px;
+    border-image: none;
+    border-style: solid;
+    border-color: shade(@button_border, 1.1);
+    background-image: linear-gradient(to bottom,
+                                      shade(@button_gradient_color_a, 1.5),
+                                      shade(@button_gradient_color_a, 0.7) 39%,
+                                      @theme_bg_color 40%,
+                                      shade(@less_dark_color, 0.4));
 }
 
 /* set normal button WnckSelector */
@@ -519,12 +503,12 @@ WnckSelector.menubar .menuitem {
 
 /* set selected button WnckSelector */
 WnckSelector.menubar .menuitem:hover {
-	color: @theme_fg_color;
-	border-style: solid;
-	background-image: linear-gradient(to bottom,
-	                                  shade(@button_gradient_color_b, 0.7),
-	                                  @theme_bg_color 50%,
-	                                  shade(@button_gradient_color_a, 1.5));
+    color: @theme_fg_color;
+    border-style: solid;
+    background-image: linear-gradient(to bottom,
+                                      shade(@button_gradient_color_b, 0.7),
+                                      @theme_bg_color 50%,
+                                      shade(@button_gradient_color_a, 1.5));
 }
 
 /* set WnckSelector menuitem */
@@ -538,24 +522,24 @@ WnckSelector.menubar .menu .menuitem {
 
 /* set WnckSelector selected menuitem */
 WnckSelector.menubar .menu .menuitem:hover {
-	border-image: none;
-	color: @theme_fg_color;
-	background-image: linear-gradient(to bottom,
-	                                  shade(@theme_selected_bg_color, 1.3),
-	                                  shade(@theme_selected_bg_color, 0.5));
+    border-image: none;
+    color: @theme_fg_color;
+    background-image: linear-gradient(to bottom,
+                                      shade(@theme_selected_bg_color, 1.3),
+                                      shade(@theme_selected_bg_color, 0.5));
 }
 
 ClockBox,
 .mate-panel-menu-bar.menubar,
 MatePanelApplet > GtkMenuBar.menubar {
-	font: normal;
+    font: normal;
 }
 
 WnckPager {
-	background-image: none;
-	border-color: transparent;
-	background-color: transparent;
-	text-shadow: none;
+    background-image: none;
+    border-color: transparent;
+    background-color: transparent;
+    text-shadow: none;
     box-shadow: inset  0px  1px shade (@theme_selected_bg_color, 1.3),
                 inset  1px  0px shade (@theme_selected_bg_color, 1.3),
                 inset -1px  0px shade (@theme_selected_bg_color, 1.3),
@@ -564,20 +548,48 @@ WnckPager {
 
 /* selected WnckPager */
 WnckPager:selected {
-	background-image: linear-gradient(to bottom,
-		@theme_selected_bg_color,
-		shade (@theme_selected_bg_color, 0.36));
+    background-image: linear-gradient(to bottom,
+                                      @theme_selected_bg_color,
+                                      shade (@theme_selected_bg_color, 0.36));
 }
 
 /* prelight of WnckPager */
 WnckPager:hover {
-	background-image: linear-gradient(to bottom,
-		@theme_bg_color,
-		shade (@theme_selected_bg_color, 0.86));
+    background-image: linear-gradient(to bottom,
+                                      @theme_bg_color,
+                                      shade (@theme_selected_bg_color, 0.86));
+}
+
+/* drivemount */
+DriveList .button,
+DriveList .button.flat,
+DriveList .button:hover,
+DriveList .button.flat:hover,
+DriveList .button:active,
+DriveList .button.flat:active {
+    padding: 4px;
+    border-radius: 3px;
+    border-color: transparent;
+    box-shadow: none;
+}
+
+/* system-monitor-applet */
+MatePanelApplet .horizontal .vertical .frame {
+    box-shadow: inset  0px  1px shade (@theme_selected_bg_color, 1.3),
+                inset  1px  0px shade (@theme_selected_bg_color, 1.3),
+                inset -1px  0px shade (@theme_selected_bg_color, 1.3),
+                inset  0px -1px shade (@theme_selected_bg_color, 1.3);
+    border-style: none;
+    border-radius: 5px;
+}
+
+/* no background for icon-padding area */
+GtkTrayIcon.background {
+    background-color: transparent;
 }
 
 NaTrayApplet {
-    -NaTrayApplet-icon-padding: 12px;
+    -NaTrayApplet-icon-padding: 3px;
     -NaTrayApplet-icon-size: 16;
 }