Skip to content

Kindroid responsive + customizations v3.xx by breat

Mirrored from https://gitlab.com/breatfr/kindroid/-/raw/main/css/kindroid_wide_screen_v3.xx.user.css

Screenshot of Kindroid responsive + customizations v3.xx

Details

Authorbreat

LicenseBY-NC-ND; https://creativecommons.org/licenses/by-nc-nd/4.0/

Categorykindroid.ai

Created

Updated

Size162 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Kindroid website is more suitable for wide screens + add customizations (theme) + add new features (scripts).

Notes

Support me on:

More previews

Changelog

https://gitlab.com/breatfr/kindroid/-/blob/main/CHANGELOG.md

FAQs

https://gitlab.com/breatfr/kindroid/-/blob/main/FAQs.md

Help / comments / ask etc...

https://discord.gg/fSgDHmekfG

Customizations available in the theme

chat page

  • actions text style
    • default
    • asterisks
    • asterisks + bold
    • asterisks + Bold + no italic
    • asterisks + Bold + no italic + same color
    • bold
    • bold + no italic
    • bold + no italic + same color
    • no italic
    • same color
  • actions text color choice
  • avatar choice
  • avatar position (choose regarding of the size you use, isn't automatic)
    • avatar position large middle
    • avatar position large top
    • avatar position large bottom
    • avatar position small middle
    • avatar position small top
    • avatar position small bottom
    • avatar custom position
  • avatar chat style (require avatar choices)
  • avatar circle
  • avatar rectangle
    • avatar rectangle
    • avatar rectangle height customization
    • avatar size
      • large
      • small
      • hidden
      • custom
    • avatar hoverzoom
      • enabled (default)
      • disabled
    • background choice
      • hearts background (default)
      • no background
      • custom background
    • background color choice (can be use with background choice too)
    • blur bubbles content and image you send to ai to share in privacy
    • bubbles font color of your choice
    • bubbles font size of your choice
    • hide or not names in bubbles (layout will change depending of this too)
    • kin's bubbles background color of your choice **OR** kin bubbles background image of your choice
    • our bubbles background color of your choice **OR** our bubbles background image of your choice
    • system bubbles style (layout will change depending of this too)
      • left (like v2)
      • dark (normal position but dark)
    • textarea font size of your choice

    selfies page

    • background choice
      • hearts background (default)
      • no background
      • custom background
    • background color choice (can be use with background choice too)
    • blur feature on images
    • image border on hover
      • enabled (default)
      • disabled

    voicecall page

    • avatar choice
    • background choice
      • hearts background (default)
      • no background
      • custom background
    • background color choice (can be use with background choice too)

    faqs page

    • background choice
      • hearts background (default)
      • no background
      • custom background
    • background color choice (can be use with background choice too)

    legal page

    • background choice
      • hearts background (default)
      • no background
      • custom background
    • background color choice (can be use with background choice too)

Userscripts features

chat page

  • auto confirm regenerate
  • add autofocus textarea (chat page only)
  • blur bubbles content and image you send to ai to share in privacy (chat page and mobile script version only)

selfies page

  • add a checkbox to open a prompt generator
  • add a checkbox to see all images
  • add a button to download all images (use it after enable see all images)

How to install in few steps

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name            Kindroid responsive + customizations v3.xx
@description     Kindroid website is more suitable for wide screens + add customizations (theme) + add new features (scripts).
@version         3.45.4
@author          BreatFR (https://breat.fr)
@namespace       https://gitlab.com/breatfr
@homepageURL     https://gitlab.com/breatfr/kindroid
@supportURL      https://discord.gg/fSgDHmekfG
@license         BY-NC-ND; https://creativecommons.org/licenses/by-nc-nd/4.0/
@preprocessor    stylus

@var select     actionsstyle                        "Actions texts style" {
    "Default": "actionsdefault",
    "Asterisks": "asterisks",
    "Asterisks + bold": "asterisksbold",
    "Asterisks + bold + no italic": "asterisksboldnoitalic",
    "Bold": "bold",
    "Bold + no italic": "boldnoitalic",
    "No italic": "noitalic"
}
@var color      actionscolor                        "Actions texts color choice"            rgb(136, 136, 136)
@var checkbox   avatarchoice                        "Avatar choice"                         0
@var text       avatarchoiceurl                     "Avatar choice URL"                     "URL between quotes"
@var select     avatarposition                      "Avatar position" {
    "Large Middle": "avatarlargemiddle",
    "Large Top": "avatarlargetop",
    "Large Bottom": "avatarlargebottom",
    "Small Middle": "avatarsmallmiddle",
    "Small Top": "avatarsmalltop",
    "Small Bottom": "avatarsmallbottom",
}
@var checkbox   avatarchat                          "Avatar chat mode (for chat page require: Avatar choice & Avatar choice for us, System bubbles Dark is recommanded, for group chat page require Avatar choice for us & Avatar Rectangle)"                           0
@var checkbox   ouravatarchoice                     "Avatar choice for us"                  0
@var text       ouravatarchoiceurl                  "Avatar choice for us URL"              "URL between quotes"
@var checkbox   avatarcircle                        "Avatar circle"                         0
@var checkbox   avatarcustomposition                "Avatar custom position"                0
@var text       avatarcustompositionvalue           "Avatar custom position value"          12vh
@var select     avatarsize                          "Avatar size" {
    "Large": "avatarlarge",
    "Small": "avatarsmall",
    "Hidden": "avatarhidden"
}
@var checkbox   avatarcustomsize                    "Avatar custom size"                    0
@var text       avatarcustomsizevalue               "Avatar custom size value"              512px
@var checkbox   avatarrectangle                     "Avatar rectangle"                      1
@var checkbox   avatarrectanglecustomheight         "Avatar rectangle custom height"        0
@var text       avatarrectanglecustomheightvalue    "Avatar custom height value"            256px
@var checkbox   avatarzoom                          "Avatar hoverzoom"                      0
@var select     avataron                            "Avatar on" {
    "Left side": "leftside",
    "Right side": "rightside"
}
@var select     bgchoice                            "Background choice" {
    "❤️ Hearts": "heartbg",
    "⬜ None": "nobg",
    "❔ Custom": "custombg"
}
@var color      bgcolor                             "Background color"                      #101010
@var text       custombgurl                         "Background URL"                        "URL between quotes"
@var checkbox   blurcontent                         "Blur content"                          0
@var color      bubblescolor                        "Bubbles font color"                    #cbcbcb
@var text       fontsize                            "Custom font size"                      1.2rem
@var checkbox   gradientregenerate                  "Gradient regenerate icon"              1
@var checkbox   hidenames                           "Hide names in bubbles"                 1
@var checkbox   manuallyedited                      "Manually edited"                       1
@var color      kinbubblesbgcolor                   "Kin bubbles background color"          rgb(33, 27, 25)
@var text       kinbubblesbgurl                     "Kin bubbles background URL"            "URL between quotes"
@var color      ourbubblesbgcolor                   "Our bubbles background color"          rgb(27, 28, 30)
@var text       ourbubblesbgurl                     "Our bubbles background URL"            "URL between quotes"
@var select     systembubblesstyle                  "System bubbles style" {
    "Left": "systembubblesleft",
    "Dark": "systembubblesdark",
    "Dark Wide": "systembubblesdarkwide"
}
@var checkbox   iconshover                          "Icons hover"                           1
@var checkbox   hidetrialbar                        "Hide trial bar"                        1

@var checkbox   imageborder                         "Image border on hover"                 1
@var checkbox   requestimage                        "Request image button at top"           1
@var checkbox   continueconvauto                    "Replace Continue/Pause conversation in group chat by an icon (only for automatic mode)"           1
@var checkbox   continueconvmanual                  "Optimize the avatar list in group chat for wide screen (only for manual mode)"           0
@var checkbox   continueconvmanualcenter            "Optimize the avatar list in group chat for wide screen and center them (only for manual mode)"           0
@var checkbox   modalsborder                        "Modals border"                         1
@var checkbox   biggerscreensharing                 "Bigger Screen Sharing (don't use if captions enabled)"                 0
@var checkbox   nosharring                          "No sharring"                           0
@var checkbox   noscrollbars                        "No scrollbars"                         1
@var checkbox   notranslateicon                     "No translate icon"                     0
@var checkbox   nodiscord                           "No discord banner"                     0
@var checkbox   nollm                               "No LLM icon in header"                 0
==/UserStyle== */

/* ==Credits==
Website         https://breat.fr
facebook        https://www.facebook.com/breatfroff
mastodon        https://mastodon.social/@breat_fr
vk              https://vk.com/breatfroff
X (twitter)     https://x.com/breatfroff
==/Credits== */

/* ==Support==
ko-fi           https://ko-fi.com/breatfr
PayPal          https://paypal.me/breat
==/Support== */

@-moz-document domain("kindroid.ai") {
/* ===================================================================================================================================
    Whole kindroid domain
=================================================================================================================================== */
    /* Versions */
    :root {
        --themeversionpc: 'TPC v3.45.4';
        --themeversionmobile: 'TM v1.0.6';
        --customavatarsgroupchat: 'CAG v1.0.0';
        --chatversionpc: 'CPC v2.0.12';
        --chatversionmobile: 'CM v2.0.12';
        --selfiesversionpc: 'SPC v2.0.1';
        --selfiesversionmobile: 'SM v2.0.1';
        --notepadversion: 'NP v2.0.4';
        --trversion: 'TR v2.0.2';
        --tvversion: 'TV v2.0.3';
        --author: ' by BreatFR (https://breat.fr)';
        --install1: ' usercssjs.breat.fr ';
        --install2: ' gitlab.com/breatfr/kindroid ';
        --space: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
        --support1: ' ko-fi.com/breatfr ';
        --support2: ' paypal.me/breat ';
        --fontsize: fontsize;
    }

    @media screen and (min-width: 900px) {
        .css-x3odei::after,
        .css-z0osps::after {
            background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            content: "Versions (hover to show)";
            content: var(--themeversionpc) ' · ' var(--themeversionmobile)' · ' var(--customavatarsgroupchat) ' · ' var(--chatversionpc) ' · ' var(--chatversionmobile) ' · ' var(--selfiesversionpc) ' · ' var(--selfiesversionmobile) ' · ' var(--notepadversion) ' · ' var(--trversion) ' · ' var(--tvversion) var(--author) '\A''Install: ' url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_breat.fr.png") var(--install1) url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_gitlab.png") var(--install2) var(--space) ' Support me: ' url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_ko-fi.png") var(--support1) url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_paypal.png") var(--support2);
            display: block;
            font-family: var(--chakra-fonts-PoppinsRegular);
            font-size: 1.2rem;
            left: 50%;
            position: absolute;
            text-align: center;
            top: 49%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            width: 100%;
            white-space: pre-line;
        }

        @-moz-document url-prefix() {
            /* Fix for firefox */
            .css-x3odei::after,
            .css-z0osps::after {
                background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
                background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
                background-clip: text;
                color: transparent;
                display: inline-block;
                font-family: var(--chakra-fonts-PoppinsRegular);
                font-size: 1.2rem;
                left: 0;
                position: absolute;
                text-align: center;
                top: 0;
                transform: translate(0, 0);
                width: 100%;
                white-space: ...

Reviews

No reviews yet.