User:Dorumin/chat.css

/* IsTyping */ margin-bottom: 4px; }
 * 1) WikiaPage {

.typing-indicator { position: absolute; bottom: 2px; left: 2em; right: 2em; font-size: 10px; color: white; }

.typing-indicator .username { font-weight: bold; }

/* 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: none; border-radius: 50%; margin: 3px; left: 2px; height: 40px; width: 40px; }
 * 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 {

/* Hide mod badges; they can be seen in the user stats menu if I don't forget to add it */ .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; }
 * 1) UserStatsMenu .actions li {

padding-top: 9px; }
 * 1) UserStatsMenu .actions li:first-of-type {

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

body.chatmoderator #UserStatsMenu .regular-actions li:last-of-type { padding-bottom: 7px; }

body.chatmoderator #UserStatsMenu .admin-actions li:first-of-type { padding-top: 7px; }

border-color: #444; }
 * 1) UserStatsMenu .actions .separator {

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; }

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