| | <script setup lang="ts"> |
| | import PluginImageUploader from "@plugin/components/PluginImageUploader.vue"; |
| | import PluginSnackbar from '@plugin/components/PluginSnackbar.vue'; |
| | import PluginSearchRedirectButton from "@plugin/components/PluginSearchRedirectButton.vue"; |
| | import {computed, provide, ref} from "vue"; |
| | import axios from "axios"; |
| | import PluginResultCard from "@/components/PluginResultCard.vue"; |
| |
|
| | const { utmMedium, utmCampaign } = defineProps<{ |
| | utmMedium: string, |
| | utmCampaign: string, |
| | }>(); |
| |
|
| | const shouldShowRedirectButton = ref(false); |
| | const redirectButtonLink = ref(''); |
| | const response = ref(null) |
| |
|
| | const hostAddress = computed(() => window.huggingface?.variables?.HOST_ADDRESS || import.meta.env.VITE_SERVER_ADDRESS) |
| | const searchResults = computed(() => response.value?.data?.searchResults) |
| |
|
| | provide('hostAddress', window.huggingface?.variables?.HOST_ADDRESS || import.meta.env.VITE_SERVER_ADDRESS); |
| | provide('utmMedium', utmMedium); |
| | provide('utmCampaign', utmCampaign); |
| |
|
| | const handleUpload = async (id: string) => { |
| | shouldShowRedirectButton.value = true; |
| | redirectButtonLink.value = getRedirectButtonLink(id); |
| |
|
| | const res = await fetchResults(id); |
| | response.value = res; |
| | } |
| |
|
| | const resetState = () => { |
| | shouldShowRedirectButton.value = false; |
| | redirectButtonLink.value = ''; |
| | response.value = null; |
| | } |
| |
|
| | const getRedirectButtonLink = (searchId: string) => { |
| | return `${hostAddress.value}/en/results/${searchId}?utm_source=referral&utm_medium=${utmMedium}&utm_campaign=${utmCampaign}` |
| | } |
| |
|
| | const fetchResults = async (searchId: string) => { |
| | return new Promise(async (resolve, _) => { |
| | try { |
| | const response = await axios.post(`${hostAddress.value}/api/hugging-search`, { |
| | image: { |
| | id: searchId, |
| | }, |
| | domain: '', |
| | text: '', |
| | page: 0, |
| | type: '', |
| | sort: '', |
| | seed: 0, |
| | facial_search_consent: 1, |
| | effects: { |
| | rotation: 0, |
| | }, |
| | selection: { |
| | top: 0, |
| | left: 0, |
| | right: 1, |
| | bottom: 1, |
| | }, |
| | }); |
| | resolve({ |
| | ok: true, |
| | status: response.status, |
| | data: formatResponse(response.data), |
| | }); |
| |
|
| |
|
| | } catch (error: any) { |
| | console.log(error) |
| |
|
| | resolve({ |
| | ok: false, |
| | status: error?.response?.status ?? 500, |
| | data: [], |
| | }); |
| | } |
| | }); |
| | } |
| |
|
| | const formatResponse = (data) => { |
| | const { results } = data; |
| |
|
| | const searchResults = results.map(result => { |
| | return Object.assign({}, { |
| | sources: getSources(result), |
| | type: result.type, |
| | category: result.category, |
| | thumbnail: result.proxyUrl, |
| | urlList: result.urlList, |
| | resultsCount: result.urlList.length, |
| | debug: result.debug, |
| | width: result.width, |
| | height: result.height, |
| | hash: result.hash, |
| | distance: result.distance, |
| | seeMore: result.seeMore |
| | }); |
| |
|
| | }); |
| |
|
| | return { searchResults }; |
| | } |
| |
|
| | const getSources = (data) => { |
| | return data.urlList.map( |
| | ({sourceUrl, imageUrl, lang, title}) => ({ |
| | sourceUrl, |
| | imageUrl, |
| | domain: (() => { |
| | try { |
| | return new URL(sourceUrl).origin |
| | } catch (e) { |
| | return 'http://' |
| | } |
| | })(), |
| | language: lang, |
| | title, |
| | }) |
| | ); |
| | } |
| |
|
| | const redirectToResults = () => { |
| | window.open(redirectButtonLink.value, '_blank'); |
| |
|
| | resetState() |
| | } |
| |
|
| | </script> |
| |
|
| | <template> |
| | <div class="outer-container"> |
| | <div class="plugin-container"> |
| | <div class="plugin-header"> |
| | <h1 class="big-header">Try <span>lenso.ai</span> Reverse Image Search</h1> |
| | <h1 class="mobile-header">Try <span>lenso.ai</span> <br> Reverse Image Search</h1> |
| | <h3 class="small-header">Find faces, similar images, locations and more!</h3> |
| | </div> |
| | |
| | <main> |
| | <div class="image-uploader-container"> |
| | <template v-if="shouldShowRedirectButton"> |
| | <div class="grid"> |
| | <PluginResultCard |
| | v-for="(result, i) in searchResults" |
| | :key="i" |
| | :sources="result.sources" |
| | :thumbnail="result.thumbnail" |
| | :data="result" |
| | @click="redirectToResults" |
| | /> |
| | </div> |
| | <PluginSearchRedirectButton :link="redirectButtonLink" @redirect-click="resetState" /> |
| | </template> |
| | <PluginImageUploader |
| | v-else |
| | enable-paste-listener |
| | :window-drop-area="true" |
| | @upload="handleUpload" |
| | /> |
| | </div> |
| | </main> |
| | |
| | <div class="plugin-footer"> |
| | <h3>Powered by <a :href="hostAddress"> |
| | |
| | <svg class="app-svg-icon" width="300" height="65" viewBox="0 0 300 65" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| | <g clip-path="url(#clip0_2148_3183)"> |
| | <g clip-path="url(#clip1_2148_3183)"> |
| | <mask id="mask0_2148_3183" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="3" width="65" height="59"> |
| | <path d="M64.6412 3.59119H0V61.0501H64.6412V3.59119Z" fill="white"/> |
| | </mask> |
| | <g mask="url(#mask0_2148_3183)"> |
| | <path d="M26.3529 6.90416C28.1115 3.83353 32.0065 2.78146 35.0526 4.55429C38.0986 6.32712 39.1423 10.2535 37.3836 13.3241L11.9093 57.8031C10.1506 60.8737 6.25565 61.9258 3.2096 60.153C0.163553 58.3801 -0.880101 54.4537 0.878538 51.3831L26.3529 6.90416Z" fill="#140EA8"/> |
| | <path fill-rule="evenodd" clip-rule="evenodd" d="M49.2588 25.7284C48.0253 23.5747 45.7828 22.3745 43.4807 22.3842C41.1801 22.3759 38.9394 23.576 37.7067 25.7284L23.2501 50.97C21.4185 54.168 22.5055 58.2573 25.6779 60.1037C28.8502 61.9501 32.9068 60.8544 34.7384 57.6563C35.8565 55.7041 37.9228 54.5015 40.1589 54.5015H46.8066C49.0428 54.5015 51.109 55.7041 52.2271 57.6563C54.0587 60.8543 58.1152 61.9501 61.2877 60.1037C64.4597 58.2573 65.5468 54.168 63.7152 50.97L49.2588 25.7284Z" fill="#A1A6F3"/> |
| | <path d="M37.7296 25.6884C39.5612 22.4904 43.6177 21.3947 46.7901 23.2411C49.9625 25.0875 51.0495 29.1767 49.2179 32.3747L34.7384 57.6563C32.9068 60.8543 28.8503 61.95 25.6779 60.1037C22.5055 58.2573 21.4185 54.168 23.2501 50.97L37.7296 25.6884Z" fill="#5A66E9"/> |
| | </g> |
| | </g> |
| | </g> |
| | <path d="M294.513 55.0453C291.958 55.0453 289.887 52.9744 289.887 50.4199V29.1601C289.887 26.6055 291.958 24.5347 294.513 24.5347V24.5347C297.067 24.5347 299.138 26.6055 299.138 29.1601V50.4199C299.138 52.9745 297.067 55.0453 294.513 55.0453V55.0453Z" fill="#1C1E25"/> |
| | <path d="M277.539 55.0454C275.08 55.0454 273.086 53.0517 273.086 50.5924V36.3138C273.086 34.7433 272.645 33.5941 271.764 32.8663C270.922 32.1002 269.734 31.7171 268.202 31.7171C266.708 31.7171 265.367 32.0044 264.18 32.579C264.07 32.6302 263.961 32.6847 263.852 32.7425C261.96 33.746 259.544 34.017 258.006 32.5271C256.531 31.0983 256.483 28.7077 258.156 27.5168C259.248 26.7391 260.414 26.0707 261.652 25.5116C264.027 24.439 266.612 23.9027 269.409 23.9027C271.975 23.9027 274.197 24.2858 276.074 25.0519C277.951 25.818 279.406 26.9863 280.441 28.5569C281.475 30.1274 281.992 32.1193 281.992 34.5326V50.5924C281.992 53.0517 279.998 55.0454 277.539 55.0454ZM265.157 55.62C263.241 55.62 261.498 55.237 259.928 54.4708C258.396 53.7047 257.17 52.6513 256.25 51.3106C255.369 49.9316 254.929 48.3227 254.929 46.4841C254.929 44.9135 255.216 43.5345 255.791 42.347C256.365 41.1595 257.208 40.1827 258.319 39.4166C259.468 38.6122 260.885 38.0184 262.571 37.6354C264.295 37.214 266.287 37.0033 268.547 37.0033H274.626C276.33 37.0033 277.667 38.4651 277.516 40.1626C277.383 41.6594 276.129 42.8067 274.626 42.8067H268.776C267.972 42.8067 267.263 42.8833 266.651 43.0365C266.038 43.1514 265.52 43.3621 265.099 43.6686C264.678 43.9367 264.352 44.2623 264.122 44.6454C263.931 45.0284 263.835 45.4881 263.835 46.0244C263.835 46.599 263.988 47.0969 264.295 47.5183C264.601 47.9397 265.003 48.2653 265.501 48.4951C266.038 48.725 266.65 48.8399 267.34 48.8399C268.336 48.8399 269.274 48.6866 270.155 48.3802C271.075 48.0354 271.879 47.5566 272.569 46.9437C273.391 46.2512 274.901 46.383 275.291 47.385L275.604 48.191C275.791 48.672 275.747 49.2163 275.452 49.6402C274.741 50.6642 273.914 51.5848 272.971 52.4023C271.86 53.3983 270.634 54.1835 269.294 54.7581C267.991 55.3327 266.612 55.62 265.157 55.62Z" fill="#1C1E25"/> |
| | <path d="M219.678 55.62C216.536 55.62 213.721 54.9497 211.231 53.609C208.741 52.2299 206.788 50.3529 205.37 47.978C203.953 45.5647 203.244 42.845 203.244 39.8188C203.244 36.716 203.953 33.9772 205.37 31.6022C206.788 29.1889 208.741 27.3119 211.231 25.9712C213.721 24.5922 216.536 23.9027 219.678 23.9027C222.857 23.9027 225.672 24.5922 228.124 25.9712C230.614 27.3119 232.568 29.1889 233.985 31.6022C235.402 33.9772 236.111 36.716 236.111 39.8188C236.111 42.845 235.402 45.5647 233.985 47.978C232.568 50.3529 230.614 52.2299 228.124 53.609C225.672 54.9497 222.857 55.62 219.678 55.62ZM219.678 47.6907C221.057 47.6907 222.263 47.3459 223.297 46.6564C224.37 45.9669 225.213 45.0284 225.826 43.8409C226.439 42.6535 226.726 41.3128 226.688 39.8188C226.726 38.2483 226.439 36.8693 225.826 35.6818C225.213 34.456 224.37 33.5175 223.297 32.8663C222.263 32.1768 221.057 31.832 219.678 31.832C218.337 31.832 217.13 32.1768 216.058 32.8663C214.985 33.5558 214.142 34.4943 213.529 35.6818C212.917 36.8693 212.61 38.2483 212.61 39.8188C212.61 41.3128 212.917 42.6535 213.529 43.8409C214.142 45.0284 214.985 45.9669 216.058 46.6564C217.13 47.3459 218.337 47.6907 219.678 47.6907Z" fill="#1C1E25"/> |
| | <path d="M187.207 55.62C184.295 55.62 181.691 55.1603 179.392 54.241C178.428 53.839 177.544 53.3764 176.741 52.8529C174.964 51.6939 175.172 49.2228 176.783 47.8418C178.32 46.5245 180.585 46.697 182.38 47.6322C182.752 47.8262 183.136 47.9989 183.529 48.1504C185.023 48.6866 186.441 48.9548 187.781 48.9548C188.279 48.9548 188.72 48.8973 189.103 48.7824C189.486 48.6675 189.811 48.5143 190.08 48.3227C190.386 48.0929 190.616 47.8439 190.769 47.5758C190.922 47.2693 190.999 46.9246 190.999 46.5415C190.999 45.7754 190.673 45.2008 190.022 44.8177C189.716 44.6262 189.16 44.3964 188.356 44.1282C187.551 43.8218 186.517 43.5153 185.253 43.2089C183.453 42.7492 181.882 42.1938 180.541 41.5426C179.239 40.8914 178.166 40.1444 177.324 39.3017C176.558 38.5356 175.964 37.6545 175.543 36.6586C175.159 35.6626 174.968 34.5518 174.968 33.326C174.968 31.449 175.523 29.8018 176.634 28.3845C177.783 26.9672 179.277 25.8755 181.116 25.1093C182.955 24.3049 184.947 23.9027 187.092 23.9027C188.777 23.9027 190.367 24.0942 191.861 24.4773C193.393 24.8604 194.81 25.3966 196.113 26.0861C196.358 26.2122 196.598 26.3427 196.833 26.4776C198.531 27.4539 198.628 29.7273 197.322 31.1872L196.713 31.8679C195.669 33.0342 193.855 33.0618 192.493 32.2917C191.612 31.7554 190.731 31.3341 189.85 31.0276C188.969 30.6829 188.145 30.5105 187.379 30.5105C186.804 30.5105 186.287 30.5679 185.828 30.6829C185.406 30.7595 185.042 30.9127 184.736 31.1425C184.468 31.3341 184.257 31.5831 184.104 31.8895C183.951 32.1576 183.874 32.4641 183.874 32.8088C183.874 33.2302 183.97 33.6133 184.161 33.958C184.391 34.2645 184.698 34.5518 185.081 34.8199C185.425 35.0114 186.019 35.2604 186.862 35.5669C187.743 35.8733 188.892 36.2181 190.309 36.6011C192.11 37.0991 193.642 37.6737 194.906 38.3249C196.209 38.9378 197.243 39.6656 198.009 40.5083C198.66 41.1595 199.12 41.9256 199.388 42.8067C199.694 43.6494 199.848 44.5688 199.848 45.5647C199.848 47.5183 199.292 49.2612 198.181 50.7935C197.109 52.2874 195.615 53.4749 193.7 54.3559C191.823 55.1987 189.658 55.62 187.207 55.62Z" fill="#1C1E25"/> |
| | <path d="M142.289 55.0454C141.242 55.0454 140.393 54.1965 140.393 53.1493V29.0524C140.393 26.5574 142.415 24.5348 144.91 24.5348H145.702C147.656 24.5348 149.269 26.0608 149.377 28.0112L149.498 30.1958C149.516 30.5191 149.32 30.816 149.016 30.9267C148.447 31.1337 147.907 30.6061 148.178 30.0642C148.602 29.2163 149.167 28.4266 149.873 27.695C150.984 26.5458 152.306 25.6265 153.838 24.937C155.37 24.2475 156.979 23.9027 158.665 23.9027C160.963 23.9027 162.897 24.3815 164.468 25.3392C166.039 26.2585 167.207 27.6567 167.973 29.5337C168.777 31.3724 169.18 33.6516 169.18 36.3713V50.42C169.18 52.9745 167.109 55.0454 164.554 55.0454C162 55.0454 159.929 52.9745 159.929 50.42V37.0608C159.929 35.835 159.756 34.8199 159.412 34.0155C159.067 33.211 158.55 32.6173 157.86 32.2342C157.171 31.8512 156.309 31.6788 155.275 31.7171C154.47 31.7171 153.723 31.8512 153.034 32.1193C152.344 32.3492 151.731 32.7131 151.195 33.2111C150.697 33.6707 150.314 34.207 150.046 34.8199C149.778 35.4328 149.644 36.1223 149.644 36.8884V50.3913C149.644 52.9617 147.56 55.0454 144.989 55.0454C143.993 55.0454 143.093 55.0454 142.289 55.0454Z" fill="#1C1E25"/> |
| | <path d="M121.206 55.62C117.835 55.62 114.886 54.9497 112.358 53.609C109.868 52.2682 107.933 50.4296 106.554 48.0929C105.214 45.7179 104.543 43.0174 104.543 39.9912C104.543 37.6162 104.926 35.4519 105.692 33.4983C106.459 31.5064 107.531 29.8018 108.91 28.3845C110.327 26.9672 111.975 25.8755 113.852 25.1093C115.767 24.3049 117.855 23.9027 120.115 23.9027C122.26 23.9027 124.213 24.2858 125.975 25.0519C127.738 25.818 129.27 26.8906 130.572 28.2696C131.875 29.6486 132.87 31.2766 133.56 33.1536C134.25 35.0306 134.575 37.0799 134.537 39.3017C134.505 40.7072 133.356 41.8299 131.951 41.8299H112.246C111.059 41.8299 110.021 41.0301 109.718 39.8822C109.281 38.2241 110.531 36.6011 112.246 36.6011H126.27C126.528 36.6011 126.661 36.9097 126.484 37.0974C126.301 37.2909 125.975 37.1615 125.975 36.8953V36.4862C125.899 35.5286 125.592 34.705 125.056 34.0155C124.558 33.2877 123.888 32.7131 123.045 32.2917C122.241 31.8703 121.321 31.6597 120.287 31.6597C118.755 31.6597 117.452 31.9661 116.38 32.579C115.346 33.1536 114.56 33.9963 114.024 35.1072C113.488 36.2181 113.22 37.5971 113.22 39.2442C113.22 40.8914 113.564 42.347 114.254 43.6111C114.982 44.8752 116.016 45.852 117.357 46.5415C118.736 47.231 120.364 47.5758 122.241 47.5758C123.505 47.5758 124.654 47.3842 125.688 47.0012C127.671 46.267 130.039 46.4872 131.26 48.2129L131.31 48.2834C132.452 49.8966 132.182 52.155 130.476 53.1517C130.168 53.3318 129.855 53.5034 129.538 53.6664C128.197 54.3176 126.818 54.7964 125.401 55.1029C124.022 55.4476 122.624 55.62 121.206 55.62Z" fill="#1C1E25"/> |
| | <path d="M94.405 55.0453C91.8504 55.0453 89.7795 52.9744 89.7795 50.4199V17.1512C89.7795 14.5966 91.8504 12.5258 94.405 12.5258C96.9595 12.5258 99.0304 14.5966 99.0304 17.1512V50.4199C99.0304 52.9744 96.9595 55.0453 94.405 55.0453Z" fill="#1C1E25"/> |
| | <circle cx="294.5" cy="13.5" r="4.5" fill="#1C1E25"/> |
| | <circle cx="245.5" cy="50.5" r="4.5" fill="#1C1E25"/> |
| | <defs> |
| | <clipPath id="clip0_2148_3183"> |
| | <rect width="64.6412" height="64.6412" fill="white"/> |
| | </clipPath> |
| | <clipPath id="clip1_2148_3183"> |
| | <rect width="64.6412" height="57.4589" fill="white" transform="translate(0 3.59119)"/> |
| | </clipPath> |
| | </defs> |
| | </svg> |
| | |
| | <svg class="app-svg-icon link-external" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| | <path fill-rule="evenodd" clip-rule="evenodd" d="M7.7587 2L10 2C10.5523 2 11 2.44772 11 3C11 3.55229 10.5523 4 10 4H7.8C6.94342 4 6.36113 4.00078 5.91104 4.03755C5.47262 4.07337 5.24842 4.1383 5.09202 4.21799C4.7157 4.40973 4.40973 4.7157 4.21799 5.09202C4.1383 5.24842 4.07337 5.47262 4.03755 5.91104C4.00078 6.36113 4 6.94342 4 7.8V16.2C4 17.0566 4.00078 17.6389 4.03755 18.089C4.07337 18.5274 4.1383 18.7516 4.21799 18.908C4.40973 19.2843 4.7157 19.5903 5.09202 19.782C5.24842 19.8617 5.47262 19.9266 5.91104 19.9625C6.36113 19.9992 6.94342 20 7.8 20H16.2C17.0566 20 17.6389 19.9992 18.089 19.9625C18.5274 19.9266 18.7516 19.8617 18.908 19.782C19.2843 19.5903 19.5903 19.2843 19.782 18.908C19.8617 18.7516 19.9266 18.5274 19.9625 18.089C19.9992 17.6389 20 17.0566 20 16.2V14C20 13.4477 20.4477 13 21 13C21.5523 13 22 13.4477 22 14V16.2413C22 17.0463 22 17.7106 21.9558 18.2518C21.9099 18.8139 21.8113 19.3306 21.564 19.816C21.1805 20.5686 20.5686 21.1805 19.816 21.564C19.3306 21.8113 18.8139 21.9099 18.2518 21.9558C17.7106 22 17.0463 22 16.2413 22H7.75868C6.95372 22 6.28937 22 5.74818 21.9558C5.18608 21.9099 4.66937 21.8113 4.18404 21.564C3.43139 21.1805 2.81947 20.5686 2.43598 19.816C2.18868 19.3306 2.09012 18.8139 2.04419 18.2518C1.99998 17.7106 1.99999 17.0463 2 16.2413V7.7587C1.99999 6.95373 1.99998 6.28937 2.04419 5.74818C2.09012 5.18608 2.18868 4.66937 2.43597 4.18404C2.81947 3.43139 3.43139 2.81947 4.18404 2.43597C4.66937 2.18868 5.18608 2.09012 5.74818 2.04419C6.28937 1.99998 6.95373 1.99999 7.7587 2ZM14 3.00001C14 2.44773 14.4477 2.00001 15 2.00001H21C21.5523 2.00001 22 2.44773 22 3.00001L22 9.00001C22 9.5523 21.5523 10 21 10C20.4477 10 20 9.5523 20 9.00001L20 5.41423L12.7071 12.7071C12.3166 13.0976 11.6834 13.0976 11.2929 12.7071C10.9024 12.3166 10.9024 11.6834 11.2929 11.2929L18.5858 4.00001H15C14.4477 4.00001 14 3.5523 14 3.00001Z" fill="currentColor"/> |
| | </svg> |
| | |
| | </a> |
| | </h3> |
| | </div> |
| | </div> |
| | </div> |
| | <PluginSnackbar /> |
| | </template> |
| | |
| | <style scoped lang="scss"> |
| | @import '@plugin/assets/main.scss'; |
| | @import '@plugin/assets/_variables_override.scss'; |
| | |
| | .grid { |
| | display: grid; |
| | grid-template-columns: repeat(2, 45%); |
| | gap: 10px; |
| | justify-content: center; |
| | |
| | @media (min-width: $tablet-1024-breakpoint) { |
| | grid-template-columns: repeat(4, 1fr); |
| | } |
| | } |
| | |
| | .app-svg-icon { |
| | width: 24px; |
| | height: 24px; |
| | color: $main-1000; |
| | fill: currentColor; |
| | } |
| | |
| | .outer-container { |
| | display: flex; |
| | justify-content: center; |
| | background-color: $primary-25; |
| | position: relative; |
| | |
| | padding: 5px; |
| | margin: auto; |
| | //max-width: 800px; |
| | //width: fit-content; |
| | z-index: 10; |
| | |
| | //@media (min-width: $tablet-1024-breakpoint) { |
| | // width: 900px; |
| | // top: 50%; |
| | // left: 50%; |
| | // transform: translate(-50%, 50%) scale(1.5); |
| | //} |
| | |
| | &:before { |
| | content: ""; |
| | position: absolute; |
| | border-radius: 1737px; |
| | background: rgba(255, 255, 255, 0.70); |
| | top: 0; |
| | left: 0; |
| | width: 100%; |
| | height: 100%; |
| | z-index: 0; |
| | filter: blur(100px); |
| | backdrop-filter: blur(10px); |
| | } |
| | } |
| | |
| | .plugin-container { |
| | display: flex; |
| | flex-direction: column; |
| | justify-content: space-between; |
| | gap: 20px; |
| | text-align: center; |
| | |
| | flex: auto; |
| | z-index: 1; |
| | |
| | @media (min-width: $tablet-1024-breakpoint) { |
| | padding: 50px; |
| | } |
| | |
| | .big-header { |
| | margin-bottom: 4px; |
| | @include h2; |
| | display: none; |
| | |
| | span { |
| | color: $primary-400; |
| | } |
| | |
| | @media (min-width: $tablet-1024-breakpoint) { |
| | display: block; |
| | } |
| | } |
| | |
| | .mobile-header { |
| | @include h2; |
| | |
| | span { |
| | color: $primary-400; |
| | } |
| | |
| | @media (min-width: $tablet-1024-breakpoint) { |
| | display: none; |
| | } |
| | } |
| | |
| | .small-header { |
| | color: $main-1000; |
| | @include semibold-16-24; |
| | } |
| | |
| | .plugin-footer { |
| | h3 { |
| | display: flex; |
| | align-items: flex-end; |
| | gap: 8px; |
| | justify-content: center; |
| | |
| | color: $main-1000; |
| | font-size: 12px; |
| | font-weight: 500; |
| | line-height: 14.509px; |
| | |
| | a { |
| | display: inline-flex; |
| | gap: 4px; |
| | } |
| | } |
| | |
| | .app-svg-icon { |
| | width: 100px; |
| | } |
| | |
| | .link-external { |
| | width: 8px; |
| | height: 8px; |
| | color: $main-200; |
| | } |
| | } |
| | } |
| | |
| | |
| | .image-uploader-container { |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | flex-direction: column; |
| | color: #312758; |
| | margin: 0; |
| | padding: 0; |
| | vertical-align: baseline; |
| | width: 100%; |
| | gap: 30px; |
| | |
| | :deep(.drag-section) { |
| | |
| | //@media (min-width: $tablet-1024-breakpoint) { |
| | // width: 50%; |
| | //} |
| | } |
| | |
| | |
| | :deep(.drag-area) { |
| | box-shadow: 0px 2px 8px 0px rgba(89, 99, 168, 0.16); |
| | border-radius: 12px; |
| | padding: 14px; |
| | |
| | .drag-area-title { |
| | margin-top: 12px; |
| | } |
| | |
| | .drag-area-icon { |
| | border-style: none; |
| | padding: unset; |
| | |
| | svg { |
| | width: 24px; |
| | height: 24px; |
| | } |
| | } |
| | } |
| | |
| | :deep(.drag-area-desc) { |
| | display: none; |
| | } |
| | |
| | } |
| | |
| | :deep(.search-input-container) { |
| | .search-input { |
| | height: 35px; |
| | } |
| | } |
| | </style> |
| | |
| | <style lang="scss"> |
| | @import '@plugin/assets/_variables_override.scss'; |
| | |
| | :host { |
| | display: flex; |
| | justify-content: center; |
| | padding: 0 10px; |
| | } |
| | </style> |
| | |
