diff --git a/D&D_BECM/BDnDSheet.css b/D&D_BECM/BDnDSheet.css index fa72c57633..ac1f968980 100644 --- a/D&D_BECM/BDnDSheet.css +++ b/D&D_BECM/BDnDSheet.css @@ -3,13 +3,13 @@ .charsheet { --background: #ffffff; --border: #000000; + --button-background: #e6e6e6; --disabled-input-background: #eaffef; --disabled-input-border: #dddddd; - --disabled-passive-background: #def6fc; - --foreground-text: #1E1523; - --footer-background: #faca4e33; - --header-background: #000000; - --header-text: #ffffff; + --foreground-text: #1e1523; + --footer-background: #fdf6e0; + --header-background: var(--border); + --header-text: var(--background); --is-player-character: #65763c; --not-player-character: #93537c; --repeating-section-background: #eeeeee; @@ -18,9 +18,39 @@ --selected-tab-background: #ab8b57; --spell-header: #c7d1bf; --subheader-background: #cecece; + --textarea-background: #f5f5f5; + --textarea-border: #cecece; --unselected-spell-effect: #8c6075; --unselected-subtab-background: #56b4e9; --unselected-tab-background: #4a6486; + + background-color: var(--background); +} + +body.sheet-darkmode .charsheet { + --background: #1f1f1f; + --border: #b3b3b3; + --button-background: #353535; + --disabled-input-background: var(--repeating-section-background); + --disabled-input-border: var(--border); + --footer-background: var(--border); + --foreground-text: #e6e6e6; + --header-background: var(--border); + --header-text: #353535; + --is-player-character: #97a86e; + --not-player-character: #c585ae; + --repeating-section-background: #2a2a2a; + --selected-spell-effect: #b9cc9c; + --selected-subtab-background: #32d0a5; + --selected-tab-background: #ddbd89; + --spell-header: #555555; + --subheader-background: var(--header-text); + --textarea-background: var(--background); + --textarea-border: var(--border); + --unselected-spell-effect: #8c6075; + --unselected-spell-effect: #be92a7; + --unselected-subtab-background: #88e6ff; + --unselected-tab-background: #7c96b8; } .sheet-rolltemplate-5eDefault { @@ -197,6 +227,41 @@ padding: 10px; } +/* Logo and Footer */ +.sheet-logo { + --background-image: url("https://i.imgur.com/D36CQPG.png"); + background-image: var(--background-image); + background-position: left top; + background-repeat: no-repeat; + background-size: contain; + min-height: 50px; +} + +.sheet-footer { + background-color: var(--footer-background); + border-radius: 12px; + margin-top: 3px; + padding: 3px 0px; + vertical-align: bottom; +} + +.sheet-footer-image { + --background-image: url("http://i.imgur.com/QQpi55r.png"); + background-image: var(--background-image); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + min-height: 30px; +} + +.sheet-darkmode .sheet-logo { + --background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/d7ab1b5c-ffb7-4f05-ae14-7f584918b549/da3bh57-2bb8f0c1-0c51-4928-8335-4d1854262242.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2Q3YWIxYjVjLWZmYjctNGYwNS1hZTE0LTdmNTg0OTE4YjU0OVwvZGEzYmg1Ny0yYmI4ZjBjMS0wYzUxLTQ5MjgtODMzNS00ZDE4NTQyNjIyNDIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.tEMCOLw96HHJZmbmp1ts0dWb0awyQJKf2G8ZGxaFm2U"); +} + +.sheet-darkmode .sheet-footer-image { + --background-image: url("http://i.imgur.com/QQpi55r.png"); +} + /* Tweak repeating section buttons so they have a bottom margin and dont overflow when in edit mode. */ div[class^="repcontrol"] { margin-bottom: 5px; @@ -218,9 +283,9 @@ input.sheet-is-force:not(:checked) ~ div.sheet-character { display: block; } -input.sheet-is-force { +.charsheet input.sheet-is-force { cursor: pointer; - height: 16px; + height: 20px; opacity: 0; position: relative; width: 20%; @@ -240,14 +305,13 @@ span.sheet-is-force-tab { font-weight: bold; height: 16px; margin-left: -20%; + padding-top: 4px; text-align: center; width: 20%; } input.sheet-is-force:checked + span.sheet-is-force-tab { background: var(--not-player-character); - border-radius: 4px; - color: var(--header-text); } input.sheet-is-force:checked + span.sheet-is-force-tab::before { @@ -264,9 +328,9 @@ input.sheet-is-npc:checked ~ div.sheet-npcinfo { display: block; } -input.sheet-is-npc { +.charsheet input.sheet-is-npc { cursor: pointer; - height: 16px; + height: 20px; opacity: 0; position: relative; width: 10%; @@ -285,16 +349,14 @@ span.sheet-is-npc-tab { font-size: 9px; font-weight: bold; height: 16px; - margin-left: -10%; - padding-top: 2px; + margin: 5px -10%; + padding-top: 4px; text-align: center; width: 10%; } input.sheet-is-npc:checked + span.sheet-is-npc-tab { background: var(--not-player-character); - border-radius: 4px; - color: var(--header-text); } input.sheet-is-npc:checked + span.sheet-is-npc-tab::before { @@ -302,7 +364,35 @@ input.sheet-is-npc:checked + span.sheet-is-npc-tab::before { } /* End NPC Button Settings */ +/* Button Settings */ +.charsheet button[type="roll"], +.charsheet div.repcontrol button.btn { + background-color: var(--button-background); + color: var(--foreground-text); + background-image: linear-gradient(top, var(--background), var(--button-background)); + background-image: -moz-linear-gradient(top, var(--background), var(--button-background)); + background-image: -ms-linear-gradient(top, var(--background), var(--button-background)); + background-image: -o-linear-gradient(top, var(--background), var(--button-background)); + background-image: -webkit-linear-gradient(top, var(--background), var(--button-background)); +} + +.sheet-darkmode .charsheet button[type="roll"], +.sheet-darkmode .charsheet div.repcontrol button.btn { + background-color: var(--background); + background-image: linear-gradient(top, var(--button-background), var(--background)); + background-image: -moz-linear-gradient(top, var(--button-background), var(--background)); + background-image: -ms-linear-gradient(top, var(--button-background), var(--background)); + background-image: -o-linear-gradient(top, var(--button-background), var(--background)); + background-image: -webkit-linear-gradient(top, var(--button-background), var(--background)); +} + +/* End Button Settings */ + /* Main Sheet Tabs */ +.charsheet input[type="checkbox"] { + mix-blend-mode: luminosity; +} + div[class^="sheet-section"] { display: none; } @@ -317,7 +407,7 @@ input.sheet-tab99:checked ~ div[class^="sheet-section"] { display: block; } -input.sheet-tab { +.charsheet input.sheet-tab { cursor: pointer; height: 20px; opacity: 0; @@ -341,6 +431,10 @@ span.sheet-tab { width: 87px; } +/* .sheet-darkmode span.sheet-tab { + color: var(--foreground-text); +} */ + input.sheet-tab1:checked + span.sheet-tab1, input.sheet-tab2:checked + span.sheet-tab2, input.sheet-tab3:checked + span.sheet-tab3, @@ -427,6 +521,7 @@ div[data-groupname^="repeating_spellbook"] .repitem, background: var(--repeating-section-background); border: var(--border) 1px solid; border-radius: 12px; + color: var(--foreground-text); margin-bottom: 5px; margin-left: 1px; } @@ -675,6 +770,10 @@ span.sheet-spacer, margin-top: 5px; } +span.sheet-divider { + color: var(--foreground-text); +} + .sheet-vert-middle, .sheet-rolltemplate-5eDefault .sheet-vert-middle { vertical-align: middle !important; @@ -694,17 +793,19 @@ span.sheet-spacer, text-align: right; } -textarea { +.sheet-overall-wrapper textarea { + background-color: var(--textarea-background); + border-color: var(--textarea-border); height: 150px; resize: none; width: calc(100% - 10px); } -.sheet-small-textarea { +textarea.sheet-small-textarea { height: 50px; } -.sheet-medium-textarea { +textarea.sheet-medium-textarea { height: 100px; } @@ -724,13 +825,6 @@ input[disabled] { -moz-appearance: textfield; } -input[disabled].sheet-passive-skill-score { - background-color: var(--disabled-passive-background); - border-color: var(--disabled-input-border); - cursor: not-allowed; - -moz-appearance: textfield; -} - input[disabled]::-webkit-inner-spin-button, input[disabled]::-webkit-outer-spin-button { -webkit-appearance: none; @@ -760,13 +854,6 @@ select { vertical-align: bottom; } -.sheet-footer { - background-color: var(--footer-background); - border-radius: 12px; - margin-top: 3px; - vertical-align: bottom; -} - .sheet-spell-header { background-color: var(--spell-header); border-radius: 12px; diff --git a/D&D_BECM/BDnDSheet.html b/D&D_BECM/BDnDSheet.html index 4aa36d1849..9d984ae449 100644 --- a/D&D_BECM/BDnDSheet.html +++ b/D&D_BECM/BDnDSheet.html @@ -6,7 +6,7 @@
-
Dungeons and Dragons (BECM Clasic edition)
+

Sheet version
3rd october 2018


Character Name

Class
@@ -2739,12 +2739,12 @@
Show : - Description - | Attack - Save - Healing | - Damage - Effects + Description | + Attack + Save + Healing | + Damage + Effects
@@ -2897,7 +2897,7 @@
-

Encumbrence (in coins) a

+

Encumbrance (in coins) a

Inventory
Coin
@@ -3211,7 +3211,7 @@
-
Dungeons and Dragons (BECM Clasic edition)
+

Sheet version
26th May 2015


Force Name

Troop Class
@@ -3401,9 +3401,7 @@
-
- -
+
diff --git a/D&D_BECM/ReadMe.md b/D&D_BECM/ReadMe.md index 2809f57741..f032301e5f 100644 --- a/D&D_BECM/ReadMe.md +++ b/D&D_BECM/ReadMe.md @@ -8,6 +8,8 @@ This version of the sheet incorporates roll templates, autocalculation of AC, mo ### Changelog * May 26 Update Added basic Warmachine and NPC info +* Sep 1st 2022 + - Added Dark Mode support ### Credit Where Credit is Due The CSS and much of the layout is lifted from the excellent work of John Myles ([@Actoba](https://app.roll20.net/users/427494/actoba) on roll20) and the 5e Dungeons and Dragons sheet. diff --git a/D&D_BECM/images/dungeons_and_dragons_logo_black.png b/D&D_BECM/images/dungeons_and_dragons_logo_black.png new file mode 100644 index 0000000000..4b4211555c Binary files /dev/null and b/D&D_BECM/images/dungeons_and_dragons_logo_black.png differ diff --git a/D&D_BECM/images/dungeons_and_dragons_logo_white.png b/D&D_BECM/images/dungeons_and_dragons_logo_white.png new file mode 100644 index 0000000000..9866001371 Binary files /dev/null and b/D&D_BECM/images/dungeons_and_dragons_logo_white.png differ diff --git a/D&D_BECM/images/sheet_footer.png b/D&D_BECM/images/sheet_footer.png new file mode 100644 index 0000000000..d6bea114ef Binary files /dev/null and b/D&D_BECM/images/sheet_footer.png differ diff --git a/D&D_BECM/sheet.json b/D&D_BECM/sheet.json index 79f50a6ff5..fb68cfdd86 100644 --- a/D&D_BECM/sheet.json +++ b/D&D_BECM/sheet.json @@ -5,5 +5,5 @@ "roll20userid": "1048758, 857613", "preview": "BDnDpreview.png", "instructions": "This sheet is for the Rules Cyclopedia version of Basic D&D (BECM). It supports skills, weapon mastery, and Warmachine rules. It does not currently support Imortals rules. I WISH TO MAKE SOME MORE CHANGES LIKE ACTUALLY MAKING ROLLS ON THIEF SKILLS AND TURN UNDED, please let me know if you are opposed to this", - "legacy": true + "legacy": false } \ No newline at end of file