mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
480 lines
9.3 KiB
CSS
480 lines
9.3 KiB
CSS
body {
|
||
font-family: Contrail One, sans-serif;
|
||
background: #fdfdfd;
|
||
color: #333;
|
||
margin: 0;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.charsheet .sheet-core,
|
||
.charsheet .sheet-inventory,
|
||
.charsheet .sheet-magic,
|
||
.charsheet .sheet-leveling,
|
||
.charsheet .sheet-survival {
|
||
display: none;
|
||
}
|
||
|
||
/* style the active button */
|
||
.sheet-tabstoggle[value="core"] ~ div .sheet-button0 {outline: 2px solid red;}
|
||
.sheet-tabstoggle[value="inventory"] ~ div .sheet-button1 {outline: 2px solid red;}
|
||
.sheet-tabstoggle[value="leveling"] ~ div .sheet-button2 {outline: 2px solid red;}
|
||
.sheet-tabstoggle[value="magic"] ~ div .sheet-button3 {outline: 2px solid red;}
|
||
.sheet-tabstoggle[value="survival"] ~ div .sheet-button4 {outline: 2px solid red;}
|
||
|
||
/* show the selected tab */
|
||
.charsheet .sheet-tabstoggle[value="core"] ~ div.sheet-core,
|
||
.charsheet .sheet-tabstoggle[value="inventory"] ~ div.sheet-inventory,
|
||
.charsheet .sheet-tabstoggle[value="leveling"] ~ div.sheet-leveling,
|
||
.charsheet .sheet-tabstoggle[value="magic"] ~ div.sheet-magic,
|
||
.charsheet .sheet-tabstoggle[value="survival"] ~ div.sheet-survival {
|
||
display: block;
|
||
}
|
||
|
||
/* === Spell Input Format === */
|
||
|
||
.spells-inputs input {
|
||
min-width: 300 px;
|
||
width: auto;
|
||
}
|
||
|
||
/* === XP Tracker Inputs === */
|
||
input[name="attr_xp_points"],
|
||
input[name="attr_xp_spent"] {
|
||
width: 200px;
|
||
padding: 8px;
|
||
font-size: 16px;
|
||
text-align: center;
|
||
box-sizing: border-box; /* ensures padding doesn’t increase width */
|
||
}
|
||
|
||
input[name="attr_currency_amount"],
|
||
input[name="attr_radiation"] {
|
||
min-width: 200px;
|
||
padding: 8px;
|
||
font-size: 16px;
|
||
text-align: center;
|
||
box-sizing: border-box; /* ensures padding doesn’t increase width */
|
||
}
|
||
|
||
.xp-tracker {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-top: 15px;
|
||
}
|
||
.xp-tracker label {
|
||
font-weight: bold;
|
||
}
|
||
.xp-tracker input {
|
||
min-width: 200px;
|
||
text-align: center;
|
||
}
|
||
|
||
section {
|
||
margin-bottom: 30px;
|
||
border: 1px solid #aaa;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
background: #f8f8f8;
|
||
}
|
||
|
||
h2 {
|
||
margin-top: 0;
|
||
background: #ddd;
|
||
padding: 5px 10px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
h3 {
|
||
margin-top: 5;
|
||
background: #ddd;
|
||
padding: 2px 5px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
label {
|
||
display: block;
|
||
color: #000 !important;
|
||
margin: 8px 0;
|
||
}
|
||
|
||
.sheet-rolltemplate-check .sheet-template-container {
|
||
background: #222;
|
||
border: 1px solid #555;
|
||
border-radius: 5px;
|
||
color: #fff;
|
||
padding: 6px;
|
||
font-family: "Roboto", sans-serif;
|
||
}
|
||
|
||
.sheet-rolltemplate-check .sheet-template-title {
|
||
background: #444;
|
||
padding: 4px;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
border-bottom: 1px solid #666;
|
||
}
|
||
|
||
.sheet-rolltemplate-check .sheet-template-row {
|
||
margin: 4px 0;
|
||
padding: 2px 0;
|
||
}
|
||
|
||
.sheet-rolltemplate-check .sheet-template-result {
|
||
text-align: center;
|
||
font-size: 1.1em;
|
||
font-weight: bold;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.sheet-rolltemplate-check .sheet-template-result:contains("Critical Success") {
|
||
color: #2ecc71; /* green */
|
||
}
|
||
|
||
.sheet-rolltemplate-check .sheet-template-result:contains("Critical Failure") {
|
||
color: #e74c3c; /* red */
|
||
}
|
||
|
||
|
||
|
||
input[type="text"]
|
||
input[type="number"],
|
||
select,
|
||
textarea {
|
||
padding: 5px;
|
||
margin-left: 5px;
|
||
width: 200px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
select {
|
||
padding: 5px;
|
||
width: 210px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
input[name="attr_trait"],
|
||
input[name="attr_perk"],
|
||
input[name="attr_spell"] {
|
||
padding: 5px;
|
||
margin-left: 5px;
|
||
width: 200px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 4px;
|
||
}
|
||
input[name="attr_trait_desc"],
|
||
input[name="attr_perk_desc"],
|
||
input[name="attr_spell_desc"] {
|
||
padding: 5px;
|
||
margin-left: 5px;
|
||
width: 500px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
|
||
.score-grid {
|
||
display: grid;
|
||
grid-template-rows: repeat(9, 60px);
|
||
grid-auto-flow: column;
|
||
}
|
||
|
||
.skills-grid {
|
||
display: grid;
|
||
grid-template-rows: repeat(6, 1fr);
|
||
grid-auto-flow: column;
|
||
}
|
||
|
||
.survival-grid {
|
||
display: grid;
|
||
grid-template-columns: 3, 1fr;
|
||
gap: 10px;
|
||
}
|
||
|
||
/* General style for all section backgrounds */
|
||
.section {
|
||
background-size: cover; /* image covers entire section */
|
||
background-position: center; /* center image */
|
||
background-repeat: no-repeat;
|
||
background-attachment: scroll; /* change to fixed if you want parallax effect */
|
||
padding: 15px;
|
||
border-radius: 8px; /* rounded corners */
|
||
}
|
||
|
||
/* Character Info Section */
|
||
.ability-scores {
|
||
background-image: url("https://images.squarespace-cdn.com/content/67dafda29b94da2a21600bce/73e24371-bc07-4450-bec9-2cd26c999001/Abilities+sketch.png?content-type=image%2Fpng");
|
||
background-size: 900px auto; /* image covers entire section */
|
||
background-position: left;
|
||
background-repeat: no-repeat;
|
||
background-attachment: scroll; /* change to fixed if you want parallax effect */
|
||
padding: 15px;
|
||
border-radius: 8px; /* rounded corners */
|
||
}
|
||
|
||
/* Skills Section */
|
||
.section-skills {
|
||
background-image: url("path/to/skills.png");
|
||
}
|
||
|
||
/* Combat Stats Section */
|
||
.section-combat {
|
||
background-image: url("path/to/combat.png");
|
||
}
|
||
|
||
/* Items & Equipment Section */
|
||
.carry-slots {
|
||
background-image: url("https://images.squarespace-cdn.com/content/67dafda29b94da2a21600bce/8dc6399b-0d53-4e9f-aa9c-57b743d08a01/Backpack.png?content-type=image%2Fpng");
|
||
background-size: 150px;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-attachment: scroll; /* change to fixed if you want parallax effect */
|
||
padding: 10px;
|
||
border-radius: 8px; /* rounded corners */
|
||
}
|
||
|
||
/* Traits & Perks Section */
|
||
.section-traits {
|
||
background-image: url("path/to/traits.png");
|
||
}
|
||
|
||
/* Magic Section */
|
||
.section-magic {
|
||
background-image: url("path/to/magic.png");
|
||
}
|
||
|
||
.stats-grid,
|
||
.armor-grid,
|
||
.weapons-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 10px;
|
||
|
||
|
||
#traits-container, #specs-container, #boosts-container, #perks-container {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.trait-inputs input,
|
||
.spec-inputs input,
|
||
.boost-inputs input,
|
||
.perk-inputs input {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
width: auto;
|
||
}
|
||
.checkbox-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
padding-left: 10px;
|
||
}
|
||
|
||
|
||
|
||
.checkbox-group label {
|
||
font-weight: normal;
|
||
}
|
||
.score-grid > div {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.score-grid label {
|
||
width: 40px;
|
||
}
|
||
|
||
.score-grid input[type="number"] {
|
||
width: 60px;
|
||
}
|
||
|
||
.score-grid input[readonly] {
|
||
background: #eee;
|
||
width: 50px;
|
||
text-align: center;
|
||
}
|
||
#bonus-wounds, #total-wounds {
|
||
width: 80px;
|
||
text-align: center;
|
||
}
|
||
|
||
.field-entry {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 5px;
|
||
}
|
||
.field-entry input {
|
||
flex: 1;
|
||
margin-right: 0.5em;
|
||
}
|
||
.remove-button {
|
||
background: #e74c3c;
|
||
color: white;
|
||
border: none;
|
||
padding: 0 0.5em;
|
||
cursor: pointer;
|
||
border-radius: 3px;
|
||
}
|
||
.remove-button:hover {
|
||
background: #c0392b;
|
||
}
|
||
|
||
.armor-entry {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
}
|
||
.armor-entry input, .armor-entry select {
|
||
min-width: 100px;
|
||
}
|
||
.currency-entry {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.currency-entry input {
|
||
width: 80px;
|
||
}
|
||
.currency-entry select {
|
||
min-width: 100px;
|
||
}
|
||
.fatigue-status {
|
||
margin-left: 10px;
|
||
font-weight: bold;
|
||
color: #b03a2e; /* deep red */
|
||
}
|
||
|
||
.wound-tracker {
|
||
position: relative;
|
||
width: 300px;
|
||
margin: auto;
|
||
}
|
||
.wound-silhouette {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.wound-zone {
|
||
position: absolute;
|
||
display: flex;
|
||
gap: 0px;
|
||
}
|
||
|
||
.wound-boxes {
|
||
display: flex;
|
||
gap: 1px; /* Reduce spacing between checkboxes */
|
||
justify-content: center;
|
||
}
|
||
|
||
.wound-box {
|
||
width: 15px;
|
||
height: 15px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Custom placement for each region */
|
||
.zone-head { top: 18px; left: 192px; }
|
||
.zone-chest { top: 62px; left: 10px; }
|
||
.zone-larm { top: 122px; left: -5px; }
|
||
.zone-rarm { top: 80px; left: 210px; }
|
||
.zone-lleg { top: 205px; left: 15px; }
|
||
.zone-rleg { top: 205px; left: 190px; }
|
||
|
||
.wound-box:checked {
|
||
background-color: red;
|
||
accent-color: crimson;
|
||
}
|
||
|
||
.wound-zone {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
font-size: 0.75rem;
|
||
font-weight: bold;
|
||
color: #333;
|
||
text-align: center;
|
||
}
|
||
/* Status text */
|
||
.wound-status {
|
||
font-weight: bold;
|
||
min-width: 100px; /* keep labels aligned */
|
||
text-align: left;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.rest-actions {
|
||
float: right;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.big-action-btn {
|
||
padding: 12px 20px;
|
||
font-size: 1.1rem;
|
||
font-weight: bold;
|
||
background-color: #ccc;
|
||
border: 2px solid #444;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
.big-action-btn:hover {
|
||
background-color: #ddd;
|
||
}
|
||
|
||
.sheet-rolltemplate-check .sheet-template-container {
|
||
border: 2px solid #444;
|
||
background: #fff;
|
||
padding: 6px;
|
||
font-family: sans-serif;
|
||
}
|
||
.sheet-rolltemplate-check .sheet-template-title {
|
||
background: #333;
|
||
color: #fff;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
padding: 3px;
|
||
}
|
||
.sheet-rolltemplate-check .sheet-template-row {
|
||
margin: 4px 0;
|
||
}
|
||
|
||
.skills-align,
|
||
.stats-align {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 10px;
|
||
}
|
||
|
||
.skills-align > div {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.skills-align label {
|
||
flex: 1;
|
||
text-align: left;
|
||
padding-right: 10px;
|
||
}
|
||
|
||
.skills-align input[type="number"] {
|
||
text-align: right;
|
||
width: 70px;
|
||
}
|
||
|
||
|