Skip to content

Kindroid AI: Wide screen v2 by breat

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

Screenshot of Kindroid AI: Wide screen v2

Details

Authorbreat

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

Categorykindroid.ai

Created

Updated

Size19 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Notes

No more update for this version, please look the v3 here.

Support me on:

Changelog

Some modifications other than the dark theme include in my theme:

  • on whole site:

    • no scrollbars anymore
  • on chat page:

    • remove header
    • put menu and selfie link at the bottom right next to the textarea
    • put the avatar bigger
    • remove names in bubbles to save space
    • put chat and avatar on whole page
  • on selfie page:

    • put the request button at the top
    • put thumbnails on whole page

How to use in few steps on computer

  1. Install Stylus browser extension

  2. Go on Kindroid AI: Wide screen on UserStyles.world website and click on Install under the preview picture.

  3. To update the theme, open the Stylus Management window and click on Check for update and follow the instructions or just wait 24h to automatic update

PS: You can modify the theme but if you'll do, no more automatic update.

  1. Enjoy :)

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 AI: Wide screen
@version      20241003.14.09
@namespace    https://userstyles.world/user/breat
@description  Put Kindroid on whole page for screen with width 1440px and more.
@author       breat
@license      No License
==/UserStyle== */

@-moz-document domain("kindroid.ai") {
/* === Credits ===
Created by      BreatFR
Creatied on     2023/08/27
Version         2.20
@description    Put Kindroid on whole page for screen with width 990px and more.
@namespace      userstyles.world/user/breat
Changelog       https://gitlab.com/breatfr/kindroid/-/blob/main/CHANGELOG.md
@SupportURL     https://discord.gg/fSgDHmekfG
@license        BY-NC-ND; https://creativecommons.org/licenses/by-nc-nd/4.0/
Website         https://breat.fr
facebook        https://www.facebook.com/breatfroff
mastodon        https://mastodon.social/@breat_fr
telegram        https://t.me/+5ZLC2qntf6xmYmI0
vk              https://vk.com/breatfroff
X (twitter)     https://x.com/breatfroff
=== Credits === */

/* Hide scrollbars */
.css-1lbk8wf,
:root ::-webkit-scrollbar {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    width: 0px;
}    
::-webkit-scrollbar {
    display: none;
    width: 0px;
}

/* Loading bar */
#nprogress .bar {
    background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
}

/* ========================================================================
   Header and menu
======================================================================== */
/* Header background color */
.css-x3odei {
    background-color: var(--chakra-colors-primaryBlack) !important;
}

/* Put Log out in orange */
.css-j7qwjs > div:nth-child(10) > p {
    color: var(--chakra-colors-orange);
}

/* Put Biling in yellow */
.css-1fu7n7b > div > p {
    color: var(--chakra-colors-yellow-400);
}

/* Put FAQs and Terms & Privacy in blue */
.css-j7qwjs > div:nth-child(8) > p,
.css-j7qwjs > div:nth-child(9) > p {
    color: var(--chakra-colors-blue-400);
}

/* Put email and timer in white */
.css-1dodils,
.css-1g7lxfg {
    color: var(--chakra-colors-secondaryWhite);
    margin-top: 10px;
}

/* Put Upload Photo text in custom avatar in white to be more visible */
.css-1jcj2pk {
    color: white;
}

/* Billing error box */
.css-dixmdy {
    background-color: #161616;
    border: 1px solid #6C6C6C;
    border-radius: 10px;
    color: var(--chakra-colors-secondaryWhite);
}

/* ========================================================================
   Chat page
======================================================================== */
/* Add border to textarea when focus */
.css-ymugf1:focus {
    border: 0px;
    border-radius: 32px;
    box-shadow: 0 0 0 1px rgb(139, 109, 255), 0 0 0 2px rgb(254, 132, 132);
}
/* Remove the resize icon on textarea on chat page */
.css-ymugf1:not(:focus),
.css-ymugf1:focus {
    resize: none;
}
    
/* Hide voice counter and reduce button on avatar */
/* Text button */
.css-2bir3m,
/* Voice button */
.css-y0ybx5,
/* Reduce button */
.css-fk8dne {
    display: none;
}

/* Hide names in bubbles to save place */
.css-ppua9z,
.css-19hb772 {
    display: none;
}
.css-127w3cl {
    margin-left: 0px;
}

/* Put our name and text aligned on the right */
.css-19hb772,
.css-13683nx {
    align-items: end;
    text-align: right;
}

/* Modification of rounded corners for our bubbles */
.css-1j9xj7u {
    border-radius: 20px 8px 20px 20px;
}

/* Modification of rounded corners for AI bubbles */
.css-teti0a,
.css-1ulhpcc,
.css-1tg26k8,
.css-1t9c0mz {
    border-radius: 8px 20px 20px 20px;
}

/* Bigger text in bubbles and textarea */
.css-6obdga,
.css-1gi22a8,
.css-w2nlit {
    font-size: 20px;
}

/* Put a not allowed cursor on spinner, microphone icon, play button, picture generating when needed */
.chakra-spinner,
.css-zkr1dl,
.css-jy2vee,
.css-kjafn5 [disabled] + button {
    cursor: not-allowed;
}

/* Put Regenerate and Journal buttons inline */
.css-1lvpjll > div.chatScrollParent.css-735j5d > div.css-1lbk8wf > div:nth-child(20) > div.css-1jby15f {
    bottom: 100px;
    right: 10px;
    position: fixed;
}
.css-100dd8p {
    gap: 120px !important;
    flex-direction: row-reverse !important;
}

/* Heart background */
.css-1lvpjll {
    background: url(https://i.ibb.co/fYQkYyc/heart-pattern.png) var(--chakra-colors-secondaryBlack) fixed 100%;
}

/* Initial letter */
.css-70qvj9 {
    height: 0px;
}
.css-yhhl9h > .css-teti0a > .css-70qvj9 > .css-127w3cl,
.css-yhhl9h > .css-teti0a > .css-70qvj9 > .css-1yzcrgj {
    height: 36px;
    width: 36px;
    margin-left: -70px;
}
.css-yhhl9h {
    margin-left: 50px;
}
.css-qfa1mb {
    display: none;
}

/* Put Regenerate and Journal buttons on left side 
.css-100dd8p {
    bottom: 80px;
    flex-direction: row-reverse !important;
    gap: 80px;
    right: 73%;
    position: absolute;
} */

/* ========================================================================
   Selfie page
======================================================================== */
/* Wide selfie page */   
.css-1ivym2n,
.css-10ytma2 {
    max-width: 100%;
}
.css-13da5b {
    display: none;
}
.css-1dq4ssc {
    padding-bottom: 30px;
}
.css-1dq4ssc,
.css-2cd1of {
    gap: 20px;
    justify-content: center;
}
.css-1fltgj7 {
    padding: 0px 40px;
}
.css-fskrnz {
    width: 84vh;
}
.css-3vu8ng,
.css-kuf6b {
    height: auto;
    width: 290px;
}
.css-j8mh8q,
.css-mtk9ei {
    color: var(--chakra-colors-secondaryWhite);
    font-size: 18px;
}
.css-105olw3 {
    max-width: 96%;
}
/* Request selfie button */
.css-1ygmn3g {
    max-width: 1060px;
}

/* Load More button */
.css-dvxtzn,
.css-1q03dzc {    
    background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
    border-radius: 56px;
    height: fit-content;
    padding-bottom: var(--chakra-space-2);
    padding-top: var(--chakra-space-2);
    width: fit-content;
}
.css-1q03dzc:hover {
    text-decoration: none;
}

.css-1q03dzc,
.css-1mepe2v {
    color: var(--chakra-colors-pureWhite);    
    font-size: 18px;
}

/* Image border on hover */
div.css-3vu8ng > .css-1regj17 {
    transition: 0.2s linear;
}
div.css-3vu8ng > .css-1regj17:hover {
    border: 5px solid rgb(254, 132, 132);
    border-radius: 16px;
}

/* Put delete image button in red */
.css-jh1suc,
.css-15g5rpl,
.css-15g5rpl svg path {
    color: var(--chakra-colors-red);
}

/* ========================================================================
   Voice call page
======================================================================== */
/* Add a border on the modal */
#chakra-modal-\:r12k\: {
    border: 1px solid #6C6C6C;
}

/* Bigger text */
.css-14mmx5r,
.css-1vqt2yh {
    font-size: 16px;    
}

/* ========================================================================
   For 900p wide screen and more
======================================================================== */
@media screen and (min-width: 900px) {
/* ========================================================================
   Menu
======================================================================== */
    /* Large menu */
    .css-1raxatq,
    .css-xhpjzu {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Email box */
    .css-1dodils {
        align-self: center;
        gap: 0px;
        margin-top: 5% !important;
        padding-right: 15px;
    }

    /* Subcriber icon */
    .css-1dodils > img {
        height: auto !important;
        width: 44px;
    }

    /* Email */
    .css-gnnge1 {
        font-size: 24px;
        padding-bottom: 5px;
        padding-left: 5px;
    }

    /* Menu */
    .css-1raxatq > div > div > div > div.css-j7qwjs {
        display: grid;
        align-content: center;
        gap: 50px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        margin-top: 10%;
        justify-content: space-between !important
    }

    /* Subscribe button */
    .css-1fu7n7b,
    .css-o32bv9 {
        order: 2;
    }

    /* Log out button */
    .css-j7qwjs > div:nth-child(10) {
        position: absolute;
        right: 5%;
        top: 70%;
    }

    /* Reset Kindroid button */
    .css-16qb61r {
        position: absolute;
        right: 4%;
        top: 80%;
    }

    /* Bigger menu text */
    .css-dghbxk,
    .css-1jbciej,
    .css-3sp0ue {
        font-size: 30px
    }
    
    /* Move and fix the Save button in all menu page */
    .css-cbfcqn,
    .css-1raxatq > div.css-1xh8vw6 > button,
    .css-1raxatq > div.css-ouwkos > button {
        bottom: 50px;
        margin: 39% 0px 0px 83%;
        position: fixed;
    }

    /* Backstory and Key memories */
    .css-1xh8vw6 > .css-188uayk > .css-j7qwjs > .css-1kxonj9 > .css-126ipcs > textarea.css-1y068e {
        height: 600px !important;
    }
    #accordion-panel-\:r6i\: > div.css-mifb2i > div.css-1uyzhnb > p.chakra-text.css-7wdzg1,
    #accordion-panel-\:r6f\: > p.chakra-text.css-7wdzg1 {
        min-width: 100% !important;
    }

    /* Voice */
    .css-1raxatq > div.css-ouwkos > div > p.chakra-text.css-7wdzg1 {
        max-width: 100% !important;
    }

    /* Split menu for avatars */
    .css-7nleni,
    .css-1jk1ov6 {
        max-width: 50% !important;
    }
    .css-1yxzzu5 > div > p {
        display: block;
        margin-left: 47%;
        position: absolute;
        top: 10px;
        max-width: 50% !important;
    }
    .css-n4vub9 {
        margin-left: 47%;
        position: absolute;
        top: 8%;
        max-width: 45% !important;
    }
    .css-ue4bfp {
        display: block;
        margin-left: 95% !important;
        position: absolute;
        max-width: 45% !important;
    }
    .css-mifb2i {
        width: 50%;
    }

    /* 1st avatar size */
    .css-1k5gc4r,
    .css-dfpqc0 {
        height: auto;
        margin-left: 25%;
        width: 50%;
    }

    /* 2nd avatar size */
    .css-1mvfzwi {
        height: auto;
        margin-left: 5%;
        position: relative;
        w...

Reviews

No reviews yet.