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.

3026 lines
90 KiB

1 year ago
  1. @charset "UTF-8";
  2. :root{
  3. --wp-admin-theme-color:#3858e9;
  4. --wp-admin-theme-color--rgb:56, 88, 233;
  5. --wp-admin-theme-color-darker-10:#2145e6;
  6. --wp-admin-theme-color-darker-10--rgb:33, 69, 230;
  7. --wp-admin-theme-color-darker-20:#183ad6;
  8. --wp-admin-theme-color-darker-20--rgb:24, 58, 214;
  9. --wp-admin-border-width-focus:2px;
  10. }
  11. @media (min-resolution:192dpi){
  12. :root{
  13. --wp-admin-border-width-focus:1.5px;
  14. }
  15. }
  16. .components-animate__appear{
  17. animation:components-animate__appear-animation .1s cubic-bezier(0, 0, .2, 1) 0s;
  18. animation-fill-mode:forwards;
  19. }
  20. @media (prefers-reduced-motion:reduce){
  21. .components-animate__appear{
  22. animation-delay:0s;
  23. animation-duration:1ms;
  24. }
  25. }
  26. .components-animate__appear.is-from-top,.components-animate__appear.is-from-top.is-from-left{
  27. transform-origin:top left;
  28. }
  29. .components-animate__appear.is-from-top.is-from-right{
  30. transform-origin:top right;
  31. }
  32. .components-animate__appear.is-from-bottom,.components-animate__appear.is-from-bottom.is-from-left{
  33. transform-origin:bottom left;
  34. }
  35. .components-animate__appear.is-from-bottom.is-from-right{
  36. transform-origin:bottom right;
  37. }
  38. @keyframes components-animate__appear-animation{
  39. 0%{
  40. transform:translateY(-2em) scaleY(0) scaleX(0);
  41. }
  42. to{
  43. transform:translateY(0) scaleY(1) scaleX(1);
  44. }
  45. }
  46. .components-animate__slide-in{
  47. animation:components-animate__slide-in-animation .1s cubic-bezier(0, 0, .2, 1);
  48. animation-fill-mode:forwards;
  49. }
  50. @media (prefers-reduced-motion:reduce){
  51. .components-animate__slide-in{
  52. animation-delay:0s;
  53. animation-duration:1ms;
  54. }
  55. }
  56. .components-animate__slide-in.is-from-left{
  57. transform:translateX(100%);
  58. }
  59. .components-animate__slide-in.is-from-right{
  60. transform:translateX(-100%);
  61. }
  62. @keyframes components-animate__slide-in-animation{
  63. to{
  64. transform:translateX(0);
  65. }
  66. }
  67. .components-animate__loading{
  68. animation:components-animate__loading 1.6s ease-in-out infinite;
  69. }
  70. @keyframes components-animate__loading{
  71. 0%{
  72. opacity:.5;
  73. }
  74. 50%{
  75. opacity:1;
  76. }
  77. to{
  78. opacity:.5;
  79. }
  80. }
  81. .components-autocomplete__popover .components-popover__content{
  82. min-width:220px;
  83. padding:16px;
  84. }
  85. .components-autocomplete__result.components-button{
  86. display:flex;
  87. height:auto;
  88. min-height:36px;
  89. text-align:left;
  90. width:100%;
  91. }
  92. .components-autocomplete__result.components-button.is-selected{
  93. box-shadow:0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  94. }
  95. .components-button-group{
  96. display:inline-block;
  97. }
  98. .components-button-group .components-button{
  99. border-radius:0;
  100. box-shadow:inset 0 0 0 1px #1e1e1e;
  101. color:#1e1e1e;
  102. display:inline-flex;
  103. }
  104. .components-button-group .components-button+.components-button{
  105. margin-left:-1px;
  106. }
  107. .components-button-group .components-button:first-child{
  108. border-radius:2px 0 0 2px;
  109. }
  110. .components-button-group .components-button:last-child{
  111. border-radius:0 2px 2px 0;
  112. }
  113. .components-button-group .components-button.is-primary,.components-button-group .components-button:focus{
  114. position:relative;
  115. z-index:1;
  116. }
  117. .components-button-group .components-button.is-primary{
  118. box-shadow:inset 0 0 0 1px #1e1e1e;
  119. }
  120. .components-button{
  121. align-items:center;
  122. -webkit-appearance:none;
  123. background:none;
  124. border:0;
  125. border-radius:2px;
  126. box-sizing:border-box;
  127. color:var(--wp-components-color-foreground, #1e1e1e);
  128. cursor:pointer;
  129. display:inline-flex;
  130. font-family:inherit;
  131. font-size:13px;
  132. font-weight:400;
  133. height:36px;
  134. margin:0;
  135. padding:6px 12px;
  136. text-decoration:none;
  137. transition:box-shadow .1s linear;
  138. }
  139. @media (prefers-reduced-motion:reduce){
  140. .components-button{
  141. transition-delay:0s;
  142. transition-duration:0s;
  143. }
  144. }
  145. .components-button.is-next-40px-default-size{
  146. height:40px;
  147. }
  148. .components-button:hover,.components-button[aria-expanded=true]{
  149. color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  150. }
  151. .components-button:disabled:hover,.components-button[aria-disabled=true]:hover{
  152. color:initial;
  153. }
  154. .components-button:focus:not(:disabled){
  155. box-shadow:0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  156. outline:3px solid transparent;
  157. }
  158. .components-button.is-primary{
  159. background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  160. color:var(--wp-components-color-accent-inverted, #fff);
  161. outline:1px solid transparent;
  162. text-decoration:none;
  163. text-shadow:none;
  164. white-space:nowrap;
  165. }
  166. .components-button.is-primary:hover:not(:disabled){
  167. background:var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
  168. color:var(--wp-components-color-accent-inverted, #fff);
  169. }
  170. .components-button.is-primary:active:not(:disabled){
  171. background:var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
  172. border-color:var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
  173. color:var(--wp-components-color-accent-inverted, #fff);
  174. }
  175. .components-button.is-primary:focus:not(:disabled){
  176. box-shadow:inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  177. }
  178. .components-button.is-primary:disabled,.components-button.is-primary:disabled:active:enabled,.components-button.is-primary[aria-disabled=true],.components-button.is-primary[aria-disabled=true]:active:enabled,.components-button.is-primary[aria-disabled=true]:enabled{
  179. background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  180. border-color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  181. color:hsla(0,0%,100%,.4);
  182. opacity:1;
  183. outline:none;
  184. }
  185. .components-button.is-primary:disabled:active:enabled:focus:enabled,.components-button.is-primary:disabled:focus:enabled,.components-button.is-primary[aria-disabled=true]:active:enabled:focus:enabled,.components-button.is-primary[aria-disabled=true]:enabled:focus:enabled,.components-button.is-primary[aria-disabled=true]:focus:enabled{
  186. box-shadow:0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 3px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  187. }
  188. .components-button.is-primary.is-busy,.components-button.is-primary.is-busy:disabled,.components-button.is-primary.is-busy[aria-disabled=true]{
  189. background-image:linear-gradient(-45deg, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 70%, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 70%);
  190. background-size:100px 100%;
  191. border-color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  192. color:var(--wp-components-color-accent-inverted, #fff);
  193. }
  194. .components-button.is-secondary,.components-button.is-tertiary{
  195. outline:1px solid transparent;
  196. }
  197. .components-button.is-secondary:active:not(:disabled),.components-button.is-tertiary:active:not(:disabled){
  198. box-shadow:none;
  199. }
  200. .components-button.is-secondary:disabled,.components-button.is-secondary[aria-disabled=true],.components-button.is-secondary[aria-disabled=true]:hover,.components-button.is-tertiary:disabled,.components-button.is-tertiary[aria-disabled=true],.components-button.is-tertiary[aria-disabled=true]:hover{
  201. background:transparent;
  202. box-shadow:none;
  203. color:#949494;
  204. opacity:1;
  205. outline:none;
  206. transform:none;
  207. }
  208. .components-button.is-secondary{
  209. background:transparent;
  210. box-shadow:inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  211. color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  212. outline:1px solid transparent;
  213. white-space:nowrap;
  214. }
  215. .components-button.is-secondary:hover:not(:disabled){
  216. box-shadow:inset 0 0 0 1px var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
  217. }
  218. .components-button.is-tertiary{
  219. background:transparent;
  220. color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  221. white-space:nowrap;
  222. }
  223. .components-button.is-tertiary:hover:not(:disabled,[aria-disabled=true]){
  224. background:rgba(var(--wp-admin-theme-color--rgb), .04);
  225. }
  226. .components-button.is-tertiary:active:not(:disabled,[aria-disabled=true]){
  227. background:rgba(var(--wp-admin-theme-color--rgb), .08);
  228. }
  229. p+.components-button.is-tertiary{
  230. margin-left:-6px;
  231. }
  232. .components-button.is-destructive{
  233. --wp-components-color-accent:#cc1818;
  234. --wp-components-color-accent-darker-10:#9e1313;
  235. --wp-components-color-accent-darker-20:#710d0d;
  236. }
  237. .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link){
  238. color:#cc1818;
  239. }
  240. .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):hover:not(:disabled){
  241. color:#710d0d;
  242. }
  243. .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):focus:not(:disabled){
  244. box-shadow:0 0 0 var(--wp-admin-border-width-focus) #cc1818;
  245. }
  246. .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):active:not(:disabled){
  247. background:#ccc;
  248. }
  249. .components-button.is-link{
  250. background:none;
  251. border:0;
  252. border-radius:0;
  253. box-shadow:none;
  254. color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  255. height:auto;
  256. margin:0;
  257. outline:none;
  258. padding:0;
  259. text-align:left;
  260. text-decoration:underline;
  261. transition-duration:.05s;
  262. transition-property:border, background, color;
  263. transition-timing-function:ease-in-out;
  264. }
  265. @media (prefers-reduced-motion:reduce){
  266. .components-button.is-link{
  267. transition-delay:0s;
  268. transition-duration:0s;
  269. }
  270. }
  271. .components-button.is-link:focus{
  272. border-radius:2px;
  273. }
  274. .components-button:not(:disabled,[aria-disabled=true]):active{
  275. color:var(--wp-components-color-foreground, #1e1e1e);
  276. }
  277. .components-button:disabled,.components-button[aria-disabled=true]{
  278. cursor:default;
  279. opacity:.3;
  280. }
  281. .components-button.is-busy,.components-button.is-secondary.is-busy,.components-button.is-secondary.is-busy:disabled,.components-button.is-secondary.is-busy[aria-disabled=true]{
  282. animation:components-button__busy-animation 2.5s linear infinite;
  283. background-image:linear-gradient(-45deg, #fafafa 33%, #e0e0e0 0, #e0e0e0 70%, #fafafa 0);
  284. background-size:100px 100%;
  285. opacity:1;
  286. }
  287. .components-button.is-compact{
  288. height:32px;
  289. }
  290. .components-button.is-compact.has-icon:not(.has-text){
  291. min-width:32px;
  292. padding:0;
  293. width:32px;
  294. }
  295. .components-button.is-small{
  296. font-size:11px;
  297. height:24px;
  298. line-height:22px;
  299. padding:0 8px;
  300. }
  301. .components-button.is-small.has-icon:not(.has-text){
  302. min-width:24px;
  303. padding:0;
  304. width:24px;
  305. }
  306. .components-button.has-icon{
  307. justify-content:center;
  308. min-width:36px;
  309. padding:6px;
  310. }
  311. .components-button.has-icon.is-next-40px-default-size{
  312. min-width:40px;
  313. }
  314. .components-button.has-icon .dashicon{
  315. align-items:center;
  316. box-sizing:content-box;
  317. display:inline-flex;
  318. justify-content:center;
  319. padding:2px;
  320. }
  321. .components-button.has-icon.has-text{
  322. gap:4px;
  323. justify-content:start;
  324. padding-left:8px;
  325. padding-right:12px;
  326. }
  327. .components-button.is-pressed{
  328. background:var(--wp-components-color-foreground, #1e1e1e);
  329. color:var(--wp-components-color-foreground-inverted, #fff);
  330. }
  331. .components-button.is-pressed:focus:not(:disabled){
  332. box-shadow:inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  333. outline:2px solid transparent;
  334. }
  335. .components-button.is-pressed:hover:not(:disabled){
  336. background:var(--wp-components-color-foreground, #1e1e1e);
  337. color:var(--wp-components-color-foreground-inverted, #fff);
  338. }
  339. .components-button svg{
  340. fill:currentColor;
  341. outline:none;
  342. }
  343. @media (forced-colors:active){
  344. .components-button svg{
  345. fill:CanvasText;
  346. }
  347. }
  348. .components-button .components-visually-hidden{
  349. height:auto;
  350. }
  351. @keyframes components-button__busy-animation{
  352. 0%{
  353. background-position:200px 0;
  354. }
  355. }
  356. .components-checkbox-control__input[type=checkbox]{
  357. -webkit-appearance:none;
  358. appearance:none;
  359. background:#fff;
  360. border:1px solid #1e1e1e;
  361. border-radius:2px;
  362. box-shadow:0 0 0 transparent;
  363. clear:none;
  364. color:#1e1e1e;
  365. cursor:pointer;
  366. display:inline-block;
  367. font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
  368. font-size:16px;
  369. height:24px;
  370. line-height:normal;
  371. line-height:0;
  372. margin:0 4px 0 0;
  373. outline:0;
  374. padding:6px 8px;
  375. padding:0 !important;
  376. text-align:center;
  377. transition:box-shadow .1s linear;
  378. transition:none;
  379. transition:border-color .1s ease-in-out;
  380. vertical-align:top;
  381. width:24px;
  382. }
  383. @media (min-width:600px){
  384. .components-checkbox-control__input[type=checkbox]{
  385. font-size:13px;
  386. line-height:normal;
  387. }
  388. }
  389. .components-checkbox-control__input[type=checkbox]:focus{
  390. border-color:var(--wp-admin-theme-color);
  391. box-shadow:0 0 0 .5px var(--wp-admin-theme-color);
  392. }
  393. .components-checkbox-control__input[type=checkbox]::-webkit-input-placeholder{
  394. color:rgba(30,30,30,.62);
  395. }
  396. .components-checkbox-control__input[type=checkbox]::-moz-placeholder{
  397. color:rgba(30,30,30,.62);
  398. opacity:1;
  399. }
  400. .components-checkbox-control__input[type=checkbox]:-ms-input-placeholder{
  401. color:rgba(30,30,30,.62);
  402. }
  403. .components-checkbox-control__input[type=checkbox]:focus{
  404. box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
  405. }
  406. .components-checkbox-control__input[type=checkbox]:checked{
  407. background:var(--wp-admin-theme-color);
  408. border-color:var(--wp-admin-theme-color);
  409. }
  410. .components-checkbox-control__input[type=checkbox]:checked::-ms-check{
  411. opacity:0;
  412. }
  413. .components-checkbox-control__input[type=checkbox]:checked:before,.components-checkbox-control__input[type=checkbox][aria-checked=mixed]:before{
  414. color:#fff;
  415. margin:-3px -5px;
  416. }
  417. @media (min-width:782px){
  418. .components-checkbox-control__input[type=checkbox]:checked:before,.components-checkbox-control__input[type=checkbox][aria-checked=mixed]:before{
  419. margin:-4px 0 0 -5px;
  420. }
  421. }
  422. .components-checkbox-control__input[type=checkbox][aria-checked=mixed]{
  423. background:var(--wp-admin-theme-color);
  424. border-color:var(--wp-admin-theme-color);
  425. }
  426. .components-checkbox-control__input[type=checkbox][aria-checked=mixed]:before{
  427. speak:none;
  428. -webkit-font-smoothing:antialiased;
  429. -moz-osx-font-smoothing:grayscale;
  430. content:"";
  431. display:inline-block;
  432. float:left;
  433. font:normal 30px/1 dashicons;
  434. vertical-align:middle;
  435. width:16px;
  436. }
  437. @media (min-width:782px){
  438. .components-checkbox-control__input[type=checkbox][aria-checked=mixed]:before{
  439. float:none;
  440. font-size:21px;
  441. }
  442. }
  443. @media (min-width:600px){
  444. .components-checkbox-control__input[type=checkbox]{
  445. height:20px;
  446. width:20px;
  447. }
  448. }
  449. @media (prefers-reduced-motion:reduce){
  450. .components-checkbox-control__input[type=checkbox]{
  451. transition-delay:0s;
  452. transition-duration:0s;
  453. }
  454. }
  455. .components-checkbox-control__input[type=checkbox]:focus{
  456. box-shadow:0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(var(--wp-admin-border-width-focus)*2) var(--wp-admin-theme-color);
  457. outline:2px solid transparent;
  458. outline-offset:2px;
  459. }
  460. .components-checkbox-control__input[type=checkbox]:checked,.components-checkbox-control__input[type=checkbox]:indeterminate{
  461. background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  462. border-color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  463. }
  464. .components-checkbox-control__input[type=checkbox]:checked::-ms-check,.components-checkbox-control__input[type=checkbox]:indeterminate::-ms-check{
  465. opacity:0;
  466. }
  467. .components-checkbox-control__input[type=checkbox]:checked:before{
  468. content:none;
  469. }
  470. .components-checkbox-control__input-container{
  471. display:inline-block;
  472. height:24px;
  473. margin-right:12px;
  474. position:relative;
  475. vertical-align:middle;
  476. width:24px;
  477. }
  478. @media (min-width:600px){
  479. .components-checkbox-control__input-container{
  480. height:20px;
  481. width:20px;
  482. }
  483. }
  484. svg.components-checkbox-control__checked,svg.components-checkbox-control__indeterminate{
  485. fill:#fff;
  486. cursor:pointer;
  487. height:24px;
  488. left:0;
  489. pointer-events:none;
  490. position:absolute;
  491. top:0;
  492. -webkit-user-select:none;
  493. user-select:none;
  494. width:24px;
  495. }
  496. @media (min-width:600px){
  497. svg.components-checkbox-control__checked,svg.components-checkbox-control__indeterminate{
  498. left:-2px;
  499. top:-2px;
  500. }
  501. }
  502. .components-circular-option-picker{
  503. display:inline-block;
  504. min-width:188px;
  505. width:100%;
  506. }
  507. .components-circular-option-picker .components-circular-option-picker__custom-clear-wrapper{
  508. display:flex;
  509. justify-content:flex-end;
  510. margin-top:12px;
  511. }
  512. .components-circular-option-picker .components-circular-option-picker__swatches{
  513. display:flex;
  514. flex-wrap:wrap;
  515. gap:12px;
  516. position:relative;
  517. z-index:1;
  518. }
  519. .components-circular-option-picker>:not(.components-circular-option-picker__swatches){
  520. position:relative;
  521. z-index:0;
  522. }
  523. .components-circular-option-picker__option-wrapper{
  524. display:inline-block;
  525. height:28px;
  526. transform:scale(1);
  527. transition:transform .1s ease;
  528. vertical-align:top;
  529. width:28px;
  530. will-change:transform;
  531. }
  532. @media (prefers-reduced-motion:reduce){
  533. .components-circular-option-picker__option-wrapper{
  534. transition-delay:0s;
  535. transition-duration:0s;
  536. }
  537. }
  538. .components-circular-option-picker__option-wrapper:hover{
  539. transform:scale(1.2);
  540. }
  541. .components-circular-option-picker__option-wrapper>div{
  542. height:100%;
  543. width:100%;
  544. }
  545. .components-circular-option-picker__option-wrapper:before{
  546. background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none'%3E%3Cpath fill='%23555D65' d='M6 8V6H4v2h2zm2 0V6h2v2H8zm2 8H8v-2h2v2zm2 0v-2h2v2h-2zm0 2v-2h-2v2H8v2h2v-2h2zm2 0v2h-2v-2h2zm2 0h-2v-2h2v2z'/%3E%3Cpath fill='%23555D65' fill-rule='evenodd' d='M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z' clip-rule='evenodd'/%3E%3Cpath fill='%23555D65' d='M18 18v2h-2v-2h2z'/%3E%3Cpath fill='%23555D65' fill-rule='evenodd' d='M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z' clip-rule='evenodd'/%3E%3Cpath fill='%23555D65' fill-rule='evenodd' d='M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z' clip-rule='evenodd'/%3E%3C/svg%3E");
  547. border-radius:50%;
  548. bottom:1px;
  549. content:"";
  550. left:1px;
  551. position:absolute;
  552. right:1px;
  553. top:1px;
  554. z-index:-1;
  555. }
  556. .components-circular-option-picker__option{
  557. background:transparent;
  558. border:none;
  559. border-radius:50%;
  560. box-shadow:inset 0 0 0 14px;
  561. cursor:pointer;
  562. display:inline-block;
  563. height:100%;
  564. transition:box-shadow .1s ease;
  565. vertical-align:top;
  566. width:100%;
  567. }
  568. @media (prefers-reduced-motion:reduce){
  569. .components-circular-option-picker__option{
  570. transition-delay:0s;
  571. transition-duration:0s;
  572. }
  573. }
  574. .components-circular-option-picker__option:hover{
  575. box-shadow:inset 0 0 0 14px !important;
  576. }
  577. .components-circular-option-picker__option.is-pressed{
  578. box-shadow:inset 0 0 0 4px;
  579. overflow:visible;
  580. position:relative;
  581. z-index:1;
  582. }
  583. .components-circular-option-picker__option.is-pressed+svg{
  584. border-radius:50%;
  585. left:2px;
  586. pointer-events:none;
  587. position:absolute;
  588. top:2px;
  589. z-index:2;
  590. }
  591. .components-circular-option-picker__option:after{
  592. border:1px solid transparent;
  593. border-radius:50%;
  594. bottom:-1px;
  595. box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
  596. box-sizing:inherit;
  597. content:"";
  598. left:-1px;
  599. position:absolute;
  600. right:-1px;
  601. top:-1px;
  602. }
  603. .components-circular-option-picker__option:focus:after{
  604. border:2px solid #757575;
  605. border-radius:50%;
  606. box-shadow:inset 0 0 0 2px #fff;
  607. content:"";
  608. height:calc(100% + 4px);
  609. left:50%;
  610. position:absolute;
  611. top:50%;
  612. transform:translate(-50%, -50%);
  613. width:calc(100% + 4px);
  614. }
  615. .components-circular-option-picker__option.components-button:focus{
  616. background-color:transparent;
  617. box-shadow:inset 0 0 0 14px;
  618. outline:none;
  619. }
  620. .components-circular-option-picker__button-action .components-circular-option-picker__option{
  621. background:#fff;
  622. color:#fff;
  623. }
  624. .components-circular-option-picker__dropdown-link-action{
  625. margin-right:16px;
  626. }
  627. .components-circular-option-picker__dropdown-link-action .components-button{
  628. line-height:22px;
  629. }
  630. .components-palette-edit__popover-gradient-picker{
  631. padding:8px;
  632. width:280px;
  633. }
  634. .components-dropdown-menu__menu .components-palette-edit__menu-button{
  635. width:100%;
  636. }
  637. .component-color-indicator{
  638. background:#fff linear-gradient(-45deg, transparent 48%, #ddd 0, #ddd 52%, transparent 0);
  639. border-radius:50%;
  640. box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
  641. display:inline-block;
  642. height:20px;
  643. padding:0;
  644. width:20px;
  645. }
  646. .components-combobox-control{
  647. width:100%;
  648. }
  649. input.components-combobox-control__input[type=text]{
  650. border:none;
  651. box-shadow:none;
  652. font-family:inherit;
  653. font-size:16px;
  654. line-height:inherit;
  655. margin:0;
  656. min-height:auto;
  657. padding:2px;
  658. width:100%;
  659. }
  660. @media (min-width:600px){
  661. input.components-combobox-control__input[type=text]{
  662. font-size:13px;
  663. }
  664. }
  665. input.components-combobox-control__input[type=text]:focus{
  666. box-shadow:none;
  667. outline:none;
  668. }
  669. .components-combobox-control__suggestions-container{
  670. align-items:flex-start;
  671. border:1px solid #949494;
  672. border-radius:2px;
  673. box-shadow:0 0 0 transparent;
  674. display:flex;
  675. flex-wrap:wrap;
  676. font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
  677. font-size:16px;
  678. line-height:normal;
  679. padding:0;
  680. transition:box-shadow .1s linear;
  681. width:100%;
  682. }
  683. @media (prefers-reduced-motion:reduce){
  684. .components-combobox-control__suggestions-container{
  685. transition-delay:0s;
  686. transition-duration:0s;
  687. }
  688. }
  689. @media (min-width:600px){
  690. .components-combobox-control__suggestions-container{
  691. font-size:13px;
  692. line-height:normal;
  693. }
  694. }
  695. .components-combobox-control__suggestions-container:focus{
  696. border-color:var(--wp-admin-theme-color);
  697. box-shadow:0 0 0 .5px var(--wp-admin-theme-color);
  698. outline:2px solid transparent;
  699. }
  700. .components-combobox-control__suggestions-container::-webkit-input-placeholder{
  701. color:rgba(30,30,30,.62);
  702. }
  703. .components-combobox-control__suggestions-container::-moz-placeholder{
  704. color:rgba(30,30,30,.62);
  705. opacity:1;
  706. }
  707. .components-combobox-control__suggestions-container:-ms-input-placeholder{
  708. color:rgba(30,30,30,.62);
  709. }
  710. .components-combobox-control__suggestions-container:focus-within{
  711. border-color:var(--wp-admin-theme-color);
  712. box-shadow:0 0 0 .5px var(--wp-admin-theme-color);
  713. outline:2px solid transparent;
  714. }
  715. .components-combobox-control__reset.components-button{
  716. display:flex;
  717. height:16px;
  718. min-width:16px;
  719. padding:0;
  720. }
  721. .components-color-palette__custom-color-wrapper{
  722. position:relative;
  723. z-index:0;
  724. }
  725. .components-color-palette__custom-color-button{
  726. background:none;
  727. border:none;
  728. border-radius:2px 2px 0 0;
  729. box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
  730. box-sizing:border-box;
  731. cursor:pointer;
  732. height:64px;
  733. outline:1px solid transparent;
  734. position:relative;
  735. width:100%;
  736. }
  737. .components-color-palette__custom-color-button:focus{
  738. box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  739. outline-width:2px;
  740. }
  741. .components-color-palette__custom-color-button:after{
  742. background-image:repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 0, transparent 75%, #e0e0e0 0, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 0, transparent 75%, #e0e0e0 0, #e0e0e0);
  743. background-position:0 0, 24px 24px;
  744. background-size:48px 48px;
  745. content:"";
  746. height:100%;
  747. left:0;
  748. position:absolute;
  749. top:0;
  750. width:100%;
  751. z-index:-1;
  752. }
  753. .components-color-palette__custom-color-text-wrapper{
  754. border-radius:0 0 2px 2px;
  755. box-shadow:inset 0 -1px 0 0 rgba(0,0,0,.2),inset 1px 0 0 0 rgba(0,0,0,.2),inset -1px 0 0 0 rgba(0,0,0,.2);
  756. font-size:13px;
  757. padding:12px 16px;
  758. position:relative;
  759. }
  760. .components-color-palette__custom-color-name{
  761. color:var(--wp-components-color-foreground, #1e1e1e);
  762. margin:0 1px;
  763. }
  764. .components-color-palette__custom-color-value{
  765. color:#757575;
  766. }
  767. .components-color-palette__custom-color-value--is-hex{
  768. text-transform:uppercase;
  769. }
  770. .components-color-palette__custom-color-value:empty:after{
  771. content:"​";
  772. visibility:hidden;
  773. }
  774. .components-custom-gradient-picker:not(.is-next-has-no-margin){
  775. margin-bottom:24px;
  776. margin-top:12px;
  777. }
  778. .components-custom-gradient-picker__gradient-bar{
  779. border-radius:2px;
  780. height:48px;
  781. position:relative;
  782. width:100%;
  783. z-index:1;
  784. }
  785. .components-custom-gradient-picker__gradient-bar.has-gradient{
  786. background-image:repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 0, transparent 75%, #e0e0e0 0, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 0, transparent 75%, #e0e0e0 0, #e0e0e0);
  787. background-position:0 0, 12px 12px;
  788. background-size:24px 24px;
  789. }
  790. .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__gradient-bar-background{
  791. inset:0;
  792. position:absolute;
  793. }
  794. .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__markers-container{
  795. margin-left:auto;
  796. margin-right:auto;
  797. position:relative;
  798. width:calc(100% - 48px);
  799. }
  800. .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-dropdown{
  801. display:flex;
  802. height:16px;
  803. position:absolute;
  804. top:16px;
  805. width:16px;
  806. }
  807. .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point-dropdown{
  808. background:#fff;
  809. border-radius:50%;
  810. color:#1e1e1e;
  811. height:inherit;
  812. min-width:16px;
  813. padding:2px;
  814. position:relative;
  815. width:inherit;
  816. }
  817. .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point-dropdown svg{
  818. height:100%;
  819. width:100%;
  820. }
  821. .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button{
  822. border-radius:50%;
  823. box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 2px 0 rgba(0,0,0,.25);
  824. height:inherit;
  825. outline:2px solid transparent;
  826. padding:0;
  827. width:inherit;
  828. }
  829. .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active,.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus{
  830. box-shadow:inset 0 0 0 calc(var(--wp-admin-border-width-focus)*2) #fff, 0 0 2px 0 rgba(0,0,0,.25);
  831. outline:1.5px solid transparent;
  832. }
  833. .components-custom-gradient-picker__remove-control-point-wrapper{
  834. padding-bottom:8px;
  835. }
  836. .components-custom-gradient-picker__inserter{
  837. direction:ltr;
  838. }
  839. .components-custom-gradient-picker__liner-gradient-indicator{
  840. display:inline-block;
  841. flex:0 auto;
  842. height:20px;
  843. width:20px;
  844. }
  845. .components-custom-gradient-picker .components-custom-gradient-picker__toolbar{
  846. border:none;
  847. }
  848. .components-custom-gradient-picker .components-custom-gradient-picker__toolbar>div+div{
  849. margin-left:1px;
  850. }
  851. .components-custom-gradient-picker .components-custom-gradient-picker__toolbar button.is-pressed>svg{
  852. background:#fff;
  853. border:1px solid #949494;
  854. border-radius:2px;
  855. }
  856. .components-custom-gradient-picker__ui-line{
  857. position:relative;
  858. z-index:0;
  859. }
  860. .components-custom-select-control{
  861. font-size:13px;
  862. position:relative;
  863. }
  864. .components-custom-select-control__button{
  865. outline:0;
  866. position:relative;
  867. text-align:left;
  868. }
  869. .components-custom-select-control__hint{
  870. color:#949494;
  871. margin-left:10px;
  872. }
  873. .components-custom-select-control__menu{
  874. background-color:#fff;
  875. border:1px solid #1e1e1e;
  876. border-radius:2px;
  877. max-height:400px;
  878. min-width:100%;
  879. outline:none;
  880. overflow:auto;
  881. padding:0;
  882. position:absolute;
  883. transition:none;
  884. z-index:1000000;
  885. }
  886. .components-custom-select-control__menu[aria-hidden=true]{
  887. display:none;
  888. }
  889. .components-custom-select-control__item{
  890. align-items:center;
  891. cursor:default;
  892. display:grid;
  893. grid-template-columns:auto auto;
  894. line-height:28px;
  895. list-style-type:none;
  896. padding:8px 16px;
  897. }
  898. .components-custom-select-control__item:not(.is-next-36px-default-size){
  899. padding:8px;
  900. }
  901. .components-custom-select-control__item.has-hint{
  902. grid-template-columns:auto auto 30px;
  903. }
  904. .components-custom-select-control__item.is-highlighted{
  905. background:#ddd;
  906. }
  907. .components-custom-select-control__item .components-custom-select-control__item-hint{
  908. color:#949494;
  909. padding-right:4px;
  910. text-align:right;
  911. }
  912. .components-custom-select-control__item .components-custom-select-control__item-icon{
  913. margin-left:auto;
  914. }
  915. .components-custom-select-control__item:last-child{
  916. margin-bottom:0;
  917. }
  918. .block-editor-dimension-control .components-base-control__field{
  919. align-items:center;
  920. display:flex;
  921. }
  922. .block-editor-dimension-control .components-base-control__label{
  923. align-items:center;
  924. display:flex;
  925. margin-bottom:0;
  926. margin-right:1em;
  927. }
  928. .block-editor-dimension-control .components-base-control__label .dashicon{
  929. margin-right:.5em;
  930. }
  931. .block-editor-dimension-control.is-manual .components-base-control__label{
  932. width:10em;
  933. }
  934. body.is-dragging-components-draggable{
  935. cursor:move;
  936. cursor:grabbing !important;
  937. }
  938. .components-draggable__invisible-drag-image{
  939. height:50px;
  940. left:-1000px;
  941. position:fixed;
  942. width:50px;
  943. }
  944. .components-draggable__clone{
  945. background:transparent;
  946. padding:0;
  947. pointer-events:none;
  948. position:fixed;
  949. z-index:1000000000;
  950. }
  951. .components-drop-zone{
  952. border-radius:2px;
  953. bottom:0;
  954. left:0;
  955. opacity:0;
  956. position:absolute;
  957. right:0;
  958. top:0;
  959. visibility:hidden;
  960. z-index:40;
  961. }
  962. .components-drop-zone.is-active{
  963. opacity:1;
  964. visibility:visible;
  965. }
  966. .components-drop-zone__content{
  967. align-items:center;
  968. background-color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  969. bottom:0;
  970. color:#fff;
  971. display:flex;
  972. height:100%;
  973. justify-content:center;
  974. left:0;
  975. position:absolute;
  976. right:0;
  977. text-align:center;
  978. top:0;
  979. width:100%;
  980. z-index:50;
  981. }
  982. .components-drop-zone__content-icon,.components-drop-zone__content-text{
  983. display:block;
  984. }
  985. .components-drop-zone__content-icon{
  986. fill:currentColor;
  987. line-height:0;
  988. margin:0 auto 8px;
  989. pointer-events:none;
  990. }
  991. .components-drop-zone__content-text{
  992. font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
  993. font-size:13px;
  994. }
  995. .components-dropdown{
  996. display:inline-block;
  997. }
  998. .components-dropdown__content .components-popover__content{
  999. padding:8px;
  1000. }
  1001. .components-dropdown__content [role=menuitem]{
  1002. white-space:nowrap;
  1003. }
  1004. .components-dropdown-menu__menu{
  1005. font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
  1006. font-size:13px;
  1007. line-height:1.4;
  1008. width:100%;
  1009. }
  1010. .components-dropdown-menu__menu .components-dropdown-menu__menu-item,.components-dropdown-menu__menu .components-menu-item{
  1011. cursor:pointer;
  1012. outline:none;
  1013. padding:6px;
  1014. white-space:nowrap;
  1015. width:100%;
  1016. }
  1017. .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator,.components-dropdown-menu__menu .components-menu-item.has-separator{
  1018. margin-top:6px;
  1019. overflow:visible;
  1020. position:relative;
  1021. }
  1022. .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator:before,.components-dropdown-menu__menu .components-menu-item.has-separator:before{
  1023. background-color:#ddd;
  1024. box-sizing:content-box;
  1025. content:"";
  1026. display:block;
  1027. height:1px;
  1028. left:0;
  1029. position:absolute;
  1030. right:0;
  1031. top:-3px;
  1032. }
  1033. .components-dropdown-menu__menu .components-dropdown-menu__menu-item.is-active .dashicon,.components-dropdown-menu__menu .components-dropdown-menu__menu-item.is-active svg,.components-dropdown-menu__menu .components-menu-item.is-active .dashicon,.components-dropdown-menu__menu .components-menu-item.is-active svg{
  1034. background:#1e1e1e;
  1035. border-radius:1px;
  1036. box-shadow:0 0 0 1px #1e1e1e;
  1037. color:#fff;
  1038. }
  1039. .components-dropdown-menu__menu .components-dropdown-menu__menu-item.is-icon-only,.components-dropdown-menu__menu .components-menu-item.is-icon-only{
  1040. width:auto;
  1041. }
  1042. .components-dropdown-menu__menu .components-menu-item__button,.components-dropdown-menu__menu .components-menu-item__button.components-button{
  1043. height:auto;
  1044. min-height:36px;
  1045. padding-left:8px;
  1046. padding-right:8px;
  1047. text-align:left;
  1048. }
  1049. .components-dropdown-menu__menu .components-menu-group{
  1050. margin:0 -8px;
  1051. padding:8px;
  1052. }
  1053. .components-dropdown-menu__menu .components-menu-group:first-child{
  1054. margin-top:-8px;
  1055. }
  1056. .components-dropdown-menu__menu .components-menu-group:last-child{
  1057. margin-bottom:-8px;
  1058. }
  1059. .components-dropdown-menu__menu .components-menu-group+.components-menu-group{
  1060. border-top:1px solid #ccc;
  1061. margin-top:0;
  1062. padding:8px;
  1063. }
  1064. .is-alternate .components-dropdown-menu__menu .components-menu-group+.components-menu-group{
  1065. border-color:#1e1e1e;
  1066. }
  1067. .components-duotone-picker__color-indicator:before{
  1068. background:transparent;
  1069. }
  1070. .components-duotone-picker__color-indicator>.components-button,.components-duotone-picker__color-indicator>.components-button.is-pressed:hover:not(:disabled){
  1071. background:linear-gradient(-45deg, transparent 48%, #ddd 0, #ddd 52%, transparent 0);
  1072. color:transparent;
  1073. }
  1074. .components-duotone-picker__color-indicator>.components-button:not([aria-disabled=true]):active{
  1075. color:transparent;
  1076. }
  1077. .components-color-list-picker,.components-color-list-picker__swatch-button{
  1078. width:100%;
  1079. }
  1080. .components-color-list-picker__color-picker{
  1081. margin:8px 0;
  1082. }
  1083. .components-color-list-picker__swatch-button{
  1084. padding:6px;
  1085. }
  1086. .components-color-list-picker__swatch-color{
  1087. margin:2px;
  1088. }
  1089. .components-form-toggle{
  1090. display:inline-block;
  1091. position:relative;
  1092. }
  1093. .components-form-toggle .components-form-toggle__track{
  1094. background-color:#fff;
  1095. border:1px solid #1e1e1e;
  1096. border-radius:9px;
  1097. box-sizing:border-box;
  1098. content:"";
  1099. display:inline-block;
  1100. height:18px;
  1101. transition:background .2s ease;
  1102. vertical-align:top;
  1103. width:36px;
  1104. }
  1105. @media (prefers-reduced-motion:reduce){
  1106. .components-form-toggle .components-form-toggle__track{
  1107. transition-delay:0s;
  1108. transition-duration:0s;
  1109. }
  1110. }
  1111. .components-form-toggle .components-form-toggle__thumb{
  1112. background-color:#1e1e1e;
  1113. border:5px solid #1e1e1e;
  1114. border-radius:50%;
  1115. box-sizing:border-box;
  1116. display:block;
  1117. height:12px;
  1118. left:3px;
  1119. position:absolute;
  1120. top:3px;
  1121. transition:transform .1s ease;
  1122. width:12px;
  1123. }
  1124. @media (prefers-reduced-motion:reduce){
  1125. .components-form-toggle .components-form-toggle__thumb{
  1126. transition-delay:0s;
  1127. transition-duration:0s;
  1128. }
  1129. }
  1130. .components-form-toggle.is-checked .components-form-toggle__track{
  1131. background-color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  1132. border:9px solid transparent;
  1133. }
  1134. .components-form-toggle .components-form-toggle__input:focus+.components-form-toggle__track{
  1135. box-shadow:0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(var(--wp-admin-border-width-focus)*2) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  1136. outline:2px solid transparent;
  1137. outline-offset:2px;
  1138. }
  1139. .components-form-toggle.is-checked .components-form-toggle__thumb{
  1140. background-color:#fff;
  1141. border-width:0;
  1142. transform:translateX(18px);
  1143. }
  1144. .components-disabled .components-form-toggle,.components-form-toggle.is-disabled{
  1145. opacity:.3;
  1146. }
  1147. .components-form-toggle input.components-form-toggle__input[type=checkbox]{
  1148. border:none;
  1149. height:100%;
  1150. left:0;
  1151. margin:0;
  1152. opacity:0;
  1153. padding:0;
  1154. position:absolute;
  1155. top:0;
  1156. width:100%;
  1157. z-index:1;
  1158. }
  1159. .components-form-toggle input.components-form-toggle__input[type=checkbox]:checked{
  1160. background:none;
  1161. }
  1162. .components-form-toggle input.components-form-toggle__input[type=checkbox]:before{
  1163. content:"";
  1164. }
  1165. .components-form-token-field__input-container{
  1166. border:1px solid #949494;
  1167. border-radius:2px;
  1168. box-shadow:0 0 0 transparent;
  1169. cursor:text;
  1170. font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
  1171. font-size:16px;
  1172. line-height:normal;
  1173. padding:0;
  1174. transition:box-shadow .1s linear;
  1175. width:100%;
  1176. }
  1177. @media (prefers-reduced-motion:reduce){
  1178. .components-form-token-field__input-container{
  1179. transition-delay:0s;
  1180. transition-duration:0s;
  1181. }
  1182. }
  1183. @media (min-width:600px){
  1184. .components-form-token-field__input-container{
  1185. font-size:13px;
  1186. line-height:normal;
  1187. }
  1188. }
  1189. .components-form-token-field__input-container:focus{
  1190. border-color:var(--wp-admin-theme-color);
  1191. box-shadow:0 0 0 .5px var(--wp-admin-theme-color);
  1192. outline:2px solid transparent;
  1193. }
  1194. .components-form-token-field__input-container::-webkit-input-placeholder{
  1195. color:rgba(30,30,30,.62);
  1196. }
  1197. .components-form-token-field__input-container::-moz-placeholder{
  1198. color:rgba(30,30,30,.62);
  1199. opacity:1;
  1200. }
  1201. .components-form-token-field__input-container:-ms-input-placeholder{
  1202. color:rgba(30,30,30,.62);
  1203. }
  1204. .components-form-token-field__input-container.is-disabled{
  1205. background:#ddd;
  1206. border-color:#ddd;
  1207. }
  1208. .components-form-token-field__input-container.is-active{
  1209. border-color:var(--wp-admin-theme-color);
  1210. box-shadow:0 0 0 .5px var(--wp-admin-theme-color);
  1211. outline:2px solid transparent;
  1212. }
  1213. .components-form-token-field__input-container input[type=text].components-form-token-field__input{
  1214. background:inherit;
  1215. border:0;
  1216. box-shadow:none;
  1217. color:#1e1e1e;
  1218. display:inline-block;
  1219. flex:1;
  1220. font-family:inherit;
  1221. font-size:16px;
  1222. margin-left:4px;
  1223. max-width:100%;
  1224. min-height:24px;
  1225. min-width:50px;
  1226. padding:0;
  1227. width:100%;
  1228. }
  1229. @media (min-width:600px){
  1230. .components-form-token-field__input-container input[type=text].components-form-token-field__input{
  1231. font-size:13px;
  1232. }
  1233. }
  1234. .components-form-token-field.is-active .components-form-token-field__input-container input[type=text].components-form-token-field__input,.components-form-token-field__input-container input[type=text].components-form-token-field__input:focus{
  1235. box-shadow:none;
  1236. outline:none;
  1237. }
  1238. .components-form-token-field__input-container .components-form-token-field__token+input[type=text].components-form-token-field__input{
  1239. width:auto;
  1240. }
  1241. .components-form-token-field__token{
  1242. color:#1e1e1e;
  1243. display:flex;
  1244. font-size:13px;
  1245. max-width:100%;
  1246. }
  1247. .components-form-token-field__token.is-success .components-form-token-field__remove-token,.components-form-token-field__token.is-success .components-form-token-field__token-text{
  1248. background:#4ab866;
  1249. }
  1250. .components-form-token-field__token.is-error .components-form-token-field__remove-token,.components-form-token-field__token.is-error .components-form-token-field__token-text{
  1251. background:#cc1818;
  1252. }
  1253. .components-form-token-field__token.is-validating .components-form-token-field__remove-token,.components-form-token-field__token.is-validating .components-form-token-field__token-text{
  1254. color:#757575;
  1255. }
  1256. .components-form-token-field__token.is-borderless{
  1257. padding:0 24px 0 0;
  1258. position:relative;
  1259. }
  1260. .components-form-token-field__token.is-borderless .components-form-token-field__token-text{
  1261. background:transparent;
  1262. color:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  1263. }
  1264. .components-form-token-field__token.is-borderless .components-form-token-field__remove-token{
  1265. background:transparent;
  1266. color:#757575;
  1267. padding:0;
  1268. position:absolute;
  1269. right:0;
  1270. top:1px;
  1271. }
  1272. .components-form-token-field__token.is-borderless.is-success .components-form-token-field__token-text{
  1273. color:#4ab866;
  1274. }
  1275. .components-form-token-field__token.is-borderless.is-error .components-form-token-field__token-text{
  1276. border-radius:4px 0 0 4px;
  1277. color:#cc1818;
  1278. padding:0 4px 0 6px;
  1279. }
  1280. .components-form-token-field__token.is-borderless.is-validating .components-form-token-field__token-text{
  1281. color:#1e1e1e;
  1282. }
  1283. .components-form-token-field__token.is-disabled .components-form-token-field__remove-token{
  1284. cursor:default;
  1285. }
  1286. .components-form-token-field__remove-token.components-button,.components-form-token-field__token-text{
  1287. background:#ddd;
  1288. display:inline-block;
  1289. height:auto;
  1290. line-height:24px;
  1291. min-width:unset;
  1292. transition:all .2s cubic-bezier(.4, 1, .4, 1);
  1293. }
  1294. @media (prefers-reduced-motion:reduce){
  1295. .components-form-token-field__remove-token.components-button,.components-form-token-field__token-text{
  1296. animation-delay:0s;
  1297. animation-duration:1ms;
  1298. transition-delay:0s;
  1299. transition-duration:0s;
  1300. }
  1301. }
  1302. .components-form-token-field__token-text{
  1303. border-radius:2px 0 0 2px;
  1304. overflow:hidden;
  1305. padding:0 0 0 8px;
  1306. text-overflow:ellipsis;
  1307. white-space:nowrap;
  1308. }
  1309. .components-form-token-field__remove-token.components-button{
  1310. border-radius:0 2px 2px 0;
  1311. color:#1e1e1e;
  1312. cursor:pointer;
  1313. line-height:10px;
  1314. overflow:initial;
  1315. padding:0 2px;
  1316. }
  1317. .components-form-token-field__remove-token.components-button:hover{
  1318. color:#1e1e1e;
  1319. }
  1320. .components-form-token-field__suggestions-list{
  1321. box-shadow:inset 0 1px 0 0 #949494;
  1322. flex:1 0 100%;
  1323. list-style:none;
  1324. margin:0;
  1325. max-height:128px;
  1326. min-width:100%;
  1327. overflow-y:auto;
  1328. transition:all .15s ease-in-out;
  1329. }
  1330. @media (prefers-reduced-motion:reduce){
  1331. .components-form-token-field__suggestions-list{
  1332. transition-delay:0s;
  1333. transition-duration:0s;
  1334. }
  1335. }
  1336. .components-form-token-field__suggestion{
  1337. color:#1e1e1e;
  1338. cursor:pointer;
  1339. display:block;
  1340. font-size:13px;
  1341. margin:0;
  1342. min-height:32px;
  1343. padding:8px 12px;
  1344. }
  1345. .components-form-token-field__suggestion.is-selected{
  1346. background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  1347. color:#fff;
  1348. }
  1349. @media (min-width:600px){
  1350. .components-guide{
  1351. width:600px;
  1352. }
  1353. }
  1354. .components-guide .components-modal__content{
  1355. border-radius:2px;
  1356. margin-top:0;
  1357. padding:0;
  1358. }
  1359. .components-guide .components-modal__content:before{
  1360. content:none;
  1361. }
  1362. .components-guide .components-modal__header{
  1363. border-bottom:none;
  1364. height:60px;
  1365. padding:0;
  1366. position:sticky;
  1367. }
  1368. .components-guide .components-modal__header .components-button{
  1369. align-self:flex-start;
  1370. margin:8px 8px 0 0;
  1371. position:static;
  1372. }
  1373. .components-guide .components-modal__header .components-button:hover svg{
  1374. fill:#fff;
  1375. }
  1376. .components-guide__container{
  1377. display:flex;
  1378. flex-direction:column;
  1379. justify-content:space-between;
  1380. margin-top:-60px;
  1381. min-height:100%;
  1382. }
  1383. .components-guide__page{
  1384. display:flex;
  1385. flex-direction:column;
  1386. justify-content:center;
  1387. position:relative;
  1388. }
  1389. @media (min-width:600px){
  1390. .components-guide__page{
  1391. min-height:300px;
  1392. }
  1393. }
  1394. .components-guide__footer{
  1395. align-content:center;
  1396. display:flex;
  1397. height:36px;
  1398. justify-content:center;
  1399. margin:0 0 24px;
  1400. padding:0 32px;
  1401. position:relative;
  1402. width:100%;
  1403. }
  1404. .components-guide__page-control{
  1405. margin:0;
  1406. text-align:center;
  1407. }
  1408. .components-guide__page-control li{
  1409. display:inline-block;
  1410. margin:0;
  1411. }
  1412. .components-guide__page-control .components-button{
  1413. color:#e0e0e0;
  1414. height:30px;
  1415. margin:-6px 0;
  1416. min-width:20px;
  1417. }
  1418. .components-guide__page-control li[aria-current=step] .components-button{
  1419. color:var(--wp-components-color-accent, var(--wp-admin-theme-color));
  1420. }
  1421. .components-modal__frame.components-guide{
  1422. border:none;
  1423. max-height:575px;
  1424. min-width:312px;
  1425. }
  1426. @media (max-width:600px){
  1427. .components-modal__frame.components-guide{
  1428. margin:auto;
  1429. max-width:calc(100vw - 32px);
  1430. }
  1431. }
  1432. .components-button.components-guide__back-button,.components-button.components-guide__finish-button,.components-button.components-guide__forward-button{
  1433. position:absolute;
  1434. }
  1435. .components-button.components-guide__back-button{
  1436. left:32px;
  1437. }
  1438. .components-button.components-guide__finish-button,.components-button.components-guide__forward-button{
  1439. right:32px;
  1440. }
  1441. [role=region]{
  1442. position:relative;
  1443. }
  1444. .is-focusing-regions [role=region]:focus:after{
  1445. bottom:0;
  1446. content:"";
  1447. left:0;
  1448. pointer-events:none;
  1449. position:absolute;
  1450. right:0;
  1451. top:0;
  1452. z-index:1000000;
  1453. }
  1454. .is-focusing-regions .editor-post-publish-panel,.is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-entities-saved-states-panel,.is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,.is-focusing-regions .interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel,.is-focusing-regions [role=region]:focus:after,.is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header{
  1455. outline:4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  1456. outline-offset:-4px;
  1457. }
  1458. .components-menu-group+.components-menu-group{
  1459. border-top:1px solid #1e1e1e;
  1460. margin-top:8px;
  1461. padding-top:8px;
  1462. }
  1463. .components-menu-group+.components-menu-group.has-hidden-separator{
  1464. border-top:none;
  1465. margin-top:0;
  1466. padding-top:0;
  1467. }
  1468. .components-menu-group__label{
  1469. color:#757575;
  1470. font-size:11px;
  1471. font-weight:500;
  1472. margin-bottom:12px;
  1473. margin-top:4px;
  1474. padding:0 8px;
  1475. text-transform:uppercase;
  1476. white-space:nowrap;
  1477. }
  1478. .components-menu-item__button,.components-menu-item__button.components-button{
  1479. width:100%;
  1480. }
  1481. .components-menu-item__button.components-button[role=menuitemcheckbox] .components-menu-item__item:only-child,.components-menu-item__button.components-button[role=menuitemradio] .components-menu-item__item:only-child,.components-menu-item__button[role=menuitemcheckbox] .components-menu-item__item:only-child,.components-menu-item__button[role=menuitemradio] .components-menu-item__item:only-child{
  1482. box-sizing:initial;
  1483. padding-right:48px;
  1484. }
  1485. .components-menu-item__button .components-menu-items__item-icon,.components-menu-item__button.components-button .components-menu-items__item-icon{
  1486. display:inline-block;
  1487. flex:0 0 auto;
  1488. }
  1489. .components-menu-item__button .components-menu-items__item-icon.has-icon-right,.components-menu-item__button.components-button .components-menu-items__item-icon.has-icon-right{
  1490. margin-left:24px;
  1491. margin-right:-2px;
  1492. }
  1493. .components-menu-item__button .components-menu-item__shortcut+.components-menu-items__item-icon.has-icon-right,.components-menu-item__button.components-button .components-menu-item__shortcut+.components-menu-items__item-icon.has-icon-right{
  1494. margin-left:8px;
  1495. }
  1496. .components-menu-item__button .block-editor-block-icon,.components-menu-item__button.components-button .block-editor-block-icon{
  1497. margin-left:-2px;
  1498. margin-right:8px;
  1499. }
  1500. .components-menu-item__button.components-button.is-primary,.components-menu-item__button.is-primary{
  1501. justify-content:center;
  1502. }
  1503. .components-menu-item__button.components-button.is-primary .components-menu-item__item,.components-menu-item__button.is-primary .components-menu-item__item{
  1504. margin-right:0;
  1505. }
  1506. .components-menu-item__button.components-button:disabled.is-tertiary,.components-menu-item__button.components-button[aria-disabled=true].is-tertiary,.components-menu-item__button:disabled.is-tertiary,.components-menu-item__button[aria-disabled=true].is-tertiary{
  1507. background:none;
  1508. color:var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
  1509. opacity:.3;
  1510. }
  1511. .components-menu-item__info-wrapper{
  1512. display:flex;
  1513. flex-direction:column;
  1514. margin-right:auto;
  1515. }
  1516. .components-menu-item__info{
  1517. color:#757575;
  1518. font-size:12px;
  1519. margin-top:4px;
  1520. white-space:normal;
  1521. }
  1522. .components-menu-item__item{
  1523. align-items:center;
  1524. display:inline-flex;
  1525. margin-right:auto;
  1526. min-width:160px;
  1527. white-space:nowrap;
  1528. }
  1529. .components-menu-item__shortcut{
  1530. align-self:center;
  1531. color:currentColor;
  1532. display:none;
  1533. margin-left:auto;
  1534. margin-right:0;
  1535. padding-left:24px;
  1536. }
  1537. @media (min-width:480px){
  1538. .components-menu-item__shortcut{
  1539. display:inline;
  1540. }
  1541. }
  1542. .components-menu-items-choice svg,.components-menu-items-choice.components-button svg{
  1543. margin-right:12px;
  1544. }
  1545. .components-menu-items-choice.components-button.has-icon,.components-menu-items-choice.has-icon{
  1546. padding-left:12px;
  1547. }
  1548. .components-modal__screen-overlay{
  1549. animation:edit-post__fade-in-animation .2s ease-out 0s;
  1550. animation-fill-mode:forwards;
  1551. background-color:rgba(0,0,0,.35);
  1552. bottom:0;
  1553. display:flex;
  1554. left:0;
  1555. position:fixed;
  1556. right:0;
  1557. top:0;
  1558. z-index:100000;
  1559. }
  1560. @media (prefers-reduced-motion:reduce){
  1561. .components-modal__screen-overlay{
  1562. animation-delay:0s;
  1563. animation-duration:1ms;
  1564. }
  1565. }
  1566. .components-modal__frame{
  1567. animation:components-modal__appear-animation .1s ease-out;
  1568. animation-fill-mode:forwards;
  1569. background:#fff;
  1570. border-radius:4px 4px 0 0;
  1571. 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);
  1572. display:flex;
  1573. margin:40px 0 0;
  1574. overflow:hidden;
  1575. width:100%;
  1576. }
  1577. @media (prefers-reduced-motion:reduce){
  1578. .components-modal__frame{
  1579. animation-delay:0s;
  1580. animation-duration:1ms;
  1581. }
  1582. }
  1583. @media (min-width:600px){
  1584. .components-modal__frame{
  1585. border-radius:4px;
  1586. margin:auto;
  1587. max-height:calc(100% - 120px);
  1588. max-width:calc(100% - 32px);
  1589. min-width:350px;
  1590. width:auto;
  1591. }
  1592. }
  1593. @media (min-width:600px) and (min-width:600px){
  1594. .components-modal__frame.is-full-screen{
  1595. height:calc(100% - 32px);
  1596. max-height:none;
  1597. width:calc(100% - 32px);
  1598. }
  1599. }
  1600. @media (min-width:600px) and (min-width:782px){
  1601. .components-modal__frame.is-full-screen{
  1602. height:calc(100% - 80px);
  1603. max-width:none;
  1604. width:calc(100% - 80px);
  1605. }
  1606. }
  1607. @media (min-width:960px){
  1608. .components-modal__frame{
  1609. max-height:70%;
  1610. }
  1611. }
  1612. @keyframes components-modal__appear-animation{
  1613. 0%{
  1614. transform:translateY(32px);
  1615. }
  1616. to{
  1617. transform:translateY(0);
  1618. }
  1619. }
  1620. .components-modal__header{
  1621. align-items:center;
  1622. border-bottom:1px solid transparent;
  1623. box-sizing:border-box;
  1624. display:flex;
  1625. flex-direction:row;
  1626. height:72px;
  1627. justify-content:space-between;
  1628. left:0;
  1629. padding:24px 32px 8px;
  1630. position:absolute;
  1631. top:0;
  1632. width:100%;
  1633. z-index:10;
  1634. }
  1635. .components-modal__header .components-modal__header-heading{
  1636. font-size:1.2rem;
  1637. font-weight:600;
  1638. }
  1639. .components-modal__header h1{
  1640. line-height:1;
  1641. margin:0;
  1642. }
  1643. .components-modal__header .components-button{
  1644. left:8px;
  1645. position:relative;
  1646. }
  1647. .components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header{
  1648. border-bottom-color:#ddd;
  1649. }
  1650. .components-modal__header+p{
  1651. margin-top:0;
  1652. }
  1653. .components-modal__header-heading-container{
  1654. align-items:center;
  1655. display:flex;
  1656. flex-direction:row;
  1657. flex-grow:1;
  1658. justify-content:left;
  1659. }
  1660. .components-modal__header-icon-container{
  1661. display:inline-block;
  1662. }
  1663. .components-modal__header-icon-container svg{
  1664. max-height:36px;
  1665. max-width:36px;
  1666. padding:8px;
  1667. }
  1668. .components-modal__content{
  1669. flex:1;
  1670. margin-top:72px;
  1671. overflow:auto;
  1672. padding:4px 32px 32px;
  1673. }
  1674. .components-modal__content.hide-header{
  1675. margin-top:0;
  1676. padding-top:32px;
  1677. }
  1678. .components-modal__content.is-scrollable:focus-visible{
  1679. box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  1680. outline:2px solid transparent;
  1681. outline-offset:-2px;
  1682. }
  1683. .components-notice{
  1684. align-items:center;
  1685. background-color:#fff;
  1686. border-left:4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  1687. display:flex;
  1688. font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
  1689. font-size:13px;
  1690. margin:5px 15px 2px;
  1691. padding:8px 12px;
  1692. }
  1693. .components-notice.is-dismissible{
  1694. position:relative;
  1695. }
  1696. .components-notice.is-success{
  1697. background-color:#eff9f1;
  1698. border-left-color:#4ab866;
  1699. }
  1700. .components-notice.is-warning{
  1701. background-color:#fef8ee;
  1702. border-left-color:#f0b849;
  1703. }
  1704. .components-notice.is-error{
  1705. background-color:#f4a2a2;
  1706. border-left-color:#cc1818;
  1707. }
  1708. .components-notice__content{
  1709. flex-grow:1;
  1710. margin:4px 25px 4px 0;
  1711. }
  1712. .components-notice__actions{
  1713. display:flex;
  1714. flex-wrap:wrap;
  1715. }
  1716. .components-notice__action.components-button{
  1717. margin-right:8px;
  1718. }
  1719. .components-notice__action.components-button,.components-notice__action.components-button.is-link{
  1720. margin-left:12px;
  1721. }
  1722. .components-notice__action.components-button.is-secondary{
  1723. vertical-align:initial;
  1724. }
  1725. .components-notice__dismiss{
  1726. align-self:flex-start;
  1727. color:#757575;
  1728. flex-shrink:0;
  1729. }
  1730. .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):focus,.components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):active,.components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover{
  1731. background-color:transparent;
  1732. color:#1e1e1e;
  1733. }
  1734. .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover{
  1735. box-shadow:none;
  1736. }
  1737. .components-notice-list{
  1738. box-sizing:border-box;
  1739. max-width:100vw;
  1740. }
  1741. .components-notice-list .components-notice__content{
  1742. line-height:2;
  1743. margin-bottom:12px;
  1744. margin-top:12px;
  1745. }
  1746. .components-notice-list .components-notice__action.components-button{
  1747. display:block;
  1748. margin-left:0;
  1749. margin-top:8px;
  1750. }
  1751. .components-panel{
  1752. background:#fff;
  1753. border:1px solid #e0e0e0;
  1754. }
  1755. .components-panel>.components-panel__body:first-child,.components-panel>.components-panel__header:first-child{
  1756. margin-top:-1px;
  1757. }
  1758. .components-panel>.components-panel__body:last-child,.components-panel>.components-panel__header:last-child{
  1759. border-bottom-width:0;
  1760. }
  1761. .components-panel+.components-panel{
  1762. margin-top:-1px;
  1763. }
  1764. .components-panel__body{
  1765. border-bottom:1px solid #e0e0e0;
  1766. border-top:1px solid #e0e0e0;
  1767. }
  1768. .components-panel__body h3{
  1769. margin:0 0 .5em;
  1770. }
  1771. .components-panel__body.is-opened{
  1772. padding:16px;
  1773. }
  1774. .components-panel__header{
  1775. align-items:center;
  1776. border-bottom:1px solid #ddd;
  1777. box-sizing:content-box;
  1778. display:flex;
  1779. height:47px;
  1780. justify-content:space-between;
  1781. padding:0 16px;
  1782. }
  1783. .components-panel__header h2{
  1784. color:inherit;
  1785. font-size:inherit;
  1786. margin:0;
  1787. }
  1788. .components-panel__body+.components-panel__body,.components-panel__body+.components-panel__header,.components-panel__header+.components-panel__body,.components-panel__header+.components-panel__header{
  1789. margin-top:-1px;
  1790. }
  1791. .components-panel__body>.components-panel__body-title{
  1792. display:block;
  1793. font-size:inherit;
  1794. margin-bottom:0;
  1795. margin-top:0;
  1796. padding:0;
  1797. transition:background .1s ease-in-out;
  1798. }
  1799. @media (prefers-reduced-motion:reduce){
  1800. .components-panel__body>.components-panel__body-title{
  1801. transition-delay:0s;
  1802. transition-duration:0s;
  1803. }
  1804. }
  1805. .components-panel__body.is-opened>.components-panel__body-title{
  1806. margin:-16px -16px 5px;
  1807. }
  1808. .components-panel__body>.components-panel__body-title:hover{
  1809. background:#f0f0f0;
  1810. border:none;
  1811. }
  1812. .components-panel__body-toggle.components-button{
  1813. border:none;
  1814. box-shadow:none;
  1815. color:#1e1e1e;
  1816. font-weight:500;
  1817. height:auto;
  1818. outline:none;
  1819. padding:16px 48px 16px 16px;
  1820. position:relative;
  1821. text-align:left;
  1822. transition:background .1s ease-in-out;
  1823. width:100%;
  1824. }
  1825. @media (prefers-reduced-motion:reduce){
  1826. .components-panel__body-toggle.components-button{
  1827. transition-delay:0s;
  1828. transition-duration:0s;
  1829. }
  1830. }
  1831. .components-panel__body-toggle.components-button:focus{
  1832. border-radius:0;
  1833. box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  1834. }
  1835. .components-panel__body-toggle.components-button .components-panel__arrow{
  1836. fill:currentColor;
  1837. color:#1e1e1e;
  1838. position:absolute;
  1839. right:16px;
  1840. top:50%;
  1841. transform:translateY(-50%);
  1842. transition:color .1s ease-in-out;
  1843. }
  1844. @media (prefers-reduced-motion:reduce){
  1845. .components-panel__body-toggle.components-button .components-panel__arrow{
  1846. transition-delay:0s;
  1847. transition-duration:0s;
  1848. }
  1849. }
  1850. body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right{
  1851. -ms-filter:fliph;
  1852. filter:FlipH;
  1853. margin-top:-10px;
  1854. transform:scaleX(-1);
  1855. }
  1856. .components-panel__icon{
  1857. color:#757575;
  1858. margin:-2px 0 -2px 6px;
  1859. }
  1860. .components-panel__body-toggle-icon{
  1861. margin-right:-5px;
  1862. }
  1863. .components-panel__color-title{
  1864. float:left;
  1865. height:19px;
  1866. }
  1867. .components-panel__row{
  1868. align-items:center;
  1869. display:flex;
  1870. justify-content:space-between;
  1871. margin-top:8px;
  1872. min-height:36px;
  1873. }
  1874. .components-panel__row select{
  1875. min-width:0;
  1876. }
  1877. .components-panel__row label{
  1878. flex-shrink:0;
  1879. margin-right:12px;
  1880. max-width:75%;
  1881. }
  1882. .components-panel__row:empty,.components-panel__row:first-of-type{
  1883. margin-top:0;
  1884. }
  1885. .components-panel .circle-picker{
  1886. padding-bottom:20px;
  1887. }
  1888. .components-placeholder.components-placeholder{
  1889. -moz-font-smoothing:subpixel-antialiased;
  1890. -webkit-font-smoothing:subpixel-antialiased;
  1891. background-color:#fff;
  1892. border-radius:2px;
  1893. box-shadow:inset 0 0 0 1px #1e1e1e;
  1894. box-sizing:border-box;
  1895. color:#1e1e1e;
  1896. margin:0;
  1897. outline:1px solid transparent;
  1898. padding:1em;
  1899. position:relative;
  1900. text-align:left;
  1901. width:100%;
  1902. }
  1903. @supports (position:sticky){
  1904. .components-placeholder.components-placeholder{
  1905. align-items:flex-start;
  1906. display:flex;
  1907. flex-direction:column;
  1908. justify-content:top;
  1909. }
  1910. }
  1911. .components-placeholder__error,.components-placeholder__fieldset,.components-placeholder__instructions,.components-placeholder__label{
  1912. font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
  1913. font-size:13px;
  1914. }
  1915. .components-placeholder__label{
  1916. align-items:center;
  1917. display:flex;
  1918. font-weight:600;
  1919. margin-bottom:16px;
  1920. }
  1921. .components-placeholder__label .block-editor-block-icon,.components-placeholder__label .dashicon,.components-placeholder__label>svg{
  1922. fill:currentColor;
  1923. margin-right:12px;
  1924. }
  1925. @media (forced-colors:active){
  1926. .components-placeholder__label .block-editor-block-icon,.components-placeholder__label .dashicon,.components-placeholder__label>svg{
  1927. fill:CanvasText;
  1928. }
  1929. }
  1930. .components-placeholder__label:empty{
  1931. display:none;
  1932. }
  1933. .components-placeholder__fieldset,.components-placeholder__fieldset form{
  1934. display:flex;
  1935. flex-direction:row;
  1936. flex-wrap:wrap;
  1937. width:100%;
  1938. }
  1939. .components-placeholder__fieldset form p,.components-placeholder__fieldset p{
  1940. font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
  1941. font-size:13px;
  1942. }
  1943. .components-placeholder__fieldset.is-column-layout,.components-placeholder__fieldset.is-column-layout form{
  1944. flex-direction:column;
  1945. }
  1946. .components-placeholder__input[type=url]{
  1947. border:1px solid #949494;
  1948. border-radius:2px;
  1949. box-shadow:0 0 0 transparent;
  1950. flex:1 1 auto;
  1951. font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
  1952. font-size:16px;
  1953. line-height:normal;
  1954. margin:0 8px 0 0;
  1955. padding:6px 8px;
  1956. transition:box-shadow .1s linear;
  1957. }
  1958. @media (prefers-reduced-motion:reduce){
  1959. .components-placeholder__input[type=url]{
  1960. transition-delay:0s;
  1961. transition-duration:0s;
  1962. }
  1963. }
  1964. @media (min-width:600px){
  1965. .components-placeholder__input[type=url]{
  1966. font-size:13px;
  1967. line-height:normal;
  1968. }
  1969. }
  1970. .components-placeholder__input[type=url]:focus{
  1971. border-color:var(--wp-admin-theme-color);
  1972. box-shadow:0 0 0 .5px var(--wp-admin-theme-color);
  1973. outline:2px solid transparent;
  1974. }
  1975. .components-placeholder__input[type=url]::-webkit-input-placeholder{
  1976. color:rgba(30,30,30,.62);
  1977. }
  1978. .components-placeholder__input[type=url]::-moz-placeholder{
  1979. color:rgba(30,30,30,.62);
  1980. opacity:1;
  1981. }
  1982. .components-placeholder__input[type=url]:-ms-input-placeholder{
  1983. color:rgba(30,30,30,.62);
  1984. }
  1985. .components-placeholder__instructions{
  1986. margin-bottom:1em;
  1987. }
  1988. .components-placeholder__error{
  1989. margin-top:1em;
  1990. width:100%;
  1991. }
  1992. .components-placeholder__fieldset .components-button{
  1993. margin-bottom:12px;
  1994. margin-right:12px;
  1995. }
  1996. .components-placeholder__fieldset .components-button:last-child{
  1997. margin-bottom:0;
  1998. margin-right:0;
  1999. }
  2000. .components-placeholder__fieldset .components-button:not(.is-link)~.components-button.is-link{
  2001. margin-left:10px;
  2002. margin-right:10px;
  2003. }
  2004. .components-placeholder__fieldset .components-button:not(.is-link)~.components-button.is-link:last-child{
  2005. margin-right:0;
  2006. }
  2007. .components-placeholder.is-large .components-placeholder__label{
  2008. font-size:18pt;
  2009. font-weight:400;
  2010. }
  2011. .components-placeholder.is-medium .components-placeholder__instructions,.components-placeholder.is-small .components-placeholder__instructions{
  2012. display:none;
  2013. }
  2014. .components-placeholder.is-medium .components-placeholder__fieldset,.components-placeholder.is-medium .components-placeholder__fieldset form,.components-placeholder.is-small .components-placeholder__fieldset,.components-placeholder.is-small .components-placeholder__fieldset form{
  2015. flex-direction:column;
  2016. }
  2017. .components-placeholder.is-medium .components-placeholder__fieldset .components-button,.components-placeholder.is-small .components-placeholder__fieldset .components-button{
  2018. margin-right:auto;
  2019. }
  2020. .components-placeholder.is-small .components-button{
  2021. padding:0 8px 2px;
  2022. }
  2023. .components-placeholder .components-placeholder__learn-more .components-external-link{
  2024. color:var(--wp-admin-theme-color);
  2025. }
  2026. .components-placeholder.has-illustration{
  2027. -webkit-backdrop-filter:blur(100px);
  2028. backdrop-filter:blur(100px);
  2029. backface-visibility:hidden;
  2030. background-color:transparent;
  2031. border-radius:2px;
  2032. box-shadow:none;
  2033. color:inherit;
  2034. display:flex;
  2035. overflow:auto;
  2036. }
  2037. .is-dark-theme .components-placeholder.has-illustration{
  2038. background-color:rgba(0,0,0,.1);
  2039. }
  2040. .components-placeholder.has-illustration .components-placeholder__fieldset{
  2041. margin-left:0;
  2042. margin-right:0;
  2043. width:auto;
  2044. }
  2045. .components-placeholder.has-illustration .components-button,.components-placeholder.has-illustration .components-placeholder__instructions,.components-placeholder.has-illustration .components-placeholder__label{
  2046. opacity:0;
  2047. pointer-events:none;
  2048. transition:opacity .1s linear;
  2049. }
  2050. @media (prefers-reduced-motion:reduce){
  2051. .components-placeholder.has-illustration .components-button,.components-placeholder.has-illustration .components-placeholder__instructions,.components-placeholder.has-illustration .components-placeholder__label{
  2052. transition-delay:0s;
  2053. transition-duration:0s;
  2054. }
  2055. }
  2056. .is-selected>.components-placeholder.has-illustration .components-button,.is-selected>.components-placeholder.has-illustration .components-placeholder__instructions,.is-selected>.components-placeholder.has-illustration .components-placeholder__label{
  2057. opacity:1;
  2058. pointer-events:auto;
  2059. }
  2060. .components-placeholder.has-illustration:before{
  2061. background:currentColor;
  2062. bottom:0;
  2063. content:"";
  2064. left:0;
  2065. opacity:.1;
  2066. pointer-events:none;
  2067. position:absolute;
  2068. right:0;
  2069. top:0;
  2070. }
  2071. .components-placeholder__preview{
  2072. display:flex;
  2073. justify-content:center;
  2074. }
  2075. .components-placeholder__illustration{
  2076. stroke:currentColor;
  2077. box-sizing:content-box;
  2078. height:100%;
  2079. left:50%;
  2080. opacity:.25;
  2081. position:absolute;
  2082. top:50%;
  2083. transform:translate(-50%, -50%);
  2084. width:100%;
  2085. }
  2086. .components-popover{
  2087. will-change:transform;
  2088. z-index:1000000;
  2089. }
  2090. .components-popover.is-expanded{
  2091. bottom:0;
  2092. left:0;
  2093. position:fixed;
  2094. right:0;
  2095. top:0;
  2096. z-index:1000000 !important;
  2097. }
  2098. .components-popover__content{
  2099. background:#fff;
  2100. border-radius:2px;
  2101. box-shadow:0 0 0 1px #ccc,0 .7px 1px rgba(0,0,0,.1),0 1.2px 1.7px -.2px rgba(0,0,0,.1),0 2.3px 3.3px -.5px rgba(0,0,0,.1);
  2102. box-sizing:border-box;
  2103. width:min-content;
  2104. }
  2105. .is-alternate .components-popover__content{
  2106. box-shadow:0 0 0 1px #1e1e1e;
  2107. }
  2108. .is-unstyled .components-popover__content{
  2109. background:none;
  2110. border-radius:0;
  2111. box-shadow:none;
  2112. }
  2113. .components-popover.is-expanded .components-popover__content{
  2114. box-shadow:0 -1px 0 0 #ccc;
  2115. height:calc(100% - 48px);
  2116. overflow-y:visible;
  2117. position:static;
  2118. width:auto;
  2119. }
  2120. .components-popover.is-expanded.is-alternate .components-popover__content{
  2121. box-shadow:0 -1px 0 #1e1e1e;
  2122. }
  2123. .components-popover__header{
  2124. align-items:center;
  2125. background:#fff;
  2126. display:flex;
  2127. height:48px;
  2128. justify-content:space-between;
  2129. padding:0 8px 0 16px;
  2130. }
  2131. .components-popover__header-title{
  2132. overflow:hidden;
  2133. text-overflow:ellipsis;
  2134. white-space:nowrap;
  2135. width:100%;
  2136. }
  2137. .components-popover__close.components-button{
  2138. z-index:5;
  2139. }
  2140. .components-popover__arrow{
  2141. display:flex;
  2142. height:14px;
  2143. pointer-events:none;
  2144. position:absolute;
  2145. width:14px;
  2146. }
  2147. .components-popover__arrow:before{
  2148. background-color:#fff;
  2149. content:"";
  2150. height:2px;
  2151. left:1px;
  2152. position:absolute;
  2153. right:1px;
  2154. top:-1px;
  2155. }
  2156. .components-popover__arrow.is-top{
  2157. bottom:-14px !important;
  2158. transform:rotate(0);
  2159. }
  2160. .components-popover__arrow.is-right{
  2161. left:-14px !important;
  2162. transform:rotate(90deg);
  2163. }
  2164. .components-popover__arrow.is-bottom{
  2165. top:-14px !important;
  2166. transform:rotate(180deg);
  2167. }
  2168. .components-popover__arrow.is-left{
  2169. right:-14px !important;
  2170. transform:rotate(-90deg);
  2171. }
  2172. .components-popover__triangle{
  2173. display:block;
  2174. flex:1;
  2175. }
  2176. .components-popover__triangle-bg{
  2177. fill:#fff;
  2178. }
  2179. .components-popover__triangle-border{
  2180. fill:transparent;
  2181. stroke-width:1px;
  2182. stroke:#ccc;
  2183. }
  2184. .is-alternate .components-popover__triangle-border{
  2185. stroke:#1e1e1e;
  2186. }
  2187. .components-radio-control__input[type=radio]{
  2188. border:1px solid #1e1e1e;
  2189. border-radius:2px;
  2190. border-radius:50%;
  2191. box-shadow:0 0 0 transparent;
  2192. font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
  2193. font-size:16px;
  2194. height:24px;
  2195. line-height:normal;
  2196. margin-right:6px;
  2197. margin-top:0;
  2198. padding:6px 8px;
  2199. transition:box-shadow .1s linear;
  2200. transition:none;
  2201. width:24px;
  2202. }
  2203. @media (prefers-reduced-motion:reduce){
  2204. .components-radio-control__input[type=radio]{
  2205. transition-delay:0s;
  2206. transition-duration:0s;
  2207. }
  2208. }
  2209. @media (min-width:600px){
  2210. .components-radio-control__input[type=radio]{
  2211. font-size:13px;
  2212. line-height:normal;
  2213. }
  2214. }
  2215. .components-radio-control__input[type=radio]:focus{
  2216. border-color:var(--wp-admin-theme-color);
  2217. box-shadow:0 0 0 .5px var(--wp-admin-theme-color);
  2218. }
  2219. .components-radio-control__input[type=radio]::-webkit-input-placeholder{
  2220. color:rgba(30,30,30,.62);
  2221. }
  2222. .components-radio-control__input[type=radio]::-moz-placeholder{
  2223. color:rgba(30,30,30,.62);
  2224. opacity:1;
  2225. }
  2226. .components-radio-control__input[type=radio]:-ms-input-placeholder{
  2227. color:rgba(30,30,30,.62);
  2228. }
  2229. @media (min-width:600px){
  2230. .components-radio-control__input[type=radio]{
  2231. height:20px;
  2232. width:20px;
  2233. }
  2234. }
  2235. .components-radio-control__input[type=radio]:checked:before{
  2236. background-color:#fff;
  2237. border:4px solid #fff;
  2238. box-sizing:inherit;
  2239. height:8px;
  2240. margin:0;
  2241. transform:translate(7px, 7px);
  2242. width:8px;
  2243. }
  2244. @media (min-width:600px){
  2245. .components-radio-control__input[type=radio]:checked:before{
  2246. transform:translate(5px, 5px);
  2247. }
  2248. }
  2249. .components-radio-control__input[type=radio]:focus{
  2250. box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
  2251. outline:2px solid transparent;
  2252. }
  2253. .components-radio-control__input[type=radio]:checked{
  2254. background:var(--wp-admin-theme-color);
  2255. border-color:var(--wp-admin-theme-color);
  2256. }
  2257. .components-resizable-box__handle{
  2258. display:none;
  2259. height:23px;
  2260. width:23px;
  2261. z-index:2;
  2262. }
  2263. .components-resizable-box__container.has-show-handle .components-resizable-box__handle{
  2264. display:block;
  2265. }
  2266. .components-resizable-box__container>img{
  2267. width:inherit;
  2268. }
  2269. .components-resizable-box__handle:after{
  2270. background:#fff;
  2271. border-radius:50%;
  2272. box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  2273. content:"";
  2274. cursor:inherit;
  2275. display:block;
  2276. height:15px;
  2277. outline:2px solid transparent;
  2278. position:absolute;
  2279. right:calc(50% - 8px);
  2280. top:calc(50% - 8px);
  2281. width:15px;
  2282. }
  2283. .components-resizable-box__side-handle:before{
  2284. background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  2285. border-radius:2px;
  2286. content:"";
  2287. cursor:inherit;
  2288. display:block;
  2289. height:3px;
  2290. opacity:0;
  2291. position:absolute;
  2292. right:calc(50% - 1px);
  2293. top:calc(50% - 1px);
  2294. transition:transform .1s ease-in;
  2295. width:3px;
  2296. will-change:transform;
  2297. }
  2298. @media (prefers-reduced-motion:reduce){
  2299. .components-resizable-box__side-handle:before{
  2300. transition-delay:0s;
  2301. transition-duration:0s;
  2302. }
  2303. }
  2304. .components-resizable-box__corner-handle,.components-resizable-box__side-handle{
  2305. z-index:2;
  2306. }
  2307. .components-resizable-box__side-handle.components-resizable-box__handle-bottom,.components-resizable-box__side-handle.components-resizable-box__handle-bottom:before,.components-resizable-box__side-handle.components-resizable-box__handle-top,.components-resizable-box__side-handle.components-resizable-box__handle-top:before{
  2308. border-left:0;
  2309. border-right:0;
  2310. left:0;
  2311. width:100%;
  2312. }
  2313. .components-resizable-box__side-handle.components-resizable-box__handle-left,.components-resizable-box__side-handle.components-resizable-box__handle-left:before,.components-resizable-box__side-handle.components-resizable-box__handle-right,.components-resizable-box__side-handle.components-resizable-box__handle-right:before{
  2314. border-bottom:0;
  2315. border-top:0;
  2316. height:100%;
  2317. top:0;
  2318. }
  2319. .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover:before,.components-resizable-box__side-handle.components-resizable-box__handle-top:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-top:hover:before{
  2320. animation:components-resizable-box__top-bottom-animation .1s ease-out 0s;
  2321. animation-fill-mode:forwards;
  2322. }
  2323. @media (prefers-reduced-motion:reduce){
  2324. .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover:before,.components-resizable-box__side-handle.components-resizable-box__handle-top:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-top:hover:before{
  2325. animation-delay:0s;
  2326. animation-duration:1ms;
  2327. }
  2328. }
  2329. .components-resizable-box__side-handle.components-resizable-box__handle-left:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-left:hover:before,.components-resizable-box__side-handle.components-resizable-box__handle-right:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-right:hover:before{
  2330. animation:components-resizable-box__left-right-animation .1s ease-out 0s;
  2331. animation-fill-mode:forwards;
  2332. }
  2333. @media (prefers-reduced-motion:reduce){
  2334. .components-resizable-box__side-handle.components-resizable-box__handle-left:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-left:hover:before,.components-resizable-box__side-handle.components-resizable-box__handle-right:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-right:hover:before{
  2335. animation-delay:0s;
  2336. animation-duration:1ms;
  2337. }
  2338. }
  2339. @media not all and (min-resolution:0.001dpcm){
  2340. @supports (-webkit-appearance:none){
  2341. .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover:before,.components-resizable-box__side-handle.components-resizable-box__handle-left:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-left:hover:before,.components-resizable-box__side-handle.components-resizable-box__handle-right:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-right:hover:before,.components-resizable-box__side-handle.components-resizable-box__handle-top:active:before,.components-resizable-box__side-handle.components-resizable-box__handle-top:hover:before{
  2342. animation:none;
  2343. }
  2344. }
  2345. }
  2346. @keyframes components-resizable-box__top-bottom-animation{
  2347. 0%{
  2348. opacity:0;
  2349. transform:scaleX(0);
  2350. }
  2351. to{
  2352. opacity:1;
  2353. transform:scaleX(1);
  2354. }
  2355. }
  2356. @keyframes components-resizable-box__left-right-animation{
  2357. 0%{
  2358. opacity:0;
  2359. transform:scaleY(0);
  2360. }
  2361. to{
  2362. opacity:1;
  2363. transform:scaleY(1);
  2364. }
  2365. }
  2366. .components-resizable-box__handle-right{
  2367. right:-11.5px;
  2368. }
  2369. .components-resizable-box__handle-left{
  2370. left:-11.5px;
  2371. }
  2372. .components-resizable-box__handle-top{
  2373. top:-11.5px;
  2374. }
  2375. .components-resizable-box__handle-bottom{
  2376. bottom:-11.5px;
  2377. }
  2378. .components-responsive-wrapper{
  2379. align-items:center;
  2380. display:flex;
  2381. justify-content:center;
  2382. max-width:100%;
  2383. position:relative;
  2384. }
  2385. .components-responsive-wrapper__content{
  2386. display:block;
  2387. max-width:100%;
  2388. width:100%;
  2389. }
  2390. .components-sandbox{
  2391. overflow:hidden;
  2392. }
  2393. iframe.components-sandbox{
  2394. width:100%;
  2395. }
  2396. body.lockscroll,html.lockscroll{
  2397. overflow:hidden;
  2398. }
  2399. .components-search-control{
  2400. position:relative;
  2401. }
  2402. .components-search-control input[type=search].components-search-control__input{
  2403. background:#f0f0f0;
  2404. border:none;
  2405. border-radius:2px;
  2406. box-shadow:0 0 0 transparent;
  2407. display:block;
  2408. font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
  2409. font-size:16px;
  2410. height:48px;
  2411. line-height:normal;
  2412. margin-left:0;
  2413. margin-right:0;
  2414. padding:0 48px 0 16px;
  2415. transition:box-shadow .1s linear;
  2416. width:100%;
  2417. }
  2418. @media (prefers-reduced-motion:reduce){
  2419. .components-search-control input[type=search].components-search-control__input{
  2420. transition-delay:0s;
  2421. transition-duration:0s;
  2422. }
  2423. }
  2424. @media (min-width:600px){
  2425. .components-search-control input[type=search].components-search-control__input{
  2426. font-size:13px;
  2427. line-height:normal;
  2428. }
  2429. }
  2430. .components-search-control input[type=search].components-search-control__input:focus{
  2431. border-color:var(--wp-admin-theme-color);
  2432. box-shadow:0 0 0 .5px var(--wp-admin-theme-color);
  2433. outline:2px solid transparent;
  2434. }
  2435. .components-search-control input[type=search].components-search-control__input::-webkit-input-placeholder{
  2436. color:rgba(30,30,30,.62);
  2437. }
  2438. .components-search-control input[type=search].components-search-control__input::-moz-placeholder{
  2439. color:rgba(30,30,30,.62);
  2440. opacity:1;
  2441. }
  2442. .components-search-control input[type=search].components-search-control__input:-ms-input-placeholder{
  2443. color:rgba(30,30,30,.62);
  2444. }
  2445. @media (min-width:600px){
  2446. .components-search-control input[type=search].components-search-control__input{
  2447. font-size:13px;
  2448. }
  2449. }
  2450. .components-search-control input[type=search].components-search-control__input:focus{
  2451. background:#fff;
  2452. box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  2453. }
  2454. .components-search-control input[type=search].components-search-control__input::placeholder{
  2455. color:#757575;
  2456. }
  2457. .components-search-control input[type=search].components-search-control__input::-webkit-search-cancel-button,.components-search-control input[type=search].components-search-control__input::-webkit-search-decoration,.components-search-control input[type=search].components-search-control__input::-webkit-search-results-button,.components-search-control input[type=search].components-search-control__input::-webkit-search-results-decoration{
  2458. -webkit-appearance:none;
  2459. }
  2460. .components-search-control.is-next-40px-default-size input[type=search].components-search-control__input{
  2461. height:40px;
  2462. }
  2463. .components-search-control.is-size-compact input[type=search].components-search-control__input{
  2464. height:32px;
  2465. }
  2466. .components-search-control__icon{
  2467. align-items:center;
  2468. display:flex;
  2469. justify-content:center;
  2470. position:absolute;
  2471. right:12px;
  2472. top:50%;
  2473. transform:translateY(-50%);
  2474. width:24px;
  2475. }
  2476. .components-search-control__input-wrapper{
  2477. position:relative;
  2478. }
  2479. .components-select-control__input{
  2480. -webkit-tap-highlight-color:rgba(0, 0, 0, 0) !important;
  2481. outline:0;
  2482. }
  2483. @media (max-width:782px){
  2484. .components-base-control .components-base-control__field .components-select-control__input{
  2485. font-size:16px;
  2486. }
  2487. }
  2488. .components-snackbar{
  2489. -webkit-backdrop-filter:blur(16px) saturate(180%);
  2490. backdrop-filter:blur(16px) saturate(180%);
  2491. background:rgba(0,0,0,.85);
  2492. border-radius:2px;
  2493. box-shadow:0 .7px 1px rgba(0,0,0,.1),0 1.2px 1.7px -.2px rgba(0,0,0,.1),0 2.3px 3.3px -.5px rgba(0,0,0,.1);
  2494. box-sizing:border-box;
  2495. color:#fff;
  2496. cursor:pointer;
  2497. font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
  2498. font-size:13px;
  2499. max-width:600px;
  2500. padding:12px 20px;
  2501. pointer-events:auto;
  2502. width:100%;
  2503. }
  2504. @media (min-width:600px){
  2505. .components-snackbar{
  2506. width:-moz-fit-content;
  2507. width:fit-content;
  2508. }
  2509. }
  2510. .components-snackbar:focus{
  2511. box-shadow:inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  2512. }
  2513. .components-snackbar.components-snackbar-explicit-dismiss{
  2514. cursor:default;
  2515. }
  2516. .components-snackbar .components-snackbar__content-with-icon{
  2517. margin-left:24px;
  2518. }
  2519. .components-snackbar .components-snackbar__icon{
  2520. left:28px;
  2521. position:absolute;
  2522. top:24px;
  2523. }
  2524. .components-snackbar .components-snackbar__dismiss-button{
  2525. cursor:pointer;
  2526. margin-left:24px;
  2527. }
  2528. .components-snackbar__action.components-button{
  2529. color:#fff;
  2530. flex-shrink:0;
  2531. height:auto;
  2532. line-height:1.4;
  2533. margin-left:32px;
  2534. padding:0;
  2535. }
  2536. .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary){
  2537. background-color:transparent;
  2538. text-decoration:underline;
  2539. }
  2540. .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):focus{
  2541. box-shadow:none;
  2542. color:#fff;
  2543. outline:1px dotted #fff;
  2544. }
  2545. .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover{
  2546. color:#fff;
  2547. text-decoration:none;
  2548. }
  2549. .components-snackbar__content{
  2550. align-items:baseline;
  2551. display:flex;
  2552. justify-content:space-between;
  2553. line-height:1.4;
  2554. }
  2555. .components-snackbar-list{
  2556. box-sizing:border-box;
  2557. pointer-events:none;
  2558. position:absolute;
  2559. width:100%;
  2560. z-index:100000;
  2561. }
  2562. .components-snackbar-list__notice-container{
  2563. padding-top:8px;
  2564. position:relative;
  2565. }
  2566. .components-tab-panel__tabs{
  2567. align-items:stretch;
  2568. display:flex;
  2569. flex-direction:row;
  2570. }
  2571. .components-tab-panel__tabs[aria-orientation=vertical]{
  2572. flex-direction:column;
  2573. }
  2574. .components-tab-panel__tabs-item{
  2575. background:transparent;
  2576. border:none;
  2577. border-radius:0;
  2578. box-shadow:none;
  2579. cursor:pointer;
  2580. font-weight:500;
  2581. height:48px;
  2582. margin-left:0;
  2583. padding:3px 16px;
  2584. position:relative;
  2585. }
  2586. .components-tab-panel__tabs-item:focus:not(:disabled){
  2587. box-shadow:none;
  2588. outline:none;
  2589. position:relative;
  2590. }
  2591. .components-tab-panel__tabs-item:after{
  2592. background:var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  2593. border-radius:0;
  2594. bottom:0;
  2595. content:"";
  2596. height:calc(var(--wp-admin-border-width-focus)*0);
  2597. left:0;
  2598. pointer-events:none;
  2599. position:absolute;
  2600. right:0;
  2601. transition:all .1s linear;
  2602. }
  2603. @media (prefers-reduced-motion:reduce){
  2604. .components-tab-panel__tabs-item:after{
  2605. transition-delay:0s;
  2606. transition-duration:0s;
  2607. }
  2608. }
  2609. .components-tab-panel__tabs-item.is-active:after{
  2610. height:calc(var(--wp-admin-border-width-focus)*1);
  2611. outline:2px solid transparent;
  2612. outline-offset:-1px;
  2613. }
  2614. .components-tab-panel__tabs-item:before{
  2615. border-radius:2px;
  2616. bottom:12px;
  2617. box-shadow:0 0 0 0 transparent;
  2618. content:"";
  2619. left:12px;
  2620. pointer-events:none;
  2621. position:absolute;
  2622. right:12px;
  2623. top:12px;
  2624. transition:all .1s linear;
  2625. }
  2626. @media (prefers-reduced-motion:reduce){
  2627. .components-tab-panel__tabs-item:before{
  2628. transition-delay:0s;
  2629. transition-duration:0s;
  2630. }
  2631. }
  2632. .components-tab-panel__tabs-item:focus-visible:before{
  2633. box-shadow:0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
  2634. outline:2px solid transparent;
  2635. }
  2636. .components-text-control__input,.components-text-control__input[type=color],.components-text-control__input[type=date],.components-text-control__input[type=datetime-local],.components-text-control__input[type=datetime],.components-text-control__input[type=email],.components-text-control__input[type=month],.components-text-control__input[type=number],.components-text-control__input[type=password],.components-text-control__input[type=tel],.components-text-control__input[type=text],.components-text-control__input[type=time],.components-text-control__input[type=url],.components-text-control__input[type=week]{
  2637. border:1px solid #949494;
  2638. border-radius:2px;
  2639. box-shadow:0 0 0 transparent;
  2640. font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
  2641. font-size:16px;
  2642. line-height:normal;
  2643. padding:6px 8px;
  2644. transition:box-shadow .1s linear;
  2645. width:100%;
  2646. }
  2647. @media (prefers-reduced-motion:reduce){
  2648. .components-text-control__input,.components-text-control__input[type=color],.components-text-control__input[type=date],.components-text-control__input[type=datetime-local],.components-text-control__input[type=datetime],.components-text-control__input[type=email],.components-text-control__input[type=month],.components-text-control__input[type=number],.components-text-control__input[type=password],.components-text-control__input[type=tel],.components-text-control__input[type=text],.components-text-control__input[type=time],.components-text-control__input[type=url],.components-text-control__input[type=week]{
  2649. transition-delay:0s;
  2650. transition-duration:0s;
  2651. }
  2652. }
  2653. @media (min-width:600px){
  2654. .components-text-control__input,.components-text-control__input[type=color],.components-text-control__input[type=date],.components-text-control__input[type=datetime-local],.components-text-control__input[type=datetime],.components-text-control__input[type=email],.components-text-control__input[type=month],.components-text-control__input[type=number],.components-text-control__input[type=password],.components-text-control__input[type=tel],.components-text-control__input[type=text],.components-text-control__input[type=time],.components-text-control__input[type=url],.components-text-control__input[type=week]{
  2655. font-size:13px;
  2656. line-height:normal;
  2657. }
  2658. }
  2659. .components-text-control__input:focus,.components-text-control__input[type=color]:focus,.components-text-control__input[type=date]:focus,.components-text-control__input[type=datetime-local]:focus,.components-text-control__input[type=datetime]:focus,.components-text-control__input[type=email]:focus,.components-text-control__input[type=month]:focus,.components-text-control__input[type=number]:focus,.components-text-control__input[type=password]:focus,.components-text-control__input[type=tel]:focus,.components-text-control__input[type=text]:focus,.components-text-control__input[type=time]:focus,.components-text-control__input[type=url]:focus,.components-text-control__input[type=week]:focus{
  2660. border-color:var(--wp-admin-theme-color);
  2661. box-shadow:0 0 0 .5px var(--wp-admin-theme-color);
  2662. outline:2px solid transparent;
  2663. }
  2664. .components-text-control__input::-webkit-input-placeholder,.components-text-control__input[type=color]::-webkit-input-placeholder,.components-text-control__input[type=date]::-webkit-input-placeholder,.components-text-control__input[type=datetime-local]::-webkit-input-placeholder,.components-text-control__input[type=datetime]::-webkit-input-placeholder,.components-text-control__input[type=email]::-webkit-input-placeholder,.components-text-control__input[type=month]::-webkit-input-placeholder,.components-text-control__input[type=number]::-webkit-input-placeholder,.components-text-control__input[type=password]::-webkit-input-placeholder,.components-text-control__input[type=tel]::-webkit-input-placeholder,.components-text-control__input[type=text]::-webkit-input-placeholder,.components-text-control__input[type=time]::-webkit-input-placeholder,.components-text-control__input[type=url]::-webkit-input-placeholder,.components-text-control__input[type=week]::-webkit-input-placeholder{
  2665. color:rgba(30,30,30,.62);
  2666. }
  2667. .components-text-control__input::-moz-placeholder,.components-text-control__input[type=color]::-moz-placeholder,.components-text-control__input[type=date]::-moz-placeholder,.components-text-control__input[type=datetime-local]::-moz-placeholder,.components-text-control__input[type=datetime]::-moz-placeholder,.components-text-control__input[type=email]::-moz-placeholder,.components-text-control__input[type=month]::-moz-placeholder,.components-text-control__input[type=number]::-moz-placeholder,.components-text-control__input[type=password]::-moz-placeholder,.components-text-control__input[type=tel]::-moz-placeholder,.components-text-control__input[type=text]::-moz-placeholder,.components-text-control__input[type=time]::-moz-placeholder,.components-text-control__input[type=url]::-moz-placeholder,.components-text-control__input[type=week]::-moz-placeholder{
  2668. color:rgba(30,30,30,.62);
  2669. opacity:1;
  2670. }
  2671. .components-text-control__input:-ms-input-placeholder,.components-text-control__input[type=color]:-ms-input-placeholder,.components-text-control__input[type=date]:-ms-input-placeholder,.components-text-control__input[type=datetime-local]:-ms-input-placeholder,.components-text-control__input[type=datetime]:-ms-input-placeholder,.components-text-control__input[type=email]:-ms-input-placeholder,.components-text-control__input[type=month]:-ms-input-placeholder,.components-text-control__input[type=number]:-ms-input-placeholder,.components-text-control__input[type=password]:-ms-input-placeholder,.components-text-control__input[type=tel]:-ms-input-placeholder,.components-text-control__input[type=text]:-ms-input-placeholder,.components-text-control__input[type=time]:-ms-input-placeholder,.components-text-control__input[type=url]:-ms-input-placeholder,.components-text-control__input[type=week]:-ms-input-placeholder{
  2672. color:rgba(30,30,30,.62);
  2673. }
  2674. .components-tip{
  2675. color:#757575;
  2676. display:flex;
  2677. }
  2678. .components-tip svg{
  2679. fill:#f0b849;
  2680. align-self:center;
  2681. flex-shrink:0;
  2682. margin-right:16px;
  2683. }
  2684. .components-tip p{
  2685. margin:0;
  2686. }
  2687. .components-accessible-toolbar{
  2688. border:1px solid #1e1e1e;
  2689. border-radius:2px;
  2690. display:inline-flex;
  2691. flex-shrink:0;
  2692. }
  2693. .components-accessible-toolbar>.components-toolbar-group:last-child{
  2694. border-right:none;
  2695. }
  2696. .components-accessible-toolbar .components-button,.components-toolbar .components-button{
  2697. height:48px;
  2698. padding-left:16px;
  2699. padding-right:16px;
  2700. position:relative;
  2701. z-index:1;
  2702. }
  2703. .components-accessible-toolbar .components-button:focus:not(:disabled),.components-toolbar .components-button:focus:not(:disabled){
  2704. box-shadow:none;
  2705. outline:none;
  2706. }
  2707. .components-accessible-toolbar .components-button:before,.components-toolbar .components-button:before{
  2708. animation:components-button__appear-animation .1s ease;
  2709. animation-fill-mode:forwards;
  2710. border-radius:2px;
  2711. content:"";
  2712. display:block;
  2713. height:32px;
  2714. left:8px;
  2715. position:absolute;
  2716. right:8px;
  2717. z-index:-1;
  2718. }
  2719. @media (prefers-reduced-motion:reduce){
  2720. .components-accessible-toolbar .components-button:before,.components-toolbar .components-button:before{
  2721. animation-delay:0s;
  2722. animation-duration:1ms;
  2723. }
  2724. }
  2725. .components-accessible-toolbar .components-button svg,.components-toolbar .components-button svg{
  2726. margin-left:auto;
  2727. margin-right:auto;
  2728. position:relative;
  2729. }
  2730. .components-accessible-toolbar .components-button.is-pressed,.components-accessible-toolbar .components-button.is-pressed:hover,.components-toolbar .components-button.is-pressed,.components-toolbar .components-button.is-pressed:hover{
  2731. background:transparent;
  2732. }
  2733. .components-accessible-toolbar .components-button.is-pressed:before,.components-toolbar .components-button.is-pressed:before{
  2734. background:#1e1e1e;
  2735. }
  2736. .components-accessible-toolbar .components-button:focus:before,.components-toolbar .components-button:focus:before{
  2737. box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff;
  2738. outline:2px solid transparent;
  2739. }
  2740. .components-accessible-toolbar .components-button.has-icon.has-icon,.components-toolbar .components-button.has-icon.has-icon{
  2741. min-width:48px;
  2742. padding-left:12px;
  2743. padding-right:12px;
  2744. }
  2745. .components-accessible-toolbar .components-button.components-tab-button,.components-toolbar .components-button.components-tab-button{
  2746. font-weight:500;
  2747. }
  2748. .components-accessible-toolbar .components-button.components-tab-button span,.components-toolbar .components-button.components-tab-button span{
  2749. display:inline-block;
  2750. padding-left:0;
  2751. padding-right:0;
  2752. position:relative;
  2753. }
  2754. @keyframes components-button__appear-animation{
  2755. 0%{
  2756. transform:scaleY(0);
  2757. }
  2758. to{
  2759. transform:scaleY(1);
  2760. }
  2761. }
  2762. .components-toolbar__control.components-button{
  2763. position:relative;
  2764. }
  2765. .components-toolbar__control.components-button[data-subscript] svg{
  2766. padding:5px 10px 5px 0;
  2767. }
  2768. .components-toolbar__control.components-button[data-subscript]:after{
  2769. bottom:10px;
  2770. content:attr(data-subscript);
  2771. font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
  2772. font-size:13px;
  2773. font-weight:600;
  2774. line-height:12px;
  2775. position:absolute;
  2776. right:8px;
  2777. }
  2778. .components-toolbar__control.components-button:active:before{
  2779. display:none;
  2780. }
  2781. .components-toolbar__control.components-button:not(:disabled).is-pressed[data-subscript]:after{
  2782. color:#fff;
  2783. }
  2784. .components-toolbar-group{
  2785. background-color:#fff;
  2786. border-right:1px solid #1e1e1e;
  2787. display:inline-flex;
  2788. flex-shrink:0;
  2789. flex-wrap:wrap;
  2790. line-height:0;
  2791. min-height:48px;
  2792. padding-left:6px;
  2793. padding-right:6px;
  2794. }
  2795. .components-toolbar-group .components-toolbar-group.components-toolbar-group{
  2796. border-width:0;
  2797. margin:0;
  2798. }
  2799. .components-toolbar-group .components-button.components-button,.components-toolbar-group .components-button.has-icon.has-icon{
  2800. min-width:36px;
  2801. padding-left:6px;
  2802. padding-right:6px;
  2803. }
  2804. .components-toolbar-group .components-button.components-button svg,.components-toolbar-group .components-button.has-icon.has-icon svg{
  2805. min-width:24px;
  2806. }
  2807. .components-toolbar-group .components-button.components-button:before,.components-toolbar-group .components-button.has-icon.has-icon:before{
  2808. left:2px;
  2809. right:2px;
  2810. }
  2811. .components-toolbar{
  2812. background-color:#fff;
  2813. border:1px solid #1e1e1e;
  2814. display:inline-flex;
  2815. flex-shrink:0;
  2816. flex-wrap:wrap;
  2817. margin:0;
  2818. min-height:48px;
  2819. }
  2820. .components-toolbar .components-toolbar.components-toolbar{
  2821. border-width:0;
  2822. margin:0;
  2823. }
  2824. div.components-toolbar>div{
  2825. display:block;
  2826. margin:0;
  2827. }
  2828. @supports (position:sticky){
  2829. div.components-toolbar>div{
  2830. display:flex;
  2831. }
  2832. }
  2833. div.components-toolbar>div+div.has-left-divider{
  2834. margin-left:6px;
  2835. overflow:visible;
  2836. position:relative;
  2837. }
  2838. div.components-toolbar>div+div.has-left-divider:before{
  2839. background-color:#ddd;
  2840. box-sizing:content-box;
  2841. content:"";
  2842. display:inline-block;
  2843. height:20px;
  2844. left:-3px;
  2845. position:absolute;
  2846. top:8px;
  2847. width:1px;
  2848. }
  2849. .components-tooltip{
  2850. background:#000;
  2851. border-radius:2px;
  2852. color:#f0f0f0;
  2853. font-size:12px;
  2854. line-height:1.4;
  2855. padding:4px 8px;
  2856. text-align:center;
  2857. z-index:1000002;
  2858. }
  2859. .components-tooltip__shortcut{
  2860. margin-left:8px;
  2861. }