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

Begin implementation of the Stats / Skills tab

Browse source
This commit is contained in:
Oliver-Akins 2024-02-29 22:35:28 -07:00
parent 753d72b4e0
commit 0e8d1615a7
16 changed files with 292 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

48
styles/sheets/actor/char-sheet/pages/stats.scss Normal file
View file

@ -0,0 +1,48 @@
.dotdungeon .actor--pc .active.stats-panel {
display: grid;
height: 100%;
gap: 16px;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
.stat {
border-radius: 8px;
color: white;
select {
height: 100%;
outline: none;
border: none;
}
&__header {
padding: 8px;
display: flex;
align-items: center;
flex-direction: row;
color: var(--stat-divider-text-color);
gap: 8px;
> :first-child {
flex-grow: 1;
}
&:not(:only-child) {
border-bottom: 1px solid var(--stat-divider-color);
}
}
&__skills {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin: 8px;
align-items: center;
label {
text-align: end;
justify-self: right;
}
button {
margin-right: 25%;
}
}
}
}

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

@ -2,8 +2,8 @@ $t: transparent;
$background: #0a0a0a;
$surface: #121212;
$primary: $t;
$secondary: $t;
$primary: #005300;
$secondary: #6c056c;
$on-background: $t;
$on-surface: $t;
$on-primary: $t;
@ -12,17 +12,19 @@ $on-secondary: $t;
.actor--pc {
--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%);
--elevation-0dp-bg: #{$surface};
--elevation-1dp-bg: color-mix(in lab, transparent, white 5%);
--elevation-2dp-bg: color-mix(in lab, transparent, white 7%);
--elevation-3dp-bg: color-mix(in lab, transparent, white 8%);
--elevation-4dp-bg: color-mix(in lab, transparent, white 9%);
--elevation-6dp-bg: color-mix(in lab, transparent, white 11%);
--elevation-8dp-bg: color-mix(in lab, transparent, white 12%);
--elevation-12dp-bg: color-mix(in lab, transparent, white 14%);
--elevation-16dp-bg: color-mix(in lab, transparent, white 15%);
--elevation-24dp-bg: color-mix(in lab, transparent, white 16%);
--stat-divider-color: #{$secondary};
--stat-header-text-color: white;
}

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

@ -1,26 +1,34 @@
@use "./themes/dark.scss";
@use "../../../mixins/material" as material;
@use "./pages/stats.scss";
.dotdungeon .actor--pc {
background-color: var(--sheet-bg);
display: grid;
grid-template-rows: 1fr minmax(min-content, 50px);
position: relative;
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; }
.e-0dp { @include material.elevate(0); }
.e-1dp { @include material.elevate(1); }
.e-2dp { @include material.elevate(2); }
.e-3dp { @include material.elevate(3); }
.e-4dp { @include material.elevate(4); }
.e-6dp { @include material.elevate(6); }
.e-8dp { @include material.elevate(8); }
.e-12dp { @include material.elevate(12); }
.e-16dp { @include material.elevate(16); }
.e-24dp { @include material.elevate(24); }
nav {
background-color: var(--nav-bg);
@include material.elevate(02)
@include material.elevate(02);
position: absolute;
bottom: 0;
width: 100%;
}
}
.page-content {
padding: 16px;
}
}