diff --git a/The Fantasy Trip/TFT.css b/The Fantasy Trip/TFT.css index dfb0dc28b6..f91f338873 100644 --- a/The Fantasy Trip/TFT.css +++ b/The Fantasy Trip/TFT.css @@ -94,13 +94,14 @@ body.sheet-darkmode .charsheet { content: "y" } +/* the weapon and spell selection button */ .sheet-select-button { font-family: "Pictos"; display: inline-block; border-style: solid; height: 1rem; - width: 0rem; + width: .1rem; border-radius: .75rem; border-width: 1px; /*font-weight: bold;*/ @@ -108,6 +109,23 @@ body.sheet-darkmode .charsheet { text-align: center; } +/* our custom checkboxes */ +.sheet-checkbox-button +{ + font-family: "Pictos"; + display: inline-block; + border-style: solid; + height: 1rem; + width: .03rem; + border-radius: .35rem; + border-width: 1px; + margin-left: .2rem; + align-self: center; + text-align: center; + font-size: smaller; +} + + .sheet-attack-button { display: inline-block; border-style: solid; @@ -147,15 +165,31 @@ body.sheet-darkmode .charsheet { .sheet-expand-button, .sheet-describe-button, .sheet-select-button, +.sheet-checkbox-button, .sheet-attack-button, .sheet-dice-button { background-color: #F9F9F9; border-color: #BBBBBB; } +/* A bit darker because checkboxes, not real buttons. */ +.sheet-checkbox-button { + border-color: #767676; +} + +/* a white check */ +.sheet-checkbox-checkbox:checked + button::after { + color: white; +} + +body.sheet-darkmode .sheet-checkbox-checkbox:checked + button::after { + color: black; +} + body.sheet-darkmode .sheet-expand-button, body.sheet-darkmode .sheet-describe-button, body.sheet-darkmode .sheet-select-button, +body.sheet-darkmode .sheet-checkbox-button, body.sheet-darkmode .sheet-attack-button, body.sheet-darkmode .sheet-dice-button { background-color: #202020; @@ -166,6 +200,7 @@ body.sheet-darkmode .sheet-dice-button { .sheet-expand-button:hover, .sheet-describe-button:hover, .sheet-select-button:hover, +.sheet-checkbox-button:hover, .sheet-attack-button:hover, .sheet-dice-button:hover { background-color: #EBEBEB; @@ -174,6 +209,7 @@ body.sheet-darkmode .sheet-dice-button { .sheet-expand-button:active, .sheet-describe-button:active, .sheet-select-button:active, +.sheet-checkbox-button:active, .sheet-attack-button:active, .sheet-dice-button:active { background-color: #E1E1E1; @@ -687,10 +723,27 @@ body.sheet-darkmode .charsheet .sheet-selected-tab { background-color: #272730; } +/* Make the button after the checked radio button be blue */ +/* See we actually hide the checkbox, but make a button after it */ .charsheet .sheet-select-radio:checked + button { background-color: blue; } +.charsheet .sheet-checkbox-checkbox:checked + button { + background-color: #0060ff; +} +.charsheet .sheet-checkbox-checkbox:checked + button:hover { + background-color: blue; +} + +.charsheet .sheet-checkbox-checkbox:checked + button::after { + /*content: "3"; 3 is check*/ + content: "*"; /* x */ + position: relative; + right: .4rem; + bottom: .4rem; +} + .charsheet .sheet-nowrap { white-space : nowrap; } diff --git a/The Fantasy Trip/TFT.html b/The Fantasy Trip/TFT.html index 1be2bfc9ac..e1ff1e1399 100644 --- a/The Fantasy Trip/TFT.html +++ b/The Fantasy Trip/TFT.html @@ -267,7 +267,7 @@ Lbs NC - +