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