diff --git a/Jester's Gambit/Jester's Gambit.css b/Jester's Gambit/Jester's Gambit.css new file mode 100644 index 000000000000..de19ab4fb959 --- /dev/null +++ b/Jester's Gambit/Jester's Gambit.css @@ -0,0 +1,577 @@ +.sheet-jg { + --jg-bg: #17121c; + --jg-panel: #241b2b; + --jg-panel-2: #2e2437; + --jg-panel-3: #1b1421; + --jg-ink: #f4ead7; + --jg-muted: #cdbb9f; + --jg-gold: #d8a844; + --jg-red: #8f2635; + --jg-border: #6c4a2f; + background: var(--jg-bg); + color: var(--jg-ink); + font-family: Georgia, "Times New Roman", serif; + padding: 12px; + border: 2px solid var(--jg-gold); + box-sizing: border-box; +} + +.sheet-jg * { + box-sizing: border-box; +} + +.sheet-jg h1, +.sheet-jg h2, +.sheet-jg h3 { + margin: 0; + color: var(--jg-gold); + letter-spacing: .04em; +} + +.sheet-jg h1 { + font-size: 28px; + text-transform: uppercase; +} + +.sheet-jg h2 { + font-size: 18px; + border-bottom: 1px solid var(--jg-border); + padding-bottom: 4px; + margin-bottom: 10px; +} + +.sheet-jg p, +.sheet-small-note { + margin: 4px 0 8px; + color: var(--jg-muted); + font-style: italic; +} + +.sheet-header { + display: flex; + justify-content: space-between; + gap: 12px; + align-items: center; + background: linear-gradient(135deg, #281d30, #161019); + border: 1px solid var(--jg-border); + padding: 12px; + margin-bottom: 10px; +} + +.sheet-roll-mode-panel { + display: grid; + grid-template-columns: minmax(120px, auto) minmax(450px, auto) minmax(180px, 1fr); + gap: 8px; + align-items: center; + background: #1b1421; + border: 1px solid var(--jg-border); + padding: 8px; + margin-bottom: 10px; +} + +.sheet-roll-mode-label { + color: var(--jg-gold); + font-weight: bold; + text-transform: uppercase; + letter-spacing: .06em; + font-size: 12px; +} + +.sheet-roll-mode-buttons { + display: grid; + grid-template-columns: repeat(3, minmax(140px, 1fr)); + gap: 6px; +} + +.sheet-roll-mode-buttons button { + background: #3a2a43; + border: 1px solid var(--jg-gold); + color: var(--jg-ink); + padding: 8px 12px; + cursor: pointer; + text-align: center; + min-width: 140px; + white-space: nowrap; + font-weight: bold; + border-radius: 2px; + font-family: Georgia, "Times New Roman", serif; +} + +.sheet-roll-mode-note { + color: var(--jg-muted); + font-size: 11px; + font-style: italic; + text-align: right; +} + +.sheet-mode-tabs, +.sheet-tabbar { + display: flex; + gap: 6px; + flex-wrap: wrap; +} + +.sheet-mode-tabs button, +.sheet-tabbar button { + background: #3a2a43; + border: 1px solid var(--jg-gold); + color: var(--jg-ink); + padding: 8px 12px; + cursor: pointer; + text-align: center; + min-width: 76px; + font-weight: bold; + border-radius: 2px; + font-family: Georgia, "Times New Roman", serif; +} + +.sheet-tabbar { + background: #1b1421; + border: 1px solid var(--jg-border); + padding: 8px; + margin-bottom: 10px; +} + +.sheet-sheet-mode[value="player"] ~ .sheet-header button[name="act_set_player"], +.sheet-sheet-mode[value="npc"] ~ .sheet-header button[name="act_set_npc"], +.sheet-roll-mode[value="advantage"] ~ .sheet-roll-mode-panel button[name="act_set_advantage"], +.sheet-roll-mode[value="normal"] ~ .sheet-roll-mode-panel button[name="act_set_normal"], +.sheet-roll-mode[value="disadvantage"] ~ .sheet-roll-mode-panel button[name="act_set_disadvantage"], +.sheet-player-tab[value="statistics"] ~ .sheet-tabbar button[name="act_ptab_statistics"], +.sheet-player-tab[value="overview"] ~ .sheet-tabbar button[name="act_ptab_overview"], +.sheet-player-tab[value="combat"] ~ .sheet-tabbar button[name="act_ptab_combat"], +.sheet-player-tab[value="magic"] ~ .sheet-tabbar button[name="act_ptab_magic"], +.sheet-player-tab[value="inventory"] ~ .sheet-tabbar button[name="act_ptab_inventory"], +.sheet-player-tab[value="notes"] ~ .sheet-tabbar button[name="act_ptab_notes"], +.sheet-npc-tab[value="statistics"] ~ .sheet-tabbar button[name="act_ntab_statistics"], +.sheet-npc-tab[value="overview"] ~ .sheet-tabbar button[name="act_ntab_overview"], +.sheet-npc-tab[value="combat"] ~ .sheet-tabbar button[name="act_ntab_combat"], +.sheet-npc-tab[value="loot"] ~ .sheet-tabbar button[name="act_ntab_loot"] { + background: var(--jg-gold); + color: #181018; +} + +.sheet-player-pane, +.sheet-npc-pane, +.sheet-player-page, +.sheet-npc-page { + display: none; +} + +.sheet-sheet-mode[value="player"] ~ .sheet-body .sheet-player-pane, +.sheet-sheet-mode[value="npc"] ~ .sheet-body .sheet-npc-pane { + display: block; +} + +.sheet-player-tab[value="statistics"] ~ .sheet-player-tabs-content .sheet-player-statistics, +.sheet-player-tab[value="overview"] ~ .sheet-player-tabs-content .sheet-player-overview, +.sheet-player-tab[value="combat"] ~ .sheet-player-tabs-content .sheet-player-combat, +.sheet-player-tab[value="magic"] ~ .sheet-player-tabs-content .sheet-player-magic, +.sheet-player-tab[value="inventory"] ~ .sheet-player-tabs-content .sheet-player-inventory, +.sheet-player-tab[value="notes"] ~ .sheet-player-tabs-content .sheet-player-notes, +.sheet-npc-tab[value="statistics"] ~ .sheet-npc-tabs-content .sheet-npc-statistics, +.sheet-npc-tab[value="overview"] ~ .sheet-npc-tabs-content .sheet-npc-overview, +.sheet-npc-tab[value="combat"] ~ .sheet-npc-tabs-content .sheet-npc-combat, +.sheet-npc-tab[value="loot"] ~ .sheet-npc-tabs-content .sheet-npc-loot { + display: block; +} + +.sheet-panel { + background: var(--jg-panel); + border: 1px solid var(--jg-border); + padding: 10px; + margin-bottom: 10px; + box-shadow: inset 0 0 0 1px rgba(216, 168, 68, .08); +} + +.sheet-identity-panel { + background: var(--jg-panel-2); +} + +.sheet-grid { + display: grid; + gap: 8px; +} + +.sheet-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } +.sheet-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } +.sheet-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } +.sheet-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } + +.sheet-identity-grid { + grid-template-columns: minmax(180px, 1.15fr) minmax(160px, 1fr) minmax(220px, .9fr) minmax(240px, 1.35fr); + align-items: end; +} + +.sheet-gold-field input { + min-height: 32px; + min-width: 200px; + font-size: 16px; + font-weight: bold; +} + +.sheet-secondary-row { + margin-top: 8px; +} + +.sheet-jg label { + display: flex; + flex-direction: column; + gap: 3px; + color: var(--jg-muted); + font-size: 12px; + font-weight: bold; +} + +.sheet-jg input, +.sheet-jg select, +.sheet-jg textarea { + width: 100%; + background: #f7f0df; + color: #1b111c; + border: 1px solid #6c4a2f; + border-radius: 2px; + padding: 5px; + font-family: Arial, sans-serif; + font-size: 13px; +} + +.sheet-jg input[readonly] { + background: #ded2bc; + color: #211720; + font-weight: bold; +} + +.sheet-jg textarea { + min-height: 70px; + resize: vertical; +} + +.sheet-stats-grid { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 8px; +} + +.sheet-stat-card { + background: var(--jg-panel-3); + border: 1px solid var(--jg-border); + padding: 8px; + text-align: center; +} + +.sheet-stat-card label { + color: var(--jg-gold); + text-align: center; +} + +.sheet-stat-card input { + text-align: center; + font-size: 18px; + font-weight: bold; +} + +.sheet-jg button[type="roll"] { + background: var(--jg-red); + border: 1px solid var(--jg-gold); + color: var(--jg-ink); + border-radius: 2px; + padding: 5px 8px; + margin-top: 6px; + font-weight: bold; + cursor: pointer; + width: 100%; + font-family: Georgia, "Times New Roman", serif; +} + +.sheet-jg button[type="roll"]::before { + content: " "; +} + +.sheet-jg button[type="roll"]:hover, +.sheet-mode-tabs button:hover, +.sheet-tabbar button:hover, +.sheet-roll-mode-buttons button:hover, +.repcontrol button:hover { + background: #b33143; + color: var(--jg-ink); +} + +.sheet-check-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 6px; +} + +.sheet-check-grid label { + flex-direction: row; + align-items: center; + background: var(--jg-panel-3); + border: 1px solid rgba(216,168,68,.25); + padding: 5px; + color: var(--jg-ink); + font-size: 12px; +} + +.sheet-check-grid input { + width: auto; +} + +.repcontainer .repitem, +.sheet-repeating-card { + background: var(--jg-panel-3); + border: 1px solid rgba(216, 168, 68, .35); + padding: 8px 8px 8px 30px; + margin: 6px 0; + position: relative; +} + +.sheet-collapse-toggle { + position: absolute; + left: 8px; + top: 13px; + width: 16px !important; + height: 16px; + cursor: pointer; +} + +.sheet-collapse-toggle::after { + content: "Collapse"; +} + +.sheet-collapse-toggle:checked ~ .sheet-card-body { + display: none; +} + +.sheet-collapse-toggle:checked ~ .sheet-repeat-head { + opacity: .92; +} + +.sheet-repeat-head { + display: grid; + grid-template-columns: minmax(160px, 2fr) minmax(80px, 1fr) minmax(90px, 1fr) minmax(80px, .7fr); + gap: 8px; + align-items: end; + margin-bottom: 8px; +} + +.sheet-repeat-head.sheet-repeat-head-5 { + grid-template-columns: minmax(150px, 2fr) minmax(112px, 1fr) minmax(82px, .8fr) minmax(92px, 1fr) minmax(82px, .7fr); +} + +.sheet-repeat-name input { + font-weight: bold; +} + +.sheet-card-body { + border-top: 1px solid rgba(216,168,68,.25); + padding-top: 8px; +} + +.repcontrol { + margin-top: 6px; +} + +.repcontrol button { + background: #3a2a43; + color: var(--jg-ink); + border: 1px solid var(--jg-gold); + padding: 4px 8px; + font-family: Georgia, "Times New Roman", serif; +} + +/* Chat roll card --------------------------------------------------------- + Roll20 roll templates must be styled with the sheet-rolltemplate name. + These rules make attack, damage, spell, ability, and check rolls show as + compact Jester's Gambit cards instead of a plain chat text list. */ +.sheet-rolltemplate-jg .sheet-jg-roll-card { + border: 2px solid #d8a844; + background: #241b2b; + color: #f4ead7; + font-family: Georgia, "Times New Roman", serif; + min-width: 235px; + max-width: 310px; + overflow: hidden; + border-radius: 6px; + box-shadow: 0 2px 6px rgba(0, 0, 0, .45); +} + +.sheet-rolltemplate-jg .sheet-jg-roll-title { + background: linear-gradient(135deg, #8f2635, #4a1c2a); + color: #f4ead7; + font-weight: bold; + padding: 8px 9px; + text-align: center; + text-transform: uppercase; + letter-spacing: .04em; + border-bottom: 1px solid #d8a844; +} + +.sheet-rolltemplate-jg .sheet-jg-roll-results { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 6px; + padding: 8px; + background: #17121c; +} + +.sheet-rolltemplate-jg .sheet-jg-roll-result-box { + border: 1px solid rgba(216,168,68,.6); + background: #2e2437; + text-align: center; + padding: 5px; + border-radius: 4px; +} + +.sheet-rolltemplate-jg .sheet-jg-roll-damage-box { + background: #331e26; +} + +.sheet-rolltemplate-jg .sheet-jg-roll-label { + color: #cdbb9f; + font-size: 10px; + text-transform: uppercase; + letter-spacing: .08em; + margin-bottom: 2px; +} + +.sheet-rolltemplate-jg .sheet-jg-roll-value { + color: #d8a844; + font-size: 18px; + font-weight: bold; + line-height: 1.2; +} + +.sheet-rolltemplate-jg .sheet-jg-roll-value .inlinerollresult, +.sheet-rolltemplate-jg .sheet-jg-roll-value .inlinerollresult.fullcrit, +.sheet-rolltemplate-jg .sheet-jg-roll-value .inlinerollresult.fullfail, +.sheet-rolltemplate-jg .sheet-jg-roll-value .inlinerollresult.importantroll { + background: #f4ead7; + border: 1px solid #d8a844; + color: #17121c; + padding: 2px 6px; + border-radius: 4px; + font-weight: bold; +} + +.sheet-rolltemplate-jg .sheet-jg-roll-tags { + display: flex; + flex-wrap: wrap; + gap: 4px; + padding: 7px 8px; + border-top: 1px solid rgba(216,168,68,.35); +} + +.sheet-rolltemplate-jg .sheet-jg-roll-tags span { + background: #17121c; + border: 1px solid rgba(216,168,68,.35); + border-radius: 999px; + color: #f4ead7; + font-size: 11px; + padding: 3px 7px; +} + +.sheet-rolltemplate-jg .sheet-jg-roll-tags strong { + color: #d8a844; + font-weight: bold; +} + +.sheet-rolltemplate-jg .sheet-jg-roll-effect { + border-top: 1px solid rgba(216,168,68,.35); + padding: 7px 8px 9px; + color: #f4ead7; + white-space: pre-wrap; + background: #2a2032; +} + +.sheet-rolltemplate-jg .sheet-jg-roll-effect-title { + color: #d8a844; + font-size: 10px; + text-transform: uppercase; + letter-spacing: .08em; + margin-bottom: 3px; + font-weight: bold; +} + +@media (max-width: 900px) { + .sheet-grid-4, + .sheet-grid-5, + .sheet-stats-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .sheet-grid-3, + .sheet-check-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .sheet-repeat-head, + .sheet-repeat-head.sheet-repeat-head-5 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 600px) { + .sheet-header, + .sheet-roll-mode-panel { + grid-template-columns: 1fr; + flex-direction: column; + align-items: stretch; + } + .sheet-roll-mode-buttons { + grid-template-columns: repeat(3, minmax(140px, 1fr)); + } + .sheet-roll-mode-note { + text-align: left; + } + .sheet-grid-2, + .sheet-grid-3, + .sheet-grid-4, + .sheet-grid-5, + .sheet-stats-grid, + .sheet-check-grid, + .sheet-repeat-head, + .sheet-repeat-head.sheet-repeat-head-5, + .sheet-roll-mode-buttons { + grid-template-columns: 1fr; + } +} + + +/* Natural 20 / Natural 1 chat indicators ------------------------------- */ +.sheet-rolltemplate-jg .sheet-jg-roll-alert { + margin: 0 8px 8px; + border: 1px solid #d8a844; + border-radius: 4px; + padding: 6px 8px; + text-align: center; + font-family: Georgia, "Times New Roman", serif; + font-weight: bold; + letter-spacing: .03em; +} + +.sheet-rolltemplate-jg .sheet-jg-roll-alert-title { + display: block; + font-size: 15px; + text-transform: uppercase; + margin-bottom: 2px; +} + +.sheet-rolltemplate-jg .sheet-jg-roll-alert span:last-child { + display: block; + font-size: 11px; + color: #f4ead7; + text-transform: none; + letter-spacing: normal; +} + +.sheet-rolltemplate-jg .sheet-jg-roll-alert-crit { + background: linear-gradient(135deg, #6f4b14, #2d2311); + color: #ffe8a3; + box-shadow: inset 0 0 0 1px rgba(255, 232, 163, .16); +} + +.sheet-rolltemplate-jg .sheet-jg-roll-alert-fumble { + background: linear-gradient(135deg, #5d1725, #241017); + color: #ffc6ce; + border-color: #8f2635; + box-shadow: inset 0 0 0 1px rgba(255, 198, 206, .12); +} diff --git a/Jester's Gambit/Jester's Gambit.html b/Jester's Gambit/Jester's Gambit.html new file mode 100644 index 000000000000..69489a0db562 --- /dev/null +++ b/Jester's Gambit/Jester's Gambit.html @@ -0,0 +1,1119 @@ +
A Card-Driven Fantasy Roleplaying Game of Fate, Fools, and Fortune
+Player Max HP, Defense, and Max Resource are calculated from statistics, bonuses, armor, shields, and the selected Resource Stat.
+Use the small checkbox on each added row to collapse its details.
+ +Collapse rows after copying in the handout text to keep this tab compact.
+ +NPC secondary statistics are editable so the GM can quickly enter stat block values without automatic player calculations.
+