Foundry/.dungeon
0
0
Fork 0
Code Issues 57 Pull requests Projects Releases 7 Packages Wiki Activity Actions

Make the nav buttons look like designs (closes #107)

Browse source
This commit is contained in:
Oliver-Akins 2024-03-04 19:38:58 -07:00
parent 5f09f92790
commit cd6554289b
4 changed files with 13 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
styles/global/buttons.scss
View file

@ -2,7 +2,7 @@
@use "sass:color" as color; @use "sass:color" as color;
.dotdungeon.dotdungeon.dotdungeon.dotdungeon > .window-content { .dotdungeon.dotdungeon > .window-content {
button { button {
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;

1
styles/sheets/actor/char-sheet/themes/dark.scss
View file

@ -12,6 +12,7 @@ $on-secondary: $t;
.actor--pc-v2 { .actor--pc-v2 {
--sheet-bg: #{$background}; --sheet-bg: #{$background};
--nav-bg: #{$surface}; --nav-bg: #{$surface};
--nav-button-text: #{$on-surface};
/* Elevation backgrounds to following Material design */ /* Elevation backgrounds to following Material design */
--elevation-0dp-bg: #{$surface}; --elevation-0dp-bg: #{$surface};

12
styles/sheets/actor/char-sheet/v2.scss
View file

@ -39,10 +39,18 @@
@include material.elevate(2); @include material.elevate(2);
height: 36px; height: 36px;
box-sizing: border-box; box-sizing: border-box;
color: var(--nav-button-text);
&:focus-visible {
border-style: solid;
border-width: 2px;
border-color: currentColor;
background: var(--elevation-8dp-bg);
}
&:hover { &:hover {
// background: color-mix(in lab, inherit, currentColor 4%); @include material.elevate(6);
@include material.elevate(4); background: hsl( from currentColor / 50% ); // probably gonna need color-mix
} }
} }
} }

2
templates/actors/char-sheet/v2/partials/stats.v2.pc.hbs
View file

@ -1,4 +1,4 @@
<div class="tab stats-panel" data-group="page" data-tab="stats"> <div class="tab stats-page" data-group="page" data-tab="stats">
{{#each computed.stats as | stat |}} {{#each computed.stats as | stat |}}
<div class="e-1dp stat"> <div class="e-1dp stat">
<div class="stat__header"> <div class="stat__header">