Brak opisu

style.css 24KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008
  1. /**
  2. * Colors
  3. */
  4. /**
  5. * Breakpoints & Media Queries
  6. */
  7. /**
  8. * SCSS Variables.
  9. *
  10. * Please use variables from this sheet to ensure consistency across the UI.
  11. * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  12. * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  13. */
  14. /**
  15. * Colors
  16. */
  17. /**
  18. * Fonts & basic variables.
  19. */
  20. /**
  21. * Grid System.
  22. * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  23. */
  24. /**
  25. * Dimensions.
  26. */
  27. /**
  28. * Shadows.
  29. */
  30. /**
  31. * Editor widths.
  32. */
  33. /**
  34. * Block & Editor UI.
  35. */
  36. /**
  37. * Block paddings.
  38. */
  39. /**
  40. * React Native specific.
  41. * These variables do not appear to be used anywhere else.
  42. */
  43. /**
  44. * Breakpoint mixins
  45. */
  46. /**
  47. * Long content fade mixin
  48. *
  49. * Creates a fading overlay to signify that the content is longer
  50. * than the space allows.
  51. */
  52. /**
  53. * Focus styles.
  54. */
  55. /**
  56. * Applies editor left position to the selector passed as argument
  57. */
  58. /**
  59. * Styles that are reused verbatim in a few places
  60. */
  61. /**
  62. * Allows users to opt-out of animations via OS-level preferences.
  63. */
  64. /**
  65. * Reset default styles for JavaScript UI based pages.
  66. * This is a WP-admin agnostic reset
  67. */
  68. /**
  69. * Reset the WP Admin page styles for Gutenberg-like pages.
  70. */
  71. :root {
  72. --wp-admin-theme-color: #007cba;
  73. --wp-admin-theme-color-darker-10: #006ba1;
  74. --wp-admin-theme-color-darker-20: #005a87;
  75. --wp-admin-border-width-focus: 2px;
  76. }
  77. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  78. :root {
  79. --wp-admin-border-width-focus: 1.5px;
  80. }
  81. }
  82. .components-panel__header.interface-complementary-area-header__small {
  83. background: #fff;
  84. padding-right: 4px;
  85. }
  86. .components-panel__header.interface-complementary-area-header__small .interface-complementary-area-header__small-title {
  87. overflow: hidden;
  88. text-overflow: ellipsis;
  89. white-space: nowrap;
  90. width: 100%;
  91. }
  92. @media (min-width: 782px) {
  93. .components-panel__header.interface-complementary-area-header__small {
  94. display: none;
  95. }
  96. }
  97. .interface-complementary-area-header {
  98. background: #fff;
  99. padding-right: 4px;
  100. }
  101. .interface-complementary-area-header .components-button.has-icon {
  102. display: none;
  103. margin-left: auto;
  104. }
  105. .interface-complementary-area-header .components-button.has-icon ~ .components-button {
  106. margin-left: 0;
  107. }
  108. @media (min-width: 782px) {
  109. .interface-complementary-area-header .components-button.has-icon {
  110. display: flex;
  111. }
  112. }
  113. .interface-complementary-area {
  114. background: #fff;
  115. color: #1e1e1e;
  116. }
  117. @media (min-width: 600px) {
  118. .interface-complementary-area {
  119. -webkit-overflow-scrolling: touch;
  120. }
  121. }
  122. @media (min-width: 782px) {
  123. .interface-complementary-area {
  124. width: 280px;
  125. }
  126. }
  127. .interface-complementary-area .components-panel {
  128. border: none;
  129. position: relative;
  130. z-index: 0;
  131. }
  132. .interface-complementary-area .components-panel__header {
  133. position: sticky;
  134. top: 0;
  135. z-index: 1;
  136. }
  137. .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs {
  138. top: 48px;
  139. }
  140. @media (min-width: 782px) {
  141. .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs {
  142. top: 0;
  143. }
  144. }
  145. .interface-complementary-area p {
  146. margin-top: 0;
  147. }
  148. .interface-complementary-area h2,
  149. .interface-complementary-area h3 {
  150. font-size: 13px;
  151. color: #1e1e1e;
  152. margin-bottom: 1.5em;
  153. }
  154. .interface-complementary-area hr {
  155. border-top: none;
  156. border-bottom: 1px solid #f0f0f0;
  157. margin: 1.5em 0;
  158. }
  159. .interface-complementary-area div.components-toolbar-group,
  160. .interface-complementary-area div.components-toolbar {
  161. box-shadow: none;
  162. margin-bottom: 1.5em;
  163. }
  164. .interface-complementary-area div.components-toolbar-group:last-child,
  165. .interface-complementary-area div.components-toolbar:last-child {
  166. margin-bottom: 0;
  167. }
  168. .interface-complementary-area .block-editor-skip-to-selected-block:focus {
  169. top: auto;
  170. right: 10px;
  171. bottom: 10px;
  172. left: auto;
  173. }
  174. @media (min-width: 782px) {
  175. body.js.is-fullscreen-mode {
  176. margin-top: -32px;
  177. height: calc(100% + 32px);
  178. }
  179. body.js.is-fullscreen-mode #adminmenumain,
  180. body.js.is-fullscreen-mode #wpadminbar {
  181. display: none;
  182. }
  183. body.js.is-fullscreen-mode #wpcontent,
  184. body.js.is-fullscreen-mode #wpfooter {
  185. margin-left: 0;
  186. }
  187. }
  188. html.interface-interface-skeleton__html-container {
  189. position: fixed;
  190. width: 100%;
  191. }
  192. @media (min-width: 782px) {
  193. html.interface-interface-skeleton__html-container {
  194. position: initial;
  195. width: initial;
  196. }
  197. }
  198. .interface-interface-skeleton {
  199. display: flex;
  200. flex-direction: row;
  201. height: auto;
  202. max-height: 100%;
  203. position: fixed;
  204. top: 46px;
  205. left: 0;
  206. right: 0;
  207. bottom: 0;
  208. }
  209. @media (min-width: 783px) {
  210. .interface-interface-skeleton {
  211. top: 32px;
  212. }
  213. .is-fullscreen-mode .interface-interface-skeleton {
  214. top: 0;
  215. }
  216. }
  217. .interface-interface-skeleton__editor {
  218. display: flex;
  219. flex-direction: column;
  220. flex: 0 1 100%;
  221. overflow: hidden;
  222. }
  223. .interface-interface-skeleton {
  224. /* Set left position when auto-fold is not on the body element. */
  225. left: 0;
  226. }
  227. @media (min-width: 783px) {
  228. .interface-interface-skeleton {
  229. left: 160px;
  230. }
  231. }
  232. .auto-fold .interface-interface-skeleton {
  233. /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
  234. }
  235. @media (min-width: 783px) {
  236. .auto-fold .interface-interface-skeleton {
  237. left: 36px;
  238. }
  239. }
  240. @media (min-width: 961px) {
  241. .auto-fold .interface-interface-skeleton {
  242. left: 160px;
  243. }
  244. }
  245. /* Sidebar manually collapsed. */
  246. .folded .interface-interface-skeleton {
  247. left: 0;
  248. }
  249. @media (min-width: 783px) {
  250. .folded .interface-interface-skeleton {
  251. left: 36px;
  252. }
  253. }
  254. body.is-fullscreen-mode .interface-interface-skeleton {
  255. left: 0 !important;
  256. }
  257. .interface-interface-skeleton__body {
  258. flex-grow: 1;
  259. display: flex;
  260. overflow: auto;
  261. overscroll-behavior-y: none;
  262. }
  263. @media (min-width: 782px) {
  264. .has-footer .interface-interface-skeleton__body {
  265. padding-bottom: 25px;
  266. }
  267. }
  268. .interface-interface-skeleton__content {
  269. flex-grow: 1;
  270. display: flex;
  271. flex-direction: column;
  272. overflow: auto;
  273. z-index: 20;
  274. }
  275. .interface-interface-skeleton__secondary-sidebar,
  276. .interface-interface-skeleton__sidebar {
  277. display: block;
  278. flex-shrink: 0;
  279. position: absolute;
  280. z-index: 100000;
  281. top: 0;
  282. right: 0;
  283. bottom: 0;
  284. left: 0;
  285. background: #fff;
  286. color: #1e1e1e;
  287. }
  288. @media (min-width: 782px) {
  289. .interface-interface-skeleton__secondary-sidebar,
  290. .interface-interface-skeleton__sidebar {
  291. position: relative !important;
  292. z-index: 90;
  293. width: auto;
  294. }
  295. }
  296. .interface-interface-skeleton__sidebar {
  297. overflow: auto;
  298. }
  299. @media (min-width: 782px) {
  300. .interface-interface-skeleton__sidebar {
  301. border-left: 1px solid #e0e0e0;
  302. }
  303. }
  304. @media (min-width: 782px) {
  305. .interface-interface-skeleton__secondary-sidebar {
  306. border-right: 1px solid #e0e0e0;
  307. }
  308. }
  309. .interface-interface-skeleton__header {
  310. flex-shrink: 0;
  311. height: auto;
  312. border-bottom: 1px solid #e0e0e0;
  313. z-index: 30;
  314. color: #1e1e1e;
  315. }
  316. .interface-interface-skeleton__footer {
  317. height: auto;
  318. flex-shrink: 0;
  319. border-top: 1px solid #e0e0e0;
  320. color: #1e1e1e;
  321. position: absolute;
  322. bottom: 0;
  323. left: 0;
  324. width: 100%;
  325. background-color: #fff;
  326. z-index: 90;
  327. display: none;
  328. }
  329. @media (min-width: 782px) {
  330. .interface-interface-skeleton__footer {
  331. display: flex;
  332. }
  333. }
  334. .interface-interface-skeleton__footer .block-editor-block-breadcrumb {
  335. z-index: 30;
  336. display: flex;
  337. background: #fff;
  338. height: 24px;
  339. align-items: center;
  340. font-size: 13px;
  341. padding: 0 18px;
  342. }
  343. .interface-interface-skeleton__actions {
  344. z-index: 100000;
  345. position: fixed !important;
  346. top: -9999em;
  347. bottom: auto;
  348. left: auto;
  349. right: 0;
  350. width: 280px;
  351. color: #1e1e1e;
  352. }
  353. .interface-interface-skeleton__actions:focus {
  354. top: auto;
  355. bottom: 0;
  356. }
  357. .interface-pinned-items {
  358. display: flex;
  359. }
  360. .interface-pinned-items .components-button:not(:first-child) {
  361. display: none;
  362. }
  363. @media (min-width: 600px) {
  364. .interface-pinned-items .components-button:not(:first-child) {
  365. display: flex;
  366. }
  367. }
  368. .interface-pinned-items .components-button {
  369. margin-left: 4px;
  370. }
  371. .interface-pinned-items .components-button svg {
  372. max-width: 24px;
  373. max-height: 24px;
  374. }
  375. .wp-block[data-type="core/widget-area"] {
  376. max-width: 700px;
  377. margin-left: auto;
  378. margin-right: auto;
  379. }
  380. .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title {
  381. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  382. margin: 0;
  383. height: 48px;
  384. position: relative;
  385. z-index: 1;
  386. background: #fff;
  387. transform: translateZ(0);
  388. }
  389. .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title:hover {
  390. background: #fff;
  391. }
  392. .wp-block[data-type="core/widget-area"] .block-list-appender.wp-block {
  393. width: initial;
  394. }
  395. .wp-block[data-type="core/widget-area"] .editor-styles-wrapper .wp-block.wp-block.wp-block.wp-block.wp-block {
  396. max-width: 100%;
  397. }
  398. .wp-block[data-type="core/widget-area"] .components-panel__body.is-opened {
  399. padding: 0;
  400. }
  401. .blocks-widgets-container .wp-block-widget-area__inner-blocks.editor-styles-wrapper {
  402. margin: 0;
  403. padding: 0;
  404. }
  405. .blocks-widgets-container .wp-block-widget-area__inner-blocks.editor-styles-wrapper > .block-editor-block-list__layout {
  406. margin-top: -48px;
  407. padding: 72px 16px 16px;
  408. min-height: 32px;
  409. }
  410. .wp-block-widget-area__highlight-drop-zone {
  411. outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
  412. }
  413. body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title,
  414. body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title * {
  415. pointer-events: none;
  416. }
  417. .edit-widgets-error-boundary {
  418. margin: auto;
  419. max-width: 780px;
  420. padding: 20px;
  421. margin-top: 60px;
  422. box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
  423. }
  424. .edit-widgets-header {
  425. display: flex;
  426. align-items: center;
  427. justify-content: space-between;
  428. height: 60px;
  429. padding: 0 16px;
  430. overflow: auto;
  431. }
  432. @media (min-width: 600px) {
  433. .edit-widgets-header {
  434. overflow: visible;
  435. }
  436. }
  437. .edit-widgets-header__navigable-toolbar-wrapper {
  438. display: flex;
  439. align-items: center;
  440. justify-content: center;
  441. }
  442. .edit-widgets-header__title {
  443. font-size: 20px;
  444. padding: 0;
  445. margin: 0 20px 0 0;
  446. }
  447. .edit-widgets-header__actions {
  448. display: flex;
  449. }
  450. .edit-widgets-header__actions .components-button {
  451. margin-right: 4px;
  452. }
  453. @media (min-width: 600px) {
  454. .edit-widgets-header__actions .components-button {
  455. margin-right: 12px;
  456. }
  457. }
  458. .edit-widgets-header__actions .edit-widgets-more-menu .components-button,
  459. .edit-widgets-header__actions .interface-pinned-items .components-button {
  460. margin-right: 0;
  461. }
  462. .edit-widgets-header-toolbar {
  463. border: none;
  464. }
  465. .edit-widgets-header-toolbar > .components-button.has-icon,
  466. .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon {
  467. height: 36px;
  468. min-width: 36px;
  469. padding: 6px;
  470. }
  471. .edit-widgets-header-toolbar > .components-button.has-icon.is-pressed,
  472. .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.is-pressed {
  473. background: #1e1e1e;
  474. }
  475. .edit-widgets-header-toolbar > .components-button.has-icon:focus:not(:disabled),
  476. .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon:focus:not(:disabled) {
  477. box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
  478. outline: 1px solid transparent;
  479. }
  480. .edit-widgets-header-toolbar > .components-button.has-icon::before,
  481. .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon::before {
  482. display: none;
  483. }
  484. .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle {
  485. padding-left: 8px;
  486. padding-right: 8px;
  487. }
  488. @media (min-width: 600px) {
  489. .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle {
  490. padding-left: 12px;
  491. padding-right: 12px;
  492. }
  493. }
  494. .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle::after {
  495. content: none;
  496. }
  497. .edit-widgets-keyboard-shortcut-help-modal__section {
  498. margin: 0 0 2rem 0;
  499. }
  500. .edit-widgets-keyboard-shortcut-help-modal__main-shortcuts .edit-widgets-keyboard-shortcut-help-modal__shortcut-list {
  501. margin-top: -25px;
  502. }
  503. .edit-widgets-keyboard-shortcut-help-modal__section-title {
  504. font-size: 0.9rem;
  505. font-weight: 600;
  506. }
  507. .edit-widgets-keyboard-shortcut-help-modal__shortcut {
  508. display: flex;
  509. align-items: baseline;
  510. padding: 0.6rem 0;
  511. border-top: 1px solid #ddd;
  512. margin-bottom: 0;
  513. }
  514. .edit-widgets-keyboard-shortcut-help-modal__shortcut:last-child {
  515. border-bottom: 1px solid #ddd;
  516. }
  517. .edit-widgets-keyboard-shortcut-help-modal__shortcut:empty {
  518. display: none;
  519. }
  520. .edit-widgets-keyboard-shortcut-help-modal__shortcut-term {
  521. font-weight: 600;
  522. margin: 0 0 0 1rem;
  523. text-align: right;
  524. }
  525. .edit-widgets-keyboard-shortcut-help-modal__shortcut-description {
  526. flex: 1;
  527. margin: 0;
  528. flex-basis: auto;
  529. }
  530. .edit-widgets-keyboard-shortcut-help-modal__shortcut-key-combination {
  531. display: block;
  532. background: none;
  533. margin: 0;
  534. padding: 0;
  535. }
  536. .edit-widgets-keyboard-shortcut-help-modal__shortcut-key-combination + .edit-widgets-keyboard-shortcut-help-modal__shortcut-key-combination {
  537. margin-top: 10px;
  538. }
  539. .edit-widgets-keyboard-shortcut-help-modal__shortcut-key {
  540. padding: 0.25rem 0.5rem;
  541. border-radius: 8%;
  542. margin: 0 0.2rem 0 0.2rem;
  543. }
  544. .edit-widgets-keyboard-shortcut-help-modal__shortcut-key:last-child {
  545. margin: 0 0 0 0.2rem;
  546. }
  547. .edit-widgets-more-menu {
  548. margin-left: -4px;
  549. }
  550. .edit-widgets-more-menu .components-button {
  551. width: auto;
  552. padding: 0 2px;
  553. }
  554. @media (min-width: 600px) {
  555. .edit-widgets-more-menu {
  556. margin-left: 0;
  557. }
  558. .edit-widgets-more-menu .components-button {
  559. padding: 0 4px;
  560. }
  561. }
  562. .edit-widgets-more-menu__content .components-popover__content {
  563. min-width: 280px;
  564. }
  565. @media (min-width: 480px) {
  566. .edit-widgets-more-menu__content .components-popover__content {
  567. width: auto;
  568. max-width: 480px;
  569. }
  570. }
  571. .edit-widgets-more-menu__content .components-popover__content .components-dropdown-menu__menu {
  572. padding: 0;
  573. }
  574. .components-popover.edit-widgets-more-menu__content {
  575. z-index: 99998;
  576. }
  577. .components-panel__header.edit-widgets-sidebar__panel-tabs {
  578. justify-content: flex-start;
  579. padding-left: 0;
  580. padding-right: 4px;
  581. border-top: 0;
  582. margin-top: 0;
  583. }
  584. .components-panel__header.edit-widgets-sidebar__panel-tabs ul {
  585. display: flex;
  586. }
  587. .components-panel__header.edit-widgets-sidebar__panel-tabs li {
  588. margin: 0;
  589. }
  590. .components-panel__header.edit-widgets-sidebar__panel-tabs .components-button.has-icon {
  591. display: none;
  592. margin-left: auto;
  593. }
  594. @media (min-width: 782px) {
  595. .components-panel__header.edit-widgets-sidebar__panel-tabs .components-button.has-icon {
  596. display: flex;
  597. }
  598. }
  599. .components-button.edit-widgets-sidebar__panel-tab {
  600. border-radius: 0;
  601. height: 49px;
  602. background: transparent;
  603. border: none;
  604. box-shadow: none;
  605. cursor: pointer;
  606. display: inline-block;
  607. padding: 3px 15px;
  608. margin-left: 0;
  609. font-weight: 400;
  610. color: #1e1e1e;
  611. }
  612. .components-button.edit-widgets-sidebar__panel-tab::after {
  613. content: attr(data-label);
  614. display: block;
  615. font-weight: 600;
  616. height: 0;
  617. overflow: hidden;
  618. speak: none;
  619. visibility: hidden;
  620. }
  621. .components-button.edit-widgets-sidebar__panel-tab.is-active {
  622. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color);
  623. font-weight: 600;
  624. position: relative;
  625. }
  626. .components-button.edit-widgets-sidebar__panel-tab.is-active::before {
  627. content: "";
  628. position: absolute;
  629. top: 0;
  630. bottom: 1px;
  631. right: 0;
  632. left: 0;
  633. border-bottom: 4px solid transparent;
  634. }
  635. .components-button.edit-widgets-sidebar__panel-tab:focus {
  636. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  637. }
  638. .components-button.edit-widgets-sidebar__panel-tab.is-active:focus {
  639. 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);
  640. }
  641. .edit-widgets-widget-areas__top-container {
  642. display: flex;
  643. padding: 16px;
  644. }
  645. .edit-widgets-widget-areas__top-container .block-editor-block-icon {
  646. margin-right: 16px;
  647. }
  648. .edit-widgets-notices__snackbar {
  649. position: fixed;
  650. right: 0;
  651. bottom: 20px;
  652. padding-left: 16px;
  653. padding-right: 16px;
  654. }
  655. .edit-widgets-notices__snackbar {
  656. /* Set left position when auto-fold is not on the body element. */
  657. left: 0;
  658. }
  659. @media (min-width: 783px) {
  660. .edit-widgets-notices__snackbar {
  661. left: 160px;
  662. }
  663. }
  664. .auto-fold .edit-widgets-notices__snackbar {
  665. /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
  666. }
  667. @media (min-width: 783px) {
  668. .auto-fold .edit-widgets-notices__snackbar {
  669. left: 36px;
  670. }
  671. }
  672. @media (min-width: 961px) {
  673. .auto-fold .edit-widgets-notices__snackbar {
  674. left: 160px;
  675. }
  676. }
  677. /* Sidebar manually collapsed. */
  678. .folded .edit-widgets-notices__snackbar {
  679. left: 0;
  680. }
  681. @media (min-width: 783px) {
  682. .folded .edit-widgets-notices__snackbar {
  683. left: 36px;
  684. }
  685. }
  686. body.is-fullscreen-mode .edit-widgets-notices__snackbar {
  687. left: 0 !important;
  688. }
  689. .edit-widgets-notices__dismissible .components-notice,
  690. .edit-widgets-notices__pinned .components-notice {
  691. box-sizing: border-box;
  692. margin: 0;
  693. border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  694. padding: 0 12px;
  695. min-height: 60px;
  696. }
  697. .edit-widgets-notices__dismissible .components-notice .components-notice__dismiss,
  698. .edit-widgets-notices__pinned .components-notice .components-notice__dismiss {
  699. margin-top: 12px;
  700. }
  701. .edit-widgets-layout__inserter-panel {
  702. height: 100%;
  703. display: flex;
  704. flex-direction: column;
  705. }
  706. .edit-widgets-layout__inserter-panel .block-editor-inserter__menu {
  707. overflow: hidden;
  708. }
  709. .edit-widgets-layout__inserter-panel-header {
  710. padding-top: 8px;
  711. padding-right: 8px;
  712. display: flex;
  713. justify-content: flex-end;
  714. }
  715. @media (min-width: 782px) {
  716. .edit-widgets-layout__inserter-panel-header {
  717. display: none;
  718. }
  719. }
  720. .edit-widgets-layout__inserter-panel-content {
  721. height: calc(100% - 36px - 8px);
  722. }
  723. @media (min-width: 782px) {
  724. .edit-widgets-layout__inserter-panel-content {
  725. height: 100%;
  726. }
  727. }
  728. .edit-widgets-welcome-guide {
  729. width: 312px;
  730. }
  731. .edit-widgets-welcome-guide__image {
  732. background: #00a0d2;
  733. margin: 0 0 16px;
  734. }
  735. .edit-widgets-welcome-guide__heading {
  736. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  737. font-size: 24px;
  738. line-height: 1.4;
  739. margin: 16px 0 16px 0;
  740. padding: 0 32px;
  741. }
  742. .edit-widgets-welcome-guide__text {
  743. font-size: 13px;
  744. line-height: 1.4;
  745. margin: 0 0 24px 0;
  746. padding: 0 32px;
  747. }
  748. .edit-widgets-welcome-guide__inserter-icon {
  749. margin: 0 4px;
  750. vertical-align: text-top;
  751. }
  752. .edit-widgets-block-editor {
  753. position: relative;
  754. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  755. display: flex;
  756. flex-direction: column;
  757. flex-grow: 1;
  758. }
  759. .edit-widgets-block-editor > div:last-of-type,
  760. .edit-widgets-block-editor .block-editor-writing-flow,
  761. .edit-widgets-block-editor .block-editor-writing-flow > div {
  762. display: flex;
  763. flex-direction: column;
  764. flex-grow: 1;
  765. }
  766. .edit-widgets-block-editor .edit-widgets-main-block-list {
  767. height: 100%;
  768. }
  769. .edit-widgets-block-editor .components-button {
  770. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  771. font-size: 13px;
  772. }
  773. .edit-widgets-block-editor .components-button.is-tertiary, .edit-widgets-block-editor .components-button.has-icon {
  774. padding: 6px;
  775. }
  776. html.wp-toolbar {
  777. background: #fff;
  778. }
  779. body.appearance_page_gutenberg-widgets,
  780. body.widgets-php {
  781. background: #fff;
  782. /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
  783. Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
  784. }
  785. body.appearance_page_gutenberg-widgets #wpcontent,
  786. body.widgets-php #wpcontent {
  787. padding-left: 0;
  788. }
  789. body.appearance_page_gutenberg-widgets #wpbody-content,
  790. body.widgets-php #wpbody-content {
  791. padding-bottom: 0;
  792. }
  793. body.appearance_page_gutenberg-widgets #wpbody-content > div:not(.blocks-widgets-container):not(#screen-meta),
  794. body.widgets-php #wpbody-content > div:not(.blocks-widgets-container):not(#screen-meta) {
  795. display: none;
  796. }
  797. body.appearance_page_gutenberg-widgets #wpfooter,
  798. body.widgets-php #wpfooter {
  799. display: none;
  800. }
  801. body.appearance_page_gutenberg-widgets .a11y-speak-region,
  802. body.widgets-php .a11y-speak-region {
  803. left: -1px;
  804. top: -1px;
  805. }
  806. body.appearance_page_gutenberg-widgets ul#adminmenu a.wp-has-current-submenu::after,
  807. body.appearance_page_gutenberg-widgets ul#adminmenu > li.current > a.current::after,
  808. body.widgets-php ul#adminmenu a.wp-has-current-submenu::after,
  809. body.widgets-php ul#adminmenu > li.current > a.current::after {
  810. border-right-color: #fff;
  811. }
  812. body.appearance_page_gutenberg-widgets .media-frame select.attachment-filters:last-of-type,
  813. body.widgets-php .media-frame select.attachment-filters:last-of-type {
  814. width: auto;
  815. max-width: 100%;
  816. }
  817. .blocks-widgets-container,
  818. .components-modal__frame {
  819. box-sizing: border-box;
  820. }
  821. .blocks-widgets-container *,
  822. .blocks-widgets-container *::before,
  823. .blocks-widgets-container *::after,
  824. .components-modal__frame *,
  825. .components-modal__frame *::before,
  826. .components-modal__frame *::after {
  827. box-sizing: inherit;
  828. }
  829. @media (min-width: 600px) {
  830. .blocks-widgets-container {
  831. position: absolute;
  832. top: 0;
  833. right: 0;
  834. bottom: 0;
  835. left: 0;
  836. min-height: calc(100vh - 46px);
  837. }
  838. }
  839. @media (min-width: 782px) {
  840. .blocks-widgets-container {
  841. min-height: calc(100vh - 32px);
  842. }
  843. }
  844. .blocks-widgets-container .interface-interface-skeleton__content {
  845. background-color: #f0f0f0;
  846. }
  847. .blocks-widgets-container .editor-styles-wrapper {
  848. max-width: 700px;
  849. margin: auto;
  850. }
  851. .edit-widgets-sidebar .components-button.interface-complementary-area__pin-unpin-item {
  852. display: none;
  853. }
  854. .widgets-php .notice {
  855. display: none !important;
  856. }
  857. body.admin-color-light {
  858. --wp-admin-theme-color: #0085ba;
  859. --wp-admin-theme-color-darker-10: #0073a1;
  860. --wp-admin-theme-color-darker-20: #006187;
  861. --wp-admin-border-width-focus: 2px;
  862. }
  863. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  864. body.admin-color-light {
  865. --wp-admin-border-width-focus: 1.5px;
  866. }
  867. }
  868. body.admin-color-modern {
  869. --wp-admin-theme-color: #3858e9;
  870. --wp-admin-theme-color-darker-10: #2145e6;
  871. --wp-admin-theme-color-darker-20: #183ad6;
  872. --wp-admin-border-width-focus: 2px;
  873. }
  874. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  875. body.admin-color-modern {
  876. --wp-admin-border-width-focus: 1.5px;
  877. }
  878. }
  879. body.admin-color-blue {
  880. --wp-admin-theme-color: #096484;
  881. --wp-admin-theme-color-darker-10: #07526c;
  882. --wp-admin-theme-color-darker-20: #064054;
  883. --wp-admin-border-width-focus: 2px;
  884. }
  885. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  886. body.admin-color-blue {
  887. --wp-admin-border-width-focus: 1.5px;
  888. }
  889. }
  890. body.admin-color-coffee {
  891. --wp-admin-theme-color: #46403c;
  892. --wp-admin-theme-color-darker-10: #383330;
  893. --wp-admin-theme-color-darker-20: #2b2724;
  894. --wp-admin-border-width-focus: 2px;
  895. }
  896. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  897. body.admin-color-coffee {
  898. --wp-admin-border-width-focus: 1.5px;
  899. }
  900. }
  901. body.admin-color-ectoplasm {
  902. --wp-admin-theme-color: #523f6d;
  903. --wp-admin-theme-color-darker-10: #46365d;
  904. --wp-admin-theme-color-darker-20: #3a2c4d;
  905. --wp-admin-border-width-focus: 2px;
  906. }
  907. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  908. body.admin-color-ectoplasm {
  909. --wp-admin-border-width-focus: 1.5px;
  910. }
  911. }
  912. body.admin-color-midnight {
  913. --wp-admin-theme-color: #e14d43;
  914. --wp-admin-theme-color-darker-10: #dd382d;
  915. --wp-admin-theme-color-darker-20: #d02c21;
  916. --wp-admin-border-width-focus: 2px;
  917. }
  918. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  919. body.admin-color-midnight {
  920. --wp-admin-border-width-focus: 1.5px;
  921. }
  922. }
  923. body.admin-color-ocean {
  924. --wp-admin-theme-color: #627c83;
  925. --wp-admin-theme-color-darker-10: #576e74;
  926. --wp-admin-theme-color-darker-20: #4c6066;
  927. --wp-admin-border-width-focus: 2px;
  928. }
  929. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  930. body.admin-color-ocean {
  931. --wp-admin-border-width-focus: 1.5px;
  932. }
  933. }
  934. body.admin-color-sunrise {
  935. --wp-admin-theme-color: #dd823b;
  936. --wp-admin-theme-color-darker-10: #d97426;
  937. --wp-admin-theme-color-darker-20: #c36922;
  938. --wp-admin-border-width-focus: 2px;
  939. }
  940. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  941. body.admin-color-sunrise {
  942. --wp-admin-border-width-focus: 1.5px;
  943. }
  944. }