68 lines
293 KiB
HTML
68 lines
293 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="arrow up down "> <svg viewBox="0 0 32 32.04999923706055" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="currentFill"><g><path d="M 20.292,5.708c 0.39,0.39, 1.024,0.39, 1.414,0c 0.39-0.39, 0.39-1.024,0-1.414l-4-4 C 17.614,0.2, 17.504,0.128, 17.382,0.078c-0.244-0.102-0.52-0.102-0.764,0C 16.498,0.126, 16.392,0.198, 16.3,0.288 C 16.298,0.29, 16.296,0.29, 16.292,0.292l-4,4c-0.39,0.39-0.39,1.024,0,1.414c 0.39,0.39, 1.024,0.39, 1.414,0L 16,3.414l0,25.172 l-2.292-2.292c-0.39-0.39-1.024-0.39-1.414,0c-0.39,0.39-0.39,1.024,0,1.414l 4,4c 0.002,0.002, 0.006,0.002, 0.008,0.006 c 0.090,0.088, 0.198,0.162, 0.316,0.21c 0.244,0.102, 0.52,0.102, 0.764,0c 0.122-0.050, 0.232-0.124, 0.324-0.216l 4-4 c 0.39-0.39, 0.39-1.024,0-1.414c-0.39-0.39-1.024-0.39-1.414,0L 18,28.586L 18,3.414 L 20.292,5.708z"></path></g></svg></li><li title="arrow back "> <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="currentFill"><g><path d="M 4.292,15.708l 6,6c 0.39,0.39, 1.024,0.39, 1.414,0c 0.39-0.39, 0.39-1.024,0-1.414L 7.414,16L 22,16 c 4,0, 6,3.692, 6,7c0,0.552, 0.448,1, 1,1s 1-0.448, 1-1C 30,18.588, 28,14, 22,14L 7.414,14 l 4.292-4.292 c 0.39-0.39, 0.39-1.024,0-1.414c-0.39-0.39-1.024-0.39-1.414,0l-6,6C 3.902,14.684, 3.902,15.316, 4.292,15.708z"></path></g></svg></li><li title="arrow carrot 2down "> <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="currentFill"><g><path d="M 21.956,16.364l-5.992,5.3l-5.992-5.3c-0.392-0.392-1.030-0.392-1.422,0c-0.392,0.392-0.392,1.030,0,1.422 l 6.69,5.918c 0.2,0.2, 0.462,0.296, 0.724,0.292C 16.226,24, 16.488,23.906, 16.688,23.706l 6.69-5.918c 0.392-0.392, 0.392-1.030,0-1.422 S 22.348,15.972, 21.956,16.364zM 23.378,9.192c-0.392-0.392-1.030-0.392-1.422,0l-5.992,5.3l-5.992-5.3C 9.578,8.8, 8.94,8.8, 8.548,9.192 c-0.392,0.392-0.392,1.030,0,1.422l 6.69,5.918c 0.2,0.2, 0.462,0.296, 0.724,0.292c 0.262,0.004, 0.526-0.092, 0.724-0.292l 6.69-5.918 C 23.772,10.222, 23.772,9.586, 23.378,9.192z"></path></g></svg></li><li title="arrow carrot 2down alt2 "> <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="currentFill"><g><path d="M 22.956,17.364l-5.992,5.3l-5.992-5.3c-0.392-0.392-1.030-0.392-1.422,0c-0.392,0.392-0.392,1.030,0,1.422 l 6.69,5.918c 0.2,0.2, 0.462,0.296, 0.724,0.292c 0.262,0.004, 0.526-0.092, 0.724-0.292l 6.69-5.918c 0.392-0.392, 0.392-1.030,0-1.422 S 23.348,16.972, 22.956,17.364zM 22.956,10.192l-5.992,5.3l-5.992-5.3C 10.578,9.8, 9.94,9.8, 9.548,10.192c-0.392,0.392-0.392,1.030,0,1.422 l 6.69,5.918c 0.2,0.2, 0.462,0.296, 0.724,0.292c 0.262,0.004, 0.526-0.092, 0.724-0.292l 6.69-5.918c 0.392-0.392, 0.392-1.030,0-1.422 S 23.348,9.8, 22.956,10.192zM 17.072,2.144c-8.244,0-14.928,6.684-14.928,14.928S 8.828,32, 17.072,32S 32,25.316, 32,17.072 S 25.316,2.144, 17.072,2.144z M 17.072,30c-7.128,0-12.928-5.8-12.928-12.928s 5.8-12.928, 12.928-12.928S 30,9.944, 30,17.072S 24.2,30, 17.072,30z"></path></g></svg></li><li title="arrow carrot 2dwnn alt "> <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="currentFill"><g><path d="M 17.066,2.134c-8.248,0-14.934,6.686-14.934,14.934S 8.82,32, 17.066,32S 32,25.314, 32,17.066 S 25.314,2.134, 17.066,2.134z M 24.378,18.788l-6.69,5.918c-0.2,0.2-0.462,0.296-0.724,0.292C 16.7,25, 16.438,24.906, 16.238,24.706 L 9.548,18.788c-0.392-0.392-0.392-1.030,0-1.422c 0.392-0.392, 1.030-0.392, 1.422,0l 5.992,5.3l 5.992-5.3 c 0.392-0.392, 1.030-0.392, 1.422,0S 24.772,18.394, 24.378,18.788z M 24.378,11.616L 17.688,17.534c-0.2,0.2-0.462,0.296-0.724,0.292 C 16.7,17.828, 16.438,17.734, 16.238,17.534L 9.548,11.616c-0.392-0.392-0.392-1.030,0-1.422C 9.94,9.8, 10.578,9.8, 10.97,10.192l 5.992,5.3 l 5.992-5.3c 0.392-0.392, 1.030-0.392, 1.422,0S 24.772,11.222, 24.378,11.616z"></path></g></svg></li><li title="arrow carrot 2left "> <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www
|