amadan
Add shared call workspace and control styling
2 files changed,
+84
−0
callui/callui.css+73 −0callui/callui.go+11 −0
CI passed — run details
diff --git a/callui/callui.css b/callui/callui.css| new file mode 100644 |
| index 0000000..86e3a29 |
| --- /dev/null |
| +++ b/callui/callui.css |
| @@ -0,0 +1,73 @@ |
| +[estilo-call-header] { |
| + display: flex; |
| + flex-wrap: wrap; |
| + align-items: center; |
| + justify-content: space-between; |
| + gap: var(--rst-sp-4); |
| + margin-block-end: var(--rst-sp-4); |
| +} |
| +[estilo-call-header] > * { min-inline-size: 0; } |
| +[estilo-call-header] h1 { margin: 0; overflow-wrap: anywhere; } |
| +[estilo-call-workspace] { |
| + display: grid; |
| + grid-template-columns: minmax(0, 1fr); |
| + gap: var(--rst-sp-4); |
| + align-items: start; |
| +} |
| +[estilo-call-workspace] > * { min-inline-size: 0; } |
| +[estilo-call-panel] { |
| + padding: var(--rst-sp-4); |
| + border: 1px solid var(--rst-line); |
| + border-radius: 1.25rem; |
| + background: var(--rst-surface); |
| +} |
| +[estilo-call-actions] { |
| + display: flex; |
| + flex-wrap: wrap; |
| + align-items: center; |
| + gap: var(--rst-sp-2); |
| + padding-block: var(--rst-sp-3); |
| +} |
| +[estilo-call-actions] button, |
| +[estilo-call-actions] a { |
| + min-inline-size: 44px; |
| + min-block-size: 44px; |
| + border-radius: 14px; |
| +} |
| +[estilo-call-actions] svg { flex: none; inline-size: 20px; block-size: 20px; } |
| +[estilo-call-actions] [aria-pressed='true'] { |
| + box-shadow: inset 0 0 0 2px currentColor; |
| + font-weight: 700; |
| +} |
| +[estilo-call-segmented] { |
| + display: flex; |
| + padding: 3px; |
| + border: 1px solid var(--rst-line); |
| + border-radius: 12px; |
| + background: var(--rst-surface-2); |
| +} |
| +[estilo-call-segmented] button { |
| + min-inline-size: 64px; |
| + min-block-size: 44px; |
| + border: 1px solid transparent; |
| + border-radius: 9px; |
| + background: transparent; |
| + color: var(--rst-text); |
| + font: inherit; |
| + cursor: pointer; |
| +} |
| +[estilo-call-segmented] [aria-pressed='true'] { |
| + background: var(--rst-surface); |
| + border-color: var(--rst-line); |
| + font-weight: 700; |
| +} |
| +[estilo-call-segmented] button:focus-visible { |
| + outline: 2px solid var(--rst-accent); |
| + outline-offset: 2px; |
| +} |
| +[estilo-call-actions][hidden], |
| +[estilo-call-segmented][hidden], |
| +[estilo-call-workspace][hidden] { display: none; } |
| +@media (min-width: 64rem) { |
| + [estilo-call-workspace~='sidebar'] { grid-template-columns: minmax(0, 1fr) 20rem; } |
| +} |
diff --git a/callui/callui.go b/callui/callui.go| new file mode 100644 |
| index 0000000..a4cfcfa |
| --- /dev/null |
| +++ b/callui/callui.go |
| @@ -0,0 +1,11 @@ |
| +// Package callui styles a call workspace and its controls. Meet is its first consumer. |
| +// It contains no language strings or script: callers supply translated labels, |
| +// state attributes and any media or panel behavior. |
| +package callui |
| + |
| +import _ "embed" |
| + |
| +//go:embed callui.css |
| +var css []byte |
| + |
| +func CSS() []byte { return append([]byte(nil), css...) } |