html {
box-sizing: border-box;
font-family: 'Arial', sans-serif;
font-size: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
margin:0;
padding:0;
}
.mid {
display: flex;
align-items: left;
justify-content: left;
padding-top:1em;
}
.midc {
display: flex;
align-items: center;
justify-content: center;
padding-top:1em;
}
/* Switch starts here */
.rocker {
display: inline-block;
position: relative;
/*
SIZE OF SWITCH
==============
All sizes are in em - therefore
changing the font-size here
will change the size of the switch.
See .rocker-small below as example.
*/
font-size: 2em;
font-weight: bold;
text-align: center;
text-transform: uppercase;
color: #888;
width: 7em;
height: 4em;
overflow: hidden;
border-bottom: 0.5em solid #eee;
}
.rocker-small {
font-size: 0.75em; /* Sizes the switch */
margin: 1em;
}
.rocker::before {
content: "";
position: absolute;
top: 0.5em;
left: 0;
right: 0;
bottom: 0;
background-color: #999;
border: 0.5em solid #eee;
border-bottom: 0;
}
.rocker input {
opacity: 0;
width: 0;
height: 0;
}
.switch-left,
.switch-right {
cursor: pointer;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: 2.5em;
width: 3em;
transition: 0.2s;
}
.switch-left {
height: 2.4em;
width: 2.75em;
left: 0.85em;
bottom: 0.4em;
background-color: #ddd;
transform: rotate(15deg) skewX(15deg);
}
.switch-right1 {
right: 0.5em;
bottom: 0;
background-color: #eb2a10;
color: #fff;
}
.switch-right2 {
right: 0.5em;
bottom: 0;
background-color: #e7eb10;
color: #fff;
}.switch-right3 {
right: 0.5em;
bottom: 0;
background-color: #26e01f;
color: #fff;
}
.switch-left::before,
.switch-right::before {
content: "";
position: absolute;
width: 0.4em;
height: 2.45em;
bottom: -0.45em;
background-color: #ccc;
transform: skewY(-65deg);
}
.switch-left::before {
left: -0.4em;
}
.switch-right::before {
right: -0.375em;
background-color: transparent;
transform: skewY(65deg);
}
input:checked + .switch-left1 {
background-color: #ed1127;
color: #fff;
bottom: 0px;
left: 0.5em;
height: 2.5em;
width: 3em;
transform: rotate(0deg) skewX(0deg);
}
input:checked + .switch-left2 {
background-color: #e7eb10;
color: #fff;
bottom: 0px;
left: 0.5em;
height: 2.5em;
width: 3em;
transform: rotate(0deg) skewX(0deg);
}
input:checked + .switch-left3 {
background-color: #26e01f;
color: #fff;
bottom: 0px;
left: 0.5em;
height: 2.5em;
width: 3em;
transform: rotate(0deg) skewX(0deg);
}
input:checked + .switch-left::before {
background-color: transparent;
width: 3.0833em;
}
input:checked + .switch-left + .switch-right {
background-color: #ddd;
color: #888;
bottom: 0.4em;
right: 0.8em;
height: 2.4em;
width: 2.75em;
transform: rotate(-15deg) skewX(-15deg);
}
input:checked + .switch-left + .switch-right::before {
background-color: #ccc;
}
/* Keyboard Users */
input:focus + .switch-left {
color: #333;
}
input:checked:focus + .switch-left {
color: #fff;
}
input:focus + .switch-left + .switch-right {
color: #fff;
}
input:checked:focus + .switch-left + .switch-right {
color: #333;
}
/**
* Round switch button in css with animation cleaned up,
as seen on:
https://psd.tutsplus.com/tutorials/interface-tutorials/round-switch-button/
Use box-shadow for inner-div's sharp-bottom-highight and border-gradient on top
*/
input{display:none}
body{
background-color: #fff;
background-size: 20px 20px;
color:black;
font-family:sans-serif;
font-size:27px;
}
.on,.off{
position:absolute;
text-align:center;
-webkit-text-shadow:inset 1px 1px 1px black;
width:100%;
}
.on{
color:#bbb;
top:10px;
-webkit-transition:all 0.1s;
font-family:sans-serif
}
.off{
bottom:5px;
-webkit-transition:all 0.1s;
transform:scaleY(0.85);
}
.but{
background-color:#272727;
border-radius:400px 400px 400px 400px / 400px 400px 300px 300px;
border-bottom-width:0px;
box-shadow:
inset 8px 6px 5px -7px rgba(0,0,0,1)
,inset -8px 6px 5px -7px rgba(0,0,0,1)
,inset 0 -3px 2px -2px rgba(200,200,200,.5)
,0 3px 3px -2px rgba(0,0,0,1)
,inset 0 -230px 60px -200px rgba(255,255,255,.2)
,inset 0 220px 40px -200px rgba(0,0,0,.3);
display:block;
font-size:27px;
height:178px;
position:relative;
-webkit-transition:all 0.2s;
width:200px;
}
.back{
background-color:black;
background-image:
-webkit-linear-gradient(0deg, transparent 30%, transparent 70%)
,-webkit-linear-gradient(0deg, rgba(150,150,150,0) 30%, rgba(150,150,150,.1) 50%, rgba(150,150,150,0) 70%);
border-radius:105px;
box-shadow:
30px 30px 30px -20px rgba(0,0,0,.3)
,-30px 30px 30px -20px rgba(0,0,0,.3)
,0 30px 30px 0px rgba(0,0,0,.3)
,inset 0 -1px 0 0 #333;
box-sizing:border-box;
height:210px;
padding:4px 4px;
-webkit-transition:all 0.2s;
width:210px;
}
.round{
background:black;
background:-webkit-linear-gradient(270deg, #444 , #222);
border-radius:130px;
-webkit-box-sizing:border-box;
box-shadow:
0px 0px 0px 8px rgba(0,0,0,.1)
,0px 0px 3px 1px rgba(0,0,0,1)
,inset 0 8px 3px -8px rgba(255,255,255,.4);
height:260px;
margin:30px auto;
padding:25px;
width:260px;
}
input:checked + .back .on,input:checked + .back .off{
text-shadow:inset 1px 1px 1px black;
}
input:checked + .back .on{
color:#999;
top:10px;
-webkit-transform:scaleY(0.85);
}
input:checked + .back .off{
color:#bbb;
bottom:5px;
-webkit-transform:scaleY(1);
}
input:checked + .back .but{
background:#232323;
background-image:-webkit-radial-gradient(50% 15%,circle closest-corner,rgba(0,0,0,.3) ,rgba(0,0,0,0));
border-radius:400px 400px 400px 400px / 300px 300px 400px 400px;
box-shadow:
inset 8px -4px 5px -7px rgba(0,0,0,1)
,inset -8px -4px 5px -7px rgba(0,0,0,1)
, 0 -3px 8px -4px rgba(250,250,250,.4)
,inset 0 3px 4px -2px rgba(10,10,10,1)
,inset 0 280px 40px -200px rgba(0,0,0,.2)
,inset 0 -200px 40px -200px rgba(180,180,180,.2);
margin-top:20px;
}
input:checked + .back{
background-image:
-webkit-linear-gradient(90deg, black 30%, transparent 70%)
,-webkit-linear-gradient(180deg, rgba(250,250,250,0) 0%, rgba(250,250,250,.4) 50%, rgba(150,150,150,0) 100%);
box-shadow:
30px 30px 30px -20px rgba(0,0,0,.1)
,-30px 30px 30px -20px rgba(0,0,0,.1)
,0 30px 30px 0px rgba(0,0,0,.2)
,inset 0 1px 2px 0 rgba(0,0,0,.6);
padding:2px 4px;
}
.l,.r{margin:0 auto;text-align:center}
.round,#onoff,.back,.but,.on,.off{user-select: none}