fs
4a8b9ab64d
Converts the "Open full page" control in the detail drawer header from an icon-only link into a text+icon button using the standard `secondary outline small` classes. Because the base button rule in app-shell.css only targets `button, [type=…], [role=button]`, the anchor gets `role="button"` so the core cascade applies (border-radius, padding, hover/focus states). Component-local CSS is trimmed to just the flex layout (icon + label with gap) and text-decoration reset — border, radius and colors come from the shared button base. Tooltip is removed (redundant with visible text); aria-label remains for screen readers. 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 ≥968px, 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);
|
|
}
|
|
}
|