You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1161 lines
30 KiB

1 year ago
  1. :root{
  2. --wp-admin-theme-color:#007cba;
  3. --wp-admin-theme-color--rgb:0, 124, 186;
  4. --wp-admin-theme-color-darker-10:#006ba1;
  5. --wp-admin-theme-color-darker-10--rgb:0, 107, 161;
  6. --wp-admin-theme-color-darker-20:#005a87;
  7. --wp-admin-theme-color-darker-20--rgb:0, 90, 135;
  8. --wp-admin-border-width-focus:2px;
  9. --wp-block-synced-color:#7a00df;
  10. --wp-block-synced-color--rgb:122, 0, 223;
  11. }
  12. @media (min-resolution:192dpi){
  13. :root{
  14. --wp-admin-border-width-focus:1.5px;
  15. }
  16. }
  17. .components-panel__header.interface-complementary-area-header__small{
  18. background:#fff;
  19. padding-right:4px;
  20. }
  21. .components-panel__header.interface-complementary-area-header__small .interface-complementary-area-header__small-title{
  22. overflow:hidden;
  23. text-overflow:ellipsis;
  24. white-space:nowrap;
  25. width:100%;
  26. }
  27. @media (min-width:782px){
  28. .components-panel__header.interface-complementary-area-header__small{
  29. display:none;
  30. }
  31. }
  32. .interface-complementary-area-header{
  33. background:#fff;
  34. padding-right:4px;
  35. }
  36. .interface-complementary-area-header .components-button.has-icon{
  37. display:none;
  38. margin-left:auto;
  39. }
  40. .interface-complementary-area-header .components-button.has-icon~.components-button{
  41. margin-left:0;
  42. }
  43. @media (min-width:782px){
  44. .interface-complementary-area-header .components-button.has-icon{
  45. display:flex;
  46. }
  47. .components-panel__header+.interface-complementary-area-header{
  48. margin-top:0;
  49. }
  50. }
  51. .interface-complementary-area{
  52. background:#fff;
  53. color:#1e1e1e;
  54. }
  55. @media (min-width:600px){
  56. .interface-complementary-area{
  57. -webkit-overflow-scrolling:touch;
  58. }
  59. }
  60. @media (min-width:782px){
  61. .interface-complementary-area{
  62. width:280px;
  63. }
  64. }
  65. .interface-complementary-area .components-panel{
  66. border:none;
  67. position:relative;
  68. z-index:0;
  69. }
  70. .interface-complementary-area .components-panel__header{
  71. position:sticky;
  72. top:0;
  73. z-index:1;
  74. }
  75. .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs{
  76. top:48px;
  77. }
  78. @media (min-width:782px){
  79. .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs{
  80. top:0;
  81. }
  82. }
  83. .interface-complementary-area p:not(.components-base-control__help){
  84. margin-top:0;
  85. }
  86. .interface-complementary-area h2{
  87. color:#1e1e1e;
  88. font-size:13px;
  89. margin-bottom:1.5em;
  90. }
  91. .interface-complementary-area h3{
  92. color:#1e1e1e;
  93. font-size:11px;
  94. font-weight:500;
  95. margin-bottom:1.5em;
  96. text-transform:uppercase;
  97. }
  98. .interface-complementary-area hr{
  99. border-bottom:1px solid #f0f0f0;
  100. border-top:none;
  101. margin:1.5em 0;
  102. }
  103. .interface-complementary-area div.components-toolbar,.interface-complementary-area div.components-toolbar-group{
  104. box-shadow:none;
  105. margin-bottom:1.5em;
  106. }
  107. .interface-complementary-area div.components-toolbar-group:last-child,.interface-complementary-area div.components-toolbar:last-child{
  108. margin-bottom:0;
  109. }
  110. .interface-complementary-area .block-editor-skip-to-selected-block:focus{
  111. bottom:10px;
  112. left:auto;
  113. right:10px;
  114. top:auto;
  115. }
  116. @media (min-width:782px){
  117. body.js.is-fullscreen-mode{
  118. height:calc(100% + 32px);
  119. margin-top:-32px;
  120. }
  121. body.js.is-fullscreen-mode #adminmenumain,body.js.is-fullscreen-mode #wpadminbar{
  122. display:none;
  123. }
  124. body.js.is-fullscreen-mode #wpcontent,body.js.is-fullscreen-mode #wpfooter{
  125. margin-left:0;
  126. }
  127. }
  128. html.interface-interface-skeleton__html-container{
  129. position:fixed;
  130. width:100%;
  131. }
  132. @media (min-width:782px){
  133. html.interface-interface-skeleton__html-container{
  134. position:static;
  135. width:auto;
  136. }
  137. }
  138. .interface-interface-skeleton{
  139. bottom:0;
  140. display:flex;
  141. flex-direction:row;
  142. height:auto;
  143. max-height:100%;
  144. position:fixed;
  145. right:0;
  146. top:46px;
  147. }
  148. @media (min-width:783px){
  149. .interface-interface-skeleton{
  150. top:32px;
  151. }
  152. .is-fullscreen-mode .interface-interface-skeleton{
  153. top:0;
  154. }
  155. }
  156. .interface-interface-skeleton__editor{
  157. display:flex;
  158. flex:0 1 100%;
  159. flex-direction:column;
  160. overflow:hidden;
  161. }
  162. .interface-interface-skeleton{
  163. left:0;
  164. }
  165. @media (min-width:783px){
  166. .interface-interface-skeleton{
  167. left:160px;
  168. }
  169. }
  170. @media (min-width:783px){
  171. .auto-fold .interface-interface-skeleton{
  172. left:36px;
  173. }
  174. }
  175. @media (min-width:961px){
  176. .auto-fold .interface-interface-skeleton{
  177. left:160px;
  178. }
  179. }
  180. .folded .interface-interface-skeleton{
  181. left:0;
  182. }
  183. @media (min-width:783px){
  184. .folded .interface-interface-skeleton{
  185. left:36px;
  186. }
  187. }
  188. body.is-fullscreen-mode .interface-interface-skeleton{
  189. left:0 !important;
  190. }
  191. .interface-interface-skeleton__body{
  192. display:flex;
  193. flex-grow:1;
  194. overflow:auto;
  195. overscroll-behavior-y:none;
  196. }
  197. @media (min-width:782px){
  198. .has-footer .interface-interface-skeleton__body{
  199. padding-bottom:25px;
  200. }
  201. }
  202. .interface-interface-skeleton__content{
  203. display:flex;
  204. flex-direction:column;
  205. flex-grow:1;
  206. overflow:auto;
  207. z-index:20;
  208. }
  209. @media (min-width:782px){
  210. .interface-interface-skeleton__content{
  211. z-index:auto;
  212. }
  213. }
  214. .interface-interface-skeleton__secondary-sidebar,.interface-interface-skeleton__sidebar{
  215. background:#fff;
  216. bottom:0;
  217. color:#1e1e1e;
  218. flex-shrink:0;
  219. left:0;
  220. position:absolute;
  221. right:0;
  222. top:0;
  223. z-index:100000;
  224. }
  225. @media (min-width:782px){
  226. .interface-interface-skeleton__secondary-sidebar,.interface-interface-skeleton__sidebar{
  227. position:relative !important;
  228. width:auto;
  229. }
  230. .is-sidebar-opened .interface-interface-skeleton__secondary-sidebar,.is-sidebar-opened .interface-interface-skeleton__sidebar{
  231. z-index:90;
  232. }
  233. }
  234. .interface-interface-skeleton__sidebar{
  235. overflow:auto;
  236. }
  237. @media (min-width:782px){
  238. .interface-interface-skeleton__sidebar{
  239. border-left:1px solid #e0e0e0;
  240. }
  241. .interface-interface-skeleton__secondary-sidebar{
  242. border-right:1px solid #e0e0e0;
  243. }
  244. }
  245. .interface-interface-skeleton__header{
  246. border-bottom:1px solid #e0e0e0;
  247. color:#1e1e1e;
  248. flex-shrink:0;
  249. height:auto;
  250. z-index:30;
  251. }
  252. .interface-interface-skeleton__footer{
  253. background-color:#fff;
  254. border-top:1px solid #e0e0e0;
  255. bottom:0;
  256. color:#1e1e1e;
  257. display:none;
  258. flex-shrink:0;
  259. height:auto;
  260. left:0;
  261. position:absolute;
  262. width:100%;
  263. z-index:90;
  264. }
  265. @media (min-width:782px){
  266. .interface-interface-skeleton__footer{
  267. display:flex;
  268. }
  269. }
  270. .interface-interface-skeleton__footer .block-editor-block-breadcrumb{
  271. align-items:center;
  272. background:#fff;
  273. display:flex;
  274. font-size:13px;
  275. height:24px;
  276. padding:0 18px;
  277. z-index:30;
  278. }
  279. .interface-interface-skeleton__actions{
  280. background:#fff;
  281. bottom:auto;
  282. color:#1e1e1e;
  283. left:auto;
  284. position:fixed !important;
  285. right:0;
  286. top:-9999em;
  287. width:100vw;
  288. z-index:100000;
  289. }
  290. @media (min-width:782px){
  291. .interface-interface-skeleton__actions{
  292. width:280px;
  293. }
  294. }
  295. .interface-interface-skeleton__actions:focus,.interface-interface-skeleton__actions:focus-within{
  296. bottom:0;
  297. top:auto;
  298. }
  299. .is-entity-save-view-open .interface-interface-skeleton__actions:focus,.is-entity-save-view-open .interface-interface-skeleton__actions:focus-within{
  300. top:46px;
  301. }
  302. @media (min-width:782px){
  303. .is-entity-save-view-open .interface-interface-skeleton__actions:focus,.is-entity-save-view-open .interface-interface-skeleton__actions:focus-within{
  304. border-left:1px solid #ddd;
  305. top:32px;
  306. }
  307. .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus,.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within{
  308. top:0;
  309. }
  310. }
  311. .interface-more-menu-dropdown{
  312. margin-left:-4px;
  313. }
  314. .interface-more-menu-dropdown .components-button{
  315. padding:0 2px;
  316. width:auto;
  317. }
  318. @media (min-width:600px){
  319. .interface-more-menu-dropdown{
  320. margin-left:0;
  321. }
  322. .interface-more-menu-dropdown .components-button{
  323. padding:0 4px;
  324. }
  325. }
  326. .interface-more-menu-dropdown__content .components-popover__content{
  327. min-width:280px;
  328. }
  329. @media (min-width:480px){
  330. .interface-more-menu-dropdown__content .components-popover__content{
  331. max-width:480px;
  332. }
  333. }
  334. .interface-more-menu-dropdown__content .components-popover__content .components-dropdown-menu__menu{
  335. padding:0;
  336. }
  337. .components-popover.interface-more-menu-dropdown__content{
  338. z-index:99998;
  339. }
  340. .interface-pinned-items{
  341. display:flex;
  342. gap:4px;
  343. margin-right:-4px;
  344. }
  345. .interface-pinned-items .components-button{
  346. display:none;
  347. margin:0;
  348. }
  349. .interface-pinned-items .components-button[aria-controls="edit-post:block"],.interface-pinned-items .components-button[aria-controls="edit-post:document"],.interface-pinned-items .components-button[aria-controls="edit-site:block-inspector"],.interface-pinned-items .components-button[aria-controls="edit-site:global-styles"],.interface-pinned-items .components-button[aria-controls="edit-site:template"]{
  350. display:flex;
  351. }
  352. .interface-pinned-items .components-button svg{
  353. max-height:24px;
  354. max-width:24px;
  355. }
  356. @media (min-width:600px){
  357. .interface-pinned-items .components-button{
  358. display:flex;
  359. }
  360. .interface-preferences-modal{
  361. height:calc(100% - 120px);
  362. width:calc(100% - 32px);
  363. }
  364. }
  365. @media (min-width:782px){
  366. .interface-preferences-modal{
  367. width:750px;
  368. }
  369. }
  370. @media (min-width:960px){
  371. .interface-preferences-modal{
  372. height:70%;
  373. }
  374. }
  375. @media (max-width:781px){
  376. .interface-preferences-modal .components-modal__content{
  377. padding:0;
  378. }
  379. }
  380. .interface-preferences__tabs .components-tab-panel__tabs{
  381. left:16px;
  382. position:absolute;
  383. top:84px;
  384. width:160px;
  385. }
  386. .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item{
  387. border-radius:2px;
  388. font-weight:400;
  389. }
  390. .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item.is-active{
  391. background:#f0f0f0;
  392. box-shadow:none;
  393. font-weight:500;
  394. }
  395. .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item.is-active:after{
  396. content:none;
  397. }
  398. .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item:focus:not(:disabled){
  399. box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  400. outline:2px solid transparent;
  401. }
  402. .interface-preferences__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item:focus-visible:before{
  403. content:none;
  404. }
  405. .interface-preferences__tabs .components-tab-panel__tab-content{
  406. margin-left:160px;
  407. padding-left:24px;
  408. }
  409. @media (max-width:781px){
  410. .interface-preferences__provider{
  411. height:100%;
  412. }
  413. }
  414. .interface-preferences-modal__section{
  415. margin:0 0 2.5rem;
  416. }
  417. .interface-preferences-modal__section:last-child{
  418. margin:0;
  419. }
  420. .interface-preferences-modal__section-legend{
  421. margin-bottom:8px;
  422. }
  423. .interface-preferences-modal__section-title{
  424. font-size:.9rem;
  425. font-weight:600;
  426. margin-top:0;
  427. }
  428. .interface-preferences-modal__section-description{
  429. color:#757575;
  430. font-size:12px;
  431. font-style:normal;
  432. margin:-8px 0 8px;
  433. }
  434. .interface-preferences-modal__option+.interface-preferences-modal__option{
  435. margin-top:16px;
  436. }
  437. .interface-preferences-modal__option .components-base-control__help{
  438. margin-left:48px;
  439. margin-top:0;
  440. }
  441. .wp-block[data-type="core/widget-area"]{
  442. margin-left:auto;
  443. margin-right:auto;
  444. max-width:700px;
  445. }
  446. .wp-block[data-type="core/widget-area"] .components-panel__body>.components-panel__body-title{
  447. background:#fff;
  448. font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
  449. height:48px;
  450. margin:0;
  451. position:relative;
  452. transform:translateZ(0);
  453. z-index:1;
  454. }
  455. .wp-block[data-type="core/widget-area"] .components-panel__body>.components-panel__body-title:hover{
  456. background:#fff;
  457. }
  458. .wp-block[data-type="core/widget-area"] .block-list-appender.wp-block{
  459. position:relative;
  460. width:auto;
  461. }
  462. .wp-block[data-type="core/widget-area"] .editor-styles-wrapper .wp-block.wp-block.wp-block.wp-block.wp-block{
  463. max-width:100%;
  464. }
  465. .wp-block[data-type="core/widget-area"] .components-panel__body.is-opened{
  466. padding:0;
  467. }
  468. .blocks-widgets-container .wp-block-widget-area__inner-blocks.editor-styles-wrapper{
  469. margin:0;
  470. padding:0;
  471. }
  472. .blocks-widgets-container .wp-block-widget-area__inner-blocks.editor-styles-wrapper>.block-editor-block-list__layout{
  473. margin-top:-48px;
  474. min-height:32px;
  475. padding:72px 16px 16px;
  476. }
  477. .wp-block-widget-area__highlight-drop-zone{
  478. outline:var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
  479. }
  480. body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .components-panel__body>.components-panel__body-title,body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .components-panel__body>.components-panel__body-title *{
  481. pointer-events:none;
  482. }
  483. .edit-widgets-error-boundary{
  484. box-shadow:0 .7px 1px rgba(0,0,0,.15),0 2.7px 3.8px -.2px rgba(0,0,0,.15),0 5.5px 7.8px -.3px rgba(0,0,0,.15),.1px 11.5px 16.4px -.5px rgba(0,0,0,.15);
  485. margin:60px auto auto;
  486. max-width:780px;
  487. padding:20px;
  488. }
  489. .edit-widgets-header{
  490. align-items:center;
  491. background:#fff;
  492. display:flex;
  493. height:60px;
  494. justify-content:space-between;
  495. overflow:auto;
  496. }
  497. @media (min-width:600px){
  498. .edit-widgets-header{
  499. overflow:visible;
  500. }
  501. }
  502. .edit-widgets-header__navigable-toolbar-wrapper{
  503. align-items:center;
  504. display:flex;
  505. justify-content:center;
  506. padding-left:16px;
  507. }
  508. .edit-widgets-header__title{
  509. font-size:20px;
  510. margin:0 20px 0 0;
  511. padding:0;
  512. }
  513. .edit-widgets-header__actions{
  514. align-items:center;
  515. display:flex;
  516. gap:4px;
  517. padding-right:16px;
  518. }
  519. @media (min-width:600px){
  520. .edit-widgets-header__actions{
  521. gap:8px;
  522. }
  523. }
  524. .edit-widgets-header-toolbar{
  525. border:none;
  526. }
  527. .edit-widgets-header-toolbar>.components-button.has-icon.has-icon.has-icon,.edit-widgets-header-toolbar>.components-dropdown>.components-button.has-icon.has-icon{
  528. height:36px;
  529. min-width:36px;
  530. padding:6px;
  531. }
  532. .edit-widgets-header-toolbar>.components-button.has-icon.has-icon.has-icon.is-pressed,.edit-widgets-header-toolbar>.components-dropdown>.components-button.has-icon.has-icon.is-pressed{
  533. background:#1e1e1e;
  534. }
  535. .edit-widgets-header-toolbar>.components-button.has-icon.has-icon.has-icon:focus:not(:disabled),.edit-widgets-header-toolbar>.components-dropdown>.components-button.has-icon.has-icon:focus:not(:disabled){
  536. box-shadow:0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
  537. outline:1px solid transparent;
  538. }
  539. .edit-widgets-header-toolbar>.components-button.has-icon.has-icon.has-icon:before,.edit-widgets-header-toolbar>.components-dropdown>.components-button.has-icon.has-icon:before{
  540. display:none;
  541. }
  542. .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle{
  543. padding-left:8px;
  544. padding-right:8px;
  545. }
  546. @media (min-width:600px){
  547. .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle{
  548. padding-left:12px;
  549. padding-right:12px;
  550. }
  551. }
  552. .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle:after{
  553. content:none;
  554. }
  555. .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle svg{
  556. transition:transform .2s cubic-bezier(.165, .84, .44, 1);
  557. }
  558. @media (prefers-reduced-motion:reduce){
  559. .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle svg{
  560. transition-delay:0s;
  561. transition-duration:0s;
  562. }
  563. }
  564. .edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle.is-pressed svg{
  565. transform:rotate(45deg);
  566. }
  567. .edit-widgets-keyboard-shortcut-help-modal__section{
  568. margin:0 0 2rem;
  569. }
  570. .edit-widgets-keyboard-shortcut-help-modal__section-title{
  571. font-size:.9rem;
  572. font-weight:600;
  573. }
  574. .edit-widgets-keyboard-shortcut-help-modal__shortcut{
  575. align-items:baseline;
  576. border-top:1px solid #ddd;
  577. display:flex;
  578. margin-bottom:0;
  579. padding:.6rem 0;
  580. }
  581. .edit-widgets-keyboard-shortcut-help-modal__shortcut:last-child{
  582. border-bottom:1px solid #ddd;
  583. }
  584. .edit-widgets-keyboard-shortcut-help-modal__shortcut:empty{
  585. display:none;
  586. }
  587. .edit-widgets-keyboard-shortcut-help-modal__shortcut-term{
  588. font-weight:600;
  589. margin:0 0 0 1rem;
  590. text-align:right;
  591. }
  592. .edit-widgets-keyboard-shortcut-help-modal__shortcut-description{
  593. flex:1;
  594. flex-basis:auto;
  595. margin:0;
  596. }
  597. .edit-widgets-keyboard-shortcut-help-modal__shortcut-key-combination{
  598. background:none;
  599. display:block;
  600. margin:0;
  601. padding:0;
  602. }
  603. .edit-widgets-keyboard-shortcut-help-modal__shortcut-key-combination+.edit-widgets-keyboard-shortcut-help-modal__shortcut-key-combination{
  604. margin-top:10px;
  605. }
  606. .edit-widgets-keyboard-shortcut-help-modal__shortcut-key{
  607. border-radius:8%;
  608. margin:0 .2rem;
  609. padding:.25rem .5rem;
  610. }
  611. .edit-widgets-keyboard-shortcut-help-modal__shortcut-key:last-child{
  612. margin:0 0 0 .2rem;
  613. }
  614. .components-panel__header.edit-widgets-sidebar__panel-tabs{
  615. border-top:0;
  616. justify-content:flex-start;
  617. margin-top:0;
  618. padding-left:0;
  619. padding-right:4px;
  620. }
  621. .components-panel__header.edit-widgets-sidebar__panel-tabs ul{
  622. display:flex;
  623. }
  624. .components-panel__header.edit-widgets-sidebar__panel-tabs li{
  625. margin:0;
  626. }
  627. .components-panel__header.edit-widgets-sidebar__panel-tabs .components-button.has-icon{
  628. display:none;
  629. margin-left:auto;
  630. }
  631. @media (min-width:782px){
  632. .components-panel__header.edit-widgets-sidebar__panel-tabs .components-button.has-icon{
  633. display:flex;
  634. }
  635. }
  636. .components-button.edit-widgets-sidebar__panel-tab{
  637. background:transparent;
  638. border:none;
  639. border-radius:0;
  640. box-shadow:none;
  641. cursor:pointer;
  642. font-weight:500;
  643. height:48px;
  644. margin-left:0;
  645. padding:3px 16px;
  646. position:relative;
  647. }
  648. .components-button.edit-widgets-sidebar__panel-tab:focus:not(:disabled){
  649. box-shadow:none;
  650. outline:none;
  651. position:relative;
  652. }
  653. .components-button.edit-widgets-sidebar__panel-tab:after{
  654. background:var(--wp-admin-theme-color);
  655. border-radius:0;
  656. bottom:0;
  657. content:"";
  658. height:calc(var(--wp-admin-border-width-focus)*0);
  659. left:0;
  660. pointer-events:none;
  661. position:absolute;
  662. right:0;
  663. transition:all .1s linear;
  664. }
  665. @media (prefers-reduced-motion:reduce){
  666. .components-button.edit-widgets-sidebar__panel-tab:after{
  667. transition-delay:0s;
  668. transition-duration:0s;
  669. }
  670. }
  671. .components-button.edit-widgets-sidebar__panel-tab.is-active:after{
  672. height:calc(var(--wp-admin-border-width-focus)*1);
  673. outline:2px solid transparent;
  674. outline-offset:-1px;
  675. }
  676. .components-button.edit-widgets-sidebar__panel-tab:before{
  677. border-radius:2px;
  678. bottom:12px;
  679. box-shadow:0 0 0 0 transparent;
  680. content:"";
  681. left:12px;
  682. pointer-events:none;
  683. position:absolute;
  684. right:12px;
  685. top:12px;
  686. transition:all .1s linear;
  687. }
  688. @media (prefers-reduced-motion:reduce){
  689. .components-button.edit-widgets-sidebar__panel-tab:before{
  690. transition-delay:0s;
  691. transition-duration:0s;
  692. }
  693. }
  694. .components-button.edit-widgets-sidebar__panel-tab:focus-visible:before{
  695. box-shadow:0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  696. outline:2px solid transparent;
  697. }
  698. .edit-widgets-widget-areas__top-container{
  699. display:flex;
  700. padding:16px;
  701. }
  702. .edit-widgets-widget-areas__top-container .block-editor-block-icon{
  703. margin-right:16px;
  704. }
  705. .edit-widgets-notices__snackbar{
  706. bottom:20px;
  707. left:0;
  708. padding-left:16px;
  709. padding-right:16px;
  710. position:fixed;
  711. right:0;
  712. }
  713. @media (min-width:783px){
  714. .edit-widgets-notices__snackbar{
  715. left:160px;
  716. }
  717. }
  718. @media (min-width:783px){
  719. .auto-fold .edit-widgets-notices__snackbar{
  720. left:36px;
  721. }
  722. }
  723. @media (min-width:961px){
  724. .auto-fold .edit-widgets-notices__snackbar{
  725. left:160px;
  726. }
  727. }
  728. .folded .edit-widgets-notices__snackbar{
  729. left:0;
  730. }
  731. @media (min-width:783px){
  732. .folded .edit-widgets-notices__snackbar{
  733. left:36px;
  734. }
  735. }
  736. body.is-fullscreen-mode .edit-widgets-notices__snackbar{
  737. left:0 !important;
  738. }
  739. .edit-widgets-notices__dismissible .components-notice,.edit-widgets-notices__pinned .components-notice{
  740. border-bottom:1px solid rgba(0,0,0,.2);
  741. box-sizing:border-box;
  742. margin:0;
  743. min-height:60px;
  744. padding:0 12px;
  745. }
  746. .edit-widgets-notices__dismissible .components-notice .components-notice__dismiss,.edit-widgets-notices__pinned .components-notice .components-notice__dismiss{
  747. margin-top:12px;
  748. }
  749. .edit-widgets-layout__inserter-panel{
  750. display:flex;
  751. flex-direction:column;
  752. height:100%;
  753. }
  754. .edit-widgets-layout__inserter-panel .block-editor-inserter__menu{
  755. overflow:hidden;
  756. }
  757. .edit-widgets-layout__inserter-panel-header{
  758. display:flex;
  759. justify-content:flex-end;
  760. padding-right:8px;
  761. padding-top:8px;
  762. }
  763. .edit-widgets-layout__inserter-panel-content{
  764. height:calc(100% - 44px);
  765. }
  766. @media (min-width:782px){
  767. .edit-widgets-layout__inserter-panel-content{
  768. height:100%;
  769. }
  770. }
  771. @media (min-width:782px){
  772. .blocks-widgets-container .interface-interface-skeleton__header:not(:focus-within){
  773. z-index:19;
  774. }
  775. }
  776. .edit-widgets-welcome-guide{
  777. width:312px;
  778. }
  779. .edit-widgets-welcome-guide__image{
  780. background:#00a0d2;
  781. margin:0 0 16px;
  782. }
  783. .edit-widgets-welcome-guide__image>img{
  784. display:block;
  785. max-width:100%;
  786. object-fit:cover;
  787. }
  788. .edit-widgets-welcome-guide__heading{
  789. font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
  790. font-size:24px;
  791. line-height:1.4;
  792. margin:16px 0;
  793. padding:0 32px;
  794. }
  795. .edit-widgets-welcome-guide__text{
  796. font-size:13px;
  797. line-height:1.4;
  798. margin:0 0 24px;
  799. padding:0 32px;
  800. }
  801. .edit-widgets-welcome-guide__inserter-icon{
  802. margin:0 4px;
  803. vertical-align:text-top;
  804. }
  805. .edit-widgets-block-editor{
  806. font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
  807. position:relative;
  808. }
  809. .edit-widgets-block-editor,.edit-widgets-block-editor .block-editor-writing-flow,.edit-widgets-block-editor>div:last-of-type{
  810. display:flex;
  811. flex-direction:column;
  812. flex-grow:1;
  813. }
  814. .edit-widgets-block-editor .edit-widgets-main-block-list{
  815. height:100%;
  816. }
  817. .edit-widgets-block-editor .components-button{
  818. font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
  819. font-size:13px;
  820. }
  821. .edit-widgets-block-editor .components-button.has-icon,.edit-widgets-block-editor .components-button.is-tertiary{
  822. padding:6px;
  823. }
  824. .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed{
  825. left:0;
  826. }
  827. @media (min-width:783px){
  828. .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed{
  829. left:160px;
  830. }
  831. }
  832. @media (min-width:783px){
  833. .auto-fold .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed{
  834. left:36px;
  835. }
  836. }
  837. @media (min-width:961px){
  838. .auto-fold .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed{
  839. left:160px;
  840. }
  841. }
  842. .folded .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed{
  843. left:0;
  844. }
  845. @media (min-width:783px){
  846. .folded .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed{
  847. left:36px;
  848. }
  849. }
  850. body.is-fullscreen-mode .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed{
  851. left:0 !important;
  852. }
  853. .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed{
  854. display:block;
  855. position:sticky;
  856. top:0;
  857. width:100%;
  858. z-index:31;
  859. }
  860. @media (min-width:782px){
  861. .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed{
  862. align-items:center;
  863. border-bottom:none;
  864. display:flex;
  865. height:60px;
  866. margin-left:180px;
  867. min-height:auto;
  868. position:fixed;
  869. top:32px;
  870. width:calc(100% - 180px);
  871. }
  872. .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed,.edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed:empty{
  873. width:auto;
  874. }
  875. .is-fullscreen-mode .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed{
  876. margin-left:240px;
  877. top:0;
  878. }
  879. .is-fullscreen-mode .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed,.is-fullscreen-mode .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed:empty{
  880. width:auto;
  881. }
  882. .show-icon-labels .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed{
  883. margin-left:80px;
  884. width:calc(100% - 140px);
  885. }
  886. .is-fullscreen-mode .show-icon-labels .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed{
  887. margin-left:144px;
  888. }
  889. .blocks-widgets-container .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed{
  890. margin-left:153.6px;
  891. }
  892. .blocks-widgets-container .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed{
  893. margin-left:268.8px;
  894. }
  895. }
  896. @media (min-width:960px){
  897. .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed,.show-icon-labels .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed{
  898. width:auto;
  899. }
  900. .is-fullscreen-mode .edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed{
  901. width:calc(100% - 536px);
  902. }
  903. }
  904. .edit-widgets-editor__list-view-panel{
  905. display:flex;
  906. flex-direction:column;
  907. height:100%;
  908. min-width:350px;
  909. }
  910. .edit-widgets-editor__list-view-panel-content{
  911. height:calc(100% - 44px);
  912. overflow-y:auto;
  913. padding:8px;
  914. }
  915. .edit-widgets-editor__list-view-panel-header{
  916. align-items:center;
  917. border-bottom:1px solid #ddd;
  918. display:flex;
  919. height:48px;
  920. justify-content:space-between;
  921. padding-left:16px;
  922. padding-right:4px;
  923. }
  924. body.js.appearance_page_gutenberg-widgets,body.js.widgets-php{
  925. background:#fff;
  926. }
  927. body.js.appearance_page_gutenberg-widgets #wpcontent,body.js.widgets-php #wpcontent{
  928. padding-left:0;
  929. }
  930. body.js.appearance_page_gutenberg-widgets #wpbody-content,body.js.widgets-php #wpbody-content{
  931. padding-bottom:0;
  932. }
  933. body.js.appearance_page_gutenberg-widgets #wpbody-content>div:not(.blocks-widgets-container):not(#screen-meta),body.js.appearance_page_gutenberg-widgets #wpfooter,body.js.widgets-php #wpbody-content>div:not(.blocks-widgets-container):not(#screen-meta),body.js.widgets-php #wpfooter{
  934. display:none;
  935. }
  936. body.js.appearance_page_gutenberg-widgets .a11y-speak-region,body.js.widgets-php .a11y-speak-region{
  937. left:-1px;
  938. top:-1px;
  939. }
  940. body.js.appearance_page_gutenberg-widgets ul#adminmenu a.wp-has-current-submenu:after,body.js.appearance_page_gutenberg-widgets ul#adminmenu>li.current>a.current:after,body.js.widgets-php ul#adminmenu a.wp-has-current-submenu:after,body.js.widgets-php ul#adminmenu>li.current>a.current:after{
  941. border-right-color:#fff;
  942. }
  943. body.js.appearance_page_gutenberg-widgets .media-frame select.attachment-filters:last-of-type,body.js.widgets-php .media-frame select.attachment-filters:last-of-type{
  944. max-width:100%;
  945. width:auto;
  946. }
  947. .blocks-widgets-container,.components-modal__frame{
  948. box-sizing:border-box;
  949. }
  950. .blocks-widgets-container *,.blocks-widgets-container :after,.blocks-widgets-container :before,.components-modal__frame *,.components-modal__frame :after,.components-modal__frame :before{
  951. box-sizing:inherit;
  952. }
  953. @media (min-width:600px){
  954. .blocks-widgets-container{
  955. bottom:0;
  956. left:0;
  957. min-height:calc(100vh - 46px);
  958. position:absolute;
  959. right:0;
  960. top:0;
  961. }
  962. }
  963. @media (min-width:782px){
  964. .blocks-widgets-container{
  965. min-height:calc(100vh - 32px);
  966. }
  967. }
  968. .blocks-widgets-container .interface-interface-skeleton__content{
  969. background-color:#f0f0f0;
  970. }
  971. .blocks-widgets-container .editor-styles-wrapper{
  972. margin:auto;
  973. max-width:700px;
  974. }
  975. .edit-widgets-sidebar .components-button.interface-complementary-area__pin-unpin-item{
  976. display:none;
  977. }
  978. .js .widgets-php .notice{
  979. display:none !important;
  980. }
  981. body.admin-color-light{
  982. --wp-admin-theme-color:#0085ba;
  983. --wp-admin-theme-color--rgb:0, 133, 186;
  984. --wp-admin-theme-color-darker-10:#0073a1;
  985. --wp-admin-theme-color-darker-10--rgb:0, 115, 161;
  986. --wp-admin-theme-color-darker-20:#006187;
  987. --wp-admin-theme-color-darker-20--rgb:0, 97, 135;
  988. --wp-admin-border-width-focus:2px;
  989. }
  990. @media (min-resolution:192dpi){
  991. body.admin-color-light{
  992. --wp-admin-border-width-focus:1.5px;
  993. }
  994. }
  995. body.admin-color-modern{
  996. --wp-admin-theme-color:#3858e9;
  997. --wp-admin-theme-color--rgb:56, 88, 233;
  998. --wp-admin-theme-color-darker-10:#2145e6;
  999. --wp-admin-theme-color-darker-10--rgb:33, 69, 230;
  1000. --wp-admin-theme-color-darker-20:#183ad6;
  1001. --wp-admin-theme-color-darker-20--rgb:24, 58, 214;
  1002. --wp-admin-border-width-focus:2px;
  1003. }
  1004. @media (min-resolution:192dpi){
  1005. body.admin-color-modern{
  1006. --wp-admin-border-width-focus:1.5px;
  1007. }
  1008. }
  1009. body.admin-color-blue{
  1010. --wp-admin-theme-color:#096484;
  1011. --wp-admin-theme-color--rgb:9, 100, 132;
  1012. --wp-admin-theme-color-darker-10:#07526c;
  1013. --wp-admin-theme-color-darker-10--rgb:7, 82, 108;
  1014. --wp-admin-theme-color-darker-20:#064054;
  1015. --wp-admin-theme-color-darker-20--rgb:6, 64, 84;
  1016. --wp-admin-border-width-focus:2px;
  1017. }
  1018. @media (min-resolution:192dpi){
  1019. body.admin-color-blue{
  1020. --wp-admin-border-width-focus:1.5px;
  1021. }
  1022. }
  1023. body.admin-color-coffee{
  1024. --wp-admin-theme-color:#46403c;
  1025. --wp-admin-theme-color--rgb:70, 64, 60;
  1026. --wp-admin-theme-color-darker-10:#383330;
  1027. --wp-admin-theme-color-darker-10--rgb:56, 51, 48;
  1028. --wp-admin-theme-color-darker-20:#2b2724;
  1029. --wp-admin-theme-color-darker-20--rgb:43, 39, 36;
  1030. --wp-admin-border-width-focus:2px;
  1031. }
  1032. @media (min-resolution:192dpi){
  1033. body.admin-color-coffee{
  1034. --wp-admin-border-width-focus:1.5px;
  1035. }
  1036. }
  1037. body.admin-color-ectoplasm{
  1038. --wp-admin-theme-color:#523f6d;
  1039. --wp-admin-theme-color--rgb:82, 63, 109;
  1040. --wp-admin-theme-color-darker-10:#46365d;
  1041. --wp-admin-theme-color-darker-10--rgb:70, 54, 93;
  1042. --wp-admin-theme-color-darker-20:#3a2c4d;
  1043. --wp-admin-theme-color-darker-20--rgb:58, 44, 77;
  1044. --wp-admin-border-width-focus:2px;
  1045. }
  1046. @media (min-resolution:192dpi){
  1047. body.admin-color-ectoplasm{
  1048. --wp-admin-border-width-focus:1.5px;
  1049. }
  1050. }
  1051. body.admin-color-midnight{
  1052. --wp-admin-theme-color:#e14d43;
  1053. --wp-admin-theme-color--rgb:225, 77, 67;
  1054. --wp-admin-theme-color-darker-10:#dd382d;
  1055. --wp-admin-theme-color-darker-10--rgb:221, 56, 45;
  1056. --wp-admin-theme-color-darker-20:#d02c21;
  1057. --wp-admin-theme-color-darker-20--rgb:208, 44, 33;
  1058. --wp-admin-border-width-focus:2px;
  1059. }
  1060. @media (min-resolution:192dpi){
  1061. body.admin-color-midnight{
  1062. --wp-admin-border-width-focus:1.5px;
  1063. }
  1064. }
  1065. body.admin-color-ocean{
  1066. --wp-admin-theme-color:#627c83;
  1067. --wp-admin-theme-color--rgb:98, 124, 131;
  1068. --wp-admin-theme-color-darker-10:#576e74;
  1069. --wp-admin-theme-color-darker-10--rgb:87, 110, 116;
  1070. --wp-admin-theme-color-darker-20:#4c6066;
  1071. --wp-admin-theme-color-darker-20--rgb:76, 96, 102;
  1072. --wp-admin-border-width-focus:2px;
  1073. }
  1074. @media (min-resolution:192dpi){
  1075. body.admin-color-ocean{
  1076. --wp-admin-border-width-focus:1.5px;
  1077. }
  1078. }
  1079. body.admin-color-sunrise{
  1080. --wp-admin-theme-color:#dd823b;
  1081. --wp-admin-theme-color--rgb:221, 130, 59;
  1082. --wp-admin-theme-color-darker-10:#d97426;
  1083. --wp-admin-theme-color-darker-10--rgb:217, 116, 38;
  1084. --wp-admin-theme-color-darker-20:#c36922;
  1085. --wp-admin-theme-color-darker-20--rgb:195, 105, 34;
  1086. --wp-admin-border-width-focus:2px;
  1087. }
  1088. @media (min-resolution:192dpi){
  1089. body.admin-color-sunrise{
  1090. --wp-admin-border-width-focus:1.5px;
  1091. }
  1092. }