josh
a82045d1bd
Build and push image / build (push) Successful in 50s
Add react-router-dom for URL-based navigation with browser back/forward, deep links, and bookmarks. Replace window.confirm() with styled ConfirmDialog. Add toast notifications and success feedback on consume/audit/gone flows. Add escape-to-close and focus trapping on modals. Add entrance animations for drawers, modals, and toasts. Make grids responsive, add sortable inventory headers, working CSV/JSON export, time-aware greeting, focus-visible outlines, search clear button, and hover chevrons on inventory rows. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
159 lines
3.0 KiB
CSS
159 lines
3.0 KiB
CSS
/* App chrome — ported from Apothecary - Inventory.html lines 11–86 */
|
||
.app-shell {
|
||
min-height: 100vh;
|
||
display: grid;
|
||
grid-template-columns: 264px 1fr;
|
||
}
|
||
.sidebar {
|
||
border-right: 1px solid var(--line);
|
||
background: var(--bg-2);
|
||
padding: 28px 18px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
position: sticky;
|
||
top: 0;
|
||
height: 100vh;
|
||
overflow: auto;
|
||
}
|
||
.brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 0 8px 28px;
|
||
}
|
||
.brand-mark {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
border: 1px solid var(--ink);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: var(--serif);
|
||
font-size: 22px;
|
||
font-style: italic;
|
||
color: var(--ink);
|
||
}
|
||
.nav-link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 10px 12px;
|
||
border-radius: var(--r-md);
|
||
color: var(--ink-2);
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
border: none;
|
||
background: transparent;
|
||
text-align: left;
|
||
transition: background 100ms;
|
||
}
|
||
.nav-link:hover {
|
||
background: var(--bg-3);
|
||
color: var(--ink);
|
||
}
|
||
.nav-link.active {
|
||
background: var(--surface);
|
||
color: var(--ink);
|
||
box-shadow: var(--shadow-sm);
|
||
border: 1px solid var(--line);
|
||
}
|
||
.nav-section {
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: var(--ink-3);
|
||
padding: 16px 12px 6px;
|
||
font-weight: 500;
|
||
}
|
||
.nav-divider {
|
||
display: none;
|
||
}
|
||
.inv-row:hover {
|
||
background: var(--bg-2);
|
||
}
|
||
.inv-row .inv-row-chevron {
|
||
opacity: 0;
|
||
transition: opacity 100ms;
|
||
}
|
||
.inv-row:hover .inv-row-chevron {
|
||
opacity: 1;
|
||
}
|
||
|
||
@keyframes toast-in {
|
||
from { opacity: 0; transform: translateY(8px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.4; }
|
||
}
|
||
|
||
@keyframes backdrop-in {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
@keyframes modal-in {
|
||
from { opacity: 0; transform: scale(0.97) translateY(8px); }
|
||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||
}
|
||
@keyframes drawer-in {
|
||
from { transform: translateX(100%); }
|
||
to { transform: translateX(0); }
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
.inv-row > :nth-child(4),
|
||
.inv-header > :nth-child(4) { display: none; } /* Shop */
|
||
.inv-row > :nth-child(8),
|
||
.inv-header > :nth-child(8) { display: none; } /* Last checked */
|
||
}
|
||
|
||
@media (max-width: 880px) {
|
||
.app-shell {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.sidebar {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
top: auto;
|
||
height: auto;
|
||
flex-direction: row;
|
||
padding: 8px 12px;
|
||
border-top: 1px solid var(--line);
|
||
border-right: none;
|
||
z-index: 30;
|
||
overflow-x: auto;
|
||
}
|
||
.brand,
|
||
.nav-section {
|
||
display: none;
|
||
}
|
||
.nav-link {
|
||
white-space: nowrap;
|
||
padding: 8px 12px;
|
||
flex-direction: column;
|
||
font-size: 10px;
|
||
gap: 2px;
|
||
align-items: center;
|
||
}
|
||
.nav-label {
|
||
display: none;
|
||
}
|
||
.nav-divider {
|
||
width: 1px;
|
||
height: 24px;
|
||
background: var(--line);
|
||
flex-shrink: 0;
|
||
align-self: center;
|
||
}
|
||
.main {
|
||
padding-bottom: 60px;
|
||
}
|
||
}
|