Greasy Fork is available in English.
Kindroid website is more suitable for wide screens + add customizations (theme) + add new features (scripts).
/* ==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.41.2
@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",
"Asterisks + Bold + no italic + same color": "asterisksboldnoitalicsamecolor",
"Bold": "bold",
"Bold + no italic": "boldnoitalic",
"Bold + no italic + same color": "boldnoitalicsamecolor",
"No italic": "noitalic",
"Same color": "samecolor"
}
@var color actionscolor "Actions texts color choice" rgb(168, 168, 168)
@var checkbox avatarchoice "Avatar changer" 0
@var text avatarchoiceurl "Avatar changer URL" "URL between quotes"
@var select avatarposition "Avatar position" {
"Large Middle": "avatarlargemiddle",
"Large Top": "avatarlargetop",
"Large Bottom": "avatarlargebottom",
"Small Middle": "avatarsmallmiddle",
"Small Top": "avatarsmalltop",
"Small Bottom": "avatarsmallbottom",
}
@var checkbox avatarchat "Avatar chat" 0
@var checkbox ouravatarchoice "Avatar changer for us" 0
@var text ouravatarchoiceurl "Avatar changer for us URL" "URL between quotes"
@var checkbox avatarcircle "Avatar circle" 0
@var checkbox avatarcustomposition "Avatar custom position" 0
@var text avatarcustompositionvalue "Avatar custom position value" 12vh
@var select avatarsize "Avatar size" {
"Large": "avatarlarge",
"Small": "avatarsmall",
"Hidden": "avatarhidden"
}
@var checkbox avatarcustomsize "Avatar custom size" 0
@var text avatarcustomsizevalue "Avatar custom size value" 512px
@var checkbox avatarrectangle "Avatar rectangle" 1
@var checkbox avatarrectanglecustomheight "Avatar rectangle custom height" 0
@var text avatarrectanglecustomheightvalue "Avatar custom height value" 256px
@var checkbox avatarzoom "Avatar hoverzoom" 0
@var select 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" 0
@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 notranslateicon "No translate icon" 0
==/UserStyle== */
/* === Credits ===
Website https://breat.fr
facebook https://www.facebook.com/breatfroff
mastodon https://mastodon.social/@breat_fr
telegram https://t.me/breatfr
vk https://vk.com/breatfroff
X (twitter) https://x.com/breatfroff
=== Credits === */
@-moz-document domain("kindroid.ai") {
/* ===================================================================================================================================
Whole kindroid domain
=================================================================================================================================== */
/* Versions */
:root {
--themeversionpc: 'TPC v3.41.2';
--themeversionmobile: 'TM v1.0.1';
--chatversionpc: 'CPC v1.12.4';
--chatversionmobile: 'CM v1.12.2';
--selfiesversionpc: 'SPC v1.08.2';
--selfiesversionmobile: 'SM v1.08.1';
--notepadversion: 'NP v1.0.6';
--trversion: 'TR v1.0.3';
--tvversion: 'TV v1.0.4';
--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;
}
.css-x3odei::after,
.css-z0osps::after {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
content: var(--themeversionpc) ' · ' var(--themeversionmobile) ' · ' 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: fontsize;
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: fontsize;
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;
}
}
/* Hide Translate button */
if notranslateicon {
.translate {
display: none;
}
}
/* Reduce space between icons in header and put header at the 1st plan */
header > div:nth-of-type(1) {
gap: 10px;
z-index: 1;
}
/* Hide scrollbars */
.css-1lbk8wf,
:root ::-webkit-scrollbar {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
-moz-overflow-style: none !important;
-webkit-overflow-style: none !important;
width: 0;
}
::-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%);
}
/* Blur */
if blurcontent {
.css-gnnge1,
ion-app > div > div > div > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-child(odd) > div:nth-of-type(2) p,
ion-app > div > div > div > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-child(even) > div:nth-of-type(1) p,
ion-app > div > div > div > div:nth-of-type(1) > div:nth-of-type(2) > div img.css-1regj17 {
filter: blur(8px);
-moz-filter: blur(8px);
-webkit-filter: blur(8px);
}
}
/* Background */
.css-1yee3lj {
height: calc(100% - 45px);
}
if (bgchoice=="heartbg") {
.css-1lbk8wf,
.css-1qpmsp4,
.css-16qnjy5,
.css-uf0eqr {
background: url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/heart-pattern.png") bgcolor no-repeat 100% !important;
background-size: cover !important;
}
}
if (bgchoice=="nobg") {
/* No background */
.css-1lbk8wf,
.css-1qpmsp4,
.css-16qnjy5,
.css-uf0eqr {
background: var(--chakra-colors-secondaryBlack) !important;
}
}
if (bgchoice=="custombg") {
/* Custom background */
.css-1lbk8wf,
.css-1qpmsp4,
.css-16qnjy5,
.css-uf0eqr {
background: url(custombgurl) bgcolor no-repeat 100% !important;
background-size: cover !important;
}
}
if bgcolor {
.css-1lbk8wf,
.css-1qpmsp4,
.css-16qnjy5,
.css-uf0eqr {
background-color: bgcolor;
}
}
/* Modals's close button */
.chakra-modal__close-btn svg {
height: 20px;
margin: 20px 20px 0 0;
width: 20px;
}
/* Tooltips */
.notepad-button: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: "Notepad";
font-size: 16px;
left: -55%;
margin-top: 20%;
padding: 10px;
position: absolute;
top: 100%;
}
.watch-together-button: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: "Kindroid TV";
font-size: 16px;
left: -80%;
margin-top: 20%;
padding: 10px;
position: absolute;
top: 100%;
width: max-content;
}
.translate: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: "Translate";
font-size: 16px;
left: -50%;
margin-top: 20%;
padding: 10px;
position: absolute;
top: 100%;
width: max-content;
}
}
@-moz-document url("https://landing.kindroid.ai/") {
/* Landing page */
nav > div:nth-of-type(1) {
max-width: 100% !important;
}
}
@-moz-document url("https://kindroid.ai/home"), url("https://kindroid.ai/home/") {
/* ===================================================================================================================================
Chat page
=================================================================================================================================== */
/* ========================================================================
Header and menu
======================================================================== */
/* Header background color */
.css-x3odei {
background-color: var(--chakra-colors-primaryBlack) !important;
}
if hidetrialbar {
.css-r1nv3m {
display: none;
}
}
/* Tooltips */
[aria-label="gallery"]:hover::after {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
border-radius: 16px;
color: var(--chakra-colors-primaryWhite);
content: "Selfies";
font-size: 16px;
left: -20%;
padding: 10px;
position: absolute;
top: 100%;
}
[aria-label="voicecall"]:hover::after {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
border-radius: 16px;
color: var(--chakra-colors-primaryWhite);
content: "Voicecall";
font-size: 16px;
left: -30%;
padding: 10px;
position: absolute;
top: 100%;
}
[aria-label="rewards"]:hover::after {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
border-radius: 16px;
color: var(--chakra-colors-primaryWhite);
content: "Rewards";
font-size: 16px;
left: -40%;
padding: 10px;
position: absolute;
top: 100%;
}
/* Put Biling in yellow */
.css-1fu7n7b > 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(6) > 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);
}
/* Put email and timer in white */
.css-1dodils,
.css-1g7lxfg {
color: var(--chakra-colors-secondaryWhite);
margin-top: 10px;
}
/* Put Upload Photo text in custom avatar in white to be more visible */
.css-1jcj2pk {
color: var(--chakra-colors-secondaryWhite);
}
/* Billing error box */
.css-dixmdy {
background-color: #161616;
border: 1px solid #6C6C6C;
border-radius: 10px;
color: var(--chakra-colors-secondaryWhite);
}
@media screen and (min-width: 900px) {
/* Large menu */
.css-1raxatq,
.css-xhpjzu {
max-width: 100% !important;
width: 100% !important;
}
/* Email box */
.css-1dodils {
align-self: center;
gap: 0;
margin-top: 5% !important;
padding-right: 15px;
}
/* Subcriber icon */
.css-1dodils > img {
height: auto !important;
width: 44px;
}
/* Email */
.css-gnnge1 {
font-size: 24px;
padding-bottom: 5px;
padding-left: 5px;
}
/* Menu */
.css-1raxatq > div > div > div > div.css-j7qwjs {
display: grid;
align-content: center;
gap: 50px;
grid-template-columns: 1fr 1fr 1fr;
margin-top: 10%;
justify-content: space-between !important;
}
.css-yk3l44 {
gap: 100px;
}
.css-yk3l44 > h2 {
font-size: 20px;
}
/* Subscribe button */
.css-1fu7n7b,
.css-o32bv9 {
order: 2;
}
/* Bigger menu text */
.css-dghbxk,
.css-1jbciej,
.css-3sp0ue {
font-size: 30px;
}
/* Move and fix the Save button in all menu page */
.css-1h56vtb > div > div.css-j7qwjs > button,
.css-1raxatq > div.css-1xh8vw6 > button,
.css-1raxatq > div.css-ouwkos > button,
.css-1sfbjfs,
.css-1dmnlsh {
bottom: 20px;
margin: 39% 0 0 83%;
position: fixed;
}
/* My kindroids */
.css-12jdxbf,
.css-iludz4 {
height: auto;
width: 300px;
}
.css-1raxatq > div.css-1h56vtb {
padding-top: 0;
}
.css-cbfcqn {
bottom: 8% !important;
position: absolute;
right: 50px;
}
/* Delete kin */
.css-9nogp2 {
position: relative !important;
}
.chakra-menu__menuitem.css-94x4at:nth-child(1) {
background: var(--chakra-colors-secondaryBlack);
color: var(--chakra-colors-red);
opacity: 0;
position: absolute;
visibility: hidden;
}
.css-do4s31[style*="visibility: visible"] .chakra-menu__menuitem.css-94x4at:nth-child(1) {
border-radius: 5px;
left: -15%;
opacity: 1 !important;
position: absolute;
visibility: visible !important;
}
/* Modify size of groups */
.css-1avgoq8 {
width: 300px;
}
.css-1ly87gx > div > div.css-jzgh9j {
align-items: start;
}
.css-1yxzzu5 {
max-width: 100% !important;
}
.css-ue4bfp {
right: 5%;
top: 22% !important;
}
.css-1wjwxyy > section > div > .css-1cnwnlw > .css-jzgh9j > div.css-1h84tgn > div.css-19ovozl > div.css-j7qwjs > p:nth-child(5) {
position: absolute;
left: 50% !important;
top: 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%;
}
.css-jzgh9j > div.css-rzxn8p > .css-cbfcqn {
bottom: 20px;
margin-right: 8%;
position: fixed;
}
/* Modify size and position of Create group */
.css-1ky9fv8 {
bottom: 27%;
position: absolute;
right: 5.2%;
width: 300px;
}
/* Fix position of Go to groupchat button */
.chakra-button.no-invert.css-1dmnlsh {
bottom: 20px;
right: 5%;
position: fixed;
}
/* Create kin */
.css-1ly87gx > div > div.css-jzgh9j {
align-items: center;
}
.css-1h84tgn {
max-width: 100%;
}
/* Create a new group chat */
/* Bigger modal */
.css-zys56m,
.css-1wjwxyy {
min-height: 90vh;
margin: 20px auto !important;
}
.css-zys56m,
.css-i8vj7y {
max-width: 90%;
}
.css-i8vj7y > .css-1ly87gx > .css-1yxzzu5 > .css-ciw22z {
margin-left: 150%;
width: 100%;
}
/* Goup name */
.css-i8vj7y > .css-1ly87gx > .css-1yxzzu5 > div:nth-child(4) > .css-1cv5dpr {
position: absolute;
right: 50px;
top: 12%;
width: 47%;
}
.css-i8vj7y > .css-1ly87gx > .css-1yxzzu5 > div:nth-child(4) > .css-1qvxg76 {
position: absolute;
right: 50px;
top: 18%;
width: 47%;
}
/* Group context */
.css-i8vj7y > .css-1ly87gx > .css-1yxzzu5 > div:nth-child(5) > .css-1cv5dpr {
position: absolute;
right: 50px;
top: 35%;
width: 47%;
}
.css-i8vj7y > .css-1ly87gx > .css-1yxzzu5 > div:nth-child(5) > .css-1m3hlb1 {
position: absolute;
right: 50px;
top: 41%;
width: 47%;
}
/* Turn-taking style */
.css-i8vj7y > .css-1ly87gx > .css-1yxzzu5 > div:nth-child(6) > .css-1cv5dpr {
position: absolute;
left: -42%;
top: 43%;
width: 45%;
}
.css-i8vj7y > .css-1ly87gx > .css-1yxzzu5 > div:nth-child(6) > .css-2aa4oa {
position: absolute;
left: -42%;
top: 50%;
width: 45%;
}
.css-i8vj7y > .css-1ly87gx > .css-1yxzzu5 > div:nth-child(6) > div {
position: absolute;
top: 60%;
width: 44%;
}
/* Create group button */
.css-i8vj7y > .css-1ly87gx > div > button {
position: absolute;
left: 5%;
top: 75%;
width: 90%;
}
/* General Settings */
#__next > ion-app > div > div > div > div.css-1raxatq > div.css-1h56vtb > div > div.css-j7qwjs > div:nth-child(3),
#__next > ion-app > div > div > div > div.css-1raxatq > div.css-1h56vtb > div > div.css-j7qwjs > div:nth-child(4) {
width: 100%;
}
/* Add some arrows when needed */
button > .css-1cfkm3f::after {
background-image: url("https://unpkg.com/ionicons@7.1.0/dist/svg/chevron-down-outline.svg");
background-size: contain;
background-repeat: no-repeat;
content: "";
display: inline-block;
filter: invert(79%) sepia(6%) saturate(37%) hue-rotate(161deg) brightness(92%) contrast(86%);
height: 20px;
width: 20px;
}
/* Danger zone: delete account */
.css-yk3l44 {
bottom: 150px;
}
.css-19zv6py {
font-weight: 600;
font-size: 18px;
width: max-content;
}
/* Voice */
.css-ab8yd1 > .css-bvm5am > .css-1raxatq > div.css-ouwkos > div > p.chakra-text.css-7wdzg1 {
max-width: 100% !important;
}
/* Split menu for avatars */
.css-ab8yd1 > .css-bvm5am > .css-1raxatq > .css-161kpzt > .css-188uayk > .css-1bfb6s1,
.css-ab8yd1 > .css-bvm5am > .css-1raxatq > .css-161kpzt > .chakra-accordion > .css-tf0j9o > .chakra-collapse > .css-1fm8jup > .css-mifb2i {
max-width: 47%;
}
.css-ab8yd1 > .css-bvm5am > .css-1raxatq > .css-161kpzt > .css-188uayk > .css-1bfb6s1 > .css-1slmhpt > .css-1qo2cb6 > .css-n4vub9 {
margin-bottom: 0;
margin-left: 47%;
position: absolute;
top: 8%;
max-width: 45% !important;
}
.css-1wy8ffp {
justify-content: center;
}
.css-ue4bfp {
display: block;
margin-left: 95% !important;
position: absolute;
max-width: 45% !important;
}
/* 1st avatar size */
.css-1k5gc4r,
.css-dfpqc0 {
height: auto;
margin-left: 25%;
width: 50%;
}
/* 2nd avatar size */
.css-1mvfzwi {
height: auto;
margin-left: 5%;
position: relative;
width: 25%;
}
/* Bigger text and line height in avatar window */
.css-dhnoom {
font-size: fontsize;
line-height: 1.5;
}
.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;
}
/* Move and fix the Save button in avatar menu page */
.css-1y4vgns > button {
margin: 39% 0 0 83%;
position: fixed;
}
/* Remove the space between the header and the chat*/
.css-g2goff {
padding: 0;
}
.css-1lbk8wf {
padding-top: 72px !important;
}
/* Removes top right icons in header */
header > div:nth-of-type(2) {
display: none !important;
}
/* Resize header */
.css-x3odei {
background-color: var(--chakra-colors-secondaryBlack) !important;
max-width: 100%;
padding: 0 10px 0 0.3%;
}
}
/* ===================================================================================================================================
Chat
=================================================================================================================================== */
/* Add border to textarea when focus */
textarea:focus {
border: 0;
border-radius: 32px;
box-shadow: 0 0 0 1px rgb(139, 109, 255), 0 0 0 2px rgb(254, 132, 132);
}
/* Remove the resize icon on textarea on chat page */
textarea:not(:focus),
textarea:focus {
resize: none;
}
/* Hide voice counter and reduce button on avatar */
/* Text button */
.css-2bir3m,
/* Voice button */
.css-y0ybx5,
/* Reduce button */
.css-fk8dne {
display: none;
}
/* Modification of rounded corners for our bubbles */
.css-1j9xj7u {
border-radius: 20px 8px 20px 20px;
}
/* Modification of date for our bubbles */
ion-app > .ion-page > .css-ab8yd1 > .css-bvm5am > .css-1yee3lj > .css-zjyen2 > .css-1lbk8wf > .css-1dhayxc > .css-v3ipd1 > .css-70qvj9 > .css-dhnoom {
padding-bottom: 5px;
}
/* Modification of rounded corners for AI bubbles */
.css-teti0a,
.css-1ulhpcc,
.css-1tg26k8,
.css-1t9c0mz {
border-radius: 8px 20px 20px 20px;
}
/* Modification of date for AI bubbles */
ion-app > .ion-page > .css-ab8yd1 > .css-bvm5am > .css-1yee3lj > .css-zjyen2 > .css-1lbk8wf > .css-yhhl9h > .css-ip0f2e > .css-70qvj9 > .css-dhnoom {
margin-left: 30px;
padding-bottom: 5px;
}
if bubblescolor {
.css-6obdga,
.css-1gi22a8 {
color: bubblescolor;
}
}
/* Bigger text in bubbles and textarea */
.css-6obdga,
.css-1gi22a8,
textarea {
font-size: fontsize !important;
line-height: 1.5 !important;
}
.css-kjafn5 {
padding-top: 5px;
}
textarea::placeholder {
line-height: 1.5 !important;
}
if kinbubblesbgcolor {
.css-teti0a {
background-color: kinbubblesbgcolor;
}
}
if kinbubblesbgurl {
.css-teti0a {
background-color: kinbubblesbgcolor;
background-image: url(kinbubblesbgurl);
}
}
if ourbubblesbgcolor {
.css-1j9xj7u {
background: ourbubblesbgcolor;
}
}
if ourbubblesbgurl {
.css-1j9xj7u {
background-color: ourbubblesbgcolor;
background-image: url(ourbubblesbgurl);
}
}
/* Put a not allowed cursor on spinner, microphone icon, play button, picture generating when needed */
.chakra-spinner,
.css-zkr1dl,
.css-jy2vee,
.css-kjafn5 [disabled] + button {
cursor: not-allowed;
}
/* Actions texts */
if (actionsstyle=="actionsdefault") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: rgb(168, 168, 168) !important;
font-style: italic !important;
}
}
if (actionsstyle=="asterisks") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksbold") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalic") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalicsamecolor") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="bold") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalic") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalicsamecolor") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="noitalic") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-style: normal !important;
}
}
if (actionsstyle=="samecolor") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
}
}
if actionscolor {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: actionscolor !important;
}
}
/* Avatar position */
if (avatarposition=="avatarlargemiddle") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 8vh;
}
}
}
if (avatarposition=="avatarlargetop") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 4vh;
}
}
}
if (avatarposition=="avatarlargebottom") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 18vh;
}
}
}
if (avatarposition=="avatarsmallmiddle") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 16vh;
}
}
}
if (avatarposition=="avatarsmalltop") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 4vh;
}
}
}
if (avatarposition=="avatarsmallbottom") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 28vh;
}
}
}
if avatarcustomposition {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
margin-top: avatarcustompositionvalue;
}
}
}
if gradientregenerate {
/* Regenerate icon */
img[alt="regenerate"] {
display: none !important;
}
[aria-label="Regenerate or suggest a change"]:nth-child(1) {
background: url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/gradient-regenerate.svg") no-repeat;
border-radius: 50%;
}
}
/* Put recalled memories icon on right and bigger */
.css-8lxt4j {
right: -3.25em !important;
z-index: 1;
}
.css-8lxt4j svg {
height: 36px;
width: 36px;
}
/* Avatar on left */
if (avataron=="leftside") {
ion-app > div > div > div > div:nth-of-type(1) {
display: flex;
flex-direction: row !important;
}
/* Avatar size */
if (avatarsize=="avatarlarge") {
@media screen and (min-width: 900px) {
/* Bigger avatar */
.css-oies6c,
.css-13tht1l,
.css-g2goff {
border-radius: 20px;
height: 512px;
left: 0.6%;
max-width: 512px;
padding: 0;
transition: 0.3s linear;
width: 512px;
}
/* Put chat and textarea more on right*/
.css-1lbk8wf {
padding-left: 545px;
padding-right: 10px;
width: 100vw;
}
}
}
if (avatarsize=="avatarsmall") {
@media screen and (min-width: 900px) {
/* Small avatar */
.css-oies6c,
.css-13tht1l,
.css-g2goff {
border-radius: 20px;
height: 320px;
left: 0.6%;
max-width: 320px;
padding: 0;
transition: 0.3s linear;
width: 320px;
}
/* Put chat and textarea more on right*/
.css-1lbk8wf {
padding-left: 350px;
padding-right: 10px;
width: 100vw;
}
}
}
if avatarcustomsize {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
border-radius: 20px;
height: avatarcustomsizevalue;
left: 0.6%;
max-width: avatarcustomsizevalue;
padding: 0;
transition: 0.3s linear;
width: avatarcustomsizevalue;
}
/* Put chat and textarea more on right*/
.css-1lbk8wf {
padding-left: 30px + avatarcustomsizevalue;
padding-right: 10px;
width: 100vw;
}
}
}
if (avatarsize=="avatarhidden") {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
display: none;
height: 0;
width: 0;
}
.css-1lbk8wf {
padding-left: 10px;
padding-right: 10px;
width: 100vw;
}
}
/* System bubbles style */
if (systembubblesstyle=="systembubblesleft") {
.css-1y2ps2x {
display: none;
}
body:has(.css-1raxatq) .css-do4s31 {
visibility: hidden;
}
body:has(.css-1x3hygh) .css-do4s31 {
background-color: transparent;
border: none;
color: var(--chakra-colors-secondaryWhite);
display: grid !important;
font-size: fontsize;
row-gap: 10px;
--menu-shadow: transparent;
left: 0;
opacity: 1 !important;
position: fixed;
visibility: visible !important;
z-index: unset !important;
}
if (avatarsize=="avatarlarge") {
.css-do4s31 {
bottom: .5em;
grid-template-columns: repeat(3, 1fr);
max-width: 512px;
width: 100%;
}
}
if (avatarsize=="avatarsmall") {
.css-do4s31 {
bottom: -.5em;
grid-template-columns: repeat(2, 1fr);
max-width: 320px;
width: 100%;
}
}
if avatarcustomsize {
if avatarcustomsizevalue < 512px {
.css-do4s31 {
bottom: -.5em;
grid-template-columns: repeat(2, 1fr);
max-width: avatarcustomsizevalue;
width: 100%;
}
}
if avatarcustomsizevalue >= 512px {
if avatarsize == "avatarlarge" {
.css-do4s31 {
bottom: .5em;
grid-template-columns: repeat(3, 1fr);
max-width: avatarcustomsizevalue;
width: 100%;
}
}
}
}
if (avatarsize=="avatarhidden") {
.css-do4s31 {
bottom: 1.5em;
grid-template-columns: repeat(3, 1fr);
max-width: 512px;
width: 100%;
left: -3% !important;
}
}
.css-do4s31 button {
justify-self: center;
white-space: nowrap;
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(254, 133, 133, 0.4) 5px 5px 5px 5px, rgba(254, 133, 133, 0.4) 5px -5px 5px 5px, rgba(139, 110, 255, 0.4) -5px 5px 5px 5px;
box-sizing: border-box;
background-clip: text;
color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
if (avatarsize=="avatarlarge") {
.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: 72%;
}
}
if (avatarsize=="avatarsmall") {
.css-zjyen2 {
gap: 0;
padding: 0 0 16px;
}
.css-b9bzmp {
background-color: var(--chakra-colors-secondaryBlack);
bottom: 0;
padding: 10px;
position: static;
align-self: flex-end;
width: calc(100% - 335px);
}
}
if avatarcustomsize {
.css-zjyen2 {
gap: 0;
padding: 0 0 16px;
}
.css-b9bzmp {
background-color: var(--chakra-colors-secondaryBlack);
bottom: 0;
padding: 10px;
padding-left: 30px + avatarcustomsizevalue;
position: static;
align-self: flex-end;
width: 100%;
}
}
if (avatarsize=="avatarhidden") {
.css-zjyen2 {
gap: 0;
padding: 0 0 16px;
}
.css-b9bzmp {
background-color: var(--chakra-colors-secondaryBlack);
bottom: 0;
padding: 10px;
position: static;
align-self: flex-end;
width: 78%;
}
}
.css-94x4at {
background-color: transparent;
display: flex;
justify-content: center;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(1) {
display: none;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(2) {
order: 1;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(3) {
order: 2;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(4) {
justify-content: center;
order: 3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
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 {
align-self: flex-end;
background-color: var(--chakra-colors-secondaryBlack) !important;
padding: 10px;
position: static;
width: 72%;
z-index: 1;
}
.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;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(1) {
display: none;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(2) {
order: 1;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(3) {
order: 2;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]: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-zjyen2 {
gap: 0;
padding: 0 0 16px;
}
.css-b9bzmp {
align-self: flex-end;
background-color: var(--chakra-colors-secondaryBlack) !important;
position: static;
width: 100%;
z-index: 1;
}
.css-b9bzmp:not(:focus) {
padding: 5px 10px !important;
}
.css-b9bzmp:focus-within {
padding: 10px !important;
}
textarea[aria-label="Send message textarea"]:not(:focus) {
height: 40px !important;
line-height: 40px;
min-height: 40px;
padding-top: 6px;
}
textarea[aria-label="Send message textarea"]:not(:focus)::placeholder {
transform: translateY(-30%);
}
textarea[aria-label="Send message textarea"]:focus::placeholder {
top: 45%;
}
.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;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(1) {
display: none;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(2) {
order: 1;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(3) {
order: 2;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(4) {
order: 4;
}
}
}
/* Avatar on right */
if (avataron=="rightside") {
ion-app > div > div > div > div:nth-of-type(1) {
display: flex;
flex-direction: row-reverse !important;
}
/* Avatar size */
if (avatarsize=="avatarlarge") {
@media screen and (min-width: 900px) {
/* Bigger avatar */
.css-oies6c,
.css-13tht1l,
.css-g2goff {
border-radius: 20px;
height: 512px;
right: 0.6%;
max-width: 512px;
padding: 0;
transition: 0.3s linear;
width: 512px;
}
/* Put chat and textarea more on right*/
.css-1lbk8wf {
padding-left: 10px;
padding-right: 545px;
width: 100vw;
}
}
}
if (avatarsize=="avatarsmall") {
@media screen and (min-width: 900px) {
/* Small avatar */
.css-oies6c,
.css-13tht1l,
.css-g2goff {
border-radius: 20px;
height: 320px;
max-width: 320px;
padding: 0;
right: 0.6%;
transition: 0.3s linear;
width: 320px;
}
/* Put chat and textarea more on right*/
.css-1lbk8wf {
padding-left: 10px;
padding-right: 350px;
width: 100vw;
}
}
}
if avatarcustomsize {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
border-radius: 20px;
height: avatarcustomsizevalue;
max-width: avatarcustomsizevalue;
padding: 0;
right: 0.6%;
transition: 0.3s linear;
width: avatarcustomsizevalue;
}
/* Put chat and textarea more on left */
.css-1lbk8wf {
padding-left: 10px;
padding-right: 30px + avatarcustomsizevalue;
width: 100vw;
}
}
}
if (avatarsize=="avatarhidden") {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
display: none;
height: 0;
width: 0;
}
.css-1lbk8wf {
padding-left: 10px;
padding-right: 10px;
width: 100vw;
}
}
/* System bubbles style */
if (systembubblesstyle=="systembubblesleft") {
.css-1y2ps2x {
display: none;
}
body:has(.css-1raxatq) .css-do4s31 {
visibility: hidden;
}
body:has(.css-1x3hygh) .css-do4s31 {
background-color: transparent;
border: none;
color: var(--chakra-colors-secondaryWhite);
display: grid !important;
font-size: fontsize;
row-gap: 10px;
--menu-shadow: transparent;
opacity: 1 !important;
position: fixed;
left: auto !important;
right: 10px !important;
visibility: visible !important;
z-index: unset !important;
}
if (avatarsize=="avatarlarge") {
.css-do4s31 {
bottom: .5em;
grid-template-columns: repeat(3, 1fr);
max-width: 512px;
width: 100%;
}
}
if (avatarsize=="avatarsmall") {
.css-do4s31 {
bottom: -.5em;
grid-template-columns: repeat(2, 1fr);
max-width: 320px;
width: 100%;
}
}
if avatarcustomsize {
if avatarcustomsizevalue < 512px {
.css-do4s31 {
grid-template-columns: repeat(2, 1fr);
max-width: avatarcustomsizevalue;
width: 100%;
}
}
if avatarcustomsizevalue >= 512px {
if avatarsize == "avatarlarge" {
.css-do4s31 {
bottom: .5em;
grid-template-columns: repeat(3, 1fr);
max-width: avatarcustomsizevalue;
width: 100%;
}
}
}
if (avatarsize=="avatarhidden") {
.css-do4s31 {
bottom: 1em;
grid-template-columns: repeat(3, 1fr);
right: -3%;
}
}
}
.css-do4s31 button {
justify-self: center;
white-space: nowrap;
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(254, 133, 133, 0.4) 5px 5px 5px 5px, rgba(254, 133, 133, 0.4) 5px -5px 5px 5px, rgba(139, 110, 255, 0.4) -5px 5px 5px 5px;
box-sizing: border-box;
background-clip: text;
color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
if (avatarsize=="avatarlarge") {
.css-zjyen2 {
gap: 0;
padding: 0 0 16px;
}
.css-b9bzmp {
align-self: flex-end;
background-color: var(--chakra-colors-secondaryBlack);
padding: 10px;
margin-right: 535px;
position: static;
width: 72%;
}
}
if (avatarsize=="avatarsmall") {
.css-zjyen2 {
gap: 0;
padding: 0 0 16px;
}
.css-b9bzmp {
align-self: flex-end;
background-color: var(--chakra-colors-secondaryBlack);
padding: 10px;
margin-right: 335px;
position: static;
width: calc(100% - 335px);
}
}
if avatarcustomsize {
.css-zjyen2 {
gap: 0;
padding: 0 0 16px;
}
.css-b9bzmp {
align-self: flex-end;
background-color: var(--chakra-colors-secondaryBlack);
padding: 10px;
margin-right: 30px + avatarcustomsizevalue;
position: static;
width: calc(100% - avatarcustomsizevalue);
}
}
if (avatarsize=="avatarhidden") {
.css-zjyen2 {
gap: 0;
padding: 0 0 16px;
}
.css-b9bzmp {
align-self: flex-end;
background-color: var(--chakra-colors-secondaryBlack);
padding: 10px;
margin-right: 535px;
position: static;
width: 72%;
}
.css-1lbk8wf {
left: 10px;
padding-right: 25px;
width: 100vw;
}
}
.css-94x4at {
background-color: transparent;
display: flex;
justify-content: center;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(1) {
display: none;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(2) {
order: 1;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(3) {
order: 2;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(4) {
justify-content: center;
order: 3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
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 {
align-self: flex-end;
background-color: var(--chakra-colors-secondaryBlack);
padding: 10px;
margin-right: 535px;
position: static;
width: 72%;
}
.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;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(1) {
display: none;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(2) {
order: 1;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(3) {
order: 2;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]: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-zjyen2 {
gap: 0;
padding: 0 0 16px;
}
.css-b9bzmp {
align-self: flex-end;
background-color: var(--chakra-colors-secondaryBlack) !important;
position: static;
width: 100%;
z-index: 1;
}
.css-b9bzmp:not(:focus) {
padding: 5px 10px !important;
}
.css-b9bzmp:focus-within {
padding: 10px !important;
}
textarea[aria-label="Send message textarea"]:not(:focus) {
height: 40px !important;
line-height: 40px !important;
min-height: 40px;
padding-top: 0;
}
textarea[aria-label="Send message textarea"]:not(:focus)::placeholder {
transform: translateY(-30%);
}
textarea[aria-label="Send message textarea"]:focus::placeholder {
top: 45%;
}
.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;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(1) {
display: none;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(2) {
order: 1;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(3) {
order: 2;
}
.chakra-menu__menuitem.css-94x4at[aria-disabled="false"]:nth-child(4) {
order: 4;
}
}
}
/*
if (avatarsize=="avatarhidden") {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
display: none;
height: 0;
width: 0;
}
} */
/* Avatar choice */
if avatarchoice {
.css-oies6c,
.css-1bwrjj6 {
height: 0;
}
.css-13tht1l {
background: url(avatarchoiceurl) no-repeat;
background-size: cover;
max-width: avatarsize;
}
if avatarzoom {
@media screen and (min-width: 900px) {
.css-13tht1l:hover {
border-radius: 0;
height: 933px;
left: -12px;
max-width: 933px;
top: 0;
width: 933px;
z-index: 9999;
}
}
@media screen and (min-height: 1080px) {
.css-13tht1l:hover {
border-radius: 0;
height: 1080px;
left: -10px;
max-height: 1080px;
max-width: 1080px;
top: 0;
width: 1080px;
z-index: 9999;
}
}
@media screen and (height: 1080px) {
.css-13tht1l:hover {
border-radius: 0;
height: 1080px;
left: -10px;
max-height: 1080px;
max-width: 1080px;
top: 0;
width: 1080px;
z-index: 9999;
}
}
}
/* Avatar position */
if (avatarposition=="avatarlargemiddle") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l {
position: absolute;
top: 8vh;
}
}
}
if (avatarposition=="avatarlargetop") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 0vh;
}
}
}
if (avatarposition=="avatarlargebottom") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 30vh;
}
}
}
if (avatarposition=="avatarsmallmiddle") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 28vh;
}
}
}
if (avatarposition=="avatarsmalltop") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 0vh;
}
}
}
if (avatarposition=="avatarsmallbottom") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 50vh;
}
}
}
}
if avatarrectangle {
/* Bigger avatar */
.css-oies6c,
.css-13tht1l,
.css-g2goff {
border-radius: 20px;
max-height: calc(100% - 40px);
min-height: calc(100% - 40px);
padding: 0;
top: 0;
transition: 0.3s linear;
width: 100%;
}
.css-1bwrjj6 {
object-fit: cover;
}
if avatarchoice {
.css-oies6c,
.css-1bwrjj6,
.css-g2goff {
border-radius: 20px;
height: 0;
padding: 0;
top: 0;
transition: 0.3s linear;
}
.css-13tht1l {
background: url(avatarchoiceurl);
background-position: center;
background-size: cover;
}
}
if avatarrectanglecustomheight {
/* Bigger avatar */
.css-oies6c,
.css-13tht1l,
.css-g2goff {
border-radius: 20px;
max-height: avatarrectanglecustomheightvalue;
min-height: avatarrectanglecustomheightvalue;
padding: 0;
top: 0;
transition: 0.3s linear;
width: 100%;
}
.css-1bwrjj6 {
object-fit: cover;
}
if avatarchoice {
.css-oies6c,
.css-1bwrjj6,
.css-g2goff {
border-radius: 20px;
height: 0;
padding: 0;
top: 0;
transition: 0.3s linear;
}
.css-13tht1l {
background: url(avatarchoiceurl);
background-position: center;
background-size: cover;
}
}
}
}
if avatarcircle {
.css-13tht1l,
.css-g2goff {
border-radius: 50%;
}
}
if avatarchat {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
display: none;
height: 0;
width: 0;
}
.css-1lbk8wf {
left: 0;
padding: 0 10px 0 15px;
width: 100vw;
}
if avatarchoice {
.css-1lbk8wf {
left: 0;
padding: 0 10px 0 0;
width: 100vw;
}
/* kin bubbles */
.css-1lbk8wf > .css-yhhl9h {
position: relative;
}
.css-1lbk8wf > .css-yhhl9h:before {
background-image: url(avatarchoiceurl);
background-position: center;
background-size: cover;
border-radius: 16px;
content: "";
height: 106px;
left: -1.5%;
position: absolute;
top: 10px;
width: 50px;
}
.css-ip0f2e {
margin-left: 90px;
}
}
if ouravatarchoice {
.css-1lbk8wf {
left: 0;
padding-right: 5px;
width: 100vw;
}
/* Our bubbles */
.css-1lbk8wf > .css-1dhayxc {
position: relative;
}
.css-1lbk8wf > .css-1dhayxc:after {
background-image: url(ouravatarchoiceurl);
background-position: center;
background-size: cover;
border-radius: 16px;
content: "";
height: 106px;
right: 0.5%;
position: absolute;
top: 10px;
width: 50px;
}
.css-v3ipd1 {
margin-right: 80px;
}
.css-yhhl9h,
.css-1dhayxc {
padding: 16px 0 16px 0;
}
}
}
if avatarzoom {
@media screen and (min-width: 900px) {
.css-oies6c:hover,
.css-v2kfba:hover,
.css-13tht1l:hover,
.css-1bwrjj6:hover {
border-radius: 0;
bottom: 0 !important;
left: 0;
max-width: 933px;
min-height: 100%;
position: fixed !important;
top: 0 !important;
z-index: 9999;
}
}
@media screen and (min-height: 1080px) {
.css-oies6c:hover,
.css-v2kfba:hover,
.css-13tht1l:hover,
.css-1bwrjj6:hover {
border-radius: 0px;
bottom: 0 !important;
left: 0;
max-width: 1080px;
min-height: 100%;
position: fixed;
top: 0 !important;
z-index: 9999;
}
}
@media screen and (height: 1080px) {
.css-oies6c:hover,
.css-v2kfba:hover,
.css-13tht1l:hover,
.css-1bwrjj6:hover {
border-radius: 0;
bottom: 0 !important;
left: 0;
max-width: 1080px;
min-height: 100%;
position: fixed;
top: 0 !important;
z-index: 9999;
}
}
}
/* Hide names in bubbles to save place */
if hidenames {
.css-ppua9z,
.css-19hb772 {
display: none;
}
.css-127w3cl {
margin-left: 0;
}
/* Initial letter */
.css-70qvj9 {
height: 0;
}
[alt="play"] {
height: 40px;
margin-left: -70px;
width: 40px;
}
.css-yhhl9h {
margin-left: 45px;
}
}
/* Buttons hover */
if iconshover {
.css-1wmt28i {
border-radius: 50%;
}
img:not(.css-cq95zi,.css-15h0znb,.css-t7xcd7,.css-t37m7q,.css-1regj17,.css-1bwrjj6):hover,
.css-100dd8p > .css-1wmt28i:nth-child(1):hover,
svg:not(.css-onkibi):hover {
border-radius: 50%;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px, rgba(254, 133, 133, 0.4) 5px 5px 5px 5px, rgba(254, 133, 133, 0.4) 5px -5px 5px 5px, rgba(139, 110, 255, 0.4) -5px 5px 5px 5px;
box-sizing: border-box;
}
}
/* Recalled journals & memories modal */
.css-16wjzov {
height: 90vh;
max-width: 80%;
}
.css-16wjzov .css-1yxzzu5 {
padding-top: 50px;
}
.css-16wjzov .css-1yxzzu5 > .css-5irwp6 > .css-17o3amj {
margin-left: 0;
padding-top: 20px;
}
.css-16wjzov .css-1yxzzu5 .css-oxi54a > .css-13ywrgk {
padding-top: 10% !important;
}
.css-11ql5cz {
padding: 10px;
}
/* Suggest message button */
[aria-label="Suggest message"] {
top: 50%;
transform: translateY(-50%);
}
/* Manually edited */
if manuallyedited {
.css-ip0f2e > p.chakra-text.css-dhnoom {
bottom: 0;
position: absolute;
right: -6em;
&::before {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
content: "Manually edited";
font-size: 14px;
visibility: visible;
}
& {
visibility: hidden;
}
}
}
/* Renegerate modal */
.css-1q3je8v {
max-width: 80%;
}
}
@-moz-document url-prefix("https://kindroid.ai/groupchat/") {
/* ===================================================================================================================================
Group chat
=================================================================================================================================== */
/* Remove the space between the header and the chat*/
.css-zjyen2 {
padding: 0;
}
/* Put groupd chat in full width */
.css-i6vm4m {
padding: 0 20px;
width: 100%;
}
/* Removes top right icons in header */
.css-1rdhwuq {
display: none !important;
}
/* Resize header */
.css-x3odei {
background-color: var(--chakra-colors-secondaryBlack) !important;
max-width: 100%;
padding: 0 10px 0 0.3%;
z-index: unset !important;
}
/* Add border to textarea when focus */
textarea:focus {
border: 0;
border-radius: 32px;
box-shadow: 0 0 0 1px rgb(139, 109, 255), 0 0 0 2px rgb(254, 132, 132);
}
/* Remove the resize icon on textarea on chat page */
textarea:not(:focus),
textarea:focus {
resize: none;
}
/* Hide voice counter and reduce button on avatar */
/* Text button */
.css-2bir3m,
/* Voice button */
.css-y0ybx5,
/* Reduce button */
.css-fk8dne {
display: none;
}
/* Edit group chat settings */
.css-1wjwxyy {
min-height: 90vh;
margin: 20px auto !important;
}
.css-i8vj7y {
max-width: 90%;
}
/* Modification of rounded corners for our bubbles */
.css-1j9xj7u {
border-radius: 20px 8px 20px 20px;
}
/* Modification of date for our bubbles */
ion-app > .ion-page > .css-ab8yd1 > .css-bvm5am > .css-1qpmsp4 > .css-zjyen2 > .css-i6vm4m > .css-1dhayxc > .css-v3ipd1 > .css-70qvj9 > .css-dhnoom {
font-size: fontsize;
padding-bottom: 5px;
}
/* Modification of rounded corners for AI bubbles */
.css-teti0a,
.css-1ulhpcc,
.css-1tg26k8,
.css-1t9c0mz {
border-radius: 8px 20px 20px 20px;
}
/* Modification of date for AI bubbles */
ion-app > .ion-page > .css-ab8yd1 > .css-bvm5am > .css-1qpmsp4 > .css-zjyen2 > .css-i6vm4m > .css-yhhl9h > .css-ip0f2e > .css-70qvj9 > .css-dhnoom {
font-size: fontsize;
margin-left: 40px;
padding-bottom: 5px;
}
if bubblescolor {
.css-6obdga,
.css-1gi22a8 {
color: bubblescolor;
}
}
/* Bigger text in bubbles and textarea */
.css-6obdga,
.css-1gi22a8,
textarea {
font-size: fontsize !important;
line-height: 1.5 !important;
}
textarea::placeholder {
line-height: 1.5 !important;
}
if kinbubblesbgcolor {
.css-teti0a {
background-color: kinbubblesbgcolor;
}
}
if kinbubblesbgurl {
.css-teti0a {
background-color: kinbubblesbgcolor;
background-image: url(kinbubblesbgurl);
}
}
if ourbubblesbgcolor {
.css-1j9xj7u {
background: ourbubblesbgcolor;
}
}
if ourbubblesbgurl {
.css-1j9xj7u {
background-color: ourbubblesbgcolor;
background-image: url(ourbubblesbgurl);
}
}
/* Put a not allowed cursor on spinner, microphone icon, play button, picture generating when needed */
.chakra-spinner,
.css-zkr1dl,
.css-jy2vee,
.css-kjafn5 [disabled] + button {
cursor: not-allowed;
}
/* Actions texts */
if (actionsstyle=="actionsdefault") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: rgb(168, 168, 168) !important;
font-style: italic !important;
}
}
if (actionsstyle=="asterisks") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksbold") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalic") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalicsamecolor") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="bold") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalic") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalicsamecolor") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="noitalic") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-style: normal !important;
}
}
if (actionsstyle=="samecolor") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
}
}
if actionscolor {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: actionscolor !important;
}
}
if gradientregenerate {
/* Regenerate icon */
.css-1wmt28i [alt="regenerate"] {
display: none;
}
.css-1jby15f > .css-100dd8p > .css-1wmt28i:nth-child(1) {
background: url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/gradient-regenerate.svg") no-repeat;
border-radius: 50%;
}
}
/* Put recalled memories icon on right and bigger */
.css-8lxt4j {
right: -3.25em !important;
z-index: 1;
}
.css-8lxt4j svg {
height: 36px;
width: 36px;
}
/* No avatar */
.css-1gei8v4 {
width: 100vw;
}
.css-1lbk8wf {
padding-right: 10px;
width: 100vw;
}
.css-yhhl9h {
margin-left: 10px !important;
}
/* Modification of Continue conversation button */
.css-iqq9iy {
transform: translateY(25%);
}
[aria-label="Continue conversation"] {
color: var(--chakra-colors-secondaryWhite);
font-size: 18px;
}
[aria-label="Continue conversation"]: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;
}
.css-iqq9iy {
max-height: 72px;
width: 100%;
}
/* System bubbles style */
.css-do4s31,
.css-94x4at{
background-color: #161616;
border-color: #6C6C6C;
color: var(--chakra-colors-secondaryWhite);
}
.css-100dd8p {
gap: 50px !important;
flex-direction: row-reverse !important;
}
.css-1lbk8wf {
margin-bottom: 72px;
}
.css-b9bzmp {
background-color: var(--chakra-colors-secondaryBlack);
bottom: 0;
padding: 10px;
position: static;
align-self: flex-end;
width: 100%;
}
.css-1y2ps2x {
color: var(--chakra-colors-secondaryWhite);
margin-left: 50px;
}
if hidenames {
/* Hide names in bubbles to save place */
.css-ppua9z,
.css-19hb772 {
display: none;
}
.css-127w3cl {
margin-left: 0;
}
/* Initial letter */
.css-70qvj9 {
height: 0;
}
.css-70qvj9 > .css-127w3cl {
height: 40px;
margin-left: -75px;
width: 40px;
}
.css-yhhl9h {
margin-left: 50px;
}
.css-qfa1mb {
display: none;
}
}
/* 3 dots */
.css-1y2ps2x:hover {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background-clip: text;
color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Buttons hover */
if iconshover {
.css-1wmt28i {
border-radius: 50%;
}
img:not(.css-cq95zi,.css-15h0znb,.css-t7xcd7,.css-t37m7q,.css-1regj17):hover,
.css-100dd8p > .css-1wmt28i:nth-child(1):hover,
svg:not(.css-onkibi):hover {
border-radius: 50%;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px, rgba(254, 133, 133, 0.4) 5px 5px 5px 5px, rgba(254, 133, 133, 0.4) 5px -5px 5px 5px, rgba(139, 110, 255, 0.4) -5px 5px 5px 5px;
box-sizing: border-box;
}
}
/* Modals's close button */
.css-g7rsv1 svg,
.css-1k7lgzp svg {
height: 20px !important;
margin: 20px 20px 0 0;
width: 20px !important;
z-index: 9999;
}
/* Suggest message button */
[aria-label="Suggest message"] {
top: 50%;
transform: translateY(-50%);
}
/* Group bar */
ion-app > div > div > div > div > div > div:nth-of-type(1) {
justify-content: start;
left: 80px;
top: 5px;
position: fixed;
max-width: 166px;
z-index: 99999;
}
ion-app > div > div > div > div > div > div:nth-of-type(1) > div {
display: inline-flex;
gap: 0;
}
ion-app > div > div > div > div > div > div:nth-of-type(1) > div > p {
order: 2;
text-align: left;
}
ion-app > div > div > div > div > div > div:nth-of-type(1) > div > button {
order: 1;
margin-left: -10px;
margin-right: -10px;
}
/* Renegerate modal */
.css-1q3je8v {
max-width: 80%;
}
}
@-moz-document url("https://kindroid.ai/selfies"), url("https://kindroid.ai/selfies/") {
/* ===================================================================================================================================
Selfies page
=================================================================================================================================== */
/* Wide selfie page */
.css-1ivym2n,
.css-10ytma2 {
max-width: 100%;
}
.css-fskrnz {
width: 84vh;
}
/* Gallery */
.css-ezgmhy {
gap: 20px;
justify-content: center;
z-index: 9999 !important;
}
.css-3vu8ng,
.css-kuf6b {
height: auto;
width: 290px;
}
/* Kin's name */
.css-6gs9hh {
left: 50%;
text-align: center;
top: 0;
position: absolute;
transform: translateX(-50%);
width: max-content;
z-index: 9999;
}
.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 image button at the top */
if requestimage {
@media screen and (min-width: 900px) {
.css-12j2ye5 {
height: fit-content;
left: 32px;
padding-bottom: 0;
position: absolute;
top: 2%;
width: fit-content;
}
}
@media screen and (height: 1080px) {
.css-12j2ye5 {
height: fit-content;
left: 32px;
padding-bottom: 0;
position: absolute;
top: 2%;
width: fit-content;
}
}
@media screen and (height: 1300px) {
.css-12j2ye5 {
height: fit-content;
left: 32px;
padding-bottom: 0;
position: absolute;
top: 2%;
width: fit-content;
}
}
@media screen and (min-height: 1760px) {
.css-12j2ye5 {
height: fit-content;
left: 32px;
padding-bottom: 0;
position: absolute;
top: 2%;
width: fit-content;
}
}
}
/* 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:hover,
.css-dfpqc0 > img:hover {
height: 512px !important;
width: 512px !important;
}
.css-1jcj2pk {
color: white;
}
/* Hide reddit, discord, kindroid logos */
header > div > .css-1rdhwuq {
display: none;
}
/* Load More button */
.css-1m67823 {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -webkit-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
border-radius: 56px;
color: var(--chakra-colors-pureWhite);
font-size: 18px;
height: fit-content;
padding-bottom: var(--chakra-space-2);
padding-top: var(--chakra-space-2);
width: 120px;
}
.css-1m67823:hover {
text-decoration: none;
}
/* Image border on hover */
if imageborder {
.css-1vuqv5m,
.css-1regj17 {
border-radius: 16px;
}
.css-1vuqv5m > .css-1regj17:hover {
height: 100%;
width: 100%;
}
.css-1regj17:hover {
transition: 0.2s linear;
}
.css-1regj17:hover {
border-radius: 16px;
height: 300px;
width: 300px;
}
.css-3vu8ng:hover {
border-radius: 16px;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px, rgba(254, 133, 133, 0.4) 5px 5px 5px 5px, rgba(254, 133, 133, 0.4) 5px -5px 5px 5px, rgba(139, 110, 255, 0.4) -5px 5px 5px 5px;
transition: 0.2s linear;
}
}
/* Put delete image button in red */
.css-chdrwy > .css-1icfsi7 > .css-r6z5ec > .css-do4s31,
.css-chdrwy > .css-1icfsi7 > .css-r6z5ec > .css-do4s31 > .css-94x4at {
background: var(--chakra-colors-secondaryBlack);
}
.css-chdrwy > .css-1icfsi7 > .css-r6z5ec > .css-do4s31 > .css-94x4at > .css-nvswzl {
color: var(--chakra-colors-red);
}
/* Blur content */
if blurcontent {
.css-1regj17,
.css-pyo214 {
filter: blur(50px);
-moz-filter: blur(50px);
-webkit-filter: blur(50px);
}
}
/* Selfie modal */
.css-fskrnz {
height: 809px;
width: 80vw;
}
.css-vwi0gr {
height: 773px;
left: 0;
margin-bottom: 0;
position: absolute;
width: auto;
}
.transform-component-module_wrapper__SPB86 {
border-radius: 0 0 0 16px;
}
.css-1qxap43 {
left: 52%;
max-height: max-content;
position: absolute;
}
.css-k4oaha {
width: 760px;
}
.css-bq8vjq {
font-size: 20px;
margin-top: 4rem;
text-align: justify;
padding-right: 20px;
word-break: normal;
}
.css-151uqsi {
color: var(--chakra-colors-secondaryWhite);
font-size: 20px;
position: absolute;
right: 50px;
top: 1rem;
}
.css-1kzpbjv {
font-size: 20px;
position: absolute;
top: 1rem;
}
}
@-moz-document url("https://kindroid.ai/voicecall"), url("https://kindroid.ai/voicecall/") {
/* ===================================================================================================================================
Voicecall page
=================================================================================================================================== */
/* Bigger text */
.css-7wdzg1,
.css-14mmx5r,
.css-1vqt2yh {
font-size: 18px;
}
/* Avatar choice */
if avatarchoice {
[alt="avatar"] {
background: url(avatarchoiceurl) border-box;
background-size: cover;
border-color: rgb(40, 40, 40);
border-radius: 50%;
border-style: solid;
}
}
if (avatarsize=="avatarlarge") {
ion-app > div > div > div > div > div:nth-of-type(2) > div:first-child,
ion-app > div > div > div > div > div:nth-of-type(2) > div:first-child > div:nth-of-type(3) {
height: 512px;
margin-top: 5%;
width: 512px;
}
ion-app > div > div > div > div > div:nth-of-type(2) > div > div > div {
z-index: 9999;
}
[alt="avatar"] {
border-color: rgb(40, 40, 40);
border-radius: 50%;
border-style: solid;
height: 512px;
max-width: 512px;
padding: 0;
transition: 0.3s linear;
width: 512px;
}
}
if (avatarsize=="avatarsmall") {
ion-app > div > div > div > div > div:nth-of-type(2) > div:first-child,
ion-app > div > div > div > div > div:nth-of-type(2) > div:first-child > div:nth-of-type(3) {
height: 320px;
margin-top: 5%;
width: 320px;
}
ion-app > div > div > div > div > div:nth-of-type(2) > div > div > div {
z-index: 9999;
}
[alt="avatar"] {
border-color: rgb(40, 40, 40);
border-radius: 50%;
border-style: solid;
height: 320px;
max-width: 320px;
padding: 0;
transition: 0.3s linear;
width: 320px;
}
}
if avatarcustomsize {
ion-app > div > div > div > div > div:nth-of-type(2) > div:first-child,
ion-app > div > div > div > div > div:nth-of-type(2) > div:first-child > div:nth-of-type(3) {
height: avatarcustomsizevalue;
margin-top: 5%;
width: avatarcustomsizevalue;
}
ion-app > div > div > div > div > div:nth-of-type(2) > div > div > div {
z-index: 9999;
}
[alt="avatar"] {
border-color: rgb(40, 40, 40);
border-radius: 50%;
border-style: solid;
height: avatarcustomsizevalue;
max-width: avatarcustomsizevalue;
transition: 0.3s linear;
width: avatarcustomsizevalue;
}
}
if (avatarsize=="avatarhidden") {
ion-app > div > div > div > div > div:nth-of-type(2) > div:first-child,
ion-app > div > div > div > div > div:nth-of-type(2) > div:first-child > div:nth-of-type(3),
[alt="avatar"] {
display: none;
height: 0;
width: 0;
}
ion-app > div > div > div > div > div:nth-of-type(2) > div {
margin: auto;
}
}
/* Removes top right icons in header */
header > div > div:nth-of-type(2) {
display: none !important;
}
}
@-moz-document url("https://www.feedough.com/stable-diffusion-prompt-generator/") {
/* ===================================================================================================================================
iframe for help prompts
=================================================================================================================================== */
/* Hide scrollbars */
:root ::-webkit-scrollbar {
overflow: hidden !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
-moz-overflow-style: none !important;
-webkit-overflow-style: none !important;
width: 0 !important;
}
::-webkit-scrollbar {
overflow: hidden !important;
display: none !important;
width: 0 !important;
}
/* Hide content of iframe */
#thrive-header > div > div.symbol-section-in.tve-default-state.tcb-mp > div > div > div:nth-child(2),
#thrive-header > div > div.symbol-section-in.tve-default-state.tcb-mp > div > div > div:nth-child(3),
#tve_editor > div > div.thrv_wrapper.thrv-page-section.tcb-window-width,
#tve_editor > div > div.thrv_wrapper.thrv-page-section.tcb-window-width > div.tve-page-section-out,
#tve_editor > div:nth-child(5) > div.tve-page-section-in > div > div > div:nth-child(1),
#tve_tcb2_personal-brand-v1-2-step-ribbon_m1 > div,
.tl-state-root.tve-leads-ribbon.tve-trigger-hide.tve-tl-anim.tve-leads-track-ribbon-75.tl-anim-slide_top.tve-leads-triggered,
.thrv-lp-block,
#ai_x_generator_65c5fc4f631f6_form > div > label,
#tve_editor > div:nth-child(4),
#tve_editor > div:nth-child(7),
#tve_editor > div:nth-child(8),
#tve_editor > div:nth-child(9),
#tve_editor > div:nth-child(10),
body > div:nth-child(40) {
display: none !important;
height: 0 !important;
}
/* Show only what we need in iframe */
body {
overflow: hidden !important;
}
.ai-x-generator-container {
margin-top: 0 !important;
}
.thrv_wrapper {
margin: 0 !important;
padding: 0 !important;
}
.tcb-col {
border: 0 !important;
}
#tve_editor > div:nth-child(6) {
overflow: hidden !important;
position: fixed !important;
}
[data-css=tve-u-18a4637eccf] {
max-width: 100% !important;
min-width: 100% !important;
width: 100% !important;
}
}