Supports switching between color themes in the stylus extension! Just give it a try!
Catppuccin Aniworld by DrWuzi
Details
AuthorDrWuzi
LicenseNo License
Categoryaniworld.to
Created
Updated
Size29 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name AniWorld Catppuccin
@namespace https://github.com/DrWuzi/website-themes
@version 1.0.0
@description Catppuccin theme for Aniworld
@author DrWuzi
@license GNU-V3.0
@preprocessor less
@var select flavor "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"]
==/UserStyle== */
@catppuccin: {
@latte: {
@rosewater: #dc8a78;
@flamingo: #dd7878;
@pink: #ea76cb;
@mauve: #8839ef;
@red: #d20f39;
@maroon: #e64553;
@peach: #fe640b;
@yellow: #df8e1d;
@green: #40a02b;
@teal: #179299;
@sky: #04a5e5;
@sapphire: #209fb5;
@blue: #1e66f5;
@lavender: #7287fd;
@text: #4c4f69;
@subtext1: #5c5f77;
@subtext0: #6c6f85;
@overlay2: #7c7f93;
@overlay1: #8c8fa1;
@overlay0: #9ca0b0;
@surface2: #acb0be;
@surface1: #bcc0cc;
@surface0: #ccd0da;
@base: #eff1f5;
@mantle: #e6e9ef;
@crust: #dce0e8;
}
;
@frappe: {
@rosewater: #f2d5cf;
@flamingo: #eebebe;
@pink: #f4b8e4;
@mauve: #ca9ee6;
@red: #e78284;
@maroon: #ea999c;
@peach: #ef9f76;
@yellow: #e5c890;
@green: #a6d189;
@teal: #81c8be;
@sky: #99d1db;
@sapphire: #85c1dc;
@blue: #8caaee;
@lavender: #babbf1;
@text: #c6d0f5;
@subtext1: #b5bfe2;
@subtext0: #a5adce;
@overlay2: #949cbb;
@overlay1: #838ba7;
@overlay0: #737994;
@surface2: #626880;
@surface1: #51576d;
@surface0: #414559;
@base: #303446;
@mantle: #292c3c;
@crust: #232634;
}
;
@macchiato: {
@rosewater: #f4dbd6;
@flamingo: #f0c6c6;
@pink: #f5bde6;
@mauve: #c6a0f6;
@red: #ed8796;
@maroon: #ee99a0;
@peach: #f5a97f;
@yellow: #eed49f;
@green: #a6da95;
@teal: #8bd5ca;
@sky: #91d7e3;
@sapphire: #7dc4e4;
@blue: #8aadf4;
@lavender: #b7bdf8;
@text: #cad3f5;
@subtext1: #b8c0e0;
@subtext0: #a5adcb;
@overlay2: #939ab7;
@overlay1: #8087a2;
@overlay0: #6e738d;
@surface2: #5b6078;
@surface1: #494d64;
@surface0: #363a4f;
@base: #24273a;
@mantle: #1e2030;
@crust: #181926;
}
;
@mocha: {
@rosewater: #f5e0dc;
@flamingo: #f2cdcd;
@pink: #f5c2e7;
@mauve: #cba6f7;
@red: #f38ba8;
@maroon: #eba0ac;
@peach: #fab387;
@yellow: #f9e2af;
@green: #a6e3a1;
@teal: #94e2d5;
@sky: #89dceb;
@sapphire: #74c7ec;
@blue: #89b4fa;
@lavender: #b4befe;
@text: #cdd6f4;
@subtext1: #bac2de;
@subtext0: #a6adc8;
@overlay2: #9399b2;
@overlay1: #7f849c;
@overlay0: #6c7086;
@surface2: #585b70;
@surface1: #45475a;
@surface0: #313244;
@base: #1e1e2e;
@mantle: #181825;
@crust: #11111b;
}
;
}
@-moz-document domain("aniworld.to") {
html,
:root {
#catppuccin(@flavor, @accentColor);
}
#catppuccin(@lookup, @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];
@small-border-radius: 8px;
@big-border-radius: 8px;
background: @mantle !important;
/* Vertikale Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
background-color: @base;
}
/* Griff */
::-webkit-scrollbar-thumb {
background-color: @accent-color;
border-radius: 8px;
}
* {
&:hover {
transition: 0.5s ease-in-out;
}
color: @text !important;
border-color: none !important;
}
strong,
a,
span,
i {
color: @text !important;
}
#wrapper {
background: @base !important;
::-webkit-scrollbar {
height: 8px;
}
::-webkit-scrollbar-track {
background-color: transparent !important;
}
header {
@hueWinkelAusgang: hue(#495BB5);
@hueWinkelZiel: hue(@accent-color);
@hueDifferenz: @hueWinkelZiel - @hueWinkelAusgang;
.header-logo {
filter: hue-rotate(unit(@hueDifferenz, deg));
}
i,
strong {
color: @accent-color !important;
}
.icon-menu span {
background: @accent-color !important;
}
}
img {
border-radius: @small-border-radius !important;
}
.paragraph-end {
display: none !important;
}
header,
.header-content,
.header-content strong,
.header-container,
.logo-wrapper {
background: @mantle !important;
}
.modal {
background: @surface0;
display: none;
animation: hideModal 3s forwards;
border-radius: @big-border-radius;
.icon-container {
background: none;
}
ul li:hover {
background: @overlay0 !important;
}
ul li:first-child {
border-top-left-radius: @big-border-radius;
border-top-right-radius: @big-border-radius;
}
ul li:last-child {
border-bottom-left-radius: @big-border-radius;
border-bottom-right-radius: @big-border-radius;
}
}
/* Show the modal when hovering over the dropdown */
.user.offset-navigation > .dd:hover .modal,
.user.offset-navigation > .dd .modal:hover {
display: block !important;
}
.dd .fa-chevron-down {
transition: transform 0.3s;
}
.dd:hover .fa-chevron-down {
transform: rotate(180deg);
}
@keyframes hideModal {
100% {
display: none;
}
}
.menuSearch i:hover {
animation: openMagnifier 3s ease-in-out infinite;
}
@keyframes openMagnifier {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(0deg);
}
}
.liveNewsFeedButton i:hover {
animation: wiggle 0.3s ease-in-out alternate;
}
@keyframes wiggle {
0% {
transform: rotate(-10deg);
}
33% {
transform: rotate(10deg);
}
66% {
transform: rotate(-10deg);
}
100% {
transform: rotate(10deg);
}
}
.primary-navigation > ul > li > ul > li {
background: @surface0;
&:hover {
background: @overlay0 !important;
}
&:first-child {
border-top-left-radius: @big-border-radius;
border-top-right-radius: @big-border-radius;
}
&:last-child {
border-bottom-left-radius: @big-border-radius;
...