mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
156 lines
3.2 KiB
CSS
156 lines
3.2 KiB
CSS
.charsheet {
|
|
|
|
background: url("https://i.pinimg.com/originals/04/fd/c1/04fdc124d0ef65ce49a87591d0a73b2f.jpg");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
min-width: 100%
|
|
max-width: 900px;
|
|
|
|
}
|
|
|
|
.sheet-column {
|
|
float: left;
|
|
width: 30%;
|
|
/* border: 1px solid black; */
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
/* Clear floats after the columns */
|
|
.sheet-row:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
}
|
|
|
|
.sheet {
|
|
|
|
}
|
|
|
|
.sheet-info-block {
|
|
|
|
display:table-cell;
|
|
}
|
|
|
|
|
|
.sheet-line-data {
|
|
|
|
}
|
|
|
|
.sheet-line-input {
|
|
width:160px;
|
|
margin: 60;
|
|
}
|
|
|
|
.sheet-line-smallinput {
|
|
width:10px;
|
|
|
|
}
|
|
|
|
input {
|
|
background-color: #C3AD7E;
|
|
border-color: black;
|
|
box-sizing: border-box;
|
|
color: black;
|
|
}
|
|
|
|
.sheet-model {
|
|
|
|
display:block;
|
|
margin-left:80px;
|
|
margin-right: auto;
|
|
margin-top:10px;
|
|
width:18%;
|
|
position:absolute;
|
|
}
|
|
|
|
.sheet-center-block {
|
|
margin:auto;
|
|
display:inline-block;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*----------- 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-core,
|
|
.charsheet input.sheet-tab2:checked ~ div.sheet-section-edges,
|
|
.charsheet input.sheet-tab3:checked ~ div.sheet-section-skills,
|
|
.charsheet input.sheet-tab4:checked ~ div.sheet-section-gear,
|
|
.charsheet input.sheet-tab5:checked ~ div.sheet-section-arcanum,
|
|
.charsheet input.sheet-tab6:checked ~ div.sheet-section-journal {
|
|
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: 40px;
|
|
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*/
|
|
}
|
|
|
|
/*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 -----------*/
|