style.css 96 KB

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