No Description

style.css 142KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950395139523953395439553956395739583959396039613962396339643965396639673968396939703971397239733974397539763977397839793980398139823983398439853986398739883989399039913992399339943995399639973998399940004001400240034004400540064007400840094010401140124013401440154016401740184019402040214022402340244025402640274028402940304031403240334034403540364037403840394040404140424043404440454046404740484049405040514052405340544055405640574058405940604061406240634064406540664067406840694070407140724073407440754076407740784079408040814082408340844085408640874088408940904091409240934094409540964097409840994100410141024103410441054106410741084109411041114112411341144115411641174118411941204121412241234124412541264127412841294130413141324133413441354136413741384139414041414142414341444145414641474148414941504151415241534154415541564157415841594160416141624163416441654166416741684169417041714172417341744175417641774178417941804181418241834184418541864187418841894190419141924193419441954196419741984199420042014202420342044205420642074208420942104211421242134214421542164217421842194220422142224223422442254226422742284229423042314232423342344235423642374238423942404241424242434244424542464247424842494250425142524253425442554256425742584259426042614262426342644265426642674268426942704271427242734274427542764277427842794280428142824283428442854286428742884289429042914292429342944295429642974298429943004301430243034304430543064307430843094310431143124313431443154316431743184319432043214322432343244325432643274328432943304331433243334334433543364337433843394340434143424343434443454346434743484349435043514352435343544355435643574358435943604361436243634364436543664367436843694370437143724373437443754376437743784379438043814382438343844385438643874388438943904391439243934394439543964397439843994400440144024403440444054406440744084409441044114412441344144415441644174418441944204421442244234424442544264427442844294430443144324433443444354436443744384439444044414442444344444445444644474448444944504451445244534454445544564457445844594460446144624463446444654466446744684469447044714472447344744475447644774478447944804481448244834484448544864487448844894490449144924493449444954496449744984499450045014502450345044505450645074508450945104511451245134514451545164517451845194520452145224523452445254526452745284529453045314532453345344535453645374538453945404541454245434544454545464547454845494550455145524553455445554556455745584559456045614562456345644565456645674568456945704571457245734574457545764577457845794580458145824583458445854586458745884589459045914592459345944595459645974598459946004601460246034604460546064607460846094610461146124613461446154616461746184619462046214622462346244625462646274628462946304631463246334634463546364637463846394640464146424643464446454646464746484649465046514652465346544655465646574658465946604661466246634664466546664667466846694670467146724673467446754676467746784679468046814682468346844685468646874688468946904691469246934694469546964697469846994700470147024703470447054706470747084709471047114712471347144715471647174718471947204721472247234724472547264727472847294730473147324733473447354736473747384739474047414742474347444745474647474748474947504751475247534754475547564757475847594760476147624763476447654766476747684769477047714772477347744775477647774778477947804781478247834784478547864787478847894790479147924793479447954796479747984799480048014802480348044805480648074808480948104811481248134814481548164817481848194820482148224823482448254826482748284829483048314832483348344835483648374838483948404841484248434844484548464847484848494850485148524853485448554856485748584859486048614862486348644865486648674868486948704871487248734874487548764877487848794880488148824883488448854886488748884889489048914892489348944895489648974898489949004901490249034904490549064907490849094910491149124913491449154916491749184919492049214922492349244925492649274928492949304931493249334934493549364937493849394940494149424943494449454946494749484949495049514952495349544955495649574958495949604961496249634964496549664967496849694970497149724973497449754976497749784979498049814982498349844985498649874988498949904991499249934994499549964997499849995000500150025003500450055006500750085009501050115012501350145015501650175018501950205021502250235024502550265027502850295030503150325033503450355036503750385039504050415042504350445045504650475048504950505051505250535054505550565057505850595060506150625063506450655066506750685069507050715072
  1. @charset "UTF-8";
  2. /**
  3. * Colors
  4. */
  5. /**
  6. * Breakpoints & Media Queries
  7. */
  8. /**
  9. * SCSS Variables.
  10. *
  11. * Please use variables from this sheet to ensure consistency across the UI.
  12. * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  13. * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  14. */
  15. /**
  16. * Colors
  17. */
  18. /**
  19. * Fonts & basic variables.
  20. */
  21. /**
  22. * Grid System.
  23. * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  24. */
  25. /**
  26. * Dimensions.
  27. */
  28. /**
  29. * Shadows.
  30. */
  31. /**
  32. * Editor widths.
  33. */
  34. /**
  35. * Block & Editor UI.
  36. */
  37. /**
  38. * Block paddings.
  39. */
  40. /**
  41. * React Native specific.
  42. * These variables do not appear to be used anywhere else.
  43. */
  44. /**
  45. * Breakpoint mixins
  46. */
  47. /**
  48. * Long content fade mixin
  49. *
  50. * Creates a fading overlay to signify that the content is longer
  51. * than the space allows.
  52. */
  53. /**
  54. * Focus styles.
  55. */
  56. /**
  57. * Applies editor left position to the selector passed as argument
  58. */
  59. /**
  60. * Styles that are reused verbatim in a few places
  61. */
  62. /**
  63. * Allows users to opt-out of animations via OS-level preferences.
  64. */
  65. /**
  66. * Reset default styles for JavaScript UI based pages.
  67. * This is a WP-admin agnostic reset
  68. */
  69. /**
  70. * Reset the WP Admin page styles for Gutenberg-like pages.
  71. */
  72. :root {
  73. --wp-admin-theme-color: #007cba;
  74. --wp-admin-theme-color-darker-10: #006ba1;
  75. --wp-admin-theme-color-darker-20: #005a87;
  76. --wp-admin-border-width-focus: 2px;
  77. }
  78. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  79. :root {
  80. --wp-admin-border-width-focus: 1.5px;
  81. }
  82. }
  83. .components-animate__appear {
  84. animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
  85. animation-fill-mode: forwards;
  86. }
  87. @media (prefers-reduced-motion: reduce) {
  88. .components-animate__appear {
  89. animation-duration: 1ms;
  90. animation-delay: 0s;
  91. }
  92. }
  93. .components-animate__appear.is-from-top, .components-animate__appear.is-from-top.is-from-left {
  94. transform-origin: top left;
  95. }
  96. .components-animate__appear.is-from-top.is-from-right {
  97. transform-origin: top right;
  98. }
  99. .components-animate__appear.is-from-bottom, .components-animate__appear.is-from-bottom.is-from-left {
  100. transform-origin: bottom left;
  101. }
  102. .components-animate__appear.is-from-bottom.is-from-right {
  103. transform-origin: bottom right;
  104. }
  105. @keyframes components-animate__appear-animation {
  106. from {
  107. transform: translateY(-2em) scaleY(0) scaleX(0);
  108. }
  109. to {
  110. transform: translateY(0%) scaleY(1) scaleX(1);
  111. }
  112. }
  113. .components-animate__slide-in {
  114. animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1);
  115. animation-fill-mode: forwards;
  116. }
  117. @media (prefers-reduced-motion: reduce) {
  118. .components-animate__slide-in {
  119. animation-duration: 1ms;
  120. animation-delay: 0s;
  121. }
  122. }
  123. .components-animate__slide-in.is-from-left {
  124. transform: translateX(100%);
  125. }
  126. .components-animate__slide-in.is-from-right {
  127. transform: translateX(-100%);
  128. }
  129. @keyframes components-animate__slide-in-animation {
  130. 100% {
  131. transform: translateX(0%);
  132. }
  133. }
  134. .components-animate__loading {
  135. animation: components-animate__loading 1.6s ease-in-out infinite;
  136. }
  137. @keyframes components-animate__loading {
  138. 0% {
  139. opacity: 0.5;
  140. }
  141. 50% {
  142. opacity: 1;
  143. }
  144. 100% {
  145. opacity: 0.5;
  146. }
  147. }
  148. .components-autocomplete__popover .components-popover__content > div {
  149. padding: 16px;
  150. min-width: 220px;
  151. }
  152. .components-autocomplete__result.components-button {
  153. display: flex;
  154. height: auto;
  155. min-height: 36px;
  156. text-align: left;
  157. width: 100%;
  158. }
  159. .components-autocomplete__result.components-button.is-selected {
  160. box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
  161. }
  162. .components-button-group {
  163. display: inline-block;
  164. }
  165. .components-button-group .components-button {
  166. border-radius: 0;
  167. display: inline-flex;
  168. color: #1e1e1e;
  169. box-shadow: inset 0 0 0 1px #1e1e1e;
  170. }
  171. .components-button-group .components-button + .components-button {
  172. margin-left: -1px;
  173. }
  174. .components-button-group .components-button:first-child {
  175. border-radius: 2px 0 0 2px;
  176. }
  177. .components-button-group .components-button:last-child {
  178. border-radius: 0 2px 2px 0;
  179. }
  180. .components-button-group .components-button:focus, .components-button-group .components-button.is-primary {
  181. position: relative;
  182. z-index: 1;
  183. }
  184. .components-button-group .components-button.is-primary {
  185. box-shadow: inset 0 0 0 1px #1e1e1e;
  186. }
  187. .components-button {
  188. display: inline-flex;
  189. text-decoration: none;
  190. font-weight: normal;
  191. font-size: 13px;
  192. margin: 0;
  193. border: 0;
  194. cursor: pointer;
  195. -webkit-appearance: none;
  196. background: none;
  197. transition: box-shadow 0.1s linear;
  198. height: 36px;
  199. align-items: center;
  200. box-sizing: border-box;
  201. padding: 6px 12px;
  202. border-radius: 2px;
  203. color: #1e1e1e;
  204. /**
  205. * Primary button style.
  206. */
  207. /**
  208. * Secondary and tertiary buttons.
  209. */
  210. /**
  211. * Secondary button style.
  212. */
  213. /**
  214. * Tertiary buttons.
  215. */
  216. /**
  217. * Destructive buttons.
  218. */
  219. /**
  220. * Link buttons.
  221. */
  222. }
  223. @media (prefers-reduced-motion: reduce) {
  224. .components-button {
  225. transition-duration: 0s;
  226. transition-delay: 0s;
  227. }
  228. }
  229. .components-button[aria-expanded=true], .components-button:hover {
  230. color: var(--wp-admin-theme-color);
  231. }
  232. .components-button[aria-disabled=true]:hover {
  233. color: initial;
  234. }
  235. .components-button:focus:not(:disabled) {
  236. box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  237. outline: 3px solid transparent;
  238. }
  239. .components-button.is-primary {
  240. white-space: nowrap;
  241. background: var(--wp-admin-theme-color);
  242. color: #fff;
  243. text-decoration: none;
  244. text-shadow: none;
  245. outline: 1px solid transparent;
  246. }
  247. .components-button.is-primary:hover:not(:disabled) {
  248. background: var(--wp-admin-theme-color-darker-10);
  249. color: #fff;
  250. }
  251. .components-button.is-primary:active:not(:disabled) {
  252. background: var(--wp-admin-theme-color-darker-20);
  253. border-color: var(--wp-admin-theme-color-darker-20);
  254. color: #fff;
  255. }
  256. .components-button.is-primary:focus:not(:disabled) {
  257. box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  258. }
  259. .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]:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled {
  260. color: rgba(255, 255, 255, 0.4);
  261. background: var(--wp-admin-theme-color);
  262. border-color: var(--wp-admin-theme-color);
  263. opacity: 1;
  264. outline: none;
  265. }
  266. .components-button.is-primary:disabled:focus:enabled, .components-button.is-primary:disabled:active:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:focus:enabled, .components-button.is-primary[aria-disabled=true]:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled:focus:enabled {
  267. box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color);
  268. }
  269. .components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] {
  270. color: #fff;
  271. background-size: 100px 100%;
  272. /* stylelint-disable */
  273. background-image: linear-gradient(-45deg, var(--wp-admin-theme-color) 33%, var(--wp-admin-theme-color-darker-20) 33%, var(--wp-admin-theme-color-darker-20) 70%, var(--wp-admin-theme-color) 70%);
  274. /* stylelint-enable */
  275. border-color: var(--wp-admin-theme-color);
  276. }
  277. .components-button.is-secondary, .components-button.is-tertiary {
  278. outline: 1px solid transparent;
  279. }
  280. .components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) {
  281. background: #ddd;
  282. color: var(--wp-admin-theme-color-darker-10);
  283. box-shadow: none;
  284. }
  285. .components-button.is-secondary:hover:not(:disabled), .components-button.is-tertiary:hover:not(:disabled) {
  286. color: var(--wp-admin-theme-color-darker-10);
  287. box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color-darker-10);
  288. }
  289. .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 {
  290. color: #828282;
  291. background: #eaeaea;
  292. transform: none;
  293. opacity: 1;
  294. box-shadow: none;
  295. outline: none;
  296. }
  297. .components-button.is-secondary {
  298. box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
  299. outline: 1px solid transparent;
  300. white-space: nowrap;
  301. color: var(--wp-admin-theme-color);
  302. background: transparent;
  303. }
  304. .components-button.is-tertiary {
  305. white-space: nowrap;
  306. color: var(--wp-admin-theme-color);
  307. background: transparent;
  308. padding: 6px;
  309. }
  310. .components-button.is-tertiary .dashicon {
  311. display: inline-block;
  312. flex: 0 0 auto;
  313. }
  314. .components-button.is-destructive {
  315. color: #cc1818;
  316. box-shadow: inset 0 0 0 1px #cc1818;
  317. }
  318. .components-button.is-destructive:hover:not(:disabled) {
  319. color: #710d0d;
  320. box-shadow: inset 0 0 0 1px #710d0d;
  321. }
  322. .components-button.is-destructive:focus:not(:disabled) {
  323. color: var(--wp-admin-theme-color);
  324. }
  325. .components-button.is-destructive:active:not(:disabled) {
  326. background: #ccc;
  327. }
  328. .components-button.is-destructive.is-primary {
  329. color: #fff;
  330. background: #cc1818;
  331. box-shadow: inset 0 0 0 1px #cc1818;
  332. }
  333. .components-button.is-destructive.is-primary:hover:not(:disabled) {
  334. color: #fff;
  335. background: #710d0d;
  336. box-shadow: inset 0 0 0 1px #710d0d;
  337. }
  338. .components-button.is-link {
  339. margin: 0;
  340. padding: 0;
  341. box-shadow: none;
  342. border: 0;
  343. border-radius: 0;
  344. background: none;
  345. outline: none;
  346. text-align: left;
  347. color: var(--wp-admin-theme-color);
  348. text-decoration: underline;
  349. transition-property: border, background, color;
  350. transition-duration: 0.05s;
  351. transition-timing-function: ease-in-out;
  352. height: auto;
  353. }
  354. @media (prefers-reduced-motion: reduce) {
  355. .components-button.is-link {
  356. transition-duration: 0s;
  357. transition-delay: 0s;
  358. }
  359. }
  360. .components-button.is-link:focus {
  361. border-radius: 2px;
  362. }
  363. .components-button.is-link.is-destructive {
  364. color: #cc1818;
  365. }
  366. .components-button.is-link.is-destructive:active:not(:disabled), .components-button.is-link.is-destructive:hover:not(:disabled) {
  367. color: #710d0d;
  368. background: none;
  369. }
  370. .components-button.is-link.is-destructive:focus:not(:disabled) {
  371. color: var(--wp-admin-theme-color);
  372. }
  373. .components-button:not([aria-disabled=true]):active {
  374. color: inherit;
  375. }
  376. .components-button:disabled, .components-button[aria-disabled=true] {
  377. cursor: default;
  378. opacity: 0.3;
  379. }
  380. .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] {
  381. animation: components-button__busy-animation 2500ms infinite linear;
  382. opacity: 1;
  383. background-size: 100px 100%;
  384. /* stylelint-disable */
  385. background-image: linear-gradient(-45deg, #fafafa 33%, #e0e0e0 33%, #e0e0e0 70%, #fafafa 70%);
  386. /* stylelint-enable */
  387. }
  388. .components-button.is-small {
  389. height: 24px;
  390. line-height: 22px;
  391. padding: 0 8px;
  392. font-size: 11px;
  393. }
  394. .components-button.is-small.has-icon:not(.has-text) {
  395. padding: 0 8px;
  396. width: 24px;
  397. }
  398. .components-button.has-icon {
  399. padding: 6px;
  400. min-width: 36px;
  401. justify-content: center;
  402. }
  403. .components-button.has-icon .dashicon {
  404. display: inline-block;
  405. flex: 0 0 auto;
  406. margin-left: 2px;
  407. margin-right: 2px;
  408. }
  409. .components-button.has-icon.has-text {
  410. justify-content: left;
  411. }
  412. .components-button.has-icon.has-text svg {
  413. margin-right: 8px;
  414. }
  415. .components-button.has-icon.has-text .dashicon {
  416. margin-right: 10px;
  417. }
  418. .components-button.is-pressed {
  419. color: #fff;
  420. background: #1e1e1e;
  421. }
  422. .components-button.is-pressed:focus:not(:disabled) {
  423. box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  424. outline: 2px solid transparent;
  425. }
  426. .components-button.is-pressed:hover:not(:disabled) {
  427. color: #fff;
  428. background: #1e1e1e;
  429. }
  430. .components-button svg {
  431. fill: currentColor;
  432. outline: none;
  433. }
  434. .components-button .components-visually-hidden {
  435. height: auto;
  436. }
  437. @keyframes components-button__busy-animation {
  438. 0% {
  439. background-position: 200px 0;
  440. }
  441. }
  442. .components-checkbox-control__input[type=checkbox] {
  443. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  444. padding: 6px 8px;
  445. box-shadow: 0 0 0 transparent;
  446. transition: box-shadow 0.1s linear;
  447. border-radius: 2px;
  448. border: 1px solid #757575;
  449. /* Fonts smaller than 16px causes mobile safari to zoom. */
  450. font-size: 16px;
  451. /* Override core line-height. To be reviewed. */
  452. line-height: normal;
  453. border: 1px solid #1e1e1e;
  454. margin-right: 12px;
  455. transition: none;
  456. border-radius: 2px;
  457. background: #fff;
  458. color: #1e1e1e;
  459. clear: none;
  460. cursor: pointer;
  461. display: inline-block;
  462. line-height: 0;
  463. margin: 0 4px 0 0;
  464. outline: 0;
  465. padding: 0 !important;
  466. text-align: center;
  467. vertical-align: top;
  468. width: 24px;
  469. height: 24px;
  470. -webkit-appearance: none;
  471. appearance: none;
  472. transition: 0.1s border-color ease-in-out;
  473. }
  474. @media (prefers-reduced-motion: reduce) {
  475. .components-checkbox-control__input[type=checkbox] {
  476. transition-duration: 0s;
  477. transition-delay: 0s;
  478. }
  479. }
  480. @media (min-width: 600px) {
  481. .components-checkbox-control__input[type=checkbox] {
  482. font-size: 13px;
  483. /* Override core line-height. To be reviewed. */
  484. line-height: normal;
  485. }
  486. }
  487. .components-checkbox-control__input[type=checkbox]:focus {
  488. border-color: var(--wp-admin-theme-color);
  489. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  490. outline: 2px solid transparent;
  491. }
  492. .components-checkbox-control__input[type=checkbox]::-webkit-input-placeholder {
  493. color: rgba(30, 30, 30, 0.62);
  494. }
  495. .components-checkbox-control__input[type=checkbox]::-moz-placeholder {
  496. opacity: 1;
  497. color: rgba(30, 30, 30, 0.62);
  498. }
  499. .components-checkbox-control__input[type=checkbox]:-ms-input-placeholder {
  500. color: rgba(30, 30, 30, 0.62);
  501. }
  502. .components-checkbox-control__input[type=checkbox]:focus {
  503. box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
  504. outline: 2px solid transparent;
  505. }
  506. .components-checkbox-control__input[type=checkbox]:checked {
  507. background: var(--wp-admin-theme-color);
  508. border-color: var(--wp-admin-theme-color);
  509. }
  510. .components-checkbox-control__input[type=checkbox]:checked::-ms-check {
  511. opacity: 0;
  512. }
  513. .components-checkbox-control__input[type=checkbox]:checked::before, .components-checkbox-control__input[type=checkbox][aria-checked=mixed]::before {
  514. margin: -3px -5px;
  515. color: #fff;
  516. }
  517. @media (min-width: 782px) {
  518. .components-checkbox-control__input[type=checkbox]:checked::before, .components-checkbox-control__input[type=checkbox][aria-checked=mixed]::before {
  519. margin: -4px 0 0 -5px;
  520. }
  521. }
  522. .components-checkbox-control__input[type=checkbox][aria-checked=mixed] {
  523. background: var(--wp-admin-theme-color);
  524. border-color: var(--wp-admin-theme-color);
  525. }
  526. .components-checkbox-control__input[type=checkbox][aria-checked=mixed]::before {
  527. content: "";
  528. float: left;
  529. display: inline-block;
  530. vertical-align: middle;
  531. width: 16px;
  532. /* stylelint-disable */
  533. font: normal 30px/1 dashicons;
  534. /* stylelint-enable */
  535. speak: none;
  536. -webkit-font-smoothing: antialiased;
  537. -moz-osx-font-smoothing: grayscale;
  538. }
  539. @media (min-width: 782px) {
  540. .components-checkbox-control__input[type=checkbox][aria-checked=mixed]::before {
  541. float: none;
  542. font-size: 21px;
  543. }
  544. }
  545. @media (min-width: 600px) {
  546. .components-checkbox-control__input[type=checkbox] {
  547. height: 20px;
  548. width: 20px;
  549. }
  550. }
  551. @media (prefers-reduced-motion: reduce) {
  552. .components-checkbox-control__input[type=checkbox] {
  553. transition-duration: 0s;
  554. transition-delay: 0s;
  555. }
  556. }
  557. .components-checkbox-control__input[type=checkbox]:focus {
  558. box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
  559. outline: 2px solid transparent;
  560. }
  561. .components-checkbox-control__input[type=checkbox]:checked {
  562. background: var(--wp-admin-theme-color);
  563. border-color: var(--wp-admin-theme-color);
  564. }
  565. .components-checkbox-control__input[type=checkbox]:checked::-ms-check {
  566. opacity: 0;
  567. }
  568. .components-checkbox-control__input[type=checkbox]:checked::before {
  569. content: none;
  570. }
  571. .components-checkbox-control__input-container {
  572. position: relative;
  573. display: inline-block;
  574. margin-right: 12px;
  575. vertical-align: middle;
  576. width: 24px;
  577. height: 24px;
  578. }
  579. @media (min-width: 600px) {
  580. .components-checkbox-control__input-container {
  581. width: 20px;
  582. height: 20px;
  583. }
  584. }
  585. svg.components-checkbox-control__checked {
  586. fill: #fff;
  587. cursor: pointer;
  588. position: absolute;
  589. left: 0;
  590. top: 0;
  591. width: 24px;
  592. height: 24px;
  593. -webkit-user-select: none;
  594. user-select: none;
  595. pointer-events: none;
  596. }
  597. @media (min-width: 600px) {
  598. svg.components-checkbox-control__checked {
  599. left: -2px;
  600. top: -2px;
  601. }
  602. }
  603. .components-circular-option-picker {
  604. display: inline-block;
  605. width: 100%;
  606. min-width: 188px;
  607. }
  608. .components-circular-option-picker .components-circular-option-picker__custom-clear-wrapper {
  609. display: flex;
  610. justify-content: flex-end;
  611. }
  612. .components-circular-option-picker .components-circular-option-picker__swatches {
  613. margin-right: -12px;
  614. }
  615. .components-circular-option-picker__option-wrapper {
  616. display: inline-block;
  617. height: 28px;
  618. width: 28px;
  619. margin-right: 12px;
  620. margin-bottom: 12px;
  621. vertical-align: top;
  622. transform: scale(1);
  623. transition: 100ms transform ease;
  624. }
  625. @media (prefers-reduced-motion: reduce) {
  626. .components-circular-option-picker__option-wrapper {
  627. transition-duration: 0s;
  628. transition-delay: 0s;
  629. }
  630. }
  631. .components-circular-option-picker__option-wrapper:hover {
  632. transform: scale(1.2);
  633. }
  634. .components-circular-option-picker__option-wrapper > div {
  635. height: 100%;
  636. width: 100%;
  637. }
  638. .components-circular-option-picker__option-wrapper::before {
  639. content: "";
  640. position: absolute;
  641. top: 1px;
  642. left: 1px;
  643. bottom: 1px;
  644. right: 1px;
  645. border-radius: 50%;
  646. z-index: -1;
  647. /* stylelint-disable-next-line function-url-quotes */
  648. background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-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" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-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" fill="%23555D65"/%3E%3C/svg%3E');
  649. }
  650. .components-circular-option-picker__option {
  651. display: inline-block;
  652. vertical-align: top;
  653. height: 100%;
  654. width: 100%;
  655. border: none;
  656. border-radius: 50%;
  657. background: transparent;
  658. box-shadow: inset 0 0 0 14px;
  659. transition: 100ms box-shadow ease;
  660. cursor: pointer;
  661. }
  662. @media (prefers-reduced-motion: reduce) {
  663. .components-circular-option-picker__option {
  664. transition-duration: 0s;
  665. transition-delay: 0s;
  666. }
  667. }
  668. .components-circular-option-picker__option:hover {
  669. box-shadow: inset 0 0 0 14px !important;
  670. }
  671. .components-circular-option-picker__option.is-pressed {
  672. box-shadow: inset 0 0 0 4px;
  673. position: relative;
  674. z-index: 1;
  675. overflow: visible;
  676. }
  677. .components-circular-option-picker__option.is-pressed + svg {
  678. position: absolute;
  679. left: 2px;
  680. top: 2px;
  681. border-radius: 50%;
  682. z-index: 2;
  683. pointer-events: none;
  684. }
  685. .components-circular-option-picker__option::after {
  686. content: "";
  687. position: absolute;
  688. top: -1px;
  689. left: -1px;
  690. bottom: -1px;
  691. right: -1px;
  692. border-radius: 50%;
  693. box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  694. border: 1px solid transparent;
  695. }
  696. .components-circular-option-picker__option:focus::after {
  697. content: "";
  698. border: 2px solid #757575;
  699. width: 32px;
  700. height: 32px;
  701. position: absolute;
  702. top: -2px;
  703. left: -2px;
  704. border-radius: 50%;
  705. box-shadow: inset 0 0 0 2px #fff;
  706. }
  707. .components-circular-option-picker__option.components-button:focus {
  708. background-color: transparent;
  709. box-shadow: inset 0 0 0 14px;
  710. outline: none;
  711. }
  712. .components-circular-option-picker__button-action .components-circular-option-picker__option {
  713. color: #fff;
  714. background: #fff;
  715. }
  716. .components-circular-option-picker__dropdown-link-action {
  717. margin-right: 16px;
  718. }
  719. .components-circular-option-picker__dropdown-link-action .components-button {
  720. line-height: 22px;
  721. }
  722. .components-color-edit__color-option-main-area {
  723. display: flex;
  724. align-items: center;
  725. }
  726. .components-color-edit__color-option-main-area div.components-circular-option-picker__option-wrapper {
  727. display: block;
  728. margin: 8px;
  729. }
  730. .components-color-edit__color-option.is-hover {
  731. background: #e0e0e0;
  732. }
  733. .components-color-edit__cancel-button {
  734. float: right;
  735. }
  736. .components-color-edit__color-option-color-name {
  737. width: 100%;
  738. }
  739. .components-color-edit__label-and-insert-container {
  740. display: flex;
  741. align-items: center;
  742. justify-content: space-between;
  743. }
  744. .components-color-edit__insert-button {
  745. margin-top: -8px;
  746. }
  747. .components-color-edit__hidden-control {
  748. position: relative;
  749. left: -9999px;
  750. }
  751. .components-color-edit__color-option-color-name-input .components-base-control__field {
  752. margin-bottom: 0;
  753. margin-right: 8px;
  754. }
  755. .components-color-edit__slug-input {
  756. margin-left: 8px;
  757. }
  758. .components-color-edit__reset-button {
  759. float: right;
  760. }
  761. .component-color-indicator {
  762. width: 25px;
  763. height: 16px;
  764. margin-left: 0.8rem;
  765. border: 1px solid #dadada;
  766. display: inline-block;
  767. }
  768. .component-color-indicator + .component-color-indicator {
  769. margin-left: 0.5rem;
  770. }
  771. /**
  772. * Parts of this source were derived and modified from react-color,
  773. * released under the MIT license.
  774. *
  775. * https://github.com/casesandberg/react-color/
  776. *
  777. * Copyright (c) 2015 Case Sandberg
  778. *
  779. * Permission is hereby granted, free of charge, to any person obtaining a copy
  780. * of this software and associated documentation files (the "Software"), to deal
  781. * in the Software without restriction, including without limitation the rights
  782. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  783. * copies of the Software, and to permit persons to whom the Software is
  784. * furnished to do so, subject to the following conditions:
  785. *
  786. * The above copyright notice and this permission notice shall be included in
  787. * all copies or substantial portions of the Software.
  788. *
  789. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  790. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  791. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  792. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  793. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  794. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  795. * THE SOFTWARE.
  796. */
  797. .components-color-picker {
  798. width: 100%;
  799. }
  800. .components-color-picker * {
  801. box-sizing: border-box;
  802. }
  803. .components-color-picker__saturation {
  804. width: 100%;
  805. padding-bottom: 55%;
  806. position: relative;
  807. }
  808. .components-color-picker__body {
  809. padding: 16px 16px 12px;
  810. }
  811. .components-color-picker__controls {
  812. display: flex;
  813. }
  814. .components-color-picker__saturation-pointer,
  815. .components-color-picker__hue-pointer,
  816. .components-color-picker__alpha-pointer {
  817. padding: 0;
  818. position: absolute;
  819. cursor: pointer;
  820. box-shadow: none;
  821. border: none;
  822. }
  823. /* CURRENT COLOR COMPONENT */
  824. .components-color-picker__swatch {
  825. margin-right: 8px;
  826. width: 32px;
  827. height: 32px;
  828. border-radius: 50%;
  829. position: relative;
  830. overflow: hidden;
  831. background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%);
  832. background-size: 10px 10px;
  833. background-position: 0 0, 0 5px, 5px -5px, -5px 0;
  834. }
  835. .is-alpha-disabled .components-color-picker__swatch {
  836. width: 12px;
  837. height: 12px;
  838. margin-top: 0;
  839. }
  840. .components-color-picker__active {
  841. position: absolute;
  842. top: 0;
  843. left: 0;
  844. right: 0;
  845. bottom: 0;
  846. border-radius: 50%;
  847. box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  848. z-index: 2;
  849. }
  850. /* SATURATION COMPONENT */
  851. .components-color-picker__saturation-color,
  852. .components-color-picker__saturation-white,
  853. .components-color-picker__saturation-black {
  854. position: absolute;
  855. top: 0;
  856. left: 0;
  857. right: 0;
  858. bottom: 0;
  859. }
  860. .components-color-picker__saturation-color {
  861. overflow: visible;
  862. }
  863. .components-color-picker__saturation-white {
  864. /*rtl:ignore*/
  865. background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  866. }
  867. .components-color-picker__saturation-black {
  868. background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
  869. }
  870. .components-button.components-color-picker__saturation-pointer {
  871. width: 14px;
  872. height: 14px;
  873. padding: 0;
  874. border-radius: 50%;
  875. background-color: transparent;
  876. transform: translate(-50%, -50%);
  877. box-shadow: 0 0 0 1px #fff, inset 0 0 0 1px #000, 0 0 0 2px #000;
  878. }
  879. .components-button.components-color-picker__saturation-pointer:focus:not(:disabled) {
  880. box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px #000, 0 0 0 3px #000;
  881. }
  882. /* HUE & ALPHA BARS */
  883. .components-color-picker__toggles {
  884. flex: 1;
  885. }
  886. .components-color-picker__alpha {
  887. background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%);
  888. background-size: 10px 10px;
  889. background-position: 0 0, 0 5px, 5px -5px, -5px 0;
  890. }
  891. .components-color-picker__hue-gradient,
  892. .components-color-picker__alpha-gradient {
  893. position: absolute;
  894. top: 0;
  895. left: 0;
  896. right: 0;
  897. bottom: 0;
  898. }
  899. .components-color-picker__hue,
  900. .components-color-picker__alpha {
  901. height: 12px;
  902. position: relative;
  903. }
  904. .is-alpha-enabled .components-color-picker__hue {
  905. margin-bottom: 8px;
  906. }
  907. .components-color-picker__hue-bar,
  908. .components-color-picker__alpha-bar {
  909. position: relative;
  910. margin: 0 3px;
  911. height: 100%;
  912. padding: 0 2px;
  913. }
  914. .components-color-picker__hue-gradient {
  915. /*rtl:ignore*/
  916. background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
  917. }
  918. .components-color-picker__hue-pointer,
  919. .components-color-picker__alpha-pointer {
  920. /*rtl:ignore*/
  921. left: 0;
  922. width: 14px;
  923. height: 14px;
  924. border-radius: 50%;
  925. box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
  926. background: #fff;
  927. transform: translate(-7px, -1px);
  928. }
  929. .components-color-picker__hue-pointer,
  930. .components-color-picker__saturation-pointer {
  931. transition: box-shadow 0.1s linear;
  932. }
  933. @media (prefers-reduced-motion: reduce) {
  934. .components-color-picker__hue-pointer,
  935. .components-color-picker__saturation-pointer {
  936. transition-duration: 0s;
  937. transition-delay: 0s;
  938. }
  939. }
  940. .components-color-picker__saturation-pointer:focus {
  941. box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color), 0 0 5px 0 var(--wp-admin-theme-color), inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
  942. }
  943. .components-color-picker__hue-pointer:focus,
  944. .components-color-picker__alpha-pointer:focus {
  945. border-color: var(--wp-admin-theme-color);
  946. box-shadow: 0 0 0 2px var(--wp-admin-theme-color), 0 0 3px 0 var(--wp-admin-theme-color);
  947. outline: 2px solid transparent;
  948. outline-offset: -2px;
  949. }
  950. /* INPUTS COMPONENT */
  951. .components-color-picker__inputs-wrapper {
  952. margin: 0 -4px;
  953. padding-top: 16px;
  954. display: flex;
  955. align-items: flex-end;
  956. min-width: 255px;
  957. }
  958. .components-color-picker__inputs-wrapper fieldset {
  959. flex: 1;
  960. border: none;
  961. margin: 0;
  962. padding: 0;
  963. }
  964. .components-color-picker__inputs-wrapper .components-color-picker__inputs-fields .components-text-control__input[type=number] {
  965. padding: 6px 3px;
  966. margin: 0;
  967. }
  968. .components-color-picker__inputs-field {
  969. width: 100%;
  970. }
  971. .components-color-picker__inputs-fields {
  972. display: flex;
  973. /*rtl:ignore*/
  974. direction: ltr;
  975. flex-grow: 1;
  976. margin-right: 4px;
  977. }
  978. .components-color-picker__inputs-fields .components-base-control + .components-base-control {
  979. margin-top: 0;
  980. }
  981. .components-color-picker__inputs-fields .components-base-control__field {
  982. margin: 0 2px;
  983. }
  984. .components-color-picker__inputs-toggle {
  985. height: 30px;
  986. padding: 0 5px;
  987. }
  988. .components-combobox-control {
  989. width: 100%;
  990. }
  991. input.components-combobox-control__input[type=text] {
  992. width: 100%;
  993. border: none;
  994. box-shadow: none;
  995. font-size: 16px;
  996. padding: 2px;
  997. margin: 0;
  998. line-height: inherit;
  999. min-height: auto;
  1000. }
  1001. @media (min-width: 600px) {
  1002. input.components-combobox-control__input[type=text] {
  1003. font-size: 13px;
  1004. }
  1005. }
  1006. input.components-combobox-control__input[type=text]:focus {
  1007. outline: none;
  1008. box-shadow: none;
  1009. }
  1010. .components-combobox-control__suggestions-container {
  1011. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  1012. padding: 6px 8px;
  1013. box-shadow: 0 0 0 transparent;
  1014. transition: box-shadow 0.1s linear;
  1015. border-radius: 2px;
  1016. border: 1px solid #757575;
  1017. /* Fonts smaller than 16px causes mobile safari to zoom. */
  1018. font-size: 16px;
  1019. /* Override core line-height. To be reviewed. */
  1020. line-height: normal;
  1021. display: flex;
  1022. flex-wrap: wrap;
  1023. align-items: flex-start;
  1024. width: 100%;
  1025. margin: 0 0 8px 0;
  1026. padding: 4px;
  1027. }
  1028. @media (prefers-reduced-motion: reduce) {
  1029. .components-combobox-control__suggestions-container {
  1030. transition-duration: 0s;
  1031. transition-delay: 0s;
  1032. }
  1033. }
  1034. @media (min-width: 600px) {
  1035. .components-combobox-control__suggestions-container {
  1036. font-size: 13px;
  1037. /* Override core line-height. To be reviewed. */
  1038. line-height: normal;
  1039. }
  1040. }
  1041. .components-combobox-control__suggestions-container:focus {
  1042. border-color: var(--wp-admin-theme-color);
  1043. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  1044. outline: 2px solid transparent;
  1045. }
  1046. .components-combobox-control__suggestions-container::-webkit-input-placeholder {
  1047. color: rgba(30, 30, 30, 0.62);
  1048. }
  1049. .components-combobox-control__suggestions-container::-moz-placeholder {
  1050. opacity: 1;
  1051. color: rgba(30, 30, 30, 0.62);
  1052. }
  1053. .components-combobox-control__suggestions-container:-ms-input-placeholder {
  1054. color: rgba(30, 30, 30, 0.62);
  1055. }
  1056. .components-combobox-control__suggestions-container:focus-within {
  1057. border-color: var(--wp-admin-theme-color);
  1058. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  1059. outline: 2px solid transparent;
  1060. }
  1061. .components-combobox-control__reset.components-button {
  1062. display: flex;
  1063. height: 24px;
  1064. min-width: 24px;
  1065. padding: 0;
  1066. }
  1067. .components-color-list-picker,
  1068. .components-color-list-picker__swatch-button {
  1069. width: 100%;
  1070. }
  1071. .components-custom-gradient-picker__gradient-bar:not(.has-gradient) {
  1072. opacity: 0.4;
  1073. }
  1074. .components-custom-gradient-picker__gradient-bar {
  1075. margin-top: 12px;
  1076. width: 100%;
  1077. height: 36px;
  1078. border-radius: 36px;
  1079. margin-bottom: 12px;
  1080. padding-left: 6px;
  1081. padding-right: 30px;
  1082. }
  1083. .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__markers-container {
  1084. position: relative;
  1085. }
  1086. .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point {
  1087. border-radius: 50%;
  1088. background: #fff;
  1089. padding: 2px;
  1090. top: 6px;
  1091. min-width: 24px;
  1092. width: 24px;
  1093. height: 24px;
  1094. position: relative;
  1095. color: #1e1e1e;
  1096. }
  1097. .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__insert-point svg {
  1098. height: 100%;
  1099. width: 100%;
  1100. }
  1101. .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button {
  1102. border: 2px solid transparent;
  1103. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff;
  1104. border-radius: 50%;
  1105. height: 24px;
  1106. width: 24px;
  1107. padding: 0;
  1108. position: absolute;
  1109. top: 6px;
  1110. }
  1111. .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus, .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active {
  1112. box-shadow: 0 0 0 1px #fff, 0 0 0 3px #1e1e1e;
  1113. }
  1114. .components-custom-gradient-picker__color-picker-popover .components-custom-gradient-picker__remove-control-point {
  1115. margin-left: auto;
  1116. margin-right: auto;
  1117. display: block;
  1118. margin-bottom: 8px;
  1119. }
  1120. .components-custom-gradient-picker__inserter {
  1121. width: 100%;
  1122. }
  1123. .components-custom-gradient-picker__liner-gradient-indicator {
  1124. display: inline-block;
  1125. flex: 0 auto;
  1126. width: 20px;
  1127. height: 20px;
  1128. }
  1129. .components-custom-gradient-picker .components-custom-gradient-picker__ui-line {
  1130. margin-bottom: 16px;
  1131. }
  1132. .components-custom-gradient-picker .components-custom-gradient-picker__ui-line .components-base-control.components-angle-picker,
  1133. .components-custom-gradient-picker .components-custom-gradient-picker__ui-line .components-base-control.components-custom-gradient-picker__type-picker {
  1134. margin-bottom: 0;
  1135. }
  1136. .components-custom-gradient-picker .components-custom-gradient-picker__toolbar {
  1137. border: none;
  1138. }
  1139. .components-custom-gradient-picker .components-custom-gradient-picker__toolbar > div + div {
  1140. margin-left: 1px;
  1141. }
  1142. .components-custom-gradient-picker .components-custom-gradient-picker__toolbar button.is-pressed > svg {
  1143. background: #fff;
  1144. border: 1px solid #949494;
  1145. border-radius: 2px;
  1146. }
  1147. .components-custom-select-control {
  1148. position: relative;
  1149. }
  1150. .components-custom-select-control__label {
  1151. display: block;
  1152. margin-bottom: 8px;
  1153. }
  1154. .components-custom-select-control__button {
  1155. border: 1px solid #757575;
  1156. border-radius: 2px;
  1157. min-height: 30px;
  1158. min-width: 130px;
  1159. position: relative;
  1160. text-align: left;
  1161. }
  1162. .components-custom-select-control__button.components-custom-select-control__button {
  1163. padding-right: 24px;
  1164. }
  1165. .components-custom-select-control__button:focus:not(:disabled) {
  1166. border-color: var(--wp-admin-theme-color);
  1167. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  1168. }
  1169. .components-custom-select-control__button .components-custom-select-control__button-icon {
  1170. height: 100%;
  1171. padding: 0;
  1172. position: absolute;
  1173. right: 0;
  1174. top: 0;
  1175. }
  1176. .components-custom-select-control__menu {
  1177. border: 1px solid #1e1e1e;
  1178. background-color: #fff;
  1179. border-radius: 2px;
  1180. outline: none;
  1181. transition: none;
  1182. max-height: 400px;
  1183. min-width: 100%;
  1184. overflow: auto;
  1185. padding: 0;
  1186. position: absolute;
  1187. z-index: 1000000;
  1188. }
  1189. .components-custom-select-control__menu[aria-hidden=true] {
  1190. display: none;
  1191. }
  1192. .components-custom-select-control__item {
  1193. align-items: center;
  1194. display: flex;
  1195. list-style-type: none;
  1196. padding: 8px;
  1197. cursor: default;
  1198. line-height: 28px;
  1199. }
  1200. .components-custom-select-control__item.is-highlighted {
  1201. background: #ddd;
  1202. }
  1203. .components-custom-select-control__item .components-custom-select-control__item-icon {
  1204. margin-right: 0;
  1205. margin-left: auto;
  1206. }
  1207. .components-custom-select-control__item:last-child {
  1208. margin-bottom: 0;
  1209. }
  1210. /**
  1211. * Parts of this source were derived and modified from react-dates,
  1212. * released under the MIT license.
  1213. *
  1214. * https://github.com/airbnb/react-dates
  1215. *
  1216. * The MIT License (MIT)
  1217. *
  1218. * Copyright (c) 2016 Airbnb
  1219. *
  1220. * Permission is hereby granted, free of charge, to any person obtaining a copy
  1221. * of this software and associated documentation files (the "Software"), to deal
  1222. * in the Software without restriction, including without limitation the rights
  1223. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  1224. * copies of the Software, and to permit persons to whom the Software is
  1225. * furnished to do so, subject to the following conditions:
  1226. *
  1227. * The above copyright notice and this permission notice shall be included in all
  1228. * copies or substantial portions of the Software.
  1229. *
  1230. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  1231. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  1232. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  1233. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  1234. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  1235. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  1236. * SOFTWARE.
  1237. */
  1238. /*rtl:begin:ignore*/
  1239. .PresetDateRangePicker_panel {
  1240. padding: 0 22px 11px;
  1241. }
  1242. .PresetDateRangePicker_button {
  1243. position: relative;
  1244. height: 100%;
  1245. text-align: center;
  1246. background: 0 0;
  1247. border: 2px solid #00a699;
  1248. color: #00a699;
  1249. padding: 4px 12px;
  1250. margin-right: 8px;
  1251. font: inherit;
  1252. font-weight: 700;
  1253. line-height: normal;
  1254. overflow: visible;
  1255. box-sizing: border-box;
  1256. cursor: pointer;
  1257. }
  1258. .PresetDateRangePicker_button:active {
  1259. outline: 0;
  1260. }
  1261. .PresetDateRangePicker_button__selected {
  1262. color: #fff;
  1263. background: #00a699;
  1264. }
  1265. .SingleDatePickerInput {
  1266. display: inline-block;
  1267. background-color: #fff;
  1268. }
  1269. .SingleDatePickerInput__withBorder {
  1270. border-radius: 2px;
  1271. border: 1px solid #dbdbdb;
  1272. }
  1273. .SingleDatePickerInput__rtl {
  1274. direction: rtl;
  1275. }
  1276. .SingleDatePickerInput__disabled {
  1277. background-color: #f2f2f2;
  1278. }
  1279. .SingleDatePickerInput__block {
  1280. display: block;
  1281. }
  1282. .SingleDatePickerInput__showClearDate {
  1283. padding-right: 30px;
  1284. }
  1285. .SingleDatePickerInput_clearDate {
  1286. background: 0 0;
  1287. border: 0;
  1288. color: inherit;
  1289. font: inherit;
  1290. line-height: normal;
  1291. overflow: visible;
  1292. cursor: pointer;
  1293. padding: 10px;
  1294. margin: 0 10px 0 5px;
  1295. position: absolute;
  1296. right: 0;
  1297. top: 50%;
  1298. transform: translateY(-50%);
  1299. }
  1300. .SingleDatePickerInput_clearDate__default:focus,
  1301. .SingleDatePickerInput_clearDate__default:hover {
  1302. background: #dbdbdb;
  1303. border-radius: 50%;
  1304. }
  1305. .SingleDatePickerInput_clearDate__small {
  1306. padding: 6px;
  1307. }
  1308. .SingleDatePickerInput_clearDate__hide {
  1309. visibility: hidden;
  1310. }
  1311. .SingleDatePickerInput_clearDate_svg {
  1312. fill: #82888a;
  1313. height: 12px;
  1314. width: 15px;
  1315. vertical-align: middle;
  1316. }
  1317. .SingleDatePickerInput_clearDate_svg__small {
  1318. height: 9px;
  1319. }
  1320. .SingleDatePickerInput_calendarIcon {
  1321. background: 0 0;
  1322. border: 0;
  1323. color: inherit;
  1324. font: inherit;
  1325. line-height: normal;
  1326. overflow: visible;
  1327. cursor: pointer;
  1328. display: inline-block;
  1329. vertical-align: middle;
  1330. padding: 10px;
  1331. margin: 0 5px 0 10px;
  1332. }
  1333. .SingleDatePickerInput_calendarIcon_svg {
  1334. fill: #82888a;
  1335. height: 15px;
  1336. width: 14px;
  1337. vertical-align: middle;
  1338. }
  1339. .SingleDatePicker {
  1340. position: relative;
  1341. display: inline-block;
  1342. }
  1343. .SingleDatePicker__block {
  1344. display: block;
  1345. }
  1346. .SingleDatePicker_picker {
  1347. z-index: 1;
  1348. background-color: #fff;
  1349. position: absolute;
  1350. }
  1351. .SingleDatePicker_picker__rtl {
  1352. direction: rtl;
  1353. }
  1354. .SingleDatePicker_picker__directionLeft {
  1355. left: 0;
  1356. }
  1357. .SingleDatePicker_picker__directionRight {
  1358. right: 0;
  1359. }
  1360. .SingleDatePicker_picker__portal {
  1361. background-color: rgba(0, 0, 0, 0.3);
  1362. position: fixed;
  1363. top: 0;
  1364. left: 0;
  1365. height: 100%;
  1366. width: 100%;
  1367. }
  1368. .SingleDatePicker_picker__fullScreenPortal {
  1369. background-color: #fff;
  1370. }
  1371. .SingleDatePicker_closeButton {
  1372. background: 0 0;
  1373. border: 0;
  1374. color: inherit;
  1375. font: inherit;
  1376. line-height: normal;
  1377. overflow: visible;
  1378. cursor: pointer;
  1379. position: absolute;
  1380. top: 0;
  1381. right: 0;
  1382. padding: 15px;
  1383. z-index: 2;
  1384. }
  1385. .SingleDatePicker_closeButton:focus,
  1386. .SingleDatePicker_closeButton:hover {
  1387. color: #b0b3b4;
  1388. text-decoration: none;
  1389. }
  1390. .SingleDatePicker_closeButton_svg {
  1391. height: 15px;
  1392. width: 15px;
  1393. fill: #cacccd;
  1394. }
  1395. .DayPickerKeyboardShortcuts_buttonReset {
  1396. background: 0 0;
  1397. border: 0;
  1398. border-radius: 0;
  1399. color: inherit;
  1400. font: inherit;
  1401. line-height: normal;
  1402. overflow: visible;
  1403. padding: 0;
  1404. cursor: pointer;
  1405. font-size: 14px;
  1406. }
  1407. .DayPickerKeyboardShortcuts_buttonReset:active {
  1408. outline: 0;
  1409. }
  1410. .DayPickerKeyboardShortcuts_show {
  1411. width: 22px;
  1412. position: absolute;
  1413. z-index: 2;
  1414. }
  1415. .DayPickerKeyboardShortcuts_show__bottomRight {
  1416. border-top: 26px solid transparent;
  1417. border-right: 33px solid #00a699;
  1418. bottom: 0;
  1419. right: 0;
  1420. }
  1421. .DayPickerKeyboardShortcuts_show__bottomRight:hover {
  1422. border-right: 33px solid #008489;
  1423. }
  1424. .DayPickerKeyboardShortcuts_show__topRight {
  1425. border-bottom: 26px solid transparent;
  1426. border-right: 33px solid #00a699;
  1427. top: 0;
  1428. right: 0;
  1429. }
  1430. .DayPickerKeyboardShortcuts_show__topRight:hover {
  1431. border-right: 33px solid #008489;
  1432. }
  1433. .DayPickerKeyboardShortcuts_show__topLeft {
  1434. border-bottom: 26px solid transparent;
  1435. border-left: 33px solid #00a699;
  1436. top: 0;
  1437. left: 0;
  1438. }
  1439. .DayPickerKeyboardShortcuts_show__topLeft:hover {
  1440. border-left: 33px solid #008489;
  1441. }
  1442. .DayPickerKeyboardShortcuts_showSpan {
  1443. color: #fff;
  1444. position: absolute;
  1445. }
  1446. .DayPickerKeyboardShortcuts_showSpan__bottomRight {
  1447. bottom: 0;
  1448. right: -28px;
  1449. }
  1450. .DayPickerKeyboardShortcuts_showSpan__topRight {
  1451. top: 1px;
  1452. right: -28px;
  1453. }
  1454. .DayPickerKeyboardShortcuts_showSpan__topLeft {
  1455. top: 1px;
  1456. left: -28px;
  1457. }
  1458. .DayPickerKeyboardShortcuts_panel {
  1459. overflow: auto;
  1460. background: #fff;
  1461. border: 1px solid #dbdbdb;
  1462. border-radius: 2px;
  1463. position: absolute;
  1464. top: 0;
  1465. bottom: 0;
  1466. right: 0;
  1467. left: 0;
  1468. z-index: 2;
  1469. padding: 22px;
  1470. margin: 33px;
  1471. }
  1472. .DayPickerKeyboardShortcuts_title {
  1473. font-size: 16px;
  1474. font-weight: 700;
  1475. margin: 0;
  1476. }
  1477. .DayPickerKeyboardShortcuts_list {
  1478. list-style: none;
  1479. padding: 0;
  1480. font-size: 14px;
  1481. }
  1482. .DayPickerKeyboardShortcuts_close {
  1483. position: absolute;
  1484. right: 22px;
  1485. top: 22px;
  1486. z-index: 2;
  1487. }
  1488. .DayPickerKeyboardShortcuts_close:active {
  1489. outline: 0;
  1490. }
  1491. .DayPickerKeyboardShortcuts_closeSvg {
  1492. height: 15px;
  1493. width: 15px;
  1494. fill: #cacccd;
  1495. }
  1496. .DayPickerKeyboardShortcuts_closeSvg:focus,
  1497. .DayPickerKeyboardShortcuts_closeSvg:hover {
  1498. fill: #82888a;
  1499. }
  1500. .CalendarDay {
  1501. box-sizing: border-box;
  1502. cursor: pointer;
  1503. font-size: 14px;
  1504. text-align: center;
  1505. }
  1506. .CalendarDay:active {
  1507. outline: 0;
  1508. }
  1509. .CalendarDay__defaultCursor {
  1510. cursor: default;
  1511. }
  1512. .CalendarDay__default {
  1513. border: 1px solid #e4e7e7;
  1514. color: #484848;
  1515. background: #fff;
  1516. }
  1517. .CalendarDay__default:hover {
  1518. background: #e4e7e7;
  1519. border: 1px double #e4e7e7;
  1520. color: inherit;
  1521. }
  1522. .CalendarDay__hovered_offset {
  1523. background: #f4f5f5;
  1524. border: 1px double #e4e7e7;
  1525. color: inherit;
  1526. }
  1527. .CalendarDay__outside {
  1528. border: 0;
  1529. background: #fff;
  1530. color: #484848;
  1531. }
  1532. .CalendarDay__outside:hover {
  1533. border: 0;
  1534. }
  1535. .CalendarDay__blocked_minimum_nights {
  1536. background: #fff;
  1537. border: 1px solid #eceeee;
  1538. color: #cacccd;
  1539. }
  1540. .CalendarDay__blocked_minimum_nights:active,
  1541. .CalendarDay__blocked_minimum_nights:hover {
  1542. background: #fff;
  1543. color: #cacccd;
  1544. }
  1545. .CalendarDay__highlighted_calendar {
  1546. background: #ffe8bc;
  1547. color: #484848;
  1548. }
  1549. .CalendarDay__highlighted_calendar:active,
  1550. .CalendarDay__highlighted_calendar:hover {
  1551. background: #ffce71;
  1552. color: #484848;
  1553. }
  1554. .CalendarDay__selected_span {
  1555. background: #66e2da;
  1556. border: 1px solid #33dacd;
  1557. color: #fff;
  1558. }
  1559. .CalendarDay__selected_span:active,
  1560. .CalendarDay__selected_span:hover {
  1561. background: #33dacd;
  1562. border: 1px solid #33dacd;
  1563. color: #fff;
  1564. }
  1565. .CalendarDay__last_in_range {
  1566. border-right: #00a699;
  1567. }
  1568. .CalendarDay__selected,
  1569. .CalendarDay__selected:active,
  1570. .CalendarDay__selected:hover {
  1571. background: #00a699;
  1572. border: 1px solid #00a699;
  1573. color: #fff;
  1574. }
  1575. .CalendarDay__hovered_span,
  1576. .CalendarDay__hovered_span:hover {
  1577. background: #b2f1ec;
  1578. border: 1px solid #80e8e0;
  1579. color: #007a87;
  1580. }
  1581. .CalendarDay__hovered_span:active {
  1582. background: #80e8e0;
  1583. border: 1px solid #80e8e0;
  1584. color: #007a87;
  1585. }
  1586. .CalendarDay__blocked_calendar,
  1587. .CalendarDay__blocked_calendar:active,
  1588. .CalendarDay__blocked_calendar:hover {
  1589. background: #cacccd;
  1590. border: 1px solid #cacccd;
  1591. color: #82888a;
  1592. }
  1593. .CalendarDay__blocked_out_of_range,
  1594. .CalendarDay__blocked_out_of_range:active,
  1595. .CalendarDay__blocked_out_of_range:hover {
  1596. background: #fff;
  1597. border: 1px solid #e4e7e7;
  1598. color: #cacccd;
  1599. }
  1600. .CalendarMonth {
  1601. background: #fff;
  1602. text-align: center;
  1603. vertical-align: top;
  1604. -webkit-user-select: none;
  1605. user-select: none;
  1606. }
  1607. .CalendarMonth_table {
  1608. border-collapse: collapse;
  1609. border-spacing: 0;
  1610. }
  1611. .CalendarMonth_verticalSpacing {
  1612. border-collapse: separate;
  1613. }
  1614. .CalendarMonth_caption {
  1615. color: #484848;
  1616. font-size: 18px;
  1617. text-align: center;
  1618. padding-top: 22px;
  1619. padding-bottom: 37px;
  1620. caption-side: initial;
  1621. }
  1622. .CalendarMonth_caption__verticalScrollable {
  1623. padding-top: 12px;
  1624. padding-bottom: 7px;
  1625. }
  1626. .CalendarMonthGrid {
  1627. background: #fff;
  1628. text-align: left;
  1629. z-index: 0;
  1630. }
  1631. .CalendarMonthGrid__animating {
  1632. z-index: 1;
  1633. }
  1634. .CalendarMonthGrid__horizontal {
  1635. position: absolute;
  1636. left: 0;
  1637. }
  1638. .CalendarMonthGrid__vertical {
  1639. margin: 0 auto;
  1640. }
  1641. .CalendarMonthGrid__vertical_scrollable {
  1642. margin: 0 auto;
  1643. overflow-y: scroll;
  1644. }
  1645. .CalendarMonthGrid_month__horizontal {
  1646. display: inline-block;
  1647. vertical-align: top;
  1648. min-height: 100%;
  1649. }
  1650. .CalendarMonthGrid_month__hideForAnimation {
  1651. position: absolute;
  1652. z-index: -1;
  1653. opacity: 0;
  1654. pointer-events: none;
  1655. }
  1656. .CalendarMonthGrid_month__hidden {
  1657. visibility: hidden;
  1658. }
  1659. .DayPickerNavigation {
  1660. position: relative;
  1661. z-index: 2;
  1662. }
  1663. .DayPickerNavigation__horizontal {
  1664. height: 0;
  1665. }
  1666. .DayPickerNavigation__verticalDefault {
  1667. position: absolute;
  1668. width: 100%;
  1669. height: 52px;
  1670. bottom: 0;
  1671. left: 0;
  1672. }
  1673. .DayPickerNavigation__verticalScrollableDefault {
  1674. position: relative;
  1675. }
  1676. .DayPickerNavigation_button {
  1677. cursor: pointer;
  1678. -webkit-user-select: none;
  1679. user-select: none;
  1680. border: 0;
  1681. padding: 0;
  1682. margin: 0;
  1683. }
  1684. .DayPickerNavigation_button__default {
  1685. border: 1px solid #e4e7e7;
  1686. background-color: #fff;
  1687. color: #757575;
  1688. }
  1689. .DayPickerNavigation_button__default:focus,
  1690. .DayPickerNavigation_button__default:hover {
  1691. border: 1px solid #c4c4c4;
  1692. }
  1693. .DayPickerNavigation_button__default:active {
  1694. background: #f2f2f2;
  1695. }
  1696. .DayPickerNavigation_button__horizontalDefault {
  1697. position: absolute;
  1698. top: 18px;
  1699. line-height: 0.78;
  1700. border-radius: 3px;
  1701. padding: 6px 9px;
  1702. }
  1703. .DayPickerNavigation_leftButton__horizontalDefault {
  1704. left: 22px;
  1705. }
  1706. .DayPickerNavigation_rightButton__horizontalDefault {
  1707. right: 22px;
  1708. }
  1709. .DayPickerNavigation_button__verticalDefault {
  1710. padding: 5px;
  1711. background: #fff;
  1712. box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
  1713. position: relative;
  1714. display: inline-block;
  1715. height: 100%;
  1716. width: 50%;
  1717. }
  1718. .DayPickerNavigation_nextButton__verticalDefault {
  1719. border-left: 0;
  1720. }
  1721. .DayPickerNavigation_nextButton__verticalScrollableDefault {
  1722. width: 100%;
  1723. }
  1724. .DayPickerNavigation_svg__horizontal {
  1725. height: 19px;
  1726. width: 19px;
  1727. fill: #82888a;
  1728. display: block;
  1729. }
  1730. .DayPickerNavigation_svg__vertical {
  1731. height: 42px;
  1732. width: 42px;
  1733. fill: #484848;
  1734. display: block;
  1735. }
  1736. .DayPicker {
  1737. background: #fff;
  1738. position: relative;
  1739. text-align: left;
  1740. }
  1741. .DayPicker__horizontal {
  1742. background: #fff;
  1743. }
  1744. .DayPicker__verticalScrollable {
  1745. height: 100%;
  1746. }
  1747. .DayPicker__hidden {
  1748. visibility: hidden;
  1749. }
  1750. .DayPicker__withBorder {
  1751. box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07);
  1752. border-radius: 3px;
  1753. }
  1754. .DayPicker_portal__horizontal {
  1755. box-shadow: none;
  1756. position: absolute;
  1757. left: 50%;
  1758. top: 50%;
  1759. }
  1760. .DayPicker_portal__vertical {
  1761. position: initial;
  1762. }
  1763. .DayPicker_focusRegion {
  1764. outline: 0;
  1765. }
  1766. .DayPicker_calendarInfo__horizontal,
  1767. .DayPicker_wrapper__horizontal {
  1768. display: inline-block;
  1769. vertical-align: top;
  1770. }
  1771. .DayPicker_weekHeaders {
  1772. position: relative;
  1773. }
  1774. .DayPicker_weekHeaders__horizontal {
  1775. margin-left: 13px;
  1776. }
  1777. .DayPicker_weekHeader {
  1778. color: #757575;
  1779. position: absolute;
  1780. top: 62px;
  1781. z-index: 2;
  1782. text-align: left;
  1783. padding: 0 !important;
  1784. }
  1785. .DayPicker_weekHeader__vertical {
  1786. left: 50%;
  1787. }
  1788. .DayPicker_weekHeader__verticalScrollable {
  1789. top: 0;
  1790. display: table-row;
  1791. border-bottom: 1px solid #dbdbdb;
  1792. background: #fff;
  1793. margin-left: 0;
  1794. left: 0;
  1795. width: 100%;
  1796. text-align: center;
  1797. }
  1798. .DayPicker_weekHeader_ul {
  1799. list-style: none;
  1800. margin: 1px 0;
  1801. padding-left: 0;
  1802. padding-right: 0;
  1803. font-size: 14px;
  1804. }
  1805. .DayPicker_weekHeader_li {
  1806. display: inline-block;
  1807. text-align: center;
  1808. margin: 0 1px;
  1809. }
  1810. .DayPicker_transitionContainer {
  1811. position: relative;
  1812. overflow: hidden;
  1813. border-radius: 3px;
  1814. }
  1815. .DayPicker_transitionContainer__horizontal {
  1816. transition: height 0.2s ease-in-out;
  1817. }
  1818. .DayPicker_transitionContainer__vertical {
  1819. width: 100%;
  1820. }
  1821. .DayPicker_transitionContainer__verticalScrollable {
  1822. padding-top: 20px;
  1823. height: 100%;
  1824. position: absolute;
  1825. top: 0;
  1826. bottom: 0;
  1827. right: 0;
  1828. left: 0;
  1829. overflow-y: scroll;
  1830. }
  1831. .DateInput {
  1832. margin: 0;
  1833. padding: 0;
  1834. background: #fff;
  1835. position: relative;
  1836. display: inline-block;
  1837. width: 130px;
  1838. vertical-align: middle;
  1839. }
  1840. .DateInput__small {
  1841. width: 97px;
  1842. }
  1843. .DateInput__block {
  1844. width: 100%;
  1845. }
  1846. .DateInput__disabled {
  1847. background: #f2f2f2;
  1848. color: #dbdbdb;
  1849. }
  1850. .DateInput_input {
  1851. font-weight: 200;
  1852. font-size: 19px;
  1853. line-height: 24px;
  1854. color: #484848;
  1855. background-color: #fff;
  1856. width: 100%;
  1857. padding: 11px 11px 9px;
  1858. border: 0;
  1859. border-top: 0;
  1860. border-right: 0;
  1861. border-bottom: 2px solid transparent;
  1862. border-left: 0;
  1863. border-radius: 0;
  1864. }
  1865. .DateInput_input__small {
  1866. font-size: 15px;
  1867. line-height: 18px;
  1868. letter-spacing: 0.2px;
  1869. padding: 7px 7px 5px;
  1870. }
  1871. .DateInput_input__regular {
  1872. font-weight: auto;
  1873. }
  1874. .DateInput_input__readOnly {
  1875. -webkit-user-select: none;
  1876. user-select: none;
  1877. }
  1878. .DateInput_input__focused {
  1879. outline: 0;
  1880. background: #fff;
  1881. border: 0;
  1882. border-top: 0;
  1883. border-right: 0;
  1884. border-bottom: 2px solid #008489;
  1885. border-left: 0;
  1886. }
  1887. .DateInput_input__disabled {
  1888. background: #f2f2f2;
  1889. font-style: italic;
  1890. }
  1891. .DateInput_screenReaderMessage {
  1892. border: 0;
  1893. clip: rect(0, 0, 0, 0);
  1894. height: 1px;
  1895. margin: -1px;
  1896. overflow: hidden;
  1897. padding: 0;
  1898. position: absolute;
  1899. width: 1px;
  1900. }
  1901. .DateInput_fang {
  1902. position: absolute;
  1903. width: 20px;
  1904. height: 10px;
  1905. left: 22px;
  1906. z-index: 2;
  1907. }
  1908. .DateInput_fangShape {
  1909. fill: #fff;
  1910. }
  1911. .DateInput_fangStroke {
  1912. stroke: #dbdbdb;
  1913. fill: transparent;
  1914. }
  1915. .DateRangePickerInput {
  1916. background-color: #fff;
  1917. display: inline-block;
  1918. }
  1919. .DateRangePickerInput__disabled {
  1920. background: #f2f2f2;
  1921. }
  1922. .DateRangePickerInput__withBorder {
  1923. border-radius: 2px;
  1924. border: 1px solid #dbdbdb;
  1925. }
  1926. .DateRangePickerInput__rtl {
  1927. direction: rtl;
  1928. }
  1929. .DateRangePickerInput__block {
  1930. display: block;
  1931. }
  1932. .DateRangePickerInput__showClearDates {
  1933. padding-right: 30px;
  1934. }
  1935. .DateRangePickerInput_arrow {
  1936. display: inline-block;
  1937. vertical-align: middle;
  1938. color: #484848;
  1939. }
  1940. .DateRangePickerInput_arrow_svg {
  1941. vertical-align: middle;
  1942. fill: #484848;
  1943. height: 24px;
  1944. width: 24px;
  1945. }
  1946. .DateRangePickerInput_clearDates {
  1947. background: 0 0;
  1948. border: 0;
  1949. color: inherit;
  1950. font: inherit;
  1951. line-height: normal;
  1952. overflow: visible;
  1953. cursor: pointer;
  1954. padding: 10px;
  1955. margin: 0 10px 0 5px;
  1956. position: absolute;
  1957. right: 0;
  1958. top: 50%;
  1959. transform: translateY(-50%);
  1960. }
  1961. .DateRangePickerInput_clearDates__small {
  1962. padding: 6px;
  1963. }
  1964. .DateRangePickerInput_clearDates_default:focus,
  1965. .DateRangePickerInput_clearDates_default:hover {
  1966. background: #dbdbdb;
  1967. border-radius: 50%;
  1968. }
  1969. .DateRangePickerInput_clearDates__hide {
  1970. visibility: hidden;
  1971. }
  1972. .DateRangePickerInput_clearDates_svg {
  1973. fill: #82888a;
  1974. height: 12px;
  1975. width: 15px;
  1976. vertical-align: middle;
  1977. }
  1978. .DateRangePickerInput_clearDates_svg__small {
  1979. height: 9px;
  1980. }
  1981. .DateRangePickerInput_calendarIcon {
  1982. background: 0 0;
  1983. border: 0;
  1984. color: inherit;
  1985. font: inherit;
  1986. line-height: normal;
  1987. overflow: visible;
  1988. cursor: pointer;
  1989. display: inline-block;
  1990. vertical-align: middle;
  1991. padding: 10px;
  1992. margin: 0 5px 0 10px;
  1993. }
  1994. .DateRangePickerInput_calendarIcon_svg {
  1995. fill: #82888a;
  1996. height: 15px;
  1997. width: 14px;
  1998. vertical-align: middle;
  1999. }
  2000. .DateRangePicker {
  2001. position: relative;
  2002. display: inline-block;
  2003. }
  2004. .DateRangePicker__block {
  2005. display: block;
  2006. }
  2007. .DateRangePicker_picker {
  2008. z-index: 1;
  2009. background-color: #fff;
  2010. position: absolute;
  2011. }
  2012. .DateRangePicker_picker__rtl {
  2013. direction: rtl;
  2014. }
  2015. .DateRangePicker_picker__directionLeft {
  2016. left: 0;
  2017. }
  2018. .DateRangePicker_picker__directionRight {
  2019. right: 0;
  2020. }
  2021. .DateRangePicker_picker__portal {
  2022. background-color: rgba(0, 0, 0, 0.3);
  2023. position: fixed;
  2024. top: 0;
  2025. left: 0;
  2026. height: 100%;
  2027. width: 100%;
  2028. }
  2029. .DateRangePicker_picker__fullScreenPortal {
  2030. background-color: #fff;
  2031. }
  2032. .DateRangePicker_closeButton {
  2033. background: 0 0;
  2034. border: 0;
  2035. color: inherit;
  2036. font: inherit;
  2037. line-height: normal;
  2038. overflow: visible;
  2039. cursor: pointer;
  2040. position: absolute;
  2041. top: 0;
  2042. right: 0;
  2043. padding: 15px;
  2044. z-index: 2;
  2045. }
  2046. .DateRangePicker_closeButton:focus,
  2047. .DateRangePicker_closeButton:hover {
  2048. color: #b0b3b4;
  2049. text-decoration: none;
  2050. }
  2051. .DateRangePicker_closeButton_svg {
  2052. height: 15px;
  2053. width: 15px;
  2054. fill: #cacccd;
  2055. }
  2056. /*rtl:end:ignore*/
  2057. .components-datetime {
  2058. padding: 16px;
  2059. }
  2060. .components-panel__body .components-datetime {
  2061. padding: 0;
  2062. }
  2063. .components-datetime .components-datetime__calendar-help {
  2064. padding: 16px;
  2065. }
  2066. .components-datetime .components-datetime__calendar-help h4 {
  2067. margin: 0;
  2068. }
  2069. .components-datetime .components-datetime__buttons {
  2070. display: flex;
  2071. justify-content: space-between;
  2072. }
  2073. .components-datetime .components-datetime__date-help-toggle {
  2074. display: block;
  2075. margin-left: auto;
  2076. }
  2077. .components-datetime fieldset {
  2078. border: 0;
  2079. padding: 0;
  2080. margin: 0;
  2081. }
  2082. .components-datetime select,
  2083. .components-datetime input {
  2084. box-shadow: 0 0 0 transparent;
  2085. transition: box-shadow 0.1s linear;
  2086. border-radius: 2px;
  2087. border: 1px solid #757575;
  2088. }
  2089. @media (prefers-reduced-motion: reduce) {
  2090. .components-datetime select,
  2091. .components-datetime input {
  2092. transition-duration: 0s;
  2093. transition-delay: 0s;
  2094. }
  2095. }
  2096. .components-datetime select,
  2097. .components-datetime input[type=number],
  2098. .components-datetime .components-button {
  2099. height: 30px;
  2100. margin-top: 0;
  2101. margin-bottom: 0;
  2102. }
  2103. .components-datetime__date {
  2104. min-height: 236px;
  2105. border-top: 1px solid #ddd;
  2106. }
  2107. .components-datetime__date .DayPickerNavigation_leftButton__horizontalDefault {
  2108. /*!rtl:begin:ignore*/
  2109. left: 13px;
  2110. /*!rtl:end:ignore*/
  2111. }
  2112. .components-datetime__date .CalendarMonth_caption {
  2113. font-size: 13px;
  2114. }
  2115. .components-datetime__date .CalendarMonth_table {
  2116. border-collapse: separate;
  2117. border-spacing: 2px;
  2118. }
  2119. .components-datetime__date .CalendarDay {
  2120. font-size: 13px;
  2121. border: none;
  2122. border-radius: 50%;
  2123. text-align: center;
  2124. }
  2125. .components-datetime__date .CalendarDay:focus {
  2126. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px #fff;
  2127. outline: 2px solid transparent;
  2128. }
  2129. .components-datetime__date .CalendarDay__selected {
  2130. background: var(--wp-admin-theme-color);
  2131. border: 2px solid transparent;
  2132. }
  2133. .components-datetime__date .CalendarDay__selected:hover {
  2134. background: var(--wp-admin-theme-color-darker-20);
  2135. }
  2136. .components-datetime__date .CalendarDay__selected:focus {
  2137. box-shadow: inset 0 0 0 1px #fff;
  2138. }
  2139. .components-datetime__date .DayPickerNavigation_button__horizontalDefault {
  2140. padding: 2px 8px;
  2141. top: 20px;
  2142. }
  2143. .components-datetime__date .DayPickerNavigation_button__horizontalDefault:focus {
  2144. border-color: var(--wp-admin-theme-color);
  2145. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  2146. outline: 2px solid transparent;
  2147. }
  2148. .components-datetime__date .DayPicker_weekHeader {
  2149. top: 50px;
  2150. }
  2151. .components-datetime__date .DayPicker_weekHeader .DayPicker_weekHeader_ul {
  2152. margin: 1px;
  2153. padding-left: 0;
  2154. padding-right: 0;
  2155. }
  2156. .components-datetime__date.is-description-visible .DayPicker {
  2157. visibility: hidden;
  2158. }
  2159. .components-datetime__date .CalendarDay .components-datetime__date__day {
  2160. height: 100%;
  2161. display: flex;
  2162. justify-content: center;
  2163. align-content: center;
  2164. flex-direction: column;
  2165. position: relative;
  2166. }
  2167. .components-datetime__date .CalendarDay .components-datetime__date__day.has-events::before {
  2168. content: " ";
  2169. width: 4px;
  2170. height: 4px;
  2171. border-radius: 2px;
  2172. position: absolute;
  2173. left: 50%;
  2174. margin-left: -2px;
  2175. bottom: 0;
  2176. background-color: #fff;
  2177. }
  2178. .components-datetime__date .CalendarDay:not(.CalendarDay__selected) .components-datetime__date__day.has-events::before {
  2179. background: var(--wp-admin-theme-color);
  2180. }
  2181. .components-datetime__time {
  2182. padding-bottom: 16px;
  2183. }
  2184. .components-datetime__time fieldset {
  2185. position: relative;
  2186. margin-bottom: 0.5em;
  2187. }
  2188. .components-datetime__time fieldset + fieldset {
  2189. margin-bottom: 0;
  2190. }
  2191. .components-datetime__time .components-datetime__time-field-am-pm fieldset {
  2192. margin-top: 0;
  2193. }
  2194. .components-datetime__time .components-datetime__time-wrapper {
  2195. display: flex;
  2196. }
  2197. .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-separator {
  2198. display: inline-block;
  2199. padding: 0 3px 0 0;
  2200. }
  2201. .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field-time {
  2202. /*rtl:ignore*/
  2203. direction: ltr;
  2204. }
  2205. .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select {
  2206. margin-right: 4px;
  2207. }
  2208. .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field select:focus {
  2209. position: relative;
  2210. z-index: 1;
  2211. }
  2212. .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number] {
  2213. padding: 2px;
  2214. margin-right: 4px;
  2215. text-align: center;
  2216. -moz-appearance: textfield;
  2217. }
  2218. .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number]:focus {
  2219. position: relative;
  2220. z-index: 1;
  2221. }
  2222. .components-datetime__time .components-datetime__time-wrapper .components-datetime__time-field input[type=number]::-webkit-inner-spin-button {
  2223. -webkit-appearance: none;
  2224. margin: 0;
  2225. }
  2226. .components-datetime__time.is-12-hour .components-datetime__time-field-day input {
  2227. margin: -4px 0 0 !important;
  2228. border-radius: 2px 0 0 2px !important;
  2229. }
  2230. .components-datetime__time.is-12-hour .components-datetime__time-field-year input {
  2231. border-radius: 0 2px 2px 0 !important;
  2232. }
  2233. .components-datetime__timezone {
  2234. line-height: 30px;
  2235. margin-left: 4px;
  2236. -webkit-text-decoration: underline dotted;
  2237. text-decoration: underline dotted;
  2238. }
  2239. .components-datetime__time-legend {
  2240. font-weight: 600;
  2241. margin-top: 0.5em;
  2242. }
  2243. .components-datetime__time-legend.invisible {
  2244. position: absolute;
  2245. top: -999em;
  2246. left: -999em;
  2247. }
  2248. .components-datetime__time-field-hours-input,
  2249. .components-datetime__time-field-minutes-input,
  2250. .components-datetime__time-field-day-input {
  2251. width: 35px;
  2252. }
  2253. .components-datetime__time-field-year-input {
  2254. width: 55px;
  2255. }
  2256. .components-datetime__time-field-month-select {
  2257. max-width: 145px;
  2258. }
  2259. .components-popover .components-datetime__date {
  2260. padding-left: 4px;
  2261. }
  2262. .block-editor-dimension-control .components-base-control__field {
  2263. display: flex;
  2264. align-items: center;
  2265. }
  2266. .block-editor-dimension-control .components-base-control__label {
  2267. display: flex;
  2268. align-items: center;
  2269. margin-right: 1em;
  2270. margin-bottom: 0;
  2271. }
  2272. .block-editor-dimension-control .components-base-control__label .dashicon {
  2273. margin-right: 0.5em;
  2274. }
  2275. .block-editor-dimension-control.is-manual .components-base-control__label {
  2276. width: 10em;
  2277. }
  2278. body.is-dragging-components-draggable {
  2279. cursor: move;
  2280. /* Fallback for IE/Edge < 14 */
  2281. cursor: grabbing !important;
  2282. }
  2283. .components-draggable__invisible-drag-image {
  2284. position: fixed;
  2285. left: -1000px;
  2286. height: 50px;
  2287. width: 50px;
  2288. }
  2289. .components-draggable__clone {
  2290. position: fixed;
  2291. padding: 0;
  2292. background: transparent;
  2293. pointer-events: none;
  2294. z-index: 1000000000;
  2295. }
  2296. .components-drop-zone {
  2297. position: absolute;
  2298. top: 0;
  2299. right: 0;
  2300. bottom: 0;
  2301. left: 0;
  2302. z-index: 40;
  2303. visibility: hidden;
  2304. opacity: 0;
  2305. transition: 0.3s opacity, 0.3s background-color, 0s visibility 0.3s;
  2306. border: 2px solid var(--wp-admin-theme-color);
  2307. border-radius: 2px;
  2308. }
  2309. @media (prefers-reduced-motion: reduce) {
  2310. .components-drop-zone {
  2311. transition-duration: 0s;
  2312. transition-delay: 0s;
  2313. }
  2314. }
  2315. .components-drop-zone.is-active {
  2316. opacity: 1;
  2317. visibility: visible;
  2318. transition: 0.3s opacity, 0.3s background-color;
  2319. }
  2320. @media (prefers-reduced-motion: reduce) {
  2321. .components-drop-zone.is-active {
  2322. transition-duration: 0s;
  2323. transition-delay: 0s;
  2324. }
  2325. }
  2326. .components-drop-zone.is-dragging-over-element {
  2327. background-color: var(--wp-admin-theme-color);
  2328. }
  2329. .components-drop-zone__content {
  2330. position: absolute;
  2331. top: 50%;
  2332. left: 0;
  2333. right: 0;
  2334. z-index: 50;
  2335. transform: translateY(-50%);
  2336. width: 100%;
  2337. text-align: center;
  2338. color: #fff;
  2339. transition: transform 0.2s ease-in-out;
  2340. }
  2341. @media (prefers-reduced-motion: reduce) {
  2342. .components-drop-zone__content {
  2343. transition-duration: 0s;
  2344. transition-delay: 0s;
  2345. }
  2346. }
  2347. .components-drop-zone.is-dragging-over-element .components-drop-zone__content {
  2348. transform: translateY(-50%) scale(1.05);
  2349. }
  2350. .components-drop-zone__content-icon,
  2351. .components-drop-zone__content-text {
  2352. display: block;
  2353. }
  2354. .components-drop-zone__content-icon {
  2355. margin: 0 auto;
  2356. line-height: 0;
  2357. fill: currentColor;
  2358. }
  2359. .components-drop-zone__content-text {
  2360. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  2361. }
  2362. .components-dropdown {
  2363. display: inline-block;
  2364. }
  2365. .components-dropdown__content .components-popover__content > div {
  2366. padding: 12px;
  2367. }
  2368. .components-dropdown-menu__popover .components-popover__content {
  2369. min-width: 200px;
  2370. }
  2371. .components-dropdown-menu__menu {
  2372. width: 100%;
  2373. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  2374. font-size: 13px;
  2375. line-height: 1.4;
  2376. }
  2377. .components-dropdown-menu__menu .components-dropdown-menu__menu-item,
  2378. .components-dropdown-menu__menu .components-menu-item {
  2379. width: 100%;
  2380. padding: 6px;
  2381. outline: none;
  2382. cursor: pointer;
  2383. white-space: nowrap;
  2384. }
  2385. .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator,
  2386. .components-dropdown-menu__menu .components-menu-item.has-separator {
  2387. margin-top: 6px;
  2388. position: relative;
  2389. overflow: visible;
  2390. }
  2391. .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator::before,
  2392. .components-dropdown-menu__menu .components-menu-item.has-separator::before {
  2393. display: block;
  2394. content: "";
  2395. box-sizing: content-box;
  2396. background-color: #ddd;
  2397. position: absolute;
  2398. top: -3px;
  2399. left: 0;
  2400. right: 0;
  2401. height: 1px;
  2402. }
  2403. .components-dropdown-menu__menu .components-dropdown-menu__menu-item.is-active svg,
  2404. .components-dropdown-menu__menu .components-menu-item.is-active svg {
  2405. color: #fff;
  2406. background: #1e1e1e;
  2407. box-shadow: 0 0 0 1px #1e1e1e;
  2408. border-radius: 1px;
  2409. }
  2410. .components-dropdown-menu__menu .components-dropdown-menu__menu-item > svg,
  2411. .components-dropdown-menu__menu .components-menu-item > svg {
  2412. border-radius: 2px;
  2413. width: 24px;
  2414. height: 24px;
  2415. }
  2416. .components-dropdown-menu__menu .components-menu-item__button,
  2417. .components-dropdown-menu__menu .components-menu-item__button.components-button {
  2418. min-height: 36px;
  2419. height: auto;
  2420. text-align: left;
  2421. padding-left: 8px;
  2422. padding-right: 8px;
  2423. }
  2424. .components-dropdown-menu__menu .components-menu-group {
  2425. padding: 12px;
  2426. margin-top: 0;
  2427. margin-bottom: 0;
  2428. margin-left: -12px;
  2429. margin-right: -12px;
  2430. }
  2431. .components-dropdown-menu__menu .components-menu-group:first-child {
  2432. margin-top: -12px;
  2433. }
  2434. .components-dropdown-menu__menu .components-menu-group:last-child {
  2435. margin-bottom: -12px;
  2436. }
  2437. .components-dropdown-menu__menu .components-menu-group + .components-menu-group {
  2438. margin-top: 0;
  2439. border-top: 1px solid #ccc;
  2440. padding: 12px;
  2441. }
  2442. .is-alternate .components-dropdown-menu__menu .components-menu-group + .components-menu-group {
  2443. border-color: #1e1e1e;
  2444. }
  2445. .components-font-size-picker__controls {
  2446. max-width: 248px;
  2447. display: flex;
  2448. flex-wrap: wrap;
  2449. align-items: center;
  2450. margin-bottom: 24px;
  2451. }
  2452. .components-font-size-picker__controls .components-unit-control-wrapper {
  2453. margin-right: 8px;
  2454. }
  2455. .components-font-size-picker__controls .components-unit-control-wrapper .components-input-control__label {
  2456. font-weight: 300;
  2457. padding-bottom: 0 !important;
  2458. margin-bottom: 8px !important;
  2459. }
  2460. .components-font-size-picker__controls .components-custom-select-control__button {
  2461. min-width: 120px;
  2462. }
  2463. .components-font-size-picker__controls .components-font-size-picker__number {
  2464. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  2465. padding: 6px 8px;
  2466. box-shadow: 0 0 0 transparent;
  2467. transition: box-shadow 0.1s linear;
  2468. border-radius: 2px;
  2469. border: 1px solid #757575;
  2470. /* Fonts smaller than 16px causes mobile safari to zoom. */
  2471. font-size: 16px;
  2472. /* Override core line-height. To be reviewed. */
  2473. line-height: normal;
  2474. display: inline-block;
  2475. font-weight: 500;
  2476. height: 30px;
  2477. margin-bottom: 0;
  2478. margin-left: 0;
  2479. margin-right: 8px;
  2480. margin-top: 8px;
  2481. width: 54px;
  2482. }
  2483. @media (prefers-reduced-motion: reduce) {
  2484. .components-font-size-picker__controls .components-font-size-picker__number {
  2485. transition-duration: 0s;
  2486. transition-delay: 0s;
  2487. }
  2488. }
  2489. @media (min-width: 600px) {
  2490. .components-font-size-picker__controls .components-font-size-picker__number {
  2491. font-size: 13px;
  2492. /* Override core line-height. To be reviewed. */
  2493. line-height: normal;
  2494. }
  2495. }
  2496. .components-font-size-picker__controls .components-font-size-picker__number:focus {
  2497. border-color: var(--wp-admin-theme-color);
  2498. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  2499. outline: 2px solid transparent;
  2500. }
  2501. .components-font-size-picker__controls .components-font-size-picker__number::-webkit-input-placeholder {
  2502. color: rgba(30, 30, 30, 0.62);
  2503. }
  2504. .components-font-size-picker__controls .components-font-size-picker__number::-moz-placeholder {
  2505. opacity: 1;
  2506. color: rgba(30, 30, 30, 0.62);
  2507. }
  2508. .components-font-size-picker__controls .components-font-size-picker__number:-ms-input-placeholder {
  2509. color: rgba(30, 30, 30, 0.62);
  2510. }
  2511. .components-font-size-picker__controls .components-font-size-picker__number[value=""] + .components-button {
  2512. cursor: default;
  2513. opacity: 0.3;
  2514. pointer-events: none;
  2515. }
  2516. .components-font-size-picker__controls .components-font-size-picker__number-container {
  2517. display: flex;
  2518. flex-direction: column;
  2519. }
  2520. .components-font-size-picker__controls .components-font-size-picker__select {
  2521. margin-right: 8px;
  2522. }
  2523. .components-font-size-picker__controls .components-color-palette__clear {
  2524. height: 30px;
  2525. margin-top: 26px;
  2526. }
  2527. .components-font-size-picker__custom-input .components-range-control__slider + .dashicon {
  2528. width: 30px;
  2529. height: 30px;
  2530. }
  2531. .components-font-size-picker {
  2532. border: 0;
  2533. padding: 0;
  2534. margin: 0;
  2535. }
  2536. .components-form-toggle {
  2537. position: relative;
  2538. display: inline-block;
  2539. }
  2540. .components-form-toggle .components-form-toggle__track {
  2541. content: "";
  2542. display: inline-block;
  2543. box-sizing: border-box;
  2544. vertical-align: top;
  2545. background-color: #fff;
  2546. border: 1px solid #1e1e1e;
  2547. width: 36px;
  2548. height: 18px;
  2549. border-radius: 9px;
  2550. transition: 0.2s background ease;
  2551. }
  2552. @media (prefers-reduced-motion: reduce) {
  2553. .components-form-toggle .components-form-toggle__track {
  2554. transition-duration: 0s;
  2555. transition-delay: 0s;
  2556. }
  2557. }
  2558. .components-form-toggle .components-form-toggle__thumb {
  2559. display: block;
  2560. position: absolute;
  2561. box-sizing: border-box;
  2562. top: 3px;
  2563. left: 3px;
  2564. width: 12px;
  2565. height: 12px;
  2566. border-radius: 50%;
  2567. transition: 0.1s transform ease;
  2568. background-color: #1e1e1e;
  2569. border: 5px solid #1e1e1e;
  2570. }
  2571. @media (prefers-reduced-motion: reduce) {
  2572. .components-form-toggle .components-form-toggle__thumb {
  2573. transition-duration: 0s;
  2574. transition-delay: 0s;
  2575. }
  2576. }
  2577. .components-form-toggle.is-checked .components-form-toggle__track {
  2578. background-color: var(--wp-admin-theme-color);
  2579. border: 1px solid var(--wp-admin-theme-color);
  2580. border: 9px solid transparent;
  2581. }
  2582. .components-form-toggle .components-form-toggle__input:focus + .components-form-toggle__track {
  2583. box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
  2584. outline: 2px solid transparent;
  2585. outline-offset: 2px;
  2586. }
  2587. .components-form-toggle.is-checked .components-form-toggle__thumb {
  2588. background-color: #fff;
  2589. border-width: 0;
  2590. transform: translateX(18px);
  2591. }
  2592. .components-form-toggle.is-disabled, .components-disabled .components-form-toggle {
  2593. opacity: 0.3;
  2594. }
  2595. .components-form-toggle input.components-form-toggle__input[type=checkbox] {
  2596. position: absolute;
  2597. top: 0;
  2598. left: 0;
  2599. width: 100%;
  2600. height: 100%;
  2601. opacity: 0;
  2602. margin: 0;
  2603. padding: 0;
  2604. z-index: 1;
  2605. border: none;
  2606. }
  2607. .components-form-toggle input.components-form-toggle__input[type=checkbox]:checked {
  2608. background: none;
  2609. }
  2610. .components-form-toggle input.components-form-toggle__input[type=checkbox]::before {
  2611. content: "";
  2612. }
  2613. .components-form-token-field__input-container {
  2614. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  2615. padding: 6px 8px;
  2616. box-shadow: 0 0 0 transparent;
  2617. transition: box-shadow 0.1s linear;
  2618. border-radius: 2px;
  2619. border: 1px solid #757575;
  2620. /* Fonts smaller than 16px causes mobile safari to zoom. */
  2621. font-size: 16px;
  2622. /* Override core line-height. To be reviewed. */
  2623. line-height: normal;
  2624. display: flex;
  2625. flex-wrap: wrap;
  2626. align-items: center;
  2627. width: 100%;
  2628. margin: 0 0 8px 0;
  2629. padding: 2px 4px;
  2630. cursor: text;
  2631. }
  2632. @media (prefers-reduced-motion: reduce) {
  2633. .components-form-token-field__input-container {
  2634. transition-duration: 0s;
  2635. transition-delay: 0s;
  2636. }
  2637. }
  2638. @media (min-width: 600px) {
  2639. .components-form-token-field__input-container {
  2640. font-size: 13px;
  2641. /* Override core line-height. To be reviewed. */
  2642. line-height: normal;
  2643. }
  2644. }
  2645. .components-form-token-field__input-container:focus {
  2646. border-color: var(--wp-admin-theme-color);
  2647. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  2648. outline: 2px solid transparent;
  2649. }
  2650. .components-form-token-field__input-container::-webkit-input-placeholder {
  2651. color: rgba(30, 30, 30, 0.62);
  2652. }
  2653. .components-form-token-field__input-container::-moz-placeholder {
  2654. opacity: 1;
  2655. color: rgba(30, 30, 30, 0.62);
  2656. }
  2657. .components-form-token-field__input-container:-ms-input-placeholder {
  2658. color: rgba(30, 30, 30, 0.62);
  2659. }
  2660. .components-form-token-field__input-container.is-disabled {
  2661. background: #ddd;
  2662. border-color: #ddd;
  2663. }
  2664. .components-form-token-field__input-container.is-active {
  2665. border-color: var(--wp-admin-theme-color);
  2666. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  2667. outline: 2px solid transparent;
  2668. }
  2669. .components-form-token-field__input-container input[type=text].components-form-token-field__input {
  2670. display: inline-block;
  2671. flex: 1;
  2672. font-size: 16px;
  2673. width: 100%;
  2674. max-width: 100%;
  2675. margin-left: 4px;
  2676. padding: 0;
  2677. min-height: 24px;
  2678. min-width: 50px;
  2679. background: inherit;
  2680. border: 0;
  2681. color: #1e1e1e;
  2682. box-shadow: none;
  2683. }
  2684. @media (min-width: 600px) {
  2685. .components-form-token-field__input-container input[type=text].components-form-token-field__input {
  2686. font-size: 13px;
  2687. }
  2688. }
  2689. .components-form-token-field__input-container input[type=text].components-form-token-field__input:focus, .components-form-token-field.is-active .components-form-token-field__input-container input[type=text].components-form-token-field__input {
  2690. outline: none;
  2691. box-shadow: none;
  2692. }
  2693. .components-form-token-field__input-container .components-form-token-field__token + input[type=text].components-form-token-field__input {
  2694. width: auto;
  2695. }
  2696. .components-form-token-field__label {
  2697. display: inline-block;
  2698. margin-bottom: 4px;
  2699. }
  2700. .components-form-token-field__help {
  2701. font-size: 12px;
  2702. font-style: normal;
  2703. color: #757575;
  2704. }
  2705. .components-form-token-field__token {
  2706. font-size: 13px;
  2707. display: flex;
  2708. margin: 2px 4px 2px 0;
  2709. color: #1e1e1e;
  2710. max-width: 100%;
  2711. }
  2712. .components-form-token-field__token.is-success .components-form-token-field__token-text,
  2713. .components-form-token-field__token.is-success .components-form-token-field__remove-token {
  2714. background: #4ab866;
  2715. }
  2716. .components-form-token-field__token.is-error .components-form-token-field__token-text,
  2717. .components-form-token-field__token.is-error .components-form-token-field__remove-token {
  2718. background: #cc1818;
  2719. }
  2720. .components-form-token-field__token.is-validating .components-form-token-field__token-text,
  2721. .components-form-token-field__token.is-validating .components-form-token-field__remove-token {
  2722. color: #757575;
  2723. }
  2724. .components-form-token-field__token.is-borderless {
  2725. position: relative;
  2726. padding: 0 16px 0 0;
  2727. }
  2728. .components-form-token-field__token.is-borderless .components-form-token-field__token-text {
  2729. background: transparent;
  2730. color: var(--wp-admin-theme-color);
  2731. }
  2732. .components-form-token-field__token.is-borderless .components-form-token-field__remove-token {
  2733. background: transparent;
  2734. color: #757575;
  2735. position: absolute;
  2736. top: 1px;
  2737. right: 0;
  2738. }
  2739. .components-form-token-field__token.is-borderless.is-success .components-form-token-field__token-text {
  2740. color: #4ab866;
  2741. }
  2742. .components-form-token-field__token.is-borderless.is-error .components-form-token-field__token-text {
  2743. color: #cc1818;
  2744. border-radius: 4px 0 0 4px;
  2745. padding: 0 4px 0 6px;
  2746. }
  2747. .components-form-token-field__token.is-borderless.is-validating .components-form-token-field__token-text {
  2748. color: #1e1e1e;
  2749. }
  2750. .components-form-token-field__token.is-disabled .components-form-token-field__remove-token {
  2751. cursor: default;
  2752. }
  2753. .components-form-token-field__token-text,
  2754. .components-form-token-field__remove-token.components-button {
  2755. display: inline-block;
  2756. line-height: 24px;
  2757. height: auto;
  2758. background: #ddd;
  2759. min-width: unset;
  2760. transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
  2761. }
  2762. @media (prefers-reduced-motion: reduce) {
  2763. .components-form-token-field__token-text,
  2764. .components-form-token-field__remove-token.components-button {
  2765. transition-duration: 0s;
  2766. transition-delay: 0s;
  2767. animation-duration: 1ms;
  2768. animation-delay: 0s;
  2769. }
  2770. }
  2771. .components-form-token-field__token-text {
  2772. border-radius: 2px 0 0 2px;
  2773. padding: 0 0 0 8px;
  2774. white-space: nowrap;
  2775. overflow: hidden;
  2776. text-overflow: ellipsis;
  2777. }
  2778. .components-form-token-field__remove-token.components-button {
  2779. cursor: pointer;
  2780. border-radius: 0 2px 2px 0;
  2781. padding: 0 2px;
  2782. color: #1e1e1e;
  2783. line-height: 10px;
  2784. overflow: initial;
  2785. }
  2786. .components-form-token-field__remove-token.components-button:hover {
  2787. color: #1e1e1e;
  2788. }
  2789. .components-form-token-field__suggestions-list {
  2790. flex: 1 0 100%;
  2791. min-width: 100%;
  2792. max-height: 9em;
  2793. overflow-y: auto;
  2794. transition: all 0.15s ease-in-out;
  2795. list-style: none;
  2796. border-top: 1px solid #757575;
  2797. margin: 4px -4px -4px;
  2798. padding: 0;
  2799. }
  2800. @media (prefers-reduced-motion: reduce) {
  2801. .components-form-token-field__suggestions-list {
  2802. transition-duration: 0s;
  2803. transition-delay: 0s;
  2804. }
  2805. }
  2806. .components-form-token-field__suggestion {
  2807. color: #757575;
  2808. display: block;
  2809. font-size: 13px;
  2810. padding: 4px 8px;
  2811. margin: 0;
  2812. cursor: pointer;
  2813. }
  2814. .components-form-token-field__suggestion.is-selected {
  2815. background: var(--wp-admin-theme-color);
  2816. color: #fff;
  2817. }
  2818. .components-form-token-field__suggestion-match {
  2819. text-decoration: underline;
  2820. }
  2821. @media (min-width: 600px) {
  2822. .components-guide {
  2823. width: 600px;
  2824. }
  2825. }
  2826. .components-guide .components-modal__header {
  2827. background: none;
  2828. border-bottom: none;
  2829. width: 100%;
  2830. padding: 0;
  2831. margin: 0;
  2832. }
  2833. .components-guide .components-modal__header .components-button {
  2834. align-self: flex-start;
  2835. margin: 8px 8px 0 0;
  2836. position: static;
  2837. }
  2838. .components-guide .components-modal__header .components-button:hover svg {
  2839. fill: #fff;
  2840. }
  2841. .components-guide__container {
  2842. display: flex;
  2843. flex-direction: column;
  2844. justify-content: space-between;
  2845. margin-top: -60px;
  2846. min-height: 100%;
  2847. }
  2848. .components-guide__page {
  2849. display: flex;
  2850. flex-direction: column;
  2851. justify-content: center;
  2852. position: relative;
  2853. }
  2854. @media (min-width: 600px) {
  2855. .components-guide__page {
  2856. min-height: 300px;
  2857. }
  2858. }
  2859. .components-guide__footer {
  2860. align-content: center;
  2861. display: flex;
  2862. height: 30px;
  2863. justify-content: center;
  2864. margin: 0 0 24px 0;
  2865. padding: 0 32px;
  2866. position: relative;
  2867. width: 100%;
  2868. }
  2869. @media (max-width: 600px) {
  2870. .components-guide__footer {
  2871. position: absolute;
  2872. bottom: 0;
  2873. }
  2874. }
  2875. .components-guide__page-control {
  2876. margin: 0;
  2877. text-align: center;
  2878. }
  2879. .components-guide__page-control li {
  2880. display: inline-block;
  2881. margin: 0;
  2882. }
  2883. .components-guide__page-control .components-button {
  2884. height: 30px;
  2885. min-width: 20px;
  2886. margin: -6px 0;
  2887. }
  2888. .components-guide .components-modal__content {
  2889. padding: 0;
  2890. }
  2891. .components-modal__frame.components-guide {
  2892. border: none;
  2893. min-width: 312px;
  2894. height: 80vh;
  2895. max-height: 575px;
  2896. }
  2897. @media (max-width: 600px) {
  2898. .components-modal__frame.components-guide {
  2899. bottom: 5%;
  2900. left: 16px;
  2901. right: 16px;
  2902. top: 5%;
  2903. margin: 0 auto;
  2904. }
  2905. }
  2906. .components-button.components-guide__back-button, .components-button.components-guide__forward-button, .components-button.components-guide__finish-button {
  2907. height: 30px;
  2908. position: absolute;
  2909. }
  2910. .components-button.components-guide__back-button, .components-button.components-guide__forward-button {
  2911. font-size: 13px;
  2912. padding: 4px 2px;
  2913. }
  2914. .components-button.components-guide__back-button.has-text svg, .components-button.components-guide__forward-button.has-text svg {
  2915. margin: 0;
  2916. }
  2917. .components-button.components-guide__back-button:hover, .components-button.components-guide__forward-button:hover {
  2918. text-decoration: underline;
  2919. }
  2920. .components-button.components-guide__back-button {
  2921. left: 32px;
  2922. }
  2923. .components-button.components-guide__forward-button {
  2924. right: 32px;
  2925. color: #1386bf;
  2926. font-weight: bold;
  2927. }
  2928. .components-button.components-guide__finish-button {
  2929. right: 32px;
  2930. }
  2931. .components-button.components-guide__inline-finish-button {
  2932. display: none;
  2933. }
  2934. [role=region] {
  2935. position: relative;
  2936. }
  2937. .is-focusing-regions [role=region]:focus::after {
  2938. content: "";
  2939. position: absolute;
  2940. top: 0;
  2941. bottom: 0;
  2942. left: 0;
  2943. right: 0;
  2944. pointer-events: none;
  2945. outline: 4px solid transparent;
  2946. box-shadow: inset 0 0 0 4px var(--wp-admin-theme-color);
  2947. }
  2948. @supports (outline-offset: 1px) {
  2949. .is-focusing-regions [role=region]:focus::after {
  2950. content: none;
  2951. }
  2952. .is-focusing-regions [role=region]:focus {
  2953. outline-style: solid;
  2954. outline-color: var(--wp-admin-theme-color);
  2955. outline-width: 4px;
  2956. outline-offset: -4px;
  2957. }
  2958. }
  2959. .components-menu-group + .components-menu-group {
  2960. margin-top: 8px;
  2961. padding-top: 8px;
  2962. border-top: 1px solid #1e1e1e;
  2963. }
  2964. .components-menu-group + .components-menu-group.has-hidden-separator {
  2965. border-top: none;
  2966. margin-top: 0;
  2967. padding-top: 0;
  2968. }
  2969. .components-menu-group__label {
  2970. padding: 0 8px;
  2971. margin-top: 4px;
  2972. margin-bottom: 12px;
  2973. color: #757575;
  2974. text-transform: uppercase;
  2975. font-size: 11px;
  2976. font-weight: 500;
  2977. }
  2978. .components-menu-item__button,
  2979. .components-menu-item__button.components-button {
  2980. width: 100%;
  2981. }
  2982. .components-menu-item__button .components-menu-items__item-icon,
  2983. .components-menu-item__button.components-button .components-menu-items__item-icon {
  2984. margin-right: -2px;
  2985. margin-left: 24px;
  2986. display: inline-block;
  2987. flex: 0 0 auto;
  2988. }
  2989. .components-menu-item__button .components-menu-item__shortcut + .components-menu-items__item-icon,
  2990. .components-menu-item__button.components-button .components-menu-item__shortcut + .components-menu-items__item-icon {
  2991. margin-left: 8px;
  2992. }
  2993. .components-menu-item__button .block-editor-block-icon,
  2994. .components-menu-item__button.components-button .block-editor-block-icon {
  2995. margin-left: -2px;
  2996. margin-right: 8px;
  2997. }
  2998. .components-menu-item__button.is-primary,
  2999. .components-menu-item__button.components-button.is-primary {
  3000. justify-content: center;
  3001. }
  3002. .components-menu-item__button.is-primary .components-menu-item__item,
  3003. .components-menu-item__button.components-button.is-primary .components-menu-item__item {
  3004. margin-right: 0;
  3005. }
  3006. .components-menu-item__info-wrapper {
  3007. display: flex;
  3008. flex-direction: column;
  3009. margin-right: auto;
  3010. }
  3011. .components-menu-item__info {
  3012. margin-top: 4px;
  3013. font-size: 12px;
  3014. color: #757575;
  3015. white-space: normal;
  3016. }
  3017. .components-menu-item__item {
  3018. white-space: nowrap;
  3019. margin-right: auto;
  3020. display: inline-flex;
  3021. align-items: center;
  3022. }
  3023. .components-menu-item__shortcut {
  3024. align-self: center;
  3025. margin-right: 0;
  3026. margin-left: auto;
  3027. padding-left: 24px;
  3028. color: currentColor;
  3029. display: none;
  3030. }
  3031. @media (min-width: 480px) {
  3032. .components-menu-item__shortcut {
  3033. display: inline;
  3034. }
  3035. }
  3036. .components-menu-items-choice svg,
  3037. .components-menu-items-choice.components-button svg {
  3038. margin-right: 12px;
  3039. }
  3040. .components-menu-items-choice.has-icon,
  3041. .components-menu-items-choice.components-button.has-icon {
  3042. padding-left: 12px;
  3043. }
  3044. .components-modal__screen-overlay {
  3045. position: fixed;
  3046. top: 0;
  3047. right: 0;
  3048. bottom: 0;
  3049. left: 0;
  3050. background-color: rgba(0, 0, 0, 0.35);
  3051. z-index: 100000;
  3052. animation: edit-post__fade-in-animation 0.2s ease-out 0s;
  3053. animation-fill-mode: forwards;
  3054. }
  3055. @media (prefers-reduced-motion: reduce) {
  3056. .components-modal__screen-overlay {
  3057. animation-duration: 1ms;
  3058. animation-delay: 0s;
  3059. }
  3060. }
  3061. .components-modal__frame {
  3062. position: absolute;
  3063. top: 0;
  3064. right: 0;
  3065. bottom: 0;
  3066. left: 0;
  3067. box-sizing: border-box;
  3068. margin: 0;
  3069. background: #fff;
  3070. box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
  3071. border-radius: 2px;
  3072. overflow: auto;
  3073. }
  3074. @media (min-width: 600px) {
  3075. .components-modal__frame {
  3076. top: 50%;
  3077. right: auto;
  3078. bottom: auto;
  3079. left: 50%;
  3080. min-width: 360px;
  3081. max-width: calc(100% - 16px - 16px);
  3082. max-height: 90%;
  3083. transform: translate(-50%, -50%);
  3084. animation: components-modal__appear-animation 0.1s ease-out;
  3085. animation-fill-mode: forwards;
  3086. }
  3087. }
  3088. @media (min-width: 600px) and (prefers-reduced-motion: reduce) {
  3089. .components-modal__frame {
  3090. animation-duration: 1ms;
  3091. animation-delay: 0s;
  3092. }
  3093. }
  3094. @keyframes components-modal__appear-animation {
  3095. from {
  3096. margin-top: 32px;
  3097. }
  3098. to {
  3099. margin-top: 0;
  3100. }
  3101. }
  3102. .components-modal__header {
  3103. box-sizing: border-box;
  3104. border-bottom: 1px solid #ddd;
  3105. padding: 0 32px;
  3106. display: flex;
  3107. flex-direction: row;
  3108. justify-content: space-between;
  3109. background: #fff;
  3110. align-items: center;
  3111. height: 60px;
  3112. z-index: 10;
  3113. position: relative;
  3114. position: sticky;
  3115. top: 0;
  3116. margin: 0 -32px 24px;
  3117. }
  3118. @supports (-ms-ime-align: auto) {
  3119. .components-modal__header {
  3120. position: fixed;
  3121. width: 100%;
  3122. }
  3123. }
  3124. .components-modal__header .components-modal__header-heading {
  3125. font-size: 1rem;
  3126. font-weight: 600;
  3127. }
  3128. .components-modal__header h1 {
  3129. line-height: 1;
  3130. margin: 0;
  3131. }
  3132. .components-modal__header .components-button {
  3133. position: relative;
  3134. left: 8px;
  3135. }
  3136. .components-modal__header-heading-container {
  3137. align-items: center;
  3138. flex-grow: 1;
  3139. display: flex;
  3140. flex-direction: row;
  3141. justify-content: left;
  3142. }
  3143. .components-modal__header-icon-container {
  3144. display: inline-block;
  3145. }
  3146. .components-modal__header-icon-container svg {
  3147. max-width: 36px;
  3148. max-height: 36px;
  3149. padding: 8px;
  3150. }
  3151. .components-modal__content {
  3152. box-sizing: border-box;
  3153. height: 100%;
  3154. padding: 0 32px 24px;
  3155. }
  3156. @supports (-ms-ime-align: auto) {
  3157. .components-modal__content {
  3158. padding-top: 60px;
  3159. }
  3160. }
  3161. .components-notice {
  3162. display: flex;
  3163. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  3164. font-size: 13px;
  3165. background-color: #fff;
  3166. border-left: 4px solid var(--wp-admin-theme-color);
  3167. margin: 5px 15px 2px;
  3168. padding: 8px 12px;
  3169. align-items: center;
  3170. }
  3171. .components-notice.is-dismissible {
  3172. padding-right: 36px;
  3173. position: relative;
  3174. }
  3175. .components-notice.is-success {
  3176. border-left-color: #4ab866;
  3177. background-color: #eff9f1;
  3178. }
  3179. .components-notice.is-warning {
  3180. border-left-color: #f0b849;
  3181. background-color: #fef8ee;
  3182. }
  3183. .components-notice.is-error {
  3184. border-left-color: #cc1818;
  3185. background-color: #f4a2a2;
  3186. }
  3187. .components-notice__content {
  3188. flex-grow: 1;
  3189. margin: 4px 25px 4px 0;
  3190. }
  3191. .components-notice__actions {
  3192. display: flex;
  3193. flex-wrap: wrap;
  3194. }
  3195. .components-notice__action.components-button {
  3196. margin-right: 8px;
  3197. }
  3198. .components-notice__action.components-button, .components-notice__action.components-button.is-link {
  3199. margin-left: 12px;
  3200. }
  3201. .components-notice__action.components-button.is-secondary {
  3202. vertical-align: initial;
  3203. }
  3204. .components-notice__dismiss {
  3205. color: #757575;
  3206. align-self: flex-start;
  3207. flex-shrink: 0;
  3208. }
  3209. .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):active, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):focus {
  3210. color: #1e1e1e;
  3211. background-color: transparent;
  3212. }
  3213. .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
  3214. box-shadow: none;
  3215. }
  3216. .components-notice-list {
  3217. max-width: 100vw;
  3218. box-sizing: border-box;
  3219. }
  3220. .components-notice-list .components-notice__content {
  3221. margin-top: 12px;
  3222. margin-bottom: 12px;
  3223. line-height: 2;
  3224. }
  3225. .components-notice-list .components-notice__action.components-button {
  3226. display: block;
  3227. margin-left: 0;
  3228. margin-top: 8px;
  3229. }
  3230. .components-panel {
  3231. background: #fff;
  3232. border: 1px solid #e0e0e0;
  3233. }
  3234. .components-panel > .components-panel__header:first-child,
  3235. .components-panel > .components-panel__body:first-child {
  3236. margin-top: -1px;
  3237. }
  3238. .components-panel > .components-panel__header:last-child,
  3239. .components-panel > .components-panel__body:last-child {
  3240. border-bottom-width: 0;
  3241. }
  3242. .components-panel + .components-panel {
  3243. margin-top: -1px;
  3244. }
  3245. .components-panel__body {
  3246. border-top: 1px solid #e0e0e0;
  3247. border-bottom: 1px solid #e0e0e0;
  3248. }
  3249. .components-panel__body h3 {
  3250. margin: 0 0 0.5em;
  3251. }
  3252. .components-panel__body.is-opened {
  3253. padding: 16px;
  3254. }
  3255. .components-panel__header {
  3256. display: flex;
  3257. justify-content: space-between;
  3258. align-items: center;
  3259. padding: 0 16px;
  3260. height: 48px;
  3261. border-top: 1px solid #ddd;
  3262. border-bottom: 1px solid #ddd;
  3263. }
  3264. .components-panel__header h2 {
  3265. margin: 0;
  3266. font-size: inherit;
  3267. color: inherit;
  3268. }
  3269. .components-panel__body + .components-panel__body,
  3270. .components-panel__body + .components-panel__header,
  3271. .components-panel__header + .components-panel__body,
  3272. .components-panel__header + .components-panel__header {
  3273. margin-top: -1px;
  3274. }
  3275. .components-panel__body > .components-panel__body-title {
  3276. display: block;
  3277. padding: 0;
  3278. font-size: inherit;
  3279. margin-top: 0;
  3280. margin-bottom: 0;
  3281. transition: 0.1s background ease-in-out;
  3282. }
  3283. @media (prefers-reduced-motion: reduce) {
  3284. .components-panel__body > .components-panel__body-title {
  3285. transition-duration: 0s;
  3286. transition-delay: 0s;
  3287. }
  3288. }
  3289. .components-panel__body.is-opened > .components-panel__body-title {
  3290. margin: -16px;
  3291. margin-bottom: 5px;
  3292. }
  3293. .components-panel__body > .components-panel__body-title:hover {
  3294. background: #f0f0f0;
  3295. border: none;
  3296. }
  3297. .components-panel__body-toggle.components-button {
  3298. position: relative;
  3299. padding: 16px 48px 16px 16px;
  3300. outline: none;
  3301. width: 100%;
  3302. font-weight: 500;
  3303. text-align: left;
  3304. color: #1e1e1e;
  3305. border: none;
  3306. box-shadow: none;
  3307. transition: 0.1s background ease-in-out;
  3308. height: auto;
  3309. /* rtl:begin:ignore */
  3310. /* rtl:end:ignore */
  3311. }
  3312. @media (prefers-reduced-motion: reduce) {
  3313. .components-panel__body-toggle.components-button {
  3314. transition-duration: 0s;
  3315. transition-delay: 0s;
  3316. }
  3317. }
  3318. .components-panel__body-toggle.components-button:focus {
  3319. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  3320. border-radius: 0;
  3321. }
  3322. .components-panel__body-toggle.components-button .components-panel__arrow {
  3323. position: absolute;
  3324. right: 16px;
  3325. top: 50%;
  3326. transform: translateY(-50%);
  3327. color: #1e1e1e;
  3328. fill: currentColor;
  3329. transition: 0.1s color ease-in-out;
  3330. }
  3331. @media (prefers-reduced-motion: reduce) {
  3332. .components-panel__body-toggle.components-button .components-panel__arrow {
  3333. transition-duration: 0s;
  3334. transition-delay: 0s;
  3335. }
  3336. }
  3337. body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right {
  3338. transform: scaleX(-1);
  3339. -ms-filter: fliph;
  3340. filter: FlipH;
  3341. margin-top: -10px;
  3342. }
  3343. .components-panel__icon {
  3344. color: #757575;
  3345. margin: -2px 0 -2px 6px;
  3346. }
  3347. .components-panel__body-toggle-icon {
  3348. margin-right: -5px;
  3349. }
  3350. .components-panel__color-title {
  3351. float: left;
  3352. height: 19px;
  3353. }
  3354. .components-panel__row {
  3355. display: flex;
  3356. justify-content: space-between;
  3357. align-items: center;
  3358. margin-top: 8px;
  3359. min-height: 36px;
  3360. }
  3361. .components-panel__row select {
  3362. min-width: 0;
  3363. }
  3364. .components-panel__row label {
  3365. margin-right: 12px;
  3366. flex-shrink: 0;
  3367. max-width: 75%;
  3368. }
  3369. .components-panel__row:empty, .components-panel__row:first-of-type {
  3370. margin-top: 0;
  3371. }
  3372. .components-panel .circle-picker {
  3373. padding-bottom: 20px;
  3374. }
  3375. .components-placeholder.components-placeholder {
  3376. box-sizing: border-box;
  3377. position: relative;
  3378. padding: 1em;
  3379. min-height: 200px;
  3380. width: 100%;
  3381. text-align: left;
  3382. margin: 0;
  3383. color: #1e1e1e;
  3384. -moz-font-smoothing: subpixel-antialiased;
  3385. -webkit-font-smoothing: subpixel-antialiased;
  3386. border-radius: 2px;
  3387. background-color: #fff;
  3388. box-shadow: inset 0 0 0 1px #1e1e1e;
  3389. outline: 1px solid transparent;
  3390. }
  3391. @supports (position: sticky) {
  3392. .components-placeholder.components-placeholder {
  3393. display: flex;
  3394. flex-direction: column;
  3395. justify-content: center;
  3396. align-items: flex-start;
  3397. }
  3398. }
  3399. .components-placeholder.components-placeholder .components-base-control__label {
  3400. font-size: 13px;
  3401. }
  3402. .components-placeholder__error,
  3403. .components-placeholder__instructions,
  3404. .components-placeholder__label,
  3405. .components-placeholder__fieldset {
  3406. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  3407. font-size: 13px;
  3408. }
  3409. .components-placeholder__label {
  3410. display: flex;
  3411. font-weight: 600;
  3412. margin-bottom: 16px;
  3413. align-items: center;
  3414. }
  3415. .components-placeholder__label > svg,
  3416. .components-placeholder__label .dashicon,
  3417. .components-placeholder__label .block-editor-block-icon {
  3418. fill: currentColor;
  3419. margin-right: 1ch;
  3420. }
  3421. .components-placeholder__label:empty {
  3422. display: none;
  3423. }
  3424. .components-placeholder__fieldset,
  3425. .components-placeholder__fieldset form {
  3426. display: flex;
  3427. flex-direction: row;
  3428. width: 100%;
  3429. flex-wrap: wrap;
  3430. }
  3431. .components-placeholder__fieldset p,
  3432. .components-placeholder__fieldset form p {
  3433. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  3434. font-size: 13px;
  3435. }
  3436. .components-placeholder__fieldset.is-column-layout,
  3437. .components-placeholder__fieldset.is-column-layout form {
  3438. flex-direction: column;
  3439. }
  3440. .components-placeholder__input[type=url] {
  3441. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  3442. padding: 6px 8px;
  3443. box-shadow: 0 0 0 transparent;
  3444. transition: box-shadow 0.1s linear;
  3445. border-radius: 2px;
  3446. border: 1px solid #757575;
  3447. /* Fonts smaller than 16px causes mobile safari to zoom. */
  3448. font-size: 16px;
  3449. /* Override core line-height. To be reviewed. */
  3450. line-height: normal;
  3451. margin: 0 8px 0 0;
  3452. flex: 1 1 auto;
  3453. }
  3454. @media (prefers-reduced-motion: reduce) {
  3455. .components-placeholder__input[type=url] {
  3456. transition-duration: 0s;
  3457. transition-delay: 0s;
  3458. }
  3459. }
  3460. @media (min-width: 600px) {
  3461. .components-placeholder__input[type=url] {
  3462. font-size: 13px;
  3463. /* Override core line-height. To be reviewed. */
  3464. line-height: normal;
  3465. }
  3466. }
  3467. .components-placeholder__input[type=url]:focus {
  3468. border-color: var(--wp-admin-theme-color);
  3469. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  3470. outline: 2px solid transparent;
  3471. }
  3472. .components-placeholder__input[type=url]::-webkit-input-placeholder {
  3473. color: rgba(30, 30, 30, 0.62);
  3474. }
  3475. .components-placeholder__input[type=url]::-moz-placeholder {
  3476. opacity: 1;
  3477. color: rgba(30, 30, 30, 0.62);
  3478. }
  3479. .components-placeholder__input[type=url]:-ms-input-placeholder {
  3480. color: rgba(30, 30, 30, 0.62);
  3481. }
  3482. .components-placeholder__instructions {
  3483. margin-bottom: 1em;
  3484. }
  3485. .components-placeholder__error {
  3486. margin-top: 1em;
  3487. width: 100%;
  3488. }
  3489. .components-placeholder__preview img {
  3490. margin: 3%;
  3491. width: 50%;
  3492. }
  3493. .components-placeholder__fieldset .components-button {
  3494. margin-right: 12px;
  3495. margin-bottom: 12px;
  3496. }
  3497. .components-placeholder__fieldset .components-button:last-child {
  3498. margin-bottom: 0;
  3499. margin-right: 0;
  3500. }
  3501. .components-placeholder__fieldset .components-button:not(.is-link) ~ .components-button.is-link {
  3502. margin-left: 10px;
  3503. margin-right: 10px;
  3504. }
  3505. .components-placeholder__fieldset .components-button:not(.is-link) ~ .components-button.is-link:last-child {
  3506. margin-right: 0;
  3507. }
  3508. .components-placeholder.is-large .components-placeholder__label {
  3509. font-size: 18pt;
  3510. font-weight: normal;
  3511. }
  3512. .components-placeholder.is-medium .components-placeholder__instructions, .components-placeholder.is-small .components-placeholder__instructions {
  3513. display: none;
  3514. }
  3515. .components-placeholder.is-medium .components-placeholder__fieldset,
  3516. .components-placeholder.is-medium .components-placeholder__fieldset form, .components-placeholder.is-small .components-placeholder__fieldset,
  3517. .components-placeholder.is-small .components-placeholder__fieldset form {
  3518. flex-direction: column;
  3519. }
  3520. .components-placeholder.is-medium .components-placeholder__fieldset .components-button, .components-placeholder.is-small .components-placeholder__fieldset .components-button {
  3521. margin-right: auto;
  3522. }
  3523. .components-placeholder.is-small .components-button {
  3524. padding: 0 8px 2px;
  3525. }
  3526. /*!rtl:begin:ignore*/
  3527. .components-popover {
  3528. position: fixed;
  3529. z-index: 1000000;
  3530. top: 0;
  3531. left: 0;
  3532. opacity: 0;
  3533. }
  3534. .components-popover.is-expanded, .components-popover[data-x-axis][data-y-axis] {
  3535. opacity: 1;
  3536. }
  3537. .components-popover.is-expanded {
  3538. top: 0;
  3539. left: 0;
  3540. right: 0;
  3541. bottom: 0;
  3542. z-index: 1000000 !important;
  3543. }
  3544. .components-popover:not(.is-without-arrow) {
  3545. margin-left: 2px;
  3546. }
  3547. .components-popover:not(.is-without-arrow)::before {
  3548. border: 8px solid #ccc;
  3549. }
  3550. .components-popover:not(.is-without-arrow).is-alternate::before {
  3551. border-color: #1e1e1e;
  3552. }
  3553. .components-popover:not(.is-without-arrow)::after {
  3554. border: 8px solid #fff;
  3555. }
  3556. .components-popover:not(.is-without-arrow)::before, .components-popover:not(.is-without-arrow)::after {
  3557. content: "";
  3558. position: absolute;
  3559. height: 0;
  3560. width: 0;
  3561. line-height: 0;
  3562. }
  3563. .components-popover:not(.is-without-arrow)[data-y-axis=top] {
  3564. margin-top: -8px;
  3565. }
  3566. .components-popover:not(.is-without-arrow)[data-y-axis=top]::before {
  3567. bottom: -8px;
  3568. }
  3569. .components-popover:not(.is-without-arrow)[data-y-axis=top]::after {
  3570. bottom: -6px;
  3571. }
  3572. .components-popover:not(.is-without-arrow)[data-y-axis=top]::before, .components-popover:not(.is-without-arrow)[data-y-axis=top]::after {
  3573. border-bottom: none;
  3574. border-left-color: transparent;
  3575. border-right-color: transparent;
  3576. border-top-style: solid;
  3577. margin-left: -10px;
  3578. }
  3579. .components-popover:not(.is-without-arrow)[data-y-axis=bottom] {
  3580. margin-top: 8px;
  3581. }
  3582. .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::before {
  3583. top: -8px;
  3584. }
  3585. .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::after {
  3586. top: -6px;
  3587. }
  3588. .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::before, .components-popover:not(.is-without-arrow)[data-y-axis=bottom]::after {
  3589. border-bottom-style: solid;
  3590. border-left-color: transparent;
  3591. border-right-color: transparent;
  3592. border-top: none;
  3593. margin-left: -10px;
  3594. }
  3595. .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left] {
  3596. margin-left: -8px;
  3597. }
  3598. .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::before {
  3599. right: -8px;
  3600. }
  3601. .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::after {
  3602. right: -6px;
  3603. }
  3604. .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::before, .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=left]::after {
  3605. border-bottom-color: transparent;
  3606. border-left-style: solid;
  3607. border-right: none;
  3608. border-top-color: transparent;
  3609. }
  3610. .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right] {
  3611. margin-left: 8px;
  3612. }
  3613. .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::before {
  3614. left: -8px;
  3615. }
  3616. .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::after {
  3617. left: -6px;
  3618. }
  3619. .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::before, .components-popover:not(.is-without-arrow)[data-y-axis=middle][data-x-axis=right]::after {
  3620. border-bottom-color: transparent;
  3621. border-left: none;
  3622. border-right-style: solid;
  3623. border-top-color: transparent;
  3624. }
  3625. .components-popover[data-y-axis=top] {
  3626. bottom: 100%;
  3627. }
  3628. .components-popover[data-y-axis=bottom] {
  3629. top: 100%;
  3630. }
  3631. .components-popover[data-y-axis=middle] {
  3632. align-items: center;
  3633. display: flex;
  3634. }
  3635. .components-popover.is-from-top {
  3636. margin-top: 12px;
  3637. }
  3638. .components-popover.is-from-bottom {
  3639. margin-top: -12px;
  3640. }
  3641. .components-popover.is-from-left:not(.is-from-top):not(.is-from-bottom) {
  3642. margin-left: 12px;
  3643. }
  3644. .components-popover.is-from-right:not(.is-from-top):not(.is-from-bottom) {
  3645. margin-right: 12px;
  3646. }
  3647. .components-popover__content {
  3648. height: 100%;
  3649. background: #fff;
  3650. border: 1px solid #ccc;
  3651. box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  3652. border-radius: 2px;
  3653. }
  3654. .is-alternate .components-popover__content {
  3655. border: 1px solid #1e1e1e;
  3656. box-shadow: none;
  3657. }
  3658. .components-popover .components-popover__content {
  3659. position: absolute;
  3660. height: auto;
  3661. overflow-y: auto;
  3662. }
  3663. .components-popover.is-expanded .components-popover__content {
  3664. position: static;
  3665. height: calc(100% - 48px);
  3666. overflow-y: visible;
  3667. min-width: auto;
  3668. border: none;
  3669. border-top: 1px solid #1e1e1e;
  3670. }
  3671. .components-popover[data-y-axis=top] .components-popover__content {
  3672. bottom: 100%;
  3673. }
  3674. .components-popover[data-x-axis=center] .components-popover__content {
  3675. left: 50%;
  3676. transform: translateX(-50%);
  3677. }
  3678. .components-popover[data-x-axis=right] .components-popover__content {
  3679. position: absolute;
  3680. left: 100%;
  3681. }
  3682. .components-popover:not([data-y-axis=middle])[data-x-axis=right] .components-popover__content {
  3683. margin-left: -25px;
  3684. }
  3685. .components-popover[data-x-axis=left] .components-popover__content {
  3686. position: absolute;
  3687. right: 100%;
  3688. }
  3689. .components-popover:not([data-y-axis=middle])[data-x-axis=left] .components-popover__content {
  3690. margin-right: -25px;
  3691. }
  3692. .components-popover__header {
  3693. align-items: center;
  3694. background: #fff;
  3695. display: flex;
  3696. height: 48px;
  3697. justify-content: space-between;
  3698. padding: 0 8px 0 16px;
  3699. }
  3700. .components-popover__header-title {
  3701. overflow: hidden;
  3702. text-overflow: ellipsis;
  3703. white-space: nowrap;
  3704. width: 100%;
  3705. }
  3706. .components-popover__close.components-button {
  3707. z-index: 5;
  3708. }
  3709. /*!rtl:end:ignore*/
  3710. .components-radio-control {
  3711. display: flex;
  3712. flex-direction: column;
  3713. }
  3714. .components-radio-control .components-base-control__help {
  3715. margin-top: 0;
  3716. }
  3717. .components-radio-control .components-base-control__field {
  3718. margin-bottom: 0;
  3719. }
  3720. .components-radio-control__option:not(:last-child) {
  3721. margin-bottom: 4px;
  3722. }
  3723. .components-radio-control__input[type=radio] {
  3724. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  3725. padding: 6px 8px;
  3726. box-shadow: 0 0 0 transparent;
  3727. transition: box-shadow 0.1s linear;
  3728. border-radius: 2px;
  3729. border: 1px solid #757575;
  3730. /* Fonts smaller than 16px causes mobile safari to zoom. */
  3731. font-size: 16px;
  3732. /* Override core line-height. To be reviewed. */
  3733. line-height: normal;
  3734. border: 1px solid #1e1e1e;
  3735. margin-right: 12px;
  3736. transition: none;
  3737. border-radius: 50%;
  3738. width: 24px;
  3739. height: 24px;
  3740. margin-top: 0;
  3741. margin-right: 6px;
  3742. }
  3743. @media (prefers-reduced-motion: reduce) {
  3744. .components-radio-control__input[type=radio] {
  3745. transition-duration: 0s;
  3746. transition-delay: 0s;
  3747. }
  3748. }
  3749. @media (min-width: 600px) {
  3750. .components-radio-control__input[type=radio] {
  3751. font-size: 13px;
  3752. /* Override core line-height. To be reviewed. */
  3753. line-height: normal;
  3754. }
  3755. }
  3756. .components-radio-control__input[type=radio]:focus {
  3757. border-color: var(--wp-admin-theme-color);
  3758. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  3759. outline: 2px solid transparent;
  3760. }
  3761. .components-radio-control__input[type=radio]::-webkit-input-placeholder {
  3762. color: rgba(30, 30, 30, 0.62);
  3763. }
  3764. .components-radio-control__input[type=radio]::-moz-placeholder {
  3765. opacity: 1;
  3766. color: rgba(30, 30, 30, 0.62);
  3767. }
  3768. .components-radio-control__input[type=radio]:-ms-input-placeholder {
  3769. color: rgba(30, 30, 30, 0.62);
  3770. }
  3771. @media (min-width: 600px) {
  3772. .components-radio-control__input[type=radio] {
  3773. height: 20px;
  3774. width: 20px;
  3775. }
  3776. }
  3777. .components-radio-control__input[type=radio]:checked::before {
  3778. box-sizing: inherit;
  3779. width: 8px;
  3780. height: 8px;
  3781. transform: translate(7px, 7px);
  3782. margin: 0;
  3783. background-color: #fff;
  3784. border: 4px solid #fff;
  3785. }
  3786. @media (min-width: 600px) {
  3787. .components-radio-control__input[type=radio]:checked::before {
  3788. transform: translate(5px, 5px);
  3789. }
  3790. }
  3791. .components-radio-control__input[type=radio]:focus {
  3792. box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
  3793. outline: 2px solid transparent;
  3794. }
  3795. .components-radio-control__input[type=radio]:checked {
  3796. background: var(--wp-admin-theme-color);
  3797. border-color: var(--wp-admin-theme-color);
  3798. }
  3799. .components-resizable-box__handle {
  3800. display: none;
  3801. width: 23px;
  3802. height: 23px;
  3803. z-index: 2;
  3804. }
  3805. .components-resizable-box__container.has-show-handle .components-resizable-box__handle {
  3806. display: block;
  3807. }
  3808. .components-resizable-box__handle::after {
  3809. display: block;
  3810. content: "";
  3811. width: 15px;
  3812. height: 15px;
  3813. border: 2px solid var(--wp-admin-theme-color);
  3814. border-radius: 50%;
  3815. background: #fff;
  3816. cursor: inherit;
  3817. position: absolute;
  3818. top: calc(50% - 8px);
  3819. right: calc(50% - 8px);
  3820. }
  3821. .components-resizable-box__side-handle::before {
  3822. display: block;
  3823. border-radius: 2px;
  3824. content: "";
  3825. width: 3px;
  3826. height: 3px;
  3827. background: var(--wp-admin-theme-color);
  3828. cursor: inherit;
  3829. position: absolute;
  3830. top: calc(50% - 1px);
  3831. right: calc(50% - 1px);
  3832. transition: transform 0.1s ease-in;
  3833. opacity: 0;
  3834. }
  3835. @media (prefers-reduced-motion: reduce) {
  3836. .components-resizable-box__side-handle::before {
  3837. transition-duration: 0s;
  3838. transition-delay: 0s;
  3839. }
  3840. }
  3841. .components-resizable-box__side-handle {
  3842. z-index: 2;
  3843. }
  3844. .components-resizable-box__corner-handle {
  3845. z-index: 2;
  3846. }
  3847. .components-resizable-box__side-handle.components-resizable-box__handle-top,
  3848. .components-resizable-box__side-handle.components-resizable-box__handle-bottom,
  3849. .components-resizable-box__side-handle.components-resizable-box__handle-top::before,
  3850. .components-resizable-box__side-handle.components-resizable-box__handle-bottom::before {
  3851. width: 100%;
  3852. left: 0;
  3853. border-left: 0;
  3854. border-right: 0;
  3855. }
  3856. .components-resizable-box__side-handle.components-resizable-box__handle-left,
  3857. .components-resizable-box__side-handle.components-resizable-box__handle-right,
  3858. .components-resizable-box__side-handle.components-resizable-box__handle-left::before,
  3859. .components-resizable-box__side-handle.components-resizable-box__handle-right::before {
  3860. height: 100%;
  3861. top: 0;
  3862. border-top: 0;
  3863. border-bottom: 0;
  3864. }
  3865. .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before,
  3866. .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before,
  3867. .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before,
  3868. .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before {
  3869. animation: components-resizable-box__top-bottom-animation 0.1s ease-out 0s;
  3870. animation-fill-mode: forwards;
  3871. }
  3872. @media (prefers-reduced-motion: reduce) {
  3873. .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before,
  3874. .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before,
  3875. .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before,
  3876. .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before {
  3877. animation-duration: 1ms;
  3878. animation-delay: 0s;
  3879. }
  3880. }
  3881. .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before,
  3882. .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before,
  3883. .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before,
  3884. .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before {
  3885. animation: components-resizable-box__left-right-animation 0.1s ease-out 0s;
  3886. animation-fill-mode: forwards;
  3887. }
  3888. @media (prefers-reduced-motion: reduce) {
  3889. .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before,
  3890. .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before,
  3891. .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before,
  3892. .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before {
  3893. animation-duration: 1ms;
  3894. animation-delay: 0s;
  3895. }
  3896. }
  3897. /* This CSS is shown only to Safari, which has a bug with table-caption making it jumpy.
  3898. See https://bugs.webkit.org/show_bug.cgi?id=187903. */
  3899. @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
  3900. @supports (-webkit-appearance: none) {
  3901. .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before,
  3902. .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before,
  3903. .components-resizable-box__side-handle.components-resizable-box__handle-top:active::before,
  3904. .components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before {
  3905. animation: none;
  3906. }
  3907. .components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before,
  3908. .components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before,
  3909. .components-resizable-box__side-handle.components-resizable-box__handle-left:active::before,
  3910. .components-resizable-box__side-handle.components-resizable-box__handle-right:active::before {
  3911. animation: none;
  3912. }
  3913. }
  3914. }
  3915. @keyframes components-resizable-box__top-bottom-animation {
  3916. from {
  3917. transform: scaleX(0);
  3918. opacity: 0;
  3919. }
  3920. to {
  3921. transform: scaleX(1);
  3922. opacity: 1;
  3923. }
  3924. }
  3925. @keyframes components-resizable-box__left-right-animation {
  3926. from {
  3927. transform: scaleY(0);
  3928. opacity: 0;
  3929. }
  3930. to {
  3931. transform: scaleY(1);
  3932. opacity: 1;
  3933. }
  3934. }
  3935. /*!rtl:begin:ignore*/
  3936. .components-resizable-box__handle-right {
  3937. right: calc(11.5px * -1);
  3938. }
  3939. .components-resizable-box__handle-left {
  3940. left: calc(11.5px * -1);
  3941. }
  3942. .components-resizable-box__handle-top {
  3943. top: calc(11.5px * -1);
  3944. }
  3945. .components-resizable-box__handle-bottom {
  3946. bottom: calc(11.5px * -1);
  3947. }
  3948. /*!rtl:end:ignore*/
  3949. .components-responsive-wrapper {
  3950. position: relative;
  3951. max-width: 100%;
  3952. }
  3953. .components-responsive-wrapper, .components-responsive-wrapper > span {
  3954. display: block;
  3955. }
  3956. .components-responsive-wrapper__content {
  3957. position: absolute;
  3958. top: 0;
  3959. right: 0;
  3960. bottom: 0;
  3961. left: 0;
  3962. width: 100%;
  3963. height: 100%;
  3964. margin: auto;
  3965. }
  3966. .components-sandbox {
  3967. overflow: hidden;
  3968. }
  3969. iframe.components-sandbox {
  3970. width: 100%;
  3971. }
  3972. html.lockscroll,
  3973. body.lockscroll {
  3974. overflow: hidden;
  3975. }
  3976. .components-select-control__input {
  3977. background: #fff;
  3978. height: 36px;
  3979. line-height: 36px;
  3980. margin: 1px;
  3981. outline: 0;
  3982. width: 100%;
  3983. -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  3984. }
  3985. @media (min-width: 782px) {
  3986. .components-select-control__input {
  3987. height: 28px;
  3988. line-height: 28px;
  3989. }
  3990. }
  3991. @media (max-width: 782px) {
  3992. .components-base-control .components-base-control__field .components-select-control__input {
  3993. font-size: 16px;
  3994. }
  3995. }
  3996. .components-snackbar {
  3997. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  3998. font-size: 13px;
  3999. background-color: #1e1e1e;
  4000. border-radius: 2px;
  4001. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  4002. color: #fff;
  4003. padding: 16px 24px;
  4004. width: 100%;
  4005. max-width: 600px;
  4006. box-sizing: border-box;
  4007. cursor: pointer;
  4008. pointer-events: auto;
  4009. }
  4010. @media (min-width: 600px) {
  4011. .components-snackbar {
  4012. width: -moz-fit-content;
  4013. width: fit-content;
  4014. }
  4015. }
  4016. .components-snackbar:focus {
  4017. box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color);
  4018. }
  4019. .components-snackbar.components-snackbar-explicit-dismiss {
  4020. cursor: default;
  4021. }
  4022. .components-snackbar .components-snackbar__content-with-icon {
  4023. margin-left: 24px;
  4024. }
  4025. .components-snackbar .components-snackbar__icon {
  4026. position: absolute;
  4027. top: 24px;
  4028. left: 28px;
  4029. }
  4030. .components-snackbar .components-snackbar__dismiss-button {
  4031. margin-left: 32px;
  4032. cursor: pointer;
  4033. }
  4034. .components-snackbar__action.components-button {
  4035. margin-left: 32px;
  4036. color: #fff;
  4037. height: auto;
  4038. flex-shrink: 0;
  4039. line-height: 1.4;
  4040. padding: 0;
  4041. }
  4042. .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary) {
  4043. text-decoration: underline;
  4044. background-color: transparent;
  4045. }
  4046. .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):focus {
  4047. color: #fff;
  4048. box-shadow: none;
  4049. outline: 1px dotted #fff;
  4050. }
  4051. .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
  4052. color: var(--wp-admin-theme-color);
  4053. }
  4054. .components-snackbar__content {
  4055. display: flex;
  4056. align-items: baseline;
  4057. justify-content: space-between;
  4058. line-height: 1.4;
  4059. }
  4060. .components-snackbar-list {
  4061. position: absolute;
  4062. z-index: 100000;
  4063. width: 100%;
  4064. box-sizing: border-box;
  4065. pointer-events: none;
  4066. }
  4067. .components-snackbar-list__notice-container {
  4068. position: relative;
  4069. padding-top: 8px;
  4070. }
  4071. .components-swatch {
  4072. width: 18px;
  4073. height: 18px;
  4074. border-radius: 50%;
  4075. color: transparent;
  4076. background: transparent;
  4077. }
  4078. .components-swatch::after {
  4079. content: "";
  4080. display: block;
  4081. width: 100%;
  4082. height: 100%;
  4083. border: 1px solid rgba(0, 0, 0, 0.2);
  4084. border-radius: 50%;
  4085. }
  4086. .components-button.has-icon.has-text .components-swatch {
  4087. margin-right: 8px;
  4088. }
  4089. .components-tab-panel__tabs {
  4090. display: flex;
  4091. align-items: stretch;
  4092. flex-direction: row;
  4093. }
  4094. .components-tab-panel__tabs[aria-orientation=vertical] {
  4095. flex-direction: column;
  4096. }
  4097. .components-tab-panel__tabs-item {
  4098. background: transparent;
  4099. border: none;
  4100. box-shadow: none;
  4101. border-radius: 0;
  4102. cursor: pointer;
  4103. height: 48px;
  4104. padding: 3px 16px;
  4105. margin-left: 0;
  4106. font-weight: 500;
  4107. transition: box-shadow 0.1s linear;
  4108. box-sizing: border-box;
  4109. }
  4110. .components-tab-panel__tabs-item::after {
  4111. content: attr(data-label);
  4112. display: block;
  4113. height: 0;
  4114. overflow: hidden;
  4115. speak: none;
  4116. visibility: hidden;
  4117. }
  4118. .components-tab-panel__tabs-item:focus:not(:disabled) {
  4119. box-shadow: inset 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  4120. }
  4121. .components-tab-panel__tabs-item.is-active {
  4122. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -4px 0 0 var(--wp-admin-theme-color);
  4123. position: relative;
  4124. }
  4125. .components-tab-panel__tabs-item.is-active::before {
  4126. content: "";
  4127. position: absolute;
  4128. top: 0;
  4129. bottom: 1px;
  4130. right: 0;
  4131. left: 0;
  4132. border-bottom: 4px solid transparent;
  4133. }
  4134. .components-tab-panel__tabs-item:focus {
  4135. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  4136. }
  4137. .components-tab-panel__tabs-item.is-active:focus {
  4138. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -4px 0 0 var(--wp-admin-theme-color);
  4139. }
  4140. .components-text-control__input,
  4141. .components-text-control__input[type=text],
  4142. .components-text-control__input[type=tel],
  4143. .components-text-control__input[type=time],
  4144. .components-text-control__input[type=url],
  4145. .components-text-control__input[type=week],
  4146. .components-text-control__input[type=password],
  4147. .components-text-control__input[type=color],
  4148. .components-text-control__input[type=date],
  4149. .components-text-control__input[type=datetime],
  4150. .components-text-control__input[type=datetime-local],
  4151. .components-text-control__input[type=email],
  4152. .components-text-control__input[type=month],
  4153. .components-text-control__input[type=number] {
  4154. width: 100%;
  4155. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  4156. padding: 6px 8px;
  4157. box-shadow: 0 0 0 transparent;
  4158. transition: box-shadow 0.1s linear;
  4159. border-radius: 2px;
  4160. border: 1px solid #757575;
  4161. /* Fonts smaller than 16px causes mobile safari to zoom. */
  4162. font-size: 16px;
  4163. /* Override core line-height. To be reviewed. */
  4164. line-height: normal;
  4165. }
  4166. @media (prefers-reduced-motion: reduce) {
  4167. .components-text-control__input,
  4168. .components-text-control__input[type=text],
  4169. .components-text-control__input[type=tel],
  4170. .components-text-control__input[type=time],
  4171. .components-text-control__input[type=url],
  4172. .components-text-control__input[type=week],
  4173. .components-text-control__input[type=password],
  4174. .components-text-control__input[type=color],
  4175. .components-text-control__input[type=date],
  4176. .components-text-control__input[type=datetime],
  4177. .components-text-control__input[type=datetime-local],
  4178. .components-text-control__input[type=email],
  4179. .components-text-control__input[type=month],
  4180. .components-text-control__input[type=number] {
  4181. transition-duration: 0s;
  4182. transition-delay: 0s;
  4183. }
  4184. }
  4185. @media (min-width: 600px) {
  4186. .components-text-control__input,
  4187. .components-text-control__input[type=text],
  4188. .components-text-control__input[type=tel],
  4189. .components-text-control__input[type=time],
  4190. .components-text-control__input[type=url],
  4191. .components-text-control__input[type=week],
  4192. .components-text-control__input[type=password],
  4193. .components-text-control__input[type=color],
  4194. .components-text-control__input[type=date],
  4195. .components-text-control__input[type=datetime],
  4196. .components-text-control__input[type=datetime-local],
  4197. .components-text-control__input[type=email],
  4198. .components-text-control__input[type=month],
  4199. .components-text-control__input[type=number] {
  4200. font-size: 13px;
  4201. /* Override core line-height. To be reviewed. */
  4202. line-height: normal;
  4203. }
  4204. }
  4205. .components-text-control__input:focus,
  4206. .components-text-control__input[type=text]:focus,
  4207. .components-text-control__input[type=tel]:focus,
  4208. .components-text-control__input[type=time]:focus,
  4209. .components-text-control__input[type=url]:focus,
  4210. .components-text-control__input[type=week]:focus,
  4211. .components-text-control__input[type=password]:focus,
  4212. .components-text-control__input[type=color]:focus,
  4213. .components-text-control__input[type=date]:focus,
  4214. .components-text-control__input[type=datetime]:focus,
  4215. .components-text-control__input[type=datetime-local]:focus,
  4216. .components-text-control__input[type=email]:focus,
  4217. .components-text-control__input[type=month]:focus,
  4218. .components-text-control__input[type=number]:focus {
  4219. border-color: var(--wp-admin-theme-color);
  4220. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  4221. outline: 2px solid transparent;
  4222. }
  4223. .components-text-control__input::-webkit-input-placeholder,
  4224. .components-text-control__input[type=text]::-webkit-input-placeholder,
  4225. .components-text-control__input[type=tel]::-webkit-input-placeholder,
  4226. .components-text-control__input[type=time]::-webkit-input-placeholder,
  4227. .components-text-control__input[type=url]::-webkit-input-placeholder,
  4228. .components-text-control__input[type=week]::-webkit-input-placeholder,
  4229. .components-text-control__input[type=password]::-webkit-input-placeholder,
  4230. .components-text-control__input[type=color]::-webkit-input-placeholder,
  4231. .components-text-control__input[type=date]::-webkit-input-placeholder,
  4232. .components-text-control__input[type=datetime]::-webkit-input-placeholder,
  4233. .components-text-control__input[type=datetime-local]::-webkit-input-placeholder,
  4234. .components-text-control__input[type=email]::-webkit-input-placeholder,
  4235. .components-text-control__input[type=month]::-webkit-input-placeholder,
  4236. .components-text-control__input[type=number]::-webkit-input-placeholder {
  4237. color: rgba(30, 30, 30, 0.62);
  4238. }
  4239. .components-text-control__input::-moz-placeholder,
  4240. .components-text-control__input[type=text]::-moz-placeholder,
  4241. .components-text-control__input[type=tel]::-moz-placeholder,
  4242. .components-text-control__input[type=time]::-moz-placeholder,
  4243. .components-text-control__input[type=url]::-moz-placeholder,
  4244. .components-text-control__input[type=week]::-moz-placeholder,
  4245. .components-text-control__input[type=password]::-moz-placeholder,
  4246. .components-text-control__input[type=color]::-moz-placeholder,
  4247. .components-text-control__input[type=date]::-moz-placeholder,
  4248. .components-text-control__input[type=datetime]::-moz-placeholder,
  4249. .components-text-control__input[type=datetime-local]::-moz-placeholder,
  4250. .components-text-control__input[type=email]::-moz-placeholder,
  4251. .components-text-control__input[type=month]::-moz-placeholder,
  4252. .components-text-control__input[type=number]::-moz-placeholder {
  4253. opacity: 1;
  4254. color: rgba(30, 30, 30, 0.62);
  4255. }
  4256. .components-text-control__input:-ms-input-placeholder,
  4257. .components-text-control__input[type=text]:-ms-input-placeholder,
  4258. .components-text-control__input[type=tel]:-ms-input-placeholder,
  4259. .components-text-control__input[type=time]:-ms-input-placeholder,
  4260. .components-text-control__input[type=url]:-ms-input-placeholder,
  4261. .components-text-control__input[type=week]:-ms-input-placeholder,
  4262. .components-text-control__input[type=password]:-ms-input-placeholder,
  4263. .components-text-control__input[type=color]:-ms-input-placeholder,
  4264. .components-text-control__input[type=date]:-ms-input-placeholder,
  4265. .components-text-control__input[type=datetime]:-ms-input-placeholder,
  4266. .components-text-control__input[type=datetime-local]:-ms-input-placeholder,
  4267. .components-text-control__input[type=email]:-ms-input-placeholder,
  4268. .components-text-control__input[type=month]:-ms-input-placeholder,
  4269. .components-text-control__input[type=number]:-ms-input-placeholder {
  4270. color: rgba(30, 30, 30, 0.62);
  4271. }
  4272. .components-tip {
  4273. display: flex;
  4274. color: #757575;
  4275. }
  4276. .components-tip svg {
  4277. align-self: center;
  4278. fill: #f0b849;
  4279. flex-shrink: 0;
  4280. margin-right: 16px;
  4281. }
  4282. .components-tip p {
  4283. margin: 0;
  4284. }
  4285. .components-toggle-control .components-base-control__field {
  4286. display: flex;
  4287. margin-bottom: 12px;
  4288. line-height: initial;
  4289. align-items: center;
  4290. }
  4291. .components-toggle-control .components-base-control__field .components-form-toggle {
  4292. margin-right: 12px;
  4293. }
  4294. .components-toggle-control .components-base-control__field .components-toggle-control__label {
  4295. display: block;
  4296. }
  4297. .components-accessible-toolbar {
  4298. display: inline-flex;
  4299. border: 1px solid #1e1e1e;
  4300. border-radius: 2px;
  4301. flex-shrink: 0;
  4302. }
  4303. .components-accessible-toolbar > .components-toolbar-group:last-child {
  4304. border-right: none;
  4305. }
  4306. .components-accessible-toolbar .components-button,
  4307. .components-toolbar .components-button {
  4308. position: relative;
  4309. height: 48px;
  4310. z-index: 1;
  4311. padding-left: 16px;
  4312. padding-right: 16px;
  4313. }
  4314. .components-accessible-toolbar .components-button:focus:enabled,
  4315. .components-toolbar .components-button:focus:enabled {
  4316. box-shadow: none;
  4317. outline: none;
  4318. }
  4319. .components-accessible-toolbar .components-button::before,
  4320. .components-toolbar .components-button::before {
  4321. content: "";
  4322. position: absolute;
  4323. display: block;
  4324. border-radius: 2px;
  4325. height: 32px;
  4326. left: 8px;
  4327. right: 8px;
  4328. z-index: -1;
  4329. animation: components-button__appear-animation 0.1s ease;
  4330. animation-fill-mode: forwards;
  4331. }
  4332. @media (prefers-reduced-motion: reduce) {
  4333. .components-accessible-toolbar .components-button::before,
  4334. .components-toolbar .components-button::before {
  4335. animation-duration: 1ms;
  4336. animation-delay: 0s;
  4337. }
  4338. }
  4339. .components-accessible-toolbar .components-button svg,
  4340. .components-toolbar .components-button svg {
  4341. position: relative;
  4342. margin-left: auto;
  4343. margin-right: auto;
  4344. }
  4345. .components-accessible-toolbar .components-button.is-pressed,
  4346. .components-toolbar .components-button.is-pressed {
  4347. background: transparent;
  4348. }
  4349. .components-accessible-toolbar .components-button.is-pressed:hover,
  4350. .components-toolbar .components-button.is-pressed:hover {
  4351. background: transparent;
  4352. }
  4353. .components-accessible-toolbar .components-button.is-pressed::before,
  4354. .components-toolbar .components-button.is-pressed::before {
  4355. background: #1e1e1e;
  4356. }
  4357. .components-accessible-toolbar .components-button:focus::before,
  4358. .components-toolbar .components-button:focus::before {
  4359. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff;
  4360. outline: 2px solid transparent;
  4361. }
  4362. .components-accessible-toolbar .components-button.has-icon,
  4363. .components-toolbar .components-button.has-icon {
  4364. padding-left: 8px;
  4365. padding-right: 8px;
  4366. min-width: 48px;
  4367. justify-content: center;
  4368. }
  4369. .components-accessible-toolbar .components-button.components-tab-button,
  4370. .components-toolbar .components-button.components-tab-button {
  4371. font-weight: 500;
  4372. }
  4373. .components-accessible-toolbar .components-button.components-tab-button span,
  4374. .components-toolbar .components-button.components-tab-button span {
  4375. display: inline-block;
  4376. padding-left: 0;
  4377. padding-right: 0;
  4378. position: relative;
  4379. }
  4380. @keyframes components-button__appear-animation {
  4381. from {
  4382. transform: scaleY(0);
  4383. }
  4384. to {
  4385. transform: scaleY(1);
  4386. }
  4387. }
  4388. .components-toolbar__control.components-button {
  4389. position: relative;
  4390. }
  4391. .components-toolbar__control.components-button[data-subscript] svg {
  4392. padding: 5px 10px 5px 0;
  4393. }
  4394. .components-toolbar__control.components-button[data-subscript]::after {
  4395. content: attr(data-subscript);
  4396. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  4397. font-size: 13px;
  4398. font-weight: 600;
  4399. line-height: 12px;
  4400. position: absolute;
  4401. right: 8px;
  4402. bottom: 10px;
  4403. }
  4404. .components-toolbar__control.components-button:active::before {
  4405. display: none;
  4406. }
  4407. .components-toolbar__control.components-button:not(:disabled).is-pressed[data-subscript]::after {
  4408. color: #fff;
  4409. }
  4410. .components-toolbar-group {
  4411. min-height: 48px;
  4412. border-right: 1px solid #1e1e1e;
  4413. background-color: #fff;
  4414. display: inline-flex;
  4415. flex-shrink: 0;
  4416. flex-wrap: wrap;
  4417. line-height: 0;
  4418. }
  4419. .components-toolbar-group .components-toolbar-group.components-toolbar-group {
  4420. border-width: 0;
  4421. margin: 0;
  4422. }
  4423. .components-toolbar {
  4424. min-height: 48px;
  4425. margin: 0;
  4426. border: 1px solid #1e1e1e;
  4427. background-color: #fff;
  4428. display: inline-flex;
  4429. flex-shrink: 0;
  4430. flex-wrap: wrap;
  4431. }
  4432. .components-toolbar .components-toolbar.components-toolbar {
  4433. border-width: 0;
  4434. margin: 0;
  4435. }
  4436. div.components-toolbar > div {
  4437. display: block;
  4438. margin: 0;
  4439. }
  4440. @supports (position: sticky) {
  4441. div.components-toolbar > div {
  4442. display: flex;
  4443. }
  4444. }
  4445. div.components-toolbar > div + div.has-left-divider {
  4446. margin-left: 6px;
  4447. position: relative;
  4448. overflow: visible;
  4449. }
  4450. div.components-toolbar > div + div.has-left-divider::before {
  4451. display: inline-block;
  4452. content: "";
  4453. box-sizing: content-box;
  4454. background-color: #ddd;
  4455. position: absolute;
  4456. top: 8px;
  4457. left: -3px;
  4458. width: 1px;
  4459. height: 20px;
  4460. }
  4461. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:first-child:last-child,
  4462. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:first-child:last-child .components-button, .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot.components-dropdown > .components-button.components-button, .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot.components-dropdown > * .components-button,
  4463. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:first-child:last-child,
  4464. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:first-child:last-child .components-button,
  4465. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot.components-dropdown > .components-button.components-button,
  4466. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot.components-dropdown > * .components-button,
  4467. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:first-child:last-child,
  4468. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:first-child:last-child .components-button,
  4469. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar.components-dropdown > .components-button.components-button,
  4470. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar.components-dropdown > * .components-button,
  4471. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:first-child:last-child,
  4472. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:first-child:last-child .components-button,
  4473. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown.components-dropdown > .components-button.components-button,
  4474. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown.components-dropdown > * .components-button,
  4475. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:first-child:last-child,
  4476. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:first-child:last-child .components-button,
  4477. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group.components-dropdown > .components-button.components-button,
  4478. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group.components-dropdown > * .components-button {
  4479. min-width: 48px;
  4480. padding-left: 12px;
  4481. padding-right: 12px;
  4482. }
  4483. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:first-child:last-child::before,
  4484. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:first-child:last-child .components-button::before, .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot.components-dropdown > .components-button.components-button::before, .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot.components-dropdown > * .components-button::before,
  4485. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:first-child:last-child::before,
  4486. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:first-child:last-child .components-button::before,
  4487. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot.components-dropdown > .components-button.components-button::before,
  4488. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot.components-dropdown > * .components-button::before,
  4489. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:first-child:last-child::before,
  4490. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:first-child:last-child .components-button::before,
  4491. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar.components-dropdown > .components-button.components-button::before,
  4492. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar.components-dropdown > * .components-button::before,
  4493. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:first-child:last-child::before,
  4494. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:first-child:last-child .components-button::before,
  4495. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown.components-dropdown > .components-button.components-button::before,
  4496. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown.components-dropdown > * .components-button::before,
  4497. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:first-child:last-child::before,
  4498. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:first-child:last-child .components-button::before,
  4499. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group.components-dropdown > .components-button.components-button::before,
  4500. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group.components-dropdown > * .components-button::before {
  4501. left: 8px;
  4502. right: 8px;
  4503. }
  4504. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:first-child,
  4505. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div:first-child > .components-button,
  4506. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:first-child .components-button,
  4507. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:first-child,
  4508. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div:first-child > .components-button,
  4509. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:first-child .components-button,
  4510. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:first-child,
  4511. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div:first-child > .components-button,
  4512. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:first-child .components-button,
  4513. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:first-child,
  4514. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div:first-child > .components-button,
  4515. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:first-child .components-button,
  4516. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:first-child,
  4517. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div:first-child > .components-button,
  4518. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:first-child .components-button {
  4519. min-width: 42px;
  4520. padding-left: 11px;
  4521. padding-right: 6px;
  4522. }
  4523. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:first-child::before,
  4524. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div:first-child > .components-button::before,
  4525. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:first-child .components-button::before,
  4526. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:first-child::before,
  4527. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div:first-child > .components-button::before,
  4528. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:first-child .components-button::before,
  4529. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:first-child::before,
  4530. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div:first-child > .components-button::before,
  4531. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:first-child .components-button::before,
  4532. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:first-child::before,
  4533. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div:first-child > .components-button::before,
  4534. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:first-child .components-button::before,
  4535. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:first-child::before,
  4536. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div:first-child > .components-button::before,
  4537. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:first-child .components-button::before {
  4538. left: 8px;
  4539. right: 2px;
  4540. }
  4541. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button,
  4542. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div > .components-button,
  4543. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button,
  4544. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button,
  4545. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div > .components-button,
  4546. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown .components-button,
  4547. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button,
  4548. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div > .components-button,
  4549. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown .components-button,
  4550. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button,
  4551. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div > .components-button,
  4552. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown .components-button,
  4553. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button,
  4554. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div > .components-button,
  4555. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown .components-button {
  4556. min-width: 36px;
  4557. padding-left: 6px;
  4558. padding-right: 6px;
  4559. }
  4560. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button svg,
  4561. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div > .components-button svg,
  4562. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button svg,
  4563. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button svg,
  4564. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div > .components-button svg,
  4565. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown .components-button svg,
  4566. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button svg,
  4567. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div > .components-button svg,
  4568. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown .components-button svg,
  4569. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button svg,
  4570. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div > .components-button svg,
  4571. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown .components-button svg,
  4572. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button svg,
  4573. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div > .components-button svg,
  4574. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown .components-button svg {
  4575. min-width: 24px;
  4576. }
  4577. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button::before,
  4578. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div > .components-button::before,
  4579. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button::before,
  4580. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button::before,
  4581. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div > .components-button::before,
  4582. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown .components-button::before,
  4583. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button::before,
  4584. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div > .components-button::before,
  4585. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown .components-button::before,
  4586. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button::before,
  4587. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div > .components-button::before,
  4588. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown .components-button::before,
  4589. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button::before,
  4590. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div > .components-button::before,
  4591. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown .components-button::before {
  4592. left: 2px;
  4593. right: 2px;
  4594. }
  4595. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:last-child,
  4596. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div:last-child > .components-button,
  4597. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:last-child .components-button,
  4598. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:last-child,
  4599. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div:last-child > .components-button,
  4600. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:last-child .components-button,
  4601. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:last-child,
  4602. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div:last-child > .components-button,
  4603. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:last-child .components-button,
  4604. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:last-child,
  4605. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div:last-child > .components-button,
  4606. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:last-child .components-button,
  4607. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:last-child,
  4608. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div:last-child > .components-button,
  4609. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:last-child .components-button {
  4610. min-width: 42px;
  4611. padding-left: 6px;
  4612. padding-right: 11px;
  4613. }
  4614. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:last-child::before,
  4615. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div:last-child > .components-button::before,
  4616. .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:last-child .components-button::before,
  4617. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:last-child::before,
  4618. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div:last-child > .components-button::before,
  4619. .block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:last-child .components-button::before,
  4620. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:last-child::before,
  4621. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div:last-child > .components-button::before,
  4622. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:last-child .components-button::before,
  4623. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:last-child::before,
  4624. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div:last-child > .components-button::before,
  4625. .block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:last-child .components-button::before,
  4626. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:last-child::before,
  4627. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div:last-child > .components-button::before,
  4628. .block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:last-child .components-button::before {
  4629. left: 2px;
  4630. right: 8px;
  4631. }
  4632. .components-tooltip.components-popover {
  4633. z-index: 1000002;
  4634. }
  4635. .components-tooltip.components-popover .components-popover__content {
  4636. min-width: 0;
  4637. }
  4638. .components-tooltip .components-popover__content {
  4639. background: #1e1e1e;
  4640. border-radius: 2px;
  4641. border-width: 0;
  4642. color: #fff;
  4643. white-space: nowrap;
  4644. text-align: center;
  4645. line-height: 1.4;
  4646. font-size: 12px;
  4647. box-shadow: none;
  4648. }
  4649. .components-tooltip .components-popover__content > div {
  4650. padding: 4px 8px;
  4651. }
  4652. .components-tooltip__shortcut {
  4653. display: inline-block;
  4654. margin-left: 8px;
  4655. }
  4656. .disabled-element-wrapper {
  4657. position: relative;
  4658. }
  4659. .disabled-element-wrapper .event-catcher {
  4660. z-index: 100002;
  4661. position: absolute;
  4662. width: 100%;
  4663. height: 100%;
  4664. top: 0;
  4665. left: 0;
  4666. bottom: 0;
  4667. right: 0;
  4668. }
  4669. .components-visually-hidden {
  4670. border: 0;
  4671. clip: rect(1px, 1px, 1px, 1px);
  4672. -webkit-clip-path: inset(50%);
  4673. clip-path: inset(50%);
  4674. height: 1px;
  4675. margin: -1px;
  4676. overflow: hidden;
  4677. padding: 0;
  4678. position: absolute;
  4679. width: 1px;
  4680. word-wrap: normal !important;
  4681. }
  4682. .components-visually-hidden:focus {
  4683. background-color: #ddd;
  4684. clip: auto !important;
  4685. -webkit-clip-path: none;
  4686. clip-path: none;
  4687. color: #444;
  4688. display: block;
  4689. font-size: 1em;
  4690. height: auto;
  4691. left: 5px;
  4692. line-height: normal;
  4693. padding: 15px 23px 14px;
  4694. text-decoration: none;
  4695. top: 5px;
  4696. width: auto;
  4697. z-index: 100000;
  4698. }