CustomDiscordIntegrator.js/StyleLight.css

/* Connect button style. */


 * 1) 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 darkorange;

border-radius: 4px;

color: darkorange !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. */


 * 1) discord-widget .widget-btn-connect:hover {

-webkit-transition: ease-in 0.2s;

border: 1px solid orange;

color: orange !important;

opacity: 1 !important;

transition: ease-in 0.2s;

}


 * 1) discord-widget .widget-channel {

margin-top: 12px;

}


 * 1) discord-widget .widget-channel:first-child {

margin-top: 0;

}


 * 1) discord-widget .widget-channel:last-child {

margin-bottom: 30px;

}


 * 1) discord-widget .widget-channel-name {

font-size: 18px;

font-weight: 600;

margin-bottom: 12px

}

/* Widget role name - Admins */


 * 1) 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 */


 * 1) 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 - Moderators */


 * 1) discord-widget .widget-role-name-mods {

color: #bf26bf;

display: flex;

flex: 1 1 100%;

font-weight: 600;

margin-bottom: 12px;

text-transform: uppercase;

width: 100%;

}

/* Widget role name - Bots */


 * 1) 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 */


 * 1) 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%;

}


 * 1) discord-widget .widget-members-online {

color: #8a8e94;

font-weight: 600;

margin-bottom: 12px;

text-transform: uppercase;

}


 * 1) 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;

}


 * 1) 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;

}


 * 1) discord-widget .widget-member:nth-child(7n-1) .widget-member-name,


 * 1) discord-widget .widget-member:nth-child(7n) .widget-member-name,


 * 1) discord-widget .widget-member:nth-child(7n+1) .widget-member-name {

padding: 0 32px 0 8px;

right: 4px;

}


 * 1) discord-widget .widget-member:hover .widget-member-name {

display: flex;

}


 * 1) 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;

}


 * 1) discord-widget .widget-member:nth-child(7n-1) .widget-member-name,


 * 1) discord-widget .widget-member:nth-child(7n) .widget-member-name,


 * 1) discord-widget .widget-member:nth-child(7n+1) .widget-member-name {

padding: 0 32px 0 8px;

right: 4px;

}


 * 1) discord-widget .widget-member:hover .widget-member-name {

display: flex;

}


 * 1) 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;

}


 * 1) discord-widget .widget-member-avatar {

margin-right: 4px;

position: relative;

}


 * 1) discord-widget .widget-member:hover .widget-member-avatar {

z-index: 2;

}


 * 1) discord-widget .widget-member-avatar img {

border-radius: 50%;

height: 32px;

width: 32px;

border: 2px solid #883e97;

}


 * 1) discord-widget .widget-member-status {

border-radius: 3px;

bottom: 3px;

height: 8px;

position: absolute;

right: 3px;

width: 8px;

}


 * 1) discord-widget .widget-member-status-online {

background-color: #43b581;

}


 * 1) discord-widget .widget-member-status-idle {

background-color: #faa61a;

}


 * 1) discord-widget .widget-member-status-offline {

background-color: #747f8d;

}


 * 1) discord-widget .widget-member-status-dnd {

background-color: #f04747;

}


 * 1) discord-widget .widget-icon {

background-color: transparent;

background-size: 16px 16px;

display: inline-block;

height: 16px;

width: 16px

}


 * 1) discord-widget .widget-icon + .widget-icon {

margin-left: 8px;

}

/* Widget Header Color Change */


 * 1) discord-widget .widget-header {

-ms-flex-align: center;

-ms-flex-negative: 0;

-webkit-box-align: center;

align-items: center;

background-color: darkorange;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

flex-shrink: 0;

padding: 20px;

}


 * 1) discord-widget .widget-header .widget-header-count {

-ms-flex: 1;

-webkit-box-flex: 1;

flex: 1;

text-align: right;

}