style-rtl.css 56 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256
  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 {
  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. 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-right: 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. right: 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-right: 24px;
  469. margin-right: 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 10px 0.6rem 0;
  501. }
  502. .interface-preferences-modal__option .components-base-control__help {
  503. margin: -8px 58px 8px 0;
  504. font-size: 12px;
  505. font-style: normal;
  506. color: #757575;
  507. }
  508. .edit-site-block-editor__editor-styles-wrapper .components-button {
  509. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  510. font-size: 13px;
  511. padding: 6px 12px;
  512. }
  513. .edit-site-block-editor__editor-styles-wrapper .components-button.is-tertiary, .edit-site-block-editor__editor-styles-wrapper .components-button.has-icon {
  514. padding: 6px;
  515. }
  516. .edit-site-visual-editor {
  517. position: relative;
  518. background-color: #2f2f2f;
  519. align-items: center;
  520. }
  521. .edit-site-visual-editor.is-focus-mode {
  522. padding: 48px;
  523. }
  524. .edit-site-visual-editor.is-focus-mode .edit-site-visual-editor__editor-canvas {
  525. border-radius: 2px;
  526. }
  527. .edit-site-visual-editor.is-focus-mode .components-resizable-box__container {
  528. overflow: visible;
  529. }
  530. .edit-site-visual-editor .components-resizable-box__container {
  531. margin: 0 auto;
  532. overflow: auto;
  533. }
  534. .edit-site-visual-editor__back-button {
  535. position: absolute;
  536. top: 8px;
  537. right: 8px;
  538. color: #fff;
  539. }
  540. .edit-site-visual-editor__back-button:active:not([aria-disabled=true]), .edit-site-visual-editor__back-button:focus:not([aria-disabled=true]), .edit-site-visual-editor__back-button:hover {
  541. color: #f0f0f0;
  542. }
  543. .resizable-editor__drag-handle {
  544. position: absolute;
  545. top: 0;
  546. bottom: 0;
  547. padding: 0;
  548. margin: auto 0;
  549. width: 4px;
  550. height: 100px;
  551. -webkit-appearance: none;
  552. appearance: none;
  553. cursor: ew-resize;
  554. outline: none;
  555. background: #949494;
  556. border-radius: 2px;
  557. border: 0;
  558. }
  559. .resizable-editor__drag-handle.is-left {
  560. right: -16px;
  561. }
  562. .resizable-editor__drag-handle.is-right {
  563. left: -16px;
  564. }
  565. .resizable-editor__drag-handle:hover, .resizable-editor__drag-handle:active {
  566. background: #ccc;
  567. }
  568. .resizable-editor__drag-handle:focus {
  569. box-shadow: 0 0 0 1px #2f2f2f, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
  570. }
  571. .edit-site-code-editor {
  572. position: relative;
  573. width: 100%;
  574. background-color: #fff;
  575. flex-grow: 1;
  576. }
  577. .edit-site-code-editor__body {
  578. width: 100%;
  579. padding: 0 12px 12px 12px;
  580. max-width: 1080px;
  581. margin-right: auto;
  582. margin-left: auto;
  583. }
  584. @media (min-width: 960px) {
  585. .edit-site-code-editor__body {
  586. padding: 16px 24px 96px 24px;
  587. padding: 0 24px 24px 24px;
  588. }
  589. }
  590. .edit-site-code-editor__toolbar {
  591. position: sticky;
  592. z-index: 1;
  593. top: 0;
  594. right: 0;
  595. left: 0;
  596. display: flex;
  597. background: rgba(255, 255, 255, 0.8);
  598. padding: 4px 12px;
  599. }
  600. @media (min-width: 600px) {
  601. .edit-site-code-editor__toolbar {
  602. padding: 12px;
  603. }
  604. }
  605. @media (min-width: 960px) {
  606. .edit-site-code-editor__toolbar {
  607. padding: 12px 24px;
  608. }
  609. }
  610. .edit-site-code-editor__toolbar h2 {
  611. line-height: 36px;
  612. margin: 0 0 0 auto;
  613. font-size: 13px;
  614. color: #1e1e1e;
  615. }
  616. .edit-site-code-editor__toolbar .components-button svg {
  617. order: 1;
  618. }
  619. textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
  620. border: 1px solid #949494;
  621. border-radius: 0;
  622. display: block;
  623. margin: 0;
  624. width: 100%;
  625. box-shadow: none;
  626. resize: none;
  627. overflow: hidden;
  628. font-family: Menlo, Consolas, monaco, monospace;
  629. line-height: 2.4;
  630. min-height: 200px;
  631. transition: border 0.1s ease-out, box-shadow 0.1s linear;
  632. padding: 16px;
  633. /* Fonts smaller than 16px causes mobile safari to zoom. */
  634. font-size: 16px !important;
  635. }
  636. @media (prefers-reduced-motion: reduce) {
  637. textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
  638. transition-duration: 0s;
  639. transition-delay: 0s;
  640. }
  641. }
  642. @media (min-width: 600px) {
  643. textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
  644. padding: 24px;
  645. }
  646. }
  647. @media (min-width: 600px) {
  648. textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
  649. font-size: 15px !important;
  650. }
  651. }
  652. textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:focus {
  653. border-color: var(--wp-admin-theme-color);
  654. box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  655. position: relative;
  656. }
  657. textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area::-webkit-input-placeholder {
  658. color: rgba(30, 30, 30, 0.62);
  659. }
  660. textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area::-moz-placeholder {
  661. color: rgba(30, 30, 30, 0.62);
  662. opacity: 1;
  663. }
  664. textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-input-placeholder {
  665. color: rgba(30, 30, 30, 0.62);
  666. }
  667. .edit-site-global-styles-preview {
  668. display: flex;
  669. align-items: center;
  670. justify-content: center;
  671. line-height: 1;
  672. cursor: pointer;
  673. }
  674. .edit-site-global-styles-preview__iframe {
  675. max-width: 100%;
  676. display: block;
  677. }
  678. .edit-site-typography-panel__preview {
  679. display: flex;
  680. align-items: center;
  681. justify-content: center;
  682. min-height: 100px;
  683. margin-bottom: 16px;
  684. background: #f0f0f0;
  685. border-radius: 2px;
  686. }
  687. .edit-site-global-styles-screen-typography {
  688. margin: 16px;
  689. }
  690. .edit-site-global-styles-screen-typography__indicator {
  691. height: 24px;
  692. width: 24px;
  693. font-size: 14px;
  694. display: flex !important;
  695. align-items: center;
  696. justify-content: center;
  697. border-radius: 2px;
  698. }
  699. .edit-site-global-styles-screen-colors {
  700. margin: 16px;
  701. }
  702. .edit-site-global-styles-screen-colors .component-color-indicator {
  703. background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
  704. }
  705. .edit-site-global-styles-header__description,
  706. .edit-site-block-types-search {
  707. padding: 0 16px;
  708. }
  709. .edit-site-global-styles-subtitle {
  710. margin-bottom: 0 !important;
  711. text-transform: uppercase;
  712. font-weight: 500 !important;
  713. font-size: 11px !important;
  714. }
  715. .edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle {
  716. margin-left: 16px;
  717. margin-right: 16px;
  718. width: unset;
  719. }
  720. .edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle .components-toggle-group-control {
  721. min-height: 32px;
  722. }
  723. .edit-site-screen-text-color__control,
  724. .edit-site-screen-link-color__control,
  725. .edit-site-screen-background-color__control {
  726. padding: 16px;
  727. }
  728. .edit-site-global-styles-variations_item {
  729. box-sizing: border-box;
  730. }
  731. .edit-site-global-styles-variations_item .edit-site-global-styles-variations_item-preview {
  732. padding: 2px;
  733. border-radius: 2px;
  734. border: #e0e0e0 1px solid;
  735. }
  736. .edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview {
  737. border: #1e1e1e 1px solid;
  738. }
  739. .edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview {
  740. border: var(--wp-admin-theme-color) 1px solid;
  741. }
  742. .edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview {
  743. border: var(--wp-admin-theme-color) 1px solid;
  744. }
  745. .edit-site-global-styles-icon-with-current-color {
  746. fill: currentColor;
  747. }
  748. .edit-site-global-styles__color-indicator-wrapper {
  749. height: 24px;
  750. }
  751. .edit-site-header {
  752. align-items: center;
  753. background-color: #fff;
  754. display: flex;
  755. height: 60px;
  756. box-sizing: border-box;
  757. width: 100%;
  758. justify-content: space-between;
  759. }
  760. body.is-fullscreen-mode .edit-site-header {
  761. padding-right: 60px;
  762. transition: padding-right 20ms linear;
  763. transition-delay: 80ms;
  764. }
  765. @media (prefers-reduced-motion: reduce) {
  766. body.is-fullscreen-mode .edit-site-header {
  767. transition-duration: 0s;
  768. transition-delay: 0s;
  769. }
  770. }
  771. .edit-site-header .edit-site-header_start,
  772. .edit-site-header .edit-site-header_end {
  773. display: flex;
  774. }
  775. .edit-site-header .edit-site-header_center {
  776. display: flex;
  777. align-items: center;
  778. height: 100%;
  779. flex-grow: 1;
  780. justify-content: center;
  781. min-width: 0;
  782. }
  783. .edit-site-header .edit-site-header_end {
  784. justify-content: flex-end;
  785. }
  786. body.is-navigation-sidebar-open .edit-site-header {
  787. padding-right: 0;
  788. transition: padding-right 20ms linear;
  789. transition-delay: 0ms;
  790. }
  791. @media (prefers-reduced-motion: reduce) {
  792. body.is-navigation-sidebar-open .edit-site-header {
  793. transition-duration: 0s;
  794. transition-delay: 0s;
  795. }
  796. }
  797. @media (max-width: 959px) {
  798. body.is-navigation-sidebar-open .edit-site-header .edit-site-header-toolbar__inserter-toggle ~ .components-button,
  799. body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .components-button:not(.is-primary) {
  800. display: none;
  801. }
  802. body.is-navigation-sidebar-open .edit-site-header .edit-site-save-button__button {
  803. margin-left: 0;
  804. }
  805. }
  806. .edit-site-header__toolbar {
  807. display: flex;
  808. align-items: center;
  809. padding-right: 8px;
  810. }
  811. @media (min-width: 600px) {
  812. .edit-site-header__toolbar {
  813. padding-right: 24px;
  814. }
  815. }
  816. @media (min-width: 1280px) {
  817. .edit-site-header__toolbar {
  818. padding-left: 8px;
  819. }
  820. }
  821. .edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle {
  822. margin-left: 8px;
  823. min-width: 32px;
  824. width: 32px;
  825. height: 32px;
  826. padding: 0;
  827. }
  828. .edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle svg {
  829. transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
  830. }
  831. @media (prefers-reduced-motion: reduce) {
  832. .edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle svg {
  833. transition-duration: 0s;
  834. transition-delay: 0s;
  835. }
  836. }
  837. .edit-site-header__toolbar .edit-site-header-toolbar__inserter-toggle.is-pressed svg {
  838. transform: rotate(-45deg);
  839. }
  840. .edit-site-header__toolbar-switchers {
  841. align-items: center;
  842. display: flex;
  843. }
  844. .edit-site-header__toolbar-switchers-separator {
  845. margin: 0 -6px 0;
  846. }
  847. /**
  848. * Buttons in the Toolbar
  849. */
  850. .edit-site-header__actions {
  851. display: inline-flex;
  852. align-items: center;
  853. padding-left: 4px;
  854. }
  855. .edit-site-header__actions .interface-pinned-items {
  856. display: none;
  857. }
  858. @media (min-width: 782px) {
  859. .edit-site-header__actions .interface-pinned-items {
  860. display: inline-flex;
  861. }
  862. }
  863. .edit-site-header__actions .editor-post-saved-state,
  864. .edit-site-header__actions .components-button.components-button {
  865. margin-left: 4px;
  866. }
  867. @media (min-width: 600px) {
  868. .edit-site-header__actions .editor-post-saved-state,
  869. .edit-site-header__actions .components-button.components-button {
  870. margin-left: 12px;
  871. }
  872. }
  873. .edit-site-header__actions .editor-post-saved-state,
  874. .edit-site-header__actions .components-button.is-tertiary {
  875. padding: 0 6px;
  876. }
  877. .edit-site-header__actions .edit-site-more-menu .components-button,
  878. .edit-site-header__actions .interface-pinned-items .components-button {
  879. margin-left: 0;
  880. }
  881. @media (min-width: 600px) {
  882. .edit-site-header__actions {
  883. padding-left: 16px;
  884. }
  885. }
  886. .edit-site-header__actions-more-menu {
  887. margin-right: -4px;
  888. }
  889. .edit-site-header__actions-more-menu .components-icon-button {
  890. padding: 8px 2px;
  891. width: auto;
  892. }
  893. @media (min-width: 600px) {
  894. .edit-site-header__actions-more-menu {
  895. margin-right: 4px;
  896. }
  897. .edit-site-header__actions-more-menu .components-icon-button {
  898. padding: 8px 4px;
  899. }
  900. }
  901. .show-icon-labels .edit-site-header .components-button.has-icon {
  902. width: auto;
  903. }
  904. .show-icon-labels .edit-site-header .components-button.has-icon svg {
  905. display: none;
  906. }
  907. .show-icon-labels .edit-site-header .components-button.has-icon::after {
  908. content: attr(aria-label);
  909. }
  910. .show-icon-labels .edit-site-header .components-button.has-icon[aria-disabled=true] {
  911. background-color: transparent;
  912. }
  913. .show-icon-labels .edit-site-header .is-tertiary:active {
  914. box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
  915. background-color: transparent;
  916. }
  917. .show-icon-labels .edit-site-header .edit-site-save-button__button {
  918. padding-right: 6px;
  919. padding-left: 6px;
  920. margin-left: 4px;
  921. }
  922. .show-icon-labels .edit-site-header .block-editor-post-preview__button-toggle {
  923. margin-left: 4px;
  924. }
  925. .show-icon-labels .edit-site-header .edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle,
  926. .show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
  927. height: 36px;
  928. padding: 0 6px;
  929. }
  930. .show-icon-labels .edit-site-header .edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle::after,
  931. .show-icon-labels .edit-site-header .edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info::after {
  932. content: none;
  933. }
  934. .edit-site-document-actions {
  935. display: flex;
  936. flex-direction: column;
  937. justify-content: center;
  938. padding: 0 8px;
  939. height: 100%;
  940. min-width: 0;
  941. }
  942. .edit-site-document-actions .edit-site-document-actions__title-wrapper {
  943. display: flex;
  944. flex-direction: row;
  945. justify-content: center;
  946. align-items: center;
  947. min-width: 0;
  948. }
  949. .edit-site-document-actions .edit-site-document-actions__title-wrapper .components-dropdown {
  950. display: inline-flex;
  951. margin-right: 4px;
  952. }
  953. .edit-site-document-actions .edit-site-document-actions__title-wrapper .components-dropdown .components-button {
  954. min-width: 0;
  955. padding: 0;
  956. }
  957. .edit-site-document-actions .edit-site-document-actions__title-wrapper > h1 {
  958. margin: 0;
  959. min-width: 0;
  960. }
  961. .edit-site-document-actions .edit-site-document-actions__title {
  962. white-space: nowrap;
  963. overflow: hidden;
  964. text-overflow: ellipsis;
  965. }
  966. .edit-site-document-actions .edit-site-document-actions__secondary-item {
  967. white-space: nowrap;
  968. overflow: hidden;
  969. text-overflow: ellipsis;
  970. max-width: 0;
  971. opacity: 0;
  972. padding: 0;
  973. transition: all ease 0.2s;
  974. background: #e0e0e0;
  975. border-radius: 2px;
  976. }
  977. @media (prefers-reduced-motion: reduce) {
  978. .edit-site-document-actions .edit-site-document-actions__secondary-item {
  979. transition-duration: 0s;
  980. transition-delay: 0s;
  981. }
  982. }
  983. .edit-site-document-actions.has-secondary-label .edit-site-document-actions__secondary-item {
  984. opacity: 1;
  985. padding: 0 4px;
  986. max-width: 180px;
  987. margin-right: 6px;
  988. }
  989. .edit-site-document-actions__info-dropdown > .components-popover__content > div {
  990. padding: 0;
  991. min-width: 240px;
  992. }
  993. .edit-site-navigation-toggle {
  994. align-items: center;
  995. background: #1e1e1e;
  996. border-radius: 0;
  997. display: flex;
  998. position: absolute;
  999. z-index: 31;
  1000. height: 60px;
  1001. width: 60px;
  1002. }
  1003. .edit-site-navigation-toggle__button.components-button {
  1004. align-items: center;
  1005. background: #1e1e1e;
  1006. border-radius: 0;
  1007. color: #fff;
  1008. height: 61px;
  1009. width: 60px;
  1010. z-index: 1;
  1011. margin-bottom: -1px;
  1012. min-width: 60px;
  1013. }
  1014. .edit-site-navigation-toggle__button.components-button:hover, .edit-site-navigation-toggle__button.components-button:active {
  1015. color: #fff;
  1016. }
  1017. .edit-site-navigation-toggle__button.components-button:focus {
  1018. box-shadow: none;
  1019. }
  1020. .edit-site-navigation-toggle__button.components-button::before {
  1021. transition: box-shadow 0.1s ease;
  1022. content: "";
  1023. display: block;
  1024. position: absolute;
  1025. top: 9px;
  1026. left: 9px;
  1027. bottom: 9px;
  1028. right: 9px;
  1029. border-radius: 4px;
  1030. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #1e1e1e;
  1031. }
  1032. @media (prefers-reduced-motion: reduce) {
  1033. .edit-site-navigation-toggle__button.components-button::before {
  1034. transition-duration: 0s;
  1035. transition-delay: 0s;
  1036. }
  1037. }
  1038. .edit-site-navigation-toggle__button.components-button:hover::before {
  1039. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #757575;
  1040. }
  1041. .edit-site-navigation-toggle__button.components-button.has-icon:hover::before {
  1042. box-shadow: none;
  1043. }
  1044. .edit-site-navigation-toggle__button.components-button:focus::before {
  1045. 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);
  1046. }
  1047. .edit-site-navigation-toggle__button.components-button .edit-site-navigation-toggle__site-icon {
  1048. width: 36px;
  1049. height: 36px;
  1050. border-radius: 2px;
  1051. -o-object-fit: cover;
  1052. object-fit: cover;
  1053. margin-top: -1px;
  1054. }
  1055. .edit-site-navigation-panel {
  1056. height: 100%;
  1057. position: relative;
  1058. width: 0;
  1059. overflow: hidden;
  1060. background: #1e1e1e;
  1061. color: #fff;
  1062. transition: width 100ms linear;
  1063. }
  1064. @media (prefers-reduced-motion: reduce) {
  1065. .edit-site-navigation-panel {
  1066. transition-duration: 0s;
  1067. transition-delay: 0s;
  1068. }
  1069. }
  1070. @media (min-width: 782px) {
  1071. .interface-interface-skeleton.has-footer .edit-site-navigation-panel {
  1072. height: calc(100% - 25px);
  1073. }
  1074. }
  1075. .edit-site-navigation-panel__inner {
  1076. position: relative;
  1077. width: 300px;
  1078. height: 100%;
  1079. overflow: hidden;
  1080. visibility: hidden;
  1081. transition: visibility 100ms linear;
  1082. }
  1083. @media (prefers-reduced-motion: reduce) {
  1084. .edit-site-navigation-panel__inner {
  1085. transition-duration: 0s;
  1086. transition-delay: 0s;
  1087. }
  1088. }
  1089. .edit-site-navigation-panel.is-open {
  1090. width: 300px;
  1091. }
  1092. .edit-site-navigation-panel.is-open .edit-site-navigation-panel__inner {
  1093. visibility: visible;
  1094. }
  1095. .edit-site-navigation-panel__site-title-container {
  1096. height: 60px;
  1097. padding-right: 60px;
  1098. margin: 0 8px 0 16px;
  1099. display: flex;
  1100. align-items: center;
  1101. }
  1102. .edit-site-navigation-panel__site-title {
  1103. font-style: normal;
  1104. font-weight: 600;
  1105. font-size: 14px;
  1106. /* Matches menu items */
  1107. line-height: 20px;
  1108. color: #ddd;
  1109. display: -webkit-box;
  1110. -webkit-line-clamp: 2;
  1111. -webkit-box-orient: vertical;
  1112. overflow: hidden;
  1113. }
  1114. .edit-site-navigation-panel__scroll-container {
  1115. overflow-x: hidden;
  1116. overflow-y: auto;
  1117. height: calc(100% - 60px);
  1118. }
  1119. .edit-site-navigation-panel__back-to-dashboard.components-button.is-tertiary {
  1120. height: 36px;
  1121. margin-top: 24px;
  1122. padding: 8px 8px 8px 16px;
  1123. }
  1124. .edit-site-navigation-panel__back-to-dashboard.components-button.is-tertiary:focus:not(:disabled) {
  1125. border-bottom-color: transparent;
  1126. }
  1127. .edit-site-navigation-panel__preview {
  1128. display: none;
  1129. border: 1px solid #ccc;
  1130. width: 300px;
  1131. padding: 16px;
  1132. background: #fff;
  1133. box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  1134. border-radius: 2px;
  1135. position: absolute;
  1136. top: 73px;
  1137. right: 312px;
  1138. color: #1e1e1e;
  1139. z-index: 32;
  1140. }
  1141. @media (min-width: 782px) {
  1142. .edit-site-navigation-panel__preview {
  1143. display: block;
  1144. }
  1145. }
  1146. .edit-site-navigation-panel__template-item {
  1147. display: block;
  1148. }
  1149. .edit-site-navigation-panel__template-item .components-button {
  1150. display: flex;
  1151. flex-direction: column;
  1152. align-items: flex-start;
  1153. justify-content: center;
  1154. height: auto;
  1155. min-height: 36px;
  1156. text-align: right;
  1157. padding-right: 16px;
  1158. padding-left: 16px;
  1159. color: inherit;
  1160. }
  1161. .edit-site-navigation-panel__template-item-title {
  1162. font-size: 14px;
  1163. line-height: 20px;
  1164. }
  1165. .edit-site-navigation-panel__template-item-title em {
  1166. margin-left: 1ch;
  1167. }
  1168. .edit-site-navigation-panel__template-parts .components-navigation__menu-title-heading {
  1169. text-transform: capitalize;
  1170. }
  1171. .edit-site-navigation-panel__template-part-item .components-navigation__item-title {
  1172. text-transform: capitalize;
  1173. }
  1174. .components-navigation__item + .edit-site-navigation-panel__template-item {
  1175. margin-top: 16px;
  1176. }
  1177. .edit-site-navigation-panel__template-item + .edit-site-navigation-panel__template-item {
  1178. margin-top: 8px;
  1179. }
  1180. .edit-site-navigation-panel__info-wrapper {
  1181. padding: 4px 0;
  1182. }
  1183. .edit-site-navigation-panel__template-item-description {
  1184. padding-top: 8px;
  1185. font-size: 12px;
  1186. line-height: 16px;
  1187. }
  1188. .edit-site-navigation-panel__new-template-dropdown {
  1189. margin: 0 12px 0 0;
  1190. }
  1191. .edit-site-navigation-panel__new-template-dropdown button {
  1192. margin: 0;
  1193. }
  1194. @media (min-width: 600px) {
  1195. .edit-site-navigation-panel__new-template-popover {
  1196. min-width: 300px;
  1197. }
  1198. }
  1199. .edit-site-list-header {
  1200. position: relative;
  1201. align-items: center;
  1202. background-color: #fff;
  1203. display: flex;
  1204. height: 60px;
  1205. box-sizing: border-box;
  1206. width: 100%;
  1207. justify-content: flex-end;
  1208. padding-left: 16px;
  1209. }
  1210. body.is-fullscreen-mode .edit-site-list-header {
  1211. padding-right: 60px;
  1212. transition: padding-right 20ms linear;
  1213. transition-delay: 80ms;
  1214. }
  1215. @media (prefers-reduced-motion: reduce) {
  1216. body.is-fullscreen-mode .edit-site-list-header {
  1217. transition-duration: 0s;
  1218. transition-delay: 0s;
  1219. }
  1220. }
  1221. .edit-site-list-header .edit-site-list-header__title {
  1222. position: absolute;
  1223. right: 0;
  1224. width: 100%;
  1225. text-align: center;
  1226. font-size: 20px;
  1227. padding: 0;
  1228. margin: 0;
  1229. }
  1230. .edit-site-list-header__right {
  1231. position: relative;
  1232. }
  1233. .edit-site .edit-site-list .interface-interface-skeleton__editor {
  1234. min-width: 100%;
  1235. }
  1236. @media (min-width: 782px) {
  1237. .edit-site .edit-site-list .interface-interface-skeleton__editor {
  1238. min-width: 0;
  1239. }
  1240. }
  1241. .edit-site .edit-site-list .interface-interface-skeleton__content {
  1242. background: #fff;
  1243. align-items: center;
  1244. padding: 16px;
  1245. }
  1246. @media (min-width: 782px) {
  1247. .edit-site .edit-site-list .interface-interface-skeleton__content {
  1248. padding: 72px;
  1249. }
  1250. }
  1251. .edit-site-list-table {
  1252. width: 100%;
  1253. border: 1px solid #ddd;
  1254. border-radius: 2px;
  1255. margin: 0;
  1256. overflow: hidden;
  1257. border-spacing: 0;
  1258. max-width: 960px;
  1259. }
  1260. .edit-site-list-table tr {
  1261. display: flex;
  1262. align-items: center;
  1263. padding: 16px;
  1264. box-sizing: border-box;
  1265. border-top: 1px solid #f0f0f0;
  1266. margin: 0;
  1267. }
  1268. .edit-site-list-table tr:first-child {
  1269. border-top: 0;
  1270. }
  1271. @media (min-width: 782px) {
  1272. .edit-site-list-table tr {
  1273. padding: 24px 32px;
  1274. }
  1275. }
  1276. .edit-site-list-table tr .edit-site-list-table-column:nth-child(1) {
  1277. width: calc(60% - 18px);
  1278. padding-left: 24px;
  1279. }
  1280. .edit-site-list-table tr .edit-site-list-table-column:nth-child(1) a {
  1281. display: inline-block;
  1282. text-decoration: none;
  1283. font-weight: 500;
  1284. margin-bottom: 4px;
  1285. }
  1286. .edit-site-list-table tr .edit-site-list-table-column:nth-child(2) {
  1287. width: calc(40% - 18px);
  1288. }
  1289. .edit-site-list-table tr .edit-site-list-table-column:nth-child(3) {
  1290. min-width: 36px;
  1291. flex-shrink: 0;
  1292. }
  1293. .edit-site-list-table tr.edit-site-list-table-head {
  1294. font-size: 16px;
  1295. font-weight: 600;
  1296. text-align: right;
  1297. color: #1e1e1e;
  1298. border-top: none;
  1299. border-bottom: 1px solid #ddd;
  1300. }
  1301. .edit-site-list-table tr.edit-site-list-table-head th {
  1302. font-weight: inherit;
  1303. }
  1304. @media (min-width: 782px) {
  1305. .edit-site-list.is-navigation-open .components-snackbar-list {
  1306. margin-right: 300px;
  1307. }
  1308. }
  1309. @media (min-width: 782px) {
  1310. .edit-site-list__rename-modal .components-base-control {
  1311. width: 320px;
  1312. }
  1313. }
  1314. .edit-site-list__rename-modal .components-modal__header {
  1315. border-bottom: none;
  1316. }
  1317. .edit-site-list__rename-modal .components-modal__content::before {
  1318. margin-bottom: 4px;
  1319. }
  1320. .edit-site-list__rename-modal-actions {
  1321. margin-top: 12px;
  1322. }
  1323. .edit-site-template__actions button:not(:last-child) {
  1324. margin-left: 8px;
  1325. }
  1326. .edit-site-list-added-by__icon {
  1327. display: flex;
  1328. flex-shrink: 0;
  1329. position: relative;
  1330. align-items: center;
  1331. justify-content: center;
  1332. width: 32px;
  1333. height: 32px;
  1334. background: #2f2f2f;
  1335. border-radius: 100%;
  1336. }
  1337. .edit-site-list-added-by__icon svg {
  1338. fill: #fff;
  1339. }
  1340. .edit-site-list-added-by__icon.is-customized::after {
  1341. position: absolute;
  1342. content: "";
  1343. background: var(--wp-admin-theme-color);
  1344. height: 8px;
  1345. width: 8px;
  1346. outline: 2px solid #fff;
  1347. border-radius: 100%;
  1348. top: -1px;
  1349. left: -1px;
  1350. }
  1351. .edit-site-list-added-by__avatar {
  1352. flex-shrink: 0;
  1353. overflow: hidden;
  1354. border-radius: 100%;
  1355. background: #2f2f2f;
  1356. width: 32px;
  1357. height: 32px;
  1358. }
  1359. .edit-site-list-added-by__avatar img {
  1360. width: 32px;
  1361. height: 32px;
  1362. -o-object-fit: cover;
  1363. object-fit: cover;
  1364. opacity: 0;
  1365. transition: opacity 0.1s linear;
  1366. }
  1367. @media (prefers-reduced-motion: reduce) {
  1368. .edit-site-list-added-by__avatar img {
  1369. transition-duration: 0s;
  1370. transition-delay: 0s;
  1371. }
  1372. }
  1373. .edit-site-list-added-by__avatar.is-loaded img {
  1374. opacity: 1;
  1375. }
  1376. .edit-site-new-template-dropdown .components-dropdown-menu__toggle {
  1377. padding: 6px 12px;
  1378. }
  1379. @media (min-width: 600px) {
  1380. .edit-site-new-template-dropdown .edit-site-new-template-dropdown__popover {
  1381. min-width: 300px;
  1382. }
  1383. }
  1384. .edit-site-sidebar {
  1385. width: 280px;
  1386. }
  1387. .edit-site-sidebar > .components-panel {
  1388. border-right: 0;
  1389. border-left: 0;
  1390. margin-bottom: -1px;
  1391. margin-top: -1px;
  1392. }
  1393. .edit-site-sidebar > .components-panel > .components-panel__header {
  1394. background: #f0f0f0;
  1395. }
  1396. .edit-site-sidebar .block-editor-block-inspector__card {
  1397. margin: 0;
  1398. }
  1399. .edit-site-global-styles-sidebar {
  1400. display: flex;
  1401. flex-direction: column;
  1402. min-height: 100%;
  1403. }
  1404. .edit-site-global-styles-sidebar__panel, .edit-site-global-styles-sidebar__navigator-provider {
  1405. display: flex;
  1406. flex-direction: column;
  1407. flex: 1;
  1408. }
  1409. .edit-site-global-styles-sidebar__navigator-screen {
  1410. flex: 1;
  1411. }
  1412. .edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
  1413. margin-right: 0;
  1414. }
  1415. .edit-site-global-styles-sidebar__reset-button.components-button {
  1416. margin-right: auto;
  1417. }
  1418. .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
  1419. font-size: 15.6px;
  1420. font-weight: 500;
  1421. }
  1422. .edit-site-global-styles-sidebar .components-navigation__item > button span {
  1423. font-weight: 500;
  1424. }
  1425. .edit-site-typography-panel,
  1426. .edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings {
  1427. border: 0;
  1428. }
  1429. .edit-site-global-styles-sidebar .components-tools-panel-item.single-column {
  1430. grid-column: span 1;
  1431. }
  1432. .edit-site-global-styles-sidebar__blocks-group {
  1433. padding-top: 24px;
  1434. border-top: 1px solid #e0e0e0;
  1435. }
  1436. .edit-site-global-styles-sidebar__blocks-group-help {
  1437. padding: 0 16px;
  1438. }
  1439. .edit-site-global-styles-color-palette-panel,
  1440. .edit-site-global-styles-gradient-palette-panel {
  1441. padding: 16px;
  1442. }
  1443. .edit-site-global-styles-sidebar__beta {
  1444. display: inline-flex;
  1445. margin-right: 8px;
  1446. padding: 0 8px;
  1447. height: 24px;
  1448. border-radius: 2px;
  1449. background-color: #1e1e1e;
  1450. color: #fff;
  1451. align-items: center;
  1452. font-size: 12px;
  1453. line-height: 1;
  1454. }
  1455. .components-panel__header.edit-site-sidebar__panel-tabs {
  1456. justify-content: flex-start;
  1457. padding-right: 0;
  1458. padding-left: 16px;
  1459. border-top: 0;
  1460. margin-top: 0;
  1461. }
  1462. .components-panel__header.edit-site-sidebar__panel-tabs ul {
  1463. display: flex;
  1464. }
  1465. .components-panel__header.edit-site-sidebar__panel-tabs li {
  1466. margin: 0;
  1467. }
  1468. .components-panel__header.edit-site-sidebar__panel-tabs .components-button.has-icon {
  1469. display: none;
  1470. margin: 0 auto 0 0;
  1471. padding: 0;
  1472. min-width: 24px;
  1473. height: 24px;
  1474. }
  1475. @media (min-width: 782px) {
  1476. .components-panel__header.edit-site-sidebar__panel-tabs .components-button.has-icon {
  1477. display: flex;
  1478. }
  1479. }
  1480. .components-button.edit-site-sidebar__panel-tab {
  1481. border-radius: 0;
  1482. height: 48px;
  1483. background: transparent;
  1484. border: none;
  1485. box-shadow: none;
  1486. cursor: pointer;
  1487. display: inline-block;
  1488. padding: 3px 15px;
  1489. margin-right: 0;
  1490. font-weight: 500;
  1491. }
  1492. .components-button.edit-site-sidebar__panel-tab::after {
  1493. content: attr(data-label);
  1494. display: block;
  1495. font-weight: 600;
  1496. height: 0;
  1497. overflow: hidden;
  1498. speak: none;
  1499. visibility: hidden;
  1500. }
  1501. .components-button.edit-site-sidebar__panel-tab.is-active {
  1502. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color);
  1503. position: relative;
  1504. z-index: 1;
  1505. }
  1506. .components-button.edit-site-sidebar__panel-tab.is-active::before {
  1507. content: "";
  1508. position: absolute;
  1509. top: 0;
  1510. bottom: 1px;
  1511. left: 0;
  1512. right: 0;
  1513. border-bottom: 4px solid transparent;
  1514. }
  1515. .components-button.edit-site-sidebar__panel-tab:focus {
  1516. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  1517. position: relative;
  1518. z-index: 1;
  1519. }
  1520. .components-button.edit-site-sidebar__panel-tab.is-active:focus {
  1521. 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);
  1522. }
  1523. @keyframes loadingpulse {
  1524. 0% {
  1525. opacity: 1;
  1526. }
  1527. 50% {
  1528. opacity: 0.5;
  1529. }
  1530. 100% {
  1531. opacity: 1;
  1532. }
  1533. }
  1534. .edit-site-navigation-inspector {
  1535. padding: 16px;
  1536. }
  1537. .edit-site-navigation-inspector .block-editor-list-view-leaf .block-editor-list-view-block-contents {
  1538. align-items: flex-start;
  1539. white-space: normal;
  1540. }
  1541. .edit-site-navigation-inspector .block-editor-list-view-block__title {
  1542. margin-top: 3px;
  1543. }
  1544. .edit-site-navigation-inspector .block-editor-list-view-block__menu-cell {
  1545. padding-left: 0;
  1546. }
  1547. .edit-site-navigation-inspector__placeholder {
  1548. padding: 8px;
  1549. margin: 8px;
  1550. background-color: #f0f0f0;
  1551. animation: loadingpulse 1s linear infinite;
  1552. animation-delay: 0.5s;
  1553. }
  1554. .edit-site-navigation-inspector__placeholder.is-child {
  1555. margin-right: 24px;
  1556. width: 50%;
  1557. }
  1558. .edit-site-template-card {
  1559. display: flex;
  1560. align-items: flex-start;
  1561. }
  1562. .edit-site-template-card__content {
  1563. flex-grow: 1;
  1564. margin-bottom: 4px;
  1565. }
  1566. .edit-site-template-card__title {
  1567. font-weight: 500;
  1568. line-height: 24px;
  1569. }
  1570. .edit-site-template-card__title.edit-site-template-card__title {
  1571. margin: 0 0 4px;
  1572. }
  1573. .edit-site-template-card__description {
  1574. font-size: 13px;
  1575. margin: 0 0 16px;
  1576. }
  1577. .edit-site-template-card__icon {
  1578. flex: 0 0 24px;
  1579. margin-left: 12px;
  1580. width: 24px;
  1581. height: 24px;
  1582. }
  1583. h3.edit-site-template-card__template-areas-title {
  1584. font-weight: 500;
  1585. margin: 0 0 8px;
  1586. }
  1587. .edit-site-template-card__template-areas-list {
  1588. margin: 0;
  1589. }
  1590. .edit-site-template-card__template-areas-list > li {
  1591. margin: 0;
  1592. }
  1593. .edit-site-template-card__template-areas-item {
  1594. width: 100%;
  1595. }
  1596. .edit-site-template-card__template-areas-item.components-button.has-icon {
  1597. padding: 0;
  1598. }
  1599. html #wpadminbar {
  1600. display: none;
  1601. }
  1602. html.wp-toolbar {
  1603. padding-top: 0;
  1604. }
  1605. .edit-site-editor__toggle-save-panel {
  1606. z-index: 100000;
  1607. position: fixed !important;
  1608. top: -9999em;
  1609. bottom: auto;
  1610. right: auto;
  1611. left: 0;
  1612. width: 280px;
  1613. background-color: #fff;
  1614. border: 1px dotted #ddd;
  1615. height: auto !important;
  1616. padding: 24px;
  1617. display: flex;
  1618. justify-content: center;
  1619. }
  1620. .interface-interface-skeleton__actions:focus .edit-site-editor__toggle-save-panel, .interface-interface-skeleton__actions:focus-within .edit-site-editor__toggle-save-panel {
  1621. top: auto;
  1622. bottom: 0;
  1623. }
  1624. .edit-site-visual-editor {
  1625. position: relative;
  1626. height: 100%;
  1627. display: block;
  1628. }
  1629. .edit-site-visual-editor iframe {
  1630. display: block;
  1631. width: 100%;
  1632. height: 100%;
  1633. background-color: #fff;
  1634. }
  1635. .edit-site .components-editor-notices__snackbar {
  1636. position: fixed;
  1637. left: 0;
  1638. bottom: 40px;
  1639. padding-right: 16px;
  1640. padding-left: 16px;
  1641. }
  1642. .edit-site .components-editor-notices__snackbar {
  1643. /* Set left position when auto-fold is not on the body element. */
  1644. right: 0;
  1645. }
  1646. @media (min-width: 783px) {
  1647. .edit-site .components-editor-notices__snackbar {
  1648. right: 160px;
  1649. }
  1650. }
  1651. .auto-fold .edit-site .components-editor-notices__snackbar {
  1652. /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
  1653. }
  1654. @media (min-width: 783px) {
  1655. .auto-fold .edit-site .components-editor-notices__snackbar {
  1656. right: 36px;
  1657. }
  1658. }
  1659. @media (min-width: 961px) {
  1660. .auto-fold .edit-site .components-editor-notices__snackbar {
  1661. right: 160px;
  1662. }
  1663. }
  1664. /* Sidebar manually collapsed. */
  1665. .folded .edit-site .components-editor-notices__snackbar {
  1666. right: 0;
  1667. }
  1668. @media (min-width: 783px) {
  1669. .folded .edit-site .components-editor-notices__snackbar {
  1670. right: 36px;
  1671. }
  1672. }
  1673. body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
  1674. right: 0 !important;
  1675. }
  1676. .edit-site-template-details .edit-site-template-details__group {
  1677. margin: 0;
  1678. padding: 16px;
  1679. }
  1680. .edit-site-template-details .edit-site-template-details__group + .edit-site-template-details__group {
  1681. border-top: 1px solid #ccc;
  1682. }
  1683. .edit-site-template-details .edit-site-template-details__title {
  1684. margin: 0;
  1685. }
  1686. .edit-site-template-details .edit-site-template-details__description {
  1687. margin: 12px 0 0;
  1688. color: #757575;
  1689. }
  1690. .edit-site-template-details .edit-site-template-details__group.edit-site-template-details__template-areas {
  1691. padding: 8px;
  1692. }
  1693. .edit-site-template-details .edit-site-template-details__template-areas-item {
  1694. position: relative;
  1695. }
  1696. .edit-site-template-details .edit-site-template-details__template-areas-item .edit-site-template-details__template-areas-item-more {
  1697. position: absolute;
  1698. left: 0;
  1699. top: 0;
  1700. bottom: 0;
  1701. margin: auto 0;
  1702. }
  1703. .edit-site-template-details .edit-site-template-details__revert {
  1704. padding: 12px 8px;
  1705. }
  1706. .edit-site-template-details .edit-site-template-details__revert-button {
  1707. height: auto;
  1708. padding: 4px 8px;
  1709. text-align: right;
  1710. }
  1711. .edit-site-template-details .edit-site-template-details__revert-button:focus:not(:disabled) {
  1712. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px #fff;
  1713. }
  1714. .edit-site-template-details .edit-site-template-details__show-all-button.components-button {
  1715. display: flex;
  1716. justify-content: center;
  1717. background: #1e1e1e;
  1718. color: #fff;
  1719. width: 100%;
  1720. height: 44px;
  1721. border-radius: 0;
  1722. }
  1723. .edit-site-template-details .edit-site-template-details__show-all-button.components-button:hover {
  1724. color: #fff;
  1725. }
  1726. .edit-site-template-details .edit-site-template-details__show-all-button.components-button:active {
  1727. color: #ccc;
  1728. }
  1729. .edit-site-template-details .edit-site-template-details__show-all-button.components-button:focus:not(:disabled) {
  1730. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px #fff;
  1731. }
  1732. .edit-site-create-template-part-modal {
  1733. z-index: 1000001;
  1734. }
  1735. @media (min-width: 600px) {
  1736. .edit-site-create-template-part-modal .components-modal__frame {
  1737. max-width: 500px;
  1738. }
  1739. }
  1740. .edit-site-create-template-part-modal__modal-actions {
  1741. padding-top: 12px;
  1742. }
  1743. .edit-site-create-template-part-modal__area-base-control .components-base-control__label {
  1744. margin: 16px 0 8px;
  1745. cursor: auto;
  1746. }
  1747. .edit-site-create-template-part-modal__area-radio-group {
  1748. width: 100%;
  1749. border: 1px solid #757575;
  1750. border-radius: 2px;
  1751. }
  1752. .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio {
  1753. display: block;
  1754. width: 100%;
  1755. height: 100%;
  1756. text-align: right;
  1757. padding: 12px;
  1758. }
  1759. .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-secondary:hover, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-primary:hover {
  1760. margin: 0;
  1761. background-color: inherit;
  1762. border-bottom: 1px solid #757575;
  1763. border-radius: 0;
  1764. }
  1765. .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio:not(:focus), .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-secondary:hover:not(:focus), .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-primary:hover:not(:focus) {
  1766. box-shadow: none;
  1767. }
  1768. .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio:focus, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-secondary:hover:focus, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-primary:hover:focus {
  1769. border-bottom: 1px solid #fff;
  1770. }
  1771. .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio:last-of-type, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-secondary:hover:last-of-type, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio.is-primary:hover:last-of-type {
  1772. border-bottom: none;
  1773. }
  1774. .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio:not(:hover), .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio[aria-checked=true] {
  1775. color: #1e1e1e;
  1776. cursor: auto;
  1777. }
  1778. .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio:not(:hover) .edit-site-create-template-part-modal__option-label div, .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio[aria-checked=true] .edit-site-create-template-part-modal__option-label div {
  1779. color: #949494;
  1780. }
  1781. .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio .edit-site-create-template-part-modal__option-label {
  1782. padding-top: 4px;
  1783. white-space: normal;
  1784. }
  1785. .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio .edit-site-create-template-part-modal__option-label div {
  1786. padding-top: 4px;
  1787. font-size: 12px;
  1788. }
  1789. .edit-site-create-template-part-modal__area-radio-group .components-button.edit-site-create-template-part-modal__area-radio .edit-site-create-template-part-modal__checkbox {
  1790. margin-right: auto;
  1791. min-width: 24px;
  1792. }
  1793. .edit-site-editor__inserter-panel,
  1794. .edit-site-editor__list-view-panel {
  1795. height: 100%;
  1796. display: flex;
  1797. flex-direction: column;
  1798. }
  1799. .edit-site-editor__list-view-panel {
  1800. min-width: 350px;
  1801. }
  1802. .edit-site-editor__inserter-panel-header {
  1803. padding-top: 8px;
  1804. padding-left: 8px;
  1805. display: flex;
  1806. justify-content: flex-end;
  1807. }
  1808. .edit-site-editor__inserter-panel-content,
  1809. .edit-site-editor__list-view-panel-content {
  1810. height: calc(100% - 36px - 8px);
  1811. }
  1812. @media (min-width: 782px) {
  1813. .edit-site-editor__inserter-panel-content {
  1814. height: 100%;
  1815. }
  1816. }
  1817. .edit-site-editor__list-view-panel-header {
  1818. align-items: center;
  1819. border-bottom: 1px solid #ddd;
  1820. display: flex;
  1821. justify-content: space-between;
  1822. height: 48px;
  1823. padding-right: 16px;
  1824. padding-left: 4px;
  1825. }
  1826. .edit-site-editor__list-view-panel-content {
  1827. overflow-y: auto;
  1828. padding: 8px;
  1829. }
  1830. .edit-site-welcome-guide {
  1831. width: 312px;
  1832. }
  1833. .edit-site-welcome-guide__image {
  1834. background: #00a0d2;
  1835. margin: 0 0 16px;
  1836. }
  1837. .edit-site-welcome-guide__image > img {
  1838. display: block;
  1839. max-width: 100%;
  1840. -o-object-fit: cover;
  1841. object-fit: cover;
  1842. }
  1843. .edit-site-welcome-guide__heading {
  1844. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  1845. font-size: 24px;
  1846. line-height: 1.4;
  1847. margin: 16px 0 16px 0;
  1848. padding: 0 32px;
  1849. }
  1850. .edit-site-welcome-guide__text {
  1851. font-size: 13px;
  1852. line-height: 1.4;
  1853. margin: 0 0 16px 0;
  1854. padding: 0 32px;
  1855. }
  1856. .edit-site-welcome-guide__text img {
  1857. vertical-align: bottom;
  1858. }
  1859. .edit-site-welcome-guide__inserter-icon {
  1860. margin: 0 4px;
  1861. vertical-align: text-top;
  1862. }
  1863. .edit-site-keyboard-shortcut-help-modal__section {
  1864. margin: 0 0 2rem 0;
  1865. }
  1866. .edit-site-keyboard-shortcut-help-modal__main-shortcuts .edit-site-keyboard-shortcut-help-modal__shortcut-list {
  1867. margin-top: -25px;
  1868. }
  1869. .edit-site-keyboard-shortcut-help-modal__section-title {
  1870. font-size: 0.9rem;
  1871. font-weight: 600;
  1872. }
  1873. .edit-site-keyboard-shortcut-help-modal__shortcut {
  1874. display: flex;
  1875. align-items: baseline;
  1876. padding: 0.6rem 0;
  1877. border-top: 1px solid #ddd;
  1878. margin-bottom: 0;
  1879. }
  1880. .edit-site-keyboard-shortcut-help-modal__shortcut:last-child {
  1881. border-bottom: 1px solid #ddd;
  1882. }
  1883. .edit-site-keyboard-shortcut-help-modal__shortcut:empty {
  1884. display: none;
  1885. }
  1886. .edit-site-keyboard-shortcut-help-modal__shortcut-term {
  1887. font-weight: 600;
  1888. margin: 0 1rem 0 0;
  1889. text-align: left;
  1890. }
  1891. .edit-site-keyboard-shortcut-help-modal__shortcut-description {
  1892. flex: 1;
  1893. margin: 0;
  1894. flex-basis: auto;
  1895. }
  1896. .edit-site-keyboard-shortcut-help-modal__shortcut-key-combination {
  1897. display: block;
  1898. background: none;
  1899. margin: 0;
  1900. padding: 0;
  1901. }
  1902. .edit-site-keyboard-shortcut-help-modal__shortcut-key-combination + .edit-site-keyboard-shortcut-help-modal__shortcut-key-combination {
  1903. margin-top: 10px;
  1904. }
  1905. .edit-site-keyboard-shortcut-help-modal__shortcut-key {
  1906. padding: 0.25rem 0.5rem;
  1907. border-radius: 8%;
  1908. margin: 0 0.2rem 0 0.2rem;
  1909. }
  1910. .edit-site-keyboard-shortcut-help-modal__shortcut-key:last-child {
  1911. margin: 0 0.2rem 0 0;
  1912. }
  1913. html.wp-toolbar {
  1914. background: #fff;
  1915. }
  1916. body.appearance_page_gutenberg-edit-site,
  1917. body.site-editor-php {
  1918. background: #fff;
  1919. /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
  1920. Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
  1921. }
  1922. body.appearance_page_gutenberg-edit-site #wpcontent,
  1923. body.site-editor-php #wpcontent {
  1924. padding-right: 0;
  1925. }
  1926. body.appearance_page_gutenberg-edit-site #wpbody-content,
  1927. body.site-editor-php #wpbody-content {
  1928. padding-bottom: 0;
  1929. }
  1930. body.appearance_page_gutenberg-edit-site #wpbody-content > div:not(.edit-site):not(#screen-meta),
  1931. body.site-editor-php #wpbody-content > div:not(.edit-site):not(#screen-meta) {
  1932. display: none;
  1933. }
  1934. body.appearance_page_gutenberg-edit-site #wpfooter,
  1935. body.site-editor-php #wpfooter {
  1936. display: none;
  1937. }
  1938. body.appearance_page_gutenberg-edit-site .a11y-speak-region,
  1939. body.site-editor-php .a11y-speak-region {
  1940. right: -1px;
  1941. top: -1px;
  1942. }
  1943. body.appearance_page_gutenberg-edit-site ul#adminmenu a.wp-has-current-submenu::after,
  1944. body.appearance_page_gutenberg-edit-site ul#adminmenu > li.current > a.current::after,
  1945. body.site-editor-php ul#adminmenu a.wp-has-current-submenu::after,
  1946. body.site-editor-php ul#adminmenu > li.current > a.current::after {
  1947. border-left-color: #fff;
  1948. }
  1949. body.appearance_page_gutenberg-edit-site .media-frame select.attachment-filters:last-of-type,
  1950. body.site-editor-php .media-frame select.attachment-filters:last-of-type {
  1951. width: auto;
  1952. max-width: 100%;
  1953. }
  1954. .edit-site,
  1955. .components-modal__frame {
  1956. box-sizing: border-box;
  1957. }
  1958. .edit-site *,
  1959. .edit-site *::before,
  1960. .edit-site *::after,
  1961. .components-modal__frame *,
  1962. .components-modal__frame *::before,
  1963. .components-modal__frame *::after {
  1964. box-sizing: inherit;
  1965. }
  1966. @media (min-width: 600px) {
  1967. .edit-site {
  1968. bottom: 0;
  1969. right: 0;
  1970. min-height: 100vh;
  1971. position: absolute;
  1972. left: 0;
  1973. top: 0;
  1974. }
  1975. }
  1976. .edit-site .interface-interface-skeleton {
  1977. top: 0;
  1978. }
  1979. .edit-site .interface-complementary-area__pin-unpin-item.components-button {
  1980. display: none;
  1981. }
  1982. .edit-site .interface-interface-skeleton__content {
  1983. background-color: #2f2f2f;
  1984. }
  1985. /**
  1986. * Animations
  1987. */
  1988. @keyframes edit-post__fade-in-animation {
  1989. from {
  1990. opacity: 0;
  1991. }
  1992. to {
  1993. opacity: 1;
  1994. }
  1995. }
  1996. body.admin-color-light {
  1997. --wp-admin-theme-color: #0085ba;
  1998. --wp-admin-theme-color--rgb: 0, 133, 186;
  1999. --wp-admin-theme-color-darker-10: #0073a1;
  2000. --wp-admin-theme-color-darker-10--rgb: 0, 115, 161;
  2001. --wp-admin-theme-color-darker-20: #006187;
  2002. --wp-admin-theme-color-darker-20--rgb: 0, 97, 135;
  2003. --wp-admin-border-width-focus: 2px;
  2004. }
  2005. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  2006. body.admin-color-light {
  2007. --wp-admin-border-width-focus: 1.5px;
  2008. }
  2009. }
  2010. body.admin-color-modern {
  2011. --wp-admin-theme-color: #3858e9;
  2012. --wp-admin-theme-color--rgb: 56, 88, 233;
  2013. --wp-admin-theme-color-darker-10: #2145e6;
  2014. --wp-admin-theme-color-darker-10--rgb: 33, 69, 230;
  2015. --wp-admin-theme-color-darker-20: #183ad6;
  2016. --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
  2017. --wp-admin-border-width-focus: 2px;
  2018. }
  2019. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  2020. body.admin-color-modern {
  2021. --wp-admin-border-width-focus: 1.5px;
  2022. }
  2023. }
  2024. body.admin-color-blue {
  2025. --wp-admin-theme-color: #096484;
  2026. --wp-admin-theme-color--rgb: 9, 100, 132;
  2027. --wp-admin-theme-color-darker-10: #07526c;
  2028. --wp-admin-theme-color-darker-10--rgb: 7, 82, 108;
  2029. --wp-admin-theme-color-darker-20: #064054;
  2030. --wp-admin-theme-color-darker-20--rgb: 6, 64, 84;
  2031. --wp-admin-border-width-focus: 2px;
  2032. }
  2033. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  2034. body.admin-color-blue {
  2035. --wp-admin-border-width-focus: 1.5px;
  2036. }
  2037. }
  2038. body.admin-color-coffee {
  2039. --wp-admin-theme-color: #46403c;
  2040. --wp-admin-theme-color--rgb: 70, 64, 60;
  2041. --wp-admin-theme-color-darker-10: #383330;
  2042. --wp-admin-theme-color-darker-10--rgb: 56, 51, 48;
  2043. --wp-admin-theme-color-darker-20: #2b2724;
  2044. --wp-admin-theme-color-darker-20--rgb: 43, 39, 36;
  2045. --wp-admin-border-width-focus: 2px;
  2046. }
  2047. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  2048. body.admin-color-coffee {
  2049. --wp-admin-border-width-focus: 1.5px;
  2050. }
  2051. }
  2052. body.admin-color-ectoplasm {
  2053. --wp-admin-theme-color: #523f6d;
  2054. --wp-admin-theme-color--rgb: 82, 63, 109;
  2055. --wp-admin-theme-color-darker-10: #46365d;
  2056. --wp-admin-theme-color-darker-10--rgb: 70, 54, 93;
  2057. --wp-admin-theme-color-darker-20: #3a2c4d;
  2058. --wp-admin-theme-color-darker-20--rgb: 58, 44, 77;
  2059. --wp-admin-border-width-focus: 2px;
  2060. }
  2061. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  2062. body.admin-color-ectoplasm {
  2063. --wp-admin-border-width-focus: 1.5px;
  2064. }
  2065. }
  2066. body.admin-color-midnight {
  2067. --wp-admin-theme-color: #e14d43;
  2068. --wp-admin-theme-color--rgb: 225, 77, 67;
  2069. --wp-admin-theme-color-darker-10: #dd382d;
  2070. --wp-admin-theme-color-darker-10--rgb: 221, 56, 45;
  2071. --wp-admin-theme-color-darker-20: #d02c21;
  2072. --wp-admin-theme-color-darker-20--rgb: 208, 44, 33;
  2073. --wp-admin-border-width-focus: 2px;
  2074. }
  2075. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  2076. body.admin-color-midnight {
  2077. --wp-admin-border-width-focus: 1.5px;
  2078. }
  2079. }
  2080. body.admin-color-ocean {
  2081. --wp-admin-theme-color: #627c83;
  2082. --wp-admin-theme-color--rgb: 98, 124, 131;
  2083. --wp-admin-theme-color-darker-10: #576e74;
  2084. --wp-admin-theme-color-darker-10--rgb: 87, 110, 116;
  2085. --wp-admin-theme-color-darker-20: #4c6066;
  2086. --wp-admin-theme-color-darker-20--rgb: 76, 96, 102;
  2087. --wp-admin-border-width-focus: 2px;
  2088. }
  2089. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  2090. body.admin-color-ocean {
  2091. --wp-admin-border-width-focus: 1.5px;
  2092. }
  2093. }
  2094. body.admin-color-sunrise {
  2095. --wp-admin-theme-color: #dd823b;
  2096. --wp-admin-theme-color--rgb: 221, 130, 59;
  2097. --wp-admin-theme-color-darker-10: #d97426;
  2098. --wp-admin-theme-color-darker-10--rgb: 217, 116, 38;
  2099. --wp-admin-theme-color-darker-20: #c36922;
  2100. --wp-admin-theme-color-darker-20--rgb: 195, 105, 34;
  2101. --wp-admin-border-width-focus: 2px;
  2102. }
  2103. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  2104. body.admin-color-sunrise {
  2105. --wp-admin-border-width-focus: 1.5px;
  2106. }
  2107. }