[gnome-clocks] Custom styles - use normal css gradients
- From: Allan Day <allanday src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-clocks] Custom styles - use normal css gradients
- Date: Fri, 17 Aug 2012 17:02:46 +0000 (UTC)
commit 7ac977c01c10f95b85ee3b6d0a6090573d319ac9
Author: Allan Day <allanpday gmail com>
Date: Fri Aug 17 17:02:42 2012 +0100
Custom styles - use normal css gradients
Turn the custom button styles into normal css gradients,
and make some visual tweaks at the same time.
https://bugzilla.gnome.org/show_bug.cgi?id=682001
data/button-border-go-active.svg | 136 ++++++++++++++++++++++++++++++++++++
data/button-border-go.svg | 12 ++--
data/button-border-stop-active.svg | 136 ++++++++++++++++++++++++++++++++++++
data/button-border-stop.svg | 10 ++--
data/gtk-style.css | 57 ++++++++-------
5 files changed, 313 insertions(+), 38 deletions(-)
---
diff --git a/data/button-border-go-active.svg b/data/button-border-go-active.svg
new file mode 100644
index 0000000..e092c27
--- /dev/null
+++ b/data/button-border-go-active.svg
@@ -0,0 +1,136 @@
+<?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-go-active.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:#8cc756;stop-opacity:1;"
+ offset="0"
+ id="stop3839" />
+ <stop
+ style="stop-color:#7fc141;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"
+ gradientTransform="translate(-16,-15)" />
+ <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="3.5188725"
+ inkscape:cy="7.4149707"
+ 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="-13.5"
+ x="-14.5"
+ height="12"
+ width="13.000001"
+ id="rect17861-6"
+ style="opacity:0.8;color:#000000;fill:none;stroke:url(#linearGradient3843);stroke-width:0.99999994;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ transform="scale(-1,-1)" />
+ </g>
+</svg>
diff --git a/data/button-border-go.svg b/data/button-border-go.svg
index f103197..19887a2 100644
--- a/data/button-border-go.svg
+++ b/data/button-border-go.svg
@@ -15,7 +15,7 @@
id="svg33222"
version="1.1"
inkscape:version="0.48.2 r9819"
- sodipodi:docname="button-border.svg">
+ sodipodi:docname="button-border-go.svg">
<defs
id="defs33224">
<linearGradient
@@ -32,11 +32,11 @@
<linearGradient
id="linearGradient3837">
<stop
- style="stop-color:#82c246;stop-opacity:1;"
+ style="stop-color:#8cc756;stop-opacity:1;"
offset="0"
id="stop3839" />
<stop
- style="stop-color:#ffffff;stop-opacity:0;"
+ style="stop-color:#7fc141;stop-opacity:0;"
offset="1"
id="stop3841" />
</linearGradient>
@@ -67,8 +67,8 @@
inkscape:pageopacity="1"
inkscape:pageshadow="2"
inkscape:zoom="22.627416"
- inkscape:cx="2.5615188"
- inkscape:cy="5.6472037"
+ inkscape:cx="3.5188725"
+ inkscape:cy="7.4149707"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:grid-bbox="true"
@@ -98,7 +98,7 @@
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
- <dc:title></dc:title>
+ <dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
diff --git a/data/button-border-stop-active.svg b/data/button-border-stop-active.svg
new file mode 100644
index 0000000..c6533d2
--- /dev/null
+++ b/data/button-border-stop-active.svg
@@ -0,0 +1,136 @@
+<?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-active.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:#d56969;stop-opacity:1;"
+ offset="0"
+ id="stop3839" />
+ <stop
+ style="stop-color:#cc5454;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"
+ gradientTransform="translate(-16,-15)" />
+ <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="12.753156"
+ 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="-13.5"
+ x="-14.5"
+ height="12"
+ width="13.000001"
+ id="rect17861-6"
+ style="opacity:0.8;color:#000000;fill:none;stroke:url(#linearGradient3843);stroke-width:1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ transform="scale(-1,-1)" />
+ </g>
+</svg>
diff --git a/data/button-border-stop.svg b/data/button-border-stop.svg
index 5f093da..df8c410 100644
--- a/data/button-border-stop.svg
+++ b/data/button-border-stop.svg
@@ -32,11 +32,11 @@
<linearGradient
id="linearGradient3837">
<stop
- style="stop-color:#d87272;stop-opacity:1;"
+ style="stop-color:#d56969;stop-opacity:1;"
offset="0"
id="stop3839" />
<stop
- style="stop-color:#ffffff;stop-opacity:0;"
+ style="stop-color:#cc5454;stop-opacity:0;"
offset="1"
id="stop3841" />
</linearGradient>
@@ -67,7 +67,7 @@
inkscape:pageopacity="1"
inkscape:pageshadow="2"
inkscape:zoom="22.627416"
- inkscape:cx="2.5615188"
+ inkscape:cx="12.753156"
inkscape:cy="5.6472037"
inkscape:current-layer="layer1"
showgrid="false"
@@ -98,7 +98,7 @@
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
- <dc:title></dc:title>
+ <dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
@@ -129,6 +129,6 @@
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" />
+ style="color:#000000;fill:none;stroke:url(#linearGradient3843);stroke-width:1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;opacity:0.80000000000000004" />
</g>
</svg>
diff --git a/data/gtk-style.css b/data/gtk-style.css
index 96c5b76..24e2aa9 100644
--- a/data/gtk-style.css
+++ b/data/gtk-style.css
@@ -1,5 +1,7 @@
- define-color clocks_go_color #7fc141;
- define-color clocks_stop_color #d63e3e;
+ define-color clocks_go_color_a #7fc141;
+ define-color clocks_go_color_b #8fc95d;
+ define-color clocks_stop_color_a #f44848;
+ define-color clocks_stop_color_b #ff6565;
.clocks-toolbar.toolbar {
border-style: solid;
@@ -12,10 +14,10 @@
}
.clocks-go {
- background-image: -gtk-gradient (linear,
- left top, left bottom,
- from (@clocks_go_color),
- to (darker (@clocks_go_color)));
+ background-image: linear-gradient(to bottom,
+ @clocks_go_color_a,
+ darker(@clocks_go_color_a) 70%
+ );
color: #ffffff;
border-image: url("button-border-go.svg") 3 3 4 3 / 3 3 4 3 stretch;
border-radius: 3px;
@@ -24,26 +26,26 @@
border-color: transparent;
}
-
.clocks-go:hover {
- background-image: -gtk-gradient (linear,
- left top, left bottom,
- from (#89c452),
- to (darker (#89c452)));
+ background-image: linear-gradient(to bottom,
+ @clocks_go_color_b,
+ darker(@clocks_go_color_b) 70%
+ );
}
.clocks-go:active {
- background-image: -gtk-gradient (linear,
- left top, left bottom,
- from (darker (@clocks_go_color)),
- to (@clocks_go_color));
+ background-image: linear-gradient(to bottom,
+ darker(@clocks_go_color_a),
+ @clocks_go_color_a
+ );
+ border-image: url("button-border-go-active.svg") 3 3 4 3 / 3 3 4 3 stretch;
}
.clocks-stop {
- background-image: -gtk-gradient (linear,
- left top, left bottom,
- from (@clocks_stop_color),
- to (darker (@clocks_stop_color)));
+ background-image: linear-gradient(to bottom,
+ @clocks_stop_color_a,
+ darker(@clocks_stop_color_a) 70%
+ );
color: #ffffff;
border-image: url("button-border-stop.svg") 3 3 4 3 / 3 3 4 3 stretch;
border-radius: 3px;
@@ -53,15 +55,16 @@
}
.clocks-stop:hover {
- background-image: -gtk-gradient (linear,
- left top, left bottom,
- from (#de6464),
- to (darker (@clocks_stop_color)));
+ background-image: linear-gradient(to bottom,
+ @clocks_stop_color_b,
+ darker(@clocks_stop_color_b) 70%
+ );
}
.clocks-stop:active {
- background-image: -gtk-gradient (linear,
- left top, left bottom,
- from (darker (@clocks_stop_color)),
- to (@clocks_stop_color));
+ background-image: linear-gradient(to bottom,
+ darker(@clocks_stop_color_a),
+ @clocks_stop_color_a
+ );
+ border-image: url("button-border-stop-active.svg") 3 3 4 3 / 3 3 4 3 stretch;
}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
