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 4ff264bac93f4bfba2f90b65fab137a9b5a2d856..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,15 +95,28 @@
        // 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;
        }
        
        img {
-               // TODO: the border was required for 'Old Redactor', check if it is still a thing
-               border: 1px solid transparent;
                max-width: 100%;
+               
+               &:not(.smiley) {
+                       // show cursor to indicate editing capability excluding smilies
+                       cursor: pointer;
+               }
        }
        
        // TODO: this is somewhat out of sync
@@ -105,73 +131,6 @@
                        vertical-align: top;
                }
        }
-       
-       .quoteBox {
-               position: relative;
-               
-               &::before {
-                       content: attr(data-quote-header);
-                       cursor: pointer;
-                       display: block;
-                       font-style: normal;
-                       margin-bottom: 20px;
-                       padding-right: 25px;
-                       
-                       @include wcfFontHeadline;
-               }
-               
-               &::after {
-                       content: $fa-var-pencil;
-                       cursor: pointer;
-                       font-family: FontAwesome;
-                       position: absolute;
-                       right: 24px;
-                       top: 10px;
-                       
-                       @include wcfFontHeadline;
-               }
-       }
-       
-       .TODO_codeBox {
-               overflow: hidden;
-               position: relative;
-               
-               .redactorEditCodeBox {
-                       background-color: rgba(255, 255, 255, .8);
-                       bottom: 0;
-                       left: 0;
-                       opacity: 0;
-                       position: absolute;
-                       right: 0;
-                       text-align: center;
-                       top: 0;
-                       transition: opacity .12s linear;
-                       z-index: 200;
-                       
-                       > div {
-                               cursor: pointer;
-                               left: 50%;
-                               padding: 1em 3em;
-                               position: absolute;
-                               top: 50%;
-                               transform: translate(-50%, -50%);
-                       }
-               }
-               
-               &:hover .redactorEditCodeBox {
-                       opacity: 1;
-               }
-               
-               ol {
-                       margin-bottom: 0;
-                       margin-top: 0;
-               }
-       }
-       
-       &.TODO_msie .quoteBox {
-               /* resets 'hasLayout' causing IE to display resize handle and wonky editing behavior */
-               min-height: 0;
-       }
 }
 
 .redactor-dropdown {
@@ -204,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;
        }
@@ -220,21 +179,6 @@
                flex: 0 0 auto;
                margin-bottom: 1px;
                
-               &.redactor-toolbar-separator {
-                       margin-left: 11px;
-                       position: relative;
-                       
-                       &::before {
-                               bottom: 7px;
-                               border-left: 1px solid $wcfHeaderMenuLink;
-                               content: "";
-                               left: -6px;
-                               opacity: .6;
-                               position: absolute;
-                               top: 7px;
-                       }
-               }
-               
                > a {
                        color: $wcfHeaderMenuLink;
                        display: block;
@@ -250,10 +194,9 @@
                                cursor: default;
                        }
                        
-                       &:hover,
                        &.redactor-act,
                        &.dropact {
-                               background-color: $wcfHeaderMenuBackgroundActive;
+                               background-color: $wcfHeaderMenuLinkBackgroundActive;
                                color: $wcfHeaderMenuLinkActive;
                        }
                        
@@ -261,6 +204,38 @@
                                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 {
+                       &.redactor-toolbar-separator {
+                               margin-left: 11px;
+                               position: relative;
+                               
+                               &::before {
+                                       bottom: 7px;
+                                       border-left: 1px solid $wcfHeaderMenuLink;
+                                       content: "";
+                                       left: -6px;
+                                       opacity: .6;
+                                       position: absolute;
+                                       top: 7px;
+                               }
+                       }
+               }
+               
+               @include screen-xs {
+                       &[data-show-on-mobile="false"] {
+                               display: none;
+                       }
                }
        }
 }
@@ -389,6 +364,19 @@
        display: none;
 }
 
+/* format */
+.redactor-dropdown-h2 {
+       @include wcfFontSection;
+}
+
+.redactor-dropdown-h3 {
+       @include wcfFontHeadline;
+}
+
+.redactor-dropdown-h4 {
+       // TODO: add styling
+}
+
 /* alignment plugin */
 .text-center {
        text-align: center;
@@ -398,6 +386,16 @@
        text-align: right;
 }
 
+/* alignment plugin / custom value */
+.text-justify {
+       text-align: justify;
+       
+       -webkit-hyphens: auto;
+       -moz-hyphens: auto;
+       -ms-hyphens: auto;
+       hyphens: auto;
+}
+
 /* text color */
 .woltlab-color-000000 { color: #000000 !important; }
 .woltlab-color-000080 { color: #000080 !important; }
@@ -469,10 +467,25 @@
 }
 
 /* font size */
-.woltlab-size-8 { font-size: 8px; }
-.woltlab-size-10 { font-size: 10px; }
-.woltlab-size-12 { font-size: 12px; }
-.woltlab-size-14 { font-size: 14px; }
-.woltlab-size-18 { font-size: 18px; }
-.woltlab-size-24 { font-size: 24px; }
-.woltlab-size-36 { font-size: 36px; }
+.woltlab-size-8 { font-size: 8pt; }
+.woltlab-size-10 { font-size: 10pt; }
+.woltlab-size-12 { font-size: 12pt; }
+.woltlab-size-14 { font-size: 14pt; }
+.woltlab-size-18 { font-size: 18pt; }
+.woltlab-size-24 { font-size: 24pt; }
+.woltlab-size-36 { font-size: 36pt; }
+
+/* image float */
+.messageFloatObjectLeft {
+       float: left;
+       margin: 0 20px 20px 0;
+}
+
+.messageFloatObjectRight {
+       float: right;
+       margin: 0 0 20px 20px;
+}
+
+.smiley {
+       margin: 0 1px;
+}