Files
roll20-character-sheets-tester/7th Sea 2e/7th Sea 2e.css
T

889 lines
20 KiB
CSS

/*----------- Repeating Blocks -------------*/
.charsheet .repcontrol_add {
display: block;
background:black;
color:white;
font-family: Copperplate, 'Copperplate Gothic Light', fantasy;
text-shadow:0px 0px 2px black,0px 0px 2px black,0px 0px 2px black;
box-shadow:none;
float:left!important;
margin-bottom:0px;
font-size:0.9em;
height:2.2em;
}
.charsheet .repcontrol_edit {
display: inline-block;
background:black;
color:white;
font-family: Copperplate, 'Copperplate Gothic Light', fantasy;
text-shadow:0px 0px 2px black,0px 0px 2px black,0px 0px 2px black;
box-shadow:none;
float:none!important;
margin-bottom:5px;
font-size:0.9em;
height:2.2em;
}
.charsheet .repcontrol_del {
background:red;
color:white;
font-family: Copperplate, 'Copperplate Gothic Light', fantasy;
text-shadow:0px 0px 2px black,0px 0px 2px black,0px 0px 2px black;
box-shadow:none;
float:none!important;
margin-bottom:5px;
font-size:0.9em;
height:2.2em;
}
.charsheet .repcontrol_move {
display: inline-block;
background:#2a3563;
color:white;
font-family: Copperplate, 'Copperplate Gothic Light', fantasy;
text-shadow:0px 0px 2px black,0px 0px 2px black,0px 0px 2px black;
box-shadow:none;
float:none!important;
margin-bottom:5px;
font-size:0.9em;
height:1.4em;
padding-top:2px;
padding-bottom:2px;
}
/*-----background-----*/
.charsheet {
background: black;
background-size:100%;
}
/*----------- Tabs Setup -------------*/
.charsheet {
width:840px;
}
div.sheet-core-content {
display: none;
width:840px;
}
.charsheet div[class^="sheet-section"] {
display: none;
background-size:840px;
background:white;
border-radius:15px;
box-shadow: inset 0px 0px 15px #2a3563;
padding:10px;
}
.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 {
display: block;
}
.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] {
display: block;
}
.charsheet input.sheet-tab {
width: 100px;
height: 20px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 998;
box-shadow: 0px 0px 5px blue;
}
.charsheet span.sheet-tab {
text-align: center;
display: inline-block;
font-size: 13px;
background:white;
color: #2a3563;
font-weight: bold;
font-family: Copperplate, 'Copperplate Gothic Light', fantasy;
border-radius: 4px;
border: 2px solid #2a3563;
width: 100px;
height: 20px;
cursor: pointer;
position: relative;
vertical-align: middle;
margin-left: -105px;
}
.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-tab99:checked + span.sheet-tab99 {
background: #2a3563; /*originally ab8b57*/
color: white; /*originally white*/
border-radius: 4px;
border: 2px solid #2a3563;
}
/*----------- End Tab Setup -----------*/
/*----------- Topbar -----------*/
.sheet-topbar {
background-size:840px;
background:white;
border-radius:15px;
box-shadow: inset 0px 0px 15px #2a3563;
padding:10px;
}
/*----------- End Topbar -----------*/
/*==========hero number button==========*/
div.sheet-hero {
width: 80px;
height: 80px;
position: relative;
}
input.sheet-hero {
position: absolute;
margin: 5px 0 0 0px;
opacity: 0;
width: 80px;
height: 80px;
z-index: 1;
}
span.sheet-hero {
margin: -5px 0px 0px -10px;
display: none;
}
input.sheet-zerohero { z-index: 2; }
input.sheet-zerohero:checked + input.sheet-onehero,
input.sheet-onehero:checked + input.sheet-twohero,
input.sheet-twohero:checked + input.sheet-threehero,
input.sheet-threehero:checked + input.sheet-fourhero,
input.sheet-fourhero:checked + input.sheet-fivehero,
input.sheet-fivehero:checked + input.sheet-sixhero,
input.sheet-sixhero:checked + input.sheet-sevenhero,
input.sheet-sevenhero:checked + input.sheet-eighthero,
input.sheet-eighthero:checked + input.sheet-ninehero { z-index: 3; }
input.sheet-zerohero:checked ~ span.sheet-zerohero,
input.sheet-onehero:checked ~ span.sheet-onehero,
input.sheet-twohero:checked ~ span.sheet-twohero,
input.sheet-threehero:checked ~ span.sheet-threehero,
input.sheet-fourhero:checked ~ span.sheet-fourhero,
input.sheet-fivehero:checked ~ span.sheet-fivehero,
input.sheet-sixhero:checked ~ span.sheet-sixhero,
input.sheet-sevenhero:checked ~ span.sheet-sevenhero,
input.sheet-eighthero:checked ~ span.sheet-eighthero,
input.sheet-ninehero:checked ~ span.sheet-ninehero { display: inline-block; }
.sheet-zerohero
{
width: 100px;
height: 100px;
background: url("https://i.imgur.com/qBLTXIf.png") no-repeat 0 0;
background-size: 100%;
}
.sheet-onehero
{
width: 100px;
height: 100px;
background: url("https://i.imgur.com/lb0yCZm.png") no-repeat 0 0;
background-size: 100%;
}
.sheet-twohero
{
width: 100px;
height: 100px;
background: url("https://i.imgur.com/FH511Yk.png") no-repeat 0 0;
background-size: 100%;
}
.sheet-threehero
{
width: 100px;
height: 100px;
background: url("https://i.imgur.com/U15PXDh.png") no-repeat 0 0;
background-size: 100%;
}
.sheet-fourhero
{
width: 100px;
height: 100px;
background: url("https://i.imgur.com/KYEB5Ak.png") no-repeat 0 0;
background-size: 100%;
}
.sheet-fivehero
{
width: 100px;
height: 100px;
background: url("https://i.imgur.com/ssfcfF9.png") no-repeat 0 0;
background-size: 100%;
}
.sheet-sixhero
{
width: 100px;
height: 100px;
background: url("https://i.imgur.com/FxY3KsF.png") no-repeat 0 0;
background-size: 100%;
}
.sheet-sevenhero
{
width: 100px;
height: 100px;
background: url("https://i.imgur.com/LTP7xz4.png") no-repeat 0 0;
background-size: 100%;
}
.sheet-eighthero
{
width: 100px;
height: 100px;
background: url("https://i.imgur.com/QaJPLY3.png") no-repeat 0 0;
background-size: 100%;
}
.sheet-ninehero
{
width: 100px;
height: 100px;
background: url("https://i.imgur.com/vWcdA6b.png") no-repeat 0 0;
background-size: 100%;
}
/* ==== heroup & Down ==== */
/* ----Hide actual sheet-heroup checkbox---- */
input.sheet-heroup[type="checkbox"] {
opacity: 0;
margin-right: 10px;
width: 30px;
height: 30px;
position: relative;
top: 0px;
left: 25px;
margin: -10px;
cursor: pointer;
z-index: 1;
}
/* -----Fake sheet-heroup checkbox----- */
input.sheet-heroup[type="checkbox"] + span::before
{
position:relative;
top:0px;
left:1px;
margin-right: 10px;
margin-left: 5px;
line-height: 30px;
width: 30px;
height: 30px;
text-align: center;
display: inline-block;
vertical-align: middle;
background:transparent;
color: black;
text-shadow:0px 0px 5px white;
font-family:"Pictos";
content: "4";
font-size:30px;
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
transform: rotate(-90deg);
}
input.sheet-heroup[type="checkbox"]:hover + span::before {
color: red;
text-shadow:0px 0px 5px black;
}
/* ----Hide actual sheet-herodown checkbox---- */
input.sheet-herodown[type="checkbox"] {
opacity: 0;
margin-right: 10px;
width: 30px;
height: 30px;
position: relative;
top: 0px;
left: 25px;
margin: -10px;
cursor: pointer;
z-index: 1;
}
/* -----Fake sheet-herodown checkbox----- */
input.sheet-herodown[type="checkbox"] + span::before
{
position:relative;
top:0px;
left:0px;
margin-right: 10px;
margin-left: 5px;
line-height: 30px;
width: 30px;
height: 30px;
text-align: center;
display: inline-block;
vertical-align: middle;
background:transparent;
color: black;
text-shadow:0px 0px 5px white;
font-family:"Pictos";
content: "4";
font-size:30px;
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
}
input.sheet-herodown[type="checkbox"]:hover + span::before {
color: red;
text-shadow:0px 0px 5px black;
}
/* End of Feats */
.sheet-heading_1 {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #2a3563;
background: transparent;
box-shadow:none;
font-size:1.4em;
line-height:1.5em;
font-family: Copperplate, 'Copperplate Gothic Light', fantasy;
font-variant: small-caps;
}
.sheet-text_1 {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #2a3563;
background: transparent;
box-shadow:none;
font-family: Copperplate, 'Copperplate Gothic Light', fantasy;
}
.sheet-text_2 {
width: 375px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #2a3563;
background: transparent;
box-shadow:none;
font-family: Copperplate, 'Copperplate Gothic Light', fantasy;
}
.sheet-text_3 {
width: 50px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #2a3563;
background: transparent;
box-shadow:none;
font-family: Copperplate, 'Copperplate Gothic Light', fantasy;
}
.sheet-number_1 {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #2a3563;
background: transparent;
box-shadow:none;
font-family: Copperplate, 'Copperplate Gothic Light', fantasy;
}
th.sheet-small {
font-size:0.8em;
font-weight: bold;
}
.sheet-textarea_1 {
height:30px;
resize:vertical;
}
/* Select */
select.sheet-select_1 {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #2a3563;
background: transparent;
box-shadow:none;
font-size:1em;
line-height:1em;
font-family: Copperplate, 'Copperplate Gothic Light', fantasy;
font-variant: small-caps;
width:120px;
}
input.sheet-hider:checked ~ div.sheet-hold {
display: none;
}
.sheet-hidden {
display: none;
}
h4 {
color: white;
font-size: 1.5em;
text-shadow: 0px 0px 2px #2a3563, 0px 0px 2px #2a3563, 0px 0px 2px #2a3563, 0px 0px 12px #2a3563,0px 0px 12px #2a3563,0px 0px 12px #2a3563;
}
/*----- sheet-checkbox_1 -----*/
/*========== checkbox_1 ==========*/
/* ----Hide actual checkbox_1---- */
input.sheet-checkbox_1[type="checkbox"],
input.sheet-checkbox_2[type="checkbox"],
input.sheet-checkbox_3[type="checkbox"] {
opacity: 0;
width: 16px;
height: 16px;
position: relative;
top: 0px;
left: 10px;
margin: -10px;
cursor: pointer;
z-index: 1;
}
/* ----Fake Big Checkbox ---- */
input.sheet-checkbox_1[type="checkbox"] + span::before,
input.sheet-checkbox_2[type="checkbox"] + span::before {
margin-right: 4px;
line-height: 14px;
text-align: center;
display: inline-block;
vertical-align: middle;
position: relative;
top: 0px;
left: 4px;
border-radius: 15px;
border: 1px solid black;
background:white;
}
input.sheet-checkbox_3[type="checkbox"] + span::before {
margin-right: 4px;
line-height: 14px;
text-align: center;
display: inline-block;
vertical-align: middle;
position: relative;
top: 0px;
left: 4px;
border-radius: 0px;
border: none;
background:transparent;
}
input.sheet-checkbox_1[type="checkbox"] + span::before,
input.sheet-checkbox_2[type="checkbox"] + span::before {
content: "";
width: 14px;
height: 14px;
font-size: 12px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 15px;
}
input.sheet-checkbox_3[type="checkbox"] + span::before {
font-family:"Pictos";
color:green;
content: ")";
width: 14px;
height: 14px;
font-size: 14px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 15px;
}
input.sheet-checkbox_1[type="checkbox"]:checked + span::before {
color: green;
font-family:"Pictos";
content: "+";
text-shadow:none;
font-weight:bold;
}
input.sheet-checkbox_2[type="checkbox"]:checked + span::before {
color: #2a3563;
font-family:"Pictos";
content: "S";
text-shadow:none;
font-weight:bold;
}
input.sheet-checkbox_3[type="checkbox"]:checked + span::before {
color: black;
font-family:"Pictos";
content: "(";
text-shadow:none;
font-weight:bold;
}
/*----- End of checkbox_1 -----*/
/*------ wound check boxes-----*/
input.sheet-wound[type="checkbox"] {
opacity: 0;
width: 24px;
height: 24px;
position: relative;
top: 0px;
left: 0px;
margin: -20px;
cursor: pointer;
z-index: 1;
}
/* ----Fake Big Checkbox ---- */
input.sheet-wound[type="checkbox"] + span::before {
margin-right: 4px;
line-height: 24px;
width: 24px;
height: 24px;
text-align: center;
display: inline-block;
vertical-align: middle;
position: relative;
top: 0px;
left: -5px;
border-radius: 15px;
border: 1px solid black;
color: blue;
font-family:"Pictos";
content: "";
font-size:24px;
}
input.sheet-wound[type="checkbox"]:checked + span::before {
color: black;
content: "";
text-shadow:none;
font-weight:bold;
background:black;
box-shadow:0px 0px 15px red;
}
input.sheet-wound.sheet-drama[type="checkbox"] + span::before {
position: relative;
top: 0px;
left: -10px;
border:none;
font-family:"Pictos Custom";
content: "t";
font-size:44px;
color:red;
}
input.sheet-wound.sheet-drama[type="checkbox"]:checked + span::before {
color: black;
text-shadow:0px 0px 15px red;
box-shadow:none;
font-weight:bold;
background:transparent;
}
/*-----end of sheet-wound check boxes-----*/
/*-----sheet-normal radio boxes-----*/
/* -----Hide actual radio----- */
input.sheet-normal[type="radio"]
{
opacity: 0;
width: 12px;
height: 12px;
position: relative;
top: 5px;
left: 6px;
margin: -10px;
cursor: pointer;
z-index: 1;
}
/* -----Fake radio----- */
input.sheet-normal[type="radio"] + span::before
{
margin-right: 4px;
border: solid 1px #a8a8a8;
line-height: 12px;
text-align: center;
display: inline-block;
vertical-align: middle;
border: 1px solid black;
-moz-box-shadow: 0 0 2px #ccc;
-webkit-box-shadow: 0 0 2px #ccc;
box-shadow: 0 0 2px #ccc;
background: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: "";
background: white;
}
/*------------empty traits-----------*/
input.sheet-zip[type="radio"]:checked + span::before
{
opacity: 0;
}
input.sheet-zip[type="radio"]:hover + span::before
{
opacity: 1;
}
input.sheet-zip[type="radio"] + span::before
{
color:black;
font-size: 1em;
content: "✖";
opacity: 0.25;
background:white;
}
/*============Button===========*/
/*------------Button-----------*/
/*============Button===========*/
button[type="roll"].sheet-button_dice:before,
button[type="roll"].sheet-button_show:before,
button[type="roll"].sheet-skill_button:before,
button[type="roll"].sheet-trait_button:before {
content: ""!important;
display: none;
}
button[type="roll"].sheet-trait_button {
width: 100px;
height:24px;
vertical-align: middle;
display: inline-block;
margin: 0;
font-weight: 700;
text-align: left;
vertical-align: middle;
cursor: pointer;
background-image: none;
border-radius:5px;
background-color: #2a3563;
border: 2px outset gray;
border-style: outset;
padding: 2px;
padding-left:6px;
font-size: 1em;
color: white;
text-shadow: 0px 0px 0.2em black;
}
button[type="roll"].sheet-trait_button:hover {
border: 2px inset gray;
padding-left:6px;
color:white;
background:black;
}
button[type="roll"].sheet-trait_button:active {
border: 2px solid #2a3563;
color:black;
background:white;
text-shadow: none;
}
/*============Skill===========*/
button[type="roll"].sheet-skill_button {
width: 100px;
height:24px;
vertical-align: middle;
display: inline-block;
margin: 0;
font-weight: 700;
text-align: left;
vertical-align: middle;
cursor: pointer;
background-image: none;
border-radius:5px;
background-color: #2a3563;
border: 2px outset gray;
border-style: outset;
padding: 2px;
padding-left:6px;
font-size: 1em;
color: white;
text-shadow: 0px 0px 0.2em #2a3563;
}
button[type="roll"].sheet-skill_button:hover {
border: 2px inset gray;
padding-left:6px;
color:white;
background:#000;
}
button[type="roll"].sheet-skill_button:active {
border: 2px solid #2a3563;
color:black;
background:white;
text-shadow: none;
}
/*============show===========*/
button[type="roll"].sheet-button_show {
width: 60px;
height:24px;
vertical-align: middle;
display: inline-block;
margin: 0;
font-weight: 700;
text-align: left;
vertical-align: middle;
cursor: pointer;
background-image: none;
border-radius:5px;
background-color: #2a3563;
border: 2px outset gray;
border-style: outset;
padding: 2px;
padding-left:6px;
font-size: 1em;
color: white;
text-shadow: 0px 0px 0.2em #2a3563;
}
button[type="roll"].sheet-button_show:hover {
border: 2px inset gray;
padding-left:6px;
color:white;
background:#000;
}
button[type="roll"].sheet-button_show:active {
border: 2px solid #2a3563;
color:black;
background:white;
text-shadow: none;
}
button[type="roll"].sheet-button_dice:before {
content: ""!important;
display: none;
}
button[type="roll"].sheet-button_dice {
text-align: center;
display: inline-block;
font-size: 13px;
background:white;
color:#2a3563;
font-weight: bold;
font-family: Copperplate, 'Copperplate Gothic Light', fantasy;
border-radius: 4px;
border: 1px solid #2a3563;
width: 100px;
height: 20px;
cursor: pointer;
position: relative;
vertical-align: middle;
}
button[type="roll"].sheet-button_dice:hover {
padding-left:4px;
color:white;
background:#2a3563;
}
button[type="roll"].sheet-button_dice:active {
padding-left:4px;
color:white;
background:#2a3563;
}
/*============roll templates===========*/
/*============skill===========*/
.sheet-rolltemplate-show table {
width: 100%;
border: none;
border-radius:5px;
background: url ('http://fc06.deviantart.net/fs40/i/2009/004/8/4/dirty_parchment_by_swimmingintheether.jpg');
box-shadow: 1px 1px 1px 1px #2a3563;
}
.sheet-rolltemplate-show th {
padding: 5px;
border: none;
color: #2a3563;
font-size: 1em;
letter-spacing: 1px;
border-bottom: 1px solid #2a3563;
}
.sheet-rolltemplate-show td {
padding: 5px;
border: none;
color: black;
font-size: 1em;
text-align: center;
letter-spacing: 1px;
}
/*Hiding Sections*/
.charsheet .sheet-togglepanel {
width: 95%;
vertical-align:top;
border: 1px
solid black;
background-color:#F0F0F0;
padding-top: 6px;
padding-bottom: 2px;
padding-left: 6px;
padding-right: 6px;
}
input.sheet-arrow {
margin-top: 3px;
float: left;
}
div.sheet-togglepanel {
display: none;
}
input.sheet-arrow:checked ~ div.sheet-togglepanel {
display: block;
}
.sheet-newtoggel {
border-left: 4px solid;
color:#787878;
padding: 8px 8px 8px 8px;
background: #F0F0F0;
width: 95%;
vertical-align: top;
}
.sheet-details-togglepanel {
text-align: justify;
text-justify: inter-word;
display: none;
}
input.sheet-arrow:checked ~ .sheet-details-togglepanel { display: block; }
/*end Hiding Sections*/