/* ==UserStyle==
@name Kindroid: Wide screen + customizations v3.xx
@description Put Kindroid on whole page for screen with width 900px and more and add customizations features.
@version 3.38.3
@author BreatFR (https://breat.fr)
@namespace https://github.com/breatfr
@homepageURL https://github.com/breatfr/kindroid
@supportURL https://discord.com/channels/1116127115574779905/1145809654044176485
@license GPL-3.0-or-later; http://www.gnu.org/licenses/gpl-3.0.txt
@preprocessor stylus
@var select actionsstyle "Actions texts style" {
"Default": "actionsdefault",
"Asterisks": "asterisks",
"Asterisks + bold": "asterisksbold",
"Asterisks + Bold + no italic": "asterisksboldnoitalic",
"Asterisks + Bold + no italic + same color": "asterisksboldnoitalicsamecolor",
"Bold": "bold",
"Bold + no italic": "boldnoitalic",
"Bold + no italic + same color": "boldnoitalicsamecolor",
"No italic": "noitalic",
"Same color": "samecolor"
}
@var color actionscolor "Actions texts color choice" rgb(168, 168, 168)
@var checkbox avatarchoice "Avatar changer" 0
@var text avatarchoiceurl "Avatar changer URL" "URL between quotes"
@var select avatarposition "Avatar position" {
"Large Middle": "avatarlargemiddle",
"Large Top": "avatarlargetop",
"Large Bottom": "avatarlargebottom",
"Small Middle": "avatarsmallmiddle",
"Small Top": "avatarsmalltop",
"Small Bottom": "avatarsmallbottom",
}
@var checkbox avatarchat "Avatar chat" 0
@var checkbox ouravatarchoice "Avatar changer for us" 0
@var text ouravatarchoiceurl "Avatar changer for us URL" "URL between quotes"
@var checkbox avatarcircle "Avatar circle" 0
@var checkbox avatarcustomposition "Avatar custom position" 0
@var text avatarcustompositionvalue "Avatar custom position value" 12vh
@var select avatarsize "Avatar size" {
"Large": "avatarlarge",
"Small": "avatarsmall",
"Hidden": "avatarhidden"
}
@var checkbox avatarcustomsize "Avatar custom size" 0
@var text avatarcustomsizevalue "Avatar custom size value" 512px
@var checkbox avatarrectangle "Avatar rectangle" 1
@var checkbox avatarrectanglecustomheight "Avatar rectangle custom height" 0
@var text avatarrectanglecustomheightvalue "Avatar custom height value" 256px
@var checkbox avatarzoom "Avatar hoverzoom" 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 bubblestext "Bubbles font size" 1.2rem
@var checkbox gradientregenerate "Gradient regenerate icon" 1
@var checkbox hidenames "Hide names in bubbles" 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 select systembubblesstyle "System bubbles style" {
"Left": "systembubblesleft",
"Dark": "systembubblesdark"
}
@var checkbox iconshover "Icons hover" 1
@var text chattextareasize "Textarea font size" 1.2rem
@var checkbox hidetrialbar "Hide trial bar" 1
@var checkbox imageborder "Image border on hover" 1
@var checkbox requestimage "Request image button at top" 1
==/UserStyle== */
/* === Credits ===
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 === */
@-moz-document domain("kindroid.ai") {
/* ===================================================================================================================================
Whole kindroid domain
=================================================================================================================================== */
/* Versions */
:root {
--themeversion: 'Theme v3.38.3';
--chatversionpc: 'Chat script PC v1.11';
--chatversionmobile: 'Chat script mobile v1.11';
--selfiesversionpc: 'Selfies script PC v1.07';
--selfiesversionmobile: 'Selfies script mobile v1.07';
--author: 'by BreatFR';
--link: ' github.com/breatfr/kindroid or gitlab.com/breatfr/Kindroid ';
}
.css-x3odei::after,
.css-z0osps::after {
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: var(--themeversion) ' · ' var(--chatversionpc) ' · ' var(--chatversionmobile) ' · ' var(--selfiesversionpc) ' · ' var(--selfiesversionmobile) ' ' var(--author) '\A' url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiIHN0eWxlPSJ0cmFuc2Zvcm06IHNjYWxlWSgtMSk7Ij48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iI2NiY2JjYiIgZD0iTTMwNyAzNC44Yy0xMS41IDUuMS0xOSAxNi42LTE5IDI5LjJ2NjRIMTc2Qzc4LjggMTI4IDAgMjA2LjggMCAzMDRDMCA0MTcuMyA4MS41IDQ2Ny45IDEwMC4yIDQ3OC4xYzIuNSAxLjQgNS4zIDEuOSA4LjEgMS45YzEwLjkgMCAxOS43LTguOSAxOS43LTE5LjdjMC03LjUtNC4zLTE0LjQtOS44LTE5LjVDMTA4LjggNDMxLjkgOTYgNDE0LjQgOTYgMzg0YzAtNTMgNDMtOTYgOTYtOTZoOTZ2NjRjMCAxMi42IDcuNCAyNC4xIDE5IDI5LjJzMjUgMyAzNC40LTUuNGwxNjAtMTQ0YzYuNy02LjEgMTAuNi0xNC43IDEwLjYtMjMuOHMtMy44LTE3LjctMTAuNi0yMy44bC0xNjAtMTQ0Yy05LjQtOC41LTIyLjktMTAuNi0zNC40LTUuNHoiLz48L3N2Zz4=") var(--link) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiIHRyYW5zZm9ybT0icm90YXRlKDE4MCkiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBmaWxsPSIjY2JjYmNiIiBkPSJNMzA3IDM0LjhjLTExLjUgNS4xLTE5IDE2LjYtMTkgMjkuMnY2NEgxNzZDNzguOCAxMjggMCAyMDYuOCAwIDMwNEMwIDQxNy4zIDgxLjUgNDY3LjkgMTAwLjIgNDc4LjFjMi41IDEuNCA1LjMgMS45IDguMSAxLjljMTAuOSAwIDE5LjctOC45IDE5LjctMTkuN2MwLTcuNS00LjMtMTQuNC05LjgtMTkuNUMxMDguOCA0MzEuOSA5NiA0MTQuNCA5NiAzODRjMC01MyA0My05NiA5Ni05Nmg5NnY2NGMwIDEyLjYgNy40IDI0LjEgMTkgMjkuMnMyNSAzIDM0LjQtNS40bDE2MC0xNDRjNi43LTYuMSAxMC42LTE0LjcgMTAuNi0yMy44cy0zLjgtMTcuNy0xMC42LTIzLjhsLTE2MC0xNDRjLTkuNC04LjUtMjIuOS0xMC42LTM0LjQtNS40eiIvPjwvc3ZnPg==") ;
display: flex;
flex-direction: column;
font-size: 18px;
left: 50%;
position: absolute;
text-align: center;
top: 49%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: max-content;
white-space: pre-line;
}
@-moz-document url-prefix() {
/* Fix firefox version */
.css-x3odei::after,
.css-z0osps::after {
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;
content: var(--themeversion) ' · ' var(--chatversionpc) ' · ' var(--chatversionmobile) ' · ' var(--selfiesversionpc) ' · ' var(--selfiesversionmobile) ' ' var(--author) '\A' '->' var(--link) '<-';
display: flex;
flex-direction: column;
font-size: 18px;
left: 22%;
position: absolute;
text-align: center;
top: 20%;
transform: translate(0%, -20%);
-moz-transform: translate(0%, -20%);
width: max-content;
white-space: pre-line;
}
}
/* Hide scrollbars */
.css-1lbk8wf,
:root ::-webkit-scrollbar {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
-moz-overflow-style: none !important;
-webkit-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%);
background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
}
/* Background */
if (bgchoice=="heartbg") {
.css-1lvpjll,
.css-10ytma2,
.css-1p90m26,
.css-11m3l17 {
background: url(https://i.ibb.co/fYQkYyc/heart-pattern.png) bgcolor fixed 100% !important;
}
}
if (bgchoice=="nobg") {
/* No background */
.css-1lvpjll,
.css-10ytma2,
.css-1p90m26,
.css-11m3l17 {
background: var(--chakra-colors-secondaryBlack) !important;
}
}
if (bgchoice=="custombg") {
/* Custom background */
.css-1lvpjll,
.css-10ytma2,
.css-1p90m26,
.css-11m3l17 {
background: url(custombgurl) bgcolor fixed 100% !important;
}
}
if bgcolor {
.css-1lvpjll,
.css-10ytma2,
.css-1p90m26,
.css-11m3l17 {
background-color: bgcolor;
}
}
}
@-moz-document url("https://kindroid.ai/home") {
/* ===================================================================================================================================
Chat page
=================================================================================================================================== */
/* ========================================================================
Header and menu
======================================================================== */
/* Header background color */
.css-x3odei {
background-color: var(--chakra-colors-primaryBlack) !important;
}
if hidetrialbar {
.css-r1nv3m {
display: none;
}
}
/* Tooltips */
[aria-label="gallery"]:hover::after {
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%);
border-radius: 16px;
color: var(--chakra-colors-primaryWhite);
content: "Selfies";
font-size: 16px;
left: -20%;
padding: 10px;
position: absolute;
top: 100%;
}
[aria-label="voicecall"]:hover::after {
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%);
border-radius: 16px;
color: var(--chakra-colors-primaryWhite);
content: "Voicecall";
font-size: 16px;
left: -30%;
padding: 10px;
position: absolute;
top: 100%;
}
[aria-label="rewards"]:hover::after {
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%);
border-radius: 16px;
color: var(--chakra-colors-primaryWhite);
content: "Rewards";
font-size: 16px;
left: -40%;
padding: 10px;
position: absolute;
top: 100%;
}
/* 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);
}
@media screen and (min-width: 900px) {
/* 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;
margin-top: 10%;
justify-content: space-between !important;
}
.css-yk3l44 {
gap: 100px;
}
.css-yk3l44 > h2 {
font-size: 20px;
}
/* Subscribe button */
.css-1fu7n7b,
.css-o32bv9 {
order: 2;
}
/* Bigger menu text */
.css-dghbxk,
.css-1jbciej,
.css-3sp0ue {
font-size: 30px;
}
/* Move and fix the Save button in all menu page */
.css-1h56vtb > div > div.css-j7qwjs > button,
.css-1raxatq > div.css-1xh8vw6 > button,
.css-1raxatq > div.css-ouwkos > button,
.css-1sfbjfs,
.css-1dmnlsh {
bottom: 20px;
margin: 39% 0px 0px 83%;
position: fixed;
}
/* My kindroids */
.css-12jdxbf,
.css-iludz4 {
height: auto;
width: 300px;
}
.css-1raxatq > div.css-1h56vtb {
padding-top: 0px;
}
.css-cbfcqn {
position: absolute;
right: 50px;
}
/* Modify size of groups */
.css-1avgoq8 {
width: 300px;
}
.css-1ly87gx > div > div.css-jzgh9j {
align-items: start;
}
.css-1yxzzu5 {
max-width: 100% !important;
}
.css-ue4bfp {
right: 5%;
top: 22% !important;
}
.css-1wjwxyy > section > div > .css-1cnwnlw > .css-jzgh9j > div.css-1h84tgn > div.css-19ovozl > div.css-j7qwjs > p:nth-child(5) {
position: absolute;
left: 50% !important;
top: 0px;
}
.css-1wjwxyy > section > div > .css-1cnwnlw > .css-jzgh9j > div.css-1h84tgn > div.css-19ovozl > div.css-j7qwjs > p:nth-child(6) {
position: absolute;
left: 50% !important;
top: 10%;
}
.css-1wjwxyy > section > div > .css-1cnwnlw > .css-jzgh9j > div.css-1h84tgn > div.css-19ovozl > div.css-j7qwjs > div:nth-child(7) {
position: absolute;
left: 50% !important;
top: 15%;
width: 50%;
}
.css-jzgh9j > div.css-rzxn8p > .css-cbfcqn {
bottom: 20px;
margin-right: 8%;
position: fixed;
}
/* Modify size and position of Create group */
.css-1ky9fv8 {
bottom: 27%;
position: absolute;
right: 5.2%;
width: 300px;
}
/* Fix position of Go to groupchat button */
.chakra-button.no-invert.css-1dmnlsh {
bottom: 20px;
right: 5%;
position: fixed;
}
/* Create a new group chat */
/* Bigger modal */
.css-i8vj7y {
height: 70%;
min-width: 90%;
}
.css-i8vj7y > .css-1ly87gx > .css-1yxzzu5 > .css-ciw22z {
margin-left: 150%;
width: 100%;
}
/* Split modal */
.css-1yxzzu5 {
max-width: 47%;
}
/* Goup name */
.css-i8vj7y > .css-1ly87gx > .css-1yxzzu5 > div:nth-child(4) > .css-1cv5dpr {
position: absolute;
right: 50px;
top: 12%;
width: 47%;
}
.css-i8vj7y > .css-1ly87gx > .css-1yxzzu5 > div:nth-child(4) > .css-1qvxg76 {
position: absolute;
right: 50px;
top: 18%;
width: 47%;
}
/* Group context */
.css-i8vj7y > .css-1ly87gx > .css-1yxzzu5 > div:nth-child(5) > .css-1cv5dpr {
position: absolute;
right: 50px;
top: 35%;
width: 47%;
}
.css-i8vj7y > .css-1ly87gx > .css-1yxzzu5 > div:nth-child(5) > .css-1m3hlb1 {
position: absolute;
right: 50px;
top: 41%;
width: 47%;
}
/* Turn-taking style */
.css-i8vj7y > .css-1ly87gx > .css-1yxzzu5 > div:nth-child(6) > .css-1cv5dpr {
position: absolute;
left: -42%;
top: 43%;
width: 45%;
}
.css-i8vj7y > .css-1ly87gx > .css-1yxzzu5 > div:nth-child(6) > .css-2aa4oa {
position: absolute;
left: -42%;
top: 50%;
width: 45%;
}
.css-i8vj7y > .css-1ly87gx > .css-1yxzzu5 > div:nth-child(6) > div {
position: absolute;
top: 60%;
width: 44%;
}
/* Create group button */
.css-i8vj7y > .css-1ly87gx > div > button {
position: absolute;
left: 5%;
top: 75%;
width: 90%;
}
/* General Settings */
#__next > ion-app > div > div > div > div.css-1raxatq > div.css-1h56vtb > div > div.css-j7qwjs > div:nth-child(3),
#__next > ion-app > div > div > div > div.css-1raxatq > div.css-1h56vtb > div > div.css-j7qwjs > div:nth-child(4) {
width: 100%;
}
/* Add some arrows when needed */
:root {
--arrow: url("https://unpkg.com/ionicons@7.1.0/dist/svg/chevron-down-outline.svg")
}
button > .css-1cfkm3f::after {
background-image: var(--arrow);
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;
}
/* 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;
width: 25%;
}
/* Bigger text and line height in avatar window */
#__next > ion-app > div > div > div > div.css-1raxatq > div.css-1y4vgns > div.css-188uayk > div.chakra-stack.css-1jk1ov6 > div.chakra-stack.css-1yxzzu5 > form.css-0 > p,
#accordion-panel-\:r7m\: > div.css-mifb2i > div.css-1uyzhnb > p.chakra-text.css-7wdzg1,
#__next > ion-app > div > div > div > div.css-1raxatq > div.css-1y4vgns > div.css-188uayk > div.chakra-stack.css-1jk1ov6 > div.chakra-stack.css-1yxzzu5 > div > p,
#__next > ion-app > div > div > div > div.css-1raxatq > div.css-1y4vgns > div.css-188uayk > div.chakra-stack.css-1jk1ov6 > div.chakra-stack.css-1yxzzu5 > form.css-ue4bfp > div.chakra-form-control.css-1kxonj9 > p:nth-child(1),
.css-1fm8jup > p.chakra-text.css-7wdzg1 {
font-size: 20px;
line-height: 25px;
max-width: 100% !important;
}
.chakra-accordion.css-0 > .css-tf0j9o > .chakra-collapse > .css-1fm8jup > p.css-7wdzg1 {
font-size: 20px;
line-height: 25px;
width: 50% !important;
}
.css-mifb2i > div.css-1uyzhnb > p.chakra-text.css-7wdzg1 {
font-size: 20px;
line-height: 25px;
max-width: 100% !important;
}
/* Hide arrows */
.css-g7h3az {
display: none;
}
/* Uncollapse "Advanced: secondary avatar" and "Advanced: custom avatar fidelity" */
.css-tf0j9o > div,
.css-1v3caum > div {
display: block !important;
height: auto !important;
opacity: 1 !important;
}
/* Move and fix the Save button in avatar menu page */
.css-1y4vgns > button {
margin: 39% 0px 0px 83%;
position: fixed;
}
/* Remove the space between the header and the chat*/
.css-g2goff {
padding: 0px;
}
.css-1lbk8wf {
padding-top: 70px !important;
}
/* Removes top right icons in header */
.css-1rdhwuq {
display: none !important;
}
/* Resize header */
.css-x3odei {
background-color: var(--chakra-colors-secondaryBlack) !important;
max-width: 100%;
padding: 0px 10px 0px 0.3%;
}
}
/* ===================================================================================================================================
Chat
=================================================================================================================================== */
/* Add border to textarea when focus */
textarea: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 */
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 rounded corners for our bubbles */
.css-1j9xj7u {
border-radius: 20px 8px 20px 20px;
}
/* Modification of date for our bubbles */
.css-1j9xj7u > .css-70qvj9 > .css-dhnoom {
margin-bottom: 10px;
}
/* Modification of rounded corners for AI bubbles */
.css-teti0a,
.css-1ulhpcc,
.css-1tg26k8,
.css-1t9c0mz {
border-radius: 8px 20px 20px 20px;
}
/* Modification of date for AI bubbles */
.css-teti0a > .css-70qvj9 > .css-dhnoom {
margin-bottom: 10px;
margin-left: 30px;
}
/* Bigger text in bubbles and textarea */
if bubblescolor {
.css-6obdga,
.css-1gi22a8 {
color: bubblescolor;
}
}
if bubblestext {
.css-6obdga,
.css-1gi22a8 {
font-size: bubblestext;
line-height: 1.2;
}
}
if chattextareasize {
.css-ymugf1 {
font-size: chattextareasize;
line-height: 1.2;
}
}
if kinbubblesbgcolor {
.css-teti0a {
background-color: kinbubblesbgcolor;
}
}
if kinbubblesbgurl {
.css-teti0a {
background-color: kinbubblesbgcolor;
background-image: url(kinbubblesbgurl);
}
}
if ourbubblesbgcolor {
.css-1j9xj7u {
background: ourbubblesbgcolor;
}
}
if ourbubblesbgurl {
.css-1j9xj7u {
background-color: ourbubblesbgcolor;
background-image: url(ourbubblesbgurl);
}
}
/* 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-1jby15f {
right: 10px;
transform: translateY(-25%);
}
.css-100dd8p {
gap: 90px !important;
flex-direction: row-reverse !important;
}
/* Background */
if (bgchoice=="heartbg") {
.css-1lbk8wf {
background: url(https://i.ibb.co/fYQkYyc/heart-pattern.png) bgcolor fixed 100% !important;
}
}
if (bgchoice=="nobg") {
/* No background */
.css-1lbk8wf {
background: var(--chakra-colors-secondaryBlack) !important;
}
}
if (bgchoice=="custombg") {
/* Custom background */
.css-1lbk8wf {
background: url(custombgurl) bgcolor fixed 100% !important;
}
}
if bgcolor {
.css-1lbk8wf {
background-color: bgcolor;
}
}
/* Actions texts */
if (actionsstyle=="actionsdefault") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: rgb(168, 168, 168) !important;
font-style: italic !important;
}
}
if (actionsstyle=="asterisks") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksbold") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalic") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalicsamecolor") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="bold") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalic") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalicsamecolor") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="noitalic") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-style: normal !important;
}
}
if (actionsstyle=="samecolor") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
}
}
if actionscolor {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: actionscolor !important;
}
}
/* Avatar position */
if (avatarposition=="avatarlargemiddle") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 8vh;
}
}
}
if (avatarposition=="avatarlargetop") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 4vh;
}
}
}
if (avatarposition=="avatarlargebottom") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 18vh;
}
}
}
if (avatarposition=="avatarsmallmiddle") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 16vh;
}
}
}
if (avatarposition=="avatarsmalltop") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 4vh;
}
}
}
if (avatarposition=="avatarsmallbottom") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 28vh;
}
}
}
if avatarcustomposition {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
margin-top: avatarcustompositionvalue;
}
}
}
/* Avatar size */
if (avatarsize=="avatarlarge") {
@media screen and (min-width: 900px) {
/* Bigger avatar */
.css-oies6c,
.css-13tht1l,
.css-g2goff {
border-radius: 20px;
height: 512px;
left: 0.6%;
max-width: 512px;
padding: 0px;
transition: 0.3s linear;
width: 512px;
}
/* Put chat and textarea more on right*/
.css-1lbk8wf {
bottom: 20px;
padding-left: 545px;
padding-right: 10px;
width: 100vw;
}
}
}
if gradientregenerate {
/* Regenerate icon */
.css-1wmt28i [alt="regenerate"] {
display: none;
}
.css-100dd8p > .css-1wmt28i:nth-child(2) {
background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5867 4.06587C10.347 3.92887 10.0415 4.01219 9.90455 4.25195C9.76755 4.49172 9.85087 4.79714 10.0906 4.93413L11.6381 5.81827C10.8127 5.92258 10.013 6.17089 9.28372 6.5534C8.29328 7.07289 7.46478 7.82324 6.88614 8.73374C6.30718 9.64472 6 10.6823 6 11.7418C6 12.8013 6.30718 13.8389 6.88613 14.7499C7.03425 14.9829 7.34325 15.0518 7.57631 14.9037C7.80937 14.7556 7.87823 14.4466 7.73012 14.2135C7.25025 13.4584 7 12.6061 7 11.7418C7 10.8775 7.25025 10.0252 7.73012 9.27011C8.2103 8.51455 8.90471 7.8814 9.74821 7.43898C10.4493 7.07127 11.2309 6.84723 12.0373 6.78201L10.0481 8.2027C9.82337 8.36319 9.77131 8.67547 9.9318 8.90018C10.0923 9.1249 10.4046 9.17696 10.6293 9.01647L14.4613 6.27964L10.5867 4.06587Z' fill='url(%23paint0_linear_3494_2742)'/%3E%3Cpath d='M17.2106 8.79901C17.0625 8.56595 16.7535 8.49709 16.5204 8.6452C16.2873 8.79332 16.2185 9.10232 16.3666 9.33538C16.8465 10.0905 17.0967 10.9428 17.0967 11.8071C17.0967 12.6714 16.8465 13.5237 16.3666 14.2788C15.8864 15.0343 15.192 15.6675 14.3485 16.1099C13.6469 16.4779 12.8646 16.702 12.0575 16.767L14.0469 15.3462C14.2717 15.1857 14.3237 14.8734 14.1632 14.6487C14.0027 14.424 13.6905 14.3719 13.4658 14.5324L9.63372 17.2692L13.5083 19.483C13.7481 19.62 14.0535 19.5367 14.1905 19.2969C14.3275 19.0572 14.2442 18.7517 14.0044 18.6147L12.4573 17.7308C13.2831 17.6266 14.0833 17.3782 14.813 16.9955C15.8034 16.476 16.6319 15.7256 17.2106 14.8151C17.7895 13.9041 18.0967 12.8665 18.0967 11.8071C18.0967 10.7476 17.7895 9.71 17.2106 8.79901Z' fill='%23866AF6'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12ZM12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23Z' fill='url(%23paint0_linear_3494_2742)'/%3E%3Ccircle cx='12' cy='12' r='11.5' stroke='url(%23paint1_linear_3494_2742)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_3494_2742' x1='1.6' y1='25.2' x2='29.2' y2='-8.9407e-08' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.208333' stop-color='%238B6DFF'/%3E%3Cstop offset='1' stop-color='%23FE8484'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_3494_2742' x1='-9' y1='27.5' x2='23' y2='1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.270833' stop-color='%238B6DFF'/%3E%3Cstop offset='1' stop-color='%23FE8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
}
}
if (avatarsize=="avatarsmall") {
@media screen and (min-width: 900px) {
/* Small avatar */
.css-oies6c,
.css-13tht1l,
.css-g2goff {
border-radius: 20px;
height: 320px;
left: 0.6%;
max-width: 320px;
padding: 0px;
transition: 0.3s linear;
width: 320px;
}
/* Put chat and textarea more on right*/
.css-1lbk8wf {
bottom: 20px;
padding-left: 350px;
padding-right: 10px;
width: 100vw;
}
}
}
if avatarcustomsize {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
border-radius: 20px;
height: avatarcustomsizevalue;
left: 0.6%;
max-width: avatarcustomsizevalue;
padding: 0px;
transition: 0.3s linear;
width: avatarcustomsizevalue;
}
/* Put chat and textarea more on right*/
.css-1lbk8wf {
bottom: 20px;
padding-left: 30px + avatarcustomsizevalue;
padding-right: 10px;
width: 100vw;
}
}
}
if (avatarsize=="avatarhidden") {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
display: none;
height: 0px;
width: 0px;
}
.css-1lbk8wf {
bottom: 20px;
padding-left: 25px;
right: 10px;
width: 100vw;
}
}
/* Avatar choice */
if avatarchoice {
.css-oies6c,
.css-1bwrjj6 {
height: 0px;
}
.css-13tht1l {
background: url(avatarchoiceurl) no-repeat;
background-size: cover;
max-width: avatarsize;
}
if avatarzoom {
@media screen and (min-width: 900px) {
.css-13tht1l:hover {
border-radius: 0px;
height: 933px;
left: -12px;
max-width: 933px;
top: 0px;
width: 933px;
z-index: 9999;
}
}
@media screen and (min-height: 1080px) {
.css-13tht1l:hover {
border-radius: 0px;
height: 1080px;
left: -10px;
max-height: 1080px;
max-width: 1080px;
top: 0px;
width: 1080px;
z-index: 9999;
}
}
@media screen and (height: 1080px) {
.css-13tht1l:hover {
border-radius: 0px;
height: 1080px;
left: -10px;
max-height: 1080px;
max-width: 1080px;
top: 0px;
width: 1080px;
z-index: 9999;
}
}
}
/* Avatar position */
if (avatarposition=="avatarlargemiddle") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l {
position: absolute;
top: 8vh;
}
}
}
if (avatarposition=="avatarlargetop") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 0vh;
}
}
}
if (avatarposition=="avatarlargebottom") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 30vh;
}
}
}
if (avatarposition=="avatarsmallmiddle") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 28vh;
}
}
}
if (avatarposition=="avatarsmalltop") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 0vh;
}
}
}
if (avatarposition=="avatarsmallbottom") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 50vh;
}
}
}
}
if avatarrectangle {
/* Bigger avatar */
.css-oies6c,
.css-13tht1l,
.css-g2goff {
border-radius: 20px;
max-height: calc(100% - 40px);
min-height: calc(100% - 40px);
padding: 0px;
top: 0px;
transition: 0.3s linear;
width: 100%;
}
.css-1bwrjj6 {
object-fit: cover;
}
if avatarchoice {
.css-oies6c,
.css-1bwrjj6,
.css-g2goff {
border-radius: 20px;
height: 0px;
padding: 0px;
top: 0px;
transition: 0.3s linear;
}
.css-13tht1l {
background: url(avatarchoiceurl);
background-position: center;
background-size: cover;
}
}
if avatarrectanglecustomheight {
/* Bigger avatar */
.css-oies6c,
.css-13tht1l,
.css-g2goff {
border-radius: 20px;
max-height: avatarrectanglecustomheightvalue;
min-height: avatarrectanglecustomheightvalue;
padding: 0px;
top: 0px;
transition: 0.3s linear;
width: 100%;
}
.css-1bwrjj6 {
object-fit: cover;
}
if avatarchoice {
.css-oies6c,
.css-1bwrjj6,
.css-g2goff {
border-radius: 20px;
height: 0px;
padding: 0px;
top: 0px;
transition: 0.3s linear;
}
.css-13tht1l {
background: url(avatarchoiceurl);
background-position: center;
background-size: cover;
}
}
}
}
if avatarcircle {
.css-13tht1l,
.css-g2goff {
border-radius: 50%;
}
}
if avatarchat {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
display: none;
height: 0px;
width: 0px;
}
.css-1lbk8wf {
left: 0px;
padding: 0px 10px 0px 15px;
width: 100vw;
}
if avatarchoice {
.css-1lbk8wf {
left: 0px;
padding: 0px 10px 0px 0px;
width: 100vw;
}
/* kin bubbles */
.css-1lbk8wf > .css-yhhl9h {
position: relative;
}
.css-1lbk8wf > .css-yhhl9h:before {
background-image: url(avatarchoiceurl);
background-position: center;
background-size: cover;
border-radius: 16px;
content: "";
height: 106px;
left: -1.5%;
position: absolute;
top: 0px;
width: 50px;
}
.css-teti0a {
margin-left: 90px;
}
.css-127w3cl {
transform: translateY(60%);
}
}
if ouravatarchoice {
.css-1lbk8wf {
left: 0px;
padding-right: 5px;
width: 100vw;
}
/* Our bubbles */
.css-1lbk8wf > .css-1dhayxc {
position: relative;
}
.css-1lbk8wf > .css-1dhayxc:after {
background-image: url(ouravatarchoiceurl);
background-position: center;
background-size: cover;
border-radius: 16px;
content: "";
height: 106px;
right: 0.5%;
position: absolute;
top: 0px;
width: 50px;
}
.css-1j9xj7u {
margin-right: 80px;
}
.css-yhhl9h,
.css-1dhayxc {
padding: 16px 0px 16px 0px;
}
}
}
if avatarzoom {
@media screen and (min-width: 900px) {
.css-oies6c:hover,
.css-v2kfba:hover,
.css-13tht1l:hover,
.css-1bwrjj6:hover {
border-radius: 0px;
bottom: 0px !important;
left: 0px;
max-width: 933px;
min-height: 100%;
position: fixed !important;
top: 0px !important;
z-index: 9999;
}
}
@media screen and (min-height: 1080px) {
.css-oies6c:hover,
.css-v2kfba:hover,
.css-13tht1l:hover,
.css-1bwrjj6:hover {
border-radius: 0px;
bottom: 0px !important;
left: 0px;
max-width: 1080px;
min-height: 100%;
position: fixed;
top: 0px !important;
z-index: 9999;
}
}
@media screen and (height: 1080px) {
.css-oies6c:hover,
.css-v2kfba:hover,
.css-13tht1l:hover,
.css-1bwrjj6:hover {
border-radius: 0px;
bottom: 0px !important;
left: 0px;
max-width: 1080px;
min-height: 100%;
position: fixed;
top: 0px !important;
z-index: 9999;
}
}
}
/* System bubbles style */
if (systembubblesstyle=="systembubblesleft") {
.css-1y2ps2x {
display: none;
}
.css-do4s31 {
background-color: transparent;
border: none;
bottom: 0px;
color: var(--chakra-colors-secondaryWhite);
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr;
--menu-shadow: transparent;
opacity: 1 !important;
position: fixed;
transform: translateX(48px) !important;
visibility: visible !important;
z-index: unset !important;
}
.css-do4s31 button: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%);
border-radius: 20px;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px, rgba(254, 133, 133, 0.4) 5px 5px 5px 5px, rgba(254, 133, 133, 0.4) 5px -5px 5px 5px, rgba(139, 110, 255, 0.4) -5px 5px 5px 5px;
box-sizing: border-box;
background-clip: text;
color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.css-94x4at {
background-color: transparent;
}
.css-1lbk8wf {
margin-bottom: 60px;
}
.css-b9bzmp {
background-color: var(--chakra-colors-secondaryBlack);
bottom: 3px;
display: flex;
flex-direction: column;
padding: 5px 0px 10px 0px;
position: fixed;
right: 10px;
width: 71.3%;
}
.css-94x4at {
display: flex;
justify-content: center;
}
.chakra-menu__menuitem.css-94x4at:nth-child(1) {
order: 3;
}
.chakra-menu__menuitem.css-94x4at:nth-child(2) {
order: 1;
}
.chakra-menu__menuitem.css-94x4at:nth-child(3) {
order: 2;
}
.chakra-menu__menuitem.css-94x4at:nth-child(4) {
order: 4;
}
}
if (systembubblesstyle=="systembubblesdark") {
.css-do4s31,
.css-94x4at{
background-color: #161616;
border-color: #6C6C6C;
color: var(--chakra-colors-secondaryWhite);
}
.css-100dd8p {
gap: 50px !important;
flex-direction: row-reverse !important;
}
.css-1lbk8wf {
margin-bottom: 60px;
}
.css-b9bzmp {
background-color: var(--chakra-colors-secondaryBlack);
bottom: 3px;
display: flex;
flex-direction: column;
padding: 5px 0px 10px 20px;
position: fixed;
right: 10px;
width: 100%;
}
.css-1y2ps2x {
color: var(--chakra-colors-secondaryWhite);
margin-left: 50px;
}
.css-do4s31 {
display: grid;
}
.css-do4s31 button: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;
}
.chakra-menu__menuitem.css-94x4at:nth-child(1) {
order: 3;
}
.chakra-menu__menuitem.css-94x4at:nth-child(2) {
order: 1;
}
.chakra-menu__menuitem.css-94x4at:nth-child(3) {
order: 2;
}
.chakra-menu__menuitem.css-94x4at:nth-child(4) {
order: 4;
}
}
if blurcontent {
.css-1hmzamm,
.css-gnnge1,
.css-isgfme,
.css-1j9xj7u > .css-0 > p,
.css-teti0a > .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: 0px;
}
/* Initial letter */
.css-70qvj9 {
height: 0px;
}
.css-yhhl9h > .css-teti0a > .css-70qvj9 > .css-127w3cl,
.css-yhhl9h > .css-teti0a > .css-70qvj9 > .css-1yzcrgj,
.css-yhhl9h > .css-teti0a > .css-70qvj9 > .css-1rxo5q3 {
height: 40px;
margin-left: -70px;
width: 40px;
}
.css-yhhl9h {
margin-left: 45px;
}
.css-qfa1mb {
display: none;
}
}
/* Buttons hover */
if iconshover {
img:hover,
svg:hover {
border-radius: 20px;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px, rgba(254, 133, 133, 0.4) 5px 5px 5px 5px, rgba(254, 133, 133, 0.4) 5px -5px 5px 5px, rgba(139, 110, 255, 0.4) -5px 5px 5px 5px;
box-sizing: border-box;
}
}
}
@-moz-document url-prefix("https://kindroid.ai/groupchat/") {
/* ===================================================================================================================================
Group chat
=================================================================================================================================== */
/* Remove the space between the header and the chat*/
.css-g2goff {
padding: 0px;
}
/* Removes top right icons in header */
.css-1rdhwuq {
display: none !important;
}
/* Resize header */
.css-x3odei {
background-color: var(--chakra-colors-secondaryBlack) !important;
max-width: 100%;
padding: 0px 10px 0px 0.3%;
z-index: unset !important;
}
/* Add border to textarea when focus */
textarea: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 */
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 rounded corners for our bubbles */
.css-1j9xj7u {
border-radius: 20px 8px 20px 20px;
}
/* Modification of date for our bubbles */
.css-1j9xj7u > .css-70qvj9 > .css-dhnoom {
margin-bottom: 10px;
}
/* Modification of rounded corners for AI bubbles */
.css-teti0a,
.css-1ulhpcc,
.css-1tg26k8,
.css-1t9c0mz {
border-radius: 8px 20px 20px 20px;
}
/* Modification of date for AI bubbles */
.css-teti0a > .css-70qvj9 > .css-dhnoom {
margin-bottom: 10px;
margin-left: 40px;
}
/* Bigger text in bubbles and textarea */
if bubblescolor {
.css-6obdga,
.css-1gi22a8 {
color: bubblescolor;
}
}
if bubblestext {
.css-6obdga,
.css-1gi22a8 {
font-size: bubblestext;
line-height: 1.2;
}
}
if chattextareasize {
.css-14m2to8 {
font-size: chattextareasize;
line-height: 1.2;
}
}
if kinbubblesbgcolor {
.css-teti0a {
background-color: kinbubblesbgcolor;
}
}
if kinbubblesbgurl {
.css-teti0a {
background-color: kinbubblesbgcolor;
background-image: url(kinbubblesbgurl);
}
}
if ourbubblesbgcolor {
.css-1j9xj7u {
background: ourbubblesbgcolor;
}
}
if ourbubblesbgurl {
.css-1j9xj7u {
background-color: ourbubblesbgcolor;
background-image: url(ourbubblesbgurl);
}
}
/* 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-1jby15f {
right: 10px;
transform: translateY(-25%);
}
.css-100dd8p {
gap: 90px !important;
flex-direction: row-reverse !important;
}
/* Background */
if (bgchoice=="heartbg") {
.css-1lbk8wf {
background: url(https://i.ibb.co/fYQkYyc/heart-pattern.png) bgcolor fixed 100% !important;
}
}
if (bgchoice=="nobg") {
/* No background */
.css-1lbk8wf {
background: var(--chakra-colors-secondaryBlack) !important;
}
}
if (bgchoice=="custombg") {
/* Custom background */
.css-1lbk8wf {
background: url(custombgurl) bgcolor fixed 100% !important;
}
}
if bgcolor {
.css-1lbk8wf {
background-color: bgcolor;
}
}
/* Actions texts */
if (actionsstyle=="actionsdefault") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: rgb(168, 168, 168) !important;
font-style: italic !important;
}
}
if (actionsstyle=="asterisks") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksbold") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalic") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalicsamecolor") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="bold") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalic") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalicsamecolor") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="noitalic") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-style: normal !important;
}
}
if (actionsstyle=="samecolor") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
}
}
if actionscolor {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: actionscolor !important;
}
}
if gradientregenerate {
/* Regenerate icon */
.css-1wmt28i [alt="regenerate"] {
display: none;
}
.css-100dd8p > .css-1wmt28i:nth-child(2) {
background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5867 4.06587C10.347 3.92887 10.0415 4.01219 9.90455 4.25195C9.76755 4.49172 9.85087 4.79714 10.0906 4.93413L11.6381 5.81827C10.8127 5.92258 10.013 6.17089 9.28372 6.5534C8.29328 7.07289 7.46478 7.82324 6.88614 8.73374C6.30718 9.64472 6 10.6823 6 11.7418C6 12.8013 6.30718 13.8389 6.88613 14.7499C7.03425 14.9829 7.34325 15.0518 7.57631 14.9037C7.80937 14.7556 7.87823 14.4466 7.73012 14.2135C7.25025 13.4584 7 12.6061 7 11.7418C7 10.8775 7.25025 10.0252 7.73012 9.27011C8.2103 8.51455 8.90471 7.8814 9.74821 7.43898C10.4493 7.07127 11.2309 6.84723 12.0373 6.78201L10.0481 8.2027C9.82337 8.36319 9.77131 8.67547 9.9318 8.90018C10.0923 9.1249 10.4046 9.17696 10.6293 9.01647L14.4613 6.27964L10.5867 4.06587Z' fill='url(%23paint0_linear_3494_2742)'/%3E%3Cpath d='M17.2106 8.79901C17.0625 8.56595 16.7535 8.49709 16.5204 8.6452C16.2873 8.79332 16.2185 9.10232 16.3666 9.33538C16.8465 10.0905 17.0967 10.9428 17.0967 11.8071C17.0967 12.6714 16.8465 13.5237 16.3666 14.2788C15.8864 15.0343 15.192 15.6675 14.3485 16.1099C13.6469 16.4779 12.8646 16.702 12.0575 16.767L14.0469 15.3462C14.2717 15.1857 14.3237 14.8734 14.1632 14.6487C14.0027 14.424 13.6905 14.3719 13.4658 14.5324L9.63372 17.2692L13.5083 19.483C13.7481 19.62 14.0535 19.5367 14.1905 19.2969C14.3275 19.0572 14.2442 18.7517 14.0044 18.6147L12.4573 17.7308C13.2831 17.6266 14.0833 17.3782 14.813 16.9955C15.8034 16.476 16.6319 15.7256 17.2106 14.8151C17.7895 13.9041 18.0967 12.8665 18.0967 11.8071C18.0967 10.7476 17.7895 9.71 17.2106 8.79901Z' fill='%23866AF6'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12ZM12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23Z' fill='url(%23paint0_linear_3494_2742)'/%3E%3Ccircle cx='12' cy='12' r='11.5' stroke='url(%23paint1_linear_3494_2742)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_3494_2742' x1='1.6' y1='25.2' x2='29.2' y2='-8.9407e-08' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.208333' stop-color='%238B6DFF'/%3E%3Cstop offset='1' stop-color='%23FE8484'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_3494_2742' x1='-9' y1='27.5' x2='23' y2='1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.270833' stop-color='%238B6DFF'/%3E%3Cstop offset='1' stop-color='%23FE8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
}
}
/* No avatar */
.css-1gei8v4 {
width: 100vw;
}
.css-1lbk8wf {
bottom: 20px;
padding-right: 10px;
width: 100vw;
}
.css-yhhl9h {
margin-left: 10px !important;
}
/* Modofication of Continue conversation button */
.css-snc6k5,
.css-1huuq74,
.css-wgxnqr {
color: var(--chakra-colors-secondaryWhite);
font-size: 17px;
}
.css-snc6k5:hover,
.css-1huuq74:hover,
.css-wgxnqr: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;
}
/* System bubbles style */
.css-do4s31,
.css-94x4at{
background-color: #161616;
border-color: #6C6C6C;
color: var(--chakra-colors-secondaryWhite);
}
.css-100dd8p {
gap: 50px !important;
flex-direction: row-reverse !important;
}
.css-1lbk8wf {
margin-bottom: 72px;
}
.css-b9bzmp {
background-color: var(--chakra-colors-secondaryBlack);
bottom: 20px;
position: absolute;
right: 10px;
width: calc(100% - 20px);
}
.css-1y2ps2x {
color: var(--chakra-colors-secondaryWhite);
margin-left: 50px;
}
if blurcontent {
.css-1hmzamm,
.css-gnnge1,
.css-reootw,
.css-1j9xj7u > .css-0 > p,
.css-teti0a > .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: 0px;
}
/* Initial letter */
.css-70qvj9 {
height: 0px;
}
.css-yhhl9h > .css-teti0a > .css-70qvj9 > .css-127w3cl,
.css-yhhl9h > .css-teti0a > .css-70qvj9 > .css-1yzcrgj,
.css-yhhl9h > .css-teti0a > .css-70qvj9 > .css-1rxo5q3 {
height: 40px;
margin-left: -75px;
width: 40px;
}
.css-yhhl9h {
margin-left: 50px;
}
.css-qfa1mb {
display: none;
}
}
/* Buttons hover */
if iconshover {
img:hover,
svg:hover {
border-radius: 20px;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px, rgba(254, 133, 133, 0.4) 5px 5px 5px 5px, rgba(254, 133, 133, 0.4) 5px -5px 5px 5px, rgba(139, 110, 255, 0.4) -5px 5px 5px 5px;
box-sizing: border-box;
}
}
}
@-moz-document url("https://kindroid.ai/selfies") {
/* ===================================================================================================================================
Selfies page
=================================================================================================================================== */
/* Wide selfie page */
.css-1ivym2n,
.css-10ytma2 {
max-width: 100%;
}
.css-fskrnz {
width: 84vh;
}
/* Gallery */
if (bgchoice=="heartbg") {
.css-ezgmhy {
background: url(https://i.ibb.co/fYQkYyc/heart-pattern.png) bgcolor fixed 100% !important;
gap: 20px;
justify-content: center;
z-index: 9999 !important;
}
}
if (bgchoice=="nobg") {
/* No background */
.css-ezgmhy {
background: var(--chakra-colors-secondaryBlack) !important;
gap: 20px;
justify-content: center;
z-index: 9999 !important;
}
}
if (bgchoice=="custombg") {
/* Custom background */
.css-ezgmhy {
background: url(custombgurl) bgcolor fixed 100% !important;
gap: 20px;
justify-content: center;
z-index: 9999 !important;
}
}
if bgcolor {
.css-ezgmhy {
background-color: bgcolor;
gap: 20px;
justify-content: center;
z-index: 9999 !important;
}
}
.css-3vu8ng,
.css-kuf6b {
height: auto;
width: 290px;
}
/* Kin's name */
.css-6gs9hh {
text-align: center;
top: 0px;
position: absolute;
width: 100%;
}
.css-1h018x8 {
color: var(--chakra-colors-secondaryWhite);
}
.css-1z0jlm7 {
color: var(--chakra-colors-secondaryWhite);
font-size: 18px;
padding-top: 5px;
text-align: center;
}
/* Selfies tokens */
.css-18467a {
position: absolute;
right: 32px;
top: 0px;
}
/* Tags */
.css-2q07gq {
z-index: 9999;
}
.css-ewo462,
.css-1fm8jup > * {
justify-content: end;
padding-right: 32px;
}
/* Put Request image button at the top */
if requestimage {
@media screen and (min-width: 900px) {
.css-65tag0 {
left: -41%;
margin-bottom: 37.5%;
position: absolute;
}
}
@media screen and (height: 1080px) {
.css-65tag0 {
left: -41%;
margin-bottom: 46%;
position: absolute;
}
}
@media screen and (height: 1300px) {
.css-65tag0 {
left: -41%;
margin-bottom: 50%;
position: absolute;
}
}
@media screen and (min-height: 1760px) {
.css-65tag0 {
left: -41%;
margin-bottom: 37.5%;
position: absolute;
}
}
}
/* Request selfie */
.css-105olw3 {
width: 96%;
}
.css-1jva3og {
font-size: 18px;
}
/* Request selfie avatar settingd */
.css-1o815t8 {
max-width: 90%;
}
.css-de3hrx {
height: 512px !important;
width: 512px !important;
}
.css-79elbk {
margin-left: 90% !important;
height: 512px !important;
width: 512px !important;
}
.css-dfpqc0 {
margin-left: 70% !important;
height: 512px !important;
width: 512px !important;
}
.css-79elbk > img:hover,
.css-dfpqc0 > img:hover {
height: 512px !important;
width: 512px !important;
}
.css-1jcj2pk {
color: white;
}
/* 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;
}
/* Image border on hover */
if imageborder {
.css-1vuqv5m,
.css-1regj17 {
border-radius: 16px;
}
.css-1vuqv5m > .css-1regj17:hover {
height: 100%;
width: 100%;
}
.css-1regj17:hover {
transition: 0.2s linear;
}
.css-1regj17:hover {
border-radius: 16px;
height: 300px;
width: 300px;
}
.css-3vu8ng:hover {
border-radius: 16px;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px, rgba(254, 133, 133, 0.4) 5px 5px 5px 5px, rgba(254, 133, 133, 0.4) 5px -5px 5px 5px, rgba(139, 110, 255, 0.4) -5px 5px 5px 5px;
transition: 0.2s linear;
}
}
/* 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);
}
}
/* Selfie modal */
.css-fskrnz {
height: 809px;
width: 80vw;
}
.css-vwi0gr {
height: 773px;
left: 0px;
margin-bottom: 0px;
position: absolute;
width: auto;
}
.transform-component-module_wrapper__SPB86 {
border-radius: 0px 0px 0px 16px;
}
.css-1qxap43 {
left: 52%;
max-height: max-content;
position: absolute;
}
.css-k4oaha {
width: 760px;
}
.css-bq8vjq {
font-size: 20px;
margin-top: 4rem;
text-align: justify;
padding-right: 20px;
word-break: normal;
}
.css-151uqsi {
color: var(--chakra-colors-secondaryWhite);
font-size: 20px;
position: absolute;
right: 50px;
top: 1rem;
}
.css-1kzpbjv {
font-size: 20px;
position: absolute;
top: 1rem;
}
}
@-moz-document url("https://kindroid.ai/voicecall") {
/* ===================================================================================================================================
Voicecall page
=================================================================================================================================== */
/* Bigger text */
.css-7wdzg1,
.css-14mmx5r,
.css-1vqt2yh {
font-size: 18px;
}
/* Avatar choice */
if avatarchoice {
.css-j9wpg1 {
height: 0px;
}
.css-1a84nil {
background: url(avatarchoiceurl) border-box;
background-size: cover;
border-color: rgb(40, 40, 40);
border-radius: 50%;
border-style: solid;
height: 380px;
width: 380px;
}
}
}
@-moz-document url("https://kindroid.ai/faqs") {
/* FAQs page */
.css-1udr2et {
max-width: 100% !important;
}
.css-51kqi6 {
text-align: center;
}
/* Background */
if (bgchoice=="heartbg") {
.css-1e3klk3 {
background: url(https://i.ibb.co/fYQkYyc/heart-pattern.png) bgcolor fixed 100% !important;
}
}
if (bgchoice=="nobg") {
/* No background */
.css-1e3klk3 {
background: var(--chakra-colors-secondaryBlack) !important;
}
}
if (bgchoice=="custombg") {
/* Custom background */
.css-1e3klk3 {
background: url(custombgurl) bgcolor fixed 100% !important;
}
}
if bgcolor {
.css-1e3klk3 {
background-color: bgcolor;
}
}
}
@-moz-document url("https://kindroid.ai/legal") {
/* Terms & Privacy page */
.css-1pgxq2r {
max-width: 100% !important;
}
.css-1pgxq2r > h1 {
font-size: 42px;
font-weight: bold;
line-height: 48px;
}
}
@-moz-document url("https://www.feedough.com/stable-diffusion-prompt-generator/") {
/* Hide scrollbars */
:root ::-webkit-scrollbar {
overflow: hidden !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
-moz-overflow-style: none !important;
-webkit-overflow-style: none !important;
width: 0px !important;
}
::-webkit-scrollbar {
overflow: hidden !important;
display: none !important;
width: 0px !important;
}
/* Hide content of iframe */
#thrive-header > div > div.symbol-section-in.tve-default-state.tcb-mp > div > div > div:nth-child(2),
#thrive-header > div > div.symbol-section-in.tve-default-state.tcb-mp > div > div > div:nth-child(3),
#tve_editor > div > div.thrv_wrapper.thrv-page-section.tcb-window-width,
#tve_editor > div > div.thrv_wrapper.thrv-page-section.tcb-window-width > div.tve-page-section-out,
#tve_editor > div:nth-child(5) > div.tve-page-section-in > div > div > div:nth-child(1),
#tve_tcb2_personal-brand-v1-2-step-ribbon_m1 > div,
.tl-state-root.tve-leads-ribbon.tve-trigger-hide.tve-tl-anim.tve-leads-track-ribbon-75.tl-anim-slide_top.tve-leads-triggered,
.thrv-lp-block,
#ai_x_generator_65c5fc4f631f6_form > div > label,
#tve_editor > div:nth-child(4),
#tve_editor > div:nth-child(7),
#tve_editor > div:nth-child(8),
#tve_editor > div:nth-child(9),
#tve_editor > div:nth-child(10),
body > div:nth-child(40) {
display: none !important;
height: 0px !important;
}
/* Show only what we need in iframe */
body {
overflow: hidden !important;
}
.ai-x-generator-container {
margin-top: 0px !important;
}
.thrv_wrapper {
margin: 0px !important;
padding: 0px !important;
}
.tcb-col {
border: 0px !important;
}
#tve_editor > div:nth-child(6) {
overflow: hidden !important;
position: fixed !important;
}
[data-css=tve-u-18a4637eccf] {
max-width: 100% !important;
min-width: 100% !important;
width: 100% !important;
}
}
