Add optimizations for mobile devices (WIP)

diff --git a/wcfsetup/install/files/style/button.less b/wcfsetup/install/files/style/button.less
index a5f05998fb6039ad33f652b67f45634cd65154d3..09575acda5c3b675fcf06c7538fb93837ba88234 100644 (file)
--- 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 78e0ea4b748d64181e2bb04691159171c2845c9f..0740bce20d63763e50aad725d42e38511d9aea0e 100644 (file)
--- 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 4a57069912f8a7b263267b0ece9335fcd608d84f..b09939530468c8bd5f563393cbca1f3054906aaf 100644 (file)
--- 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 5c798fb7211a62aafb90d3cce06bd94ce383d39a..54b1ce01bddd6b3fb299a69093fb98caa57e3058 100644 (file)
--- 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 2141cd6b2e6ebb66b30b95e26f7885f076f66cd8..7e1eb3526795759e60435b80288ab39a55b048ca 100644 (file)
--- 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) {