oups désolé j'ai complètement oublié de vous donner mon css complet, donc le voici :
/* Hide scrollbars */
:root ::-webkit-scrollbar {
scrollbar-width: none;
-ms-overflow-style: none;
width: 0px;
}
::-webkit-scrollbar {
display: none;
width: 0px;
}
/* Loading bar */
#nprogress .bar {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
}
/* ========================================================================
Header and menu
======================================================================== */
/* Header background color */
.css-x3odei {
background-color: var(--chakra-colors-primaryBlack) !important;
}
/* Put Log out in orange */
.css-j7qwjs > div:nth-child(10) > p {
color: var(--chakra-colors-orange);
}
/* Put Biling in yellow */
.css-1fu7n7b > div > p {
color: var(--chakra-colors-yellow-400);
}
/* Put FAQs and Terms & Privacy in blue */
.css-j7qwjs > div:nth-child(8) > p,
.css-j7qwjs > div:nth-child(9) > p {
color: var(--chakra-colors-blue-400);
}
/* Put email and timer in white */
.css-1dodils,
.css-1g7lxfg {
color: var(--chakra-colors-secondaryWhite);
margin-top: 10px;
}
/* Put Upload Photo text in custom avatar in white to be more visible */
.css-1jcj2pk {
color: white;
}
/* Billing error box */
.css-dixmdy {
background-color: #161616;
border: 1px solid #6C6C6C;
border-radius: 10px;
color: var(--chakra-colors-secondaryWhite);
}
/* ========================================================================
Chat page
======================================================================== */
/* Add border to textarea when focus */
.css-ymugf1:focus {
border: 0px;
border-radius: 32px;
box-shadow: 0 0 0 1px rgb(139, 109, 255), 0 0 0 2px rgb(254, 132, 132);
}
/* Remove the resize icon on textarea on chat page */
.css-ymugf1:not(:focus),
.css-ymugf1:focus {
resize: none;
}
/* Hide voice counter and reduce button on avatar */
/* Text button */
.css-2bir3m,
/* Voice button */
.css-y0ybx5,
/* Reduce button */
.css-fk8dne {
display: none;
}
/* Hide names in bubbles to save place */
.css-ppua9z,
.css-19hb772 {
display: none;
}
.css-127w3cl {
margin-left: 0px;
}
/* Put our name and text aligned on the right */
.css-19hb772,
.css-13683nx {
align-items: end;
text-align: right;
}
/* Modification of rounded corners for our bubbles */
.css-1j9xj7u {
border-radius: 20px 8px 20px 20px;
}
/* Modification of rounded corners for AI bubbles */
.css-teti0a,
.css-1ulhpcc,
.css-1tg26k8,
.css-1t9c0mz {
border-radius: 8px 20px 20px 20px;
}
/* Bigger text in bubbles and textarea */
.css-6obdga,
.css-1gi22a8,
.css-w2nlit {
font-size: 20px;
}
/* Put a not allowed cursor on spinner, microphone icon, play button, picture generating when needed */
.chakra-spinner,
.css-zkr1dl,
.css-jy2vee,
.css-kjafn5 [disabled] + button {
cursor: not-allowed;
}
/* Heart background */
.css-1lvpjll {
background: url(https://i.ibb.co/fYQkYyc/heart-pattern.png) var(--chakra-colors-secondaryBlack) fixed 100%;
}
/* Initial letter */
.css-70qvj9 {
height: 0px;
}
.css-yhhl9h > .css-teti0a > .css-70qvj9 > .css-127w3cl,
.css-yhhl9h > .css-teti0a > .css-70qvj9 > .css-1yzcrgj {
height: 66px;
padding-top: 30px;
width: 36px;
}
.css-yhhl9h > .css-teti0a > .css-0 > p:nth-child(1) {
padding-left: 50px;
}
.css-qfa1mb {
display: none;
}
/* Put Regenerate and Journal buttons on left side
.css-100dd8p {
bottom: 80px;
flex-direction: row-reverse !important;
gap: 80px;
right: 73%;
position: absolute;
} */
/* ========================================================================
Selfie page
======================================================================== */
/* Wide selfie page */
.css-1ivym2n,
.css-10ytma2 {
max-width: 100%;
}
.css-13da5b {
display: none;
}
.css-1dq4ssc {
padding-bottom: 30px;
}
.css-1dq4ssc,
.css-2cd1of {
gap: 20px;
justify-content: center;
}
.css-1fltgj7 {
padding: 0px 40px;
}
.css-fskrnz {
width: 84vh;
}
.css-3vu8ng,
.css-kuf6b {
height: auto;
width: 290px;
}
.css-j8mh8q,
.css-mtk9ei {
color: var(--chakra-colors-secondaryWhite);
font-size: 18px;
}
.css-105olw3 {
max-width: 96%;
}
/* Request selfie button */
.css-1ygmn3g {
max-width: 1060px;
}
/* Load More button */
.css-dvxtzn,
.css-1q03dzc {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
border-radius: 56px;
height: fit-content;
padding-bottom: var(--chakra-space-2);
padding-top: var(--chakra-space-2);
width: fit-content;
}
.css-1q03dzc:hover {
text-decoration: none;
}
.css-1q03dzc,
.css-1mepe2v {
color: var(--chakra-colors-pureWhite);
font-size: 18px;
}
/* Image border on hover */
div.css-3vu8ng > .css-1regj17 {
transition: 0.2s linear;
}
div.css-3vu8ng > .css-1regj17:hover {
border: 5px solid rgb(254, 132, 132);
border-radius: 16px;
}
/* Put delete image button in red */
.css-jh1suc,
.css-15g5rpl,
.css-15g5rpl svg path {
color: var(--chakra-colors-red);
}
/* ========================================================================
Voice call page
======================================================================== */
/* Add a border on the modal */
#chakra-modal-\:r12k\: {
border: 1px solid #6C6C6C;
}
/* Bigger text */
.css-14mmx5r,
.css-1vqt2yh {
font-size: 16px;
}
/* ========================================================================
For 900p wide screen and more
======================================================================== */
@media screen and (min-width: 900px) {
/* ========================================================================
Menu
======================================================================== */
/* Large menu */
.css-1raxatq,
.css-xhpjzu {
max-width: 100% !important;
width: 100% !important;
}
/* Email box */
.css-1dodils {
align-self: center;
gap: 0px;
margin-top: 5% !important;
padding-right: 15px;
}
/* Subcriber icon */
.css-1dodils > img {
height: auto !important;
width: 44px;
}
/* Email */
.css-gnnge1 {
font-size: 24px;
padding-bottom: 5px;
padding-left: 5px;
}
/* Menu */
.css-1raxatq > div > div > div > div.css-j7qwjs {
display: grid;
align-content: center;
gap: 50px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
margin-top: 10%;
justify-content: space-between !important
}
/* Subscribe button */
.css-1fu7n7b,
.css-o32bv9 {
order: 2;
}
/* Log out button */
.css-j7qwjs > div:nth-child(10) {
position: absolute;
right: 5%;
top: 70%;
}
/* Reset Kindroid button */
.css-16qb61r {
position: absolute;
right: 4%;
top: 80%;
}
/* Bigger menu text */
.css-dghbxk,
.css-1jbciej,
.css-3sp0ue {
font-size: 30px
}
/* Move and fix the Save button in all menu page */
.css-cbfcqn,
.css-1raxatq > div.css-1xh8vw6 > button,
.css-1raxatq > div.css-ouwkos > button {
bottom: 50px;
margin: 39% 0px 0px 83%;
position: fixed;
}
/* Backstory and Key memories */
.css-1xh8vw6 > .css-188uayk > .css-j7qwjs > .css-1kxonj9 > .css-126ipcs > textarea.css-1y068e {
height: 600px !important;
}
#accordion-panel-\:r6i\: > div.css-mifb2i > div.css-1uyzhnb > p.chakra-text.css-7wdzg1,
#accordion-panel-\:r6f\: > p.chakra-text.css-7wdzg1 {
min-width: 100% !important;
}
/* Voice */
.css-1raxatq > div.css-ouwkos > div > p.chakra-text.css-7wdzg1 {
max-width: 100% !important;
}
/* Split menu for avatars */
.css-7nleni,
.css-1jk1ov6 {
max-width: 50% !important;
}
.css-1yxzzu5 > div > p {
display: block;
margin-left: 47%;
position: absolute;
top: 10px;
max-width: 50% !important;
}
.css-n4vub9 {
margin-left: 47%;
position: absolute;
top: 8%;
max-width: 45% !important;
}
.css-ue4bfp {
display: block;
margin-left: 95% !important;
position: absolute;
max-width: 45% !important;
}
.css-mifb2i {
width: 50%;
}
/* 1st avatar size */
.css-1k5gc4r,
.css-dfpqc0 {
height: auto;
margin-left: 25%;
width: 50%;
}
/* 2nd avatar size */
.css-1mvfzwi {
height: auto;
margin-left: 5%;
position: relative;
width: 25%;
}
/* Bigger text and ligne height in avatar window */
#__next > ion-app > div > div > div > div.css-1raxatq > div.css-1y4vgns > div.css-188uayk > div.chakra-stack.css-1jk1ov6 > div.chakra-stack.css-1yxzzu5 > form.css-0 > p,
#accordion-panel-\:r7m\: > div.css-mifb2i > div.css-1uyzhnb > p.chakra-text.css-7wdzg1,
#__next > ion-app > div > div > div > div.css-1raxatq > div.css-1y4vgns > div.css-188uayk > div.chakra-stack.css-1jk1ov6 > div.chakra-stack.css-1yxzzu5 > div > p,
#__next > ion-app > div > div > div > div.css-1raxatq > div.css-1y4vgns > div.css-188uayk > div.chakra-stack.css-1jk1ov6 > div.chakra-stack.css-1yxzzu5 > form.css-ue4bfp > div.chakra-form-control.css-1kxonj9 > p:nth-child(1),
.css-1fm8jup > p.chakra-text.css-7wdzg1 {
font-size: 20px;
line-height: 25px;
max-width: 100% !important;
}
.chakra-accordion.css-0 > .css-tf0j9o > .chakra-collapse > .css-1fm8jup > p.css-7wdzg1 {
font-size: 20px;
line-height: 25px;
width: 50% !important;
}
.css-mifb2i > div.css-1uyzhnb > p.chakra-text.css-7wdzg1 {
font-size: 20px;
line-height: 25px;
max-width: 100% !important;
}
/* Hide arrows */
.css-g7h3az {
display: none;
}
/* Uncollapse "Advanced: secondary avatar" and "Advanced: custom avatar fidelity" */
.css-1y4vgns > div.chakra-accordion.css-0 > div > div,
.css-1v3caum > div > div {
display: block !important;
height: auto !important;
opacity: 1 !important;
}
/* Move and fix the Save button in avatar menu page */
.css-1y4vgns > button {
margin: 39% 0px 0px 83%;
position: fixed;
}
/* FAQs and Terms & Privacy pages */
.css-1udr2et,
.css-1pgxq2r {
max-width: 100%;
}
/* Remove the space between the header and the chat*/
.css-g2goff {
padding: 0px;
}
/* ========================================================================
Chat page
======================================================================== */
/* Resize header */
.css-x3odei {
background-color: var(--chakra-colors-secondaryBlack) !important;
max-width: 100%;
padding: 0px 10px 0px 0.3%;
}
/* Put menu's width as header */
.css-1raxatq {
width: 530px;
}
/* Bigger avatar */
.css-13tht1l,
.css-g2goff {
border-radius: 20px;
height: 512px;
left: 0.6%;
max-width: 512px;
padding: 0px;
position: absolute;
top: 13vh;
transition: 0.3s linear;
width: 512px;
}
/* Hover zoom on avatar */
.css-13tht1l:hover {
border-radius: 0px;
height: 933px;
left: -12px;
max-width: 933px;
top: calc(0px - 13vh);
width: 933px;
z-index: 9999;
}
/* Put chat and textarea more on right*/
.css-735j5d{
padding: 0px 0px 20px 5px;
width: 100%;
}
.css-1lvpjll {
height: 100%;
top: 0px;
}
.css-1lbk8wf {
padding: 0px 10px 0px 540px;
width: 100%;
}
.css-g9r8dt,
.css-is4lk1 {
align-self: start;
bottom: 0px;
margin-left: 540px;
width: calc(100% - 555px);
}
.css-b9bzmp {
padding: 0px 10px 0px 28%;
width: 100%;
}
/* Dark system bubbles */
.css-1y2ps2x {
display: none;
}
.css-do4s31 {
background-color: transparent;
border: none;
color: var(--chakra-colors-secondaryWhite);
display: grid;
font-size: 20px;
grid-template-columns: 1fr 1fr 1fr;
margin-left: -10% !important;
margin-top: 144%;
--menu-shadow: transparent !important;
opacity: 100% !important;
visibility: visible !important;
}
.css-do4s31 button:hover {
background: -webkit-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.css-94x4at {
background-color: transparent;
}
/* ========================================================================
Selfie page
======================================================================== */
/* Put Request image button at the top */
.css-65tag0 {
margin-bottom: 39%;
position: fixed;
z-index: 9999;
}
}
/* ===================================================================================================================================
For height 1080px and more
=================================================================================================================================== */
@media screen and (min-height: 1080px) {
/* Hover zoom on avatar */
.css-oies6c:hover,
.css-v2kfba:hover,
.css-13tht1l:hover {
border-radius: 0px;
height: 1080px;
left: -10px;
max-height: 1080px;
max-width: 1080px;
width: 1080px;
z-index: 9999;
}
/* Dark system bubbles */
.css-1y2ps2x {
display: none;
}
.css-do4s31 {
background-color: transparent;
border: none;
color: var(--chakra-colors-secondaryWhite);
display: grid;
font-size: 20px;
grid-template-columns: 1fr 1fr 1fr;
margin-left: -10% !important;
margin-top: 170%;
--menu-shadow: transparent !important;
opacity: 100% !important;
visibility: visible !important
}
.css-94x4at {
background-color: transparent;
}
}
/* ===================================================================================================================================
For height 1080px
=================================================================================================================================== */
@media screen and (height: 1080px) {
/* Hover zoom on avatar */
.css-v2kfba:hover,
.css-13tht1l:hover {
border-radius: 0px;
height: 1080px;
left: -10px;
max-height: 1080px;
max-width: 1080px;
width: 1080px;
z-index: 9999;
}
/* Put Request image button at the top */
.css-65tag0 {
margin-bottom: 46.8%;
position: fixed;
z-index: 9999;
}
}
/* ===================================================================================================================================
For height 1440px
=================================================================================================================================== */
@media screen and (height: 1440px) {
/* Dark system bubbles */
.css-1y2ps2x {
display: none;
}
.css-do4s31 {
background-color: transparent;
border: none;
color: var(--chakra-colors-secondaryWhite);
display: grid;
font-size: 20px;
grid-template-columns: 1fr 1fr 1fr;
margin-left: -10% !important;
margin-top: 325%;
--menu-shadow: transparent !important;
opacity: 100% !important;
visibility: visible !important
}
.css-do4s31 button:hover {
background: -webkit-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.css-94x4at {
background-color: transparent;
}
}
/* ===================================================================================================================================
For height 2160px
=================================================================================================================================== */
@media screen and (height: 2160px) {
/* Put textarea more on right*/
.css-b9bzmp {
padding: 0px 10px 0px 32%;
width: 100%;
}
}
/* ===================================================================================================================================
For height 4K
=================================================================================================================================== */
@media screen and (min-height: 1760px) {
/* Put Request image button at the top */
.css-65tag0 {
margin-bottom: 39%;
position: fixed;
z-index: 9999;
}
}
vu son volume).
