mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
60 lines
1.8 KiB
CSS
60 lines
1.8 KiB
CSS
/*----------- 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-overview,
|
|
.charsheet input.sheet-tab2:checked ~ div.sheet-section-elites,
|
|
.charsheet input.sheet-tab3:checked ~ div.sheet-section-rank,
|
|
.charsheet input.sheet-tab4:checked ~ div.sheet-section-specialists,
|
|
|
|
{
|
|
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: 200px;
|
|
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: 1.2em;
|
|
font-family: stencil;
|
|
background: #E6CAB0;
|
|
color: #7C3E00;
|
|
border: solid 1px rgba(0, 0, 0, 0.35);
|
|
border-radius: 4px;
|
|
width: 200px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
vertical-align: ;
|
|
margin-left: -201px;
|
|
}
|
|
|
|
/*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-tab99:checked + span.sheet-tab99 {
|
|
|
|
background: #7C3E00;
|
|
color: white;
|
|
border-radius: 4px;
|
|
} |