mirror of
https://github.com/rstrouse/ESPSomfy-RTS.git
synced 2025-12-12 18:42:10 +01:00
1542 lines
No EOL
38 KiB
CSS
1542 lines
No EOL
38 KiB
CSS
i[class*="icss-"] {
|
|
position: relative;
|
|
display: inline-block;
|
|
font-style: normal;
|
|
background-color: currentColor;
|
|
box-sizing: border-box;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
i[class*="icss-"]:before,
|
|
i[class*="icss-"]:after {
|
|
content: "";
|
|
border-width: 0;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Size */
|
|
[class*="icss-"].xxsmall {
|
|
font-size: .45em;
|
|
}
|
|
|
|
[class*="icss-"].xsmall {
|
|
font-size: .5em;
|
|
}
|
|
|
|
[class*="icss-"].small {
|
|
font-size: .65em;
|
|
}
|
|
|
|
[class*="icss-"].x1_5 {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
[class*="icss-"].x2 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
[class*="icss-"].x2_5 {
|
|
font-size: 2.5em;
|
|
}
|
|
|
|
[class*="icss-"].x3 {
|
|
font-size: 3em;
|
|
}
|
|
|
|
[class*="icss-"].x4 {
|
|
font-size: 4em;
|
|
}
|
|
|
|
[class*="icss-"].x5 {
|
|
font-size: 5em;
|
|
}
|
|
|
|
/* Align text-bottom */
|
|
i[class*="icss-"].bottom {
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
/* flip */
|
|
.flip {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
/* rotate */
|
|
i[class*="icss-"].rot10 {
|
|
transform: rotate(10deg);
|
|
}
|
|
|
|
i[class*="icss-"].rot-10 {
|
|
transform: rotate(-10deg);
|
|
}
|
|
|
|
i[class*="icss-"].rot20 {
|
|
transform: rotate(20deg);
|
|
}
|
|
|
|
i[class*="icss-"].rot-20 {
|
|
transform: rotate(-20deg);
|
|
}
|
|
|
|
i[class*="icss-"].rot45 {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
i[class*="icss-"].rot-45 {
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
i[class*="icss-"].rot90 {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
i[class*="icss-"].rot-90 {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
i[class*="icss-"].rot180 {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
i[class*="icss-"].rot-180 {
|
|
transform: rotate(-180deg);
|
|
}
|
|
|
|
/* force animation */
|
|
i.icss-anim,
|
|
i.icss-anim:before,
|
|
i.icss-anim:after {
|
|
transition: all 1s;
|
|
}
|
|
|
|
/* Spin */
|
|
.icss-spin {
|
|
animation: spin 2s infinite linear;
|
|
}
|
|
|
|
.icss-pulse {
|
|
animation: spin 1s infinite steps(8);
|
|
}
|
|
|
|
.icss-spin-hover:hover {
|
|
animation: spin 2s infinite linear;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
/* BELL */
|
|
@keyframes ring {
|
|
0% {
|
|
transform: rotate(-15deg)
|
|
}
|
|
|
|
2% {
|
|
transform: rotate(15deg)
|
|
}
|
|
|
|
4% {
|
|
transform: rotate(-18deg)
|
|
}
|
|
|
|
6% {
|
|
transform: rotate(18deg)
|
|
}
|
|
|
|
8% {
|
|
transform: rotate(-22deg)
|
|
}
|
|
|
|
10% {
|
|
transform: rotate(22deg)
|
|
}
|
|
|
|
12% {
|
|
transform: rotate(-18deg)
|
|
}
|
|
|
|
14% {
|
|
transform: rotate(18deg)
|
|
}
|
|
|
|
16% {
|
|
transform: rotate(-12deg)
|
|
}
|
|
|
|
18% {
|
|
transform: rotate(12deg)
|
|
}
|
|
|
|
20%,100% {
|
|
transform: rotate(0deg)
|
|
}
|
|
}
|
|
|
|
.icss-ring {
|
|
animation: ring 2s infinite ease;
|
|
}
|
|
|
|
.icss-ring-hover:hover {
|
|
animation: ring 2s infinite ease;
|
|
}
|
|
|
|
/* VERTICAL */
|
|
@keyframes vertical {
|
|
0% {
|
|
transform: translate(0,-3px)
|
|
}
|
|
|
|
4% {
|
|
transform: translate(0,3px)
|
|
}
|
|
|
|
8% {
|
|
transform: translate(0,-3px)
|
|
}
|
|
|
|
12% {
|
|
transform: translate(0,3px)
|
|
}
|
|
|
|
16% {
|
|
transform: translate(0,-3px)
|
|
}
|
|
|
|
20% {
|
|
transform: translate(0,3px)
|
|
}
|
|
|
|
22%,100% {
|
|
transform: translate(0,0)
|
|
}
|
|
}
|
|
|
|
.icss-vibes,
|
|
.icss-vibes-hover:hover {
|
|
animation: vertical 2s ease infinite;
|
|
}
|
|
|
|
/* HORIZONTAL */
|
|
@keyframes horizontal {
|
|
0% {
|
|
transform: translate(0,0)
|
|
}
|
|
|
|
6% {
|
|
transform: translate(5px,0)
|
|
}
|
|
|
|
12% {
|
|
transform: translate(0,0)
|
|
}
|
|
|
|
18% {
|
|
transform: translate(5px,0)
|
|
}
|
|
|
|
24% {
|
|
transform: translate(0,0)
|
|
}
|
|
|
|
30% {
|
|
transform: translate(5px,0)
|
|
}
|
|
|
|
36%,100% {
|
|
transform: translate(0,0)
|
|
}
|
|
}
|
|
|
|
.icss-shake,
|
|
.icss-shake-hover:hover {
|
|
animation: horizontal 2s ease infinite;
|
|
}
|
|
|
|
/* TADA */
|
|
@keyframes tada {
|
|
0% {
|
|
transform: scale(1)
|
|
}
|
|
|
|
10%,20% {
|
|
transform: scale(.9) rotate(-8deg);
|
|
}
|
|
|
|
30%,50%,70% {
|
|
transform: scale(1.3) rotate(8deg)
|
|
}
|
|
|
|
40%,60% {
|
|
transform: scale(1.3) rotate(-8deg)
|
|
}
|
|
|
|
80%,100% {
|
|
transform: scale(1) rotate(0)
|
|
}
|
|
}
|
|
|
|
.icss-tada,
|
|
.icss-tada-hover:hover {
|
|
animation: tada 2s linear infinite;
|
|
}
|
|
|
|
/* Reverse animation */
|
|
.icss-reverse {
|
|
animation-direction: reverse;
|
|
}
|
|
|
|
[class*="-hover"].icss-reverse:hover {
|
|
animation-direction: reverse;
|
|
}
|
|
.icss-panel-left {
|
|
display:none;
|
|
}
|
|
.icss-panel-right {
|
|
display: none;
|
|
}
|
|
/* Stack icons */
|
|
.icss-stack {
|
|
position: relative;
|
|
width: 1em;
|
|
height: 1em;
|
|
display: inline-block;
|
|
}
|
|
|
|
.icss-stack i[class*="icss-"] {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-.5em, -.5em);
|
|
}
|
|
|
|
.icss-stack i[class*="icss-"].bottom {
|
|
bottom: 0;
|
|
top: auto;
|
|
}
|
|
|
|
/* shadow icon */
|
|
.icss-shadow {
|
|
position: relative;
|
|
width: 1em;
|
|
height: 1em;
|
|
display: inline-block;
|
|
}
|
|
|
|
.icss-shadow i[class*="icss-"] {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-.5em, -.5em);
|
|
}
|
|
|
|
.icss-shadow i[class*="icss-"]:first-child {
|
|
top: 54%;
|
|
left: 54%;
|
|
}
|
|
i.icss-edit {
|
|
width: 1em;
|
|
height: 1em;
|
|
background-color: transparent;
|
|
border-radius: 50% 45% 50% 35%;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
}
|
|
|
|
i.icss-edit:before {
|
|
width: .3em;
|
|
height: .8em;
|
|
border: .15em solid transparent;
|
|
border-top: .24em solid currentColor;
|
|
transform: rotate(45deg) translate(-50%);
|
|
transform-origin: 0 0;
|
|
box-shadow: 0 -.05em, .24em -.8em, -.24em -.8em, 0 -1.5em;
|
|
clip: rect(-.9em .3em 1em 0);
|
|
left: .25em;
|
|
top: .75em;
|
|
}
|
|
|
|
i.icss-edit:after {
|
|
width: .1em;
|
|
height: 0;
|
|
background-color: transparent;
|
|
transform: translate(-50%, -50%);
|
|
top: 50%;
|
|
left: 50%;
|
|
}
|
|
|
|
i.icss-trash {
|
|
width: .68em;
|
|
height: .9em;
|
|
background-color: transparent;
|
|
border-width: .1em .1em;
|
|
border-style: solid;
|
|
border-radius: .05em;
|
|
margin: .1em .15em 0;
|
|
}
|
|
|
|
i.icss-trash:before {
|
|
border-style: solid;
|
|
border-width: .1em;
|
|
top: -.23em;
|
|
left: 50%;
|
|
border-radius: .1em;
|
|
width: .275em;
|
|
height: 1.03em;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
i.icss-trash:after {
|
|
border-width: .1em .43em;
|
|
border-style: solid;
|
|
left: 50%;
|
|
top: -.05em;
|
|
border-radius: .07em;
|
|
transform: translateX(-50%);
|
|
}
|
|
i.icss-gear {
|
|
width: .5em;
|
|
height: .5em;
|
|
position: relative;
|
|
border-radius: 100%;
|
|
background-color: transparent;
|
|
border-width: .07em;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
margin: .25em;
|
|
box-shadow: 0 0 0 .1em, inset 0 0 0 .3em;
|
|
}
|
|
|
|
i.icss-gear:before {
|
|
width: .18em;
|
|
height: .18em;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
box-shadow: .41em 0, -.41em 0, 0 .41em, 0 -.41em;
|
|
}
|
|
|
|
i.icss-gear:after {
|
|
width: .18em;
|
|
height: .18em;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
box-shadow: .42em 0, -.42em 0, 0 .42em, 0 -.42em;
|
|
}
|
|
i.icss-gears {
|
|
width: .5em;
|
|
height: .5em;
|
|
position: relative;
|
|
border-radius: 100%;
|
|
border-width: .063em;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
margin: .36em .532em .08em .1em;
|
|
box-shadow: .51em -.32em 0 -.06em;
|
|
}
|
|
|
|
i.icss-gears:before {
|
|
width: .7em;
|
|
height: .7em;
|
|
border-radius: 100%;
|
|
background: linear-gradient(0deg,transparent 39%,currentcolor 39%,currentcolor 61%, transparent 61%), linear-gradient(60deg,transparent 42%, currentcolor 42%,currentcolor 58%, transparent 58%), linear-gradient(120deg,transparent 42%, currentcolor 42%,currentcolor 58%, transparent 58%);
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
i.icss-gears:after {
|
|
width: .55em;
|
|
height: .55em;
|
|
border-radius: 100%;
|
|
background: linear-gradient(0deg,transparent 37%,currentcolor 37%,currentcolor 63%, transparent 63%), linear-gradient(60deg,transparent 40%, currentcolor 40%,currentcolor 60%, transparent 60%), linear-gradient(120deg,transparent 40%, currentcolor 40%,currentcolor 60%, transparent 60%);
|
|
top: -.135em;
|
|
left: .695em;
|
|
transform: translate(-50%, -50%) rotate(25deg);
|
|
}
|
|
i.icss-somfy-down {
|
|
width: 1em;
|
|
height: 1em;
|
|
border-radius: .07em;
|
|
background-color: transparent;
|
|
margin: 0;
|
|
}
|
|
i.icss-somfy-down:before {
|
|
height: .6em;
|
|
width: .6em;
|
|
border: .15em solid currentColor;
|
|
border-color: currentColor currentColor transparent transparent;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-70%) rotate(135deg);
|
|
}
|
|
i.icss-somfy-up {
|
|
width: 1em;
|
|
height: 1em;
|
|
border-radius: .07em;
|
|
background-color: transparent;
|
|
margin: 0;
|
|
}
|
|
|
|
i.icss-somfy-up:before {
|
|
height: .6em;
|
|
width: .6em;
|
|
border: .15em solid currentColor;
|
|
border-color: currentColor currentColor transparent transparent;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-30%) rotate(-45deg);
|
|
}
|
|
i.icss-somfy-toggle {
|
|
width: .15em;
|
|
height: .55em;
|
|
border-radius: .1em;
|
|
margin: .2em .4em .25em .45em;
|
|
}
|
|
|
|
i.icss-somfy-toggle:before {
|
|
width: .45em;
|
|
height: .5em;
|
|
border-radius: .3em .12em 0 .2em;
|
|
border: .1em solid transparent;
|
|
border-width: 0 0 .35em 0;
|
|
background-color: currentColor;
|
|
box-shadow: -.1em 0, -.3em -.35em;
|
|
transform: rotate(-45deg);
|
|
clip: rect(-.5em .5em .15em -.5em);
|
|
left: .15em;
|
|
top: .35em;
|
|
}
|
|
|
|
i.icss-somfy-toggle:after {
|
|
width: .52em;
|
|
height: .52em;
|
|
border: .065em solid currentColor;
|
|
border-bottom-color: transparent;
|
|
border-radius: 50%;
|
|
transform: translateX(-50%);
|
|
top: -.22em;
|
|
left: 50%;
|
|
}
|
|
|
|
|
|
|
|
i.icss-home {
|
|
width: .8em;
|
|
height: .45em;
|
|
background-color: transparent;
|
|
border-width: 0;
|
|
border-style: solid;
|
|
border-radius: 0 0 .02em .02em;
|
|
box-shadow: inset .285em .1em, inset -.285em .1em;
|
|
margin: .55em .1em 0;
|
|
}
|
|
|
|
i.icss-home:before {
|
|
border-width: 0 .4em .4em;
|
|
border-style: solid;
|
|
border-color: currentColor transparent;
|
|
transform: translateX(-50%);
|
|
box-shadow: 0 .1em;
|
|
top: -.4em;
|
|
left: 50%;
|
|
}
|
|
|
|
i.icss-home:after {
|
|
width: .76em;
|
|
height: .76em;
|
|
border-width: 0.065em 0 0 0.065em;
|
|
border-style: solid;
|
|
transform: translateX(-50%) rotate(45deg);
|
|
top: -0.4em;
|
|
left: 50%;
|
|
}
|
|
i.icss-window {
|
|
width: 1.1em;
|
|
height: .75em;
|
|
background-color: transparent;
|
|
border: .05em solid transparent;
|
|
border-width: 0 .1em;
|
|
box-shadow: inset 0 0 0 .07em, inset 0 .19em 0 .07em, 0 .07em 0;
|
|
margin: .2em 0 .07em;
|
|
}
|
|
|
|
i.icss-window:before {
|
|
width: 1.1em;
|
|
height: .26em;
|
|
border-bottom: .1em solid transparent;
|
|
box-shadow: inset 0 1em, 0 .48em 0 -.1em;
|
|
top: -.2em;
|
|
left: -.1em;
|
|
}
|
|
|
|
i.icss-window:after {
|
|
width: 0.06em;
|
|
height: .7em;
|
|
background-color: currentColor;
|
|
left: .43em;
|
|
}
|
|
i.icss-window-shade {
|
|
width: 1.1em;
|
|
height: .75em;
|
|
background-color: transparent;
|
|
border: .05em solid transparent;
|
|
border-width: 0 .1em;
|
|
box-shadow: inset 0 0 0 .01em, inset 0 .01em 0 .07em, 0 .07em 0;
|
|
margin: .2em 0 .07em;
|
|
}
|
|
|
|
i.icss-window-shade:before {
|
|
width: 1.1em;
|
|
height: .2em;
|
|
border-bottom: .1em solid transparent;
|
|
box-shadow: inset 0 1em, 0 0em 0 -.1em;
|
|
top: -.15em;
|
|
left: -.09em;
|
|
}
|
|
|
|
i.icss-window-shade:after {
|
|
width: calc(100% - .05em);
|
|
height: var(--shade-position, 0%);
|
|
|
|
left: 0.025em;
|
|
top: 0.025em;
|
|
border-bottom: solid 0.025em gray;
|
|
background-image: repeating-conic-gradient(var(--shade-color, currentColor) 0% 25%, rgba(71, 212, 255, 0) 0% 50%);
|
|
background-position: 0 0, 100% 100%;
|
|
background-size: 0.05em 0.05em;
|
|
background-color: rgba(71, 212, 255, 0);
|
|
}
|
|
i.icss-ldrapery {
|
|
width: 1.1em;
|
|
height: .9em;
|
|
background-color: transparent;
|
|
border: .05em solid transparent;
|
|
border-width: 0 .1em;
|
|
box-shadow: inset 0 0 0 .01em, inset 0 .01em 0 .07em, 0 .07em 0;
|
|
margin: .1em 0 .07em;
|
|
}
|
|
|
|
i.icss-ldrapery:before {
|
|
width: 1.1em;
|
|
height: .2em;
|
|
border-bottom: .1em solid transparent;
|
|
box-shadow: inset 0 1em, 0 0em 0 -.1em;
|
|
top: -.05em;
|
|
left: -.09em;
|
|
}
|
|
|
|
i.icss-ldrapery:after {
|
|
width: var(--shade-position, 0%);
|
|
height: calc(100% - .05em);
|
|
right: calc(100% - var(--shade-position));
|
|
left:0em;
|
|
top: 0.025em;
|
|
border-bottom: solid 0.025em gray;
|
|
border-right: solid 0.025em gray;
|
|
background-image: repeating-linear-gradient(to left, var(--shade-color, currentColor), var(--shade-color, currentColor) 75%, rgba(255,255,255,0) 100%);
|
|
background-position: 0 0, 100% 100%;
|
|
background-size: 0.1em 0.1em;
|
|
background-color: rgba(71, 212, 255, 0);
|
|
transform:rotate(180deg);
|
|
}
|
|
i.icss-rdrapery {
|
|
width: 1.1em;
|
|
height: .9em;
|
|
background-color: transparent;
|
|
border: .05em solid transparent;
|
|
border-width: 0 .1em;
|
|
box-shadow: inset 0 0 0 .01em, inset 0 .01em 0 .07em, 0 .07em 0;
|
|
margin: .1em 0 .07em;
|
|
}
|
|
|
|
i.icss-rdrapery:before {
|
|
width: 1.1em;
|
|
height: .2em;
|
|
border-bottom: .1em solid transparent;
|
|
box-shadow: inset 0 1em, 0 0em 0 -.1em;
|
|
top: -.05em;
|
|
left: -.09em;
|
|
}
|
|
|
|
i.icss-rdrapery:after {
|
|
width: var(--shade-position, 0%);
|
|
height: calc(100% - .05em);
|
|
left: calc(100% - var(--shade-position));
|
|
top: 0.025em;
|
|
border-bottom: solid 0.025em gray;
|
|
border-left: solid 0.025em gray;
|
|
background-image: repeating-linear-gradient(to left, var(--shade-color, currentColor), var(--shade-color, currentColor) 75%, rgba(255,255,255,0) 100%);
|
|
background-position: 0 0, 100% 100%;
|
|
background-size: 0.1em 0.1em;
|
|
background-color: rgba(71, 212, 255, 0);
|
|
}
|
|
i.icss-cdrapery {
|
|
width: 1.1em;
|
|
height: .9em;
|
|
background-color: transparent;
|
|
border: .05em solid transparent;
|
|
border-width: 0 .1em;
|
|
box-shadow: inset 0 0 0 .01em, inset 0 .01em 0 .07em, 0 .07em 0;
|
|
margin: .1em 0 .07em;
|
|
}
|
|
|
|
i.icss-cdrapery:before {
|
|
width: 1.1em;
|
|
height: .2em;
|
|
border-bottom: .1em solid transparent;
|
|
box-shadow: inset 0 1em, 0 0em 0 -.1em;
|
|
top: -.05em;
|
|
left: -.09em;
|
|
}
|
|
|
|
i.icss-cdrapery:after {
|
|
}
|
|
i.icss-cdrapery > span.icss-panel-left {
|
|
width: calc(var(--shade-position, 0%) * .5);
|
|
height: calc(100% - .05em);
|
|
display:inline-block;
|
|
position:absolute;
|
|
right: calc(50% - (var(--shade-position, 0%) *.5));
|
|
left: 0em;
|
|
top: 0.025em;
|
|
border-bottom: solid 0.025em gray;
|
|
border-right: solid 0.025em gray;
|
|
background-image: repeating-linear-gradient(to left, var(--shade-color, currentColor), var(--shade-color, currentColor) 75%, rgba(255,255,255,0) 100%);
|
|
background-position: 0 0, 100% 100%;
|
|
background-size: 0.1em 0.1em;
|
|
background-color: rgba(71, 212, 255, 0);
|
|
transform: rotate(180deg);
|
|
}
|
|
i.icss-cdrapery > span.icss-panel-right {
|
|
width: calc(var(--shade-position, 0%) * .5);
|
|
height: calc(100% - .05em);
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: calc(100% - ((var(--shade-position, 0%) *.5)) - .015em);
|
|
top: 0.025em;
|
|
border-bottom: solid 0.025em gray;
|
|
background-image: repeating-linear-gradient(to left, var(--shade-color, currentColor), var(--shade-color, currentColor) 75%, rgba(255,255,255,0) 100%);
|
|
background-position: 0 0, 100% 100%;
|
|
background-size: 0.1em 0.1em;
|
|
background-color: rgba(71, 212, 255, 0);
|
|
}
|
|
|
|
|
|
i.icss-shutter {
|
|
width: 1.1em;
|
|
height: .75em;
|
|
background-color: transparent;
|
|
border: .05em solid transparent;
|
|
border-width: 0 .1em;
|
|
box-shadow: inset 0 0 0 0.01em, inset 0 0.01em 0px 0.04em;
|
|
margin: .2em 0 0;
|
|
}
|
|
|
|
i.icss-shutter:before {
|
|
width: 1.1em;
|
|
height: .2em;
|
|
border-bottom: .05em solid transparent;
|
|
box-shadow: inset 0 1em, 0 0em 0 -.1em;
|
|
top: -.1em;
|
|
left: -.09em;
|
|
}
|
|
|
|
i.icss-shutter:after {
|
|
width: calc(100% - .05em);
|
|
height: var(--shade-position, 0%);
|
|
left: 0.025em;
|
|
top: 0.025em;
|
|
border-bottom: solid 0.025em gray;
|
|
background-image: repeating-linear-gradient(var(--shade-color, currentColor) 0% 50%, rgba(71, 212, 255, 0) 0% 75%);
|
|
background-position: 0 0, 100% 100%;
|
|
background-size: 0.05em 0.05em;
|
|
background-color: rgba(71, 212, 255, 0);
|
|
}
|
|
|
|
i.icss-window-blind {
|
|
width: 1.1em;
|
|
height: .75em;
|
|
background-color: transparent;
|
|
border: .05em solid transparent;
|
|
border-width: 0 .1em;
|
|
box-shadow: inset 0 0 0 .01em, inset 0 .01em 0 .07em, 0 .07em 0;
|
|
margin: .2em 0 .07em;
|
|
}
|
|
|
|
i.icss-window-blind:before {
|
|
width: 1.1em;
|
|
height: .2em;
|
|
border-bottom: .1em solid transparent;
|
|
box-shadow: inset 0 1em, 0 0em 0 -.1em;
|
|
top: -.1em;
|
|
left: -.09em;
|
|
}
|
|
|
|
i.icss-window-blind:after {
|
|
width: calc(100% - .13em);
|
|
height: var(--shade-position, 0%);
|
|
left: calc(0.077em - .2px);
|
|
top: 0.025em;
|
|
border-bottom: solid 0.025em gray;
|
|
background-image: repeating-linear-gradient(var(--shade-color, currentColor), var(--shade-color, currentColor) 1px, white 4px);
|
|
background-color: rgba(71, 212, 255, 0);
|
|
}
|
|
i.icss-window-tilt {
|
|
position:absolute;
|
|
width:100%;
|
|
height:100%;
|
|
left:0px;
|
|
top:0px;
|
|
color:dimgray;
|
|
background:transparent;
|
|
}
|
|
i.icss-window-tilt:after {
|
|
content: attr(data-tiltposition)'%';
|
|
width:100%;
|
|
top: calc(50% - .25em);
|
|
text-align:center;
|
|
font-weight:bold;
|
|
font-size:.3em;
|
|
}
|
|
i.icss-garage {
|
|
width: 1.1em;
|
|
height: .7em;
|
|
background-color: transparent;
|
|
box-shadow: inset 0 0.01em 0 0.04em, inset 0.01em 0px 0em, inset 0.01em 0.01em 1px 0em;
|
|
margin: .4em 0 0;
|
|
}
|
|
|
|
i.icss-garage:after {
|
|
border-width: 0 .8em .4em;
|
|
border-style: solid;
|
|
border-color: currentColor transparent;
|
|
transform: translateX(-50%);
|
|
top: -0.4em;
|
|
left: 50%;
|
|
clip-path: polygon(50% 0, 99% 50%, 50% 250%, 0 50%);
|
|
}
|
|
|
|
i.icss-garage:before {
|
|
width: calc(100% - .08em);
|
|
height: calc(var(--shade-position, 0%) - 0em);
|
|
left: 0.04em;
|
|
border-bottom: outset 0.025em gray;
|
|
background-image: repeating-linear-gradient(to top, var(--shade-color, currentColor), var(--shade-color, currentColor) 75%, rgba(255,255,255,0) 100%);
|
|
background-size: 0.01em 0.2em;
|
|
background-color: rgba(71, 212, 255, 0);
|
|
background-position:left bottom;
|
|
}
|
|
i.icss-garage > span.icss-panel-left {
|
|
position: absolute;
|
|
display:inline-block;
|
|
border-radius:50%;
|
|
border:solid 1px white;
|
|
width: .1em;
|
|
height:.05em;
|
|
top: calc(var(--shade-position, 0%) - .32em);
|
|
background: white;
|
|
left: calc(50% - .05em);
|
|
}
|
|
i.icss-lightbulb-o {
|
|
width: .35em;
|
|
height: .1em;
|
|
border-radius: .1em;
|
|
margin: .7em .325em .2em;
|
|
box-shadow: 0 .13em, 0 .19em 0 -.03em, 0 .22em 0 -0.035em;
|
|
}
|
|
|
|
i.icss-lightbulb-o:before {
|
|
width: .65em;
|
|
height: .65em;
|
|
border-width: 0.068em;
|
|
border-style: solid;
|
|
border-radius: 100% 100% 100% .2em;
|
|
background-color: transparent;
|
|
left: 50%;
|
|
transform: translateX(-50%) rotate(-45deg);
|
|
bottom: .11em;
|
|
}
|
|
|
|
i.icss-lightbulb-o:after {
|
|
width: .25em;
|
|
height: .2em;
|
|
border-radius: 100%;
|
|
box-shadow: inset -0.05em 0.05em;
|
|
left: .1em;
|
|
top: -.5em;
|
|
}
|
|
i.icss-lightbulb {
|
|
width: .35em;
|
|
height: .1em;
|
|
border-radius: .1em;
|
|
margin: .7em .325em .2em;
|
|
box-shadow: 0 .13em, 0 .19em 0 -.03em, 0 .22em 0 -0.035em;
|
|
}
|
|
|
|
i.icss-lightbulb:before {
|
|
width: .65em;
|
|
height: .65em;
|
|
border-width: 0.068em;
|
|
border-style: solid;
|
|
border-radius: 100% 100% 100% .2em;
|
|
background-color: rgba(255,255,0, var(--fpos, 0%));
|
|
left: 50%;
|
|
transform: translateX(-50%) rotate(-45deg);
|
|
bottom: .11em;
|
|
}
|
|
|
|
i.icss-lightbulb:after {
|
|
width: .25em;
|
|
height: .2em;
|
|
border-radius: 100%;
|
|
box-shadow: inset -0.05em 0.05em;
|
|
left: .1em;
|
|
top: -.5em;
|
|
}
|
|
|
|
i.icss-upload {
|
|
width: 1em;
|
|
height: .6em;
|
|
background-color: transparent;
|
|
border-width: 0 .2em .3em;
|
|
border-style: solid;
|
|
border-radius: .03em;
|
|
margin: .4em 0 0;
|
|
}
|
|
i.icss-upload:before {
|
|
height: .5em;
|
|
border-style: solid;
|
|
border-width: 0 .25em .25em;
|
|
border-color: transparent;
|
|
border-bottom-color: currentColor;
|
|
background-color: transparent;
|
|
box-shadow: 0em .35em 0 -.13em;
|
|
top: -.6em;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
i.icss-upload:after {
|
|
}
|
|
i.icss-file {
|
|
width: .8em;
|
|
height: 1em;
|
|
background-color: transparent;
|
|
border-width: .065em;
|
|
border-style: solid;
|
|
border-radius: .05em .34em .05em .05em;
|
|
}
|
|
|
|
i.icss-file:before {
|
|
border-style: solid;
|
|
border-width: .2em;
|
|
left: .275em;
|
|
border-radius: .1em;
|
|
border-color: transparent;
|
|
border-right-color: currentColor;
|
|
transform: rotate(-45deg);
|
|
top: .02em;
|
|
}
|
|
|
|
i.icss-x {
|
|
width: 1em;
|
|
height: 1em;
|
|
background-color: transparent;
|
|
margin: 0;
|
|
}
|
|
|
|
i.icss-x:before,
|
|
i.icss-x:after {
|
|
width: 1em;
|
|
height: .18em;
|
|
top: 50%;
|
|
left: 50%;
|
|
border-radius: .06em;
|
|
background-color: currentColor;
|
|
}
|
|
|
|
i.icss-x:before {
|
|
transform: translate(-50%, -50%) rotate(-225deg)
|
|
}
|
|
|
|
i.icss-x:after {
|
|
transform: translate(-50%, -50%) rotate(225deg)
|
|
}
|
|
|
|
i.icss-awning {
|
|
width: 1.1em;
|
|
height: .75em;
|
|
background-color: transparent;
|
|
border-width: 0 0;
|
|
margin: .2em 0 .07em;
|
|
left:0.1em;
|
|
}
|
|
|
|
i.icss-awning:before {
|
|
width: 1.1em;
|
|
height: .2em;
|
|
border-bottom: .1em solid transparent;
|
|
box-shadow: inset 0 1em, 0 0em 0 -.1em;
|
|
top: -.1em;
|
|
left: -.09em;
|
|
}
|
|
|
|
i.icss-awning:after {
|
|
width: calc(100% - 0.1em);
|
|
height: var(--shade-position, 0%);
|
|
left: -.04em;
|
|
top: 0.025em;
|
|
border-bottom: solid 0.045em gray;
|
|
background-image: repeating-linear-gradient(90deg, var(--shade-color, currentColor), var(--shade-color, currentColor) calc(25% - 4px), black calc(25% - 2px), var(--shade-color, currentColor) calc(25% - 2px));
|
|
background-color: rgba(71, 212, 255, 0);
|
|
}
|
|
i.icss-sun-c {
|
|
width: 1em;
|
|
height: 1em;
|
|
border-radius: 50%;
|
|
background-color: transparent;
|
|
background-image: radial-gradient(ellipse at center, #fd0 1%, #fb0 39%, #fb0 39%, #d61 100%);
|
|
box-shadow: 0 0 .06em .03em rgba(255, 107, 0, 0.4), 0 0 22px 11px rgba(255, 203, 0, 0.13);
|
|
background-position: -.7em -.6em;
|
|
background-size: 165%;
|
|
margin: 0;
|
|
}
|
|
|
|
i.icss-sun-c:before {
|
|
}
|
|
|
|
i.icss-sun-c:after {
|
|
}
|
|
|
|
i.icss-sun {
|
|
width: .6em;
|
|
height: .6em;
|
|
border-radius: 50%;
|
|
background-color: transparent;
|
|
border: 0.03em solid transparent;
|
|
box-shadow: inset 0 0 0 .5em;
|
|
margin: .2em;
|
|
}
|
|
|
|
i.icss-sun:before {
|
|
width: .1em;
|
|
height: .1em;
|
|
background-color: transparent;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
box-shadow: .45em 0, .38em 0, -.45em 0, -.38em 0, 0 .45em, 0 .38em, 0 -.45em, 0 -.38em;
|
|
}
|
|
|
|
i.icss-sun:after {
|
|
width: .1em;
|
|
height: .1em;
|
|
background-color: transparent;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
box-shadow: .45em 0, .38em 0, -.45em 0, -.38em 0, 0 .45em, 0 .38em, 0 -.45em, 0 -.38em;
|
|
}
|
|
i.icss-sun-o {
|
|
width: .6em;
|
|
height: .6em;
|
|
border-radius: 50%;
|
|
background-color: transparent;
|
|
border: 0.03em solid transparent;
|
|
box-shadow: inset 0 0 0 .065em;
|
|
margin: .2em;
|
|
}
|
|
|
|
i.icss-sun-o:before {
|
|
width: .1em;
|
|
height: .1em;
|
|
background-color: transparent;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
box-shadow: .45em 0, .38em 0, -.45em 0, -.38em 0, 0 .45em, 0 .38em, 0 -.45em, 0 -.38em;
|
|
}
|
|
|
|
i.icss-sun-o:after {
|
|
width: .1em;
|
|
height: .1em;
|
|
background-color: transparent;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
box-shadow: .45em 0, .38em 0, -.45em 0, -.38em 0, 0 .45em, 0 .38em, 0 -.45em, 0 -.38em;
|
|
}
|
|
i.icss-sun-c {
|
|
width: 1em;
|
|
height: 1em;
|
|
border-radius: 50%;
|
|
background-color: transparent;
|
|
background-image: radial-gradient(ellipse at center, #fd0 1%, #fb0 39%, #fb0 39%, #d61 100%);
|
|
box-shadow: 0 0 .06em .03em rgba(255, 107, 0, 0.4), 0 0 22px 11px rgba(255, 203, 0, 0.13);
|
|
background-position: -.7em -.6em;
|
|
background-size: 165%;
|
|
margin: 0;
|
|
}
|
|
|
|
i.icss-sun-c:before {
|
|
}
|
|
|
|
i.icss-sun-c:after {
|
|
}
|
|
|
|
i.icss-sun-o {
|
|
width: .6em;
|
|
height: .6em;
|
|
border-radius: 50%;
|
|
background-color: transparent;
|
|
border: 0.03em solid transparent;
|
|
box-shadow: inset 0 0 0 .065em;
|
|
margin: .2em;
|
|
}
|
|
|
|
i.icss-sun-o:before {
|
|
width: .1em;
|
|
height: .1em;
|
|
background-color: transparent;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
box-shadow: .45em 0, .38em 0, -.45em 0, -.38em 0, 0 .45em, 0 .38em, 0 -.45em, 0 -.38em;
|
|
}
|
|
|
|
i.icss-sun-o:after {
|
|
width: .1em;
|
|
height: .1em;
|
|
background-color: transparent;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
box-shadow: .45em 0, .38em 0, -.45em 0, -.38em 0, 0 .45em, 0 .38em, 0 -.45em, 0 -.38em;
|
|
}
|
|
div.button-light {
|
|
position:absolute;
|
|
margin-left:-30px;
|
|
cursor:pointer;
|
|
}
|
|
div.button-light[data-on=false] i.icss-lightbulb-o:before {
|
|
background-color:lightgray;
|
|
}
|
|
div.button-light[data-on=true] i.icss-lightbulb-o:before {
|
|
background-color: yellow;
|
|
}
|
|
|
|
div.button-light > i.icss-lightbulb-c {
|
|
position: absolute;
|
|
font-size: 18px;
|
|
color: orange;
|
|
left: 6px;
|
|
top: 7px;
|
|
}
|
|
|
|
div.button-light > i.icss-lightbulb-o {
|
|
position: absolute;
|
|
font-size: 32px;
|
|
color: gray;
|
|
}
|
|
|
|
|
|
div.button-sunflag {
|
|
position: relative;
|
|
margin-left:-30px;
|
|
cursor:pointer;
|
|
}
|
|
div.button-sunflag[data-on=false] i.icss-sun-c {
|
|
background-image: radial-gradient(ellipse at center, gainsboro 1%, #ccc 39%, silver 39%, gray 100%);
|
|
}
|
|
|
|
div.button-sunflag > i.icss-sun-c {
|
|
position: absolute;
|
|
font-size: 18px;
|
|
color: orange;
|
|
left: 6px;
|
|
top: 7px;
|
|
}
|
|
|
|
div.button-sunflag > i.icss-sun-o {
|
|
position: absolute;
|
|
font-size: 32px;
|
|
color: orange;
|
|
}
|
|
i.icss-warning {
|
|
width: 1em;
|
|
height: .1em;
|
|
border-radius: 0.05em;
|
|
margin: .82em 0 .06em 0;
|
|
transform-origin: 50% -.33em;
|
|
}
|
|
div.indicator {
|
|
position: absolute;
|
|
top:34px;
|
|
font-size:20px;
|
|
}
|
|
div.indicator-wind {
|
|
color: orangered;
|
|
clip-path: polygon(48% 18%, 0% 95%, 110% 92%);
|
|
background:yellow;
|
|
top:30%;
|
|
left:.8em;
|
|
}
|
|
div.indicator-sun {
|
|
color: darkorange;
|
|
left: -13px;
|
|
top:3px;
|
|
}
|
|
.somfyShadeCtl[data-sunny="false"] .indicator-sun {
|
|
display:none;
|
|
}
|
|
.somfyShadeCtl[data-windy="false"] .indicator-wind {
|
|
display: none;
|
|
}
|
|
|
|
i.icss-warning:before {
|
|
width: 1.23em;
|
|
height: 1.23em;
|
|
border: 0.2em solid currentColor;
|
|
border-color: currentColor currentColor transparent transparent;
|
|
border-radius: .1em .13em;
|
|
transform: translateX(-50%) scaleX(0.6) rotate(-45deg);
|
|
top: -.55em;
|
|
left: 50%;
|
|
}
|
|
|
|
i.icss-warning:after {
|
|
width: .125em;
|
|
border: .0em solid transparent;
|
|
border-top: .25em solid currentColor;
|
|
border-bottom: .07em solid transparent;
|
|
box-shadow: 0 .1em 0 -.012em;
|
|
top: -.44em;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
i.icss-github-o {
|
|
width: 1em;
|
|
height: 1em;
|
|
border-radius: 50%;
|
|
border: 0.068em solid currentcolor;
|
|
background-color: transparent;
|
|
background-image: radial-gradient(ellipse 100% 73% at 50% 0.48em, currentColor 0%, currentColor 38%, transparent 38%), radial-gradient(circle at 35.5% 0.5em, currentColor 0%, currentColor 27%, transparent 27%), radial-gradient(circle at 64.5% 0.5em, currentColor 0%, currentColor 27%, transparent 27%), radial-gradient(ellipse 45% 100% at 50% 0.88em, currentColor 0%, currentColor 40%, transparent 40%);
|
|
}
|
|
|
|
i.icss-github-o:before {
|
|
border-width: .1em .1em;
|
|
border-style: solid;
|
|
border-radius: 0.02em 60% 100% 80%;
|
|
left: .14em;
|
|
top: .2em;
|
|
transform: rotate(20deg);
|
|
}
|
|
|
|
i.icss-github-o:after {
|
|
border-width: .1em .1em;
|
|
border-style: solid;
|
|
border-radius: 0.02em 80% 100% 60%;
|
|
left: .54em;
|
|
top: .2em;
|
|
transform: rotate(65deg);
|
|
}
|
|
i.icss-lgate {
|
|
width: 1.1em;
|
|
height: .9em;
|
|
background-color: transparent;
|
|
border: .05em solid transparent;
|
|
border-width: 0 .1em;
|
|
margin: .1em 0 .07em;
|
|
}
|
|
|
|
i.icss-lgate:before {
|
|
width: 1.1em;
|
|
height: 1em;
|
|
border-bottom: solid 1px;
|
|
top: -.05em;
|
|
left: -.09em;
|
|
}
|
|
|
|
i.icss-lgate > span.icss-panel-right {
|
|
display:inline-block;
|
|
width: var(--shade-position, 0%);
|
|
height: calc(100% - .005em);
|
|
right: calc(100% - var(--shade-position, 0%));
|
|
left: 0em;
|
|
top: 0.025em;
|
|
border-bottom: solid 0.025em gray;
|
|
border-right: solid 0.025em gray;
|
|
background-image: repeating-linear-gradient(to left, rgba(255,255,255,0) 0% 75%, var(--shade-color, currentColor) 75% 100%, rgba(255,255,255,0) 75% 0%);
|
|
background-position: 0 0, 100% 100%;
|
|
background-size: .1em 1em;
|
|
background-color: rgba(71, 212, 255, 0);
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
i.icss-lgate > span.icss-panel-right:after {
|
|
position: absolute;
|
|
content:"";
|
|
display: inline-block;
|
|
border: solid 1px var(--shade-color, currentColor);
|
|
width: .02em;
|
|
height: .9em;
|
|
left: -.05em;
|
|
background: var(--shade-color, currentColor);
|
|
}
|
|
i.icss-lgate > span.icss-panel-left {
|
|
position: absolute;
|
|
display: inline-block;
|
|
}
|
|
i.icss-lgate > span.icss-panel-left:before {
|
|
position: absolute;
|
|
display: inline-block;
|
|
content:"";
|
|
left: -.15em;
|
|
top: -.1em;
|
|
height: 1em;
|
|
width: .1em;
|
|
border: solid 1px;
|
|
border-top-left-radius: .05em;
|
|
border-top-right-radius: .05em;
|
|
background-color: black;
|
|
}
|
|
i.icss-rgate {
|
|
width: 1.1em;
|
|
height: .9em;
|
|
background-color: transparent;
|
|
border: .05em solid transparent;
|
|
border-width: 0 .1em;
|
|
margin: .1em 0 .07em;
|
|
}
|
|
|
|
i.icss-rgate:before {
|
|
width: 1.1em;
|
|
height: 1em;
|
|
border-bottom: solid 1px;
|
|
top: -.05em;
|
|
left: -.09em;
|
|
}
|
|
|
|
i.icss-rgate > span.icss-panel-left {
|
|
position: absolute;
|
|
display: inline-block;
|
|
width: var(--shade-position, 0%);
|
|
height: calc(100% - .005em);
|
|
left: calc(100% - var(--shade-position, 0%));
|
|
top: 0.025em;
|
|
border-top: solid 0.025em gray;
|
|
border-right: solid 0.025em gray;
|
|
background-image: repeating-linear-gradient(to left, rgba(255,255,255,0) 0% 75%, var(--shade-color, currentColor) 75% 100%, rgba(255,255,255,0) 75% 0%);
|
|
background-position: 0 0, 100% 100%;
|
|
background-size: .1em 1em;
|
|
background-color: rgba(71, 212, 255, 0);
|
|
margin-left:-.025em;
|
|
}
|
|
|
|
i.icss-rgate > span.icss-panel-left:after {
|
|
position: absolute;
|
|
content: "";
|
|
display: inline-block;
|
|
border: solid 1px var(--shade-color, currentColor);
|
|
top:-0.07em;
|
|
width: .02em;
|
|
height: .9em;
|
|
left: -.05em;
|
|
background: var(--shade-color, currentColor);
|
|
}
|
|
|
|
i.icss-rgate > span.icss-panel-right {
|
|
position: absolute;
|
|
display: inline-block;
|
|
left:calc(100% - .05em);
|
|
}
|
|
|
|
i.icss-rgate > span.icss-panel-right:before {
|
|
position: absolute;
|
|
display: inline-block;
|
|
content: "";
|
|
right: -.15em;
|
|
top: -.1em;
|
|
height: 1em;
|
|
width: .1em;
|
|
border: solid 1px;
|
|
border-top-left-radius: .05em;
|
|
border-top-right-radius: .05em;
|
|
background-color: black;
|
|
}
|
|
|
|
i.icss-cgate {
|
|
width: 1.1em;
|
|
height: .9em;
|
|
background-color: transparent;
|
|
border: .05em solid transparent;
|
|
border-width: 0 .1em;
|
|
margin: .1em 0 .07em;
|
|
}
|
|
|
|
i.icss-cgate:before {
|
|
width: 1.1em;
|
|
height: 1em;
|
|
border-bottom: solid 1px;
|
|
top: -.05em;
|
|
left: -.09em;
|
|
}
|
|
|
|
i.icss-cgate > span.icss-panel-left {
|
|
position: absolute;
|
|
display: inline-block;
|
|
width: calc(var(--shade-position, 0%) / 2);
|
|
height: calc(100% - .005em);
|
|
left: 0%;
|
|
top: 0.025em;
|
|
border-bottom: solid 0.025em gray;
|
|
border-right: solid 0.025em gray;
|
|
background-image: repeating-linear-gradient(to left, rgba(255,255,255,0) 0% 75%, var(--shade-color, currentColor) 75% 100%, rgba(255,255,255,0) 75% 0%);
|
|
background-position: 0 0, 100% 100%;
|
|
background-size: .1em 1em;
|
|
background-color: rgba(71, 212, 255, 0);
|
|
margin-left: -.025em;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
i.icss-cgate > span.icss-panel-left:after {
|
|
position: absolute;
|
|
content: "";
|
|
display: inline-block;
|
|
border: solid 1px var(--shade-color, currentColor);
|
|
top: 0em;
|
|
width: .02em;
|
|
height: .9em;
|
|
left: -.05em;
|
|
background: var(--shade-color, currentColor);
|
|
}
|
|
i.icss-cgate > span.icss-panel-left:before {
|
|
position: absolute;
|
|
display: inline-block;
|
|
content: "";
|
|
right: -.15em;
|
|
top: -.025em;
|
|
height: 1em;
|
|
width: .1em;
|
|
border: solid 1px;
|
|
border-bottom-left-radius: .05em;
|
|
border-bottom-right-radius: .05em;
|
|
background-color: black;
|
|
}
|
|
|
|
|
|
i.icss-cgate > span.icss-panel-right {
|
|
position: absolute;
|
|
display: inline-block;
|
|
width: calc(var(--shade-position, 0%) / 2);
|
|
height: calc(100% - .005em);
|
|
left: calc(100% - calc(var(--shade-position, 0%) / 2));
|
|
top: .025em;
|
|
border-top: solid 0.025em gray;
|
|
border-right: solid 0.025em gray;
|
|
background-image: repeating-linear-gradient(to left, rgba(255,255,255,0) 0% 75%, var(--shade-color, currentColor) 75% 100%, rgba(255,255,255,0) 75% 0%);
|
|
background-position: 0 0, 100% 100%;
|
|
background-size: .1em 1em;
|
|
background-color: rgba(71, 212, 255, 0);
|
|
margin-left: -.025em;
|
|
}
|
|
i.icss-cgate > span.icss-panel-right:after {
|
|
position: absolute;
|
|
content: "";
|
|
display: inline-block;
|
|
border: solid 1px var(--shade-color, currentColor);
|
|
top: -.072em;
|
|
width: .02em;
|
|
height: .9em;
|
|
left: -.05em;
|
|
background: var(--shade-color, currentColor);
|
|
}
|
|
i.icss-cgate > span.icss-panel-right:before {
|
|
position: absolute;
|
|
display: inline-block;
|
|
content: "";
|
|
right: -.15em;
|
|
top: -.15em;
|
|
height: 1em;
|
|
width: .1em;
|
|
border: solid 1px;
|
|
border-top-left-radius: .05em;
|
|
border-top-right-radius: .05em;
|
|
background-color: black;
|
|
}
|
|
|
|
i.icss-bars {
|
|
margin: .41em 0;
|
|
}
|
|
|
|
i.icss-bars,
|
|
i.icss-bars:before,
|
|
i.icss-bars:after {
|
|
width: 1em;
|
|
height: .18em;
|
|
border-radius: .06em;
|
|
background-color: currentColor;
|
|
}
|
|
|
|
i.icss-bars:before {
|
|
top: -0.36em;
|
|
left: 0;
|
|
}
|
|
|
|
i.icss-bars:after {
|
|
top: 0.36em;
|
|
left: 0;
|
|
}
|
|
|
|
i.icss-hand {
|
|
width: .6em;
|
|
height: .5em;
|
|
border-radius: .35em .3em .5em .5em;
|
|
margin: .5em .1em 0 .21em;
|
|
}
|
|
|
|
i.icss-hand:before {
|
|
width: .1em;
|
|
height: .55em;
|
|
background: currentColor;
|
|
left: .5em;
|
|
bottom: .3em;
|
|
border-radius: 80% / 20%;
|
|
box-shadow: -.13em -.1em 0, -.265em -.15em 0, -.4em -.11em 0;
|
|
}
|
|
|
|
i.icss-hand:after {
|
|
width: .12em;
|
|
height: .43em;
|
|
background: currentColor;
|
|
bottom: .25em;
|
|
left: -.06em;
|
|
border-radius: .04em;
|
|
transform: rotate(-16deg);
|
|
border-radius: .04em 70% .04em .04em / .04em 70% .04em .04em;
|
|
}
|
|
i.icss-bookmark {
|
|
width: 1em;
|
|
height: 1em;
|
|
background-color: transparent;
|
|
margin: 0;
|
|
}
|
|
|
|
i.icss-bookmark:before {
|
|
width: .5em;
|
|
height: .8em;
|
|
transform: translate(-50%, -50%);
|
|
border: .25em solid currentColor;
|
|
border-color: currentColor currentColor transparent currentColor;
|
|
border-radius: .03em;
|
|
top: 50%;
|
|
left: 50%;
|
|
} |