/* The container for the toggle, which is also a label for the hidden checkbox. */
.fl-uiOptionsprefsEditor .fl-uiOptionsprefsEditor-onoff .fl-uiOptionsprefsEditor-switch {
border-radius:50px;
border: 1px solid #776D67;
width: 5em;
height: 2em;
background-color: #E6E6E6;
box-shadow: 1em 1.1em 0 0 rgba(250,250,250,0.53) inset;
overflow:hidden;
vertical-align: middle;
display:inline-block;
transition-duration: 0.2s;
transition-property: padding-left, width, background-color, margin-left;
font-size: 1.2em;
font-weight: 600;
}
/* Hide input */
.fl-uiOptionsprefsEditor .fl-uiOptionsprefsEditor-onoff input {
border: 0 none;
clip: rect(0px, 0px, 0px, 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.fl-uiOptionsprefsEditor .fl-uiOptionsprefsEditor-onoff input:focus + label {
outline: 2px solid black;
}
.fl-uiOptionsprefsEditor .fl-uiOptionsprefsEditor-onoff input:checked + label .fl-uiOptionsprefsEditor-switch {
padding-left: 3em;
width: 2em;
background-color: #2da750;
box-shadow: -1em 1.1em 0.1em 0 rgba(172, 216, 92, 0.63) inset;
}
/* With data attributes defining the on/off text, localizing the templates is easier */
.fl-uiOptionsprefsEditor .fl-uiOptionsprefsEditor-onoff input + label [data-checkboxStateOn]:before {
content: attr(data-checkboxStateOn);
}
.fl-uiOptionsprefsEditor .fl-uiOptionsprefsEditor-onoff input + label [data-checkboxStateOff]:after {
content: attr(data-checkboxStateOff);
}
/* The "on" portion of the toggle and the knob. */
.fl-uiOptionsprefsEditor .fl-uiOptionsprefsEditor-onoff input + label .fl-uiOptionsprefsEditor-switch:before {
color: #fff;
border: 1px solid #776D67;
border-radius: 50px;
float:left;
width:1.9em;
height: 1.9em; /* Width and height of the knob. */
text-indent:-1.6em;
line-height:1.7em;
text-shadow: 1px 1px 1px #000;
background-color: #fff;
background-image: -o-linear-gradient(bottom, rgb(205,204,202) 0%, rgb(244,244,244) 100%);
background-image: -moz-linear-gradient(bottom, rgb(205,204,202) 0%, rgb(244,244,244) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(205,204,202) 0%, rgb(244,244,244) 100%);
background-image: -ms-linear-gradient(bottom, rgb(205,204,202) 0%, rgb(244,244,244) 100%);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(205,204,202)),
color-stop(1, rgb(244,244,244))
);
background-image: linear-gradient(bottom, rgb(205,204,202) 0%, rgb(244,244,244) 100%);
box-shadow: 0.2em 0.2em 0.5em #888;
}
/* The "off" portion of the toggle. */
.fl-uiOptionsprefsEditor .fl-uiOptionsprefsEditor-onoff input + label .fl-uiOptionsprefsEditor-switch:after {
float:left;
position:relative;
top: 0.36em;
left: 0.5em;
}
/* The dark inner circle to the toggle knob. */
.fl-uiOptionsprefsEditor .fl-uiOptionsprefsEditor-onoff .fl-uiOptionsprefsEditor-switch-inner {
border: 1px solid #493A30;
border-radius: 50px;
width: 1em;
height: 1em;
position:relative;
left:-2.85em;
top:0.46em;
background-color: #675243;
box-shadow: 0 -0.2em 0.3em 0.05em rgba(250, 250, 250, 0.3) inset;
display:inline-block;
}
.fl-uiOptionsprefsEditor .fl-uiOptionsprefsEditor-onoff input:checked + label .fl-uiOptionsprefsEditor-switch .fl-uiOptionsprefsEditor-switch-inner {
top:-1.6em;
left: 0.46em;
} |