You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

300 lines
7.7 KiB

1 year ago
  1. .wp-block-image img{
  2. box-sizing:border-box;
  3. height:auto;
  4. max-width:100%;
  5. vertical-align:bottom;
  6. }
  7. .wp-block-image[style*=border-radius] img,.wp-block-image[style*=border-radius]>a{
  8. border-radius:inherit;
  9. }
  10. .wp-block-image.has-custom-border img{
  11. box-sizing:border-box;
  12. }
  13. .wp-block-image.aligncenter{
  14. text-align:center;
  15. }
  16. .wp-block-image.alignfull img,.wp-block-image.alignwide img{
  17. height:auto;
  18. width:100%;
  19. }
  20. .wp-block-image .aligncenter,.wp-block-image .alignleft,.wp-block-image .alignright,.wp-block-image.aligncenter,.wp-block-image.alignleft,.wp-block-image.alignright{
  21. display:table;
  22. }
  23. .wp-block-image .aligncenter>figcaption,.wp-block-image .alignleft>figcaption,.wp-block-image .alignright>figcaption,.wp-block-image.aligncenter>figcaption,.wp-block-image.alignleft>figcaption,.wp-block-image.alignright>figcaption{
  24. caption-side:bottom;
  25. display:table-caption;
  26. }
  27. .wp-block-image .alignleft{
  28. float:left;
  29. margin:.5em 1em .5em 0;
  30. }
  31. .wp-block-image .alignright{
  32. float:right;
  33. margin:.5em 0 .5em 1em;
  34. }
  35. .wp-block-image .aligncenter{
  36. margin-left:auto;
  37. margin-right:auto;
  38. }
  39. .wp-block-image figcaption{
  40. margin-bottom:1em;
  41. margin-top:.5em;
  42. }
  43. .wp-block-image .is-style-rounded img,.wp-block-image.is-style-circle-mask img,.wp-block-image.is-style-rounded img{
  44. border-radius:9999px;
  45. }
  46. @supports ((-webkit-mask-image:none) or (mask-image:none)) or (-webkit-mask-image:none){
  47. .wp-block-image.is-style-circle-mask img{
  48. border-radius:0;
  49. -webkit-mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
  50. mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
  51. mask-mode:alpha;
  52. -webkit-mask-position:center;
  53. mask-position:center;
  54. -webkit-mask-repeat:no-repeat;
  55. mask-repeat:no-repeat;
  56. -webkit-mask-size:contain;
  57. mask-size:contain;
  58. }
  59. }
  60. .wp-block-image :where(.has-border-color){
  61. border-style:solid;
  62. }
  63. .wp-block-image :where([style*=border-top-color]){
  64. border-top-style:solid;
  65. }
  66. .wp-block-image :where([style*=border-right-color]){
  67. border-right-style:solid;
  68. }
  69. .wp-block-image :where([style*=border-bottom-color]){
  70. border-bottom-style:solid;
  71. }
  72. .wp-block-image :where([style*=border-left-color]){
  73. border-left-style:solid;
  74. }
  75. .wp-block-image :where([style*=border-width]){
  76. border-style:solid;
  77. }
  78. .wp-block-image :where([style*=border-top-width]){
  79. border-top-style:solid;
  80. }
  81. .wp-block-image :where([style*=border-right-width]){
  82. border-right-style:solid;
  83. }
  84. .wp-block-image :where([style*=border-bottom-width]){
  85. border-bottom-style:solid;
  86. }
  87. .wp-block-image :where([style*=border-left-width]){
  88. border-left-style:solid;
  89. }
  90. .wp-block-image figure{
  91. margin:0;
  92. }
  93. .wp-lightbox-container{
  94. display:flex;
  95. flex-direction:column;
  96. position:relative;
  97. }
  98. .wp-lightbox-container img{
  99. cursor:zoom-in;
  100. }
  101. .wp-lightbox-container img:hover+button{
  102. opacity:1;
  103. }
  104. .wp-lightbox-container button{
  105. align-items:center;
  106. -webkit-backdrop-filter:blur(16px) saturate(180%);
  107. backdrop-filter:blur(16px) saturate(180%);
  108. background-color:rgba(90,90,90,.25);
  109. border:none;
  110. border-radius:4px;
  111. cursor:zoom-in;
  112. display:flex;
  113. height:20px;
  114. justify-content:center;
  115. opacity:0;
  116. padding:0;
  117. position:absolute;
  118. right:16px;
  119. text-align:center;
  120. top:16px;
  121. transition:opacity .2s ease;
  122. width:20px;
  123. z-index:100;
  124. }
  125. .wp-lightbox-container button:focus-visible{
  126. outline:3px auto rgba(90,90,90,.25);
  127. outline:3px auto -webkit-focus-ring-color;
  128. outline-offset:3px;
  129. }
  130. .wp-lightbox-container button:hover{
  131. cursor:pointer;
  132. opacity:1;
  133. }
  134. .wp-lightbox-container button:focus{
  135. opacity:1;
  136. }
  137. .wp-lightbox-container button:focus,.wp-lightbox-container button:hover,.wp-lightbox-container button:not(:hover):not(:active):not(.has-background){
  138. background-color:rgba(90,90,90,.25);
  139. border:none;
  140. }
  141. .wp-lightbox-overlay{
  142. box-sizing:border-box;
  143. cursor:zoom-out;
  144. height:100vh;
  145. left:0;
  146. overflow:hidden;
  147. position:fixed;
  148. top:0;
  149. visibility:hidden;
  150. width:100vw;
  151. z-index:100000;
  152. }
  153. .wp-lightbox-overlay .close-button{
  154. align-items:center;
  155. cursor:pointer;
  156. display:flex;
  157. justify-content:center;
  158. min-height:40px;
  159. min-width:40px;
  160. padding:0;
  161. position:absolute;
  162. right:calc(env(safe-area-inset-right) + 16px);
  163. top:calc(env(safe-area-inset-top) + 16px);
  164. z-index:5000000;
  165. }
  166. .wp-lightbox-overlay .close-button:focus,.wp-lightbox-overlay .close-button:hover,.wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background){
  167. background:none;
  168. border:none;
  169. }
  170. .wp-lightbox-overlay .lightbox-image-container{
  171. height:var(--wp--lightbox-container-height);
  172. left:50%;
  173. overflow:hidden;
  174. position:absolute;
  175. top:50%;
  176. transform:translate(-50%, -50%);
  177. transform-origin:top left;
  178. width:var(--wp--lightbox-container-width);
  179. z-index:9999999999;
  180. }
  181. .wp-lightbox-overlay .wp-block-image{
  182. align-items:center;
  183. box-sizing:border-box;
  184. display:flex;
  185. height:100%;
  186. justify-content:center;
  187. margin:0;
  188. position:relative;
  189. transform-origin:0 0;
  190. width:100%;
  191. z-index:3000000;
  192. }
  193. .wp-lightbox-overlay .wp-block-image img{
  194. height:var(--wp--lightbox-image-height);
  195. min-height:var(--wp--lightbox-image-height);
  196. min-width:var(--wp--lightbox-image-width);
  197. width:var(--wp--lightbox-image-width);
  198. }
  199. .wp-lightbox-overlay .wp-block-image figcaption{
  200. display:none;
  201. }
  202. .wp-lightbox-overlay button{
  203. background:none;
  204. border:none;
  205. }
  206. .wp-lightbox-overlay .scrim{
  207. background-color:#fff;
  208. height:100%;
  209. opacity:.9;
  210. position:absolute;
  211. width:100%;
  212. z-index:2000000;
  213. }
  214. .wp-lightbox-overlay.active{
  215. animation:turn-on-visibility .25s both;
  216. visibility:visible;
  217. }
  218. .wp-lightbox-overlay.active img{
  219. animation:turn-on-visibility .35s both;
  220. }
  221. .wp-lightbox-overlay.hideanimationenabled:not(.active){
  222. animation:turn-off-visibility .35s both;
  223. }
  224. .wp-lightbox-overlay.hideanimationenabled:not(.active) img{
  225. animation:turn-off-visibility .25s both;
  226. }
  227. @media (prefers-reduced-motion:no-preference){
  228. .wp-lightbox-overlay.zoom.active{
  229. animation:none;
  230. opacity:1;
  231. visibility:visible;
  232. }
  233. .wp-lightbox-overlay.zoom.active .lightbox-image-container{
  234. animation:lightbox-zoom-in .4s;
  235. }
  236. .wp-lightbox-overlay.zoom.active .lightbox-image-container img{
  237. animation:none;
  238. }
  239. .wp-lightbox-overlay.zoom.active .scrim{
  240. animation:turn-on-visibility .4s forwards;
  241. }
  242. .wp-lightbox-overlay.zoom.hideanimationenabled:not(.active){
  243. animation:none;
  244. }
  245. .wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .lightbox-image-container{
  246. animation:lightbox-zoom-out .4s;
  247. }
  248. .wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .lightbox-image-container img{
  249. animation:none;
  250. }
  251. .wp-lightbox-overlay.zoom.hideanimationenabled:not(.active) .scrim{
  252. animation:turn-off-visibility .4s forwards;
  253. }
  254. }
  255. @keyframes turn-on-visibility{
  256. 0%{
  257. opacity:0;
  258. }
  259. to{
  260. opacity:1;
  261. }
  262. }
  263. @keyframes turn-off-visibility{
  264. 0%{
  265. opacity:1;
  266. visibility:visible;
  267. }
  268. 99%{
  269. opacity:0;
  270. visibility:visible;
  271. }
  272. to{
  273. opacity:0;
  274. visibility:hidden;
  275. }
  276. }
  277. @keyframes lightbox-zoom-in{
  278. 0%{
  279. transform:translate(calc(-50vw + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
  280. }
  281. to{
  282. transform:translate(-50%, -50%) scale(1);
  283. }
  284. }
  285. @keyframes lightbox-zoom-out{
  286. 0%{
  287. transform:translate(-50%, -50%) scale(1);
  288. visibility:visible;
  289. }
  290. 99%{
  291. visibility:visible;
  292. }
  293. to{
  294. transform:translate(calc(-50vw + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
  295. visibility:hidden;
  296. }
  297. }