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 */

/* Scollbars not stolen from Discord */
 * -webkit-scrollbar {

width: 8px; }


 * -webkit-scrollbar-thumb, ::-webkit-scrollbar-track-piece {

background-color: #202225; border-color: #36393f; background-clip: padding-box; border-radius: 7px; }


 * -webkit-scrollbar-track-piece {

background-color: #2f3136; border-color: #36393f; }

/* General stuff */ body, #WikiaPage, #ChatHeader, .Chat li.you, #Write .message { background-color: #36393f; }

.Chat, #ChatHeader, #WikiaPage, #Write .message { border: none }

/* Text colors */ color: white; }
 * 1) WikiaPage, #Write textarea {

.User.away { color: #ccc; }

/* Round booty */ border-radius: 50%; border: 0 solid transparent; }
 * 1) Rail .User img, .Chat .avatar {

/* Textarea styles */ background: #484c52; border-radius: 5px; }
 * 1) Write, #Write .message {

border-top-left-radius: 23px; border-bottom-left-radius: 23px; }
 * 1) Write {

border: none; border-radius: 50%; margin: 3px; height: 40px; width: 40px; left: 0; }
 * 1) Write img {

/* Rail styles */ background: #2f3136; user-select: none; overflow-y: scroll; }
 * 1) Rail {

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

background: rgba(0, 0, 0, .2); box-shadow: none; }
 * 1) Rail .User:hover, #Rail .selected {

.User .username { margin-right: 0; }

background: rgba(0, 0, 0, .0); }
 * 1) Rail .wordmark.selected {

position: relative; margin: auto; display: block; padding: 2px 0; cursor: pointer; }
 * 1) Rail .wordmark {

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

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

/* Chat header */ background: #2f3136; color: #ccc; height: 45px; padding-top: 2px; padding-left: 2px; }
 * 1) ChatHeader {

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

display: none; }
 * 1) ChatHeader .User {

right: 6px; top: 6px }
 * 1) ChatHeader .chat-toolbar {

content: '@'; position: relative; font-size: 17px; top: -1px; padding-right: 3px; color: #666; }
 * 1) ChatHeader .private::before {

/* Hide mod badges; there is now a list of groups in the user popout */ .User .badge { display: none; }

/* Make the rail bigger */ width: 170px; }
 * 1) Rail {

.Chat { right: 170px; }

right: 170px; }
 * 1) Write {

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

/* User stats menu */ box-shadow: none; border: none; border-radius: 10px; overflow: hidden; background: #2f3136; width: 200px; }
 * 1) UserStatsMenu {

background: #202225; 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 {

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

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

/* Fix for more clickable message wall and userpage links */ 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 {

padding-top: 9px; }
 * 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(0, 0, 0, .1); }
 * 1) UserStatsMenu .actions li:hover {

color: #09829d; }
 * 1) UserStatsMenu .actions a, #UserStatsMenu .actions li {

/* Modals */ .modalWrapper { background: #0f1013; border: none; box-shadow: 0 10px 60px 0 black; color: #ccc }

.blackout { background: black; }

/* User groups */ .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: 4px 6px; 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 and message styles */ .Chat li { display: flex; flex-direction: row-reverse; flex-wrap: wrap; }

.Chat .message { width: 100%; }

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

.Chat .time, .Chat .custom-time { padding-left: 5px; margin-right: auto; }

.Chat .inline-alert { display: block; }

.Chat .continued:hover .time { display: flex; font-style: italic; align-self: flex-end; }

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

/* For my bootleg ChatTimestamps */ .seconds { display: none; }

.time:hover .seconds { display: inline; }

/* 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'; /* GD Mod? */ }

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

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

.group[data-group="content-volunteer"] { color: #ffa1a8; }

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

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

/* Fixed chat header PMs */ position: fixed; top: 15px; right: 290px; /* FIXME: Hardcoded */ }
 * 1) PrivateChatList {

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

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

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

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

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

/* Only use this on CC lol */ body.wiki-wikia .wordmark img { filter: contrast(0) }