mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
815 lines
18 KiB
CSS
815 lines
18 KiB
CSS
|
|
.charsheet {
|
|
min-width:820px;
|
|
min-height:800px;
|
|
}
|
|
|
|
* {box-sizing: border-box;}
|
|
|
|
.sheet-grid-wrapper-autocalc
|
|
{
|
|
display:grid;
|
|
grid-template-columns:1fr 1fr 1fr;
|
|
grid-column-gap:25px;
|
|
}
|
|
|
|
.sheet-grid-wrapper-outer{
|
|
display:grid;
|
|
grid-template-columns:1fr;
|
|
grid-auto-rows:90px;
|
|
}
|
|
|
|
.sheet-grid-wrapper-top {
|
|
display: grid;
|
|
grid-template-columns: 220px 1fr;
|
|
grid-column-gap:10px;
|
|
}
|
|
|
|
.sheet-grid-wrapper-inner {
|
|
display: grid;
|
|
grid-template-columns: 180px 180px 200px;
|
|
grid-auto-rows: 40px;
|
|
grid-column-gap:10px;
|
|
width:600px;
|
|
height:80px;
|
|
}
|
|
|
|
.sheet-grid-wrapper-inner-frame {
|
|
display: grid;
|
|
grid-template-columns: 180px 180px 200px;
|
|
grid-auto-rows: 40px;
|
|
grid-column-gap:10px;
|
|
width:600px;
|
|
height:80px;
|
|
}
|
|
|
|
.sheet-grid-wrapper-main {
|
|
display:grid;
|
|
grid-column-gap:10px;
|
|
grid-row-gap:10px;
|
|
width:800px;
|
|
grid-template-columns: 210px 400px 200px;
|
|
}
|
|
|
|
.sheet-grid-wrapper-frame
|
|
{
|
|
display:grid;
|
|
grid-column-gap:10px;
|
|
grid-row-gap:10px;
|
|
width:800px;
|
|
grid-template-columns: 1fr 0.5fr;
|
|
}
|
|
|
|
.sheet-grid-wrapper-autocalcs
|
|
{
|
|
display:grid;
|
|
grid-auto-rows:35px;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
}
|
|
|
|
|
|
.sheet-grid-wrapper-pilotweps
|
|
{
|
|
display:grid;
|
|
grid-auto-rows:32px;
|
|
grid-template-columns: 160px 120px 120px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
|
|
.sheet-grid-wrapper-skills
|
|
{
|
|
display:grid;
|
|
grid-template-columns:1fr 1fr;
|
|
grid-template-rows: repeat(6, 30px 52px);
|
|
justify-items:center;
|
|
}
|
|
|
|
.sheet-grid-wrapper-systems
|
|
{
|
|
padding:0px;
|
|
margin-top:10px;
|
|
display:grid;
|
|
grid-template-columns: 200px 95px;
|
|
grid-auto-rows:40px;
|
|
|
|
}
|
|
|
|
.sheet-grid-wrapper-talents
|
|
{
|
|
display:grid;
|
|
grid-auto-rows:40px;
|
|
grid-template-columns: 1.6fr 1fr;
|
|
}
|
|
|
|
|
|
.sheet-flex-wrapper-main {
|
|
display:flex;
|
|
align-items:flex-start;
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
.repcontainer[data-groupname="repeating_talents"] > .repitem {
|
|
display: inline-block;
|
|
}
|
|
|
|
.repcontainer[data-groupname="repeating_weapons"] > .repitem {
|
|
display: inline-block;
|
|
}
|
|
|
|
|
|
|
|
.repcontrol_del
|
|
{
|
|
position:relative;
|
|
z-index:9999;
|
|
}
|
|
|
|
.repcontrol_move
|
|
{
|
|
position:relative;
|
|
z-index:9999;
|
|
}
|
|
|
|
|
|
.sheet-grid-flex-item{
|
|
display:flex;
|
|
flex-direction:column;
|
|
padding:5px;
|
|
width:360px;
|
|
border: 2px solid #000000;
|
|
border-radius: 10px;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.sheet-grid-flex-noborder-item
|
|
{
|
|
display:flex;
|
|
flex-direction:column;
|
|
width:130px;
|
|
height:35px;
|
|
}
|
|
|
|
.sheet-grid-frame-flex-item
|
|
{
|
|
display:flex;
|
|
flex-direction:row;
|
|
width:400px;
|
|
}
|
|
|
|
.sheet-grid-frame-flex-item-reverse
|
|
{
|
|
position:relative;
|
|
margin-bottom:5px;
|
|
margin-left:65px;
|
|
display:flex;
|
|
flex-direction:row-reverse;
|
|
width:400px;
|
|
}
|
|
|
|
.sheet-grid-item{
|
|
padding:4px;
|
|
border: 2px solid #000000;
|
|
border-radius: 10px;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.sheet-grid-inner-item
|
|
{
|
|
padding:5px;
|
|
}
|
|
|
|
.sheet-talent-rank-container
|
|
{
|
|
height:100px;
|
|
width:100%;
|
|
}
|
|
|
|
.sheet-core-stat-container
|
|
{
|
|
display:grid;
|
|
align-items:center;
|
|
width:100%;
|
|
grid-auto-rows:65px;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.sheet-license-radio-container
|
|
{
|
|
width:35%;
|
|
display:inline-flex;
|
|
cursor:pointer;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
.sheet-license-radio-button
|
|
{
|
|
display:inline;
|
|
background-color: #eee;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
|
|
button[type=roll].sheet-skill-roll::before{
|
|
content: '';
|
|
}
|
|
button[type=roll].sheet-pilot-wep-roll::before{
|
|
content: '';
|
|
}
|
|
button[type=roll].sheet-HASE-roll::before{
|
|
content: '';
|
|
}
|
|
|
|
button.sheet-skill-roll{
|
|
box-shadow:none;
|
|
position:relative;
|
|
top:5px;
|
|
border:none;
|
|
text-align:center;
|
|
background:none;
|
|
height:15px;
|
|
}
|
|
|
|
button.sheet-HASE-roll{
|
|
border:none;
|
|
position:relative;
|
|
display:inline-block;
|
|
box-shadow:none;
|
|
text-align:left;
|
|
background:none;
|
|
font-weight:bold;
|
|
font-size:17px;
|
|
}
|
|
|
|
button.sheet-HASE-roll:disabled{
|
|
opacity:100;
|
|
}
|
|
|
|
button.sheet-pilot-wep-roll{
|
|
border:none;
|
|
box-shadow:none;
|
|
position:relative;
|
|
top:2px;
|
|
text-align:center;
|
|
background:none;
|
|
height:15px;
|
|
}
|
|
|
|
|
|
button.sheet-skill-roll:hover, button.sheet-pilot-wep-roll:hover, button.sheet-HASE-roll:not([disabled]):hover{
|
|
color:#ff3838;
|
|
}
|
|
|
|
button.sheet-skill-roll:active, button.sheet-pilot-wep-roll:active,button.sheet-HASE-roll:active{
|
|
color:#ad2222;
|
|
}
|
|
|
|
|
|
fieldset.sheet-repeating_talents
|
|
{
|
|
width:1200px;
|
|
}
|
|
|
|
fieldset.sheet-repeating_systems
|
|
{
|
|
width:200px;
|
|
display:inline-block;
|
|
}
|
|
|
|
|
|
div.sheet-frame-mounts
|
|
{
|
|
width:100%;
|
|
display:grid;
|
|
grid-template-columns:1fr;
|
|
}
|
|
|
|
div.sheet-frame-autocalcs
|
|
{
|
|
width:30%;
|
|
display:grid;
|
|
grid-auto-rows:40px;
|
|
grid-template-columns:1fr 1fr;
|
|
}
|
|
|
|
input {
|
|
display:inline-block;
|
|
width:60%;
|
|
height:10px;
|
|
}
|
|
|
|
input.sheet-mounts{
|
|
margin-bottom:10px;
|
|
width:100%;
|
|
display:block;
|
|
}
|
|
|
|
input.sheet-license-name
|
|
{
|
|
height:30px;
|
|
width:120px;
|
|
position:relative;
|
|
margin-left:-70px;
|
|
left:40px;
|
|
}
|
|
|
|
input.sheet-short
|
|
{
|
|
margin-top:-4px;
|
|
width: 35%;
|
|
text-align:center;
|
|
}
|
|
|
|
input.sheet-short-small
|
|
{
|
|
height:25px;
|
|
margin-top:-4px;
|
|
width:35px;
|
|
float:right;
|
|
text-align:center;
|
|
}
|
|
|
|
|
|
input.sheet-xshort
|
|
{
|
|
height:25px;
|
|
width:35px;
|
|
text-align:center;
|
|
margin-bottom:4px;
|
|
}
|
|
|
|
input.sheet-corebonus
|
|
{
|
|
float:right;
|
|
width:80%;
|
|
height:21px;
|
|
}
|
|
|
|
div.sheet-grid-item > label > input.sheet-short
|
|
{
|
|
margin-top:0px;
|
|
}
|
|
|
|
input.sheet-core
|
|
{
|
|
display:inline-block;
|
|
clear:right;
|
|
float:right;
|
|
width:35%;
|
|
text-align:center;
|
|
}
|
|
|
|
label
|
|
{
|
|
display:inline;
|
|
}
|
|
|
|
label.sheet-center
|
|
{
|
|
margin-top:5px;
|
|
font-size:14px;
|
|
text-align:center;
|
|
}
|
|
|
|
label.sheet-HASE
|
|
{
|
|
font-size:17.5px;
|
|
margin-bottom:6px;
|
|
text-align: center;
|
|
}
|
|
|
|
label.sheet-flex
|
|
{
|
|
display:flex;
|
|
width:200px;
|
|
}
|
|
|
|
label.sheet-small
|
|
{
|
|
font-size:14px;
|
|
height:21px;
|
|
display:block;
|
|
padding:0px;
|
|
margin:0;
|
|
}
|
|
|
|
label.sheet-stat-label
|
|
{
|
|
margin-top:0px;
|
|
margin-bottom:7px;
|
|
position:relative;
|
|
bottom:10px;
|
|
}
|
|
|
|
select.sheet-dmg-type
|
|
{
|
|
margin:0px;
|
|
display:inline;
|
|
width:60px;
|
|
position:relative;
|
|
top:1px;
|
|
}
|
|
|
|
span.sheet-frame-autocalcs
|
|
{
|
|
display:inline-block;
|
|
color: solid black;
|
|
opacity:100;
|
|
background:white;
|
|
vertical-align:bottom;
|
|
text-align:center;
|
|
position:relative;
|
|
width:30px;
|
|
height:30px;
|
|
left:20px;
|
|
top:5px;
|
|
font-size:17px;
|
|
font-weight:bold;
|
|
padding-top:3px;
|
|
border: 2px solid black;
|
|
border-radius:5px;
|
|
}
|
|
|
|
span.sheet-frame-max-autocalcs
|
|
{
|
|
text-align:center;
|
|
background:white;
|
|
padding-top:3px;
|
|
float:right;
|
|
border: 2px solid black;
|
|
border-radius:5px;
|
|
width:30px;
|
|
height:28px;
|
|
}
|
|
|
|
|
|
span.sheet-skill-roll
|
|
{
|
|
display:block;
|
|
text-align:center;
|
|
position:Relative;
|
|
bottom:4px;
|
|
text-align:center;
|
|
font-weight:bold;
|
|
font-size:14px;
|
|
}
|
|
|
|
|
|
span.sheet-pilot-wep-roll
|
|
{
|
|
width:145px;
|
|
display:block;
|
|
text-align:center;
|
|
right:8px;
|
|
position:relative;
|
|
bottom:4px;
|
|
font-weight:bold;
|
|
font-size:16px;
|
|
}
|
|
|
|
span.sheet-HASE-roll
|
|
{
|
|
color:black;
|
|
display:inline;
|
|
text-align:center;
|
|
margin:0px;
|
|
font-weight:bold;
|
|
font-size:17px;
|
|
}
|
|
|
|
textarea
|
|
{
|
|
resize:none;
|
|
height: 80%
|
|
}
|
|
|
|
textarea.sheet-long
|
|
{
|
|
height:82%;
|
|
}
|
|
|
|
textarea.sheet-xlong
|
|
{
|
|
height:92%;
|
|
}
|
|
|
|
textarea.sheet-short
|
|
{
|
|
height:50px;
|
|
}
|
|
|
|
|
|
/*----------- Sheet Button Setup ------------*/
|
|
|
|
|
|
input.sheet-structure{
|
|
margin-right:10px;
|
|
width: 55px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
opacity: 0;
|
|
z-index: 9999;
|
|
margin-top:0px;
|
|
}
|
|
|
|
input.sheet-corestress
|
|
{
|
|
right:50px;
|
|
margin-right:10px;
|
|
width: 55px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
opacity: 0;
|
|
z-index: 9999;
|
|
margin-top:0px;
|
|
}
|
|
|
|
input.sheet-corepower
|
|
{
|
|
position:relative;
|
|
width:35px;
|
|
height:35px;
|
|
display:inline-block;
|
|
opacity:0;
|
|
z-index:9999;
|
|
}
|
|
|
|
input.sheet-license
|
|
{
|
|
right:22px;
|
|
margin-right:10px;
|
|
width: 25px;
|
|
height: 30px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
opacity:0;
|
|
z-index: 9999;
|
|
margin-top:0px;
|
|
|
|
}
|
|
|
|
input.sheet-overcharge
|
|
{
|
|
right:45px;
|
|
margin-right:10px;
|
|
width: 45px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
opacity: 0;
|
|
z-index: 9999;
|
|
margin-top:0px;
|
|
}
|
|
|
|
|
|
span.sheet-corepower
|
|
{
|
|
position: relative;
|
|
vertical-align:middle;
|
|
width:35px;
|
|
height:35px;
|
|
display:inline-block;
|
|
background: #a1ff9e;
|
|
border: 2px solid black;
|
|
border-radius: 5px;
|
|
margin-left:-30px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
span.sheet-structure, .charsheet span.sheet-corestress{
|
|
text-align: center;
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
background: #c7c3b0;
|
|
color: black;
|
|
font-weight: bold;
|
|
width: 50px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
margin-left:-65px;
|
|
border: 2px solid black;
|
|
border-left:none;
|
|
margin-top:0px;
|
|
}
|
|
|
|
span.sheet-license
|
|
{
|
|
line-height:30px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
background: #c7c3b0;
|
|
color: black;
|
|
width: 20px;
|
|
height: 30px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
border: 2px solid black;
|
|
border-left:none;
|
|
margin-left:-35px;/*originally 91px*/
|
|
margin-top:0px;
|
|
margin-right:0px;
|
|
}
|
|
|
|
span.sheet-overcharge
|
|
{
|
|
text-align: center;
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
background: #c7c3b0;
|
|
color: black;
|
|
font-weight: bold;
|
|
width: 45px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
margin-left:-55px;/*originally 91px*/
|
|
border: 2px solid black;
|
|
border-left:none;
|
|
margin-top:0px;
|
|
}
|
|
|
|
|
|
input.sheet-license3:checked+span.sheet-license3,
|
|
input.sheet-license3:checked+span.sheet-license3 + input.sheet-license2+span.sheet-license2,
|
|
input.sheet-license3:checked+span.sheet-license3 + input.sheet-license2+span.sheet-license2 + input.sheet-license1+span.sheet-license1,
|
|
input.sheet-license2:checked+span.sheet-license2,
|
|
input.sheet-license2:checked+span.sheet-license2 + input.sheet-license1+span.sheet-license1,
|
|
input.sheet-license1:checked+span.sheet-license1
|
|
{
|
|
background:#ff4242;
|
|
}
|
|
|
|
|
|
|
|
|
|
input.sheet-structure4:checked + span.sheet-structure4,
|
|
input.sheet-structure4:checked + span.sheet-structure4 + input.sheet-structure3 + span.sheet-structure3 + input.sheet-structure2 + span.sheet-structure2 + input.sheet-structure1 + span.sheet-structure1 + input.sheet-structurecrit + span.sheet-structurecrit,
|
|
input.sheet-structure4:checked + span.sheet-structure4 + input.sheet-structure3 + span.sheet-structure3 + input.sheet-structure2 + span.sheet-structure2 + input.sheet-structure1 + span.sheet-structure1,
|
|
input.sheet-structure4:checked + span.sheet-structure4 + input.sheet-structure3 + span.sheet-structure3 + input.sheet-structure2 + span.sheet-structure2,
|
|
input.sheet-structure4:checked + span.sheet-structure4 + input.sheet-structure3 + span.sheet-structure3,
|
|
input.sheet-structure2:checked + span.sheet-structure2 + input.sheet-structure1 + span.sheet-structure1,
|
|
input.sheet-corestress1:checked + span.sheet-corestress1
|
|
|
|
{
|
|
background: #a1ff9e;
|
|
}
|
|
|
|
input.sheet-structure3:checked + span.sheet-structure3,
|
|
input.sheet-structure3:checked + span.sheet-structure3 + input.sheet-structure2 + span.sheet-structure2 + input.sheet-structure1 + span.sheet-structure1 + input.sheet-structurecrit + span.sheet-structurecrit,
|
|
input.sheet-structure3:checked + span.sheet-structure3 + input.sheet-structure2 + span.sheet-structure2 + input.sheet-structure1 + span.sheet-structure1,
|
|
input.sheet-structure3:checked + span.sheet-structure3 + input.sheet-structure2 + span.sheet-structure2,
|
|
input.sheet-corestress2:checked + span.sheet-corestress2,
|
|
input.sheet-corestress2:checked + span.sheet-corestress2 + input.sheet-corestress1 + span.sheet-corestress1,
|
|
input.sheet-overcharge1:checked + span.sheet-overcharge1
|
|
{
|
|
background: #fff04c;
|
|
}
|
|
|
|
input.sheet-structure2:checked + span.sheet-structure2 + input.sheet-structure1 + span.sheet-structure1 + input.sheet-structurecrit + span.sheet-structurecrit,
|
|
input.sheet-structure2:checked + span.sheet-structure2 + input.sheet-structure1 + span.sheet-structure1,
|
|
input.sheet-structure2:checked + span.sheet-structure2,
|
|
input.sheet-corestress3:checked + span.sheet-corestress3,
|
|
input.sheet-corestress3:checked + span.sheet-corestress3 + input.sheet-corestress2 + span.sheet-corestress2 + input.sheet-corestress1 + span.sheet-corestress1,
|
|
input.sheet-corestress3:checked + span.sheet-corestress3 + input.sheet-corestress2 + span.sheet-corestress2,
|
|
input.sheet-overcharge2:checked + span.sheet-overcharge2,
|
|
input.sheet-overcharge2:checked + span.sheet-overcharge2 + input.sheet-overcharge1 + span.sheet-overcharge1
|
|
{
|
|
background: #f79c00;
|
|
}
|
|
|
|
input.sheet-structure1:checked + span.sheet-structure1 + input.sheet-structurecrit + span.sheet-structurecrit,
|
|
input.sheet-structure1:checked + span.sheet-structure1,
|
|
input.sheet-corestress4:checked + span.sheet-corestress4,
|
|
input.sheet-corestress4:checked + span.sheet-corestress4 + input.sheet-corestress3 + span.sheet-corestress3,
|
|
input.sheet-corestress4:checked + span.sheet-corestress4 + input.sheet-corestress3 + span.sheet-corestress3 + input.sheet-corestress2 + span.sheet-corestress2 + input.sheet-corestress1 + span.sheet-corestress1,
|
|
input.sheet-corestress4:checked + span.sheet-corestress4 + input.sheet-corestress3 + span.sheet-corestress3 + input.sheet-corestress2 + span.sheet-corestress2,
|
|
input.sheet-overcharge3:checked + span.sheet-overcharge3 + input.sheet-overcharge2 + span.sheet-overcharge2 + input.sheet-overcharge1 + span.sheet-overcharge1,
|
|
input.sheet-overcharge3:checked + span.sheet-overcharge3 + input.sheet-overcharge2 + span.sheet-overcharge2,
|
|
input.sheet-overcharge3:checked + span.sheet-overcharge3
|
|
{
|
|
background: #f76200;
|
|
}
|
|
|
|
input.sheet-structurecrit:checked + span.sheet-structurecrit,
|
|
input.sheet-corestressbreach:checked + span.sheet-corestressbreach,
|
|
input.sheet-corestressbreach:checked + span.sheet-corestressbreach + input.sheet-corestress4 + span.sheet-corestress4 + input.sheet-corestress3 + span.sheet-corestress3,
|
|
input.sheet-corestressbreach:checked + span.sheet-corestressbreach + input.sheet-corestress4 + span.sheet-corestress4 + input.sheet-corestress3 + span.sheet-corestress3 + input.sheet-corestress2 + span.sheet-corestress2 + input.sheet-corestress1 + span.sheet-corestress1,
|
|
input.sheet-corestressbreach:checked + span.sheet-corestressbreach + input.sheet-corestress4 + span.sheet-corestress4 + input.sheet-corestress3 + span.sheet-corestress3 + input.sheet-corestress2 + span.sheet-corestress2,
|
|
input.sheet-corestressbreach:checked + span.sheet-corestressbreach + input.sheet-corestress4 + span.sheet-corestress4,
|
|
input.sheet-overcharge4:checked + span.sheet-overcharge4,
|
|
input.sheet-overcharge4:checked + span.sheet-overcharge4 + input.sheet-overcharge3 + span.sheet-overcharge3 + input.sheet-overcharge2 + span.sheet-overcharge2 + input.sheet-overcharge1 + span.sheet-overcharge1,
|
|
input.sheet-overcharge4:checked + span.sheet-overcharge4 + input.sheet-overcharge3 + span.sheet-overcharge3 + input.sheet-overcharge2 + span.sheet-overcharge2,
|
|
input.sheet-overcharge4:checked + span.sheet-overcharge4 + input.sheet-overcharge3 + span.sheet-overcharge3,
|
|
input.sheet-corepower:checked + span.sheet-corepower
|
|
{
|
|
background: #ce0606;
|
|
}
|
|
input.sheet-acc-tab1:checked + span.sheet-acc-tab1,
|
|
input.sheet-acc-tab2:checked + span.sheet-acc-tab2,
|
|
input.sheet-acc-tab3:checked + span.sheet-acc-tab3
|
|
|
|
{
|
|
background: #ff9d87;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/*----------- Tabs Setup -------------*/
|
|
|
|
/*this hides the contents of each tab by default*/
|
|
.charsheet div[class^="sheet-section"] {
|
|
display: none;
|
|
}
|
|
|
|
/*this shows the tab content when the appropriate input field is selected*/
|
|
.charsheet input.sheet-tab1:checked ~ div.sheet-section-pilot,
|
|
.charsheet input.sheet-tab2:checked ~ div.sheet-section-talents,
|
|
.charsheet input.sheet-tab3:checked ~ div.sheet-section-frame,
|
|
{
|
|
display: block;
|
|
}
|
|
|
|
.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] {
|
|
display: block;
|
|
}
|
|
|
|
/*this hides the radio button for each tab, makes it 100px wide and 40px tall and makes sure it's above everything else*/
|
|
.charsheet input.sheet-tab {
|
|
width: 100px;
|
|
height: 50px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
opacity: 0;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.charsheet input.sheet-acc-tab {
|
|
width: 100px;
|
|
height: 50px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
opacity: 0;
|
|
z-index: 9999;
|
|
}
|
|
|
|
/*this styles the span with the tab information and slides to the left, so it appears underneath the radio button*/
|
|
.charsheet span.sheet-tab {
|
|
text-align: center;
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
background: #c7c3b0;
|
|
color: black;
|
|
font-weight: bold;
|
|
border-radius: 4px;
|
|
width: 100px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
margin-left: -101px;/*originally 91px*/
|
|
}
|
|
|
|
.charsheet span.sheet-acc-tab {
|
|
text-align: center;
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
background: #c7c3b0;
|
|
color: black;
|
|
font-weight: bold;
|
|
border-radius: 4px;
|
|
width: 100px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
margin-left: -101px;/*originally 91px*/
|
|
}
|
|
|
|
/*this modifies the span color once the radio button is selected so you know which tab is selected*/
|
|
.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-tab99:checked + span.sheet-tab99
|
|
{
|
|
background: #2c424e;
|
|
color: #bfc4c6;
|
|
border-radius: 4px;
|
|
}
|
|
/*----------- End Tab Setup -----------*/
|
|
|