uberwald/foundryvtt-mgt2
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: complete visual redesign of all item sheets + compact chat roll messages

Browse Source 
- Rewrote _item.sass with unified layout: type-bar + dark header + stats pills + tabs
 - All 11 item templates converted to new pill-based stats bar
 - Chat roll message font sizes and padding compacted
 - Physical item partial rewritten as stat pills (QTY/WEIGHT/COST/TL)
 - Legacy itemsheet-header and itemsheet-maincol hidden
This commit is contained in:
LeRatierBretonnier
2026-04-19 21:31:52 +02:00
parent d62d14c1da
commit df0a93d715
15 changed files with 978 additions and 679 deletions
Download Patch File Download Diff File Expand all files Collapse all files

375
src/sass/components/_item.sass
View File

@@ -1,38 +1,345 @@
// ─── MGT2 Item Sheets ─────────────────────────────────────────────────────────
// New unified layout: type-bar → header (image+name) → stats-bar → full-width tabs
// ── Outer window ──────────────────────────────────────────────────────────────
.itemsheet
display: flex
flex-wrap: nowrap
flex-direction: row
display: flex !important
flex-direction: column !important
height: 100% !important
background: #ffffff !important
overflow: hidden !important
// ── Type bar (replaces vertical sidebar label) ────────────────────────────────
.item-type-bar
background: #0A0405 !important
border-bottom: 3px solid #EE4050 !important
padding: 4px 12px !important
display: flex !important
align-items: center !important
gap: 8px !important
min-height: 0 !important
flex-shrink: 0 !important
.item-type-label
color: #EE4050 !important
font-family: 'Barlow Condensed', sans-serif !important
font-size: 0.65rem !important
font-weight: 700 !important
text-transform: uppercase !important
letter-spacing: 2px !important
// ── Header: image + name ──────────────────────────────────────────────────────
.item-sheet-header
background: #0A0405 !important
padding: 10px 14px !important
display: flex !important
align-items: center !important
gap: 12px !important
flex-shrink: 0 !important
.item-header-img
width: 64px !important
height: 64px !important
object-fit: cover !important
border: 2px solid #EE4050 !important
border-radius: 4px !important
cursor: pointer !important
flex-shrink: 0 !important
.item-header-name
flex: 1 !important
background: transparent !important
border: none !important
border-bottom: 1px solid rgba(238,64,80,0.4) !important
color: #ffffff !important
font-family: 'Barlow Condensed', sans-serif !important
font-size: 1.6rem !important
font-weight: 800 !important
text-transform: uppercase !important
letter-spacing: 1px !important
padding: 2px 0 !important
line-height: 1.1 !important
width: 100% !important
&:focus
outline: none !important
border-bottom-color: #EE4050 !important
&::placeholder
color: rgba(255,255,255,0.35) !important
// ── Stats bar (pills) ─────────────────────────────────────────────────────────
.item-stats-bar
background: #f5eeee !important
border-bottom: 1px solid #ddc8c8 !important
padding: 6px 14px !important
display: flex !important
flex-wrap: wrap !important
gap: 6px !important
flex-shrink: 0 !important
.item-stat-pill
display: flex !important
flex-direction: column !important
align-items: center !important
background: #ffffff !important
border: 1px solid #ddc8c8 !important
border-radius: 4px !important
padding: 3px 10px !important
min-width: 56px !important
.stat-label
color: #664444 !important
font-family: 'Barlow Condensed', sans-serif !important
font-size: 0.6rem !important
font-weight: 700 !important
text-transform: uppercase !important
letter-spacing: 1.5px !important
line-height: 1.2 !important
.stat-value
color: #0A0405 !important
font-family: 'Barlow Condensed', sans-serif !important
font-size: 1rem !important
font-weight: 800 !important
line-height: 1.1 !important
input, select
color: #0A0405 !important
font-family: 'Barlow Condensed', sans-serif !important
font-size: 1rem !important
font-weight: 800 !important
background: transparent !important
border: none !important
text-align: center !important
width: 100% !important
padding: 0 !important
line-height: 1.1 !important
&:focus
outline: none !important
border-bottom: 1px solid #EE4050 !important
.item-stat-pill-checkbox
display: flex !important
flex-direction: row !important
align-items: center !important
gap: 5px !important
background: #ffffff !important
border: 1px solid #ddc8c8 !important
border-radius: 4px !important
padding: 4px 10px !important
input[type="checkbox"]
margin: 0 !important
width: 14px !important
height: 14px !important
accent-color: #EE4050 !important
label
color: #664444 !important
font-family: 'Barlow Condensed', sans-serif !important
font-size: 0.65rem !important
font-weight: 700 !important
text-transform: uppercase !important
letter-spacing: 1px !important
cursor: pointer !important
// ── Tabs navigation ───────────────────────────────────────────────────────────
.itemsheet
.horizontal-tabs.tabs
background: #f5eeee !important
border-bottom: 2px solid #ddc8c8 !important
display: flex !important
flex-wrap: wrap !important
gap: 0 !important
padding: 0 10px !important
flex-shrink: 0 !important
.item.tab-select
color: #664444 !important
font-family: 'Barlow Condensed', sans-serif !important
font-size: 0.72rem !important
font-weight: 700 !important
text-transform: uppercase !important
letter-spacing: 1.5px !important
padding: 6px 14px !important
border: none !important
border-bottom: 2px solid transparent !important
margin-bottom: -2px !important
background: transparent !important
cursor: pointer !important
transition: color 0.15s, border-color 0.15s !important
&:hover
color: #EE4050 !important
&.active
color: #EE4050 !important
border-bottom-color: #EE4050 !important
background: transparent !important
// ── Tab content area ──────────────────────────────────────────────────────────
.itemsheet
.tab-content-area
flex: 1 !important
overflow-y: auto !important
padding: 10px 14px !important
background: #ffffff !important
.tab[data-group]
display: none !important
&.active
display: block !important
// ── Fields inside item sheets ─────────────────────────────────────────────────
.itemsheet
.field-group
margin-bottom: 8px !important
label
display: block !important
color: #664444 !important
font-family: 'Barlow Condensed', sans-serif !important
font-size: 0.68rem !important
font-weight: 700 !important
text-transform: uppercase !important
letter-spacing: 1px !important
margin-bottom: 2px !important
.field-groups
display: flex !important
flex-wrap: wrap !important
gap: 10px !important
align-items: flex-start !important
.field-group
flex: 1 !important
min-width: 80px !important
input[type="text"],
input[type="number"],
select,
textarea
background: #fdf8f8 !important
border: 1px solid #ddc8c8 !important
border-radius: 3px !important
color: #0A0405 !important
font-family: 'Barlow Condensed', sans-serif !important
font-size: 0.85rem !important
padding: 4px 8px !important
width: 100% !important
&:focus
outline: none !important
border-color: #EE4050 !important
box-shadow: 0 0 0 2px rgba(238,64,80,0.12) !important
textarea
resize: vertical !important
min-height: 80px !important
.mgt2-checkbox
display: flex !important
align-items: center !important
gap: 6px !important
color: #664444 !important
font-family: 'Barlow Condensed', sans-serif !important
font-size: 0.72rem !important
font-weight: 700 !important
text-transform: uppercase !important
letter-spacing: 1px !important
input[type="checkbox"]
width: 14px !important
height: 14px !important
margin: 0 !important
accent-color: #EE4050 !important
// ── Tables inside item sheets ─────────────────────────────────────────────────
.itemsheet
.table-container
border: 1px solid #ddc8c8 !important
border-radius: 4px !important
overflow: hidden !important
margin-top: 8px !important
.table-row
display: flex !important
align-items: stretch !important
border-bottom: 1px solid #e8dada !important
&:last-child
border-bottom: none !important
&.heading
background: #0A0405 !important
color: #EE4050 !important
.row-item
color: #EE4050 !important
font-family: 'Barlow Condensed', sans-serif !important
font-size: 0.68rem !important
font-weight: 700 !important
text-transform: uppercase !important
letter-spacing: 1px !important
padding: 5px 8px !important
&:not(.heading)
background: #ffffff !important
&:nth-child(even)
background: #fdf8f8 !important
.row-item
padding: 4px 6px !important
input, textarea, select
font-size: 0.8rem !important
padding: 2px 6px !important
.row-item
flex: 1 !important
border-right: 1px solid #e8dada !important
&:last-child
border-right: none !important
&.row-item-left
justify-content: flex-start !important
&.row-item-right
flex: 0 0 auto !important
min-width: 36px !important
display: flex !important
align-items: center !important
justify-content: center !important
&.row-item-30
flex: 0 0 30% !important
.item-controls
display: flex !important
align-items: center !important
justify-content: center !important
gap: 6px !important
a
color: #888888 !important
cursor: pointer !important
&:hover
color: #EE4050 !important
// ── Legacy classes kept for compatibility ─────────────────────────────────────
// (old structure hidden, new structure used)
.itemsheet-header
display: flex
background-color: var(--mgt2-bgcolor-primary)
color: var(--mgt2-color-primary)
padding: 0.5rem
align-items: center
flex: 0 0 2rem
label
writing-mode: tb-rl
transform: rotate(-180deg)
font-weight: 700
font-size: 20px
letter-spacing: 5px
font-family: "Rubik Mono One", monospace
font-style: normal
text-transform: uppercase
display: none !important
.itemsheet-maincol
flex: 0 0 130px
padding: 0 1rem 0 0
display: none !important
.itemsheet-panel
display: flex
flex: inherit
padding: 1rem
img
&.profile-img
width: 100px
height: 100px
.itemsheet input,
.itemsheet select
color: var(--mgt2-input-color)
background-color: var(--mgt2-input-bgcolor)
display: block
width: 100%
font-size: 13px
display: contents !important