MediaWiki:Common.js/CustomDiscordIntegrator.js/StyleLight.css

/** * Created by Soap Shadow and Speedit * Version 1.1.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. * * Version History * v1.0.0 - Initial * v1.1.0 - Display avatar's 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. */

.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 }
 * 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 }
 * 1) discord-widget-container ol, #discord-widget-container ul {

border: none }
 * 1) discord-widget-container a img {

@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; }
 * 1) discord-widget-container * {

background-color: transparent; line-height: 1; height: 400px; width: 300px; margin-right: 10px; }
 * 1) discord-widget-container {

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%; }
 * 1) discord-widget {

color: #fff; text-decoration: none; }
 * 1) discord-widget a {

font-weight: 700; }
 * 1) discord-widget strong {

-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; }
 * 1) discord-widget .widget {

-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; }
 * 1) discord-widget .widget-loading {

-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; }
 * 1) discord-widget .widget-logo {

opacity: .6; }
 * 1) discord-widget .widget-logo:hover {

-ms-flex-align: center; -ms-flex-negative: 0; -webkit-box-align: center; align-items: center; background-color: #7e5492; display: -webkit-box; display: -ms-flexbox; display: flex; flex-shrink: 0; padding: 20px; }
 * 1) discord-widget .widget-header {

-ms-flex: 1; -webkit-box-flex: 1; flex: 1; text-align: right; }
 * 1) discord-widget .widget-header .widget-header-count {

-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; }
 * 1) discord-widget .widget-footer {

-ms-flex: 1; -webkit-box-flex: 1; display: inline-block; flex: 1; font-weight: 500; opacity: .1 }
 * 1) discord-widget .widget-footer .widget-footer-info {

/* Widget footer info link style */ color: #7e5492; }
 * 1) discord-widget .widget-footer .widget-footer-info a {

/* 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 #7e5492; color: #7e5492 !important; display: -webkit-box; display: -ms-flexbox; display: flex; flex-shrink: 0; font-size: 11px; font-weight: 550; height: 30px; justify-content: center; opacity: 1 !important; text-transform: uppercase; transition: ease-out 0.5s; width: 120px; }
 * 1) discord-widget .widget-btn-connect {

/* Connect button on hover style. */   -webkit-transition: ease-in 0.5s; border: 1px solid #ef67a5; color: #ef67a5 !important; opacity: 1 !important; transition: ease-in 0.5s; }
 * 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://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; }
 * 1) discord-widget .widget-body {

margin-top: 12px; }
 * 1) discord-widget .widget-channel {

margin-top: 0; }
 * 1) discord-widget .widget-channel:first-child {

margin-bottom: 30px; }
 * 1) discord-widget .widget-channel:last-child {

font-size: 18px; font-weight: 600; margin-bottom: 12px }
 * 1) discord-widget .widget-channel-name {

/* Widget role container */ display: flex; flex-flow: row wrap; margin-top: 8px; }
 * 1) discord-widget .widget-role-container {

margin-top: 0; }
 * 1) discord-widget .widget-role-container:first-child {

margin-bottom: -16px; }
 * 1) discord-widget .widget-role-container:last-child {

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

/* Widget role name - Discord Operators */ color: #9999ff; display: flex; flex: 1 1 100%; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; width: 100%; }
 * 1) discord-widget .widget-role-name-operators {

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

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

/* Widget role name - Users */ color: #8a8e94; display: flex; flex: 1 1 100%; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; width: 100%; }
 * 1) discord-widget .widget-role-name-users {

color: #8a8e94; 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: #7e5492; 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; }
 * 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 {

display: flex; }
 * 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; }
 * 1) discord-widget .widget-member-avatar {

z-index: 2; }
 * 1) discord-widget .widget-member:hover .widget-member-avatar {

border-radius: 50%; height: 32px; width: 32px; border: 2px solid #7e5492; }
 * 1) discord-widget .widget-member-avatar img {

border-radius: 3px; bottom: 3px; height: 8px; position: absolute; right: 3px; width: 8px; }
 * 1) discord-widget .widget-member-status {

background-color: #43b581; }
 * 1) discord-widget .widget-member-status-online {

background-color: #faa61a; }
 * 1) discord-widget .widget-member-status-idle {

background-color: #747f8d; }
 * 1) discord-widget .widget-member-status-offline {

background-color: #f04747; }
 * 1) discord-widget .widget-member-status-dnd {

background-color: transparent; background-size: 16px 16px; display: inline-block; height: 16px; width: 16px }
 * 1) discord-widget .widget-icon {

margin-left: 8px; }
 * 1) discord-widget .widget-icon + .widget-icon {

background-image: url(https://discordapp.com/assets/7d77f875e494ef93aa3a31e49c43ac30.svg); }
 * 1) discord-widget .widget-icon-mute {

background-image: url(https://discordapp.com/assets/8969299703ff850a5238a8af52909a5a.svg); }
 * 1) discord-widget .widget-icon-deaf {

width: 12px; }
 * 1) discord-widget ::-webkit-scrollbar {

background-clip: padding-box; background-color: hsla(0, 0%, 100%, .1); border: 3px solid transparent; border-radius: 5px; }
 * 1) discord-widget ::-webkit-scrollbar-thumb {

background-clip: padding-box; background-color: transparent; border: 3px solid transparent; border-radius: 5px; }
 * 1) discord-widget ::-webkit-scrollbar-track-piece {

background-color: #7e5492; }
 * 1) discord-widget .widget-theme-light ::-webkit-scrollbar-thumb {

background-color: #fff; }
 * 1) discord-widget .widget-theme-light .widget-body, #discord-widget .widget-theme-light .widget-footer {

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); }
 * 1) discord-widget .widget-theme-light .widget-body {

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

color: #8a8e94; }
 * 1) discord-widget .widget-theme-light .widget-channel-name, #discord-widget .widget-theme-light .widget-online-members {