95 lines
3.4 KiB
CSS
95 lines
3.4 KiB
CSS
/*-- ED4 Character Sheet v1.6 Last update: 12-19-2017
|
|
Author: Dougansf --*/
|
|
|
|
h3 {text-indent: 20px;}
|
|
|
|
{color: black; font-size: 90%}
|
|
|
|
input {font-size: 90%}
|
|
|
|
/*----------- Main 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-attributes,
|
|
.charsheet input.sheet-tab2:checked ~ div.sheet-section-talents,
|
|
.charsheet input.sheet-tab3:checked ~ div.sheet-section-skills,
|
|
.charsheet input.sheet-tab4:checked ~ div.sheet-section-equipment,
|
|
.charsheet input.sheet-tab5:checked ~ div.sheet-section-matrixes,
|
|
.charsheet input.sheet-tab6:checked ~ div.sheet-section-grimoire,
|
|
.charsheet input.sheet-tab7:checked ~ div.sheet-section-treasury,
|
|
.charsheet input.sheet-tab8:checked ~ div.sheet-section-NPC,
|
|
.charsheet input.sheet-tab51:checked ~ div.sheet-section-circle1,
|
|
.charsheet input.sheet-tab52:checked ~ div.sheet-section-circle2,
|
|
.charsheet input.sheet-tab53:checked ~ div.sheet-section-circle3,
|
|
.charsheet input.sheet-tab54:checked ~ div.sheet-section-circle4,
|
|
.charsheet input.sheet-tab55:checked ~ div.sheet-section-circle5,
|
|
.charsheet input.sheet-tab56:checked ~ div.sheet-section-circle6,
|
|
.charsheet input.sheet-tab57:checked ~ div.sheet-section-circle7,
|
|
.charsheet input.sheet-tab58:checked ~ div.sheet-section-circle8,
|
|
|
|
{
|
|
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: 86px;
|
|
height: 20px;
|
|
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: 12px;
|
|
background: #c7c3b0;
|
|
color: black;
|
|
font-weight: bold;
|
|
border-radius: 3px;
|
|
|
|
width: 91px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
margin-left: -95px;/*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-tab51:checked + span.sheet-tab51,
|
|
.charsheet input.sheet-tab52:checked + span.sheet-tab52,
|
|
.charsheet input.sheet-tab53:checked + span.sheet-tab53,
|
|
.charsheet input.sheet-tab54:checked + span.sheet-tab54,
|
|
.charsheet input.sheet-tab55:checked + span.sheet-tab55,
|
|
.charsheet input.sheet-tab56:checked + span.sheet-tab56,
|
|
.charsheet input.sheet-tab57:checked + span.sheet-tab57,
|
|
.charsheet input.sheet-tab58:checked + span.sheet-tab58,
|
|
.charsheet input.sheet-tab99:checked + span.sheet-tab99 {
|
|
|
|
background: #034cb2;
|
|
color: #FFFFFF;
|
|
border-radius: 4px;
|
|
}
|
|
/*----------- End Main Tab Setup -----------*/
|