141 lines
28 KiB
CSS
141 lines
28 KiB
CSS
.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";}
|
|
.clearfix:after{clear:both;}
|
|
.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;}
|
|
.input-block-level{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
|
|
.clearfix{*zoom:1;}
|
|
.clearfix:before,.clearfix:after{display:table;content:"";}
|
|
.clearfix:after{clear:both;}
|
|
.desaturate{filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:url(resources.svg#desaturate);filter:gray;-webkit-filter:grayscale(1);}
|
|
.clearfix:before,.clearfix:after{content:" ";display:table;}
|
|
.clearfix:after{clear:both;}
|
|
.loading-stripes{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;background-image:-webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.1)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.75, rgba(255, 255, 255, 0.1)), color-stop(0.75, transparent), to(transparent));background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);background-size:60px 60px;-moz-background-size:60px 60px;-webkit-background-size:60px 60px;-webkit-animation:animate-stripes 2s linear infinite;}
|
|
@-webkit-keyframes animate-stripes{from{background-position:0 0;} to{background-position:-60px 0;}}@-moz-keyframes animate-stripes{from{background-position:0 0;} to{background-position:-60px 0;}}@-ms-keyframes animate-stripes{from{background-position:0 0;} to{background-position:-60px 0;}}@-o-keyframes animate-stripes{from{background-position:0 0;} to{background-position:-60px 0;}}@keyframes animate-stripes{from{background-position:0 0;} to{background-position:-60px 0;}}body.iphone{overflow:hidden;}body.iphone #iphone-image-link{display:block;height:100%;width:100%;position:absolute;z-index:1000;overflow:hidden;background:url(../img/iphone-horizontal.jpg) center top no-repeat;background-size:568px 240px;display:block !important;}
|
|
body.iphone.right-side-up #iphone-image-link{background:url(../img/iphone-vertical.jpg) center top no-repeat;background-size:320px 568px;}
|
|
body.iphone *{display:none;}
|
|
@font-face{font-family:DINWeb;src:url("../font/DINWeb.eot");}@font-face{font-family:DINWeb;src:url("../font/DINWeb.woff") format("woff");}#replay-thumbnail{opacity:0;pointer-events:none;-webkit-transition:opacity 0.7s ease-in-out;-moz-transition:opacity 0.7s ease-in-out;-ms-transition:opacity 0.7s ease-in-out;-o-transition:opacity 0.7s ease-in-out;transition:opacity 0.7s ease-in-out;position:absolute;z-index:1000;bottom:25px;left:25px;border-radius:5px;-webkit-box-shadow:0 0 15px #000000;-moz-box-shadow:0 0 15px #000000;box-shadow:0 0 15px #000000;width:150px;height:150px;border:1px solid #4d415b;cursor:pointer;}#replay-thumbnail.visible{opacity:1;pointer-events:all;}
|
|
#replay-thumbnail:hover{border:1px solid #60497b;}
|
|
#replay-thumbnail:active{border:1px solid #5a4574;}
|
|
#replay-thumbnail img{border-radius:5px;}
|
|
#replay-thumbnail .tt{left:0px !important;width:150px !important;text-align:center;padding:0;bottom:auto;top:-30px;}
|
|
#appstore-badge{position:absolute;bottom:20px;right:30px;z-index:5;text-decoration:none;-webkit-transition:opacity 0.7s ease-in-out;-moz-transition:opacity 0.7s ease-in-out;-ms-transition:opacity 0.7s ease-in-out;-o-transition:opacity 0.7s ease-in-out;transition:opacity 0.7s ease-in-out;pointer-events:none;width:262px;height:125px;width:165px;height:300px;overflow:hidden;overflow:visible;}#appstore-badge #announcement{opacity:0;pointer-events:none;-webkit-transition:opacity 0.7s ease-in-out;-moz-transition:opacity 0.7s ease-in-out;-ms-transition:opacity 0.7s ease-in-out;-o-transition:opacity 0.7s ease-in-out;transition:opacity 0.7s ease-in-out;-webkit-transition:all 0.1 ease-in-out !important;-moz-transition:all 0.1 ease-in-out !important;-ms-transition:all 0.1 ease-in-out !important;-o-transition:all 0.1 ease-in-out !important;transition:all 0.1 ease-in-out !important;height:245px;width:170px;}#appstore-badge #announcement.visible{opacity:1;pointer-events:all;}
|
|
#appstore-badge #announcement img{-webkit-transition:all 0.1 ease-in-out !important;-moz-transition:all 0.1 ease-in-out !important;-ms-transition:all 0.1 ease-in-out !important;-o-transition:all 0.1 ease-in-out !important;transition:all 0.1 ease-in-out !important;}
|
|
#appstore-badge #announcement .close-button{color:#aeaed6;border-radius:5px;display:block;position:absolute;right:-6px;top:249px;z-index:10000;text-align:center;font-size:14px;line-height:26px;width:26px;height:26px;background:#222222;background-image:-webkit-gradient(linear, left top, left bottom, from(#222222), to(#111111));background-image:-moz-linear-gradient(top, #222222, #111111);z-index:1000;-webkit-box-shadow:0 0 5px #000000;-moz-box-shadow:0 0 5px #000000;box-shadow:0 0 5px #000000;-webkit-transition:0.8s all ease-in-out;-moz-transition:0.8s all ease-in-out;-ms-transition:0.8s all ease-in-out;-o-transition:0.8s all ease-in-out;transition:0.8s all ease-in-out;-webkit-transition-delay:1s;-moz-transition-delay:1s;-ms-transition-delay:1s;-o-transition-delay:1s;transition-delay:1s;}#appstore-badge #announcement .close-button:active{opacity:1;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}
|
|
#appstore-badge #announcement .close-button.ad-showing-unnecessarily{opacity:1;opacity:0.7;pointer-events:all;}
|
|
#appstore-badge #announcement .close-button.close-pressed{opacity:0;pointer-events:none;}
|
|
#appstore-badge #announcement:hover .close-button{opacity:1;}
|
|
#appstore-badge #announcement img{margin-bottom:5px;position:absolute;}
|
|
#appstore-badge #announcement.visible #app-announcement{opacity:1;z-index:1;}
|
|
#appstore-badge #announcement.visible #app-announcement-hover{opacity:0;z-index:2;}
|
|
#appstore-badge #announcement.visible:hover #app-announcement{opacity:0;}
|
|
#appstore-badge #announcement.visible:hover #app-announcement-hover{opacity:1;}
|
|
#appstore-badge #badge{opacity:0;pointer-events:none;-webkit-transition:opacity 0.7s ease-in-out;-moz-transition:opacity 0.7s ease-in-out;-ms-transition:opacity 0.7s ease-in-out;-o-transition:opacity 0.7s ease-in-out;transition:opacity 0.7s ease-in-out;margin:0 auto;width:135px;height:40px;margin-top:5px;position:relative;left:3px;bottom:-10px;-webkit-box-shadow:0 0 15px #000000;-moz-box-shadow:0 0 15px #000000;box-shadow:0 0 15px #000000;z-index:100;}#appstore-badge #badge.visible{opacity:1;pointer-events:all;}
|
|
#share-options .direct-link{opacity:0;pointer-events:none;-webkit-transition:opacity 0.7s ease-in-out;-moz-transition:opacity 0.7s ease-in-out;-ms-transition:opacity 0.7s ease-in-out;-o-transition:opacity 0.7s ease-in-out;transition:opacity 0.7s ease-in-out;font-size:12px;color:#ccc;margin-top:5px;padding:10px 0;text-indent:10px;-webkit-user-select:text !important;-moz-user-select:text !important;-ms-user-select:text !important;-o-user-select:text !important;user-select:text !important;text-shadow:0 0 5px #000, 1px 1px 0 #000;margin-left:10px;background:#382c49;background-image:-webkit-gradient(linear, left top, left bottom, from(#382c49), to(#2d233b));background-image:-moz-linear-gradient(top, #382c49, #2d233b);-webkit-box-shadow:0 0 15px #000, inner 0 0 5px #000;-moz-box-shadow:0 0 15px #000, inner 0 0 5px #000;box-shadow:0 0 15px #000, inner 0 0 5px #000;border:none;border:1px solid #111;width:220px;outline:none !important;display:inline-block;cursor:text;}#share-options .direct-link.visible{opacity:1;pointer-events:all;}
|
|
#share-options .direct-link:focus{border:1px solid #276f9b;}
|
|
#copy-to-clipboard-wrap{position:relative;}
|
|
#btn-new,#btn-share,#share-options .btn{background:#53416c !important;background-image:-webkit-gradient(linear, left top, left bottom, from(#53416c), to(#261d32)) !important;background-image:-moz-linear-gradient(top, #53416c, #261d32) !important;border-top:1px solid #5f96e1;}#btn-new:hover,#btn-share:hover,#share-options .btn:hover,#btn-new.hover,#btn-share.hover,#share-options .btn.hover{border-top-color:#35c9ff;}#btn-new:hover .text,#btn-share:hover .text,#share-options .btn:hover .text,#btn-new.hover .text,#btn-share.hover .text,#share-options .btn.hover .text{color:#fff;}
|
|
#btn-new:active,#btn-share:active,#share-options .btn:active,#btn-new.active,#btn-share.active,#share-options .btn.active{background:#3a2d4c !important;background-image:-webkit-gradient(linear, left top, left bottom, from(#3a2d4c), to(#53416c)) !important;background-image:-moz-linear-gradient(top, #3a2d4c, #53416c) !important;}
|
|
#btn-new.disabled,#btn-share.disabled,#share-options .btn.disabled{background:#53416c !important;background-image:-webkit-gradient(linear, left top, left bottom, from(#53416c), to(#261d32)) !important;background-image:-moz-linear-gradient(top, #53416c, #261d32) !important;border-top:1px solid #5f96e1 !important;}
|
|
#intro-center{opacity:0;pointer-events:none;-webkit-transition:opacity 0.7s ease-in-out;-moz-transition:opacity 0.7s ease-in-out;-ms-transition:opacity 0.7s ease-in-out;-o-transition:opacity 0.7s ease-in-out;transition:opacity 0.7s ease-in-out;-webkit-transition:opacity 1.5s ease-in-out;-moz-transition:opacity 1.5s ease-in-out;-ms-transition:opacity 1.5s ease-in-out;-o-transition:opacity 1.5s ease-in-out;transition:opacity 1.5s ease-in-out;pointer-events:none !important;z-index:100;text-align:center;position:absolute;top:50%;left:50%;height:150px;line-height:100px;width:300px;margin-left:-150px;margin-top:-275px;color:#ccc;}#intro-center.visible{opacity:1;pointer-events:all;}
|
|
#intro-draw-something{opacity:0;pointer-events:none;-webkit-transition:opacity 0.7s ease-in-out;-moz-transition:opacity 0.7s ease-in-out;-ms-transition:opacity 0.7s ease-in-out;-o-transition:opacity 0.7s ease-in-out;transition:opacity 0.7s ease-in-out;-webkit-transition:opacity 1.5s ease-in-out;-moz-transition:opacity 1.5s ease-in-out;-ms-transition:opacity 1.5s ease-in-out;-o-transition:opacity 1.5s ease-in-out;transition:opacity 1.5s ease-in-out;pointer-events:none !important;z-index:101;position:absolute;top:50%;margin-top:170px;width:100%;height:20px;text-align:center;font-size:14px;color:#a48dc4;}#intro-draw-something.visible{opacity:1;pointer-events:all;}
|
|
#intro-mute-option{opacity:0;pointer-events:none;-webkit-transition:opacity 0.7s ease-in-out;-moz-transition:opacity 0.7s ease-in-out;-ms-transition:opacity 0.7s ease-in-out;-o-transition:opacity 0.7s ease-in-out;transition:opacity 0.7s ease-in-out;-webkit-transition:opacity 1.5s ease-in-out;-moz-transition:opacity 1.5s ease-in-out;-ms-transition:opacity 1.5s ease-in-out;-o-transition:opacity 1.5s ease-in-out;transition:opacity 1.5s ease-in-out;pointer-events:none !important;z-index:100;position:absolute;bottom:20px;width:100%;height:20px;text-align:center;font-size:14px;color:#a48dc4;color:#a288c3;color:#79698e;}#intro-mute-option.visible{opacity:1;pointer-events:all;}
|
|
#intro-mute-option #instructions{margin-bottom:15px;color:#c4b2dc;}
|
|
#intro-mute-option a{pointer-events:all;color:#a48dc4;color:#947fb1;text-decoration:none;border-bottom:1px dotted #a48dc4;}#intro-mute-option a:hover{color:#eadbff;border-bottom-style:solid;}
|
|
#intro-mute-option a:active{color:#d1bbef;}
|
|
*{margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}
|
|
html{background:#000;}
|
|
body{font-family:DINWeb,Helvetica,sans-serif;font-size:16px;overflow:hidden;background:#000;}
|
|
.text-drop-shadow{text-shadow:0 0 5px #000, 1px 1px 0 #000;}
|
|
:hover>.tt{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
|
|
.tt{z-index:100;color:#fff;padding:10px;height:20px;white-space:nowrap;position:absolute;bottom:-30px;font-size:14px;width:200px;left:-85px;text-align:center;opacity:0;-webkit-transform:scale(0.95);-moz-transform:scale(0.95);-ms-transform:scale(0.95);-o-transform:scale(0.95);transform:scale(0.95);pointer-events:none;-webkit-transition:all 0.25s ease-out;-moz-transition:all 0.25s ease-out;-ms-transition:all 0.25s ease-out;-o-transition:all 0.25s ease-out;transition:all 0.25s ease-out;text-shadow:0 0 5px #000, 1px 1px 0 #000;}
|
|
#main-controls{top:20px;left:20px;z-index:1000;}
|
|
#sound-and-about{top:10px;right:20px;}#sound-and-about .app-link-container{opacity:0;pointer-events:none;-webkit-transition:opacity 0.7s ease-in-out;-moz-transition:opacity 0.7s ease-in-out;-ms-transition:opacity 0.7s ease-in-out;-o-transition:opacity 0.7s ease-in-out;transition:opacity 0.7s ease-in-out;color:#ccc !important;width:265px;pointer-events:all;font-size:13px;position:relative;}#sound-and-about .app-link-container.visible{opacity:1;pointer-events:all;}
|
|
#sound-and-about .app-link-container a{width:135px;height:40px;display:block;float:right;}
|
|
#sound-and-about .app-link-container a{text-decoration:none;color:#d7c3f2;}#sound-and-about .app-link-container a:hover{color:#fff;}
|
|
#sound-and-about .app-link-container a:active{color:#d7c3f2;}
|
|
#sound-and-about .social-row{width:265px ;}#sound-and-about .social-row .silk-icon{height:auto;line-height:auto;}
|
|
#sound-and-about .social-row .social{float:right;opacity:0;pointer-events:none;-webkit-transition:opacity 0.7s ease-in-out;-moz-transition:opacity 0.7s ease-in-out;-ms-transition:opacity 0.7s ease-in-out;-o-transition:opacity 0.7s ease-in-out;transition:opacity 0.7s ease-in-out;display:inline-block;position:relative;top:12px;right:10px;z-index:1;padding-left:15px;}#sound-and-about .social-row .social.visible{opacity:1;pointer-events:all;}
|
|
#sound-and-about .social-row .social .fb-like{display:inline-block;overflow:hidden;position:relative;left:-5px;top:-1px;}
|
|
#sound-and-about .social-row .social .fb-like{vertical-align:text-top !important;}
|
|
#sound-and-about .social-row .social .fb-like *{vertical-align:text-top !important;}
|
|
#sound-and-about .social-row .social .twitter-follow-button[style]{vertical-align:text-top !important;}
|
|
#sound-and-about .social-row .social .twitter-follow-button{display:inline-block;font-style:10px;color:#8976a4;position:relative;text-decoration:none;top:-1px;}
|
|
#sound-and-about .silk-icon{float:right;}
|
|
#sound-and-about .about-row{opacity:0;pointer-events:none;-webkit-transition:opacity 0.7s ease-in-out;-moz-transition:opacity 0.7s ease-in-out;-ms-transition:opacity 0.7s ease-in-out;-o-transition:opacity 0.7s ease-in-out;transition:opacity 0.7s ease-in-out;margin-top:position: relative;width:200px;color:#8976a4;padding:20px;background:#231c2c;background-image:-webkit-gradient(linear, left top, left bottom, from(#231c2c), to(#130f18));background-image:-moz-linear-gradient(top, #231c2c, #130f18);font-size:13px;line-height:1.5;}#sound-and-about .about-row.visible{opacity:1;pointer-events:all;}
|
|
#sound-and-about .about-row a{color:#b8a3d6;text-decoration:none;}#sound-and-about .about-row a:hover{color:#f3e9ff;}
|
|
#sound-and-about .about-row a:active{color:#dbd0e9;}
|
|
#sound-and-about .about-row p{margin-bottom:8px;}
|
|
.controls-container{position:absolute;z-index:5;pointer-events:none;}
|
|
.controls-container .row{clear:both;pointer-events:none;*zoom:1;}.controls-container .row:before,.controls-container .row:after{display:table;content:"";}
|
|
.controls-container .row:after{clear:both;}
|
|
.controls-container .row .btn{opacity:0;pointer-events:none;-webkit-transition:opacity 0.7s ease-in-out;-moz-transition:opacity 0.7s ease-in-out;-ms-transition:opacity 0.7s ease-in-out;-o-transition:opacity 0.7s ease-in-out;transition:opacity 0.7s ease-in-out;-webkit-transition:opacity 0.7s ease-in-out, color 0.7s ease-in-out;-moz-transition:opacity 0.7s ease-in-out, color 0.7s ease-in-out;-ms-transition:opacity 0.7s ease-in-out, color 0.7s ease-in-out;-o-transition:opacity 0.7s ease-in-out, color 0.7s ease-in-out;transition:opacity 0.7s ease-in-out, color 0.7s ease-in-out;position:relative;width:95px;height:45px;line-height:45px;float:left;background:#261d32;color:#cbb2ec;text-align:center;text-decoration:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;border-right:1px solid #130e19;font-size:14px;}.controls-container .row .btn.visible{opacity:1;pointer-events:all;}
|
|
.controls-container .row .btn:last-child{border-right:none;}
|
|
.controls-container .row .btn.mini{width:55px;}
|
|
.controls-container .row .btn .loading-stripes{opacity:0;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;-ms-transition:opacity 0.5s ease-out;-o-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out;}
|
|
.controls-container .row .btn.disabled{color:#7f6e94 !important;background:#261d32 !important;cursor:default !important;}.controls-container .row .btn.disabled .text{color:inherit !important;}
|
|
.controls-container .row .btn.disabled.loading{color:#fff !important;}.controls-container .row .btn.disabled.loading .text{color:#fff !important;}
|
|
.controls-container .row .btn.loading{color:#fff !important;}.controls-container .row .btn.loading .loading-stripes{opacity:1;}
|
|
.controls-container .row .btn.loading .text{color:#fff !important;}
|
|
.controls-container .row .btn:hover{background:#362a47;cursor:pointer;}
|
|
.controls-container .row .btn:active{background:#322742;color:#c4ade4;}
|
|
.controls-container .row .btn.silk-icon{width:47px;background:transparent !important;text-shadow:0 0 5px #000, 1px 1px 0 #000;font-size:14px;border-right:none;text-align:center;-webkit-transition:opacity 0.7s ease-in-out;-moz-transition:opacity 0.7s ease-in-out;-ms-transition:opacity 0.7s ease-in-out;-o-transition:opacity 0.7s ease-in-out;transition:opacity 0.7s ease-in-out;}.controls-container .row .btn.silk-icon .tt{margin-left:-2px;}
|
|
.controls-container .row .btn.silk-icon:hover{color:#fff !important;}
|
|
.controls-container .row .btn.silk-icon:active{color:#dbd0e9 !important;}
|
|
.controls-container .row .btn.silk-icon i{display:inline-block;-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);}
|
|
.controls-container .row .btn.silk-icon.flip-icon i{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);}
|
|
.controls-container .row .btn.silk-icon:hover i{-webkit-transition:all 0.25s ease-out;-moz-transition:all 0.25s ease-out;-ms-transition:all 0.25s ease-out;-o-transition:all 0.25s ease-out;transition:all 0.25s ease-out;}
|
|
.controls-container .row .btn.silk-icon .tt{bottom:-7px;}
|
|
.controls-container .row #share-wrap{position:relative;float:left;}.controls-container .row #share-wrap #btn-share{position:absolute;z-index:5;border-right:none;}
|
|
.controls-container .row #share-options{position:relative;white-space:nowrap;float:left;z-index:4;pointer-events:none;}.controls-container .row #share-options .btn,.controls-container .row #share-options .direct-link{opacity:0;pointer-events:none;}
|
|
.controls-container .row #share-options.show-share-options .btn,.controls-container .row #share-options.show-share-options .direct-link{opacity:1;pointer-events:all;}
|
|
.controls-container .download-row{position:absolute;}.controls-container .download-row img{width:100%;border:1px solid #2c233a;-webkit-box-shadow:0 0 25px #000000;-moz-box-shadow:0 0 25px #000000;box-shadow:0 0 25px #000000;}
|
|
.controls-container .download-row p.instructions{text-shadow:0 0 5px #000, 1px 1px 0 #000;margin-bottom:15px;font-size:14px;line-height:1.5;color:#b8a3d6;}.controls-container .download-row p.instructions em{white-space:nowrap;color:#d3c1ed;}
|
|
.controls-container .controls-row{font-size:14px;margin-top:15px;width:195px;opacity:0;pointer-events:none;-webkit-transition:opacity 0.7s ease-in-out;-moz-transition:opacity 0.7s ease-in-out;-ms-transition:opacity 0.7s ease-in-out;-o-transition:opacity 0.7s ease-in-out;transition:opacity 0.7s ease-in-out;}.controls-container .controls-row.visible{opacity:1;pointer-events:all;}
|
|
.controls-container .controls-row.color-and-symmetry-row{margin-top:10px;}.controls-container .controls-row.color-and-symmetry-row .silk-icon{cursor:pointer;}
|
|
.controls-container .controls-row .label{margin:15px 5px 25px 5px;color:#8976a4;text-shadow:0 0 5px #000, 1px 1px 0 #000;cursor:default;}
|
|
.controls-container .controls-row .control{*zoom:1;}.controls-container .controls-row .control:before,.controls-container .controls-row .control:after{display:table;content:"";}
|
|
.controls-container .controls-row .control:after{clear:both;}
|
|
.controls-container .controls-row .control.toggle{padding:0 5px 15px 5px;cursor:pointer;text-shadow:0 0 5px #000, 1px 1px 0 #000;color:#8976a4;}.controls-container .controls-row .control.toggle:hover{color:#f3e9ff;}
|
|
.controls-container .controls-row .control.toggle:active{color:#dbd0e9;}
|
|
.controls-container .controls-row .control.toggle .state-on{display:none;}
|
|
.controls-container .controls-row .control.toggle .state-off{display:block;}
|
|
.controls-container .controls-row .control.toggle.on{color:#cbb2ec;}.controls-container .controls-row .control.toggle.on:hover{color:#f3e9ff;}
|
|
.controls-container .controls-row .control.toggle.on:active{color:#dbd0e9;}
|
|
.controls-container .controls-row .control.toggle.on .state-on{display:block;}
|
|
.controls-container .controls-row .control.toggle.on .state-off{display:none;}
|
|
.controls-container .controls-row .description{float:left;}
|
|
.controls-container .controls-row .state{float:right;text-align:right;}
|
|
.controls-container .controls-row #colorpicker{display:block;cursor:pointer !important;-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;-o-user-select:none !important;user-select:none !important;width:100%;height:185px;}.controls-container .controls-row #colorpicker g{cursor:pointer !important;-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;-o-user-select:none !important;user-select:none !important;}
|
|
.controls-container .controls-row #colorpicker path{cursor:pointer !important;-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;-o-user-select:none !important;user-select:none !important;cursor:pointer;}.controls-container .controls-row #colorpicker path:hover{stroke:rgba(255, 255, 255, 0.5);stroke-width:4;}
|
|
.controls-container .controls-row #colorpicker path.selected{stroke:rgba(255, 255, 255, 0.6);stroke-width:6;}
|
|
.controls-container .slider.one-d{position:relative;height:30px;background:#231c2c;cursor:pointer;border-radius:30px;}.controls-container .slider.one-d .slider-bg{position:relative;top:10px;height:10px;margin:0 10px;background:#15111c;border-radius:30px;overflow:hidden;}.controls-container .slider.one-d .slider-bg .slider-bg-pc{position:absolute;z-index:2;height:10px;border-radius:30px;background:#757ab2;}
|
|
.controls-container .slider.one-d .handle,.controls-container .slider.one-d .ghost-handle{position:absolute;z-index:5;top:6px;height:18px;width:18px;background:#9e95cb;background:#8572af;background-image:-webkit-gradient(linear, left top, left bottom, from(#8572af), to(#6f6091));background-image:-moz-linear-gradient(top, #8572af, #6f6091);-webkit-box-shadow:0 0 25px #000000;-moz-box-shadow:0 0 25px #000000;box-shadow:0 0 25px #000000;border-radius:30px;}
|
|
.controls-container .slider.one-d:active .handle{background:#6f6091;background-image:-webkit-gradient(linear, left top, left bottom, from(#6f6091), to(#8572af));background-image:-moz-linear-gradient(top, #6f6091, #8572af);}
|
|
.controls-container .slider.one-d .ghost-handle{-webkit-transition:opacity 0.25s ease-out;-moz-transition:opacity 0.25s ease-out;-ms-transition:opacity 0.25s ease-out;-o-transition:opacity 0.25s ease-out;transition:opacity 0.25s ease-out;opacity:0;pointer-events:none;}
|
|
.controls-container .slider.one-d:hover .ghost-handle{opacity:0.75;pointer-events:all;}
|
|
.controls-container .slider.one-d:active .ghost-handle{opacity:0;}
|
|
.controls-container .slider.two-d{position:relative;height:145px;background:#231c2c;cursor:pointer;border-radius:30px;}.controls-container .slider.two-d .slider-bg{position:relative;top:10px;height:125px;margin:0 10px;background:#15111c;border-radius:30px;overflow:hidden;}.controls-container .slider.two-d .slider-bg .slider-bg-pc{position:absolute;z-index:2;height:125px;border-radius:30px;background:#757ab2;}
|
|
.controls-container .slider.two-d .handle,.controls-container .slider.two-d .ghost-handle{position:absolute;z-index:5;top:63.5px;height:18px;width:18px;background:#9e95cb;background:#8572af;background-image:-webkit-gradient(linear, left top, left bottom, from(#8572af), to(#6f6091));background-image:-moz-linear-gradient(top, #8572af, #6f6091);-webkit-box-shadow:0 0 25px #000000;-moz-box-shadow:0 0 25px #000000;box-shadow:0 0 25px #000000;border-radius:30px;}
|
|
.controls-container .slider.two-d:active .handle{background:#6f6091;background-image:-webkit-gradient(linear, left top, left bottom, from(#6f6091), to(#8572af));background-image:-moz-linear-gradient(top, #6f6091, #8572af);}
|
|
.controls-container .slider.two-d .ghost-handle{-webkit-transition:opacity 0.25s ease-out;-moz-transition:opacity 0.25s ease-out;-ms-transition:opacity 0.25s ease-out;-o-transition:opacity 0.25s ease-out;transition:opacity 0.25s ease-out;opacity:0;pointer-events:none;}
|
|
.controls-container .slider.two-d:hover .ghost-handle{opacity:0.75;pointer-events:all;}
|
|
.controls-container .slider.two-d:active .ghost-handle{opacity:0;}
|
|
.controls-container #symmetry-controls{margin-top:15px;}
|
|
.controls-container #sym-num-rotations .ticks{position:absolute;height:100%;width:100%;pointer-events:none;z-index:1;}.controls-container #sym-num-rotations .ticks .tick{position:absolute;width:1px;height:100%;background:#333;background:transparent;background-image:-webkit-gradient(linear, left top, left bottom, from(transparent), to(#332940));background-image:-moz-linear-gradient(top, transparent, #332940);}.controls-container #sym-num-rotations .ticks .tick.one{left:16.666666666666668%;}
|
|
.controls-container #sym-num-rotations .ticks .tick.two{left:33.333333333333336%;}
|
|
.controls-container #sym-num-rotations .ticks .tick.three{left:50%;}
|
|
.controls-container #sym-num-rotations .ticks .tick.four{left:66.66666666666667%;}
|
|
.controls-container #sym-num-rotations .ticks .tick.five{left:83.33333333333333%;}
|
|
.controls-container #sym-num-rotations .ticks .tick.six{left:100%;}
|
|
body.silk-active #main-controls{pointer-events:none !important;}body.silk-active #main-controls .btn,body.silk-active #main-controls .row *,body.silk-active #main-controls .row,body.silk-active #main-controls .control,body.silk-active #main-controls .slider,body.silk-active #main-controls #colorpicker,body.silk-active #main-controls #colorpicker *{pointer-events:none !important;}
|
|
body.silk-active #appstore-badge,body.silk-active #announcement,body.silk-active #app-announcement,body.silk-active #app-announcement-hover,body.silk-active #badge{pointer-events:none !important;}
|
|
body.mouse-down-on-slider .toggle.control{pointer-events:none !important;}
|
|
body.mouse-over-previewable-controls #sparks,body.mouse-down-on-slider #sparks{pointer-events:none;}
|
|
#canvii-container{left:0;position:relative;}
|
|
#silk-1,#silk-2,#sparks{position:absolute;top:0;left:0;}
|
|
.silk-canvas{z-index:1;opacity:1;-webkit-transition:opacity 0.75s ease-out;-moz-transition:opacity 0.75s ease-out;-ms-transition:opacity 0.75s ease-out;-o-transition:opacity 0.75s ease-out;transition:opacity 0.75s ease-out;}.silk-canvas.onepacity{opacity:1;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}
|
|
.silk-canvas.active{z-index:2;pointer-events:all;}.silk-canvas.active.zeropacity{opacity:0;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}
|
|
#sparks{cursor:pointer;z-index:3;}
|
|
#tips{position:absolute;pointer-events:none;width:100%;z-index:3;color:#fff;top:50%;height:50px;line-height:50px;margin-top:-25px;}#tips .tip{color:#373547;color:#454259;color:#64607e;font-size:18px;text-shadow:0 0 5px #000;position:absolute;text-align:center;width:100%;opacity:0;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}#tips .tip a{color:#96bc7b;border-bottom:1px solid #5a5579;text-decoration:none;}#tips .tip a:hover{color:#bbe59c;border-bottom:1px solid #79749d;}
|
|
#tips .tip a:active{color:#a8d488;}
|
|
#tips .tip.showing{opacity:1;}#tips .tip.showing a{pointer-events:all;}
|