Sleazy Fork is available in English.

Kindroid responsive + customizations v4.xx

Kindroid website is more suitable for wide screens + add customizations (theme) + add new features (scripts).

  1. /* ==UserStyle==
  2. @name Kindroid responsive + customizations v4.xx
  3. @description Kindroid website is more suitable for wide screens + add customizations (theme) + add new features (scripts).
  4. @version 4.1.31
  5. @author BreatFR (https://breat.fr)
  6. @namespace https://gitlab.com/breatfr
  7. @homepageURL https://gitlab.com/breatfr/kindroid
  8. @supportURL https://discord.gg/fSgDHmekfG
  9. @license BY-NC-ND; https://creativecommons.org/licenses/by-nc-nd/4.0/
  10. @preprocessor stylus
  11.  
  12. @var text separator1 "🌐 WHOLE WEBSITE 🌐" "_"
  13. @var checkbox adaptablemodals "Adaptable modals" 0
  14. @var range avatarbrightness "Avatar brightness" [1, 0, 2, .1]
  15. @var range avatarcontrast "Avatar contrast" [1, 0, 2, .1]
  16. @var select avatarflip "Avatar flip" {
  17. "Default": "avatarflipdefault",
  18. "Horizontally": "avatarfliphorizontally",
  19. "Vertically": "avatarflipvertically",
  20. "Horizontally & Vertically": "avatarfliphorizontallyvertically"
  21. }
  22. @var range avatargrayscale "Avatar grayscale" [0, 0, 100, 1, '%']
  23. @var checkbox avatarhoverzoom "Avatar hoverzoom" 0
  24. @var range avatarinvert "Avatar invert colors (set 1 for light mode users)" [0, 0, 1, 1]
  25. @var select avatarmixblend "Avatar mix blend" {
  26. "Default": "avatarmixdefault",
  27. "Color": "avatarmixcolor",
  28. "Color-burn": "avatarmixcolorburn",
  29. "Color-dodge": "avatarmixcolordodge",
  30. "Darken": "avatarmixdarken",
  31. "Difference": "avatarmixdifference",
  32. "Exclusion": "avatarmixexclusion",
  33. "Hard-light": "avatarmixhardlight",
  34. "Hue": "avatarmixhue",
  35. "Lighten": "avatarmixlighten",
  36. "Luminosity": "avatarmixluminosity",
  37. "Multiply": "avatarmixmultiply",
  38. "Overlay": "avatarmixoverlay",
  39. "Plus-lighter": "avatarmixpluslighter",
  40. "Saturation": "avatarmixsaturation",
  41. "Screen": "avatarmixscreen",
  42. "Soft-light": "avatarmixsoftlight"
  43. }
  44. @var range avataropacity "Avatar opacity" [1, .1, 1, .1]
  45. @var range avatarrotate "Avatar rotate" [0, -360, 360, 1, 'deg']
  46. @var select avatarstyles "Avatar styles" {
  47. "Default": "avatardefault",
  48. "Alien": "avataralien",
  49. "Apple": "avatarapple",
  50. "Atom": "avataratom",
  51. "Bookmark": "avatarbookmark",
  52. "Cannabis": "avatarcannabis",
  53. "Chat bubble": "avatarchatbubble",
  54. "Chef hat": "avatarchefhat",
  55. "Circle": "avatarcircle",
  56. "Cloud": "avatarcloud",
  57. "Cog": "avatarcog",
  58. "Crystal": "avatarcrystal",
  59. "Devil": "avatardevil",
  60. "Gem": "avatargem",
  61. "Ghost": "avatarghost",
  62. "Gift": "avatargift",
  63. "Heart": "avatarheart",
  64. "Octagon": "avataroctagon",
  65. "Oval H": "avatarovalh",
  66. "Oval V": "avatarovalv",
  67. "Pentagon": "avatarpentagon",
  68. "Rabbit": "avatarrabbit",
  69. "Ratio": "avatarratio",
  70. "Rectangle": "avatarrectangle",
  71. "Rectangle big": "avatarrectanglebig",
  72. "Shield": "avatarshield",
  73. "Ship wheel": "avatarshipwheel",
  74. "Shirt": "avatarshirt",
  75. "Slime": "avatarslime",
  76. "Smartphone": "avatarsmartphone",
  77. "Squircle": "avatarsquircle",
  78. "Star": "avatarstar",
  79. "Tablet": "avatartablet",
  80. "Tree deciduous": "avatartreedeciduous",
  81. "Tree pine": "avatartreepine",
  82. "Triangle": "avatartriangle",
  83. "Venetian mask": "avatarvenetianmask"
  84. }
  85. @var range avatarzoom "Avatar zoom" [1, 0, 3, .1]
  86. @var color backgroundcolor "Background color" #101010
  87. @var text backgroundurl "Background URL (set 2 simple or double quotes without link to remove image)" '"https://gitlab.com/breatfr/kindroid/-/raw/main/images/heart-pattern.png"'
  88. @var checkbox blurcontent "Blur content" 0
  89. @var select fontfamily "Font family" {
  90. "Default": "fontfamilydefault",
  91. "Bello Script": "fontfamilybello",
  92. "Cascadia Code": "fontfamilycascadiacode",
  93. "Montserrat": "fontfamilymontserrat",
  94. "Noto Sans": "fontfamilynotosans",
  95. "Roboto": "fontfamilyroboto",
  96. "Ubuntu": "fontfamilyubuntu",
  97. "Varela Round": "fontfamilyvarelaround"
  98. }
  99. @var text fontsize "Font size" 1.2rem
  100. @var checkbox hidediscord "Hide new discord banner" 0
  101. @var checkbox hidescrollbars "Hide scrollbars" 1
  102. @var checkbox hidetrialbar "Hide trial bar" 1
  103.  
  104.  
  105. @var text separator2 "💬 CHAT PAGE & MAIN MENU 🛠️" "_"
  106. @var checkbox avataronrightside "Avatar on right side" 0
  107. @var text avatarposition "Avatar position" 0px
  108. @var text avatarsize "Avatar size (set 0 to hide it)" 512px
  109. @var select fullbio "Full bio in Explore and Create Kin" {
  110. "Default": "fullbiodefault",
  111. "Always": "fullbioalways",
  112. "Active": "fullbioactive"
  113. }
  114.  
  115. @var checkbox hidebilling "Hide billing" 0
  116. @var checkbox hidekinsexplore "Hide kins with few infos in explore" 0
  117. @var checkbox hidesharing "Hide sharing" 0
  118. @var checkbox kmenuicon "K menu icon" 1
  119.  
  120.  
  121. @var text separator3 "💬 GROUPCHAT PAGE 💬" "_"
  122. @var checkbox continueconvauto "Continue conversation automatic" 1
  123. @var checkbox continueconvmanual "Continue conversation manual" 0
  124. @var checkbox continueconvmanualcenter "Continue conversation manual center" 0
  125.  
  126.  
  127. @var text separator4 "💬 CHAT & GROUPCHAT PAGES 💬" "_"
  128. @var select actionsstyle "Actions texts style" {
  129. "Default": "actionsdefault",
  130. "Asterisks": "asterisks",
  131. "Asterisks + bold": "asterisksbold",
  132. "Asterisks + bold + no italic": "asterisksboldnoitalic",
  133. "Bold": "bold",
  134. "Bold + no italic": "boldnoitalic",
  135. "No italic": "noitalic"
  136. }
  137. @var color actionscolor "  ↳ Actions texts color" rgb(136, 136, 136)
  138. @var color actionscolorforus "  ↳ Actions texts color for us" rgb(136, 136, 136)
  139. @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
  140. @var checkbox avatarchoiceforus "Avatar choice for us" 0
  141. @var text avatarchoiceforusurl "  ↳ Avatar choice for us URL" "URL between quotes"
  142. @var text avatarchatgroupsize "Avatar chat/group size" 162px
  143. @var checkbox bgshadow "Background shadow" 1
  144. @var color bgshadowcolor "Background shadow color" #101010
  145. @var color bubblesbgcolor "Bubbles background color" rgb(33, 27, 25)
  146. @var text bubblesbgurl "Bubbles background URL" "URL between quotes"
  147. @var color bubblesbgcolorforus "Bubbles background color for us" rgb(27, 28, 30)
  148. @var text bubblesbgurlforus "Bubbles background URL for us" "URL between quotes"
  149. @var color fontcolor "Font color" #cbcbcb
  150. @var color fontcolorforus "Font color for us" #cbcbcb
  151. @var checkbox hidechattingas "Hide chatting as" 0
  152. @var checkbox hidenames "Hide names in bubbles" 1
  153. @var checkbox manuallyedited "Manually edited" 1
  154. @var select systembubblesstyle "System bubbles style" {
  155. "Wide": "systembubbleswide",
  156. "Dark": "systembubblesdark"
  157. }
  158. @var range textareaopacity "Textarea opacity" [1, 0, 1, .1]
  159. @var range textareabgopacity "Textarea background opacity" [1, 0, 1, .1]
  160.  
  161.  
  162. @var text separator5 "💬 CHAT & CALL PAGES 📞" "_"
  163. @var checkbox avatarchoice "Avatar choice" 0
  164. @var text avatarchoiceurl "  ↳ Avatar choice URL" "URL between quotes"
  165.  
  166.  
  167. @var text separator6 "📷 SELFIE PAGE 📷" "_"
  168. @var checkbox imageborder "Image border on hover" 1
  169. @var checkbox requestselfie "Request selfie button at top" 1
  170.  
  171.  
  172. @var text separator7 "📞 CALL PAGE 📞" "_"
  173. @var checkbox biggerscreensharing "Bigger Screen Sharing" 0
  174. @var checkbox screensharezoom "  ↳ Bigger Screen Sharing zoomed" 0
  175.  
  176.  
  177. @var text separator8 "☢️ Experimental things ☢️" "_"
  178. @var checkbox experimentalavatarmoveanywhere "Avatar move anywhere" 0
  179. @var text experimentalavatarmoveanywhereleft "  ↳ Avatar move anywhere left" 50%
  180. @var text experimentalavatarmoveanywheretop "  ↳ Avatar move anywhere top" 50%
  181. @var checkbox experimentalmainmenu "Main menu" 1
  182. @var checkbox experimentalrequestselfie "Request selfie" 1
  183. ==/UserStyle== */
  184.  
  185. @-moz-document domain("kindroid.ai") {
  186. /* ===================================
  187. Whole kindroid domain
  188. =================================== */
  189. /* Versions */
  190. :root {
  191. --themeversionpc: 'TPC v4.1.31';
  192. --themeversionmobile: 'TM v1.0.7';
  193. --customavatarsgroupchat: 'CAG v1.0.1';
  194. --chatversionpc: 'CPC v2.0.19';
  195. --chatversionmobile: 'CM v2.0.19';
  196. --selfiesversionpc: 'SPC v2.0.4';
  197. --selfiesversionmobile: 'SM v2.0.4';
  198. --notepadversion: 'NP v2.0.4';
  199. --trversion: 'TR v2.0.2';
  200. --tvversion: 'TV v2.0.3';
  201. --author: ' by BreatFR (https://breat.fr)';
  202. --install1: ' usercssjs.breat.fr ';
  203. --install2: ' gitlab.com/breatfr/kindroid ';
  204. --space: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
  205. --support1: ' ko-fi.com/breatfr ';
  206. --support2: ' paypal.me/breat ';
  207. --avatarsize: avatarsize;
  208. --avatarchatgroupsize: avatarchatgroupsize;
  209. --avatarzoom: avatarzoom;
  210. --experimentalavatarmoveanywhereleft: experimentalavatarmoveanywhereleft;
  211. --experimentalavatarmoveanywheretop: experimentalavatarmoveanywheretop;
  212. --experimentalavatarmoveanywhereleft-neg: calc(-1 * var(--experimentalavatarmoveanywhereleft));
  213. --experimentalavatarmoveanywheretop-neg: calc(-1 * var(--experimentalavatarmoveanywheretop));
  214. --fontfamily: var(--chakra-fonts-PoppinsRegular);
  215. --fontsize: fontsize;
  216. }
  217.  
  218. @media screen and (min-width: 900px) {
  219. .css-x3odei::after,
  220. .css-z0osps::after {
  221. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  222. -webkit-background-clip: text;
  223. -moz-background-clip: text;
  224. background-clip: text;
  225. color: transparent;
  226. 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);
  227. display: inline-block;
  228. filter: invert(avatarinvert);
  229. font-family: var(--chakra-fonts-PoppinsRegular);
  230. font-size: 1.2rem;
  231. left: 0;
  232. pointer-events: none;
  233. position: absolute;
  234. text-align: center;
  235. top: 0;
  236. width: 100%;
  237. white-space: pre-line;
  238. }
  239. }
  240. /* Wide mode */
  241. body {
  242. box-sizing: border-box;
  243. max-height: 100vh;
  244. max-width: 100vw;
  245. overflow-y: hidden !important;
  246. position: relative;
  247. }
  248. /* New discord */
  249. body::before {
  250. background: var(--chakra-colors-primaryBlack);
  251. border-radius: 1em;
  252. box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
  253. rgba(139, 110, 255, 0.4) -5px 5px 5px 5px,
  254. rgba(254, 133, 133, 0.4) 5px -5px 5px 5px,
  255. rgba(254, 133, 133, 0.4) 5px 5px 5px 5px;
  256. color: var(--chakra-colors-primaryWhite);
  257. 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 This message will stay here, to give you fast access to important links, but you can show/hide it in theme settings.\A\A Link to get help and comments:\A- https://discord.gg/fSgDHmekfG\A\A To read the FAQs and Tutorials like "Set video as avatar or background" or "How to use the Animated Avatar Changer":\A- https://go.breat.fr/KindroidFAQs\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';
  258. display: block;
  259. font-family: var(--fontfamily);
  260. font-size: 1.75rem;
  261. left: 50%;
  262. max-height: 85vh;
  263. overflow-y: auto;
  264. padding: 1em;
  265. position: fixed;
  266. text-align: center;
  267. top: 50%;
  268. transform: translate(-50%, -50%);
  269. white-space: pre-line;
  270. width: 85vw;
  271. z-index: 9999;
  272. }
  273. if hidediscord {
  274. body::before {
  275. display: none;
  276. }
  277. }
  278.  
  279. /* Header background color */
  280. .css-x3odei,
  281. .css-z0osps {
  282. background-color: var(--chakra-colors-secondaryBlack) !important;
  283. max-width: 100%;
  284. padding: 0 1em !important;
  285. }
  286.  
  287. /* Fix settings word position and style in menu */
  288. .css-ji0zhw .css-1mwto65 {
  289. color: var(--chakra-colors-primaryWhite);
  290. font-family: var(--fontfamily);
  291. font-size: 36px !important;
  292. left: 4%;
  293. line-height: 54px;
  294. position: fixed;
  295. top: .2em;
  296. }
  297. .css-1b1fzbz .css-1mwto65 {
  298. display: none;
  299. }
  300.  
  301. /* Put icons in header clickable again */
  302. .css-x3odei > div:nth-of-type(1),
  303. .css-z0osps > div:nth-of-type(1) {
  304. z-index: 1;
  305. }
  306. /* Bigger text */
  307. .css-2aa4oa,
  308. .css-dhnoom,
  309. .css-1dhayxc *,
  310. .css-yhhl9h *,
  311. textarea {
  312. font-size: fontsize !important;
  313. line-height: 1.5 !important;
  314. }
  315. textarea::placeholder {
  316. font-size: fontsize !important;
  317. line-height: 1.5 !important;
  318. }
  319. /* Hide scrollbars */
  320. if hidescrollbars {
  321. *,
  322. :root ::-webkit-scrollbar {
  323. scrollbar-width: none !important;
  324. -ms-overflow-style: none !important;
  325. -moz-overflow-style: none !important;
  326. -webkit-overflow-style: none !important;
  327. }
  328. ::-webkit-scrollbar {
  329. display: none;
  330. width: 0;
  331. }
  332. }
  333.  
  334. /* Loading bar */
  335. #nprogress .bar {
  336. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  337. background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  338. filter: invert(avatarinvert);
  339. }
  340. /* Actions texts */
  341. if (actionsstyle=="actionsdefault") || actionscolor {
  342. .css-1dhayxc span {
  343. color: actionscolorforus !important;
  344. }
  345. .css-yhhl9h span {
  346. color: actionscolor !important;
  347. }
  348. }
  349. if (actionsstyle=="asterisks") {
  350. .css-1dhayxc span:before,
  351. .css-1dhayxc span:after,
  352. .css-yhhl9h span:before,
  353. .css-yhhl9h span:after {
  354. content: "*" !important;
  355. }
  356. }
  357. if (actionsstyle=="asterisksbold") {
  358. .css-1dhayxc span:before,
  359. .css-1dhayxc span:after,
  360. .css-yhhl9h span:before,
  361. .css-yhhl9h span:after {
  362. content: "*" !important;
  363. }
  364. .css-1dhayxc span,
  365. .css-yhhl9h span {
  366. font-weight: bold !important;
  367. }
  368. }
  369. if (actionsstyle=="asterisksboldnoitalic") {
  370. .css-1dhayxc span:before,
  371. .css-1dhayxc span:after,
  372. .css-yhhl9h span:before,
  373. .css-yhhl9h span:after {
  374. content: "*" !important;
  375. }
  376. .css-1dhayxc span,
  377. .css-yhhl9h span {
  378. font-style: normal !important;
  379. font-weight: bold !important;
  380. }
  381. }
  382. if (actionsstyle=="bold") {
  383. .css-1dhayxc span,
  384. .css-yhhl9h span {
  385. font-weight: bold !important;
  386. }
  387. }
  388. if (actionsstyle=="boldnoitalic") {
  389. .css-1dhayxc span,
  390. .css-yhhl9h span {
  391. font-style: normal !important;
  392. font-weight: bold !important;
  393. }
  394. }
  395. if (actionsstyle=="noitalic") {
  396. .css-1dhayxc span,
  397. .css-yhhl9h span {
  398. font-style: normal !important;
  399. }
  400. }
  401. /* Arrow back in header */
  402. .css-x3odei > div:nth-of-type(1) > button:nth-of-type(1) img,
  403. .css-z0osps > div > div:hover img {
  404. height: 60px;
  405. width: 60px;
  406. }
  407. .css-x3odei > div:nth-of-type(1) > button:nth-of-type(1):hover img,
  408. .css-z0osps > div > div:hover img {
  409. display: none;
  410. }
  411. .css-x3odei > div:nth-of-type(1) > button:nth-of-type(1):hover,
  412. .css-z0osps > div > div:hover {
  413. 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");
  414. filter: invert(avatarinvert);
  415. height: 60px;
  416. width: 60px;
  417. }
  418. /* Blur content */
  419. if blurcontent {
  420. /* email in menu */
  421. .css-e43fvd > p,
  422. /* Bubbles content */
  423. .css-1dhayxc .css-j7qwjs,
  424. .css-yhhl9h .css-j7qwjs,
  425. /* Shared links */
  426. .css-1dhayxc .css-fujl5p > div:nth-of-type(2) > p.css-dhnoom,
  427. .css-1dhayxc .css-116lnl0 > div:nth-of-type(2) > p.css-dhnoom,
  428. /* Voicecall captions */
  429. .css-1md15gg > div > p {
  430. position: relative;
  431. visibility: hidden;
  432. }
  433. .css-e43fvd > p::before,
  434. .css-1dhayxc .css-j7qwjs::before,
  435. .css-yhhl9h .css-j7qwjs::before,
  436. .css-1md15gg > div > p::before,
  437. .css-1dhayxc .css-fujl5p > div:nth-of-type(2) > p.css-dhnoom::before,
  438. .css-1dhayxc .css-116lnl0 > div:nth-of-type(2) > p.css-dhnoom::before {
  439. color: #cbcbcb;
  440. font-family: var(--fontfamily);
  441. left: 50%;
  442. position: absolute;
  443. top: 50%;
  444. transform: translate(-50%, -50%);
  445. visibility: visible;
  446. white-space: nowrap;
  447. }
  448. .css-e43fvd > p::before,
  449. .css-1dhayxc .css-j7qwjs::before,
  450. .css-yhhl9h .css-j7qwjs::before,
  451. .css-1md15gg > div > p::before {
  452. content: "Hidden Text";
  453. }
  454. .css-1dhayxc .css-fujl5p > div:nth-of-type(2) > p.css-dhnoom::before,
  455. .css-1dhayxc .css-116lnl0 > div:nth-of-type(2) > p.css-dhnoom::before {
  456. content: "Hidden Link";
  457. }
  458. .css-e43fvd > p::before {
  459. font-size: 1.3em;
  460. }
  461. .css-1dhayxc .css-j7qwjs::before,
  462. .css-yhhl9h .css-j7qwjs::before,
  463. .css-1md15gg > div > p::before {
  464. font-size: 2em;
  465. }
  466. /* Bubbles content */
  467. .css-1dhayxc .css-j7qwjs::before,
  468. .css-yhhl9h .css-j7qwjs::before,
  469. /* Voicecall captions */
  470. .css-1md15gg > div > p::before {
  471. font-size: 2em;
  472. }
  473. /* Images uploading and Images uploaded */
  474. .css-2jbc1u img,
  475. .css-1dhayxc img:not([src*="/_next/static/media/editIcon"]) {
  476. background: url("https://placehold.co/220x220?text=Hidden+image") no-repeat;
  477. height: 0;
  478. padding-left: 220px;
  479. padding-top: 220px;
  480. width: 0;
  481. }
  482. }
  483. /* Hide trial bar */
  484. if hidetrialbar {
  485. .css-r1nv3m {
  486. display: none;
  487. }
  488. }
  489. /* Hide chatting as */
  490. if hidechattingas {
  491. .css-b9bzmp .css-ev1i1k {
  492. display: none;
  493. }
  494. }
  495. /* Images uploaded */
  496. .css-2jbc1u img {
  497. margin-bottom: 1em;
  498. }
  499. .css-1dhayxc img:not([src*="/_next/static/media/editIcon"]) {
  500. border-radius: .5em;
  501. margin-left: auto;
  502. min-height: 183px;
  503. min-width: 220px;
  504. object-fit: contain;
  505. transition: translate 0.3s ease-in-out, transform 0.3s ease-in-out;
  506. }
  507. .css-1dhayxc img:not([src*="/_next/static/media/editIcon"]):hover {
  508. transform: scale(1.5);
  509. transform-origin: bottom right;
  510. z-index: 5 !important;
  511. }
  512. /* Manually edited */
  513. if manuallyedited {
  514. .css-fujl5p {
  515. position: relative;
  516. }
  517. .css-yhhl9h .css-fujl5p > div:nth-of-type(2) > p.css-dhnoom,
  518. .css-yhhl9h .css-116lnl0 > div:nth-of-type(2) > p.css-dhnoom {
  519. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  520. background-clip: text;
  521. color: transparent;
  522. filter: invert(avatarinvert);
  523. font-size: .9rem !important;
  524. margin-left: auto;
  525. text-align: right;
  526. }
  527. .css-yhhl9h .css-fujl5p > div:nth-of-type(2) > p.css-dhnoom::after,
  528. .css-yhhl9h .css-116lnl0 > div:nth-of-type(2) > p.css-dhnoom::after {
  529. content: 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");
  530. display: inline-block;
  531. height: .9rem;
  532. margin-left: .3em;
  533. width: .9rem;
  534. }
  535. .css-yhhl9h .css-fujl5p > div:nth-of-type(2) > p.css-dhnoom::before,
  536. .css-yhhl9h .css-116lnl0 > div:nth-of-type(2) > p.css-dhnoom::before {
  537. content: 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");
  538. display: inline-block;
  539. height: .9rem;
  540. margin-right: .3em;
  541. width: .9rem;
  542. }
  543. }
  544. /* Modals size */
  545. .chakra-modal__content {
  546. border-radius: 1em;
  547. box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
  548. rgba(139, 110, 255, 0.4) -5px 5px 5px 5px,
  549. rgba(254, 133, 133, 0.4) 5px -5px 5px 5px,
  550. rgba(254, 133, 133, 0.4) 5px 5px 5px 5px;
  551. height: auto;
  552. margin: auto;
  553. max-width: 90vw;
  554. min-height: fit-content;
  555. }
  556. /* Adaptable modals */
  557. if adaptablemodals {
  558. .chakra-modal__content {
  559. width: auto;
  560. }
  561. }
  562.  
  563. /* Modals's close button */
  564. [aria-label="close"] svg,
  565. [aria-label="Close"] svg {
  566. background: transparent;
  567. color: var(--chakra-colors-white);
  568. height: 20px;
  569. margin: 20px 20px 0 0;
  570. position: fixed;
  571. width: 20px;
  572. z-index: 9999;
  573. }
  574. [aria-label="close"]:hover::before,
  575. [aria-label="Close"]:hover::before {
  576. color: var(--chakra-colors-white);
  577. content: "Close";
  578. font-size: 20px;
  579. line-height: 20px;
  580. margin-right: 5.5%;
  581. margin-top: .85%;
  582. position: fixed;
  583. z-index: 9999;
  584. }
  585.  
  586. /* Not allowed cursor when needed */
  587. .chakra-spinner,
  588. * [disabled] {
  589. cursor: not-allowed;
  590. }
  591. /* Add border to textarea when focus */
  592. textarea:not([aria-label="Send message textarea"]):focus,
  593. input[aria-label="Code input"]:focus,
  594. input[placeholder="Enter seed"]:focus {
  595. border: 0;
  596. border-radius: 32px;
  597. box-shadow: rgba(139, 109, 255, 0.4) -2px -2px 2px 2px,
  598. rgba(139, 110, 255, 0.4) -2px 2px 2px 2px,
  599. rgba(254, 133, 133, 0.4) 2px -2px 2px 2px,
  600. rgba(254, 133, 133, 0.4) 2px 2px 2px 2px;
  601. }
  602. .css-79elbk:has(textarea[aria-label="Send message textarea"]:focus)::after {
  603. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  604. border-radius: 32px;
  605. content: "";
  606. filter: invert(avatarinvert);
  607. inset: -2px;
  608. position: absolute;
  609. z-index: -1;
  610. }
  611. .css-79elbk:has(textarea[aria-label="Send message textarea"]:focus)::before {
  612. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  613. border-radius: 32px;
  614. display: block;
  615. filter: invert(avatarinvert);
  616. inset: 0;
  617. opacity: .1;
  618. position: absolute;
  619. }
  620.  
  621. /* Remove the resize icon on textarea on chat page */
  622. textarea:not(:focus),
  623. textarea:focus {
  624. opacity: 1;
  625. resize: none;
  626. }
  627. /* Font family */
  628. if (fontfamily) == (fontfamilydefault) {
  629. * {
  630. font-family: var(--chakra-fonts-PoppinsRegular) !important;
  631. }
  632. }
  633. if (fontfamily) == (fontfamilybello) {
  634. @font-face {
  635. font-display: swap;
  636. font-family: "Bello Script";
  637. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Bello-Script.eot") format("eot"),
  638. url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Bello-Script.ttf") format("ttf"),
  639. url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Bello-Script.woff") format("woff"),
  640. url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Bello-Script.woff2") format("woff2");
  641. font-style: normal;
  642. font-weight: normal;
  643. }
  644. :root {
  645. --fontfamily: "Bello Script" !important;
  646. }
  647. * {
  648. font-family: "Bello Script" !important;
  649. }
  650. }
  651. if (fontfamily) == (fontfamilycascadiacode) {
  652. @font-face {
  653. font-display: swap;
  654. font-family: "Cascadia Code";
  655. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-Regular.otf") format("otf"),
  656. url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-Regular.ttf") format("ttf"),
  657. url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-Regular.woff2") format("woff2");
  658. font-style: normal;
  659. font-weight: normal;
  660. }
  661. @font-face {
  662. font-display: swap;
  663. font-family: "Cascadia Code";
  664. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-Bold.otf") format("otf"),
  665. url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-Bold.ttf") format("ttf"),
  666. url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-Bold.woff2") format("woff2");
  667. font-style: normal;
  668. font-weight: bold;
  669. }
  670. @font-face {
  671. font-display: swap;
  672. font-family: "Cascadia Code";
  673. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-BoldItalic.otf") format("otf"),
  674. url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-BoldItalic.ttf") format("ttf"),
  675. url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-BoldItalic.woff2") format("woff2");
  676. font-style: italic;
  677. font-weight: bold;
  678. }
  679. @font-face {
  680. font-display: swap;
  681. font-family: "Cascadia Code";
  682. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-Italic.otf") format("otf"),
  683. url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-Italic.ttf") format("ttf"),
  684. url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/CascadiaCode-Italic.woff2") format("woff2");
  685. font-style: italic;
  686. font-weight: normal;
  687. }
  688. :root {
  689. --fontfamily: "Cascadia Code" !important;
  690. }
  691. * {
  692. font-family: "Cascadia Code" !important;
  693. }
  694. }
  695. if (fontfamily) == (fontfamilymontserrat) {
  696. @font-face {
  697. font-display: swap;
  698. font-family: Montserrat;
  699. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Montserrat-Regular.ttf") format("ttf");
  700. font-style: normal;
  701. font-weight: normal;
  702. }
  703. @font-face {
  704. font-display: swap;
  705. font-family: Montserrat;
  706. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Montserrat-Bold.ttf") format("ttf");
  707. font-style: normal;
  708. font-weight: bold;
  709. }
  710. @font-face {
  711. font-display: swap;
  712. font-family: Montserrat;
  713. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Montserrat-BoldItalic.ttf") format("ttf");
  714. font-style: italic;
  715. font-weight: bold;
  716. }
  717. @font-face {
  718. font-display: swap;
  719. font-family: Montserrat;
  720. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Montserrat-Italic.ttf") format("ttf");
  721. font-style: italic;
  722. font-weight: normal;
  723. }
  724. :root {
  725. --fontfamily: Montserrat !important;
  726. }
  727. * {
  728. font-family: Montserrat !important;
  729. }
  730. }
  731. if (fontfamily) == (fontfamilynotosans) {
  732. @font-face {
  733. font-display: swap;
  734. font-family: "Noto Sans";
  735. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/NotoSans-Regular.ttf") format("ttf");
  736. font-style: normal;
  737. font-weight: normal;
  738. }
  739. @font-face {
  740. font-display: swap;
  741. font-family: "Noto Sans";
  742. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/NotoSans-Bold.ttf") format("ttf");
  743. font-style: normal;
  744. font-weight: bold;
  745. }
  746. @font-face {
  747. font-display: swap;
  748. font-family: "Noto Sans";
  749. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/NotoSans-BoldItalic.ttf") format("ttf");
  750. font-style: italic;
  751. font-weight: bold;
  752. }
  753. @font-face {
  754. font-display: swap;
  755. font-family: "Noto Sans";
  756. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/NotoSans-Italic.ttf") format("ttf");
  757. font-style: italic;
  758. font-weight: normal;
  759. }
  760. :root {
  761. --fontfamily: "Noto Sans" !important;
  762. }
  763. * {
  764. font-family: "Noto Sans" !important;
  765. }
  766. }
  767. if (fontfamily) == (fontfamilyroboto) {
  768. @font-face {
  769. font-display: swap;
  770. font-family: Roboto;
  771. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Roboto-Regular.ttf") format("ttf");
  772. font-style: normal;
  773. font-weight: normal;
  774. }
  775. @font-face {
  776. font-display: swap;
  777. font-family: Roboto;
  778. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Roboto-Bold.ttf") format("ttf");
  779. font-style: normal;
  780. font-weight: bold;
  781. }
  782. @font-face {
  783. font-display: swap;
  784. font-family: Roboto;
  785. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Roboto-BoldItalic.ttf") format("ttf");
  786. font-style: italic;
  787. font-weight: bold;
  788. }
  789. @font-face {
  790. font-display: swap;
  791. font-family: Roboto;
  792. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Roboto-Italic.ttf") format("ttf");
  793. font-style: italic;
  794. font-weight: normal;
  795. }
  796. :root {
  797. --fontfamily: Roboto !important;
  798. }
  799. * {
  800. font-family: Roboto !important;
  801. }
  802. }
  803. if (fontfamily) == (fontfamilyubuntu) {
  804. @font-face {
  805. font-display: swap;
  806. font-family: Ubuntu;
  807. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Ubuntu-Regular.ttf") format("ttf");
  808. font-style: normal;
  809. font-weight: normal;
  810. }
  811. @font-face {
  812. font-display: swap;
  813. font-family: Ubuntu;
  814. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Ubuntu-Bold.ttf") format("ttf");
  815. font-style: normal;
  816. font-weight: bold;
  817. }
  818. @font-face {
  819. font-display: swap;
  820. font-family: Ubuntu;
  821. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Ubuntu-BoldItalic.ttf") format("ttf");
  822. font-style: italic;
  823. font-weight: bold;
  824. }
  825. @font-face {
  826. font-display: swap;
  827. font-family: Ubuntu;
  828. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/Ubuntu-Italic.ttf") format("ttf");
  829. font-style: italic;
  830. font-weight: normal;
  831. }
  832. :root {
  833. --fontfamily: Ubuntu !important;
  834. }
  835. * {
  836. font-family: Ubuntu !important;
  837. }
  838. }
  839. if (fontfamily) == (fontfamilyvarelaround) {
  840. @font-face {
  841. font-display: swap;
  842. font-family: "Varela Round Regular";
  843. src: url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/VarelaRound-Regular.eot") format("eot"),
  844. url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/VarelaRound-Regular.ttf") format("ttf"),
  845. url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/VarelaRound-Regular.woff") format("woff"),
  846. url("https://gitlab.com/breatfr/kindroid/-/raw/main/fonts/VarelaRound-Regular.woff2") format("woff2");
  847. font-style: normal;
  848. font-weight: normal;
  849. }
  850. :root {
  851. --fontfamily: "Varela Round Regular" !important;
  852. }
  853. * {
  854. font-family: "Varela Round Regular" !important;
  855. }
  856. }
  857. /* Alerts */
  858. .chakra-toast__inner:has([data-status="error"]) {
  859. border: 0;
  860. box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
  861. rgba(139, 110, 255, 0.4) -5px 5px 5px 5px,
  862. rgba(254, 133, 133, 0.4) 5px -5px 5px 5px,
  863. rgba(254, 133, 133, 0.4) 5px 5px 5px 5px;
  864. filter: invert(avatarinvert);
  865. max-width: 80vw;
  866. }
  867. .chakra-alert__desc {
  868. margin-right: .5em;
  869. }
  870. }
  871.  
  872. @-moz-document url-prefix("https://kindroid.ai/home") {
  873. /* ====================================================
  874. Main menu
  875. ==================================================== */
  876. /* Wide main menu */
  877. .css-ji0zhw {
  878. width: 100vw;
  879. }
  880. /* Remove free space at the top of menu */
  881. .css-ji0zhw > div:nth-of-type(2),
  882. .css-ji0zhw > div:nth-of-type(2) > div:nth-of-type(1) {
  883. overflow-y: auto;
  884. }
  885. /* Reduce free space at the end of main menu pages */
  886. .css-1y6t5y9 {
  887. margin-bottom: 4em;
  888. }
  889. /* Pin kins/groups */
  890. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(1) > svg {
  891. fill: var(--chakra-colors-secondaryWhite);
  892. height: 2rem;
  893. width: 2rem;
  894. }
  895.  
  896. body:has(.css-11yc3yd) {
  897. /* Some spaces to be nicer */
  898. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(1) {
  899. margin: 2em auto;
  900. }
  901. .css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd {
  902. display: flex;
  903. flex-direction: column;
  904. height: auto;
  905. overflow-x: unset;
  906. width: 100%;
  907. }
  908. /* Keep drag and drop text visible */
  909. .css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > p {
  910. position: static;
  911. }
  912. /* avatars/groups list */
  913. .css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(1) > div,
  914. .css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(1) > div > div > div {
  915. display: flex;
  916. height: auto;
  917. max-width: 100px;
  918. width: 100px;
  919. justify-content: center;
  920. }
  921. .css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div > div > div > div > div,
  922. .css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div > div > div > div > div > img {
  923. height: 100px;
  924. width: 100px;
  925. }
  926. .css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > p,
  927. .css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div > div > div > p {
  928. font-size: fontsize;
  929. min-width: max-content;
  930. }
  931. [aria-label="remove-item"] svg {
  932. height: 1.5em;
  933. width: 1.5em;
  934. }
  935. .css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(1) {
  936. display: flex;
  937. flex-wrap: wrap;
  938. gap: 1em;
  939. height: auto;
  940. justify-content: space-evenly;
  941. order: 2;
  942. width: 100%;
  943. }
  944. .css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(1) > div {
  945. align-items: center;
  946. display: flex;
  947. flex: 0 1 calc(100% / 9);
  948. flex-direction: column;
  949. }
  950. .css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(2) {
  951. justify-content: space-evenly;
  952. margin: 2em auto;
  953. width: 100%;
  954. }
  955. }
  956. /* Edit button */
  957. body:has(.css-19zdxg6) {
  958. .css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(2) {
  959. background-color: rgba(255, 255, 255, 0.05);
  960. border-color: transparent;
  961. left: 1em;
  962. position: fixed;
  963. top: calc(48px + 2.75em);
  964. width: auto;
  965. }
  966. .css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(2) svg {
  967. fill: var(--chakra-colors-secondaryWhite);
  968. }
  969. .css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(2):hover svg {
  970. fill: var(--chakra-colors-white);
  971. }
  972. }
  973. /* Email box */
  974. body:has(.css-11yc3yd) {
  975. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(2) {
  976. margin-top: 0;
  977. position: fixed;
  978. right: 1em;
  979. top: calc(60px + 1em);
  980. }
  981. }
  982. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(2) {
  983. align-self: center;
  984. gap: 0;
  985. margin-top: 5%;
  986. padding-top: 0;
  987. }
  988. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(2) > div > div > p {
  989. color: var(--chakra-colors-secondaryWhite);
  990. padding-right: .5em;
  991. }
  992. /* Main content of menu */
  993. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) {
  994. flex-direction: row;
  995. flex-wrap: wrap;
  996. justify-content: center;
  997. min-height: 100%;
  998. width: 100%;
  999. }
  1000. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > button,
  1001. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div {
  1002. align-items: center;
  1003. box-sizing: border-box;
  1004. flex-basis: calc(33.33% - 20px);
  1005. justify-content: center;
  1006. margin: 10px;
  1007. }
  1008. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > button:hover,
  1009. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:hover {
  1010. background-color: rgba(255, 255, 255, 0.05);
  1011. border-radius: 1em;
  1012. }
  1013. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) {
  1014. justify-content: space-evenly;
  1015. width: 100%;
  1016. }
  1017. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) * {
  1018. font-size: 2rem;
  1019. }
  1020. /* Bottom links in menu */
  1021. .css-ji0zhw > div:nth-of-type(2) {
  1022. justify-content: space-evenly;
  1023. width: 100%;
  1024. }
  1025. .css-ji0zhw > div:nth-of-type(2) > h2 {
  1026. font-size: 1.2rem;
  1027. padding: .5em 1em;
  1028. }
  1029. .css-ji0zhw > div:nth-of-type(2) > h2:hover {
  1030. background-color: rgba(255, 255, 255, 0.05);
  1031. border-radius: 1em;
  1032. padding: .5em 1em;
  1033. }
  1034. /* Subcriber icon */
  1035. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(2) img {
  1036. height: auto !important;
  1037. width: 44px;
  1038. }
  1039. /* Put Biling in yellow */
  1040. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > button:last-child p {
  1041. color: var(--chakra-colors-yellow-400);
  1042. }
  1043. /* Billing error box */
  1044. .css-dixmdy {
  1045. background-color: #161616;
  1046. border: 1px solid #6c6c6c;
  1047. border-radius: 10px;
  1048. color: var(--chakra-colors-secondaryWhite);
  1049. }
  1050. /* Put Explore and Sharing & Referrals in purple */
  1051. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:nth-of-type(6) > p,
  1052. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:nth-of-type(7) > p {
  1053. color: rgb(139, 109, 255);
  1054. filter: invert(avatarinvert);
  1055. }
  1056.  
  1057. /* Put User Guide and Announcements and Terms in blue */
  1058. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:nth-of-type(8) > p,
  1059. .css-ji0zhw > div:nth-of-type(2) > h2:nth-of-type(1),
  1060. .css-ji0zhw > div:nth-of-type(2) > h2:nth-of-type(2) {
  1061. color: var(--chakra-colors-blue-400);
  1062. filter: invert(avatarinvert);
  1063. }
  1064.  
  1065. /* Put contact in green */
  1066. .css-ji0zhw > div:nth-of-type(2) > h2:nth-of-type(3) {
  1067. color: var(--chakra-colors-green-400);
  1068. filter: invert(avatarinvert);
  1069. }
  1070.  
  1071. /* Put Log out in orange */
  1072. .css-ji0zhw > div:nth-of-type(2) > h2:nth-of-type(4) {
  1073. color: var(--chakra-colors-orange);
  1074. filter: invert(avatarinvert);
  1075. }
  1076. .css-ji0zhw > div:nth-of-type(2) > h2:nth-of-type(4)::before {
  1077. 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='%23ff964a' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3C/svg%3E");
  1078. display: inline-block;
  1079. content: "";
  1080. margin-right: 5px;
  1081. height: 24px;
  1082. vertical-align: middle;
  1083. width: 24px;
  1084. }
  1085. /* ===== My kindroids ===== */
  1086. /* Reorder kins */
  1087. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(2) > button.css-1123s1d svg,
  1088. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(2) > button.css-1123s1d::before {
  1089. height: 40px;
  1090. }
  1091. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(2) > button.css-1123s1d::before {
  1092. align-items: center;
  1093. content: "Reorder Kindroids";
  1094. display: flex;
  1095. font-size: fontsize;
  1096. height: 40px;
  1097. margin-right: .3em;
  1098. }
  1099.  
  1100. /* Reorder kins/groups menu */
  1101. /* Kins list */
  1102. .css-1oc3ive {
  1103. align-items: center;
  1104. flex-flow: wrap;
  1105. gap: 1em;
  1106. justify-content: space-evenly;
  1107. padding-bottom: 0;
  1108. }
  1109. .css-1oc3ive > div:not(:first-child) {
  1110. height: auto;
  1111. order: 0;
  1112. width: 300px;
  1113. }
  1114. /* Create kin button */
  1115. .css-1oc3ive > div:first-child {
  1116. height: 100px;
  1117. justify-content: center;
  1118. position: fixed;
  1119. left: .5em;
  1120. top: 50%;
  1121. transform: translateY(calc(-50% - .5em));
  1122. width: 100px;
  1123. }
  1124. .css-1oc3ive > div:first-child > div > div {
  1125. font-size: 24px !important;
  1126. line-height: 24px;
  1127. margin-bottom: 0 !important;
  1128. }
  1129. .css-1oc3ive > div:first-child > div > p {
  1130. font-size: 0;
  1131. line-height: 24px;
  1132. }
  1133. .css-1oc3ive > div:first-child > div > p::before {
  1134. content: "Create kin";
  1135. font-size: 24px !important;
  1136. line-height: 24px;
  1137. }
  1138. body:has(.css-1oc3ive > div:first-child:hover) {
  1139. .css-1oc3ive > div:first-child > div > div,
  1140. .css-1oc3ive > div:first-child > div > p {
  1141. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  1142. -webkit-background-clip: text;
  1143. -moz-background-clip: text;
  1144. background-clip: text;
  1145. color: transparent !important;
  1146. }
  1147. }
  1148.  
  1149. /* Avatar list in generate avatar */
  1150. .css-az6ase {
  1151. width: calc(50% - 50px);
  1152. }
  1153.  
  1154. /* Kin's name */
  1155. .css-w9iwt8 .css-1cfkm3f {
  1156. text-align: center;
  1157. }
  1158. /* Delete kin */
  1159. body:has(.css-ji0zhw) {
  1160. .css-r6z5ec[style="visibility: hidden; position: absolute; min-width: max-content; inset: 0px auto auto 0px;"] {
  1161. pointer-events: none;
  1162. }
  1163. .css-r6z5ec .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at[data-index="0"]::before,
  1164. .css-r6z5ec .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at[data-index="0"]:hover::after,
  1165. .css-r6z5ec .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at[data-index="1"]::before,
  1166. .css-r6z5ec .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at[data-index="1"]:hover::after,
  1167. .css-r6z5ec .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at[data-index="2"]::before,
  1168. .css-r6z5ec .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at[data-index="2"]:hover::after {
  1169. display: none;
  1170. }
  1171. .css-r6z5ec[style*="visibility: hidden"] .css-do4s31[style*="visibility: hidden"][aria-orientation="vertical"],
  1172. .css-r6z5ec[style*="visibility: visible"] .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] {
  1173. background: var(--chakra-colors-secondaryBlack) !important;
  1174. background-clip: initial !important;
  1175. border: none;
  1176. -o-text-fill-color: var(--chakra-colors-secondaryWhite) !important;
  1177. -moz-text-fill-color: var(--chakra-colors-secondaryWhite) !important;
  1178. -ms-text-fill-color: var(--chakra-colors-secondaryWhite) !important;
  1179. -webkit-text-fill-color: var(--chakra-colors-secondaryWhite) !important;
  1180. color: var(--chakra-colors-secondarywhite) !important;
  1181. height: auto;
  1182. border-radius: 1em;
  1183. visibility: visible !important;
  1184. white-space: nowrap !important;
  1185. }
  1186. .css-r6z5ec[style*="visibility: hidden"] .css-do4s31[style*="visibility: hidden"][aria-orientation="vertical"] > .css-94x4at,
  1187. .css-r6z5ec[style*="visibility: visible"] .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at {
  1188. background: var(--chakra-colors-secondaryBlack) !important;
  1189. padding: .75em;
  1190. }
  1191. .css-r6z5ec[style*="visibility: hidden"] .css-do4s31[style*="visibility: hidden"][aria-orientation="vertical"] > .css-94x4at:last-child,
  1192. .css-r6z5ec[style*="visibility: visible"] .css-do4s31[style*="visibility: visible"][aria-orientation="vertical"] > .css-94x4at:last-child {
  1193. background: var(--chakra-colors-secondaryBlack) !important;
  1194. background-clip: initial !important;
  1195. border: none;
  1196. -o-text-fill-color: var(--chakra-colors-red) !important;
  1197. -moz-text-fill-color: var(--chakra-colors-red) !important;
  1198. -ms-text-fill-color: var(--chakra-colors-red) !important;
  1199. -webkit-text-fill-color: var(--chakra-colors-red) !important;
  1200. color: var(--chakra-colors-secondarywhite) !important;
  1201. height: auto;
  1202. border-radius: 5px;
  1203. min-width: 100% !important;
  1204. visibility: visible !important;
  1205. white-space: nowrap !important;
  1206. }
  1207. }
  1208. /* Groups */
  1209. /* Create group button */
  1210. .css-1apc7qm {
  1211. height: 100px;
  1212. justify-content: center;
  1213. position: fixed !important;
  1214. left: .5em;
  1215. margin-bottom: 0;
  1216. top: 50%;
  1217. transform: translateY(calc(50% + .5em));
  1218. width: 100px;
  1219. }
  1220. .css-1apc7qm > div > div {
  1221. font-size: 24px !important;
  1222. line-height: 24px !important;
  1223. }
  1224. .css-1apc7qm > div > p {
  1225. font-size: 24px !important;
  1226. }
  1227. body:has(.css-1apc7qm:hover) {
  1228. .css-1apc7qm > div > div,
  1229. .css-1apc7qm > div > p {
  1230. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  1231. -webkit-background-clip: text;
  1232. -moz-background-clip: text;
  1233. background-clip: text;
  1234. color: transparent !important;
  1235. }
  1236. }
  1237. body:not(:has(.css-1hw29i9)) {
  1238. /* Reorder Group */
  1239. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(4) > button.css-1123s1d svg,
  1240. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(4) > button.css-1123s1d::before {
  1241. height: 40px;
  1242. }
  1243. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(4) > button.css-1123s1d::before {
  1244. align-items: center;
  1245. content: "Reorder Groups";
  1246. display: flex;
  1247. font-size: fontsize;
  1248. height: 40px;
  1249. margin-right: .3em;
  1250. }
  1251. /* Groups list */
  1252. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(6) {
  1253. flex-flow: wrap;
  1254. gap: 1em;
  1255. justify-content: space-evenly;
  1256. }
  1257. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(6) > div {
  1258. width: 300px;
  1259. }
  1260.  
  1261. /* Create a new group chat */
  1262. .css-zys56m > .css-1ly87gx > .css-1yxzzu5 {
  1263. align-items: start;
  1264. flex-direction: row;
  1265. flex-wrap: wrap;
  1266. }
  1267. .css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:first-child,
  1268. .css-zys56m > .css-1ly87gx > .css-1yxzzu5 > p {
  1269. width: 100%;
  1270. }
  1271. }
  1272. body:has(.css-1hw29i9) {
  1273. /* Kindroids scheduled for deletion */
  1274. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(4) > div > button > p {
  1275. color: var(--chakra-colors-pureWhite);
  1276. font-family: var(--chakra-fonts-OpenSansRegular);
  1277. font-size: 24px !important;
  1278. line-height: 32px !important;
  1279. }
  1280. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(4) > div > button > svg {
  1281. display: none;
  1282. }
  1283. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(4) > div > div {
  1284. display: block !important;
  1285. height: auto !important;
  1286. opacity: 1 !important;
  1287. }
  1288. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(4) > div > div > div > p {
  1289. font-size: fontsize;
  1290. }
  1291. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(4) > div > div > div > div {
  1292. width: 100%;
  1293. }
  1294. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(4) > div > div > div > div,
  1295. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(4) > div > div > div > div > div {
  1296. align-items: center;
  1297. flex-flow: wrap;
  1298. gap: 1em;
  1299. justify-content: space-evenly;
  1300. }
  1301. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(4) > div > div > div > div > div > div {
  1302. height: auto;
  1303. width: 300px;
  1304. }
  1305. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(4) > div > div > div > div > div > div > div:nth-of-type(1) > p {
  1306. font-size: fontsize;
  1307. }
  1308. /* Reorder Group */
  1309. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(5) > button.css-1123s1d svg,
  1310. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(5) > button.css-1123s1d::before {
  1311. height: 40px;
  1312. }
  1313. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(5) > button.css-1123s1d::before {
  1314. align-items: center;
  1315. content: "Reorder Groups";
  1316. display: flex;
  1317. font-size: fontsize;
  1318. height: 40px;
  1319. margin-right: .3em;
  1320. }
  1321.  
  1322. /* Groups list */
  1323. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(7) {
  1324. flex-direction: row;
  1325. flex-wrap: wrap;
  1326. gap: 1em;
  1327. justify-content: space-evenly;
  1328. }
  1329. .css-ji0zhw > div:nth-of-type(2) > div > div:nth-of-type(7) > div {
  1330. width: 300px;
  1331. }
  1332.  
  1333. /* Create a new group chat */
  1334. .css-zys56m > .css-1ly87gx > .css-1yxzzu5 {
  1335. align-items: start;
  1336. flex-direction: row;
  1337. flex-wrap: wrap;
  1338. }
  1339. .css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:first-child,
  1340. .css-zys56m > .css-1ly87gx > .css-1yxzzu5 > p {
  1341. width: 100%;
  1342. }
  1343. }
  1344. /* Modal's title */
  1345. .css-zys56m > .css-1ly87gx > .css-1yxzzu5 > p:first-child {
  1346. text-align: center;
  1347. }
  1348. /* Modal's 1st explain */
  1349. .css-zys56m > .css-1ly87gx > .css-1yxzzu5 > p:nth-of-type(2) {
  1350. font-size: fontsize;
  1351. line-height: 1.5;
  1352. }
  1353. /* Kin list */
  1354. .css-zys56m > .css-1ly87gx > .css-1yxzzu5 > .css-1wy8ffp {
  1355. justify-content: space-between;
  1356. }
  1357. .css-zys56m > .css-1ly87gx > .css-1yxzzu5 > .css-1wy8ffp p {
  1358. font-size: 24px;
  1359. line-height: 32px;
  1360. text-align: center;
  1361. }
  1362. /* Group name */
  1363. .css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:nth-of-type(2) {
  1364. order: 1;
  1365. width: 48%;
  1366. }
  1367. /* Group context */
  1368. .css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:nth-of-type(3) {
  1369. order: 3;
  1370. width: 48%;
  1371. }
  1372. /* Turn-taking style */
  1373. .css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:nth-of-type(4) {
  1374. order: 2;
  1375. width: 48%;
  1376. }
  1377. /* (Advanced) shared memory */
  1378. .css-zys56m > .css-1ly87gx > .css-1yxzzu5 > div:nth-of-type(5) {
  1379. order: 4;
  1380. width: 48%;
  1381. }
  1382. /* Create group button */
  1383. [aria-label="Create group"] {
  1384. margin: auto;
  1385. max-width: fit-content;
  1386. min-width: fit-content;
  1387. order: 5;
  1388. }
  1389. [aria-label="Create group"] > div {
  1390. padding: 0 1em;
  1391. }
  1392. /* Create kin & Explore modals */
  1393. .css-h218ln > div > div > div:nth-of-type(1) {
  1394. padding: 40px 32px 0 32px;
  1395. }
  1396. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) {
  1397. max-width: 100%;
  1398. }
  1399. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > p:nth-of-type(2) {
  1400. cursor: pointer;
  1401. font-size: fontsize;
  1402. line-height: 1.5;
  1403. }
  1404. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div {
  1405. max-width: 50%;
  1406. padding: 1em;
  1407. width: 50%;
  1408. }
  1409. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div {
  1410. height: auto !important;
  1411. }
  1412. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div {
  1413. transform: none !important;
  1414. width: 100%;
  1415. }
  1416. /* Tags */
  1417. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(3) > div {
  1418. flex-wrap: wrap;
  1419. justify-content: center;
  1420. }
  1421. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(3) > div > span {
  1422. font-size: fontsize;
  1423. line-height: 1.5;
  1424. }
  1425. /* Mini-avatar */
  1426. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(1) {
  1427. margin-bottom: auto;
  1428. }
  1429. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(1) > img {
  1430. height: auto;
  1431. width: 96px;
  1432. }
  1433. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(1) > img:hover,
  1434. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(1) > img:hover {
  1435. height: auto;
  1436. width: 300px;
  1437. z-index: 1;
  1438. }
  1439. /* Filter to see only kins with many infos */
  1440. if hidekinsexplore {
  1441. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div:has(> div:only-of-type) {
  1442. display: none;
  1443. padding: 0;
  1444. padding-inline-end: 0;
  1445. padding-inline-start: 0;
  1446. }
  1447. }
  1448. /* Name */
  1449. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(2) > div:nth-of-type(1) > div {
  1450. justify-content: center;
  1451. }
  1452. /* Bio */
  1453. if (fullbio == fullbiodefault) || (fullbio == fullbioalways) || (fullbio == fullbioactive) {
  1454. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(1) > div > div:nth-of-type(2) > p,
  1455. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(2) > p {
  1456. font-size: fontsize;
  1457. line-height: 1.5;
  1458. padding-bottom: .5em;
  1459. padding-right: 1em;
  1460. text-align: justify;
  1461. transition: height 0.3s ease;
  1462. white-space: normal;
  1463. word-break: break-word;
  1464. }
  1465. }
  1466. if (fullbio == fullbiodefault) {
  1467. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(2) > p {
  1468. --chakra-line-clamp: 3;
  1469. }
  1470. }
  1471. if (fullbio == fullbioalways) {
  1472. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(2) > p {
  1473. --chakra-line-clamp: unset;
  1474. height: auto;
  1475. }
  1476. }
  1477. if (fullbio == fullbioactive) {
  1478. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(2) > p:active {
  1479. --chakra-line-clamp: unset;
  1480. height: auto;
  1481. }
  1482. }
  1483. /* Create button */
  1484. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(3) {
  1485. /* margin-bottom: auto; */
  1486. position: absolute;
  1487. top: calc(96px + 1.5em);
  1488. width: 96px;
  1489. }
  1490. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(3) > button {
  1491. font-size: fontsize;
  1492. line-height: 1.5;
  1493. transition: .3s background ease-in-out, .3s color ease-in-out;
  1494. }
  1495. .css-h218ln > div > div > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(3) > button:hover {
  1496. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  1497. color: var(--chakra-colors-white);
  1498. }
  1499. /* Shared kins list */
  1500. .css-113mbrq img:hover {
  1501. border-radius: 1em;
  1502. height: auto;
  1503. width: 300px;
  1504. }
  1505. /* Share kins */
  1506. .css-dkzp5w {
  1507. justify-content: center;
  1508. }
  1509. .css-dkzp5w > .css-156z0wo {
  1510. height: auto;
  1511. width: 300px;
  1512. }
  1513. .css-1kxonj9 > .css-1qo2cb6 {
  1514. height: 300px;
  1515. width: 100%;
  1516. }
  1517. .css-pdvefo {
  1518. margin: 0 auto;
  1519. position: relative;
  1520. width: fit-content;
  1521. }
  1522. .css-1qo2cb6 > .css-pdvefo > .css-cqzojc > .css-79elbk {
  1523. aspect-ratio: 1 / 1;
  1524. border-radius: 1em;
  1525. height: 300px;
  1526. margin: 0 auto;
  1527. width: auto;
  1528. }
  1529. /* Avoid scroll problems */
  1530. .css-15b277d {
  1531. overflow-y: auto;
  1532. }
  1533. /* Display name etc visible content */
  1534. .css-ji0zhw > .css-xp7tub > .css-1lxwves {
  1535. min-height: max-content;
  1536. margin: 20px 0;
  1537. }
  1538. /* ===== General ===== */
  1539. .css-j7qwjs p:not(.css-8nzq2w, .css-1cfkm3f, .css-j5x8z7, .css-3nnoix) {
  1540. font-size: fontsize;
  1541. line-height: 1.2;
  1542. }
  1543. /* Danger zone: delete account */
  1544. .css-1inccke::before,
  1545. .css-1inccke::after {
  1546. content: "⚠️";
  1547. }
  1548. .css-1inccke {
  1549. bottom: 150px;
  1550. font-size: 18px;
  1551. font-weight: 600;
  1552. margin-left: auto;
  1553. width: max-content;
  1554. }
  1555. /* ===== Backstory ===== */
  1556. /* Journal entries */
  1557. .css-ji0zhw > .css-8onqts > .css-188uayk > .css-j7qwjs > .css-12ac5cx {
  1558. flex-direction: row;
  1559. }
  1560. .css-16wjzov .css-1pwenrv {
  1561. position: relative;
  1562. }
  1563. .css-16wjzov > div > div > div:nth-of-type(1) > button {
  1564. left: 0;
  1565. top: 60px;
  1566. position: absolute;
  1567. }
  1568. .css-16wjzov > div > div > div:nth-of-type(1) > button svg {
  1569. fill: var(--chakra-colors-primaryWhite);
  1570. }
  1571. .css-16wjzov > div > div > div:nth-of-type(1) > button[aria-label="create"]::after {
  1572. color: var(--chakra-colors-primaryWhite);
  1573. content: "Click here to create a journal entry.";
  1574. font-size: 20px !important;
  1575. font-weight: normal;
  1576. margin-left: 5px;
  1577. }
  1578. .css-16wjzov .css-1thrbn {
  1579. margin-top: 5%;
  1580. }
  1581. /* ===== Voice ===== */
  1582. .css-2xph3x > div:last-child img {
  1583. margin-right: 34px;
  1584. }
  1585.  
  1586. /* ===== Avatar ===== */
  1587. /* Avatar and My avatar */
  1588. body:has([aria-label="Create my own Kindroid"]),
  1589. body:has([aria-label="photoreal"]),
  1590. body:has([aria-label="predefined"]),
  1591. body:has([aria-label="Predefined"]),
  1592. body:has(input[placeholder="Kindroid name"]) {
  1593. /* Wide modal content */
  1594. .css-zys56m > div > div > div:nth-of-type(1),
  1595. .css-zys56m > div > div > div:nth-of-type(1) > div {
  1596. max-width: 100%;
  1597. }
  1598. }
  1599. body:has([aria-label="photoreal"]) {
  1600. /* Split */
  1601. .css-1slmhpt {
  1602. flex-direction: row;
  1603. flex-wrap: wrap;
  1604. max-width: 100%;
  1605. }
  1606. .css-1slmhpt > .css-1qo2cb6 {
  1607. justify-content: center;
  1608. padding: 0;
  1609. width: 48%;
  1610. }
  1611. /* Upload avatar */
  1612. .css-1slmhpt > .css-1qo2cb6 > .css-pdvefo {
  1613. display: flex;
  1614. padding: 0 2em 2em 2em;
  1615. width: 100%;
  1616. }
  1617. .css-1slmhpt > .css-1qo2cb6 > .css-pdvefo > div {
  1618. height: 100%;
  1619. width: 100%;
  1620. }
  1621. .css-1slmhpt > .css-1qo2cb6 > .css-pdvefo > div > div {
  1622. border-radius: 1em;
  1623. }
  1624. /* Put Upload Photo text in custom avatar in white to be more visible */
  1625. .css-1jcj2pk {
  1626. color: var(--chakra-colors-white);
  1627. }
  1628. /* Animate avatar button */
  1629. [aria-label="animate avatar"] {
  1630. margin-right: 2em;
  1631. }
  1632. /* Right side */
  1633. .css-1slmhpt > .css-ue4bfp {
  1634. overflow: hidden;
  1635. width: 48%;
  1636. }
  1637. .css-1slmhpt > .css-ue4bfp > .css-ae75s5 {
  1638. flex-direction: column;
  1639. width: 100%;
  1640. }
  1641. [aria-label="Avatar description input"]:not(:focus),
  1642. [aria-label="Face detail prompt input"]:not(:focus),
  1643. [aria-label="Avatar description input"]:focus,
  1644. [aria-label="Face detail prompt input"]:focus {
  1645. margin-left: .5em;
  1646. max-width: calc(100% - 1em);
  1647. }
  1648. [aria-label="Get avatar description"] {
  1649. transform: translateY(50%);
  1650. }
  1651. /* Avatar Boost */
  1652. .css-1yljauu > div {
  1653. display: block !important;
  1654. height: auto !important;
  1655. opacity: 1 !important;
  1656. }
  1657. .css-1yljauu:last-child > button {
  1658. margin-top: 1em;
  1659. }
  1660. }
  1661. /* Select Generated Avatar */
  1662. .css-16wjzov [aria-label="Copy prompt"],
  1663. .css-16wjzov [aria-label="Delete avatar"],
  1664. .css-16wjzov > div > div > p:nth-of-type(2) {
  1665. font-size: fontsize;
  1666. line-height: 1.5;
  1667. }
  1668. .css-16wjzov > div > div > div > div > div {
  1669. width: 300px;
  1670. }
  1671. .css-16wjzov > div > div > div > div > div:hover {
  1672. .css-1h95ja4 {
  1673. display: block;
  1674. }
  1675. }
  1676. .css-1h95ja4 {
  1677. border-radius: 1em;
  1678. display: none;
  1679. height: 300px;
  1680. padding: 1em;
  1681. pointer-events: none;
  1682. }
  1683. .css-16wjzov [aria-label="Copy prompt"] {
  1684. left: .5em;
  1685. pointer-events: auto;
  1686. position: absolute;
  1687. top: .5em;
  1688. z-index: 9999 !important;
  1689. }
  1690. .css-16wjzov [aria-label="Copy prompt"]:hover svg {
  1691. background: url("data:image/svg+xml,%3Csvg fill='url(%23A)' stroke-width='0' viewBox='0 0 448 512' focusable='false' class='chakra-icon css-13otjrl' aria-hidden='true' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z'%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") no-repeat;
  1692. background-size: cover;
  1693. height: 0;
  1694. padding-left: 1em;
  1695. padding-top: 1em;
  1696. pointer-events: auto;
  1697. width: 0;
  1698. z-index: 9999 !important;
  1699. }
  1700. .css-16wjzov [aria-label="Copy prompt"]:hover::after {
  1701. color: var(--chakra-colors-secondaryWhite);
  1702. content: "Copy prompt";
  1703. margin-left: .3em;
  1704. vertical-align: top;
  1705. }
  1706. .css-16wjzov [aria-label="Delete avatar"] {
  1707. pointer-events: auto;
  1708. position: absolute;
  1709. right: .5em;
  1710. top: .5em;
  1711. z-index: 9999 !important;
  1712. }
  1713. .css-16wjzov [aria-label="Delete avatar"]:hover svg {
  1714. background: url("data:image/svg+xml,%3Csvg fill='url(%23A)' stroke-width='0' viewBox='0 0 16 16' focusable='false' class='chakra-icon css-13otjrl' aria-hidden='true' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z'%3E%3C/path%3E%3Cpath d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z'%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") no-repeat;
  1715. background-size: cover;
  1716. height: 0;
  1717. padding-left: 19px;
  1718. padding-top: 19px;
  1719. width: 0;
  1720. }
  1721. .css-16wjzov [aria-label="Delete avatar"]:hover::before {
  1722. color: var(--chakra-colors-secondaryWhite);
  1723. content: "Delete avatar";
  1724. display: inline-block !important;
  1725. margin-right: 8em;
  1726. position: absolute;
  1727. }
  1728. .css-ha05g4 {
  1729. font-size: 1.1rem;
  1730. height: 300px;
  1731. line-height: 1.2;
  1732. padding: 2em 2em 0 0;
  1733. pointer-events: none;
  1734. width: 300px;
  1735. }
  1736. /* My avatar */
  1737. .css-pwmocd > p:nth-of-type(2) {
  1738. margin-bottom: 1em;
  1739. }
  1740. img.reactEasyCrop_Contain {
  1741. height: 100% !important;
  1742. width: 100% !important;
  1743. }
  1744. /* Delete image */
  1745. [aria-label="delete image"] {
  1746. margin-left: 2em;
  1747. }
  1748.  
  1749. /* Swipe arrows */
  1750. .avatarSlider .swiper-button-next::after,
  1751. .avatarSlider .swiper-button-prev::after {
  1752. color: var(--chakra-colors-primaryWhite);
  1753. }
  1754. .css-tf0j9o > .chakra-collapse > .css-1fm8jup > .css-dhnoom {
  1755. padding-bottom: 20px;
  1756. width: 47% !important;
  1757. }
  1758. .css-1v3caum > .css-tf0j9o > .chakra-collapse > .css-1fm8jup > .css-dhnoom {
  1759. width: 100% !important;
  1760. }
  1761.  
  1762. /* Hide arrows */
  1763. .css-g7h3az {
  1764. display: none;
  1765. }
  1766.  
  1767. /* Uncollapse "Advanced: secondary avatar" and "Advanced: custom avatar fidelity" */
  1768. .css-tf0j9o > div,
  1769. .css-1v3caum > div {
  1770. display: block !important;
  1771. height: auto !important;
  1772. opacity: 1 !important;
  1773. }
  1774. /* Avatar boost */
  1775. .css-egc6lc > div > div {
  1776. display: flex;
  1777. flex-wrap: wrap;
  1778. justify-content: center;
  1779. }
  1780. .css-egc6lc > div > div > div {
  1781. height: auto;
  1782. width: 300px;
  1783. }
  1784. /* ===== Customizations ===== */
  1785. /* K menu icon */
  1786. if kmenuicon {
  1787. body:has(.css-1b1fzbz) {
  1788. .css-x3odei > div:nth-of-type(1) > button:nth-of-type(1) img,
  1789. .css-x3odei > div:nth-of-type(1) > button:nth-of-type(1):hover img {
  1790. display: none;
  1791. }
  1792. .css-x3odei > div:nth-of-type(1) > button:nth-of-type(1),
  1793. .css-x3odei > div:nth-of-type(1) > button:nth-of-type(1):hover {
  1794. 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;
  1795. filter: invert(avatarinvert);
  1796. height: 0;
  1797. padding-left: 48px;
  1798. padding-top: 48px;
  1799. width: 0;
  1800. }
  1801. .css-x3odei > div:nth-of-type(1) > button:nth-of-type(1):hover {
  1802. border-radius: .5em;
  1803. box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
  1804. rgba(139, 110, 255, 0.4) -5px 5px 5px 5px,
  1805. rgba(254, 133, 133, 0.4) 5px -5px 5px 5px,
  1806. rgba(254, 133, 133, 0.4) 5px 5px 5px 5px;
  1807. filter: invert(avatarinvert);
  1808. }
  1809. }
  1810. }
  1811. /* Header icons hover */
  1812. body:has(.css-1b1fzbz) {
  1813. .css-x3odei > div:nth-of-type(1) > button:nth-of-type(2):hover svg,
  1814. .css-x3odei > div:nth-of-type(1) > button:nth-of-type(3):hover svg,
  1815. .css-x3odei > div:nth-of-type(1) > button:nth-of-type(4):hover svg {
  1816. display: none;
  1817. }
  1818. .css-x3odei > div:nth-of-type(1) > button:nth-of-type(2):hover,
  1819. .css-x3odei > div:nth-of-type(1) > button:nth-of-type(3):hover,
  1820. .css-x3odei > div:nth-of-type(1) > button:nth-of-type(4):hover {
  1821. height: 48px;
  1822. width: 48px;
  1823. }
  1824. /* Selfies icon */
  1825. .css-x3odei > div:nth-of-type(1) > button:nth-of-type(2):hover {
  1826. 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");
  1827. }
  1828. /* Voicecall icon */
  1829. .css-x3odei > div:nth-of-type(1) > button:nth-of-type(3):hover {
  1830. 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");
  1831. }
  1832. /* Rewards icon */
  1833. .css-x3odei > div:nth-of-type(1) > button:nth-of-type(4):hover {
  1834. 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");
  1835. }
  1836. }
  1837. /* Tooltips */
  1838. [aria-label="gallery"]:hover::after,
  1839. [aria-label="call"]:hover::after,
  1840. [aria-label="rewards"]:hover::after {
  1841. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  1842. background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  1843. border-radius: 1em;
  1844. color: var(--chakra-colors-primaryWhite);
  1845. filter: invert(avatarinvert);
  1846. font-family: var(--fontfamily);
  1847. font-size: fontsize;
  1848. font-weight: normal;
  1849. line-height: 1.2;
  1850. padding: .5em;
  1851. position: absolute;
  1852. top: 50px;
  1853. }
  1854. [aria-label="gallery"]:hover::after {
  1855. content: "Selfies";
  1856. left: -30%;
  1857. }
  1858. [aria-label="call"]:hover::after {
  1859. content: "Voicecall";
  1860. left: -60%;
  1861. }
  1862. [aria-label="rewards"]:hover::after {
  1863. content: "Rewards";
  1864. left: -60%;
  1865. }
  1866.  
  1867. /* Rewards modal */
  1868. .css-116cmre {
  1869. margin: auto;
  1870. }
  1871. .css-116cmre *:not(.css-1cct4wf) {
  1872. font-size: fontsize;
  1873. line-height: 1.5;
  1874. }
  1875. .css-1offyti {
  1876. max-width: 700px;
  1877. }
  1878. /* Hide billing */
  1879. if hidebilling {
  1880. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > button:last-child {
  1881. display: none;
  1882. }
  1883. }
  1884. /* Hide sharring */
  1885. if hidesharing {
  1886. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:nth-of-type(6),
  1887. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:nth-of-type(7),
  1888. .css-116cmre > div > .css-1ebprri,
  1889. .css-116cmre > div > p:nth-of-type(3),
  1890. .css-116cmre > div > .css-qsuiuj,
  1891. .css-zys56m .css-1n8v3qa div {
  1892. display: none;
  1893. }
  1894. /* Daily rewards modal */
  1895. .css-116cmre {
  1896. max-width: 700px;
  1897. min-width: 700px;
  1898. }
  1899. }
  1900. }
  1901.  
  1902. @-moz-document url-prefix("https://kindroid.ai/home") {
  1903. /* ====================================================
  1904. Sidebar & System bubbles on chat page
  1905. ==================================================== */
  1906. /* ===== Sidebar ===== */
  1907. /* History mode and view favorited messages */
  1908. [aria-label="History mode and view favorited messages"],
  1909. [aria-label="History mode and view favorited messages"]:hover {
  1910. background: transparent;
  1911. height: 36px;
  1912. min-height: 36px;
  1913. min-width: 36px;
  1914. padding: 0;
  1915. padding-inline-end: 0;
  1916. padding-inline-start: 0;
  1917. position: fixed;
  1918. right: .5em;
  1919. top: calc(60px + .5em);
  1920. width: 36px;
  1921. }
  1922. [aria-label="History mode and view favorited messages"] svg {
  1923. fill: var(--chakra-colors-secondaryWhite);
  1924. height: 36px;
  1925. width: 36px;
  1926. }
  1927. [aria-label="History mode and view favorited messages"]:hover svg {
  1928. fill: transparent !important;
  1929. stroke: transparent !important;
  1930. }
  1931. [aria-label="History mode and view favorited messages"]:hover svg {
  1932. 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;
  1933. background-size: cover;
  1934. filter: invert(avatarinvert);
  1935. height: 36px;
  1936. width: 36px;
  1937. }
  1938. [aria-label="History mode and view favorited messages"]:hover::before {
  1939. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  1940. background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  1941. border-radius: 1em;
  1942. color: var(--chakra-colors-primaryWhite);
  1943. content: "History mode and view favorited messages";
  1944. filter: invert(avatarinvert);
  1945. font-family: var(--fontfamily);
  1946. font-size: fontsize;
  1947. font-weight: normal;
  1948. line-height: 1.2;
  1949. padding: .5em;
  1950. position: fixed;
  1951. right: calc(36px + 1.2em);
  1952. transition: 0.3s linear ease-in-out;
  1953. white-space: nowrap;
  1954. }
  1955.  
  1956. /* LLM */
  1957. .css-2oetr7::before {
  1958. background: transparent;
  1959. }
  1960. .css-2oetr7:hover::before {
  1961. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  1962. background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  1963. border-radius: 1em;
  1964. color: var(--chakra-colors-primaryWhite);
  1965. content: "Choose LLM version";
  1966. filter: invert(avatarinvert);
  1967. font-family: var(--fontfamily);
  1968. font-size: fontsize;
  1969. font-weight: normal;
  1970. line-height: 1.2;
  1971. padding: .5em;
  1972. position: fixed;
  1973. right: calc(36px + 1.2em);
  1974. top: calc(60px + ((36px + 1em) * 1));
  1975. transition: 0.3s linear ease-in-out;
  1976. white-space: nowrap;
  1977. }
  1978. .css-2oetr7 {
  1979. 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;
  1980. height: 36px;
  1981. left: auto;
  1982. position: fixed;
  1983. top: calc(60px + ((36px + 1em) * 1));
  1984. right: .5em;
  1985. width: 36px;
  1986. }
  1987. .css-2oetr7:hover {
  1988. 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;
  1989. height: 36px;
  1990. left: auto;
  1991. position: fixed;
  1992. top: calc(60px + ((36px + 1em) * 1));
  1993. right: .5em;
  1994. width: 36px;
  1995. }
  1996. .css-2oetr7 > p {
  1997. display: none;
  1998. width: 0;
  1999. }
  2000. if (systembubblesstyle=="systembubbleswide") || (systembubblesstyle=="systembubblesdark") {
  2001. .css-r6z5ec > .css-do4s31 > .css-94x4at {
  2002. padding: 0;
  2003. }
  2004. .css-r6z5ec > .css-do4s31 > .css-94x4at:before,
  2005. .css-r6z5ec > .css-do4s31 > .css-94x4at:hover::before {
  2006. background-position: center center;
  2007. background-repeat: no-repeat;
  2008. background-size: cover;
  2009. content: "";
  2010. }
  2011.  
  2012. /* Continue cut-off message */
  2013. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1) {
  2014. order: 2;
  2015. }
  2016. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1)::before {
  2017. 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");
  2018. }
  2019. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1):hover::before {
  2020. 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");
  2021. filter: invert(avatarinvert);
  2022. }
  2023.  
  2024. /* Auto-Selfie */
  2025. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2) {
  2026. order: 1;
  2027. }
  2028. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2)::before {
  2029. 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");
  2030. }
  2031. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2):hover::before {
  2032. 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");
  2033. filter: invert(avatarinvert);
  2034. }
  2035.  
  2036. /* Chat Break */
  2037. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3) {
  2038. order: 4;
  2039. }
  2040. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3)::before {
  2041. 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");
  2042. }
  2043. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3):hover::before {
  2044. 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");
  2045. filter: invert(avatarinvert);
  2046. }
  2047.  
  2048. /* Tweak AI message */
  2049. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(4) {
  2050. order: 3;
  2051. }
  2052. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(4)::before {
  2053. 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");
  2054. }
  2055. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(4):hover::before {
  2056. 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");
  2057. filter: invert(avatarinvert);
  2058. }
  2059. }
  2060. if (systembubblesstyle=="systembubbleswide") {
  2061. body:has(.css-1b1fzbz) {
  2062. .css-r6z5ec > .css-do4s31 {
  2063. align-items: center;
  2064. background-color: transparent;
  2065. border: none;
  2066. bottom: 81px;
  2067. color: var(--chakra-colors-secondaryWhite);
  2068. display: flex;
  2069. flex-direction: column;
  2070. font-size: fontsize;
  2071. gap: .5em;
  2072. justify-content: flex-end;
  2073. left: auto;
  2074. max-width: 36px;
  2075. min-width: 36px;
  2076. --menu-shadow: transparent;
  2077. opacity: 1 !important;
  2078. outline: 0;
  2079. outline-offset: 0;
  2080. position: fixed;
  2081. right: .5em;
  2082. transform: none !important;
  2083. transform-origin: unset;
  2084. visibility: visible !important;
  2085. z-index: 0;
  2086. }
  2087. /* Hide 3 dots */
  2088. .css-1y2ps2x {
  2089. display: none;
  2090. }
  2091. .css-r6z5ec > .css-do4s31 > .css-94x4at {
  2092. background-color: transparent;
  2093. color: transparent;
  2094. height: 36px !important;
  2095. max-width: 36px !important;
  2096. position: relative;
  2097. transform: none !important;
  2098. }
  2099. .css-r6z5ec > .css-do4s31 > .css-94x4at:before,
  2100. .css-r6z5ec > .css-do4s31 > .css-94x4at:hover::before {
  2101. height: 36px !important;
  2102. max-width: 36px !important;
  2103. min-width: 36px !important;
  2104. }
  2105. .css-r6z5ec > .css-do4s31 > .css-94x4at:hover::after {
  2106. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  2107. background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  2108. border-radius: 1em;
  2109. bottom: unset !important;
  2110. color: var(--chakra-colors-primaryWhite);
  2111. filter: invert(avatarinvert);
  2112. font-family: var(--fontfamily);
  2113. font-size: fontsize;
  2114. font-weight: normal;
  2115. left: auto !important;
  2116. line-height: 1.2;
  2117. padding: .5em;
  2118. position: absolute;
  2119. right: calc(36px + .7em) !important;
  2120. transition: 0.3s linear ease-in-out;
  2121. white-space: nowrap;
  2122. }
  2123. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1):hover::after {
  2124. content: "Continue cut-off message";
  2125. transform: translateX(0%);
  2126. }
  2127. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2):hover::after {
  2128. content: "Auto-Selfie";
  2129. transform: translateX(0%);
  2130. }
  2131. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3):hover::after {
  2132. content: "Chat Break";
  2133. transform: translateX(0%) !important;
  2134. }
  2135. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(4):hover::after {
  2136. content: "Tweak AI message";
  2137. transform: translateX(0%);
  2138. }
  2139. }
  2140. }
  2141. if (systembubblesstyle=="systembubblesdark") {
  2142. body:has(.css-1b1fzbz) {
  2143. .css-do4s31 {
  2144. border-radius: .5em;
  2145. margin-left: -5%
  2146. }
  2147. .css-do4s31,
  2148. .css-94x4at {
  2149. background-color: #161616;
  2150. border-color: #6C6C6C;
  2151. color: var(--chakra-colors-secondaryWhite);
  2152. font-family: var(--fontfamily);
  2153. font-size: fontsize;
  2154. line-height: 1.5;
  2155. margin-bottom: .5em;
  2156. padding: .5em 0em .5em 1em;
  2157. }
  2158. .css-do4s31 {
  2159. display: grid;
  2160. }
  2161. .css-1y2ps2x:hover,
  2162. .css-do4s31 button:hover {
  2163. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  2164. background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  2165. -webkit-background-clip: text;
  2166. -moz-background-clip: text;
  2167. background-clip: text;
  2168. -webkit-text-fill-color: transparent;
  2169. -moz-text-fill-color: transparent;
  2170. color: transparent;
  2171. }
  2172. .css-r6z5ec > .css-do4s31 > .css-94x4at:before,
  2173. .css-r6z5ec > .css-do4s31 > .css-94x4at:hover::before {
  2174. height: fontsize !important;
  2175. max-width: fontsize !important;
  2176. min-width: fontsize !important;
  2177. margin-right: .3em;
  2178. }
  2179. }
  2180. }
  2181. }
  2182.  
  2183. @-moz-document url-prefix("https://kindroid.ai/home"), url-prefix("https://kindroid.ai/groupchat/") {
  2184. /* ====================================================
  2185. Chat and group chat page
  2186. ==================================================== */
  2187. /* ===== Chat box ===== */
  2188. .css-1dhayxc *,
  2189. .css-yhhl9h * {
  2190. z-index: 0 !important;
  2191. }
  2192. /* Shared links to kin */
  2193. .css-1dhayxc .css-fujl5p > div:nth-of-type(2) > p.css-dhnoom,
  2194. .css-1dhayxc .css-116lnl0 > div:nth-of-type(2) > p.css-dhnoom {
  2195. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  2196. background-clip: text;
  2197. -webkit-background-clip: text;
  2198. color: transparent;
  2199. font-size: 1rem !important;
  2200. }
  2201. /* Vertically center bubbles */
  2202. .css-1dhayxc,
  2203. .css-yhhl9h {
  2204. align-items: center;
  2205. }
  2206. /* Vertically center edit icon */
  2207. .css-1dhayxc:last-child > div:nth-of-type(1) {
  2208. align-self: center;
  2209. padding: 0;
  2210. }
  2211. /* ===== Group config ===== */
  2212. .css-v79ql0 {
  2213. font-size: 18px;
  2214. text-align: center;
  2215. }
  2216. /* Avatar selection for group images */
  2217. .css-1e9g1nc {
  2218. justify-content: center;
  2219. }
  2220. .css-1e9g1nc > .css-156z0wo {
  2221. height: auto;
  2222. width: 300px;
  2223. }
  2224. .css-156z0wo > .css-15td5wo > .css-w9iwt8 > .css-1cfkm3f {
  2225. text-align: center;
  2226. }
  2227. /* Tweak AI message */
  2228. body:has([aria-label="Edit AI message contents textbox"]) {
  2229. .css-1q3je8v {
  2230. width: 90vw;
  2231. }
  2232. [aria-label="Edit AI message contents textbox"]:not(:focus),
  2233. [aria-label="Edit AI message contents textbox"]:focus {
  2234. height: 600px;
  2235. margin-left: .5em;
  2236. max-width: calc(100% - 1em);
  2237. min-height: 600px;
  2238. }
  2239. }
  2240. /* ===== Textarea box ===== */
  2241. /* Textarea opacity */
  2242. .css-b9bzmp {
  2243. align-self: flex-end;
  2244. background-color: rgba(16, 16, 16, textareabgopacity);
  2245. bottom: 0;
  2246. right: 0;
  2247. padding: .75em;
  2248. position: fixed;
  2249. width: 100%;
  2250. z-index: 1;
  2251. }
  2252. /* Textarea opacity */
  2253. .css-b9bzmp textarea {
  2254. opacity: textareaopacity;
  2255. }
  2256.  
  2257. /* Invert extras and textarea to prevent problems with sidebar */
  2258. .css-b9bzmp .css-14dkl09 {
  2259. order: 2;
  2260. }
  2261. .css-b9bzmp .css-2jbc1u {
  2262. order: 1;
  2263. }
  2264. textarea[aria-label="Attached link textarea"] {
  2265. margin: 1em calc(36px + 1em + .1em) 1em .1em;
  2266. max-width: 100%;
  2267. overflow-x: auto;
  2268. padding: 16px;
  2269. vertical-align: middle;
  2270. width: auto;
  2271. white-space: nowrap;
  2272. }
  2273. /* Extras */
  2274. /* + icon */
  2275. [aria-label="expand addons"]:hover svg {
  2276. background: url("data:image/svg+xml,%3Csvg fill='url(%23A)' stroke-width='0' viewBox='0 0 16 16' focusable='false' class='chakra-icon css-2brzet' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'%3E%3C/path%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'%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") no-repeat;
  2277. background-size: cover;
  2278. filter: invert(avatarinvert);
  2279. height: 0;
  2280. padding-left: 28px;
  2281. padding-top: 28px;
  2282. width: 0;
  2283. }
  2284. /* Back icon */
  2285. [aria-label="collapse extras"]:hover svg {
  2286. background: url("data:image/svg+xml,%3Csvg fill='url(%23A)' stroke-width='0' viewBox='0 0 16 16' focusable='false' class='chakra-icon css-1lurkvs' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'%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") no-repeat;
  2287. background-size: cover;
  2288. filter: invert(avatarinvert);
  2289. height: 0;
  2290. padding-left: 24px;
  2291. padding-top: 24px;
  2292. width: 0;
  2293. }
  2294. /* Add image/video icon */
  2295. [aria-label="add image/video"]:hover svg {
  2296. background: url("data:image/svg+xml,%3Csvg fill='url(%23A)' stroke-width='0' viewBox='0 0 640 512' focusable='false' class='chakra-icon css-5xmvpk' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M608 0H160a32 32 0 0 0-32 32v96h160V64h192v320h128a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zM232 103a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9V73a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm352 208a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9v-30a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm0-104a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9v-30a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm0-104a9 9 0 0 1-9 9h-30a9 9 0 0 1-9-9V73a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm-168 57H32a32 32 0 0 0-32 32v288a32 32 0 0 0 32 32h384a32 32 0 0 0 32-32V192a32 32 0 0 0-32-32zM96 224a32 32 0 1 1-32 32 32 32 0 0 1 32-32zm288 224H64v-32l64-64 32 32 128-128 96 96z'%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") no-repeat;
  2297. background-size: cover;
  2298. filter: invert(avatarinvert);
  2299. height: 0;
  2300. padding-left: 30px;
  2301. padding-top: 30px;
  2302. width: 0;
  2303. }
  2304. /* Use internet icon */
  2305. [aria-label="use internet"]:hover svg {
  2306. background: url("data:image/svg+xml,%3Csvg fill='url(%23A)' stroke-width='0' viewBox='0 0 16 16' focusable='false' class='chakra-icon css-2brzet' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7 7 0 0 0 13.745 12H11.91a9.3 9.3 0 0 1-.64 1.539 7 7 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z'%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") no-repeat;
  2307. background-size: cover;
  2308. filter: invert(avatarinvert);
  2309. height: 0;
  2310. padding-left: 28px;
  2311. padding-top: 28px;
  2312. width: 0;
  2313. }
  2314. /* Attach link icon */
  2315. [aria-label="attach link"]:hover svg {
  2316. background: url("data:image/svg+xml,%3Csvg fill='url(%23A)' stroke-width='0' viewBox='0 0 16 16' focusable='false' class='chakra-icon css-11gzyl8' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z'%3E%3C/path%3E%3Cpath d='M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z'%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") no-repeat;
  2317. background-size: cover;
  2318. filter: invert(avatarinvert);
  2319. height: 0;
  2320. padding-left: 36px;
  2321. padding-top: 36px;
  2322. width: 0;
  2323. }
  2324. /* Suggest message button */
  2325. [aria-label="Suggest message"] {
  2326. top: 50%;
  2327. transform: translateY(-50%);
  2328. }
  2329. [aria-label="Suggest message"]:hover::before {
  2330. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  2331. background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  2332. border-radius: 1em;
  2333. bottom: 2.5em;
  2334. color: var(--chakra-colors-primaryWhite);
  2335. content: "Suggest message";
  2336. font-family: var(--fontfamily);
  2337. font-size: fontsize;
  2338. font-weight: normal;
  2339. line-height: 1.2;
  2340. right: 0;
  2341. padding: .5em;
  2342. position: fixed;
  2343. transition: 0.3s linear ease-in-out;
  2344. white-space: nowrap;
  2345. }
  2346. [aria-label="Suggest message"]:hover svg {
  2347. background: url("data:image/svg+xml,%3Csvg fill='url(%23A)' stroke-width='0' viewBox='0 0 1024 1024' height='24px' width='24px' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1020.51 429.376L917.727 275.698l51.152-178.816c3.184-11.216.064-23.28-8.224-31.504-8.256-8.256-20.256-11.311-31.536-8.031l-178.512 52.128L596.319 5.57c-9.712-6.529-22.16-7.313-32.464-1.937-10.369 5.312-17.025 15.871-17.409 27.503l-5.536 185.936-146.496 114.592c-9.183 7.184-13.712 18.816-11.872 30.32s9.808 21.087 20.816 25.023l137.456 49.28c-.928.736-1.904 1.393-2.768 2.257L7.294 969.297c-12.496 12.496-12.496 32.752 0 45.248 6.256 6.256 14.432 9.376 22.624 9.376 8.192 0 16.368-3.12 22.624-9.376l530.752-530.752c2.065-2.064 3.664-4.4 5.04-6.816l53.792 147.552a32.058 32.058 0 0 0 25.152 20.656c1.631.256 3.28.368 4.912.368A32.044 32.044 0 0 0 697.5 633.12l113.776-147.168 183.904-6.56c11.664-.4 22.16-7.12 27.44-17.535 5.264-10.384 4.448-22.848-2.112-32.48zm-226.461-6.83c-9.504.32-18.368 4.882-24.192 12.401l-87.472 113.104-48.976-134.32c-3.248-8.944-10.32-15.936-19.28-19.152l-134.592-48.256 112.624-88.064c7.504-5.872 11.968-14.752 12.288-24.256l4.256-142.944 118.592 79.872a32.192 32.192 0 0 0 26.849 4.191l137.248-40.095-39.344 137.472a32.18 32.18 0 0 0 4.336 26.848l80.56 118.128z'%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") no-repeat;
  2348. background-size: cover;
  2349. height: 0;
  2350. padding-left: 24px;
  2351. padding-top: 24px;
  2352. width: 0;
  2353. }
  2354. /* Auto-selfie modal */
  2355. .css-mwrqw9,
  2356. .css-mwrqw9 > div {
  2357. max-width: 60vw !important;
  2358. }
  2359. .css-mwrqw9 [aria-label="Confirm"] {
  2360. display: flex;
  2361. justify-self: center;
  2362. width: fit-content;
  2363. }
  2364. /* ===== Customizations ===== */
  2365. /* Bubble when a kin is writing */
  2366. .css-1ib244v {
  2367. align-items: center;
  2368. }
  2369. /* Date in bubble */
  2370. .css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1),
  2371. .css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(1):empty,
  2372. .css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(1),
  2373. .css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(1):empty {
  2374. z-index: 0;
  2375. }
  2376. .css-1dhayxc .css-1iqgkq5,
  2377. .css-yhhl9h .css-160fgw0 {
  2378. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  2379. -webkit-background-clip: text;
  2380. background-clip: text;
  2381. color: transparent;
  2382. filter: invert(avatarinvert);
  2383. font-family: fontfamily, sans-serif;
  2384. font-size: fontsize;
  2385. font-weight: normal;
  2386. white-space: nowrap;
  2387. }
  2388. /* More options icons */
  2389. [aria-label="more-options"] {
  2390. align-self: center !important;
  2391. background: transparent;
  2392. margin-left: 2em;
  2393. }
  2394. [aria-label="more-options"]:hover {
  2395. background: transparent;
  2396. }
  2397. [aria-label="more-options"] > span {
  2398. color: var(--chakra-colors-primaryWhite) !important;
  2399. background: transparent;
  2400. font-size: 36px !important;
  2401. }
  2402. [aria-label="more-options"]:hover > span {
  2403. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  2404. background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  2405. box-sizing: border-box;
  2406. -webkit-background-clip: text;
  2407. -moz-background-clip: text;
  2408. background-clip: text;
  2409. -webkit-text-fill-color: transparent;
  2410. -moz-text-fill-color: transparent;
  2411. color: transparent;
  2412. filter: invert(avatarinvert);
  2413. }
  2414. /* Hide names in bubbles to save place */
  2415. if hidenames {
  2416. .css-k008qs > p:first-child {
  2417. display: none;
  2418. }
  2419. .css-1cs12kv {
  2420. height: 0;
  2421. }
  2422. [src*="/_next/static/media/playIcon"],
  2423. [src*="/_next/static/media/stopIcon"] {
  2424. pointer-events: auto !important;
  2425. z-index: 9999 !important;
  2426. }
  2427. [src*="/_next/static/media/playIcon"],
  2428. [src*="/_next/static/media/stopIcon"],
  2429. .css-fujl5p .chakra-spinner,
  2430. .css-fujl5p:has(.css-qfa1mb) .css-qfa1mb {
  2431. height: 36px;
  2432. margin-left: -70px;
  2433. pointer-events: none;
  2434. position: absolute;
  2435. top: 50%;
  2436. transition: transform 0.3s ease;
  2437. width: 36px;
  2438. }
  2439. [src*="/_next/static/media/playIcon"],
  2440. [src*="/_next/static/media/stopIcon"],
  2441. .css-fujl5p .chakra-spinner {
  2442. transform: translateY(-50%);
  2443. }
  2444. .css-fujl5p:has(.css-qfa1mb) [src*="/_next/static/media/playIcon"],
  2445. .css-fujl5p:has(.css-qfa1mb) [src*="/_next/static/media/stopIcon"],
  2446. .css-fujl5p:has(.css-qfa1mb) .chakra-spinner {
  2447. transform: translateY(-100%);
  2448. }
  2449. .css-fujl5p:has(.css-qfa1mb) .css-qfa1mb {
  2450. transform: translateY(25%);
  2451. }
  2452. .css-yhhl9h > .css-fujl5p,
  2453. .css-yhhl9h > .css-116lnl0 {
  2454. margin-left: 50px;
  2455. }
  2456. .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) {
  2457. margin-left: -6em !important;
  2458. margin-right: auto;
  2459. }
  2460. }
  2461. /* Create new scenario and favorite icons on left and bigger */
  2462. .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) {
  2463. margin-left: -9em;
  2464. margin-right: auto;
  2465. }
  2466. .css-1dhayxc:has([aria-label="Create new scenario"]) {
  2467. [src*="/_next/static/media/editIcon"] {
  2468. margin-left: -5em;
  2469. margin-right: auto;
  2470. }
  2471. }
  2472. }
  2473.  
  2474. @-moz-document url-prefix("https://kindroid.ai/home") {
  2475. /* ====================================================
  2476. Chat page
  2477. ==================================================== */
  2478. /* ===== Wide mode ===== */
  2479. .css-213aa4,
  2480. .css-na0gqx {
  2481. box-sizing: border-box;
  2482. max-height: 100vh;
  2483. max-width: 100vw;
  2484. position: relative;
  2485. }
  2486. /* ===== Avatar box ===== */
  2487. .css-213aa4 > div:nth-of-type(2),
  2488. .css-na0gqx > div:nth-of-type(2) {
  2489. margin: 0 1em;
  2490. max-width: avatarsize;
  2491. min-width: avatarsize;
  2492. padding: 0;
  2493. transition: 0.3s linear ease-in-out;
  2494. }
  2495. /* Hide reduce button on avatar */
  2496. @media screen and (min-width: 900px) {
  2497. .css-b5a3z7 {
  2498. display: none;
  2499. }
  2500. }
  2501. /* ===== Chat box ===== */
  2502. .css-213aa4 > div:nth-of-type(3),
  2503. .css-na0gqx > div:nth-of-type(3) {
  2504. border-right: 1px solid #cbcbcb;
  2505. margin: 0 3.5em 71px 0;
  2506. max-width: 100%;
  2507. padding: 0 1em 0 0;
  2508. }
  2509. /* Modification of rounded corners for our bubbles */
  2510. .css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) {
  2511. border-radius: 1em .5em 1em 1em !important;
  2512. }
  2513.  
  2514. /* Modification of rounded corners for AI bubbles */
  2515. .css-1ulhpcc,
  2516. .css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(2) {
  2517. border-radius: .5em 1em 1em 1em !important;
  2518. }
  2519. /* Vertically center bubbles */
  2520. .css-yhhl9h:last-child > div:nth-of-type(2) {
  2521. margin-top: auto;
  2522. }
  2523. /* ===== Customizations ===== */
  2524. /* Vanilla avatar */
  2525. .css-213aa4 > div:nth-of-type(2) > div,
  2526. .css-na0gqx > div:nth-of-type(2) > div {
  2527. border-radius: 1em;
  2528. }
  2529. /* Avatar brightness, contrast, grayscale */
  2530. .css-1dhayxc::after,
  2531. .css-yhhl9h::before,
  2532. .css-213aa4 > div:nth-of-type(2) > div > img,
  2533. .css-na0gqx > div:nth-of-type(2) > div > img,
  2534. .css-213aa4 > div:nth-of-type(2) > div > video,
  2535. .css-na0gqx > div:nth-of-type(2) > div > video {
  2536. filter: brightness(avatarbrightness) contrast(avatarcontrast) grayscale(avatargrayscale) invert(avatarinvert) !important;
  2537. }
  2538. /* Avatar chat */
  2539. if avatarchat && avatarchoice {
  2540. .css-213aa4 > div:nth-of-type(2),
  2541. .css-na0gqx > div:nth-of-type(2) {
  2542. display: none;
  2543. height: 0;
  2544. transition: 0.3s linear ease-in-out;
  2545. width: 0;
  2546. }
  2547.  
  2548. /* Adjust bubbles size depending on avatar size */
  2549. .css-1dhayxc > .css-fujl5p,
  2550. .css-1dhayxc > .css-116lnl0,
  2551. .css-yhhl9h > .css-fujl5p,
  2552. .css-yhhl9h > .css-116lnl0 {
  2553. max-width: calc(80% - var(--avatarchatgroupsize));
  2554. }
  2555. .css-yhhl9h::before {
  2556. background: url(avatarchoiceurl) center center / cover no-repeat;
  2557. border-radius: 1em;
  2558. content: "";
  2559. height: avatarchatgroupsize;
  2560. margin-left: 16px;
  2561. min-width: avatarchatgroupsize;
  2562. transition: 0.3s linear ease-in-out;
  2563. width: avatarchatgroupsize;
  2564. }
  2565. .css-4qwruq:has([aria-label="Create new scenario"]) {
  2566. .css-1dhayxc,
  2567. .css-yhhl9h {
  2568. padding-top: 0 !important;
  2569. }
  2570. }
  2571. if avatarchoiceforus {
  2572. .css-1dhayxc::after {
  2573. background: url(avatarchoiceforusurl) center center / cover no-repeat;
  2574. border-radius: 1em;
  2575. content: "";
  2576. height: avatarchatgroupsize;
  2577. min-width: avatarchatgroupsize;
  2578. transition: 0.3s linear ease-in-out;
  2579. width: avatarchatgroupsize;
  2580. }
  2581. }
  2582. }
  2583. /* Avatar choice */
  2584. if avatarchoice {
  2585. .css-213aa4 > div:nth-of-type(2) > div img,
  2586. .css-na0gqx > div:nth-of-type(2) > div img {
  2587. background: url(avatarchoiceurl) center center / cover no-repeat;
  2588. height: 0;
  2589. padding-left: avatarsize;
  2590. padding-top: avatarsize;
  2591. transition: 0.3s linear ease-in-out;
  2592. width: 0;
  2593. }
  2594. }
  2595. /* Avatar flip, rotate, zoom */
  2596. if (avatarflip=="avatarflipdefault") {
  2597. .css-1dhayxc::after,
  2598. .css-yhhl9h::before,
  2599. .css-213aa4 > div:nth-of-type(2) > div > img,
  2600. .css-na0gqx > div:nth-of-type(2) > div > img,
  2601. .css-213aa4 > div:nth-of-type(2) > div > video,
  2602. .css-na0gqx > div:nth-of-type(2) > div > video {
  2603. transform: rotate(avatarrotate) scale(avatarzoom);
  2604. }
  2605. }
  2606. if (avatarflip=="avatarfliphorizontally") {
  2607. .css-1dhayxc::after,
  2608. .css-yhhl9h::before,
  2609. .css-213aa4 > div:nth-of-type(2) > div > img,
  2610. .css-na0gqx > div:nth-of-type(2) > div > img,
  2611. .css-213aa4 > div:nth-of-type(2) > div > video,
  2612. .css-na0gqx > div:nth-of-type(2) > div > video {
  2613. transform: rotate(avatarrotate) scale(avatarzoom) scaleX(-1) !important;
  2614. }
  2615. }
  2616. if (avatarflip=="avatarflipvertically") {
  2617. .css-1dhayxc::after,
  2618. .css-yhhl9h::before,
  2619. .css-213aa4 > div:nth-of-type(2) > div > img,
  2620. .css-na0gqx > div:nth-of-type(2) > div > img,
  2621. .css-213aa4 > div:nth-of-type(2) > div > video,
  2622. .css-na0gqx > div:nth-of-type(2) > div > video {
  2623. transform: rotate(avatarrotate) scale(avatarzoom) scaleY(-1) !important;
  2624. }
  2625. }
  2626. if (avatarflip=="avatarfliphorizontallyvertically") {
  2627. .css-1dhayxc::after,
  2628. .css-yhhl9h::before,
  2629. .css-213aa4 > div:nth-of-type(2) > div > img,
  2630. .css-na0gqx > div:nth-of-type(2) > div > img,
  2631. .css-213aa4 > div:nth-of-type(2) > div > video,
  2632. .css-na0gqx > div:nth-of-type(2) > div > video {
  2633. transform: rotate(avatarrotate) scale(calc(var(--avatarzoom) * -1)) !important;
  2634. }
  2635. }
  2636.  
  2637. /* Avatar hoverzoom */
  2638. if avatarhoverzoom {
  2639. .css-213aa4 > div:nth-of-type(2) > div > img:hover,
  2640. .css-na0gqx > div:nth-of-type(2) > div > img:hover,
  2641. .css-213aa4 > div:nth-of-type(2) > div > video:hover,
  2642. .css-na0gqx > div:nth-of-type(2) > div > video:hover {
  2643. aspect-ratio: 1 / 1;
  2644. border-radius: 0 !important;
  2645. max-height: 100vh !important;
  2646. min-height: 100vh !important;
  2647. left: 0;
  2648. position: fixed !important;
  2649. top: 0 !important;
  2650. min-width: fit-content;
  2651. width: auto !important;
  2652. z-index: 9999 !important;
  2653. }
  2654. if avatarchoice {
  2655. .css-213aa4 > div:nth-of-type(2) > div:hover > img,
  2656. .css-na0gqx > div:nth-of-type(2) > div:hover > img,
  2657. .css-213aa4 > div:nth-of-type(2) > div:hover > video,
  2658. .css-na0gqx > div:nth-of-type(2) > div:hover > video {
  2659. display: none;
  2660. }
  2661. .css-213aa4 > div:nth-of-type(2) > div:hover::after,
  2662. .css-na0gqx > div:nth-of-type(2) > div:hover::after {
  2663. content: "";
  2664. background: url(avatarchoiceurl) center center / cover no-repeat;
  2665. aspect-ratio: 1 / 1;
  2666. border-radius: 0 !important;
  2667. max-height: 100vh !important;
  2668. min-height: 100vh !important;
  2669. left: 0;
  2670. position: fixed !important;
  2671. top: 0 !important;
  2672. min-width: fit-content;
  2673. width: auto !important;
  2674. z-index: 9999 !important;
  2675. }
  2676. }
  2677. }
  2678. /* Avatar mix blend mode */
  2679. if (avatarmixblend=="avatarmixdefault") {
  2680. .css-1dhayxc::after,
  2681. .css-yhhl9h::before,
  2682. .css-213aa4 > div:nth-of-type(2) > div > img,
  2683. .css-na0gqx > div:nth-of-type(2) > div > img,
  2684. .css-213aa4 > div:nth-of-type(2) > div > video:active,
  2685. .css-na0gqx > div:nth-of-type(2) > div > video:active {
  2686. mix-blend-mode: normal;
  2687. }
  2688. }
  2689. if (avatarmixblend=="avatarmixcolor") {
  2690. .css-1dhayxc::after,
  2691. .css-yhhl9h::before,
  2692. .css-213aa4 > div:nth-of-type(2) > div > img,
  2693. .css-na0gqx > div:nth-of-type(2) > div > img,
  2694. .css-213aa4 > div:nth-of-type(2) > div > video:active,
  2695. .css-na0gqx > div:nth-of-type(2) > div > video:active {
  2696. mix-blend-mode: color !important;
  2697. }
  2698. }
  2699. if (avatarmixblend=="avatarmixcolorburn") {
  2700. .css-1dhayxc::after,
  2701. .css-yhhl9h::before,
  2702. .css-213aa4 > div:nth-of-type(2) > div > img,
  2703. .css-na0gqx > div:nth-of-type(2) > div > img,
  2704. .css-213aa4 > div:nth-of-type(2) > div > video:active,
  2705. .css-na0gqx > div:nth-of-type(2) > div > video:active {
  2706. mix-blend-mode: color-burn !important;
  2707. }
  2708. }
  2709. if (avatarmixblend=="avatarmixcolordodge") {
  2710. .css-1dhayxc::after,
  2711. .css-yhhl9h::before,
  2712. .css-213aa4 > div:nth-of-type(2) > div > img,
  2713. .css-na0gqx > div:nth-of-type(2) > div > img,
  2714. .css-213aa4 > div:nth-of-type(2) > div > video:active,
  2715. .css-na0gqx > div:nth-of-type(2) > div > video:active {
  2716. mix-blend-mode: color-dodge !important;
  2717. }
  2718. }
  2719. if (avatarmixblend=="avatarmixdarken") {
  2720. .css-1dhayxc::after,
  2721. .css-yhhl9h::before,
  2722. .css-213aa4 > div:nth-of-type(2) > div > img,
  2723. .css-na0gqx > div:nth-of-type(2) > div > img,
  2724. .css-213aa4 > div:nth-of-type(2) > div > video:active,
  2725. .css-na0gqx > div:nth-of-type(2) > div > video:active {
  2726. mix-blend-mode: darken !important;
  2727. }
  2728. }
  2729. if (avatarmixblend=="avatarmixdifference") {
  2730. .css-1dhayxc::after,
  2731. .css-yhhl9h::before,
  2732. .css-213aa4 > div:nth-of-type(2) > div > img,
  2733. .css-na0gqx > div:nth-of-type(2) > div > img,
  2734. .css-213aa4 > div:nth-of-type(2) > div > video:active,
  2735. .css-na0gqx > div:nth-of-type(2) > div > video:active {
  2736. mix-blend-mode: difference !important;
  2737. }
  2738. }
  2739. if (avatarmixblend=="avatarmixexclusion") {
  2740. .css-1dhayxc::after,
  2741. .css-yhhl9h::before,
  2742. .css-213aa4 > div:nth-of-type(2) > div > img,
  2743. .css-na0gqx > div:nth-of-type(2) > div > img,
  2744. .css-213aa4 > div:nth-of-type(2) > div > video:active,
  2745. .css-na0gqx > div:nth-of-type(2) > div > video:active {
  2746. mix-blend-mode: exclusion !important;
  2747. }
  2748. }
  2749. if (avatarmixblend=="avatarmixhardlight") {
  2750. .css-1dhayxc::after,
  2751. .css-yhhl9h::before,
  2752. .css-213aa4 > div:nth-of-type(2) > div > img,
  2753. .css-na0gqx > div:nth-of-type(2) > div > img,
  2754. .css-213aa4 > div:nth-of-type(2) > div > video:active,
  2755. .css-na0gqx > div:nth-of-type(2) > div > video:active {
  2756. mix-blend-mode: hard-light !important;
  2757. }
  2758. }
  2759. if (avatarmixblend=="avatarmixhue") {
  2760. .css-1dhayxc::after,
  2761. .css-yhhl9h::before,
  2762. .css-213aa4 > div:nth-of-type(2) > div > img,
  2763. .css-na0gqx > div:nth-of-type(2) > div > img,
  2764. .css-213aa4 > div:nth-of-type(2) > div > video:active,
  2765. .css-na0gqx > div:nth-of-type(2) > div > video:active {
  2766. mix-blend-mode: hue !important;
  2767. }
  2768. }
  2769. if (avatarmixblend=="avatarmixlighten") {
  2770. .css-1dhayxc::after,
  2771. .css-yhhl9h::before,
  2772. .css-213aa4 > div:nth-of-type(2) > div > img,
  2773. .css-na0gqx > div:nth-of-type(2) > div > img,
  2774. .css-213aa4 > div:nth-of-type(2) > div > video:active,
  2775. .css-na0gqx > div:nth-of-type(2) > div > video:active {
  2776. mix-blend-mode: lighten !important;
  2777. }
  2778. }
  2779. if (avatarmixblend=="avatarmixluminosity") {
  2780. .css-1dhayxc::after,
  2781. .css-yhhl9h::before,
  2782. .css-213aa4 > div:nth-of-type(2) > div > img,
  2783. .css-na0gqx > div:nth-of-type(2) > div > img,
  2784. .css-213aa4 > div:nth-of-type(2) > div > video:active,
  2785. .css-na0gqx > div:nth-of-type(2) > div > video:active {
  2786. mix-blend-mode: luminosity !important;
  2787. }
  2788. }
  2789. if (avatarmixblend=="avatarmixmultiply") {
  2790. .css-1dhayxc::after,
  2791. .css-yhhl9h::before,
  2792. .css-213aa4 > div:nth-of-type(2) > div > img,
  2793. .css-na0gqx > div:nth-of-type(2) > div > img,
  2794. .css-213aa4 > div:nth-of-type(2) > div > video:active,
  2795. .css-na0gqx > div:nth-of-type(2) > div > video:active {
  2796. mix-blend-mode: multiply !important;
  2797. }
  2798. }
  2799. if (avatarmixblend=="avatarmixoverlay") {
  2800. .css-1dhayxc::after,
  2801. .css-yhhl9h::before,
  2802. .css-213aa4 > div:nth-of-type(2) > div > img,
  2803. .css-na0gqx > div:nth-of-type(2) > div > img,
  2804. .css-213aa4 > div:nth-of-type(2) > div > video:active,
  2805. .css-na0gqx > div:nth-of-type(2) > div > video:active {
  2806. mix-blend-mode: overlay !important;
  2807. }
  2808. }
  2809. if (avatarmixblend=="avatarmixpluslighter") {
  2810. .css-1dhayxc::after,
  2811. .css-yhhl9h::before,
  2812. .css-213aa4 > div:nth-of-type(2) > div > img,
  2813. .css-na0gqx > div:nth-of-type(2) > div > img,
  2814. .css-213aa4 > div:nth-of-type(2) > div > video:active,
  2815. .css-na0gqx > div:nth-of-type(2) > div > video:active {
  2816. mix-blend-mode: plus-lighter !important;
  2817. }
  2818. }
  2819. if (avatarmixblend=="avatarmixsaturation") {
  2820. .css-1dhayxc::after,
  2821. .css-yhhl9h::before,
  2822. .css-213aa4 > div:nth-of-type(2) > div > img,
  2823. .css-na0gqx > div:nth-of-type(2) > div > img,
  2824. .css-213aa4 > div:nth-of-type(2) > div > video:active,
  2825. .css-na0gqx > div:nth-of-type(2) > div > video:active {
  2826. mix-blend-mode: saturation !important;
  2827. }
  2828. }
  2829. if (avatarmixblend=="avatarmixscreen") {
  2830. .css-1dhayxc::after,
  2831. .css-yhhl9h::before,
  2832. .css-213aa4 > div:nth-of-type(2) > div > img,
  2833. .css-na0gqx > div:nth-of-type(2) > div > img,
  2834. .css-213aa4 > div:nth-of-type(2) > div > video:active,
  2835. .css-na0gqx > div:nth-of-type(2) > div > video:active {
  2836. mix-blend-mode: screen !important;
  2837. }
  2838. }
  2839. if (avatarmixblend=="avatarmixsoftlight") {
  2840. .css-1dhayxc::after,
  2841. .css-yhhl9h::before,
  2842. .css-213aa4 > div:nth-of-type(2) > div > img,
  2843. .css-na0gqx > div:nth-of-type(2) > div > img,
  2844. .css-213aa4 > div:nth-of-type(2) > div > video:active,
  2845. .css-na0gqx > div:nth-of-type(2) > div > video:active {
  2846. mix-blend-mode: soft-light !important;
  2847. }
  2848. }
  2849.  
  2850. /* Avatar on right side */
  2851. if avataronrightside {
  2852. .css-213aa4 > div:nth-of-type(2),
  2853. .css-na0gqx > div:nth-of-type(2) {
  2854. border-right: 1px solid #cbcbcb;
  2855. margin-right: calc(36px + 1em);
  2856. padding-right: 2em;
  2857. order: 2;
  2858. }
  2859. .css-213aa4 > div:nth-of-type(3),
  2860. .css-na0gqx > div:nth-of-type(3) {
  2861. border-right: 0 !important;
  2862. margin-left: 1em !important;
  2863. margin-right: 0 !important;
  2864. order: 1;
  2865. }
  2866. }
  2867. /* Avatar opacity */
  2868. .css-1dhayxc::after,
  2869. .css-yhhl9h::before,
  2870. .css-213aa4 > div:nth-of-type(2) > div > img,
  2871. .css-na0gqx > div:nth-of-type(2) > div > img,
  2872. .css-213aa4 > div:nth-of-type(2) > div > video:active,
  2873. .css-na0gqx > div:nth-of-type(2) > div > video:active {
  2874. opacity: avataropacity !important;
  2875. }
  2876. /* Avatar position */
  2877. .css-213aa4 > div:nth-of-type(2) > div,
  2878. .css-na0gqx > div:nth-of-type(2) > div {
  2879. top: avatarposition;
  2880. transition: 0.3s linear ease-in-out;
  2881. }
  2882. /* Avatar styles */
  2883. if (avatarstyles=="avataralien") || (avatarstyles=="avatarapple") || (avatarstyles=="avataratom") || (avatarstyles=="avatarbookmark") || (avatarstyles=="avatarcannabis") || (avatarstyles=="avatarchatbubble") || (avatarstyles=="avatarchefhat") || (avatarstyles=="avatarcloud") || (avatarstyles=="avatarcog") || (avatarstyles=="avatarcrystal") || (avatarstyles=="avatardevil") || (avatarstyles=="avatargem") || (avatarstyles=="avatarghost") || (avatarstyles=="avatargift") || (avatarstyles=="avatarheart") || (avatarstyles=="avataroctagon") || (avatarstyles=="avatarpentagon") || (avatarstyles=="avatarrabbit") || (avatarstyles=="avatarratio") || (avatarstyles=="avatarshield") || (avatarstyles=="avatarshipwheel") || (avatarstyles=="avatarshirt") || (avatarstyles=="avatarslime") || (avatarstyles=="avatarsmartphone") || (avatarstyles=="avatarsquircle") || (avatarstyles=="avatarstar") || (avatarstyles=="avatartablet") || (avatarstyles=="avatartreedeciduous") || (avatarstyles=="avatartreepine") || (avatarstyles=="avatartriangle") || (avatarstyles=="avatarvenetianmask") {
  2884. .css-1dhayxc::after,
  2885. .css-yhhl9h::before,
  2886. .css-213aa4 > div:nth-of-type(2) > div > img,
  2887. .css-na0gqx > div:nth-of-type(2) > div > img,
  2888. .css-213aa4 > div:nth-of-type(2) > div > video,
  2889. .css-na0gqx > div:nth-of-type(2) > div > video {
  2890. -webkit-mask-position: center;
  2891. mask-position: center;
  2892. -webkit-mask-repeat: no-repeat;
  2893. mask-repeat: no-repeat;
  2894. -webkit-mask-size: cover;
  2895. mask-size: cover;
  2896. max-height: 100%;
  2897. max-width: 100%;
  2898. object-fit: cover;
  2899. transition: 0.3s linear ease-in-out;
  2900. }
  2901. }
  2902. if (avatarstyles=="avatardefault") {
  2903. .css-1dhayxc::after,
  2904. .css-yhhl9h::before,
  2905. .css-213aa4 > div:nth-of-type(2) > div > img,
  2906. .css-na0gqx > div:nth-of-type(2) > div > img,
  2907. .css-213aa4 > div:nth-of-type(2) > div > video,
  2908. .css-na0gqx > div:nth-of-type(2) > div > video {
  2909. transition: 0.3s linear ease-in-out;
  2910. }
  2911. }
  2912. if (avatarstyles=="avataralien") {
  2913. .css-1dhayxc::after,
  2914. .css-yhhl9h::before,
  2915. .css-213aa4 > div:nth-of-type(2) > div > img,
  2916. .css-na0gqx > div:nth-of-type(2) > div > img,
  2917. .css-213aa4 > div:nth-of-type(2) > div > video,
  2918. .css-na0gqx > div:nth-of-type(2) > div > video {
  2919. -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.382 9.4054c-.0649-.6486-.1297-1.3622-.2595-2.0108-.1297-.6487-.2594-1.2973-.5189-1.946-.1297-.3243-.2595-.6486-.3892-.908-.1297-.3244-.3243-.5838-.454-.9082-.1946-.2594-.3892-.5838-.5838-.8432-.1946-.2595-.454-.519-.7135-.7135-.454-.3892-.973-.7784-1.5568-1.1027-.5838-.3244-1.2324-.5838-1.881-.7135C13.3765.0649 12.7278 0 12.0143 0c-.7135 0-1.3621.0649-2.0108.2595C9.355.3892 8.7712.6486 8.1874.973c-.6487.3243-1.1676.7135-1.6865 1.1675-.2595.1946-.454.454-.7135.7136l-.5838.7783c-.1297.3244-.3243.5838-.454.9081l-.3892.973c-.1946.6487-.3892 1.2973-.519 1.946-.1297.6486-.1946 1.2973-.2594 2.0108-.0649.7135 0 1.2973 0 1.946 0 .6486.0648 1.2972.1946 2.0107l.1946.973c.0648.3243.1946.6486.3243.973.454 1.2324 1.1676 2.4 1.881 3.5027.3893.5838.7785 1.1027 1.1676 1.6216.3892.519.7784 1.1027 1.2325 1.5568.1946.2594.454.454.7135.7135.2594.1946.519.3892.8432.5837.2595.1946.5838.3244.9081.4541.1298.0649.3244.1297.4541.1297.1946 0 .3243.0649.519.0649.1945 0 .3242 0 .5188-.0649.1946 0 .3244-.0648.454-.1297.3244-.1297.6487-.2595.9082-.454.2595-.1946.5838-.3892.8432-.5838.2595-.1946.519-.454.7136-.7135.454-.519.8432-1.0379 1.2324-1.5568.3892-.519.7784-1.1027 1.1676-1.6216.7135-1.1027 1.427-2.2703 1.881-3.5027.1298-.3244.2595-.6487.3244-.973.0648-.3243.1946-.6486.1946-.973.1297-.6486.1945-1.2973.1945-2.0108 0-.6486 0-1.3621-.0648-2.0108'/%3E%3C/svg%3E");
  2920. mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.382 9.4054c-.0649-.6486-.1297-1.3622-.2595-2.0108-.1297-.6487-.2594-1.2973-.5189-1.946-.1297-.3243-.2595-.6486-.3892-.908-.1297-.3244-.3243-.5838-.454-.9082-.1946-.2594-.3892-.5838-.5838-.8432-.1946-.2595-.454-.519-.7135-.7135-.454-.3892-.973-.7784-1.5568-1.1027-.5838-.3244-1.2324-.5838-1.881-.7135C13.3765.0649 12.7278 0 12.0143 0c-.7135 0-1.3621.0649-2.0108.2595C9.355.3892 8.7712.6486 8.1874.973c-.6487.3243-1.1676.7135-1.6865 1.1675-.2595.1946-.454.454-.7135.7136l-.5838.7783c-.1297.3244-.3243.5838-.454.9081l-.3892.973c-.1946.6487-.3892 1.2973-.519 1.946-.1297.6486-.1946 1.2973-.2594 2.0108-.0649.7135 0 1.2973 0 1.946 0 .6486.0648 1.2972.1946 2.0107l.1946.973c.0648.3243.1946.6486.3243.973.454 1.2324 1.1676 2.4 1.881 3.5027.3893.5838.7785 1.1027 1.1676 1.6216.3892.519.7784 1.1027 1.2325 1.5568.1946.2594.454.454.7135.7135.2594.1946.519.3892.8432.5837.2595.1946.5838.3244.9081.4541.1298.0649.3244.1297.4541.1297.1946 0 .3243.0649.519.0649.1945 0 .3242 0 .5188-.0649.1946 0 .3244-.0648.454-.1297.3244-.1297.6487-.2595.9082-.454.2595-.1946.5838-.3892.8432-.5838.2595-.1946.519-.454.7136-.7135.454-.519.8432-1.0379 1.2324-1.5568.3892-.519.7784-1.1027 1.1676-1.6216.7135-1.1027 1.427-2.2703 1.881-3.5027.1298-.3244.2595-.6487.3244-.973.0648-.3243.1946-.6486.1946-.973.1297-.6486.1945-1.2973.1945-2.0108 0-.6486 0-1.3621-.0648-2.0108'/%3E%3C/svg%3E");
  2921. }
  2922. }
  2923. if (avatarstyles=="avatarapple") {
  2924. .css-1dhayxc::after,
  2925. .css-yhhl9h::before,
  2926. .css-213aa4 > div:nth-of-type(2) > div > img,
  2927. .css-na0gqx > div:nth-of-type(2) > div > img,
  2928. .css-213aa4 > div:nth-of-type(2) > div > video,
  2929. .css-na0gqx > div:nth-of-type(2) > div > video {
  2930. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z'/%3E%3Cpath d='M10 2c1 .5 2 2 2 5'/%3E%3C/svg%3E");
  2931. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z'/%3E%3Cpath d='M10 2c1 .5 2 2 2 5'/%3E%3C/svg%3E");
  2932. }
  2933. }
  2934. if (avatarstyles=="avataratom") {
  2935. .css-1dhayxc::after,
  2936. .css-yhhl9h::before,
  2937. .css-213aa4 > div:nth-of-type(2) > div > img,
  2938. .css-na0gqx > div:nth-of-type(2) > div > img,
  2939. .css-213aa4 > div:nth-of-type(2) > div > video,
  2940. .css-na0gqx > div:nth-of-type(2) > div > video {
  2941. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Cpath d='M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z'/%3E%3Cpath d='M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z'/%3E%3C/svg%3E");
  2942. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Cpath d='M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z'/%3E%3Cpath d='M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z'/%3E%3C/svg%3E");
  2943. }
  2944. }
  2945. if (avatarstyles=="avatarbookmark") {
  2946. .css-1dhayxc::after,
  2947. .css-yhhl9h::before,
  2948. .css-213aa4 > div:nth-of-type(2) > div > img,
  2949. .css-na0gqx > div:nth-of-type(2) > div > img,
  2950. .css-213aa4 > div:nth-of-type(2) > div > video,
  2951. .css-na0gqx > div:nth-of-type(2) > div > video {
  2952. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E");
  2953. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E");
  2954. }
  2955. }
  2956. if (avatarstyles=="avatarcannabis") {
  2957. .css-1dhayxc::after,
  2958. .css-yhhl9h::before,
  2959. .css-213aa4 > div:nth-of-type(2) > div > img,
  2960. .css-na0gqx > div:nth-of-type(2) > div > img,
  2961. .css-213aa4 > div:nth-of-type(2) > div > video,
  2962. .css-na0gqx > div:nth-of-type(2) > div > video {
  2963. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-4'/%3E%3Cpath d='M7 12c-1.5 0-4.5 1.5-5 3 3.5 1.5 6 1 6 1-1.5 1.5-2 3.5-2 5 2.5 0 4.5-1.5 6-3 1.5 1.5 3.5 3 6 3 0-1.5-.5-3.5-2-5 0 0 2.5.5 6-1-.5-1.5-3.5-3-5-3 1.5-1 4-4 4-6-2.5 0-5.5 1.5-7 3 0-2.5-.5-5-2-7-1.5 2-2 4.5-2 7-1.5-1.5-4.5-3-7-3 0 2 2.5 5 4 6'/%3E%3C/svg%3E");
  2964. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-4'/%3E%3Cpath d='M7 12c-1.5 0-4.5 1.5-5 3 3.5 1.5 6 1 6 1-1.5 1.5-2 3.5-2 5 2.5 0 4.5-1.5 6-3 1.5 1.5 3.5 3 6 3 0-1.5-.5-3.5-2-5 0 0 2.5.5 6-1-.5-1.5-3.5-3-5-3 1.5-1 4-4 4-6-2.5 0-5.5 1.5-7 3 0-2.5-.5-5-2-7-1.5 2-2 4.5-2 7-1.5-1.5-4.5-3-7-3 0 2 2.5 5 4 6'/%3E%3C/svg%3E");
  2965. }
  2966. }
  2967. if (avatarstyles=="avatarchatbubble") {
  2968. .css-1dhayxc::after,
  2969. .css-yhhl9h::before,
  2970. .css-213aa4 > div:nth-of-type(2) > div > img,
  2971. .css-na0gqx > div:nth-of-type(2) > div > img,
  2972. .css-213aa4 > div:nth-of-type(2) > div > video,
  2973. .css-na0gqx > div:nth-of-type(2) > div > video {
  2974. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  2975. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  2976. }
  2977. }
  2978. if (avatarstyles=="avatarchefhat") {
  2979. .css-1dhayxc::after,
  2980. .css-yhhl9h::before,
  2981. .css-213aa4 > div:nth-of-type(2) > div > img,
  2982. .css-na0gqx > div:nth-of-type(2) > div > img,
  2983. .css-213aa4 > div:nth-of-type(2) > div > video,
  2984. .css-na0gqx > div:nth-of-type(2) > div > video {
  2985. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21a1 1 0 0 0 1-1v-5.35c0-.457.316-.844.727-1.041a4 4 0 0 0-2.134-7.589 5 5 0 0 0-9.186 0 4 4 0 0 0-2.134 7.588c.411.198.727.585.727 1.041V20a1 1 0 0 0 1 1Z'/%3E%3Cpath d='M6 17h12'/%3E%3C/svg%3E");
  2986. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21a1 1 0 0 0 1-1v-5.35c0-.457.316-.844.727-1.041a4 4 0 0 0-2.134-7.589 5 5 0 0 0-9.186 0 4 4 0 0 0-2.134 7.588c.411.198.727.585.727 1.041V20a1 1 0 0 0 1 1Z'/%3E%3Cpath d='M6 17h12'/%3E%3C/svg%3E");
  2987. }
  2988. }
  2989. if (avatarstyles=="avatarcircle") {
  2990. .css-1dhayxc::after,
  2991. .css-yhhl9h::before,
  2992. .css-213aa4 > div:nth-of-type(2) > div > img,
  2993. .css-na0gqx > div:nth-of-type(2) > div > img,
  2994. .css-213aa4 > div:nth-of-type(2) > div > video,
  2995. .css-na0gqx > div:nth-of-type(2) > div > video {
  2996. border-radius: 50% !important;
  2997. transition: 0.3s linear ease-in-out;
  2998. }
  2999. }
  3000. if (avatarstyles=="avatarcloud") {
  3001. .css-1dhayxc::after,
  3002. .css-yhhl9h::before,
  3003. .css-213aa4 > div:nth-of-type(2) > div > img,
  3004. .css-na0gqx > div:nth-of-type(2) > div > img,
  3005. .css-213aa4 > div:nth-of-type(2) > div > video,
  3006. .css-na0gqx > div:nth-of-type(2) > div > video {
  3007. -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.762 4.29a6.51 6.51 0 0 0-5.669 3.332 3.571 3.571 0 0 0-1.558-.36 3.571 3.571 0 0 0-3.516 3A4.918 4.918 0 0 0 0 14.796a4.918 4.918 0 0 0 4.92 4.914 4.93 4.93 0 0 0 .617-.045h14.42c2.305-.272 4.041-2.258 4.043-4.589v-.009a4.594 4.594 0 0 0-3.727-4.508 6.51 6.51 0 0 0-6.511-6.27z'/%3E%3C/svg%3E");
  3008. mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.762 4.29a6.51 6.51 0 0 0-5.669 3.332 3.571 3.571 0 0 0-1.558-.36 3.571 3.571 0 0 0-3.516 3A4.918 4.918 0 0 0 0 14.796a4.918 4.918 0 0 0 4.92 4.914 4.93 4.93 0 0 0 .617-.045h14.42c2.305-.272 4.041-2.258 4.043-4.589v-.009a4.594 4.594 0 0 0-3.727-4.508 6.51 6.51 0 0 0-6.511-6.27z'/%3E%3C/svg%3E");
  3009. }
  3010. }
  3011. if (avatarstyles=="avatarcog") {
  3012. .css-1dhayxc::after,
  3013. .css-yhhl9h::before,
  3014. .css-213aa4 > div:nth-of-type(2) > div > img,
  3015. .css-na0gqx > div:nth-of-type(2) > div > img,
  3016. .css-213aa4 > div:nth-of-type(2) > div > video,
  3017. .css-na0gqx > div:nth-of-type(2) > div > video {
  3018. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  3019. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  3020. }
  3021. }
  3022. if (avatarstyles=="avatarcrystal") {
  3023. .css-1dhayxc::after,
  3024. .css-yhhl9h::before,
  3025. .css-213aa4 > div:nth-of-type(2) > div > img,
  3026. .css-na0gqx > div:nth-of-type(2) > div > img,
  3027. .css-213aa4 > div:nth-of-type(2) > div > video,
  3028. .css-na0gqx > div:nth-of-type(2) > div > video {
  3029. -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.964 15.266l-8.687 8.669c-.034.035-.086.052-.121.035L3.29 20.79c-.052-.017-.087-.052-.087-.086L.007 8.856c-.018-.053 0-.087.035-.122L8.728.065c.035-.035.087-.052.121-.035l11.866 3.18c.052.017.087.052.087.086l3.18 11.848c.034.053.016.087-.018.122'/%3E%3C/svg%3E");
  3030. mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.964 15.266l-8.687 8.669c-.034.035-.086.052-.121.035L3.29 20.79c-.052-.017-.087-.052-.087-.086L.007 8.856c-.018-.053 0-.087.035-.122L8.728.065c.035-.035.087-.052.121-.035l11.866 3.18c.052.017.087.052.087.086l3.18 11.848c.034.053.016.087-.018.122'/%3E%3C/svg%3E");
  3031. }
  3032. }
  3033. if (avatarstyles=="avatardevil") {
  3034. .css-1dhayxc::after,
  3035. .css-yhhl9h::before,
  3036. .css-213aa4 > div:nth-of-type(2) > div > img,
  3037. .css-na0gqx > div:nth-of-type(2) > div > img,
  3038. .css-213aa4 > div:nth-of-type(2) > div > video,
  3039. .css-na0gqx > div:nth-of-type(2) > div > video {
  3040. -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 512 512' version='1.1' fill='currentColor' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M501.966 49.426c-16.928 16.928-36.504 29.582-99.1764 50.7557 14.607 16.299 26.889 34.19 43.102 62.5834C494.0646 111.1761 509.933 73.965 512 38.484 508.837 42.236 505.501 45.891 501.966 49.426z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M10.034 49.427C6.5 45.891 3.163 42.236 0 38.485c2.066 35.481 12.317 70.571 48.6764 142.886 14.3674-25.3717 27.0445-46.5147 43.9473-71.8863C46.538 79.009 26.961 66.353 10.034 49.427z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M256.001 37.549C135.353 37.549 37.549 135.353 37.549 256s97.804 218.451 218.451 218.451c120.648 0 218.451-97.804 218.451-218.451S376.648 37.549 256.001 37.549'/%3E%3C/g%3E%3C/svg%3E");
  3041. mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 512 512' version='1.1' fill='currentColor' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M501.966 49.426c-16.928 16.928-36.504 29.582-99.1764 50.7557 14.607 16.299 26.889 34.19 43.102 62.5834C494.0646 111.1761 509.933 73.965 512 38.484 508.837 42.236 505.501 45.891 501.966 49.426z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M10.034 49.427C6.5 45.891 3.163 42.236 0 38.485c2.066 35.481 12.317 70.571 48.6764 142.886 14.3674-25.3717 27.0445-46.5147 43.9473-71.8863C46.538 79.009 26.961 66.353 10.034 49.427z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M256.001 37.549C135.353 37.549 37.549 135.353 37.549 256s97.804 218.451 218.451 218.451c120.648 0 218.451-97.804 218.451-218.451S376.648 37.549 256.001 37.549'/%3E%3C/g%3E%3C/svg%3E");
  3042. }
  3043. }
  3044. if (avatarstyles=="avatargem") {
  3045. .css-1dhayxc::after,
  3046. .css-yhhl9h::before,
  3047. .css-213aa4 > div:nth-of-type(2) > div > img,
  3048. .css-na0gqx > div:nth-of-type(2) > div > img,
  3049. .css-213aa4 > div:nth-of-type(2) > div > video,
  3050. .css-na0gqx > div:nth-of-type(2) > div > video {
  3051. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9Z'/%3E%3Cpath d='M11 3 8 9l4 13 4-13-3-6'/%3E%3Cpath d='M2 9h20'/%3E%3C/svg%3E");
  3052. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9Z'/%3E%3Cpath d='M11 3 8 9l4 13 4-13-3-6'/%3E%3Cpath d='M2 9h20'/%3E%3C/svg%3E");
  3053. }
  3054. }
  3055. if (avatarstyles=="avatarghost") {
  3056. .css-1dhayxc::after,
  3057. .css-yhhl9h::before,
  3058. .css-213aa4 > div:nth-of-type(2) > div > img,
  3059. .css-na0gqx > div:nth-of-type(2) > div > img,
  3060. .css-213aa4 > div:nth-of-type(2) > div > video,
  3061. .css-na0gqx > div:nth-of-type(2) > div > video {
  3062. -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.058 19.93c-1.01-2.29-1.185-4.228-1.212-4.99V8.67C20.846 3.882 16.886 0 12 0S3.15 3.882 3.15 8.671v6.36c-.037.82-.236 2.7-1.207 4.899-1.306 2.955-.226 2.603.742 2.36.968-.242 3.13-1.192 3.805-.022.675 1.17 1.238 2.184 2.814 1.523 1.576-.663 2.318-.883 2.543-.883h.306c.225 0 .968.22 2.543.882 1.576.662 2.14-.353 2.814-1.522.676-1.17 2.837-.22 3.805.022.968.243 2.048.595.743-2.36'/%3E%3C/svg%3E");
  3063. mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.058 19.93c-1.01-2.29-1.185-4.228-1.212-4.99V8.67C20.846 3.882 16.886 0 12 0S3.15 3.882 3.15 8.671v6.36c-.037.82-.236 2.7-1.207 4.899-1.306 2.955-.226 2.603.742 2.36.968-.242 3.13-1.192 3.805-.022.675 1.17 1.238 2.184 2.814 1.523 1.576-.663 2.318-.883 2.543-.883h.306c.225 0 .968.22 2.543.882 1.576.662 2.14-.353 2.814-1.522.676-1.17 2.837-.22 3.805.022.968.243 2.048.595.743-2.36'/%3E%3C/svg%3E");
  3064. }
  3065. }
  3066. if (avatarstyles=="avatargift") {
  3067. .css-1dhayxc::after,
  3068. .css-yhhl9h::before,
  3069. .css-213aa4 > div:nth-of-type(2) > div > img,
  3070. .css-na0gqx > div:nth-of-type(2) > div > img,
  3071. .css-213aa4 > div:nth-of-type(2) > div > video,
  3072. .css-na0gqx > div:nth-of-type(2) > div > video {
  3073. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
  3074. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
  3075. }
  3076. }
  3077. if (avatarstyles=="avatarheart") {
  3078. .css-1dhayxc::after,
  3079. .css-yhhl9h::before,
  3080. .css-213aa4 > div:nth-of-type(2) > div > img,
  3081. .css-na0gqx > div:nth-of-type(2) > div > img,
  3082. .css-213aa4 > div:nth-of-type(2) > div > video,
  3083. .css-na0gqx > div:nth-of-type(2) > div > video {
  3084. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  3085. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  3086. }
  3087. }
  3088. if (avatarstyles=="avataroctagon") {
  3089. .css-1dhayxc::after,
  3090. .css-yhhl9h::before,
  3091. .css-213aa4 > div:nth-of-type(2) > div > img,
  3092. .css-na0gqx > div:nth-of-type(2) > div > img,
  3093. .css-213aa4 > div:nth-of-type(2) > div > video,
  3094. .css-na0gqx > div:nth-of-type(2) > div > video {
  3095. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/%3E%3C/svg%3E");
  3096. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/%3E%3C/svg%3E");
  3097. }
  3098. }
  3099. if (avatarstyles=="avatarovalh") {
  3100. .css-213aa4 > div:nth-of-type(2),
  3101. .css-na0gqx > div:nth-of-type(2),
  3102. .css-213aa4 > div:nth-of-type(2) > div > img,
  3103. .css-na0gqx > div:nth-of-type(2) > div > img,
  3104. .css-213aa4 > div:nth-of-type(2) > div > video,
  3105. .css-na0gqx > div:nth-of-type(2) > div > video {
  3106. aspect-ratio: 13 / 9;
  3107. border-radius: 50% !important;
  3108. height: auto;
  3109. width: 100%;
  3110. object-fit: cover;
  3111. transition: 0.3s linear ease-in-out;
  3112. }
  3113. .css-1dhayxc::after,
  3114. .css-yhhl9h::before {
  3115. aspect-ratio: 13 / 9;
  3116. border-radius: 50% !important;
  3117. max-height: 100%;
  3118. width: auto;
  3119. object-fit: cover;
  3120. transition: 0.3s linear ease-in-out;
  3121. }
  3122. }
  3123. if (avatarstyles=="avatarovalv") {
  3124. .css-213aa4 > div:nth-of-type(2),
  3125. .css-na0gqx > div:nth-of-type(2),
  3126. .css-213aa4 > div:nth-of-type(2) > div,
  3127. .css-na0gqx > div:nth-of-type(2) > div,
  3128. .css-213aa4 > div:nth-of-type(2) > div > img,
  3129. .css-na0gqx > div:nth-of-type(2) > div > img,
  3130. .css-213aa4 > div:nth-of-type(2) > div > video,
  3131. .css-na0gqx > div:nth-of-type(2) > div > video {
  3132. border-radius: 50% !important;
  3133. min-height: calc(100vh - 60px - 71px - 1em);
  3134. max-width: avatarsize;
  3135. min-width: avatarsize;
  3136. object-fit: cover;
  3137. transition: 0.3s linear ease-in-out;
  3138. }
  3139. .css-1dhayxc::after,
  3140. .css-yhhl9h::before {
  3141. aspect-ratio: 9 / 13;
  3142. border-radius: 50% !important;
  3143. height: auto;
  3144. max-width: 100%;
  3145. object-fit: cover;
  3146. transition: 0.3s linear ease-in-out;
  3147. }
  3148. }
  3149. if (avatarstyles=="avatarpentagon") {
  3150. .css-1dhayxc::after,
  3151. .css-yhhl9h::before,
  3152. .css-213aa4 > div:nth-of-type(2) > div > img,
  3153. .css-na0gqx > div:nth-of-type(2) > div > img,
  3154. .css-213aa4 > div:nth-of-type(2) > div > video,
  3155. .css-na0gqx > div:nth-of-type(2) > div > video {
  3156. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.83 2.38a2 2 0 0 1 2.34 0l8 5.74a2 2 0 0 1 .73 2.25l-3.04 9.26a2 2 0 0 1-1.9 1.37H7.04a2 2 0 0 1-1.9-1.37L2.1 10.37a2 2 0 0 1 .73-2.25z'/%3E%3C/svg%3E");
  3157. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.83 2.38a2 2 0 0 1 2.34 0l8 5.74a2 2 0 0 1 .73 2.25l-3.04 9.26a2 2 0 0 1-1.9 1.37H7.04a2 2 0 0 1-1.9-1.37L2.1 10.37a2 2 0 0 1 .73-2.25z'/%3E%3C/svg%3E");
  3158. }
  3159. }
  3160. if (avatarstyles=="avatarrabbit") {
  3161. .css-1dhayxc::after,
  3162. .css-yhhl9h::before,
  3163. .css-213aa4 > div:nth-of-type(2) > div > img,
  3164. .css-na0gqx > div:nth-of-type(2) > div > img,
  3165. .css-213aa4 > div:nth-of-type(2) > div > video,
  3166. .css-na0gqx > div:nth-of-type(2) > div > video {
  3167. -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.872 21.356c.077.195.682 1.646 1.685 2.156 1.075.547 1.613.406 1.613.406s-.914-3.384-.108-6.076c.807-2.691 1.479-2.933 1.479-2.933s1.478.591 2.446 0c.968-.591 1.264-1.747 1.264-1.747s-.672-2.474-1.264-3.442c-.591-.967-1.227-1.48-2.016-1.828a235.34 235.34 0 0 0-1.508-.655 11.275 11.275 0 0 0-1.003-3.198C16.237 1.531 14.678 0 14.678 0s-.815.7-1.025 2.032c.56.497 1.462 1.45 2.258 2.42.4.485.906 1.227 1.31 1.846a26.053 26.053 0 0 0-2.6-2.626c-1.828-1.586-3.63-2.823-3.63-2.823s-1.29 2.016.243 4.785c1.048 1.778 3.704 3.31 3.704 3.31s-2.736.134-3.704.346c-.968.213-2.043.592-3.253 1.398-1.21.807-2.01 1.647-3.011 3.011-1 1.365-1.962 3.71-1.962 3.71s-.135-.188-1.049-.188c-.914 0-1.21.188-1.21.188s.027 2.312.592 3.441c.564 1.13 1.37 1.562 2.392 1.562.27-.002.834 0 .834 0s.699 1.1 1.129 1.369c.43.268 1.183.215 1.183.215h8.253s-.048-.619-.51-1.103c-.448-.466-.983-.608-1.117-.666a3.776 3.776 0 0 0-1.008-.167h-2.123s2.689-.095 4.274-1.936c.833-.967.914-2.15.833-2.742-.04-.292-.295-1.29-.752-1.882a5.905 5.905 0 0 0-1.183-1.129c-.516-.36-1.17-.642-1.909-.94 1.075.268 1.586.376 2.635 1.129 1.048.752 1.505 1.908 1.586 2.177.08.269.269.672.215 1.828-.108.968-.218 1.208-.484 1.72-.217.456-.427.742-.717 1.07Z'/%3E%3C/svg%3E");
  3168. mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.872 21.356c.077.195.682 1.646 1.685 2.156 1.075.547 1.613.406 1.613.406s-.914-3.384-.108-6.076c.807-2.691 1.479-2.933 1.479-2.933s1.478.591 2.446 0c.968-.591 1.264-1.747 1.264-1.747s-.672-2.474-1.264-3.442c-.591-.967-1.227-1.48-2.016-1.828a235.34 235.34 0 0 0-1.508-.655 11.275 11.275 0 0 0-1.003-3.198C16.237 1.531 14.678 0 14.678 0s-.815.7-1.025 2.032c.56.497 1.462 1.45 2.258 2.42.4.485.906 1.227 1.31 1.846a26.053 26.053 0 0 0-2.6-2.626c-1.828-1.586-3.63-2.823-3.63-2.823s-1.29 2.016.243 4.785c1.048 1.778 3.704 3.31 3.704 3.31s-2.736.134-3.704.346c-.968.213-2.043.592-3.253 1.398-1.21.807-2.01 1.647-3.011 3.011-1 1.365-1.962 3.71-1.962 3.71s-.135-.188-1.049-.188c-.914 0-1.21.188-1.21.188s.027 2.312.592 3.441c.564 1.13 1.37 1.562 2.392 1.562.27-.002.834 0 .834 0s.699 1.1 1.129 1.369c.43.268 1.183.215 1.183.215h8.253s-.048-.619-.51-1.103c-.448-.466-.983-.608-1.117-.666a3.776 3.776 0 0 0-1.008-.167h-2.123s2.689-.095 4.274-1.936c.833-.967.914-2.15.833-2.742-.04-.292-.295-1.29-.752-1.882a5.905 5.905 0 0 0-1.183-1.129c-.516-.36-1.17-.642-1.909-.94 1.075.268 1.586.376 2.635 1.129 1.048.752 1.505 1.908 1.586 2.177.08.269.269.672.215 1.828-.108.968-.218 1.208-.484 1.72-.217.456-.427.742-.717 1.07Z'/%3E%3C/svg%3E");
  3169. }
  3170. }
  3171. if (avatarstyles=="avatarratio") {
  3172. .css-1dhayxc::after,
  3173. .css-yhhl9h::before,
  3174. .css-213aa4 > div:nth-of-type(2) > div > img,
  3175. .css-na0gqx > div:nth-of-type(2) > div > img,
  3176. .css-213aa4 > div:nth-of-type(2) > div > video,
  3177. .css-na0gqx > div:nth-of-type(2) > div > video {
  3178. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='12' height='20' x='6' y='2' rx='2'/%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3C/svg%3E");
  3179. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='12' height='20' x='6' y='2' rx='2'/%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3C/svg%3E");
  3180. }
  3181. }
  3182. if (avatarstyles=="avatarrectangle") {
  3183. .css-213aa4 > div:nth-of-type(2),
  3184. .css-na0gqx > div:nth-of-type(2),
  3185. .css-213aa4 > div:nth-of-type(2) > div,
  3186. .css-na0gqx > div:nth-of-type(2) > div {
  3187. aspect-ratio: 9 / 13;
  3188. height: fit-content;
  3189. max-height: calc(100vh - 60px - 71px - 1em);
  3190. padding-bottom: 0;
  3191. }
  3192. .css-213aa4 > div:nth-of-type(2) > div > img,
  3193. .css-na0gqx > div:nth-of-type(2) > div > img,
  3194. .css-213aa4 > div:nth-of-type(2) > div > video,
  3195. .css-na0gqx > div:nth-of-type(2) > div > video {
  3196. aspect-ratio: 9 / 13;
  3197. height: auto;
  3198. max-height: calc(100vh - 60px - 71px - 1em);
  3199. max-width: avatarsize;
  3200. object-fit: cover;
  3201. transition: 0.3s linear ease-in-out;
  3202. }
  3203. .css-1dhayxc::after,
  3204. .css-yhhl9h::before {
  3205. aspect-ratio: 9 / 13;
  3206. height: auto;
  3207. max-width: 100%;
  3208. object-fit: cover;
  3209. transition: 0.3s linear ease-in-out;
  3210. }
  3211. }
  3212. if (avatarstyles=="avatarrectanglebig") {
  3213. .css-213aa4 > div:nth-of-type(2),
  3214. .css-na0gqx > div:nth-of-type(2),
  3215. .css-213aa4 > div:nth-of-type(2) > div,
  3216. .css-na0gqx > div:nth-of-type(2) > div,
  3217. .css-213aa4 > div:nth-of-type(2) > div > img,
  3218. .css-na0gqx > div:nth-of-type(2) > div > img,
  3219. .css-213aa4 > div:nth-of-type(2) > div > video,
  3220. .css-na0gqx > div:nth-of-type(2) > div > video {
  3221. min-height: calc(100vh - 60px - 71px - 1em);
  3222. max-width: avatarsize;
  3223. min-width: avatarsize;
  3224. object-fit: cover;
  3225. transition: 0.3s linear ease-in-out;
  3226. }
  3227. .css-1dhayxc::after,
  3228. .css-yhhl9h::before {
  3229. aspect-ratio: 9 / 13;
  3230. height: auto;
  3231. max-width: 100%;
  3232. object-fit: cover;
  3233. transition: 0.3s linear ease-in-out;
  3234. }
  3235. }
  3236. if (avatarstyles=="avatarshield") {
  3237. .css-1dhayxc::after,
  3238. .css-yhhl9h::before,
  3239. .css-213aa4 > div:nth-of-type(2) > div > img,
  3240. .css-na0gqx > div:nth-of-type(2) > div > img,
  3241. .css-213aa4 > div:nth-of-type(2) > div > video,
  3242. .css-na0gqx > div:nth-of-type(2) > div > video {
  3243. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
  3244. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
  3245. }
  3246. }
  3247. if (avatarstyles=="avatarshipwheel") {
  3248. .css-1dhayxc::after,
  3249. .css-yhhl9h::before,
  3250. .css-213aa4 > div:nth-of-type(2) > div > img,
  3251. .css-na0gqx > div:nth-of-type(2) > div > img,
  3252. .css-213aa4 > div:nth-of-type(2) > div > video,
  3253. .css-na0gqx > div:nth-of-type(2) > div > video {
  3254. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 2v7.5'/%3E%3Cpath d='m19 5-5.23 5.23'/%3E%3Cpath d='M22 12h-7.5'/%3E%3Cpath d='m19 19-5.23-5.23'/%3E%3Cpath d='M12 14.5V22'/%3E%3Cpath d='M10.23 13.77 5 19'/%3E%3Cpath d='M9.5 12H2'/%3E%3Cpath d='M10.23 10.23 5 5'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
  3255. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 2v7.5'/%3E%3Cpath d='m19 5-5.23 5.23'/%3E%3Cpath d='M22 12h-7.5'/%3E%3Cpath d='m19 19-5.23-5.23'/%3E%3Cpath d='M12 14.5V22'/%3E%3Cpath d='M10.23 13.77 5 19'/%3E%3Cpath d='M9.5 12H2'/%3E%3Cpath d='M10.23 10.23 5 5'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
  3256. }
  3257. }
  3258. if (avatarstyles=="avatarshirt") {
  3259. .css-1dhayxc::after,
  3260. .css-yhhl9h::before,
  3261. .css-213aa4 > div:nth-of-type(2) > div > img,
  3262. .css-na0gqx > div:nth-of-type(2) > div > img,
  3263. .css-213aa4 > div:nth-of-type(2) > div > video,
  3264. .css-na0gqx > div:nth-of-type(2) > div > video {
  3265. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z'/%3E%3C/svg%3E");
  3266. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z'/%3E%3C/svg%3E");
  3267. }
  3268. }
  3269. if (avatarstyles=="avatarslime") {
  3270. .css-1dhayxc::after,
  3271. .css-yhhl9h::before,
  3272. .css-213aa4 > div:nth-of-type(2) > div > img,
  3273. .css-na0gqx > div:nth-of-type(2) > div > img,
  3274. .css-213aa4 > div:nth-of-type(2) > div > video,
  3275. .css-na0gqx > div:nth-of-type(2) > div > video {
  3276. -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.862c-6.617 0-12 5.383-12 12 0 1.964.49 3.406 1.5 4.408 1.706 1.696 4.619 1.868 8.05 1.868.43 0 .87-.002 1.315-.005a217.6 217.6 0 012.765 0c3.792.024 7.066.044 8.88-1.758C23.511 18.378 24 16.9 24 14.862c0-6.617-5.383-12-12-12'/%3E%3C/svg%3E");
  3277. mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.862c-6.617 0-12 5.383-12 12 0 1.964.49 3.406 1.5 4.408 1.706 1.696 4.619 1.868 8.05 1.868.43 0 .87-.002 1.315-.005a217.6 217.6 0 012.765 0c3.792.024 7.066.044 8.88-1.758C23.511 18.378 24 16.9 24 14.862c0-6.617-5.383-12-12-12'/%3E%3C/svg%3E");
  3278. }
  3279. }
  3280. if (avatarstyles=="avatarsmartphone") {
  3281. .css-1dhayxc::after,
  3282. .css-yhhl9h::before,
  3283. .css-213aa4 > div:nth-of-type(2) > div > img,
  3284. .css-na0gqx > div:nth-of-type(2) > div > img,
  3285. .css-213aa4 > div:nth-of-type(2) > div > video,
  3286. .css-na0gqx > div:nth-of-type(2) > div > video {
  3287. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
  3288. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
  3289. }
  3290. }
  3291. if (avatarstyles=="avatarsquircle") {
  3292. .css-1dhayxc::after,
  3293. .css-yhhl9h::before,
  3294. .css-213aa4 > div:nth-of-type(2) > div > img,
  3295. .css-na0gqx > div:nth-of-type(2) > div > img,
  3296. .css-213aa4 > div:nth-of-type(2) > div > video,
  3297. .css-na0gqx > div:nth-of-type(2) > div > video {
  3298. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9-9-1.8-9-9 1.8-9 9-9'/%3E%3C/svg%3E");
  3299. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9-9-1.8-9-9 1.8-9 9-9'/%3E%3C/svg%3E");
  3300. }
  3301. }
  3302. if (avatarstyles=="avatarstar") {
  3303. .css-1dhayxc::after,
  3304. .css-yhhl9h::before,
  3305. .css-213aa4 > div:nth-of-type(2) > div > img,
  3306. .css-na0gqx > div:nth-of-type(2) > div > img,
  3307. .css-213aa4 > div:nth-of-type(2) > div > video,
  3308. .css-na0gqx > div:nth-of-type(2) > div > video {
  3309. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
  3310. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
  3311. }
  3312. }
  3313. if (avatarstyles=="avatartablet") {
  3314. .css-1dhayxc::after,
  3315. .css-yhhl9h::before,
  3316. .css-213aa4 > div:nth-of-type(2) > div > img,
  3317. .css-na0gqx > div:nth-of-type(2) > div > img,
  3318. .css-213aa4 > div:nth-of-type(2) > div > video,
  3319. .css-na0gqx > div:nth-of-type(2) > div > video {
  3320. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cline x1='12' x2='12.01' y1='18' y2='18'/%3E%3C/svg%3E");
  3321. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cline x1='12' x2='12.01' y1='18' y2='18'/%3E%3C/svg%3E");
  3322. }
  3323. }
  3324. if (avatarstyles=="avatartreedeciduous") {
  3325. .css-1dhayxc::after,
  3326. .css-yhhl9h::before,
  3327. .css-213aa4 > div:nth-of-type(2) > div > img,
  3328. .css-na0gqx > div:nth-of-type(2) > div > img,
  3329. .css-213aa4 > div:nth-of-type(2) > div > video,
  3330. .css-na0gqx > div:nth-of-type(2) > div > video {
  3331. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 19a4 4 0 0 1-2.24-7.32A3.5 3.5 0 0 1 9 6.03V6a3 3 0 1 1 6 0v.04a3.5 3.5 0 0 1 3.24 5.65A4 4 0 0 1 16 19Z'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
  3332. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 19a4 4 0 0 1-2.24-7.32A3.5 3.5 0 0 1 9 6.03V6a3 3 0 1 1 6 0v.04a3.5 3.5 0 0 1 3.24 5.65A4 4 0 0 1 16 19Z'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
  3333. }
  3334. }
  3335. if (avatarstyles=="avatartreepine") {
  3336. .css-1dhayxc::after,
  3337. .css-yhhl9h::before,
  3338. .css-213aa4 > div:nth-of-type(2) > div > img,
  3339. .css-na0gqx > div:nth-of-type(2) > div > img,
  3340. .css-213aa4 > div:nth-of-type(2) > div > video,
  3341. .css-na0gqx > div:nth-of-type(2) > div > video {
  3342. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 14 3 3.3a1 1 0 0 1-.7 1.7H4.7a1 1 0 0 1-.7-1.7L7 14h-.3a1 1 0 0 1-.7-1.7L9 9h-.2A1 1 0 0 1 8 7.3L12 3l4 4.3a1 1 0 0 1-.8 1.7H15l3 3.3a1 1 0 0 1-.7 1.7H17Z'/%3E%3Cpath d='M12 22v-3'/%3E%3C/svg%3E");
  3343. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 14 3 3.3a1 1 0 0 1-.7 1.7H4.7a1 1 0 0 1-.7-1.7L7 14h-.3a1 1 0 0 1-.7-1.7L9 9h-.2A1 1 0 0 1 8 7.3L12 3l4 4.3a1 1 0 0 1-.8 1.7H15l3 3.3a1 1 0 0 1-.7 1.7H17Z'/%3E%3Cpath d='M12 22v-3'/%3E%3C/svg%3E");
  3344. }
  3345. }
  3346. if (avatarstyles=="avatartriangle") {
  3347. .css-1dhayxc::after,
  3348. .css-yhhl9h::before,
  3349. .css-213aa4 > div:nth-of-type(2) > div > img,
  3350. .css-na0gqx > div:nth-of-type(2) > div > img,
  3351. .css-213aa4 > div:nth-of-type(2) > div > video,
  3352. .css-na0gqx > div:nth-of-type(2) > div > video {
  3353. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3C/svg%3E");
  3354. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3C/svg%3E");
  3355. }
  3356. }
  3357. if (avatarstyles=="avatarvenetianmask") {
  3358. .css-1dhayxc::after,
  3359. .css-yhhl9h::before,
  3360. .css-213aa4 > div:nth-of-type(2) > div > img,
  3361. .css-na0gqx > div:nth-of-type(2) > div > img,
  3362. .css-213aa4 > div:nth-of-type(2) > div > video,
  3363. .css-na0gqx > div:nth-of-type(2) > div > video {
  3364. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11c-1.5 0-2.5.5-3 2'/%3E%3Cpath d='M4 6a2 2 0 0 0-2 2v4a5 5 0 0 0 5 5 8 8 0 0 1 5 2 8 8 0 0 1 5-2 5 5 0 0 0 5-5V8a2 2 0 0 0-2-2h-3a8 8 0 0 0-5 2 8 8 0 0 0-5-2z'/%3E%3Cpath d='M6 11c1.5 0 2.5.5 3 2'/%3E%3C/svg%3E");
  3365. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11c-1.5 0-2.5.5-3 2'/%3E%3Cpath d='M4 6a2 2 0 0 0-2 2v4a5 5 0 0 0 5 5 8 8 0 0 1 5 2 8 8 0 0 1 5-2 5 5 0 0 0 5-5V8a2 2 0 0 0-2-2h-3a8 8 0 0 0-5 2 8 8 0 0 0-5-2z'/%3E%3Cpath d='M6 11c1.5 0 2.5.5 3 2'/%3E%3C/svg%3E");
  3366. }
  3367. }
  3368.  
  3369. /* Background */
  3370. .css-213aa4,
  3371. .css-na0gqx {
  3372. background: url(backgroundurl) backgroundcolor no-repeat 100% !important;
  3373. background-size: cover !important;
  3374. }
  3375. /* Bubbles background */
  3376. .css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(2) {
  3377. background: url(bubblesbgurl) bubblesbgcolor !important;
  3378. background-size: cover;
  3379. }
  3380. /* Bubbles background for us */
  3381. .css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) {
  3382. background: url(bubblesbgurlforus) bubblesbgcolorforus !important;
  3383. background-size: cover;
  3384. }
  3385. /* Font color */
  3386. .css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div {
  3387. color: fontcolorforus;
  3388. }
  3389. .css-yhhl9h > div:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div {
  3390. color: fontcolor;
  3391. }
  3392. /* Gradient regenerate icon */
  3393. .css-yhhl9h > div:nth-of-type(2) > div > button img {
  3394. 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;
  3395. filter: invert(avatarinvert);
  3396. height: 0;
  3397. padding-left: 36px;
  3398. padding-top: 36px;
  3399. width: 0;
  3400. }
  3401. .css-yhhl9h > div:nth-of-type(2):has(.chakra-spinner) {
  3402. [alt="regenerate"] {
  3403. display: none;
  3404. }
  3405. }
  3406. /* Recalled memories icon on right and bigger */
  3407. .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"] {
  3408. right: -3.5em !important;
  3409. z-index: 1;
  3410. }
  3411. .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 {
  3412. right: -8.5em !important;
  3413. z-index: 1;
  3414. }
  3415. .css-1dhayxc button svg,
  3416. .css-yhhl9h button svg {
  3417. height: 36px;
  3418. width: 36px;
  3419. }
  3420. .css-4qwruq:has([aria-label="Create new scenario"]) {
  3421. .css-1dhayxc,
  3422. .css-yhhl9h {
  3423. padding-top: 2em !important;
  3424. }
  3425. }
  3426. /* Shadow at top of chat */
  3427. if bgshadow {
  3428. .css-213aa4 > div:nth-of-type(3),
  3429. .css-na0gqx > div:nth-of-type(3) {
  3430. position: relative;
  3431. }
  3432. .css-213aa4 > div:nth-of-type(3)::before,
  3433. .css-na0gqx > div:nth-of-type(3)::before {
  3434. background: linear-gradient(to bottom, bgshadowcolor 0%, transparent 100%);
  3435. filter: invert(avatarinvert);
  3436. left: 0;
  3437. content: "";
  3438. height: 5em;
  3439. position: absolute;
  3440. right: 0;
  3441. top: 0;
  3442. z-index: 10;
  3443. }
  3444. }
  3445. }
  3446.  
  3447. @-moz-document url-prefix("https://kindroid.ai/groupchat/") {
  3448. /* ====================================================
  3449. Sidebar & System bubbles on group chat page
  3450. ==================================================== */
  3451. /* ===== Sidebar ===== */
  3452. /* Group bar */
  3453. .css-1qpmsp4 > div > div:nth-of-type(1) {
  3454. flex-direction: column;
  3455. height: 0;
  3456. }
  3457. .css-1qpmsp4 > div > div:nth-of-type(1) > p {
  3458. color: var(--chakra-colors-primaryWhite);
  3459. font-family: var(--chakra-fonts-PoppinsBold);
  3460. font-size: 36px !important;
  3461. left: 4%;
  3462. line-height: 54px;
  3463. position: fixed;
  3464. top: .2em;
  3465. z-index: 9999;
  3466. }
  3467. [aria-label="group selfie"],
  3468. [aria-label="global journal entry"],
  3469. [aria-label="History mode and view favorited messages"],
  3470. [aria-label="group settings"] {
  3471. background: transparent;
  3472. height: 36px;
  3473. min-height: 36px;
  3474. min-width: 36px;
  3475. padding: .1em !important;
  3476. padding-inline-end: 0;
  3477. padding-inline-start: 0;
  3478. position: fixed;
  3479. right: .5em;
  3480. width: 36px;
  3481. z-index: 9999;
  3482. }
  3483. [aria-label="group selfie"] {
  3484. top: calc(60px + .5em);
  3485. }
  3486. [aria-label="global journal entry"] {
  3487. top: calc(60px + ((36px + 1.5em) * 1));
  3488. }
  3489. [aria-label="History mode and view favorited messages"] {
  3490. top: calc(60px + ((36px + 1.25em) * 2));
  3491. }
  3492. [aria-label="group settings"] {
  3493. top: calc(60px + ((36px + 1.15em) * 3));
  3494. }
  3495. [aria-label="group selfie"]:hover::before,
  3496. [aria-label="global journal entry"]:hover::before,
  3497. [aria-label="History mode and view favorited messages"]:hover::before,
  3498. [aria-label="group settings"]:hover::before {
  3499. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  3500. background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  3501. border-radius: 1em;
  3502. color: var(--chakra-colors-primaryWhite);
  3503. filter: invert(avatarinvert);
  3504. font-family: var(--fontfamily);
  3505. font-size: fontsize;
  3506. font-weight: normal;
  3507. line-height: 1.2;
  3508. padding: .5em;
  3509. position: absolute;
  3510. right: calc(36px + .7em) !important;
  3511. transition: 0.3s linear ease-in-out;
  3512. white-space: nowrap;
  3513. }
  3514. [aria-label="group selfie"]:hover::before {
  3515. content: "Group selfie";
  3516. }
  3517. [aria-label="global journal entry"]:hover::before {
  3518. content: "Global journal entry";
  3519. }
  3520. [aria-label="History mode and view favorited messages"]:hover::before {
  3521. content: "History mode and view favorited messages";
  3522. }
  3523. [aria-label="group settings"]:hover::before {
  3524. content: "Group settings";
  3525. }
  3526. .css-1qpmsp4 > div > div:nth-of-type(1) > button svg {
  3527. fill: var(--chakra-colors-secondaryWhite);;
  3528. height: 36px;
  3529. width: 36px;
  3530. }
  3531. if (systembubblesstyle=="systembubbleswide") || (systembubblesstyle=="systembubblesdark") {
  3532. .css-r6z5ec > .css-do4s31 > .css-94x4at {
  3533. padding: 0;
  3534. }
  3535. .css-r6z5ec > .css-do4s31 > .css-94x4at:before,
  3536. .css-r6z5ec > .css-do4s31 > .css-94x4at:hover::before {
  3537. background-position: center center;
  3538. background-repeat: no-repeat;
  3539. background-size: cover;
  3540. content: "";
  3541. }
  3542.  
  3543. /* Continue cut-off message */
  3544. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1) {
  3545. order: 1;
  3546. }
  3547. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1)::before {
  3548. 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");
  3549. }
  3550. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1):hover::before {
  3551. 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");
  3552. filter: invert(avatarinvert);
  3553. }
  3554.  
  3555. /* Chat Break */
  3556. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2) {
  3557. order: 3;
  3558. }
  3559. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2)::before {
  3560. 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");
  3561. }
  3562. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2):hover::before {
  3563. 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");
  3564. filter: invert(avatarinvert);
  3565. }
  3566.  
  3567. /* Tweak AI message */
  3568. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3) {
  3569. order: 2;
  3570. }
  3571. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3)::before {
  3572. 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");
  3573. }
  3574. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3):hover::before {
  3575. 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");
  3576. filter: invert(avatarinvert);
  3577. }
  3578. }
  3579. if (systembubblesstyle=="systembubbleswide") {
  3580. .css-r6z5ec > .css-do4s31 {
  3581. align-items: center;
  3582. background-color: transparent;
  3583. border: none;
  3584. bottom: 81px;
  3585. color: var(--chakra-colors-secondaryWhite);
  3586. display: flex;
  3587. flex-direction: column;
  3588. font-size: fontsize;
  3589. gap: .5em;
  3590. justify-content: flex-end;
  3591. left: auto;
  3592. max-width: 36px;
  3593. min-width: 36px;
  3594. --menu-shadow: transparent;
  3595. opacity: 1 !important;
  3596. outline: 0;
  3597. outline-offset: 0;
  3598. position: fixed;
  3599. right: .5em;
  3600. transform: none !important;
  3601. transform-origin: unset;
  3602. visibility: visible !important;
  3603. z-index: unset;
  3604. }
  3605.  
  3606. /* Hide 3 dots */
  3607. .css-1y2ps2x {
  3608. display: none;
  3609. }
  3610.  
  3611. .css-r6z5ec > .css-do4s31 > .css-94x4at {
  3612. background-color: transparent;
  3613. color: transparent;
  3614. height: 36px !important;
  3615. max-width: 36px !important;
  3616. position: relative;
  3617. transform: none !important;
  3618. }
  3619. .css-r6z5ec > .css-do4s31 > .css-94x4at:before,
  3620. .css-r6z5ec > .css-do4s31 > .css-94x4at:hover::before {
  3621. height: 36px !important;
  3622. max-width: 36px !important;
  3623. min-width: 36px !important;
  3624. }
  3625. .css-r6z5ec > .css-do4s31 > .css-94x4at:hover::after {
  3626. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  3627. background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  3628. border-radius: 1em;
  3629. bottom: unset !important;
  3630. color: var(--chakra-colors-primaryWhite);
  3631. filter: invert(avatarinvert);
  3632. font-family: var(--fontfamily);
  3633. font-size: fontsize;
  3634. font-weight: normal;
  3635. left: auto !important;
  3636. line-height: 1.2;
  3637. padding: .5em;
  3638. position: absolute;
  3639. right: calc(36px + .7em) !important;
  3640. transition: 0.3s linear ease-in-out;
  3641. white-space: nowrap;
  3642. }
  3643. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(1):hover::after {
  3644. content: "Continue cut-off message";
  3645. transform: translateX(0%);
  3646. }
  3647. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(2):hover::after {
  3648. content: "Chat Break";
  3649. transform: translateX(0%) !important;
  3650. }
  3651. .css-r6z5ec > .css-do4s31 > .css-94x4at:nth-child(3):hover::after {
  3652. content: "Tweak AI message";
  3653. transform: translateX(0%);
  3654. }
  3655. }
  3656. if (systembubblesstyle=="systembubblesdark") {
  3657. .css-do4s31 {
  3658. border-radius: .5em;
  3659. margin-left: -5%;
  3660. }
  3661. .css-do4s31,
  3662. .css-94x4at {
  3663. background-color: #161616;
  3664. border-color: #6C6C6C;
  3665. color: var(--chakra-colors-secondaryWhite);
  3666. font-family: var(--fontfamily);
  3667. font-size: fontsize;
  3668. line-height: 1.5;
  3669. margin-bottom: .5em;
  3670. padding: .5em 0 0 1em;
  3671. }
  3672. .css-do4s31 {
  3673. display: grid;
  3674. }
  3675. .css-r6z5ec,
  3676. .css-do4s31 {
  3677. margin-left: -14% !important;
  3678. margin-top: -65%;
  3679. }
  3680. .css-1y2ps2x:hover,
  3681. .css-do4s31 button:hover {
  3682. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  3683. background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  3684. -webkit-background-clip: text;
  3685. -moz-background-clip: text;
  3686. background-clip: text;
  3687. -webkit-text-fill-color: transparent;
  3688. -moz-text-fill-color: transparent;
  3689. color: transparent;
  3690. }
  3691. .css-r6z5ec > .css-do4s31 > .css-94x4at:before,
  3692. .css-r6z5ec > .css-do4s31 > .css-94x4at:hover::before {
  3693. height: fontsize !important;
  3694. max-width: fontsize !important;
  3695. min-width: fontsize !important;
  3696. margin-right: .3em;
  3697. }
  3698. }
  3699. }
  3700.  
  3701. @-moz-document url-prefix("https://kindroid.ai/groupchat/") {
  3702. /* ==========================================================
  3703. Group chat page
  3704. ========================================================== */
  3705. /* Wide mode */
  3706. .css-1qpmsp4 {
  3707. box-sizing: border-box;
  3708. max-height: 100vh;
  3709. max-width: 100vw;
  3710. position: relative;
  3711. }
  3712. /* ===== Chat box ===== */
  3713. .css-1qpmsp4 > div > div:nth-of-type(2) {
  3714. border-right: 1px solid #cbcbcb;
  3715. margin: 0 4em 71px 0;
  3716. max-width: 100%;
  3717. padding: 0 1em 0 1.5em;
  3718. width: 100%;
  3719. }
  3720. /* Adjust bubbles size depending on avatar size */
  3721. .css-1dhayxc > .css-fujl5p,
  3722. .css-1dhayxc > .css-116lnl0,
  3723. .css-yhhl9h > .css-fujl5p,
  3724. .css-yhhl9h > .css-116lnl0 {
  3725. max-width: calc(80% - var(--avatarchatgroupsize));
  3726. }
  3727. /* Modification of rounded corners for our bubbles */
  3728. .css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) {
  3729. border-radius: 1em .5em 1em 1em !important;
  3730. }
  3731.  
  3732. /* Modification of rounded corners for AI bubbles */
  3733. .css-1ulhpcc,
  3734. .css-yhhl9h > div:nth-of-type(2) > div:nth-of-type(2) {
  3735. border-radius: .5em 1em 1em 1em !important;
  3736. }
  3737. /* Vertically center bubbles */
  3738. .css-yhhl9h:last-child > div:nth-of-type(3) {
  3739. margin-top: auto;
  3740. }
  3741.  
  3742. /* ===== Textarea box ===== */
  3743. .css-1qxhwlw {
  3744. width: 100vw;
  3745. }
  3746.  
  3747. /* ===== Customizations ===== */
  3748. /* Vanilla avatar */
  3749. .css-yhhl9h > div:nth-of-type(1),
  3750. .css-yhhl9h > div:nth-of-type(1) > div,
  3751. .css-yhhl9h > div:nth-of-type(1) > div img,
  3752. .css-yhhl9h > div:nth-of-type(1) > div video {
  3753. border-radius: 1em;
  3754. height: auto;
  3755. max-width: avatarchatgroupsize;
  3756. min-width: avatarchatgroupsize;
  3757. }
  3758.  
  3759. /* Avatar brightness, contrast, grayscale */
  3760. .css-1dhayxc::after,
  3761. .css-yhhl9h > div:nth-of-type(1) > div img,
  3762. .css-yhhl9h > div:nth-of-type(1) > div video {
  3763. filter: brightness(avatarbrightness) contrast(avatarcontrast) grayscale(avatargrayscale) invert(avatarinvert) !important;
  3764. }
  3765. /* Avatar chat */
  3766. if avatarchat || avatarchoiceforus {
  3767. .css-213aa4 > div:nth-of-type(2) {
  3768. display: none;
  3769. height: 0;
  3770. transition: 0.3s linear ease-in-out;
  3771. width: 0;
  3772. }
  3773. .css-4qwruq:has([aria-label="Create new scenario"]) {
  3774. .css-1dhayxc,
  3775. .css-yhhl9h {
  3776. padding-top: 0 !important;
  3777. }
  3778. }
  3779.  
  3780. .css-1dhayxc::after {
  3781. background: url(avatarchoiceforusurl) center center / cover no-repeat;
  3782. border-radius: 1em;
  3783. content: "";
  3784. height: avatarchatgroupsize;
  3785. min-width: avatarchatgroupsize;
  3786. transition: 0.3s linear ease-in-out;
  3787. width: avatarchatgroupsize;
  3788. }
  3789. }
  3790. /* Avatar flip, rotate, zoom */
  3791. if (avatarflip=="avatarflipdefault") {
  3792. .css-1dhayxc::after,
  3793. .css-yhhl9h > div:nth-of-type(1) > div img,
  3794. .css-yhhl9h > div:nth-of-type(1) > div video {
  3795. transform: rotate(avatarrotate) scale(avatarzoom);
  3796. }
  3797. }
  3798. if (avatarflip=="avatarfliphorizontally") {
  3799. .css-1dhayxc::after,
  3800. .css-yhhl9h > div:nth-of-type(1) > div img,
  3801. .css-yhhl9h > div:nth-of-type(1) > div video {
  3802. transform: rotate(avatarrotate) scale(avatarzoom) scaleX(-1) !important;
  3803. }
  3804. }
  3805. if (avatarflip=="avatarflipvertically") {
  3806. .css-1dhayxc::after,
  3807. .css-yhhl9h > div:nth-of-type(1) > div img,
  3808. .css-yhhl9h > div:nth-of-type(1) > div video {
  3809. transform: rotate(avatarrotate) scale(avatarzoom) scaleY(-1) !important;
  3810. }
  3811. }
  3812. if (avatarflip=="avatarfliphorizontallyvertically") {
  3813. .css-1dhayxc::after,
  3814. .css-yhhl9h > div:nth-of-type(1) > div img,
  3815. .css-yhhl9h > div:nth-of-type(1) > div video {
  3816. transform: rotate(avatarrotate) scale(calc(var(--avatarzoom) * -1)) !important;
  3817. }
  3818. }
  3819. /* Avatar hoverzoom */
  3820. if avatarhoverzoom {
  3821. .css-yhhl9h > div:nth-of-type(1) > div > img:hover,
  3822. .css-yhhl9h > div:nth-of-type(1) > div > video:hover {
  3823. aspect-ratio: 1 / 1;
  3824. border-radius: 0 !important;
  3825. max-height: 100vh !important;
  3826. min-height: 100vh !important;
  3827. left: 0;
  3828. position: fixed !important;
  3829. top: 0 !important;
  3830. min-width: fit-content;
  3831. width: auto !important;
  3832. z-index: 9999 !important;
  3833. }
  3834. }
  3835. /* Avatar mix blend mode */
  3836. if (avatarmixblend=="avatarmixdefault") {
  3837. .css-1dhayxc::after,
  3838. .css-yhhl9h > div:nth-of-type(1) > div img,
  3839. .css-yhhl9h > div:nth-of-type(1) > div video:active {
  3840. mix-blend-mode: normal;
  3841. }
  3842. }
  3843. if (avatarmixblend=="avatarmixcolor") {
  3844. .css-1dhayxc::after,
  3845. .css-yhhl9h > div:nth-of-type(1) > div img,
  3846. .css-yhhl9h > div:nth-of-type(1) > div video:active {
  3847. mix-blend-mode: color !important;
  3848. }
  3849. }
  3850. if (avatarmixblend=="avatarmixcolorburn") {
  3851. .css-1dhayxc::after,
  3852. .css-yhhl9h > div:nth-of-type(1) > div img,
  3853. .css-yhhl9h > div:nth-of-type(1) > div video:active {
  3854. mix-blend-mode: color-burn !important;
  3855. }
  3856. }
  3857. if (avatarmixblend=="avatarmixcolordodge") {
  3858. .css-1dhayxc::after,
  3859. .css-yhhl9h > div:nth-of-type(1) > div img,
  3860. .css-yhhl9h > div:nth-of-type(1) > div video:active {
  3861. mix-blend-mode: color-dodge !important;
  3862. }
  3863. }
  3864. if (avatarmixblend=="avatarmixdarken") {
  3865. .css-1dhayxc::after,
  3866. .css-yhhl9h > div:nth-of-type(1) > div img,
  3867. .css-yhhl9h > div:nth-of-type(1) > div video:active {
  3868. mix-blend-mode: darken !important;
  3869. }
  3870. }
  3871. if (avatarmixblend=="avatarmixdifference") {
  3872. .css-1dhayxc::after,
  3873. .css-yhhl9h > div:nth-of-type(1) > div img,
  3874. .css-yhhl9h > div:nth-of-type(1) > div video:active {
  3875. mix-blend-mode: difference !important;
  3876. }
  3877. }
  3878. if (avatarmixblend=="avatarmixexclusion") {
  3879. .css-1dhayxc::after,
  3880. .css-yhhl9h > div:nth-of-type(1) > div img,
  3881. .css-yhhl9h > div:nth-of-type(1) > div video:active {
  3882. mix-blend-mode: exclusion !important;
  3883. }
  3884. }
  3885. if (avatarmixblend=="avatarmixhardlight") {
  3886. .css-1dhayxc::after,
  3887. .css-yhhl9h > div:nth-of-type(1) > div img,
  3888. .css-yhhl9h > div:nth-of-type(1) > div video:active {
  3889. mix-blend-mode: hard-light !important;
  3890. }
  3891. }
  3892. if (avatarmixblend=="avatarmixhue") {
  3893. .css-1dhayxc::after,
  3894. .css-yhhl9h > div:nth-of-type(1) > div img,
  3895. .css-yhhl9h > div:nth-of-type(1) > div video:active {
  3896. mix-blend-mode: hue !important;
  3897. }
  3898. }
  3899. if (avatarmixblend=="avatarmixlighten") {
  3900. .css-1dhayxc::after,
  3901. .css-yhhl9h > div:nth-of-type(1) > div img,
  3902. .css-yhhl9h > div:nth-of-type(1) > div video:active {
  3903. mix-blend-mode: lighten !important;
  3904. }
  3905. }
  3906. if (avatarmixblend=="avatarmixluminosity") {
  3907. .css-1dhayxc::after,
  3908. .css-yhhl9h > div:nth-of-type(1) > div img,
  3909. .css-yhhl9h > div:nth-of-type(1) > div video:active {
  3910. mix-blend-mode: luminosity !important;
  3911. }
  3912. }
  3913. if (avatarmixblend=="avatarmixmultiply") {
  3914. .css-1dhayxc::after,
  3915. .css-yhhl9h > div:nth-of-type(1) > div img,
  3916. .css-yhhl9h > div:nth-of-type(1) > div video:active {
  3917. mix-blend-mode: multiply !important;
  3918. }
  3919. }
  3920. if (avatarmixblend=="avatarmixoverlay") {
  3921. .css-1dhayxc::after,
  3922. .css-yhhl9h > div:nth-of-type(1) > div img,
  3923. .css-yhhl9h > div:nth-of-type(1) > div video:active {
  3924. mix-blend-mode: overlay !important;
  3925. }
  3926. }
  3927. if (avatarmixblend=="avatarmixpluslighter") {
  3928. .css-1dhayxc::after,
  3929. .css-yhhl9h > div:nth-of-type(1) > div img,
  3930. .css-yhhl9h > div:nth-of-type(1) > div video:active {
  3931. mix-blend-mode: plus-lighter !important;
  3932. }
  3933. }
  3934. if (avatarmixblend=="avatarmixsaturation") {
  3935. .css-1dhayxc::after,
  3936. .css-yhhl9h > div:nth-of-type(1) > div img,
  3937. .css-yhhl9h > div:nth-of-type(1) > div video:active {
  3938. mix-blend-mode: saturation !important;
  3939. }
  3940. }
  3941. if (avatarmixblend=="avatarmixscreen") {
  3942. .css-1dhayxc::after,
  3943. .css-yhhl9h > div:nth-of-type(1) > div img,
  3944. .css-yhhl9h > div:nth-of-type(1) > div video:active {
  3945. mix-blend-mode: screen !important;
  3946. }
  3947. }
  3948. if (avatarmixblend=="avatarmixsoftlight") {
  3949. .css-1dhayxc::after,
  3950. .css-yhhl9h > div:nth-of-type(1) > div img,
  3951. .css-yhhl9h > div:nth-of-type(1) > div video:active {
  3952. mix-blend-mode: soft-light !important;
  3953. }
  3954. }
  3955. /* Avatar opacity */
  3956. .css-1dhayxc::after,
  3957. .css-yhhl9h > div:nth-of-type(1) > div img,
  3958. .css-yhhl9h > div:nth-of-type(1) > div video:active {
  3959. opacity: avataropacity !important;
  3960. }
  3961. /* Avatar styles */
  3962. if (avatarstyles=="avataralien") || (avatarstyles=="avatarapple") || (avatarstyles=="avataratom") || (avatarstyles=="avatarbookmark") || (avatarstyles=="avatarcannabis") || (avatarstyles=="avatarchatbubble") || (avatarstyles=="avatarchefhat") || (avatarstyles=="avatarcloud") || (avatarstyles=="avatarcog") || (avatarstyles=="avatarcrystal") || (avatarstyles=="avatardevil") || (avatarstyles=="avatargem") || (avatarstyles=="avatarghost") || (avatarstyles=="avatargift") || (avatarstyles=="avatarheart") || (avatarstyles=="avataroctagon") || (avatarstyles=="avatarpentagon") || (avatarstyles=="avatarrabbit") || (avatarstyles=="avatarratio") || (avatarstyles=="avatarshield") || (avatarstyles=="avatarshipwheel") || (avatarstyles=="avatarshirt") || (avatarstyles=="avatarslime") || (avatarstyles=="avatarsmartphone") || (avatarstyles=="avatarsquircle") || (avatarstyles=="avatarstar") || (avatarstyles=="avatartablet") || (avatarstyles=="avatartreedeciduous") || (avatarstyles=="avatartreepine") || (avatarstyles=="avatartriangle") || (avatarstyles=="avatarvenetianmask") {
  3963. .css-1dhayxc::after,
  3964. .css-yhhl9h > div:nth-of-type(1) > div img,
  3965. .css-yhhl9h > div:nth-of-type(1) > div video {
  3966. -webkit-mask-position: center;
  3967. mask-position: center;
  3968. -webkit-mask-repeat: no-repeat;
  3969. mask-repeat: no-repeat;
  3970. -webkit-mask-size: cover;
  3971. mask-size: cover;
  3972. max-height: 100%;
  3973. max-width: 100%;
  3974. object-fit: cover;
  3975. transition: 0.3s linear ease-in-out;
  3976. }
  3977. }
  3978. if (avatarstyles=="avatardefault") {
  3979. .css-1dhayxc::after,
  3980. .css-yhhl9h > div:nth-of-type(1) > div img,
  3981. .css-yhhl9h > div:nth-of-type(1) > div video {
  3982. transition: 0.3s linear ease-in-out;
  3983. }
  3984. }
  3985. if (avatarstyles=="avataralien") {
  3986. .css-1dhayxc::after,
  3987. .css-yhhl9h > div:nth-of-type(1) > div img,
  3988. .css-yhhl9h > div:nth-of-type(1) > div video {
  3989. -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.382 9.4054c-.0649-.6486-.1297-1.3622-.2595-2.0108-.1297-.6487-.2594-1.2973-.5189-1.946-.1297-.3243-.2595-.6486-.3892-.908-.1297-.3244-.3243-.5838-.454-.9082-.1946-.2594-.3892-.5838-.5838-.8432-.1946-.2595-.454-.519-.7135-.7135-.454-.3892-.973-.7784-1.5568-1.1027-.5838-.3244-1.2324-.5838-1.881-.7135C13.3765.0649 12.7278 0 12.0143 0c-.7135 0-1.3621.0649-2.0108.2595C9.355.3892 8.7712.6486 8.1874.973c-.6487.3243-1.1676.7135-1.6865 1.1675-.2595.1946-.454.454-.7135.7136l-.5838.7783c-.1297.3244-.3243.5838-.454.9081l-.3892.973c-.1946.6487-.3892 1.2973-.519 1.946-.1297.6486-.1946 1.2973-.2594 2.0108-.0649.7135 0 1.2973 0 1.946 0 .6486.0648 1.2972.1946 2.0107l.1946.973c.0648.3243.1946.6486.3243.973.454 1.2324 1.1676 2.4 1.881 3.5027.3893.5838.7785 1.1027 1.1676 1.6216.3892.519.7784 1.1027 1.2325 1.5568.1946.2594.454.454.7135.7135.2594.1946.519.3892.8432.5837.2595.1946.5838.3244.9081.4541.1298.0649.3244.1297.4541.1297.1946 0 .3243.0649.519.0649.1945 0 .3242 0 .5188-.0649.1946 0 .3244-.0648.454-.1297.3244-.1297.6487-.2595.9082-.454.2595-.1946.5838-.3892.8432-.5838.2595-.1946.519-.454.7136-.7135.454-.519.8432-1.0379 1.2324-1.5568.3892-.519.7784-1.1027 1.1676-1.6216.7135-1.1027 1.427-2.2703 1.881-3.5027.1298-.3244.2595-.6487.3244-.973.0648-.3243.1946-.6486.1946-.973.1297-.6486.1945-1.2973.1945-2.0108 0-.6486 0-1.3621-.0648-2.0108'/%3E%3C/svg%3E");
  3990. mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.382 9.4054c-.0649-.6486-.1297-1.3622-.2595-2.0108-.1297-.6487-.2594-1.2973-.5189-1.946-.1297-.3243-.2595-.6486-.3892-.908-.1297-.3244-.3243-.5838-.454-.9082-.1946-.2594-.3892-.5838-.5838-.8432-.1946-.2595-.454-.519-.7135-.7135-.454-.3892-.973-.7784-1.5568-1.1027-.5838-.3244-1.2324-.5838-1.881-.7135C13.3765.0649 12.7278 0 12.0143 0c-.7135 0-1.3621.0649-2.0108.2595C9.355.3892 8.7712.6486 8.1874.973c-.6487.3243-1.1676.7135-1.6865 1.1675-.2595.1946-.454.454-.7135.7136l-.5838.7783c-.1297.3244-.3243.5838-.454.9081l-.3892.973c-.1946.6487-.3892 1.2973-.519 1.946-.1297.6486-.1946 1.2973-.2594 2.0108-.0649.7135 0 1.2973 0 1.946 0 .6486.0648 1.2972.1946 2.0107l.1946.973c.0648.3243.1946.6486.3243.973.454 1.2324 1.1676 2.4 1.881 3.5027.3893.5838.7785 1.1027 1.1676 1.6216.3892.519.7784 1.1027 1.2325 1.5568.1946.2594.454.454.7135.7135.2594.1946.519.3892.8432.5837.2595.1946.5838.3244.9081.4541.1298.0649.3244.1297.4541.1297.1946 0 .3243.0649.519.0649.1945 0 .3242 0 .5188-.0649.1946 0 .3244-.0648.454-.1297.3244-.1297.6487-.2595.9082-.454.2595-.1946.5838-.3892.8432-.5838.2595-.1946.519-.454.7136-.7135.454-.519.8432-1.0379 1.2324-1.5568.3892-.519.7784-1.1027 1.1676-1.6216.7135-1.1027 1.427-2.2703 1.881-3.5027.1298-.3244.2595-.6487.3244-.973.0648-.3243.1946-.6486.1946-.973.1297-.6486.1945-1.2973.1945-2.0108 0-.6486 0-1.3621-.0648-2.0108'/%3E%3C/svg%3E");
  3991. }
  3992. }
  3993. if (avatarstyles=="avatarapple") {
  3994. .css-1dhayxc::after,
  3995. .css-yhhl9h > div:nth-of-type(1) > div img,
  3996. .css-yhhl9h > div:nth-of-type(1) > div video {
  3997. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z'/%3E%3Cpath d='M10 2c1 .5 2 2 2 5'/%3E%3C/svg%3E");
  3998. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z'/%3E%3Cpath d='M10 2c1 .5 2 2 2 5'/%3E%3C/svg%3E");
  3999. }
  4000. }
  4001. if (avatarstyles=="avataratom") {
  4002. .css-1dhayxc::after,
  4003. .css-yhhl9h > div:nth-of-type(1) > div img,
  4004. .css-yhhl9h > div:nth-of-type(1) > div video {
  4005. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Cpath d='M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z'/%3E%3Cpath d='M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z'/%3E%3C/svg%3E");
  4006. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Cpath d='M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z'/%3E%3Cpath d='M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z'/%3E%3C/svg%3E");
  4007. }
  4008. }
  4009. if (avatarstyles=="avatarbookmark") {
  4010. .css-1dhayxc::after,
  4011. .css-yhhl9h > div:nth-of-type(1) > div img,
  4012. .css-yhhl9h > div:nth-of-type(1) > div video {
  4013. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E");
  4014. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E");
  4015. }
  4016. }
  4017. if (avatarstyles=="avatarcannabis") {
  4018. .css-1dhayxc::after,
  4019. .css-yhhl9h > div:nth-of-type(1) > div img,
  4020. .css-yhhl9h > div:nth-of-type(1) > div video {
  4021. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-4'/%3E%3Cpath d='M7 12c-1.5 0-4.5 1.5-5 3 3.5 1.5 6 1 6 1-1.5 1.5-2 3.5-2 5 2.5 0 4.5-1.5 6-3 1.5 1.5 3.5 3 6 3 0-1.5-.5-3.5-2-5 0 0 2.5.5 6-1-.5-1.5-3.5-3-5-3 1.5-1 4-4 4-6-2.5 0-5.5 1.5-7 3 0-2.5-.5-5-2-7-1.5 2-2 4.5-2 7-1.5-1.5-4.5-3-7-3 0 2 2.5 5 4 6'/%3E%3C/svg%3E");
  4022. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-4'/%3E%3Cpath d='M7 12c-1.5 0-4.5 1.5-5 3 3.5 1.5 6 1 6 1-1.5 1.5-2 3.5-2 5 2.5 0 4.5-1.5 6-3 1.5 1.5 3.5 3 6 3 0-1.5-.5-3.5-2-5 0 0 2.5.5 6-1-.5-1.5-3.5-3-5-3 1.5-1 4-4 4-6-2.5 0-5.5 1.5-7 3 0-2.5-.5-5-2-7-1.5 2-2 4.5-2 7-1.5-1.5-4.5-3-7-3 0 2 2.5 5 4 6'/%3E%3C/svg%3E");
  4023. }
  4024. }
  4025. if (avatarstyles=="avatarchatbubble") {
  4026. .css-1dhayxc::after,
  4027. .css-yhhl9h > div:nth-of-type(1) > div img,
  4028. .css-yhhl9h > div:nth-of-type(1) > div video {
  4029. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  4030. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  4031. }
  4032. }
  4033. if (avatarstyles=="avatarchefhat") {
  4034. .css-1dhayxc::after,
  4035. .css-yhhl9h > div:nth-of-type(1) > div img,
  4036. .css-yhhl9h > div:nth-of-type(1) > div video {
  4037. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21a1 1 0 0 0 1-1v-5.35c0-.457.316-.844.727-1.041a4 4 0 0 0-2.134-7.589 5 5 0 0 0-9.186 0 4 4 0 0 0-2.134 7.588c.411.198.727.585.727 1.041V20a1 1 0 0 0 1 1Z'/%3E%3Cpath d='M6 17h12'/%3E%3C/svg%3E");
  4038. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21a1 1 0 0 0 1-1v-5.35c0-.457.316-.844.727-1.041a4 4 0 0 0-2.134-7.589 5 5 0 0 0-9.186 0 4 4 0 0 0-2.134 7.588c.411.198.727.585.727 1.041V20a1 1 0 0 0 1 1Z'/%3E%3Cpath d='M6 17h12'/%3E%3C/svg%3E");
  4039. }
  4040. }
  4041. if (avatarstyles=="avatarcircle") {
  4042. .css-1dhayxc::after,
  4043. .css-yhhl9h > div:nth-of-type(1) > div img,
  4044. .css-yhhl9h > div:nth-of-type(1) > div video {
  4045. border-radius: 50% !important;
  4046. transition: 0.3s linear ease-in-out;
  4047. }
  4048. }
  4049. if (avatarstyles=="avatarcloud") {
  4050. .css-1dhayxc::after,
  4051. .css-yhhl9h > div:nth-of-type(1) > div img,
  4052. .css-yhhl9h > div:nth-of-type(1) > div video {
  4053. -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.762 4.29a6.51 6.51 0 0 0-5.669 3.332 3.571 3.571 0 0 0-1.558-.36 3.571 3.571 0 0 0-3.516 3A4.918 4.918 0 0 0 0 14.796a4.918 4.918 0 0 0 4.92 4.914 4.93 4.93 0 0 0 .617-.045h14.42c2.305-.272 4.041-2.258 4.043-4.589v-.009a4.594 4.594 0 0 0-3.727-4.508 6.51 6.51 0 0 0-6.511-6.27z'/%3E%3C/svg%3E");
  4054. mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.762 4.29a6.51 6.51 0 0 0-5.669 3.332 3.571 3.571 0 0 0-1.558-.36 3.571 3.571 0 0 0-3.516 3A4.918 4.918 0 0 0 0 14.796a4.918 4.918 0 0 0 4.92 4.914 4.93 4.93 0 0 0 .617-.045h14.42c2.305-.272 4.041-2.258 4.043-4.589v-.009a4.594 4.594 0 0 0-3.727-4.508 6.51 6.51 0 0 0-6.511-6.27z'/%3E%3C/svg%3E");
  4055. }
  4056. }
  4057. if (avatarstyles=="avatarcog") {
  4058. .css-1dhayxc::after,
  4059. .css-yhhl9h > div:nth-of-type(1) > div img,
  4060. .css-yhhl9h > div:nth-of-type(1) > div video {
  4061. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  4062. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  4063. }
  4064. }
  4065. if (avatarstyles=="avatarcrystal") {
  4066. .css-1dhayxc::after,
  4067. .css-yhhl9h > div:nth-of-type(1) > div img,
  4068. .css-yhhl9h > div:nth-of-type(1) > div video {
  4069. -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.964 15.266l-8.687 8.669c-.034.035-.086.052-.121.035L3.29 20.79c-.052-.017-.087-.052-.087-.086L.007 8.856c-.018-.053 0-.087.035-.122L8.728.065c.035-.035.087-.052.121-.035l11.866 3.18c.052.017.087.052.087.086l3.18 11.848c.034.053.016.087-.018.122'/%3E%3C/svg%3E");
  4070. mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.964 15.266l-8.687 8.669c-.034.035-.086.052-.121.035L3.29 20.79c-.052-.017-.087-.052-.087-.086L.007 8.856c-.018-.053 0-.087.035-.122L8.728.065c.035-.035.087-.052.121-.035l11.866 3.18c.052.017.087.052.087.086l3.18 11.848c.034.053.016.087-.018.122'/%3E%3C/svg%3E");
  4071. }
  4072. }
  4073. if (avatarstyles=="avatardevil") {
  4074. .css-1dhayxc::after,
  4075. .css-yhhl9h > div:nth-of-type(1) > div img,
  4076. .css-yhhl9h > div:nth-of-type(1) > div video {
  4077. -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 512 512' version='1.1' fill='currentColor' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M501.966 49.426c-16.928 16.928-36.504 29.582-99.1764 50.7557 14.607 16.299 26.889 34.19 43.102 62.5834C494.0646 111.1761 509.933 73.965 512 38.484 508.837 42.236 505.501 45.891 501.966 49.426z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M10.034 49.427C6.5 45.891 3.163 42.236 0 38.485c2.066 35.481 12.317 70.571 48.6764 142.886 14.3674-25.3717 27.0445-46.5147 43.9473-71.8863C46.538 79.009 26.961 66.353 10.034 49.427z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M256.001 37.549C135.353 37.549 37.549 135.353 37.549 256s97.804 218.451 218.451 218.451c120.648 0 218.451-97.804 218.451-218.451S376.648 37.549 256.001 37.549'/%3E%3C/g%3E%3C/svg%3E");
  4078. mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 512 512' version='1.1' fill='currentColor' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M501.966 49.426c-16.928 16.928-36.504 29.582-99.1764 50.7557 14.607 16.299 26.889 34.19 43.102 62.5834C494.0646 111.1761 509.933 73.965 512 38.484 508.837 42.236 505.501 45.891 501.966 49.426z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M10.034 49.427C6.5 45.891 3.163 42.236 0 38.485c2.066 35.481 12.317 70.571 48.6764 142.886 14.3674-25.3717 27.0445-46.5147 43.9473-71.8863C46.538 79.009 26.961 66.353 10.034 49.427z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M256.001 37.549C135.353 37.549 37.549 135.353 37.549 256s97.804 218.451 218.451 218.451c120.648 0 218.451-97.804 218.451-218.451S376.648 37.549 256.001 37.549'/%3E%3C/g%3E%3C/svg%3E");
  4079. }
  4080. }
  4081. if (avatarstyles=="avatargem") {
  4082. .css-1dhayxc::after,
  4083. .css-yhhl9h > div:nth-of-type(1) > div img,
  4084. .css-yhhl9h > div:nth-of-type(1) > div video {
  4085. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9Z'/%3E%3Cpath d='M11 3 8 9l4 13 4-13-3-6'/%3E%3Cpath d='M2 9h20'/%3E%3C/svg%3E");
  4086. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9Z'/%3E%3Cpath d='M11 3 8 9l4 13 4-13-3-6'/%3E%3Cpath d='M2 9h20'/%3E%3C/svg%3E");
  4087. }
  4088. }
  4089. if (avatarstyles=="avatarghost") {
  4090. .css-1dhayxc::after,
  4091. .css-yhhl9h > div:nth-of-type(1) > div img,
  4092. .css-yhhl9h > div:nth-of-type(1) > div video {
  4093. -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.058 19.93c-1.01-2.29-1.185-4.228-1.212-4.99V8.67C20.846 3.882 16.886 0 12 0S3.15 3.882 3.15 8.671v6.36c-.037.82-.236 2.7-1.207 4.899-1.306 2.955-.226 2.603.742 2.36.968-.242 3.13-1.192 3.805-.022.675 1.17 1.238 2.184 2.814 1.523 1.576-.663 2.318-.883 2.543-.883h.306c.225 0 .968.22 2.543.882 1.576.662 2.14-.353 2.814-1.522.676-1.17 2.837-.22 3.805.022.968.243 2.048.595.743-2.36'/%3E%3C/svg%3E");
  4094. mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.058 19.93c-1.01-2.29-1.185-4.228-1.212-4.99V8.67C20.846 3.882 16.886 0 12 0S3.15 3.882 3.15 8.671v6.36c-.037.82-.236 2.7-1.207 4.899-1.306 2.955-.226 2.603.742 2.36.968-.242 3.13-1.192 3.805-.022.675 1.17 1.238 2.184 2.814 1.523 1.576-.663 2.318-.883 2.543-.883h.306c.225 0 .968.22 2.543.882 1.576.662 2.14-.353 2.814-1.522.676-1.17 2.837-.22 3.805.022.968.243 2.048.595.743-2.36'/%3E%3C/svg%3E");
  4095. }
  4096. }
  4097. if (avatarstyles=="avatargift") {
  4098. .css-1dhayxc::after,
  4099. .css-yhhl9h > div:nth-of-type(1) > div img,
  4100. .css-yhhl9h > div:nth-of-type(1) > div video {
  4101. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
  4102. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
  4103. }
  4104. }
  4105. if (avatarstyles=="avatarheart") {
  4106. .css-1dhayxc::after,
  4107. .css-yhhl9h > div:nth-of-type(1) > div img,
  4108. .css-yhhl9h > div:nth-of-type(1) > div video {
  4109. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  4110. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  4111. }
  4112. }
  4113. if (avatarstyles=="avataroctagon") {
  4114. .css-1dhayxc::after,
  4115. .css-yhhl9h > div:nth-of-type(1) > div img,
  4116. .css-yhhl9h > div:nth-of-type(1) > div video {
  4117. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/%3E%3C/svg%3E");
  4118. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/%3E%3C/svg%3E");
  4119. }
  4120. }
  4121. if (avatarstyles=="avatarovalh") {
  4122. .css-1dhayxc::after,
  4123. .css-yhhl9h > div:nth-of-type(1) > div img,
  4124. .css-yhhl9h > div:nth-of-type(1) > div video {
  4125. aspect-ratio: 13 / 9;
  4126. border-radius: 50% !important;
  4127. max-height: 100%;
  4128. object-fit: cover;
  4129. transition: 0.3s linear ease-in-out;
  4130. width: auto;
  4131. }
  4132. }
  4133. if (avatarstyles=="avatarovalv") {
  4134. .css-1dhayxc::after,
  4135. .css-yhhl9h > div:nth-of-type(1) > div img,
  4136. .css-yhhl9h > div:nth-of-type(1) > div video {
  4137. aspect-ratio: 9 / 13;
  4138. border-radius: 50% !important;
  4139. height: auto;
  4140. max-width: 100%;
  4141. object-fit: cover;
  4142. transition: 0.3s linear ease-in-out;
  4143. }
  4144. }
  4145. if (avatarstyles=="avatarpentagon") {
  4146. .css-1dhayxc::after,
  4147. .css-yhhl9h > div:nth-of-type(1) > div img,
  4148. .css-yhhl9h > div:nth-of-type(1) > div video {
  4149. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.83 2.38a2 2 0 0 1 2.34 0l8 5.74a2 2 0 0 1 .73 2.25l-3.04 9.26a2 2 0 0 1-1.9 1.37H7.04a2 2 0 0 1-1.9-1.37L2.1 10.37a2 2 0 0 1 .73-2.25z'/%3E%3C/svg%3E");
  4150. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.83 2.38a2 2 0 0 1 2.34 0l8 5.74a2 2 0 0 1 .73 2.25l-3.04 9.26a2 2 0 0 1-1.9 1.37H7.04a2 2 0 0 1-1.9-1.37L2.1 10.37a2 2 0 0 1 .73-2.25z'/%3E%3C/svg%3E");
  4151. }
  4152. }
  4153. if (avatarstyles=="avatarrabbit") {
  4154. .css-1dhayxc::after,
  4155. .css-yhhl9h > div:nth-of-type(1) > div img,
  4156. .css-yhhl9h > div:nth-of-type(1) > div video {
  4157. -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.872 21.356c.077.195.682 1.646 1.685 2.156 1.075.547 1.613.406 1.613.406s-.914-3.384-.108-6.076c.807-2.691 1.479-2.933 1.479-2.933s1.478.591 2.446 0c.968-.591 1.264-1.747 1.264-1.747s-.672-2.474-1.264-3.442c-.591-.967-1.227-1.48-2.016-1.828a235.34 235.34 0 0 0-1.508-.655 11.275 11.275 0 0 0-1.003-3.198C16.237 1.531 14.678 0 14.678 0s-.815.7-1.025 2.032c.56.497 1.462 1.45 2.258 2.42.4.485.906 1.227 1.31 1.846a26.053 26.053 0 0 0-2.6-2.626c-1.828-1.586-3.63-2.823-3.63-2.823s-1.29 2.016.243 4.785c1.048 1.778 3.704 3.31 3.704 3.31s-2.736.134-3.704.346c-.968.213-2.043.592-3.253 1.398-1.21.807-2.01 1.647-3.011 3.011-1 1.365-1.962 3.71-1.962 3.71s-.135-.188-1.049-.188c-.914 0-1.21.188-1.21.188s.027 2.312.592 3.441c.564 1.13 1.37 1.562 2.392 1.562.27-.002.834 0 .834 0s.699 1.1 1.129 1.369c.43.268 1.183.215 1.183.215h8.253s-.048-.619-.51-1.103c-.448-.466-.983-.608-1.117-.666a3.776 3.776 0 0 0-1.008-.167h-2.123s2.689-.095 4.274-1.936c.833-.967.914-2.15.833-2.742-.04-.292-.295-1.29-.752-1.882a5.905 5.905 0 0 0-1.183-1.129c-.516-.36-1.17-.642-1.909-.94 1.075.268 1.586.376 2.635 1.129 1.048.752 1.505 1.908 1.586 2.177.08.269.269.672.215 1.828-.108.968-.218 1.208-.484 1.72-.217.456-.427.742-.717 1.07Z'/%3E%3C/svg%3E");
  4158. mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.872 21.356c.077.195.682 1.646 1.685 2.156 1.075.547 1.613.406 1.613.406s-.914-3.384-.108-6.076c.807-2.691 1.479-2.933 1.479-2.933s1.478.591 2.446 0c.968-.591 1.264-1.747 1.264-1.747s-.672-2.474-1.264-3.442c-.591-.967-1.227-1.48-2.016-1.828a235.34 235.34 0 0 0-1.508-.655 11.275 11.275 0 0 0-1.003-3.198C16.237 1.531 14.678 0 14.678 0s-.815.7-1.025 2.032c.56.497 1.462 1.45 2.258 2.42.4.485.906 1.227 1.31 1.846a26.053 26.053 0 0 0-2.6-2.626c-1.828-1.586-3.63-2.823-3.63-2.823s-1.29 2.016.243 4.785c1.048 1.778 3.704 3.31 3.704 3.31s-2.736.134-3.704.346c-.968.213-2.043.592-3.253 1.398-1.21.807-2.01 1.647-3.011 3.011-1 1.365-1.962 3.71-1.962 3.71s-.135-.188-1.049-.188c-.914 0-1.21.188-1.21.188s.027 2.312.592 3.441c.564 1.13 1.37 1.562 2.392 1.562.27-.002.834 0 .834 0s.699 1.1 1.129 1.369c.43.268 1.183.215 1.183.215h8.253s-.048-.619-.51-1.103c-.448-.466-.983-.608-1.117-.666a3.776 3.776 0 0 0-1.008-.167h-2.123s2.689-.095 4.274-1.936c.833-.967.914-2.15.833-2.742-.04-.292-.295-1.29-.752-1.882a5.905 5.905 0 0 0-1.183-1.129c-.516-.36-1.17-.642-1.909-.94 1.075.268 1.586.376 2.635 1.129 1.048.752 1.505 1.908 1.586 2.177.08.269.269.672.215 1.828-.108.968-.218 1.208-.484 1.72-.217.456-.427.742-.717 1.07Z'/%3E%3C/svg%3E");
  4159. }
  4160. }
  4161. if (avatarstyles=="avatarratio") {
  4162. .css-1dhayxc::after,
  4163. .css-yhhl9h > div:nth-of-type(1) > div img,
  4164. .css-yhhl9h > div:nth-of-type(1) > div video {
  4165. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='12' height='20' x='6' y='2' rx='2'/%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3C/svg%3E");
  4166. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='12' height='20' x='6' y='2' rx='2'/%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3C/svg%3E");
  4167. }
  4168. }
  4169. if (avatarstyles=="avatarrectangle") || (avatarstyles=="avatarrectanglebig") {
  4170. .css-1dhayxc::after,
  4171. .css-yhhl9h > div:nth-of-type(1) > div img,
  4172. .css-yhhl9h > div:nth-of-type(1) > div video {
  4173. aspect-ratio: 9 / 13;
  4174. height: auto;
  4175. max-width: 100%;
  4176. object-fit: cover;
  4177. transition: 0.3s linear ease-in-out;
  4178. }
  4179. }
  4180. if (avatarstyles=="avatarshield") {
  4181. .css-1dhayxc::after,
  4182. .css-yhhl9h > div:nth-of-type(1) > div img,
  4183. .css-yhhl9h > div:nth-of-type(1) > div video {
  4184. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
  4185. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
  4186. }
  4187. }
  4188. if (avatarstyles=="avatarshipwheel") {
  4189. .css-1dhayxc::after,
  4190. .css-yhhl9h > div:nth-of-type(1) > div img,
  4191. .css-yhhl9h > div:nth-of-type(1) > div video {
  4192. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 2v7.5'/%3E%3Cpath d='m19 5-5.23 5.23'/%3E%3Cpath d='M22 12h-7.5'/%3E%3Cpath d='m19 19-5.23-5.23'/%3E%3Cpath d='M12 14.5V22'/%3E%3Cpath d='M10.23 13.77 5 19'/%3E%3Cpath d='M9.5 12H2'/%3E%3Cpath d='M10.23 10.23 5 5'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
  4193. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 2v7.5'/%3E%3Cpath d='m19 5-5.23 5.23'/%3E%3Cpath d='M22 12h-7.5'/%3E%3Cpath d='m19 19-5.23-5.23'/%3E%3Cpath d='M12 14.5V22'/%3E%3Cpath d='M10.23 13.77 5 19'/%3E%3Cpath d='M9.5 12H2'/%3E%3Cpath d='M10.23 10.23 5 5'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
  4194. }
  4195. }
  4196. if (avatarstyles=="avatarshirt") {
  4197. .css-1dhayxc::after,
  4198. .css-yhhl9h > div:nth-of-type(1) > div img,
  4199. .css-yhhl9h > div:nth-of-type(1) > div video {
  4200. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z'/%3E%3C/svg%3E");
  4201. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z'/%3E%3C/svg%3E");
  4202. }
  4203. }
  4204. if (avatarstyles=="avatarslime") {
  4205. .css-1dhayxc::after,
  4206. .css-yhhl9h > div:nth-of-type(1) > div img,
  4207. .css-yhhl9h > div:nth-of-type(1) > div video {
  4208. -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.862c-6.617 0-12 5.383-12 12 0 1.964.49 3.406 1.5 4.408 1.706 1.696 4.619 1.868 8.05 1.868.43 0 .87-.002 1.315-.005a217.6 217.6 0 012.765 0c3.792.024 7.066.044 8.88-1.758C23.511 18.378 24 16.9 24 14.862c0-6.617-5.383-12-12-12'/%3E%3C/svg%3E");
  4209. mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.862c-6.617 0-12 5.383-12 12 0 1.964.49 3.406 1.5 4.408 1.706 1.696 4.619 1.868 8.05 1.868.43 0 .87-.002 1.315-.005a217.6 217.6 0 012.765 0c3.792.024 7.066.044 8.88-1.758C23.511 18.378 24 16.9 24 14.862c0-6.617-5.383-12-12-12'/%3E%3C/svg%3E");
  4210. }
  4211. }
  4212. if (avatarstyles=="avatarsmartphone") {
  4213. .css-1dhayxc::after,
  4214. .css-yhhl9h > div:nth-of-type(1) > div img,
  4215. .css-yhhl9h > div:nth-of-type(1) > div video {
  4216. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
  4217. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
  4218. }
  4219. }
  4220. if (avatarstyles=="avatarsquircle") {
  4221. .css-1dhayxc::after,
  4222. .css-yhhl9h > div:nth-of-type(1) > div img,
  4223. .css-yhhl9h > div:nth-of-type(1) > div video {
  4224. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9-9-1.8-9-9 1.8-9 9-9'/%3E%3C/svg%3E");
  4225. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9-9-1.8-9-9 1.8-9 9-9'/%3E%3C/svg%3E");
  4226. }
  4227. }
  4228. if (avatarstyles=="avatarstar") {
  4229. .css-1dhayxc::after,
  4230. .css-yhhl9h > div:nth-of-type(1) > div img,
  4231. .css-yhhl9h > div:nth-of-type(1) > div video {
  4232. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
  4233. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
  4234. }
  4235. }
  4236. if (avatarstyles=="avatartablet") {
  4237. .css-1dhayxc::after,
  4238. .css-yhhl9h > div:nth-of-type(1) > div img,
  4239. .css-yhhl9h > div:nth-of-type(1) > div video {
  4240. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cline x1='12' x2='12.01' y1='18' y2='18'/%3E%3C/svg%3E");
  4241. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cline x1='12' x2='12.01' y1='18' y2='18'/%3E%3C/svg%3E");
  4242. }
  4243. }
  4244. if (avatarstyles=="avatartreedeciduous") {
  4245. .css-1dhayxc::after,
  4246. .css-yhhl9h > div:nth-of-type(1) > div img,
  4247. .css-yhhl9h > div:nth-of-type(1) > div video {
  4248. height: 100%;
  4249. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 19a4 4 0 0 1-2.24-7.32A3.5 3.5 0 0 1 9 6.03V6a3 3 0 1 1 6 0v.04a3.5 3.5 0 0 1 3.24 5.65A4 4 0 0 1 16 19Z'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
  4250. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 19a4 4 0 0 1-2.24-7.32A3.5 3.5 0 0 1 9 6.03V6a3 3 0 1 1 6 0v.04a3.5 3.5 0 0 1 3.24 5.65A4 4 0 0 1 16 19Z'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
  4251. }
  4252. }
  4253. if (avatarstyles=="avatartreepine") {
  4254. .css-1dhayxc::after,
  4255. .css-yhhl9h > div:nth-of-type(1) > div img,
  4256. .css-yhhl9h > div:nth-of-type(1) > div video {
  4257. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 14 3 3.3a1 1 0 0 1-.7 1.7H4.7a1 1 0 0 1-.7-1.7L7 14h-.3a1 1 0 0 1-.7-1.7L9 9h-.2A1 1 0 0 1 8 7.3L12 3l4 4.3a1 1 0 0 1-.8 1.7H15l3 3.3a1 1 0 0 1-.7 1.7H17Z'/%3E%3Cpath d='M12 22v-3'/%3E%3C/svg%3E");
  4258. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 14 3 3.3a1 1 0 0 1-.7 1.7H4.7a1 1 0 0 1-.7-1.7L7 14h-.3a1 1 0 0 1-.7-1.7L9 9h-.2A1 1 0 0 1 8 7.3L12 3l4 4.3a1 1 0 0 1-.8 1.7H15l3 3.3a1 1 0 0 1-.7 1.7H17Z'/%3E%3Cpath d='M12 22v-3'/%3E%3C/svg%3E");
  4259. }
  4260. }
  4261. if (avatarstyles=="avatartriangle") {
  4262. .css-1dhayxc::after,
  4263. .css-yhhl9h > div:nth-of-type(1) > div img,
  4264. .css-yhhl9h > div:nth-of-type(1) > div video {
  4265. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3C/svg%3E");
  4266. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3C/svg%3E");
  4267. }
  4268. }
  4269. if (avatarstyles=="avatarvenetianmask") {
  4270. .css-1dhayxc::after,
  4271. .css-yhhl9h > div:nth-of-type(1) > div img,
  4272. .css-yhhl9h > div:nth-of-type(1) > div video {
  4273. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11c-1.5 0-2.5.5-3 2'/%3E%3Cpath d='M4 6a2 2 0 0 0-2 2v4a5 5 0 0 0 5 5 8 8 0 0 1 5 2 8 8 0 0 1 5-2 5 5 0 0 0 5-5V8a2 2 0 0 0-2-2h-3a8 8 0 0 0-5 2 8 8 0 0 0-5-2z'/%3E%3Cpath d='M6 11c1.5 0 2.5.5 3 2'/%3E%3C/svg%3E");
  4274. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11c-1.5 0-2.5.5-3 2'/%3E%3Cpath d='M4 6a2 2 0 0 0-2 2v4a5 5 0 0 0 5 5 8 8 0 0 1 5 2 8 8 0 0 1 5-2 5 5 0 0 0 5-5V8a2 2 0 0 0-2-2h-3a8 8 0 0 0-5 2 8 8 0 0 0-5-2z'/%3E%3Cpath d='M6 11c1.5 0 2.5.5 3 2'/%3E%3C/svg%3E");
  4275. }
  4276. }
  4277. /* Background */
  4278. .css-1qpmsp4 {
  4279. background: url(backgroundurl) backgroundcolor no-repeat 100% !important;
  4280. background-size: cover !important;
  4281. }
  4282. /* Bubbles background */
  4283. .css-yhhl9h > div:nth-of-type(2) > div:nth-of-type(2) {
  4284. background: url(bubblesbgurl) bubblesbgcolor !important;
  4285. background-size: cover;
  4286. }
  4287. /* Bubbles background for us */
  4288. .css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) {
  4289. background: url(bubblesbgurlforus) bubblesbgcolorforus !important;
  4290. background-size: cover;
  4291. }
  4292. /* Font color */
  4293. .css-1dhayxc > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div {
  4294. color: fontcolorforus;
  4295. }
  4296. .css-yhhl9h > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div {
  4297. color: fontcolor;
  4298. }
  4299. /* Gradient regenerate icon */
  4300. .css-yhhl9h > div:nth-of-type(3) > div > button img {
  4301. 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;
  4302. filter: invert(avatarinvert);
  4303. height: 0;
  4304. padding-left: 36px;
  4305. padding-top: 36px;
  4306. width: 0;
  4307. }
  4308. .css-yhhl9h > div:nth-of-type(3) > div:has(.chakra-spinner) {
  4309. [alt="regenerate"] {
  4310. display: none;
  4311. }
  4312. }
  4313.  
  4314. /* Group context textarea */
  4315. textarea[aria-label="Group context textarea"] {
  4316. height: 300px;
  4317. }
  4318. /* Modification of Continue/Pause conversation button */
  4319. if continueconvauto {
  4320. /* Remove space between chat and textarea area */
  4321. .css-1bkilns:last-child {
  4322. gap: 0;
  4323. }
  4324. .css-b9bzmp {
  4325. padding-left: 60px;
  4326. }
  4327. .css-1qpmsp4 > div > div:nth-of-type(3),
  4328. .css-1qpmsp4 > div > div:nth-of-type(3) > div,
  4329. .css-1qpmsp4 > div > div:nth-of-type(3) > div button {
  4330. bottom: .75em;
  4331. height: 61px;
  4332. left: 0;
  4333. margin-left: 0;
  4334. max-width: 61px;
  4335. position: fixed;
  4336. text-indent: -9999px;
  4337. width: 61px;
  4338. z-index: 2;
  4339. }
  4340. .css-1qpmsp4 > div > div:nth-of-type(3) > div button.css-snc6k5::before {
  4341. 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");
  4342. background-repeat: no-repeat;
  4343. background-size: cover;
  4344. content: "";
  4345. height: 48px;
  4346. width: 48px;
  4347. }
  4348. .css-1qpmsp4 > div > div:nth-of-type(3) > div button.css-snc6k5:hover::before {
  4349. 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");
  4350. background-repeat: no-repeat;
  4351. background-size: cover;
  4352. content: "";
  4353. filter: invert(avatarinvert);
  4354. height: 48px;
  4355. width: 48px;
  4356. }
  4357. .css-1qpmsp4 > div > div:nth-of-type(3) > div button.css-snc6k5:hover::after {
  4358. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  4359. background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  4360. background-clip: text;
  4361. bottom: 72px;
  4362. color: transparent;
  4363. -moz-background-clip: text;
  4364. -moz-text-fill-color: transparent;
  4365. -webkit-background-clip: text;
  4366. -webkit-text-fill-color: transparent;
  4367. content: "Continue conversation";
  4368. filter: invert(avatarinvert);
  4369. font-size: 18px;
  4370. line-height: 18px;
  4371. left: 10px;
  4372. text-indent: 0;
  4373. position: fixed;
  4374. }
  4375. .css-1qpmsp4 > div > div:nth-of-type(3) > div button.css-wgxnqr::before {
  4376. 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");
  4377. background-size: cover;
  4378. background-repeat: no-repeat;
  4379. content: "";
  4380. height: 48px;
  4381. width: 48px;
  4382. }
  4383. .css-1qpmsp4 > div > div:nth-of-type(3) > div button.css-wgxnqr:hover::before {
  4384. 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");
  4385. background-size: cover;
  4386. background-repeat: no-repeat;
  4387. content: "";
  4388. filter: invert(avatarinvert);
  4389. height: 48px;
  4390. width: 48px;
  4391. }
  4392. .css-1qpmsp4 > div > div:nth-of-type(3) > div button.css-wgxnqr:hover::after {
  4393. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  4394. background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  4395. background-clip: text;
  4396. bottom: 72px;
  4397. color: transparent;
  4398. -moz-background-clip: text;
  4399. -moz-text-fill-color: transparent;
  4400. -webkit-background-clip: text;
  4401. -webkit-text-fill-color: transparent;
  4402. content: "Pause conversation";
  4403. filter: invert(avatarinvert);
  4404. font-size: 18px;
  4405. line-height: 18px;
  4406. left: 10px;
  4407. text-indent: 0;
  4408. position: fixed;
  4409. }
  4410. }
  4411. if continueconvmanual || continueconvmanualcenter {
  4412. .css-nxakwj {
  4413. margin-bottom: 0 !important;
  4414. }
  4415. .css-1vt9rnf {
  4416. max-width: 100%;
  4417. padding-bottom: 2em;
  4418. width: 100%;
  4419. }
  4420. .css-qwhftf,
  4421. .css-qwhftf img {
  4422. height: auto;
  4423. width: 100px;
  4424. }
  4425. }
  4426. if continueconvmanualcenter {
  4427. .css-1vhh1fe {
  4428. justify-content: center;
  4429. }
  4430. }
  4431. /* Recalled memories icon on right and bigger */
  4432. .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"] {
  4433. right: -3.5em !important;
  4434. }
  4435. .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 {
  4436. right: -8.5em !important;
  4437. }
  4438. .css-1dhayxc button svg,
  4439. .css-yhhl9h button svg {
  4440. height: 36px;
  4441. width: 36px;
  4442. }
  4443. .css-4qwruq:has([aria-label="Create new scenario"]) {
  4444. .css-1dhayxc,
  4445. .css-yhhl9h {
  4446. padding-top: 2em !important;
  4447. }
  4448. }
  4449. /* Shadow at top of chat */
  4450. if bgshadow {
  4451. .css-1qpmsp4 > div {
  4452. position: relative;
  4453. }
  4454. .css-1qpmsp4 > div::before {
  4455. background: linear-gradient(to bottom, bgshadowcolor, transparent);
  4456. filter: invert(avatarinvert);
  4457. left: calc(var(--avatarchatgroupsize) + 1.5em) ;
  4458. content: "";
  4459. height: 5em;
  4460. position: absolute;
  4461. right: calc(36px + 1em);
  4462. top: 0;
  4463. z-index: 10;
  4464. }
  4465. }
  4466. }
  4467.  
  4468. @-moz-document url-prefix("https://kindroid.ai/selfies") {
  4469. /* =======================================================
  4470. Selfies page
  4471. ======================================================= */
  4472. /* Wide */
  4473. .css-ecz5ih {
  4474. max-width: 100vw;
  4475. }
  4476. /* Pin kins/groups */
  4477. .css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(1) > div > div:nth-of-type(2) > svg {
  4478. fill: var(--chakra-colors-secondaryWhite);
  4479. height: 2rem;
  4480. margin-top: .5em;
  4481. width: 2rem;
  4482. }
  4483. /* ===== Header with kin name ===== */
  4484. .css-ecz5ih > div:nth-of-type(1) {
  4485. padding: 1em;
  4486. }
  4487. /* Kin's name block */
  4488. .css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) {
  4489. height: 80px;
  4490. position: relative;
  4491. }
  4492. /* Kin's name */
  4493. .css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div {
  4494. left: 50%;
  4495. position: absolute;
  4496. text-align: center;
  4497. top: 10%;
  4498. transform: translate(-50%);
  4499. width: max-content;
  4500. }
  4501. /* Selfies credits and purchase selfie credits */
  4502. .css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div {
  4503. color: var(--chakra-colors-secondaryWhite);
  4504. }
  4505. .css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div,
  4506. .css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div {
  4507. font-size: fontsize;
  4508. line-height: 1.5;
  4509. margin: 0 auto;
  4510. text-align: center;
  4511. width: fit-content;
  4512. }
  4513. .css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div {
  4514. color: var(--chakra-colors-yellow-400);
  4515. filter: invert(avatarinvert);
  4516. }
  4517. .css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div u {
  4518. text-decoration: none;
  4519. }
  4520. .css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div::after,
  4521. .css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div::before {
  4522. color: var(--chakra-colors-yellow-400);
  4523. content: " $ ";
  4524. }
  4525. .css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div:hover,
  4526. .css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div:hover::after,
  4527. .css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(3) > div > div > div:hover::before {
  4528. color: var(--chakra-colors-red);
  4529. filter: invert(avatarinvert);
  4530. }
  4531. /* Engine */
  4532. .css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(1) p::before {
  4533. color: var(--chakra-colors-secondaryWhite);
  4534. content: "Engine ";
  4535. font-size: fontsize;
  4536. line-height: 1.5;
  4537. }
  4538. .css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(1) p {
  4539. color: var(--chakra-colors-secondaryWhite);
  4540. font-size: fontsize;
  4541. line-height: 1.5;
  4542. padding-top: .5em;
  4543. }
  4544. /* Labels and date icons */
  4545. .css-ecz5ih > div:nth-of-type(1) > div:nth-of-type(4) {
  4546. gap: 1em;
  4547. justify-content: flex-end;
  4548. margin-left: auto;
  4549. margin-top: auto;
  4550. width: fit-content;
  4551. }
  4552. /* Tags */
  4553. .css-1lemfya {
  4554. display: flex;
  4555. justify-content: flex-end;
  4556. }
  4557. [aria-label="Add tag"] {
  4558. font-size: 0;
  4559. order: 1;
  4560. }
  4561. [aria-label="Add tag"]::before {
  4562. border-radius: var(--chakra-radii-full);
  4563. color: var(--ion-color-success);
  4564. content: "+ Add tag";
  4565. font-family: var(--fontfamily);
  4566. font-size: fontsize;
  4567. font-weight: var(--chakra-fontWeights-semibold);
  4568. line-height: 18px;
  4569. margin-left: var(--chakra-space-1);
  4570. opacity: 1;
  4571. padding: var(--chakra-space-2) var(--chakra-space-3);
  4572. }
  4573. [aria-label="Filter for no tags"] {
  4574. font-size: 0;
  4575. opacity: 1;
  4576. order: 2;
  4577. }
  4578. [aria-label="Filter for no tags"]::before {
  4579. background: var(--chakra-colors-gray);
  4580. border-radius: var(--chakra-radii-full);
  4581. color: var(--chakra-colors-white);
  4582. content: "🚫 Untagged\00a0";
  4583. font-family: var(--fontfamily);
  4584. font-size: fontsize;
  4585. font-weight: var(--chakra-fontWeights-semibold);
  4586. line-height: 18px;
  4587. margin-right: var(--chakra-space-1);
  4588. opacity: 1;
  4589. padding: var(--chakra-space-2) var(--chakra-space-3);
  4590. }
  4591. [aria-label="Filter for no tags"]:hover {
  4592. text-decoration: none;
  4593. }
  4594. .css-1lemfya > div > div > span {
  4595. order: 3;
  4596. }
  4597. .css-1lemfya > div > div > span > span {
  4598. font-size: fontsize;
  4599. }
  4600. [aria-label="Manage tag"] {
  4601. color: var(--chakra-colors-white);
  4602. font-size: fontsize;
  4603. opacity: 1;
  4604. padding-bottom: .2em;
  4605. }
  4606. /* History */
  4607. .css-m598ao {
  4608. align-items: center;
  4609. display: flex;
  4610. gap: 1em;
  4611. flex-wrap: wrap;
  4612. justify-content: end;
  4613. }
  4614. .css-m598ao > p {
  4615. margin-bottom: 0;
  4616. }
  4617. .css-m598ao .react-datepicker__tab-loop {
  4618. flex-basis: 100%;
  4619. width: 100%;
  4620. }
  4621. .css-m598ao .react-datepicker-popper:not(svg) {
  4622. display: flex;
  4623. justify-content: end;
  4624. position: static !important;
  4625. transform: none !important;
  4626. }
  4627. .css-m598ao .react-datepicker-popper > svg {
  4628. bottom: calc(100% - 55px) !important;
  4629. left: auto !important;
  4630. right: 5.5%;
  4631. }
  4632. /* Request selfie */
  4633. .css-ecz5ih:has(form) {
  4634. .css-poz1rt {
  4635. display: none
  4636. }
  4637. }
  4638. .css-105olw3 {
  4639. max-height: calc(100vh - 60px);
  4640. overflow: hidden;
  4641. padding: 2em;
  4642. position: relative;
  4643. width: 100%;
  4644. }
  4645. /* Split if need */
  4646. body:has(.css-1wmhst1) {
  4647. .css-105olw3 > div,
  4648. .css-105olw3 > p {
  4649. max-width: 50%;
  4650. }
  4651. }
  4652. .css-105olw3 > div,
  4653. .css-105olw3 > p {
  4654. font-size: fontsize;
  4655. line-height: 1.5;
  4656. }
  4657. /* Advanced */
  4658. .css-1v3caum > div > button p {
  4659. font-size: calc(var(--fontsize) + .2rem) !important;
  4660. }
  4661. .css-1v3caum > div > button svg {
  4662. display: none;
  4663. }
  4664. .css-1v3caum > div > div {
  4665. display: block !important;
  4666. height: auto !important;
  4667. opacity: 1 !important;
  4668. }
  4669. .css-105olw3 input[placeholder="Enter seed"] {
  4670. margin-left: .5em;
  4671. max-width: 99%;
  4672. }
  4673. /* Pose/Style reference */
  4674. .css-105olw3 > .css-1wmhst1 {
  4675. display: flex;
  4676. flex-direction: column;
  4677. margin-left: auto;
  4678. position: absolute;
  4679. top: 0;
  4680. max-width: 25% !important;
  4681. }
  4682. .css-105olw3 > div:nth-of-type(2):not(.css-1v3caum) {
  4683. margin-left: 27%;
  4684. }
  4685. .css-105olw3 > div:nth-of-type(3) {
  4686. right: 0;
  4687. }
  4688. .css-1wmhst1 > .css-r4izcz {
  4689. display: flex;
  4690. justify-content: center;
  4691. width: 400px;
  4692. }
  4693. .css-105olw3 > .css-j0qw52 {
  4694. position: absolute;
  4695. right: 1em;
  4696. top: 500px;
  4697. min-width: 46%;
  4698. }
  4699. /* Request selfie avatar settings */
  4700. .css-de3hrx,
  4701. .css-dfpqc0,
  4702. .css-79elbk > img:not(.css-z9m7im,.css-1b8e0hb):hover,
  4703. .css-dfpqc0 > img:hover {
  4704. height: auto !important;
  4705. }
  4706. .css-1jcj2pk {
  4707. color: white;
  4708. }
  4709. /* Enhance prompt */
  4710. .css-105olw3 [aria-label="Enhance prompt"] {
  4711. top: 50%;
  4712. transform: translateY(-50%);
  4713. }
  4714. /* Enhance prompt modal */
  4715. body:not(:has([aria-label="Swap 1 and 2"])) {
  4716. .css-yqn6dm .css-5prrkc {
  4717. font-size: fontsize;
  4718. line-height: 1.5;
  4719. }
  4720. /* Split */
  4721. .css-yqn6dm > div > div > p:nth-of-type(3),
  4722. .css-yqn6dm > div > div > p:nth-of-type(4),
  4723. .css-yqn6dm > div > div > div:nth-of-type(1),
  4724. .css-yqn6dm > div > div > div:nth-of-type(3) {
  4725. max-width: 43% !important;
  4726. width: 43% !important;
  4727. }
  4728. .css-yqn6dm > div > div > div:nth-of-type(2) {
  4729. flex-direction: column;
  4730. left: 44.5%;
  4731. position: absolute;
  4732. top: 9em;
  4733. width: 10%
  4734. }
  4735.  
  4736. /* Original prompt title */
  4737. .css-yqn6dm > div > div > p:nth-of-type(3) {
  4738. text-align: center;
  4739. }
  4740.  
  4741. /* Arrows */
  4742. .css-yqn6dm > div > div > div:nth-of-type(2) svg {
  4743. margin: 0;
  4744. padding: 0;
  4745. transform: rotate(-90deg) !important;
  4746. }
  4747. /* Enhance button */
  4748. .css-yqn6dm > div > div > div:nth-of-type(2) > button {
  4749. margin: 2em auto !important;
  4750. }
  4751.  
  4752. /* Enhanced prompt title */
  4753. .css-yqn6dm > div > div > p:nth-of-type(4) {
  4754. position: absolute;
  4755. right: 1.5em;
  4756. text-align: center;
  4757. top: 6em;
  4758. }
  4759. /* Enhanced prompt */
  4760. .css-yqn6dm > div > div > div:nth-of-type(3) {
  4761. position: absolute;
  4762. right: 1.5em;
  4763. top: 9em;
  4764. }
  4765.  
  4766. /* Adopt enhanced prompt */
  4767. [aria-label="Adopt enhanced prompt"] {
  4768. align-self: center;
  4769. width: fit-content;
  4770. }
  4771. }
  4772. /* Request group selfie modal */
  4773. body:has([aria-label="Swap 1 and 2"]),
  4774. body:has([aria-label="Swap 1 and 2"]):has([aria-label="Swap 2 and 3"]) {
  4775. /* + icons */
  4776. .css-yqn6dm > div > div > div:nth-of-type(2) > div:nth-of-type(1) > div > div > svg,
  4777. .css-yqn6dm > div > div > div:nth-of-type(2) > div:nth-of-type(2) > div > div > svg,
  4778. .css-yqn6dm > div > div > div:nth-of-type(2) > div:nth-of-type(3) > div > div > svg{
  4779. height: 4em;
  4780. width: 4em;
  4781. }
  4782. .css-yqn6dm > div > div > div:nth-of-type(2) > div:nth-of-type(1) > div > div >img,
  4783. .css-yqn6dm > div > div > div:nth-of-type(2) > div:nth-of-type(2) > div > div >img,
  4784. .css-yqn6dm > div > div > div:nth-of-type(2) > div:nth-of-type(3) > div > div >img {
  4785. border-radius: 1em;
  4786. }
  4787. }
  4788. body:has([aria-label="Swap 1 and 2"]) {
  4789. .css-yqn6dm .css-a2vsmm,
  4790. .css-yqn6dm .css-5prrkc,
  4791. .css-yqn6dm .css-1apmuvy {
  4792. font-size: fontsize;
  4793. line-height: 1.5;
  4794. }
  4795.  
  4796. /* Avatar selection */
  4797. .css-yqn6dm > div > div > div:nth-of-type(2) {
  4798. justify-content: center;
  4799. }
  4800. .css-yqn6dm > div > div > div:nth-of-type(2) > div {
  4801. max-width: 25%;
  4802. }
  4803.  
  4804. .css-yqn6dm > div > div > div:nth-of-type(2) > div > p {
  4805. text-align: center;
  4806. }
  4807.  
  4808. /* Swap icon */
  4809. .css-yqn6dm > div > div > div:nth-of-type(2) > button {
  4810. padding: 2em;
  4811. width: 10%;
  4812. }
  4813. .css-yqn6dm > div > div > div:nth-of-type(2) > button > svg {
  4814. height: 4em !important;
  4815. width: 4em !important;
  4816. }
  4817. /* Enhance overall prompt */
  4818. [aria-label="Enhance overall prompt"] {
  4819. top: 50%;
  4820. transform: translateY(-50%);
  4821. }
  4822. /* Additional controls */
  4823. .css-yqn6dm > div > div > div:nth-of-type(4) > div > button > p > svg {
  4824. display: none;
  4825. }
  4826. .css-yqn6dm > div > div > div:nth-of-type(4) > div > div {
  4827. display: block !important;
  4828. height: auto !important;
  4829. opacity: 1 !important;
  4830. }
  4831. .css-yqn6dm > div > div > div:nth-of-type(4) > div > div > div > div {
  4832. margin-bottom: 0 !important;
  4833. }
  4834.  
  4835. /* Request selfie button in modal */
  4836. [aria-label="Request selfie"] {
  4837. align-self: center;
  4838. width: fit-content;
  4839. }
  4840. }
  4841. /* Request selfie button */
  4842. .css-ae75s5 {
  4843. display: flex;
  4844. justify-content: center;
  4845. min-width: 100vw;
  4846. }
  4847. [aria-label="Submit selfie request"] {
  4848. align-self: center;
  4849. width: max-content;
  4850. }
  4851.  
  4852. /* ===== Photos Gallery ===== */
  4853. .css-ezgmhy {
  4854. gap: 1em !important;
  4855. height: auto;
  4856. justify-content: center;
  4857. padding-bottom: 1em;
  4858. padding-top: 1em;
  4859. min-width: 100vw !important;
  4860. z-index: 9998 !important;
  4861. }
  4862. .css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(1) > button,
  4863. .css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(2) > button {
  4864. font-size: 1.2rem;
  4865. margin-bottom: .5em;
  4866. }
  4867. .css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(1) > button::before,
  4868. .css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(2) > button::before {
  4869. content: "";
  4870. display: inline-block;
  4871. height: 1em;
  4872. margin-right: .3em;
  4873. vertical-align: middle;
  4874. width: 1em;
  4875. }
  4876. .css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(1) > .css-17fx8iq::before {
  4877. 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;
  4878. }
  4879. .css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(1) > .css-18d42jr::before {
  4880. 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;
  4881. }
  4882. .css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(2) > .css-17fx8iq::before {
  4883. 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;
  4884. }
  4885. .css-ezgmhy > div:nth-of-type(1) > div:nth-of-type(2) > .css-18d42jr::before {
  4886. 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;
  4887. }
  4888. .css-ezgmhy > div:not(:first-child):not(:last-child),
  4889. .css-ezgmhy > div:not(:first-child):not(:last-child) > div:nth-of-type(1),
  4890. .css-kuf6b {
  4891. border-radius: 1em;
  4892. height: 300px;
  4893. width: 300px;
  4894. }
  4895. .css-hnnoj4:has(.css-jy2vee) {
  4896. cursor: help !important;
  4897. }
  4898. /* ===== Video Gallery ===== */
  4899. body:has(.css-koo3fz) {
  4900. .css-ecz5ih > div:nth-of-type(1) {
  4901. padding: 1em 1em 2em;
  4902. }
  4903. }
  4904. /* ===== Photo & video selfie modal ===== */
  4905. /* Arrows */
  4906. .css-fskrnz > div > div:nth-of-type(1) > button svg {
  4907. fill: var(--chakra-colors-white);
  4908. height: 40px;
  4909. width: 40px;
  4910. }
  4911. .css-fskrnz > div > div:nth-of-type(1) > button:hover svg {
  4912. fill: var(--chakra-colors-white);
  4913. transform: scale(1.5);
  4914. transition: transform 0.2s ease, fill 0.2s ease;
  4915. }
  4916. /* Delete image button in red */
  4917. .css-fskrnz > header > div > div > div,
  4918. .css-fskrnz > header > div > div > div > button {
  4919. background: var(--chakra-colors-primaryBlack);
  4920. }
  4921. .css-fskrnz > header > div > div > div > button:first-child > p {
  4922. color: var(--chakra-colors-secondaryWhite);
  4923. }
  4924. .css-fskrnz > header > div > div > div > button:last-child > p {
  4925. color: var(--chakra-colors-red);
  4926. }
  4927. /* ===== Photo selfie modal ===== */
  4928. .css-fskrnz:not(:has(video)) {
  4929. height: 811px;
  4930. width: 80%;
  4931. }
  4932. .css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) {
  4933. border-radius: 0 0 0 1em;
  4934. bottom: 0;
  4935. height: 775px;
  4936. left: 0;
  4937. margin-bottom: 0;
  4938. position: absolute;
  4939. width: auto;
  4940. }
  4941. .css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) > div {
  4942. border-radius: 0 0 0 1em;
  4943. }
  4944. .css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) > div:hover {
  4945. cursor: zoom-in;
  4946. }
  4947. .css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) > div:active {
  4948. cursor: move;
  4949. }
  4950. .css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) > div:hover::after,
  4951. .css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) > div:hover::before {
  4952. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  4953. background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  4954. border-radius: 1em;
  4955. color: var(--chakra-colors-primaryWhite);
  4956. display: block;
  4957. filter: invert(avatarinvert);
  4958. font-family: var(--fontfamily);
  4959. font-size: fontsize;
  4960. font-weight: normal;
  4961. left: 51.5%;
  4962. line-height: 1.2;
  4963. padding: .5em;
  4964. position: fixed;
  4965. transition: 0.3s linear ease-in-out;
  4966. white-space: nowrap;
  4967. }
  4968. .css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) > div:hover::before {
  4969. bottom: calc(60px + 3.5em);
  4970. content: "Scroll up/down to zoom in/out";
  4971. }
  4972. .css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) > div:hover::after {
  4973. bottom: calc(60px + .5em);
  4974. content: "After zoom-in, drag-and-drop to move the picture";
  4975. }
  4976. @media all and (display-mode: standalone) {
  4977. .css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) > div:hover::before {
  4978. bottom: calc(60px + 4.5em);
  4979. content: "Scroll up/down to zoom in/out";
  4980. }
  4981. .css-fskrnz:not(:has(video)) > div > div:nth-of-type(1) > div:hover::after {
  4982. bottom: calc(60px + 1.5em);
  4983. content: "After zoom-in, drag-and-drop to move the picture";
  4984. }
  4985. }
  4986. /* Prompt */
  4987. .css-fskrnz:not(:has(video)) > div > div:nth-of-type(2) {
  4988. margin-left: 52.5%;
  4989. max-height: max-content;
  4990. }
  4991. .css-fskrnz:not(:has(video)) > div > div:nth-of-type(2) > div > p {
  4992. font-size: fontsize;
  4993. margin-top: 4rem;
  4994. text-align: justify;
  4995. word-break: normal;
  4996. }
  4997. /* Date */
  4998. .css-fskrnz:not(:has(video)) > div > div:nth-of-type(2) > p {
  4999. color: var(--chakra-colors-secondaryWhite);
  5000. font-size: fontsize;
  5001. position: absolute;
  5002. right: 1.5em;
  5003. top: 3em;
  5004. }
  5005. /* Copy prompt */
  5006. .css-fskrnz:not(:has(video)) [aria-label="Copy prompt"] {
  5007. display: inline-block;
  5008. font-size: fontsize;
  5009. position: absolute;
  5010. text-decoration: none;
  5011. top: 3em;
  5012. }
  5013. .css-fskrnz:not(:has(video)) [aria-label="Copy prompt"]:hover svg {
  5014. background: url("data:image/svg+xml,%3Csvg fill='url(%23A)' stroke-width='0' viewBox='0 0 448 512' focusable='false' class='chakra-icon css-13otjrl' aria-hidden='true' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z'%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") no-repeat;
  5015. background-size: cover;
  5016. height: 0;
  5017. padding-left: 1em;
  5018. padding-top: 1em;
  5019. width: 0;
  5020. }
  5021. .css-fskrnz:not(:has(video)) [aria-label="Copy prompt"]:hover::after {
  5022. content: "Copy prompt";
  5023. font-size: fontsize;
  5024. top: -.2em;
  5025. padding-left: .3em;
  5026. pointer-events: auto;
  5027. position: absolute;
  5028. }
  5029. /* ===== Video selfie modal ===== */
  5030. body:has(video):has(.css-137mh4d:empty) {
  5031. .css-fskrnz,
  5032. .css-1wjwxyy {
  5033. overflow-y: hidden !important;
  5034. }
  5035. .css-fskrnz {
  5036. height: 821px;
  5037. overflow-y: hidden;
  5038. max-width: 775px;
  5039. }
  5040. .css-fskrnz:has(video) > div > div:nth-of-type(1) {
  5041. border-radius: 0 0 1em 1em;
  5042. height: auto;
  5043. width: 775px;
  5044. }
  5045. .css-fskrnz > div > div:nth-of-type(1) > video {
  5046. border-radius: 0 0 1em 1em;
  5047. }
  5048.  
  5049. /* Header */
  5050. .css-fskrnz:has(video) > header {
  5051. min-height: 46px;
  5052. padding-top: 5px;
  5053. }
  5054.  
  5055. /* Date */
  5056. .css-fskrnz:has(video) > div > div:nth-of-type(2) > p {
  5057. color: var(--chakra-colors-secondaryWhite);
  5058. font-size: fontsize;
  5059. position: fixed;
  5060. left: 50%;
  5061. transform: translateX(-50%);
  5062. top: 3em;
  5063. }
  5064. }
  5065. /* If prompt */
  5066. body:has(video):has(.css-137mh4d:not(:empty)) {
  5067. .css-fskrnz {
  5068. height: 811px;
  5069. width: 80%;
  5070. }
  5071. .css-fskrnz > div > div:nth-of-type(1) {
  5072. border-radius: 0 0 0 1em;
  5073. bottom: 0;
  5074. height: 775px;
  5075. left: 0;
  5076. margin-bottom: 0;
  5077. position: absolute;
  5078. width: auto;
  5079. }
  5080. .css-fskrnz > div > div:nth-of-type(1) > video {
  5081. border-radius: 0 0 0 1em;
  5082. }
  5083.  
  5084. /* Prompt */
  5085. .css-fskrnz > div > div:nth-of-type(2) {
  5086. margin-left: 52.5%;
  5087. max-height: max-content;
  5088. }
  5089. .css-fskrnz > div > div:nth-of-type(2) > p.css-137mh4d {
  5090. font-size: fontsize;
  5091. margin-top: 4rem;
  5092. text-align: justify;
  5093. word-break: normal;
  5094. }
  5095.  
  5096. /* Date */
  5097. .css-fskrnz > div > div:nth-of-type(2) > p.css-151uqsi {
  5098. color: var(--chakra-colors-secondaryWhite);
  5099. font-size: fontsize;
  5100. position: absolute;
  5101. right: 1.5em;
  5102. top: 3em;
  5103. }
  5104. }
  5105. /* Edit selfie modal */
  5106. body:has([aria-label="Pencil tool"]) {
  5107. .css-s1csb6 .css-5prrkc,
  5108. .css-s1csb6 .css-lzayxd,
  5109. .css-s1csb6 .css-101otp9 {
  5110. font-size: fontsize;
  5111. line-height: 1.5;
  5112. }
  5113. /* Split */
  5114. .css-s1csb6 > div > div > div:nth-of-type(1) {
  5115. display: flex;
  5116. flex-direction: row;
  5117. flex-wrap: wrap;
  5118. }
  5119. .css-s1csb6 > div > div > div:nth-of-type(1) > div,
  5120. .css-s1csb6 > div > div > p:nth-of-type(2),
  5121. .css-s1csb6 > div > div > div:nth-of-type(2),
  5122. .css-s1csb6 > div > div > div:nth-of-type(3) {
  5123. width: 48%;
  5124. }
  5125. .css-s1csb6 > div > div > p:nth-of-type(2),
  5126. .css-s1csb6 > div > div > div:nth-of-type(2),
  5127. .css-s1csb6 > div > div > div:nth-of-type(3) {
  5128. margin-left: auto;
  5129. }
  5130. /* Reorder left side */
  5131. .css-s1csb6 > div > div > div:nth-of-type(1) > div > div {
  5132. display: flex;
  5133. flex-direction: column;
  5134. height: auto !important;
  5135. max-height: fit-content !important;
  5136. max-width: 48% !important;
  5137. padding: 2em !important;
  5138. min-width: 100% !important;
  5139. }
  5140. .css-s1csb6 > div > div > div:nth-of-type(1) > div > div > div:nth-of-type(1) {
  5141. background: transparent !important;
  5142. height: 100% !important;
  5143. margin: auto !important;
  5144. order: 2;
  5145. transform: translateX(-3.5%);
  5146. width: 100% !important;
  5147. }
  5148. .css-s1csb6 > div > div > div:nth-of-type(1) > div > div > div:nth-of-type(2) {
  5149. order: 3;
  5150. }
  5151. .css-s1csb6 > div > div > div:nth-of-type(1) > div > div > div:nth-of-type(3) {
  5152. flex-direction: column;
  5153. justify-content: center;
  5154. margin: 0 0 1em 0 !important;
  5155. order: 1;
  5156. }
  5157. /* Try align right side with left side */
  5158. .css-s1csb6 > div > div > p:nth-of-type(2) {
  5159. margin-top: -11em;
  5160. }
  5161. /* Changes to make */
  5162. textarea[aria-label="Changes to make"] {
  5163. min-height: 600px;
  5164. }
  5165. /* Seed input */
  5166. input[placeholder="Enter seed"]:not(:focus),
  5167. input[placeholder="Enter seed"]:focus {
  5168. margin-left: .5em;
  5169. max-width: calc(100% - 1em);
  5170. }
  5171. /* Edit icons */
  5172. .css-s1csb6 > div > div > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:first-child {
  5173. margin: 0 0 2em 0 !important;
  5174. }
  5175. .css-s1csb6 > div > div > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:first-child button {
  5176. height: 50px;
  5177. padding: .5em;
  5178. width: 50px;
  5179. }
  5180. .css-s1csb6 > div > div > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:first-child svg {
  5181. height: auto;
  5182. width: 100%;
  5183. }
  5184. /* Slider */
  5185. .css-s1csb6 > div > div > div:nth-of-type(1) > div > div > div:nth-of-type(3) > div:last-child {
  5186. align-items: center;
  5187. display: flex;
  5188. flex-direction: column;
  5189. justify-content: center !important;
  5190. width: 100%;
  5191. }
  5192. /* Canvas */
  5193. .konvajs-content {
  5194. border-radius: 1em;
  5195. height: auto !important;
  5196. width: auto;
  5197. }
  5198. .css-s1csb6 > div > div > div:nth-of-type(1) canvas {
  5199. align-self: center !important;
  5200. aspect-ratio: 1 / 1;
  5201. border-radius: 1em;
  5202. height: auto !important;
  5203. width: 100% !important;
  5204. }
  5205. /* Additional controls */
  5206. .css-s1csb6 > div > div > div:nth-of-type(3) > div > button > p {
  5207. margin-top: 1em;
  5208. }
  5209. .css-s1csb6 > div > div > div:nth-of-type(3) > div > button > p > svg {
  5210. display: none;
  5211. }
  5212. .css-s1csb6 > div > div > div:nth-of-type(3) > div > div {
  5213. display: block !important;
  5214. height: auto !important;
  5215. opacity: 1 !important;
  5216. }
  5217. /* Request edit button */
  5218. [aria-label="Request edit"] {
  5219. left: 50%;
  5220. margin: 0;
  5221. transform: translateX(-50%);
  5222. width: fit-content;
  5223. }
  5224. }
  5225. /* Create video selfie modal */
  5226. body:has([aria-label="Video prompt"]) {
  5227. .css-1se8muj .css-24h4vi {
  5228. font-size: fontsize;
  5229. line-height: 1.5;
  5230. }
  5231. /* Split */
  5232. .css-1se8muj > div > div {
  5233. flex-direction: row;
  5234. flex-wrap: wrap;
  5235. }
  5236. .css-1se8muj > div > div > div {
  5237. align-items: center;
  5238. display: flex;
  5239. justify-content: center;
  5240. flex-basis: 48%;
  5241. }
  5242. .css-1se8muj > div > div > div:first-of-type img {
  5243. max-height: 500px;
  5244. max-width: 500px;
  5245. }
  5246. .css-1se8muj > div > div > div:last-of-type > div {
  5247. width: 100%;
  5248. }
  5249. .css-1se8muj > div > div > div:last-of-type > div > textarea {
  5250. max-height: 500px;
  5251. min-height: 500px;
  5252. }
  5253. /* Create video button */
  5254. .css-1se8muj > div > div > button:last-of-type {
  5255. margin: auto;
  5256. max-width: fit-content;
  5257. }
  5258. .css-1se8muj > div > div > button:last-of-type > div {
  5259. padding: 0 1em !important;
  5260. }
  5261. }
  5262. /* ===== Customizations ===== */
  5263. /* Blur content */
  5264. if blurcontent {
  5265. /* Hide prompt */
  5266. .css-fskrnz > div > div:nth-of-type(2) > div p {
  5267. position: relative;
  5268. visibility: hidden;
  5269. }
  5270. .css-fskrnz > div > div:nth-of-type(2) > div p > button {
  5271. display: inline-block;
  5272. font-size: fontsize;
  5273. position: fixed !important;
  5274. text-decoration: none;
  5275. top: 5.5em !important;
  5276. visibility: visible;
  5277. }
  5278. .css-fskrnz > div > div:nth-of-type(2) > div p::before {
  5279. color: inherit;
  5280. content: "Hidden Text";
  5281. font-family: var(--fontfamily);
  5282. font-size: 3em;
  5283. left: 50%;
  5284. position: absolute;
  5285. top: 50%;
  5286. transform: translate(-50%, -50%);
  5287. visibility: visible;
  5288. white-space: nowrap;
  5289. }
  5290. /* Hide images/videos */
  5291. .css-ezgmhy img,
  5292. .css-ezgmhy video {
  5293. height: 0;
  5294. padding-left: 300px;
  5295. padding-top: 300px;
  5296. width: 0;
  5297. }
  5298. .css-ezgmhy img {
  5299. background: url("https://placehold.co/300x300?text=Hidden+image") no-repeat;
  5300. }
  5301. .css-ezgmhy video {
  5302. background: url("https://placehold.co/300x300?text=Hidden+video") no-repeat;
  5303. }
  5304. /* Hide arrows in modal */
  5305. .css-fskrnz > div > div:nth-of-type(1) > button {
  5306. display: none;
  5307. }
  5308. /* Hide images/videos in modal */
  5309. .css-fskrnz img,
  5310. .css-fskrnz video {
  5311. height: 0;
  5312. padding-left: 775px;
  5313. padding-top: 775px;
  5314. width: 0;
  5315. }
  5316. .css-fskrnz img {
  5317. background: url("https://placehold.co/775x775?text=Hidden+image") no-repeat;
  5318. }
  5319. .css-fskrnz video {
  5320. background: url("https://placehold.co/775x775?text=Hidden+video") no-repeat;
  5321. }
  5322. }
  5323.  
  5324. /* Image border on hover */
  5325. if imageborder {
  5326. .css-1vuqv5m,
  5327. .css-1regj17 {
  5328. border-radius: 1em;
  5329. }
  5330. .css-1vuqv5m > .css-1regj17:hover {
  5331. height: 100%;
  5332. width: 100%;
  5333. }
  5334. .css-3vu8ng > .css-1regj17,
  5335. .css-hnnoj4 > .css-1ekmhiq {
  5336. transition: 0.2s linear;
  5337. }
  5338. .css-3vu8ng > .css-1regj17:hover,
  5339. .css-hnnoj4 > .css-1ekmhiq:hover {
  5340. border-radius: 1em;
  5341. height: 300px;
  5342. width: 300px;
  5343. }
  5344. .css-3vu8ng:hover,
  5345. .css-hnnoj4:hover {
  5346. border-radius: 1em;
  5347. box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
  5348. rgba(139, 110, 255, 0.4) -5px 5px 5px 5px,
  5349. rgba(254, 133, 133, 0.4) 5px -5px 5px 5px,
  5350. rgba(254, 133, 133, 0.4) 5px 5px 5px 5px;
  5351. transition: 0.2s linear;
  5352. }
  5353. }
  5354. /* Engine */
  5355. .css-70qvj9 > .css-2oetr7 {
  5356. border: 0;
  5357. }
  5358. /* Load More button */
  5359. .css-1m67823 {
  5360. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  5361. background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  5362. background: -webkit-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  5363. border-radius: 56px;
  5364. color: var(--chakra-colors-white);
  5365. filter: invert(avatarinvert);
  5366. font-size: 18px;
  5367. height: fit-content;
  5368. padding-bottom: var(--chakra-space-2);
  5369. padding-top: var(--chakra-space-2);
  5370. width: 120px;
  5371. }
  5372. .css-1m67823:hover {
  5373. text-decoration: none;
  5374. }
  5375. /* Pinned Kindroids */
  5376. .css-1mbtnz9 > .css-gg4vpm > p {
  5377. margin: auto;
  5378. }
  5379. .css-1mbtnz9 > .css-11yc3yd {
  5380. justify-content: center;
  5381. }
  5382. /* Request selfie button at the top */
  5383. if requestselfie {
  5384. .css-12j2ye5 {
  5385. bottom: auto;
  5386. height: auto;
  5387. left: 2.5em;
  5388. margin: 0;
  5389. padding: 0;
  5390. position: fixed;
  5391. top: 4.5em;
  5392. width: auto;
  5393. z-index: 50;
  5394. }
  5395. .css-12j2ye5 > div > div {
  5396. display: flex;
  5397. flex-direction: column;
  5398. }
  5399. .css-12j2ye5 [aria-label="Request selfie"] {
  5400. padding: 20px;
  5401. position: relative;
  5402. }
  5403. .css-12j2ye5 [aria-label="Request selfie"] > p::before {
  5404. background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='white' stroke='white'%3E%3Cpath d='M344 144c-3.92 52.87-44 96-88 96s-84.15-43.12-88-96c-4-55 35-96 88-96s92 42 88 96z' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/%3E%3Cpath d='M256 304c-87 0-175.3 48-191.64 138.6C62.39 453.52 68.57 464 80 464h352c11.44 0 17.62-10.48 15.65-21.4C431.3 352 343 304 256 304z' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E") no-repeat;
  5405. background-position: center center;
  5406. background-size: cover;
  5407. content: "";
  5408. display: inline-block;
  5409. height: 20px;
  5410. vertical-align: middle;
  5411. width: 22px;
  5412. }
  5413. .css-12j2ye5 [aria-label="Request selfie"] > p {
  5414. font-size: 0;
  5415. }
  5416. .css-12j2ye5 [aria-label="Request selfie"] > p::after {
  5417. content: "Request solo selfie";
  5418. font-size: 22px;
  5419. line-height: 30px;
  5420. margin-left: .3em;
  5421. vertical-align: middle;
  5422. }
  5423. .css-12j2ye5 [aria-label="Group selfies"] {
  5424. background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  5425. background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  5426. padding: 20px;
  5427. width: auto;
  5428. }
  5429. .css-12j2ye5 [aria-label="Group selfies"]::after {
  5430. color: var(--chakra-colors-pureWhite);
  5431. content: "Request group selfie";
  5432. display: inline-block;
  5433. font-family: var(--chakra-fonts-PoppinsBold);
  5434. font-size: 22px;
  5435. line-height: 30px;
  5436. margin-left: .3em;
  5437. vertical-align: middle;
  5438. width: calc(100% - 24px);
  5439. }
  5440. .css-12j2ye5 [aria-label="Request selfie"]:hover,
  5441. .css-12j2ye5 [aria-label="Group selfies"]:hover,
  5442. .css-12j2ye5 [aria-label="Request video selfie 6 paid credits"]:hover {
  5443. border-radius: 32px;
  5444. box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
  5445. rgba(139, 110, 255, 0.4) -5px 5px 5px 5px,
  5446. rgba(254, 133, 133, 0.4) 5px -5px 5px 5px,
  5447. rgba(254, 133, 133, 0.4) 5px 5px 5px 5px;
  5448. }
  5449. body:has([id*="video-selfie-"]) {
  5450. .css-12j2ye5 {
  5451. left: 5em;
  5452. top: 7em;
  5453. }
  5454. .css-12j2ye5 [aria-label="Request video selfie 6 paid credits"] {
  5455. padding: 20px;
  5456. width: auto;
  5457. }
  5458. .css-12j2ye5 [aria-label="Request video selfie 6 paid credits"] > p::before {
  5459. background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='white' stroke='white'%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' 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' stroke-miterlimit='10' stroke-width='32'/%3E%3C/svg%3E") no-repeat;
  5460. background-position: center center;
  5461. background-size: cover;
  5462. content: "";
  5463. display: inline-block;
  5464. height: 24px;
  5465. margin-right: .5em;
  5466. vertical-align: middle;
  5467. width: 28px;
  5468. }
  5469. }
  5470. body:has(.css-koo3fz) {
  5471. .css-12j2ye5 {
  5472. top: 4.5em;
  5473. }
  5474. }
  5475. }
  5476. }
  5477.  
  5478. @-moz-document url-prefix("https://kindroid.ai/call") {
  5479. /* ====================================================
  5480. Call page
  5481. ==================================================== */
  5482. /* Avatar */
  5483. .css-1nbfxil,
  5484. .css-17hv5wr {
  5485. aspect-ratio: 1 / 1;
  5486. border-radius: 1em;
  5487. height: calc(100% - 100px);
  5488. margin-top: 0;
  5489. min-width: 300px;
  5490. overflow: hidden;
  5491. width: fit-content;
  5492. }
  5493. .css-1jbvs8u,
  5494. .css-jk7dyx {
  5495. border: none;
  5496. border-radius: 1em;
  5497. box-sizing: border-box;
  5498. height: 100%;
  5499. margin: auto;
  5500. width: 100%;
  5501. }
  5502. .css-dv4mhk {
  5503. height: 120px;
  5504. width: 120px;
  5505. }
  5506. .css-1jbvs8u img,
  5507. .css-1jbvs8u video,
  5508. .css-jk7dyx img,
  5509. .css-jk7dyx video {
  5510. aspect-ratio: 1 / 1;
  5511. border: none;
  5512. border-radius: 1em;
  5513. height: 100%;
  5514. margin-top: 0;
  5515. max-width: 100%;
  5516. object-fit: contain;
  5517. object-position: center top;
  5518. width: auto;
  5519. }
  5520. .css-1jbvs8u video,
  5521. .css-jk7dyx video {
  5522. left: auto !important;
  5523. }
  5524. /* Remove background under avatar */
  5525. .css-1nbfxil > div:not(:last-child),
  5526. .css-17hv5wr > div:not(:last-child),
  5527. .css-1jbvs8u,
  5528. /* Remove purple circle when kin is talking */
  5529. .css-jk7dyx {
  5530. background: none;
  5531. }
  5532. /* Avoid scroll problem */
  5533. .css-11w64rs {
  5534. overflow: hidden;
  5535. }
  5536. /* Call controls bar */
  5537. .css-tolbod {
  5538. justify-content: space-between;
  5539. margin: 0 auto;
  5540. max-width: 757px;
  5541. }
  5542. .css-tolbod > .css-1en42kf:nth-child(1) {
  5543. justify-content: flex-start;
  5544. }
  5545. .css-tolbod > .css-1en42kf:nth-child(2) {
  5546. justify-content: center;
  5547. }
  5548. .css-tolbod > .css-1en42kf:nth-child(3) {
  5549. justify-content: flex-end;
  5550. }
  5551. /* Video, screenshare, captions */
  5552. .css-tolbod > .css-1en42kf > .css-15do4u8 {
  5553. flex-direction: row;
  5554. }
  5555. /* Buttons size */
  5556. .css-15do4u8 > div:nth-of-type(1) > div,
  5557. .css-15do4u8 > div:nth-of-type(2) {
  5558. height: 60px;
  5559. width: 60px;
  5560. }
  5561. /* Icons size in buttons */
  5562. .css-tolbod > .css-1en42kf > .css-15do4u8 svg {
  5563. height: 44px;
  5564. width: 44px;
  5565. }
  5566. /* Call controls when captions */
  5567. body:has(.css-1md15gg) {
  5568. .css-11w64rs {
  5569. column-gap: 1em;
  5570. flex-direction: row;
  5571. flex-wrap: wrap;
  5572. padding: 1em 1em 0 1em;
  5573. }
  5574. .css-1nbfxil,
  5575. .css-17hv5wr {
  5576. height: calc(100% - 100px);
  5577. width: 40%;
  5578. }
  5579. .css-1md15gg {
  5580. max-height: calc(100% - 100px);
  5581. min-height: calc(100% - 100px);
  5582. max-width: calc(60% - 1em);
  5583. }
  5584. .css-bdvhoj {
  5585. flex-basis: 100%;
  5586. min-height: 100px;
  5587. }
  5588. }
  5589. /* ===== Customizations ===== */
  5590. /* Avatar brightness, contrast, grayscale */
  5591. .css-1jbvs8u > img,
  5592. .css-1jbvs8u > video {
  5593. filter: brightness(avatarbrightness) contrast(avatarcontrast) grayscale(avatargrayscale) invert(avatarinvert) !important;
  5594. }
  5595. /* Avatar choice */
  5596. if avatarchoice {
  5597. .css-1jbvs8u > img,
  5598. .css-1jbvs8u > video {
  5599. background: url(avatarchoiceurl) center center / cover no-repeat !important;
  5600. border: 0;
  5601. height: 0;
  5602. padding-left: 100%;
  5603. padding-top: 100%;
  5604. width: 0;
  5605. }
  5606. }
  5607. /* Avatar flip, rotate, zoom */
  5608. if (avatarflip=="avatarflipdefault") {
  5609. .css-1jbvs8u,
  5610. .css-1jbvs8u > img,
  5611. .css-1jbvs8u > video {
  5612. transform: rotate(avatarrotate) scale(avatarzoom);
  5613. }
  5614. }
  5615. if (avatarflip=="avatarfliphorizontally") {
  5616. .css-1jbvs8u,
  5617. .css-1jbvs8u > img,
  5618. .css-1jbvs8u > video {
  5619. transform: rotate(avatarrotate) scale(avatarzoom) scaleX(-1) !important;
  5620. }
  5621. }
  5622. if (avatarflip=="avatarflipvertically") {
  5623. .css-1jbvs8u,
  5624. .css-1jbvs8u > img,
  5625. .css-1jbvs8u > video {
  5626. transform: rotate(avatarrotate) scale(avatarzoom) scaleY(-1) !important;
  5627. }
  5628. }
  5629. if (avatarflip=="avatarfliphorizontallyvertically") {
  5630. .css-1jbvs8u,
  5631. .css-1jbvs8u > img,
  5632. .css-1jbvs8u > video {
  5633. transform: rotate(avatarrotate) scale(calc(var(--avatarzoom) * -1)) !important;
  5634. }
  5635. }
  5636. /* Avatar hoverzoom */
  5637. if avatarhoverzoom {
  5638. .css-1jbvs8u > img:hover,
  5639. .css-1jbvs8u > video:hover {
  5640. aspect-ratio: 1 / 1;
  5641. border-radius: 0 !important;
  5642. max-height: 100vh !important;
  5643. min-height: 100vh !important;
  5644. left: 50% !important;
  5645. position: fixed !important;
  5646. top: 0 !important;
  5647. min-width: fit-content;
  5648. width: auto !important;
  5649. transform: translateX(-50%);
  5650. z-index: 99999 !important;
  5651. }
  5652. .css-z0osps {
  5653. z-index: 1;
  5654. }
  5655. if avatarchoice {
  5656. .css-1jbvs8u:hover {
  5657. aspect-ratio: 1 / 1;
  5658. border-radius: 0 !important;
  5659. max-height: 100vh !important;
  5660. min-height: 100vh !important;
  5661. left: 50% !important;
  5662. position: fixed !important;
  5663. top: 0 !important;
  5664. min-width: fit-content;
  5665. width: auto !important;
  5666. transform: translateX(-50%);
  5667. z-index: 99999 !important;
  5668. }
  5669. }
  5670. }
  5671. /* Avatar mix blend mode */
  5672. if (avatarmixblend=="avatarmixdefault") {
  5673. .css-1jbvs8u,
  5674. .css-1jbvs8u > img,
  5675. .css-1jbvs8u > video:active {
  5676. mix-blend-mode: normal;
  5677. }
  5678. }
  5679. if (avatarmixblend=="avatarmixcolor") {
  5680. .css-1jbvs8u,
  5681. .css-1jbvs8u > img,
  5682. .css-1jbvs8u > video:active {
  5683. mix-blend-mode: color !important;
  5684. }
  5685. }
  5686. if (avatarmixblend=="avatarmixcolorburn") {
  5687. .css-1jbvs8u,
  5688. .css-1jbvs8u > img,
  5689. .css-1jbvs8u > video:active {
  5690. mix-blend-mode: color-burn !important;
  5691. }
  5692. }
  5693. if (avatarmixblend=="avatarmixcolordodge") {
  5694. .css-1jbvs8u,
  5695. .css-1jbvs8u > img,
  5696. .css-1jbvs8u > video:active {
  5697. mix-blend-mode: color-dodge !important;
  5698. }
  5699. }
  5700. if (avatarmixblend=="avatarmixdarken") {
  5701. .css-1jbvs8u,
  5702. .css-1jbvs8u > img,
  5703. .css-1jbvs8u > video:active {
  5704. mix-blend-mode: darken !important;
  5705. }
  5706. }
  5707. if (avatarmixblend=="avatarmixdifference") {
  5708. .css-1jbvs8u,
  5709. .css-1jbvs8u > img,
  5710. .css-1jbvs8u > video:active {
  5711. mix-blend-mode: difference !important;
  5712. }
  5713. }
  5714. if (avatarmixblend=="avatarmixexclusion") {
  5715. .css-1jbvs8u,
  5716. .css-1jbvs8u > img,
  5717. .css-1jbvs8u > video:active {
  5718. mix-blend-mode: exclusion !important;
  5719. }
  5720. }
  5721. if (avatarmixblend=="avatarmixhardlight") {
  5722. .css-1jbvs8u,
  5723. .css-1jbvs8u > img,
  5724. .css-1jbvs8u > video:active {
  5725. mix-blend-mode: hard-light !important;
  5726. }
  5727. }
  5728. if (avatarmixblend=="avatarmixhue") {
  5729. .css-1jbvs8u,
  5730. .css-1jbvs8u > img,
  5731. .css-1jbvs8u > video:active {
  5732. mix-blend-mode: hue !important;
  5733. }
  5734. }
  5735. if (avatarmixblend=="avatarmixlighten") {
  5736. .css-1jbvs8u,
  5737. .css-1jbvs8u > img,
  5738. .css-1jbvs8u > video:active {
  5739. mix-blend-mode: lighten !important;
  5740. }
  5741. }
  5742. if (avatarmixblend=="avatarmixluminosity") {
  5743. .css-1jbvs8u,
  5744. .css-1jbvs8u > img,
  5745. .css-1jbvs8u > video:active {
  5746. mix-blend-mode: luminosity !important;
  5747. }
  5748. }
  5749. if (avatarmixblend=="avatarmixmultiply") {
  5750. .css-1jbvs8u,
  5751. .css-1jbvs8u > img,
  5752. .css-1jbvs8u > video:active {
  5753. mix-blend-mode: multiply !important;
  5754. }
  5755. }
  5756. if (avatarmixblend=="avatarmixoverlay") {
  5757. .css-1jbvs8u,
  5758. .css-1jbvs8u > img,
  5759. .css-1jbvs8u > video:active {
  5760. mix-blend-mode: overlay !important;
  5761. }
  5762. }
  5763. if (avatarmixblend=="avatarmixpluslighter") {
  5764. .css-1jbvs8u,
  5765. .css-1jbvs8u > img,
  5766. .css-1jbvs8u > video:active {
  5767. mix-blend-mode: plus-lighter !important;
  5768. }
  5769. }
  5770. if (avatarmixblend=="avatarmixsaturation") {
  5771. .css-1jbvs8u,
  5772. .css-1jbvs8u > img,
  5773. .css-1jbvs8u > video:active {
  5774. mix-blend-mode: saturation !important;
  5775. }
  5776. }
  5777. if (avatarmixblend=="avatarmixscreen") {
  5778. .css-1jbvs8u,
  5779. .css-1jbvs8u > img,
  5780. .css-1jbvs8u > video:active {
  5781. mix-blend-mode: screen !important;
  5782. }
  5783. }
  5784. if (avatarmixblend=="avatarmixsoftlight") {
  5785. .css-1jbvs8u,
  5786. .css-1jbvs8u > img,
  5787. .css-1jbvs8u > video:active {
  5788. mix-blend-mode: soft-light !important;
  5789. }
  5790. }
  5791. /* Avatar opacity */
  5792. .css-1jbvs8u,
  5793. .css-1jbvs8u > img,
  5794. .css-1jbvs8u > video:active {
  5795. opacity: avataropacity !important;
  5796. }
  5797.  
  5798. /* Avatar styles */
  5799. if (avatarstyles=="avataralien") || (avatarstyles=="avatarapple") || (avatarstyles=="avataratom") || (avatarstyles=="avatarbookmark") || (avatarstyles=="avatarcannabis") || (avatarstyles=="avatarchatbubble") || (avatarstyles=="avatarchefhat") || (avatarstyles=="avatarcloud") || (avatarstyles=="avatarcog") || (avatarstyles=="avatarcrystal") || (avatarstyles=="avatardevil") || (avatarstyles=="avatargem") || (avatarstyles=="avatarghost") || (avatarstyles=="avatargift") || (avatarstyles=="avatarheart") || (avatarstyles=="avataroctagon") || (avatarstyles=="avatarpentagon") || (avatarstyles=="avatarrabbit") || (avatarstyles=="avatarratio") || (avatarstyles=="avatarshield") || (avatarstyles=="avatarshipwheel") || (avatarstyles=="avatarshirt") || (avatarstyles=="avatarslime") || (avatarstyles=="avatarsmartphone") || (avatarstyles=="avatarsquircle") || (avatarstyles=="avatarstar") || (avatarstyles=="avatartablet") || (avatarstyles=="avatartreedeciduous") || (avatarstyles=="avatartreepine") || (avatarstyles=="avatartriangle") || (avatarstyles=="avatarvenetianmask") {
  5800. .css-1jbvs8u {
  5801. -webkit-mask-position: center;
  5802. mask-position: center;
  5803. -webkit-mask-repeat: no-repeat;
  5804. mask-repeat: no-repeat;
  5805. -webkit-mask-size: cover;
  5806. mask-size: cover;
  5807. height: 100%;
  5808. object-fit: cover;
  5809. transition: 0.3s linear ease-in-out;
  5810. width: 100%;
  5811. }
  5812. }
  5813. if (avatarstyles=="avatardefault") {
  5814. .css-1jbvs8u {
  5815. transition: 0.3s linear ease-in-out;
  5816. }
  5817. }
  5818. if (avatarstyles=="avataralien") {
  5819. .css-1jbvs8u {
  5820. -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.382 9.4054c-.0649-.6486-.1297-1.3622-.2595-2.0108-.1297-.6487-.2594-1.2973-.5189-1.946-.1297-.3243-.2595-.6486-.3892-.908-.1297-.3244-.3243-.5838-.454-.9082-.1946-.2594-.3892-.5838-.5838-.8432-.1946-.2595-.454-.519-.7135-.7135-.454-.3892-.973-.7784-1.5568-1.1027-.5838-.3244-1.2324-.5838-1.881-.7135C13.3765.0649 12.7278 0 12.0143 0c-.7135 0-1.3621.0649-2.0108.2595C9.355.3892 8.7712.6486 8.1874.973c-.6487.3243-1.1676.7135-1.6865 1.1675-.2595.1946-.454.454-.7135.7136l-.5838.7783c-.1297.3244-.3243.5838-.454.9081l-.3892.973c-.1946.6487-.3892 1.2973-.519 1.946-.1297.6486-.1946 1.2973-.2594 2.0108-.0649.7135 0 1.2973 0 1.946 0 .6486.0648 1.2972.1946 2.0107l.1946.973c.0648.3243.1946.6486.3243.973.454 1.2324 1.1676 2.4 1.881 3.5027.3893.5838.7785 1.1027 1.1676 1.6216.3892.519.7784 1.1027 1.2325 1.5568.1946.2594.454.454.7135.7135.2594.1946.519.3892.8432.5837.2595.1946.5838.3244.9081.4541.1298.0649.3244.1297.4541.1297.1946 0 .3243.0649.519.0649.1945 0 .3242 0 .5188-.0649.1946 0 .3244-.0648.454-.1297.3244-.1297.6487-.2595.9082-.454.2595-.1946.5838-.3892.8432-.5838.2595-.1946.519-.454.7136-.7135.454-.519.8432-1.0379 1.2324-1.5568.3892-.519.7784-1.1027 1.1676-1.6216.7135-1.1027 1.427-2.2703 1.881-3.5027.1298-.3244.2595-.6487.3244-.973.0648-.3243.1946-.6486.1946-.973.1297-.6486.1945-1.2973.1945-2.0108 0-.6486 0-1.3621-.0648-2.0108'/%3E%3C/svg%3E");
  5821. mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.382 9.4054c-.0649-.6486-.1297-1.3622-.2595-2.0108-.1297-.6487-.2594-1.2973-.5189-1.946-.1297-.3243-.2595-.6486-.3892-.908-.1297-.3244-.3243-.5838-.454-.9082-.1946-.2594-.3892-.5838-.5838-.8432-.1946-.2595-.454-.519-.7135-.7135-.454-.3892-.973-.7784-1.5568-1.1027-.5838-.3244-1.2324-.5838-1.881-.7135C13.3765.0649 12.7278 0 12.0143 0c-.7135 0-1.3621.0649-2.0108.2595C9.355.3892 8.7712.6486 8.1874.973c-.6487.3243-1.1676.7135-1.6865 1.1675-.2595.1946-.454.454-.7135.7136l-.5838.7783c-.1297.3244-.3243.5838-.454.9081l-.3892.973c-.1946.6487-.3892 1.2973-.519 1.946-.1297.6486-.1946 1.2973-.2594 2.0108-.0649.7135 0 1.2973 0 1.946 0 .6486.0648 1.2972.1946 2.0107l.1946.973c.0648.3243.1946.6486.3243.973.454 1.2324 1.1676 2.4 1.881 3.5027.3893.5838.7785 1.1027 1.1676 1.6216.3892.519.7784 1.1027 1.2325 1.5568.1946.2594.454.454.7135.7135.2594.1946.519.3892.8432.5837.2595.1946.5838.3244.9081.4541.1298.0649.3244.1297.4541.1297.1946 0 .3243.0649.519.0649.1945 0 .3242 0 .5188-.0649.1946 0 .3244-.0648.454-.1297.3244-.1297.6487-.2595.9082-.454.2595-.1946.5838-.3892.8432-.5838.2595-.1946.519-.454.7136-.7135.454-.519.8432-1.0379 1.2324-1.5568.3892-.519.7784-1.1027 1.1676-1.6216.7135-1.1027 1.427-2.2703 1.881-3.5027.1298-.3244.2595-.6487.3244-.973.0648-.3243.1946-.6486.1946-.973.1297-.6486.1945-1.2973.1945-2.0108 0-.6486 0-1.3621-.0648-2.0108'/%3E%3C/svg%3E");
  5822. }
  5823. }
  5824. if (avatarstyles=="avatarapple") {
  5825. .css-1jbvs8u {
  5826. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z'/%3E%3Cpath d='M10 2c1 .5 2 2 2 5'/%3E%3C/svg%3E");
  5827. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z'/%3E%3Cpath d='M10 2c1 .5 2 2 2 5'/%3E%3C/svg%3E");
  5828. }
  5829. }
  5830. if (avatarstyles=="avataratom") {
  5831. .css-1jbvs8u {
  5832. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Cpath d='M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z'/%3E%3Cpath d='M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z'/%3E%3C/svg%3E");
  5833. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Cpath d='M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z'/%3E%3Cpath d='M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z'/%3E%3C/svg%3E");
  5834. }
  5835. }
  5836. if (avatarstyles=="avatarbookmark") {
  5837. .css-1jbvs8u {
  5838. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-bookmark'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E");
  5839. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-bookmark'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E");
  5840. }
  5841. }
  5842. if (avatarstyles=="avatarcannabis") {
  5843. .css-1jbvs8u {
  5844. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-cannabis'%3E%3Cpath d='M12 22v-4'/%3E%3Cpath d='M7 12c-1.5 0-4.5 1.5-5 3 3.5 1.5 6 1 6 1-1.5 1.5-2 3.5-2 5 2.5 0 4.5-1.5 6-3 1.5 1.5 3.5 3 6 3 0-1.5-.5-3.5-2-5 0 0 2.5.5 6-1-.5-1.5-3.5-3-5-3 1.5-1 4-4 4-6-2.5 0-5.5 1.5-7 3 0-2.5-.5-5-2-7-1.5 2-2 4.5-2 7-1.5-1.5-4.5-3-7-3 0 2 2.5 5 4 6'/%3E%3C/svg%3E");
  5845. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-cannabis'%3E%3Cpath d='M12 22v-4'/%3E%3Cpath d='M7 12c-1.5 0-4.5 1.5-5 3 3.5 1.5 6 1 6 1-1.5 1.5-2 3.5-2 5 2.5 0 4.5-1.5 6-3 1.5 1.5 3.5 3 6 3 0-1.5-.5-3.5-2-5 0 0 2.5.5 6-1-.5-1.5-3.5-3-5-3 1.5-1 4-4 4-6-2.5 0-5.5 1.5-7 3 0-2.5-.5-5-2-7-1.5 2-2 4.5-2 7-1.5-1.5-4.5-3-7-3 0 2 2.5 5 4 6'/%3E%3C/svg%3E");
  5846. }
  5847. }
  5848. if (avatarstyles=="avatarchatbubble") {
  5849. .css-1jbvs8u {
  5850. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-message-square'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  5851. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-message-square'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  5852. }
  5853. }
  5854. if (avatarstyles=="avatarchefhat") {
  5855. .css-1jbvs8u {
  5856. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chef-hat'%3E%3Cpath d='M17 21a1 1 0 0 0 1-1v-5.35c0-.457.316-.844.727-1.041a4 4 0 0 0-2.134-7.589 5 5 0 0 0-9.186 0 4 4 0 0 0-2.134 7.588c.411.198.727.585.727 1.041V20a1 1 0 0 0 1 1Z'/%3E%3Cpath d='M6 17h12'/%3E%3C/svg%3E");
  5857. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chef-hat'%3E%3Cpath d='M17 21a1 1 0 0 0 1-1v-5.35c0-.457.316-.844.727-1.041a4 4 0 0 0-2.134-7.589 5 5 0 0 0-9.186 0 4 4 0 0 0-2.134 7.588c.411.198.727.585.727 1.041V20a1 1 0 0 0 1 1Z'/%3E%3Cpath d='M6 17h12'/%3E%3C/svg%3E");
  5858. }
  5859. }
  5860. if (avatarstyles=="avatarcircle") {
  5861. .css-1jbvs8u {
  5862. border-radius: 50% !important;
  5863. transition: 0.3s linear ease-in-out;
  5864. }
  5865. }
  5866. if (avatarstyles=="avatarcloud") {
  5867. .css-1jbvs8u {
  5868. -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.762 4.29a6.51 6.51 0 0 0-5.669 3.332 3.571 3.571 0 0 0-1.558-.36 3.571 3.571 0 0 0-3.516 3A4.918 4.918 0 0 0 0 14.796a4.918 4.918 0 0 0 4.92 4.914 4.93 4.93 0 0 0 .617-.045h14.42c2.305-.272 4.041-2.258 4.043-4.589v-.009a4.594 4.594 0 0 0-3.727-4.508 6.51 6.51 0 0 0-6.511-6.27z'/%3E%3C/svg%3E");
  5869. mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.762 4.29a6.51 6.51 0 0 0-5.669 3.332 3.571 3.571 0 0 0-1.558-.36 3.571 3.571 0 0 0-3.516 3A4.918 4.918 0 0 0 0 14.796a4.918 4.918 0 0 0 4.92 4.914 4.93 4.93 0 0 0 .617-.045h14.42c2.305-.272 4.041-2.258 4.043-4.589v-.009a4.594 4.594 0 0 0-3.727-4.508 6.51 6.51 0 0 0-6.511-6.27z'/%3E%3C/svg%3E");
  5870. }
  5871. }
  5872. if (avatarstyles=="avatarcog") {
  5873. .css-1jbvs8u {
  5874. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-settings'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  5875. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-settings'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  5876. }
  5877. }
  5878. if (avatarstyles=="avatarcrystal") {
  5879. .css-1jbvs8u {
  5880. -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.964 15.266l-8.687 8.669c-.034.035-.086.052-.121.035L3.29 20.79c-.052-.017-.087-.052-.087-.086L.007 8.856c-.018-.053 0-.087.035-.122L8.728.065c.035-.035.087-.052.121-.035l11.866 3.18c.052.017.087.052.087.086l3.18 11.848c.034.053.016.087-.018.122'/%3E%3C/svg%3E");
  5881. mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.964 15.266l-8.687 8.669c-.034.035-.086.052-.121.035L3.29 20.79c-.052-.017-.087-.052-.087-.086L.007 8.856c-.018-.053 0-.087.035-.122L8.728.065c.035-.035.087-.052.121-.035l11.866 3.18c.052.017.087.052.087.086l3.18 11.848c.034.053.016.087-.018.122'/%3E%3C/svg%3E");
  5882. }
  5883. }
  5884. if (avatarstyles=="avatardevil") {
  5885. .css-1jbvs8u {
  5886. -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 512 512' version='1.1' fill='currentColor' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M501.966 49.426c-16.928 16.928-36.504 29.582-99.1764 50.7557 14.607 16.299 26.889 34.19 43.102 62.5834C494.0646 111.1761 509.933 73.965 512 38.484 508.837 42.236 505.501 45.891 501.966 49.426z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M10.034 49.427C6.5 45.891 3.163 42.236 0 38.485c2.066 35.481 12.317 70.571 48.6764 142.886 14.3674-25.3717 27.0445-46.5147 43.9473-71.8863C46.538 79.009 26.961 66.353 10.034 49.427z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M256.001 37.549C135.353 37.549 37.549 135.353 37.549 256s97.804 218.451 218.451 218.451c120.648 0 218.451-97.804 218.451-218.451S376.648 37.549 256.001 37.549'/%3E%3C/g%3E%3C/svg%3E");
  5887. mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 512 512' version='1.1' fill='currentColor' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M501.966 49.426c-16.928 16.928-36.504 29.582-99.1764 50.7557 14.607 16.299 26.889 34.19 43.102 62.5834C494.0646 111.1761 509.933 73.965 512 38.484 508.837 42.236 505.501 45.891 501.966 49.426z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M10.034 49.427C6.5 45.891 3.163 42.236 0 38.485c2.066 35.481 12.317 70.571 48.6764 142.886 14.3674-25.3717 27.0445-46.5147 43.9473-71.8863C46.538 79.009 26.961 66.353 10.034 49.427z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M256.001 37.549C135.353 37.549 37.549 135.353 37.549 256s97.804 218.451 218.451 218.451c120.648 0 218.451-97.804 218.451-218.451S376.648 37.549 256.001 37.549'/%3E%3C/g%3E%3C/svg%3E");
  5888. }
  5889. }
  5890. if (avatarstyles=="avatargem") {
  5891. .css-1jbvs8u {
  5892. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9Z'/%3E%3Cpath d='M11 3 8 9l4 13 4-13-3-6'/%3E%3Cpath d='M2 9h20'/%3E%3C/svg%3E");
  5893. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9Z'/%3E%3Cpath d='M11 3 8 9l4 13 4-13-3-6'/%3E%3Cpath d='M2 9h20'/%3E%3C/svg%3E");
  5894. }
  5895. }
  5896. if (avatarstyles=="avatarghost") {
  5897. .css-1jbvs8u {
  5898. -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.058 19.93c-1.01-2.29-1.185-4.228-1.212-4.99V8.67C20.846 3.882 16.886 0 12 0S3.15 3.882 3.15 8.671v6.36c-.037.82-.236 2.7-1.207 4.899-1.306 2.955-.226 2.603.742 2.36.968-.242 3.13-1.192 3.805-.022.675 1.17 1.238 2.184 2.814 1.523 1.576-.663 2.318-.883 2.543-.883h.306c.225 0 .968.22 2.543.882 1.576.662 2.14-.353 2.814-1.522.676-1.17 2.837-.22 3.805.022.968.243 2.048.595.743-2.36'/%3E%3C/svg%3E");
  5899. mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.058 19.93c-1.01-2.29-1.185-4.228-1.212-4.99V8.67C20.846 3.882 16.886 0 12 0S3.15 3.882 3.15 8.671v6.36c-.037.82-.236 2.7-1.207 4.899-1.306 2.955-.226 2.603.742 2.36.968-.242 3.13-1.192 3.805-.022.675 1.17 1.238 2.184 2.814 1.523 1.576-.663 2.318-.883 2.543-.883h.306c.225 0 .968.22 2.543.882 1.576.662 2.14-.353 2.814-1.522.676-1.17 2.837-.22 3.805.022.968.243 2.048.595.743-2.36'/%3E%3C/svg%3E");
  5900. }
  5901. }
  5902. if (avatarstyles=="avatargift") {
  5903. .css-1jbvs8u {
  5904. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
  5905. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
  5906. }
  5907. }
  5908. if (avatarstyles=="avatarheart") {
  5909. .css-1jbvs8u {
  5910. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-heart'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  5911. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-heart'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
  5912. }
  5913. }
  5914. if (avatarstyles=="avataroctagon") {
  5915. .css-1jbvs8u {
  5916. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-octagon'%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/%3E%3C/svg%3E");
  5917. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-octagon'%3E%3Cpath d='M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z'/%3E%3C/svg%3E");
  5918. }
  5919. }
  5920. if (avatarstyles=="avatarovalh") {
  5921. .css-1jbvs8u {
  5922. aspect-ratio: 13 / 9;
  5923. border-radius: 50% !important;
  5924. height: auto;
  5925. width: 100%;
  5926. object-fit: cover;
  5927. transition: 0.3s linear ease-in-out;
  5928. }
  5929. }
  5930. if (avatarstyles=="avatarovalv") {
  5931. .css-1jbvs8u,
  5932. .css-1jbvs8u > img,
  5933. .css-1jbvs8u > video {
  5934. border-radius: 50% !important;
  5935. height: 100%;
  5936. max-width: avatarsize;
  5937. min-width: avatarsize;
  5938. object-fit: cover;
  5939. transition: 0.3s linear ease-in-out;
  5940. }
  5941. }
  5942. if (avatarstyles=="avatarpentagon") {
  5943. .css-1jbvs8u {
  5944. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-pentagon'%3E%3Cpath d='M10.83 2.38a2 2 0 0 1 2.34 0l8 5.74a2 2 0 0 1 .73 2.25l-3.04 9.26a2 2 0 0 1-1.9 1.37H7.04a2 2 0 0 1-1.9-1.37L2.1 10.37a2 2 0 0 1 .73-2.25z'/%3E%3C/svg%3E");
  5945. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-pentagon'%3E%3Cpath d='M10.83 2.38a2 2 0 0 1 2.34 0l8 5.74a2 2 0 0 1 .73 2.25l-3.04 9.26a2 2 0 0 1-1.9 1.37H7.04a2 2 0 0 1-1.9-1.37L2.1 10.37a2 2 0 0 1 .73-2.25z'/%3E%3C/svg%3E");
  5946. }
  5947. }
  5948. if (avatarstyles=="avatarrabbit") {
  5949. .css-1jbvs8u {
  5950. -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.872 21.356c.077.195.682 1.646 1.685 2.156 1.075.547 1.613.406 1.613.406s-.914-3.384-.108-6.076c.807-2.691 1.479-2.933 1.479-2.933s1.478.591 2.446 0c.968-.591 1.264-1.747 1.264-1.747s-.672-2.474-1.264-3.442c-.591-.967-1.227-1.48-2.016-1.828a235.34 235.34 0 0 0-1.508-.655 11.275 11.275 0 0 0-1.003-3.198C16.237 1.531 14.678 0 14.678 0s-.815.7-1.025 2.032c.56.497 1.462 1.45 2.258 2.42.4.485.906 1.227 1.31 1.846a26.053 26.053 0 0 0-2.6-2.626c-1.828-1.586-3.63-2.823-3.63-2.823s-1.29 2.016.243 4.785c1.048 1.778 3.704 3.31 3.704 3.31s-2.736.134-3.704.346c-.968.213-2.043.592-3.253 1.398-1.21.807-2.01 1.647-3.011 3.011-1 1.365-1.962 3.71-1.962 3.71s-.135-.188-1.049-.188c-.914 0-1.21.188-1.21.188s.027 2.312.592 3.441c.564 1.13 1.37 1.562 2.392 1.562.27-.002.834 0 .834 0s.699 1.1 1.129 1.369c.43.268 1.183.215 1.183.215h8.253s-.048-.619-.51-1.103c-.448-.466-.983-.608-1.117-.666a3.776 3.776 0 0 0-1.008-.167h-2.123s2.689-.095 4.274-1.936c.833-.967.914-2.15.833-2.742-.04-.292-.295-1.29-.752-1.882a5.905 5.905 0 0 0-1.183-1.129c-.516-.36-1.17-.642-1.909-.94 1.075.268 1.586.376 2.635 1.129 1.048.752 1.505 1.908 1.586 2.177.08.269.269.672.215 1.828-.108.968-.218 1.208-.484 1.72-.217.456-.427.742-.717 1.07Z'/%3E%3C/svg%3E");
  5951. mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.872 21.356c.077.195.682 1.646 1.685 2.156 1.075.547 1.613.406 1.613.406s-.914-3.384-.108-6.076c.807-2.691 1.479-2.933 1.479-2.933s1.478.591 2.446 0c.968-.591 1.264-1.747 1.264-1.747s-.672-2.474-1.264-3.442c-.591-.967-1.227-1.48-2.016-1.828a235.34 235.34 0 0 0-1.508-.655 11.275 11.275 0 0 0-1.003-3.198C16.237 1.531 14.678 0 14.678 0s-.815.7-1.025 2.032c.56.497 1.462 1.45 2.258 2.42.4.485.906 1.227 1.31 1.846a26.053 26.053 0 0 0-2.6-2.626c-1.828-1.586-3.63-2.823-3.63-2.823s-1.29 2.016.243 4.785c1.048 1.778 3.704 3.31 3.704 3.31s-2.736.134-3.704.346c-.968.213-2.043.592-3.253 1.398-1.21.807-2.01 1.647-3.011 3.011-1 1.365-1.962 3.71-1.962 3.71s-.135-.188-1.049-.188c-.914 0-1.21.188-1.21.188s.027 2.312.592 3.441c.564 1.13 1.37 1.562 2.392 1.562.27-.002.834 0 .834 0s.699 1.1 1.129 1.369c.43.268 1.183.215 1.183.215h8.253s-.048-.619-.51-1.103c-.448-.466-.983-.608-1.117-.666a3.776 3.776 0 0 0-1.008-.167h-2.123s2.689-.095 4.274-1.936c.833-.967.914-2.15.833-2.742-.04-.292-.295-1.29-.752-1.882a5.905 5.905 0 0 0-1.183-1.129c-.516-.36-1.17-.642-1.909-.94 1.075.268 1.586.376 2.635 1.129 1.048.752 1.505 1.908 1.586 2.177.08.269.269.672.215 1.828-.108.968-.218 1.208-.484 1.72-.217.456-.427.742-.717 1.07Z'/%3E%3C/svg%3E");
  5952. }
  5953. }
  5954. if (avatarstyles=="avatarratio") {
  5955. .css-1jbvs8u {
  5956. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-ratio'%3E%3Crect width='12' height='20' x='6' y='2' rx='2'/%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3C/svg%3E");
  5957. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-ratio'%3E%3Crect width='12' height='20' x='6' y='2' rx='2'/%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3C/svg%3E");
  5958. }
  5959. }
  5960. if (avatarstyles=="avatarrectangle") || (avatarstyles=="avatarrectanglebig") {
  5961. .css-1jbvs8u,
  5962. .css-1jbvs8u > img,
  5963. .css-1jbvs8u > video {
  5964. aspect-ratio: 9 / 13;
  5965. border-radius: 1em;
  5966. height: 100%;
  5967. margin: 0;
  5968. object-fit: cover;
  5969. transition: 0.3s linear ease-in-out;
  5970. max-width: avatarsize;
  5971. }
  5972. }
  5973. if (avatarstyles=="avatarshield") {
  5974. .css-1jbvs8u {
  5975. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-shield'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
  5976. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-shield'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
  5977. }
  5978. }
  5979. if (avatarstyles=="avatarshipwheel") {
  5980. .css-1jbvs8u {
  5981. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-ship-wheel'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 2v7.5'/%3E%3Cpath d='m19 5-5.23 5.23'/%3E%3Cpath d='M22 12h-7.5'/%3E%3Cpath d='m19 19-5.23-5.23'/%3E%3Cpath d='M12 14.5V22'/%3E%3Cpath d='M10.23 13.77 5 19'/%3E%3Cpath d='M9.5 12H2'/%3E%3Cpath d='M10.23 10.23 5 5'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
  5982. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-ship-wheel'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 2v7.5'/%3E%3Cpath d='m19 5-5.23 5.23'/%3E%3Cpath d='M22 12h-7.5'/%3E%3Cpath d='m19 19-5.23-5.23'/%3E%3Cpath d='M12 14.5V22'/%3E%3Cpath d='M10.23 13.77 5 19'/%3E%3Cpath d='M9.5 12H2'/%3E%3Cpath d='M10.23 10.23 5 5'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
  5983. }
  5984. }
  5985. if (avatarstyles=="avatarshirt") {
  5986. .css-1jbvs8u {
  5987. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-shirt'%3E%3Cpath d='M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z'/%3E%3C/svg%3E");
  5988. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-shirt'%3E%3Cpath d='M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z'/%3E%3C/svg%3E");
  5989. }
  5990. }
  5991. if (avatarstyles=="avatarslime") {
  5992. .css-1jbvs8u {
  5993. -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.862c-6.617 0-12 5.383-12 12 0 1.964.49 3.406 1.5 4.408 1.706 1.696 4.619 1.868 8.05 1.868.43 0 .87-.002 1.315-.005a217.6 217.6 0 012.765 0c3.792.024 7.066.044 8.88-1.758C23.511 18.378 24 16.9 24 14.862c0-6.617-5.383-12-12-12'/%3E%3C/svg%3E");
  5994. mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.862c-6.617 0-12 5.383-12 12 0 1.964.49 3.406 1.5 4.408 1.706 1.696 4.619 1.868 8.05 1.868.43 0 .87-.002 1.315-.005a217.6 217.6 0 012.765 0c3.792.024 7.066.044 8.88-1.758C23.511 18.378 24 16.9 24 14.862c0-6.617-5.383-12-12-12'/%3E%3C/svg%3E");
  5995. }
  5996. }
  5997. if (avatarstyles=="avatarsmartphone") {
  5998. .css-1jbvs8u {
  5999. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
  6000. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
  6001. }
  6002. }
  6003. if (avatarstyles=="avatarsquircle") {
  6004. .css-1jbvs8u {
  6005. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-squircle'%3E%3Cpath d='M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9-9-1.8-9-9 1.8-9 9-9'/%3E%3C/svg%3E");
  6006. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-squircle'%3E%3Cpath d='M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9-9-1.8-9-9 1.8-9 9-9'/%3E%3C/svg%3E");
  6007. }
  6008. }
  6009. if (avatarstyles=="avatarstar") {
  6010. .css-1jbvs8u {
  6011. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-star'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
  6012. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-star'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
  6013. }
  6014. }
  6015. if (avatarstyles=="avatartablet") {
  6016. .css-1jbvs8u {
  6017. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cline x1='12' x2='12.01' y1='18' y2='18'/%3E%3C/svg%3E");
  6018. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cline x1='12' x2='12.01' y1='18' y2='18'/%3E%3C/svg%3E");
  6019. }
  6020. }
  6021. if (avatarstyles=="avatartreedeciduous") {
  6022. .css-1jbvs8u {
  6023. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-tree-deciduous'%3E%3Cpath d='M8 19a4 4 0 0 1-2.24-7.32A3.5 3.5 0 0 1 9 6.03V6a3 3 0 1 1 6 0v.04a3.5 3.5 0 0 1 3.24 5.65A4 4 0 0 1 16 19Z'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
  6024. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-tree-deciduous'%3E%3Cpath d='M8 19a4 4 0 0 1-2.24-7.32A3.5 3.5 0 0 1 9 6.03V6a3 3 0 1 1 6 0v.04a3.5 3.5 0 0 1 3.24 5.65A4 4 0 0 1 16 19Z'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
  6025. }
  6026. }
  6027. if (avatarstyles=="avatartreepine") {
  6028. .css-1jbvs8u {
  6029. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-tree-pine'%3E%3Cpath d='m17 14 3 3.3a1 1 0 0 1-.7 1.7H4.7a1 1 0 0 1-.7-1.7L7 14h-.3a1 1 0 0 1-.7-1.7L9 9h-.2A1 1 0 0 1 8 7.3L12 3l4 4.3a1 1 0 0 1-.8 1.7H15l3 3.3a1 1 0 0 1-.7 1.7H17Z'/%3E%3Cpath d='M12 22v-3'/%3E%3C/svg%3E");
  6030. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-tree-pine'%3E%3Cpath d='m17 14 3 3.3a1 1 0 0 1-.7 1.7H4.7a1 1 0 0 1-.7-1.7L7 14h-.3a1 1 0 0 1-.7-1.7L9 9h-.2A1 1 0 0 1 8 7.3L12 3l4 4.3a1 1 0 0 1-.8 1.7H15l3 3.3a1 1 0 0 1-.7 1.7H17Z'/%3E%3Cpath d='M12 22v-3'/%3E%3C/svg%3E");
  6031. }
  6032. }
  6033. if (avatarstyles=="avatartriangle") {
  6034. .css-1jbvs8u {
  6035. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-triangle'%3E%3Cpath d='M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3C/svg%3E");
  6036. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-triangle'%3E%3Cpath d='M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3C/svg%3E");
  6037. }
  6038. }
  6039. if (avatarstyles=="avatarvenetianmask") {
  6040. .css-1jbvs8u {
  6041. -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11c-1.5 0-2.5.5-3 2'/%3E%3Cpath d='M4 6a2 2 0 0 0-2 2v4a5 5 0 0 0 5 5 8 8 0 0 1 5 2 8 8 0 0 1 5-2 5 5 0 0 0 5-5V8a2 2 0 0 0-2-2h-3a8 8 0 0 0-5 2 8 8 0 0 0-5-2z'/%3E%3Cpath d='M6 11c1.5 0 2.5.5 3 2'/%3E%3C/svg%3E");
  6042. mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11c-1.5 0-2.5.5-3 2'/%3E%3Cpath d='M4 6a2 2 0 0 0-2 2v4a5 5 0 0 0 5 5 8 8 0 0 1 5 2 8 8 0 0 1 5-2 5 5 0 0 0 5-5V8a2 2 0 0 0-2-2h-3a8 8 0 0 0-5 2 8 8 0 0 0-5-2z'/%3E%3Cpath d='M6 11c1.5 0 2.5.5 3 2'/%3E%3C/svg%3E");
  6043. }
  6044. }
  6045. /* Background */
  6046. .css-16qnjy5 {
  6047. background: url(backgroundurl) backgroundcolor no-repeat 100% !important;
  6048. background-size: cover !important;
  6049. }
  6050. /* Bigger screen sharing */
  6051. if biggerscreensharing {
  6052. body:has(canvas):has(.css-1md15gg) {
  6053. .css-6zx6rx,
  6054. .css-1r59iyy {
  6055. border-radius: 1em;
  6056. height: fit-content;
  6057. position: fixed;
  6058. top: 1em;
  6059. right: 1em;
  6060. transform: none !important;
  6061. width: auto;
  6062. }
  6063. .css-6zx6rx canvas,
  6064. .css-6zx6rx div,
  6065. .css-1r59iyy canvas,
  6066. .css-1r59iyy div {
  6067. aspect-ratio: 16 / 9;
  6068. border-radius: 1em;
  6069. max-height: fit-content;
  6070. max-width: 60vw;
  6071. }
  6072. .css-11w64rs {
  6073. column-gap: 1em;
  6074. flex-direction: row;
  6075. flex-wrap: wrap;
  6076. padding: 1em 1em 0 1em;
  6077. }
  6078. .css-1nbfxil {
  6079. max-width: 40vw;
  6080. width: 40vw;
  6081. }
  6082. .css-1nbfxil,
  6083. .css-17hv5wr {
  6084. height: calc(100% - 170px);
  6085. top: calc(60px + .5em);
  6086. left: -1.5em;
  6087. }
  6088. .css-1md15gg {
  6089. max-height: 29.5vh;
  6090. min-height: 29.5vh;
  6091. max-width: 60vw;
  6092. position: fixed;
  6093. bottom: 1em;
  6094. right: 1em;
  6095. }
  6096. .css-bdvhoj {
  6097. flex-basis: 100%;
  6098. min-height: 100px;
  6099. }
  6100. .css-tolbod {
  6101. justify-content: space-between;
  6102. margin: 0 auto;
  6103. max-width: 685px;
  6104. }
  6105. }
  6106. body:has(canvas) {
  6107. div.no-invert.react-draggable,
  6108. div.no-invert.react-draggable.react-draggable-dragged,
  6109. .css-6zx6rx,
  6110. .css-1r59iyy {
  6111. transform: none !important;
  6112. }
  6113. .css-1yh9u0r,
  6114. .css-13hpf8m {
  6115. border-radius: 1em;
  6116. height: fit-content !important;
  6117. width: 100% !important;
  6118. }
  6119. .css-6zx6rx,
  6120. .css-1r59iyy {
  6121. border-radius: 1em;
  6122. height: fit-content;
  6123. position: fixed;
  6124. top: calc(50% + 60px);
  6125. right: 1em;
  6126. transform: translate(0, calc(-50% - 60px)) !important;
  6127. width: auto;
  6128. }
  6129. .css-6zx6rx canvas,
  6130. .css-6zx6rx div,
  6131. .css-1r59iyy canvas,
  6132. .css-1r59iyy div {
  6133. aspect-ratio: 16 / 9;
  6134. border-radius: 1em;
  6135. max-height: fit-content;
  6136. max-width: 1160px;
  6137. }
  6138. .css-6zx6rx canvas,
  6139. .css-1r59iyy canvas {
  6140. object-fit: contain;
  6141. }
  6142. if screensharezoom {
  6143. .css-6zx6rx canvas,
  6144. .css-1r59iyy canvas {
  6145. object-fit: cover;
  6146. }
  6147. }
  6148. /* Avatar position */
  6149. .css-1nbfxil {
  6150. height: calc(100% - 160px);
  6151. left: 16px;
  6152. position: fixed;
  6153. }
  6154. /* Call control position */
  6155. .css-tolbod {
  6156. bottom: 0;
  6157. position: fixed;
  6158. }
  6159. }
  6160. }
  6161. }
  6162.  
  6163. @-moz-document domain("kindroid.ai") {
  6164. /* ===================================
  6165. Experimental things
  6166. =================================== */
  6167. if experimentalavatarmoveanywhere {
  6168. .css-213aa4 > div:nth-of-type(2),
  6169. .css-na0gqx > div:nth-of-type(2) {
  6170. left: experimentalavatarmoveanywhereleft;
  6171. pointer-events: none;
  6172. position: fixed;
  6173. top: experimentalavatarmoveanywheretop;
  6174. transform: translate(var(--experimentalavatarmoveanywhereleft-neg), var(--experimentalavatarmoveanywheretop-neg));
  6175. z-index: 9999;
  6176. }
  6177. .css-213aa4 > div:nth-of-type(3),
  6178. .css-na0gqx > div:nth-of-type(3) {
  6179. margin-left: 1em;
  6180. width: calc(100vw - 1em) !important;
  6181. }
  6182. }
  6183. if experimentalmainmenu {
  6184. /* Main menu */
  6185. body:has(.css-ji0zhw) {
  6186. .css-ddli5j::before,
  6187. .css-p3thg3::before {
  6188. backdrop-filter: blur(10px);
  6189. background: rgba(0, 0, 0, 0.5);
  6190. content: "";
  6191. height: 100%;
  6192. position: fixed;
  6193. left: 0;
  6194. pointer-events: none;
  6195. top: 0;
  6196. width: 100%;
  6197. z-index: 49;
  6198. }
  6199. .css-ji0zhw {
  6200. border-radius: 1em;
  6201. box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
  6202. rgba(139, 110, 255, 0.4) -5px 5px 5px 5px,
  6203. rgba(254, 133, 133, 0.4) 5px -5px 5px 5px,
  6204. rgba(254, 133, 133, 0.4) 5px 5px 5px 5px;
  6205. bottom: 60px;
  6206. height: auto;
  6207. left: 5vw;
  6208. margin: auto;
  6209. position: fixed;
  6210. width: 90vw !important;
  6211. z-index: 50;
  6212. }
  6213. /* Create kin and group in my kindroid */
  6214. .css-1oc3ive > div:first-child,
  6215. .css-1apc7qm {
  6216. left: 6.5%;
  6217. }
  6218.  
  6219. /* Reduce free space at the end of main menu pages */
  6220. .css-1y6t5y9 {
  6221. margin-bottom: 0;
  6222. }
  6223.  
  6224. /* Bottom links */
  6225. .css-ji0zhw > .css-yk3l44 {
  6226. margin-bottom: 2em;
  6227. position: static;
  6228. }
  6229. }
  6230. /* Email box */
  6231. body:has(.css-11yc3yd) {
  6232. .css-ji0zhw > div:nth-of-type(1) > div > div > div:nth-of-type(2) {
  6233. right: 6vw !important;
  6234. }
  6235. }
  6236. /* Edit pins button */
  6237. body:has(.css-19zdxg6) {
  6238. .css-ji0zhw > div:nth-of-type(1) > div > div > .css-11yc3yd > div:nth-of-type(2) {
  6239. left: 6vw !important;
  6240. }
  6241. }
  6242. }
  6243. if experimentalrequestselfie {
  6244. /* Request selfie */
  6245. body:has([aria-label="Submit selfie request"]) {
  6246. .css-ecz5ih::before {
  6247. backdrop-filter: blur(10px) !important;
  6248. background: rgba(0, 0, 0, 0.5) !important;
  6249. content: "";
  6250. height: 100%;
  6251. position: fixed;
  6252. left: 0;
  6253. pointer-events: none;
  6254. top: 0;
  6255. width: 100%;
  6256. }
  6257. .css-105olw3 {
  6258. border-radius: 1em;
  6259. background: #161616;
  6260. box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px,
  6261. rgba(139, 110, 255, 0.4) -5px 5px 5px 5px,
  6262. rgba(254, 133, 133, 0.4) 5px -5px 5px 5px,
  6263. rgba(254, 133, 133, 0.4) 5px 5px 5px 5px;
  6264. bottom: 60px;
  6265. height: auto;
  6266. left: 5vw;
  6267. margin: auto;
  6268. max-width: 90vw !important;
  6269. overflow: hidden !important;
  6270. position: fixed;
  6271. top: 60px;
  6272. width: 90vw !important;
  6273. z-index: 50;
  6274. }
  6275. /* Submit selfie request */
  6276. .css-ae75s5 {
  6277. transform: translateX(-8%);
  6278. }
  6279. }
  6280. }
  6281. }
  6282.  
  6283. @-moz-document regexp("(chrome|moz)-extension://.+") {
  6284. /* ===================================================
  6285. Stylus popup
  6286. =================================================== */
  6287. html:has([href*="domain=kindroid.ai"]):has(label:nth-of-type(71):last-of-type) {
  6288. /* Input content */
  6289. #stylus-popup #message-box .config-body > label input {
  6290. border-radius: .5em;
  6291. text-align: center;
  6292. }
  6293. /* Range */
  6294. #stylus-popup #message-box .config-body > label span:nth-of-type(2) {
  6295. text-align: right;
  6296. }
  6297. /* Color picker size */
  6298. #stylus-popup #message-box .config-body > label .colorview-swatch,
  6299. #stylus-popup #message-box .config-body > label .colorview-swatch a,
  6300. #stylus-popup #message-box .config-body > label .colorview-swatch::before {
  6301. border-radius: .5em;
  6302. }
  6303. /* Select size */
  6304. #stylus-popup #message-box .config-body > label select {
  6305. border-radius: .5em;
  6306. text-align: center;
  6307. }
  6308. /* Fake spaces to improve presentation */
  6309. /* Whole website */
  6310. #stylus-popup #message-box .config-body > label:nth-of-type(1) input,
  6311. /* Chat page & main menu */
  6312. #stylus-popup #message-box .config-body > label:nth-of-type(22) input,
  6313. /* Groupchat page */
  6314. #stylus-popup #message-box .config-body > label:nth-of-type(31) input,
  6315. /* Chat & Groupchat pages */
  6316. #stylus-popup #message-box .config-body > label:nth-of-type(35) input,
  6317. /* Chat and Call pages */
  6318. #stylus-popup #message-box .config-body > label:nth-of-type(57) input,
  6319. /* Selfie page */
  6320. #stylus-popup #message-box .config-body > label:nth-of-type(60) input,
  6321. /* Call page */
  6322. #stylus-popup #message-box .config-body > label:nth-of-type(63) input,
  6323. /* Experimental things */
  6324. #stylus-popup #message-box .config-body > label:nth-of-type(66) input {
  6325. height: 0;
  6326. max-width: 0;
  6327. min-width: 0;
  6328. opacity: 0;
  6329. padding: 0;
  6330. pointer-events: none;
  6331. width: 0;
  6332. }
  6333. /* Avoid move when click on fake titles */
  6334. #stylus-popup #message-box .config-body > label:nth-of-type(1),
  6335. #stylus-popup #message-box .config-body > label:nth-of-type(22),
  6336. #stylus-popup #message-box .config-body > label:nth-of-type(31),
  6337. #stylus-popup #message-box .config-body > label:nth-of-type(35),
  6338. #stylus-popup #message-box .config-body > label:nth-of-type(57),
  6339. #stylus-popup #message-box .config-body > label:nth-of-type(60),
  6340. #stylus-popup #message-box .config-body > label:nth-of-type(63),
  6341. #stylus-popup #message-box .config-body > label:nth-of-type(66) {
  6342. pointer-events: none;
  6343. }
  6344. /* Bigger lines for fake titles */
  6345. #stylus-popup #message-box .config-body > label:nth-of-type(1) *,
  6346. #stylus-popup #message-box .config-body > label:nth-of-type(22) *,
  6347. #stylus-popup #message-box .config-body > label:nth-of-type(31) *,
  6348. #stylus-popup #message-box .config-body > label:nth-of-type(35) *,
  6349. #stylus-popup #message-box .config-body > label:nth-of-type(57) *,
  6350. #stylus-popup #message-box .config-body > label:nth-of-type(60) *,
  6351. #stylus-popup #message-box .config-body > label:nth-of-type(63) *,
  6352. #stylus-popup #message-box .config-body > label:nth-of-type(66) * {
  6353. line-height: 3;
  6354. }
  6355. /* Center fake titles */
  6356. #stylus-popup #message-box .config-body > label:nth-of-type(1) span,
  6357. #stylus-popup #message-box .config-body > label:nth-of-type(22) span,
  6358. #stylus-popup #message-box .config-body > label:nth-of-type(31) span,
  6359. #stylus-popup #message-box .config-body > label:nth-of-type(35) span,
  6360. #stylus-popup #message-box .config-body > label:nth-of-type(57) span,
  6361. #stylus-popup #message-box .config-body > label:nth-of-type(60) span,
  6362. #stylus-popup #message-box .config-body > label:nth-of-type(63) span,
  6363. #stylus-popup #message-box .config-body > label:nth-of-type(66) span {
  6364. margin-right: 0;
  6365. min-width: 100%;
  6366. text-align: center;
  6367. }
  6368. }
  6369. }