Soothing pastel theme for CivitAI
CivitAI Catppuccin by DraconicDragon
Mirrored from https://github.com/DraconicDragon/civitai-catppuccin-userstyle/raw/refs/heads/main/civitai-catppuccin.user.css
Details
AuthorDraconicDragon
LicenseMIT
Categorycivitai.com, civitai.green
Created
Updated
Size24 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Experimental means experimental, and I am also inexperienced
its also unfinished and has some elements removed due to personal preference which may turn into options
Contributions are welcome
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name CivitAI Catppuccin
@namespace https://github.com/DraconicDragon/civitai-catppuccin-userstyle
@homepageURL https://github.com/DraconicDragon/civitai-catppuccin-userstyle
@version 0.5.10
@supportURL https://github.com/DraconicDragon/civitai-catppuccin-userstyle
@description Soothing pastel theme for CivitAI
@author Drac
@license MIT
@preprocessor less
@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
@var select removeVaultIcon "Vault Icon Removal" ["removeIcon:Remove", "stay:Stay"]
==/UserStyle== */
@-moz-document regexp("https://civitai\.(com|green|black|red)/.*|https://app\.gpt-trainer\.com/.*") {
:root {
#catppuccin(@darkFlavor, @accentColor, @accentColor);
}
//TODO: add hover and maybe pressed highlight, info stuff missing + image view probably and some less used views, see if can change brush svg to white and color it from parent
//TODO: the generator is missing, lol, maybe training site too, comments cancel + comment button no coloralign-content, model page details table missing
//NOTE: technically chat is also not finished but i dont use it so i dont care and it looks good enough if you dont hover lol
#catppuccin(@lookup, @accent, @t_accent) {
@rosewater: @catppuccin[@@lookup][@rosewater];
@flamingo: @catppuccin[@@lookup][@flamingo];
@pink: @catppuccin[@@lookup][@pink];
@mauve: @catppuccin[@@lookup][@mauve];
@red: @catppuccin[@@lookup][@red];
@maroon: @catppuccin[@@lookup][@maroon];
@peach: @catppuccin[@@lookup][@peach];
@yellow: @catppuccin[@@lookup][@yellow];
@green: @catppuccin[@@lookup][@green];
@teal: @catppuccin[@@lookup][@teal];
@sky: @catppuccin[@@lookup][@sky];
@sapphire: @catppuccin[@@lookup][@sapphire];
@blue: @catppuccin[@@lookup][@blue];
@lavender: @catppuccin[@@lookup][@lavender];
@text: @catppuccin[@@lookup][@text];
@subtext1: @catppuccin[@@lookup][@subtext1];
@subtext0: @catppuccin[@@lookup][@subtext0];
@overlay2: @catppuccin[@@lookup][@overlay2];
@overlay1: @catppuccin[@@lookup][@overlay1];
@overlay0: @catppuccin[@@lookup][@overlay0];
@surface2: @catppuccin[@@lookup][@surface2];
@surface1: @catppuccin[@@lookup][@surface1];
@surface0: @catppuccin[@@lookup][@surface0];
@base: @catppuccin[@@lookup][@base];
@mantle: @catppuccin[@@lookup][@mantle];
@crust: @catppuccin[@@lookup][@crust];
@accent-color: @catppuccin[@@lookup][@@accent];
/*transparent colors*/
@t_rosewater: fade(@catppuccin[@@lookup][@rosewater], 20);
@t_flamingo: fade(@catppuccin[@@lookup][@flamingo], 20);
@t_pink: fade(@catppuccin[@@lookup][@pink], 20);
@t_mauve: fade(@catppuccin[@@lookup][@mauve], 20);
@t_red: fade(@catppuccin[@@lookup][@red], 20);
@t_maroon: fade(@catppuccin[@@lookup][@maroon], 20);
@t_peach: fade(@catppuccin[@@lookup][@peach], 20);
@t_yellow: fade(@catppuccin[@@lookup][@yellow], 20);
@t_green: fade(@catppuccin[@@lookup][@green], 20);
@t_teal: fade(@catppuccin[@@lookup][@teal], 20);
@t_sky: fade(@catppuccin[@@lookup][@sky], 20);
@t_sapphire: fade(@catppuccin[@@lookup][@sapphire], 20);
@t_blue: fade(@catppuccin[@@lookup][@blue], 20);
@t_lavender: fade(@catppuccin[@@lookup][@lavender], 20);
@t_text: fade(@catppuccin[@@lookup][@text], 20);
@t_subtext1: fade(@catppuccin[@@lookup][@subtext1], 20);
@t_subtext0: fade(@catppuccin[@@lookup][@subtext0], 20);
@t_overlay2: fade(@catppuccin[@@lookup][@overlay2], 20);
@t_overlay1: fade(@catppuccin[@@lookup][@overlay1], 20);
@t_overlay0: fade(@catppuccin[@@lookup][@overlay0], 20);
@t_surface2: fade(@catppuccin[@@lookup][@surface2], 20);
@t_surface1: fade(@catppuccin[@@lookup][@surface1], 20);
@t_surface0: fade(@catppuccin[@@lookup][@surface0], 20);
@t_base: fade(@catppuccin[@@lookup][@base], 20);
@t_mantle: fade(@catppuccin[@@lookup][@mantle], 20);
@t_crust: fade(@catppuccin[@@lookup][@crust], 20);
@t_accent-color: fade(@catppuccin[@@lookup][@@accent], 20);
/*brighter*/
@b_rosewater: lighten(@catppuccin[@@lookup][@rosewater], 20%);
@b_flamingo: lighten(@catppuccin[@@lookup][@flamingo], 20%);
@b_pink: lighten(@catppuccin[@@lookup][@pink], 20%);
@b_mauve: lighten(@catppuccin[@@lookup][@mauve], 20%);
@b_red: lighten(@catppuccin[@@lookup][@red], 20%);
@b_maroon: lighten(@catppuccin[@@lookup][@maroon], 20%);
@b_peach: lighten(@catppuccin[@@lookup][@peach], 20%);
@b_yellow: lighten(@catppuccin[@@lookup][@yellow], 20%);
@b_green: lighten(@catppuccin[@@lookup][@green], 20%);
@b_teal: lighten(@catppuccin[@@lookup][@teal], 20%);
@b_sky: lighten(@catppuccin[@@lookup][@sky], 20%);
@b_sapphire: lighten(@catppuccin[@@lookup][@sapphire], 20%);
@b_blue: lighten(@catppuccin[@@lookup][@blue], 20%);
@b_lavender: lighten(@catppuccin[@@lookup][@lavender], 20%);
@b_text: lighten(@catppuccin[@@lookup][@text], 20%);
@b_subtext1: lighten(@catppuccin[@@lookup][@subtext1], 20%);
@b_subtext0: lighten(@catppuccin[@@lookup][@subtext0], 20%);
@b_overlay2: lighten(@catppuccin[@@lookup][@overlay2], 20%);
@b_overlay1: lighten(@catppuccin[@@lookup][@overlay1], 20%);
@b_overlay0: lighten(@catppuccin[@@lookup][@overlay0], 20%);
@b_surface2: lighten(@catppuccin[@@lookup][@surface2], 20%);
@b_surface1: lighten(@catppuccin[@@lookup][@surface1], 20%);
@b_surface0: lighten(@catppuccin[@@lookup][@surface0], 20%);
@b_base: lighten(@catppuccin[@@lookup][@base], 20%);
@b_mantle: lighten(@catppuccin[@@lookup][@mantle], 20%);
@b_crust: lighten(@catppuccin[@@lookup][@crust], 20%);
@b_accent-color: lighten(@catppuccin[@@lookup][@@accent], 20%);
color-scheme: if(@lookup =mocha, dark, light);
::selection {
background-color: fade(@accent-color, 30%);
}
color: @text;
body {
color: @text;
background-color: @mantle;
}
/*all general buttons, excluding idk, idk, model create like etc, delete post, delete account, logout, profile card btns, image carousel, gallery, top bar "more" btn, comment cards, comment threads*/
.mantine-Button-root:not(.mantine-vs5cem *, .mantine-1omorxi *, .mantine-1dvev8p *, .mantine-1h21rfn, .mantine-1k6yyir, .mantine-27jxzw, .mantine-1gg8vod *, .mantine-1ejqi9m *, [id="gallery"] *, [id^="mantine-"][id$="-target"], div[role="gridcell"] .mantine-Card-root *, [id^="mantine-r"][id$="-body"] * ) {
background-color: @t_accent-color;
color:@b_accent-color;
}
/*model page download/create/like, version selection, + add version*/
.mantine-mp35ka {background-color: @accent-color;}
.mantine-l8vif {background-color: @t_accent-color; color:@b_accent-color;}
.mantine-6k0h61, .mantine-z4z0r6 {background-color: @surface0}
.mantine-1ke99cu {background-color: @accent-color !important; color: #fff !important;}
.mantine-n93y9k * {border:transparent; }
.mantine-1g72woz {background-color: @t_accent-color !important; color: @b_accent-color;}
/*buttons with border: Add API key, Redeem Code, add comment/post/review, suggested res., */
.mantine-1evx5be, .mantine-wpxh0o, .mantine-3rhhm4, .mantine-s0od4i {border-color: @accent-color;}
//gallery add post, add review
[id="gallery"] .mantine-Group-root .mantine-Group-root .mantine-Button-root:not([data-expanded], [aria-expanded]) {color:@b_accent-color;
.tabler-icon-star {stroke: @b_accent-color; fill: @b_accent-color};
} // use this scss style for similar things
//sort + filter maybe global
//.mantine-Button-root[data-expanded], .mantine-Button-root[aria-expanded]:not(header *) {background-color: green;
// .sticky {background-color: transparent;}
//}
/*download button in file dropdown on model page*/
[id^="mantine-"][id$="panel-version-files"] .mantine-Group-root .mantine-Button-root {background-color: transparent !important;
&:hover {background-color: @t_accent-color !important;}
}
/*profile cards buttons*/
.mantine-j5xtyu {background-color: @accent-color;}
/*comment cards*/
div[role="gridcell"] .mantine-Card-root .mantine-Button-root:not([id^="mantine-"][id$="-target"]) {color:@b_accent-color;
&:hover {color:@b_accent-color; background-color:@t_accent-color;}
}
// comment threads, added my own border lol
.mantine-Paper-root:has([id^="mantine-"][id$="-body"]) {background-color:@mantle !important; border:1px solid; border-color:@surface0}
[id^="mantine-"][id$="-body"] .mantine-RichTextEditor-content, [id^="mantine-r"][id$="-body"] .mantine-RichTextEditor-root {background-color: @crust; border-color:@surface0}
[id^="mantine-"][id$="-dropdown"] {background-color:@mantle !important;}
/*tabler icon + tabler star icon, bell, brush, alert-circle*/
.tabler-icon-star {fill:@accent-color;}
...