Improving the downloads list❗

Sy

Sy

Well-Known Member
#1
Nov 16, 2018
367
721
93
sya.li
#1
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.
 
Last edited:
Likes: ChAzZ_NuT, Pandagnome, farias and 1 other person
farias

farias

Well-Known Member
Ark Liege
#2
Aug 17, 2020
495
656
93
Brazil
#2
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.
 
Last edited:
Likes: Sy, Pandagnome and Mahdi
Pandagnome

Pandagnome

Kaiju Slayer
Fart Siege
Welcome Wagon
Happy Kaiju
#3
Jul 27, 2016
7,896
10,171
113
Island of Tofu
#3
Sy said:
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.
Click to expand...

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

A tough box and ! is a good team
1658492928156.gif
 
Likes: ChAzZ_NuT
Sy

Sy

Well-Known Member
#4
Nov 16, 2018
367
721
93
sya.li
#4
murilomentor#2290 said:
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:
(snip)
There's also some layout changing css there, and of course it needs some tweaking but maybe it's helpful for you too.
Click to expand...
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

Pandagnome

Kaiju Slayer
Fart Siege
Welcome Wagon
Happy Kaiju
#8
Jul 27, 2016
7,896
10,171
113
Island of Tofu
#8
murilomentor#2290 said:
Before:
View attachment 5433

After:
View attachment 5434

I know it's not beautiful but my goal was only highlighting some lines.
Click to expand...
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.
 
Likes: farias and ChAzZ_NuT
farias

farias

Well-Known Member
Ark Liege
#9
Aug 17, 2020
495
656
93
Brazil
#9
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:

downloads_02.png

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

Pandagnome

Kaiju Slayer
Fart Siege
Welcome Wagon
Happy Kaiju
#10
Jul 27, 2016
7,896
10,171
113
Island of Tofu
#10
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!
Click to expand...
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

Sy

Well-Known Member
#11
Nov 16, 2018
367
721
93
sya.li
#11
@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}
 
Likes: farias
farias

farias

Well-Known Member
Ark Liege
#14
Aug 17, 2020
495
656
93
Brazil
#14
Sy said:
GIMME
Click to expand...
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

Sy

Well-Known Member
#15
Nov 16, 2018
367
721
93
sya.li
#15
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;
  }
Click to expand...
Thanks! This is a huge improvement.

I removed the background image for clarity.
 
You must log in or register to reply here.