Put Kindroid on whole page for screen with width 1440px and more.
A copy of the v1 of my theme, no more update, v2 here: https://userstyles.world/style/11785/.
Kindroid AI: Wide screen v1 by breat
Mirrored from https://gitlab.com/breatfr/kindroid/-/raw/main/css/kindroid_wide_screen_v1.xx.user.css
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:
- 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 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 {...