From: Luzifr <szekely@woltlab.com>
Date: Mon, 6 Feb 2012 18:29:14 +0000 (+0100)
Subject: More animation speed & more style-prefixes
X-Git-Tag: 2.0.0_Beta_1~1360^2~18
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=7fecfefc22425fd74c7eebbdbf52131590a08f6c;p=GitHub%2FWoltLab%2FWCF.git

More animation speed & more style-prefixes

Also added new class for tables; Changed application-list to an ordered
list; Modified some class-names; Removed doubled declarations.
---

diff --git a/wcfsetup/install/files/acp/style/wcf.css b/wcfsetup/install/files/acp/style/wcf.css
index cf310e7a16..9123f00f70 100644
--- a/wcfsetup/install/files/acp/style/wcf.css
+++ b/wcfsetup/install/files/acp/style/wcf.css
@@ -3244,8 +3244,7 @@ tr .columnIcon img {
 	width: 16px;
 }
 
-.bigList tr .columnIcon img,
-.wcf-bigList tr .columnIcon img {
+.big tr .columnIcon img {
 	height: 24px;
 	width: 24px;
 }
@@ -4371,11 +4370,11 @@ button[disabled='disabled'] {
 
 /* Globals */
 
-.infoPackageApplication {
+.wcf-infoPackageApplication {
 	position: relative;
 }
 
-.infoPackageApplication img.packageApplicationIcon {
+.wcf-infoPackageApplication img.wcf-packageApplicationIcon {
 	position: absolute;
 	top: 30px;
 	left: 25px;
@@ -4383,18 +4382,18 @@ button[disabled='disabled'] {
 	height: 96px;
 }
 
-.infoPackageApplication div {
+.wcf-infoPackageApplication div {
 	margin-bottom: -15px;
 	margin-left: 30px;
 }
 
-.infoPackageApplication footer {
+.wcf-infoPackageApplication footer {
 	position: relative;
 	right: -15px;
 	bottom: -15px;
 }
 
-.infoPackageApplication footer nav {
+.wcf-infoPackageApplication footer nav {
 	/* General toggle switch for package nav-bar orientation (options: left|center|right) */
 	text-align: right;
 }
@@ -4405,7 +4404,7 @@ button[disabled='disabled'] {
 
 /* Globals */
 
-.infoPackagePlugin {
+.wcf-infoPackagePlugin {
 	text-align: center;
 	border: 1px solid rgba(204, 204, 204, 1);
 	border-radius: 7px;
@@ -4424,11 +4423,11 @@ button[disabled='disabled'] {
 	transition: background, border, color .1s linear;
 }
 
-.infoPackagePlugin a {
+.wcf-infoPackagePlugin a {
 	text-decoration: none;
 }
 
-.infoPackagePlugin > div > a {
+.wcf-infoPackagePlugin > div > a {
 	color: rgba(153, 153, 153, 1);
 	background-size: 96px;
 	background-position: center 70%;
@@ -4440,11 +4439,11 @@ button[disabled='disabled'] {
 	height: 148px;
 }
 
-.infoPackagePlugin:hover > div > a {
+.wcf-infoPackagePlugin:hover > div > a {
 	color: rgba(102, 102, 102, 1);
 }
 
-.infoPackagePlugin > div > a > h1 { /* ToDo: h1 inside a ??? */
+.wcf-infoPackagePlugin > div > a > h1 { /* ToDo: h1 inside a ??? */
 	font-size: 100%;
 	font-weight: bold;
 	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
@@ -4456,7 +4455,7 @@ button[disabled='disabled'] {
 	z-index: 100;
 }
 
-.infoPackagePlugin:hover > div > a > h1 {
+.wcf-infoPackagePlugin:hover > div > a > h1 {
 	border-bottom: 1px solid rgba(204, 204, 204, 1);
 	
 	background-color: rgba(0, 0, 0, .015);
@@ -4467,12 +4466,12 @@ button[disabled='disabled'] {
 	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .05));
 }
 
-.infoPackagePlugin footer {
+.wcf-infoPackagePlugin footer {
 	margin-top: -22px;
 	width: 100%;
 }
 
-.infoPackagePlugin > div > a > small {
+.wcf-infoPackagePlugin > div > a > small {
 	font-size: 85%;
 	font-weight: normal;
 	text-shadow: none;
@@ -4492,15 +4491,15 @@ button[disabled='disabled'] {
 	transition: opacity .1s linear;
 }
 
-.infoPackagePlugin:hover > div > a > small {
+.wcf-infoPackagePlugin:hover > div > a > small {
 	background-color: rgba(255, 255, 255, .9);
 	z-index: 10;
 	opacity: 1;
 }
 
-/* SmallButtonBar */
+/* Small Button Bar */
 
-.infoPackagePlugin .smallButtonBar {
+.wcf-infoPackagePlugin .wcf-smallButtonBar {
 	text-align: center !important;
 	border-top: 1px solid rgba(204, 204, 204, 1);
 	border-radius: 0 0 7px 7px;
@@ -4517,12 +4516,12 @@ button[disabled='disabled'] {
 	z-index: 100;
 }
 
-.infoPackagePlugin .smallButtonBar li {
+.wcf-infoPackagePlugin .wcf-smallButtonBar li {
 	display: inline;
 	position: relative;
 }
 
-.infoPackagePlugin .smallButtonBar li span {
+.wcf-infoPackagePlugin .wcf-smallButtonBar li span {
 	/* Removes the button-caption */
 	position: absolute;
 	left: -9000px;
@@ -4536,8 +4535,8 @@ button[disabled='disabled'] {
 
 @media screen and (min-width: 480px), screen and (min-device-width: 480px) {
 	
-	.infoPackageApplication footer nav,
-	.infoPackagePlugin footer nav {
+	.wcf-infoPackageApplication footer nav,
+	.wcf-infoPackagePlugin footer nav {
 		opacity: 0;
 		
 		-webkit-transition: opacity .1s linear;
@@ -4547,8 +4546,8 @@ button[disabled='disabled'] {
 		transition: opacity .1s linear;
 	}
 	
-	.infoPackageApplication:hover footer nav,
-	.infoPackagePlugin:hover footer nav {
+	.wcf-infoPackageApplication:hover footer nav,
+	.wcf-infoPackagePlugin:hover footer nav {
 		opacity: 1;
 	}
 	
@@ -4556,8 +4555,8 @@ button[disabled='disabled'] {
 
 @media screen and (max-width: 480px), screen and (max-device-width: 480px) {
 	
-	.infoPackageApplication footer nav,
-	.infoPackagePlugin footer nav {
+	.wcf-infoPackageApplication footer nav,
+	.wcf-infoPackagePlugin footer nav {
 		opacity: 1;
 	}
 	
diff --git a/wcfsetup/install/files/acp/templates/acpSessionLogList.tpl b/wcfsetup/install/files/acp/templates/acpSessionLogList.tpl
index 3508cc84c6..84876a1f93 100644
--- a/wcfsetup/install/files/acp/templates/acpSessionLogList.tpl
+++ b/wcfsetup/install/files/acp/templates/acpSessionLogList.tpl
@@ -17,7 +17,7 @@
 			<h1>{lang}wcf.acp.sessionLog.list{/lang} <span class="badge" title="{lang}wcf.acp.sessionLog.list.count{/lang}">{#$items}</span></h1>
 		</hgroup>
 		
-		<table>
+		<table class="wcf-table">
 			<thead>
 				<tr>
 					<th class="columnSessionLogID{if $sortField == 'sessionLogID'} active{/if}"><a href="{link controller='ACPSessionLogList'}pageNo={@$pageNo}&sortField=sessionLogID&sortOrder={if $sortField == 'sessionLogID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}{if $sortField == 'sessionLogID'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
diff --git a/wcfsetup/install/files/acp/templates/cacheList.tpl b/wcfsetup/install/files/acp/templates/cacheList.tpl
index 8bcfbb09a2..87e4d69b0b 100644
--- a/wcfsetup/install/files/acp/templates/cacheList.tpl
+++ b/wcfsetup/install/files/acp/templates/cacheList.tpl
@@ -67,7 +67,7 @@
 				<h1>{$cache} <span class="badge" title="{lang}wcf.acp.cache.data.files.count{/lang}">{#$files|count}</span></h1>
 			</hgroup>
 			
-			<table id="cache{@$cacheIndex}">
+			<table id="cache{@$cacheIndex}" class="wcf-table">
 				<thead>
 					<tr>
 						<th class="columnTitle">{lang}wcf.acp.cache.list.name{/lang}</th>
diff --git a/wcfsetup/install/files/acp/templates/cronjobList.tpl b/wcfsetup/install/files/acp/templates/cronjobList.tpl
index bacee73704..7d1d0d8933 100644
--- a/wcfsetup/install/files/acp/templates/cronjobList.tpl
+++ b/wcfsetup/install/files/acp/templates/cronjobList.tpl
@@ -58,7 +58,7 @@
 			<h1>{lang}wcf.acp.cronjob.list{/lang} <span class="badge" title="{lang}wcf.acp.cronjob.list.count{/lang}">{#$items}</span></h1>
 		</hgroup>
 		
-		<table>
+		<table class="wcf-table">
 			<thead>
 				<tr>
 					<th class="columnID columnCronjobID{if $sortField == 'cronjobID'} active{/if}" colspan="2"><a href="{link controller='CronjobList'}pageNo={@$pageNo}&sortField=cronjobID&sortOrder={if $sortField == 'cronjobID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}{if $sortField == 'cronjobID'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
diff --git a/wcfsetup/install/files/acp/templates/cronjobLogList.tpl b/wcfsetup/install/files/acp/templates/cronjobLogList.tpl
index 50bb2ffb16..b0242b126b 100644
--- a/wcfsetup/install/files/acp/templates/cronjobLogList.tpl
+++ b/wcfsetup/install/files/acp/templates/cronjobLogList.tpl
@@ -19,7 +19,7 @@
 				<h1>{lang}wcf.acp.cronjob.log{/lang} <span class="badge" title="{lang}wcf.acp.cronjob.log.count{/lang}">{#$items}</span></h1>
 			</hgroup>
 			
-			<table>
+			<table class="wcf-table">
 				<thead>
 					<tr>
 						<th class="columnID columnCronjobID{if $sortField == 'cronjobID'} active{/if}"><a href="{link controller='CronjobLogList'}pageNo={@$pageNo}&sortField=cronjobID&sortOrder={if $sortField == 'cronjobID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}{if $sortField == 'cronjobID'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
diff --git a/wcfsetup/install/files/acp/templates/footer.tpl b/wcfsetup/install/files/acp/templates/footer.tpl
index bdd2d80625..4f92c1f195 100644
--- a/wcfsetup/install/files/acp/templates/footer.tpl
+++ b/wcfsetup/install/files/acp/templates/footer.tpl
@@ -5,9 +5,9 @@
 	<!-- /MAIN -->
 	
 	<!-- FOOTER -->
-	<footer id="pageFooter" class="pageFooter">
+	<footer id="pageFooter" class="wcf-pageFooter">
 		<div>
-			<nav id="footerNavigation" class="footerNavigation">
+			<nav id="footerNavigation" class="wcf-footerNavigation">
 				<ul>
 					<li id="toTopLink" class="toTopLink"><a href="{@$__wcf->getAnchor('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>
diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 9a1955ad1e..c920e98573 100644
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -29,7 +29,6 @@
 	<style type="text/css">
 		@import url("{@RELATIVE_WCF_DIR}acp/style/wcf.css") screen;
 		{*
-		
 		@import url("{@RELATIVE_WCF_DIR}acp/style/style-{@$__wcf->getLanguage()->getPageDirection()}.css") screen;
 	
 		@import url("{@RELATIVE_WCF_DIR}acp/style/print.css") print;
@@ -75,7 +74,7 @@
 			new WCF.Date.Time();
 			new WCF.Effect.SmoothScroll();
 			new WCF.Effect.BalloonTooltip();
-			$('<span class="pointer"><span></span></span>').appendTo('.innerError');
+			$('<span class="pointer"><span></span></span>').appendTo('.wcf-innerError');
 			
 			$('#sidebarContent').wcfSidebar();
 		});
@@ -86,11 +85,11 @@
 <body id="tpl{$templateName|ucfirst}">
 	<a id="top"></a>
 	<!-- HEADER -->
-	<header id="pageHeader" class="pageHeader">
+	<header id="pageHeader" class="wcf-pageHeader">
 		<div>
 			{if $__wcf->user->userID}
 				<!-- top menu -->
-				<nav id="topMenu" class="topMenu">
+				<nav id="topMenu" class="wcf-topMenu">
 					<div>
 						<ul>
 							<li id="userMenu" class="userMenu"><!-- ToDo: We need an ID and/or class for each list here, this ID may also change! -->
@@ -106,7 +105,7 @@
 			{/if}
 			
 			<!-- logo -->
-			<div id="logo" class="logo">
+			<div id="logo" class="wcf-logo">
 				<!-- clickable area -->
 				<a href="{link controller='Index'}{/link}">
 					<h1>WoltLab Community Framework 2.0 Alpha 1</h1>
@@ -134,7 +133,7 @@
 			<!-- /main menu -->
 			
 			<!-- header navigation -->
-			<nav class="headerNavigation">
+			<nav class="wcf-headerNavigation">
 				<div>
 					<ul>
 						<li id="toBottomLink" class="toBottomLink"><a href="{@$__wcf->getAnchor('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>
@@ -153,15 +152,15 @@
 				<!-- SIDEBAR -->
 				<aside class="wcf-sidebar">
 					<!-- sidebar menu -->
-					<nav id="sidebarContent" class="sidebarContent">
+					<nav id="sidebarContent" class="wcf-sidebarContent">
 						{content}
 							{* work-around for unknown core-object during WCFSetup *}
 							{if PACKAGE_ID}
 								{foreach from=$__wcf->getACPMenu()->getMenuItems('') item=parentMenuItem}
-									<div id="{$parentMenuItem->menuItem}-container" style="display: none;" class="menuContainer collapsible" data-parent-menu-item="{$parentMenuItem->menuItem}">
+									<div id="{$parentMenuItem->menuItem}-container" style="display: none;" class="wcf-menuContainer collapsible" data-parent-menu-item="{$parentMenuItem->menuItem}">
 										{foreach from=$__wcf->getACPMenu()->getMenuItems($parentMenuItem->menuItem) item=menuItem}
-											<h1 class="menuHeader" data-menu-item="{$menuItem->menuItem}">{lang}{@$menuItem->menuItem}{/lang}</h1>
-											<div class="sidebarContentGroup">
+											<h1 class="wcf-menuHeader" data-menu-item="{$menuItem->menuItem}">{lang}{@$menuItem->menuItem}{/lang}</h1>
+											<div class="wcf-sidebarContentGroup">
 												<ul id="{$menuItem->menuItem}">
 													{foreach from=$__wcf->getACPMenu()->getMenuItems($menuItem->menuItem) item=menuItemCategory}
 														{if $__wcf->getACPMenu()->getMenuItems($menuItemCategory->menuItem)|count > 0}
diff --git a/wcfsetup/install/files/acp/templates/packageAutoUpdateList.tpl b/wcfsetup/install/files/acp/templates/packageAutoUpdateList.tpl
index 1606338f88..be2b3bba1b 100644
--- a/wcfsetup/install/files/acp/templates/packageAutoUpdateList.tpl
+++ b/wcfsetup/install/files/acp/templates/packageAutoUpdateList.tpl
@@ -36,8 +36,8 @@
 		<p class="wcf-info">{lang}wcf.acp.packageUpdate.noneAvailable{/lang}</p>
 	{else}
 		{foreach from=$availableUpdates item=availableUpdate}<!-- ToDo: Style! -->
-			<article class="message wcf-content"{if $availableUpdate.version.updateType == 'security'} style="border-color: #c00"{/if}>
-				<div class="messageInner container-{cycle name='styles' values='1,2'}"><!-- ToDo: Remove cycle -->
+			<article class="wcf-message wcf-content"{if $availableUpdate.version.updateType == 'security'} style="border-color: #c00"{/if}>
+				<div class="container-{cycle name='styles' values='1,2'}"><!-- ToDo: Remove cycle -->
 					<hgroup class="wcf-subHeading">
 						<h1>
 							<label>
@@ -47,7 +47,7 @@
 						</h1>
 					</hgroup>
 
-					<div class="messageBody">
+					<div class="wcf-messageBody">
 						<dl>
 							<dt><label>{lang}wcf.acp.packageUpdate.currentVersion{/lang}</label></dt>
 							<dd>{$availableUpdate.packageVersion}</dd>
diff --git a/wcfsetup/install/files/acp/templates/packageInstallationConfirm.tpl b/wcfsetup/install/files/acp/templates/packageInstallationConfirm.tpl
index 9bf2a26d5e..c7653f65e4 100644
--- a/wcfsetup/install/files/acp/templates/packageInstallationConfirm.tpl
+++ b/wcfsetup/install/files/acp/templates/packageInstallationConfirm.tpl
@@ -109,7 +109,7 @@
 			<h1>{lang}wcf.acp.package.view.requiredPackages{/lang} <span class="wcf-badge" title="{lang}wcf.acp.package.view.requiredPackages.description{/lang}">{#$requiredPackages|count}</span></h1>
 		</hgroup>
 		
-		<table>
+		<table class="wcf-table">
 			<thead>
 				<tr>
 					<th class="columnTitle">{lang}wcf.acp.package.list.name{/lang}</th>
diff --git a/wcfsetup/install/files/acp/templates/packageList.tpl b/wcfsetup/install/files/acp/templates/packageList.tpl
index 7a486d810d..91fc368b9f 100644
--- a/wcfsetup/install/files/acp/templates/packageList.tpl
+++ b/wcfsetup/install/files/acp/templates/packageList.tpl
@@ -42,49 +42,53 @@
 			<h1>Installed Applications</h1>
 		</hgroup>
 		
-		{foreach from=$applications key=packageID item=package}
-			<fieldset class="infoPackageApplication">
-				<legend>{$package->getName()}</legend>
-				
-				<img src="{@RELATIVE_WCF_DIR}icon/wcfIcon1.svg" alt="" title="{$package->getName()}" class="wcf-packageApplicationIcon" />
-				
-				<div>
-					<dl>
-						<dt>package</dt>
-						<dd>{$package->package}</dd>
-					</dl>
-					<dl>
-						<dt>installed version</dt>
-						<dd>{$package->packageVersion}</dd>
-					</dl>
-					<dl>
-						<dt>create date</dt>
-						<dd>{$package->packageDate|date}</dd>
-					</dl>
-					<dl>
-						<dt>install date</dt>
-						<dd>{@$package->installDate|time}</dd>
-					</dl>
-					<dl>
-						<dt>update date</dt>
-						<dd>{@$package->updateDate|time}</dd>
-					</dl>
-					<dl>
-						<dt>creator</dt>
-						<dd>{if $package->authorURL}<a href="dereferrer.php?url={$package->authorURL|rawurlencode}">{/if}{$package->author}{if $package->authorURL}</a>{/if}</dd>
-					</dl>
-				</div>
-				
-				<footer>
-					<nav>
-						<ul class="wcf-smallButtons">
-							<li><a href="{link controller='PackageView' id=$packageID}{/link}" class="wcf-button"><img src="{@RELATIVE_WCF_DIR}icon/info1.svg" alt="" title="{lang}wcf.acp.package.view.button.update{/lang}" /> <span>Details</span></a></li>
-							<li><a href="{link controller='PackageStartInstall' id=$packageID}action=update{/link}" class="wcf-button"><img src="{@RELATIVE_WCF_DIR}icon/update1.svg" alt="" title="{lang}wcf.acp.package.view.button.update{/lang}" /> <span>Update</span></a></li>
-						</ul>
-					</nav>
-				</footer>
-			</fieldset>
-		{/foreach}
+		<ol class="wcf-applicationList">
+			{foreach from=$applications key=packageID item=package}
+				<li class="wcf-infoPackageApplication">
+					<fieldset>
+						<legend>{$package->getName()}</legend>
+						
+						<img src="{@RELATIVE_WCF_DIR}icon/wcfIcon1.svg" alt="" title="{$package->getName()}" class="wcf-packageApplicationIcon" />
+						
+						<div>
+							<dl>
+								<dt>package</dt>
+								<dd>{$package->package}</dd>
+							</dl>
+							<dl>
+								<dt>installed version</dt>
+								<dd>{$package->packageVersion}</dd>
+							</dl>
+							<dl>
+								<dt>create date</dt>
+								<dd>{$package->packageDate|date}</dd>
+							</dl>
+							<dl>
+								<dt>install date</dt>
+								<dd>{@$package->installDate|time}</dd>
+							</dl>
+							<dl>
+								<dt>update date</dt>
+								<dd>{@$package->updateDate|time}</dd>
+							</dl>
+							<dl>
+								<dt>creator</dt>
+								<dd>{if $package->authorURL}<a href="dereferrer.php?url={$package->authorURL|rawurlencode}">{/if}{$package->author}{if $package->authorURL}</a>{/if}</dd>
+							</dl>
+						</div>
+						
+						<footer>
+							<nav>
+								<ul class="wcf-smallButtons">
+									<li><a href="{link controller='PackageView' id=$packageID}{/link}" class="wcf-button"><img src="{@RELATIVE_WCF_DIR}icon/info1.svg" alt="" title="{lang}wcf.acp.package.view.button.update{/lang}" /> <span>Details</span></a></li>
+									<li><a href="{link controller='PackageStartInstall' id=$packageID}action=update{/link}" class="wcf-button"><img src="{@RELATIVE_WCF_DIR}icon/update1.svg" alt="" title="{lang}wcf.acp.package.view.button.update{/lang}" /> <span>Update</span></a></li>
+								</ul>
+							</nav>
+						</footer>
+					</fieldset>
+				</li>
+			{/foreach}
+		</ol>
 	</div>
 	
 	{hascontent}
@@ -98,7 +102,7 @@
 			</div>
 			
 			<section>
-				<ol class="packageListPlugin">
+				<ol class="wcf-pluginList">
 					{content}
 						{include file='packageListPlugins'}
 					{/content}
diff --git a/wcfsetup/install/files/acp/templates/packageListDetailed.tpl b/wcfsetup/install/files/acp/templates/packageListDetailed.tpl
index c3f03c987b..44386d6995 100644
--- a/wcfsetup/install/files/acp/templates/packageListDetailed.tpl
+++ b/wcfsetup/install/files/acp/templates/packageListDetailed.tpl
@@ -41,7 +41,7 @@
 			<h1><a href="{link controller='PackageList'}{/link}">{lang}wcf.acp.package.list{/lang} <span class="badge" title="{lang}wcf.acp.package.list.count{/lang}">{#$items}</span></a></h1>
 		</hgroup>
 		
-		<table>
+		<table class="wcf-table">
 			<thead>
 				<tr>
 					<th colspan="2" class="columnID{if $sortField == 'packageID'} active{/if}"><a href="{link controller='PackageListDetailed'}pageNo={@$pageNo}&sortField=packageID&sortOrder={if $sortField == 'packageID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}{if $sortField == 'packageID'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
diff --git a/wcfsetup/install/files/acp/templates/packageListPlugins.tpl b/wcfsetup/install/files/acp/templates/packageListPlugins.tpl
index 0b70011310..729bd9c690 100644
--- a/wcfsetup/install/files/acp/templates/packageListPlugins.tpl
+++ b/wcfsetup/install/files/acp/templates/packageListPlugins.tpl
@@ -1,5 +1,5 @@
 {foreach from=$plugins key=packageID item=package}
-	<li class="infoPackagePlugin">
+	<li class="wcf-infoPackagePlugin">
 		<div>
 			<a href="{link controller='PackageView' id=$packageID}{/link}" title="{$package->getName()}" style="background-image: url('{@RELATIVE_WCF_DIR}icon/packagePlugin1.svg');">
 				<h1>{$package->getName()}</h1>
@@ -9,10 +9,10 @@
 		
 		<footer>
 			<nav>
-				<ul class="smallButtonBar">
-					<li><a href="{link controller='PackageView' id=$packageID}{/link}" title="{$package->getName()}" class="balloonTooltip"><img src="{@RELATIVE_WCF_DIR}icon/info1.svg" alt="" /> <span>Update</span></a></li>
-					<li><a href="{link controller='PackageStartInstall' id=$packageID}action=update{/link}" title="{lang}wcf.acp.package.view.button.update{/lang}" class="balloonTooltip"><img src="{@RELATIVE_WCF_DIR}icon/update1.svg" alt="" /> <span>Update</span></a></li>
-					<li title="{lang}wcf.acp.package.view.button.uninstall{/lang}" class="balloonTooltip separator"><img src="{@RELATIVE_WCF_DIR}icon/delete1.svg" alt="" class="uninstallButton" data-object-id="{@$package->packageID}" /> <span>Delete</span></li>
+				<ul class="wcf-smallButtonBar">
+					<li><a href="{link controller='PackageView' id=$packageID}{/link}" title="{$package->getName()}" class="wcf-balloonTooltip"><img src="{@RELATIVE_WCF_DIR}icon/info1.svg" alt="" /> <span>Update</span></a></li>
+					<li><a href="{link controller='PackageStartInstall' id=$packageID}action=update{/link}" title="{lang}wcf.acp.package.view.button.update{/lang}" class="wcf-balloonTooltip"><img src="{@RELATIVE_WCF_DIR}icon/update1.svg" alt="" /> <span>Update</span></a></li>
+					<li title="{lang}wcf.acp.package.view.button.uninstall{/lang}" class="wcf-balloonTooltip separator"><img src="{@RELATIVE_WCF_DIR}icon/delete1.svg" alt="" class="uninstallButton" data-object-id="{@$package->packageID}" /> <span>Delete</span></li>
 				</ul>
 			</nav>
 		</footer>
diff --git a/wcfsetup/install/files/acp/templates/packageUninstallationDependencies.tpl b/wcfsetup/install/files/acp/templates/packageUninstallationDependencies.tpl
index c35849b12a..646e7187d3 100644
--- a/wcfsetup/install/files/acp/templates/packageUninstallationDependencies.tpl
+++ b/wcfsetup/install/files/acp/templates/packageUninstallationDependencies.tpl
@@ -75,7 +75,7 @@
 			<h1>{lang}wcf.acp.package.view.dependentPackages{/lang}</h1>
 		</hgroup>
 		
-		<table>
+		<table class="wcf-table">
 			<thead>
 				<tr>
 					<th colspan="2" class="columnID">{lang}wcf.acp.package.list.id{/lang}</th>
diff --git a/wcfsetup/install/files/acp/templates/packageUpdateSearchResult.tpl b/wcfsetup/install/files/acp/templates/packageUpdateSearchResult.tpl
index 96291f8fda..afe91fc12d 100644
--- a/wcfsetup/install/files/acp/templates/packageUpdateSearchResult.tpl
+++ b/wcfsetup/install/files/acp/templates/packageUpdateSearchResult.tpl
@@ -15,8 +15,8 @@
 
 <form method="post" action="{link controller='PackageUpdate'}{/link}">
 	{foreach from=$packages item=package}
-		<article class="message wcf-content">
-			<div class="messageInner"><!-- ToDo! -->
+		<article class="wcf-message wcf-content">
+			<div><!-- ToDo! -->
 				<hgroup class="wcf-subHeading">
 					<h1>
 						{if $package.isApplication == 1}
@@ -30,7 +30,7 @@
 					</h1>
 				<hgroup>
 
-				<div class="messageBody">
+				<div class="wcf-messageBody">
 					<dl>
 						<dt><label for="packageVersion-{$package.package}">{lang}wcf.acp.package.list.version{/lang}</label></dt>
 						<dd>
diff --git a/wcfsetup/install/files/acp/templates/packageView.tpl b/wcfsetup/install/files/acp/templates/packageView.tpl
index 39bed9d8e2..ffd27d0ccb 100644
--- a/wcfsetup/install/files/acp/templates/packageView.tpl
+++ b/wcfsetup/install/files/acp/templates/packageView.tpl
@@ -119,7 +119,7 @@
 						<h2>{lang}wcf.acp.package.view.requiredPackages.description{/lang}</h2>
 					</hgroup>
 		
-					<table class="wcf-border wcf-boxTitle">
+					<table class="wcf-table wcf-border wcf-boxTitle">
 						<thead>
 							<tr>
 								<th colspan="2" class="columnID">{lang}wcf.acp.package.list.id{/lang}</th>
@@ -179,7 +179,7 @@
 						<h2>{lang}wcf.acp.package.view.dependentPackages.description{/lang}</h2>
 					</hgroup>
 		
-					<table class="wcf-border wcf-boxTitle">
+					<table class="wcf-table wcf-border wcf-boxTitle">
 						<thead>
 							<tr>
 								<th colspan="2" class="columnID">{lang}wcf.acp.package.list.id{/lang}</th>
diff --git a/wcfsetup/install/files/acp/templates/updateServerList.tpl b/wcfsetup/install/files/acp/templates/updateServerList.tpl
index ba94772b1e..210347e36a 100644
--- a/wcfsetup/install/files/acp/templates/updateServerList.tpl
+++ b/wcfsetup/install/files/acp/templates/updateServerList.tpl
@@ -38,7 +38,7 @@
 			<h1>{lang}wcf.acp.updateServer.list{/lang} <span class="wcf-badge" title="{lang}wcf.acp.updateServer.list.count{/lang}">{#$items}</span></h1>
 		</hgroup>
 		
-		<table class="wcf-bigList">
+		<table class="wcf-table big">
 			<thead>
 				<tr>
 					<th class="columnID columnPackageUpdateServerID{if $sortField == 'packageUpdateServerID'} active{/if}" colspan="2"><a href="{link controller='UpdateServerList'}pageNo={@$pageNo}&sortField=packageUpdateServerID&sortOrder={if $sortField == 'packageUpdateServerID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}{if $sortField == 'packageUpdateServerID'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
diff --git a/wcfsetup/install/files/acp/templates/userGroupList.tpl b/wcfsetup/install/files/acp/templates/userGroupList.tpl
index acd3a01c7a..41f060b39c 100644
--- a/wcfsetup/install/files/acp/templates/userGroupList.tpl
+++ b/wcfsetup/install/files/acp/templates/userGroupList.tpl
@@ -32,7 +32,7 @@
 			<h1>{lang}wcf.acp.group.list{/lang} <span class="badge" title="{lang}wcf.acp.group.list.count{/lang}">{#$items}</span></h1>
 		</hgroup>
 		
-		<table class="wcf-bigList">
+		<table class="wcf-table big">
 			<thead>
 				<tr>
 					<th class="columnID columnGroupID{if $sortField == 'groupID'} active{/if}" colspan="2"><a href="{link controller='UserGroupList'}pageNo={@$pageNo}&sortField=groupID&sortOrder={if $sortField == 'groupID' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}{if $sortField == 'groupID'} <img src="{@RELATIVE_WCF_DIR}icon/sort{@$sortOrder}.svg" alt="" />{/if}</a></th>
diff --git a/wcfsetup/install/files/acp/templates/userList.tpl b/wcfsetup/install/files/acp/templates/userList.tpl
index 0d7a1546c3..2102527232 100644
--- a/wcfsetup/install/files/acp/templates/userList.tpl
+++ b/wcfsetup/install/files/acp/templates/userList.tpl
@@ -44,7 +44,7 @@
 	</nav>
 	
 	{hascontent}
-		<table class="jsClipboardContainer" data-type="com.woltlab.wcf.user">
+		<table class="wcf-table jsClipboardContainer" data-type="com.woltlab.wcf.user">
 			<thead>
 				<tr>
 					<th class="columnMark"><label><input type="checkbox" class="jsClipboardMarkAll" /></label></th>
diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index d71dcb8a14..e079831a19 100644
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -1062,7 +1062,7 @@ WCF.Action.Proxy.prototype = {
 		// fade in overlay
 		if (!this._loadingOverlayVisible) {
 			this._loadingOverlayVisible = true;
-			this._loadingOverlay.stop(true, true).fadeIn(200, $.proxy(function() {
+			this._loadingOverlay.stop(true, true).fadeIn(100, $.proxy(function() {
 				new WCF.PeriodicalExecuter($.proxy(this._hideLoadingOverlay, this), 100);
 			}, this));
 		}
@@ -1076,12 +1076,12 @@ WCF.Action.Proxy.prototype = {
 	_hideLoadingOverlay: function(pe) {
 		this._loadingOverlayVisibleTimer += 100;
 		
-		if (this._activeRequests == 0 && this._loadingOverlayVisibleTimer >= 1000) {
+		if (this._activeRequests == 0 && this._loadingOverlayVisibleTimer >= 100) {
 			this._loadingOverlayVisible = false;
 			this._loadingOverlayVisibleTimer = 0;
 			pe.stop();
 
-			this._loadingOverlay.fadeOut(200);
+			this._loadingOverlay.fadeOut(100);
 		}
 	},
 	
@@ -3922,11 +3922,11 @@ $.widget('ui.wcfSidebar', {
 	 * Creates a new toggleable sidebar.
 	 */
 	_create: function() {
-		this.element.wrap('<div class="collapsibleSidebar"></div>');
+		this.element.wrap('<div class="wcf-collapsibleSidebar"></div>');
 		this._container = this.element.parents('aside:eq(0)');
 		
 		// create toggle button
-		this._button = $('<span class="collapsibleSidebarButton" title="' + WCF.Language.get('wcf.global.button.collapsible') + '"><span></span></span>').appendTo(this._container);
+		this._button = $('<span class="wcf-collapsibleSidebarButton" title="' + WCF.Language.get('wcf.global.button.collapsible') + '"><span></span></span>').appendTo(this._container);
 
 		// bind event
 		this._button.click($.proxy(this._toggle, this));
@@ -4436,7 +4436,7 @@ $.widget('ui.wcfDialog', {
 			$content.animate({
 				height: ($contentDimensions.height) + 'px',
 				width: ($contentDimensions.width) + 'px'
-			}, 600, function() {
+			}, 200, function() {
 				// remove static dimensions
 				$content.css({
 					height: 'auto',
@@ -4451,7 +4451,7 @@ $.widget('ui.wcfDialog', {
 			this._container.animate({
 				left: $leftOffset + 'px',
 				top: $topOffset + 'px'
-			}, 600, $.proxy(function() {
+			}, 200, $.proxy(function() {
 				this._isRendering = false;
 			}));
 		}
@@ -4608,7 +4608,7 @@ $.widget('ui.wcfPages', {
 		if (this.options.nextDisabledIcon === null) this.options.nextDisabledIcon = WCF.Icon.get('wcf.icon.next.disabled');
 		if (this.options.arrowDownIcon === null) this.options.arrowDownIcon = WCF.Icon.get('wcf.icon.arrow.down');
 		
-		this.element.addClass('pageNavigation');
+		this.element.addClass('wcf-pageNavigation');
 		
 		this._render();
 	},