character.ai new ui better by endercat126

/* ==UserStyle==
@name         character.ai new ui better
@version      20240319.20.35
@namespace    https://userstyles.world/user/endercat126
@description  makes the new c.ai interface less ugly
@author       endercat126
@license      CC0
==/UserStyle== */

@-moz-document domain("character.ai") {
/* Character.AI Redesign Fix */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Noto+Color+Emoji&family=Rubik:wght@400;600&display=swap');
@import url('https://mshaugh.github.io/nerdfont-webfonts/build/firacode-nerd-font.css');

:root {
    --radius: 8px;
    --font-normal: 'Rubik', sans-serif, 'Noto Color Emoji', 'FiraCode Nerd Font';
    --font-code: 'JetBrains Mono', 'Noto Color Emoji', monospace, var(--font-normal);
    
    --base-clr: #100e11;
    --tint-clr: #eebfb5;

    --G0: color-mix(in oklab, var(--base-clr) 2.5%, var(--tint-clr));
    --G50: color-mix(in oklab, var(--base-clr) 2%, var(--tint-clr));
    --G100: color-mix(in oklab, var(--base-clr) 4%, var(--tint-clr));
    --G150: color-mix(in oklab, var(--base-clr) 7%, var(--tint-clr));
    --G200: color-mix(in oklab, var(--base-clr) 10%, var(--tint-clr));
    --G250: color-mix(in oklab, var(--base-clr) 14%, var(--tint-clr));
    --G300: color-mix(in oklab, var(--base-clr) 20.5%, var(--tint-clr));
    --G400: color-mix(in oklab, var(--base-clr) 35.5%, var(--tint-clr));
    --G500: color-mix(in oklab, var(--base-clr) 51%, var(--tint-clr));
    --G600: color-mix(in oklab, var(--base-clr) 66.5%, var(--tint-clr));
    --G700: color-mix(in oklab, var(--base-clr) 77.75%, var(--tint-clr));
    --G750: color-mix(in oklab, var(--base-clr) 85%, var(--tint-clr));
    --G800: color-mix(in oklab, var(--base-clr) 90%, var(--tint-clr));
    --G850: color-mix(in oklab, var(--base-clr) 93%, var(--tint-clr));
    --G900: color-mix(in oklab, var(--base-clr) 97%, var(--tint-clr));
    --G950: var(--base-clr);
}

*:not(code, code *) {
    font-family: var(--font-normal) !important;
}

code, code * {
    font-family: var(--font-code);
}

pre:has(> code) {
    background: var(--G850) !important;
}

.rounded-2xl, .rounded-sm, .rounded-md {
    border-radius: var(--radius);
}

.sm\:rounded-spacing-l, .rounded-spacing-m, .rounded-spacing-s {
    border-radius: var(--radius);
}

.m-4.mb-10.flex.rounded-sm.placeholder\:text-placeholder.p-1.border-solid.border-border-outline.items-end.bg-surface-elevation-1 {
    display: flex;
    align-items: center;
}

div.flex.w-full.flex-col.max-w-2xl .hover\:bg-primary\/90 {
    background: var(--G200);
    max-width: 2rem !important;
    min-width: 2rem !important;
    width: 2rem !important;
    height: 2rem !important;
    margin-right: 0.2rem;
}

.hover\:bg-primary\/90:hover {
    background: var(--G300);
}

div:has(> .group.relative.max-w-3xl.m-auto.p-2) {
    margin: auto;
    padding-top: 2rem;
}

.max-w-3xl {
    max-width: 64rem;
}

.max-w-xl {
    max-width: unset;
}

/*
div.flex.flex-col.size-full.items-center.flex-1 > div > div.h-full > div.h-full {
    padding: 0 4rem;
}

.mr-7 {
    margin-right: unset !important;
}

div.size-full.flex.overflow-x-hidden {
    flex-direction: row;
    justify-content: center;
}*/

.max-w-3xl button.transition-all.group-hover\:opacity-100:has(> svg) {
    position: absolute !important;
    top: 1.5rem !important;
    left: -4rem !important;
}

.mt-0.hidden.md\:flex.flex-col.gap-3.items-center span {
    width: 2.5rem !important;
    height: 2.5rem !important;
    margin: 0 1rem;
}

.mt-0.hidden.md\:flex.flex-col.gap-3.items-center span img {
    width: 3rem !important;
    height: 3rem !important;
}

div.swiper-slide > div:nth-child(1) > div:nth-child(2) {
    padding-left: 2rem;
}

div.swiper-slide > div:nth-child(1) > div:nth-child(2) * {
    color: var(--icon-secondary);
}

.text-sm {
    font-size: 0.8rem;
    font-weight: bold;
}

.prose {
    color: var(--G50);
}

svg.text-secondary-foreground, #radix-\:rd1\: > svg:nth-child(1) {
    color: var(--G400);
}

button.text-sm:nth-child(1) {
    color: var(--G500);
}

li.relative.mb-2 > span {
    color: var(--G400);
    font-style: italic;
}

li *:not(code *) {
    color: var(--G50) !important;
}

*::marker {
    color: var(--G400) !important;
}

ol, ul {
    
    margin-left: 0.5rem !important;
}

blockquote {
    border-color: var(--G500) !important;
    color: var(--G50) !important;
}

.prose :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  border-color: var(--G600);
  border-top-width: 2px;
  margin-top: 3em;
  margin-bottom: 3em;
}
}