mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
the-Dissilent
5bf0b94c7d
* update to version by theDissilent Expand the sheet to include full details from Character sheets and adds in Auxiliary sheets. Also incorporates CSS for ease of use. * Outdated I'm sure a new one will be added to represent the new version * Add Icons and Die images * remove outdated image Replacing with 3 pages * Add 3 Page "Bunker" Character Sheet * Reasy for pull * Add files via upload * sheet.json ready * Action Type Values * updates old version sheets * only 1 character sheet Pull request displayed error due to 2 sheets, so I'm reducing it * only 1 preview file listed in sheet.json
127 lines
5.1 KiB
CSS
127 lines
5.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;}
|
|
|
|
/* --------------------------------Flex & Grid Layouts-------------------------------- */
|
|
.sheet-flexrow {display: flex;}
|
|
.sheet-flexspace {flex-grow: 1;}
|
|
.sheet-morespace {flex-grow: 4;}
|
|
|
|
.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;}
|
|
|
|
.sheet-descgrid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
column-gap: 5px;
|
|
}
|
|
.sheet-descinline {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
column-gap: 5px;
|
|
}
|
|
|
|
.sheet-vhealth {display: grid; grid-template-columns: 200px 170px 170px; place-items: center; column-gap: 1fr; justify-content: space-around;}
|
|
.sheet-vlogo {grid-area: 1/1/3/2}
|
|
.sheet-hhead {grid-area: 1 / 2; justify-self: start}
|
|
.sheet-hchead {grid-area: 1 / 3; justify-self: start}
|
|
.sheet-hmax {grid-area: 2 / 2;}
|
|
.sheet-hcur {grid-area: 2 / 3;}
|
|
|
|
/* --------------------------------Hide and Display section of Code-------------------------------- */
|
|
/* Configure the tab buttons*/
|
|
.sheet-hero,
|
|
.sheet-aux,
|
|
.sheet-minions,
|
|
.sheet-villain,
|
|
.sheet-abilities {display: none;}
|
|
|
|
/* show the selected tab */
|
|
.sheet-tabstoggle[value="hero"] ~ div.sheet-hero,
|
|
.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;}
|
|
|
|
.sheet-tabstoggle[value="villain"] ~ div.sheet-villain > div.sheet-green-abilities {background-color: #eaeae9;}
|
|
.sheet-tabstoggle[value="abilities"] ~ div.sheet-abilities > div.sheet-green-abilities {background-color: #46e35e;}
|
|
|
|
/* 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: ''; font-family: 'dicefontd4'; }
|
|
|
|
/* Clear default cycle button styling */
|
|
button.sheet-icon-cycle {
|
|
margin: 0;
|
|
overflow: visible;
|
|
text-transform: none;
|
|
padding: 0;
|
|
background: transparent;
|
|
}
|
|
/* Hide the icons 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 and villkain tab tab */
|
|
.sheet-modeselect[value="0"] ~ div.sheet-modebase,
|
|
.sheet-tabstoggle[value="villain"] ~ div.sheet-modebase,
|
|
.sheet-tabstoggle:not([value="villain"]) + .sheet-modeselect:not([value="0"]) ~ div.sheet-powerbase {display: none;}
|
|
|
|
|
|
/* Clear default open/close button styling */
|
|
button.sheet-direction,
|
|
button.sheet-lock {
|
|
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,
|
|
|
|
input.sheet-lock:not([value="hide"]) + button.sheet-lock > span.sheet-hide,
|
|
input.sheet-lock:not([value="show"]) + button.sheet-lock > span.sheet-show,
|
|
input.sheet-lock:not([value="hide"]) ~ div.sheet-nonsource,
|
|
input.sheet-lock:not([value="show"]) ~ div.sheet-sourceinput {display: none;}
|