[Summary view] [Print] [Text view]

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