User:EsrielTakoda/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: normal; font-weight: 500; 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; }  #WikiaPage { 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; }  /* User Colors */ li[data-user="Aiihuan"] .username { color: #ff66b3; font-weight: bold; }  li[data-user="EsrielTakoda"] .username { color: #fd5e53; font-weight: bold; }