+.wysiwygTextarea {
+ background-color: transparent !important;
+ border: 1px solid $wcfContentBorderInner !important;
+ color: transparent !important;
+ display: block;
+ height: 238px;
+ width: 100%;
+}
+
.redactor-box {
position: relative;
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;
// 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
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 {
}
/* 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;
}
@include wcfFontSmall;
- &.redactor-button-disabled,
- &.redactor-button-disabled:before,
- &.redactor-button-disabled > i:before {
- color: $wcfButtonDisabledText;
+ &.redactor-button-disabled {
+ background-color: transparent !important;
+ color: $wcfButtonDisabledText !important;
+ cursor: default;
}
- &:hover,
&.redactor-act,
&.dropact {
- background-color: $wcfHeaderMenuBackgroundActive;
+ background-color: $wcfHeaderMenuLinkBackgroundActive;
color: $wcfHeaderMenuLinkActive;
}
+
+ .icon {
+ 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;
+ }
}
}
}
}
}
-.re-bold {
- font-weight: 600;
-}
-
-.re-italic {
- font-style: italic;
-}
-
-.re-underline {
- text-decoration: underline !important;
-}
-
-.re-deleted {
- text-decoration: line-through !important;
-}
-
#redactor-image-box {
border: 1px dashed rgba(0, 0, 0, .5);
display: inline-block;
.redactor-voice-label {
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;
+}
+
+.text-right {
+ 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; }
+.woltlab-color-0000CD { color: #0000CD !important; }
+.woltlab-color-0000FF { color: #0000FF !important; }
+.woltlab-color-006400 { color: #006400 !important; }
+.woltlab-color-008000 { color: #008000 !important; }
+.woltlab-color-008080 { color: #008080 !important; }
+.woltlab-color-00FF00 { color: #00FF00 !important; }
+.woltlab-color-00FFFF { color: #00FFFF !important; }
+.woltlab-color-2F4F4F { color: #2F4F4F !important; }
+.woltlab-color-40E0D0 { color: #40E0D0 !important; }
+.woltlab-color-4B0082 { color: #4B0082 !important; }
+.woltlab-color-696969 { color: #696969 !important; }
+.woltlab-color-800000 { color: #800000 !important; }
+.woltlab-color-800080 { color: #800080 !important; }
+.woltlab-color-808080 { color: #808080 !important; }
+.woltlab-color-8B4513 { color: #8B4513 !important; }
+.woltlab-color-A52A2A { color: #A52A2A !important; }
+.woltlab-color-A9A9A9 { color: #A9A9A9 !important; }
+.woltlab-color-ADD8E6 { color: #ADD8E6 !important; }
+.woltlab-color-AFEEEE { color: #AFEEEE !important; }
+.woltlab-color-B22222 { color: #B22222 !important; }
+.woltlab-color-D3D3D3 { color: #D3D3D3 !important; }
+.woltlab-color-DAA520 { color: #DAA520 !important; }
+.woltlab-color-DDA0DD { color: #DDA0DD !important; }
+.woltlab-color-E6E6FA { color: #E6E6FA !important; }
+.woltlab-color-EE82EE { color: #EE82EE !important; }
+.woltlab-color-F0F8FF { color: #F0F8FF !important; }
+.woltlab-color-F0FFF0 { color: #F0FFF0 !important; }
+.woltlab-color-F0FFFF { color: #F0FFFF !important; }
+.woltlab-color-FAEBD7 { color: #FAEBD7 !important; }
+.woltlab-color-FF0000 { color: #FF0000 !important; }
+.woltlab-color-FF8C00 { color: #FF8C00 !important; }
+.woltlab-color-FFA07A { color: #FFA07A !important; }
+.woltlab-color-FFA500 { color: #FFA500 !important; }
+.woltlab-color-FFD700 { color: #FFD700 !important; }
+.woltlab-color-FFF0F5 { color: #FFF0F5 !important; }
+.woltlab-color-FFFF00 { color: #FFFF00 !important; }
+.woltlab-color-FFFFE0 { color: #FFFFE0 !important; }
+.woltlab-color-FFFFFF { color: #FFFFFF !important; }
+
+/* text color selection */
+.redactor-dropdown-box-woltlabColor {
+ > ul {
+ display: flex !important;
+ flex-wrap: wrap;
+ width: 272px;
+
+ > li:first-child {
+ flex: 0 0 100%;
+ margin-bottom: 10px;
+ }
+ }
+
+ .woltlab-color-selection {
+ flex: 0 0 30px;
+ margin: 2px;
+ overflow: hidden;
+
+ > a {
+ background-color: currentColor !important;
+ color: inherit !important;
+ display: block;
+ height: 30px;
+ width: 30px;
+ }
+ }
+}
+
+/* font size */
+.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;
+}
projects / GitHub / WoltLab / WCF.git / blobdiff