mirror of https://github.com/ouqiang/gocron
66 lines
3.1 KiB
Go
66 lines
3.1 KiB
Go
|
label.switch {
|
||
|
|
margin: 1.5em auto;
|
||
|
|
}
|
||
|
|
input#switch {
|
||
|
|
position: absolute;
|
||
|
|
left: -9999px;
|
||
|
|
}
|
||
|
|
.switch {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
width: 5.5em;
|
||
|
|
height: 3em;
|
||
|
|
cursor: pointer;
|
||
|
|
border-radius: 1.5em;
|
||
|
|
-webkit-transition: 350ms;
|
||
|
|
transition: 350ms;
|
||
|
|
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.07)), to(rgba(255, 255, 255, 0))), #dddddd;
|
||
|
|
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)), #dddddd;
|
||
|
|
background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)), #dddddd;
|
||
|
|
-webkit-box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7);
|
||
|
|
box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7);
|
||
|
|
}
|
||
|
|
.switch::after {
|
||
|
|
position: absolute;
|
||
|
|
content: '';
|
||
|
|
width: 2em;
|
||
|
|
height: 2em;
|
||
|
|
top: 0.5em;
|
||
|
|
left: 0.5em;
|
||
|
|
border-radius: 50%;
|
||
|
|
-webkit-transition: 250ms ease-in-out;
|
||
|
|
transition: 250ms ease-in-out;
|
||
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eeeeee));
|
||
|
|
background: -webkit-linear-gradient(#f5f5f5 10%, #eeeeee);
|
||
|
|
background: linear-gradient(#f5f5f5 10%, #eeeeee);
|
||
|
|
-webkit-box-shadow: 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.2em 0.2em -0.12em rgba(0, 0, 0, 0.5);
|
||
|
|
box-shadow: 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.2em 0.2em -0.12em rgba(0, 0, 0, 0.5);
|
||
|
|
}
|
||
|
|
.switch::before {
|
||
|
|
position: absolute;
|
||
|
|
content: '';
|
||
|
|
width: 4em;
|
||
|
|
height: 1.5em;
|
||
|
|
top: 0.75em;
|
||
|
|
left: 0.75em;
|
||
|
|
border-radius: 0.75em;
|
||
|
|
-webkit-transition: 250ms ease-in-out;
|
||
|
|
transition: 250ms ease-in-out;
|
||
|
|
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.07)), to(rgba(255, 255, 255, 0.1))), #d0d0d0;
|
||
|
|
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #d0d0d0;
|
||
|
|
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.07)), to(rgba(255, 255, 255, 0.1))), #ec2727;
|
||
|
|
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #ec2727;
|
||
|
|
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.07)), to(rgba(255, 255, 255, 0.1))), #D95C5C;
|
||
|
|
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #D95C5C;
|
||
|
|
background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #D95C5C;
|
||
|
|
-webkit-box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 0 0 0 0 rgba(68, 204, 102, 0.7) inset;
|
||
|
|
box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 0 0 0 0 rgba(68, 204, 102, 0.7) inset;
|
||
|
|
}
|
||
|
|
input:checked + .switch::before {
|
||
|
|
-webkit-box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 3em 0 0 0 rgba(68, 204, 102, 0.7) inset;
|
||
|
|
box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 3em 0 0 0 rgba(68, 204, 102, 0.7) inset;
|
||
|
|
}
|
||
|
|
input:checked + .switch::after {
|
||
|
|
left: 3em;
|
||
|
|
}
|