From 021ef3e5852c1ef137d6b9cda7f2ed656fc5ce35 Mon Sep 17 00:00:00 2001 From: fredhicks Date: Thu, 10 Mar 2022 14:26:32 -0500 Subject: [PATCH] Darkmode support added --- Monster of the Week Official/MotWCSS.css | 71 +++++++++++++++++++++++- Monster of the Week Official/sheet.json | 16 +++--- 2 files changed, 77 insertions(+), 10 deletions(-) diff --git a/Monster of the Week Official/MotWCSS.css b/Monster of the Week Official/MotWCSS.css index f2f04976cf..e2389c2433 100644 --- a/Monster of the Week Official/MotWCSS.css +++ b/Monster of the Week Official/MotWCSS.css @@ -10,6 +10,19 @@ white-space: nowrap; } +.sheet-darkmode .tab-content .charsheet .btn, +.sheet-darkmode .tab-content .charsheet .btn:hover, +.sheet-darkmode .tab-content .charsheet button, +.sheet-darkmode .tab-content .charsheet input, +.sheet-darkmode .tab-content .charsheet select, +.sheet-darkmode .tab-content .charsheet textarea, +.sheet-darkmode .tab-content .charsheet +{ + background-color: #1f1f1f; + color: #eee; +} + + .sheet-KItem-Type-New, .sheet-KItem-Type-Countdown, .sheet-KItem-Type-Monster, @@ -232,6 +245,8 @@ option.sheet-SkinSelect:checked font-weight: bold; } +/* Needs darkmode */ + .sheet-statelabel { font-weight: bold; @@ -240,6 +255,10 @@ option.sheet-SkinSelect:checked color: #990000; } +.sheet-darkmode .tab-content .charsheet .sheet-statelabel { + color: #ff0000; +} + .sheet-Stats, .sheet-Subsection { margin-top: 12px; margin-bottom: 4px; @@ -399,17 +418,30 @@ option.sheet-SkinSelect:checked } -button[type=roll].sheet-2d6-button::before { +.charsheet button[type=roll].sheet-2d6-button::before { content: 'Fa'; font-family: 'dicefontd6'; font-size: 116%; } -button[type=roll].sheet-broadcast-button::before { +.charsheet button[type=roll].sheet-broadcast-button::before { content: 'R'; font-family: 'Pictos'; } +/* Strip off all the unwanted bells and whistles Roll20 saddles us with */ + +.btn { + background-image: none; + text-shadow: none; + box-shadow: none; +} + +.sheet-darkmode .tab-content .charsheet button.btn:hover::before { + background-color: #990000; + color: #eee; +} + button[type=roll].sheet-broadcast-button, button[type=roll].sheet-2d6-button { border: 0px; @@ -420,6 +452,13 @@ button[type=roll].sheet-2d6-button { color: #990000; } +.sheet-darkmode .tab-content .charsheet button[type=roll].sheet-broadcast-button, +.sheet-darkmode .tab-content .charsheet button[type=roll].sheet-2d6-button { + background-color: #1f1f1f; + color: #ff0000; + background-position: 0 0; +} + input[type="checkbox"].sheet-checkbox { opacity: 0.0; width: 16px; @@ -561,6 +600,11 @@ input[type="radio"].sheet-radio:checked ~ span.sheet-grayable color: #000000; } +.sheet-darkmode .tab-content .charsheet input[type="checkbox"].sheet-checkbox:checked ~ span.sheet-grayable, +.sheet-darkmode .tab-content .charsheet input[type="radio"].sheet-radio:checked ~ span.sheet-grayable { + color: #eee; +} + input[type="checkbox"].sheet-checkbox:checked ~ span.sheet-grayable b, input[type="radio"].sheet-radio:checked ~ span.sheet-grayable b, input[type="checkbox"].sheet-checkbox:checked ~ span.sheet-grayable i, @@ -569,6 +613,14 @@ input[type="radio"].sheet-radio:checked ~ span.sheet-grayable i color: #990000; } +.sheet-darkmode .tab-content .charsheet input[type="checkbox"].sheet-checkbox:checked ~ span.sheet-grayable b, +.sheet-darkmode .tab-content .charsheet input[type="radio"].sheet-radio:checked ~ span.sheet-grayable b, +.sheet-darkmode .tab-content .charsheet input[type="checkbox"].sheet-checkbox:checked ~ span.sheet-grayable i, +.sheet-darkmode .tab-content .charsheet input[type="radio"].sheet-radio:checked ~ span.sheet-grayable i +{ + color: #ff0000; +} + .sheet-OPBHead { display: none; } @@ -658,6 +710,13 @@ input[type="checkbox"].sheet-triggerbox:checked + div.sheet-triggerframe color: #990000; } +.sheet-darkmode .tab-content .charsheet .sheet-highlights > b, +.sheet-darkmode .tab-content .charsheet .sheet-highlights > i, +.sheet-darkmode .tab-content .charsheet .sheet-redtext +{ + color: #ff0000; +} + .sheet-kflex { display: flex; flex-flow: column-reverse; @@ -760,6 +819,10 @@ input.sheet-99-hider[value="99"] + * display: inline-block; } +.sheet-darkmode .tab-content .charsheet .sheet-CountEvent { + color: #eee; +} + .sheet-Day { background-color: #EEEEEE; color: #000000; @@ -796,6 +859,10 @@ input.sheet-99-hider[value="99"] + * padding: 6px; } +.sheet-darkmode .tab-content .charsheet .sheet-EditControls { + background-color: #333; +} + div.sheet-KItem-Subtype > div { font-style: italic; } diff --git a/Monster of the Week Official/sheet.json b/Monster of the Week Official/sheet.json index f59e0a8eae..11e1729c66 100644 --- a/Monster of the Week Official/sheet.json +++ b/Monster of the Week Official/sheet.json @@ -1,9 +1,9 @@ { - "html": "MotWHTML.html", - "css": "MotWCSS.css", - "authors": "Katie Bennie (LethalKitten), Anistuffs, Fred Hicks (Evil Hat Productions)", - "roll20userid": "1609908 (LethalKitten), 1665985 (Anistuffs), 3844812 (Evil Hat Productions)", - "preview": "MotWPreview.jpg", - "instructions": "Choose a Playbook from the dropdown menu to get started. If you run into any issues, have suggestions, or anything else, please reach out to Evil Hat at feedback@evilhat.com.", - "legacy": true -} \ No newline at end of file + "html": "MotWHTML.html", + "css": "MotWCSS.css", + "authors": "Katie Bennie (LethalKitten), Anistuffs, Evil Hat Productions, Fred Hicks", + "roll20userid": "1609908, 1665985, 3844812, 881146", + "preview": "MotWPreview.jpg", + "instructions": "Choose a Playbook from the dropdown menu to get started. If you run into any issues, have suggestions, or anything else, please reach out to Evil Hat at feedback@evilhat.com. If you're a sheet developer and looking to make changes to this sheet's code, don't. We maintain an external copy as the authoritative source; problems that emerge with the sheet are our customer service problem, not yours. Changes you make are likely to be erased. So talk to us before making changes.", + "legacy": false +}