www.albumoftheyear.org by Striikerr

/* ==UserStyle==
@name         www.albumoftheyear.org
@version      20230509.07.06
@namespace    userstyles.world/user/Striikerr
@description  It just makes the website W I D E R on album pages and aligns some stuff to make certain things a little bit more readable. also does some of the changes on this https://discord.com/channels/375410408451997698/1105146278326849697 idea request.
@author       Striikerr
@license      No License
==/UserStyle== */

@-moz-document domain("www.albumoftheyear.org") {
html,
body {
 font-family:open sans,sans-serif;
 font-size:13px;
 width:100%;
 margin:0;
 padding:0;
 box-sizing:border-box;
 -webkit-text-size-adjust:100%
}
body {
 background-color:#f7f7f7
}
h1,
h2,
h3 {
 margin:0;
 padding:0
}
h2,
h3 {
 font-weight:400
}
textarea {
 font-family:open sans,sans-serif
}
#graybg {
 text-align:left
}
#centerContent {
 max-width:1920px;
 margin:auto;
 text-align:center;
 padding:0;
 background-color:#fff
}
.header #content,
#nav #content {
 max-width:1920px;
 margin:auto;
 padding:0 20px;
 box-sizing:border-box
}
a {
 text-decoration:none;
 color:#404040
}
a:visited {
 color:#404040
}
a:hover {
 text-decoration:underline
}
a.gray {
 text-decoration:none;
 color:gray
}
a.gray:visited {
 color:gray
}
a.gray:hover {
 text-decoration:underline;
 color:gray
}
.gray {
 color:gray
}
img.blur {
 filter:blur(8px)
}
img.blurLarge {
 filter:blur(12px)
}
.overlay {
 display:none;
 height:100%;
 width:100%;
 background-color:rgba(255,255,255,.6);
 position:fixed;
 z-index:99999999999;
 top:0
}
.overlay .content {
 display:flex;
 width:70%;
 background-color:#f5f5f5;
 margin:0 auto;
 box-shadow:0 0 20px 3px rgba(0,0,0,.22);
 position:relative;
 top:50%;
 -webkit-transform:translateY(-50%);
 transform:translateY(-50%);
 overflow:hidden;
 padding:25px;
 max-height:70%;
 max-width:800px;
 flex-direction:column;
 border-radius:12px
}
.overlay .content.overflow {
 overflow:visible
}
.overlay .content .inner {
 overflow-y:auto;
 width:100%
}
.inner::-webkit-scrollbar {
 display:none
}
.overlay .content.flex {
 display:flex;
 flex-direction:column
}
.overlay .content .close {
 position:fixed;
 top:5px;
 right:10px;
 font-size:2em
}
.overlay .heading {
 font-size:1.5em;
 font-weight:700;
 margin-bottom:10px
}
.overlay .subHeading {
 font-size:1.1em;
 text-transform:uppercase;
 margin-bottom:5px;
 color:#222
}
.overlay .columns {
 column-count:4;
 column-gap:5px
}
.overlay .columns div {
 padding:3px 0
}
.header #content {
 height:44px;
 overflow:hidden
}
.header {
 padding:15px 0;
 background-color:#fff;
 overflow:hidden;
 height:44px
}
.logoHead {
 display:inline-block;
 vertical-align:middle;
 padding:7px 0
}
.siteLogo {
 display:block;
 height:30px;
 width:84px;
 background-image:url(https://cdn.albumoftheyear.org/images/title-2015.png);
 background-size:100% auto;
 background-repeat:no-repeat;
 background-position:center
}
.logoHead img {
 height:30px;
 position:relative;
 top:50%;
 transform:translateY(-50%)
}
.searchContainer {
 float:right;
 margin:1px 0 0 25px;
 border-radius:9999px;
 vertical-align:middle;
 background-color:#f1f3f5;
 width:315px;
 position:relative
}
.searchBox {
 display:inline-block;
 color:#323232;
 width:100%;
 padding:12px 35px 12px 24px;
 font-size:1em;
 border:none;
 text-transform:lowercase;
 border-radius:9999px;
 background-color:#f1f3f5;
 font-family:open sans,sans-serif;
 box-sizing:border-box
}
.largeSearch {
 margin:25px auto;
 width:50%;
 position:relative;
 border-radius:8px;
 background-color:#f1f3f5
}
.largeSearch input {
 width:100%;
 padding:12px 32px 12px 12px;
 border:none;
 border-radius:8px;
 box-sizing:border-box;
 background-color:#f1f3f5
}
.largeSearch .searchImage {
 top:8px;
 right:12px;
 padding:0
}
input.searchBox:focus,
.largeSearch input {
 outline-width:0
}
#searchSuggestions {
 position:absolute;
 top:0;
 right:0;
 z-index:999999999999999
}
#findAlbums {
 position:absolute;
 max-height:300px;
 overflow-y:auto;
 margin-top:-15px
}
#searchSuggestions .ui-autocomplete,
#findAlbums .ui-autocomplete {
 border:1px solid #efefef
}
#searchSuggestions .ui-autocomplete ul,
#searchSuggestions .ui-autocomplete li,
#findAlbums .ui-autocomplete li {
 font-size:11px
}
#searchSuggestions .ui-autocomplete li a,
#findAlbums .ui-autocomplete li a {
 color:#323232
}
#searchSuggestions .ui-autocomplete,
#findAlbums .ui-autocomplete {
 max-height:none
}
#searchSuggestions .resultRow,
#findAlbums .resultRow {
 padding:3px 0
}
#searchSuggestions .resultRow img,
#findAlbums .resultRow img {
 width:50px;
 float:left;
 margin-right:5px
}
#searchSuggestions .resultRow div,
#findAlbums .resultRow div {
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis
}
#searchSuggestions .resultRow .year,
#findAlbums .resultRow .year {
 color:gray
}
#searchSuggestions .resultRow:after,
#findAlbums .resultRow:after {
 content:"";
 display:table;
 clear:both
}
.searchImage {
 font-size:1.1em;
 position:absolute;
 right:0;
 top:10px;
 padding:0 24px 0 0
}
.facebookHead,
.twitterHead,
.instagramHead {
 margin-right:6px;
 font-size:24px;
 color:#323232;
 display:inline-block;
 float:right
}
.facebookHead:hover {
 color:#3b5998
}
.twitterHead:hover {
 color:#1da1f2
}
.instagramHead:hover {
 color:#d92e7d
}
.headerYearEnd {
 text-align:center;
 margin:20px auto;
 padding:0;
 background-color:#f7f7f7;
 color:#393939;
 font-family:roboto,sans-serif;
 max-width:1920px;
 box-sizing:border-box;
 box-shadow:0 0 20px 3px rgba(0,0,0,.22)
}
.headerYearEnd .heading {
 letter-spacing:.1em;
 margin:0 0 1px;
 background-color:#8bf0ba;
 padding:5px 10px;
 font-size:12px;
 text-align:left;
 box-sizing:border-box
}
.headerYearEnd .heading span {
 color:#fa625f
}
.headerYearEnd .link {
 width:25%;
 border-right:2px solid #f7f7f7;
 display:inline-block;
 background-color:#8bf0ba;
 text-transform:uppercase;
 font-size:12px;
 padding:10px 0;
 vertical-align:top;
 box-sizing:border-box;
 color:#393939;
 letter-spacing:.1em
}
.headerYearEnd .link.last {
 border-right:none
}
.headerYearEnd a:hover .link {
 color:#fa625f
}
.donateHeader {
 background-color:#85ce73;
 text-align:center;
 padding:3px 0;
 text-transform:uppercase;
 font-weight:700
}
.donateHeader a,
.donateHeader a:visited {
 color:#000
}
.headerAd {
 display:block;
 margin:20px auto;
 text-align:center;
 min-height:90px
}
.nav {
 text-align:center;
 height:36px;
 line-height:36px;
 background-color:#323232;
 font-family:roboto,sans-serif;
 font-size:0
}
.navBlock {
 display:inline-block;
 padding:0 20px;
 font-size:12px;
 color:#222;
 line-height:36px;
 height:36px
}
.navBlock.signIn {
 background-color:gray
}
.navBlock.banned {
 background-color:#d76666
}
.navBlock.profile {
 text-transform:none;
 position:relative;
 background-color:gray;
 padding:0 20px 0 0
}
.navBlock.profileMobile {
 display:none
}
.navBlock a,
.navBlock a:visited {
 display:inline-block;
 width:100%;
 height:100%;
 text-decoration:none;
 color:#fff
}
.navBlock a:hover {
 color:silver
}
.navBlock .profilePic {
 display:inline-block;
 top:4px;
 position:absolute;
 padding-left:20px
}
.navBlock .profilePic img {
 border-radius:50%;
 width:26px;
 display:block
}
.navBlock .userName {
 display:inline-block;
 padding-left:52px
}
.navBlock .userName a {
 display:inline
}
.navBlock .userName span {
 vertical-align:middle
}
.navBlock .accountLinks {
 background-color:#323232;
 position:absolute;
 text-align:left;
 padding:5px 0;
 line-height:normal;
 display:none;
 width:155px;
 z-index:9999
}
.navBlock .accountLinks div {
 text-transform:capitalize;
 font-weight:400
}
.navBlock .accountLinks div:hover {
 background-color:gray
}
.navBlock .accountLinks div a,
.navBlock .accountLinks div a:visited {
 color:#fff;
 height:100%;
 width:100%;
 display:block;
 padding:8px 15px;
 box-sizing:border-box
}
.navBlock .accountLinks div a:hover {
 color:#fff
}
.navBlock .accountLinks i {
 width:20px
}
.navButton,
.mobileProfile {
 display:none
}
.navSocialMobile {
 display:none
}
.profileDropDown {
 cursor:pointer
}
.adSpacer {
 height:15px
}
.fullWidth {
 background-color:#fff;
 padding:20px 39px;
 text-align:left
}
.flexContainer {
 table-layout:fixed;
 display:table;
 width:100%
}
.wideLeft {
 text-align:left;
 padding:20px 30px;
 max-width:1096px;
 min-width:680px;
 display:table-cell;
 position:relative;
 vertical-align:top;
 width:64%;
 background-color:#fff;
 box-sizing:border-box
}
.wideLeft.alignTop {
 padding:0 30px 20px
}
.rightContent {
 display:table-cell;
 position:relative;
 vertical-align:top;
 width:645px;
 text-align:left;
 background-color:#eee;
 padding:15px 0;
 box-sizing:border-box
}
.rightBox {
 background-color:#fff;
 padding:10px;
 width:612px;
 margin:0 auto 20px;
 box-sizing:border-box
}
.rightBox.noPadding {
 padding:0
}
.rightBox .row {
 margin-bottom:12px;
 padding-bottom:12px;
 border-bottom:1px solid #e2e2e2
}
.rightBox .row.small {
 margin-bottom:5px;
 padding-bottom:5px;
 font-size:11px
}
.rightBox .row.last {
 margin-bottom:0;
 border-bottom:none
}
.rightBox .moreButton {
 text-align:center;
 text-transform:uppercase;
 border:1px solid #ccc;
 font-size:11px;
 padding:9px 0;
 color:#888;
 display:block
}
.rightBox .moreButton:hover {
 background-color:#ccc;
 color:#fff
}
.rightBox.donorBanner,
body.dark .rightBox.donorBanner {
 background-color:#729f98;
 color:#f0eceb;
 display:flex;
 align-items:center;
 border:1px solid #f0eceb;
 font-size:12px
}
.rightBox.donorBanner:hover {
 border-color:gray
}
.rightBox.donorBanner .fal {
 padding:0 12px 0 0;
 font-size:64px
}
.rightBox.donorBanner span {
 font-weight:700;
 font-size:16px
}
.listRow {
 margin-bottom:15px;
 padding-bottom:15px;
 border-bottom:1px solid #e2e2e2
}
.listRow.compact {
 margin-bottom:10px;
 padding-bottom:10px
}
.listRow.users .profilePic {
 float:left;
 margin-right:15px;
 width:50px
}
.listRow.users.compact .profilePic {
 width:30px;
 margin-right:10px
}
.listRow.users .profilePic img {
 width:100%;
 border-radius:50%;
 display:block
}
.listRow.users .userName {
 font-size:14px;
 font-weight...