Jump to content

New UI - Accessibility feedback


perchik71

Recommended Posts

I haven't spent enough time using the new layout to form an opinion on it overall, but I really, really dislike that I cannot type into the search bar without the entire webpage being obscured. I'm sure the new quick search has tons of improvements for browsing mods, but please consider that people often reference content on the webpage they are currently on when typing into the search bar. Moreover, the / key can no longer be used to move focus the search bar at the top of the page and is now merely a shortcut to the search feature. This is an accessibility downgrade because moving the focus to a predictable spot at the top of the webpage is the expected behavior in my experience. If you need a good example of what I am talking about, YouTube does this well. If the search box is focused with /, you can use tab and shift + tab to quickly move the focus to the major sections of the webpage. If you press shift + tab from the search box, it focuses on a hidden "skip navigation" button which moves your focus to the video results without needing to tabbing past account and navigation links.

I also feel the old searchbox with the dropdown results could exist alongside the new search menu. Sometimes while I am in the middle of reading through instructions or comments for a mod, I end up wanting to open other mod pages in new tabs for later. When I know the exact name of the mod page I want to open, the old quick search was more than adequate. My ADHD meds aren't strong enough to stop the new quick search from men in black mind wiping me when it takes over the whole page.

  • Like 3
  • 100% 1
Link to comment
Share on other sites

There's very little visual separation between the options for search and the actual content, this makes it harder for me to actually find what I'm looking for. The old style was really nice because you didn't have to scroll to see all the filtering options. It's also completely ridiculous that every time you start searching for a mod you have to click over to mods. Did the person making the search function perhaps have a concussion when they were designing it? That's the only way I can think of that someone would think this a good idea.

  • 100% 1
Link to comment
Share on other sites

I wasn't sure whether this belongs in here, accessibility, or the aesthetics feedback, but I'll put it here as I really do think the aesthetic changes have been a net negative experience in using the site.

My use case of nexus mods is really more casual, looking at the most popular mods or latest mods of any games I'm playing recently. For starters, why does clicking the search box lead to an entire pop-up appearing in the centre of the screen? I'm already looking at the right side of the screen when clicking it, so I really should be expecting to keep my attention there. I think a good solution would be to have the current search popup appearance but drop down from the search bar that I've clicked, maybe moving the search box to the middle of the screen.

Another complaint of mine is about new changes is after clicking a game's mod page, there's definitely a slightly worse experience now in browsing. The banner for the NexusPremium ad combined with the enlargened trending / hot mods now means I have to scroll a bit more to even get to viewing mods. It's a slight difference but definitely worse. Maybe just condensing these to be smaller would help.

Browsing mods has also gotten worse. I think a combination of the website's themes and colour choices being too dark, having no real boundary box for the mods section (which was what here before), and only seeing 4 mods in a row makes overall parsing a group of mods worse.
The change of filters to viewing mods also is strange? I'm not sure what the increased usefulness of having New options of All Time, 24 hours, 14 days, 28 days, and 1 year is compared to just having New Today and New This Week, its more of a hassle to even choose those options now. But at least I can find what niche mods were released between 28 days - 365 days ago?? I feel the new Surprise button (which is pretty cool) actually renders some of this useless as if I don't want anything specific, I would hit this, and if i wanted to find something specific, I would search for it. New of all time?? Just have an all mods button there, is that not here?
Same complaint with the Popular option, now it's just more of a hassle to set the filters to find popular mods this week and all time, as opposed to just clicking their tabs.

Edited by laicalg
deleted one word, wasnt useful
Link to comment
Share on other sites

On 3/31/2025 at 4:21 PM, Demorphic said:

We specifically covered this area of feedback in the article update, did you manage to have a look through it?

People here complain that they can't read the stuff and you ask us to read your essay about it? Really?

 

I'm using nexusmods for mods. When I search for mods, I expect to find mods.  When I type the thing, the first thing it prioritizes is games. But I'm already on that games page, searching for mods.  Instead of typing the thing I'm searching for and hitting enter to be brought to page with all the mods for that game with said name, I have to read (and which with gray text and dark gray background is hard) and click, because if I don't it transfers me to the thing it already showed me, but bigger and I have to click.
You can't say something if better or more accessible while it now requires more movement to do. That's something only able-boddied person would come up with.

When I finally get to the mods, all I can see now is single one row of mods (4/5 - depends if I managed to hide the filters which should have been hidden automaticly as on every other good website.) I also see the picture of second row, but picture doesn't tell me anything, so I have to scroll down. Which requires more movement yet again.
Not to mention as I said before, those huge windows are overwhelming. And making the whole page doesn't help as then the text is way too small. 

  • Like 2
  • 100% 2
Link to comment
Share on other sites

When uploading a mod today, I had to fill in a small description of the mod.
Once Again, I had to USE A MAGNIFYING GLASS, because my OLD EYES with RETINOPATHY that give me OCULAR MIGRAINES, could not SEE the words I was trying to type.

Go ahead and try to read that, that's an actual screenshot of the “Back End” that Mod Author's have to use when uploading a mod.
For someone my age, with my eye problems, that is almost invisible, and it certainly does not fall into ANY “Usability Guidelines” that I know of.

 

mod author.jpg

  • Like 1
  • 100% 4
Link to comment
Share on other sites

8 minutes ago, hazecloud said:

it's always when something grows big that they started to progress backwards. what was easy to use becomes  ugly  ui and hard to find. let the people in their respective field do their work, not corporate decision. 

A past version of me wouldn't consider giving Nexus Mods the benefit of the doubt, let alone defending them, but even I think It's disingenuous to claim these changes are the result of corporate greed. Anyone with 10-15 years of hindsight around here can tell you that they have a pretty consistent track record of making changes based on community feedback.

I assume you're lumping Nexus Mods in with sites/services that operate at a loss until they need to start paying back their investors/loans and have to find a way to become profitable. Afaik they have explicitly avoided putting the site in a position that is influenced heavily (or at all?) on additional stakeholders. Sometimes poorly received changes are made with good intentions.

 

 

Link to comment
Share on other sites

Latest updates to un-darkening with Stylus for Nexus

Spoiler

/* ==UserStyle==
@name           nexusmods.com
@namespace      github.com/openstyles/stylus
@version        1.0.2.3
@description    More fixes and personal taste adjustments of Lummox JR original css v1.0.4
@author         Lummox JR; pilonexyz (more fixes); BleakBlack,  zloybelka  (last updated 04/05/25)
==/UserStyle== */

@-moz-document domain("next.nexusmods.com"), domain("www.nexusmods.com") {
    /* Import fonts (use one of these for the mod header) */
    @import url('https://fonts.googleapis.com/css2?family=Cabin+Condensed:wght@400;500;600;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');

    /* Awful big game-name header below breadcrumbs */
    #mainContent nav:first-child + div {
        display: none;
    }

    /* Get rid of egregious vertical padding */
    /*RANT
        CSS designers, name your classes according to their function, not the attributes you mean to apply. Classes should be things like mod-tile-title, mod-tile-footer, fileinfo-antivirus-status, etc.
        I know we're all guilty of this to some degree and I've done MUCH WORSE but please, these classes are bad */
    .pt-4, .pt-6, .py-4, .py-6 {padding-top: 0.5rem;}
    .pb-4, .pb-6, .py-4, .py-6 {padding-bottom: 0.5rem;}
    .pb-6 {display:none;}
    .mt-4, .mt-6, .my-4, .my-6 {margin-top: 0.5rem;}
    .mb-4, .mb-6, .my-4, .my-6 {margin-bottom: 0.5rem;}

    .pt-8, .py-8, .pt-16 {padding-top: 1rem;}
    .pb-8, .py-8 {padding-bottom: 1rem;}
    .pt-10, .py-10 {padding-top: 1.5rem;}
    .pb-10, .py-10 {padding-bottom: 1.5rem;}
    .mt-8, .my-8 {margin-top: 1rem;}
    .mb-8, .my-8 {margin-bottom: 1rem;}
    .mt-10, .my-10 {margin-top: 1.5rem;}
    .mb-10, .my-10 {margin-bottom: 1.5rem;}

    /* Holy frell, dudes, WHY? */
    .pt-20, .py-20 {padding-top: 1.5rem;}
    .pb-20, .pb-20 {padding-bottom: 1.5rem;}
    .pb-2 {padding-bottom: .1rem;}

    /* Get rid of egregious spacers */
    .space-y-6 > :not([hidden]) ~ :not([hidden]) {margin-top: 0.5rem; margin-bottom: 0.5rem;}
    .space-y-5 > :not([hidden]) ~ :not([hidden]) {margin-top: 0.5rem; margin-bottom: 0.5rem;}

    .space-y-5 > :last-child, .space-y-6 > :last-child {margin-bottom: 0;}

    /* Mod list has a ton of wasted vertical space */
    .group\/mod-tile {
        /* Don't enforce tile min-height */
        &.min-h-\[28rem\] {
            min-height: unset;
            border-radius: 0;
            background: #383838;
        }

        /* Radically reduce egregious padding */
        & > :nth-child(2) {padding-top: 0.2rem; padding-bottom: 0.2rem;}
        .py-2 {padding-top: 0.0rem; padding-bottom: 0.2rem;}
        .pt-2 {padding-top: 0.2rem;}
        
        .sm\:px-0 {padding-left: 0; padding-right: 0;}

        .font-semibold {font-weight:550; font-stretch: semi-condensed;}
        .text-danger-strong {--tw-text-opacity:1; color:rgb(248 113 113/var(--tw-text-opacity));
        }
        
        .divide-y > :not([hidden]) ~ :not([hidden]) {border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
        }
        
        
        /* Mod title font was too big */
        .typography-body-xl {    
            font-size: 1.05rem;
            -webkit-line-clamp: 2;
            color: rgb(225 225 225/var(--tw-text-opacity));
            margin-top: 0.5rem;
            *font-family: Roboto,sans-serif;
            line-height: 1.35;
            font-stretch: 50%;
            font-weight: 600;
        }

        .typography-body-xl:hover {   
            -webkit-line-clamp: 3;
              }
        
        /* Smaller text for author/category/times */
        .typography-body-sm {
            font-size: 0.75rem;
        /*color can't be changed with old theme palettes, change manually if you don't like orange*/
            color: rgb(217 143 64/var(--tw-text-opacity));
            *font-family: Inter,sans-serif;
            font-weight: 500;
            font-stretch: condensed;  
            margin-bottom: 0.4rem;
        }

        /* Description 1.5 line-height wasted space */
        .typography-body-md {
            line-height: 1.45;
            -webkit-line-clamp: 5;
            font-size: 0.90rem;
            color: #e1e1e1;
            font-weight: 300;
            font-stretch: normal;
            background-color: #383838;
    }  
        
        
        /* Bottom box with endorsements/downloads/size */
        .min-h-8 {
            min-height: 1.5rem;
            border-radius: 0;
            background: #2d2d2d;
    }
}
    
    .mods-grid, .profile-mods-grid {row-gap: 0.96rem;}
    
    .mods-grid {-moz-column-gap: 0.8rem; column-gap: 0.8rem;}
    
    .mods-grid {background-color: #444444;}
    
    
    /* Too much space between mods-grid and pagination */
    .xs\:mb-10 {margin-bottom: 1.5rem;}

    /* Remove wide gutters, but make allowances for very wide screens */
    .next-container {width: min(max(90%, 2000px), 100%);}
    
    /* Title on mod page */
    #featured h1 {
        /* Use a nice condensed font */
        *font-family: 'Saira Condensed','Cabin Condensed',sans-serif;
        font-family: 'bebas_neuebook';
        font-weight: normal;
        margin-bottom: 0.5rem;
}
    
    .tabcontent {position:relative; background:#444444;}
    ul.modtabs li:first-child a.selected {
    background:#444444;
}
    
    ul.modtabs li a.selected, .tabcontent {
    background:#444444;
}
    
    ul.modtabs li a {
    color: #f9f9f9;
    border-top: 0px solid var(--stroke-neutral-translucent-weak);
}
    
    span.alert {
    font-size: 11px;
    font-family: Roboto,sans-serif;
    background-color: var(--theme-primary);
    color: rgb(177 177 177/var(--tw-text-opacity));
    font-weight: 700;
    margin-left: 5px;
}
    
    .modtabs .alert {
    color: #f6eee5;
}
     
    /* Tag Button */
    
    a.btn.btnsmall.js-toggle, a.btn.btnsmall.popup-btn-ajax {
    font-size: 11px;
    padding: 5px 8px;
    display: inline-block;
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    background-color: var(--theme-primary);
    height: 1.6rem;
    border-radius: 0px;
    padding-top: 0.35rem;  
}
    
    a.btn.btnsmall.js-toggle:hover, a.btn.btnsmall.popup-btn-ajax:hover {
        background-color: var(--theme-primary);
    }
    
    ul.tags li a.btn, ul.tags li a.btn:visited {
    font-size: 11px;
        padding-top: 0.01rem;
        padding-bottom: 0.01rem;  
}
    

    h2 {font-family: 'bebas_neuebook';}
    
    .icon-plus, .icon-minus {padding-top: 0.1rem;
}
    
    .flex-copy {margin-bottom: 0.0rem;}
    *.inline-flex .icon {margin-bottom: 1.0rem;}

    .tabcontent {
    font-size: 14px;
    font-family: Roboto,sans-serif;
    letter-spacing: .3px;
    color: #f1f1f1;
}
    
    #action-nmm a.btn.inline-flex, #action-manual a.btn.inline-flex {
    height: 2.2rem;
    margin-top: 0.1rem;
    padding-bottom: 0.1rem;
    padding-top: 0.1rem;
        
}
    
    #action-nmm a.btn.inline-flex:hover, #action-manual a.btn.inline-flex:hover {
    background-color: var(--theme-secondary);
        
}
    
    .icon-manual {margin-top: 0.0rem}
    
    .btn.inline-flex .icon {display: flex;}
    
    .btn, a.btn, .btn:visited {
    font-size: 12px;
    font-family: Roboto,sans-serif;
    font-weight: 450;
    margin-bottom: 1.5rem;
    margin-top: 0.6rem;
    *height: 2.4rem;
    text-transform: uppercase;
    border-radius: 0px;
}
    
    a.btn.popup-btn-ajax {
    font-size: 12px;
    font-family: Roboto,sans-serif;
    margin-bottom: 1.4rem;
    margin-top: 0.1rem;
    height: 2.0rem;
    text-transform: uppercase;
    border-radius: 0px;
    color: #fff;
}
    
   .modactions .btn {
    margin-top: -0.05rem;
    height: 2.4rem;
}
    
    .drop-down ul.sublist {
    list-style: none;
    margin-top: -1.6rem;
    padding: 0 0 5px;
    background-color: rgb(0, 0, 0);
}
    
    .btn-inactive {
    opacity: .5;
    background-color: transparent;
    height: 1.8rem;
}
    
    .inline-flex .icon {
    margin-bottom: 0.0rem;
}
    
    ul.modactions li.dllabel {
    margin-top: 0.6rem;
}
    
    
    ul.actions li.report-abuse-btn:only-of-type {
    height: 2.4rem;
}
    
    .modpage .info-details .sideitem a.btn:last-of-type, .modpage .info-details .sideitem a.btn:only-of-type {
    height: 1.6rem;
}
     
    .comments ul.actions .btn, .info a.btn {
    margin-top: -0.1rem;
    margin-bottom: 0.1rem;
    height: 1.75rem;
    color: #fff;
    background-color: var(--theme-primary);
    border: 0px solid var(--stroke-neutral-translucent-moderate);
        
}
    
    .comments ul.actions .btn:hover, .info a.btn:hover {
    background-color: var(--theme-secondary)!important;
    border: 0px solid var(--stroke-neutral-translucent-moderate);
        
}
    
    .comments > ol > li ol > li, a
    {border-radius: 0;
}
    
    
    .comment-search {
    margin-top: -1.8rem;
}
    
    body {
    *line-height: 1.0;
        font-size: 12px;

}
    
    #featured #feature #pagetitle {
    position: absolute;
    top: 63%;
}
 
    .rj-btn, a.rj-btn, button.rj-btn {
    border-radius: 0;
}
    
    h2#description_tab_h2 {
    margin-bottom: 1rem;
    margin-top: 0;
}
    
    #description_tab_h2 {
    font-size: 30px;
}
    
    ul.actions {
    margin-bottom: -1rem;
}

    .accordion dd {
    background-color: #383838;
}
    
    .accordion dt.accopen {
    background-color: #2d2d2d;
}
    
    .accordion dt {
    background-color: #383838;
}
    
    .accordion dt:hover, ul.modtabs li a:hover {
    background-color: #444444;
}
    
    .accordion-downloads a.btn.inline-flex:hover {
    background-color: var(--theme-secondary);
}
    
        .accordion-downloads a.btn.inline-flex {
    height: 2.0rem;
}
    
    .container a, .popup a {
    font-family: Roboto,sans-serif;
    font-weight: 500;
    *margin-top: 0.0rem;
    *margin-bottom: 0.0rem;
}
    
    .tabbed-block:last-of-type {
    margin-top: -0.93rem;
    margin-bottom: 0.0rem;
}
    
    .file-category-header {
    margin-top: 1.9rem;
    margin-bottom: -0.04rem;
}
    
    .new-premium-banner__actions > a.btn {
    height: 2.2rem;
    margin-top: -0.50rem;
    padding-top: 0.62rem;
    margin-bottom: -0.50rem;
    background-color: var(--theme-primary);
}
    .new-premium-banner__actions > a.btn:hover {
    background-color: var(--theme-secondary);    
}
    
    .premium-banner a.btn {
    font-size: 12px;
    font-family: Roboto,sans-serif;
    color: #f1f1f1;
    background-color: var(--theme-primary);
    border: 0px solid var(--translucent-dark-500);
    margin-top: -0.50rem;
    padding-top: 0.60rem;
    margin-bottom: -0.50rem;
    height: 2.2rem;
}
    
    .premium-banner a.btn:hover {
    background-color: var(--theme-secondary);
}
    
    .comments ul.actions .btn, .info a.btn {
    margin-top: -0.1rem;
    margin-bottom: 0.1rem;
    height: 1.75rem;
    color: #fff;
}
    
    /* Gradient on mod page covers too much of the header image */
    /*#featured #feature .gradient {height: 200px;}*/
    /* Too much padding at bottom of header */
    #featured #pagetitle {padding-bottom: 0.5rem;}

    /* Description tab of mod page has way too much padding */
    .tab-description {padding-top: 1rem; padding-bottom: 1rem;}
    .tab-description ~ .mod_description_container {padding-top: 0;}

    /* "About this mod" text is useless and wastes space */
    #description_tab_h2 {font-family: bebas_neuebook;
    font-weight: 400;}

    /* Mod image gallery doesn't need the counter unless we hover */
    #sidebargallery.modimages .counter {transition: opacity 0.33s;}
    #sidebargallery.modimages:not(:hover) .counter {opacity: 0;}

    /* Too much vertical padding around thumbnail gallery */
    #sidebargallery ul.thumbgallery {padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 0.1rem; padding-right: 0.1rem;}

    /* File info area has too much vertical padding; SHOULD BE ZERO! */
    /* Only do this after thumbnail gallery because this is also used for article info that does need padding */
    .modpage .info-details .sidebargallery + #fileinfo {padding-top: 0; padding-bottom: 0;}

    /* Antivirus status has bogus inline styles that add vertical size */
    .modpage #fileinfo .sideitem:last-child > div {height: auto !important; top: unset !important;}
    
    /* Too much padding for tags and we don't need a header */
    /*.modpage .sideitems.side-tags {padding-top: 0.5rem; padding-bottom: 0.5rem;}*/
    .modpage .sideitems.side-tags h2 {font-family: 'bebas_neuebook'; font-size: 1.50rem;}
    

    /* Keep the same color as other links */
    /*.modtabs .alert {color: var(--theme-primary);}*/
    
    /* Why is there a margin here? Why? */
    .tab-description .accordionitems {margin-bottom: 0;}
    
    /* Comment count on posts tab has needless top padding */
    #comment-count {padding-top: 0;}
    /* Too big a margin below comment page nav */
    .comments .comment-nav {margin-bottom: 0.5rem;}

    /* Article page title area has too much bottom padding, inconsistent with mod page */
    #featured #feature.blank #pagetitle {padding-bottom: 0.5rem;}

    /* Article page background is weirdly bright compared to description */
    .articlepage article {background-color: var(--surface-mid);}

    /* Make numerical lists more like bullet lists so they indent properly */
    ul.content_list_ordered > li {margin-left: 20px;}

    /* Comments below article have extra space they don't need */
    .container ~ #comment-container {padding-top: 0;}

    /* Give back the nice background image */
    body::before {
        background-image: url('/assets/images/default/bg_game_index.jpg');
        height: 100%;
        filter: none;
    }

    /* Game overview page */

    /* Trending Mods section is huge and needs tweaking */
    section[aria-labelledby="trending-mods-header"] {
        /* 2nd div has the content; 1st has the header */
        & > div:nth-of-type(2) {
            display: grid;
            grid-template-columns: auto 30%;
            grid-column-gap: 1.5rem;
            /* Divider we don't need or want */
            hr {display: none;}
            /* Smaller section below the two big tiles */
            & > div:nth-of-type(2) {
                margin: 0;
                grid-template-columns: repeat(2, minmax(0,1fr));
                grid-auto-rows: minmax(min-content, 1fr);
                grid-column-gap: 1.5rem;
                grid-row-gap: 1rem;
            }
        }
    }

    /* LOL bye */
    section[aria-labelledby="popular-collections-header"] {
        display: none;
    }

    section[aria-labelledby="more-mods-header"] {
        /* Move the time button in More Mods next to the other buttons */
        div.flex.sm\:flex-row {
            div:first-child {width: auto;}
            button:nth-child(2) {margin-left: unset;}
        }
    }

    .news-grid {
        /* What's up with those huge titles? */
        .typography-heading-sm {font-size: 1.2rem;}
    }
    
    
    /* Theme colors Nexus wanted to remove for some reason */
    body.scheme-theme-ReskinBlue {
        --theme-primary: #57a5cc !important;
        --theme-primary-translucent: #57a5ccd8 !important;
        --theme-secondary: #4584a3 !important;
        --theme-dark: #356983 !important
    }
    body.scheme-theme-Fallout {
        --theme-primary: #92ab20 !important;
        --theme-primary-translucent: #92ab20d8 !important;
        --theme-secondary: #a4c21e !important;
        --theme-dark: #545e24 !important
    }
    body.scheme-theme-Purple {
        --theme-primary: #9561de !important;
        --theme-primary-translucent: #9561ded8 !important;
        --theme-secondary: #a275d3 !important;
        --theme-dark: #4700aa !important
    }
    body.scheme-theme-LighterBlue {
        --theme-primary: #679fd6 !important;
        --theme-primary-translucent: #679fd6d8 !important;
        --theme-secondary: #7ab1e8 !important;
        --theme-dark: #4475a6 !important
    }
    body.scheme-theme-BatmanBlue {
        --theme-primary: #7495b0 !important;
        --theme-primary-translucent: #7495b0d8 !important;
        --theme-secondary: #86aece !important;
        --theme-dark: #296291 !important
    }
    body.scheme-theme-Burgundy {
        --theme-primary: #bf4848 !important;
        --theme-primary-translucent: #bf4848d8 !important;
        --theme-secondary: #e27171;
        --theme-dark: #9d3939
    }
    body.scheme-theme-Teal {
        --theme-primary: #598a9f !important;
        --theme-primary-translucent: #598a9fd8 !important;
        --theme-secondary: #76a3b7 !important;
        --theme-dark: #184a60 !important
    }
    body.scheme-theme-Sepia {
        --theme-primary: #a5704f !important;
        --theme-primary-translucent: #a5704fd8 !important;
        --theme-secondary: #9a7d6b !important;
        --theme-dark: #604331 !important
    }
    body.scheme-theme-Gold {
        --theme-primary: #b99d3e !important;
        --theme-primary-translucent: #b99d3ed8 !important;
        --theme-secondary: #dfba3b !important;
        --theme-dark: #c77f18 !important
    }
    body.scheme-theme-PaleBrown {
        --theme-primary: #8e7f5f !important;
        --theme-primary-translucent: #8e7f5fd8 !important;
        --theme-secondary: #a68f5e !important;
        --theme-dark: #584a2d !important
    }
    body.scheme-theme-DeepOrange {
        --theme-primary: #e6832b !important;
        --theme-primary-translucent: #e6832bd8 !important;
        --theme-secondary: #faa431 !important;
        --theme-dark: #a7540a !important
    }
    body.scheme-theme-DarkYellow {
        --theme-primary: #b7b60f !important;
        --theme-primary-translucent: #b7b60fd8 !important;
        --theme-secondary: #e7d528 !important;
        --theme-dark: #e09d05 !important
    }
    body.scheme-theme-DarkRose {
        --theme-primary: #976060 !important;
        --theme-primary-translucent: #976060d8 !important;
        --theme-secondary: #bf8282 !important;
        --theme-dark: #6a1f1f !important
    }
    body.scheme-theme-VioletBlue {
        --theme-primary: #576eca !important;
        --theme-primary-translucent: #576ecad8 !important;
        --theme-secondary: #a4a9e1 !important;
        --theme-dark: #4955da !important
    }
    body.scheme-theme-Brown {
        --theme-primary: #502c15 !important;
        --theme-primary-translucent: #502c15d8 !important;
        --theme-secondary: #996240 !important;
        --theme-dark: #3a1b07 !important
    }
    body.scheme-theme-Sienna {
        --theme-primary: #8f482c !important;
        --theme-primary-translucent: #8f482cd8 !important;
        --theme-secondary: #bc6d4e !important;
        --theme-dark: #531f0b !important
    }
    body.scheme-theme-TankGrey {
        --theme-primary: #a7a785 !important;
        --theme-primary-translucent: #a7a785d8 !important;
        --theme-secondary: #969673 !important;
        --theme-dark: #41412c !important
    }
    body.scheme-theme-MossGreen {
        --theme-primary: #9d9d5a !important;
        --theme-primary-translucent: #9d9d5ad8 !important;
        --theme-secondary: #c6c665 !important;
        --theme-dark: #426535 !important
    }
    body.scheme-theme-DeepBlue {    /* Skyrim SE */
        --theme-primary: #8197ec !important;
        --theme-primary-translucent: #8197ecd8 !important;
        --theme-secondary: #a4b7ff !important;
        --theme-dark: #0e37da !important
    }
    body.scheme-theme-MediumBrown {
        --theme-primary: #b36f3a !important;
        --theme-primary-translucent: #b36f3ad8 !important;
        --theme-secondary: #7f613a !important;
        --theme-dark: #502706 !important
    }
    body.scheme-theme-Salmon {
        --theme-primary: #fc4f49 !important;
        --theme-primary-translucent: #fc4f49d8 !important;
        --theme-secondary: #ff5f54 !important;
        --theme-dark: #ee0013 !important
    }
    body.scheme-theme-RDR2Red {
        --theme-primary: #dc1a0e !important;
        --theme-primary-translucent: #dc1a0ed8 !important;
        --theme-secondary: #cc0019 !important;
        --theme-dark: #cc0019 !important
    }
    
        /*--- some BleakBlack's beta CSS from https://forums.nexusmods.com/topic/13507498-mod-browsing-overhaul-discussion/?do=findComment&comment=130490615
    edited by zb for the current version 03/29
    Navbar - Game Name: remove close button, double max width (zb: can't remove close button on main game pages, only works on mod pages themselves) ---*/
    .nav-current-game > a:first-child, .pl-1 {
        border-radius: .25rem;
        max-width: 16rem;
    }
    .nav-current-game > a:last-child {
        display: none;
    }  
    /*no Go Premium banner*/
    .md\:px-8, .bg-gradient-to-r {
        display: none;
    }
    
    .modpage .sideitems, ul.modtabs, ul.modtabs li, #sidebargallery, section#rj-vortex, .comments ol.comment-kids {
         background-color: #222222;
    }
    
    .container ~ #comment-container, .col-1-1 > .container {
        background: #444444;
    }
    
    .img-wrapper, .comments .comment-head, ul.thumbgallery .thumb a, ul.thumbgallery li figure, #featured #feature.blank #pagetitle, .modpage .info-details #fileinfo, .comments, .p-0\.5, .lg-outer .lg-item.lg-complete, .bg-surface-translucent-low, .bg-neutral-800, .bg-translucent-dark-400 {
        background: #2d2d2d;
    }
    
    .comments .comment-content,  .md\:p-6, .popup.col-1-1, .file-contain, .popup.col-1-1, .popup .col-1-1, .file-contain {
        color: #e1e1e1;
        background: #444444;
    }
    
    .report-abuse-btn, .button-share {
        border: 0;
    }
    .tabcontent-mod-page .button-share {
        margin-bottom: 10px;
    }
    .report-abuse-btn .btn:hover, .button-share:hover {
        background-color: var(--theme-secondary) !important;

    }
        
    /*Main game page*/
    .pt-20, .mt-3, .pt-16, section[aria-labelledby="trending-mods-header"],  .next-container-fluid {
        background: #444444;
    }
    ::after, ::before {
  --tw-content: none;
    }
    .px-3\.5 {
        border-radius: 2px;
    }
    .rounded-t { /* straightens corners on More Mods tiles, but not on Trending or Media*/
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .\!bg-surface-mid {
        background-color: #2d2d2d !important;
    }
    
    /*Section icons*/
    .size-9 {display: none;}
    
    /*Articles*/
    .news-article {
        background: #444444;
        color: #fdfdfd;
        font-size: 15px;
    }
    
    /*smaller search bar, it's a fake anyway, 8rem instead of 28rem*/
    .lg\:pr-2 {
         max-width: 8rem;
    }

    /*no gradient on ultra-wide displays*/
    .from-surface-base\/60 {
    background: #444444;
    }
    
        /*Mod editing*/
    textarea.form-textarea, .form-section-content input.form-field, .select2-container--default .select2-selection--single .select2-selection__rendered {
        background: #fff !important;
        color: #2d2d2d;
        font-size: 14px;
        font-weight: 500;
        font-family: Roboto;
    }
    
    .modpage .wrap, .popup-editfile h2 {
        background: #222222 !important;
    }
    
    .form-section-content, .count {
        background: #383838 !important;
    }
    
    .form-section h2 {
        color: #F9F6F9;
    }
    
    .requirement-table .mod-name {
        font-size: 14px;
    }
        
}

and the forums.

Spoiler

/* ==UserStyle==
@name           forums.nexusmods.com
@namespace      github.com/openstyles/stylus
@version        1.0.1
@description    A new userstyle
@author         zloybelka
==/UserStyle== */

@-moz-document domain("forums.nexusmods.com") {
    body, .ipsReact_reactCount > a,  .ipsPad {
        background: #2D2D2D;
        color: #F9F6F9;
    }
    
    .ipsQuote, .ipsPadding, .ipsApp .cke_wysiwyg_div, .ipsDataList, .ipsSpoiler {
        background: #2D2D2D;
    }
    
    .ipsQuote_citation, .ipsSpoiler_header, .ipsComposeArea_dropZone, .ipsButtonBar, .ipsButton_split .ipsButton, .ipsWidget_title, .ipsComposeArea_dummy, .ipsType_break .ipsBox, .ipsAreaBackground_light {
        background: #222222;
    }
    
    .ipsComposeArea_withPhoto [data-ipseditor]::before, [dir="ltr"] .ipsComposeArea_withPhoto [data-ipseditor]::after {
        border-right-color: #222222;
    }
    
    .ipsType_break, .ipsReact_reactions, .ipsApp .cke_wysiwyg_div, .ipsComment_recommendedNote::before {
        color: #F9F6F9;
    }
    
    .ipsPad {
        font-size: 14px;
    }
    
    .ipsType_normal { /*change the font-size to whatever you want or remove that line completely, same with font-weight, if you're changing/removing the size*/
        font-size: 14px;
        color: #F9F6F9;
        font-weight: 400;
    }
    
    .ipsBox, .ipsPagination.ipsPagination_mini a {
        border: solid 1px rgba(33, 33, 33, .81);
    }
    
    .ipsColumns, .ipsApp .ipsComment_recommended, .ipsButtonBar .ipsButtonRow li > a {
        background: #383838;
        border-radius: 0;
    }
    
    a.ipsButton.ipsButton_primary.ipsButton_narrow.ipsButton_medium {
        background: #383838;        
    }
    
    .ipsComment_recommendedFlag, .ipsBadge_highlightedGroup, .ipsBadge_popular {
        background: #2D2D2D;
        color: rgb( var(--theme-link_button) );
    }
    
    .cke_wysiwyg_div.cke_reset {
        background: #444;
    }
    
    .ipsTabs_activeItem {color: rgb( var(--theme-important_button) ) !important;}
    
}

Forum preview

nexus-theme-old-stylus2.png

Using Stylus 101

Spoiler
  1. Click the nexusmods.com or the forums.nexusmods.com link in the Stylus drop-down menu respectively,
  2. Erase all code and paste the new code.

Still haven't touched the user profiles themselves, oh well. At least the mod search should be tolerable now. Managed to remove ( more like replace with a solid background) the hideous game-specific blurring 🎉

Also, fixed the invisible fonts in the mod editing fields.

Edited by zloybelka
tiny color tweaks in a couple places, removed gradient background on ultra-wide
Link to comment
Share on other sites

22 hours ago, HadToRegister said:

When uploading a mod today, I had to fill in a small description of the mod.
Once Again, I had to USE A MAGNIFYING GLASS, because my OLD EYES with RETINOPATHY that give me OCULAR MIGRAINES, could not SEE the words I was trying to type.

Go ahead and try to read that, that's an actual screenshot of the “Back End” that Mod Author's have to use when uploading a mod.
For someone my age, with my eye problems, that is almost invisible, and it certainly does not fall into ANY “Usability Guidelines” that I know of.

 

mod author.jpg

I don't have your particular eye problems - I have my own that are partially related to my mental disability - but oh my god, that is headache-inducing. Even without the weird JPEG artifacting from the screenshot, I'd have a hard time reading that... ironically, the JPEG artifacting actually makes it *easier* to read.

It's frustrating that the guidelines (GUIDELINES, NOT RULES) Nexus's designers went with... very clearly only cater to one specific kind of visual disability and don't seem to take into account mental disabilities like autism and ADHD.

Side note: Speaking as an AuDHD user, PLEASE give us back the old dropdown search instead of this new, distressing, overstimulating popup search. I have to go directly to the main advanced search page to look anything up now because of how overstimulated the new search makes me. I am BEGGING to get back the feature that's ACTUALLY ACCESSIBLE. (caps for emphasis, not for yelling)

  • 100% 2
Link to comment
Share on other sites

The UI is objectively worse now. I have to zoom in and out all the time while navigating the site. The home page is huge and the mod page icons are too small, I'm constantly squinting my eyes while browsing there. I want to see the mod content displayed properly, not some tiny icons with cut-off titles. This contrast scheme is also pretty bad for readability.

It's hard to keep browsing for more than just a few minutes, it strains the eyes. Nexus team needs to take these issues into account.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...