Myanimelist - Clean
Myanimelist - Clean by dark-themes
Details
Authordark-themes
LicenseNo License
Categorymyanimelist
Created
Updated
Size275 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
After you install this userstyle, you can configure it from configuration menu in Stylus' popout menu by clicking on the icon on your toolbar.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Myanimelist - Clean
@namespace Dark-Themes
@version 1.0.80
@description Myanimelist - Clean
@author Dark-Themes
@supportURL https://github.com/KanashiiDev/personal-stylesheets/issues
@var color fg_color 'Foreground Color' rgba(21, 30, 46)
@var range fg_slider 'Foreground Color Brightness' [1, 1, 50, 1,'']
@var color t_color 'Text Color' rgba(200, 200, 200)
@var color n_color 'Header Text Color' rgba(182, 182, 182)
@var color link_color 'Link Color' rgba(171,196, 237)
@var checkbox shadow 'Shadow' 1
@var color shadow_color 'Shadow Color' rgb(0,0, 0,.3)
@var range shadow_s 'Shadow Strength' [3, 0, 10, 1,'px']
@var color shadow_t_color 'Text Shadow Color' rgb(0,0, 0,.3)
@var range shadow_t_s 'Text Shadow Strength' [3, 0, 10, 1,'px']
@var range border_radius 'Rounded Corners' [5, 0, 10, 1,'px']
@var text c_font 'Custom Font Url' '' url ''
@var text c_font_name 'Custom Font Family' 'fontFamily'
@var checkbox fullgray 'Dark Mode' 0
@var checkbox custom-bg 'Custom Background Image' 0
@var text bg_image 'Background Image Url' '' url ''
@var range bg_brightness 'Background Image Brightness' [100, 1, 200.0, 1,'%']
@var range bg_saturate 'Background Image Saturation' [100, 1, 300.0, 1,'%']
@var range bg_contrast 'Background Image Contrast' [100, 100, 300.0, 1,'%']
@var range bg_blur 'Background Image Blur' [0, 0, 50, 1,'px']
@var range opacity 'Background Color Opacity' [1, 0.0, 1, 0.01]
@var range blur_slider 'Background Color Blur' [0, 0, 50, 1,'px']
@var checkbox coloredstatus 'Colored Watch/Read Status' 0
@var checkbox removestatlink 'Hide My Statistics Links' 0
@var checkbox mystatsmin 'Change My Statistics Style' 0
@var checkbox mystatsmin2 'Change My Statistics Style 2' 0
@var checkbox rightpanelstyle 'Change Right Widgets Style' 0
@var checkbox seasonalhover 'Show Seasonal Anime Title on Hover' 0
@var checkbox removebc 'Hide Breadcrumb Navigation' 0
@var checkbox vertical_fav 'Vertical Favorites' 0
@var checkbox scroll_synop 'Scrollable Synopsis' 0
@var checkbox remove_synop 'Hide Synopsis' 0
@var checkbox remove_score 'Hide Score' 0
@var checkbox remove_ranking 'Hide Rank Stats' 0
@var checkbox remove_pv 'Hide Promotional Video' 0
@var checkbox remove_ep 'Hide Episode Videos' 0
@var checkbox remove_malxj 'Hide MalxJapan' 0
@var checkbox remove_reviews 'Hide Reviews' 0
@var checkbox remove_edit 'Hide Edit Buttons' 0
@var checkbox removefooter 'Hide Footer' 0
@var checkbox remove_listnot 'Hide Public List Warning' 0
@preprocessor stylus
==/UserStyle== */
@-moz-document regexp("https://myanimelist.net/(?!(animelist|mangalist|ownlist/style/theme)).*"),
regexp("https://fal.myanimelist.net/.*") {
if(c_font !=" url " && c_font_name !="fontFamily") {
@import url('' + c_font);
body,
h1,
h2,
h3,
h4,
h5,
input,
span,
textarea,
input[type=checkbox] + label:before,
footer div,
button.mal-btn,
button.item,
.btn-rect-grey1,
a.mal-btn,
a.button_edit,
a.button_add,
.btn-category,
.h1,
.h2,
.h3,
.h4,
.h5,
.inputtext,
.information .info,
.news-unit,
.news-container,
.text,
.tag,
.content,
.header,
.seasonal-anime,
.genres .genre,
.genre-list,
.ga-click:not(.fas),
.anime-header,
.season td,
.dark-mode .sceditor-container,
.sceditor-container,
.ff-Verdana,
.ff-avenir,
.ff-helvetica,
.dark-mode .page-common li a,
.page-common li a,
.mal-tipmenu a,
.header-right,
.btn-view_more,
.title,
.btn-video-edit-block {
font-family: c_font_name!important;
}
.ga-click:before {
font-family: 'Font Awesome 6 Pro'!important;
}
}
:root {
--fg: fg_color + (fg_slider);
--fg2: fg_color + 10 + (fg_slider);
--fg4: fg_color + 20 + (fg_slider);
--fgo: rgba((fg_color + 12).4) + (fg_slider);
--bg: fg_color - 10 + (fg_slider);
--bgo: rgba((fg_color - 10).0 + opacity) + (fg_slider);
--color-text: (t_color);
--color-nav-text: (n_color);
--color-nav-text-hover: (n_color + 50);
--color-main-text-normal: (t_color);
--color-main-text-light: (t_color - 32);
--color-main-text-op: (t_color + 200);
--color-link: (link_color);
--color-link2: (link_color - 50);
--color-text-hover: (txt_color + 25);
--color-link-hover: (link_color +35);
--shadow-color: shadow_color;
--shadow-strength: shadow_s;
--t-shadow-color: shadow_t_color;
--t-shadow-strength: shadow_t_s;
if(blur_slider > 1) {
--fg: rgba(fg_color + (fg_slider) (opacity) - .15);
--fgo: rgba((fg_color + 5) (opacity) - .1) +(fg_slider);
--fg2: rgba(fg_color + 13 + (fg_slider) (opacity) - .2);
--fg4: rgba(fg_color + 20 + (fg_slider) (opacity))
}
if(n_color==rgba(182, 182, 182, 1)) {
--color-nav-text-hover: (link_color +35);
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
background: 0 0
}
::-webkit-scrollbar-track {
background: #fff0
}
::-webkit-scrollbar-thumb {
background: fg_color + 13 + (fg_slider);
-webkit-border-radius: 10px;
border-radius: 10px
}
::-webkit-scrollbar-corner {
background: #0000
}
if(fullgray) {
--bg: #0b0b0b + (fg_slider) - 20;
--fg: #000 + (fg_slider);
--fg2: #000 + (fg_slider) + 13;
--fg4: #000 + (fg_slider) + 20;
--fgo: rgba(0, 0, 0, .3) + 20 + (fg_slider);
--bgo: rgba(11, 11, 11, opacity) + (fg_slider) - 25;
--color-text: (t_color);
if(blur_slider > 1) {
--fg: rgba((#000 + (fg_slider) - 10) (opacity) - .1);
--fgo: rgba((#000 + (fg_slider) - 5) (opacity) - .1);
--fg2: rgba((#000 + (fg_slider) + 13) (opacity));
--fg4: rgba((#000 + (fg_slider) + 20) (opacity));
}
::-webkit-scrollbar-thumb {
background: #0b0b0b + 20 + (fg_slider);
}
if(fg_slider < 10) {
--bg: #0b0b0b - (fg_slider)
}
}
--border-radius: (border_radius);
--font: #c1c1c1;
--fontselected: #ddd;
--fonthover: #eee;
--cardhover: #000 + (fg_slider) + 15
}
body,
:root {
--color-background: var(--bg)!important;
--color-backgroundo: var(--bgo)!important;
--color-foreground: var(--fg)!important;
--color-foreground2: var(--fg2)!important;
--color-foreground3: var(--fgo)!important;
--color-foreground4: var(--fg4)!important;
--br: var(--border-radius)!important;
background-color: var(--color-background)!important;
}
a,
a i,
#topSearchButon i:before,
li,
button,
#topSearchResultList > div > div,
#advancedSearchResultList > div.list,
.spoiler .button,
.js-replyto-target,
.actions .action-button,
.index .widget-container .widget.friend_list_updates .footer .btn-settings,
.dark-mode .page-common .incrementalSearchResultList .list .image,
.page-common .incrementalSearchResultList .list .image,
.dark-mode .page-common .incrementalSearchResultList .list .info,
.page-common .incrementalSearchResultList .list .info,
#topSearchResultList,
.page-common .incrementalSearchResultList {
-webkit-transition: 0.3s all ease-in-out;
-o-transition: 0.3s all ease-in-out;
transition: 0.3s all ease-in-out;
}
#topSearchResultList > div > div.list {
height: 33px;
padding-top: 13px!important
}
#topSearchResultList > div > div.list.focus {
height: auto
}
#topSearchResultList > div > div.list .on,
#topSearchResultList > div > div.list:hover {
height: 85px
}
.incrementalSearchResultList > div:first-child > .list.separator {
margin-top: 0!important
}
.incrementalSearchResultList .separator {
margin-top: 5px
}
#advancedSearchResultList > .list.separator {
height: 25px!important
}
.incrementalSearchResultList .list.separator {
height: 10px!important;
cursor: auto!important;
margin-top: 15px!important;
}
if(removestatlink || mystatsmin || mystatsmin2) {
.right-column article.widget-container.right .widget.my_statistics.right small a {
display: none
}
}
if(mystatsmin && !mystatsmin2) {
.right-column article.widget-container.right .widget.my_statistics.right table {
width: 100%;
& tbody {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 10px
}
}
}
if(mystatsmin2 && !mystatsmin) {
.right-column article.widget-container.right .widget.my_statistics.right .widget-header {
margin-bottom: 8px;
text-indent: 5px;
}
.right-column article.widget-container.right .widget.my_statistics.right table {
width: 100%;
& tbody {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
}
& tr {
di...