fs
cfba3f40ed
Unifies the breakpoint system and fixes cross-layer CSS bugs that kept the old mobile hide rules from ever taking effect. Breakpoints: - Document canonical xs/sm/md/lg/xl/2xl scale in variables.base.css - Replace 968px one-offs with 1024px (app-details, app-page-editor) - Make details tab-panel max-width responsive (min(70ch, 100%)) Topbar (< md): - Hide breadcrumb in components layer so cross-layer overrides actually win - Dock search icon alongside right-column icons via flex layout - Add xs (400px) tightening for hit-area preservation - Hide brand divider alongside hidden brand name - Switch hover states to theme-aware --app-dropdown-hover-background-color Mobile drawer: - Icon-bar now vertical like desktop (was horizontal top strip, effectively invisible) - Sidebar shifted 52px right so icon-bar and sidebar slide in as one 280px unit - Add breathing room above first nav item (20px top padding) List tabs: - Rewrite .app-list-tabs to horizontal scroll with hidden scrollbar, snap, and mask-image gradient fades; add initListTabs to scroll active into view - Register as runtime component in app-init.js List toolbar: - Stack wide controls (multi-select, search/text inputs) full-width below sm, keep compact controls at natural width Footer: - New dedicated app-footer.css with mobile-first stacking, border-top separator, theme-aware hover; remove redundant rules from app-shell.css Notification dropdown: - Width with min(360px, 100vw - 2rem) and min-width: 0 override global details > ul rule; switch to position: fixed below md so it hugs the viewport right edge instead of the non-rightmost bell button Content spacing: - Add padding-block-start to .app-main-content on mobile (was 0) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
143 lines
3.5 KiB
CSS
143 lines
3.5 KiB
CSS
@layer components {
|
|
/* Detail drawer — slide-in overlay panel for row detail view. */
|
|
|
|
html.app-detail-drawer-open {
|
|
overflow: hidden;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
.app-detail-drawer {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 2050;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.app-detail-drawer[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.app-detail-drawer-backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(15, 23, 42, 0.3);
|
|
-webkit-backdrop-filter: blur(2px);
|
|
backdrop-filter: blur(2px);
|
|
opacity: 0;
|
|
transition: opacity 0.18s ease;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.app-detail-drawer.is-open .app-detail-drawer-backdrop {
|
|
opacity: 1;
|
|
}
|
|
|
|
.app-detail-drawer-panel {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: min(720px, 100vw);
|
|
height: 100%;
|
|
background: var(--app-card-background-color, #fff);
|
|
border-left: 1px solid var(--app-muted-border-color, rgba(148, 163, 184, 0.35));
|
|
box-shadow: -12px 0 30px rgba(15, 23, 42, 0.18);
|
|
transform: translateX(100%);
|
|
transition: transform 0.22s ease;
|
|
pointer-events: auto;
|
|
outline: none;
|
|
}
|
|
|
|
.app-detail-drawer.is-open .app-detail-drawer-panel {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.app-detail-drawer-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border-bottom: 1px solid var(--app-muted-border-color, rgba(148, 163, 184, 0.25));
|
|
background: var(--app-card-background-color, #fff);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.app-detail-drawer-stepper,
|
|
.app-detail-drawer-actions {
|
|
display: inline-flex;
|
|
gap: 0.25rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.app-detail-drawer-stepper[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.app-detail-drawer-header button,
|
|
.app-detail-drawer-header a {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.app-detail-drawer-full {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.app-detail-drawer-body {
|
|
flex: 1 1 auto;
|
|
overflow-y: auto;
|
|
padding: 1rem 1.25rem 2rem;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.app-detail-drawer-loading,
|
|
.app-detail-drawer-error {
|
|
padding: 2rem 1rem;
|
|
text-align: center;
|
|
color: var(--app-color-muted, #6b7280);
|
|
}
|
|
|
|
.app-detail-drawer-error {
|
|
color: var(--app-color-danger, #b91c1c);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.app-detail-drawer-panel {
|
|
width: 100vw;
|
|
border-left: none;
|
|
}
|
|
}
|
|
|
|
/* Inside the drawer, force single-column layout for any .app-details-container
|
|
regardless of viewport width (the grid rule in app-details.css triggers on
|
|
viewport ≥1024px, which is wrong for a 720px drawer). Any page that uses the
|
|
standard details container gets stacked main + aside automatically. */
|
|
.app-detail-drawer .app-details-container,
|
|
.app-detail-drawer .app-details-container:has(> aside) {
|
|
display: block;
|
|
grid-template-columns: none;
|
|
min-height: 0;
|
|
}
|
|
|
|
.app-detail-drawer .app-details-container > section {
|
|
width: 100%;
|
|
}
|
|
|
|
.app-detail-drawer .app-details-container > aside {
|
|
border-left: none;
|
|
border-top: 1px solid var(--app-border);
|
|
min-height: 0;
|
|
/* Match the inline padding of `section > *` (from app-details.css) so the
|
|
aside block aligns visually with the main content above it. */
|
|
padding: calc(var(--app-spacing) * 1.5) calc(var(--app-spacing) * 2) 0;
|
|
margin-top: calc(var(--app-spacing) * 1.5);
|
|
}
|
|
}
|