Better fix for clickable space

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / ui / redactor.scss

diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss
index 1b882e7fb9a38492bad706207b92f5516b34898e..3fe35a33dce8feec525cb1d502fadb089b96323c 100644 (file)
--- a/wcfsetup/install/files/style/ui/redactor.scss
+++ b/wcfsetup/install/files/style/ui/redactor.scss
@@ -67,6 +67,19 @@
        outline: none;
        overflow: auto;
        
+       * {
+               // setting min-width to "0" inside contenteditable causes
+               // IE11 to do all sort of funny things
+               min-width: auto;
+       }
+       
+       &.redactor-placeholder::after {
+               color: $wcfContentDimmedText;
+               content: attr(placeholder);
+               display: block;
+               position: absolute;
+       }
+       
        & + textarea {
                border-width: 0;
                box-shadow: none;
@@ -82,6 +95,16 @@
        // enforce styles used in messages
        @extend .htmlContent;
        
+       > :not(p) {
+               &:first-child {
+                       margin-top: 10px !important;
+               }
+               
+               &:last-child {
+                       margin-bottom: 20px !important;
+               }
+       }
+       
        // remove margin top for the first paragraph in the editor to avoid a weird looking offset a the top
        > p:first-child {
                margin-top: 0;
@@ -140,8 +163,8 @@
 }
 
 /* disable auto zoom in mobile safari */
-@include screen-sm-down {
-       .redactor-editor + textarea {
+@include screen-md-down {
+       .redactor-editor {
                font-size: 16px;
                max-height: 500px;
        }
@@ -171,7 +194,6 @@
                                cursor: default;
                        }
                        
-                       &:hover,
                        &.redactor-act,
                        &.dropact {
                                background-color: $wcfHeaderMenuLinkBackgroundActive;
@@ -182,6 +204,15 @@
                                color: inherit;
                                cursor: inherit !important;
                        }
+                       
+                       @include screen-lg {
+                               // hover-styles on mobile are misleading as they stay much longer
+                               // due to the click-like behavior
+                               &:hover {
+                                       background-color: $wcfHeaderMenuLinkBackgroundActive;
+                                       color: $wcfHeaderMenuLinkActive;
+                               }
+                       }
                }
                
                @include screen-sm-up {
@@ -454,3 +485,7 @@
        float: right;
        margin: 0 0 20px 20px;
 }
+
+.smiley {
+       margin: 0 1px;
+}