Basic responsive style for dialogs

diff --git a/wcfsetup/install/files/style/ui/dialog.scss b/wcfsetup/install/files/style/ui/dialog.scss
index 7fd26cc8d8f44c26a6dfb45524b74b5ca6375e8b..061bc88cf4a1f84b988920092354ccbc0723a0ba 100644 (file)
--- a/wcfsetup/install/files/style/ui/dialog.scss
+++ b/wcfsetup/install/files/style/ui/dialog.scss
@@ -3,7 +3,6 @@
        bottom: 0;
        left: 0;
        opacity: 0;
-       padding: 100px 0;
        position: fixed;
        right: 0;
        top: 0;
@@ -12,6 +11,10 @@
        will-change: opacity;
        z-index: 399;
        
+       @include large-screen-only {
+               padding: 100px 0;
+       }
+       
        &[aria-hidden=false] {
                opacity: 1;
                transition-delay: 0s;
@@ -42,26 +45,36 @@
 }
 
 .dialogContainer {
-       animation: wcfDialogOut .3s;
-       animation-fill-mode: forwards;
-       box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .3);
-       left: 50%;
-       max-height: 80%;
-       max-width: 80%;
-       min-width: 400px;
-       position: absolute;
-       transform: translateX(-50%);
        z-index: 200;
        
-       &[aria-hidden=false] {
-               animation: wcfDialog .3s;
+       @include small-screen-only {
+               left: 0 !important;
+               position: fixed;
+               right: 0 !important;
+               top: 0 !important;
+       }
+       
+       @include large-screen-only {
+               animation: wcfDialogOut .3s;
                animation-fill-mode: forwards;
+               box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .3);
+               left: 50%;
+               max-height: 80%;
+               max-width: 80%;
+               min-width: 400px;
+               position: absolute;
+               transform: translateX(-50%);
                
-               & ~ .dialogContainer[aria-hidden=false] {
-                       z-index: 50;
+               &[aria-hidden=false] {
+                       animation: wcfDialog .3s;
+                       animation-fill-mode: forwards;
                }
        }
        
+       &[aria-hidden=false]  ~ .dialogContainer[aria-hidden=false] {
+               z-index: 50;
+       }
+       
        > header {
                background-color: $wcfHeaderBackground;
                color: $wcfHeaderText;
@@ -102,7 +115,13 @@
                overflow: auto;
                
                &:not(.dialogContentNoPadding) {
-                       padding: 30px 20px 0 20px;
+                       @include small-screen-only {
+                               padding: 10px;
+                       }
+                       
+                       @include large-screen-only {
+                               padding: 30px 20px 0 20px;
+                       }
                        
                        &::after {
                                content: "";