Açıklama Yok

style.css 114KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887
  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. #start-resizable-editor-section {
  84. display: none;
  85. }
  86. .block-editor-autocompleters__block {
  87. white-space: nowrap;
  88. }
  89. .block-editor-autocompleters__block .block-editor-block-icon {
  90. margin-right: 8px;
  91. }
  92. .block-editor-block-alignment-matrix-control__popover .components-popover__content {
  93. min-width: 0;
  94. width: auto;
  95. }
  96. .block-editor-block-alignment-matrix-control__popover .components-popover__content > div {
  97. padding: 8px;
  98. }
  99. .block-editor-block-icon {
  100. display: flex;
  101. align-items: center;
  102. justify-content: center;
  103. width: 24px;
  104. height: 24px;
  105. }
  106. .block-editor-block-icon.has-colors svg {
  107. fill: currentColor;
  108. }
  109. .block-editor-block-icon svg {
  110. min-width: 20px;
  111. min-height: 20px;
  112. max-width: 24px;
  113. max-height: 24px;
  114. }
  115. .block-editor-block-inspector p {
  116. margin-top: 0;
  117. }
  118. .block-editor-block-inspector h2,
  119. .block-editor-block-inspector h3 {
  120. font-size: 13px;
  121. color: #1e1e1e;
  122. margin-bottom: 1.5em;
  123. }
  124. .block-editor-block-inspector .components-base-control {
  125. margin-bottom: 24px;
  126. }
  127. .block-editor-block-inspector .components-base-control:last-child {
  128. margin-bottom: 8px;
  129. }
  130. .block-editor-block-inspector .components-panel__body {
  131. border: none;
  132. border-top: 1px solid #e0e0e0;
  133. }
  134. .block-editor-block-inspector .block-editor-block-card {
  135. padding: 16px;
  136. }
  137. .block-editor-block-inspector__no-blocks {
  138. display: block;
  139. font-size: 13px;
  140. background: #fff;
  141. padding: 32px 16px;
  142. text-align: center;
  143. }
  144. .block-editor-block-styles .block-editor-block-list__block {
  145. margin: 0;
  146. }
  147. /**
  148. * Notices & Block Selected/Hover Styles.
  149. */
  150. /**
  151. * Cross-Block Selection
  152. */
  153. .block-editor-block-list__layout {
  154. position: relative;
  155. }
  156. .block-editor-block-list__layout.is-navigate-mode {
  157. cursor: default;
  158. }
  159. .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after,
  160. .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
  161. .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected::after {
  162. position: absolute;
  163. z-index: 1;
  164. pointer-events: none;
  165. content: "";
  166. top: 1px;
  167. bottom: 1px;
  168. left: 1px;
  169. right: 1px;
  170. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  171. border-radius: 1px;
  172. outline: 2px solid transparent;
  173. }
  174. .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after,
  175. .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
  176. .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected::after {
  177. box-shadow: 0 0 0 1px #fff;
  178. }
  179. .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected .components-placeholder ::selection, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered .components-placeholder ::selection,
  180. .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted .components-placeholder ::selection,
  181. .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected .components-placeholder ::selection {
  182. background: transparent;
  183. }
  184. .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered:not(.is-selected)::after {
  185. box-shadow: 0 0 0 1px #949494;
  186. }
  187. .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
  188. .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
  189. box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  190. outline: var(--wp-admin-border-width-focus) solid transparent;
  191. }
  192. .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::before {
  193. content: "";
  194. position: absolute;
  195. z-index: 0;
  196. pointer-events: none;
  197. transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
  198. right: 0;
  199. left: 0;
  200. top: -14px;
  201. border-radius: 2px;
  202. border-top: 4px solid #ccc;
  203. }
  204. .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::after {
  205. content: none;
  206. }
  207. .block-editor-block-list__layout .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected::before {
  208. border-color: var(--wp-admin-theme-color);
  209. }
  210. .is-block-moving-mode.block-editor-block-list__block-selection-button {
  211. opacity: 0;
  212. font-size: 1px;
  213. height: 1px;
  214. padding: 0;
  215. }
  216. .block-editor-block-list__layout .block-editor-block-list__block {
  217. position: relative;
  218. overflow-wrap: break-word;
  219. /**
  220. * Notices
  221. */
  222. /**
  223. * Block Layout
  224. */
  225. /**
  226. * Block styles and alignments
  227. */
  228. }
  229. .block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel * {
  230. z-index: 1;
  231. }
  232. .block-editor-block-list__layout .block-editor-block-list__block .components-placeholder .components-with-notices-ui {
  233. margin: -10px 0 12px 0;
  234. }
  235. .block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui {
  236. margin: 0 0 12px 0;
  237. width: 100%;
  238. }
  239. .block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui .components-notice {
  240. margin-left: 0;
  241. margin-right: 0;
  242. }
  243. .block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui .components-notice .components-notice__content {
  244. font-size: 13px;
  245. }
  246. .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus {
  247. outline: none;
  248. }
  249. .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
  250. position: absolute;
  251. z-index: 1;
  252. pointer-events: none;
  253. content: "";
  254. top: 1px;
  255. bottom: 1px;
  256. left: 1px;
  257. right: 1px;
  258. box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  259. border-radius: 1px;
  260. }
  261. .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
  262. box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
  263. }
  264. .block-editor-block-list__layout .block-editor-block-list__block::after {
  265. content: "";
  266. pointer-events: none;
  267. position: absolute;
  268. top: 0;
  269. right: 0;
  270. bottom: 0;
  271. left: 0;
  272. border-radius: 2px;
  273. box-shadow: 0 0 0 var(--wp-admin-border-width-focus) transparent;
  274. }
  275. .block-editor-block-list__layout .block-editor-block-list__block.has-warning {
  276. min-height: 48px;
  277. }
  278. .block-editor-block-list__layout .block-editor-block-list__block.has-warning > * {
  279. pointer-events: none;
  280. -webkit-user-select: none;
  281. user-select: none;
  282. }
  283. .block-editor-block-list__layout .block-editor-block-list__block.has-warning .block-editor-warning {
  284. pointer-events: all;
  285. }
  286. .block-editor-block-list__layout .block-editor-block-list__block.has-warning::after {
  287. content: "";
  288. position: absolute;
  289. top: 0;
  290. right: 0;
  291. bottom: 0;
  292. left: 0;
  293. border-radius: 2px;
  294. background-color: rgba(255, 255, 255, 0.4);
  295. }
  296. .block-editor-block-list__layout .block-editor-block-list__block.has-warning.is-multi-selected::after {
  297. background-color: transparent;
  298. }
  299. .block-editor-block-list__layout .block-editor-block-list__block.is-reusable > .block-editor-inner-blocks > .block-editor-block-list__layout.has-overlay::after {
  300. display: none;
  301. }
  302. .block-editor-block-list__layout .block-editor-block-list__block.is-reusable > .block-editor-inner-blocks > .block-editor-block-list__layout.has-overlay .block-editor-block-list__layout.has-overlay::after {
  303. display: block;
  304. }
  305. .block-editor-block-list__layout .block-editor-block-list__block.is-reusable.has-child-selected::after {
  306. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  307. }
  308. .block-editor-block-list__layout .block-editor-block-list__block[data-clear=true] {
  309. float: none;
  310. }
  311. .block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__layout .block-editor-default-block-appender .block-editor-inserter {
  312. left: auto;
  313. right: 8px;
  314. }
  315. .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered {
  316. cursor: default;
  317. }
  318. .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered::after {
  319. top: 1px;
  320. left: 1px;
  321. right: 1px;
  322. bottom: 1px;
  323. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  324. border-radius: 1px;
  325. }
  326. .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected {
  327. cursor: unset;
  328. }
  329. .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected::after {
  330. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  331. top: 1px;
  332. left: 1px;
  333. right: 1px;
  334. bottom: 1px;
  335. border-radius: 1px;
  336. }
  337. .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected:focus::after {
  338. box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  339. }
  340. .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
  341. opacity: 0.5;
  342. transition: opacity 0.1s linear;
  343. }
  344. @media (prefers-reduced-motion: reduce) {
  345. .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
  346. transition-duration: 0s;
  347. transition-delay: 0s;
  348. }
  349. }
  350. .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) .block-editor-block-list__block, .is-focus-mode .block-editor-block-list__block:not(.has-child-selected).is-selected, .is-focus-mode .block-editor-block-list__block:not(.has-child-selected).is-multi-selected {
  351. opacity: 1;
  352. }
  353. .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity {
  354. opacity: 0.5;
  355. transition: opacity 0.1s linear;
  356. }
  357. @media (prefers-reduced-motion: reduce) {
  358. .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity {
  359. transition-duration: 0s;
  360. transition-delay: 0s;
  361. }
  362. }
  363. .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity.is-active-entity, .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity.has-child-selected, .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity:not(.has-child-selected) .block-editor-block-list__block, .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity.is-active-entity .block-editor-block-list__block,
  364. .is-root-container:not(.is-focus-mode) .block-editor-block-list__block.has-active-entity .is-active-entity .block-editor-block-list__block {
  365. opacity: 1;
  366. }
  367. .wp-block[data-align=left] > *,
  368. .wp-block[data-align=right] > * {
  369. z-index: 21;
  370. }
  371. /**
  372. * In-Canvas Inserter
  373. */
  374. .block-editor-block-list .block-editor-inserter {
  375. margin: 8px;
  376. cursor: move;
  377. cursor: grab;
  378. }
  379. @keyframes block-editor-inserter__toggle__fade-in-animation {
  380. from {
  381. opacity: 0;
  382. }
  383. to {
  384. opacity: 1;
  385. }
  386. }
  387. .wp-block .block-list-appender .block-editor-inserter__toggle {
  388. animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease;
  389. animation-fill-mode: forwards;
  390. }
  391. @media (prefers-reduced-motion: reduce) {
  392. .wp-block .block-list-appender .block-editor-inserter__toggle {
  393. animation-duration: 1ms;
  394. animation-delay: 0s;
  395. }
  396. }
  397. .block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender {
  398. display: none;
  399. }
  400. .block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender .block-editor-inserter__toggle {
  401. opacity: 0;
  402. transform: scale(0);
  403. }
  404. .block-editor-block-list__block .block-editor-block-list__block-html-textarea {
  405. display: block;
  406. margin: 0;
  407. padding: 12px;
  408. width: 100%;
  409. border: none;
  410. outline: none;
  411. border-radius: 2px;
  412. box-shadow: inset 0 0 0 1px #1e1e1e;
  413. resize: none;
  414. overflow: hidden;
  415. font-family: Menlo, Consolas, monaco, monospace;
  416. font-size: 15px;
  417. line-height: 1.5;
  418. transition: padding 0.2s linear;
  419. }
  420. @media (prefers-reduced-motion: reduce) {
  421. .block-editor-block-list__block .block-editor-block-list__block-html-textarea {
  422. transition-duration: 0s;
  423. transition-delay: 0s;
  424. }
  425. }
  426. .block-editor-block-list__block .block-editor-block-list__block-html-textarea:focus {
  427. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  428. }
  429. /**
  430. * Warnings.
  431. */
  432. .block-editor-block-list__block .block-editor-warning {
  433. z-index: 5;
  434. position: relative;
  435. }
  436. .block-editor-block-list__block .block-editor-warning.block-editor-block-list__block-crash-warning {
  437. margin-bottom: auto;
  438. }
  439. /**
  440. * Insertion Point.
  441. */
  442. .block-editor-block-list__insertion-point {
  443. position: absolute;
  444. }
  445. .block-editor-block-list__insertion-point-indicator {
  446. position: absolute;
  447. background: var(--wp-admin-theme-color);
  448. animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease;
  449. animation-fill-mode: forwards;
  450. }
  451. @media (prefers-reduced-motion: reduce) {
  452. .block-editor-block-list__insertion-point-indicator {
  453. animation-duration: 1ms;
  454. animation-delay: 0s;
  455. }
  456. }
  457. .block-editor-block-list__insertion-point.is-vertical > .block-editor-block-list__insertion-point-indicator {
  458. top: 50%;
  459. right: 0;
  460. left: 0;
  461. height: 1px;
  462. }
  463. .block-editor-block-list__insertion-point.is-horizontal > .block-editor-block-list__insertion-point-indicator {
  464. top: 0;
  465. right: 0;
  466. left: 50%;
  467. height: 100%;
  468. width: 1px;
  469. }
  470. .block-editor-block-list__insertion-point-inserter {
  471. display: none;
  472. position: absolute;
  473. justify-content: center;
  474. top: calc(50% - 12px);
  475. left: calc(50% - 12px);
  476. }
  477. @media (min-width: 480px) {
  478. .block-editor-block-list__insertion-point-inserter {
  479. display: flex;
  480. }
  481. }
  482. .block-editor-block-list__block-popover-inserter {
  483. position: absolute;
  484. top: -9999em;
  485. margin-bottom: 14px;
  486. }
  487. .block-editor-block-list__block-popover-inserter.is-visible {
  488. position: static;
  489. }
  490. .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon,
  491. .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon,
  492. .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon,
  493. .block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button.has-icon {
  494. background: #1e1e1e;
  495. border-radius: 2px;
  496. color: #fff;
  497. padding: 0;
  498. min-width: 24px;
  499. height: 24px;
  500. }
  501. .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon:hover,
  502. .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon:hover,
  503. .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover,
  504. .block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button.has-icon:hover {
  505. color: #fff;
  506. background: var(--wp-admin-theme-color);
  507. }
  508. .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
  509. background: var(--wp-admin-theme-color);
  510. }
  511. .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover {
  512. background: #1e1e1e;
  513. }
  514. .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button,
  515. .block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button {
  516. animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease;
  517. animation-fill-mode: forwards;
  518. }
  519. @media (prefers-reduced-motion: reduce) {
  520. .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button,
  521. .block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button {
  522. animation-duration: 1ms;
  523. animation-delay: 0s;
  524. }
  525. }
  526. @keyframes block-editor-inserter__toggle__fade-in-animation-delayed {
  527. 0% {
  528. opacity: 0;
  529. }
  530. 60% {
  531. opacity: 0;
  532. }
  533. 100% {
  534. opacity: 1;
  535. }
  536. }
  537. /**
  538. * Block Toolbar when contextual.
  539. */
  540. .block-editor-block-contextual-toolbar {
  541. display: inline-flex;
  542. border: 1px solid #1e1e1e;
  543. border-radius: 2px;
  544. background-color: #fff;
  545. }
  546. .block-editor-block-contextual-toolbar .block-editor-block-toolbar .components-toolbar-group,
  547. .block-editor-block-contextual-toolbar .block-editor-block-toolbar .components-toolbar {
  548. border-right-color: #1e1e1e;
  549. }
  550. .block-editor-block-contextual-toolbar.is-fixed {
  551. position: sticky;
  552. top: 0;
  553. width: 100%;
  554. z-index: 31;
  555. min-height: 48px;
  556. display: block;
  557. border: none;
  558. border-bottom: 1px solid #e0e0e0;
  559. border-radius: 0;
  560. }
  561. .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar-group,
  562. .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {
  563. border-right-color: #e0e0e0;
  564. }
  565. .block-editor-block-contextual-toolbar .block-editor-block-mover-button {
  566. overflow: hidden;
  567. }
  568. .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
  569. min-width: 24px;
  570. width: 24px;
  571. }
  572. .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button svg {
  573. min-width: 24px;
  574. }
  575. .block-editor-block-contextual-toolbar .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button:focus::before {
  576. left: 0 !important;
  577. min-width: 0;
  578. width: 100%;
  579. }
  580. @media (min-width: 600px) {
  581. .block-editor-block-contextual-toolbar .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button.is-up-button svg {
  582. top: 5px;
  583. }
  584. .block-editor-block-contextual-toolbar .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button.is-down-button svg {
  585. bottom: 5px;
  586. }
  587. }
  588. /**
  589. * Block Label for Navigation/Selection Mode
  590. */
  591. .block-editor-block-list__block-selection-button {
  592. display: inline-flex;
  593. padding: 0 13px;
  594. z-index: 22;
  595. border-radius: 2px;
  596. background-color: #1e1e1e;
  597. font-size: 13px;
  598. height: 48px;
  599. }
  600. .block-editor-block-list__block-selection-button .block-editor-block-list__block-selection-button__content {
  601. margin: auto;
  602. display: inline-flex;
  603. align-items: center;
  604. }
  605. .block-editor-block-list__block-selection-button .block-editor-block-list__block-selection-button__content > .components-flex__item {
  606. margin-right: 6px;
  607. }
  608. .block-editor-block-list__block-selection-button .components-button.has-icon.block-selection-button_drag-handle {
  609. cursor: grab;
  610. padding: 0;
  611. height: 24px;
  612. min-width: 24px;
  613. }
  614. .block-editor-block-list__block-selection-button .components-button.has-icon.block-selection-button_drag-handle svg {
  615. min-width: 18px;
  616. min-height: 18px;
  617. }
  618. .block-editor-block-list__block-selection-button .block-editor-block-icon {
  619. font-size: 13px;
  620. color: #fff;
  621. height: 48px;
  622. }
  623. .block-editor-block-list__block-selection-button .components-button {
  624. min-width: 36px;
  625. color: #fff;
  626. height: 48px;
  627. display: flex;
  628. }
  629. .block-editor-block-list__block-selection-button .components-button:focus {
  630. box-shadow: none;
  631. border: none;
  632. }
  633. .block-editor-block-list__block-selection-button .components-button:active {
  634. color: #fff;
  635. }
  636. .block-editor-block-list__block-selection-button .block-selection-button_select-button.components-button {
  637. padding: 0;
  638. }
  639. /**
  640. * Popovers.
  641. */
  642. .block-editor-block-list__insertion-point-popover.is-without-arrow {
  643. z-index: 28;
  644. position: absolute;
  645. pointer-events: none;
  646. }
  647. .block-editor-block-list__insertion-point-popover.is-without-arrow * {
  648. pointer-events: none;
  649. }
  650. .block-editor-block-list__insertion-point-popover.is-without-arrow .is-with-inserter {
  651. pointer-events: all;
  652. }
  653. .block-editor-block-list__insertion-point-popover.is-without-arrow .is-with-inserter * {
  654. pointer-events: all;
  655. }
  656. .block-editor-block-list__insertion-point-popover.is-without-arrow .components-popover__content.components-popover__content {
  657. background: none;
  658. border: none;
  659. box-shadow: none;
  660. overflow-y: visible;
  661. margin-left: 0;
  662. }
  663. @keyframes hide-during-dragging {
  664. to {
  665. position: fixed;
  666. transform: translate(9999px, 9999px);
  667. }
  668. }
  669. .components-popover.block-editor-block-list__block-popover {
  670. z-index: 31;
  671. position: absolute;
  672. }
  673. .components-popover.block-editor-block-list__block-popover .components-popover__content {
  674. margin: 0 !important;
  675. min-width: auto;
  676. width: max-content;
  677. background: none;
  678. border: none;
  679. box-shadow: none;
  680. overflow-y: visible;
  681. pointer-events: none;
  682. }
  683. .components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-list__block-selection-button,
  684. .components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-contextual-toolbar,
  685. .components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-list__empty-block-inserter {
  686. pointer-events: all;
  687. }
  688. .components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-list__block-selection-button,
  689. .components-popover.block-editor-block-list__block-popover .components-popover__content .block-editor-block-contextual-toolbar {
  690. margin-top: 12px;
  691. margin-bottom: 12px;
  692. }
  693. .components-popover.block-editor-block-list__block-popover.is-insertion-point-visible {
  694. visibility: hidden;
  695. }
  696. .is-dragging-components-draggable .components-popover.block-editor-block-list__block-popover {
  697. opacity: 0;
  698. animation: hide-during-dragging 1ms linear forwards;
  699. }
  700. .is-dragging-components-draggable .components-tooltip {
  701. display: none;
  702. }
  703. .block-editor-block-list__block .block-list-appender {
  704. align-self: center;
  705. padding: 0;
  706. list-style: none;
  707. margin: 8px;
  708. }
  709. .block-editor-block-list__block .block-list-appender.wp-block {
  710. max-width: none;
  711. }
  712. .block-editor-block-list__block .block-list-appender .block-editor-default-block-appender {
  713. margin: 8px 0;
  714. }
  715. .block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
  716. padding: 0;
  717. opacity: 1;
  718. transform: scale(1);
  719. transition: all 0.1s ease;
  720. margin-left: 8px;
  721. }
  722. @media (prefers-reduced-motion: reduce) {
  723. .block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
  724. transition-duration: 0s;
  725. transition-delay: 0s;
  726. }
  727. }
  728. .block-editor-block-list__block .block-list-appender:first-of-type .block-list-appender__toggle {
  729. margin-left: 0;
  730. }
  731. .is-vertical .block-list-appender {
  732. width: 24px;
  733. margin-right: auto;
  734. margin-top: 12px;
  735. margin-left: 12px;
  736. }
  737. .block-list-appender > .block-editor-inserter {
  738. display: block;
  739. }
  740. .block-editor-block-list__block:not(.is-selected):not(.has-child-selected):not(.block-editor-block-list__layout) .block-editor-block-list__layout > .block-list-appender .block-list-appender__toggle {
  741. opacity: 0;
  742. transform: scale(0);
  743. }
  744. .block-editor-block-breadcrumb {
  745. list-style: none;
  746. padding: 0;
  747. margin: 0;
  748. }
  749. .block-editor-block-breadcrumb li {
  750. display: inline-block;
  751. margin: 0;
  752. }
  753. .block-editor-block-breadcrumb li:not(:last-child)::after {
  754. content: "→" /*rtl:"←"*/;
  755. }
  756. .block-editor-block-breadcrumb__button.components-button {
  757. height: 24px;
  758. line-height: 24px;
  759. padding: 0;
  760. position: relative;
  761. }
  762. .block-editor-block-breadcrumb__button.components-button:hover:not(:disabled) {
  763. text-decoration: underline;
  764. box-shadow: none;
  765. }
  766. .block-editor-block-breadcrumb__button.components-button:focus {
  767. box-shadow: none;
  768. }
  769. .block-editor-block-breadcrumb__button.components-button:focus::before {
  770. content: "";
  771. display: block;
  772. position: absolute;
  773. border-radius: 2px;
  774. top: 1px;
  775. right: 1px;
  776. bottom: 1px;
  777. left: 1px;
  778. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  779. }
  780. .block-editor-block-breadcrumb__current {
  781. cursor: default;
  782. }
  783. .block-editor-block-breadcrumb__button.components-button,
  784. .block-editor-block-breadcrumb__current {
  785. color: #1e1e1e;
  786. padding: 0 8px;
  787. font-size: inherit;
  788. }
  789. .block-editor-block-card {
  790. display: flex;
  791. align-items: flex-start;
  792. }
  793. .block-editor-block-card__content {
  794. flex-grow: 1;
  795. margin-bottom: 4px;
  796. }
  797. .block-editor-block-card__title {
  798. font-weight: 500;
  799. }
  800. .block-editor-block-card__title.block-editor-block-card__title {
  801. line-height: 24px;
  802. margin: 0 0 4px;
  803. }
  804. .block-editor-block-card__description {
  805. font-size: 13px;
  806. }
  807. .block-editor-block-card .block-editor-block-icon {
  808. flex: 0 0 24px;
  809. margin-left: 0;
  810. margin-right: 12px;
  811. width: 24px;
  812. height: 24px;
  813. }
  814. /**
  815. * Invalid block comparison
  816. */
  817. .block-editor-block-compare {
  818. overflow: auto;
  819. height: auto;
  820. }
  821. @media (min-width: 600px) {
  822. .block-editor-block-compare {
  823. max-height: 70%;
  824. }
  825. }
  826. .block-editor-block-compare__wrapper {
  827. display: flex;
  828. padding-bottom: 16px;
  829. }
  830. .block-editor-block-compare__wrapper > div {
  831. display: flex;
  832. justify-content: space-between;
  833. flex-direction: column;
  834. width: 50%;
  835. padding: 0 16px 0 0;
  836. min-width: 200px;
  837. }
  838. .block-editor-block-compare__wrapper > div button {
  839. float: right;
  840. }
  841. .block-editor-block-compare__wrapper .block-editor-block-compare__converted {
  842. border-left: 1px solid #ddd;
  843. padding-left: 15px;
  844. padding-right: 0;
  845. }
  846. .block-editor-block-compare__wrapper .block-editor-block-compare__html {
  847. font-family: Menlo, Consolas, monaco, monospace;
  848. font-size: 12px;
  849. color: #1e1e1e;
  850. border-bottom: 1px solid #ddd;
  851. padding-bottom: 15px;
  852. line-height: 1.7;
  853. }
  854. .block-editor-block-compare__wrapper .block-editor-block-compare__html span {
  855. background-color: #e6ffed;
  856. padding-top: 3px;
  857. padding-bottom: 3px;
  858. }
  859. .block-editor-block-compare__wrapper .block-editor-block-compare__html span.block-editor-block-compare__added {
  860. background-color: #acf2bd;
  861. }
  862. .block-editor-block-compare__wrapper .block-editor-block-compare__html span.block-editor-block-compare__removed {
  863. background-color: #cc1818;
  864. }
  865. .block-editor-block-compare__wrapper .block-editor-block-compare__preview {
  866. padding: 0;
  867. padding-top: 16px;
  868. }
  869. .block-editor-block-compare__wrapper .block-editor-block-compare__preview p {
  870. font-size: 12px;
  871. margin-top: 0;
  872. }
  873. .block-editor-block-compare__wrapper .block-editor-block-compare__action {
  874. margin-top: 16px;
  875. }
  876. .block-editor-block-compare__wrapper .block-editor-block-compare__heading {
  877. font-size: 1em;
  878. font-weight: 400;
  879. margin: 0.67em 0;
  880. }
  881. .block-editor-block-draggable-chip-wrapper {
  882. position: absolute;
  883. top: -24px;
  884. left: 0;
  885. }
  886. .block-editor-block-draggable-chip {
  887. background-color: #1e1e1e;
  888. border-radius: 2px;
  889. box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
  890. color: #fff;
  891. cursor: grabbing;
  892. display: inline-flex;
  893. height: 48px;
  894. padding: 0 13px;
  895. -webkit-user-select: none;
  896. user-select: none;
  897. }
  898. .block-editor-block-draggable-chip svg {
  899. fill: currentColor;
  900. }
  901. .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content {
  902. margin: auto;
  903. justify-content: flex-start;
  904. }
  905. .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content > .components-flex__item {
  906. margin-right: 6px;
  907. }
  908. .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content > .components-flex__item:last-child {
  909. margin-right: 0;
  910. }
  911. .block-editor-block-draggable-chip .block-editor-block-draggable-chip__content .block-editor-block-icon svg {
  912. min-width: 18px;
  913. min-height: 18px;
  914. }
  915. .block-editor-block-draggable-chip .components-flex__item {
  916. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  917. font-size: 13px;
  918. }
  919. .is-dragging {
  920. display: none !important;
  921. }
  922. .block-editor-block-mobile-toolbar {
  923. display: flex;
  924. flex-direction: row;
  925. border-right: 1px solid #ddd;
  926. }
  927. .block-editor-block-mobile-toolbar .block-editor-block-mover-button {
  928. width: 36px;
  929. height: 36px;
  930. border-radius: 2px;
  931. padding: 3px;
  932. margin: 0;
  933. justify-content: center;
  934. align-items: center;
  935. }
  936. .block-editor-block-mobile-toolbar .block-editor-block-mover-button .dashicon {
  937. margin: auto;
  938. }
  939. .block-editor-block-mobile-toolbar .block-editor-block-mover {
  940. display: flex;
  941. margin-right: auto;
  942. }
  943. .block-editor-block-mobile-toolbar .block-editor-block-mover .block-editor-block-mover-button {
  944. float: left;
  945. }
  946. .block-editor-block-mover-button__description {
  947. display: none;
  948. }
  949. .block-editor-block-mover-button.has-icon {
  950. padding: 0;
  951. }
  952. .block-editor-block-mover {
  953. display: inline-flex;
  954. flex-direction: row;
  955. }
  956. .block-editor-block-mover .block-editor-block-mover__move-button-container,
  957. .block-editor-block-mover .components-toolbar {
  958. flex: 1;
  959. flex-direction: row;
  960. border-right: none !important;
  961. }
  962. @media (min-width: 600px) {
  963. .block-editor-block-mover .block-editor-block-mover__move-button-container,
  964. .block-editor-block-mover .components-toolbar {
  965. flex-direction: column;
  966. }
  967. }
  968. .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container, .block-editor-block-mover.is-horizontal .components-toolbar {
  969. flex-direction: row;
  970. }
  971. .block-editor-block-mover .block-editor-block-mover-button.block-editor-block-mover-button {
  972. padding-right: 0;
  973. padding-left: 0;
  974. min-width: 36px;
  975. }
  976. @media (min-width: 600px) {
  977. .block-editor-block-mover .block-editor-block-mover-button {
  978. height: 24px;
  979. width: 42px;
  980. padding-right: 11px !important;
  981. padding-left: 6px !important;
  982. }
  983. .block-editor-block-mover .block-editor-block-mover-button.block-editor-block-mover-button {
  984. min-width: 42px;
  985. }
  986. }
  987. @media (min-width: 600px) {
  988. .block-editor-block-mover .block-editor-block-mover-button::before {
  989. left: 8px !important;
  990. right: 8px !important;
  991. }
  992. }
  993. .block-editor-block-mover .block-editor-block-mover__drag-handle {
  994. width: 24px;
  995. cursor: grab;
  996. min-width: 24px !important;
  997. padding: 0 !important;
  998. }
  999. .block-editor-block-mover .block-editor-block-mover__drag-handle:focus::before {
  1000. left: 0 !important;
  1001. right: 0 !important;
  1002. }
  1003. @media (min-width: 600px) {
  1004. .block-editor-block-mover .components-toolbar-group .block-editor-block-mover-button,
  1005. .block-editor-block-mover .components-toolbar .block-editor-block-mover-button {
  1006. margin: 0 auto 0 0;
  1007. }
  1008. .block-editor-block-mover .components-toolbar-group .block-editor-block-mover-button.is-up-button::before,
  1009. .block-editor-block-mover .components-toolbar .block-editor-block-mover-button.is-up-button::before {
  1010. bottom: 0;
  1011. height: calc(100% - 1px);
  1012. }
  1013. .block-editor-block-mover .components-toolbar-group .block-editor-block-mover-button.is-down-button::before,
  1014. .block-editor-block-mover .components-toolbar .block-editor-block-mover-button.is-down-button::before {
  1015. top: 0;
  1016. height: calc(100% - 1px);
  1017. }
  1018. }
  1019. .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.has-icon {
  1020. height: 48px;
  1021. width: 24px;
  1022. padding-left: 0;
  1023. padding-right: 0;
  1024. }
  1025. .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.has-icon::before {
  1026. top: 1px;
  1027. bottom: 1px;
  1028. min-width: 0;
  1029. width: auto;
  1030. height: auto;
  1031. }
  1032. .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.is-up-button.has-icon svg {
  1033. margin-left: 0;
  1034. margin-right: -8px;
  1035. margin-bottom: 0;
  1036. }
  1037. .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.is-up-button.has-icon::before {
  1038. left: 0 !important;
  1039. right: 0 !important;
  1040. }
  1041. .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.is-down-button.has-icon svg {
  1042. margin-left: -8px;
  1043. margin-right: 0;
  1044. margin-top: 0;
  1045. }
  1046. .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.is-down-button.has-icon::before {
  1047. left: 0 !important;
  1048. right: 0 !important;
  1049. width: calc(100% + 1px);
  1050. }
  1051. .block-editor-block-navigation__label {
  1052. margin: 0 0 12px;
  1053. color: #757575;
  1054. text-transform: uppercase;
  1055. font-size: 11px;
  1056. font-weight: 500;
  1057. }
  1058. .block-editor-block-navigation__container {
  1059. min-width: 280px;
  1060. }
  1061. .block-editor-block-navigation-tree {
  1062. width: 100%;
  1063. border-collapse: collapse;
  1064. padding: 0;
  1065. margin: 0;
  1066. }
  1067. .components-modal__content .block-editor-block-navigation-tree {
  1068. margin: -12px -6px 0;
  1069. width: calc(100% + 12px);
  1070. }
  1071. .block-editor-block-navigation-leaf {
  1072. position: relative;
  1073. }
  1074. .block-editor-block-navigation-leaf.is-selected .block-editor-block-navigation-block-contents {
  1075. background: var(--wp-admin-theme-color);
  1076. color: #fff;
  1077. }
  1078. .block-editor-block-navigation-leaf.is-selected .block-editor-block-navigation-block-contents:focus {
  1079. box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  1080. }
  1081. .block-editor-block-navigation-leaf.is-branch-selected.is-selected .block-editor-block-navigation-block-contents {
  1082. border-radius: 2px 2px 0 0;
  1083. }
  1084. .block-editor-block-navigation-leaf.is-branch-selected:not(.is-selected) .block-editor-block-navigation-block-contents {
  1085. background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
  1086. border-radius: 0;
  1087. }
  1088. .block-editor-block-navigation-leaf.is-branch-selected.is-last-of-selected-branch .block-editor-block-navigation-block-contents {
  1089. border-radius: 0 0 2px 2px;
  1090. }
  1091. .block-editor-block-navigation-leaf.is-dragging {
  1092. display: none;
  1093. }
  1094. .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents {
  1095. display: flex;
  1096. align-items: center;
  1097. width: 100%;
  1098. height: auto;
  1099. padding: 6px 12px;
  1100. text-align: left;
  1101. color: #1e1e1e;
  1102. border-radius: 2px;
  1103. position: relative;
  1104. white-space: nowrap;
  1105. }
  1106. .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents:hover, .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents:focus {
  1107. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  1108. }
  1109. .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents:focus {
  1110. z-index: 1;
  1111. }
  1112. .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents.is-dropping-before::before {
  1113. content: "";
  1114. position: absolute;
  1115. pointer-events: none;
  1116. transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
  1117. top: -2px;
  1118. right: 0;
  1119. left: 0;
  1120. border-top: 4px solid var(--wp-admin-theme-color);
  1121. }
  1122. .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents.is-dropping-after::before {
  1123. content: "";
  1124. position: absolute;
  1125. pointer-events: none;
  1126. transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
  1127. bottom: -2px;
  1128. right: 0;
  1129. left: 0;
  1130. border-bottom: 4px solid var(--wp-admin-theme-color);
  1131. }
  1132. .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents.is-dropping-to-inner-blocks::before {
  1133. content: "";
  1134. position: absolute;
  1135. pointer-events: none;
  1136. transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
  1137. bottom: -2px;
  1138. right: 0;
  1139. left: 24px;
  1140. border-bottom: 4px solid var(--wp-admin-theme-color);
  1141. }
  1142. .components-modal__content .block-editor-block-navigation-leaf .block-editor-block-navigation-block-contents {
  1143. padding-left: 0;
  1144. padding-right: 0;
  1145. }
  1146. .block-editor-block-navigation-leaf.is-visible .block-editor-block-navigation-block-contents {
  1147. opacity: 1;
  1148. animation: edit-post__fade-in-animation 0.2s ease-out 0s;
  1149. animation-fill-mode: forwards;
  1150. }
  1151. @media (prefers-reduced-motion: reduce) {
  1152. .block-editor-block-navigation-leaf.is-visible .block-editor-block-navigation-block-contents {
  1153. animation-duration: 1ms;
  1154. animation-delay: 0s;
  1155. }
  1156. }
  1157. .block-editor-block-navigation-leaf .block-editor-block-icon {
  1158. align-self: flex-start;
  1159. margin-right: 10px;
  1160. width: 20px;
  1161. }
  1162. .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell,
  1163. .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell,
  1164. .block-editor-block-navigation-leaf .block-editor-block-navigation-block__contents-cell {
  1165. padding-top: 0;
  1166. padding-bottom: 0;
  1167. }
  1168. .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell,
  1169. .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell {
  1170. line-height: 0;
  1171. width: 36px;
  1172. opacity: 0;
  1173. vertical-align: top;
  1174. }
  1175. @media (prefers-reduced-motion: reduce) {
  1176. .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell,
  1177. .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell {
  1178. transition-duration: 0s;
  1179. transition-delay: 0s;
  1180. }
  1181. }
  1182. .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell:hover, .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell.is-visible,
  1183. .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell:hover,
  1184. .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell.is-visible {
  1185. position: relative;
  1186. z-index: 1;
  1187. opacity: 1;
  1188. animation: edit-post__fade-in-animation 0.2s ease-out 0s;
  1189. animation-fill-mode: forwards;
  1190. }
  1191. @media (prefers-reduced-motion: reduce) {
  1192. .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell:hover, .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell.is-visible,
  1193. .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell:hover,
  1194. .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell.is-visible {
  1195. animation-duration: 1ms;
  1196. animation-delay: 0s;
  1197. }
  1198. }
  1199. .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell,
  1200. .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell .components-button.has-icon,
  1201. .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell,
  1202. .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell .components-button.has-icon {
  1203. width: 24px;
  1204. min-width: 24px;
  1205. padding: 0;
  1206. }
  1207. .block-editor-block-navigation-leaf .block-editor-block-navigation-block__menu-cell {
  1208. padding-top: 8px;
  1209. }
  1210. .block-editor-block-navigation-leaf .block-editor-block-navigation-block__mover-cell-alignment-wrapper {
  1211. display: flex;
  1212. height: 100%;
  1213. flex-direction: column;
  1214. align-items: center;
  1215. }
  1216. .block-editor-block-navigation-leaf .block-editor-block-mover-button {
  1217. position: relative;
  1218. width: 36px;
  1219. height: 24px;
  1220. }
  1221. .block-editor-block-navigation-leaf .block-editor-block-mover-button svg {
  1222. position: relative;
  1223. height: 24px;
  1224. }
  1225. .block-editor-block-navigation-leaf .block-editor-block-mover-button.is-up-button {
  1226. margin-top: -6px;
  1227. align-items: flex-end;
  1228. }
  1229. .block-editor-block-navigation-leaf .block-editor-block-mover-button.is-up-button svg {
  1230. bottom: -4px;
  1231. }
  1232. .block-editor-block-navigation-leaf .block-editor-block-mover-button.is-down-button {
  1233. margin-bottom: -6px;
  1234. align-items: flex-start;
  1235. }
  1236. .block-editor-block-navigation-leaf .block-editor-block-mover-button.is-down-button svg {
  1237. top: -4px;
  1238. }
  1239. .block-editor-block-navigation-leaf .block-editor-block-mover-button:focus:enabled {
  1240. box-shadow: none;
  1241. outline: none;
  1242. }
  1243. .block-editor-block-navigation-leaf .block-editor-block-mover-button:focus {
  1244. box-shadow: none;
  1245. outline: none;
  1246. }
  1247. .block-editor-block-navigation-leaf .block-editor-block-mover-button:focus::before {
  1248. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff;
  1249. outline: 2px solid transparent;
  1250. }
  1251. .block-editor-block-navigation-leaf .block-editor-block-mover-button::before {
  1252. content: "";
  1253. position: absolute;
  1254. display: block;
  1255. border-radius: 2px;
  1256. height: 16px;
  1257. min-width: 100%;
  1258. left: 0;
  1259. right: 0;
  1260. animation: components-button__appear-animation 0.1s ease;
  1261. animation-fill-mode: forwards;
  1262. }
  1263. @media (prefers-reduced-motion: reduce) {
  1264. .block-editor-block-navigation-leaf .block-editor-block-mover-button::before {
  1265. animation-duration: 1ms;
  1266. animation-delay: 0s;
  1267. }
  1268. }
  1269. .block-editor-block-navigation-leaf .block-editor-inserter__toggle {
  1270. background: #1e1e1e;
  1271. color: #fff;
  1272. height: 24px;
  1273. margin: 6px 6px 6px 1px;
  1274. min-width: 24px;
  1275. }
  1276. .block-editor-block-navigation-leaf .block-editor-inserter__toggle:active {
  1277. color: #fff;
  1278. }
  1279. .block-editor-block-navigation-leaf .block-editor-block-navigation-block-select-button__anchor {
  1280. background: rgba(0, 0, 0, 0.1);
  1281. border-radius: 2px;
  1282. display: inline-block;
  1283. padding: 2px 6px;
  1284. margin: 0 8px;
  1285. max-width: 120px;
  1286. overflow: hidden;
  1287. text-overflow: ellipsis;
  1288. }
  1289. .block-editor-block-navigation-leaf.is-selected .block-editor-block-navigation-block-select-button__anchor {
  1290. background: rgba(0, 0, 0, 0.3);
  1291. }
  1292. .block-editor-block-navigation-block-slot__description,
  1293. .block-editor-block-navigation-block-select-button__description,
  1294. .block-editor-block-navigation-appender__description {
  1295. display: none;
  1296. }
  1297. .block-editor-block-navigation-block__contents-cell .block-editor-block-navigation-block__contents-container,
  1298. .block-editor-block-navigation-block__contents-cell .block-editor-block-navigation-appender__container,
  1299. .block-editor-block-navigation-appender__cell .block-editor-block-navigation-block__contents-container,
  1300. .block-editor-block-navigation-appender__cell .block-editor-block-navigation-appender__container {
  1301. display: flex;
  1302. }
  1303. .block-editor-block-navigation-leaf[aria-level] .block-editor-block-icon {
  1304. margin-left: 224px;
  1305. }
  1306. .block-editor-block-navigation-leaf[aria-level="1"] .block-editor-block-icon {
  1307. margin-left: 0px;
  1308. }
  1309. .block-editor-block-navigation-leaf[aria-level="2"] .block-editor-block-icon {
  1310. margin-left: 28px;
  1311. }
  1312. .block-editor-block-navigation-leaf[aria-level="3"] .block-editor-block-icon {
  1313. margin-left: 56px;
  1314. }
  1315. .block-editor-block-navigation-leaf[aria-level="4"] .block-editor-block-icon {
  1316. margin-left: 84px;
  1317. }
  1318. .block-editor-block-navigation-leaf[aria-level="5"] .block-editor-block-icon {
  1319. margin-left: 112px;
  1320. }
  1321. .block-editor-block-navigation-leaf[aria-level="6"] .block-editor-block-icon {
  1322. margin-left: 140px;
  1323. }
  1324. .block-editor-block-navigation-leaf[aria-level="7"] .block-editor-block-icon {
  1325. margin-left: 168px;
  1326. }
  1327. .block-editor-block-navigation-leaf[aria-level="8"] .block-editor-block-icon {
  1328. margin-left: 196px;
  1329. }
  1330. .block-editor-block-navigation-leaf[aria-level="9"] .block-editor-block-icon {
  1331. margin-left: 224px;
  1332. }
  1333. .block-editor-block-parent-selector {
  1334. background: #fff;
  1335. border-radius: 2px;
  1336. }
  1337. .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
  1338. width: 48px;
  1339. height: 48px;
  1340. border: 1px solid #1e1e1e;
  1341. border-radius: 2px;
  1342. }
  1343. .block-editor-block-patterns-list__list-item {
  1344. cursor: pointer;
  1345. margin-top: 16px;
  1346. }
  1347. .block-editor-block-patterns-list__list-item.is-placeholder {
  1348. min-height: 100px;
  1349. }
  1350. .block-editor-block-patterns-list__list-item[draggable=true] .block-editor-block-preview__container {
  1351. cursor: grab;
  1352. }
  1353. .block-editor-block-patterns-list__item {
  1354. height: 100%;
  1355. border-radius: 2px;
  1356. transition: all 0.05s ease-in-out;
  1357. position: relative;
  1358. border: 1px solid transparent;
  1359. }
  1360. .block-editor-block-patterns-list__item:hover {
  1361. border: 1px solid var(--wp-admin-theme-color);
  1362. }
  1363. .block-editor-block-patterns-list__item:focus {
  1364. box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  1365. outline: 2px solid transparent;
  1366. }
  1367. .block-editor-block-patterns-list__item-title {
  1368. padding: 4px;
  1369. font-size: 12px;
  1370. text-align: center;
  1371. }
  1372. .block-editor-block-preview__container {
  1373. position: relative;
  1374. width: 100%;
  1375. overflow: hidden;
  1376. }
  1377. .block-editor-block-preview__container.editor-styles-wrapper {
  1378. padding: 0;
  1379. margin: 0;
  1380. }
  1381. .block-editor-block-preview__container .block-editor-block-preview__content {
  1382. position: absolute;
  1383. top: 0;
  1384. left: 0;
  1385. transform-origin: top left;
  1386. text-align: initial;
  1387. margin: 0;
  1388. overflow: visible;
  1389. min-height: auto;
  1390. }
  1391. .block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__insertion-point,
  1392. .block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-drop-zone,
  1393. .block-editor-block-preview__container .block-editor-block-preview__content .reusable-block-indicator,
  1394. .block-editor-block-preview__container .block-editor-block-preview__content .block-list-appender {
  1395. display: none;
  1396. }
  1397. .block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__layout.is-root-container {
  1398. padding-left: 0;
  1399. padding-right: 0;
  1400. }
  1401. .block-editor-block-preview__container .block-editor-block-preview__content .block-editor-block-list__layout.is-root-container > .wp-block[data-align=full] {
  1402. margin-left: 0;
  1403. margin-right: 0;
  1404. }
  1405. .block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
  1406. padding: 0;
  1407. }
  1408. .block-editor-block-styles {
  1409. display: flex;
  1410. flex-wrap: wrap;
  1411. justify-content: space-between;
  1412. }
  1413. .block-editor-block-styles__item {
  1414. width: calc(50% - 4px);
  1415. margin: 4px 0;
  1416. flex-shrink: 0;
  1417. cursor: pointer;
  1418. overflow: hidden;
  1419. border-radius: 2px;
  1420. padding: 6px;
  1421. display: flex;
  1422. flex-direction: column;
  1423. }
  1424. .block-editor-block-styles__item:focus {
  1425. box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  1426. outline: 2px solid transparent;
  1427. }
  1428. .block-editor-block-styles__item:hover .block-editor-block-styles__item-preview {
  1429. border-color: var(--wp-admin-theme-color);
  1430. }
  1431. .block-editor-block-styles__item.is-active .block-editor-block-styles__item-label {
  1432. font-weight: bold;
  1433. }
  1434. .block-editor-block-styles__item.is-active .block-editor-block-styles__item-preview {
  1435. margin: 0;
  1436. border: 2px solid #1e1e1e;
  1437. }
  1438. .block-editor-block-styles__item .block-editor-block-preview__container {
  1439. cursor: inherit;
  1440. }
  1441. .block-editor-block-styles__item-preview {
  1442. outline: 1px solid transparent;
  1443. padding: 0;
  1444. margin: 2px;
  1445. border-radius: 2px;
  1446. display: flex;
  1447. overflow: hidden;
  1448. background: #fff;
  1449. align-items: center;
  1450. flex-grow: 1;
  1451. min-height: 80px;
  1452. max-height: 160px;
  1453. }
  1454. .block-editor-block-switcher__styles__menugroup {
  1455. position: relative;
  1456. }
  1457. .block-editor-block-styles__item-label {
  1458. text-align: center;
  1459. padding: 4px 0;
  1460. }
  1461. .block-editor-block-switcher {
  1462. position: relative;
  1463. }
  1464. .block-editor-block-switcher__no-switcher-icon,
  1465. .block-editor-block-switcher__toggle {
  1466. position: relative;
  1467. }
  1468. .components-button.block-editor-block-switcher__toggle,
  1469. .components-button.block-editor-block-switcher__no-switcher-icon {
  1470. margin: 0;
  1471. display: block;
  1472. height: 48px;
  1473. }
  1474. .components-button.block-editor-block-switcher__toggle .block-editor-block-icon,
  1475. .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
  1476. margin: auto;
  1477. }
  1478. .block-editor-block-switcher__toggle-text {
  1479. margin-left: 8px;
  1480. }
  1481. .show-icon-labels .block-editor-block-switcher__toggle-text {
  1482. display: none;
  1483. }
  1484. .show-icon-labels .block-editor-block-toolbar .block-editor-block-switcher .components-button.has-icon::after {
  1485. font-size: 14px;
  1486. }
  1487. .block-editor-block-switcher__popover {
  1488. margin-left: 6px;
  1489. }
  1490. .components-button.block-editor-block-switcher__no-switcher-icon {
  1491. width: 48px;
  1492. }
  1493. .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-blocks-icon {
  1494. margin-right: auto;
  1495. margin-left: auto;
  1496. }
  1497. .components-button.block-editor-block-switcher__no-switcher-icon:disabled {
  1498. opacity: 1;
  1499. }
  1500. .components-button.block-editor-block-switcher__no-switcher-icon:disabled,
  1501. .components-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors {
  1502. color: #1e1e1e;
  1503. }
  1504. .block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon .block-editor-block-icon,
  1505. .block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon .block-editor-block-icon,
  1506. .block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon .block-editor-block-icon,
  1507. .block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon .block-editor-block-icon {
  1508. height: 100%;
  1509. position: relative;
  1510. margin: 0 auto;
  1511. display: flex;
  1512. align-items: center;
  1513. min-width: 100%;
  1514. }
  1515. .block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon::before,
  1516. .block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon::before,
  1517. .block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon::before,
  1518. .block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon::before {
  1519. top: 8px;
  1520. right: 8px;
  1521. bottom: 8px;
  1522. left: 8px;
  1523. }
  1524. .components-popover.block-editor-block-switcher__popover .components-popover__content {
  1525. min-width: 300px;
  1526. }
  1527. .components-popover.block-editor-block-switcher__popover .components-popover__content > div {
  1528. min-width: auto;
  1529. display: flex;
  1530. background: #fff;
  1531. padding: 0;
  1532. }
  1533. .components-popover.block-editor-block-switcher__popover .components-popover__content > div .components-menu-group {
  1534. margin: 0;
  1535. }
  1536. .block-editor-block-switcher__popover .components-popover__content .block-editor-block-styles {
  1537. margin: 0 -3px;
  1538. }
  1539. .block-editor-block-switcher__popover .components-popover__content .components-panel__body {
  1540. border: 0;
  1541. position: relative;
  1542. z-index: 1;
  1543. }
  1544. .block-editor-block-switcher__popover .components-popover__content .components-panel__body + .components-panel__body {
  1545. border-top: 1px solid #e0e0e0;
  1546. }
  1547. .block-editor-block-switcher__popover__preview__parent .block-editor-block-switcher__popover__preview__container {
  1548. position: absolute;
  1549. top: -12px;
  1550. left: calc(100% + 32px);
  1551. }
  1552. .block-editor-block-switcher__preview__popover {
  1553. display: none;
  1554. }
  1555. .block-editor-block-switcher__preview__popover.components-popover {
  1556. margin-left: 4px;
  1557. margin-top: 11px;
  1558. }
  1559. @media (min-width: 782px) {
  1560. .block-editor-block-switcher__preview__popover {
  1561. display: block;
  1562. }
  1563. }
  1564. .block-editor-block-switcher__preview__popover .components-popover__content {
  1565. box-shadow: none;
  1566. border: 1px solid #1e1e1e;
  1567. background: #fff;
  1568. border-radius: 2px;
  1569. }
  1570. .block-editor-block-switcher__preview__popover .block-editor-block-switcher__preview {
  1571. width: 300px;
  1572. height: auto;
  1573. max-height: 500px;
  1574. padding: 16px;
  1575. }
  1576. .block-editor-block-switcher__preview-title {
  1577. margin-bottom: 12px;
  1578. color: #757575;
  1579. text-transform: uppercase;
  1580. font-size: 11px;
  1581. font-weight: 500;
  1582. }
  1583. .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon {
  1584. width: 48px;
  1585. }
  1586. .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon,
  1587. .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle {
  1588. height: 48px;
  1589. }
  1590. .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-icon,
  1591. .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-switcher__transform,
  1592. .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle .block-editor-block-icon,
  1593. .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle .block-editor-block-switcher__transform {
  1594. width: 48px;
  1595. height: 48px;
  1596. }
  1597. .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-switcher__transform,
  1598. .block-editor-block-contextual-toolbar .components-button.block-editor-block-switcher__toggle .block-editor-block-switcher__transform {
  1599. padding: 12px;
  1600. }
  1601. .block-editor-block-switcher__preview-patterns-container {
  1602. padding-bottom: 16px;
  1603. }
  1604. .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item {
  1605. margin-top: 16px;
  1606. }
  1607. .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-preview__container {
  1608. cursor: pointer;
  1609. }
  1610. .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item {
  1611. height: 100%;
  1612. border-radius: 2px;
  1613. transition: all 0.05s ease-in-out;
  1614. position: relative;
  1615. border: 1px solid transparent;
  1616. }
  1617. .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item:hover, .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item:focus {
  1618. box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  1619. outline: 2px solid transparent;
  1620. }
  1621. .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item:hover {
  1622. box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) #1e1e1e;
  1623. }
  1624. .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item .block-editor-block-switcher__preview-patterns-container-list__item-title {
  1625. padding: 4px;
  1626. font-size: 12px;
  1627. text-align: center;
  1628. cursor: pointer;
  1629. }
  1630. .block-editor-block-types-list > [role=presentation] {
  1631. padding: 4px;
  1632. margin-left: -4px;
  1633. margin-right: -4px;
  1634. overflow: hidden;
  1635. display: flex;
  1636. flex-wrap: wrap;
  1637. }
  1638. .block-editor-block-variation-picker .components-placeholder__instructions {
  1639. margin-bottom: 0;
  1640. }
  1641. .block-editor-block-variation-picker .components-placeholder__fieldset {
  1642. flex-direction: column;
  1643. }
  1644. .block-editor-block-variation-picker.has-many-variations .components-placeholder__fieldset {
  1645. max-width: 90%;
  1646. }
  1647. .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations {
  1648. display: flex;
  1649. justify-content: flex-start;
  1650. flex-direction: row;
  1651. flex-wrap: wrap;
  1652. width: 100%;
  1653. margin: 16px 0;
  1654. padding: 0;
  1655. list-style: none;
  1656. }
  1657. .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations > li {
  1658. list-style: none;
  1659. margin: 8px 20px 0 0;
  1660. flex-shrink: 1;
  1661. width: 75px;
  1662. text-align: center;
  1663. }
  1664. .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations > li button {
  1665. display: inline-flex;
  1666. margin-right: 0;
  1667. }
  1668. .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations .block-editor-block-variation-picker__variation {
  1669. padding: 8px;
  1670. }
  1671. .block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations .block-editor-block-variation-picker__variation-label {
  1672. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  1673. font-size: 12px;
  1674. display: block;
  1675. line-height: 1.4;
  1676. }
  1677. .block-editor-block-variation-picker__variation {
  1678. width: 100%;
  1679. }
  1680. .block-editor-block-variation-picker__variation.components-button.has-icon {
  1681. justify-content: center;
  1682. width: auto;
  1683. }
  1684. .block-editor-block-variation-picker__variation.components-button.has-icon.is-secondary {
  1685. background-color: #fff;
  1686. }
  1687. .block-editor-block-variation-picker__variation.components-button {
  1688. height: auto;
  1689. padding: 0;
  1690. }
  1691. .block-editor-block-variation-picker__variation::before {
  1692. content: "";
  1693. padding-bottom: 100%;
  1694. }
  1695. .block-editor-block-variation-picker__variation:first-child {
  1696. margin-left: 0;
  1697. }
  1698. .block-editor-block-variation-picker__variation:last-child {
  1699. margin-right: 0;
  1700. }
  1701. .block-editor-block-pattern-setup {
  1702. display: flex;
  1703. flex-direction: column;
  1704. justify-content: center;
  1705. align-items: flex-start;
  1706. width: 100%;
  1707. border-radius: 2px;
  1708. box-shadow: inset 0 0 0 1px #1e1e1e;
  1709. outline: 1px solid transparent;
  1710. }
  1711. .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__toolbar {
  1712. justify-content: center;
  1713. }
  1714. .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container {
  1715. display: grid;
  1716. grid-template-columns: 1fr 1fr;
  1717. grid-gap: 16px;
  1718. padding: 16px;
  1719. max-height: 550px;
  1720. overflow: auto;
  1721. margin: 0 1px 1px 1px;
  1722. width: calc(100% - 2px);
  1723. background: #fff;
  1724. }
  1725. .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container,
  1726. .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container div[role=button] {
  1727. cursor: pointer;
  1728. }
  1729. .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item-title {
  1730. padding: 4px;
  1731. font-size: 12px;
  1732. text-align: center;
  1733. }
  1734. .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container {
  1735. border-radius: 2px;
  1736. border: 1px solid #ddd;
  1737. }
  1738. .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar {
  1739. box-sizing: border-box;
  1740. position: relative;
  1741. padding: 16px;
  1742. width: 100%;
  1743. text-align: left;
  1744. margin: 0;
  1745. color: #1e1e1e;
  1746. border-radius: 2px 2px 0 0;
  1747. background-color: #fff;
  1748. box-shadow: inset 0 0 0 1px #1e1e1e;
  1749. outline: 1px solid transparent;
  1750. display: flex;
  1751. flex-direction: row;
  1752. align-items: center;
  1753. justify-content: space-between;
  1754. }
  1755. .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__display-controls {
  1756. display: flex;
  1757. }
  1758. .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__navigation,
  1759. .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__actions {
  1760. width: calc(50% - 36px);
  1761. display: flex;
  1762. }
  1763. .block-editor-block-pattern-setup .block-editor-block-pattern-setup__toolbar .block-editor-block-pattern-setup__actions {
  1764. justify-content: flex-end;
  1765. }
  1766. .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container {
  1767. display: flex;
  1768. flex-direction: column;
  1769. width: 100%;
  1770. box-sizing: border-box;
  1771. }
  1772. .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container {
  1773. overflow: hidden;
  1774. position: relative;
  1775. padding: 0;
  1776. margin: 0;
  1777. list-style: none;
  1778. transform-style: preserve-3d;
  1779. }
  1780. .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container * {
  1781. box-sizing: border-box;
  1782. }
  1783. .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide {
  1784. opacity: 0;
  1785. position: absolute;
  1786. top: 0;
  1787. width: 100%;
  1788. margin: auto;
  1789. padding: 16px;
  1790. transition: transform 0.5s, opacity 0.5s, z-index 0.5s;
  1791. z-index: 100;
  1792. }
  1793. .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide.active-slide {
  1794. opacity: 1;
  1795. position: relative;
  1796. z-index: 102;
  1797. }
  1798. .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide.previous-slide {
  1799. transform: translateX(-100%);
  1800. z-index: 101;
  1801. }
  1802. .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container .pattern-slide.next-slide {
  1803. transform: translateX(100%);
  1804. z-index: 101;
  1805. }
  1806. .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .block-list-appender {
  1807. display: none;
  1808. }
  1809. .block-editor-block-variation-transforms {
  1810. padding: 0 16px 16px 56px;
  1811. width: 100%;
  1812. }
  1813. .block-editor-block-variation-transforms .components-dropdown-menu__toggle {
  1814. border: 1px solid #757575;
  1815. border-radius: 2px;
  1816. min-height: 30px;
  1817. width: 100%;
  1818. position: relative;
  1819. text-align: left;
  1820. justify-content: left;
  1821. padding: 6px 12px;
  1822. }
  1823. .block-editor-block-variation-transforms .components-dropdown-menu__toggle.components-dropdown-menu__toggle {
  1824. padding-right: 24px;
  1825. }
  1826. .block-editor-block-variation-transforms .components-dropdown-menu__toggle:focus:not(:disabled) {
  1827. border-color: var(--wp-admin-theme-color);
  1828. box-shadow: 0 0 0 calc(var(--wp-admin-border-width-focus) - 1px) var(--wp-admin-theme-color);
  1829. }
  1830. .block-editor-block-variation-transforms .components-dropdown-menu__toggle svg {
  1831. height: 100%;
  1832. padding: 0;
  1833. position: absolute;
  1834. right: 0;
  1835. top: 0;
  1836. }
  1837. .block-editor-block-variation-transforms__popover .components-popover__content {
  1838. min-width: 230px;
  1839. }
  1840. .components-border-style-control__select {
  1841. margin-bottom: 24px;
  1842. }
  1843. .components-border-style-control__select button {
  1844. width: 100%;
  1845. }
  1846. .components-border-style-control__select ul li,
  1847. .components-border-style-control__select ul li:last-child {
  1848. margin: 6px;
  1849. }
  1850. .block-editor-button-block-appender {
  1851. display: flex;
  1852. flex-direction: column;
  1853. align-items: center;
  1854. justify-content: center;
  1855. padding: 8px;
  1856. width: 100%;
  1857. height: auto;
  1858. color: #1e1e1e;
  1859. box-shadow: inset 0 0 0 1px #1e1e1e;
  1860. }
  1861. .is-dark-theme .block-editor-button-block-appender {
  1862. color: rgba(255, 255, 255, 0.65);
  1863. box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  1864. }
  1865. .block-editor-button-block-appender:hover {
  1866. color: var(--wp-admin-theme-color);
  1867. box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
  1868. }
  1869. .block-editor-button-block-appender:focus {
  1870. box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
  1871. }
  1872. .block-editor-button-block-appender:active {
  1873. color: #000;
  1874. }
  1875. .block-editor-button-block-appender.block-list-appender__toggle {
  1876. display: flex;
  1877. flex-direction: row;
  1878. box-shadow: none;
  1879. height: 24px;
  1880. width: 24px;
  1881. }
  1882. .block-editor-button-block-appender.block-list-appender__toggle > svg {
  1883. width: 24px;
  1884. background-color: #1e1e1e;
  1885. color: #fff;
  1886. border-radius: 2px;
  1887. flex: 1 0 auto;
  1888. }
  1889. .block-editor-color-gradient-control .block-editor-color-gradient-control__color-indicator {
  1890. margin-bottom: 12px;
  1891. }
  1892. .block-editor-color-gradient-control .block-editor-color-gradient-control__button-tabs {
  1893. display: block;
  1894. margin-bottom: 12px;
  1895. }
  1896. .block-editor-panel-color-gradient-settings .component-color-indicator {
  1897. vertical-align: text-bottom;
  1898. }
  1899. .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
  1900. display: inline-block;
  1901. }
  1902. .block-editor-panel-color-gradient-settings.is-opened .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
  1903. display: none;
  1904. }
  1905. @media screen and (min-width: 782px) {
  1906. .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches {
  1907. margin-right: 0;
  1908. }
  1909. .block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper {
  1910. margin-right: calc((100% - (28px * 6)) / 5);
  1911. }
  1912. .block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(6n+6) {
  1913. margin-right: 0;
  1914. }
  1915. }
  1916. .block-editor-contrast-checker > .components-notice {
  1917. margin: 0;
  1918. }
  1919. .block-editor-default-block-appender {
  1920. clear: both;
  1921. margin-left: auto;
  1922. margin-right: auto;
  1923. position: relative;
  1924. }
  1925. .block-editor-default-block-appender[data-root-client-id=""] .block-editor-default-block-appender__content:hover {
  1926. outline: 1px solid transparent;
  1927. }
  1928. .block-editor-default-block-appender .block-editor-default-block-appender__content {
  1929. opacity: 0.62;
  1930. }
  1931. .block-editor-default-block-appender .components-drop-zone__content-icon {
  1932. display: none;
  1933. }
  1934. .block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter,
  1935. .block-editor-default-block-appender .block-editor-inserter {
  1936. position: absolute;
  1937. top: 0;
  1938. height: 32px;
  1939. }
  1940. .block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle,
  1941. .block-editor-default-block-appender .block-editor-inserter .block-editor-inserter__toggle {
  1942. margin-right: 0;
  1943. }
  1944. .block-editor-block-list__empty-block-inserter,
  1945. .block-editor-default-block-appender .block-editor-inserter {
  1946. right: 8px;
  1947. }
  1948. @media (min-width: 600px) {
  1949. .block-editor-block-list__empty-block-inserter,
  1950. .block-editor-default-block-appender .block-editor-inserter {
  1951. display: flex;
  1952. height: 100%;
  1953. }
  1954. }
  1955. .block-editor-block-list__empty-block-inserter:disabled,
  1956. .block-editor-default-block-appender .block-editor-inserter:disabled {
  1957. display: none;
  1958. }
  1959. .block-editor-duotone-control__popover .components-popover__content {
  1960. border: 1px solid #1e1e1e;
  1961. min-width: 214px;
  1962. }
  1963. .block-editor-duotone-control__popover .components-circular-option-picker {
  1964. padding: 12px;
  1965. }
  1966. .block-editor-duotone-control__popover .components-menu-group__label {
  1967. padding: 12px 12px 0 12px;
  1968. width: 100%;
  1969. box-sizing: border-box;
  1970. }
  1971. .block-editor-duotone-control__popover > .components-popover__content {
  1972. width: 334px;
  1973. }
  1974. .block-editor-duotone-control__popover:not([data-y-axis=middle][data-x-axis=right]) > .components-popover__content {
  1975. margin-left: -14px;
  1976. }
  1977. .components-font-appearance-control__select {
  1978. margin-bottom: 24px;
  1979. }
  1980. .components-font-appearance-control__select ul li {
  1981. color: #1e1e1e;
  1982. text-transform: capitalize;
  1983. }
  1984. .items-justified-left {
  1985. justify-content: flex-start;
  1986. }
  1987. .items-justified-center {
  1988. justify-content: center;
  1989. }
  1990. .items-justified-right {
  1991. justify-content: flex-end;
  1992. }
  1993. .items-justified-space-between {
  1994. justify-content: space-between;
  1995. }
  1996. .block-editor-link-control {
  1997. position: relative;
  1998. min-width: 360px;
  1999. }
  2000. .components-popover__content .block-editor-link-control {
  2001. min-width: auto;
  2002. width: 90vw;
  2003. max-width: 360px;
  2004. }
  2005. .block-editor-link-control__search-input-wrapper {
  2006. position: relative;
  2007. }
  2008. .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] {
  2009. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  2010. padding: 6px 8px;
  2011. box-shadow: 0 0 0 transparent;
  2012. transition: box-shadow 0.1s linear;
  2013. border-radius: 2px;
  2014. border: 1px solid #757575;
  2015. /* Fonts smaller than 16px causes mobile safari to zoom. */
  2016. font-size: 16px;
  2017. /* Override core line-height. To be reviewed. */
  2018. line-height: normal;
  2019. width: calc(100% - 32px);
  2020. display: block;
  2021. padding: 11px 16px;
  2022. padding-right: 36px;
  2023. margin: 16px;
  2024. position: relative;
  2025. border: 1px solid #ddd;
  2026. border-radius: 2px;
  2027. }
  2028. @media (prefers-reduced-motion: reduce) {
  2029. .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] {
  2030. transition-duration: 0s;
  2031. transition-delay: 0s;
  2032. }
  2033. }
  2034. @media (min-width: 600px) {
  2035. .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] {
  2036. font-size: 13px;
  2037. /* Override core line-height. To be reviewed. */
  2038. line-height: normal;
  2039. }
  2040. }
  2041. .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]:focus {
  2042. border-color: var(--wp-admin-theme-color);
  2043. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  2044. outline: 2px solid transparent;
  2045. }
  2046. .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]::-webkit-input-placeholder {
  2047. color: rgba(30, 30, 30, 0.62);
  2048. }
  2049. .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]::-moz-placeholder {
  2050. opacity: 1;
  2051. color: rgba(30, 30, 30, 0.62);
  2052. }
  2053. .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]:-ms-input-placeholder {
  2054. color: rgba(30, 30, 30, 0.62);
  2055. }
  2056. .block-editor-link-control .block-editor-link-control__search-input .components-base-control__field {
  2057. margin-bottom: 0;
  2058. }
  2059. .block-editor-link-control__search-error {
  2060. margin: -8px 16px 16px;
  2061. }
  2062. .block-editor-link-control__search-actions {
  2063. position: absolute;
  2064. /*
  2065. * Actions must be positioned on top of URLInput, since the input will grow
  2066. * when suggestions are rendered.
  2067. *
  2068. * Compensate for:
  2069. * - Input margin ($grid-unit-20)
  2070. * - Border (1px)
  2071. * - Vertically, for the difference in height between the input (40px) and
  2072. * the icon buttons.
  2073. * - Horizontally, pad to the minimum of: default input padding, or the
  2074. * equivalent of the vertical padding.
  2075. */
  2076. top: 19px;
  2077. right: 19px;
  2078. }
  2079. .components-button .block-editor-link-control__search-submit .has-icon {
  2080. margin: -1px;
  2081. }
  2082. .block-editor-link-control__search-results-wrapper {
  2083. position: relative;
  2084. margin-top: -15px;
  2085. }
  2086. .block-editor-link-control__search-results-wrapper::before, .block-editor-link-control__search-results-wrapper::after {
  2087. content: "";
  2088. position: absolute;
  2089. left: -1px;
  2090. right: 16px;
  2091. display: block;
  2092. pointer-events: none;
  2093. z-index: 100;
  2094. }
  2095. .block-editor-link-control__search-results-wrapper::before {
  2096. height: 8px;
  2097. top: 0;
  2098. bottom: auto;
  2099. }
  2100. .block-editor-link-control__search-results-wrapper::after {
  2101. height: 16px;
  2102. bottom: 0;
  2103. top: auto;
  2104. }
  2105. .block-editor-link-control__search-results-label {
  2106. padding: 16px 32px 0;
  2107. display: block;
  2108. font-weight: 600;
  2109. }
  2110. .block-editor-link-control__search-results {
  2111. margin: 0;
  2112. padding: 8px 16px 8px;
  2113. max-height: 200px;
  2114. overflow-y: auto;
  2115. }
  2116. .block-editor-link-control__search-results.is-loading {
  2117. opacity: 0.2;
  2118. }
  2119. .block-editor-link-control__search-item {
  2120. position: relative;
  2121. display: flex;
  2122. align-items: center;
  2123. font-size: 13px;
  2124. cursor: pointer;
  2125. background: #fff;
  2126. width: 100%;
  2127. border: none;
  2128. text-align: left;
  2129. padding: 12px 16px;
  2130. border-radius: 5px;
  2131. height: auto;
  2132. }
  2133. .block-editor-link-control__search-item:hover, .block-editor-link-control__search-item:focus {
  2134. background-color: #ddd;
  2135. }
  2136. .block-editor-link-control__search-item:focus:not(:disabled) {
  2137. box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
  2138. }
  2139. .block-editor-link-control__search-item.is-selected {
  2140. background: #f0f0f0;
  2141. }
  2142. .block-editor-link-control__search-item.is-selected .block-editor-link-control__search-item-type {
  2143. background: #fff;
  2144. }
  2145. .block-editor-link-control__search-item.is-current {
  2146. background: transparent;
  2147. border: 0;
  2148. width: 100%;
  2149. cursor: default;
  2150. padding: 16px;
  2151. padding-left: 24px;
  2152. }
  2153. .block-editor-link-control__search-item .block-editor-link-control__search-item-header {
  2154. display: block;
  2155. margin-right: 8px;
  2156. overflow: hidden;
  2157. white-space: nowrap;
  2158. }
  2159. .block-editor-link-control__search-item .block-editor-link-control__search-item-icon {
  2160. margin-right: 1em;
  2161. min-width: 24px;
  2162. }
  2163. .block-editor-link-control__search-item .block-editor-link-control__search-item-info,
  2164. .block-editor-link-control__search-item .block-editor-link-control__search-item-title {
  2165. overflow: hidden;
  2166. text-overflow: ellipsis;
  2167. padding-right: 24px;
  2168. }
  2169. .block-editor-link-control__search-item .block-editor-link-control__search-item-info .components-external-link__icon,
  2170. .block-editor-link-control__search-item .block-editor-link-control__search-item-title .components-external-link__icon {
  2171. position: absolute;
  2172. right: 0;
  2173. margin-top: 0;
  2174. }
  2175. .block-editor-link-control__search-item .block-editor-link-control__search-item-title {
  2176. display: block;
  2177. margin-bottom: 0.2em;
  2178. font-weight: 500;
  2179. position: relative;
  2180. }
  2181. .block-editor-link-control__search-item .block-editor-link-control__search-item-title mark {
  2182. font-weight: 700;
  2183. color: #000;
  2184. background-color: transparent;
  2185. }
  2186. .block-editor-link-control__search-item .block-editor-link-control__search-item-title span {
  2187. font-weight: normal;
  2188. }
  2189. .block-editor-link-control__search-item .block-editor-link-control__search-item-info {
  2190. display: block;
  2191. color: #757575;
  2192. font-size: 0.9em;
  2193. line-height: 1.3;
  2194. }
  2195. .block-editor-link-control__search-item .block-editor-link-control__search-item-type {
  2196. display: block;
  2197. padding: 3px 8px;
  2198. margin-left: auto;
  2199. font-size: 0.9em;
  2200. background-color: #f0f0f0;
  2201. border-radius: 2px;
  2202. }
  2203. .block-editor-link-control__loading {
  2204. margin: 16px;
  2205. display: flex;
  2206. align-items: center;
  2207. }
  2208. .block-editor-link-control__loading .components-spinner {
  2209. margin-top: 0;
  2210. }
  2211. .components-button + .block-editor-link-control__search-create {
  2212. overflow: visible;
  2213. padding: 12px 16px;
  2214. }
  2215. .components-button + .block-editor-link-control__search-create::before {
  2216. content: "";
  2217. position: absolute;
  2218. top: -10px;
  2219. left: 0;
  2220. display: block;
  2221. width: 100%;
  2222. }
  2223. .block-editor-link-control__search-results div[role=menu] > .block-editor-link-control__search-item.block-editor-link-control__search-item {
  2224. padding: 10px;
  2225. }
  2226. .block-editor-link-control__settings {
  2227. border-top: 1px solid #ddd;
  2228. margin: 0;
  2229. padding: 16px 24px;
  2230. }
  2231. .block-editor-link-control__settings :last-child {
  2232. margin-bottom: 0;
  2233. }
  2234. .is-alternate .block-editor-link-control__settings {
  2235. border-top: 1px solid #1e1e1e;
  2236. }
  2237. .block-editor-link-control__setting {
  2238. margin-bottom: 16px;
  2239. }
  2240. .block-editor-link-control__setting :last-child {
  2241. margin-bottom: 0;
  2242. }
  2243. .block-editor-link-control .block-editor-link-control__search-input .components-spinner {
  2244. display: block;
  2245. }
  2246. .block-editor-link-control .block-editor-link-control__search-input .components-spinner.components-spinner {
  2247. position: absolute;
  2248. left: auto;
  2249. bottom: auto;
  2250. /*
  2251. * Position spinner to the left of the actions.
  2252. *
  2253. * Compensate for:
  2254. * - Input margin ($grid-unit-20)
  2255. * - Border (1px)
  2256. * - Vertically, for the difference in height between the input (40px)
  2257. * and the spinner.
  2258. * - Horizontally, adjust for the width occupied by the icon buttons,
  2259. * then artificially create spacing that mimics as if the spinner
  2260. * were center-padded to the same width as an icon button.
  2261. */
  2262. top: 28px;
  2263. right: 62px;
  2264. }
  2265. .block-editor-link-control__search-item-action {
  2266. margin-left: auto;
  2267. flex-shrink: 0;
  2268. }
  2269. .block-editor-line-height-control {
  2270. margin-bottom: 24px;
  2271. }
  2272. .block-editor-line-height-control input {
  2273. display: block;
  2274. max-width: 60px;
  2275. }
  2276. .block-editor-image-size-control {
  2277. margin-bottom: 1em;
  2278. }
  2279. .block-editor-image-size-control .block-editor-image-size-control__row {
  2280. display: flex;
  2281. justify-content: space-between;
  2282. }
  2283. .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width,
  2284. .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height {
  2285. margin-bottom: 0.5em;
  2286. }
  2287. .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width input,
  2288. .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height input {
  2289. line-height: 1.25;
  2290. }
  2291. .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__width {
  2292. margin-right: 5px;
  2293. }
  2294. .block-editor-image-size-control .block-editor-image-size-control__row .block-editor-image-size-control__height {
  2295. margin-left: 5px;
  2296. }
  2297. .block-editor-block-list__layout.has-overlay::after {
  2298. content: "";
  2299. position: absolute;
  2300. top: -14px;
  2301. right: -14px;
  2302. bottom: -14px;
  2303. left: -14px;
  2304. z-index: 60;
  2305. }
  2306. [data-align=full] .has-overlay::after {
  2307. right: 0;
  2308. left: 0;
  2309. }
  2310. .block-editor-block-types-list__list-item {
  2311. display: block;
  2312. width: 33.33%;
  2313. padding: 0;
  2314. margin: 0;
  2315. }
  2316. .components-button.block-editor-block-types-list__item {
  2317. display: flex;
  2318. flex-direction: column;
  2319. width: 100%;
  2320. font-size: 13px;
  2321. color: #1e1e1e;
  2322. padding: 8px;
  2323. align-items: stretch;
  2324. justify-content: center;
  2325. cursor: pointer;
  2326. background: transparent;
  2327. word-break: break-word;
  2328. border-radius: 2px;
  2329. border: 1px solid transparent;
  2330. transition: all 0.05s ease-in-out;
  2331. position: relative;
  2332. height: auto;
  2333. }
  2334. @media (prefers-reduced-motion: reduce) {
  2335. .components-button.block-editor-block-types-list__item {
  2336. transition-duration: 0s;
  2337. transition-delay: 0s;
  2338. }
  2339. }
  2340. .components-button.block-editor-block-types-list__item:disabled {
  2341. opacity: 0.6;
  2342. cursor: default;
  2343. }
  2344. .components-button.block-editor-block-types-list__item:not(:disabled):hover {
  2345. border-color: var(--wp-admin-theme-color);
  2346. color: var(--wp-admin-theme-color) !important;
  2347. }
  2348. .components-button.block-editor-block-types-list__item:not(:disabled).is-active {
  2349. color: #fff;
  2350. background: #1e1e1e;
  2351. outline: 2px solid transparent;
  2352. outline-offset: -2px;
  2353. }
  2354. .block-editor-block-types-list__item-icon {
  2355. padding: 12px 20px;
  2356. border-radius: 2px;
  2357. color: #1e1e1e;
  2358. transition: all 0.05s ease-in-out;
  2359. }
  2360. @media (prefers-reduced-motion: reduce) {
  2361. .block-editor-block-types-list__item-icon {
  2362. transition-duration: 0s;
  2363. transition-delay: 0s;
  2364. }
  2365. }
  2366. .block-editor-block-types-list__item-icon .block-editor-block-icon {
  2367. margin-left: auto;
  2368. margin-right: auto;
  2369. }
  2370. .block-editor-block-types-list__item-icon svg {
  2371. transition: all 0.15s ease-out;
  2372. }
  2373. @media (prefers-reduced-motion: reduce) {
  2374. .block-editor-block-types-list__item-icon svg {
  2375. transition-duration: 0s;
  2376. transition-delay: 0s;
  2377. }
  2378. }
  2379. .block-editor-block-types-list__list-item[draggable=true] .block-editor-block-types-list__item-icon {
  2380. cursor: grab;
  2381. }
  2382. .block-editor-block-types-list__item-title {
  2383. padding: 4px 2px 8px;
  2384. font-size: 12px;
  2385. }
  2386. .modal-open .block-editor-media-replace-flow__options {
  2387. display: none;
  2388. }
  2389. .block-editor-media-replace-flow__options .components-popover__content > div {
  2390. padding-top: 16px;
  2391. }
  2392. .block-editor-media-replace-flow__indicator {
  2393. margin-left: 4px;
  2394. }
  2395. .block-editor-media-flow__url-input {
  2396. border-top: 1px solid #1e1e1e;
  2397. margin-top: 12px;
  2398. margin-right: -12px;
  2399. margin-left: -12px;
  2400. padding: 12px 24px 0;
  2401. }
  2402. .block-editor-media-flow__url-input .block-editor-media-replace-flow__image-url-label {
  2403. top: 16px;
  2404. }
  2405. .block-editor-media-flow__url-input .block-editor-link-control {
  2406. margin-top: -16px;
  2407. width: auto;
  2408. }
  2409. .block-editor-media-flow__url-input .block-editor-link-control .components-base-control .components-base-control__field {
  2410. margin-bottom: 0;
  2411. }
  2412. .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-item-title {
  2413. max-width: 180px;
  2414. margin-top: 16px;
  2415. }
  2416. .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-item.is-current {
  2417. width: auto;
  2418. padding: 0;
  2419. }
  2420. .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] {
  2421. margin: 16px 0 0 0;
  2422. width: 100%;
  2423. }
  2424. .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-actions {
  2425. right: 4px;
  2426. }
  2427. .block-editor-media-flow__error {
  2428. padding: 0 20px 20px 20px;
  2429. max-width: 255px;
  2430. }
  2431. .block-editor-media-flow__error .components-with-notices-ui {
  2432. max-width: 255px;
  2433. }
  2434. .block-editor-media-flow__error .components-with-notices-ui .components-notice__content {
  2435. overflow: hidden;
  2436. word-wrap: break-word;
  2437. }
  2438. .block-editor-media-flow__error .components-with-notices-ui .components-notice__dismiss {
  2439. position: absolute;
  2440. right: 10px;
  2441. }
  2442. .block-editor-media-placeholder__url-input-container .block-editor-media-placeholder__button {
  2443. margin-bottom: 0;
  2444. }
  2445. .block-editor-media-placeholder__url-input-form {
  2446. display: flex;
  2447. }
  2448. .block-editor-media-placeholder__url-input-form input[type=url].block-editor-media-placeholder__url-input-field {
  2449. width: 100%;
  2450. flex-grow: 1;
  2451. border: none;
  2452. border-radius: 0;
  2453. margin: 2px;
  2454. }
  2455. @media (min-width: 600px) {
  2456. .block-editor-media-placeholder__url-input-form input[type=url].block-editor-media-placeholder__url-input-field {
  2457. width: 300px;
  2458. }
  2459. }
  2460. .block-editor-media-placeholder__url-input-submit-button {
  2461. flex-shrink: 1;
  2462. }
  2463. .block-editor-media-placeholder__button {
  2464. margin-bottom: 0.5rem;
  2465. }
  2466. .block-editor-media-placeholder__cancel-button.is-link {
  2467. margin: 1em;
  2468. display: block;
  2469. }
  2470. .block-editor-media-placeholder.is-appender {
  2471. min-height: 0;
  2472. }
  2473. .block-editor-media-placeholder.is-appender:hover {
  2474. cursor: pointer;
  2475. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  2476. }
  2477. .block-editor-multi-selection-inspector__card {
  2478. display: flex;
  2479. align-items: flex-start;
  2480. padding: 16px;
  2481. }
  2482. .block-editor-multi-selection-inspector__card-content {
  2483. flex-grow: 1;
  2484. }
  2485. .block-editor-multi-selection-inspector__card-title {
  2486. font-weight: 500;
  2487. margin-bottom: 5px;
  2488. }
  2489. .block-editor-multi-selection-inspector__card-description {
  2490. font-size: 13px;
  2491. }
  2492. .block-editor-multi-selection-inspector__card .block-editor-block-icon {
  2493. margin-left: -2px;
  2494. margin-right: 10px;
  2495. padding: 0 3px;
  2496. width: 36px;
  2497. height: 24px;
  2498. }
  2499. .block-editor-plain-text {
  2500. box-shadow: none;
  2501. font-family: inherit;
  2502. font-size: inherit;
  2503. color: inherit;
  2504. line-height: inherit;
  2505. border: none;
  2506. padding: 0;
  2507. margin: 0;
  2508. width: 100%;
  2509. }
  2510. .block-editor-responsive-block-control {
  2511. margin-bottom: 28px;
  2512. border-bottom: 1px solid #ccc;
  2513. padding-bottom: 14px;
  2514. }
  2515. .block-editor-responsive-block-control:last-child {
  2516. padding-bottom: 0;
  2517. border-bottom: 0;
  2518. }
  2519. .block-editor-responsive-block-control__title {
  2520. margin: 0;
  2521. margin-bottom: 0.6em;
  2522. margin-left: -3px;
  2523. }
  2524. .block-editor-responsive-block-control__label {
  2525. font-weight: 600;
  2526. margin-bottom: 0.6em;
  2527. margin-left: -3px;
  2528. }
  2529. .block-editor-responsive-block-control__inner {
  2530. margin-left: -1px;
  2531. }
  2532. .block-editor-responsive-block-control__toggle {
  2533. margin-left: 1px;
  2534. }
  2535. .block-editor-responsive-block-control .components-base-control__help {
  2536. border: 0;
  2537. clip: rect(1px, 1px, 1px, 1px);
  2538. -webkit-clip-path: inset(50%);
  2539. clip-path: inset(50%);
  2540. height: 1px;
  2541. margin: -1px;
  2542. overflow: hidden;
  2543. padding: 0;
  2544. position: absolute;
  2545. width: 1px;
  2546. word-wrap: normal !important;
  2547. }
  2548. .block-editor-rich-text__editable > p:first-child {
  2549. margin-top: 0;
  2550. }
  2551. .block-editor-rich-text__editable [data-rich-text-placeholder] {
  2552. pointer-events: none;
  2553. }
  2554. .block-editor-rich-text__editable [data-rich-text-placeholder]::after {
  2555. content: attr(data-rich-text-placeholder);
  2556. opacity: 0.62;
  2557. }
  2558. .block-editor-rich-text__editable:focus {
  2559. outline: none;
  2560. }
  2561. .block-editor-rich-text__editable:focus [data-rich-text-format-boundary] {
  2562. border-radius: 2px;
  2563. }
  2564. figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {
  2565. opacity: 0.8;
  2566. }
  2567. .components-popover.block-editor-rich-text__inline-format-toolbar {
  2568. z-index: 99998;
  2569. }
  2570. .components-popover.block-editor-rich-text__inline-format-toolbar .components-popover__content {
  2571. width: auto;
  2572. min-width: auto;
  2573. margin-bottom: 8px;
  2574. box-shadow: none;
  2575. border: 1px solid #1e1e1e;
  2576. border-radius: 2px;
  2577. background-color: #fff;
  2578. }
  2579. .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar-group,
  2580. .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar {
  2581. border: none;
  2582. }
  2583. .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar__control,
  2584. .components-popover.block-editor-rich-text__inline-format-toolbar .components-dropdown-menu__toggle {
  2585. min-width: 48px;
  2586. min-height: 48px;
  2587. padding-left: 12px;
  2588. padding-right: 12px;
  2589. }
  2590. .block-editor-rich-text__inline-format-toolbar-group .components-dropdown-menu__toggle {
  2591. justify-content: center;
  2592. }
  2593. .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon {
  2594. width: auto;
  2595. }
  2596. .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon svg {
  2597. display: none;
  2598. }
  2599. .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button.has-icon::after {
  2600. content: attr(aria-label);
  2601. }
  2602. [data-rich-text-script] {
  2603. display: inline;
  2604. }
  2605. [data-rich-text-script]::before {
  2606. content: "</>";
  2607. background: yellow;
  2608. }
  2609. .block-editor-skip-to-selected-block {
  2610. position: absolute;
  2611. top: -9999em;
  2612. }
  2613. .block-editor-skip-to-selected-block:focus {
  2614. height: auto;
  2615. width: auto;
  2616. display: block;
  2617. font-size: 14px;
  2618. font-weight: 600;
  2619. padding: 15px 23px 14px;
  2620. background: #f1f1f1;
  2621. color: var(--wp-admin-theme-color);
  2622. line-height: normal;
  2623. box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  2624. text-decoration: none;
  2625. outline: none;
  2626. z-index: 100000;
  2627. }
  2628. .block-editor-text-decoration-and-transform {
  2629. display: flex;
  2630. }
  2631. .block-editor-text-transform-control {
  2632. flex: 0 0 50%;
  2633. }
  2634. .block-editor-text-transform-control legend {
  2635. margin-bottom: 8px;
  2636. }
  2637. .block-editor-text-transform-control .block-editor-text-transform-control__buttons {
  2638. display: inline-flex;
  2639. margin-bottom: 24px;
  2640. }
  2641. .block-editor-text-transform-control .block-editor-text-transform-control__buttons .components-button.has-icon {
  2642. min-width: 24px;
  2643. padding: 0;
  2644. margin-right: 4px;
  2645. }
  2646. .block-editor-text-decoration-control {
  2647. flex: 0 0 50%;
  2648. }
  2649. .block-editor-text-decoration-control legend {
  2650. margin-bottom: 8px;
  2651. }
  2652. .block-editor-text-decoration-control .block-editor-text-decoration-control__buttons {
  2653. display: inline-flex;
  2654. margin-bottom: 24px;
  2655. }
  2656. .block-editor-text-decoration-control .block-editor-text-decoration-control__buttons .components-button.has-icon {
  2657. min-width: 24px;
  2658. padding: 0;
  2659. margin-right: 4px;
  2660. }
  2661. .block-editor-tool-selector__help {
  2662. margin-top: 8px;
  2663. margin-left: -12px;
  2664. margin-right: -12px;
  2665. margin-bottom: -12px;
  2666. padding: 12px 20px;
  2667. border-top: 1px solid #ddd;
  2668. color: #757575;
  2669. min-width: 280px;
  2670. }
  2671. .block-editor-block-list__block .block-editor-url-input,
  2672. .components-popover .block-editor-url-input,
  2673. .block-editor-url-input {
  2674. flex-grow: 1;
  2675. position: relative;
  2676. padding: 1px;
  2677. }
  2678. .block-editor-block-list__block .block-editor-url-input input[type=text],
  2679. .components-popover .block-editor-url-input input[type=text],
  2680. .block-editor-url-input input[type=text] {
  2681. width: 100%;
  2682. padding: 8px 8px 8px 12px;
  2683. border: none;
  2684. border-radius: 0;
  2685. margin-left: 0;
  2686. margin-right: 0;
  2687. /* Fonts smaller than 16px causes mobile safari to zoom. */
  2688. font-size: 16px;
  2689. }
  2690. @media (min-width: 600px) {
  2691. .block-editor-block-list__block .block-editor-url-input input[type=text],
  2692. .components-popover .block-editor-url-input input[type=text],
  2693. .block-editor-url-input input[type=text] {
  2694. width: 300px;
  2695. }
  2696. }
  2697. @media (min-width: 600px) {
  2698. .block-editor-block-list__block .block-editor-url-input input[type=text],
  2699. .components-popover .block-editor-url-input input[type=text],
  2700. .block-editor-url-input input[type=text] {
  2701. font-size: 13px;
  2702. }
  2703. }
  2704. .block-editor-block-list__block .block-editor-url-input input[type=text]::-ms-clear,
  2705. .components-popover .block-editor-url-input input[type=text]::-ms-clear,
  2706. .block-editor-url-input input[type=text]::-ms-clear {
  2707. display: none;
  2708. }
  2709. .block-editor-block-list__block .block-editor-url-input.is-full-width,
  2710. .components-popover .block-editor-url-input.is-full-width,
  2711. .block-editor-url-input.is-full-width {
  2712. width: 100%;
  2713. }
  2714. .block-editor-block-list__block .block-editor-url-input.is-full-width .block-editor-url-input__input[type=text],
  2715. .components-popover .block-editor-url-input.is-full-width .block-editor-url-input__input[type=text],
  2716. .block-editor-url-input.is-full-width .block-editor-url-input__input[type=text] {
  2717. width: 100%;
  2718. }
  2719. .block-editor-block-list__block .block-editor-url-input.is-full-width__suggestions,
  2720. .components-popover .block-editor-url-input.is-full-width__suggestions,
  2721. .block-editor-url-input.is-full-width__suggestions {
  2722. width: 100%;
  2723. }
  2724. .block-editor-block-list__block .block-editor-url-input .components-spinner,
  2725. .components-popover .block-editor-url-input .components-spinner,
  2726. .block-editor-url-input .components-spinner {
  2727. position: absolute;
  2728. right: 8px 8px 8px 12px;
  2729. bottom: 8px 8px 8px 12px8px1;
  2730. margin: 0;
  2731. }
  2732. .block-editor-url-input__input[type=text] {
  2733. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  2734. padding: 6px 8px;
  2735. box-shadow: 0 0 0 transparent;
  2736. transition: box-shadow 0.1s linear;
  2737. border-radius: 2px;
  2738. border: 1px solid #757575;
  2739. /* Fonts smaller than 16px causes mobile safari to zoom. */
  2740. font-size: 16px;
  2741. /* Override core line-height. To be reviewed. */
  2742. line-height: normal;
  2743. }
  2744. @media (prefers-reduced-motion: reduce) {
  2745. .block-editor-url-input__input[type=text] {
  2746. transition-duration: 0s;
  2747. transition-delay: 0s;
  2748. }
  2749. }
  2750. @media (min-width: 600px) {
  2751. .block-editor-url-input__input[type=text] {
  2752. font-size: 13px;
  2753. /* Override core line-height. To be reviewed. */
  2754. line-height: normal;
  2755. }
  2756. }
  2757. .block-editor-url-input__input[type=text]:focus {
  2758. border-color: var(--wp-admin-theme-color);
  2759. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  2760. outline: 2px solid transparent;
  2761. }
  2762. .block-editor-url-input__input[type=text]::-webkit-input-placeholder {
  2763. color: rgba(30, 30, 30, 0.62);
  2764. }
  2765. .block-editor-url-input__input[type=text]::-moz-placeholder {
  2766. opacity: 1;
  2767. color: rgba(30, 30, 30, 0.62);
  2768. }
  2769. .block-editor-url-input__input[type=text]:-ms-input-placeholder {
  2770. color: rgba(30, 30, 30, 0.62);
  2771. }
  2772. .block-editor-url-input__suggestions {
  2773. max-height: 200px;
  2774. transition: all 0.15s ease-in-out;
  2775. padding: 4px 0;
  2776. width: 302px;
  2777. overflow-y: auto;
  2778. }
  2779. @media (prefers-reduced-motion: reduce) {
  2780. .block-editor-url-input__suggestions {
  2781. transition-duration: 0s;
  2782. transition-delay: 0s;
  2783. }
  2784. }
  2785. .block-editor-url-input__suggestions,
  2786. .block-editor-url-input .components-spinner {
  2787. display: none;
  2788. }
  2789. @media (min-width: 600px) {
  2790. .block-editor-url-input__suggestions,
  2791. .block-editor-url-input .components-spinner {
  2792. display: inherit;
  2793. }
  2794. }
  2795. .block-editor-url-input__suggestion {
  2796. padding: 4px 8px 8px 8px 12px;
  2797. color: #757575;
  2798. display: block;
  2799. font-size: 13px;
  2800. cursor: pointer;
  2801. background: #fff;
  2802. width: 100%;
  2803. border: none;
  2804. text-align: left;
  2805. box-shadow: none;
  2806. }
  2807. .block-editor-url-input__suggestion:hover {
  2808. background: #ddd;
  2809. }
  2810. .block-editor-url-input__suggestion:focus, .block-editor-url-input__suggestion.is-selected {
  2811. background: var(--wp-admin-theme-color-darker-20);
  2812. color: #fff;
  2813. outline: none;
  2814. }
  2815. .components-toolbar-group > .block-editor-url-input__button,
  2816. .components-toolbar > .block-editor-url-input__button {
  2817. position: inherit;
  2818. }
  2819. .block-editor-url-input__button .block-editor-url-input__back {
  2820. margin-right: 4px;
  2821. overflow: visible;
  2822. }
  2823. .block-editor-url-input__button .block-editor-url-input__back::after {
  2824. content: "";
  2825. position: absolute;
  2826. display: block;
  2827. width: 1px;
  2828. height: 24px;
  2829. right: -1px;
  2830. background: #ddd;
  2831. }
  2832. .block-editor-url-input__button-modal {
  2833. box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  2834. border: 1px solid #ddd;
  2835. background: #fff;
  2836. }
  2837. .block-editor-url-input__button-modal-line {
  2838. display: flex;
  2839. flex-direction: row;
  2840. flex-grow: 1;
  2841. flex-shrink: 1;
  2842. min-width: 0;
  2843. align-items: flex-start;
  2844. }
  2845. .block-editor-url-input__button-modal-line .components-button {
  2846. flex-shrink: 0;
  2847. width: 36px;
  2848. height: 36px;
  2849. }
  2850. .block-editor-url-popover__additional-controls {
  2851. border-top: 1px solid #ddd;
  2852. }
  2853. .block-editor-url-popover__additional-controls > div[role=menu] .components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary) > svg {
  2854. box-shadow: none;
  2855. }
  2856. .block-editor-url-popover__additional-controls div[role=menu] > .components-button {
  2857. padding-left: 12px;
  2858. }
  2859. .block-editor-url-popover__row {
  2860. display: flex;
  2861. }
  2862. .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
  2863. flex-grow: 1;
  2864. }
  2865. .block-editor-url-popover .components-button.has-icon {
  2866. padding: 3px;
  2867. }
  2868. .block-editor-url-popover .components-button.has-icon > svg {
  2869. padding: 5px;
  2870. border-radius: 2px;
  2871. height: 30px;
  2872. width: 30px;
  2873. }
  2874. .block-editor-url-popover .components-button.has-icon:not(:disabled):focus {
  2875. box-shadow: none;
  2876. }
  2877. .block-editor-url-popover .components-button.has-icon:not(:disabled):focus > svg {
  2878. box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 4px #fff;
  2879. outline: 2px solid transparent;
  2880. }
  2881. .block-editor-url-popover__settings-toggle {
  2882. flex-shrink: 0;
  2883. border-radius: 0;
  2884. border-left: 1px solid #ddd;
  2885. margin-left: 1px;
  2886. }
  2887. .block-editor-url-popover__settings-toggle[aria-expanded=true] .dashicon {
  2888. transform: rotate(180deg);
  2889. }
  2890. .block-editor-url-popover__input-container .components-base-control:last-child,
  2891. .block-editor-url-popover__input-container .components-base-control:last-child .components-base-control__field {
  2892. margin-bottom: 0;
  2893. }
  2894. .block-editor-url-popover__settings {
  2895. display: block;
  2896. padding: 16px;
  2897. border-top: 1px solid #ddd;
  2898. }
  2899. .block-editor-url-popover__link-editor,
  2900. .block-editor-url-popover__link-viewer {
  2901. display: flex;
  2902. }
  2903. .block-editor-url-popover__link-editor .block-editor-url-input .components-base-control__field,
  2904. .block-editor-url-popover__link-viewer .block-editor-url-input .components-base-control__field {
  2905. margin-bottom: 0;
  2906. }
  2907. .block-editor-url-popover__link-editor .block-editor-url-input .components-spinner,
  2908. .block-editor-url-popover__link-viewer .block-editor-url-input .components-spinner {
  2909. bottom: 8px 8px 8px 12px1;
  2910. }
  2911. .block-editor-url-popover__link-viewer-url {
  2912. margin: 7px;
  2913. flex-grow: 1;
  2914. flex-shrink: 1;
  2915. overflow: hidden;
  2916. text-overflow: ellipsis;
  2917. white-space: nowrap;
  2918. min-width: 150px;
  2919. max-width: 500px;
  2920. }
  2921. .block-editor-url-popover__link-viewer-url.has-invalid-link {
  2922. color: #cc1818;
  2923. }
  2924. .block-editor-warning {
  2925. align-items: center;
  2926. display: flex;
  2927. flex-wrap: wrap;
  2928. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  2929. padding: 1em;
  2930. border: 1px solid #1e1e1e;
  2931. border-radius: 2px;
  2932. background-color: #fff;
  2933. }
  2934. .block-editor-warning .block-editor-warning__message {
  2935. line-height: 1.4;
  2936. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  2937. font-size: 13px;
  2938. color: #1e1e1e;
  2939. margin: 0;
  2940. }
  2941. .block-editor-warning p.block-editor-warning__message.block-editor-warning__message {
  2942. min-height: auto;
  2943. }
  2944. .block-editor-warning .block-editor-warning__contents {
  2945. display: flex;
  2946. flex-direction: row;
  2947. justify-content: space-between;
  2948. flex-wrap: wrap;
  2949. align-items: baseline;
  2950. width: 100%;
  2951. }
  2952. .block-editor-warning .block-editor-warning__actions {
  2953. display: flex;
  2954. margin-top: 1em;
  2955. }
  2956. .block-editor-warning .block-editor-warning__action {
  2957. margin: 0 8px 0 0;
  2958. }
  2959. .block-editor-warning__secondary {
  2960. margin: auto 0 auto 8px;
  2961. }
  2962. .components-popover.block-editor-warning__dropdown {
  2963. z-index: 99998;
  2964. }
  2965. .html-anchor-control .components-external-link {
  2966. display: block;
  2967. margin-top: 8px;
  2968. }
  2969. .block-editor-hooks__layout-controls {
  2970. display: flex;
  2971. margin-bottom: 16px;
  2972. }
  2973. .block-editor-hooks__layout-controls .block-editor-hooks__layout-controls-unit {
  2974. display: flex;
  2975. margin-right: 24px;
  2976. }
  2977. .block-editor-hooks__layout-controls .block-editor-hooks__layout-controls-unit svg {
  2978. margin: auto 0 4px 8px;
  2979. }
  2980. .block-editor-hooks__layout-controls-reset {
  2981. display: flex;
  2982. justify-content: flex-end;
  2983. margin-bottom: 24px;
  2984. }
  2985. .block-editor-hooks__layout-controls-helptext {
  2986. font-size: 12px;
  2987. }
  2988. #end-resizable-editor-section {
  2989. display: none;
  2990. }
  2991. /**
  2992. * Block Toolbar
  2993. */
  2994. .block-editor-block-toolbar {
  2995. display: flex;
  2996. flex-grow: 1;
  2997. width: 100%;
  2998. overflow: auto;
  2999. position: relative;
  3000. transition: border-color 0.1s linear, box-shadow 0.1s linear;
  3001. }
  3002. @media (prefers-reduced-motion: reduce) {
  3003. .block-editor-block-toolbar {
  3004. transition-duration: 0s;
  3005. transition-delay: 0s;
  3006. }
  3007. }
  3008. @media (min-width: 600px) {
  3009. .block-editor-block-toolbar {
  3010. overflow: inherit;
  3011. }
  3012. }
  3013. .block-editor-block-toolbar .components-toolbar-group,
  3014. .block-editor-block-toolbar .components-toolbar {
  3015. background: none;
  3016. line-height: 0;
  3017. margin-top: -1px;
  3018. margin-bottom: -1px;
  3019. border: 0;
  3020. border-right: 1px solid #ddd;
  3021. }
  3022. .block-editor-block-toolbar > :last-child,
  3023. .block-editor-block-toolbar > :last-child .components-toolbar-group,
  3024. .block-editor-block-toolbar > :last-child .components-toolbar {
  3025. border-right: none;
  3026. }
  3027. .block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
  3028. margin-left: calc(48px + 8px);
  3029. }
  3030. .show-icon-labels .block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
  3031. margin-left: 0;
  3032. }
  3033. .block-editor-block-parent-selector {
  3034. position: absolute;
  3035. top: -1px;
  3036. left: calc(-48px - 8px - 1px);
  3037. }
  3038. .show-icon-labels .block-editor-block-parent-selector {
  3039. position: relative;
  3040. left: auto;
  3041. top: auto;
  3042. margin-top: -1px;
  3043. margin-left: -1px;
  3044. margin-bottom: -1px;
  3045. }
  3046. .block-editor-block-toolbar__block-controls {
  3047. height: auto !important;
  3048. padding: 0 !important;
  3049. margin-left: -1px;
  3050. }
  3051. .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon,
  3052. .block-editor-block-toolbar__block-controls .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
  3053. width: 24px !important;
  3054. margin: 0 !important;
  3055. }
  3056. .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle:focus::before,
  3057. .block-editor-block-toolbar__block-controls .block-editor-block-switcher__no-switcher-icon:focus::before {
  3058. right: 4px !important;
  3059. }
  3060. .block-editor-block-toolbar__block-controls .block-editor-block-mover {
  3061. margin-left: -6px;
  3062. }
  3063. .block-editor-block-toolbar .components-toolbar-group,
  3064. .block-editor-block-toolbar .components-toolbar,
  3065. .block-editor-rich-text__inline-format-toolbar-group .components-toolbar-group,
  3066. .block-editor-rich-text__inline-format-toolbar-group .components-toolbar {
  3067. display: flex;
  3068. flex-wrap: nowrap;
  3069. }
  3070. .block-editor-block-toolbar__slot {
  3071. display: inline-block;
  3072. line-height: 0;
  3073. }
  3074. @supports (position: sticky) {
  3075. .block-editor-block-toolbar__slot {
  3076. display: inline-flex;
  3077. }
  3078. }
  3079. .show-icon-labels .block-editor-block-toolbar .components-button.has-icon {
  3080. width: auto;
  3081. }
  3082. .show-icon-labels .block-editor-block-toolbar .components-button.has-icon svg {
  3083. display: none;
  3084. }
  3085. .show-icon-labels .block-editor-block-toolbar .components-button.has-icon::after {
  3086. content: attr(aria-label);
  3087. font-size: 12px;
  3088. }
  3089. .show-icon-labels .components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon {
  3090. padding-left: 6px;
  3091. padding-right: 6px;
  3092. }
  3093. .show-icon-labels .block-editor-block-switcher {
  3094. border-right: 1px solid #1e1e1e;
  3095. }
  3096. .show-icon-labels .block-editor-block-switcher .components-dropdown-menu__toggle {
  3097. margin-left: 0;
  3098. }
  3099. .show-icon-labels .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon,
  3100. .show-icon-labels .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
  3101. width: 0 !important;
  3102. height: 0 !important;
  3103. }
  3104. .show-icon-labels .block-editor-block-switcher .components-dropdown-menu__toggle:focus::before,
  3105. .show-icon-labels .block-editor-block-switcher__no-switcher-icon:focus::before {
  3106. right: 4px !important;
  3107. }
  3108. .show-icon-labels .block-editor-block-parent-selector__button .block-editor-block-icon {
  3109. width: 0;
  3110. }
  3111. .show-icon-labels .block-editor-block-toolbar__block-controls .block-editor-block-mover {
  3112. margin-left: 0;
  3113. white-space: nowrap;
  3114. }
  3115. .show-icon-labels .block-editor-block-mover-button {
  3116. padding-left: 8px !important;
  3117. padding-right: 8px !important;
  3118. }
  3119. .show-icon-labels .block-editor-block-mover__drag-handle.has-icon {
  3120. padding-left: 6px !important;
  3121. padding-right: 6px !important;
  3122. border-right: 1px solid #1e1e1e;
  3123. }
  3124. @media (min-width: 600px) {
  3125. .show-icon-labels .is-up-button.is-up-button.is-up-button {
  3126. border-bottom: 1px solid #1e1e1e;
  3127. margin-right: 0;
  3128. border-radius: 0;
  3129. }
  3130. }
  3131. .show-icon-labels .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
  3132. width: auto;
  3133. }
  3134. .show-icon-labels .components-toolbar,
  3135. .show-icon-labels .components-toolbar-group {
  3136. flex-shrink: 1;
  3137. }
  3138. .show-icon-labels .block-editor-rich-text__inline-format-toolbar-group .components-button + .components-button {
  3139. margin-left: 6px;
  3140. }
  3141. .block-editor-inserter {
  3142. display: inline-block;
  3143. background: none;
  3144. border: none;
  3145. padding: 0;
  3146. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  3147. font-size: 13px;
  3148. line-height: 0;
  3149. }
  3150. @media (min-width: 782px) {
  3151. .block-editor-inserter {
  3152. position: relative;
  3153. }
  3154. }
  3155. .block-editor-inserter__popover.is-quick .components-popover__content {
  3156. border: none;
  3157. }
  3158. .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > * {
  3159. border-left: 1px solid #ccc;
  3160. border-right: 1px solid #ccc;
  3161. }
  3162. .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:first-child {
  3163. border-top: 1px solid #ccc;
  3164. }
  3165. .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:last-child {
  3166. border-bottom: 1px solid #ccc;
  3167. }
  3168. .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *.components-button {
  3169. border: 1px solid #1e1e1e;
  3170. }
  3171. .block-editor-inserter__popover .block-editor-inserter__menu {
  3172. margin: -12px;
  3173. }
  3174. .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__tabs .components-tab-panel__tabs {
  3175. top: 60px;
  3176. }
  3177. .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__main-area {
  3178. overflow: visible;
  3179. height: auto;
  3180. }
  3181. .block-editor-inserter__popover .block-editor-inserter__menu .block-editor-inserter__preview-container {
  3182. display: none;
  3183. }
  3184. .block-editor-inserter__toggle.components-button {
  3185. display: inline-flex;
  3186. align-items: center;
  3187. cursor: pointer;
  3188. border: none;
  3189. outline: none;
  3190. padding: 0;
  3191. transition: color 0.2s ease;
  3192. }
  3193. @media (prefers-reduced-motion: reduce) {
  3194. .block-editor-inserter__toggle.components-button {
  3195. transition-duration: 0s;
  3196. transition-delay: 0s;
  3197. }
  3198. }
  3199. .block-editor-inserter__menu {
  3200. height: 100%;
  3201. position: relative;
  3202. overflow: visible;
  3203. }
  3204. .block-editor-inserter__main-area {
  3205. width: auto;
  3206. overflow-y: auto;
  3207. height: 100%;
  3208. }
  3209. @media (min-width: 782px) {
  3210. .block-editor-inserter__main-area {
  3211. width: 350px;
  3212. }
  3213. }
  3214. .block-editor-inserter__inline-elements {
  3215. margin-top: -1px;
  3216. }
  3217. .block-editor-inserter__menu.is-bottom::after {
  3218. border-bottom-color: #fff;
  3219. }
  3220. .components-popover.block-editor-inserter__popover {
  3221. z-index: 99999;
  3222. }
  3223. .block-editor-inserter__search {
  3224. padding: 16px;
  3225. position: sticky;
  3226. top: 0;
  3227. background: #fff;
  3228. z-index: 1;
  3229. }
  3230. .block-editor-inserter__search input[type=search].block-editor-inserter__search-input {
  3231. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  3232. padding: 6px 8px;
  3233. box-shadow: 0 0 0 transparent;
  3234. transition: box-shadow 0.1s linear;
  3235. border-radius: 2px;
  3236. border: 1px solid #757575;
  3237. /* Fonts smaller than 16px causes mobile safari to zoom. */
  3238. font-size: 16px;
  3239. /* Override core line-height. To be reviewed. */
  3240. line-height: normal;
  3241. display: block;
  3242. padding: 16px 48px 16px 16px;
  3243. background: #f0f0f0;
  3244. border: none;
  3245. width: 100%;
  3246. height: 48px;
  3247. /* Fonts smaller than 16px causes mobile safari to zoom. */
  3248. font-size: 16px;
  3249. }
  3250. @media (prefers-reduced-motion: reduce) {
  3251. .block-editor-inserter__search input[type=search].block-editor-inserter__search-input {
  3252. transition-duration: 0s;
  3253. transition-delay: 0s;
  3254. }
  3255. }
  3256. @media (min-width: 600px) {
  3257. .block-editor-inserter__search input[type=search].block-editor-inserter__search-input {
  3258. font-size: 13px;
  3259. /* Override core line-height. To be reviewed. */
  3260. line-height: normal;
  3261. }
  3262. }
  3263. .block-editor-inserter__search input[type=search].block-editor-inserter__search-input:focus {
  3264. border-color: var(--wp-admin-theme-color);
  3265. box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
  3266. outline: 2px solid transparent;
  3267. }
  3268. .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-webkit-input-placeholder {
  3269. color: rgba(30, 30, 30, 0.62);
  3270. }
  3271. .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-moz-placeholder {
  3272. opacity: 1;
  3273. color: rgba(30, 30, 30, 0.62);
  3274. }
  3275. .block-editor-inserter__search input[type=search].block-editor-inserter__search-input:-ms-input-placeholder {
  3276. color: rgba(30, 30, 30, 0.62);
  3277. }
  3278. @media (min-width: 600px) {
  3279. .block-editor-inserter__search input[type=search].block-editor-inserter__search-input {
  3280. font-size: 13px;
  3281. }
  3282. }
  3283. .block-editor-inserter__search input[type=search].block-editor-inserter__search-input:focus {
  3284. background: #fff;
  3285. box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  3286. }
  3287. .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::placeholder {
  3288. color: #757575;
  3289. }
  3290. .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-webkit-search-decoration, .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-webkit-search-cancel-button, .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-webkit-search-results-button, .block-editor-inserter__search input[type=search].block-editor-inserter__search-input::-webkit-search-results-decoration {
  3291. -webkit-appearance: none;
  3292. }
  3293. .block-editor-inserter__search-icon {
  3294. position: absolute;
  3295. top: 0;
  3296. right: 20px;
  3297. bottom: 0;
  3298. display: flex;
  3299. align-items: center;
  3300. }
  3301. .block-editor-inserter__search-icon > svg {
  3302. margin: 8px;
  3303. }
  3304. .block-editor-inserter__tabs {
  3305. display: flex;
  3306. flex-direction: column;
  3307. margin-top: -8px;
  3308. }
  3309. .block-editor-inserter__tabs .components-tab-panel__tabs {
  3310. position: sticky;
  3311. top: 72px;
  3312. background: #fff;
  3313. z-index: 1;
  3314. border-bottom: 1px solid #ddd;
  3315. }
  3316. .block-editor-inserter__tabs .components-tab-panel__tabs .components-tab-panel__tabs-item {
  3317. flex-grow: 1;
  3318. margin-bottom: -1px;
  3319. }
  3320. .block-editor-inserter__tabs .components-tab-panel__tab-content {
  3321. display: flex;
  3322. flex-grow: 1;
  3323. flex-direction: column;
  3324. position: relative;
  3325. z-index: 0;
  3326. }
  3327. .block-editor-inserter__panel-header {
  3328. display: inline-flex;
  3329. align-items: center;
  3330. padding: 16px 16px 0;
  3331. }
  3332. .block-editor-inserter__panel-header-patterns {
  3333. padding: 16px 16px 0;
  3334. }
  3335. .block-editor-inserter__panel-content {
  3336. padding: 16px;
  3337. }
  3338. .block-editor-inserter__panel-title,
  3339. .block-editor-inserter__panel-title button {
  3340. margin: 0 12px 0 0;
  3341. color: #757575;
  3342. text-transform: uppercase;
  3343. font-size: 11px;
  3344. font-weight: 500;
  3345. }
  3346. .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
  3347. line-height: 1.2;
  3348. }
  3349. .block-editor-inserter__panel-dropdown select {
  3350. border: none;
  3351. }
  3352. .block-editor-inserter__block-list {
  3353. flex-grow: 1;
  3354. position: relative;
  3355. }
  3356. .block-editor-inserter__popover .block-editor-block-types-list {
  3357. margin: -8px;
  3358. }
  3359. .block-editor-inserter__reusable-blocks-panel {
  3360. position: relative;
  3361. text-align: right;
  3362. }
  3363. .block-editor-inserter__manage-reusable-blocks {
  3364. display: inline-block;
  3365. margin: 16px;
  3366. }
  3367. .block-editor-inserter__no-results {
  3368. padding: 32px;
  3369. margin-top: 64px;
  3370. text-align: center;
  3371. }
  3372. .block-editor-inserter__no-results-icon {
  3373. fill: #949494;
  3374. }
  3375. .block-editor-inserter__child-blocks {
  3376. padding: 0 16px;
  3377. }
  3378. .block-editor-inserter__parent-block-header {
  3379. display: flex;
  3380. align-items: center;
  3381. }
  3382. .block-editor-inserter__parent-block-header h2 {
  3383. font-size: 13px;
  3384. }
  3385. .block-editor-inserter__parent-block-header .block-editor-block-icon {
  3386. margin-right: 8px;
  3387. }
  3388. .block-editor-inserter__preview-container {
  3389. display: none;
  3390. width: 300px;
  3391. background: #fff;
  3392. border-radius: 2px;
  3393. border: 1px solid #ddd;
  3394. position: absolute;
  3395. top: 16px;
  3396. left: calc(100% + 16px);
  3397. max-height: calc(100% - 32px);
  3398. overflow-y: hidden;
  3399. }
  3400. @media (min-width: 782px) {
  3401. .block-editor-inserter__preview-container {
  3402. display: block;
  3403. }
  3404. }
  3405. .block-editor-inserter__preview-container .block-editor-block-card {
  3406. padding: 16px;
  3407. }
  3408. .block-editor-inserter__preview-container .block-editor-block-card__title {
  3409. font-size: 13px;
  3410. }
  3411. .block-editor-inserter__preview-content {
  3412. min-height: 144px;
  3413. background: #f0f0f0;
  3414. display: grid;
  3415. flex-grow: 1;
  3416. align-items: center;
  3417. }
  3418. .block-editor-inserter__preview-content-missing {
  3419. flex: 1;
  3420. display: flex;
  3421. justify-content: center;
  3422. align-items: center;
  3423. min-height: 144px;
  3424. color: #757575;
  3425. background: #f0f0f0;
  3426. }
  3427. .block-editor-inserter__tips {
  3428. border-top: 1px solid #ddd;
  3429. padding: 16px;
  3430. flex-shrink: 0;
  3431. position: relative;
  3432. }
  3433. .block-editor-inserter__manage-reusable-blocks-container {
  3434. padding: 16px;
  3435. }
  3436. .block-editor-inserter__quick-inserter {
  3437. width: 100%;
  3438. max-width: 100%;
  3439. }
  3440. @media (min-width: 782px) {
  3441. .block-editor-inserter__quick-inserter {
  3442. width: 350px;
  3443. }
  3444. }
  3445. .block-editor-inserter__quick-inserter-results .block-editor-inserter__panel-header {
  3446. height: 0;
  3447. padding: 0;
  3448. float: left;
  3449. }
  3450. .block-editor-inserter__quick-inserter.has-search .block-editor-inserter__panel-content,
  3451. .block-editor-inserter__quick-inserter.has-expand .block-editor-inserter__panel-content {
  3452. padding: 16px;
  3453. }
  3454. .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list {
  3455. display: grid;
  3456. grid-template-columns: 1fr 1fr;
  3457. grid-gap: 8px;
  3458. }
  3459. .block-editor-inserter__quick-inserter-separator {
  3460. border-top: 1px solid #ddd;
  3461. }
  3462. .block-editor-inserter__popover.is-quick > .components-popover__content > div {
  3463. padding: 0;
  3464. }
  3465. .block-editor-inserter__quick-inserter-expand.components-button {
  3466. display: block;
  3467. background: #1e1e1e;
  3468. color: #fff;
  3469. width: 100%;
  3470. height: 44px;
  3471. border-radius: 0;
  3472. }
  3473. .block-editor-inserter__quick-inserter-expand.components-button:hover {
  3474. color: #fff;
  3475. }
  3476. .block-editor-inserter__quick-inserter-expand.components-button:active {
  3477. color: #ccc;
  3478. }
  3479. .block-editor-inserter__quick-inserter-expand.components-button:focus:not(:disabled) {
  3480. box-shadow: inset 0 0 0 1.5px var(--wp-admin-theme-color), inset 0 0 0 3px #fff;
  3481. }
  3482. .block-editor-post-preview__dropdown {
  3483. padding: 0;
  3484. }
  3485. .block-editor-post-preview__button-resize.block-editor-post-preview__button-resize {
  3486. padding-left: 40px;
  3487. }
  3488. .block-editor-post-preview__button-resize.block-editor-post-preview__button-resize.has-icon {
  3489. padding-left: 8px;
  3490. }
  3491. .block-editor-post-preview__dropdown-content .components-popover__content {
  3492. overflow-y: visible;
  3493. }
  3494. .block-editor-post-preview__dropdown-content.edit-post-post-preview-dropdown .components-menu-group:first-child {
  3495. padding-bottom: 8px;
  3496. }
  3497. .block-editor-post-preview__dropdown-content.edit-post-post-preview-dropdown .components-menu-group:last-child {
  3498. margin-bottom: 0;
  3499. }
  3500. .block-editor-post-preview__dropdown-content .components-menu-group + .components-menu-group {
  3501. padding: 8px;
  3502. }
  3503. @media (min-width: 600px) {
  3504. .edit-post-header__settings .editor-post-preview,
  3505. .edit-site-header__actions .editor-post-preview {
  3506. display: none;
  3507. }
  3508. }
  3509. @media (min-width: 600px) {
  3510. .edit-post-header.has-reduced-ui .edit-post-header__settings .editor-post-save-draft,
  3511. .edit-post-header.has-reduced-ui .edit-post-header__settings .editor-post-saved-state,
  3512. .edit-post-header.has-reduced-ui .edit-post-header__settings .block-editor-post-preview__button-toggle {
  3513. transition: opacity 0.1s linear;
  3514. }
  3515. }
  3516. @media (min-width: 600px) and (prefers-reduced-motion: reduce) {
  3517. .edit-post-header.has-reduced-ui .edit-post-header__settings .editor-post-save-draft,
  3518. .edit-post-header.has-reduced-ui .edit-post-header__settings .editor-post-saved-state,
  3519. .edit-post-header.has-reduced-ui .edit-post-header__settings .block-editor-post-preview__button-toggle {
  3520. transition-duration: 0s;
  3521. transition-delay: 0s;
  3522. }
  3523. }
  3524. @media (min-width: 600px) {
  3525. .edit-post-header.has-reduced-ui:not(:hover) .edit-post-header__settings .editor-post-save-draft,
  3526. .edit-post-header.has-reduced-ui:not(:hover) .edit-post-header__settings .editor-post-saved-state,
  3527. .edit-post-header.has-reduced-ui:not(:hover) .edit-post-header__settings .block-editor-post-preview__button-toggle {
  3528. opacity: 0;
  3529. }
  3530. .edit-post-header.has-reduced-ui:not(:hover) .edit-post-header__settings .block-editor-post-preview__button-toggle.is-opened {
  3531. opacity: 1;
  3532. }
  3533. }
  3534. body.admin-color-light {
  3535. --wp-admin-theme-color: #0085ba;
  3536. --wp-admin-theme-color-darker-10: #0073a1;
  3537. --wp-admin-theme-color-darker-20: #006187;
  3538. --wp-admin-border-width-focus: 2px;
  3539. }
  3540. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  3541. body.admin-color-light {
  3542. --wp-admin-border-width-focus: 1.5px;
  3543. }
  3544. }
  3545. body.admin-color-modern {
  3546. --wp-admin-theme-color: #3858e9;
  3547. --wp-admin-theme-color-darker-10: #2145e6;
  3548. --wp-admin-theme-color-darker-20: #183ad6;
  3549. --wp-admin-border-width-focus: 2px;
  3550. }
  3551. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  3552. body.admin-color-modern {
  3553. --wp-admin-border-width-focus: 1.5px;
  3554. }
  3555. }
  3556. body.admin-color-blue {
  3557. --wp-admin-theme-color: #096484;
  3558. --wp-admin-theme-color-darker-10: #07526c;
  3559. --wp-admin-theme-color-darker-20: #064054;
  3560. --wp-admin-border-width-focus: 2px;
  3561. }
  3562. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  3563. body.admin-color-blue {
  3564. --wp-admin-border-width-focus: 1.5px;
  3565. }
  3566. }
  3567. body.admin-color-coffee {
  3568. --wp-admin-theme-color: #46403c;
  3569. --wp-admin-theme-color-darker-10: #383330;
  3570. --wp-admin-theme-color-darker-20: #2b2724;
  3571. --wp-admin-border-width-focus: 2px;
  3572. }
  3573. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  3574. body.admin-color-coffee {
  3575. --wp-admin-border-width-focus: 1.5px;
  3576. }
  3577. }
  3578. body.admin-color-ectoplasm {
  3579. --wp-admin-theme-color: #523f6d;
  3580. --wp-admin-theme-color-darker-10: #46365d;
  3581. --wp-admin-theme-color-darker-20: #3a2c4d;
  3582. --wp-admin-border-width-focus: 2px;
  3583. }
  3584. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  3585. body.admin-color-ectoplasm {
  3586. --wp-admin-border-width-focus: 1.5px;
  3587. }
  3588. }
  3589. body.admin-color-midnight {
  3590. --wp-admin-theme-color: #e14d43;
  3591. --wp-admin-theme-color-darker-10: #dd382d;
  3592. --wp-admin-theme-color-darker-20: #d02c21;
  3593. --wp-admin-border-width-focus: 2px;
  3594. }
  3595. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  3596. body.admin-color-midnight {
  3597. --wp-admin-border-width-focus: 1.5px;
  3598. }
  3599. }
  3600. body.admin-color-ocean {
  3601. --wp-admin-theme-color: #627c83;
  3602. --wp-admin-theme-color-darker-10: #576e74;
  3603. --wp-admin-theme-color-darker-20: #4c6066;
  3604. --wp-admin-border-width-focus: 2px;
  3605. }
  3606. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  3607. body.admin-color-ocean {
  3608. --wp-admin-border-width-focus: 1.5px;
  3609. }
  3610. }
  3611. body.admin-color-sunrise {
  3612. --wp-admin-theme-color: #dd823b;
  3613. --wp-admin-theme-color-darker-10: #d97426;
  3614. --wp-admin-theme-color-darker-20: #c36922;
  3615. --wp-admin-border-width-focus: 2px;
  3616. }
  3617. @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  3618. body.admin-color-sunrise {
  3619. --wp-admin-border-width-focus: 1.5px;
  3620. }
  3621. }