From: Marcel Werk <burntime@woltlab.com>
Date: Fri, 22 Mar 2013 17:13:34 +0000 (+0100)
Subject: Add optimizations for mobile devices (WIP)
X-Git-Tag: 2.0.0_Beta_1~418
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=a85aced3bc77c5036854e7466524b6c32c8d3ee8;p=GitHub%2FWoltLab%2FWCF.git

Add optimizations for mobile devices (WIP)
---

diff --git a/wcfsetup/install/files/style/button.less b/wcfsetup/install/files/style/button.less
index a5f05998fb..09575acda5 100644
--- a/wcfsetup/install/files/style/button.less
+++ b/wcfsetup/install/files/style/button.less
@@ -154,7 +154,7 @@ button.active:hover {
 	}
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-width: 640px) {
 	.buttonGroup {
 		min-height: 21px;
 		min-width: 21px;
diff --git a/wcfsetup/install/files/style/dialog.less b/wcfsetup/install/files/style/dialog.less
index 78e0ea4b74..0740bce20d 100644
--- a/wcfsetup/install/files/style/dialog.less
+++ b/wcfsetup/install/files/style/dialog.less
@@ -11,7 +11,7 @@
 	.boxShadow(0, 1px, rgba(0, 0, 0, .3), 23px);
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-width: 640px) {
 	.dialogContainer {
 		border: 0;
 		left: 0 !important;
@@ -69,7 +69,7 @@
 	}
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-width: 640px) {
 	.dialogTitlebar {
 		.borderRadius(0);
 	}
@@ -115,7 +115,7 @@
 	}
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-width: 640px) {
 	.dialogContent {
 		max-height: none !important;
 		
diff --git a/wcfsetup/install/files/style/form.less b/wcfsetup/install/files/style/form.less
index 4a57069912..b099395304 100644
--- a/wcfsetup/install/files/style/form.less
+++ b/wcfsetup/install/files/style/form.less
@@ -126,7 +126,7 @@ dl:not(.plain) {
 	}
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-width: 640px) {
 	dl:not(.plain) {
 		> dt {
 			float: none;
@@ -356,7 +356,7 @@ textarea {
 	width: 100%;
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-width: 640px) {
 	textarea {
 		max-height: 160px;
 	}
diff --git a/wcfsetup/install/files/style/global.less b/wcfsetup/install/files/style/global.less
index 5c798fb721..54b1ce01bd 100644
--- a/wcfsetup/install/files/style/global.less
+++ b/wcfsetup/install/files/style/global.less
@@ -215,12 +215,12 @@ body > iframe[src="about:blank"] {
 	
 	&.top:after {
 		border-bottom-width: 0;
-		border-top-color: rgba(0, 0, 0, .4);
+		border-top-color: rgba(0, 0, 0, .3);
 		bottom: -10px;
 	}
 	
 	&.bottom:after {
-		border-bottom-color: rgba(0, 0, 0, .4);
+		border-bottom-color: rgba(0, 0, 0, .3);
 		border-top-width: 0;
 		top: -10px;
 	}
diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index 2141cd6b2e..7e1eb35267 100644
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -3,7 +3,7 @@
 	padding: 0 @wcfLayoutFluidGap;
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-width: 640px) {
 	.layoutFluid {
 		padding: 0;
 	}
@@ -14,7 +14,7 @@
 	width: @wcfLayoutFixedWidth;
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-width: 640px) {
 	.layoutFixed {
 		width: auto;
 	}
@@ -136,7 +136,7 @@
 	}
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-width: 640px) {
 	.userPanel {
 		height: auto;
 		
@@ -224,7 +224,7 @@
 	}
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-width: 640px) {
 	.logo {
 		display: none;
 	}
@@ -324,7 +324,7 @@
 	}
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-width: 640px) {
 	.mainMenu {
 		float: left;
 		min-height: 38px;
@@ -459,7 +459,7 @@
 	}
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-width: 640px) {
 	.navigation {
 		> ul.navigationIcons,
 		> ul.navigationItems {
@@ -479,7 +479,7 @@
 	border-top: 1px solid @wcfContainerBorderColor;
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-width: 640px) {
 	.navigationHeader {
 		background-color: transparent;
 		border: 0;
@@ -569,7 +569,7 @@
 	}
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-width: 640px) {
 	.footerContent {
 		margin: 0 @wcfGapMedium;
 	}
@@ -674,7 +674,7 @@
 	}
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-width: 640px) {
 	/* hide sidebar */
 	#main {
 		margin-top: 96px;
@@ -739,7 +739,7 @@
 	}
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-width: 640px) {
 	.boxHeadline {
 		margin-top: @wcfGapSmall;
 	}
@@ -780,7 +780,7 @@
 	padding: @wcfGapMedium @wcfGapLarge @wcfGapMedium;
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-width: 640px) {
 	.containerPadding {
 		padding: @wcfGapSmall;
 	}
@@ -869,7 +869,7 @@
 	}
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-width: 640px) {
 	.containerList {
 		> li {
 			padding: @wcfGapSmall;
@@ -1097,7 +1097,7 @@
 	}
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-width: 640px) {
 	.content > .breadcrumbs {
 		display: none;
 	}
@@ -1655,7 +1655,7 @@ ul.inlineDataList {
 	}
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-width: 640px) {
 	.pageNavigation {
 		> ul > li {
 			&:not(.skip):not(.active) {