mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
the-Dissilent
9dc6f3e448
Added 2 new tabs. The M/LT tab keeps track of Minions & Lieutenants for GMs. The Notes tab allows players to keep track of anything they choose. To make room, the Forms/Modes tab & the Minion tab, have been combined into the Auxiliary tab. This may confuse some players at first, but all of their information is still there.
220 lines
11 KiB
CSS
220 lines
11 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; align-items: flex-start; gap: 2px;}
|
|
.sheet-flexspace {flex-grow: 1;}
|
|
.sheet-morespace {flex-grow: 4;}
|
|
|
|
.sheet-statusgrid {display: grid; grid-template-columns: 30px 65px auto 50px 50px;}
|
|
.sheet-dividedgrid {display: grid; grid-template-columns: 15px auto 25px auto 65px 65px 65px;}
|
|
.sheet-othergrid {display: grid; grid-template-columns: 25px auto;}
|
|
.sheet-envirostatusgrid {display: grid; grid-template-columns: auto 95px 95px 95px 95px auto;}
|
|
.sheet-envirostatuscolor {display: grid; grid-template-columns: 30px 65px;}
|
|
|
|
.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;}
|
|
.sheet-sblack {color: white; background-color: #171711; display: inline-grid; place-items: center;}
|
|
|
|
/* Border the current status*/
|
|
.sheet-health-range[value="3"] ~ div.sheet-statusgrid > .sheet-sgreen-right,
|
|
.sheet-health-range[value="2"] ~ div.sheet-statusgrid > .sheet-syellow-right,
|
|
.sheet-health-range[value="1"] ~ div.sheet-statusgrid > .sheet-sred-right {border-right: double; border-bottom: double; border-top: double;}
|
|
.sheet-health-range[value="3"] ~ div.sheet-statusgrid > .sheet-sgreen-left,
|
|
.sheet-health-range[value="2"] ~ div.sheet-statusgrid > .sheet-syellow-left,
|
|
.sheet-health-range[value="1"] ~ div.sheet-statusgrid > .sheet-sred-left {border-left: double; border-bottom: double; border-top: double;}
|
|
|
|
/* Color the Environment*/
|
|
div.sheet-envirotitle {background-color: #bfbfbf;}
|
|
.sheet-envirocolor[value="Green"] ~ div.sheet-envirotitle {background-color: #41b23b;}
|
|
.sheet-envirocolor[value="Yellow"] ~ div.sheet-envirotitle {background-color: #f8df1b;}
|
|
.sheet-envirocolor[value="Red"] ~ div.sheet-envirotitle {background-color: #dc2f34;}
|
|
.sheet-envirocolor[value="Green"] ~ div.sheet-envirostatusgrid > div.sheet-sgreen,
|
|
.sheet-envirocolor[value="Yellow"] ~ div.sheet-envirostatusgrid > div.sheet-syellow,
|
|
.sheet-envirocolor[value="Red"] ~ div.sheet-envirostatusgrid > div.sheet-sred,
|
|
.sheet-envirocolor[value="Out"] ~ div.sheet-envirostatusgrid > div.sheet-sgrey {font-weight: bold; border: 2px solid black; font-size: 16px;}
|
|
|
|
.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-tabstoggle[value="hero"] ~ button.sheet-herobutton,
|
|
.sheet-tabstoggle[value="abilities"] ~ button.sheet-abilbutton,
|
|
.sheet-tabstoggle[value="auxiliary"] ~ button.sheet-formbutton,
|
|
.sheet-tabstoggle[value="notes"] ~ button.sheet-notebutton,
|
|
.sheet-tabstoggle[value="villain"] ~ button.sheet-villbutton,
|
|
.sheet-tabstoggle[value="mlt"] ~ button.sheet-mltbutton,
|
|
.sheet-tabstoggle[value="environment"] ~ button.sheet-envibutton,
|
|
.sheet-tabs2toggle[value="abilities2"] ~ button.sheet-abil2button,
|
|
.sheet-tabs2toggle[value="actions2"] ~ button.sheet-acti2button {
|
|
background-image: url("https://imgur.com/Sa0nqts.jpg");
|
|
font-weight: bold;
|
|
border: 2px solid black;
|
|
padding: 10px 10px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* Hide all tabs */
|
|
.sheet-hero,
|
|
.sheet-aux,
|
|
.sheet-notes,
|
|
.sheet-villain,
|
|
.sheet-mlt,
|
|
.sheet-environment,
|
|
.sheet-abilities,
|
|
.sheet-abilities2,
|
|
.sheet-actions2 {display: none;}
|
|
|
|
/* show the selected tab */
|
|
.sheet-tabstoggle[value="hero"] ~ div.sheet-hero,
|
|
.sheet-tabstoggle[value="abilities"] ~ div.sheet-abilities,
|
|
.sheet-tabstoggle[value="auxiliary"] ~ div.sheet-aux,
|
|
.sheet-tabstoggle[value="notes"] ~ div.sheet-notes,
|
|
.sheet-tabstoggle[value="villain"] ~ div.sheet-villain,
|
|
.sheet-tabstoggle[value="mlt"] ~ div.sheet-mlt,
|
|
.sheet-tabstoggle[value="environment"] ~ div.sheet-environment,
|
|
.sheet-tabs2toggle[value="abilities2"] ~ div.sheet-abilities2,
|
|
.sheet-tabs2toggle[value="actions2"] ~ div.sheet-actions2 {display: block;}
|
|
|
|
.sheet-tabstoggle[value="villain"] ~ div.sheet-villain > div.sheet-abilities2,
|
|
.sheet-tabstoggle[value="villain"] ~ div.sheet-villain > div.sheet-actions2 {background-color: #eaeae9;}
|
|
.sheet-tabstoggle[value="abilities"] ~ div.sheet-abilities > div.sheet-abilities2 > div.sheet-green-abilities,
|
|
.sheet-tabstoggle[value="abilities"] ~ div.sheet-abilities > div.sheet-actions2 > div.sheet-green-abilities {background-color: #46e35e;}
|
|
|
|
/* hide modes based on radio */
|
|
.sheet-auxonly,
|
|
.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-auxonly,
|
|
.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;}
|
|
|
|
/* Hide Powers, Qualities, or Modes from ability and villain tabs */
|
|
.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,
|
|
.sheet-dividedselect[value="1"] + .sheet-divideddouble[value="on"] ~ div.sheet-powerbase,
|
|
.sheet-dividedselect[value="0"] ~ div.sheet-dividedeither,
|
|
.sheet-dividedselect[value="2"] ~ div.sheet-dividedcivilian,
|
|
.sheet-dividedselect:not([value="2"]) ~ div.sheet-dividedheroic,
|
|
.sheet-dividedselect[value="2"] + .sheet-divideddouble[value="on"] ~ div.sheet-rightquality,
|
|
.sheet-leftquality,
|
|
.sheet-rightpower {display: none;}
|
|
|
|
.sheet-dividedselect[value="2"] + .sheet-divideddouble[value="on"] ~ div.sheet-rightpower,
|
|
.sheet-dividedselect[value="1"] + .sheet-divideddouble[value="on"] ~ div.sheet-leftquality {display: block;}
|
|
.sheet-dividedselect[value="1"] ~ div.sheet-divideleft,
|
|
.sheet-dividedselect[value="2"] ~ div.sheet-divideright {border-style: solid; border-width: 1%;}
|
|
|
|
/* change font of die in roll buttons */
|
|
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;}
|
|
|
|
/* 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 > .sheet-down,
|
|
input.sheet-direction:not([value="right"]) + button.sheet-direction > .sheet-right,
|
|
input.sheet-direction:not([value="down"]) ~ div.sheet-underarrow,
|
|
|
|
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;}
|
|
|
|
/* ROLL TEMPLATES */
|
|
.sheet-rolltemplate-default table {
|
|
border: 2px solid black;
|
|
}
|
|
|
|
.sheet-rolltemplate-default caption {
|
|
background-image: url("https://imgur.com/Sa0nqts.jpg");
|
|
color: black;
|
|
font-weight: bold;
|
|
border-top: 2px solid black;
|
|
border-bottom: 0px;
|
|
border-left: 2px solid black;
|
|
border-right: 2px solid black;
|
|
}
|
|
|
|
.sheet-rolltemplate-scrpg .sheet-scrpg-container { width: 225px; border: 1px solid black; padding: 0; margin: 0; background-color: #f6f0df; }
|
|
.sheet-rolltemplate-scrpg .inlinerollresult {background-color: transparent; border: none;}
|
|
/*.sheet-rolltemplate-test .inlinerollresult {pointer-events: none}*/
|
|
.sheet-rolltemplate-scrpg .inlinerollresult.fullcrit {border: none;}
|
|
.sheet-rolltemplate-scrpg .inlinerollresult.fullfail {border: none;}
|
|
.sheet-rolltemplate-scrpg .inlinerollresult.fullcrit::after {content: "+1";}
|
|
.sheet-rolltemplate-scrpg .inlinerollresult.fullfail::after {content: "-1";}
|
|
.sheet-rolltemplate-scrpg .sheet-scrpg-title {font-weight: bold; font-size: 14px; padding-left: 5px; padding-right: 5px; padding-bottom: 2px; padding-top: 2px; margin-bottom: 3px;}
|
|
.sheet-rolltemplate-scrpg .sheet-gfill {background-color: #46e35e;}
|
|
.sheet-rolltemplate-scrpg .sheet-yfill {background-color: #ffff99;}
|
|
.sheet-rolltemplate-scrpg .sheet-rfill {background-color: #f9beac;}
|
|
.sheet-rolltemplate-scrpg .sheet-outfill {background-color: #bfbfbf;}
|
|
.sheet-rolltemplate-scrpg .sheet-scrpg-icons {text-align: center; padding-left: 5px; padding-right: 5px; padding-top: 2px;}
|
|
.sheet-rolltemplate-scrpg .sheet-scrpg-type {text-align: center; padding-left: 5px; padding-right: 5px; padding-bottom: 2px; margin-bottom: 3px;}
|
|
.sheet-rolltemplate-scrpg .sheet-scrpg-reroll {text-align: center; background-color: #666666; color: #f6f0df; padding-left: 5px; padding-right: 5px;}
|
|
.sheet-rolltemplate-scrpg .sheet-scrpg-desc {text-align: right; font-weight: bold; padding-left: 5px; padding-right: 5px; padding-bottom: 2px; padding-top: 2px; margin-bottom: 3px;}
|
|
.sheet-rolltemplate-scrpg .sheet-scrpg-desc td:first-child {width: 87%}
|
|
.sheet-rolltemplate-scrpg .sheet-scrpg-desc td:last-child {width: 13%}
|