SVG-spinner image (animated); some color corrections to match the Blue Sunrise style...
authorLuzifr <szekely@woltlab.com>
Mon, 5 Sep 2011 13:31:35 +0000 (15:31 +0200)
committerLuzifr <szekely@woltlab.com>
Mon, 5 Sep 2011 13:31:35 +0000 (15:31 +0200)
wcfsetup/install/files/acp/style/testing.css
wcfsetup/install/files/icon/spinner.svg [new file with mode: 0644]

index f96c5ea2545acdddae66918c8e6fc469161a1cb3..d40147df03715f20d49351653e8f3dbdb4d682b9 100644 (file)
@@ -716,8 +716,9 @@ input[type="search"]:hover,
 input[type="email"]:hover,
 input[type='password']:hover,
 textarea:hover {
-       border: 1px solid #69c;
-       background-color: #fffff6;
+       border: 1px solid #fa2;
+       background-color: #fff9f4;
+       
 }
 
 /* inputs active */
@@ -731,14 +732,21 @@ input[type="search"]:focus,
 input[type="email"]:focus,
 input[type='password']:focus,
 textarea:focus {
-       border: 1px solid #69c;
-       background-color: #fffff6;
+       border: 1px solid #fa2;
+       background-color: #fff9f4;
+       outline: none;
+       
+       -webkit-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
+       -moz-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
+       -ms-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
+       -o-box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
+       box-shadow: 0 0 5px rgba(255, 170, 34, .5), inset 0 1px 5px rgba(0, 0, 0, .2);
        
-       -webkit-box-shadow: 0 0 5px rgba(102, 153, 204, 1), inset 0 0 5px rgba(102, 153, 204, .7);
-       -moz-box-shadow: 0 0 5px rgba(102, 153, 204, 1), inset 0 0 5px rgba(102, 153, 204, .7);
-       -ms-box-shadow: 0 0 5px rgba(102, 153, 204, 1), inset 0 0 5px rgba(102, 153, 204, .7);
-       -o-box-shadow: 0 0 5px rgba(102, 153, 204, 1), inset 0 0 5px rgba(102, 153, 204, .7);
-       box-shadow: 0 0 5px rgba(102, 153, 204, 1), inset 0 0 5px rgba(102, 153, 204, .7);
+       -webkit-transition: all .2s linear;
+       -moz-transition: all .2s linear;
+       -ms-transition: all .2s linear;
+       -o-transition: all .2s linear;
+       transition: all .2s linear;
 }
 
 /* Widths */
@@ -1040,9 +1048,12 @@ input[type='submit']:active,
        display: inline-block;
 }
 
-.tabMenu li a:hover {
+.tabMenu li:not(.ui-state-active) a:hover {
        color: #666;
-       border-color: #ccc;
+       border-width: 1px;
+       border-style: solid;
+       border-color: #fa2 #fa2 #ccc #fa2;
+       background-color: #fff9f4;
 }
 
 .tabMenu li.ui-state-active a {
@@ -1136,10 +1147,12 @@ input[type='submit']:active,
        transition: color .1s linear;
 }
 
-.menu ul li a:hover {
+.menu ul li:not(.ui-state-active) a:hover {
        color: #333;
-       border: 1px solid rgba(0, 0, 0, .3);
-       background-color: rgba(255, 255, 255, 1);
+       border-width: 1px;
+       border-style: solid;
+       border-color: #fa2;
+       background-color: #fff9f4;
 }
 
 .menu ul li a:active,
@@ -1611,7 +1624,7 @@ div.wcfDimensions {
 
 div.overlayLoading {
        background-color: #fff;
-       background-image: url("../../images/spinner.gif");
+       background-image: url("../../images/spinner.svg");
        background-position: center center;
        background-repeat: no-repeat;
 }
diff --git a/wcfsetup/install/files/icon/spinner.svg b/wcfsetup/install/files/icon/spinner.svg
new file mode 100644 (file)
index 0000000..873ae15
--- /dev/null
@@ -0,0 +1,140 @@
+<?xml version="1.0" encoding="utf-8"?>\r
+<!--<?xml-stylesheet type="text/css" href="svg.css"?>-->\r
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" xml:space="preserve">\r
+       \r
+       <title>Spinner</title> \r
+       <desc>Spinner Icon (animated)</desc> \r
+       \r
+       <!--\r
+               @author         Harald Szekely \r
+               @copyright      2011 WoltLab GmbH \r
+               @license        GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> \r
+       --> \r
+       \r
+       <defs>\r
+               <style type="text/css">\r
+                       <![CDATA[\r
+                               #x315degrees {opacity: 1; fill: #369;}\r
+                               #x270degrees {opacity: .5; fill: #369;}\r
+                               #x225degrees {opacity: .4; fill: #369;}\r
+                               #x180degrees {opacity: .3; fill: #369;}\r
+                               #x135degrees {opacity: .2; fill: #369;}\r
+                               #x090degrees {opacity: .1; fill: #369;}\r
+                               #x045degrees {opacity: .05; fill: #369;}\r
+                               #x000degrees {opacity: .01; fill: #369;}\r
+                               \r
+                               .Upper {fill: #369;}\r
+                               .Lower {fill: #fff;}\r
+                       ]]>\r
+               </style>\r
+       </defs>\r
+       \r
+       <g id="IconSpinner" transform="translate(7.5, 7.5)">\r
+               <animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0;45;90;135;180;225;270;315" begin="0s" dur="1s" repeatCount="indefinite" calcMode="discrete" additive="sum" />\r
+               \r
+               <g transform="translate(-7.5, -7.5)">\r
+                       <g id="x315degrees">\r
+                               <path class="Upper" d="M6.0859375,6.8349609c-0.2006836,0-0.3891602-0.0776367-0.5302734-0.21875L2.7270508,3.7875977\r
+                                       c-0.2924805-0.2924805-0.2924805-0.7680664,0-1.0605469c0.1411133-0.1411133,0.3295898-0.2192383,0.5302734-0.2192383\r
+                                       s0.3891602,0.078125,0.5302734,0.2192383l2.8286133,2.8286133c0.2924805,0.2924805,0.2924805,0.7680664,0,1.0605469\r
+                                       C6.4750977,6.7573242,6.2866211,6.8349609,6.0859375,6.8349609L6.0859375,6.8349609z"/>\r
+                               <path class="Lower" d="M3.2573242,2.7578125c0.1279297,0,0.2563477,0.0488281,0.3535156,0.1459961l2.8286133,2.8286133\r
+                                       c0.1943359,0.1943359,0.1943359,0.5126953,0,0.7070312c-0.097168,0.097168-0.2250977,0.1459961-0.3535156,0.1459961\r
+                                       c-0.1279297,0-0.2563477-0.0488281-0.3535156-0.1459961L2.9038086,3.6108398\r
+                                       c-0.1943359-0.1943359-0.1943359-0.5126953,0-0.7070312C3.0009766,2.8066406,3.1289062,2.7578125,3.2573242,2.7578125\r
+                                        M3.2573242,2.2578125c-0.2675781,0-0.5185547,0.1040039-0.7070312,0.2924805S2.2583008,2.9897461,2.2583008,3.2573242\r
+                                       S2.3618164,3.7758789,2.550293,3.9643555l2.8286133,2.8286133c0.1884766,0.1884766,0.4394531,0.2919922,0.7070312,0.2919922\r
+                                       s0.5185547-0.1035156,0.7070312-0.2919922s0.2919922-0.4394531,0.2924805-0.7070312\r
+                                       c0-0.2675781-0.1040039-0.5185547-0.2924805-0.7070312L3.9643555,2.550293\r
+                                       C3.7758789,2.3618164,3.5249023,2.2578125,3.2573242,2.2578125L3.2573242,2.2578125z"/>\r
+                       </g>\r
+                       <g id="x270degrees">\r
+                               <path class="Upper" d="M1.5,8.25c-0.4135742,0-0.75-0.3364258-0.75-0.75S1.0864258,6.75,1.5,6.75h4\r
+                                       c0.4135742,0,0.75,0.3364258,0.75,0.75S5.9135742,8.25,5.5,8.25H1.5z"/>\r
+                               <path class="Lower" d="M5.5,7C5.7749023,7,6,7.2250977,6,7.5S5.7749023,8,5.5,8h-4C1.2250977,8,1,7.7749023,1,7.5\r
+                                       S1.2250977,7,1.5,7H5.5 M5.5,6.5h-4c-0.5512695,0-1,0.4487305-1,1s0.4487305,1,1,1h4c0.5512695,0,1-0.4487305,1-1\r
+                                       S6.0512695,6.5,5.5,6.5L5.5,6.5z"/>\r
+                       </g>\r
+                       <g id="x225degrees">\r
+                               <path class="Upper" d="M3.2583008,12.4921875c-0.2006836,0-0.3891602-0.0771484-0.5302734-0.21875\r
+                                       c-0.1420898-0.1416016-0.2202148-0.3300781-0.2202148-0.53125s0.0776367-0.3886719,0.21875-0.5302734l2.8295898-2.8286133\r
+                                       c0.1411133-0.1411133,0.3295898-0.2192383,0.5302734-0.2192383s0.3891602,0.078125,0.5302734,0.2192383\r
+                                       c0.2924805,0.2929688,0.2919922,0.769043,0,1.0610352l-2.828125,2.8291016\r
+                                       C3.6474609,12.4150391,3.4589844,12.4921875,3.2583008,12.4921875L3.2583008,12.4921875z"/>\r
+                               <path class="Lower" d="M6.0864258,8.4140625c0.1279297,0,0.2563477,0.0488281,0.3535156,0.1459961v0.0004883\r
+                                       c0.1943359,0.1943359,0.1943359,0.5126953,0,0.7070312l-2.828125,2.8291016\r
+                                       c-0.097168,0.0976562-0.2250977,0.1455078-0.3535156,0.1455078s-0.2563477-0.0478516-0.3535156-0.1455078l-0.0014648-0.0009766\r
+                                       c-0.1943359-0.1943359-0.1943359-0.5126953,0-0.7070312l2.8295898-2.8286133\r
+                                       C5.8300781,8.4628906,5.9584961,8.4140625,6.0864258,8.4140625 M6.0864258,7.9140625\r
+                                       c-0.2675781,0-0.5185547,0.1040039-0.7070312,0.2924805l-2.8295898,2.8286133\r
+                                       c-0.1884766,0.1884766-0.2919922,0.4394531-0.2919922,0.7070312s0.1035156,0.5185547,0.2919922,0.7070312l0.0341797,0.0341797\r
+                                       l0.0083008,0.0058594c0.1831055,0.1640625,0.4174805,0.2529297,0.6660156,0.2529297\r
+                                       c0.2675781,0,0.5185547-0.1035156,0.7070312-0.2919922l2.828125-2.8291016\r
+                                       c0.1884766-0.1884766,0.2919922-0.4394531,0.2924805-0.7070312C7.0854492,8.6464844,6.9819336,8.3955078,6.793457,8.2070312\r
+                                       C6.605957,8.0185547,6.3544922,7.9140625,6.0864258,7.9140625L6.0864258,7.9140625z"/>\r
+                       </g>\r
+                       <g id="x180degrees">\r
+                               <path class="Upper" d="M7.5009766,14.25c-0.4145508,0-0.7514648-0.3369141-0.7514648-0.75L6.75,9.5\r
+                                       c0-0.4140625,0.3364258-0.7504883,0.75-0.7504883c0.4140625,0,0.7504883,0.3364258,0.7504883,0.7504883l0.0004883,4\r
+                                       C8.2509766,13.9130859,7.9145508,14.25,7.5009766,14.25L7.5009766,14.25z"/>\r
+                               <path class="Lower" d="M7.5004883,8.9995117c0.2749023,0,0.5,0.2250977,0.5,0.5004883l0.0004883,4\r
+                                       c0,0.2753906-0.2250977,0.5-0.5,0.5H7.4995117c-0.2749023,0-0.5-0.2246094-0.5-0.5L7,9.5\r
+                                       c0-0.2753906,0.2250977-0.5004883,0.5-0.5004883H7.5004883 M7.5004883,8.4995117C6.9487305,8.4995117,6.5,8.9482422,6.5,9.5\r
+                                       l-0.0004883,4c0,0.5517578,0.4487305,1,1,1c0.5527344,0,1.0014648-0.4482422,1.0014648-1l-0.0004883-4\r
+                                       C8.5004883,8.9482422,8.0517578,8.4995117,7.5004883,8.4995117L7.5004883,8.4995117z"/>\r
+                       </g>\r
+                       <g id="x135degrees">\r
+                               <path class="Upper" d="M11.7421875,12.4921875c-0.2011719,0-0.3886719-0.0771484-0.5302734-0.21875L8.3833008,9.4443359\r
+                                       c-0.2924805-0.2919922-0.2924805-0.7680664,0-1.0605469c0.1416016-0.1416016,0.3300781-0.2197266,0.5307617-0.2197266\r
+                                       c0.2011719,0,0.3886719,0.078125,0.5302734,0.2192383l2.8291016,2.8286133\r
+                                       c0.1416016,0.1416016,0.21875,0.3291016,0.21875,0.5302734s-0.0771484,0.3886719-0.21875,0.5302734\r
+                                       S11.9433594,12.4921875,11.7421875,12.4921875L11.7421875,12.4921875z"/>\r
+                               <path class="Lower" d="M8.9140625,8.4140625c0.1279297,0,0.2558594,0.0488281,0.3535156,0.1459961l2.8291016,2.8286133\r
+                                       c0.1943359,0.1943359,0.1943359,0.5126953,0,0.7070312l-0.0009766,0.0009766\r
+                                       c-0.0976562,0.0976562-0.2255859,0.1455078-0.3535156,0.1455078s-0.2568359-0.0478516-0.3535156-0.1455078L8.5600586,9.2675781\r
+                                       c-0.1943359-0.1943359-0.1943359-0.5126953,0-0.7070312l0.0004883-0.0004883\r
+                                       C8.6577148,8.4628906,8.7856445,8.4140625,8.9140625,8.4140625 M8.9140625,7.9140625\r
+                                       c-0.2675781,0-0.5185547,0.1040039-0.7070312,0.2924805S7.9145508,8.6464844,7.9145508,8.9135742\r
+                                       C7.9140625,9.1816406,8.0180664,9.4326172,8.206543,9.6210938l2.8286133,2.8291016\r
+                                       c0.1884766,0.1884766,0.4394531,0.2919922,0.7070312,0.2919922s0.5185547-0.1035156,0.7070312-0.2919922\r
+                                       c0.1894531-0.1894531,0.2929688-0.4404297,0.2929688-0.7080078s-0.1035156-0.5185547-0.2919922-0.7070312L9.6210938,8.206543\r
+                                       C9.4326172,8.0180664,9.1816406,7.9140625,8.9140625,7.9140625L8.9140625,7.9140625z"/>\r
+                       </g>\r
+                       <g id="x090degrees">\r
+                               <path class="Upper" d="M9.5,8.25c-0.4140625,0-0.7504883-0.3364258-0.7504883-0.75S9.0859375,6.75,9.5,6.75h4\r
+                                       c0.4130859,0,0.75,0.3364258,0.75,0.75s-0.3369141,0.75-0.75,0.75H9.5z"/>\r
+                               <path class="Lower" d="M13.5,7C13.7753906,7,14,7.2250977,14,7.5S13.7753906,8,13.5,8h-4\r
+                                       C9.2246094,8,8.9995117,7.7749023,8.9995117,7.5S9.2246094,7,9.5,7H13.5 M13.5,6.5h-4\r
+                                       c-0.5517578,0-1.0004883,0.4487305-1.0004883,1S8.9482422,8.5,9.5,8.5h4c0.5517578,0,1-0.4487305,1-1S14.0517578,6.5,13.5,6.5\r
+                                       L13.5,6.5z"/>\r
+                       </g>\r
+                       <g id="x045degrees">\r
+                               <path class="Upper" d="M8.9140625,6.8349609c-0.2006836,0-0.3891602-0.0776367-0.5302734-0.2182617\r
+                                       c-0.2919922-0.2929688-0.2915039-0.769043,0.0004883-1.0610352l2.8286133-2.8286133\r
+                                       c0.1416016-0.1411133,0.3291016-0.21875,0.5302734-0.21875s0.3886719,0.0776367,0.5302734,0.21875\r
+                                       c0.2919922,0.2924805,0.2919922,0.7680664,0,1.0605469l-2.8291016,2.828125\r
+                                       C9.3027344,6.7568359,9.1142578,6.8349609,8.9140625,6.8349609L8.9140625,6.8349609z"/>\r
+                               <path class="Lower" d="M11.7431641,2.7583008c0.1279297,0,0.2568359,0.0483398,0.3535156,0.1455078\r
+                                       c0.1943359,0.1943359,0.1943359,0.5126953,0,0.7070312l-2.8291016,2.828125\r
+                                       c-0.0976562,0.097168-0.2255859,0.1459961-0.3535156,0.1459961c-0.128418,0-0.2563477-0.0488281-0.3535156-0.1455078\r
+                                       C8.3666992,6.2451172,8.3666992,5.9267578,8.5610352,5.7324219l2.8286133-2.8286133\r
+                                       C11.4873047,2.8066406,11.6152344,2.7583008,11.7431641,2.7583008 M11.7431641,2.2578125\r
+                                       c-0.2675781,0-0.5185547,0.1040039-0.7070312,0.2924805L8.2075195,5.3789062\r
+                                       C7.8178711,5.7685547,7.8173828,6.4023438,8.206543,6.7924805c0.1894531,0.1889648,0.4399414,0.2924805,0.7070312,0.2924805\r
+                                       c0.2680664,0,0.519043-0.1040039,0.7075195-0.2924805l2.8291016-2.828125\r
+                                       c0.1884766-0.1884766,0.2919922-0.4394531,0.2919922-0.7070312s-0.1035156-0.5185547-0.2919922-0.7070312\r
+                                       S12.0107422,2.2578125,11.7431641,2.2578125L11.7431641,2.2578125z"/>\r
+                       </g>\r
+                       <g id="x000degrees">\r
+                               <path class="Upper" d="M7.5,6.25c-0.4130859,0-0.7495117-0.3364258-0.7495117-0.75v-4\r
+                                       c0-0.4135742,0.3364258-0.75,0.7495117-0.75c0.4135742,0,0.75,0.3364258,0.75,0.75v4C8.25,5.9135742,7.9135742,6.25,7.5,6.25\r
+                                       L7.5,6.25z"/>\r
+                               <path class="Lower" d="M7.5,1C7.7749023,1,8,1.2250977,8,1.5v4C8,5.7749023,7.7749023,6,7.5,6\r
+                                       C7.2255859,6,7.0004883,5.7749023,7.0004883,5.5v-4C7.0004883,1.2250977,7.2255859,1,7.5,1 M7.5,0.5\r
+                                       c-0.5512695,0-0.9995117,0.4487305-0.9995117,1v4c0,0.5512695,0.4482422,1,0.9995117,1s1-0.4487305,1-1v-4\r
+                                       C8.5,0.9487305,8.0512695,0.5,7.5,0.5L7.5,0.5z"/>\r
+                       </g>\r
+               </g>\r
+       </g>\r
+</svg>\r