mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
669 lines
13 KiB
CSS
669 lines
13 KiB
CSS
@import url('https://fonts.googleapis.com/css?family=Federant|Piedra|Volkhov:ital@1&display=swap');
|
|
|
|
|
|
/*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*/
|
|
input.sheet-tab1:checked ~ div.sheet-section-basic,
|
|
input.sheet-tab2:checked ~ div.sheet-section-stats,
|
|
input.sheet-tab3:checked ~ div.sheet-section-combat,
|
|
input.sheet-tab4:checked ~ div.sheet-section-abilities,
|
|
input.sheet-tab5:checked ~ div.sheet-section-equipment,
|
|
input.sheet-tab6:checked ~ div.sheet-section-mu,
|
|
input.sheet-tab7:checked ~ div.sheet-section-cleric,
|
|
input.sheet-tab8:checked ~ div.sheet-section-thief,
|
|
input.sheet-tab9:checked ~ div.sheet-section-ep,
|
|
input.sheet-tab10:checked ~ div.sheet-section-death
|
|
{
|
|
display: block;
|
|
}
|
|
|
|
.charsheet input.sheet-tab {
|
|
width: 60px;
|
|
height: 25px;
|
|
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: 11px;
|
|
background: white;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-color: black;
|
|
font-style: normal;
|
|
border-radius: 16px 16px 0px 0px;
|
|
width: 60px;
|
|
height: 25px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
margin-left: -61px;
|
|
line-height: 25px;
|
|
}
|
|
|
|
.charsheet span.sheet-tab {
|
|
text-align: center;
|
|
display: inline-block;
|
|
}
|
|
|
|
/*this modifies the span color once the radio button is selected so you know which tab is selected*/
|
|
input.sheet-tab1:checked + span.sheet-tab1,
|
|
input.sheet-tab2:checked + span.sheet-tab2,
|
|
input.sheet-tab3:checked + span.sheet-tab3,
|
|
input.sheet-tab4:checked + span.sheet-tab4,
|
|
input.sheet-tab5:checked + span.sheet-tab5,
|
|
input.sheet-tab6:checked + span.sheet-tab6,
|
|
input.sheet-tab7:checked + span.sheet-tab7,
|
|
input.sheet-tab8:checked + span.sheet-tab8,
|
|
input.sheet-tab9:checked + span.sheet-tab9,
|
|
input.sheet-tab10:checked + span.sheet-tab10
|
|
{
|
|
background: #F3D149;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-radius: 16px 16px 0px 0px;
|
|
border-color: black black #F3D149 ;
|
|
}
|
|
/*----------- End Tab Setup -----------*/
|
|
.sheet-background {
|
|
background-color: #F3D149;
|
|
}
|
|
|
|
.sheet-background-hf
|
|
{
|
|
min-height: 25px;
|
|
background-image: url('https://ARGHive.net/wp-content/uploads/2020/05/HM4E_B.png?v=1');
|
|
background-repeat: repeat-x;
|
|
background-size: 0.645in;
|
|
margin-left: 0.3in;
|
|
margin-right: 0.3in;
|
|
}
|
|
.sheet-background-left
|
|
{
|
|
background-image: url('https://ARGHive.net/wp-content/uploads/2020/05/HM4E_BLeft.png?v=1');
|
|
background-repeat: repeat-y;
|
|
background-size: 800px;
|
|
}
|
|
|
|
.sheet-basic
|
|
{
|
|
margin-left: 0.3in;
|
|
}
|
|
|
|
.sheet-minor-label {
|
|
font-size: x-small;
|
|
line-height: 75%;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.sheet-three-column{
|
|
display: grid;
|
|
grid-column-gap: 1rem;
|
|
grid-row-gap: 0px ;
|
|
grid-template-columns: auto auto auto;
|
|
grid-template-areas: "tcleft tccenter tcright";
|
|
grid-template-rows: repeat(auto-fill, auto-fill);
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
.sheet-four-column{
|
|
display: grid;
|
|
grid-column-gap: 1rem;
|
|
grid-row-gap: 0px ;
|
|
grid-template-columns: auto auto auto auto;
|
|
grid-template-areas: "tcleft tccleft tccright tcright";
|
|
grid-template-rows: repeat(auto-fill, auto-fill);
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.sheet-spellbooks{
|
|
display: grid;
|
|
grid-column-gap: 1rem;
|
|
grid-row-gap: 0px ;
|
|
grid-template-columns: 10% 28% 28% 30%;
|
|
grid-template-areas: "tcleft tccleft tccright tcright";
|
|
grid-template-rows: repeat(auto-fill, auto-fill);
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
.sheet-tccleft2 {
|
|
grid-column: 2 /span 2;
|
|
}
|
|
.sheet-tccright2 {
|
|
grid-column: 3 /span 2;
|
|
}
|
|
|
|
.sheet-tcleft {
|
|
grid-area: tcleft;
|
|
}
|
|
.sheet-tccenter {
|
|
grid-area: tccenter;
|
|
}
|
|
.sheet-tcright {
|
|
grid-area: tcright;
|
|
}
|
|
.sheet-tccleft {
|
|
grid-area: tccleft;
|
|
}
|
|
.sheet-tccright {
|
|
grid-area: tccright;
|
|
}
|
|
.sheet-row1 {
|
|
grid-row: 1;
|
|
}
|
|
.sheet-row2 {
|
|
grid-row: 2;
|
|
}
|
|
.sheet-row3 {
|
|
grid-row: 3;
|
|
}
|
|
.sheet-row4 {
|
|
grid-row: 4;
|
|
}
|
|
.sheet-row5 {
|
|
grid-row: 5;
|
|
}
|
|
.sheet-row6 {
|
|
grid-row: 6;
|
|
}
|
|
.sheet-row7 {
|
|
grid-row: 7;
|
|
}
|
|
.sheet-row8 {
|
|
grid-row: 8;
|
|
}
|
|
.sheet-row9 {
|
|
grid-row: 9;
|
|
}
|
|
.sheet-row10 {
|
|
grid-row: 10;
|
|
}
|
|
.sheet-row11 {
|
|
grid-row: 11;
|
|
}
|
|
.sheet-row12 {
|
|
grid-row: 12;
|
|
}
|
|
|
|
.sheet-titlesection {
|
|
grid-row: 1 / 4;
|
|
}
|
|
.sheet-titles {
|
|
font-family: 'Federant', cursive;
|
|
font-size: x-large;
|
|
text-align: center;
|
|
|
|
}
|
|
.sheet-subtitles {
|
|
font-family: 'Volkhov', serif;
|
|
font-style: italic;
|
|
font-size: larger;
|
|
text-align: center;
|
|
}
|
|
.sheet-indented {
|
|
margin-left: 4px;
|
|
margin-top: 7px;
|
|
}
|
|
.sheet-indented input {
|
|
background-color: #F3D149;
|
|
border: 0px;
|
|
padding: 0px;
|
|
width: 195px;
|
|
}
|
|
.sheet-inputsize {
|
|
width: 218px;
|
|
height: 30px;
|
|
}
|
|
|
|
.sheet-one-column{
|
|
display: grid;
|
|
grid-column-gap: 1rem;
|
|
grid-row-gap: 2px ;
|
|
grid-template-columns: auto;
|
|
grid-template-areas: "tcleft";
|
|
grid-template-rows: repeat(auto-fill);
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.sheet-two-column{
|
|
display: grid;
|
|
grid-column-gap: 1rem;
|
|
grid-row-gap: 2px ;
|
|
grid-template-columns: auto auto;
|
|
grid-template-areas: "tcleft tcright";
|
|
grid-template-rows: repeat(auto-fill, auto-fill);
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
.sheet-indented textarea {
|
|
height: 18px;
|
|
display: inline-block;
|
|
}
|
|
.sheet-fixedwidthlabel{
|
|
float: left;
|
|
width: 100px;
|
|
margin-top: 5px;
|
|
}
|
|
.sheet-fixedwidthlabelnarrow {
|
|
float: left;
|
|
width: 60px;
|
|
margin-top: 5px;
|
|
}
|
|
.sheet-fixedwidthlabelverynarrow {
|
|
float: left;
|
|
width: 30px;
|
|
margin-top: 5px;
|
|
}
|
|
.sheet-largeInput {
|
|
width: 298px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.sheet-regularInput {
|
|
width: 250px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.sheet-smallInput {
|
|
width: 100px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.sheet-mediumPlusInput {
|
|
width: 120px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.sheet-regularMinusInput {
|
|
width: 175px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.sheet-mediumInput {
|
|
width: 75px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.sheet-mediumInputRight {
|
|
width: 75px;
|
|
margin-bottom: 0px;
|
|
text-align: right;
|
|
}
|
|
.sheet-reallySmallInput {
|
|
width: 55px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.sheet-reallySmallInputRight {
|
|
width: 55px;
|
|
margin-bottom: 0px;
|
|
text-align: right;
|
|
}
|
|
.sheet-tinyInput {
|
|
width: 32px;
|
|
margin-bottom: 0px;
|
|
text-align: right;
|
|
}
|
|
.sheet-teenyInput {
|
|
width: 9px;
|
|
margin-bottom: 0px;
|
|
text-align: right;
|
|
border: 0px;
|
|
padding: 0px;
|
|
margin: 1px;
|
|
margin-left: 6px;
|
|
}
|
|
.sheet-spacer {
|
|
margin-right: 15px;
|
|
margin-left: 15px
|
|
}
|
|
.sheet-tinyText {
|
|
font-size: 8px;
|
|
}
|
|
.sheet-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-select-standard{
|
|
margin-bottom: 0px;
|
|
border-top: none;
|
|
border-left: none;
|
|
border-right: none;
|
|
width: 208px;
|
|
}
|
|
|
|
.sheet-checkbox-standard {
|
|
margin-top: 8px;
|
|
}
|
|
.sheet-sub-section {
|
|
margin-right: 30px;
|
|
margin-top: 20px;
|
|
margin-bottom: 4px;
|
|
border: 1px solid;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.sheet-readonly {
|
|
background-color: lightgray;
|
|
}
|
|
|
|
.sheet-moveicon {
|
|
width: 64px;
|
|
margin: 0 auto;
|
|
display: block;
|
|
}
|
|
|
|
.sheet-two-column13{
|
|
display: grid;
|
|
grid-column-gap: 1rem;
|
|
grid-row-gap: 0px ;
|
|
grid-template-columns: 210px *;
|
|
grid-template-areas: "tcleft tcright";
|
|
grid-template-rows: repeat(auto-fill, auto-fill);
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.sheet-biggroup {
|
|
grid-row: 1 / span 9;
|
|
}
|
|
|
|
.sheet-biggroup > div {
|
|
margin-bottom: 20px;
|
|
margin-left: 15px;
|
|
float: left;
|
|
}
|
|
.sheet-encumberancelevels {
|
|
grid-row: 11 / span 2;
|
|
}
|
|
.sheet-encumberancelevels > div {
|
|
margin-bottom: 5px;
|
|
margin-left: 10px;
|
|
float: left;
|
|
}
|
|
|
|
.sheet-boxed {
|
|
border: 1px solid;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Stuff for the stats page */
|
|
.sheet-attributebox {
|
|
padding-top: 4px;
|
|
padding-bottom: 7px;
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
border-right: none;
|
|
|
|
}
|
|
|
|
.sheet-attributebox p {
|
|
font-size: 8px;
|
|
display: inline-block;
|
|
line-height: 10px;
|
|
margin: 0px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
width: 30px;
|
|
line-break: loose;
|
|
}
|
|
|
|
.sheet-textareafix {
|
|
padding-top: 1px;
|
|
padding-bottom: 1px;
|
|
margin-bottom: -11px;
|
|
height: 24px;
|
|
width: 298px;
|
|
line-height: 0.9em;
|
|
font-size: 10px;
|
|
border: 1px solid;
|
|
border-radius: 2px;
|
|
resize: none;
|
|
background-color: lightgray;
|
|
}
|
|
|
|
.sheet-textareaenterable {
|
|
width: 90%;
|
|
background-color: white;
|
|
border: none;
|
|
}
|
|
|
|
input:read-only {
|
|
background-color: lightgray;
|
|
}
|
|
|
|
.sheet-three-columnX{
|
|
display: grid;
|
|
grid-column-gap: 1rem;
|
|
grid-row-gap: 0px ;
|
|
grid-template-columns: 210px 100px auto;
|
|
grid-template-areas: "tcleft tccenter tcright";
|
|
grid-template-rows: repeat(auto-fill, auto-fill);
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-container {
|
|
background-color: linen ;
|
|
color: #000;
|
|
padding: 2px;
|
|
border-radius: 10px;
|
|
border-color: black;
|
|
border: 2px solid #000;
|
|
}
|
|
.sheet-rolltemplate-header {
|
|
border-bottom: 1px solid black;
|
|
font-size: larger;
|
|
text-align: center;
|
|
}
|
|
.sheet-rolltemplate-rowhead {
|
|
width: 75px;
|
|
text-align: left;
|
|
display: inline-block;
|
|
}
|
|
.sheet-rolltemplate-item {
|
|
text-align: right;
|
|
display: inline-block;
|
|
width: 75px;
|
|
}
|
|
.sheet-rolltemplate-result {
|
|
font-size: larger;
|
|
text-align: center;
|
|
}
|
|
.sheet-rolltemplate-fail {
|
|
background-color: pink;
|
|
}
|
|
.sheet-rolltemplate-succeed {
|
|
background-color: palegreen;
|
|
}
|
|
|
|
.sheet-melee-weapons{
|
|
display: inline-table;
|
|
grid-column-gap: 0;
|
|
grid-row-gap: 0px ;
|
|
grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
|
|
grid-template-areas: "mwitem mwsize mwtype mwspeed mwskill mwattrnd mwinitmod mwplushit mwplusdam mwdamt mwdams mwdamm mwdaml mwdamh mwdamg";
|
|
/* mwnotes"; */
|
|
grid-template-rows: repeat(auto-fill, auto-fill);
|
|
padding: 0px;
|
|
margin: 0px;
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-missile-weapons{
|
|
display: inline-table;
|
|
grid-column-gap: 0;
|
|
grid-row-gap: 0px ;
|
|
grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
|
|
grid-template-areas: "mwitem mwsize mwtype mwrof mwskill mwranges mwrangem mwrangel mwplushit mwplusdam mwdamt mwdams mwdamm mwdaml mwdamh mwdamg";
|
|
grid-template-rows: repeat(auto-fill, auto-fill);
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.sheet-melee-weapons div {
|
|
float: left;
|
|
}
|
|
|
|
.sheet-melee-weapons label {
|
|
font-size: smaller;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-sub-section select {
|
|
height: 27px;
|
|
}
|
|
|
|
.repcontrol
|
|
{
|
|
width: fit-content;
|
|
}
|
|
|
|
.sheet-headingitem {
|
|
display: inline-block;
|
|
width: 100px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.sheet-heading {
|
|
font-weight: bold;
|
|
text-align: center;
|
|
display: inline-block;
|
|
}
|
|
|
|
.sheet-entry2Line {
|
|
height: 50px;
|
|
}
|
|
|
|
.sheet-entrywDice {
|
|
height: 60px;
|
|
}
|
|
|
|
.charsheet hr {
|
|
margin: 5px;
|
|
border-color: black;
|
|
}
|
|
|
|
.charsheet label {
|
|
font-weight: unset;
|
|
font-size: 1em;
|
|
padding: 0px;
|
|
}
|
|
|
|
.sheet-spell-by-level{
|
|
display: inline-grid;
|
|
grid-column-gap: 1;
|
|
grid-row-gap: 1px ;
|
|
grid-template-columns: 17% repeat(10,auto) 20% 7%;
|
|
grid-template-areas: "tcleft l0 l1 l2 l3 l4 l5 l6 l7 l8 l9 option optionValue";
|
|
padding: 0px;
|
|
padding-left: 5px;
|
|
margin: 0px;
|
|
border: black;
|
|
}
|
|
|
|
.sheet-spell-grid {
|
|
display: grid;
|
|
grid-column-gap: 1;
|
|
grid-row-gap: 1px ;
|
|
grid-template-columns: 75% 25%;
|
|
grid-template-areas: "spellleft spellright";
|
|
padding: 0px;
|
|
padding-left: 5px;
|
|
margin: 0px;
|
|
border: black 1px;
|
|
}
|
|
.sheet-spellleft {
|
|
grid-area: spellleft;
|
|
}
|
|
.sheet-spellright {
|
|
grid-area: spellright;
|
|
}
|
|
.sheet-spell-fail-grid {
|
|
display: grid;
|
|
grid-column-gap: 1;
|
|
grid-row-gap: 1px ;
|
|
grid-template-columns: auto 25%;
|
|
grid-template-areas: "tcleft tcright";
|
|
padding: 0px;
|
|
padding-left: 5px;
|
|
margin: 0px;
|
|
border: black 1px;
|
|
}
|
|
|
|
.sheet-totalrow {
|
|
border-top: 2px solid black;
|
|
}
|
|
|
|
.sheet-clericspell-by-level{
|
|
display: grid;
|
|
grid-column-gap: 1;
|
|
grid-row-gap: 1px ;
|
|
grid-template-columns: 17% repeat(9,auto) 20% 7%;
|
|
grid-template-areas: "tcleft l1 l2 l3 l4 l5 l6 l7 option optionValue";
|
|
padding: 0px;
|
|
padding-left: 5px;
|
|
margin: 0px;
|
|
border: black;
|
|
}
|
|
|
|
.sheet-thief-grid {
|
|
display: grid;
|
|
grid-column-gap: 1;
|
|
grid-row-gap: 1px ;
|
|
grid-template-columns: 20% repeat(8,50px);
|
|
grid-template-areas: "thiefskill thieftotal base allocated racial dexadjust adjust other";
|
|
padding: 0px;
|
|
padding-left: 5px;
|
|
margin: 0px;
|
|
border: black 1px;
|
|
}
|
|
|
|
.sheet-backgroundlabel {
|
|
width: 80px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.sheet-backgroundinput {
|
|
width: 80px;
|
|
}
|
|
|
|
.sheet-level-grid {
|
|
display: grid;
|
|
grid-column-gap: 1;
|
|
grid-row-gap: 1px ;
|
|
grid-template-columns: repeat(auto-fill, minmax(32px, 32px));
|
|
padding: 0px;
|
|
padding-left: 5px;
|
|
margin: 0px;
|
|
border: black 1px;
|
|
}
|
|
|
|
.sheet-level-gridcol {
|
|
display: grid;
|
|
grid-row-gap: 1px ;
|
|
grid-template-columns: 32px;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
border: black 1px;
|
|
}
|
|
|
|
.sheet-level-gridcol div {
|
|
width: 32px;
|
|
}
|
|
|
|
.sheet-level-gridcol input {
|
|
width: 32px;
|
|
height: 24px;
|
|
}
|
|
|
|
/********************************************************************/
|
|
|