Added attribute rolls

This commit is contained in:
Sebastian Fischlmayr 2022-09-30 15:15:24 +02:00
parent 395bfa1616
commit 0abccf3f48
Signed by: Maverick
GPG key ID: 6379E413924A4E77
15 changed files with 440 additions and 45 deletions

View file

@ -3,11 +3,15 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
}
.healthWrapper {
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
display: grid;
}
.healthWrapper > h3 {
color: #aae;
}
.healthWrapper > .healthContainer {
grid-template-columns: repeat(3, auto);
justify-content: start;
@ -25,9 +29,13 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
z-index: 1;
-webkit-appearance: none;
appearance: none;
width: 6rem;
height: 6rem;
background-color: red;
width: 3.5rem;
height: 3.5rem;
background-color: #444;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/5f/Red_X.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 90%;
border: 2px solid #500;
border-radius: 3px;
order: 1;
@ -36,12 +44,12 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
}
.healthWrapper > .healthContainer > label.healthTrackerBox.reset {
background-color: brown;
order: 2;
}
.healthWrapper > .healthContainer > label.healthTrackerBox:after {
.healthWrapper > .healthContainer > label.healthTrackerBox > span {
content: "-1";
display: none;
position: absolute;
top: 2px;
right: 4px;
@ -53,17 +61,42 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
position: absolute;
}
.healthWrapper > .healthContainer > input:checked + .healthTrackerBox > span {
display: block;
}
.healthWrapper > .healthContainer > input:checked ~ .healthTrackerBox {
background-color: #444;
background-image: none;
order: 3;
}
.healthWrapper > .healthContainer > input:checked ~ .healthTrackerBox > span {
display: block;
}
.attr-rolls {
width: 100%;
}
.attr-rolls > .attr-rolls-grid {
grid-gap: 4px;
grid-template-columns: repeat(2, auto);
display: grid;
}
.attr-rolls > .attr-rolls-grid > p {
color: #aae;
margin-right: 30px;
font-size: 10pt;
}
.abilityBox {
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
width: 100%;
grid-template-columns: repeat(6, auto);
grid-template-columns: repeat(7, auto);
grid-auto-flow: row;
justify-content: start;
align-items: center;
@ -93,6 +126,10 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
margin-bottom: -.5em;
}
.abilityBox > h2 {
margin-bottom: 40px;
}
.sheetform {
height: 100%;
padding: 0;
@ -128,6 +165,17 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
padding: 0;
}
.sheetform .charactersheet button[type="roll"] {
width: 1.5em;
height: 1.5em;
color: #fff;
box-shadow: none;
background-color: #500;
background-image: none;
border: 0;
border-radius: 8px;
}
.sheetform .charactersheet input {
color: #aae;
background-color: #444;
@ -222,6 +270,9 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
.generic-grid {
width: auto;
min-height: 100%;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: auto;
justify-content: space-around;
@ -232,7 +283,10 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
.tab {
outline-offset: 4px;
width: 100%;
height: 40em;
min-height: 40em;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
outline: 4px double #500;
margin-top: 10px;
display: none;