Begin work on the updated item sheet and get the tabs initialized (Closes #141)

This commit is contained in:
Oliver-Akins 2024-03-30 22:02:39 -06:00
parent be31e98dea
commit df316c68f3
12 changed files with 131 additions and 3 deletions

View file

@ -0,0 +1,11 @@
@use "../mixins/material" as material;
.dotdungeon.style-v3 > .window-content {
nav {
display: flex;
flex-direction: row;
overflow-x: auto;
gap: 8px;
padding: 8px;
}
}

View file

@ -1,11 +1,17 @@
/* Themes */
@use "./themes/material.css";
@use "./themes/dark.css";
/* Element-Styling */
@use "./elements/button.scss";
@use "./elements/headers.scss";
@use "./elements/hr.scss";
@use "./elements/icons.scss";
@use "./elements/nav.scss";
/* Sheet Layouts */
@use "./layouts/datasheet.scss";
@use "./layouts/items/untyped.scss";
/* Sheet Options */
.dotdungeon.style-v3 {
@ -26,6 +32,8 @@
> .window-content {
padding: 0;
background: var(--sheet);
color: var(--on-sheet);
.debug-data {
opacity: 60%;

View file

@ -0,0 +1,23 @@
@use "../../mixins/material";
.dotdungeon.style-v3 .item--untyped {
.nav-bar {
@include material.elevate(8);
position: absolute;
bottom: 0;
left: 0;
right: 6px;
nav {
display: flex;
flex-direction: row;
gap: 8px;
padding: 8px;
}
}
.page-content {
padding: 8px;
height: 100%;
}
}

View file

@ -0,0 +1,7 @@
.dotdungeon.style-v3 {
--sheet: #0a0a0a;
--on-sheet: white;
--surface: #121212;
--on-surface: white;
}

View file

@ -0,0 +1,27 @@
/*
These CSS variables are all used in order to try following Material design as
best as I can.
*/
.dotdungeon.style-v3 {
--elevation-0dp-bg: var(--surface);
--elevation-0dp-text: var(--on-surface);
--elevation-1dp-bg: color-mix(in lab, transparent, white 5%);
--elevation-1dp-text: white;
--elevation-2dp-bg: color-mix(in lab, transparent, white 7%);
--elevation-2dp-text: white;
--elevation-3dp-bg: color-mix(in lab, transparent, white 8%);
--elevation-3dp-text: white;
--elevation-4dp-bg: color-mix(in lab, transparent, white 9%);
--elevation-4dp-text: white;
--elevation-6dp-bg: color-mix(in lab, transparent, white 11%);
--elevation-6dp-text: white;
--elevation-8dp-bg: color-mix(in lab, transparent, white 12%);
--elevation-8dp-text: white;
--elevation-12dp-bg: color-mix(in lab, transparent, white 14%);
--elevation-12dp-text: white;
--elevation-16dp-bg: color-mix(in lab, transparent, white 15%);
--elevation-16dp-text: white;
--elevation-24dp-bg: color-mix(in lab, transparent, white 16%);
--elevation-24dp-text: white;
}