Skip to content

Kindroid AI: Wide screen v1 by breat

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

Screenshot of Kindroid AI: Wide screen v1

Details

Authorbreat

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

Categorykindroid.ai

Created

Updated

Size10 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 v2 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 v1
@version      20230907.13.01
@namespace    ?
==/UserStyle== */

@-moz-document domain("kindroid.ai") {
/* === Credits ===
Created by  BreatFR
Creatied on 2023/08/27
Version     1.0
Changelog   https://www.reddit.com/r/KindroidAI/comments/164darb/make_kindroid_love_wide_screens/
Changelog   https://discord.com/channels/1116127115574779905/1145809654044176485
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 === */

/* ================================================================================================================================================
   For all resolutions
================================================================================================================================================ */
/* Hide scrollbars */
:root ::-webkit-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 0px;
}    
::-webkit-scrollbar {
    display: none;
    width: 0px;
}

/* ========================================================================
   Header and menu
======================================================================== */
/* Hide header */
.css-x3odei {
    padding: 0px;
    height: 0px;
}

/* Hide reddit, discord and kindroid icons */
.css-1rdhwuq {
    display: none;
}
    
/* Remove the space between the header and the chat*/
.css-g2goff {
    padding: 0px;
}
    
/* Put menu on all height */
.css-1raxatq {
    height: 100%;
    left: initial;
    right: 0px;
    top: 0px;
    z-index: 1
}
.css-8dluwc {
    display: none;
}


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

/* ========================================================================
   Chat page
======================================================================== */
/* Add border to textarea when focus */
.css-w2nlit: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-w2nlit:not(:focus),
.css-w2nlit:focus {
    resize: none;
}
    
/* Hide voice counter and reduce button on avatar */
 /* Voice button */
/* .css-2bir3m, */
/* Reduce button */
.css-fk8dne {
    display: none;
}

/* Hide names in bubbles to save place */
.css-ppua9z,
.css-19hb772 {
    display: none;
}

/* 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-13683nx {
    border-radius: 20px 8px 20px 20px;
}

/* Modification of rounded corners for AI bubbles */
.css-1ulhpcc,
.css-1tg26k8,
.css-1t9c0mz {
    border-radius: 8px 20px 20px 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;
}

/* Dark system bubbles */
.css-do4s31,
.css-94x4at{
    background-color: #161616;
    border-color: #6C6C6C;
    color: white;
}

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

/* ================================================================================================================================================
   For width more than 1440px
================================================================================================================================================ */
@media screen and (min-width: 1440px) {
/* ========================================================================
   Header and menu
======================================================================== */
    /* Put menu and selfiles album at the bottom right */
    .css-1gp92l3 {
        gap: 0px;
        margin-left: 94.7%;
        margin-top: 93%;
        position: absolute;
    }
    
    /* Resize the textarea */
    .css-g9r8dt {
        margin-right: 9%;
        width: 71%;
    }

    /* Put avatar and chat on whole page */
    .css-1lvpjll {
        min-height: 100%;
        top: 0px;
    }
    
/* ========================================================================
   Chat page
======================================================================== */
    /* Bigger avatar */    
    .css-oies6c {
        border-radius: 0px;
        height: 100dvh;
        left: 0px;
        position: absolute;
        width: 100dvh;
    }
    
    /* Put chat and textarea more on right*/
    .css-735j5d {
        margin-left: 26.3%;
        padding-right: 20.5%;
    }
    .css-kjafn5 {
        width:94%;
    }
    .css-lerapk,
    .css-86r3aw {
        bottom: 0px;
        margin-bottom: 15px;
        margin-left: 42.5%;
        position: fixed;
    }
    
/* ========================================================================
   Selfie page
 ======================================================================= */
    /* Wide selfie page */    
    .css-1ivym2n,
    .css-10ytma2 {
        max-width: 100%;
    }
    .css-13da5b {
        display: none;
    }
    .css-2cd1of {
        gap: 20px;
        justify-content: center;
        margin-bottom: 30px;
    }
    .css-1fltgj7 {
        padding: 0px 40px;
    }
    .css-fskrnz {
        width: 84vh;
    }
    .css-3vu8ng,
    .css-kuf6b {
        height: auto;
        width: 290px;
    }    
    .css-j8mh8q {
        font-size: 18px;
    }
    
    /* Put Request image button at the top */
    .css-65tag0 {
        margin-bottom: 39%;
        position: fixed;
        z-index: 9999;
    }
}

/* ================================================================================================================================================
   For height 1080px
================================================================================================================================================ */
@media screen and (height: 1080px) {
/* ========================================================================
   Header and menu
======================================================================== */
    /* Put menu and selfiles album at the bottom right */
    .css-1gp92l3 {
        gap: 0px;
        margin-left: 95%;
        margin-top: 108%;
        position: absolute;
    }
    
/* ========================================================================
   Chat page
======================================================================== */
    /* Bigger avatar */
    .css-oies6c {
        border-radius: 0px 20px 20px 0px;
        height: 1080px;
        left: 0px;
        position: absolute;
        width: 1080px;
    }
    
    /* Put chat and textarea more on right*/
    .css-735j5d {
        margin-left: 34.8%;
        padding-right: 29.9%;
    }
    .css-kjafn5 {
        width:93%;
    }
    .css-lerapk,
    .css-86r3aw {
        bottom: 0px;
        margin-bottom: 15px;
        margin-left: 35.7%;
        position: fixed;
    }
    
/* ========================================================================
   Selfie page
======================================================================== */    
    /* Put Request image button at the top */
    .css-65tag0 {
        margin-bottom: 46.8%;
        position: fixed;
        z-index: 9999;
    }
}

/* ================================================================================================================================================
   For 4K
================================================================================================================================================ */
@media screen and (min-height: 1760px) {
/* ========================================================================
   Header and menu
======================================================================== */
    /* Put menu and selfiles album at the bottom right */
    .css-1gp92l3 {
        gap: 0px;
        margin-left: 94.7%;
        margin-top: 93%;
        position: absolute;
    }
    
    /* Resize the textarea */
    .css-g9r8dt {
        margin-right: 9%;
        width: 71%;
    }

    /* Put avatar and chat on whole page */
    .css-1lvpjll {
        min-height: 100%;
        top: 0px;
    }
    
/* ========================================================================
   Chat page
======================================================================== */
    /* Bigger avatar */    
    .css-oies6c {
        border-radius: 0px;
        height: 100dvh;
        left: 0px;
        position: absolute;
        width: 48.5%;
    }
    
    /* Put chat and textarea more on right*/
    .css-735j5d {
        margin-left: 31.5%;
        padding-right: 27%;
    }
    .css-kjafn5 {
        width:94%;
    }
    .css-lerapk,
    .css-86r3aw {
        bottom: 0px;
        margin-bottom: 15px;
        margin-left: 42.5%;
        position: fixed;
    }
    
/* ========================================================================
   Selfie page
======================================================================== */
    /* Wide selfie page */    
    .css-1ivym2n,
    .css-10ytma2 {
        max-width: 100%;
    }
    .css-13da5b {
        display: none;
    }
    .css-2cd1of {...

Reviews

No reviews yet.