User:Robyn Grayson/chat.css

body { background: #3a3a3a; }

.ChatHeader, .Chat, .Write { background: #36393e; color: #dcddde; }

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

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

content: "#main"; position: fixed; color: white; font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif; left: 10px; }
 * 1) ChatHeader .wordmark:before {

opacity: 0; }
 * 1) ChatHeader .wordmark img {

.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, .PrivateChatList { padding: 0 3px; }

.WikiChatList li, .PrivateChatList li { margin-bottom: 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: 65px; }

.Chat .you { background: #36393e; }

.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 .time::before, .Chat .custom-time::before { content: 'Today at '; }

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

.Chat::-webkit-scrollbar { width: 14px; }

.Chat::-webkit-scrollbar-thumb { border: 3px solid #36393f; background-color: #202225; border-radius: 7px; }

.Chat::-webkit-scrollbar-track-piece { border: 3px solid #36393f; background-color: #2f3136; background-clip: padding-box; border-radius: 7px; }

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

.Rail .User:hover { background: #36393f; border-radius: 3px; }

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

.Rail .selected { background: rgba(79,84,92,.6); 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; }

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

.Rail .wordmark { margin: 0 3px 3px; }

.Rail .wordmark img { opacity: 0; }

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: #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 {

background-color: #2f3136; 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: #36393e !important; }

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

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

.Rail::-webkit-scrollbar-thumb { background-color: rgba(32,34,37,.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: 10px; }

.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 { padding-left: 10px; color: hsla(0,0%,100%,.8); }