mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-09-08 16:12:33 +00:00
Per [this thread](https://app.roll20.net/forum/post/1691256/css-selector-not-being-processed#post-1691256), the first selector is not being processed. Because this sheet makes use of the unicode character Heavy Multiplication X (0x2716), and Roll20's CSS sanitation process throws out the entire thing if a backslash is detected, the file must be saved as Unicode. This means the file begins with the byte-order mark 0xFEFF. This commit is assuming that the BOM is being inserted into the style element right next to the ".charsheet" (or right next to the "div") at the start, which obviously does not match any element on the page, as there is neither an element `<0xFEFF class="charsheet">` nor an element `<0xFEFFdiv class="sheet-madness">`. As a result, a newline has been inserted between the BOM and "div" in the hope that the problem will not persist.
290 lines
12 KiB
CSS
290 lines
12 KiB
CSS
|
|
div.sheet-madness
|
|
{
|
|
position: relative;
|
|
padding: 0px 25px 0px 25px;
|
|
}
|
|
|
|
div.sheet-madness > input[type="checkbox"].sheet-madness
|
|
{
|
|
top: 50%;
|
|
left: 15px;
|
|
}
|
|
|
|
div.sheet-middle { line-height: 28px; }
|
|
div.sheet-crazy::after
|
|
{
|
|
content: attr(title);
|
|
display: block;
|
|
font-size: 8pt;
|
|
font-style: italic;
|
|
line-height: 12px;
|
|
text-align: left;
|
|
color: #555;
|
|
}
|
|
|
|
input[value="0"].sheet-madness { display: none; }
|
|
|
|
input[type="checkbox"].sheet-madness,
|
|
input[type="radio"].sheet-madness
|
|
{
|
|
opacity: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: relative;
|
|
top: 0px;
|
|
left: 11px;
|
|
margin: -5px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
input[type="radio"].sheet-madness + span::before,
|
|
input[type="checkbox"].sheet-madness + span::before
|
|
{
|
|
line-height: 14px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
input[type="radio"].sheet-madness + span::before
|
|
{
|
|
content: url('http://i.imgur.com/rz2r7u4.jpg');
|
|
width: 12px;
|
|
height: 12px;
|
|
font-size: 24px;
|
|
top: -20px;
|
|
}
|
|
|
|
input[type="radio"].sheet-madness:checked ~ input[type="radio"].sheet-madness + span::before
|
|
{
|
|
content: url('http://i.imgur.com/txZaIqc.jpg');
|
|
}
|
|
|
|
input[type="checkbox"].sheet-madness
|
|
{
|
|
position: absolute;
|
|
/*opacity: 1;*/
|
|
}
|
|
|
|
input[type="checkbox"].sheet-madness + span::before
|
|
{
|
|
border: solid 1px #a8a8a8;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
-moz-box-shadow: 0 0 2px #ccc;
|
|
-webkit-box-shadow: 0 0 2px #ccc;
|
|
box-shadow: 0 0 2px #ccc;
|
|
|
|
background: #f6f6f6;
|
|
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: -o-radial-gradient(#f6f6f6, #dfdfdf);
|
|
background: radial-gradient(#f6f6f6, #dfdfdf);
|
|
|
|
content: "";
|
|
width: 14px;
|
|
height: 14px;
|
|
font-size: 12px;
|
|
|
|
-moz-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
|
|
position: absolute;
|
|
top: 13px;
|
|
left: 10px;
|
|
}
|
|
|
|
div.sheet-madness:last-child > input[type="checkbox"].sheet-madness + span::before
|
|
{
|
|
top: 3px;
|
|
}
|
|
|
|
input[type="checkbox"].sheet-madness:checked + span::before
|
|
{
|
|
content: "✖";
|
|
color: #a00;
|
|
}
|
|
|
|
input[type="checkbox"].sheet-madness:checked ~ input[type="radio"].sheet-madness + span::before
|
|
{
|
|
content: url('http://i.imgur.com/txZaIqc.jpg');
|
|
}
|
|
|
|
.charsheet
|
|
{
|
|
background: #fff;
|
|
width: 848px;
|
|
}
|
|
|
|
.sheet-5colrow,
|
|
.sheet-4colrow,
|
|
.sheet-3colrow,
|
|
.sheet-2colrow
|
|
{
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-left { text-align: left; }
|
|
.sheet-center { text-align: center; }
|
|
.sheet-right { text-align: right; }
|
|
.sheet-bottom
|
|
{
|
|
position: relative;
|
|
-webkit-transform: translateY(100%);
|
|
-ms-transform: translateY(100%);
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
.sheet-full,
|
|
input[type="number"].sheet-full
|
|
{
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-med
|
|
{
|
|
display: inline-block;
|
|
width: 75px;
|
|
}
|
|
|
|
.sheet-vspace { margin-top: 15px; }
|
|
|
|
img.sheet-logo
|
|
{
|
|
position: relative;
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
div.sheet-5colrow div.sheet-col.sheet-border
|
|
{
|
|
width: calc(20% - 10px);
|
|
margin-right: 0px;
|
|
padding-left: 4px;
|
|
}
|
|
|
|
div.sheet-4colrow div.sheet-col.sheet-border
|
|
{
|
|
width: calc(25% - 20px);
|
|
margin-right: 0px;
|
|
padding-left: 8px;
|
|
}
|
|
|
|
div.sheet-3colrow div.sheet-col.sheet-border
|
|
{
|
|
width: calc(33% - 30px);
|
|
margin-right: 15px;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
div.sheet-2colrow div.sheet-col.sheet-border
|
|
{
|
|
width: calc(50% - 30px);
|
|
margin-right: 13px;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
div.sheet-4colrow div.sheet-2colrow div.sheet-col:first-child
|
|
{
|
|
width: 60%;
|
|
margin-right: 0px;
|
|
padding-left: 0px;
|
|
}
|
|
|
|
div.sheet-4colrow div.sheet-2colrow div.sheet-col:last-child
|
|
{
|
|
width: 35%;
|
|
margin-right: 0px;
|
|
padding-left: 0px;
|
|
}
|
|
|
|
div.sheet-col.sheet-border:not(:first-child)
|
|
{
|
|
border-left: 3px #ccc solid;
|
|
}
|
|
|
|
div.sheet-skill { position: relative; }
|
|
|
|
input[type="number"]
|
|
{
|
|
text-align: center;
|
|
}
|
|
|
|
hr
|
|
{
|
|
border-top: 3px #ccc solid;
|
|
border-bottom: none;
|
|
}
|
|
|
|
input[type="radio"].sheet-obsession
|
|
{
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 25%;
|
|
left: 100%;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
input[type="radio"].sheet-obsession:hover:not(:checked),
|
|
div.sheet-skill:hover input[type="radio"].sheet-obsession:not(:checked)
|
|
{
|
|
opacity: 0.7;
|
|
}
|
|
|
|
input[type="radio"].sheet-obsession:checked
|
|
{
|
|
opacity: 1;
|
|
}
|
|
|
|
::-webkit-input-placeholder { font-style: italic; }
|
|
::-moz-placeholder { font-style: italic; }
|
|
:-ms-input-placeholder { font-style: italic; }
|
|
input:-moz-placeholder { font-style: italic; }
|
|
|
|
span.sheet-header { font-weight: bold; }
|
|
|
|
.sheet-firearms-name,
|
|
.sheet-firearms-caliber,
|
|
.sheet-firearms-capacity,
|
|
.sheet-firearms-damage,
|
|
.sheet-rituals-name,
|
|
.sheet-rituals-power,
|
|
.sheet-rituals-cost,
|
|
.sheet-hand-to-hand-name,
|
|
.sheet-hand-to-hand-damage,
|
|
.sheet-artifact-name,
|
|
.sheet-artifact-power
|
|
{
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
.sheet-firearms-name { width: 37%; }
|
|
.sheet-firearms-caliber { width: 19%; }
|
|
.sheet-firearms-capacity,
|
|
input[type="number"].sheet-firearms-capacity { width: 12%; }
|
|
.sheet-firearms-damage,
|
|
input[type="number"].sheet-firearms-damage { width: 22%; }
|
|
|
|
.sheet-rituals-name { width: 45%; }
|
|
.sheet-rituals-power { width: 25%; }
|
|
select.sheet-rituals-power,
|
|
select.sheet-artifact-power { vertical-align: top; }
|
|
.sheet-rituals-cost,
|
|
input[type="number"].sheet-rituals-cost { width: 20%; }
|
|
|
|
.sheet-hand-to-hand-name,
|
|
.sheet-artifact-name { width: 71%; }
|
|
.sheet-hand-to-hand-damage,
|
|
.sheet-artifact-power,
|
|
input[type="number"].sheet-hand-to-hand-damage { width: 25%; } |