From 35fac9967bdb84f13f3e5e490a914a1a8191a3f2 Mon Sep 17 00:00:00 2001
From: Luzifr <szekely@woltlab.com>
Date: Fri, 11 Nov 2011 19:05:46 +0100
Subject: [PATCH] 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;
---
 wcfsetup/install/files/acp/style/style.css  | 284 +++++++++++---------
 wcfsetup/install/files/icon/arrowDown.svg   |  28 ++
 wcfsetup/install/files/icon/arrowDown1.svg  |  28 ++
 wcfsetup/install/files/icon/arrowLeft.svg   |  28 ++
 wcfsetup/install/files/icon/arrowLeft1.svg  |  28 ++
 wcfsetup/install/files/icon/arrowRight.svg  |  28 ++
 wcfsetup/install/files/icon/arrowRight1.svg |  28 ++
 wcfsetup/install/files/icon/arrowUp.svg     |  28 ++
 wcfsetup/install/files/icon/arrowUp1.svg    |  28 ++
 wcfsetup/install/files/icon/check1.svg      |  38 +++
 10 files changed, 418 insertions(+), 128 deletions(-)
 create mode 100644 wcfsetup/install/files/icon/arrowDown.svg
 create mode 100644 wcfsetup/install/files/icon/arrowDown1.svg
 create mode 100644 wcfsetup/install/files/icon/arrowLeft.svg
 create mode 100644 wcfsetup/install/files/icon/arrowLeft1.svg
 create mode 100644 wcfsetup/install/files/icon/arrowRight.svg
 create mode 100644 wcfsetup/install/files/icon/arrowRight1.svg
 create mode 100644 wcfsetup/install/files/icon/arrowUp.svg
 create mode 100644 wcfsetup/install/files/icon/arrowUp1.svg
 create mode 100644 wcfsetup/install/files/icon/check1.svg

diff --git a/wcfsetup/install/files/acp/style/style.css b/wcfsetup/install/files/acp/style/style.css
index 9239267b6d..f9520f93cb 100644
--- 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
index 0000000000..9238d64d54
--- /dev/null
+++ b/wcfsetup/install/files/icon/arrowDown.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--<?xml-stylesheet type="text/css" href="svg.css"?>-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<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">
+	
+	<title>Arrow Down</title>
+	<desc>Arrow Down Icon</desc>
+	
+	<!--
+		@author		Harald Szekely 
+		@copyright	2011 WoltLab GmbH 
+		@license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> 
+	--> 
+	
+	<defs>
+		<style type="text/css">
+			<![CDATA[
+				.Upper {fill: #369;}
+				.Lower {fill: #fff;}
+			]]>
+		</style>
+	</defs>
+	
+	<g id="ArrowDown">
+		<polygon class="Lower" style="fill-rule: evenodd; clip-rule: evenodd;" points="1,3 7.5014648,14 14,3"/>
+		<polygon class="Upper" style="fill-rule: evenodd; clip-rule: evenodd;" points="1,2.0004883 7.5009766,13 14,2.0004883"/>
+	</g>
+</svg>
diff --git a/wcfsetup/install/files/icon/arrowDown1.svg b/wcfsetup/install/files/icon/arrowDown1.svg
new file mode 100644
index 0000000000..0ecbcfa76b
--- /dev/null
+++ b/wcfsetup/install/files/icon/arrowDown1.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--<?xml-stylesheet type="text/css" href="svg.css"?>-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<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">
+	
+	<title>Arrow Down</title>
+	<desc>Arrow Down Icon</desc>
+	
+	<!--
+		@author		Harald Szekely 
+		@copyright	2011 WoltLab GmbH 
+		@license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> 
+	--> 
+	
+	<defs>
+		<style type="text/css">
+			<![CDATA[
+				.Upper1 {fill: #666;}
+				.Lower1 {fill: #fff;}
+			]]>
+		</style>
+	</defs>
+	
+	<g id="ArrowDown">
+		<polygon class="Lower1" style="fill-rule: evenodd; clip-rule: evenodd;" points="1,3 7.5014648,14 14,3"/>
+		<polygon class="Upper1" style="fill-rule: evenodd; clip-rule: evenodd;" points="1,2.0004883 7.5009766,13 14,2.0004883"/>
+	</g>
+</svg>
diff --git a/wcfsetup/install/files/icon/arrowLeft.svg b/wcfsetup/install/files/icon/arrowLeft.svg
new file mode 100644
index 0000000000..9c2a4230b0
--- /dev/null
+++ b/wcfsetup/install/files/icon/arrowLeft.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--<?xml-stylesheet type="text/css" href="svg.css"?>-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<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">
+	
+	<title>Arrow Left</title>
+	<desc>Arrow Left Icon</desc>
+	
+	<!--
+		@author		Harald Szekely 
+		@copyright	2011 WoltLab GmbH 
+		@license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> 
+	--> 
+	
+	<defs>
+		<style type="text/css">
+			<![CDATA[
+				.Upper {fill: #369;}
+				.Lower {fill: #fff;}
+			]]>
+		</style>
+	</defs>
+	
+	<g id="ArrowLeft">
+		<polygon class="Lower" style="fill-rule: evenodd; clip-rule: evenodd;" points="14,15 3,8.4985352 14,1.9995117"/>
+		<polygon class="Upper" style="fill-rule: evenodd; clip-rule: evenodd;" points="14,14 3,7.4990234 14,1"/>
+	</g>
+</svg>
diff --git a/wcfsetup/install/files/icon/arrowLeft1.svg b/wcfsetup/install/files/icon/arrowLeft1.svg
new file mode 100644
index 0000000000..f121a90845
--- /dev/null
+++ b/wcfsetup/install/files/icon/arrowLeft1.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--<?xml-stylesheet type="text/css" href="svg.css"?>-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<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">
+	
+	<title>Arrow Left</title>
+	<desc>Arrow Left Icon</desc>
+	
+	<!--
+		@author		Harald Szekely 
+		@copyright	2011 WoltLab GmbH 
+		@license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> 
+	--> 
+	
+	<defs>
+		<style type="text/css">
+			<![CDATA[
+				.Upper1 {fill: #666;}
+				.Lower1 {fill: #fff;}
+			]]>
+		</style>
+	</defs>
+	
+	<g id="ArrowLeft">
+		<polygon class="Lower1" style="fill-rule: evenodd; clip-rule: evenodd;" points="14,15 3,8.4985352 14,1.9995117"/>
+		<polygon class="Upper1" style="fill-rule: evenodd; clip-rule: evenodd;" points="14,14 3,7.4990234 14,1"/>
+	</g>
+</svg>
diff --git a/wcfsetup/install/files/icon/arrowRight.svg b/wcfsetup/install/files/icon/arrowRight.svg
new file mode 100644
index 0000000000..fc3b1f3a3a
--- /dev/null
+++ b/wcfsetup/install/files/icon/arrowRight.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--<?xml-stylesheet type="text/css" href="svg.css"?>-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<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">
+	
+	<title>Arrow Right</title>
+	<desc>Arrow Right Icon</desc>
+	
+	<!--
+		@author		Harald Szekely 
+		@copyright	2011 WoltLab GmbH 
+		@license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> 
+	--> 
+	
+	<defs>
+		<style type="text/css">
+			<![CDATA[
+				.Upper {fill: #369;}
+				.Lower {fill: #fff;}
+			]]>
+		</style>
+	</defs>
+	
+	<g id="ArrowRight">
+		<polygon class="Lower" style="fill-rule: evenodd; clip-rule: evenodd;" points="2,15 13,8.4985352 2,1.9995117"/>
+		<polygon class="Upper" style="fill-rule: evenodd; clip-rule: evenodd;" points="2,14 13,7.4990234 2,1"/>
+	</g>
+</svg>
diff --git a/wcfsetup/install/files/icon/arrowRight1.svg b/wcfsetup/install/files/icon/arrowRight1.svg
new file mode 100644
index 0000000000..d40ca06308
--- /dev/null
+++ b/wcfsetup/install/files/icon/arrowRight1.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--<?xml-stylesheet type="text/css" href="svg.css"?>-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<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">
+	
+	<title>Arrow Right</title>
+	<desc>Arrow Right Icon</desc>
+	
+	<!--
+		@author		Harald Szekely 
+		@copyright	2011 WoltLab GmbH 
+		@license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> 
+	--> 
+	
+	<defs>
+		<style type="text/css">
+			<![CDATA[
+				.Upper1 {fill: #666;}
+				.Lower1 {fill: #fff;}
+			]]>
+		</style>
+	</defs>
+	
+	<g id="ArrowRight">
+		<polygon class="Lower1" style="fill-rule: evenodd; clip-rule: evenodd;" points="2,15 13,8.4985352 2,1.9995117"/>
+		<polygon class="Upper1" style="fill-rule: evenodd; clip-rule: evenodd;" points="2,14 13,7.4990234 2,1"/>
+	</g>
+</svg>
diff --git a/wcfsetup/install/files/icon/arrowUp.svg b/wcfsetup/install/files/icon/arrowUp.svg
new file mode 100644
index 0000000000..4b63e2ce99
--- /dev/null
+++ b/wcfsetup/install/files/icon/arrowUp.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--<?xml-stylesheet type="text/css" href="svg.css"?>-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<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">
+	
+	<title>Arrow Up</title>
+	<desc>Arrow Up Icon</desc>
+	
+	<!--
+		@author		Harald Szekely 
+		@copyright	2011 WoltLab GmbH 
+		@license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> 
+	--> 
+	
+	<defs>
+		<style type="text/css">
+			<![CDATA[
+				.Upper {fill: #369;}
+				.Lower {fill: #fff;}
+			]]>
+		</style>
+	</defs>
+	
+	<g id="ArrowUp">
+		<polygon class="Lower" style="fill-rule: evenodd; clip-rule: evenodd;" points="1,14 7.5014648,3 14,14"/>
+		<polygon class="Upper" style="fill-rule: evenodd; clip-rule: evenodd;" points="1,13 7.5009766,2 14,13"/>
+	</g>
+</svg>
diff --git a/wcfsetup/install/files/icon/arrowUp1.svg b/wcfsetup/install/files/icon/arrowUp1.svg
new file mode 100644
index 0000000000..bfc2c99637
--- /dev/null
+++ b/wcfsetup/install/files/icon/arrowUp1.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--<?xml-stylesheet type="text/css" href="svg.css"?>-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<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">
+	
+	<title>Arrow Up</title>
+	<desc>Arrow Up Icon</desc>
+	
+	<!--
+		@author		Harald Szekely 
+		@copyright	2011 WoltLab GmbH 
+		@license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> 
+	--> 
+	
+	<defs>
+		<style type="text/css">
+			<![CDATA[
+				.Upper1 {fill: #666;}
+				.Lower1 {fill: #fff;}
+			]]>
+		</style>
+	</defs>
+	
+	<g id="ArrowUp">
+		<polygon class="Lower1" style="fill-rule: evenodd; clip-rule: evenodd;" points="1,14 7.5014648,3 14,14"/>
+		<polygon class="Upper1" style="fill-rule: evenodd; clip-rule: evenodd;" points="1,13 7.5009766,2 14,13"/>
+	</g>
+</svg>
diff --git a/wcfsetup/install/files/icon/check1.svg b/wcfsetup/install/files/icon/check1.svg
new file mode 100644
index 0000000000..2744670622
--- /dev/null
+++ b/wcfsetup/install/files/icon/check1.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--<?xml-stylesheet type="text/css" href="svg.css"?>-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<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">
+	
+	<title>Check</title>
+	<desc>Check Icon</desc>
+	
+	<!--
+		@author		Harald Szekely 
+		@copyright	2011 WoltLab GmbH 
+		@license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> 
+	--> 
+	
+	<defs>
+		<style type="text/css">
+			<![CDATA[
+				.Upper1 {fill: #666;}
+				.Lower1 {fill: #fff;}
+			]]>
+		</style>
+	</defs>
+	
+	<g id="IconCheck">
+		<path class="Lower1" style="fill-rule: evenodd; clip-rule: evenodd;" d="M14.4794922,2.2192383L6.4145508,14.9335938
+			C6.3901367,14.9736328,6.3457031,14.9970703,6.2998047,15H6.2944336c-0.0454102,0-0.0883789-0.0224609-0.1142578-0.0546875
+			L1.0297852,8.2504883C0.9975586,8.2075195,0.9897461,8.1489258,1.0151367,8.1010742
+			c0.0244141-0.0483398,0.074707-0.0932617,0.1289062-0.0932617h2.4731445l2.2768555,3.0917969l5.4711914-9.012207
+			C11.390625,2.0458984,11.4375,2,11.4863281,2h2.8710938l0,0c0.0507812,0,0.0996094,0.027832,0.125,0.0742188
+			C14.5078125,2.1186523,14.5048828,2.175293,14.4794922,2.2192383z"/>
+		<path class="Upper1" style="fill-rule: evenodd; clip-rule: evenodd;" d="M14.4794922,1.2192383L6.4145508,13.9335938
+			C6.3901367,13.9736328,6.3457031,13.9970703,6.2998047,14H6.2944336c-0.0454102,0-0.0883789-0.0224609-0.1142578-0.0546875
+			L1.0297852,7.2504883C0.9975586,7.2075195,0.9897461,7.1489258,1.0151367,7.1010742
+			c0.0244141-0.0483398,0.074707-0.0932617,0.1289062-0.0932617h2.4731445l2.2768555,3.0917969l5.4711914-9.012207
+			C11.390625,1.0458984,11.4375,1,11.4863281,1h2.8710938l0,0c0.0507812,0,0.0996094,0.027832,0.125,0.0742188
+			C14.5078125,1.1186523,14.5048828,1.175293,14.4794922,1.2192383z"/>
+	</g>
+</svg>
-- 
2.20.1