Added attribute rolls
This commit is contained in:
parent
395bfa1616
commit
0abccf3f48
15 changed files with 440 additions and 45 deletions
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue