/* ==UserStyle==
@name Kindroid responsive + customizations v4.xx
@description Kindroid website is more suitable for wide screens + add customizations (theme) + add new features (scripts).
@version 4.0.6
@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 text separator1 "🌐 WHOLE WEBSITE 🌐" "_"
@var checkbox avatarcircle "Avatar circle" 0
@var checkbox avatarhoverzoom "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 text fontsize "Font size" 1.2rem
@var checkbox hidediscord "Hide new discord banner" 0
@var checkbox hidescrollbars "Hide scrollbars" 1
@var checkbox hidetrialbar "Hide trial bar" 1
@var text separator2 "💬 CHAT PAGE 💬" "_"
@var checkbox avataronrightside "Avatar on right side" 0
@var text avatarposition "Avatar position" 0px
@var text avatarsize "Avatar size (set 0 to hide it)" 512px
@var checkbox hidesharring "Hide sharring" 0
@var checkbox kmenuicon "K menu icon" 1
@var text separator3 "💬 GROUPCHAT PAGE 💬" "_"
@var checkbox continueconvauto "Continue conversation automatic" 1
@var checkbox continueconvmanual "Continue conversation manual" 0
@var checkbox continueconvmanualcenter "Continue conversation manual center" 0
@var text separator4 "💬 CHAT & GROUPCHAT PAGES 💬" "_"
@var select actionsstyle "Actions texts style" {
"Default": "actionsdefault",
"Asterisks": "asterisks",
"Asterisks + bold": "asterisksbold",
"Asterisks + bold + no italic": "asterisksboldnoitalic",
"Bold": "bold",
"Bold + no italic": "boldnoitalic",
"No italic": "noitalic"
}
@var color actionscolor " ↳ Actions texts color" rgb(136, 136, 136)
@var color actionscolorforus " ↳ Actions texts color for us" rgb(136, 136, 136)
@var checkbox avatarchat "Avatar chat mode (on chat page require: Avatar choice, Avatar choice for us is recommand but not required; on group chat page is same as Avatar choice for us)" 0
@var checkbox avatarchoiceforus "Avatar choice for us" 0
@var text avatarchoiceforusurl " ↳ Avatar choice for us URL" "URL between quotes"
@var text avatarchatgroupsize "Avatar chat/group size" 162px
@var checkbox avatarrectangle "Avatar rectangle" 1
@var checkbox bgshadow "Background shadow" 1
@var color bgshadowcolor "Background shadow color" #101010
@var color bubblesbgcolor "Bubbles background color" rgb(33, 27, 25)
@var text bubblesbgurl "Bubbles background URL" "URL between quotes"
@var color bubblesbgcolorforus "Bubbles background color for us" rgb(27, 28, 30)
@var text bubblesbgurlforus "Bubbles background URL for us" "URL between quotes"
@var color fontcolor "Font color" #cbcbcb
@var color fontcolorforus "Font color for us" #cbcbcb
@var checkbox hidechattingas "Hide chatting as" 0
@var checkbox hidenames "Hide names in bubbles" 1
@var checkbox manuallyedited "Manually edited" 1
@var select systembubblesstyle "System bubbles style" {
"Wide": "systembubbleswide",
"Dark": "systembubblesdark"
}
@var range textareaopacity "Textarea opacity" [1, 0, 1, .1]
@var range textareabgopacity "Textarea background opacity" [1, 0, 1, .1]
@var text separator5 "💬 CHAT & CALL PAGES 💬" "_"
@var checkbox avatarchoice "Avatar choice" 0
@var text avatarchoiceurl " ↳ Avatar choice URL" "URL between quotes"
@var text separator6 "📷 SELFIE PAGE 📷" "_"
@var checkbox imageborder "Image border on hover" 1
@var checkbox requestselfie "Request selfie button at top" 1
@var text separator7 "📞 CALL PAGE 📞" "_"
@var checkbox biggerscreensharing "Bigger Screen Sharing" 0
@var checkbox screensharezoom " ↳ Bigger Screen Sharing zoomed" 0
==/UserStyle== */
@-moz-document domain("kindroid.ai") {
/* ===================================
Whole kindroid domain
=================================== */
/* Versions */
:root {
--themeversionpc: 'TPC v4.0.6';
--themeversionmobile: 'TM v1.0.7';
--customavatarsgroupchat: 'CAG v1.0.1';
--chatversionpc: 'CPC v2.0.16';
--chatversionmobile: 'CM v2.0.16';
--selfiesversionpc: 'SPC v2.0.1';
--selfiesversionmobile: 'SM v2.0.1';
--notepadversion: 'NP v2.0.4';
--trversion: 'TR v2.0.2';
--tvversion: 'TV v2.0.3';
--author: ' by BreatFR (https://breat.fr)';
--install1: ' usercssjs.breat.fr ';
--install2: ' gitlab.com/breatfr/kindroid ';
--space: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
--support1: ' ko-fi.com/breatfr ';
--support2: ' paypal.me/breat ';
--avatarsize: avatarsize;
--avatarchatgroupsize: avatarchatgroupsize;
--fontsize: fontsize;
}
@media screen and (min-width: 900px) {
.css-x3odei::after,
.css-z0osps::after {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
content: var(--themeversionpc) ' · ' var(--themeversionmobile)' · ' var(--customavatarsgroupchat) ' · ' var(--chatversionpc) ' · ' var(--chatversionmobile) ' · ' var(--selfiesversionpc) ' · ' var(--selfiesversionmobile) ' · ' var(--notepadversion) ' · ' var(--trversion) ' · ' var(--tvversion) var(--author) '\A''Install: ' url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAAK/INwWK6QAAAAlwSFlzAAAOwgAADsIBFShKgAAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAARxSURBVDhPvZR5TJNnGMAfBIUFzLSctqWUlqPcCBlQjhpdkGvNWCY2rQfKBihImMc4VgUhoIM4mG5z7MicCROZbBBxICAUHEeG6IRF2nKUwteDclhbbkq/7gO+ZRoy+W+/5P3n+Z7n9z7fm+d94X/DALDF0PC7v7alJVlVW1sir668qaiqKFf8cufG+G+1l2eaW+PQm02WePrrUd6uYg+WlTUKs8+phfHv6QdimLqhUM/FIZb74lC496IolqV/lnp0pb+0QDhaXs7ByzZi6OnZ+qiwuPhx8lH9ANNxQUUHZMEZBlZ2gkhvASJ0OwhRJxDqyCCaMYEhCflNbRf3gK4vvygWV7xKY3o6vzuGaVC7whjqDv3YEi8zYHiFZCTWO2BSexAvEWEYJWByG2y5Qr+UbKJ9wIsVoFcHTHHNOoLMy9R7rEBE4wZy1AdEiJ+16s9w5mQHlzvax96NoG4gHN1PHG2L440P+Lso9V4gxroVrZBhpJXpMdKUVULDVet8eTg+spNmrUEdYLg9xHPqAfdQzdOkU5zmD1J5ze5UGeoCIx0hNElXYub7dfG87yTMHeN4p5KW3TTJT8nnnXHVOmU8nle1K1VVz3CYv8s5xEcj09Z+ITc0NLbDbrsatYexGh/HHjAYjK6FR+3rtCdMoX4gXvABeSXTtVOQ8rPFmugfsDExqotmp/0aw87GQ2vkOzsX9TuaaGYtYfw6zbFyNZbFYKR07TLTYkLhE5KZ5ovAwItryZthyBWYXCJZNmqdQPXMHKay7IgXIgFM+XZWLZP0LRMaF0CuUym9d48kUfCS15PkyWR8bWOGoCQY7qMTFDnRUcIcdkx3vRdRPesMkm/td4xVRLHfwdM350MqPbHBynQOJYJwwnvrqJxhp5Z5kTQ62rZhhGwuLwgJkOeG7Q3G0zengE69I7cxfq61haEffN2U9TTKOGIHMpSCDbitkXjQ1/ZFiYeH7IJfqD9e8t9c2sN2qmBQEJQM0j8YhIkq9oFT7UeOcW7v3dfZ7USa1lOwOcQGu9/RYqk00KdGgJ03XvoqD9MKras+LY24cSzxVh9jp3re3hi5HxrcZgCD0ep3NPczQg2X+03/W+RxbDPRCg2ktX60sR8T+fQ1wcs0JSVRqnmcnvbDB/VP3g1aWLKEwTEGSXU/k9/bfKU0obeo1HU1byrjKrljD0u0bAVSFDuOR0EMpC670HtN8jIPCwvffuzrMjdnDlI9dq2wWyOeJ8KgOIym7uZEox2pJya6CvLauj6/0vQ0LEC5QoUB7KEY7ePu/6uv8JYtrvkXyfflDlJunFhnY6yYY1EV8pTjz1+wgyb0WBfLAOLpbSCTEm00w57kGS02Nqg5CKeD3WaHMrKu4YqNIB9nn1acOalEzmc0SE6e4Uj5OV+pTiTL5yNY03oXogwlvCFFbUylugCqQpMQPSPL/6RVkXDWAS/fyOpLLT543GfMPYiAh0CSks6S5+UVT/Kz702d/ah16txpgTKHX4PkXMyWhkXswtMwAP4GEl0BMY+jC7gAAAAASUVORK5CYII=") var(--install1) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAUCAYAAACJfM0wAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAvRJREFUOE+dU0lrU1EUfqhbK4rixiHvvptW+gu0TZqkrQWHhVJpKyoI4lRx3ghdOCwFrS24cwCbmKYtVelCqIorf0NBrGkSWqJkWmgb7Hvv+J37brSxg9UPDuGcb8h5Jy/Gn5hsEv3TodrNul0VZgJyC/t0uxjptvpNX1r8xUxENOvRqpAK+Vuz8JUCOzbqUTVSYauTDtZTOmL16dGqkAnLfvalIlaHHlUDgcP2vl2UDlufKRRap8crgnXwJT2fHNLj3yi0ig0gSl9b/FRoraXpsGjU1IpIhUSA9ezLRGRxEjma8pAJySPf2uqYpDl8Yuv7mloR0PWynn3KH5btmvIAYrASnMcGMHwiw1ij6SWB514L3WQO+gXBcU0bxkdD1qSDspBt9lM6JJmkXHMtJRvlbi1ZEskGa08eOtazj/2ZoMxPGHXrlaD8QBy2r0maPSlo9pRXzlmLih1iKhmQH3D7RcXzYqeYYl3Fw37OKfdah1Swk/DFKG6Rc8n06opJ7lWTqBvheMwS194FhZ7nzLOO9RWvyhn2RQ33ubnVjpozNIpvu2eSfQ510SvnsknZ/Ralm3Ae3LBS3GcPIAB8Rat88HPO/IA5bSB01I0hJApiEHVHiyDmbUpdglLB6mDuS0eF4n+Fsg9+znGQh2DfW0oIoiFsjIGqG6jz3sblMya/+FXB/GPxXG0MndJrL+dwnrqxHdvZ5SREnl5JcuIQPEWx6YJnVufgtwWh6tdHr0LB27gv69mn/AmRw7KdKpjhPtthYviGxiTRCLZ/CEM3zgHjwnOoM6DnOfOsYz374B+fQ46OrIYdN3sgcGnMIvsuNoG5fFqfg9/Xyhk4FDzrWI8z9OiI5fFjwAw6Q2KCXktybyMEd+THnwroM6DnOfNKFxMBbf07cn2yxhk2n9BLi+imoGK7oGSDVJ90C4W5MyIeu4/0v+xfYb/wnXCjokD4R6URTNexJXp71DyuJf8P9/026faJ8e/H5LyDT/fddktTy8AwfgLHRHNkJDm7EgAAAABJRU5ErkJggg==") var(--install2) var(--space) ' Support me: ' url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAYAAACaq43EAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAA2FJREFUSEu1lktIVGEYhqfIXW5ctUkDF250q4jLILLUvBSjzjh285pahoxIK3Fop0iRiWbiNRMUzcvIpI1dNkVGYBckIzTRAkVHCbOyt/f7/Y81alOgvvBw5nzf+b/3/Nc5Jq0I4iKPdpg7xEy2VCSZJtglfpBRkkm85CQoKSlBT0/PjtDf34+BgQG0trYiOzsbAQEBxkvcI/uJ0gMCt9uN3dLs7CzMZrNhPkD2ENOgBHp7e/Vj29P4+DhCQ0MRGBiIkJAQZGRkYH5+XuVSUlIM8ywxlkUAp9Opkl76+BlwjwDPXgPLKzpIjfDe+ZAuEzrwWzLEuvgH8kp+ywssLi7C4/EYw/6S/MW43QXEFwFH84BjF4CCq8CT50DZdSDmHGPpwImzwN0u3WBNg4ODhnGhFKdKCex2u8pbrVbJeSSx2XhqhqYXgcRLQPJljhGviTmMZfB6HkjNBixZgPkMYynAu/e6oZexXYprTYSFhal8ZWWl5FYkuNn4xSgQm0nDAsIep+YSGqcyZqG5hT220tR6Gog7AQwN6YZexsVSXOtpUFCQyjc0NEjuuwQfkw09ngZO0SSZvbJsNOMQW9OANCuvqUASjd++0Q29jAukOHWIeKKiolS+rKxMcl8l4Sbo6+tTiXWVcy6Pn6QB51HM0rRZmgWwaeJjAEcpsLqqGwEul8swvkVsZEzuOzo6VD4iIkJyn4jpviRk43tpaQmwF7M4e2QYGaTzBaSn+ZyCuTndYE3Dw8OGscLPzw8Oh0PlxFzHm8jaydXd3a2SXlrg/isqBBLi1swM46R4IJfTMMMp2aDl5WXU1NSgoqICTU1NmJqaUnGZAn9/fzH9QoLFuEuMOzs71QObJJtfzONjdU9pmsN5n95supXGxsaQn59v9PQbiSVKbQTt7e360S3EjY8rJcCRw0Aeh9eH6eTkJKKjoxEZGYng4GDDUBghUWRdt4k60H2KQ4iaag4v97gPyVqRemSByAnVSJLIXuKlawSNjY266fYk8yv1SLoU96UEog7w7WqV2yo8PFxMf5KDUvxfUn+NNpsNzc3NaGtrU9eWlpZ15F5OHaG+vh51dXWora1FdXU1qqqqUF5eDjkkpA65IUX/RweIfPrIUl/1gXxN/IkcfYKsVmGO3CT7iA+ZTL8ANy582NV4RdEAAAAASUVORK5CYII=") var(--support1) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAUCAYAAABroNZJAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAslJREFUOE+Nk0tIVFEYx6WNEC1attA7znXmnHNvpjH3js7GRQ+dKDKTMgx6UOnMvaNZaRAoGD0WRTQPH6Nii6CgRa1yUUGEjo+0mTSkB7UIF0G0aFlUxNd37jmOjo7QH/6cgXu+3/leU7BSxLSvaVXnvhDTWmNqRhap2TqmVbZf1PXDm2RIrjyetkJiWJ9Z5Vmgpr2+/ZFfeOcd8YUaZeiyvKalUtP6y/yt+YNXGLNFnwfiC++U4UII2a1Vta8KiKxjG/RAB2D5T2S4ENZt8w85EMMCYoTXmKJ5NtQXfiPDhZCayEL8EbwcghLWAC5av8Yl9CCoWiOUVoU+GGnYKBEO5KmOdXII74t3+ylQvPvBReryurhoF3iabgAdmX8mET0bsJxPmpwMh3jKj0vIgbxWlCB4O+4BG54DB6H77S1Y/4+lyfBTLTu6DqQelOIacFdjb/qmgcYnBYT5wgGxH6LzvCduvRFcqyHeOlCKasClHwJy5THQgRmgsZSAYD+O6YELAsCNUylx73NeVJRaPLkxWN0L7h2tQK6OAku+QsAEkFjqj4AY1vXl8eJkfCFQgx2g1neDWtcFakMPlJ6MgrfrIdB+fJ07Og7a0ByQ6PiChNiPsplUNAMNdgMdSgMbygAb5Kf47aQfn3AArO8lbL3zFlgi1eBAqGG/zm7rttNAj9wCOjjr1Ltk1jcDrH8WtGTGCdaSaSC3xy45AN1oUbCcr8zfJiBlCGkZzoGwxBS+nvqGk1ikiekMwgZIbNLvALiYYTdhJj+zkyk/A7TzQbbz/GUSTaVd0RebPfGPhTIsV7hk90VD0TgVx5dHxQ4gRB9Z4Fn0y+v5heP9Lv7aaLMNWHUn0JvPgSYmlyGxVLu8nl/MZxnMiNTgWcsqmmvJid4I6+WbiFPg5fAxxsf3yOv/J3r3fVAfnncAvKG4TL898YlS+TmPCgr+AaBy8VrppmCMAAAAAElFTkSuQmCC") var(--support2);
display: inline-block;
font-family: var(--chakra-fonts-PoppinsRegular);
font-size: 1.2rem;
left: 0;
pointer-events: none;
position: absolute;
text-align: center;
top: 0;
width: 100%;
white-space: pre-line;
}
}
/* ===== Wide mode ===== */
body {
box-sizing: border-box;
max-height: 100vh;
max-width: 100vw;
overflow-y: hidden !important;
position: relative;
}
/* New discord */
body::before {
background: var(--chakra-colors-primaryBlack);
border-radius: 1em;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
rgba(139, 110, 255, 0.4) -5px 5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px -5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px 5px 5px 5px;
color: var(--chakra-colors-primaryWhite);
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAC9FBMVEVHcEznRET3PkT+PED3KCz9Fhj4TFD+Cw/oSkz0TlL/BwnwQEX/BgnqTlL9Nzz8ISfrTFD/Mjj5T1T7SUz+Vlz2HiHeSkzeSEn6VFn+b3TiPz/7VFn/dHroUVXYb3PcQ0PFWV+yRUn4i4/hQEHTdXqGMji6YmbyYma1Oj33TE72n6T9pqrfVljiPj+2c3aaWVzyVFjGVVn2UVPfPD5fKCubYGJ7PUHCTVHecXTztbe9fH7RT1LtTlFlNTfLgobjSErqPD7xVVfCmJpBFxlLHR+NXl91TE7kVVj+X2LRp6n0xsaifH14REd1KCvmam6kQES5jY3jvr1JIyPoc3bMXmKha23oio7YtreIUlbDmZr+CQCtU1Xdo6b+DgD+IwD+EQD+FgD+CQD+GgD+MQD+KQD+LAD+JgD+RAD+PAD+TQD+OAD+NAD+AgD+UQBrPD3ux8Y2EQ7+HQD+QAD+SQD4BAD+BgD8MgD7EQD3JADJbG+xaW/4GQL3NQCVZ2jzDgDyKwLzQgDuSQjxFwDok5buPgDuCQDvIgHxHgLrBADqNwJFIiLvLR7wRxzqFAPpLgHwz8/ab3PoHQHJFwOmX2ThCgLzPS7iNgbiFgLfKAPZEwPYBwHnJhXpXDmaWFvQNSfXNQfZGhTOMgXEOSHTJAXoSzfODAG2hYPKFAR2RUW7FQbIMRvKRyTLHQiqe3vmq6+TfYDsfGjdaE2XJw/XRyfKKBTxpqM+KSpWJSKrKBvt0tHBFQvuvLnJLifINi7nlI1yQUB6T0/YUknxrqiuZF7ft7XOQjq1RDnKTkCoEQdFEA5uNzemdHKVZmS+Khagf37UaF+2lpaZTkCOXljnraCBPi+dFw2DS0PLXlHlt7BLIiB8IRqtMyttJyS5bWSrUEnUdnGIMCvOc2XaloelXlkxDwxYMzRxDgfYpJ3YraeLQjycMyFXFBCbPjrqy8bJqKd5GxW1gX/RgnTMk43Qjofcn5jDnZvRmpfkv7mXJyHDeHHUhn18Fg2MuemHAAAA8XRSTlMAAQMGCQwNEBQYGB0eIiUtLTQ0Oz4+P0lJS1BRUlRaX2BhYm5uc3R1dXZ6gICChoaHjZGUlJiYmJmcnJ6ioqmsra6urq60trm5usDCwsPHycnLzc3Oz9DS0tTX2NjZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dra2tra2tvb29vc3Nzd3d3d3t7e39/f4ODg4ODh4eHh4uLi4+Pj5OTl5ubm5ufo6Ojo6enq6+zs7Ozs7e3t7e7u7u7v7+/x8fPz8/Pz8/T09PT19fX19vb29vb39/f4+Pj4+Pj5+vr6+vr6+/v7+/z8/Pz8/P39/f39/f7+/v7+VELJqgAABj9JREFUeNqVlltsHFcZx79zzszO7nrtvXlry7fYceKEOAGnVakVpRKCIohVwUMlQtuoKqYgNQEqqGgQFRFyJGjykAcaHniggESbVKAIVNoX4jZKolKaurFN6qb1/bLr9Xpndm47tzPnHB7cJLuJLcQ8jY7OT//5/t93/nMk+L8fadNVDAgBAgABQgjxvxCMMCYyJjIBAEYp41RwvjWCsESUhmRT+qt7NhamFqYraxWfcrY5ggiJZlu+eAJgvUNLAgDEPienHBh5f8GgjG+CECnavus1YGrBcW9QAOAAWOadbc875Z9OeZTfjSBJue8Lzw/c1Eq8GvhgAIAkCxRR9LlktvPC0SvWZ8xtBMvRPW/KK5cMu2paTsykGITcWE3YRGlMJtTs+acumhveSbeJ+ODr+fyaVTQNLIBRRLDvUaBhxK6gbCVd/ZV5ZcMD6Vbh0cG/fbBaLpbsLIpAhFIWCXjSinDwW0u4rO4Afu7+fC1ClAfOXlktzLkQx0kHLEpElSMH8SiwMqCM/6kfn+ouUX4bQaT1lL686MQRQlwD4iVwUlOSZlxzI4JnNUeOLab2HJt076hgZVfqan4OGkTgRbq37WZtf15REkHbIzA95QkHefFQlKa+FDfYHZXUr+fNGTnOjZ6B1ujSGy0NXXlehf7Scue3b1yJ81AnWWFrkRqTSartvZIS8e2v7xEXPqw68S9LmXKC7P/5bPzhx5z/RAIc6pBux7V9UbhGG/SOx+hLRdVweKvkEAQ4vTCDVXR4MkA8A1qM3dV9h5YHDo1eWFKrFJRYvBJykWOGE7K3jvSNY+GyjKwGNa0UgePq+Gujf1jRAwAktVRZSfIT77gCXHWyAad94aOGSa8GYdp7T7/TVf79nLnh324LhUz0/MMVALB9vEWT4q44NOzxGsR4+Yf9a6cWzA3/5EPzPs5A+1zAAUuZAIhkiB4zX6sCzszppLFofjZvTTv/yZAGbSUKiOSyPgjZRN/8zSqtLT9U/Uhg81ujsC0op/UdockAKx2FYC1j8AHp31VW51io3zn8Su5TDQzo/qDKgKSPf+wBYHj8pUVny4RByvE8UNrae9pFktLbOQkC5O9alw22JYKbtv+VCSh2UaUR5/54Q1sH/6GOw0velqGESBfViwxlnWdvAOwNFy0Oe79ybMEUW+dYbN+S4Bmrwzr4MAi4Hmr4wMCxm2q4dfSR5OMziNncH5/1sVx1V0PY1g4qx3wrBJFs51UbCbZUznEA5hegs+yfPnrdDvkWCFa6KrAiOBpaGKOKIMCRr091/O6Fq3rIN0dI+nuTVYj6Qw+0Do39PZqkEqyCpHed+cklm4rNEERyvaM+Enz/C2r2mZG3rsWkSqQoUq50+jsfMrYZQmKDWuBgfkCfMBIjbc9849WPZIQ0VUxHzx/Mc7GZSvLItKZi0nNmtRJRiyNHDjS/K7Mg9gl4T+8sh/ciiMR2fH4MRf3erk8c7nmm9tvtP4hO2BhiZuyj4XGX18c4xlgmzS9edk2v6f5zpQAAvMBxz54ollmYWkWTQ6lKXS0ExzK5VOqJ3lHfJrub37QYAAC3FuD8o1MktLLCI1FciyCcfvDkLkDsbVdzpaHrHCmccwHg5t9+tm8Gu66Uvqv7SH7wZWOy6qnuahnvNHpf+cVyxaSMCUErC8kQRZoq3LwLiQ5fC6vccMIiFmKiZ+AvYvqXpZLt80hL9wSKYZBJ3uH1vyS/+Zq5DmEuEvD5WFCQ9iZf82DplBs7vuK3Mt1puG/Zreu+YG88WVlXcNp1E0Fj3m7PXW5qTMf7zyDwx70yCHD6ztarcKr3XsrYoZro7/uXLTcszrYq8UzDFG4EwzCSOvD+ffN+/YfRuXT3zYCzgUfffW50vJCga0xqFmkCwJc55XLn4aNLfv0kU+1Hr5ybbf7W0vfNV3/cNrZmRzEvSio0r5OoC5G2/fkJoz6UgFtjwyOD8p8uLriNLz4ySD6eL4DMORRJ6ARdOx6a/tnKPaHklcaeU/zCmhbqlnb14OA+LV/wAQCUtvbe4snZ5Vt5UTOWdmhHPdvlEKxbpcLF5uG+PsUCaPTBOrm2olrs3rMvXA/xW29GU+OJRFSRAajv2bpleptfe+7cvITnaUVFjgIA0ND1g5pd/wUZKlu0oFBDYQAAAABJRU5ErkJggg==")'\A ⚠️New link to get help and comments:⚠️\A - https://discord.gg/fSgDHmekfG\A\A This message will stay here, but you can show/hide it in theme settings.\A Sorry for the inconvenience. 🙏\A\A If you want change avatars in groupchat page, you need use and modify the CAG (Custom Avatars in Groupchat) addon:\A - https://go.breat.fr/kindroidgroupavatars\A \A If you want see my work for other websites:\A - https://usercssjs.breat.fr\A\A If you like my work, feel free to help me with a donation:\A - https://ko-fi.com/breatfr\A - https://paypal.me/breat';
display: block;
font-family: var(--chakra-fonts-PoppinsRegular);
font-size: 1.75rem;
left: 50%;
max-height: 85vh;
overflow-y: auto;
padding: 1em;
position: fixed;
text-align: center;
top: 50%;
transform: translate(-50%, -50%);
white-space: pre-line;
width: 75vw;
z-index: 9999;
}
if hidediscord {
body::before {
display: none;
}
}
/* Header background color */
.css-x3odei,
.css-z0osps {
background-color: var(--chakra-colors-secondaryBlack) !important;
max-width: 100%;
padding: 0 !important;
}
/* Fix settings word position and style in menu */
.css-ji0zhw .css-1mwto65 {
color: var(--chakra-colors-primaryWhite);
font-family: var(--chakra-fonts-PoppinsBold);
font-size: 36px !important;
left: 4%;
line-height: 54px;
position: fixed;
top: .2em;
}
.css-1b1fzbz .css-1mwto65 {
display: none;
}
/* Put icons in header clickable again */
.css-x3odei > div:nth-of-type(1),
.css-z0osps > div:nth-of-type(1) {
z-index: 1;
}
/* Bigger text */
.css-2aa4oa,
.css-dhnoom,
.css-1dhayxc *,
.css-yhhl9h *,
textarea {
font-size: fontsize !important;
line-height: 1.5 !important;
}
textarea::placeholder {
font-size: fontsize !important;
line-height: 1.5 !important;
}
/* Hide scrollbars */
if hidescrollbars {
*,
:root ::-webkit-scrollbar {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
-moz-overflow-style: none !important;
-webkit-overflow-style: none !important;
}
::-webkit-scrollbar {
display: none;
width: 0;
}
}
/* Loading bar */
#nprogress .bar {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
}
/* Actions texts */
if (actionsstyle=="actionsdefault") || actionscolor {
.css-1dhayxc span {
color: actionscolorforus !important;
}
.css-yhhl9h span {
color: actionscolor !important;
}
}
if (actionsstyle=="asterisks") {
.css-1dhayxc span:before,
.css-1dhayxc span:after,
.css-yhhl9h span:before,
.css-yhhl9h span:after {
content: "*" !important;
}
}
if (actionsstyle=="asterisksbold") {
.css-1dhayxc span:before,
.css-1dhayxc span:after,
.css-yhhl9h span:before,
.css-yhhl9h span:after {
content: "*" !important;
}
.css-1dhayxc span,
.css-yhhl9h span {
font-weight: bold !important;
}
}
if (actionsstyle=="asterisksboldnoitalic") {
.css-1dhayxc span:before,
.css-1dhayxc span:after,
.css-yhhl9h span:before,
.css-yhhl9h span:after {
content: "*" !important;
}
.css-1dhayxc span,
.css-yhhl9h span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="bold") {
.css-1dhayxc span,
.css-yhhl9h span {
font-weight: bold !important;
}
}
if (actionsstyle=="boldnoitalic") {
.css-1dhayxc span,
.css-yhhl9h span {
font-style: normal !important;
font-weight: bold !important;
}
}
if (actionsstyle=="noitalic") {
.css-1dhayxc span,
.css-yhhl9h span {
font-style: normal !important;
}
}
/* Arrow back in header */
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(1) img,
.css-z0osps > div > div:hover img {
height: 60px;
width: 60px;
}
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(1):hover img,
.css-z0osps > div > div:hover img {
display: none;
}
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(1):hover,
.css-z0osps > div > div:hover {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 44 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5 13L9.70711 21.7929C9.31658 22.1834 9.31658 22.8166 9.70711 23.2071L18.5 32' stroke='url(%23A)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 22.5H34' stroke='url(%23A)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
height: 60px;
width: 60px;
}
/* Blur content */
if blurcontent {
/* email in menu */
.css-e43fvd > p,
/* Bubbles content */
.css-1dhayxc .css-j7qwjs,
.css-yhhl9h .css-j7qwjs,
/* Voicecall captions */
.css-1md15gg > div > p {
position: relative;
visibility: hidden;
}
.css-e43fvd > p::before,
.css-1dhayxc .css-j7qwjs::before,
.css-yhhl9h .css-j7qwjs::before,
.css-1md15gg > div > p::before {
color: #cbcbcb;
content: "Hidden Text";
font-family: var(--chakra-fonts-PoppinsRegular);
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
visibility: visible;
white-space: nowrap;
}
.css-e43fvd > p::before {
font-size: 1.3em;
}
.css-1dhayxc .css-j7qwjs::before,
.css-yhhl9h .css-j7qwjs::before,
.css-1md15gg > div > p::before {
font-size: 2em;
}
/* Bubbles content */
.css-1dhayxc .css-j7qwjs::before,
.css-yhhl9h .css-j7qwjs::before,
/* Voicecall captions */
.css-1md15gg > div > p::before {
font-size: 2em;
}
/* Images uploading and Images uploaded */
.css-2jbc1u img,
.css-1dhayxc img:not([src*="/_next/static/media/editIcon"]) {
background: url("https://placehold.co/220x220?text=Hidden+image") no-repeat;
height: 0;
padding-left: 220px;
padding-top: 220px;
width: 0;
}
}
/* Hide trial bar */
if hidetrialbar {
.css-r1nv3m {
display: none;
}
}
/* Hide chatting as */
if hidechattingas {
.css-b9bzmp .css-ev1i1k {
display: none;
}
}
/* Images uploaded */
.css-2jbc1u img {
margin-bottom: 1em;
}
.css-1dhayxc img:not([src*="/_next/static/media/editIcon"]) {
border-radius: .5em;
margin-left: auto;
min-height: 183px;
min-width: 220px;
object-fit: contain;
transition: translate 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.css-1dhayxc img:not([src*="/_next/static/media/editIcon"]):hover {
transform: scale(1.5);
transform-origin: bottom right;
z-index: 5 !important;
}
/* Manually edited */
if manuallyedited {
.css-fujl5p {
position: relative;
}
.css-fujl5p p.css-dhnoom,
.css-116lnl0 p.css-dhnoom {
bottom: .3em;
position: absolute;
right: -6em;
&::before {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
content: "Manually edited";
justify-content: end;
font-size: .9rem;
visibility: visible;
}
& {
visibility: hidden;
}
}
}
/* Modals size */
.chakra-modal__content {
border-radius: 1em;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
rgba(139, 110, 255, 0.4) -5px 5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px -5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px 5px 5px 5px;
max-width: 90%;
margin: 60px auto;
}
/* Modals's close button */
[aria-label="Close"] svg {
background: transparent;
color: var(--chakra-colors-white);
height: 20px;
margin: 20px 20px 0 0;
position: fixed;
width: 20px;
}
[aria-label="Close"]:hover::before {
color: var(--chakra-colors-white);
content: "Close";
font-size: 20px;
line-height: 20px;
margin-right: 5.5%;
margin-top: .85%;
position: fixed;
z-index: 1;
}
/* Not allowed cursor when needed */
.chakra-spinner,
* [disabled] {
cursor: not-allowed;
}
/* Remove the resize icon on textarea on chat page */
textarea:not(:focus),
textarea:focus {
resize: none;
}
}
@-moz-document url-prefix("https://kindroid.ai/home") {
/* ====================================================
Main menu
==================================================== */
Wide main menu
.css-ji0zhw {
width: 100vw;
}
/* Remove free space at the top of menu */
.css-ji0zhw > div:nth-of-type(2),
.css-ji0zhw > div:nth-of-type(2) > div:nth-of-type(1) {
overflow-y: auto;
}
/* Reduce free space at the end of main menu pages */
.css-1y6t5y9 {
margin-bottom: 4em;
}
/* Pin kins/groups */
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(1) > svg {
fill: var(--chakra-colors-secondaryWhite);
height: 2rem;
width: 2rem;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd {
display: flex;
flex-direction: column;
height: auto;
overflow-x: unset;
width: 100%;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > p {
position: static;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(1) {
display: flex;
flex-wrap: wrap;
gap: 1em;
height: auto;
justify-content: space-evenly;
order: 2;
width: 100%;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(1) > div {
align-items: center;
display: flex;
flex: 0 1 calc(100% / 9);
flex-direction: column;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(2) {
justify-content: space-evenly;
margin: 2em auto;
width: 100%;
}
body:has(.css-19zdxg6) {
.css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(2) {
border-color: #cbcbcb;
left: 1em;
position: fixed;
top: 48px;
width: auto;
}
}
/* Email box */
body:has(.css-11yc3yd) {
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(2) {
bottom: 1em;
left: 1em;
margin-top: 0;
position: fixed;
}
}
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(2) {
align-self: center;
gap: 0;
margin-top: 5%;
padding-top: 0;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(2) > div > div > p {
color: var(--chakra-colors-secondaryWhite);
padding-right: .5em;
}
/* Main content of menu */
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
min-height: 100%;
width: 100%;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > button,
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div {
align-items: center;
box-sizing: border-box;
flex-basis: calc(33.33% - 20px);
justify-content: center;
margin: 10px;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) {
justify-content: space-evenly;
width: 100%;
}
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) * {
font-size: 1.5rem;
}
/* Bottom links in menu */
.css-ji0zhw > div:nth-of-type(2) {
justify-content: space-evenly;
width: 100%;
}
.css-ji0zhw > div:nth-of-type(2) > h2 {
font-size: 1.2rem;
}
/* Subcriber icon */
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(2) img {
height: auto !important;
width: 44px;
}
/* Put Biling in yellow */
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > button:last-child p {
color: var(--chakra-colors-yellow-400);
}
/* Billing error box */
.css-dixmdy {
background-color: #161616;
border: 1px solid #6c6c6c;
border-radius: 10px;
color: var(--chakra-colors-secondaryWhite);
}
/* Put User Guide and Announcements and Terms in blue */
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:nth-of-type(7) > p,
.css-ji0zhw > div:nth-of-type(2) > h2:nth-of-type(1),
.css-ji0zhw > div:nth-of-type(2) > h2:nth-of-type(2) {
color: var(--chakra-colors-blue-400);
}
/* Put contact in green */
.css-ji0zhw > div:nth-of-type(2) > h2:nth-of-type(3) {
color: var(--chakra-colors-green-400);
}
/* Put Log out in orange */
.css-ji0zhw > div:nth-of-type(2) > h2:nth-of-type(4) {
color: var(--chakra-colors-orange);
}
.css-ji0zhw > div:nth-of-type(2) > h2:nth-of-type(4)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M304 336v40a40 40 0 01-40 40H104a40 40 0 01-40-40V136a40 40 0 0140-40h152c22.09 0 48 17.91 48 40v40M368 336l80-80-80-80M176 256h256' fill='none' stroke='%23cbcbcb' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E");
display: inline-block;
content: "";
margin-right: 5px;
height: 24px;
vertical-align: middle;
width: 24px;
}
/* Put Upload Photo text in custom avatar in white to be more visible */
.css-1jcj2pk {
color: var(--chakra-colors-secondaryWhite);
}
/* ===== My kindroids ===== */
/* Reorder kins */
.css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(2) > button.css-1123s1d svg,
.css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(2) > button.css-1123s1d::before {
height: 40px;
}
.css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(2) > button.css-1123s1d::before {
align-items: center;
content: "Reorder Kindroids";
display: flex;
font-size: fontsize;
height: 40px;
margin-right: .3em;
}
/* Reorder kins/groups menu */
.css-1sdqm6h {
align-items: center;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
justify-content: space-evenly;
padding-bottom: 0;
}
.css-1sdqm6h > div {
flex-basis: fit-content;
height: 100%;
}
.css-1sdqm6h > div > div {
flex-direction: column;
}
/* Avatar list in generate avatar */
.css-az6ase {
width: calc(50% - 50px);
}
/* Kins list */
.css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(3):not(.css-j98run) {
justify-content: space-evenly;
}
.css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(3):not(.css-j98run) img {
max-height: 300px;
max-width: 300px;
}
.css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(3) > div.css-12jdxbf:not(:last-child) {
height: auto;
width: 300px;
}
/* Kin's name */
.css-w9iwt8 .css-1cfkm3f {
text-align: center;
}
/* Create kin button */
.css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(3) > div:last-child:not(.css-8jhcex) {
flex-basis: 100%;
height: 108px;
justify-content: center;
}
.css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(3) > div:last-child > div {
width: 300px;
}
.css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(3) > div:last-child > div > div:not(.css-12l3553) {
font-size: 48px !important;
line-height: 48px;
margin-bottom: 0 !important;
}
/* Delete kin */
body:has(.css-ji0zhw) {
.css-r6z5ec[style="visibility: hidden; position: absolute; min-width: max-content; inset: 0px auto auto 0px;"] {
pointer-events: none;
}
.css-r6z5ec .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at[data-index="0"]::before,
.css-r6z5ec .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at[data-index="0"]:hover::after,
.css-r6z5ec .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at[data-index="1"]::before,
.css-r6z5ec .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at[data-index="1"]:hover::after,
.css-r6z5ec .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at[data-index="2"]::before,
.css-r6z5ec .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at[data-index="2"]:hover::after {
display: none;
}
.css-r6z5ec[style*="visibility: hidden"] .css-do4s31[style*="visibility: hidden"][aria-orientation="vertical"],
.css-r6z5ec[style*="visibility: visible"] .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] {
background: var(--chakra-colors-secondaryBlack) !important;
background-clip: initial !important;
border: none;
-o-text-fill-color: var(--chakra-colors-secondaryWhite) !important;
-moz-text-fill-color: var(--chakra-colors-secondaryWhite) !important;
-ms-text-fill-color: var(--chakra-colors-secondaryWhite) !important;
-webkit-text-fill-color: var(--chakra-colors-secondaryWhite) !important;
color: var(--chakra-colors-secondarywhite) !important;
height: auto;
border-radius: 1em;
visibility: visible !important;
white-space: nowrap !important;
}
.css-r6z5ec[style*="visibility: hidden"] .css-do4s31[style*="visibility: hidden"][aria-orientation="vertical"] > .css-94x4at,
.css-r6z5ec[style*="visibility: visible"] .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at {
background: var(--chakra-colors-secondaryBlack) !important;
padding: .75em;
}
.css-r6z5ec[style*="visibility: hidden"] .css-do4s31[style*="visibility: hidden"][aria-orientation="vertical"] > .css-94x4at:last-child,
.css-r6z5ec[style*="visibility: visible"] .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at:last-child {
background: var(--chakra-colors-secondaryBlack) !important;
background-clip: initial !important;
border: none;
-o-text-fill-color: var(--chakra-colors-red) !important;
-moz-text-fill-color: var(--chakra-colors-red) !important;
-ms-text-fill-color: var(--chakra-colors-red) !important;
-webkit-text-fill-color: var(--chakra-colors-red) !important;
color: var(--chakra-colors-secondarywhite) !important;
height: auto;
border-radius: 5px;
min-width: 100% !important;
visibility: visible !important;
white-space: nowrap !important;
}
}
/* Reorder Group */
.css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(4) > button.css-1123s1d svg,
.css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(4) > button.css-1123s1d::before {
height: 40px;
}
.css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(4) > button.css-1123s1d::before {
align-items: center;
content: "Reorder Groups";
display: flex;
font-size: fontsize;
height: 40px;
margin-right: .3em;
}
/* Groups list */
.css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(5) {
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
justify-content: space-evenly;
}
.css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(5) > div.css-r2mper,
.css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(5) > div.css-f35ydg {
width: 300px;
}
/* Create group button */
.css-ji0zhw > div:nth-of-type(2) > div > div:last-child > div.css-vuv5ru {
width: 300px;
}
/* Create a new group chat */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 {
align-items: start;
flex-direction: row;
flex-wrap: wrap;
}
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:first-child,
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > p {
width: 100%;
}
/* Modal's title */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > p:first-child {
text-align: center;
}
/* Modal's 1st explain */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > p:nth-of-type(2) {
font-size: 1.2rem;
line-height: 1.5;
}
/* Kin list */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > .css-1wy8ffp {
justify-content: space-between;
}
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > .css-1wy8ffp p {
font-size: 24px;
line-height: 32px;
text-align: center;
}
/* Group name */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:nth-of-type(2) {
order: 1;
width: calc(50% - 10px);
}
/* Group context */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:nth-of-type(3) {
order: 3;
width: calc(50% - 10px);
}
/* Turn-taking style */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:nth-of-type(4) {
order: 2;
width: calc(50% - 10px);
}
/* (Advanced) shared memory */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:nth-of-type(5) {
order: 4;
width: calc(50% - 10px);
}
/* Create group button */
.css-zys56m > .css-1ly87gx > .css-1yxzzu5 > button:not([aria-label="Create scenario"]) {
margin-left: auto;
margin-top: -6%;
order: 5;
max-width: 50%;
}
/* Share kins */
.css-dkzp5w {
justify-content: center;
}
.css-dkzp5w > .css-156z0wo {
height: auto;
width: 300px;
}
.css-1kxonj9 > .css-1qo2cb6 {
height: 300px;
width: 100%;
}
.css-pdvefo {
margin: 0 auto;
position: relative;
width: fit-content;
}
.css-1qo2cb6 > .css-pdvefo > .css-cqzojc > .css-79elbk {
aspect-ratio: 1 / 1;
border-radius: 16px;
height: 300px;
margin: 0 auto;
width: auto;
}
/* Avoid scroll problems */
.css-15b277d {
overflow-y: auto;
}
/* Display name etc visible content */
.css-ji0zhw > .css-xp7tub > .css-1lxwves {
min-height: max-content;
margin: 20px 0;
}
/* ===== General ===== */
.css-j7qwjs p:not(.css-8nzq2w, .css-1cfkm3f, .css-j5x8z7, .css-3nnoix) {
font-size: fontsize;
line-height: 1.2;
}
/* Danger zone: delete account */
.css-1inccke::before,
.css-1inccke::after {
content: "⚠️";
}
.css-1inccke {
bottom: 150px;
font-size: 18px;
font-weight: 600;
margin-left: auto;
width: max-content;
}
/* ===== Backstory ===== */
/* Journal entries */
.css-ji0zhw > .css-8onqts > .css-188uayk > .css-j7qwjs > .css-12ac5cx {
flex-direction: row;
}
.css-16wjzov .css-1pwenrv {
position: relative;
}
.css-16wjzov > div > div > div:nth-of-type(1) > button {
left: 0;
top: 60px;
position: absolute;
}
.css-16wjzov > div > div > div:nth-of-type(1) > button svg {
fill: var(--chakra-colors-primaryWhite);
}
.css-16wjzov > div > div > div:nth-of-type(1) > button::after {
color: var(--chakra-colors-primaryWhite);
content: "Click here to create a journal entry.";
font-size: 20px !important;
font-weight: normal;
margin-left: 5px;
}
.css-16wjzov .css-1thrbn {
margin-top: 5%;
}
/* ===== Voice ===== */
.css-2xph3x > div:last-child img {
margin-right: 34px;
}
/* ===== Avatar ===== */
/* Custom avatar menu page & in create a new Kin & my avatar */
.css-1slmhpt {
flex-direction: row;
}
.css-1slmhpt > .css-1qo2cb6 {
justify-content: center;
padding: 0 5em 5em 5em;
}
.css-1slmhpt > .css-1qo2cb6 > .css-pdvefo {
display: flex;
justify-content: center;
width: 100%;
}
.css-19ovozl > .css-j7qwjs > p:nth-of-type(4) {
position: static !important;
}
.css-1yljauu > div {
display: block !important;
height: auto !important;
opacity: 1 !important;
}
.css-1yljauu:nth-child(2) {
margin-top: 1em;
}
[aria-label="Get avatar description"] {
transform: translateY(50%);
}
/* Select Generated Avatar */
.css-16wjzov [aria-label="Copy prompt"],
.css-16wjzov [aria-label="Delete avatar"],
.css-16wjzov > div > div > p:nth-of-type(2) {
font-size: fontsize;
line-height: 1.5;
}
.css-16wjzov > div > div > div > div > div {
width: 300px;
}
.css-16wjzov > div > div > div > div > div:hover {
.css-1h95ja4 {
display: block;
}
}
.css-1h95ja4 {
border-radius: 16px;
display: none;
height: 300px;
padding: 1em;
pointer-events: none;
}
.css-16wjzov [aria-label="Copy prompt"] {
left: .5em;
position: absolute;
top: .5em;
}
.css-ha05g4 {
font-size: 1.1rem;
height: 300px;
line-height: 1.2;
padding: 2em 2em 0 0;
width: 300px;
}
/* My avatar */
.css-pwmocd > p:nth-of-type(2) {
margin-bottom: 1em;
}
img.reactEasyCrop_Contain,
div[style="width: 512px; height: 512px;"] {
height: 100% !important;
width: 100% !important;
}
/* Swipe arrows */
.avatarSlider .swiper-button-next::after,
.avatarSlider .swiper-button-prev::after {
color: var(--chakra-colors-primaryWhite);
}
.css-tf0j9o > .chakra-collapse > .css-1fm8jup > .css-dhnoom {
padding-bottom: 20px;
width: 47% !important;
}
.css-1v3caum > .css-tf0j9o > .chakra-collapse > .css-1fm8jup > .css-dhnoom {
width: 100% !important;
}
/* Hide arrows */
.css-g7h3az {
display: none;
}
/* Uncollapse "Advanced: secondary avatar" and "Advanced: custom avatar fidelity" */
.css-tf0j9o > div,
.css-1v3caum > div {
display: block !important;
height: auto !important;
opacity: 1 !important;
}
/* ===== Customizations ===== */
/* K menu icon */
if kmenuicon {
body:has(.css-1b1fzbz) {
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(1) img,
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(1):hover img {
display: none;
}
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(1),
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(1):hover {
background: url("data:image/png;base64,UklGRsYEAABXRUJQVlA4TLkEAAAvL8ALEE2YadtGSfut/AmPRET/MwDNtjTTJH52d7btZYE0ktSsZFAo+i8NSQWRURRhpm3bpNWrZzUAU9tIUjMxkffQf1uU0v/EXXOEf/gASgkbAL+VNF8B8NHIw5UGQbbN5o/93SEiJoBWrcvQDts2ciSWcP23e39pKvDl9P+IYBMAQBP3PiEBHw00wkqhLwEkAATw1RQrgjbws8A4954ASbdtm3q0H8oxmmXbttm1mjbb6ZaNX2C7757RthWWvvu9G76RV79gn5w4qSoptrUtW3au+zXcB+DWqU6DbJnOYmJ0huDSf5eM66sX5EaSHDmZ1XuCWv7ovx90gD8aosXcLLdjAohJ0kAJFwI4NPKbcf1el8Vs0CpM6ZRhIpgwOfzDr0+NzU/Zh53EmtL/RFNrTwNTHBFXQ3nVlFA1PVDNyOkT8J07SGkJr/i9t6WYt8of2EpkP1FbW/BEKNvRo6J5+7jq20uQfSOdTjprnGT6GceWn5/z6vfekoy9V8ogGw7fnHQgHapZ78n6JMv0P6LgiTAecg+wWfC5gNsBEoKGYWkHSJgCufTgdOr0GIADpJ/Hg/YbxAAQdiP2IGh02kTCELSDECSZLeZv5dqZ397josAyTmUuQHSE6g8DoYSawArWk3nxNnhpn/fO0/94kmIDBxImlgRW8wLLHcIShyYs2VgJARPUp8ZpuxfX74YvIUkYP6HP8T4fWP4wkMJ6EaCQucMXK3rbU1kCa1UwVvHhEReMVICgCRQYMrvvOCtbMqMCCbBRMDUufmJ3vLyWCECDwDQACavCH0PXXah+sRgJowJ0IEb21heJ9yujBA0CQ9rIf1irBGnNSi4DFCCsimcvs/PL6RVGAoTbhjBUlZx6LOa+hbWoSvrmXuSBk1DLaJUQVJgg0j+9a9Pt4woQRtQl78T5IOV1ZcRAGJLAAPq0lyaEEaBA+SmO5Kek55VRw0CCJqxqDQxQVD17Jf32y+kmRmYdGFUgYYCqKgxwnA6m2DNi0ASKwogC4ygwIhoomc5sVfbALiJShEBRl9yN6RmxUVIDY0gvalCQ21tRAWFV1UYcfOX5LMVDGCFQ4jBNAOLlFhGMJfW0imrLdLkQ67ekXAurKvW+Wdv7nzdxlEhERKwDFLLp58+xl69AEVI1IOlmfjGyB3eRkEBVGFFtUv9lD1/c1uJbVSCAhvSMdXgxsplRQMIoCVSrIlM+v286L7S4FCyMqo0yZGr60+IT80YEJAyQcIQkkz/J6XPTzlOLniFSpeh0w1UDtzuL35RnIcoNtCUOEG5YrSIEnbD5G60nr+atXFZZwqr6oEsKtaRbskdIeaHcCAMEDQkUCsnmqdnw8PfoP6vWi0gcu7cZI2/Av1D+PgIaKAQRZckUuHT9uXL7MmN0Ora6uhpolMmd++vtx3P8XkNs3h5QHDBtg0mLhjZgDIyjJsnE0vy8t+4evfzPNDGNsTYGY+glpyU92y52KS+E+Lp6uLr86a+jEi22AQ0kE16nn+1LeAVBybaTwTL/MaTL0oM1ScBS/7JUtzAFygq9mPv8masBrgUTdKJav02O1cJjktW6kvArPUnCrjS3YtVU2f/pRKRKvdHm2cbavC7LqkTPtAEA") center center / cover no-repeat;
height: 0;
padding-left: 48px;
padding-top: 48px;
width: 0;
}
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(1):hover {
border-radius: .5em;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
rgba(139, 110, 255, 0.4) -5px 5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px -5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px 5px 5px 5px;
}
}
}
/* Header icons hover */
body:has(.css-1b1fzbz) {
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(2):hover svg,
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(3):hover svg,
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(4):hover svg {
display: none;
}
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(2):hover,
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(3):hover,
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(4):hover {
height: 48px;
width: 48px;
}
/* Selfies icon */
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(2):hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M10 18C10 14.2288 10 12.3431 11.1716 11.1716C12.3431 10 14.2288 10 18 10H26C29.7712 10 31.6569 10 32.8284 11.1716C34 12.3431 34 14.2288 34 18V26C34 29.7712 34 31.6569 32.8284 32.8284C31.6569 34 29.7712 34 26 34H18C14.2288 34 12.3431 34 11.1716 32.8284C10 31.6569 10 29.7712 10 26V18Z' stroke='url(%23A)' stroke-width='2'%3E%3C/path%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M32 25.2522L30.8691 24.1213L30.8226 24.0747C30.1958 23.4478 29.6557 22.9077 29.165 22.5334C28.6392 22.1322 28.0543 21.8284 27.3336 21.8284C26.6128 21.8284 26.028 22.1322 25.5021 22.5334C25.0115 22.9077 24.4714 23.4478 23.8446 24.0747L23.798 24.1213L23.382 24.5373C22.8855 25.0338 22.5914 25.3242 22.3631 25.4938L22.3531 25.5011L22.3465 25.4906C22.1975 25.2483 22.0323 24.8695 21.7557 24.2241L21.2467 23.0365L21.2153 22.9631C20.7149 21.7955 20.2955 20.8167 19.8628 20.1133C19.4102 19.3778 18.8198 18.7356 17.8929 18.5571C16.9661 18.3786 16.1794 18.7556 15.486 19.2705C14.8231 19.7628 14.0701 20.5158 13.1719 21.4141L13.1719 21.4141L13.1155 21.4705L12 22.586V25.4144L14.5297 22.8847C15.4993 21.9151 16.1483 21.2698 16.6784 20.8762C17.192 20.4948 17.3995 20.4989 17.5147 20.521C17.6299 20.5432 17.8241 20.6165 18.1593 21.1614C18.5053 21.7237 18.8682 22.5639 19.4084 23.8243L19.9174 25.012L19.9442 25.0745L19.9442 25.0745C20.1846 25.6356 20.4071 26.1549 20.6431 26.5386C20.8987 26.954 21.293 27.4173 21.9593 27.5457C22.6257 27.674 23.1638 27.3903 23.5554 27.0995C23.9171 26.8309 24.3166 26.4313 24.7481 25.9996L24.7962 25.9516L25.2122 25.5355C25.8989 24.8488 26.3443 24.4065 26.7153 24.1234C27.0632 23.8579 27.2259 23.8284 27.3336 23.8284C27.4412 23.8284 27.6039 23.8579 27.9519 24.1234C28.3229 24.4065 28.7682 24.8488 29.4549 25.5355L31.9598 28.0404L31.9908 28.0094C31.9993 27.4328 32 26.7703 32 25.9998V25.2522ZM22.2169 25.586C22.2165 25.5862 22.2163 25.5863 22.2163 25.5863C22.2163 25.5864 22.2177 25.5859 22.2207 25.5846C22.2189 25.5852 22.2176 25.5857 22.2169 25.586ZM22.445 25.6278C22.4473 25.6297 22.4484 25.6309 22.4484 25.631C22.4484 25.6311 22.4473 25.6301 22.445 25.6278Z' fill='url(%23A)'%3E%3C/path%3E%3Ccircle cx='28' cy='16' r='2' fill='url(%23B)'%3E%3C/circle%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3ClinearGradient id='B' x1='-9' y1='27.5' x2='23' y2='1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.271' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
/* Voicecall icon */
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(3):hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' focusable='false' class='chakra-icon css-1a25qu'%3E%3Cpath fill='none' stroke='url(%23A)' stroke-width='2' d='M30.32 11.654l-.946-.947a1 1 0 00-1.414 0l-3.92 3.92a1 1 0 000 1.413l1.598 1.598a.71.71 0 01.133.82 16.351 16.351 0 01-7.313 7.313.71.71 0 01-.82-.133L16.04 24.04a1 1 0 00-1.414 0l-3.919 3.92a1 1 0 000 1.414l.947.946a6 6 0 007.842.558l3.875-2.907a22.994 22.994 0 004.6-4.6l2.907-3.875a6 6 0 00-.558-7.842z'%3E%3C/path%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
/* Rewards icon */
.css-x3odei > div:nth-of-type(1) > button:nth-of-type(4):hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' focusable='false' class='chakra-icon css-1a25qu'%3E%3Cpath d='M10 18.4C10 16.1502 10 15.0252 10.5729 14.2366C10.758 13.982 10.982 13.758 11.2366 13.5729C12.0252 13 13.1502 13 15.4 13H28.6C30.8498 13 31.9748 13 32.7634 13.5729C33.018 13.758 33.242 13.982 33.4271 14.2366C34 15.0252 34 16.1502 34 18.4V19.6C34 19.9716 34 20.1574 33.9754 20.3129C33.8398 21.1687 33.1687 21.8398 32.3129 21.9754C32.1574 22 31.9716 22 31.6 22V22V28C31.6 30.8284 31.6 32.2426 30.7213 33.1213C29.8426 34 28.4284 34 25.6 34H18.4C15.5716 34 14.1574 34 13.2787 33.1213C12.4 32.2426 12.4 30.8284 12.4 28V22V22C12.0284 22 11.8426 22 11.6871 21.9754C10.8313 21.8398 10.1602 21.1687 10.0246 20.3129C10 20.1574 10 19.9716 10 19.6V18.4Z' stroke='url(%23A)' stroke-width='2'%3E%3C/path%3E%3Cpath d='M13 22H31' stroke='url(%23A)' stroke-width='2' stroke-linecap='square'%3E%3C/path%3E%3Cpath d='M22 12.0411C22 9.16449 18.0292 5.26319 14.8298 7.84266C13.3063 9.07132 14.0701 11.5263 15.5931 12.2632C17.1161 13 20.1639 13 20.1639 13' stroke='url(%23A)' stroke-width='2' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M22 12.0411C22 9.16449 25.9708 5.26319 29.1702 7.84266C30.6937 9.07132 29.9299 11.5263 28.4069 12.2632C26.8839 13 23.8361 13 23.8361 13' stroke='url(%23A)' stroke-width='2' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M22 13V34' stroke='url(%23A)' stroke-width='2'%3E%3C/path%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
}
/* Tooltips */
[aria-label="gallery"]:hover::after,
[aria-label="call"]:hover::after,
[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: 1em;
color: var(--chakra-colors-primaryWhite);
font-family: var(--chakra-fonts-PoppinsRegular);
font-size: fontsize;
font-weight: normal;
line-height: 1.2;
padding: .5em;
position: absolute;
top: 50px;
}
[aria-label="gallery"]:hover::after {
content: "Selfies";
left: -30%;
}
[aria-label="call"]:hover::after {
content: "Voicecall";
left: -60%;
}
[aria-label="rewards"]:hover::after {
content: "Rewards";
left: -60%;
}
/* Rewards modal */
.css-116cmre {
margin: auto;
}
.css-116cmre *:not(.css-1cct4wf) {
font-size: fontsize;
line-height: 1.5;
}
.css-1offyti {
max-width: 700px;
}
/* Hide sharring */
if hidesharring {
.css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:nth-of-type(6),
.css-116cmre > div > .css-1ebprri,
.css-116cmre > div > p:nth-of-type(3),
.css-116cmre > div > .css-qsuiuj {
display: none;
}
.css-116cmre {
max-width: 700px;
}
}
}
@-moz-document url-prefix("https://kindroid.ai/home") {
/* ====================================================
Sidebar & System bubbles on chat page
==================================================== */
/* ===== Sidebar ===== */
/* History mode and view favorited messages */
[aria-label="History mode and view favorited messages"],
[aria-label="History mode and view favorited messages"]:hover {
background: transparent;
height: 36px;
min-height: 36px;
min-width: 36px;
padding: 0;
padding-inline-end: 0;
padding-inline-start: 0;
position: fixed;
right: .5em;
top: calc(60px + .5em);
width: 36px;
}
[aria-label="History mode and view favorited messages"] svg {
fill: var(--chakra-colors-secondaryWhite);
height: 36px;
width: 36px;
}
[aria-label="History mode and view favorited messages"]:hover svg {
fill: transparent !important;
stroke: transparent !important;
}
[aria-label="History mode and view favorited messages"]:hover svg {
background: url("data:image/svg+xml,%3Csvg stroke='url(%23A)' fill='url(%23A)' stroke-width='0' viewBox='0 0 256 256' height='30px' width='30px' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M124,192a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24h72A12,12,0,0,1,124,192ZM40,76H216a12,12,0,0,0,0-24H40a12,12,0,0,0,0,24Zm0,64H96a12,12,0,0,0,0-24H40a12,12,0,0,0,0,24Zm212,4c0,17-9.53,33.56-28.32,49.22a151.47,151.47,0,0,1-26.31,17.51,12,12,0,0,1-10.74,0,151.47,151.47,0,0,1-26.31-17.51C141.53,177.56,132,161,132,144a36,36,0,0,1,60-26.81A36,36,0,0,1,252,144Zm-24,0a12,12,0,0,0-24,0,12,12,0,0,1-24,0,12,12,0,0,0-24,0c0,17.23,22.85,34.43,36,42.29C205.14,178.44,228,161.23,228,144Z'%3E%3C/path%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") center center no-repeat;
background-size: cover;
height: 36px;
width: 36px;
}
[aria-label="History mode and view favorited messages"]:hover::before {
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: "History mode and view favorited messages";
font-family: var(--chakra-fonts-PoppinsRegular);
font-size: fontsize;
font-weight: normal;
line-height: 1.2;
padding: .5em;
position: fixed;
right: calc(36px + 1.2em);
transition: 0.3s linear ease-in-out;
white-space: nowrap;
}
/* LLM */
.css-2oetr7::before {
background: transparent;
}
.css-2oetr7:hover::before {
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: "Choose LLM version";
font-family: var(--chakra-fonts-PoppinsRegular);
font-size: fontsize;
font-weight: normal;
line-height: 1.2;
padding: .5em;
position: fixed;
right: calc(36px + 1.2em);
top: calc(60px + ((36px + 1em) * 1));
transition: 0.3s linear ease-in-out;
white-space: nowrap;
}
.css-2oetr7 {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M87.49 380c1.19-4.38-1.44-10.47-3.95-14.86a44.86 44.86 0 00-2.54-3.8 199.81 199.81 0 01-33-110C47.65 139.09 140.73 48 255.83 48 356.21 48 440 117.54 459.58 209.85a199 199 0 014.42 41.64c0 112.41-89.49 204.93-204.59 204.93-18.3 0-43-4.6-56.47-8.37s-26.92-8.77-30.39-10.11a31.09 31.09 0 00-11.12-2.07 30.71 30.71 0 00-12.09 2.43l-67.83 24.48a16 16 0 01-4.67 1.22 9.6 9.6 0 01-9.57-9.74 15.85 15.85 0 01.6-3.29z' fill='none' stroke='%23cbcbcb' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E") center center no-repeat;
height: 36px;
left: auto;
position: fixed;
top: calc(60px + ((36px + 1em) * 1));
right: .5em;
width: 36px;
}
.css-2oetr7:hover {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M87.49 380c1.19-4.38-1.44-10.47-3.95-14.86a44.86 44.86 0 00-2.54-3.8 199.81 199.81 0 01-33-110C47.65 139.09 140.73 48 255.83 48 356.21 48 440 117.54 459.58 209.85a199 199 0 014.42 41.64c0 112.41-89.49 204.93-204.59 204.93-18.3 0-43-4.6-56.47-8.37s-26.92-8.77-30.39-10.11a31.09 31.09 0 00-11.12-2.07 30.71 30.71 0 00-12.09 2.43l-67.83 24.48a16 16 0 01-4.67 1.22 9.6 9.6 0 01-9.57-9.74 15.85 15.85 0 01.6-3.29z' fill='none' stroke='url(%23A)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") center center no-repeat;
height: 36px;
left: auto;
position: fixed;
top: calc(60px + ((36px + 1em) * 1));
right: .5em;
width: 36px;
}
.css-2oetr7 > p {
display: none;
width: 0;
}
if (systembubblesstyle=="systembubbleswide") || (systembubblesstyle=="systembubblesdark") {
.css-r6z5ec > .css-do4s31 > .css-94x4at {
padding: 0;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:before,
.css-r6z5ec > .css-do4s31 > .css-94x4at:hover::before {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
content: "";
}
/* Continue cut-off message */
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1) {
order: 2;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='%23cbcbcb' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M394.77 246.7l-114.45-69.14a10.78 10.78 0 00-16.32 9.31v53.32l-103.68-62.63a10.78 10.78 0 00-16.32 9.31v138.26a10.78 10.78 0 0016.32 9.31L264 271.81v53.32a10.78 10.78 0 0016.32 9.31l114.45-69.14a10.89 10.89 0 000-18.6z' fill='%23cbcbcb' stroke='none' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E");
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1):hover::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='url(%23A)' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M394.77 246.7l-114.45-69.14a10.78 10.78 0 00-16.32 9.31v53.32l-103.68-62.63a10.78 10.78 0 00-16.32 9.31v138.26a10.78 10.78 0 0016.32 9.31L264 271.81v53.32a10.78 10.78 0 0016.32 9.31l114.45-69.14a10.89 10.89 0 000-18.6z' fill='url(%23A)' stroke='none' stroke-miterlimit='10' stroke-width='32'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
/* Auto-Selfie */
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2) {
order: 1;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2)::before {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M350.54 148.68l-26.62-42.06C318.31 100.08 310.62 96 302 96h-92c-8.62 0-16.31 4.08-21.92 10.62l-26.62 42.06C155.85 155.23 148.62 160 140 160H80a32 32 0 00-32 32v192a32 32 0 0032 32h352a32 32 0 0032-32V192a32 32 0 00-32-32h-59c-8.65 0-16.85-4.77-22.46-11.32z' fill='none' stroke='%23cbcbcb' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Ccircle cx='256' cy='272' r='80' fill='none' stroke='%23cbcbcb' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='%23cbcbcb' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M124 158v-22h-24v22'/%3E%3C/svg%3E");
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2):hover::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M350.54 148.68l-26.62-42.06C318.31 100.08 310.62 96 302 96h-92c-8.62 0-16.31 4.08-21.92 10.62l-26.62 42.06C155.85 155.23 148.62 160 140 160H80a32 32 0 00-32 32v192a32 32 0 0032 32h352a32 32 0 0032-32V192a32 32 0 00-32-32h-59c-8.65 0-16.85-4.77-22.46-11.32z' fill='none' stroke='url(%23A)' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Ccircle cx='256' cy='272' r='80' fill='none' stroke='url(%23A)' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='url(%23A)' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M124 158v-22h-24v22'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
/* Chat Break */
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3) {
order: 4;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3)::before {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='%23cbcbcb' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='%23cbcbcb' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M320 320L192 192M192 320l128-128'/%3E%3C/svg%3E");
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3):hover::before {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='url(%23A)' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='url(%23A)' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M320 320L192 192M192 320l128-128'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
/* Tweak AI message */
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(4) {
order: 3;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(4)::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48' fill='none' stroke='%23cbcbcb' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M459.94 53.25a16.06 16.06 0 00-23.22-.56L424.35 65a8 8 0 000 11.31l11.34 11.32a8 8 0 0011.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38zM399.34 90L218.82 270.2a9 9 0 00-2.31 3.93L208.16 299a3.91 3.91 0 004.86 4.86l24.85-8.35a9 9 0 003.93-2.31L422 112.66a9 9 0 000-12.66l-9.95-10a9 9 0 00-12.71 0z' fill='none' stroke='%23cbcbcb' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(4):hover::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48' fill='none' stroke='url(%23A)' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M459.94 53.25a16.06 16.06 0 00-23.22-.56L424.35 65a8 8 0 000 11.31l11.34 11.32a8 8 0 0011.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38zM399.34 90L218.82 270.2a9 9 0 00-2.31 3.93L208.16 299a3.91 3.91 0 004.86 4.86l24.85-8.35a9 9 0 003.93-2.31L422 112.66a9 9 0 000-12.66l-9.95-10a9 9 0 00-12.71 0z' fill='none' stroke='url(%23A)' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
}
if (systembubblesstyle=="systembubbleswide") {
body:has(.css-1b1fzbz) {
.css-r6z5ec > .css-do4s31 {
align-items: center;
background-color: transparent;
border: none;
bottom: 81px;
color: var(--chakra-colors-secondaryWhite);
display: flex;
flex-direction: column;
font-size: fontsize;
gap: .5em;
justify-content: flex-end;
left: auto;
max-width: 36px;
min-width: 36px;
--menu-shadow: transparent;
opacity: 1 !important;
outline: 0;
outline-offset: 0;
position: fixed;
right: .5em;
transform: none !important;
transform-origin: unset;
visibility: visible !important;
z-index: unset;
}
/* Hide 3 dots */
.css-1y2ps2x {
display: none;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at {
background-color: transparent;
color: transparent;
height: 36px !important;
max-width: 36px !important;
position: relative;
transform: none !important;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:before,
.css-r6z5ec > .css-do4s31 > .css-94x4at:hover::before {
height: 36px !important;
max-width: 36px !important;
min-width: 36px !important;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at: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;
bottom: unset !important;
color: var(--chakra-colors-primaryWhite);
left: auto !important;
right: calc(36px + .7em) !important;
font-family: var(--chakra-fonts-PoppinsRegular);
font-size: fontsize;
font-weight: normal;
line-height: 1.2;
padding: .5em;
position: absolute;
transition: 0.3s linear ease-in-out;
white-space: nowrap;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1):hover::after {
content: "Continue cut-off message";
transform: translateX(0%);
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2):hover::after {
content: "Auto-Selfie";
transform: translateX(0%);
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3):hover::after {
content: "Chat Break";
transform: translateX(0%) !important;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(4):hover::after {
content: "Tweak AI message";
transform: translateX(0%);
}
}
}
if (systembubblesstyle=="systembubblesdark") {
body:has(.css-1b1fzbz) {
.css-do4s31 {
border-radius: .5em;
margin-left: -5%
}
.css-do4s31,
.css-94x4at {
background-color: #161616;
border-color: #6C6C6C;
color: var(--chakra-colors-secondaryWhite);
font-family: var(--chakra-fonts-PoppinsRegular);
font-size: fontsize;
line-height: 1.5;
margin-bottom: .5em;
padding: .5em 0em .5em 1em;
}
.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%);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
color: transparent;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:before,
.css-r6z5ec > .css-do4s31 > .css-94x4at:hover::before {
height: fontsize !important;
max-width: fontsize !important;
min-width: fontsize !important;
margin-right: .3em;
}
}
}
}
@-moz-document url-prefix("https://kindroid.ai/home"), url-prefix("https://kindroid.ai/groupchat/") {
/* ====================================================
Chat and group chat page
==================================================== */
/* ===== Chat box ===== */
.css-1dhayxc *,
.css-yhhl9h * {
z-index: unset !important;
}
/* Vertically center bubbles */
.css-1dhayxc,
.css-yhhl9h {
align-items: center;
}
/* Vertically center edit icon */
.css-1dhayxc:last-child > div:nth-of-type(1) {
align-self: center;
padding: 0;
}
/* ===== Group config ===== */
.css-v79ql0 {
font-size: 18px;
text-align: center;
}
/* Avatar selection for group images */
.css-1e9g1nc {
justify-content: center;
}
.css-1e9g1nc > .css-156z0wo {
height: auto;
width: 300px;
}
.css-156z0wo > .css-15td5wo > .css-w9iwt8 > .css-1cfkm3f {
text-align: center;
}
/* ===== Textarea box ===== */
/* Add border to textarea when focus */
textarea:focus {
border: 0;
border-radius: 32px;
box-shadow: rgba(139, 109, 255, 0.4) -2px -2px 2px 2px,
rgba(139, 110, 255, 0.4) -2px 2px 2px 2px,
rgba(254, 133, 133, 0.4) 2px -2px 2px 2px,
rgba(254, 133, 133, 0.4) 2px 2px 2px 2px;
}
/* Textarea opacity */
.css-b9bzmp {
align-self: flex-end;
background-color: rgba(16, 16, 16, textareabgopacity);
bottom: 0;
right: 0;
padding: .75em;
position: fixed;
width: 100%;
z-index: 1;
}
.css-b9bzmp textarea {
opacity: textareaopacity;
}
/* Invert extras and textarea to prevent problems with sidebar */
.css-b9bzmp .css-14dkl09 {
order: 2;
}
.css-b9bzmp .css-2jbc1u {
order: 1;
}
textarea[aria-label="Attached link textarea"] {
margin-bottom: 1em;
}
/* Suggest message button */
[aria-label="Suggest message"] {
top: 50%;
transform: translateY(-50%);
}
/* ===== Customizations ===== */
/* Bubble when a kin is writing */
.css-1ib244v {
align-items: center;
}
/* Date in bubble */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1),
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1):empty,
.css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(1),
.css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(1):empty {
z-index: 0;
}
.css-1dhayxc .css-1iqgkq5,
.css-yhhl9h .css-160fgw0 {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: var(--chakra-fonts-PoppinsRegular), sans-serif;
font-size: fontsize;
font-weight: normal;
white-space: nowrap;
}
/* More options icons */
[aria-label="more-options"] {
align-self: center !important;
background: transparent;
margin-left: 2em;
}
[aria-label="more-options"]:hover {
background: transparent;
}
[aria-label="more-options"] > span {
color: var(--chakra-colors-primaryWhite) !important;
background: transparent;
font-size: 36px !important;
}
[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;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
color: transparent;
}
/* Hide names in bubbles to save place */
if hidenames {
.css-k008qs > p:first-child {
display: none;
}
.css-1cs12kv {
height: 0;
}
[src*="/_next/static/media/playIcon"],
[src*="/_next/static/media/stopIcon"],
.css-fujl5p .chakra-spinner,
.css-fujl5p:has(.css-qfa1mb) .css-qfa1mb {
height: 36px;
margin-left: -70px;
pointer-events: none;
position: absolute;
top: 50%;
transition: transform 0.3s ease;
width: 36px;
}
[src*="/_next/static/media/playIcon"],
[src*="/_next/static/media/stopIcon"],
.css-fujl5p .chakra-spinner {
transform: translateY(-50%);
}
.css-fujl5p:has(.css-qfa1mb) [src*="/_next/static/media/playIcon"],
.css-fujl5p:has(.css-qfa1mb) [src*="/_next/static/media/stopIcon"],
.css-fujl5p:has(.css-qfa1mb) .chakra-spinner {
transform: translateY(-100%);
}
.css-fujl5p:has(.css-qfa1mb) .css-qfa1mb {
transform: translateY(25%);
}
.css-yhhl9h > .css-fujl5p,
.css-yhhl9h > .css-116lnl0 {
margin-left: 50px;
}
.css-1dhayxc:has([aria-label="Create new scenario"]) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) {
margin-left: -6em !important;
margin-right: auto;
}
}
/* Create new scenario and favorite icons on left and bigger */
.css-1dhayxc:has([aria-label="Create new scenario"]) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) {
margin-left: -9em;
margin-right: auto;
}
.css-1dhayxc:has([aria-label="Create new scenario"]) {
[src*="/_next/static/media/editIcon"] {
margin-left: -5em;
margin-right: auto;
}
}
}
@-moz-document url-prefix("https://kindroid.ai/home") {
/* ====================================================
Chat page
==================================================== */
/* ===== Wide mode ===== */
.css-213aa4,
.css-na0gqx {
box-sizing: border-box;
max-height: 100vh;
max-width: 100vw;
position: relative;
}
/* ===== Avatar box ===== */
.css-213aa4 > div:nth-of-type(2),
.css-na0gqx > div:nth-of-type(2) {
margin: 0 1em;
max-width: avatarsize;
min-width: avatarsize;
padding: 0;
transition: 0.3s linear ease-in-out;
}
/* Hide reduce button on avatar */
@media screen and (min-width: 900px) {
.css-b5a3z7 {
display: none;
}
}
/* ===== Chat box ===== */
.css-213aa4 > div:nth-of-type(3),
.css-na0gqx > div:nth-of-type(3) {
border-right: 1px solid #cbcbcb;
margin: 0 3.5em 71px 0;
max-width: 100%;
padding: 0 1em 0 0;
}
/* Modification of rounded corners for our bubbles */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) {
border-radius: 1em .5em 1em 1em !important;
}
/* Modification of rounded corners for AI bubbles */
.css-1ulhpcc,
.css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(2) {
border-radius: .5em 1em 1em 1em !important;
}
/* Vertically center bubbles */
.css-yhhl9h:last-child > div:nth-of-type(2) {
margin-top: auto;
}
/* ===== Customizations ===== */
/* Vanilla avatar */
.css-213aa4 > div:nth-of-type(2) > div,
.css-na0gqx > div:nth-of-type(2) > div {
border-radius: 1em;
}
/* Avatar chat */
if avatarchat && avatarchoice {
.css-213aa4 > div:nth-of-type(2),
.css-na0gqx > div:nth-of-type(2) {
display: none;
height: 0;
transition: 0.3s linear ease-in-out;
width: 0;
}
/* Adjust bubbles size depending on avatar size */
.css-1dhayxc > .css-fujl5p,
.css-1dhayxc > .css-116lnl0,
.css-yhhl9h > .css-fujl5p,
.css-yhhl9h > .css-116lnl0 {
max-width: calc(80% - var(--avatarchatgroupsize));
}
.css-yhhl9h::before {
background: url(avatarchoiceurl) center center / cover no-repeat;
border-radius: 1em;
content: "";
height: avatarchatgroupsize;
margin-left: 16px;
min-width: avatarchatgroupsize;
transition: 0.3s linear ease-in-out;
width: avatarchatgroupsize;
}
.css-4qwruq:has([aria-label="Create new scenario"]) {
.css-1dhayxc,
.css-yhhl9h {
padding-top: 0 !important;
}
}
if avatarchoiceforus {
.css-1dhayxc::after {
background: url(avatarchoiceforusurl) center center / cover no-repeat;
border-radius: 1em;
content: "";
height: avatarchatgroupsize;
min-width: avatarchatgroupsize;
transition: 0.3s linear ease-in-out;
width: avatarchatgroupsize;
}
}
if avatarcircle {
.css-1dhayxc::after,
.css-yhhl9h::before {
border-radius: 50%;
transition: 0.3s linear ease-in-out;
}
}
if avatarrectangle {
.css-1dhayxc::after,
.css-yhhl9h::before {
aspect-ratio: 9 / 13;
height: auto;
transition: 0.3s linear ease-in-out;
}
}
}
/* Avatar choice */
if avatarchoice {
.css-213aa4 > div:nth-of-type(2) > div img,
.css-na0gqx > div:nth-of-type(2) > div img {
background: url(avatarchoiceurl) center center / cover no-repeat;
height: 0;
padding-left: avatarsize;
padding-top: avatarsize;
transition: 0.3s linear ease-in-out;
width: 0;
}
}
/* Avatar circle */
if avatarcircle {
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
border-radius: 50% !important;
transition: 0.3s linear ease-in-out;
}
}
/* Avatar hoverzoom */
if avatarhoverzoom {
.css-213aa4 > div:nth-of-type(2) > div > img:hover,
.css-na0gqx > div:nth-of-type(2) > div > img:hover,
.css-213aa4 > div:nth-of-type(2) > div > video:hover,
.css-na0gqx > div:nth-of-type(2) > div > video:hover {
aspect-ratio: 1 / 1;
border-radius: 0 !important;
max-height: 100vh !important;
min-height: 100vh !important;
left: 0;
position: fixed !important;
top: 0 !important;
min-width: fit-content;
width: auto !important;
z-index: 9999 !important;
}
if avatarchoice {
.css-213aa4 > div:nth-of-type(2) > div:hover > img,
.css-na0gqx > div:nth-of-type(2) > div:hover > img,
.css-213aa4 > div:nth-of-type(2) > div:hover > video,
.css-na0gqx > div:nth-of-type(2) > div:hover > video {
display: none;
}
.css-213aa4 > div:nth-of-type(2) > div:hover::after,
.css-na0gqx > div:nth-of-type(2) > div:hover::after {
content: "";
background: url(avatarchoiceurl) center center / cover no-repeat;
aspect-ratio: 1 / 1;
border-radius: 0 !important;
max-height: 100vh !important;
min-height: 100vh !important;
left: 0;
position: fixed !important;
top: 0 !important;
min-width: fit-content;
width: auto !important;
z-index: 9999 !important;
}
}
}
/* Avatar on right side */
if avataronrightside {
.css-213aa4 > div:nth-of-type(2),
.css-na0gqx > div:nth-of-type(2) {
border-right: 1px solid #cbcbcb;
margin-right: calc(36px + 1em);
padding-right: 2em;
order: 2;
}
.css-213aa4 > div:nth-of-type(3),
.css-na0gqx > div:nth-of-type(3) {
border-right: 0 !important;
margin-left: 1em !important;
margin-right: 0 !important;
order: 1;
}
}
/* Avatar position */
.css-213aa4 > div:nth-of-type(2) > div,
.css-na0gqx > div:nth-of-type(2) > div {
top: avatarposition;
transition: 0.3s linear ease-in-out;
}
/* Avatar rectangle */
if avatarrectangle {
.css-213aa4 > div:nth-of-type(2),
.css-na0gqx > div:nth-of-type(2),
.css-213aa4 > div:nth-of-type(2) > div,
.css-na0gqx > div:nth-of-type(2) > div,
.css-213aa4 > div:nth-of-type(2) > div img,
.css-na0gqx > div:nth-of-type(2) > div img,
.css-213aa4 > div:nth-of-type(2) > div video,
.css-na0gqx > div:nth-of-type(2) > div video {
min-height: calc(100vh - 60px - 71px - 1em);
max-width: avatarsize;
min-width: avatarsize;
transition: 0.3s linear ease-in-out;
}
.css-213aa4 > div:nth-of-type(2) > div > img,
.css-na0gqx > div:nth-of-type(2) > div > img,
.css-213aa4 > div:nth-of-type(2) > div > video,
.css-na0gqx > div:nth-of-type(2) > div > video {
object-fit: cover;
}
}
/* Background */
if (bgchoice=="heartbg") {
.css-213aa4,
.css-na0gqx {
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") {
.css-213aa4,
.css-na0gqx {
background: bgcolor !important;
}
}
if (bgchoice=="custombg") {
.css-213aa4,
.css-na0gqx {
background: url(custombgurl) bgcolor no-repeat 100% !important;
background-size: cover !important;
}
}
/* Bubbles background */
.css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(2) {
background: url(bubblesbgurl) bubblesbgcolor !important;
background-size: cover;
}
/* Bubbles background for us */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) {
background: url(bubblesbgurlforus) bubblesbgcolorforus !important;
background-size: cover;
}
/* Font color */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div {
color: fontcolorforus;
}
.css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div {
color: fontcolor;
}
/* Gradient regenerate icon */
.css-yhhl9h > div:nth-of-type(2) > div > button img {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10.587 4.066a.5.5 0 1 0-.496.868l1.547.884c-.825.104-1.625.353-2.354.735-.99.519-1.819 1.27-2.398 2.18A5.6 5.6 0 0 0 6 11.742a5.6 5.6 0 0 0 .886 3.008.5.5 0 1 0 .844-.536A4.6 4.6 0 0 1 7 11.742a4.6 4.6 0 0 1 .73-2.472c.48-.756 1.175-1.389 2.018-1.831a5.97 5.97 0 0 1 2.289-.657l-1.989 1.421a.5.5 0 1 0 .581.814l3.832-2.737-3.875-2.214z' fill='url(%23A)'/%3E%3Cpath d='M17.211 8.799a.5.5 0 1 0-.844.536 4.6 4.6 0 0 1 .73 2.472 4.6 4.6 0 0 1-.73 2.472c-.48.755-1.175 1.389-2.018 1.831a5.97 5.97 0 0 1-2.291.657l1.989-1.421a.5.5 0 0 0-.581-.814l-3.832 2.737 3.875 2.214a.5.5 0 1 0 .496-.868l-1.547-.884a6.95 6.95 0 0 0 2.356-.735c.99-.52 1.819-1.27 2.398-2.18a5.6 5.6 0 0 0 .886-3.008 5.6 5.6 0 0 0-.886-3.008z' fill='%23866af6'/%3E%3Cpath fill-rule='evenodd' d='M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12zm12 11C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11-4.925 11-11 11z' fill='url(%23A)'/%3E%3Ccircle cx='12' cy='12' r='11.5' stroke='url(%23B)'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3ClinearGradient id='B' x1='-9' y1='27.5' x2='23' y2='1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.271' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat;
height: 0;
padding-left: 36px;
padding-top: 36px;
width: 0;
}
/* Recalled memories icon on right and bigger */
.css-yhhl9h:not(:has([aria-label="Create new scenario"])) > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > button[aria-label="show recalled memories"] {
right: -3.75em !important;
z-index: 1;
}
.css-yhhl9h:has([aria-label="Create new scenario"]) > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) button {
right: -8.5em !important;
z-index: 1;
}
.css-1dhayxc button svg,
.css-yhhl9h button svg {
height: 36px;
width: 36px;
}
.css-4qwruq:has([aria-label="Create new scenario"]) {
.css-1dhayxc,
.css-yhhl9h {
padding-top: 2em !important;
}
}
/* Shadow at top of chat */
if bgshadow {
.css-213aa4 > div:nth-of-type(3),
.css-na0gqx > div:nth-of-type(3) {
position: relative;
}
.css-213aa4 > div:nth-of-type(3)::before,
.css-na0gqx > div:nth-of-type(3)::before {
background: linear-gradient(to bottom, bgshadowcolor 0%, transparent 100%);
left: 0;
content: "";
height: 5em;
position: absolute;
right: 0;
top: 0;
z-index: 10;
}
}
}
@-moz-document url-prefix("https://kindroid.ai/groupchat/") {
/* ====================================================
Sidebar & System bubbles on group chat page
==================================================== */
/* ===== Sidebar ===== */
/* Group bar */
.css-1qpmsp4 > div > div:nth-of-type(1) {
flex-direction: column;
height: 0;
}
.css-1qpmsp4 > div > div:nth-of-type(1) > p {
color: var(--chakra-colors-primaryWhite);
font-family: var(--chakra-fonts-PoppinsBold);
font-size: 36px !important;
left: 4%;
line-height: 54px;
position: fixed;
top: .2em;
z-index: 9999;
}
[aria-label="group selfie"],
[aria-label="global journal entry"],
[aria-label="History mode and view favorited messages"],
[aria-label="group settings"] {
background: transparent;
height: 36px;
min-height: 36px;
min-width: 36px;
padding: .1em !important;
padding-inline-end: 0;
padding-inline-start: 0;
position: fixed;
right: .5em;
width: 36px;
}
[aria-label="group selfie"] {
top: calc(60px + .5em);
}
[aria-label="global journal entry"] {
top: calc(60px + ((36px + 1.5em) * 1));
}
[aria-label="History mode and view favorited messages"] {
top: calc(60px + ((36px + 1em) * 2));
}
[aria-label="group settings"] {
top: calc(60px + ((36px + 1em) * 3));
}
.css-1qpmsp4 > div > div:nth-of-type(1) > button svg {
fill: var(--chakra-colors-secondaryWhite);;
height: 36px;
width: 36px;
}
if (systembubblesstyle=="systembubbleswide") || (systembubblesstyle=="systembubblesdark") {
.css-r6z5ec > .css-do4s31 > .css-94x4at {
padding: 0;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:before,
.css-r6z5ec > .css-do4s31 > .css-94x4at:hover::before {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
content: "";
}
/* Continue cut-off message */
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1) {
order: 1;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='%23cbcbcb' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M394.77 246.7l-114.45-69.14a10.78 10.78 0 00-16.32 9.31v53.32l-103.68-62.63a10.78 10.78 0 00-16.32 9.31v138.26a10.78 10.78 0 0016.32 9.31L264 271.81v53.32a10.78 10.78 0 0016.32 9.31l114.45-69.14a10.89 10.89 0 000-18.6z' fill='%23cbcbcb' stroke='none' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E");
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1):hover::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='url(%23A)' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M394.77 246.7l-114.45-69.14a10.78 10.78 0 00-16.32 9.31v53.32l-103.68-62.63a10.78 10.78 0 00-16.32 9.31v138.26a10.78 10.78 0 0016.32 9.31L264 271.81v53.32a10.78 10.78 0 0016.32 9.31l114.45-69.14a10.89 10.89 0 000-18.6z' fill='url(%23A)' stroke='none' stroke-miterlimit='10' stroke-width='32'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
/* Chat Break */
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2) {
order: 3;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2)::before {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='%23cbcbcb' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='%23cbcbcb' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M320 320L192 192M192 320l128-128'/%3E%3C/svg%3E");
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2):hover::before {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='url(%23A)' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='url(%23A)' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M320 320L192 192M192 320l128-128'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
/* Tweak AI message */
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3) {
order: 2;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3)::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48' fill='none' stroke='%23cbcbcb' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M459.94 53.25a16.06 16.06 0 00-23.22-.56L424.35 65a8 8 0 000 11.31l11.34 11.32a8 8 0 0011.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38zM399.34 90L218.82 270.2a9 9 0 00-2.31 3.93L208.16 299a3.91 3.91 0 004.86 4.86l24.85-8.35a9 9 0 003.93-2.31L422 112.66a9 9 0 000-12.66l-9.95-10a9 9 0 00-12.71 0z' fill='none' stroke='%23cbcbcb' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3):hover::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48' fill='none' stroke='url(%23A)' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M459.94 53.25a16.06 16.06 0 00-23.22-.56L424.35 65a8 8 0 000 11.31l11.34 11.32a8 8 0 0011.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38zM399.34 90L218.82 270.2a9 9 0 00-2.31 3.93L208.16 299a3.91 3.91 0 004.86 4.86l24.85-8.35a9 9 0 003.93-2.31L422 112.66a9 9 0 000-12.66l-9.95-10a9 9 0 00-12.71 0z' fill='none' stroke='url(%23A)' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
}
if (systembubblesstyle=="systembubbleswide") {
.css-r6z5ec > .css-do4s31 {
align-items: center;
background-color: transparent;
border: none;
bottom: 81px;
color: var(--chakra-colors-secondaryWhite);
display: flex;
flex-direction: column;
font-size: fontsize;
gap: .5em;
justify-content: flex-end;
left: auto;
max-width: 36px;
min-width: 36px;
--menu-shadow: transparent;
opacity: 1 !important;
outline: 0;
outline-offset: 0;
position: fixed;
right: .5em;
transform: none !important;
transform-origin: unset;
visibility: visible !important;
z-index: unset;
}
/* Hide 3 dots */
.css-1y2ps2x {
display: none;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at {
background-color: transparent;
color: transparent;
height: 36px !important;
max-width: 36px !important;
position: relative;
transform: none !important;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:before,
.css-r6z5ec > .css-do4s31 > .css-94x4at:hover::before {
height: 36px !important;
max-width: 36px !important;
min-width: 36px !important;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at: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;
bottom: unset !important;
color: var(--chakra-colors-primaryWhite);
left: auto !important;
right: calc(36px + .7em) !important;
font-family: var(--chakra-fonts-PoppinsRegular);
font-size: fontsize;
font-weight: normal;
line-height: 1.2;
padding: .5em;
position: absolute;
transition: 0.3s linear ease-in-out;
white-space: nowrap;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1):hover::after {
content: "Continue cut-off message";
transform: translateX(0%);
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2):hover::after {
content: "Auto-Selfie";
transform: translateX(0%);
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3):hover::after {
content: "Chat Break";
transform: translateX(0%) !important;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(4):hover::after {
content: "Tweak AI message";
transform: translateX(0%);
}
}
if (systembubblesstyle=="systembubblesdark") {
.css-do4s31 {
border-radius: .5em;
margin-left: -5%;
}
.css-do4s31,
.css-94x4at {
background-color: #161616;
border-color: #6C6C6C;
color: var(--chakra-colors-secondaryWhite);
font-family: var(--chakra-fonts-PoppinsRegular);
font-size: fontsize;
line-height: 1.5;
margin-bottom: .5em;
padding: .5em 0 0 1em;
}
.css-do4s31 {
display: grid;
}
.css-r6z5ec,
.css-do4s31 {
margin-left: -14% !important;
margin-top: -65%;
}
.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%);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
color: transparent;
}
.css-r6z5ec > .css-do4s31 > .css-94x4at:before,
.css-r6z5ec > .css-do4s31 > .css-94x4at:hover::before {
height: fontsize !important;
max-width: fontsize !important;
min-width: fontsize !important;
margin-right: .3em;
}
}
}
@-moz-document url-prefix("https://kindroid.ai/groupchat/") {
/* ==========================================================
Group chat page
========================================================== */
/* Wide mode */
.css-1qpmsp4 {
box-sizing: border-box;
max-height: 100vh;
max-width: 100vw;
position: relative;
}
/* ===== Chat box ===== */
.css-1qpmsp4 > div > div:nth-of-type(2) {
border-right: 1px solid #cbcbcb;
margin: 0 4em 71px 0;
max-width: 100%;
padding: 0 1em 0 1.5em;
width: 100%;
}
/* Adjust bubbles size depending on avatar size */
.css-1dhayxc > .css-fujl5p,
.css-1dhayxc > .css-116lnl0,
.css-yhhl9h > .css-fujl5p,
.css-yhhl9h > .css-116lnl0 {
max-width: calc(80% - var(--avatarchatgroupsize));
}
/* Modification of rounded corners for our bubbles */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) {
border-radius: 1em .5em 1em 1em !important;
}
/* Modification of rounded corners for AI bubbles */
.css-1ulhpcc,
.css-yhhl9h > div:nth-of-type(2) > div:nth-of-type(2) {
border-radius: .5em 1em 1em 1em !important;
}
/* Vertically center bubbles */
.css-yhhl9h:last-child > div:nth-of-type(3) {
margin-top: auto;
}
/* ===== Textarea box ===== */
.css-1qxhwlw {
width: 100vw;
}
/* ===== Customizations ===== */
/* Vanilla avatar */
.css-yhhl9h > div:nth-of-type(1),
.css-yhhl9h > div:nth-of-type(1) > div,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
border-radius: 1em;
height: auto;
max-width: avatarchatgroupsize;
min-width: avatarchatgroupsize;
}
/* Avatar chat */
if avatarchat || avatarchoiceforus {
.css-213aa4 > div:nth-of-type(2) {
display: none;
height: 0;
transition: 0.3s linear ease-in-out;
width: 0;
}
.css-4qwruq:has([aria-label="Create new scenario"]) {
.css-1dhayxc,
.css-yhhl9h {
padding-top: 0 !important;
}
}
.css-1dhayxc::after {
background: url(avatarchoiceforusurl) center center / cover no-repeat;
border-radius: 1em;
content: "";
height: avatarchatgroupsize;
min-width: avatarchatgroupsize;
transition: 0.3s linear ease-in-out;
width: avatarchatgroupsize;
}
if avatarcircle {
.css-1dhayxc::after {
border-radius: 50%;
transition: 0.3s linear ease-in-out;
}
}
if avatarrectangle {
.css-1dhayxc::after {
aspect-ratio: 9 / 13;
height: auto;
transition: 0.3s linear ease-in-out;
}
}
}
/* Avatar circle */
if avatarcircle {
.css-yhhl9h > div:nth-of-type(1) > div > img,
.css-yhhl9h > div:nth-of-type(1) > div > video {
border-radius: 50% !important;
transition: 0.3s linear ease-in-out;
}
}
/* Avatar hoverzoom */
if avatarhoverzoom {
.css-yhhl9h > div:nth-of-type(1) > div > img:hover,
.css-yhhl9h > div:nth-of-type(1) > div > video:hover {
aspect-ratio: 1 / 1;
border-radius: 0 !important;
max-height: 100vh !important;
min-height: 100vh !important;
left: 0;
position: fixed !important;
top: 0 !important;
min-width: fit-content;
width: auto !important;
z-index: 9999 !important;
}
}
/* Avatar rectangle */
if avatarrectangle {
.css-yhhl9h > div:nth-of-type(1),
.css-yhhl9h > div:nth-of-type(1) > div,
.css-yhhl9h > div:nth-of-type(1) > div img,
.css-yhhl9h > div:nth-of-type(1) > div video {
aspect-ratio: 9 / 13;
height: auto;
max-width: avatarchatgroupsize;
min-width: avatarchatgroupsize;
transition: 0.3s linear ease-in-out;
}
.css-yhhl9h > div:nth-of-type(1) > div > img,
.css-yhhl9h > div:nth-of-type(1) > div > video {
object-fit: cover;
}
}
/* Background */
if (bgchoice=="heartbg") {
.css-1qpmsp4 {
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") {
.css-1qpmsp4 {
background: bgcolor !important;
}
}
if (bgchoice=="custombg") {
.css-1qpmsp4 {
background: url(custombgurl) bgcolor no-repeat 100% !important;
background-size: cover !important;
}
}
/* Bubbles background */
.css-yhhl9h > div:nth-of-type(2) > div:nth-of-type(2) {
background: url(bubblesbgurl) bubblesbgcolor !important;
background-size: cover;
}
/* Bubbles background for us */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) {
background: url(bubblesbgurlforus) bubblesbgcolorforus !important;
background-size: cover;
}
/* Font color */
.css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div {
color: fontcolorforus;
}
.css-yhhl9h > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div {
color: fontcolor;
}
/* Gradient regenerate icon */
.css-yhhl9h > div:nth-of-type(3) > div > button img {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10.587 4.066a.5.5 0 1 0-.496.868l1.547.884c-.825.104-1.625.353-2.354.735-.99.519-1.819 1.27-2.398 2.18A5.6 5.6 0 0 0 6 11.742a5.6 5.6 0 0 0 .886 3.008.5.5 0 1 0 .844-.536A4.6 4.6 0 0 1 7 11.742a4.6 4.6 0 0 1 .73-2.472c.48-.756 1.175-1.389 2.018-1.831a5.97 5.97 0 0 1 2.289-.657l-1.989 1.421a.5.5 0 1 0 .581.814l3.832-2.737-3.875-2.214z' fill='url(%23A)'/%3E%3Cpath d='M17.211 8.799a.5.5 0 1 0-.844.536 4.6 4.6 0 0 1 .73 2.472 4.6 4.6 0 0 1-.73 2.472c-.48.755-1.175 1.389-2.018 1.831a5.97 5.97 0 0 1-2.291.657l1.989-1.421a.5.5 0 0 0-.581-.814l-3.832 2.737 3.875 2.214a.5.5 0 1 0 .496-.868l-1.547-.884a6.95 6.95 0 0 0 2.356-.735c.99-.52 1.819-1.27 2.398-2.18a5.6 5.6 0 0 0 .886-3.008 5.6 5.6 0 0 0-.886-3.008z' fill='%23866af6'/%3E%3Cpath fill-rule='evenodd' d='M0 12C0 5.373 5.373 0 12 0s12 5.373 12 12-5.373 12-12 12S0 18.627 0 12zm12 11C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11-4.925 11-11 11z' fill='url(%23A)'/%3E%3Ccircle cx='12' cy='12' r='11.5' stroke='url(%23B)'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3ClinearGradient id='B' x1='-9' y1='27.5' x2='23' y2='1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.271' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat;
height: 0;
padding-left: 36px;
padding-top: 36px;
width: 0;
}
/* Group context textarea */
textarea[aria-label="Group context textarea"] {
height: 300px;
}
/* Modification of Continue/Pause conversation button */
if continueconvauto {
/* Remove space between chat and textarea area */
.css-1bkilns:last-child {
gap: 0;
}
.css-b9bzmp {
padding-left: 60px;
}
.css-1qpmsp4 > div > div:nth-of-type(3),
.css-1qpmsp4 > div > div:nth-of-type(3) > div,
.css-1qpmsp4 > div > div:nth-of-type(3) > div button {
bottom: .75em;
height: 61px;
left: 0;
margin-left: 0;
max-width: 61px;
position: fixed;
text-indent: -9999px;
width: 61px;
z-index: 2;
}
.css-1qpmsp4 > div > div:nth-of-type(3) > div button.css-snc6k5::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='%23cbcbcb' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M394.77 246.7l-114.45-69.14a10.78 10.78 0 00-16.32 9.31v53.32l-103.68-62.63a10.78 10.78 0 00-16.32 9.31v138.26a10.78 10.78 0 0016.32 9.31L264 271.81v53.32a10.78 10.78 0 0016.32 9.31l114.45-69.14a10.89 10.89 0 000-18.6z' fill='%23cbcbcb' stroke='none' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
content: "";
height: 48px;
width: 48px;
}
.css-1qpmsp4 > div > div:nth-of-type(3) > div button.css-snc6k5:hover::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='url(%23A)' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M394.77 246.7l-114.45-69.14a10.78 10.78 0 00-16.32 9.31v53.32l-103.68-62.63a10.78 10.78 0 00-16.32 9.31v138.26a10.78 10.78 0 0016.32 9.31L264 271.81v53.32a10.78 10.78 0 0016.32 9.31l114.45-69.14a10.89 10.89 0 000-18.6z' fill='url(%23A)' stroke='none' stroke-miterlimit='10' stroke-width='32'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
content: "";
height: 48px;
width: 48px;
}
.css-1qpmsp4 > div > div:nth-of-type(3) > div button.css-snc6k5:hover::after {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background-clip: text;
bottom: 72px;
color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
content: "Continue conversation";
font-size: 18px;
line-height: 18px;
left: 10px;
text-indent: 0;
position: fixed;
}
.css-1qpmsp4 > div > div:nth-of-type(3) > div button.css-wgxnqr::before {
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='%23cbcbcb' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='%23cbcbcb' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32' d='M208 192v128M304 192v128'/%3E%3C/svg%3E");
background-size: cover;
background-repeat: no-repeat;
content: "";
height: 48px;
width: 48px;
}
.css-1qpmsp4 > div > div:nth-of-type(3) > div button.css-wgxnqr:hover::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z' fill='none' stroke='url(%23A)' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath fill='none' stroke='url(%23A)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32' d='M208 192v128M304 192v128'/%3E%3Cdefs%3E%3ClinearGradient id='A' x1='1.6' y1='25.2' x2='29.2' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.208' stop-color='%238b6dff'/%3E%3Cstop offset='1' stop-color='%23fe8484'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
background-size: cover;
background-repeat: no-repeat;
content: "";
height: 48px;
width: 48px;
}
.css-1qpmsp4 > div > div:nth-of-type(3) > div button.css-wgxnqr:hover::after {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background-clip: text;
bottom: 72px;
color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
content: "Pause conversation";
font-size: 18px;
line-height: 18px;
left: 10px;
text-indent: 0;
position: fixed;
}
}
if continueconvmanual || continueconvmanualcenter {
.css-nxakwj {
margin-bottom: 0 !important;
}
.css-1vt9rnf {
max-width: 100%;
padding-bottom: 2em;
width: 100%;
}
.css-qwhftf,
.css-qwhftf img {
height: auto;
width: 100px;
}
}
if continueconvmanualcenter {
.css-1vhh1fe {
justify-content: center;
}
}
/* Recalled memories icon on right and bigger */
.css-yhhl9h:not(:has([aria-label="Create new scenario"])) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > button[aria-label="show recalled memories"] {
right: -3.75em !important;
}
.css-yhhl9h:has([aria-label="Create new scenario"]) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) button {
right: -8.5em !important;
}
.css-1dhayxc button svg,
.css-yhhl9h button svg {
height: 36px;
width: 36px;
}
.css-4qwruq:has([aria-label="Create new scenario"]) {
.css-1dhayxc,
.css-yhhl9h {
padding-top: 2em !important;
}
}
/* Shadow at top of chat */
if bgshadow {
.css-1qpmsp4 > div {
position: relative;
}
.css-1qpmsp4 > div::before {
background: linear-gradient(to bottom, bgshadowcolor, transparent);
left: 0;
content: "";
height: 5em;
position: absolute;
right: calc(36px + 1.1em);
top: 0;
z-index: 10;
}
}
}
@-moz-document url-prefix("https://kindroid.ai/selfies") {
/* =======================================================
Selfies page
======================================================= */
/* Wide */
.css-ecz5ih {
max-width: 100vw;
}
/* ===== Header with kin name ===== */
.css-ecz5ih > div:nth-of-type(1) {
padding: 1em;
}
/* Kin's name block */
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) {
height: 80px;
position: relative;
}
/* Kin's name */
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div {
left: 50%;
position: absolute;
text-align: center;
top: 10%;
transform: translate(-50%);
width: max-content;
}
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div,
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div {
color: var(--chakra-colors-secondaryWhite);
font-size: fontsize;
line-height: 1.5;
margin: 0 auto;
text-align: center;
width: fit-content;
}
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div {
color: var(--chakra-colors-yellow-400);
}
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div u {
text-decoration: none;
}
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div::after,
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div::before {
color: var(--chakra-colors-yellow-400);
content: " $ ";
}
/* Engine */
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(1) p::before {
color: var(--chakra-colors-secondaryWhite);
content: "Engine ";
font-size: fontsize;
line-height: 1.5;
}
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(1) p {
color: var(--chakra-colors-secondaryWhite);
font-size: fontsize;
line-height: 1.5;
padding-top: .5em;
}
/* Labels and date icons */
.css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(4) {
gap: 1em;
justify-content: flex-end;
margin-left: auto;
margin-top: auto;
width: fit-content;
}
/* Tags */
.css-1lemfya {
display: flex;
justify-content: flex-end;
}
[aria-label="Add tag"] {
font-size: 0;
order: 1;
}
[aria-label="Add tag"]::before {
border-radius: var(--chakra-radii-full);
color: var(--ion-color-success);
content: "+ Add tag";
font-family: var(--chakra-fonts-PoppinsRegular);
font-size: fontsize;
font-weight: var(--chakra-fontWeights-semibold);
line-height: 18px;
margin-left: var(--chakra-space-1);
opacity: 1;
padding: var(--chakra-space-2) var(--chakra-space-3);
}
[aria-label="Filter for no tags"] {
font-size: 0;
opacity: 1;
order: 2;
}
[aria-label="Filter for no tags"]::before {
background: var(--chakra-colors-gray);
border-radius: var(--chakra-radii-full);
color: var(--chakra-colors-white);
content: "🚫 Untagged\00a0";
font-family: var(--chakra-fonts-PoppinsRegular);
font-size: fontsize;
font-weight: var(--chakra-fontWeights-semibold);
line-height: 18px;
margin-right: var(--chakra-space-1);
opacity: 1;
padding: var(--chakra-space-2) var(--chakra-space-3);
}
[aria-label="Filter for no tags"]:hover {
text-decoration: none;
}
.css-1lemfya > div > div > span {
order: 3;
}
.css-1lemfya > div > div > span > span {
font-size: fontsize;
}
[aria-label="Manage tag"] {
color: var(--chakra-colors-white);
font-size: fontsize;
opacity: 1;
padding-bottom: .2em;
}
/* History */
.css-m598ao {
align-items: center;
display: flex;
gap: 1em;
flex-wrap: wrap;
justify-content: end;
}
.css-m598ao > p {
margin-bottom: 0;
}
.css-m598ao .react-datepicker__tab-loop {
flex-basis: 100%;
width: 100%;
}
.css-m598ao .react-datepicker-popper:not(svg) {
display: flex;
justify-content: end;
position: static !important;
transform: none !important;
}
.css-m598ao .react-datepicker-popper > svg {
bottom: calc(100% - 55px) !important;
left: auto !important;
right: 5.5%;
}
/* Request selfie */
.css-ecz5ih:has(form) {
.css-poz1rt {
display: none
}
}
.css-105olw3 {
max-height: calc(100vh - 60px);
overflow: hidden;
padding: 2em;
position: relative;
width: 100%;
}
/* Split if need */
body:has(.css-1wmhst1) {
.css-105olw3 > div,
.css-105olw3 > p {
max-width: 50%;
}
}
.css-105olw3 > div,
.css-105olw3 > p {
font-size: fontsize;
line-height: 1.5;
}
/* Advanced */
.css-1v3caum > div > button p {
font-size: calc(var(--fontsize) + .2rem) !important;
}
.css-1v3caum > div > button svg {
display: none;
}
.css-1v3caum > div > div {
display: block !important;
height: auto !important;
opacity: 1 !important;
}
/* Pose/Style reference */
.css-105olw3 > .css-1wmhst1 {
display: flex;
flex-direction: column;
margin-left: auto;
position: absolute;
top: 0;
max-width: 25% !important;
}
.css-105olw3 > div:nth-of-type(2):not(.css-1v3caum) {
margin-left: 27%;
}
.css-105olw3 > div:nth-of-type(3) {
right: 0;
}
.css-1wmhst1 > .css-r4izcz {
display: flex;
justify-content: center;
width: 400px;
}
.css-105olw3 > .css-j0qw52 {
position: absolute;
right: 1em;
top: 500px;
min-width: 46%;
}
/* Request selfie avatar settings */
.css-de3hrx,
.css-dfpqc0,
.css-79elbk > img:not(.css-z9m7im,.css-1b8e0hb):hover,
.css-dfpqc0 > img:hover {
height: auto !important;
}
.css-1jcj2pk {
color: white;
}
/* Enhance prompt */
.css-105olw3 [aria-label="Enhance prompt"] {
top: 50%;
transform: translateY(-50%);
}
/* Enhance prompt modal */
body:not(:has([aria-label="Swap 1 and 2"])) {
.css-yqn6dm .css-5prrkc {
font-size: fontsize;
line-height: 1.5;
}
/* Split */
.css-yqn6dm > div > div > p:nth-of-type(3),
.css-yqn6dm > div > div > p:nth-of-type(4),
.css-yqn6dm > div > div > div:nth-of-type(1),
.css-yqn6dm > div > div > div:nth-of-type(3) {
max-width: 43% !important;
width: 43% !important;
}
.css-yqn6dm > div > div > div:nth-of-type(2) {
flex-direction: column;
left: 44.5%;
position: absolute;
top: 9em;
width: 10%
}
/* Original prompt title */
.css-yqn6dm > div > div > p:nth-of-type(3) {
text-align: center;
}
/* Arrows */
.css-yqn6dm > div > div > div:nth-of-type(2) svg {
margin: 0;
padding: 0;
transform: rotate(-90deg) !important;
}
/* Enhance button */
.css-yqn6dm > div > div > div:nth-of-type(2) > button {
margin: 2em auto !important;
}
/* Enhanced prompt title */
.css-yqn6dm > div > div > p:nth-of-type(4) {
position: absolute;
right: 1.5em;
text-align: center;
top: 6em;
}
/* Enhanced prompt */
.css-yqn6dm > div > div > div:nth-of-type(3) {
position: absolute;
right: 1.5em;
top: 9em;
}
/* Adopt enhanced prompt */
[aria-label="Adopt enhanced prompt"] {
align-self: center;
width: fit-content;
}
}
/* Request group selfie modal */
body:has([aria-label="Swap 1 and 2"]),
body:has([aria-label="Swap 1 and 2"]):has([aria-label="Swap 2 and 3"]) {
/* + icons */
.css-yqn6dm > div > div > div:nth-of-type(2) > div:nth-of-type(1) > div > div > svg,
.css-yqn6dm > div > div > div:nth-of-type(2) > div:nth-of-type(2) > div > div > svg,
.css-yqn6dm > div > div > div:nth-of-type(2) > div:nth-of-type(3) > div > div > svg{
height: 4em;
width: 4em;
}
.css-yqn6dm > div > div > div:nth-of-type(2) > div:nth-of-type(1) > div > div >img,
.css-yqn6dm > div > div > div:nth-of-type(2) > div:nth-of-type(2) > div > div >img,
.css-yqn6dm > div > div > div:nth-of-type(2) > div:nth-of-type(3) > div > div >img {
border-radius: 1em;
}
}
body:has([aria-label="Swap 1 and 2"]) {
.css-yqn6dm .css-a2vsmm,
.css-yqn6dm .css-5prrkc,
.css-yqn6dm .css-1apmuvy {
font-size: fontsize;
line-height: 1.5;
}
/* Avatar selection */
.css-yqn6dm > div > div > div:nth-of-type(2) {
justify-content: center;
}
.css-yqn6dm > div > div > div:nth-of-type(2) > div {
max-width: 25%;
}
.css-yqn6dm > div > div > div:nth-of-type(2) > div > p {
text-align: center;
}
/* Swap icon */
.css-yqn6dm > div > div > div:nth-of-type(2) > button {
padding: 2em;
width: 10%;
}
.css-yqn6dm > div > div > div:nth-of-type(2) > button > svg {
height: 4em !important;
width: 4em !important;
}
/* Enhance overall prompt */
[aria-label="Enhance overall prompt"] {
top: 50%;
transform: translateY(-50%);
}
/* Additional controls */
.css-yqn6dm > div > div > div:nth-of-type(4) > div > button > p > svg {
display: none;
}
.css-yqn6dm > div > div > div:nth-of-type(4) > div > div {
display: block !important;
height: auto !important;
opacity: 1 !important;
}
.css-yqn6dm > div > div > div:nth-of-type(4) > div > div > div > div {
margin-bottom: 0 !important;
}
/* Request selfie button in modal */
[aria-label="Request selfie"] {
align-self: center;
width: fit-content;
}
}
[aria-label="Request selfie"] {
align-self: center;
width: fit-content;
}
/* Request selfie button */
.css-ae75s5 {
display: flex;
justify-content: center;
min-width: 100vw;
}
[aria-label="Submit selfie request"] {
width: max-content;
}
/* ===== Photos Gallery ===== */
.css-ezgmhy {
gap: 1em;
height: 100vh;
justify-content: center;
padding-bottom: 1em;
padding-top: 1em;
min-width: 100vw;
z-index: 9998 !important;
}
.css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(1) > button::before,
.css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(2) > button::before {
content: "";
display: inline-block;
height: 1em;
margin-right: .3em;
vertical-align: middle;
width: 1em;
}
.css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(1) > .css-17fx8iq::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect x='48' y='80' width='416' height='352' rx='48' ry='48' fill='none' stroke='white' stroke-linejoin='round' stroke-width='32'/%3E%3Ccircle cx='336' cy='176' r='32' fill='none' stroke='white' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M304 335.79l-90.66-90.49a32 32 0 00-43.87-1.3L48 352M224 432l123.34-123.34a32 32 0 0143.11-2L464 368' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E") no-repeat;
}
.css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(1) > .css-18d42jr::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect x='48' y='80' width='416' height='352' rx='48' ry='48' fill='none' stroke='rgba(255, 255, 255, 0.48)' stroke-linejoin='round' stroke-width='32'/%3E%3Ccircle cx='336' cy='176' r='32' fill='none' stroke='rgba(255, 255, 255, 0.48)' stroke-miterlimit='10' stroke-width='32'/%3E%3Cpath d='M304 335.79l-90.66-90.49a32 32 0 00-43.87-1.3L48 352M224 432l123.34-123.34a32 32 0 0143.11-2L464 368' fill='none' stroke='rgba(255, 255, 255, 0.48)' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E") no-repeat;
}
.css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(2) > .css-17fx8iq::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M374.79 308.78L457.5 367a16 16 0 0022.5-14.62V159.62A16 16 0 00457.5 145l-82.71 58.22A16 16 0 00368 216.3v79.4a16 16 0 006.79 13.08z' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath d='M268 384H84a52.15 52.15 0 01-52-52V180a52.15 52.15 0 0152-52h184.48A51.68 51.68 0 01320 179.52V332a52.15 52.15 0 01-52 52z' fill='none' stroke='white' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E") no-repeat;
}
.css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(2) > .css-18d42jr::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M374.79 308.78L457.5 367a16 16 0 0022.5-14.62V159.62A16 16 0 00457.5 145l-82.71 58.22A16 16 0 00368 216.3v79.4a16 16 0 006.79 13.08z' fill='none' stroke='rgba(255, 255, 255, 0.48)' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath d='M268 384H84a52.15 52.15 0 01-52-52V180a52.15 52.15 0 0152-52h184.48A51.68 51.68 0 01320 179.52V332a52.15 52.15 0 01-52 52z' fill='none' stroke='rgba(255, 255, 255, 0.48)' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E") no-repeat;
}
.css-ezgmhy > div:not(.css-13kzz3x),
.css-ezgmhy > div:not(.css-13kzz3x) > div:nth-of-type(1),
.css-kuf6b {
border-radius: 1em;
height: auto;
max-height: 300px;
max-width: 300px;
width: 300px;
}
.css-hnnoj4:has(.css-jy2vee) {
cursor: help !important;
}
/* ===== Video Gallery ===== */
body:has(.css-koo3fz) {
.css-ecz5ih > div:nth-of-type(1) {
padding: 1em 1em 2em;
}
}
/* ===== Photo & video selfie modal ===== */
/* Arrows */
.css-fskrnz > div > div:nth-of-type(1) > button svg {
fill: var(--chakra-colors-white);
height: 40px;
width: 40px;
}
.css-fskrnz > div > div:nth-of-type(1) > button:hover svg {
fill: var(--chakra-colors-white);
transform: scale(1.5);
transition: transform 0.2s ease, fill 0.2s ease;
}
/* 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:first-child > p {
color: var(--chakra-colors-secondaryWhite);
}
.css-fskrnz > header > div > div > div > button:last-child > p {
color: var(--chakra-colors-red);
}
/* ===== Photo selfie modal ===== */
.css-fskrnz:not(:has(video)) {
height: 811px;
width: 80%;
}
.css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) {
border-radius: 0 0 0 1em;
bottom: 0;
height: 775px;
left: 0;
margin-bottom: 0;
position: absolute;
width: auto;
}
.css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) > div {
border-radius: 0 0 0 1em;
}
/* Prompt */
.css-fskrnz:not(:has(video)) > div > div:nth-of-type(2) {
margin-left: 52.5%;
max-height: max-content;
}
.css-fskrnz:not(:has(video)) > div > div:nth-of-type(2) > div > p {
font-size: fontsize;
margin-top: 4rem;
text-align: justify;
word-break: normal;
}
/* Date */
.css-fskrnz:not(:has(video)) > div > div:nth-of-type(2) > p {
color: var(--chakra-colors-secondaryWhite);
font-size: fontsize;
position: absolute;
right: 1.5em;
top: 3em;
}
/* Copy prompt */
.css-fskrnz:not(:has(video)) > div > div:nth-of-type(2) > div > p > button {
display: inline-block;
font-size: fontsize;
position: absolute;
text-decoration: none;
top: 3em;
}
.css-fskrnz:not(:has(video)) > div > div:nth-of-type(2) > div > p > button:hover::after {
content: "Copy prompt";
font-size: fontsize;
top: -.2em;
padding-left: .3em;
pointer-events: auto;
position: absolute;
}
/* ===== Video selfie modal ===== */
.css-fskrnz:has(video) {
height: 821px;
width: 775px;
}
.css-fskrnz:has(video) > div > div:nth-of-type(1) {
border-radius: 0 0 1em 1em;
height: auto;
width: 775px;
}
.css-fskrnz:has(video) video {
border-radius: 0 0 1em 1em;
}
/* Header */
.css-fskrnz:has(video) > header {
min-height: 46px;
padding-top: 5px;
}
/* Date */
.css-fskrnz:has(video) > div > div:nth-of-type(2) > p {
color: var(--chakra-colors-secondaryWhite);
font-size: fontsize;
position: fixed;
left: 50%;
transform: translateX(-50%);
top: 3em;
}
/* ===== Customizations ===== */
/* Blur content */
if blurcontent {
/* Hide prompt */
.css-fskrnz > div > div:nth-of-type(2) > div p {
position: relative;
visibility: hidden;
}
.css-fskrnz > div > div:nth-of-type(2) > div p > button {
display: inline-block;
font-size: fontsize;
position: fixed !important;
text-decoration: none;
top: 5.5em !important;
visibility: visible;
}
.css-fskrnz > div > div:nth-of-type(2) > div p::before {
color: inherit;
content: "Hidden Text";
font-family: var(--chakra-fonts-PoppinsRegular);
font-size: 3em;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
visibility: visible;
white-space: nowrap;
}
/* Hide images/videos */
.css-ezgmhy img,
.css-ezgmhy video {
height: 0;
padding-left: 300px;
padding-top: 300px;
width: 0;
}
.css-ezgmhy img {
background: url("https://placehold.co/300x300?text=Hidden+image") no-repeat;
}
.css-ezgmhy video {
background: url("https://placehold.co/300x300?text=Hidden+video") no-repeat;
}
/* Hide arrows in modal */
.css-fskrnz > div > div:nth-of-type(1) > button {
display: none;
}
/* Hide images/videos in modal */
.css-fskrnz img,
.css-fskrnz video {
height: 0;
padding-left: 775px;
padding-top: 775px;
width: 0;
}
.css-fskrnz img {
background: url("https://placehold.co/775x775?text=Hidden+image") no-repeat;
}
.css-fskrnz video {
background: url("https://placehold.co/775x775?text=Hidden+video") no-repeat;
}
}
/* Image border on hover */
if imageborder {
.css-1vuqv5m,
.css-1regj17 {
border-radius: 16px;
}
.css-1vuqv5m > .css-1regj17:hover {
height: 100%;
width: 100%;
}
.css-3vu8ng > .css-1regj17,
.css-hnnoj4 > .css-1ekmhiq {
transition: 0.2s linear;
}
.css-3vu8ng > .css-1regj17:hover,
.css-hnnoj4 > .css-1ekmhiq:hover {
border-radius: 16px;
height: 300px;
width: 300px;
}
.css-3vu8ng:hover,
.css-hnnoj4:hover {
border-radius: 16px;
box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
rgba(139, 110, 255, 0.4) -5px 5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px -5px 5px 5px,
rgba(254, 133, 133, 0.4) 5px 5px 5px 5px;
transition: 0.2s linear;
}
}
/* 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-white);
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;
}
/* Request selfie button at the top */
if requestselfie {
.css-vmfips,
.css-12j2ye5 {
height: 60px !important;
left: 2.5em;
padding-bottom: 0;
position: absolute;
top: 1.5em;
}
body:has(.css-koo3fz) {
.css-vmfips,
.css-12j2ye5 {
top: 1.2em;
}
}
}
}
@-moz-document url-prefix("https://kindroid.ai/call") {
/* ====================================================
Call page
==================================================== */
/* Avatar */
.css-1nbfxil,
.css-17hv5wr {
aspect-ratio: 1 / 1;
height: calc(100% - 100px);
margin-top: 0;
min-width: 300px;
overflow: hidden;
width: fit-content;
}
.css-1jbvs8u,
.css-jk7dyx {
border: none;
border-radius: 1em;
box-sizing: border-box;
height: 100%;
margin: auto;
width: 100%;
}
.css-dv4mhk {
height: 120px;
width: 120px;
}
.css-1jbvs8u img,
.css-1jbvs8u video,
.css-jk7dyx img,
.css-jk7dyx video {
aspect-ratio: 1 / 1;
border: none;
border-radius: 1em;
height: 100%;
margin-top: 0;
max-width: 100%;
object-fit: contain;
object-position: center top;
width: auto;
}
.css-1jbvs8u video,
.css-jk7dyx video {
left: auto !important;
}
/* Remove background under avatar */
.css-1nbfxil > div:not(:last-child),
.css-17hv5wr > div:not(:last-child),
.css-1jbvs8u,
/* Remove purple circle when kin is talking */
.css-jk7dyx {
background: none;
}
/* Avoid scroll problem */
.css-11w64rs {
overflow: hidden;
}
/* Call controls bar */
.css-tolbod {
justify-content: space-between;
margin: 0 auto;
max-width: 757px;
}
.css-tolbod > .css-1en42kf:nth-child(1) {
justify-content: flex-start;
}
.css-tolbod > .css-1en42kf:nth-child(2) {
justify-content: center;
}
.css-tolbod > .css-1en42kf:nth-child(3) {
justify-content: flex-end;
}
/* Video, screenshare, captions */
.css-tolbod > .css-1en42kf > .css-15do4u8 {
flex-direction: row;
}
/* Buttons size */
.css-15do4u8 > div:nth-of-type(1) > div,
.css-15do4u8 > div:nth-of-type(2) {
height: 60px;
width: 60px;
}
/* Icons size in buttons */
.css-tolbod > .css-1en42kf > .css-15do4u8 svg {
height: 44px;
width: 44px;
}
/* Call controls when captions */
body:has(.css-1md15gg) {
.css-11w64rs {
column-gap: 1em;
flex-direction: row;
flex-wrap: wrap;
padding: 1em 1em 0 1em;
}
.css-1nbfxil,
.css-17hv5wr {
height: calc(100% - 100px);
width: 40%;
}
.css-1md15gg {
max-height: calc(100% - 100px);
min-height: calc(100% - 100px);
max-width: calc(60% - 1em);
}
.css-bdvhoj {
flex-basis: 100%;
min-height: 100px;
}
}
/* ===== Customizations ===== */
/* Avatar circle */
if avatarcircle {
.css-1jbvs8u {
border-radius: 50% !important;
}
}
/* Avatar choice */
if avatarchoice {
[alt="avatar"],
.css-1jbvs8u {
background: url(avatarchoiceurl) center center / cover no-repeat !important;
border: 0;
}
.css-1jbvs8u img {
display: none;
}
}
/* Avatar hover zoom */
if avatarhoverzoom {
.css-1jbvs8u > img:hover,
.css-1jbvs8u > video:hover {
aspect-ratio: 1 / 1;
border-radius: 0 !important;
max-height: 100vh !important;
min-height: 100vh !important;
left: 50% !important;
position: fixed !important;
top: 0 !important;
min-width: fit-content;
width: auto !important;
transform: translateX(-50%);
z-index: 99999 !important;
}
.css-z0osps {
z-index: 1;
}
if avatarchoice {
.css-1jbvs8u:hover {
aspect-ratio: 1 / 1;
border-radius: 0 !important;
max-height: 100vh !important;
min-height: 100vh !important;
left: 50% !important;
position: fixed !important;
top: 0 !important;
min-width: fit-content;
width: auto !important;
transform: translateX(-50%);
z-index: 99999 !important;
}
}
}
/* Background */
if (bgchoice=="heartbg") {
.css-16qnjy5 {
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") {
.css-16qnjy5 {
background: bgcolor !important;
}
}
if (bgchoice=="custombg") {
.css-16qnjy5 {
background: url(custombgurl) bgcolor no-repeat 100% !important;
background-size: cover !important;
}
}
/* Bigger screen sharing */
if biggerscreensharing {
body:has(canvas):has(.css-1md15gg) {
.css-6zx6rx,
.css-1r59iyy {
border-radius: 1em;
height: fit-content;
position: fixed;
top: 1em;
right: 1em;
transform: none !important;
width: auto;
}
.css-6zx6rx canvas,
.css-6zx6rx div,
.css-1r59iyy canvas,
.css-1r59iyy div {
aspect-ratio: 16 / 9;
border-radius: 1em;
max-height: fit-content;
max-width: 60vw;
}
.css-11w64rs {
column-gap: 1em;
flex-direction: row;
flex-wrap: wrap;
padding: 1em 1em 0 1em;
}
.css-1nbfxil {
max-width: 40vw;
width: 40vw;
}
.css-1nbfxil,
.css-17hv5wr {
height: calc(100% - 170px);
top: calc(60px + .5em);
left: -1.5em;
}
.css-1md15gg {
max-height: 29.5vh;
min-height: 29.5vh;
max-width: 60vw;
position: fixed;
bottom: 1em;
right: 1em;
}
.css-bdvhoj {
flex-basis: 100%;
min-height: 100px;
}
.css-tolbod {
justify-content: space-between;
margin: 0 auto;
max-width: 685px;
}
}
body:has(canvas) {
div.no-invert.react-draggable,
div.no-invert.react-draggable.react-draggable-dragged,
.css-6zx6rx,
.css-1r59iyy {
transform: none !important;
}
.css-1yh9u0r,
.css-13hpf8m {
border-radius: 1em;
height: fit-content !important;
width: 100% !important;
}
.css-6zx6rx,
.css-1r59iyy {
border-radius: 1em;
height: fit-content;
position: fixed;
top: calc(50% + 60px);
right: 1em;
transform: translate(0, calc(-50% - 60px)) !important;
width: auto;
}
.css-6zx6rx canvas,
.css-6zx6rx div,
.css-1r59iyy canvas,
.css-1r59iyy div {
aspect-ratio: 16 / 9;
border-radius: 1em;
max-height: fit-content;
max-width: 1160px;
}
.css-6zx6rx canvas,
.css-1r59iyy canvas {
object-fit: contain;
}
if screensharezoom {
.css-6zx6rx canvas,
.css-1r59iyy canvas {
object-fit: cover;
}
}
/* Avatar position */
.css-1nbfxil {
height: calc(100% - 160px);
left: 16px;
position: fixed;
}
/* Call control position */
.css-tolbod {
bottom: 0;
position: fixed;
}
}
}
}
@-moz-document regexp("(chrome|moz)-extension://.+") {
html:has([href*="domain=kindroid.ai"]):has(label:nth-of-type(53):last-of-type) {
/* Input content */
#stylus-popup #message-box .config-body > label input {
border-radius: .5em;
text-align: center;
}
/* Range */
#stylus-popup #message-box .config-body > label span:nth-of-type(2) {
text-align: right;
}
/* Color picker size */
#stylus-popup #message-box .config-body > label .colorview-swatch,
#stylus-popup #message-box .config-body > label .colorview-swatch a,
#stylus-popup #message-box .config-body > label .colorview-swatch::before {
border-radius: .5em;
}
/* Select size */
#stylus-popup #message-box .config-body > label select {
border-radius: .5em;
text-align: center;
}
/* Fake spaces to improve presentation */
#stylus-popup #message-box .config-body > label:nth-of-type(1) input,
#stylus-popup #message-box .config-body > label:nth-of-type(12) input,
#stylus-popup #message-box .config-body > label:nth-of-type(18) input,
#stylus-popup #message-box .config-body > label:nth-of-type(22) input,
#stylus-popup #message-box .config-body > label:nth-of-type(45) input,
#stylus-popup #message-box .config-body > label:nth-of-type(48) input,
#stylus-popup #message-box .config-body > label:nth-of-type(51) input {
height: 0;
max-width: 0;
min-width: 0;
opacity: 0;
padding: 0;
pointer-events: none;
width: 0;
}
/* Avoid move when click on fake titles */
#stylus-popup #message-box .config-body > label:nth-of-type(1),
#stylus-popup #message-box .config-body > label:nth-of-type(12),
#stylus-popup #message-box .config-body > label:nth-of-type(18),
#stylus-popup #message-box .config-body > label:nth-of-type(22),
#stylus-popup #message-box .config-body > label:nth-of-type(45),
#stylus-popup #message-box .config-body > label:nth-of-type(48),
#stylus-popup #message-box .config-body > label:nth-of-type(51) {
pointer-events: none;
}
/* Bigger lines for fake titles */
#stylus-popup #message-box .config-body > label:nth-of-type(1) *,
#stylus-popup #message-box .config-body > label:nth-of-type(12) *,
#stylus-popup #message-box .config-body > label:nth-of-type(18) *,
#stylus-popup #message-box .config-body > label:nth-of-type(22) *,
#stylus-popup #message-box .config-body > label:nth-of-type(45) *,
#stylus-popup #message-box .config-body > label:nth-of-type(48) *,
#stylus-popup #message-box .config-body > label:nth-of-type(51) * {
line-height: 3;
}
/* Center fake titles */
#stylus-popup #message-box .config-body > label:nth-of-type(1) span,
#stylus-popup #message-box .config-body > label:nth-of-type(12) span,
#stylus-popup #message-box .config-body > label:nth-of-type(18) span,
#stylus-popup #message-box .config-body > label:nth-of-type(22) span,
#stylus-popup #message-box .config-body > label:nth-of-type(45) span,
#stylus-popup #message-box .config-body > label:nth-of-type(48) span,
#stylus-popup #message-box .config-body > label:nth-of-type(51) span {
margin-right: 0;
min-width: 100%;
text-align: center;
}
}
}
