♻️ SSW.Rules CSS - List bullet points are generated in a inadequate way

[tiagov8]

Cc: @hveraus @bettybondoc

Hi team

Pain

Bullet points on lists are squared and red, which is cool, but it uses a less-than-ideal CSS:

#rules ul li, .rule-category-top ol li, .rule-category-top ul li, .rule-content ol li, .rule-content ul li {
    line-height: 1.25rem;
    padding: 0 0 .5rem;
}
.rule-category-top ol li, .rule-category-top ul li, .rule-content ol li, .rule-content ul li {
    margin-bottom: .25rem;
}
#rules ul>li:before, .rule-category-top ul>li:before, .rule-content ul>li:before {
    --tw-text-opacity: 1;
    color: rgb(204 65 65 / var(--tw-text-opacity));
    content: "\25A0";
    display: inline-block;
    margin-left: -1rem;
    width: 1rem;
}

I noticed in some browsers the bullet points are missaligned and/or too big.

What code could be improved?

We can achieve a similar and better results by using:

li {
  list-style-type: square;
  padding: 0 0 .5rem;
}
li::marker {
  color: #cc4141;
}

Tasks

• 1. Fix the CSS

Screenshots

Thanks