Get the old c.ai look with the script: (This style is REQUIRED for the script to work properly)
https://github.com/ismael1222/Return-old-c.ai-look/
Old c.ai by maxgremory
Details
Authormaxgremory
LicenseNo License
Categoryhttps://character.ai/
Created
Updated
Size7.3 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Source code
/* ==UserStyle==
@name Old C.AI
@version 0.3.4
@description Old C.AI required CSS Style to work
@author u/MaxGremory
@namespace oldcai
@homepageURL https://github.com/ismael1222/Return-old-c.ai-look/
@supportURL https://github.com/ismael1222/Return-old-c.ai-look/issues
==/UserStyle== */
@-moz-document regexp("https\\:\\/\\/character\\.ai\\/(\\?.*)?") {
/*GENERAL*/
main {
display: none!important;
}
html {
background-color: #252525!important;
}
.hide {
display: none!important;
}
* {
color: #DFDFDF;
}
body {
margin: 0;
background-color: #252525;
}
/*NAV*/
div.navbar {
height: 61.7px;
width: 100vw;
border: solid #333333;
border-width: 0 0 1px 0;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
background-color: #252525;
}
img.logo {
height: 28.7833px;
margin-left: 14px;
margin-top: 1rem;
margin-bottom: 1rem;
}
div.right {
width: 250px;
display: flex;
justify-content: space-between;
}
div.right a {
height: 40px;
width: 60px;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid #252525;
border-radius: 4px;
text-decoration: none;
}
div.navbar div.right a:focus {
border: 4px solid #203050;
border-radius: 4px;
}
img.profilePic {
border-radius: 100%;
width: 28px;
margin: 0;
}
/*LEFT NAV*/
div.leftbar {
position: fixed;
background-color: #252525;
border-radius: 0px 8px 8px 0px;
margin-top: 63px;
width: 100px;
}
div.leftbar p {
font-size: 11px;
font-stretch: semi-condensed;
}
div.leftbar .button {
width: 100%;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition-duration: 0.3s;
}
div.leftbar .button:hover {
background-color: #333333;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
div.leftbar .button svg {
height: 28px;
width: 28px;
margin-left: calc(50% - 14px);
}
div.leftbar .button a {
width: 100%;
height: 35px;
text-decoration: none;
}
div.leftbar .button a p {
margin: 0;
text-align: center;
font-family: ui-sans-serif, system-ui, ui-sans-serif, sans-serif
}
div.leftbar div.button.home {
border-radius: 0px 15px 0px 0px;
}
div.leftbar div.community.button {
border-radius: 0px 0px 15px 0px;
}
/*MAIN CONTENT*/
div.main {
padding-top: 60px;
margin-left: calc(110px);
}
div.main > p {
font-family: ui-sans-serif, system-ui, ui-sans-serif, sans-serif;
margin-top: calc(1em + 10px);
margin-bottom: 1em;
}
div.main *::-webkit-scrollbar {
display: none;
}
div.main * {
-ms-overflow-style: none;
scrollbar-width: none;
}
div.loading {
display: flex;
align-content: center;
justify-content: center;
height: 100vh;
}
div.loading h1 {
font-size: xx-large;
margin-top: 150px;
}
/*CARDS*/
div.main div.cardContainer {
display: flex;
overflow-y: scroll;
height: 210px;
width: calc(100% - 10px);
}
div.main div.card {
background-color: #2C2C2C;
width: 180px;
height: 180px;
margin-right: 5px;
border-radius: 12px;
display: grid;
justify-content: center;
transition-duration: 0.2s
}
div.main div.card:hover {
background-color: #333333;
transition-duration: 0.2s
}
div.main div.card > img {
max-width: 110px;
max-height: 110px;
margin: auto;
margin-top: 13px;
margin-bottom: 0px;
border-radius: 14px;
}
div.main div.card > strong > p {
text-align: center;
font-family: ui-sans-serif, system-ui, ui-sans-serif, sans-serif;
font-size: small;
}
div.main div.cardContainer.dropdown {
display: flex
}
/*GENERIC*/
div.separator {
background-color: rgb(58, 58, 58);
height: 3px;
border-radius: 3px;
width: 95%;
}
div.footer {
display: flex;
justify-content: space-between;
margin-bottom: 50px;
}
div.footer a {
color: #378CD9;
margin-left: 5px;
}
}
@-moz-document regexp("https\\:\\/\\/character\\.ai\\/chat\\/.+") {
main main {
width: 100vw!important;
margin-left: 0!important;
max-width: 100vw!important;
background-color: #252524;
}
main div.w-64 {
display: none;
}
div.flex.w-full.flex-col.max-w-2xl * {
background-color: #252525;
}
.max-w-3xl {
max-width: 820px
}
p {
color: white
}
p em {
color: grey;
}
.bg-surface-elevation-2,
.bg-surface-elevation-3 {
background-color: #252525
}
}
@-moz-document regexp("https\\:\\/\\/character\\.ai\\/profile\\/.+") {
main aside,
main div.transition-width.w-64 {
display: none;
}
main main {
max-width: 100vw!important;
margin-left: 0!important;
background-color: #252525;
}
[aria-selected = 'false'] {
color: #808080!important;
border-color: #808080!important;
border-width: 0px 0px 2px 0px;
transition-duration: 200ms;
}
[aria-selected = 'true'] {
color: #63a5d8!important;
border-color: #63a5d8!important;
border-width: 0px 0px 3px 0px;
transition-duration: 200ms;
}
/*UYYYY*/
div.navbar {
height: 61.7px;
width: 100vw;
border: solid #333333;
border-width: 0 0 1px 0;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
background-color: #252525!important;
z-index: 200
}
img.logo {
height: 28.7833px;
margin-left: 14px;
margin-top: 1rem;
margin-bottom: 1rem;
}
div.right {
width: 250px;
display: flex;
justify-content: space-between;
}
div.right a {
height: 40px;
width: 60px;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid #252525;
border-radius: 4px;
text-decoration: none;
}
div.navbar div.right a:focus {
border: 4px solid #203050;
border-radius: 4px;
}
img.profilePic {
border-radius: 100%;
width: 28px;
margin: 0;
}
div.leftbar {
position: fixed;
background-color: #252525;
border-radius: 0px 8px 8px 0px;
margin-top: 63px;
width: 100px;
}
div.leftbar p {
font-size: 11px;
font-stretch: semi-condensed;
}
div.leftbar .button {
width: 100%;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition-duration: 0.3s;
}
div.leftbar .button:hover {
background-color: #333333;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
div.leftbar .button svg {
height: 28px;
width: 28px;
margin-left: calc(50% - 14px);
}
div.leftbar .button a {
width: 100%;
height: 35px;
text-decoration: none;
}
div.leftbar .button a p {
margin: 0;
text-align: center;
font-family: ui-sans-serif, system-ui, ui-sans-serif, sans-serif
}
div.leftbar div.button.home {
border-radius: 0px 15px 0px 0px;
}
div.leftbar div.community.button {
border-radius: 0px 0px 15px 0px;
}
}
@-moz-document regexp("https\\:\\/\\/character\\.ai\\/search.*") {
main main {
width: 100vw!important;
margin-left: 0!important;
max-width: 100vw!important;
background-color: #252524;
}
main div.w-64 {
display: none;
}
}