diff --git a/The Fantasy Trip/TFT.css b/The Fantasy Trip/TFT.css index c3f85a8513..9030fd15dd 100644 --- a/The Fantasy Trip/TFT.css +++ b/The Fantasy Trip/TFT.css @@ -4,8 +4,387 @@ display: none; } +.sheet-stat-label { + display: inline-block; + min-width: 1.6em; + font-weight: bold; + font-size: larger; +} + +.sheet-stat-equals, +.sheet-stat-plus { + display: inline-block; + min-width: .75em; + text-align: center; + font-weight: bold; +} +.sheet-stat-final { + display: inline-block; + vertical-align: middle; + min-width: 2em; + line-height: normal; + font-weight: bold; + text-align: center; + padding-top: .35em; + padding-bottom: .35em; + padding-left: .2em; + padding-right: .2em; + border-style: solid; + border-color: gray; + border-width: 1px; + border-radius: 3px; +} + +.sheet-expanded { + margin-left: 2.5rem; + max-width: 40rem; + width: 90% +} + +.sheet-first-word { + font-size: larger; +} + +.sheet-stat-input { + width: 3.5em; +} + +.sheet-fieldset-header span, +.sheet-label { + display: inline-block; + font-weight: bold; +} + +.sheet-expand-button, +.sheet-describe-button +{ + font-family: "Pictos"; + display: inline-block; + border-style: solid; + background-color: #F9F9F9; + height: 1.25em; + width: 1em; + border-width: 1px; + border-radius: 4px; + border-color: #BBBBBB; + text-align: center; + font-weight: bold; +} + +.sheet-expand-button:hover, +.sheet-describe-button:hover { + background-color: #EBEBEB; +} + +.sheet-expand-button:active, +.sheet-describe-button:active { + background-color: #E1E1E1; +} + +.sheet-describe-button::before { + content: "w" +} + +.sheet-expand-button::before { + content: "y" +} + +.sheet-attack-button { + display: inline-block; + border-style: solid; + background-color: #F9F9F9; + height: 1.25em; + width: 1.25em; + border-width: 1px; + border-radius: 4px; + border-color: #BBBBBB; + text-align: center; + font-weight: bold; +} + +.sheet-attack-button:hover { + background-color: #EBEBEB; +} + +.sheet-attack-button:active { + background-color: #E1E1E1; +} + +/* Fake roll button */ +.sheet-dice-button { + display: inline-block; + border-style: solid; + border-width: 1px; + border-radius: 4px; + border-color: #BBBBBB; + position:relative; + top:.17em; + text-align: center; + /* It's a fade intheinthe original */ + margin-left: .17em; + margin-right: .17em; + margin-top: 0em; + padding-left: .125em; + padding-right: .125em; + background-color: #F9F9F9; + font-weight: bold; +} + +.sheet-dice-button::before { + content: "t"; + font-family: "dicefontd20"; + font-size: 1.4em; + font-weight: normal; +} + +.sheet-dice-button:hover { + background-color: #EBEBEB; +} + +.sheet-dice-button:active { + background-color: #E1E1E1; +} + +.sheet-text-area { + resize: none; + box-sizing: border-box; + height: auto; +} + +/* Roll Templates */ + +.sheet-rolltemplate-stat-check3 .sheet-container, +.sheet-rolltemplate-stat-check4 .sheet-container, +.sheet-rolltemplate-cast-spell .sheet-container, +.sheet-rolltemplate-attack .sheet-container, +.sheet-rolltemplate-initiative .sheet-container, +.sheet-rolltemplate-description .sheet-container +{ + background-color: #ffffff; + border: 1px solid; + padding: 2px; + width: 100%; +} + +.sheet-rolltemplate-stat-check3 .sheet-container h1, +.sheet-rolltemplate-stat-check4 .sheet-container h1, +.sheet-rolltemplate-cast-spell .sheet-container h1, +.sheet-rolltemplate-attack .sheet-container h1, +.sheet-rolltemplate-initiative .sheet-container h1, +.sheet-rolltemplate-description .sheet-container h1 +{ + color: rgb(126, 45, 64); + font-size: 1.2em; + font-style: italic; + line-height: 20px; + letter-spacing: -.02em; +} + +.sheet-rolltemplate-description .sheet-container h1 +{ + font-style: normal; +} + +.sheet-rolltemplate-stat-check3 div, +.sheet-rolltemplate-stat-check4 div, +.sheet-rolltemplate-cast-spell div, +.sheet-rolltemplate-attack div, +.sheet-rolltemplate-initiative div, +.sheet-rolltemplate-description div +{ + padding: 2.5px; +}; + + +/* This is needed to make the arrows show up. Kind of weird */ +.sheet-rolltemplate-stat-check3 span, +.sheet-rolltemplate-stat-check4 span, +.sheet-rolltemplate-cast-spell span, +.sheet-rolltemplate-attack span, +.sheet-rolltemplate-initiative span, +.sheet-rolltemplate-description span +{ + color: rgb(126, 45, 64); + font-family: "Times New Roman", Times, serif; + font-size: 1.2em; + font-variant: small-caps; + line-height: 1.6em; + padding-left: 5px; + text-align: left; +} + +.sheet-rolltemplate-stat-check3 .sheet-arrow-right, +.sheet-rolltemplate-stat-check4 .sheet-arrow-right, +.sheet-rolltemplate-cast-spell .sheet-arrow-right, +.sheet-rolltemplate-attack .sheet-arrow-right, +.sheet-rolltemplate-initiative .sheet-arrow-right, +.sheet-rolltemplate-description .sheet-arrow-right +{ + border-bottom: 2px solid transparent; + border-left: 180px solid rgb(126, 45, 64); + border-top: 2px solid transparent; +} + +.sheet-rolltemplate-stat-check3 .inlinerollresult, +.sheet-rolltemplate-stat-check3 .inlinerollresult.fullcrit, +.sheet-rolltemplate-stat-check3 .inlinerollresult.fullfail, +.sheet-rolltemplate-stat-check3 .inlinerollresult.importantroll, +.sheet-rolltemplate-stat-check4 .inlinerollresult, +.sheet-rolltemplate-stat-check4 .inlinerollresult.fullcrit, +.sheet-rolltemplate-stat-check4 .inlinerollresult.fullfail, +.sheet-rolltemplate-stat-check4 .inlinerollresult.importantroll, +.sheet-rolltemplate-attack .inlinerollresult, +.sheet-rolltemplate-attack .inlinerollresult.fullcrit, +.sheet-rolltemplate-attack .inlinerollresult.fullfail, +.sheet-rolltemplate-attack .inlinerollresult.importantroll, +.sheet-rolltemplate-cast-spell .inlinerollresult, +.sheet-rolltemplate-cast-spell .inlinerollresult.fullcrit, +.sheet-rolltemplate-cast-spell .inlinerollresult.fullfail, +.sheet-rolltemplate-cast-spell .inlinerollresult.importantroll +{ + display: inline-block; + min-width: 1.5em; + text-align: center; + border: none; +} + +/* Used to show dice */ +.sheet-rolltemplate-stat-check3 .sheet-template-dice .inlinerollresult, +.sheet-rolltemplate-stat-check4 .sheet-template-dice .inlinerollresult, +.sheet-rolltemplate-attack .sheet-template-dice .inlinerollresult, +.sheet-rolltemplate-cast-spell .sheet-template-dice .inlinerollresult +{ + font-family: dicefontd6; + font-size: 2.5em; + background-color: white; + border-style: none; + position: relative; + top: .2em; + margin-bottom: .4em; +} + +.sheet-rolltemplate-stat-check3 .sheet-success, +.sheet-rolltemplate-stat-check4 .sheet-success, +.sheet-rolltemplate-attack .sheet-success, +.sheet-rolltemplate-cast-spell .sheet-success +{ + font-weight: bold; + color: green; +} + +.sheet-rolltemplate-stat-check3 .sheet-failure, +.sheet-rolltemplate-stat-check4 .sheet-failure, +.sheet-rolltemplate-cast-spell .sheet-failure, +.sheet-rolltemplate-attack .sheet-failure +{ + font-weight: bold; + color: red; +} + + +.sheet-rolltemplate-attack .sheet-keyvalue span:first-child, +.sheet-rolltemplate-cast-spell .sheet-keyvalue span:first-child, +.sheet-rolltemplate-description .sheet-keyvalue span:first-child, +.sheet-rolltemplate-initiative .sheet-keyvalue span:first-child +{ + font-weight: 550; +} + +.sheet-rolltemplate-attack .sheet-description, +.sheet-rolltemplate-cast-spell .sheet-description, +.sheet-rolltemplate-description .sheet-description { + font-style: italic; +} + + /* show the selected tab */ .sheet-tabstoggle[value="character"] ~ div.sheet-character, .sheet-tabstoggle[value="journal"] ~ div.sheet-journal { display: block; -} \ No newline at end of file +} + +.charsheet .sheet-grid-section{ + display: grid; + grid-template-columns: auto auto auto; + grid-template-rows: auto auto auto auto auto auto; + grid-template-areas: + "namelvl namelvl talents" + "stats combat talents" + "attack attack talents" + "weapons weapons weapons" + "spells spells spells" + "armor armor armor" + "equip equip equip"; + grid-gap: 5px; +} +.charsheet div.sheet-block{ + display: grid; + padding: 5px; + border: 3px solid black; + background-color: #F0F0F0; +} +.charsheet div.sheet-namelvl{ + grid-area: namelvl; + line-height: 3.25rem; +} +.charsheet div.sheet-stats{ + grid-area: stats; + line-height: 3rem; +} +.charsheet div.sheet-combat{ + grid-area: combat; + line-height: 3rem; +} +.charsheet div.sheet-talents{ + grid-area: talents; +} +.charsheet div.sheet-attack{ + grid-area: attack; +} +.charsheet div.sheet-weapons{ + grid-area: weapons; +} +.charsheet div.sheet-armor{ + grid-area: armor; +} +.charsheet div.sheet-spells{ + grid-area: spells; +} +.charsheet div.sheet-equip{ + grid-area: equip; +} + +.charsheet .sheet-grid-section-journal{ + display: grid; + grid-template-columns: auto; + grid-template-rows: auto auto auto; + grid-template-areas: + "pointhistory" + "notes" + "otherspells"; + grid-gap: 5px; +} +.charsheet div.sheet-otherspells{ + grid-area: otherspells; +} +.charsheet div.sheet-notes{ + grid-area: notes; +} +.charsheet div.sheet-pointhistory{ + grid-area: pointhistory; +} + +.charsheet .sheet-toggle ~ .sheet-toggle-checked { + display: none; +} +.charsheet .sheet-toggle ~ .sheet-toggle-unchecked { + display: block; + width: 100%; +} +.charsheet .sheet-toggle:checked ~ .sheet-toggle-checked { + display: block; + width: 100%; +} +.charsheet .sheet-toggle:checked ~ .sheet-toggle-unchecked { + display: none; +} diff --git a/The Fantasy Trip/TFT.html b/The Fantasy Trip/TFT.html index afbef4ffce..20ec1e1474 100644 --- a/The Fantasy Trip/TFT.html +++ b/The Fantasy Trip/TFT.html @@ -1,154 +1,1185 @@ -