CustomDiscordIntegrator.js/StyleLight.css

/\* 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 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. \*/

#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;

}

#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 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 - Moderators \*/

#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 \*/

#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: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;

}

/\* Widget Header Color Change \*/

#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;

}

#discord-widget .widget-header .widget-header-count {

    -ms-flex: 1;

    -webkit-box-flex: 1;

    flex: 1;

    text-align: right;

}