Max/Main
1
0
Fork 0
Code Pull requests Activity
Main/resources/[standalone]/okokChatV2/web/styles.css
root d84b6e12fd first Commit
2025-06-07 08:51:21 +02:00

410 lines
No EOL
7.7 KiB
CSS
Raw Blame History

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
@import url('https://use.fontawesome.com/releases/v5.15.4/css/all.css');
* {
font-family: 'Tajawal', sans-serif;
}
.chat-window {
position: absolute;
top: 2.5%;
left: 2.055%;
width: 38%;
height: 33.3% !important;
max-width: 27.5%;
background-color: rgba(0, 0, 0, 0.0) !important;
}
.msg {
font-family: 'Tajawal', sans-serif;
color: #fff;
font-size: calc(1.8vh);
filter: url(#svgDropShadowFilter);
line-height: calc(2.7vh * 1.2);
margin-bottom: 0.9%;
}
.chat-messages {
margin: 0;
height: 100%;
}
.chat-message {
display: block !important;
padding: 0.6vw;
padding-top: 0.6vw;
padding-bottom: 0.7vw;
border-radius: 0.625rem;
width: 75.6%;
overflow: hidden;
word-break: break-word;
box-sizing: border-box;
box-shadow: 0rem 0rem 0.625rem -0.3125rem rgba(0, 0, 0, 1);
line-height: 1;
}
.chat-message div {
line-height: 1 !important;
}
.message {
margin-top: 0.9%;
font-weight: 300;
}
.time {
font-size: 0.875rem;
font-size: calc(1.3vh);
color: #e1e1e1;
}
.msg > span > span > b {
font-family: 'Tajawal', sans-serif;
font-weight: normal;
vertical-align: baseline;
padding-right: 0.6875rem;
line-height: 1;
font-size: calc(2.7vh);
}
.msg > span > span > span {
vertical-align: baseline;
}
.msg i:first-of-type {
font-style: normal;
color: #fff;
}
.chat-input {
font-size: 1.65vh;
position: absolute;
top: 37%;
left: 2.055%;
width: 38%;
max-width: 20.8%;
box-sizing: border-box;
}
.chat-input > div.input {
background-color: rgba(27, 29, 32, 0.95);
border-radius: 0.625rem;
}
.chat-input .prefix {
height: 100%;
vertical-align: middle;
padding-left: 0.5vh;
text-transform: uppercase;
font-weight: bold;
display: inline-block;
}
.input {
align-items: center;
}
.prefix {
line-height: 3.80vh !important;
}
.suggestions {
margin-top: 0.9%;
list-style-type: none;
padding: 0.9%;
padding-left: 6.54%;
font-size: calc(1.7vh);
box-sizing: border-box;
color: white;
background-color: rgba(31, 94, 255, 0.9);
width: 100%;
border-radius: 0.625rem;
border: none;
box-shadow: 0rem 0rem 0.625rem -0.3125rem rgba(0, 0, 0, 1);
}
.suggestion {
font-size: calc(1.8vh);
margin-bottom: 0.03125rem;
}
textarea {
resize: none;
font-size: calc(2vh);
color: #fff;
line-height: 1.85vh !important;
padding-top: 3%;
}
.multiline {
margin-left: 0;
text-indent: 0;
}
.fas {
vertical-align: middle;
}
/* 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: 0.3125rem;
border-radius: 0.3125rem;
}
/* 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: 0.3125rem;
border-radius: 0.3125rem;
}
/* END ONLY STAFF */
/* START SERVER ANNOUNCEMENT */
.server-msg {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(204, 61, 61, 0.9) 100%);
}
.fa-exclamation-circle {
color: rgba(42, 42, 42, 0.9);
background-color: #cc3d3d;
padding: 0.3125rem;
border-radius: 0.3125rem;
}
/* END SERVER ANNOUNCEMENT */
/* 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: 0.3125rem;
border-radius: 0.3125rem;
}
/* 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: 0.3125rem;
border-radius: 0.3125rem;
}
/* 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: 0.3125rem;
border-radius: 0.3125rem;
}
/* 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: 0.3125rem;
border-radius: 0.3125rem;
}
/* END SYSTEM */
/* 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: 0.3125rem;
border-radius: 0.3125rem;
}
/* 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: 0.3125rem;
border-radius: 0.3125rem;
}
/* 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: 0.3125rem;
border-radius: 0.3125rem;
}
/* END AMBULANCE */
/* START OOC */
.ooc {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(125, 125, 125, 0.9) 100%);
}
.fa-door-open {
color: rgba(42, 42, 42, 0.9);
background-color: #ababab;
padding: 0.3125rem;
border-radius: 0.3125rem;
}
/* END OOC */
/* START ME */
.me {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(121, 184, 250, 0.9) 100%);
}
.me-icon {
background-color: #79b8fa;
}
/* END ME */
/* START DO */
.do {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(121, 250, 164, 0.9) 100%);
}
.do-icon {
background-color: #79faa4;
}
/* END DO */
/* START TRY */
.try {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(243, 73, 113, 0.9) 100%);
}
.try-icon {
background-color: #f34971;
}
/* END TRY */
/* START ANONYMOUS */
.anonymous {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(9, 78, 33, 0.9) 100%);
}
.fa-mask {
color: rgba(42, 42, 42, 0.9);
background-color: #2e874d;
padding: 0.3125rem;
border-radius: 0.3125rem;
}
/* END ANONYMOUS */
/* START JOBS */
.jobchat {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(53, 219, 194, 0.9) 100%);
}
.fa-briefcase {
color: rgba(42, 42, 42, 0.9);
background-color: #35dbc2;
padding: 0.3125rem;
border-radius: 0.3125rem;
}
/* END JOBS */
/* START TIMEOUT */
.muted {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(223, 123, 0, 0.9) 100%);
}
.fa-gavel {
color: rgba(42, 42, 42, 0.9);
background-color: #df7b00;
padding: 0.3125rem;
border-radius: 0.3125rem;
}
/* END TIMEOUT */
/* START PM */
.pm {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(113, 81, 156, 0.9) 100%);
}
.fa-comment {
color: rgba(42, 42, 42, 0.9);
padding: 0.3125rem;
border-radius: 0.3125rem;
}
.pm-icon {
background-color: #71519c;
}
/* END PM */
View git blame Copy permalink