From eadaa53c75a24a19fc3effc8d6046c77775ffd58 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Tue, 26 Mar 2024 22:36:40 -0600 Subject: [PATCH] Begin working on a scoped CSS solution that uses a common design language across all sheets, and *just* does sheet-specific layout tasks --- module/sheets/Actors/PC/PlayerSheetV2.mjs | 1 + styles/dialog/DiceList.scss | 4 +- styles/generic.scss | 6 +- styles/global/buttons.scss | 2 +- styles/global/design-v2.scss | 4 +- styles/global/icons.scss | 4 +- styles/root.scss | 6 +- styles/sheets/actor/mob/mob.scss | 2 +- styles/sheets/actor/mob/v2.scss | 123 ++++++++++++++++++ styles/sheets/actor/mvp.scss | 6 +- styles/sheets/actor/sync/basic.scss | 4 +- styles/sheets/items/aspect.scss | 2 +- styles/sheets/items/custom.scss | 2 +- styles/sheets/items/pet.scss | 2 +- styles/sheets/items/spell.scss | 2 +- styles/sheets/partials/panel.scss | 4 +- styles/sheets/partials/skill.scss | 2 +- styles/sheets/partials/stat.scss | 2 +- styles/v3/elements/button.scss | 43 ++++++ styles/v3/elements/headers.scss | 7 + styles/v3/elements/hr.scss | 6 + styles/v3/elements/icons.scss | 17 +++ styles/v3/index.scss | 33 +++++ styles/v3/mixins/_material.scss | 13 ++ .../v2/partials/inventory/item-list.v2.pc.hbs | 2 +- .../partials/inventory/items/aspect.v2.pc.hbs | 2 +- .../inventory/items/material.v2.pc.hbs | 6 +- .../v2/partials/inventory/items/pet.v2.pc.hbs | 2 +- .../inventory/items/untyped.v2.pc.hbs | 2 +- .../partials/inventory/items/weapon.v2.pc.hbs | 2 +- .../v2/partials/inventory/player.v2.pc.hbs | 4 +- templates/actors/mobs/main.v2.hbs | 32 +++++ 32 files changed, 314 insertions(+), 35 deletions(-) create mode 100644 styles/sheets/actor/mob/v2.scss create mode 100644 styles/v3/elements/button.scss create mode 100644 styles/v3/elements/headers.scss create mode 100644 styles/v3/elements/hr.scss create mode 100644 styles/v3/elements/icons.scss create mode 100644 styles/v3/index.scss create mode 100644 styles/v3/mixins/_material.scss create mode 100644 templates/actors/mobs/main.v2.hbs diff --git a/module/sheets/Actors/PC/PlayerSheetV2.mjs b/module/sheets/Actors/PC/PlayerSheetV2.mjs index 51f8da2..75e169d 100644 --- a/module/sheets/Actors/PC/PlayerSheetV2.mjs +++ b/module/sheets/Actors/PC/PlayerSheetV2.mjs @@ -26,6 +26,7 @@ export class PlayerSheetv2 extends GenericActorSheet { ], } ); + opts.classes.push(`style-v3`); return opts; }; diff --git a/styles/dialog/DiceList.scss b/styles/dialog/DiceList.scss index 469539e..c7833bc 100644 --- a/styles/dialog/DiceList.scss +++ b/styles/dialog/DiceList.scss @@ -1,9 +1,9 @@ -.dotdungeon:has(.dialog--dice-list) { +.dotdungeon:not(.style-v3):has(.dialog--dice-list) { max-width: 275px; min-width: 275px; } -.dotdungeon .dialog--dice-list { +.dotdungeon:not(.style-v3) .dialog--dice-list { padding: 8px; .dice { diff --git a/styles/generic.scss b/styles/generic.scss index 00a474a..92cfb3e 100644 --- a/styles/generic.scss +++ b/styles/generic.scss @@ -8,7 +8,7 @@ Enabling scrollbar customization on a per-sheet basis, with a relatively low specificity to allow easier overriding without artificially increasing it. */ -.dotdungeon { +.dotdungeon:not(.style-v3) { --scrollbar-width: 5px; --scrollbar-handle-color: #782e22; --scrollbar-handle-border-color: var(--color-border-highlight); @@ -24,7 +24,7 @@ specificity to allow easier overriding without artificially increasing it. } // Reset the parts of Foundry's styling which gets in the way of what I want -.dotdungeon > .window-content { +.dotdungeon:not(.style-v3) > .window-content { h2, h3, h4, h5, h6 { @include fvtt_reset; @@ -74,7 +74,7 @@ specificity to allow easier overriding without artificially increasing it. } // Styling that doesn't belong to any particular part of my sheet -.dotdungeon.dotdungeon.dotdungeon.dotdungeon { +.dotdungeon.dotdungeon.dotdungeon.dotdungeon:not(.style-v3) { container-type: size; > .window-content { diff --git a/styles/global/buttons.scss b/styles/global/buttons.scss index 0159a03..77531b3 100644 --- a/styles/global/buttons.scss +++ b/styles/global/buttons.scss @@ -2,7 +2,7 @@ @use "sass:color" as color; -.dotdungeon.dotdungeon > .window-content { +.dotdungeon.dotdungeon:not(.style-v3) > .window-content { button { border-radius: 4px; box-sizing: border-box; diff --git a/styles/global/design-v2.scss b/styles/global/design-v2.scss index e9985a1..5c22fe1 100644 --- a/styles/global/design-v2.scss +++ b/styles/global/design-v2.scss @@ -1,5 +1,5 @@ -.item--custom, -.actor--mob { +.item--custom:not(.style-v3), +.actor--mob:not(.style-v3) { input { border: 2px solid black; background: none; diff --git a/styles/global/icons.scss b/styles/global/icons.scss index 500ebca..3d62ada 100644 --- a/styles/global/icons.scss +++ b/styles/global/icons.scss @@ -1,6 +1,6 @@ $iconSizes: 12, 14, 16, 18, 20, 22, 24; -.dotdungeon.dotdungeon.dotdungeon.dotdungeon { +.dotdungeon.dotdungeon.dotdungeon.dotdungeon:not(.style-v3) { .icon { display: inline-flex; justify-content: center; @@ -14,4 +14,4 @@ $iconSizes: 12, 14, 16, 18, 20, 22, 24; }; } } -} \ No newline at end of file +} diff --git a/styles/root.scss b/styles/root.scss index 2d2dd72..8ff6cdf 100644 --- a/styles/root.scss +++ b/styles/root.scss @@ -21,4 +21,8 @@ @use "./sheets/items/custom.scss"; @use "./sheets/items/aspect.scss"; @use "./sheets/items/spell.scss"; -@use "./sheets/items/pet.scss"; \ No newline at end of file +@use "./sheets/items/pet.scss"; + +/* NEW BETTER SCOPED CSS ONLY BELOW HERE */ + +@use "./v3/index.scss"; \ No newline at end of file diff --git a/styles/sheets/actor/mob/mob.scss b/styles/sheets/actor/mob/mob.scss index fd3e063..11634b2 100644 --- a/styles/sheets/actor/mob/mob.scss +++ b/styles/sheets/actor/mob/mob.scss @@ -1,7 +1,7 @@ @use "../../../vars" as *; @use "avatar" as *; -.dotdungeon .actor--mob { +.dotdungeon:not(.style-v3) .actor--mob { --gap: 8px; --avatar-size: 100px; --row-height: calc((var(--avatar-size) - var(--gap)) / 2); diff --git a/styles/sheets/actor/mob/v2.scss b/styles/sheets/actor/mob/v2.scss new file mode 100644 index 0000000..d7f0a5c --- /dev/null +++ b/styles/sheets/actor/mob/v2.scss @@ -0,0 +1,123 @@ +@use "../../../vars" as *; +@use "avatar" as *; + +.dotdungeon:not(.style-v3) .actor--mob2 { + --gap: 8px; + --avatar-size: 100px; + --row-height: calc((var(--avatar-size) - var(--gap)) / 2); + padding: var(--gap); + display: grid; + grid-template-columns: var(--avatar-size) repeat(2, minmax(0, 1fr)); + grid-template-rows: repeat(5, var(--row-height)) minmax(var(--row-height), 1fr); + gap: var(--gap); + grid-template-areas: + "avatar . ." + "avatar . ." + "dice tabs tabs" + "dice tabs tabs" + "dice tabs tabs" + "dice tabs tabs"; + + label, .dice { + border: 2px solid black; + border-radius: 4px; + gap: 4px; + padding: 4px; + } + + input.masked { + border: 2px solid black; + background: none; + box-shadow: none; + &:focus { + transform: scale(102%); + } + } + + label.mask-input { + display: flex; + flex-direction: row; + align-items: center; + transition: all ease-in-out 50ms; + + &:focus-within { + transform: scale(102%); + } + + input { + text-align: right; + border: none; + background: none; + border-radius: 0; + border-bottom: 1px solid black; + &:focus, &:focus-visible { + box-shadow: none; + } + } + + input.left { + text-align: left; + } + } + + .wide { + grid-column: span 2; + } + + .mask-textarea { + display: flex; + flex-direction: column; + transition: all ease-in-out 50ms; + + &:focus-within { + transform: scale(102%); + } + + textarea { + flex-grow: 1; + resize: none; + border: none; + box-shadow: none; + background: none; + } + } + .name { + height: 100%; + font-size: 1.5rem; + input { + height: 100%; + } + } + + .dice { + grid-area: dice; + display: flex; + flex-direction: column; + + .die { + display: flex; + flex-direction: row; + width: 100%; + border: 2px solid black; + border-radius: 4px; + + .formula { + flex-grow: 1; + align-self: center; + } + } + } + + .tabs { grid-area: tabs; } + .stunts { + grid-area: stunts; + } + .description { + grid-area: description; + } + + .avatar { + @include avatar; + border-radius: 4px; + } +} \ No newline at end of file diff --git a/styles/sheets/actor/mvp.scss b/styles/sheets/actor/mvp.scss index 087e744..4193a24 100644 --- a/styles/sheets/actor/mvp.scss +++ b/styles/sheets/actor/mvp.scss @@ -1,7 +1,7 @@ @use "../../vars.scss" as *; @use "../../mixins/breakpoints" as *; -.dotdungeon .actor--pc-mvp { +.dotdungeon:not(.style-v3) .actor--pc-mvp { display: grid; grid-template-areas: "profile stats stats" @@ -270,7 +270,7 @@ @include bp-m { - .dotdungeon { + .dotdungeon:not(.style-v3) { .actor--pc-mvp { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(15, min-content); @@ -310,7 +310,7 @@ } @include bp-s { - .dotdungeon { + .dotdungeon:not(.style-v3) { .actor--pc-mvp { grid-template-columns: 1fr; grid-template-rows: repeat(12, min-content); diff --git a/styles/sheets/actor/sync/basic.scss b/styles/sheets/actor/sync/basic.scss index 6f412be..904d093 100644 --- a/styles/sheets/actor/sync/basic.scss +++ b/styles/sheets/actor/sync/basic.scss @@ -1,6 +1,6 @@ @use "../../../mixins/breakpoints" as *; -.dotdungeon { +:not(.style-v3).dotdungeon { .actor--basic-sync { display: flex; justify-content: center; @@ -52,7 +52,7 @@ } @include bp-xs { - .dotdungeon { + :not(.style-v3).dotdungeon { &--sync-sheet { header { .configure-sheet { diff --git a/styles/sheets/items/aspect.scss b/styles/sheets/items/aspect.scss index 2461b9b..8f355fe 100644 --- a/styles/sheets/items/aspect.scss +++ b/styles/sheets/items/aspect.scss @@ -1,6 +1,6 @@ @use "../../vars" as *; -.dotdungeon .item--aspect { +.dotdungeon:not(.style-v3) .item--aspect { padding: 4px; input[type=text] { diff --git a/styles/sheets/items/custom.scss b/styles/sheets/items/custom.scss index 0899a91..9c5bc96 100644 --- a/styles/sheets/items/custom.scss +++ b/styles/sheets/items/custom.scss @@ -1,4 +1,4 @@ -.item--custom { +.item--custom:not(.style-v3) { padding: 8px; display: grid; grid-template-columns: 1fr 1fr; diff --git a/styles/sheets/items/pet.scss b/styles/sheets/items/pet.scss index 8cfc8e5..10e4d51 100644 --- a/styles/sheets/items/pet.scss +++ b/styles/sheets/items/pet.scss @@ -1,6 +1,6 @@ @use "../../vars" as *; -.dotdungeon .item--pet { +.dotdungeon:not(.style-v3) .item--pet { padding: 4px; input[type=text] { diff --git a/styles/sheets/items/spell.scss b/styles/sheets/items/spell.scss index 21ba81b..8d4405f 100644 --- a/styles/sheets/items/spell.scss +++ b/styles/sheets/items/spell.scss @@ -1,6 +1,6 @@ @use "../../vars" as *; -.dotdungeon .item--spell { +.dotdungeon:not(.style-v3) .item--spell { padding: 4px; input[type=text] { diff --git a/styles/sheets/partials/panel.scss b/styles/sheets/partials/panel.scss index eb77497..2ebf74c 100644 --- a/styles/sheets/partials/panel.scss +++ b/styles/sheets/partials/panel.scss @@ -2,7 +2,7 @@ @use "../../mixins/foundry" as *; @use "../../vars" as *; -.dotdungeon .actor--pc-mvp .panel { +.dotdungeon:not(.style-v3) .actor--pc-mvp .panel { display: grid; grid-template-rows: min-content 1fr; @@ -39,7 +39,7 @@ } @include bp-s { - .dotdungeon .panel__header .icon { + .dotdungeon:not(.style-v3) .panel__header .icon { display: none; visibility: hidden; } diff --git a/styles/sheets/partials/skill.scss b/styles/sheets/partials/skill.scss index 40b43de..6034e86 100644 --- a/styles/sheets/partials/skill.scss +++ b/styles/sheets/partials/skill.scss @@ -1,4 +1,4 @@ -.dotdungeon .skill { +.dotdungeon:not(.style-v3) .skill { display: flex; flex-direction: row; justify-content: center; diff --git a/styles/sheets/partials/stat.scss b/styles/sheets/partials/stat.scss index 1937854..0cfbe76 100644 --- a/styles/sheets/partials/stat.scss +++ b/styles/sheets/partials/stat.scss @@ -1,4 +1,4 @@ -.dotdungeon .actor--pc-mvp .stat { +.dotdungeon:not(.style-v3) .actor--pc-mvp .stat { display: flex; flex-direction: column; align-items: center; diff --git a/styles/v3/elements/button.scss b/styles/v3/elements/button.scss new file mode 100644 index 0000000..f34c955 --- /dev/null +++ b/styles/v3/elements/button.scss @@ -0,0 +1,43 @@ +@use "../mixins/material" as material; + +.dotdungeon.style-v3 > .window-content button { + @include material.elevate(2); + align-items: center; + border-radius: 4px; + border: none; + box-sizing: border-box; + color: inherit; + cursor: pointer; + display: inline-flex; + font-family: sans-serif; + gap: 4px; + justify-content: center; + margin: 0; + outline: none; + padding: 4px 8px; + transition: all 400ms ease-in-out; + width: initial; + + &:hover, &:focus-visible { + @include material.elevate(4); + } + &:active { + @include material.elevate(6); + } + + &:disabled { + opacity: 50%; + cursor: default; + } + + /* Icon buttons don't use Material styling */ + &.icon { + @include material.undo; + padding: 4px; + + &:focus-visible { + @include material.undo; + // TODO : Accessible focus state + } + } +} diff --git a/styles/v3/elements/headers.scss b/styles/v3/elements/headers.scss new file mode 100644 index 0000000..27c9147 --- /dev/null +++ b/styles/v3/elements/headers.scss @@ -0,0 +1,7 @@ +.dotdungeon.style-v3 > .window-content { + h1, h2, h3, h4, h5, h6 { + border: none; + font-size: 1rem; + margin: 0; + } +} diff --git a/styles/v3/elements/hr.scss b/styles/v3/elements/hr.scss new file mode 100644 index 0000000..3f23a68 --- /dev/null +++ b/styles/v3/elements/hr.scss @@ -0,0 +1,6 @@ +.dotdungeon.style-v3 > .window-content hr { + border-color: black; + opacity: 25%; + width: 100%; + grid-column: 1 / -1; +} diff --git a/styles/v3/elements/icons.scss b/styles/v3/elements/icons.scss new file mode 100644 index 0000000..0a44997 --- /dev/null +++ b/styles/v3/elements/icons.scss @@ -0,0 +1,17 @@ +$iconSizes: 12, 14, 16, 18, 20, 22, 24; + +.dotdungeon.style-v3 > .window-content { + .icon { + display: inline-flex; + justify-content: center; + align-items: center; + + // The various icon sizes + @each $size in $iconSizes { + &--#{$size} { + height: #{$size}px; + width: #{$size}px; + }; + } + } +} diff --git a/styles/v3/index.scss b/styles/v3/index.scss new file mode 100644 index 0000000..8b1a18c --- /dev/null +++ b/styles/v3/index.scss @@ -0,0 +1,33 @@ +/* Element-Styling */ +@use "./elements/button.scss"; +@use "./elements/headers.scss"; +@use "./elements/hr.scss"; +@use "./elements/icons.scss"; + +/* Sheet Options */ +.dotdungeon.style-v3 { + --scrollbar-width: 5px; + --scrollbar-handle-color: #782e22; + --scrollbar-handle-border-color: var(--color-border-highlight); + --color-checkbox-checked: inherit; + ::-webkit-scrollbar { + width: var(--scrollbar-width); + } + ::-webkit-scrollbar-thumb { + background: var(--scrollbar-handle-color); + border-color: var(--scrollbar-handle-border-color); + border-radius: 5px; + } + + container-type: size; + + > .window-content { + padding: 0; + + .debug-data { + opacity: 60%; + font-family: sans-serif; + word-break: break-all; + } + } +} diff --git a/styles/v3/mixins/_material.scss b/styles/v3/mixins/_material.scss new file mode 100644 index 0000000..a869640 --- /dev/null +++ b/styles/v3/mixins/_material.scss @@ -0,0 +1,13 @@ +@mixin elevate($height) { + background-color: var(--elevation-#{$height}dp-bg); + -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); +} + +@mixin undo { + background-color: transparent; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} diff --git a/templates/actors/char-sheet/v2/partials/inventory/item-list.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/item-list.v2.pc.hbs index 4a9d5ed..3cbaac5 100644 --- a/templates/actors/char-sheet/v2/partials/inventory/item-list.v2.pc.hbs +++ b/templates/actors/char-sheet/v2/partials/inventory/item-list.v2.pc.hbs @@ -11,7 +11,7 @@

{{filter.label}}

+ + +
+ + +
+
+
Combat
+
About
+
+
+ Combat Tab +
+
+ \ No newline at end of file