MediaWiki:Custom Discord Widget.js/Style.css

/****
 * 1) Credit to the MLP Wiki
 * 2) Currently extremely broken and unstable. Do not submit the JS for review!!

border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }
 * 1) discord-widget-container a,
 * 2) discord-widget-container abbr,
 * 3) discord-widget-container acronym,
 * 4) discord-widget-container address,
 * 5) discord-widget-container applet,
 * 6) discord-widget-container big,
 * 7) discord-widget-container blockquote,
 * 8) discord-widget-container body,
 * 9) discord-widget-container caption,
 * 10) discord-widget-container cite,
 * 11) discord-widget-container code,
 * 12) discord-widget-container dd,
 * 13) discord-widget-container del,
 * 14) discord-widget-container dfn,
 * 15) discord-widget-container div,
 * 16) discord-widget-container dl,
 * 17) discord-widget-container dt,
 * 18) discord-widget-container em,
 * 19) discord-widget-container fieldset,
 * 20) discord-widget-container form,
 * 21) discord-widget-container h1,
 * 22) discord-widget-container h2,
 * 23) discord-widget-container h3,
 * 24) discord-widget-container h4,
 * 25) discord-widget-container h5,
 * 26) discord-widget-container h6,
 * 27) discord-widget-container html,
 * 28) discord-widget-container iframe,
 * 29) discord-widget-container img,
 * 30) discord-widget-container ins,
 * 31) discord-widget-container kbd,
 * 32) discord-widget-container label,
 * 33) discord-widget-container legend,
 * 34) discord-widget-container li,
 * 35) discord-widget-container object,
 * 36) discord-widget-container ol,
 * 37) discord-widget-container p,
 * 38) discord-widget-container pre,
 * 39) discord-widget-container q,
 * 40) discord-widget-container s,
 * 41) discord-widget-container samp,
 * 42) discord-widget-container small,
 * 43) discord-widget-container span,
 * 44) discord-widget-container strike,
 * 45) discord-widget-container strong,
 * 46) discord-widget-container sub,
 * 47) discord-widget-container sup,
 * 48) discord-widget-container table,
 * 49) discord-widget-container tbody,
 * 50) discord-widget-container td,
 * 51) discord-widget-container tfoot,
 * 52) discord-widget-container th,
 * 53) discord-widget-container thead,
 * 54) discord-widget-container tr,
 * 55) discord-widget-container tt,
 * 56) discord-widget-container ul,
 * 57) discord-widget-container var {

list-style: none }   border: none } @font-face { font-family: Whitney; font-style: normal; font-weight: 500; src: url(https://discordapp.com/assets/e8acd7d9bf6207f99350ca9f9e23b168.woff) format("woff") } @font-face { font-family: Whitney; font-style: medium; font-weight: 600; src: url(https://discordapp.com/assets/3bdef1251a424500c1b3a78dea9b7e57.woff) format("woff") } @font-face { font-family: Whitney; font-style: bold; font-weight: 700; src: url(https://discordapp.com/assets/8e12fb4f14d9c4592eb8ec9f22337b04.woff) format("woff") }   -webkit-box-sizing: border-box; box-sizing: border-box; }   background-color: transparent; line-height: 1; height: 400px; width: 300px; margin-right: 10px; }   bottom: 0; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; height: 100%; width: 100%; }   color: #fff; text-decoration: none; }   font-weight: 700; }   -ms-flex: 1; -ms-flex-direction: column; -webkit-box-direction: normal; -webkit-box-flex: 1; -webkit-box-orient: vertical; border-radius: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; flex: 1; flex-direction: column; overflow: hidden; }   -ms-flex-align: center; -ms-flex-pack: center; -webkit-box-align: center; -webkit-box-pack: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: center; }   -webkit-transition: opacity .25s ease-out; background: url(https://discordapp.com/assets/35d75407bd75d70e84e945c9f879bab8.svg) 50% no-repeat; background-size: 124px 34px; display: inline-block; height: 34px; transition: opacity .25s ease-out; width: 124px; }   opacity: .6; }   -ms-flex-align: center; -ms-flex-negative: 0; -webkit-box-align: center; align-items: center; background-color: #883e97; display: -webkit-box; display: -ms-flexbox; display: flex; flex-shrink: 0; padding: 20px; }   -ms-flex: 1; -webkit-box-flex: 1; flex: 1; text-align: right; }   -ms-flex-align: center; -ms-flex-negative: 0; -webkit-box-align: center; -webkit-box-shadow: 0 -1px 18px rgba(0, 0, 0, .2), 0 -1px 0 rgba(0, 0, 0, .2); align-items: center; background-color: #1e2124; box-shadow: 0 -1px 18px rgba(0, 0, 0, .2), 0 -1px 0 rgba(0, 0, 0, .2); display: -webkit-box; display: -ms-flexbox; display: flex; flex-shrink: 0; min-height: 30px; padding: 6px 6px 6px 6px; }   -ms-flex: 1; -webkit-box-flex: 1; display: inline-block; flex: 1; font-weight: 500; opacity: .1 }
 * 1) discord-widget-container ol, #discord-widget-container ul {
 * 1) discord-widget-container a img {
 * 1) discord-widget-container * {
 * 1) discord-widget-container {
 * 1) discord-widget {
 * 1) discord-widget a {
 * 1) discord-widget strong {
 * 1) discord-widget .widget {
 * 1) discord-widget .widget-loading {
 * 1) discord-widget .widget-logo {
 * 1) discord-widget .widget-logo:hover {
 * 1) discord-widget .widget-header {
 * 1) discord-widget .widget-header .widget-header-count {
 * 1) discord-widget .widget-footer {
 * 1) discord-widget .widget-footer .widget-footer-info {

-ms-flex-align: center; -ms-flex-negative: 0; -ms-flex-pack: center; -webkit-box-align: center; -webkit-box-pack: center; -webkit-transition: ease-out 1s; align-items: center; background-clip: padding-box; border: 1px solid crimson; border-radius: 4px; color: black !important; display: -webkit-box; display: -ms-flexbox; display: flex; flex-shrink: 0; font-size: 12px; font-weight: 550; height: 33px; justify-content: center; opacity: 1 !important; text-transform: uppercase; transition: ease-out 0.5s; width: 135px; }
 * 1) discord-widget .widget-btn-connect {

-webkit-transition: ease-in 0.2s; border: 1px solid orangered; color: orange !important; opacity: 1 !important; transition: ease-in 0.2s; }
 * 1) discord-widget .widget-btn-connect:hover {

-ms-flex: 1; -webkit-box-flex: 1; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .2); background-color: #1e2124; background-image: url(https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX3122045.jpg); background-position: center; background-repeat: no-repeat; background-size: 200px 180px, 110px 130px; box-shadow: 0 1px 0 rgba(0, 0, 0, .2); flex: 1; overflow-x: hidden; overflow-y: scroll; padding: 15px; }
 * 1) discord-widget .widget-body {

margin-top: 12px; }   margin-top: 0; }   margin-bottom: 30px; }   font-size: 18px; font-weight: 600; margin-bottom: 12px }
 * 1) discord-widget .widget-channel {
 * 1) discord-widget .widget-channel:first-child {
 * 1) discord-widget .widget-channel:last-child {
 * 1) discord-widget .widget-channel-name {

display: flex; flex-flow: row wrap; margin-top: 8px; }   margin-top: 0; }   margin-bottom: -16px; }
 * 1) discord-widget .widget-role-container {
 * 1) discord-widget .widget-role-container:first-child {
 * 1) discord-widget .widget-role-container:last-child {

display: flex; color: midnightblue; flex: 1 1 100%; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; width: 100%; }
 * 1) discord-widget .widget-role-name-owner {

display: flex; color: #1aa3b3; flex: 1 1 100%; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; width: 100%; }
 * 1) discord-widget .widget-role-name-co-owners {

display: flex; color: teal; flex: 1 1 100%; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; width: 100%; }
 * 1) discord-widget .widget-role-name-admins {

display: flex; color: yellow; flex: 1 1 100%; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; width: 100%; }
 * 1) discord-widget .widget-role-name-mods {

display: flex; color: violet; flex: 1 1 100%; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; width: 100%; }
 * 1) discord-widget .widget-role-name-bots {

display: flex; color: magenta; flex: 1 1 100%; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; width: 100%; }
 * 1) discord-widget .widget-role-name-member {

-ms-flex-align: center; -webkit-box-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; flex: 0; margin: 6px 0; position: relative; width: auto; }
 * 1) discord-widget .widget-member {

-ms-flex: 1; -webkit-box-flex: 1; background: #883e97; border-radius: 16px; color: #fff; display: none; font-weight: bold; flex: 1; height: 32px; max-width: 160px; overflow: hidden; line-height: 32px; padding: 0 8px 0 32px; pointer-events: none; position: absolute; text-overflow: ellipsis; top: 0; user-select: none; white-space: nowrap; z-index: 1; }
 * 1) discord-widget .widget-member .widget-member-name {

color: red; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; }
 * 1) discord-widget .widget-members-online {

-ms-flex-align: center; -webkit-box-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; flex: 0; margin: 6px 0; position: relative; width: auto; }
 * 1) discord-widget .widget-member {

-ms-flex: 1; -webkit-box-flex: 1; background: #883e97; border-radius: 16px; color: #fff; display: none; font-weight: bold; flex: 1; height: 32px; max-width: 160px; overflow: hidden; line-height: 32px; padding: 0 8px 0 32px; pointer-events: none; position: absolute; text-overflow: ellipsis; top: 0; user-select: none; white-space: nowrap; z-index: 1; }
 * 1) discord-widget .widget-member .widget-member-name {

padding: 0 32px 0 8px; right: 4px; }   display: flex; }
 * 1) discord-widget .widget-member:nth-child(7n-1) .widget-member-name,
 * 2) discord-widget .widget-member:nth-child(7n) .widget-member-name,
 * 3) discord-widget .widget-member:nth-child(7n+1) .widget-member-name {
 * 1) discord-widget .widget-member:hover .widget-member-name {

-ms-flex: 1; -webkit-box-flex: 1; color: #4f545c; flex: 1; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
 * 1) discord-widget .widget-member .widget-member-game {

margin-right: 4px; position: relative; }   z-index: 2; }   border-radius: 50%; height: 32px; width: 32px; border: 2px solid orange; }
 * 1) discord-widget .widget-member-avatar {
 * 1) discord-widget .widget-member:hover .widget-member-avatar {
 * 1) discord-widget .widget-member-avatar img {

discord-widget .widget-member-status { border-radius: 3px; bottom: 3px; height: 8px; position: absolute; right: 3px; width: 8px; }   background-color: #43b581; }   background-color: #faa61a; }   background-color: #747f8d; }   background-color: #f04747; }   background-color: transparent; background-size: 16px 16px; display: inline-block; height: 16px; width: 16px }
 * 1) discord-widget .widget-member-status-online {
 * 1) discord-widget .widget-member-status-idle {
 * 1) discord-widget .widget-member-status-offline {
 * 1) discord-widget .widget-member-status-dnd {
 * 1) discord-widget .widget-icon {

margin-left: 8px; }   background-image: url(https://discordapp.com/assets/7d77f875e494ef93aa3a31e49c43ac30.svg); }   background-image: url(https://discordapp.com/assets/8969299703ff850a5238a8af52909a5a.svg); }   width: 12px; }   background-clip: padding-box; background-color: crimson; border: 3px solid transparent; border-radius: 5px; }   background-clip: padding-box; background-color: transparent; border: 3px solid transparent; border-radius: 5px; }
 * 1) discord-widget .widget-icon + .widget-icon {
 * 1) discord-widget .widget-icon-mute {
 * 1) discord-widget .widget-icon-deaf {
 * 1) discord-widget ::-webkit-scrollbar {
 * 1) discord-widget ::-webkit-scrollbar-thumb {
 * 1) discord-widget ::-webkit-scrollbar-track-piece {


 * 1) discord-widget ::-webkit-scrollbar-thumb {background-color: crimson;}

background-image: url(https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX3122045.jpg); }
 * 1) discord-widget .widget-theme-light .widget-body {

color: #000; opacity: .7; }   color: crimson; }
 * 1) discord-widget .widget-theme-light .widget-btn-connect, #discord-widget .widget-theme-light .widget-footer-info {
 * 1) discord-widget .widget-theme-light .widget-channel-name, #discord-widget .widget-theme-light .widget-online-members {

/* Wikia rail module style imports - used for pages which don't have a wikia rail. */ .CustomDiscordIntegrator #title h2 { border-bottom: 1px solid #cccccc; font-size: 16px; font-weight: bold; min-height: 30px; margin-bottom: 16px; padding-left: 2px; } .CustomDiscordIntegrator #title h2.has-icon { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center } .CustomDiscordIntegrator #title h2.has-icon svg { fill: #883e97; margin-right: 7px }