Files
fredhicks af9a95fb9d Added support for hero count alteration to villain max health
In SCRPG page 239, it indicates that a Villain's max health should be increased from its base by H (the number of heroes in the scene) times 5. This update adds support for that to the villain sheet.
2023-03-18 15:40:43 -04:00

1548 lines
43 KiB
CSS

@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
:root {
--scrpg-background: white;
--scrpg-foreground: black;
--scrpg-darkblue: #004499;
--scrpg-highlight: #ddeeff;
--scrpg-palegreen: #eeffee;
--scrpg-palegreenfg: #000000;
--scrpg-paleyellow: #ffffee;
--scrpg-paleyellowfg: #000000;
--scrpg-palered: #ffeeee;
--scrpg-paleredfg: #000000;
--scrpg-palegray: #eeeeee;
--scrpg-palegrayfg: #000000;
--scrpg-darkgray: #282828;
background-color: var(--scrpg-background);
color: var(--scrpg-foreground);
}
/* Strip off all the unwanted bells and whistles Roll20 saddles us with */
.btn {
background-image: none;
text-shadow: none;
box-shadow: none;
}
.sheet-darkmode .tab-content .charsheet {
--scrpg-background: #1f1f1f;
--scrpg-foreground: #eee;
--scrpg-highlight: #333333;
--scrpg-palegreen: #000000;
--scrpg-palegreenfg: #99ff99;
--scrpg-paleyellow: #000000;
--scrpg-paleyellowfg: #ffcc99;
--scrpg-palered: #000000;
--scrpg-paleredfg: #ff9999;
--scrpg-palegray: #000000;
--scrpg-palegrayfg: #eeeeee;
}
.tab-content .charsheet button.colorized,
.tab-content .charsheet input,
.tab-content .charsheet select,
.tab-content .charsheet textarea,
.tab-content .charsheet
{
background-color: var(--scrpg-background);
color: var(--scrpg-foreground);
}
.sheet-whole {
min-width: 775px;
}
.sheet-padding {
padding: 3px;
}
.sheet-smalldata.sheet-centered,
.sheet-centered {
text-align: center;
align-items: center;
}
.sheet-bigname,
input.sheet-bignum,
input.sheet-bigname {
font-family: "Bangers", Arial, sans-serif;
letter-spacing: 1pt;
font-size: 30pt;
color: var(--scrpg-foreground);
border: none;
}
input.sheet-bigname {
border-bottom: 0.5px solid black;
margin-right: 6px;
margin-bottom: 6px;
width: 100%;
}
input.sheet-bignum {
text-align: center;
background: none;
}
.sheet-smalldata-row {
clear: both;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: start;
align-content: stretch;
margin-bottom: 6px;
}
.sheet-smalldata {
font-size: 9pt;
clear: both;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-evenly;
align-items: start;
align-content: stretch;
flex-grow: 1;
margin-right: 6px;
}
.sheet-smalldata input[type=text] {
font-size: 10pt;
border: none;
border-bottom: 0.5px solid var(--scrpg-foreground);
background: none;
flex-grow: 1;
width: 100%;
}
.sheet-smalldata textarea {
font-size: 10pt;
border: none;
border-top: 0.5px solid var(--scrpg-foreground);
border-bottom: 0.5px solid var(--scrpg-foreground);
flex-grow: 1;
width: calc(100% - 9px);
background: none;
}
.sheet-collection-row {
clear: both;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
align-content: stretch;
}
.sheet-collection-row > span {
min-width: 30px;
}
.sheet-collection-row input[type=text] {
font-size: 12pt;
border: none;
border-bottom: 0.5px solid var(--scrpg-foreground);
flex-grow: 0;
max-width: 145px;
}
.sheet-dicecols-rows,
.sheet-dicecols {
clear: both;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
align-content: stretch;
}
.sheet-dicecols {
flex-wrap: nowrap;
}
.sheet-dicecols-rows {
flex-wrap: wrap;
}
.sheet-dicecol-unadorned,
.sheet-dicecol {
clear: both;
display: flex;
flex-direction: column;
align-items: stretch;
align-content: stretch;
justify-content: flex-start;
min-width: 180px;
flex-grow: 2;
}
.sheet-dicecol {
border: 1px solid var(--scrpg-foreground);
box-shadow: 3px 3px var(--scrpg-darkblue);
margin-right: 9px;
margin-bottom: 9px;
}
.sheet-slowflexgrow {
flex-grow: 1;
}
.sheet-halfsies {
width: calc(50% - 12px);
flex-basis: calc(50% - 12px);
}
.sheet-thirdsies {
width: calc(33% - 12px);
flex-basis: calc(33% - 12px);
}
.sheet-twothirdsies {
width: calc(67% - 12px);
flex-basis: calc(67% - 12px);
}
.sheet-noflexgrow {
flex-grow: 0;
}
textarea.sheet-modest {
height: 60px;
}
.sheet-abilities .repcontrol,
.sheet-dicecol .repcontrol {
display: none;
}
.sheet-editcol .repcontrol {
display: initial;
}
.sheet-fade-on-zero + * {
opacity: 1.0;
}
.sheet-fade-on-zero[value="0"] + * {
opacity: 0.5;
}
.sheet-hide-on-empty[value=""] + *,
.sheet-hide-on-4[value="4"] + *,
.sheet-hide-on-12[value="12"] + *,
.sheet-hide-on-one[value="1"] + *,
.sheet-hide-on-zero[value="0"] + * {
display: none;
}
.sheet-dicecol-head {
font-family: "Bangers", Arial, sans-serif;
letter-spacing: 1pt;
font-size: 18pt;
font-weight: bold;
padding: 1px;
padding-left: 7px;
padding-right: 7px;
margin-bottom: 6px;
text-align: center;
background-color: var(--scrpg-darkblue);
color: white;
}
.sheet-abilities-head.sheet-lefty,
.sheet-lefty {
text-align: left;
}
.sheet-dicerow {
clear: both;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
align-content: stretch;
line-height: 1.0;
}
.sheet-dicerow select {
width: 80px;
height: 28px;
}
.sheet-dicerow input[type=text] {
width: calc(100% - 90px);
height: 28px;
}
.sheet-die {
flex-grow: 0;
flex-shrink: 0;
width: 30px;
height: 24pt;
min-width: 30px;
max-width: 30px;
}
.sheet-dielabel {
flex-grow: 1;
font-size: 15pt;
color: var(--scrpg-foreground);
padding-bottom: 0px;
padding-left: 6px;
}
.sheet-120 {
width: 120px;
}
input.sheet-dieselected[value=""] ~ .sheet-die,
input.sheet-dieselected[value=""] ~ .sheet-dielabel
{
background-color: var(--scrpg-background);
font-weight: normal;
}
input.sheet-dieselected[value="1"] ~ .sheet-die,
input.sheet-dieselected[value="1"] ~ .sheet-dielabel
{
background-color: var(--scrpg-highlight);
font-weight: bold;
}
.sheet-box-colorizer[value="red"] + input + .sheet-dicecol input.sheet-dieselected[value=""] ~ .sheet-die,
.sheet-box-colorizer[value="red"] + input + .sheet-dicecol input.sheet-dieselected[value=""] ~ .sheet-dielabel
{
background-color: var(--scrpg-palered);
color: var(--scrpg-paleredfg);
font-weight: normal;
}
.sheet-box-colorizer[value="red"] + input + .sheet-dicecol input.sheet-dieselected[value="1"] ~ .sheet-die,
.sheet-box-colorizer[value="red"] + input + .sheet-dicecol input.sheet-dieselected[value="1"] ~ .sheet-dielabel
{
background-color: #dd0000;
color: white;
font-weight: bold;
}
/* here's a problem: if I change the "d" in "dval" to "die", all rolltemplate formatting stops working; man, wtf? */
input.sheet-dval ~ .sheet-die > .sheet-diepic {
width: 30px;
height: 30px;
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d4.svg);
}
input.sheet-dval[value="4"] ~ .sheet-die > .sheet-diepic {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d4.svg);
}
input.sheet-dval[value="6"] ~ .sheet-die > .sheet-diepic {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d6.svg);
}
input.sheet-dval[value="8"] ~ .sheet-die > .sheet-diepic {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d8.svg);
}
input.sheet-dval[value="10"] ~ .sheet-die > .sheet-diepic {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d10.svg);
}
input.sheet-dval[value="12"] ~ .sheet-die > .sheet-diepic {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d12.svg);
}
input[type="checkbox"].sheet-dieboxer {
opacity: 0.0;
width: 180px;
height: 24px;
position: relative;
top: 8px; /* -12px; */
left: 28px;
margin: -24px;
cursor: pointer;
z-index: 2;
}
.sheet-dieboxer + .sheet-diepic {
position: relative;
top: -14px;
left: 0px;
z-index: 1;
}
.sheet-inline-label {
font-size: 13pt;
font-weight: bold;
}
.sheet-inline-label ~ input[type="checkbox"].sheet-oval-marker + .sheet-oval-icon::before {
margin-top: 6px;
}
input[type="checkbox"].sheet-oval-marker {
opacity: 0.0;
width: 25px;
height: 14px;
position: relative;
top: -1px;
left: 16px;
margin: -14px;
cursor: pointer;
z-index: 2;
}
input[type="checkbox"].sheet-oval-marker + span.sheet-oval-icon::before {
margin-right: -2px; /* ? */
margin-left: 4px;
margin-top: 1px; /* ? */
line-height: 14px; /* ? */
text-align: center; /* ? */
display: inline-block;
vertical-align: top; /* ? */
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-oval-unmarked.svg);
width: 25px;
height: 14px;
font-size: 12px; /* ? */
}
input[type="checkbox"].sheet-oval-marker:checked + span.sheet-oval-icon::before {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-oval-marked.svg);
}
.sheet-colorizer + * {
color: #333;
}
.sheet-colorizer[value="green"] + *,
.sheet-status-green {
color: #009900;
}
.sheet-colorizer[value="yellow"] + *,
.sheet-status-yellow {
color: #cc9900;
}
.sheet-colorizer[value="red"] + *,
.sheet-status-red {
color: #cc0000;
}
.sheet-pow-green, .sheet-pow-yellow, .sheet-pow-red {
display: inline-block;
text-align: center;
vertical-align: middle;
font-size: 14px;
font-weight: bold;
padding-top: 12px;
width: 108px;
height: 30px;
}
.sheet-opaque {
opacity: 1.0;
}
.sheet-translucent {
opacity: 0.5;
}
/* This is button formatting */
.sheet-scene .sheet-pow-red,
.sheet-scene .sheet-pow-yellow,
.sheet-scene .sheet-pow-green {
width: 72px; height: 12px; /* height adjusted by subtracting top/bottom padding */
padding: 0px;
padding-top: 8px;
margin-bottom: 8px;
padding-bottom: 8px;
background-size: contain;
border: none;
background-color: transparent;
font-family: 'Pictos';
margin-top: -2px;
}
.sheet-pow-green {
color: white;
background-image: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-pow-green.svg);
}
.sheet-pow-yellow {
color: black;
background-image: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-pow-yellow.svg);
}
.sheet-pow-red {
color: white;
background-image: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-pow-red.svg);
}
.sheet-rollcols {
clear: both;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-end;
align-content: stretch;
}
.sheet-rollblock {
flex-grow: 1;
vertical-align: middle;
line-height: 24px;
font-size: 10pt;
clear: both;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-evenly;
align-items: center;
align-content: stretch;
}
.sheet-buttons button,
.sheet-editcol .repcontrol .repcontrol_add,
.sheet-editcol .repcontrol .repcontrol_edit,
.sheet-rollblock button {
border: 1px solid #004499;
background: #ddeeff;
color: black;
font-weight: normal;
text-align: left;
padding: 2px;
padding-bottom: 0px;
margin: 6px;
vertical-align: middle;
}
.sheet-buttons button:hover,
.sheet-buttons button:hover span {
color: white;
}
.sheet-buttons button:hover,
.sheet-buttons button:hover span,
.sheet-editcol .repcontrol .repcontrol_add:hover,
.sheet-editcol .repcontrol .repcontrol_add:hover span,
.sheet-editcol .repcontrol .repcontrol_edit:hover,
.sheet-editcol .repcontrol .repcontrol_edit:hover span,
.sheet-rollblock button:hover,
.sheet-rollblock button:hover span {
background: #004499;
font-weight: bold;
}
.sheet-editcol .repcontrol .repcontrol_add:hover,
.sheet-editcol .repcontrol .repcontrol_add:hover span,
.sheet-editcol .repcontrol .repcontrol_edit:hover,
.sheet-editcol .repcontrol .repcontrol_edit:hover span {
color: white;
text-shadow: none;
}
.sheet-rollblock > span {
padding-left: 3px;
padding-right: 3px;
text-align: center;
line-height: 1;
}
.ui-dialog .charsheet button:before {
content: '';
}
input.sheet-inlinedie + .sheet-diepic {
width: 30px;
height: 30px;
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d4.svg);
}
input.sheet-inlinedie[value="4"] + .sheet-diepic {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d4.svg);
}
input.sheet-inlinedie[value="6"] + .sheet-diepic {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d6.svg);
}
input.sheet-inlinedie[value="8"] + .sheet-diepic {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d8.svg);
}
input.sheet-inlinedie[value="10"] + .sheet-diepic {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d10.svg);
}
input.sheet-inlinedie[value="12"] + .sheet-diepic {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d12.svg);
}
.sheet-healthbox {
min-width: 130px;
flex-basis: 130px;
}
.sheet-healthbox input.sheet-bignum[type=number] {
width: 120px;
border-bottom: .5px solid black;
}
.sheet-abilities {
font-size: 12pt;
}
.sheet-abilities-out,
.sheet-abilities-red,
.sheet-abilities-yellow,
.sheet-abilities-green {
clear: both;
display: flex;
flex-direction: column;
align-items: stretch;
align-content: stretch;
justify-content: flex-start;
min-width: 240px;
border: 1px solid var(--scrpg-foreground);
margin-right: 9px;
margin-bottom: 9px;
flex-grow: 2;
}
.sheet-abilities-head {
font-family: "Bangers", Arial, sans-serif;
letter-spacing: 1pt;
font-size: 18pt;
font-weight: bold;
padding: 1px;
padding-left: 7px;
padding-right: 7px;
text-align: center;
background-color: black;
color: white;
}
.sheet-abilities-row {
clear: both;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
align-content: stretch;
}
.sheet-abilities-row .sheet-ability-icons {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 75px;
text-align: center;
line-height: 1;
}
.sheet-abilities-row .sheet-ability-type {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 45px;
text-align: center;
}
.sheet-abilities-row .sheet-ability-description {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 50%;
line-height: 1.4;
}
.sheet-ability-type select {
width: 40px;
height: 28px;
}
.sheet-abilities-row textarea {
width: calc(100% - 15px);
height: 60px;
}
.sheet-box-colorizer[value="green"] + input + .sheet-dicecol,
.sheet-box-colorizer[value="green"] + .sheet-dicecol,
.sheet-abilities-green {
background-color: var(--scrpg-palegreen);
color: var(--scrpg-palegreenfg);
box-shadow: 3px 3px #009900;
}
.sheet-box-colorizer[value="yellow"] + input + .sheet-dicecol,
.sheet-box-colorizer[value="yellow"] + .sheet-dicecol,
.sheet-abilities-yellow {
background-color: var(--scrpg-paleyellow);
color: var(--scrpg-paleyellowfg);
box-shadow: 3px 3px #ffcc00;
}
.sheet-box-colorizer[value="red"] + input + .sheet-dicecol,
.sheet-box-colorizer[value="red"] + .sheet-dicecol,
.sheet-abilities-red {
background-color: var(--scrpg-palered);
color: var(--scrpg-paleredfg);
box-shadow: 3px 3px #cc0000;
}
.sheet-ability-green {
background-color: var(--scrpg-palegreen);
color: var(--scrpg-palegreenfg);
}
.sheet-ability-green button[type=action] {
color: white;
background-color: #009900;
}
.sheet-box-colorizer[value="green"] + input + .sheet-dicecol .sheet-dicecol-head,
.sheet-box-colorizer[value="green"] + .sheet-dicecol .sheet-dicecol-head,
.sheet-abilities-green .sheet-abilities-head {
background-color: #009900;
}
.sheet-ability-yellow {
background-color: var(--scrpg-paleyellow);
color: var(--scrpg-paleyellowfg);
}
.sheet-ability-yellow button[type=action] {
color: black;
background-color: #ffcc00;
}
.sheet-box-colorizer[value="yellow"] + input + .sheet-dicecol .sheet-dicecol-head,
.sheet-box-colorizer[value="yellow"] + .sheet-dicecol .sheet-dicecol-head,
.sheet-abilities-yellow .sheet-abilities-head {
background-color: #ffcc00;
color: black;
}
.sheet-ability-red {
background-color: var(--scrpg-palered);
color: var(--scrpg-paleredfg);
}
.sheet-box-colorizer[value="red"] + input + .sheet-dicecol .sheet-dicecol-head,
.sheet-box-colorizer[value="red"] + .sheet-dicecol .sheet-dicecol-head,
.sheet-ability-red button[type=action] {
color: white;
background-color: #cc0000;
}
.sheet-abilities-red .sheet-abilities-head {
background-color: #cc0000;
}
.sheet-box-colorizer[value="out"] + input + .sheet-dicecol,
.sheet-box-colorizer[value="out"] + .sheet-dicecol,
.sheet-abilities-out {
background-color: var(--scrpg-palegray);
color: var(--scrpg-palegrayfg);
box-shadow: 3px 3px #000000;
}
.sheet-ability-out {
background-color: var(--scrpg-palegray);
color: var(--scrpg-palegrayfg);
}
.sheet-ability-out button[type=action] {
color: white;
background-color: #000000;
}
.sheet-box-colorizer[value="out"] + input + .sheet-dicecol .sheet-dicecol-head,
.sheet-box-colorizer[value="out"] + .sheet-dicecol .sheet-dicecol-head,
.sheet-abilities-out .sheet-abilities-head {
background-color: var(--scrpg-darkgray);
}
.sheet-rolltemplate-minionroll .sheet-action-icon-a,
.sheet-rolltemplate-minionroll .sheet-action-icon-b,
.sheet-rolltemplate-minionroll .sheet-action-icon-h,
.sheet-rolltemplate-minionroll .sheet-action-icon-o,
.sheet-rolltemplate-minionroll .sheet-action-icon-d,
.sheet-rolltemplate-minionroll .sheet-action-icon-r,
.sheet-rolltemplate-simple .sheet-action-icon-a,
.sheet-rolltemplate-simple .sheet-action-icon-b,
.sheet-rolltemplate-simple .sheet-action-icon-h,
.sheet-rolltemplate-simple .sheet-action-icon-o,
.sheet-rolltemplate-simple .sheet-action-icon-d,
.sheet-rolltemplate-simple .sheet-action-icon-r,
.sheet-rolltemplate-3pool .sheet-action-icon-a,
.sheet-rolltemplate-3pool .sheet-action-icon-b,
.sheet-rolltemplate-3pool .sheet-action-icon-h,
.sheet-rolltemplate-3pool .sheet-action-icon-o,
.sheet-rolltemplate-3pool .sheet-action-icon-d,
.sheet-rolltemplate-3pool .sheet-action-icon-r,
.sheet-action-icon-a,
.sheet-action-icon-b,
.sheet-action-icon-h,
.sheet-action-icon-o,
.sheet-action-icon-d,
.sheet-action-icon-r {
display: inline-block;
height: 16pt;
width: 16pt;
}
.sheet-rolltemplate-minionroll .sheet-action-icon-a,
.sheet-rolltemplate-minionroll .sheet-action-icon-b,
.sheet-rolltemplate-minionroll .sheet-action-icon-h,
.sheet-rolltemplate-minionroll .sheet-action-icon-o,
.sheet-rolltemplate-minionroll .sheet-action-icon-d,
.sheet-rolltemplate-minionroll .sheet-action-icon-r,
.sheet-rolltemplate-simple .sheet-action-icon-a,
.sheet-rolltemplate-simple .sheet-action-icon-b,
.sheet-rolltemplate-simple .sheet-action-icon-h,
.sheet-rolltemplate-simple .sheet-action-icon-o,
.sheet-rolltemplate-simple .sheet-action-icon-d,
.sheet-rolltemplate-simple .sheet-action-icon-r,
.sheet-rolltemplate-3pool .sheet-action-icon-a,
.sheet-rolltemplate-3pool .sheet-action-icon-b,
.sheet-rolltemplate-3pool .sheet-action-icon-h,
.sheet-rolltemplate-3pool .sheet-action-icon-o,
.sheet-rolltemplate-3pool .sheet-action-icon-d,
.sheet-rolltemplate-3pool .sheet-action-icon-r {
margin-bottom: -4pt;
}
button.sheet-icon-button,
.sheet-icon {
height: 16pt;
width: 16pt;
}
.sheet-h-icon {
height: 16pt;
width: 16pt;
vertical-align: middle;
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-H.svg);
}
.sheet-rolltemplate-minionroll .sheet-action-icon-a,
.sheet-rolltemplate-3pool .sheet-action-icon-a,
.sheet-rolltemplate-simple .sheet-action-icon-a,
.sheet-action-icon-a,
.sheet-action-icon[value="A"] + .sheet-icon {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-action-attack.svg);
}
.sheet-rolltemplate-minionroll .sheet-action-icon-b,
.sheet-rolltemplate-3pool .sheet-action-icon-b,
.sheet-rolltemplate-simple .sheet-action-icon-b,
.sheet-action-icon-b,
.sheet-action-icon[value="B"] + .sheet-icon {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-action-boost.svg);
}
.sheet-rolltemplate-minionroll .sheet-action-icon-h,
.sheet-rolltemplate-3pool .sheet-action-icon-h,
.sheet-rolltemplate-simple .sheet-action-icon-h,
.sheet-action-icon-h,
.sheet-action-icon[value="H"] + .sheet-icon {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-action-hinder.svg);
}
.sheet-rolltemplate-minionroll .sheet-action-icon-o,
.sheet-rolltemplate-3pool .sheet-action-icon-o,
.sheet-rolltemplate-simple .sheet-action-icon-o,
.sheet-action-icon-o,
.sheet-action-icon[value="O"] + .sheet-icon {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-action-overcome.svg);
}
.sheet-rolltemplate-minionroll .sheet-action-icon-d,
.sheet-rolltemplate-3pool .sheet-action-icon-d,
.sheet-rolltemplate-simple .sheet-action-icon-d,
.sheet-action-icon-d,
.sheet-action-icon[value="D"] + .sheet-icon {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-action-defend.svg);
}
.sheet-rolltemplate-minionroll .sheet-action-icon-r,
.sheet-rolltemplate-3pool .sheet-action-icon-r,
.sheet-rolltemplate-simple .sheet-action-icon-r,
.sheet-action-icon-r,
.sheet-action-icon[value="R"] + .sheet-icon {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-action-recover.svg);
}
.sheet-buttonless {
border: none;
background: none;
color: black;
font-weight: normal;
text-align: left;
padding: 0px;
vertical-align: top;
}
.sheet-buttonless:hover,
.sheet-buttonless:hover span {
background-color: #ddeeff;
font-weight: bold;
}
.ui-dialog .charsheet button.sheet-button-delete:before {
font-family: 'Pictos';
font-size: 16px;
content: '#';
}
.ui-dialog .charsheet button.sheet-button-increase:before {
font-family: 'Pictos';
font-size: 16px;
content: '{';
}
.ui-dialog .charsheet button.sheet-button-decrease:before {
font-family: 'Pictos';
font-size: 16px;
content: '}';
}
.sheet-button-decrease,
.sheet-button-increase,
.sheet-button-delete {
border: none;
background: none;
opacity: 0.5;
font-weight: normal;
text-align: left;
padding: 0px;
vertical-align: top;
}
.sheet-button-delete,
.sheet-button-delete span {
color: red;
}
.sheet-button-delete:hover,
.sheet-button-delete:hover span {
opacity: 1.0;
}
.sheet-button-decrease,
.sheet-button-decrease span {
color: #0066ff;
}
.sheet-button-decrease:hover,
.sheet-button-decrease:hover span {
opacity: 1.0;
}
.sheet-button-increase,
.sheet-button-increase span {
color: #009900;
}
.sheet-button-increase:hover,
.sheet-button-increase:hover span {
opacity: 1.0;
}
.ui-dialog .charsheet button.sheet-button-header-edit:before {
font-family: 'Pictos';
font-size: 24px;
content: 'p';
}
.ui-dialog .charsheet button.sheet-button-header-close:before {
font-family: 'Pictos';
font-size: 24px;
content: 'D';
}
.ui-dialog .charsheet button.sheet-button-header-collapse:before {
font-family: 'Pictos';
font-size: 24px;
content: 'J';
}
.ui-dialog .charsheet button.sheet-button-header-expand:before {
font-family: 'Pictos';
font-size: 24px;
content: '`';
}
.sheet-button-header-expand,
.sheet-button-header-collapse,
.sheet-button-header-edit,
.sheet-button-header-close {
border: none;
background: none;
font-weight: normal;
text-align: left;
padding-top: 7px;
padding-bottom: 7px;
vertical-align: top;
}
.sheet-button-header-edit,
.sheet-button-header-close {
padding-right: 0px;
float: right;
}
.sheet-button-header-expand,
.sheet-button-header-collapse {
padding-left: 0px;
float: left;
}
.sheet-button-header-expand,
.sheet-button-header-collapse,
.sheet-button-header-edit,
.sheet-button-header-close {
color: white;
opacity: 0.75;
}
.sheet-button-header-expand:hover,
.sheet-button-header-expand:hover span,
.sheet-button-header-collapse:hover,
.sheet-button-header-collapse:hover span,
.sheet-button-header-edit:hover,
.sheet-button-header-edit:hover span,
.sheet-button-header-close:hover,
.sheet-button-header-close:hover span {
opacity: 1.0;
}
.sheet-modline {
clear: both;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
align-content: stretch;
margin-bottom: 6px;
}
.sheet-modline select {
width: 4em;
}
.sheet-modline input[type=text] {
width: 25%;
}
.sheet-mode-editor .repcontrol {
display: initial;
}
.sheet-mode-editor .itemcontrol button.repcontrol_del,
.sheet-mode-editor .repcontrol button.repcontrol_add {
display: none;
}
.sheet-mode-edit {
clear: both;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
align-items: baseline;
align-content: stretch;
margin-top: 9px;
padding-top: 6px;
border-top: 1px solid black;
}
.sheet-mode-edit input[type=text] {
width: calc(50% - 6px);
}
.sheet-mode-edit textarea {
width: calc(50% - 6px);
height: 60px;
}
/* .sheet-modgrid button, */
.sheet-mode-editor button,
.sheet-modline button {
border: 1px solid #004499;
background: #ddeeff;
color: black;
font-weight: bold;
text-align: left;
padding: 2px;
padding-bottom: 0px;
margin-bottom: 6px;
vertical-align: middle;
}
/* .sheet-modgrid button:hover,
.sheet-modgrid button:hover span, */
.sheet-mode-editor button:hover,
.sheet-mode-editor button:hover span,
.sheet-modline button:hover,
.sheet-modline button:hover span {
background: #004499;
font-weight: bold;
color: white;
}
.sheet-modgrid .repcontainer[data-groupname=repeating_bonuses] .repitem,
.sheet-modgrid .repcontainer[data-groupname=repeating_penalties] .repitem {
display: inline-block;
width: 9em;
margin-left: 3px;
margin-right: 3px;
margin-bottom: 6px;
vertical-align: top;
}
.sheet-modnum {
font-weight: bold;
font-size: 28px;
font-family: "Bangers", Arial, sans-serif;
letter-spacing: 1pt;
height: 36px;
color: white;
background-image: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-pow-black.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
text-shadow: 0px 0px 2px black;
}
/* .sheet-healthbox .sheet-healthcontrol, */
.sheet-modifier .sheet-modcontrol {
display: none;
}
/* .sheet-healthbox:hover .sheet-healthcontrol, */
.sheet-modifier:hover .sheet-modcontrol {
display: initial;
}
textarea.sheet-principle {
width: calc(100% - 9px);
height: 60px;
}
.sheet-minions div.sheet-dicerow {
margin-bottom: 6px;
}
.sheet-controlcell {
opacity: 0.0;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50px;
}
.sheet-dicerow:hover .sheet-controlcell {
opacity: 1.0;
}
.sheet-rolltemplate-announcement div.sheet-template-container,
.sheet-rolltemplate-minionroll div.sheet-template-container,
.sheet-rolltemplate-simple div.sheet-template-container,
.sheet-rolltemplate-3pool div.sheet-template-container {
border: 1px solid black;
background: transparent;
box-shadow: 3px 3px #004499;
margin-right: 9px;
margin-bottom: 9px;
}
.sheet-rolltemplate-announcement div.sheet-template-container {
padding: 3px;
}
.sheet-rolltemplate-3pool div.sheet-template-color-green,
.sheet-rolltemplate-minionroll div.sheet-template-color-green,
.sheet-rolltemplate-simple div.sheet-template-color-green,
.sheet-rolltemplate-announcement div.sheet-template-color-green {
background-color: var(--scrpg-palegreen);
color: var(--scrpg-palegreenfg);
box-shadow: 3px 3px #009900;
}
.sheet-rolltemplate-3pool div.sheet-template-color-yellow,
.sheet-rolltemplate-minionroll div.sheet-template-color-yellow,
.sheet-rolltemplate-simple div.sheet-template-color-yellow,
.sheet-rolltemplate-announcement div.sheet-template-color-yellow {
background-color: var(--scrpg-paleyellow);
color: var(--scrpg-paleyellowfg);
box-shadow: 3px 3px #ffcc00;
}
.sheet-rolltemplate-3pool div.sheet-template-color-red,
.sheet-rolltemplate-minionroll div.sheet-template-color-red,
.sheet-rolltemplate-simple div.sheet-template-color-red,
.sheet-rolltemplate-announcement div.sheet-template-color-red {
background-color: var(--scrpg-palered);
color: var(--scrpg-paleredfg);
box-shadow: 3px 3px #cc0000;
}
.sheet-rolltemplate-3pool div.sheet-template-color-out,
.sheet-rolltemplate-minionroll div.sheet-template-color-out,
.sheet-rolltemplate-simple div.sheet-template-color-out,
.sheet-rolltemplate-announcement div.sheet-template-color-out {
background-color: var(--scrpg-palegray);
color: var(--scrpg-palegrayfg);
box-shadow: 3px 3px #000000;
}
.sheet-rolltemplate-simple .sheet-template-body {
padding: 6px;
}
.sheet-rolltemplate-minionroll .sheet-template-head,
.sheet-rolltemplate-3pool .sheet-template-head,
.sheet-rolltemplate-simple .sheet-template-head {
font-family: "Bangers", Arial, sans-serif;
line-height: 1.0;
letter-spacing: 1pt;
font-size: 18pt;
font-weight: bold;
padding: 3px;
padding-left: 7px;
padding-right: 7px;
margin-bottom: 6px;
text-align: center;
background-color: #004499;
color: white;
}
.sheet-rolltemplate-3pool div.sheet-template-color-green .sheet-template-head,
.sheet-rolltemplate-minionroll div.sheet-template-color-green .sheet-template-head,
.sheet-rolltemplate-simple div.sheet-template-color-green .sheet-template-head {
background-color: #009900;
}
.sheet-rolltemplate-3pool div.sheet-template-color-yellow .sheet-template-head,
.sheet-rolltemplate-minionroll div.sheet-template-color-yellow .sheet-template-head,
.sheet-rolltemplate-simple div.sheet-template-color-yellow .sheet-template-head {
background-color: #ffcc00;
color: black;
}
.sheet-rolltemplate-3pool div.sheet-template-color-red .sheet-template-head,
.sheet-rolltemplate-minionroll div.sheet-template-color-red .sheet-template-head,
.sheet-rolltemplate-simple div.sheet-template-color-red .sheet-template-head {
background-color: #cc0000;
}
.sheet-rolltemplate-3pool div.sheet-template-color-out .sheet-template-head,
.sheet-rolltemplate-minionroll div.sheet-template-color-out .sheet-template-head,
.sheet-rolltemplate-simple div.sheet-template-color-out .sheet-template-head {
background-color: black;
}
.sheet-rolltemplate-simple .sheet-diepic4,
.sheet-rolltemplate-minionroll .sheet-diepic4,
.sheet-rolltemplate-3pool .sheet-diepic4,
.sheet-rolltemplate-simple .sheet-diepic6,
.sheet-rolltemplate-minionroll .sheet-diepic6,
.sheet-rolltemplate-3pool .sheet-diepic6,
.sheet-rolltemplate-simple .sheet-diepic8,
.sheet-rolltemplate-minionroll .sheet-diepic8,
.sheet-rolltemplate-3pool .sheet-diepic8,
.sheet-rolltemplate-simple .sheet-diepic10,
.sheet-rolltemplate-3pool .sheet-diepic10,
.sheet-rolltemplate-minionroll .sheet-diepic10,
.sheet-rolltemplate-simple .sheet-diepic12,
.sheet-rolltemplate-minionroll .sheet-diepic12,
.sheet-rolltemplate-3pool .sheet-diepic12 {
width: 30px;
height: 30px;
}
.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-diepic4,
.sheet-rolltemplate-simple .sheet-bigdie .sheet-diepic4,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-diepic4,
.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-diepic6,
.sheet-rolltemplate-simple .sheet-bigdie .sheet-diepic6,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-diepic6,
.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-diepic8,
.sheet-rolltemplate-simple .sheet-bigdie .sheet-diepic8,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-diepic8,
.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-diepic10,
.sheet-rolltemplate-simple .sheet-bigdie .sheet-diepic10,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-diepic10,
.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-diepic12,
.sheet-rolltemplate-simple .sheet-bigdie .sheet-diepic12,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-diepic12 {
width: 30px;
height: 30px;
margin-bottom: -6px;
}
.sheet-rolltemplate-minionroll .sheet-bigdie,
.sheet-rolltemplate-simple .sheet-bigdie,
.sheet-rolltemplate-3pool .sheet-bigdie {
text-align: center;
vertical-align: center;
}
.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-bigresult,
.sheet-rolltemplate-simple .sheet-bigdie .sheet-bigresult,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-bigresult
{
font-size: 16px;
font-weight: bold;
}
.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-driller,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-driller {
position: relative;
display: inline-block;
}
.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-driller .sheet-drilldown,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-driller .sheet-drilldown,
.sheet-rolltemplate-simple .sheet-bigdie .sheet-driller .sheet-drilldown {
visibility: hidden;
position: absolute;
width: 150px;
top: calc(100% - 30px);
left: 50%;
margin-left: -75px;
z-index: 1;
padding: 3px;
border: 0.5px solid black;
color: #ffffdd;
background-color: #333;
box-shadow: 2px 2px 4px black;
}
.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-driller .sheet-righthanded,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-driller .sheet-righthanded {
margin-left: -110px;
}
.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-driller .sheet-lefthanded,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-driller .sheet-lefthanded {
margin-left: -40px;
}
.sheet-rolltemplate-minionroll .sheet-bigthree,
.sheet-rolltemplate-3pool .sheet-bigthree {
clear: both;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: start;
align-content: stretch;
}
.sheet-rolltemplate-minionroll .sheet-bigthree .sheet-bigdie,
.sheet-rolltemplate-3pool .sheet-bigthree .sheet-bigdie {
width: calc(33% - 6px);
flex-basis: calc(33% - 6px);
}
.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-driller .sheet-drilldown > div,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-driller .sheet-drilldown > div,
.sheet-rolltemplate-simple .sheet-bigdie .sheet-driller .sheet-drilldown > div {
clear: both;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: start;
align-content: stretch;
}
.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-driller .sheet-drilldown > div > span,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-driller .sheet-drilldown > div > span,
.sheet-rolltemplate-simple .sheet-bigdie .sheet-driller .sheet-drilldown > div > span {
padding-right: 6px;
flex-basis: 24px; /* 44px; */
flex-grow: 0;
flex-shrink: 0;
}
.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-driller .sheet-drilldown > div > span.sheet-wider,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-driller .sheet-drilldown > div > span.sheet-wider,
.sheet-rolltemplate-simple .sheet-bigdie .sheet-driller .sheet-drilldown > div > span.sheet-wider {
flex-basis: 88px;
flex-grow: 1;
}
.sheet-rolltemplate-minionroll .sheet-bigdie .sheet-driller .sheet-drilldown > div > span.sheet-action-icon-o,
.sheet-rolltemplate-3pool .sheet-bigdie .sheet-driller .sheet-drilldown > div > span.sheet-action-icon-o,
.sheet-rolltemplate-simple .sheet-bigdie .sheet-driller .sheet-drilldown > div > span.sheet-action-icon-o {
flex-basis: 20pt;
}
.sheet-rolltemplate-minionroll .sheet-bigdie:hover .sheet-driller .sheet-drilldown,
.sheet-rolltemplate-3pool .sheet-bigdie:hover .sheet-driller .sheet-drilldown,
.sheet-rolltemplate-simple .sheet-bigdie:hover .sheet-driller .sheet-drilldown {
visibility: visible;
}
.sheet-rolltemplate-simple .sheet-diecaption,
.sheet-rolltemplate-minionroll .sheet-diecaption,
.sheet-rolltemplate-3pool .sheet-diecaption {
font-size: 12px;
font-weight: bold;
margin-bottom: 3px;
}
.sheet-rolltemplate-simple .sheet-diepic4,
.sheet-rolltemplate-minionroll .sheet-diepic4,
.sheet-rolltemplate-3pool .sheet-diepic4 {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d4.svg);
}
.sheet-rolltemplate-simple .sheet-diepic6,
.sheet-rolltemplate-minionroll .sheet-diepic6,
.sheet-rolltemplate-3pool .sheet-diepic6 {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d6.svg);
}
.sheet-rolltemplate-simple .sheet-diepic8,
.sheet-rolltemplate-minionroll .sheet-diepic8,
.sheet-rolltemplate-3pool .sheet-diepic8 {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d8.svg);
}
.sheet-rolltemplate-simple .sheet-diepic10,
.sheet-rolltemplate-minionroll .sheet-diepic10,
.sheet-rolltemplate-3pool .sheet-diepic10 {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d10.svg);
}
.sheet-rolltemplate-simple .sheet-diepic12,
.sheet-rolltemplate-minionroll .sheet-diepic12,
.sheet-rolltemplate-3pool .sheet-diepic12 {
content: url(https://raw.githubusercontent.com/fredhicks/gtg-roll20/master/Sentinel%20Comics%20Roleplaying%20Game/icons/scrpg-icon-d12.svg);
}
.sheet-rolltemplate-minionroll .sheet-drilldown-header,
.sheet-rolltemplate-3pool .sheet-drilldown-header {
padding-left: 60px; /* because CSS can't be arsed to obey text-align: center */
width: 90px; /* not including the 50px padding */
text-transform: uppercase;
font-size: 10pt;
font-weight: bold;
color: #eeeeee;
background: black;
padding-top: 2px;
padding-bottom: 2px;
}
.sheet-hoverpopper + .sheet-hoverpop {
display: none;
}
.sheet-hoverpopper:hover + .sheet-hoverpop {
display: inline-block;
position: absolute;
z-index: 1;
}
.sheet-countup ~ .sheet-counter {
display: none;
}
.sheet-hoverpop {
color: var(--scrpg-foreground);
background-color: var(--scrpg-background);
border: 0.5px solid var(--scrpg-foreground);
}
.sheet-countup[value="10"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="10"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="10"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="10"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="10"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="10"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="10"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="10"] + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="10"] + .sheet-counter + .sheet-counter,
.sheet-countup[value="10"] + .sheet-counter,
.sheet-countup[value="9"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="9"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="9"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="9"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="9"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="9"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="9"] + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="9"] + .sheet-counter + .sheet-counter,
.sheet-countup[value="9"] + .sheet-counter,
.sheet-countup[value="8"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="8"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="8"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="8"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="8"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="8"] + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="8"] + .sheet-counter + .sheet-counter,
.sheet-countup[value="8"] + .sheet-counter,
.sheet-countup[value="7"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="7"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="7"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="7"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="7"] + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="7"] + .sheet-counter + .sheet-counter,
.sheet-countup[value="7"] + .sheet-counter,
.sheet-countup[value="6"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="6"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="6"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="6"] + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="6"] + .sheet-counter + .sheet-counter,
.sheet-countup[value="6"] + .sheet-counter,
.sheet-countup[value="5"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="5"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="5"] + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="5"] + .sheet-counter + .sheet-counter,
.sheet-countup[value="5"] + .sheet-counter,
.sheet-countup[value="4"] + .sheet-counter + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="4"] + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="4"] + .sheet-counter + .sheet-counter,
.sheet-countup[value="4"] + .sheet-counter,
.sheet-countup[value="3"] + .sheet-counter + .sheet-counter + .sheet-counter,
.sheet-countup[value="3"] + .sheet-counter + .sheet-counter,
.sheet-countup[value="3"] + .sheet-counter,
.sheet-countup[value="2"] + .sheet-counter + .sheet-counter,
.sheet-countup[value="2"] + .sheet-counter,
.sheet-countup[value="1"] + .sheet-counter {
display: inline-block;
}
.sheet-challenge-component {
clear: both;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: start;
align-items: start;
align-content: stretch;
}
.sheet-challenge-component div:first-child {
white-space: nowrap;
}
.sheet-highlight-on-one[value="1"] + div {
background-color: #009900;
color: white;
}