skin.mobile.css 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677
  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: #ffffff;
  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: #ffffff;
  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:-ms-input-placeholder {
  491. /* WebKit, Blink, Edge */
  492. color: #888;
  493. }
  494. .tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::placeholder {
  495. /* WebKit, Blink, Edge */
  496. color: #888;
  497. }
  498. /* dropup */
  499. .tinymce-mobile-dropup {
  500. background: white;
  501. display: flex;
  502. overflow: hidden;
  503. width: 100%;
  504. }
  505. .tinymce-mobile-dropup.tinymce-mobile-dropup-shrinking {
  506. transition: height 0.3s ease-out;
  507. }
  508. .tinymce-mobile-dropup.tinymce-mobile-dropup-growing {
  509. transition: height 0.3s ease-in;
  510. }
  511. .tinymce-mobile-dropup.tinymce-mobile-dropup-closed {
  512. flex-grow: 0;
  513. }
  514. .tinymce-mobile-dropup.tinymce-mobile-dropup-open:not(.tinymce-mobile-dropup-growing) {
  515. flex-grow: 1;
  516. }
  517. /* TODO min-height for device size and orientation */
  518. .tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
  519. min-height: 200px;
  520. }
  521. @media only screen and (orientation: landscape) {
  522. .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
  523. min-height: 200px;
  524. }
  525. }
  526. @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
  527. .tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
  528. min-height: 150px;
  529. }
  530. }
  531. /* styles menu */
  532. .tinymce-mobile-styles-menu {
  533. font-family: sans-serif;
  534. outline: 4px solid black;
  535. overflow: hidden;
  536. position: relative;
  537. width: 100%;
  538. }
  539. .tinymce-mobile-styles-menu [role="menu"] {
  540. display: flex;
  541. flex-direction: column;
  542. height: 100%;
  543. position: absolute;
  544. width: 100%;
  545. }
  546. .tinymce-mobile-styles-menu [role="menu"].transitioning {
  547. transition: transform 0.5s ease-in-out;
  548. }
  549. .tinymce-mobile-styles-menu .tinymce-mobile-styles-item {
  550. border-bottom: 1px solid #ddd;
  551. color: #455a64;
  552. cursor: pointer;
  553. display: flex;
  554. padding: 1em 1em;
  555. position: relative;
  556. }
  557. .tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser .tinymce-mobile-styles-collapse-icon::before {
  558. color: #455a64;
  559. content: "\e314";
  560. font-family: 'tinymce-mobile', sans-serif;
  561. }
  562. .tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-styles-item-is-menu::after {
  563. color: #455a64;
  564. content: "\e315";
  565. font-family: 'tinymce-mobile', sans-serif;
  566. padding-left: 1em;
  567. padding-right: 1em;
  568. position: absolute;
  569. right: 0;
  570. }
  571. .tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-format-matches::after {
  572. font-family: 'tinymce-mobile', sans-serif;
  573. padding-left: 1em;
  574. padding-right: 1em;
  575. position: absolute;
  576. right: 0;
  577. }
  578. .tinymce-mobile-styles-menu .tinymce-mobile-styles-separator,
  579. .tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser {
  580. align-items: center;
  581. background: #fff;
  582. border-top: #455a64;
  583. color: #455a64;
  584. display: flex;
  585. min-height: 2.5em;
  586. padding-left: 1em;
  587. padding-right: 1em;
  588. }
  589. .tinymce-mobile-styles-menu [data-transitioning-destination="before"][data-transitioning-state],
  590. .tinymce-mobile-styles-menu [data-transitioning-state="before"] {
  591. transform: translate(-100%);
  592. }
  593. .tinymce-mobile-styles-menu [data-transitioning-destination="current"][data-transitioning-state],
  594. .tinymce-mobile-styles-menu [data-transitioning-state="current"] {
  595. transform: translate(0%);
  596. }
  597. .tinymce-mobile-styles-menu [data-transitioning-destination="after"][data-transitioning-state],
  598. .tinymce-mobile-styles-menu [data-transitioning-state="after"] {
  599. transform: translate(100%);
  600. }
  601. @font-face {
  602. font-family: 'tinymce-mobile';
  603. font-style: normal;
  604. font-weight: normal;
  605. src: url('fonts/tinymce-mobile.woff?8x92w3') format('woff');
  606. }
  607. @media (min-device-width: 700px) {
  608. .tinymce-mobile-outer-container,
  609. .tinymce-mobile-outer-container input {
  610. font-size: 25px;
  611. }
  612. }
  613. @media (max-device-width: 700px) {
  614. .tinymce-mobile-outer-container,
  615. .tinymce-mobile-outer-container input {
  616. font-size: 18px;
  617. }
  618. }
  619. .tinymce-mobile-icon {
  620. font-family: 'tinymce-mobile', sans-serif;
  621. }
  622. .mixin-flex-and-centre {
  623. align-items: center;
  624. display: flex;
  625. justify-content: center;
  626. }
  627. .mixin-flex-bar {
  628. align-items: center;
  629. display: flex;
  630. height: 100%;
  631. }
  632. .tinymce-mobile-outer-container .tinymce-mobile-editor-socket iframe {
  633. background-color: #fff;
  634. width: 100%;
  635. }
  636. .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
  637. /* Note, on the iPod touch in landscape, this isn't visible when the navbar appears */
  638. background-color: #207ab7;
  639. border-radius: 50%;
  640. bottom: 1em;
  641. color: white;
  642. font-size: 1em;
  643. height: 2.1em;
  644. position: fixed;
  645. right: 2em;
  646. width: 2.1em;
  647. align-items: center;
  648. display: flex;
  649. justify-content: center;
  650. }
  651. @media only screen and (min-device-width:700px) {
  652. .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
  653. font-size: 1.2em;
  654. }
  655. }
  656. .tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket {
  657. height: 300px;
  658. overflow: hidden;
  659. }
  660. .tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket iframe {
  661. height: 100%;
  662. }
  663. .tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-toolstrip {
  664. display: none;
  665. }
  666. /*
  667. Note, that if you don't include this (::-webkit-file-upload-button), the toolbar width gets
  668. increased and the whole body becomes scrollable. It's important!
  669. */
  670. input[type="file"]::-webkit-file-upload-button {
  671. display: none;
  672. }
  673. @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
  674. .tinymce-mobile-ios-container .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
  675. bottom: 50%;
  676. }
  677. }