[Summary view] [Print] [Text view]

   1  /**
   2   * Copyright (c) Tiny Technologies, Inc. All rights reserved.
   3   * Licensed under the LGPL or a commercial license.
   4   * For LGPL see License.txt in the project root for license information.
   5   * For commercial licenses see https://www.tiny.cloud/
   6   */
   7  /* RESET all the things! */
   8  .tinymce-mobile-outer-container {
   9    all: initial;
  10    display: block;
  11  }
  12  .tinymce-mobile-outer-container * {
  13    border: 0;
  14    box-sizing: initial;
  15    cursor: inherit;
  16    float: none;
  17    line-height: 1;
  18    margin: 0;
  19    outline: 0;
  20    padding: 0;
  21    -webkit-tap-highlight-color: transparent;
  22    /* TBIO-3691, stop the gray flicker on touch. */
  23    text-shadow: none;
  24    white-space: nowrap;
  25  }
  26  .tinymce-mobile-icon-arrow-back::before {
  27    content: "\e5cd";
  28  }
  29  .tinymce-mobile-icon-image::before {
  30    content: "\e412";
  31  }
  32  .tinymce-mobile-icon-cancel-circle::before {
  33    content: "\e5c9";
  34  }
  35  .tinymce-mobile-icon-full-dot::before {
  36    content: "\e061";
  37  }
  38  .tinymce-mobile-icon-align-center::before {
  39    content: "\e234";
  40  }
  41  .tinymce-mobile-icon-align-left::before {
  42    content: "\e236";
  43  }
  44  .tinymce-mobile-icon-align-right::before {
  45    content: "\e237";
  46  }
  47  .tinymce-mobile-icon-bold::before {
  48    content: "\e238";
  49  }
  50  .tinymce-mobile-icon-italic::before {
  51    content: "\e23f";
  52  }
  53  .tinymce-mobile-icon-unordered-list::before {
  54    content: "\e241";
  55  }
  56  .tinymce-mobile-icon-ordered-list::before {
  57    content: "\e242";
  58  }
  59  .tinymce-mobile-icon-font-size::before {
  60    content: "\e245";
  61  }
  62  .tinymce-mobile-icon-underline::before {
  63    content: "\e249";
  64  }
  65  .tinymce-mobile-icon-link::before {
  66    content: "\e157";
  67  }
  68  .tinymce-mobile-icon-unlink::before {
  69    content: "\eca2";
  70  }
  71  .tinymce-mobile-icon-color::before {
  72    content: "\e891";
  73  }
  74  .tinymce-mobile-icon-previous::before {
  75    content: "\e314";
  76  }
  77  .tinymce-mobile-icon-next::before {
  78    content: "\e315";
  79  }
  80  .tinymce-mobile-icon-large-font::before,
  81  .tinymce-mobile-icon-style-formats::before {
  82    content: "\e264";
  83  }
  84  .tinymce-mobile-icon-undo::before {
  85    content: "\e166";
  86  }
  87  .tinymce-mobile-icon-redo::before {
  88    content: "\e15a";
  89  }
  90  .tinymce-mobile-icon-removeformat::before {
  91    content: "\e239";
  92  }
  93  .tinymce-mobile-icon-small-font::before {
  94    content: "\e906";
  95  }
  96  .tinymce-mobile-icon-readonly-back::before,
  97  .tinymce-mobile-format-matches::after {
  98    content: "\e5ca";
  99  }
 100  .tinymce-mobile-icon-small-heading::before {
 101    content: "small";
 102  }
 103  .tinymce-mobile-icon-large-heading::before {
 104    content: "large";
 105  }
 106  .tinymce-mobile-icon-small-heading::before,
 107  .tinymce-mobile-icon-large-heading::before {
 108    font-family: sans-serif;
 109    font-size: 80%;
 110  }
 111  .tinymce-mobile-mask-edit-icon::before {
 112    content: "\e254";
 113  }
 114  .tinymce-mobile-icon-back::before {
 115    content: "\e5c4";
 116  }
 117  .tinymce-mobile-icon-heading::before {
 118    /* TODO: Translate */
 119    content: "Headings";
 120    font-family: sans-serif;
 121    font-size: 80%;
 122    font-weight: bold;
 123  }
 124  .tinymce-mobile-icon-h1::before {
 125    content: "H1";
 126    font-weight: bold;
 127  }
 128  .tinymce-mobile-icon-h2::before {
 129    content: "H2";
 130    font-weight: bold;
 131  }
 132  .tinymce-mobile-icon-h3::before {
 133    content: "H3";
 134    font-weight: bold;
 135  }
 136  .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask {
 137    align-items: center;
 138    display: flex;
 139    justify-content: center;
 140    background: rgba(51, 51, 51, 0.5);
 141    height: 100%;
 142    position: absolute;
 143    top: 0;
 144    width: 100%;
 145  }
 146  .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container {
 147    align-items: center;
 148    border-radius: 50%;
 149    display: flex;
 150    flex-direction: column;
 151    font-family: sans-serif;
 152    font-size: 1em;
 153    justify-content: space-between;
 154  }
 155  .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .mixin-menu-item {
 156    align-items: center;
 157    display: flex;
 158    justify-content: center;
 159    border-radius: 50%;
 160    height: 2.1em;
 161    width: 2.1em;
 162  }
 163  .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section {
 164    align-items: center;
 165    display: flex;
 166    justify-content: center;
 167    flex-direction: column;
 168    font-size: 1em;
 169  }
 170  @media only screen and (min-device-width:700px) {
 171    .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section {
 172      font-size: 1.2em;
 173    }
 174  }
 175  .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon {
 176    align-items: center;
 177    display: flex;
 178    justify-content: center;
 179    border-radius: 50%;
 180    height: 2.1em;
 181    width: 2.1em;
 182    background-color: white;
 183    color: #207ab7;
 184  }
 185  .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon::before {
 186    content: "\e900";
 187    font-family: 'tinymce-mobile', sans-serif;
 188  }
 189  .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section:not(.tinymce-mobile-mask-tap-icon-selected) .tinymce-mobile-mask-tap-icon {
 190    z-index: 2;
 191  }
 192  .tinymce-mobile-android-container.tinymce-mobile-android-maximized {
 193    background: #ffffff;
 194    border: none;
 195    bottom: 0;
 196    display: flex;
 197    flex-direction: column;
 198    left: 0;
 199    position: fixed;
 200    right: 0;
 201    top: 0;
 202  }
 203  .tinymce-mobile-android-container:not(.tinymce-mobile-android-maximized) {
 204    position: relative;
 205  }
 206  .tinymce-mobile-android-container .tinymce-mobile-editor-socket {
 207    display: flex;
 208    flex-grow: 1;
 209  }
 210  .tinymce-mobile-android-container .tinymce-mobile-editor-socket iframe {
 211    display: flex !important;
 212    flex-grow: 1;
 213    height: auto !important;
 214  }
 215  .tinymce-mobile-android-scroll-reload {
 216    overflow: hidden;
 217  }
 218  :not(.tinymce-mobile-readonly-mode) > .tinymce-mobile-android-selection-context-toolbar {
 219    margin-top: 23px;
 220  }
 221  .tinymce-mobile-toolstrip {
 222    background: #fff;
 223    display: flex;
 224    flex: 0 0 auto;
 225    z-index: 1;
 226  }
 227  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar {
 228    align-items: center;
 229    background-color: #fff;
 230    border-bottom: 1px solid #cccccc;
 231    display: flex;
 232    flex: 1;
 233    height: 2.5em;
 234    width: 100%;
 235    /* Make it no larger than the toolstrip, so that it needs to scroll */
 236  }
 237  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group {
 238    align-items: center;
 239    display: flex;
 240    height: 100%;
 241    flex-shrink: 1;
 242  }
 243  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group > div {
 244    align-items: center;
 245    display: flex;
 246    height: 100%;
 247    flex: 1;
 248  }
 249  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-exit-container {
 250    background: #f44336;
 251  }
 252  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-toolbar-scrollable-group {
 253    flex-grow: 1;
 254  }
 255  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item {
 256    padding-left: 0.5em;
 257    padding-right: 0.5em;
 258  }
 259  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button {
 260    align-items: center;
 261    display: flex;
 262    height: 80%;
 263    margin-left: 2px;
 264    margin-right: 2px;
 265  }
 266  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected {
 267    background: #c8cbcf;
 268    color: #cccccc;
 269  }
 270  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:first-of-type,
 271  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:last-of-type {
 272    background: #207ab7;
 273    color: #eceff1;
 274  }
 275  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar {
 276    /* Note, this file is imported inside .tinymce-mobile-context-toolbar, so that prefix is on everything here. */
 277  }
 278  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group {
 279    align-items: center;
 280    display: flex;
 281    height: 100%;
 282    flex: 1;
 283    padding-bottom: 0.4em;
 284    padding-top: 0.4em;
 285    /* Make any buttons appearing on the left and right display in the centre (e.g. color edges) */
 286    /* For widgets like the colour picker, use the whole height */
 287  }
 288  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog {
 289    display: flex;
 290    min-height: 1.5em;
 291    overflow: hidden;
 292    padding-left: 0;
 293    padding-right: 0;
 294    position: relative;
 295    width: 100%;
 296  }
 297  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain {
 298    display: flex;
 299    height: 100%;
 300    transition: left cubic-bezier(0.4, 0, 1, 1) 0.15s;
 301    width: 100%;
 302  }
 303  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen {
 304    display: flex;
 305    flex: 0 0 auto;
 306    justify-content: space-between;
 307    width: 100%;
 308  }
 309  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen input {
 310    font-family: Sans-serif;
 311  }
 312  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container {
 313    display: flex;
 314    flex-grow: 1;
 315    position: relative;
 316  }
 317  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container .tinymce-mobile-input-container-x {
 318    -ms-grid-row-align: center;
 319        align-self: center;
 320    background: inherit;
 321    border: none;
 322    border-radius: 50%;
 323    color: #888;
 324    font-size: 0.6em;
 325    font-weight: bold;
 326    height: 100%;
 327    padding-right: 2px;
 328    position: absolute;
 329    right: 0;
 330  }
 331  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container.tinymce-mobile-input-container-empty .tinymce-mobile-input-container-x {
 332    display: none;
 333  }
 334  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous,
 335  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next {
 336    align-items: center;
 337    display: flex;
 338  }
 339  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous::before,
 340  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next::before {
 341    align-items: center;
 342    display: flex;
 343    font-weight: bold;
 344    height: 100%;
 345    padding-left: 0.5em;
 346    padding-right: 0.5em;
 347  }
 348  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous.tinymce-mobile-toolbar-navigation-disabled::before,
 349  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next.tinymce-mobile-toolbar-navigation-disabled::before {
 350    visibility: hidden;
 351  }
 352  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item {
 353    color: #cccccc;
 354    font-size: 10px;
 355    line-height: 10px;
 356    margin: 0 2px;
 357    padding-top: 3px;
 358  }
 359  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item.tinymce-mobile-dot-active {
 360    color: #c8cbcf;
 361  }
 362  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-font::before,
 363  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-heading::before {
 364    margin-left: 0.5em;
 365    margin-right: 0.9em;
 366  }
 367  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-font::before,
 368  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-heading::before {
 369    margin-left: 0.9em;
 370    margin-right: 0.5em;
 371  }
 372  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider {
 373    display: flex;
 374    flex: 1;
 375    margin-left: 0;
 376    margin-right: 0;
 377    padding: 0.28em 0;
 378    position: relative;
 379  }
 380  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container {
 381    align-items: center;
 382    display: flex;
 383    flex-grow: 1;
 384    height: 100%;
 385  }
 386  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container .tinymce-mobile-slider-size-line {
 387    background: #cccccc;
 388    display: flex;
 389    flex: 1;
 390    height: 0.2em;
 391    margin-bottom: 0.3em;
 392    margin-top: 0.3em;
 393  }
 394  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container {
 395    padding-left: 2em;
 396    padding-right: 2em;
 397  }
 398  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container {
 399    align-items: center;
 400    display: flex;
 401    flex-grow: 1;
 402    height: 100%;
 403  }
 404  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container .tinymce-mobile-slider-gradient {
 405    background: linear-gradient(to right, hsl(0, 100%, 50%) 0%, hsl(60, 100%, 50%) 17%, hsl(120, 100%, 50%) 33%, hsl(180, 100%, 50%) 50%, hsl(240, 100%, 50%) 67%, hsl(300, 100%, 50%) 83%, hsl(0, 100%, 50%) 100%);
 406    display: flex;
 407    flex: 1;
 408    height: 0.2em;
 409    margin-bottom: 0.3em;
 410    margin-top: 0.3em;
 411  }
 412  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-black {
 413    /* Not part of theming */
 414    background: black;
 415    height: 0.2em;
 416    margin-bottom: 0.3em;
 417    margin-top: 0.3em;
 418    width: 1.2em;
 419  }
 420  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-white {
 421    /* Not part of theming */
 422    background: white;
 423    height: 0.2em;
 424    margin-bottom: 0.3em;
 425    margin-top: 0.3em;
 426    width: 1.2em;
 427  }
 428  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb {
 429    /* vertically centering trick (margin: auto, top: 0, bottom: 0). On iOS and Safari, if you leave
 430       * out these values, then it shows the thumb at the top of the spectrum. This is probably because it is
 431       * absolutely positioned with only a left value, and not a top. Note, on Chrome it seems to be fine without
 432       * this approach.
 433      */
 434    align-items: center;
 435    background-clip: padding-box;
 436    background-color: #455a64;
 437    border: 0.5em solid rgba(136, 136, 136, 0);
 438    border-radius: 3em;
 439    bottom: 0;
 440    color: #fff;
 441    display: flex;
 442    height: 0.5em;
 443    justify-content: center;
 444    left: -10px;
 445    margin: auto;
 446    position: absolute;
 447    top: 0;
 448    transition: border 120ms cubic-bezier(0.39, 0.58, 0.57, 1);
 449    width: 0.5em;
 450  }
 451  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb.tinymce-mobile-thumb-active {
 452    border: 0.5em solid rgba(136, 136, 136, 0.39);
 453  }
 454  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper,
 455  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group > div {
 456    align-items: center;
 457    display: flex;
 458    height: 100%;
 459    flex: 1;
 460  }
 461  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper {
 462    flex-direction: column;
 463    justify-content: center;
 464  }
 465  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item {
 466    align-items: center;
 467    display: flex;
 468  }
 469  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item:not(.tinymce-mobile-serialised-dialog) {
 470    height: 100%;
 471  }
 472  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-container {
 473    display: flex;
 474  }
 475  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input {
 476    background: #ffffff;
 477    border: none;
 478    border-radius: 0;
 479    color: #455a64;
 480    flex-grow: 1;
 481    font-size: 0.85em;
 482    padding-bottom: 0.1em;
 483    padding-left: 5px;
 484    padding-top: 0.1em;
 485  }
 486  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::-webkit-input-placeholder {
 487    /* WebKit, Blink, Edge */
 488    color: #888;
 489  }
 490  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::placeholder {
 491    /* WebKit, Blink, Edge */
 492    color: #888;
 493  }
 494  /* dropup */
 495  .tinymce-mobile-dropup {
 496    background: white;
 497    display: flex;
 498    overflow: hidden;
 499    width: 100%;
 500  }
 501  .tinymce-mobile-dropup.tinymce-mobile-dropup-shrinking {
 502    transition: height 0.3s ease-out;
 503  }
 504  .tinymce-mobile-dropup.tinymce-mobile-dropup-growing {
 505    transition: height 0.3s ease-in;
 506  }
 507  .tinymce-mobile-dropup.tinymce-mobile-dropup-closed {
 508    flex-grow: 0;
 509  }
 510  .tinymce-mobile-dropup.tinymce-mobile-dropup-open:not(.tinymce-mobile-dropup-growing) {
 511    flex-grow: 1;
 512  }
 513  /* TODO min-height for device size and orientation */
 514  .tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
 515    min-height: 200px;
 516  }
 517  @media only screen and (orientation: landscape) {
 518    .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
 519      min-height: 200px;
 520    }
 521  }
 522  @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
 523    .tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
 524      min-height: 150px;
 525    }
 526  }
 527  /* styles menu */
 528  .tinymce-mobile-styles-menu {
 529    font-family: sans-serif;
 530    outline: 4px solid black;
 531    overflow: hidden;
 532    position: relative;
 533    width: 100%;
 534  }
 535  .tinymce-mobile-styles-menu [role="menu"] {
 536    display: flex;
 537    flex-direction: column;
 538    height: 100%;
 539    position: absolute;
 540    width: 100%;
 541  }
 542  .tinymce-mobile-styles-menu [role="menu"].transitioning {
 543    transition: transform 0.5s ease-in-out;
 544  }
 545  .tinymce-mobile-styles-menu .tinymce-mobile-styles-item {
 546    border-bottom: 1px solid #ddd;
 547    color: #455a64;
 548    cursor: pointer;
 549    display: flex;
 550    padding: 1em 1em;
 551    position: relative;
 552  }
 553  .tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser .tinymce-mobile-styles-collapse-icon::before {
 554    color: #455a64;
 555    content: "\e314";
 556    font-family: 'tinymce-mobile', sans-serif;
 557  }
 558  .tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-styles-item-is-menu::after {
 559    color: #455a64;
 560    content: "\e315";
 561    font-family: 'tinymce-mobile', sans-serif;
 562    padding-left: 1em;
 563    padding-right: 1em;
 564    position: absolute;
 565    right: 0;
 566  }
 567  .tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-format-matches::after {
 568    font-family: 'tinymce-mobile', sans-serif;
 569    padding-left: 1em;
 570    padding-right: 1em;
 571    position: absolute;
 572    right: 0;
 573  }
 574  .tinymce-mobile-styles-menu .tinymce-mobile-styles-separator,
 575  .tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser {
 576    align-items: center;
 577    background: #fff;
 578    border-top: #455a64;
 579    color: #455a64;
 580    display: flex;
 581    min-height: 2.5em;
 582    padding-left: 1em;
 583    padding-right: 1em;
 584  }
 585  .tinymce-mobile-styles-menu [data-transitioning-destination="before"][data-transitioning-state],
 586  .tinymce-mobile-styles-menu [data-transitioning-state="before"] {
 587    transform: translate(-100%);
 588  }
 589  .tinymce-mobile-styles-menu [data-transitioning-destination="current"][data-transitioning-state],
 590  .tinymce-mobile-styles-menu [data-transitioning-state="current"] {
 591    transform: translate(0%);
 592  }
 593  .tinymce-mobile-styles-menu [data-transitioning-destination="after"][data-transitioning-state],
 594  .tinymce-mobile-styles-menu [data-transitioning-state="after"] {
 595    transform: translate(100%);
 596  }
 597  @font-face {
 598    font-family: 'tinymce-mobile';
 599    font-style: normal;
 600    font-weight: normal;
 601    src: url('fonts/tinymce-mobile.woff?8x92w3') format('woff');
 602  }
 603  @media (min-device-width: 700px) {
 604    .tinymce-mobile-outer-container,
 605    .tinymce-mobile-outer-container input {
 606      font-size: 25px;
 607    }
 608  }
 609  @media (max-device-width: 700px) {
 610    .tinymce-mobile-outer-container,
 611    .tinymce-mobile-outer-container input {
 612      font-size: 18px;
 613    }
 614  }
 615  .tinymce-mobile-icon {
 616    font-family: 'tinymce-mobile', sans-serif;
 617  }
 618  .mixin-flex-and-centre {
 619    align-items: center;
 620    display: flex;
 621    justify-content: center;
 622  }
 623  .mixin-flex-bar {
 624    align-items: center;
 625    display: flex;
 626    height: 100%;
 627  }
 628  .tinymce-mobile-outer-container .tinymce-mobile-editor-socket iframe {
 629    background-color: #fff;
 630    width: 100%;
 631  }
 632  .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
 633    /* Note, on the iPod touch in landscape, this isn't visible when the navbar appears */
 634    background-color: #207ab7;
 635    border-radius: 50%;
 636    bottom: 1em;
 637    color: white;
 638    font-size: 1em;
 639    height: 2.1em;
 640    position: fixed;
 641    right: 2em;
 642    width: 2.1em;
 643    align-items: center;
 644    display: flex;
 645    justify-content: center;
 646  }
 647  @media only screen and (min-device-width:700px) {
 648    .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
 649      font-size: 1.2em;
 650    }
 651  }
 652  .tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket {
 653    height: 300px;
 654    overflow: hidden;
 655  }
 656  .tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket iframe {
 657    height: 100%;
 658  }
 659  .tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-toolstrip {
 660    display: none;
 661  }
 662  /*
 663    Note, that if you don't include this (::-webkit-file-upload-button), the toolbar width gets
 664    increased and the whole body becomes scrollable. It's important!
 665   */
 666  input[type="file"]::-webkit-file-upload-button {
 667    display: none;
 668  }
 669  @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
 670    .tinymce-mobile-ios-container .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
 671      bottom: 50%;
 672    }
 673  }