Files
roll20-character-sheets/Sword World/sheet.css
T

2123 lines
59 KiB
CSS

/* Sword World 2.5 style */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans|Jim+Nightshade&display=swap');
body .charsheet * {
font-family: 'Noto Sans', serif;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
display: none;
}
input[type=number] {
-moz-appearance: textfield; /* Firefox */
appearance: textfield;
}
body .charsheet .repitem .itemcontrol {
z-index: 99;
}
body .charsheet .repitem .itemcontrol > * {
font-size: 8px;
padding: 0 10px;
}
body .charsheet sub {
bottom: unset;
}
.charsheet h1 {
background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/sword-world-dev/Sword%20World/images/logo.png') left top no-repeat;
background-size: contain;
display: block;
width: 100%;
padding: 0;
margin: 0;
text-indent: -9999px;
}
.charsheet label,
.label {
font-size: 10px;
display: inline-block;
width: 100%;
line-height: 20px;
padding: 0;
margin: 0;
box-sizing: border-box;
text-align: left;
vertical-align: middle;
text-transform: uppercase;
color: black;
border-radius: 0;
white-space: unset;
}
body .charsheet div .grid input,
body .charsheet div .grid input[type=number],
.charsheet select,
.input {
font-size: 14px;
display: inline-block;
width: 100%;
height: 20px;
border: none;
border-bottom: solid 1px black;
border-radius: 0;
padding: 0 5px;
margin: 0;
box-sizing: border-box;
background: none;
color: black;
line-height: 20px;
text-align: left;
vertical-align: middle;
outline: none;
overflow: hidden;
}
.input {
cursor: default;
}
body .charsheet div .grid input.lrg,
body .charsheet div .grid input[type=number].lrg,
.charsheet select.lrg,
.input.lrg {
font-size: 20px;
min-height: 30px;
}
body .charsheet select {
background: white;
appearance: none;
box-shadow: none;
}
.charsheet .flex {
display: flex;
margin: 0;
padding: 0;
gap: 10px;
}
.charsheet .flex.lrg {
width: fit-content;
place-self: center;
}
.charsheet .grid,
.repcontainer,
.repitem {
display: grid;
margin: 0;
padding: 0;
grid-auto-rows: minmax(min-content, max-content);
gap: 10px;
}
.repitem {
height: 20px;
}
.charsheet .smrowgap {
column-gap: 0px;
row-gap: 5px;
}
.charsheet .nogap {
gap: 0px;
}
.col2 {
grid-template-columns: repeat(2, 1fr);
}
.col2-main {
grid-template-columns: 2fr 3fr;
column-gap: 20px;
}
.col2-guild,
.repeating_consumables ~ .repcontainer .repitem {
grid-template-columns: 2fr 1fr;
}
.col2-guild .col2 {
grid-template-columns: 3fr 1fr;
}
.col2-failures {
grid-template-columns: 1fr 5fr;
}
.col2-failures .grid {
grid-template-columns: repeat(5, 2fr) 3fr repeat(4, 2fr) 3fr repeat(5, 2fr);
}
.col2-header {
grid-template-columns: 2fr 1fr;
}
.col2-classpack {
grid-template-columns: 2fr 3fr;
}
.col2-classes {
grid-template-columns: 3fr 1fr;
}
.col2-feats {
grid-template-columns: 1fr 11fr;
}
.col2-locdef {
grid-template-columns: 5fr 6fr;
}
.col2-mageva {
grid-template-columns: 6fr 5fr;
}
.col2-locations {
grid-template-columns: 1fr 5fr;
}
.col2-evasion {
grid-template-columns: 5fr 4fr;
}
.col2-monitems {
grid-template-columns: 1fr 2fr;
}
.col2-fellowtop {
grid-template-columns: 4fr 2fr;
}
.col3 {
grid-template-columns: repeat(3, 1fr);
}
.col3-languages {
grid-template-columns: 6fr 1fr 1fr;
}
.col3-workskills {
grid-template-columns: 2fr 2fr 1fr;
}
.col3-race {
grid-template-columns: 3fr 1fr 2fr;
}
.col3-packages {
grid-template-columns: 3fr 2fr 98px;
}
.col3-accdmg {
grid-template-columns: 5fr 9fr 219px;
}
.col3-title {
grid-template-columns: 1fr 8fr 3fr;
}
.repeating_monsterloot ~ .repcontainer .repitem {
grid-template-columns: 2fr 7fr 1fr;
}
.col3-fellowname {
grid-template-columns: 130px 4fr 90px;
}
.col4 {
grid-template-columns: repeat(4, 1fr);
}
.col4-xp {
grid-template-columns: 5fr 3fr 2fr 1fr;
}
.col4-armor,
.repeating_armor ~ .repcontainer .repitem {
grid-template-columns: 5fr 1fr 1fr 1fr;
}
.col4-stats2 {
grid-template-columns: 2fr 13fr 1fr 7fr;
}
.col4-sections {
grid-template-columns: 1fr 8fr 2fr 5fr;
}
.col5 {
grid-template-columns: repeat(5, 1fr);
}
.col5-abilities {
grid-template-columns: 3fr 3fr 3fr 5fr 98px;
}
.col6 {
grid-template-columns: repeat(6, 1fr);
}
.col6-stats3 {
grid-template-columns: 1fr 2fr 1fr 2fr 2fr 12fr;
}
.col6-fellowactions {
grid-template-columns: 1fr 1fr 3fr 3fr 1fr 4fr;
}
.col7 {
grid-template-columns: repeat(7, 1fr);
}
.col7-sections,
.repeating_monstersections ~ .repcontainer .repitem {
grid-template-columns: 3fr 2fr 2fr 2fr 1fr 2fr 2fr;
}
.col7-felloweffect {
grid-template-columns: 2fr 1fr 3fr 1fr 1fr 1fr 1fr;
}
.col8 {
grid-template-columns: repeat(8, 1fr);
}
.col8-initmove {
grid-template-columns: 3fr 3fr 3fr 3fr 2fr 73px 73px 73px;
}
.col8-stats1 {
grid-template-columns: 3fr 3fr 3fr 6fr 3fr 3fr 2fr 1fr;
}
.col8-stats4 {
grid-template-columns: 1fr 1fr 2fr 2fr 1fr 2fr 1fr 2fr;
}
.col13,
.repeating_powertable ~ .repcontainer .repitem {
grid-template-columns: repeat(13, 1fr);
}
.col-weapons,
.repeating_weapons ~ .repcontainer .repitem {
grid-template-columns: 7fr 4fr 2fr 2fr 2fr 3fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr 2fr 3fr;
}
.slot1 {
grid-column: 1;
}
.slot2 {
grid-column: 2;
}
.slot3 {
grid-column: 3;
}
.slot4 {
grid-column: 4;
}
.span2 {
grid-column: span 2;
}
.span2.slot1 {
grid-column: 1 / span 2;
}
.span3 {
grid-column: span 3;
}
.span4 {
grid-column: span 4;
}
.vspan2 {
grid-row: span 2;
}
.vcol {
grid-template-rows: 20px auto;
grid-auto-flow: column;
}
/* disable autofill */
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
visibility: hidden;
position: absolute;
right: 0;
}
/* slider */
body .charsheet div .switch {
background: none;
border: none;
position: relative;
display: inline-block;
width: 40px;
height: 20px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 5px;
right: 0;
bottom: 0;
background-color: darkgray;
border-radius: 20px;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: '';
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
border-radius: 50%;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: black;
}
.injury + .switch input:checked + .slider {
background-color: black;
}
input:focus + .slider {
border: solid 1px gold;
}
input:checked + .slider:before {
-webkit-transform: translateX(16px);
-ms-transform: translateX(16px);
transform: translateX(16px);
}
/* autoexpand */
.auto-expand {
position: relative;
cursor: text;
word-wrap: break-word;
min-height: 20px;
width: 100%;
}
.auto-expand.tall {
min-height: 100px;
}
.auto-expand span {
visibility: hidden;
white-space: pre-wrap;
display: block;
line-height: 20px;
}
.auto-expand textarea {
position: absolute;
z-index: 1;
top: 0;
left: 0;
margin: 0;
overflow: hidden;
resize: none;
line-height: 20px;
height: 100%;
width: 100%;
display: block;
box-sizing: border-box;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
color: inherit;
letter-spacing: inherit;
padding: inherit;
text-align: inherit;
text-transform: inherit;
}
.auto-expand.lrg span,
.auto-expand.lrg textarea {
font-size: 20px;
}
.auto-expand.quote span,
.auto-expand.quote textarea {
font-style: italic;
}
.col2-header .auto-expand textarea {
border-bottom: solid 1px black;
}
/* radio stuff */
.charsheet .grid input[type='radio'] {
-webkit-appearance: none;
appearance: none;
background: white;
width: 10px;
height: 10px;
margin: 0;
padding: 0;
cursor: pointer;
border: solid 1px black;
display: grid;
place-content: center;
}
.charsheet .grid input[type='radio']:before {
content: '';
width: 8px;
height: 8px;
transform: scale(1);
transition: 120ms transform ease-in-out;
background: black;
line-height: 8px;
font-size: 10px;
}
.charsheet .grid input[type='radio'].standard:before {
transform: scale(0);
}
.charsheet .grid input[type='radio'].standard:checked:before {
transform: scale(1);
}
.charsheet .grid input[type='radio']:checked ~ input[type='radio']:before {
transform: scale(0);
}
.charsheet .grid input[type='radio']:not(.standard):first-child {
border: none;
background: none;
transform: none;
}
.charsheet .grid input[type='radio']:not(.standard):first-child:before {
background: none;
}
.charsheet .grid input[type='radio']:not(.standard):first-child:hover:before {
content: '✖';
}
/* checkbox stuff */
.charsheet .grid .input.check-yes,
.charsheet .grid .input.check-na,
.charsheet .grid input[type='checkbox'] {
-webkit-appearance: none;
appearance: none;
background: none;
margin: 0;
padding: 0;
border: none;
display: grid;
place-content: center;
}
.charsheet .grid input[type='checkbox']:before {
transition: 120ms all ease-in-out;
content: '';
}
.charsheet .grid input[type='checkbox']:hover:before {
color: gold;
}
.charsheet .grid input[type='checkbox']:hover:before,
.charsheet .grid input[type='checkbox']:checked:before {
content: '◯';
}
.charsheet .grid input[type='checkbox']:checked:hover:before {
content: '✖';
}
.charsheet .grid input[type=checkbox].standard {
background: white;
width: 10px;
height: 10px;
border: solid 1px black;
}
.charsheet .grid input[type=checkbox].standard:hover:before,
.charsheet .grid input[type=checkbox].standard:before {
content: '';
width: 8px;
height: 8px;
transform: scale(0);
transition: 120ms transform ease-in-out;
background: black;
line-height: 8px;
}
.charsheet .grid input[type='checkbox'].standard:checked:hover:before,
.charsheet .grid input[type='checkbox'].standard:checked:before {
content: '';
transform: scale(1);
}
/* tabs */
.tabs {
display: flex;
margin: 0 -20px 10px -20px;
padding: 0 20px;
border-bottom: solid 1px black;
}
.tabs div {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.tabs button {
background: whitesmoke;
height: 30px;
padding: 5px 15px;
border: none;
text-transform: uppercase;
font-weight: bold;
font-size: 10px;
color: silver;
}
.tabs button:hover {
background: gold;
color: white;
}
.toggle-tabs[value='page1'] ~ .tabs div.tab-page1 button,
.toggle-tabs[value='page2'] ~ .tabs div.tab-page2 button,
.toggle-tabs[value='monster'] ~ .tabs div.tab-monster button,
.toggle-tabs[value='fellow'] ~ .tabs div.tab-fellow button,
.toggle-tabs[value='settings'] ~ .tabs div.tab-settings button {
background: darkgray;
color: white;
}
.charactersheet .toggle-monster:not([value='0']) ~ .tabs div.tab-page1,
.charactersheet .toggle-monster:not([value='0']) ~ .tabs div.tab-page2,
.charactersheet .toggle-monster:not([value='1']) ~ .tabs div.tab-monster,
.charactersheet .toggle-monster:not([value='2']) ~ .tabs div.tab-fellow,
.charactersheet .toggle-monster:not([value='0']) ~ div .monster0,
.charactersheet .toggle-monster:not([value='1']) ~ div .monster1,
.charactersheet .toggle-monster:not([value='2']) ~ div .monster2,
.charactersheet .toggle-sw20:not([value='1']) ~ div .sw20-class,
.charactersheet .toggle-aog:not([value='1']) ~ div .aog-class,
.charactersheet .toggle-workskills:not([value='1']) ~ div .workskills {
display: none;
}
body .charactersheet .page1,
body .charactersheet .page2,
body .charactersheet .monster,
body .charactersheet .fellow,
body .charactersheet .settings {
display: none;
}
body .charactersheet .page1:after,
body .charactersheet .page2:after,
body .charactersheet .monster:after,
body .charactersheet .fellow:after,
body .charactersheet .settings:after {
content: 'Sword World 2.5 Character Sheet Ver.0.177.2 | https://app.roll20.net/users/39343/miriable';
text-align: right;
font-size: 8px;
}
body .charactersheet .page1:after {
grid-column: span 2;
}
body .charactersheet .settings:after {
grid-column: span 4;
}
body .toggle-tabs[value='page1'] ~ div.page1,
body .toggle-tabs[value='page2'] ~ div.page2,
body .toggle-tabs[value='monster'] ~ div.monster,
body .toggle-tabs[value='fellow'] ~ div.fellow,
body .toggle-tabs[value='settings'] ~ div.settings {
display: grid;
}
.charactersheet .toggle-monster:not([value='0']) ~ .tabs .roller {
display: none;
}
body .charsheet .tabs .roller {
flex: 1;
text-align: right;
}
body .charsheet .tabs .roller button,
.page1 .repeating_workskills ~ .repcontainer .repitem button[type=action],
body .charsheet .monster div:not(.repcontrol) > button,
.fellow .col6-fellowactions button {
background: none;
border: none;
border-radius: 0;
padding: 0;
margin: 0;
box-shadow: none;
}
body .charsheet .tabs .roller button {
border-left: solid 1px black;
border-right: solid 1px black;
padding: 0 5px;
height: 100%;
}
body .charsheet .tabs .roller button:before,
.page1 .repeating_workskills ~ .repcontainer .repitem button[type=action]:before,
body .charsheet .monster div:not(.repcontrol) > button:before,
.fellow .col6-fellowactions button:before {
content: 'F';
font-family: 'dicefontd6';
color: black;
}
.fellow .col6-fellowactions .header button:before {
color: white;
}
body .charsheet .tabs .roller button:hover:before,
.page1 .repeating_workskills ~ .repcontainer .repitem button[type=action]:hover:before,
body .charsheet .monster div:not(.repcontrol) > button:hover:before,
.fellow .col6-fellowactions button:hover:before {
color: gold;
}
/* end tabs */
.charsheet .header {
background: black;
color: white;
text-align: center;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
height: 20px;
line-height: 20px;
}
.charsheet .footnote {
font-size: 9px;
line-height: unset;
text-align: center;
}
.charsheet .settings .footnote {
text-align: left;
}
.charsheet *:not(label).refmark {
font-size: 10px;
line-height: unset;
}
.charsheet .refmark:before {
content: '※';
font-family: cursive;
}
.guild {
position: relative;
border: 20px solid transparent;
padding: 10px;
border-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/sword-world-dev/Sword%20World/images/border.png') 65 stretch;
}
.page1 .guild:before {
content: '';
position: absolute;
background: white;
right: -20px;
bottom: -20px;
width: 30px;
height: 30px;
}
.guild .alevel {
position: relative;
}
body .charsheet .guild .alevel label {
position: absolute;
top: 40px;
right: -12px;
text-align: center;
z-index: 1;
}
body .charsheet .guild .alevel .input {
position: absolute;
right: -25px;
bottom: -25px;
background: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/sword-world-dev/Sword%20World/images/circle.png') center center no-repeat;
background-size: contain;
border: none;
width: 120px;
height: 120px;
line-height: 150px;
text-align: center;
font-size: 24px;
}
body .charsheet .profile {
position: relative;
border: solid 1px black;
padding: 10px;
}
body .charsheet .profile > .label {
position: absolute;
top: -12px;
left: 10px;
}
body .charsheet .col2-failures > label {
line-height: unset;
}
.col2-failures .grid {
place-content: center;
}
body .charsheet .grid.lined > .grid > *,
body .charsheet .grid.lined .repcontainer .repitem > div {
outline: solid 1px black;
box-sizing: border-box;
height: 20px;
}
body .charsheet .grid.lined > .grid > *.vspan2,
body .charsheet .grid.lined .repcontainer .repitem > div.vspan2 {
height: 40px;
}
body .charsheet .grid.lined.single > *:not(.repcontrol) {
border: none;
border-left: solid 1px black;
border-right: solid 1px black;
box-sizing: border-box;
}
body .charsheet .grid.lined.single > *:not(.repcontrol):nth-child(2) {
border-top: solid 1px black;
}
body .charsheet .grid.lined.single > *:nth-last-child(2) {
border-bottom: solid 1px black;
}
body .charsheet .grid.lined.single > .grid > *,
body .charsheet .grid.lined.single .repcontainer .repitem > div {
outline: none;
}
body .charsheet .grid.lined.single > .grid > * {
border-top: solid 1px black;
}
body .charsheet .grid.lined > .grid > *:not(.header),
body .charsheet .grid.lined .repcontainer .repitem > div:not(.itemcontrol) {
position: relative;
background: white;
}
body .charsheet div .grid.lined input,
body .charsheet div .grid.lined input[type=number],
body .charsheet div .grid.lined .input {
border: none;
}
.check-yes:before {
content: '◯';
}
.check-na:before {
content: '─';
}
body .charsheet .grid.lined .repcontainer {
gap: 0;
}
body .charsheet .grid.lined .repcontainer .repitem {
gap: 0;
}
body .charsheet .grid.lined .repcontainer .repitem input[type='checkbox']:before {
content: '─';
}
body .charsheet .grid.lined .repcontainer .repitem input[type='checkbox']:hover:before,
body .charsheet .grid.lined .repcontainer .repitem input[type='checkbox']:checked:before {
content: '◯';
}
body .charsheet .grid.lined .repcontainer .repitem input[type='checkbox']:checked:hover:before {
content: '✖';
}
body .charsheet .grid.lined label,
body .charsheet .grid.lined .label {
padding: 0 2px;
}
body .charsheet .col3-languages *:nth-child(3n+2),
body .charsheet .col3-languages *:nth-child(3n+3),
.repeating_workskills ~ .repcontainer .repitem input[type=number] {
text-align: center;
}
.repeating_languages ~ .repcontainer .repitem {
grid-template-columns: 6fr 1fr 1fr;
}
.repeating_workskills ~ .repcontainer .repitem {
grid-template-columns: 2fr 2fr 1fr;
}
body .charsheet .grid.lined .repeating_workskills ~ .repcontainer .repitem > div:not(.itemcontrol) {
position: unset;
}
.profile > .label,
.col5-abilities > * label,
body .charsheet .box + div:not(.stretch) > div:nth-child(even) label,
body .charsheet .boxstat:not(.nogap) > label,
body .charsheet .boxstat .label {
-webkit-font-smoothing: antialiased;
text-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white,
0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white,
0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white,
0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white,
0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white,
0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white,
0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white,
0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white;
}
.col2-guild .grid.vcol label {
display: grid;
gap: 0;
grid-template-columns: repeat(2, 1fr);
}
.col2-guild .grid.vcol label:after {
content: 'Grade';
text-align: right;
}
.col2-guild .grid.vcol:first-child label:after {
content: 'Points';
}
.charsheet .col5-abilities .header {
margin-bottom: 5px;
}
.charsheet .grid .col5-abilities {
gap: 5px;
}
.charsheet .grid .col5-abilities.shaded {
background: linear-gradient(90deg, white 79%, gainsboro 79%);
padding: 5px 0;
gap: 10px;
}
.col5-abilities.shaded > * {
position: relative;
border: solid 1px black;
background: white;
}
.col5-abilities.shaded > *:nth-child(9n+1),
.col5-abilities.shaded > *:nth-child(9n+2),
.col5-abilities.shaded > *:nth-child(9n+6) {
margin-right: 5px;
}
.col5-abilities.shaded > *:nth-child(9n+2),
.col5-abilities.shaded > *:nth-child(9n+6),
.col5-abilities.shaded > *:nth-child(9n+3),
.col5-abilities.shaded > *:nth-child(9n+7) {
margin-left: 5px;
}
.col5-abilities.shaded > *:nth-child(9n+4),
.col5-abilities.shaded > *:nth-child(9n+8) {
margin-left: 10px;
}
.col5-abilities.shaded > *:nth-child(9n+5),
.col5-abilities.shaded > *:nth-child(9n+9) {
border: solid 2px black;
margin-right: 10px;
}
body .charsheet .col5-abilities > div input[type=number],
body .charsheet .col5-abilities > div .input {
border: none;
height: 35px;
line-height: 35px;
text-align: center;
}
body .charsheet .col5-abilities > div.vspan2 input[type=number] {
height: 80px;
}
.col5-abilities > * label {
position: absolute;
top: -12px;
left: 0;
right: 0;
width: min-content;
margin: auto;
}
.col5-abilities.shaded > *:not(.vspan2):before {
content: '+';
position: absolute;
left: -15px;
bottom: 0;
}
.col5-abilities.shaded > *:nth-child(9n+4):before,
.col5-abilities.shaded > *:nth-child(9n+8):before {
content: '=';
}
.col5-abilities.shaded > *:nth-child(9n+5):before,
.col5-abilities.shaded > *:nth-child(9n+9):before {
content: ' ';
border-bottom: solid 3px black;
left: -12px;
width: 10px;
height: 10px;
}
.col5-abilities.shaded > *:nth-child(9n+3) label,
.col5-abilities.shaded > *:nth-child(9n+7) label {
font-family: 'dicefontd6';
left: unset;
top: unset;
bottom: 2px;
right: 2px;
text-shadow: none;
text-transform: unset;
font-size: 14px;
}
.col5-abilities.shaded > *:nth-child(9n+5) label,
.col5-abilities.shaded > *:nth-child(9n+9) label {
top: -2px;
left: 2px;
right: unset;
text-shadow: none;
text-transform: unset;
}
.charsheet .classes {
position: relative;
border: solid 1px black;
background: linear-gradient(90deg, white 74%, black 74%, black 74.5%, white 74.5%);
}
.charsheet .classes > input[type=checkbox] {
position: absolute;
left: 0;
top: 1px;
width: 20px;
height: 20px;
}
.charsheet .classes > input[type=checkbox]:before {
font-family: 'Pictos';
color: white;
}
.charsheet .classes > input[type='checkbox']:hover:before,
.charsheet .classes > input[type=checkbox]:before {
content: '_';
}
.charsheet .classes > input[type='checkbox']:checked:hover:before,
.charsheet .classes > input[type='checkbox']:checked:before {
content: '&';
}
.col2-classes {
padding: 5px
}
body .charsheet .col2-classes div {
box-sizing: border-box;
height: 20px;
}
body .charsheet .col2-classes div input[type=number],
body .charsheet .col2-classes .input {
border: none;
}
body .charsheet .col2-classes div input[type=number] {
text-align: center;
}
body .charsheet .toggle-class[value='1'] ~ .col2-classes .toggle-class[value='0'] + div,
body .charsheet .toggle-class[value='1'] ~ .col2-classes .toggle-class[value='0'] + div + div {
display: none;
}
.col3-packages {
background: linear-gradient(90deg, white 64%, gainsboro 64%);
height: min-content;
}
.col3-packages > div:nth-child(1),
.col3-packages > div:nth-child(2) {
background: white;
margin-bottom: 5px;
}
.col3-packages > div:nth-child(2) {
font-size: 10px;
}
.col3-packages > div:nth-child(3),
.col3-packages > div:nth-child(4) {
margin-bottom: 10px;
}
body .charsheet .box {
position: relative;
border: solid 1px black;
padding: 2px 2px 10px 2px;
grid-template-columns: 5fr 1fr;
}
body .charsheet .box.wide {
grid-template-columns: 5fr 1fr 5fr 1fr;
}
body .charsheet .box label {
position: relative;
margin-left: 14px;
}
body .charsheet .box label:before {
position: absolute;
content: '';
background: black;
border: solid 1px black;
width: 10px;
height: 10px;
top: 4px;
left: -14px;
}
body .charsheet .box .class-level[value='0'] + label:before {
background: none;
}
body .charsheet .box .class-level[value='0'] + label + span {
visibility: hidden;
}
body .charsheet .box span {
text-align: right;
}
body .charsheet .box:after {
position: absolute;
content: 'Class Levels';
bottom: 0;
width: 100%;
text-align: center;
font-size: 10px;
}
body .charsheet .box + div div:nth-child(odd) {
position: relative;
height: fit-content;
line-height: 20px;
padding-left: 10px;
font-size: 10px;
}
body .charsheet .box + div div:nth-child(odd):before {
position: absolute;
content: '+';
top: 0;
left: 2px;
}
body .charsheet .box + div div:nth-child(odd):after {
position: absolute;
content: '=';
bottom: 0;
right: -6px;
}
body .charsheet .box + div.nogap div:nth-child(odd):after {
right: 4px;
}
body .charsheet .box + div > div:nth-child(even),
body .charsheet .boxstat {
position: relative;
background: white;
border: solid 2px black;
margin-right: 10px;
place-content: center;
}
body .charsheet .boxstat:not(.black) {
border: solid 1px black;
}
body .charsheet .boxstat.total,
body .charsheet .boxstat.total + .boxstat,
body .charsheet *:not(.nogap) > .boxstat {
margin: 0;
}
body .charsheet .boxstat.total label {
z-index: 1;
}
body .charsheet .boxstat.nogap {
margin-right: 0;
place-content: unset;
}
body .charsheet .boxstat.nogap:before {
position: absolute;
content: '';
background: white;
top: -2px;
left: 0;
margin: 0 10px;
width: calc(100% - 20px);
height: calc(100% + 4px);
}
body .charsheet .boxstat.nogap > * {
z-index: 1;
padding: 0 10px;
}
body .charsheet .boxstat.move:after {
position: absolute;
content: 'm';
bottom: 0;
right: 2px;
font-size: 10px;
}
body .charsheet .boxstat.move + .move + .move {
margin-left: 10px;
margin-right: 0;
}
body .charsheet .boxstat.move + .move + .move:before {
position: absolute;
content: 'x3=';
bottom: 0;
left: -19px;
font-size: 10px;
}
body .charsheet .box + div.nogap > div:nth-child(2n+4) {
border-top: none;
}
body .charsheet .box + div > div:nth-child(even) button.input,
body .charsheet .box + div > div:nth-child(even) button.input:hover,
body .charsheet div .grid div.magic-circle button.input,
body .charsheet div .grid div.magic-circle button.input:hover,
body .charsheet div .grid div.boxstat.total button.input,
body .charsheet div .grid div.boxstat.total button.input:hover,
body .charsheet div .grid div.boxstat.black button.input,
body .charsheet div .grid div.boxstat.black button.input:hover,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(9) button.input,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(9) button.input:hover,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(24) button.input,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(24) button.input:hover {
z-index: 1;
position: absolute;
left: 0;
top: 0;
background: none;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: none;
box-shadow: none;
cursor: pointer;
}
body .charsheet .box + div > div:nth-child(even) button:before,
body .charsheet div .grid div.magic-circle button:before,
body .charsheet div .grid div.boxstat.total button:before,
body .charsheet div .grid div.boxstat.black button:before,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(9) button:before,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(24) button:before {
content: 'F';
font-family: 'dicefontd6';
position: absolute;
right: 0;
top: 0;
display: grid;
align-items: center;
height: 100%;
text-shadow: none;
font-size: 17px;
}
body .charsheet div .grid div.magic-circle button:before {
right: 4px;
}
body .charsheet div .grid div.boxstat.total button:before,
body .charsheet div .grid div.boxstat.black button:before,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(9) button:before,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(24) button:before {
right: 8px;
}
body .charsheet .box + div > div:nth-child(even) button:hover:before,
body .charsheet div .grid div.magic-circle button:hover:before,
body .charsheet div .grid div.boxstat.total button:hover:before,
body .charsheet div .grid div.boxstat.black button:hover:before,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(9) button:hover:before,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(24) button:hover:before {
color: gold;
}
body .charsheet .box + div > div:nth-child(even) label,
body .charsheet .boxstat > label {
position: absolute;
top: -8px;
left: 0;
right: 0;
width: auto;
line-height: 100%;
margin: auto;
text-align: center;
}
body .charsheet .box.wide + div.stretch > div:nth-child(even) {
grid-template-columns: 1fr 1fr;
place-content: center;
}
body .charsheet .box.wide + div.stretch > div:nth-child(even) label,
body .charsheet .boxstat.nogap label {
position: unset;
width: auto;
height: auto;
margin: 0 5px;
line-height: 100%;
text-align: left;
}
body .charsheet .boxstat .label.rotate {
position: absolute;
top: 0;
bottom: 0;
text-align: center;
writing-mode: vertical-rl;
left: -10px;
width: fit-content;
}
body .charsheet div.grid .boxstat input,
body .charsheet div.grid .boxstat input[type=number] {
border: none;
}
body .charsheet .boxstat > div.col2 {
grid-template-columns: 4fr 1fr;
}
body .charsheet .boxstat > div.col2 div:last-child input {
text-align: center;
}
body .charsheet .boxstat > div.col2 div:last-child:before {
content: '+';
margin: -5px;
}
body .charsheet .box + div > div:nth-child(even) .input,
body .charsheet div .boxstat input[type=number],
body .charsheet .boxstat .input {
border: none;
height: 35px;
line-height: 35px;
text-align: center;
}
body .charsheet .box.wide + div.stretch > div:nth-child(even) .input {
height: auto;
line-height: 100%;
}
body .charsheet .box + div {
grid-template-columns: auto 98px;
}
body .charsheet .box.wide + div {
grid-template-columns: 2fr 5fr;
grid-auto-rows: auto;
}
body .col2-feats .header {
text-align: left;
padding-left: 5px;
}
.adventurer-level[value='1'] ~ .grid .col2-feats *:nth-child(1n+5),
.adventurer-level[value='2'] ~ .grid .col2-feats *:nth-child(1n+5),
.adventurer-level[value='3'] ~ .grid .col2-feats *:nth-child(1n+7),
.adventurer-level[value='4'] ~ .grid .col2-feats *:nth-child(1n+7),
.adventurer-level[value='5'] ~ .grid .col2-feats *:nth-child(1n+9),
.adventurer-level[value='6'] ~ .grid .col2-feats *:nth-child(1n+9),
.adventurer-level[value='7'] ~ .grid .col2-feats *:nth-child(1n+11),
.adventurer-level[value='8'] ~ .grid .col2-feats *:nth-child(1n+11),
.adventurer-level[value='9'] ~ .grid .col2-feats *:nth-child(1n+13),
.adventurer-level[value='10'] ~ .grid .col2-feats *:nth-child(1n+13),
.adventurer-level[value='11'] ~ .grid .col2-feats *:nth-child(1n+15),
.adventurer-level[value='12'] ~ .grid .col2-feats *:nth-child(1n+15),
.adventurer-level[value='13'] ~ .grid .col2-feats *:nth-child(1n+17),
.adventurer-level[value='14'] ~ .grid .col2-feats *:nth-child(1n+17),
.adventurer-level[value='15'] ~ .grid .col2-feats *:nth-child(1n+19) {
display: none;
}
/* page 2 */
.col8-initmove .box + .col2 {
grid-auto-rows: unset;
}
.col-weapons div.header {
position: relative;
}
.col-weapons div:nth-child(n+4):nth-child(-n+6),
.col-weapons div:nth-child(n+8):nth-child(-n+21) {
font-size: 7px;
line-height: unset;
display: grid;
align-items: center;
}
.col-weapons div:nth-child(n+8):nth-child(-n+18):before {
position: absolute;
content: '';
left: 0;
right: 0;
top: 1px;
width: 16px;
height: 16px;
margin: auto;
border: solid 1px white;
border-radius: 50%;
}
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(n+11):nth-child(-n+22) * {
font-size: 10px;
line-height: unset;
}
body .charsheet .grid.lined .repeating_weapons ~ .repcontainer .repitem div:nth-child(9),
body .charsheet .grid.lined .repeating_weapons ~ .repcontainer .repitem div:nth-child(24),
body .charsheet .boxstat.total {
background: black;
padding: 0 2px;
}
body .charsheet .boxstat.total {
padding: 2px;
}
body .charsheet .boxstat.total + .total {
padding: 2px 2px 2px 0;
}
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(9) span,
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(24) span,
body .charsheet .boxstat.total input:not(button),
body .charsheet .boxstat.total .input:not(button) {
display: block;
background: white;
height: 100%;
clip-path: polygon(
0% 20%,
15% 0%,
85% 0%,
100% 20%,
100% 80%,
85% 100%,
15% 100%,
0% 80%
);
}
body .charsheet .boxstat.total .input {
height: 35px;
}
body .charsheet .repeating_weapons ~ .repcontainer .repitem:last-child div:nth-child(9),
body .charsheet .repeating_weapons ~ .repcontainer .repitem:last-child div:nth-child(24) {
padding-bottom: 2px;
}
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(22) {
z-index: 0;
}
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(22):before {
position: absolute;
content: '';
left: 0;
right: 0;
top: 1px;
width: 16px;
height: 16px;
margin: auto;
border: solid 1px black;
border-radius: 50%;
z-index: -1;
}
body .charsheet .repeating_weapons ~ .repcontainer .repitem div:nth-child(22) input {
z-index: 1;
}
body .charsheet .repeating_weapons ~ .repcontainer .repitem input[type=number],
body .charsheet .repeating_weapons ~ .repcontainer .repitem .input {
text-align: center;
}
.repeating_accessories ~ .repcontainer .repitem {
grid-template-columns: 1fr 5fr;
}
body .charsheet .col2-locations div,
body .charsheet .grid .col2-locations input,
body .charsheet .grid .col4-armor input[type=number],
.repeating_accessories ~ .repcontainer .repitem div,
.repeating_accessories ~ .repcontainer .repitem input,
.repeating_armor ~ .repcontainer .repitem input[type=number] {
text-align: center;
}
body .charsheet .col2-locations *:nth-child(13),
body .charsheet .col2-locations *:nth-child(15) {
font-size: 7px;
}
body .charsheet .col2-evasion div:nth-child(2) div:nth-child(2) {
margin-right: 0;
}
body .charsheet div .grid .magic-circle {
display: none;
}
body .charsheet div .grid .magic-power:not([value='']) + .magic-circle {
display: grid;
}
.magic-circle span {
text-align: center;
}
.magic-circle > span:first-child {
position: relative;
display: grid;
aspect-ratio : 1 / 1;
width: 100%;
height: unset;
border: solid 1px black;
border-radius: 50%;
align-items: center;
}
.magic-circle span:first-child span {
border: none;
}
body .charsheet .magic-circle > span:nth-child(2) {
font-size: 7px;
}
body .charsheet .magic-circle > span:nth-child(3) {
border: none;
font-size: 13px;
white-space: nowrap;
padding: 0;
}
body .charsheet div .grid .magic-circle .input.lrg {
min-height: unset;
}
body .charsheet .lined.black {
border: solid 2px black;
}
body .charsheet .powertable div,
.repeating_powertable ~ .repcontainer .repitem div,
.repeating_powertable ~ .repcontainer .repitem input[type=number] {
font-size: 10px;
line-height: unset;
display: grid;
align-items: center;
text-align: center;
}
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+1),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+2),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+3),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+4),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+5),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+6),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+7),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+8),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+9),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+10),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+11),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+12),
body .charsheet .grid.lined .grid.powertable > div:nth-child(26n+13),
body .charsheet .grid.lined .repeating_powertable ~ .repcontainer .repitem:nth-child(odd) > div {
background: gainsboro;
}
body .charsheet .grid.lined .grid.powertable > div:first-child {
background:
linear-gradient(to top right,
gainsboro 0%,
gainsboro calc(50% - 0.8px),
black 50%,
gainsboro calc(50% + 0.8px),
gainsboro 100%);
}
body .charsheet .grid.lined .grid.powertable > div:nth-child(13) {
background:
linear-gradient(to top left,
gainsboro 0%,
gainsboro calc(50% - 0.8px),
black 50%,
gainsboro calc(50% + 0.8px),
gainsboro 100%);
}
body .charsheet .grid.lined .repeating_powertable ~ .repcontainer .repitem > div button,
body .charsheet .grid.lined .repeating_powertable ~ .repcontainer .repitem > div button:hover,
body .charsheet .grid.lined .grid.powertable > div button,
body .charsheet .grid.lined .grid.powertable > div button:hover {
background: none;
display: grid;
margin: 0;
padding: 0;
place-content: center;
cursor: pointer;
}
body .charsheet .grid.lined .repeating_powertable ~ .repcontainer .repitem > div button:before,
body .charsheet .grid.lined .grid.powertable > div button:before {
content: 'F';
font-family: 'dicefontd6';
font-size: 10px;
}
body .charsheet .grid.lined .repeating_powertable ~ .repcontainer .repitem > div button:hover:before,
body .charsheet .grid.lined .grid.powertable > div button:hover:before {
color: gold;
}
body .charsheet .powertable div:nth-child(n+2):nth-child(-n+12) {
font-size: 7px;
}
body .charsheet .powertable div:nth-child(n+2):nth-child(-n+12):before {
position: absolute;
content: '';
left: 0;
right: 0;
top: 1px;
width: 16px;
height: 16px;
margin: auto;
border: solid 1px black;
border-radius: 50%;
}
.repeating_consumables ~ .repcontainer {
margin-top: -10px;
gap: 5px;
}
.repeating_consumables ~ .repcontainer .repitem {
place-content: center;
align-items: center;
}
body .charsheet .toggle-cards + div {
display: none;
}
body .charsheet .toggle-cards:not([value='0']) + div {
display: grid;
}
.charsheet .cards .header {
background: dimgray;
}
body .charsheet .profile .cards input[type=number] {
text-align: center;
}
/* monster */
body .charsheet .monster span.input {
border: none;
}
.charsheet .monster > div:not(.lined) {
border: solid 1px black;
}
.monster .repitem {
height: unset;
}
body .charsheet .monster input[type=text],
body .charsheet .monster div input[type=number],
.monster .auto-expand textarea {
border-bottom: solid 1px gainsboro;
}
body .charsheet div .col3-title input,
body .charsheet div .col3-title input[type=number] {
border: none;
}
.charsheet .col3-title input:not(:first-child) {
background: black;
color: white;
}
.charsheet .col3-title input.label {
height: 30px;
text-align: right;
}
.charsheet .monster > div:nth-child(2),
.charsheet .monster > div:nth-child(4),
.charsheet .monster > div:nth-child(7) {
padding: 5px 10px;
}
.charsheet .monster .header {
background: gray;
}
body .charsheet .monster > .grid.lined:nth-child(3) .repcontainer .repitem:nth-child(odd) > div {
background: gainsboro;
}
.charsheet .monster .lined input[type=text],
.charsheet .monster .lined input[type=number],
.charsheet .monster .lined .input {
text-align: center;
}
body .charsheet .monster .grid.lined .grid.col3.damage {
position: relative;
}
body .charsheet .monster .grid.lined .grid.col3.damage:before {
content: '+';
position: absolute;
bottom: 2px;
left: calc(33% - 3.5px);
}
body .charsheet .monster .repeating_monsterskills ~ .repcontainer .repitem .grid.col4 .input:nth-child(5):before,
body .charsheet .monster .grid .grid.col4 .input:nth-child(4):before {
content: '(';
}
body .charsheet .monster .repeating_monsterskills ~ .repcontainer .repitem .grid.col4 .input:nth-child(5):after,
body .charsheet .monster .grid .grid.col4 .input:nth-child(4):after {
content: ')';
}
body .charsheet .monster .grid.lined .maxvs {
position: relative;
}
body .charsheet .monster .grid.lined .maxvs:before,
body .charsheet .monster .grid.lined .maxvs:after {
position: absolute;
bottom: 2px;
font-size: 7px;
height: 14px;
}
body .charsheet .monster .grid.lined .maxvs:before {
content: 'MAX';
left: calc(25% - 9px);
}
body .charsheet .monster .grid.lined .maxvs:after {
content: 'CURRENT';
right: calc(25% - 19px);
}
body .charsheet .monster .grid .grid.divide,
body .charsheet .monster .grid.lined .repcontainer .repitem > .grid.divide {
background:
linear-gradient(105deg,
white 0%,
white calc(50% - 0.8px),
darkgray 50%,
white calc(50% + 0.8px),
white 100%);
}
body .charsheet .monster > .grid.lined:nth-child(3) .repcontainer .repitem:nth-child(odd) > .grid.divide {
background:
linear-gradient(105deg,
gainsboro 0%,
gainsboro calc(50% - 0.8px),
darkgray 50%,
gainsboro calc(50% + 0.8px),
gainsboro 100%);
}
body .charsheet .monster .grid.nogap:nth-child(5) {
border: none;
}
body .charsheet .monster .grid.nogap:nth-child(5) > div:first-child {
border: solid 1px black;
}
body .charsheet .monster .grid.nogap:nth-child(5) > div:nth-child(3) {
border: solid 1px black;
border-top: none;
}
body .charsheet .monster .repeating_monsterskills ~ .repcontainer .repitem {
padding: 5px 10px;
}
body .charsheet .monster .repeating_monsterskills ~ .repcontainer .repitem input[type=number],
body .charsheet .monster .repeating_monsterskills ~ .repcontainer .repitem .input {
text-align: center;
}
/* begin dropdown */
body .charsheet div .grid .dropdown input,
body .charsheet div .grid .dropdown-content {
display: none;
}
label.dropdown {
position: relative;
display: block;
cursor: pointer;
width: fit-content;
}
.dropbtn {
cursor: pointer;
transition: 0.35s ease-out;
text-align: center;
}
.dropdown .dropdown-content {
position: absolute;
top: 50%;
background-color: #f7f7f7;
min-width: 50vw;
padding: 5px 10px;
border: solid 1px darkgray;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
z-index: 99;
transition: 0.35s ease-out;
}
body .charsheet div .grid .dropdown > input:checked ~ .dropdown-content {
display: grid;
transform: translateY(5px);
}
.dropbtn:hover,
.dropdown > input:checked ~ .dropbtn {
color: gold;
}
/* end dropdown */
.monster .repeating_monsterskills ~ .repcontainer .repitem .grid.col4.nogap {
width: 33%;
}
.type-declared,
.type-preparation,
.toggle-template[value=""] ~ div .grid.col4.nogap,
.toggle-template[value="magic"] ~ div .grid.col4.nogap button.target,
.toggle-template[value="resistance"] ~ div .grid.col4.nogap button.check,
.toggle-action[value="section"] ~ div .grid.col4.nogap,
.toggle-action[value="section"] ~ div.auto-expand {
display: none;
}
.toggle-action[value="section"] ~ div input {
font-weight: bold;
}
.toggle-declared[value="1"] ~ div .type-declared,
.toggle-preparation[value="1"] ~ div .type-preparation {
display: block;
}
.action-type:before {
content: '◯';
}
.toggle-action[value="major"] ~ div .action-type:before {
content: '▶';
}
.toggle-action[value="minor"] ~ div .action-type:before {
content: '7';
font-family: 'Pictos';
}
.toggle-action[value="section"] ~ div .action-type:before {
content: '●';
font-size: 26px;
line-height: 16px;
}
.type-declared:before {
content: 'y';
font-family: 'Pictos Custom';
text-transform: initial;
font-size: 16px;
font-weight: normal;
line-height: 24px;
}
.type-preparation:before {
content: '△';
}
body .charsheet .grid.lined .repeating_monsterloot ~ .repcontainer .repitem div:nth-child(2) {
background: gainsboro;
}
.repeating_monsterloot ~ .repcontainer .repitem div:nth-child(3) input[type=text] {
text-align: left;
}
.repeating_monsterloot ~ .repcontainer .repitem div:nth-child(4) {
text-align: center;
}
.repeating_monsterloot ~ .repcontainer .repitem div:nth-child(4) button:before {
content: 'g';
font-family: 'Pictos Three';
}
/* fellow */
.charactersheet .toggle-fautocalc[value='0'] ~ .fellow .acalc,
.charactersheet .toggle-fautocalc[value='1'] ~ .fellow .mcalc {
display: none
}
body .charsheet .hex {
display: block;
position: relative;
background: black;
height: 100%;
clip-path: polygon(
0% 50%,
30% 0%,
70% 0%,
100% 50%,
70% 100%,
30% 100%
);
aspect-ratio : 1.2 / 1;
}
body .charsheet .hex:before {
position: absolute;
content: '';
background: white;
width: 100%;
height: 100%;
clip-path: polygon(
3% 50%,
31% 3%,
69% 3%,
97% 50%,
69% 97%,
31% 97%
);
z-index: -1;
}
body .charsheet .hex *,
body .charsheet div .grid.hex input[type=number],
body .charsheet div .grid.hex .input {
text-align: center;
border: none;
}
body .charsheet div .grid.hex input[type=number],
body .charsheet div .grid.hex .input {
font-size: 24px;
min-height: 80px;
}
body .charsheet div .grid.hex .input {
display: grid;
place-content: center;
}
.fellow .grid.fellowxp > * {
width: fit-content;
justify-self: end;
}
.fellow label.flex {
place-items: center;
}
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+18),
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+19),
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+20),
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+21),
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+22),
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+22) > input,
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+23),
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+24),
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+25),
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+26),
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+27),
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+27) > input,
body .charsheet .fellow .grid.lined .grid > div:nth-child(22n+28) {
background: gainsboro;
}
.charactersheet .toggle-expanded[value='0'] ~ .fellow .grid.lined .grid > div.vspan2 {
grid-row: span 1;
}
.charactersheet .toggle-expanded[value='0'] ~ .fellow .grid.lined .grid > div:nth-child(11n+13),
.charactersheet .toggle-expanded[value='0'] ~ .fellow .grid.lined .grid > div:nth-child(11n+14),
.charactersheet .toggle-expanded[value='0'] ~ .fellow .grid.lined .grid > div:nth-child(11n+15),
.charactersheet .toggle-expanded[value='0'] ~ .fellow .grid.lined .grid > div:nth-child(11n+16),
.charactersheet .toggle-expanded[value='0'] ~ .fellow .grid.lined .grid > div:nth-child(11n+17) {
display: none;
}
body .charsheet .fellow .grid.lined .grid > div {
display: grid;
place-items: center;
height: auto;
}
body .charsheet .fellow .grid.lined .grid > div:nth-child(11n+7) {
font-family: 'dicefontd6';
}
body .charsheet .fellow .grid.lined .grid > div > * {
text-align: center;
}
.fellow .col6-fellowactions > *:first-child > *:first-child {
place-self: end;
}
.fellow .col6-fellowactions > *:first-child > *:last-child {
place-self: start;
}
.fellow .col6-fellowactions .vspan2 button[type=action] {
display: none;
}
/* editable boxes */
.editable {
position: relative;
}
.charsheet .grid .editable .editmode:not([value='1']) ~ .editbox {
display: none;
}
.editable input[type=checkbox]:nth-child(2) {
z-index: 1001;
position: absolute;
width: 16px;
height: 100%;
left: 2px;
top: 0;
}
.charsheet .grid .editable .editmode:not([value='1']) + input[type=checkbox] {
display: none;
}
.charsheet .grid .editable:hover .editmode:not([value='1']) + input[type=checkbox] {
display: grid;
color: darkgray;
}
.charsheet .grid .editable input[type=checkbox]:nth-child(2):before {
content: 'y';
font-family: 'Pictos';
}
.charsheet .grid .editable input[type=checkbox]:nth-child(2):hover {
cursor: pointer;
color: gold;
}
.editbox {
z-index: 1000;
position: absolute;
display: grid;
background: whitesmoke;
opacity: .95;
top: 0;
bottom: 0;
padding: 5px 10px 5px 30px;
place-content: center;
}
.charsheet .grid .editable .editbox:before {
content: '+';
position: absolute;
display: grid;
top: 0;
left: 20px;
height: 100%;
place-items: center;
}
.charsheet .grid .editable .editbox * {
height: 20px;
line-height: 20px;
}
.charsheet .grid .editable .editbox input[type=number] {
border-bottom: solid 1px black;
text-align: center;
}
.toggle-modifier[value='0'] + span {
display: none;
}
.toggle-modifier + span:before {
content: '+ ';
}
.magic-circle .toggle-modifier + span {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
}
/* Roll templates */
.sheet-rolltemplate-swskill,
.sheet-rolltemplate-swdamage,
.sheet-rolltemplate-swinfo {
box-sizing: border-box;
background: #e7e4d2;
width: 100%;
border-radius: 5px;
padding: 5px;
box-shadow: 0 2px 4px 0 #0002, 0 3px 10px 0 #0001;
}
.sheet-rolltemplate-swskill .sheet-container .inlinerollresult,
.sheet-rolltemplate-swdamage .sheet-container .inlinerollresult {
background: none;
border: 0;
padding: 0;
}
.sheet-rolltemplate-swskill .sheet-container,
.sheet-rolltemplate-swdamage .sheet-container,
.sheet-rolltemplate-swinfo .sheet-container {
border: 20px solid transparent;
border-image: url('https://raw.githubusercontent.com/coyotegrey/roll20-character-sheets/sword-world-dev/Sword%20World/images/border2.png') 65 stretch;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.sheet-rolltemplate-swskill .sheet-container *,
.sheet-rolltemplate-swdamage .sheet-container *,
.sheet-rolltemplate-swinfo .sheet-container * {
font-family: 'Noto Sans', serif;
text-align: center;
color: #765a37;
}
.sheet-rolltemplate-swskill .sheet-container > a > img,
.sheet-rolltemplate-swdamage .sheet-container > a > img,
.sheet-rolltemplate-swinfo .sheet-container > a > img {
width: 70px;
}
.sheet-rolltemplate-swskill .sheet-container h1,
.sheet-rolltemplate-swdamage .sheet-container h1,
.sheet-rolltemplate-swinfo .sheet-container h1,
.sheet-rolltemplate-swskill .sheet-container h1 *,
.sheet-rolltemplate-swdamage .sheet-container h1 *,
.sheet-rolltemplate-swinfo .sheet-container h1 * {
font-family: 'Jim Nightshade', 'Kaushan Script', serif;
font-size: 20px;
line-height: 25px;
margin: 0;
padding: 0;
}
.sheet-rolltemplate-swskill .sheet-container p,
.sheet-rolltemplate-swdamage .sheet-container p,
.sheet-rolltemplate-swinfo .sheet-container p {
margin: 0;
padding: 0;
}
.sheet-rolltemplate-swskill .sheet-crit,
.sheet-rolltemplate-swskill .sheet-fumble,
.sheet-rolltemplate-swdamage .sheet-fumble {
display: none;
place-content: center;
height: 48px;
}
.sheet-rolltemplate-swskill .sheet-die1,
.sheet-rolltemplate-swskill .sheet-die2,
.sheet-rolltemplate-swskill .sheet-die3,
.sheet-rolltemplate-swskill .sheet-die4,
.sheet-rolltemplate-swskill .sheet-die5,
.sheet-rolltemplate-swskill .sheet-die6 {
display: grid;
place-content: center;
height: 48px;
color: green;
}
.sheet-rolltemplate-swdamage .sheet-crit {
display: none;
}
.sheet-rolltemplate-swskill .sheet-template-crit ~ .sheet-container .sheet-crit,
.sheet-rolltemplate-swskill .sheet-template-fumble ~ .sheet-container .sheet-fumble,
.sheet-rolltemplate-swdamage .sheet-template-crit ~ .sheet-container .sheet-crit,
.sheet-rolltemplate-swdamage .sheet-container .sheet-powertable .sheet-crit,
.sheet-rolltemplate-swdamage .sheet-template-fumble ~ .sheet-container .sheet-fumble {
display: grid;
}
.sheet-rolltemplate-swskill .sheet-crit:before,
.sheet-rolltemplate-swskill .sheet-fumble:before,
.sheet-rolltemplate-swdamage .sheet-fumble:before,
.sheet-rolltemplate-swskill .sheet-die1:before,
.sheet-rolltemplate-swskill .sheet-die2:before,
.sheet-rolltemplate-swskill .sheet-die3:before,
.sheet-rolltemplate-swskill .sheet-die4:before,
.sheet-rolltemplate-swskill .sheet-die5:before,
.sheet-rolltemplate-swskill .sheet-die6:before {
font-family: 'dicefontd6';
font-size: 48px;
}
.sheet-rolltemplate-swskill .sheet-crit:before {
content: 'll';
}
.sheet-rolltemplate-swskill .sheet-die1:before {
content: 'g';
}
.sheet-rolltemplate-swskill .sheet-die2:before {
content: 'h';
}
.sheet-rolltemplate-swskill .sheet-die3:before {
content: 'i';
}
.sheet-rolltemplate-swskill .sheet-die4:before {
content: 'j';
}
.sheet-rolltemplate-swskill .sheet-die5:before {
content: 'k';
}
.sheet-rolltemplate-swskill .sheet-die6:before {
content: 'l';
}
.sheet-rolltemplate-swskill .sheet-success,
.sheet-rolltemplate-swskill .sheet-crit:before,
.sheet-rolltemplate-swdamage .sheet-success,
.sheet-rolltemplate-swdamage .sheet-crit {
color: green;
}
.sheet-rolltemplate-swdamage .sheet-container .sheet-powertable .sheet-crit:nth-child(n+2):nth-child(-n+12):before {
border-color: green;
}
.sheet-rolltemplate-swskill .sheet-fumble:before,
.sheet-rolltemplate-swdamage .sheet-fumble:before {
content: 'gg';
}
.sheet-rolltemplate-swskill .sheet-fail,
.sheet-rolltemplate-swskill .sheet-fumble:before,
.sheet-rolltemplate-swdamage .sheet-fail,
.sheet-rolltemplate-swdamage .sheet-fumble:before {
color: red;
}
.sheet-rolltemplate-swskill .sheet-success + .sheet-success,
.sheet-rolltemplate-swskill .sheet-fail + .sheet-fail,
.sheet-rolltemplate-swdamage .sheet-success + .sheet-success,
.sheet-rolltemplate-swdamage .sheet-fail + .sheet-fail {
font-size: 10px;
margin: -10px 0 0 0;
}
.sheet-rolltemplate-swskill .sheet-container a[href^="~"],
.sheet-rolltemplate-swdamage .sheet-container a[href^="~"],
.sheet-rolltemplate-swinfo .sheet-container a[href^="~"] {
background: #e7e4d2;
color: #c9b48c;
border: solid 1px #c9b48c;
}
.sheet-rolltemplate-swskill .sheet-container a[href^="~"]:hover,
.sheet-rolltemplate-swdamage .sheet-container a[href^="~"]:hover,
.sheet-rolltemplate-swinfo .sheet-container a[href^="~"]:hover {
background: #e7e4d2;
color: #765a37;
border: solid 1px #765a37;
}
.sheet-rolltemplate-swdamage .sheet-container .sheet-powertable {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 0;
}
.sheet-rolltemplate-swdamage .sheet-container .sheet-powertable * {
font-size: 10px;
outline: solid 1px #765a37;
background: #e7e4d2;
}
.sheet-rolltemplate-swdamage .sheet-container .sheet-powertable *:first-child {
background: #765a37;
color: #e7e4d2;
}
.sheet-rolltemplate-swdamage .sheet-container .sheet-powertable *:first-child:before {
content: 'F';
font-family: 'dicefontd6';
}
.sheet-rolltemplate-swdamage .sheet-container .sheet-powertable *:nth-child(n+2):nth-child(-n+12) {
background: #c9b48c;
position: relative;
}
.sheet-rolltemplate-swdamage .sheet-container .sheet-powertable *:nth-child(n+2):nth-child(-n+12):before {
position: absolute;
content: '';
left: 0;
right: 0;
top: 1px;
width: 12px;
height: 12px;
margin: auto;
border: solid 1px #765a37;
border-radius: 50%;
}
.sheet-rolltemplate-swdamage .sheet-template-fumble ~ .sheet-container .sheet-powertable *:nth-child(2),
.sheet-rolltemplate-swdamage .sheet-template-fumble ~ .sheet-container .sheet-powertable *:nth-child(14) {
background: red;
color: white;
}
.sheet-rolltemplate-swdamage .sheet-template-3 ~ .sheet-container .sheet-powertable *:nth-child(3),
.sheet-rolltemplate-swdamage .sheet-template-4 ~ .sheet-container .sheet-powertable *:nth-child(4),
.sheet-rolltemplate-swdamage .sheet-template-5 ~ .sheet-container .sheet-powertable *:nth-child(5),
.sheet-rolltemplate-swdamage .sheet-template-6 ~ .sheet-container .sheet-powertable *:nth-child(6),
.sheet-rolltemplate-swdamage .sheet-template-7 ~ .sheet-container .sheet-powertable *:nth-child(7),
.sheet-rolltemplate-swdamage .sheet-template-8 ~ .sheet-container .sheet-powertable *:nth-child(8),
.sheet-rolltemplate-swdamage .sheet-template-9 ~ .sheet-container .sheet-powertable *:nth-child(9),
.sheet-rolltemplate-swdamage .sheet-template-10 ~ .sheet-container .sheet-powertable *:nth-child(10),
.sheet-rolltemplate-swdamage .sheet-template-11 ~ .sheet-container .sheet-powertable *:nth-child(11),
.sheet-rolltemplate-swdamage .sheet-template-12 ~ .sheet-container .sheet-powertable *:nth-child(12),
.sheet-rolltemplate-swdamage .sheet-template-3 ~ .sheet-container .sheet-powertable *:nth-child(15),
.sheet-rolltemplate-swdamage .sheet-template-4 ~ .sheet-container .sheet-powertable *:nth-child(16),
.sheet-rolltemplate-swdamage .sheet-template-5 ~ .sheet-container .sheet-powertable *:nth-child(17),
.sheet-rolltemplate-swdamage .sheet-template-6 ~ .sheet-container .sheet-powertable *:nth-child(18),
.sheet-rolltemplate-swdamage .sheet-template-7 ~ .sheet-container .sheet-powertable *:nth-child(19),
.sheet-rolltemplate-swdamage .sheet-template-8 ~ .sheet-container .sheet-powertable *:nth-child(20),
.sheet-rolltemplate-swdamage .sheet-template-9 ~ .sheet-container .sheet-powertable *:nth-child(21),
.sheet-rolltemplate-swdamage .sheet-template-10 ~ .sheet-container .sheet-powertable *:nth-child(22),
.sheet-rolltemplate-swdamage .sheet-template-11 ~ .sheet-container .sheet-powertable *:nth-child(23),
.sheet-rolltemplate-swdamage .sheet-template-12 ~ .sheet-container .sheet-powertable *:nth-child(24) {
background: green;
color: white;
}
.sheet-rolltemplate-swdamage .sheet-template-fumble ~ .sheet-container .sheet-powertable *:nth-child(2):before,
.sheet-rolltemplate-swdamage .sheet-template-3 ~ .sheet-container .sheet-powertable *:nth-child(3):before,
.sheet-rolltemplate-swdamage .sheet-template-4 ~ .sheet-container .sheet-powertable *:nth-child(4):before,
.sheet-rolltemplate-swdamage .sheet-template-5 ~ .sheet-container .sheet-powertable *:nth-child(5):before,
.sheet-rolltemplate-swdamage .sheet-template-6 ~ .sheet-container .sheet-powertable *:nth-child(6):before,
.sheet-rolltemplate-swdamage .sheet-template-7 ~ .sheet-container .sheet-powertable *:nth-child(7):before,
.sheet-rolltemplate-swdamage .sheet-template-8 ~ .sheet-container .sheet-powertable *:nth-child(8):before,
.sheet-rolltemplate-swdamage .sheet-template-9 ~ .sheet-container .sheet-powertable *:nth-child(9):before,
.sheet-rolltemplate-swdamage .sheet-template-10 ~ .sheet-container .sheet-powertable *:nth-child(10):before,
.sheet-rolltemplate-swdamage .sheet-template-11 ~ .sheet-container .sheet-powertable *:nth-child(11):before,
.sheet-rolltemplate-swdamage .sheet-template-12 ~ .sheet-container .sheet-powertable *:nth-child(12):before {
border-color: white;
}
.sheet-rolltemplate-swskill .sheet-container .sheet-refmark,
.sheet-rolltemplate-swdamage .sheet-container .sheet-refmark,
.sheet-rolltemplate-swinfo .sheet-container .sheet-refmark {
font-size: 10px;
line-height: unset;
}
.sheet-rolltemplate-swskill .sheet-container .sheet-refmark:before,
.sheet-rolltemplate-swdamage .sheet-container .sheet-refmark:before,
.sheet-rolltemplate-swinfo .sheet-container .sheet-refmark:before {
content: '※';
font-family: cursive;
}