Compact NexusMods 2.4.0 by fhaarkas

/* ==UserStyle==
@name           Compact NexusMods
@namespace      nexusmods.com
@version        2.4.0
@description    Some tweaks for Nexus Mods site. Layout is generally a little more compact closer to old site's proportion, contrast is increased and some layouts are modified for better readability and flow. Made specifically for Firefox 103+ but should be compatible with Chrome.
@author         Fhaarkas
==/UserStyle== */

@-moz-document domain("nexusmods.com") {
/*▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ [OPTIONAL] ▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀*/
/*Word of Warning - I'm a designer (not even a web one at that!)not a coder so this 
stylesheet is a little rough. But it works so ¯\_(ツ)_/¯*/


/*Uncomment these to enable*/

/**Remove Media section from homepage**/
/*
@media all {
    .static.gameindex .wrap:nth-of-type(3) {
        display: none;
    }
}
*/

/*Hide extra buttons on mod page*/
ul.modactions li#action-media,
ul.modactions li.dllabel,
ul.modactions li#action-nmm,
ul.modactions li#action-manual {
    display: none;
}
	
}

@-moz-document domain("nexusmods.com") {
/*▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ [WRAPPER] ▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀*/
body {
    text-rendering: auto!important;
}
body::after {
    content: ' ';
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #02070680;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    will-change: transform;
    z-index: -1;
}

/*Remove static wrap padding*/
/*??*/
.static.homeindex .wrap,
.static.gameindex .wrap {
    background: var(--mainbg)!important;
}
.static .wrap {
/*    background: var(--mainbg)!important;*/
    background: rgba(5,5,5,0.5) !important;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
    padding: 0;
}

.static .wrap .col-1-1.static-head,
.static .wrap .featured {
    padding: 0 20px;
    margin: 15px 0 10px 0;
}
.modpage > .wrap {
    background: var(--mainbg);
    background-image: none;
}
.title-left .wrap {
    padding: 0;
}

/*Background for media page*/
.col-1-1 > .container,
.modpage.mediapage .container.comments,
.modpage .col-1-1 {
    background: var(--tabcontent);
}

/*▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ [BUTTONS] ▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀*/

/*Fix small button padding*/
a.btnsmall,
.btn.btnsmall {
    font-size: 11px;
    padding: 5px 8px;
}

/*Fix big button padding*/
a.btn,
.btn {
    padding: 8px 10px;
}

/*Fix active button padding*/
a.btn.inline-flex.btn-active {
    padding: 7px 10px
}


/*▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ [TEXT] ▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀*/
p {
    margin: 0 0 15px 0;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0.2px
}
h1 {
    color: #e6e6e6;
}
h2,h3,h4,h5,h6 {
    color: #e1e1e1;
}
.modpage .wrap, .static .wrap {
	font-weight: 400;
}
/*Change thickness of Nexus homepage body text*/
.home-intro p#opening {
    font-weight: 300;
}

/*▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ [DIRECTORY ADDRESS] ▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀*/
ul#breadcrumb.mod-crumb,
ul#breadcrumb.static-crumb {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 1);
    font-weight: 400;
    font-size: 12px;
}

/*Hide directory to self*/
ul#breadcrumb.mod-crumb li:last-of-type,
ul#breadcrumb.static-crumb li:last-of-type {
    display: none
}

/*▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ [POPUP] ▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀*/

/*Reduce mod name in endorsement reminder*/
#endorsement-reminder-list li .reminderText {
    font-size: 14px;
}

/*▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ [TAB] ▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀*/
ul.modtabs {
    display: flex;
    background: var(--mainbg);
    padding-left: 6px;
}
.static.homeindex ul.modtabs,
.static.gameindex ul.modtabs,
.modpage:not(.title-left) ul.modtabs {
    border-top: 0px solid var(--tabborder);
}
ul.modtabs li a {
    display: flex;
    align-items: center;
    height: 45px;
    font-size: 12px;
    border-right: 1px solid var(--mainbg);
    padding: 0 15px;
    color: #e1e1e1;
}
ul.modtabs li a:hover {
    border-right: 1px solid var(--mainbg)!important;
    background: var(--tabhover);
}
ul.modtabs li a.selected {
    border-right: 1px solid var(--tabborder);
    background: var(--tabcontent);
    font-weight: 500;
}
.tab-label {
    white-space: normal;
}

/*Reduce tab content text size*/
.tabcontent {
    font-size: 14px;
    letter-spacing: 0.2px;
    color: #e1e1e1;
    background: var(--tabcontent);
}

/*Add some padding to loading wheel*/
.tabcontent:before,
.loading-wheel {
    margin: 20px auto;
}
.small-loading-wheel {
    margin: 4px;
}

/*Tab counter*/
span.alert {
    font-size: 11px;
    padding: 2px 4px 2px 4px;
    top: -1px;
    vertical-align: middle;
}

/*▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ [ACCORDION] ▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀*/
.accordion dt {
    color: var(--theme-primary)!important;
    background: var(--headerlight)!important;
    padding: 8px 15px!important;
}
.accordion dt .acc-status {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 7px;
    right: 7px;
    background: none!important;
}
.accordion dt .acc-status .icon-arrow {
    fill: var(--theme-primary);
}
.accordion dt:hover {
    background: #333!important;
}
.accordion dd {
    background: var(--contentdark);
    padding: 15px;
}
#mod_files .accordion dd {
    background: var(--tabletd)!important;
}

/*Put some space between open accordions*/
.accordion dd.clearfix.open {
    margin-bottom: 0.25em!important;
}
.accordion dd h3 {
    font-size: 14px;
}
.accordion dd p {
    font-size: 13px
}

/*▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ [TABLES] ▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀*/
.table th {
    background: var(--headerlight);
    border-right: 1px solid var(--contentlighta)!important;
    border-bottom: 0!important;
}
.table th:last-of-type {
    background: var(--headerlight);
    border-right: 0!important;
    border-bottom: 0!important;
}
.table th:hover {
    background: var(--headerdark)!important;
}
th.table-download,
td.table-download,
th.table-update,
td.table-update {
    width: 110px;
}
.table td {
    background: var(--tabletd)!important;
    border-right: 1px solid var(--contentlighta)!important;
    border-top: 1px solid var(--contentlighta)!important;
    border-bottom: 0!important;
}
.table td:last-of-type {
    border-right: 0!important;
}
#mod-editing-content .table td {
    background: var(--tabletd)!important;
    border-right: 1px solid var(--contentdark)!important;
    border-top: 1px solid var(--contentdark)!important;
    border-bottom: 0!important;
}
#mod-editing-content .table th {
    border-right: 1px solid var(--contentdark)!important;
}

/*▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ [TILES] ▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀*/

/*Fix plus icon which misaligns for some weird reason*/
.icon-plus {
    margin: 0 0 0 1px;
}

/*Fix image button misalignment*/
.delete.inline-flex a,
.edit.inline-flex a {
    height: 15px;
}

/*Set thumbnail to fill container*/
figure.image_figure .fore_div img,
figure.image_figure .fore_div_mods img,
.fore_div_mods img {
    height: 100%;
    width: 100%;
    display: flex;
    object-fit: cover;
    flex: 1;
    overflow: hidden;
}

/*Give tiles more contrast*/
ul.tiles.tile-list li.mod-tile .mod-tile-right,
ul.tiles li .tile-desc {
    /*background: var(--tilebg);*/
    background: linear-gradient(to bottom, rgba(39, 39, 39, 0) 0, rgba(39, 39, 39, 1) 100%)
}

ul.tiles li .tile-data,
ul.tiles li a.mod-image {
    background: var(--tilefooter);
}

/*Reduce height of text fade off*/
ul.tiles li .tile-desc .fadeoff {
    height: 20px;
    background: -webkit-linear-gradient(top, rgba(39, 39, 39, 0) 0, rgba(39, 39, 39, 1) 100%);
    background: linear-gradient(to bottom, rgba(39, 39, 39, 0) 0, rgba(39, 39, 39, 1) 100%);
}

/*Title font size*/
ul.tiles li .tile-desc h3 a {
    font-size: 14px;
}

/*Tile description*/
ul.tiles li .tile-desc p {
    font-size: 12px;
    color: #aaa
}

/*Change hovered tile overlay to white*/
ul.tiles li .view-content {
    background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 100%);
    background: linear-gradient(to top, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.1) 100%);
}

/*Tweak hovered 'VIEW' button slightly*/
ul.tiles li .view-label {
    /*padding: 5px 8px;
    background: none!important;
    top: 45%;
    font-weight: 300!important;
    font-size: 10px;*/
    display: none;
}

/*News tag position*/
ul.tiles li.article-tile .single-image a.post-category {
    position: absolute;
    top: 0;
    left: 0;
}

/*Tile expando border*/
ul.tiles li .btnexpand ul li {
    border-top: 1px solid #ffffff30!important;
}

/*▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ [FORMS] ▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀*/

/*Option sections*/
.form-section-content {
    background: var(--contentdark);
    border-bottom: 1px solid var(--contentlighta);
}
.form-section-content .col-1-1 {
    background: transparent;
}
.form-section header {
    background: var(--headerlight);
}

/*Text field text color*/
input.form-field {
    color: #4e4e4e;
}

/*I don't remember what this does*/
select.form-field {
    color: #4e4e4e;
}

/*Add white border around dropdown items*/
.select2-dropdown,
.select2-dropdown--below {
    border: 1px solid #fff
}

/*Drop box*/
ul.tile-upload li .tile-image,
.readme-canvas,
.canvas {
    background: var(--imagebg);
}

/*▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ [ARROW LIST] ▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀*/

/*Used in activity tracker and mod manager*/

/*> List*/
ul.arrowlist li {
    line-height: 1.5;
    font-size: 12px;
    font-weight: 400
}

/*▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄ [ACTIVITY TRACKERS] ▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀▄▀*/
ul.activity > li {
    margin: 0 0 5px 0;
}

/*Remove side bar*/
.activity-point {
    display: none;
}
.activity-desc {
    padding: 0 0 10px 0;
    background: var(--tabletd);
}

/*Set the date as header*/
.activity-desc .activity-date {
    padding: 6px 10px...