tracker

8.3 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: every rule is the phone's; the
11. // one min-width block adds the wide layout.
12. import { var } from 'hl:web/css'
13. import { greenDark, colorText, colorBackground, colorTextStrong, colorBackgroundSunken, colorTextMuted, colorAccentText, colorBorder, colorDanger, colorSurface, red, blueDark } from './shared/tokens.hl'
15. colorAccent = var(greenDark) // the app's accent: the only token this app sets
16. // tracker.worldapi.org#4, the creator's own words: artists in red, genre pills in blue — the raw
17. // palette tokens (like the accent above), not the semantic `colorDanger`/`colorAction` (this isn't a
18. // warning or an action, just the creator's chosen colour for these two kinds of link/pill)
19. colorArtist = var(red)
20. colorGenre = var(blueDark)
22. '*,
23. *::before,
24. *::after' { boxSizing = 'border-box' }
26. html { colorScheme = 'dark' }
27. body { margin = '0' font = '16px/1.5 system-ui, sans-serif' color = colorText background = colorBackground }
28. a { color = colorAccent textDecoration = 'none' }
29. 'a:hover' { textDecoration = 'underline' }
30. h1 { margin = '0 0 1rem' fontSize = '1.3rem' lineHeight = '1.3' color = colorTextStrong }
31. button { font = 'inherit' fontWeight = '600' padding = '.4rem .9rem' color = colorAccentText background = colorAccent border = '0' borderRadius = '.4rem' cursor = 'pointer' }
32. 'button:hover' { filter = 'brightness(1.1)' }
33. 'button.quiet' { color = colorText background = 'transparent' border = '0' }
34. // the ONLY buttons with a border are inverted ones (creator: "no borders for the buttons unless they are inverted")
35. 'button.inverted' { color = colorAccent background = 'transparent' border = '1px solid ' + colorAccent }
36. 'button.quiet:hover' { background = colorSurface filter = 'none' }
38. applicationHeader { position = 'sticky' top = '0' zIndex = '5' display = 'flex' flexWrap = 'wrap' alignItems = 'baseline' gap = '.2rem 1rem' padding = '.6rem 1rem' background = colorBackgroundSunken }
39. 'application-header .brand' { fontWeight = '100' fontSize = '1.15rem' color = colorAccent }
40. main { display = 'block' maxWidth = '60rem' margin = '0 auto' padding = '1rem' }
42. // ---- login (top right of the header), copied from calendar.worldapi.org's styles.hl -------------
43. userBox { display = 'flex' alignItems = 'center' gap = '.5rem' marginLeft = 'auto' }
44. 'a.button' { display = 'inline-block' padding = '.35rem .8rem' fontWeight = '600' color = colorAccentText background = colorAccent borderRadius = '.4rem' }
45. 'a.button:hover' { textDecoration = 'none' filter = 'brightness(1.1)' }
46. identSelector { '--ident-accent' = colorAccent '--ident-accent-text' = colorAccentText '--ident-background' = colorSurface '--ident-border' = colorBorder '--ident-font' = '600 .9rem/1.4 system-ui, sans-serif' }
47. 'ident-selector::part(button)' { padding = '.35rem .8rem' border = 'none' }
48. 'ident-selector::part(status)' { padding = '.35rem .8rem' border = 'none' }
49. 'ident-selector::part(identity)' { border = 'none' }
50. '.message' { color = colorDanger }
51. '.muted' { color = colorTextMuted }
52. '.message.banner' { margin = '0' padding = '.5rem 1rem' background = colorBackgroundSunken }
53. 'p.message:empty' { display = 'none' }
55. // ---- offline (tracker.worldapi.org#10, components/main.hl): the note under the header, and the probe whose endless
56. // animation is the shell's 1 s tick (it must be rendered for the animation to run — not display none — so: invisible)
57. offlineNote { display = 'block' padding = '.5rem 1rem' color = colorTextStrong background = colorSurface }
58. netProbe { position = 'fixed' left = '0' top = '0' width = '1px' height = '1px' opacity = '0' pointerEvents = 'none' animation = 'tracker-net-tick 1s linear infinite' }
59. '@keyframes tracker-net-tick' = {
60. 'from' = { opacity = '0' }
61. to = { opacity = '0' }
62. }
64. // ---- /shows/:slug (tracker.worldapi.org#4) --------------------------------------------------
65. showPage { display = 'block' }
66. showHeader { display = 'flex' flexDirection = 'column' gap = '1rem' marginBottom = '1.5rem' }
67. showPoster { flex = 'none' width = '10rem' }
68. 'show-poster img' { display = 'block' width = '100%' height = 'auto' borderRadius = '.4rem' aspectRatio = '2 / 3' objectFit = 'cover' background = colorSurface }
69. showMeta { flex = '1' }
70. showGenres { display = 'flex' flexWrap = 'wrap' gap = '.4rem' margin = '.5rem 0' }
71. '.genre-pill' { display = 'inline-block' padding = '.15rem .6rem' borderRadius = '1rem' fontSize = '.85rem' color = colorGenre border = '1px solid ' + colorGenre }
72. showSummary { display = 'block' margin = '.5rem 0' color = colorText }
73. showCast { display = 'block' margin = '.5rem 0' }
74. '.artist-link' { color = colorArtist }
75. '.artist-link:not(:last-child)::after' { content = "', '" color = colorTextMuted }
77. showSeasons { display = 'block' }
78. seasonRow { display = 'flex' alignItems = 'center' gap = '.6rem' padding = '.6rem 0' borderTop = '1px solid ' + colorBorder }
79. 'button.season-toggle' { flex = '1' display = 'flex' alignItems = 'baseline' gap = '.6rem' justifyContent = 'flex-start' padding = '0' color = colorText background = 'transparent' border = '0' fontWeight = '600' cursor = 'pointer' textAlign = 'left' }
80. seasonCount { fontWeight = '400' fontSize = '.85rem' color = colorTextMuted }
81. episodeRow { display = 'flex' alignItems = 'center' gap = '.6rem' padding = '.4rem 0 .4rem 2.8rem' }
82. episodeNumber { flex = 'none' width = '2rem' color = colorTextMuted }
83. episodeTitle { flex = '1' }
85. // the check: "a disc with a check in it" (drawn in CSS/SVG, no icon font) — solid (filled, accent)
86. // once watched, regular (outline only) while not
87. 'button.checkicon' { flex = 'none' display = 'grid' placeItems = 'center' width = '2rem' height = '2rem' padding = '0' background = 'transparent' border = '0' borderRadius = '50%' cursor = 'pointer' }
88. '.checkicon circle' { fill = 'transparent' stroke = colorBorder strokeWidth = '1.5' }
89. '.checkicon path' { fill = 'none' stroke = 'transparent' strokeWidth = '2' strokeLinecap = 'round' strokeLinejoin = 'round' }
90. '.checkicon.solid circle' { fill = colorAccent stroke = colorAccent }
91. '.checkicon.solid path' { stroke = colorAccentText }
93. // ---- /unwatched (tracker.worldapi.org#5) ----------------------------------------------------
94. unwatchedPage { display = 'block' }
95. unwatchedRows { display = 'block' }
96. unwatchedRow { display = 'flex' alignItems = 'center' gap = '.6rem' padding = '.5rem 0' borderTop = '1px solid ' + colorBorder }
97. '.unwatched-show' { flex = 'none' fontWeight = '600' }
98. unwatchedEpisode { flex = '1' color = colorText }
99. unwatchedDate { flex = 'none' fontSize = '.85rem' color = colorTextMuted }
101. // ---- /schedule (tracker.worldapi.org#6) — same row layout as /unwatched, minus the check icon -----
102. schedulePage { display = 'block' }
103. scheduleRows { display = 'block' }
104. scheduleRow { display = 'flex' alignItems = 'center' gap = '.6rem' padding = '.5rem 0' borderTop = '1px solid ' + colorBorder }
105. '.schedule-show' { flex = 'none' fontWeight = '600' }
106. scheduleEpisode { flex = '1' color = colorText }
107. scheduleDate { flex = 'none' fontSize = '.85rem' color = colorTextMuted }
109. // ---- /my/shows (tracker.worldapi.org#7) — small poster, title, last watched episode ------------
110. myShowsPage { display = 'block' }
111. myShowsRows { display = 'block' }
112. myShowRow { display = 'flex' alignItems = 'center' gap = '.8rem' padding = '.5rem 0' borderTop = '1px solid ' + colorBorder }
113. 'img.myshow-poster' { flex = 'none' display = 'block' width = '2.5rem' height = 'auto' aspectRatio = '2 / 3' objectFit = 'cover' borderRadius = '.25rem' background = colorSurface }
114. '.myshow-title' { flex = '1' fontWeight = '600' }
115. myShowEpisode { flex = 'none' fontSize = '.9rem' color = colorTextMuted fontVariantNumeric = 'tabular-nums' }
117. '@media (min-width: 40rem)' = {
118. showHeader = { flexDirection = 'row' }
119. }