Update Lightbox UI
This commit is contained in:
Fedor Indutny
GitHub
parent
417937f2a0
commit
fa68964510
7 changed files with 161 additions and 97 deletions
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" fill="none"><path fill="#000" d="M600 300c0 165.685-134.315 300-300 300S0 465.685 0 300 134.315 0 300 0s300 134.315 300 300Z" opacity=".8"/><path fill="red" d="M310.002 295.313c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10 10 4.477 10 10Z"/><path fill="#FFBE20" d="M320 300c0 11.046-8.954 20-20 20s-20-8.954-20-20 8.954-20 20-20 20 8.954 20 20Z"/><path fill="#fff" d="M283.959 83.409v-54.47h-5.486c-1.175 5.565-5.407 8.23-9.953 8.23h-1.332v6.034h2.116c2.586 0 6.426-.94 8.15-3.057V83.41h6.505ZM326.026 83.409v-5.957h-23.277c5.878-5.721 10.502-10.424 14.421-15.361 5.565-6.662 8.229-13.167 8.229-19.593 0-9.64-5.407-14.735-14.969-14.735-9.718 0-15.596 5.487-15.596 14.656 0 1.568.156 3.057.47 4.468l7.054.862a24.213 24.213 0 0 1-.549-5.173c0-5.8 3.057-9.091 8.308-9.091 5.172 0 8.072 3.213 8.072 9.326 0 5.565-2.038 10.894-6.818 16.85-4.938 5.957-10.738 11.756-17.086 18.183v5.565h31.741ZM432.311 117.635V62.723h-5.531c-1.185 5.61-5.452 8.296-10.034 8.296h-1.344v6.084h2.134c2.607 0 6.478-.949 8.217-3.082v43.614h6.558ZM528.691 206.367v-6.004h-23.466c5.925-5.768 10.587-10.509 14.537-15.486 5.61-6.716 8.297-13.274 8.297-19.753 0-9.718-5.452-14.854-15.091-14.854-9.798 0-15.724 5.531-15.724 14.775 0 1.58.158 3.081.475 4.504l7.11.869a24.43 24.43 0 0 1-.553-5.215c0-5.847 3.082-9.165 8.375-9.165 5.215 0 8.139 3.239 8.139 9.402 0 5.61-2.055 10.982-6.874 16.987-4.978 6.005-10.825 11.852-17.225 18.331v5.609h32ZM525.901 427.653h-7.506v-36.187h-7.743l-20.148 36.74v4.74h21.491v13.432h6.4v-13.432h7.506v-5.293Zm-13.906 0h-15.249c1.422-1.739 2.528-3.714 3.95-6.242l7.98-14.933c1.501-2.924 2.45-5.057 3.319-7.822h.158c-.158 2.923-.158 4.977-.158 8.612v20.385ZM416.189 531.196c10.35 0 16.355-7.347 16.355-19.515 0-11.931-4.978-18.647-13.827-18.647-5.215 0-9.086 2.292-11.298 6.637l1.501-18.646h21.254v-5.926h-26.706l-2.291 31.051 6.479.711c.948-5.056 4.187-8.217 9.007-8.217 5.847 0 8.849 4.741 8.849 13.432 0 8.77-3.239 13.432-9.165 13.432-5.294 0-8.296-4.109-8.928-10.114l-7.032.791c.711 9.086 6.558 15.011 15.802 15.011ZM299.388 525.508c-5.531 0-9.561 2.607-11.773 7.032.158-14.064 3.556-20.938 10.351-20.938 4.898 0 7.427 3.082 8.059 9.481l7.032-1.185c-.949-9.244-6.163-13.826-15.012-13.826-11.062 0-17.225 8.138-17.225 28.838 0 20.464 5.531 28.444 16.988 28.444 9.876 0 15.881-7.19 15.881-19.278 0-11.694-5.294-18.568-14.301-18.568Zm-1.58 32.236c-5.926 0-9.64-4.74-10.114-17.066 1.501-6.005 4.741-9.639 9.956-9.639 5.688 0 9.007 4.819 9.007 13.116 0 9.007-3.319 13.589-8.849 13.589ZM174.488 527.7v-4.346c.079-15.96 5.135-31.999 15.802-45.589v-4.978h-30.577v6.163h23.466c-10.192 14.617-15.723 29.866-15.881 46.458v2.292h7.19ZM96.071 417.677c6.088-2.134 8.935-6.088 8.935-12.571 0-9.172-6.01-14.153-15.576-14.153-9.409 0-15.655 5.218-15.655 14.232 0 7.274 3.162 10.99 8.934 13.52-6.72 2.135-10.2 6.721-10.2 14.074 0 9.725 6.326 15.497 17.158 15.497 10.358 0 16.841-5.377 16.841-15.813 0-8.144-3.637-12.097-10.437-14.786Zm-6.72-21.664c5.613 0 8.934 2.926 8.934 9.093 0 6.246-1.897 8.618-7.59 10.753l-2.056-.712c-5.218-1.818-8.064-4.032-8.064-10.12 0-6.088 3.32-9.014 8.776-9.014Zm.316 46.886c-6.483 0-10.279-3.795-10.279-10.278 0-6.721 2.61-9.884 8.777-12.018l2.767.949c5.693 1.976 8.697 4.664 8.697 11.148 0 7.195-3.637 10.199-9.962 10.199ZM71.09 211.055v-54.912h-5.53c-1.186 5.609-5.453 8.296-10.035 8.296h-1.343v6.084h2.133c2.607 0 6.479-.949 8.217-3.082v43.614h6.558ZM100.778 212.24c11.456 0 17.935-7.269 17.935-28.681s-6.479-28.601-17.935-28.601c-11.457 0-17.935 7.189-17.935 28.601s6.478 28.681 17.935 28.681Zm0-5.61c-7.19 0-10.982-5.372-10.982-23.071 0-17.698 3.792-22.992 10.982-22.992 7.19 0 10.982 5.294 10.982 22.992 0 17.699-3.792 23.071-10.982 23.071ZM159.346 119.947V65.034h-5.531c-1.185 5.61-5.452 8.296-10.034 8.296h-1.343v6.084h2.133c2.607 0 6.479-.948 8.217-3.081v43.614h6.558ZM186.506 119.947V65.034h-5.531c-1.185 5.61-5.452 8.296-10.035 8.296h-1.343v6.084h2.134c2.607 0 6.478-.948 8.217-3.081v43.614h6.558ZM544.269 327.821c10.034 0 16.039-5.61 16.039-15.96 0-7.822-3.555-12.958-10.113-14.064 5.61-1.422 9.007-6.558 9.007-13.274 0-9.244-5.531-13.985-14.933-13.985-10.429 0-15.881 6.479-15.96 17.067l6.795 1.027c.079-8.612 2.844-12.405 9.007-12.405 5.057 0 8.059 2.844 8.059 8.77 0 6.558-3.081 10.272-8.849 10.272h-2.528v5.688h2.765c6.321 0 9.718 3.793 9.718 10.983 0 6.874-3.16 10.192-9.007 10.192-5.926 0-9.481-4.108-9.56-12.326l-6.953.791c.158 11.377 6.163 17.224 16.513 17.224ZM50.575 270.538c-10.034 0-15.96 7.032-15.96 18.015 0 11.535 5.689 17.777 14.696 17.777 5.136 0 9.402-2.37 11.615-6.953 0 18.014-3.24 22.913-10.193 22.913-5.214 0-7.98-3.555-8.612-9.876l-6.953 1.343c1.107 9.165 6.4 14.064 15.407 14.064 10.825 0 16.671-6.716 16.671-29.313 0-21.965-5.925-27.97-16.67-27.97Zm.158 30.261c-5.688 0-9.165-4.503-9.165-12.404s3.319-12.326 9.007-12.326c6.637 0 9.56 3.635 10.193 14.143-1.107 6.716-4.978 10.587-10.035 10.587Z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" fill="none"><path fill="#000" d="M600 300c0 165.685-134.315 300-300 300S0 465.685 0 300 134.315 0 300 0s300 134.315 300 300Z" opacity=".8"/><path fill="red" d="M310.002 295.313c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10 10 4.477 10 10Z"/><path fill="#FFBE20" d="M320 300c0 11.046-8.954 20-20 20s-20-8.954-20-20 8.954-20 20-20 20 8.954 20 20Z"/><path fill="#fff" d="M283.959 83.409v-54.47h-5.486c-1.175 5.565-5.407 8.23-9.953 8.23h-1.332v6.034h2.116c2.586 0 6.426-.94 8.15-3.057V83.41h6.505Zm42.067 0v-5.957h-23.277c5.878-5.721 10.502-10.424 14.421-15.361 5.565-6.662 8.229-13.167 8.229-19.593 0-9.64-5.407-14.735-14.969-14.735-9.718 0-15.596 5.487-15.596 14.656 0 1.568.156 3.057.47 4.468l7.054.862a24.213 24.213 0 0 1-.549-5.173c0-5.8 3.057-9.091 8.308-9.091 5.172 0 8.072 3.213 8.072 9.326 0 5.565-2.038 10.894-6.818 16.85-4.938 5.957-10.738 11.756-17.086 18.183v5.565h31.741Zm106.285 34.226V62.723h-5.531c-1.185 5.61-5.452 8.296-10.034 8.296h-1.344v6.084h2.134c2.607 0 6.478-.949 8.217-3.082v43.614h6.558Zm96.38 88.732v-6.004h-23.466c5.925-5.768 10.587-10.509 14.537-15.486 5.61-6.716 8.297-13.274 8.297-19.753 0-9.718-5.452-14.854-15.091-14.854-9.798 0-15.724 5.531-15.724 14.775 0 1.58.158 3.081.475 4.504l7.11.869a24.43 24.43 0 0 1-.553-5.215c0-5.847 3.082-9.165 8.375-9.165 5.215 0 8.139 3.239 8.139 9.402 0 5.61-2.055 10.982-6.874 16.987-4.978 6.005-10.825 11.852-17.225 18.331v5.609h32Zm-2.79 221.286h-7.506v-36.187h-7.743l-20.148 36.74v4.74h21.491v13.432h6.4v-13.432h7.506v-5.293Zm-13.906 0h-15.249c1.422-1.739 2.528-3.714 3.95-6.242l7.98-14.933c1.501-2.924 2.45-5.057 3.319-7.822h.158c-.158 2.923-.158 4.977-.158 8.612v20.385Zm-95.806 103.543c10.35 0 16.355-7.347 16.355-19.515 0-11.931-4.978-18.647-13.827-18.647-5.215 0-9.086 2.292-11.298 6.637l1.501-18.646h21.254v-5.926h-26.706l-2.291 31.051 6.479.711c.948-5.056 4.187-8.217 9.007-8.217 5.847 0 8.849 4.741 8.849 13.432 0 8.77-3.239 13.432-9.165 13.432-5.294 0-8.296-4.109-8.928-10.114l-7.032.791c.711 9.086 6.558 15.011 15.802 15.011Zm-116.801-5.688c-5.531 0-9.561 2.607-11.773 7.032.158-14.064 3.556-20.938 10.351-20.938 4.898 0 7.427 3.082 8.059 9.481l7.032-1.185c-.949-9.244-6.163-13.826-15.012-13.826-11.062 0-17.225 8.138-17.225 28.838 0 20.464 5.531 28.444 16.988 28.444 9.876 0 15.881-7.19 15.881-19.278 0-11.694-5.294-18.568-14.301-18.568Zm-1.58 32.236c-5.926 0-9.64-4.74-10.114-17.066 1.501-6.005 4.741-9.639 9.956-9.639 5.688 0 9.007 4.819 9.007 13.116 0 9.007-3.319 13.589-8.849 13.589ZM174.488 527.7v-4.346c.079-15.96 5.135-31.999 15.802-45.589v-4.978h-30.577v6.163h23.466c-10.192 14.617-15.723 29.866-15.881 46.458v2.292h7.19ZM96.071 417.677c6.088-2.134 8.935-6.088 8.935-12.571 0-9.172-6.01-14.153-15.576-14.153-9.409 0-15.655 5.218-15.655 14.232 0 7.274 3.162 10.99 8.934 13.52-6.72 2.135-10.2 6.721-10.2 14.074 0 9.725 6.326 15.497 17.158 15.497 10.358 0 16.841-5.377 16.841-15.813 0-8.144-3.637-12.097-10.437-14.786Zm-6.72-21.664c5.613 0 8.934 2.926 8.934 9.093 0 6.246-1.897 8.618-7.59 10.753l-2.056-.712c-5.218-1.818-8.064-4.032-8.064-10.12 0-6.088 3.32-9.014 8.776-9.014Zm.316 46.886c-6.483 0-10.279-3.795-10.279-10.278 0-6.721 2.61-9.884 8.777-12.018l2.767.949c5.693 1.976 8.697 4.664 8.697 11.148 0 7.195-3.637 10.199-9.962 10.199ZM71.09 211.055v-54.912h-5.53c-1.186 5.609-5.453 8.296-10.035 8.296h-1.343v6.084h2.133c2.607 0 6.479-.949 8.217-3.082v43.614h6.558Zm29.688 1.185c11.456 0 17.935-7.269 17.935-28.681s-6.479-28.601-17.935-28.601c-11.457 0-17.935 7.189-17.935 28.601s6.478 28.681 17.935 28.681Zm0-5.61c-7.19 0-10.982-5.372-10.982-23.071 0-17.698 3.792-22.992 10.982-22.992 7.19 0 10.982 5.294 10.982 22.992 0 17.699-3.792 23.071-10.982 23.071Zm58.568-86.683V65.034h-5.531c-1.185 5.61-5.452 8.296-10.034 8.296h-1.343v6.084h2.133c2.607 0 6.479-.948 8.217-3.081v43.614h6.558Zm27.16 0V65.034h-5.531c-1.185 5.61-5.452 8.296-10.035 8.296h-1.343v6.084h2.134c2.607 0 6.478-.948 8.217-3.081v43.614h6.558Zm357.763 207.874c10.034 0 16.039-5.61 16.039-15.96 0-7.822-3.555-12.958-10.113-14.064 5.61-1.422 9.007-6.558 9.007-13.274 0-9.244-5.531-13.985-14.933-13.985-10.429 0-15.881 6.479-15.96 17.067l6.795 1.027c.079-8.612 2.844-12.405 9.007-12.405 5.057 0 8.059 2.844 8.059 8.77 0 6.558-3.081 10.272-8.849 10.272h-2.528v5.688h2.765c6.321 0 9.718 3.793 9.718 10.983 0 6.874-3.16 10.192-9.007 10.192-5.926 0-9.481-4.108-9.56-12.326l-6.953.791c.158 11.377 6.163 17.224 16.513 17.224ZM50.575 270.538c-10.034 0-15.96 7.032-15.96 18.015 0 11.535 5.689 17.777 14.696 17.777 5.136 0 9.402-2.37 11.615-6.953 0 18.014-3.24 22.913-10.193 22.913-5.214 0-7.98-3.555-8.612-9.876l-6.953 1.343c1.107 9.165 6.4 14.064 15.407 14.064 10.825 0 16.671-6.716 16.671-29.313 0-21.965-5.925-27.97-16.67-27.97Zm.158 30.261c-5.688 0-9.165-4.503-9.165-12.404s3.319-12.326 9.007-12.326c6.637 0 9.56 3.635 10.193 14.143-1.107 6.716-4.978 10.587-10.035 10.587Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" fill="none"><circle cx="300" cy="300" r="300" fill="#000" opacity=".5"/><path fill="#fff" d="M291 42.001h20v64h-20zM291 493.999h20v64h-20zM421.334 71.567l17.32 10-32 55.426-17.32-10zM195.336 463.01l17.32 10-32 55.426-17.32-10zM519.434 162.34l10 17.32-55.426 32-10-17.32zM127.99 388.34l10 17.32-55.426 32-10-17.32zM529.439 420.34l-10 17.32-55.426-32 10-17.32zM137.988 194.341l-10 17.32-55.426-32 10-17.32zM438.656 518.436l-17.32 10-32-55.426 17.32-10zM212.66 126.99l-17.32 10-32-55.426 17.32-10zM42.004 309.998v-20h64v20zM494.531 309.998v-20h64v20z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" fill="none"><circle cx="300" cy="300" r="300" fill="#000" opacity=".5"/><path fill="#fff" d="M291 42.001h20v64h-20zm0 451.998h20v64h-20zM421.334 71.567l17.32 10-32 55.426-17.32-10zM195.336 463.01l17.32 10-32 55.426-17.32-10zm324.098-300.67 10 17.32-55.426 32-10-17.32zm-391.444 226 10 17.32-55.426 32-10-17.32zm401.449 32-10 17.32-55.426-32 10-17.32zM137.988 194.341l-10 17.32-55.426-32 10-17.32zm300.668 324.095-17.32 10-32-55.426 17.32-10zM212.66 126.99l-17.32 10-32-55.426 17.32-10zM42.004 309.998v-20h64v20zm452.527 0v-20h64v20z"/></svg>
|
||||
|
Before Width: | Height: | Size: 621 B After Width: | Height: | Size: 606 B |
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" fill="none"><circle cx="300" cy="300" r="300" fill="#fff" opacity=".3"/><rect width="20" height="40" x="519.434" y="162.34" fill="#fff" rx="10" transform="rotate(60 519.434 162.34)"/><rect width="20" height="40" x="107.209" y="400.339" fill="#fff" rx="10" transform="rotate(60 107.209 400.339)"/><rect width="20" height="40" x="421.344" y="71.566" fill="#fff" rx="10" transform="rotate(30 421.344 71.566)"/><rect width="20" height="40" x="183.344" y="483.794" fill="#fff" rx="10" transform="rotate(30 183.344 483.794)"/><rect width="20" height="40" x="163.34" y="81.565" fill="#fff" rx="10" transform="rotate(-30 163.34 81.565)"/><rect width="20" height="40" x="401.34" y="493.794" fill="#fff" rx="10" transform="rotate(-30 401.34 493.794)"/><rect width="20" height="40" x="72.566" y="179.66" fill="#fff" rx="10" transform="rotate(-60 72.566 179.66)"/><rect width="20" height="40" x="484.789" y="417.66" fill="#fff" rx="10" transform="rotate(-60 484.789 417.66)"/><circle cx="300.002" cy="300" r="10" fill="red"/><circle cx="300" cy="300" r="22" fill="#fff"/><path fill="#fff" d="M285.472 80.644v-54.47h-7.288c-1.489 5.486-5.486 8.151-10.424 8.151h-1.332v8.15h1.959c2.9 0 6.505-.861 8.229-2.82v40.989h8.856ZM328.605 80.644V73.12h-22.336c5.956-5.408 10.345-9.64 13.95-14.107 5.33-6.27 7.916-12.383 7.916-18.732 0-10.267-5.799-15.282-16.223-15.282s-16.772 5.72-16.772 15.126c0 1.489.157 2.9.47 4.31l9.248 1.019a28.518 28.518 0 0 1-.47-5.016c0-5.172 2.586-8.15 7.132-8.15 4.467 0 6.975 2.82 6.975 8.307 0 5.408-1.881 10.267-6.426 15.753-4.468 5.33-10.111 10.737-17.243 17.32v6.976h33.779ZM300.276 536.569c-5.452 0-9.244 2.291-11.456 6.241.158-12.878 3.16-18.409 9.086-18.409 4.266 0 6.479 2.765 7.111 8.454l9.086-1.422c-.948-9.402-6.4-14.064-16.039-14.064-11.615 0-18.252 8.138-18.252 28.76 0 20.306 6.005 28.523 18.094 28.523 10.429 0 16.829-7.427 16.829-19.674 0-11.93-5.61-18.409-14.459-18.409Zm-2.528 30.972c-5.294 0-8.533-4.425-8.928-16.039 1.501-4.978 4.424-7.901 8.849-7.901 4.977 0 7.901 4.108 7.901 11.693 0 8.217-2.924 12.247-7.822 12.247ZM553.663 329.743c10.746 0 17.146-5.846 17.146-16.197 0-7.585-3.556-12.562-10.351-13.668 5.847-1.423 9.402-6.558 9.402-13.116 0-9.402-5.925-14.301-16.118-14.301-10.982 0-17.066 6.321-17.145 17.224l9.086 1.264c.079-7.98 2.529-11.298 7.822-11.298 4.425 0 6.953 2.449 6.953 7.901 0 5.847-2.765 9.244-7.98 9.244h-2.449v6.953h2.607c5.768 0 8.77 3.239 8.77 9.718 0 6.005-2.765 9.007-7.743 9.007-5.135 0-8.217-3.713-8.217-11.298l-9.323 1.027c.158 11.615 6.558 17.54 17.54 17.54ZM45.991 272.461c-10.745 0-16.987 7.19-16.987 18.33 0 11.378 5.768 17.778 15.012 17.778 4.82 0 8.928-1.976 11.14-6.005-.158 15.881-3.002 20.069-8.928 20.069-4.503 0-7.032-3.24-7.585-8.85l-9.007 1.581c.948 9.244 6.637 14.379 16.276 14.379 11.694 0 17.857-6.715 17.857-29.154 0-22.044-6.163-28.128-17.778-28.128Zm.158 29.155c-4.977 0-8.059-4.109-8.059-11.062 0-7.269 2.923-11.14 7.98-11.14 5.926 0 8.533 3.318 9.007 13.748-1.264 5.451-4.661 8.454-8.928 8.454Z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" fill="none"><circle cx="300" cy="300" r="300" fill="#fff" opacity=".3"/><rect width="20" height="40" x="519.434" y="162.34" fill="#fff" rx="10" transform="rotate(60 519.434 162.34)"/><rect width="20" height="40" x="107.209" y="400.339" fill="#fff" rx="10" transform="rotate(60 107.209 400.339)"/><rect width="20" height="40" x="421.344" y="71.566" fill="#fff" rx="10" transform="rotate(30 421.344 71.566)"/><rect width="20" height="40" x="183.344" y="483.794" fill="#fff" rx="10" transform="rotate(30 183.344 483.794)"/><rect width="20" height="40" x="163.34" y="81.565" fill="#fff" rx="10" transform="rotate(-30 163.34 81.565)"/><rect width="20" height="40" x="401.34" y="493.794" fill="#fff" rx="10" transform="rotate(-30 401.34 493.794)"/><rect width="20" height="40" x="72.566" y="179.66" fill="#fff" rx="10" transform="rotate(-60 72.566 179.66)"/><rect width="20" height="40" x="484.789" y="417.66" fill="#fff" rx="10" transform="rotate(-60 484.789 417.66)"/><circle cx="300.002" cy="300" r="10" fill="red"/><circle cx="300" cy="300" r="22" fill="#fff"/><path fill="#fff" d="M285.472 80.644v-54.47h-7.288c-1.489 5.486-5.486 8.151-10.424 8.151h-1.332v8.15h1.959c2.9 0 6.505-.861 8.229-2.82v40.989h8.856Zm43.133 0V73.12h-22.336c5.956-5.408 10.345-9.64 13.95-14.107 5.33-6.27 7.916-12.383 7.916-18.732 0-10.267-5.799-15.282-16.223-15.282s-16.772 5.72-16.772 15.126c0 1.489.157 2.9.47 4.31l9.248 1.019a28.518 28.518 0 0 1-.47-5.016c0-5.172 2.586-8.15 7.132-8.15 4.467 0 6.975 2.82 6.975 8.307 0 5.408-1.881 10.267-6.426 15.753-4.468 5.33-10.111 10.737-17.243 17.32v6.976h33.779Zm-28.329 455.925c-5.452 0-9.244 2.291-11.456 6.241.158-12.878 3.16-18.409 9.086-18.409 4.266 0 6.479 2.765 7.111 8.454l9.086-1.422c-.948-9.402-6.4-14.064-16.039-14.064-11.615 0-18.252 8.138-18.252 28.76 0 20.306 6.005 28.523 18.094 28.523 10.429 0 16.829-7.427 16.829-19.674 0-11.93-5.61-18.409-14.459-18.409Zm-2.528 30.972c-5.294 0-8.533-4.425-8.928-16.039 1.501-4.978 4.424-7.901 8.849-7.901 4.977 0 7.901 4.108 7.901 11.693 0 8.217-2.924 12.247-7.822 12.247Zm255.915-237.798c10.746 0 17.146-5.846 17.146-16.197 0-7.585-3.556-12.562-10.351-13.668 5.847-1.423 9.402-6.558 9.402-13.116 0-9.402-5.925-14.301-16.118-14.301-10.982 0-17.066 6.321-17.145 17.224l9.086 1.264c.079-7.98 2.529-11.298 7.822-11.298 4.425 0 6.953 2.449 6.953 7.901 0 5.847-2.765 9.244-7.98 9.244h-2.449v6.953h2.607c5.768 0 8.77 3.239 8.77 9.718 0 6.005-2.765 9.007-7.743 9.007-5.135 0-8.217-3.713-8.217-11.298l-9.323 1.027c.158 11.615 6.558 17.54 17.54 17.54ZM45.991 272.461c-10.745 0-16.987 7.19-16.987 18.33 0 11.378 5.768 17.778 15.012 17.778 4.82 0 8.928-1.976 11.14-6.005-.158 15.881-3.002 20.069-8.928 20.069-4.503 0-7.032-3.24-7.585-8.85l-9.007 1.581c.948 9.244 6.637 14.379 16.276 14.379 11.694 0 17.857-6.715 17.857-29.154 0-22.044-6.163-28.128-17.778-28.128Zm.158 29.155c-4.977 0-8.059-4.109-8.059-11.062 0-7.269 2.923-11.14 7.98-11.14 5.926 0 8.533 3.318 9.007 13.748-1.264 5.451-4.661 8.454-8.928 8.454Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 3 KiB After Width: | Height: | Size: 3 KiB |
3
images/icons/v2/download-outline-24.svg
Normal file
3
images/icons/v2/download-outline-24.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.99997 20.5H20V22H3.99997V20.5ZM20.65 10.35L12 19L3.34997 10.35C3.28087 10.2795 3.23418 10.1901 3.21579 10.0931C3.19739 9.99616 3.20812 9.89589 3.24662 9.80499C3.28512 9.7141 3.34967 9.63663 3.43212 9.58235C3.51458 9.52807 3.61125 9.49942 3.70997 9.5H7.99997V3H16V9.5H20.29C21 9.5 21.12 9.88 20.65 10.35ZM17.88 11H14.5V4.5H9.49997V11H6.11997L12 16.88L17.88 11Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 491 B |
3
images/icons/v2/forward-outline-24.svg
Normal file
3
images/icons/v2/forward-outline-24.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.521 5.621V9.321L13.212 9.49C11.1192 9.67161 9.12305 10.4522 7.46225 11.7385C5.80145 13.0247 4.54633 14.7622 3.847 16.743C3.687 17.149 3.047 18.499 3.047 18.499C3.51574 18.0411 4.00737 17.6072 4.52 17.199C7.03859 15.5971 9.92588 14.6679 12.906 14.5L14.521 14.376V18.376L20.9 12L14.521 5.621ZM13.384 2.584C13.5759 2.60783 13.7513 2.70449 13.874 2.854L22.667 11.646C22.7136 11.6924 22.7505 11.7476 22.7757 11.8084C22.8009 11.8691 22.8139 11.9342 22.8139 12C22.8139 12.0658 22.8009 12.1309 22.7757 12.1916C22.7505 12.2524 22.7136 12.3076 22.667 12.354L13.874 21.146C13.7513 21.2955 13.5759 21.3922 13.384 21.416C13.165 21.416 13.021 21.199 13.021 20.793V16C10.9221 16.0736 8.86323 16.596 6.98307 17.5319C5.10291 18.4679 3.44503 19.7957 2.121 21.426C1.839 21.781 1.607 21.955 1.444 21.955C1.23 21.955 1.139 21.655 1.222 21.055C2.2 14.051 5.757 8.934 13.021 8V3.207C13.021 2.801 13.165 2.584 13.384 2.584Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
.Lightbox {
|
||||
&__container {
|
||||
background-color: $color-black-alpha-90;
|
||||
background-color: $color-gray-90;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
|
|
@ -47,29 +47,36 @@
|
|||
position: absolute;
|
||||
|
||||
&--container {
|
||||
height: 64px;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 10px;
|
||||
height: 44px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
&__thumbnail {
|
||||
@include button-reset;
|
||||
border-radius: 4px;
|
||||
height: 64px;
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
height: 44px;
|
||||
margin-right: 8px;
|
||||
overflow: hidden;
|
||||
width: 64px;
|
||||
width: 44px;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&--selected {
|
||||
box-shadow: 0px 0px 0px 2px $color-ultramarine;
|
||||
&--selected::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
box-shadow: inset 0px 0px 0px 2px $color-white;
|
||||
}
|
||||
|
||||
&--unavailable {
|
||||
|
|
@ -84,7 +91,6 @@
|
|||
display: inline-flex;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
// Using this so that the zoom cleanly goes over the footer
|
||||
|
|
@ -182,18 +188,23 @@
|
|||
|
||||
&__nav-next,
|
||||
&__nav-prev {
|
||||
bottom: 50%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
|
||||
// We need this so that the buttons stack above the container
|
||||
z-index: $z-index-above-base;
|
||||
}
|
||||
|
||||
&__nav-next {
|
||||
right: 21px;
|
||||
right: 0;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
&__nav-prev {
|
||||
left: 21px;
|
||||
left: 0;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
&__header {
|
||||
|
|
@ -201,7 +212,7 @@
|
|||
display: flex;
|
||||
height: 56px;
|
||||
justify-content: space-between;
|
||||
margin-top: 24px;
|
||||
margin-top: calc(12px + var(--title-bar-drag-area-height));
|
||||
min-height: 56px;
|
||||
opacity: 1;
|
||||
padding: 0 16px;
|
||||
|
|
@ -212,7 +223,7 @@
|
|||
}
|
||||
|
||||
&--avatar {
|
||||
margin-right: 12px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&--name {
|
||||
|
|
@ -228,7 +239,7 @@
|
|||
|
||||
&__footer {
|
||||
opacity: 1;
|
||||
padding: 0 16px;
|
||||
padding: 20px 16px;
|
||||
transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
|
||||
}
|
||||
|
||||
|
|
@ -239,12 +250,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
&__controls {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
&__button {
|
||||
@include button-reset;
|
||||
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
margin-left: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
|
||||
|
|
@ -275,7 +290,7 @@
|
|||
&::before {
|
||||
transform: scaleX(-1);
|
||||
@include color-svg(
|
||||
'../images/icons/v2/reply-solid-24.svg',
|
||||
'../images/icons/v2/forward-outline-24.svg',
|
||||
$color-gray-15
|
||||
);
|
||||
}
|
||||
|
|
@ -284,7 +299,7 @@
|
|||
&--save {
|
||||
&::before {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/save-solid-24.svg',
|
||||
'../images/icons/v2/download-outline-24.svg',
|
||||
$color-gray-15
|
||||
);
|
||||
}
|
||||
|
|
@ -296,22 +311,56 @@
|
|||
}
|
||||
}
|
||||
|
||||
&--previous,
|
||||
&--next {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease-in-out;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
outline: none;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@include button-focus-outline;
|
||||
}
|
||||
|
||||
&--previous {
|
||||
margin-left: 0;
|
||||
justify-content: start;
|
||||
&::before {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/chevron-left-24.svg',
|
||||
$color-gray-15
|
||||
'../images/icons/v2/arrow-left-32.svg',
|
||||
$color-gray-05
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&--next {
|
||||
margin-left: 0;
|
||||
justify-content: end;
|
||||
|
||||
&::before {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/chevron-right-24.svg',
|
||||
$color-gray-15
|
||||
'../images/icons/v2/arrow-right-32.svg',
|
||||
$color-gray-05
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -424,6 +424,7 @@ export function Lightbox({
|
|||
const caption = attachment?.caption;
|
||||
|
||||
let content: JSX.Element;
|
||||
let hasFooter = true;
|
||||
if (!contentType) {
|
||||
content = <>{children}</>;
|
||||
} else {
|
||||
|
|
@ -490,6 +491,8 @@ export function Lightbox({
|
|||
<source src={objectURL} />
|
||||
</video>
|
||||
);
|
||||
|
||||
hasFooter = false;
|
||||
} else if (isUnsupportedImageType || isUnsupportedVideoType) {
|
||||
content = (
|
||||
<button
|
||||
|
|
@ -600,78 +603,84 @@ export function Lightbox({
|
|||
}}
|
||||
>
|
||||
{content}
|
||||
</animated.div>
|
||||
{hasPrevious && (
|
||||
<div className="Lightbox__nav-prev">
|
||||
<button
|
||||
aria-label={i18n('previous')}
|
||||
className="Lightbox__button Lightbox__button--previous"
|
||||
onClick={onPrevious}
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{hasNext && (
|
||||
<div className="Lightbox__nav-next">
|
||||
<button
|
||||
aria-label={i18n('next')}
|
||||
className="Lightbox__button Lightbox__button--next"
|
||||
onClick={onNext}
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="Lightbox__footer">
|
||||
{isViewOnce && videoTime ? (
|
||||
<div className="Lightbox__timestamp">
|
||||
{formatDuration(videoTime)}
|
||||
</div>
|
||||
) : null}
|
||||
{caption ? (
|
||||
<div className="Lightbox__caption">{caption}</div>
|
||||
) : null}
|
||||
{media.length > 1 && (
|
||||
<div className="Lightbox__thumbnails--container">
|
||||
<div
|
||||
className="Lightbox__thumbnails"
|
||||
style={{
|
||||
marginLeft:
|
||||
0 - (selectedIndex * 64 + selectedIndex * 8 + 32),
|
||||
}}
|
||||
>
|
||||
{media.map((item, index) => (
|
||||
<button
|
||||
className={classNames({
|
||||
Lightbox__thumbnail: true,
|
||||
'Lightbox__thumbnail--selected':
|
||||
index === selectedIndex,
|
||||
})}
|
||||
key={item.thumbnailObjectUrl}
|
||||
type="button"
|
||||
onClick={(
|
||||
event: React.MouseEvent<HTMLButtonElement, MouseEvent>
|
||||
) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
setSelectedIndex(index);
|
||||
}}
|
||||
>
|
||||
{item.thumbnailObjectUrl ? (
|
||||
<img
|
||||
alt={i18n('lightboxImageAlt')}
|
||||
src={item.thumbnailObjectUrl}
|
||||
/>
|
||||
) : (
|
||||
<div className="Lightbox__thumbnail--unavailable" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
{hasPrevious && (
|
||||
<div className="Lightbox__nav-prev">
|
||||
<button
|
||||
aria-label={i18n('previous')}
|
||||
className="Lightbox__button Lightbox__button--previous"
|
||||
onClick={onPrevious}
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
{hasNext && (
|
||||
<div className="Lightbox__nav-next">
|
||||
<button
|
||||
aria-label={i18n('next')}
|
||||
className="Lightbox__button Lightbox__button--next"
|
||||
onClick={onNext}
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</animated.div>
|
||||
</div>
|
||||
{hasFooter ? (
|
||||
<div className="Lightbox__footer">
|
||||
{isViewOnce && videoTime ? (
|
||||
<div className="Lightbox__timestamp">
|
||||
{formatDuration(videoTime)}
|
||||
</div>
|
||||
) : null}
|
||||
{caption ? (
|
||||
<div className="Lightbox__caption">{caption}</div>
|
||||
) : null}
|
||||
{media.length > 1 && (
|
||||
<div className="Lightbox__thumbnails--container">
|
||||
<div
|
||||
className="Lightbox__thumbnails"
|
||||
style={{
|
||||
marginLeft:
|
||||
0 - (selectedIndex * 44 + selectedIndex * 8 + 22),
|
||||
}}
|
||||
>
|
||||
{media.map((item, index) => (
|
||||
<button
|
||||
className={classNames({
|
||||
Lightbox__thumbnail: true,
|
||||
'Lightbox__thumbnail--selected':
|
||||
index === selectedIndex,
|
||||
})}
|
||||
key={item.thumbnailObjectUrl}
|
||||
type="button"
|
||||
onClick={(
|
||||
event: React.MouseEvent<
|
||||
HTMLButtonElement,
|
||||
MouseEvent
|
||||
>
|
||||
) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
setSelectedIndex(index);
|
||||
}}
|
||||
>
|
||||
{item.thumbnailObjectUrl ? (
|
||||
<img
|
||||
alt={i18n('lightboxImageAlt')}
|
||||
src={item.thumbnailObjectUrl}
|
||||
/>
|
||||
) : (
|
||||
<div className="Lightbox__thumbnail--unavailable" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>,
|
||||
root
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue