New character sheet for Blue Planet V2 published by Fantasy Flight Games. Optimized for Chrome.
452 lines
10 KiB
CSS
452 lines
10 KiB
CSS
|
|
/* Character sheet for Blue Planet V2 RPG (ENG)
|
|
RPG Publisher: Fantasy Flight Games
|
|
Sheet Author: Tomaxx
|
|
Sheet version: 1.2
|
|
*/
|
|
|
|
|
|
.charsheet { /* General sheet properties */
|
|
color: black;
|
|
font-family: "Verdana", sans-serif;
|
|
}
|
|
|
|
div.sheet-outline {
|
|
border: 2px solid #4F91CD;
|
|
border-radius: 20px;
|
|
width: 800px;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
padding-right: 5px;
|
|
padding-left: 5px;
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
img.sheet-logo {
|
|
display: block;
|
|
margin: auto;
|
|
width: 400px;
|
|
}
|
|
|
|
.charsheet h1 {
|
|
color: #4F91CD;
|
|
font-weight: bold;
|
|
font-size: 2em;
|
|
font-family: "Trebuchet MS", sans-serif;
|
|
font-variant: small-caps;
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet h2 {
|
|
color: black;
|
|
font-weight: bold;
|
|
font-size: 1.5em;
|
|
font-family: "Trebuchet MS", sans-serif;
|
|
font-variant: small-caps;
|
|
width: 352px;
|
|
border: 1px solid #a8a8a8;
|
|
border-radius: 30px;
|
|
padding: 0px 5px 0px 15px;
|
|
vertical-align: middle;
|
|
margin: 20px 0px 20px 0px;
|
|
|
|
background: #9bbfe4;
|
|
background: -moz-linear-gradient(to top, #9bbfe4, #c3d9ef, #9bbfe4);
|
|
background: -webkit-linear-gradient(to top, #9bbfe4, #c3d9ef, #9bbfe4);
|
|
background: -ms-linear-gradient(to top, #9bbfe4, #c3d9ef, #9bbfe4);
|
|
background: -o-linear-gradient(to top, #9bbfe4, #c3d9ef, #9bbfe4);
|
|
background: linear-gradient(to top, #9bbfe4, #c3d9ef, #9bbfe4);
|
|
}
|
|
|
|
.charsheet h3 {
|
|
color: black;
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
font-variant: small-caps;
|
|
margin: 20px 0px 20px 0px;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.sheet-equipment { /* Equipment page */
|
|
width: 700px;
|
|
margin: auto;
|
|
}
|
|
|
|
div.sheet-woundsect { /* Wounds section */
|
|
width: 600px;
|
|
margin: auto;
|
|
border: 0px solid red;
|
|
}
|
|
|
|
|
|
.charsheet input { /* all input fields, default input field width */
|
|
display: inline-block;
|
|
width: 230px;
|
|
font-weight: bold;
|
|
text-align:center;
|
|
background-color: white;
|
|
}
|
|
|
|
input.sheet-input4 { /* Equipment name */
|
|
display: inline-block;
|
|
width: 150px;
|
|
}
|
|
|
|
input.sheet-input5 { /* Equipment description */
|
|
display: inline-block;
|
|
width: 545px;
|
|
}
|
|
|
|
input.sheet-input6 { /* Attribute input columns color 1 & 2 */
|
|
background-color: #f2f2f2;
|
|
|
|
}
|
|
|
|
|
|
|
|
input.sheet-skilltag {
|
|
display: inline-block;
|
|
width: 100px;
|
|
}
|
|
|
|
input.sheet-totdam { /* Total damage display*/
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
|
|
select.sheet-attrib123 {
|
|
width: 80px;
|
|
vertical-align: middle;
|
|
font-weight: bold;
|
|
text-indent: 25px;
|
|
margin-bottom: 7px;
|
|
}
|
|
|
|
select.sheet-wounds {
|
|
width: 45px;
|
|
vertical-align: middle;
|
|
font-weight: bold;
|
|
text-indent: 5px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.charsheet option {
|
|
text-indent: 25px;
|
|
}
|
|
|
|
textarea.sheet-bgrtext {
|
|
width: 344px;
|
|
margin: 0px 10px 0px 10px;
|
|
resize: vertical;
|
|
}
|
|
|
|
button[type=roll].sheet-bigroll { /* Big roll button */
|
|
line-height: 100%;
|
|
font-size: 2em;
|
|
color: black;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* xxxxxxxxxxxxxxxxxxxxxx TABLES xxxxxxxxxxxxxxxxxxxxxxx */
|
|
|
|
table.sheet-table1 { /* tables on General info page */
|
|
border: 0px solid red;
|
|
width: 100%;
|
|
}
|
|
|
|
table.sheet-table2 { /* Tables on Attributes and skills page */
|
|
border: 0px solid red;
|
|
width: 100%;
|
|
}
|
|
|
|
td.sheet-td1 { /* tables on General info page, left side */
|
|
border: 0px solid red;
|
|
width: 50%;
|
|
padding: 5px 5px 5px 10px;
|
|
font-weight: bold;
|
|
/* background-color: yellow; */
|
|
}
|
|
|
|
td.sheet-td2 { /* tables on General info page, right side */
|
|
border: 0px solid red;
|
|
width: 50%;
|
|
padding: 5px;
|
|
text-align: left;
|
|
/* background-color: #ffb3d9; */
|
|
}
|
|
|
|
td.sheet-td3 { /* Skill in skill table, left side */
|
|
border: 0px solid green;
|
|
padding: 5px 5px 5px 45px;
|
|
font-weight: bold;
|
|
/* background-color: yellow; */
|
|
}
|
|
|
|
td.sheet-td4 { /* skill in skill table, right side */
|
|
border: 0px solid green;
|
|
padding: 5px 45px 5px 5px;
|
|
text-align: right;
|
|
/* background-color: #ffb3d9; */
|
|
}
|
|
td.sheet-td5 { /* Aptitude in skill table, left side */
|
|
border: 0px solid black;
|
|
border-radius: 30px 0px 0px 30px;
|
|
font-size: 1.2em;
|
|
padding: 5px 5px 5px 30px;
|
|
font-weight: bold;
|
|
text-shadow: 0px 0px 12px white;
|
|
|
|
/* background-color: #d9d9d9; */
|
|
|
|
background: #d9d9d9;
|
|
background: -moz-linear-gradient(to top, #bfbfbf, #d9d9d9, #bfbfbf);
|
|
background: -webkit-linear-gradient(to top, #bfbfbf, #d9d9d9, #bfbfbf);
|
|
background: -ms-linear-gradient(to top, #bfbfbf, #d9d9d9, #bfbfbf);
|
|
background: -o-linear-gradient(to top, #bfbfbf, #d9d9d9, #bfbfbf);
|
|
background: linear-gradient(to top, #bfbfbf, #d9d9d9, #bfbfbf);
|
|
}
|
|
|
|
td.sheet-td6 { /* Aptitude in skill table, right side */
|
|
border: 0px solid black;
|
|
border-radius: 0px 30px 30px 0px;
|
|
padding: 10px 45px 5px 5px;
|
|
text-align: right;
|
|
|
|
/* background-color: #d9d9d9; */
|
|
|
|
background: #d9d9d9;
|
|
background: -moz-linear-gradient(to top, #bfbfbf, #d9d9d9, #bfbfbf);
|
|
background: -webkit-linear-gradient(to top, #bfbfbf, #d9d9d9, #bfbfbf);
|
|
background: -ms-linear-gradient(to top, #bfbfbf, #d9d9d9, #bfbfbf);
|
|
background: -o-linear-gradient(to top, #bfbfbf, #d9d9d9, #bfbfbf);
|
|
background: linear-gradient(to top, #bfbfbf, #d9d9d9, #bfbfbf);
|
|
}
|
|
|
|
td.sheet-td7 { /* Attribute column label, right side */
|
|
border: 0px solid green;
|
|
padding: 0px 87px 0px 0px;
|
|
text-align: right;
|
|
}
|
|
|
|
|
|
table.sheet-woundtable { /* Wounds table */
|
|
border: 0px solid red;
|
|
width: 100%;
|
|
padding: 0px 5px 0px 5px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
td.sheet-woundleft { /* Wounds table, left side */
|
|
border: 0px solid black;
|
|
padding: 5px;
|
|
text-align: left;
|
|
/* background-color: yellow; */
|
|
}
|
|
|
|
td.sheet-woundright { /* Wounds table, right side */
|
|
border: 0px solid black;
|
|
padding: 5px;
|
|
text-align: right;
|
|
/* background-color: #b3ffb3; */
|
|
}
|
|
|
|
td.sheet-rollresult { /* Wounds table, roll result text */
|
|
border: 0px solid black;
|
|
color: gray;
|
|
padding: 5px 5px 5px 15px;
|
|
text-align: left;
|
|
font-weight: normal;
|
|
/* background-color: #ff99cc; */
|
|
}
|
|
|
|
|
|
|
|
/* xxxxxxxxxxxxxxxxxxx TAB CSS INFO xxxxxxxxxxxxxxxxxxxxxxx */
|
|
|
|
div.sheet-tab-content { display: none; }
|
|
|
|
input.sheet-tab1:checked ~ div.sheet-tab1,
|
|
input.sheet-tab2:checked ~ div.sheet-tab2,
|
|
input.sheet-tab3:checked ~ div.sheet-tab3,
|
|
input.sheet-tab4:checked ~ div.sheet-tab4
|
|
{
|
|
display: block;
|
|
}
|
|
|
|
input.sheet-tableft
|
|
{
|
|
width: 190px;
|
|
height: 30px;
|
|
position: relative;
|
|
top: 0px;
|
|
left: 2px;
|
|
margin-left: 5px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
}
|
|
input.sheet-tabcenter
|
|
{
|
|
width: 190px;
|
|
height: 30px;
|
|
position: relative;
|
|
top: 0px;
|
|
left: 2px;
|
|
margin-left: -3px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
}
|
|
input.sheet-tabright
|
|
{
|
|
width: 190px;
|
|
height: 30px;
|
|
position: relative;
|
|
top: 0px;
|
|
left: 2px;
|
|
margin-left: -3px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
input.sheet-tableft + span::before
|
|
{
|
|
content: attr(title);
|
|
|
|
display: inline-block;
|
|
|
|
background: #c3d9ef;
|
|
background: -moz-linear-gradient(to top, #9bbfe4, #c3d9ef, #9bbfe4);
|
|
background: -webkit-linear-gradient(to top, #9bbfe4, #c3d9ef, #9bbfe4);
|
|
background: -ms-linear-gradient(to top, #9bbfe4, #c3d9ef, #9bbfe4);
|
|
background: -o-linear-gradient(to top, #9bbfe4, #c3d9ef, #9bbfe4);
|
|
background: linear-gradient(to top, #9bbfe4, #c3d9ef, #9bbfe4);
|
|
|
|
width: 190px;
|
|
height: 30px;
|
|
border-radius: 30px 0px 0px 30px;
|
|
border: 1px solid #a8a8a8;
|
|
padding: 8px 0px 0px 0px;
|
|
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
color: black;
|
|
font-variant: small-caps;
|
|
font-family: "Trebuchet MS", sans-serif;
|
|
|
|
position: relative;
|
|
margin-left: -192px;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
input.sheet-tableft:checked + span::before
|
|
{
|
|
background: #9bbfe4;
|
|
color: white;
|
|
text-shadow: 0px 0px 10px #000000;
|
|
}
|
|
|
|
input.sheet-tabcenter + span::before
|
|
{
|
|
content: attr(title);
|
|
|
|
display: inline-block;
|
|
text-align: center;
|
|
|
|
background: #c3d9ef;
|
|
background: -moz-linear-gradient(to top, #9bbfe4, #c3d9ef, #9bbfe4);
|
|
background: -webkit-linear-gradient(to top, #9bbfe4, #c3d9ef, #9bbfe4);
|
|
background: -ms-linear-gradient(to top, #9bbfe4, #c3d9ef, #9bbfe4);
|
|
background: -o-linear-gradient(to top, #9bbfe4, #c3d9ef, #9bbfe4);
|
|
background: linear-gradient(to top, #9bbfe4, #c3d9ef, #9bbfe4);
|
|
|
|
width: 190px;
|
|
height: 30px;
|
|
border: 1px solid #a8a8a8;
|
|
padding: 8px 0px 0px 0px;
|
|
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
color: black;
|
|
font-variant: small-caps;
|
|
font-family: "Trebuchet MS", sans-serif;
|
|
|
|
position: relative;
|
|
margin-left: -192px;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
input.sheet-tabcenter:checked + span::before
|
|
{
|
|
background: #9bbfe4;
|
|
color: white;
|
|
text-shadow: 0px 0px 10px #000000;
|
|
}
|
|
|
|
input.sheet-tabright + span::before
|
|
{
|
|
content: attr(title);
|
|
|
|
display: inline-block;
|
|
text-align: center;
|
|
|
|
background: #c3d9ef;
|
|
background: -moz-linear-gradient(to top, #9bbfe4, #c3d9ef, #9bbfe4);
|
|
background: -webkit-linear-gradient(to top, #9bbfe4, #c3d9ef, #9bbfe4);
|
|
background: -ms-linear-gradient(to top, #9bbfe4, #c3d9ef, #9bbfe4);
|
|
background: -o-linear-gradient(to top, #9bbfe4, #c3d9ef, #9bbfe4);
|
|
background: linear-gradient(to top, #9bbfe4, #c3d9ef, #9bbfe4);
|
|
|
|
width: 190px;
|
|
height: 30px;
|
|
border-radius: 0px 30px 30px 0px;
|
|
border: 1px solid #a8a8a8;
|
|
padding: 8px 0px 0px 0px;
|
|
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
color: black;
|
|
font-variant: small-caps;
|
|
font-family: "Trebuchet MS", sans-serif;
|
|
|
|
position: relative;
|
|
margin-left: -192px;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
|
|
input.sheet-tabright:checked + span::before
|
|
{
|
|
background: #9bbfe4;
|
|
color: white;
|
|
text-shadow: 0px 0px 10px #000000;
|
|
}
|
|
|
|
|
|
|
|
div.sheet-tab-content
|
|
{
|
|
border: 0px solid #a8a8a8;
|
|
border-top-color: #000;
|
|
margin: 10px 0px 10px 0px;
|
|
padding: 10px 5px 5px 7px;
|
|
}
|
|
|
|
|
|
|