Files
roll20-character-sheets/CWorldofDarkness/CWoD.css
T
raymondh3 198b95b281 changed the number in input.sheet-attr width (#5613)
made the number 80 to fix another bug  hopefully this will be the last one needed 
some reason the skill dots were not in the correct location for some users
2019-10-28 13:49:15 -05:00

1333 lines
33 KiB
CSS

.charsheet {
font-family: "Courier";
}
.sheet-background {
background: none;
position: relative;
padding-top: 18px;
padding-left: 90px;
padding-right: 80px;
padding-bottom: 80px;
width: 905px;
}
.sheet-background-image {
width: 100%;
z-index: -1;
}
.sheet-mortal,
.sheet-vampire,
.sheet-werewolf,
.sheet-mage,
.sheet-promethean,
.sheet-mage,
.sheet-geist,
.sheet-changeling,
.sheet-mummy,
.sheet-demon,
.sheet-beast,
.sheet-hunter,
.sheet-settings {
display: none !important;
}
input.sheet-mortalsheet:checked ~ div * .sheet-mortal,
input.sheet-vampiresheet:checked ~ div * .sheet-vampire,
input.sheet-werewolfsheet:checked ~ div * .sheet-werewolf,
input.sheet-magesheet:checked ~ div * .sheet-mage,
input.sheet-prometheansheet:checked ~ div * .sheet-promethean,
input.sheet-changelingsheet:checked ~ div * .sheet-changeling,
input.sheet-geistsheet:checked ~ div * .sheet-geist,
input.sheet-mummysheet:checked ~ div * .sheet-mummy,
input.sheet-demonsheet:checked ~ div * .sheet-demon,
input.sheet-beastsheet:checked ~ div * .sheet-beast,
input.sheet-huntersheet:checked ~ div * .sheet-hunter,
input.sheet-settingssheet:checked ~ div * .sheet-settings {
display: inline-block !important;
}
input.sheet-mortalsheet:checked ~ div * table.sheet-mortal,
input.sheet-vampiresheet:checked ~ div * table.sheet-vampire,
input.sheet-werewolfsheet:checked ~ div * table.sheet-werewolf,
input.sheet-magesheet:checked ~ div * table.sheet-mage,
input.sheet-prometheansheet:checked ~ div * table.sheet-promethean,
input.sheet-changelingsheet:checked ~ div * table.sheet-changeling,
input.sheet-geistsheet:checked ~ div * table.sheet-geist,
input.sheet-mummysheet:checked ~ div * table.sheet-mummy,
input.sheet-demonsheet:checked ~ div * table.sheet-demon,
input.sheet-beastsheet:checked ~ div * table.sheet-beast,
input.sheet-huntersheet:checked ~ div * table.sheet-hunter,
input.sheet-settingssheet:checked ~ div * table.sheet-settings {
display: table !important;
}
input.sheet-settingssheet:checked ~ div.sheet-3colrow,
input.sheet-settingssheet:checked ~ div.sheet-skills,
input.sheet-settingssheet:checked ~ div.sheet-othertraits,
input.sheet-settingssheet:checked ~ div.sheet-expandedsheet,
input.sheet-settingssheet:checked ~ div.sheet-expandedsheet2,
input.sheet-1st:checked ~ div * .sheet-2nd,
input.sheet-2nd:checked ~ div * .sheet-1st,
input.sheet-pages:checked ~ .sheet-gametype,
input.sheet-pages:checked ~ input.sheet-gametype + span,
input.sheet-page2:checked ~ div.sheet-3colrow,
input.sheet-page2:checked ~ div.sheet-skills,
input.sheet-page2:checked ~ div.sheet-othertraits{
display: none !important;
}
input.sheet-settingssheet:checked ~ div.sheet-settings-spacer {
display: block !important;
}
input.sheet-page2:checked ~ div.sheet-expandedsheet {
display: inline-block;
}
span.sheet-edition {
font-weight: bold;
}
/* BACKGROUND IMAGE */
.sheet-background-image::after {
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
input.sheet-sheetoptions + span.sheet-attr {
background: white;
border-radius: 4px;
padding-left: 2px;
padding-right: 2px;
}
/* HEADER IMAGE */
input.sheet-settingssheet:not(:checked) ~ input.sheet-mortalsheet:checked ~ img.sheet-header.sheet-mortal,
input.sheet-settingssheet:not(:checked) ~ input.sheet-vampiresheet:checked ~ img.sheet-header.sheet-vampire,
input.sheet-settingssheet:not(:checked) ~ input.sheet-werewolfsheet:checked ~ img.sheet-header.sheet-werewolf,
input.sheet-settingssheet:not(:checked) ~ input.sheet-magesheet:checked ~ img.sheet-header.sheet-mage,
input.sheet-settingssheet:not(:checked) ~ input.sheet-mummysheet:checked ~ img.sheet-header.sheet-mummy,
input.sheet-settingssheet:not(:checked) ~ input.sheet-changelingsheet:checked ~ img.sheet-header.sheet-changeling,
input.sheet-settingssheet:not(:checked) ~ input.sheet-geistsheet:checked ~ img.sheet-header.sheet-geist,
input.sheet-settingssheet:not(:checked) ~ input.sheet-demonsheet:checked ~ img.sheet-header.sheet-demon,
input.sheet-settingssheet:not(:checked) ~ input.sheet-huntersheet:checked ~ img.sheet-header.sheet-hunter
{
height: 150px;
display: inline !important;
position: absolute;
top: 18px;
left: 0;
right: 0;
margin: auto;
}
input.sheet-settingssheet:not(:checked) ~ input.sheet-huntersheet:checked ~ img.sheet-header.sheet-hunter {
top: 50px;
height: 120px;
}
input.sheet-settingssheet:checked ~ div.sheet-header.sheet-settings {
height: 150px;
display: block !important;
}
input.sheet-settingssheet:checked + span.sheet-attr,
input.sheet-page1:checked + span.sheet-attr,
input.sheet-page2:checked + span.sheet-attr,
input.sheet-page3:checked + span.sheet-attr{
color: #2A2D80;
text-shadow: 0px 1px 0px black;
}
input.sheet-settingssheet:checked ~ div * input.sheet-attr:checked + span.sheet-attr,
input.sheet-sheetoptions.sheet-settingssheet:checked +span.sheet-attr {
color: #2A2D80;
text-shadow: 0px 1px 0px black;
}
input.sheet-settingssheet:checked ~ div * input.sheet-weapon:checked + span + .sheet-weaponstat.sheet-name {
color: #2A2D80;
text-shadow: 0px 1px 0px black;
font-weight: bold;
}
input.sheet-mortalsheet:checked ~ div * input.sheet-attr:checked + span.sheet-attr,
input.sheet-mortalsheet:checked ~ span > input.sheet-attr:checked + span.sheet-attr,
input.sheet-sheetoptions.sheet-mortalsheet:checked +span.sheet-attr {
color: #2A2D80;
text-shadow: 0px 1px 0px black;
}
input.sheet-mortalsheet:checked ~ div * input.sheet-weapon:checked + span + .sheet-weaponstat.sheet-name {
color: #2A2D80;
text-shadow: 0px 1px 0px black;
font-weight: bold;
}
input.sheet-vampiresheet:checked ~ div * input.sheet-attr:checked + span.sheet-attr,
input.sheet-vampiresheet:checked ~ span > input.sheet-attr:checked + span.sheet-attr,
input.sheet-sheetoptions.sheet-vampiresheet:checked +span.sheet-attr {
color: #076D63;
text-shadow: 0px 1px 0px black;
}
input.sheet-vampiresheet:checked ~ div * input.sheet-weapon:checked + span + .sheet-weaponstat.sheet-name {
color: #076D63;
text-shadow: 0px 1px 0px black;
font-weight: bold;
}
input.sheet-werewolfsheet:checked ~ div * input.sheet-attr:checked + span.sheet-attr,
input.sheet-werewolfsheet:checked ~ span > input.sheet-attr:checked + span.sheet-attr,
input.sheet-werewolfsheet:checked ~ div * .sheet-potency input.sheet-attr:checked ~ span.sheet-attr,
input.sheet-sheetoptions.sheet-werewolfsheet:checked +span.sheet-attr {
color: #E9813E;
text-shadow: 0px 1px 0px black;
}
input.sheet-werewolfsheet:checked ~ div * input.sheet-weapon:checked + span + .sheet-weaponstat.sheet-name {
color: #E9813E;
text-shadow: 0px 1px 0px black;
font-weight: bold;
}
input.sheet-magesheet:checked ~ div * input.sheet-attr:checked + span.sheet-attr,
input.sheet-magesheet:checked ~ span > input.sheet-attr:checked + span.sheet-attr,
input.sheet-magesheet:checked ~ div * .sheet-potency input.sheet-attr:checked ~ span.sheet-attr,
input.sheet-sheetoptions.sheet-magesheet:checked +span.sheet-attr {
color: #0000FF;
text-shadow: 0px 1px 0px black;
}
input.sheet-magesheet:checked ~ div * input.sheet-weapon:checked + span + .sheet-weaponstat.sheet-name {
color: #0000FF;
text-shadow: 0px 1px 0px black;
font-weight: bold;
}
input.sheet-prometheansheet:checked ~ div * input.sheet-attr:checked + span.sheet-attr,
input.sheet-prometheansheet:checked ~ span > input.sheet-attr:checked + span.sheet-attr,
input.sheet-prometheansheet:checked ~ div * .sheet-potency input.sheet-attr:checked ~ span.sheet-attr,
input.sheet-sheetoptions.sheet-prometheansheet:checked +span.sheet-attr {
color: #660099;
text-shadow: 0px 0px 10px black;
}
input.sheet-prometheansheet:checked ~ div * input.sheet-weapon:checked + span + .sheet-weaponstat.sheet-name {
color: #660099;
text-shadow: 0px 0px 10px black;
font-weight: bold;
}
input.sheet-changelingsheet:checked ~ div * input.sheet-attr:checked + span.sheet-attr,
input.sheet-changelingsheet:checked ~ span > input.sheet-attr:checked + span.sheet-attr,
input.sheet-changelingsheet:checked ~ div * .sheet-potency input.sheet-attr:checked ~ span.sheet-attr,
input.sheet-sheetoptions.sheet-changelingsheet:checked +span.sheet-attr {
color: #AC0611;
text-shadow: 0px 1px 0px black;
}
input.sheet-changelingsheet:checked ~ div * input.sheet-weapon:checked + span + .sheet-weaponstat.sheet-name {
color: #AC0611;
text-shadow: 0px 1px 0px black;
font-weight: bold;
}
input.sheet-geistsheet:checked ~ div * input.sheet-attr:checked + span.sheet-attr,
input.sheet-geistsheet:checked ~ span > input.sheet-attr:checked + span.sheet-attr,
input.sheet-geistsheet:checked ~ div * .sheet-potency input.sheet-attr:checked ~ span.sheet-attr,
input.sheet-sheetoptions.sheet-geistsheet:checked +span.sheet-attr {
color: #F4DB41;
text-shadow: 0px 1px 0px black;
}
input.sheet-geistsheet:checked ~ div * input.sheet-weapon:checked + span + .sheet-weaponstat.sheet-name {
color: #F4DB41;
text-shadow: 0px 1px 0px black;
font-weight: bold;
}
input.sheet-mummysheet:checked ~ div * input.sheet-attr:checked + span.sheet-attr,
input.sheet-mummysheet:checked ~ span > input.sheet-attr:checked + span.sheet-attr,
input.sheet-mummysheet:checked ~ div * .sheet-potency input.sheet-attr:checked ~ span.sheet-attr,
input.sheet-sheetoptions.sheet-mummysheet:checked +span.sheet-attr {
color: #AD9F67;
text-shadow: 0px 1px 0px black;
}
input.sheet-mummysheet:checked ~ div * input.sheet-weapon:checked + span + .sheet-weaponstat.sheet-name {
color: #AD9F67;
text-shadow: 0px 1px 0px black;
font-weight: bold;
}
input.sheet-demonsheet:checked ~ div * input.sheet-attr:checked + span.sheet-attr,
input.sheet-demonsheet:checked ~ span > input.sheet-attr:checked + span.sheet-attr,
input.sheet-sheetoptions.sheet-demonsheet:checked +span.sheet-attr {
color: #50ACA1;
text-shadow: 0px 1px 0px black;
}
input.sheet-demonsheet:checked ~ div * input.sheet-weapon:checked + span + .sheet-weaponstat.sheet-name {
color: #50ACA1;
text-shadow: 0px 1px 0px black;
font-weight: bold;
}
input.sheet-beastsheet:checked ~ div * input.sheet-attr:checked + span.sheet-attr,
input.sheet-beastsheet:checked ~ span > input.sheet-attr:checked + span.sheet-attr,
input.sheet-sheetoptions.sheet-beastsheet:checked +span.sheet-attr {
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}
input.sheet-beastsheet:checked ~ div * input.sheet-weapon:checked + span + .sheet-weaponstat.sheet-name {
color: #2A2D80;
text-shadow: 0px 0px 10px black;
font-weight: bold;
}
input.sheet-huntersheet:checked ~ div * input.sheet-attr:checked + span.sheet-attr,
input.sheet-huntersheet:checked ~ span > input.sheet-attr:checked + span.sheet-attr,
input.sheet-sheetoptions.sheet-huntersheet:checked +span.sheet-attr {
color: #22EC4B;
text-shadow: 0px 1px 0px black;
}
input.sheet-huntersheet:checked ~ div * input.sheet-weapon:checked + span + .sheet-weaponstat.sheet-name {
color: #22EC4B;
text-shadow: 0px 1px 0px black;
font-weight: bold;
}
.sheet-expandedsheet,
.sheet-expandedsheet2,
.sheet-rolltemplates {
display: none;
}
.sheet-el_spacer {
height: 10px;
}
.sheet-spacer {
height: 20px;
}
.sheet-diceroller {
position: absolute;
top: 10px;
right: 10px;
background: white;
}
.charsheet .sheet-diceroller table th {
text-align: center;
font-size: 1.3em;
}
.charsheet .sheet-diceroller table {
border: solid 1px #000000;
}
.charsheet .sheet-diceroller table td {
border-right: solid 1px #000000;
}
.charsheet .sheet-diceroller table .sheet-bottom {
border-bottom: solid 1px #000000;
}
.charsheet .sheet-diceroller .sheet-rollcontainer {
background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/New%20World%20of%20Darkness%20Official/die.png') no-repeat center;
background-size: contain;
border-bottom: solid 1px #000000;
}
.charsheet .sheet-diceroller button:before {
font-family: "Courier" !important;
content: "Roll" !important;
background: none !important;
}
.charsheet .sheet-diceroller button {
height: 100%;
width: 100%;
opacity: 0;
}
.charsheet .sheet-diceroller .sheet-rolldisplay textarea {
resize: none;
overflow: hidden;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border: none;
padding: 0px;
text-align: center;
height: 70px;
pointer-events: none;
width: 120px;
}
.charsheet .sheet-3colrow {
display: inline;
clear: none;
width: 100%;
}
.charsheet .sheet-3colrow table {
width: 100%;
border-collapse: separate;
}
.charsheet .sheet-3colrow .sheet-col {
width: calc(33% - 1px);
margin-right: 0px;
margin-left: 0px;
}
.charsheet input[type=text] {
display: inline-block;
width: 165px;
font-family: "Courier";
font-size: 12px;
height: 20px;
border: 0px;
border-radius: 0px;
background: none;
-moz-box-shadow: 0px 1px 0px #000;
-webkit-box-shadow: 0px 1px 0px #000;
box-shadow: 0px 1px 0px #000;
}
.charsheet textarea {
display: inline-block;
width:100%;
margin:1px 0px;
resize:none;
font-family: "Courier";
color: #000000;
}
.charsheet table td, .charsheet table th {
font-size: 1em;
font-weight: bolder;
font-family: "Courier";
text-align: left;
width: 0%;
border: 0px #000000;
padding: 2px;
vertical-align: middle;
color: #000000;
margin:0px 0px;
line-height: 1em;
}
.charsheets table td {
white-space: nowrap;
text-align: left;
}
.sheet-3colrow table th, .sheet-skills table th, .sheet-othertraits table th {
font-size: 1.7em;
font-weight: bolder;
font-family: "Courier";
color: #000000;
text-decoration: overline underline;
text-align: center;
}
.sheet-skills table {
width: 200px;
border-right: solid 1px black;
}
.sheet-skills td {
line-height: 1em;
}
.sheet-subheader {
font-size: 1.4em;
font-weight: bolder;
text-align: center;
}
.sheet-subsubheader {
font-size: 0.8em;
text-align: center;
font-style: italic;
}
.sheet-skills {
float: left;
}
.sheet-otherattributes {
float: right;
width: 200px;
}
table.sheet-attributes .sheet-spacer:not(:nth-child(2)) {
border-left: solid 1px black;
}
table.sheet-attributes .sheet-spacer {
border-right: solid 1px black;
}
table.sheet-attributes td:last-child {
border-right: solid 1px black;
}
.charsheet table.sheet-attributes tr:nth-child(2) td:not(.sheet-spacer):not(.sheet-category) {
border-top: solid 1px black;
}
.charsheet table.sheet-attributes tr:last-child td:not(.sheet-spacer):not(.sheet-category) {
border-bottom: solid 1px black;
}
.charsheet table.sheet-attributes td.sheet-category {
text-align: right;
}
input.sheet-attr {
width: 80px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
}
span.sheet-attr {
display: inline-block;
font-size: 13px;
color: black;
font-weight: bold;
cursor: pointer;
position: relative;
margin-left: -79px;
}
input.sheet-opt {
width: 87px;
height: 20px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
}
span.sheet-opt {
text-align: center;
display: inline-block;
font-size: 13px;
background: #4a6486;
color: white;
font-weight: bold;
border-radius: 4px;
width: 87px;
height: 20px;
cursor: pointer;
position: relative;
margin-left: -91px;
}
input.sheet-opt:checked + span.sheet-opt
{
background: #ab8b57;
color: white;
border-radius: 4px;
}
/* Hide actual dot/checkbox */
input[type="radio"].sheet-normal,
input.sheet-weapon,
input[type="checkbox"].sheet-normal
{
position: absolute;
opacity: 0.0;
width: 15px;
cursor: pointer;
z-index: 10;
margin-top: 5px;
}
input.sheet-weapon {
margin-top: 0px;
}
/* Styles common to fake dot and checkbox */
input[type="radio"].sheet-normal + span::before,
input.sheet-weapon + span::before,
input[type="checkbox"].sheet-normal + span::before,
.sheet-permadot::before
{
border: solid 1px #000000;
line-height: 11px;
text-align: center;
display: inline-block;
vertical-align: middle;
-moz-box-shadow: 0 0 0px #000;
-webkit-box-shadow: 0 0 0px #000;
box-shadow: 0 0 0px #000;
background: #000000;
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);
}
/* Styles unique to fake dot (checked or left of checked) */
input[type="radio"].sheet-normal + span::before,
input.sheet-weapon:checked + span::before,
.sheet-permadot::before
{
content: "•";
width: 10px;
height: 10px;
font-size: 41.9px;
font-family: "Arial";
text-indent: -2px;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
input.sheet-weapon + span::before
{
content: "";
width: 10px;
height: 10px;
font-size: 35px;
font-family: "Arial";
text-indent: -1px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
/* Styles unique to fake checkbox (unchecked) */
input[type="checkbox"].sheet-normal + span::before
{
position:relative;
content: "";
opacity: 1.0;
width: 10px;
height: 10px;
font-size: 12px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
}
/* Styles unique to fake checkbox (checked) */
input[type="checkbox"].sheet-normal:checked + span::before
{
background:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%),
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%);
-moz-box-shadow: 0 0 2px transparent;
-webkit-box-shadow: 0 0 2px transparent;
box-shadow: 0 0 2px transparent;
}
/* Remove dot from all radios _after_ selected one */
input[type="radio"].sheet-normal:checked ~ input[type="radio"] + span::before
{
content: "";
}
input.sheet-used+span::before
{
content: "✖";
width: 12px;
height: 12px;
font-size: 12px;
-moz-border-radius: 0%;
-webkit-border-radius: 0%;
border-radius: 0%;
}
input.sheet-zero:checked + span::before
{
opacity: 0;
}
input.sheet-zero:hover + span::before
{
opacity: 0.25;
font-size: 12px;
content: "✖";
text-indent: 0.5px;
}
input.sheet-zero + span::before
{
opacity: 0;
}
input.sheet-DP1Spec + span::before,
input.sheet-DP2Spec + span::before,
input.sheet-DP2Spec + span::before,
input.sheet-DP3Spec + span::before,
input.sheet-DP4Spec + span::before,
input.sheet-DP5Spec + span::before
{
opacity: 1;
margin-bottom: 10px;
}
div.sheet-DP1,
div.sheet-DP2,
div.sheet-DP2,
div.sheet-DP3,
div.sheet-DP4,
div.sheet-DP5
{
display: inline;
}
div.sheet-DP1wSpec,
div.sheet-DP2wSpec,
div.sheet-DP2wSpec,
div.sheet-DP3wSpec,
div.sheet-DP4wSpec,
div.sheet-DP5wSpec
{
display: none;
}
input.sheet-DP1Spec:checked ~ div.sheet-DP1,
input.sheet-DP2Spec:checked ~ div.sheet-DP2,
input.sheet-DP2Spec:checked ~ div.sheet-DP2,
input.sheet-DP3Spec:checked ~ div.sheet-DP3,
input.sheet-DP4Spec:checked ~ div.sheet-DP4,
input.sheet-DP5Spec:checked ~ div.sheet-DP5
{
display: none;
}
input.sheet-DP1Spec:checked ~ div.sheet-DP1wSpec,
input.sheet-DP2Spec:checked ~ div.sheet-DP2wSpec,
input.sheet-DP2Spec:checked ~ div.sheet-DP2wSpec,
input.sheet-DP3Spec:checked ~ div.sheet-DP3wSpec,
input.sheet-DP4Spec:checked ~ div.sheet-DP4wSpec,
input.sheet-DP5Spec:checked ~ div.sheet-DP5wSpec
{
display: inline;
}
h4.sheet-SCorI1,
h4.sheet-SCorI2,
h4.sheet-CorC1,
h4.sheet-CorC2
{
display: block;
}
input.sheet-SCorI1,
input.sheet-SCorI2,
input.sheet-CorC1,
input.sheet-CorC2
{
width: 120px;
}
input.sheet-SCorI1:checked ~ h4.sheet-SCorI1,
input.sheet-SCorI2:checked ~ h4.sheet-SCorI2
{
display: none;
}
input.sheet-CorC1:checked ~ h4.sheet-CorC1,
input.sheet-CorC2:checked ~ h4.sheet-CorC2
{
display: none;
}
.sheet-rolltemplate-wod table,
.sheet-rolltemplate-wod-attack table,
.sheet-rolltemplate-wod-simple table,
.sheet-rolltemplate-wod-3part table
{
width: 189px;
height: 100%;
background: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/New%20World%20of%20Darkness%20Official/roll.jpg) top left;
background-size: 189px 100%;
background-repeat: no-repeat;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
border-spacing: 0;
}
.sheet-rolltemplate-wod th,
.sheet-rolltemplate-wod-attack th,
.sheet-rolltemplate-wod-simple th,
.sheet-rolltemplate-wod-3part th
{
color: rgb(112, 0, 0);
padding: 20px 20px 2px 20px;
line-height: 1.2em;
font-size: 1.2em;
text-align: left;
}
.sheet-rolltemplate-wod td,
.sheet-rolltemplate-wod-attack td,
.sheet-rolltemplate-wod-simple td,
.sheet-rolltemplate-wod-3part td
{
padding: 2px 20px 2px 20px;
font-size: 1.0em;
vertical-align: top;
}
.sheet-rolltemplate-wod .sheet-result,
.sheet-rolltemplate-wod-attack .sheet-result,
.sheet-rolltemplate-wod-simple .sheet-result,
.sheet-rolltemplate-wod-3part .sheet-result
{
font-size: 1.2em;
text-align: center;
color: rgb(112, 0, 0);
padding: 2px 20px 2px 20px;
}
.sheet-rolltemplate-wod .inlinerollresult,
.sheet-rolltemplate-wod-attack .sheet-result .inlinerollresult,
.sheet-rolltemplate-wod-simple .inlinerollresult,
.sheet-rolltemplate-wod-3part .inlinerollresult
{
background-color: transparent;
color: #000000;
border: none;
}
.sheet-rolltemplate-wod-attack .inlinerollresult
{
background-color: transparent;
color: #000000;
border: none;
font-size: 1em;
padding: 0px;
}
.sheet-rolltemplate-wod .inlinerollresult.fullcrit,
.sheet-rolltemplate-wod-attack .sheet-result .inlinerollresult.fullcrit,
.sheet-rolltemplate-wod-simple .inlinerollresult.fullcrit,
.sheet-rolltemplate-wod-3part .inlinerollresult.fullcrit
{
color: #000000;
border: none;
}
.sheet-rolltemplate-wod .inlinerollresult.fullfail,
.sheet-rolltemplate-wod-attack .sheet-result .inlinerollresult.fullfail,
.sheet-rolltemplate-wod-simple .inlinerollresult.fullfail,
.sheet-rolltemplate-wod-3part .inlinerollresult.fullfail
{
color: #000000;
border: none;
}
.sheet-rolltemplate-wod .inlinerollresult.importantroll,
.sheet-rolltemplate-wod-attack .inlinerollresult.importantroll,
.sheet-rolltemplate-wod-simple .inlinerollresult.importantroll,
.sheet-rolltemplate-wod-3part .inlinerollresult.importantroll
{
color: #000000;
border: none;
}
.sheet-rolltemplate-wod .sheet-specialrollflag,
.sheet-rolltemplate-wod-attack .sheet-specialrollflag,
.sheet-rolltemplate-wod-simple .sheet-specialrollflag,
.sheet-rolltemplate-wod-3part .sheet-specialrollflag {
color: #000000;
height: 30px;
text-align: right;
vertical-align: top;
}
.sheet-variablecontainer
{
padding: 0px;
text-align: center;
}
/* Remove dot from all radios _after_ selected one */
.sheet-variablecontainer input[type="radio"].sheet-normal:checked ~ input[type="radio"] + span::before
{
opacity: 0;
display: none;
}
.sheet-variablecontainer input[type="radio"] {
pointer-events: none;
}
.sheet-variablecontainer input[type="radio"].sheet-whitedot,
.sheet-variablecontainer input[type="radio"].sheet-bashingdot,
.sheet-variablecontainer input[type="radio"].sheet-lethaldot,
.sheet-variablecontainer input[type="radio"].sheet-aggravateddot
{
pointer-events: auto;
}
/* -----BOXES----- */
.sheet-variablecontainer .sheet-healthboxcontainer {
position: absolute;
}
.sheet-variablecontainer .sheet-healthboxcontainer input
{
top: 10px;
right: -3px;
position: absolute;
opacity: 0;
width: 15px;
cursor: pointer;
margin-top: 5px;
z-index: 101;
}
.sheet-variablecontainer .sheet-healthboxcontainer input + span::before
{
top: 15px;
right: 0px;
position: absolute;
content: "";
opacity: 1.0;
width: 10px;
height: 10px;
font-size: 12px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
border: solid 1px #000000;
line-height: 11px;
text-align: center;
vertical-align: middle;
-moz-box-shadow: 0 0 0px #000;
-webkit-box-shadow: 0 0 0px #000;
box-shadow: 0 0 0px #000;
background: #000000;
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);
}
.sheet-variablecontainer .sheet-healthboxcontainer input:checked + span::before
{
-moz-box-shadow: 0 0 2px transparent;
-webkit-box-shadow: 0 0 2px transparent;
box-shadow: 0 0 2px transparent;
}
.sheet-variablecontainer .sheet-healthboxcontainer input[type="radio"].sheet-whitedot:checked + span::before
{
content: "" !important;
}
.sheet-variablecontainer .sheet-healthboxcontainer input[type="radio"].sheet-bashingdot:checked + span::before
{
background:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%);
}
.sheet-variablecontainer .sheet-healthboxcontainer input[type="radio"].sheet-lethaldot:checked + span::before
{
background:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%),
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%);
}
.sheet-variablecontainer .sheet-healthboxcontainer input[type="radio"].sheet-aggravateddot:checked + span::before
{
background:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%),
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%),
linear-gradient(to right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%);
}
.sheet-variablecontainer .sheet-healthboxcontainer input[type="radio"].sheet-whitedot {
z-index: 102;
}
input.sheet-whitedot:checked ~ input.sheet-bashingdot,
input.sheet-bashingdot:checked ~ input.sheet-lethaldot,
input.sheet-lethaldot:checked ~ input.sheet-aggravateddot {
z-index: 103;
}
.sheet-variablecontainer .sheet-healthboxcontainer span {
display: none;
}
input.sheet-whitedot:checked ~ span.sheet-whitedot,
input.sheet-bashingdot:checked ~ span.sheet-bashingdot,
input.sheet-lethaldot:checked ~ span.sheet-lethaldot,
input.sheet-aggravateddot:checked ~ span.sheet-aggravateddot {
display: inline-block;
}
.sheet-healthcontainer {
width: 20px;
margin-left: -16px;
display: inline-block;
}
/* Remove extra health boxes */
.sheet-variablecontainer input[type="radio"].sheet-normal:checked ~ .sheet-healthboxcontainer
{
display: none;
}
.sheet-variablecontainer input[type="radio"].sheet-normal:checked + span + .sheet-healthboxcontainer
{
display: inline-block !important;
}
.sheet-variablecontainer input[type="radio"].sheet-normal + span + .sheet-healthboxcontainer + .sheet-woundpenalties
{
position: relative;
display: none;
}
.sheet-variablecontainer input[type="radio"].sheet-normal:checked + span + .sheet-healthboxcontainer + .sheet-woundpenalties
{
display: inline-block
}
.sheet-variablecontainer input[type="radio"].sheet-normal:checked + span + .sheet-healthboxcontainer + .sheet-woundpenalties > span
{
position: absolute;
top: 17px;
left: -45px;
width: 50px;
height: 10px;
font-size: 10px;
}
.sheet-variablecontainer .sheet-healthboxcontainer input[type="checkbox"] + span {
display: inline-block;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
.sheet-derived input[type=number] {
width: 18px;
padding: 0px;
background: none;
color: black;
font-family: "Courier";
text-align: center;
border: none;
cursor: default;
box-shadow: none;
height: 18px;
}
.sheet-settings input[type=number] {
width: 28px;
padding: 2px;
background: none;
color: black;
font-family: "Courier";
text-align: center;
border: none;
cursor: default;
-moz-box-shadow: 0px 1px 0px #000;
-webkit-box-shadow: 0px 1px 0px #000;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-webkit-appearance:none;
-moz-appearance:none;
margin-bottom: 0px;
}
.sheet-derived input::-webkit-outer-spin-button,
.sheet-derived input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
.sheet-rowtext {
text-align: center;
vertical-align: top;
}
.sheet-rowtext input[type=text] {
padding: 0.1px;
height: 14px;
}
.sheet-merittable {
margin-right: 15px;
margin-left: 15px;
}
.sheet-merittable input[type=text] {
padding: 0.1px;
height: 14px;
width: 135px;
}
.sheet-weapontable input[type=text].sheet-weaponstat {
width: 17px;
text-align: center;
}
.sheet-weapontable input[type=text].sheet-weaponstat.sheet-name {
width: 130px;
text-align: left;
}
.sheet-weapontable input[type=text].sheet-weaponstat.sheet-range {
width: 80px;
text-align: center;
}
.sheet-weapontable input[type=text].sheet-weaponstat.sheet-mag {
width: 30px;
text-align: center;
}
.sheet-weapontable input[type=text].sheet-weaponstat.sheet-desc {
width: 135px;
text-align: left;
}
.sheet-weapontable select,
.sheet-settings select,
.sheet-expandedsheet select {
width: 47px;
height: 14px;
padding: 0px;
background: none;
color: black;
font-family: "Courier";
font-size: 12px;
border: none;
cursor: default;
box-shadow: 0px 1px 0px #000;
border-radius: 0px;
-webkit-appearance:none;
-moz-appearance:none;
margin-bottom: 0px;
line-height: 14px;
}
.sheet-settings select,
.sheet-expandedsheet select {
width: 80px;
}
.sheet-wpnheader td {
text-align: center;
}
.sheet-dottable {
text-align: center;
}
.sheet-dottable table {
width: 100%;
}
.sheet-dottable .sheet-mortal td,
.sheet-dottable .sheet-vampire td {
text-align: center;
}
.sheet-expandedsheet input[type="text"].sheet-partname {
width: 116px;
}
.sheet-expandedsheet input[type="text"].sheet-name {
width: 150px;
}
.sheet-expandedsheet input[type="text"].sheet-partpool {
width: 20px;
padding: 1px;
margin-left: 3px;
background: none;
color: black;
font-family: "Courier";
text-align: center;
border: none;
cursor: default;
-moz-box-shadow: 0px 1px 0px #000;
-webkit-box-shadow: 0px 1px 0px #000;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-webkit-appearance:none;
-moz-appearance:none;
margin-bottom: 0px;
}
.sheet-expandedsheet .sheet-rollcontainer {
background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/New%20World%20of%20Darkness%20Official/die.png') no-repeat center;
background-size: contain;
height: 40px;
width: 40px;
display: inline-block;
float: right;
}
.sheet-customroll button:before {
font-family: "Courier" !important;
content: "Roll" !important;
background: none !important;
}
.sheet-customroll button {
height: 100%;
width: 100%;
opacity: 0;
}
.sheet-expandedsheet textarea,
.sheet-expandedsheet2 textarea {
resize:vertical;
width: calc(100% - 10px);
margin-top: 10px;
height: 74px;
}
.sheet-expandedsheet .sheet-customroll {
border: solid 1px black;
border-radius: 4px;
padding: 5px;
margin-bottom: 15px;
}
.sheet-leftcolumn {
display: inline-block;
margin-right: 10px;
}
.sheet-rightcolumn {
display: inline-block;
float: right;
}
td.sheet-vitae {
padding: 0px;
}
tr.sheet-vitae {
height: 13px;
}
.sheet-vitae input[type=checkbox] {
margin-top: 0px;
width: 12px;
}
input[type=text].sheet-title {
text-align: center;
width: 300px;
font-size: 1.4em;
font-weight: bolder;
padding: 0px;
}
.sheet-expandedsheet2 {
text-align: center;
}
.sheet-expandedsheet2 .sheet-subheader {
width: 300px;
font-size: 1.4em;
font-weight: bolder;
}