style-rtl.css 95 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289
  1. @charset "UTF-8";
  2. /**
  3. * Colors
  4. */
  5. /**
  6. * Breakpoints & Media Queries
  7. */
  8. /**
  9. * Often re-used variables
  10. */
  11. /**
  12. * Breakpoint mixins
  13. */
  14. /**
  15. * Long content fade mixin
  16. *
  17. * Creates a fading overlay to signify that the content is longer
  18. * than the space allows.
  19. */
  20. /**
  21. * Button states and focus styles
  22. */
  23. /**
  24. * Applies editor left position to the selector passed as argument
  25. */
  26. /**
  27. * Applies editor right position to the selector passed as argument
  28. */
  29. /**
  30. * Styles that are reused verbatim in a few places
  31. */
  32. /**
  33. * Allows users to opt-out of animations via OS-level preferences.
  34. */
  35. /**
  36. * Reset default styles for JavaScript UI based pages.
  37. * This is a WP-admin agnostic reset
  38. */
  39. /**
  40. * Reset the WP Admin page styles for Gutenberg-like pages.
  41. */
  42. .block-editor-block-drop-zone {
  43. border: none;
  44. border-radius: 0; }
  45. .block-editor-block-drop-zone .components-drop-zone__content,
  46. .block-editor-block-drop-zone.is-dragging-over-element .components-drop-zone__content {
  47. display: none; }
  48. .block-editor-block-drop-zone.is-close-to-bottom, .block-editor-block-drop-zone.is-close-to-top {
  49. background: none; }
  50. .block-editor-block-drop-zone.is-close-to-top {
  51. border-top: 3px solid #0085ba; }
  52. body.admin-color-sunrise .block-editor-block-drop-zone.is-close-to-top{
  53. border-top: 3px solid #d1864a; }
  54. body.admin-color-ocean .block-editor-block-drop-zone.is-close-to-top{
  55. border-top: 3px solid #a3b9a2; }
  56. body.admin-color-midnight .block-editor-block-drop-zone.is-close-to-top{
  57. border-top: 3px solid #e14d43; }
  58. body.admin-color-ectoplasm .block-editor-block-drop-zone.is-close-to-top{
  59. border-top: 3px solid #a7b656; }
  60. body.admin-color-coffee .block-editor-block-drop-zone.is-close-to-top{
  61. border-top: 3px solid #c2a68c; }
  62. body.admin-color-blue .block-editor-block-drop-zone.is-close-to-top{
  63. border-top: 3px solid #82b4cb; }
  64. body.admin-color-light .block-editor-block-drop-zone.is-close-to-top{
  65. border-top: 3px solid #0085ba; }
  66. .block-editor-block-drop-zone.is-close-to-bottom {
  67. border-bottom: 3px solid #0085ba; }
  68. body.admin-color-sunrise .block-editor-block-drop-zone.is-close-to-bottom{
  69. border-bottom: 3px solid #d1864a; }
  70. body.admin-color-ocean .block-editor-block-drop-zone.is-close-to-bottom{
  71. border-bottom: 3px solid #a3b9a2; }
  72. body.admin-color-midnight .block-editor-block-drop-zone.is-close-to-bottom{
  73. border-bottom: 3px solid #e14d43; }
  74. body.admin-color-ectoplasm .block-editor-block-drop-zone.is-close-to-bottom{
  75. border-bottom: 3px solid #a7b656; }
  76. body.admin-color-coffee .block-editor-block-drop-zone.is-close-to-bottom{
  77. border-bottom: 3px solid #c2a68c; }
  78. body.admin-color-blue .block-editor-block-drop-zone.is-close-to-bottom{
  79. border-bottom: 3px solid #82b4cb; }
  80. body.admin-color-light .block-editor-block-drop-zone.is-close-to-bottom{
  81. border-bottom: 3px solid #0085ba; }
  82. .block-editor-block-drop-zone.is-appender.is-active.is-dragging-over-document {
  83. border-bottom: none; }
  84. .block-editor-block-icon {
  85. display: flex;
  86. align-items: center;
  87. justify-content: center;
  88. width: 24px;
  89. height: 24px;
  90. margin: 0;
  91. border-radius: 4px; }
  92. .block-editor-block-icon.has-colors svg {
  93. fill: currentColor; }
  94. .block-editor-block-icon svg {
  95. min-width: 20px;
  96. min-height: 20px;
  97. max-width: 24px;
  98. max-height: 24px; }
  99. .block-editor-block-inspector__no-blocks {
  100. display: block;
  101. font-size: 13px;
  102. background: #fff;
  103. padding: 32px 16px;
  104. text-align: center; }
  105. .block-editor-block-list__layout .components-draggable__clone .block-editor-block-contextual-toolbar {
  106. display: none !important; }
  107. .block-editor-block-list__layout .block-editor-block-list__block.is-selected.is-dragging .block-editor-block-list__block-edit::before {
  108. border: none; }
  109. .block-editor-block-list__layout .block-editor-block-list__block.is-selected.is-dragging > .block-editor-block-list__block-edit > * {
  110. background: #f8f9f9; }
  111. .block-editor-block-list__layout .block-editor-block-list__block.is-selected.is-dragging > .block-editor-block-list__block-edit > * > * {
  112. visibility: hidden; }
  113. .block-editor-block-list__layout .block-editor-block-list__block.is-selected.is-dragging .block-editor-block-mover,
  114. .block-editor-block-list__layout .block-editor-block-list__block.is-selected.is-dragging .block-editor-block-contextual-toolbar {
  115. display: none; }
  116. .block-editor-block-list__layout .block-editor-block-list__block.is-selected > .block-editor-block-list__block-edit .reusable-block-edit-panel * {
  117. z-index: 1; }
  118. /**
  119. * General layout
  120. */
  121. @media (min-width: 600px) {
  122. .block-editor-block-list__layout {
  123. padding-right: 46px;
  124. padding-left: 46px; } }
  125. .block-editor-block-list__block .block-editor-block-list__layout {
  126. padding-right: 0;
  127. padding-left: 0;
  128. margin-right: -14px;
  129. margin-left: -14px; }
  130. .block-editor-block-list__layout .block-editor-block-list__block {
  131. position: relative;
  132. padding-right: 14px;
  133. padding-left: 14px;
  134. overflow-wrap: break-word;
  135. /**
  136. * Notices
  137. */
  138. /**
  139. * Block border layout
  140. */ }
  141. @media (min-width: 600px) {
  142. .block-editor-block-list__layout .block-editor-block-list__block {
  143. padding-right: 43px;
  144. padding-left: 43px; } }
  145. .block-editor-block-list__layout .block-editor-block-list__block .components-placeholder .components-with-notices-ui {
  146. margin: -10px 20px 12px 20px;
  147. width: calc(100% - 40px); }
  148. .block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui {
  149. margin: 0 0 12px 0;
  150. width: 100%; }
  151. .block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui .components-notice {
  152. margin-right: 0;
  153. margin-left: 0; }
  154. .block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui .components-notice .components-notice__content {
  155. font-size: 13px; }
  156. .block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-edit {
  157. position: relative; }
  158. .block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-edit::before {
  159. z-index: 0;
  160. content: "";
  161. position: absolute;
  162. border: 1px solid transparent;
  163. border-right: none;
  164. box-shadow: none;
  165. pointer-events: none;
  166. transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
  167. outline: 1px solid transparent;
  168. left: -14px;
  169. right: -14px;
  170. top: -14px;
  171. bottom: -14px; }
  172. @media (prefers-reduced-motion: reduce) {
  173. .block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-edit::before {
  174. transition-duration: 0s; } }
  175. .block-editor-block-list__layout .block-editor-block-list__block.is-selected > .block-editor-block-list__block-edit::before {
  176. border-color: rgba(66, 88, 99, 0.4);
  177. box-shadow: inset -3px 0 0 0 #555d66; }
  178. .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-selected > .block-editor-block-list__block-edit::before {
  179. border-color: rgba(255, 255, 255, 0.45);
  180. box-shadow: inset -3px 0 0 0 #d7dade; }
  181. @media (min-width: 600px) {
  182. .block-editor-block-list__layout .block-editor-block-list__block.is-selected > .block-editor-block-list__block-edit::before {
  183. box-shadow: 3px 0 0 0 #555d66; }
  184. .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-selected > .block-editor-block-list__block-edit::before {
  185. box-shadow: 3px 0 0 0 #d7dade; } }
  186. .block-editor-block-list__layout .block-editor-block-list__block.is-selected.is-navigate-mode > .block-editor-block-list__block-edit::before {
  187. border-color: #007cba;
  188. box-shadow: inset -3px 0 0 0 #007cba; }
  189. @media (min-width: 600px) {
  190. .block-editor-block-list__layout .block-editor-block-list__block.is-selected.is-navigate-mode > .block-editor-block-list__block-edit::before {
  191. box-shadow: 3px 0 0 0 #007cba; } }
  192. .block-editor-block-list__layout .block-editor-block-list__block.is-hovered:not(.is-navigate-mode) > .block-editor-block-list__block-edit::before {
  193. box-shadow: 3px 0 0 0 rgba(145, 151, 162, 0.25); }
  194. .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-hovered:not(.is-navigate-mode) > .block-editor-block-list__block-edit::before {
  195. box-shadow: 3px 0 0 0 rgba(255, 255, 255, 0.25); }
  196. .block-editor-block-list__layout .block-editor-block-list__block.is-focus-mode:not(.is-multi-selected) {
  197. opacity: 0.5;
  198. transition: opacity 0.1s linear; }
  199. @media (prefers-reduced-motion: reduce) {
  200. .block-editor-block-list__layout .block-editor-block-list__block.is-focus-mode:not(.is-multi-selected) {
  201. transition-duration: 0s; } }
  202. .block-editor-block-list__layout .block-editor-block-list__block.is-focus-mode:not(.is-multi-selected):not(.is-focused) .block-editor-block-list__block, .block-editor-block-list__layout .block-editor-block-list__block.is-focus-mode:not(.is-multi-selected).is-focused {
  203. opacity: 1; }
  204. .block-editor-block-list__layout .block-editor-block-list__block.has-child-selected > .block-editor-block-list__block-edit::before {
  205. border: 1px dashed rgba(123, 134, 162, 0.3); }
  206. .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.has-child-selected > .block-editor-block-list__block-edit::before {
  207. border-color: rgba(255, 255, 255, 0.3); }
  208. .block-editor-block-list__layout .block-editor-block-list__block.has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before,
  209. .block-editor-block-list__layout .block-editor-block-list__block.has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before,
  210. .block-editor-block-list__layout .block-editor-block-list__block.has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before {
  211. border: 1px dashed rgba(123, 134, 162, 0.3); }
  212. .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before, .is-dark-theme
  213. .block-editor-block-list__layout .block-editor-block-list__block.has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before, .is-dark-theme
  214. .block-editor-block-list__layout .block-editor-block-list__block.has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before {
  215. border-color: rgba(255, 255, 255, 0.3); }
  216. .block-editor-block-list__layout .block-editor-block-list__block.has-child-selected.is-hovered > .block-editor-block-list__block-edit::before,
  217. .block-editor-block-list__layout .block-editor-block-list__block.has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before,
  218. .block-editor-block-list__layout .block-editor-block-list__block.has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before,
  219. .block-editor-block-list__layout .block-editor-block-list__block.has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before {
  220. border-style: solid;
  221. border-color: rgba(145, 151, 162, 0.25);
  222. border-right-color: transparent; }
  223. .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.has-child-selected.is-hovered > .block-editor-block-list__block-edit::before, .is-dark-theme
  224. .block-editor-block-list__layout .block-editor-block-list__block.has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before, .is-dark-theme
  225. .block-editor-block-list__layout .block-editor-block-list__block.has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before, .is-dark-theme
  226. .block-editor-block-list__layout .block-editor-block-list__block.has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before {
  227. border-color: rgba(255, 255, 255, 0.25);
  228. border-right-color: transparent; }
  229. .block-editor-block-list__layout .block-editor-block-list__block.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before,
  230. .block-editor-block-list__layout .block-editor-block-list__block.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before,
  231. .block-editor-block-list__layout .block-editor-block-list__block.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before {
  232. border: 1px dashed rgba(123, 134, 162, 0.3); }
  233. .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before, .is-dark-theme
  234. .block-editor-block-list__layout .block-editor-block-list__block.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before, .is-dark-theme
  235. .block-editor-block-list__layout .block-editor-block-list__block.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before {
  236. border-color: rgba(255, 255, 255, 0.3); }
  237. .block-editor-block-list__layout .block-editor-block-list__block.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected).is-hovered > .block-editor-block-list__block-edit::before,
  238. .block-editor-block-list__layout .block-editor-block-list__block.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected).is-hovered > .block-editor-block-list__block-edit::before,
  239. .block-editor-block-list__layout .block-editor-block-list__block.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected).is-hovered > .block-editor-block-list__block-edit::before {
  240. border-style: solid;
  241. border-color: rgba(145, 151, 162, 0.25);
  242. border-right-color: transparent; }
  243. .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected).is-hovered > .block-editor-block-list__block-edit::before, .is-dark-theme
  244. .block-editor-block-list__layout .block-editor-block-list__block.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected).is-hovered > .block-editor-block-list__block-edit::before, .is-dark-theme
  245. .block-editor-block-list__layout .block-editor-block-list__block.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected).is-hovered > .block-editor-block-list__block-edit::before {
  246. border-color: rgba(255, 255, 255, 0.25);
  247. border-right-color: transparent; }
  248. /**
  249. * Cross-block selection
  250. */
  251. .block-editor-block-list__layout .block-editor-block-list__block ::selection {
  252. background-color: #b3e7fe; }
  253. .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected *::selection {
  254. background-color: transparent; }
  255. .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected .block-editor-block-list__block-edit::before {
  256. background: #b3e7fe;
  257. mix-blend-mode: multiply;
  258. top: -14px;
  259. bottom: -14px; }
  260. .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected .block-editor-block-list__block-edit::before {
  261. mix-blend-mode: soft-light; }
  262. /**
  263. * Block styles and alignments
  264. */
  265. .block-editor-block-list__layout .block-editor-block-list__block.has-warning {
  266. min-height: 36px; }
  267. .block-editor-block-list__layout .block-editor-block-list__block.has-warning .block-editor-block-list__block-edit > * {
  268. pointer-events: none;
  269. -webkit-user-select: none;
  270. -moz-user-select: none;
  271. -ms-user-select: none;
  272. user-select: none; }
  273. .block-editor-block-list__layout .block-editor-block-list__block.has-warning .block-editor-block-list__block-edit .block-editor-warning {
  274. pointer-events: all; }
  275. .block-editor-block-list__layout .block-editor-block-list__block.has-warning .block-editor-block-list__block-edit::before {
  276. border-color: rgba(145, 151, 162, 0.25);
  277. border-right: 1px solid rgba(145, 151, 162, 0.25); }
  278. .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.has-warning .block-editor-block-list__block-edit::before {
  279. border-color: rgba(255, 255, 255, 0.35); }
  280. .block-editor-block-list__layout .block-editor-block-list__block.has-warning.is-selected .editor-block-list__block-edit::before {
  281. border-color: rgba(66, 88, 99, 0.4);
  282. border-right-color: transparent; }
  283. .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.has-warning.is-selected .editor-block-list__block-edit::before {
  284. border-color: rgba(255, 255, 255, 0.45); }
  285. .block-editor-block-list__layout .block-editor-block-list__block.has-warning .block-editor-block-list__block-edit::after {
  286. content: "";
  287. position: absolute;
  288. background-color: rgba(248, 249, 249, 0.4);
  289. top: -14px;
  290. bottom: -14px;
  291. left: -14px;
  292. right: -14px; }
  293. .block-editor-block-list__layout .block-editor-block-list__block.has-warning.is-multi-selected .block-editor-block-list__block-edit::after {
  294. background-color: transparent; }
  295. .block-editor-block-list__layout .block-editor-block-list__block.has-warning.is-selected .block-editor-block-list__block-edit::after {
  296. bottom: 22px; }
  297. @media (min-width: 600px) {
  298. .block-editor-block-list__layout .block-editor-block-list__block.has-warning.is-selected .block-editor-block-list__block-edit::after {
  299. bottom: -14px; } }
  300. .block-editor-block-list__layout .block-editor-block-list__block.is-typing .block-editor-block-list__side-inserter {
  301. opacity: 0;
  302. animation: none; }
  303. .block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__side-inserter {
  304. animation: edit-post__fade-in-animation 0.2s ease-out 0s;
  305. animation-fill-mode: forwards; }
  306. @media (prefers-reduced-motion: reduce) {
  307. .block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__side-inserter {
  308. animation-duration: 1ms; } }
  309. .block-editor-block-list__layout .block-editor-block-list__block.is-reusable > .block-editor-block-list__block-edit::before {
  310. border: 1px dashed rgba(145, 151, 162, 0.25); }
  311. .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-reusable > .block-editor-block-list__block-edit::before {
  312. border-color: rgba(255, 255, 255, 0.35); }
  313. .block-editor-block-list__layout .block-editor-block-list__block.is-reusable.is-selected > .block-editor-block-list__block-edit::before {
  314. border-color: rgba(66, 88, 99, 0.4);
  315. border-right-color: transparent; }
  316. .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-reusable.is-selected > .block-editor-block-list__block-edit::before {
  317. border-color: rgba(255, 255, 255, 0.45);
  318. border-right-color: transparent; }
  319. .block-editor-block-list__layout .block-editor-block-list__block.is-reusable > .block-editor-block-list__block-edit .block-editor-inner-blocks.has-overlay::after {
  320. display: none; }
  321. .block-editor-block-list__layout .block-editor-block-list__block.is-reusable > .block-editor-block-list__block-edit .block-editor-inner-blocks.has-overlay .block-editor-inner-blocks.has-overlay::after {
  322. display: block; }
  323. .block-editor-block-list__layout .block-editor-block-list__block[data-align="left"], .block-editor-block-list__layout .block-editor-block-list__block[data-align="right"] {
  324. z-index: 21;
  325. width: 100%;
  326. height: 0; }
  327. .block-editor-block-list__layout .block-editor-block-list__block[data-align="left"] .block-editor-block-list__block-edit, .block-editor-block-list__layout .block-editor-block-list__block[data-align="right"] .block-editor-block-list__block-edit {
  328. margin-top: 0; }
  329. .block-editor-block-list__layout .block-editor-block-list__block[data-align="left"] .block-editor-block-list__block-edit::before, .block-editor-block-list__layout .block-editor-block-list__block[data-align="right"] .block-editor-block-list__block-edit::before {
  330. content: none; }
  331. .block-editor-block-list__layout .block-editor-block-list__block[data-align="left"] .block-editor-block-contextual-toolbar, .block-editor-block-list__layout .block-editor-block-list__block[data-align="right"] .block-editor-block-contextual-toolbar {
  332. margin-bottom: 1px; }
  333. .block-editor-block-list__layout .block-editor-block-list__block[data-align="left"] .block-editor-block-contextual-toolbar, .block-editor-block-list__layout .block-editor-block-list__block[data-align="right"] .block-editor-block-contextual-toolbar {
  334. width: auto;
  335. border-bottom: 1px solid #b5bcc2;
  336. bottom: auto; }
  337. @media (min-width: 600px) {
  338. .block-editor-block-list__layout .block-editor-block-list__block[data-align="left"] .block-editor-block-contextual-toolbar, .block-editor-block-list__layout .block-editor-block-list__block[data-align="right"] .block-editor-block-contextual-toolbar {
  339. border-bottom: none; } }
  340. .block-editor-block-list__layout .block-editor-block-list__block[data-align="left"] .block-editor-block-contextual-toolbar {
  341. right: 0;
  342. left: auto; }
  343. .block-editor-block-list__layout .block-editor-block-list__block[data-align="right"] .block-editor-block-contextual-toolbar {
  344. right: auto;
  345. left: 0; }
  346. @media (min-width: 600px) {
  347. .block-editor-block-list__layout .block-editor-block-list__block[data-align="right"] .block-editor-block-contextual-toolbar,
  348. .block-editor-block-list__layout .block-editor-block-list__block[data-align="left"] .block-editor-block-contextual-toolbar {
  349. top: 14px; } }
  350. .block-editor-block-list__layout .block-editor-block-list__block[data-align="left"] > .block-editor-block-list__block-edit {
  351. float: left;
  352. margin-right: 2em; }
  353. @media (min-width: 600px) {
  354. .block-editor-block-list__layout .block-editor-block-list__block[data-align="left"] .block-editor-block-toolbar {
  355. left: 14px;
  356. right: auto; } }
  357. .block-editor-block-list__layout .block-editor-block-list__block[data-align="right"] > .block-editor-block-list__block-edit {
  358. float: right;
  359. margin-left: 2em; }
  360. @media (min-width: 600px) {
  361. .block-editor-block-list__layout .block-editor-block-list__block[data-align="right"] .block-editor-block-toolbar {
  362. right: 14px;
  363. left: auto; } }
  364. .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"], .block-editor-block-list__layout .block-editor-block-list__block[data-align="wide"] {
  365. clear: both;
  366. z-index: 20; }
  367. .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"].is-multi-selected > .block-editor-block-mover,
  368. .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"] > .block-editor-block-list__block-edit > .block-editor-block-mover, .block-editor-block-list__layout .block-editor-block-list__block[data-align="wide"].is-multi-selected > .block-editor-block-mover,
  369. .block-editor-block-list__layout .block-editor-block-list__block[data-align="wide"] > .block-editor-block-list__block-edit > .block-editor-block-mover {
  370. top: -46px;
  371. bottom: auto;
  372. min-height: 0;
  373. height: auto;
  374. width: auto; }
  375. .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"].is-multi-selected > .block-editor-block-mover::before,
  376. .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"] > .block-editor-block-list__block-edit > .block-editor-block-mover::before, .block-editor-block-list__layout .block-editor-block-list__block[data-align="wide"].is-multi-selected > .block-editor-block-mover::before,
  377. .block-editor-block-list__layout .block-editor-block-list__block[data-align="wide"] > .block-editor-block-list__block-edit > .block-editor-block-mover::before {
  378. content: none; }
  379. .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"].is-multi-selected > .block-editor-block-mover .block-editor-block-mover__control,
  380. .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"] > .block-editor-block-list__block-edit > .block-editor-block-mover .block-editor-block-mover__control, .block-editor-block-list__layout .block-editor-block-list__block[data-align="wide"].is-multi-selected > .block-editor-block-mover .block-editor-block-mover__control,
  381. .block-editor-block-list__layout .block-editor-block-list__block[data-align="wide"] > .block-editor-block-list__block-edit > .block-editor-block-mover .block-editor-block-mover__control {
  382. float: right; }
  383. @media (min-width: 600px) {
  384. .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"] .block-editor-block-toolbar, .block-editor-block-list__layout .block-editor-block-list__block[data-align="wide"] .block-editor-block-toolbar {
  385. display: inline-flex; } }
  386. .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"] .block-editor-block-mover.is-visible + .block-editor-block-list__breadcrumb, .block-editor-block-list__layout .block-editor-block-list__block[data-align="wide"] .block-editor-block-mover.is-visible + .block-editor-block-list__breadcrumb {
  387. top: -19px; }
  388. @media (min-width: 600px) {
  389. .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"] > .editor-block-list__block-edit > .block-editor-block-contextual-toolbar > .block-editor-block-toolbar, .block-editor-block-list__layout .block-editor-block-list__block[data-align="wide"] > .editor-block-list__block-edit > .block-editor-block-contextual-toolbar > .block-editor-block-toolbar {
  390. left: 90px; } }
  391. @media (min-width: 1080px) {
  392. .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"] > .editor-block-list__block-edit > .block-editor-block-contextual-toolbar > .block-editor-block-toolbar, .block-editor-block-list__layout .block-editor-block-list__block[data-align="wide"] > .editor-block-list__block-edit > .block-editor-block-contextual-toolbar > .block-editor-block-toolbar {
  393. left: 14px; } }
  394. .block-editor-block-list__layout .block-editor-block-list__block[data-align="wide"].is-multi-selected > .block-editor-block-mover,
  395. .block-editor-block-list__layout .block-editor-block-list__block[data-align="wide"] > .block-editor-block-list__block-edit > .block-editor-block-mover {
  396. right: -13px; }
  397. .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"] > .block-editor-block-list__block-edit > .block-editor-block-list__breadcrumb {
  398. right: 0; }
  399. @media (min-width: 600px) {
  400. .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"] {
  401. margin-right: -45px;
  402. margin-left: -45px; } }
  403. .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"] > .block-editor-block-list__block-edit {
  404. margin-right: -14px;
  405. margin-left: -14px; }
  406. @media (min-width: 600px) {
  407. .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"] > .block-editor-block-list__block-edit {
  408. margin-right: -44px;
  409. margin-left: -44px; } }
  410. .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"] > .block-editor-block-list__block-edit figure {
  411. width: 100%; }
  412. .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"] > .block-editor-block-list__block-edit::before {
  413. right: 0;
  414. left: 0;
  415. border-right-width: 0;
  416. border-left-width: 0; }
  417. .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"].is-multi-selected > .block-editor-block-mover,
  418. .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"] > .block-editor-block-list__block-edit > .block-editor-block-mover {
  419. right: 1px; }
  420. .block-editor-block-list__layout .block-editor-block-list__block[data-clear="true"] {
  421. float: none; }
  422. .block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-drop-zone {
  423. top: -4px;
  424. bottom: -3px;
  425. margin: 0 14px; }
  426. .block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__layout .block-editor-inserter-with-shortcuts {
  427. display: none; }
  428. .block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__layout .block-editor-block-list__empty-block-inserter,
  429. .block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__layout .block-editor-default-block-appender .block-editor-inserter {
  430. right: auto;
  431. left: 8px; }
  432. /**
  433. * Styles that affect inner-block containers (nested blocks).
  434. */
  435. .block-editor-inner-blocks {
  436. /* @todo:
  437. The two rules above can be simplified & combined when https://github.com/WordPress/gutenberg/pull/14961 is merged,
  438. into the following:
  439. .is-selected &,
  440. .has-child-selected & {
  441. display: block;
  442. }
  443. */ }
  444. .block-editor-inner-blocks .block-editor-block-list__block + .block-list-appender {
  445. display: none; }
  446. .is-selected .block-editor-inner-blocks .block-editor-block-list__block + .block-list-appender {
  447. display: block; }
  448. .block-editor-inner-blocks .block-editor-block-list__block.is-selected + .block-list-appender {
  449. display: block; }
  450. /**
  451. * Left and right side UI; Unified toolbar on Mobile
  452. */
  453. .block-editor-block-list__block.is-multi-selected > .block-editor-block-mover,
  454. .block-editor-block-list__block > .block-editor-block-list__block-edit > .block-editor-block-mover {
  455. position: absolute;
  456. width: 30px; }
  457. .block-editor-block-list__block.is-multi-selected > .block-editor-block-mover,
  458. .block-editor-block-list__block > .block-editor-block-list__block-edit > .block-editor-block-mover {
  459. top: -15px; }
  460. @media (min-width: 600px) {
  461. .block-editor-block-list__block.is-multi-selected .block-editor-block-mover, .block-editor-block-list__block.is-selected .block-editor-block-mover, .block-editor-block-list__block.is-hovered .block-editor-block-mover {
  462. z-index: 61; } }
  463. .block-editor-block-list__block.is-multi-selected > .block-editor-block-mover,
  464. .block-editor-block-list__block > .block-editor-block-list__block-edit > .block-editor-block-mover {
  465. padding-left: 2px;
  466. right: -53px;
  467. display: none; }
  468. @media (min-width: 600px) {
  469. .block-editor-block-list__block.is-multi-selected > .block-editor-block-mover,
  470. .block-editor-block-list__block > .block-editor-block-list__block-edit > .block-editor-block-mover {
  471. display: block; } }
  472. .block-editor-block-list__block.is-multi-selected > .block-editor-block-mover {
  473. right: -30px; }
  474. /**
  475. * Mobile unified toolbar.
  476. */
  477. .block-editor-block-list__block .block-editor-block-list__block-mobile-toolbar {
  478. display: flex;
  479. flex-direction: row;
  480. transform: translateY(15px);
  481. margin-top: 37px;
  482. margin-left: -14px;
  483. margin-right: -14px;
  484. border-top: 1px solid #b5bcc2;
  485. height: 37px;
  486. background-color: #fff;
  487. box-shadow: 0 5px 10px rgba(25, 30, 35, 0.05), 0 2px 2px rgba(25, 30, 35, 0.05); }
  488. @media (min-width: 600px) {
  489. .block-editor-block-list__block .block-editor-block-list__block-mobile-toolbar {
  490. display: none; } }
  491. @media (min-width: 600px) {
  492. .block-editor-block-list__block .block-editor-block-list__block-mobile-toolbar {
  493. box-shadow: none; } }
  494. .block-editor-block-list__block .block-editor-block-list__block-mobile-toolbar .block-editor-inserter {
  495. position: relative;
  496. right: auto;
  497. top: auto;
  498. margin: 0; }
  499. .block-editor-block-list__block .block-editor-block-list__block-mobile-toolbar .block-editor-inserter__toggle,
  500. .block-editor-block-list__block .block-editor-block-list__block-mobile-toolbar .block-editor-block-mover__control {
  501. width: 36px;
  502. height: 36px;
  503. border-radius: 4px;
  504. padding: 3px;
  505. margin: 0;
  506. justify-content: center;
  507. align-items: center; }
  508. .block-editor-block-list__block .block-editor-block-list__block-mobile-toolbar .block-editor-inserter__toggle .dashicon,
  509. .block-editor-block-list__block .block-editor-block-list__block-mobile-toolbar .block-editor-block-mover__control .dashicon {
  510. margin: auto; }
  511. .block-editor-block-list__block .block-editor-block-list__block-mobile-toolbar .block-editor-block-mover {
  512. display: flex;
  513. margin-left: auto; }
  514. .block-editor-block-list__block .block-editor-block-list__block-mobile-toolbar .block-editor-block-mover .block-editor-inserter,
  515. .block-editor-block-list__block .block-editor-block-list__block-mobile-toolbar .block-editor-block-mover .block-editor-block-mover__control {
  516. float: right; }
  517. .block-editor-block-list__block[data-align="full"] .block-editor-block-list__block-mobile-toolbar {
  518. margin-right: 0;
  519. margin-left: 0; }
  520. /**
  521. * In-Canvas Inserter
  522. */
  523. .block-editor-block-list .block-editor-inserter {
  524. margin: 8px;
  525. cursor: move;
  526. cursor: grab; }
  527. .block-editor-block-list__insertion-point {
  528. position: relative;
  529. z-index: 6;
  530. margin-top: -14px; }
  531. .block-editor-block-list__insertion-point-indicator {
  532. position: absolute;
  533. top: calc(50% - 1px);
  534. height: 2px;
  535. right: 0;
  536. left: 0;
  537. background: #0085ba; }
  538. body.admin-color-sunrise .block-editor-block-list__insertion-point-indicator{
  539. background: #d1864a; }
  540. body.admin-color-ocean .block-editor-block-list__insertion-point-indicator{
  541. background: #a3b9a2; }
  542. body.admin-color-midnight .block-editor-block-list__insertion-point-indicator{
  543. background: #e14d43; }
  544. body.admin-color-ectoplasm .block-editor-block-list__insertion-point-indicator{
  545. background: #a7b656; }
  546. body.admin-color-coffee .block-editor-block-list__insertion-point-indicator{
  547. background: #c2a68c; }
  548. body.admin-color-blue .block-editor-block-list__insertion-point-indicator{
  549. background: #82b4cb; }
  550. body.admin-color-light .block-editor-block-list__insertion-point-indicator{
  551. background: #0085ba; }
  552. .block-editor-block-list__insertion-point-inserter {
  553. display: none;
  554. position: absolute;
  555. bottom: auto;
  556. right: 0;
  557. left: 0;
  558. justify-content: center;
  559. height: 22px;
  560. opacity: 0;
  561. transition: opacity 0.1s linear; }
  562. @media (min-width: 480px) {
  563. .block-editor-block-list__insertion-point-inserter {
  564. display: flex; } }
  565. .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle {
  566. border-radius: 50%;
  567. color: #007cba;
  568. background: #fff;
  569. height: 28px;
  570. width: 28px;
  571. padding: 4px; }
  572. .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle:not(:disabled):not([aria-disabled="true"]):hover {
  573. box-shadow: none; }
  574. @media (prefers-reduced-motion: reduce) {
  575. .block-editor-block-list__insertion-point-inserter {
  576. transition-duration: 0s; } }
  577. .block-editor-block-list__insertion-point-inserter:hover, .block-editor-block-list__insertion-point-inserter.is-visible {
  578. opacity: 1; }
  579. .edit-post-layout:not(.has-fixed-toolbar) .is-selected > .block-editor-block-list__insertion-point > .block-editor-block-list__insertion-point-inserter,
  580. .edit-post-layout:not(.has-fixed-toolbar) .is-focused > .block-editor-block-list__insertion-point > .block-editor-block-list__insertion-point-inserter {
  581. opacity: 0;
  582. pointer-events: none; }
  583. .edit-post-layout:not(.has-fixed-toolbar) .is-selected > .block-editor-block-list__insertion-point > .block-editor-block-list__insertion-point-inserter:hover, .edit-post-layout:not(.has-fixed-toolbar) .is-selected > .block-editor-block-list__insertion-point > .block-editor-block-list__insertion-point-inserter.is-visible,
  584. .edit-post-layout:not(.has-fixed-toolbar) .is-focused > .block-editor-block-list__insertion-point > .block-editor-block-list__insertion-point-inserter:hover,
  585. .edit-post-layout:not(.has-fixed-toolbar) .is-focused > .block-editor-block-list__insertion-point > .block-editor-block-list__insertion-point-inserter.is-visible {
  586. opacity: 1;
  587. pointer-events: auto; }
  588. .block-editor-block-list__block > .block-editor-block-list__insertion-point {
  589. position: absolute;
  590. top: -16px;
  591. height: 28px;
  592. bottom: auto;
  593. right: 0;
  594. left: 0; }
  595. @media (min-width: 600px) {
  596. .block-editor-block-list__block > .block-editor-block-list__insertion-point {
  597. right: -1px;
  598. left: -1px; } }
  599. .block-editor-block-list__block[data-align="full"] > .block-editor-block-list__insertion-point {
  600. right: 0;
  601. left: 0; }
  602. .block-editor-block-list__block .block-editor-block-list__block-html-textarea {
  603. display: block;
  604. margin: 0;
  605. width: 100%;
  606. border: none;
  607. outline: none;
  608. box-shadow: none;
  609. resize: none;
  610. overflow: hidden;
  611. font-family: Menlo, Consolas, monaco, monospace;
  612. font-size: 14px;
  613. line-height: 150%;
  614. transition: padding 0.2s linear; }
  615. @media (prefers-reduced-motion: reduce) {
  616. .block-editor-block-list__block .block-editor-block-list__block-html-textarea {
  617. transition-duration: 0s; } }
  618. .block-editor-block-list__block .block-editor-block-list__block-html-textarea:focus {
  619. box-shadow: none; }
  620. /**
  621. * Block Toolbar when contextual.
  622. */
  623. .block-editor-block-list__block .block-editor-block-contextual-toolbar {
  624. z-index: 61;
  625. white-space: nowrap;
  626. text-align: right;
  627. pointer-events: none;
  628. position: absolute;
  629. bottom: 22px;
  630. right: -14px;
  631. left: -14px;
  632. border-top: 1px solid #b5bcc2; }
  633. .block-editor-block-list__block .block-editor-block-contextual-toolbar .components-toolbar {
  634. border-top: none;
  635. border-bottom: none; }
  636. @media (min-width: 600px) {
  637. .block-editor-block-list__block .block-editor-block-contextual-toolbar {
  638. border-top: none; }
  639. .block-editor-block-list__block .block-editor-block-contextual-toolbar .components-toolbar {
  640. border-top: 1px solid #b5bcc2;
  641. border-bottom: 1px solid #b5bcc2; } }
  642. .block-editor-block-list__block[data-align="left"] .block-editor-block-contextual-toolbar,
  643. .block-editor-block-list__block[data-align="right"] .block-editor-block-contextual-toolbar {
  644. margin-bottom: 1px;
  645. margin-top: -37px;
  646. box-shadow: 3px 0 0 0 #555d66; }
  647. .is-dark-theme .block-editor-block-list__block[data-align="left"] .block-editor-block-contextual-toolbar, .is-dark-theme
  648. .block-editor-block-list__block[data-align="right"] .block-editor-block-contextual-toolbar {
  649. box-shadow: 3px 0 0 0 #d7dade; }
  650. @media (min-width: 600px) {
  651. .block-editor-block-list__block[data-align="left"] .block-editor-block-contextual-toolbar,
  652. .block-editor-block-list__block[data-align="right"] .block-editor-block-contextual-toolbar {
  653. box-shadow: none; } }
  654. .block-editor-block-list__block[data-align="left"] .block-editor-block-contextual-toolbar .editor-block-toolbar,
  655. .block-editor-block-list__block[data-align="right"] .block-editor-block-contextual-toolbar .editor-block-toolbar {
  656. border-right: none; }
  657. .block-editor-block-list__block .block-editor-block-contextual-toolbar {
  658. margin-right: 0;
  659. margin-left: 0; }
  660. @media (min-width: 600px) {
  661. .block-editor-block-list__block .block-editor-block-contextual-toolbar {
  662. margin-right: -15px;
  663. margin-left: -15px; } }
  664. .block-editor-block-list__block[data-align="left"] .block-editor-block-contextual-toolbar {
  665. margin-right: 15px; }
  666. .block-editor-block-list__block[data-align="right"] .block-editor-block-contextual-toolbar {
  667. margin-left: 15px; }
  668. .block-editor-block-list__block .block-editor-block-contextual-toolbar > * {
  669. pointer-events: auto; }
  670. .block-editor-block-list__block[data-align="full"] .block-editor-block-contextual-toolbar {
  671. right: 0;
  672. left: 0; }
  673. @media (min-width: 600px) {
  674. .block-editor-block-list__block .block-editor-block-contextual-toolbar {
  675. bottom: auto;
  676. right: auto;
  677. left: auto;
  678. box-shadow: none;
  679. transform: translateY(-52px); }
  680. @supports ((position: -webkit-sticky) or (position: sticky)) {
  681. .block-editor-block-list__block .block-editor-block-contextual-toolbar {
  682. position: -webkit-sticky;
  683. position: sticky;
  684. top: 51px; } } }
  685. .block-editor-block-list__block[data-align="left"] .block-editor-block-contextual-toolbar {
  686. float: left; }
  687. .block-editor-block-list__block[data-align="right"] .block-editor-block-contextual-toolbar {
  688. float: right;
  689. min-width: 200px; }
  690. @supports ((position: -webkit-sticky) or (position: sticky)) {
  691. .block-editor-block-list__block[data-align="right"] .block-editor-block-contextual-toolbar {
  692. min-width: 0; } }
  693. .block-editor-block-list__block[data-align="left"] .block-editor-block-contextual-toolbar,
  694. .block-editor-block-list__block[data-align="right"] .block-editor-block-contextual-toolbar {
  695. transform: translateY(-15px); }
  696. .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
  697. width: 100%; }
  698. @media (min-width: 600px) {
  699. .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
  700. width: auto;
  701. border-left: none;
  702. position: absolute;
  703. right: 1px;
  704. top: 1px; } }
  705. /**
  706. * Hover label
  707. */
  708. .block-editor-block-list__breadcrumb {
  709. position: absolute;
  710. line-height: 1;
  711. z-index: 22;
  712. right: -17px;
  713. top: -31px; }
  714. .block-editor-block-list__breadcrumb .components-toolbar {
  715. border: none;
  716. line-height: 1;
  717. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  718. font-size: 11px;
  719. padding: 4px 4px;
  720. background: #e2e4e7;
  721. color: #191e23;
  722. transition: box-shadow 0.1s linear; }
  723. @media (prefers-reduced-motion: reduce) {
  724. .block-editor-block-list__breadcrumb .components-toolbar {
  725. transition-duration: 0s; } }
  726. .block-editor-block-list__breadcrumb .components-toolbar .components-button {
  727. font-size: inherit;
  728. line-height: inherit;
  729. padding: 0; }
  730. .is-dark-theme .block-editor-block-list__breadcrumb .components-toolbar {
  731. background: #40464d;
  732. color: #fff; }
  733. [data-align="left"] .block-editor-block-list__breadcrumb {
  734. right: 0; }
  735. [data-align="right"] .block-editor-block-list__breadcrumb {
  736. right: auto;
  737. left: 0; }
  738. .is-navigate-mode .block-editor-block-list__breadcrumb {
  739. right: -14px;
  740. top: -51px; }
  741. .is-navigate-mode .block-editor-block-list__breadcrumb .components-toolbar {
  742. background: #fff;
  743. border: 1px solid #007cba;
  744. border-right: none;
  745. box-shadow: inset -3px 0 0 0 #007cba;
  746. height: 38px;
  747. font-size: 13px;
  748. line-height: 29px;
  749. padding-right: 8px;
  750. padding-left: 8px; }
  751. .is-navigate-mode .block-editor-block-list__breadcrumb .components-toolbar .components-button {
  752. box-shadow: none; }
  753. .is-dark-theme .is-navigate-mode .block-editor-block-list__breadcrumb .components-toolbar {
  754. border-color: rgba(255, 255, 255, 0.45); }
  755. @media (min-width: 600px) {
  756. .is-navigate-mode .block-editor-block-list__breadcrumb .components-toolbar {
  757. box-shadow: 3px 0 0 0 #007cba; } }
  758. .block-editor-block-list__descendant-arrow::before {
  759. content: "→";
  760. display: inline-block;
  761. padding: 0 4px; }
  762. .rtl .block-editor-block-list__descendant-arrow::before {
  763. content: "←"; }
  764. @media (min-width: 600px) {
  765. .block-editor-block-list__block::before {
  766. bottom: 0;
  767. content: "";
  768. right: -28px;
  769. position: absolute;
  770. left: -28px;
  771. top: 0; }
  772. .block-editor-block-list__block .block-editor-block-list__block::before {
  773. right: 0;
  774. left: 0; }
  775. .block-editor-block-list__block[data-align="full"]::before {
  776. content: none; } }
  777. .block-editor-block-list__block .block-editor-warning {
  778. z-index: 5;
  779. position: relative;
  780. margin-left: -14px;
  781. margin-right: -14px;
  782. margin-bottom: -14px;
  783. transform: translateY(-14px); }
  784. .block-editor-block-list__block .block-editor-warning.block-editor-block-list__block-crash-warning {
  785. margin-bottom: auto; }
  786. .block-editor-block-list__block .block-list-appender {
  787. margin: 14px; }
  788. .has-background .block-editor-block-list__block .block-list-appender {
  789. margin: 32px 14px; }
  790. .block-list-appender > .block-editor-inserter {
  791. display: block; }
  792. .block-editor-block-card {
  793. display: flex;
  794. align-items: flex-start; }
  795. .block-editor-block-card__icon {
  796. border: 1px solid #ccd0d4;
  797. padding: 7px;
  798. margin-left: 10px;
  799. height: 36px;
  800. width: 36px; }
  801. .block-editor-block-card__content {
  802. flex-grow: 1; }
  803. .block-editor-block-card__title {
  804. font-weight: 500;
  805. margin-bottom: 5px; }
  806. .block-editor-block-card__description {
  807. font-size: 13px; }
  808. .block-editor-block-card .block-editor-block-icon {
  809. margin-right: -2px;
  810. margin-left: 10px;
  811. padding: 0 3px;
  812. width: 36px;
  813. height: 24px; }
  814. /**
  815. * Invalid block comparison
  816. */
  817. .block-editor-block-compare {
  818. overflow: auto;
  819. height: auto; }
  820. @media (min-width: 600px) {
  821. .block-editor-block-compare {
  822. max-height: 70%; } }
  823. .block-editor-block-compare__wrapper {
  824. display: flex;
  825. padding-bottom: 16px; }
  826. .block-editor-block-compare__wrapper > div {
  827. display: flex;
  828. justify-content: space-between;
  829. flex-direction: column;
  830. width: 50%;
  831. padding: 0 0 0 16px;
  832. min-width: 200px; }
  833. .block-editor-block-compare__wrapper > div button {
  834. float: left; }
  835. .block-editor-block-compare__wrapper .block-editor-block-compare__converted {
  836. border-right: 1px solid #ddd;
  837. padding-right: 15px;
  838. padding-left: 0; }
  839. .block-editor-block-compare__wrapper .block-editor-block-compare__html {
  840. font-family: Menlo, Consolas, monaco, monospace;
  841. font-size: 12px;
  842. color: #23282d;
  843. border-bottom: 1px solid #ddd;
  844. padding-bottom: 15px;
  845. line-height: 1.7; }
  846. .block-editor-block-compare__wrapper .block-editor-block-compare__html span {
  847. background-color: #e6ffed;
  848. padding-top: 3px;
  849. padding-bottom: 3px; }
  850. .block-editor-block-compare__wrapper .block-editor-block-compare__html span.block-editor-block-compare__added {
  851. background-color: #acf2bd; }
  852. .block-editor-block-compare__wrapper .block-editor-block-compare__html span.block-editor-block-compare__removed {
  853. background-color: #d94f4f; }
  854. .block-editor-block-compare__wrapper .block-editor-block-compare__preview {
  855. padding: 0;
  856. padding-top: 14px; }
  857. .block-editor-block-compare__wrapper .block-editor-block-compare__preview p {
  858. font-size: 12px;
  859. margin-top: 0; }
  860. .block-editor-block-compare__wrapper .block-editor-block-compare__action {
  861. margin-top: 14px; }
  862. .block-editor-block-compare__wrapper .block-editor-block-compare__heading {
  863. font-size: 1em;
  864. font-weight: 400;
  865. margin: 0.67em 0; }
  866. @media (min-width: 600px) {
  867. .block-editor-block-mover {
  868. min-height: 56px;
  869. opacity: 0;
  870. background: #fff;
  871. border: 1px solid rgba(66, 88, 99, 0.4);
  872. border-radius: 4px;
  873. transition: box-shadow 0.2s ease-out; } }
  874. @media (min-width: 600px) and (prefers-reduced-motion: reduce) {
  875. .block-editor-block-mover {
  876. transition-duration: 0s; } }
  877. @media (min-width: 600px) {
  878. .block-editor-block-mover.is-visible {
  879. animation: edit-post__fade-in-animation 0.2s ease-out 0s;
  880. animation-fill-mode: forwards; } }
  881. @media (min-width: 600px) and (prefers-reduced-motion: reduce) {
  882. .block-editor-block-mover.is-visible {
  883. animation-duration: 1ms; } }
  884. @media (min-width: 600px) {
  885. .block-editor-block-mover:hover {
  886. box-shadow: 0 2px 10px rgba(25, 30, 35, 0.1), 0 0 2px rgba(25, 30, 35, 0.1); }
  887. .block-editor-block-list__block:not([data-align="wide"]):not([data-align="full"]) .block-editor-block-mover {
  888. margin-top: -8px; } }
  889. .block-editor-block-mover__control {
  890. display: flex;
  891. align-items: center;
  892. justify-content: center;
  893. cursor: pointer;
  894. padding: 0;
  895. border: none;
  896. box-shadow: none;
  897. width: 28px;
  898. height: 24px; }
  899. .block-editor-block-mover__control svg {
  900. width: 28px;
  901. height: 24px;
  902. padding: 2px 5px; }
  903. .block-editor-block-mover__control[aria-disabled="true"] {
  904. cursor: default;
  905. pointer-events: none;
  906. color: rgba(14, 28, 46, 0.62); }
  907. @media (min-width: 600px) {
  908. .block-editor-block-mover__control {
  909. color: rgba(14, 28, 46, 0.62); }
  910. .block-editor-block-mover__control:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {
  911. background-color: transparent;
  912. box-shadow: none; }
  913. .block-editor-block-mover__control:focus:not(:disabled) {
  914. background-color: transparent; } }
  915. .block-editor-block-mover__control-drag-handle {
  916. cursor: move;
  917. cursor: grab;
  918. fill: currentColor; }
  919. .block-editor-block-mover__control-drag-handle, .block-editor-block-mover__control-drag-handle:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover, .block-editor-block-mover__control-drag-handle:not(:disabled):not([aria-disabled="true"]):not(.is-default):active, .block-editor-block-mover__control-drag-handle:not(:disabled):not([aria-disabled="true"]):not(.is-default):focus {
  920. box-shadow: none;
  921. background: none;
  922. color: rgba(10, 24, 41, 0.7); }
  923. .block-editor-block-mover__control-drag-handle:not(:disabled):not([aria-disabled="true"]):not(.is-default):active {
  924. cursor: grabbing; }
  925. .block-editor-block-mover__description {
  926. display: none; }
  927. .block-editor-block-navigation__container {
  928. padding: 7px; }
  929. .block-editor-block-navigation__label {
  930. margin: 0 0 8px;
  931. color: #6c7781; }
  932. .block-editor-block-navigation__list,
  933. .block-editor-block-navigation__paragraph {
  934. padding: 0;
  935. margin: 0; }
  936. .block-editor-block-navigation__list .block-editor-block-navigation__list {
  937. margin-top: 2px;
  938. border-right: 2px solid #a2aab2;
  939. margin-right: 1em; }
  940. .block-editor-block-navigation__list .block-editor-block-navigation__list .block-editor-block-navigation__list {
  941. margin-right: 1.5em; }
  942. .block-editor-block-navigation__list .block-editor-block-navigation__list .block-editor-block-navigation__item {
  943. position: relative; }
  944. .block-editor-block-navigation__list .block-editor-block-navigation__list .block-editor-block-navigation__item::before {
  945. position: absolute;
  946. right: 0;
  947. background: #a2aab2;
  948. width: 0.5em;
  949. height: 2px;
  950. content: "";
  951. top: calc(50% - 1px); }
  952. .block-editor-block-navigation__list .block-editor-block-navigation__list .block-editor-block-navigation__item-button {
  953. margin-right: 0.8em;
  954. width: calc(100% - 0.8em); }
  955. .block-editor-block-navigation__list .block-editor-block-navigation__list > li:last-child {
  956. position: relative; }
  957. .block-editor-block-navigation__list .block-editor-block-navigation__list > li:last-child::after {
  958. position: absolute;
  959. content: "";
  960. background: #fff;
  961. top: 19px;
  962. bottom: 0;
  963. right: -2px;
  964. width: 2px; }
  965. .block-editor-block-navigation__item-button {
  966. display: flex;
  967. align-items: center;
  968. width: 100%;
  969. padding: 6px;
  970. text-align: right;
  971. color: #40464d;
  972. border-radius: 4px; }
  973. .block-editor-block-navigation__item-button .block-editor-block-icon {
  974. margin-left: 6px; }
  975. .block-editor-block-navigation__item-button:hover:not(:disabled):not([aria-disabled="true"]) {
  976. color: #191e23;
  977. border: none;
  978. box-shadow: none;
  979. background: #f3f4f5; }
  980. .block-editor-block-navigation__item-button:focus:not(:disabled):not([aria-disabled="true"]) {
  981. color: #191e23;
  982. border: none;
  983. box-shadow: none;
  984. outline-offset: -2px;
  985. outline: 1px dotted #555d66; }
  986. .block-editor-block-navigation__item-button.is-selected, .block-editor-block-navigation__item-button.is-selected:focus {
  987. color: #32373c;
  988. background: #edeff0; }
  989. .components-popover.block-editor-block-navigation__popover {
  990. z-index: 99998; }
  991. .block-editor-block-preview__container {
  992. position: relative;
  993. width: 100%;
  994. overflow: hidden; }
  995. .block-editor-block-preview__container.is-ready {
  996. overflow: visible; }
  997. .block-editor-block-preview__content {
  998. position: absolute;
  999. top: 0;
  1000. right: 0;
  1001. transform-origin: top right;
  1002. text-align: initial;
  1003. margin: 0;
  1004. overflow: visible;
  1005. min-height: auto; }
  1006. .block-editor-block-preview__content .block-editor-block-list__layout,
  1007. .block-editor-block-preview__content .block-editor-block-list__block {
  1008. padding: 0; }
  1009. .block-editor-block-preview__content .editor-block-list__block-edit [data-block] {
  1010. margin: 0; }
  1011. .block-editor-block-preview__content > div section {
  1012. height: auto; }
  1013. .block-editor-block-preview__content .block-editor-block-list__insertion-point,
  1014. .block-editor-block-preview__content .block-editor-block-drop-zone,
  1015. .block-editor-block-preview__content .reusable-block-indicator,
  1016. .block-editor-block-preview__content .block-list-appender {
  1017. display: none; }
  1018. .block-editor-block-settings-menu .components-dropdown-menu__toggle .dashicon {
  1019. transform: rotate(-90deg); }
  1020. .block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
  1021. padding: 0; }
  1022. .block-editor-block-styles {
  1023. display: flex;
  1024. flex-wrap: wrap;
  1025. justify-content: space-between; }
  1026. .block-editor-block-styles__item {
  1027. width: calc(50% - 4px);
  1028. margin: 4px 0;
  1029. flex-shrink: 0;
  1030. cursor: pointer;
  1031. overflow: hidden;
  1032. border-radius: 4px;
  1033. padding: 6px;
  1034. padding-top: calc(50% * 0.75 - 4px * 1.5); }
  1035. .block-editor-block-styles__item:focus {
  1036. color: #191e23;
  1037. box-shadow: 0 0 0 1px #fff, 0 0 0 3px #00a0d2;
  1038. outline: 2px solid transparent; }
  1039. .block-editor-block-styles__item:hover {
  1040. background: #f3f4f5;
  1041. color: #191e23; }
  1042. .block-editor-block-styles__item.is-active {
  1043. color: #191e23;
  1044. box-shadow: inset 0 0 0 2px #555d66;
  1045. outline: 2px solid transparent;
  1046. outline-offset: -2px; }
  1047. .block-editor-block-styles__item.is-active:focus {
  1048. color: #191e23;
  1049. box-shadow: 0 0 0 1px #fff, 0 0 0 3px #00a0d2, inset 0 0 0 2px #555d66;
  1050. outline: 4px solid transparent;
  1051. outline-offset: -4px; }
  1052. .block-editor-block-styles__item-preview {
  1053. outline: 1px solid transparent;
  1054. padding: 0;
  1055. border: 1px solid rgba(25, 30, 35, 0.2);
  1056. border-radius: 4px;
  1057. display: flex;
  1058. overflow: hidden;
  1059. background: #fff;
  1060. padding-top: 75%;
  1061. margin-top: -75%; }
  1062. .block-editor-block-styles__item-preview .block-editor-block-preview__container {
  1063. padding-top: 0;
  1064. margin: 0;
  1065. margin-top: -75%; }
  1066. .block-editor-block-styles__item-label {
  1067. text-align: center;
  1068. padding: 4px 2px; }
  1069. .block-editor-block-switcher {
  1070. position: relative;
  1071. height: 36px; }
  1072. .components-icon-button.block-editor-block-switcher__toggle,
  1073. .components-icon-button.block-editor-block-switcher__no-switcher-icon {
  1074. margin: 0;
  1075. display: block;
  1076. height: 36px;
  1077. padding: 3px; }
  1078. .components-icon-button.block-editor-block-switcher__no-switcher-icon {
  1079. width: 48px; }
  1080. .components-icon-button.block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
  1081. margin-left: auto;
  1082. margin-right: auto; }
  1083. .components-button.block-editor-block-switcher__no-switcher-icon:disabled {
  1084. border-radius: 0;
  1085. opacity: 0.84; }
  1086. .components-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors {
  1087. color: #555d66 !important;
  1088. background: #f3f4f5 !important; }
  1089. .components-icon-button.block-editor-block-switcher__toggle {
  1090. width: auto; }
  1091. .components-icon-button.block-editor-block-switcher__toggle:active, .components-icon-button.block-editor-block-switcher__toggle:not(:disabled):not([aria-disabled="true"]):hover, .components-icon-button.block-editor-block-switcher__toggle:not([aria-disabled="true"]):focus {
  1092. outline: none;
  1093. box-shadow: none;
  1094. background: none;
  1095. border: none; }
  1096. .components-icon-button.block-editor-block-switcher__toggle .block-editor-block-icon,
  1097. .components-icon-button.block-editor-block-switcher__toggle .block-editor-block-switcher__transform {
  1098. width: 42px;
  1099. height: 30px;
  1100. position: relative;
  1101. margin: 0 auto;
  1102. padding: 3px;
  1103. display: flex;
  1104. align-items: center;
  1105. transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
  1106. @media (prefers-reduced-motion: reduce) {
  1107. .components-icon-button.block-editor-block-switcher__toggle .block-editor-block-icon,
  1108. .components-icon-button.block-editor-block-switcher__toggle .block-editor-block-switcher__transform {
  1109. transition-duration: 0s; } }
  1110. .components-icon-button.block-editor-block-switcher__toggle .block-editor-block-icon::after {
  1111. content: "";
  1112. pointer-events: none;
  1113. display: block;
  1114. width: 0;
  1115. height: 0;
  1116. border-right: 3px solid transparent;
  1117. border-left: 3px solid transparent;
  1118. border-top: 5px solid;
  1119. margin-right: 4px;
  1120. margin-left: 2px; }
  1121. .components-icon-button.block-editor-block-switcher__toggle .block-editor-block-switcher__transform {
  1122. margin-top: 6px;
  1123. border-radius: 4px; }
  1124. .components-icon-button.block-editor-block-switcher__toggle[aria-expanded="true"] .block-editor-block-icon,
  1125. .components-icon-button.block-editor-block-switcher__toggle[aria-expanded="true"] .block-editor-block-switcher__transform,
  1126. .components-icon-button.block-editor-block-switcher__toggle:not(:disabled):hover .block-editor-block-icon,
  1127. .components-icon-button.block-editor-block-switcher__toggle:not(:disabled):hover .block-editor-block-switcher__transform,
  1128. .components-icon-button.block-editor-block-switcher__toggle:not(:disabled):focus .block-editor-block-icon,
  1129. .components-icon-button.block-editor-block-switcher__toggle:not(:disabled):focus .block-editor-block-switcher__transform {
  1130. transform: translateY(-36px); }
  1131. .components-icon-button.block-editor-block-switcher__toggle:not(:disabled):focus .block-editor-block-icon,
  1132. .components-icon-button.block-editor-block-switcher__toggle:not(:disabled):focus .block-editor-block-switcher__transform {
  1133. box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff;
  1134. outline: 2px solid transparent; }
  1135. .components-popover:not(.is-mobile).block-editor-block-switcher__popover .components-popover__content {
  1136. min-width: 300px;
  1137. max-width: calc(340px * 2);
  1138. display: flex;
  1139. background: #fff;
  1140. box-shadow: 0 3px 30px rgba(25, 30, 35, 0.1); }
  1141. .block-editor-block-switcher__popover .components-popover__content .block-editor-block-switcher__container {
  1142. min-width: 300px;
  1143. max-width: 340px;
  1144. width: 50%; }
  1145. @media (min-width: 782px) {
  1146. .block-editor-block-switcher__popover .components-popover__content {
  1147. position: relative; }
  1148. .block-editor-block-switcher__popover .components-popover__content .block-editor-block-switcher__preview {
  1149. border-right: 1px solid #e2e4e7;
  1150. box-shadow: 0 3px 30px rgba(25, 30, 35, 0.1);
  1151. background: #fff;
  1152. width: 300px;
  1153. height: auto;
  1154. position: -webkit-sticky;
  1155. position: sticky;
  1156. -ms-grid-row-align: stretch;
  1157. align-self: stretch;
  1158. top: 0;
  1159. padding: 10px; } }
  1160. .block-editor-block-switcher__popover .components-popover__content .components-panel__body {
  1161. border: 0;
  1162. position: relative;
  1163. z-index: 1; }
  1164. .block-editor-block-switcher__popover .components-popover__content .components-panel__body + .components-panel__body {
  1165. border-top: 1px solid #e2e4e7; }
  1166. .block-editor-block-switcher__popover .block-editor-block-styles {
  1167. margin: 0 -3px; }
  1168. .block-editor-block-switcher__popover .block-editor-block-types-list {
  1169. margin: 8px -8px -8px; }
  1170. .block-editor-block-switcher__preview-title {
  1171. margin-bottom: 10px;
  1172. color: #6c7781; }
  1173. .block-editor-block-toolbar {
  1174. display: flex;
  1175. flex-grow: 1;
  1176. width: 100%;
  1177. overflow: auto;
  1178. position: relative;
  1179. border-right: 1px solid #b5bcc2;
  1180. transition: border-color 0.1s linear, box-shadow 0.1s linear; }
  1181. @media (prefers-reduced-motion: reduce) {
  1182. .block-editor-block-toolbar {
  1183. transition-duration: 0s; } }
  1184. @media (min-width: 600px) {
  1185. .block-editor-block-toolbar {
  1186. overflow: inherit;
  1187. border-right: none;
  1188. box-shadow: 3px 0 0 0 #555d66; }
  1189. .is-dark-theme .block-editor-block-toolbar {
  1190. box-shadow: 3px 0 0 0 #d7dade; } }
  1191. .block-editor-block-toolbar .components-toolbar {
  1192. border: 0;
  1193. border-top: 1px solid #b5bcc2;
  1194. border-bottom: 1px solid #b5bcc2;
  1195. border-left: 1px solid #b5bcc2;
  1196. line-height: 0; }
  1197. .has-fixed-toolbar .block-editor-block-toolbar {
  1198. box-shadow: none;
  1199. border-right: 1px solid #e2e4e7; }
  1200. .has-fixed-toolbar .block-editor-block-toolbar .components-toolbar {
  1201. border-color: #e2e4e7; }
  1202. .block-editor-block-toolbar__slot {
  1203. display: inline-block; }
  1204. @supports ((position: -webkit-sticky) or (position: sticky)) {
  1205. .block-editor-block-toolbar__slot {
  1206. display: inline-flex; } }
  1207. .block-editor-block-types-list {
  1208. list-style: none;
  1209. padding: 4px;
  1210. margin-right: -4px;
  1211. margin-left: -4px;
  1212. overflow: hidden;
  1213. display: flex;
  1214. flex-wrap: wrap; }
  1215. .block-editor-button-block-appender {
  1216. display: flex;
  1217. flex-direction: column;
  1218. align-items: center;
  1219. justify-content: center;
  1220. padding: 21px;
  1221. outline: 1px dashed #8d96a0;
  1222. width: 100%;
  1223. color: #555d66;
  1224. background: rgba(237, 239, 240, 0.8); }
  1225. .block-editor-button-block-appender:hover, .block-editor-button-block-appender:focus {
  1226. outline: 1px dashed #555d66;
  1227. color: #191e23; }
  1228. .block-editor-button-block-appender:active {
  1229. outline: 1px dashed #191e23;
  1230. color: #191e23; }
  1231. .is-dark-theme .block-editor-button-block-appender {
  1232. background: rgba(50, 55, 60, 0.7);
  1233. color: #f8f9f9; }
  1234. .is-dark-theme .block-editor-button-block-appender:hover, .is-dark-theme .block-editor-button-block-appender:focus {
  1235. outline: 1px dashed #fff; }
  1236. .block-editor-color-palette-control__color-palette {
  1237. display: inline-block;
  1238. margin-top: 0.6rem; }
  1239. .block-editor-contrast-checker > .components-notice {
  1240. margin: 0; }
  1241. .block-editor-default-block-appender {
  1242. clear: both;
  1243. margin-right: auto;
  1244. margin-left: auto;
  1245. position: relative; }
  1246. .block-editor-default-block-appender[data-root-client-id=""] .block-editor-default-block-appender__content:hover {
  1247. outline: 1px solid transparent; }
  1248. .block-editor-default-block-appender textarea.block-editor-default-block-appender__content {
  1249. font-family: "Noto Serif", serif;
  1250. font-size: 16px;
  1251. border: none;
  1252. background: none;
  1253. box-shadow: none;
  1254. display: block;
  1255. cursor: text;
  1256. width: 100%;
  1257. outline: 1px solid transparent;
  1258. transition: 0.2s outline;
  1259. resize: none;
  1260. margin-top: 28px;
  1261. margin-bottom: 28px;
  1262. padding: 0 14px 0 50px;
  1263. color: rgba(14, 28, 46, 0.62); }
  1264. @media (prefers-reduced-motion: reduce) {
  1265. .block-editor-default-block-appender textarea.block-editor-default-block-appender__content {
  1266. transition-duration: 0s; } }
  1267. .is-dark-theme .block-editor-default-block-appender textarea.block-editor-default-block-appender__content {
  1268. color: rgba(255, 255, 255, 0.65); }
  1269. .block-editor-default-block-appender:hover .block-editor-inserter-with-shortcuts {
  1270. animation: edit-post__fade-in-animation 0.2s ease-out 0s;
  1271. animation-fill-mode: forwards; }
  1272. @media (prefers-reduced-motion: reduce) {
  1273. .block-editor-default-block-appender:hover .block-editor-inserter-with-shortcuts {
  1274. animation-duration: 1ms; } }
  1275. .block-editor-default-block-appender .components-drop-zone__content-icon {
  1276. display: none; }
  1277. .block-editor-default-block-appender__content {
  1278. min-height: 28px;
  1279. line-height: 1.8; }
  1280. .block-editor-block-list__empty-block-inserter,
  1281. .block-editor-default-block-appender .block-editor-inserter,
  1282. .block-editor-inserter-with-shortcuts {
  1283. position: absolute;
  1284. top: 0; }
  1285. .block-editor-block-list__empty-block-inserter .components-icon-button,
  1286. .block-editor-default-block-appender .block-editor-inserter .components-icon-button,
  1287. .block-editor-inserter-with-shortcuts .components-icon-button {
  1288. width: 28px;
  1289. height: 28px;
  1290. margin-left: 12px;
  1291. padding: 0; }
  1292. .block-editor-block-list__empty-block-inserter .block-editor-block-icon,
  1293. .block-editor-default-block-appender .block-editor-inserter .block-editor-block-icon,
  1294. .block-editor-inserter-with-shortcuts .block-editor-block-icon {
  1295. margin: auto; }
  1296. .block-editor-block-list__empty-block-inserter .components-icon-button svg,
  1297. .block-editor-default-block-appender .block-editor-inserter .components-icon-button svg,
  1298. .block-editor-inserter-with-shortcuts .components-icon-button svg {
  1299. display: block;
  1300. margin: auto; }
  1301. .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle,
  1302. .block-editor-default-block-appender .block-editor-inserter .block-editor-inserter__toggle,
  1303. .block-editor-inserter-with-shortcuts .block-editor-inserter__toggle {
  1304. margin-left: 0; }
  1305. .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover,
  1306. .block-editor-default-block-appender .block-editor-inserter .block-editor-inserter__toggle:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover,
  1307. .block-editor-inserter-with-shortcuts .block-editor-inserter__toggle:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {
  1308. box-shadow: none; }
  1309. .block-editor-block-list__empty-block-inserter,
  1310. .block-editor-default-block-appender .block-editor-inserter {
  1311. left: 8px; }
  1312. @media (min-width: 600px) {
  1313. .block-editor-block-list__empty-block-inserter,
  1314. .block-editor-default-block-appender .block-editor-inserter {
  1315. display: flex;
  1316. align-items: center;
  1317. height: 100%;
  1318. right: -44px;
  1319. left: auto; } }
  1320. .block-editor-block-list__empty-block-inserter:disabled,
  1321. .block-editor-default-block-appender .block-editor-inserter:disabled {
  1322. display: none; }
  1323. .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle,
  1324. .block-editor-default-block-appender .block-editor-inserter .block-editor-inserter__toggle {
  1325. border-radius: 50%;
  1326. width: 28px;
  1327. height: 28px;
  1328. padding: 0; }
  1329. .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle:not(:hover),
  1330. .block-editor-default-block-appender .block-editor-inserter .block-editor-inserter__toggle:not(:hover) {
  1331. color: rgba(10, 24, 41, 0.7); }
  1332. .is-dark-theme .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle:not(:hover), .is-dark-theme
  1333. .block-editor-default-block-appender .block-editor-inserter .block-editor-inserter__toggle:not(:hover) {
  1334. color: rgba(255, 255, 255, 0.75); }
  1335. .block-editor-block-list__side-inserter .block-editor-inserter-with-shortcuts,
  1336. .block-editor-default-block-appender .block-editor-inserter-with-shortcuts {
  1337. left: 14px;
  1338. display: none;
  1339. z-index: 5; }
  1340. @media (min-width: 600px) {
  1341. .block-editor-block-list__side-inserter .block-editor-inserter-with-shortcuts,
  1342. .block-editor-default-block-appender .block-editor-inserter-with-shortcuts {
  1343. display: flex;
  1344. align-items: center;
  1345. height: 100%;
  1346. left: 0; } }
  1347. .block-editor-inner-blocks.has-overlay::after {
  1348. content: "";
  1349. position: absolute;
  1350. top: -14px;
  1351. left: -14px;
  1352. bottom: -14px;
  1353. right: -14px;
  1354. z-index: 60; }
  1355. [data-align="full"] > .editor-block-list__block-edit > [data-block] .has-overlay::after {
  1356. left: 0;
  1357. right: 0; }
  1358. .block-editor-inner-blocks__template-picker .components-placeholder__instructions {
  1359. margin-bottom: 0; }
  1360. .block-editor-inner-blocks__template-picker .components-placeholder__fieldset {
  1361. flex-direction: column; }
  1362. .block-editor-inner-blocks__template-picker.has-many-options .components-placeholder__fieldset {
  1363. max-width: 90%; }
  1364. .block-editor-inner-blocks__template-picker-options.block-editor-inner-blocks__template-picker-options {
  1365. display: flex;
  1366. justify-content: center;
  1367. flex-direction: row;
  1368. flex-wrap: wrap;
  1369. width: 100%;
  1370. margin: 4px 0;
  1371. list-style: none; }
  1372. .block-editor-inner-blocks__template-picker-options.block-editor-inner-blocks__template-picker-options > li {
  1373. list-style: none;
  1374. margin: 8px;
  1375. flex-shrink: 1;
  1376. max-width: 100px; }
  1377. .block-editor-inner-blocks__template-picker-options.block-editor-inner-blocks__template-picker-options .block-editor-inner-blocks__template-picker-option {
  1378. padding: 8px; }
  1379. .block-editor-inner-blocks__template-picker-option {
  1380. width: 100%; }
  1381. .block-editor-inner-blocks__template-picker-option.components-icon-button {
  1382. justify-content: center; }
  1383. .block-editor-inner-blocks__template-picker-option.components-icon-button.is-default {
  1384. background-color: #fff; }
  1385. .block-editor-inner-blocks__template-picker-option.components-button {
  1386. height: auto;
  1387. padding: 0; }
  1388. .block-editor-inner-blocks__template-picker-option::before {
  1389. content: "";
  1390. padding-bottom: 100%; }
  1391. .block-editor-inner-blocks__template-picker-option:first-child {
  1392. margin-right: 0; }
  1393. .block-editor-inner-blocks__template-picker-option:last-child {
  1394. margin-left: 0; }
  1395. .block-editor-inserter-with-shortcuts {
  1396. display: flex;
  1397. align-items: center; }
  1398. .block-editor-inserter-with-shortcuts .components-icon-button {
  1399. border-radius: 4px; }
  1400. .block-editor-inserter-with-shortcuts .components-icon-button svg:not(.dashicon) {
  1401. height: 24px;
  1402. width: 24px; }
  1403. .block-editor-inserter-with-shortcuts__block {
  1404. margin-left: 4px;
  1405. width: 36px;
  1406. height: 36px;
  1407. padding-top: 8px;
  1408. color: rgba(10, 24, 41, 0.7); }
  1409. .is-dark-theme .block-editor-inserter-with-shortcuts__block {
  1410. color: rgba(255, 255, 255, 0.75); }
  1411. .block-editor-inserter {
  1412. display: inline-block;
  1413. background: none;
  1414. border: none;
  1415. padding: 0;
  1416. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  1417. font-size: 13px;
  1418. line-height: 1.4; }
  1419. @media (min-width: 782px) {
  1420. .block-editor-inserter {
  1421. position: relative; } }
  1422. @media (min-width: 782px) {
  1423. .block-editor-inserter__popover:not(.is-mobile) > .components-popover__content {
  1424. overflow-y: visible;
  1425. height: 432px; } }
  1426. .block-editor-inserter__toggle {
  1427. display: inline-flex;
  1428. align-items: center;
  1429. color: #555d66;
  1430. background: none;
  1431. cursor: pointer;
  1432. border: none;
  1433. outline: none;
  1434. transition: color 0.2s ease; }
  1435. @media (prefers-reduced-motion: reduce) {
  1436. .block-editor-inserter__toggle {
  1437. transition-duration: 0s; } }
  1438. .block-editor-inserter__menu {
  1439. height: 100%;
  1440. display: flex;
  1441. width: auto; }
  1442. @media (min-width: 782px) {
  1443. .block-editor-inserter__menu {
  1444. width: 400px;
  1445. position: relative; }
  1446. .block-editor-inserter__menu.has-help-panel {
  1447. width: 700px; } }
  1448. .block-editor-inserter__main-area {
  1449. width: auto;
  1450. display: flex;
  1451. flex-direction: column;
  1452. height: 100%; }
  1453. @media (min-width: 782px) {
  1454. .block-editor-inserter__main-area {
  1455. width: 400px;
  1456. position: relative; } }
  1457. .block-editor-inserter__inline-elements {
  1458. margin-top: -1px; }
  1459. .block-editor-inserter__menu.is-bottom::after {
  1460. border-bottom-color: #fff; }
  1461. .components-popover.block-editor-inserter__popover {
  1462. z-index: 99998; }
  1463. .components-popover input[type="search"].block-editor-inserter__search {
  1464. display: block;
  1465. margin: 16px;
  1466. padding: 11px 16px;
  1467. position: relative;
  1468. z-index: 1;
  1469. border-radius: 4px;
  1470. /* Fonts smaller than 16px causes mobile safari to zoom. */
  1471. font-size: 16px; }
  1472. @media (min-width: 600px) {
  1473. .components-popover input[type="search"].block-editor-inserter__search {
  1474. font-size: 13px; } }
  1475. .components-popover input[type="search"].block-editor-inserter__search:focus {
  1476. color: #191e23;
  1477. border-color: #007cba;
  1478. box-shadow: 0 0 0 1px #007cba;
  1479. outline: 2px solid transparent; }
  1480. .block-editor-inserter__results {
  1481. flex-grow: 1;
  1482. overflow: auto;
  1483. position: relative;
  1484. z-index: 1;
  1485. padding: 0 16px 16px 16px; }
  1486. .block-editor-inserter__results:focus {
  1487. outline: 1px dotted #555d66; }
  1488. @media (min-width: 782px) {
  1489. .block-editor-inserter__results {
  1490. height: 394px; } }
  1491. .block-editor-inserter__results [role="presentation"] + .components-panel__body {
  1492. border-top: none; }
  1493. .block-editor-inserter__popover .block-editor-block-types-list {
  1494. margin: 0 -8px; }
  1495. .block-editor-inserter__reusable-blocks-panel {
  1496. position: relative;
  1497. text-align: left; }
  1498. .block-editor-inserter__manage-reusable-blocks {
  1499. margin: 16px 16px 0 0; }
  1500. .block-editor-inserter__no-results {
  1501. font-style: italic;
  1502. padding: 24px;
  1503. text-align: center; }
  1504. .block-editor-inserter__child-blocks {
  1505. padding: 0 16px; }
  1506. .block-editor-inserter__parent-block-header {
  1507. display: flex;
  1508. align-items: center; }
  1509. .block-editor-inserter__parent-block-header h2 {
  1510. font-size: 13px; }
  1511. .block-editor-inserter__parent-block-header .block-editor-block-icon {
  1512. margin-left: 8px; }
  1513. .block-editor-inserter__menu-help-panel {
  1514. display: none;
  1515. border-right: 1px solid #e2e4e7;
  1516. width: 300px;
  1517. height: 100%;
  1518. padding: 20px;
  1519. overflow-y: auto; }
  1520. @media (min-width: 782px) {
  1521. .block-editor-inserter__menu-help-panel {
  1522. display: flex;
  1523. flex-direction: column; } }
  1524. .block-editor-inserter__menu-help-panel .block-editor-block-card {
  1525. padding-bottom: 20px;
  1526. margin-bottom: 20px;
  1527. border-bottom: 1px solid #e2e4e7;
  1528. animation: edit-post__fade-in-animation 0.2s ease-out 0s;
  1529. animation-fill-mode: forwards; }
  1530. @media (prefers-reduced-motion: reduce) {
  1531. .block-editor-inserter__menu-help-panel .block-editor-block-card {
  1532. animation-duration: 1ms; } }
  1533. .block-editor-inserter__menu-help-panel .block-editor-inserter__preview {
  1534. display: flex;
  1535. flex-grow: 2; }
  1536. .block-editor-inserter__menu-help-panel-no-block {
  1537. display: flex;
  1538. height: 100%;
  1539. flex-direction: column;
  1540. animation: edit-post__fade-in-animation 0.2s ease-out 0s;
  1541. animation-fill-mode: forwards; }
  1542. @media (prefers-reduced-motion: reduce) {
  1543. .block-editor-inserter__menu-help-panel-no-block {
  1544. animation-duration: 1ms; } }
  1545. .block-editor-inserter__menu-help-panel-no-block .block-editor-inserter__menu-help-panel-no-block-text {
  1546. flex-grow: 1; }
  1547. .block-editor-inserter__menu-help-panel-no-block .block-editor-inserter__menu-help-panel-no-block-text h4 {
  1548. font-size: 18px; }
  1549. .block-editor-inserter__menu-help-panel-no-block .components-notice {
  1550. margin: 0; }
  1551. .block-editor-inserter__menu-help-panel-no-block h4 {
  1552. margin-top: 0; }
  1553. .block-editor-inserter__menu-help-panel-hover-area {
  1554. flex-grow: 1;
  1555. margin-top: 20px;
  1556. padding: 20px;
  1557. border: 1px dotted #e2e4e7;
  1558. display: flex;
  1559. align-items: center;
  1560. text-align: center; }
  1561. .block-editor-inserter__menu-help-panel-title {
  1562. font-size: 18px;
  1563. font-weight: 600;
  1564. margin-bottom: 20px; }
  1565. .block-editor-inserter__preview-content {
  1566. border: 1px solid #e2e4e7;
  1567. border-radius: 4px;
  1568. min-height: 150px;
  1569. display: -ms-grid;
  1570. display: grid;
  1571. flex-grow: 2; }
  1572. .block-editor-inserter__preview-content .block-editor-block-preview__container {
  1573. margin-left: 0;
  1574. margin-right: 0;
  1575. padding: 10px; }
  1576. .block-editor-inserter__preview-content-missing {
  1577. flex: 1;
  1578. display: flex;
  1579. justify-content: center;
  1580. color: #606a73;
  1581. border: 1px solid #e2e4e7;
  1582. border-radius: 4px;
  1583. align-items: center; }
  1584. .block-editor-block-types-list__list-item {
  1585. display: block;
  1586. width: 33.33%;
  1587. padding: 0;
  1588. margin: 0 0 12px; }
  1589. .block-editor-block-types-list__item {
  1590. display: flex;
  1591. flex-direction: column;
  1592. width: 100%;
  1593. font-size: 13px;
  1594. color: #32373c;
  1595. padding: 0 4px;
  1596. align-items: stretch;
  1597. justify-content: center;
  1598. cursor: pointer;
  1599. background: transparent;
  1600. word-break: break-word;
  1601. border-radius: 4px;
  1602. border: 1px solid transparent;
  1603. transition: all 0.05s ease-in-out;
  1604. position: relative; }
  1605. @media (prefers-reduced-motion: reduce) {
  1606. .block-editor-block-types-list__item {
  1607. transition-duration: 0s; } }
  1608. .block-editor-block-types-list__item:disabled {
  1609. opacity: 0.6;
  1610. cursor: default; }
  1611. .block-editor-block-types-list__item:not(:disabled):hover::before {
  1612. content: "";
  1613. display: block;
  1614. background: #f3f4f5;
  1615. color: #191e23;
  1616. position: absolute;
  1617. z-index: -1;
  1618. border-radius: 4px;
  1619. top: 0;
  1620. left: 0;
  1621. bottom: 0;
  1622. right: 0; }
  1623. .block-editor-block-types-list__item:not(:disabled):hover .block-editor-block-types-list__item-icon,
  1624. .block-editor-block-types-list__item:not(:disabled):hover .block-editor-block-types-list__item-title {
  1625. color: inherit; }
  1626. .block-editor-block-types-list__item:not(:disabled):active, .block-editor-block-types-list__item:not(:disabled):focus {
  1627. position: relative;
  1628. color: #191e23;
  1629. box-shadow: 0 0 0 1px #fff, 0 0 0 3px #00a0d2;
  1630. outline: 2px solid transparent; }
  1631. .block-editor-block-types-list__item:not(:disabled):active .block-editor-block-types-list__item-icon,
  1632. .block-editor-block-types-list__item:not(:disabled):active .block-editor-block-types-list__item-title, .block-editor-block-types-list__item:not(:disabled):focus .block-editor-block-types-list__item-icon,
  1633. .block-editor-block-types-list__item:not(:disabled):focus .block-editor-block-types-list__item-title {
  1634. color: inherit; }
  1635. .block-editor-block-types-list__item:not(:disabled).is-active {
  1636. color: #191e23;
  1637. box-shadow: inset 0 0 0 2px #555d66;
  1638. outline: 2px solid transparent;
  1639. outline-offset: -2px; }
  1640. .block-editor-block-types-list__item:not(:disabled).is-active:focus {
  1641. color: #191e23;
  1642. box-shadow: 0 0 0 1px #fff, 0 0 0 3px #00a0d2, inset 0 0 0 2px #555d66;
  1643. outline: 4px solid transparent;
  1644. outline-offset: -4px; }
  1645. .block-editor-block-types-list__item-icon {
  1646. padding: 12px 20px;
  1647. border-radius: 4px;
  1648. color: #555d66;
  1649. transition: all 0.05s ease-in-out; }
  1650. @media (prefers-reduced-motion: reduce) {
  1651. .block-editor-block-types-list__item-icon {
  1652. transition-duration: 0s; } }
  1653. .block-editor-block-types-list__item-icon .block-editor-block-icon {
  1654. margin-right: auto;
  1655. margin-left: auto; }
  1656. .block-editor-block-types-list__item-icon svg {
  1657. transition: all 0.15s ease-out; }
  1658. @media (prefers-reduced-motion: reduce) {
  1659. .block-editor-block-types-list__item-icon svg {
  1660. transition-duration: 0s; } }
  1661. .block-editor-block-types-list__item-title {
  1662. padding: 4px 2px 8px; }
  1663. .block-editor-media-placeholder__url-input-container {
  1664. width: 100%; }
  1665. .block-editor-media-placeholder__url-input-container .block-editor-media-placeholder__button {
  1666. margin-bottom: 0; }
  1667. .block-editor-media-placeholder__url-input-form {
  1668. display: flex; }
  1669. .block-editor-media-placeholder__url-input-form input[type="url"].block-editor-media-placeholder__url-input-field {
  1670. width: 100%;
  1671. flex-grow: 1;
  1672. border: none;
  1673. border-radius: 0;
  1674. margin: 2px; }
  1675. @media (min-width: 600px) {
  1676. .block-editor-media-placeholder__url-input-form input[type="url"].block-editor-media-placeholder__url-input-field {
  1677. width: 300px; } }
  1678. .block-editor-media-placeholder__url-input-submit-button {
  1679. flex-shrink: 1; }
  1680. .block-editor-media-placeholder__button {
  1681. margin-bottom: 0.5rem; }
  1682. .block-editor-media-placeholder__button .dashicon {
  1683. vertical-align: middle;
  1684. margin-bottom: 3px; }
  1685. .block-editor-media-placeholder__button:hover {
  1686. color: #23282d; }
  1687. .block-editor-media-placeholder__cancel-button.is-link {
  1688. margin: 1em;
  1689. display: block; }
  1690. .components-form-file-upload .block-editor-media-placeholder__button {
  1691. margin-left: 4px; }
  1692. .block-editor-media-placeholder.is-appender {
  1693. min-height: 100px;
  1694. outline: 1px dashed #8d96a0; }
  1695. .block-editor-media-placeholder.is-appender:hover {
  1696. outline: 1px dashed #555d66;
  1697. cursor: pointer; }
  1698. .is-dark-theme .block-editor-media-placeholder.is-appender:hover {
  1699. outline: 1px dashed #fff; }
  1700. .block-editor-media-placeholder.is-appender .block-editor-media-placeholder__upload-button {
  1701. margin-left: 4px; }
  1702. .block-editor-media-placeholder.is-appender .block-editor-media-placeholder__upload-button.components-button:hover, .block-editor-media-placeholder.is-appender .block-editor-media-placeholder__upload-button.components-button:focus {
  1703. box-shadow: none;
  1704. border: 1px solid #555d66; }
  1705. .block-editor-multi-selection-inspector__card {
  1706. display: flex;
  1707. align-items: flex-start;
  1708. margin: -16px;
  1709. padding: 16px; }
  1710. .block-editor-multi-selection-inspector__card-content {
  1711. flex-grow: 1; }
  1712. .block-editor-multi-selection-inspector__card-title {
  1713. font-weight: 500;
  1714. margin-bottom: 5px; }
  1715. .block-editor-multi-selection-inspector__card-description {
  1716. font-size: 13px; }
  1717. .block-editor-multi-selection-inspector__card .block-editor-block-icon {
  1718. margin-right: -2px;
  1719. margin-left: 10px;
  1720. padding: 0 3px;
  1721. width: 36px;
  1722. height: 24px; }
  1723. .block-editor-panel-color-settings .component-color-indicator {
  1724. vertical-align: text-bottom; }
  1725. .block-editor-panel-color-settings__panel-title .component-color-indicator {
  1726. display: inline-block; }
  1727. .block-editor-panel-color-settings.is-opened .block-editor-panel-color-settings__panel-title .component-color-indicator {
  1728. display: none; }
  1729. .block-editor .block-editor-plain-text {
  1730. box-shadow: none;
  1731. font-family: inherit;
  1732. font-size: inherit;
  1733. color: inherit;
  1734. line-height: inherit;
  1735. border: none;
  1736. padding: 0;
  1737. margin: 0;
  1738. width: 100%; }
  1739. .block-editor-format-toolbar {
  1740. display: flex;
  1741. flex-shrink: 0; }
  1742. .block-editor-format-toolbar__selection-position {
  1743. position: absolute;
  1744. transform: translateX(50%); }
  1745. .block-editor-format-toolbar .components-dropdown-menu__toggle .components-dropdown-menu__indicator::after {
  1746. margin: 7px; }
  1747. .block-editor-rich-text {
  1748. position: relative; }
  1749. .block-editor-rich-text__editable > p:first-child {
  1750. margin-top: 0; }
  1751. .block-editor-rich-text__editable a {
  1752. color: #007fac; }
  1753. .block-editor-rich-text__editable code {
  1754. padding: 2px;
  1755. border-radius: 2px;
  1756. color: #23282d;
  1757. background: #f3f4f5;
  1758. font-family: Menlo, Consolas, monaco, monospace;
  1759. font-size: inherit; }
  1760. .is-multi-selected .block-editor-rich-text__editable code {
  1761. background: #67cffd; }
  1762. .block-editor-rich-text__editable:focus {
  1763. outline: none; }
  1764. .block-editor-rich-text__editable:focus *[data-rich-text-format-boundary] {
  1765. border-radius: 2px; }
  1766. .block-editor-rich-text__editable [data-rich-text-placeholder] {
  1767. pointer-events: none; }
  1768. .block-editor-rich-text__editable [data-rich-text-placeholder]::after {
  1769. content: attr(data-rich-text-placeholder);
  1770. opacity: 0.62; }
  1771. .block-editor-rich-text__editable.is-selected:not(.keep-placeholder-on-focus) [data-rich-text-placeholder]::after {
  1772. display: none; }
  1773. figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {
  1774. opacity: 0.8; }
  1775. .block-editor-rich-text__inline-toolbar {
  1776. display: flex;
  1777. justify-content: center;
  1778. position: absolute;
  1779. top: -40px;
  1780. line-height: 0;
  1781. right: 0;
  1782. left: 0;
  1783. z-index: 1; }
  1784. .block-editor-rich-text__inline-toolbar ul.components-toolbar {
  1785. box-shadow: 0 2px 10px rgba(25, 30, 35, 0.1), 0 0 2px rgba(25, 30, 35, 0.1); }
  1786. .block-editor-skip-to-selected-block {
  1787. position: absolute;
  1788. top: -9999em; }
  1789. .block-editor-skip-to-selected-block:focus {
  1790. height: auto;
  1791. width: auto;
  1792. display: block;
  1793. font-size: 14px;
  1794. font-weight: 600;
  1795. padding: 15px 23px 14px;
  1796. background: #f1f1f1;
  1797. color: #11a0d2;
  1798. line-height: normal;
  1799. box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  1800. text-decoration: none;
  1801. outline: none;
  1802. z-index: 100000; }
  1803. body.admin-color-sunrise .block-editor-skip-to-selected-block:focus{
  1804. color: #c8b03c; }
  1805. body.admin-color-ocean .block-editor-skip-to-selected-block:focus{
  1806. color: #a89d8a; }
  1807. body.admin-color-midnight .block-editor-skip-to-selected-block:focus{
  1808. color: #77a6b9; }
  1809. body.admin-color-ectoplasm .block-editor-skip-to-selected-block:focus{
  1810. color: #c77430; }
  1811. body.admin-color-coffee .block-editor-skip-to-selected-block:focus{
  1812. color: #9fa47b; }
  1813. body.admin-color-blue .block-editor-skip-to-selected-block:focus{
  1814. color: #d9ab59; }
  1815. body.admin-color-light .block-editor-skip-to-selected-block:focus{
  1816. color: #c75726; }
  1817. .block-editor-block-list__block .block-editor-url-input,
  1818. .components-popover .block-editor-url-input,
  1819. .block-editor-url-input {
  1820. flex-grow: 1;
  1821. position: relative;
  1822. padding: 1px; }
  1823. .block-editor-block-list__block .block-editor-url-input input[type="text"],
  1824. .components-popover .block-editor-url-input input[type="text"],
  1825. .block-editor-url-input input[type="text"] {
  1826. width: 100%;
  1827. padding: 8px;
  1828. border: none;
  1829. border-radius: 0;
  1830. margin-right: 0;
  1831. margin-left: 0;
  1832. /* Fonts smaller than 16px causes mobile safari to zoom. */
  1833. font-size: 16px; }
  1834. @media (min-width: 600px) {
  1835. .block-editor-block-list__block .block-editor-url-input input[type="text"],
  1836. .components-popover .block-editor-url-input input[type="text"],
  1837. .block-editor-url-input input[type="text"] {
  1838. width: 300px; } }
  1839. @media (min-width: 600px) {
  1840. .block-editor-block-list__block .block-editor-url-input input[type="text"],
  1841. .components-popover .block-editor-url-input input[type="text"],
  1842. .block-editor-url-input input[type="text"] {
  1843. font-size: 13px; } }
  1844. .block-editor-block-list__block .block-editor-url-input input[type="text"]::-ms-clear,
  1845. .components-popover .block-editor-url-input input[type="text"]::-ms-clear,
  1846. .block-editor-url-input input[type="text"]::-ms-clear {
  1847. display: none; }
  1848. .block-editor-block-list__block .block-editor-url-input.has-border input[type="text"],
  1849. .components-popover .block-editor-url-input.has-border input[type="text"],
  1850. .block-editor-url-input.has-border input[type="text"] {
  1851. border: 1px solid #555d66;
  1852. border-radius: 4px; }
  1853. .block-editor-block-list__block .block-editor-url-input.is-full-width,
  1854. .components-popover .block-editor-url-input.is-full-width,
  1855. .block-editor-url-input.is-full-width {
  1856. width: 100%; }
  1857. .block-editor-block-list__block .block-editor-url-input.is-full-width input[type="text"],
  1858. .components-popover .block-editor-url-input.is-full-width input[type="text"],
  1859. .block-editor-url-input.is-full-width input[type="text"] {
  1860. width: 100%; }
  1861. .block-editor-block-list__block .block-editor-url-input.is-full-width__suggestions,
  1862. .components-popover .block-editor-url-input.is-full-width__suggestions,
  1863. .block-editor-url-input.is-full-width__suggestions {
  1864. width: 100%; }
  1865. .block-editor-block-list__block .block-editor-url-input .components-spinner,
  1866. .components-popover .block-editor-url-input .components-spinner,
  1867. .block-editor-url-input .components-spinner {
  1868. position: absolute;
  1869. left: 8px;
  1870. top: 9px;
  1871. margin: 0; }
  1872. .block-editor-url-input__suggestions {
  1873. max-height: 200px;
  1874. transition: all 0.15s ease-in-out;
  1875. padding: 4px 0;
  1876. width: 302px;
  1877. overflow-y: auto; }
  1878. @media (prefers-reduced-motion: reduce) {
  1879. .block-editor-url-input__suggestions {
  1880. transition-duration: 0s; } }
  1881. .block-editor-url-input__suggestions,
  1882. .block-editor-url-input .components-spinner {
  1883. display: none; }
  1884. @media (min-width: 600px) {
  1885. .block-editor-url-input__suggestions,
  1886. .block-editor-url-input .components-spinner {
  1887. display: inherit; } }
  1888. .block-editor-url-input__suggestion {
  1889. padding: 4px 8px;
  1890. color: #6c7781;
  1891. display: block;
  1892. font-size: 13px;
  1893. cursor: pointer;
  1894. background: #fff;
  1895. width: 100%;
  1896. border: none;
  1897. text-align: right;
  1898. border: none;
  1899. box-shadow: none; }
  1900. .block-editor-url-input__suggestion:hover {
  1901. background: #e2e4e7; }
  1902. .block-editor-url-input__suggestion:focus, .block-editor-url-input__suggestion.is-selected {
  1903. background: rgb(0, 113, 158);
  1904. color: #fff;
  1905. outline: none; }
  1906. body.admin-color-sunrise .block-editor-url-input__suggestion:focus, body.admin-color-sunrise .block-editor-url-input__suggestion.is-selected{
  1907. background: rgb(178, 114, 63); }
  1908. body.admin-color-ocean .block-editor-url-input__suggestion:focus, body.admin-color-ocean .block-editor-url-input__suggestion.is-selected{
  1909. background: rgb(139, 157, 138); }
  1910. body.admin-color-midnight .block-editor-url-input__suggestion:focus, body.admin-color-midnight .block-editor-url-input__suggestion.is-selected{
  1911. background: rgb(191, 65, 57); }
  1912. body.admin-color-ectoplasm .block-editor-url-input__suggestion:focus, body.admin-color-ectoplasm .block-editor-url-input__suggestion.is-selected{
  1913. background: rgb(142, 155, 73); }
  1914. body.admin-color-coffee .block-editor-url-input__suggestion:focus, body.admin-color-coffee .block-editor-url-input__suggestion.is-selected{
  1915. background: rgb(165, 141, 119); }
  1916. body.admin-color-blue .block-editor-url-input__suggestion:focus, body.admin-color-blue .block-editor-url-input__suggestion.is-selected{
  1917. background: rgb(111, 153, 173); }
  1918. body.admin-color-light .block-editor-url-input__suggestion:focus, body.admin-color-light .block-editor-url-input__suggestion.is-selected{
  1919. background: rgb(0, 113, 158); }
  1920. .components-toolbar > .block-editor-url-input__button {
  1921. position: inherit; }
  1922. .block-editor-url-input__button .block-editor-url-input__back {
  1923. margin-left: 4px;
  1924. overflow: visible; }
  1925. .block-editor-url-input__button .block-editor-url-input__back::after {
  1926. content: "";
  1927. position: absolute;
  1928. display: block;
  1929. width: 1px;
  1930. height: 24px;
  1931. left: -1px;
  1932. background: #e2e4e7; }
  1933. .block-editor-url-input__button-modal {
  1934. box-shadow: 0 3px 30px rgba(25, 30, 35, 0.1);
  1935. border: 1px solid #e2e4e7;
  1936. background: #fff; }
  1937. .block-editor-url-input__button-modal-line {
  1938. display: flex;
  1939. flex-direction: row;
  1940. flex-grow: 1;
  1941. flex-shrink: 1;
  1942. min-width: 0;
  1943. align-items: flex-start; }
  1944. .block-editor-url-input__button-modal-line .components-button {
  1945. flex-shrink: 0;
  1946. width: 36px;
  1947. height: 36px; }
  1948. .block-editor-url-popover__additional-controls {
  1949. border-top: 1px solid #e2e4e7; }
  1950. .block-editor-url-popover__additional-controls > div[role="menu"] .components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default) > svg {
  1951. box-shadow: none; }
  1952. .block-editor-url-popover__additional-controls div[role="menu"] > .components-icon-button {
  1953. padding-right: 2px; }
  1954. .block-editor-url-popover__row {
  1955. display: flex; }
  1956. .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
  1957. flex-grow: 1; }
  1958. .block-editor-url-popover .components-icon-button {
  1959. padding: 3px; }
  1960. .block-editor-url-popover .components-icon-button > svg {
  1961. padding: 5px;
  1962. border-radius: 4px;
  1963. height: 30px;
  1964. width: 30px; }
  1965. .block-editor-url-popover .components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {
  1966. box-shadow: none; }
  1967. .block-editor-url-popover .components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover > svg {
  1968. color: #555d66;
  1969. box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff; }
  1970. .block-editor-url-popover .components-icon-button:not(:disabled):focus {
  1971. box-shadow: none; }
  1972. .block-editor-url-popover .components-icon-button:not(:disabled):focus > svg {
  1973. box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff;
  1974. outline: 2px solid transparent; }
  1975. .block-editor-url-popover__settings-toggle {
  1976. flex-shrink: 0;
  1977. border-radius: 0;
  1978. border-right: 1px solid #e2e4e7;
  1979. margin-right: 1px; }
  1980. .block-editor-url-popover__settings-toggle[aria-expanded="true"] .dashicon {
  1981. transform: rotate(-180deg); }
  1982. .block-editor-url-popover__settings {
  1983. display: block;
  1984. padding: 16px;
  1985. border-top: 1px solid #e2e4e7; }
  1986. .block-editor-url-popover__settings .components-base-control:last-child,
  1987. .block-editor-url-popover__settings .components-base-control:last-child .components-base-control__field {
  1988. margin-bottom: 0; }
  1989. .block-editor-url-popover__link-editor,
  1990. .block-editor-url-popover__link-viewer {
  1991. display: flex; }
  1992. .block-editor-url-popover__link-viewer-url {
  1993. margin: 7px;
  1994. flex-grow: 1;
  1995. flex-shrink: 1;
  1996. overflow: hidden;
  1997. text-overflow: ellipsis;
  1998. white-space: nowrap;
  1999. min-width: 150px;
  2000. max-width: 500px; }
  2001. .block-editor-url-popover__link-viewer-url.has-invalid-link {
  2002. color: #d94f4f; }
  2003. .block-editor-warning {
  2004. display: flex;
  2005. flex-direction: row;
  2006. justify-content: space-between;
  2007. flex-wrap: nowrap;
  2008. background-color: #fff;
  2009. border: 1px solid #e2e4e7;
  2010. text-align: right;
  2011. padding: 10px 14px 14px; }
  2012. .has-warning.is-multi-selected .block-editor-warning {
  2013. background-color: transparent; }
  2014. .is-selected .block-editor-warning {
  2015. border-color: rgba(66, 88, 99, 0.4); }
  2016. @media (min-width: 600px) {
  2017. .is-selected .block-editor-warning {
  2018. border-right-color: transparent; } }
  2019. .is-dark-theme .is-selected .block-editor-warning {
  2020. border-color: rgba(255, 255, 255, 0.45); }
  2021. .block-editor-warning .block-editor-warning__message {
  2022. line-height: 1.4;
  2023. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  2024. font-size: 13px;
  2025. margin: 1em 0; }
  2026. .block-editor-warning p.block-editor-warning__message.block-editor-warning__message {
  2027. min-height: auto; }
  2028. .block-editor-warning .block-editor-warning__contents {
  2029. display: flex;
  2030. flex-direction: row;
  2031. justify-content: space-between;
  2032. flex-wrap: wrap;
  2033. align-items: baseline;
  2034. width: 100%; }
  2035. .block-editor-warning .block-editor-warning__actions {
  2036. display: flex; }
  2037. .block-editor-warning .block-editor-warning__action {
  2038. margin: 0 0 0 6px; }
  2039. .block-editor-warning__secondary {
  2040. margin: 5px -4px 0 0;
  2041. height: 36px; }
  2042. .block-editor-warning__secondary .components-icon-button {
  2043. width: auto;
  2044. padding: 8px 2px; }
  2045. @media (min-width: 600px) {
  2046. .block-editor-warning__secondary {
  2047. margin-right: 4px; }
  2048. .block-editor-warning__secondary .components-icon-button {
  2049. padding: 8px 4px; } }
  2050. .block-editor-warning__secondary .components-button svg {
  2051. transform: rotate(-90deg); }
  2052. .block-editor-writing-flow {
  2053. display: flex;
  2054. flex-direction: column; }
  2055. .block-editor-writing-flow__click-redirect {
  2056. cursor: text; }
  2057. .html-anchor-control .components-external-link {
  2058. display: block;
  2059. margin-top: 8px; }