gitoria

14.8 KB

1. // styles.hl — ALL of the app's CSS, served as /__hl/app.css. Components carry no Style blocks:
2. // markup is domain tags (<repo-page>, <repo-meta>, …), this file lays them out. Tokens: shared/tokens.hl
3. // (verbatim copy of loreana worldapi-tokens/tokens.hl); the app sets only its accent (blue).
4. // In a styles file a bare name is a TAG (camelCase → kebab), a quoted name is a selector written
5. // verbatim. MOBILE FIRST: every rule is the phone's; the one min-width block adds the wide layout.
6. import { var } from 'hl:web/css'
7. import { blueDark, colorText, colorBackground, colorTextStrong, colorTextMuted, colorBackgroundSunken, colorAccentText, colorSurface, colorBorder, colorDanger, colorSuccess } from './shared/tokens.hl'
9. colorAccent = var(blueDark) // the app's accent: the only token this app sets
11. '*,
12. *::before,
13. *::after' { boxSizing = 'border-box' }
15. html { colorScheme = 'dark' }
16. body { margin = '0' font = '16px/1.5 system-ui, sans-serif' color = colorText background = colorBackground }
17. a { color = colorAccent textDecoration = 'none' }
18. 'a:hover' { textDecoration = 'underline' }
19. h1 { margin = '0' fontSize = '1.3rem' lineHeight = '1.3' color = colorTextStrong overflowWrap = 'anywhere' }
20. h2 { margin = '0 0 .5rem' fontSize = '1rem' color = colorTextStrong }
21. time { color = colorTextMuted fontSize = '.85rem' whiteSpace = 'nowrap' }
22. dl { display = 'grid' gridTemplateColumns = 'auto 1fr' gap = '.3rem 1rem' margin = '0' }
23. dt { color = colorTextMuted }
24. dd { margin = '0' overflowWrap = 'anywhere' }
26. 'input,
27. textarea,
28. select' { font = 'inherit' width = '100%' padding = '.5rem .7rem' color = colorTextStrong background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' }
29. 'input:focus' { outline = '2px solid ' + colorAccent outlineOffset = '1px' }
30. label { display = 'grid' gap = '.25rem' fontSize = '.9rem' color = colorTextMuted }
31. button { font = 'inherit' fontWeight = '600' padding = '.55rem 1.1rem' color = colorAccentText background = colorAccent border = '0' borderRadius = '.4rem' cursor = 'pointer' justifySelf = 'start' }
32. 'button:hover' { filter = 'brightness(1.1)' }
33. 'button.quiet' { color = colorText background = 'transparent' border = '1px solid ' + colorBorder padding = '.35rem .8rem' fontSize = '.9rem' }
35. // ---- the shell ---------------------------------------------------------------------------
36. applicationHeader { position = 'sticky' top = '0' zIndex = '5' display = 'flex' flexWrap = 'wrap' alignItems = 'center' gap = '.5rem 1rem' padding = '.6rem 1rem' background = colorBackgroundSunken borderBottom = '1px solid ' + colorBorder }
37. 'application-header .brand' { fontWeight = '800' fontSize = '1.15rem' color = colorAccent marginRight = 'auto' }
38. main { display = 'block' maxWidth = '60rem' margin = '0 auto' padding = '1rem' }
39. userBox { display = 'flex' flexWrap = 'wrap' alignItems = 'center' justifyContent = 'flex-end' gap = '.4rem .6rem' marginLeft = 'auto' maxWidth = '100%' }
40. // the identity selector (gitoria#14): ident's shadow DOM, restyled to the accent; hidden on a repo address (class onrepo, main.hl)
41. identSelector { '--ident-accent' = colorAccent '--ident-accent-text' = colorAccentText '--ident-background' = colorSurface '--ident-border' = colorBorder '--ident-font' = '600 .9rem/1.4 system-ui, sans-serif' }
42. 'ident-selector::part(button)' { padding = '.35rem .8rem' }
43. 'ident-selector::part(status)' { padding = '.35rem .8rem' }
44. 'ident-selector.onrepo' { display = 'none' }
45. '#whoami' { fontWeight = '600' color = colorTextStrong overflowWrap = 'anywhere' }
46. 'a.button' { display = 'inline-block' fontWeight = '600' fontSize = '.9rem' padding = '.35rem .8rem' color = colorAccent border = '1px solid ' + colorAccent borderRadius = '.4rem' }
47. 'a.button:hover' { textDecoration = 'none' background = colorSurface }
48. namePrompt { display = 'block' maxWidth = '60rem' margin = '1rem auto 0' padding = '0 1rem' }
49. 'name-prompt form' { display = 'grid' gap = '.6rem' padding = '1rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
50. // ---- offline (mission 046, components/main.hl): the note under the header, and the probe whose endless animation is
51. // the shell's 1 s tick (it must be rendered for the animation to run — not display none — so: invisible)
52. offlineNote { display = 'block' padding = '.5rem 1rem' color = colorTextStrong background = colorSurface }
53. netProbe { position = 'fixed' left = '0' top = '0' width = '1px' height = '1px' opacity = '0' pointerEvents = 'none' animation = 'gitoria-net-tick 1s linear infinite' }
54. '@keyframes gitoria-net-tick' = {
55. 'from' = { opacity = '0' }
56. to = { opacity = '0' }
57. }
59. // ---- the repositories ----------------------------------------------------------------------
60. repoHome { display = 'grid' gap = '1rem' }
61. repoPage { display = 'grid' gap = '1rem' }
62. repoHead { display = 'grid' gap = '1rem' }
63. repoList { display = 'grid' gap = '1rem' }
64. codeView { display = 'grid' gap = '1rem' minWidth = '0' }
65. '#createform' { display = 'grid' gap = '.6rem' padding = '1rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
66. '#repos' { display = 'grid' gap = '.5rem' margin = '0' padding = '0' listStyle = 'none' }
67. '#repos li' { display = 'grid' gap = '.15rem' padding = '.7rem 1rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
68. '#repos .slug' { fontWeight = '700' fontSize = '1.05rem' overflowWrap = 'anywhere' }
69. '#repos .about' { color = colorText }
70. repoMeta { display = 'flex' flexWrap = 'wrap' gap = '.2rem 1rem' fontSize = '.85rem' color = colorTextMuted }
71. '.empty' { margin = '0' padding = '1rem' textAlign = 'center' color = colorTextMuted border = '1px dashed ' + colorBorder borderRadius = '.5rem' }
72. '.muted' { margin = '0' fontSize = '.9rem' color = colorTextMuted }
73. '.message' { margin = '0' minHeight = '1.5em' color = colorDanger }
74. '.notice' { margin = '0' color = colorSuccess }
76. // ---- the repo homepage (gitoria#8): README.md / $docs as rendered Markdown (components/markdown.hl) ----
77. repoHomepage { display = 'grid' gap = '1.5rem' }
78. homepageFile { display = 'grid' gap = '.5rem' minWidth = '0' }
79. 'homepage-file > .path' { color = colorTextMuted fontSize = '.85rem' background = 'transparent' padding = '0' }
80. markdownText { display = 'block' minWidth = '0' }
81. 'markdown-text > :first-child' { marginTop = '0' }
82. 'markdown-text > :last-child' { marginBottom = '0' }
83. 'markdown-text p,
84. markdown-text li' { margin = '.5rem 0' overflowWrap = 'anywhere' }
85. 'markdown-text h2,
86. markdown-text h3,
87. markdown-text h4' { margin = '1.2rem 0 .5rem' lineHeight = '1.3' color = colorTextStrong }
88. 'markdown-text h2' { fontSize = '1.25rem' paddingBottom = '.25rem' borderBottom = '1px solid ' + colorBorder }
89. 'markdown-text h3' { fontSize = '1.08rem' }
90. 'markdown-text h4' { fontSize = '1rem' }
91. 'markdown-text ul,
92. markdown-text ol' { margin = '.5rem 0' paddingLeft = '1.4rem' }
93. 'markdown-text li' { margin = '.15rem 0' }
94. 'markdown-text ul' { listStyleType = 'disc' }
95. 'markdown-text ol' { listStyleType = 'decimal' }
96. 'markdown-text strong' { color = colorTextStrong }
97. 'markdown-text a' { color = colorAccent textDecoration = 'underline' textUnderlineOffset = '.15em' }
98. 'markdown-text code' { font = '.88em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace' padding = '.05em .3em' color = colorTextStrong background = colorBackgroundSunken borderRadius = '.25rem' }
99. 'markdown-text pre' { margin = '.5rem 0' padding = '.6rem .7rem' overflowX = 'auto' background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' }
100. 'markdown-text pre code' { padding = '0' background = 'transparent' whiteSpace = 'pre' }
101. 'markdown-text blockquote' { margin = '.5rem 0' padding = '.1rem .9rem' color = colorTextMuted borderLeft = '3px solid ' + colorBorder }
102. 'markdown-text hr' { border = '0' borderTop = '1px solid ' + colorBorder margin = '1rem 0' }
103. 'markdown-text table-scroll' { display = 'block' overflowX = 'auto' margin = '.5rem 0' }
104. 'markdown-text table' { borderCollapse = 'collapse' }
105. 'markdown-text th,
106. markdown-text td' { padding = '.35rem .7rem' border = '1px solid ' + colorBorder textAlign = 'left' verticalAlign = 'top' }
107. 'markdown-text th' { color = colorTextStrong background = colorBackgroundSunken }
109. // ---- adding code + access tokens (gitoria#7, plain text on the Code page of an empty repo: gitoria#20) ----
110. '#addcode' { padding = '.6rem 1rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
111. addCode { display = 'grid' gap = '.5rem' marginTop = '.6rem' minWidth = '0' }
112. '#addcode pre,
113. #tokensecret' { margin = '0' padding = '.6rem .7rem' overflowX = 'auto' font = '.88em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace' color = colorTextStrong background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' }
114. accessTokens { display = 'grid' gap = '.6rem' }
115. sshKeys { display = 'grid' gap = '.6rem' }
116. '#tokenform,
117. #keyform' { display = 'grid' gap = '.6rem' padding = '1rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
118. '#tokenlist,
119. #keylist' { display = 'grid' gap = '.5rem' margin = '0' padding = '0' listStyle = 'none' }
120. '#tokenlist li,
121. #keylist li' { display = 'flex' flexWrap = 'wrap' alignItems = 'center' gap = '.3rem 1rem' padding = '.5rem 1rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
122. '#tokenlist .slug,
123. #keylist .slug' { fontWeight = '700' marginRight = 'auto' overflowWrap = 'anywhere' }
125. // ---- browsing code (gitoria#9): /code, /branch/<name>, /commit/<id> ----
126. repoNav { display = 'flex' gap = '1rem' borderBottom = '1px solid ' + colorBorder paddingBottom = '.4rem' }
127. codeBrowser { display = 'grid' gap = '1rem' minWidth = '0' }
128. codeHead { display = 'grid' gap = '.3rem' }
129. latestCommit { display = 'flex' flexWrap = 'wrap' gap = '.2rem .8rem' alignItems = 'baseline' padding = '.5rem .8rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.4rem' }
130. 'latest-commit a,
131. code-side a.sha' { font = '.88em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace' }
132. pathCrumbs { display = 'flex' flexWrap = 'wrap' gap = '.3rem' overflowWrap = 'anywhere' }
133. '#entries,
134. code-side ul' { margin = '0' padding = '0' listStyle = 'none' display = 'grid' }
135. '#entries li' { display = 'flex' justifyContent = 'space-between' gap = '1rem' padding = '.4rem .8rem' borderBottom = '1px solid ' + colorBorder }
136. '#entries a.dir' { fontWeight = '700' }
137. '#entries a.dir::after' { content = '"/"' }
138. '#entries li > :first-child' { overflowWrap = 'anywhere' }
139. codeFile { display = 'grid' gap = '.5rem' minWidth = '0' }
140. '#lines' { margin = '0' padding = '.5rem 0' overflowX = 'auto' listStyle = 'none' counterReset = 'line' background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' font = '.85rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace' }
141. '#lines li' { counterIncrement = 'line' whiteSpace = 'pre' minHeight = '1.5em' padding = '0 .8rem 0 0' width = 'max-content' minWidth = '100%' }
142. '#lines li::before' { content = 'counter(line)' display = 'inline-block' width = '3.5rem' padding = '0 .8rem' textAlign = 'right' color = colorTextMuted userSelect = 'none' }
143. '#lines code' { font = 'inherit' color = colorTextStrong }
144. codeSide { display = 'grid' gap = '1rem' minWidth = '0' }
145. 'code-side section' { display = 'grid' gap = '.4rem' minWidth = '0' }
146. 'code-side li' { display = 'flex' flexWrap = 'wrap' alignItems = 'baseline' gap = '.2rem .8rem' padding = '.3rem 0' overflowWrap = 'anywhere' }
147. 'button.setmain' { padding = '.1rem .5rem' fontSize = '.8rem' }
149. // ---- the repo's tickets (gitoria#10): the list of tickets.worldapi.org's project ----
150. repoTickets { display = 'grid' gap = '1rem' minWidth = '0' }
151. '#newticket' { padding = '.7rem 1rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
152. '#newticket summary' { cursor = 'pointer' fontWeight = '600' color = colorAccent }
153. '#newticketform' { display = 'grid' gap = '.6rem' marginTop = '.6rem' }
154. '#ticketlist' { display = 'grid' gap = '.4rem' margin = '0' padding = '0' listStyle = 'none' }
155. '#ticketlist li' { display = 'flex' flexWrap = 'wrap' alignItems = 'baseline' gap = '.2rem .8rem' padding = '.6rem 1rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
156. '#ticketlist .number' { color = colorTextMuted }
157. '#ticketlist .subject' { flex = '1 1 14rem' fontWeight = '600' overflowWrap = 'anywhere' }
158. '#ticketlist .state' { fontSize = '.85rem' color = colorTextMuted }
160. // ---- the repo's pull requests (gitoria#11) ----
161. repoPulls { display = 'grid' gap = '1rem' minWidth = '0' }
162. '#pulllist' { display = 'grid' gap = '.4rem' margin = '0' padding = '0' listStyle = 'none' }
163. '#pulllist li' { display = 'flex' flexWrap = 'wrap' alignItems = 'baseline' gap = '.2rem .8rem' padding = '.6rem 1rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' overflowWrap = 'anywhere' }
164. '#pulllist .subject' { flex = '1 1 14rem' fontWeight = '600' }
165. '#pulllist .open' { fontSize = '.85rem' color = colorAccent }
166. '#pulllist .nomerge' { display = 'none' }
167. '#pulllist .merged' { fontSize = '.85rem' color = colorTextMuted }
168. '#pulllist .branches' { display = 'inline-flex' flexWrap = 'wrap' gap = '.2rem .5rem' }
170. // ---- the repo's settings (gitoria#18) and "#12" links to tickets ----
171. repoSettings { display = 'grid' gap = '1rem' minWidth = '0' }
172. '#ticketsettings' { display = 'grid' gap = '.6rem' justifyItems = 'start' }
173. '#disconnecttickets.nomerge' { display = 'none' }
174. 'a.ticketref' { fontWeight = '600' }
176. // ---- the repo's releases (gitoria#12) ----
177. repoReleases { display = 'grid' gap = '1rem' minWidth = '0' }
178. '#releaselist' { display = 'grid' gap = '.4rem' margin = '0' padding = '0' listStyle = 'none' }
179. '#releaselist li' { display = 'flex' flexWrap = 'wrap' alignItems = 'baseline' gap = '.2rem .8rem' padding = '.6rem 1rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' overflowWrap = 'anywhere' }
180. '#releaselist .version' { fontSize = '1.05rem' color = colorAccent }
181. '#releaselist .latest' { fontSize = '.85rem' color = colorTextMuted }
182. '#releaselist .subject' { flex = '1 1 14rem' }
184. '@media (min-width: 45rem)' = {
185. 'code-browser' { gridTemplateColumns = 'minmax(0, 1fr) 18rem' alignItems = 'start' }
186. 'code-browser > *' { gridColumn = '1' }
187. 'code-browser > code-side' { gridColumn = '2' gridRow = '1 / span 4' }
188. main { padding = '1.5rem 1rem' }
189. '#repos li' { gridTemplateColumns = 'minmax(10rem, 16rem) 1fr auto' alignItems = 'center' gap = '.15rem 1rem' }
190. }
192. '#keylist .fingerprint' { overflowWrap = 'anywhere' color = colorTextMuted }
193. '#keytext' { font = '.88em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace' }