[gnome-themes-standard] Widget theme: first stab at column headers.

From: Cosimo Cecchi <cosimoc src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-themes-standard] Widget theme: first stab at column headers.
Date: Thu, 1 Dec 2011 02:29:50 +0000 (UTC)
commit 2f5f77d1982cedc97ce4f144ef09e77bcbb67b01
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Mon Nov 21 18:21:14 2011 +0100

    Widget theme: first stab at column headers.

 themes/Adwaita/gtk-3.0/borders/Makefile.am         |   12 ++-
 .../gtk-3.0/borders/column-header-border-last.svg  |  163 +++++++++++++++++++
 .../gtk-3.0/borders/column-header-border.svg       |  169 ++++++++++++++++++++
 themes/Adwaita/gtk-3.0/gtk-widgets-borders.css     |   33 ++++
 themes/Adwaita/gtk-3.0/gtk-widgets.css             |   61 ++++++--
 5 files changed, 422 insertions(+), 16 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/borders/Makefile.am b/themes/Adwaita/gtk-3.0/borders/Makefile.am
index 13da1da..b96bdf9 100644
--- a/themes/Adwaita/gtk-3.0/borders/Makefile.am
+++ b/themes/Adwaita/gtk-3.0/borders/Makefile.am
@@ -1,12 +1,22 @@
 bordersdir = $(datadir)/themes/Adwaita/gtk-3.0/borders
 borders_DATA = 		\
+	column-header-border.svg \
+	column-header-border-last.svg \
 	button-border-focused.svg \
+	button-border-focused-dark.svg \
 	button-border.svg \
+	button-border-dark.svg \
 	generic-border-focused.svg \
+	generic-border-focused-dark.svg \
 	generic-border.svg \
+	generic-border-dark.svg \
 	primary-toolbar-button-border-focused.svg \
+	primary-toolbar-button-border-focused-dark.svg \
 	primary-toolbar-button-border.svg \
+	primary-toolbar-button-border-dark.svg \
 	primary-toolbar-generic-border-focused.svg \
-	primary-toolbar-generic-border.svg
+	primary-toolbar-generic-border-focused-dark.svg \
+	primary-toolbar-generic-border.svg \
+	primary-toolbar-generic-border-dark.svg
 
 EXTRA_DIST = $(borders_DATA)
diff --git a/themes/Adwaita/gtk-3.0/borders/column-header-border-last.svg b/themes/Adwaita/gtk-3.0/borders/column-header-border-last.svg
new file mode 100644
index 0000000..fc3b914
--- /dev/null
+++ b/themes/Adwaita/gtk-3.0/borders/column-header-border-last.svg
@@ -0,0 +1,163 @@
+<?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: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="16px"
+   height="16px"
+   id="svg33222"
+   version="1.1"
+   inkscape:version="0.48.1 r9760"
+   sodipodi:docname="column-header-border.svg">
+  <defs
+     id="defs33224">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3789">
+      <stop
+         style="stop-color:#a7aba7;stop-opacity:1;"
+         offset="0"
+         id="stop3791" />
+      <stop
+         style="stop-color:#a7aba7;stop-opacity:0;"
+         offset="1"
+         id="stop3793" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient7928">
+      <stop
+         style="stop-color:#16191a;stop-opacity:1;"
+         offset="0"
+         id="stop7930" />
+      <stop
+         style="stop-color:#232729;stop-opacity:1;"
+         offset="1"
+         id="stop7932" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4410-4-9-7-9">
+      <stop
+         style="stop-color:#535156;stop-opacity:1;"
+         offset="0"
+         id="stop4412-6-7-4-4" />
+      <stop
+         style="stop-color:#333333;stop-opacity:1;"
+         offset="1"
+         id="stop4414-9-8-8-8" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient5378-2-93"
+       id="linearGradient17869"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.59659086,0,0,0.59090912,-423.94512,-57.054903)"
+       x1="220"
+       y1="304"
+       x2="220"
+       y2="336.06244" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient5378-2-93">
+      <stop
+         style="stop-color:#f4f6f4;stop-opacity:1"
+         offset="0"
+         id="stop5380-6-3" />
+      <stop
+         style="stop-color:#d7dad7;stop-opacity:1"
+         offset="1"
+         id="stop5382-06-2" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4410-4-9-7-9"
+       id="linearGradient34952"
+       x1="7.9695358"
+       y1="0.96953601"
+       x2="7.9695358"
+       y2="14.937024"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3789"
+       id="linearGradient3795"
+       x1="8.000001"
+       y1="1"
+       x2="8.000001"
+       y2="16"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(15,0)" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="32"
+     inkscape:cx="14.016624"
+     inkscape:cy="5.6226625"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1022"
+     inkscape:window-x="0"
+     inkscape:window-y="26"
+     inkscape:window-maximized="1"
+     inkscape:snap-nodes="false"
+     inkscape:snap-bbox="true"
+     showguides="true"
+     inkscape:guide-bbox="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2995" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="4,9"
+       id="guide3797" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="7,12"
+       id="guide3799" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="7,4"
+       id="guide3801" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="12,11"
+       id="guide3803" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata33227">
+    <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">
+    <path
+       style="color:#000000;fill:#ffffff;stroke:none;stroke-width:1px;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 0,0 0,16 16,0 0,-16 z m 4,3 8,0 c 0.554,0 1,0.446 1,1 l 0,8 c 0,0.554 -0.446,1 -1,1 L 4,13 C 3.446,13 3,12.554 3,12 L 3,4 C 3,3.446 3.446,3 4,3 z"
+       id="rect2997"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccsssssssss" />
+  </g>
+</svg>
diff --git a/themes/Adwaita/gtk-3.0/borders/column-header-border.svg b/themes/Adwaita/gtk-3.0/borders/column-header-border.svg
new file mode 100644
index 0000000..f01f3af
--- /dev/null
+++ b/themes/Adwaita/gtk-3.0/borders/column-header-border.svg
@@ -0,0 +1,169 @@
+<?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: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="16px"
+   height="16px"
+   id="svg33222"
+   version="1.1"
+   inkscape:version="0.48.1 r9760"
+   sodipodi:docname="column-header-border-last.svg">
+  <defs
+     id="defs33224">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3789">
+      <stop
+         style="stop-color:#a7aba7;stop-opacity:1;"
+         offset="0"
+         id="stop3791" />
+      <stop
+         style="stop-color:#a7aba7;stop-opacity:0;"
+         offset="1"
+         id="stop3793" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient7928">
+      <stop
+         style="stop-color:#16191a;stop-opacity:1;"
+         offset="0"
+         id="stop7930" />
+      <stop
+         style="stop-color:#232729;stop-opacity:1;"
+         offset="1"
+         id="stop7932" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4410-4-9-7-9">
+      <stop
+         style="stop-color:#535156;stop-opacity:1;"
+         offset="0"
+         id="stop4412-6-7-4-4" />
+      <stop
+         style="stop-color:#333333;stop-opacity:1;"
+         offset="1"
+         id="stop4414-9-8-8-8" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient5378-2-93"
+       id="linearGradient17869"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.59659086,0,0,0.59090912,-423.94512,-57.054903)"
+       x1="220"
+       y1="304"
+       x2="220"
+       y2="336.06244" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient5378-2-93">
+      <stop
+         style="stop-color:#f4f6f4;stop-opacity:1"
+         offset="0"
+         id="stop5380-6-3" />
+      <stop
+         style="stop-color:#d7dad7;stop-opacity:1"
+         offset="1"
+         id="stop5382-06-2" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4410-4-9-7-9"
+       id="linearGradient34952"
+       x1="7.9695358"
+       y1="0.96953601"
+       x2="7.9695358"
+       y2="14.937024"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3789"
+       id="linearGradient3795"
+       x1="8.000001"
+       y1="1"
+       x2="8.000001"
+       y2="16"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(15,0)" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="32"
+     inkscape:cx="14.016624"
+     inkscape:cy="5.6226625"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1022"
+     inkscape:window-x="0"
+     inkscape:window-y="26"
+     inkscape:window-maximized="1"
+     inkscape:snap-nodes="false"
+     inkscape:snap-bbox="true"
+     showguides="true"
+     inkscape:guide-bbox="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2995" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="4,9"
+       id="guide3797" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="7,12"
+       id="guide3799" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="7,4"
+       id="guide3801" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="11,14"
+       id="guide3803" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata33227">
+    <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">
+    <path
+       style="color:#000000;fill:#ffffff;stroke:none;stroke-width:1px;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 0,0 0,16 16,0 0,-16 z m 4,3 7,0 c 0.554,0 1,0.446 1,1 l 0,8 c 0,0.554 -0.446,1 -1,1 L 4,13 C 3.446,13 3,12.554 3,12 L 3,4 C 3,3.446 3.446,3 4,3 z"
+       id="rect2997"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccsssssssss" />
+    <path
+       style="color:#000000;fill:url(#linearGradient3795);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1px;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 15,0 0,16 1,0 0,-16 z"
+       id="rect3768"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+  </g>
+</svg>
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets-borders.css b/themes/Adwaita/gtk-3.0/gtk-widgets-borders.css
index 7ea8c6a..148658a 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets-borders.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets-borders.css
@@ -134,4 +134,37 @@ GtkScale.progressbar.vertical {
     border-image: url("assets/trough-active-border-vertical.svg") 2 / 2 stretch;
 }
 
+/* column-headers borders */
+column-header.button,
+column-header .button,
+column-header.button:hover,
+column-header .button:hover,
+column-header.button:focus,
+column-header .button:focus,
+column-header.button:focus:hover,
+column-header .button:focus:hover,
+column-header.button:active:focus:hover,
+column-header .button:active:focus:hover,
+column-header.button:active:focus,
+column-header .button:active:focus,
+column-header.button:active:hover,
+column-header .button:active:hover {
+    border-image: url("borders/column-header-border.svg") 4 5 4 4 / 4 5 4 4 stretch;
+}
 
+column-header.button:last-child,
+column-header:last-child .button,
+column-header.button:hover:last-child,
+column-header:last-child .button:hover,
+column-header.button:focus:last-child,
+column-header:last-child .button:focus,
+column-header.button:focus:hover:last-child,
+column-header:last-child .button:focus:hover,
+column-header.button:active:focus:hover:last-child,
+column-header:last-child .button:active:focus:hover,
+column-header.button:active:focus:last-child,
+column-header:last-child .button:active:focus,
+column-header.button:active:hover:last-child,
+column-header:last-child .button:active:hover {
+    border-image: url("borders/column-header-border-last.svg") 4 / 4 stretch;
+}
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets.css b/themes/Adwaita/gtk-3.0/gtk-widgets.css
index 4f18e7e..213b84e 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets.css
@@ -1333,29 +1333,60 @@ GtkTreeView {
     -adwaita-focus-border-color: mix(@theme_selected_fg_color, @theme_selected_bg_color, 0.30);
 }
 
-column-header {
-    padding: 1 2;
-}
+/*column-header {
+    padding: 0 4;
+}*/
 
 column-header.button,
 column-header .button {
-    border-width: 0 1 1 0;
-    border-radius: 0;
-    border-style: solid;
+    background-color: @theme_base_color;
+    background-image: none;
+    padding: 0 4;
+}
 
-    border-image: -gtk-gradient(linear,
-                                left top, left bottom,
-                                from(@button_border),
-                                to(shade (@button_border, 1.23))) 1 stretch;
+column-header.button:active:focus:hover,
+column-header .button:active:focus:hover,
+column-header.button:active:focus,
+column-header .button:active:focus,
+column-header.button:active:hover,
+column-header .button:active:hover {
+    font: bold; /* doesn't work */
 }
 
-column-header .button GtkArrow {
-    color: @internal_element_color;
+column-header.button:active:hover,
+column-header .button:active:hover,
+column-header.button:active:focus:hover,
+column-header .button:active:focus:hover {
+    color: white; /*doesn't work */
+    background-color: @theme_bg_color;
+    text-shadow: white 0 1;
 }
 
-column-header:nth-child(last).button,
-column-header:nth-child(last) .button {
-    border-width: 0 0 1 0;
+/* this kinda is a gross hack, I'll do something better with border images */
+column-header.button:hover,
+column-header .button:hover,
+column-header.button:focus:hover,
+column-header .button:focus:hover,
+column-header.button:active:focus,
+column-header .button:active:focus {
+    background-color: @theme_base_color;
+    background-image: none;
+    border-width: 4 5 4 4;
+}
+
+column-header.button:hover:last-child,
+column-header:last-child .button:hover,
+column-header.button:focus:hover:last-child,
+column-header:last-child .button:focus:hover,
+column-header.button:active:focus:last-child,
+column-header:last-child .button:active:focus {
+    background-color: @theme_base_color;
+    background-image: none;
+    border-width: 4 5 4 4;
+}
+
+column-header .button GtkArrow {
+    color: @internal_element_color;
 }
 
 row:hover {
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]