Nessuna descrizione

style-rtl.css 53KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025
  1. /**
  2. * Colors
  3. */
  4. /**
  5. * Breakpoints & Media Queries
  6. */
  7. /**
  8. * SCSS Variables.
  9. *
  10. * Please use variables from this sheet to ensure consistency across the UI.
  11. * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  12. * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  13. */
  14. /**
  15. * Colors
  16. */
  17. /**
  18. * Fonts & basic variables.
  19. */
  20. /**
  21. * Grid System.
  22. * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  23. */
  24. /**
  25. * Dimensions.
  26. */
  27. /**
  28. * Shadows.
  29. */
  30. /**
  31. * Editor widths.
  32. */
  33. /**
  34. * Block & Editor UI.
  35. */
  36. /**
  37. * Block paddings.
  38. */
  39. /**
  40. * React Native specific.
  41. * These variables do not appear to be used anywhere else.
  42. */
  43. /**
  44. * Breakpoint mixins
  45. */
  46. /**
  47. * Long content fade mixin
  48. *
  49. * Creates a fading overlay to signify that the content is longer
  50. * than the space allows.
  51. */
  52. /**
  53. * Focus styles.
  54. */
  55. /**
  56. * Applies editor left position to the selector passed as argument
  57. */
  58. /**
  59. * Styles that are reused verbatim in a few places
  60. */
  61. /**
  62. * Allows users to opt-out of animations via OS-level preferences.
  63. */
  64. /**
  65. * Reset default styles for JavaScript UI based pages.
  66. * This is a WP-admin agnostic reset
  67. */
  68. /**
  69. * Reset the WP Admin page styles for Gutenberg-like pages.
  70. */
  71. :root {
  72. --wp-admin-theme-color: #007cba;
  73. --wp-admin-theme-color-darker-10: #006ba1;
  74. --wp-admin-theme-color-darker-20: #005a87;
  75. --wp-admin-border-width-focus: 2px;
  76. }
  77. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  78. :root {
  79. --wp-admin-border-width-focus: 1.5px;
  80. }
  81. }
  82. .components-panel__header.interface-complementary-area-header__small {
  83. background: #fff;
  84. padding-left: 4px;
  85. }
  86. .components-panel__header.interface-complementary-area-header__small .interface-complementary-area-header__small-title {
  87. overflow: hidden;
  88. text-overflow: ellipsis;
  89. white-space: nowrap;
  90. width: 100%;
  91. }
  92. @media (min-width: 782px) {
  93. .components-panel__header.interface-complementary-area-header__small {
  94. display: none;
  95. }
  96. }
  97. .interface-complementary-area-header {
  98. background: #fff;
  99. padding-left: 4px;
  100. }
  101. .interface-complementary-area-header .components-button.has-icon {
  102. display: none;
  103. margin-right: auto;
  104. }
  105. .interface-complementary-area-header .components-button.has-icon ~ .components-button {
  106. margin-right: 0;
  107. }
  108. @media (min-width: 782px) {
  109. .interface-complementary-area-header .components-button.has-icon {
  110. display: flex;
  111. }
  112. }
  113. .interface-complementary-area {
  114. background: #fff;
  115. color: #1e1e1e;
  116. }
  117. @media (min-width: 600px) {
  118. .interface-complementary-area {
  119. -webkit-overflow-scrolling: touch;
  120. }
  121. }
  122. @media (min-width: 782px) {
  123. .interface-complementary-area {
  124. width: 280px;
  125. }
  126. }
  127. .interface-complementary-area .components-panel {
  128. border: none;
  129. position: relative;
  130. z-index: 0;
  131. }
  132. .interface-complementary-area .components-panel__header {
  133. position: sticky;
  134. top: 0;
  135. z-index: 1;
  136. }
  137. .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs {
  138. top: 48px;
  139. }
  140. @media (min-width: 782px) {
  141. .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs {
  142. top: 0;
  143. }
  144. }
  145. .interface-complementary-area p {
  146. margin-top: 0;
  147. }
  148. .interface-complementary-area h2,
  149. .interface-complementary-area h3 {
  150. font-size: 13px;
  151. color: #1e1e1e;
  152. margin-bottom: 1.5em;
  153. }
  154. .interface-complementary-area hr {
  155. border-top: none;
  156. border-bottom: 1px solid #f0f0f0;
  157. margin: 1.5em 0;
  158. }
  159. .interface-complementary-area div.components-toolbar-group,
  160. .interface-complementary-area div.components-toolbar {
  161. box-shadow: none;
  162. margin-bottom: 1.5em;
  163. }
  164. .interface-complementary-area div.components-toolbar-group:last-child,
  165. .interface-complementary-area div.components-toolbar:last-child {
  166. margin-bottom: 0;
  167. }
  168. .interface-complementary-area .block-editor-skip-to-selected-block:focus {
  169. top: auto;
  170. left: 10px;
  171. bottom: 10px;
  172. right: auto;
  173. }
  174. @media (min-width: 782px) {
  175. body.js.is-fullscreen-mode {
  176. margin-top: -32px;
  177. height: calc(100% + 32px);
  178. }
  179. body.js.is-fullscreen-mode #adminmenumain,
  180. body.js.is-fullscreen-mode #wpadminbar {
  181. display: none;
  182. }
  183. body.js.is-fullscreen-mode #wpcontent,
  184. body.js.is-fullscreen-mode #wpfooter {
  185. margin-right: 0;
  186. }
  187. }
  188. html.interface-interface-skeleton__html-container {
  189. position: fixed;
  190. width: 100%;
  191. }
  192. @media (min-width: 782px) {
  193. html.interface-interface-skeleton__html-container {
  194. position: initial;
  195. width: initial;
  196. }
  197. }
  198. .interface-interface-skeleton {
  199. display: flex;
  200. flex-direction: row;
  201. height: auto;
  202. max-height: 100%;
  203. position: fixed;
  204. top: 46px;
  205. right: 0;
  206. left: 0;
  207. bottom: 0;
  208. }
  209. @media (min-width: 783px) {
  210. .interface-interface-skeleton {
  211. top: 32px;
  212. }
  213. .is-fullscreen-mode .interface-interface-skeleton {
  214. top: 0;
  215. }
  216. }
  217. .interface-interface-skeleton__editor {
  218. display: flex;
  219. flex-direction: column;
  220. flex: 0 1 100%;
  221. overflow: hidden;
  222. }
  223. .interface-interface-skeleton {
  224. /* Set left position when auto-fold is not on the body element. */
  225. right: 0;
  226. }
  227. @media (min-width: 783px) {
  228. .interface-interface-skeleton {
  229. right: 160px;
  230. }
  231. }
  232. .auto-fold .interface-interface-skeleton {
  233. /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
  234. }
  235. @media (min-width: 783px) {
  236. .auto-fold .interface-interface-skeleton {
  237. right: 36px;
  238. }
  239. }
  240. @media (min-width: 961px) {
  241. .auto-fold .interface-interface-skeleton {
  242. right: 160px;
  243. }
  244. }
  245. /* Sidebar manually collapsed. */
  246. .folded .interface-interface-skeleton {
  247. right: 0;
  248. }
  249. @media (min-width: 783px) {
  250. .folded .interface-interface-skeleton {
  251. right: 36px;
  252. }
  253. }
  254. body.is-fullscreen-mode .interface-interface-skeleton {
  255. right: 0 !important;
  256. }
  257. .interface-interface-skeleton__body {
  258. flex-grow: 1;
  259. display: flex;
  260. overflow: auto;
  261. overscroll-behavior-y: none;
  262. }
  263. @media (min-width: 782px) {
  264. .has-footer .interface-interface-skeleton__body {
  265. padding-bottom: 25px;
  266. }
  267. }
  268. .interface-interface-skeleton__content {
  269. flex-grow: 1;
  270. display: flex;
  271. flex-direction: column;
  272. overflow: auto;
  273. z-index: 20;
  274. }
  275. .interface-interface-skeleton__secondary-sidebar,
  276. .interface-interface-skeleton__sidebar {
  277. display: block;
  278. flex-shrink: 0;
  279. position: absolute;
  280. z-index: 100000;
  281. top: 0;
  282. left: 0;
  283. bottom: 0;
  284. right: 0;
  285. background: #fff;
  286. color: #1e1e1e;
  287. }
  288. @media (min-width: 782px) {
  289. .interface-interface-skeleton__secondary-sidebar,
  290. .interface-interface-skeleton__sidebar {
  291. position: relative !important;
  292. z-index: 90;
  293. width: auto;
  294. }
  295. }
  296. .interface-interface-skeleton__sidebar {
  297. overflow: auto;
  298. }
  299. @media (min-width: 782px) {
  300. .interface-interface-skeleton__sidebar {
  301. border-right: 1px solid #e0e0e0;
  302. }
  303. }
  304. @media (min-width: 782px) {
  305. .interface-interface-skeleton__secondary-sidebar {
  306. border-left: 1px solid #e0e0e0;
  307. }
  308. }
  309. .interface-interface-skeleton__header {
  310. flex-shrink: 0;
  311. height: auto;
  312. border-bottom: 1px solid #e0e0e0;
  313. z-index: 30;
  314. color: #1e1e1e;
  315. }
  316. .interface-interface-skeleton__footer {
  317. height: auto;
  318. flex-shrink: 0;
  319. border-top: 1px solid #e0e0e0;
  320. color: #1e1e1e;
  321. position: absolute;
  322. bottom: 0;
  323. right: 0;
  324. width: 100%;
  325. background-color: #fff;
  326. z-index: 90;
  327. display: none;
  328. }
  329. @media (min-width: 782px) {
  330. .interface-interface-skeleton__footer {
  331. display: flex;
  332. }
  333. }
  334. .interface-interface-skeleton__footer .block-editor-block-breadcrumb {
  335. z-index: 30;
  336. display: flex;
  337. background: #fff;
  338. height: 24px;
  339. align-items: center;
  340. font-size: 13px;
  341. padding: 0 18px;
  342. }
  343. .interface-interface-skeleton__actions {
  344. z-index: 100000;
  345. position: fixed !important;
  346. top: -9999em;
  347. bottom: auto;
  348. right: auto;
  349. left: 0;
  350. width: 280px;
  351. color: #1e1e1e;
  352. }
  353. .interface-interface-skeleton__actions:focus {
  354. top: auto;
  355. bottom: 0;
  356. }
  357. .interface-pinned-items {
  358. display: flex;
  359. }
  360. .interface-pinned-items .components-button:not(:first-child) {
  361. display: none;
  362. }
  363. @media (min-width: 600px) {
  364. .interface-pinned-items .components-button:not(:first-child) {
  365. display: flex;
  366. }
  367. }
  368. .interface-pinned-items .components-button {
  369. margin-right: 4px;
  370. }
  371. .interface-pinned-items .components-button svg {
  372. max-width: 24px;
  373. max-height: 24px;
  374. }
  375. .edit-post-header {
  376. height: 60px;
  377. background: #fff;
  378. display: flex;
  379. flex-wrap: wrap;
  380. align-items: center;
  381. max-width: 100vw;
  382. }
  383. @media (min-width: 280px) {
  384. .edit-post-header {
  385. flex-wrap: nowrap;
  386. }
  387. }
  388. .edit-post-header > .edit-post-header__settings {
  389. order: 1;
  390. }
  391. @supports (position: sticky) {
  392. .edit-post-header > .edit-post-header__settings {
  393. order: initial;
  394. }
  395. }
  396. .edit-post-header__toolbar {
  397. display: flex;
  398. flex-grow: 1;
  399. }
  400. .edit-post-header__toolbar .table-of-contents {
  401. display: none;
  402. }
  403. @media (min-width: 600px) {
  404. .edit-post-header__toolbar .table-of-contents {
  405. display: block;
  406. }
  407. }
  408. .edit-post-header__settings {
  409. display: inline-flex;
  410. align-items: center;
  411. flex-wrap: wrap;
  412. padding-left: 4px;
  413. /**
  414. * Buttons in the Toolbar
  415. */
  416. }
  417. @media (min-width: 600px) {
  418. .edit-post-header__settings {
  419. padding-left: 16px;
  420. }
  421. }
  422. .edit-post-header__settings .editor-post-saved-state,
  423. .edit-post-header__settings .components-button.components-button {
  424. margin-left: 4px;
  425. }
  426. @media (min-width: 600px) {
  427. .edit-post-header__settings .editor-post-saved-state,
  428. .edit-post-header__settings .components-button.components-button {
  429. margin-left: 12px;
  430. }
  431. }
  432. .edit-post-header__settings .editor-post-saved-state,
  433. .edit-post-header__settings .components-button.is-tertiary {
  434. padding: 0 6px;
  435. }
  436. .edit-post-header__settings .edit-post-more-menu .components-button,
  437. .edit-post-header__settings .interface-pinned-items .components-button {
  438. margin-left: 0;
  439. }
  440. .edit-post-header-preview__grouping-external {
  441. display: flex;
  442. position: relative;
  443. padding-bottom: 0;
  444. }
  445. .edit-post-header-preview__button-external {
  446. padding-right: 8px;
  447. margin-left: auto;
  448. width: 100%;
  449. display: flex;
  450. justify-content: flex-start;
  451. }
  452. .edit-post-header-preview__button-external svg {
  453. margin-right: auto;
  454. }
  455. .edit-post-post-preview-dropdown .components-popover__content > div {
  456. padding-bottom: 0;
  457. }
  458. .show-icon-labels.interface-pinned-items .components-button.has-icon,
  459. .show-icon-labels .edit-post-header .components-button.has-icon,
  460. .edit-post-header__dropdown .components-button.has-icon {
  461. width: auto;
  462. }
  463. .show-icon-labels.interface-pinned-items .components-button.has-icon svg,
  464. .show-icon-labels .edit-post-header .components-button.has-icon svg,
  465. .edit-post-header__dropdown .components-button.has-icon svg {
  466. display: none;
  467. }
  468. .show-icon-labels.interface-pinned-items .components-button.has-icon::after,
  469. .show-icon-labels .edit-post-header .components-button.has-icon::after,
  470. .edit-post-header__dropdown .components-button.has-icon::after {
  471. content: attr(aria-label);
  472. }
  473. .show-icon-labels.interface-pinned-items .components-button.has-icon[aria-disabled=true],
  474. .show-icon-labels .edit-post-header .components-button.has-icon[aria-disabled=true],
  475. .edit-post-header__dropdown .components-button.has-icon[aria-disabled=true] {
  476. background-color: transparent;
  477. }
  478. .show-icon-labels.interface-pinned-items .is-tertiary:active,
  479. .show-icon-labels .edit-post-header .is-tertiary:active,
  480. .edit-post-header__dropdown .is-tertiary:active {
  481. box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
  482. background-color: transparent;
  483. }
  484. .show-icon-labels.interface-pinned-items .edit-post-fullscreen-mode-close.has-icon svg,
  485. .show-icon-labels.interface-pinned-items .components-button.has-icon.button-toggle svg,
  486. .show-icon-labels .edit-post-header .edit-post-fullscreen-mode-close.has-icon svg,
  487. .show-icon-labels .edit-post-header .components-button.has-icon.button-toggle svg,
  488. .edit-post-header__dropdown .edit-post-fullscreen-mode-close.has-icon svg,
  489. .edit-post-header__dropdown .components-button.has-icon.button-toggle svg {
  490. display: block;
  491. }
  492. .show-icon-labels.interface-pinned-items .edit-post-fullscreen-mode-close.has-icon::after,
  493. .show-icon-labels.interface-pinned-items .components-button.has-icon.button-toggle::after,
  494. .show-icon-labels .edit-post-header .edit-post-fullscreen-mode-close.has-icon::after,
  495. .show-icon-labels .edit-post-header .components-button.has-icon.button-toggle::after,
  496. .edit-post-header__dropdown .edit-post-fullscreen-mode-close.has-icon::after,
  497. .edit-post-header__dropdown .components-button.has-icon.button-toggle::after {
  498. content: none;
  499. }
  500. .show-icon-labels.interface-pinned-items .edit-post-fullscreen-mode-close.has-icon,
  501. .show-icon-labels .edit-post-header .edit-post-fullscreen-mode-close.has-icon,
  502. .edit-post-header__dropdown .edit-post-fullscreen-mode-close.has-icon {
  503. width: 60px;
  504. }
  505. .show-icon-labels.interface-pinned-items .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon,
  506. .show-icon-labels .edit-post-header .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon,
  507. .edit-post-header__dropdown .components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon {
  508. display: block;
  509. }
  510. .show-icon-labels.interface-pinned-items .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle,
  511. .show-icon-labels.interface-pinned-items .interface-pinned-items .components-button,
  512. .show-icon-labels .edit-post-header .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle,
  513. .show-icon-labels .edit-post-header .interface-pinned-items .components-button,
  514. .edit-post-header__dropdown .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle,
  515. .edit-post-header__dropdown .interface-pinned-items .components-button {
  516. padding-right: 8px;
  517. padding-left: 8px;
  518. }
  519. @media (min-width: 600px) {
  520. .show-icon-labels.interface-pinned-items .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle,
  521. .show-icon-labels.interface-pinned-items .interface-pinned-items .components-button,
  522. .show-icon-labels .edit-post-header .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle,
  523. .show-icon-labels .edit-post-header .interface-pinned-items .components-button,
  524. .edit-post-header__dropdown .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle,
  525. .edit-post-header__dropdown .interface-pinned-items .components-button {
  526. padding-right: 12px;
  527. padding-left: 12px;
  528. }
  529. }
  530. .show-icon-labels.interface-pinned-items .components-dropdown-menu__toggle,
  531. .show-icon-labels .edit-post-header .components-dropdown-menu__toggle,
  532. .edit-post-header__dropdown .components-dropdown-menu__toggle {
  533. margin-right: 8px;
  534. padding-right: 8px;
  535. padding-left: 8px;
  536. }
  537. @media (min-width: 600px) {
  538. .show-icon-labels.interface-pinned-items .components-dropdown-menu__toggle,
  539. .show-icon-labels .edit-post-header .components-dropdown-menu__toggle,
  540. .edit-post-header__dropdown .components-dropdown-menu__toggle {
  541. margin-right: 12px;
  542. padding-right: 12px;
  543. padding-left: 12px;
  544. }
  545. }
  546. .show-icon-labels.interface-pinned-items .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle::after,
  547. .show-icon-labels .edit-post-header .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle::after,
  548. .edit-post-header__dropdown .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle::after {
  549. content: none;
  550. }
  551. .show-icon-labels.interface-pinned-items .editor-post-save-draft.editor-post-save-draft::after,
  552. .show-icon-labels .edit-post-header .editor-post-save-draft.editor-post-save-draft::after,
  553. .edit-post-header__dropdown .editor-post-save-draft.editor-post-save-draft::after {
  554. content: none;
  555. }
  556. @media (min-width: 600px) {
  557. .show-icon-labels.interface-pinned-items .editor-post-save-draft.editor-post-save-draft::after,
  558. .show-icon-labels .edit-post-header .editor-post-save-draft.editor-post-save-draft::after,
  559. .edit-post-header__dropdown .editor-post-save-draft.editor-post-save-draft::after {
  560. content: attr(aria-label);
  561. }
  562. }
  563. .edit-post-header__dropdown .components-menu-item__button.components-menu-item__button,
  564. .edit-post-header__dropdown .components-button.editor-history__undo,
  565. .edit-post-header__dropdown .components-button.editor-history__redo,
  566. .edit-post-header__dropdown .table-of-contents .components-button,
  567. .edit-post-header__dropdown .components-button.block-editor-block-navigation {
  568. margin: 0;
  569. padding: 6px 40px 6px 6px;
  570. width: 14.625rem;
  571. text-align: right;
  572. justify-content: flex-start;
  573. }
  574. .show-icon-labels.interface-pinned-items {
  575. padding: 6px 12px 12px;
  576. margin-top: 0;
  577. margin-bottom: 0;
  578. margin-right: -12px;
  579. margin-left: -12px;
  580. border-bottom: 1px solid #ccc;
  581. display: block;
  582. }
  583. .show-icon-labels.interface-pinned-items > .components-button.has-icon {
  584. margin: 0;
  585. padding: 6px 8px 6px 6px;
  586. width: 14.625rem;
  587. justify-content: flex-start;
  588. }
  589. .show-icon-labels.interface-pinned-items > .components-button.has-icon[aria-expanded=true] svg {
  590. display: block;
  591. max-width: 24px;
  592. }
  593. .show-icon-labels.interface-pinned-items > .components-button.has-icon[aria-expanded=false] {
  594. padding-right: 40px;
  595. }
  596. .show-icon-labels.interface-pinned-items > .components-button.has-icon svg {
  597. margin-left: 8px;
  598. }
  599. .edit-post-fullscreen-mode-close.has-icon {
  600. display: none;
  601. }
  602. @media (min-width: 782px) {
  603. .edit-post-fullscreen-mode-close.has-icon {
  604. display: flex;
  605. align-items: center;
  606. align-self: stretch;
  607. border: none;
  608. background: #23282e;
  609. color: #fff;
  610. border-radius: 0;
  611. height: 61px;
  612. width: 60px;
  613. position: relative;
  614. margin-bottom: -1px;
  615. }
  616. .edit-post-fullscreen-mode-close.has-icon:active {
  617. color: #fff;
  618. }
  619. .edit-post-fullscreen-mode-close.has-icon:focus {
  620. box-shadow: none;
  621. }
  622. .edit-post-fullscreen-mode-close.has-icon::before {
  623. transition: box-shadow 0.1s ease;
  624. content: "";
  625. display: block;
  626. position: absolute;
  627. top: 9px;
  628. left: 9px;
  629. bottom: 9px;
  630. right: 9px;
  631. border-radius: 4px;
  632. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #23282e;
  633. }
  634. }
  635. @media (min-width: 782px) and (prefers-reduced-motion: reduce) {
  636. .edit-post-fullscreen-mode-close.has-icon::before {
  637. transition-duration: 0s;
  638. transition-delay: 0s;
  639. }
  640. }
  641. @media (min-width: 782px) {
  642. .edit-post-fullscreen-mode-close.has-icon:hover::before {
  643. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #757575;
  644. }
  645. }
  646. @media (min-width: 782px) {
  647. .edit-post-fullscreen-mode-close.has-icon:focus::before {
  648. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba(255, 255, 255, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  649. }
  650. }
  651. .edit-post-fullscreen-mode-close_site-icon {
  652. width: 36px;
  653. border-radius: 2px;
  654. }
  655. .edit-post-header-toolbar {
  656. display: inline-flex;
  657. flex-grow: 1;
  658. align-items: center;
  659. border: none;
  660. }
  661. .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-button {
  662. display: none;
  663. }
  664. @media (min-width: 600px) {
  665. .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-button {
  666. display: inline-flex;
  667. }
  668. }
  669. .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle {
  670. display: inline-flex;
  671. }
  672. .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle svg {
  673. transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  674. }
  675. @media (prefers-reduced-motion: reduce) {
  676. .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle svg {
  677. transition-duration: 0s;
  678. transition-delay: 0s;
  679. }
  680. }
  681. .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.is-pressed svg {
  682. transform: rotate(-45deg);
  683. }
  684. .edit-post-header-toolbar .block-editor-block-navigation {
  685. display: none;
  686. }
  687. @media (min-width: 600px) {
  688. .edit-post-header-toolbar .block-editor-block-navigation {
  689. display: flex;
  690. }
  691. }
  692. .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-button.has-icon,
  693. .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon {
  694. height: 36px;
  695. min-width: 36px;
  696. padding: 6px;
  697. }
  698. .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-button.has-icon.is-pressed,
  699. .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon.is-pressed {
  700. background: #1e1e1e;
  701. }
  702. .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-button.has-icon:focus:not(:disabled),
  703. .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon:focus:not(:disabled) {
  704. box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
  705. outline: 1px solid transparent;
  706. }
  707. .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-button.has-icon::before,
  708. .edit-post-header-toolbar .edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon::before {
  709. display: none;
  710. }
  711. @media (min-width: 600px) {
  712. .edit-post-header.has-reduced-ui .edit-post-header-toolbar__left > * + .components-button,
  713. .edit-post-header.has-reduced-ui .edit-post-header-toolbar__left > * + .components-dropdown > [aria-expanded=false] {
  714. transition: opacity 0.1s linear;
  715. }
  716. }
  717. @media (min-width: 600px) and (prefers-reduced-motion: reduce) {
  718. .edit-post-header.has-reduced-ui .edit-post-header-toolbar__left > * + .components-button,
  719. .edit-post-header.has-reduced-ui .edit-post-header-toolbar__left > * + .components-dropdown > [aria-expanded=false] {
  720. transition-duration: 0s;
  721. transition-delay: 0s;
  722. }
  723. }
  724. @media (min-width: 600px) {
  725. .edit-post-header.has-reduced-ui:not(:hover) .edit-post-header-toolbar__left > * + .components-button, .edit-post-header.has-reduced-ui:not(:hover) .edit-post-header-toolbar__left > * + .components-dropdown > [aria-expanded=false] {
  726. opacity: 0;
  727. }
  728. }
  729. .edit-post-header-toolbar__left {
  730. display: inline-flex;
  731. align-items: center;
  732. padding-right: 8px;
  733. }
  734. @media (min-width: 600px) {
  735. .edit-post-header-toolbar__left {
  736. padding-right: 24px;
  737. }
  738. }
  739. @media (min-width: 1280px) {
  740. .edit-post-header-toolbar__left {
  741. padding-left: 8px;
  742. }
  743. }
  744. .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon {
  745. margin-left: 8px;
  746. min-width: 32px;
  747. width: 32px;
  748. height: 32px;
  749. padding: 0;
  750. }
  751. .show-icon-labels .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon {
  752. height: 36px;
  753. }
  754. .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-text.has-icon {
  755. width: auto;
  756. padding: 0 8px;
  757. }
  758. .show-icon-labels .edit-post-header-toolbar__left > * + * {
  759. margin-right: 8px;
  760. }
  761. .edit-post-more-menu {
  762. margin-right: -4px;
  763. }
  764. .edit-post-more-menu .components-button {
  765. width: auto;
  766. padding: 0 2px;
  767. }
  768. @media (min-width: 600px) {
  769. .edit-post-more-menu {
  770. margin-right: 0;
  771. }
  772. .edit-post-more-menu .components-button {
  773. padding: 0 4px;
  774. }
  775. }
  776. .edit-post-more-menu__content .components-popover__content {
  777. min-width: 280px;
  778. }
  779. @media (min-width: 480px) {
  780. .edit-post-more-menu__content .components-popover__content {
  781. width: auto;
  782. max-width: 480px;
  783. }
  784. }
  785. .edit-post-more-menu__content .components-popover__content .components-dropdown-menu__menu {
  786. padding: 0;
  787. }
  788. .components-popover.edit-post-more-menu__content {
  789. z-index: 99998;
  790. }
  791. .edit-post-template-top-area {
  792. display: flex;
  793. flex-direction: column;
  794. align-content: space-between;
  795. width: 100%;
  796. align-items: center;
  797. }
  798. .edit-post-template-top-area .edit-post-template-title,
  799. .edit-post-template-top-area .edit-post-template-post-title {
  800. padding: 0;
  801. text-decoration: none;
  802. height: auto;
  803. }
  804. .edit-post-template-top-area .edit-post-template-title::before,
  805. .edit-post-template-top-area .edit-post-template-post-title::before {
  806. height: 100%;
  807. }
  808. .edit-post-template-top-area .edit-post-template-title.has-icon svg,
  809. .edit-post-template-top-area .edit-post-template-post-title.has-icon svg {
  810. order: 1;
  811. margin-left: 0;
  812. }
  813. .edit-post-template-top-area .edit-post-template-title {
  814. color: #1e1e1e;
  815. }
  816. .edit-post-template-top-area .edit-post-template-post-title {
  817. margin-top: 4px;
  818. max-width: 160px;
  819. white-space: nowrap;
  820. overflow: hidden;
  821. text-overflow: ellipsis;
  822. display: block;
  823. }
  824. .edit-post-template-top-area .edit-post-template-post-title::before {
  825. right: 0;
  826. left: 0;
  827. }
  828. @media (min-width: 1080px) {
  829. .edit-post-template-top-area .edit-post-template-post-title {
  830. max-width: none;
  831. }
  832. }
  833. .edit-post-template-top-area__popover .components-popover__content {
  834. min-width: 280px;
  835. }
  836. .edit-post-template-top-area__second-menu-group {
  837. margin-right: -12px;
  838. margin-left: -12px;
  839. padding: 12px;
  840. padding-bottom: 0;
  841. border-top: 1px solid #ddd;
  842. }
  843. .edit-post-template-top-area__second-menu-group .edit-post-template-top-area__delete-template-button {
  844. display: flex;
  845. justify-content: center;
  846. }
  847. .edit-post-template-top-area__second-menu-group .edit-post-template-top-area__delete-template-button .components-menu-item__item {
  848. margin-left: 0;
  849. }
  850. .edit-post-keyboard-shortcut-help-modal__section {
  851. margin: 0 0 2rem 0;
  852. }
  853. .edit-post-keyboard-shortcut-help-modal__main-shortcuts .edit-post-keyboard-shortcut-help-modal__shortcut-list {
  854. margin-top: -25px;
  855. }
  856. .edit-post-keyboard-shortcut-help-modal__section-title {
  857. font-size: 0.9rem;
  858. font-weight: 600;
  859. }
  860. .edit-post-keyboard-shortcut-help-modal__shortcut {
  861. display: flex;
  862. align-items: baseline;
  863. padding: 0.6rem 0;
  864. border-top: 1px solid #ddd;
  865. margin-bottom: 0;
  866. }
  867. .edit-post-keyboard-shortcut-help-modal__shortcut:last-child {
  868. border-bottom: 1px solid #ddd;
  869. }
  870. .edit-post-keyboard-shortcut-help-modal__shortcut:empty {
  871. display: none;
  872. }
  873. .edit-post-keyboard-shortcut-help-modal__shortcut-term {
  874. font-weight: 600;
  875. margin: 0 1rem 0 0;
  876. text-align: left;
  877. }
  878. .edit-post-keyboard-shortcut-help-modal__shortcut-description {
  879. flex: 1;
  880. margin: 0;
  881. flex-basis: auto;
  882. }
  883. .edit-post-keyboard-shortcut-help-modal__shortcut-key-combination {
  884. display: block;
  885. background: none;
  886. margin: 0;
  887. padding: 0;
  888. }
  889. .edit-post-keyboard-shortcut-help-modal__shortcut-key-combination + .edit-post-keyboard-shortcut-help-modal__shortcut-key-combination {
  890. margin-top: 10px;
  891. }
  892. .edit-post-keyboard-shortcut-help-modal__shortcut-key {
  893. padding: 0.25rem 0.5rem;
  894. border-radius: 8%;
  895. margin: 0 0.2rem 0 0.2rem;
  896. }
  897. .edit-post-keyboard-shortcut-help-modal__shortcut-key:last-child {
  898. margin: 0 0.2rem 0 0;
  899. }
  900. .edit-post-layout__metaboxes {
  901. flex-shrink: 0;
  902. }
  903. .edit-post-layout__metaboxes:not(:empty) {
  904. border-top: 1px solid #ddd;
  905. padding: 10px 0 10px;
  906. clear: both;
  907. }
  908. .edit-post-layout__metaboxes:not(:empty) .edit-post-meta-boxes-area {
  909. margin: auto 20px;
  910. }
  911. .edit-post-layout .components-editor-notices__snackbar {
  912. position: fixed;
  913. left: 0;
  914. bottom: 40px;
  915. padding-right: 16px;
  916. padding-left: 16px;
  917. }
  918. .edit-post-layout .components-editor-notices__snackbar {
  919. /* Set left position when auto-fold is not on the body element. */
  920. right: 0;
  921. }
  922. @media (min-width: 783px) {
  923. .edit-post-layout .components-editor-notices__snackbar {
  924. right: 160px;
  925. }
  926. }
  927. .auto-fold .edit-post-layout .components-editor-notices__snackbar {
  928. /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
  929. }
  930. @media (min-width: 783px) {
  931. .auto-fold .edit-post-layout .components-editor-notices__snackbar {
  932. right: 36px;
  933. }
  934. }
  935. @media (min-width: 961px) {
  936. .auto-fold .edit-post-layout .components-editor-notices__snackbar {
  937. right: 160px;
  938. }
  939. }
  940. /* Sidebar manually collapsed. */
  941. .folded .edit-post-layout .components-editor-notices__snackbar {
  942. right: 0;
  943. }
  944. @media (min-width: 783px) {
  945. .folded .edit-post-layout .components-editor-notices__snackbar {
  946. right: 36px;
  947. }
  948. }
  949. body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
  950. right: 0 !important;
  951. }
  952. .edit-post-layout .editor-post-publish-panel {
  953. position: fixed;
  954. z-index: 100001;
  955. top: 46px;
  956. bottom: 0;
  957. left: 0;
  958. right: 0;
  959. overflow: auto;
  960. }
  961. @media (min-width: 782px) {
  962. .edit-post-layout .editor-post-publish-panel {
  963. z-index: 99998;
  964. top: 32px;
  965. right: auto;
  966. width: 281px;
  967. border-right: 1px solid #ddd;
  968. transform: translateX(-100%);
  969. animation: edit-post-post-publish-panel__slide-in-animation 0.1s forwards;
  970. }
  971. }
  972. @media (min-width: 782px) and (prefers-reduced-motion: reduce) {
  973. .edit-post-layout .editor-post-publish-panel {
  974. animation-duration: 1ms;
  975. animation-delay: 0s;
  976. }
  977. }
  978. @media (min-width: 782px) {
  979. body.is-fullscreen-mode .edit-post-layout .editor-post-publish-panel {
  980. top: 0;
  981. }
  982. }
  983. @media (min-width: 782px) {
  984. [role=region]:focus .edit-post-layout .editor-post-publish-panel {
  985. transform: translateX(0%);
  986. }
  987. }
  988. @keyframes edit-post-post-publish-panel__slide-in-animation {
  989. 100% {
  990. transform: translateX(0%);
  991. }
  992. }
  993. .edit-post-layout .editor-post-publish-panel__header-publish-button {
  994. justify-content: center;
  995. }
  996. .edit-post-layout__toggle-publish-panel,
  997. .edit-post-layout__toggle-sidebar-panel,
  998. .edit-post-layout__toggle-entities-saved-states-panel {
  999. z-index: 100000;
  1000. position: fixed !important;
  1001. top: -9999em;
  1002. bottom: auto;
  1003. right: auto;
  1004. left: 0;
  1005. width: 280px;
  1006. background-color: #fff;
  1007. border: 1px dotted #ddd;
  1008. height: auto !important;
  1009. padding: 24px;
  1010. display: flex;
  1011. justify-content: center;
  1012. }
  1013. .interface-interface-skeleton__actions:focus .edit-post-layout__toggle-publish-panel, .interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-publish-panel,
  1014. .interface-interface-skeleton__actions:focus .edit-post-layout__toggle-sidebar-panel,
  1015. .interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-sidebar-panel,
  1016. .interface-interface-skeleton__actions:focus .edit-post-layout__toggle-entities-saved-states-panel,
  1017. .interface-interface-skeleton__actions:focus-within .edit-post-layout__toggle-entities-saved-states-panel {
  1018. top: auto;
  1019. bottom: 0;
  1020. }
  1021. @media (min-width: 600px) {
  1022. .edit-post-manage-blocks-modal {
  1023. height: calc(100% - 60px - 60px);
  1024. }
  1025. }
  1026. .edit-post-manage-blocks-modal .components-modal__content {
  1027. padding-bottom: 0;
  1028. display: flex;
  1029. flex-direction: column;
  1030. }
  1031. .edit-post-manage-blocks-modal .components-modal__header {
  1032. flex-shrink: 0;
  1033. margin-bottom: 0;
  1034. }
  1035. .edit-post-manage-blocks-modal__content {
  1036. display: flex;
  1037. flex-direction: column;
  1038. flex: 0 1 100%;
  1039. min-height: 0;
  1040. }
  1041. .edit-post-manage-blocks-modal__no-results {
  1042. font-style: italic;
  1043. padding: 24px 0;
  1044. text-align: center;
  1045. }
  1046. .edit-post-manage-blocks-modal__search {
  1047. margin: 16px 0;
  1048. }
  1049. .edit-post-manage-blocks-modal__search .components-base-control__field {
  1050. margin-bottom: 0;
  1051. }
  1052. .edit-post-manage-blocks-modal__search .components-base-control__label {
  1053. margin-top: -4px;
  1054. }
  1055. .edit-post-manage-blocks-modal__search input[type=search].components-text-control__input {
  1056. padding: 8px;
  1057. border-radius: 2px;
  1058. }
  1059. .edit-post-manage-blocks-modal__disabled-blocks-count {
  1060. border-top: 1px solid #ddd;
  1061. margin-right: -24px;
  1062. margin-left: -24px;
  1063. padding-top: 0.6rem;
  1064. padding-bottom: 0.6rem;
  1065. padding-right: 24px;
  1066. padding-left: 24px;
  1067. background-color: #f0f0f0;
  1068. }
  1069. .edit-post-manage-blocks-modal__category {
  1070. margin: 0 0 2rem 0;
  1071. }
  1072. .edit-post-manage-blocks-modal__category-title {
  1073. position: sticky;
  1074. top: 0;
  1075. padding: 16px 0;
  1076. background-color: #fff;
  1077. z-index: 1;
  1078. }
  1079. .edit-post-manage-blocks-modal__category-title .components-base-control__field {
  1080. margin-bottom: 0;
  1081. }
  1082. .edit-post-manage-blocks-modal__category-title .components-checkbox-control__label {
  1083. font-size: 0.9rem;
  1084. font-weight: 600;
  1085. }
  1086. .edit-post-manage-blocks-modal__show-all {
  1087. margin-left: 8px;
  1088. }
  1089. .edit-post-manage-blocks-modal__checklist {
  1090. margin-top: 0;
  1091. }
  1092. .edit-post-manage-blocks-modal__checklist-item {
  1093. margin-bottom: 0;
  1094. padding-right: 16px;
  1095. border-top: 1px solid #ddd;
  1096. }
  1097. .edit-post-manage-blocks-modal__checklist-item:last-child {
  1098. border-bottom: 1px solid #ddd;
  1099. }
  1100. .edit-post-manage-blocks-modal__checklist-item .components-base-control__field {
  1101. align-items: center;
  1102. display: flex;
  1103. margin: 0;
  1104. }
  1105. .components-modal__content .edit-post-manage-blocks-modal__checklist-item.components-checkbox-control__input-container {
  1106. margin: 0 8px;
  1107. }
  1108. .edit-post-manage-blocks-modal__checklist-item .components-checkbox-control__label {
  1109. display: flex;
  1110. align-items: center;
  1111. justify-content: space-between;
  1112. flex-grow: 1;
  1113. padding: 0.6rem 10px 0.6rem 0;
  1114. }
  1115. .edit-post-manage-blocks-modal__checklist-item .block-editor-block-icon {
  1116. margin-left: 10px;
  1117. fill: #1e1e1e;
  1118. }
  1119. .edit-post-manage-blocks-modal__results {
  1120. height: 100%;
  1121. overflow: auto;
  1122. margin-right: -32px;
  1123. margin-left: -32px;
  1124. padding-right: 32px;
  1125. padding-left: 32px;
  1126. border-top: 1px solid #ddd;
  1127. }
  1128. .edit-post-meta-boxes-area {
  1129. position: relative;
  1130. /**
  1131. * The wordpress default for most meta-box elements is content-box. Some
  1132. * elements such as textarea and input are set to border-box in forms.css.
  1133. * These elements therefore specifically set back to border-box here, while
  1134. * other elements (such as .button) are unaffected by Gutenberg's style
  1135. * because of their higher specificity.
  1136. */
  1137. /* Match width and positioning of the meta boxes. Override default styles. */
  1138. /* Override Default meta box stylings */
  1139. }
  1140. .edit-post-meta-boxes-area__container,
  1141. .edit-post-meta-boxes-area .inside {
  1142. box-sizing: content-box;
  1143. }
  1144. .edit-post-meta-boxes-area textarea,
  1145. .edit-post-meta-boxes-area input {
  1146. box-sizing: border-box;
  1147. }
  1148. .edit-post-meta-boxes-area #poststuff {
  1149. margin: 0 auto;
  1150. padding-top: 0;
  1151. min-width: auto;
  1152. }
  1153. .edit-post-meta-boxes-area #poststuff h3.hndle,
  1154. .edit-post-meta-boxes-area #poststuff .stuffbox > h3,
  1155. .edit-post-meta-boxes-area #poststuff h2.hndle {
  1156. /* WordPress selectors yolo */
  1157. box-sizing: border-box;
  1158. color: inherit;
  1159. font-weight: 600;
  1160. outline: none;
  1161. padding: 15px;
  1162. position: relative;
  1163. width: 100%;
  1164. }
  1165. .edit-post-meta-boxes-area .postbox {
  1166. border: 0;
  1167. color: inherit;
  1168. margin-bottom: 0;
  1169. }
  1170. .edit-post-meta-boxes-area .postbox > .inside {
  1171. border-bottom: 1px solid #ddd;
  1172. color: inherit;
  1173. padding: 0 14px 14px;
  1174. margin: 0;
  1175. }
  1176. .edit-post-meta-boxes-area .postbox .handlediv {
  1177. height: 44px;
  1178. width: 44px;
  1179. }
  1180. .edit-post-meta-boxes-area.is-loading::before {
  1181. position: absolute;
  1182. top: 0;
  1183. right: 0;
  1184. left: 0;
  1185. bottom: 0;
  1186. content: "";
  1187. background: transparent;
  1188. z-index: 1;
  1189. }
  1190. .edit-post-meta-boxes-area .components-spinner {
  1191. position: absolute;
  1192. top: 10px;
  1193. left: 20px;
  1194. z-index: 5;
  1195. }
  1196. .edit-post-meta-boxes-area .is-hidden {
  1197. display: none;
  1198. }
  1199. .edit-post-meta-boxes-area .metabox-location-side .postbox input[type=checkbox] {
  1200. border: 1px solid #757575;
  1201. }
  1202. .edit-post-meta-boxes-area .metabox-location-side .postbox input[type=checkbox]:checked {
  1203. background: #fff;
  1204. border-color: #757575;
  1205. }
  1206. .edit-post-meta-boxes-area .metabox-location-side .postbox input[type=checkbox]::before {
  1207. margin: -3px -4px;
  1208. }
  1209. .edit-post-meta-boxes-area__clear {
  1210. clear: both;
  1211. }
  1212. .edit-post-preferences-modal {
  1213. min-width: 360px;
  1214. width: 100%;
  1215. }
  1216. @media (min-width: 782px) {
  1217. .edit-post-preferences-modal {
  1218. width: auto;
  1219. }
  1220. }
  1221. @media (min-width: 600px) {
  1222. .edit-post-preferences-modal {
  1223. height: calc(100% - 60px - 60px);
  1224. }
  1225. }
  1226. .edit-post-preferences-modal .components-navigation {
  1227. background-color: #fff;
  1228. margin: -8px;
  1229. padding: 8px;
  1230. }
  1231. .edit-post-preferences-modal .components-navigation .components-navigation__menu {
  1232. margin: 0;
  1233. color: #1e1e1e;
  1234. }
  1235. .edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item {
  1236. color: #1e1e1e;
  1237. }
  1238. .edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item > button {
  1239. color: inherit;
  1240. padding: 3px 16px;
  1241. height: 48px;
  1242. }
  1243. .edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item > button:focus {
  1244. background: #f0f0f0;
  1245. font-weight: 500;
  1246. }
  1247. .edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item > button:hover {
  1248. color: var(--wp-admin-theme-color);
  1249. }
  1250. .edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__item .components-toggle-control__label {
  1251. color: inherit;
  1252. }
  1253. .edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__menu-title-heading {
  1254. color: inherit;
  1255. border-bottom: 1px solid #ddd;
  1256. padding-right: 0;
  1257. padding-left: 0;
  1258. }
  1259. .edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__back-button {
  1260. color: inherit;
  1261. padding-right: 0;
  1262. }
  1263. .edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__back-button:hover {
  1264. color: var(--wp-admin-theme-color);
  1265. }
  1266. .edit-post-preferences-modal .components-navigation .components-navigation__menu .edit-post-preferences-modal__custom-fields-confirmation-button {
  1267. width: auto;
  1268. }
  1269. .edit-post-preferences-modal .edit-post-preferences__tabs {
  1270. display: flex;
  1271. flex-direction: row;
  1272. }
  1273. .edit-post-preferences-modal .edit-post-preferences__tabs .components-tab-panel__tabs {
  1274. width: 160px;
  1275. }
  1276. .edit-post-preferences-modal .edit-post-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item {
  1277. border-radius: 2px;
  1278. font-weight: 400;
  1279. }
  1280. .edit-post-preferences-modal .edit-post-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item.is-active {
  1281. background: #f0f0f0;
  1282. box-shadow: none;
  1283. font-weight: 500;
  1284. }
  1285. .edit-post-preferences-modal .edit-post-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item:focus:not(:disabled) {
  1286. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  1287. }
  1288. .edit-post-preferences-modal .edit-post-preferences__tabs .components-tab-panel__tab-content {
  1289. width: 500px;
  1290. padding-right: 24px;
  1291. }
  1292. .edit-post-preferences-modal__section {
  1293. margin: 0 0 2.5rem 0;
  1294. }
  1295. .edit-post-preferences-modal__section-title {
  1296. font-size: 0.9rem;
  1297. font-weight: 600;
  1298. }
  1299. .edit-post-preferences-modal__option .components-base-control .components-base-control__field {
  1300. align-items: center;
  1301. display: flex;
  1302. margin-bottom: 0;
  1303. }
  1304. .edit-post-preferences-modal__option .components-base-control .components-base-control__field > label {
  1305. flex-grow: 1;
  1306. padding: 0.6rem 10px 0.6rem 0;
  1307. }
  1308. .edit-post-preferences-modal__custom-fields-confirmation-message, .edit-post-preferences-modal__custom-fields-confirmation-button {
  1309. margin: 0 48px 0.6rem 0;
  1310. }
  1311. @media (min-width: 782px) {
  1312. .edit-post-preferences-modal__custom-fields-confirmation-message, .edit-post-preferences-modal__custom-fields-confirmation-button {
  1313. margin-right: 38px;
  1314. }
  1315. }
  1316. @media (min-width: 600px) {
  1317. .edit-post-preferences-modal__custom-fields-confirmation-message, .edit-post-preferences-modal__custom-fields-confirmation-button {
  1318. max-width: 300px;
  1319. }
  1320. }
  1321. .edit-post-preferences-modal .components-base-control__help {
  1322. margin: -8px 58px 8px 0;
  1323. font-size: 12px;
  1324. font-style: normal;
  1325. color: #757575;
  1326. }
  1327. .edit-post-preferences-modal .edit-post-preferences-modal__section-description {
  1328. margin: -8px 0 8px 0;
  1329. font-size: 12px;
  1330. font-style: normal;
  1331. color: #757575;
  1332. }
  1333. .edit-post-editor__inserter-panel,
  1334. .edit-post-editor__list-view-panel {
  1335. height: 100%;
  1336. display: flex;
  1337. flex-direction: column;
  1338. }
  1339. .edit-post-editor__list-view-panel {
  1340. min-width: 350px;
  1341. }
  1342. .edit-post-editor__inserter-panel-header {
  1343. padding-top: 8px;
  1344. padding-left: 8px;
  1345. display: flex;
  1346. justify-content: flex-end;
  1347. }
  1348. @media (min-width: 782px) {
  1349. .edit-post-editor__inserter-panel-header {
  1350. display: none;
  1351. }
  1352. }
  1353. .edit-post-editor__inserter-panel-content,
  1354. .edit-post-editor__list-view-panel-content {
  1355. height: calc(100% - 36px - 8px);
  1356. }
  1357. @media (min-width: 782px) {
  1358. .edit-post-editor__inserter-panel-content {
  1359. height: 100%;
  1360. }
  1361. }
  1362. .edit-post-editor__list-view-panel-header {
  1363. align-items: center;
  1364. border-bottom: 1px solid #ddd;
  1365. display: flex;
  1366. justify-content: space-between;
  1367. height: 48px;
  1368. padding-right: 16px;
  1369. padding-left: 4px;
  1370. }
  1371. .edit-post-editor__list-view-panel-content {
  1372. overflow-y: auto;
  1373. padding: 8px;
  1374. }
  1375. .components-panel__header.edit-post-sidebar__panel-tabs {
  1376. justify-content: flex-start;
  1377. padding-right: 0;
  1378. padding-left: 16px;
  1379. border-top: 0;
  1380. margin-top: 0;
  1381. }
  1382. .components-panel__header.edit-post-sidebar__panel-tabs ul {
  1383. display: flex;
  1384. }
  1385. .components-panel__header.edit-post-sidebar__panel-tabs li {
  1386. margin: 0;
  1387. }
  1388. .components-panel__header.edit-post-sidebar__panel-tabs .components-button.has-icon {
  1389. display: none;
  1390. margin: 0 auto 0 0;
  1391. padding: 0;
  1392. min-width: 24px;
  1393. height: 24px;
  1394. }
  1395. @media (min-width: 782px) {
  1396. .components-panel__header.edit-post-sidebar__panel-tabs .components-button.has-icon {
  1397. display: flex;
  1398. }
  1399. }
  1400. .components-panel__body.is-opened.edit-post-last-revision__panel {
  1401. padding: 0;
  1402. height: 48px;
  1403. }
  1404. .editor-post-last-revision__title.components-button {
  1405. padding: 16px;
  1406. }
  1407. .editor-post-author__select {
  1408. margin: -5px 0;
  1409. width: 100%;
  1410. }
  1411. @supports (position: sticky) {
  1412. .editor-post-author__select {
  1413. width: auto;
  1414. }
  1415. }
  1416. .edit-post-post-link__link-post-name {
  1417. font-weight: 600;
  1418. }
  1419. .edit-post-post-link__preview-label {
  1420. font-weight: 400;
  1421. margin: 0;
  1422. }
  1423. .edit-post-post-link__link {
  1424. text-align: right;
  1425. word-wrap: break-word;
  1426. display: block;
  1427. }
  1428. .edit-post-post-link__preview-link-container {
  1429. direction: ltr;
  1430. }
  1431. .edit-post-post-schedule {
  1432. width: 100%;
  1433. position: relative;
  1434. justify-content: left;
  1435. }
  1436. .edit-post-post-schedule span {
  1437. display: block;
  1438. width: 45%;
  1439. }
  1440. .components-button.edit-post-post-schedule__toggle {
  1441. text-align: left;
  1442. }
  1443. .edit-post-post-schedule__dialog .components-popover__content > div {
  1444. padding: 0;
  1445. }
  1446. .editor-post-slug__input {
  1447. margin: -5px 0;
  1448. padding: 2px;
  1449. }
  1450. .edit-post-post-status .edit-post-post-publish-dropdown__switch-to-draft {
  1451. margin-top: 15px;
  1452. width: 100%;
  1453. text-align: center;
  1454. }
  1455. .edit-post-post-visibility {
  1456. width: 100%;
  1457. justify-content: left;
  1458. }
  1459. .edit-post-post-visibility span {
  1460. display: block;
  1461. width: 45%;
  1462. }
  1463. @media (min-width: 782px) {
  1464. .edit-post-post-visibility__dialog .components-popover__content {
  1465. width: 257px;
  1466. }
  1467. }
  1468. .edit-post-post-visibility__dialog-legend {
  1469. font-weight: 600;
  1470. }
  1471. .edit-post-post-visibility__choice {
  1472. margin: 10px 0;
  1473. }
  1474. .edit-post-post-visibility__dialog-radio,
  1475. .edit-post-post-visibility__dialog-label {
  1476. vertical-align: top;
  1477. }
  1478. .edit-post-post-visibility__dialog-password-input {
  1479. width: calc(100% - 20px);
  1480. margin-right: 20px;
  1481. }
  1482. .edit-post-post-visibility__dialog-info {
  1483. color: #757575;
  1484. padding-right: 20px;
  1485. font-style: italic;
  1486. margin: 4px 0 0;
  1487. line-height: 1.4;
  1488. }
  1489. .components-button.edit-post-sidebar__panel-tab {
  1490. border-radius: 0;
  1491. height: 48px;
  1492. background: transparent;
  1493. border: none;
  1494. box-shadow: none;
  1495. cursor: pointer;
  1496. display: inline-block;
  1497. padding: 3px 15px;
  1498. margin-right: 0;
  1499. font-weight: 500;
  1500. }
  1501. .components-button.edit-post-sidebar__panel-tab::after {
  1502. content: attr(data-label);
  1503. display: block;
  1504. font-weight: 600;
  1505. height: 0;
  1506. overflow: hidden;
  1507. speak: none;
  1508. visibility: hidden;
  1509. }
  1510. .components-button.edit-post-sidebar__panel-tab.is-active {
  1511. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color);
  1512. position: relative;
  1513. z-index: 1;
  1514. }
  1515. .components-button.edit-post-sidebar__panel-tab.is-active::before {
  1516. content: "";
  1517. position: absolute;
  1518. top: 0;
  1519. bottom: 1px;
  1520. left: 0;
  1521. right: 0;
  1522. border-bottom: 4px solid transparent;
  1523. }
  1524. .components-button.edit-post-sidebar__panel-tab:focus {
  1525. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  1526. position: relative;
  1527. z-index: 1;
  1528. }
  1529. .components-button.edit-post-sidebar__panel-tab.is-active:focus {
  1530. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -4px 0 0 var(--wp-admin-theme-color);
  1531. }
  1532. @media (min-width: 782px) {
  1533. .edit-post-template__modal .components-base-control {
  1534. width: 320px;
  1535. }
  1536. }
  1537. .edit-post-template__modal .components-modal__header {
  1538. border-bottom: none;
  1539. }
  1540. .edit-post-template__modal .components-modal__content::before {
  1541. margin-bottom: 4px;
  1542. }
  1543. .edit-post-template__modal-actions {
  1544. margin-top: 12px;
  1545. }
  1546. .edit-post-template-modal__tip {
  1547. padding: 16px 24px;
  1548. background: #f0f0f0;
  1549. border-radius: 2px;
  1550. }
  1551. @media (min-width: 782px) {
  1552. .edit-post-template-modal__tip {
  1553. width: 240px;
  1554. }
  1555. }
  1556. .edit-post-template__actions button:not(:last-child) {
  1557. margin-left: 8px;
  1558. }
  1559. h2.edit-post-template-summary__title {
  1560. margin: 0;
  1561. line-height: 24px;
  1562. }
  1563. .edit-post-text-editor {
  1564. position: relative;
  1565. width: 100%;
  1566. background-color: #fff;
  1567. flex-grow: 1;
  1568. }
  1569. .edit-post-text-editor .editor-post-title.editor-post-title__block {
  1570. max-width: none;
  1571. line-height: 1.4;
  1572. }
  1573. .edit-post-text-editor .editor-post-title.editor-post-title__block .editor-post-title__input.editor-post-title__input.editor-post-title__input {
  1574. font-family: Menlo, Consolas, monaco, monospace;
  1575. font-size: 2.5em;
  1576. font-weight: normal;
  1577. }
  1578. .edit-post-text-editor .editor-post-title.editor-post-title__block .editor-post-title__input {
  1579. border: 1px solid #949494;
  1580. margin-bottom: -1px;
  1581. padding: 16px;
  1582. }
  1583. @media (min-width: 600px) {
  1584. .edit-post-text-editor .editor-post-title.editor-post-title__block .editor-post-title__input {
  1585. padding: 24px;
  1586. }
  1587. }
  1588. .edit-post-text-editor .editor-post-title.editor-post-title__block .editor-post-title__input:focus {
  1589. border-color: var(--wp-admin-theme-color);
  1590. box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  1591. }
  1592. @media (min-width: 600px) {
  1593. .edit-post-text-editor .editor-post-title.editor-post-title__block {
  1594. padding: 0;
  1595. }
  1596. }
  1597. .edit-post-text-editor__body {
  1598. width: 100%;
  1599. padding: 0 12px 12px 12px;
  1600. max-width: 1080px;
  1601. margin-right: auto;
  1602. margin-left: auto;
  1603. }
  1604. @media (min-width: 960px) {
  1605. .edit-post-text-editor__body {
  1606. padding: 16px 24px 96px 24px;
  1607. padding: 0 24px 24px 24px;
  1608. }
  1609. }
  1610. .edit-post-text-editor__toolbar {
  1611. position: sticky;
  1612. z-index: 1;
  1613. top: 0;
  1614. right: 0;
  1615. left: 0;
  1616. display: flex;
  1617. background: rgba(255, 255, 255, 0.8);
  1618. padding: 4px 12px;
  1619. }
  1620. @media (min-width: 600px) {
  1621. .edit-post-text-editor__toolbar {
  1622. padding: 12px;
  1623. }
  1624. }
  1625. @media (min-width: 960px) {
  1626. .edit-post-text-editor__toolbar {
  1627. padding: 12px 24px;
  1628. }
  1629. }
  1630. .edit-post-text-editor__toolbar h2 {
  1631. line-height: 36px;
  1632. margin: 0 0 0 auto;
  1633. font-size: 13px;
  1634. color: #1e1e1e;
  1635. }
  1636. .edit-post-text-editor__toolbar .components-button svg {
  1637. order: 1;
  1638. }
  1639. .edit-post-visual-editor {
  1640. position: relative;
  1641. display: flex;
  1642. flex-flow: column;
  1643. background-color: #2f2f2f;
  1644. flex: 1 1 auto;
  1645. }
  1646. .edit-post-visual-editor .components-button {
  1647. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  1648. font-size: 13px;
  1649. padding: 6px 12px;
  1650. }
  1651. .edit-post-visual-editor .components-button.is-tertiary, .edit-post-visual-editor .components-button.has-icon {
  1652. padding: 6px;
  1653. }
  1654. @supports (position: sticky) {
  1655. .edit-post-visual-editor {
  1656. flex-basis: 100%;
  1657. }
  1658. }
  1659. .edit-post-visual-editor__post-title-wrapper .editor-post-title {
  1660. margin-top: 2em;
  1661. margin-right: auto;
  1662. margin-left: auto;
  1663. margin-bottom: 0;
  1664. }
  1665. .edit-post-visual-editor__exit-template-mode {
  1666. position: absolute;
  1667. top: 8px;
  1668. right: 8px;
  1669. color: #fff;
  1670. }
  1671. .edit-post-visual-editor__exit-template-mode:active:not([aria-disabled=true]), .edit-post-visual-editor__exit-template-mode:focus:not([aria-disabled=true]), .edit-post-visual-editor__exit-template-mode:hover {
  1672. color: #f0f0f0;
  1673. }
  1674. .edit-post-visual-editor__content-area {
  1675. width: 100%;
  1676. height: 100%;
  1677. position: relative;
  1678. display: flex;
  1679. }
  1680. .edit-post-welcome-guide {
  1681. width: 312px;
  1682. }
  1683. .edit-post-welcome-guide__image {
  1684. background: #00a0d2;
  1685. margin: 0 0 16px;
  1686. }
  1687. .edit-post-welcome-guide__heading {
  1688. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  1689. font-size: 24px;
  1690. line-height: 1.4;
  1691. margin: 16px 0 16px 0;
  1692. padding: 0 32px;
  1693. }
  1694. .edit-post-welcome-guide__text {
  1695. font-size: 13px;
  1696. line-height: 1.4;
  1697. margin: 0 0 24px 0;
  1698. padding: 0 32px;
  1699. }
  1700. .edit-post-welcome-guide__inserter-icon {
  1701. margin: 0 4px;
  1702. vertical-align: text-top;
  1703. }
  1704. /**
  1705. * Animations
  1706. */
  1707. @keyframes edit-post__fade-in-animation {
  1708. from {
  1709. opacity: 0;
  1710. }
  1711. to {
  1712. opacity: 1;
  1713. }
  1714. }
  1715. html.wp-toolbar {
  1716. background: #fff;
  1717. }
  1718. body.block-editor-page {
  1719. background: #fff;
  1720. /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
  1721. Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
  1722. }
  1723. body.block-editor-page #wpcontent {
  1724. padding-right: 0;
  1725. }
  1726. body.block-editor-page #wpbody-content {
  1727. padding-bottom: 0;
  1728. }
  1729. body.block-editor-page #wpbody-content > div:not(.block-editor):not(#screen-meta) {
  1730. display: none;
  1731. }
  1732. body.block-editor-page #wpfooter {
  1733. display: none;
  1734. }
  1735. body.block-editor-page .a11y-speak-region {
  1736. right: -1px;
  1737. top: -1px;
  1738. }
  1739. body.block-editor-page ul#adminmenu a.wp-has-current-submenu::after,
  1740. body.block-editor-page ul#adminmenu > li.current > a.current::after {
  1741. border-left-color: #fff;
  1742. }
  1743. body.block-editor-page .media-frame select.attachment-filters:last-of-type {
  1744. width: auto;
  1745. max-width: 100%;
  1746. }
  1747. .block-editor-page #wpwrap {
  1748. overflow-y: auto;
  1749. }
  1750. @media (min-width: 782px) {
  1751. .block-editor-page #wpwrap {
  1752. overflow-y: initial;
  1753. }
  1754. }
  1755. .edit-post-header,
  1756. .edit-post-visual-editor,
  1757. .edit-post-text-editor,
  1758. .edit-post-sidebar,
  1759. .editor-post-publish-panel,
  1760. .components-popover,
  1761. .components-modal__frame,
  1762. .edit-post-editor__inserter-panel {
  1763. box-sizing: border-box;
  1764. }
  1765. .edit-post-header *,
  1766. .edit-post-header *::before,
  1767. .edit-post-header *::after,
  1768. .edit-post-visual-editor *,
  1769. .edit-post-visual-editor *::before,
  1770. .edit-post-visual-editor *::after,
  1771. .edit-post-text-editor *,
  1772. .edit-post-text-editor *::before,
  1773. .edit-post-text-editor *::after,
  1774. .edit-post-sidebar *,
  1775. .edit-post-sidebar *::before,
  1776. .edit-post-sidebar *::after,
  1777. .editor-post-publish-panel *,
  1778. .editor-post-publish-panel *::before,
  1779. .editor-post-publish-panel *::after,
  1780. .components-popover *,
  1781. .components-popover *::before,
  1782. .components-popover *::after,
  1783. .components-modal__frame *,
  1784. .components-modal__frame *::before,
  1785. .components-modal__frame *::after,
  1786. .edit-post-editor__inserter-panel *,
  1787. .edit-post-editor__inserter-panel *::before,
  1788. .edit-post-editor__inserter-panel *::after {
  1789. box-sizing: inherit;
  1790. }
  1791. @media (min-width: 600px) {
  1792. .block-editor__container {
  1793. position: absolute;
  1794. top: 0;
  1795. left: 0;
  1796. bottom: 0;
  1797. right: 0;
  1798. min-height: calc(100vh - 46px);
  1799. }
  1800. }
  1801. @media (min-width: 782px) {
  1802. .block-editor__container {
  1803. min-height: calc(100vh - 32px);
  1804. }
  1805. body.is-fullscreen-mode .block-editor__container {
  1806. min-height: 100vh;
  1807. }
  1808. }
  1809. .block-editor__container img {
  1810. max-width: 100%;
  1811. height: auto;
  1812. }
  1813. .block-editor__container iframe {
  1814. width: 100%;
  1815. }
  1816. body.admin-color-light {
  1817. --wp-admin-theme-color: #0085ba;
  1818. --wp-admin-theme-color-darker-10: #0073a1;
  1819. --wp-admin-theme-color-darker-20: #006187;
  1820. --wp-admin-border-width-focus: 2px;
  1821. }
  1822. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  1823. body.admin-color-light {
  1824. --wp-admin-border-width-focus: 1.5px;
  1825. }
  1826. }
  1827. body.admin-color-modern {
  1828. --wp-admin-theme-color: #3858e9;
  1829. --wp-admin-theme-color-darker-10: #2145e6;
  1830. --wp-admin-theme-color-darker-20: #183ad6;
  1831. --wp-admin-border-width-focus: 2px;
  1832. }
  1833. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  1834. body.admin-color-modern {
  1835. --wp-admin-border-width-focus: 1.5px;
  1836. }
  1837. }
  1838. body.admin-color-blue {
  1839. --wp-admin-theme-color: #096484;
  1840. --wp-admin-theme-color-darker-10: #07526c;
  1841. --wp-admin-theme-color-darker-20: #064054;
  1842. --wp-admin-border-width-focus: 2px;
  1843. }
  1844. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  1845. body.admin-color-blue {
  1846. --wp-admin-border-width-focus: 1.5px;
  1847. }
  1848. }
  1849. body.admin-color-coffee {
  1850. --wp-admin-theme-color: #46403c;
  1851. --wp-admin-theme-color-darker-10: #383330;
  1852. --wp-admin-theme-color-darker-20: #2b2724;
  1853. --wp-admin-border-width-focus: 2px;
  1854. }
  1855. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  1856. body.admin-color-coffee {
  1857. --wp-admin-border-width-focus: 1.5px;
  1858. }
  1859. }
  1860. body.admin-color-ectoplasm {
  1861. --wp-admin-theme-color: #523f6d;
  1862. --wp-admin-theme-color-darker-10: #46365d;
  1863. --wp-admin-theme-color-darker-20: #3a2c4d;
  1864. --wp-admin-border-width-focus: 2px;
  1865. }
  1866. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  1867. body.admin-color-ectoplasm {
  1868. --wp-admin-border-width-focus: 1.5px;
  1869. }
  1870. }
  1871. body.admin-color-midnight {
  1872. --wp-admin-theme-color: #e14d43;
  1873. --wp-admin-theme-color-darker-10: #dd382d;
  1874. --wp-admin-theme-color-darker-20: #d02c21;
  1875. --wp-admin-border-width-focus: 2px;
  1876. }
  1877. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  1878. body.admin-color-midnight {
  1879. --wp-admin-border-width-focus: 1.5px;
  1880. }
  1881. }
  1882. body.admin-color-ocean {
  1883. --wp-admin-theme-color: #627c83;
  1884. --wp-admin-theme-color-darker-10: #576e74;
  1885. --wp-admin-theme-color-darker-20: #4c6066;
  1886. --wp-admin-border-width-focus: 2px;
  1887. }
  1888. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  1889. body.admin-color-ocean {
  1890. --wp-admin-border-width-focus: 1.5px;
  1891. }
  1892. }
  1893. body.admin-color-sunrise {
  1894. --wp-admin-theme-color: #dd823b;
  1895. --wp-admin-theme-color-darker-10: #d97426;
  1896. --wp-admin-theme-color-darker-20: #c36922;
  1897. --wp-admin-border-width-focus: 2px;
  1898. }
  1899. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  1900. body.admin-color-sunrise {
  1901. --wp-admin-border-width-focus: 1.5px;
  1902. }
  1903. }