UI experiemnt
Kindroid AI: Wide screen v1 by maltec_corz
Imported from https://userstyles.world/api/style/11948.user.css
Details
Authormaltec_corz
LicenseNo License
Categoryunset
Created
Updated
Size10 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.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 {...