mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-09-01 04:32:28 +00:00
plexsoup
c2d828129a
Players demanded a way to change the starting piece for the Scars and Horrors pies. Now there's an arrow to choose the first slice.
343 lines
9.6 KiB
CSS
343 lines
9.6 KiB
CSS
@font-face {
|
|
font-family: 'IM Fell English SC';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local('IM Fell English SC'), local('IM_FELL_English_SC'), url(http://themes.googleusercontent.com/static/fonts/imfellenglishsc/v3/h3Tn6yWfw4b5qaLD1RWvz9gX5f6-V0DImePmAcKHNfQ.ttf) format('truetype');
|
|
}
|
|
|
|
h1, h2, h3, h4, h5 {
|
|
font-family: 'IM Fell English SC', serif;
|
|
text-align: center;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 0.65em;
|
|
}
|
|
|
|
hr {
|
|
height: 5px;
|
|
padding: 0;
|
|
margin: 0;
|
|
border-top: 2px solid;
|
|
width: 200%;
|
|
text-align: center;
|
|
margin-left: -42px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
textarea {
|
|
height: 80px;
|
|
margin-top: 10px;
|
|
font-size: x-small;
|
|
line-height: 1.25em;
|
|
}
|
|
|
|
div.sheet-clock,
|
|
.sheet-circleBackdrop {
|
|
width: 5em;
|
|
height: 5em;
|
|
display: inline-block;
|
|
border-radius: 50%;
|
|
background-color: #394646;
|
|
border: 2px solid black;
|
|
vertical-align: middle;
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.sheet-circleBackdrop {
|
|
background-color: white;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
div.sheet-circleBackdrop input {
|
|
border: 0;
|
|
margin-top: 3px;
|
|
width: 50px;
|
|
}
|
|
|
|
|
|
input.sheet-HarmCheckbox,
|
|
input.sheet-ScarsCheckbox,
|
|
input.sheet-TraumaCheckbox,
|
|
input.sheet-HorrorCheckbox {
|
|
position: absolute;
|
|
left: -10000px;
|
|
}
|
|
|
|
div.sheet-FieldLabel {
|
|
width: 60px;
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input.sheet-TextFieldBio {
|
|
width: calc(33% - 21px);
|
|
}
|
|
|
|
input.sheet-HarmNumberbox,
|
|
input.sheet-ScarsNumberbox,
|
|
input.sheet-TraumaNumberbox,
|
|
input.sheet-HorrorNumberbox {
|
|
width: 1em;
|
|
height: 2em;
|
|
vertical-align: top;
|
|
}
|
|
|
|
|
|
div.sheet-HarmSection,
|
|
div.sheet-ScarsSection,
|
|
div.sheet-TraumaSection,
|
|
div.sheet-HorrorSection {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
text-align: center;
|
|
margin-top:10px;
|
|
}
|
|
|
|
div.sheet-col {
|
|
text-align: center;
|
|
}
|
|
|
|
div.sheet-wideColumn, div.sheet-narrowColumn, div.sheet-mediumColumn {
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
div.sheet-narrowColumn {
|
|
width: calc(27.5% - 21px);
|
|
|
|
}
|
|
|
|
div.sheet-mediumColumn {
|
|
width: calc(35% - 21px);
|
|
}
|
|
div.sheet-wideColumn {
|
|
width: calc(45% - 21px);
|
|
}
|
|
|
|
input[type="checkbox"][name="attr_Harm"][value="0"]:checked ~ div.sheet-clock[title="attr_Harm"],
|
|
input[type="checkbox"][name="attr_Trauma"][value="0"]:checked ~ div.sheet-clock[title="attr_Trauma"],
|
|
input[type="checkbox"][name="attr_Scars"][value="0"]:checked ~ div.sheet-clock[title="attr_Scars"],
|
|
input[type="checkbox"][name="attr_Horror"][value="0"]:checked ~ div.sheet-clock[title="attr_Horror"] {
|
|
background: white;
|
|
background-image: radial-gradient(white, white) /* no harm */
|
|
}
|
|
|
|
input[type="checkbox"][name="attr_Harm"][value="1"]:checked ~ div.sheet-clock[title="attr_Harm"],
|
|
input[type="checkbox"][name="attr_Trauma"][value="1"]:checked ~ div.sheet-clock[title="attr_Trauma"] {
|
|
background-image: linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%); /* 3oclock */
|
|
}
|
|
|
|
input[type="checkbox"][name="attr_Harm"][value="2"]:checked ~ div.sheet-clock[title="attr_Harm"],
|
|
input[type="checkbox"][name="attr_Trauma"][value="2"]:checked ~ div.sheet-clock[title="attr_Trauma"] {
|
|
background-image: linear-gradient(90deg, white 50%, transparent 50%); /* 6 oclock */
|
|
}
|
|
|
|
input[type="checkbox"][name="attr_Harm"][value="3"]:checked ~ div.sheet-clock[title="attr_Harm"],
|
|
input[type="checkbox"][name="attr_Trauma"][value="3"]:checked ~ div.sheet-clock[title="attr_Trauma"] {
|
|
background-image: linear-gradient(180deg, transparent 50%, #394646 50%), linear-gradient(90deg, white 50%, transparent 50%); /* 9 oclock */
|
|
}
|
|
|
|
input[type="checkbox"][name="attr_Harm"][value="4"]:checked ~ div.sheet-clock[title="attr_Harm"],
|
|
input[type="checkbox"][name="attr_Trauma"][value="4"]:checked ~ div.sheet-clock[title="attr_Trauma"] {
|
|
background-image: linear-gradient(210deg, transparent 50%, #394646 50%), linear-gradient(90deg, white 50%, transparent 50%); /* 10 oclock */
|
|
}
|
|
|
|
input[type="checkbox"][name="attr_Harm"][value="5"]:checked ~ div.sheet-clock[title="attr_Harm"],
|
|
input[type="checkbox"][name="attr_Trauma"][value="5"]:checked ~ div.sheet-clock[title="attr_Trauma"] {
|
|
background-image: linear-gradient(240deg, transparent 50%, #394646 50%), linear-gradient(90deg, white 50%, transparent 50%); /* 11 oclock */
|
|
}
|
|
|
|
input[type="checkbox"][name="attr_Harm"][value="6"]:checked ~ div.sheet-clock[title="attr_Harm"],
|
|
input[type="checkbox"][name="attr_Trauma"][value="6"]:checked ~ div.sheet-clock[title="attr_Trauma"] {
|
|
background-color: black; /* 12 oclock */
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Scars and Horror need special treatment. They're 4 piece pies which can start filling in from the left or right */
|
|
|
|
/* div.sheet-HorrorSection input.sheet-checkboxArrowLeftRight[type="checkbox"]:checked */
|
|
|
|
|
|
div.sheet-ScarsSection input[type="checkbox"][name="attr_Scars"][value="1"]:checked ~
|
|
input.sheet-checkboxArrowLeftRight[type="checkbox"]:checked ~
|
|
div.sheet-clock[title="attr_Scars"],
|
|
|
|
div.sheet-HorrorSection input[type="checkbox"][name="attr_Horror"][value="1"]:checked ~
|
|
input.sheet-checkboxArrowLeftRight[type="checkbox"]:checked ~
|
|
div.sheet-clock[title="attr_Horror"]
|
|
{
|
|
background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(-45deg, white 50%, transparent 50%); /* left quad */
|
|
}
|
|
|
|
div.sheet-ScarsSection input[type="checkbox"][name="attr_Scars"][value="2"]:checked ~
|
|
input.sheet-checkboxArrowLeftRight[type="checkbox"]:checked ~
|
|
div.sheet-clock[title="attr_Scars"],
|
|
|
|
div.sheet-HorrorSection input[type="checkbox"][name="attr_Horror"][value="2"]:checked ~
|
|
input.sheet-checkboxArrowLeftRight[type="checkbox"]:checked ~
|
|
div.sheet-clock[title="attr_Horror"]
|
|
{
|
|
background-image: linear-gradient(-45deg, white 50%, transparent 50%); /* half */
|
|
}
|
|
|
|
|
|
div.sheet-ScarsSection input[type="checkbox"][name="attr_Scars"][value="3"]:checked ~
|
|
input.sheet-checkboxArrowLeftRight[type="checkbox"]:checked ~
|
|
div.sheet-clock[title="attr_Scars"],
|
|
|
|
div.sheet-HorrorSection input[type="checkbox"][name="attr_Horror"][value="3"]:checked ~
|
|
input.sheet-checkboxArrowLeftRight[type="checkbox"]:checked ~
|
|
div.sheet-clock[title="attr_Horror"]
|
|
{
|
|
background-image: linear-gradient(45deg, transparent 50%, #394646 50%), linear-gradient(-45deg, white 50%, transparent 50%); /* 3 quarters */
|
|
}
|
|
|
|
|
|
|
|
/* Show the clock segments filling in, but starting from the right */
|
|
|
|
|
|
div.sheet-ScarsSection input[type="checkbox"][name="attr_Scars"][value="1"]:checked ~
|
|
input.sheet-checkboxArrowLeftRight[type="checkbox"]:not(:checked) ~
|
|
div.sheet-clock[title="attr_Scars"],
|
|
|
|
div.sheet-HorrorSection input[type="checkbox"][name="attr_Horror"][value="1"]:checked ~
|
|
input.sheet-checkboxArrowLeftRight[type="checkbox"]:not(:checked) ~
|
|
div.sheet-clock[title="attr_Horror"]
|
|
{
|
|
background-image: linear-gradient(225deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%); /* left quad */
|
|
}
|
|
|
|
div.sheet-ScarsSection input[type="checkbox"][name="attr_Scars"][value="2"]:checked ~
|
|
input.sheet-checkboxArrowLeftRight[type="checkbox"]:not(:checked) ~
|
|
div.sheet-clock[title="attr_Scars"],
|
|
|
|
div.sheet-HorrorSection input[type="checkbox"][name="attr_Horror"][value="2"]:checked ~
|
|
input.sheet-checkboxArrowLeftRight[type="checkbox"]:not(:checked) ~
|
|
div.sheet-clock[title="attr_Horror"]
|
|
{
|
|
background-image: linear-gradient(135deg, white 50%, transparent 50%); /* half */
|
|
}
|
|
|
|
|
|
div.sheet-ScarsSection input[type="checkbox"][name="attr_Scars"][value="3"]:checked ~
|
|
input.sheet-checkboxArrowLeftRight[type="checkbox"]:not(:checked) ~
|
|
div.sheet-clock[title="attr_Scars"],
|
|
|
|
div.sheet-HorrorSection input[type="checkbox"][name="attr_Horror"][value="3"]:checked ~
|
|
input.sheet-checkboxArrowLeftRight[type="checkbox"]:not(:checked) ~
|
|
div.sheet-clock[title="attr_Horror"]
|
|
{
|
|
background-image: linear-gradient(225deg, transparent 50%, #394646 50%), linear-gradient(135deg, white 50%, transparent 50%); /* 3 quarters */
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* --------------------- */
|
|
|
|
div.sheet-clock .sheet-ten {
|
|
background-image:
|
|
linear-gradient(126deg, transparent 50%, white 50%),
|
|
linear-gradient(90deg, white 50%, transparent 50%);
|
|
}
|
|
|
|
div.sheet-clock .sheet-3oclock {
|
|
background-image:
|
|
linear-gradient(180deg, transparent 50%, white 50%),
|
|
linear-gradient(90deg, white 50%, transparent 50%);
|
|
}
|
|
|
|
div.sheet-clock .sheet-6oclock {
|
|
background-image:
|
|
linear-gradient(90deg, white 50%, transparent 50%);
|
|
}
|
|
|
|
/* Slices greater than 50% require first gradient
|
|
to be transparent -> green */
|
|
|
|
div.sheet-clock .sheet-9oclock {
|
|
background-image:
|
|
linear-gradient(180deg, transparent 50%, green 50%),
|
|
linear-gradient(90deg, white 50%, transparent 50%);
|
|
}
|
|
|
|
div.sheet-clock .sheet-12oclock {
|
|
background-image: none;
|
|
}
|
|
|
|
|
|
|
|
/* The Scars and Horrors clocks can start on either the left or the right bubble. Need a way for player to choose. */
|
|
|
|
div.sheet-ScarsSection h3,
|
|
div.sheet-HorrorSection h3 {
|
|
display: inline;
|
|
}
|
|
|
|
|
|
/* Hide actual checkbox */
|
|
input.sheet-checkboxArrowLeftRight[type="checkbox"]
|
|
{
|
|
opacity: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 6px;
|
|
margin: -7px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Fake checkbox */
|
|
input.sheet-checkboxArrowLeftRight[type="checkbox"] + span::before
|
|
{
|
|
margin-right: 4px;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
display: inline;
|
|
vertical-align: middle;
|
|
|
|
content: "►";
|
|
width: 14px;
|
|
height: 14px;
|
|
font-size: 12px;
|
|
}
|
|
input.sheet-checkboxArrowLeftRight[type="checkbox"]:checked + span::before
|
|
{
|
|
content: "◄";
|
|
}
|
|
|
|
/* End of Left/Right Arrow section */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
div.sheet-footnote {
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
}
|
|
|