@livekit/components-styles/dist/general/themes/huddle.css

Beautiful base styling for LiveKit components that you can use as is, build upon, or create your own.

[data-lk-theme=huddle]{--lk-button-size: 3.125rem;--lk-primary-color: #e23067;--lk-primary-bg: whitesmoke;--lk-secondary-color: lightgrey}[data-lk-theme=huddle] .lk-button{border:0px;box-shadow:0 0 1px rgba(29,28,29,.13),0 1px 3px 0 rgba(0,0,0,.08);background-position:center;background-repeat:no-repeat;background-size:60%;background-color:var(--lk-primary-bg);cursor:pointer}[data-lk-theme=huddle] .lk-button[aria-pressed=false]{background-color:var(--lk-primary-bg)}[data-lk-theme=huddle] .lk-button[data-lk-source]{height:var(--lk-button-size);width:var(--lk-button-size);aspect-ratio:1/1;border-radius:99999px}[data-lk-theme=huddle] .lk-disconnect-button{width:calc(1.5*var(--lk-button-size));height:var(--lk-button-size)}[data-lk-theme=huddle] .lk-button[data-lk-source=microphone]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23000000' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpath d='M176.4,181.3A72,72,0,0,1,56.4,136' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/path%3E%3Cpath d='M154.9,157.6A39.6,39.6,0,0,1,128,168h0a40,40,0,0,1-40-40V84' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/path%3E%3Cline x1='128' y1='200' x2='128' y2='232' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/line%3E%3Cline x1='48' y1='40' x2='208' y2='216' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/line%3E%3Cpath d='M94,43a39.8,39.8,0,0,1,34-19h0a40,40,0,0,1,40,40v60.4' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/path%3E%3Cpath d='M199.6,136a72.4,72.4,0,0,1-4.5,18.2' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/path%3E%3C/svg%3E")}[data-lk-theme=huddle] .lk-button[data-lk-source=microphone][aria-pressed=true]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23000000' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Crect x='88' y='24' width='80' height='144' rx='40' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/rect%3E%3Cline x1='128' y1='200' x2='128' y2='232' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/line%3E%3Cpath d='M199.6,136a72.1,72.1,0,0,1-143.2,0' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/path%3E%3C/svg%3E")}[data-lk-theme=huddle] .lk-button[data-lk-source=camera]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23000000' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolygon points='240 176 184 144 184 112 240 80 240 176' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/polygon%3E%3Cline x1='34.9' y1='24' x2='224' y2='232' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/line%3E%3Cpath d='M110.9,60H176a8,8,0,0,1,8,8v76' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/path%3E%3Cpath d='M184,188a8,8,0,0,1-8,8H24a8,8,0,0,1-8-8V68a8,8,0,0,1,8-8H67.6' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/path%3E%3C/svg%3E")}[data-lk-theme=huddle] .lk-button[data-lk-source=camera][aria-pressed=true]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23000000' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpath d='M24,60H152a32,32,0,0,1,32,32v96a8,8,0,0,1-8,8H48a32,32,0,0,1-32-32V68A8,8,0,0,1,24,60Z' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/path%3E%3Cpolyline points='184 112 240 80 240 176 184 144' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'%3E%3C/polyline%3E%3C/svg%3E")}[data-lk-theme=huddle] .lk-join-button{background-color:var(--lk-primary-color)}

/*# sourceMappingURL=huddle.css.map */