style-rtl.css 51 KB

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