mirror of
https://github.com/PHIDIAS0303/ExpCluster.git
synced 2025-12-27 11:35:22 +09:00
569 lines
12 KiB
CSS
569 lines
12 KiB
CSS
/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */.icon {
|
|
box-sizing:border-box;
|
|
display:inline-block;
|
|
font-size:inherit;
|
|
font-style:normal;
|
|
height:1em;
|
|
position:relative;
|
|
text-indent:-999rem;
|
|
vertical-align:middle;
|
|
width:1em
|
|
}
|
|
.icon::after,
|
|
.icon::before {
|
|
display:block;
|
|
left:50%;
|
|
position:absolute;
|
|
top:50%;
|
|
-webkit-transform:translate(-50%,-50%);
|
|
-ms-transform:translate(-50%,-50%);
|
|
transform:translate(-50%,-50%)
|
|
}
|
|
.icon-arrow-down::before,
|
|
.icon-arrow-left::before,
|
|
.icon-arrow-right::before,
|
|
.icon-arrow-up::before,
|
|
.icon-back::before,
|
|
.icon-downward::before,
|
|
.icon-forward::before,
|
|
.icon-upward::before {
|
|
border:.2rem solid currentColor;
|
|
border-bottom:0;
|
|
border-right:0;
|
|
content:"";
|
|
height:.65em;
|
|
-webkit-transform:translate(-25%,-50%) rotate(-45deg);
|
|
-ms-transform:translate(-25%,-50%) rotate(-45deg);
|
|
transform:translate(-25%,-50%) rotate(-45deg);
|
|
width:.65em
|
|
}
|
|
.icon-arrow-down,
|
|
.icon-downward {
|
|
-webkit-transform:rotate(-90deg);
|
|
-ms-transform:rotate(-90deg);
|
|
transform:rotate(-90deg)
|
|
}
|
|
.icon-arrow-right,
|
|
.icon-forward {
|
|
-webkit-transform:rotate(180deg);
|
|
-ms-transform:rotate(180deg);
|
|
transform:rotate(180deg)
|
|
}
|
|
.icon-arrow-up,
|
|
.icon-upward {
|
|
-webkit-transform:rotate(90deg);
|
|
-ms-transform:rotate(90deg);
|
|
transform:rotate(90deg)
|
|
}
|
|
.icon-back::before,
|
|
.icon-downward::before,
|
|
.icon-forward::before,
|
|
.icon-upward::before {
|
|
-webkit-transform:translate(-50%,-50%) rotate(-45deg);
|
|
-ms-transform:translate(-50%,-50%) rotate(-45deg);
|
|
transform:translate(-50%,-50%) rotate(-45deg)
|
|
}
|
|
.icon-back::after,
|
|
.icon-downward::after,
|
|
.icon-forward::after,
|
|
.icon-upward::after {
|
|
background:currentColor;
|
|
content:"";
|
|
height:.2rem;
|
|
left:55%;
|
|
width:.8em
|
|
}
|
|
.icon-caret::before {
|
|
border-left:.3em solid transparent;
|
|
border-right:.3em solid transparent;
|
|
border-top:.3em solid currentColor;
|
|
content:"";
|
|
height:0;
|
|
-webkit-transform:translate(-50%,-25%);
|
|
-ms-transform:translate(-50%,-25%);
|
|
transform:translate(-50%,-25%);
|
|
width:0
|
|
}
|
|
.icon-menu::before {
|
|
background:currentColor;
|
|
box-shadow:0 -.35em,0 .35em;
|
|
content:"";
|
|
height:.2rem;
|
|
width:100%
|
|
}
|
|
.icon-apps::before {
|
|
background:currentColor;
|
|
box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;
|
|
content:"";
|
|
height:.3rem;
|
|
width:.3rem
|
|
}
|
|
.icon-resize-horiz::after,
|
|
.icon-resize-horiz::before,
|
|
.icon-resize-vert::after,
|
|
.icon-resize-vert::before {
|
|
border:.2rem solid currentColor;
|
|
border-bottom:0;
|
|
border-right:0;
|
|
content:"";
|
|
height:.45em;
|
|
width:.45em
|
|
}
|
|
.icon-resize-horiz::before,
|
|
.icon-resize-vert::before {
|
|
-webkit-transform:translate(-50%,-90%) rotate(45deg);
|
|
-ms-transform:translate(-50%,-90%) rotate(45deg);
|
|
transform:translate(-50%,-90%) rotate(45deg)
|
|
}
|
|
.icon-resize-horiz::after,
|
|
.icon-resize-vert::after {
|
|
-webkit-transform:translate(-50%,-10%) rotate(225deg);
|
|
-ms-transform:translate(-50%,-10%) rotate(225deg);
|
|
transform:translate(-50%,-10%) rotate(225deg)
|
|
}
|
|
.icon-resize-horiz::before {
|
|
-webkit-transform:translate(-90%,-50%) rotate(-45deg);
|
|
-ms-transform:translate(-90%,-50%) rotate(-45deg);
|
|
transform:translate(-90%,-50%) rotate(-45deg)
|
|
}
|
|
.icon-resize-horiz::after {
|
|
-webkit-transform:translate(-10%,-50%) rotate(135deg);
|
|
-ms-transform:translate(-10%,-50%) rotate(135deg);
|
|
transform:translate(-10%,-50%) rotate(135deg)
|
|
}
|
|
.icon-more-horiz::before,
|
|
.icon-more-vert::before {
|
|
background:currentColor;
|
|
border-radius:50%;
|
|
box-shadow:-.4em 0,.4em 0;
|
|
content:"";
|
|
height:.3rem;
|
|
width:.3rem
|
|
}
|
|
.icon-more-vert::before {
|
|
box-shadow:0 -.4em,0 .4em
|
|
}
|
|
.icon-cross::before,
|
|
.icon-minus::before,
|
|
.icon-plus::before {
|
|
background:currentColor;
|
|
content:"";
|
|
height:.2rem;
|
|
width:100%
|
|
}
|
|
.icon-cross::after,
|
|
.icon-plus::after {
|
|
background:currentColor;
|
|
content:"";
|
|
height:100%;
|
|
width:.2rem
|
|
}
|
|
.icon-cross::before {
|
|
width:100%
|
|
}
|
|
.icon-cross::after {
|
|
height:100%
|
|
}
|
|
.icon-cross::after,
|
|
.icon-cross::before {
|
|
-webkit-transform:translate(-50%,-50%) rotate(45deg);
|
|
-ms-transform:translate(-50%,-50%) rotate(45deg);
|
|
transform:translate(-50%,-50%) rotate(45deg)
|
|
}
|
|
.icon-check::before {
|
|
border:.2rem solid currentColor;
|
|
border-right:0;
|
|
border-top:0;
|
|
content:"";
|
|
height:.5em;
|
|
-webkit-transform:translate(-50%,-75%) rotate(-45deg);
|
|
-ms-transform:translate(-50%,-75%) rotate(-45deg);
|
|
transform:translate(-50%,-75%) rotate(-45deg);
|
|
width:.9em
|
|
}
|
|
.icon-stop {
|
|
border:.2rem solid currentColor;
|
|
border-radius:50%
|
|
}
|
|
.icon-stop::before {
|
|
background:currentColor;
|
|
content:"";
|
|
height:.2rem;
|
|
-webkit-transform:translate(-50%,-50%) rotate(45deg);
|
|
-ms-transform:translate(-50%,-50%) rotate(45deg);
|
|
transform:translate(-50%,-50%) rotate(45deg);
|
|
width:1em
|
|
}
|
|
.icon-shutdown {
|
|
border:.2rem solid currentColor;
|
|
border-radius:50%;
|
|
border-top-color:transparent
|
|
}
|
|
.icon-shutdown::before {
|
|
background:currentColor;
|
|
content:"";
|
|
height:.5em;
|
|
top:.1em;
|
|
width:.2rem
|
|
}
|
|
.icon-refresh::before {
|
|
border:.2rem solid currentColor;
|
|
border-radius:50%;
|
|
border-right-color:transparent;
|
|
content:"";
|
|
height:1em;
|
|
width:1em
|
|
}
|
|
.icon-refresh::after {
|
|
border:.2em solid currentColor;
|
|
border-left-color:transparent;
|
|
border-top-color:transparent;
|
|
content:"";
|
|
height:0;
|
|
left:80%;
|
|
top:20%;
|
|
width:0
|
|
}
|
|
.icon-search::before {
|
|
border:.2rem solid currentColor;
|
|
border-radius:50%;
|
|
content:"";
|
|
height:.75em;
|
|
left:5%;
|
|
top:5%;
|
|
-webkit-transform:translate(0,0) rotate(45deg);
|
|
-ms-transform:translate(0,0) rotate(45deg);
|
|
transform:translate(0,0) rotate(45deg);
|
|
width:.75em
|
|
}
|
|
.icon-search::after {
|
|
background:currentColor;
|
|
content:"";
|
|
height:.2rem;
|
|
left:80%;
|
|
top:80%;
|
|
-webkit-transform:translate(-50%,-50%) rotate(45deg);
|
|
-ms-transform:translate(-50%,-50%) rotate(45deg);
|
|
transform:translate(-50%,-50%) rotate(45deg);
|
|
width:.4em
|
|
}
|
|
.icon-edit::before {
|
|
border:.2rem solid currentColor;
|
|
content:"";
|
|
height:.4em;
|
|
-webkit-transform:translate(-40%,-60%) rotate(-45deg);
|
|
-ms-transform:translate(-40%,-60%) rotate(-45deg);
|
|
transform:translate(-40%,-60%) rotate(-45deg);
|
|
width:.85em
|
|
}
|
|
.icon-edit::after {
|
|
border:.15em solid currentColor;
|
|
border-right-color:transparent;
|
|
border-top-color:transparent;
|
|
content:"";
|
|
height:0;
|
|
left:5%;
|
|
top:95%;
|
|
-webkit-transform:translate(0,-100%);
|
|
-ms-transform:translate(0,-100%);
|
|
transform:translate(0,-100%);
|
|
width:0
|
|
}
|
|
.icon-delete::before {
|
|
border:.2rem solid currentColor;
|
|
border-bottom-left-radius:.2rem;
|
|
border-bottom-right-radius:.2rem;
|
|
border-top:0;
|
|
content:"";
|
|
height:.75em;
|
|
top:60%;
|
|
width:.75em
|
|
}
|
|
.icon-delete::after {
|
|
background:currentColor;
|
|
box-shadow:-.25em .2em,.25em .2em;
|
|
content:"";
|
|
height:.2rem;
|
|
top:.1rem;
|
|
width:.5em
|
|
}
|
|
.icon-share {
|
|
border:.2rem solid currentColor;
|
|
border-radius:.2rem;
|
|
border-right:0;
|
|
border-top:0
|
|
}
|
|
.icon-share::before {
|
|
border:.2rem solid currentColor;
|
|
border-left:0;
|
|
border-top:0;
|
|
content:"";
|
|
height:.4em;
|
|
left:100%;
|
|
top:.25em;
|
|
-webkit-transform:translate(-125%,-50%) rotate(-45deg);
|
|
-ms-transform:translate(-125%,-50%) rotate(-45deg);
|
|
transform:translate(-125%,-50%) rotate(-45deg);
|
|
width:.4em
|
|
}
|
|
.icon-share::after {
|
|
border:.2rem solid currentColor;
|
|
border-bottom:0;
|
|
border-radius:75% 0;
|
|
border-right:0;
|
|
content:"";
|
|
height:.5em;
|
|
width:.6em
|
|
}
|
|
.icon-flag::before {
|
|
background:currentColor;
|
|
content:"";
|
|
height:1em;
|
|
left:15%;
|
|
width:.2rem
|
|
}
|
|
.icon-flag::after {
|
|
border:.2rem solid currentColor;
|
|
border-bottom-right-radius:.2rem;
|
|
border-left:0;
|
|
border-top-right-radius:.2rem;
|
|
content:"";
|
|
height:.65em;
|
|
left:60%;
|
|
top:35%;
|
|
width:.8em
|
|
}
|
|
.icon-bookmark::before {
|
|
border:.2rem solid currentColor;
|
|
border-bottom:0;
|
|
border-top-left-radius:.2rem;
|
|
border-top-right-radius:.2rem;
|
|
content:"";
|
|
height:.9em;
|
|
width:.8em
|
|
}
|
|
.icon-bookmark::after {
|
|
border:.2rem solid currentColor;
|
|
border-bottom:0;
|
|
border-left:0;
|
|
border-radius:.2rem;
|
|
content:"";
|
|
height:.5em;
|
|
-webkit-transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);
|
|
-ms-transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);
|
|
transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);
|
|
width:.5em
|
|
}
|
|
.icon-download,
|
|
.icon-upload {
|
|
border-bottom:.2rem solid currentColor
|
|
}
|
|
.icon-download::before,
|
|
.icon-upload::before {
|
|
border:.2rem solid currentColor;
|
|
border-bottom:0;
|
|
border-right:0;
|
|
content:"";
|
|
height:.5em;
|
|
-webkit-transform:translate(-50%,-60%) rotate(-135deg);
|
|
-ms-transform:translate(-50%,-60%) rotate(-135deg);
|
|
transform:translate(-50%,-60%) rotate(-135deg);
|
|
width:.5em
|
|
}
|
|
.icon-download::after,
|
|
.icon-upload::after {
|
|
background:currentColor;
|
|
content:"";
|
|
height:.6em;
|
|
top:40%;
|
|
width:.2rem
|
|
}
|
|
.icon-upload::before {
|
|
-webkit-transform:translate(-50%,-60%) rotate(45deg);
|
|
-ms-transform:translate(-50%,-60%) rotate(45deg);
|
|
transform:translate(-50%,-60%) rotate(45deg)
|
|
}
|
|
.icon-upload::after {
|
|
top:50%
|
|
}
|
|
.icon-time {
|
|
border:.2rem solid currentColor;
|
|
border-radius:50%
|
|
}
|
|
.icon-time::before {
|
|
background:currentColor;
|
|
content:"";
|
|
height:.4em;
|
|
-webkit-transform:translate(-50%,-75%);
|
|
-ms-transform:translate(-50%,-75%);
|
|
transform:translate(-50%,-75%);
|
|
width:.2rem
|
|
}
|
|
.icon-time::after {
|
|
background:currentColor;
|
|
content:"";
|
|
height:.3em;
|
|
-webkit-transform:translate(-50%,-75%) rotate(90deg);
|
|
-ms-transform:translate(-50%,-75%) rotate(90deg);
|
|
transform:translate(-50%,-75%) rotate(90deg);
|
|
-webkit-transform-origin:50% 90%;
|
|
-ms-transform-origin:50% 90%;
|
|
transform-origin:50% 90%;
|
|
width:.2rem
|
|
}
|
|
.icon-mail::before {
|
|
border:.2rem solid currentColor;
|
|
border-radius:.2rem;
|
|
content:"";
|
|
height:.8em;
|
|
width:1em
|
|
}
|
|
.icon-mail::after {
|
|
border:.2rem solid currentColor;
|
|
border-right:0;
|
|
border-top:0;
|
|
content:"";
|
|
height:.5em;
|
|
-webkit-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);
|
|
-ms-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);
|
|
transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);
|
|
width:.5em
|
|
}
|
|
.icon-people::before {
|
|
border:.2rem solid currentColor;
|
|
border-radius:50%;
|
|
content:"";
|
|
height:.45em;
|
|
top:25%;
|
|
width:.45em
|
|
}
|
|
.icon-people::after {
|
|
border:.2rem solid currentColor;
|
|
border-radius:50% 50% 0 0;
|
|
content:"";
|
|
height:.4em;
|
|
top:75%;
|
|
width:.9em
|
|
}
|
|
.icon-message {
|
|
border:.2rem solid currentColor;
|
|
border-bottom:0;
|
|
border-radius:.2rem;
|
|
border-right:0
|
|
}
|
|
.icon-message::before {
|
|
border:.2rem solid currentColor;
|
|
border-bottom-right-radius:.2rem;
|
|
border-left:0;
|
|
border-top:0;
|
|
content:"";
|
|
height:.8em;
|
|
left:65%;
|
|
top:40%;
|
|
width:.7em
|
|
}
|
|
.icon-message::after {
|
|
background:currentColor;
|
|
border-radius:.2rem;
|
|
content:"";
|
|
height:.3em;
|
|
left:10%;
|
|
top:100%;
|
|
-webkit-transform:translate(0,-90%) rotate(45deg);
|
|
-ms-transform:translate(0,-90%) rotate(45deg);
|
|
transform:translate(0,-90%) rotate(45deg);
|
|
width:.2rem
|
|
}
|
|
.icon-photo {
|
|
border:.2rem solid currentColor;
|
|
border-radius:.2rem
|
|
}
|
|
.icon-photo::before {
|
|
border:.2rem solid currentColor;
|
|
border-radius:50%;
|
|
content:"";
|
|
height:.25em;
|
|
left:35%;
|
|
top:35%;
|
|
width:.25em
|
|
}
|
|
.icon-photo::after {
|
|
border:.2rem solid currentColor;
|
|
border-bottom:0;
|
|
border-left:0;
|
|
content:"";
|
|
height:.5em;
|
|
left:60%;
|
|
-webkit-transform:translate(-50%,25%) rotate(-45deg);
|
|
-ms-transform:translate(-50%,25%) rotate(-45deg);
|
|
transform:translate(-50%,25%) rotate(-45deg);
|
|
width:.5em
|
|
}
|
|
.icon-link::after,
|
|
.icon-link::before {
|
|
border:.2rem solid currentColor;
|
|
border-radius:5em 0 0 5em;
|
|
border-right:0;
|
|
content:"";
|
|
height:.5em;
|
|
width:.75em
|
|
}
|
|
.icon-link::before {
|
|
-webkit-transform:translate(-70%,-45%) rotate(-45deg);
|
|
-ms-transform:translate(-70%,-45%) rotate(-45deg);
|
|
transform:translate(-70%,-45%) rotate(-45deg)
|
|
}
|
|
.icon-link::after {
|
|
-webkit-transform:translate(-30%,-55%) rotate(135deg);
|
|
-ms-transform:translate(-30%,-55%) rotate(135deg);
|
|
transform:translate(-30%,-55%) rotate(135deg)
|
|
}
|
|
.icon-location::before {
|
|
border:.2rem solid currentColor;
|
|
border-radius:50% 50% 50% 0;
|
|
content:"";
|
|
height:.8em;
|
|
-webkit-transform:translate(-50%,-60%) rotate(-45deg);
|
|
-ms-transform:translate(-50%,-60%) rotate(-45deg);
|
|
transform:translate(-50%,-60%) rotate(-45deg);
|
|
width:.8em
|
|
}
|
|
.icon-location::after {
|
|
border:.2rem solid currentColor;
|
|
border-radius:50%;
|
|
content:"";
|
|
height:.2em;
|
|
-webkit-transform:translate(-50%,-80%);
|
|
-ms-transform:translate(-50%,-80%);
|
|
transform:translate(-50%,-80%);
|
|
width:.2em
|
|
}
|
|
.icon-emoji {
|
|
border:.2rem solid currentColor;
|
|
border-radius:50%
|
|
}
|
|
.icon-emoji::before {
|
|
border-radius:50%;
|
|
box-shadow:-.17em -.15em,.17em -.15em;
|
|
content:"";
|
|
height:.1em;
|
|
width:.1em
|
|
}
|
|
.icon-emoji::after {
|
|
border:.2rem solid currentColor;
|
|
border-bottom-color:transparent;
|
|
border-radius:50%;
|
|
border-right-color:transparent;
|
|
content:"";
|
|
height:.5em;
|
|
-webkit-transform:translate(-50%,-40%) rotate(-135deg);
|
|
-ms-transform:translate(-50%,-40%) rotate(-135deg);
|
|
transform:translate(-50%,-40%) rotate(-135deg);
|
|
width:.5em
|
|
}
|
|
.btn .icon,
|
|
.menu .icon,
|
|
.toast .icon {
|
|
vertical-align:-10%
|
|
}
|