| 1 | /* chat.css: the panel half of the suite's first chat (spec §6, §10). |
| 2 | Companion to templates/partials/chat.html and static/chat.js, and |
| 3 | like both of them it names nothing about Calls: every value here is an |
| 4 | --rst-* token the theme already defines, so a second app that adopts |
| 5 | these three files gets its own theme's colours, spacing and radii |
| 6 | without touching a line. |
| 7 | |
| 8 | .chat is given a display of its own, and the UA's display: none for |
| 9 | the hidden attribute loses to any author rule that sets display on |
| 10 | the same element — so the panel carries its own [hidden] rule, the |
| 11 | convention calls.css states at the top of itself. */ |
| 12 | .chat[hidden] { |
| 13 | display: none; |
| 14 | } |
| 15 | |
| 16 | .chat { |
| 17 | display: flex; |
| 18 | flex-direction: column; |
| 19 | gap: var(--rst-sp-2); |
| 20 | border: 1px solid var(--rst-line); |
| 21 | border-radius: var(--rst-radius); |
| 22 | padding: var(--rst-sp-3); |
| 23 | margin-block-end: var(--rst-sp-4); |
| 24 | } |
| 25 | |
| 26 | .chat-title { |
| 27 | margin: 0; |
| 28 | font-size: var(--rst-fs-base); |
| 29 | color: var(--rst-text-muted); |
| 30 | } |
| 31 | |
| 32 | /* A window on the conversation, not the whole page: the log scrolls |
| 33 | inside its own box so the controls under it stay reachable however |
| 34 | long the call runs. */ |
| 35 | .chat-log { |
| 36 | list-style: none; |
| 37 | margin: 0; |
| 38 | padding: 0; |
| 39 | max-block-size: 16rem; |
| 40 | overflow-y: auto; |
| 41 | overscroll-behavior: contain; |
| 42 | display: flex; |
| 43 | flex-direction: column; |
| 44 | gap: var(--rst-sp-1); |
| 45 | } |
| 46 | |
| 47 | .chat-line { |
| 48 | line-height: 1.5; |
| 49 | /* A message is other people's text: it wraps, including a single |
| 50 | unbroken run of characters, rather than widening the panel. */ |
| 51 | overflow-wrap: anywhere; |
| 52 | } |
| 53 | |
| 54 | .chat-name { |
| 55 | font-weight: 600; |
| 56 | } |
| 57 | |
| 58 | .chat-time { |
| 59 | color: var(--rst-text-faint); |
| 60 | font-size: var(--rst-fs-xs); |
| 61 | font-variant-numeric: tabular-nums; |
| 62 | } |
| 63 | |
| 64 | /* Your own line is marked by weight and by the name already on it, |
| 65 | never by colour alone: the name is the whole signal and this is a |
| 66 | second cue on top of it. */ |
| 67 | .chat-line-self .chat-name { |
| 68 | font-weight: 700; |
| 69 | } |
| 70 | |
| 71 | .chat-form { |
| 72 | display: flex; |
| 73 | flex-wrap: wrap; |
| 74 | align-items: flex-end; |
| 75 | gap: var(--rst-sp-2); |
| 76 | margin: 0; |
| 77 | } |
| 78 | |
| 79 | .chat-label { |
| 80 | flex: 1 0 100%; |
| 81 | color: var(--rst-text-muted); |
| 82 | font-size: var(--rst-fs-sm); |
| 83 | margin-block-end: -0.2rem; |
| 84 | } |
| 85 | |
| 86 | /* The control grows and the button keeps its own width; rst-input's |
| 87 | width: 100% is what makes the flex basis behave, so the textarea gets |
| 88 | a min-inline-size rather than relying on the intrinsic one. */ |
| 89 | .chat-form textarea { |
| 90 | flex: 1 1 12rem; |
| 91 | min-inline-size: 8rem; |
| 92 | min-height: 3rem; |
| 93 | } |
| 94 | |
| 95 | .chat-form button { |
| 96 | flex: 0 0 auto; |
| 97 | } |
| 98 | |
| 99 | /* The two sentences the panel can say. They are sentences, which is the |
| 100 | point: colour carries nothing here that the words do not. */ |
| 101 | .chat-status { |
| 102 | flex: 1 0 100%; |
| 103 | margin: 0; |
| 104 | min-height: 1.2em; |
| 105 | color: var(--rst-text); |
| 106 | font-size: var(--rst-fs-sm); |
| 107 | font-weight: 600; |
| 108 | } |
| 109 | |
amadan