Skip to content

Extra Catppuccin Styles by Costeer

Screenshot of Extra Catppuccin Styles

Details

AuthorCosteer

LicenseCC Zero

Categoryzen-browser.app/mods/ https://www.nerdfonts.com/

Created

Updated

Size5.0 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Notes

Source code

/* ==UserStyle==
@name       Extra Styles
@version    20250305.11.59
@namespace  ?
==/UserStyle== */

@-moz-document url-prefix("https://www.nerdfonts.com/") {
body {
    background: #1e1e2e;
}

/* Navbar ----------------------------------------------- */
nav {
    background: #181825;
}

nav .p-home {
    border-color: #f5c2e7;
}

nav .p-features {
    border-color: #cba6f7;
}

nav .p-downloads {
    border-color: #f38ba8;
}

nav .p-icon-cheat-sheet {
    border-color: #fab387;
}

nav .p-all-contributors {
    border-color: #a6e3a1;
}

nav .p-backers-supporters {
    border-color: #89b4fa;
}

nav .p-release {
    border-color: #b4befe;
}

#icon-cheat-sheet {
    background-color: #1e1e2e !important;
    color: #cdd6f4;
}

#icon-cheat-sheet .sectiondivider {
    color: #1e1e2e;
}

.sectiondivider .nf-fa-circle {
    color: #cba6f7;
}

#icon-cheat-sheet {
    color: #cdd6f4;
}

/* higlight */
.highlight,
.linenodiv {
    background-image: url();
    background-color: #181825;
    padding-top: 20px;
    margin-bottom: 20px;
}

.highlight {
    color: #cba6f7;
}

.nt {
    color: #f38ba8;
}

.na {
    color: #a6e3a1;
}

.s {
    color: #fab387;
}

/* icon example */
.ow {
    color: #f38ba8;
}

.nfunc {
    color: #a6e3a1;
}

/*footer*/
#footer {
    background-color: #181825;
    padding-top: 20px;
    padding-bottom: 10px;
}

/* ### --- Home Page -------------------------------------------------------------------------- ###*/
#home {
    background-color: #1e1e2e !important;
    color: #cdd6f4;
}



.rainbow {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #66601e), color-stop(1, #f22));
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

#features .sectiondivider {
    color: #1e1e2e;
}

#features {
    background-color: #313244 !important;
    color: #cdd6f4;
}

.feature-section {
    background: #1e1e2e;
    padding: 10px 20px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.feature-section h2,
.feature-section h3,
.feature-section h4:not(.nerd-font-button) {
    padding: 10px 0px;
    margin: 0px;
    color: #cdd6f4;
    text-shadow: -1px -1px 0 transparent, 1px -1px 0 transparent, -1px 1px 0 transparent, 1px 1px 0 transparent;
}

#features a {
    color: #cdd6f4;
}

.bg-blue {
    background-color: #181825 !important;
    border-radius: 5px;
}

/* ### --- Download Page -------------------------------------------------------------------------- ###*/
#downloads {
    background-color: #181825 !important;
    color: #a6adc8;
}

#downloads .sectiondivider {
    color: #181825;
}

/* ### --- contributer-page -------------------------------------------------------------------------- ###*/
#all-contributors {
    background-color: #181825 !important;
    color: #a6adc8;
}

#all-contributors .sectiondivider {
    color: #181825;
}


/* ### --- backers-page -------------------------------------------------------------------------- ###*/
#backers-supporters {
    background-color: #181825 !important;
    color: #a6adc8;
}

#backers-supporters .sectiondivider {
    color: #181825;
}

/* ### --- Cheat-Sheet -------------------------------------------------------------------------- ###*/
/* Searchbar */
.nerd-font-button.tertiary,
.nerd-font-input.tertiary {
    background: #181825;
    border-color: #181825;
    border-radius: 5px;
    color: #cdd6f4;
    /*padding-bottom: 12px;
    padding-top: 12px;
    padding-left: 30px;
    padding-right: 30px;*/
}

/* Icon Resoults */
#glyphCheatSheet .column {
    border: 2px solid #181825;
    background-color: #181825;
}

#main .nerd-font-cheat-sheet .glyph-popout-copy-clipboard {
    background: #181825;
    border: 2px solid #a6adc8;
}

/* Hover */
#main .nerd-font-cheat-sheet .column:hover {
    background: rgba(0, 0, 0, 0.25);
    border: 2px solid #a6adc8;
    color: #a6adc8 !important;
    cursor: pointer
}

#main .nerd-font-cheat-sheet span.glyph-popout-copy-clipboard span:first-child {
    background: #a6adc8;
    color: #181825;
}

#main .nerd-font-cheat-sheet .column:hover .codepoint {
    border-color: #a6adc8;
}

#main .nerd-font-cheat-sheet .column .codepoint:hover {
    background #181825;
}
#main .nerd-font-cheat-sheet .column:hover .class-name {
    color: #a6adc8;
}

#main .nerd-font-cheat-sheet span.glyph-popout-copy-clipboard span:not(:first-child):hover {
    background: #181825;
    border-color: #a6adc8;
}

/* red "removed" triangle  */
.corner-red {
    border-top: 65px solid #f38ba8;
    border-radius: 5px;
    border-left: 65px solid transparent;
}
.corner-text {
    color: #181825;
}
}

@-moz-document url-prefix("https://zen-browser.app/mods/") {
.text-dark {
    color: #cdd6f4;
}

.bg-paper {
    background-color: #1e1e2e;
}

.border-dark {
    border-color: #cdd6f4;
}

.text-paper {
    color: #1e1e2e;
}
}

Reviews

No reviews yet.