Discord Reactive Images (Fugi Overlay) CSS Skins

INSTALLATION.md

EN

Cliquez ici pour voir la version française

1. Login to Discord Reactive Images with your Discord account.
2. Change the config like this:
   • ☑ Include own image in group view (optionnal)
   • ⬜ Bounce Effect
   • ⬜ Cross-fade Effect
   • Dim own non-speaking image: Never
   • Dim others' non-speaking image: Never
   • Show own mute/deaf icons: Never
   • Show others' mute/deaf icons: Never
   • Show names: Server Nicknames (recommanded)
   • Image Spacing: 0%
3. On OBS, add a new Web Source with these parameters:
   • URL: https://reactive.fugi.tech/group
   • Width: As you want
   • Height: As you want
   • Custom CSS: Use one of the CSS Codes below depending on what you want

There are 4 different CSS Codes listed below. The first two use my Square look while the next two adopt the good old vanilla Discord Streamkit look.

There are two versions of each skin:

• One showing every people in your channel
• One showing only the people talking

Use the ones you want!

FR

Click here to go to the english version

1. Connectez-vous à Discord Reactive Images avec votre compte Discord.
2. Changez la section config comme suit :
   • ☑ Include own image in group view (optionnel)
   • ⬜ Bounce Effect
   • ⬜ Cross-fade Effect
   • Dim own non-speaking image : Never
   • Dim others' non-speaking image : Never
   • Show own mute/deaf icons : Never
   • Show others' mute/deaf icons : Never
   • Show names : Server Nicknames (recommandé)
   • Image Spacing : 0%
3. Sur OBS, ajoutez une nouvelle Source Web avec ces paramètres :
   • URL: https://reactive.fugi.tech/group
   • Largeur: Comme vous voulez
   • Hauteur: Comme vous voulez
   • CSS Personnalisé: Utilisez l'un des codes CSS ci-dessous selon ce l'affichage que vous souhaitez

Il y a 4 codes CSS différents listés ci-dessous. Les deux premiers sont dans le style de mon overlay carré, tandis que les deux suivants vous permettent d'avoir un affichage dans le style de l'overlay Streamkit Discord Streamkit classique.

Il y a deux versions pour chaque skin :

• Un qui montre tout le monde présent dans le vocal
• Un qui ne montre que les personnes qui sont en train de parler

Utilisez les skins que vous souhaitez !

Square Overlay - Speaking Only.css

body {
    /*/
    /* YOU CAN CHANGE THE SQUARES SIZE BY UPDATING THIS VALUE
    /*/
    --width: 120;
    
    --display-if-not-speaking: none;

    --widthPX: calc(var(--width) * 1px);
    --height: calc(var(--widthPX) * 1.20);
    --nameHeight: calc(var(--height) - var(--widthPX));
    --fontSize: calc((var(--widthPX) / 100) * 12);

    width: 100%;
    overflow: hidden;
}

div.h-screen {
    display: flex;
    padding: 0;
    align-items: bottom;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
	margin-top: 10px;
}

div[data-speaking] {
    display: list-item;
    list-style-type: none;
    height: calc(var(--height) + 8*1px);
    width: initial !important;
    margin: 0 5px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.8);
    position: relative;
    text-align: center;
}

div[data-speaking] div:first-child {
    background-color: black;
    display: block;
}

div[data-speaking] div:nth-child(2) {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: transparent;
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: initial;
    line-height: calc(var(--nameHeight) + 8 * 1px) !important;
    margin-left: 4px;
    margin-bottom: 0;
    font-weight: 600;
    width: calc(var(--widthPX) - 8 * 1px);
    height: calc(var(--nameHeight) + 8 * 1px);
    font-size: var(--fontSize) !important;
}

div[data-speaking] div:nth-child(2):after {
    content: '';
    position: absolute;
    width: var(--widthPX);
    height: calc(var(--nameHeight) + 8*1px);
    line-height: var(--nameHeight);
    background-color: rgba(30, 33, 36, 1);
    left: 0;
    opacity: 1;
    z-index: -1;
	border-radius: 0 0 5px 5px;
}

div[data-speaking="true"] div:nth-child(2):after {
	background-color: #3ba53b;
}

div[data-speaking] div canvas {
    height: var(--widthPX);
    width: 100%;
	border-radius: 5px 5px 0 0;
    border-width: 0;
}

div[data-speaking="true"] div canvas {
    opacity: 1;
    filter: grayscale(0%);
	box-sizing: border-box;
	outline: calc(var(--widthPX) / 25) solid #3ba53b;
	outline-bottom: 0 !important;
    outline-offset: calc(var(--widthPX) / 25 * -1);
}

div[data-speaking="false"] {
    border: 0;
    display: var(--display-if-not-speaking);
}

div[data-speaking="false"] div canvas {
    opacity: 0.5;
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
    border: 0;
}

Square Overlay - Staying.css

body {
    /*/
    /* YOU CAN CHANGE THE SQUARES SIZE BY UPDATING THIS VALUE
    /*/
    --width: 120;

    --display-if-not-speaking: list-item;

    --widthPX: calc(var(--width) * 1px);
    --height: calc(var(--widthPX) * 1.20);
    --nameHeight: calc(var(--height) - var(--widthPX));
    --fontSize: calc((var(--widthPX) / 100) * 12);

    width: 100%;
    overflow: hidden;
}

div.h-screen {
    display: flex;
    padding: 0;
    align-items: bottom;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
	margin-top: 10px;
}

div[data-speaking] {
    display: list-item;
    list-style-type: none;
    height: calc(var(--height) + 8*1px);
    width: initial !important;
    margin: 0 5px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.8);
    position: relative;
    text-align: center;
}

div[data-speaking] div:first-child {
    background-color: black;
    display: block;
}

div[data-speaking] div:nth-child(2) {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: transparent;
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: initial;
    line-height: calc(var(--nameHeight) + 8 * 1px) !important;
    margin-left: 4px;
    margin-bottom: 0;
    font-weight: 600;
    width: calc(var(--widthPX) - 8 * 1px);
    height: calc(var(--nameHeight) + 8 * 1px);
    font-size: var(--fontSize) !important;
}

div[data-speaking] div:nth-child(2):after {
    content: '';
    position: absolute;
    width: var(--widthPX);
    height: calc(var(--nameHeight) + 8*1px);
    line-height: var(--nameHeight);
    background-color: rgba(30, 33, 36, 1);
    left: 0;
    opacity: 1;
    z-index: -1;
	border-radius: 0 0 5px 5px;
}

div[data-speaking="true"] div:nth-child(2):after {
	background-color: #3ba53b;
}

div[data-speaking] div canvas {
    height: var(--widthPX);
    width: 100%;
	border-radius: 5px 5px 0 0;
    border-width: 0;
}

div[data-speaking="true"] div canvas {
    opacity: 1;
    filter: grayscale(0%);
	box-sizing: border-box;
	outline: calc(var(--widthPX) / 25) solid #3ba53b;
	outline-bottom: 0 !important;
    outline-offset: calc(var(--widthPX) / 25 * -1);
}

div[data-speaking="false"] {
    border: 0;
    display: var(--display-if-not-speaking);
}

div[data-speaking="false"] div canvas {
    opacity: 0.5;
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
    border: 0;
}

Vanilla Discord - Speaking Only.css

body {
    /*/
    /* YOU CAN CHANGE THE SIZE OF THE ENTRIES BY UPDATING THIS VALUE
    /*/
    --height: 80px;
    
    --display-if-not-speaking: none;
    
    --transform: calc(var(--height)/3.5);
    --font-size: calc(var(--height)/5);
    --border: calc(var(--height)/20);
    --avatar-margin-right: calc(var(--border) + 5px);
    --top-margin: 50px;
}

div.h-screen {
    padding: 0px 0%;
    justify-content: initial !important;
    flex-direction: column !important;
    margin-block-start: var(--top-margin);
    margin-block-end: 1.5em;
}

div[data-speaking] {
    display: list-item;
    list-style-type: none;
    height: var(--height);
    margin-bottom: 8px !important;
    width: initial !important;
    max-width: initial !important;
    padding-left: 15px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

div[data-speaking] div:first-child {
    float: left;
    display: block !important;
    margin-right: var(--avatar-margin-right) !important;
}

div[data-speaking] div:nth-child(2) {
    transform: translate(0px, var(--transform));
    background-color: rgba(30, 33, 36, 0.95);
    padding: 4px 6px;
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: initial;
    font-size: var(--font-size) !important;
    line-height: var(--transform) !important;
    font-weight: 600;
    border-radius: var(--border);
    width: fit-content;
}

div[data-speaking] div canvas {
    border: var(--border) solid transparent;
    border-radius: 50%;
    height: var(--height);
    width: var(--height);
    float: left;
    background-color: black;
}

div[data-speaking="true"] div canvas {
    border-color: #3ba53b;
}

div[data-speaking="false"] {
    display: var(--display-if-not-speaking);
}

Vanilla Discord - Staying.css

body {
    /*/
    /* YOU CAN CHANGE THE SIZE OF THE ENTRIES BY UPDATING THIS VALUE
    /*/
    --height: 80px;
    
    --display-if-not-speaking: list-item;
    
    --transform: calc(var(--height)/3.5);
    --font-size: calc(var(--height)/5);
    --border: calc(var(--height)/20);
    --avatar-margin-right: calc(var(--border) + 5px);
    --top-margin: 50px;
}

div.h-screen {
    padding: 0px 0%;
    justify-content: initial !important;
    flex-direction: column !important;
    margin-block-start: var(--top-margin);
    margin-block-end: 1.5em;
}

div[data-speaking] {
    display: list-item;
    list-style-type: none;
    height: var(--height);
    margin-bottom: 8px !important;
    width: initial !important;
    max-width: initial !important;
    padding-left: 15px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

div[data-speaking] div:first-child {
    float: left;
    display: block !important;
    margin-right: var(--avatar-margin-right) !important;
}

div[data-speaking] div:nth-child(2) {
    transform: translate(0px, var(--transform));
    background-color: rgba(30, 33, 36, 0.95);
    padding: 4px 6px;
    -webkit-text-stroke-width: 0px;
    -webkit-text-stroke-color: initial;
    font-size: var(--font-size) !important;
    line-height: var(--transform) !important;
    font-weight: 600;
    border-radius: var(--border);
    width: fit-content;
}

div[data-speaking] div canvas {
    border: var(--border) solid transparent;
    border-radius: 50%;
    height: var(--height);
    width: var(--height);
    float: left;
}

div[data-speaking="true"] div canvas {
    border-color: #3ba53b;
}

div[data-speaking="false"] {
    display: var(--display-if-not-speaking);
}

Skins Preview

Vanilla Discord

Not talking

Not shown if you use the "Speaking Only" version / Pas affiché si vous utilisez la version "Speaking Only"

Talking

Square Overlay

Not talking

Not shown if you use the "Speaking Only" version / Pas affiché si vous utilisez la version "Speaking Only"

Talking