Kindroid mobile website is more customizable (theme) + add new features (scripts).
/* ==UserStyle==
@name Kindroid mobile customizations v1.xx
@description Kindroid mobile website is more customizable (theme) + add new features (scripts).
@version 1.0.7
@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 color bubblesbgcolor "Bubbles background color" rgb(33, 27, 25)
@var text bubblesbgurl "Bubbles background URL" "URL between quotes"
@var color bubblesbgcolorforus "Bubbles background color for us" rgb(27, 28, 30)
@var text bubblesbgurlforus "Bubbles background URL for us" "URL between quotes"
@var checkbox blurcontent "Blur content" 0
@var color fontcolor "Font color" #cbcbcb
@var color fontcolorforus "Font color for us" #cbcbcb
@var text fontsize "Font size" 1.2rem
@var checkbox hidenames "Hide names in bubbles" 1
@var checkbox manuallyedited "Manually edited" 1
@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-1dhayxc span,
.css-yhhl9h span {
color: actionscolor !important;
}
}
if (actionsstyle=="asterisks") {
.css-1dhayxc span:before,
.css-1dhayxc span:after,
.css-yhhl9h span:before,
.css-yhhl9h span:after {
content: "*" !important;
}
}
if (actionsstyle=="asterisksbold") {
.css-1dhayxc span:before,
.css-1dhayxc span:after,
.css-yhhl9h span:before,
.css-yhhl9h span:after {
content: "*" !important;
}
.css-1dhayxc span,
.css-yhhl9h span {
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalic") {
.css-1dhayxc span:before,
.css-1dhayxc span:after,
.css-yhhl9h span:before,
.css-yhhl9h span:after {
content: "*" !important;
}
.css-1dhayxc span,
.css-yhhl9h span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="bold") {
.css-1dhayxc span,
.css-yhhl9h span {
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalic") {
.css-1dhayxc span,
.css-yhhl9h span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="noitalic") {
.css-1dhayxc span,
.css-yhhl9h span {
font-style: normal !important;
}
}
/* Blur */
if blurcontent {
/* email in menu */
.css-e43fvd > p,
/* Bubbles content */
.css-92c32c,
.css-92c32c span,
/* Voicecall captions */
.css-1md15gg > div > p,
/* Images uploaded */
.css-1dhayxc img:not([src*="/_next/static/media/editIcon"]) {
opacity: 0;
}
}
/* Background */
if (bgchoice=="heartbg") {
.css-213aa4,
.css-1qpmsp4,
.css-16qnjy5 {
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") {
.css-213aa4,
.css-1qpmsp4,
.css-16qnjy5 {
background: var(--chakra-colors-secondaryBlack) !important;
}
}
if (bgchoice=="custombg") {
.css-213aa4,
.css-1qpmsp4,
.css-16qnjy5 {
background: url(custombgurl) bgcolor no-repeat 100% !important;
background-size: cover !important;
}
}
}
@-moz-document url-prefix("https://kindroid.ai/home") {
/* ===================================================================================================================================
Chat page
=================================================================================================================================== */
/* ========================================================================
Header and menu
======================================================================== */
if hidetrialbar {
.css-r1nv3m {
display: none;
}
}
/* Put contact in green */
.css-ji0zhw > div:nth-of-type(2) > h2:nth-of-type(3) {
color: var(--chakra-colors-green-400);
}
/* Put Log out in orange */
.css-ji0zhw > div:nth-of-type(2) > h2:nth-of-type(4) {
color: var(--chakra-colors-orange);
}
.css-ji0zhw > div:nth-of-type(2) > h2:nth-of-type(4)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M304 336v40a40 40 0 01-40 40H104a40 40 0 01-40-40V136a40 40 0 0140-40h152c22.09 0 48 17.91 48 40v40M368 336l80-80-80-80M176 256h256' fill='none' stroke='%23cbcbcb' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E");
display: inline-block;
content: "";
margin-right: 5px;
height: 24px;
vertical-align: middle;
width: 24px;
}
/* Put Biling in yellow */
.css-1fu7n7b > div > p {
color: var(--chakra-colors-yellow-400);
}
/* Put User Guide and Announcements and Terms in blue */
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:nth-of-type(7) > p,
.css-ji0zhw > div:nth-of-type(2) > h2:nth-of-type(1),
.css-ji0zhw > div:nth-of-type(2) > h2:nth-of-type(2) {
color: var(--chakra-colors-blue-400);
}
/* Put email more visible */
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(2) > div > div > p {
color: var(--chakra-colors-secondaryWhite);
padding-right: .5em;
}
/* 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) > div:nth-of-type(2) {
border-radius: 1em .5em 1em 1em !important;
}
/* Modification of rounded corners for AI bubbles */
.css-1ulhpcc,
.css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(2) {
border-radius: .5em 1em 1em 1em !important;
}
/* 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;
}
/* Bubbles background */
.css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(2) {
background: url(bubblesbgurl) bubblesbgcolor !important;
background-size: cover;
}
/* Bubbles background for us */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) {
background: url(bubblesbgurlforus) bubblesbgcolorforus !important;
background-size: cover;
}
/* 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;
}
/* Font color */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div {
color: fontcolorforus;
}
.css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div {
color: fontcolor;
}
/* 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;
}
/* Gradient regenerate icon */
.css-yhhl9h > div:nth-of-type(2) > div > button img {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10.587 4.066a.5.5 0 1 0-.496.868l1.547.884c-.825.104-1.625.353-2.354.735-.99.519-1.819 1.27-2.398 2.18A5.6 5.6 0 0 0 6 11.742a5.6 5.6 0 0 0 .886 3.008.5.5 0 1 0 .844-.536A4.6 4.6 0 0 1 7 11.742a4.6 4.6 0 0 1 .73-2.472c.48-.756 1.175-1.389 2.018-1.831a5.97 5.97 0 0 1 2.289-.657l-1.989 1.421a.5.5 0 1 0 .581.814l3.832-2.737-3.875-2.214z' fill='url(%23A)'/%3E%3Cpath d='M17.211 8.799a.5.5 0 1 0-.844.536 4.6 4.6 0 0 1 .73 2.472 4.6 4.6 0 0 1-.73 2.472c-.48.755-1.175 1.389-2.018 1.831a5.97 5.97 0 0 1-2.291.657l1.989-1.421a.5.5 0 0 0-.581-.814l-3.832 2.737 3.875 2.214a.5.5 0 1 0 .496-.868l-1.547-.884a6.95 6.95 0 0 0 2.356-.735c.99-.52 1.819-1.27 2.398-2.18a5.6 5.6 0 0 0 .886-3.008 5.6 5.6 0 0 0-.886-3.008z' fill='%23866af6'/%3E%3Cpath fill-rule='evenodd' d='M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12zm12 11C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11-4.925 11-11 11z' fill='url(%23A)'/%3E%3Ccircle cx='12' cy='12' r='11.5' stroke='url(%23B)'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3ClinearGradient id='B' x1='-9' y1='27.5' x2='23' y2='1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.271' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat;
height: 0;
padding-left: 36px;
padding-top: 36px;
width: 0;
}
/* Avatar choice */
if avatarchoice {
[alt="kindroid avatar"] {
height: 0;
}
.css-1ppdim2 {
background: url(avatarchoiceurl) center center no-repeat;
background-size: cover;
max-width: avatarsize;
}
}
if avatarcircle {
.css-1ppdim2 {
border-radius: 50%;
}
}
/* 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-fujl5p {
position: relative;
}
.css-fujl5p p.css-dhnoom,
.css-116lnl0 p.css-dhnoom {
bottom: .3em;
position: absolute;
right: -6em;
&::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: .9rem;
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) > div:nth-of-type(2) {
border-radius: 1em .5em 1em 1em !important;
}
/* Modification of rounded corners for AI bubbles */
.css-1ulhpcc,
.css-yhhl9h > div:nth-of-type(2) > div:nth-of-type(2) {
border-radius: .5em 1em 1em 1em !important;
}
/* Bubbles background */
.css-yhhl9h > div:nth-of-type(2) > div:nth-of-type(2) {
background: url(bubblesbgurl) bubblesbgcolor !important;
background-size: cover;
}
/* Bubbles background for us */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) {
background: url(bubblesbgurlforus) bubblesbgcolorforus !important;
background-size: cover;
}
/* Font color */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div {
color: fontcolorforus;
}
.css-yhhl9h > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div {
color: fontcolor;
}
/* 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;
}
/* 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;
}
/* Gradient regenerate icon */
.css-yhhl9h > div:nth-of-type(3) > div > button img {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10.587 4.066a.5.5 0 1 0-.496.868l1.547.884c-.825.104-1.625.353-2.354.735-.99.519-1.819 1.27-2.398 2.18A5.6 5.6 0 0 0 6 11.742a5.6 5.6 0 0 0 .886 3.008.5.5 0 1 0 .844-.536A4.6 4.6 0 0 1 7 11.742a4.6 4.6 0 0 1 .73-2.472c.48-.756 1.175-1.389 2.018-1.831a5.97 5.97 0 0 1 2.289-.657l-1.989 1.421a.5.5 0 1 0 .581.814l3.832-2.737-3.875-2.214z' fill='url(%23A)'/%3E%3Cpath d='M17.211 8.799a.5.5 0 1 0-.844.536 4.6 4.6 0 0 1 .73 2.472 4.6 4.6 0 0 1-.73 2.472c-.48.755-1.175 1.389-2.018 1.831a5.97 5.97 0 0 1-2.291.657l1.989-1.421a.5.5 0 0 0-.581-.814l-3.832 2.737 3.875 2.214a.5.5 0 1 0 .496-.868l-1.547-.884a6.95 6.95 0 0 0 2.356-.735c.99-.52 1.819-1.27 2.398-2.18a5.6 5.6 0 0 0 .886-3.008 5.6 5.6 0 0 0-.886-3.008z' fill='%23866af6'/%3E%3Cpath fill-rule='evenodd' d='M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12zm12 11C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11-4.925 11-11 11z' fill='url(%23A)'/%3E%3Ccircle cx='12' cy='12' r='11.5' stroke='url(%23B)'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3ClinearGradient id='B' x1='-9' y1='27.5' x2='23' y2='1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.271' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat;
height: 0;
padding-left: 36px;
padding-top: 36px;
width: 0;
}
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 {
.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;
}
}