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.5
@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
@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
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.5';
--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.5';
--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;
}
}
/* 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;
}
/* Reduce space between icons in header and put header at the 1st plan */
.css-x3odei > div:nth-of-type(1) {
gap: 10px;
z-index: 1;
}
/* Put Return icon in header clickable again */
.css-z0osps > div > div:nth-of-type(1) {
z-index: 1;
}
/* Hide scrollbars */
.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%);
}
/* 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 avatar */
ion-app > div > div > div > div > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(3) {
filter: blur(8px);
-moz-filter: blur(8px);
-webkit-filter: blur(8px);
}
}
/* 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;
}
/* 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
======================================================================== */
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 */
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(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 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;
}
/* 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;
}
/* Move and fix the Save button in all menu page */
[aria-label="Save"] {
bottom: 20px;
left: 50%;
position: fixed;
transform: translateX(-50%);
width: fit-content;
}
/* 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;
}
/* Reorder kins */
[aria-label*="Reorder"] svg,
[aria-label*="Reorder"]::before {
min-height: 40px;
}
[aria-label*="Reorder"]::before {
align-items: center;
content: "Reorder Kindroids";
display: flex;
font-size: 20px;
height: 40px;
margin-right: 10px;
}
/* More options icons */
[aria-label="more-options"] {
font-size: 40px;
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;
}
/* 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/[email protected]/dist/svg/chevron-down-outline.svg");
background-size: contain;
background-repeat: no-repeat;
content: "";
display: inline-block;
filter: invert(79%) sepia(6%) saturate(37%) hue-rotate(161deg) brightness(92%) contrast(86%);
height: 20px;
width: 20px;
}
/* Danger zone: delete account */
.css-yk3l44 {
bottom: 150px;
}
.css-19zv6py {
font-weight: 600;
font-size: 18px;
width: max-content;
}
/* 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: 4%;
max-width: 45% !important;
}
.css-1wy8ffp {
justify-content: center;
}
.css-ue4bfp {
display: block;
margin-top: -5%;
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%;
}
/* Swipe arrows */
.avatarSlider .swiper-button-next::after,
.avatarSlider .swiper-button-prev::after {
color: var(--chakra-colors-primaryWhite);
}
/* Bigger text and line height in avatar window */
.css-161kpzt * {
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;
}
}
/* ===================================================================================================================================
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;
}
}
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: 0 0 0 1px rgb(139, 109, 255), 0 0 0 2px rgb(254, 132, 132);
}
/* Remove the resize icon on textarea on chat page */
textarea:not(:focus),
textarea:focus {
resize: none;
}
/* Hide reduce button on avatar */
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 */
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) {
border-radius: 20px 8px 20px 20px !important;
}
/* Modification of rounded corners for AI bubbles */
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) {
border-radius: 8px 20px 20px 20px;
}
if bubblescolor {
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,
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) > div:nth-of-type(3) > p {
color: bubblescolor;
}
}
/* Bigger text in bubbles and textarea */
.css-1dhayxc p,
.css-yhhl9h p,
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 */
[aria-label="Continue cut-off message"] svg {
height: 20px;
width: 20px;
}
[aria-label="Continue cut-off message"]: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;
}
/* Actions texts */
if (actionsstyle=="actionsdefault") {
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 > span,
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) > div:nth-of-type(3) > p > span {
color: rgb(168, 168, 168) !important;
font-style: italic !important;
}
}
if (actionsstyle=="asterisks") {
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 > span:before,
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 > span:after,
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) > div:nth-of-type(3) > p > span:before,
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) > div:nth-of-type(3) > p > span:after {
content: "*" !important;
}
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 > span,
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) > div:nth-of-type(3) > p > span {
font-style: italic !important;
}
}
if (actionsstyle=="asterisksbold") {
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 > span:before,
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 > span:after,
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) > div:nth-of-type(3) > p > span:before,
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) > div:nth-of-type(3) > p > span:after {
content: "*" !important;
}
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 > span,
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) > div:nth-of-type(3) > p > span {
font-style: italic !important;
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalic") {
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 > span:before,
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 > span:after,
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) > div:nth-of-type(3) > p > span:before,
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) > div:nth-of-type(3) > p > span:after {
content: "*" !important;
}
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 > span,
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) > div:nth-of-type(3) > p > span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalicsamecolor") {
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 > span:before,
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 > span:after,
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) > div:nth-of-type(3) > p > span:before,
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) > div:nth-of-type(3) > p > span:after {
content: "*" !important;
}
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 > span,
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) > div:nth-of-type(3) > p > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="bold") {
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 > span,
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) > div:nth-of-type(3) > p > span {
font-style: italic !important;
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalic") {
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 > span,
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) > div:nth-of-type(3) > p > span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalicsamecolor") {
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 > span,
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) > div:nth-of-type(3) > p > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="noitalic") {
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 > span,
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) > div:nth-of-type(3) > p > span {
font-style: normal !important;
}
}
if (actionsstyle=="samecolor") {
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 > span,
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) > div:nth-of-type(3) > p > span {
color: var(--chakra-colors-secondaryWhite) !important;
}
}
if actionscolor {
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 > span,
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) > div:nth-of-type(3) > p > span {
color: actionscolor !important;
font-style: italic !important;
}
}
/* Avatar position */
if (avatarposition=="avatarlargemiddle") {
@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 {
margin-top: 8vh;
}
}
}
if (avatarposition=="avatarlargetop") {
@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 {
margin-top: 0vh;
}
}
}
if (avatarposition=="avatarlargebottom") {
@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 {
margin-top: 0vh;
}
}
}
if (avatarposition=="avatarsmallmiddle") {
@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 {
margin-top: 16vh;
}
}
}
if (avatarposition=="avatarsmalltop") {
@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 {
margin-top: 4vh;
}
}
}
if (avatarposition=="avatarsmallbottom") {
@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 {
margin-top: 28vh;
}
}
}
if avatarcustomposition {
@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 {
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 */
[aria-label="show recalled memories"] {
right: -3.25em !important;
z-index: 1;
}
[aria-label="show recalled memories"] 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: 10px;
}
}
/* System bubbles style */
if (systembubblesstyle=="systembubblesleft") {
body:not(:has(.css-r1nv3m)) 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(2) > [aria-label="more-options"],
body:has(.css-r1nv3m) ion-app > div > div > div > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > .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;
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(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;
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;
}
.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: 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;
}
.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-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[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-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) {
.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) {
.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;
}
}
}
/* Avatar choice */
if avatarchoice {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div img {
display: none;
height: 0;
width: 0;
}
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div {
background: url(avatarchoiceurl) no-repeat;
background-size: cover;
max-width: avatarsize;
}
if avatarzoom {
@media screen and (min-width: 900px) {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div:hover {
border-radius: 0;
height: 933px;
left: -12px;
max-width: 933px;
top: 0;
width: 933px;
z-index: 9999;
}
}
@media screen and (min-height: 1080px) {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div: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) {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div: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) {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div {
position: absolute;
top: 8vh;
}
}
}
if (avatarposition=="avatarlargetop") {
@media screen and (min-width: 900px) {
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 {
position: absolute;
top: 0vh;
}
}
}
if (avatarposition=="avatarlargebottom") {
@media screen and (min-width: 900px) {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div {
position: absolute;
top: 30vh;
}
}
}
if (avatarposition=="avatarsmallmiddle") {
@media screen and (min-width: 900px) {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div {
position: absolute;
top: 28vh;
}
}
}
if (avatarposition=="avatarsmalltop") {
@media screen and (min-width: 900px) {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div {
position: absolute;
top: 0vh;
}
}
}
if (avatarposition=="avatarsmallbottom") {
@media screen and (min-width: 900px) {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div {
position: absolute;
top: 50vh;
}
}
}
}
if avatarrectangle {
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 {
border-radius: 20px;
margin-top: 0;
min-height: calc(100% - 100px);
padding: 0;
transition: 0.3s linear;
}
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div img {
object-fit: cover;
}
if avatarchoice {
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 {
border-radius: 20px;
height: 0;
padding: 0;
top: 0;
transition: 0.3s linear;
}
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 {
background: url(avatarchoiceurl);
background-position: center;
background-size: cover;
top: 15px;
}
}
if avatarrectanglecustomheight {
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 {
border-radius: 20px;
max-height: avatarrectanglecustomheightvalue !important;
min-height: avatarrectanglecustomheightvalue !important;
padding: 0;
top: 0;
transition: 0.3s linear;
width: 100%;
}
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 {
object-fit: cover;
}
if avatarchoice {
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 {
border-radius: 20px;
height: 0;
padding: 0;
top: 0;
transition: 0.3s linear;
}
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 {
background: url(avatarchoiceurl);
background-position: center;
background-size: cover;
}
}
}
}
if avatarcircle {
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: 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) {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div img:hover,
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div: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) {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div img:hover,
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div: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) {
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div img:hover,
ion-app > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > div: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-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 .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"] {
height: 40px;
margin-left: -70px;
width: 40px;
}
.css-yhhl9h {
margin-left: 50px;
}
}
/* 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 {
body:not(:has(.css-r1nv3m)) 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) > p,
body:has(.css-r1nv3m) ion-app > div > div > div > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > .css-yhhl9h > div:nth-of-type(1) > 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";
font-size: 14px;
visibility: visible;
}
& {
visibility: hidden;
}
}
}
/* Renegerate modal */
body > div section.css-1q3je8v {
max-width: 80%;
}
}
@-moz-document url-prefix("https://kindroid.ai/groupchat/") {
/* ===================================================================================================================================
Group chat
=================================================================================================================================== */
/* Put groupd 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;
width: 100%;
}
/* Remove space on left of kin's bubbles */
ion-app > div > div > div > div > div > div:nth-of-type(2) > .css-yhhl9h {
margin-left: 0 !important;
}
/* Add border to textarea when focus */
input: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;
}
/* Edit group chat settings */
.css-1wjwxyy {
height: calc(100% - 80px);
top: 60px;
padding: 0;
}
.css-i8vj7y {
max-width: 90%;
}
/* Modification of rounded corners for our bubbles */
ion-app > div > div > div > div > div > div:nth-of-type(2) > .css-1dhayxc > div:nth-of-type(2) {
border-radius: 20px 8px 20px 20px;
}
/* Modification of rounded corners for AI bubbles */
ion-app > div > div > div > div > div > div:nth-of-type(2) > .css-yhhl9h > div:nth-of-type(2) {
border-radius: 8px 20px 20px 20px;
}
if bubblescolor {
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 p:not(.css-dhnoom) {
color: bubblescolor;
}
}
/* Bigger text in bubbles and textarea */
.css-1dhayxc p,
.css-yhhl9h p,
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;
}
/* Actions texts */
if (actionsstyle=="actionsdefault") {
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 > span,
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 > span {
color: rgb(168, 168, 168) !important;
font-style: italic !important;
}
}
if (actionsstyle=="asterisks") {
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 > span:before,
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 > span:after,
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 > span:before,
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 > span:after {
content: "*" !important;
}
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 > span,
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 > span {
font-style: italic !important;
}
}
if (actionsstyle=="asterisksbold") {
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 > span:before,
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 > span:after,
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 > span:before,
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 > span:after {
content: "*" !important;
}
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 > span,
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 > span {
font-style: italic !important;
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalic") {
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 > span:before,
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 > span:after,
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 > span:before,
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 > span:after {
content: "*" !important;
}
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 > span,
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 > span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalicsamecolor") {
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 > span:before,
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 > span:after,
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 > span:before,
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 > span:after {
content: "*" !important;
}
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 > span,
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 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="bold") {
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 > span,
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 > span {
font-style: italic !important;
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalic") {
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 > span,
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 > span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalicsamecolor") {
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 > span,
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 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="noitalic") {
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 > span,
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 > span {
font-style: normal !important;
}
}
if (actionsstyle=="samecolor") {
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 > span,
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 > span {
color: var(--chakra-colors-secondaryWhite) !important;
}
}
if actionscolor {
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 > span,
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 > span {
color: actionscolor !important;
font-style: italic !important;
}
}
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 {
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 */
[aria-label="show recalled memories"] {
right: -3.25em !important;
z-index: 1;
}
[aria-label="show recalled memories"] 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 {
bottom: 20%;
right: 10%;
position: fixed;
transform: none !important;
}
.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-baff0l {
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: calc(100% - 60px);
}
.css-1y2ps2x {
color: var(--chakra-colors-secondaryWhite);
margin-left: 50px;
}
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 .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"] {
height: 40px;
margin-left: -70px;
width: 40px;
}
.css-yhhl9h {
margin-left: 50px;
}
}
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"] {
height: 40px;
margin-left: -70px;
width: 40px;
}
.css-yhhl9h {
margin-left: 50px;
}
}
}
/* Modification of Continue conversation button */
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,
[aria-label="Continue conversation"] {
bottom: 10px;
height: 61px;
left: 0;
max-width: 61px;
position: fixed !important;
text-indent: -9999px;
width: 61px;
}
[aria-label="Continue conversation"]::before {
background-image: url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/continue_conversation.svg");
background-size: cover;
background-repeat: no-repeat;
content: "";
height: 48px;
width: 48px;
}
[aria-label="Continue conversation"]:hover::before {
background-image: url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/continue_conversation_hover.svg");
background-size: cover;
content: "";
height: 48px;
width: 48px;
}
[aria-label="Continue conversation"]: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;
}
/* 3 dots */
[aria-label="more-options"] {
font-size: 40px;
line-height: 20px;
right: 10px;
}
[aria-label="more-options"]: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;
}
}
/* 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: flex-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) > button {
justify-content: flex-start;
}
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 */
body > div section.css-1q3je8v {
max-width: 80%;
}
}
@-moz-document url("https://kindroid.ai/selfies"), url("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;
}
}
/* Gallery */
ion-app > div > div > div > div > div > div:nth-of-type(2) {
gap: 20px;
height: 100vh;
justify-content: center;
padding-bottom: 20px;
padding-top: 20px;
max-width: 100%;
z-index: 9999 !important;
}
ion-app > div > div > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(1) {
height: auto;
width: 290px;
}
if blurcontent {
ion-app > div > div > div > div > div > div:nth-of-type(2) > div img,
.css-fskrnz > div > div:nth-of-type(1) > div:nth-of-type(1) > div img,
.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 */
.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 > div:last-child {
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-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: 80vw;
}
.css-fskrnz > div > div:nth-of-type(1) {
height: 773px;
left: 0;
margin-bottom: 0;
position: absolute;
width: auto;
}
.css-fskrnz > div > div:nth-of-type(1) > div {
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 {
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;
}
/* 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;
}
}
/* 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;
}
}
}
@-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;
}
}