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

Add SmeltingPanel.css for styling the smelting panel and its components

Browse Source
This commit is contained in:
MayaTheShy
2026-03-21 16:49:47 -04:00
parent a4df95e049
commit 05bf5ce122
1 changed files with 169 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
web/client/src/components/SmeltingPanel.css Normal file
View File

@@ -0,0 +1,169 @@
.smelting-panel {
height: 100%;
overflow-y: auto;
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.smelting-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--mc-dark);
}
.smelting-header h2 {
font-size: 1rem;
color: var(--mc-text-yellow);
text-shadow: 2px 2px 0 var(--mc-dark);
}
.smelting-paused-banner {
padding: 0.5rem;
background: #6b1a1a;
border: 2px solid var(--mc-dark);
color: var(--mc-text-red);
text-align: center;
font-size: 0.75rem;
font-weight: 700;
text-shadow: 1px 1px 0 #000;
animation: blink-warn 2s infinite;
}
@keyframes blink-warn {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
/* Furnace grid */
.furnace-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.5rem;
}
.furnace-card {
padding: 0.5rem;
background: var(--mc-dark);
border: 2px solid #333;
}
.furnace-card.active {
border-color: var(--mc-text-gold);
box-shadow: 0 0 4px rgba(255, 170, 0, 0.2);
}
.furnace-name {
font-size: 0.6rem;
color: var(--mc-text-gray);
font-weight: 700;
text-transform: uppercase;
margin-bottom: 0.375rem;
}
.furnace-slot {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.6rem;
margin: 0.125rem 0;
}
.slot-label {
color: var(--mc-text-gray);
font-weight: 700;
min-width: 2rem;
}
.furnace-empty {
font-size: 0.6rem;
color: var(--mc-text-gray);
font-style: italic;
}
/* Recipe list */
.recipe-bulk-controls {
display: flex;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.recipe-list {
display: flex;
flex-direction: column;
gap: 0.25rem;
max-height: 400px;
overflow-y: auto;
}
.recipe-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.5rem;
background: var(--mc-dark);
border: 2px solid #333;
cursor: pointer;
transition: background 0.05s;
}
.recipe-item:hover {
background: #2a2a2a;
border-color: var(--mc-text-gold);
}
.recipe-item.disabled {
opacity: 0.5;
}
.recipe-toggle {
font-size: 0.8rem;
flex-shrink: 0;
}
.recipe-input,
.recipe-output {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.6rem;
min-width: 0;
}
.recipe-input span,
.recipe-output span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.recipe-arrow {
color: var(--mc-text-gold);
font-weight: 700;
flex-shrink: 0;
}
.recipe-furnaces {
display: flex;
gap: 0.25rem;
margin-left: auto;
flex-shrink: 0;
}
.furnace-tag {
font-size: 0.5rem;
padding: 0.125rem 0.25rem;
background: #444;
border: 1px solid #555;
color: var(--mc-text-gray);
}
.no-data {
padding: 1rem;
text-align: center;
color: var(--mc-text-gray);
font-size: 0.7rem;
}