Animate mugshot party identification
This commit is contained in:
+6
-2
@@ -205,11 +205,15 @@ button:focus-visible { outline: 2px solid #e99a44; outline-offset: 2px; }
|
||||
.source-file-widget.capture-kind-clipping:hover .source-file-actions,
|
||||
.source-file-widget.capture-kind-full_page:hover .source-file-actions,
|
||||
.source-file-widget.selected .source-file-actions { opacity: 1; }
|
||||
.source-file-widget.capture-kind-photo { padding: 10px 10px 12px; transform-origin: 50% 15%; }
|
||||
.source-file-widget.capture-kind-photo { min-height: 250px; padding: 10px 10px 12px; transform-origin: 50% 15%; }
|
||||
.source-file-widget.capture-kind-photo.open { transform: scale(1) rotate(-1.25deg); }
|
||||
.source-file-widget.capture-kind-photo .source-file-preview { height: 151px; }
|
||||
.source-file-widget.capture-kind-photo .source-file-preview img { object-fit: cover; filter: saturate(.82) contrast(1.04) sepia(.08); }
|
||||
.source-file-widget.capture-kind-photo > strong { padding: 1px 4px 0; text-align: center; font: 15px/1.1 "Marker Felt", "Comic Sans MS", cursive; transform: rotate(-.5deg); }
|
||||
.source-file-widget.capture-kind-photo > strong.mugshot-caption { min-height: 29px; display: grid; align-content: center; }
|
||||
.mugshot-caption span { position: relative; display: block; min-height: 1.1em; overflow: hidden; color: #171b18; text-overflow: clip; white-space: nowrap; letter-spacing: .01em; }
|
||||
.mugshot-caption.writing span::after { content: ''; display: inline-block; width: 4px; height: 3px; margin-left: 1px; border-radius: 50%; background: #171b18; box-shadow: 0 0 2px #171b18; transform: rotate(-18deg); animation: sharpie-nib .12s steps(2,end) infinite; }
|
||||
@keyframes sharpie-nib { 50% { transform: translateY(-2px) rotate(-18deg);opacity:.72; } }
|
||||
.source-file-widget.capture-kind-photo > time { padding-right: 3px; text-align: right; }
|
||||
.source-file-widget.capture-kind-scene { padding: 9px 9px 10px; background: #e5e0d3; }
|
||||
.source-file-widget.capture-kind-scene.open { transform: scale(1) rotate(.35deg); }
|
||||
@@ -418,7 +422,7 @@ button:focus-visible { outline: 2px solid #e99a44; outline-offset: 2px; }
|
||||
.board-actions button { flex: 0 0 36px; width: 36px; justify-content: center; }
|
||||
.board-actions > span { flex: 0 0 1px; width: 30px; height: 1px; margin: 3px 0; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) { .evidence-card.arriving, .source-file-widget.arriving, .doc-row.arriving, .brief-concepts section.just-resolved, .connections g.tightening path, .document-located, .document-locator-ray, .document-locator-pulse, .goal-complete-shade, .goal-complete-card { animation: none; }.board, .documents-panel, .luggage-tag, .thread-tag-content { transition: none; } }
|
||||
@media (prefers-reduced-motion: reduce) { .evidence-card.arriving, .source-file-widget.arriving, .doc-row.arriving, .brief-concepts section.just-resolved, .connections g.tightening path, .document-located, .document-locator-ray, .document-locator-pulse, .goal-complete-shade, .goal-complete-card, .mugshot-caption.writing span::after { animation: none; }.board, .documents-panel, .luggage-tag, .thread-tag-content { transition: none; } }
|
||||
|
||||
/* Narrative layer: splash + NPC dialogue */
|
||||
.splash { height: 100vh; display: grid; place-content: center; justify-items: center; text-align: center; background: radial-gradient(circle at 50% 40%, #123029 0, #071916 68%); color: #9bb0a9; }
|
||||
|
||||
Reference in New Issue
Block a user