github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/static/directeurs/js/skins/ui/oxide/skin.mobile.css (about)

     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    align-self: center;
   319    background: inherit;
   320    border: none;
   321    border-radius: 50%;
   322    color: #888;
   323    font-size: 0.6em;
   324    font-weight: bold;
   325    height: 100%;
   326    padding-right: 2px;
   327    position: absolute;
   328    right: 0;
   329  }
   330  .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 {
   331    display: none;
   332  }
   333  .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,
   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-next {
   335    align-items: center;
   336    display: flex;
   337  }
   338  .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,
   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-next::before {
   340    align-items: center;
   341    display: flex;
   342    font-weight: bold;
   343    height: 100%;
   344    padding-left: 0.5em;
   345    padding-right: 0.5em;
   346  }
   347  .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,
   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-next.tinymce-mobile-toolbar-navigation-disabled::before {
   349    visibility: hidden;
   350  }
   351  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item {
   352    color: #cccccc;
   353    font-size: 10px;
   354    line-height: 10px;
   355    margin: 0 2px;
   356    padding-top: 3px;
   357  }
   358  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item.tinymce-mobile-dot-active {
   359    color: #c8cbcf;
   360  }
   361  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-font::before,
   362  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-heading::before {
   363    margin-left: 0.5em;
   364    margin-right: 0.9em;
   365  }
   366  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-font::before,
   367  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-heading::before {
   368    margin-left: 0.9em;
   369    margin-right: 0.5em;
   370  }
   371  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider {
   372    display: flex;
   373    flex: 1;
   374    margin-left: 0;
   375    margin-right: 0;
   376    padding: 0.28em 0;
   377    position: relative;
   378  }
   379  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container {
   380    align-items: center;
   381    display: flex;
   382    flex-grow: 1;
   383    height: 100%;
   384  }
   385  .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 {
   386    background: #cccccc;
   387    display: flex;
   388    flex: 1;
   389    height: 0.2em;
   390    margin-bottom: 0.3em;
   391    margin-top: 0.3em;
   392  }
   393  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container {
   394    padding-left: 2em;
   395    padding-right: 2em;
   396  }
   397  .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 {
   398    align-items: center;
   399    display: flex;
   400    flex-grow: 1;
   401    height: 100%;
   402  }
   403  .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 {
   404    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%);
   405    display: flex;
   406    flex: 1;
   407    height: 0.2em;
   408    margin-bottom: 0.3em;
   409    margin-top: 0.3em;
   410  }
   411  .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 {
   412    /* Not part of theming */
   413    background: black;
   414    height: 0.2em;
   415    margin-bottom: 0.3em;
   416    margin-top: 0.3em;
   417    width: 1.2em;
   418  }
   419  .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 {
   420    /* Not part of theming */
   421    background: white;
   422    height: 0.2em;
   423    margin-bottom: 0.3em;
   424    margin-top: 0.3em;
   425    width: 1.2em;
   426  }
   427  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb {
   428    /* vertically centering trick (margin: auto, top: 0, bottom: 0). On iOS and Safari, if you leave
   429       * out these values, then it shows the thumb at the top of the spectrum. This is probably because it is
   430       * absolutely positioned with only a left value, and not a top. Note, on Chrome it seems to be fine without
   431       * this approach.
   432      */
   433    align-items: center;
   434    background-clip: padding-box;
   435    background-color: #455a64;
   436    border: 0.5em solid rgba(136, 136, 136, 0);
   437    border-radius: 3em;
   438    bottom: 0;
   439    color: #fff;
   440    display: flex;
   441    height: 0.5em;
   442    justify-content: center;
   443    left: -10px;
   444    margin: auto;
   445    position: absolute;
   446    top: 0;
   447    transition: border 120ms cubic-bezier(0.39, 0.58, 0.57, 1);
   448    width: 0.5em;
   449  }
   450  .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 {
   451    border: 0.5em solid rgba(136, 136, 136, 0.39);
   452  }
   453  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper,
   454  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group > div {
   455    align-items: center;
   456    display: flex;
   457    height: 100%;
   458    flex: 1;
   459  }
   460  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper {
   461    flex-direction: column;
   462    justify-content: center;
   463  }
   464  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item {
   465    align-items: center;
   466    display: flex;
   467  }
   468  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item:not(.tinymce-mobile-serialised-dialog) {
   469    height: 100%;
   470  }
   471  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-container {
   472    display: flex;
   473  }
   474  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input {
   475    background: #ffffff;
   476    border: none;
   477    border-radius: 0;
   478    color: #455a64;
   479    flex-grow: 1;
   480    font-size: 0.85em;
   481    padding-bottom: 0.1em;
   482    padding-left: 5px;
   483    padding-top: 0.1em;
   484  }
   485  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::-webkit-input-placeholder {
   486    /* WebKit, Blink, Edge */
   487    color: #888;
   488  }
   489  .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::placeholder {
   490    /* WebKit, Blink, Edge */
   491    color: #888;
   492  }
   493  /* dropup */
   494  .tinymce-mobile-dropup {
   495    background: white;
   496    display: flex;
   497    overflow: hidden;
   498    width: 100%;
   499  }
   500  .tinymce-mobile-dropup.tinymce-mobile-dropup-shrinking {
   501    transition: height 0.3s ease-out;
   502  }
   503  .tinymce-mobile-dropup.tinymce-mobile-dropup-growing {
   504    transition: height 0.3s ease-in;
   505  }
   506  .tinymce-mobile-dropup.tinymce-mobile-dropup-closed {
   507    flex-grow: 0;
   508  }
   509  .tinymce-mobile-dropup.tinymce-mobile-dropup-open:not(.tinymce-mobile-dropup-growing) {
   510    flex-grow: 1;
   511  }
   512  /* TODO min-height for device size and orientation */
   513  .tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
   514    min-height: 200px;
   515  }
   516  @media only screen and (orientation: landscape) {
   517    .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
   518      min-height: 200px;
   519    }
   520  }
   521  @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
   522    .tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
   523      min-height: 150px;
   524    }
   525  }
   526  /* styles menu */
   527  .tinymce-mobile-styles-menu {
   528    font-family: sans-serif;
   529    outline: 4px solid black;
   530    overflow: hidden;
   531    position: relative;
   532    width: 100%;
   533  }
   534  .tinymce-mobile-styles-menu [role="menu"] {
   535    display: flex;
   536    flex-direction: column;
   537    height: 100%;
   538    position: absolute;
   539    width: 100%;
   540  }
   541  .tinymce-mobile-styles-menu [role="menu"].transitioning {
   542    transition: transform 0.5s ease-in-out;
   543  }
   544  .tinymce-mobile-styles-menu .tinymce-mobile-styles-item {
   545    border-bottom: 1px solid #ddd;
   546    color: #455a64;
   547    cursor: pointer;
   548    display: flex;
   549    padding: 1em 1em;
   550    position: relative;
   551  }
   552  .tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser .tinymce-mobile-styles-collapse-icon::before {
   553    color: #455a64;
   554    content: "\e314";
   555    font-family: 'tinymce-mobile', sans-serif;
   556  }
   557  .tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-styles-item-is-menu::after {
   558    color: #455a64;
   559    content: "\e315";
   560    font-family: 'tinymce-mobile', sans-serif;
   561    padding-left: 1em;
   562    padding-right: 1em;
   563    position: absolute;
   564    right: 0;
   565  }
   566  .tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-format-matches::after {
   567    font-family: 'tinymce-mobile', sans-serif;
   568    padding-left: 1em;
   569    padding-right: 1em;
   570    position: absolute;
   571    right: 0;
   572  }
   573  .tinymce-mobile-styles-menu .tinymce-mobile-styles-separator,
   574  .tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser {
   575    align-items: center;
   576    background: #fff;
   577    border-top: #455a64;
   578    color: #455a64;
   579    display: flex;
   580    min-height: 2.5em;
   581    padding-left: 1em;
   582    padding-right: 1em;
   583  }
   584  .tinymce-mobile-styles-menu [data-transitioning-destination="before"][data-transitioning-state],
   585  .tinymce-mobile-styles-menu [data-transitioning-state="before"] {
   586    transform: translate(-100%);
   587  }
   588  .tinymce-mobile-styles-menu [data-transitioning-destination="current"][data-transitioning-state],
   589  .tinymce-mobile-styles-menu [data-transitioning-state="current"] {
   590    transform: translate(0%);
   591  }
   592  .tinymce-mobile-styles-menu [data-transitioning-destination="after"][data-transitioning-state],
   593  .tinymce-mobile-styles-menu [data-transitioning-state="after"] {
   594    transform: translate(100%);
   595  }
   596  @font-face {
   597    font-family: 'tinymce-mobile';
   598    font-style: normal;
   599    font-weight: normal;
   600    src: url('fonts/tinymce-mobile.woff?8x92w3') format('woff');
   601  }
   602  @media (min-device-width: 700px) {
   603    .tinymce-mobile-outer-container,
   604    .tinymce-mobile-outer-container input {
   605      font-size: 25px;
   606    }
   607  }
   608  @media (max-device-width: 700px) {
   609    .tinymce-mobile-outer-container,
   610    .tinymce-mobile-outer-container input {
   611      font-size: 18px;
   612    }
   613  }
   614  .tinymce-mobile-icon {
   615    font-family: 'tinymce-mobile', sans-serif;
   616  }
   617  .mixin-flex-and-centre {
   618    align-items: center;
   619    display: flex;
   620    justify-content: center;
   621  }
   622  .mixin-flex-bar {
   623    align-items: center;
   624    display: flex;
   625    height: 100%;
   626  }
   627  .tinymce-mobile-outer-container .tinymce-mobile-editor-socket iframe {
   628    background-color: #fff;
   629    width: 100%;
   630  }
   631  .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
   632    /* Note, on the iPod touch in landscape, this isn't visible when the navbar appears */
   633    background-color: #207ab7;
   634    border-radius: 50%;
   635    bottom: 1em;
   636    color: white;
   637    font-size: 1em;
   638    height: 2.1em;
   639    position: fixed;
   640    right: 2em;
   641    width: 2.1em;
   642    align-items: center;
   643    display: flex;
   644    justify-content: center;
   645  }
   646  @media only screen and (min-device-width:700px) {
   647    .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
   648      font-size: 1.2em;
   649    }
   650  }
   651  .tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket {
   652    height: 300px;
   653    overflow: hidden;
   654  }
   655  .tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket iframe {
   656    height: 100%;
   657  }
   658  .tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-toolstrip {
   659    display: none;
   660  }
   661  /*
   662    Note, that if you don't include this (::-webkit-file-upload-button), the toolbar width gets
   663    increased and the whole body becomes scrollable. It's important!
   664   */
   665  input[type="file"]::-webkit-file-upload-button {
   666    display: none;
   667  }
   668  @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
   669    .tinymce-mobile-ios-container .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
   670      bottom: 50%;
   671    }
   672  }