zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(packages): add live button component (#1473)

Browse Source
This commit is contained in:
Wesley Luyten
2026-04-30 18:00:15 -07:00
committed by GitHub
parent c5b06cf948
commit e37d5df873
70 changed files with 2207 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skins/src/default/css/components/button.css
+32
View File
@@ -110,3 +110,35 @@
content: attr(data-rate) "\00D7";
}
}
/* Live button — wide pill button with a status dot (gray → red at the live
edge) rendered via ::before, and "LIVE" text rendered as the button's own
text content. */
.media-default-skin .media-button--live {
display: inline-flex;
gap: 0.4rem;
align-items: center;
width: auto;
aspect-ratio: auto;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.05em;
&::before {
display: inline-block;
flex-shrink: 0;
width: 0.5rem;
height: 0.5rem;
content: "";
background-color: oklch(from currentColor l c h / 0.4);
border-radius: 50%;
transition: background-color 150ms ease-out;
}
&[data-live-edge]::before {
background-color: oklch(0.65 0.22 27);
}
}