ulve/colony-archive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

project sub-timeline: dashed rail, no animation, pins on rail above bar

Browse Source
This commit is contained in:
ulve
2026-08-08 20:27:29 +02:00
parent 5eda03ea33
commit 9a2c502a19
1 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
game.html
+28 -10
View File
@@ -637,23 +637,41 @@
color:var(--brass); flex-shrink:0; opacity:.7; color:var(--brass); flex-shrink:0; opacity:.7;
} }
.truth-item-text { flex:1; } .truth-item-text { flex:1; }
/* Project bar event dots + click zone */ /* Project sub-timeline row: dashed rail above, bar below */
.tl-row.project-tl {
height: 36px;
overflow: visible;
}
/* Dashed sub-rail at pin level */
.tl-row.project-tl::before {
content: '';
position: absolute;
left: 0; right: 0;
top: 7px;
border-top: 1px dashed rgba(232,220,196,.2);
z-index: 0;
pointer-events: none;
}
/* Project bar sits in lower half */
.tl-row.project-tl .tl-bar {
top: 16px;
height: 18px;
}
/* Pins sit on the dashed rail */
.tl-project-evt-dot { .tl-project-evt-dot {
position: absolute; position: absolute;
width: 11px; height: 11px; width: 10px; height: 10px;
border-radius: 50%; border-radius: 50%;
top: -6px; /* sticks above the bar */ top: 7px;
transform: translateX(-50%); transform: translate(-50%, -50%);
z-index: 3; cursor: pointer; z-index: 3; cursor: pointer;
border: 2px solid var(--void); border: 2px solid var(--void);
box-shadow: 0 1px 4px rgba(0,0,0,.6); box-shadow: 0 1px 3px rgba(0,0,0,.5);
transition: transform .1s;
} }
.tl-project-evt-dot.light { background: var(--paper); border-color: var(--brass); } .tl-project-evt-dot.light { background: var(--paper); border-color: var(--brass); }
.tl-project-evt-dot.dark { background: var(--rust); border-color: var(--void); } .tl-project-evt-dot.dark { background: var(--rust); border-color: var(--void); }
.tl-project-evt-dot:hover { transform: translateX(-50%) scale(1.4); }
.tl-bar-add-overlay { .tl-bar-add-overlay {
position: absolute; top: 0; bottom: 0; position: absolute; top: 16px; bottom: 0;
z-index: 2; cursor: crosshair; background: transparent; z-index: 2; cursor: crosshair; background: transparent;
} }
@@ -853,7 +871,7 @@
<div class="tl-sublabel">Projects</div> <div class="tl-sublabel">Projects</div>
<div class="tl-rows"> <div class="tl-rows">
<template x-for="item in projects()" :key="item.id"> <template x-for="item in projects()" :key="item.id">
<div class="tl-row" style="height:26px;overflow:visible"> <div class="tl-row project-tl">
<a <a
class="tl-bar project-bar" class="tl-bar project-bar"
:class="[item.mood || (game && game.mood), !item.end_date ? 'open-right' : '']" :class="[item.mood || (game && game.mood), !item.end_date ? 'open-right' : '']"