calendar

4.7 KB

1. // styles.hl — ALL of the app's CSS, served as /__hl/app.css. The month view carries its own Style (components/month-view): markup is domain
2. // tags, this file lays them out. Tokens: shared/tokens.hl (verbatim copy of loreana worldapi-tokens/tokens.hl);
3. // the site sets only its accent. In a styles file a bare name is a TAG (camelCase → kebab), a quoted name is a
4. // selector written verbatim. MOBILE FIRST: every rule is the phone's; the min-width block adds the wide layout.
5. import { var } from 'hl:web/css'
6. import { blueLight, colorText, colorBackground, colorTextStrong, colorTextMuted, colorBackgroundSunken, colorSurface, colorBorder, colorAccentText, colorDanger } from './shared/tokens.hl'
8. colorAccent = var(blueLight) // the app's accent: the only token it sets
10. '*,
11. *::before,
12. *::after' { boxSizing = 'border-box' }
14. html { colorScheme = 'dark' }
15. body { margin = '0' font = '16px/1.5 system-ui, sans-serif' color = colorText background = colorBackground }
16. a { color = colorAccent textDecoration = 'none' }
17. 'a:hover' { textDecoration = 'underline' }
18. h1 { margin = '0 0 1rem' fontSize = '1.3rem' lineHeight = '1.3' color = colorTextStrong }
19. h2 { margin = '0' fontSize = '1.1rem' color = colorTextStrong }
20. '.muted' { color = colorTextMuted }
21. button { font = 'inherit' fontWeight = '600' padding = '.4rem .9rem' color = colorAccentText background = colorAccent border = '0' borderRadius = '.4rem' cursor = 'pointer' }
22. 'button:hover' { filter = 'brightness(1.1)' }
23. 'button.quiet' { color = colorText background = 'transparent' border = '1px solid ' + colorBorder }
24. 'button.quiet:hover' { background = colorSurface filter = 'none' }
26. applicationHeader { position = 'sticky' top = '0' zIndex = '5' display = 'flex' flexWrap = 'wrap' alignItems = 'baseline' gap = '.2rem 1rem' padding = '.6rem 1rem' background = colorBackgroundSunken borderBottom = '1px solid ' + colorBorder }
27. 'application-header .brand' { fontWeight = '800' fontSize = '1.15rem' color = colorAccent }
28. main { display = 'block' maxWidth = '60rem' margin = '0 auto' padding = '1rem' }
30. // ---- login (top right of the header) -------------------------------------------------------------
31. userBox { display = 'flex' alignItems = 'center' gap = '.5rem' marginLeft = 'auto' }
32. 'a.button' { display = 'inline-block' padding = '.35rem .8rem' fontWeight = '600' color = colorAccentText background = colorAccent borderRadius = '.4rem' }
33. 'a.button:hover' { textDecoration = 'none' filter = 'brightness(1.1)' }
34. identSelector { '--ident-accent' = colorAccent '--ident-accent-text' = colorAccentText '--ident-background' = colorSurface '--ident-border' = colorBorder '--ident-font' = '600 .9rem/1.4 system-ui, sans-serif' }
35. 'ident-selector::part(button)' { padding = '.35rem .8rem' }
36. 'ident-selector::part(status)' { padding = '.35rem .8rem' }
37. '.message' { color = colorDanger }
38. '.message.banner' { margin = '0' padding = '.5rem 1rem' background = colorBackgroundSunken }
39. 'p.message:empty' { display = 'none' }
41. // ---- the events on the days and the editor -------------------------------------------------------
42. dayEvents { display = 'grid' gap = '.15rem' marginTop = '.2rem' textAlign = 'left' }
43. 'button.unused' { display = 'none' }
44. 'button.more' { padding = '.05rem .3rem' fontSize = '.75rem' fontWeight = '500' lineHeight = '1.3' textAlign = 'left' color = colorTextMuted background = 'transparent' border = '0' }
45. 'button.event' { padding = '.05rem .3rem' fontSize = '.75rem' fontWeight = '500' lineHeight = '1.3' textAlign = 'left' whiteSpace = 'nowrap' overflow = 'hidden' textOverflow = 'ellipsis' borderRadius = '.25rem' }
46. eventEditor { position = 'fixed' inset = '0' zIndex = '10' display = 'grid' placeItems = 'center' padding = '1rem' background = 'rgba(0, 0, 0, .55)' }
47. 'event-editor.closed' { display = 'none' }
48. 'event-editor form' { display = 'grid' gap = '.7rem' width = '100%' maxWidth = '28rem' maxHeight = '100%' overflowY = 'auto' padding = '1rem' background = colorSurface border = '1px solid ' + colorBorder borderRadius = '.5rem' }
49. 'event-editor label' { display = 'grid' gap = '.2rem' fontSize = '.85rem' color = colorTextMuted }
50. 'event-editor input,
51. event-editor textarea' { font = 'inherit' width = '100%' padding = '.5rem .6rem' color = colorTextStrong background = colorBackgroundSunken border = '1px solid ' + colorBorder borderRadius = '.4rem' }
52. fieldRow { display = 'grid' gridTemplateColumns = '1fr 1fr' gap = '.5rem' }
53. 'form.allday label.timed' { display = 'none' }
54. 'form.allday field-row' { gridTemplateColumns = '1fr' }
55. 'kind-switch,
56. form-buttons' { display = 'flex' flexWrap = 'wrap' gap = '.5rem' }
57. 'button.danger' { color = colorText background = colorDanger marginLeft = 'auto' }
58. 'button.hidden' { display = 'none' }