This style completely redesigns the entirety of Character AI with the sole purpose of elevating the yassness. Everything is customizable.
ZestyAI - c.ai but better by RedactedSys
Details
AuthorRedactedSys
LicenseGPLv3
Categorybeta.character.ai
Created
Updated
Code size13 kB
Code checksum35b3aea9
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Removes bloat, removes all round edges, makes italics easier to read, modern glass/blur design, and much more
To change the colors, edit the variables
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name ZestyAI
@version 1.0.0
@namespace https://beta.character.ai/
@description This style completely redesigns the entirety of character.ai with the sole purpose of elevating the yassness.
@author The Redacted System
==/UserStyle== */
@-moz-document domain("beta.character.ai") {
/* ZestyAI - c.ai theme by redactedsys */
:root {
--main: #9d4162;
--accent: #ff9ecb;
--bg: black;
--secondary: white;
--logo: url(https://i.imgur.com/EeyrCzX.png);
--font: Verdana;
--hover: #210d14;
--bga: #0000005c;
}
/* ----------------------------------- */
* {
font-family: var(--font) !important;
color: var(--secondary) !important;
}
[aria-label="AI Character"],
.chatheaderbg-normal,
.shine-btn:has(.premium-color),
[href="https://book.character.ai"],
[href="/help?"],
#language-select,
.justify-content-center.d-flex.w-100,
div.fader-child > div,
[style="margin-right: 2px; --darkreader-inline-fill: currentColor; --darkreader-inline-stroke: currentColor;"],
svg:has([d*="M431 320.6c-1-3.6 1.2-8.6 3.3-12.2a33.68 33.68 0 012.1-3.1A162 162 0 00464 215c.3-92.2-77.5-167-173.7-167-83.9 0-153.9"]),
.m-0.p-0.container-fluid > div > div > div:nth-of-type(5),
[style="width: 100%; display: flex; flex-direction: column; padding: 4px; justify-content: center; align-items: center; gap: 8px;"]>div:first-child,
[style="width: 100%; display: flex; flex-direction: column; padding: 4px; justify-content: center; align-items: center; gap: 8px;"]>[style="width: 100%; margin: 0px; height: 2px; background: rgb(204, 204, 204);"]
{ display: none !important; }
body,
.navbar-desktop,
.apppage>div, .apppage>div>div,
.character-slide-card-v3,
.css-lp3xnn,
.row.chatfooterbg-normal,
.chatbox, .bg-white,
.profile-header-bg, .nav-tabs, .nav-tabs>li>a,
.suggested-reply,
[data-darkreader-inline-bgcolor],
.apppage, .modal-content,
.dropdown-menu, .dropdown-item:hover,
.modal-content>div>div,
.styles_faq-row-wrapper__3vA1D,
.ReactModal__Content.ReactModal__Content--after-open,
.MuiMenu-list, .infinite-scroll-component *:not([class*="Mui"]),
h5[style="display: inline-block; cursor: pointer; margin-right: 5px;"]>span:not(.bg-primary):not(.bg-secondary),
[placeholder^="Tell us about t"], div[style="max-width: 300px;"]>.button
{ background-color: var(--bg) !important; }
[data-darkreader-inline-color],
.css-vubbuv,
.nav-item a:hover,
div[style*=" "]:nth-child(2):not([aria-label="AI Character"]) .swiper-no-swiping,
.css-1q2h7u5, .css-bryreb,
.css-lp3xnn[aria-selected="false"],
.ReactModal__Content.ReactModal__Content--after-open .btn,
textarea, input[placeholder="Name your persona"]
{ color: var(--secondary) !important; }
div[style*=" "]:nth-child(2):has([aria-label="AI Character"]) .swiper-no-swiping,
.css-lp3xnn:hover, .swiper-button-prev:hover, .swiper-button-next:hover,
.nav-item a, .css-1q2h7u5.Mui-selected,
button.css-lp3xnn[aria-selected="true"],
.css-1ujsas3
{ color: var(--main) !important; }
[style="font-size: 14px; font-weight: bold; margin-bottom: 8px; overflow: hidden; width: 100%; text-overflow: ellipsis; display: block; text-align: center; -webkit-line-clamp: 1; white-space: nowrap;"],
[id*="character_slide_"]>.character-slide-card-v3>div>div>div:nth-of-type(2),
div[style*=" "]:nth-child(2):has([aria-label="AI Character"]) .swiper-no-swiping *:not(.rounded-pill),
[class^="swiper-button-"], .username-truncated>div,
.css-79xub, a,
.infinite-scroll-component [style="flex-direction: row; display: flex; gap: 8px; padding-right: 2px;"]:nth-of-type(odd)>div:nth-child(2) *,
.rounded-pill:not(.bg-primary):not(.bg-secondary)
{ color: var(--accent) !important; }
.bg-primary, .bg-secondary
{ color: var(--bg) !important; }
.nav-link.active, .dropdown-menu, .css-79xub
{ border-color: var(--accent) !important; }
textarea, input[type="text"],
.infinite-scroll-component>div>div,
h5[style="display: inline-block; cursor: pointer; margin-right: 5px;"]>span:not(.bg-primary):not(.bg-secondary),
div[style="max-width: 300px;"]>.button
{ border: 2px solid var(--main) !important; }
[style*="width: 100%; margin: 16px; height: 2px; background: rgb(204, 204, 204);"],
.btn-primary, .btn-primary:active, .btn-primary:hover, .btn-primary:visited,
.css-1sqga17, .css-ttwr4n, .css-1hw9j7s, .css-7ozjwe, .px-1.py-0.rounded,
a[href="https://plus.character.ai"]:nth-of-type(2)>div,
.rounded-pill.bg-secondary
{ background-color: var(--main) !important; }
.rounded-pill.bg-primary
{ background-color: var(--accent) !important; }
.css-1h8jdvg,
.m-0.p-0.container-fluid > div > div > div > .css-1yxmbwk.MuiIconButton-sizeMedium.MuiIconButton-root.MuiButtonBase-root
{ border-color: var(--secondary) !important; }
[style*="/i/400/static/avatars/uploaded/"],
.character-slide-card-v3,
.character-slide-card-v3>div>div>div,
.character-slide-card-v3>div>div>div>div,
.sb-avatar, .sb-avatar__text,
.nav-tabs, .nav-link, .btn,
.swiper-button-next, .swiper-button-prev,
[style*="object-fit: contain;"],
.suggested-reply, .typing-dot,
[style*="border-radius:"],
.css-1h8jdvg, .css-1yxmbwk, .css-1sqga17,
button, .css-t0jbzz,
.cOnrFy .modal-content, .modal-content, .css-1v4ccyo,
.px-1.py-0.rounded, .dropdown-menu, .css-ptg0fb,
.MuiPaper-rounded, .css-d26fzw, input[type="text"],
.rounded-pill, .css-1hof3tc, .form-control,
.spinner-border, .Toastify__toast
{ border-radius: 0 !important; }
.form-control:focus,
[style*="border-color: rgb(117, 117, 117);"],
button.MuiToggleButtonGroup-root,
.css-t0jbzz, .modal-content,
.infinite-scroll-component>div, .css-1hof3tc:after
{ border-color: var(--main) !important; }
.character-slide-card-v3:hover,
.dropdown-item:hover
{ background-color: var(--hover) !important; }
/*
-----------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------
*/
div:has(.swiper-no-swiping) [style="padding-left: 0px;"]>img,
.sb-avatar--text {
width: 60px !important;
height: 60px !important;
}
.sb-avatar--text span { font-size: 40px; }
.pt-3>div>div>div:nth-of-type(1)>div:nth-of-type(1) .character-slide-card-v3>div { padding: 0 !important; }
.character-slide-card-v3 {
background-color: transparent !important;
border: 2px solid var(--main);
padding-top: 22px !important;
}
.username-truncated {
opacity: 50%;
font-style: normal;
}
.justify-content-between.d-flex>div:has(.mb-3.mt-3.img-fluid)>a {
display: block;
width: 180px;
height: 50px;
background: var(--logo) no-repeat;
background-size: 180px;
background-position-y: -8px;
}
[style*="object-fit: contain;"], .suggested-reply,
.MuiPaper-rounded, .css-1hof3tc:not(.MuiOutlinedInput-root)
{ border: 1px solid var(--main); }
[id*="character_slide_"]>.character-slide-card-v3>div>div>div:nth-of-type(3) { text-align: center; }
.chatbox, .btn-primary, .btn-primary:active, .btn-primary:hover, .btn-primary:visited { border-color: var(--bg); }
[style="flex-direction: row; display: flex; align-items: center; gap: 2px;"] { font-weight: normal; }
.swiper-no-swiping>[style*="font-size: 12px"] {
font-size: 9px !important;
opacity: 20%;
margin-top: -7px;
}
h6 { font-size: 20px; margin: 0; }
.profile-header-bg { box-shadow: var(--accent) 0px 1px 0px !important; }
.nav-tabs { border-bottom-color: var(--accent) !important; }
.nav-link {
border-bottom-color: var(--accent) !important;
margin-top: -1px;
padding-right: calc(1rem + 1px);
}
::-webkit-scrollbar-track { background-color: var(--bg); }
::-webkit-scrollbar-thumb { background-color: var(--main); }
::-webkit-scrollbar-thumb:hover { background-color: var(--main); }
::-webkit-scrollbar { width: 4px; }
em { opacity: 60%; }
[style="flex-direction: row; display: flex; width: fit-content; gap: 2px; justify-content: space-evenly; align-items: center;"],
.annotation-buttons-container>div:first-child:only-child, [title="Submit Message"]
{ opacity: 30%; }
[title="Submit Message"]:hover { opacity: 40% ; }
.chat2>div:nth-of-type(1) {
position: absolute;
background-color: var(--bg) '7a' !important;
backdrop-filter: blur(10px);
z-index: 1;
width: 824px;
}
.react-scroll-to-bottom--css-gwivx-1n7m0yu.inner-scroll-view>div:first-of-type { margin-top: 80px !important; }
.react-scroll-to-bottom--css-gwivx-1n7m0yu.inner-scroll-view>div:last-of-type { height: auto !important; }
[style*="width: 100%; margin: 16px; height: 2px; background: rgb(204, 204, 204);"] { margin-left: -20px !important; }
.navbar-desktop {
padding: 0;
margin-left: 15px;
margin-top: 100px;
}
.row.w-100>div { padding-left: 95px !important; }
.form-control, .form-control:focus {
color: var(--secondary);
background-color: var(--bg);
border-color: transparent;
}
.container-fluid>.justify-content-between.d-flex {
height: 60px;
position: fixed;
z-index: 999;
background-color: var(--bga) !important;
backdrop-filter: blur(10px);
width: 100%;
border: transparent !important;
}
.container-fluid>.row.w-100 { margin-top: 60px; }
[class^="swiper-button-"] {
backdr...