From: Luzifr <szekely@woltlab.com>
Date: Fri, 12 Aug 2011 17:38:57 +0000 (+0200)
Subject: Implemented more balloon tooltips, some style corrections, more SVG images, removed... 
X-Git-Tag: 2.0.0_Beta_1~1881
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=d6def9b175d1a1a0bbd80ea686b9f4788e4388df;p=GitHub%2FWoltLab%2FWCF.git

Implemented more balloon tooltips, some style corrections, more SVG images, removed some dummy PNG images.
---

diff --git a/wcfsetup/install/files/acp/style/testing.css b/wcfsetup/install/files/acp/style/testing.css
index c174365fa3..17f7ec44c9 100644
--- a/wcfsetup/install/files/acp/style/testing.css
+++ b/wcfsetup/install/files/acp/style/testing.css
@@ -266,10 +266,11 @@ div.main > div section:only-child {
 aside.sidebar {
 	display: table-cell;
 	vertical-align: top;
-	border-right: 1ps solid #bcd;
+	border-right: 1px solid #bcd;
 	background-color: #d8e7f5;
 	margin: 0 !important;
 	padding: 0 !important;
+	position: relative;
 	
 	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
 	-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
@@ -297,8 +298,9 @@ nav.sidebarMenu > div a:hover {
 }
 
 nav.sidebarMenu > div h1 {
-	background-image: url("../../icon/arrowRightS.png");
+	background-image: url("../../icon/boxOpener.svg");
 	background-position: 15px center;
+	background-size: 16px;
 	background-repeat: no-repeat;
 	color: #369;
 	cursor: pointer;
@@ -310,7 +312,7 @@ nav.sidebarMenu > div h1 {
 }
 
 nav.sidebarMenu > div h1.activeMenuItem {
-	background-image: url("../../icon/arrowDownS.png");
+	background-image: url("../../icon/boxCloser.svg");
 }
 
 nav.sidebarMenu > div ul li {
@@ -327,6 +329,7 @@ nav.sidebarMenu > div ul li a {
 nav.sidebarMenu > div ul li.activeMenuItem {
 	background-color: #fff;
 	overflow: hidden;
+	margin-right: -1px;
 	
 	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
 	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
diff --git a/wcfsetup/install/files/acp/templates/cacheList.tpl b/wcfsetup/install/files/acp/templates/cacheList.tpl
index 0cc40fa1ff..8038d2aa37 100644
--- a/wcfsetup/install/files/acp/templates/cacheList.tpl
+++ b/wcfsetup/install/files/acp/templates/cacheList.tpl
@@ -48,7 +48,7 @@
 {foreach from=$caches key=cache item=files}
 	{if $files|count}
 		<div class="border boxTitle">
-			<a onclick="openList('{$cache}')" class="collapsible"><img src="{@RELATIVE_WCF_DIR}icon/minusS.png" id="{$cache}Image" alt="" /></a>
+			<a onclick="openList('{$cache}')" class="collapsible"><img src="{@RELATIVE_WCF_DIR}icon/minusS.png" id="{$cache}Image" alt="" title="ToDo: Collapsible" class="balloonTooltip" /></a>
 			<hgroup>
 				<h1>{$cache} <span class="badge" title="{$cache}">{#$files|count}</span></h1>
 			</hgroup>
diff --git a/wcfsetup/install/files/acp/templates/cronjobList.tpl b/wcfsetup/install/files/acp/templates/cronjobList.tpl
index 9d282af66f..75cfa7b758 100644
--- a/wcfsetup/install/files/acp/templates/cronjobList.tpl
+++ b/wcfsetup/install/files/acp/templates/cronjobList.tpl
@@ -79,11 +79,11 @@
 				<tr class="cronjobRow">
 					<td class="columnIcon">
 						{if $__wcf->session->getPermission('admin.system.cronjobs.canEditCronjob')}
-							<img src="{@RELATIVE_WCF_DIR}icon/cronjobExecuteS.png" alt="" title="{lang}wcf.acp.cronjob.execute{/lang}" data-objectID="{@$cronjob->cronjobID}" class="executeButton" />
+							<img src="{@RELATIVE_WCF_DIR}icon/cronjobExecuteS.png" alt="" title="{lang}wcf.acp.cronjob.execute{/lang}" data-objectID="{@$cronjob->cronjobID}" class="executeButton balloonTooltip" />
 						{/if}
 						
 						{if $cronjob->canBeDisabled()}
-							<img src="{@RELATIVE_WCF_DIR}icon/{if $cronjob->active}enabled{else}disabled{/if}S.png" alt="" title="{lang}wcf.acp.cronjobs.{if $cronjob->active}disable{else}enable{/if}{/lang}" data-objectID="{@$cronjob->cronjobID}" data-disableMessage="{lang}wcf.acp.cronjob.disable{/lang}" data-enableMessage="{lang}wcf.acp.cronjob.enable{/lang}" class="toggleButton" />
+							<img src="{@RELATIVE_WCF_DIR}icon/{if $cronjob->active}enabled{else}disabled{/if}S.png" alt="" data-objectID="{@$cronjob->cronjobID}" data-disableMessage="{lang}wcf.acp.cronjob.disable{/lang}" data-enableMessage="{lang}wcf.acp.cronjob.enable{/lang}" title="{lang}wcf.acp.cronjobs.{if $cronjob->active}disable{else}enable{/if}{/lang}" class="toggleButton balloonTooltip" />
 						{else}
 							{if $cronjob->active}
 								<img src="{@RELATIVE_WCF_DIR}icon/enabledDisabledS.png" alt="" title="{lang}wcf.acp.cronjob.disable{/lang}" />
@@ -93,12 +93,12 @@
 						{/if}
 						
 						{if $cronjob->isEditable()}
-							<a href="index.php?form=CronjobEdit&amp;cronjobID={@$cronjob->cronjobID}{@SID_ARG_2ND}"><img src="{@RELATIVE_WCF_DIR}icon/editS.png" alt="" title="{lang}wcf.acp.cronjob.edit{/lang}" /></a>
+							<a href="index.php?form=CronjobEdit&amp;cronjobID={@$cronjob->cronjobID}{@SID_ARG_2ND}"><img src="{@RELATIVE_WCF_DIR}icon/editS.png" alt="" title="{lang}wcf.acp.cronjob.edit{/lang}" class="balloonTooltip" /></a>
 						{else}
 							<img src="{@RELATIVE_WCF_DIR}icon/editDisabledS.png" alt="" title="{lang}wcf.acp.cronjob.edit.disabled{/lang}" />
 						{/if}
 						{if $cronjob->isDeletable()}
-							<img src="{@RELATIVE_WCF_DIR}icon/deleteS.png" alt="" title="{lang}wcf.acp.cronjob.delete{/lang}" data-objectID="{@$cronjob->cronjobID}" data-confirmMessage="{lang}wcf.acp.cronjob.delete.sure{/lang}" class="deleteButton" />
+							<img src="{@RELATIVE_WCF_DIR}icon/deleteS.png" alt="" data-objectID="{@$cronjob->cronjobID}" data-confirmMessage="{lang}wcf.acp.cronjob.delete.sure{/lang}" title="{lang}wcf.acp.cronjob.delete{/lang}" class="deleteButton balloonTooltip" />
 						{else}
 							<img src="{@RELATIVE_WCF_DIR}icon/deleteDisabledS.png" alt="" title="{lang}wcf.acp.cronjob.delete.disabled{/lang}" />
 						{/if}
diff --git a/wcfsetup/install/files/acp/templates/footer.tpl b/wcfsetup/install/files/acp/templates/footer.tpl
index d03465ea75..909304ea57 100644
--- a/wcfsetup/install/files/acp/templates/footer.tpl
+++ b/wcfsetup/install/files/acp/templates/footer.tpl
@@ -9,7 +9,7 @@
 		<div>
 			<nav id="footerNavigation" class="footerNavigation">
 				<ul>
-					<li id="toTopLink" class="toTopLink"><a href="#top" title="{lang}wcf.global.scrollUp{/lang}" class="balloonTooltip"><img src="{@RELATIVE_WCF_DIR}icon/upS.png" alt="" /> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
+					<li id="toTopLink" class="toTopLink"><a href="#top" title="{lang}wcf.global.scrollUp{/lang}" class="balloonTooltip"><img src="{@RELATIVE_WCF_DIR}icon/toTop.svg" alt="" /> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
 				</ul>
 			</nav>
 		</div>
diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 31fa7340c1..bb12dffe8a 100644
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -121,7 +121,7 @@
 			<!-- header navigation -->
 			<nav class="headerNavigation">
 				<ul>
-					<li id="toBottomLink" class="toBottomLink"><a href="#bottom" title="{lang}wcf.global.scrollDown{/lang}" class="balloonTooltip"><img src="{@RELATIVE_WCF_DIR}icon/downS.png" alt="{lang}wcf.global.scrollDown{/lang}" /> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>
+					<li id="toBottomLink" class="toBottomLink"><a href="#bottom" title="{lang}wcf.global.scrollDown{/lang}" class="balloonTooltip"><img src="{@RELATIVE_WCF_DIR}icon/toBottom.svg" alt="" /> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>
 				</ul>
 			</nav>
 			<!-- /header navigation -->
diff --git a/wcfsetup/install/files/acp/templates/packageList.tpl b/wcfsetup/install/files/acp/templates/packageList.tpl
index c304c737e9..68ad50c7fa 100644
--- a/wcfsetup/install/files/acp/templates/packageList.tpl
+++ b/wcfsetup/install/files/acp/templates/packageList.tpl
@@ -70,7 +70,7 @@
 						<td class="columnID"><p>{@$package->packageID}</p></td>
 						<td class="columnIcon">
 							{if $package->standalone}
-								<img src="{@RELATIVE_WCF_DIR}icon/packageTypeStandaloneS.png" alt="" title="{lang}wcf.acp.package.list.standalone{/lang}" />
+								<img src="{@RELATIVE_WCF_DIR}icon/packageTypeStandaloneS.png" alt="" title="{lang}wcf.acp.package.list.standalone{/lang}" class="balloonTooltip" />
 							{elseif $package->isPlugin()}
 								<img src="{@RELATIVE_WCF_DIR}icon/packageTypePluginS.png" alt="" title="{lang}wcf.acp.package.list.plugin{/lang}" />
 							{else}
diff --git a/wcfsetup/install/files/acp/templates/packageUninstallationDependencies.tpl b/wcfsetup/install/files/acp/templates/packageUninstallationDependencies.tpl
index 8f0e50105d..77f3011a7a 100644
--- a/wcfsetup/install/files/acp/templates/packageUninstallationDependencies.tpl
+++ b/wcfsetup/install/files/acp/templates/packageUninstallationDependencies.tpl
@@ -93,12 +93,12 @@
 				<tr>
 					<td class="columnIcon">
 						{if $__wcf->session->getPermission('admin.system.package.canUpdatePackage')}
-							<a href="index.php?form=PackageStartInstall&amp;action=update&amp;packageID={@$package.packageID}{@SID_ARG_2ND}"><img src="{@RELATIVE_WCF_DIR}icon/packageUpdateS.png" alt="" title="{lang}wcf.acp.package.view.button.update{/lang}" /></a>
+							<a href="index.php?form=PackageStartInstall&amp;action=update&amp;packageID={@$package.packageID}{@SID_ARG_2ND}"><img src="{@RELATIVE_WCF_DIR}icon/packageUpdateS.png" alt="" title="{lang}wcf.acp.package.view.button.update{/lang}" class="balloonTooltip" /></a>
 						{else}
 							<img src="{@RELATIVE_WCF_DIR}icon/packageUpdateDisabledS.png" alt="" title="{lang}wcf.acp.package.view.button.update{/lang}" />
 						{/if}
 						{if $__wcf->session->getPermission('admin.system.package.canUninstallPackage') && $package.package != 'com.woltlab.wcf' && $package.packageID != PACKAGE_ID}
-							<a onclick="return confirm('{lang}wcf.acp.package.view.button.uninstall.sure{/lang}')" href="index.php?page=Package&amp;action=startUninstall&amp;packageID={@$package.packageID}{@SID_ARG_2ND}"><img src="{@RELATIVE_WCF_DIR}icon/deleteS.png" alt="" title="{lang}wcf.acp.package.view.button.uninstall{/lang}" /></a>
+							<a onclick="return confirm('{lang}wcf.acp.package.view.button.uninstall.sure{/lang}')" href="index.php?page=Package&amp;action=startUninstall&amp;packageID={@$package.packageID}{@SID_ARG_2ND}"><img src="{@RELATIVE_WCF_DIR}icon/deleteS.png" alt="" title="{lang}wcf.acp.package.view.button.uninstall{/lang}" class="balloonTooltip" /></a>
 						{else}
 							<img src="{@RELATIVE_WCF_DIR}icon/deleteDisabledS.png" alt="" title="{lang}wcf.acp.package.view.button.uninstall{/lang}" />
 						{/if}
@@ -108,11 +108,11 @@
 					<td class="columnID"><p>{@$package.packageID}</p></td>
 					<td class="columnIcon">
 						{if $package.standalone}
-							<img src="{@RELATIVE_WCF_DIR}icon/packageTypeStandaloneS.png" alt="" title="{lang}wcf.acp.package.list.standalone{/lang}" />
+							<img src="{@RELATIVE_WCF_DIR}icon/packageTypeStandaloneS.png" alt="" title="{lang}wcf.acp.package.list.standalone{/lang}" class="balloonTooltip" />
 						{elseif $package.parentPackageID}
-							<img src="{@RELATIVE_WCF_DIR}icon/packageTypePluginS.png" alt="" title="{lang}wcf.acp.package.list.plugin{/lang}" />
+							<img src="{@RELATIVE_WCF_DIR}icon/packageTypePluginS.png" alt="" title="{lang}wcf.acp.package.list.plugin{/lang}" class="balloonTooltip" />
 						{else}
-							<img src="{@RELATIVE_WCF_DIR}icon/packageS.png" alt="" title="{lang}wcf.acp.package.list.other{/lang}" />
+							<img src="{@RELATIVE_WCF_DIR}icon/packageS.png" alt="" title="{lang}wcf.acp.package.list.other{/lang}" class="balloonTooltip" />
 						{/if}
 					</td>
 					<td class="columnText" title="{$package.packageDescription}"><p><a href="index.php?page=PackageView&amp;packageID={@$package.packageID}{@SID_ARG_2ND}">{$package.packageName}{if $package.instanceNo > 1 && $package.instanceName == ''} (#{#$package.instanceNo}){/if}</a></p></td>
diff --git a/wcfsetup/install/files/acp/templates/packageUpdateSearchResult.tpl b/wcfsetup/install/files/acp/templates/packageUpdateSearchResult.tpl
index 9b951f827d..10eebdba68 100644
--- a/wcfsetup/install/files/acp/templates/packageUpdateSearchResult.tpl
+++ b/wcfsetup/install/files/acp/templates/packageUpdateSearchResult.tpl
@@ -20,11 +20,11 @@
 				<hgroup class="subHeading">
 					<h1>
 						{if $package.standalone == 1}
-							<img src="{@RELATIVE_WCF_DIR}icon/packageTypeStandaloneS.png" alt="" title="{lang}wcf.acp.package.list.standalone{/lang}" />
+							<img src="{@RELATIVE_WCF_DIR}icon/packageTypeStandaloneS.png" alt="" title="{lang}wcf.acp.package.list.standalone{/lang}" class="balloonTooltip" />
 						{elseif $package.plugin != ''}
-							<img src="{@RELATIVE_WCF_DIR}icon/packageTypePluginS.png" alt="" title="{lang}wcf.acp.package.list.plugin{/lang}" />
+							<img src="{@RELATIVE_WCF_DIR}icon/packageTypePluginS.png" alt="" title="{lang}wcf.acp.package.list.plugin{/lang}" class="balloonTooltip" />
 						{else}
-							<img src="{@RELATIVE_WCF_DIR}icon/packageS.png" alt="" title="{lang}wcf.acp.package.list.other{/lang}" />
+							<img src="{@RELATIVE_WCF_DIR}icon/packageS.png" alt="" title="{lang}wcf.acp.package.list.other{/lang}" class="balloonTooltip" />
 						{/if}
 						{$package.packageName}
 					</h1>
diff --git a/wcfsetup/install/files/acp/templates/packageView.tpl b/wcfsetup/install/files/acp/templates/packageView.tpl
index 841e65f7c2..2ebe8e150e 100644
--- a/wcfsetup/install/files/acp/templates/packageView.tpl
+++ b/wcfsetup/install/files/acp/templates/packageView.tpl
@@ -187,12 +187,12 @@
 				<tr>
 					<td class="columnIcon">
 						{if $__wcf->session->getPermission('admin.system.package.canUpdatePackage')}
-							<a href="index.php?form=PackageStartInstall&amp;action=update&amp;packageID={@$package.packageID}{@SID_ARG_2ND}"><img src="{@RELATIVE_WCF_DIR}icon/packageUpdateS.png" alt="" title="{lang}wcf.acp.package.view.button.update{/lang}" /></a>
+							<a href="index.php?form=PackageStartInstall&amp;action=update&amp;packageID={@$package.packageID}{@SID_ARG_2ND}"><img src="{@RELATIVE_WCF_DIR}icon/packageUpdateS.png" alt="" title="{lang}wcf.acp.package.view.button.update{/lang}" class="balloonTooltip" /></a>
 						{else}
 							<img src="{@RELATIVE_WCF_DIR}icon/packageUpdateDisabledS.png" alt="" title="{lang}wcf.acp.package.view.button.update{/lang}" />
 						{/if}
 						{if $__wcf->session->getPermission('admin.system.package.canUninstallPackage') && $package.package != 'com.woltlab.wcf' && $package.packageID != PACKAGE_ID}
-							<a onclick="return confirm('{lang}wcf.acp.package.view.button.uninstall.sure{/lang}')" href="index.php?page=Package&amp;action=startUninstall&amp;packageID={@$package.packageID}{@SID_ARG_2ND}"><img src="{@RELATIVE_WCF_DIR}icon/deleteS.png" alt="" title="{lang}wcf.acp.package.view.button.uninstall{/lang}" /></a>
+							<a onclick="return confirm('{lang}wcf.acp.package.view.button.uninstall.sure{/lang}')" href="index.php?page=Package&amp;action=startUninstall&amp;packageID={@$package.packageID}{@SID_ARG_2ND}"><img src="{@RELATIVE_WCF_DIR}icon/deleteS.png" alt="" title="{lang}wcf.acp.package.view.button.uninstall{/lang}" class="balloonTooltip" /></a>
 						{else}
 							<img src="{@RELATIVE_WCF_DIR}icon/deleteDisabledS.png" alt="" title="{lang}wcf.acp.package.view.button.uninstall{/lang}" />
 						{/if}
@@ -202,11 +202,11 @@
 					<td class="columnID"><p>{@$package.packageID}</p></td>
 					<td class="columnIcon">
 						{if $package.standalone}
-							<img src="{@RELATIVE_WCF_DIR}icon/packageTypeStandaloneS.png" alt="" title="{lang}wcf.acp.package.list.standalone{/lang}" />
+							<img src="{@RELATIVE_WCF_DIR}icon/packageTypeStandaloneS.png" alt="" title="{lang}wcf.acp.package.list.standalone{/lang}" class="balloonTooltip" />
 						{elseif $package.parentPackageID}
-							<img src="{@RELATIVE_WCF_DIR}icon/packageTypePluginS.png" alt="" title="{lang}wcf.acp.package.list.plugin{/lang}" />
+							<img src="{@RELATIVE_WCF_DIR}icon/packageTypePluginS.png" alt="" title="{lang}wcf.acp.package.list.plugin{/lang}" class="balloonTooltip" />
 						{else}
-							<img src="{@RELATIVE_WCF_DIR}icon/packageS.png" alt="" title="{lang}wcf.acp.package.list.other{/lang}" />
+							<img src="{@RELATIVE_WCF_DIR}icon/packageS.png" alt="" title="{lang}wcf.acp.package.list.other{/lang}" class="balloonTooltip" />
 						{/if}
 					</td>
 					<td class="columnText" title="{$package.packageDescription}"><p><a href="index.php?page=PackageView&amp;packageID={@$package.packageID}{@SID_ARG_2ND}">{$package.packageName}{if $package.instanceNo > 1 && $package.instanceName == ''} (#{#$package.instanceNo}){/if}</a></p></td>
diff --git a/wcfsetup/install/files/acp/templates/setupFooter.tpl b/wcfsetup/install/files/acp/templates/setupFooter.tpl
index dd139d7fec..df4b9952ca 100644
--- a/wcfsetup/install/files/acp/templates/setupFooter.tpl
+++ b/wcfsetup/install/files/acp/templates/setupFooter.tpl
@@ -8,7 +8,7 @@
 		<div>
 			<nav id="footerNavigation" class="footerNavigation">
 				<ul>
-					<li id="toTopLink" class="toTopLink"><a href="#top" title="{lang}wcf.global.scrollUp{/lang}"><img src="{@RELATIVE_WCF_DIR}icon/upS.png" alt="{lang}wcf.global.scrollUp{/lang}" /> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
+					<li id="toTopLink" class="toTopLink"><a href="#top" title="{lang}wcf.global.scrollUp{/lang}" class="balloonTooltip"><img src="{@RELATIVE_WCF_DIR}icon/toTop.svg" alt="" /> <span class="invisible">{lang}wcf.global.scrollUp{/lang}</span></a></li>
 				</ul>
 			</nav>
 		</div>
diff --git a/wcfsetup/install/files/acp/templates/setupHeader.tpl b/wcfsetup/install/files/acp/templates/setupHeader.tpl
index 3d81099cd9..0898eac2c5 100644
--- a/wcfsetup/install/files/acp/templates/setupHeader.tpl
+++ b/wcfsetup/install/files/acp/templates/setupHeader.tpl
@@ -56,7 +56,7 @@
 			<!-- header navigation -->
 			<nav class="headerNavigation">
 				<ul>
-					<li id="toBottomLink" class="toBottomLink"><a href="#bottom" title="{lang}wcf.global.scrollDown{/lang}"><img src="{@RELATIVE_WCF_DIR}icon/downS.png" alt="{lang}wcf.global.scrollDown{/lang}" /> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>
+					<li id="toBottomLink" class="toBottomLink"><a href="#bottom" title="{lang}wcf.global.scrollDown{/lang}" class="balloonTooltip"><img src="{@RELATIVE_WCF_DIR}icon/toBottom.svg" alt="" /> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li>
 				</ul>
 			</nav>
 			<!-- /header navigation -->
diff --git a/wcfsetup/install/files/acp/templates/userGroupList.tpl b/wcfsetup/install/files/acp/templates/userGroupList.tpl
index 43e320373d..9df60f9aac 100644
--- a/wcfsetup/install/files/acp/templates/userGroupList.tpl
+++ b/wcfsetup/install/files/acp/templates/userGroupList.tpl
@@ -59,12 +59,12 @@
 					<tr id="groupContainer{@$group->groupID}">
 						<td class="columnIcon">
 							{if $group->isEditable()}
-								<a href="index.php?form=UserGroupEdit&amp;groupID={@$group->groupID}{@SID_ARG_2ND}"><img src="{@RELATIVE_WCF_DIR}icon/editS.png" alt="" title="{lang}wcf.acp.group.edit{/lang}" /></a>
+								<a href="index.php?form=UserGroupEdit&amp;groupID={@$group->groupID}{@SID_ARG_2ND}"><img src="{@RELATIVE_WCF_DIR}icon/editS.png" alt="" title="{lang}wcf.acp.group.edit{/lang}" class="balloonTooltip" /></a>
 							{else}
 								<img src="{@RELATIVE_WCF_DIR}icon/editDisabledS.png" alt="" title="{lang}wcf.acp.group.edit{/lang}" />
 							{/if}
 							{if $group->isDeletable()}
-								<img src="{@RELATIVE_WCF_DIR}icon/deleteS.png" alt="" title="{lang}wcf.acp.group.delete{/lang}" id="groupDeleteIcon{@$group->groupID}" />
+								<img src="{@RELATIVE_WCF_DIR}icon/deleteS.png" id="groupDeleteIcon{@$group->groupID}" alt="" title="{lang}wcf.acp.group.delete{/lang}" class="balloonTooltip" />
 								<script type="text/javascript">
 									//<![CDATA[
 									removeGroup.registerObject({@$group->groupID}, {
diff --git a/wcfsetup/install/files/acp/templates/userList.tpl b/wcfsetup/install/files/acp/templates/userList.tpl
index 2ca59a29a3..b6bad8783d 100644
--- a/wcfsetup/install/files/acp/templates/userList.tpl
+++ b/wcfsetup/install/files/acp/templates/userList.tpl
@@ -43,7 +43,7 @@
 	<img src="{@RELATIVE_WCF_DIR}icon/{if $searchID}userSearch{else}users{/if}L.png" alt="" />
 	<hgroup>
 		<h1>{lang}wcf.acp.user.{if $searchID}search{else}list{/if}{/lang}</h1>
-		<h2>{if $searchID}{lang}wcf.acp.user.search.matches{/lang}{else}{lang}wcf.acp.user.list.count{/lang}{/if}</h2>
+		<h2>{if $searchID}{lang}wcf.acp.user.search.matches{/lang}{else}{lang}wcf.acp.user.list.count{/lang}{/if}</h2><!-- deprecated display -->
 	</hgroup>
 </header>
 
@@ -102,12 +102,12 @@
 						</script>
 						
 						{if $user->editable}
-							<a href="index.php?form=UserEdit&amp;userID={@$user->userID}{@SID_ARG_2ND}"><img src="{@RELATIVE_WCF_DIR}icon/editS.png" alt="" title="{lang}wcf.acp.user.edit{/lang}" /></a>
+							<a href="index.php?form=UserEdit&amp;userID={@$user->userID}{@SID_ARG_2ND}"><img src="{@RELATIVE_WCF_DIR}icon/editS.png" alt="" title="{lang}wcf.acp.user.edit{/lang}" class="balloonTooltip" /></a>
 						{else}
 							<img src="{@RELATIVE_WCF_DIR}icon/editDisabledS.png" alt="" title="{lang}wcf.acp.user.edit{/lang}" />
 						{/if}
 						{if $user->deletable}
-							<a onclick="return confirm('{lang}wcf.acp.user.delete.sure{/lang}')" href="index.php?action=UserDelete&amp;userID={@$user->userID}&amp;url={@$encodedURL}{@SID_ARG_2ND}"><img src="{@RELATIVE_WCF_DIR}icon/deleteS.png" alt="" title="{lang}wcf.acp.user.delete{/lang}" /></a>
+							<a onclick="return confirm('{lang}wcf.acp.user.delete.sure{/lang}')" href="index.php?action=UserDelete&amp;userID={@$user->userID}&amp;url={@$encodedURL}{@SID_ARG_2ND}"><img src="{@RELATIVE_WCF_DIR}icon/deleteS.png" alt="" title="{lang}wcf.acp.user.delete{/lang}" class="balloonTooltip" /></a>
 						{else}
 							<img src="{@RELATIVE_WCF_DIR}icon/deleteDisabledS.png" alt="" title="{lang}wcf.acp.user.delete{/lang}" />
 						{/if}
diff --git a/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl b/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl
index 95be3bb83d..374c6b83f3 100644
--- a/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl
+++ b/wcfsetup/install/files/acp/templates/usersMassProcessing.tpl
@@ -256,8 +256,8 @@
 					</dd>
 				</dl>
 				
-				<dl class="reversed separated">
-					<dt><label for="enableHTML">{lang}wcf.acp.user.sendMail.enableHTML{/lang}</label></dt>
+				<dl>
+					<dt class="reversed"><label for="enableHTML">{lang}wcf.acp.user.sendMail.enableHTML{/lang}</label></dt>
 					<dd>
 						<input type="checkbox" id="enableHTML" name="enableHTML" value="1"{if $enableHTML == 1} checked="checked"{/if}/> 
 					</dd>
diff --git a/wcfsetup/install/files/icon/arrowDownS.png b/wcfsetup/install/files/icon/arrowDownS.png
deleted file mode 100644
index 75dea71a8c..0000000000
Binary files a/wcfsetup/install/files/icon/arrowDownS.png and /dev/null differ
diff --git a/wcfsetup/install/files/icon/arrowRightS.png b/wcfsetup/install/files/icon/arrowRightS.png
deleted file mode 100644
index 1aa447c06d..0000000000
Binary files a/wcfsetup/install/files/icon/arrowRightS.png and /dev/null differ
diff --git a/wcfsetup/install/files/icon/boxCloser.svg b/wcfsetup/install/files/icon/boxCloser.svg
new file mode 100644
index 0000000000..079afe5a3e
--- /dev/null
+++ b/wcfsetup/install/files/icon/boxCloser.svg
@@ -0,0 +1,23 @@
+<?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>Box Closer</title> 
+	<desc>Box Closer Icon</desc> 
+	
+	<!--
+		@author		Harald Szekely 
+		@copyright	2011 WoltLab GmbH 
+		@license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> 
+	--> 
+	
+	<defs>
+		
+	</defs>
+	
+	<g id="IconBoxCloser">
+		<polygon id="Lower" style="fill-rule: evenodd; clip-rule: evenodd; fill: #fff;" points="1,3 7.5014648,14 14,3"/>
+		<polygon id="Upper" style="fill-rule: evenodd; clip-rule: evenodd; fill: #369;" points="1,2.0004883 7.5009766,13 14,2.0004883"/>
+	</g>
+</svg>
diff --git a/wcfsetup/install/files/icon/boxOpener.svg b/wcfsetup/install/files/icon/boxOpener.svg
new file mode 100644
index 0000000000..24eccf1048
--- /dev/null
+++ b/wcfsetup/install/files/icon/boxOpener.svg
@@ -0,0 +1,23 @@
+<?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>Box Opener</title> 
+	<desc>Box Opener Icon</desc> 
+	
+	<!--
+		@author		Harald Szekely 
+		@copyright	2011 WoltLab GmbH 
+		@license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> 
+	--> 
+	
+	<defs>
+		
+	</defs>
+	
+	<g id="IconBoxOpener">
+		<polygon id="Lower" class="Lower" style="fill-rule: evenodd; clip-rule: evenodd; fill: #fff;" points="2,15 13,8.4985352 2,1.9995117"/>
+		<polygon id="Upper" class="Upper" style="fill-rule: evenodd; clip-rule: evenodd; fill: #369;" points="2,14 13,7.4990234 2,1"/>
+	</g>
+</svg>
diff --git a/wcfsetup/install/files/icon/downS.png b/wcfsetup/install/files/icon/downS.png
deleted file mode 100644
index 27740c0394..0000000000
Binary files a/wcfsetup/install/files/icon/downS.png and /dev/null differ
diff --git a/wcfsetup/install/files/icon/toBottom.svg b/wcfsetup/install/files/icon/toBottom.svg
new file mode 100644
index 0000000000..a364809ba0
--- /dev/null
+++ b/wcfsetup/install/files/icon/toBottom.svg
@@ -0,0 +1,27 @@
+<?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>To Bottom</title> 
+	<desc>To Bottom Of Page Icon</desc> 
+	
+	<!--
+		@author		Harald Szekely 
+		@copyright	2011 WoltLab GmbH 
+		@license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> 
+	--> 
+	
+	<defs>
+		
+	</defs>
+	
+	<g id="IconToBottom">
+		<path id="Lower" class="Lower" style="fill-rule: evenodd; clip-rule: evenodd; fill: #fff;" d="M7.5,15C3.909668,15,1,12.0908203,1,8.5
+			c0-3.0673828,2.1411133-5.6367188,5-6.3193359V9H3.5l4,5l4-5.0004883L9,9V2.1806641C11.8652344,2.859375,14,5.4277344,14,8.5
+			C14,12.0908203,11.0898438,15,7.5,15z"/>
+		<path id="Upper" class="Upper" style="fill-rule: evenodd; clip-rule: evenodd; fill: #369;" d="M7.5,14C3.909668,14,1,11.0908203,1,7.5
+			c0-3.0673828,2.1411133-5.6367188,5-6.3193359V8H3.5l4,5l4-5.0004883L9,8V1.1806641C11.8652344,1.859375,14,4.4277344,14,7.5
+			C14,11.0908203,11.0898438,14,7.5,14z"/>
+	</g>
+</svg>
diff --git a/wcfsetup/install/files/icon/toLeft.svg b/wcfsetup/install/files/icon/toLeft.svg
new file mode 100644
index 0000000000..59f9119a1e
--- /dev/null
+++ b/wcfsetup/install/files/icon/toLeft.svg
@@ -0,0 +1,27 @@
+<?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>To Left</title> 
+	<desc>To The Left Icon</desc> 
+	
+	<!--
+		@author		Harald Szekely 
+		@copyright	2011 WoltLab GmbH 
+		@license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> 
+	--> 
+	
+	<defs>
+		
+	</defs>
+	
+	<g id="IconToLeft">
+		<path id="Lower" class="Lower" style="fill-rule: evenodd; clip-rule: evenodd; fill: #fff;" d="M1,8.5C1,4.909668,3.9101562,2,7.5,2
+			c3.0683594,0,5.6367188,2.1411133,6.3203125,5H7V4.5l-5,4l5.0019531,4L7,10h6.8203125C13.140625,12.8652344,10.5722656,15,7.5,15
+			C3.9101562,15,1,12.0898438,1,8.5z"/>
+		<path id="Upper" class="Upper" style="fill-rule: evenodd; clip-rule: evenodd; fill: #369;" d="M1,7.5C1,3.909668,3.9101562,1,7.5,1
+			c3.0683594,0,5.6367188,2.1411133,6.3203125,5H7V3.5l-5,4l5.0019531,4L7,9h6.8203125C13.140625,11.8652344,10.5722656,14,7.5,14
+			C3.9101562,14,1,11.0898438,1,7.5z"/>
+	</g>
+</svg>
diff --git a/wcfsetup/install/files/icon/toRight.svg b/wcfsetup/install/files/icon/toRight.svg
new file mode 100644
index 0000000000..866bd4ab7f
--- /dev/null
+++ b/wcfsetup/install/files/icon/toRight.svg
@@ -0,0 +1,27 @@
+<?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>To Right</title> 
+	<desc>To The Right Icon</desc> 
+	
+	<!--
+		@author		Harald Szekely 
+		@copyright	2011 WoltLab GmbH 
+		@license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> 
+	--> 
+	
+	<defs>
+		
+	</defs>
+	
+	<g id="IconToRight">
+		<path id="Lower" class="Lower" style="fill-rule: evenodd; clip-rule: evenodd; fill: #fff;" d="M14,8.5C14,4.909668,11.0898438,2,7.4995117,2
+			C4.4321289,2,1.862793,4.1411133,1.1801758,7h6.8203125L7.9995117,4.5L13,8.5l-5.0014648,4L7.9995117,10H1.1801758
+			c0.6787109,2.8652344,3.2470703,5,6.3193359,5C11.0898438,15,14,12.0898438,14,8.5z"/>
+		<path id="Upper" class="Upper" style="fill-rule: evenodd; clip-rule: evenodd; fill: #369;" d="M14,7.5C14,3.909668,11.0898438,1,7.4995117,1
+			C4.4321289,1,1.862793,3.1411133,1.1801758,6h6.8203125L7.9995117,3.5L13,7.5l-5.0014648,4L7.9995117,9H1.1801758
+			c0.6787109,2.8652344,3.2470703,5,6.3193359,5C11.0898438,14,14,11.0898438,14,7.5z"/>
+	</g>
+</svg>
diff --git a/wcfsetup/install/files/icon/toTop.svg b/wcfsetup/install/files/icon/toTop.svg
new file mode 100644
index 0000000000..6065fb2882
--- /dev/null
+++ b/wcfsetup/install/files/icon/toTop.svg
@@ -0,0 +1,27 @@
+<?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>To Top</title> 
+	<desc>To Top Of Page Icon</desc> 
+	
+	<!--
+		@author		Harald Szekely 
+		@copyright	2011 WoltLab GmbH 
+		@license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> 
+	--> 
+	
+	<defs>
+		
+	</defs>
+	
+	<g id="IconToTop">
+		<path id="Lower" class="Lower" style="fill-rule: evenodd; clip-rule: evenodd; fill: #fff;" d="M7.5,2C3.909668,2,1,4.909668,1,8.5
+			c0,3.0673828,2.1411133,5.6367188,5,6.3193359V7.9995117L3.5,8l4-5l4,5.0004883L9,8v6.8193359
+			C11.8652344,14.140625,14,11.5722656,14,8.5C14,4.909668,11.0898438,2,7.5,2z"/>
+		<path id="Upper" class="Upper" style="fill-rule: evenodd; clip-rule: evenodd; fill: #369;" d="M7.5,1C3.909668,1,1,3.909668,1,7.5
+			c0,3.0673828,2.1411133,5.6367188,5,6.3193359V6.9995117L3.5,7l4-5l4,5.0004883L9,7v6.8193359
+			C11.8652344,13.140625,14,10.5722656,14,7.5C14,3.909668,11.0898438,1,7.5,1z"/>
+	</g>
+</svg>
diff --git a/wcfsetup/install/files/icon/upS.png b/wcfsetup/install/files/icon/upS.png
deleted file mode 100644
index d5b2bc6533..0000000000
Binary files a/wcfsetup/install/files/icon/upS.png and /dev/null differ