Soothing pastel theme for gogoanime/anitaku + its disqus embed with configurable flavor and accent color.
gogoanime/anitaku + disqus Catppuccin by yavko
Details
Authoryavko
LicenseAGPL-3.0-or-later
Categoryanitaku.pe
Created
Updated
Size49 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
If you have issue dm me on discord @yavko, I'm too lazy to set up a repo/issue tracker for this.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name gogoanime/anitaku + disqus Catppuccin
@namespace yavko.com
@version 0.1.0
@description Soothing pastel theme for gogoanime
@author yavko <yavornkolev@gmail.com> (https://github.com/yavko)
@license AGPL-3.0-or-later
@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"]
==/UserStyle== */
/* helpers */
.link() {
color: @blue;
&:hover,
&:active {
color: @text;
}
}
@-moz-document url-prefix("https://disqus.com/embed") {
@media (prefers-color-scheme: light) {
:root {
#catppuccin(@lightFlavor, @accentColor);
}
html {
background: @catppuccin[@@lightFlavor][@crust];
--publisher-color: @catppuccin[@@lightFlavor][@@accentColor] !important;
--publisher-color-safe: @catppuccin[@@lightFlavor][@@accentColor] !important;
}
}
@media (prefers-color-scheme: dark) {
:root {
#catppuccin(@darkFlavor, @accentColor);
}
html {
background: @catppuccin[@@darkFlavor][@crust];
--publisher-color: @catppuccin[@@darkFlavor][@@accentColor] !important;
--publisher-color-safe: @catppuccin[@@darkFlavor][@@accentColor] !important;
}
}
#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];
color-scheme: if(@lookup =latte, light, dark);
::selection {
background-color: fade(@accent-color, 30%);
}
input,
textarea {
&::placeholder {
color: @subtext0 !important;
}
}
body {
color: @text;
}
.dark .post-body .comment__header .edit-time-left,
.dark .post-body .comment__header .has-edit,
.dark .post-body .comment__header .parent-link,
.dark .post-body .comment__header .state-byline,
.dark .post-body .comment__header .time-ago,
.dark .post-body .post-body-inner .edit-time-left,
.dark .post-body .post-body-inner .has-edit,
.dark .post-body .post-body-inner .parent-link,
.dark .post-body .post-body-inner .state-byline,
.dark .post-body .post-body-inner .time-ago,
.dark .post-body .comment__header .edit-time-left,
.dark .post-body .comment__header .has-edit,
.dark .post-body .comment__header .parent-link,
.dark .post-body .comment__header .state-byline,
.dark .post-body .comment__header .time-ago,
.dark .post-body .post-body-inner .edit-time-left,
.dark .post-body .post-body-inner .has-edit,
.dark .post-body .post-body-inner .parent-link,
.dark .post-body .post-body-inner .state-byline,
.dark .post-body .post-body-inner .time-ago {
color: @subtext1;
}
.nav-primary--refresh .comment-count {
color: @text;
}
.post-menu .dropdown-toggle-wrapper .username--refresh,
.user-menu .dropdown-toggle-wrapper .username--refresh {
color: @text;
}
.caret--refresh {
border-top-color: @text;
opacity: 1;
}
h6 {
color: @subtext0;
}
.light-anchor .avatar .user--refresh {
color: @base !important;
}
.dark .post-votes .vote-up .control {
background-color: @subtext0 !important;
}
.icon-cog,
.icon-export,
.label,
.favorite-icon--refresh-v2,
.sort-menu-refresh__item:not(.selected) {
color: @subtext0;
}
.unread .notification-container .notification-icon {
color: @red;
}
.unread .notification-container:hover .notification-icon {
color: @text;
}
.dropdown-menu--refresh {
background-color: @crust;
border-color: @surface1;
border-width: 2px;
a {
color: @subtext1;
}
}
._container_ylcfx_1 {
background-color: @base;
border-color: @surface0;
}
._button_1559b_1,
._active_1559b_1,
._button_1wqlf_1 {
color: @subtext1;
}
._editor-expanded_ylcfx_13,
._editor_ylcfx_13 {
color: @text;
}
._placeholder_s9avi_1 {
color: @subtext1;
}
p.privacy-info {
color: @subtext0;
a {
.link();
}
}
.tooltip__footer-v2 .hovercard-actions-container .follow-btn * {
color: @accent-color !important;
}
.light-anchor .profile-card--refresh .tooltip-v2 {
background-color: @surface0;
color: @text;
}
.light-anchor .tooltip__footer-v2 .hovercard-actions-container,
.light-anchor .tooltip__footer-v2 {
background: none;
}
.light-anchor .tooltip__footer-v2 .hovercard-actions-container .follow-btn {
background: none !important;
}
.tooltip {
background-color: @surface0;
border-width: 1px;
}
.voters-outer .voters .user .username--refresh {
color: @text;
&:hover {
color: @subtext0;
}
}
.dark .post-content .post-menu .collapse a,
.dark .post-content .post-menu .expand a {
color: @subtext1 !important;
opacity: 1;
}
.dark .disqus-footer__wrapper--refresh {
border-color: @surface0;
}
.dark .post-content .post-menu .dropdown-toggle {
color: @subtext0 !important;
}
.input--text {
background-color: @base;
border-color: @surface0;
border-width: 1.5px;
color: @text;
:placeholder-shown {
color: @subtext0;
}
}
.btn {
background-color: @subtext0;
color: @base;
&:not(:disabled):hover {
background-color: @text;
}
}
.light-anchor .load-more-refresh--v2 .load-more-refresh__button {
.btn();
border: none;
}
div.icon-wrapper {
background-color: @text;
& i when (@lookup =latte) {
filter: brightness(0) saturate(100%) invert(98%) sepia(33%) saturate(345%) hue-rotate(176deg) brightness(98%) contrast(95%);
}
& i when (@lookup =frappe) {
filter: brightness(0) saturate(100%) invert(20%) sepia(26%) saturate(491%) hue-rotate(191deg) brightness(92%) contrast(96%);
}
& i when (@lookup =macchiato) {
filter: brightness(0) saturate(100%) invert(12%) sepia(32%) saturate(808%) hue-rotate(193deg) brightness(88%) contrast(88%);
}
& i when (@lookup =mocha) {
filter: brightness(0) saturate(100%) invert(11%) sepia(33%) saturate(592%) hue-rotate(200deg) brightness(89%) contrast(94%);
}
}
.disqus-footer__logo .disqus-footer__link {
& when (@lookup =latte) {
filter: brightness(0) saturate(100%) invert(32%) sepia(4%) saturate(3051%) hue-rotate(197deg) brightness(92%) contrast(90%);
}
& when (@lookup =frappe) {
filter: brightness(0) saturate(100%) invert(83%) sepia(9%) saturate(827%) hue-rotate(192deg) brightness(100%) contrast(93%);
}
& when (@lookup =macchiato) {
filter: brightness(0) saturate(100%) invert(83%) sepia(17%) saturate(482%) hue-rotate(193deg) brightness(99%) contrast(95%);
}
& when (@lookup =mocha) {
filter: brightness(0) saturate(100%) invert(82%) sepia(49%) saturate(282%) hue-rotate(190deg) brightness(97%) contrast(96%);
}
}
}
}
@-moz-document regexp("https://anitaku\\..*") {
@media (prefers-color-scheme: light) {
:root {
#catppuccin(@lightFlavor, @accentColor);
}
html {
background: @catppuccin[@@lightFlavor][@base];
...