diff --git a/module/sheets/Actors/PC/Improved.mjs b/module/sheets/Actors/PC/Improved.mjs index 56c00f7..59f7635 100644 --- a/module/sheets/Actors/PC/Improved.mjs +++ b/module/sheets/Actors/PC/Improved.mjs @@ -8,8 +8,8 @@ export class PlayerSheetv2 extends GenericActorSheet { template: `systems/dotdungeon/templates/actors/char-sheet/v2/sheet.hbs`, tabs: [ { - // group: `page`, - navSelector: `.potato`, + group: `page`, + navSelector: `nav`, contentSelector: `.tab-content`, initial: `tab1`, }, diff --git a/styles/mixins/_material.scss b/styles/mixins/_material.scss new file mode 100644 index 0000000..bd4d68d --- /dev/null +++ b/styles/mixins/_material.scss @@ -0,0 +1,6 @@ +@mixin elevate($height) { + background-color: var(--elevation-#{$height}dp); + -webkit-box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75); + -moz-box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75); + box-shadow: 0px 0px #{$height * 1.75}px 0px rgba(0,0,0,0.75); +} \ No newline at end of file diff --git a/styles/sheets/actor/char-sheet/themes/dark.scss b/styles/sheets/actor/char-sheet/themes/dark.scss index 65acb16..0e8bde1 100644 --- a/styles/sheets/actor/char-sheet/themes/dark.scss +++ b/styles/sheets/actor/char-sheet/themes/dark.scss @@ -1,7 +1,28 @@ -$bg-base: #202b38; +$t: transparent; + +$background: #0a0a0a; +$surface: #121212; +$primary: $t; +$secondary: $t; +$on-background: $t; +$on-surface: $t; +$on-primary: $t; +$on-secondary: $t; .actor--pc { - --sheet-bg: #{$bg-base}; - --nav-bg: var(--panel-bg); - --panel-bg: rgba(255, 255, 255, 0.05); + --sheet-bg: #{$background}; + --nav-bg: #{$surface}; + --panel-bg: #{$surface}; + + /* Elevation backgrounds to following Material design */ + --elevation-0dp: #{$surface}; + --elevation-1dp: color-mix(in lab, #{$surface}, white 5%); + --elevation-2dp: color-mix(in lab, #{$surface}, white 7%); + --elevation-3dp: color-mix(in lab, #{$surface}, white 8%); + --elevation-4dp: color-mix(in lab, #{$surface}, white 9%); + --elevation-6dp: color-mix(in lab, #{$surface}, white 11%); + --elevation-8dp: color-mix(in lab, #{$surface}, white 12%); + --elevation-12dp: color-mix(in lab, #{$surface}, white 14%); + --elevation-16dp: color-mix(in lab, #{$surface}, white 15%); + --elevation-24dp: color-mix(in lab, #{$surface}, white 16%); } diff --git a/styles/sheets/actor/char-sheet/themes/material-design.scss b/styles/sheets/actor/char-sheet/themes/material-design.scss new file mode 100644 index 0000000..aad072a --- /dev/null +++ b/styles/sheets/actor/char-sheet/themes/material-design.scss @@ -0,0 +1,167 @@ +:root { + --md-source: #005500; + /* primary */ + --md-ref-palette-primary0: #000000; + --md-ref-palette-primary10: #002200; + --md-ref-palette-primary20: #003a00; + --md-ref-palette-primary25: #004600; + --md-ref-palette-primary30: #005300; + --md-ref-palette-primary35: #12600b; + --md-ref-palette-primary40: #226d19; + --md-ref-palette-primary50: #3d8730; + --md-ref-palette-primary60: #56a248; + --md-ref-palette-primary70: #70bd5f; + --md-ref-palette-primary80: #8bd978; + --md-ref-palette-primary90: #a6f691; + --md-ref-palette-primary95: #caffb9; + --md-ref-palette-primary98: #edffe1; + --md-ref-palette-primary99: #f7ffee; + --md-ref-palette-primary100: #ffffff; + /* secondary */ + --md-ref-palette-secondary0: #000000; + --md-ref-palette-secondary10: #380038; + --md-ref-palette-secondary20: #5b005b; + --md-ref-palette-secondary25: #6c056c; + --md-ref-palette-secondary30: #7a1979; + --md-ref-palette-secondary35: #892886; + --md-ref-palette-secondary40: #973693; + --md-ref-palette-secondary50: #b450ae; + --md-ref-palette-secondary60: #d26ac9; + --md-ref-palette-secondary70: #f084e6; + --md-ref-palette-secondary80: #ffaaf3; + --md-ref-palette-secondary90: #ffd7f5; + --md-ref-palette-secondary95: #ffebf8; + --md-ref-palette-secondary98: #fff7f9; + --md-ref-palette-secondary99: #fffbff; + --md-ref-palette-secondary100: #ffffff; + /* tertiary */ + --md-ref-palette-tertiary0: #000000; + --md-ref-palette-tertiary10: #002022; + --md-ref-palette-tertiary20: #003739; + --md-ref-palette-tertiary25: #104245; + --md-ref-palette-tertiary30: #1e4d50; + --md-ref-palette-tertiary35: #2b595c; + --md-ref-palette-tertiary40: #386568; + --md-ref-palette-tertiary50: #517f82; + --md-ref-palette-tertiary60: #6b989c; + --md-ref-palette-tertiary70: #85b3b6; + --md-ref-palette-tertiary80: #a0cfd2; + --md-ref-palette-tertiary90: #bcebee; + --md-ref-palette-tertiary95: #caf9fd; + --md-ref-palette-tertiary98: #e7feff; + --md-ref-palette-tertiary99: #f3ffff; + --md-ref-palette-tertiary100: #ffffff; + /* neutral */ + --md-ref-palette-neutral0: #000000; + --md-ref-palette-neutral10: #1a1c18; + --md-ref-palette-neutral20: #2f312d; + --md-ref-palette-neutral25: #3a3c38; + --md-ref-palette-neutral30: #454743; + --md-ref-palette-neutral35: #51534e; + --md-ref-palette-neutral40: #5d5f5a; + --md-ref-palette-neutral50: #767872; + --md-ref-palette-neutral60: #90918c; + --md-ref-palette-neutral70: #abaca6; + --md-ref-palette-neutral80: #c6c7c1; + --md-ref-palette-neutral90: #e2e3dc; + --md-ref-palette-neutral95: #f1f1eb; + --md-ref-palette-neutral98: #f9faf3; + --md-ref-palette-neutral99: #fcfdf6; + --md-ref-palette-neutral100: #ffffff; + /* neutral-variant */ + --md-ref-palette-neutral-variant0: #000000; + --md-ref-palette-neutral-variant10: #181d15; + --md-ref-palette-neutral-variant20: #2c3229; + --md-ref-palette-neutral-variant25: #373d34; + --md-ref-palette-neutral-variant30: #43483f; + --md-ref-palette-neutral-variant35: #4e544a; + --md-ref-palette-neutral-variant40: #5a6056; + --md-ref-palette-neutral-variant50: #73796e; + --md-ref-palette-neutral-variant60: #8d9387; + --md-ref-palette-neutral-variant70: #a7ada1; + --md-ref-palette-neutral-variant80: #c3c8bc; + --md-ref-palette-neutral-variant90: #dfe4d7; + --md-ref-palette-neutral-variant95: #edf3e5; + --md-ref-palette-neutral-variant98: #f6fbee; + --md-ref-palette-neutral-variant99: #f9fef1; + --md-ref-palette-neutral-variant100: #ffffff; + /* error */ + --md-ref-palette-error0: #000000; + --md-ref-palette-error10: #410002; + --md-ref-palette-error20: #690005; + --md-ref-palette-error25: #7e0007; + --md-ref-palette-error30: #93000a; + --md-ref-palette-error35: #a80710; + --md-ref-palette-error40: #ba1a1a; + --md-ref-palette-error50: #de3730; + --md-ref-palette-error60: #ff5449; + --md-ref-palette-error70: #ff897d; + --md-ref-palette-error80: #ffb4ab; + --md-ref-palette-error90: #ffdad6; + --md-ref-palette-error95: #ffedea; + --md-ref-palette-error98: #fff8f7; + --md-ref-palette-error99: #fffbff; + --md-ref-palette-error100: #ffffff; + /* light */ + --md-sys-color-primary-light: #226d19; + --md-sys-color-on-primary-light: #ffffff; + --md-sys-color-primary-container-light: #a6f691; + --md-sys-color-on-primary-container-light: #002200; + --md-sys-color-secondary-light: #973693; + --md-sys-color-on-secondary-light: #ffffff; + --md-sys-color-secondary-container-light: #ffd7f5; + --md-sys-color-on-secondary-container-light: #380038; + --md-sys-color-tertiary-light: #386568; + --md-sys-color-on-tertiary-light: #ffffff; + --md-sys-color-tertiary-container-light: #bcebee; + --md-sys-color-on-tertiary-container-light: #002022; + --md-sys-color-error-light: #ba1a1a; + --md-sys-color-error-container-light: #ffdad6; + --md-sys-color-on-error-light: #ffffff; + --md-sys-color-on-error-container-light: #410002; + --md-sys-color-background-light: #fcfdf6; + --md-sys-color-on-background-light: #1a1c18; + --md-sys-color-surface-light: #fcfdf6; + --md-sys-color-on-surface-light: #1a1c18; + --md-sys-color-surface-variant-light: #dfe4d7; + --md-sys-color-on-surface-variant-light: #43483f; + --md-sys-color-outline-light: #73796e; + --md-sys-color-inverse-on-surface-light: #f1f1eb; + --md-sys-color-inverse-surface-light: #2f312d; + --md-sys-color-inverse-primary-light: #8bd978; + --md-sys-color-shadow-light: #000000; + --md-sys-color-surface-tint-light: #226d19; + --md-sys-color-outline-variant-light: #c3c8bc; + --md-sys-color-scrim-light: #000000; + /* dark */ + --md-sys-color-primary-dark: #8bd978; + --md-sys-color-on-primary-dark: #003a00; + --md-sys-color-primary-container-dark: #005300; + --md-sys-color-on-primary-container-dark: #a6f691; + --md-sys-color-secondary-dark: #ffaaf3; + --md-sys-color-on-secondary-dark: #5b005b; + --md-sys-color-secondary-container-dark: #7a1979; + --md-sys-color-on-secondary-container-dark: #ffd7f5; + --md-sys-color-tertiary-dark: #a0cfd2; + --md-sys-color-on-tertiary-dark: #003739; + --md-sys-color-tertiary-container-dark: #1e4d50; + --md-sys-color-on-tertiary-container-dark: #bcebee; + --md-sys-color-error-dark: #ffb4ab; + --md-sys-color-error-container-dark: #93000a; + --md-sys-color-on-error-dark: #690005; + --md-sys-color-on-error-container-dark: #ffdad6; + --md-sys-color-background-dark: #1a1c18; + --md-sys-color-on-background-dark: #e2e3dc; + --md-sys-color-surface-dark: #1a1c18; + --md-sys-color-on-surface-dark: #e2e3dc; + --md-sys-color-surface-variant-dark: #43483f; + --md-sys-color-on-surface-variant-dark: #c3c8bc; + --md-sys-color-outline-dark: #8d9387; + --md-sys-color-inverse-on-surface-dark: #1a1c18; + --md-sys-color-inverse-surface-dark: #e2e3dc; + --md-sys-color-inverse-primary-dark: #226d19; + --md-sys-color-shadow-dark: #000000; + --md-sys-color-surface-tint-dark: #8bd978; + --md-sys-color-outline-variant-dark: #43483f; + --md-sys-color-scrim-dark: #000000; +} \ No newline at end of file diff --git a/styles/sheets/actor/char-sheet/v2.scss b/styles/sheets/actor/char-sheet/v2.scss index 8203852..d1ef5e3 100644 --- a/styles/sheets/actor/char-sheet/v2.scss +++ b/styles/sheets/actor/char-sheet/v2.scss @@ -1,11 +1,26 @@ @use "./themes/dark.scss"; +@use "../../../mixins/material" as material; .dotdungeon .actor--pc { - background: var(--sheet-bg); + background-color: var(--sheet-bg); display: grid; grid-template-rows: 1fr minmax(min-content, 50px); + color: white; + + .panel-0dp { @include material.elevate(0); margin: 1rem; padding: 10px; } + .panel-1dp { @include material.elevate(1); margin: 1rem; padding: 10px; } + .panel-2dp { @include material.elevate(2); margin: 1rem; padding: 10px; } + .panel-3dp { @include material.elevate(3); margin: 1rem; padding: 10px; } + .panel-4dp { @include material.elevate(4); margin: 1rem; padding: 10px; } + .panel-6dp { @include material.elevate(6); margin: 1rem; padding: 10px; } + .panel-8dp { @include material.elevate(8); margin: 1rem; padding: 10px; } + .panel-12dp { @include material.elevate(12); margin: 1rem; padding: 10px; } + .panel-16dp { @include material.elevate(16); margin: 1rem; padding: 10px; } + .panel-24dp { @include material.elevate(24); margin: 1rem; padding: 10px; } + nav { - background: var(--panel-bg); + background-color: var(--nav-bg); + @include material.elevate(02) } } diff --git a/styles/sheets/actor/mvp.scss b/styles/sheets/actor/mvp.scss index 9fdd044..087e744 100644 --- a/styles/sheets/actor/mvp.scss +++ b/styles/sheets/actor/mvp.scss @@ -271,7 +271,7 @@ @include bp-m { .dotdungeon { - .actor--pc { + .actor--pc-mvp { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(15, min-content); grid-template-areas: @@ -311,7 +311,7 @@ @include bp-s { .dotdungeon { - .actor--pc { + .actor--pc-mvp { grid-template-columns: 1fr; grid-template-rows: repeat(12, min-content); grid-template-areas: diff --git a/templates/actors/char-sheet/v2/sheet.hbs b/templates/actors/char-sheet/v2/sheet.hbs index 209c808..7880fa7 100644 --- a/templates/actors/char-sheet/v2/sheet.hbs +++ b/templates/actors/char-sheet/v2/sheet.hbs @@ -1,22 +1,39 @@
{{!-- All panels here --}}
-
-

Tab 1

-
-
-

Tab 2

-
-
-

Tab 3

+
Avatar
+
+
+

Build

+
+
+

Meta

+
+
+

Presence

+
+
+

Hands

+
+
+

Tilt

+
+
+

RNG

+
+
Combat
+
Inventory
+
Spells
{{!-- Tab list here --}} -
- Tab 1 - Tab 2 - Tab 3 -
+