Get the basic listing of attributes for the tab

This commit is contained in:
Oliver 2026-04-25 15:31:24 -06:00
parent c2b2376699
commit 7b127069b7
6 changed files with 95 additions and 19 deletions

View file

@ -37,7 +37,8 @@
}
}
.items-tab.active {
.items-tab.active,
.attributes-tab.active {
display: flex;
flex-direction: column;
gap: 8px;
@ -67,7 +68,7 @@
}
}
.item-list-header {
.embedded-list-header {
display: flex;
flex-direction: row;
align-items: center;
@ -75,8 +76,8 @@
border-radius: 6px 6px 0 0;
padding: 6px 6px 4px;
margin-bottom: 2px;
background: var(--item-list-header-background);
color: var(--item-list-header-colour);
background: var(--embedded-list-header-background);
color: var(--embedded-list-header-colour);
button {
padding: 2px;
@ -84,12 +85,12 @@
aspect-ratio: 1;
height: unset;
min-height: unset;
background: var(--item-list-header-input-background);
color: var(--item-list-header-input-colour);
background: var(--embedded-list-header-input-background);
color: var(--embedded-list-header-input-colour);
}
}
.item-list {
.embedded-list {
display: flex;
flex-direction: column;
gap: 2px;
@ -172,6 +173,38 @@
}
}
.attribute {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
background: var(--attribute-background);
color: var(--attribute-colour);
padding: 4px;
.name {
font-size: 1.1rem;
}
input {
width: 50px;
}
input, button {
background: var(--item-card-header-input-background);
color: var(--item-card-header-input-colour);
text-align: center;
&:disabled {
color: var(--item-card-header-disabled-input-colour);
}
}
&:last-child {
border-radius: 0 0 6px 6px;
}
}
.content {
flex-grow: 1;
overflow: hidden;

View file

@ -19,10 +19,16 @@
--inventory-input-colour: var(--steel-100);
--inventory-input-disabled-colour: var(--steel-350);
--item-list-header-background: var(--steel-800);
--item-list-header-colour: var(--steel-100);
--item-list-header-input-background: var(--steel-650);
--item-list-header-input-colour: var(--steel-100);
--embedded-list-header-background: var(--steel-800);
--embedded-list-header-colour: var(--steel-100);
--embedded-list-header-input-background: var(--steel-650);
--embedded-list-header-input-colour: var(--steel-100);
--attribute-background: var(--steel-700);
--attribute-colour: var(--steel-100);
--attribute-input-background: var(--steel-650);
--attribute-input-colour: var(--steel-100);
--attribute-disabled-input-colour: var(--steel-350);
--item-card-background: #1d262f;
--item-card-colour: var(--steel-100);