/* ==UserStyle==
@name Kindroid responsive + customizations v3.xx
@description Kindroid website is more suitable for wide screens + add customizations (theme) + add new features (scripts).
@version 3.43.16
@author BreatFR (https://breat.fr)
@namespace https://gitlab.com/breatfr
@homepageURL https://gitlab.com/breatfr/kindroid
@supportURL https://discord.gg/fSgDHmekfG
@license BY-NC-ND; https://creativecommons.org/licenses/by-nc-nd/4.0/
@preprocessor stylus
@var select actionsstyle "Actions texts style" {
"Default": "actionsdefault",
"Asterisks": "asterisks",
"Asterisks + bold": "asterisksbold",
"Asterisks + bold + no italic": "asterisksboldnoitalic",
"Bold": "bold",
"Bold + no italic": "boldnoitalic",
"No italic": "noitalic"
}
@var color actionscolor "Actions texts color choice" rgb(136, 136, 136)
@var checkbox avatarchoice "Avatar choice" 0
@var text avatarchoiceurl "Avatar choice 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 mode (for chat page require: Avatar choice & Avatar choice for us, System bubbles Dark is recommanded, for group chat page require Avatar choice for us & Avatar Rectangle)" 0
@var checkbox ouravatarchoice "Avatar choice for us" 0
@var text ouravatarchoiceurl "Avatar choice 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 avataron "Avatar on" {
"Left side": "leftside",
"Right side": "rightside"
}
@var select bgchoice "Background choice" {
"❤️ Hearts": "heartbg",
"⬜ None": "nobg",
"❔ Custom": "custombg"
}
@var color bgcolor "Background color" #101010
@var text custombgurl "Background URL" "URL between quotes"
@var checkbox blurcontent "Blur content" 0
@var color bubblescolor "Bubbles font color" #cbcbcb
@var text fontsize "Custom font size" 1.2rem
@var checkbox gradientregenerate "Gradient regenerate icon" 1
@var checkbox hidenames "Hide names in bubbles" 1
@var checkbox manuallyedited "Manually edited" 1
@var color kinbubblesbgcolor "Kin bubbles background color" rgb(33, 27, 25)
@var text kinbubblesbgurl "Kin bubbles background URL" "URL between quotes"
@var color ourbubblesbgcolor "Our bubbles background color" rgb(27, 28, 30)
@var text ourbubblesbgurl "Our bubbles background URL" "URL between quotes"
@var select systembubblesstyle "System bubbles style" {
"Left": "systembubblesleft",
"Dark": "systembubblesdark",
"Dark Wide": "systembubblesdarkwide"
}
@var checkbox iconshover "Icons hover" 1
@var checkbox hidetrialbar "Hide trial bar" 1
@var checkbox imageborder "Image border on hover" 1
@var checkbox requestimage "Request image button at top" 1
@var checkbox continueconvauto "Replace Continue/Pause conversation in group chat by an icon (only for automatic mode)" 1
@var checkbox continueconvmanual "Optimize the avatar list in group chat for wide screen (only for manual mode)" 0
@var checkbox continueconvmanualcenter "Optimize the avatar list in group chat for wide screen and center them (only for manual mode)" 0
@var checkbox modalsborder "Modals border" 1
@var checkbox biggerscreensharing "Bigger Screen Sharing (don't use if captions enabled)" 0
@var checkbox nosharring "No sharring" 0
@var checkbox noscrollbars "No scrollbars" 1
@var checkbox notranslateicon "No translate icon" 0
@var checkbox nodiscord "No discord banner" 0
==/UserStyle== */
/* ==Credits==
Website https://breat.fr
facebook https://www.facebook.com/breatfroff
mastodon https://mastodon.social/@breat_fr
vk https://vk.com/breatfroff
X (twitter) https://x.com/breatfroff
==/Credits== */
/* ==Support==
ko-fi https://ko-fi.com/breatfr
PayPal https://paypal.me/breat
==/Support== */
@-moz-document domain("kindroid.ai") {
/* ===================================================================================================================================
Whole kindroid domain
=================================================================================================================================== */
/* Versions */
:root {
--themeversionpc: 'TPC v3.43.16';
--themeversionmobile: 'TM v1.0.1';
--customavatarsgroupchat: 'CAG v1.0.0';
--chatversionpc: 'CPC v2.0.8';
--chatversionmobile: 'CM v2.0.8';
--selfiesversionpc: 'SPC v2.0.1';
--selfiesversionmobile: 'SM v2.0.1';
--notepadversion: 'NP v2.0.4';
--trversion: 'TR v2.0.2';
--tvversion: 'TV v2.0.3';
--author: ' by BreatFR (https://breat.fr)';
--install1: ' usercssjs.breat.fr ';
--install2: ' gitlab.com/breatfr/kindroid ';
--space: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
--support1: ' ko-fi.com/breatfr ';
--support2: ' paypal.me/breat ';
--fontsize: fontsize;
}
@media screen and (min-width: 900px) {
.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: "Versions (hover to show)";
content: var(--themeversionpc) ' · ' var(--themeversionmobile)' · ' var(--customavatarsgroupchat) ' · ' var(--chatversionpc) ' · ' var(--chatversionmobile) ' · ' var(--selfiesversionpc) ' · ' var(--selfiesversionmobile) ' · ' var(--notepadversion) ' · ' var(--trversion) ' · ' var(--tvversion) var(--author) '\A''Install: ' url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_breat.fr.png") var(--install1) url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_gitlab.png") var(--install2) var(--space) ' Support me: ' url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_ko-fi.png") var(--support1) url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_paypal.png") var(--support2);
display: block;
font-family: var(--chakra-fonts-PoppinsRegular);
font-size: 1.2rem;
left: 50%;
position: absolute;
text-align: center;
top: 49%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: 100%;
white-space: pre-line;
}
@-moz-document url-prefix() {
/* Fix for firefox */
.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;
display: inline-block;
font-family: var(--chakra-fonts-PoppinsRegular);
font-size: 1.2rem;
left: 0;
position: absolute;
text-align: center;
top: 0;
transform: translate(0, 0);
width: 100%;
white-space: pre-line;
}
body {
overflow-y: hidden !important;
}
ion-app > div > div > div > div:nth-of-type(2) > div:nth-of-type(2) {
margin-right: 25px;
}
}
}
/* New discord */
.css-16stolr::before {
background: var(--chakra-colors-primaryBlack);
border: 5px solid red;
border-radius: .5em;
color: var(--chakra-colors-primaryWhite);
content: 'New link to get help and comments: https://discord.gg/fSgDHmekfG. \A This message stay here during some days and will be removed in a future update, sorry for the inconvenience. 🙏';
display: block;
font-family: var(--chakra-fonts-PoppinsRegular);
font-size: 30px;
left: 0px;
padding: 10px 0;
position: fixed;
right: 0px;
text-align: center;
top: 60px;
width: 99%;
white-space: pre-line;
z-index: 1;
}
if nodiscord {
.css-16stolr::before {
display: none;
}
}
/* Hide Translate button */
if notranslateicon {
.translate {
display: none;
}
}
/* Header background color */
.css-x3odei,
.css-z0osps {
background-color: var(--chakra-colors-secondaryBlack) !important;
max-width: 100%;
padding: 0 10px !important;
}
/* Hide titles in main menu top right icons */
.css-x3odei > div:nth-of-type(1) > p,
.css-x3odei > div:last-child,
.css-z0osps > div > div:nth-of-type(2) {
display: none;
}
/* Put icons in header clickable again */
.css-x3odei > div:nth-of-type(1),
.css-z0osps > div:nth-of-type(1) {
z-index: 1;
}
if noscrollbars {
* {
scrollbar-width: none;
}
.css-10ytma2,
:root ::-webkit-scrollbar {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
-moz-overflow-style: none !important;
-webkit-overflow-style: none !important;
}
::-webkit-scrollbar {
display: none;
width: 0;
}
}
/* Loading bar */
#nprogress .bar {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
}
/* Actions texts */
if (actionsstyle=="actionsdefault") || actionscolor {
.css-1cki8gt > span,
.css-1joa3p8 > span {
color: actionscolor !important;
}
}
if (actionsstyle=="asterisks") {
.css-1cki8gt > span:before,
.css-1cki8gt > span:after,
.css-1joa3p8 > span:before,
.css-1joa3p8 > span:after {
content: "*" !important;
}
}
if (actionsstyle=="asterisksbold") {
.css-1cki8gt > span:before,
.css-1cki8gt > span:after,
.css-1joa3p8 > span:before,
.css-1joa3p8 > span:after {
content: "*" !important;
}
.css-1cki8gt > span,
.css-1joa3p8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalic") {
.css-1cki8gt > span:before,
.css-1cki8gt > span:after,
.css-1joa3p8 > span:before,
.css-1joa3p8 > span:after {
content: "*" !important;
}
.css-1cki8gt > span,
.css-1joa3p8 > span {
font-style: normal !important;
font-weight: bold !important;
}
}
/* if (actionsstyle=="asterisksboldsamecolor") {
.css-1cki8gt > span:before,
.css-1cki8gt > span:after,
.css-1joa3p8 > span:before,
.css-1joa3p8 > span:after {
content: "*" !important;
}
.css-1cki8gt > span,
.css-1joa3p8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalicsamecolor") {
.css-1cki8gt > span:before,
.css-1cki8gt > span:after,
.css-1joa3p8 > span:before,
.css-1joa3p8 > span:after {
content: "*" !important;
}
.css-1cki8gt > span,
.css-1joa3p8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-style: normal !important;
font-weight: bold !important;
}
} */
if (actionsstyle=="bold") {
.css-1cki8gt > span,
.css-1joa3p8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalic") {
.css-1cki8gt > span,
.css-1joa3p8 > span {
font-style: normal !important;
font-weight: bold !important;
}
}
/* if (actionsstyle=="boldsamecolor") {
.css-1cki8gt > span,
.css-1joa3p8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalicsamecolor") {
.css-1cki8gt > span,
.css-1joa3p8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-style: normal !important;
font-weight: bold !important;
}
} */
if (actionsstyle=="noitalic") {
.css-1cki8gt > span,
.css-1joa3p8 > span {
font-style: normal !important;
}
}
/* if (actionsstyle=="samecolor") {
.css-1cki8gt > span,
.css-1joa3p8 > span {
color: var(--chakra-colors-primaryWhite) !important;
}
}*/
/* Blur */
if blurcontent {
/* email in menu */
ion-app > div > div > div > div:nth-of-type(2) > div:nth-of-type(1) > div > div > div:nth-of-type(1) > p,
/* Bubbles content */
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(2) > div:nth-of-type(1) > .css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) > p,
.css-yhhl9h p:not(.css-dhnoom),
/* Voicecall captions */
.css-mcoft3 p {
filter: blur(8px);
-moz-filter: blur(8px);
-webkit-filter: blur(8px);
}
.css-1dhayxc img {
filter: blur(20px);
-moz-filter: blur(20px);
-webkit-filter: blur(20px);
}
}
/* Images uploaded */
.css-1bicc40 {
justify-content: flex-end;
}
.css-1dhayxc img.css-1hmzamm {
border-radius: .5em;
transition: margin 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.css-1dhayxc img.css-1hmzamm:hover {
border-radius: .5em;
transform: scale(2);
transform-origin: right center;
z-index: 5;
}
/* Modals border */
if modalsborder {
.chakra-modal__content {
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
rgba(139, 110, 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;
}
}
/* Modals size */
.chakra-modal__content {
max-width: 90%;
margin: 60px auto;
}
/* Modal after claiming daily reward */
.css-1offyti {
max-width: 700px;
}
/* Modals's close button */
.chakra-modal__close-btn svg {
color: var(--chakra-colors-primaryWhite);
height: 20px;
margin: 20px 20px 0 0;
position: fixed;
width: 20px;
}
.chakra-modal__close-btn:hover::before {
color: var(--chakra-colors-primaryWhite);
content: "Close";
font-size: 20px;
line-height: 20px;
margin-right: 5.5%;
margin-top: .85%;
position: fixed;
z-index: 1;
}
}
@-moz-document url("https://landing.kindroid.ai/") {
/* Landing page */
nav > div:nth-of-type(1) {
max-width: 100% !important;
}
}
@-moz-document url-prefix("https://kindroid.ai/home") {
/* ===================================================================================================================================
Chat page
=================================================================================================================================== */
/* ========================================================================
Header and menu
======================================================================== */
if hidetrialbar {
.css-r1nv3m {
display: none;
}
}
/* Tooltips */
.css-x3odei > div > button:nth-of-type(2):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%;
}
.css-x3odei > div > button:nth-of-type(3):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%;
}
.css-x3odei > div > button:nth-of-type(4):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 Biling in yellow */
ion-app > div > div > div > div:nth-of-type(2) > div:nth-of-type(1) > div > div > div:nth-of-type(2) > button:nth-of-type(2) > div > p {
color: var(--chakra-colors-yellow-400);
}
/* Put User Guide and Announcements and Terms in blue */
ion-app > div > div > div > div:nth-of-type(2) > div:nth-of-type(1) > div > div > div:nth-of-type(2) > div:nth-of-type(7) > p,
ion-app > div > div > div > div:nth-of-type(2) > div:nth-of-type(2) > h2:nth-of-type(1),
ion-app > div > div > div > div:nth-of-type(2) > div:nth-of-type(2) > h2:nth-of-type(2) {
color: var(--chakra-colors-blue-400);
}
/* Put contact in green */
ion-app > div > div > div > div:nth-of-type(2) > div:nth-of-type(2) > h2:nth-of-type(3) {
color: var(--chakra-colors-green-400);
}
/* Put Log out in orange */
ion-app > div > div > div > div:nth-of-type(2) > div:nth-of-type(2) > h2:nth-of-type(4) {
color: var(--chakra-colors-orange);
}
ion-app > div > div > div > div:nth-of-type(2) > div:nth-of-type(2) > h2:nth-of-type(4)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M304 336v40a40 40 0 01-40 40H104a40 40 0 01-40-40V136a40 40 0 0140-40h152c22.09 0 48 17.91 48 40v40M368 336l80-80-80-80M176 256h256' fill='none' stroke='%23cbcbcb' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E");
display: inline-block;
content: "";
margin-right: 5px;
height: 24px;
vertical-align: middle;
width: 24px;
}
/* Put email in white */
ion-app > div > div > div > div:nth-of-type(2) > div:nth-of-type(1) > div > div > div:nth-of-type(1) > p {
color: var(--chakra-colors-secondaryWhite);
padding-bottom: 5px;
padding-right: 5px;
}
/* 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 */
body:has(.css-1raxatq) ion-app > div > div > div > div:nth-of-type(2) {
max-width: 100% !important;
width: 100% !important;
}
/* Remove free space at the top of menu */
.css-1raxatq > div:nth-of-type(2),
.css-1raxatq > div:nth-of-type(2) > div:nth-of-type(1) {
gap: 0;
overflow-y: auto;
padding-top: 0;
}
/* Email box */
body:has(.css-1raxatq) ion-app > div > div > div > div:nth-of-type(2) > div:nth-of-type(1) > div > div > div:nth-of-type(1) {
align-self: center;
color: var(--chakra-colors-secondaryWhite);
gap: 0;
margin-top: 5%;
padding-top: 5px;
}
/* Subcriber icon */
body:has(.css-1raxatq) ion-app > div > div > div > div:nth-of-type(2) > div:nth-of-type(1) > div > div > div:nth-of-type(1) > img {
height: auto !important;
width: 44px;
}
/* Menu */
body:has(.css-1raxatq) ion-app > div > div > div > div:nth-of-type(2) > div:nth-of-type(1) > div > div > div:nth-of-type(2) {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
min-height: 100%;
margin-top: 3%;
width: 100%;
}
body:has(.css-1raxatq) ion-app > div > div > div > div:nth-of-type(2) > div:nth-of-type(1) > div > div > div:nth-of-type(2) > button,
body:has(.css-1raxatq) ion-app > div > div > div > div:nth-of-type(2) > div:nth-of-type(1) > div > div > div:nth-of-type(2) > div {
align-items: center;
box-sizing: border-box;
flex-basis: calc(33.33% - 20px);
justify-content: center;
margin: 10px;
}
body:has(.css-1raxatq) ion-app > div > div > div > div:nth-of-type(2) > div:nth-of-type(2) {
bottom: 2em;
justify-content: space-evenly;
width: 100%;
}
body:has(.css-1raxatq) ion-app > div > div > div > div:nth-of-type(2) > div:nth-of-type(2) > h2 {
font-size: 20px;
}
/* Subscribe button */
body:has(.css-1raxatq) ion-app > div > div > div > div:nth-of-type(2) > div:nth-of-type(1) > div > div > div:nth-of-type(2) > button {
order: 2;
}
/* Bigger menu text */
body:has(.css-1raxatq) ion-app > div > div > div > div:nth-of-type(2) > div:nth-of-type(1) > div > div > div:nth-of-type(2) * {
font-size: 30px;
}
/* More options icons */
[aria-label="more-options"] {
color: var(--chakra-colors-white);
font-size: 36px;
line-height: 20px;
right: 10px;
}
[aria-label="more-options"]:hover > span {
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%);
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;
}
/* Rewards modal */
.css-116cmre {
margin: auto;
}
.css-116cmre *:not(.css-1cct4wf) {
font-size: fontsize;
line-height: 1.5;
}
if nosharring {
ion-app > div > div > div > div:nth-of-type(2) > div:nth-of-type(1) > div > div > div:nth-of-type(2) > div:nth-of-type(6),
.css-116cmre > div > .css-1ebprri,
.css-116cmre > div > p:nth-of-type(3),
.css-116cmre > div > .css-qsuiuj {
display: none;
}
.css-116cmre {
max-width: 700px;
}
}
/* Backstory */
.css-1raxatq > .css-8onqts > .css-188uayk > .css-j7qwjs > .css-12ac5cx {
flex-direction: row;
}
/* My kindroids */
/* Reorder kins */
.css-1raxatq > div:nth-of-type(2) > div > div:nth-of-type(2) > button.css-1123s1d svg,
.css-1raxatq > div:nth-of-type(2) > div > div:nth-of-type(2) > button.css-1123s1d::before {
min-height: 40px;
}
.css-1raxatq > div:nth-of-type(2) > div > div:nth-of-type(2) > button.css-1123s1d::before {
align-items: center;
content: "Reorder Kindroids";
display: flex;
font-size: 20px;
height: 40px;
margin-right: 10px;
}
/* Reorder kins/groups menu */
.css-1sdqm6h {
align-items: center;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
justify-content: space-evenly;
padding-bottom: 0;
}
.css-1sdqm6h > div {
flex-basis: fit-content;
height: 100%;
}
.css-1sdqm6h > div > div {
flex-direction: column;
}
/* Avatar list in generate avatar */
.css-az6ase {
width: calc(50% - 50px);
}
/* Kins list */
.css-1raxatq > div:nth-of-type(2) > div > div:nth-of-type(3):not(.css-j98run) {
justify-content: space-evenly;
}
.css-1raxatq > div:nth-of-type(2) > div > div:nth-of-type(3) > div.css-12jdxbf:not(:last-child) {
height: auto;
width: 300px;
}
/* Kin's name */
.css-w9iwt8 .css-1cfkm3f {
text-align: center;
}
/* Create kin button */
.css-1raxatq > div:nth-of-type(2) > div > div:nth-of-type(3) > div:last-child:not(.css-8jhcex) {
flex-basis: 100%;
height: 108px;
justify-content: center;
}
.css-1raxatq > div:nth-of-type(2) > div > div:nth-of-type(3) > div:last-child > div {
width: 300px;
}
.css-1raxatq > div:nth-of-type(2) > div > div:nth-of-type(3) > div:last-child > div > div:not(.css-12l3553) {
font-size: 48px !important;
line-height: 48px;
margin-bottom: 0 !important;
}
/* Create Kin modal */
.css-1h84tgn {
max-width: 100%;
}
/* Reorder Group */
.css-1raxatq > div:nth-of-type(2) > div > div:nth-of-type(4) > button.css-1123s1d svg,
.css-1raxatq > div:nth-of-type(2) > div > div:nth-of-type(4) > button.css-1123s1d::before {
min-height: 40px;
}
.css-1raxatq > div:nth-of-type(2) > div > div:nth-of-type(4) > button.css-1123s1d::before {
align-items: center;
content: "Reorder Groups";
display: flex;
font-size: 20px;
height: 40px;
margin-right: 10px;
}
/* Groups list */
.css-1raxatq > div:nth-of-type(2) > div > div:nth-of-type(5) {
flex-direction: row;
gap: 20px;
justify-content: space-evenly;
}
.css-1raxatq > div:nth-of-type(2) > div > div:nth-of-type(5) > div.css-r2mper,
.css-1raxatq > div:nth-of-type(2) > div > div:nth-of-type(5) > div.css-f35ydg {
width: 300px;
}
/* Create group button */
.css-1raxatq > div:nth-of-type(2) > div > div:last-child > div.css-vuv5ru {
width: 300px;
}
/* Delete kin */
body:has(.css-1raxatq) {
.css-r6z5ec[style*="visibility: hidden"] > .css-do4s31,
.css-r6z5ec[style*="visibility: visible"] > .css-do4s31 {
background: transparent;
border: none;
height: 0 !important;
width: 0 !important;
}
.css-r6z5ec[style*="visibility: visible"] .css-do4s31[style*="visibility: visible"] > .css-94x4at,
.css-r6z5ec[style*="visibility: visible"] .css-do4s31[style*="visibility: visible"] > .css-94x4at:hover {
background: var(--chakra-colors-secondaryBlack) !important;
background-clip: initial !important;
border: none;
-o-text-fill-color: var(--chakra-colors-red) !important;
-moz-text-fill-color: var(--chakra-colors-red) !important;
-ms-text-fill-color: var(--chakra-colors-red) !important;
-webkit-text-fill-color: var(--chakra-colors-red) !important;
color: var(--chakra-colors-red) !important;
height: max-content;
border-radius: 5px;
position: absolute;
top: -2vh;
left: -1vw;
padding: 10px;
visibility: visible !important;
}
.css-r6z5ec[style*="visibility: visible"][data-popper-placement="bottom-end"] .css-do4s31[style*="visibility: visible"] > .css-94x4at,
.css-r6z5ec[style*="visibility: visible"][data-popper-placement="bottom-end"] .css-do4s31[style*="visibility: visible"] > .css-94x4at:hover {
background: var(--chakra-colors-secondaryBlack) !important;
background-clip: initial !important;
border: none;
-o-text-fill-color: var(--chakra-colors-red) !important;
-moz-text-fill-color: var(--chakra-colors-red) !important;
-ms-text-fill-color: var(--chakra-colors-red) !important;
-webkit-text-fill-color: var(--chakra-colors-red) !important;
color: var(--chakra-colors-red) !important;
height: max-content;
border-radius: 5px;
position: absolute;
top: -2vh;
right: -9vw !important;
padding: 10px;
visibility: visible !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: 0;
}
.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%;
}
/* Create a new group chat */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 {
align-items: start;
flex-direction: row;
flex-wrap: wrap;
}
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:first-child,
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > p {
width: 100%;
}
/* Modal's title */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > p:first-child {
text-align: center;
}
/* Modal's 1st explain */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > p:nth-of-type(2) {
font-size: 1.2rem;
line-height: 1.5;
}
/* Kin list */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > .css-1wy8ffp {
justify-content: space-between;
}
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > .css-1wy8ffp p {
font-size: 24px;
line-height: 32px;
text-align: center;
}
/* Group name */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:nth-of-type(2) {
order: 1;
width: calc(50% - 10px);
}
/* Group context */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:nth-of-type(3) {
order: 3;
width: calc(50% - 10px);
}
/* Turn-taking style */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:nth-of-type(4) {
order: 2;
width: calc(50% - 10px);
}
/* (Advanced) shared memory */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:nth-of-type(5) {
order: 4;
width: calc(50% - 10px);
}
/* Create group button */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > button {
margin-left: auto;
margin-top: -6%;
order: 5;
max-width: 50%;
}
/* Share kins */
.css-dkzp5w {
justify-content: center;
}
.css-dkzp5w > .css-156z0wo {
height: auto;
width: 300px;
}
.css-1kxonj9 > .css-1qo2cb6 {
height: 300px;
width: 100%;
}
.css-1qo2cb6 > .css-pdvefo > .css-cqzojc > .css-79elbk {
aspect-ratio: 1 / 1;
border-radius: 16px;
height: 300px;
margin: 0 auto;
width: auto;
}
/* Avoid scroll problems */
.css-15b277d {
overflow-y: auto;
}
/* Display name etc visible content */
.css-1raxatq > .css-xp7tub > .css-1lxwves {
min-height: max-content;
margin: 20px 0;
}
/* 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 */
button > .css-1cfkm3f::after {
background-image: url("https://unpkg.com/[email protected]/dist/svg/chevron-down-outline.svg");
background-size: contain;
background-repeat: no-repeat;
content: "";
display: inline-block;
filter: invert(79%) sepia(6%) saturate(37%) hue-rotate(161deg) brightness(92%) contrast(86%);
height: 20px;
width: 20px;
}
/* Danger zone: delete account */
.css-184zh9d::before,
.css-184zh9d::after {
content: "⚠️";
}
.css-184zh9d {
bottom: 150px;
font-size: 18px;
font-weight: 600;
margin-left: auto;
width: max-content;
}
.css-19zv6py {
font-weight: 600;
font-size: 18px;
width: max-content;
}
/* Journal entries */
.css-16wjzov .css-1pwenrv {
position: relative;
}
.css-16wjzov > div > div > div:nth-of-type(1) > button {
left: 0;
top: 60px;
position: absolute;
}
.css-16wjzov > div > div > div:nth-of-type(1) > button svg {
fill: var(--chakra-colors-primaryWhite);
}
.css-16wjzov > div > div > div:nth-of-type(1) > button::after {
color: var(--chakra-colors-primaryWhite);
content: "Click here to create a journal entry.";
font-size: 20px !important;
font-weight: normal;
margin-left: 5px;
}
.css-16wjzov .css-1thrbn {
margin-top: 5%;
}
/* Custom avatar menu page & in create a new Kin & my avatar */
.css-1slmhpt {
flex-direction: row;
}
.css-1slmhpt > .css-1qo2cb6 {
justify-content: center;
}
.css-1slmhpt > .css-1qo2cb6 > .css-pdvefo {
display: flex;
justify-content: center;
}
.css-1slmhpt > .css-1qo2cb6 > .css-pdvefo > .css-de3hrx {
width: 480px;
}
.css-1slmhpt > .css-1qo2cb6 > .css-pdvefo > .css-1kksemg {
left: 16px;
right: auto;
}
.css-1slmhpt > .css-1qo2cb6 > .css-pdvefo > .css-de3hrx > .css-79elbk {
border-radius: 16px;
}
.css-19ovozl > .css-j7qwjs > p:nth-of-type(4) {
position: static !important;
}
/* My avatar */
.css-pwmocd > p:nth-of-type(2) {
margin-bottom: 1em;
}
.css-1slmhpt > .css-1qo2cb6 > .css-pdvefo > .css-1ydyiz2 {
left: 16px;
right: auto;
}
/* Swipe arrows */
.avatarSlider .swiper-button-next::after,
.avatarSlider .swiper-button-prev::after {
color: var(--chakra-colors-primaryWhite);
}
.css-tf0j9o > .chakra-collapse > .css-1fm8jup > .css-dhnoom {
padding-bottom: 20px;
width: 47% !important;
}
.css-1v3caum > .css-tf0j9o > .chakra-collapse > .css-1fm8jup > .css-dhnoom {
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;
}
/* Voice menu */
.css-2xph3x > div:last-child img {
margin-right: 34px;
}
/* Remove the space between the header and the chat*/
.css-1i0s7d {
margin-top: 0;
padding: 0;
}
}
/* ===================================================================================================================================
Chat
=================================================================================================================================== */
/* Background */
ion-app > div > div > div > div:nth-of-type(1) {
height: calc(100% - 45px);
}
if (bgchoice=="heartbg") {
ion-app > div > div > div > div:nth-of-type(1) {
background: url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/heart-pattern.png") bgcolor no-repeat 100% !important;
background-size: cover !important;
}
}
if (bgchoice=="nobg") {
/* No background */
ion-app > div > div > div > div:nth-of-type(1) {
background: var(--chakra-colors-secondaryBlack) !important;
}
}
if (bgchoice=="custombg") {
ion-app > div > div > div > div:nth-of-type(1) {
background: url(custombgurl) bgcolor no-repeat 100% !important;
background-size: cover !important;
}
.css-b9bzmp {
background-color: transparent !important;
}
.css-b9bzmp textarea {
opacity: 1;
}
}
if (bgchoice=="custombg") && (systembubblesstyle=="systembubblesleft") {
.css-94x4at {
background-color: rgba(39, 38, 38, .1) !important;
border-radius: 1em;
display: flex;
max-height: 41px;
margin-top: 12px;
justify-content: center;
}
}
if bgcolor {
ion-app > div > div > div > div:nth-of-type(1) {
background-color: bgcolor;
}
}
/* Add border to textarea when focus */
textarea:focus {
border: 0;
border-radius: 32px;
box-shadow: rgb(139, 109, 255) 0 0 0 1px,
rgb(254, 132, 132) 0 0 0 2px;
}
/* Remove the resize icon on textarea on chat page */
textarea:not(:focus),
textarea:focus {
resize: none;
}
/* Hide reduce button on avatar */
@media screen and (min-width: 900px) {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div > div {
display: none;
}
}
/* Modification of rounded corners for our bubbles */
.css-1dhayxc > div:nth-of-type(2) {
border-radius: 20px 8px 20px 20px !important;
}
/* Modification of rounded corners for AI bubbles */
.css-yhhl9h > div:nth-of-type(1) {
border-radius: 8px 20px 20px 20px;
}
if bubblescolor {
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) > div,
.css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(3) > div {
color: bubblescolor;
}
}
/* Bigger text in bubbles and textarea */
.css-1dhayxc *,
.css-yhhl9h *,
.css-dhnoom,
textarea {
font-size: fontsize !important;
line-height: 1.5 !important;
}
textarea::placeholder {
line-height: 1.5 !important;
}
if kinbubblesbgcolor {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(2) > div:nth-of-type(1) > .css-yhhl9h > div:nth-of-type(1) {
background-color: kinbubblesbgcolor;
}
}
if kinbubblesbgurl {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(2) > div:nth-of-type(1) > .css-yhhl9h > div:nth-of-type(1) {
background-color: kinbubblesbgcolor;
background-image: url(kinbubblesbgurl);
background-size: cover;
}
}
if ourbubblesbgcolor {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(2) > div:nth-of-type(1) > .css-1dhayxc > div:nth-of-type(2) {
background: ourbubblesbgcolor;
}
}
if ourbubblesbgurl {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(2) > div:nth-of-type(1) > .css-1dhayxc > div:nth-of-type(2) {
background-color: ourbubblesbgcolor;
background-image: url(ourbubblesbgurl);
background-size: cover;
}
}
/* Continue cut-off message in bubble */
.css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(3) > div > button > svg {
height: 20px;
width: 20px;
}
.css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(3) > div > button:hover::before {
content: "Continue cut-off message";
margin-bottom: 5px;
margin-right: 5px;
}
/* Put a not allowed cursor on spinner, microphone icon, play button, picture generating when needed */
/* .chakra-spinner,
.css-127w3cl,
.css-zkr1dl,
.css-jy2vee,
.css-kjafn5 [disabled] + button */
.chakra-spinner,
* [disabled] {
cursor: not-allowed;
}
if gradientregenerate {
.css-yhhl9h:last-child > div:nth-of-type(2) > div > button img {
display: none !important;
}
.css-yhhl9h:last-child > div:nth-of-type(2) > div > button {
background: url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/gradient-regenerate.svg") no-repeat;
height: 36px;
width: 36px;
}
}
/* Put recalled memories icon on right and bigger */
.css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(1) > button {
right: -2.75em !important;
z-index: 1;
}
.css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(1) > button svg {
height: 36px;
width: 36px;
}
/* Avatar on left */
if (avataron=="leftside") {
/* Avatar + chat content */
ion-app > div > div > div > div:nth-of-type(1) > div {
padding-left: 16px;
max-width: 100%;
justify-content: unset;
-webkit-box-pack: unset;
}
/* Chat content */
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(2) {
max-width: 100%;
padding: 0 16px 16px 16px;
}
/* Avatar size */
if (avatarsize=="avatarlarge") {
@media screen and (min-width: 900px) {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1),
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div img,
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div {
border-radius: 20px;
height: 512px;
max-width: 512px;
padding: 0;
transition: 0.3s linear;
width: 512px;
}
}
}
if (avatarsize=="avatarsmall") {
@media screen and (min-width: 900px) {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1),
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div img,
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div {
border-radius: 20px;
height: 320px;
left: 0.6%;
max-width: 320px;
padding: 0;
transition: 0.3s linear;
width: 320px;
}
}
}
if avatarcustomsize {
@media screen and (min-width: 900px) {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1),
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div img,
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div {
border-radius: 20px;
height: avatarcustomsizevalue;
left: 0.6%;
max-width: avatarcustomsizevalue;
padding: 0;
transition: 0.3s linear;
width: avatarcustomsizevalue;
}
}
}
if (avatarsize=="avatarhidden") {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1),
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div img,
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div {
display: none;
height: 0;
width: 0;
}
/* Put chat and textarea more on right*/
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(2) {
padding-left: 0;
}
}
/* System bubbles style */
if (systembubblesstyle=="systembubblesleft") {
.css-yhhl9h:last-child > div:nth-of-type(2) > button {
display: none;
}
body:has(.css-1raxatq) .css-do4s31 {
visibility: hidden !important;
}
body:has(.css-1x3hygh) .css-do4s31 {
align-items: center;
background-color: transparent;
border: none;
color: var(--chakra-colors-secondaryWhite);
display: grid !important;
font-size: fontsize;
height: 61px;
left: 0;
--menu-shadow: transparent;
opacity: 1 !important;
position: fixed;
row-gap: 1rem;
visibility: visible !important;
z-index: unset !important;
}
.css-do4s31 button {
justify-self: center;
width: max-content;
}
.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(139, 110, 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;
box-sizing: border-box;
background-clip: text;
color: transparent;
max-height: fit-content;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
if (avatarsize=="avatarlarge") {
.css-do4s31 {
bottom: .5em;
grid-template-columns: repeat(3, auto);
max-width: 512px;
width: 100%;
}
.css-do4s31 button {
height: 61px;
}
}
if (avatarsize=="avatarsmall") {
.css-do4s31 {
bottom: 1em;
grid-template-columns: repeat(2, auto);
max-width: 320px;
width: 100%;
}
.css-do4s31 button {
height: 30.5px;
}
}
if avatarcustomsize {
if avatarcustomsizevalue < 512px {
.css-do4s31 {
bottom: 1em;
grid-template-columns: repeat(2, auto);
max-width: avatarcustomsizevalue;
width: 100%;
}
.css-do4s31 button {
height: 30.5px;
}
}
if avatarcustomsizevalue >= 512px {
if avatarsize == "avatarlarge" {
.css-do4s31 {
bottom: .5em;
grid-template-columns: repeat(3, auto);
max-width: avatarcustomsizevalue;
width: 100%;
}
.css-do4s31 button {
height: 61px;
}
}
}
}
if (avatarsize=="avatarhidden") {
.css-do4s31 {
bottom: .5em;
grid-template-columns: repeat(3, auto);
max-width: 512px;
width: 100%;
}
.css-do4s31 button {
height: 61px;
}
.css-b9bzmp {
width: 74.5% !important;
}
}
.css-b9bzmp {
align-self: flex-end;
background-color: var(--chakra-colors-secondaryBlack);
padding: 10px;
position: static;
width: 100%;
}
.css-94x4at {
background-color: transparent;
display: flex;
justify-content: center;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(1) {
display: none;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(2) {
order: 1;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(3) {
order: 2;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(4) {
order: 3;
}
}
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-zjyen2 {
gap: 0;
padding: 0 0 16px;
}
.css-b9bzmp {
background-color: var(--chakra-colors-secondaryBlack);
padding: 10px;
position: static;
align-self: flex-end;
width: 100%;
}
.css-1y2ps2x {
color: var(--chakra-colors-secondaryWhite);
margin-left: 50px;
}
.css-do4s31 {
display: grid;
}
.css-1y2ps2x:hover,
.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;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(1) {
display: none;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(2) {
order: 1;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(3) {
order: 2;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(4) {
order: 4;
}
}
if (systembubblesstyle=="systembubblesdarkwide") {
.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-1e5303x {
gap: 0;
padding: 0 0 16px;
}
.css-16stolr {
margin-bottom: 70px;
}
.css-b9bzmp {
background-color: var(--chakra-colors-secondaryBlack);
bottom: 0;
left: 0;
right: 0;
padding: 10px !important;
position: fixed;
align-self: flex-end;
width: 100%;
}
textarea[placeholder="Message"]:not(:focus) {
height: 40px !important;
line-height: 40px;
min-height: 40px;
padding-top: 6px;
}
textarea[placeholder="Message"]:focus::placeholder {
top: 45%;
}
.css-1y2ps2x {
color: var(--chakra-colors-secondaryWhite);
margin-left: 50px;
}
.css-1y2ps2x:hover,
.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;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(1) {
display: none;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(2) {
order: 1;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(3) {
order: 2;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(4) {
order: 4;
}
}
}
/* Avatar on right */
if (avataron=="rightside") {
/* Avatar + chat content */
ion-app > div > div > div > div:nth-of-type(1) > div {
flex-direction: row-reverse;
padding-right: 16px;
max-width: 100%;
justify-content: unset;
-webkit-box-pack: unset;
}
/* Chat content */
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(2) {
max-width: 100%;
padding: 0 16px 16px 16px;
}
/* Avatar size */
if (avatarsize=="avatarlarge") {
@media screen and (min-width: 900px) {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1),
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div,
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div img,
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div video {
border-radius: 20px;
height: 512px;
max-width: 512px;
padding: 0;
transition: 0.3s linear;
width: 512px;
}
}
}
if (avatarsize=="avatarsmall") {
@media screen and (min-width: 900px) {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1),
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div,
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div img,
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div video {
border-radius: 20px;
height: 320px;
left: 0.6%;
max-width: 320px;
padding: 0;
transition: 0.3s linear;
width: 320px;
}
}
}
if avatarcustomsize {
@media screen and (min-width: 900px) {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1),
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div,
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div img,
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div video {
border-radius: 20px;
height: avatarcustomsizevalue;
left: 0.6%;
max-width: avatarcustomsizevalue;
padding: 0;
transition: 0.3s linear;
width: avatarcustomsizevalue;
}
}
}
if (avatarsize=="avatarhidden") {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1),
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div,
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div img,
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div video {
display: none;
height: 0;
width: 0;
}
/* Put chat and textarea more on right*/
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(2) {
padding-left: 10px;
}
}
/* System bubbles style */
if (systembubblesstyle=="systembubblesleft") {
.css-yhhl9h > div:nth-of-type(2) > [aria-label="more-options"] {
display: none;
}
body:has(.css-1raxatq) .css-do4s31 {
visibility: hidden;
}
body:has(.css-1x3hygh) .css-do4s31 {
align-items: center;
background-color: transparent;
border: none;
color: var(--chakra-colors-secondaryWhite);
display: grid !important;
font-size: fontsize;
height: 61px;
right: 0;
--menu-shadow: transparent;
opacity: 1 !important;
position: fixed;
row-gap: 1rem;
visibility: visible !important;
z-index: unset !important;
}
.css-do4s31 button {
justify-self: center;
width: max-content;
}
.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(139, 110, 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;
box-sizing: border-box;
background-clip: text;
color: transparent;
max-height: fit-content;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
if (avatarsize=="avatarlarge") {
.css-do4s31 {
bottom: .5em;
grid-template-columns: repeat(3, auto);
max-width: 512px;
width: 100%;
}
.css-do4s31 button {
height: 61px;
}
}
if (avatarsize=="avatarsmall") {
.css-do4s31 {
bottom: 1em;
grid-template-columns: repeat(2, auto);
max-width: 320px;
width: 100%;
}
.css-do4s31 button {
height: 30.5px;
}
}
if avatarcustomsize {
if avatarcustomsizevalue < 512px {
.css-do4s31 {
bottom: 1em;
grid-template-columns: repeat(2, auto);
max-width: avatarcustomsizevalue;
width: 100%;
}
.css-do4s31 button {
height: 30.5px;
}
}
if avatarcustomsizevalue >= 512px {
if avatarsize == "avatarlarge" {
.css-do4s31 {
bottom: .5em;
grid-template-columns: repeat(3, auto);
max-width: avatarcustomsizevalue;
width: 100%;
}
.css-do4s31 button {
height: 61px;
}
}
}
}
if (avatarsize=="avatarhidden") {
.css-do4s31 {
bottom: .5em;
grid-template-columns: repeat(3, auto);
max-width: 512px;
width: 100%;
}
.css-do4s31 button {
height: 61px;
}
.css-b9bzmp {
width: 74.5% !important;
}
}
.css-b9bzmp {
background-color: var(--chakra-colors-secondaryBlack);
padding: 10px;
position: static;
align-self: flex-end;
width: 100%;
}
.css-94x4at {
background-color: transparent;
display: flex;
justify-content: center;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(1) {
display: none;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(2) {
order: 1;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(3) {
order: 2;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.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-zjyen2 {
gap: 0;
padding: 0 0 16px;
}
.css-b9bzmp {
background-color: var(--chakra-colors-secondaryBlack);
padding: 10px;
position: static;
align-self: flex-end;
width: 100%;
}
.css-1y2ps2x {
color: var(--chakra-colors-secondaryWhite);
margin-left: 50px;
}
.css-do4s31 {
display: grid;
}
.css-1y2ps2x:hover,
.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;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(1) {
display: none;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(2) {
order: 1;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(3) {
order: 2;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(4) {
order: 4;
}
}
if (systembubblesstyle=="systembubblesdarkwide") {
.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-1e5303x {
gap: 0;
padding: 0 0 16px;
}
.css-16stolr {
margin-bottom: 70px;
}
.css-b9bzmp {
background-color: var(--chakra-colors-secondaryBlack);
bottom: 0;
left: 0;
right: 0;
padding: 10px !important;
position: fixed;
align-self: flex-end;
width: 100%;
}
textarea[placeholder="Message"]:not(:focus) {
height: 40px !important;
line-height: 40px;
min-height: 40px;
padding-top: 6px;
}
textarea[placeholder="Message"]:focus::placeholder {
top: 45%;
}
.css-1y2ps2x {
color: var(--chakra-colors-secondaryWhite);
margin-left: 50px;
}
.css-1y2ps2x:hover,
.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;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(1) {
display: none;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(2) {
order: 1;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(3) {
order: 2;
}
div[style="transform-origin: var(--popper-transform-origin); opacity: 0; visibility: hidden; transform: scale(0.8) translateZ(0px);"] > button.chakra-menu__menuitem.css-94x4at:nth-child(4) {
order: 4;
}
}
}
/* Avatar position */
if (avatarposition=="avatarlargemiddle") {
@media screen and (min-width: 900px) {
.css-ddli5j,
.css-xns6lp,
.css-owh929 {
margin-top: 8vh;
}
}
}
if (avatarposition=="avatarlargetop") {
@media screen and (min-width: 900px) {
.css-ddli5j,
.css-xns6lp,
.css-owh929 {
margin-top: 0vh;
}
}
}
if (avatarposition=="avatarlargebottom") {
@media screen and (min-width: 900px) {
.css-ddli5j,
.css-xns6lp,
.css-owh929 {
margin-top: 13vh;
}
}
}
if (avatarposition=="avatarsmallmiddle") {
@media screen and (min-width: 900px) {
.css-ddli5j,
.css-xns6lp,
.css-owh929 {
margin-top: 13vh;
}
}
}
if (avatarposition=="avatarsmalltop") {
@media screen and (min-width: 900px) {
.css-ddli5j,
.css-xns6lp,
.css-owh929 {
margin-top: 0vh;
}
}
}
if (avatarposition=="avatarsmallbottom") {
@media screen and (min-width: 900px) {
.css-ddli5j,
.css-xns6lp,
.css-owh929 {
margin-top: 23.5vh;
}
}
}
if avatarcustomposition {
@media screen and (min-width: 900px) {
.css-ddli5j,
.css-xns6lp,
.css-owh929 {
margin-top: avatarcustompositionvalue;
}
}
}
if avatarzoom {
.css-xns6lp:hover,
.css-owh929:hover,
.css-xns6lp > img:hover,
.css-owh929 > img:hover,
.css-owh929 > video:hover {
aspect-ratio: 1 / 1;
border-radius: 0 !important;
max-height: 100vh !important;
min-height: 100vh !important;
left: 0;
position: fixed !important;
top: 0 !important;
min-width: fit-content;
width: auto !important;
z-index: 9999 !important;
}
}
/* Hide System Bubbles Left when avatar zoom is enabled and when avatar is hover */
if avatarzoom && (systembubblesstyle=="systembubblesleft") {
body:has(.css-xns6lp:hover, .css-owh929:hover, .css-xns6lp > img:hover, .css-owh929 > img:hover, .css-owh929 > video:hover) .css-do4s31 {
visibility: hidden !important;
}
}
/* Avatar choice */
if avatarchoice {
.css-xns6lp > img {
display: none;
height: 0;
width: 0;
}
.css-xns6lp,
.css-owh929 {
background: url(avatarchoiceurl) no-repeat;
background-size: cover;
max-width: avatarsize;
}
/* Avatar position */
if (avatarposition=="avatarlargemiddle") {
@media screen and (min-width: 900px) {
.css-xns6lp,
.css-owh929 {
position: absolute;
top: 9vh;
}
}
}
if (avatarposition=="avatarlargetop") {
@media screen and (min-width: 900px) {
.css-xns6lp,
.css-owh929 {
position: absolute;
top: 1vh;
}
}
}
if (avatarposition=="avatarlargebottom") {
@media screen and (min-width: 900px) {
.css-xns6lp,
.css-owh929 {
position: absolute;
top: 14vh;
}
}
}
if (avatarposition=="avatarsmallmiddle") {
@media screen and (min-width: 900px) {
.css-xns6lp,
.css-owh929 {
position: absolute;
top: 13.5vh;
}
}
}
if (avatarposition=="avatarsmalltop") {
@media screen and (min-width: 900px) {
.css-xns6lp,
.css-owh929 {
position: absolute;
top: 0.6vh;
}
}
}
if (avatarposition=="avatarsmallbottom") {
@media screen and (min-width: 900px) {
.css-xns6lp,
.css-owh929 {
position: absolute;
top: 24vh;
}
}
}
if avatarcustomposition {
@media screen and (min-width: 900px) {
.css-xns6lp,
.css-owh929 {
margin-top: avatarcustompositionvalue;
}
}
}
}
if avatarrectangle {
.css-ddli5j,
.css-xns6lp,
.css-owh929,
.css-xns6lp img,
.css-owh929 img,
.css-owh929 video {
border-radius: 20px;
margin-top: 0;
min-height: 84vh !important;
padding: 0;
transition: 0.3s linear;
}
.css-xns6lp img,
.css-owh929 img,
.css-owh929 video {
object-fit: cover;
}
if avatarchoice {
.css-ddli5j {
background: none !important;
}
.css-xns6lp > img,
.css-owh929 img {
display: none;
height: 0;
width: 0;
}
.css-ddli5j,
.css-xns6lp,
.css-owh929 {
background: url(avatarchoiceurl) no-repeat;
background-position: center;
background-size: cover;
border-radius: 20px;
height: 0;
padding: 0;
top: 1.5vh;
transition: 0.3s linear;
}
}
if avatarrectanglecustomheight {
.css-ddli5j,
.css-xns6lp,
.css-owh929,
.css-xns6lp img,
.css-owh929 video {
border-radius: 20px;
max-height: avatarrectanglecustomheightvalue !important;
min-height: avatarrectanglecustomheightvalue !important;
padding: 0;
top: 1.5vh;
transition: 0.3s linear;
width: 100%;
}
.css-xns6lp img,
.css-owh929 video {
object-fit: cover !important;
}
if avatarchoice {
.css-ddli5j,
.css-xns6lp,
.css-owh929 {
background: url(avatarchoiceurl) no-repeat;
background-position: center;
background-size: cover;
border-radius: 20px;
height: 0;
padding: 0;
top: 1.5vh;
transition: 0.3s linear;
}
}
if avatarcustomposition {
.css-xns6lp,
.css-owh929 {
margin-top: avatarcustompositionvalue;
}
}
}
}
if avatarcircle {
.css-ddli5j,
.css-xns6lp,
.css-owh929 {
border-radius: 50% !important;
}
}
if avatarchat && avatarchoice && ouravatarchoice {
.css-ddli5j,
.css-xns6lp,
.css-owh929,
.css-xns6lp img,
.css-owh929 video {
display: none;
height: 0;
width: 0;
}
ion-app > div > div > div > div:nth-of-type(1) > div {
padding-left: 0;
}
.css-16stolr {
gap: 0;
width: 100%;
}
.css-yhhl9h,
.css-1dhayxc,
.css-b9bzmp {
padding: 10px 0;
}
/* kin bubbles */
.css-16stolr > .css-yhhl9h {
position: relative;
}
.css-16stolr > .css-yhhl9h:before {
background-image: url(avatarchoiceurl);
background-position: center;
background-size: cover;
border-radius: 16px;
content: "";
height: 50px;
left: -2%;
position: absolute;
top: 10px;
width: 50px;
}
.css-ip0f2e {
margin-left: 4%;
}
/* Our bubbles */
.css-16stolr > .css-1dhayxc {
position: relative;
}
.css-16stolr > .css-1dhayxc:after {
background-image: url(ouravatarchoiceurl);
background-position: center;
background-size: cover;
border-radius: 16px;
content: "";
height: 50px;
right: .5%;
position: absolute;
top: 10px;
width: 50px;
}
.css-v3ipd1 {
margin-right: 4%;
}
if avatarcircle {
.css-1dhayxc:after,
.css-yhhl9h:before {
border-radius: 50% !important;
}
}
if avatarrectangle {
.css-1dhayxc:after,
.css-yhhl9h:before {
height: 106px !important;
}
}
}
/* Hide names in bubbles to save place */
if hidenames {
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1) > p:first-child,
.css-yhhl9h .css-ppua9z {
display: none;
}
/* Initial letter */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1),
.css-yhhl9h .css-70qvj9 {
height: 0;
}
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1) > p:last-child,
.css-yhhl9h > div > div .css-dhnoom {
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;
font-family: var(--chakra-fonts-PoppinsRegular), sans-serif;
font-size: fontsize;
font-weight: normal;
left: calc(50% - 10px);
margin-bottom: 5px;
position: absolute;
transform: translateX(-50%);
white-space: nowrap;
}
[src*="/_next/static/media/playIcon"],
[src*="/_next/static/media/stopIcon"],
.css-70qvj9 .chakra-spinner {
height: 36px;
margin-left: -70px;
position: absolute;
top: 50%;
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-o-transition: transform 0.3s ease;
-ms-transition: transform 0.3s ease;
-moz-transition: transform 0.3s ease;
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
width: 36px;
}
.css-70qvj9:has(.css-qfa1mb) {
[src*="/_next/static/media/playIcon"],
[src*="/_next/static/media/stopIcon"],
.css-70qvj9 .chakra-spinner {
height: 36px;
margin-left: -70px;
position: absolute;
top: 50%;
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-o-transition: transform 0.3s ease;
-ms-transition: transform 0.3s ease;
-moz-transition: transform 0.3s ease;
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
width: 36px;
}
.css-qfa1mb {
height: 36px;
margin-left: -70px;
pointer-events: none;
position: absolute;
top: 50%;
-o-transform: translateY(25%);
-ms-transform: translateY(25%);
-moz-transform: translateY(25%);
-webkit-transform: translateY(25%);
transform: translateY(25%);
-o-transition: transform 0.3s ease;
-ms-transition: transform 0.3s ease;
-moz-transition: transform 0.3s ease;
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
width: 36px;
}
}
.css-yhhl9h {
margin-left: 50px;
}
/* Edit icon */
.css-1dhayxc > .css-100dd8p {
align-self: center;
padding: 0;
}
}
/* Icons hover */
if iconshover {
/* Header icons */
body:has(.css-1x3hygh) {
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(1):hover img,
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(2):hover svg,
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(3):hover svg,
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(4):hover svg {
display: none;
}
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(1):hover,
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(2):hover,
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(3):hover,
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(4):hover {
height: 48px;
width: 48px;
}
/* Hamburger icon */
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(1):hover {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.16602 12.8335H34.8327' stroke='url(%23A)' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M9.16602 22H34.8327' stroke='url(%23A)' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M9.16602 31.1665H34.8327' stroke='url(%23A)' stroke-width='2' stroke-linecap='round'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
/* Selfies icon */
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(2):hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M10 18C10 14.2288 10 12.3431 11.1716 11.1716C12.3431 10 14.2288 10 18 10H26C29.7712 10 31.6569 10 32.8284 11.1716C34 12.3431 34 14.2288 34 18V26C34 29.7712 34 31.6569 32.8284 32.8284C31.6569 34 29.7712 34 26 34H18C14.2288 34 12.3431 34 11.1716 32.8284C10 31.6569 10 29.7712 10 26V18Z' stroke='url(%23A)' stroke-width='2'%3E%3C/path%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M32 25.2522L30.8691 24.1213L30.8226 24.0747C30.1958 23.4478 29.6557 22.9077 29.165 22.5334C28.6392 22.1322 28.0543 21.8284 27.3336 21.8284C26.6128 21.8284 26.028 22.1322 25.5021 22.5334C25.0115 22.9077 24.4714 23.4478 23.8446 24.0747L23.798 24.1213L23.382 24.5373C22.8855 25.0338 22.5914 25.3242 22.3631 25.4938L22.3531 25.5011L22.3465 25.4906C22.1975 25.2483 22.0323 24.8695 21.7557 24.2241L21.2467 23.0365L21.2153 22.9631C20.7149 21.7955 20.2955 20.8167 19.8628 20.1133C19.4102 19.3778 18.8198 18.7356 17.8929 18.5571C16.9661 18.3786 16.1794 18.7556 15.486 19.2705C14.8231 19.7628 14.0701 20.5158 13.1719 21.4141L13.1719 21.4141L13.1155 21.4705L12 22.586V25.4144L14.5297 22.8847C15.4993 21.9151 16.1483 21.2698 16.6784 20.8762C17.192 20.4948 17.3995 20.4989 17.5147 20.521C17.6299 20.5432 17.8241 20.6165 18.1593 21.1614C18.5053 21.7237 18.8682 22.5639 19.4084 23.8243L19.9174 25.012L19.9442 25.0745L19.9442 25.0745C20.1846 25.6356 20.4071 26.1549 20.6431 26.5386C20.8987 26.954 21.293 27.4173 21.9593 27.5457C22.6257 27.674 23.1638 27.3903 23.5554 27.0995C23.9171 26.8309 24.3166 26.4313 24.7481 25.9996L24.7962 25.9516L25.2122 25.5355C25.8989 24.8488 26.3443 24.4065 26.7153 24.1234C27.0632 23.8579 27.2259 23.8284 27.3336 23.8284C27.4412 23.8284 27.6039 23.8579 27.9519 24.1234C28.3229 24.4065 28.7682 24.8488 29.4549 25.5355L31.9598 28.0404L31.9908 28.0094C31.9993 27.4328 32 26.7703 32 25.9998V25.2522ZM22.2169 25.586C22.2165 25.5862 22.2163 25.5863 22.2163 25.5863C22.2163 25.5864 22.2177 25.5859 22.2207 25.5846C22.2189 25.5852 22.2176 25.5857 22.2169 25.586ZM22.445 25.6278C22.4473 25.6297 22.4484 25.6309 22.4484 25.631C22.4484 25.6311 22.4473 25.6301 22.445 25.6278Z' fill='url(%23A)'%3E%3C/path%3E%3Ccircle cx='28' cy='16' r='2' fill='url(%23B)'%3E%3C/circle%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3ClinearGradient id='B' x1='-9' y1='27.5' x2='23' y2='1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.271' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
/* Voicecall icon */
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(3):hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' focusable='false' class='chakra-icon css-1a25qu'%3E%3Cpath fill='none' stroke='url(%23A)' stroke-width='2' d='M30.32 11.654l-.946-.947a1 1 0 00-1.414 0l-3.92 3.92a1 1 0 000 1.413l1.598 1.598a.71.71 0 01.133.82 16.351 16.351 0 01-7.313 7.313.71.71 0 01-.82-.133L16.04 24.04a1 1 0 00-1.414 0l-3.919 3.92a1 1 0 000 1.414l.947.946a6 6 0 007.842.558l3.875-2.907a22.994 22.994 0 004.6-4.6l2.907-3.875a6 6 0 00-.558-7.842z'%3E%3C/path%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
/* Rewards icon */
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(4):hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' focusable='false' class='chakra-icon css-1a25qu'%3E%3Cpath d='M10 18.4C10 16.1502 10 15.0252 10.5729 14.2366C10.758 13.982 10.982 13.758 11.2366 13.5729C12.0252 13 13.1502 13 15.4 13H28.6C30.8498 13 31.9748 13 32.7634 13.5729C33.018 13.758 33.242 13.982 33.4271 14.2366C34 15.0252 34 16.1502 34 18.4V19.6C34 19.9716 34 20.1574 33.9754 20.3129C33.8398 21.1687 33.1687 21.8398 32.3129 21.9754C32.1574 22 31.9716 22 31.6 22V22V28C31.6 30.8284 31.6 32.2426 30.7213 33.1213C29.8426 34 28.4284 34 25.6 34H18.4C15.5716 34 14.1574 34 13.2787 33.1213C12.4 32.2426 12.4 30.8284 12.4 28V22V22C12.0284 22 11.8426 22 11.6871 21.9754C10.8313 21.8398 10.1602 21.1687 10.0246 20.3129C10 20.1574 10 19.9716 10 19.6V18.4Z' stroke='url(%23A)' stroke-width='2'%3E%3C/path%3E%3Cpath d='M13 22H31' stroke='url(%23A)' stroke-width='2' stroke-linecap='square'%3E%3C/path%3E%3Cpath d='M22 12.0411C22 9.16449 18.0292 5.26319 14.8298 7.84266C13.3063 9.07132 14.0701 11.5263 15.5931 12.2632C17.1161 13 20.1639 13 20.1639 13' stroke='url(%23A)' stroke-width='2' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M22 12.0411C22 9.16449 25.9708 5.26319 29.1702 7.84266C30.6937 9.07132 29.9299 11.5263 28.4069 12.2632C26.8839 13 23.8361 13 23.8361 13' stroke='url(%23A)' stroke-width='2' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M22 13V34' stroke='url(%23A)' stroke-width='2'%3E%3C/path%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
}
body:has(.css-1raxatq) {
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(1):hover img {
display: none;
}
/* Back icon */
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(1):hover {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5 13L9.70711 21.7929C9.31658 22.1834 9.31658 22.8166 9.70711 23.2071L18.5 32' stroke='url(%23A)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 22.5H34' stroke='url(%23A)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
height: 48px;
width: 48px;
}
}
}
/* Suggest message button */
.css-b9bzmp > div:nth-of-type(1) > div > div > button {
top: 50%;
transform: translateY(-50%);
}
/* Manually edited */
if manuallyedited {
.css-ip0f2e {
position: relative;
}
.css-yhhl9h > div > p {
bottom: 0;
position: absolute;
right: -7em;
&::before {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
content: "Manually edited";
justify-content: end;
font-size: 14px;
visibility: visible;
}
& {
visibility: hidden;
}
}
}
}
@-moz-document url-prefix("https://kindroid.ai/groupchat/") {
/* ===================================================================================================================================
Group chat
=================================================================================================================================== */
/* Put group chat in full width */
ion-app > div > div > div > div > div {
padding: 0px 10px 0px !important;
}
ion-app > div > div > div > div > div > div:nth-of-type(2) {
max-width: 100%;
padding: 0 10px;
width: 100%;
}
/* Group context textarea */
textarea[aria-label="Group context textarea"] {
height: 300px;
}
/* Background */
if (bgchoice=="heartbg") {
ion-app > div > div > div > div:nth-of-type(1) {
background: url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/heart-pattern.png") bgcolor no-repeat 100% !important;
background-size: cover !important;
}
}
if (bgchoice=="nobg") {
/* No background */
ion-app > div > div > div > div:nth-of-type(1) {
background: var(--chakra-colors-secondaryBlack) !important;
}
}
if (bgchoice=="custombg") {
ion-app > div > div > div > div:nth-of-type(1) {
background: url(custombgurl) bgcolor no-repeat 100% !important;
background-size: cover !important;
}
.css-b9bzmp {
background-color: transparent !important;
}
.css-b9bzmp textarea {
opacity: 1;
}
}
if bgcolor {
ion-app > div > div > div > div:nth-of-type(1) {
background-color: bgcolor;
}
}
/* Add border to textarea when focus */
input:focus,
textarea:focus {
border: 0;
border-radius: 32px;
box-shadow: rgb(139, 109, 255) 0 0 0 1px,
rgb(254, 132, 132) 0 0 0 2px;
}
/* Remove the resize icon on textarea on chat page */
textarea:not(:focus),
textarea:focus {
resize: none;
}
/* Modification of rounded corners for our bubbles */
.css-1dhayxc > div:nth-of-type(2) {
border-radius: 20px 8px 20px 20px;
}
/* Modification of rounded corners for AI bubbles */
.css-yhhl9h > div:nth-of-type(2) {
border-radius: 8px 20px 20px 20px;
}
if bubblescolor {
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) > div,
.css-yhhl9h > div:nth-of-type(2) > div:nth-of-type(3) > div {
color: bubblescolor;
}
}
/* Bubble when a kin is writing */
.css-1ib244v {
align-items: center;
}
/* Group config */
.css-v79ql0 {
font-size: 18px;
text-align: center;
}
/* Avatar selection for group images */
.css-1e9g1nc {
justify-content: center;
}
.css-1e9g1nc > .css-156z0wo {
height: auto;
width: 300px;
}
.css-156z0wo > .css-15td5wo > .css-w9iwt8 > .css-1cfkm3f {
text-align: center;
}
if avatarzoom {
.css-1ngw63v:hover {
aspect-ratio: 1 / 1;
border-radius: 0 !important;
min-height: 100vh;
left: 0;
position: fixed;
top: 0 !important;
min-width: fit-content;
width: auto !important;
z-index: 9999 !important;
}
body:has(.css-1ngw63v:hover) {
.css-2jvyri {
visibility: hidden !important;
}
}
}
if avatarcircle {
.css-wz2k7u {
border-radius: 50% !important;
}
}
if avatarchat && avatarrectangle && ouravatarchoice {
/* Our bubbles */
.css-nxakwj > .css-1dhayxc {
position: relative;
}
.css-nxakwj > .css-1dhayxc:after {
align-self: center;
aspect-ratio: 9 / 16;
background-image: url(ouravatarchoiceurl);
background-position: center;
background-size: cover;
border-radius: .5em;
content: "";
display: flex;
height: auto;
max-height: 100%;
object-fit: cover;
position: absolute;
right: 0px;
width: 162px;
}
.css-v3ipd1 {
margin-right: 172px;
}
}
if avatarrectangle {
.css-ip0f2e {
height: fit-content;
margin-bottom: auto;
margin-top: auto;
}
.css-1yl4gnp {
align-items: center;
display: flex;
flex: 1;
max-height: 100%;
min-width: 162px;
max-width: 162px;
}
.css-wz2k7u {
align-items: center;
border-radius: .5em;
display: flex;
max-height: 100%;
height: auto;
width: 100%;
}
.css-1ngw63v {
aspect-ratio: 9 / 16;
border-radius: .5em;
height: auto;
max-height: 100%;
object-fit: cover;
width: 100%;
}
if hidenames {
body:not(:has(.css-r1nv3m)) {
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1) > p:first-child,
.css-yhhl9h .css-ppua9z {
display: none;
}
/* Initial letter */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1),
.css-yhhl9h .css-70qvj9 {
height: 0;
}
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1) > p:last-child,
.css-yhhl9h > div > div .css-dhnoom {
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;
left: calc(50% - 10px);
padding-bottom: 5px;
position: absolute;
transform: translateX(-50%);
white-space: nowrap;
}
[src*="/_next/static/media/playIcon"],
[src*="/_next/static/media/stopIcon"],
.css-70qvj9 .chakra-spinner {
height: 36px;
margin-left: -70px;
position: absolute;
top: 50%;
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-o-transition: transform 0.3s ease;
-ms-transition: transform 0.3s ease;
-moz-transition: transform 0.3s ease;
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
width: 36px;
}
.css-70qvj9:has(.css-qfa1mb) {
[src*="/_next/static/media/playIcon"],
[src*="/_next/static/media/stopIcon"],
.css-70qvj9 .chakra-spinner {
height: 36px;
margin-left: -70px;
position: absolute;
top: 50%;
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-o-transition: transform 0.3s ease;
-ms-transition: transform 0.3s ease;
-moz-transition: transform 0.3s ease;
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
width: 36px;
}
.css-qfa1mb {
height: 36px;
margin-left: -70px;
pointer-events: none;
position: absolute;
top: 50%;
-o-transform: translateY(25%);
-ms-transform: translateY(25%);
-moz-transform: translateY(25%);
-webkit-transform: translateY(25%);
transform: translateY(25%);
-o-transition: transform 0.3s ease;
-ms-transition: transform 0.3s ease;
-moz-transition: transform 0.3s ease;
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
width: 36px;
}
}
.css-yhhl9h > div:nth-of-type(2) {
margin-left: 47px !important;
}
/* Edit icon */
.css-1dhayxc > .css-10xfuxy {
align-self: center;
padding: 0;
}
}
body:has(.css-r1nv3m) {
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1) > p:first-child,
.css-1dhayxc + .css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(1) > p:first-child,
.css-yhhl9h + .css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(1) > p:first-child {
display: none;
}
/* Initial letter */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1),
.css-1dhayxc + .css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(1),
.css-yhhl9h + .css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(1) {
height: 0;
}
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1) > p:last-child,
.css-1dhayxc + .css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(1) > p:last-child,
.css-yhhl9h + .css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(1) > p:last-child {
position: absolute;
}
[src*="/_next/static/media/playIcon"],
[src*="/_next/static/media/stopIcon"],
.css-70qvj9 .chakra-spinner {
height: 36px;
margin-left: -70px;
position: absolute;
top: 50%;
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-o-transition: transform 0.3s ease;
-ms-transition: transform 0.3s ease;
-moz-transition: transform 0.3s ease;
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
width: 36px;
}
.css-70qvj9:has(.css-qfa1mb) {
[src*="/_next/static/media/playIcon"],
[src*="/_next/static/media/stopIcon"],
.css-70qvj9 .chakra-spinner {
height: 36px;
margin-left: -70px;
position: absolute;
top: 50%;
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-o-transition: transform 0.3s ease;
-ms-transition: transform 0.3s ease;
-moz-transition: transform 0.3s ease;
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
width: 36px;
}
.css-qfa1mb {
height: 36px;
margin-left: -70px;
pointer-events: none;
position: absolute;
top: 50%;
-o-transform: translateY(25%);
-ms-transform: translateY(25%);
-moz-transform: translateY(25%);
-webkit-transform: translateY(25%);
transform: translateY(25%);
-o-transition: transform 0.3s ease;
-ms-transition: transform 0.3s ease;
-moz-transition: transform 0.3s ease;
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
width: 36px;
}
}
.css-yhhl9h > div:nth-of-type(2) {
margin-left: 40px !important;
}
}
}
}
/* Bigger text in bubbles and textarea */
.css-1dhayxc *,
.css-yhhl9h *,
input,
textarea {
font-size: fontsize !important;
line-height: 1.5 !important;
}
textarea::placeholder {
line-height: 1.5 !important;
}
if kinbubblesbgcolor {
ion-app > div > div > div > div > div > div:nth-of-type(2) > .css-yhhl9h > div:nth-of-type(2) {
background-color: kinbubblesbgcolor;
}
}
if kinbubblesbgurl {
ion-app > div > div > div > div > div > div:nth-of-type(2) > .css-yhhl9h > div:nth-of-type(2) {
background-color: kinbubblesbgcolor;
background-image: url(kinbubblesbgurl);
background-size: cover;
}
}
if ourbubblesbgcolor {
ion-app > div > div > div > div > div > div:nth-of-type(2) > .css-1dhayxc > div:nth-of-type(2) {
background: ourbubblesbgcolor;
}
}
if ourbubblesbgurl {
ion-app > div > div > div > div > div > div:nth-of-type(2) > .css-1dhayxc > div:nth-of-type(2) {
background-color: ourbubblesbgcolor;
background-image: url(ourbubblesbgurl);
background-size: cover;
}
}
/* Put a not allowed cursor on spinner, microphone icon, play button, picture generating when needed */
/* .chakra-spinner,
.css-zkr1dl,
.css-jy2vee,
.css-kjafn5 [disabled] + button*/
.chakra-spinner,
* [disabled] {
cursor: not-allowed;
}
if blurcontent {
ion-app > div > div > div > div > div > div:nth-of-type(1) > p,
ion-app > div > div > div > div > div > div:nth-of-type(2) > .css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) > p,
ion-app > div > div > div > div > div > div:nth-of-type(2) > .css-yhhl9h > div:nth-of-type(2) > div:nth-of-type(2) > p {
filter: blur(8px);
-moz-filter: blur(8px);
-webkit-filter: blur(8px);
}
}
if gradientregenerate {
.css-yhhl9h > div:nth-of-type(3) > div > button img {
display: none !important;
}
.css-yhhl9h > div:nth-of-type(3) > div > button {
background: url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/gradient-regenerate.svg") no-repeat;
height: 36px;
width: 36px;
}
}
/* Put recalled memories icon on right and bigger */
.css-yhhl9h > div:nth-of-type(2) > div:nth-of-type(1) > button {
right: -2.75em !important;
z-index: 1;
}
.css-yhhl9h > div:nth-of-type(2) > div:nth-of-type(1) > button svg {
height: 36px;
width: 36px;
}
/* System bubbles style */
.css-do4s31,
.css-94x4at {
background-color: #161616;
border-color: #6C6C6C;
color: var(--chakra-colors-secondaryWhite);
}
.css-r6z5ec,
.css-do4s31 {
--popper-transform-origin: top right;
}
.css-do4s31 button:hover {
background: linear-gradient(88.55deg, #8b6dff 22.43%, #fe8484 92.28%);
background: -moz-linear-gradient(88.55deg, #8b6dff 22.43%, #fe8484 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;
}
.css-1qxhwlw {
justify-content: flex-end;
max-width: 100%;
width: 100%;
}
.css-b9bzmp {
align-self: flex-end;
background-color: var(--chakra-colors-secondaryBlack);
padding-bottom: 10px;
position: static;
width: 100%;
}
.css-1y2ps2x {
color: var(--chakra-colors-secondaryWhite);
margin-left: 50px;
}
/* More options icons */
.css-1scr4a8,
.css-1y2ps2x {
font-size: 36px;
line-height: 20px;
}
.css-1scr4a8:hover,
.css-1y2ps2x:hover {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background-clip: text;
color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Manually edited */
if manuallyedited {
.css-ip0f2e {
position: relative;
}
.css-yhhl9h > div > p {
bottom: 0;
position: absolute;
right: -7em;
&::before {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
content: "Manually edited";
justify-content: end;
font-size: 14px;
visibility: visible;
}
& {
visibility: hidden;
}
}
}
if hidenames {
body:not(:has(.css-r1nv3m)) {
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1) > p:first-child,
.css-yhhl9h .css-ppua9z {
display: none;
}
/* Initial letter */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1),
.css-yhhl9h .css-70qvj9 {
height: 0;
}
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1) > p:last-child,
.css-yhhl9h > div > div .css-dhnoom {
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;
left: calc(50% - 10px);
padding-bottom: 5px;
position: absolute;
transform: translateX(-50%);
white-space: nowrap;
}
[src*="/_next/static/media/playIcon"],
[src*="/_next/static/media/stopIcon"],
.css-70qvj9 .chakra-spinner {
height: 36px;
margin-left: -76px;
position: absolute;
top: 50%;
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-o-transition: transform 0.3s ease;
-ms-transition: transform 0.3s ease;
-moz-transition: transform 0.3s ease;
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
width: 36px;
}
.css-70qvj9:has(.css-qfa1mb) {
[src*="/_next/static/media/playIcon"],
[src*="/_next/static/media/stopIcon"],
.css-70qvj9 .chakra-spinner {
height: 36px;
margin-left: -76px;
position: absolute;
top: 50%;
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-o-transition: transform 0.3s ease;
-ms-transition: transform 0.3s ease;
-moz-transition: transform 0.3s ease;
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
width: 36px;
}
.css-qfa1mb {
height: 36px;
margin-left: -76px;
pointer-events: none;
position: absolute;
top: 50%;
-o-transform: translateY(25%);
-ms-transform: translateY(25%);
-moz-transform: translateY(25%);
-webkit-transform: translateY(25%);
transform: translateY(25%);
-o-transition: transform 0.3s ease;
-ms-transition: transform 0.3s ease;
-moz-transition: transform 0.3s ease;
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
width: 36px;
}
}
}
body:has(.css-r1nv3m) {
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1) > p:first-child,
.css-1dhayxc + .css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(1) > p:first-child,
.css-yhhl9h + .css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(1) > p:first-child {
display: none;
}
/* Initial letter */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1),
.css-1dhayxc + .css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(1),
.css-yhhl9h + .css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(1) {
height: 0;
}
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1) > p:last-child,
.css-1dhayxc + .css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(1) > p:last-child,
.css-yhhl9h + .css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(1) > p:last-child {
position: absolute;
}
[src*="/_next/static/media/playIcon"],
[src*="/_next/static/media/stopIcon"],
.css-70qvj9 .chakra-spinner {
height: 36px;
margin-left: -76px;
position: absolute;
top: 50%;
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-o-transition: transform 0.3s ease;
-ms-transition: transform 0.3s ease;
-moz-transition: transform 0.3s ease;
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
width: 36px;
}
.css-70qvj9:has(.css-qfa1mb) {
[src*="/_next/static/media/playIcon"],
[src*="/_next/static/media/stopIcon"],
.css-70qvj9 .chakra-spinner {
height: 36px;
margin-left: -76px;
position: absolute;
top: 50%;
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
-o-transition: transform 0.3s ease;
-ms-transition: transform 0.3s ease;
-moz-transition: transform 0.3s ease;
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
width: 36px;
}
.css-qfa1mb {
height: 36px;
margin-left: -76px;
pointer-events: none;
position: absolute;
top: 50%;
-o-transform: translateY(25%);
-ms-transform: translateY(25%);
-moz-transform: translateY(25%);
-webkit-transform: translateY(25%);
transform: translateY(25%);
-o-transition: transform 0.3s ease;
-ms-transition: transform 0.3s ease;
-moz-transition: transform 0.3s ease;
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
width: 36px;
}
}
}
}
/* Modification of Continue/Pause conversation button */
if continueconvauto {
.css-b9bzmp {
width: calc(100% - 60px);
}
ion-app > div > div > div > div > div > div:nth-of-type(3),
ion-app > div > div > div > div > div > div:nth-of-type(3) > div,
ion-app > div > div > div > div > div > div:nth-of-type(3) > div button {
bottom: 10px;
height: 61px;
left: 0;
max-width: 61px;
position: fixed;
text-indent: -9999px;
width: 61px;
}
ion-app > div > div > div > div > div > div:nth-of-type(3) > div button.css-snc6k5::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='%23cbcbcb' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M394.77 246.7l-114.45-69.14a10.78 10.78 0 00-16.32 9.31v53.32l-103.68-62.63a10.78 10.78 0 00-16.32 9.31v138.26a10.78 10.78 0 0016.32 9.31L264 271.81v53.32a10.78 10.78 0 0016.32 9.31l114.45-69.14a10.89 10.89 0 000-18.6z' fill='%23cbcbcb' stroke='none' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E");
background-size: cover;
background-repeat: no-repeat;
content: "";
height: 48px;
width: 48px;
}
ion-app > div > div > div > div > div > div:nth-of-type(3) > div button.css-snc6k5:hover::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='url(%23A)' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M394.77 246.7l-114.45-69.14a10.78 10.78 0 00-16.32 9.31v53.32l-103.68-62.63a10.78 10.78 0 00-16.32 9.31v138.26a10.78 10.78 0 0016.32 9.31L264 271.81v53.32a10.78 10.78 0 0016.32 9.31l114.45-69.14a10.89 10.89 0 000-18.6z' fill='url(%23A)' stroke='none' stroke-miterlimit='10' stroke-width='32'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
background-size: cover;
background-repeat: no-repeat;
content: "";
height: 48px;
width: 48px;
}
ion-app > div > div > div > div > div > div:nth-of-type(3) > div button.css-snc6k5: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%);
background-clip: text;
bottom: 72px;
color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
content: "Continue conversation";
font-size: 18px;
line-height: 18px;
left: 10px;
text-indent: 0;
position: fixed;
}
ion-app > div > div > div > div > div > div:nth-of-type(3) > div button.css-wgxnqr::before {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='%23cbcbcb' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='%23cbcbcb' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32' d='M208 192v128M304 192v128'/%3E%3C/svg%3E");
background-size: cover;
background-repeat: no-repeat;
content: "";
height: 48px;
width: 48px;
}
ion-app > div > div > div > div > div > div:nth-of-type(3) > div button.css-wgxnqr:hover::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='url(%23A)' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='url(%23A)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32' d='M208 192v128M304 192v128'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
background-size: cover;
background-repeat: no-repeat;
content: "";
height: 48px;
width: 48px;
}
ion-app > div > div > div > div > div > div:nth-of-type(3) > div button.css-wgxnqr: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%);
background-clip: text;
bottom: 72px;
color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
content: "Pause conversation";
font-size: 18px;
line-height: 18px;
left: 10px;
text-indent: 0;
position: fixed;
}
}
if continueconvmanual {
.css-b9bzmp {
width: 100%;
}
ion-app > div > div > div > div > div > div:nth-of-type(3),
ion-app > div > div > div > div > div > div:nth-of-type(3) > div {
margin: 0;
max-width: 100%;
position: static;
width: 100%;
}
}
if continueconvmanualcenter {
.css-b9bzmp {
width: 100%;
}
ion-app > div > div > div > div > div > div:nth-of-type(3),
ion-app > div > div > div > div > div > div:nth-of-type(3) > div {
justify-content: center;
margin: 0;
max-width: 100%;
position: static;
width: 100%;
}
}
/* Buttons hover */
if iconshover {
.css-z0osps > div:nth-of-type(1) > div:nth-of-type(1):hover img {
display: none;
}
.css-z0osps > div:nth-of-type(1) > div:nth-of-type(1):hover {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5 13L9.70711 21.7929C9.31658 22.1834 9.31658 22.8166 9.70711 23.2071L18.5 32' stroke='url(%23A)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 22.5H34' stroke='url(%23A)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
height: 60px;
width: 60px;
}
}
/* Suggest message button */
.css-b9bzmp > div:nth-of-type(1) > div > div > button {
top: 50%;
transform: translateY(-50%);
}
/* Group bar */
ion-app > div > div > div > div > div > div:nth-of-type(1) {
height: 60px;
justify-content: center;
left: 80px;
max-width: fit-content;
top: 0;
position: fixed;
z-index: 99999;
}
ion-app > div > div > div > div > div > div:nth-of-type(1) > p {
font-size: 16px;
}
ion-app > div > div > div > div > div > div:nth-of-type(1) > button {
height: 60px;
justify-content: center;
width: 60px;
}
ion-app > div > div > div > div > div > div:nth-of-type(1) > button svg {
height: 20px;
width: 20px;
}
}
@-moz-document url-prefix("https://kindroid.ai/selfies") {
/* ===================================================================================================================================
Selfies page
=================================================================================================================================== */
/* Wide selfie page */
ion-app > div > div > div > div:nth-of-type(1) > div {
max-width: 100%;
}
/* Background */
if (bgchoice=="heartbg") {
ion-app > div > div > div > div > div > div:nth-of-type(2) {
background: url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/heart-pattern.png") bgcolor no-repeat 100% !important;
background-size: cover !important;
}
}
if (bgchoice=="nobg") {
/* No background */
ion-app > div > div > div > div > div > div:nth-of-type(2) {
background: var(--chakra-colors-secondaryBlack) !important;
}
}
if (bgchoice=="custombg") {
ion-app > div > div > div > div > div > div:nth-of-type(2) {
background: url(custombgurl) bgcolor no-repeat 100% !important;
background-size: cover !important;
}
}
if bgcolor {
ion-app > div > div > div > div > div > div:nth-of-type(2) {
background-color: bgcolor;
}
}
/* Photos Gallery */
.css-ezgmhy {
background: var(--chakra-colors-secondaryBlack);
gap: 20px;
height: 100vh;
justify-content: center;
padding-bottom: 20px;
padding-top: 20px;
max-width: 100%;
z-index: 9999 !important;
}
.css-ezgmhy > div:not(.css-13kzz3x),
.css-ezgmhy > div:not(.css-13kzz3x) > div:nth-of-type(1),
.css-kuf6b {
height: auto;
max-height: 290px;
max-width: 290px;
width: 290px;
}
.css-kuf6b * {
cursor: help !important;
}
/* Video Gallery */
.css-13kzz3x {
height: 31px !important;
}
if blurcontent {
ion-app > div > div > div > div > div > div:nth-of-type(2) > div img,
ion-app > div > div > div > div > div > div:nth-of-type(2) > div video,
.css-fskrnz > div > div:nth-of-type(1) > div:nth-of-type(1) > div img,
.css-fskrnz > div > div > video,
.css-fskrnz > div > div:nth-of-type(2) > div:nth-of-type(1) > p {
filter: blur(20px);
-moz-filter: blur(20px);
-webkit-filter: blur(20px);
}
}
/* Kin's name block */
.css-4ocxl5 {
height: 100px;
position: relative;
}
/* Kin's name */
.css-6gs9hh {
left: 50%;
text-align: center;
top: 10px;
position: absolute;
transform: translateX(-50%);
width: max-content;
}
.css-1h018x8 {
color: var(--chakra-colors-secondaryWhite);
}
.css-1z0jlm7 {
color: var(--chakra-colors-secondaryWhite);
font-size: 18px;
text-align: center;
padding-bottom: 18px;
}
/* Puchase selfies credits */
.css-501625 {
margin: 0 auto;
width: fit-content;
}
/* Selfies tokens */
.css-18467a {
position: absolute;
right: 32px;
top: 0;
width: max-content;
}
/* Tags */
.css-2q07gq {
z-index: 9999;
}
.css-ewo462,
.css-1fm8jup > * {
justify-content: end;
padding-right: 32px;
}
/* Put Request selfie button at the top */
if requestimage {
.css-vmfips,
.css-12j2ye5 {
height: 60px !important;
left: 32px;
padding-bottom: 0;
position: absolute;
top: 2%;
}
}
/* Labels and date icons */
ion-app > div > div > div > div > div > div:nth-of-type(1) > div:nth-of-type(2) {
gap: 20px;
justify-content: flex-end;
padding-right: 30px;
}
/* Request selfie */
.css-105olw3 {
padding: 20px;
width: 100%;
}
.css-1jva3og {
font-size: 18px;
}
/* Request selfie avatar settings */
.css-1o815t8 {
max-width: 90%;
}
.css-de3hrx {
height: 512px !important;
width: 512px !important;
}
.css-dfpqc0 {
margin-left: 70% !important;
height: 512px !important;
width: 512px !important;
}
.css-79elbk > img:not(.css-z9m7im,.css-1b8e0hb):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;
}
/* Avatar selection for group images */
.css-1e9g1nc {
justify-content: center;
}
.css-1e9g1nc > .css-156z0wo {
height: auto;
width: 300px;
}
.css-156z0wo > .css-15td5wo > .css-w9iwt8 > .css-1cfkm3f {
text-align: center;
}
/* Image border on hover */
if imageborder {
.css-1vuqv5m,
.css-1regj17 {
border-radius: 16px;
}
.css-1vuqv5m > .css-1regj17:hover {
height: 100%;
width: 100%;
}
.css-3vu8ng > .css-1regj17,
.css-hnnoj4 > .css-1ekmhiq {
transition: 0.2s linear;
}
.css-3vu8ng > .css-1regj17:hover,
.css-hnnoj4 > .css-1ekmhiq:hover {
border-radius: 16px;
height: 300px;
width: 300px;
}
.css-3vu8ng:hover,
.css-hnnoj4:hover {
border-radius: 16px;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
rgba(139, 110, 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;
transition: 0.2s linear;
}
}
/* Put delete image button in red */
.css-fskrnz > header > div > div > div,
.css-fskrnz > header > div > div > div > button {
background: var(--chakra-colors-primaryBlack);
}
.css-fskrnz > header > div > div > div > button > p {
color: var(--chakra-colors-red);
}
/* Selfie modal */
.css-fskrnz {
height: 809px;
width: 80%;
}
.css-fskrnz > div > div:nth-of-type(1) {
border-radius: 0 0 0 16px;
height: 773px;
left: 0;
margin-bottom: 0;
position: absolute;
width: auto;
}
.css-fskrnz > div > div:nth-of-type(1) > div,
.css-fskrnz > div > div:nth-of-type(1) > video {
border-radius: 0 0 0 16px;
}
.css-fskrnz > div > div:nth-of-type(1) > button svg {
fill: var(--chakra-colors-primaryWhite);
height: 40px;
width: 40px;
}
.css-fskrnz > div > div:nth-of-type(1) > button:hover svg {
fill: var(--chakra-colors-primaryWhite);
transform: scale(1.5);
transition: transform 0.2s ease, fill 0.2s ease;
}
.css-fskrnz > div > div:nth-of-type(2) {
left: 52%;
max-height: max-content;
position: absolute;
}
.css-fskrnz > div > div:nth-of-type(2) > div {
width: 760px;
}
.css-fskrnz > div > div:nth-of-type(2) > div > p {
font-size: 20px;
margin-top: 4rem;
text-align: justify;
padding-right: 20px;
word-break: normal;
}
.css-fskrnz > div > div:nth-of-type(2) > p {
color: var(--chakra-colors-secondaryWhite);
font-size: 20px;
position: absolute;
right: 50px;
top: 1rem;
}
.css-fskrnz > div > div:nth-of-type(2) > div > p > button {
display: inline-block;
font-size: 20px;
position: fixed;
text-decoration: none;
top: 105px;
}
.css-fskrnz > div > div:nth-of-type(2) > div > p > button:hover::after {
content: "Copy prompt";
font-size: 20px;
top: 105px;
padding-left: 5px;
pointer-events: auto;
position: fixed;
}
/* Buttons hover */
if iconshover {
.css-z0osps > div:nth-of-type(1) > div:nth-of-type(1):hover img {
display: none;
}
.css-z0osps > div:nth-of-type(1) > div:nth-of-type(1):hover {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5 13L9.70711 21.7929C9.31658 22.1834 9.31658 22.8166 9.70711 23.2071L18.5 32' stroke='url(%23A)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 22.5H34' stroke='url(%23A)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
height: 60px;
width: 60px;
}
}
}
@-moz-document url-prefix("https://kindroid.ai/call") {
/* ===================================================================================================================================
Call page
=================================================================================================================================== */
/* Bigger text */
.css-7wdzg1,
.css-14mmx5r,
.css-1vqt2yh {
font-size: 18px;
}
/* Background */
if (bgchoice=="heartbg") {
ion-app > div > div > div > div > div:nth-of-type(2) {
background: url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/heart-pattern.png") bgcolor no-repeat 100% !important;
background-size: cover !important;
}
}
if (bgchoice=="nobg") {
/* No background */
ion-app > div > div > div > div > div:nth-of-type(2) {
background: var(--chakra-colors-secondaryBlack) !important;
}
}
if (bgchoice=="custombg") {
ion-app > div > div > div > div > div:nth-of-type(2) {
background: url(custombgurl) bgcolor no-repeat 100% !important;
background-size: cover !important;
}
}
if bgcolor {
ion-app > div > div > div > div > div:nth-of-type(2) {
background-color: bgcolor;
}
}
/* Remove background under avatar */
.css-1nbfxil > div:not(:last-child),
.css-17hv5wr > div:not(:last-child),
.css-1jbvs8u,
/* Remove purple circle when kin is talking */
.css-jk7dyx {
background: none;
}
/* Avatar */
.css-1nbfxil,
.css-17hv5wr {
aspect-ratio: 1 / 1;
height: calc(100% - 100px);
margin-top: 0;
min-width: 300px;
overflow: hidden;
width: fit-content;
}
.css-1jbvs8u,
.css-jk7dyx {
border: none;
border-radius: 1em;
box-sizing: border-box;
height: 100%;
margin: auto;
width: 100%;
}
.css-dv4mhk {
height: 120px;
width: 120px;
}
.css-1jbvs8u img,
.css-1jbvs8u video,
.css-jk7dyx img,
.css-jk7dyx video {
aspect-ratio: 1 / 1;
border: none;
border-radius: 1em;
height: 100%;
margin-top: 0;
max-width: 100%;
object-fit: contain;
object-position: center top;
width: auto;
}
.css-1jbvs8u video,
.css-jk7dyx video {
left: auto !important;
}
/* Avoid scroll problem */
.css-11w64rs {
overflow: hidden;
}
/* Call controls bar */
.css-tolbod {
justify-content: space-between;
margin: 0 auto;
max-width: 757px;
}
.css-tolbod > .css-1en42kf:nth-child(1) {
justify-content: flex-start;
}
.css-tolbod > .css-1en42kf:nth-child(2) {
justify-content: center;
}
.css-tolbod > .css-1en42kf:nth-child(3) {
justify-content: flex-end;
}
/* Video, screenshare, captions */
.css-tolbod > .css-1en42kf > .css-15do4u8 {
flex-direction: row;
}
/* Buttons size */
.css-15do4u8 > div:nth-of-type(1) > div,
.css-15do4u8 > div:nth-of-type(2) {
height: 60px;
width: 60px;
}
/* Icons size in buttons */
.css-tolbod > .css-1en42kf > .css-15do4u8 svg {
height: 44px;
width: 44px;
}
/* Call controls when captions */
body:has(.css-mcoft3) {
.css-11w64rs {
column-gap: 1em;
flex-direction: row;
flex-wrap: wrap;
padding: 1em 1em 0 1em;
}
.css-1nbfxil,
.css-17hv5wr {
height: calc(100% - 100px);
width: 40%;
}
.css-mcoft3 {
max-height: calc(100% - 100px);
min-height: calc(100% - 100px);
max-width: calc(60% - 1em);
}
.css-bdvhoj {
flex-basis: 100%;
min-height: 100px;
}
}
if avatarcircle {
.css-1jbvs8u {
border-radius: 50% !important;
}
}
if avatarchoice {
[alt="avatar"],
.css-1jbvs8u {
background: url(avatarchoiceurl) border-box;
background-size: cover;
border-color: rgb(40, 40, 40);
border-style: none;
}
.css-1jbvs8u img {
display: none;
}
}
if avatarzoom {
.css-1jbvs8u > img:hover,
.css-1jbvs8u > video:hover {
aspect-ratio: 1 / 1;
border-radius: 0 !important;
max-height: 100vh !important;
min-height: 100vh !important;
left: 50% !important;
position: fixed !important;
top: 0 !important;
min-width: fit-content;
width: auto !important;
transform: translateX(-50%);
z-index: 99999 !important;
}
.css-z0osps {
z-index: 1;
}
}
/* Buttons hover */
if iconshover {
.css-z0osps > div:nth-of-type(1) > div:nth-of-type(1):hover img {
display: none;
}
.css-z0osps > div:nth-of-type(1) > div:nth-of-type(1):hover {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5 13L9.70711 21.7929C9.31658 22.1834 9.31658 22.8166 9.70711 23.2071L18.5 32' stroke='url(%23A)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 22.5H34' stroke='url(%23A)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
height: 60px;
width: 60px;
}
}
/* Bigger screen sharing */
if biggerscreensharing {
.no-invert.react-draggable.react-draggable-dragged {
transform: none !important;
}
.css-u5n99f {
border-radius: .5em;
height: fit-content;
position: fixed;
top: calc(50% + 60px);
right: 16px;
transform: translate(0, calc(-50% - 60px)) !important;
width: auto;
}
.css-u5n99f canvas,
.css-u5n99f div {
aspect-ratio: 16 / 9;
height: fit-content;
max-height: fit-content;
max-width: 1110px;
}
.css-u5n99f canvas {
object-fit: contain;
}
/* Avatar position */
.css-1nbfxil {
height: calc(100% - 160px);
left: 16px;
position: fixed;
}
/* Call control position */
.css-tolbod {
bottom: 0;
position: fixed;
}
}
}
