the-Dissilent
dc43addfae
Expand the sheet to include full details from Character sheets and adds in Auxiliary sheets. Also incorporates CSS for ease of use.
98 lines
4.1 KiB
CSS
98 lines
4.1 KiB
CSS
|
|
/* Set the min-width so that when the window is resized the look will stay consistant */
|
|
.charsheet {
|
|
background-color: #f6f0df;
|
|
min-width: 800px;
|
|
}
|
|
|
|
.sheet-detail-head {font-weight: bold; color: #f2a61d;}
|
|
.sheet-typed-head {font-weight: bold; font-size: large;}
|
|
.sheet-gfill {background-color: #46e35e;}
|
|
.sheet-yfill {background-color: #ffff99;}
|
|
.sheet-rfill {background-color: #f9beac;}
|
|
|
|
/* --------------------------------Grid Layout-------------------------------- */
|
|
.sheet-statusgrid {
|
|
display: grid;
|
|
grid-template-columns: 30px 65px auto 50px 50px;
|
|
}
|
|
.sheet-shead {display: inline-grid; place-items: center;}
|
|
.sheet-sgreen {background-color: #41b23b; display: inline-grid; place-items: center;}
|
|
.sheet-syellow {background-color: #f8df1b; display: inline-grid; place-items: center;}
|
|
.sheet-sred {background-color: #dc2f34; display: inline-grid; place-items: center;}
|
|
.sheet-sgrey {background-color: #bfbfbf; display: inline-grid; place-items: center; height: 35px;}
|
|
.sheet-sblack {color: white; background-color: #171711; display: inline-grid; place-items: center;}
|
|
|
|
/* --------------------------------Hide and Display section of Code-------------------------------- */
|
|
/* Configure the tab buttons*/
|
|
.sheet-description,
|
|
.sheet-aux,
|
|
.sheet-minions,
|
|
.sheet-villain,
|
|
.sheet-abilities {display: none;}
|
|
|
|
/* show the selected tab */
|
|
.sheet-tabstoggle[value="description"] ~ div.sheet-description,
|
|
.sheet-tabstoggle[value="auxiliary"] ~ div.sheet-aux,
|
|
.sheet-tabstoggle[value="minions"] ~ div.sheet-minions,
|
|
.sheet-tabstoggle[value="villain"] ~ div.sheet-villain,
|
|
.sheet-tabstoggle[value="abilities"] ~ div.sheet-abilities {display: block;}
|
|
|
|
/* show aux tab on abilities tab */
|
|
.sheet-tabstoggle[value="abilities"] ~ div.sheet-aux {display: block;}
|
|
/* hide modes based on radio */
|
|
.sheet-mode0,
|
|
.sheet-modeselect:not([value="1"]) ~ div.sheet-modeg1,
|
|
.sheet-modeselect:not([value="2"]) ~ div.sheet-modeg2,
|
|
.sheet-modeselect:not([value="3"]) ~ div.sheet-modeg3,
|
|
.sheet-modeselect:not([value="4"]) ~ div.sheet-modey1,
|
|
.sheet-modeselect:not([value="5"]) ~ div.sheet-modey2,
|
|
.sheet-modeselect:not([value="6"]) ~ div.sheet-moder1 {display: none;}
|
|
/* show all modes on aux tab */
|
|
.sheet-tabstoggle[value="auxiliary"] ~ div.sheet-mode0,
|
|
.sheet-tabstoggle[value="auxiliary"] ~ div.sheet-modeg1,
|
|
.sheet-tabstoggle[value="auxiliary"] ~ div.sheet-modeg2,
|
|
.sheet-tabstoggle[value="auxiliary"] ~ div.sheet-modeg3,
|
|
.sheet-tabstoggle[value="auxiliary"] ~ div.sheet-modey1,
|
|
.sheet-tabstoggle[value="auxiliary"] ~ div.sheet-modey2,
|
|
.sheet-tabstoggle[value="auxiliary"] ~ div.sheet-moder1 {display: block;}
|
|
|
|
/* change font of die in roll button */
|
|
button[type=roll].sheet-rolldice::before { content: '0'; font-family: 'dicefontd8'; }
|
|
button[type=roll].sheet-rolldice::after { content: '0'; font-family: 'dicefontd10'; }
|
|
|
|
/* Clear default cycle button styling */
|
|
button.sheet-icon-cycle {
|
|
margin: 0;
|
|
overflow: visible;
|
|
text-transform: none;
|
|
padding: 0;
|
|
background: transparent;
|
|
}
|
|
/* Hide the section(s) that do not match the attribute value */
|
|
input.sheet-icon-cycle:not([value="1"]) ~ span.sheet-attack,
|
|
input.sheet-icon-cycle:not([value="2"]) ~ span.sheet-defend,
|
|
input.sheet-icon-cycle:not([value="3"]) ~ span.sheet-overcome,
|
|
input.sheet-icon-cycle:not([value="4"]) ~ span.sheet-boost,
|
|
input.sheet-icon-cycle:not([value="5"]) ~ span.sheet-hinder,
|
|
input.sheet-icon-cycle:not([value="6"]) ~ span.sheet-recover {display: none;}
|
|
|
|
/* Hide Powers or Modes from ability tab */
|
|
input.sheet-modeselect:not([value="0"]) ~ div.sheet-powerbase {display: none;}
|
|
input.sheet-modeselect[value="0"] ~ div.sheet-modebase {display: none;}
|
|
|
|
/* Clear default open/close button styling */
|
|
button.sheet-direction {
|
|
margin: 0;
|
|
overflow: visible;
|
|
text-transform: none;
|
|
border-style: none;
|
|
padding: 0;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
/* Hide the section(s) that do not match the attribute value */
|
|
input.sheet-direction:not([value="down"]) + button.sheet-direction > span.sheet-down,
|
|
input.sheet-direction:not([value="right"]) + button.sheet-direction > span.sheet-right,
|
|
input.sheet-direction:not([value="down"]) ~ div.sheet-eachform {display: none;}
|