Improving the downloads list❗

Sy · Jul 21, 2022

See also:
Fix the forum style / CSS!
https://forums.em8er.com/threads/fix-the-forum-style-css.1571/

Related:
https://forums.em8er.com/threads/re...-version-history-and-the-downloads-page.2302/

-

Time after time and throughout the centuries there was a download page.

This page had critical links for viewing and playing builds.

It was, however, terrible.

Until the introduction of a single character.

❗

Yes, ❗ played a heroic role.

By being placed at the end of the most recent build's name, users figured out what they should be downloading.

Then there was peace.

farias · Jul 21, 2022

Hey Sy!
Since you gave that valuable tip to use Stylus to fix the CSS of the forums, I'd like to thank you by sending this CSS snippet that changes the style of the first element of each section in the download page.
It seems that the last build is always the first item of its section, so this css highlights the fist item of all download sections:

CSS:

  .accordion-content p {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2px;
  }
  .accordion-content p>span>a {
    display: block;
    width: 90px;
    text-align: center;
    margin-left: 4px;
    border: 1px solid gray;
  }
  /* First item selector */
  .accordion-content p:first-of-type {
    background-color: #882211;
    font-weight: bold;
  }
  /* First item link selector */
  .accordion-content p:first-of-type>span>a {
    color: yellow;
    background-color: blue;
    font-weight: bold;
  }

There's also some layout changing css there, and of course it needs some tweaking but maybe it's helpful for you too.

Pandagnome · Jul 22, 2022

Sy said:

I like this story so much and know the heroic ! will be involved surely!!!

A tough box and ! is a good team

Sy · Jul 23, 2022

murilomentor#2290 said:

That's a big help, thanks.

I used your stuff as-is and added a line between each item and an explicit underline to the links thusly:

CSS:

/* ==UserStyle==
@name           my.em8er.com - 7/22/2022, 11:44:16 PM
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */

@-moz-document url-prefix("https://my.em8er.com/downloads") {
    /* Insert code here... */
  .accordion-content p {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2px;
    /* My addition */
    border-bottom:1px dotted grey;
  }
  .accordion-content p>span>a {
    display: block;
    width: 90px;
    text-align: center;
    margin-left: 4px;
    border: 1px solid gray;
    /* My addition */
    text-decoration: underline;
  }
  /* First item selector */
  .accordion-content p:first-of-type {
    background-color: #882211;
    font-weight: bold;
  }
  /* First item link selector */
  .accordion-content p:first-of-type>span>a {
    color: yellow;
    background-color: blue;
    font-weight: bold;
  }
}

-

I see triple of the latest download because I'm a supporter at various times, which is a problem on Crixa's end.

Pandagnome · Jul 23, 2022

Would like to see the image as a result of all these css code changes if possible, because it is an odd language.

ChAzZ_NuT · Jul 23, 2022

My download list scares me, thank the lord that we have FAI to help us. xD

farias · Jul 23, 2022

Pandagnome said:

Before:

After:

I know it's not beautiful but my goal was only highlighting some lines.

Pandagnome · Jul 26, 2022

murilomentor#2290 said:

Thanks for adding the images of before and after this helps to understand better of the changes.

The highlighted areas & lines do stand out, easier to locate, and tidy especially with the download. With some colour changes could look more appealing e.g. such as yellow instead of red and the purple could be black.

farias · Jul 29, 2022

I tweaked the previous styles a little bit to be less "ugly". Basically I removed the strong background colors and improved the download links.

CSS:

    .accordion-title,
    .accordion-title:hover {
        color: #ffffff;
        font-size: 16px;
        font-weight: bold;
    }
    .accordion-content p {
        color: #b8b9bb;
        font-size: 15px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    /* Add arrow to download button */
    .accordion-content p > span > a::before {
        content: '\01f80b';
        margin-right: 4px;
    }
    .accordion-content p > span > a,
    .accordion-content p > span > a:visited {
        display: block;
        width: 90px;
        text-align: center;
        margin-left: 8px;
        border: 1px solid #ff8600;
        border-radius: 4px;
        background-color: #000000;
        font-weight: normal;
    }
    .accordion-content p > span > a:hover {
        color: #ffD633;
        background-color: #582e00;
        box-shadow: 0px 0px 1px 1px #582e00;
    }
    /* First item selector */
    .accordion-content p:first-of-type {
        color: #00ff66;
    }

And this is the result:

Please feel free to change it and don't forget to share your tweaks!

Pandagnome · Jul 29, 2022

murilomentor#2290 said:

I tweaked the previous styles a little bit to be less "ugly". Basically I removed the strong background colors and improved the download links.

CSS:

    .accordion-title,
    .accordion-title:hover {
        color: #ffffff;
        font-size: 16px;
        font-weight: bold;
    }
    .accordion-content p {
        color: #b8b9bb;
        font-size: 15px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    /* Add arrow to download button */
    .accordion-content p > span > a::before {
        content: '\01f80b';
        margin-right: 4px;
    }
    .accordion-content p > span > a,
    .accordion-content p > span > a:visited {
        display: block;
        width: 90px;
        text-align: center;
        margin-left: 8px;
        border: 1px solid #ff8600;
        border-radius: 4px;
        background-color: #000000;
        font-weight: normal;
    }
    .accordion-content p > span > a:hover {
        color: #ffD633;
        background-color: #582e00;
        box-shadow: 0px 0px 1px 1px #582e00;
    }
    /* First item selector */
    .accordion-content p:first-of-type {
        color: #00ff66;
    }

And this is the result:

View attachment 5447

Please feel free to change it and don't forget to share your tweaks!

These changes are great
- Download button its like they are glowing just like the boarder
- The green font of the latest download stands out
- White for the main title looks tidy

I hope these changes take affect for all to see it is much more presentable!

Sy · Jul 29, 2022

@murilomentor#2290

The text color change is bad because of contrast issues with the background color, so I removed that.

I adjusted download buttons to pad the right:

CSS:

    .accordion-content p > span > a::after {
        content: '';
        margin-right: 4px;
    }

I wanted to keep lines between items, but the download buttons appear to be bottom-aligned and against some lines; I'm not sure how to fix that but it looks okay.

Instead I decided to have alternating row colors. My color selection is bad but you get the idea:

CSS:

    .accordion-content p:nth-child(even) {background: #18191e}
    .accordion-content p:nth-child(odd) {background: #2c3240}

farias · Jul 29, 2022

Ok, now I've gone too far

Maybe it's time to stop fiddling with it

LOL

Sy · Jul 29, 2022

murilomentor#2290 said:

GIMME

farias · Jul 29, 2022

Sy said:

Ok, here it is:

CSS:

  .accordion-title,
  .accordion-title:hover {
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
  }
  .accordion-item.is-active .accordion-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    justify-items: stretch;
  }
  .accordion-content p {
    margin: 0;
    padding: 8px;
    border: 1px solid #171c25;
    border-radius: 8px;
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .8) 59%, rgba(0, 0, 0, 0.9) 100%),
      url('https://my.em8er.com/assets/bgs/bg-1-1920-cc540024809b71bfdfdf6bcfef873c8e8830ecbe2522d3ca6077cb5a0d479765.jpg') center no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #e8e8e8;
    font-size: 15px;
  }
  /* Add arrow to download button */
  .accordion-content p > span > a::before {
    content: '\01f80b';
    margin-right: 4px;
  }
  .accordion-content p > span > a,
  .accordion-content p > span > a:visited {
    display: block;
    width: 100px;
    text-align: center;
    margin: 8px;
    border: 1px solid #ff8600;
    border-radius: 4px;
    background-color: #000000;
    font-weight: normal;
  }
  .accordion-content p > span > a:hover {
    color: #ffD633;
    background-color: #582e00;
    box-shadow: 0px 0px 1px 1px #582e00;
  }
  /* First item selector */
  .accordion-content p:first-of-type {
    color: #00ff66;
  }

Sy · Jul 30, 2022

murilomentor#2290 said:

Ok, here it is:

CSS:

  .accordion-title,
  .accordion-title:hover {
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
  }
  .accordion-item.is-active .accordion-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    justify-items: stretch;
  }
  .accordion-content p {
    margin: 0;
    padding: 8px;
    border: 1px solid #171c25;
    border-radius: 8px;
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .8) 59%, rgba(0, 0, 0, 0.9) 100%),
      url('https://my.em8er.com/assets/bgs/bg-1-1920-cc540024809b71bfdfdf6bcfef873c8e8830ecbe2522d3ca6077cb5a0d479765.jpg') center no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #e8e8e8;
    font-size: 15px;
  }
  /* Add arrow to download button */
  .accordion-content p > span > a::before {
    content: '\01f80b';
    margin-right: 4px;
  }
  .accordion-content p > span > a,
  .accordion-content p > span > a:visited {
    display: block;
    width: 100px;
    text-align: center;
    margin: 8px;
    border: 1px solid #ff8600;
    border-radius: 4px;
    background-color: #000000;
    font-weight: normal;
  }
  .accordion-content p > span > a:hover {
    color: #ffD633;
    background-color: #582e00;
    box-shadow: 0px 0px 1px 1px #582e00;
  }
  /* First item selector */
  .accordion-content p:first-of-type {
    color: #00ff66;
  }

Thanks! This is a huge improvement.

I removed the background image for clarity.

Pandagnome · Jul 30, 2022

murilomentor#2290 said:

I like that they are divided into there own little boxes... keep going!!!!!!!!

Search

Search

Improving the downloads list❗

Sy

Well-Known Member

farias

Well-Known Member

Pandagnome

Kaiju Slayer

Sy

Well-Known Member

Pandagnome

Kaiju Slayer

ChAzZ_NuT

Kaiju Slayer

farias

Well-Known Member

Pandagnome

Kaiju Slayer

farias

Well-Known Member

Pandagnome

Kaiju Slayer

Sy

Well-Known Member

farias

Well-Known Member

Sy

Well-Known Member

farias

Well-Known Member

Sy

Well-Known Member

Pandagnome

Kaiju Slayer