Put Kindroid on whole page for screen with width 900px and more.
A copy of the v2 of my theme, no more update, v3 here: https://userstyles.world/style/14456/.
Kindroid AI: Wide screen v2 by breat
Mirrored from https://gitlab.com/breatfr/kindroid/-/raw/main/css/kindroid_wide_screen_v2.xx.user.css
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:
- ko-fi: https://ko-fi.com/breatfr
- PayPal: https://www.paypal.me/breat
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
-
Install Stylus browser extension
- Chromium based browsers link: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
- Brave
- Chromium
- Google Chrome
- Iridium Browser
- Microsoft Edge
- Opera
- Opera GX
- SRWare Iron
- Ungoogled Chromium
- Vivaldi
- Yandex Browser
- many more
- Firefox based browsers link: https://addons.mozilla.org/firefox/addon/styl-us/
- Mozilla Firefox
- Mullvad Browser
- Tor Browser
- Waterfox
- many more
- Chromium based browsers link: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
-
Go on Kindroid AI: Wide screen on UserStyles.world website and click on
Install
under the preview picture. -
To update the theme, open the
Stylus Management
window and click onCheck 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.
- 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...