Brak opisu

style.css 53KB

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