editor.css (11718B)
1 /** 2 * Colors 3 */ 4 /** 5 * Breakpoints & Media Queries 6 */ 7 /** 8 * SCSS Variables. 9 * 10 * Please use variables from this sheet to ensure consistency across the UI. 11 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. 12 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. 13 */ 14 /** 15 * Colors 16 */ 17 /** 18 * Fonts & basic variables. 19 */ 20 /** 21 * Grid System. 22 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ 23 */ 24 /** 25 * Dimensions. 26 */ 27 /** 28 * Shadows. 29 */ 30 /** 31 * Editor widths. 32 */ 33 /** 34 * Block & Editor UI. 35 */ 36 /** 37 * Block paddings. 38 */ 39 /** 40 * React Native specific. 41 * These variables do not appear to be used anywhere else. 42 */ 43 /** 44 * Breakpoint mixins 45 */ 46 /** 47 * Long content fade mixin 48 * 49 * Creates a fading overlay to signify that the content is longer 50 * than the space allows. 51 */ 52 /** 53 * Focus styles. 54 */ 55 /** 56 * Applies editor left position to the selector passed as argument 57 */ 58 /** 59 * Styles that are reused verbatim in a few places 60 */ 61 /** 62 * Allows users to opt-out of animations via OS-level preferences. 63 */ 64 /** 65 * Reset default styles for JavaScript UI based pages. 66 * This is a WP-admin agnostic reset 67 */ 68 /** 69 * Reset the WP Admin page styles for Gutenberg-like pages. 70 */ 71 .wp-block-freeform.block-library-rich-text__tinymce { 72 height: auto; 73 /* Allow height of embed iframes to be calculated properly */ 74 /* Remove blue highlighting of selected images in WebKit */ 75 /* Image captions */ 76 /* WP Views */ 77 } 78 .wp-block-freeform.block-library-rich-text__tinymce p, 79 .wp-block-freeform.block-library-rich-text__tinymce li { 80 line-height: 1.8; 81 } 82 .wp-block-freeform.block-library-rich-text__tinymce ul, 83 .wp-block-freeform.block-library-rich-text__tinymce ol { 84 padding-left: 2.5em; 85 margin-left: 0; 86 } 87 .wp-block-freeform.block-library-rich-text__tinymce blockquote { 88 margin: 0; 89 box-shadow: inset 0 0 0 0 #ddd; 90 border-left: 4px solid #000; 91 padding-left: 1em; 92 } 93 .wp-block-freeform.block-library-rich-text__tinymce pre { 94 white-space: pre-wrap; 95 font-family: Menlo, Consolas, monaco, monospace; 96 font-size: 15px; 97 color: #1e1e1e; 98 } 99 .wp-block-freeform.block-library-rich-text__tinymce > *:first-child { 100 margin-top: 0; 101 } 102 .wp-block-freeform.block-library-rich-text__tinymce > *:last-child { 103 margin-bottom: 0; 104 } 105 .wp-block-freeform.block-library-rich-text__tinymce.mce-edit-focus { 106 outline: none; 107 } 108 .wp-block-freeform.block-library-rich-text__tinymce a { 109 color: var(--wp-admin-theme-color); 110 } 111 .wp-block-freeform.block-library-rich-text__tinymce:focus a[data-mce-selected] { 112 padding: 0 2px; 113 margin: 0 -2px; 114 border-radius: 2px; 115 box-shadow: 0 0 0 1px #e5f5fa; 116 background: #e5f5fa; 117 } 118 .wp-block-freeform.block-library-rich-text__tinymce code { 119 padding: 2px; 120 border-radius: 2px; 121 color: #1e1e1e; 122 background: #f0f0f0; 123 font-family: Menlo, Consolas, monaco, monospace; 124 font-size: 14px; 125 } 126 .wp-block-freeform.block-library-rich-text__tinymce:focus code[data-mce-selected] { 127 background: #ddd; 128 } 129 .wp-block-freeform.block-library-rich-text__tinymce .alignright { 130 /*rtl:ignore*/ 131 float: right; 132 /*rtl:ignore*/ 133 margin: 0.5em 0 0.5em 1em; 134 } 135 .wp-block-freeform.block-library-rich-text__tinymce .alignleft { 136 /*rtl:ignore*/ 137 float: left; 138 /*rtl:ignore*/ 139 margin: 0.5em 1em 0.5em 0; 140 } 141 .wp-block-freeform.block-library-rich-text__tinymce .aligncenter { 142 display: block; 143 margin-left: auto; 144 margin-right: auto; 145 } 146 .wp-block-freeform.block-library-rich-text__tinymce .wp-more-tag { 147 width: 96%; 148 height: 20px; 149 display: block; 150 margin: 15px auto; 151 outline: 0; 152 cursor: default; 153 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAADtgAAAAoBAMAAAA86gLBAAAAJFBMVEVMaXG7u7vBwcHDw8POzs68vLzGxsbMzMy+vr7AwMDQ0NDGxsYKLGzpAAAADHRSTlMA///zWf+/f///TMxNVGuqAAABwklEQVR4Ae3dMXLaQBTH4bfj8UCpx8hq0vgKvgFNemhT6Qo6gg6R+0ZahM2QLmyBJ99XWP9V5+o3jIUcLQEAAAAAAAAAAAAAAAAAAAAAAABQ8j0WL9lfTtlt18uNXAUA8O/KVtfa1tdcrOdSh9gCQAMlh1hMNbZZ1bsrsQWABsrhLRbz7z5in/32UbfUMUbkMQCAh5RfGYv82UdMdZ6HS2wjT2ILAI8r3XmM2B3WvM59vfO2xXYW2yYAENuPU8S+X/N67mKxzy225yaxBQCxLV392UdcvwV0jPVUj98ntkBWT7C7+9u2/V/vGtvXIWJ6/4rtbottWa6Ri0NUT/u72LYttrb97LHdvUXMxxrb8TO2W2TF1rYbbLG1bbGNjMi4+2Sbi1FsbbvNFlvbFtt5fDnE3d9sP1/XeIyV2Nr2U2/guZUuptNrH/dPI9eLB6SaAEBs6wPJf3/PNk9tYgsAYrv/8TFuzx/fvkFqGtrEFgDEdpcZUb7ejXy6ntrEFgDENvL6gsas4vbdyKt4DACI7TxElJv/Z7udpqFNbAFAbKduy2uU2trttM/x28UWAAAAAAAAAAAAAAAAAAAAAAAAAADgDyPwGmGTCZp7AAAAAElFTkSuQmCC); 154 background-size: 1900px 20px; 155 background-repeat: no-repeat; 156 background-position: center; 157 } 158 .wp-block-freeform.block-library-rich-text__tinymce img::selection { 159 background-color: transparent; 160 } 161 .wp-block-freeform.block-library-rich-text__tinymce div.mceTemp { 162 -ms-user-select: element; 163 } 164 .wp-block-freeform.block-library-rich-text__tinymce dl.wp-caption { 165 margin: 0; 166 /* dl browser reset */ 167 max-width: 100%; 168 } 169 .wp-block-freeform.block-library-rich-text__tinymce dl.wp-caption a, 170 .wp-block-freeform.block-library-rich-text__tinymce dl.wp-caption img { 171 display: block; 172 } 173 .wp-block-freeform.block-library-rich-text__tinymce dl.wp-caption, .wp-block-freeform.block-library-rich-text__tinymce dl.wp-caption * { 174 -webkit-user-drag: none; 175 } 176 .wp-block-freeform.block-library-rich-text__tinymce dl.wp-caption .wp-caption-dd { 177 padding-top: 0.5em; 178 margin: 0; 179 /* browser dd reset */ 180 } 181 .wp-block-freeform.block-library-rich-text__tinymce .wpview { 182 width: 99.99%; 183 /* All IE need hasLayout, incl. 11 (ugh, not again!!) */ 184 position: relative; 185 clear: both; 186 margin-bottom: 16px; 187 border: 1px solid transparent; 188 } 189 .wp-block-freeform.block-library-rich-text__tinymce .wpview iframe { 190 display: block; 191 max-width: 100%; 192 background: transparent; 193 } 194 .wp-block-freeform.block-library-rich-text__tinymce .wpview .mce-shim { 195 position: absolute; 196 top: 0; 197 right: 0; 198 bottom: 0; 199 left: 0; 200 } 201 .wp-block-freeform.block-library-rich-text__tinymce .wpview[data-mce-selected="2"] .mce-shim { 202 display: none; 203 } 204 .wp-block-freeform.block-library-rich-text__tinymce .wpview .loading-placeholder { 205 border: 1px dashed #ddd; 206 padding: 10px; 207 } 208 .wp-block-freeform.block-library-rich-text__tinymce .wpview .wpview-error { 209 border: 1px solid #ddd; 210 padding: 1em 0; 211 margin: 0; 212 word-wrap: break-word; 213 } 214 .wp-block-freeform.block-library-rich-text__tinymce .wpview .wpview-error p { 215 margin: 0; 216 text-align: center; 217 } 218 .wp-block-freeform.block-library-rich-text__tinymce .wpview[data-mce-selected] .loading-placeholder, .wp-block-freeform.block-library-rich-text__tinymce .wpview[data-mce-selected] .wpview-error { 219 border-color: transparent; 220 } 221 .wp-block-freeform.block-library-rich-text__tinymce .wpview .dashicons { 222 display: block; 223 margin: 0 auto; 224 width: 32px; 225 height: 32px; 226 font-size: 32px; 227 } 228 .wp-block-freeform.block-library-rich-text__tinymce .wpview.wpview-type-gallery::after { 229 content: ""; 230 display: table; 231 clear: both; 232 } 233 .wp-block-freeform.block-library-rich-text__tinymce .gallery img[data-mce-selected]:focus { 234 outline: none; 235 } 236 .wp-block-freeform.block-library-rich-text__tinymce .gallery a { 237 cursor: default; 238 } 239 .wp-block-freeform.block-library-rich-text__tinymce .gallery { 240 margin: auto -6px; 241 padding: 6px 0; 242 line-height: 1; 243 overflow-x: hidden; 244 } 245 .wp-block-freeform.block-library-rich-text__tinymce .gallery .gallery-item { 246 float: left; 247 margin: 0; 248 text-align: center; 249 padding: 6px; 250 box-sizing: border-box; 251 } 252 .wp-block-freeform.block-library-rich-text__tinymce .gallery .gallery-caption, 253 .wp-block-freeform.block-library-rich-text__tinymce .gallery .gallery-icon { 254 margin: 0; 255 } 256 .wp-block-freeform.block-library-rich-text__tinymce .gallery .gallery-caption { 257 font-size: 13px; 258 margin: 4px 0; 259 } 260 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-1 .gallery-item { 261 width: 100%; 262 } 263 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-2 .gallery-item { 264 width: 50%; 265 } 266 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-3 .gallery-item { 267 width: 33.3333333333%; 268 } 269 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-4 .gallery-item { 270 width: 25%; 271 } 272 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-5 .gallery-item { 273 width: 20%; 274 } 275 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-6 .gallery-item { 276 width: 16.6666666667%; 277 } 278 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-7 .gallery-item { 279 width: 14.2857142857%; 280 } 281 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-8 .gallery-item { 282 width: 12.5%; 283 } 284 .wp-block-freeform.block-library-rich-text__tinymce .gallery-columns-9 .gallery-item { 285 width: 11.1111111111%; 286 } 287 .wp-block-freeform.block-library-rich-text__tinymce .gallery img { 288 max-width: 100%; 289 height: auto; 290 border: none; 291 padding: 0; 292 } 293 294 div[data-type="core/freeform"]::before { 295 transition: border-color 0.1s linear, box-shadow 0.1s linear; 296 border: 1px solid #ddd; 297 outline: 1px solid transparent; 298 } 299 @media (prefers-reduced-motion: reduce) { 300 div[data-type="core/freeform"]::before { 301 transition-duration: 0s; 302 transition-delay: 0s; 303 } 304 } 305 div[data-type="core/freeform"].is-selected::before { 306 border-color: #1e1e1e; 307 } 308 div[data-type="core/freeform"] .block-editor-block-contextual-toolbar + div { 309 margin-top: 0; 310 padding-top: 0; 311 } 312 div[data-type="core/freeform"].is-selected .block-library-rich-text__tinymce::after { 313 content: ""; 314 display: table; 315 clear: both; 316 } 317 318 .mce-toolbar-grp .mce-btn.mce-active button, 319 .mce-toolbar-grp .mce-btn.mce-active:hover button, 320 .mce-toolbar-grp .mce-btn.mce-active i, 321 .mce-toolbar-grp .mce-btn.mce-active:hover i { 322 color: #1e1e1e; 323 } 324 .mce-toolbar-grp .mce-rtl .mce-flow-layout-item.mce-last { 325 margin-right: 0; 326 margin-left: 8px; 327 } 328 .mce-toolbar-grp .mce-btn i { 329 font-style: normal; 330 } 331 332 .block-library-classic__toolbar { 333 display: none; 334 width: auto; 335 margin: 0; 336 position: sticky; 337 z-index: 31; 338 top: 0; 339 border: 1px solid #ddd; 340 border-bottom: none; 341 border-radius: 2px; 342 margin-bottom: 8px; 343 padding: 0; 344 } 345 div[data-type="core/freeform"].is-selected .block-library-classic__toolbar { 346 display: block; 347 border-color: #1e1e1e; 348 } 349 .block-library-classic__toolbar .mce-tinymce { 350 box-shadow: none; 351 } 352 @media (min-width: 600px) { 353 .block-library-classic__toolbar { 354 padding: 0; 355 } 356 } 357 .block-library-classic__toolbar:empty { 358 display: block; 359 background: #f5f5f5; 360 border-bottom: 1px solid #e2e4e7; 361 } 362 .block-library-classic__toolbar:empty::before { 363 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 364 font-size: 13px; 365 content: attr(data-placeholder); 366 color: #555d66; 367 line-height: 37px; 368 padding: 14px; 369 } 370 .block-library-classic__toolbar div.mce-toolbar-grp { 371 border-bottom: 1px solid #1e1e1e; 372 } 373 .block-library-classic__toolbar .mce-tinymce-inline, 374 .block-library-classic__toolbar .mce-tinymce-inline > div, 375 .block-library-classic__toolbar div.mce-toolbar-grp, 376 .block-library-classic__toolbar div.mce-toolbar-grp > div, 377 .block-library-classic__toolbar .mce-menubar, 378 .block-library-classic__toolbar .mce-menubar > div { 379 height: auto !important; 380 width: 100% !important; 381 } 382 .block-library-classic__toolbar .mce-container-body.mce-abs-layout { 383 overflow: visible; 384 } 385 .block-library-classic__toolbar .mce-menubar, 386 .block-library-classic__toolbar div.mce-toolbar-grp { 387 position: static; 388 } 389 .block-library-classic__toolbar .mce-toolbar-grp > div { 390 padding: 1px 3px; 391 } 392 .block-library-classic__toolbar .mce-toolbar-grp .mce-toolbar:not(:first-child) { 393 display: none; 394 } 395 .block-library-classic__toolbar.has-advanced-toolbar .mce-toolbar-grp .mce-toolbar { 396 display: block; 397 }