168 lines
3.5 KiB
Plaintext
168 lines
3.5 KiB
Plaintext
// ConfirmationBar component styles
|
|
// Story 3.2: Scene Auto-Apply & ConfirmationBar
|
|
//
|
|
// Import rule: All selectors scoped under .scrying-pool namespace
|
|
// Use --sp-* semantic tokens only, never Foundry tokens directly
|
|
|
|
.scrying-pool {
|
|
&__confirmation-bar {
|
|
// Base positioning and layout
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 12px 16px;
|
|
border-radius: 4px 4px 0 0;
|
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
|
|
z-index: 100; // Above strip but below modals
|
|
|
|
// Typography
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
|
|
// Display and box model
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
|
|
// Transition: opacity only (never height or max-height per AC-5)
|
|
transition: opacity 200ms ease-out;
|
|
opacity: 1;
|
|
|
|
// Prevent text selection
|
|
user-select: none;
|
|
|
|
// Variants
|
|
&--default {
|
|
background-color: var(--sp-surface);
|
|
border-top: 1px solid var(--sp-border);
|
|
color: var(--sp-text-primary);
|
|
|
|
.sp-confirmation-bar {
|
|
&__message {
|
|
color: var(--sp-text-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
&--amber {
|
|
background-color: var(--sp-surface);
|
|
border-top: 1px solid var(--sp-border-warning);
|
|
|
|
.sp-confirmation-bar {
|
|
&__message {
|
|
color: var(--sp-text-warning);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Message area
|
|
.sp-confirmation-bar {
|
|
&__message {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
// Undo button
|
|
.sp-confirmation-bar {
|
|
&__undo-btn {
|
|
// Button reset
|
|
background: transparent;
|
|
border: none;
|
|
padding: 6px 12px;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
|
|
// Typography
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
|
|
// Colors
|
|
color: var(--sp-accent);
|
|
|
|
// Border and radius
|
|
border-radius: 4px;
|
|
|
|
// Transition
|
|
transition: background-color 200ms ease, color 200ms ease;
|
|
|
|
// Hover state
|
|
&:hover {
|
|
background-color: rgba(255, 255, 255, 0.06);
|
|
color: var(--sp-accent-hover);
|
|
}
|
|
|
|
// Active state
|
|
&:active {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
// Focus state
|
|
&:focus {
|
|
outline: 2px solid var(--sp-focus);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
// Disabled state (shouldn't happen but just in case)
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Animation: slide up for entry
|
|
@keyframes sp-confirmation-bar-slide-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(100%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
// Animation: slide down for exit
|
|
@keyframes sp-confirmation-bar-slide-down {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translateY(100%);
|
|
}
|
|
}
|
|
|
|
// Apply animations (gated under prefers-reduced-motion)
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.scrying-pool {
|
|
&__confirmation-bar {
|
|
animation: sp-confirmation-bar-slide-up 200ms ease-out;
|
|
}
|
|
|
|
// Hide animation class (added when hiding)
|
|
&.is-hiding {
|
|
animation: sp-confirmation-bar-slide-down 200ms ease-in forwards;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Reduced motion: no animations
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.scrying-pool {
|
|
&__confirmation-bar {
|
|
animation: none;
|
|
transition: none;
|
|
}
|
|
}
|
|
}
|