VERSION 3 !

Ajouts

1, 2, 3 nouveaux plugins !

Wombat
Visionneuse rapide de profil, ouvre un volet flottant pour montrer le profil sans avoir à ouvrir de nouvelle page.
Réalisé par Monomer

Edison
Switch dark/light mode, pour des thèmes aux préférences de chacun.
Réalisé par Monomer

Messenger
Message instantanée, modernisé pour le Blank Theme qui permet d'échanger dans une application aux inspirations Discord.
Réalisé par AngeTuteur, designé par kim/geniuspanda

Modifications

Nouvelle palette de couleur pour deux thèmes

CSS pour Switcheroo allégé.

Code:

/*** ------------------------------- ***/
/*** SWITCHEROO - Par Monomer ------ ***/
/*** Gestionnaire de multicompte --- ***/

:root {
    --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.43, 0.09, 0.38, 2.56);
}

/* BARRE SWITCHEROO --- */
/* BARRE --- */
.switcheroo {
    color: var(--textColor);
    margin-top: 60px;
}

/* Positionnement des ronds */
.switcheroo__squircles {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 15px;
}

/* AFFICHAGE DES COMPTES ---*/

/* Rond */
.switcheroo__squircle {
    position: relative;
    display: grid;
    place-items: center;
    background-color: var(--neutralDark);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    outline: 5px solid transparent;
    transition: border-radius 128ms var(--ease);
}

/* Rond au survol */
.switcheroo__squircle:hover {
    outline-color: var(--neutralDarker);
    border-radius: 8px;
}

.switcheroo__squircle:hover img {
    border-radius: 8px;
}

/* Conteneur de l'avatar */
.switcheroo__avatar {
    width: 100%;
    aspect-ratio: 1/1;
}

/* Image de l'avatar */
.switcheroo__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    transition: border-radius 128ms var(--ease);
    position: relative;
}

/* Avatar du compte connecté */
.switcheroo__squircle.active,
.switcheroo__squircle.active img {
    outline-color: var(--neutralDark);
    cursor: default;
}

/* AJOUTER UN COMPTE ---*/
/* button : ajouter un compte */
.switcheroo__squircle--button {
    transition: border-radius 128ms var(--ease);
    color: var(--contrastLight);
}

/* icon plus */
.switcheroo__squircle--button i {font-size: 19px;}

.switcheroo__squircle--button:hover {color: var(--accentClr);}

/* Bouton de suppression */
.switcheroo__delete {
    display: grid;
    place-items: center;
    position: absolute;
    width: 16px;
    height: 16px;
    top: -7px;
    right: -7px;
    border-radius: 50%;
    background-color: var(--accentClr);
    transform: scale(0);
    opacity: 1;
    transition: transform 128ms var(--ease), opacity 64ms var(--ease);
    cursor: pointer;
    color: var(--neutral);
    line-height: 0;
}

.switcheroo__squircle:hover .switcheroo__delete {
    opacity: 1;
    transform: scale(1);
}

/* TOOLTIP - INFOBULLE DU PSEUDO ---*/

/* Conteneur du pseudo */
.switcheroo__popper {
    background-color: var(--neutralDarker);
    padding: 0.30rem 1rem;
    position: absolute;
    width: -webkit-max-content;
    width: max-content;
    border-radius: 5px;
    z-index: 0;
    opacity: 0;
    transition: opacity 64ms var(--ease), transform 128ms var(--ease-bounce);
    pointer-events: none;
    color: var(--textColor);
    left: 155%;
    top: 50%;
    transform-origin: left;
    transform: translateY(-50%) scale(0.98);
}

/* Flèche tooltip */
.switcheroo__popper:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--neutralDarker);
    z-index: -1;
    left: -3px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    border-radius: 2px;
}

.switcheroo__squircle:hover .switcheroo__popper {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}


/* LOGO --- retirez display:none pour retrouver le logo */
.switcheroo__logo,
.switcheroo__divider {display: none}


/* MODAL : FENETRE DE CONNEXION --- */

/* Fond de l'affichage de connexion */
.monomer-overlay {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: 0.2s opacity ease;
    background: rgba(0, 0, 0, 0.2);
}

/* Boîte de connexion */
.monomer-modal {
    position: fixed;
    z-index: 999;
    top: 50%;
    left: 50%;
    opacity: 0;
    width: 94%;
    padding: 30px;
    transition: 0.2s opacity ease;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background: var(--neutral);
    padding: 50px;
    box-shadow: var(--shadowBox);
}


/* Champs à remplir */
.switcheroo__form-row {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* Nom du champ */
.switcheroo__form-label {
    margin-bottom: 8px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Zone de texte */
.switcheroo__form-input {
    padding: 6px!important;
    border-radius: 4px;
    width: 100%;
    background-color: var(--neutral);
    color: var(--contrastLight);
    cursor: text;
}

/* Bouton de connexion */
.switcheroo__form-button {
    border-radius: 8px;
    padding: 4px 10px 5px;
    border: none;
    outline: none;
    box-shadow: none;
    text-transform: uppercase;
    font-size: 14px;
    align-self: center;
    background-color: var(--accentClr);
    cursor: pointer;
    color: var(--neutral);
    font-weight: 600;
    margin-top: 10px;
}

.switcheroo__form-button:hover {
    background: var(--contrastLight);
}

.monomer-modal.monomer-open,
.monomer-overlay.monomer-open {
    opacity: 1;
}

/* Fermer la boîte de connexion */
.monomer-close {
    font-size: 16px;
    line-height: 12px;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    color: var(--textColor);
    border: 0;
    outline: none;
    background: var(--contrastLighter);
    border-radius: 4px;
    padding: 0;
    padding-left: 1px;
}

.monomer-close:hover {
    background: var(--contrastLight);
}

CSS pour la structure de FA (peu modifiable) déplacé dans le template overall_header pour plus de visibilité.

Ajout de class pour l'intégration de Messenger (voir commentaires)

Correctifs

Correction structure des posts

Boutons de suppression des notifications

Correction de l'affichage des participant

Code:

/* PARTICIPANTS DU SUJET ---*/

/* Conteneur de la liste des participants au sujet */
.poster-list {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -10px;
    margin-bottom: 20px;
}

/* Avatar du participant*/
.poster {
    background: var(--poster-avatar);
    height: 30px;
    width: 30px;
    border-radius: 100%;
    margin-left: -8px;
    border: 2px solid var(--neutralDark);
    background-size: cover;
    background-position: center;
}

/* Lien de renvoi vers son profil */
.poster a {
    display: block;
    height: 100%;
}

/* Nombre de participants */
.poster-count {
    margin-left: 8px;
}

.poster-more-list {
    display: none;
}

.poster-more {
    display: grid;
    place-items: center;
    position: relative;
}

.poster-more:hover .poster-more-list {
    display: block;
    position: absolute;
    top: 29px;
    width: 150px;
    background: var(--neutralDarker);
    padding: 10px;
    border-radius: 5px;
}

Me soutenir

Je sais que je dois souvent me répéter mais après autant d'heure de travail, un petit Ko-Fi pour soutenir mon travail me motive à toujours continuer et vous proposer plus de chose.

Merci à ceux qui l'ont déjà fait et qui m'encourage à chaque nouveauté !