tracker

14.6 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 } 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)
24. '*,
25. *::before,
26. *::after' { boxSizing = 'border-box' }
28. html { colorScheme = 'dark' }
29. body { margin = '0' font = '16px/1.5 system-ui, sans-serif' color = colorText background = colorBackground }
30. a { color = colorAccent textDecoration = 'none' }
31. 'a:hover' { textDecoration = 'underline' }
32. h1 { margin = '0 0 .8rem' fontSize = '1.2rem' lineHeight = '1.3' color = colorTextStrong }
33. button { font = 'inherit' fontWeight = '600' padding = '.4rem .9rem' color = colorAccentText background = colorAccent border = '0' borderRadius = '.4rem' cursor = 'pointer' }
34. 'button:hover' { filter = 'brightness(1.1)' }
35. 'button.quiet' { color = colorText background = 'transparent' border = '0' }
36. // the ONLY buttons with a border are inverted ones (creator: "no borders for the buttons unless they are inverted")
37. 'button.inverted' { color = colorAccent background = 'transparent' border = '1px solid ' + colorAccent }
38. 'button.quiet:hover' { background = colorSurface filter = 'none' }
40. // the header is ONE row on a phone: brand left, ident selector + "Log out" right, never wrapping — the
41. // user box may shrink (minWidth 0), the brand may not
42. applicationHeader { position = 'sticky' top = '0' zIndex = '5' display = 'flex' flexWrap = 'nowrap' alignItems = 'center' gap = '.5rem' padding = '.45rem .75rem' background = colorBackgroundSunken }
43. 'application-header .brand' { flex = 'none' fontWeight = '100' fontSize = '1.15rem' lineHeight = '1.2' color = colorAccent }
44. main { display = 'block' maxWidth = '60rem' margin = '0 auto' padding = '.8rem .75rem' }
46. // ---- login (top right of the header), copied from calendar.worldapi.org's styles.hl -------------
47. userBox { display = 'flex' alignItems = 'center' gap = '.25rem' marginLeft = 'auto' minWidth = '0' }
48. '#logout' { flex = 'none' padding = '.3rem .5rem' fontSize = '.9rem' }
49. 'a.button' { display = 'inline-block' padding = '.35rem .8rem' fontWeight = '600' color = colorAccentText background = colorAccent borderRadius = '.4rem' }
50. 'a.button:hover' { textDecoration = 'none' filter = 'brightness(1.1)' }
51. 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' }
52. 'ident-selector::part(button)' { padding = '.3rem .6rem' border = 'none' }
53. 'ident-selector::part(status)' { padding = '.3rem .6rem' border = 'none' }
54. 'ident-selector::part(identity)' { border = 'none' }
55. '.message' { color = colorDanger }
56. '.muted' { color = colorTextMuted }
57. '.message.banner' { margin = '0' padding = '.5rem .75rem' background = colorBackgroundSunken }
58. 'p.message:empty' { display = 'none' }
60. // ---- offline (tracker.worldapi.org#10, components/main.hl): the note under the header, and the probe whose endless
61. // animation is the shell's 1 s tick (it must be rendered for the animation to run — not display none — so: invisible)
62. offlineNote { display = 'block' padding = '.5rem .75rem' color = colorTextStrong background = colorSurface }
63. netProbe { position = 'fixed' left = '0' top = '0' width = '1px' height = '1px' opacity = '0' pointerEvents = 'none' animation = 'tracker-net-tick 1s linear infinite' }
64. '@keyframes tracker-net-tick' = {
65. 'from' = { opacity = '0' }
66. to = { opacity = '0' }
67. }
69. // ---- /shows/:slug (tracker.worldapi.org#4) --------------------------------------------------
70. showPage { display = 'block' }
71. // phone (mission 047, the creator): the title (+ Follow) first, then the poster at the full content width, then genres,
72. // plot, cast — `showMeta` dissolves (display contents) so its title row can go before the poster (order -1). From 40rem
73. // the creator's desktop layout: poster left (10rem), right of it the title and the rest.
74. showHeader { display = 'flex' flexDirection = 'column' gap = '.6rem' marginBottom = '1.2rem' }
75. showPoster { display = 'block' width = '100%' }
76. 'show-poster img' { display = 'block' width = '100%' height = 'auto' borderRadius = '.4rem' aspectRatio = '2 / 3' objectFit = 'cover' background = colorSurface }
77. showMeta { display = 'contents' overflowWrap = 'anywhere' }
78. showTitle { order = '-1' display = 'flex' alignItems = 'center' gap = '.6rem' }
79. 'show-title h1' { flex = '1' minWidth = '0' margin = '0' }
80. 'button.follow' { flex = 'none' padding = '.3rem .8rem' fontSize = '.9rem' }
81. 'button.follow.inverted' { padding = 'calc(.3rem - 1px) calc(.8rem - 1px)' }
82. // tracker.worldapi.org#12: the show on TMDB / IMDb / TheTVDB / TVmaze — small monochrome badges (CSS only, no copied
83. // logos), muted like the other secondary text, the accent on hover. Phone: right under the title row (order -1, after it
84. // in the markup), above the full-width poster.
85. showLinks { order = '-1' display = 'flex' flexWrap = 'wrap' gap = '.4rem' }
86. '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 }
87. 'a.extlink:hover' { textDecoration = 'none' background = colorAccent }
88. showGenres { display = 'flex' flexWrap = 'wrap' gap = '.4rem' margin = '.5rem 0' }
89. '.genre-pill' { display = 'inline-block' padding = '.15rem .6rem' borderRadius = '1rem' fontSize = '.85rem' color = colorGenre border = '1px solid ' + colorGenre }
90. showSummary { display = 'block' margin = '.5rem 0' fontSize = '.95rem' color = colorText }
91. showCast { display = 'block' margin = '.5rem 0' }
92. '.artist-link' { color = colorArtist }
93. '.artist-link:not(:last-child)::after' { content = "', '" color = colorTextMuted }
95. showSeasons { display = 'block' }
96. seasonRow { display = 'flex' alignItems = 'center' gap = '.6rem' padding = '.6rem 0' borderTop = '1px solid ' + colorBorder }
97. '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' }
98. seasonCount { fontWeight = '400' fontSize = '.85rem' color = colorTextMuted }
99. // the caret at the header's right edge: down while open, turned to the right while collapsed (mission 047)
100. seasonCaret { flex = 'none' alignSelf = 'center' display = 'grid' marginLeft = 'auto' color = colorTextMuted transition = 'transform .15s' }
101. 'season-caret svg' { display = 'block' fill = 'none' stroke = 'currentColor' strokeWidth = '2' strokeLinecap = 'round' strokeLinejoin = 'round' }
102. 'season-row.collapsed season-caret' { transform = 'rotate(-90deg)' }
103. // episodes are NOT indented (mission 047): an episode's check sits under its season's check
104. episodeRow { display = 'flex' alignItems = 'center' gap = '.6rem' padding = '.3rem 0' }
105. episodeNumber { flex = 'none' width = '1.6rem' color = colorTextMuted fontVariantNumeric = 'tabular-nums' }
106. episodeTitle { flex = '1' minWidth = '0' overflowWrap = 'anywhere' }
108. // the check: "a disc with a check in it" (drawn in CSS/SVG, no icon font) — solid (filled accent disc, dark check)
109. // once watched; while not, its INVERSION (mission 047, the creator): an accent outline circle AND an accent outline check
110. 'button.checkicon' { flex = 'none' display = 'grid' placeItems = 'center' width = '2rem' height = '2rem' padding = '0' background = 'transparent' border = '0' borderRadius = '50%' cursor = 'pointer' }
111. '.checkicon circle' { fill = 'transparent' stroke = colorAccent strokeWidth = '1.5' }
112. '.checkicon path' { fill = 'none' stroke = colorAccent strokeWidth = '2' strokeLinecap = 'round' strokeLinejoin = 'round' }
113. '.checkicon.solid circle' { fill = colorAccent stroke = colorAccent }
114. '.checkicon.solid path' { stroke = colorAccentText }
116. // ---- /unwatched (tracker.worldapi.org#5) ----------------------------------------------------
117. unwatchedPage { display = 'block' }
118. unwatchedRows { display = 'block' }
119. // phone: two lines next to the check — show title + date, below it the episode; one line from 40rem
120. unwatchedRow { display = 'grid' gridTemplateColumns = '2rem minmax(0, 1fr) auto' alignItems = 'center' gap = '0 .6rem' padding = '.5rem 0' borderTop = '1px solid ' + colorBorder }
121. 'unwatched-row button.checkicon' { gridRow = 'span 2' }
122. '.unwatched-show' { fontWeight = '600' overflowWrap = 'anywhere' }
123. unwatchedEpisode { gridColumn = '2 / 4' gridRow = '2' color = colorText overflowWrap = 'anywhere' }
124. unwatchedDate { gridRow = '1' gridColumn = '3' fontSize = '.85rem' color = colorTextMuted fontVariantNumeric = 'tabular-nums' }
126. // ---- /schedule (tracker.worldapi.org#6) — same row layout as /unwatched, minus the check icon -----
127. schedulePage { display = 'block' }
128. scheduleRows { display = 'block' }
129. scheduleRow { display = 'grid' gridTemplateColumns = 'minmax(0, 1fr) auto' alignItems = 'center' gap = '0 .6rem' padding = '.5rem 0' borderTop = '1px solid ' + colorBorder }
130. '.schedule-show' { fontWeight = '600' overflowWrap = 'anywhere' }
131. scheduleEpisode { gridColumn = '1 / 3' gridRow = '2' color = colorText overflowWrap = 'anywhere' }
132. scheduleDate { gridRow = '1' gridColumn = '2' fontSize = '.85rem' color = colorTextMuted fontVariantNumeric = 'tabular-nums' }
134. // ---- /my/shows (tracker.worldapi.org#7) — small poster, title, last watched episode ------------
135. myShowsPage { display = 'block' }
136. myShowsRows { display = 'block' }
137. myShowRow { display = 'flex' alignItems = 'center' gap = '.8rem' padding = '.5rem 0' borderTop = '1px solid ' + colorBorder }
138. 'img.myshow-poster' { flex = 'none' display = 'block' width = '2.5rem' height = 'auto' aspectRatio = '2 / 3' objectFit = 'cover' borderRadius = '.25rem' background = colorSurface }
139. '.myshow-title' { flex = '1' minWidth = '0' fontWeight = '600' overflowWrap = 'anywhere' }
140. myShowEpisode { flex = 'none' fontSize = '.9rem' color = colorTextMuted fontVariantNumeric = 'tabular-nums' }
142. // ---- the search (tracker.worldapi.org#14) — the header's magnifier and /search ------------------------------------
143. 'a.searchlink' { flex = 'none' display = 'grid' placeItems = 'center' width = '2rem' height = '2rem' color = colorText borderRadius = '.4rem' }
144. 'a.searchlink:hover' { color = colorAccent background = colorSurface }
145. 'a.searchlink svg' { display = 'block' fill = 'none' stroke = 'currentColor' strokeWidth = '2' strokeLinecap = 'round' }
146. searchPage { display = 'block' }
147. searchBar { display = 'block' marginBottom = '.8rem' }
148. '#searchinput' { display = 'block' width = '100%' padding = '.55rem .75rem' font = 'inherit' color = colorTextStrong background = colorSurface border = '0' borderRadius = '.4rem' outline = 'none' }
149. '#searchinput:focus' { boxShadow = '0 0 0 2px ' + colorAccent }
150. searchSection { display = 'block' marginBottom = '1rem' }
151. 'search-section h2' { margin = '.4rem 0 .2rem' fontSize = '.85rem' fontWeight = '600' letterSpacing = '.04em' textTransform = 'uppercase' color = colorTextMuted }
152. searchRow { display = 'flex' alignItems = 'center' gap = '.8rem' padding = '.4rem 0' borderTop = '1px solid ' + colorBorder }
153. webRow { display = 'flex' alignItems = 'center' gap = '.8rem' padding = '.4rem 0' borderTop = '1px solid ' + colorBorder }
154. 'img.search-poster' { flex = 'none' display = 'block' width = '2.5rem' height = 'auto' aspectRatio = '2 / 3' objectFit = 'cover' borderRadius = '.25rem' background = colorSurface }
155. '.search-title' { flex = '1' minWidth = '0' fontWeight = '600' overflowWrap = 'anywhere' }
156. '.search-person' { flex = '1' minWidth = '0' color = colorArtist overflowWrap = 'anywhere' }
157. searchType { flex = 'none' fontSize = '.8rem' color = colorTextMuted }
158. webText { flex = '1' minWidth = '0' display = 'flex' flexDirection = 'column' }
159. webTitle { fontWeight = '600' color = colorTextStrong overflowWrap = 'anywhere' }
160. 'button.add' { flex = 'none' padding = 'calc(.3rem - 1px) calc(.8rem - 1px)' fontSize = '.9rem' }
161. webBar { display = 'flex' alignItems = 'center' gap = '.8rem' margin = '.6rem 0' }
163. // ---- wider screens (≥ 40rem = 640 px): only what changes from the phone -------------------------
164. '@media (min-width: 40rem)' = {
165. applicationHeader = { gap = '1rem' padding = '.6rem 1rem' }
166. userBox = { gap = '.5rem' }
167. '#logout' = { padding = '.4rem .9rem' fontSize = '1rem' }
168. identSelector = { '--ident-font' = '600 .9rem/1.4 system-ui, sans-serif' }
169. 'ident-selector::part(button)' = { padding = '.35rem .8rem' }
170. 'ident-selector::part(status)' = { padding = '.35rem .8rem' }
171. main = { padding = '1rem' }
172. h1 = { margin = '0 0 1rem' fontSize = '1.3rem' }
173. showHeader = { flexDirection = 'row' alignItems = 'flex-start' gap = '1rem' marginBottom = '1.5rem' }
174. showPoster = { flex = 'none' width = '10rem' }
175. showMeta = { display = 'block' flex = '1' minWidth = '0' }
176. showTitle = { marginBottom = '1rem' }
177. showSummary = { fontSize = '1rem' }
178. episodeRow = { padding = '.4rem 0' }
179. unwatchedRow = { display = 'flex' }
180. '.unwatched-show' = { flex = 'none' }
181. unwatchedEpisode = { flex = '1' }
182. unwatchedDate = { flex = 'none' }
183. scheduleRow = { display = 'flex' }
184. '.schedule-show' = { flex = 'none' }
185. scheduleEpisode = { flex = '1' }
186. scheduleDate = { flex = 'none' }
187. }