Kindroid mobile website is more customizable (theme) + add new features (scripts).
As of
/* ==UserStyle==
@name Kindroid mobile customizations v1.xx
@description Kindroid mobile website is more customizable (theme) + add new features (scripts).
@version 1.0.3
@author BreatFR (https://breat.fr)
@namespace https://gitlab.com/breatfr
@homepageURL https://gitlab.com/breatfr/kindroid
@supportURL https://discord.gg/fSgDHmekfG
@license BY-NC-ND; https://creativecommons.org/licenses/by-nc-nd/4.0/
@preprocessor stylus
@var select actionsstyle "Actions texts style" {
"Default": "actionsdefault",
"Asterisks": "asterisks",
"Asterisks + bold": "asterisksbold",
"Asterisks + bold + no italic": "asterisksboldnoitalic",
"Bold": "bold",
"Bold + no italic": "boldnoitalic",
"No italic": "noitalic"
}
@var color actionscolor "Actions texts color choice" rgb(136, 136, 136)
@var checkbox avatarchoice "Avatar changer" 0
@var text avatarchoiceurl "Avatar changer URL" "URL between quotes"
@var checkbox avatarcircle "Avatar circle" 0
@var select bgchoice "Background choice" {
"❤️ Hearts": "heartbg",
"⬜ None": "nobg",
"❔ Custom": "custombg"
}
@var color bgcolor "Background color" #101010
@var text custombgurl "Background URL" "URL between quotes"
@var checkbox blurcontent "Blur content" 0
@var color bubblescolor "Bubbles font color" #CBCBCB
@var text fontsize "Custom font size" 1.2rem
@var checkbox gradientregenerate "Gradient regenerate icon" 1
@var checkbox hidenames "Hide names in bubbles" 1
@var checkbox manuallyedited "Manually edited" 1
@var color kinbubblesbgcolor "Kin bubbles background color" rgb(33, 27, 25)
@var text kinbubblesbgurl "Kin bubbles background URL" "URL between quotes"
@var color ourbubblesbgcolor "Our bubbles background color" rgb(27, 28, 30)
@var text ourbubblesbgurl "Our bubbles background URL" "URL between quotes"
@var checkbox hidetrialbar "Hide trial bar" 1
==/UserStyle== */
/* === Credits ===
Website https://breat.fr
facebook https://www.facebook.com/breatfroff
mastodon https://mastodon.social/@breat_fr
telegram https://t.me/breatfr
vk https://vk.com/breatfroff
X (twitter) https://x.com/breatfroff
=== Credits === */
@-moz-document domain("kindroid.ai") {
/* ===================================================================================================================================
Whole kindroid domain
=================================================================================================================================== */
/* Loading bar */
#nprogress .bar {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
}
/* Actions texts */
if (actionsstyle=="actionsdefault") || actionscolor {
.css-1cki8gt > span,
.css-1joa3p8 > span {
color: actionscolor !important;
}
}
if (actionsstyle=="asterisks") {
.css-1cki8gt > span:before,
.css-1cki8gt > span:after,
.css-1joa3p8 > span:before,
.css-1joa3p8 > span:after {
content: "*" !important;
}
}
if (actionsstyle=="asterisksbold") {
.css-1cki8gt > span:before,
.css-1cki8gt > span:after,
.css-1joa3p8 > span:before,
.css-1joa3p8 > span:after {
content: "*" !important;
}
.css-1cki8gt > span,
.css-1joa3p8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalic") {
.css-1cki8gt > span:before,
.css-1cki8gt > span:after,
.css-1joa3p8 > span:before,
.css-1joa3p8 > span:after {
content: "*" !important;
}
.css-1cki8gt > span,
.css-1joa3p8 > span {
font-style: normal !important;
font-weight: bold !important;
}
}
/* if (actionsstyle=="asterisksboldsamecolor") {
.css-1cki8gt > span:before,
.css-1cki8gt > span:after,
.css-1joa3p8 > span:before,
.css-1joa3p8 > span:after {
content: "*" !important;
}
.css-1cki8gt > span,
.css-1joa3p8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalicsamecolor") {
.css-1cki8gt > span:before,
.css-1cki8gt > span:after,
.css-1joa3p8 > span:before,
.css-1joa3p8 > span:after {
content: "*" !important;
}
.css-1cki8gt > span,
.css-1joa3p8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-style: normal !important;
font-weight: bold !important;
}
} */
if (actionsstyle=="bold") {
.css-1cki8gt > span,
.css-1joa3p8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalic") {
.css-1cki8gt > span,
.css-1joa3p8 > span {
font-style: normal !important;
font-weight: bold !important;
}
}
/* if (actionsstyle=="boldsamecolor") {
.css-1cki8gt > span,
.css-1joa3p8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalicsamecolor") {
.css-1cki8gt > span,
.css-1joa3p8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-style: normal !important;
font-weight: bold !important;
}
} */
if (actionsstyle=="noitalic") {
.css-1cki8gt > span,
.css-1joa3p8 > span {
font-style: normal !important;
}
}
/* if (actionsstyle=="samecolor") {
.css-1cki8gt > span,
.css-1joa3p8 > span {
color: var(--chakra-colors-primaryWhite) !important;
}
}*/
/* Background */
.css-1yee3lj {
height: calc(100% - 45px);
}
if (bgchoice=="heartbg") {
.css-1lbk8wf,
.css-1qpmsp4,
.css-16qnjy5,
.css-uf0eqr {
background: url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/heart-pattern.png") bgcolor no-repeat 100% !important;
background-size: cover !important;
}
}
if (bgchoice=="nobg") {
/* No background */
.css-1lbk8wf,
.css-1qpmsp4,
.css-16qnjy5,
.css-uf0eqr {
background: var(--chakra-colors-secondaryBlack) !important;
}
}
if (bgchoice=="custombg") {
/* Custom background */
.css-1lbk8wf,
.css-1qpmsp4,
.css-16qnjy5,
.css-uf0eqr {
background: url(custombgurl) bgcolor no-repeat 100% !important;
background-size: cover !important;
}
}
if bgcolor {
.css-1lbk8wf,
.css-1qpmsp4,
.css-16qnjy5,
.css-uf0eqr {
background-color: bgcolor;
}
}
}
@-moz-document url-prefix("https://kindroid.ai/home") {
/* ===================================================================================================================================
Chat page
=================================================================================================================================== */
/* ========================================================================
Header and menu
======================================================================== */
if hidetrialbar {
.css-r1nv3m {
display: none;
}
}
/* Put Log out in orange */
.css-yk3l44 > h2:nth-child(3) {
color: var(--chakra-colors-orange);
}
/* Put Biling in yellow */
.css-1fu7n7b > div > p {
color: var(--chakra-colors-yellow-400);
}
/* Put User Guide and Announcements and Terms in blue */
.css-yk3l44 > h2,
.css-j7qwjs > div:nth-child(7) > 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: var(--chakra-colors-secondaryWhite);
}
/* Billing error box */
.css-dixmdy {
background-color: #161616;
border: 1px solid #6C6C6C;
border-radius: 10px;
color: var(--chakra-colors-secondaryWhite);
}
/* Add some arrows when needed */
button > .css-1cfkm3f::after {
background-image: url("https://unpkg.com/[email protected]/dist/svg/chevron-down-outline.svg");
background-size: contain;
background-repeat: no-repeat;
content: "";
display: inline-block;
filter: invert(79%) sepia(6%) saturate(37%) hue-rotate(161deg) brightness(92%) contrast(86%);
height: 20px;
width: 20px;
}
/* Danger zone: delete account */
.css-yk3l44 {
bottom: 150px;
}
.css-19zv6py {
font-weight: 600;
font-size: 18px;
width: max-content;
}
/* Removes top right icons in header */
header > div:nth-of-type(2) {
display: none !important;
}
/* ===================================================================================================================================
Chat
=================================================================================================================================== */
/* Add border to textarea when focus */
textarea:focus {
border: 0;
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 */
textarea:not(:focus),
textarea:focus {
resize: none;
}
/* Hide reduce button on avatar */
@media screen and (min-width: 900px) {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div > div {
display: none;
}
}
/* Modification of date for our bubbles */
ion-app > .ion-page > .css-ab8yd1 > .css-bvm5am > .css-1yee3lj > .css-zjyen2 > .css-1lbk8wf > .css-1dhayxc > .css-v3ipd1 > .css-70qvj9 > .css-dhnoom {
padding-bottom: 5px;
}
/* Modification of rounded corners for our bubbles */
.css-1dhayxc > div:nth-of-type(2) {
border-radius: 20px 8px 20px 20px !important;
}
/* Modification of rounded corners for AI bubbles */
.css-yhhl9h > div:nth-of-type(1) {
border-radius: 8px 20px 20px 20px;
}
/* Modification of date for AI bubbles */
ion-app > .ion-page > .css-ab8yd1 > .css-bvm5am > .css-1yee3lj > .css-zjyen2 > .css-1lbk8wf > .css-yhhl9h > .css-ip0f2e > .css-70qvj9 > .css-dhnoom {
margin-left: 30px;
padding-bottom: 5px;
}
if bubblescolor {
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) > div,
.css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(3) > div {
color: bubblescolor;
}
}
/* Bigger text in bubbles and textarea */
.css-1dhayxc *,
.css-yhhl9h *,
.css-dhnoom,
textarea {
font-size: fontsize !important;
line-height: 1.5 !important;
}
textarea::placeholder {
line-height: 1.5 !important;
}
if kinbubblesbgcolor {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(2) > div:nth-of-type(1) > .css-yhhl9h > div:nth-of-type(1) {
background-color: kinbubblesbgcolor;
}
}
if kinbubblesbgurl {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(2) > div:nth-of-type(1) > .css-yhhl9h > div:nth-of-type(1) {
background-color: kinbubblesbgcolor;
background-image: url(kinbubblesbgurl);
background-size: cover;
}
}
if ourbubblesbgcolor {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(2) > div:nth-of-type(1) > .css-1dhayxc > div:nth-of-type(2) {
background: ourbubblesbgcolor;
}
}
if ourbubblesbgurl {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(2) > div:nth-of-type(1) > .css-1dhayxc > div:nth-of-type(2) {
background-color: ourbubblesbgcolor;
background-image: url(ourbubblesbgurl);
background-size: cover;
}
}
/* 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;
}
if gradientregenerate {
/* Regenerate icon */
img[alt="regenerate"] {
display: none !important;
}
[aria-label="Regenerate or suggest a change"]:nth-child(1) {
background: url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/gradient-regenerate.svg") no-repeat;
border-radius: 50%;
}
}
/* Avatar choice */
if avatarchoice {
.css-oies6c,
.css-1bwrjj6 {
height: 0;
}
.css-13tht1l {
background: url(avatarchoiceurl) no-repeat;
background-size: cover;
max-width: avatarsize;
}
}
if avatarcircle {
.css-13tht1l,
.css-g2goff {
border-radius: 50%;
}
}
if blurcontent {
ion-app > div > div > div > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-child(odd) > div:nth-of-type(2) p,
ion-app > div > div > div > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-child(even) > div:nth-of-type(1) p {
filter: blur(8px);
-moz-filter: blur(8px);
-webkit-filter: blur(8px);
}
}
/* Hide names in bubbles to save place */
if hidenames {
.css-ppua9z,
.css-19hb772 {
display: none;
}
.css-127w3cl {
margin-left: 0;
}
}
/* Suggest message button */
.css-b9bzmp > div:nth-of-type(1) > div > div > button {
top: 50%;
transform: translateY(-50%);
}
/* Manually edited */
if manuallyedited {
.css-ip0f2e {
position: relative;
}
.css-yhhl9h > div > p {
bottom: 0;
position: absolute;
right: -7em;
&::before {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
content: "Manually edited";
justify-content: end;
font-size: 14px;
visibility: visible;
}
& {
visibility: hidden;
}
}
}
}
@-moz-document url-prefix("https://kindroid.ai/groupchat/") {
/* ===================================================================================================================================
Group chat
=================================================================================================================================== */
/* Add border to textarea when focus */
textarea:focus {
border: 0;
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 */
textarea:not(:focus),
textarea: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;
}
/* Modification of date for our bubbles */
ion-app > .ion-page > .css-ab8yd1 > .css-bvm5am > .css-1qpmsp4 > .css-zjyen2 > .css-i6vm4m > .css-1dhayxc > .css-v3ipd1 > .css-70qvj9 > .css-dhnoom {
font-size: fontsize;
padding-bottom: 5px;
}
/* Modification of rounded corners for our bubbles */
.css-1dhayxc > div:nth-of-type(2) {
border-radius: 20px 8px 20px 20px !important;
}
/* Modification of rounded corners for AI bubbles */
.css-yhhl9h > div:nth-of-type(1) {
border-radius: 8px 20px 20px 20px;
}
if bubblescolor {
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) > div,
.css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(3) > div {
color: bubblescolor;
}
}
/* Bigger text in bubbles and textarea */
.css-1dhayxc *,
.css-yhhl9h *,
input,
textarea {
font-size: fontsize !important;
line-height: 1.5 !important;
}
textarea::placeholder {
line-height: 1.5 !important;
}
if kinbubblesbgcolor {
ion-app > div > div > div > div > div > div:nth-of-type(2) > .css-yhhl9h > div:nth-of-type(2) {
background-color: kinbubblesbgcolor;
}
}
if kinbubblesbgurl {
ion-app > div > div > div > div > div > div:nth-of-type(2) > .css-yhhl9h > div:nth-of-type(2) {
background-color: kinbubblesbgcolor;
background-image: url(kinbubblesbgurl);
background-size: cover;
}
}
if ourbubblesbgcolor {
ion-app > div > div > div > div > div > div:nth-of-type(2) > .css-1dhayxc > div:nth-of-type(2) {
background: ourbubblesbgcolor;
}
}
if ourbubblesbgurl {
ion-app > div > div > div > div > div > div:nth-of-type(2) > .css-1dhayxc > div:nth-of-type(2) {
background-color: ourbubblesbgcolor;
background-image: url(ourbubblesbgurl);
background-size: cover;
}
}
/* 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;
}
if gradientregenerate {
/* Regenerate icon */
.css-1wmt28i [alt="regenerate"] {
display: none;
}
.css-1jby15f > .css-100dd8p > .css-1wmt28i:nth-child(1) {
background: url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/gradient-regenerate.svg") no-repeat;
border-radius: 50%;
}
}
if blurcontent {
.css-1hmzamm,
.css-gnnge1,
.css-reootw,
.css-v3ipd1 > .css-0 > p,
.css-ip0f2e > .css-0 > p {
filter: blur(8px);
-moz-filter: blur(8px);
-webkit-filter: blur(8px);
}
}
if hidenames {
/* Hide names in bubbles to save place */
.css-ppua9z,
.css-19hb772 {
display: none;
}
.css-127w3cl {
margin-left: 0;
}
}
/* 3 dots */
.css-1y2ps2x:hover {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background-clip: text;
color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Suggest message button */
.css-b9bzmp > div:nth-of-type(1) > div > div > button {
top: 50%;
transform: translateY(-50%);
}
}
@-moz-document url-prefix("https://kindroid.ai/selfies") {
/* ===================================================================================================================================
Selfies page
=================================================================================================================================== */
/* Hide reddit, discord, kindroid logos */
header > div > .css-1rdhwuq {
display: none;
}
/* Load More button */
.css-1m67823 {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -webkit-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
border-radius: 56px;
color: var(--chakra-colors-pureWhite);
font-size: 18px;
height: fit-content;
padding-bottom: var(--chakra-space-2);
padding-top: var(--chakra-space-2);
width: 120px;
}
.css-1m67823:hover {
text-decoration: none;
}
/* Put delete image button in red */
.css-chdrwy > .css-1icfsi7 > .css-r6z5ec > .css-do4s31,
.css-chdrwy > .css-1icfsi7 > .css-r6z5ec > .css-do4s31 > .css-94x4at {
background: var(--chakra-colors-secondaryBlack);
}
.css-chdrwy > .css-1icfsi7 > .css-r6z5ec > .css-do4s31 > .css-94x4at > .css-nvswzl {
color: var(--chakra-colors-red);
}
/* Blur content */
if blurcontent {
.css-1regj17,
.css-pyo214 {
filter: blur(50px);
-moz-filter: blur(50px);
-webkit-filter: blur(50px);
}
}
}
@-moz-document url-prefix("https://kindroid.ai/call") {
/* ===================================================================================================================================
Call page
=================================================================================================================================== */
/* Bigger text */
.css-7wdzg1,
.css-14mmx5r,
.css-1vqt2yh {
font-size: 18px;
}
/* Avatar choice */
if avatarchoice {
ion-app > div > div > div > div > div:nth-of-type(2) > div:first-child,
ion-app > div > div > div > div > div:nth-of-type(2) > div:first-child > div:nth-of-type(3) {
height: 512px !important;
margin-top: 5%;
width: 512px !important;
}
[alt="avatar"] {
background: url(avatarchoiceurl) border-box;
background-size: cover;
border-color: rgb(40, 40, 40);
border-radius: 50%;
border-style: solid;
height: 512px;
width: 512px;
}
}
/* Removes top right icons in header */
header > div > div:nth-of-type(2) {
display: none !important;
}
}