MediaWiki:Discord.css

/** * Created by Soap Shadow and Speedit * Version 1.4.0 * * The base code is from the original CSS of the light theme widget. * It also contains the custom styles for the elements created, * including the actual widget container replacing the iframe. * * Totally didn't copy this from mlpwiki. ~Sophie * * Version History * v1.0.0 - Initial * v1.1.0 - Display avatars only in the list, *         display the user's name as a chip on hover. *       - Add some animation for the connect button on hover. *       - Style the button using Wikia's community module button style. *       - Add some colour to the scroll bar and make it slighly wider. * v1.2.0 - Add support for template substitution for pages which don't have the wikia rail *         i.e. the main page. * v1.3.0 - Add border radius, update animation, font size, height and width to match Wikia's rail module button style. * v1.4.0 - Remove Discord Operators role style. *       - Add gradient to Admin role text - Discord Operators + Wiki Admin role colours. */

.spinner { -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 } .spinner-inner { display: inline-block; height: 32px; position: relative; width: 32px } .spinner-wandering-cubes .spinner-item { -webkit-animation: spinner-wandering-cubes 1.8s infinite ease-in-out; animation: spinner-wandering-cubes 1.8s infinite ease-in-out; background-color: #7289da; height: 10px; left: 0; position: absolute; top: 0; width: 10px } .spinner-wandering-cubes .spinner-item:last-child { -webkit-animation-delay: -.9s; animation-delay: -.9s } @-webkit-keyframes spinner-wandering-cubes { 25% {       -webkit-transform: translateX(22px) rotate(-90deg) scale(.5); transform: translateX(22px) rotate(-90deg) scale(.5) }   50% {        -webkit-transform: translateX(22px) translateY(22px) rotate(-180deg); transform: translateX(22px) translateY(22px) rotate(-180deg) }   75% {        -webkit-transform: translateX(0) translateY(22px) rotate(-270deg) scale(.5); transform: translateX(0) translateY(22px) rotate(-270deg) scale(.5) }   to { -webkit-transform: rotate(-1turn); transform: rotate(-1turn) } } @keyframes spinner-wandering-cubes { 25% {       -webkit-transform: translateX(22px) rotate(-90deg) scale(.5); transform: translateX(22px) rotate(-90deg) scale(.5) }   50% {        -webkit-transform: translateX(22px) translateY(22px) rotate(-180deg); transform: translateX(22px) translateY(22px) rotate(-180deg) }   75% {        -webkit-transform: translateX(0) translateY(22px) rotate(-270deg) scale(.5); transform: translateX(0) translateY(22px) rotate(-270deg) scale(.5) }   to { -webkit-transform: rotate(-1turn); transform: rotate(-1turn) } } .spinner-chasing-dots { -webkit-animation: spinner-chasing-dots-rotate 2s infinite linear; animation: spinner-chasing-dots-rotate 2s infinite linear } .spinner-chasing-dots .spinner-item { -webkit-animation: spinner-chasing-dots-bounce 2s infinite ease-in-out; animation: spinner-chasing-dots-bounce 2s infinite ease-in-out; background-color: #7289da; border-radius: 100%; display: inline-block; height: 60%; position: absolute; top: 0; width: 60% } .spinner-chasing-dots .spinner-item:last-child { -webkit-animation-delay: -1s; animation-delay: -1s; bottom: 0; top: auto } @-webkit-keyframes spinner-chasing-dots-rotate { to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } @keyframes spinner-chasing-dots-rotate { to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } @-webkit-keyframes spinner-chasing-dots-bounce { 0%, to { -webkit-transform: scale(0); transform: scale(0) }   50% {        -webkit-transform: scale(1); transform: scale(1) } } @keyframes spinner-chasing-dots-bounce { 0%, to { -webkit-transform: scale(0); transform: scale(0) }   50% {        -webkit-transform: scale(1); transform: scale(1) } } .spinner-pulsing-ellipsis { -ms-flex-pack: center; -webkit-box-pack: center; display: -webkit-box; display: -ms-flexbox; display: flex; height: auto; justify-content: center; position: relative; width: 28px } .spinner-pulsing-ellipsis .spinner-item { -webkit-animation: spinner-ellipsis 1.4s infinite ease-in-out; animation: spinner-ellipsis 1.4s infinite ease-in-out; background-color: #99aab5; border-radius: 3px; display: inline-block; height: 6px; margin-right: 2px; opacity: .3; width: 6px } .spinner-pulsing-ellipsis .spinner-item:nth-of-type(2) { -webkit-animation-delay: .2s; animation-delay: .2s } .spinner-pulsing-ellipsis .spinner-item:nth-of-type(3) { -webkit-animation-delay: .4s; animation-delay: .4s } .stop-animation .spinner-pulsing-ellipsis .spinner-item { -webkit-animation: none; animation: none } @-webkit-keyframes spinner-ellipsis { 0% {       -webkit-transform: scale(1); opacity: 1; transform: scale(1) }   50% {        -webkit-transform: scale(.8); opacity: .3; transform: scale(.8) }   to { -webkit-transform: scale(1); opacity: 1; transform: scale(1) } } @keyframes spinner-ellipsis { 0% {       -webkit-transform: scale(1); opacity: 1; transform: scale(1) }   50% {        -webkit-transform: scale(.8); opacity: .3; transform: scale(.8) }   to { -webkit-transform: scale(1); opacity: 1; transform: scale(1) } } .spinner.spinner-spinning-circle { width: 100% } .spinner.spinner-spinning-circle .circular { -webkit-animation: spinner-spinning-circle-rotate 2s linear infinite; animation: spinner-spinning-circle-rotate 2s linear infinite; height: 100%; width: 100% } .spinner.spinner-spinning-circle .path { -webkit-animation: spinner-spinning-circle-dash 1.5s ease-in-out infinite; animation: spinner-spinning-circle-dash 1.5s ease-in-out infinite; fill: none; stroke: #7289da; stroke-dasharray: 1, 200; stroke-dashoffset: 0; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 6 } @-webkit-keyframes spinner-spinning-circle-rotate { to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } @keyframes spinner-spinning-circle-rotate { to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } @-webkit-keyframes spinner-spinning-circle-dash { 0% {       stroke-dasharray: 1, 200; stroke-dashoffset: 0 }   50% {        stroke-dasharray: 89, 200; stroke-dashoffset: -35 }   to { stroke-dasharray: 89, 200; stroke-dashoffset: -124 } } @keyframes spinner-spinning-circle-dash { 0% {       stroke-dasharray: 1, 200; stroke-dashoffset: 0 }   50% {        stroke-dasharray: 89, 200; stroke-dashoffset: -35 }   to { stroke-dasharray: 89, 200; stroke-dashoffset: -124 } } /* Create the widget container. This would be the iframe. */   border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline }   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") }
 * 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 {
 * 1) discord-widget-container ol, #discord-widget-container ul {
 * 1) discord-widget-container a img {

-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 } /* Widget footer info link style */ color: #883e97; } /* Connect button style. */   -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 #883e97; border-radius: 4px; color: #883e97 !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; } /* Connect button on hover style. */   -webkit-transition: ease-in 0.2s; border: 1px solid #ef67a5; color: #ef67a5 !important; opacity: 1 !important; transition: ease-in 0.2s; }   -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://vignette.wikia.nocookie.net/mlp/images/b/b4/MLP_Wiki_Custom_Discord_Integrator_Widget_left_background.png), url(https://vignette.wikia.nocookie.net/mlp/images/9/9b/MLP_Wiki_Custom_Discord_Integrator_Widget_right_background.png); background-position: 0 100%, 100% 100%; background-repeat: no-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; }   margin-top: 12px; }   margin-top: 0; }   margin-bottom: 30px; }   font-size: 18px; font-weight: 600; margin-bottom: 12px } /* Widget role container */ display: flex; flex-flow: row wrap; margin-top: 8px; }   margin-top: 0; }   margin-bottom: -16px; } /* Widget role name - Admins */ display: flex; flex: 1 1 100%; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; width: 100%; /* Text gradient, Wiki Admin + Discord Admin colours. */   background: -webkit-linear-gradient(left, #ef67a5 4%, #9999ff 16%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
 * 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 {
 * 1) discord-widget .widget-footer .widget-footer-info a {
 * 1) discord-widget .widget-btn-connect {
 * 1) discord-widget .widget-btn-connect:hover {
 * 1) discord-widget .widget-body {
 * 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 {
 * 1) discord-widget .widget-role-container {
 * 1) discord-widget .widget-role-container:first-child {
 * 1) discord-widget .widget-role-container:last-child {
 * 1) discord-widget .widget-role-name-admins {

/* Widget role name - Moderators */ color: #bf26bf; display: flex; flex: 1 1 100%; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; width: 100%; } /* Widget role name - Bots */ color: #2ecc71; display: flex; flex: 1 1 100%; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; width: 100%; } /* Widget role name - Users */ color: #8a8e94; display: flex; flex: 1 1 100%; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; width: 100%; }   color: #8a8e94; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; }   -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; }   -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; }   padding: 0 32px 0 8px; right: 4px; }   display: flex; }   -ms-flex: 1; -webkit-box-flex: 1; color: #4f545c; flex: 1; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }   margin-right: 4px; position: relative; }   z-index: 2; }   border-radius: 50%; height: 32px; width: 32px; border: 2px solid #883e97; }   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 }   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: hsla(0, 0%, 100%, .1); border: 3px solid transparent; border-radius: 5px; }   background-clip: padding-box; background-color: transparent; border: 3px solid transparent; border-radius: 5px; }   background-color: #883e97; }   background-color: #fff; }   background-image: url(https://vignette.wikia.nocookie.net/mlp/images/b/b4/MLP_Wiki_Custom_Discord_Integrator_Widget_left_background.png), url(https://vignette.wikia.nocookie.net/mlp/images/9/9b/MLP_Wiki_Custom_Discord_Integrator_Widget_right_background.png); }   color: #000; opacity: .7; }   color: #8a8e94; }
 * 1) discord-widget .widget-role-name-mods {
 * 1) discord-widget .widget-role-name-bots {
 * 1) discord-widget .widget-role-name-users {
 * 1) discord-widget .widget-members-online {
 * 1) discord-widget .widget-member {
 * 1) discord-widget .widget-member .widget-member-name {
 * 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 {
 * 1) discord-widget .widget-member .widget-member-game {
 * 1) discord-widget .widget-member-avatar {
 * 1) discord-widget .widget-member:hover .widget-member-avatar {
 * 1) discord-widget .widget-member-avatar img {
 * 1) discord-widget .widget-member-status {
 * 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 {
 * 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 .widget-theme-light ::-webkit-scrollbar-thumb {
 * 1) discord-widget .widget-theme-light .widget-body, #discord-widget .widget-theme-light .widget-footer {
 * 1) discord-widget .widget-theme-light .widget-body {
 * 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 }