1 line
21 KiB
CSS
1 line
21 KiB
CSS
h1,h2,div,input,select{margin:0;padding:0}body{margin:0;padding:0;background-color:#313335;font-family:Consolas,monospace;overflow:hidden}#info_bar{position:fixed;left:0;height:28px;width:100%;top:calc(100% - 28px);line-height:28px;color:#6897bb;margin-left:15px}#headline{position:fixed;top:0;height:50px;width:100%;line-height:50px;background-color:#3c3f41;border-bottom:1px solid #515658;color:#a9b7c6;font-size:25px;text-align:center;z-index:1001}#headline h1{font-size:24px}#headline .follow{margin-right:8px;float:right}.version{margin:15px;font-size:23px;color:#6a8759}#playlist{position:fixed;top:82px;overflow-x:hidden;overflow-y:hidden;font-size:15px;width:510px;background-color:#3c3f41;height:calc(100% - 110px);border-bottom:1px solid #515658;z-index:2}#playlist table{margin:5px 0;width:100%}#playlist table tr td:first-child{text-align:right;padding:0 5px;border-right:1px solid #3c3f41;vertical-align:super}#playlist tr{cursor:pointer}#playlist tr:hover{background-color:#45494a}#playlist td.direct_link span,#playlist td.heart span{color:#515658}#playlist td.heart span{padding-right:18px}#playlist td.heart.favorite span{color:#6897bb}#playlist .mdt{font-size:12px;vertical-align:super}.now_playing{background-color:rgba(152,118,170,.3)!important}#playlist_bar{position:fixed;top:51px;height:30px;width:510px;line-height:30px;background-color:#3c3f41;border-bottom:1px solid #515658;z-index:2}#playlist_bar input{margin-left:10px;border-radius:10px;padding:3px 10px;background-color:#515658;outline:none;border:none;color:#e6e6e6;width:45%;height:17px}#player{position:fixed;top:51px;height:calc(100% - 79px);left:510px;width:100%;background-color:#2b2b2b;border-bottom:1px solid #515658}.container{width:calc(100% - 510px)}.center{text-align:center}#song_info{margin:0 auto 10px;color:#a9b7c6;font-size:18px;width:640px;table-layout:fixed}#song_info td.soft{font-size:15px;text-align:center}#song_info td.track_number{width:60px}#song_info td.song{overflow:hidden;white-space:nowrap}#song_info td.direct_link,#song_info td.heart,#song_info td.share_fb,#song_info td.share_twitter{width:28px;height:100%}#song_info td.share_fb img,#song_info td.share_twitter img{vertical-align:middle;width:18px;height:18px}#song_info td.heart span,#song_info td.direct_link span{cursor:pointer}#song_info td.heart.favorite{color:#6897bb}.copied_to_cb{position:absolute;padding:5px;background-color:#3c3f41;border:1px solid #515658;border-radius:5px;color:#a9b7c6;z-index:3;opacity:1;-webkit-transition:opacity 2s linear;-moz-transition:opacity 2s linear;-o-transition:opacity 2s linear;transition:opacity 2s linear}#metadata_info{color:#a9b7c6;font-size:17px}#message{border-bottom:1px dotted #a9b7c6}#controls{transform:scale(.88)}#controls>div{display:inline-block}#more_controls{margin-top:15px}#more_controls>strong{color:#a9b7c6;font-size:19px}#more_controls>div{color:#d1d1d1;font-size:25px;cursor:pointer;text-shadow:1px 1px 2px #000,0 0 3px #d1d1d1}.rg{color:#cc7832}.dash{color:#515658}.soft{color:#ffc66d}.track_number{color:#6a8759}.time{color:#6897bb}.magenta{color:#9876aa}#tabs{font-size:14px}#browser{display:none;position:absolute;top:calc(50% - 200px);left:calc(50% - 200px);width:350px;height:400px;color:#fff;text-align:center}#browser a{color:#9876aa}#player #spectrum{height:0}#player.playing #spectrum{height:200px}#spectrum{transition:height .5s linear}#dev_bar{position:absolute;top:300px;right:-600px;width:600px;margin-top:10px;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out}#dev_bar h1{font-size:120%}#text{width:600px;border:1px solid #515658;background-color:#3c3f41;padding:10px;box-shadow:0 0 3px 2px rgba(0,0,0,.3);border-top-left-radius:3px;border-bottom-left-radius:3px}#btn{position:absolute;top:10px;left:-37px;font-size:36px;width:37px;border:1px solid #515658;border-right:1px solid #3c3f41;text-align:center;background-color:#3c3f41;border-top-left-radius:3px;border-bottom-left-radius:3px;color:#fff}#dev_bar:hover{right:-29px}.direct_link.zeroclipboard-is-hover{background-color:transparent;cursor:pointer}.direct_link.zeroclipboard-is-active{background-color:transparent;cursor:pointer}.scroller{overflow-y:scroll;height:100%;-webkit-overflow-scrolling:touch}.scroller::-webkit-scrollbar{width:0}.scroller__bar{position:absolute;z-index:1;right:0;width:10px;background:#515658;border-radius:2px}#playlist_bar select{padding:3px;margin:0;-webkit-border-radius:4px;-moz-border-radius:7px;border-radius:10px;background-color:#515658;color:#a9b7c6;border:none;outline:none;display:inline-block;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;width:45%}@media screen and (-webkit-min-device-pixel-ratio:0){#playlist_bar select{padding-right:18px}}#playlist_bar label{position:relative}#playlist_bar label:after{content:'<>';font:11px consolas,monospace;color:#a9b7c6;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);right:10px;top:2px;padding:0 0 2px;border-bottom:1px solid #ddd;position:absolute;pointer-events:none}#container_button{background-color:#252525;width:300px;height:300px;margin-left:auto;margin-right:auto;margin-bottom:0;margin-top:0;-webkit-border-radius:150px;-moz-border-radius:150px;border-radius:200px;-webkit-box-shadow:inset 0 2px 0 #585858,1px 1px 0 #000,2px 2px 5px #000;-moz-box-shadow:inset 0 2px 0 #585858,1px 1px 0 #000,2px 2px 5px #000;box-shadow:inset 0 2px 0 #585858,1px 1px 0 #000,2px 2px 5px #000}#hole{background-color:#151515;width:230px;height:230px;margin-left:auto;margin-right:auto;top:37px;position:relative;-webkit-border-radius:115px;-moz-border-radius:115px;border-radius:115px;-webkit-box-shadow:1px 1px 0 #5d5d5d;-moz-box-shadow:1px 1px 0 #5d5d5d;box-shadow:1px 1px 0 #5d5d5d}#button{width:220px;height:220px;margin-left:auto;margin-right:auto;overflow:auto;cursor:pointer;top:-4px;position:relative;background-image:linear-gradient(bottom,rgb(82,79,82) 0%,rgb(134,134,134) 57%);background-image:-o-linear-gradient(bottom,rgb(82,79,82) 0%,rgb(134,134,134) 57%);background-image:-moz-linear-gradient(bottom,rgb(82,79,82) 0%,rgb(134,134,134) 57%);background-image:-webkit-linear-gradient(bottom,rgb(82,79,82) 0%,rgb(134,134,134) 57%);background-image:-ms-linear-gradient(bottom,rgb(82,79,82) 0%,rgb(134,134,134) 57%);-webkit-border-radius:110px;-moz-border-radius:110px;border-radius:110px;-webkit-box-shadow:inset 0 2px 0 #a8a8a8,0 2px 0 #2a2a2a,0 3px 0 #2a2a2a,0 4px 0 #2a2a2a,0 5px 0 #2a2a2a,0 6px 0 #2a2a2a,0 7px 0 #2a2a2a,0 8px 0 #2a2a2a,0 9px 0 #2a2a2a,0 10px 0 #2a2a2a,10px 20px 10px #000;-moz-box-shadow:inset 0 2px 0 #a8a8a8,0 2px 0 #2a2a2a,0 3px 0 #2a2a2a,0 4px 0 #2a2a2a,0 5px 0 #2a2a2a,0 6px 0 #2a2a2a,0 7px 0 #2a2a2a,0 8px 0 #2a2a2a,0 9px 0 #2a2a2a,0 10px 0 #2a2a2a,10px 20px 10px #000;box-shadow:inset 0 2px 0 #a8a8a8,0 2px 0 #2a2a2a,0 3px 0 #2a2a2a,0 4px 0 #2a2a2a,0 5px 0 #2a2a2a,0 6px 0 #2a2a2a,0 7px 0 #2a2a2a,0 8px 0 #2a2a2a,0 9px 0 #2a2a2a,0 10px 0 #2a2a2a,10px 20px 10px #000;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}#button.playing{top:5px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:inset 0 2px 0 #a8a8a8}#triangle{width:0;height:0;margin-left:50%;margin-top:50%;left:-27px;top:-50px;position:relative;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:80px solid #9876aa;z-index:2;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}#button:hover #triangle{border-left:80px solid #b68acc}#button.playing #triangle{border-left:80px solid #e94545}#lighter_triangle{width:0;height:0;margin-left:50%;margin-top:50%;left:-27px;top:-48px;position:absolute;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:80px solid #c099d2;z-index:1;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}#button:hover #lighter_triangle{border-left:80px solid #c297d6}#button.playing #lighter_triangle{border-left:80px solid #f78b8b}#darker_triangle{width:0;height:0;margin-left:50%;margin-top:50%;left:-28px;top:-53px;position:absolute;border-top:50px solid transparent;border-bottom:50px solid transparent;border-left:80px solid #856e96;z-index:1;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}#button:hover #darker_triangle{border-left:80px solid #746285}#button.playing #darker_triangle{border-left:80px solid #c51d1d}#container_button_next{background-color:#252525;width:200px;height:200px;display:inline-block;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;-webkit-box-shadow:inset 0 2px 0 #585858,1px 1px 0 #000,2px 2px 5px #000;-moz-box-shadow:inset 0 2px 0 #585858,1px 1px 0 #000,2px 2px 5px #000;box-shadow:inset 0 2px 0 #585858,1px 1px 0 #000,2px 2px 5px #000}#hole_next{background-color:#151515;width:140px;height:140px;margin-left:auto;margin-right:auto;top:35px;position:relative;-webkit-border-radius:70px;-moz-border-radius:70px;border-radius:70px;-webkit-box-shadow:1px 1px 0 #5d5d5d;-moz-box-shadow:1px 1px 0 #5d5d5d;box-shadow:1px 1px 0 #5d5d5d}#button_next{width:130px;height:130px;margin-left:auto;margin-right:auto;overflow:auto;cursor:pointer;top:-4px;position:relative;background-image:linear-gradient(bottom,rgb(82,79,82) 0%,rgb(134,134,134) 57%);background-image:-o-linear-gradient(bottom,rgb(82,79,82) 0%,rgb(134,134,134) 57%);background-image:-moz-linear-gradient(bottom,rgb(82,79,82) 0%,rgb(134,134,134) 57%);background-image:-webkit-linear-gradient(bottom,rgb(82,79,82) 0%,rgb(134,134,134) 57%);background-image:-ms-linear-gradient(bottom,rgb(82,79,82) 0%,rgb(134,134,134) 57%);-webkit-border-radius:65px;-moz-border-radius:65px;border-radius:65px;-webkit-box-shadow:inset 0 2px 0 #a8a8a8,0 2px 0 #2a2a2a,0 3px 0 #2a2a2a,0 4px 0 #2a2a2a,0 5px 0 #2a2a2a,0 6px 0 #2a2a2a,0 7px 0 #2a2a2a,0 8px 0 #2a2a2a,0 9px 0 #2a2a2a,0 10px 0 #2a2a2a,10px 20px 10px #000;-moz-box-shadow:inset 0 2px 0 #a8a8a8,0 2px 0 #2a2a2a,0 3px 0 #2a2a2a,0 4px 0 #2a2a2a,0 5px 0 #2a2a2a,0 6px 0 #2a2a2a,0 7px 0 #2a2a2a,0 8px 0 #2a2a2a,0 9px 0 #2a2a2a,0 10px 0 #2a2a2a,10px 20px 10px #000;box-shadow:inset 0 2px 0 #a8a8a8,0 2px 0 #2a2a2a,0 3px 0 #2a2a2a,0 4px 0 #2a2a2a,0 5px 0 #2a2a2a,0 6px 0 #2a2a2a,0 7px 0 #2a2a2a,0 8px 0 #2a2a2a,0 9px 0 #2a2a2a,0 10px 0 #2a2a2a,10px 20px 10px #000;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}#button_next:active{top:5px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:inset 0 2px 0 #a8a8a8}#triangle_next{width:0;height:0;margin-left:50%;margin-top:50%;left:-23px;top:-15px;position:relative;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:20px solid #22a9db;z-index:2;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}#button_next:hover #triangle_next{border-left:20px solid #45bde9}#button_next:active #triangle_next{border-left:20px solid #e94545}#lighter_triangle_next{width:0;height:0;margin-left:50%;margin-top:50%;left:-23px;top:-16px;position:absolute;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:20px solid #43c0ee;z-index:1;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}#button_next:hover #lighter_triangle_next{border-left:20px solid #8bdaf7}#button_next:active #lighter_triangle_next{border-left:20px solid #f78b8b}#darker_triangle_next{width:0;height:0;margin-left:50%;margin-top:50%;left:-24px;top:-17px;position:absolute;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:20px solid #0a7da7;z-index:1;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}#button_next:hover #darker_triangle_next{border-left:20px solid #1d98c5}#button_next:active #darker_triangle_next{border-left:20px solid #c51d1d}#triangle_next_2{width:0;height:0;margin-left:50%;margin-top:50%;left:10px;top:-15px;position:absolute;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:20px solid #22a9db;z-index:2;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}#button_next:hover #triangle_next_2{border-left:20px solid #45bde9}#button_next:active #triangle_next_2{border-left:20px solid #e94545}#lighter_triangle_next_2{width:0;height:0;margin-left:50%;margin-top:50%;left:10px;top:-16px;position:absolute;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:20px solid #43c0ee;z-index:1;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}#button_next:hover #lighter_triangle_next_2{border-left:20px solid #8bdaf7}#button_next:active #lighter_triangle_next_2{border-left:20px solid #f78b8b}#darker_triangle_next_2{width:0;height:0;margin-left:50%;margin-top:50%;left:9px;top:-17px;position:absolute;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:20px solid #0a7da7;z-index:1;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}#button_next:hover #darker_triangle_next_2{border-left:20px solid #1d98c5}#button_next:active #darker_triangle_next_2{border-left:20px solid #c51d1d}#container_button_prev{background-color:#252525;width:200px;height:200px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;-webkit-box-shadow:inset 0 2px 0 #585858,1px 1px 0 #000,2px 2px 5px #000;-moz-box-shadow:inset 0 2px 0 #585858,1px 1px 0 #000,2px 2px 5px #000;box-shadow:inset 0 2px 0 #585858,1px 1px 0 #000,2px 2px 5px #000}#hole_prev{background-color:#151515;width:140px;height:140px;margin-left:auto;margin-right:auto;top:35px;position:relative;-webkit-border-radius:70px;-moz-border-radius:70px;border-radius:70px;-webkit-box-shadow:1px 1px 0 #5d5d5d;-moz-box-shadow:1px 1px 0 #5d5d5d;box-shadow:1px 1px 0 #5d5d5d}#button_prev{width:130px;height:130px;margin-left:auto;margin-right:auto;overflow:auto;cursor:pointer;top:-4px;position:relative;background-image:linear-gradient(bottom,rgb(82,79,82) 0%,rgb(134,134,134) 57%);background-image:-o-linear-gradient(bottom,rgb(82,79,82) 0%,rgb(134,134,134) 57%);background-image:-moz-linear-gradient(bottom,rgb(82,79,82) 0%,rgb(134,134,134) 57%);background-image:-webkit-linear-gradient(bottom,rgb(82,79,82) 0%,rgb(134,134,134) 57%);background-image:-ms-linear-gradient(bottom,rgb(82,79,82) 0%,rgb(134,134,134) 57%);-webkit-border-radius:65px;-moz-border-radius:65px;border-radius:65px;-webkit-box-shadow:inset 0 2px 0 #a8a8a8,0 2px 0 #2a2a2a,0 3px 0 #2a2a2a,0 4px 0 #2a2a2a,0 5px 0 #2a2a2a,0 6px 0 #2a2a2a,0 7px 0 #2a2a2a,0 8px 0 #2a2a2a,0 9px 0 #2a2a2a,0 10px 0 #2a2a2a,10px 20px 10px #000;-moz-box-shadow:inset 0 2px 0 #a8a8a8,0 2px 0 #2a2a2a,0 3px 0 #2a2a2a,0 4px 0 #2a2a2a,0 5px 0 #2a2a2a,0 6px 0 #2a2a2a,0 7px 0 #2a2a2a,0 8px 0 #2a2a2a,0 9px 0 #2a2a2a,0 10px 0 #2a2a2a,10px 20px 10px #000;box-shadow:inset 0 2px 0 #a8a8a8,0 2px 0 #2a2a2a,0 3px 0 #2a2a2a,0 4px 0 #2a2a2a,0 5px 0 #2a2a2a,0 6px 0 #2a2a2a,0 7px 0 #2a2a2a,0 8px 0 #2a2a2a,0 9px 0 #2a2a2a,0 10px 0 #2a2a2a,10px 20px 10px #000;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}#button_prev:active{top:5px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:inset 0 2px 0 #a8a8a8}#triangle_prev{width:0;height:0;margin-left:50%;margin-top:50%;left:-26px;top:-15px;position:relative;border-top:14px solid transparent;border-bottom:14px solid transparent;border-right:20px solid #22a9db;z-index:2;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}#button_prev:hover #triangle_prev{border-right:20px solid #45bde9}#button_prev:active #triangle_prev{border-right:20px solid #e94545}#lighter_triangle_prev{width:0;height:0;margin-left:50%;margin-top:50%;left:-26px;top:-16px;position:absolute;border-top:14px solid transparent;border-bottom:14px solid transparent;border-right:20px solid #43c0ee;z-index:1;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}#button_prev:hover #lighter_triangle_prev{border-right:20px solid #8bdaf7}#button_prev:active #lighter_triangle_prev{border-right:20px solid #f78b8b}#darker_triangle_prev{width:0;height:0;margin-left:50%;margin-top:50%;left:-27px;top:-17px;position:absolute;border-top:14px solid transparent;border-bottom:14px solid transparent;border-right:20px solid #0a7da7;z-index:1;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}#button_prev:hover #darker_triangle_prev{border-right:20px solid #1d98c5}#button_prev:active #darker_triangle_prev{border-right:20px solid #c51d1d}#triangle_prev_2{width:0;height:0;margin-left:50%;margin-top:50%;left:7px;top:-15px;position:absolute;border-top:14px solid transparent;border-bottom:14px solid transparent;border-right:20px solid #22a9db;z-index:2;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}#button_prev:hover #triangle_prev_2{border-right:20px solid #45bde9}#button_prev:active #triangle_prev_2{border-right:20px solid #e94545}#lighter_triangle_prev_2{width:0;height:0;margin-left:50%;margin-top:50%;left:7px;top:-16px;position:absolute;border-top:14px solid transparent;border-bottom:14px solid transparent;border-right:20px solid #43c0ee;z-index:1;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}#button_prev:hover #lighter_triangle_prev_2{border-right:20px solid #8bdaf7}#button_prev:active #lighter_triangle_prev_2{border-right:20px solid #f78b8b}#darker_triangle_prev_2{width:0;height:0;margin-left:50%;margin-top:50%;left:6px;top:-17px;position:absolute;border-top:14px solid transparent;border-bottom:14px solid transparent;border-right:20px solid #0a7da7;z-index:1;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}#button_prev:hover #darker_triangle_prev_2{border-right:20px solid #1d98c5}#button_prev:active #darker_triangle_prev_2{border-right:20px solid #c51d1d}.switch{background-color:rgba(0,0,0,.2);border-radius:30px;border:4px solid rgba(58,58,58,.1);box-shadow:0 0 6px rgba(0,0,0,.5) inset;height:42px;margin:0 auto;position:relative;width:115px}.switch-check{position:absolute;visibility:hidden}.switch-label{cursor:pointer;display:block;height:42px;text-indent:-9999px;width:115px}.switch-label:before{background:#fff;background:-moz-radial-gradient(45%,circle,rgb(255,58,58) 0%,rgb(255,113,113) 100%);background:-webkit-radial-gradient(45%,circle,rgb(255,58,58) 0%,rgb(255,113,113) 100%);background:-o-radial-gradient(45%,circle,rgb(255,58,58) 0%,rgb(255,113,113) 100%);border-radius:10px;border:1px solid #742323;box-shadow:0 2px 5px rgba(255,67,48,.6),0 0 5px rgba(255,159,109,.5) inset;content:"";display:block;height:10px;left:-20%;position:absolute;top:16px;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s;width:10px;z-index:12}.switch-label:after{background:#fff;background:-moz-radial-gradient(45%,circle,rgba(60,60,60,0.6) 0%,rgba(151,151,151,0.6) 100%);background:-webkit-radial-gradient(45%,circle,rgba(60,60,60,0.6) 0%,rgba(151,151,151,0.6) 100%);background:-o-radial-gradient(45%,circle,rgba(60,60,60,0.6) 0%,rgba(151,151,151,0.6) 100%);border-radius:10px;border:1px solid #111;box-shadow:0 2px 5px rgba(20,20,20,.5);content:"";display:block;height:10px;right:-20%;position:absolute;top:16px;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s;width:10px;z-index:12}.switch-label span{background:-webkit-linear-gradient(#4f4f4f,#2b2b2b);background:-moz-linear-gradient(#4f4f4f,#2b2b2b);background:-o-linear-gradient(#4f4f4f,#2b2b2b);background:linear-gradient(#4f4f4f,#2b2b2b);border-radius:30px;border:1px solid #1a1a1a;box-shadow:0 0 4px rgba(0,0,0,.5),0 1px 1px rgba(255,255,255,.1) inset,0 -2px 0 rgba(0,0,0,.2) inset;display:block;height:38px;left:1px;position:absolute;top:1px;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;width:53px}.switch-label span:before{background:#fff;background:-webkit-linear-gradient(left,rgba(48,48,48,0.4),rgba(34,34,34,0.4));background:-moz-linear-gradient(left,rgba(48,48,48,0.4),rgba(34,34,34,0.4));background:-o-linear-gradient(left,rgba(48,48,48,0.4),rgba(34,34,34,0.4));background:linear-gradient(left,rgba(48,48,48,0.4),rgba(34,34,34,0.4));border-radius:30px 10px 10px 30px;box-shadow:-2px 0 5px rgba(0,0,0,.2) inset;content:"";display:block;height:33px;left:2px;position:absolute;top:2px;width:21px}.switch-label span:after{background:#fff;background:-webkit-linear-gradient(right,rgba(48,48,48,0.4),rgba(34,34,34,0.4));background:-moz-linear-gradient(right,rgba(48,48,48,0.4),rgba(34,34,34,0.4));background:-o-linear-gradient(right,rgba(48,48,48,0.4),rgba(34,34,34,0.4));background:linear-gradient(right,rgba(48,48,48,0.4),rgba(34,34,34,0.4));border-radius:10px 30px 30px 10px;box-shadow:2px 0 5px rgba(0,0,0,.2) inset;content:"";display:block;height:33px;position:absolute;right:2px;top:2px;width:21px}.switch-check:checked+.switch-label span{left:59px}.switch-check:checked+.switch-label:before{background:-moz-radial-gradient(45%,circle,rgba(60,60,60,0.6) 0%,rgba(151,151,151,0.6) 100%);background:-webkit-radial-gradient(45%,circle,rgba(60,60,60,0.6) 0%,rgba(151,151,151,0.6) 100%);background:-o-radial-gradient(45%,circle,rgba(60,60,60,0.6) 0%,rgba(151,151,151,0.6) 100%);border:1px solid #111;box-shadow:0 2px 5px rgba(20,20,20,.5)}.switch-check:checked+.switch-label:after{background:-moz-radial-gradient(45%,circle,rgb(128,215,255) 0%,rgb(197,237,255) 100%);background:-webkit-radial-gradient(45%,circle,rgb(128,215,255) 0%,rgb(197,237,255) 100%);background:-o-radial-gradient(45%,circle,rgb(128,215,255) 0%,rgb(197,237,255) 100%);border:1px solid #004562;box-shadow:0 2px 5px rgba(81,208,255,.5),0 0 5px rgba(210,243,255,.5) inset} |