gitoriaLog in with ident

tickets

All repositories: gitoria

ReadmeCodePull requestsReleasesTicketsSettingsCommit752fbb7f752fbb7fdeploy.sh: back up live storage/.sessions/.env before every deploy (newest 5 kept)mre752fbb7f/styles.hl

16.9 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 (<ticket-board>, <ticket-state>, …), this file lays them out.
  3. //
  4. // TOKENS (ticket antcolony#3, mission 021): the WorldAPI palette + semantic tokens are declared in
  5. // `shared/tokens.hl` as hl:web css variables (`static colorText = var(light)`), hand-written, a
  6. // verbatim copy of loreana /media/STORAGE/projects/worldapi-tokens/tokens.hl (vendored like
  7. // plugins/; edit it THERE and cp it here). This file IMPORTS the tokens it uses and writes them as
  8. // members (`color = colorText`, `border = '1px solid ' + colorBorder`); hl:web names each token
  9. // after its member (--color-text), writes all of tokens.hl's tokens into the one :root and every
  10. // use as var(--color-text). The app sets only its accent (`colorAccent = var(…)` below, written
  11. // after the default, so it wins). hl:web does this itself since hybriel#39 (the mission-021 patch is gone).
  12. //
  13. // In a styles file a bare name is a TAG (camelCase → kebab: `ticketState` is
  14. // `ticket-state`), a quoted name is a selector written verbatim. MOBILE FIRST: every
  15. // rule is the phone's; the one min-width block adds the wide layout.
  16. import { var } from 'hl:web/css'
  17. import { purple, colorText, colorBackground, colorTextStrong, colorTextMuted, colorBackgroundSunken, colorAccentText, colorSurface, colorBorder, colorDanger, colorSuccess, colorAction, colorWarning } from './shared/tokens.hl'
  19. colorAccent = var(purple) // the app's accent: the only token this app sets
  21. '*,
  22. *::before,
  23. *::after' { boxSizing = 'border-box' }
  25. html { colorScheme = 'dark' }
  26. body { margin = '0' font = '16px/1.5 system-ui, sans-serif' color = colorText background = colorBackground }
  27. a { color = colorAccent textDecoration = 'none' }
  28. 'a:hover' { textDecoration = 'underline' }
  29. h1 { margin = '0' fontSize = '1.3rem' lineHeight = '1.3' color = colorTextStrong overflowWrap = 'anywhere' }
  30. h2 { margin = '0 0 .5rem' fontSize = '1rem' color = colorTextStrong }
  31. time { color = colorTextMuted fontSize = '.85rem' whiteSpace = 'nowrap' }
  33. 'input,
  34. textarea,
  35. select' { font = 'inherit' width = '100%' padding = '.5rem .7rem' color = colorTextStrong background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' }
  36. 'input:focus,
  37. textarea:focus,
  38. select:focus' { outline = '2px solid ' + colorAccent outlineOffset = '1px' }
  39. textarea { resize = 'vertical' minHeight = '4.5rem' }
  40. label { display = 'grid' gap = '.25rem' fontSize = '.9rem' color = colorTextMuted }
  41. button { font = 'inherit' fontWeight = '600' padding = '.55rem 1.1rem' color = colorAccentText background = colorAccent border = '0' borderRadius = '.4rem' cursor = 'pointer' justifySelf = 'start' }
  42. 'button:hover' { filter = 'brightness(1.1)' }
  44. // ---- the shell ---------------------------------------------------------------------------
  45. 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 }
  46. 'application-header .brand' { fontWeight = '800' fontSize = '1.15rem' color = colorAccent marginRight = 'auto' }
  47. 'application-header nav' { display = 'flex' gap = '1rem' }
  48. 'application-header nav a' { color = colorText }
  49. inboxBadge { display = 'inline-block' marginLeft = '.35rem' padding = '0 .45rem' borderRadius = '999px' fontSize = '.8rem' fontWeight = '700' color = colorAccentText background = colorAccent }
  50. main { maxWidth = '60rem' margin = '0 auto' padding = '1rem' }
  52. // ---- the login, top right (ticket #7): ident's selector (its shadow DOM in ident's design,
  53. // restyled to tickets' accent through its custom properties), the login button, who you are
  54. userBox { display = 'flex' flexWrap = 'wrap' alignItems = 'center' justifyContent = 'flex-end' gap = '.4rem .6rem' marginLeft = 'auto' maxWidth = '100%' }
  55. identSelector { '--ident-accent' = colorAccent '--ident-accent-text' = colorAccentText '--ident-background' = colorSurface '--ident-border' = colorBorder '--ident-font' = '600 .9rem/1.4 system-ui, sans-serif' }
  56. 'ident-selector::part(button)' { padding = '.35rem .8rem' }
  57. 'ident-selector::part(status)' { padding = '.35rem .8rem' }
  58. '#whoami' { fontWeight = '600' color = colorTextStrong overflowWrap = 'anywhere' }
  59. 'a.button' { display = 'inline-block' fontWeight = '600' fontSize = '.9rem' padding = '.35rem .8rem' color = colorAccent border = '1px solid ' + colorAccent borderRadius = '.4rem' }
  60. 'a.button:hover' { textDecoration = 'none' background = colorSurface }
  61. 'button.quiet' { color = colorText background = 'transparent' border = '1px solid ' + colorBorder padding = '.35rem .8rem' fontSize = '.9rem' }
  62. 'button.danger' { color = colorDanger borderColor = colorDanger }
  63. namePrompt { display = 'block' maxWidth = '60rem' margin = '1rem auto 0' padding = '0 1rem' }
  64. '#nameform' { display = 'grid' gap = '.5rem' padding = '.8rem' background = colorSurface border = '1px solid ' + colorAccent borderRadius = '.5rem' }
  65. '.banner' { maxWidth = '60rem' margin = '.8rem auto 0' padding = '0 1rem' }
  66. '.hint' { margin = '0' fontSize = '.9rem' color = colorTextMuted }
  67. '.muted' { margin = '0' fontSize = '.9rem' color = colorTextMuted }
  69. // ---- /you: the account and the API tokens ---------------------------------------------------
  70. youView { display = 'grid' gap = '1.2rem' }
  71. 'you-view section' { display = 'grid' gap = '.6rem' padding = '.8rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
  72. 'you-view dl' { display = 'grid' gap = '.2rem' margin = '0' }
  73. 'you-view dt' { fontSize = '.85rem' color = colorTextMuted }
  74. 'you-view dd' { margin = '0 0 .4rem' color = colorTextStrong overflowWrap = 'anywhere' }
  75. 'you-view code' { overflowWrap = 'anywhere' wordBreak = 'break-all' }
  76. '#tokenform' { display = 'grid' gap = '.5rem' }
  77. tokenShown { display = 'grid' gap = '.4rem' padding = '.7rem' border = '1px solid ' + colorSuccess borderRadius = '.4rem' }
  78. 'token-shown p' { margin = '0' }
  79. '#newtoken' { color = colorSuccess fontSize = '.95rem' }
  80. '#tokenlist' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.4rem' }
  81. '#tokenlist li' { display = 'flex' flexWrap = 'wrap' alignItems = 'center' gap = '.3rem .8rem' padding = '.4rem .6rem' background = colorBackgroundSunken borderRadius = '.4rem' }
  82. '#tokenlist .label' { flex = '1 1 10rem' color = colorTextStrong overflowWrap = 'anywhere' }
  84. // ---- ticket lists (/, filters, /inbox) -----------------------------------------------------
  85. ticketBoard { display = 'grid' gap = '1rem' }
  86. ticketFilters { display = 'grid' gap = '.5rem' }
  87. 'ticket-filters nav' { display = 'flex' flexWrap = 'wrap' gap = '.35rem' }
  88. 'ticket-filters a' { padding = '.2rem .65rem' fontSize = '.85rem' color = colorText border = '1px solid ' + colorBorder borderRadius = '999px' }
  89. 'ticket-filters a.selected' { color = colorAccentText background = colorAccent borderColor = colorAccent }
  90. '.tickets' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.5rem' }
  91. '.tickets li' { display = 'grid' gridTemplateColumns = 'minmax(0, 1fr)' gap = '.3rem' padding = '.7rem .8rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
  92. '.tickets li ticket-state' { justifySelf = 'start' }
  93. '.tickets .subject' { color = colorTextStrong fontWeight = '600' overflowWrap = 'anywhere' }
  94. ticketRef { marginRight = '.4rem' color = colorTextMuted fontWeight = '400' }
  95. formerRef { marginLeft = '.2rem' fontSize = '.85rem' color = colorTextMuted }
  96. ticketMeta { display = 'flex' flexWrap = 'wrap' gap = '.2rem .8rem' fontSize = '.85rem' }
  97. '.empty' { margin = '0' padding = '1rem' textAlign = 'center' color = colorTextMuted border = '1px dashed ' + colorBorder borderRadius = '.5rem' }
  98. '.notice' { margin = '0' color = colorSuccess }
  100. // the new-ticket form, folded away until asked for
  101. details { background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
  102. summary { padding = '.6rem .8rem' cursor = 'pointer' fontWeight = '600' color = colorAccent }
  103. 'details form' { display = 'grid' gap = '.7rem' padding = '0 .8rem .8rem' }
  105. // ---- the state badge: one colour per state -------------------------------------------------
  106. ticketState { display = 'inline-block' padding = '.05rem .55rem' fontSize = '.8rem' fontWeight = '600' whiteSpace = 'nowrap' borderRadius = '999px' border = '1px solid currentColor' color = colorTextMuted }
  107. 'ticket-state.open' { color = colorAction }
  108. 'ticket-state.progress' { color = colorWarning }
  109. 'ticket-state.pending' { color = colorTextMuted }
  110. 'ticket-state.review' { color = colorAccent }
  111. 'ticket-state.reopened' { color = colorDanger }
  112. 'ticket-state.done' { color = colorSuccess }
  113. 'ticket-state.canceled' { color = colorTextMuted }
  114. 'ticket-filters a.selected.open,
  115. ticket-filters a.selected.progress,
  116. ticket-filters a.selected.pending,
  117. ticket-filters a.selected.review,
  118. ticket-filters a.selected.reopened,
  119. ticket-filters a.selected.done,
  120. ticket-filters a.selected.canceled' { color = colorAccentText }
  122. // ---- ticket #20: projects, members, assignee, the inbox ------------------------------------------
  123. projectActions { display = 'flex' flexWrap = 'wrap' gap = '.5rem' }
  124. // ticket #21: the apps connected to a project, and the connect page
  125. '.connections' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.4rem' }
  126. '.connections li' { display = 'flex' flexWrap = 'wrap' alignItems = 'center' gap = '.2rem .6rem' padding = '.4rem .8rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' fontSize = '.9rem' }
  127. connectPage { display = 'grid' gap = '1rem' maxWidth = '38rem' }
  128. 'connect-page form' { display = 'grid' gap = '.8rem' }
  129. projectDescription { display = 'block' padding = '.8rem' overflowWrap = 'anywhere' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
  130. assignee { color = colorTextMuted }
  131. 'assignee::before' { content = '"→ "' }
  132. 'ticket-view .people' { margin = '0' color = colorTextMuted fontSize = '.9rem' }
  133. 'ticket-view .people strong' { color = colorText }
  134. 'project-form,
  135. project-settings' { display = 'grid' gridTemplateColumns = 'minmax(0, 1fr)' gap = '1rem' }
  136. 'project-form form,
  137. project-settings form,
  138. project-settings section' { display = 'grid' gap = '.6rem' }
  139. 'project-settings h1,
  140. project-settings h2' { margin = '0' }
  141. 'project-settings h2' { fontSize = '1.1rem' }
  142. '#members' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.4rem' }
  143. '#members li' { display = 'flex' flexWrap = 'wrap' alignItems = 'center' gap = '.4rem .8rem' padding = '.4rem .6rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.4rem' }
  144. '#members strong' { flex = '1 1 8rem' }
  145. inviteShown { display = 'block' padding = '.7rem .8rem' overflowWrap = 'anywhere' background = colorSurface border = '1px solid ' + colorAccent borderRadius = '.5rem' }
  146. 'invite-shown p' { margin = '0 0 .4rem' }
  147. '#projectlist' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.3rem' }
  148. '.role' { color = colorTextMuted fontSize = '.85rem' }
  149. '#reviewbox,
  150. #pendingbox' { display = 'grid' gap = '.5rem' }
  151. '#reviewbox h2,
  152. #pendingbox h2' { margin = '0' fontSize = '1.1rem' }
  154. // ---- one ticket ----------------------------------------------------------------------------
  155. ticketView { display = 'grid' gridTemplateColumns = 'minmax(0, 1fr)' gap = '1.2rem' }
  156. 'ticket-view header' { display = 'grid' gap = '.4rem' }
  157. 'ticket-view header p' { margin = '0' }
  158. 'ticket-view header ticket-state' { justifySelf = 'start' }
  159. 'ticket-view .dates' { color = colorTextMuted fontSize = '.85rem' }
  160. ticketSummary { display = 'block' padding = '.8rem' overflowWrap = 'anywhere' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
  161. 'ticket-view section' { display = 'grid' gap = '.7rem' }
  162. '#events' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.5rem' borderLeft = '2px solid ' + colorBorder }
  163. '#events > li' { marginLeft = '.8rem' padding = '.5rem .7rem' background = colorSurface borderRadius = '.4rem' }
  164. '#events > li.state' { background = 'transparent' padding = '.2rem .7rem' }
  165. eventHead { display = 'block' fontSize = '.9rem' }
  166. 'event-head strong' { color = colorTextStrong }
  167. eventText { display = 'block' marginTop = '.3rem' overflowWrap = 'anywhere' }
  168. 'ticket-view form' { display = 'grid' gap = '.5rem' }
  170. // ---- ticket #8: the author's edit form; an edit in the history keeps what was before -------
  171. '#editform' { padding = '.8rem' background = colorSurface border = '1px solid ' + colorAccent borderRadius = '.5rem' }
  172. formButtons { display = 'flex' flexWrap = 'wrap' gap = '.5rem' }
  173. 'event-text.edit' { fontSize = '.9rem' color = colorTextMuted }
  174. 'event-text.edit p' { margin = '0' }
  175. 'event-text.edit s' { color = colorText }
  176. 'event-text.edit details' { marginTop = '.3rem' background = colorBackgroundSunken }
  177. 'event-text.edit summary' { padding = '.3rem .6rem' fontWeight = '400' fontSize = '.85rem' }
  178. 'event-text.edit markdown-text' { padding = '0 .6rem .5rem' color = colorText }
  180. // ---- ticket #6: Markdown in text fields (components/markdown.hl). Line breaks inside a
  181. // paragraph stay visible (the page showed the texts with pre-wrap before) ----------------------
  182. markdownText { display = 'block' }
  183. 'markdown-text > :first-child' { marginTop = '0' }
  184. 'markdown-text > :last-child' { marginBottom = '0' }
  185. 'markdown-text p,
  186. markdown-text li' { whiteSpace = 'pre-wrap' }
  187. 'markdown-text p' { margin = '.5rem 0' }
  188. 'markdown-text h3,
  189. markdown-text h4,
  190. markdown-text h5' { margin = '.9rem 0 .4rem' lineHeight = '1.3' color = colorTextStrong }
  191. 'markdown-text h3' { fontSize = '1.15rem' }
  192. 'markdown-text h4' { fontSize = '1.02rem' }
  193. 'markdown-text h5' { fontSize = '.95rem' }
  194. 'markdown-text ul,
  195. markdown-text ol' { margin = '.5rem 0' paddingLeft = '1.4rem' }
  196. 'markdown-text li + li' { marginTop = '.15rem' }
  197. // inside the history (itself an <ol>) a list would get the nested markers (circles)
  198. 'markdown-text ul' { listStyleType = 'disc' }
  199. 'markdown-text ol' { listStyleType = 'decimal' }
  200. 'markdown-text strong' { color = colorTextStrong }
  201. 'markdown-text a' { textDecoration = 'underline' textUnderlineOffset = '.15em' overflowWrap = 'anywhere' }
  202. 'markdown-text code' { font = '.88em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace' padding = '.05em .3em' color = colorTextStrong background = colorBackgroundSunken borderRadius = '.25rem' }
  203. 'markdown-text pre' { margin = '.5rem 0' padding = '.6rem .7rem' overflowX = 'auto' background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' }
  204. 'markdown-text pre code' { padding = '0' background = 'transparent' whiteSpace = 'pre' }
  205. '.message' { margin = '0' minHeight = '1.5em' color = colorDanger }
  207. // ---- ticket #12 (mission 024): <md-editor> (shared/md-editor.js, shadow DOM) takes the app's
  208. // tokens through its --md-* custom properties; headings look like the rendered ones (h3/h4/h5 above)
  209. mdEditor { '--md-background' = colorBackgroundSunken '--md-text' = colorText '--md-text-strong' = colorTextStrong '--md-text-muted' = colorTextMuted '--md-border' = colorBorder '--md-accent' = colorAccent '--md-accent-text' = colorAccentText '--md-link' = colorAccent '--md-code-background' = colorSurface '--md-toolbar-background' = colorSurface '--md-danger' = colorDanger '--md-h1-size' = '1.15rem' '--md-h2-size' = '1.02rem' '--md-h3-size' = '.95rem' '--md-min-height' = '2.6rem' color = colorText }
  211. // ---- ticket #4: relations (parent, children, blocked by, blocks) ---------------------------
  212. ticketRelations { display = 'grid' gap = '.8rem' padding = '.8rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
  213. 'ticket-relations h2' { margin = '0 0 .4rem' fontSize = '1rem' }
  214. 'ticket-relations p' { margin = '0' }
  215. '#parent a,
  216. .refs a' { fontWeight = '600' whiteSpace = 'nowrap' }
  217. '.refsubject' { color = colorTextStrong overflowWrap = 'anywhere' }
  218. '#childnote' { margin = '0 0 .4rem' fontSize = '.9rem' color = colorTextMuted }
  219. '#childnote.done' { fontWeight = '600' color = colorSuccess }
  220. '.refs' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.35rem' }
  221. '.refs li' { display = 'flex' flexWrap = 'wrap' alignItems = 'baseline' gap = '.2rem .6rem' }
  222. '.refs .unblock' { padding = '.1rem .6rem' fontSize = '.8rem' marginLeft = 'auto' }
  223. '#events > li.link' { background = 'transparent' padding = '.2rem .7rem' }
  225. '@media (min-width: 45rem)' = {
  226. main = { padding = '1.5rem 1rem' }
  227. h1 = { fontSize = '1.6rem' }
  228. '.tickets li' = { gridTemplateColumns = '8.5rem minmax(0, 1fr) auto' alignItems = 'baseline' gap = '1rem' }
  229. '#stateform' = { gridTemplateColumns = '14rem minmax(0, 1fr) auto' alignItems = 'end' }
  230. '#parentform,
  231. #blockerform' = { gridTemplateColumns = 'minmax(0, 1fr) auto' alignItems = 'end' }
  232. 'details form' = { maxWidth = '40rem' }
  233. userBox = { marginLeft = '0' }
  234. }

Branches

Latest commits

  • 752fbb7fdeploy.sh: back up live storage/.sessions/.env before every deploy (newest 5 kept)mre
  • 38bdd5e4deploy.sh: never send .git or .gitignore to Byrodinmre
  • f12fa1bcState of 2026-09-27, before the move to gitoriamre