Put Kindroid on whole page for screen with width 900px and more and add customizations features.
/* ==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.28
@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 in bubbles" 0
@var color bubblescolor "Bubbles font color" #CBCBCB
@var text bubblestext "Bubbles font size" 20px
@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" 20px
@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.28';
--chatversionpc: 'Chat script PC v1.10';
--chatversionmobile: 'Chat script mobile v1.10';
--selfiesversionpc: 'Selfies script PC v1.04';
--selfiesversionmobile: 'Selfies script mobile v1.04';
--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;
}
/* 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 FAQs and Terms & Privacy in blue */
.css-4i8yew,
.css-yk3l44 > h2:nth-child(2) {
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;
}
/* 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%;
}
.css-i8vj7y > .css-1ly87gx > .css-1yxzzu5 > div:nth-child(4) > .css-dhnoom {
position: absolute;
right: 50px;
top: 30%;
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%;
}
.css-i8vj7y > .css-1ly87gx > .css-1yxzzu5 > div:nth-child(5) > .css-dhnoom {
position: absolute;
right: 50px;
top: 68%;
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/[email protected]/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 rounded corners for AI bubbles */
.css-teti0a,
.css-1ulhpcc,
.css-1tg26k8,
.css-1t9c0mz {
border-radius: 8px 20px 20px 20px;
}
/* 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: 2px + bubblestext;
}
}
if chattextareasize {
.css-ymugf1 {
font-size: chattextareasize;
line-height: 2px + chattextareasize;
}
}
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 (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: 72%;
}
.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 rounded corners for AI bubbles */
.css-teti0a,
.css-1ulhpcc,
.css-1tg26k8,
.css-1t9c0mz {
border-radius: 8px 20px 20px 20px;
}
/* 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: 2px + bubblestext;
}
}
if chattextareasize {
.css-14m2to8 {
font-size: chattextareasize;
line-height: 2px + chattextareasize;
}
}
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;
}
}
/* 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-13da5b {
display: none;
}
.css-1dq4ssc {
padding-bottom: 30px;
}
.css-1dq4ssc,
.css-2cd1of {
gap: 20px;
justify-content: center;
}
.css-1fltgj7 {
padding: 0px 40px;
}
.css-fskrnz {
width: 84vh;
}
.css-3vu8ng,
.css-kuf6b {
height: auto;
width: 290px;
}
.css-j8mh8q,
.css-mtk9ei {
color: var(--chakra-colors-secondaryWhite);
font-size: 18px;
}
.css-105olw3 {
max-width: 96%;
}
/* Request selfie button */
.css-1ygmn3g {
max-width: 1060px;
}
/* Load More button */
.css-dvxtzn,
.css-1q03dzc {
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;
height: fit-content;
padding-bottom: var(--chakra-space-2);
padding-top: var(--chakra-space-2);
width: fit-content;
}
.css-1q03dzc:hover {
text-decoration: none;
}
.css-1q03dzc,
.css-1mepe2v {
color: var(--chakra-colors-pureWhite);
font-size: 18px;
}
/* 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-jh1suc,
.css-15g5rpl,
.css-dhtaha,
.css-15g5rpl svg path {
color: var(--chakra-colors-red);
}
/* Modification of text under Kin's name selfies */
.css-1z0jlm7 {
font-size: 18px;
padding-top: 5px;
padding-bottom: 10px;
}
/* Blur content */
if blurcontent {
.css-1regj17 {
filter: blur(50px);
-moz-filter: blur(50px);
-webkit-filter: blur(50px);
}
}
/* Put Request image button at the top */
if requestimage {
@media screen and (min-width: 900px) {
/* Put Request image button at the top */
.css-65tag0 {
margin-bottom: 39%;
margin-left: 40%;
position: fixed;
z-index: 9999;
}
}
@media screen and (height: 1080px) {
/* Put Request image button at the top */
.css-65tag0 {
margin-bottom: 46.8%;
margin-left: 40%;
position: fixed;
z-index: 9999;
}
}
@media screen and (min-height: 1760px) {
/* Put Request image button at the top */
.css-65tag0 {
margin-bottom: 39%;
margin-left: 40%;
position: fixed;
z-index: 9999;
}
}
}
/* Selfie modal */
.css-fskrnz {
height: 809px;
width: 80vw;
}
.css-8rcl6n {
height: 775px;
left: 0px;
margin-bottom: 0px;
position: absolute;
width: auto;
}
.css-1d9ljy8 {
border-radius: 0px 0px 0px 16px;
}
.css-1qxap43 {
left: 52%;
max-height: max-content;
position: absolute;
}
.css-bq8vjq {
font-size: 20px;
margin-top: 4rem;
text-align: justify;
word-break: normal;
}
.css-151uqsi {
color: var(--chakra-colors-secondaryWhite);
font-size: 20px;
position: absolute;
right: 30px;
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;
}
}