Files
roll20-character-sheets-tester/Blue Planet V2/Blue Planet V2 character sheet.css
T
Tomaxx 0907070a92 New character sheet for Blue Planet V2
New character sheet for Blue Planet V2 published by Fantasy Flight
Games. Optimized for Chrome.
2016-12-04 17:21:00 +01:00

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;
}