@import url('https://use.fontawesome.com/releases/v6.5.1/css/all.css'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap'); * { font-family: 'Roboto Condensed', sans-serif; margin: 0; padding: 0; font-size: 1rem; } #app { font-family: 'Roboto Condensed', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: white; background-color: transparent; } .chat-window { position: absolute; top: 2.5%; left: 40px; width: 38%; height: 530px; max-width: 400px; background-color: rgba(255, 255, 255, 0); -webkit-animation-duration: 2s; } .chat-messages { max-height: 140%; font-size: 1.4rem; overflow-x: hidden; overflow-y: hidden; display: block; } .chat-input { font-size: 1.65vh; position: absolute; top: 33.8%; left: 40px; width: 38%; max-width: 400px; box-sizing: border-box; } .prefix { position: absolute; margin-top: 4.2%; margin-left: 2%; left: 0.208%; color: #ffffff; } input { font-size: 1.7vh; display: block; box-sizing: border-box; padding-top: 1.6%; padding-left: 10%; padding-bottom: 1.4%; padding-right: 1.6%; color: rgb(255, 255, 255); background-color: #000000c9; width: 100%; border: none; height: 50px !important; overflow: hidden; text-overflow: ellipsis; resize: none; border-radius: 10px; box-shadow: 0px 0px 10px -5px rgba(0, 0, 0, 1); } input:focus { outline: none; } .msg { margin-bottom: 5px; } .suggestions { margin-top: 5px; list-style-type: none; padding: 5px; padding-left: 27px; font-size: 0.9rem; box-sizing: border-box; color: white; background-color: #010b13c9; width: 100%; border-radius: 10px; border: none; box-shadow: 0px 0px 10px -5px rgba(0, 0, 0, 1); } .help { margin-top: -10px; color: #b0bbbd; } .suggestion { margin-bottom: 0.5px; } .chat-message { display: block !important; padding: 0.6vw; padding-top: 0.6vw; padding-bottom: 0.7vw; /* border-radius: 15px; */ width: 100%; overflow: hidden; word-break: break-word; box-sizing: border-box; background-color: black; border-left: 7px solid #dc143c; box-shadow: 0px 0px 10px -5px rgba(0, 0, 0, 1); } .chat-messagedefault { display: block !important; padding: 0.6vw; padding-top: 0.6vw; padding-bottom: 0.7vw; /* border-radius: 15px; */ width: 100%; overflow: hidden; word-break: break-word; box-sizing: border-box; background-color: black; border-left: 7px solid #53bddd; box-shadow: 0px 0px 10px -5px rgba(0, 0, 0, 1); } /* START STAFF */ .staff { background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(19, 138, 70, 0.9) 100%); } .fa-shield-alt { color: rgba(42, 42, 42, 0.9); background-color: #1ebc62; padding: 5px; border-radius: 5px; } /* END STAFF */ /* START ONLY STAFF */ .staffonly { background: rgba(42, 42, 42, 0.9); } .fa-eye-slash { color: rgba(42, 42, 42, 0.9); background-color: #1ebc62; padding: 5px; border-radius: 5px; } /* END ONLY STAFF */ /* START TWITCH */ .twitch { background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(96, 67, 139, 0.9) 100%); } .fa-twitch { color: rgba(42, 42, 42, 0.9); background-color: #9c70de; padding: 5px; border-radius: 5px; } /* END TWITCH */ /* START YOUTUBE */ .youtube { background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(101, 0, 0, 0.9) 100%); } .fa-youtube { color: rgba(42, 42, 42, 0.9); background-color: #ff0000; padding: 5px; border-radius: 5px; } /* END YOUTUBE */ /* START TWITTER */ .twitter { background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(25, 107, 143, 0.9) 100%); } .fa-twitter { color: rgba(42, 42, 42, 0.9); background-color: #2aa9e0; padding: 5px; border-radius: 5px; } /* END TWITTER */ /* START SYSTEM */ .system { background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(134, 84, 23, 0.9) 100%); } .fa-cog { color: rgba(42, 42, 42, 0.9); background-color: #df7b00; padding: 5px; border-radius: 5px; } /* END SYSTEM */ /* START DEFAULT */ .defaultmessage { background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(23, 126, 134, 0.902) 100%); } .fa-message { color: rgba(255, 255, 255, 1); background-color: #5ad8ffad; padding: 5px; border-radius: 5px; } /* END DEFAULT */ /* START ADVERTISEMENT */ .advertisement { background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(84, 150, 38, 0.9) 100%); } .fa-ad { color: rgba(42, 42, 42, 0.9); background-color: #81db44; padding: 5px; border-radius: 5px; } /* END ADVERTISEMENT */ /* START POLICE */ .police { background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(40, 55, 116, 0.9) 100%); } .fa-bullhorn { color: rgba(42, 42, 42, 0.9); background-color: #4a6cfd; padding: 5px; border-radius: 5px; } /* END POLICE */ /* START AMBULANCE */ .ambulance { background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(152, 113, 22, 0.9) 100%); } .fa-ambulance { color: rgba(42, 42, 42, 0.9); background-color: #e3a71b; padding: 5px; border-radius: 5px; } /* END AMBULANCE */ /* START OOC */ /* .ooc { background: linear-gradient(90deg, #2a2a2a8e 0%, #0088e2e6 100%); } */ .ooc { background: black; } .fa-door-open { color: #2a2a2ae6; background-color: #7d7d7d; padding: 5px; border-radius: 5px; } /* END OOC */