[gnome-clocks] Updates to custom button styling
- From: Allan Day <allanday src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-clocks] Updates to custom button styling
- Date: Thu, 16 Aug 2012 17:17:53 +0000 (UTC)
commit c7a87c7ec08ddfa716768780fe942c19b203840b
Author: Allan Day <allanpday gmail com>
Date: Thu Aug 16 14:57:27 2012 +0100
Updates to custom button styling
The start, continue and stop buttons use custom styles. Update these
styles to use colors from the standard palette. Also add borders,
hover, and active states.
data/button-border-go.svg | 134 +++++++++++++++++++++++++++++++++++++++++++
data/button-border-stop.svg | 134 +++++++++++++++++++++++++++++++++++++++++++
data/gtk-style.css | 46 +++++++++++++--
3 files changed, 308 insertions(+), 6 deletions(-)
---
diff --git a/data/button-border-go.svg b/data/button-border-go.svg
new file mode 100644
index 0000000..f103197
--- /dev/null
+++ b/data/button-border-go.svg
@@ -0,0 +1,134 @@
+<?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.2 r9819"
+ sodipodi:docname="button-border.svg">
+ <defs
+ id="defs33224">
+ <linearGradient
+ id="linearGradient3845">
+ <stop
+ style="stop-color:#4d9806;stop-opacity:1;"
+ offset="0"
+ id="stop3847" />
+ <stop
+ style="stop-color:#315e06;stop-opacity:1;"
+ offset="1"
+ id="stop3849" />
+ </linearGradient>
+ <linearGradient
+ id="linearGradient3837">
+ <stop
+ style="stop-color:#82c246;stop-opacity:1;"
+ offset="0"
+ id="stop3839" />
+ <stop
+ style="stop-color:#ffffff;stop-opacity:0;"
+ offset="1"
+ id="stop3841" />
+ </linearGradient>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#linearGradient3837"
+ id="linearGradient3843"
+ x1="7.999999"
+ y1="1.92503"
+ x2="7.999999"
+ y2="14.003025"
+ gradientUnits="userSpaceOnUse" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#linearGradient3845"
+ id="linearGradient3851"
+ x1="8.0000019"
+ y1="1.5371597"
+ x2="8.000001"
+ y2="13.462841"
+ gradientUnits="userSpaceOnUse" />
+ </defs>
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#eaeaea"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="1"
+ inkscape:pageshadow="2"
+ inkscape:zoom="22.627416"
+ inkscape:cx="2.5615188"
+ inkscape:cy="5.6472037"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ inkscape:grid-bbox="true"
+ inkscape:document-units="px"
+ inkscape:window-width="1280"
+ inkscape:window-height="964"
+ inkscape:window-x="0"
+ inkscape:window-y="27"
+ inkscape:window-maximized="1"
+ inkscape:snap-nodes="false"
+ inkscape:snap-bbox="true"
+ inkscape:showpageshadow="false"
+ showborder="false">
+ <inkscape:grid
+ type="xygrid"
+ id="grid2992"
+ empspacing="5"
+ visible="true"
+ enabled="true"
+ snapvisiblegridlinesonly="true" />
+ </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:none;stroke:#ffffff;stroke-width:1;stroke-miterlimit:4;stroke-opacity:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;opacity:0.6"
+ d="m 15.5,4 0,8.999999 c 0,1.385 -1.115,2.5 -2.5,2.5 l -9.9999995,0 c -1.3850003,0 -2.5000005,-1.115 -2.5000005,-2.5 L 0.5,4"
+ id="rect17861-5"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cssssc" />
+ <rect
+ ry="2.5"
+ rx="2.5000005"
+ y="0.5"
+ x="0.5"
+ height="13.999999"
+ width="15"
+ id="rect17861"
+ style="color:#000000;fill:none;stroke:url(#linearGradient3851);stroke-width:1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+ <rect
+ ry="1.5"
+ rx="1.5"
+ y="1.5"
+ x="1.5"
+ height="12"
+ width="13.000001"
+ id="rect17861-6"
+ style="color:#000000;fill:none;stroke:url(#linearGradient3843);stroke-width:0.99999994000000003;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;opacity:0.8" />
+ </g>
+</svg>
diff --git a/data/button-border-stop.svg b/data/button-border-stop.svg
new file mode 100644
index 0000000..5f093da
--- /dev/null
+++ b/data/button-border-stop.svg
@@ -0,0 +1,134 @@
+<?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.2 r9819"
+ sodipodi:docname="button-border-stop.svg">
+ <defs
+ id="defs33224">
+ <linearGradient
+ id="linearGradient3845">
+ <stop
+ style="stop-color:#be1313;stop-opacity:1;"
+ offset="0"
+ id="stop3847" />
+ <stop
+ style="stop-color:#b41010;stop-opacity:1;"
+ offset="1"
+ id="stop3849" />
+ </linearGradient>
+ <linearGradient
+ id="linearGradient3837">
+ <stop
+ style="stop-color:#d87272;stop-opacity:1;"
+ offset="0"
+ id="stop3839" />
+ <stop
+ style="stop-color:#ffffff;stop-opacity:0;"
+ offset="1"
+ id="stop3841" />
+ </linearGradient>
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#linearGradient3837"
+ id="linearGradient3843"
+ x1="7.999999"
+ y1="1.92503"
+ x2="7.999999"
+ y2="14.003025"
+ gradientUnits="userSpaceOnUse" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#linearGradient3845"
+ id="linearGradient3851"
+ x1="8.0000019"
+ y1="1.5371597"
+ x2="8.000001"
+ y2="13.462841"
+ gradientUnits="userSpaceOnUse" />
+ </defs>
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#eaeaea"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="1"
+ inkscape:pageshadow="2"
+ inkscape:zoom="22.627416"
+ inkscape:cx="2.5615188"
+ inkscape:cy="5.6472037"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ inkscape:grid-bbox="true"
+ inkscape:document-units="px"
+ inkscape:window-width="1280"
+ inkscape:window-height="964"
+ inkscape:window-x="0"
+ inkscape:window-y="27"
+ inkscape:window-maximized="1"
+ inkscape:snap-nodes="false"
+ inkscape:snap-bbox="true"
+ inkscape:showpageshadow="false"
+ showborder="false">
+ <inkscape:grid
+ type="xygrid"
+ id="grid2992"
+ empspacing="5"
+ visible="true"
+ enabled="true"
+ snapvisiblegridlinesonly="true" />
+ </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:none;stroke:#ffffff;stroke-width:1;stroke-miterlimit:4;stroke-opacity:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;opacity:0.6"
+ d="m 15.5,4 0,8.999999 c 0,1.385 -1.115,2.5 -2.5,2.5 l -9.9999995,0 c -1.3850003,0 -2.5000005,-1.115 -2.5000005,-2.5 L 0.5,4"
+ id="rect17861-5"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cssssc" />
+ <rect
+ ry="2.5"
+ rx="2.5000005"
+ y="0.5"
+ x="0.5"
+ height="13.999999"
+ width="15"
+ id="rect17861"
+ style="color:#000000;fill:none;stroke:url(#linearGradient3851);stroke-width:1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+ <rect
+ ry="1.5"
+ rx="1.5"
+ y="1.5"
+ x="1.5"
+ height="12"
+ width="13.000001"
+ id="rect17861-6"
+ style="color:#000000;fill:none;stroke:url(#linearGradient3843);stroke-width:0.99999994000000003;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;opacity:0.8" />
+ </g>
+</svg>
diff --git a/data/gtk-style.css b/data/gtk-style.css
index 0e08bc3..96c5b76 100644
--- a/data/gtk-style.css
+++ b/data/gtk-style.css
@@ -1,5 +1,5 @@
- define-color clocks_go_color #006B09;
- define-color clocks_stop_color #ff0000;
+ define-color clocks_go_color #7fc141;
+ define-color clocks_stop_color #d63e3e;
.clocks-toolbar.toolbar {
border-style: solid;
@@ -17,8 +17,26 @@
from (@clocks_go_color),
to (darker (@clocks_go_color)));
color: #ffffff;
- border-image: none;
- border-width: 0;
+ border-image: url("button-border-go.svg") 3 3 4 3 / 3 3 4 3 stretch;
+ border-radius: 3px;
+ border-width: 1px 1px 2px 1px;
+ border-style: solid;
+ border-color: transparent;
+}
+
+
+.clocks-go:hover {
+ background-image: -gtk-gradient (linear,
+ left top, left bottom,
+ from (#89c452),
+ to (darker (#89c452)));
+}
+
+.clocks-go:active {
+ background-image: -gtk-gradient (linear,
+ left top, left bottom,
+ from (darker (@clocks_go_color)),
+ to (@clocks_go_color));
}
.clocks-stop {
@@ -27,7 +45,23 @@
from (@clocks_stop_color),
to (darker (@clocks_stop_color)));
color: #ffffff;
- border-image: none;
- border-width: 0;
+ border-image: url("button-border-stop.svg") 3 3 4 3 / 3 3 4 3 stretch;
+ border-radius: 3px;
+ border-width: 1px 1px 2px 1px;
+ border-style: solid;
+ border-color: transparent;
}
+.clocks-stop:hover {
+ background-image: -gtk-gradient (linear,
+ left top, left bottom,
+ from (#de6464),
+ to (darker (@clocks_stop_color)));
+}
+
+.clocks-stop:active {
+ background-image: -gtk-gradient (linear,
+ left top, left bottom,
+ from (darker (@clocks_stop_color)),
+ to (@clocks_stop_color));
+}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
