MayaTheShy/Inventory-Manager-CC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor category tabs and item grid styles: adjust padding, margins, and colors for improved UI consistency

Browse Source
This commit is contained in:
MayaTheShy
2026-03-21 19:14:14 -04:00
parent 29498a2f6a
commit 39a04cc5e9
1 changed files with 30 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
web/client/src/components/InventoryGrid.css
View File

@@ -73,46 +73,56 @@
/* ===== Creative Inventory Category Tabs ===== */
.category-tabs {
display: flex;
gap: 2px;
padding: 0 0.5rem;
background: #2c2c2c;
border-bottom: 3px solid var(--mc-inv-slot-border);
gap: 0;
padding: 0 6px;
padding-top: 4px;
background: var(--mc-inv-bg);
border-left: 3px solid var(--mc-dark);
border-right: 3px solid var(--mc-dark);
box-shadow:
inset 3px 0 0 #fefefe,
inset -3px 0 0 #555;
flex-shrink: 0;
overflow-x: auto;
margin: 0 0.5rem;
margin-bottom: 0;
}
.category-tab {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
background: #4a4a4a;
border: 2px solid transparent;
border-bottom: none;
padding: 5px 8px 4px;
background: #8b8b8b;
border: 2px solid;
border-color: #555 #fefefe #c6c6c6 #555;
border-bottom: 2px solid var(--mc-inv-bg);
border-radius: 0;
cursor: pointer;
font-family: 'Silkscreen', 'Courier New', monospace;
font-size: 0.6rem;
color: var(--mc-text-gray);
color: var(--mc-text-dark);
font-weight: 700;
text-shadow: 1px 1px 0 var(--mc-dark);
text-shadow: none;
transition: background 0.05s;
white-space: nowrap;
position: relative;
top: 3px;
margin-right: 1px;
}
.category-tab:hover {
background: #5a5a5a;
color: var(--mc-text-white);
background: #aaa;
color: var(--mc-text-dark);
}
.category-tab.active {
background: var(--mc-inv-bg);
color: var(--mc-text-dark);
border-color: var(--mc-inv-slot-border);
border-color: #fefefe #555 transparent #fefefe;
text-shadow: none;
z-index: 1;
padding-bottom: 6px;
margin-bottom: -2px;
}
.category-label {
@@ -121,7 +131,7 @@
.category-count {
font-size: 0.5rem;
color: var(--mc-text-gray);
color: #555;
opacity: 0.7;
}
@@ -147,7 +157,7 @@
.item-grid-wrapper {
flex: 1;
overflow-y: auto;
padding: 0.5rem;
padding: 0 0.5rem 0.5rem;
}
.item-grid {
@@ -157,9 +167,11 @@
padding: 6px;
background: var(--mc-inv-bg);
border: 3px solid var(--mc-dark);
border-top: none;
box-shadow:
inset 3px 3px 0 #fefefe,
inset -3px -3px 0 #555;
inset 3px 0 0 #fefefe,
inset -3px -3px 0 #555,
inset 0 -3px 0 #555;
min-height: 200px;
}