74 lines
209 KiB
HTML
74 lines
209 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="airplay "><svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 4)"><path d="m3.5 10.5-1-.0345601c-1.10193561-.0037085-2-.93261826-2-2.03456011v-5.9654399c0-1.1045695.8954305-2 2-2l10-.00245977c1.1045695 0 2 .8954305 2 2v6.00245977c0 1.1045695-.8954305 2.00000001-2 2.00000001-.0014957 0-.3348291.01234-1 .0370199"/><path d="m7.5 12.5-3-3h6z" transform="matrix(1 0 0 -1 0 22)"/></g></svg></li><li title="alarm clock "><svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="matrix(-1 0 0 1 19 2)"><path d="m7.5 2.56534572h2c3.3137085 0 6 2.6862915 6 6v1.93465428c0 3.3137085-2.6862915 6-6 6h-2c-3.3137085 0-6-2.6862915-6-6v-1.93465428c0-3.3137085 2.6862915-6 6-6zm-3.03187447-1.06810595c-.88435284-.63912003-2.08877116-.7093269-2.96812553.00276023-.90620024.73382648-1.25812628 1.95919459-.82225162 2.96879869m11.79055952-2.92496449c.889667-.68192972 2.1314103-.77286806 3.0316921-.0438342.9064946.73406486 1.2583549 1.95999074.8218266 2.96978251"/><path d="m8.5 5.5v4h-3.5"/><path d="m14 15 2 2"/><path d="m1 15 2 2" transform="matrix(-1 0 0 1 4 0)"/></g></svg></li><li title="align horizontal "><svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 3)"><path d="m14.5 4.5-3 3 3 3"/><path d="m18.5 7.5h-7"/><path d="m4.5 4.5 3 3-3 3"/><path d="m7.5 7.5h-7"/><path d="m9.5.5v14"/></g></svg></li><li title="align vertical "><svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 1)"><path d="m4.5 4.5 3 3 3-3"/><path d="m7.5.5v7"/><path d="m4.5 14.5 3-3 3 3"/><path d="m7.5 11.5v7"/><path d="m.5 9.5h14"/></g></svg></li><li title="angle "><svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(5 5)"><path d="m5.5 11.5c0-2.76142375-2.23857625-5-5-5"/><path d="m.5.5v11h11"/></g></svg></li><li title="archive "><svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 3)"><path d="m1.5 4.5h14v7.9976807c0 1.1045695-.8954305 2-2 2h-10c-1.1045695 0-2-.8954305-2-2zm0-3.9777832h14c.5522847 0 1 .44771525 1 1v1.9777832c0 .55228475-.4477153 1-1 1h-14c-.55228475 0-1-.44771525-1-1v-1.9777832c0-.55228475.44771525-1 1-1z"/><path d="m6.5 7.5h4"/></g></svg></li><li title="arrow bottom left "><svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(6 6)"><path d="m.5 1.5v7h7"/><path d="m8.5.5-8 8"/></g></svg></li><li title="arrow bottom right "><svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(6 6)"><path d="m8.5 1.5v7h-7"/><path d="m.5.5 8 8"/></g></svg></li><li title="arrow down "><svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(6 4)"><path d="m.5 9.499 4 4.001 4-4.001"/><path d="m4.5.5v13" transform="matrix(-1 0 0 -1 9 14)"/></g></svg></li><li title="arrow down circle "><svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 2)"><circle cx="8.5" cy="8.5" r="8"/><path d="m5.5 9.5 3 3 3-3"/><path d="m8.5 12.5v-8"/></g></svg></li><li
|
||
|
|
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(5 3)">
|
||
|
|
<path d="M5.5,16 C8.53756612,16 11,13.5714286 11,9.28571429 C11,6.42857143 9.16666667,3.33333333 5.5,0 C1.83333333,3.33333333 0,6.42857143 0,9.28571429 C0,13.5714286 2.46243388,16 5.5,16 Z"/>
|
||
|
|
<path d="M5.5,16 C7.01878306,16 8.25,14.7857143 8.25,12.6428571 C8.25,11.2142857 7.33333333,9.66666667 5.5,8 C3.66666667,9.66666667 2.75,11.2142857 2.75,12.6428571 C2.75,14.7857143 3.98121694,16 5.5,16 Z"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</li><li title="flame alt "><svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><path d="m5.5 0c3.66666667 3.33333333 5.5 6.42857143 5.5 9.28571429 0 3.07807311-1.27021139 5.19816551-3.11142285 6.14857691.23027671-.4916139.36142285-1.0920694.36142285-1.7914341 0-1.4285714-.91666667-2.9761904-2.75-4.6428571-1.83333333 1.6666667-2.75 3.2142857-2.75 4.6428571 0 .6993647.13114614 1.2998202.36063321 1.7914341-1.84042182-.9504114-3.11063321-3.0705038-3.11063321-6.14857691 0-2.85714286 1.83333333-5.95238096 5.5-9.28571429z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(5 3)"/></svg></li><li title="flip view "><svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><path d="m15.6893661 13.7425356.5-2c.1339487-.5357949-.191812-1.0787294-.7276069-1.2126781-.0793206-.0198302-.1607738-.0298575-.2425356-.0298575h-13.43844719c-.55228475 0-1 .4477153-1 1 0 .0817618.01002735.163215.0298575.2425356l.5 2c.11129175.445167.51127485.7574644.9701425.7574644h12.43844719c.4588676 0 .8588507-.3122974.9701425-.7574644zm-.1893661-5.2425356.5606576-1.68197288c.1746478-.52394332-.1085122-1.09026329-.6324555-1.26491107-.1023789-.03412629-.2096068-.05145569-.3175235-.0513167l-13.22209729.01713315c-.55228428.00071562-.99941904.44901061-.99870428 1.0012949 0 .10774719.01769263.21476369.05197848.31691043l.55814449 1.66286217m14-5 .3059335-1.83560101c.0907951-.54477032-.2772246-1.05999786-.8219949-1.15079291-.0543315-.00905524-.1093182-.01360608-.164399-.01360608h-12.63907918c-.55228475 0-1 .44771525-1 1 0 .05508086.00455084.11006756.01360608.16439899l.3059335 1.83560101" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 3)"/></svg></li><li title="floppy "><svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(4 4)"><path d="m2.5.5h7l3 3v7c0 1.1045695-.8954305 2-2 2h-8c-1.1045695 0-2-.8954305-2-2v-8c0-1.1045695.8954305-2 2-2z"/><path d="m4.50000081 8.5h4c.55228475 0 1 .44771525 1 1v3h-6v-3c0-.55228475.44771525-1 1-1z"/><path d="m3.5 3.5h2v2h-2z"/></g></svg></li><li title="folder add "><svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 4)"><path d="m.5 1.5v9c0 1.1045695.8954305 2 2 2h10c1.1045695 0 2-.8954305 2-2v-6.00280762c.000802-1.1045695-.8946285-2-1.999198-2-.0002674 0-.0005348.00000006-.0008018.00080218l-5.0000002.00200544-2-2h-4c-.55228475 0-1 .44771525-1 1z"/><path d="m5.5 7.5h4"/><path d="m7.5 9.556v-4.056"/></g></svg></li><li title="folder closed "><svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 4)"><path d="m.5 1.5v9c0 1.1045695.8954305 2 2 2h10c1.1045695 0 2-.8954305 2-2v-6.00280762c.0007656-1.05436179-.8150774-1.91816512-1.8499357-1.99451426l-.1500643-.00468356-5 .00200544-2-2h-4c-.55228475 0-1 .44771525-1 1z"/><path d="m.5 2.5h7"/></g></svg></li><li title="folder minus "><svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 4)"><path d="m.5 1.5v9c0 1.1045695.8954305 2 2 2h10c1.1045695 0 2-.8954305 2-2v-6.00280762c.0007656-1.05436179-.8150774-1.91816512-1.8499357-1.99451426l-.1500643-.00468356-5 .00200544-2-2h-4c-.55228475 0-1 .44771525-1 1z"/><path d="m5.5 7.5h4"/></g></svg></li><li title="folder open "><svg viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 4)"><path d="m15.5 4.5c.000802-1.10737712-.8946285-2.00280762-1.999198-2.00280762l-5.000802.00280762-2-2h-4c-.55228475 0-1 .44771525-1 1v.99719238 2.00280762"/><path d="m.81056316 5.74177845 1.310
|