ident

12.2 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' }
50. // offline (mission 046): the header's note, and the probe's clock (components/main.hl)
51. offlineNote { flexBasis = '100%' color = colorWarning fontSize = '.9rem' fontWeight = '600' }
52. netProbe { position = 'absolute' width = '0' height = '0' overflow = 'hidden' animation = 'ident-net-probe 20s .5s infinite' }
53. '@keyframes ident-net-probe' = { 'from' = { opacity = '1' } to = { opacity = '0.99' } }
55. // ---- the card (login and signed in) ------------------------------------------------------------------------
56. identCard { display = 'grid' gap = '1rem' maxWidth = '34rem' margin = '0 auto' padding = '1.2rem 1rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.6rem' }
57. 'ident-card p' { margin = '0' }
58. 'ident-card form' { display = 'grid' gap = '.8rem' }
59. 'ident-card .lead' { color = colorTextMuted fontSize = '.95rem' }
60. userEmail { display = 'block' color = colorTextMuted fontSize = '.9rem' overflowWrap = 'anywhere' }
61. formButtons { display = 'flex' flexWrap = 'wrap' gap = '.5rem' }
62. '.message' { margin = '0' minHeight = '1.5em' color = colorDanger }
63. '.notice' { margin = '0' color = colorSuccess }
64. '.notice:empty' { display = 'none' }
65. fieldHint { color = colorTextMuted fontSize = '.8rem' }
67. // ---- signed in: account bar, identities, time zone -----------------------------------------
68. accountBar { display = 'flex' flexWrap = 'wrap' alignItems = 'center' justifyContent = 'space-between' gap = '.5rem' paddingBottom = '.8rem' borderBottom = '1px solid ' + colorBorder }
69. 'account-bar user-email' { fontSize = '.95rem' }
70. 'ident-card section' { display = 'grid' gap = '.8rem' }
71. sectionHead { display = 'flex' flexWrap = 'wrap' alignItems = 'center' justifyContent = 'space-between' gap = '.5rem' }
72. '#identities' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.5rem' }
73. '#identities li' { display = 'flex' flexWrap = 'wrap' alignItems = 'center' justifyContent = 'space-between' gap = '.5rem' padding = '.7rem .8rem' background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' }
74. identityMain { flex = '1 1 12rem' display = 'flex' flexWrap = 'wrap' alignItems = 'baseline' gap = '.2rem .5rem' minWidth = '0' }
75. identityLabel { fontWeight = '700' color = colorTextStrong overflowWrap = 'anywhere' }
76. identityShortId { fontFamily = 'ui-monospace, monospace' fontSize = '.85rem' color = colorTextMuted letterSpacing = '.08em' userSelect = 'all' }
77. defaultBadge { fontSize = '.75rem' padding = '0 .4rem' color = colorAccent border = '1px solid ' + colorAccent borderRadius = '1rem' }
78. identityDetails { flexBasis = '100%' color = colorTextMuted fontSize = '.9rem' overflowWrap = 'anywhere' }
79. identityActions { display = 'flex' gap = '.4rem' }
80. '#identities img.avatar, #chooselist img.avatar' { flex = '0 0 auto' width = '32px' height = '32px' objectFit = 'cover' borderRadius = '50%' background = colorSurface }
81. '#identityform' { padding = '1rem' border = '1px solid ' + colorAccent borderRadius = '.5rem' }
82. '#avatarpreview' { width = '48px' height = '48px' objectFit = 'cover' borderRadius = '50%' background = colorSurface }
83. '#avatarpreview.hidden, #avatarremove.hidden' { display = 'none' }
84. avatarField { display = 'flex' flexWrap = 'wrap' alignItems = 'center' gap = '.6rem' }
85. '.avatar-note' { flexBasis = '100%' color = colorDanger fontSize = '.85rem' }
86. '.avatar-note:empty' { display = 'none' }
87. '#timezonesection' { paddingTop = '.8rem' borderTop = '1px solid ' + colorBorder }
88. 'application-header nav' { display = 'flex' gap = '1rem' marginLeft = 'auto' fontSize = '.95rem' }
90. // ---- the login button: the app's request and the identity choice ------------------------
91. appRequest { display = 'block' padding = '.6rem .8rem' color = colorText background = colorBackgroundSunken borderLeft = '3px solid ' + colorAccent borderRadius = '.3rem' overflowWrap = 'anywhere' }
92. requestOrigin { display = 'block' color = colorTextMuted fontSize = '.85rem' }
93. '#chooselist' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.5rem' }
94. '#chooselist li' { display = 'flex' flexWrap = 'wrap' alignItems = 'center' justifyContent = 'space-between' gap = '.5rem' padding = '.7rem .8rem' background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' }
96. // ---- apps ----------------------------------------------------------------------------------
97. '#apps' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.5rem' }
98. '#apps li' { display = 'flex' flexWrap = 'wrap' alignItems = 'center' justifyContent = 'space-between' gap = '.5rem' padding = '.7rem .8rem' background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' }
99. appMain { flex = '1 1 14rem' display = 'grid' gap = '.15rem' minWidth = '0' }
100. appName { fontWeight = '700' color = colorTextStrong overflowWrap = 'anywhere' }
101. appOrigins { color = colorTextMuted fontSize = '.9rem' overflowWrap = 'anywhere' }
102. appKey { fontSize = '.85rem' color = colorTextMuted overflowWrap = 'anywhere' }
103. code { fontFamily = 'ui-monospace, monospace' fontSize = '.85rem' color = colorTextStrong overflowWrap = 'anywhere' wordBreak = 'break-all' }
104. secretBox { display = 'grid' gap = '.6rem' padding = '1rem' border = '1px solid ' + colorWarning borderRadius = '.5rem' }
105. 'secret-box code' { display = 'block' padding = '.5rem .6rem' background = colorBackgroundSunken borderRadius = '.3rem' userSelect = 'all' }
106. '#appform' { padding = '1rem' border = '1px solid ' + colorAccent borderRadius = '.5rem' }
108. // ---- notifications: the inbox and the per-app page (piece 4) --------------------------------
109. 'ident-card.wide' { maxWidth = '46rem' }
110. unreadTotal { color = colorAccent fontSize = '.9rem' fontWeight = '600' }
111. '#inbox,
112. #conns,
113. #kinds' { listStyle = 'none' margin = '0' padding = '0' display = 'grid' gap = '.5rem' }
114. '#inbox li' { display = 'flex' alignItems = 'flex-start' gap = '.7rem' padding = '.7rem .8rem' background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' }
115. '#inbox li.unread' { borderLeft = '3px solid ' + colorAccent }
116. '#inbox li.read' { opacity = '.75' }
117. '#inbox img.icon' { flex = '0 0 auto' width = '40px' height = '40px' objectFit = 'cover' borderRadius = '.3rem' background = colorSurface }
118. noteMain { flex = '1 1 auto' display = 'grid' gap = '.25rem' minWidth = '0' }
119. noteHead { display = 'flex' flexWrap = 'wrap' alignItems = 'baseline' gap = '.2rem .5rem' }
120. noteName { fontWeight = '700' color = colorTextStrong overflowWrap = 'anywhere' }
121. urgentBadge { fontSize = '.75rem' padding = '0 .4rem' color = colorDanger border = '1px solid ' + colorDanger borderRadius = '1rem' }
122. unreadBadge { fontSize = '.75rem' padding = '0 .4rem' color = colorAccent border = '1px solid ' + colorAccent borderRadius = '1rem' }
123. noteFrom { color = colorTextMuted fontSize = '.85rem' overflowWrap = 'anywhere' }
124. noteText { whiteSpace = 'pre-wrap' overflowWrap = 'anywhere' }
125. noteFoot { display = 'flex' flexWrap = 'wrap' alignItems = 'center' gap = '.4rem .8rem' color = colorTextMuted fontSize = '.85rem' }
126. 'note-foot .toggle' { marginLeft = 'auto' }
127. '#connsection,
128. #kindssection,
129. #overridesection' { paddingTop = '.8rem' borderTop = '1px solid ' + colorBorder }
130. '#conns li,
131. #kinds li' { display = 'flex' flexWrap = 'wrap' alignItems = 'center' justifyContent = 'space-between' gap = '.5rem' padding = '.7rem .8rem' background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' }
132. '#conns a.conn' { fontWeight = '700' overflowWrap = 'anywhere' }
133. connDetails { color = colorTextMuted fontSize = '.9rem' overflowWrap = 'anywhere' }
134. kindMain { flex = '1 1 12rem' display = 'grid' gap = '.15rem' minWidth = '0' }
135. kindName { fontWeight = '700' color = colorTextStrong overflowWrap = 'anywhere' }
136. kindPreset { color = colorTextMuted fontSize = '.85rem' overflowWrap = 'anywhere' }
137. kindSwitches { display = 'flex' gap = '1rem' }
138. switchRow { display = 'flex' alignItems = 'center' gap = '.5rem' }
139. switchLabel { fontSize = '.9rem' color = colorTextMuted }
140. 'button.switch' { minWidth = '3.6rem' padding = '.25rem .6rem' fontSize = '.85rem' color = colorText background = 'transparent' borderColor = colorBorder }
141. 'button.switch[aria-checked="true"]' { color = colorAccentText background = colorAccent borderColor = colorAccent }
142. 'button.switch.locked' { opacity = '.45' cursor = 'not-allowed' }
143. switchOff { display = 'inline-block' minWidth = '3.6rem' textAlign = 'center' color = colorTextMuted }
144. '#overridesection switch-row' { justifyContent = 'space-between' maxWidth = '16rem' }
146. '@media (min-width: 40rem)' = {
147. main = { padding = '3rem 1rem' }
148. 'ident-card' = { padding = '1.8rem 2rem' }
149. h1 = { fontSize = '1.5rem' }
150. }