From cd6554289b97385374e8e534642b2645f8445dc7 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Oliver.akins1999@gmail.com>
Date: Mon, 4 Mar 2024 19:38:58 -0700
Subject: [PATCH] Make the nav buttons look like designs (closes #107)

---
 styles/global/buttons.scss                           |  2 +-
 styles/sheets/actor/char-sheet/themes/dark.scss      |  1 +
 styles/sheets/actor/char-sheet/v2.scss               | 12 ++++++++++--
 .../actors/char-sheet/v2/partials/stats.v2.pc.hbs    |  2 +-
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/styles/global/buttons.scss b/styles/global/buttons.scss
index ced06f9..0159a03 100644
--- a/styles/global/buttons.scss
+++ b/styles/global/buttons.scss
@@ -2,7 +2,7 @@
 
 @use "sass:color" as color;
 
-.dotdungeon.dotdungeon.dotdungeon.dotdungeon > .window-content {
+.dotdungeon.dotdungeon > .window-content {
 	button {
 		border-radius: 4px;
 		box-sizing: border-box;
diff --git a/styles/sheets/actor/char-sheet/themes/dark.scss b/styles/sheets/actor/char-sheet/themes/dark.scss
index 1add0fd..9690fb8 100644
--- a/styles/sheets/actor/char-sheet/themes/dark.scss
+++ b/styles/sheets/actor/char-sheet/themes/dark.scss
@@ -12,6 +12,7 @@ $on-secondary: $t;
 .actor--pc-v2 {
 	--sheet-bg: #{$background};
 	--nav-bg: #{$surface};
+	--nav-button-text: #{$on-surface};
 
 	/* Elevation backgrounds to following Material design */
 	--elevation-0dp-bg: #{$surface};
diff --git a/styles/sheets/actor/char-sheet/v2.scss b/styles/sheets/actor/char-sheet/v2.scss
index 340f929..d61ef18 100644
--- a/styles/sheets/actor/char-sheet/v2.scss
+++ b/styles/sheets/actor/char-sheet/v2.scss
@@ -39,10 +39,18 @@
 			@include material.elevate(2);
 			height: 36px;
 			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 {
-				// background: color-mix(in lab, inherit, currentColor 4%);
-				@include material.elevate(4);
+				@include material.elevate(6);
+				background: hsl( from currentColor / 50% ); // probably gonna need color-mix
 			}
 		}
 	}
diff --git a/templates/actors/char-sheet/v2/partials/stats.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/stats.v2.pc.hbs
index e3ae794..b9cb833 100644
--- a/templates/actors/char-sheet/v2/partials/stats.v2.pc.hbs
+++ b/templates/actors/char-sheet/v2/partials/stats.v2.pc.hbs
@@ -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 |}}
 		<div class="e-1dp stat">
 			<div class="stat__header">