@livepeer-frameworks/player-wc 0.1.0

package/dist/esm/styles/utility-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utility-styles.js","sources":["../../../../src/styles/utility-styles.ts"],"sourcesContent":["/**\n * Hand-authored Tailwind-equivalent utility classes for Shadow DOM.\n * Only includes utilities actually used by the React player components.\n * ~4KB gzipped — avoids bundling all of Tailwind into shadow DOM.\n */\nimport { css } from \"lit\";\n\nexport const utilityStyles = css`\n  /* ======== Layout & Positioning ======== */\n  .absolute {\n    position: absolute;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: 0;\n  }\n  .inset-x-0 {\n    left: 0;\n    right: 0;\n  }\n  .top-0 {\n    top: 0;\n  }\n  .top-2 {\n    top: 0.5rem;\n  }\n  .top-3 {\n    top: 0.75rem;\n  }\n  .left-0 {\n    left: 0;\n  }\n  .left-3 {\n    left: 0.75rem;\n  }\n  .left-4 {\n    left: 1rem;\n  }\n  .right-0 {\n    right: 0;\n  }\n  .right-2 {\n    right: 0.5rem;\n  }\n  .right-3 {\n    right: 0.75rem;\n  }\n  .right-4 {\n    right: 1rem;\n  }\n  .bottom-0 {\n    bottom: 0;\n  }\n  .bottom-3 {\n    bottom: 0.75rem;\n  }\n  .bottom-4 {\n    bottom: 1rem;\n  }\n  .bottom-20 {\n    bottom: 5rem;\n  }\n  .left-1\\\\/2 {\n    left: 50%;\n  }\n  .top-1\\\\/4 {\n    top: 25%;\n  }\n\n  /* ======== Display & Flex ======== */\n  .hidden {\n    display: none;\n  }\n  .flex {\n    display: flex;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-1 {\n    flex: 1 1 0%;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .items-end {\n    align-items: flex-end;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .gap-2 {\n    gap: 0.5rem;\n  }\n  .gap-3 {\n    gap: 0.75rem;\n  }\n  .gap-4 {\n    gap: 1rem;\n  }\n  .gap-6 {\n    gap: 1.5rem;\n  }\n  .gap-8 {\n    gap: 2rem;\n  }\n\n  /* ======== Sizing ======== */\n  .w-full {\n    width: 100%;\n  }\n  .w-4 {\n    width: 1rem;\n  }\n  .w-5 {\n    width: 1.25rem;\n  }\n  .w-8 {\n    width: 2rem;\n  }\n  .w-20 {\n    width: 5rem;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .h-1\\\\.5 {\n    height: 0.375rem;\n  }\n  .h-4 {\n    height: 1rem;\n  }\n  .h-5 {\n    height: 1.25rem;\n  }\n  .h-6 {\n    height: 1.5rem;\n  }\n  .h-8 {\n    height: 2rem;\n  }\n  .h-20 {\n    height: 5rem;\n  }\n  .min-w-0 {\n    min-width: 0;\n  }\n  .max-w-sm {\n    max-width: 24rem;\n  }\n  .max-w-\\\\[320px\\\\] {\n    max-width: 320px;\n  }\n  .max-w-\\\\[90\\\\%\\\\] {\n    max-width: 90%;\n  }\n  .max-w-\\\\[80\\\\%\\\\] {\n    max-width: 80%;\n  }\n  .max-w-\\\\[70\\\\%\\\\] {\n    max-width: 70%;\n  }\n  .max-h-\\\\[72px\\\\] {\n    max-height: 72px;\n  }\n  .max-h-\\\\[80\\\\%\\\\] {\n    max-height: 80%;\n  }\n  .min-h-\\\\[280px\\\\] {\n    min-height: 280px;\n  }\n  .min-h-\\\\[300px\\\\] {\n    min-height: 300px;\n  }\n  .w-\\\\[280px\\\\] {\n    width: 280px;\n  }\n\n  /* ======== Spacing ======== */\n  .p-1 {\n    padding: 0.25rem;\n  }\n  .p-2 {\n    padding: 0.5rem;\n  }\n  .p-4 {\n    padding: 1rem;\n  }\n  .p-5 {\n    padding: 1.25rem;\n  }\n  .p-6 {\n    padding: 1.5rem;\n  }\n  .px-2\\\\.5 {\n    padding-left: 0.625rem;\n    padding-right: 0.625rem;\n  }\n  .px-3 {\n    padding-left: 0.75rem;\n    padding-right: 0.75rem;\n  }\n  .px-4 {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .px-6 {\n    padding-left: 1.5rem;\n    padding-right: 1.5rem;\n  }\n  .py-1 {\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n  .py-2 {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n  }\n  .py-2\\\\.5 {\n    padding-top: 0.625rem;\n    padding-bottom: 0.625rem;\n  }\n  .py-3 {\n    padding-top: 0.75rem;\n    padding-bottom: 0.75rem;\n  }\n  .pl-8 {\n    padding-left: 2rem;\n  }\n  .pr-8 {\n    padding-right: 2rem;\n  }\n  .pb-2 {\n    padding-bottom: 0.5rem;\n  }\n  .pb-3 {\n    padding-bottom: 0.75rem;\n  }\n  .pt-2 {\n    padding-top: 0.5rem;\n  }\n  .mt-0\\\\.5 {\n    margin-top: 0.125rem;\n  }\n  .mt-1 {\n    margin-top: 0.25rem;\n  }\n  .mt-1\\\\.5 {\n    margin-top: 0.375rem;\n  }\n  .mt-2 {\n    margin-top: 0.5rem;\n  }\n  .mt-3 {\n    margin-top: 0.75rem;\n  }\n  .mb-1 {\n    margin-bottom: 0.25rem;\n  }\n  .ml-0\\\\.5 {\n    margin-left: 0.125rem;\n  }\n  .-ml-4 {\n    margin-left: -1rem;\n  }\n\n  /* ======== Typography ======== */\n  .text-xs {\n    font-size: 0.75rem;\n    line-height: 1rem;\n  }\n  .text-sm {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n  }\n  .text-base {\n    font-size: 1rem;\n    line-height: 1.5rem;\n  }\n  .text-lg {\n    font-size: 1.125rem;\n    line-height: 1.75rem;\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-right {\n    text-align: right;\n  }\n  .font-mono {\n    font-family:\n      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\",\n      monospace;\n  }\n  .font-medium {\n    font-weight: 500;\n  }\n  .font-semibold {\n    font-weight: 600;\n  }\n  .font-bold {\n    font-weight: 700;\n  }\n  .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .line-clamp-2 {\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n  }\n  .whitespace-pre-wrap {\n    white-space: pre-wrap;\n  }\n  .tabular-nums {\n    font-variant-numeric: tabular-nums;\n  }\n  .tracking-wider {\n    letter-spacing: 0.05em;\n  }\n  .uppercase {\n    text-transform: uppercase;\n  }\n\n  /* ======== Colors ======== */\n  .text-white {\n    color: white;\n  }\n  .text-white\\\\/15 {\n    color: rgb(255 255 255 / 0.15);\n  }\n  .text-white\\\\/50 {\n    color: rgb(255 255 255 / 0.5);\n  }\n  .text-white\\\\/60 {\n    color: rgb(255 255 255 / 0.6);\n  }\n  .text-white\\\\/70 {\n    color: rgb(255 255 255 / 0.7);\n  }\n  .text-white\\\\/80 {\n    color: rgb(255 255 255 / 0.8);\n  }\n  .text-white\\\\/90 {\n    color: rgb(255 255 255 / 0.9);\n  }\n\n  /* ======== Backgrounds ======== */\n  .bg-black {\n    background-color: black;\n  }\n  .bg-black\\\\/40 {\n    background-color: rgb(0 0 0 / 0.4);\n  }\n  .bg-black\\\\/70 {\n    background-color: rgb(0 0 0 / 0.7);\n  }\n  .bg-black\\\\/80 {\n    background-color: rgb(0 0 0 / 0.8);\n  }\n  .bg-white {\n    background-color: white;\n  }\n  .bg-white\\\\/10 {\n    background-color: rgb(255 255 255 / 0.1);\n  }\n  .bg-white\\\\/15 {\n    background-color: rgb(255 255 255 / 0.15);\n  }\n  .bg-slate-400 {\n    background-color: rgb(148 163 184);\n  }\n  .bg-slate-900 {\n    background-color: rgb(15 23 42);\n  }\n  .bg-slate-950 {\n    background-color: rgb(2 6 23);\n  }\n  .bg-red-400 {\n    background-color: rgb(248 113 113);\n  }\n\n  /* ======== Gradients ======== */\n  .bg-gradient-to-b {\n    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n  }\n  .from-black\\\\/70 {\n    --tw-gradient-from: rgb(0 0 0 / 0.7);\n    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(0 0 0 / 0));\n  }\n  .via-black\\\\/40 {\n    --tw-gradient-via: rgb(0 0 0 / 0.4);\n    --tw-gradient-stops:\n      var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, rgb(0 0 0 / 0));\n  }\n  .to-transparent {\n    --tw-gradient-to: transparent;\n  }\n  .from-slate-900 {\n    --tw-gradient-from: rgb(15 23 42);\n    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(15 23 42 / 0));\n  }\n  .via-slate-950 {\n    --tw-gradient-via: rgb(2 6 23);\n    --tw-gradient-stops:\n      var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, rgb(2 6 23 / 0));\n  }\n  .to-slate-900 {\n    --tw-gradient-to: rgb(15 23 42);\n  }\n\n  /* ======== Borders ======== */\n  .border {\n    border-width: 1px;\n  }\n  .border-b {\n    border-bottom-width: 1px;\n  }\n  .border-2 {\n    border-width: 2px;\n  }\n  .border-white\\\\/10 {\n    border-color: rgb(255 255 255 / 0.1);\n  }\n  .border-white\\\\/15 {\n    border-color: rgb(255 255 255 / 0.15);\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-md {\n    border-radius: 0.375rem;\n  }\n  .rounded-lg {\n    border-radius: 0.5rem;\n  }\n  .rounded-xl {\n    border-radius: 0.75rem;\n  }\n  .rounded-full {\n    border-radius: 9999px;\n  }\n  .rounded-\\\\[4px\\\\] {\n    border-radius: 4px;\n  }\n  .outline-none {\n    outline: 2px solid transparent;\n    outline-offset: 2px;\n  }\n\n  /* ======== Opacity ======== */\n  .opacity-0 {\n    opacity: 0;\n  }\n  .opacity-25 {\n    opacity: 0.25;\n  }\n  .opacity-50 {\n    opacity: 0.5;\n  }\n  .opacity-60 {\n    opacity: 0.6;\n  }\n  .opacity-70 {\n    opacity: 0.7;\n  }\n  .opacity-75 {\n    opacity: 0.75;\n  }\n  .opacity-90 {\n    opacity: 0.9;\n  }\n  .opacity-100 {\n    opacity: 1;\n  }\n\n  /* ======== Effects ======== */\n  .shadow-lg {\n    box-shadow:\n      0 10px 15px -3px rgb(0 0 0 / 0.1),\n      0 4px 6px -4px rgb(0 0 0 / 0.1);\n  }\n  .shadow-xl {\n    box-shadow:\n      0 20px 25px -5px rgb(0 0 0 / 0.1),\n      0 8px 10px -6px rgb(0 0 0 / 0.1);\n  }\n  .shadow-inner {\n    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n  }\n  .backdrop-blur {\n    backdrop-filter: blur(8px);\n  }\n  .backdrop-blur-sm {\n    backdrop-filter: blur(4px);\n  }\n\n  /* ======== Overflow ======== */\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-auto {\n    overflow: auto;\n  }\n\n  /* ======== Interaction ======== */\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .pointer-events-auto {\n    pointer-events: auto;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .cursor-not-allowed {\n    cursor: not-allowed;\n  }\n\n  /* ======== Z-Index ======== */\n  .z-5 {\n    z-index: 5;\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-20 {\n    z-index: 20;\n  }\n  .z-30 {\n    z-index: 30;\n  }\n  .z-40 {\n    z-index: 40;\n  }\n  .z-100 {\n    z-index: 100;\n  }\n\n  /* ======== Transforms ======== */\n  .transform {\n    transform: var(--tw-transform);\n  }\n  .scale-50 {\n    transform: scale(0.5);\n  }\n  .scale-75 {\n    transform: scale(0.75);\n  }\n  .scale-90 {\n    transform: scale(0.9);\n  }\n  .scale-100 {\n    transform: scale(1);\n  }\n  .scale-110 {\n    transform: scale(1.1);\n  }\n  .scale-120 {\n    transform: scale(1.2);\n  }\n  .-translate-x-1\\\\/2 {\n    transform: translateX(-50%);\n  }\n  .translate-x-1\\\\/2 {\n    transform: translateX(50%);\n  }\n  .rotate-45 {\n    transform: rotate(45deg);\n  }\n  .-rotate-45 {\n    transform: rotate(-45deg);\n  }\n  .rotate-90 {\n    transform: rotate(90deg);\n  }\n\n  /* ======== Transitions ======== */\n  .transition {\n    transition-property:\n      color, background-color, border-color, text-decoration-color, fill, stroke, opacity,\n      box-shadow, transform, filter, backdrop-filter;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms;\n  }\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms;\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms;\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms;\n  }\n  .transition-transform {\n    transition-property: transform;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms;\n  }\n  .duration-150 {\n    transition-duration: 150ms;\n  }\n  .duration-200 {\n    transition-duration: 200ms;\n  }\n  .duration-300 {\n    transition-duration: 300ms;\n  }\n  .duration-500 {\n    transition-duration: 500ms;\n  }\n  .ease-out {\n    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  }\n  .ease-in-out {\n    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);\n  }\n\n  /* ======== Animations ======== */\n  .animate-spin {\n    animation: _fw-spin 1s linear infinite;\n  }\n  .animate-pulse {\n    animation: _fw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  }\n  @keyframes _fw-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes _fw-pulse {\n    0%,\n    100% {\n      opacity: 1;\n    }\n    50% {\n      opacity: 0.5;\n    }\n  }\n\n  /* ======== Responsive (sm: 640px+) ======== */\n  @media (min-width: 640px) {\n    .sm\\\\:flex {\n      display: flex;\n    }\n    .sm\\\\:left-4 {\n      left: 1rem;\n    }\n    .sm\\\\:top-4 {\n      top: 1rem;\n    }\n    .sm\\\\:right-4 {\n      right: 1rem;\n    }\n    .sm\\\\:gap-6 {\n      gap: 1.5rem;\n    }\n  }\n\n  /* ======== Hover states ======== */\n  .hover\\\\:bg-white\\\\/10:hover {\n    background-color: rgb(255 255 255 / 0.1);\n  }\n  .hover\\\\:text-white:hover {\n    color: white;\n  }\n  .hover\\\\:rotate-90:hover {\n    transform: rotate(90deg);\n  }\n\n  /* ======== Focus-visible states ======== */\n  .focus-visible\\\\:ring-2:focus-visible {\n    box-shadow: 0 0 0 2px var(--tw-ring-color, rgb(59 130 246));\n  }\n  .focus-visible\\\\:ring-offset-2:focus-visible {\n    box-shadow:\n      0 0 0 2px var(--tw-ring-offset-color, white),\n      0 0 0 4px var(--tw-ring-color, rgb(59 130 246));\n  }\n\n  /* ======== Group hover ======== */\n  .group:hover .group-hover\\\\:rotate-90 {\n    transform: rotate(90deg);\n  }\n`;\n"],"names":[],"mappings":";;AAAA;;;;AAIG;AAGI,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}