CoalPoweredPuppet
16a7556816
removed the images in the amount of blood the creature is carrying, and replaced them with css boxes and circles.
715 lines
15 KiB
CSS
715 lines
15 KiB
CSS
/*-----background-----*/
|
|
|
|
.charsheet {
|
|
background-image: url("https://41.media.tumblr.com/e0e7bb455a9d2f0673dded20f09ad249/tumblr_o4hpt4LekV1s9slulo1_1280.jpg");
|
|
}
|
|
|
|
/*-----text-----*/
|
|
|
|
h5 {
|
|
text-shadow: 0px 0px 10px black;
|
|
color:black;
|
|
}
|
|
|
|
th {
|
|
text-shadow: 0px 0px 10px black;
|
|
color:black;
|
|
}
|
|
|
|
h4 {
|
|
text-shadow: 0px 0px 10px white, 0px 0px 10px white, 0px 0px 10px white;
|
|
color:black;
|
|
}
|
|
|
|
h3 {
|
|
text-shadow: 0px 0px 10px black, 0px 0px 10px black, 0px 0px 10px black ;
|
|
color:whitesmoke;
|
|
}
|
|
|
|
h2 {
|
|
background: black;
|
|
color:white;
|
|
}
|
|
|
|
{
|
|
text-shadow: 0px 0px 10px black, 0px 0px 10px black, 0px 0px 10px black ;
|
|
color:whitesmoke;
|
|
}
|
|
|
|
.sheet-center {
|
|
text-align: center
|
|
}
|
|
|
|
.sheet-left {
|
|
text-align: left
|
|
}
|
|
|
|
.sheet-right {
|
|
text-align: right
|
|
}
|
|
/*-----textarea-----*/
|
|
|
|
textarea {
|
|
height: 50px;
|
|
}
|
|
/*-----
|
|
input[type="text"] {
|
|
background:none;
|
|
border:none:
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
-----*/
|
|
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('https://40.media.tumblr.com/e0e7bb455a9d2f0673dded20f09ad249/tumblr_o4hpm8T07M1s9slulo1_540.jpg');
|
|
background-size:100%;
|
|
}
|
|
|
|
.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 red;
|
|
}
|
|
|
|
/*----------- End Tab Setup -----------*/
|
|
|
|
input.sheet-arrow {
|
|
float: left;
|
|
}
|
|
|
|
div.sheet-body {
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-arrow:checked ~ div.sheet-body {
|
|
display: block;
|
|
}
|
|
|
|
/*-----radio boxes-----*/
|
|
|
|
/* -----Hide actual 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;
|
|
}
|
|
|
|
/* -----Fake radio----- */
|
|
input.sheet-normal[type="radio"] + span::before
|
|
{
|
|
margin-right: 2px;
|
|
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);
|
|
|
|
color:black;
|
|
content: "•";
|
|
width: 12px;
|
|
height: 12px;
|
|
font-size: 3em;
|
|
|
|
-moz-border-radius: 50%;
|
|
-webkit-border-radius: 50%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* -----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;
|
|
}
|
|
|
|
/* -----Health boxes----- */
|
|
div.sheet-healthbox {
|
|
width: 20px;
|
|
height: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
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;
|
|
border-radius:5px;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.sheet-whitedot {
|
|
width: 14px;
|
|
height: 14px;
|
|
background: white;
|
|
border-radius:50%;
|
|
border: 3px solid black;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.sheet-bashingdot {
|
|
width: 14px;
|
|
height: 14px;
|
|
background: white;
|
|
border-radius:50%;
|
|
border: 3px solid black;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.sheet-bashingdot:before {
|
|
content: "/";
|
|
text-align:center;
|
|
padding-left:3px;
|
|
padding-bottom:3px;
|
|
color:black;
|
|
text-shadow:none;
|
|
font-weight:bold;
|
|
margin-left:1px;
|
|
font-size:1.6em;
|
|
}
|
|
.sheet-lethaldot {
|
|
width: 14px;
|
|
height: 14px;
|
|
background: white;
|
|
border-radius:50%;
|
|
border: 3px solid black;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.sheet-lethaldot:before {
|
|
content: "X";
|
|
padding-left:0px;
|
|
margin-bottom:5px;
|
|
color:black;
|
|
text-shadow:none;
|
|
font-weight:bold;
|
|
margin-left:1px;
|
|
font-size:1.4em;
|
|
}
|
|
|
|
.sheet-aggravateddot {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.sheet-aggravateddot:before {
|
|
font-family: "Pictos";
|
|
content: "D";
|
|
padding-left:0px;
|
|
margin-bottom:5px;
|
|
color:black;
|
|
text-shadow:none;
|
|
font-weight:bold;
|
|
margin-left:1px;
|
|
font-size:1.6em;
|
|
}
|
|
|
|
.sheet-grid {
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
}
|
|
|
|
/*-----vitae -----*/
|
|
|
|
div.sheet-vitae {
|
|
width: 20px;
|
|
height: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
input.sheet-vitae {
|
|
margin: 00px 0 0 00px;
|
|
opacity: 00;
|
|
width: 20px;
|
|
height: 20px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
span.sheet-vitae {
|
|
margin: 00px 0 0 00px;
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-blankvitae { z-index: 2; }
|
|
|
|
input.sheet-blankvitae:checked + input.sheet-redvitae,
|
|
input.sheet-redvitae:checked + input.sheet-emptyvitae { z-index: 3; }
|
|
|
|
input.sheet-blankvitae:checked ~ span.sheet-blankvitae,
|
|
input.sheet-redvitae:checked ~ span.sheet-redvitae,
|
|
input.sheet-emptyvitae:checked ~ span.sheet-emptyvitae { display: inline-block; }
|
|
|
|
.sheet-blankvitae {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: white;
|
|
border-radius:7px;
|
|
box-shadow: inset 0px 0px 3px red, 0px 0px 2px black;
|
|
}
|
|
|
|
.sheet-redvitae {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: pink;
|
|
border-radius:7px;
|
|
box-shadow: inset 0px 0px 3px red,inset 0px 0px 5px red, inset 0px 0px 10px red, 0px 0px 2px black;
|
|
}
|
|
|
|
.sheet-emptyvitae {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: white;
|
|
border-radius:7px;
|
|
box-shadow: inset 0px 0px 2px black, inset 0px 0px 5px black, inset 0px 0px 7px black
|
|
}
|
|
|
|
|
|
/*--------------Big Checkbox--------------*/
|
|
|
|
/* ----Hide actual sheet-arrow checkbox---- */
|
|
input.sheet-bigcheck[type="checkbox"]
|
|
{
|
|
opacity: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 6px;
|
|
margin: -10px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ----Fake sheet-arrow checkbox---- */
|
|
input.sheet-bigcheck[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);
|
|
}
|
|
|
|
input.sheet-bigcheck[type="checkbox"] + span::before
|
|
{
|
|
content: "";
|
|
width: 14px;
|
|
height: 14px;
|
|
font-size: 12px;
|
|
|
|
-moz-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
}
|
|
input.sheet-bigcheck[type="checkbox"]:checked + span::before
|
|
{
|
|
color: red;
|
|
content: "✓";
|
|
}
|
|
|
|
/*--------------Round checkbox--------------*/
|
|
|
|
/* ----Hide actual roundcheck checkbox---- */
|
|
input.sheet-roundcheck[type="checkbox"]
|
|
{
|
|
opacity: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 6px;
|
|
margin: -10px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ----Fake roundcheck checkbox---- */
|
|
input.sheet-roundcheck[type="checkbox"] + span::before
|
|
{
|
|
margin-right: 4px;
|
|
border: solid 1px #a8a8a8;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
border-radius: 20px 20px 20px 20px;
|
|
|
|
-moz-box-shadow: 0 0 20px #ccc;
|
|
-webkit-box-shadow: 0 0 20px #ccc;
|
|
box-shadow: 0 0 20px #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);
|
|
|
|
-moz-border-radius: 20px 20px 20px 20px;
|
|
-webkit-border-radius: 20px 20px 20px 20px;
|
|
border-radius: 20px 20px 20px 20px;
|
|
}
|
|
|
|
input.sheet-roundcheck[type="checkbox"] + span::before
|
|
{
|
|
content: "";
|
|
width: 14px;
|
|
height: 14px;
|
|
font-size: 12px;
|
|
|
|
-moz-border-radius: 20px;
|
|
-webkit-border-radius: 20px;
|
|
border-radius: 20px;
|
|
}
|
|
input.sheet-roundcheck[type="checkbox"]:checked + span::before
|
|
{
|
|
color: black;
|
|
font-size: 3em;
|
|
content: "•";
|
|
}
|
|
/*-------Tables--------*/
|
|
table.sheet-devotions {
|
|
border: 1px solid black;
|
|
background: #1C1C1C;
|
|
}
|
|
|
|
table.sheet-weapon, th.sheet-weapon, td.sheet-weapon {
|
|
border: 1px solid black;
|
|
background:white;
|
|
}
|
|
|
|
th.sheet-armor, td.sheet-armor {
|
|
border: 0px solid black;
|
|
background:none;
|
|
}
|
|
|
|
/*-----sheet-arrow-----*/
|
|
input.sheet-arrow {
|
|
float: left;
|
|
}
|
|
|
|
div.sheet-body {
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-arrow:checked ~ div.sheet-body {
|
|
display: block;
|
|
}
|
|
|
|
/* ----Hide actual sheet-arrow checkbox---- */
|
|
|
|
input.sheet-arrow[type="checkbox"]
|
|
{
|
|
opacity: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: relative;
|
|
top: 15px;
|
|
left: 15px;
|
|
margin: -10px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* -----Fake sheet-arrow checkbox----- */
|
|
|
|
input.sheet-arrow[type="checkbox"] + span::before
|
|
{
|
|
position: relative;
|
|
top: 15px;
|
|
left: 5px;
|
|
color:white;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
float: left;
|
|
width: 14px;
|
|
height: 14px;
|
|
content: "*";
|
|
font-size:3em;
|
|
}
|
|
input.sheet-arrow[type="checkbox"]:checked + span::before
|
|
{
|
|
color:red;
|
|
font-size:3em;
|
|
}
|
|
|
|
/*-------sheet select---------*/
|
|
|
|
.sheet-select {
|
|
margin-bottom: 0
|
|
}
|
|
/*-------Roll templates---------*/
|
|
|
|
.sheet-rolltemplate-wod 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-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;
|
|
}
|
|
|
|
|
|
/*-------Roll templates---------*/
|
|
|
|
.sheet-rolltemplate-wod_attack 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-wod_attack th {
|
|
color: rgb(112, 0, 0);
|
|
padding: 5px 2px 2px 20px;
|
|
line-height: 1.2em;
|
|
font-size: 1.2em;
|
|
text-align: left;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-wod_attack td {
|
|
padding-left: 20px;
|
|
font-size: 1.0em;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.sheet-rolltemplate-wod_attack .sheet-result {
|
|
font-size: 1.1em;
|
|
text-align: center;
|
|
color: rgb(112, 0, 0);
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-wod_attack .inlinerollresult {
|
|
background-color: transparent;
|
|
color: #000000;
|
|
border: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-wod_attack .inlinerollresult.fullcrit {
|
|
color: #3FB315;
|
|
border: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-wod_attack .inlinerollresult.fullfail {
|
|
color: #000000;
|
|
border: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-wod_attack .inlinerollresult.importantroll {
|
|
color: #3FB315;
|
|
border: none;
|
|
}
|