74 lines
320 KiB
HTML
74 lines
320 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>
|
||
|
|
<style>.eva-12 {
|
||
|
|
opacity: 1 !important;
|
||
|
|
}
|
||
|
|
</style><ul class="svg-list"><li class='heading'>outline</li><li title="activity outline "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.eva-11{fill:#fff;opacity:0;}.eva-12{fill:inherit;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="activity"><g id="activity-2" data-name="activity"><rect class="eva-11" transform="translate(24 0) rotate(90)"/><path class="eva-12" d="M14.33,20h-.21a2,2,0,0,1-1.76-1.58L9.68,6,6.92,12.4A1,1,0,0,1,6,13H3a1,1,0,0,1,0-2H5.34L7.85,5.21a2,2,0,0,1,3.79.38L14.32,18l2.76-6.38A1,1,0,0,1,18,11h3a1,1,0,0,1,0,2H18.66l-2.51,5.79A2,2,0,0,1,14.33,20Z"/></g></g></g></svg></li><li title="alert circle outline "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.eva-11{fill:#fff;opacity:0;}.eva-12{fill:inherit;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="alert-circle"><g id="alert-circle-2" data-name="alert-circle"><rect class="eva-11" /><path class="eva-12" d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"/><circle class="eva-12" cx="12" cy="16" r="1"/><path class="eva-12" d="M12,7a1,1,0,0,0-1,1v5a1,1,0,0,0,2,0V8A1,1,0,0,0,12,7Z"/></g></g></g></svg></li><li title="alert triangle outline "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.eva-11{fill:#fff;opacity:0;}.eva-12{fill:inherit;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="alert-triangle"><g id="alert-triangle-2" data-name="alert-triangle"><rect class="eva-11" transform="translate(24 0) rotate(90)"/><path class="eva-12" d="M22.56,16.3,14.89,3.58a3.43,3.43,0,0,0-5.78,0L1.44,16.3a3,3,0,0,0-.05,3A3.37,3.37,0,0,0,4.33,21H19.67a3.37,3.37,0,0,0,2.94-1.66A3,3,0,0,0,22.56,16.3Zm-1.7,2.05a1.31,1.31,0,0,1-1.19.65H4.33a1.31,1.31,0,0,1-1.19-.65,1,1,0,0,1,0-1L10.82,4.62a1.48,1.48,0,0,1,2.36,0l7.67,12.72A1,1,0,0,1,20.86,18.35Z"/><circle class="eva-12" cx="12" cy="16" r="1"/><path class="eva-12" d="M12,8a1,1,0,0,0-1,1v4a1,1,0,0,0,2,0V9A1,1,0,0,0,12,8Z"/></g></g></g></svg></li><li title="archive outline "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.eva-11{fill:none;opacity:0;}.eva-12{fill:inherit;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="archive"><g id="archive-2" data-name="archive"><rect class="eva-11" transform="translate(24 0) rotate(90)"/><path class="eva-12" d="M21,6a3,3,0,0,0-3-3H6A3,3,0,0,0,4,8.22V18a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V8.22A3,3,0,0,0,21,6ZM6,5H18a1,1,0,0,1,0,2H6A1,1,0,0,1,6,5ZM18,18a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1V9H18Z"/><rect class="eva-12" x="9" y="12" rx="0.87" ry="0.87"/></g></g></g></svg></li><li title="arrow back outline "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.eva-11{fill:#fff;opacity:0;}.eva-12{fill:inherit;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="arrow-back"><g id="arrow-back-2" data-name="arrow-back"><rect class="eva-11" transform="translate(24 0) rotate(90)"/><path class="eva-12" d="M19,11H7.14l3.63-4.36A1,1,0,1,0,9.23,5.36l-5,6a1.19,1.19,0,0,0-.09.15c0,.05,0,.08-.07.13A1,1,0,0,0,4,12H4a1,1,0,0,0,.07.36c0,.05,0,.08.07.13a1.19,1.19,0,0,0,.09.15l5,6A1,1,0,0,0,10,19a1,1,0,0,0,.64-.23,1,1,0,0,0,.13-1.41L7.14,13H19a1,1,0,0,0,0-2Z"/></g></g></g></svg></li><li title="arrow circle down outline "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.eva-11{fill:#fff;opacity:0;}.eva-12{fill:inherit;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="arrow-circle-down"><g id="arrow-circle-down-2" data-name="arrow-circle-down"><rect class="eva-11" /><path class="eva-12" d="M14.31,12.41,13,13.66V8a1,1,0,0,0-2,0v5.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,.54.54,0,0,0,.16-.1.49.49,0,0,0,.15-.1l3-2.86a1,1,0,0,0-1.38-1.45Z"/><path class="eva-12" d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"/></g></g></g></svg></li><li title="arrow circle left outline "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.eva-11{fill:#fff;opacity:0;}.eva-12{fill:inherit;}</style></defs><g id="Layer_2" dat
|
||
|
|
</li><li title="speaker outline "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.eva-11{fill:#fff;opacity:0;}.eva-12{fill:inherit;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="speaker"><g id="speaker-2" data-name="speaker"><rect class="eva-11" transform="translate(24 0) rotate(90)"/><path class="eva-12" d="M12,11A3,3,0,1,0,9,8,3,3,0,0,0,12,11Zm0-4a1,1,0,1,1-1,1A1,1,0,0,1,12,7Z"/><path class="eva-12" d="M12,12a3.5,3.5,0,1,0,3.5,3.5A3.5,3.5,0,0,0,12,12Zm0,5a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,17Z"/><path class="eva-12" d="M17,2H7A3,3,0,0,0,4,5V19a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V5A3,3,0,0,0,17,2Zm1,17a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1V5A1,1,0,0,1,7,4H17a1,1,0,0,1,1,1Z"/></g></g></g></svg></li><li title="square outline "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.eva-11{fill:#fff;opacity:0;}.eva-12{fill:inherit;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="square"><g id="square-2" data-name="square"><rect class="eva-11" /><path class="eva-12" d="M18,21H6a3,3,0,0,1-3-3V6A3,3,0,0,1,6,3H18a3,3,0,0,1,3,3V18A3,3,0,0,1,18,21ZM6,5A1,1,0,0,0,5,6V18a1,1,0,0,0,1,1H18a1,1,0,0,0,1-1V6a1,1,0,0,0-1-1Z"/></g></g></g></svg></li><li title="star outline "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.eva-11{fill:#fff;opacity:0;}.eva-12{fill:inherit;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="star"><g id="star-2" data-name="star"><rect class="eva-11" transform="translate(24 0) rotate(90)"/><path class="eva-12" d="M17.56,21a1,1,0,0,1-.46-.11L12,18.22,6.9,20.89a1,1,0,0,1-1.45-1.06l1-5.63-4.12-4a1,1,0,0,1-.25-1,1,1,0,0,1,.81-.68l5.7-.83L11.1,2.56a1,1,0,0,1,1.8,0l2.54,5.12,5.7.83a1,1,0,0,1,.81.68,1,1,0,0,1-.25,1l-4.12,4,1,5.63a1,1,0,0,1-.4,1A1,1,0,0,1,17.56,21ZM12,16.1a.92.92,0,0,1,.46.11l3.77,2L15.51,14a1,1,0,0,1,.29-.89l3-2.93-4.2-.62A1,1,0,0,1,13.89,9L12,5.25,10.11,9a1,1,0,0,1-.75.54l-4.2.62,3,2.93a1,1,0,0,1,.29.89l-.72,4.16,3.77-2A.92.92,0,0,1,12,16.1Z"/></g></g></g></svg></li><li title="stop circle outline "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.eva-11{fill:#fff;opacity:0;}.eva-12{fill:inherit;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="stop-circle"><g id="stop-circle-2" data-name="stop-circle"><rect class="eva-11" /><path class="eva-12" d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"/><path class="eva-12" d="M14.75,8H9.25A1.25,1.25,0,0,0,8,9.25v5.5A1.25,1.25,0,0,0,9.25,16h5.5A1.25,1.25,0,0,0,16,14.75V9.25A1.25,1.25,0,0,0,14.75,8ZM14,14H10V10h4Z"/></g></g></g></svg></li><li title="sun outline "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.eva-11{fill:#fff;opacity:0;}.eva-12{fill:inherit;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="sun"><g id="sun-2" data-name="sun"><rect class="eva-11" transform="translate(24 24) rotate(180)"/><path class="eva-12" d="M12,6a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V5A1,1,0,0,0,12,6Z"/><path class="eva-12" d="M21,11H19a1,1,0,0,0,0,2h2a1,1,0,0,0,0-2Z"/><path class="eva-12" d="M6,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H5A1,1,0,0,0,6,12Z"/><path class="eva-12" d="M6.22,5A1,1,0,0,0,4.83,6.47L6.27,7.86A1,1,0,0,0,7,8.14a1,1,0,0,0,.72-.31,1,1,0,0,0,0-1.41Z"/><path class="eva-12" d="M17,8.14a1,1,0,0,0,.69-.28l1.44-1.39A1,1,0,0,0,17.78,5L16.34,6.42a1,1,0,0,0,0,1.41A1,1,0,0,0,17,8.14Z"/><path class="eva-12" d="M12,18a1,1,0,0,0-1,1v2a1,1,0,0,0,2,0V19A1,1,0,0,0,12,18Z"/><path class="eva-12" d="M17.73,16.14a1,1,0,0,0-1.39,1.44L17.78,19a1,1,0,0,0,.69.28,1,1,0,0,0,.72-.3,1,1,0,0,0,0-1.42Z"/><path class="eva-12" d="M6.27,16.14,4.83,17.53a1,1,0,0,0,0,1.42,1,1,0,0,0,.72.3A1,1,0,0,0,6.22,19l1.44-1.39a1,1,0,0,0-1.39-1.44Z"/><path class="eva-12" d="M12,8a4,4,0,1,0,4,4A4,4,0,0,0,12,8Zm0,6a2,2,0,1,1,2-2A2,2,0,0,1,12,14Z"/></g></g></g></svg></li><li title="swap outline "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.eva-11{fill:#fff;opacity:0;}.eva-12{fill:inherit;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="swap"><g id="swap-2" data-name="swap"><rect cla
|
||
|
|
</li><li title="speaker "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.eva-11{fill:#fff;opacity:0;}.eva-12{fill:inherit;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="speaker"><g id="speaker-2" data-name="speaker"><rect class="eva-11" transform="translate(24 0) rotate(90)"/><circle class="eva-12" cx="12" cy="15.5" r="1.5"/><circle class="eva-12" cx="12" cy="8" r="1"/><path class="eva-12" d="M17,2H7A3,3,0,0,0,4,5V19a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V5A3,3,0,0,0,17,2ZM12,5A3,3,0,1,1,9,8,3,3,0,0,1,12,5Zm0,14a3.5,3.5,0,1,1,3.5-3.5A3.5,3.5,0,0,1,12,19Z"/></g></g></g></svg></li><li title="square "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.eva-11{fill:#fff;opacity:0;}.eva-12{fill:inherit;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="square"><g id="square-2" data-name="square"><rect class="eva-11" /><path class="eva-12" d="M18,21H6a3,3,0,0,1-3-3V6A3,3,0,0,1,6,3H18a3,3,0,0,1,3,3V18A3,3,0,0,1,18,21ZM6,5A1,1,0,0,0,5,6V18a1,1,0,0,0,1,1H18a1,1,0,0,0,1-1V6a1,1,0,0,0-1-1Z"/></g></g></g></svg></li><li title="star "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.eva-11{fill:#fff;opacity:0;}.eva-12{fill:inherit;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="star"><g id="star-2" data-name="star"><rect class="eva-11" transform="translate(24 0) rotate(90)"/><path class="eva-12" d="M17.56,21a1,1,0,0,1-.46-.11L12,18.22,6.9,20.89a1,1,0,0,1-1.45-1.06l1-5.63-4.12-4a1,1,0,0,1-.25-1,1,1,0,0,1,.81-.68l5.7-.83L11.1,2.56a1,1,0,0,1,1.8,0l2.54,5.12,5.7.83a1,1,0,0,1,.81.68,1,1,0,0,1-.25,1l-4.12,4,1,5.63a1,1,0,0,1-.4,1A1,1,0,0,1,17.56,21Z"/></g></g></g></svg></li><li title="stop circle "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.eva-11{fill:#fff;opacity:0;}.eva-12{fill:inherit;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="stop-circle"><g id="stop-circle-2" data-name="stop-circle"><rect class="eva-11" /><path class="eva-12" d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm4,12.75A1.25,1.25,0,0,1,14.75,16H9.25A1.25,1.25,0,0,1,8,14.75V9.25A1.25,1.25,0,0,1,9.25,8h5.5A1.25,1.25,0,0,1,16,9.25Z"/><rect class="eva-12" x="10" y="10" /></g></g></g></svg></li><li title="sun "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.eva-11{fill:#fff;opacity:0;}.eva-12{fill:inherit;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="sun"><g id="sun-2" data-name="sun"><rect class="eva-11" transform="translate(24 24) rotate(180)"/><path class="eva-12" d="M12,6a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V5A1,1,0,0,0,12,6Z"/><path class="eva-12" d="M21,11H19a1,1,0,0,0,0,2h2a1,1,0,0,0,0-2Z"/><path class="eva-12" d="M6,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H5A1,1,0,0,0,6,12Z"/><path class="eva-12" d="M6.22,5A1,1,0,0,0,4.83,6.47L6.27,7.86A1,1,0,0,0,7,8.14a1,1,0,0,0,.72-.31,1,1,0,0,0,0-1.41Z"/><path class="eva-12" d="M17,8.14a1,1,0,0,0,.69-.28l1.44-1.39A1,1,0,0,0,17.78,5L16.34,6.42a1,1,0,0,0,0,1.41A1,1,0,0,0,17,8.14Z"/><path class="eva-12" d="M12,18a1,1,0,0,0-1,1v2a1,1,0,0,0,2,0V19A1,1,0,0,0,12,18Z"/><path class="eva-12" d="M17.73,16.14a1,1,0,0,0-1.39,1.44L17.78,19a1,1,0,0,0,.69.28,1,1,0,0,0,.72-.3,1,1,0,0,0,0-1.42Z"/><path class="eva-12" d="M6.27,16.14,4.83,17.53a1,1,0,0,0,0,1.42,1,1,0,0,0,.72.3A1,1,0,0,0,6.22,19l1.44-1.39a1,1,0,0,0-1.39-1.44Z"/><path class="eva-12" d="M12,8a4,4,0,1,0,4,4A4,4,0,0,0,12,8Z"/></g></g></g></svg></li><li title="swap "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.eva-11{fill:#fff;opacity:0;}.eva-12{fill:inherit;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="swap"><g id="swap-2" data-name="swap"><rect class="eva-11" transform="translate(0 24) rotate(-90)"/><path class="eva-12" d="M4,9H17l-1.6,1.2a1,1,0,0,0-.2,1.4,1,1,0,0,0,.8.4,1,1,0,0,0,.6-.2l4-3a1,1,0,0,0,0-1.59l-3.86-3a1,1,0,0,0-1.23,1.58L17.08,7H4A1,1,0,0,0,4,9Z"/><path class="eva-12" d="M20,16H7l1.6-1.2a1,1,0,0,0-1.2-1.6l-4,3a1,1,0,0,0,0,1.59l3.86,3a1,1,0,0,0,.61.21,1,1,0,0,0,.79-.39,1,1,0,0,0-.17-1.4L6.92,18H20a1,1,0,0,0,0-2Z"/></g></g></g></svg></li><li title="sync "><svg xml
|