glitch-university/gupi-osint-board
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine board notes, clipping evidence, and case reports

Browse Source
This commit is contained in:
gitprov
2026-08-22 23:19:46 +02:00
parent 189a98cc64
commit fae5200846
19 changed files with 256 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.css
+41 -21
View File
@@ -166,7 +166,7 @@ button:focus-visible { outline: 2px solid #e99a44; outline-offset: 2px; }
.text-document-preview textarea::placeholder { color: #76786f; font-size: 9px; letter-spacing: .04em; }
.board-viewport.threading .text-document-preview textarea { pointer-events: none; }
.source-file-widget > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 9px IBM Plex Mono; }
.source-file-widget > time { display: block; margin-top: 3px; color: #86603b; font: 7px IBM Plex Mono; }
.source-file-footer > time { display: block; margin-top: 3px; color: #86603b; font: 7px IBM Plex Mono; }
.source-file-actions { display: flex; justify-content: space-between; margin-top: 6px; border-top: 1px dashed #969b94; padding-top: 4px; }
.source-file-actions button { display: flex; align-items: center; gap: 3px; border: 0; background: transparent; padding: 2px; color: #4e5d57; cursor: pointer; font: 600 6px IBM Plex Mono; }
@@ -214,32 +214,36 @@ button:focus-visible { outline: 2px solid #e99a44; outline-offset: 2px; }
.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-photo .source-file-footer > 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); }
.source-file-widget.capture-kind-scene .source-file-preview { height: 120px; }
.source-file-widget.capture-kind-scene .source-file-preview img { object-fit: cover; filter: saturate(.86) contrast(1.05); }
.source-file-widget.capture-kind-scene > strong { font-size: 11px; }
.source-file-widget.capture-kind-clipping { padding: 9px 12px 11px; background: linear-gradient(103deg,#e7e2d3,#d9d2bf); clip-path: polygon(1% 2%,99% 0,98% 13%,100% 28%,98% 43%,100% 61%,98% 78%,99% 98%,84% 99%,68% 97%,52% 100%,35% 98%,19% 100%,1% 98%,2% 79%,0 62%,2% 45%,0 27%); }
.source-file-widget.capture-kind-clipping.open { transform: scale(1) rotate(.8deg); }
.source-file-widget.capture-kind-clipping .source-file-preview { height: 105px; border-color: #b2a996; box-shadow: none; }
.source-file-widget.capture-kind-clipping .source-file-preview img { object-fit: cover; filter: grayscale(.12) contrast(1.08); }
.source-file-widget.capture-kind-clipping > strong { font-size: 11px; }
.source-file-widget.capture-kind-clipping { padding:14px 13px 10px;overflow:visible;background:linear-gradient(105deg,#e2dfcf,#d3d1c2);border:2px solid #b99a68;box-shadow:8px 10px 0 #020b0980,0 0 0 2px #526059; }
.source-file-widget.capture-kind-clipping::after { content:'';position:absolute;z-index:5;top:-7px;left:50%;width:13px;height:13px;translate:-50% 0;border-radius:50%;background:#9e392f;border:2px solid #5d1e1b;box-shadow:0 2px 2px #0006; }
.source-file-widget.capture-kind-clipping.open { transform:scale(1); }
.source-file-widget.capture-kind-clipping .source-file-preview { width:100%;height:218px;margin:3px 0 10px;border:2px solid #f4efe1;background:#c8c2b3;box-shadow:2px 3px 3px #10151170;transform:rotate(var(--clip-inset-rotation,.7deg));transform-origin:50% 48%; }
.source-file-widget.capture-kind-clipping .source-file-preview img { object-fit:contain;filter:grayscale(.12) contrast(1.08); }
.source-file-widget.capture-kind-clipping .source-file-footer { display:flex;align-items:flex-end;justify-content:space-between;gap:8px; }
.source-file-widget.capture-kind-clipping .source-file-footer > time { flex:0 0 auto;margin:0 0 2px;color:#775332; }
.source-file-widget.capture-kind-clipping .source-file-actions { flex:1;justify-content:flex-end;gap:9px;margin-top:0; }
.source-file-widget.capture-kind-clipping .source-file-actions button { color:#4e5d57;text-shadow:none; }
.source-file-widget.capture-kind-full_page { padding: 9px 10px 11px; background: #ebe7da; box-shadow: 5px 7px 3px #02090780, inset 0 0 22px #8e887244; }
.source-file-widget.capture-kind-full_page.open { transform: scale(1) rotate(-.25deg); }
.source-file-widget.capture-kind-full_page .source-file-preview { height: 211px; background: #f5f2e9; border-color: #b3ae9f; box-shadow: none; }
.source-file-widget.capture-kind-full_page .source-file-preview img { object-fit: contain; }
.source-file-widget.capture-kind-full_page > strong { font-size: 10px; }
.evidence-card.note { width: 108px !important; height: 154px; min-height: 154px; padding: 27px 10px 11px; rotate: -2deg !important; z-index: 2; }
.evidence-card.note header { position: absolute; left: 9px; right: 9px; top: 21px; padding-bottom: 3px; font-size: 6px; color: #5b472d; border-color: #7e6542; }
.evidence-card.note header i { display: none; }
.evidence-card.note .card-content { height: 108px; padding-top: 10px; overflow: hidden; transition: transform .22s ease; }
.evidence-card.note h3 { color: #5b3c24; font-size: 7px; margin: 2px 0 5px; }
.evidence-card.note p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; font-family: Special Elite; font-size: 12px; line-height: 1.25; }
.evidence-card.note.selected { z-index: 12; outline: 1px dashed #e6b168; outline-offset: 5px; transform: rotate(90deg) scale(1.55); filter: drop-shadow(12px 8px 5px #0008); }
.evidence-card.note.selected .card-content { width: 142px; height: 94px; margin: 4px 0 0 -17px; overflow: visible; transform: rotate(-90deg); }
.evidence-card.note.selected p { display: block; overflow: visible; font-size: 13px; line-height: 1.32; }
.evidence-card.note.selected h3 { font-size: 7px; }
.evidence-card.note.luggage-tag { width: 108px !important; height: 154px; min-height: 154px; padding: 27px 10px 11px; rotate: -2deg !important; z-index: 2; }
.evidence-card.note.luggage-tag header { position: absolute; left: 9px; right: 9px; top: 21px; padding-bottom: 3px; font-size: 6px; color: #5b472d; border-color: #7e6542; }
.evidence-card.note.luggage-tag header i { display: none; }
.evidence-card.note.luggage-tag .card-content { height: 108px; padding-top: 10px; overflow: hidden; transition: transform .22s ease; }
.evidence-card.note.luggage-tag h3 { color: #5b3c24; font-size: 7px; margin: 2px 0 5px; }
.evidence-card.note.luggage-tag p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; font-family: Special Elite; font-size: 12px; line-height: 1.25; }
.evidence-card.note.luggage-tag.selected { z-index: 12; outline: 1px dashed #e6b168; outline-offset: 5px; transform: rotate(90deg) scale(1.55); filter: drop-shadow(12px 8px 5px #0008); }
.evidence-card.note.luggage-tag.selected .card-content { width: 142px; height: 94px; margin: 4px 0 0 -17px; overflow: visible; transform: rotate(-90deg); }
.evidence-card.note.luggage-tag.selected p { display: block; overflow: visible; font-size: 13px; line-height: 1.32; }
.evidence-card.note.luggage-tag.selected h3 { font-size: 7px; }
.board-actions { position: absolute; z-index: 4; bottom: 17px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; height: 43px; background: #102a24ee; border: 1px solid #3c564e; box-shadow: 0 8px 24px #0009; padding: 4px; }
.board-actions button { height: 33px; border: 0; background: transparent; padding: 0 10px; display: flex; align-items: center; gap: 7px; font: 9px IBM Plex Mono; cursor: pointer; color: #a8b8b2; }
.board-actions button:hover, .board-actions button.active { background: #27443c; color: #e4a35e; }
@@ -351,6 +355,7 @@ button:focus-visible { outline: 2px solid #e99a44; outline-offset: 2px; }
.file-editor-body { padding: 24px 27px 22px; }
.file-editor-body > small { color: #805027; font: 600 8px IBM Plex Mono; letter-spacing: .16em; }
.file-editor-grid { display: grid; grid-template-columns: 1fr 180px; gap: 12px; }
.file-editor-grid.published-fields { grid-template-columns:minmax(0,1fr) 180px; }
.field > span { display: flex; align-items: center; gap: 6px; }
.metadata-heading { margin-top: 20px; padding-bottom: 8px; border-bottom: 2px solid #59625d; display: flex; justify-content: space-between; align-items: end; }
.metadata-heading > div { display: grid; gap: 3px; }
@@ -380,8 +385,8 @@ button:focus-visible { outline: 2px solid #e99a44; outline-offset: 2px; }
.report-evidence { margin-top:14px; padding:14px 16px 16px; border-left:4px solid #8b5b38; background:#e1ddcfcc; box-shadow:0 1px #fff8; }.report-evidence.verified { border-left-color:#46705c; }.report-evidence.rejected { border-left-color:#913d35;background:#e5d2c7cc; }
.report-evidence-heading { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; margin-bottom:12px; }.report-evidence-heading b { color:#25332d; font:14px Special Elite; }.report-evidence-heading span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#646c67; font:8px IBM Plex Mono; text-transform:uppercase; }.report-evidence-heading em { padding:3px 5px; border:1px solid #577665; color:#436753; font:600 6px IBM Plex Mono; letter-spacing:.08em; font-style:normal; }
.report-evidence-heading em.rejected { border-color:#98534b;color:#813a34; }.report-evidence-diagnostic { margin:-3px 0 13px;padding:9px 10px;border:1px solid #b78376;background:#ead8cc;color:#6f302d;font:9px/1.5 IBM Plex Mono; }
.report-evidence label,.report-investigator { display:grid; gap:4px; margin-top:9px; }.report-evidence label > span,.report-investigator > span { color:#5c655f; font:600 7px IBM Plex Mono; letter-spacing:.11em; }.report-evidence input,.report-evidence textarea,.report-investigator input { width:100%; min-width:0; padding:7px 8px; border:0; border-bottom:1px solid #747b75; outline:0; background:#f2eee0a8; color:#1d2622; font:12px/1.45 Special Elite; resize:vertical; }.report-evidence input:focus,.report-evidence textarea:focus,.report-investigator input:focus { border-bottom-color:#9b582d; background:#f6f0dc; box-shadow:inset 3px 0 #b2784a; }
.report-fields { display:grid; grid-template-columns:155px minmax(0,1fr); gap:13px; }.report-investigator { margin-top:30px; padding-top:13px; border-top:1px solid #4c554f; }.report-investigator input { max-width:390px; }
.report-reference { display:grid; gap:4px; margin-top:9px; }.report-reference > span { color:#5c655f; font:600 7px IBM Plex Mono; letter-spacing:.11em; }.report-reference > p,.report-reference > a { width:100%; min-width:0; min-height:31px; margin:0; padding:7px 8px; border-bottom:1px solid #747b75; background:#f2eee0a8; color:#1d2622; font:12px/1.45 Special Elite; overflow-wrap:anywhere; }.report-reference > a { color:#315b52; text-decoration-thickness:1px; text-underline-offset:3px; }
.report-fields { display:grid; grid-template-columns:155px minmax(0,1fr); gap:13px; }.report-investigator { margin-top:30px; padding-top:13px; border-top:1px solid #4c554f; }.report-investigator p { max-width:390px; }
.report-verdict { margin-top:28px; padding:17px 19px; border:2px solid #874339; background:#e0c7b9; transform:rotate(-.25deg); }.report-verdict small { color:#7c352f; font:700 8px IBM Plex Mono; letter-spacing:.13em; }.report-verdict p { margin:9px 0 0; font:15px/1.5 Special Elite; }.report-verdict.accepted { border-color:#47705c; background:#d2ddcf; }.report-verdict.accepted small { color:#315b48; }
.case-report-actions { position:sticky; bottom:-34px; display:flex; justify-content:flex-end; gap:9px; margin:30px -12px -20px; padding:14px 12px 20px; background:linear-gradient(transparent,#ebe7d8 25%); }.case-report-actions button { border:1px outset #8c948e; padding:10px 13px; color:#34443e; background:#c8cbc4; cursor:pointer; font:8px IBM Plex Mono; letter-spacing:.06em; }.case-report-actions .primary { float:none; color:#fff; background:#174337; }.case-report-actions button:disabled { opacity:.55;cursor:progress; }
.boot { height: 100vh; background: #071916; display: grid; place-content: center; justify-items: center; color: #819b93; font: 11px IBM Plex Mono; letter-spacing: .15em; }.boot .seal { width: 70px; height: 70px; display: grid; place-items: center; border: 2px solid #b87337; color: #d58a46; margin-bottom: 24px; font-weight: 600; }.boot small { color: #4e6a62; }
@@ -806,8 +811,23 @@ button:focus-visible { outline: 2px solid #e99a44; outline-offset: 2px; }
.notebook-note-actions button:hover { border-color: #6a5a3a; }
.dialogue-capture { margin-left: 12px; font: 10px IBM Plex Mono, monospace; letter-spacing: 1px; background: #0a211de0; border: 1px solid #6f8f85; color: #cdea6a; padding: 2px 8px; cursor: pointer; vertical-align: middle; }
.dialogue-capture:hover { border-color: #cdea6a; color: #eafaa0; }
/* A note torn to the board reads as handwriting too. */
.evidence-card.note .card-content p { font-family: "Reenie Beanie", cursive; font-size: 19px; line-height: 1.05; color: #26356b; }
/* Ordinary board notes retain the small luggage-tag treatment. */
.evidence-card.note.luggage-tag .card-content p { font-family: "Reenie Beanie", cursive; font-size: 19px; line-height: 1.05; color: #26356b; }
/* Notebook pages stay recognizably part of the notebook after being torn out. */
.evidence-card.note.lined-sheet { box-sizing:border-box; min-height:270px; padding:18px 20px 20px 43px; overflow:hidden; color:#26356b;
border:1px solid #e8dec5; background:
linear-gradient(90deg,transparent 0 29px,#c8787880 30px,#c8787880 31px,transparent 32px),
repeating-linear-gradient(180deg,#f4ecd6 0 26px,#b3c1c777 27px,#f4ecd6 28px);
clip-path:polygon(0 0,100% 0,100% 97.5%,97% 99%,93% 98%,89% 100%,84% 98.5%,79% 100%,74% 98%,68% 99.5%,62% 98%,56% 100%,50% 98.5%,44% 100%,38% 98%,32% 99.5%,26% 98%,20% 100%,14% 98.5%,8% 100%,3% 98%,0 99%);
box-shadow:8px 10px 5px #020b0980,0 0 0 1px #6c756f; }
.evidence-card.note.lined-sheet::before { content:'';position:absolute;left:8px;top:19px;bottom:23px;width:10px;background:radial-gradient(circle at 50% 8px,#34433e 0 3px,#d7ceb8 3.5px 5px,transparent 5.5px) 0 0/10px 34px repeat-y;opacity:.82; }
.evidence-card.note.lined-sheet::after { display:none; }
.evidence-card.note.lined-sheet header { height:20px;padding-bottom:4px;border-color:#9ba8aa;color:#6a706b;font-size:7px; }
.evidence-card.note.lined-sheet header i { display:none; }
.evidence-card.note.lined-sheet .card-content { height:214px;overflow:hidden; }
.evidence-card.note.lined-sheet h3 { margin:8px 0 5px;color:#805748;font:600 7px IBM Plex Mono;letter-spacing:.12em; }
.evidence-card.note.lined-sheet .card-content p { display:block;margin:0;overflow:hidden;color:#26356b;font:24px/28px "Reenie Beanie",cursive;white-space:pre-wrap; }
.evidence-card.note.lined-sheet.selected { outline:2px solid #e49a4a;outline-offset:5px;filter:drop-shadow(7px 9px 4px #0007); }
/* === Player auth + character screen (src/play.tsx) ================= */
.auth-plate { gap: 4px; }