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.39.3
@author BreatFR (https://breat.fr)
@namespace https://gitlab.com/breatfr
@homepageURL https://gitlab.com/breatfr/kindroid
@supportURL https://discord.com/channels/1116127115574779905/1145809654044176485
@license AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
@preprocessor stylus
@var select actionsstyle "Actions texts style" {
"Default": "actionsdefault",
"Asterisks": "asterisks",
"Asterisks + bold": "asterisksbold",
"Asterisks + Bold + no italic": "asterisksboldnoitalic",
"Asterisks + Bold + no italic + same color": "asterisksboldnoitalicsamecolor",
"Bold": "bold",
"Bold + no italic": "boldnoitalic",
"Bold + no italic + same color": "boldnoitalicsamecolor",
"No italic": "noitalic",
"Same color": "samecolor"
}
@var color actionscolor "Actions texts color choice" rgb(168, 168, 168)
@var checkbox avatarchoice "Avatar changer" 0
@var text avatarchoiceurl "Avatar changer URL" "URL between quotes"
@var select avatarposition "Avatar position" {
"Large Middle": "avatarlargemiddle",
"Large Top": "avatarlargetop",
"Large Bottom": "avatarlargebottom",
"Small Middle": "avatarsmallmiddle",
"Small Top": "avatarsmalltop",
"Small Bottom": "avatarsmallbottom",
}
@var checkbox avatarchat "Avatar chat" 0
@var checkbox ouravatarchoice "Avatar changer for us" 0
@var text ouravatarchoiceurl "Avatar changer for us URL" "URL between quotes"
@var checkbox avatarcircle "Avatar circle" 0
@var checkbox avatarcustomposition "Avatar custom position" 0
@var text avatarcustompositionvalue "Avatar custom position value" 12vh
@var select avatarsize "Avatar size" {
"Large": "avatarlarge",
"Small": "avatarsmall",
"Hidden": "avatarhidden"
}
@var checkbox avatarcustomsize "Avatar custom size" 0
@var text avatarcustomsizevalue "Avatar custom size value" 512px
@var checkbox avatarrectangle "Avatar rectangle" 1
@var checkbox avatarrectanglecustomheight "Avatar rectangle custom height" 0
@var text avatarrectanglecustomheightvalue "Avatar custom height value" 256px
@var checkbox avatarzoom "Avatar hoverzoom" 0
@var select bgchoice "Background choice" {
"❤️ Hearts": "heartbg",
"⬜ None": "nobg",
"❔ Custom": "custombg"
}
@var color bgcolor "Background color" #101010
@var text custombgurl "Background URL" "URL between quotes"
@var checkbox blurcontent "Blur content" 0
@var color bubblescolor "Bubbles font color" #CBCBCB
@var text fontsize "Custom font size" 1.2rem
@var checkbox gradientregenerate "Gradient regenerate icon" 1
@var checkbox hidenames "Hide names in bubbles" 1
@var color kinbubblesbgcolor "Kin bubbles background color" rgb(33, 27, 25)
@var text kinbubblesbgurl "Kin bubbles background URL" "URL between quotes"
@var color ourbubblesbgcolor "Our bubbles background color" rgb(27, 28, 30)
@var text ourbubblesbgurl "Our bubbles background URL" "URL between quotes"
@var select systembubblesstyle "System bubbles style" {
"Left": "systembubblesleft",
"Dark": "systembubblesdark"
}
@var checkbox iconshover "Icons hover" 1
@var checkbox hidetrialbar "Hide trial bar" 1
@var checkbox imageborder "Image border on hover" 1
@var checkbox requestimage "Request image button at top" 1
==/UserStyle== */
/* === Credits ===
Website https://breat.fr
facebook https://www.facebook.com/breatfroff
mastodon https://mastodon.social/@breat_fr
telegram https://t.me/breatfr
vk https://vk.com/breatfroff
X (twitter) https://x.com/breatfroff
=== Credits === */
@-moz-document domain("kindroid.ai") {
/* ===================================================================================================================================
Whole kindroid domain
=================================================================================================================================== */
/* Versions */
:root {
--themeversion: 'Theme v3.39.3';
--chatversionpc: 'Chat script PC v1.11.1';
--chatversionmobile: 'Chat script mobile v1.11.1';
--selfiesversionpc: 'Selfies script PC v1.07.1';
--selfiesversionmobile: 'Selfies script mobile v1.07.1';
--author: ' by BreatFR';
--install: ' usercssjs.breat.fr or gitlab.com/breatfr/kindroid ';
--space: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
--support: ' ko-fi.com/breatfr or paypal.me/breat ';
}
.css-x3odei::after,
.css-z0osps::after {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
content: var(--themeversion) ' · ' var(--chatversionpc) ' · ' var(--chatversionmobile) ' · ' var(--selfiesversionpc) ' · ' var(--selfiesversionmobile) var(--author) '\A' 'Install: ' url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/arrow-left.svg") var(--install) url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/arrow-right.svg") var(--space) ' Support me: ' url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/arrow-left.svg") var(--support) url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/arrow-right.svg");
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: max-content;
white-space: pre-line;
}
/* Hide scrollbars */
.css-1lbk8wf,
:root ::-webkit-scrollbar {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
-moz-overflow-style: none !important;
-webkit-overflow-style: none !important;
width: 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%);
}
/* Background */
if (bgchoice=="heartbg") {
.css-1lvpjll,
.css-10ytma2,
.css-1p90m26,
.css-11m3l17 {
background: url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/heart-pattern.png") bgcolor fixed 100% !important;
}
}
if (bgchoice=="nobg") {
/* No background */
.css-1lvpjll,
.css-10ytma2,
.css-1p90m26,
.css-11m3l17 {
background: var(--chakra-colors-secondaryBlack) !important;
}
}
if (bgchoice=="custombg") {
/* Custom background */
.css-1lvpjll,
.css-10ytma2,
.css-1p90m26,
.css-11m3l17 {
background: url(custombgurl) bgcolor fixed 100% !important;
}
}
if bgcolor {
.css-1lvpjll,
.css-10ytma2,
.css-1p90m26,
.css-11m3l17 {
background-color: bgcolor;
}
}
}
@-moz-document url("https://kindroid.ai/home") {
/* ===================================================================================================================================
Chat page
=================================================================================================================================== */
/* ========================================================================
Header and menu
======================================================================== */
/* Header background color */
.css-x3odei {
background-color: var(--chakra-colors-primaryBlack) !important;
}
if hidetrialbar {
.css-r1nv3m {
display: none;
}
}
/* Tooltips */
[aria-label="gallery"]:hover::after {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
border-radius: 16px;
color: var(--chakra-colors-primaryWhite);
content: "Selfies";
font-size: 16px;
left: -20%;
padding: 10px;
position: absolute;
top: 100%;
}
[aria-label="voicecall"]:hover::after {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
border-radius: 16px;
color: var(--chakra-colors-primaryWhite);
content: "Voicecall";
font-size: 16px;
left: -30%;
padding: 10px;
position: absolute;
top: 100%;
}
[aria-label="rewards"]:hover::after {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
border-radius: 16px;
color: var(--chakra-colors-primaryWhite);
content: "Rewards";
font-size: 16px;
left: -40%;
padding: 10px;
position: absolute;
top: 100%;
}
/* Put Log out in orange */
.css-yk3l44 > h2:nth-child(3) {
color: var(--chakra-colors-orange);
}
/* Put Biling in yellow */
.css-1fu7n7b > div > p {
color: var(--chakra-colors-yellow-400);
}
/* Put User Guide and Announcements and Terms in blue */
.css-yk3l44 > h2,
.css-j7qwjs > div:nth-child(7) > p {
color: var(--chakra-colors-blue-400);
}
/* Put email and timer in white */
.css-1dodils,
.css-1g7lxfg {
color: var(--chakra-colors-secondaryWhite);
margin-top: 10px;
}
/* Put Upload Photo text in custom avatar in white to be more visible */
.css-1jcj2pk {
color: var(--chakra-colors-secondaryWhite);
}
/* Billing error box */
.css-dixmdy {
background-color: #161616;
border: 1px solid #6C6C6C;
border-radius: 10px;
color: var(--chakra-colors-secondaryWhite);
}
@media screen and (min-width: 900px) {
/* Large menu */
.css-1raxatq,
.css-xhpjzu {
max-width: 100% !important;
width: 100% !important;
}
/* Email box */
.css-1dodils {
align-self: center;
gap: 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;
}
/* 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 */
.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%;
}
}
/* ===================================================================================================================================
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 */
.css-1j9xj7u > .css-70qvj9 > .css-dhnoom {
margin-bottom: 10px;
}
/* Modification of rounded corners for AI bubbles */
.css-teti0a,
.css-1ulhpcc,
.css-1tg26k8,
.css-1t9c0mz {
border-radius: 8px 20px 20px 20px;
}
/* Modification of date for AI bubbles */
.css-teti0a > .css-70qvj9 > .css-dhnoom {
margin-bottom: 10px;
margin-left: 30px;
}
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;
}
/* Put Regenerate and Journal buttons inline */
.css-1jby15f {
right: 10px;
transform: translateY(-25%);
}
.css-100dd8p {
gap: 90px !important;
flex-direction: row-reverse !important;
}
/* Background */
if (bgchoice=="heartbg") {
.css-1lbk8wf {
background: url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/heart-pattern.png") bgcolor fixed 100% !important;
}
}
if (bgchoice=="nobg") {
/* No background */
.css-1lbk8wf {
background: var(--chakra-colors-secondaryBlack) !important;
}
}
if (bgchoice=="custombg") {
/* Custom background */
.css-1lbk8wf {
background: url(custombgurl) bgcolor fixed 100% !important;
}
}
if bgcolor {
.css-1lbk8wf {
background-color: bgcolor;
}
}
/* Actions texts */
if (actionsstyle=="actionsdefault") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: rgb(168, 168, 168) !important;
font-style: italic !important;
}
}
if (actionsstyle=="asterisks") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksbold") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalic") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalicsamecolor") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="bold") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalic") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalicsamecolor") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="noitalic") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-style: normal !important;
}
}
if (actionsstyle=="samecolor") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
}
}
if actionscolor {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: actionscolor !important;
}
}
/* Avatar position */
if (avatarposition=="avatarlargemiddle") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 8vh;
}
}
}
if (avatarposition=="avatarlargetop") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 4vh;
}
}
}
if (avatarposition=="avatarlargebottom") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 18vh;
}
}
}
if (avatarposition=="avatarsmallmiddle") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 16vh;
}
}
}
if (avatarposition=="avatarsmalltop") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 4vh;
}
}
}
if (avatarposition=="avatarsmallbottom") {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
top: 28vh;
}
}
}
if avatarcustomposition {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
position: absolute;
margin-top: avatarcustompositionvalue;
}
}
}
/* Avatar size */
if (avatarsize=="avatarlarge") {
@media screen and (min-width: 900px) {
/* Bigger avatar */
.css-oies6c,
.css-13tht1l,
.css-g2goff {
border-radius: 20px;
height: 512px;
left: 0.6%;
max-width: 512px;
padding: 0;
transition: 0.3s linear;
width: 512px;
}
/* Put chat and textarea more on right*/
.css-1lbk8wf {
bottom: 20px;
padding-left: 545px;
padding-right: 10px;
width: 100vw;
}
}
}
if gradientregenerate {
/* Regenerate icon */
.css-1wmt28i [alt="regenerate"] {
display: none;
}
.css-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: -3em !important;
z-index: 1;
}
.css-8lxt4j svg {
height: 36px;
width: 36px;
}
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 {
bottom: 20px;
padding-left: 350px;
padding-right: 10px;
width: 100vw;
}
}
}
if avatarcustomsize {
@media screen and (min-width: 900px) {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
border-radius: 20px;
height: avatarcustomsizevalue;
left: 0.6%;
max-width: avatarcustomsizevalue;
padding: 0;
transition: 0.3s linear;
width: avatarcustomsizevalue;
}
/* Put chat and textarea more on right*/
.css-1lbk8wf {
bottom: 20px;
padding-left: 30px + avatarcustomsizevalue;
padding-right: 10px;
width: 100vw;
}
}
}
if (avatarsize=="avatarhidden") {
.css-oies6c,
.css-13tht1l,
.css-g2goff {
display: none;
height: 0;
width: 0;
}
.css-1lbk8wf {
bottom: 20px;
padding-left: 25px;
right: 10px;
width: 100vw;
}
}
/* 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: 0;
width: 50px;
}
.css-teti0a {
margin-left: 90px;
}
.css-127w3cl {
transform: translateY(60%);
}
}
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: 0;
width: 50px;
}
.css-1j9xj7u {
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;
}
}
}
/* System bubbles style */
if (systembubblesstyle=="systembubblesleft") {
.css-1y2ps2x {
display: none;
}
.css-do4s31 {
background-color: transparent;
border: none;
bottom: 0;
color: var(--chakra-colors-secondaryWhite);
display: grid;
font-size: fontsize;
row-gap: 10px;
grid-template-columns: 1fr 1fr;
--menu-shadow: transparent;
left: 0;
max-width: 512px;
opacity: 1 !important;
position: fixed;
visibility: visible !important;
z-index: unset !important;
}
.css-do4s31 button {
justify-self: center;
width: fit-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;
}
.css-94x4at {
background-color: transparent;
}
.css-1lbk8wf {
padding-bottom: 72px;
}
.css-b9bzmp {
background-color: var(--chakra-colors-secondaryBlack);
bottom: 3px;
display: flex;
flex-direction: column;
padding: 5px 0 10px 0;
position: fixed;
right: 10px;
width: 71.3%;
}
.css-94x4at {
display: flex;
justify-content: center;
}
.chakra-menu__menuitem.css-94x4at:nth-child(1) {
order: 3;
}
.chakra-menu__menuitem.css-94x4at:nth-child(2) {
order: 1;
}
.chakra-menu__menuitem.css-94x4at:nth-child(3) {
order: 2;
}
.chakra-menu__menuitem.css-94x4at:nth-child(4) {
justify-content: start;
max-width: 94%;
order: 4;
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-1lbk8wf {
padding-bottom: 72px;
}
.css-b9bzmp {
background-color: var(--chakra-colors-secondaryBlack);
bottom: 3px;
display: flex;
flex-direction: column;
padding: 5px 0 10px 20px;
position: fixed;
right: 10px;
width: 100%;
}
.css-1y2ps2x {
color: var(--chakra-colors-secondaryWhite);
margin-left: 50px;
}
.css-do4s31 {
display: grid;
}
.css-do4s31 button:hover {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background-clip: text;
color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.chakra-menu__menuitem.css-94x4at:nth-child(1) {
order: 3;
}
.chakra-menu__menuitem.css-94x4at:nth-child(2) {
order: 1;
}
.chakra-menu__menuitem.css-94x4at:nth-child(3) {
order: 2;
}
.chakra-menu__menuitem.css-94x4at:nth-child(4) {
order: 4;
}
}
if blurcontent {
.css-1hmzamm,
.css-gnnge1,
.css-isgfme,
.css-v3ipd1 > .css-0 > p,
.css-ip0f2e > .css-0 > p {
filter: blur(8px);
-moz-filter: blur(8px);
-webkit-filter: blur(8px);
}
}
if hidenames {
/* Hide names in bubbles to save place */
.css-ppua9z,
.css-19hb772 {
display: none;
}
.css-127w3cl {
margin-left: 0;
}
/* Initial letter */
.css-70qvj9 {
height: 0;
}
.css-70qvj9 > .css-127w3cl {
height: 40px;
margin-left: -70px;
width: 40px;
}
.css-yhhl9h {
margin-left: 45px;
}
.css-qfa1mb {
display: none;
}
}
/* Buttons hover */
if iconshover {
img:not(.css-cq95zi,.css-15h0znb):hover,
.css-100dd8p > .css-1wmt28i:nth-child(1):hover,
svg:not(.css-onkibi):hover {
border-radius: 20px;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px, rgba(254, 133, 133, 0.4) 5px 5px 5px 5px, rgba(254, 133, 133, 0.4) 5px -5px 5px 5px, rgba(139, 110, 255, 0.4) -5px 5px 5px 5px;
box-sizing: border-box;
}
}
/* 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;
}
/* Modal's close button */
.css-g7rsv1 svg,
.css-1k7lgzp svg {
height: 20px;
margin: 20px 20px 0 0;
width: 20px;
}
}
@-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 {
margin-bottom: 100px;
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 */
.css-1j9xj7u > .css-70qvj9 > .css-dhnoom {
margin-bottom: 10px;
}
/* Modification of rounded corners for AI bubbles */
.css-teti0a,
.css-1ulhpcc,
.css-1tg26k8,
.css-1t9c0mz {
border-radius: 8px 20px 20px 20px;
}
/* Modification of date for AI bubbles */
.css-teti0a > .css-70qvj9 > .css-dhnoom {
margin-bottom: 10px;
margin-left: 40px;
}
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;
}
/* Put Regenerate and Journal buttons inline */
.css-1jby15f {
right: 10px;
transform: translateY(-25%);
}
.css-100dd8p {
gap: 90px !important;
flex-direction: row-reverse !important;
}
/* Background */
if (bgchoice=="heartbg") {
.css-1lbk8wf {
background: url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/heart-pattern.png") bgcolor fixed 100% !important;
}
}
if (bgchoice=="nobg") {
/* No background */
.css-1lbk8wf {
background: var(--chakra-colors-secondaryBlack) !important;
}
}
if (bgchoice=="custombg") {
/* Custom background */
.css-1lbk8wf {
background: url(custombgurl) bgcolor fixed 100% !important;
}
}
if bgcolor {
.css-1lbk8wf {
background-color: bgcolor;
}
}
/* Actions texts */
if (actionsstyle=="actionsdefault") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: rgb(168, 168, 168) !important;
font-style: italic !important;
}
}
if (actionsstyle=="asterisks") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksbold") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalic") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalicsamecolor") {
p.css-6obdga > span:before,
p.css-6obdga > span:after,
p.css-1gi22a8 > span:before,
p.css-1gi22a8 > span:after {
content: "*" !important;
}
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="bold") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalic") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalicsamecolor") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="noitalic") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
font-style: normal !important;
}
}
if (actionsstyle=="samecolor") {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: var(--chakra-colors-secondaryWhite) !important;
}
}
if actionscolor {
p.css-6obdga > span,
p.css-1gi22a8 > span {
color: actionscolor !important;
}
}
if gradientregenerate {
/* Regenerate icon */
.css-1wmt28i [alt="regenerate"] {
display: none;
}
.css-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%;
}
}
/* No avatar */
.css-1gei8v4 {
width: 100vw;
}
.css-1lbk8wf {
bottom: 20px;
padding-right: 10px;
width: 100vw;
}
.css-yhhl9h {
margin-left: 10px !important;
}
/* Modofication of Continue conversation button */
.css-snc6k5,
.css-1huuq74,
.css-wgxnqr {
color: var(--chakra-colors-secondaryWhite);
font-size: 17px;
}
.css-snc6k5:hover,
.css-1huuq74:hover,
.css-wgxnqr:hover {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background-clip: text;
color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* System bubbles style */
.css-do4s31,
.css-94x4at{
background-color: #161616;
border-color: #6C6C6C;
color: var(--chakra-colors-secondaryWhite);
}
.css-100dd8p {
gap: 50px !important;
flex-direction: row-reverse !important;
}
.css-1lbk8wf {
margin-bottom: 72px;
}
.css-b9bzmp {
background-color: var(--chakra-colors-secondaryBlack);
bottom: 20px;
position: absolute;
right: 10px;
width: calc(100% - 20px);
}
.css-1y2ps2x {
color: var(--chakra-colors-secondaryWhite);
margin-left: 50px;
}
if blurcontent {
.css-1hmzamm,
.css-gnnge1,
.css-reootw,
.css-v3ipd1 > .css-0 > p,
.css-ip0f2e > .css-0 > p {
filter: blur(8px);
-moz-filter: blur(8px);
-webkit-filter: blur(8px);
}
}
if hidenames {
/* Hide names in bubbles to save place */
.css-ppua9z,
.css-19hb772 {
display: none;
}
.css-127w3cl {
margin-left: 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;
}
}
/* Buttons hover */
if iconshover {
img:not(.css-cq95zi,.css-15h0znb):hover,
.css-100dd8p > .css-1wmt28i:nth-child(1):hover,
svg:not(.css-onkibi):hover {
border-radius: 20px;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px, rgba(254, 133, 133, 0.4) 5px 5px 5px 5px, rgba(254, 133, 133, 0.4) 5px -5px 5px 5px, rgba(139, 110, 255, 0.4) -5px 5px 5px 5px;
box-sizing: border-box;
}
}
/* Modal's close button */
.css-g7rsv1 svg,
.css-1k7lgzp svg {
height: 20px;
margin: 20px 20px 0 0;
width: 20px;
}
}
@-moz-document url("https://kindroid.ai/selfies") {
/* ===================================================================================================================================
Selfies page
=================================================================================================================================== */
/* Wide selfie page */
.css-1ivym2n,
.css-10ytma2 {
max-width: 100%;
}
.css-fskrnz {
width: 84vh;
}
/* Gallery */
if (bgchoice=="heartbg") {
.css-ezgmhy {
background: url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/heart-pattern.png") bgcolor fixed 100% !important;
gap: 20px;
justify-content: center;
z-index: 9999 !important;
}
}
if (bgchoice=="nobg") {
/* No background */
.css-ezgmhy {
background: var(--chakra-colors-secondaryBlack) !important;
gap: 20px;
justify-content: center;
z-index: 9999 !important;
}
}
if (bgchoice=="custombg") {
/* Custom background */
.css-ezgmhy {
background: url(custombgurl) bgcolor fixed 100% !important;
gap: 20px;
justify-content: center;
z-index: 9999 !important;
}
}
if bgcolor {
.css-ezgmhy {
background-color: bgcolor;
gap: 20px;
justify-content: center;
z-index: 9999 !important;
}
}
.css-3vu8ng,
.css-kuf6b {
height: auto;
width: 290px;
}
/* Kin's name */
.css-6gs9hh {
text-align: center;
top: 0;
position: absolute;
width: 100%;
}
.css-1h018x8 {
color: var(--chakra-colors-secondaryWhite);
}
.css-1z0jlm7 {
color: var(--chakra-colors-secondaryWhite);
font-size: 18px;
padding-top: 5px;
text-align: center;
}
/* Selfies tokens */
.css-18467a {
position: absolute;
right: 32px;
top: 0;
}
/* Tags */
.css-2q07gq {
z-index: 9999;
}
.css-ewo462,
.css-1fm8jup > * {
justify-content: end;
padding-right: 32px;
}
/* Put Request image button at the top */
if requestimage {
@media screen and (min-width: 900px) {
.css-65tag0 {
left: -41%;
margin-bottom: 37.5%;
position: absolute;
}
}
@media screen and (height: 1080px) {
.css-65tag0 {
left: -41%;
margin-bottom: 46%;
position: absolute;
}
}
@media screen and (height: 1300px) {
.css-65tag0 {
left: -41%;
margin-bottom: 50%;
position: absolute;
}
}
@media screen and (min-height: 1760px) {
.css-65tag0 {
left: -41%;
margin-bottom: 37.5%;
position: absolute;
}
}
}
/* Request selfie */
.css-105olw3 {
width: 96%;
}
.css-1jva3og {
font-size: 18px;
}
/* Request selfie avatar settingd */
.css-1o815t8 {
max-width: 90%;
}
.css-de3hrx {
height: 512px !important;
width: 512px !important;
}
.css-79elbk {
margin-left: 90% !important;
height: 512px !important;
width: 512px !important;
}
.css-dfpqc0 {
margin-left: 70% !important;
height: 512px !important;
width: 512px !important;
}
.css-79elbk > img:hover,
.css-dfpqc0 > img:hover {
height: 512px !important;
width: 512px !important;
}
.css-1jcj2pk {
color: white;
}
/* Load More button */
.css-1m67823 {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -webkit-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
border-radius: 56px;
color: var(--chakra-colors-pureWhite);
font-size: 18px;
height: fit-content;
padding-bottom: var(--chakra-space-2);
padding-top: var(--chakra-space-2);
width: 120px;
}
.css-1m67823:hover {
text-decoration: none;
}
/* Image border on hover */
if imageborder {
.css-1vuqv5m,
.css-1regj17 {
border-radius: 16px;
}
.css-1vuqv5m > .css-1regj17:hover {
height: 100%;
width: 100%;
}
.css-1regj17:hover {
transition: 0.2s linear;
}
.css-1regj17:hover {
border-radius: 16px;
height: 300px;
width: 300px;
}
.css-3vu8ng:hover {
border-radius: 16px;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px, rgba(254, 133, 133, 0.4) 5px 5px 5px 5px, rgba(254, 133, 133, 0.4) 5px -5px 5px 5px, rgba(139, 110, 255, 0.4) -5px 5px 5px 5px;
transition: 0.2s linear;
}
}
/* Put delete image button in red */
.css-chdrwy > .css-1icfsi7 > .css-r6z5ec > .css-do4s31,
.css-chdrwy > .css-1icfsi7 > .css-r6z5ec > .css-do4s31 > .css-94x4at {
background: var(--chakra-colors-secondaryBlack);
}
.css-chdrwy > .css-1icfsi7 > .css-r6z5ec > .css-do4s31 > .css-94x4at > .css-nvswzl {
color: var(--chakra-colors-red);
}
/* Blur content */
if blurcontent {
.css-1regj17,
.css-pyo214 {
filter: blur(50px);
-moz-filter: blur(50px);
-webkit-filter: blur(50px);
}
}
/* Selfie modal */
.css-fskrnz {
height: 809px;
width: 80vw;
}
.css-vwi0gr {
height: 773px;
left: 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") {
/* ===================================================================================================================================
Voicecall page
=================================================================================================================================== */
/* Bigger text */
.css-7wdzg1,
.css-14mmx5r,
.css-1vqt2yh {
font-size: 18px;
}
/* Avatar choice */
if avatarchoice {
.css-j9wpg1 {
height: 0;
}
.css-1a84nil {
background: url(avatarchoiceurl) border-box;
background-size: cover;
border-color: rgb(40, 40, 40);
border-radius: 50%;
border-style: solid;
height: 380px;
width: 380px;
}
}
}
@-moz-document url("https://kindroid.ai/faqs") {
/* FAQs page */
.css-1udr2et {
max-width: 100% !important;
}
.css-51kqi6 {
text-align: center;
}
/* Background */
if (bgchoice=="heartbg") {
.css-1e3klk3 {
background: url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/heart-pattern.png") bgcolor fixed 100% !important;
}
}
if (bgchoice=="nobg") {
/* No background */
.css-1e3klk3 {
background: var(--chakra-colors-secondaryBlack) !important;
}
}
if (bgchoice=="custombg") {
/* Custom background */
.css-1e3klk3 {
background: url(custombgurl) bgcolor fixed 100% !important;
}
}
if bgcolor {
.css-1e3klk3 {
background-color: bgcolor;
}
}
}
@-moz-document url("https://kindroid.ai/legal") {
/* Terms & Privacy page */
.css-1pgxq2r {
max-width: 100% !important;
}
.css-1pgxq2r > h1 {
font-size: 42px;
font-weight: bold;
line-height: 48px;
}
}
@-moz-document url("https://www.feedough.com/stable-diffusion-prompt-generator/") {
/* Hide scrollbars */
:root ::-webkit-scrollbar {
overflow: hidden !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
-moz-overflow-style: none !important;
-webkit-overflow-style: none !important;
width: 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;
}
}