Story 3.2 done

2026-05-23 18:23:48 +02:00
parent d175f92806
commit a1e8886fce
66 changed files with 18258 additions and 1650 deletions
@@ -0,0 +1,167 @@
+// 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(0, 0, 0, 0.1);
+        color: var(--sp-accent-emphasis, var(--sp-accent));
+      }
+      
+      // Active state
+      &:active {
+        background-color: rgba(0, 0, 0, 0.2);
+      }
+      
+      // 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;
+    }
+  }
+}