暫無描述

style.css 53KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029
  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-right: 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-right: 4px;
  100. }
  101. .interface-complementary-area-header .components-button.has-icon {
  102. display: none;
  103. margin-left: auto;
  104. }
  105. .interface-complementary-area-header .components-button.has-icon ~ .components-button {
  106. margin-left: 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. right: 10px;
  171. bottom: 10px;
  172. left: 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-left: 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. left: 0;
  206. right: 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. left: 0;
  226. }
  227. @media (min-width: 783px) {
  228. .interface-interface-skeleton {
  229. left: 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. left: 36px;
  238. }
  239. }
  240. @media (min-width: 961px) {
  241. .auto-fold .interface-interface-skeleton {
  242. left: 160px;
  243. }
  244. }
  245. /* Sidebar manually collapsed. */
  246. .folded .interface-interface-skeleton {
  247. left: 0;
  248. }
  249. @media (min-width: 783px) {
  250. .folded .interface-interface-skeleton {
  251. left: 36px;
  252. }
  253. }
  254. body.is-fullscreen-mode .interface-interface-skeleton {
  255. left: 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. right: 0;
  283. bottom: 0;
  284. left: 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-left: 1px solid #e0e0e0;
  302. }
  303. }
  304. @media (min-width: 782px) {
  305. .interface-interface-skeleton__secondary-sidebar {
  306. border-right: 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. left: 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. left: auto;
  349. right: 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-left: 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-right: 4px;
  413. /**
  414. * Buttons in the Toolbar
  415. */
  416. }
  417. @media (min-width: 600px) {
  418. .edit-post-header__settings {
  419. padding-right: 16px;
  420. }
  421. }
  422. .edit-post-header__settings .editor-post-saved-state,
  423. .edit-post-header__settings .components-button.components-button {
  424. margin-right: 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-right: 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-right: 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-left: 8px;
  447. margin-right: auto;
  448. width: 100%;
  449. display: flex;
  450. justify-content: flex-start;
  451. }
  452. .edit-post-header-preview__button-external svg {
  453. margin-left: 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-left: 8px;
  517. padding-right: 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-left: 12px;
  527. padding-right: 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-left: 8px;
  534. padding-left: 8px;
  535. padding-right: 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-left: 12px;
  542. padding-left: 12px;
  543. padding-right: 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 6px 6px 40px;
  570. width: 14.625rem;
  571. text-align: left;
  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-left: -12px;
  579. margin-right: -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 6px 6px 8px;
  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-left: 40px;
  595. }
  596. .show-icon-labels.interface-pinned-items > .components-button.has-icon svg {
  597. margin-right: 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. right: 9px;
  629. bottom: 9px;
  630. left: 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-left: 8px;
  733. }
  734. @media (min-width: 600px) {
  735. .edit-post-header-toolbar__left {
  736. padding-left: 24px;
  737. }
  738. }
  739. @media (min-width: 1280px) {
  740. .edit-post-header-toolbar__left {
  741. padding-right: 8px;
  742. }
  743. }
  744. .edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon {
  745. margin-right: 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-left: 8px;
  760. }
  761. .edit-post-more-menu {
  762. margin-left: -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-left: 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-right: 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. left: 0;
  826. right: 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-left: -12px;
  838. margin-right: -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-right: 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 0 0 1rem;
  876. text-align: right;
  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 0 0.2rem;
  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. right: 0;
  914. bottom: 40px;
  915. padding-left: 16px;
  916. padding-right: 16px;
  917. }
  918. .edit-post-layout .components-editor-notices__snackbar {
  919. /* Set left position when auto-fold is not on the body element. */
  920. left: 0;
  921. }
  922. @media (min-width: 783px) {
  923. .edit-post-layout .components-editor-notices__snackbar {
  924. left: 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. left: 36px;
  933. }
  934. }
  935. @media (min-width: 961px) {
  936. .auto-fold .edit-post-layout .components-editor-notices__snackbar {
  937. left: 160px;
  938. }
  939. }
  940. /* Sidebar manually collapsed. */
  941. .folded .edit-post-layout .components-editor-notices__snackbar {
  942. left: 0;
  943. }
  944. @media (min-width: 783px) {
  945. .folded .edit-post-layout .components-editor-notices__snackbar {
  946. left: 36px;
  947. }
  948. }
  949. body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
  950. left: 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. right: 0;
  958. left: 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. left: auto;
  966. width: 281px;
  967. border-left: 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. left: auto;
  1004. right: 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-left: -24px;
  1062. margin-right: -24px;
  1063. padding-top: 0.6rem;
  1064. padding-bottom: 0.6rem;
  1065. padding-left: 24px;
  1066. padding-right: 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-right: 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-left: 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 0 0.6rem 10px;
  1114. }
  1115. .edit-post-manage-blocks-modal__checklist-item .block-editor-block-icon {
  1116. margin-right: 10px;
  1117. fill: #1e1e1e;
  1118. }
  1119. .edit-post-manage-blocks-modal__results {
  1120. height: 100%;
  1121. overflow: auto;
  1122. margin-left: -32px;
  1123. margin-right: -32px;
  1124. padding-left: 32px;
  1125. padding-right: 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. left: 0;
  1184. right: 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. right: 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-left: 0;
  1257. padding-right: 0;
  1258. }
  1259. .edit-post-preferences-modal .components-navigation .components-navigation__menu .components-navigation__back-button {
  1260. color: inherit;
  1261. padding-left: 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-left: 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 0 0.6rem 10px;
  1307. }
  1308. .edit-post-preferences-modal__custom-fields-confirmation-message, .edit-post-preferences-modal__custom-fields-confirmation-button {
  1309. margin: 0 0 0.6rem 48px;
  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-left: 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 0 8px 58px;
  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-right: 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-left: 16px;
  1369. padding-right: 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-left: 0;
  1378. padding-right: 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 0 0 auto;
  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: left;
  1425. word-wrap: break-word;
  1426. display: block;
  1427. }
  1428. /* rtl:begin:ignore */
  1429. .edit-post-post-link__preview-link-container {
  1430. direction: ltr;
  1431. }
  1432. /* rtl:end:ignore */
  1433. .edit-post-post-schedule {
  1434. width: 100%;
  1435. position: relative;
  1436. justify-content: left;
  1437. }
  1438. .edit-post-post-schedule span {
  1439. display: block;
  1440. width: 45%;
  1441. }
  1442. .components-button.edit-post-post-schedule__toggle {
  1443. text-align: right;
  1444. }
  1445. .edit-post-post-schedule__dialog .components-popover__content > div {
  1446. padding: 0;
  1447. }
  1448. .editor-post-slug__input {
  1449. margin: -5px 0;
  1450. padding: 2px;
  1451. }
  1452. .edit-post-post-status .edit-post-post-publish-dropdown__switch-to-draft {
  1453. margin-top: 15px;
  1454. width: 100%;
  1455. text-align: center;
  1456. }
  1457. .edit-post-post-visibility {
  1458. width: 100%;
  1459. justify-content: left;
  1460. }
  1461. .edit-post-post-visibility span {
  1462. display: block;
  1463. width: 45%;
  1464. }
  1465. @media (min-width: 782px) {
  1466. .edit-post-post-visibility__dialog .components-popover__content {
  1467. width: 257px;
  1468. }
  1469. }
  1470. .edit-post-post-visibility__dialog-legend {
  1471. font-weight: 600;
  1472. }
  1473. .edit-post-post-visibility__choice {
  1474. margin: 10px 0;
  1475. }
  1476. .edit-post-post-visibility__dialog-radio,
  1477. .edit-post-post-visibility__dialog-label {
  1478. vertical-align: top;
  1479. }
  1480. .edit-post-post-visibility__dialog-password-input {
  1481. width: calc(100% - 20px);
  1482. margin-left: 20px;
  1483. }
  1484. .edit-post-post-visibility__dialog-info {
  1485. color: #757575;
  1486. padding-left: 20px;
  1487. font-style: italic;
  1488. margin: 4px 0 0;
  1489. line-height: 1.4;
  1490. }
  1491. .components-button.edit-post-sidebar__panel-tab {
  1492. border-radius: 0;
  1493. height: 48px;
  1494. background: transparent;
  1495. border: none;
  1496. box-shadow: none;
  1497. cursor: pointer;
  1498. display: inline-block;
  1499. padding: 3px 15px;
  1500. margin-left: 0;
  1501. font-weight: 500;
  1502. }
  1503. .components-button.edit-post-sidebar__panel-tab::after {
  1504. content: attr(data-label);
  1505. display: block;
  1506. font-weight: 600;
  1507. height: 0;
  1508. overflow: hidden;
  1509. speak: none;
  1510. visibility: hidden;
  1511. }
  1512. .components-button.edit-post-sidebar__panel-tab.is-active {
  1513. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color);
  1514. position: relative;
  1515. z-index: 1;
  1516. }
  1517. .components-button.edit-post-sidebar__panel-tab.is-active::before {
  1518. content: "";
  1519. position: absolute;
  1520. top: 0;
  1521. bottom: 1px;
  1522. right: 0;
  1523. left: 0;
  1524. border-bottom: 4px solid transparent;
  1525. }
  1526. .components-button.edit-post-sidebar__panel-tab:focus {
  1527. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  1528. position: relative;
  1529. z-index: 1;
  1530. }
  1531. .components-button.edit-post-sidebar__panel-tab.is-active:focus {
  1532. 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);
  1533. }
  1534. @media (min-width: 782px) {
  1535. .edit-post-template__modal .components-base-control {
  1536. width: 320px;
  1537. }
  1538. }
  1539. .edit-post-template__modal .components-modal__header {
  1540. border-bottom: none;
  1541. }
  1542. .edit-post-template__modal .components-modal__content::before {
  1543. margin-bottom: 4px;
  1544. }
  1545. .edit-post-template__modal-actions {
  1546. margin-top: 12px;
  1547. }
  1548. .edit-post-template-modal__tip {
  1549. padding: 16px 24px;
  1550. background: #f0f0f0;
  1551. border-radius: 2px;
  1552. }
  1553. @media (min-width: 782px) {
  1554. .edit-post-template-modal__tip {
  1555. width: 240px;
  1556. }
  1557. }
  1558. .edit-post-template__actions button:not(:last-child) {
  1559. margin-right: 8px;
  1560. }
  1561. h2.edit-post-template-summary__title {
  1562. margin: 0;
  1563. line-height: 24px;
  1564. }
  1565. .edit-post-text-editor {
  1566. position: relative;
  1567. width: 100%;
  1568. background-color: #fff;
  1569. flex-grow: 1;
  1570. }
  1571. .edit-post-text-editor .editor-post-title.editor-post-title__block {
  1572. max-width: none;
  1573. line-height: 1.4;
  1574. }
  1575. .edit-post-text-editor .editor-post-title.editor-post-title__block .editor-post-title__input.editor-post-title__input.editor-post-title__input {
  1576. font-family: Menlo, Consolas, monaco, monospace;
  1577. font-size: 2.5em;
  1578. font-weight: normal;
  1579. }
  1580. .edit-post-text-editor .editor-post-title.editor-post-title__block .editor-post-title__input {
  1581. border: 1px solid #949494;
  1582. margin-bottom: -1px;
  1583. padding: 16px;
  1584. }
  1585. @media (min-width: 600px) {
  1586. .edit-post-text-editor .editor-post-title.editor-post-title__block .editor-post-title__input {
  1587. padding: 24px;
  1588. }
  1589. }
  1590. .edit-post-text-editor .editor-post-title.editor-post-title__block .editor-post-title__input:focus {
  1591. border-color: var(--wp-admin-theme-color);
  1592. box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  1593. }
  1594. @media (min-width: 600px) {
  1595. .edit-post-text-editor .editor-post-title.editor-post-title__block {
  1596. padding: 0;
  1597. }
  1598. }
  1599. .edit-post-text-editor__body {
  1600. width: 100%;
  1601. padding: 0 12px 12px 12px;
  1602. max-width: 1080px;
  1603. margin-left: auto;
  1604. margin-right: auto;
  1605. }
  1606. @media (min-width: 960px) {
  1607. .edit-post-text-editor__body {
  1608. padding: 16px 24px 96px 24px;
  1609. padding: 0 24px 24px 24px;
  1610. }
  1611. }
  1612. .edit-post-text-editor__toolbar {
  1613. position: sticky;
  1614. z-index: 1;
  1615. top: 0;
  1616. left: 0;
  1617. right: 0;
  1618. display: flex;
  1619. background: rgba(255, 255, 255, 0.8);
  1620. padding: 4px 12px;
  1621. }
  1622. @media (min-width: 600px) {
  1623. .edit-post-text-editor__toolbar {
  1624. padding: 12px;
  1625. }
  1626. }
  1627. @media (min-width: 960px) {
  1628. .edit-post-text-editor__toolbar {
  1629. padding: 12px 24px;
  1630. }
  1631. }
  1632. .edit-post-text-editor__toolbar h2 {
  1633. line-height: 36px;
  1634. margin: 0 auto 0 0;
  1635. font-size: 13px;
  1636. color: #1e1e1e;
  1637. }
  1638. .edit-post-text-editor__toolbar .components-button svg {
  1639. order: 1;
  1640. }
  1641. .edit-post-visual-editor {
  1642. position: relative;
  1643. display: flex;
  1644. flex-flow: column;
  1645. background-color: #2f2f2f;
  1646. flex: 1 1 auto;
  1647. }
  1648. .edit-post-visual-editor .components-button {
  1649. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  1650. font-size: 13px;
  1651. padding: 6px 12px;
  1652. }
  1653. .edit-post-visual-editor .components-button.is-tertiary, .edit-post-visual-editor .components-button.has-icon {
  1654. padding: 6px;
  1655. }
  1656. @supports (position: sticky) {
  1657. .edit-post-visual-editor {
  1658. flex-basis: 100%;
  1659. }
  1660. }
  1661. .edit-post-visual-editor__post-title-wrapper .editor-post-title {
  1662. margin-top: 2em;
  1663. margin-left: auto;
  1664. margin-right: auto;
  1665. margin-bottom: 0;
  1666. }
  1667. .edit-post-visual-editor__exit-template-mode {
  1668. position: absolute;
  1669. top: 8px;
  1670. left: 8px;
  1671. color: #fff;
  1672. }
  1673. .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 {
  1674. color: #f0f0f0;
  1675. }
  1676. .edit-post-visual-editor__content-area {
  1677. width: 100%;
  1678. height: 100%;
  1679. position: relative;
  1680. display: flex;
  1681. }
  1682. .edit-post-welcome-guide {
  1683. width: 312px;
  1684. }
  1685. .edit-post-welcome-guide__image {
  1686. background: #00a0d2;
  1687. margin: 0 0 16px;
  1688. }
  1689. .edit-post-welcome-guide__heading {
  1690. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  1691. font-size: 24px;
  1692. line-height: 1.4;
  1693. margin: 16px 0 16px 0;
  1694. padding: 0 32px;
  1695. }
  1696. .edit-post-welcome-guide__text {
  1697. font-size: 13px;
  1698. line-height: 1.4;
  1699. margin: 0 0 24px 0;
  1700. padding: 0 32px;
  1701. }
  1702. .edit-post-welcome-guide__inserter-icon {
  1703. margin: 0 4px;
  1704. vertical-align: text-top;
  1705. }
  1706. /**
  1707. * Animations
  1708. */
  1709. @keyframes edit-post__fade-in-animation {
  1710. from {
  1711. opacity: 0;
  1712. }
  1713. to {
  1714. opacity: 1;
  1715. }
  1716. }
  1717. html.wp-toolbar {
  1718. background: #fff;
  1719. }
  1720. body.block-editor-page {
  1721. background: #fff;
  1722. /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
  1723. Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
  1724. }
  1725. body.block-editor-page #wpcontent {
  1726. padding-left: 0;
  1727. }
  1728. body.block-editor-page #wpbody-content {
  1729. padding-bottom: 0;
  1730. }
  1731. body.block-editor-page #wpbody-content > div:not(.block-editor):not(#screen-meta) {
  1732. display: none;
  1733. }
  1734. body.block-editor-page #wpfooter {
  1735. display: none;
  1736. }
  1737. body.block-editor-page .a11y-speak-region {
  1738. left: -1px;
  1739. top: -1px;
  1740. }
  1741. body.block-editor-page ul#adminmenu a.wp-has-current-submenu::after,
  1742. body.block-editor-page ul#adminmenu > li.current > a.current::after {
  1743. border-right-color: #fff;
  1744. }
  1745. body.block-editor-page .media-frame select.attachment-filters:last-of-type {
  1746. width: auto;
  1747. max-width: 100%;
  1748. }
  1749. .block-editor-page #wpwrap {
  1750. overflow-y: auto;
  1751. }
  1752. @media (min-width: 782px) {
  1753. .block-editor-page #wpwrap {
  1754. overflow-y: initial;
  1755. }
  1756. }
  1757. .edit-post-header,
  1758. .edit-post-visual-editor,
  1759. .edit-post-text-editor,
  1760. .edit-post-sidebar,
  1761. .editor-post-publish-panel,
  1762. .components-popover,
  1763. .components-modal__frame,
  1764. .edit-post-editor__inserter-panel {
  1765. box-sizing: border-box;
  1766. }
  1767. .edit-post-header *,
  1768. .edit-post-header *::before,
  1769. .edit-post-header *::after,
  1770. .edit-post-visual-editor *,
  1771. .edit-post-visual-editor *::before,
  1772. .edit-post-visual-editor *::after,
  1773. .edit-post-text-editor *,
  1774. .edit-post-text-editor *::before,
  1775. .edit-post-text-editor *::after,
  1776. .edit-post-sidebar *,
  1777. .edit-post-sidebar *::before,
  1778. .edit-post-sidebar *::after,
  1779. .editor-post-publish-panel *,
  1780. .editor-post-publish-panel *::before,
  1781. .editor-post-publish-panel *::after,
  1782. .components-popover *,
  1783. .components-popover *::before,
  1784. .components-popover *::after,
  1785. .components-modal__frame *,
  1786. .components-modal__frame *::before,
  1787. .components-modal__frame *::after,
  1788. .edit-post-editor__inserter-panel *,
  1789. .edit-post-editor__inserter-panel *::before,
  1790. .edit-post-editor__inserter-panel *::after {
  1791. box-sizing: inherit;
  1792. }
  1793. @media (min-width: 600px) {
  1794. .block-editor__container {
  1795. position: absolute;
  1796. top: 0;
  1797. right: 0;
  1798. bottom: 0;
  1799. left: 0;
  1800. min-height: calc(100vh - 46px);
  1801. }
  1802. }
  1803. @media (min-width: 782px) {
  1804. .block-editor__container {
  1805. min-height: calc(100vh - 32px);
  1806. }
  1807. body.is-fullscreen-mode .block-editor__container {
  1808. min-height: 100vh;
  1809. }
  1810. }
  1811. .block-editor__container img {
  1812. max-width: 100%;
  1813. height: auto;
  1814. }
  1815. .block-editor__container iframe {
  1816. width: 100%;
  1817. }
  1818. body.admin-color-light {
  1819. --wp-admin-theme-color: #0085ba;
  1820. --wp-admin-theme-color-darker-10: #0073a1;
  1821. --wp-admin-theme-color-darker-20: #006187;
  1822. --wp-admin-border-width-focus: 2px;
  1823. }
  1824. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  1825. body.admin-color-light {
  1826. --wp-admin-border-width-focus: 1.5px;
  1827. }
  1828. }
  1829. body.admin-color-modern {
  1830. --wp-admin-theme-color: #3858e9;
  1831. --wp-admin-theme-color-darker-10: #2145e6;
  1832. --wp-admin-theme-color-darker-20: #183ad6;
  1833. --wp-admin-border-width-focus: 2px;
  1834. }
  1835. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  1836. body.admin-color-modern {
  1837. --wp-admin-border-width-focus: 1.5px;
  1838. }
  1839. }
  1840. body.admin-color-blue {
  1841. --wp-admin-theme-color: #096484;
  1842. --wp-admin-theme-color-darker-10: #07526c;
  1843. --wp-admin-theme-color-darker-20: #064054;
  1844. --wp-admin-border-width-focus: 2px;
  1845. }
  1846. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  1847. body.admin-color-blue {
  1848. --wp-admin-border-width-focus: 1.5px;
  1849. }
  1850. }
  1851. body.admin-color-coffee {
  1852. --wp-admin-theme-color: #46403c;
  1853. --wp-admin-theme-color-darker-10: #383330;
  1854. --wp-admin-theme-color-darker-20: #2b2724;
  1855. --wp-admin-border-width-focus: 2px;
  1856. }
  1857. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  1858. body.admin-color-coffee {
  1859. --wp-admin-border-width-focus: 1.5px;
  1860. }
  1861. }
  1862. body.admin-color-ectoplasm {
  1863. --wp-admin-theme-color: #523f6d;
  1864. --wp-admin-theme-color-darker-10: #46365d;
  1865. --wp-admin-theme-color-darker-20: #3a2c4d;
  1866. --wp-admin-border-width-focus: 2px;
  1867. }
  1868. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  1869. body.admin-color-ectoplasm {
  1870. --wp-admin-border-width-focus: 1.5px;
  1871. }
  1872. }
  1873. body.admin-color-midnight {
  1874. --wp-admin-theme-color: #e14d43;
  1875. --wp-admin-theme-color-darker-10: #dd382d;
  1876. --wp-admin-theme-color-darker-20: #d02c21;
  1877. --wp-admin-border-width-focus: 2px;
  1878. }
  1879. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  1880. body.admin-color-midnight {
  1881. --wp-admin-border-width-focus: 1.5px;
  1882. }
  1883. }
  1884. body.admin-color-ocean {
  1885. --wp-admin-theme-color: #627c83;
  1886. --wp-admin-theme-color-darker-10: #576e74;
  1887. --wp-admin-theme-color-darker-20: #4c6066;
  1888. --wp-admin-border-width-focus: 2px;
  1889. }
  1890. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  1891. body.admin-color-ocean {
  1892. --wp-admin-border-width-focus: 1.5px;
  1893. }
  1894. }
  1895. body.admin-color-sunrise {
  1896. --wp-admin-theme-color: #dd823b;
  1897. --wp-admin-theme-color-darker-10: #d97426;
  1898. --wp-admin-theme-color-darker-20: #c36922;
  1899. --wp-admin-border-width-focus: 2px;
  1900. }
  1901. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  1902. body.admin-color-sunrise {
  1903. --wp-admin-border-width-focus: 1.5px;
  1904. }
  1905. }