mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
Dana Leaman
0eb659a308
Standardize layout with grid and flexbox instead of tables Fix faulty roll button logic Add i18n so that the sheet is fully translated (still missing Aria attributes)
94 lines
2.0 KiB
CSS
94 lines
2.0 KiB
CSS
.charsheet {
|
|
background-color:#F9BE49;
|
|
}
|
|
|
|
.sheet-runner {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr 2fr;
|
|
grid-gap: 10px;
|
|
grid-template-areas:
|
|
"name name age "
|
|
"power power power "
|
|
"roll appearance appearance"
|
|
"harm appearance appearance"
|
|
"questions questions questions "
|
|
"endgame endgame endgame "
|
|
;
|
|
}
|
|
.sheet-runner .sheet-block {
|
|
display: grid;
|
|
background-color:#F9D080;
|
|
border-start-start-radius: 16px 100%;
|
|
border-end-end-radius: 16px 100%;
|
|
padding: 8px 16px;
|
|
}
|
|
.sheet-runner .sheet-name {
|
|
grid-area: name;
|
|
}
|
|
.sheet-runner .sheet-age {
|
|
grid-area: age;
|
|
}
|
|
.sheet-runner .sheet-power {
|
|
grid-area: power;
|
|
}
|
|
.sheet-runner .sheet-appearance {
|
|
grid-area: appearance;
|
|
}
|
|
.sheet-runner .sheet-roll {
|
|
grid-area: roll;
|
|
}
|
|
.sheet-runner .sheet-harm {
|
|
grid-area: harm;
|
|
justify-self: end;
|
|
justify-items: stretch;
|
|
align-self: center;
|
|
text-align: center;
|
|
}
|
|
.sheet-runner .sheet-questions {
|
|
grid-area: questions;
|
|
}
|
|
.sheet-runner .sheet-endgame {
|
|
grid-area: endgame;
|
|
}
|
|
|
|
.sheet-block label {
|
|
width: inherit;
|
|
display: grid;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sheet-block label input[type=text],
|
|
.sheet-block label input[type=number],
|
|
.sheet-block label textarea,
|
|
.sheet-block label select {
|
|
width: inherit;
|
|
}
|
|
|
|
/* Hide the radio button and style the label span */
|
|
.sheet-harm input[type=radio] {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-harm input[type=radio] + span
|
|
{
|
|
cursor: pointer;
|
|
|
|
border:1px solid black;
|
|
border-top-left-radius: 3em 100%;
|
|
border-top-right-radius: 3em 100%;
|
|
border-bottom-right-radius: 3em 100%;
|
|
border-bottom-left-radius: 3em 100%;
|
|
padding: 0.25em 1.5em;
|
|
text-align: center;
|
|
|
|
background: #F9D080;
|
|
box-shadow: 3px 3px 6px black;
|
|
}
|
|
|
|
.sheet-harm input[type=radio]:checked + span
|
|
{
|
|
background: #F9BE4A;
|
|
box-shadow: 0px 0px 7px 0px #000000 inset;
|
|
}
|