skin.mobile.css 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673
  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. }