keyrune/docs/src/layouts/partials/modal.html

166 lines
20 KiB
HTML

<object id="icon">
<details open disabled>
<summary tabindex="-1">
<span class="name">Set name</span>
</summary>
<div class="details">
<a href="sets" class="close">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</a>
<div class="table flex flex-col p-8 w-full">
<div class="flex flex-col justify-start">
<h2 class="name mt-0 mb-4">
Set name
</h2>
<h3 class="class mt-0 mb-6">
Set code
</h3>
<div class="grid grid-cols-12">
<div class="grid-span-4 flex flex-col mb-6">
<label>Added</label>
<span class="version"></span>
</div>
<div class="grid-span-5 flex flex-col mb-6">
<label>Group</label>
<span class="group"></span>
</div>
<div class="grid-span-3 flex flex-col mb-6">
<label>Status</label>
<span class="official" data-official="true">
Official
</span>
</div>
<div class="grid-span-4 flex flex-col mb-4">
<label>Glyphs</label>
<ul class="glyphs m-0">
<li class="rarity">
<i></i>
<span class="ml-2"></span>
</li>
<li class="border">
<i></i>
<span class="ml-2"></span>
</li>
<li class="inner">
<i></i>
<span class="ml-2"></span>
</li>
</ul>
</div>
<div class="grid-span-8 flex flex-col mb-4">
<label class="aliases">Aliases</label>
<span class="aliases"></span>
</div>
</div>
<div class="actions flex flex-row flex-align-center flex-justify-start mt-2 mb-4">
<a href="javascript:;" id="copy-unicode" class="action-button unicode mr-6 flex-inline flex-align-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
<span class="text-sm ml-2">Copy unicode</span>
<em>Unicode copied!</em>
</a>
<a href="javascript:;" id="copy-glyph" class="action-button glyph mr-6 flex-inline flex-align-center" data-tooltip="SVG copied!">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</svg>
<span class="text-sm ml-2">Copy glyph</span>
<em>Glyph copied!</em>
</a>
<a href="javascript:;" id="download-svg" class="action-button download flex-inline flex-align-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
<span class="text-sm ml-2">Download</span>
<em>SVG downloaded!</em>
</a>
</div>
</div>
<div class="tags">
Tags
</div>
</div>
<div class="icon checkerboard flex flex-col flex-shrink-0">
<i class="ss"></i>
<div id="icon-controls" class="icon-controls flex flex-row flex-align-center flex-justify-center flex-shrink-0">
<menu id="icon-rarity-modal" class="flex flex-row group mr-2">
<li>
<label for="rarity_common" class="small left checked">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 480 480" fill="#000">
<path d="M76.084 233.472c32.743.6 66.086 9.848 90.981 31.943 38.842 32.943 56.938 85.032 59.388 134.772-41.791 2.449-81.733-20.196-106.478-52.889-24.995-32.893-38.142-73.285-43.891-113.826zM314.734 263.465c24.395-21.245 57.239-29.043 88.932-29.293-7.549 55.138-30.794 112.026-77.384 145.319-20.696 15.847-47.24 21.446-72.885 20.546 2-50.889 20.246-104.078 61.337-136.572z"/>
<path d="M0 326.652c27.944-5.799 58.338-8.798 85.932-.5 15.647 16.247 26.045 37.043 43.191 51.99 16.797 16.746 39.642 24.444 61.137 33.243-51.089 2.049-105.328-6.299-147.519-37.143C25.095 361.895 11.498 344.749 0 326.652zM396.517 325.453c27.245-7.149 55.939-4.15 83.483-.5-13.047 29.693-40.492 50.339-68.486 65.036-38.292 16.997-80.883 24.245-122.724 22.295 25.345-11.547 52.889-21.595 71.185-43.69 13.197-13.498 20.696-32.594 36.542-43.141zM240.411 67.406c9.095 113.171 14.161 127.959 17.311 136.752 4.164.275 8.331.546 12.486.949 2.058-5.379 1.543-5.816 4.128-16.599 5.504-22.959 10.206-85.849 10.992-90.052 4.049 30.719 6.02 49.969 8.808 69.137 1.288 8.797 2.705 17.584 4.594 26.299 1.275 5.692 2.635 11.404 4.932 16.855 3.865 1.043 7.7 2.188 11.416 3.595 1.164-2.36 2.04-4.825 2.864-7.293 2.077-6.414 3.516-12.974 4.775-19.545 7.193-45.814 7.357-49.301 8.517-52.438 7.511 64.209 9.074 81.156 10.495 98.112-10.891 3.646-21.19 8.651-30.606 14.706-12.598 8.107-23.565 18.13-32.655 29.309a145.967 145.967 0 0 0-22.363 38.106c-6.77 17.051-10.589 34.923-12.65 52.876-.666 5.513-1.076 11.045-1.709 16.558-.23 1.472-.27 3.025-1.072 4.365h-.396c-.735-.991-.78-2.215-.987-3.346-.486-3.658-.756-7.335-1.137-11.002-.957-9.885-2.317-19.748-4.403-29.5-3.423-15.951-8.598-31.704-16.674-46.322-9.236-16.766-21.947-32.137-37.875-44.403a137.479 137.479 0 0 0-40.031-21.355c2.022-23.601 4.16-47.2 6.637-70.769 3.795-27.076 3.918-27.058 3.979-27.048 3.582 19.723 4.793 30.573 6.572 41.585 1.416 8.825 3.013 17.644 5.445 26.301 1.095 3.764 2.288 7.526 4.025 11.105 3.716-1.417 7.594-2.43 11.422-3.605 1.391-.426 1.498-.045 3.408-10.445 4.93-26.846 14.804-103.264 14.935-101.92 7.466 76.397 9.956 86.065 11.82 95.266.838 3.884 1.787 7.703 3.289 11.437 4.156-.331 8.311-.668 12.475-.913 3.117-8.667 4.899-15.997 6.008-25.038 9.434-76.926 11.085-113.454 11.225-111.72z"/>
</svg>
</label>
</li>
<li>
<label for="rarity_uncommon" class="small center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 480 480" fill="#707883">
<path d="M76.084 233.472c32.743.6 66.086 9.848 90.981 31.943 38.842 32.943 56.938 85.032 59.388 134.772-41.791 2.449-81.733-20.196-106.478-52.889-24.995-32.893-38.142-73.285-43.891-113.826zM314.734 263.465c24.395-21.245 57.239-29.043 88.932-29.293-7.549 55.138-30.794 112.026-77.384 145.319-20.696 15.847-47.24 21.446-72.885 20.546 2-50.889 20.246-104.078 61.337-136.572z"/>
<path d="M0 326.652c27.944-5.799 58.338-8.798 85.932-.5 15.647 16.247 26.045 37.043 43.191 51.99 16.797 16.746 39.642 24.444 61.137 33.243-51.089 2.049-105.328-6.299-147.519-37.143C25.095 361.895 11.498 344.749 0 326.652zM396.517 325.453c27.245-7.149 55.939-4.15 83.483-.5-13.047 29.693-40.492 50.339-68.486 65.036-38.292 16.997-80.883 24.245-122.724 22.295 25.345-11.547 52.889-21.595 71.185-43.69 13.197-13.498 20.696-32.594 36.542-43.141zM240.411 67.406c9.095 113.171 14.161 127.959 17.311 136.752 4.164.275 8.331.546 12.486.949 2.058-5.379 1.543-5.816 4.128-16.599 5.504-22.959 10.206-85.849 10.992-90.052 4.049 30.719 6.02 49.969 8.808 69.137 1.288 8.797 2.705 17.584 4.594 26.299 1.275 5.692 2.635 11.404 4.932 16.855 3.865 1.043 7.7 2.188 11.416 3.595 1.164-2.36 2.04-4.825 2.864-7.293 2.077-6.414 3.516-12.974 4.775-19.545 7.193-45.814 7.357-49.301 8.517-52.438 7.511 64.209 9.074 81.156 10.495 98.112-10.891 3.646-21.19 8.651-30.606 14.706-12.598 8.107-23.565 18.13-32.655 29.309a145.967 145.967 0 0 0-22.363 38.106c-6.77 17.051-10.589 34.923-12.65 52.876-.666 5.513-1.076 11.045-1.709 16.558-.23 1.472-.27 3.025-1.072 4.365h-.396c-.735-.991-.78-2.215-.987-3.346-.486-3.658-.756-7.335-1.137-11.002-.957-9.885-2.317-19.748-4.403-29.5-3.423-15.951-8.598-31.704-16.674-46.322-9.236-16.766-21.947-32.137-37.875-44.403a137.479 137.479 0 0 0-40.031-21.355c2.022-23.601 4.16-47.2 6.637-70.769 3.795-27.076 3.918-27.058 3.979-27.048 3.582 19.723 4.793 30.573 6.572 41.585 1.416 8.825 3.013 17.644 5.445 26.301 1.095 3.764 2.288 7.526 4.025 11.105 3.716-1.417 7.594-2.43 11.422-3.605 1.391-.426 1.498-.045 3.408-10.445 4.93-26.846 14.804-103.264 14.935-101.92 7.466 76.397 9.956 86.065 11.82 95.266.838 3.884 1.787 7.703 3.289 11.437 4.156-.331 8.311-.668 12.475-.913 3.117-8.667 4.899-15.997 6.008-25.038 9.434-76.926 11.085-113.454 11.225-111.72z"/>
</svg>
</label>
</li>
<li>
<label for="rarity_rare" class="small center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 480 480" fill="#b7a066">
<path d="M76.084 233.472c32.743.6 66.086 9.848 90.981 31.943 38.842 32.943 56.938 85.032 59.388 134.772-41.791 2.449-81.733-20.196-106.478-52.889-24.995-32.893-38.142-73.285-43.891-113.826zM314.734 263.465c24.395-21.245 57.239-29.043 88.932-29.293-7.549 55.138-30.794 112.026-77.384 145.319-20.696 15.847-47.24 21.446-72.885 20.546 2-50.889 20.246-104.078 61.337-136.572z"/>
<path d="M0 326.652c27.944-5.799 58.338-8.798 85.932-.5 15.647 16.247 26.045 37.043 43.191 51.99 16.797 16.746 39.642 24.444 61.137 33.243-51.089 2.049-105.328-6.299-147.519-37.143C25.095 361.895 11.498 344.749 0 326.652zM396.517 325.453c27.245-7.149 55.939-4.15 83.483-.5-13.047 29.693-40.492 50.339-68.486 65.036-38.292 16.997-80.883 24.245-122.724 22.295 25.345-11.547 52.889-21.595 71.185-43.69 13.197-13.498 20.696-32.594 36.542-43.141zM240.411 67.406c9.095 113.171 14.161 127.959 17.311 136.752 4.164.275 8.331.546 12.486.949 2.058-5.379 1.543-5.816 4.128-16.599 5.504-22.959 10.206-85.849 10.992-90.052 4.049 30.719 6.02 49.969 8.808 69.137 1.288 8.797 2.705 17.584 4.594 26.299 1.275 5.692 2.635 11.404 4.932 16.855 3.865 1.043 7.7 2.188 11.416 3.595 1.164-2.36 2.04-4.825 2.864-7.293 2.077-6.414 3.516-12.974 4.775-19.545 7.193-45.814 7.357-49.301 8.517-52.438 7.511 64.209 9.074 81.156 10.495 98.112-10.891 3.646-21.19 8.651-30.606 14.706-12.598 8.107-23.565 18.13-32.655 29.309a145.967 145.967 0 0 0-22.363 38.106c-6.77 17.051-10.589 34.923-12.65 52.876-.666 5.513-1.076 11.045-1.709 16.558-.23 1.472-.27 3.025-1.072 4.365h-.396c-.735-.991-.78-2.215-.987-3.346-.486-3.658-.756-7.335-1.137-11.002-.957-9.885-2.317-19.748-4.403-29.5-3.423-15.951-8.598-31.704-16.674-46.322-9.236-16.766-21.947-32.137-37.875-44.403a137.479 137.479 0 0 0-40.031-21.355c2.022-23.601 4.16-47.2 6.637-70.769 3.795-27.076 3.918-27.058 3.979-27.048 3.582 19.723 4.793 30.573 6.572 41.585 1.416 8.825 3.013 17.644 5.445 26.301 1.095 3.764 2.288 7.526 4.025 11.105 3.716-1.417 7.594-2.43 11.422-3.605 1.391-.426 1.498-.045 3.408-10.445 4.93-26.846 14.804-103.264 14.935-101.92 7.466 76.397 9.956 86.065 11.82 95.266.838 3.884 1.787 7.703 3.289 11.437 4.156-.331 8.311-.668 12.475-.913 3.117-8.667 4.899-15.997 6.008-25.038 9.434-76.926 11.085-113.454 11.225-111.72z"/>
</svg>
</label>
</li>
<li>
<label for="rarity_mythic" class="small center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 480 480" fill="#bf4427">
<path d="M76.084 233.472c32.743.6 66.086 9.848 90.981 31.943 38.842 32.943 56.938 85.032 59.388 134.772-41.791 2.449-81.733-20.196-106.478-52.889-24.995-32.893-38.142-73.285-43.891-113.826zM314.734 263.465c24.395-21.245 57.239-29.043 88.932-29.293-7.549 55.138-30.794 112.026-77.384 145.319-20.696 15.847-47.24 21.446-72.885 20.546 2-50.889 20.246-104.078 61.337-136.572z"/>
<path d="M0 326.652c27.944-5.799 58.338-8.798 85.932-.5 15.647 16.247 26.045 37.043 43.191 51.99 16.797 16.746 39.642 24.444 61.137 33.243-51.089 2.049-105.328-6.299-147.519-37.143C25.095 361.895 11.498 344.749 0 326.652zM396.517 325.453c27.245-7.149 55.939-4.15 83.483-.5-13.047 29.693-40.492 50.339-68.486 65.036-38.292 16.997-80.883 24.245-122.724 22.295 25.345-11.547 52.889-21.595 71.185-43.69 13.197-13.498 20.696-32.594 36.542-43.141zM240.411 67.406c9.095 113.171 14.161 127.959 17.311 136.752 4.164.275 8.331.546 12.486.949 2.058-5.379 1.543-5.816 4.128-16.599 5.504-22.959 10.206-85.849 10.992-90.052 4.049 30.719 6.02 49.969 8.808 69.137 1.288 8.797 2.705 17.584 4.594 26.299 1.275 5.692 2.635 11.404 4.932 16.855 3.865 1.043 7.7 2.188 11.416 3.595 1.164-2.36 2.04-4.825 2.864-7.293 2.077-6.414 3.516-12.974 4.775-19.545 7.193-45.814 7.357-49.301 8.517-52.438 7.511 64.209 9.074 81.156 10.495 98.112-10.891 3.646-21.19 8.651-30.606 14.706-12.598 8.107-23.565 18.13-32.655 29.309a145.967 145.967 0 0 0-22.363 38.106c-6.77 17.051-10.589 34.923-12.65 52.876-.666 5.513-1.076 11.045-1.709 16.558-.23 1.472-.27 3.025-1.072 4.365h-.396c-.735-.991-.78-2.215-.987-3.346-.486-3.658-.756-7.335-1.137-11.002-.957-9.885-2.317-19.748-4.403-29.5-3.423-15.951-8.598-31.704-16.674-46.322-9.236-16.766-21.947-32.137-37.875-44.403a137.479 137.479 0 0 0-40.031-21.355c2.022-23.601 4.16-47.2 6.637-70.769 3.795-27.076 3.918-27.058 3.979-27.048 3.582 19.723 4.793 30.573 6.572 41.585 1.416 8.825 3.013 17.644 5.445 26.301 1.095 3.764 2.288 7.526 4.025 11.105 3.716-1.417 7.594-2.43 11.422-3.605 1.391-.426 1.498-.045 3.408-10.445 4.93-26.846 14.804-103.264 14.935-101.92 7.466 76.397 9.956 86.065 11.82 95.266.838 3.884 1.787 7.703 3.289 11.437 4.156-.331 8.311-.668 12.475-.913 3.117-8.667 4.899-15.997 6.008-25.038 9.434-76.926 11.085-113.454 11.225-111.72z"/>
</svg>
</label>
<label for="rarity_foil" class="small right">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 480 480" fill="#00afc9">
<path d="M76.084 233.472c32.743.6 66.086 9.848 90.981 31.943 38.842 32.943 56.938 85.032 59.388 134.772-41.791 2.449-81.733-20.196-106.478-52.889-24.995-32.893-38.142-73.285-43.891-113.826zM314.734 263.465c24.395-21.245 57.239-29.043 88.932-29.293-7.549 55.138-30.794 112.026-77.384 145.319-20.696 15.847-47.24 21.446-72.885 20.546 2-50.889 20.246-104.078 61.337-136.572z"/>
<path d="M0 326.652c27.944-5.799 58.338-8.798 85.932-.5 15.647 16.247 26.045 37.043 43.191 51.99 16.797 16.746 39.642 24.444 61.137 33.243-51.089 2.049-105.328-6.299-147.519-37.143C25.095 361.895 11.498 344.749 0 326.652zM396.517 325.453c27.245-7.149 55.939-4.15 83.483-.5-13.047 29.693-40.492 50.339-68.486 65.036-38.292 16.997-80.883 24.245-122.724 22.295 25.345-11.547 52.889-21.595 71.185-43.69 13.197-13.498 20.696-32.594 36.542-43.141zM240.411 67.406c9.095 113.171 14.161 127.959 17.311 136.752 4.164.275 8.331.546 12.486.949 2.058-5.379 1.543-5.816 4.128-16.599 5.504-22.959 10.206-85.849 10.992-90.052 4.049 30.719 6.02 49.969 8.808 69.137 1.288 8.797 2.705 17.584 4.594 26.299 1.275 5.692 2.635 11.404 4.932 16.855 3.865 1.043 7.7 2.188 11.416 3.595 1.164-2.36 2.04-4.825 2.864-7.293 2.077-6.414 3.516-12.974 4.775-19.545 7.193-45.814 7.357-49.301 8.517-52.438 7.511 64.209 9.074 81.156 10.495 98.112-10.891 3.646-21.19 8.651-30.606 14.706-12.598 8.107-23.565 18.13-32.655 29.309a145.967 145.967 0 0 0-22.363 38.106c-6.77 17.051-10.589 34.923-12.65 52.876-.666 5.513-1.076 11.045-1.709 16.558-.23 1.472-.27 3.025-1.072 4.365h-.396c-.735-.991-.78-2.215-.987-3.346-.486-3.658-.756-7.335-1.137-11.002-.957-9.885-2.317-19.748-4.403-29.5-3.423-15.951-8.598-31.704-16.674-46.322-9.236-16.766-21.947-32.137-37.875-44.403a137.479 137.479 0 0 0-40.031-21.355c2.022-23.601 4.16-47.2 6.637-70.769 3.795-27.076 3.918-27.058 3.979-27.048 3.582 19.723 4.793 30.573 6.572 41.585 1.416 8.825 3.013 17.644 5.445 26.301 1.095 3.764 2.288 7.526 4.025 11.105 3.716-1.417 7.594-2.43 11.422-3.605 1.391-.426 1.498-.045 3.408-10.445 4.93-26.846 14.804-103.264 14.935-101.92 7.466 76.397 9.956 86.065 11.82 95.266.838 3.884 1.787 7.703 3.289 11.437 4.156-.331 8.311-.668 12.475-.913 3.117-8.667 4.899-15.997 6.008-25.038 9.434-76.926 11.085-113.454 11.225-111.72z"/>
</svg>
</label>
</li>
</menu>
<menu id="preview-extras-modal" class="flex flex-row">
<li>
<label for="extras_border" class="small mr-1">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
</svg>
</label>
</li>
<li>
<label for="extras_inner" class="small mr-1">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="4"></circle>
</svg>
</label>
</li>
<li>
<label for="extras_gradient" class="small disabled" disabled="disabled">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5.5,3.5 L19.5,3.5 C20.605,3.5 21.5,4.395 21.5,5.5 L21.5,19.5 C21.5,20.605 20.605,21.5 19.5,21.5 L5.5,21.5 C4.395,21.5 3.5,20.605 3.5,19.5 L3.5,5.5 C3.5,4.395 4.395,3.5 5.5,3.5 z"></path>
<path d="M16.344,21.5 L21.5,16.344"></path>
<path d="M12.344,21.5 L21.5,12.344"></path>
<path d="M7.344,21.5 L21.5,7.344"></path>
<path d="M3.656,18.188 L18.344,3.5"></path>
</svg>
</label>
</li>
</menu>
</div>
</div>
</div>
</details>
</object>