68 lines
479 KiB
HTML
68 lines
479 KiB
HTML
|
<style>
|
||
|
|
ul.svg-list {
|
||
|
|
list-style:none;
|
||
|
|
padding:0;
|
||
|
|
margin:10px 0 0;
|
||
|
|
}
|
||
|
|
ul.svg-list li {
|
||
|
|
display:inline-block;
|
||
|
|
position:relative;
|
||
|
|
width:32px;
|
||
|
|
height:32px;
|
||
|
|
padding:3px;
|
||
|
|
margin-right:5px;
|
||
|
|
margin-bottom:5px;
|
||
|
|
box-shadow:0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.svg-list li:hover {
|
||
|
|
box-shadow:none;//0px 3px 6px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.svg-list li svg{
|
||
|
|
max-width:100%;
|
||
|
|
max-height:100%;
|
||
|
|
fill: var(--bs-body-color);
|
||
|
|
color: var(--bs-border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.svg-list li span {
|
||
|
|
//display:none;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.svg-list li.heading {
|
||
|
|
width:100%;
|
||
|
|
box-shadow:none;
|
||
|
|
text-transform: capitalize;
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.svg-list li span {
|
||
|
|
visibility: hidden;
|
||
|
|
min-width: 120px;
|
||
|
|
background-color: black;
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
border-radius: 6px;
|
||
|
|
padding: 5px 0;
|
||
|
|
|
||
|
|
/* Position the tooltip */
|
||
|
|
position: absolute;
|
||
|
|
z-index: 1;
|
||
|
|
left:0;
|
||
|
|
top: 105%;
|
||
|
|
font-size:12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.svg-list li:hover span {
|
||
|
|
visibility: visible;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.svg-list li:hover svg {
|
||
|
|
transform: scale(2);
|
||
|
|
fill:blue;
|
||
|
|
color:green;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<ul class="svg-list"><li title="500px "><svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -2 24 24" width="24" height="24" fill="currentColor"><path d="M8.991 17.692c3.68 0 6.673-2.972 6.673-6.625 0-3.654-2.994-6.626-6.673-6.626a6.693 6.693 0 0 0-4.798 2.02v-5.34h9.178a.563.563 0 0 0 .564-.56.562.562 0 0 0-.564-.561H3.628a.563.563 0 0 0-.564.56v7.453l-.007.136a.566.566 0 0 0 1.06.294 5.55 5.55 0 0 1 4.874-2.88c3.057 0 5.543 2.468 5.543 5.503s-2.486 5.504-5.543 5.504a5.555 5.555 0 0 1-2.844-.787v-4.716c0-1.558 1.276-2.825 2.844-2.825a2.837 2.837 0 0 1 2.844 2.825c0 1.557-1.275 2.824-2.844 2.824a2.84 2.84 0 0 1-1.095-.217.566.566 0 0 0-.738.302.56.56 0 0 0 .303.733c.486.201 1 .303 1.53.303 2.191 0 3.974-1.77 3.974-3.945 0-2.176-1.783-3.946-3.974-3.946-2.19 0-3.973 1.77-3.973 3.946v3.832a5.46 5.46 0 0 1-1.37-2.366.565.565 0 0 0-1.09.298c.795 2.862 3.44 4.861 6.433 4.861z"/><path d="M5.598 2.833a.56.56 0 0 0-.287.74c.127.283.46.41.745.285 1.77-.78 5.248-1.596 8.647 1.715a.565.565 0 0 0 .8-.008.558.558 0 0 0-.009-.793c-4.02-3.915-8.26-2.66-9.896-1.939zM15.695 16.13a.567.567 0 0 0-.797.056 7.849 7.849 0 0 1-5.907 2.674c-3.98 0-7.322-2.957-7.773-6.878a.564.564 0 0 0-.625-.493.562.562 0 0 0-.497.62c.516 4.488 4.34 7.873 8.895 7.873a8.981 8.981 0 0 0 6.76-3.06.558.558 0 0 0-.056-.791zm-8.141-3.704a.565.565 0 0 0 .799.006l.58-.568.572.575a.565.565 0 0 0 .798.006.558.558 0 0 0 .006-.793l-.572-.576.559-.547a.558.558 0 0 0 .005-.793.567.567 0 0 0-.798-.006l-.559.548-.551-.555a.567.567 0 0 0-.799-.006.558.558 0 0 0-.005.793l.55.555-.579.568a.558.558 0 0 0-.006.793z"/></svg></li><li title="accessibility "><svg width="12" height="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="m5.9 10.016-.324 3.087a1 1 0 1 1-1.989-.21L4.31 6.01H1a1 1 0 0 1 0-2.003h10a1 1 0 0 1 0 2.003H7.69l.723 6.885a1.001 1.001 0 1 1-1.99.209L6.1 10.016h-.2Zm.1-6.01c-1.105 0-2-.897-2-2.003S4.895 0 6 0s2 .897 2 2.003a2.002 2.002 0 0 1-2 2.003Z"/></svg></li><li title="activity "><svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -3 24 24" width="24" height="24" fill="currentColor"><path d="M7.116 10.749 6 1.948l-1.116 8.8H1c-.552 0-1-.437-1-.976a.99.99 0 0 1 1-.978h2.116l.9-7.086C4.15.636 5.15-.124 6.245.008c.91.11 1.626.81 1.739 1.7l.899 7.086h1.974L12 16.04l1.142-7.245H19c.552 0 1 .438 1 .978s-.448.977-1 .977h-4.142l-.881 5.587a1.978 1.978 0 0 1-1.672 1.634c-1.092.165-2.113-.567-2.282-1.634l-.88-5.587H7.115z"/></svg></li><li title="airbnb "><svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -2 24 24" width="24" height="24" fill="currentColor"><path d="M17.497 13.278c1.017 2.29.441 4.676-1.433 5.938-.774.522-1.592.783-2.431.783-.848 0-1.716-.266-2.583-.797-.512-.314-.966-.72-1.405-1.112-.14-.125-.28-.25-.422-.371a1.07 1.07 0 0 1-.171-.192c-.122.108-.239.214-.353.318-.432.392-.841.762-1.286 1.078-1.643 1.167-3.276 1.38-4.856.635a4.446 4.446 0 0 1-2.3-5.5c.493-1.414 1.135-2.79 1.757-4.12l.02-.043c.883-1.89 1.806-3.797 2.698-5.641l.793-1.641c.34-.706.795-1.498 1.595-2.026.823-.543 1.783-.717 2.703-.49.937.233 1.735.86 2.248 1.764.763 1.346 1.44 2.762 2.015 3.984a374.857 374.857 0 0 1 3.411 7.433zM11.62 3.97l-.555-1.165c-.412-.869-1.167-1.392-2.02-1.4-.873.004-1.65.512-2.09 1.394-.132.265-.268.528-.404.79-.226.439-.46.892-.674 1.35-1.5 3.224-2.883 6.218-4.227 9.152-.396.863-.41 1.772-.043 2.627.35.814.974 1.422 1.757 1.711.324.12.66.179.999.179.483 0 .971-.12 1.432-.36.585-.304 1.097-.738 1.593-1.157.216-.183.432-.366.653-.537.579-.448.26-.959.136-1.158-.572-.915-1.164-1.862-1.624-2.842-.444-.948-.538-1.903-.278-2.837.413-1.482 1.952-2.33 3.503-1.93 1.456.374 2.341 1.873 2.058 3.486-.194 1.107-.66 2.178-1.51 3.475-.055.082-.12.168-.186.255-.24.317-.511.677-.451 1.064.064.41.426.705.745.965.071.058.142.116.206.172.805.711 1.719 1.371 2.951 1.388h.026l.025-.003c.078-.01.156-.019.235-.027.19-.02.389-.04.589-.097a3.056 3.056 0 0 0 1.953-1.692c.37-.83.356-1.766-.038-2.634-1.547-3.41-3.18-6.846-4.761-10.169zm-1.162 7.32c.183-.907.054-1.46-.43-1.85-.311-.248-.642-.373-.988-.373-.256 0-.52.068-.793.204-.545.274-.78.748-.737 1.495.076 1.313.747 2.383 1.504
|