User:Anonminati/chat.css

/* Discord Chat Skin (Created by Slyst) */

@font-face { font-family: Whitney; font-style: normal; font-weight: 500; src: url(https://discordapp.com/assets/d153359b5d87601d2b9c708b7ae2db02.woff) format("woff"); } @font-face { font-family: Whitney; font-style: bold; font-weight: 700; src: url(https://discordapp.com/assets/2e004dd717cdc58b9ccb361d286ebbce.woff) format("woff"); } body { font-family: Whitney; } .ChatHeader { background-color: #36393e; border: 0; border-bottom: 1px solid #2c2f32; border-radius: 0; margin: 0; padding: 10px; } .ChatHeader .User { border: 0; color: hsla(240,6%,97%,.6); font-size: 16px; padding: 15px 0 10px 65px; right: 0; width: 160px; } .ChatHeader .User img { border: 0; border-radius: 100%; height: 30px; left: 25px; top: 10px; width: 30px; } .ChatHeader .User .username .badge { right: 15px; top: 16px; }   background-color: #36393e; border: 0; border-radius: 0; bottom: 0; color: hsla(0,0%,100%,.7); left: 0; right: 0; top: 61px; } .Chat { border: 0; bottom: 60px; width: 85%; } .Chat .avatar { border: 0; border-radius: 100%; height: 40px; width: 40px; } .Chat .continued .time { display: inline; } .Chat .username { color: #fff; font-size: 1rem; padding-left: 20px; padding-top: 5px; } .Chat .username:after { content: ''; } .Chat .message { padding-left: 20px; } .Chat li:not(.continued) .message { display: block; padding-top: 5px; } .Chat li:not(.inline-alert) { border-top: 1px solid hsla(0,0%,100%,.04); font-size: 0.9375rem; margin: 0 10px; } .Chat .continued { padding-bottom:0; padding-top: 0; } .Chat .inline-alert + li, .Chat li + .continued { border-color: transparent; } .Chat .continued:not(.inline-alert) + .continued:not(.inline-alert) { padding-top: 2px; } .Chat li a { color: #0096cf; } .Chat .you { background-color: transparent; } .Chat .inline-alert { align-items: center; color: rgba(240,71,71,.8); display: flex; font-size: 14px; font-weight: normal; padding: 15px; } .Chat .inline-alert:before, .Chat .inline-alert:after { background-color: #f04747; opacity: .4; content: ''; display: inline-block; flex-grow: 1; height: 1px; } .Chat .inline-alert:before { margin-right: 10px; } .Chat .inline-alert a { color: #fff; margin: 0 5px; } .Chat .inline-alert:after { margin-left: 10px; } .Write { border-top: 1px solid hsla(0,0%,100%,.06); height: 50px; margin:0 10px; padding-left: 0; padding-top: 10px; width: calc(85% - 10px); } .Write img { display: none; } .Write .message { background: none; border: 0; height: 20px; margin-right: 30px; padding: 0; } .Write [name="message"] { background-color: hsla(218,5%,47%,.3); border-radius: 6px; color: hsla(0,0%,100%,.7); font-family: whitney; font-size: 0.9375rem; padding: 10px; } .Rail { background-color: #2f3136; width: 15%; } .Rail .WikiChatList { display: flex; flex-flow: column; } .Rail .chatmoderator, .Rail [data-user="Cörey"], .Rail [data-user="Jr Mime"], .Rail [data-user="Noreplyz"], .Rail [data-user="PyroNacht"], .Rail [data-user="SayuriDarling"], .Rail [data-user="Veralann"] { order: -1; } .Rail .wordmark.selected { background: linear-gradient(90deg,#282b30 85%,#2f3136); } .Rail > .wordmark { background-color: transparent; box-shadow: 0 0; margin-bottom: 0; padding: 10px 0; } .Rail .wordmark .chevron { display: none !important; border-color: #fff transparent transparent; left: 20px; } .Rail .wordmark .wordmark { display: block; margin: 0 auto; } .Rail .User { color: #fff; font-size: 16px; padding: 10px 16px 10px 60px; } .Rail .User:hover { background: linear-gradient(90deg,#282b30 85%,#2f3136) } .Rail .User img { border: 0; border-radius: 100%; height: 30px; left: 20px; width: 30px; } .Rail .User:not(.away) img { top: 6px; } .Rail .User .badge { right: 15px; top: 11px; } .Rail .away:not(:hover) { color: hsla(0,0%,100%,.6); filter: grayscale(100%); } .Rail h1:not(.wordmark), .Rail .private { background: none; border: 0; color: hsla(0,0%,100%,.4); font-size: 12px; letter-spacing: .08em; margin-top: 20px; padding: 10px 25px; text-transform: uppercase; } .Rail .User.selected { background: linear-gradient(90deg,#282b30 85%,#2f3136); box-shadow: 0 0; } .ChatWindow .UserStatsMenu { border: 0; border-radius: 3px; box-shadow: 0 0; padding: 0; right: 205px !important; width: 250px; } .UserStatsMenu .info { background: #7289da url(https://discordapp.com/assets/8cd2f31a12333149b89ef3931626ab83.png); border-radius: 3px 3px 0 0; padding: 20px 20px 10px; } .UserStatsMenu .info img { border: 4px solid #8ea1e1; border-radius: 100%; display: block; float: none; height: 92px; margin: 0 auto; width: 92px; } .UserStatsMenu .info ul { color: hsla(0,0%,100%,.6); font-size: 14px; margin: 0; text-align: center; } .UserStatsMenu .info ul .username { color: #fff; font-size: 16px; margin: 10px; } .UserStatsMenu .actions ul li:hover { background: transparent; } .UserStatsMenu .actions .regular-actions { background-color: #f6f6f7; border-radius: 0 0 3px 3px; margin: 0; padding: 10px; } .UserStatsMenu .actions .separator { display: none; } .UserStatsMenu .actions .admin-actions { border-top: 1px solid #dcddde; margin: 0; padding: 10px; } .UserStatsMenu .actions .admin-actions li { cursor: pointer; } .ChatWindow .chat-toolbar.wds-button-group .chat-toolbar__button { color: #20BFE3 !important; } .ChatWindow .chat-toolbar.wds-button-group { padding-top: 10px !important; padding-right: 60px; }
 * 1) WikiaPage {

/* End of Discord Chat Skin */

/* CSS for the Discord theme */ /* Scollbars definitely 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; } .Chat::-webkit-scrollbar-track-piece { border-top-right-radius: 0; border-top-left-radius: 0; } /* General stuff */ body, #WikiaPage, #ChatHeader, #Write .message { background-color: #36393f; } .Chat, #ChatHeader, #WikiaPage, #Write .message { border: none } /* Text colors */ color: white; } .User.away { color: #ccc; } /* Round booty */ border-radius: 50%; border: 0 solid transparent; } /* Textarea styles */ background-color: #484c52; border-radius: 5px; }   border-top-left-radius: 23px; border-bottom-left-radius: 23px; }   border: none; border-radius: 50%; margin: 3px; height: 40px; width: 40px; left: 0; } /* Rail styles */ background-color: #2f3136; user-select: none; overflow-y: scroll; }   background-color: #484c52; border: none; text-align: center; }   background-color: rgba(0, 0, 0, .2); box-shadow: none; } .User .username { margin-right: 0; }   background-color: rgba(0, 0, 0, .0); }   position: relative; margin: auto; display: block; padding: 0 0 4px 0; cursor: pointer; }   position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; border: none; }   z-index: 200; } /* Chat header */ background-color: #2f3136; color: #ccc; height: 45px; padding-top: 2px; padding-left: 2px; }   opacity: .6 }   display: none; }   right: 6px; top: 6px }   content: '@'; position: relative; font-size: 17px; top: -1px; padding-right: 3px; color: #666; } /* Hide mod badges; there is now a list of groups in the user popout */ /* TODO: Add them back but in a sexier form factor */ .User .badge { display: none; } /* Make the rail bigger */ width: 170px; } .Chat { right: 170px; }   right: 170px; }   right: 180px !important; } /* User stats menu */ box-shadow: none; border: none; border-radius: 10px; overflow: hidden; background-color: #2f3136; width: 200px; }   background-color: #202225; color: #ccc; padding-bottom: 10px; }   display: block; float: none; height: 100px; width: 100px; margin: 10px auto; border-radius: 50%; border: none; }   margin: 0 20px; text-align: center; }   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   margin: 0; }   padding-top: 7px; padding-bottom: 7px; cursor: pointer; height: 35px; box-sizing: border-box; } /* Fix for more clickable message wall and userpage links */ padding: 0; }   padding: 5px 10px; height: 100%; box-sizing: border-box; display: flex; align-items: center; }   padding-left: 7px; }   padding-top: 9px; }   padding-bottom: 9px; }   border-color: #444; margin: 2px 0; transition: margin 200ms ease; }   margin: 2px 5px; /* Why not? */ }   background-color: rgba(0, 0, 0, .1); }   color: #09829d; } /* Modals */ .modalWrapper { background-color: #0f1013; border: none; box-shadow: 0 10px 60px 0 black; color: #ccc } .blackout { background-color: black; } /* Chat and message styles */ .Chat li { display: flex; flex-direction: row-reverse; flex-wrap: wrap; } .Chat li.you { background-color: transparent; } .Chat .message { width: 100%; /* Spam scrollbar */ max-height: 240px; overflow-y: auto; } .Chat .username::after { content: ''; } .Chat .time, .Chat .custom-time { padding-left: 5px; margin-right: auto; white-space: pre; } .Chat .inline-alert { display: block; } .Chat .continued { flex-wrap: nowrap; } .Chat .continued:hover .time { display: flex; font-style: italic; align-self: flex-end; } .Chat .continued:hover .message { width: auto; } /* 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; } /* 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="fandom-editor"] { /* TODO */ } .group[data-group="fandom-editor"]::after { content: 'Wikia Editor'; } .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; } /* Only use this on CC lol */ body.wiki-wikia .wordmark img { filter: contrast(0) }
 * 1) WikiaPage, #Write textarea {
 * 1) Rail .User img, .Chat .avatar {
 * 1) Write, #Write .message {
 * 1) Write {
 * 1) Write img {
 * 1) Rail {
 * 1) Rail > .private {
 * 1) Rail .User:hover, #Rail .selected {
 * 1) Rail .wordmark.selected {
 * 1) Rail .wordmark {
 * 1) WikiaPage #Rail .chevron {
 * 1) WikiaPage #Rail .selected .chevron {
 * 1) ChatHeader {
 * 1) ChatHeader .chat-toolbar__button:not(:hover) {
 * 1) ChatHeader .User {
 * 1) ChatHeader .chat-toolbar {
 * 1) ChatHeader .private::before {
 * 1) Rail {
 * 1) Write {
 * 1) UserStatsMenu:not(.private-menu) {
 * 1) UserStatsMenu {
 * 1) UserStatsMenu .info {
 * 1) UserStatsMenu .info img {
 * 1) UserStatsMenu .info > ul {
 * 1) UserStatsMenu .info > ul > li {
 * 1) UserStatsMenu .regular-actions, #UserStatsMenu .admin-actions {
 * 1) UserStatsMenu .actions li {
 * 1) UserStatsMenu .actions .regular-actions .message-wall,
 * 2) UserStatsMenu .actions .regular-actions .contribs {
 * 1) UserStatsMenu .actions .regular-actions .message-wall a,
 * 2) UserStatsMenu .actions .regular-actions .contribs a {
 * 1) UserStatsMenu .message-wall .label,
 * 2) UserStatsMenu .contribs .label {
 * 1) UserStatsMenu .actions .message-wall:first-of-type a {
 * 1) UserStatsMenu .actions .contribs:last-of-type a {
 * 1) UserStatsMenu .actions .separator {
 * 1) UserStatsMenu .separator:hover {
 * 1) UserStatsMenu .actions li:hover {
 * 1) UserStatsMenu .actions a, #UserStatsMenu .actions li {

/** PRIVATE HEADER SCRIPT'S CSS **/ /* CSS for chat header PM lists */ position: fixed; top: 15px; right: 290px; /* FIXME: Hardcoded, make it work with more and less Chat-js butts */ }   float: left; padding-right: 0; padding-left: 34px; }   display: none; }   right: 4px; bottom: 3px; top: auto; }   display: none !important; }
 * 1) PrivateChatList {
 * 1) PrivateChatList .User {
 * 1) PrivateChatList .User .username,
 * 2) PrivateChatList .User .details {
 * 1) PrivateChatList .User .splotch {
 * 1) Rail .private {