Flat & modern AlbumOfTheYear.org
Reimagined AOTY by woidzero
Details
Authorwoidzero
LicenseNo License
Categoryalbumoftheyear
Created
Updated
Size70 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
not finished and have some bugs, but main pages finished and looking good.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Reimagined AOTY
@namespace woidzero/ReimaginedAOTY
@version 1.0.0
@description Flat & modern AlbumOfTheYear.org
@author woidzero
@preprocessor stylus
@var checkbox hideFooterButtons "Hide Monthly Playlist button" 1
@var checkbox hideYearEndBanner "Hide Year End banner" 1
@var checkbox hideAdvertisements "Hide Advertisements" 1
==/UserStyle== */
@-moz-document domain("www.albumoftheyear.org") {
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
*:not(i) {
font-family: "Inter", sans-serif !important;
font-optical-sizing: auto !important;
font-style: normal !important;
font-weight: normal !important;
}
:root {
--background: #090909;
--box-0: #0e0e0e;
--box-1: #151515;
--box-2: #151515;
--box-3: #1a1a1a;
--box-4: #2a2a2a;
--box-5: #3d3d3d;
--box-6: #4f4f4f;
--box-7: #666;
--box-info: #2292d229;
--box-info-border: #4794bb;
--box-error: #d2222229;
--box-error-border: #bb4747;
--box-success: #22d23129;
--box-success-border: #47bb4b;
--border-radius-0: 4px;
--border-radius-1: 8px;
--border-radius-2: 16px;
--text-header: #fff;
--text-primary: #eee;
--text-secondary: #848484;
--text-subtitle: #a8a8a8;
--button-1: #1c1c1c;
--button-active: #fff;
--button-hover: #373737;
--button-text: #151515;
--button-border-radius: 12px;
--button-2: #2b2b2b;
--button-2-hover: #444;
--button-2-text: #eee;
--button-2-border: #4f4f4f;
--button-2-border-radius: 8px;
--musthear-user: #ff7045e6;
--musthear-both: #ab45ffe6;
--musthear-critic: #45fff9e6;
--spotify-brand: #1db954;
--apple-music-brand: #fa2d48;
--bandcamp-brand: #1DA0C3;
--amazon-brand: #FF9900;
--icon-success: #85CE73;
--icon-liked: #fa6c8d;
}
html {
scrollbar-color: var(--scrollbar-track) var(--scrollbar-thumb) !important;
scrollbar-width: thin !important;
}
*, *::after, *::before {
box-sizing: border-box !important;
transition: .3s color ease-in-out, .3s background-color ease-in-out, .3s border ease-in-out, .3s display ease-in-out !important;
}
.wideLeft {
width: 100% !important;
max-width: 100% !important;
}
.footerContent {
max-width: 100% !important;
}
.fullWidth, .rightBox, .adTagTwo, .adTagThree, .facetColumn, .dotDropMenu, .headerYearEnd, table.userStatsTable tr:nth-child(2n), #listEdit tr.focus, .header, #centerContent, body.dark {
background-color: var(--background) !important;
}
#centerContent, .flexContainer {
max-width: 100% !important;
justify-content: space-between !important;
> .clear {
display: none !important;
}
}
.nav, .rightContent, table.discussion th, .signInComments, .signInReview, .viewMoreDiscussion, .albumCriticScoreBox, .albumUserScoreBox, .albumButton, .albumButton.vinyl, .facetTitle, .artistCriticScoreBox, .artistUserScoreBox, .userReviewScoreBox, .prevAlbumReview, .nextAlbumReview, .loginContainer, .albumListScoreContainer, .feedUserHead, .listItem:hover, .yourRatingContainer, .commentBoxContainer, .socialConnect, .albumRankNav.prev, .albumRankNav.next, .dotDropMenu .row:hover, .grayBox, .footer, .summaryPointsMisc, .summaryRecentLists, .otherLists, .donorList tr:nth-child(2n), table.listRows tr:nth-child(2n), .commentButtonDesktop, .menuDropSelected ul li, .menuDropSelected ul, .menuDropSelected ul li.current:hover, .ui-autocomplete, .correctionResponse, .submitMediaBox, .songScoreBox, .adInArticle, .signInNotice {
background-color: var(--box-1) !important;
}
a {
text-decoration: none !important;
}
body {
padding: 0 !important;
}
.albumBlock {
padding: 0 !important;
img {
border: 0 !important;
}
}
.fullWidth .userListRow {
min-height: 145px !important;
}
*:not( ~ .anticipatedHome) .albumBlock {
width: 16.66666666% !important;
}
#header, #nav {
display: flex !important;
width: fit-content !important;
height: 100px !important;
align-items: center !important;
background-color: transparent !important;
margin: 0 !important;
padding: 0 !important;
}
#header {
float: left !important;
#content {
margin: 0 !important;
padding: 0 !important;
}
}
#nav {
float: right !important;
#content {
padding: 0 !important;
margin: 0 !important;
align-self: center !important;
display: inline-flex !important;
.navBlock.profile {
padding-right: 0 !important;
}
.navBlock {
display: inline-flex !important;
align-items: center !important;
justify-items: center !important;
font-size: 15px !important;
padding: 0 10px !important;
a {
color: var(--text-subtitle) !important;
}
&:hover a {
color: var(--text-primary) !important;
}
}
.profile {
background-color: transparent !important;
display: inline-flex !important;
#accountLinks {
position: absolute !important;
top: 45px !important;
right: 0px !important;
width: max-content !important;
background-color: var(--box-0) !important;
border-radius: var(--border-radius-2) !important;
border: 1px solid var(--box-1) !important;
i {
margin-right: 5px !important;
}
a, i {
color: var(--text-subtitle) !important;
}
div:hover {
background: transparent !important;
a, i {
color: var(--text-primary) !important;
}
}
}
.profilePic {
display: inline-flex !important;
align-self: center !important;
top: 0 !important;
padding: 0 !important;
position: relative !important;
margin-right: 0px !important;
margin-top: 3px !important;
}
.userName {
display: none !important;
}
}
}
}
.artistHeader,
.facetContent {
background: transparent !important;
}
.mediaList {
margin: 0 !important;
width: 30% !important;
}
.relatedArtists {
background-color: var(--box-1) !important;
padding: 20px !important;
border-radius: var(--border-radius-1) !important;
border: 1px solid var(--box-4) !important;
/* margin-right: 10px !important; */
}
.facetColumn {
background-color: var(--box-1) !important;
padding: 20px !important;
border-radius: var(--border-radius-1) !important;
border: 1px solid var(--box-4) !important;
.facetClear a {
color: var(--text-secondary) !important;
}
.facet, .facetTitle {
padding: 0 !important;
margin-bottom: 10px !important;
}
}
.subHeadline {
border: 0 !important;
font-size: 25px !important;
color: var(--text-header) !important;
}
.artistHeader ~ .filterRow {
border: 0 !important;
display: inline-flex !important;
width: 100% !important;
align-content: center !important;
justify-content: flex-end !important;
padding: 0 !important;
padding-right: 25px !important;
margin-bottom: 10px !important;
.filterButtons {
margin: 0 !important;
margin-left: 5px !important;
}
.toggleSearch, .highlight {
display: none !important;
/* margin: 0 !important;
padding: 0 !important;
width: 30px !important;
height: 30px !important;
border-radius: var(--border-radius-0) !important;
background-color: var(--button-1) !important; */
}
.toggleSearch {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 5px !important;
width: 30px !important;
height: 30px !important;
&:hover {
background-color: var(--button-hover) !important;
}
}
}
.facetContent {
padding: 0 !important;
}
.facetTitle {
text-transform: uppercase !important;
letter-spacing: .9px;
.facetClear {
line-height: 18px;
font-size: .8em !important;
}
}
.largeSearch,
#toggleSearch,
#searchT {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
background: transparent !important;
margin-bottom: 20px !important;
}
#searchIcon,
.searchImage {
position: absolute !important;
top: 7.5px !important;
right: 20px !important;
font-size: 15px !important;
padding: 0 !important;
a, i {
color: var(--text-secondary) !important;
}
}
#searchContainer {
margin-left: 20px !important;
padding: 0 !important;
background: transparent !important;
}
#toggleSearch {
width: 97.3% !important;
}
#searchContentBox,
#searchT,
#genreSearch {
/* width: 100% !important; */
border: 1px solid var(--box-4) !important;
background-color: var(--box-1) !important;
outline: 0 !important;
border-radius: 9999px !important;
padding: 10px !important;
&:focus {
border-color: var(--box-6) !important;
}
&::placeholder {
text-transform: capitalize !important;
color: var(--text-secondary) !important;
}
}
.headline.profile {
font-size: 2.5em !important;
margin: 0 !important;
span {
vertical-align: top !important;
font-weight: 600 !important;
}
}
#centerContent {
padding: 110px 0 0 0 !important;
}
.fullWidth,
.wideLeft {
border-radius: var(--border-radius-1) !important;
background-color: var(--box-0) !important;
border: 1px solid var(--box-1) !important;
}
.fullWidth:has(#profileHead) {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
#profileHead {
display: inline-block;
border-radius: var(--border-radius-1) !important;
background-color: transparent !important;
margin-bottom: 0px !important;
.profileHeadLeft {
display: inline-block !important;
padding: 0 !important;
.profileHeadText {
display: inline-block !important;
margin-left: 20px !important;
width: fit-content !important;
height: 100% !important;
br {
display: none !important;
}
}
}
.profileLocation {
color: var(--text-secondary) !important;
font-weight: 400 !important;
}
.profileHeadRight {
display: block !important;
float: right !im...