Chú ý: Sau khi lưu trang, có thể bạn sẽ phải xóa bộ nhớ đệm của trình duyệt để xem các thay đổi.
- Firefox / Safari: Nhấn giữ phím Shift trong khi nhấn Tải lại (Reload), hoặc nhấn tổ hợp Ctrl-F5 hay Ctrl-R (⌘R trên Mac)
- Google Chrome: Nhấn tổ hợp Ctrl-Shift-R (⇧⌘R trên Mac)
- Internet Explorer / Edge: Nhấn giữ phím Ctrl trong khi nhấn Làm tươi (Refresh), hoặc nhấn tổ hợp Ctrl-F5
- Opera: Nhấn tổ hợp Ctrl-F5.
/**
* Created by Soap Shadow and Speedit
* Version 1.2.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 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.
*/
.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. */
#discord-widget-container a,
#discord-widget-container abbr,
#discord-widget-container acronym,
#discord-widget-container address,
#discord-widget-container applet,
#discord-widget-container big,
#discord-widget-container blockquote,
#discord-widget-container body,
#discord-widget-container caption,
#discord-widget-container cite,
#discord-widget-container code,
#discord-widget-container dd,
#discord-widget-container del,
#discord-widget-container dfn,
#discord-widget-container div,
#discord-widget-container dl,
#discord-widget-container dt,
#discord-widget-container em,
#discord-widget-container fieldset,
#discord-widget-container form,
#discord-widget-container h1,
#discord-widget-container h2,
#discord-widget-container h3,
#discord-widget-container h4,
#discord-widget-container h5,
#discord-widget-container h6,
#discord-widget-container html,
#discord-widget-container iframe,
#discord-widget-container img,
#discord-widget-container ins,
#discord-widget-container kbd,
#discord-widget-container label,
#discord-widget-container legend,
#discord-widget-container li,
#discord-widget-container object,
#discord-widget-container ol,
#discord-widget-container p,
#discord-widget-container pre,
#discord-widget-container q,
#discord-widget-container s,
#discord-widget-container samp,
#discord-widget-container small,
#discord-widget-container span,
#discord-widget-container strike,
#discord-widget-container strong,
#discord-widget-container sub,
#discord-widget-container sup,
#discord-widget-container table,
#discord-widget-container tbody,
#discord-widget-container td,
#discord-widget-container tfoot,
#discord-widget-container th,
#discord-widget-container thead,
#discord-widget-container tr,
#discord-widget-container tt,
#discord-widget-container ul,
#discord-widget-container var {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline
}
#discord-widget-container ol, #discord-widget-container ul {
list-style: none
}
#discord-widget-container a img {
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")
}
#discord-widget-container * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#discord-widget-container {
background-color: transparent;
line-height: 1;
height: 400px;
width: 300px;
margin-left: -15px;
}
#discord-widget {
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%;
}
#discord-widget a {
color: #fff;
text-decoration: none;
}
#discord-widget strong {
font-weight: 700;
}
#discord-widget .widget {
-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;
}
#discord-widget .widget-loading {
-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;
}
#discord-widget .widget-logo {
-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;
}
#discord-widget .widget-logo:hover {
opacity: .6;
}
#discord-widget .widget-header {
-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;
}
#discord-widget .widget-header .widget-header-count {
-ms-flex: 1;
-webkit-box-flex: 1;
flex: 1;
text-align: right;
}
#discord-widget .widget-footer {
-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;
}
#discord-widget .widget-footer .widget-footer-info {
-ms-flex: 1;
-webkit-box-flex: 1;
display: inline-block;
flex: 1;
font-weight: 500;
opacity: .1
}
/* Widget footer info link style */
#discord-widget .widget-footer .widget-footer-info a {
color: #883e97;
}
/* Connect button style. */
#discord-widget .widget-btn-connect {
-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;
color: #883e97 !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: 90px;
}
/* Connect button on hover style. */
#discord-widget .widget-btn-connect:hover {
-webkit-transition: ease-in 0.5s;
border: 1px solid #ef67a5;
color: #ef67a5 !important;
opacity: 1 !important;
transition: ease-in 0.5s;
}
#discord-widget .widget-body {
-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;
}
#discord-widget .widget-channel {
margin-top: 12px;
}
#discord-widget .widget-channel:first-child {
margin-top: 0;
}
#discord-widget .widget-channel:last-child {
margin-bottom: 30px;
}
#discord-widget .widget-channel-name {
font-size: 18px;
font-weight: 600;
margin-bottom: 12px
}
/* Widget role container */
#discord-widget .widget-role-container {
display: flex;
flex-flow: row wrap;
margin-top: 8px;
}
#discord-widget .widget-role-container:first-child {
margin-top: 0;
}
#discord-widget .widget-role-container:last-child {
margin-bottom: -16px;
}
/* Widget role name - Admins */
#discord-widget .widget-role-name-admins {
display: flex;
color: #ef67a5;
flex: 1 1 100%;
font-weight: 600;
margin-bottom: 12px;
text-transform: uppercase;
width: 100%;
}
/* Widget role name - Discord Operators */
#discord-widget .widget-role-name-operators {
color: #9999ff;
display: flex;
flex: 1 1 100%;
font-weight: 600;
margin-bottom: 12px;
text-transform: uppercase;
width: 100%;
}
/* Widget role name - Translators */
#discord-widget .widget-role-name-trans {
color: #bf26bf;
display: flex;
flex: 1 1 100%;
font-weight: 600;
margin-bottom: 12px;
text-transform: uppercase;
width: 100%;
}
/* Widget role name - Angel */
#discord-widget .widget-role-name-angel {
color: rgb(255, 158, 66);
display: flex;
flex: 1 1 100%;
font-weight: 600;
margin-bottom: 12px;
text-transform: uppercase;
width: 100%;
}
/* Widget role name - Bots */
#discord-widget .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 */
#discord-widget .widget-role-name-users {
color: #8a8e94;
display: flex;
flex: 1 1 100%;
font-weight: 600;
margin-bottom: 12px;
text-transform: uppercase;
width: 100%;
}
#discord-widget .widget-members-online {
color: #8a8e94;
font-weight: 600;
margin-bottom: 12px;
text-transform: uppercase;
}
#discord-widget .widget-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;
}
#discord-widget .widget-member .widget-member-name {
-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;
}
#discord-widget .widget-member:nth-child(7n-1) .widget-member-name,
#discord-widget .widget-member:nth-child(7n) .widget-member-name,
#discord-widget .widget-member:nth-child(7n+1) .widget-member-name {
padding: 0 32px 0 8px;
right: 4px;
}
#discord-widget .widget-member:hover .widget-member-name {
display: flex;
}
#discord-widget .widget-member .widget-member-game {
-ms-flex: 1;
-webkit-box-flex: 1;
color: #4f545c;
flex: 1;
overflow: hidden;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
#discord-widget .widget-member-avatar {
margin-right: 4px;
position: relative;
}
#discord-widget .widget-member:hover .widget-member-avatar {
z-index: 2;
}
#discord-widget .widget-member-avatar img {
border-radius: 50%;
height: 32px;
width: 32px;
border: 2px solid #883e97;
}
#discord-widget .widget-member-status {
border-radius: 3px;
bottom: 3px;
height: 8px;
position: absolute;
right: 3px;
width: 8px;
}
#discord-widget .widget-member-status-online {
background-color: #43b581;
}
#discord-widget .widget-member-status-idle {
background-color: #faa61a;
}
#discord-widget .widget-member-status-offline {
background-color: #747f8d;
}
#discord-widget .widget-member-status-dnd {
background-color: #f04747;
}
#discord-widget .widget-icon {
background-color: transparent;
background-size: 16px 16px;
display: inline-block;
height: 16px;
width: 16px
}
#discord-widget .widget-icon + .widget-icon {
margin-left: 8px;
}
#discord-widget .widget-icon-mute {
background-image: url(https://discordapp.com/assets/7d77f875e494ef93aa3a31e49c43ac30.svg);
}
#discord-widget .widget-icon-deaf {
background-image: url(https://discordapp.com/assets/8969299703ff850a5238a8af52909a5a.svg);
}
#discord-widget ::-webkit-scrollbar {
width: 12px;
}
#discord-widget ::-webkit-scrollbar-thumb {
background-clip: padding-box;
background-color: hsla(0, 0%, 100%, .1);
border: 3px solid transparent;
border-radius: 5px;
}
#discord-widget ::-webkit-scrollbar-track-piece {
background-clip: padding-box;
background-color: transparent;
border: 3px solid transparent;
border-radius: 5px;
}
#discord-widget .widget-theme-light ::-webkit-scrollbar-thumb {
background-color: #883e97;
}
#discord-widget .widget-theme-light .widget-body, #discord-widget .widget-theme-light .widget-footer {
background-color: #fff;
}
#discord-widget .widget-theme-light .widget-body {
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);
}
#discord-widget .widget-theme-light .widget-btn-connect, #discord-widget .widget-theme-light .widget-footer-info {
color: #000;
opacity: .7;
}
#discord-widget .widget-theme-light .widget-channel-name, #discord-widget .widget-theme-light .widget-online-members {
color: #8a8e94;
}
/* 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
}