306 lines
5.2 KiB
CSS
306 lines
5.2 KiB
CSS
@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 */ |