Partial documentation of the character.ai CSS + default pink theme.
C.ai Ultra by transsuperfreak
Details
Authortranssuperfreak
Licenseno license, modify whatever you want do whatever idc
Categorycharacter.ai
Created
Updated
Size147 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
I will not make a version with default theme, waste of my time, thanks ;3
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name C.ai Ultra
@namespace character.ai
@version 1.0.0
@description check description on site
@author transsuperfreak
==/UserStyle== */
@-moz-document domain("character.ai") {
* {
.loader {
animation:rotation .75s ease-in-out infinite
}
.tiblock {
align-items:center;
display:flex;
height:17px
}
.ticontainer .tidot {
background:linear-gradient(90deg, rgba(246, 0, 255, 0.6262837898831408) 0%, rgba(237, 117, 255, 1) 35%, rgba(255, 94, 233, 1) 59%, rgba(255, 111, 226, 0.6010737058495272) 100%);
}
.tidot {
animation:typingAnimation 1.5s ease-in-out infinite;
border-radius:2px;
display:inline-block;
height:4px;
margin-right:2px;
width:4px
}
@keyframes typingAnimation {
0% {
transform:translateY(0)
}
28% {
transform:translateY(-5px)
}
44% {
transform:translateY(0)
}
}
.tidot:first-child {
animation-delay:.2s
}
.tidot:nth-child(2) {
animation-delay:.3s
}
.tidot:nth-child(3) {
animation-delay:.4s
}
.loader {
width:48px;
height:48px;
border-radius:50%;
display:inline-block;
box-sizing:border-box;
animation:rotation 1s cubic-bezier(.61, 1, .88, 1) infinite
}
@keyframes rotation {
0% {
transform:rotate(0deg)
}
to {
transform:rotate(1turn)
}
}
.background-gradient {
background:linear-gradient(120deg, #1c192f, #19272f, #2f192f);
background-size:300% 300%;
animation:gradient-anim 15s linear infinite
}
@keyframes gradient-anim {
0% {
background-position:0 50%
}
50% {
background-position:100% 50%
}
to {
background-position:0 50%
}
}
.card-effect {
border-radius:1rem;
box-shadow:0 12px 12px -12px rgba(0, 0, 0, .25);
transition:transform .5s ease 0s
}
.card-effect:hover {
transform:perspective(3000px) rotateX(8deg) rotateY(5deg)
}
.character-gradient-a {
background:linear-gradient(310deg, var(--background) 0, #f47c3b 100%)
}
.character-gradient-b {
background:linear-gradient(310deg, var(--background) 0, #fed200 100%)
}
.character-gradient-c {
background:linear-gradient(310deg, var(--background) 0, #ddfc00 100%)
}
.character-gradient-d {
background:linear-gradient(310deg, var(--background) 0, #0036b1 100%)
}
.character-gradient-e {
background:linear-gradient(310deg, var(--background) 0, #a3df00 100%)
}
.character-gradient-f {
background:linear-gradient(310deg, var(--background) 0, #6ddd00 100%)
}
.character-gradient-g {
background:linear-gradient(310deg, var(--background) 0, #68b5cc 100%)
}
.character-gradient-h {
background:linear-gradient(310deg, var(--background) 0, #73b5ff 100%)
}
.character-gradient-i {
background:linear-gradient(310deg, var(--background) 0, #c5a1ff 100%)
}
.character-gradient-j {
background:linear-gradient(310deg, var(--background) 0, #ffa1ea 100%)
}
.character-gradient-k {
background:linear-gradient(310deg, var(--background) 0, #d36115 100%)
}
.character-gradient-l {
background:linear-gradient(310deg, var(--background) 0, #e2ab00 100%)
}
.character-gradient-m {
background:linear-gradient(310deg, var(--background) 0, #f5fc00 100%)
}
.character-gradient-n {
background:linear-gradient(310deg, var(--background) 0, #81bc00 100%)
}
.character-gradient-o {
background:linear-gradient(310deg, var(--background) 0, #39bc00 100%)
}
.character-gradient-p {
background:linear-gradient(310deg, var(--background) 0, #1681a5 100%)
}
.character-gradient-q {
background:linear-gradient(310deg, var(--background) 0, #0064e0 100%)
}
.character-gradient-r {
background:linear-gradient(310deg, var(--background) 0, #a264ff 100%)
}
.character-gradient-s {
background:linear-gradient(310deg, var(--background) 0, #ff28ce 100%)
}
.character-gradient-t {
background:linear-gradient(310deg, var(--background) 0, #9f2d00 100%)
}
.character-gradient-u {
background:linear-gradient(310deg, var(--background) 0, #c48200 100%)
}
.character-gradient-v {
background:linear-gradient(310deg, var(--background) 0, #fbdd00 100%)
}
.character-gradient-w {
background:linear-gradient(310deg, var(--background) 0, #5e8900 100%)
}
.character-gradient-x {
background:linear-gradient(310deg, var(--background) 0, #7d3294 100%)
}
.character-gradient-y {
background:linear-gradient(310deg, var(--background) 0, #194d40 100%)
}
.character-gradient-z {
background:linear-gradient(310deg, var(--background) 0, #0c5d7d 100%)
}
/*
! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
*/
*, :after, :before {
box-sizing:border-box;
border:0 solid #e5e7eb
}
:after, :before {
--tw-content:""
}
:host, html {
line-height:1.5;
-webkit-text-size-adjust:100%;
-moz-tab-size:4;
-o-tab-size:4;
tab-size:4;
font-family:ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-feature-settings:normal;
font-variation-settings:normal;
-webkit-tap-highlight-color:transparent
}
body {
margin:0;
line-height:inherit
}
hr {
height:0;
color:inherit;
border-top-width:1px
}
abbr:where([title]) {
-webkit-text-decoration:underline dotted;
text-decoration:underline dotted
}
h1, h2, h3, h4, h5, h6 {
font-size:inherit;
font-weight:inherit
}
a {
color:inherit;
text-decoration:inherit
}
b, strong {
font-weight:bolder
}
code, kbd, pre, samp {
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
font-feature-settings:normal;
font-variation-settings:normal;
font-size:1em
}
small {
font-size:80%
}
sub, sup {
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline
}
sub {
bottom:-.25em
}
sup {
top:-.5em
}
table {
text-indent:0;
border-color:inherit;
border-collapse:collapse
}
button, input, optgroup, select, textarea {
font-family:inherit;
font-feature-settings:inherit;
font-variation-settings:inherit;
font-size:100%;
font-weight:inherit;
line-height:inherit;
color:inherit;
margin:0;
padding:0
}
button, select {
text-transform:none
}
[type=button], [type=reset], [type=submit], button {
-webkit-appearance:button;
background-color:transparent;
background-image:none
}
:-moz-focusring {
outline:auto
}
:-moz-ui-invalid {
box-shadow:none
}
progress {
vertical-align:baseline
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height:auto
}
[type=search] {
-webkit-appearance:textfield;
outline-offset:-2px
}
::-webkit-search-decoration {
-webkit-appearance:none
}
::-webkit-file-upload-button {
-webkit-appearance:button;
font:inherit
}
summary {
display:list-item
}
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
margin:0
}
fieldset {
margin:0
}
fieldset, legend {
padding:0
}
menu, ol, ul {
list-style:none;
margin:0;
padding:0
}
dialog {
padding:0
}
textarea {
resize:vertical
}
input::-moz-placeholder, textarea::-moz-placeholder {
opacity:1;
color:white
}
input::placeholder, textarea::placeholder {
opacity:1;
color:white
}
[role=button], button {
cursor:pointer
}
:disabled {
cursor:default
}
audio, canvas, embed, iframe, img, object, svg, video {
display:block;
vertical-align:middle
}
img, video {
max-width:100%;
height:auto
}
[hidden] {
display:none
}
:root, [data-theme] {
color:hsl(var(--nextui-foreground));
background-color:hsl(var(--nextui-background))
}
:root {
--G0:linear-gradient(90deg, rgba(246, 0, 255, 0.6262837898831408) 0%, rgba(237, 117, 255, 1) 35%, rgba(255, 94, 233, 1) 59%, rgba(255, 111, 226, 0.6010737058495272) 100%);
--G50:linear-gradient(90deg, rgba(246, 0, 255, 0.6262837898831408) 0%, rgba(237, 117, 255, 1) 35%, rgba(255, 94, 233, 1) 59%, rgba(255, 111, 226, 0.6010737058495272) 100%);
--G100:linear-gradient(90deg, rgba(246, 0, 255, 0.6262837898831408) 0%, rgba(237, 117, 255, 1) 35%, rgba(255, 94, 233, 1) 59%, rgba(255, 111, 226, 0.6010737058495272) 100%);
--G150:#ececee;
--G200:#e4e4e7;
--G250:#d9d9df;
--G300:#c8c8cf;
--G400:#a2a2ac;
--G500:#7c7c87;
--G600:#585962;
--G700:#3f3f46;
--G750:#303136;
--G800:#26272b;
--G850:#202024;
--G900:#18181b;
--G950:#131316;
--Blue:#536dc6;
--Error:#cc3434;
--scrim:#f8f8f880;
--scrim-0:rgba(19, 22, 22, 0);
--scrim-4:rgba(19, 22, 22, .04);
--scrim-8:rgba(19, 22, 22, .08);
--scrim-12:rgba(19, 22, 22, .12);
--spacing-0:0px;
--spacing-xxs:4px;
--spacing-xs:8px;
--spacing-s:12px;
--spacing-m:16px;
--spacing-l:20px;
--spacing-xl:24px;
--placeholder:var(--G500);
--background:linear-gradient(90deg, rgba(246, 0, 255, 0.6262837898831408) 0%, rgba(237, 117, 255, 1) 35%, rgba(255, 94, 233, 1) 59%, rgba(255, 111, 226, 0.6010737058495272) 100%);
;
/ --hero-transparent:null;
--foreground:var(--G800);
--card:#fff;
--card-foreground:var(--G850);
--card-alt:#fff;
--popover:var(--G200);
--popover-foreground:var(--G800);
--primary:linear-gradient(90deg, rgba(246, 0, 255, 0.6262837898831408) 0%, rgba(237, 117, 255, 1) 35%, rgba(255, 94, 233, 1) 59%, rgba(255, 111, 226, 0.6010737058495272) 100%);
--primary-foreground:var(--G50);
--secondary:var(--G250);
--secondary-foreground:#0f172a;
--muted:var(--G400);
--muted-foreground:var(--G600);
--accent:var(--G300);
--accent-foreground:var(--G80...