tracker

34.0 KB

1. // styles.hl — all of the app's CSS, served as /__hl/app.css. Components carry no Style
2. // blocks: markup is domain tags, this file lays them out.
3. //
4. // TOKENS: the WorldAPI palette + semantic tokens are declared in `shared/tokens.hl` as
5. // hl:web css variables, vendored verbatim from ident.worldapi.org (see that project's
6. // README "Design tokens"). This file imports the tokens it uses and writes them as members;
7. // the app sets only its accent (greenDark, per CONCEPT.md / antcolony README "look and style").
8. //
9. // In a styles file a bare name is a TAG (camelCase -> kebab: `emptyState` is `empty-state`),
10. // a quoted name is a selector written verbatim. MOBILE FIRST (mission 047, the creator: "style is
11. // supposed to be mobile first"): every rule outside a block is the PHONE's (390 px wide); the
12. // `@media (min-width: 40rem)` block at the bottom only ADDS what a wider screen changes. Nothing
13. // here may make a 390 px page scroll sideways, and the header stays ONE row (the gate checks both).
14. import { var } from 'hl:web/css'
15. import { greenDark, colorText, colorBackground, colorTextStrong, colorBackgroundSunken, colorTextMuted, colorAccentText, colorBorder, colorDanger, colorSurface, orange, blueDark, yellow, purple, blueLight, greenLight } from './shared/tokens.hl'
17. colorAccent = var(greenDark) // the app's accent: the only token this app sets
18. // tracker.worldapi.org#4: genre pills in blue; artists orange (mission 047, the creator: "orange, not red") — the raw
19. // palette tokens (like the accent above), not the semantic `colorDanger`/`colorAction` (this isn't a
20. // warning or an action, just the creator's chosen colour for these two kinds of link/pill)
21. colorArtist = var(orange)
22. colorGenre = var(blueDark)
23. // tracker.worldapi.org#20 (mission 068): every TYPE has one palette colour, wherever its word appears (page headings, list
24. // headings, the homepage rows, the search's and the filmography's labels): Movie yellow, Series the accent (greenDark), Show
25. // purple, Genre blue and Person orange (as the pills and artist links already were), Franchise light blue, Timeline light
26. // green (tracker#19's pages). The name next to it stays white (colorTextStrong).
27. colorMovie = var(yellow)
28. colorSeries = var(greenDark)
29. colorShow = var(purple)
30. colorFranchise = var(blueLight)
31. colorTimeline = var(greenLight)
33. '*,
34. *::before,
35. *::after' { boxSizing = 'border-box' }
37. html { colorScheme = 'dark' }
38. body { margin = '0' font = '16px/1.5 system-ui, sans-serif' color = colorText background = colorBackground }
39. a { color = colorAccent textDecoration = 'none' }
40. 'a:hover' { textDecoration = 'underline' }
41. h1 { margin = '0 0 .8rem' fontSize = '1.2rem' lineHeight = '1.3' color = colorTextStrong }
42. button { font = 'inherit' fontWeight = '600' padding = '.4rem .9rem' color = colorAccentText background = colorAccent border = '0' borderRadius = '.4rem' cursor = 'pointer' }
43. 'button:hover' { filter = 'brightness(1.1)' }
44. 'button.quiet' { color = colorText background = 'transparent' border = '0' }
45. // the ONLY buttons with a border are inverted ones (creator: "no borders for the buttons unless they are inverted")
46. 'button.inverted' { color = colorAccent background = 'transparent' border = '1px solid ' + colorAccent }
47. 'button.quiet:hover' { background = colorSurface filter = 'none' }
49. // the header is ONE row on a phone: brand left, ident selector + "Log out" right, never wrapping — the
50. // user box may shrink (minWidth 0), the brand may not
51. applicationHeader { position = 'sticky' top = '0' zIndex = '5' display = 'flex' flexWrap = 'nowrap' alignItems = 'center' gap = '.5rem' padding = '.45rem .75rem' background = colorBackgroundSunken }
52. 'application-header .brand' { flex = 'none' fontWeight = '100' fontSize = '1.15rem' lineHeight = '1.2' color = colorAccent }
53. main { display = 'block' maxWidth = '60rem' margin = '0 auto' padding = '.8rem .75rem' }
55. // ---- login (top right of the header), copied from calendar.worldapi.org's styles.hl -------------
56. userBox { display = 'flex' alignItems = 'center' gap = '.25rem' marginLeft = 'auto' minWidth = '0' }
57. '#logout' { flex = 'none' padding = '.3rem .5rem' fontSize = '.9rem' }
58. 'a.button' { display = 'inline-block' padding = '.35rem .8rem' fontWeight = '600' color = colorAccentText background = colorAccent borderRadius = '.4rem' }
59. 'a.button:hover' { textDecoration = 'none' filter = 'brightness(1.1)' }
60. identSelector { '--ident-accent' = colorAccent '--ident-accent-text' = colorAccentText '--ident-background' = colorSurface '--ident-border' = colorBorder '--ident-font' = '600 .85rem/1.4 system-ui, sans-serif' minWidth = '0' }
61. 'ident-selector::part(button)' { padding = '.3rem .6rem' border = 'none' whiteSpace = 'nowrap' }
62. 'ident-selector::part(status)' { padding = '.3rem .6rem' border = 'none' }
63. 'ident-selector::part(identity)' { border = 'none' }
64. // signed out on a phone (mission 056): the selector (nowrap above) and "Log in" never wrap their text — one header row down
65. // to 320 px (a selector key may appear only ONCE per block: a second one replaces the first)
66. '#loginbutton' { flex = 'none' whiteSpace = 'nowrap' padding = '.3rem .6rem' fontSize = '.85rem' }
67. '#loginbutton .wide' { display = 'none' }
68. '.message' { color = colorDanger }
69. '.muted' { color = colorTextMuted }
70. '.message.banner' { margin = '0' padding = '.5rem .75rem' background = colorBackgroundSunken }
71. 'p.message:empty' { display = 'none' }
73. // ---- offline (tracker.worldapi.org#10, components/main.hl): the note under the header, and the probe whose endless
74. // animation is the shell's 1 s tick (it must be rendered for the animation to run — not display none — so: invisible)
75. offlineNote { display = 'block' padding = '.5rem .75rem' color = colorTextStrong background = colorSurface }
76. netProbe { position = 'fixed' left = '0' top = '0' width = '1px' height = '1px' opacity = '0' pointerEvents = 'none' animation = 'tracker-net-tick 1s linear infinite' }
77. '@keyframes tracker-net-tick' = {
78. 'from' = { opacity = '0' }
79. to = { opacity = '0' }
80. }
82. // ---- typed headings (tracker.worldapi.org#20): "Movie | Riddick" — `h1 { class = "typed" typeWord { class = "type-word
83. // type-movie" … } typeSep { "|" } typeName { … } }`; the word in its type's colour, a muted bar, the name white. A flex row
84. // (the server's markup has whitespace between the parts, a client-built page none — the gap makes both look the same).
85. // MOBILE FIRST: a long name wraps inside its own column, right of "Show |", never sideways.
86. '.type-movie' { color = colorMovie }
87. '.type-series' { color = colorSeries }
88. '.type-show' { color = colorShow }
89. '.type-genre' { color = colorGenre }
90. '.type-person' { color = colorArtist }
91. '.type-franchise' { color = colorFranchise }
92. '.type-timeline' { color = colorTimeline }
93. 'h1.typed' { display = 'flex' alignItems = 'baseline' columnGap = '.4em' }
94. typeWord { flex = 'none' fontWeight = '600' }
95. typeSep { flex = 'none' fontWeight = '300' color = colorTextMuted }
96. typeName { minWidth = '0' color = colorTextStrong overflowWrap = 'anywhere' }
98. // ---- /shows/:slug (tracker.worldapi.org#4) --------------------------------------------------
99. showPage { display = 'block' }
100. // phone (mission 047, the creator): the title (+ Follow) first, then the poster at the full content width, then genres,
101. // plot, cast — `showMeta` dissolves (display contents) so its title row can go before the poster (order -1). From 40rem
102. // the creator's desktop layout: poster left (10rem), right of it the title and the rest.
103. showHeader { display = 'flex' flexDirection = 'column' gap = '.6rem' marginBottom = '1.2rem' }
104. showPoster { display = 'block' width = '100%' }
105. 'show-poster img' { display = 'block' width = '100%' height = 'auto' borderRadius = '.4rem' aspectRatio = '2 / 3' objectFit = 'cover' background = colorSurface }
106. // mission 060 (tracker.worldapi.org#27): the short id under the poster (and the person's photo) — small, muted, monospace; one
107. // click selects all of it
108. shortIdLabel { display = 'block' marginTop = '.3rem' font = '400 .8rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace' letterSpacing = '.05em' color = colorTextMuted textAlign = 'center' userSelect = 'all' }
109. 'person-meta short-id-label' { textAlign = 'left' }
110. showMeta { display = 'contents' overflowWrap = 'anywhere' }
111. showTitle { order = '-1' display = 'flex' alignItems = 'center' gap = '.6rem' }
112. 'show-title h1' { flex = '1' minWidth = '0' margin = '0' }
113. 'button.follow' { flex = 'none' padding = '.3rem .8rem' fontSize = '.9rem' }
114. 'button.follow.inverted' { padding = 'calc(.3rem - 1px) calc(.8rem - 1px)' }
115. // tracker.worldapi.org#12: the show on TMDB / IMDb / TheTVDB / TVmaze — small monochrome badges (CSS only, no copied
116. // logos), muted like the other secondary text, the accent on hover. Phone: right under the title row (order -1, after it
117. // in the markup), above the full-width poster.
118. showLinks { order = '-1' display = 'flex' flexWrap = 'wrap' gap = '.4rem' }
119. 'a.extlink' { display = 'inline-flex' alignItems = 'center' height = '1.5rem' padding = '0 .45rem' borderRadius = '.3rem' font = '700 .75rem/1 system-ui, sans-serif' letterSpacing = '.02em' color = colorBackground background = colorTextMuted }
120. 'a.extlink:hover' { textDecoration = 'none' background = colorAccent }
121. // mission 058 (#24): a movie's watched check + its word; phone: under the title row (order -1), above the poster
122. movieWatch { order = '-1' display = 'flex' alignItems = 'center' gap = '.4rem' }
123. movieWatchLabel { fontSize = '.95rem' color = colorText }
124. showGenres { display = 'flex' flexWrap = 'wrap' gap = '.4rem' margin = '.5rem 0' }
125. '.genre-pill' { display = 'inline-block' padding = '.15rem .6rem' borderRadius = '1rem' fontSize = '.85rem' color = colorGenre border = '1px solid ' + colorGenre }
126. showSummary { display = 'block' margin = '.5rem 0' fontSize = '.95rem' color = colorText }
127. // tracker.worldapi.org#28: crew (one small muted label per job, the names after it) and the whole cast — "Name (Character)",
128. // comma-separated as before; names past the first 20 (a crew job: 6) are hidden while the block is `collapsed`, the "Show all"
129. // button (no border: not inverted) flips the block's class (client-side). The character and the comma are the link's ::after
130. // (`data-role`): one element per name, so no SSR line break can put a space before the comma.
131. showCrew { display = 'block' margin = '.5rem 0' }
132. showCast { display = 'block' margin = '.5rem 0' }
133. castHeading { display = 'block' fontSize = '.75rem' letterSpacing = '.04em' textTransform = 'uppercase' color = colorTextMuted }
134. crewLabel { display = 'block' marginTop = '.35rem' fontSize = '.75rem' letterSpacing = '.04em' textTransform = 'uppercase' color = colorTextMuted }
135. 'show-crew crew-label:first-child' { marginTop = '0' }
136. castLabel { display = 'block' margin = '.4rem 0 .1rem' fontSize = '.75rem' letterSpacing = '.04em' textTransform = 'uppercase' color = colorTextMuted }
137. '.artist-link' { color = colorArtist }
138. '.crew-link' { color = colorArtist }
139. 'a.artist-link::after' { content = "attr(data-role) ', '" color = colorTextMuted }
140. 'a.crew-link::after' { content = "', '" color = colorTextMuted }
141. 'a.artist-link.end::after,
142. show-cast.collapsed a.artist-link.cut::after' { content = 'attr(data-role)' }
143. 'a.crew-link.end::after,
144. show-crew.collapsed a.crew-link.cut::after' { content = 'none' }
145. 'show-cast.collapsed .more,
146. show-crew.collapsed .more' { display = 'none' }
147. 'button.showall' { display = 'block' margin = '.3rem 0 0' padding = '.15rem 0' fontSize = '.85rem' color = colorAccent background = 'transparent' }
148. 'button.showall:hover' { background = 'transparent' textDecoration = 'underline' }
149. 'show-cast.collapsed when-all,
150. show-crew.collapsed when-all,
151. show-cast.all when-collapsed,
152. show-crew.all when-collapsed' { display = 'none' }
154. showSeasons { display = 'block' }
155. seasonRow { display = 'flex' alignItems = 'center' gap = '.6rem' padding = '.6rem 0' borderTop = '1px solid ' + colorBorder }
156. 'button.season-toggle' { flex = '1' minWidth = '0' display = 'flex' alignItems = 'baseline' gap = '.6rem' justifyContent = 'flex-start' padding = '0' color = colorText background = 'transparent' border = '0' fontWeight = '600' cursor = 'pointer' textAlign = 'left' }
157. seasonCount { fontWeight = '400' fontSize = '.85rem' color = colorTextMuted }
158. // the caret at the header's right edge (mission 047): DOWN while closed, UP while open (tracker#17 — was right/down)
159. seasonCaret { flex = 'none' alignSelf = 'center' display = 'grid' marginLeft = 'auto' color = colorTextMuted transition = 'transform .15s' }
160. 'season-caret svg' { display = 'block' fill = 'none' stroke = 'currentColor' strokeWidth = '2' strokeLinecap = 'round' strokeLinejoin = 'round' }
161. 'season-row.expanded season-caret' { transform = 'rotate(180deg)' }
162. // episodes are NOT indented (mission 047): an episode's check sits under its season's check
163. episodeRow { display = 'flex' alignItems = 'center' gap = '.6rem' padding = '.3rem 0' }
164. episodeNumber { flex = 'none' width = '1.6rem' color = colorTextMuted fontVariantNumeric = 'tabular-nums' }
165. episodeTitle { flex = '1' minWidth = '0' overflowWrap = 'anywhere' }
166. // mission 058 (#22): the episode's air date at the row's right edge, muted like the lists' dates
167. episodeDate { flex = 'none' fontSize = '.85rem' color = colorTextMuted fontVariantNumeric = 'tabular-nums' }
168. // tracker#17: a season's placeholder rows while its episodes load — the episode row's shape (check disc, number, title) in
169. // a moving gradient (the shimmer); same height as an episode row so nothing jumps when the real rows replace them
170. skeletonRow { display = 'flex' alignItems = 'center' gap = '.6rem' padding = '.3rem 0' }
171. 'skeleton-check, skeleton-number, skeleton-title' { display = 'block' borderRadius = '.3rem' background = 'linear-gradient(90deg, ' + colorSurface + ' 35%, ' + colorBorder + ' 50%, ' + colorSurface + ' 65%)' backgroundSize = '400% 100%' animation = 'tracker-shimmer 1.4s linear infinite' }
172. skeletonCheck { flex = 'none' width = '2rem' height = '2rem' borderRadius = '50%' }
173. skeletonNumber { flex = 'none' width = '1.6rem' height = '1rem' }
174. skeletonTitle { flex = '1' maxWidth = '60%' height = '1rem' }
175. 'skeleton-row:nth-of-type(even) skeleton-title' { maxWidth = '42%' }
176. // tracker#26: an incomplete title while its details load (components/show.hl) — the poster's place (2:3, the poster's
177. // width), a cast line, and season-shaped rows; the same shimmer
178. 'skeleton-poster, skeleton-cast' { display = 'block' borderRadius = '.3rem' background = 'linear-gradient(90deg, ' + colorSurface + ' 35%, ' + colorBorder + ' 50%, ' + colorSurface + ' 65%)' backgroundSize = '400% 100%' animation = 'tracker-shimmer 1.4s linear infinite' }
179. skeletonPoster { width = '100%' aspectRatio = '2 / 3' }
180. skeletonCast { width = '70%' height = '1rem' margin = '.5rem 0' }
181. showLoading { display = 'block' marginTop = '1rem' }
182. // its tick (like personProbe): rendered, invisible
183. showProbe { position = 'fixed' left = '0' top = '0' width = '1px' height = '1px' opacity = '0' pointerEvents = 'none' animation = 'tracker-person-tick .1s linear infinite' }
184. '@keyframes tracker-shimmer' = {
185. 'from' = { backgroundPosition = '100% 0' }
186. to = { backgroundPosition = '0% 0' }
187. }
189. // the check: "a disc with a check in it" (drawn in CSS/SVG, no icon font) — solid (filled accent disc, dark check)
190. // once watched; while not, its INVERSION (mission 047, the creator): an outline circle AND an outline check. tracker#29
191. // (the creator: "in /my/unwatched all checkboxes are active"): in the accent colour the outline read as ticked, so the
192. // unwatched outline is MUTED grey (empty, nothing filled) and only turns accent under the pointer; watched stays solid accent
193. 'button.checkicon' { flex = 'none' display = 'grid' placeItems = 'center' width = '2rem' height = '2rem' padding = '0' background = 'transparent' border = '0' borderRadius = '50%' cursor = 'pointer' }
194. '.checkicon circle' { fill = 'transparent' stroke = colorTextMuted strokeWidth = '1.5' }
195. '.checkicon path' { fill = 'none' stroke = colorTextMuted strokeWidth = '2' strokeLinecap = 'round' strokeLinejoin = 'round' }
196. 'button.checkicon.regular:hover circle,
197. button.checkicon.regular:hover path' { stroke = colorAccent }
198. '.checkicon.solid circle' { fill = colorAccent stroke = colorAccent }
199. '.checkicon.solid path' { stroke = colorAccentText }
201. // ---- /unwatched (tracker.worldapi.org#5) ----------------------------------------------------
202. unwatchedPage { display = 'block' }
203. unwatchedRows { display = 'block' }
204. // phone: two lines next to the check — show title + date, below it the episode; one line from 40rem
205. unwatchedRow { display = 'grid' gridTemplateColumns = '2rem minmax(0, 1fr) auto' alignItems = 'center' gap = '0 .6rem' padding = '.5rem 0' borderTop = '1px solid ' + colorBorder }
206. 'unwatched-row button.checkicon' { gridRow = 'span 2' }
207. '.unwatched-show' { fontWeight = '600' overflowWrap = 'anywhere' }
208. unwatchedEpisode { gridColumn = '2 / 4' gridRow = '2' color = colorText overflowWrap = 'anywhere' }
209. unwatchedDate { gridRow = '1' gridColumn = '3' fontSize = '.85rem' color = colorTextMuted fontVariantNumeric = 'tabular-nums' }
211. // ---- /schedule (tracker.worldapi.org#6) — same row layout as /unwatched, minus the check icon -----
212. schedulePage { display = 'block' }
213. scheduleRows { display = 'block' }
214. scheduleRow { display = 'grid' gridTemplateColumns = 'minmax(0, 1fr) auto' alignItems = 'center' gap = '0 .6rem' padding = '.5rem 0' borderTop = '1px solid ' + colorBorder }
215. '.schedule-show' { fontWeight = '600' overflowWrap = 'anywhere' }
216. scheduleEpisode { gridColumn = '1 / 3' gridRow = '2' color = colorText overflowWrap = 'anywhere' }
217. scheduleDate { gridRow = '1' gridColumn = '2' fontSize = '.85rem' color = colorTextMuted fontVariantNumeric = 'tabular-nums' }
219. // ---- /my/shows (tracker.worldapi.org#7) — small poster, title, last watched episode ------------
220. myShowsPage { display = 'block' }
221. myShowsRows { display = 'block' }
222. myShowRow { display = 'flex' alignItems = 'center' gap = '.8rem' padding = '.5rem 0' borderTop = '1px solid ' + colorBorder }
223. 'img.myshow-poster' { flex = 'none' display = 'block' width = '2.5rem' height = 'auto' aspectRatio = '2 / 3' objectFit = 'cover' borderRadius = '.25rem' background = colorSurface }
224. '.myshow-title' { flex = '1' minWidth = '0' fontWeight = '600' overflowWrap = 'anywhere' }
225. myShowEpisode { flex = 'none' fontSize = '.9rem' color = colorTextMuted fontVariantNumeric = 'tabular-nums' }
226. // /my/movies (mission 058, #24): a watched movie's check, the episodes' solid disc, not clickable
227. myMovieWatched { flex = 'none' display = 'grid' placeItems = 'center' width = '2rem' height = '2rem' }
229. // ---- franchises and timelines (tracker.worldapi.org#19, mission 066) ------------------------------------------------------
230. // the widget on a show / movie page: the franchise above, then ONE row "‹ Prequel | Timeline | Sequel ›" — three columns that
231. // never scroll sideways on a phone (the outer two shrink, their title cut to one line); a disabled end is muted
232. franchiseWidgets { display = 'block' margin = '0 0 1.2rem' }
233. franchiseWidget { display = 'block' padding = '.5rem .6rem' marginBottom = '.5rem' background = colorSurface borderRadius = '.5rem' }
234. 'a.fw-franchise' { display = 'block' marginBottom = '.3rem' fontSize = '.8rem' fontWeight = '600' letterSpacing = '.04em' textTransform = 'uppercase' textAlign = 'center' }
235. fwRow { display = 'grid' gridTemplateColumns = 'minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr)' alignItems = 'center' gap = '.5rem' }
236. '.fw-side' { display = 'flex' flexDirection = 'column' minWidth = '0' color = colorAccent }
237. '.fw-next' { alignItems = 'flex-end' textAlign = 'right' }
238. '.fw-side.off' { color = colorTextMuted opacity = '.5' }
239. 'a.fw-side:hover' { textDecoration = 'none' }
240. 'a.fw-side:hover fw-dir' { textDecoration = 'underline' }
241. fwDir { fontWeight = '600' whiteSpace = 'nowrap' }
242. fwTitle { fontSize = '.8rem' color = colorTextMuted whiteSpace = 'nowrap' overflow = 'hidden' textOverflow = 'ellipsis' maxWidth = '100%' }
243. 'a.fw-timeline' { minWidth = '0' fontWeight = '600' color = colorTextStrong textAlign = 'center' overflowWrap = 'anywhere' padding = '0 .4rem' borderLeft = '1px solid ' + colorBorder borderRight = '1px solid ' + colorBorder }
244. // /franchises, /franchises/<slug>, /timelines/<slug> and the editor
245. franchisesPage { display = 'block' }
246. franchisePage { display = 'block' }
247. franchisesHead { display = 'flex' alignItems = 'center' gap = '.6rem' marginBottom = '.8rem' }
248. 'franchises-head h1' { flex = '1' minWidth = '0' margin = '0' overflowWrap = 'anywhere' }
249. 'franchises-head a.button' { flex = 'none' padding = '.3rem .8rem' fontSize = '.9rem' }
250. 'a.franchise-up' { display = 'inline-block' marginBottom = '.3rem' fontSize = '.85rem' fontWeight = '600' letterSpacing = '.04em' textTransform = 'uppercase' }
251. 'p.franchise-summary' { margin = '-.3rem 0 1rem' color = colorText }
252. franchiseList { display = 'block' marginBottom = '1.2rem' }
253. 'a.franchise-row' { display = 'flex' alignItems = 'baseline' gap = '.8rem' padding = '.6rem 0' color = colorTextStrong borderTop = '1px solid ' + colorBorder }
254. franchiseName { flex = '1' minWidth = '0' fontSize = '1.05rem' fontWeight = '600' overflowWrap = 'anywhere' }
255. franchiseCount { flex = 'none' fontSize = '.85rem' color = colorTextMuted }
256. timelineList { display = 'grid' gridTemplateColumns = 'minmax(0, 1fr)' gap = '0 1.2rem' }
257. 'a.timeline-link' { display = 'flex' alignItems = 'baseline' gap = '.6rem' padding = '.35rem 0' color = colorText borderTop = '1px solid ' + colorBorder }
258. timelineLinkName { flex = '1' minWidth = '0' overflowWrap = 'anywhere' }
259. timelineLinkCount { flex = 'none' fontSize = '.8rem' color = colorTextMuted }
260. timelineBlocks { display = 'block' }
261. timelineHead { display = 'flex' flexWrap = 'wrap' alignItems = 'center' gap = '.4rem .8rem' padding = '.8rem 0 .4rem' marginTop = '.6rem' borderBottom = '2px solid ' + colorBorder }
262. timelineTitle { flex = '1' minWidth = '0' display = 'flex' alignItems = 'baseline' gap = '.6rem' }
263. 'a.timeline-name' { fontSize = '1.05rem' fontWeight = '600' color = colorTextStrong overflowWrap = 'anywhere' }
264. timelineCount { flex = 'none' fontSize = '.85rem' color = colorTextMuted }
265. sortToggle { flex = 'none' display = 'flex' padding = '.15rem' background = colorSurface borderRadius = '.45rem' }
266. 'button.sortbtn' { padding = '.25rem .7rem' fontSize = '.85rem' color = colorText background = 'transparent' }
267. 'button.sortbtn.on' { color = colorAccentText background = colorAccent }
268. 'a.timeline-item' { display = 'flex' alignItems = 'center' gap = '.8rem' padding = '.45rem 0' color = colorText borderTop = '1px solid ' + colorBorder }
269. 'a.timeline-item:hover' { textDecoration = 'none' }
270. 'a.timeline-item:hover film-title' { color = colorAccent }
271. franchiseEditPage { display = 'block' }
272. timelineEditPage { display = 'block' }
273. editSection { display = 'flex' flexDirection = 'column' gap = '.5rem' marginBottom = '1.4rem' }
274. 'edit-section input, edit-section textarea' { display = 'block' width = '100%' padding = '.55rem .75rem' font = 'inherit' color = colorTextStrong background = colorSurface border = '0' borderRadius = '.4rem' outline = 'none' }
275. 'edit-section input:focus, edit-section textarea:focus' { boxShadow = '0 0 0 2px ' + colorAccent }
276. 'edit-section > button' { alignSelf = 'flex-start' }
277. chipRow { display = 'flex' flexWrap = 'wrap' gap = '.4rem' }
278. 'button.chip' { padding = '.3rem .8rem' fontSize = '.9rem' color = colorText background = colorSurface }
279. 'button.chip.on' { color = colorAccentText background = colorAccent }
280. 'a.edit-new-franchise' { fontSize = '.9rem' }
281. editRows { display = 'block' }
282. editRow { display = 'flex' alignItems = 'center' gap = '.5rem' padding = '.4rem 0' borderTop = '1px solid ' + colorBorder }
283. editPos { flex = 'none' width = '1.6rem' color = colorTextMuted fontVariantNumeric = 'tabular-nums' textAlign = 'right' }
284. 'button.mv' { flex = 'none' width = '2.4rem' height = '2.4rem' padding = '0' fontSize = '1.1rem' }
285. 'button.mv.off' { opacity = '.3' pointerEvents = 'none' }
286. 'button.mv.rm' { color = colorDanger }
288. // ---- / (tracker.worldapi.org#13): signed in, four big icon tiles; then the text and two poster rows ----------------
289. home { display = 'block' }
290. // tracker#21: five tiles (Unwatched, Schedule, Series, Shows, Movies) — three per row on a phone, one row of five from 40rem
291. homeNav { display = 'grid' gridTemplateColumns = 'repeat(3, minmax(0, 1fr))' gap = '.6rem' marginBottom = '1.2rem' }
292. 'a.hometile' { display = 'flex' flexDirection = 'column' alignItems = 'center' justifyContent = 'center' gap = '.4rem' padding = '1rem .5rem' borderRadius = '.6rem' color = colorTextStrong background = colorSurface fontWeight = '600' }
293. 'a.hometile:hover' { textDecoration = 'none' color = colorAccent }
294. 'a.hometile svg' { display = 'block' width = '2.5rem' height = '2.5rem' fill = 'none' stroke = colorAccent strokeWidth = '1.6' strokeLinecap = 'round' strokeLinejoin = 'round' }
295. homeIntro { display = 'block' marginBottom = '1rem' color = colorText }
296. 'home-intro p' { margin = '0 0 .6rem' }
297. homeSection { display = 'block' marginBottom = '1.2rem' }
298. 'home-section h2' { margin = '0 0 .5rem' fontSize = '1.1rem' }
299. 'home-section h2 a' { color = colorTextStrong }
300. // tracker#20: Movies / Series / Shows in their type's colour (more specific than the rule above)
301. 'home-section h2 a.type-movie' { color = colorMovie }
302. 'home-section h2 a.type-series' { color = colorSeries }
303. 'home-section h2 a.type-show' { color = colorShow }
304. 'home-section h2 a::after' { content = "' ›'" color = colorAccent }
305. // phone: the row scrolls sideways INSIDE itself (the page never does); from 40rem a grid of 5
306. tileRow { display = 'flex' gap = '.6rem' overflowX = 'auto' scrollSnapType = 'x proximity' paddingBottom = '.4rem' }
307. 'tile-row a.tile' { flex = 'none' width = '7rem' scrollSnapAlign = 'start' }
308. // /movies, /series and /shows: a grid of 3 on a phone, 6 from 40rem
309. listPage { display = 'block' }
310. '.list-count' { margin = '-.4rem 0 .8rem' fontSize = '.9rem' }
311. tileGrid { display = 'grid' gridTemplateColumns = 'repeat(3, minmax(0, 1fr))' gap = '.8rem .6rem' marginBottom = '1rem' }
312. pagerBox { display = 'block' margin = '1rem 0' }
313. // the copied pagination (components/pagination.hl, its own Style) a bit tighter on a phone, so "Previous 1 … 4 5 6 … 326
314. // Next" stays one row at 390 px; from 40rem its own sizes
315. 'pager-box pagination ol' { gap = '.1rem' }
316. 'pager-box pagination button' { minWidth = '1.8rem' padding = '.3rem .3rem' fontSize = '.95rem' }
317. // a tile: the poster (2:3, the placeholder until the sync has a real one), the title (two lines at most), the year
318. 'a.tile' { display = 'block' minWidth = '0' color = colorText }
319. 'a.tile:hover' { textDecoration = 'none' }
320. 'a.tile:hover tile-title' { color = colorAccent }
321. 'img.tile-poster' { display = 'block' width = '100%' height = 'auto' aspectRatio = '2 / 3' objectFit = 'cover' borderRadius = '.35rem' background = colorSurface }
322. tileTitle { display = '-webkit-box' marginTop = '.3rem' fontSize = '.85rem' fontWeight = '600' lineHeight = '1.25' overflow = 'hidden' overflowWrap = 'anywhere' '-webkit-line-clamp' = '2' '-webkit-box-orient' = 'vertical' }
323. tileYear { display = 'block' fontSize = '.8rem' color = colorTextMuted fontVariantNumeric = 'tabular-nums' }
324. myMoviesPage { display = 'block' }
326. // ---- the search (tracker.worldapi.org#14) — the header's magnifier and /search ------------------------------------
327. 'a.searchlink' { flex = 'none' display = 'grid' placeItems = 'center' width = '2rem' height = '2rem' color = colorText borderRadius = '.4rem' }
328. 'a.searchlink:hover' { color = colorAccent background = colorSurface }
329. 'a.searchlink svg' { display = 'block' fill = 'none' stroke = 'currentColor' strokeWidth = '2' strokeLinecap = 'round' }
330. searchPage { display = 'block' }
331. searchBar { display = 'block' marginBottom = '.8rem' }
332. '#searchinput' { display = 'block' width = '100%' padding = '.55rem .75rem' font = 'inherit' color = colorTextStrong background = colorSurface border = '0' borderRadius = '.4rem' outline = 'none' }
333. '#searchinput:focus' { boxShadow = '0 0 0 2px ' + colorAccent }
334. searchSection { display = 'block' marginBottom = '1rem' }
335. 'search-section h2' { margin = '.4rem 0 .2rem' fontSize = '.85rem' fontWeight = '600' letterSpacing = '.04em' textTransform = 'uppercase' color = colorTextMuted }
336. searchRow { display = 'flex' alignItems = 'center' gap = '.8rem' padding = '.4rem 0' borderTop = '1px solid ' + colorBorder }
337. webRow { display = 'flex' alignItems = 'center' gap = '.8rem' padding = '.4rem 0' borderTop = '1px solid ' + colorBorder }
338. 'img.search-poster' { flex = 'none' display = 'block' width = '2.5rem' height = 'auto' aspectRatio = '2 / 3' objectFit = 'cover' borderRadius = '.25rem' background = colorSurface }
339. '.search-title' { flex = '1' minWidth = '0' fontWeight = '600' overflowWrap = 'anywhere' }
340. '.search-person' { flex = '1' minWidth = '0' color = colorArtist overflowWrap = 'anywhere' }
341. searchType { flex = 'none' fontSize = '.8rem' color = colorTextMuted }
342. webText { flex = '1' minWidth = '0' display = 'flex' flexDirection = 'column' }
343. webTitle { fontWeight = '600' color = colorTextStrong overflowWrap = 'anywhere' }
344. 'button.add' { flex = 'none' padding = 'calc(.3rem - 1px) calc(.8rem - 1px)' fontSize = '.9rem' }
345. webBar { display = 'flex' alignItems = 'center' gap = '.8rem' margin = '.6rem 0' }
347. // ---- /person/<slug> (tracker.worldapi.org#16): photo + facts + bio, then the filmography rows ----------------------
348. // the photo left of the name (phone 6rem, from 40rem 10rem). Rows like the search's: small poster, title, year · kind,
349. // the role below
350. personPage { display = 'block' }
351. personHeader { display = 'flex' alignItems = 'flex-start' gap = '.8rem' marginBottom = '1rem' }
352. personPhoto { flex = 'none' display = 'block' width = '6rem' }
353. 'person-photo img' { display = 'block' width = '100%' height = 'auto' aspectRatio = '2 / 3' objectFit = 'cover' borderRadius = '.4rem' background = colorSurface }
354. personMeta { display = 'block' minWidth = '0' overflowWrap = 'anywhere' }
355. personFact { display = 'block' fontSize = '.95rem' color = colorTextMuted }
356. // the bio under photo + facts, full width; four lines until clicked (components/person.hl toggleBio)
357. personBio { display = 'block' margin = '0 0 1rem' fontSize = '.95rem' whiteSpace = 'pre-line' cursor = 'pointer' }
358. 'person-bio.short' { display = '-webkit-box' overflow = 'hidden' '-webkit-line-clamp' = '4' '-webkit-box-orient' = 'vertical' }
359. 'h2.film-heading' { margin = '.4rem 0 .2rem' fontSize = '.85rem' fontWeight = '600' letterSpacing = '.04em' textTransform = 'uppercase' color = colorTextMuted }
360. personLoading { display = 'block' padding = '.6rem 0' color = colorTextMuted animation = 'tracker-person-pulse 1.2s ease-in-out infinite alternate' }
361. // the fill's tick (components/person.hl): rendered (an animation needs it) but invisible, like netProbe
362. personProbe { position = 'fixed' left = '0' top = '0' width = '1px' height = '1px' opacity = '0' pointerEvents = 'none' animation = 'tracker-person-tick .1s linear infinite' }
363. '@keyframes tracker-person-tick' = {
364. 'from' = { opacity = '0' }
365. to = { opacity = '0' }
366. }
367. '@keyframes tracker-person-pulse' = {
368. 'from' = { opacity = '1' }
369. to = { opacity = '.45' }
370. }
371. filmRows { display = 'block' }
372. 'a.film-row' { display = 'flex' alignItems = 'center' gap = '.8rem' padding = '.45rem 0' color = colorText borderTop = '1px solid ' + colorBorder }
373. 'a.film-row:hover' { textDecoration = 'none' }
374. 'a.film-row:hover film-title' { color = colorAccent }
375. 'img.film-poster' { flex = 'none' display = 'block' width = '2.5rem' height = 'auto' aspectRatio = '2 / 3' objectFit = 'cover' borderRadius = '.25rem' background = colorSurface }
376. filmText { flex = '1' minWidth = '0' display = 'flex' flexDirection = 'column' }
377. filmTitle { fontWeight = '600' color = colorTextStrong overflowWrap = 'anywhere' }
378. filmMeta { display = 'flex' gap = '.5rem' fontSize = '.8rem' color = colorTextMuted fontVariantNumeric = 'tabular-nums' }
379. filmRole { fontSize = '.85rem' color = colorArtist overflowWrap = 'anywhere' }
380. 'film-role:empty' { display = 'none' }
381. 'film-year:empty' { display = 'none' }
383. // ---- wider screens (≥ 40rem = 640 px): only what changes from the phone -------------------------
384. '@media (min-width: 40rem)' = {
385. applicationHeader = { gap = '1rem' padding = '.6rem 1rem' }
386. userBox = { gap = '.5rem' }
387. '#logout' = { padding = '.4rem .9rem' fontSize = '1rem' }
388. identSelector = { '--ident-font' = '600 .9rem/1.4 system-ui, sans-serif' }
389. 'ident-selector::part(button)' = { padding = '.35rem .8rem' }
390. 'ident-selector::part(status)' = { padding = '.35rem .8rem' }
391. '#loginbutton' = { padding = '.35rem .8rem' fontSize = '1rem' }
392. '#loginbutton .wide' = { display = 'inline' }
393. main = { padding = '1rem' }
394. h1 = { margin = '0 0 1rem' fontSize = '1.3rem' }
395. showHeader = { flexDirection = 'row' alignItems = 'flex-start' gap = '1rem' marginBottom = '1.5rem' }
396. showPoster = { flex = 'none' width = '10rem' }
397. showMeta = { display = 'block' flex = '1' minWidth = '0' }
398. showTitle = { marginBottom = '1rem' }
399. movieWatch = { margin = '-.4rem 0 .8rem' }
400. showSummary = { fontSize = '1rem' }
401. episodeRow = { padding = '.4rem 0' }
402. skeletonRow = { padding = '.4rem 0' }
403. unwatchedRow = { display = 'flex' }
404. '.unwatched-show' = { flex = 'none' }
405. unwatchedEpisode = { flex = '1' }
406. unwatchedDate = { flex = 'none' }
407. scheduleRow = { display = 'flex' }
408. '.schedule-show' = { flex = 'none' }
409. scheduleEpisode = { flex = '1' }
410. scheduleDate = { flex = 'none' }
411. homeNav = { gridTemplateColumns = 'repeat(5, minmax(0, 1fr))' gap = '1rem' }
412. 'a.hometile' = { padding = '1.4rem .5rem' }
413. tileRow = { display = 'grid' gridTemplateColumns = 'repeat(5, minmax(0, 1fr))' gap = '1rem .8rem' overflowX = 'visible' }
414. 'tile-row a.tile' = { width = 'auto' }
415. tileGrid = { gridTemplateColumns = 'repeat(6, minmax(0, 1fr))' gap = '1rem .8rem' }
416. 'pager-box pagination ol' = { gap = '.3rem' }
417. 'pager-box pagination button' = { minWidth = '2.2rem' padding = '.35rem .6rem' fontSize = '1rem' }
418. personHeader = { gap = '1rem' }
419. personPhoto = { width = '10rem' }
420. timelineList = { gridTemplateColumns = 'repeat(2, minmax(0, 1fr))' }
421. fwRow = { gridTemplateColumns = 'minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr)' }
422. }