ident

11.8 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 (<ident-card>, <app-request>, …), 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: `identCard` is
14. // `ident-card`), 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 { orange, colorText, colorBackground, colorTextStrong, colorBackgroundSunken, colorTextMuted, colorAccentText, colorBorder, colorDanger, colorSurface, colorSuccess, colorWarning } from './shared/tokens.hl'
19. colorAccent = var(orange) // 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 }
30. h2 { margin = '0' fontSize = '1.1rem' lineHeight = '1.3' color = colorTextStrong }
31. strong { color = colorTextStrong overflowWrap = 'anywhere' }
33. input { font = 'inherit' width = '100%' padding = '.55rem .7rem' color = colorTextStrong background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' }
34. 'input:focus' { outline = '2px solid ' + colorAccent outlineOffset = '1px' }
35. '#code' { fontSize = '1.4rem' letterSpacing = '.3em' fontVariantNumeric = 'tabular-nums' }
36. label { display = 'grid' gap = '.25rem' fontSize = '.9rem' color = colorTextMuted }
37. 'button,
38. a.button' { display = 'inline-block' font = 'inherit' fontWeight = '600' padding = '.6rem 1.1rem' color = colorAccentText background = colorAccent border = '1px solid ' + colorAccent borderRadius = '.4rem' cursor = 'pointer' justifySelf = 'start' textAlign = 'center' }
39. 'button:hover,
40. a.button:hover' { filter = 'brightness(1.1)' textDecoration = 'none' }
41. 'button.quiet' { color = colorText background = 'transparent' borderColor = colorBorder }
42. 'button.small' { padding = '.3rem .7rem' fontSize = '.9rem' }
43. 'button.danger' { color = colorDanger borderColor = colorDanger }
45. // ---- the shell ---------------------------------------------------------------------------
46. applicationHeader { display = 'flex' flexWrap = 'wrap' alignItems = 'baseline' gap = '.2rem 1rem' padding = '.6rem 1rem' background = colorBackgroundSunken borderBottom = '1px solid ' + colorBorder }
47. 'application-header .brand' { fontWeight = '800' fontSize = '1.15rem' color = colorAccent }
48. 'application-header .tagline' { color = colorTextMuted fontSize = '.85rem' }
49. main { padding = '1rem' }
51. // ---- the card (login and signed in) ------------------------------------------------------------------------
52. identCard { display = 'grid' gap = '1rem' maxWidth = '34rem' margin = '0 auto' padding = '1.2rem 1rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.6rem' }
53. 'ident-card p' { margin = '0' }
54. 'ident-card form' { display = 'grid' gap = '.8rem' }
55. 'ident-card .lead' { color = colorTextMuted fontSize = '.95rem' }
56. userEmail { display = 'block' color = colorTextMuted fontSize = '.9rem' overflowWrap = 'anywhere' }
57. formButtons { display = 'flex' flexWrap = 'wrap' gap = '.5rem' }
58. '.message' { margin = '0' minHeight = '1.5em' color = colorDanger }
59. '.notice' { margin = '0' color = colorSuccess }
60. '.notice:empty' { display = 'none' }
61. fieldHint { color = colorTextMuted fontSize = '.8rem' }
63. // ---- signed in: account bar, identities, time zone -----------------------------------------
64. accountBar { display = 'flex' flexWrap = 'wrap' alignItems = 'center' justifyContent = 'space-between' gap = '.5rem' paddingBottom = '.8rem' borderBottom = '1px solid ' + colorBorder }
65. 'account-bar user-email' { fontSize = '.95rem' }
66. 'ident-card section' { display = 'grid' gap = '.8rem' }
67. sectionHead { display = 'flex' flexWrap = 'wrap' alignItems = 'center' justifyContent = 'space-between' gap = '.5rem' }
68. '#identities' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.5rem' }
69. '#identities li' { display = 'flex' flexWrap = 'wrap' alignItems = 'center' justifyContent = 'space-between' gap = '.5rem' padding = '.7rem .8rem' background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' }
70. identityMain { flex = '1 1 12rem' display = 'flex' flexWrap = 'wrap' alignItems = 'baseline' gap = '.2rem .5rem' minWidth = '0' }
71. identityLabel { fontWeight = '700' color = colorTextStrong overflowWrap = 'anywhere' }
72. identityShortId { fontFamily = 'ui-monospace, monospace' fontSize = '.85rem' color = colorTextMuted letterSpacing = '.08em' userSelect = 'all' }
73. defaultBadge { fontSize = '.75rem' padding = '0 .4rem' color = colorAccent border = '1px solid ' + colorAccent borderRadius = '1rem' }
74. identityDetails { flexBasis = '100%' color = colorTextMuted fontSize = '.9rem' overflowWrap = 'anywhere' }
75. identityActions { display = 'flex' gap = '.4rem' }
76. '#identities img.avatar, #chooselist img.avatar' { flex = '0 0 auto' width = '32px' height = '32px' objectFit = 'cover' borderRadius = '50%' background = colorSurface }
77. '#identityform' { padding = '1rem' border = '1px solid ' + colorAccent borderRadius = '.5rem' }
78. '#avatarpreview' { width = '48px' height = '48px' objectFit = 'cover' borderRadius = '50%' background = colorSurface }
79. '#avatarpreview.hidden, #avatarremove.hidden' { display = 'none' }
80. avatarField { display = 'flex' flexWrap = 'wrap' alignItems = 'center' gap = '.6rem' }
81. '.avatar-note' { flexBasis = '100%' color = colorDanger fontSize = '.85rem' }
82. '.avatar-note:empty' { display = 'none' }
83. '#timezonesection' { paddingTop = '.8rem' borderTop = '1px solid ' + colorBorder }
84. 'application-header nav' { display = 'flex' gap = '1rem' marginLeft = 'auto' fontSize = '.95rem' }
86. // ---- the login button: the app's request and the identity choice ------------------------
87. appRequest { display = 'block' padding = '.6rem .8rem' color = colorText background = colorBackgroundSunken borderLeft = '3px solid ' + colorAccent borderRadius = '.3rem' overflowWrap = 'anywhere' }
88. requestOrigin { display = 'block' color = colorTextMuted fontSize = '.85rem' }
89. '#chooselist' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.5rem' }
90. '#chooselist li' { display = 'flex' flexWrap = 'wrap' alignItems = 'center' justifyContent = 'space-between' gap = '.5rem' padding = '.7rem .8rem' background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' }
92. // ---- apps ----------------------------------------------------------------------------------
93. '#apps' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.5rem' }
94. '#apps li' { display = 'flex' flexWrap = 'wrap' alignItems = 'center' justifyContent = 'space-between' gap = '.5rem' padding = '.7rem .8rem' background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' }
95. appMain { flex = '1 1 14rem' display = 'grid' gap = '.15rem' minWidth = '0' }
96. appName { fontWeight = '700' color = colorTextStrong overflowWrap = 'anywhere' }
97. appOrigins { color = colorTextMuted fontSize = '.9rem' overflowWrap = 'anywhere' }
98. appKey { fontSize = '.85rem' color = colorTextMuted overflowWrap = 'anywhere' }
99. code { fontFamily = 'ui-monospace, monospace' fontSize = '.85rem' color = colorTextStrong overflowWrap = 'anywhere' wordBreak = 'break-all' }
100. secretBox { display = 'grid' gap = '.6rem' padding = '1rem' border = '1px solid ' + colorWarning borderRadius = '.5rem' }
101. 'secret-box code' { display = 'block' padding = '.5rem .6rem' background = colorBackgroundSunken borderRadius = '.3rem' userSelect = 'all' }
102. '#appform' { padding = '1rem' border = '1px solid ' + colorAccent borderRadius = '.5rem' }
104. // ---- notifications: the inbox and the per-app page (piece 4) --------------------------------
105. 'ident-card.wide' { maxWidth = '46rem' }
106. unreadTotal { color = colorAccent fontSize = '.9rem' fontWeight = '600' }
107. '#inbox,
108. #conns,
109. #kinds' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.5rem' }
110. '#inbox li' { display = 'flex' alignItems = 'flex-start' gap = '.7rem' padding = '.7rem .8rem' background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' }
111. '#inbox li.unread' { borderLeft = '3px solid ' + colorAccent }
112. '#inbox li.read' { opacity = '.75' }
113. '#inbox img.icon' { flex = '0 0 auto' width = '40px' height = '40px' objectFit = 'cover' borderRadius = '.3rem' background = colorSurface }
114. noteMain { flex = '1 1 auto' display = 'grid' gap = '.25rem' minWidth = '0' }
115. noteHead { display = 'flex' flexWrap = 'wrap' alignItems = 'baseline' gap = '.2rem .5rem' }
116. noteName { fontWeight = '700' color = colorTextStrong overflowWrap = 'anywhere' }
117. urgentBadge { fontSize = '.75rem' padding = '0 .4rem' color = colorDanger border = '1px solid ' + colorDanger borderRadius = '1rem' }
118. unreadBadge { fontSize = '.75rem' padding = '0 .4rem' color = colorAccent border = '1px solid ' + colorAccent borderRadius = '1rem' }
119. noteFrom { color = colorTextMuted fontSize = '.85rem' overflowWrap = 'anywhere' }
120. noteText { whiteSpace = 'pre-wrap' overflowWrap = 'anywhere' }
121. noteFoot { display = 'flex' flexWrap = 'wrap' alignItems = 'center' gap = '.4rem .8rem' color = colorTextMuted fontSize = '.85rem' }
122. 'note-foot .toggle' { marginLeft = 'auto' }
123. '#connsection,
124. #kindssection,
125. #overridesection' { paddingTop = '.8rem' borderTop = '1px solid ' + colorBorder }
126. '#conns li,
127. #kinds li' { display = 'flex' flexWrap = 'wrap' alignItems = 'center' justifyContent = 'space-between' gap = '.5rem' padding = '.7rem .8rem' background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' }
128. '#conns a.conn' { fontWeight = '700' overflowWrap = 'anywhere' }
129. connDetails { color = colorTextMuted fontSize = '.9rem' overflowWrap = 'anywhere' }
130. kindMain { flex = '1 1 12rem' display = 'grid' gap = '.15rem' minWidth = '0' }
131. kindName { fontWeight = '700' color = colorTextStrong overflowWrap = 'anywhere' }
132. kindPreset { color = colorTextMuted fontSize = '.85rem' overflowWrap = 'anywhere' }
133. kindSwitches { display = 'flex' gap = '1rem' }
134. switchRow { display = 'flex' alignItems = 'center' gap = '.5rem' }
135. switchLabel { fontSize = '.9rem' color = colorTextMuted }
136. 'button.switch' { minWidth = '3.6rem' padding = '.25rem .6rem' fontSize = '.85rem' color = colorText background = 'transparent' borderColor = colorBorder }
137. 'button.switch[aria-checked="true"]' { color = colorAccentText background = colorAccent borderColor = colorAccent }
138. 'button.switch.locked' { opacity = '.45' cursor = 'not-allowed' }
139. switchOff { display = 'inline-block' minWidth = '3.6rem' textAlign = 'center' color = colorTextMuted }
140. '#overridesection switch-row' { justifyContent = 'space-between' maxWidth = '16rem' }
142. '@media (min-width: 40rem)' = {
143. main = { padding = '3rem 1rem' }
144. 'ident-card' = { padding = '1.8rem 2rem' }
145. h1 = { fontSize = '1.5rem' }
146. }