Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- * { margin: 0; }
- * { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
- html, body { width: 100%; height: 100%; overflow: hidden; font: 20pt verdana; color: hsla(117, 100%, 50%, 0.54); text-shadow: #444 1px 1px; }
- body { position: absolute; }
- body {
- background:hsl(254, 100%, 5%);
- }
- body {
- background:url('http://www.hd-wallpapersdownload.com/upload/bulk-upload/cool-phone-hd-wallpapers-for-free-3D.jpg') no-repeat center 0%; background-color: hsl(254, 100%, 5%); background-size: 100%;
- }
- #piano {opacity:0.7;-webkit-box-reflect: below -50px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(white)); width: 95%; height: 20%; margin: auto; position: relative; overflow: hidden; padding-left: 1%; }
- #piano .key { float: left; width: 1.8%; height: 90%; border: 1px solid black; background: #fff;
- margin-left: -0.5%; margin-bottom: 100%;
- box-shadow: 1px 2px 5px #000; -webkit-box-shadow: 1px 2px 5px #000; -moz-box-shadow: 1px 2px 5px #000;
- border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px;
- transition: background 4s ease-out; -webkit-transition: background 4s ease-out; -moz-transition: background 4s ease-out;
- -o-transition: background 4s ease-out; padding: 0px;
- overflow: hidden; }
- #piano .key.c, #piano .key.f { margin-left: 0; }
- #piano .key.sharp { width: 1.2%; height: 50%; background: #000; margin-left: -0.9%;
- position: relative; }
- #piano .key.loading { background: #888; }
- #piano .key.play { transform: translateY(1%); -webkit-transform: translateY(1%); -webkit-box-shadow: 0px 1px 2px #000; }
- .ease-out { transition: left 0.1s ease-out; -webkit-transition: left 0.1s ease-out; -moz-transition: left 0.1s ease-out;
- -o-transition: left 0.1s ease-out; }
- .ease-in { transition: left 0.1s ease-in; -webkit-transition: left 0.1s ease-in; -moz-transition: left 0.1s ease-in;
- -o-transition: left 0.1s ease-in; }
- .slide-left { left: -100%; }
- .slide-right { left: 100%; }
- #crown { position: absolute; width: 16px; height: 16px; background: url('http://www.multiplayerpiano.com/crown.png') no-repeat; cursor: pointer;
- font-size: 10px; }
- #crown span { margin-left: 16px; margin-top: 2px; }
- #crownsolo-notice { position: fixed; top: 20%; width: 100%; text-align: center; opacity: 0.5; font-size: 20px; pointer-events: none; display: none; }
- #bottom{ position: fixed; bottom: 0px; left: 0px; width: 100%; height: 60px; background:hsla(560, 70%, 16%, 0); margin-bottom: 3px; }
- #names .name { float: left; position: relative; padding: 7px; margin: 7px; background-image: url("http://country.bolon.com/wp-content/uploads/2014/01/Graphic_TextureBlack.jpg"); }
- #room, #room * { cursor: pointer; }
- #room {position: absolute;
- left: 0;
- top: 0;
- padding: 5px;
- width: 240px;
- height: 12px;
- background: hsla(0, 0%, 0%, 0.1);
- border: 2px solid rgba(170, 187, 170, 0);
- cursor: pointer;
- margin: 9px 24px;
- box-shadow: 0 0 5px hsl(200,0%,-2%);
- font-size: 12px; }
- #room .info { white-space: nowrap; line-height: 12px; overflow: hidden; height: 20px; }
- #room .info.lobby { color: hsla(272, 95%, 50%, 0.75) }
- #room .info.not-visible { color: #c20000; }
- #room .info.crownsolo:after { content: url('http://www.multiplayerpiano.com/crownsolo.png'); position: relative; top: 2px; margin-left: 4px; }
- #room .info.no-chat:after { content: url('http://www.multiplayerpiano.com/no-chat.png'); position: relative; top: 2px; margin-left: 4px; }
- #room .expand {width: 24px;
- height: 100%;
- position: absolute;
- right: 0;
- top: 0;
- background: hsla(254, 100%, 16%, 1) url('http://www.multiplayerpiano.com/arrow.png') no-repeat center 0%;
- /* box-shadow: 0 0 5px hsl(200,0%,-2%); */ }
- #room .more {
- display: none;
- position: absolute;
- bottom: 100%;
- left: -1px;
- width: 100%;
- overflow: hidden;
- overflow-y: scroll;
- background:hsla(0, 0%, 0%, 0.1);
- border: 2px solid hsl(200,0%,0%); }
- /*edit some time*/
- #room .more > div { margin: 0; padding: 3px 6px 0px 6px; width: 100%; height: 20px; }
- #room .more .info:hover { background: hsla(0, 0%, 0%, 1); }
- #room .more .new { background: hsla(0, 0%, 0%, 0.1); }
- #room .more .new:hover { background: hsla(0, 0%, 0%, 0.1); }
- .ugly-button { height: 12px;
- margin-top: 5px;
- font-size: 12px;
- background: hsla(0, 0%, 0%, 0.1);
- margin-left: 3px;
- border: 4px solid hsla(0, 0%, 0%, 0.1);
- padding: 4px;
- cursor: pointer;
- line-height: 12px;
- width: 100px;
- border-radius: 0;
- overflow: hidden;
- box-shadow: 0 0 5px hsl(0,0%,-14%);
- white-space: nowrap; }
- .ugly-button:hover { background: hsla(284, 100%, 25%, 0.8);}
- .ugly-button.stuck { background: hsla(284, 100%, 25%, 0.8); }
- #new-room-btn { position: absolute; left: 300px; top: 9px; }
- #midi-btn { position: absolute; left: 420px; top: 9px; }
- #play-alone-btn { position: absolute; left: 540px; top: 9px; }
- #room-settings-btn { position: absolute;
- left: 660px;
- top: 9px;
- display: none;}
- #status { position: absolute; left: 0px; bottom: 10px; width: 320px; height: 20px; padding: 5px; font-size: 20px; font-weight: 800;
- line-height: 20px; pointer-events: none; }
- #status .number { font-size: 35px; }
- #volume{ position: absolute;
- right: 118px;
- top: -4px;
- width: 100px;
- height: 900px;
- margin: 10px;}
- .volume-slider { width: 100%; height: 100%;}
- /*
- * umbrUI range slider by @simurai
- */
- /* -------------- Range Slider -------------- */
- input[type="range"] {
- -webkit-appearance: none; /* Remove Safari default */
- outline: none;
- width: 210px;
- height: 5px;
- border-radius: 1px;
- position: relative;
- background-image: -webkit-gradient( linear, left top, right top,
- color-stop( 0, hsla(254, 100%, 25%, 0.8) ),
- color-stop( .08, hsla(254, 100%, 13%, 0.8) ),
- color-stop( .5, hsl(200,80%,0%) ),
- color-stop( .92, hsl(200,80%,15%) ),
- color-stop( 1, hsl(200,80%,45%) )
- );
- -webkit-background-clip: padding-box;
- border: 0;
- border-bottom: 2px solid rgba(0,0,0,0.1);
- cursor: ew-resize;
- }
- input[type="range"]::-webkit-slider-thumb {
- -webkit-appearance: none; /* Remove Safari default */
- position: relative;
- z-index: 1;
- width: 26px;
- height: 40px;
- border-radius: 3px / 6px ;
- background-image: -webkit-gradient( linear, left top, right top,
- color-stop( 0, hsl(0,0%,0%) ),
- color-stop( .16, hsl(0,0%,0%) ),
- color-stop( .18, hsl(0,0%,0%) ),
- color-stop( .2, hsl(0,0%,0%) ),
- color-stop( .42, hsl(0,0%,0%)) ),
- color-stop( .44, hsl(241,0%,15%) ),
- color-stop( .46, hsl(241,100%,50%) ),
- color-stop( .54, hsl(241,100%,50%) ),
- color-stop( .56, hsl(241,0%,15%) ),
- color-stop( .58, hsla(241, 60%, 30%, 1) ),
- color-stop( .8, hsl(0,0%,0%) ),
- color-stop( .82, hsl(0,0%,0%) ),
- color-stop( .84, hsl(0,0%,0%) ),
- color-stop( 1, hsl(0,0%,0%) )
- );
- -webkit-box-shadow:
- inset hsla(0,0%,100%,.15) 0 1px 0px,
- hsl(0,0%,17%) 0 2px 0px,
- hsl(0,0%,15%) 0 4px 0px,
- hsl(0,0%,13%) 0 6px 0px,
- rgba(0,0,0,.5) 0 8px 5px;
- -webkit-transform: translateY(-3px);
- -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,
- from(transparent), color-stop(0.6, transparent), to( rgba(255,255,255,0.15) ));
- }
- input[type="range"]:hover {
- background-image: -webkit-gradient( linear, left top, right top,
- color-stop( 0, hsla(284, 100%, 25%, 0.8) ),
- color-stop( .08, hsla(284, 100%, 13%, 0.8) ),
- color-stop( .5, hsl(200,80%,0%) ),
- color-stop( .92, hsl(200,80%,15%) ),
- color-stop( 1, hsl(200,80%,45%) )
- );
- -webkit-box-shadow: inset #000 1px 1px 1px, inset #000 -1px -1px 1px;
- }
- #volume-label { position: absolute;
- right: 105px;
- top: 40px;
- font-size: 10px;
- color:hsla(360, 100%, 100%, 1);
- text-shadow: 0 2px hsl(200,100%,11%); }
- #banner { width: 468px; height: 60px; position: absolute; right: 0; top: 0; }
- #quota { width: 100%; height: 3px; position: fixed; bottom: 0; left: 0; background: #f80; }
- #quota .value { width: 100%; height: 100%; display: block; background: #fd0; }
- .relative { position: relative; width: 100%; height: 100%; }
- .notification { position: absolute; }
- .notification-body { background: hsla(254, 100%, 20%, 1); border-color: hsla(254, 100%, 30%, 1); width: 400px; padding: 10px; position: relative; left: 0; top: 0;
- color: #444; font-size: 12px; text-shadow: #ccc 1px 1px;
- border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; }
- .notification-body:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -3px; border-top: 10px solid transparent;
- border-top-color: inherit; border-left: 6px solid transparent; border-right: 6px solid transparent; }
- .title { border-bottom: 1px solid #f84; font-size: 16px; font-weight: bold; padding-bottom: 5px; margin-bottom: 8px; }
- .notification .x { position: absolute; right: 4px; top: 0; cursor: pointer; font-size: 16px; color: #f84; text-shadow: none; }
- #modal { width: 100%; height: 100%; position: fixed; left: 0; top: 0; display: none; }
- #modal .bg { width: 100%; height: 100%; background: #48a; opacity: 0; position: absolute; left: 0; top: 0; }
- #modal, #modal * { user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; }
- .dialog { background: hsla(254, 100%, 18%, 1) ; width: 400px; height: 100px; position: fixed; left: 50%; top: 50%;
- margin-left: -200px; margin-top: -50px; padding: 10px; border: 1px solid #000; overflow: hidden;
- border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
- box-shadow: 0px 0px 8px #000; -webkit-box-shadow: 0px 0px 8px #000; -moz-box-shadow: 0px 0px 8px #000; }
- .dialog p { margin: 10px; font-size: 20px; }
- .dialog input.text { font-size: 20px; height: 20px; width: 75%; }
- .dialog input.checkbox { margin: 0 5px; }
- .dialog .submit { background: hsla(254, 100%, 30%, 1); border: none; padding: 7px 40px 20px 30px; font-size: 20px; color: #fff;
- text-shadow: #000 2px 2px 2px;
- border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
- box-shadow: inset 0px 0px 4px #000; -webkit-box-shadow: inset 0px 0px 4px #000; -moz-box-shadow: inset 0px 0px 4px #000;
- transition: all 0.25s; -webkit-transition: all 0.25s; -moz-transition: all 0.25s; -o-transition: all 0.25s;
- position: absolute; bottom: -10px; right: -10px; }
- .dialog .submit:hover { background: hsla(254, 100%, 40%, 1); transition: all 0.25s; -webkit-transition: all 0.25s; -moz-transition: all 0.25s;
- -o-transition: all 0.25s; }
- .dialog .close { background: hsla(254, 100%, 30%, 1); border: none; padding: 7px 40px 20px 30px; font-size: 20px; color: #fff;
- text-shadow: #000 2px 2px 2px;
- border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
- box-shadow: inset 0px 0px 4px #000; -webkit-box-shadow: inset 0px 0px 4px #000; -moz-box-shadow: inset 0px 0px 4px #000;
- transition: all 0.25s; -webkit-transition: all 0.25s; -moz-transition: all 0.25s; -o-transition: all 0.25s;
- position: absolute; bottom: -10px; right: -10px; }
- .dialog .close:hover { background: hsla(254, 100%, 40%, 1); transition: all 0.25s; -webkit-transition: all 0.25s; -moz-transition: all 0.25s;
- -o-transition: all 0.25s; }
- #room-settings { height: 200px; margin-top: -100px; }
- #chat { display: none; }
- #chat { position: fixed; bottom: 64px; left: 0; width: 100%; vertical-align: bottom; font-size: 13px; color: white; text-shadow: #4d4d4d 1px 1px; }
- #chat, #chat * { user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; }
- #chat ul { list-style: none; margin: 4px; padding: 0; }
- #chat li { padding: 2px; opacity: 0; }
- #chat li .name { font-weight: bold; margin-right: 10px; }
- #chat li .message { margin-right: 6px; text-shadow: #626262 1px 1px; }
- #chat li .quote { color: #000; }
- #chat input { margin: 4px; width: 99%; border: 1px solid #000; background: none; text-shadow: #000 1px 1px; color: #ff8;
- border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
- #chat input::-webkit-input-placeholder { color: #fff; }
- #chat input:-moz-placeholder { color: #fff; }
- #chat input:focus { outline: none; border: 1px solid #000; }
- #chat.chatting { background: hsla(254, 100%, 14%, 0.44); border-radius: 2px; box-shadow: 1px 1px 5px #000; transition: all 0.1s; }
- #chat.chatting li { display: list-item !important; opacity: 1 !important; text-shadow: #4d4d4d 1px 1px; }
- #chat.chatting ul { max-height: 50em; overflow-y: scroll; overflow-x: hidden; word-wrap: break-word; }
- #midi-connections .half h2 { margin: 5px; }
- #midi-connections .half { width: 50%; float: left; text-align: center; }
- #midi-connections .half select { width: 80%; height: 20px; margin: 2px; }
- #midi-connections .half button.remove { width: 10%; height: 20px; margin: 2px; padding: 0; }
- #midi-connections .half button.add { width: 50%; height: 20px; margin: 2px; }
- #social { display: none; position: fixed; top: 4px; right: 6px; width: 80px; font-size: 12px; }
- #social #more-button {
- margin-top: 4px;
- width: 77px;
- height: 80px;
- border-radius: 5px;
- border: 1px solid #000;
- cursor: pointer;
- transition: all 0.25s;
- box-shadow: 1px 1px 8px #bb9;
- color: #788;
- text-shadow: none;
- background: url('http://image.blingee.com.s3.amazonaws.com/images19/content/output/000/000/000/79b/776635969_1561913.gif?4') 0px 0px no-repeat;
- background-color: #444; }
- #social #more-button:hover { color: #899; background-color: #e8f8f0; transition: background-color 0.25s; }
- #more { display: none; width: 1250px; margin: 0 auto; padding: 0px; border-radius: 10px; font: 15px sans-serif; border: 1px solid #fff;
- color: #696969; background: #292929; box-shadow: 1px 1px 8px #fff; position: fixed; top: 50px; right: 50px; text-shadow: none; }
- #more div { margin: 0px; padding: 0px; }
- #more .items { margin-left: 1%; }
- #more .items .item { width: 33%; float: left; background: #cdd; transition: background 0.25s; }
- /*#more .items .item:hover { background: #696969; transition: background 0.25s; } */
- #more .items .item .content { height: 200px; padding: 10px; border-right: 1px solid #000; border-bottom: 1px solid #000; }
- #more .items .item .content p { margin-top: 1em; margin-bottom: 1em; }
- #more .header { padding: 5px 10px; }
- #more .footer { clear: both; padding: 5px 10px; font-size: 12px; }
- #email:before { content: url('http://www.multiplayerpiano.com/envelope.png'); margin: 4px; }
- #crownsolo-notice { z-index: 0; }
- #cursors { z-index: 1; }
- #chat { z-index: 100; }
- #social { z-index: 200; }
- #names { z-index: 300; }
- #piano { z-index: 400; }
- #piano .key { z-index: 401; }
- #piano .key.sharp { z-index: 402; }
- #bottom { z-index: 500; }
- #crown { z-index: 600; }
- .notification { z-index: 700; }
- #cursors .cursor { z-index: 800; }
- #chat.chatting { z-index: 900; }
- .participant-menu { z-index: 1000; }
- #modal { z-index: 10000; }
- #1-btn {display:none;}
- #banner{display:none;}
- .clear { clear: both; }
- .spin { animation: spin 1s linear infinite; -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite;
- -o-animation: spin 1s linear infinite; -ms-animation: spin 1s linear infinite; }
- @-webkit-keyframes spin {
- 0% { -webkit-transform: rotate(0deg);}
- 100% { -webkit-transform: rotate(360deg);}
- }
- @-moz-keyframes spin {
- 0% { -moz-transform: rotate(0deg);}
- 100% { -moz-transform: rotate(360deg);}
- }
- @-o-keyframes spin {
- 0% { -o-transform: rotate(0deg);}
- 100% { -o-transform: rotate(360deg);}
- }
- @-ms-keyframes spin {
- 0% { -ms-transform: rotate(0deg);}
- 100% { -ms-transform: rotate(360deg);}
- }
- input[type=color] { }
- /* Let's get this party started */
- ::-webkit-scrollbar {
- width: 12px;
- }
- /* Track */
- ::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
- -webkit-border-radius: 10px;
- border-radius: 10px;
- }
- /* Handle */
- ::-webkit-scrollbar-thumb {
- -webkit-border-radius: 10px;
- border-radius: 10px;
- background: hsl(200,0%,15%);
- -webkit-box-shadow: inset 0 0 6px hsl(200,0%,45%);
- }
- ::-webkit-scrollbar-thumb:window-inactive {
- background: hsl(200,0%,5%);
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement