343 lines
8.9 KiB
CSS
343 lines
8.9 KiB
CSS
|
|
@import url('https://fonts.googleapis.com/css?family=Blinker|Bangers');
|
|
|
|
/* ---------------- stats section --------------*/
|
|
input[type=number].sheet-stat {
|
|
width: 50px !important;
|
|
border: 1px solid #000000;
|
|
font-family: Bangers;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
input[type=text].sheet-stat-half { width: 25px; border: 1px solid #000000;}
|
|
input[type=text].sheet-stat-quarter { width: 25px; border: 1px solid #000000;}
|
|
|
|
.sheet-half { justify-self: end; align-self: start; font-family: Blinker; font-size: 10px;}
|
|
.sheet-quarter { justify-self: start; align-self: start; font-family: Blinker; font-size: 10px;}
|
|
|
|
.sheet-stats-grid {
|
|
grid-area: stats;
|
|
display: grid;
|
|
border-top: 4px solid #000000;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
grid-template-rows: 1fr;
|
|
grid-template-areas: "str for agi int ins cha fs bs";
|
|
}
|
|
|
|
.sheet-stat {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: auto;
|
|
justify-items: center;
|
|
align-items: end;
|
|
|
|
}
|
|
|
|
.sheet-stat-labels { justify-self: stretch; }
|
|
|
|
.sheet-str {
|
|
grid-area: str;
|
|
grid-template-areas: "str-labels str-labels"
|
|
"str-input str-input"
|
|
"str-h str-q"
|
|
"str-h-label str-q-label";
|
|
}
|
|
|
|
.sheet-for {
|
|
grid-area: for;
|
|
grid-template-areas: "for-labels for-labels"
|
|
"for-input for-input"
|
|
"for-h for-q"
|
|
"for-h-label for-q-label";
|
|
}
|
|
|
|
.sheet-agi {
|
|
grid-area: agi;
|
|
grid-template-areas: "agi-labels agi-labels"
|
|
"agi-input agi-input"
|
|
"agi-h agi-q"
|
|
"agi-h-label agi-q-label";
|
|
}
|
|
|
|
.sheet-int {
|
|
grid-area: int;
|
|
grid-template-areas: "int-labels int-labels"
|
|
"int-input int-input"
|
|
"int-h int-q"
|
|
"int-h-label int-q-label";
|
|
}
|
|
|
|
.sheet-ins {
|
|
grid-area: ins;
|
|
grid-template-areas: "ins-labels ins-labels"
|
|
"ins-input ins-input"
|
|
"ins-h ins-q"
|
|
"ins-h-label ins-q-label";
|
|
}
|
|
|
|
.sheet-cha {
|
|
grid-area: cha;
|
|
grid-template-areas: "cha-labels cha-labels"
|
|
"cha-input cha-input"
|
|
"cha-h cha-q"
|
|
"cha-h-label cha-q-label";
|
|
}
|
|
|
|
.sheet-fs {
|
|
grid-area: fs;
|
|
grid-template-areas: "fs-labels fs-labels"
|
|
"fs-input fs-input"
|
|
"fs-h fs-q"
|
|
"fs-h-label fs-q-label";
|
|
}
|
|
|
|
.sheet-bs {
|
|
grid-area: bs;
|
|
grid-template-areas: "bs-labels bs-labels"
|
|
"bs-input bs-input"
|
|
"bs-h bs-q"
|
|
"bs-h-label bs-q-label";
|
|
}
|
|
|
|
/* ---------------- character section --------------*/
|
|
.sheet-character label {
|
|
border-top-style: double;
|
|
border-width: 4px;
|
|
}
|
|
|
|
.sheet-data-entry {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.sheet-logo{
|
|
grid-area: logo;
|
|
align-self: center;
|
|
}
|
|
|
|
/*----------------- GENERAL CSS ------------------*/
|
|
|
|
textarea {
|
|
width: 90%;
|
|
height: 85%;
|
|
}
|
|
|
|
/* Chrome, Safari, Edge, Opera */
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Firefox */
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
input[type=text] {
|
|
font-family: Bangers;
|
|
font-size: 18px;
|
|
width: 100%;
|
|
}
|
|
|
|
select {
|
|
width: 100%;
|
|
align-self: end;
|
|
font-family: Bangers;
|
|
font-size: 18px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
label {
|
|
font-family: 'Blinker';
|
|
font-size: 12px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
.sheet-banner {
|
|
font-family: 'Bangers';
|
|
font-size: 16px;
|
|
text-align: center;
|
|
background-color: #000000; color: #FFFFFF;
|
|
}
|
|
|
|
.sheet-code {
|
|
font-family: 'Bangers';
|
|
font-size: 14px;
|
|
text-align: center;
|
|
background-color: #000000; color: #FFFFFF;
|
|
}
|
|
|
|
.sheet-section {
|
|
padding: 5px;
|
|
/*border-style: solid;*/
|
|
}
|
|
|
|
.sheet-flex-col {
|
|
display: flex;
|
|
flex-flow: col wrap;
|
|
/*justify-content: flex-start;*/
|
|
}
|
|
|
|
.sheet-flex-center {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/*------------- Top Section-specific CSS -------------*/
|
|
|
|
.sheet-main {
|
|
display: grid;
|
|
width: 900px;
|
|
height: 900px;
|
|
font-family: 'Bangers
|
|
background: url('https://raw.githubusercontent.com/dtsm12/roll20-character-sheets/Maximum-Apocalypse-v1/Maximum%20Apocalypse/background.png');
|
|
grid-template-columns: 7fr 8fr 2fr 4fr;
|
|
grid-template-rows: 150px 1fr 3fr 2fr 2fr 3fr 1fr;
|
|
grid-template-areas:"character character character character"
|
|
"stats stats stats stats"
|
|
"skills skills skills skills"
|
|
"sp-stats sp-stats sp-stats sp-stats"
|
|
"defense attacks attacks attacks"
|
|
"gear abilities cp resolve-infection"
|
|
"gear build-encum cp experience";
|
|
}
|
|
|
|
.sheet-character {
|
|
grid-area: character;
|
|
display: grid;
|
|
justify-content: start;
|
|
align-content: end;
|
|
border: 4px solid #000000;
|
|
grid-column-gap: 5px;
|
|
grid-template-columns: 2fr 2fr 1fr 2fr 2fr;
|
|
grid-template-rows: 5fr 1fr 5fr 1fr;
|
|
grid-template-areas:"character-name-input character-name-input logo player-name-input player-name-input"
|
|
"character-name-label character-name-label logo player-name-label player-name-label"
|
|
"archetype-primary-input archetype-secondary-input logo apocalypse-input age-input"
|
|
"archetype-primary-label archetype-secondary-label logo apocalypse-label age-label";
|
|
|
|
}
|
|
|
|
|
|
/* ------------------- SIMPLE GRID AREAS ---------------------*/
|
|
.sheet-skills {
|
|
grid-area: skills;
|
|
background-color: brown;
|
|
}
|
|
|
|
.sheet-sp-stats {
|
|
grid-area: sp-stats;
|
|
background-color: coral;
|
|
}
|
|
|
|
.sheet-defense {
|
|
grid-area: defense;
|
|
background-color: green;
|
|
}
|
|
|
|
.sheet-attacks {
|
|
grid-area: attacks;
|
|
background-color: grey;
|
|
}
|
|
|
|
.sheet-gear {
|
|
grid-area:gear;
|
|
background-color: chocolate;
|
|
}
|
|
|
|
.sheet-abilities {
|
|
grid-area: abilities;
|
|
background-color: red;
|
|
}
|
|
|
|
.sheet-cp {
|
|
grid-area: cp;
|
|
background-color: yellow;
|
|
}
|
|
|
|
.sheet-resolve-infection {
|
|
grid-area: resolve-infection;
|
|
background-color: pink;
|
|
}
|
|
|
|
.sheet-build-encum {
|
|
grid-area: build-encum;
|
|
background-color: purple;
|
|
}
|
|
|
|
.sheet-experience {
|
|
grid-area: experience;
|
|
background-color: green;
|
|
}
|
|
|
|
.sheet-character-name-input { grid-area: character-name-input;}
|
|
.sheet-character-name-label { grid-area: character-name-label;}
|
|
.sheet-player-name-input { grid-area: player-name-input;}
|
|
.sheet-player-name-label { grid-area: player-name-label;}
|
|
.sheet-archetype-primary-input { grid-area: archetype-primary-input;}
|
|
.sheet-archetype-primary-label { grid-area: archetype-primary-label;}
|
|
.sheet-archetype-secondary-input { grid-area: archetype-secondary-input;}
|
|
.sheet-archetype-secondary-label { grid-area: archetype-secondary-label;}
|
|
.sheet-apocalypse-input { grid-area: apocalypse-input;}
|
|
.sheet-apocalypse-label { grid-area: apocalypse-label;}
|
|
.sheet-age-input { grid-area: age-input;}
|
|
.sheet-age-label { grid-area: age-label;}
|
|
|
|
.sheet-str-labels { grid-area: str-labels; }
|
|
.sheet-str-label { grid-area: str-label; }
|
|
.sheet-str-code { grid-area: str-code; }
|
|
.sheet-str-input { grid-area: str-input; }
|
|
.sheet-str-h { grid-area: str-h; }
|
|
.sheet-str-q { grid-area: str-q; }
|
|
.sheet-str-h-label { grid-area: str-h-label; }
|
|
.sheet-str-q-label { grid-area: str-q-label; }
|
|
|
|
.sheet-for-labels { grid-area: for-labels; }
|
|
.sheet-for-label { grid-area: for-label; }
|
|
.sheet-for-code { grid-area: for-code; }
|
|
.sheet-for-input { grid-area: for-input; }
|
|
.sheet-for-h { grid-area: for-h; }
|
|
.sheet-for-q { grid-area: for-q; }
|
|
|
|
.sheet-agi-labels { grid-area: agi-labels; }
|
|
.sheet-agi-label { grid-area: agi-label; }
|
|
.sheet-agi-code { grid-area: agi-code; }
|
|
.sheet-agi-input { grid-area: agi-input; }
|
|
.sheet-agi-h { grid-area: agi-h; }
|
|
.sheet-agi-q { grid-area: agi-q; }
|
|
|
|
.sheet-int-labels { grid-area: int-labels; }
|
|
.sheet-int-label { grid-area: int-label; }
|
|
.sheet-int-code { grid-area: int-code; }
|
|
.sheet-int-input { grid-area: int-input; }
|
|
.sheet-int-h { grid-area: int-h; }
|
|
.sheet-int-q { grid-area: int-q; }
|
|
|
|
.sheet-ins-labels { grid-area: ins-labels; }
|
|
.sheet-ins-label { grid-area: ins-label; }
|
|
.sheet-ins-code { grid-area: ins-code; }
|
|
.sheet-ins-input { grid-area: ins-input; }
|
|
.sheet-ins-h { grid-area: ins-h; }
|
|
.sheet-ins-q { grid-area: ins-q; }
|
|
|
|
.sheet-cha-labels { grid-area: cha-labels;}
|
|
.sheet-cha-label { grid-area: cha-label;}
|
|
.sheet-cha-code { grid-area: cha-code; }
|
|
.sheet-cha-input { grid-area: cha-input; }
|
|
.sheet-cha-h { grid-area: cha-h; }
|
|
.sheet-cha-q { grid-area: cha-q; }
|
|
|
|
.sheet-fs-labels { grid-area: fs-labels; }
|
|
.sheet-fs-label { grid-area: fs-label; }
|
|
.sheet-fs-code { grid-area: fs-code; }
|
|
.sheet-fs-input { grid-area: fs-input; }
|
|
.sheet-fs-h { grid-area: fs-h; }
|
|
.sheet-fs-q { grid-area: fs-q; }
|
|
|
|
.sheet-bs-labels { grid-area: bs-labels; }
|
|
.sheet-bs-label { grid-area: bs-label; }
|
|
.sheet-bs-code { grid-area: bs-code; }
|
|
.sheet-bs-input { grid-area: bs-input; }
|
|
.sheet-bs-h { grid-area: bs-h; }
|
|
.sheet-bs-q { grid-area: bs-q; } |