Created
September 10, 2023 05:30
-
-
Save Hri7566/5c77b5a72e1465bcbd095a0c8e3e76ad to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==UserScript== | |
// @name Old CSS | |
// @namespace Violentmonkey Scripts | |
// @match https://mppclone.com/* | |
// @grant none | |
// @version 1.0 | |
// @author - | |
// @description 9/10/2023, 1:18:45 AM | |
// ==/UserScript== | |
$(document.body).append(` | |
<style> | |
* { image-rendering: pixelated; } | |
* { 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, "DejaVu Sans", sans-serif; color: white; text-shadow: #444 1px 1px; } | |
body { position: absolute; } | |
body { | |
background: #3b5054; /* Old browsers */ | |
background: -moz-radial-gradient(center, ellipse cover, #ecfafd 0%, #c5d5d8 100%); /* FF3.6+ */ | |
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ecfafd), color-stop(100%,#c5d5d8)); /* Chrome,Safari4+ */ | |
background: -webkit-radial-gradient(center, ellipse cover, #ecfafd 0%,#c5d5d8 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-radial-gradient(center, ellipse cover, #ecfafd 0%,#c5d5d8 100%); /* Opera 12+ */ | |
background: -ms-radial-gradient(center, ellipse cover, #ecfafd 0%,#c5d5d8 100%); /* IE10+ */ | |
background: radial-gradient(ellipse at center, #ecfafd 0%,#c5d5d8 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecfafd', endColorstr='#c5d5d8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ | |
-webkit-transition: background 1000ms linear; | |
} | |
a { cursor: pointer; color: #f46; transition: color 0.25s; } | |
a:hover { color: #e05; transition: color 0.25s; } | |
.link { text-decoration: underline; cursor: pointer; color: #ffee00; } | |
table { border: 0; padding: 0; margin: 0; } | |
#names { position: fixed; top: 4px; left: 4px; font-size: 12px; width: 80%; } | |
#names .name { float: left; position: relative; padding: 4px; margin: 2px; | |
border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; | |
min-width: 50px; text-align: center; cursor: pointer; line-height: 15px; } | |
#names .name.me:after { content: "Me"; position: absolute; top: -4px; right: 50%; font-size: 10px; } | |
#names .name.owner:before { content: url('/crown.png'); position: absolute; top: -8px; left: 4px; } | |
#names .name.play { transform: translateY(-4px); -webkit-transform: translateY(-4px); } | |
#names .name.muted-notes { color: #f88; } | |
#names .name.muted-notes:after { content: "MUTE"; position: absolute; top: -4px; right: 50%; font-size: 8px; } | |
#names .name.muted-chat { color: #f88; } | |
#names .name.muted-chat:after { content: "MUTE"; position: absolute; top: -4px; right: 50%; font-size: 8px; } | |
#piano { 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%; } | |
.cursor { width: 16px; height: 24px; background: url('/cursor.png'); position: absolute; pointer-events: none; | |
margin-left: -2px; margin-top: -2px; left: 200%; top: 100%;} | |
.cursor .name { display: inline; position: relative; left: 16px; top: 8px; pointer-events: none; color: #fff; background: #000; | |
border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; white-space:nowrap; padding: 1px; font-size: 10px; } | |
.cursor.owner .name:after { content: url('/crown.png'); position: relative; top: -8px; left: 0px; } | |
.cursor .name { display: inline-block; } | |
/* .cursor .spotlight { display: none; position: relative; left: -14px; top: -9px; width: 32px; height: 32px; | |
border: 4px solid white; -webkit-border-radius: 100%; } */ | |
.cursor { transition: top 100ms, left 100ms; } | |
.participant-menu { display: none; position: fixed; background: black; width: 150px; font-size: 12px; padding: 0px; margin: 0px; | |
border-radius: 2px; } | |
.participant-menu:last-child .menu-item:hover { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } | |
.participant-menu .info { height: 40px; text-align: center; line-height: 40px; font-size: 9px; color: rgba(255,255,255,0.9); overflow: hidden; | |
opacity: 0; transition: opacity 0.2s ease-out; user-select: text; } | |
.participant-menu .info:hover { opacity: 1; transition: opacity 0.2s ease-out; } | |
.participant-menu .menu-item { cursor: pointer; margin: 0px; padding: 15px 5px; | |
border-top: 1px solid rgba(255,255,255,0.3); } | |
.participant-menu .menu-item:hover { background: rgba(255,255,255,0.4); } | |
.participant-menu .menu-item.clicked { background: rgba(255,255,255,0.5); } | |
#crown { position: absolute; width: 16px; height: 16px; background: url('/crown.png') no-repeat; cursor: pointer; | |
font-size: 10px; } | |
#crown span { margin-left: 16px; margin-top: 2px; } | |
#room-notice { position: fixed; top: 20%; width: 100%; text-align: center; opacity: 0.5; font-size: 20px; pointer-events: none; display: none; } | |
#room-notice p { margin: 1em; } | |
#bottom{ position: fixed; bottom: 0px; left: 0px; width: 100%; height: 60px; background: #9a9; margin-bottom: 3px; } | |
#room, #room * { cursor: pointer; } | |
#room { position: absolute; left: 0; top: 0; padding: 5px; width: 240px; height: 12px; background: #898; border: 1px solid #aba; cursor: pointer; | |
margin: 4px 24px; font-size: 12px; } | |
#room .info { white-space: nowrap; line-height: 12px; overflow: hidden; height: 20px; } | |
#room .info.lobby { color: #eeffbb; } | |
#room .info.not-visible { color: #0d3761; } | |
/* #room .info.crownsolo:after { content: url('/crownsolo.png'); position: relative; top: 2px; margin-left: 4px; } | |
#room .info.no-chat:after { content: url('/no-chat.png'); position: relative; top: 2px; margin-left: 4px; } */ | |
#room .info.banned { color: rgba(255, 64, 64, 0.5); } | |
#room .expand { width: 24px; height: 100%; position: absolute; right: 0; top: 0; background: #aba url('/arrow.png') no-repeat center 0%; } | |
#room .more { display: none; position: absolute; bottom: 100%; left: -1px; width: 100%; overflow: hidden; overflow-y: scroll; background: #898; | |
border: 1px solid #aba; max-height: 600px; } | |
#room .more > div { margin: 0; padding: 3px 6px 0px 6px; width: 100%; height: 20px; } | |
#room .more .info:hover { background: #aba; } | |
#room .more .new { background: #9a9; } | |
#room .more .new:hover { background: #cdc; } | |
.ugly-button { height: 12px; font-size: 12px; background: rgba(170, 187, 170, 0.35); border: 1px solid #898; padding: 5px; cursor: pointer; line-height: 12px; | |
border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; width: 100px; overflow: hidden; white-space:nowrap; } | |
.ugly-button:hover { background: rgba(187, 204, 170, 0.35) } | |
.ugly-button.stuck { background: rgba(204, 187, 170, 0.35); } | |
#new-room-btn { position: absolute; left: 300px; top: 4px; } | |
#play-alone-btn { position: absolute; left: 420px; top: 4px; } | |
#sound-btn { position: absolute; left: 540px; top: 4px; } | |
#room-settings-btn { position: absolute; left: 660px; top: 4px; display: none; } | |
#midi-btn { position: absolute; left: 300px; top: 32px; } | |
#record-btn { position: absolute; left: 420px; top: 32px; } | |
#synth-btn { position: absolute; left: 540px; top: 32px; } | |
#tooltip { position: absolute; pointer-events: none; background: #000; color: #fff; font-size: 10px; } | |
.knob { cursor: pointer; } | |
.switched-on { background: #ff8; } | |
#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: 20px; top: 0px; width: 100px; height: 40px; margin: 10px; } | |
#volume-slider { width: 100%; height: 100%; background: url("volume2.png") no-repeat; background-position: 50% 50%; | |
-webkit-appearance: none; } | |
#volume-label { position: absolute; right: 30px; bottom: 10px; font-size: 10px; color: #ccc; } | |
#banner { width: 468px; height: 60px; position: absolute; right: 0; top: 0; font-size: 18px; display: none; } | |
#banner a { color: #ffdd00; } | |
#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: #fea; border-color: #fea; padding: 10px; position: relative; left: 0; top: 0; | |
color: #444; font-size: 12px; text-shadow: #ccc 1px 1px; | |
border-radius: 6px; box-shadow: 2px 2px 5px rgba(0,0,0,0.25); } | |
.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: 0px; cursor: pointer; font-size: 20px; color: #f84; text-shadow: none; } | |
.notification .x:hover { font-weight: bold; } | |
.notification.classic .notification-body { width: 400px; background: #fea; border-color: #fea;} | |
.notification.short .title { display: none; } | |
.notification h1 { font-size: 14px; font-weight: bold; padding-top: 8px; padding-bottom: 8px; text-decoration: underline;} | |
.notification .connection { padding: 8px; margin: 8px; background: #fed; border: 1px solid #f84; cursor: pointer; font-family: monospace; } | |
.notification .connection.enabled { background: #dfd; } | |
.notification .connection:after { content: "OFF"; font-size: 10px; color: #a44; float: right; } | |
.notification .connection.enabled:after { content: "ON"; font-size: 10px; color: #4a4; float: right; } | |
.notification .connection:hover { font-weight: bold; } | |
.notification ul { list-style-type: upper-roman; } | |
.notification .pack { | |
margin: 1px; | |
padding: 4px; | |
background: none; | |
border: 1px solid #f84; | |
border-radius: 4px; | |
cursor: pointer; | |
font-family: monospace; | |
} | |
.notification .pack.enabled { background: #dfd; cursor: not-allowed; font-weight: bolder; } | |
.notification .pack:after { content: ""; font-size: 10px; color: #a44; float: right; } | |
.notification .pack.enabled:after { content: "Selected"; font-size: 10px; color: #4a4; float: right; } | |
.notification .pack:hover { font-weight: bold; } | |
#modal { width: 100%; height: 100%; position: fixed; left: 0; top: 0; display: none; } | |
#modal .bg { width: 100%; height: 100%; background: #48a; opacity: 0.5; 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: #cdc; width: 400px; height: 100px; position: fixed; left: 50%; top: 50%; | |
margin-left: -200px; margin-top: -50px; padding: 10px; border: 1px solid #9a9; 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: #fe4; border: none; padding: 7px 40px 20px 30px; font-size: 20px; color: #fff; | |
text-shadow: #444 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: #ff8; transition: all 0.25s; -webkit-transition: all 0.25s; -moz-transition: all 0.25s; | |
-o-transition: all 0.25s; } | |
#room-settings { height: 400px; margin-top: -200px; } | |
#chat { display: none; opacity: 1; } | |
#chat { position: fixed; bottom: 64px; left: 0; width: 100%; vertical-align: bottom; font-size: 13px; color: white; text-shadow: #888 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; background-attachment: local; } | |
#chat li { padding: 2px; opacity: 0; } | |
#chat li .name { font-weight: bold; margin-right: 10px; } | |
#chat li .message { margin-right: 6px; } | |
#chat li .quote { color: #789922; } | |
#chat input { margin: 4px; width: 99%; border: 1px solid #fff; background: none; text-shadow: #888 1px 1px; color: #fff; | |
border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } | |
#chat input::-webkit-input-placeholder { color: #ccc; } | |
#chat input:-moz-placeholder { color: #ccc; } | |
#chat input:focus { outline: none; border: 1px solid #ff8; } | |
#chat.chatting { background: rgba(64,80,80,0.75); border-radius: 5px; box-shadow: 1px 1px 5px #888; transition: all 0.1s; } | |
#chat.chatting li { display: list-item !important; opacity: 1 !important; text-shadow: #aaa 1px 1px; } | |
#chat.chatting ul { max-height: 50em; overflow-y: scroll; overflow-x: hidden; word-wrap: break-word; } | |
#social { position: fixed; top: 4px; right: 6px; width: 80px; font-size: 12px; } | |
#social #more-button { margin-top: 4px; width: 77px; height: 90px; border-radius: 5px; border: 1px solid #abb; cursor: pointer; | |
transition: all 0.25s; box-shadow: 1px 1px 8px #bb9; color: #788; text-shadow: none; | |
background: url('kitten1.png') 0px 4px no-repeat; background-color: #dee; } | |
#social #more-button:hover { color: #899; background-color: #e8f8f0; transition: background-color 0.25s; } | |
#social .fb-like { position: absolute; right: 0px; } | |
#social #inclinations { margin-top: 50px; margin-bottom: 20px; } | |
#more { display: none; width: 1250px; margin: 0 auto; padding: 0px; border-radius: 10px; font-size: 15px; border: 1px solid #b0c0c0; | |
color: #566; background: #bcc; box-shadow: 1px 1px 8px #899; 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: #d0e0e0; transition: background 0.25s; } | |
#more .items .item .content { height: 200px; padding: 10px; border-right: 1px solid #bcc; border-bottom: 1px solid #bcc; } | |
#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('envelope.png'); margin: 4px; } | |
#room-notice { z-index: 1; } | |
#cursors { z-index: 2; } | |
#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; } | |
#tooltip { z-index: 20000; } | |
.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);} | |
} | |
</style> | |
`) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment