/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ .toggle-switch { position:relative; height:50px; background: rgba(213,213,213,0.25); border-radius:3px; border:1px solid rgba(0,0,0,0.3); } .toggle-switch.toggle-shadow-inset1 { border:0px; -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); } .toggle-switch .switch-label { position:relative; float:left; line-height:26px; font-size:18px; text-align:center; color:rgba(0,0,0,0.35); text-shadow: 0 1px 1px rgba(0,0,0,0.15); /*color:rgba(255, 255, 255, 0.35); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);*/ padding:10px 0; margin:auto; cursor:pointer; z-index:2; } .toggle-switch .switch-label:active { font-weight:600; } .toggle-switch .switch-label-off { padding-left:0px; } .toggle-switch .switch-label-on { padding-right:0px; } .toggle-switch .switch-input { display:none; } .toggle-switch .switch-input:checked + .switch-label { font-weight:600; color: rgba(0, 0, 0, 0.65); text-shadow: 0 1px rgba(255, 255, 255, 0.25); -webkit-transition: 0.15s ease-out; -moz-transition: 0.15s ease-out; -ms-transition: 0.15s ease-out; -o-transition: 0.15s ease-out; transition: 0.15s ease-out; -webkit-transition-property: color, text-shadow; -moz-transition-property: color, text-shadow; -ms-transition-property: color, text-shadow; -o-transition-property: color, text-shadow; transition-property: color, text-shadow; } .toggle-switch .switch-input:checked + .switch-label-on ~ .switch-selection { left: 60px; /* Note: left: 50%; doesn't transition in WebKit */ } .toggle-switch .switch-selection { display:block; position:absolute; height:100%; top:0px; left:0px; border-radius:3px; background-color:#65bd63; z-index: 1; -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); -webkit-transition: left 0.15s ease-out; -moz-transition: left 0.15s ease-out; -ms-transition: left 0.15s ease-out; -o-transition: left 0.15s ease-out; transition: left 0.15s ease-out; /* width: 58px; height: 22px; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9dd993), color-stop(100%, #65bd63)); background-image: -webkit-linear-gradient(top, #9dd993, #65bd63); background-image: -moz-linear-gradient(top, #9dd993, #65bd63); background-image: -ms-linear-gradient(top, #9dd993, #65bd63); background-image: -o-linear-gradient(top, #9dd993, #65bd63); background-image: linear-gradient(top, #9dd993, #65bd63); */ } .toggle-switch.toggle-shadow-inset1 .switch-selection { height:91%; top:2px; left:2px; } .toggle-switch.switch-blue .switch-selection { background-color: #75BAE5; } .toggle-switch.switch-blue .switch-input:checked + .switch-label { /*color:white !important;*/ } .toggle-switch.switch-white .switch-selection { background-color: #ffffff; } .toggle-switch.switch-yellow .switch-selection { background-color: #c4bb61; } .toggle-switch.switch-green .switch-selection { background-color: #A1ECD8; } .toggle-switch.width-200px { width:200px; } .toggle-switch.width-200px .switch-label, .toggle-switch.width-200px .switch-selection { width:100px; } .toggle-switch.toggle-shadow-inset1.width-200px .switch-label, .toggle-switch.toggle-shadow-inset1.width-200px .switch-selection { width:98px; } .toggle-switch.width-200px .switch-input:checked + .switch-label-on ~ .switch-selection { left:100px; } .toggle-switch.width-300px { width:300px; } .toggle-switch.width-300px .switch-label, .toggle-switch.width-300px .switch-selection { width:150px; } .toggle-switch.toggle-shadow-inset1.width-300px .switch-label, .toggle-switch.toggle-shadow-inset1.width-300px .switch-selection { width:148px; } .toggle-switch.width-300px .switch-input:checked + .switch-label-on ~ .switch-selection { left:150px; } .toggle-switch.width-500px { width:500px; } .toggle-switch.width-500px .switch-label, .toggle-switch.width-500px .switch-selection { width:250px; } .toggle-switch.toggle-shadow-inset1.width-500px .switch-label, .toggle-switch.toggle-shadow-inset1.width-500px .switch-selection { width:248px; } .toggle-switch.width-500px .switch-input:checked + .switch-label-on ~ .switch-selection { left:250px; } .toggle-switch.height-50px { height:48px; } .toggle-switch.height-50px .switch-label { padding:10px 0; line-height:26px; } .toggle-switch.height-35px { height:35px; } .toggle-switch.height-35px .switch-label { padding:7px 0; line-height:20px; }