User:Dorumin/chat.css

/* Gib Cheese an avatar */ .User[data-user="Cheeseskates"] img, li[data-user="Cheeseskates"] .avatar, content: url(https://i.imgur.com/hRCuGh0.png); }
 * 1) UserStatsMenu img[src^="https://static.wikia.nocookie.net/e03ca33f-54dc-4a5d-9c6e-e1ee004c560f/scale-to-width-down/"] { /* This last selector practically renders the rest useless but whatever */

body { background: url(https://cdn.discordapp.com/attachments/238354899291734017/491445114770554881/Steven-Universe-D184D18DD0BDD0B4D0BED0BCD18B-SU-art-Opal-28SU29-3937758.png) center top / cover no-repeat fixed; overflow: hidden } body.wiki-wikia .wordmark img { filter: contrast(0); padding-left: 0; left: -1px; }

.ChatHeader, .Chat, .Write { background: rgba(45,7,40,0.8); color: #dcddde }

margin: 0px; border-radius: 0; border: none }
 * 1) ChatHeader {

width: 270px; }
 * 1) ChatHeader .chat-toolbar {

content: '@'; font-size: 13px; margin: 0 3px 0 5px; color: #8a8e94; position: relative; top: -1px }
 * 1) ChatHeader .private:before {

.ChatHeader .User { border: none; padding-top: 6px }

.ChatHeader .User:before { background-color: rgba(246,246,247,.1) }

.ChatHeader .User:before { content: ""; height: 85%; left: -1px; position: absolute; top: 50%; width: 1px; transform: translateY(-50%) }

.ChatHeader .User .username { margin-left: 2px }

.User .badge { display: none }

.ChatHeader .User img { border-radius: 100%; border: none }

.ChatHeader .User.away, .WikiChatList .User.away { color: #dcddde }

.ChatHeader .User .details:before { content: ""; height: 8px; width: 8px; position: absolute; left: 13%; top: 60%; background: #4eb57b; border-radius: 100%; border: 1px solid #2f3136 }

.ChatHeader .User.away .details:before { background: #f7a800 }

.ChatHeader .User.away .details, .WikiChatList .User.away .details { color: transparent }

.WikiChatList .User .details:before { content: ""; height: 8px; width: 8px; position: absolute; left: 15%; top: 60%; background: #4eb57b; border-radius: 100%; border: 1px solid #2f3136 }

.WikiChatList .User.away .details:before { background: #f7a800 }

.WikiChatList { padding: 0; }

.WikiChatList li, .PrivateChatList li { margin-bottom: 3px }

.PrivateChatList { padding: 0 3px; }

left: 0; right: 0; top: 40px; background-color: transparent; box-shadow: 0 -1px 20px -10px black; border: none; border-radius: 0; bottom: 0; overflow: hidden; margin-bottom: 0 !important }
 * 1) WikiaPage {

.Chat { border: none; bottom: 64px }

.Chat .you { background: transparent }

.Chat .avatar { border: none; border-radius: 100% }

.Chat li { display: flex; flex-direction: row-reverse; flex-wrap: wrap }

.Chat .message { width: 100% }

.Chat .username::after { content: '' }

.Chat li:not(.continued) .time::before, .Chat li:not(.continued) .custom-time::before { content: 'Today at '; }

.Chat .continued:hover .time:after { left: -8px; position: absolute; top: 6px; border-right: 5px solid #411130 !important; border: 3px solid transparent; content: " "; height: 0; pointer-events: none; width: 0; }

.Chat .time, .Chat .custom-time { padding-left: 5px; margin-right: auto; top: 1px; position: relative; font-size: 10.5px; }

.Chat .inline-alert { display: block }

.Write img { display: none }

.Write.blocked .message { opacity: 0.5; } .Write .message { background: rgba(114,118,125,.3); border: none; border-radius: 5px; height: 80%; top: 50%; transform: translateY(-50%) translateX(-50%); left: 50% }

.Write [name="message"] { color: hsla(0,0%,100%,0.7); top: 50%; position: relative; transform: translateY(-25%); padding-left: 10px }

.Write { left: 0; padding: 1px 6px 15px; height: 48px }

.Write.blocked { opacity: 1; }

.Chat::-webkit-scrollbar { width: 8px }

.Chat::-webkit-scrollbar-thumb { border: 3px solid transparent; background-color: #5a0b44; border-radius: 5px }

.Chat::-webkit-scrollbar-track-piece { border: 3px solid transparent; background-color: transparent; background-clip: padding-box; border-radius: 5px }

background: #2f3136; color: #dcddde }
 * 1) Rail {

.Rail .User:hover { background: rgba(117,0,68,0.3); border-radius: 3px }

.Rail .User img { border-radius: 100%; border: none }

.Rail .selected { background: rgba(117,0,68,0.3); box-shadow: none; border-radius: 3px }

.Rail .private { background: #202225; border: none; text-align: center; padding: 4px }

.Rail .splotch { border: none; padding: 0px 2px 2px; top: 0; border-radius: 3px; }

.Rail .public { padding: 0px 0 4px 13px }

.Rail .public:before { content: "#main"; color: white; font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif; left: 10px; display: none }

border: none; border-radius: 5px; overflow: hidden; width: 200px; box-shadow: 0 2px 10px 0 rgba(0,0,0,.2), 0 0 0 1px rgba(32,34,37,.6) }
 * 1) UserStatsMenu {

background: #350a27; color: #ccc; padding-bottom: 10px }
 * 1) UserStatsMenu .info {

display: block; float: none; height: 100px; width: 100px; margin: 10px auto; border-radius: 50%; border: none }
 * 1) UserStatsMenu .info img {

margin: 0 20px; text-align: center }
 * 1) UserStatsMenu .info > ul {

overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
 * 1) UserStatsMenu .info > ul > li {

.UserStatsMenu .info .username { color: #fff }

.UserStatsMenu .info { color: #b9bbbe }

margin: 0 }
 * 1) UserStatsMenu .regular-actions,#UserStatsMenu .admin-actions {

background-color: #5a1741; color: hsla(0,0%,100%,.8) }
 * 1) UserStatsMenu .actions {

padding: 7px 10px; cursor: pointer; height: 35px; box-sizing: border-box }
 * 1) UserStatsMenu .actions li {

.UserStatsMenu .actions li:hover { background-color: rgba(110,31,80,0.7) !important }

.Rail::-webkit-scrollbar { height: 8px; width: 10px }

.Rail::-webkit-scrollbar-corner { background-color: transparent }

.Rail::-webkit-scrollbar-thumb { background-color: rgba(90,23,65,0.6); border: 2px solid transparent; border-radius: 4px; cursor: move; border-color: transparent }

.Rail::-webkit-scrollbar-track { background-color: transparent; border: 2px solid transparent }

.Rail:hover::-webkit-scrollbar-thumb, .Rail:hover::-webkit-scrollbar-track, .Rail:hover::-webkit-scrollbar-thumb, .Rail:hover::-webkit-scrollbar-track { visibility: visible }

.Rail::-webkit-scrollbar-thumb, .Rail::-webkit-scrollbar-track { visibility: hidden; background-clip: padding-box; border-radius: 7px; border-style: solid; border-width: 3px }

.modalWrapper { background: #36393f; border: none; box-shadow: 0px 0px 20px 200em rgba(0,0,0,0.85); border-radius: 4px }

.typing-indicator { bottom: 4px !important; left: 6px !important; padding-left: 20px }

.typing-indicator:before { content: ''; background-color: #99aab5; width: 4px; height: 4px; position: absolute; top: 5px; border-radius: 50%; left: 1px }

.typing-indicator .username:before { content: ''; background-color: #99aab5; width: 4px; height: 4px; position: absolute; top: 5px; border-radius: 50%; left: 7px }

.typing-indicator .username:after { content: ''; background-color: #99aab5; width: 4px; height: 4px; position: absolute; top: 5px; border-radius: 50%; left: 13px }

.typing-indicator .username { color: hsla(0,0%,100%,.8) }

background: rgba(45,7,40,0.8); user-select: none; overflow-y: scroll }
 * 1) Rail {

position: relative; }
 * 1) Rail .wordmark {

background: #484c52; border: none; text-align: center }
 * 1) Rail > .private {

position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; border: none }
 * 1) Rail .chevron {

z-index: 200 }
 * 1) Rail .selected .chevron {

margin-right: 2px }
 * 1) PrivateChatList .User {

border-radius: 6px }
 * 1) PrivateChatList .User:hover img {

background: rgba(117,0,68,0.3) }
 * 1) PrivateChatList .User.selected:hover {

border-radius: 50% }
 * 1) PrivateChatList .User.selected:hover img {

margin-right: 0 }
 * 1) PrivateChatList .User:last-of-type {

transition: .1s }
 * 1) PrivateChatList .User img {

.User .username { margin-right: 0 }

position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; border: none }
 * 1) WikiaPage #Rail .chevron {

opacity: .6 }
 * 1) ChatHeader .chat-toolbar__button:not(:hover) {

right: 180px !important }
 * 1) UserStatsMenu {

padding: 0 }
 * 1) UserStatsMenu .actions .regular-actions .message-wall,
 * 2) UserStatsMenu .actions .regular-actions .contribs {

padding: 5px 10px; height: 100%; box-sizing: border-box; display: flex; align-items: center }
 * 1) UserStatsMenu .actions .regular-actions .message-wall a,
 * 2) UserStatsMenu .actions .regular-actions .contribs a {

padding-left: 7px }
 * 1) UserStatsMenu .message-wall .label,
 * 2) UserStatsMenu .contribs .label {

}
 * 1) UserStatsMenu .actions .message-wall:first-of-type a {

padding-bottom: 9px }
 * 1) UserStatsMenu .actions .contribs:last-of-type a {

border-color: #444; margin: 2px 0; transition: margin 200ms ease }
 * 1) UserStatsMenu .actions .separator {

margin: 2px 5px; /* Why not? */ }
 * 1) UserStatsMenu .separator:hover {

background: rgba(110,31,80,0.7) }
 * 1) UserStatsMenu .actions li:hover {

color: #cccccc }
 * 1) UserStatsMenu .actions a,
 * 2) UserStatsMenu .actions li {

.groups { padding: 2px 5px 0 5px }

.groups:empty { display: none }

.groups .group { margin: 5px 4px 0 0; border: 1px solid; border-color: currentColor; border-radius: 14px; padding: 3px 6px 3px 3px; display: inline-flex; align-items: center; height: 12px; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden }

.groups .group::before { content: ''; background-color: currentColor; border-radius: 6px; height: 12px; width: 12px; margin-right: 4px }

.groups .group::after { content: attr(data-group); color: #ccc }

.Chat .continued:hover .time { display: flex; align-self: flex-end; background: #411130; margin: 0 auto 0 10px; padding-right: 5px; border-radius: 2px; box-shadow: 0 2px 10px 0 rgba(0,0,0,.2); }

.Chat .continued:hover .message { width: auto }

/* Most of these colors were stolen from Highlight and the Dev Wiki Discord but whatevs */ .group[data-group="bureaucrat"] { color: #90EE90; /* TODO: Better color that isn't confused with Vanguard */ }

.group[data-group="bureaucrat"]::after { content: 'Bureaucrat'; }

.group[data-group="sysop"] { color: #ee1a41; }

.group[data-group="sysop"]::after { content: 'Admin'; }

.group[data-group="staff"] { color: #5df2ae; }

.group[data-group="staff"]::after { content: 'Staff'; }

.group[data-group="voldev"] { color: #3498db; }

.group[data-group="voldev"]::after { content: 'VolDev'; }

.group[data-group="bot"] { color: #dfec24; }

.group[data-group="bot"]::after { content: 'Bot'; }

.group[data-group="vstf"] { color: #ff7777; }

.group[data-group="vstf"]::after { content: 'VSTF'; }

.group[data-group="chatmoderator"] { color: #a400a4; }

.group[data-group="chatmoderator"]::after { content: 'Chat Mod'; }

.group[data-group="content-moderator"] { color: #ff7000; }

.group[data-group="content-moderator"]::after { content: 'Content Mod'; }

.group[data-group="vanguard"] { color: #1eaf7a; }

.group[data-group="vanguard"]::after { content: 'Vanguard'; }

.group[data-group="council"] { color: #7289da; }

.group[data-group="council"]::after { content: 'Council'; }

.group[data-group="helper"] { color: #bf6240; }

.group[data-group="helper"]::after { content: 'Helper'; }

.group[data-group="global-discussions-moderator"] { color: #4286f4; }

.group[data-group="global-discussions-moderator"]::after { content: 'Global Discussions Mod'; }

.group[data-group="content-reviewer"] { }

.group[data-group="content-reviewer"]::after { content: 'Content Reviewer'; }

.group[data-group="restricted-login"], .group[data-group="util"] { display: none; }

position: fixed; top: 2px; right: 425px; }
 * 1) PrivateChatList {

float: left; padding-right: 0px; padding-left: 34px }
 * 1) PrivateChatList .User {

display: none }
 * 1) PrivateChatList .User .username,
 * 2) PrivateChatList .User .details {

right: 4px; bottom: 3px; top: auto; border-radius: 3px }
 * 1) PrivateChatList .User .splotch {

top: 56px !important; margin-right: 40px }
 * 1) UserStatsMenu.private {

display: none !important }
 * 1) Rail .private {

a { color: #bd0099; -webkit-transition: all .2s linear 0s; -moz-transition: all .2s linear 0s; -ms-transition: all .2s linear 0s; -o-transition: all .2s linear 0s; transition: all .2s linear 0s; text-shadow: 0 -15px 2.5px transparent, 0 15px 2.5px transparent; text-decoration: none }

a:hover { text-shadow: 0 0 2.5px rgb(216,0,148,0.7), 0 0 2.5px rgb(216,0,148,0.7); color: #d80eb1 !important; text-decoration: none; -webkit-transition: all .4s linear 0s; -moz-transition: all .4s linear 0s; -ms-transition: all .4s linear 0s; -o-transition: all .4s linear 0s; transition: all .4s linear 0s }

/* Nuke it after if you choose to keep it, doubt you'll want to wait 20 seconds to boot chat cause of this sexy bubble anyway. */ body:before { font-size: 15px; position: fixed; border-radius: 50%; box-shadow: inset 0 0 75px #fff, inset 20px 0 80px #f0f, inset -20px 0 80px #0ff, inset 20px 0 220px #f0f, inset -20px 0 220px #0ff, 0 0 50px #fff, -10px 0 80px #f0f, 10px 0 80px #0ff, 0px 0px 20px 200em rgba(0,0,0,0.85); height: 450px; width: 450px; align-items: center; display: flex; box-sizing: border-box; padding: 0 10%; text-align: center; background: rgba(110, 31, 80, 0.7); color: white; content: 'You couldn\'t possibly not have seen this coming, right? Now it\'s REALLY DiscordChat. If you think it looks like shit, there\'s only one revision to revert, other than that I really didn\'t touch anything, promise! And sorry it took so long, lol, tight schedule. Enjoy~'; z-index: 2; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); line-height: 18px; animation: fadeOut linear 3s 15s forwards; }

@keyframes fadeOut { 0% {       opacity: 1; }

95% {       filter: blur(200px); }

100% {       opacity: 0; } }