Hi folks, The character sheet I'm using for a game has a roll template that looks like this : When using dark mode, it's all messy and unreadable : I suspect that since the sheet was created before dark mode was introduced, that's why it's not super compatible. I would like to update the roll template to make it more user friendly for those who prefer dark mode. Roll template appears in the CSS file like that : /* ROLL TEMPLATE STYLE
----------------------------- */
.sheet-rolltemplate-rolls div.sheet-template-container {
border: 2px solid black;
border-radius: 0.3em;
box-shadow: inset 0px 0px 3px 1px #226aae;
text-align: center;
font-family: 'fantasy';
/* DICE ROLL STYLES
----------------------------- */
}
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult.fullfail,
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult.fullcrit,
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult.importantroll {
border: none;
}
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult.fullfail, .sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult.fullcrit {
color: #226aae;
}
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult {
background-color: transparent;
border: none;
font-size: 2em;
padding: unset;
}
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-header {
color: #226aae;
font-size: 1.5em;
border-bottom: 2px solid black;
padding: 3% 2%;
text-transform: capitalize;
margin-top: 0px;
}
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body {
background-color: whitesmoke;
}
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-row:nth-child(2n+0) {
background-color: #fefcea;
}
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-row span.sheet-inlinerollresult {
color: #226aae;
font-size: 2em;
font-weight: bold;
cursor: help;
padding: 0 3px 0 3px;
font-weight: bold;
}
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-row span.sheet-percent, .sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-row span.sheet-template-desc {
color: #226aae;
font-size: 1em;
}
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-damage {
background-color: #fff;
padding: 3% 2%;
}
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-roll {
display: inline-grid;
grid-template-columns: 1fr 1fr;
width: 100%;
}
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-roll div.sheet-template-col {
padding: 5%;
}
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-roll div.sheet-template-col:nth-of-type(2) {
border-left: 2px solid black;
}
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-roll div.sheet-template-col span {
display: block;
}
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-roll div.sheet-template-col span:last-child {
margin-top: 5%;
} Is there a section I should look at specifically ? Thanks for your help folks :)
