Improved Card CSS

[brunocalado]

A friend made this CSS. It makes easier to read.

custom-css-MIkeBarbosa.txt

[CalielBR]

The adjustments in color and font, made , significantly enhance visibility, contributing to an improved perception for individuals with visual impairments.

[javierriveracastro]

Not for me. Colors are nice. But for some reason (probably because or thickness or whatever) this font is very hard to read for me without glasses. The characters kind of mix one with the other. I just have mild astigmatism, so I don't usually need glasses for anything but long times on the computer, driving or thinks like that, but I have I real hard time with this font.

[brunocalado]

Not for me. Colors are nice. But for some reason (probably because or thickness or whatever) this font is very hard to read for me without glasses. The characters kind of mix one with the other. I just have mild astigmatism, so I don't usually need glasses for anything but long times on the computer, driving or thinks like that, but I have I real hard time with this font.

Yes. The font is too much. But, the color is nice.

[ddbrown30]

Agreed. Font is not great. Maybe it's just a bad screencap, though? It looks super blurry.

[CalielBR]

Good evening! The font itself is just an example for cyberpunk-themed campaigns, but it can be modified by the player/narrator. The main focus is on the idea of colors in the result values, without changing the chat font. The code proposed aims to improve the appearance of result values in the BR2SW module by adding a thinner border and possibly adjusting the font thickness for better readability. The suggestion is to make these improvements native to the module for an enhanced experience.

Details, the proposed code was created by me, but I'm not a programmer, so it would take me a long time to improve it. I hope this simple code can help everyone.

[brunocalado]

These colors are easier to read:

[brunocalado]

/* Change Font Color for Roll Details */

.twbr-text-white {
    --tw-text-opacity: 1;
    color: rgb(118 241 10);
}

.twbr-text-xl {
    font-size: 1.5rem; /* Sets font size */
    font-weight: 300; /* Sets font thickness to bold */
    display: inline-block; /* Sets as an inline block element */
    color: #fff; /* Sets text color to white */
    -webkit-text-stroke: 1px rgba(0, 0, 0, 1); /* Adds a stroke around the text */
}

/* Better Rolls (SWADE) */

/* Styles for .brsw-red-text class */
.brsw-red-text {
    color: white !important; /* Failed test value */
}

/* Styles for .brsw-discarded-roll class */
.brsw-discarded-roll {
    text-decoration: line-through; 
    color: white; /* Discarded Lowest Test Value */
}

/* Styles for specific class with outline */
.text-xl.font-bold.inline-block {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Soft highlight */
}

/* Change Color & Add Soft Border to Amplification check */

.brsw-blue-text {
    color: #16b91c !important;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

/* .fa-check-double (Amplification) */

.fa-2xs {
    font-size: 1em;
    line-height: .1em;
    vertical-align: 0.15em;
}