Deep dark theme for Anime-Planet
Anime-Planet - Amoled by xiggi
Details
Authorxiggi
LicenseNo License
Categoryanime-planet
Created
Updated
Size14 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 Anime-Planet - Amoled
@namespace github.com/openstyles/stylus
@version 1.0.0
@description Deep dark theme for Anime-Planet
@author xiggi
==/UserStyle== */
@-moz-document url-prefix("https://www.anime-planet.com/") {
:root {
/** Backgrounds **/
--main-bg: #000;
--second-bg: rgb(12, 12, 12);
--second-bg-rgb: 12, 12, 12;
--third-bg: rgb(31, 31, 31);
--third-bg-hover: rgb(31 31 31 / 80%);;
/** Colors **/
--white: #fff;
--gray: #777;
--orange: #fc5342;
}
html.darkmode {
--site-background: var(--main-bg);
--border-style: 1px solid transparent;
--color-link: var(--orange);;
--color-link--hover: var(--white);
}
.bg-themeColor {
background: var(--second-bg);
}
button, .button {
background-color: var(--second-bg);
box-shadow: none;
color: #ccc;
}
button, .button:hover {
background-color: var(--third-bg);
transition: 0.2s;
}
button.cta, .button.cta {
color: #FFF;
background-color: var(--third-bg);
}
button.cta:hover, .button.cta:hover {
background-color: var(--orange);
transition: 0.2s;
}
.statusBand .increment {
color: #FFF;
background-color: var(--third-bg);
}
.statusBand .increment:hover {
background-color: var(--orange);
transition: 0.2s;
}
.macro_button--secondary {
background-color: var(--second-bg);
}
.macro_button--secondary:hover {
background-color: var(--third-bg);
transition: 0.2s;
}
.macro_button {
background-color: var(--second-bg);
color: var(--orange);
}
.macro_button:hover {
background-color: var(--orange);
transition: 0.2s;
}
#siteHeader {
background: rgb(12 12 12 / 90%);
backdrop-filter: blur(10px) !important;
}
.Login {
background: var(--second-bg);
}
.Login .LoginActions button[data-v-41775e0c] {
background: var(--third-bg);
color: #fff;
}
.Login .LoginActions button[data-v-41775e0c]:hover {
background: var(--color-cta-2);
color: #fff;
transition: 0.2s;
}
#siteNav > ul > li ul, #siteUser .loggedIn ul {
background-color: var(--second-bg);
box-shadow: 1px 1px 10px var(--second-bg);
}
#siteNav > ul > li ul a, #siteUser .loggedIn ul a:hover {
color: var(--orange);
background: var(--third-bg;);
transition: 0.2s;
}
#siteNav > ul > li:hover a:hover, #siteUser:hover .loggedIn a:hover {
color: var(--orange);
background: var(--third-bg;);
transition: 0.2s;
}
.card .crop img:hover, .mainEntry img:hover, .tableAvatar img:hover {
opacity: 50%;
transition: 0.2s;
}
.cta {
background: var(--second-bg);
}
.subNav {
background: var(--second-bg);
}
.subNav li:hover {
background: var(--third-bg);
transition: 0.2s;
}
.subNav li.selected {
background: var(--orange);
font-weight: 600;
}
.profLoa {
background: var(--second-bg);
}
.pure-table.striped tr:nth-child(2n) td {
background-color: var(--second-bg);
}
.rounded-card {
background-color: var(--second-bg);
}
.CharacterCard__actions--old {
border: 1px solid transparent;
}
.CharacterCard__action--old:nth-child(2) {
border-left: 1px solid transparent;
}
.CharacterCard__action--old.CharacterCard__action--bolded[data-action="like"] {
color: #d4304c;
background-color:#4c151e;
}
.tabs .tab {
background: var(--second-bg);
border: 1px solid transparent;
}
.tabs ul.tabsUl li[class*="active"] a {
cursor: default !important;
color: var(--color-text);
font-weight: bold;
background: var(--second-bg);
border-color: transparent;
}
.tabs ul.tabsUl li a:hover {
background: var(--third-bg);
color: var(--orange);
transition: 0.2s;
}
.statusArea {
text-align: center;
font-weight: 600;
}
.status0:before, .status1:before, .status2:before, .status3:before, .status4:before, .status5:before, .status6:before{
margin-right: 5px;
}
.tags li {
background: var(--second-bg);
}
#siteFooter {
background: var(--second-bg);
display: none;
}
#siteFooter > * {
background: var(--second-bg);
}
#siteFooter nav a {
color: var(--orange)
}
#siteFooter nav a:hover {
color: var(--white)
transition: 0.2s;
}
#siteFooter a {
color: var(--orange)
}
#siteFooter a:hover {
color: var(--white)
transition: 0.2s;
}
#siteFooter p {
color: var(--gray)
}
#siteFooter .lightswitch_button {
border-radius: 5px;
background-color:var(--main-bg);
color: var(--orange);
}
#siteFooter .lightswitch_button:hover {
background-color: var(--third-bg);
transition: 0.2s;
color: var(--white);
}
#siteFooter .lightswitch_button span {
color:var(--orange);
border-radius: 5px;;
background-color: var(--second-bg);
transition: transform 0.3s;
margin-left: 5px;
}
.footer-social ul li a {
background-color: var(--third-bg);
border-radius: 5px;
}
.footer-social ul li a:hover {
background-color: var(--orange);
transition: 0.2s;
}
#siteFooter .footer-copyright {
font-size: 13px;
text-align: center;
}
.quickFilter a {
color: var(--gray);
}
.quickFilter a:hover {
color: var(--white);
background: var(--gray-bg)
transition: 0.2s;
}
.ui-dialog .ui-dialog-content {
background-color: var(--second-bg);
}
.ui-dialog {
background-color: var(--third-bg);
border: 1px solid transparent;
border-radius: 5px;
box-shadow: 1px 1px 20px var(--third-bg);
}
.ListManagementTabs .ListManagementTabs__navigation .ListManagementTabs__navigation__item .ListManagementTabs__link {
background-color: var(--second-bg);
}
.pagination .selected, .alpha .selected {
background-color: var(--third-bg);
font-family: 'Lato-Black';
color: var(--orange) !important;
}
.pagination .selected a, .alpha .selected a {
color: var(--white) !important;
}
.pagination a, .alpha a {
font-weight: 600;
}
.pagination .selected:hover, .alpha .selected:hover {
background-color: var(--orange) !important;
color: var(--white) !important;
transition: 0.2s;
}
.pagination li {
margin: 0;
padding: 15px;
color: #ccc;
}
.pagination a, .alpha a {
color: inherit;
}
.pagination li:hover, .alpha li:hover {
color: #fff;
}
.AdvancedFilter .tab {
margin-top: -2px;
border: 2px solid transparent !important;
background: var(--second-bg);
}
.pillFilters {
background-color: var(--second-bg);
border: 2px solid transparent;
}
.pillBottle .pill {
background-color: var(--second-bg);
color: var(--color-text);
border: 1px solid var(--third-bg);
}
.pillBottle .pill:hover {
background: var(--third-bg-hover);
transition: 0.2s;
}
.ListManagementTabs .ListManagementTabs__navigation .ListManagementTabs__navigation__item {
border-bottom: 3px solid var(--third-bg);
margin-bottom: -1px;
padding-bottom: 1px;
}
a#ui-id-31:hover {
background: var(--third-bg);
color: var(--orange);
transition: 0.2s;
}
.ListManagementTabs .ListManagementTabs__navigation .ListManagementTabs__navigation__item.ui-tabs-active .ListManagementTabs__link {
color: var(--orange);
}
select {
color: var(--white);
background-color: var(--third-bg);
box-shadow: none;
}
.touchRateTable td {
border: 1px solid var(--third-bg) !important;
}
.touchRateTable td.starrating.selected {
border: var(--border-style) !important;
border-radius: 5px;
background-color: var(--third-bg);
}
.subNav a {
color: var(--color-theme-m);
}
.status0:before, .status1:before, .status2:before, .status3:before, .status4:before, .status5:before, .status6:before {
border-radius: 1px;
}
.CharacterCard__action--old:hover, .heartSwitch a:hover {
background: var(--orange);
color: var(--white);
}
.RecentDiscussion__discussion {
background-color: var(--third-bg);
}
.RecentDiscussion__discussion::after {
background: var(--third-bg);
}
.RecentDiscussion__discussion::before {
color: var(--white);
}
.RecentDiscussion__date, .RecentDiscussion__time {
color: var(--white);
}
.statusArea {
background: var(--second-bg);
}
.tags li a:hover {
color: var(--white);
}
a#advanced_filter_tags {
color: var(--orange);
}
a#advanced_filter_tags:hover {
color: var(--white);
transition: 0.2s;
}
.statusArea {
padding: 10px 10px;
}
.statusArea .ttRating {
color: #ebc202;
}
span.darkModeIcon:hover {
color: var(--orange);
transition: 0.2s;
}
.tableCharInfo a:hover {
color: var(--white);
transition: 0.2s;
}
.rounded-card:hover {
background: var(--third-bg);
transition: 0.2s;
}
.authorDate a:hover {
color: var(--white);
transition: 0.2s;
}
.cta .rated:hover, .horizontal-cta > a:first-child:hover, .recoCta > span, .horizontal-cta > a:hover {
color: var(--orange);
transition: 0.2s;
}
.cta .reviewTypes {
color: var(--white);
}
.pure-form select {
border: 1px solid transparent;
background-color: var(--third-bg);
}
.pure-form select, ....