Improved autosave feature

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

diff --git a/wcfsetup/install/files/style/redactor.less b/wcfsetup/install/files/style/redactor.less
index 88de50e4d71c7b0e7ac52dd6699908ff71fb9fe3..0e8b735c70bb0c675e7ad37cdf3b9605d901889f 100644 (file)
--- a/wcfsetup/install/files/style/redactor.less
+++ b/wcfsetup/install/files/style/redactor.less
@@ -66,6 +66,33 @@
        > .innerError {
                margin: -1px;
        }
+       
+       > .redactorAutosaveNotice {
+               border: 1px solid @wcfContainerBorderColor;
+               border-width: 1px 0 0 1px;
+               bottom: 0;
+               font-size: 1rem;
+               opacity: 0;
+               padding: @wcfGapSmall;
+               position: absolute;
+               right: 0;
+               transition: visibility 0s linear .3s, opacity .3s linear;
+               visibility: hidden;
+               
+               &.open {
+                       opacity: 1;
+                       visibility: visible;
+                       transition-delay: 0s;
+               }
+               
+               &.redactorAutosaveNoticeRestore > span.fa-check {
+                       margin-right: @wcfGapSmall;
+               }
+               
+               > span.redactorAutosaveMessage {
+                       padding: 0 @wcfGapSmall;
+               }
+       }
 }
 
 .redactor-editor {
@@ -125,12 +152,12 @@
                        position: relative;
                        
                        > .redactorQuoteEdit {
-                               bottom: -7px;
-                               left: -14px;
-                               right: -14px;
-                               top: -14px;
-                               padding-top: 14px;
-                               padding-left: 14px;
+                               bottom: -@wcfGapSmall;
+                               left: -@wcfGapMedium;
+                               right: -@wcfGapMedium;
+                               top: -@wcfGapMedium;
+                               padding-top: @wcfGapMedium;
+                               padding-left: @wcfGapMedium;
                                position: absolute;
                        }
                }
@@ -244,6 +271,19 @@
        z-index: 5;
 }
 
+#redactor-image-resizer {
+       background-color: rgba(0, 0, 0, 1);
+       border: 1px solid rgba(255, 255, 255, 1);
+       bottom: -4px;
+       cursor: nw-resize;
+       height: 8px;
+       line-height: 1;
+       position: absolute;
+       right: -5px;
+       width: 8px;
+       z-index: 10;
+}
+
 .redactorAttachmentContainer {
        background-color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(238, 238, 238, 1);
@@ -271,6 +311,7 @@
                                        color: @wcfButtonColor;
                                        display: block;
                                        font-size: @wcfBaseFontSize;
+                                       line-height: @wcfBaseLineHeight;
                                        margin-bottom: -1px;
                                        padding: 7px 14px 8px 14px;
                                        text-decoration: none;
@@ -285,6 +326,10 @@
                                        &:hover {
                                                color: @wcfLinkColor;
                                        }
+                                       
+                                       > span.icon {
+                                               display: none;
+                                       }
                                }
                                
                                &.active {
@@ -373,6 +418,18 @@
        }
 }
 
+@media only screen and (max-width: 800px) {
+       .messageTabMenu > nav > ul > li:not(.active) > a {
+               > span.icon {
+                       display: block;
+               }
+               
+               > span:not(.icon) {
+                       display: none;
+               }
+       }
+}
+
 /* fix for Firefox - fieldsets are set to display: table-column which cause an odd gap between the fieldset
    and the next element, similar to gaps with display: inline-block and font-size > 0 */
 @-moz-document url-prefix() {