/* ==UserStyle==
@name            Kindroid Custom Avatars in Groupchat
@description     Customize your avatars in Kindroid's groupchat
@version         1.0.1
@author          BreatFR (https://breat.fr)
@namespace       https://breat.fr
@homepageURL     https://usercssjs.breat.fr/k/kindroid
@updateURL       https://code.breat.fr/k/kindroid/css/pc-custom-avatars-in-groupchat.user.css
@supportURL      https://discord.gg/fSgDHmekfG
@license         BY-NC-ND; https://creativecommons.org/licenses/by-nc-nd/4.0/
@preprocessor    stylus

@var    text       avatargroupsizeaddon     "Avatar group size addon"   162px
==/UserStyle== */

/* ==Credits==
Website         https://breat.fr
Bluesky			https://bsky.app/profile/breatfroff.bsky.social
facebook        https://www.facebook.com/breatfroff
mastodon        https://mastodon.social/@breat_fr
telegram        https://t.me/breatfr
vk              https://vk.com/breatfroff
X (twitter)     https://x.com/breatfroff
==/Credits== */

/* ==Support==
brave Creators  https://publishers.basicattentiontoken.org/c/breatfr
ko-fi           https://ko-fi.com/breatfr
PayPal          https://paypal.me/breat
==/Support== */


/* ==BEFORE USE==
This addon theme assumes you are already using my main PC theme https://gitlab.com/breatfr/kindroid/-/raw/main/css/pc_latest.user.css.

I separate this addon in 3 sections (look on left side in Sections):
- 1st section is some code needed to make this theme works, so DON'T TOUCH IT.
- 2nd section for when you DON'T use "Avatar rectangle" theme option in main theme.
- 3rd section for when you use "Avatar rectangle" theme option in main theme.
==/BEFORE USE== */


/* ==HOW TO USE==
- Replace in the correct part depending if you use avatar rectangle or not KIN_NAME_X with the name of your kin (case sensitive). Each KIN_NAME_X = 1 different kin.
    - example: img[alt="KIN_NAME_1"] becomes img[alt="Yoona"]

- Replace URL_TO_IMG_X with the link to your wanted avatar image.
    - example: background: url("URL_TO_IMG_1") becomes background: url("https://example.com/images/image.jpg")
==/HOW TO USE== */

@-moz-document url-prefix("https://kindroid.ai/groupchat/") {
/* ==========================================================
    Required code to work, DON'T TOUCH IT
========================================================== */
    :root {
        --avatargroupsizeaddon: avatargroupsizeaddon;
        --avatarrectangleheight: calc((var(--avatargroupsizeaddon) * 13) / 9);
    }

    .css-yhhl9h > div:nth-of-type(1),
	.css-yhhl9h > div:nth-of-type(1) > div,
	.css-yhhl9h > div:nth-of-type(1) > div img,
	.css-yhhl9h > div:nth-of-type(1) > div video {
		max-width: avatargroupsizeaddon !important;
        min-width: avatargroupsizeaddon !important;
	}
}

@-moz-document url-prefix("https://kindroid.ai/groupchat/") {
/* ==========================================================
    Without Avatar rectangle main theme option
========================================================== */
   img[alt="KIN_NAME_1"] {
        background: url("URL_TO_IMG_1") center center / cover no-repeat  !important;
        height: 0 !important;
        padding: avatargroupsizeaddon 0 0 avatargroupsizeaddon !important;
        width: 0 !important;
    }

    img[alt="KIN_NAME_2"] {
        background: url("URL_TO_IMG_2") center center / cover no-repeat  !important;
        height: 0 !important;
        padding: avatargroupsizeaddon 0 0 avatargroupsizeaddon !important;
        width: 0 !important;
    }

    img[alt="KIN_NAME_3"] {
        background: url("URL_TO_IMG_3") center center / cover no-repeat  !important;
        height: 0 !important;
        padding: avatargroupsizeaddon 0 0 avatargroupsizeaddon !important;
        width: 0 !important;
    }

    img[alt="KIN_NAME_4"] {
        background: url("URL_TO_IMG_4") center center / cover no-repeat  !important;
        height: 0 !important;
        padding: avatargroupsizeaddon 0 0 avatargroupsizeaddon !important;
        width: 0 !important;
    }

    img[alt="KIN_NAME_5"] {
        background: url("URL_TO_IMG_5") center center / cover no-repeat  !important;
        height: 0 !important;
        padding: avatargroupsizeaddon 0 0 avatargroupsizeaddon !important;
        width: 0 !important;
    }

    img[alt="KIN_NAME_6"] {
        background: url("URL_TO_IMG_6") center center / cover no-repeat  !important;
        height: 0 !important;
        padding: avatargroupsizeaddon 0 0 avatargroupsizeaddon !important;
        width: 0 !important;
    }

    img[alt="KIN_NAME_7"] {
        background: url("URL_TO_IMG_7") center center / cover no-repeat  !important;
        height: 0 !important;
        padding: avatargroupsizeaddon 0 0 avatargroupsizeaddon !important;
        width: 0 !important;
    }

    img[alt="KIN_NAME_8"] {
        background: url("URL_TO_IMG_8") center center / cover no-repeat  !important;
        height: 0 !important;
        padding: avatargroupsizeaddon 0 0 avatargroupsizeaddon !important;
        width: 0 !important;
    }

    img[alt="KIN_NAME_9"] {
        background: url("URL_TO_IMG_9") center center / cover no-repeat  !important;
        height: 0 !important;
        padding: avatargroupsizeaddon 0 0 avatargroupsizeaddon !important;
        width: 0 !important;
    }

    img[alt="KIN_NAME_10"] {
        background: url("URL_TO_IMG_10") center center / cover no-repeat  !important;
        height: 0 !important;
        padding: avatargroupsizeaddon 0 0 avatargroupsizeaddon !important;
        width: 0 !important;
    }
}

@-moz-document url-prefix("https://kindroid.ai/groupchat/") {
/* ==========================================================
    With Avatar rectangle main theme option
========================================================== */
    img[alt="KIN_NAME_1"] {
        background: url("URL_TO_IMG_1") center center / cover no-repeat !important;
        height: 0 !important;
        padding: var(--avatarrectangleheight) 0 0 avatargroupsizeaddon !important;
        width: 0 !important;
    }

    img[alt="KIN_NAME_2"] {
        background: url("URL_TO_IMG_2") center center / cover no-repeat  !important;
        height: 0 !important;
        padding: var(--avatarrectangleheight) 0 0 avatargroupsizeaddon !important;
        width: 0 !important;
    }

    img[alt="KIN_NAME_3"] {
        background: url("URL_TO_IMG_3") center center / cover no-repeat  !important;
        height: 0 !important;
        padding: var(--avatarrectangleheight) 0 0 avatargroupsizeaddon !important;
        width: 0 !important;
    }

    img[alt="KIN_NAME_4"] {
        background: url("URL_TO_IMG_4") center center / cover no-repeat  !important;
        height: 0 !important;
        padding: var(--avatarrectangleheight) 0 0 avatargroupsizeaddon !important;
        width: 0 !important;
    }

    img[alt="KIN_NAME_5"] {
        background: url("URL_TO_IMG_5") center center / cover no-repeat  !important;
        height: 0 !important;
        padding: var(--avatarrectangleheight) 0 0 avatargroupsizeaddon !important;
        width: 0 !important;
    }

    img[alt="KIN_NAME_6"] {
        background: url("URL_TO_IMG_6") center center / cover no-repeat  !important;
        height: 0 !important;
        padding: var(--avatarrectangleheight) 0 0 avatargroupsizeaddon !important;
        width: 0 !important;
    }

    img[alt="KIN_NAME_7"] {
        background: url("URL_TO_IMG_7") center center / cover no-repeat  !important;
        height: 0 !important;
        padding: var(--avatarrectangleheight) 0 0 avatargroupsizeaddon !important;
        width: 0 !important;
    }

    img[alt="KIN_NAME_8"] {
        background: url("URL_TO_IMG_8") center center / cover no-repeat  !important;
        height: 0 !important;
        padding: var(--avatarrectangleheight) 0 0 avatargroupsizeaddon !important;
        width: 0 !important;
    }

    img[alt="KIN_NAME_9"] {
        background: url("URL_TO_IMG_9") center center / cover no-repeat  !important;
        height: 0 !important;
        padding: var(--avatarrectangleheight) 0 0 avatargroupsizeaddon !important;
        width: 0 !important;
    }

    img[alt="KIN_NAME_10"] {
        background: url("URL_TO_IMG_10") center center / cover no-repeat  !important;
        height: 0 !important;
        padding: var(--avatarrectangleheight) 0 0 avatargroupsizeaddon !important;
        width: 0 !important;
    }
}