diff --git a/src/authoring_service/templates.py b/src/authoring_service/templates.py index c3c06c0..52243ac 100755 --- a/src/authoring_service/templates.py +++ b/src/authoring_service/templates.py @@ -1341,7 +1341,11 @@ HIDDEN_APP_HTML = r""" .edge.theme, .edge.symbol { stroke: rgba(127, 176, 137, 0.38); } .memory-node { cursor: grab; transition: opacity 160ms ease, filter 180ms ease; } .memory-node:active { cursor: grabbing; } + .memory-node.dimmed { opacity: 0.28; } + .memory-node.related-node { opacity: 0.82; } + .memory-node.selected { opacity: 1; filter: drop-shadow(0 0 18px rgba(255, 231, 173, 0.45)); } .memory-node text, .node-label text, .cluster-label text { fill: #f7ead3; paint-order: stroke; stroke: rgba(14, 11, 8, 0.82); stroke-width: 3px; stroke-linejoin: round; } + .hit-target { fill: transparent; stroke: transparent; pointer-events: all; } .memory-node .node-shell, .memory-node .node-portrait, .memory-node .node-marker, .memory-node .fragment-star { stroke: rgba(255, 246, 223, 0.82); stroke-width: 1.4; @@ -1351,8 +1355,9 @@ HIDDEN_APP_HTML = r""" .memory-node .fragment-star { stroke-width: 1.1; } .memory-node .fragment-ring { fill: none; stroke: rgba(255, 246, 223, 0.24); stroke-width: 1; stroke-dasharray: 2 7; } .memory-node .node-breathe, .cluster-node .node-breathe { animation: avatar-breathe 8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } - .memory-node:hover .node-shell, .memory-node:hover .node-portrait { filter: drop-shadow(0 0 20px var(--node-glow, rgba(255, 232, 177, 0.4))); } - .memory-node.selected .node-shell, .memory-node.selected .node-portrait { stroke: #fff3c7; stroke-width: 3; } + .selection-halo { fill: rgba(255, 231, 173, 0.1); stroke: rgba(255, 243, 199, 0.95); stroke-width: 3; stroke-dasharray: 4 9; filter: drop-shadow(0 0 22px rgba(255, 231, 173, 0.62)); animation: selection-pulse 2.8s ease-in-out infinite; pointer-events: none; } + .memory-node:hover .node-shell, .memory-node:hover .node-portrait, .memory-node:hover .fragment-star { filter: drop-shadow(0 0 20px var(--node-glow, rgba(255, 232, 177, 0.4))); } + .memory-node.selected .node-shell, .memory-node.selected .node-portrait, .memory-node.selected .fragment-star { stroke: #fff3c7; stroke-width: 3; } .memory-node.dragging .node-shell, .memory-node.dragging .node-portrait { stroke: #f3cd7a; stroke-width: 3; opacity: 0.72; } .memory-node.compatible .node-shell, .memory-node.compatible .node-portrait { stroke: rgba(255, 243, 199, 0.92); stroke-width: 2.4; filter: drop-shadow(0 0 16px rgba(255, 232, 177, 0.46)); } .memory-node.drop-target .node-shell, .memory-node.drop-target .node-portrait { stroke: #fff5c9; stroke-width: 4; filter: drop-shadow(0 0 24px rgba(255, 232, 177, 0.7)); } @@ -1384,6 +1389,11 @@ HIDDEN_APP_HTML = r""" stroke: rgba(248, 234, 209, 0.12); rx: 7; } + .node-label.selected rect { + fill: rgba(39, 29, 17, 0.92); + stroke: rgba(255, 243, 199, 0.78); + filter: drop-shadow(0 0 20px rgba(255, 231, 173, 0.3)); + } .node-meta { fill: rgba(248, 234, 209, 0.72); stroke-width: 2px; } .world-faded { opacity: 0.2; } .breadcrumb, .minimap, .guide-card, .active-state, .context-menu { @@ -1574,8 +1584,10 @@ HIDDEN_APP_HTML = r""" text-align: center; } .edge.story-path { stroke: rgba(234, 195, 108, 0.7); stroke-width: 3; stroke-linecap: round; fill: none; filter: drop-shadow(0 0 8px rgba(234, 195, 108, 0.28)); } + .edge.story-path.focused-path { stroke: rgba(255, 228, 166, 0.95); stroke-width: 5; filter: drop-shadow(0 0 18px rgba(255, 228, 166, 0.45)); } .edge.story-echo { stroke: rgba(117, 169, 189, 0.28); stroke-dasharray: 3 10; } .story-region { fill: rgba(211, 166, 77, 0.026); stroke: rgba(211, 166, 77, 0.16); stroke-width: 1.2; stroke-dasharray: 2 12; } + .story-region.focused-region { fill: rgba(211, 166, 77, 0.06); stroke: rgba(255, 228, 166, 0.42); stroke-width: 2; } .route-spark { fill: rgba(255, 236, 181, 0.82); filter: drop-shadow(0 0 9px rgba(255, 236, 181, 0.46)); animation: constellation-shimmer 8s ease-in-out infinite; } .appearance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .appearance-toggle { @@ -1610,6 +1622,48 @@ HIDDEN_APP_HTML = r""" .story-card, .story-flow-item, .reuse-item { transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease; } .story-card:hover, .story-flow-item:hover, .reuse-item:hover { transform: translateY(-1px); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22); } .story-flow-list { gap: 12px; padding-left: 10px; border-left: 1px solid rgba(232, 202, 139, 0.16); } + .story-flow-item.active-edit { + border-color: rgba(255, 243, 199, 0.86); + background: rgba(211, 166, 77, 0.17); + box-shadow: 0 0 0 1px rgba(255, 243, 199, 0.16), 0 0 28px rgba(211, 166, 77, 0.2); + } + .editor-modebar { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; + margin-bottom: 12px; + } + .editor-modebar button { + height: auto; + min-height: 46px; + text-align: left; + display: grid; + gap: 2px; + padding: 8px 10px; + } + .editor-modebar button.active[data-editor-mode="story"] { border-color: rgba(211, 166, 77, 0.82); background: rgba(211, 166, 77, 0.2); } + .editor-modebar button.active[data-editor-mode="memory"] { border-color: rgba(117, 169, 189, 0.78); background: rgba(117, 169, 189, 0.16); } + .editor-panel { + transition: opacity 180ms ease, border-color 180ms ease, background 180ms ease; + } + .editor-panel.inactive { + opacity: 0.56; + } + .editor-panel.inactive input, .editor-panel.inactive textarea, .editor-panel.inactive select { + opacity: 0.72; + } + .story-editor-panel.active-editor { border-color: rgba(211, 166, 77, 0.58); background: rgba(211, 166, 77, 0.08); } + .memory-editor-panel.active-editor { border-color: rgba(117, 169, 189, 0.52); background: rgba(117, 169, 189, 0.07); } + .editing-banner { + border: 1px solid rgba(255, 243, 199, 0.28); + border-radius: 8px; + padding: 9px 10px; + margin-bottom: 12px; + background: rgba(251, 241, 220, 0.075); + color: #f4dfb6; + font-size: 13px; + line-height: 1.4; + } .hidden { display: none !important; } @keyframes breathe { 0%, 100% { opacity: 0.72; } @@ -1623,6 +1677,10 @@ HIDDEN_APP_HTML = r""" 0%, 100% { opacity: 0.48; } 50% { opacity: 0.82; } } + @keyframes selection-pulse { + 0%, 100% { opacity: 0.72; transform: scale(1); } + 50% { opacity: 1; transform: scale(1.045); } + } .constellation-shimmer { animation: constellation-shimmer 9s ease-in-out infinite; } .core-glow { animation: breathe 7s ease-in-out infinite; } @keyframes sky-drift { @@ -1822,13 +1880,18 @@ HIDDEN_APP_HTML = r"""