Make the nav buttons look like designs (closes #107)
This commit is contained in:
parent
5f09f92790
commit
cd6554289b
4 changed files with 13 additions and 4 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue