Get the material items finished
This commit is contained in:
Oliver-Akins
parent
310ac07c88
commit
83d0bad21f
8 changed files with 146 additions and 9 deletions
15
styles/sheets/actor/char-sheet/v2/material/inputs.scss
Normal file
15
styles/sheets/actor/char-sheet/v2/material/inputs.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
.dotdungeon.material {
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
|
||||
&.outline {
|
||||
border-style: solid;
|
||||
border-color: var(--outline-button-border);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 37%;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
156
styles/sheets/actor/char-sheet/v2/pages/inventory.scss
Normal file
156
styles/sheets/actor/char-sheet/v2/pages/inventory.scss
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
@use "../../../../../mixins/material" as material;
|
||||
|
||||
.dotdungeon .actor--pc-v2 .active.inventory-page {
|
||||
padding-bottom: 50px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dotdungeon .actor--pc-v2 .inventory-page .active.tab[data-tab="player"] {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-template-rows: 1fr repeat(4, min-content);
|
||||
height: 100%;
|
||||
color: white;
|
||||
|
||||
.item-list {
|
||||
grid-row: 1 / -1;
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
&__group {
|
||||
@include material.elevate(1);
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.bytes-panel {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr min-content 50px min-content;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
justify-self: left;
|
||||
}
|
||||
|
||||
input {
|
||||
@include material.elevate(3);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
@include material.elevate(6);
|
||||
background: hsl( from currentColor / 50% ); // probably gonna need color-mix
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
border-width: 2px;
|
||||
border-color: currentColor;
|
||||
background: var(--elevation-8dp-bg);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.capacity-panel {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 30px min-content 30px;
|
||||
|
||||
.used, .total {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: repeat(6, 1fr);
|
||||
gap: 8px;
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: right;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item-list {
|
||||
.material-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.material {
|
||||
@include material.elevate(1);
|
||||
padding: 8px;
|
||||
gap: 8px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr min-content 50px min-content;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
|
||||
&__label {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
justify-self: left;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&__button {
|
||||
--size: 28px;
|
||||
@include material.elevate(2);
|
||||
transition: all 400ms ease-in-out;
|
||||
color: var(--inventory-material-color);
|
||||
border-width: 0;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
|
||||
&:hover {
|
||||
@include material.elevate(4);
|
||||
color: var(--inventory-material-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
@include material.elevate(2);
|
||||
font-family: var(--input-font);
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
transition: all 400ms ease-in-out;
|
||||
color: var(--inventory-material-color);
|
||||
|
||||
&:hover {
|
||||
@include material.elevate(4);
|
||||
color: var(--inventory-material-hover-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include material.elevate(8);
|
||||
color: var(--inventory-material-focus-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
79
styles/sheets/actor/char-sheet/v2/pages/stats.scss
Normal file
79
styles/sheets/actor/char-sheet/v2/pages/stats.scss
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
.dotdungeon .actor--pc-v2 .active.stats-page {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto auto;
|
||||
|
||||
.stat {
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
select {
|
||||
height: 100%;
|
||||
outline: none;
|
||||
border: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__header {
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
color: var(--stat-divider-text-color);
|
||||
gap: 8px;
|
||||
> h2 {
|
||||
flex-grow: 1;
|
||||
color: var(--stat-header-text-color);
|
||||
}
|
||||
.dice-select {
|
||||
color: var(--stat-dice-select-text-color);
|
||||
option {
|
||||
background: var(--stat-dice-select-bg);
|
||||
}
|
||||
}
|
||||
.roll-stat {
|
||||
color: var(--stat-roll-button-text-color);
|
||||
}
|
||||
|
||||
&:not(:only-child) {
|
||||
border-bottom: 1px solid var(--stat-divider-color);
|
||||
}
|
||||
}
|
||||
|
||||
&__empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&__skills {
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
padding: 8px;
|
||||
|
||||
.skill {
|
||||
&__label {
|
||||
text-align: end;
|
||||
justify-self: right;
|
||||
color: var(--skill-name-text-color);
|
||||
}
|
||||
&__training {
|
||||
color: var(--skill-training-select-text-color);
|
||||
option {
|
||||
background: var(--skill-training-select-bg);
|
||||
}
|
||||
}
|
||||
&__roll {
|
||||
margin-right: 25%;
|
||||
color: var(--skill-roll-button-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
49
styles/sheets/actor/char-sheet/v2/themes/dark.scss
Normal file
49
styles/sheets/actor/char-sheet/v2/themes/dark.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
$t: transparent;
|
||||
|
||||
$background: #0a0a0a;
|
||||
$surface: #121212;
|
||||
$primary: #005300;
|
||||
$secondary: #6c056c;
|
||||
$on-background: $t;
|
||||
$on-surface: white;
|
||||
$on-primary: $t;
|
||||
$on-secondary: $t;
|
||||
|
||||
$title-font: 'Pixelify Sans', sans-serif;
|
||||
$body-font: sans-serif;
|
||||
|
||||
.actor--pc-v2 {
|
||||
--sheet-bg: #{$background};
|
||||
--nav-bg: #{$surface};
|
||||
--nav-button-text: #{$on-surface};
|
||||
|
||||
--tab-font: #{$title-font};
|
||||
--input-font: #{$body-font};
|
||||
|
||||
/* Elevation backgrounds to following Material design */
|
||||
--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-header-text-color: #{$on-surface};
|
||||
--stat-dice-select-text-color: #{$on-surface};
|
||||
--stat-dice-select-bg: #{$surface};
|
||||
--stat-roll-button-text-color: #{$on-surface};
|
||||
--stat-divider-color: #{$secondary};
|
||||
--stat-not-chosen-placeholder-text-color: #{$on-surface};
|
||||
--skill-name-text-color: #{$on-surface};
|
||||
--skill-training-select-bg: #{$surface};
|
||||
--skill-training-select-text-color: #{$on-surface};
|
||||
--skill-roll-button-text-color: #{$on-surface};
|
||||
|
||||
--inventory-material-color: white;
|
||||
--inventory-material-hover-color: white;
|
||||
--inventory-material-focus-color: white;
|
||||
}
|
||||
167
styles/sheets/actor/char-sheet/v2/themes/material-design.scss
Normal file
167
styles/sheets/actor/char-sheet/v2/themes/material-design.scss
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
:root {
|
||||
--md-source: #005500;
|
||||
/* primary */
|
||||
--md-ref-palette-primary0: #000000;
|
||||
--md-ref-palette-primary10: #002200;
|
||||
--md-ref-palette-primary20: #003a00;
|
||||
--md-ref-palette-primary25: #004600;
|
||||
--md-ref-palette-primary30: #005300;
|
||||
--md-ref-palette-primary35: #12600b;
|
||||
--md-ref-palette-primary40: #226d19;
|
||||
--md-ref-palette-primary50: #3d8730;
|
||||
--md-ref-palette-primary60: #56a248;
|
||||
--md-ref-palette-primary70: #70bd5f;
|
||||
--md-ref-palette-primary80: #8bd978;
|
||||
--md-ref-palette-primary90: #a6f691;
|
||||
--md-ref-palette-primary95: #caffb9;
|
||||
--md-ref-palette-primary98: #edffe1;
|
||||
--md-ref-palette-primary99: #f7ffee;
|
||||
--md-ref-palette-primary100: #ffffff;
|
||||
/* secondary */
|
||||
--md-ref-palette-secondary0: #000000;
|
||||
--md-ref-palette-secondary10: #380038;
|
||||
--md-ref-palette-secondary20: #5b005b;
|
||||
--md-ref-palette-secondary25: #6c056c;
|
||||
--md-ref-palette-secondary30: #7a1979;
|
||||
--md-ref-palette-secondary35: #892886;
|
||||
--md-ref-palette-secondary40: #973693;
|
||||
--md-ref-palette-secondary50: #b450ae;
|
||||
--md-ref-palette-secondary60: #d26ac9;
|
||||
--md-ref-palette-secondary70: #f084e6;
|
||||
--md-ref-palette-secondary80: #ffaaf3;
|
||||
--md-ref-palette-secondary90: #ffd7f5;
|
||||
--md-ref-palette-secondary95: #ffebf8;
|
||||
--md-ref-palette-secondary98: #fff7f9;
|
||||
--md-ref-palette-secondary99: #fffbff;
|
||||
--md-ref-palette-secondary100: #ffffff;
|
||||
/* tertiary */
|
||||
--md-ref-palette-tertiary0: #000000;
|
||||
--md-ref-palette-tertiary10: #002022;
|
||||
--md-ref-palette-tertiary20: #003739;
|
||||
--md-ref-palette-tertiary25: #104245;
|
||||
--md-ref-palette-tertiary30: #1e4d50;
|
||||
--md-ref-palette-tertiary35: #2b595c;
|
||||
--md-ref-palette-tertiary40: #386568;
|
||||
--md-ref-palette-tertiary50: #517f82;
|
||||
--md-ref-palette-tertiary60: #6b989c;
|
||||
--md-ref-palette-tertiary70: #85b3b6;
|
||||
--md-ref-palette-tertiary80: #a0cfd2;
|
||||
--md-ref-palette-tertiary90: #bcebee;
|
||||
--md-ref-palette-tertiary95: #caf9fd;
|
||||
--md-ref-palette-tertiary98: #e7feff;
|
||||
--md-ref-palette-tertiary99: #f3ffff;
|
||||
--md-ref-palette-tertiary100: #ffffff;
|
||||
/* neutral */
|
||||
--md-ref-palette-neutral0: #000000;
|
||||
--md-ref-palette-neutral10: #1a1c18;
|
||||
--md-ref-palette-neutral20: #2f312d;
|
||||
--md-ref-palette-neutral25: #3a3c38;
|
||||
--md-ref-palette-neutral30: #454743;
|
||||
--md-ref-palette-neutral35: #51534e;
|
||||
--md-ref-palette-neutral40: #5d5f5a;
|
||||
--md-ref-palette-neutral50: #767872;
|
||||
--md-ref-palette-neutral60: #90918c;
|
||||
--md-ref-palette-neutral70: #abaca6;
|
||||
--md-ref-palette-neutral80: #c6c7c1;
|
||||
--md-ref-palette-neutral90: #e2e3dc;
|
||||
--md-ref-palette-neutral95: #f1f1eb;
|
||||
--md-ref-palette-neutral98: #f9faf3;
|
||||
--md-ref-palette-neutral99: #fcfdf6;
|
||||
--md-ref-palette-neutral100: #ffffff;
|
||||
/* neutral-variant */
|
||||
--md-ref-palette-neutral-variant0: #000000;
|
||||
--md-ref-palette-neutral-variant10: #181d15;
|
||||
--md-ref-palette-neutral-variant20: #2c3229;
|
||||
--md-ref-palette-neutral-variant25: #373d34;
|
||||
--md-ref-palette-neutral-variant30: #43483f;
|
||||
--md-ref-palette-neutral-variant35: #4e544a;
|
||||
--md-ref-palette-neutral-variant40: #5a6056;
|
||||
--md-ref-palette-neutral-variant50: #73796e;
|
||||
--md-ref-palette-neutral-variant60: #8d9387;
|
||||
--md-ref-palette-neutral-variant70: #a7ada1;
|
||||
--md-ref-palette-neutral-variant80: #c3c8bc;
|
||||
--md-ref-palette-neutral-variant90: #dfe4d7;
|
||||
--md-ref-palette-neutral-variant95: #edf3e5;
|
||||
--md-ref-palette-neutral-variant98: #f6fbee;
|
||||
--md-ref-palette-neutral-variant99: #f9fef1;
|
||||
--md-ref-palette-neutral-variant100: #ffffff;
|
||||
/* error */
|
||||
--md-ref-palette-error0: #000000;
|
||||
--md-ref-palette-error10: #410002;
|
||||
--md-ref-palette-error20: #690005;
|
||||
--md-ref-palette-error25: #7e0007;
|
||||
--md-ref-palette-error30: #93000a;
|
||||
--md-ref-palette-error35: #a80710;
|
||||
--md-ref-palette-error40: #ba1a1a;
|
||||
--md-ref-palette-error50: #de3730;
|
||||
--md-ref-palette-error60: #ff5449;
|
||||
--md-ref-palette-error70: #ff897d;
|
||||
--md-ref-palette-error80: #ffb4ab;
|
||||
--md-ref-palette-error90: #ffdad6;
|
||||
--md-ref-palette-error95: #ffedea;
|
||||
--md-ref-palette-error98: #fff8f7;
|
||||
--md-ref-palette-error99: #fffbff;
|
||||
--md-ref-palette-error100: #ffffff;
|
||||
/* light */
|
||||
--md-sys-color-primary-light: #226d19;
|
||||
--md-sys-color-on-primary-light: #ffffff;
|
||||
--md-sys-color-primary-container-light: #a6f691;
|
||||
--md-sys-color-on-primary-container-light: #002200;
|
||||
--md-sys-color-secondary-light: #973693;
|
||||
--md-sys-color-on-secondary-light: #ffffff;
|
||||
--md-sys-color-secondary-container-light: #ffd7f5;
|
||||
--md-sys-color-on-secondary-container-light: #380038;
|
||||
--md-sys-color-tertiary-light: #386568;
|
||||
--md-sys-color-on-tertiary-light: #ffffff;
|
||||
--md-sys-color-tertiary-container-light: #bcebee;
|
||||
--md-sys-color-on-tertiary-container-light: #002022;
|
||||
--md-sys-color-error-light: #ba1a1a;
|
||||
--md-sys-color-error-container-light: #ffdad6;
|
||||
--md-sys-color-on-error-light: #ffffff;
|
||||
--md-sys-color-on-error-container-light: #410002;
|
||||
--md-sys-color-background-light: #fcfdf6;
|
||||
--md-sys-color-on-background-light: #1a1c18;
|
||||
--md-sys-color-surface-light: #fcfdf6;
|
||||
--md-sys-color-on-surface-light: #1a1c18;
|
||||
--md-sys-color-surface-variant-light: #dfe4d7;
|
||||
--md-sys-color-on-surface-variant-light: #43483f;
|
||||
--md-sys-color-outline-light: #73796e;
|
||||
--md-sys-color-inverse-on-surface-light: #f1f1eb;
|
||||
--md-sys-color-inverse-surface-light: #2f312d;
|
||||
--md-sys-color-inverse-primary-light: #8bd978;
|
||||
--md-sys-color-shadow-light: #000000;
|
||||
--md-sys-color-surface-tint-light: #226d19;
|
||||
--md-sys-color-outline-variant-light: #c3c8bc;
|
||||
--md-sys-color-scrim-light: #000000;
|
||||
/* dark */
|
||||
--md-sys-color-primary-dark: #8bd978;
|
||||
--md-sys-color-on-primary-dark: #003a00;
|
||||
--md-sys-color-primary-container-dark: #005300;
|
||||
--md-sys-color-on-primary-container-dark: #a6f691;
|
||||
--md-sys-color-secondary-dark: #ffaaf3;
|
||||
--md-sys-color-on-secondary-dark: #5b005b;
|
||||
--md-sys-color-secondary-container-dark: #7a1979;
|
||||
--md-sys-color-on-secondary-container-dark: #ffd7f5;
|
||||
--md-sys-color-tertiary-dark: #a0cfd2;
|
||||
--md-sys-color-on-tertiary-dark: #003739;
|
||||
--md-sys-color-tertiary-container-dark: #1e4d50;
|
||||
--md-sys-color-on-tertiary-container-dark: #bcebee;
|
||||
--md-sys-color-error-dark: #ffb4ab;
|
||||
--md-sys-color-error-container-dark: #93000a;
|
||||
--md-sys-color-on-error-dark: #690005;
|
||||
--md-sys-color-on-error-container-dark: #ffdad6;
|
||||
--md-sys-color-background-dark: #1a1c18;
|
||||
--md-sys-color-on-background-dark: #e2e3dc;
|
||||
--md-sys-color-surface-dark: #1a1c18;
|
||||
--md-sys-color-on-surface-dark: #e2e3dc;
|
||||
--md-sys-color-surface-variant-dark: #43483f;
|
||||
--md-sys-color-on-surface-variant-dark: #c3c8bc;
|
||||
--md-sys-color-outline-dark: #8d9387;
|
||||
--md-sys-color-inverse-on-surface-dark: #1a1c18;
|
||||
--md-sys-color-inverse-surface-dark: #e2e3dc;
|
||||
--md-sys-color-inverse-primary-dark: #226d19;
|
||||
--md-sys-color-shadow-dark: #000000;
|
||||
--md-sys-color-surface-tint-dark: #8bd978;
|
||||
--md-sys-color-outline-variant-dark: #43483f;
|
||||
--md-sys-color-scrim-dark: #000000;
|
||||
}
|
||||
69
styles/sheets/actor/char-sheet/v2/v2.scss
Normal file
69
styles/sheets/actor/char-sheet/v2/v2.scss
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
@use "./themes/dark.scss";
|
||||
@use "../../../../mixins/material" as material;
|
||||
@use "../../../../mixins/partials" as partials;
|
||||
|
||||
@use "./pages/stats.scss";
|
||||
@use "./pages/inventory.scss";
|
||||
|
||||
.dotdungeon .actor--pc-v2 {
|
||||
background-color: var(--sheet-bg);
|
||||
|
||||
.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); }
|
||||
|
||||
.scrollable {
|
||||
container-type: size;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
@include material.elevate(8);
|
||||
background: color-mix(in lab, var(--nav-bg), white 5%);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: calc(100% - 6px);
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
@include partials.sub-nav("page", "inventory", flex);
|
||||
|
||||
button {
|
||||
@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 {
|
||||
@include material.elevate(6);
|
||||
background: hsl( from currentColor / 50% ); // probably gonna need color-mix
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
padding: 16px;
|
||||
padding-bottom: 69px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue