fs
d9f07dcd63
CSS: - Remove duplicate li::before block in app-search.css - Fix typo: search-reuslt → search-result in app-search.css - Remove commented-out CSS rules in app-flash.css - Add descriptive header comment to all 27 CSS component files JS: - Complete WAI-ARIA Tabs pattern: generate IDs, add aria-controls on tab buttons and aria-labelledby on tab panels (app-tabs.js) - Add JSDoc header comments to ~33 JS files (core + components) - Add explanatory block comment to app-boot.js (why classic IIFE) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
133 lines
3.3 KiB
CSS
133 lines
3.3 KiB
CSS
@layer components {
|
|
/* Flash notices — success/warning/error/info feedback banners with auto-dismiss timer. */
|
|
.notice {
|
|
--app-notice-border-color: var(--app-muted-border-color);
|
|
--app-notice-background-color: var(--app-card-background-color);
|
|
--app-notice-accent-color: var(--app-color);
|
|
background: var(--app-notice-background-color);
|
|
padding: calc(var(--app-spacing) * .5) calc(var(--app-spacing) * 1);
|
|
padding-right: calc(var(--app-spacing) * .5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--app-spacing);
|
|
position: relative;
|
|
overflow: hidden;
|
|
color: var(--app-notice-border-color);
|
|
margin-block: calc(var(--app-spacing) * .75);
|
|
}
|
|
|
|
#async-messages .notice {
|
|
border: none;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
padding-right: 5px;
|
|
padding-left: 15px;
|
|
margin-bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 5px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
color: var(--app-notice-border-color);
|
|
margin-block: 0;
|
|
}
|
|
|
|
|
|
.notice strong {
|
|
color: var(--app-notice-accent-color);
|
|
}
|
|
|
|
.notice[data-variant=success] {
|
|
--app-notice-border-color: var(--app-notice-success-border-color);
|
|
--app-notice-background-color: var(--app-notice-success-background-color);
|
|
--app-notice-accent-color: var(--app-notice-success-color);
|
|
}
|
|
|
|
.notice[data-variant=warning] {
|
|
--app-notice-border-color: var(--app-notice-warning-border-color);
|
|
--app-notice-background-color: var(--app-notice-warning-background-color);
|
|
--app-notice-accent-color: var(--app-notice-warning-color);
|
|
}
|
|
|
|
.notice[data-variant=info] {
|
|
--app-notice-border-color: var(--app-notice-info-border-color);
|
|
--app-notice-background-color: var(--app-notice-info-background-color);
|
|
--app-notice-accent-color: var(--app-notice-info-color);
|
|
}
|
|
|
|
.notice[data-variant=error] {
|
|
--app-notice-border-color: var(--app-notice-error-border-color);
|
|
--app-notice-background-color: var(--app-notice-error-background-color);
|
|
--app-notice-accent-color: var(--app-notice-error-color);
|
|
}
|
|
|
|
.notice.flash-timed::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
height: 3px;
|
|
width: 100%;
|
|
background: var(--app-notice-border-color);
|
|
transform-origin: left;
|
|
transform: scaleX(0);
|
|
animation: flash-progress var(--flash-timeout, 4000ms) linear forwards;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.notice.flash-timed:hover::after {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
@keyframes flash-progress {
|
|
from {
|
|
transform: scaleX(0);
|
|
}
|
|
to {
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.notice.flash-timed::after {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
.notice button[type=submit] {
|
|
border: 1px solid var(--app-notice-border-color) !important;
|
|
background: var(--app-notice-background-color);
|
|
color: var(--app-notice-border-color);
|
|
}
|
|
|
|
.notice ul {
|
|
margin: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.notice li:last-child {
|
|
margin: 0;
|
|
}
|
|
|
|
.app-main-content .flash-stack {
|
|
margin-bottom: var(--app-spacing);
|
|
}
|
|
.app-main-content:has(.app-details-container) .flash-stack {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.flash-stack .notice {
|
|
margin-block: 0;
|
|
}
|
|
|
|
.flash-stack .notice + .notice {
|
|
margin-top: calc(var(--app-spacing) * .5);
|
|
}
|
|
|
|
.notice li {
|
|
list-style: none;
|
|
}
|
|
}
|