Icons, Sidebar, handhelds

New icons (will expectedly replace the opened, closed icons in the
future); More support for small screens (handhelds); Optimized
log-in-overlay;

diff --git a/wcfsetup/install/files/acp/style/style.css b/wcfsetup/install/files/acp/style/style.css
index 9239267b6df2dc1ce39e621a7083c3d3b81ade4f..f9520f93cbb2cb6625f5cd16a83e8d537d34fde3 100644 (file)
--- a/wcfsetup/install/files/acp/style/style.css
+++ b/wcfsetup/install/files/acp/style/style.css
@@ -158,13 +158,13 @@ header.pageHeader {
        width: 100%;
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        header.pageHeader {
                min-width: 800px;
        }
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        header.pageHeader {
                min-width: auto;
        }
@@ -198,14 +198,14 @@ header.pageHeader nav.topMenu {
        transition: background .2s linear;
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        header.pageHeader nav.topMenu {
                min-width: 800px;
        }
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        header.pageHeader nav.topMenu {
                min-width: auto;
@@ -308,7 +308,7 @@ header.pageHeader div#logo h1 {
        top: 70px;
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        header.pageHeader div#logo h1 {
                font-size: 150%;
@@ -316,7 +316,7 @@ header.pageHeader div#logo h1 {
        
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        header.pageHeader div#logo h1 {
                font-size: 175%;
@@ -371,14 +371,14 @@ nav.mainMenu ul li {
        display: inline-block;
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        nav.mainMenu ul li {
                font-size: 120%;
        }
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        nav.mainMenu ul li {
                font-size: 150%;
@@ -428,7 +428,7 @@ nav.mainMenu ul li a {
        transition-timing-function: ease;
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        nav.mainMenu ul li a {
                padding: 10px 20px;
@@ -436,7 +436,7 @@ nav.mainMenu ul li a {
        
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        nav.mainMenu ul li a {
                padding: 10px 10px;
@@ -503,7 +503,7 @@ nav.headerNavigation {
        position: relative;
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        nav.headerNavigation {
                min-width: 800px;
@@ -511,7 +511,7 @@ nav.headerNavigation {
        
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        nav.headerNavigation {
                min-width: auto;
@@ -559,7 +559,7 @@ div.main {
        margin: 0 23px;
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        div.main {
                min-width: 800px;
@@ -567,7 +567,7 @@ div.main {
        
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        div.main {
                min-width: auto;
@@ -593,16 +593,16 @@ div.main > div section:only-child {
        width: auto;
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        section.content {
                padding: 5px 40px 25px;
-               min-height: 100px;
+               min-height: 100px; /* ToDo: Does not work! */
        }
        
 }      
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        section.content {
                padding: 5px 15px 25px;
@@ -672,7 +672,7 @@ nav.sidebarMenu > div h1 {
        cursor: pointer;
        font-weight: bold;
        color: #369;
-       background-image: url('../../icon/closed.svg');
+       background-image: url('../../icon/arrowRight.svg');
        background-position: 15px center;
        background-size: 16px;
        background-repeat: no-repeat;
@@ -680,7 +680,7 @@ nav.sidebarMenu > div h1 {
        position: relative;
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        nav.sidebarMenu > div h1 {
                font-size: 130%;
@@ -689,7 +689,7 @@ nav.sidebarMenu > div h1 {
        
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        nav.sidebarMenu > div h1 {
                font-size: 150%;
@@ -699,10 +699,10 @@ nav.sidebarMenu > div h1 {
 }
 
 nav.sidebarMenu > div h1.activeMenuItem {
-       background-image: url('../../icon/opened.svg');
+       background-image: url('../../icon/arrowDown.svg');
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        nav.sidebarMenu > div ul li {
                font-size: 110%;
@@ -710,7 +710,7 @@ nav.sidebarMenu > div h1.activeMenuItem {
        
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        nav.sidebarMenu > div ul li {
                font-size: 120%;
@@ -742,6 +742,69 @@ nav.sidebarMenu > div ul li.activeMenuItem a {
        color: #369;
 }
 
+/* ToDo: Collapsible Sidebar Button */
+
+aside.sidebar .collapsibleSidebarButton {
+       border-right: 1px solid transparent;
+       border-left: 1px solid transparent;
+       background-image: url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg');
+       background-size: 10px;
+       background-position: center 1%, center center, center 99%;
+       background-repeat: no-repeat;
+       position: absolute;
+       top: 0;
+       right: -17px;
+       bottom: 0;
+       width: 15px;
+       z-index: 500;
+       opacity: .3;
+       
+       -webkit-transition: opacity .2s linear;
+       -moz-transition: opacity .2s linear;
+       -ms-transition: opacity .2s linear;
+       -o-transition: opacity .2s linear;
+       transition: opacity .2s linear;
+}
+
+#tplLogin aside.sidebar .collapsibleSidebarButton {
+       /* ToDo: This should not be necessary! Is there no way to 
+       remove the sidebar by script on pages like log-in? If we 
+       find a way to achieve this, this declaration can be deleted. */
+       display: none;
+}
+
+aside.sidebar .collapsedSidebar .collapsibleSidebarButton {
+       /*border-right: 1px solid transparent;
+       border-left: 1px solid transparent;*/
+       background-image: url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg');
+       background-position: center 1%, center center, center 99%;
+}
+
+aside.sidebar .collapsibleSidebarButton:hover {
+       cursor: pointer;
+       color: #999;    
+       border-right-color: rgba(0, 0, 0, .15);
+       border-left-color: rgba(0, 0, 0, .15);
+       background-color: rgba(0, 0, 0, .015);
+       opacity: 1;
+}
+
+aside.sidebar .collapsedSidebar .collapsibleSidebarButton:hover {
+       border-right-color: rgba(0, 0, 0, .15);
+       border-left-color: transparent;
+}
+
+aside.sidebar .collapsedSidebar {
+       overflow: hidden;
+       width: 0;
+}
+
+aside.sidebar .collapsedSidebar nav {
+       overflow: hidden;
+       width: 0;
+       display: none;
+}
+
 
 
 /* ############## Page Footer ##############  */
@@ -755,7 +818,7 @@ footer.pageFooter {
        position: relative;
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        footer.pageFooter {
                min-width: 800px;
@@ -763,7 +826,7 @@ footer.pageFooter {
        
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        footer.pageFooter {
                min-width: auto;
@@ -865,7 +928,7 @@ footer.pageFooter nav.footerNavigation ul li {
        padding: 1px 0 10px;    
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        .mainHeading > img {
                width: 48px;
@@ -882,7 +945,7 @@ footer.pageFooter nav.footerNavigation ul li {
        
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        .mainHeading > img {
                width: 64px;
@@ -931,7 +994,7 @@ footer.pageFooter nav.footerNavigation ul li {
        padding: 10px 0;
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        .subHeading h1 {
                font-size: 150%;
@@ -939,7 +1002,7 @@ footer.pageFooter nav.footerNavigation ul li {
        
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        .subHeading h1 {
                font-size: 175%;
@@ -1011,7 +1074,7 @@ dl > dt {
        float: left;
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        dl > dt {
                width: 230px;
@@ -1019,7 +1082,7 @@ dl > dt {
        
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        dl > dt {
                width: 130px;
@@ -1040,7 +1103,7 @@ dl > dd {
        padding-top: 5px;
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        dl > dd {
                margin-left: 250px;
@@ -1048,7 +1111,7 @@ dl > dd {
        
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        dl > dd {
                margin-left: 150px;
@@ -1098,7 +1161,7 @@ dt.reversed {
        width: auto;
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        dt.reversed {
                left: 270px;
@@ -1106,7 +1169,7 @@ dt.reversed {
        
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        dt.reversed {
                left: 170px;
@@ -1257,7 +1320,7 @@ textarea[disabled='disabled'] {
 
 /* -- -- -- Input Widths -- -- -- */
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        textarea {
                width: 99%;
@@ -1285,7 +1348,7 @@ textarea[disabled='disabled'] {
        
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        textarea {
                width: 99%;
@@ -1351,7 +1414,7 @@ textarea[disabled='disabled'] {
        width: 99%;
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        .preInput > input,
        .preInput > textarea {
@@ -1360,7 +1423,7 @@ textarea[disabled='disabled'] {
        
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        .preInput > input,
        .preInput > textarea {
@@ -1492,7 +1555,7 @@ textarea[disabled='disabled'] {
        vertical-align: middle;
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        .largeButtons ul li a img {
                height: 24px;
@@ -1501,7 +1564,7 @@ textarea[disabled='disabled'] {
        
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        .largeButtons ul li {
                font-size: 125%;
@@ -1605,6 +1668,10 @@ input[type='button'],
        margin-top: 5px;
 }
 
+.boxTitle > hgroup .badge {
+       font-size: 75%;
+}
+
 /* Collapse Icon */
 
 .boxTitle > a {
@@ -1685,7 +1752,7 @@ input[type='button'],
        transition-timing-function: ease;
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        .tabMenu li a {
                font-size: 110%;
@@ -1694,7 +1761,7 @@ input[type='button'],
        
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        .tabMenu li a {
                font-size: 150%;
@@ -1737,7 +1804,7 @@ input[type='button'],
        z-index: 30;
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        .tabMenu li.ui-state-active a {
                font-size: 130%;
@@ -1745,7 +1812,7 @@ input[type='button'],
        
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        .tabMenu li.ui-state-active a {
                font-size: 150%;
@@ -1977,7 +2044,7 @@ input[type='button'],
        white-space: nowrap;
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        .breadcrumbs ul li a {
                max-width: 250px;
@@ -1985,7 +2052,7 @@ input[type='button'],
        
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        .breadcrumbs ul li a {
                max-width: 100px;
@@ -2518,7 +2585,7 @@ div#ajaxExceptionStacktrace {
        z-index: 1000;
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        #actionProxyLoading img {
                height: 24px;
@@ -2527,7 +2594,7 @@ div#ajaxExceptionStacktrace {
        
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        #actionProxyLoading img {
                height: 32px;
@@ -2562,8 +2629,9 @@ div#ajaxExceptionStacktrace {
 /* ############## ToDo: Overlay ############## */
 
 .ui-dialog {
-       border: 13px solid rgba(0, 0, 0, .5);
+       border: 23px solid transparent;
        border-radius: 15px;
+       background-color: rgba(0, 0, 0, .4);
        margin-right: auto !important;
        margin-left: auto !important;
        position: fixed !important;
@@ -2575,7 +2643,7 @@ div#ajaxExceptionStacktrace {
        box-shadow: 0 1px 23px rgba(0, 0, 0, 1);
 }
 
-@media screen and (min-device-width: 480px) {
+@media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        .ui-dialog {
                min-width: 500px !important;
@@ -2585,7 +2653,7 @@ div#ajaxExceptionStacktrace {
        
 }
 
-@media screen and (max-device-width: 480px) {
+@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
        
        .ui-dialog {
                min-width: 200px !important;
@@ -2596,18 +2664,29 @@ div#ajaxExceptionStacktrace {
 }
 
 .ui-dialog-titlebar {
-       background-color: #333;
-       padding: 7px;
+       border-top-left-radius: 7px;
+       border-top-right-radius: 7px;
+       background-color: #29374a;
+       background-image: url('../images/header.png');
+       background-position: left top;
+       background-repeat: repeat-x;
+       margin-bottom: 1px;
+       padding: 13px;
        position: relative;
+       display: block;
 }
 
 .ui-dialog-title {
-       text-shadow: 5px 0 0 #000;
-}
-
-.ui-dialog-content {
-       background-color: #333;
-       padding-bottom: 25px;
+       font-size: 170%;
+       font-weight: bold;
+       text-shadow: 0 -1px 0 #000;
+       color: rgba(255, 255, 255, 1);
+       background-image: url('../../icon/logIn2.svg');
+       background-position: left center;
+       background-size: 24px;
+       background-repeat: no-repeat;
+       padding-left: 35px;
+       display: block;
 }
 
 a.ui-dialog-titlebar-close {
@@ -2618,15 +2697,28 @@ a.ui-dialog-titlebar-close {
        position: absolute !important;
        width: 32px;
        height: 32px;
-       top: 3px;
-       right: 3px;
+       top: 7px;
+       right: 7px;
 }
 
 a.ui-dialog-titlebar-close span {
-       display: none;
-       visibility: hidden;
+       /* Removes the button-caption */
+       position: absolute;
+       left: -9000px;
+       top: -9000px;
+       width: 0;
 }
 
+.ui-dialog-content {
+       border-bottom-left-radius: 7px;
+       border-bottom-right-radius: 7px;
+       background-color: #333;
+       padding-top: 7px;
+       padding-bottom: 20px;
+}
+
+
+
 div.ui-widget-overlay {
        background-color: #000;
        opacity: .5;
@@ -2644,7 +2736,6 @@ div.ui-widget-overlay {
 
 .badge {
        font-size: 85%;
-       font-weight: normal;
        text-shadow: none;
        color: #666;
        border-radius: 13px;
@@ -3697,51 +3788,6 @@ div#profileButtonContainer button:hover {
 
 
 
-/* ToDo: Collapsible Sidebar Button */
-
-.collapsibleSidebarButton {
-       border-right: 1px solid transparent;
-       border-left: 1px solid transparent;
-       background-image: url('../../icon/handle1.svg');
-       background-size: 48px;
-       background-position: left center;
-       background-repeat: no-repeat;
-       padding: 3px;
-       position: absolute;
-       top: 0;
-       right: -15px;
-       bottom: 0;
-       width: 7px;
-       z-index: 500;
-       opacity: .6;
-       
-       -webkit-transition: opacity .2s linear;
-       -moz-transition: opacity .2s linear;
-       -ms-transition: opacity .2s linear;
-       -o-transition: opacity .2s linear;
-       transition: opacity .2s linear;
-}
-
-.collapsibleSidebarButton:hover {
-       cursor: pointer;
-       color: #999;    
-       border-right-color: #ccc;
-       border-left-color: #ccc;
-       background-color: rgba(0, 0, 0, .015);
-       opacity: 1;
-}
-
-.collapsedSidebar {
-       overflow: hidden;
-       width: 0;
-}
-
-.collapsedSidebar nav {
-       overflow: hidden;
-       width: 0;
-       display: none;
-}
-
 
 
 
@@ -3749,11 +3795,6 @@ div#profileButtonContainer button:hover {
 
 /* DEBUG ONLY - DO NOT TOUCH! */
 
-.ui-dialog-title {
-       font-weight: bold !important;
-       text-shadow: 1px 0px 0px rgb(0, 0, 0) !important;
-}
-
 div.ajaxDebugMessage p {
        border-bottom: 1px solid rgb(192, 192, 192);
        margin: 0 3px;
@@ -3777,19 +3818,6 @@ div.ajaxDebugMessage p:last-child {
 
 /* Is all that really still necessary? We wanted to support good browsers only */
 
-.ui-helper-clearfix {
-       display: inline-block;
-}
-
-/* Required comment for clearfix to work in Opera \*/
-* html .ui-helper-clearfix {
-       height: 1%;
-}
-
-.ui-helper-clearfix {
-       display: block;
-}
-
 /* End clearfix */
 .ui-helper-zfix {
        opacity: 0;

diff --git a/wcfsetup/install/files/icon/arrowDown.svg b/wcfsetup/install/files/icon/arrowDown.svg
new file mode 100644 (file)
index 0000000..9238d64
--- /dev/null
+++ b/wcfsetup/install/files/icon/arrowDown.svg
@@ -0,0 +1,28 @@
+<?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>Arrow Down</title>\r
+       <desc>Arrow Down Icon</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
+                               .Upper {fill: #369;}\r
+                               .Lower {fill: #fff;}\r
+                       ]]>\r
+               </style>\r
+       </defs>\r
+       \r
+       <g id="ArrowDown">\r
+               <polygon class="Lower" style="fill-rule: evenodd; clip-rule: evenodd;" points="1,3 7.5014648,14 14,3"/>\r
+               <polygon class="Upper" style="fill-rule: evenodd; clip-rule: evenodd;" points="1,2.0004883 7.5009766,13 14,2.0004883"/>\r
+       </g>\r
+</svg>\r

diff --git a/wcfsetup/install/files/icon/arrowDown1.svg b/wcfsetup/install/files/icon/arrowDown1.svg
new file mode 100644 (file)
index 0000000..0ecbcfa
--- /dev/null
+++ b/wcfsetup/install/files/icon/arrowDown1.svg
@@ -0,0 +1,28 @@
+<?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>Arrow Down</title>\r
+       <desc>Arrow Down Icon</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
+                               .Upper1 {fill: #666;}\r
+                               .Lower1 {fill: #fff;}\r
+                       ]]>\r
+               </style>\r
+       </defs>\r
+       \r
+       <g id="ArrowDown">\r
+               <polygon class="Lower1" style="fill-rule: evenodd; clip-rule: evenodd;" points="1,3 7.5014648,14 14,3"/>\r
+               <polygon class="Upper1" style="fill-rule: evenodd; clip-rule: evenodd;" points="1,2.0004883 7.5009766,13 14,2.0004883"/>\r
+       </g>\r
+</svg>\r

diff --git a/wcfsetup/install/files/icon/arrowLeft.svg b/wcfsetup/install/files/icon/arrowLeft.svg
new file mode 100644 (file)
index 0000000..9c2a423
--- /dev/null
+++ b/wcfsetup/install/files/icon/arrowLeft.svg
@@ -0,0 +1,28 @@
+<?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>Arrow Left</title>\r
+       <desc>Arrow Left Icon</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
+                               .Upper {fill: #369;}\r
+                               .Lower {fill: #fff;}\r
+                       ]]>\r
+               </style>\r
+       </defs>\r
+       \r
+       <g id="ArrowLeft">\r
+               <polygon class="Lower" style="fill-rule: evenodd; clip-rule: evenodd;" points="14,15 3,8.4985352 14,1.9995117"/>\r
+               <polygon class="Upper" style="fill-rule: evenodd; clip-rule: evenodd;" points="14,14 3,7.4990234 14,1"/>\r
+       </g>\r
+</svg>\r

diff --git a/wcfsetup/install/files/icon/arrowLeft1.svg b/wcfsetup/install/files/icon/arrowLeft1.svg
new file mode 100644 (file)
index 0000000..f121a90
--- /dev/null
+++ b/wcfsetup/install/files/icon/arrowLeft1.svg
@@ -0,0 +1,28 @@
+<?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>Arrow Left</title>\r
+       <desc>Arrow Left Icon</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
+                               .Upper1 {fill: #666;}\r
+                               .Lower1 {fill: #fff;}\r
+                       ]]>\r
+               </style>\r
+       </defs>\r
+       \r
+       <g id="ArrowLeft">\r
+               <polygon class="Lower1" style="fill-rule: evenodd; clip-rule: evenodd;" points="14,15 3,8.4985352 14,1.9995117"/>\r
+               <polygon class="Upper1" style="fill-rule: evenodd; clip-rule: evenodd;" points="14,14 3,7.4990234 14,1"/>\r
+       </g>\r
+</svg>\r

diff --git a/wcfsetup/install/files/icon/arrowRight.svg b/wcfsetup/install/files/icon/arrowRight.svg
new file mode 100644 (file)
index 0000000..fc3b1f3
--- /dev/null
+++ b/wcfsetup/install/files/icon/arrowRight.svg
@@ -0,0 +1,28 @@
+<?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>Arrow Right</title>\r
+       <desc>Arrow Right Icon</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
+                               .Upper {fill: #369;}\r
+                               .Lower {fill: #fff;}\r
+                       ]]>\r
+               </style>\r
+       </defs>\r
+       \r
+       <g id="ArrowRight">\r
+               <polygon class="Lower" style="fill-rule: evenodd; clip-rule: evenodd;" points="2,15 13,8.4985352 2,1.9995117"/>\r
+               <polygon class="Upper" style="fill-rule: evenodd; clip-rule: evenodd;" points="2,14 13,7.4990234 2,1"/>\r
+       </g>\r
+</svg>\r

diff --git a/wcfsetup/install/files/icon/arrowRight1.svg b/wcfsetup/install/files/icon/arrowRight1.svg
new file mode 100644 (file)
index 0000000..d40ca06
--- /dev/null
+++ b/wcfsetup/install/files/icon/arrowRight1.svg
@@ -0,0 +1,28 @@
+<?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>Arrow Right</title>\r
+       <desc>Arrow Right Icon</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
+                               .Upper1 {fill: #666;}\r
+                               .Lower1 {fill: #fff;}\r
+                       ]]>\r
+               </style>\r
+       </defs>\r
+       \r
+       <g id="ArrowRight">\r
+               <polygon class="Lower1" style="fill-rule: evenodd; clip-rule: evenodd;" points="2,15 13,8.4985352 2,1.9995117"/>\r
+               <polygon class="Upper1" style="fill-rule: evenodd; clip-rule: evenodd;" points="2,14 13,7.4990234 2,1"/>\r
+       </g>\r
+</svg>\r

diff --git a/wcfsetup/install/files/icon/arrowUp.svg b/wcfsetup/install/files/icon/arrowUp.svg
new file mode 100644 (file)
index 0000000..4b63e2c
--- /dev/null
+++ b/wcfsetup/install/files/icon/arrowUp.svg
@@ -0,0 +1,28 @@
+<?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>Arrow Up</title>\r
+       <desc>Arrow Up Icon</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
+                               .Upper {fill: #369;}\r
+                               .Lower {fill: #fff;}\r
+                       ]]>\r
+               </style>\r
+       </defs>\r
+       \r
+       <g id="ArrowUp">\r
+               <polygon class="Lower" style="fill-rule: evenodd; clip-rule: evenodd;" points="1,14 7.5014648,3 14,14"/>\r
+               <polygon class="Upper" style="fill-rule: evenodd; clip-rule: evenodd;" points="1,13 7.5009766,2 14,13"/>\r
+       </g>\r
+</svg>\r

diff --git a/wcfsetup/install/files/icon/arrowUp1.svg b/wcfsetup/install/files/icon/arrowUp1.svg
new file mode 100644 (file)
index 0000000..bfc2c99
--- /dev/null
+++ b/wcfsetup/install/files/icon/arrowUp1.svg
@@ -0,0 +1,28 @@
+<?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>Arrow Up</title>\r
+       <desc>Arrow Up Icon</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
+                               .Upper1 {fill: #666;}\r
+                               .Lower1 {fill: #fff;}\r
+                       ]]>\r
+               </style>\r
+       </defs>\r
+       \r
+       <g id="ArrowUp">\r
+               <polygon class="Lower1" style="fill-rule: evenodd; clip-rule: evenodd;" points="1,14 7.5014648,3 14,14"/>\r
+               <polygon class="Upper1" style="fill-rule: evenodd; clip-rule: evenodd;" points="1,13 7.5009766,2 14,13"/>\r
+       </g>\r
+</svg>\r

diff --git a/wcfsetup/install/files/icon/check1.svg b/wcfsetup/install/files/icon/check1.svg
new file mode 100644 (file)
index 0000000..2744670
--- /dev/null
+++ b/wcfsetup/install/files/icon/check1.svg
@@ -0,0 +1,38 @@
+<?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>Check</title>\r
+       <desc>Check Icon</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
+                               .Upper1 {fill: #666;}\r
+                               .Lower1 {fill: #fff;}\r
+                       ]]>\r
+               </style>\r
+       </defs>\r
+       \r
+       <g id="IconCheck">\r
+               <path class="Lower1" style="fill-rule: evenodd; clip-rule: evenodd;" d="M14.4794922,2.2192383L6.4145508,14.9335938\r
+                       C6.3901367,14.9736328,6.3457031,14.9970703,6.2998047,15H6.2944336c-0.0454102,0-0.0883789-0.0224609-0.1142578-0.0546875\r
+                       L1.0297852,8.2504883C0.9975586,8.2075195,0.9897461,8.1489258,1.0151367,8.1010742\r
+                       c0.0244141-0.0483398,0.074707-0.0932617,0.1289062-0.0932617h2.4731445l2.2768555,3.0917969l5.4711914-9.012207\r
+                       C11.390625,2.0458984,11.4375,2,11.4863281,2h2.8710938l0,0c0.0507812,0,0.0996094,0.027832,0.125,0.0742188\r
+                       C14.5078125,2.1186523,14.5048828,2.175293,14.4794922,2.2192383z"/>\r
+               <path class="Upper1" style="fill-rule: evenodd; clip-rule: evenodd;" d="M14.4794922,1.2192383L6.4145508,13.9335938\r
+                       C6.3901367,13.9736328,6.3457031,13.9970703,6.2998047,14H6.2944336c-0.0454102,0-0.0883789-0.0224609-0.1142578-0.0546875\r
+                       L1.0297852,7.2504883C0.9975586,7.2075195,0.9897461,7.1489258,1.0151367,7.1010742\r
+                       c0.0244141-0.0483398,0.074707-0.0932617,0.1289062-0.0932617h2.4731445l2.2768555,3.0917969l5.4711914-9.012207\r
+                       C11.390625,1.0458984,11.4375,1,11.4863281,1h2.8710938l0,0c0.0507812,0,0.0996094,0.027832,0.125,0.0742188\r
+                       C14.5078125,1.1186523,14.5048828,1.175293,14.4794922,1.2192383z"/>\r
+       </g>\r
+</svg>\r