Files
roll20-character-sheets-tester/CWOD-W20/W20.css
T
pensman 2ebbd405bd *Standard difficulty is 6, so attack difficulty has been defaulted to 6.
*When rolling damage, wound penalties should not be applied. *Only extra
successes above those required to hit should be applied as extra dice of
damage. Changed wording of query to reflect this. Change default extra die
to 0, since this is the minimum extra dice that can be rolled as extra
damage. *Updated broken image for check boxes. Now slash image will
display for both conditions, but will distinguish between checked and
unchecked with red behind image. *Background was using a Chronicles of
Darkness image. Updated to use W20 specific background.
2017-06-12 23:21:59 -04:00

942 lines
21 KiB
CSS

/*============= TABS =============*/
/*----------- Tabs Setup -------------*/
div.sheet-core-content {
display: none;
width:840px;
}
.charsheet div[class^="sheet-section"] {
/*visibility: hidden;
opacity: 0;
max-height:0;
overflow: hidden;*/
display: none;
}
.charsheet {
background: url('http://i.imgur.com/CWLfKIZ.jpg');
background-size:100%;
background-repeat: repeat-y;
width:840px;
}
.charsheet input.sheet-tab1:checked ~ div.sheet-section-1,
.charsheet input.sheet-tab2:checked ~ div.sheet-section-2,
.charsheet input.sheet-tab3:checked ~ div.sheet-section-3,
.charsheet input.sheet-tab4:checked ~ div.sheet-section-4,
.charsheet input.sheet-tab5:checked ~ div.sheet-section-5,
.charsheet input.sheet-tab6:checked ~ div.sheet-section-6,
.charsheet input.sheet-tab7:checked ~ div.sheet-section-7,
.charsheet input.sheet-tab8:checked ~ div.sheet-section-8,
.charsheet input.sheet-tab9:checked ~ div.sheet-section-9 {
/*max-height: 999999px;
visibility: visible;
opacity: 1;
transition: opacity 0.5s linear 0s;
overflow: auto;*/
display: block;
}
.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] {
/*max-height: 999999px;
visibility: visible;
opacity: 1;
transition: opacity 0.5s linear 0s;*/
display: block;
}
.charsheet input.sheet-tab {
width: 100px;
height: 40px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
margin-bottom:10px;
}
.charsheet span.sheet-tab {
text-align: center;
display: inline-block;
font-size: 13px;
background: white;
color: black;
font-weight: bold;
border-radius: 4px;
width: 100px; /*originally 87px*/
height: 40px; /*originally 20px*/
cursor: pointer;
position: relative;
vertical-align: middle;
margin-left: -101px;/*originally 91px*/
text-shadow: none;
border:2px solid black;
}
.charsheet input.sheet-tab1:checked + span.sheet-tab1,
.charsheet input.sheet-tab2:checked + span.sheet-tab2,
.charsheet input.sheet-tab3:checked + span.sheet-tab3,
.charsheet input.sheet-tab4:checked + span.sheet-tab4,
.charsheet input.sheet-tab5:checked + span.sheet-tab5,
.charsheet input.sheet-tab6:checked + span.sheet-tab6,
.charsheet input.sheet-tab7:checked + span.sheet-tab7,
.charsheet input.sheet-tab8:checked + span.sheet-tab8,
.charsheet input.sheet-tab9:checked + span.sheet-tab9,
.charsheet input.sheet-tab10:checked + span.sheet-tab10,
.charsheet input.sheet-tab99:checked + span.sheet-tab99 {
background: black; /*originally ab8b57*/
color: white; /*originally white*/
border-radius: 4px;
border:2px solid white;
}
/*----------- End Tab Setup -----------*/
.charsheet label {
display: inline-block;
width: 75px;
text-align: right;
padding-bottom: 0px;
}
.charsheet input {
display: inline-block;
width: 150px;
}
.charsheet {
background-color: white;
}
.charsheet select {
width: 42px;
margin-bottom:0;
}
.charsheet textarea {
resize:vertical;
}
.charsheet {
font-family: 'RufscriptRegular';
text-shadow: 0em 0em 0.3em white, 0em 0em 0.3em white, 0em 0em 0.3em white, 0em 0em 0.3em white, 0em 0em 0.3em white;
}
@font-face {
font-family: 'RufscriptRegular';
src: url('http://openfontlibrary.org/assets/fonts/rufscript/92112519f91e7a5ab80261a017c09b72/f886671cdc88e2725676a457e14e8512/RufscriptRegular.ttf');
font-weight: normal;
font-style: normal;
}
.sheet-shifter[type="number"] {
background:transparent;
text-align:center;
box-shadow:none;
border:none;
color:black;
text-shadow:0px 0px 2px white,0px 0px 2px white,0px 0px 2px white;
}
/*-----Sheet Table-----*/
.sheet-table {
margin-left:auto;
margin-right:auto;
}
/*-----End of Sheet Table-----*/
.sheet-formsbanner {
background: url('http://www.allmystery.de/i/t6ea465_Full_Moon_Offering_I_by_fobiapharmer.jpg') no-repeat;
background-size:100%;
}
.sheet-shifter {
color:white;
text-shadow: 0px 0px 3px black,0px 0px 3px black,0px 0px 3px black;
font-size:1.2em;
opacity: 1;
}
.sheet-shifter th {
color:black;
text-shadow: 0px 0px 3px white,0px 0px 3px white,0px 0px 3px white;
font-size:1.4em;
}
th.sheet-gray,
td.sheet-gray {
background: linear-gradient(rgba(128,128,128,0.5),rgba(128,128,128,0.5));
}
.sheet-shifter:active,
.sheet-shifter:hover {
opacity: 1.0;
}
.sheet-red {
color:red;
text-shadow: 0px 0px 3px black,0px 0px 3px black,0px 0px 3px black;
font-size:1.4em;
}
.sheet-smallcaps {
font-variant: small-caps;
}
/*----------- form_select radio -----------*/
input.sheet-form_select[type="radio"]
{
width: 14px;
height: 14px;
position: relative;
top: 0px;
left: 20px;
margin-left: 0px;
margin-top: -10px;
margin-bottom: -10px;
margin-right: 0px;
cursor: pointer;
z-index: 1;
opacity: 0;
width:70px;
box-shadow: 0px 0px 5px blue;
}
.charsheet input.sheet-form_select + span.sheet-form_select {
position: relative;
top: 0px;
left: -35px;
color:black;
font-weight:bold;
text-shadow:0px 0px 2px white, 0px 0px 2px white, 0px 0px 2px white;
}
.charsheet input.sheet-form_select:checked + span.sheet-form_select {
color:white;
text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 5px red,0px 0px 5px red;
}
span.sheet-form_select {
width:100px;
text-align:right;
}
.charsheet input.sheet-form_select + span.sheet-form_select {
width:70px;
text-align:right;
}
/*-----swapping stuff-----*/
div.sheet-block_a {
display: inline;
}
div.sheet-block_b {
display: none;
}
input.sheet-block_switch:checked ~ div.sheet-block_a {
display: none;
}
input.sheet-block_switch:checked ~ div.sheet-block_b {
display: inline;
}
/* -----Health boxes----- */
table.sheet-damagetrack td {
margin-bottom: 5px;
}
div.sheet-healthbox {
width: 20px;
height: 20px;
position: relative;
margin-bottom: 10px;
}
input.sheet-healthbox {
margin: 0 0 0 0;
opacity: 0;
width: 20px;
height: 20px;
position: absolute;
z-index: 1;
}
span.sheet-healthbox {
margin: 0 0 0 0;
display: none;
}
input.sheet-blackdot {
z-index: 2;
}
input.sheet-blackdot:checked + input.sheet-whitedot,
input.sheet-whitedot:checked + input.sheet-bashingdot,
input.sheet-bashingdot:checked + input.sheet-lethaldot,
input.sheet-lethaldot:checked + input.sheet-aggravateddot {
z-index: 3;
}
input.sheet-blackdot:checked ~ span.sheet-blackdot,
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-blackdot {
width: 20px;
height: 20px;
background: black;
background-size: 100%;
border-radius: 50%;
}
.sheet-whitedot {
width: 15px;
height: 15px;
background: white;
background-size: 100%;
border-radius: 50%;
border:2px solid black;
}
.sheet-bashingdot {
width: 15px;
height: 15px;
background: transparent;
background-size: 100%;
border-radius: 50%;
border:2px solid black;
color:black;
}
.sheet-bashingdot:before {
font-family: "Candal", fantasy;
content:"/";
font-weight: 900;
font-size: 18px;
margin-left:3px;
}
.sheet-lethaldot {
width: 15px;
height: 15px;
background: transparent;
background-size: 100%;
border-radius: 50%;
border:2px solid black;
color:black;
}
.sheet-lethaldot:before {
font-family: "Candal", fantasy;
content:"X";
font-weight: 900;
font-size: 18px;
margin-left:3px;
}
.sheet-aggravateddot {
width: 15px;
height: 15px;
background: transparent;
background-size: 100%;
border-radius: 50%;
border:2px solid black;
}
.sheet-aggravateddot:before {
font-family: "Candal", fantasy;
content:"X";
font-weight: 900;
font-size: 18px;
margin-left:3px;
color:red;
}
/*------------Better Checkbox-----------*/
/* Hide actual radio/checkbox */
input[type="checkbox"]
{
opacity: 0;
width: 16px;
height: 16px;
position: relative;
top: 5px;
left: 6px;
margin-top: -18px;
margin-left: -10px;
margin-right: -11px;
margin-bottom: 0px;
cursor: pointer;
z-index: 1;
}
/* Fake radio/checkbox */
input[type="checkbox"] + span::before
{
margin-right: 4px;
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);
}
/* Fake checkbox */
input[type="checkbox"] + span::before
{
content: "";
width: 14px;
height: 14px;
font-size: 12px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
input[type="checkbox"]:checked + span::before
{
content: "✓";
}
/*------------Better Checkbox-----------*/
/* Hide actual checkbox */
input.sheet-word[type="checkbox"] {
opacity: 0;
width: 100px;
height: 32px;
position: relative;
top: 35px;
left: 45%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
cursor: pointer;
z-index: 1;
box-shadow: 0px 0px 5px green;
}
/* Fake checkbox */
input.sheet-word[type="checkbox"] + span::before {
display:none;
background:transparent;
border:none;
box-shadow:none;
}
/* Fake checkbox */
input.sheet-word[type="checkbox"] + span::before {
display:none;
background:transparent;
border:none;
box-shadow:none;
}
input.sheet-word[type="checkbox"]:checked + span::before {
display:none;
background:transparent;
border:none;
box-shadow:none;
}
.sheet-block_switch,
.sheet-hidden {
display:none;
background:transparent;
border:none;
box-shadow:none;
}
/*------------End of word Checkbox-----------*/
/*------------Claw Checkbox-----------*/
/* Hide actual checkbox */
input.sheet-claw[type="checkbox"] {
opacity: 0;
width: 30px;
height: 30px;
position: relative;
top: 0px;
left: 30px;
margin-top: 0px;
margin-left: 00px;
margin-right: 0px;
margin-bottom: 0px;
cursor: pointer;
z-index: 1;
}
/* Fake checkbox */
input.sheet-claw[type="checkbox"] + span::before {
background:url('http://mongoosemachine.com/images/interface/claw-mark-mid-left.png') no-repeat;
background-size:100%;
width: 30px;
height: 30px;
box-shadow:none;
border:none;
-webkit-filter: drop-shadow(0px 0px 5px red);
position: relative;
top: 0px;
left: 0px;
}
input.sheet-claw[type="checkbox"]:checked + span::before {
background:url('http://mongoosemachine.com/images/interface/claw-mark-mid-left.png') no-repeat;
background-size:100%;
content:"";
width: 30px;
height: 30px;
box-shadow:none;
border:none;
-webkit-filter: drop-shadow(0px 0px 5px white);
}
input.sheet-claw:checked ~ div.sheet-body {
display: none;
}
/*-------end of Claw Checkbox-----------*/
/*-----------------------------*/
/*-----------------------------*/
/*-------Start of Radio Button-----------*/
/*-----------------------------*/
/*-----------------------------*/
/*-------Start of sheet-Query-----------*/
div.sheet-Query {
position: relative;
width: 30px;
height: 20px;
left:20px;
top:5px;
margin:-15px;
}
input.sheet-Query {
width: 30px;
height: 20px;
position: absolute;
left:10px;
top:0px;
z-index: 1;
opacity: 0;
}
span.sheet-Query {
margin: 10px 0 0 40px;
display: none;
position: absolute;
left:-40px;
top:-10px;
width:50px;
text-align:center;
}
input.sheet-no {
z-index: 2;
}
input.sheet-no:checked + input.sheet-yes,
input.sheet-yes:checked + input.sheet-no {
z-index: 3;
}
input.sheet-no:checked ~ span.sheet-no,
input.sheet-yes:checked ~ span.sheet-yes {
display: inline-block;
}
/*------------Forms-----------*/
/* Hide actual normal radio */
input.sheet-normal[type="radio"]
{
opacity: 0;
width: 16px;
height: 16px;
position: relative;
top: 5px;
left: 6px;
margin: -10px;
cursor: pointer;
z-index: 1;
}
input.sheet-normal[type="radio"] + span::before
{
margin-right: 0px;
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);
font-family: 'New Time Roman';
color:black;
content: "•";
width: 12px;
height: 12px;
font-size: 3em;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
/* Hide actual Forms radio */
input.sheet-forms[type="radio"]
{
opacity: 0;
width: 16px;
height: 16px;
position: relative;
top: 5px;
left: 6px;
margin: -10px;
cursor: pointer;
z-index: 1;
}
/* Fake Forms radio */
input.sheet-forms[type="radio"]
{
opacity: 0;
width: 16px;
height: 16px;
position: relative;
top: 5px;
left: 6px;
margin: -10px;
cursor: pointer;
z-index: 1;
}
/* End of Forms radio */
.sheet-center {
margin-left:auto;
margin-right:auto;
text-align:center;
}
/* -----Remove dot from all radios _after_ selected one----- */
input.sheet-normal[type="radio"]:checked ~ input.sheet-normal[type="radio"] + span::before
{
content: "";
}
/*------------empty traits-----------*/
input.sheet-zero[type="radio"]:checked + span::before
{
opacity: 0;
}
input.sheet-zero[type="radio"]:hover + span::before
{
opacity: 1;
}
input.sheet-zero[type="radio"] + span::before
{
font-size: 12px;
content: "✖";
opacity: 0.25;
}
/* end of normal radio */
/* Fake radio */
input.sheet-forms[type="radio"] + span::before {
margin-right: 4px;
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);
}
/* Fake radio */
input.sheet-forms[type="radio"] + span::before {
content: "";
width: 12px;
height: 12px;
font-size: 24px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
input.sheet-forms[type="radio"]:checked + span::before {
content: "";
background: black;
background: -moz-radial-gradient(white,green, red);
background: -webkit-radial-gradient(white, green,red);
background: -ms-radial-gradient(white,green, red);
background: -o-radial-gradient(white,green, red);
background: radial-gradient(white, green,red);
}
/* end of forms radio */
/* =====Buttons ===== */
/* =====initiative button ===== */
button[type=roll].sheet-initiative:before {
background-image: none;
/*background-color: #f2f5d3;*/
/*background-color: white;*/
content: "";
}
button[type=roll].sheet-initiative {
background-image: none;
background: transparent;
font-family:"RufscriptRegular";
color:black;
font-size:1.2em;
font-weight:700;
border-radius: 4px;
box-shadow:none;
height:28px;
width:80px;
border: 2px outset gray;
}
button[type=roll].sheet-initiative:hover {
border: 2px inset gray;
background:black;
color:white;
}
button[type=roll].sheet-initiative:active {
border: 2px inset gray;
background:red;
color:black;
}
/* =====adv button ===== */
button[type=roll].sheet-adv:before {
background-image: none;
/*background-color: #f2f5d3;*/
/*background-color: white;*/
content: "";
}
button[type=roll].sheet-adv {
background-image: none;
background: transparent;
font-family:"RufscriptRegular";
color:black;
font-size:1.4em;
font-weight:700;
border-radius: 4px;
box-shadow:none;
height:28px;
width:150px;
border: 2px outset gray;
}
button[type=roll].sheet-adv:hover {
border: 2px inset gray;
background:black;
color:white;
}
button[type=roll].sheet-adv:active {
border: 2px inset gray;
background:red;
color:black;
}
/* =====damage button ===== */
button[type=roll].sheet-damageroll:before {
background-image: none;
}
button[type=roll].sheet-damageroll {
background-image: none;
background: black;
font-family:"RufscriptRegular";
color:white;
font-size:1.4em;
font-weight:700;
border-radius: 4px;
box-shadow:none;
height:28px;
width:28px;
border: 1px solid red;
}
button[type=roll].sheet-damageroll:hover {
border: 1px solid black;
background:red;
color:black;
}
button[type=roll].sheet-damageroll:active {
border: 1px solid red;
background:red;
color:white;
}
/* =====weaponroll button ===== */
button[type=roll].sheet-weaponroll:before {
background-image: none;
}
button[type=roll].sheet-weaponroll {
background-image: none;
background: red;
font-family:"RufscriptRegular";
color:black;
font-size:1.4em;
font-weight:700;
border-radius: 4px;
box-shadow:none;
height:28px;
width:28px;
border: 1px solid black;
}
button[type=roll].sheet-weaponroll:hover {
border: 1px solid red;
background:black;
color:red;
}
button[type=roll].sheet-weaponroll:active {
border: 1px solid black;
background:red;
color:white;
}
/* %%%%% %%%%% %%%%% */
/* %%%%% %%%%% %%%%% */
/* %%%%% %%%%% %%%%% */
/* roll templates */
/* %%%%% %%%%% %%%%% */
/* %%%%% %%%%% %%%%% */
/* %%%%% %%%%% %%%%% */
.sheet-rolltemplate-skill table {
width: 189px;
height: 189px;
padding: 2px;
background: url(http://i.imgur.com/xBk4U1p.jpg) top left;
background-size: 189px 189px;
background-repeat: no-repeat;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
border-spacing: 0;
}
.sheet-rolltemplate-skill th {
color: rgb(112, 0, 0);
padding: 15px 2px 2px 20px;
line-height: 1.2em;
font-size: 1.2em;
text-align: left;
}
.sheet-rolltemplate-skill td {
padding-left: 20px;
font-size: 1.0em;
vertical-align: top;
}
.sheet-rolltemplate-skill .sheet-result {
font-size: 1.2em;
text-align: center;
color: rgb(112, 0, 0);
padding-bottom: 20px;
}
.sheet-rolltemplate-skill .inlinerollresult {
background-color: transparent;
color: #000000;
border: none;
}
.sheet-rolltemplate-skill .inlinerollresult.fullcrit {
color: #3FB315;
border: none;
}
.sheet-rolltemplate-skill .inlinerollresult.fullfail {
color: #000000;
border: none;
}
.sheet-rolltemplate-skill .inlinerollresult.importantroll {
color: #3FB315;
border: none;
}
/* %%%%% %%%%% %%%%% */
/* wod */
/* %%%%% %%%%% %%%%% */
.sheet-rolltemplate-wod table {
width: 250px;
height: 250px;
padding: 2px;
background: url(http://i.imgur.com/xBk4U1p.jpg) top left;
background-size: 250px 250px;
background-repeat: no-repeat;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
border-spacing: 0;
}
.sheet-rolltemplate-wod th {
color: rgb(112, 0, 0);
padding: 15px 2px 2px 20px;
line-height: 1.2em;
font-size: 1.2em;
text-align: left;
}
.sheet-rolltemplate-wod td {
padding-left: 20px;
font-size: 1.0em;
vertical-align: top;
}
.sheet-rolltemplate-wod .sheet-result {
font-size: 1.2em;
text-align: center;
color: rgb(112, 0, 0);
padding-bottom: 20px;
}
.sheet-rolltemplate-wod .inlinerollresult {
background-color: transparent;
color: #000000;
border: none;
}
.sheet-rolltemplate-wod .inlinerollresult.fullcrit {
color: #3FB315;
border: none;
}
.sheet-rolltemplate-wod .inlinerollresult.fullfail {
color: #000000;
border: none;
}
.sheet-rolltemplate-wod .inlinerollresult.importantroll {
color: #3FB315;
border: none;
}