mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
88 lines
2.4 KiB
CSS
88 lines
2.4 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-BasicInfo,
|
|
.charsheet input.sheet-tab2:checked ~ div.sheet-section-Skills,
|
|
.charsheet input.sheet-tab3:checked ~ div.sheet-section-Abilities,
|
|
.charsheet input.sheet-tab4:checked ~ div.sheet-section-Weapons,
|
|
.charsheet input.sheet-tab5:checked ~ div.sheet-section-Items,
|
|
.charsheet input.sheet-tab6:checked ~ div.sheet-section-Religon,
|
|
.charsheet input.sheet-tab7:checked ~ div.sheet-section-Journal{
|
|
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: 30px;
|
|
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: 30px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
margin-left: -101px;
|
|
}
|
|
|
|
/*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{
|
|
|
|
background: #2c424e;
|
|
color: #bfc4c6;
|
|
border-radius: 4px;
|
|
}
|
|
/*----------- End Tab Setup -----------*/
|
|
|
|
td {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/*-- These set the style of all imput areas --*/
|
|
|
|
input {
|
|
border: 0;
|
|
outline: 0;
|
|
background: transparent;
|
|
border-bottom: 2px solid black;
|
|
border-radius: 5px;
|
|
border-color: steelblue;
|
|
}
|
|
|
|
textarea {
|
|
width: 98%;
|
|
height: 20px;
|
|
border: 0;
|
|
outline: 0;
|
|
background: transparent;
|
|
border-bottom: 2px solid black;
|
|
border-radius: 5px;
|
|
border-color: steelblue;
|
|
} |