User:MCR-The-Orange/chat.css

/* Discord-esque chat - credits to Slyst and Aiihuan */

@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; }
 * 1) WikiaPage {