tracker

36.0 KB

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