A decentralized music tracking and discovery platform built on AT Protocol 🎵

Add embed pages, components, types, and fetchers

+3243 -37
+88
apps/embed/bun.lock
··· 6 6 "name": "embed", 7 7 "dependencies": { 8 8 "@hono/react-renderer": "^1.0.1", 9 + "@iconify-json/tabler": "^1.2.26", 10 + "@iconify/tailwind4": "^1.2.1", 11 + "@logtape/logtape": "^2.0.2", 9 12 "dayjs": "^1.11.19", 13 + "flyonui": "^2.4.1", 10 14 "hono": "^4.11.7", 11 15 "honox": "^0.1.53", 16 + "lodash": "^4.17.23", 12 17 "numeral": "^2.0.6", 18 + "ramda": "^0.32.0", 13 19 "react": "^19.2.4", 14 20 "react-dom": "^19.2.4", 15 21 "uuid": "^13.0.0", ··· 30 36 }, 31 37 }, 32 38 "packages": { 39 + "@antfu/install-pkg": ["@antfu/install-pkg@1.1.0", "", { "dependencies": { "package-manager-detector": "^1.3.0", "tinyexec": "^1.0.1" } }, "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ=="], 40 + 33 41 "@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="], 34 42 35 43 "@babel/generator": ["@babel/generator@7.25.6", "", { "dependencies": { "@babel/types": "^7.25.6", "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.25", "jsesc": "^2.5.1" } }, "sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw=="], ··· 45 53 "@babel/traverse": ["@babel/traverse@7.25.6", "", { "dependencies": { "@babel/code-frame": "^7.24.7", "@babel/generator": "^7.25.6", "@babel/parser": "^7.25.6", "@babel/template": "^7.25.0", "@babel/types": "^7.25.6", "debug": "^4.3.1", "globals": "^11.1.0" } }, "sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ=="], 46 54 47 55 "@babel/types": ["@babel/types@7.25.6", "", { "dependencies": { "@babel/helper-string-parser": "^7.24.8", "@babel/helper-validator-identifier": "^7.24.7", "to-fast-properties": "^2.0.0" } }, "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw=="], 56 + 57 + "@cyberalien/svg-utils": ["@cyberalien/svg-utils@1.1.1", "", { "dependencies": { "@iconify/types": "^2.0.0" } }, "sha512-i05Cnpzeezf3eJAXLx7aFirTYYoq5D1XUItp1XsjqkerNJh//6BG9sOYHbiO7v0KYMvJAx3kosrZaRcNlQPdsA=="], 48 58 49 59 "@dependents/detective-less": ["@dependents/detective-less@5.0.1", "", { "dependencies": { "gonzales-pe": "^4.3.0", "node-source-walk": "^7.0.1" } }, "sha512-Y6+WUMsTFWE5jb20IFP4YGa5IrGY/+a/FbOSjDF/wz9gepU2hwCYSXRHP/vPwBvwcY3SVMASt4yXxbXNXigmZQ=="], 50 60 ··· 100 110 101 111 "@esbuild/win32-x64": ["@esbuild/win32-x64@0.27.2", "", { "os": "win32", "cpu": "x64" }, "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ=="], 102 112 113 + "@floating-ui/core": ["@floating-ui/core@1.7.4", "", { "dependencies": { "@floating-ui/utils": "^0.2.10" } }, "sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg=="], 114 + 115 + "@floating-ui/dom": ["@floating-ui/dom@1.7.5", "", { "dependencies": { "@floating-ui/core": "^1.7.4", "@floating-ui/utils": "^0.2.10" } }, "sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg=="], 116 + 117 + "@floating-ui/utils": ["@floating-ui/utils@0.2.10", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="], 118 + 103 119 "@hono/node-server": ["@hono/node-server@1.19.9", "", { "peerDependencies": { "hono": "^4" } }, "sha512-vHL6w3ecZsky+8P5MD+eFfaGTyCeOHUIFYMGpQGbrBTSmNNoxv0if69rEZ5giu36weC5saFuznL411gRX7bJDw=="], 104 120 105 121 "@hono/react-renderer": ["@hono/react-renderer@1.0.1", "", { "peerDependencies": { "hono": "*", "react": "^19.0.0", "react-dom": "^19.0.0" } }, "sha512-vjQ/70hVrbgsi2O44N7w5sO0v51lRcuXau/4caVzw0A1hje+U2zAnuhiBC3JhX56gGfhGT4kO5B0di4SROx0Lg=="], 106 122 107 123 "@hono/vite-dev-server": ["@hono/vite-dev-server@0.23.0", "", { "dependencies": { "@hono/node-server": "^1.14.2", "minimatch": "^9.0.3" }, "peerDependencies": { "hono": "*", "miniflare": "*", "wrangler": "*" }, "optionalPeers": ["miniflare", "wrangler"] }, "sha512-tHV86xToed9Up0j/dubQW2PDP4aYNFDSfQrjcV6Ra7bqCGrxhtg/zZBmbgSco3aTxKOEPzDXKK+6seAAfsbIXw=="], 108 124 125 + "@iconify-json/tabler": ["@iconify-json/tabler@1.2.26", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-92G+ZD70AZgeJf07JfQzH+isnai6DwPcMBuF/qL1F+xAxdXCJzGd3w2RmsRvOmB+w1ImmWEEDms50QivQIjd6g=="], 126 + 127 + "@iconify/tailwind4": ["@iconify/tailwind4@1.2.1", "", { "dependencies": { "@iconify/tools": "^5.0.2", "@iconify/types": "^2.0.0", "@iconify/utils": "^3.1.0" }, "peerDependencies": { "tailwindcss": ">= 4.0.0" } }, "sha512-Hd7k8y7uzT3hk8ltw0jGku0r0wA8sc3d2iMvVTYv/9tMxBb+frZtWZGD9hDMU3EYuE+lMn58wi2lS8R2ZbwFcQ=="], 128 + 129 + "@iconify/tools": ["@iconify/tools@5.0.3", "", { "dependencies": { "@cyberalien/svg-utils": "^1.1.1", "@iconify/types": "^2.0.0", "@iconify/utils": "^3.1.0", "fflate": "^0.8.2", "modern-tar": "^0.7.3", "pathe": "^2.0.3", "svgo": "^4.0.0" } }, "sha512-W5nbH5fNv20TvU49Al19Foos/ViAnmppbCNV9ieGl6/dRMDRzxeFol6peXX/NAgaOytQwZZxTTJRq/Kxd4eWsA=="], 130 + 131 + "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="], 132 + 133 + "@iconify/utils": ["@iconify/utils@3.1.0", "", { "dependencies": { "@antfu/install-pkg": "^1.1.0", "@iconify/types": "^2.0.0", "mlly": "^1.8.0" } }, "sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw=="], 134 + 109 135 "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="], 110 136 111 137 "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="], ··· 115 141 "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="], 116 142 117 143 "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="], 144 + 145 + "@logtape/logtape": ["@logtape/logtape@2.0.2", "", {}, "sha512-cveUBLbCMFkvkLycP/2vNWvywl47JcJbazHIju94/QNGboZ/jyYAgZIm0ZXezAOx3eIz8OG1EOZ5CuQP3+2FQg=="], 118 146 119 147 "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.57.1", "", { "os": "android", "cpu": "arm" }, "sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg=="], 120 148 ··· 226 254 227 255 "@vue/shared": ["@vue/shared@3.5.27", "", {}, "sha512-dXr/3CgqXsJkZ0n9F3I4elY8wM9jMJpP3pvRG52r6m0tu/MsAFIe6JpXVGeNMd/D9F4hQynWT8Rfuj0bdm9kFQ=="], 228 256 257 + "acorn": ["acorn@8.15.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="], 258 + 229 259 "ast-module-types": ["ast-module-types@6.0.1", "", {}, "sha512-WHw67kLXYbZuHTmcdbIrVArCq5wxo6NEuj3hiYAWr8mwJeC+C2mMCIBIWCiDoCye/OF/xelc+teJ1ERoWmnEIA=="], 230 260 231 261 "autoprefixer": ["autoprefixer@10.4.24", "", { "dependencies": { "browserslist": "^4.28.1", "caniuse-lite": "^1.0.30001766", "fraction.js": "^5.3.4", "picocolors": "^1.1.1", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.1.0" }, "bin": { "autoprefixer": "bin/autoprefixer" } }, "sha512-uHZg7N9ULTVbutaIsDRoUkoS8/h3bdsmVJYZ5l3wv8Cp/6UIIoRDm90hZ+BwxUj/hGBEzLxdHNSKuFpn8WOyZw=="], ··· 233 263 "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="], 234 264 235 265 "baseline-browser-mapping": ["baseline-browser-mapping@2.9.19", "", { "bin": { "baseline-browser-mapping": "dist/cli.js" } }, "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg=="], 266 + 267 + "boolbase": ["boolbase@1.0.0", "", {}, "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="], 236 268 237 269 "brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="], 238 270 ··· 246 278 247 279 "commander": ["commander@12.1.0", "", {}, "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA=="], 248 280 281 + "confbox": ["confbox@0.1.8", "", {}, "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w=="], 282 + 283 + "css-select": ["css-select@5.2.2", "", { "dependencies": { "boolbase": "^1.0.0", "css-what": "^6.1.0", "domhandler": "^5.0.2", "domutils": "^3.0.1", "nth-check": "^2.0.1" } }, "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw=="], 284 + 285 + "css-tree": ["css-tree@3.1.0", "", { "dependencies": { "mdn-data": "2.12.2", "source-map-js": "^1.0.1" } }, "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w=="], 286 + 287 + "css-what": ["css-what@6.2.2", "", {}, "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA=="], 288 + 289 + "csso": ["csso@5.0.5", "", { "dependencies": { "css-tree": "~2.2.0" } }, "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ=="], 290 + 249 291 "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="], 250 292 251 293 "dayjs": ["dayjs@1.11.19", "", {}, "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw=="], ··· 272 314 273 315 "detective-vue2": ["detective-vue2@2.2.0", "", { "dependencies": { "@dependents/detective-less": "^5.0.1", "@vue/compiler-sfc": "^3.5.13", "detective-es6": "^5.0.1", "detective-sass": "^6.0.1", "detective-scss": "^5.0.1", "detective-stylus": "^5.0.1", "detective-typescript": "^14.0.0" }, "peerDependencies": { "typescript": "^5.4.4" } }, "sha512-sVg/t6O2z1zna8a/UIV6xL5KUa2cMTQbdTIIvqNM0NIPswp52fe43Nwmbahzj3ww4D844u/vC2PYfiGLvD3zFA=="], 274 316 317 + "dom-serializer": ["dom-serializer@2.0.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", "entities": "^4.2.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="], 318 + 319 + "domelementtype": ["domelementtype@2.3.0", "", {}, "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="], 320 + 321 + "domhandler": ["domhandler@5.0.3", "", { "dependencies": { "domelementtype": "^2.3.0" } }, "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w=="], 322 + 323 + "domutils": ["domutils@3.2.2", "", { "dependencies": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", "domhandler": "^5.0.3" } }, "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw=="], 324 + 275 325 "electron-to-chromium": ["electron-to-chromium@1.5.283", "", {}, "sha512-3vifjt1HgrGW/h76UEeny+adYApveS9dH2h3p57JYzBSXJIKUJAvtmIytDKjcSCt9xHfrNCFJ7gts6vkhuq++w=="], 276 326 277 327 "enhanced-resolve": ["enhanced-resolve@5.18.4", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" } }, "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q=="], ··· 295 345 "esutils": ["esutils@2.0.3", "", {}, "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="], 296 346 297 347 "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="], 348 + 349 + "fflate": ["fflate@0.8.2", "", {}, "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A=="], 350 + 351 + "flyonui": ["flyonui@2.4.1", "", { "dependencies": { "@floating-ui/dom": "^1.7.1" } }, "sha512-WgP/YP1nZXbEtRkl3ThJIcIaisXOyON3zS2Qz2IwikQA/2X/PmqnP6E+eOz7WLBzEQI4ec7wViYAcRf9vljcbg=="], 298 352 299 353 "fraction.js": ["fraction.js@5.3.4", "", {}, "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ=="], 300 354 ··· 348 402 349 403 "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.30.2", "", { "os": "win32", "cpu": "x64" }, "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw=="], 350 404 405 + "lodash": ["lodash@4.17.23", "", {}, "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w=="], 406 + 351 407 "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="], 408 + 409 + "mdn-data": ["mdn-data@2.12.2", "", {}, "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA=="], 352 410 353 411 "minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="], 354 412 355 413 "minimist": ["minimist@1.2.8", "", {}, "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="], 356 414 415 + "mlly": ["mlly@1.8.0", "", { "dependencies": { "acorn": "^8.15.0", "pathe": "^2.0.3", "pkg-types": "^1.3.1", "ufo": "^1.6.1" } }, "sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g=="], 416 + 417 + "modern-tar": ["modern-tar@0.7.3", "", {}, "sha512-4W79zekKGyYU4JXVmB78DOscMFaJth2gGhgfTl2alWE4rNe3nf4N2pqenQ0rEtIewrnD79M687Ouba3YGTLOvg=="], 418 + 357 419 "module-definition": ["module-definition@6.0.1", "", { "dependencies": { "ast-module-types": "^6.0.1", "node-source-walk": "^7.0.1" }, "bin": { "module-definition": "bin/cli.js" } }, "sha512-FeVc50FTfVVQnolk/WQT8MX+2WVcDnTGiq6Wo+/+lJ2ET1bRVi3HG3YlJUfqagNMc/kUlFSoR96AJkxGpKz13g=="], 358 420 359 421 "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="], ··· 364 426 365 427 "node-source-walk": ["node-source-walk@7.0.1", "", { "dependencies": { "@babel/parser": "^7.26.7" } }, "sha512-3VW/8JpPqPvnJvseXowjZcirPisssnBuDikk6JIZ8jQzF7KJQX52iPFX4RYYxLycYH7IbMRSPUOga/esVjy5Yg=="], 366 428 429 + "nth-check": ["nth-check@2.1.1", "", { "dependencies": { "boolbase": "^1.0.0" } }, "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w=="], 430 + 367 431 "numeral": ["numeral@2.0.6", "", {}, "sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA=="], 368 432 433 + "package-manager-detector": ["package-manager-detector@1.6.0", "", {}, "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA=="], 434 + 435 + "pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="], 436 + 369 437 "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="], 370 438 371 439 "picomatch": ["picomatch@4.0.3", "", {}, "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="], 440 + 441 + "pkg-types": ["pkg-types@1.3.1", "", { "dependencies": { "confbox": "^0.1.8", "mlly": "^1.7.4", "pathe": "^2.0.1" } }, "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ=="], 372 442 373 443 "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], 374 444 ··· 379 449 "precinct": ["precinct@12.2.0", "", { "dependencies": { "@dependents/detective-less": "^5.0.1", "commander": "^12.1.0", "detective-amd": "^6.0.1", "detective-cjs": "^6.0.1", "detective-es6": "^5.0.1", "detective-postcss": "^7.0.1", "detective-sass": "^6.0.1", "detective-scss": "^5.0.1", "detective-stylus": "^5.0.1", "detective-typescript": "^14.0.0", "detective-vue2": "^2.2.0", "module-definition": "^6.0.1", "node-source-walk": "^7.0.1", "postcss": "^8.5.1", "typescript": "^5.7.3" }, "bin": { "precinct": "bin/cli.js" } }, "sha512-NFBMuwIfaJ4SocE9YXPU/n4AcNSoFMVFjP72nvl3cx69j/ke61/hPOWFREVxLkFhhEGnA8ZuVfTqJBa+PK3b5w=="], 380 450 381 451 "quote-unquote": ["quote-unquote@1.0.0", "", {}, "sha512-twwRO/ilhlG/FIgYeKGFqyHhoEhqgnKVkcmqMKi2r524gz3ZbDTcyFt38E9xjJI2vT+KbRNHVbnJ/e0I25Azwg=="], 452 + 453 + "ramda": ["ramda@0.32.0", "", {}, "sha512-GQWAHhxhxWBWA8oIBr1XahFVjQ9Fic6MK9ikijfd4TZHfE2+urfk+irVlR5VOn48uwMgM+loRRBJd6Yjsbc0zQ=="], 382 454 383 455 "react": ["react@19.2.4", "", {}, "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ=="], 384 456 ··· 386 458 387 459 "rollup": ["rollup@4.57.1", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.57.1", "@rollup/rollup-android-arm64": "4.57.1", "@rollup/rollup-darwin-arm64": "4.57.1", "@rollup/rollup-darwin-x64": "4.57.1", "@rollup/rollup-freebsd-arm64": "4.57.1", "@rollup/rollup-freebsd-x64": "4.57.1", "@rollup/rollup-linux-arm-gnueabihf": "4.57.1", "@rollup/rollup-linux-arm-musleabihf": "4.57.1", "@rollup/rollup-linux-arm64-gnu": "4.57.1", "@rollup/rollup-linux-arm64-musl": "4.57.1", "@rollup/rollup-linux-loong64-gnu": "4.57.1", "@rollup/rollup-linux-loong64-musl": "4.57.1", "@rollup/rollup-linux-ppc64-gnu": "4.57.1", "@rollup/rollup-linux-ppc64-musl": "4.57.1", "@rollup/rollup-linux-riscv64-gnu": "4.57.1", "@rollup/rollup-linux-riscv64-musl": "4.57.1", "@rollup/rollup-linux-s390x-gnu": "4.57.1", "@rollup/rollup-linux-x64-gnu": "4.57.1", "@rollup/rollup-linux-x64-musl": "4.57.1", "@rollup/rollup-openbsd-x64": "4.57.1", "@rollup/rollup-openharmony-arm64": "4.57.1", "@rollup/rollup-win32-arm64-msvc": "4.57.1", "@rollup/rollup-win32-ia32-msvc": "4.57.1", "@rollup/rollup-win32-x64-gnu": "4.57.1", "@rollup/rollup-win32-x64-msvc": "4.57.1", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A=="], 388 460 461 + "sax": ["sax@1.4.4", "", {}, "sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw=="], 462 + 389 463 "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="], 390 464 391 465 "semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="], ··· 394 468 395 469 "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="], 396 470 471 + "svgo": ["svgo@4.0.0", "", { "dependencies": { "commander": "^11.1.0", "css-select": "^5.1.0", "css-tree": "^3.0.1", "css-what": "^6.1.0", "csso": "^5.0.5", "picocolors": "^1.1.1", "sax": "^1.4.1" }, "bin": "./bin/svgo.js" }, "sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw=="], 472 + 397 473 "tailwindcss": ["tailwindcss@4.1.18", "", {}, "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw=="], 398 474 399 475 "tapable": ["tapable@2.3.0", "", {}, "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg=="], 400 476 477 + "tinyexec": ["tinyexec@1.0.2", "", {}, "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg=="], 478 + 401 479 "tinyglobby": ["tinyglobby@0.2.15", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.3" } }, "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ=="], 402 480 403 481 "to-fast-properties": ["to-fast-properties@2.0.0", "", {}, "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="], ··· 405 483 "ts-api-utils": ["ts-api-utils@2.4.0", "", { "peerDependencies": { "typescript": ">=4.8.4" } }, "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA=="], 406 484 407 485 "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="], 486 + 487 + "ufo": ["ufo@1.6.3", "", {}, "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q=="], 408 488 409 489 "undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="], 410 490 ··· 434 514 435 515 "@vue/compiler-sfc/@babel/parser": ["@babel/parser@7.29.0", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww=="], 436 516 517 + "csso/css-tree": ["css-tree@2.2.1", "", { "dependencies": { "mdn-data": "2.0.28", "source-map-js": "^1.0.1" } }, "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA=="], 518 + 519 + "dom-serializer/entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="], 520 + 437 521 "node-source-walk/@babel/parser": ["@babel/parser@7.29.0", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww=="], 438 522 523 + "svgo/commander": ["commander@11.1.0", "", {}, "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ=="], 524 + 439 525 "@vue/compiler-core/@babel/parser/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="], 440 526 441 527 "@vue/compiler-sfc/@babel/parser/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="], 528 + 529 + "csso/css-tree/mdn-data": ["mdn-data@2.0.28", "", {}, "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="], 442 530 443 531 "node-source-walk/@babel/parser/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="], 444 532 }
+6
apps/embed/package.json
··· 22 22 }, 23 23 "dependencies": { 24 24 "@hono/react-renderer": "^1.0.1", 25 + "@iconify-json/tabler": "^1.2.26", 26 + "@iconify/tailwind4": "^1.2.1", 27 + "@logtape/logtape": "^2.0.2", 25 28 "dayjs": "^1.11.19", 29 + "flyonui": "^2.4.1", 26 30 "hono": "^4.11.7", 27 31 "honox": "^0.1.53", 32 + "lodash": "^4.17.23", 28 33 "numeral": "^2.0.6", 34 + "ramda": "^0.32.0", 29 35 "react": "^19.2.4", 30 36 "react-dom": "^19.2.4", 31 37 "uuid": "^13.0.0"
+2793 -12
apps/embed/public/styles.css
··· 1 1 /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */ 2 2 @layer properties; 3 + .carousel-prev { 4 + position: absolute; 5 + inset-block: calc(0.25rem * 0); 6 + margin-block: auto; 7 + display: inline-flex; 8 + height: max-content; 9 + cursor: pointer; 10 + align-items: center; 11 + justify-content: center; 12 + &.disabled { 13 + pointer-events: none; 14 + } 15 + border-start-start-radius: var(--radius-2xl); 16 + border-end-start-radius: var(--radius-2xl); 17 + } 18 + .carousel-next { 19 + position: absolute; 20 + inset-block: calc(0.25rem * 0); 21 + margin-block: auto; 22 + display: inline-flex; 23 + height: max-content; 24 + cursor: pointer; 25 + align-items: center; 26 + justify-content: center; 27 + &.disabled { 28 + pointer-events: none; 29 + } 30 + border-start-end-radius: var(--radius-2xl); 31 + border-end-end-radius: var(--radius-2xl); 32 + } 33 + .menu { 34 + display: flex; 35 + flex-direction: column; 36 + flex-wrap: wrap; 37 + gap: calc(0.25rem * 0.5); 38 + border-radius: var(--radius-box); 39 + padding: calc(0.25rem * 2); 40 + font-size: var(--text-base); 41 + line-height: var(--tw-leading, var(--text-base--line-height)); 42 + --menu-active-fg: var(--color-primary); 43 + --menu-active-bg: var(--color-primary); 44 + @supports (color: color-mix(in lab, red, red)) { 45 + --menu-active-bg: color-mix(in oklab, var(--color-primary) 10%, #0000); 46 + } 47 + --menu-hover-fg: var(--color-base-content); 48 + --menu-hover-bg: var(--color-neutral); 49 + @supports (color: color-mix(in lab, red, red)) { 50 + --menu-hover-bg: color-mix(in oklab, var(--color-neutral) 10%, #0000); 51 + } 52 + :where(li ul) { 53 + position: relative; 54 + white-space: nowrap; 55 + } 56 + :where(li:not(.dropdown) ul) { 57 + margin-inline-start: calc(0.25rem * 4); 58 + padding-inline-start: calc(0.25rem * 2); 59 + &:before { 60 + position: absolute; 61 + inset-inline-start: calc(0.25rem * 0); 62 + top: calc(0.25rem * 3); 63 + bottom: calc(0.25rem * 2.5); 64 + background-color: var(--color-base-content); 65 + opacity: 10%; 66 + width: var(--border); 67 + content: ""; 68 + } 69 + } 70 + :where(li > .menu-dropdown:not(.menu-dropdown-show)) { 71 + display: none; 72 + } 73 + :where(.menu li:empty) { 74 + background-color: var(--color-base-content); 75 + opacity: 10%; 76 + margin: 0.5rem 1rem; 77 + height: 1px; 78 + } 79 + :where(li:not(.menu-title, .tooltip) > *:not(ul, .collapse, .accordion-content, .menu-title, .btn)) { 80 + border-radius: var(--radius-field); 81 + padding-inline: calc(0.25rem * 4); 82 + padding-block: calc(0.25rem * 2.5); 83 + text-align: start; 84 + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; 85 + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); 86 + transition-timing-function: var(--ease-out); 87 + transition-duration: var(--tw-duration, var(--default-transition-duration)); 88 + transition-duration: 200ms; 89 + --tw-duration: 200ms; 90 + --tw-ease: var(--ease-out); 91 + text-wrap: balance; 92 + } 93 + :where(li:not(.menu-title) > *:not(ul, .collapse, .accordion-content, .menu-title, .btn)) { 94 + display: grid; 95 + grid-auto-flow: column; 96 + align-content: flex-start; 97 + align-items: center; 98 + gap: calc(0.25rem * 2); 99 + grid-auto-columns: minmax(auto, max-content) auto max-content; 100 + user-select: none; 101 + } 102 + :where(li.tooltip) > * { 103 + border-radius: var(--radius-field); 104 + padding-inline: calc(0.25rem * 4); 105 + padding-block: calc(0.25rem * 2.5); 106 + text-align: start; 107 + } 108 + :where(.menu li:not(.menu-title, .menu-disabled)) { 109 + color: var(--color-base-content); 110 + } 111 + :where( .menu li:not(.menu-title, .menu-disabled) > *:not(ul, .collapse, .accordion-content, .dropdown-active, .menu-title) ) { 112 + &:not(.btn):focus-visible { 113 + cursor: pointer; 114 + --tw-outline-style: none; 115 + outline-style: none; 116 + color: var(--menu-hover-fg); 117 + background-color: var(--menu-hover-bg); 118 + } 119 + &:hover { 120 + cursor: pointer; 121 + --tw-outline-style: none; 122 + outline-style: none; 123 + color: var(--menu-hover-fg); 124 + background-color: var(--menu-hover-bg); 125 + } 126 + } 127 + li:not(.menu-title, .menu-disabled) > :not(ul, .menu-title, .collapse, .accordion-content, .btn).menu-active { 128 + color: var(--menu-active-fg); 129 + background-color: var(--menu-active-bg); 130 + background-size: auto, calc(var(--noise) * 100%); 131 + background-image: none, var(--fx-noise); 132 + } 133 + li.menu-disabled { 134 + pointer-events: none; 135 + opacity: 50%; 136 + webkit-user-select: none; 137 + user-select: none; 138 + } 139 + :where(& li) { 140 + position: relative; 141 + display: flex; 142 + flex-shrink: 0; 143 + flex-direction: column; 144 + flex-wrap: wrap; 145 + align-items: stretch; 146 + .badge { 147 + justify-self: flex-end; 148 + } 149 + } 150 + } 151 + .range { 152 + appearance: none; 153 + webkit-appearance: none; 154 + --range-color: var(--color-base-content); 155 + --range-thumb-border-width: 3px; 156 + --range-track-height: 8px; 157 + --range-thumb-size: 16px; 158 + position: relative; 159 + width: 100%; 160 + border-radius: calc(infinity * 1px); 161 + background-color: transparent; 162 + transition-property: all; 163 + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); 164 + transition-duration: var(--tw-duration, var(--default-transition-duration)); 165 + height: var(--range-track-height); 166 + &::-webkit-slider-runnable-track { 167 + width: 100%; 168 + border-radius: calc(infinity * 1px); 169 + background-color: var(--color-neutral); 170 + @supports (color: color-mix(in lab, red, red)) { 171 + background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); 172 + } 173 + height: var(--range-track-height); 174 + } 175 + &::-moz-range-track { 176 + width: 100%; 177 + border-radius: calc(infinity * 1px); 178 + background-color: var(--color-neutral); 179 + @supports (color: color-mix(in lab, red, red)) { 180 + background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); 181 + } 182 + height: var(--range-track-height); 183 + } 184 + &::-webkit-slider-thumb { 185 + position: relative; 186 + top: calc(1/2 * 100%); 187 + --tw-translate-y: calc(calc(1/2 * 100%) * -1); 188 + translate: var(--tw-translate-x) var(--tw-translate-y); 189 + border-radius: calc(infinity * 1px); 190 + background-color: var(--color-base-100); 191 + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); 192 + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); 193 + --tw-shadow-color: var(--color-base-300); 194 + @supports (color: color-mix(in lab, red, red)) { 195 + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); 196 + } 197 + transition-property: all; 198 + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); 199 + transition-timing-function: var(--ease-in-out); 200 + transition-duration: var(--tw-duration, var(--default-transition-duration)); 201 + transition-duration: 150ms; 202 + --tw-duration: 150ms; 203 + --tw-ease: var(--ease-in-out); 204 + &:hover { 205 + @media (hover: hover) { 206 + --tw-scale-x: 125%; 207 + --tw-scale-y: 125%; 208 + --tw-scale-z: 125%; 209 + scale: var(--tw-scale-x) var(--tw-scale-y); 210 + } 211 + cursor: grab; 212 + box-shadow: 0 0 0 2px var(--range-color); 213 + } 214 + &:active { 215 + --tw-scale-x: 125%; 216 + --tw-scale-y: 125%; 217 + --tw-scale-z: 125%; 218 + scale: var(--tw-scale-x) var(--tw-scale-y); 219 + cursor: grabbing; 220 + box-shadow: 0 0 0 3px var(--range-color); 221 + } 222 + appearance: none; 223 + box-sizing: border-box; 224 + webkit-appearance: none; 225 + color: var(--range-color); 226 + border-color: var(--range-color); 227 + border-style: solid; 228 + border-width: var(--range-thumb-border-width); 229 + height: var(--range-thumb-size); 230 + width: var(--range-thumb-size); 231 + } 232 + &::-moz-range-thumb { 233 + position: relative; 234 + border-radius: calc(infinity * 1px); 235 + background-color: var(--color-base-100); 236 + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); 237 + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); 238 + transition-property: all; 239 + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); 240 + transition-timing-function: var(--ease-in-out); 241 + transition-duration: var(--tw-duration, var(--default-transition-duration)); 242 + transition-duration: 150ms; 243 + --tw-duration: 150ms; 244 + --tw-ease: var(--ease-in-out); 245 + top: 50%; 246 + color: var(--range-color); 247 + box-sizing: border-box; 248 + border-color: var(--range-color); 249 + border-style: solid; 250 + border-width: var(--range-thumb-border-width); 251 + height: var(--range-thumb-size); 252 + width: var(--range-thumb-size); 253 + &:hover { 254 + cursor: grab; 255 + box-shadow: 0 0 0 2px var(--range-color); 256 + } 257 + &:active { 258 + cursor: grabbing; 259 + box-shadow: 0 0 0 3px var(--range-color); 260 + } 261 + } 262 + &:focus { 263 + outline: none; 264 + } 265 + &.disabled { 266 + pointer-events: none; 267 + opacity: 50%; 268 + } 269 + &:disabled { 270 + pointer-events: none; 271 + opacity: 50%; 272 + } 273 + &[disabled] { 274 + pointer-events: none; 275 + opacity: 50%; 276 + } 277 + [dir="rtl"] &::-webkit-slider-thumb { 278 + transform: scaleX(-1); 279 + } 280 + [dir="rtl"] &::-moz-range-thumb { 281 + transform: scaleX(-1); 282 + } 283 + [dir="rtl"] &::-webkit-slider-runnable-track { 284 + direction: rtl; 285 + } 286 + [dir="rtl"] &::-moz-range-track { 287 + direction: rtl; 288 + } 289 + } 290 + .tab { 291 + .tabs-lifted > &:focus-visible { 292 + border-end-end-radius: 0; 293 + border-end-start-radius: 0; 294 + } 295 + position: relative; 296 + display: inline-flex; 297 + cursor: pointer; 298 + appearance: none; 299 + align-items: center; 300 + justify-content: center; 301 + text-align: center; 302 + font-size: var(--text-base); 303 + line-height: var(--tw-leading, var(--text-base--line-height)); 304 + color: var(--color-base-content); 305 + webkit-user-select: none; 306 + user-select: none; 307 + height: var(--size); 308 + --size: calc(var(--size-field, 0.25rem) * 9.5); 309 + --tab-p: 1rem; 310 + --tab-bg: var(--color-base-100); 311 + --tab-border-color: var(--color-base-content); 312 + @supports (color: color-mix(in lab, red, red)) { 313 + --tab-border-color: color-mix(in oklab, var(--color-base-content), #0000 90%); 314 + } 315 + padding-inline: var(--tab-p, 1rem); 316 + &:focus, &:focus-visible { 317 + --tw-outline-style: none; 318 + outline-style: none; 319 + } 320 + &[disabled] { 321 + pointer-events: none; 322 + opacity: 40%; 323 + } 324 + @media (hover: hover) { 325 + &[disabled]:hover { 326 + pointer-events: none; 327 + opacity: 40%; 328 + } 329 + } 330 + .tabs-bordered > & { 331 + border-color: var(--color-base-content); 332 + @supports (color: color-mix(in lab, red, red)) { 333 + border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); 334 + } 335 + @media (hover:hover) { 336 + &:hover { 337 + @media (hover: hover) { 338 + border-color: var(--color-primary); 339 + @supports (color: color-mix(in lab, red, red)) { 340 + border-color: color-mix(in oklab, var(--color-primary) 30%, transparent); 341 + } 342 + } 343 + } 344 + } 345 + @media (hover:hover) { 346 + &:hover { 347 + @media (hover: hover) { 348 + color: var(--color-primary); 349 + } 350 + } 351 + } 352 + border-style: solid; 353 + border-bottom-width: calc(var(--border, 1px) + 1px); 354 + } 355 + .tabs-lifted > & { 356 + @media (hover:hover) { 357 + &:hover { 358 + @media (hover: hover) { 359 + border-color: var(--color-primary); 360 + @supports (color: color-mix(in lab, red, red)) { 361 + border-color: color-mix(in oklab, var(--color-primary) 30%, transparent); 362 + } 363 + } 364 + } 365 + } 366 + @media (hover:hover) { 367 + &:hover { 368 + @media (hover: hover) { 369 + color: var(--color-primary); 370 + } 371 + } 372 + } 373 + border: var(--tab-border, 1px) solid transparent; 374 + border-width: 0 0 var(--tab-border, 1px) 0; 375 + border-radius: var(--radius-field, 0.375rem); 376 + border-bottom-color: var(--tab-border-color); 377 + padding-inline-start: var(--tab-p, 1rem); 378 + padding-inline-end: var(--tab-p, 1rem); 379 + padding-top: var(--tab-border, 1px); 380 + } 381 + .tabs-lifted > &.tab-active:not([disabled]) { 382 + background-color: var(--tab-bg); 383 + border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px); 384 + border-color: var(--tab-border-color); 385 + border-end-start-radius: 0; 386 + border-end-end-radius: 0; 387 + padding-inline-start: calc(var(--tab-p, 1rem) - var(--tab-border, 1px)); 388 + padding-inline-end: calc(var(--tab-p, 1rem) - var(--tab-border, 1px)); 389 + padding-bottom: var(--tab-border, 1px); 390 + padding-top: 0; 391 + } 392 + .tabs-lifted > &.tab-active:not([disabled]):before { 393 + content: ""; 394 + display: block; 395 + position: absolute; 396 + z-index: 1; 397 + width: calc(100% + var(--radius-field, 0.375rem) * 2); 398 + height: var(--radius-field, 0.375rem); 399 + bottom: 0; 400 + background-size: var(--radius-field, 0.375rem); 401 + background-repeat: no-repeat; 402 + background-position: top left, top right; 403 + --tab-grad: calc(69% - var(--tab-border, 1px)); 404 + --radius-start: radial-gradient( 405 + circle at top left, 406 + transparent var(--tab-grad), 407 + var(--tab-border-color) calc(var(--tab-grad) + 0.25px), 408 + var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), 409 + var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px) 410 + ); 411 + --radius-end: radial-gradient( 412 + circle at top right, 413 + transparent var(--tab-grad), 414 + var(--tab-border-color) calc(var(--tab-grad) + 0.25px), 415 + var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), 416 + var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px) 417 + ); 418 + background-image: var(--radius-start), var(--radius-end); 419 + } 420 + .tabs-lifted > &.tab-active:not([disabled]):first-child:before { 421 + background-image: var(--radius-end); 422 + background-position: top right; 423 + } 424 + .tabs-lifted > &.tab-active:not([disabled]):last-child:before { 425 + background-image: var(--radius-start); 426 + background-position: top left; 427 + } 428 + [dir="rtl"] .tabs-lifted > &.tab-active:not([disabled]):first-child:before { 429 + background-image: var(--radius-start); 430 + background-position: top left; 431 + } 432 + [dir="rtl"] .tabs-lifted > &.tab-active:not([disabled]):last-child:before { 433 + background-image: var(--radius-end); 434 + background-position: top right; 435 + } 436 + .tabs-xl :where(&) { 437 + font-size: var(--text-xl); 438 + line-height: var(--tw-leading, var(--text-xl--line-height)); 439 + --size: calc(var(--size-field, 0.25rem) * 14); 440 + --tab-p: 1.5rem; 441 + } 442 + .tabs-lg :where(&) { 443 + font-size: var(--text-lg); 444 + line-height: var(--tw-leading, var(--text-lg--line-height)); 445 + --size: calc(var(--size-field, 0.25rem) * 11.5); 446 + --tab-p: 1.25rem; 447 + } 448 + .tabs-md :where(&) { 449 + font-size: var(--text-base); 450 + line-height: var(--tw-leading, var(--text-base--line-height)); 451 + --size: calc(var(--size-field, 0.25rem) * 9.5); 452 + --tab-p: 1rem; 453 + } 454 + .tabs-sm :where(&) { 455 + font-size: var(--text-sm); 456 + line-height: var(--tw-leading, var(--text-sm--line-height)); 457 + --size: calc(var(--size-field, 0.25rem) * 7.5); 458 + --tab-p: 0.75rem; 459 + } 460 + .tabs-xs :where(&) { 461 + font-size: var(--text-sm); 462 + line-height: var(--tw-leading, var(--text-sm--line-height)); 463 + --size: calc(var(--size-field, 0.25rem) * 6); 464 + --tab-p: 0.5rem; 465 + } 466 + } 467 + .btn { 468 + display: inline-flex; 469 + flex-shrink: 0; 470 + cursor: pointer; 471 + flex-wrap: nowrap; 472 + align-items: center; 473 + justify-content: center; 474 + gap: calc(0.25rem * 2); 475 + text-align: center; 476 + vertical-align: middle; 477 + font-size: var(--text-base); 478 + line-height: var(--tw-leading, var(--text-base--line-height)); 479 + --tw-font-weight: var(--font-weight-medium); 480 + font-weight: var(--font-weight-medium); 481 + text-decoration-line: none; 482 + webkit-user-select: none; 483 + user-select: none; 484 + @media (prefers-reduced-motion: reduce) { 485 + transition-property: none; 486 + } 487 + padding-inline: var(--btn-p); 488 + color: var(--btn-fg); 489 + height: var(--size); 490 + outline-color: var(--btn-color, var(--color-neutral)); 491 + @supports (color: color-mix(in lab, red, red)) { 492 + outline-color: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 30%, var(--color-base-100)); 493 + } 494 + transition-property: color, background-color, border-color, box-shadow; 495 + transition-timing-function: cubic-bezier(0, 0, 0.96, 1.03); 496 + transition-duration: 0.25s; 497 + border-start-start-radius: var(--join-ss, var(--radius-field)); 498 + border-start-end-radius: var(--join-se, var(--radius-field)); 499 + border-end-start-radius: var(--join-es, var(--radius-field)); 500 + border-end-end-radius: var(--join-ee, var(--radius-field)); 501 + background-color: var(--btn-bg); 502 + background-size: auto, calc(var(--noise) * 100%); 503 + background-image: none, var(--btn-noise); 504 + border: var(--border) solid var(--btn-border); 505 + box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 8%)) inset, var(--btn-shadow); 506 + --size: calc(var(--size-field, 0.25rem) * 9.5); 507 + --btn-bg: var(--btn-color, var(--color-neutral)); 508 + --btn-fg: var(--color-neutral-content); 509 + --btn-p: 1rem; 510 + --btn-border: var(--btn-bg); 511 + @supports (color: color-mix(in lab, red, red)) { 512 + --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); 513 + } 514 + --btn-shadow: 0px 1px 3px 0px var(--color-base-300), 515 + 0px 1px 2px -1px var(--color-base-300); 516 + @supports (color: color-mix(in lab, red, red)) { 517 + --btn-shadow: 0px 1px 3px 0px color-mix(in oklab, var(--color-base-300) 40%, #0000), 518 + 0px 1px 2px -1px color-mix(in oklab, var(--color-base-300) 40%, #0000); 519 + } 520 + --btn-noise: var(--fx-noise); 521 + @media (hover: hover) { 522 + &:hover { 523 + --btn-bg: var(--btn-color, var(--color-neutral)); 524 + @supports (color: color-mix(in lab, red, red)) { 525 + --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 90%, #000); 526 + } 527 + } 528 + } 529 + &:active:hover:not(.btn-active), &:active:focus:not(.btn-active) { 530 + --tw-scale-x: 95%; 531 + --tw-scale-y: 95%; 532 + --tw-scale-z: 95%; 533 + scale: var(--tw-scale-x) var(--tw-scale-y); 534 + transition-property: transform, translate, scale, rotate; 535 + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); 536 + transition-timing-function: ease-out; 537 + transition-duration: var(--tw-duration, var(--default-transition-duration)); 538 + transition-duration: 300ms; 539 + --tw-duration: 300ms; 540 + } 541 + &:focus-visible { 542 + --btn-bg: var(--btn-color, var(--color-neutral)); 543 + @supports (color: color-mix(in lab, red, red)) { 544 + --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)), #000 10%); 545 + } 546 + outline-width: 2px; 547 + outline-style: solid; 548 + } 549 + &:is(:disabled, [disabled], .btn-disabled) { 550 + pointer-events: none; 551 + opacity: 50%; 552 + --tw-shadow: 0 0 #0000; 553 + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); 554 + } 555 + &:is(input[type="checkbox"], input[type="radio"]) { 556 + appearance: none; 557 + &::after { 558 + content: attr(aria-label); 559 + } 560 + &:checked { 561 + background: var(--color-primary); 562 + color: var(--color-primary-content); 563 + outline-color: var(--color-primary); 564 + --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0); 565 + isolation: isolate; 566 + } 567 + } 568 + } 569 + .pin-input { 570 + border-radius: var(--radius-field); 571 + border-style: var(--tw-border-style); 572 + border-width: 1px; 573 + border-color: var(--color-base-content); 574 + @supports (color: color-mix(in lab, red, red)) { 575 + border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent); 576 + } 577 + background-color: var(--color-base-100); 578 + text-align: center; 579 + font-size: var(--text-base); 580 + line-height: var(--tw-leading, var(--text-base--line-height)); 581 + &::placeholder { 582 + color: var(--color-base-content); 583 + @supports (color: color-mix(in lab, red, red)) { 584 + color: color-mix(in oklab, var(--color-base-content) 80%, transparent); 585 + } 586 + } 587 + height: var(--size); 588 + width: var(--size); 589 + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 590 + --size: calc(var(--size-field, 0.25rem) * 9.5); 591 + &:hover:not(:focus, :focus-within) { 592 + border-color: var(--color-base-content); 593 + @supports (color: color-mix(in lab, red, red)) { 594 + border-color: color-mix(in oklab, var(--color-base-content) 60%, transparent); 595 + } 596 + } 597 + &:focus, &:focus-within { 598 + border-color: var(--color-primary); 599 + --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); 600 + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); 601 + --tw-shadow-color: var(--color-primary); 602 + @supports (color: color-mix(in lab, red, red)) { 603 + --tw-shadow-color: color-mix(in oklab, var(--color-primary) 30%, #0000); 604 + } 605 + outline: 1px solid var(--color-primary); 606 + isolation: isolate; 607 + } 608 + &.disabled, &:disabled, &[disabled] { 609 + pointer-events: none; 610 + border-color: var(--color-base-content); 611 + @supports (color: color-mix(in lab, red, red)) { 612 + border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent); 613 + } 614 + background-color: var(--color-base-content); 615 + @supports (color: color-mix(in lab, red, red)) { 616 + background-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); 617 + } 618 + color: var(--color-base-content); 619 + @supports (color: color-mix(in lab, red, red)) { 620 + color: color-mix(in oklab, var(--color-base-content) 50%, transparent); 621 + } 622 + &::placeholder { 623 + color: var(--color-base-content); 624 + @supports (color: color-mix(in lab, red, red)) { 625 + color: color-mix(in oklab, var(--color-base-content) 40%, transparent); 626 + } 627 + } 628 + } 629 + } 630 + .dropdown-item { 631 + clear: both; 632 + display: flex; 633 + width: 100%; 634 + align-items: center; 635 + column-gap: calc(0.25rem * 2); 636 + border-radius: var(--radius-field); 637 + background-color: transparent; 638 + padding-inline: calc(0.25rem * 4); 639 + padding-block: calc(0.25rem * 2.5); 640 + color: var(--color-base-content); 641 + text-decoration-line: none; 642 + text-decoration-thickness: 0px; 643 + text-align: inherit; 644 + &:hover:not(.dropdown-active), &:focus:not(.dropdown-active), &:focus-within:not(.dropdown-active), &:focus-visible:not(.dropdown-active) { 645 + background-color: var(--color-neutral); 646 + @supports (color: color-mix(in lab, red, red)) { 647 + background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); 648 + } 649 + --tw-outline-style: none; 650 + outline-style: none; 651 + } 652 + &.dropdown-disabled, &:disabled, &[disabled] { 653 + pointer-events: none; 654 + background-color: var(--color-neutral); 655 + @supports (color: color-mix(in lab, red, red)) { 656 + background-color: color-mix(in oklab, var(--color-neutral) 5%, transparent); 657 + } 658 + color: var(--color-base-content); 659 + @supports (color: color-mix(in lab, red, red)) { 660 + color: color-mix(in oklab, var(--color-base-content) 50%, transparent); 661 + } 662 + } 663 + } 664 + .loading { 665 + pointer-events: none; 666 + display: inline-block; 667 + aspect-ratio: 1 / 1; 668 + background-color: currentColor; 669 + vertical-align: middle; 670 + width: calc(var(--size-selector, 0.25rem) * 6); 671 + mask-size: 100%; 672 + mask-repeat: no-repeat; 673 + mask-position: center; 674 + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); 675 + } 676 + .accordion-toggle { 677 + width: 100%; 678 + cursor: pointer; 679 + padding-inline: calc(0.25rem * 5); 680 + padding-block: calc(0.25rem * 4); 681 + font-size: var(--text-lg); 682 + line-height: var(--tw-leading, var(--text-lg--line-height)); 683 + --tw-font-weight: var(--font-weight-medium); 684 + font-weight: var(--font-weight-medium); 685 + color: var(--color-base-content); 686 + &:disabled { 687 + pointer-events: none; 688 + opacity: 50%; 689 + } 690 + } 691 + .disabled { 692 + .range& { 693 + pointer-events: none; 694 + opacity: 50%; 695 + } 696 + } 697 + .disabled { 698 + .carousel-prev& { 699 + pointer-events: none; 700 + } 701 + .carousel-next& { 702 + pointer-events: none; 703 + } 704 + } 705 + .tooltip-content { 706 + visibility: hidden; 707 + position: absolute; 708 + display: inline-block; 709 + padding: calc(0.25rem * 2); 710 + opacity: 0%; 711 + transition-property: opacity; 712 + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); 713 + transition-duration: var(--tw-duration, var(--default-transition-duration)); 714 + width: max-content; 715 + z-index: 20; 716 + } 717 + .collapse { 718 + visibility: collapse; 719 + } 720 + .collapse { 721 + &:not(td):not(tr):not(colgroup) { 722 + visibility: visible; 723 + } 724 + } 725 + .invisible { 726 + visibility: hidden; 727 + } 728 + .table { 729 + position: relative; 730 + width: 100%; 731 + overflow-x: hidden; 732 + overflow-y: auto; 733 + border-radius: var(--radius-box); 734 + text-align: left; 735 + font-size: var(--text-sm); 736 + line-height: var(--tw-leading, var(--text-sm--line-height)); 737 + &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { 738 + text-align: right; 739 + } 740 + tr.row-hover { 741 + &, &:nth-child(even) { 742 + &:hover { 743 + @media (hover: hover) { 744 + background-color: var(--color-base-200); 745 + @supports (color: color-mix(in lab, red, red)) { 746 + background-color: color-mix(in oklab, var(--color-base-200) 80%, transparent); 747 + } 748 + } 749 + } 750 + } 751 + } 752 + tr.row-active { 753 + &, &:nth-child(even) { 754 + background-color: var(--color-base-200); 755 + } 756 + } 757 + :where(th, td) { 758 + padding-inline: calc(0.25rem * 5); 759 + padding-block: calc(0.25rem * 3); 760 + vertical-align: middle; 761 + text-wrap: nowrap; 762 + } 763 + :where(thead, tfoot) { 764 + font-size: var(--text-sm); 765 + line-height: var(--tw-leading, var(--text-sm--line-height)); 766 + white-space: nowrap; 767 + color: var(--color-base-content); 768 + text-transform: uppercase; 769 + letter-spacing: 1px; 770 + } 771 + :where(th) { 772 + --tw-font-weight: var(--font-weight-medium); 773 + font-weight: var(--font-weight-medium); 774 + } 775 + :where(.table-pin-rows thead tr) { 776 + position: sticky; 777 + top: calc(0.25rem * 0); 778 + z-index: 1; 779 + background-color: var(--color-base-100); 780 + } 781 + :where(.table-pin-rows tfoot tr) { 782 + position: sticky; 783 + bottom: calc(0.25rem * 0); 784 + z-index: 1; 785 + background-color: var(--color-base-100); 786 + } 787 + :where(.table-pin-cols tr th) { 788 + position: sticky; 789 + right: calc(0.25rem * 0); 790 + left: calc(0.25rem * 0); 791 + background-color: var(--color-base-100); 792 + } 793 + :where(thead tr) { 794 + border-bottom: var(--border) solid var(--color-base-content); 795 + @supports (color: color-mix(in lab, red, red)) { 796 + border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 25%, #0000); 797 + } 798 + } 799 + :where(tbody tr:not(:last-child)) { 800 + border-bottom: var(--border) solid var(--color-base-content); 801 + @supports (color: color-mix(in lab, red, red)) { 802 + border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 10%, #0000); 803 + } 804 + } 805 + :where(tfoot) { 806 + border-top: var(--border) solid var(--color-base-content); 807 + @supports (color: color-mix(in lab, red, red)) { 808 + border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 25%, #0000); 809 + } 810 + } 811 + } 812 + .select { 813 + position: relative; 814 + display: inline-flex; 815 + width: 100%; 816 + flex-shrink: 1; 817 + cursor: pointer; 818 + appearance: none; 819 + background-color: var(--color-base-100); 820 + padding-inline-start: calc(0.25rem * 3); 821 + padding-inline-end: calc(0.25rem * 10); 822 + vertical-align: middle; 823 + font-size: var(--text-base); 824 + line-height: var(--tw-leading, var(--text-base--line-height)); 825 + color: var(--color-base-content); 826 + webkit-user-select: none; 827 + user-select: none; 828 + height: var(--size); 829 + border-start-start-radius: var(--join-ss, var(--radius-field)); 830 + border-start-end-radius: var(--join-se, var(--radius-field)); 831 + border-end-start-radius: var(--join-es, var(--radius-field)); 832 + border-end-end-radius: var(--join-ee, var(--radius-field)); 833 + background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'><path fill='none' stroke='%239293AE' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/></svg>"); 834 + background-size: 1.3em; 835 + background-position: calc(100% - 0.5rem) center; 836 + background-repeat: no-repeat; 837 + touch-action: manipulation; 838 + text-overflow: ellipsis; 839 + border: var(--border) solid #0000; 840 + border-color: var(--input-color); 841 + --input-color: var(--color-base-content); 842 + @supports (color: color-mix(in lab, red, red)) { 843 + --input-color: color-mix(in oklab, var(--color-base-content) 40%, #0000); 844 + } 845 + --size: calc(var(--size-field, 0.25rem) * 9.5); 846 + &:hover:not(:focus, :focus-within), &:has(:hover):not(:focus, :focus-within) { 847 + border-color: var(--color-base-content); 848 + @supports (color: color-mix(in lab, red, red)) { 849 + border-color: color-mix(in oklab, var(--color-base-content) 60%, transparent); 850 + } 851 + } 852 + [dir="rtl"] & { 853 + background-position: calc(0% + 1.3em) center; 854 + } 855 + select { 856 + margin-inline-end: calc(0.25rem * -10); 857 + height: 100%; 858 + width: calc(100% + 2.75rem); 859 + appearance: none; 860 + padding-inline-start: calc(0.25rem * 3); 861 + padding-inline-end: calc(0.25rem * 10); 862 + background-color: transparent; 863 + border-style: none; 864 + &:focus, &:focus-within { 865 + --tw-outline-style: none; 866 + outline-style: none; 867 + } 868 + } 869 + &[multiple] { 870 + background-image: none; 871 + } 872 + &:focus, &:focus-within { 873 + --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); 874 + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); 875 + --input-color: var(--color-primary); 876 + --tw-shadow-color: var(--input-color); 877 + @supports (color: color-mix(in lab, red, red)) { 878 + --tw-shadow-color: color-mix(in oklab, var(--input-color) 30%, #0000); 879 + } 880 + outline: 1px solid var(--input-color); 881 + border-color: var(--input-color); 882 + isolation: isolate; 883 + } 884 + &:has(> select[disabled]), &:is(:disabled, [disabled]) { 885 + cursor: not-allowed; 886 + border-style: var(--tw-border-style); 887 + border-width: 0px; 888 + border-color: var(--color-base-content); 889 + @supports (color: color-mix(in lab, red, red)) { 890 + border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); 891 + } 892 + background-color: var(--color-neutral); 893 + @supports (color: color-mix(in lab, red, red)) { 894 + background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); 895 + } 896 + color: var(--color-base-content); 897 + @supports (color: color-mix(in lab, red, red)) { 898 + color: color-mix(in oklab, var(--color-base-content) 50%, transparent); 899 + } 900 + &::placeholder { 901 + color: var(--color-base-content); 902 + @supports (color: color-mix(in lab, red, red)) { 903 + color: color-mix(in oklab, var(--color-base-content) 50%, transparent); 904 + } 905 + } 906 + } 907 + &:has(> select[disabled]) > select[disabled] { 908 + cursor: not-allowed; 909 + } 910 + .input > & { 911 + height: auto; 912 + border-style: var(--tw-border-style); 913 + border-width: 0px; 914 + &:focus, &:focus-within { 915 + --tw-shadow: 0 0 #0000; 916 + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); 917 + outline-style: var(--tw-outline-style); 918 + outline-width: 0px; 919 + } 920 + } 921 + &:has(> .select-floating) select { 922 + &::placeholder { 923 + color: transparent; 924 + } 925 + &:focus { 926 + &::placeholder { 927 + color: var(--color-base-content); 928 + @supports (color: color-mix(in lab, red, red)) { 929 + color: color-mix(in oklab, var(--color-base-content) 50%, transparent); 930 + } 931 + } 932 + } 933 + } 934 + } 935 + .avatar { 936 + position: relative; 937 + display: inline-flex; 938 + vertical-align: middle; 939 + font-size: var(--text-base); 940 + line-height: var(--tw-leading, var(--text-base--line-height)); 941 + & > div { 942 + display: block; 943 + aspect-ratio: 1 / 1; 944 + overflow: hidden; 945 + } 946 + & > span { 947 + display: block; 948 + aspect-ratio: 1 / 1; 949 + overflow: hidden; 950 + } 951 + :where(&) img { 952 + height: 100%; 953 + width: 100%; 954 + object-fit: cover; 955 + } 956 + } 957 + .checkbox { 958 + position: relative; 959 + flex-shrink: 0; 960 + cursor: pointer; 961 + appearance: none; 962 + border-radius: var(--radius-selector); 963 + padding: calc(0.25rem * 1); 964 + vertical-align: middle; 965 + color: var(--color-neutral-content); 966 + border: var(--border) solid var(--color-base-content); 967 + @supports (color: color-mix(in lab, red, red)) { 968 + border: var(--border) solid color-mix(in oklab, var(--color-base-content) 40%, #0000); 969 + } 970 + --input-color: var(--color-neutral); 971 + box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 #0000 inset, 0 0 #0000; 972 + transition: background-color 0.2s, box-shadow 0.2s; 973 + --size: calc(var(--size-selector, 0.25rem) * 6); 974 + width: var(--size); 975 + height: var(--size); 976 + background-size: auto, calc(var(--noise) * 100%); 977 + background-image: none, var(--fx-noise); 978 + &:before { 979 + --tw-content: ""; 980 + content: var(--tw-content); 981 + display: block; 982 + width: 100%; 983 + height: 100%; 984 + rotate: 45deg; 985 + background-color: currentColor; 986 + opacity: 0%; 987 + transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s; 988 + transition-delay: 0.1s; 989 + clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%); 990 + box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; 991 + font-size: 1rem; 992 + line-height: 0.75; 993 + } 994 + &:focus-visible { 995 + outline: 2px solid var(--input-color, var(--color-neutral)); 996 + @supports (color: color-mix(in lab, red, red)) { 997 + outline: 2px solid color-mix(in oklab, var(--input-color, var(--color-neutral)) 30%, #0000); 998 + } 999 + outline-offset: 0px; 1000 + } 1001 + &:checked, &[aria-checked="true"] { 1002 + background-color: var(--input-color, #0000); 1003 + border-color: var(--input-color, #0000); 1004 + box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px 2px 0 var(--color-base-300); 1005 + @supports (color: color-mix(in lab, red, red)) { 1006 + box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px 2px 0 color-mix(in oklab, var(--color-base-300) 20%, #0000); 1007 + } 1008 + &:before { 1009 + clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%); 1010 + opacity: 100%; 1011 + } 1012 + @media (forced-colors: active) { 1013 + &:before { 1014 + rotate: 0deg; 1015 + background-color: transparent; 1016 + --tw-content: "✔︎"; 1017 + clip-path: none; 1018 + } 1019 + } 1020 + @media print { 1021 + &:before { 1022 + rotate: 0deg; 1023 + background-color: transparent; 1024 + --tw-content: "✔︎"; 1025 + clip-path: none; 1026 + } 1027 + } 1028 + } 1029 + &:indeterminate { 1030 + background-color: var(--color-neutral); 1031 + &:before { 1032 + rotate: 0deg; 1033 + opacity: 100%; 1034 + translate: 0 -35%; 1035 + clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%); 1036 + } 1037 + } 1038 + &:disabled { 1039 + cursor: not-allowed; 1040 + opacity: 50%; 1041 + } 1042 + } 1043 + .carousel { 1044 + position: relative; 1045 + width: 100%; 1046 + overflow: hidden; 1047 + border-radius: var(--radius-2xl); 1048 + } 3 1049 .absolute { 4 1050 position: absolute; 5 1051 } 1052 + .fixed { 1053 + position: fixed; 1054 + } 1055 + .relative { 1056 + position: relative; 1057 + } 1058 + .static { 1059 + position: static; 1060 + } 1061 + .sticky { 1062 + position: sticky; 1063 + } 6 1064 .top-\[0\] { 7 1065 top: 0; 8 1066 } 1067 + .top-full { 1068 + top: 100%; 1069 + } 9 1070 .right-\[0\] { 10 1071 right: 0; 11 1072 } 1073 + .bottom-full { 1074 + bottom: 100%; 1075 + } 1076 + .input { 1077 + display: inline-flex; 1078 + width: 100%; 1079 + flex-shrink: 1; 1080 + cursor: text; 1081 + appearance: none; 1082 + background-color: var(--color-base-100); 1083 + padding-inline: calc(0.25rem * 3); 1084 + font-size: var(--text-base); 1085 + line-height: var(--tw-leading, var(--text-base--line-height)); 1086 + --tw-font-weight: var(--font-weight-normal); 1087 + font-weight: var(--font-weight-normal); 1088 + color: var(--color-base-content); 1089 + &::placeholder { 1090 + color: var(--color-base-content); 1091 + @supports (color: color-mix(in lab, red, red)) { 1092 + color: color-mix(in oklab, var(--color-base-content) 50%, transparent); 1093 + } 1094 + } 1095 + &:focus-visible { 1096 + --tw-outline-style: none; 1097 + outline-style: none; 1098 + } 1099 + border: var(--border) solid #0000; 1100 + height: var(--size); 1101 + touch-action: manipulation; 1102 + border-start-start-radius: var(--join-ss, var(--radius-field)); 1103 + border-start-end-radius: var(--join-se, var(--radius-field)); 1104 + border-end-start-radius: var(--join-es, var(--radius-field)); 1105 + border-end-end-radius: var(--join-ee, var(--radius-field)); 1106 + border-color: var(--input-color); 1107 + --input-color: var(--color-base-content); 1108 + @supports (color: color-mix(in lab, red, red)) { 1109 + --input-color: color-mix(in oklab, var(--color-base-content) 40%, #0000); 1110 + } 1111 + --size: calc(var(--size-field, 0.25rem) * 9.5); 1112 + &:hover:not(:focus, :focus-within), &:has(:hover):not(:focus, :focus-within) { 1113 + border-color: var(--color-base-content); 1114 + @supports (color: color-mix(in lab, red, red)) { 1115 + border-color: color-mix(in oklab, var(--color-base-content) 60%, transparent); 1116 + } 1117 + } 1118 + &:where(input) { 1119 + display: inline-block; 1120 + } 1121 + :where(input:not([type="checkbox"]):not([type="radio"])) { 1122 + display: inline-block; 1123 + height: 100%; 1124 + width: 100%; 1125 + appearance: none; 1126 + background-color: transparent; 1127 + border: none; 1128 + &:focus, &:focus-within, &:focus-visible { 1129 + --tw-outline-style: none; 1130 + outline-style: none; 1131 + } 1132 + } 1133 + &:focus, &:focus-within { 1134 + --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); 1135 + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); 1136 + --input-color: var(--color-primary); 1137 + --tw-shadow-color: var(--input-color); 1138 + @supports (color: color-mix(in lab, red, red)) { 1139 + --tw-shadow-color: color-mix(in oklab, var(--input-color) 30%, #0000); 1140 + } 1141 + outline: 1px solid var(--input-color); 1142 + isolation: isolate; 1143 + } 1144 + &:has(> input[disabled]), &:is(:disabled, [disabled]) { 1145 + cursor: not-allowed; 1146 + border-style: var(--tw-border-style); 1147 + border-width: 0px; 1148 + background-color: var(--color-neutral); 1149 + @supports (color: color-mix(in lab, red, red)) { 1150 + background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); 1151 + } 1152 + color: var(--color-base-content); 1153 + @supports (color: color-mix(in lab, red, red)) { 1154 + color: color-mix(in oklab, var(--color-base-content) 50%, transparent); 1155 + } 1156 + box-shadow: none; 1157 + } 1158 + &:has(> input[disabled]) > input[disabled] { 1159 + cursor: not-allowed; 1160 + } 1161 + &::-webkit-date-and-time-value { 1162 + text-align: inherit; 1163 + } 1164 + &[type="number"] { 1165 + &::-webkit-inner-spin-button { 1166 + margin-block: calc(0.25rem * -3); 1167 + margin-inline-end: calc(0.25rem * -3); 1168 + } 1169 + } 1170 + &:has(> .input-floating) input { 1171 + &::placeholder { 1172 + color: transparent; 1173 + } 1174 + &:focus { 1175 + &::placeholder { 1176 + color: var(--color-base-content); 1177 + @supports (color: color-mix(in lab, red, red)) { 1178 + color: color-mix(in oklab, var(--color-base-content) 50%, transparent); 1179 + } 1180 + } 1181 + } 1182 + } 1183 + } 1184 + .textarea { 1185 + display: inline-flex; 1186 + min-height: calc(0.25rem * 20); 1187 + width: 100%; 1188 + flex-shrink: 1; 1189 + appearance: none; 1190 + border-radius: var(--radius-field); 1191 + background-color: var(--color-base-100); 1192 + padding-inline: calc(0.25rem * 4); 1193 + padding-block: calc(0.25rem * 2); 1194 + font-size: var(--text-base); 1195 + line-height: var(--tw-leading, var(--text-base--line-height)); 1196 + color: var(--color-base-content); 1197 + &::placeholder { 1198 + color: var(--color-base-content); 1199 + @supports (color: color-mix(in lab, red, red)) { 1200 + color: color-mix(in oklab, var(--color-base-content) 50%, transparent); 1201 + } 1202 + } 1203 + &:hover { 1204 + @media (hover: hover) { 1205 + border-color: var(--color-base-content); 1206 + @supports (color: color-mix(in lab, red, red)) { 1207 + border-color: color-mix(in oklab, var(--color-base-content) 60%, transparent); 1208 + } 1209 + } 1210 + } 1211 + &:focus-visible { 1212 + --tw-outline-style: none; 1213 + outline-style: none; 1214 + } 1215 + border: var(--border) solid #0000; 1216 + border-color: var(--input-color); 1217 + touch-action: manipulation; 1218 + --input-color: var(--color-base-content); 1219 + @supports (color: color-mix(in lab, red, red)) { 1220 + --input-color: color-mix(in oklab, var(--color-base-content) 40%, #0000); 1221 + } 1222 + :where(textarea) { 1223 + appearance: none; 1224 + background-color: transparent; 1225 + border: none; 1226 + &:focus, &:focus-within { 1227 + --tw-outline-style: none; 1228 + outline-style: none; 1229 + } 1230 + } 1231 + &:focus, &:focus-within { 1232 + --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); 1233 + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); 1234 + --input-color: var(--color-primary); 1235 + --tw-shadow-color: var(--input-color); 1236 + @supports (color: color-mix(in lab, red, red)) { 1237 + --tw-shadow-color: color-mix(in oklab, var(--input-color) 30%, #0000); 1238 + } 1239 + outline: 1px solid var(--input-color); 1240 + border-color: var(--input-color); 1241 + isolation: isolate; 1242 + } 1243 + &:has(> textarea[disabled]), &:is(:disabled, [disabled]) { 1244 + cursor: not-allowed; 1245 + border-color: var(--color-base-200); 1246 + background-color: var(--color-base-200); 1247 + color: var(--color-base-content); 1248 + @supports (color: color-mix(in lab, red, red)) { 1249 + color: color-mix(in oklab, var(--color-base-content) 40%, transparent); 1250 + } 1251 + &::placeholder { 1252 + color: var(--color-base-content); 1253 + @supports (color: color-mix(in lab, red, red)) { 1254 + color: color-mix(in oklab, var(--color-base-content) 20%, transparent); 1255 + } 1256 + } 1257 + } 1258 + &:has(> textarea[disabled]) > textarea[disabled] { 1259 + cursor: not-allowed; 1260 + } 1261 + &:has(> textarea) { 1262 + padding: calc(0.25rem * 0); 1263 + textarea { 1264 + height: auto; 1265 + min-height: calc(0.25rem * 20); 1266 + width: 100%; 1267 + &:first-child { 1268 + padding-block: calc(0.25rem * 2); 1269 + padding-inline-start: calc(0.25rem * 4); 1270 + } 1271 + &:nth-child(2) { 1272 + padding-block: calc(0.25rem * 2); 1273 + } 1274 + &:last-child { 1275 + padding-block: calc(0.25rem * 2); 1276 + padding-inline-end: calc(0.25rem * 4); 1277 + } 1278 + } 1279 + } 1280 + &:has(> .textarea-floating) { 1281 + padding: calc(0.25rem * 0); 1282 + :where(.textarea-floating:first-child) > textarea { 1283 + padding-block: calc(0.25rem * 2); 1284 + padding-inline-start: calc(0.25rem * 4); 1285 + } 1286 + :where(.textarea-floating:nth-child(2)) > textarea { 1287 + padding-block: calc(0.25rem * 2); 1288 + } 1289 + :where(.textarea-floating:last-child) > textarea { 1290 + padding-block: calc(0.25rem * 2); 1291 + padding-inline-end: calc(0.25rem * 4); 1292 + } 1293 + :where(.textarea-floating:nth-child(2)) .textarea-floating-label, :where(.textarea-floating:last-child) .textarea-floating-label { 1294 + margin-inline-start: calc(0.25rem * 0); 1295 + } 1296 + & * > textarea { 1297 + width: 100%; 1298 + height: 100%; 1299 + min-height: calc(0.25rem * 20); 1300 + } 1301 + } 1302 + &:has(> .textarea-floating) textarea { 1303 + &::placeholder { 1304 + color: transparent; 1305 + } 1306 + &:focus { 1307 + &::placeholder { 1308 + color: var(--color-base-content); 1309 + @supports (color: color-mix(in lab, red, red)) { 1310 + color: color-mix(in oklab, var(--color-base-content) 50%, transparent); 1311 + } 1312 + } 1313 + } 1314 + } 1315 + } 1316 + .dropdown-menu { 1317 + z-index: 10; 1318 + margin-top: calc(0.25rem * 2); 1319 + :where(& > :not(:last-child)) { 1320 + --tw-space-y-reverse: 0; 1321 + margin-block-start: calc(calc(0.25rem * 1) * var(--tw-space-y-reverse)); 1322 + margin-block-end: calc(calc(0.25rem * 1) * calc(1 - var(--tw-space-y-reverse))); 1323 + } 1324 + border-radius: var(--radius-box); 1325 + background-color: var(--color-base-100); 1326 + padding: calc(0.25rem * 2); 1327 + font-size: var(--text-base); 1328 + line-height: var(--tw-leading, var(--text-base--line-height)); 1329 + text-wrap: nowrap; 1330 + opacity: 0%; 1331 + --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); 1332 + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); 1333 + --tw-shadow-color: var(--color-base-300); 1334 + @supports (color: color-mix(in lab, red, red)) { 1335 + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); 1336 + } 1337 + transition-property: opacity,margin; 1338 + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); 1339 + transition-duration: var(--tw-duration, var(--default-transition-duration)); 1340 + transition-duration: 300ms; 1341 + --tw-duration: 300ms; 1342 + } 1343 + .container { 1344 + width: 100%; 1345 + } 12 1346 .m-\[0px\] { 13 1347 margin: 0px; 14 1348 } 15 1349 .m-\[20px\] { 16 1350 margin: 20px; 17 1351 } 1352 + .filter { 1353 + display: flex; 1354 + flex-wrap: wrap; 1355 + input[type="radio"] { 1356 + width: auto; 1357 + } 1358 + input { 1359 + overflow: hidden; 1360 + opacity: 100%; 1361 + scale: 1; 1362 + border-width: 0; 1363 + transition: margin 0.1s, opacity 0.3s, padding 0.3s, border-width 0.1s; 1364 + &:not(:last-child) { 1365 + margin-inline-end: calc(0.25rem * 1); 1366 + } 1367 + &.filter-reset { 1368 + aspect-ratio: 1 / 1; 1369 + &::after { 1370 + content: "×"; 1371 + } 1372 + } 1373 + } 1374 + &:not(:has(input:checked:not(.filter-reset))) { 1375 + .filter-reset, input[type="reset"] { 1376 + scale: 0; 1377 + border-width: 0; 1378 + margin-inline: calc(0.25rem * 0); 1379 + width: calc(0.25rem * 0); 1380 + padding-inline: calc(0.25rem * 0); 1381 + opacity: 0%; 1382 + } 1383 + } 1384 + &:has(input:checked:not(.filter-reset)) { 1385 + input:not(:checked, .filter-reset, input[type="reset"]) { 1386 + scale: 0; 1387 + border-width: 0; 1388 + margin-inline: calc(0.25rem * 0); 1389 + width: calc(0.25rem * 0); 1390 + padding-inline: calc(0.25rem * 0); 1391 + opacity: 0%; 1392 + } 1393 + } 1394 + } 1395 + .\!ms-auto { 1396 + margin-inline-start: auto !important; 1397 + } 1398 + .input { 1399 + &::file-selector-button { 1400 + margin-inline-end: calc(0.25rem * 4); 1401 + display: inline-flex; 1402 + height: 100%; 1403 + flex-shrink: 0; 1404 + cursor: pointer; 1405 + flex-wrap: wrap; 1406 + align-items: center; 1407 + justify-content: center; 1408 + border-style: var(--tw-border-style); 1409 + border-width: 0px; 1410 + background-color: var(--color-primary); 1411 + padding-inline: calc(0.25rem * 4); 1412 + text-align: center; 1413 + font-size: var(--text-base); 1414 + line-height: var(--tw-leading, var(--text-base--line-height)); 1415 + --tw-leading: 1; 1416 + --tw-font-weight: var(--font-weight-semibold); 1417 + font-weight: var(--font-weight-semibold); 1418 + color: var(--color-primary-content); 1419 + text-transform: uppercase; 1420 + text-decoration-line: none; 1421 + webkit-user-select: none; 1422 + user-select: none; 1423 + --input-color: var(--color-primary); 1424 + &.input-sm { 1425 + font-size: var(--text-sm); 1426 + line-height: var(--tw-leading, var(--text-sm--line-height)); 1427 + } 1428 + &.input-md { 1429 + font-size: var(--text-base); 1430 + line-height: var(--tw-leading, var(--text-base--line-height)); 1431 + } 1432 + &.input-lg { 1433 + font-size: var(--text-lg); 1434 + line-height: var(--tw-leading, var(--text-lg--line-height)); 1435 + } 1436 + &.input-xl { 1437 + font-size: var(--text-xl); 1438 + line-height: var(--tw-leading, var(--text-xl--line-height)); 1439 + } 1440 + } 1441 + &[type="file"] { 1442 + overflow: hidden; 1443 + padding-inline-start: calc(0.25rem * 0); 1444 + } 1445 + .input-floating &::file-selector-button { 1446 + background-color: var(--color-base-100); 1447 + color: var(--color-base-content); 1448 + border-inline-end: var(--border) solid var(--color-base-content); 1449 + @supports (color: color-mix(in lab, red, red)) { 1450 + border-inline-end: var(--border) solid color-mix(in oklab, var(--color-base-content) 40%, #0000); 1451 + } 1452 + outline: none; 1453 + } 1454 + } 1455 + .mt-\[-2px\] { 1456 + margin-top: -2px; 1457 + } 1458 + .mt-\[-3px\] { 1459 + margin-top: -3px; 1460 + } 1461 + .mt-\[-5px\] { 1462 + margin-top: -5px; 1463 + } 1464 + .mt-\[-6px\] { 1465 + margin-top: -6px; 1466 + } 1467 + .mt-\[10px\] { 1468 + margin-top: 10px; 1469 + } 18 1470 .mr-\[5px\] { 19 1471 margin-right: 5px; 20 1472 } ··· 30 1482 .mr-\[25px\] { 31 1483 margin-right: 25px; 32 1484 } 1485 + .mb-\[15px\] { 1486 + margin-bottom: 15px; 1487 + } 33 1488 .mb-\[20px\] { 34 1489 margin-bottom: 20px; 35 1490 } 36 1491 .mb-\[25px\] { 37 1492 margin-bottom: 25px; 38 1493 } 1494 + .ml-\[5px\] { 1495 + margin-left: 5px; 1496 + } 1497 + .ml-\[10px\] { 1498 + margin-left: 10px; 1499 + } 1500 + .status { 1501 + display: inline-block; 1502 + aspect-ratio: 1 / 1; 1503 + width: calc(0.25rem * 2.5); 1504 + height: calc(0.25rem * 2.5); 1505 + border-radius: calc(infinity * 1px); 1506 + background-color: var(--color-neutral); 1507 + background-position: center; 1508 + background-repeat: no-repeat; 1509 + vertical-align: middle; 1510 + color: var(--color-neutral); 1511 + background-image: radial-gradient(circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * 0.5)), #0000); 1512 + box-shadow: 0 2px 3px -1px currentColor; 1513 + @supports (color: color-mix(in lab, red, red)) { 1514 + box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000); 1515 + } 1516 + } 1517 + .divider { 1518 + display: flex; 1519 + width: 100%; 1520 + align-items: center; 1521 + align-self: stretch; 1522 + font-size: var(--text-sm); 1523 + line-height: var(--tw-leading, var(--text-sm--line-height)); 1524 + white-space: nowrap; 1525 + &:not(:empty) { 1526 + gap: calc(0.25rem * 4); 1527 + } 1528 + &:before { 1529 + content: ""; 1530 + height: 1px; 1531 + width: 100%; 1532 + flex-grow: 1; 1533 + border-inline-end-style: var(--tw-border-style); 1534 + border-inline-end-width: 0px; 1535 + border-top-style: var(--tw-border-style); 1536 + border-top-width: 1px; 1537 + --tw-border-style: solid; 1538 + border-style: solid; 1539 + border-color: var(--color-base-content); 1540 + @supports (color: color-mix(in lab, red, red)) { 1541 + border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); 1542 + } 1543 + } 1544 + &:after { 1545 + content: ""; 1546 + height: 1px; 1547 + width: 100%; 1548 + flex-grow: 1; 1549 + border-inline-end-style: var(--tw-border-style); 1550 + border-inline-end-width: 0px; 1551 + border-top-style: var(--tw-border-style); 1552 + border-top-width: 1px; 1553 + --tw-border-style: solid; 1554 + border-style: solid; 1555 + border-color: var(--color-base-content); 1556 + @supports (color: color-mix(in lab, red, red)) { 1557 + border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); 1558 + } 1559 + } 1560 + } 1561 + .progress { 1562 + display: flex; 1563 + height: calc(0.25rem * 1.5); 1564 + width: 100%; 1565 + overflow: hidden; 1566 + border-radius: var(--radius-box); 1567 + background-color: var(--color-base-200); 1568 + } 1569 + .icon-\[tabler--trending-down\] { 1570 + display: inline-block; 1571 + width: 1em; 1572 + height: 1em; 1573 + background-color: currentColor; 1574 + -webkit-mask-image: var(--svg); 1575 + mask-image: var(--svg); 1576 + -webkit-mask-repeat: no-repeat; 1577 + mask-repeat: no-repeat; 1578 + -webkit-mask-size: 100% 100%; 1579 + mask-size: 100% 100%; 1580 + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m3 7l6 6l4-4l8 8'/%3E%3Cpath d='M21 10v7h-7'/%3E%3C/g%3E%3C/svg%3E"); 1581 + } 1582 + .icon-\[tabler--trending-up\] { 1583 + display: inline-block; 1584 + width: 1em; 1585 + height: 1em; 1586 + background-color: currentColor; 1587 + -webkit-mask-image: var(--svg); 1588 + mask-image: var(--svg); 1589 + -webkit-mask-repeat: no-repeat; 1590 + mask-repeat: no-repeat; 1591 + -webkit-mask-size: 100% 100%; 1592 + mask-size: 100% 100%; 1593 + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m3 17l6-6l4 4l8-8'/%3E%3Cpath d='M14 7h7v7'/%3E%3C/g%3E%3C/svg%3E"); 1594 + } 1595 + .tabs { 1596 + display: flex; 1597 + --tabs-height: auto; 1598 + --tabs-direction: row; 1599 + height: var(--tabs-height); 1600 + flex-direction: var(--tabs-direction); 1601 + } 1602 + .progress-bar { 1603 + display: flex; 1604 + align-items: center; 1605 + justify-content: center; 1606 + overflow: hidden; 1607 + border-radius: var(--radius-box); 1608 + background-color: var(--color-neutral); 1609 + font-size: var(--text-xs); 1610 + line-height: var(--tw-leading, var(--text-xs--line-height)); 1611 + --tw-font-weight: var(--font-weight-medium); 1612 + font-weight: var(--font-weight-medium); 1613 + white-space: nowrap; 1614 + color: var(--color-neutral-content); 1615 + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; 1616 + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); 1617 + transition-timing-function: var(--ease-in-out); 1618 + transition-duration: var(--tw-duration, var(--default-transition-duration)); 1619 + transition-duration: 500ms; 1620 + --tw-duration: 500ms; 1621 + --tw-ease: var(--ease-in-out); 1622 + &.progress-indeterminate { 1623 + width: 100%; 1624 + background: linear-gradient(90deg, rgba(0, 0, 0, 0) 50%, var(--progress-color) 50%); 1625 + background-size: 50% 100%; 1626 + background-repeat: no-repeat; 1627 + animation: indeterminate-progress 4s infinite ease-in-out; 1628 + } 1629 + } 1630 + .stats { 1631 + display: inline-grid; 1632 + grid-auto-flow: column; 1633 + :where(& > :not(:last-child)) { 1634 + --tw-divide-x-reverse: 0; 1635 + border-inline-style: var(--tw-border-style); 1636 + border-inline-start-width: calc(1px * var(--tw-divide-x-reverse)); 1637 + border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); 1638 + --tw-divide-y-reverse: 0; 1639 + border-bottom-style: var(--tw-border-style); 1640 + border-top-style: var(--tw-border-style); 1641 + border-top-width: calc(0px * var(--tw-divide-y-reverse)); 1642 + border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse))); 1643 + } 1644 + overflow-x: auto; 1645 + border-radius: var(--radius-box); 1646 + --tw-border-style: solid; 1647 + border-style: solid; 1648 + border-color: var(--color-base-content); 1649 + @supports (color: color-mix(in lab, red, red)) { 1650 + border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); 1651 + } 1652 + background-color: var(--color-base-100); 1653 + box-shadow: var( --card-shadow, 0 1px 3px 0 var(--color-base-300), 0 1px 2px -1px var(--color-base-300) ); 1654 + @supports (color: color-mix(in lab, red, red)) { 1655 + box-shadow: var( --card-shadow, 0 1px 3px 0 color-mix(in oklab, var(--color-base-300) 20%, #0000), 0 1px 2px -1px color-mix(in oklab, var(--color-base-300) 20%, #0000) ); 1656 + } 1657 + border-width: var(--card-border, 0px); 1658 + &:where(.stats-border) { 1659 + border: var(--border) solid var(--color-base-content); 1660 + @supports (color: color-mix(in lab, red, red)) { 1661 + border: var(--border) solid color-mix(in oklab, var(--color-base-content) 20%, transparent); 1662 + } 1663 + } 1664 + } 1665 + .carousel-body { 1666 + display: flex; 1667 + flex-wrap: nowrap; 1668 + transition-property: transform, translate, scale, rotate; 1669 + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); 1670 + transition-duration: var(--tw-duration, var(--default-transition-duration)); 1671 + transition-duration: 700ms; 1672 + --tw-duration: 700ms; 1673 + } 1674 + .tooltip { 1675 + display: inline-block; 1676 + text-align: center; 1677 + } 1678 + .\!flex { 1679 + display: flex !important; 1680 + } 1681 + .block { 1682 + display: block; 1683 + } 1684 + .contents { 1685 + display: contents; 1686 + } 39 1687 .flex { 40 1688 display: flex; 41 1689 } 1690 + .hidden { 1691 + display: none; 1692 + } 1693 + .inline { 1694 + display: inline; 1695 + } 1696 + .inline-block { 1697 + display: inline-block; 1698 + } 1699 + .table { 1700 + display: table; 1701 + } 1702 + .btn-circle { 1703 + border-radius: calc(infinity * 1px); 1704 + padding-inline: calc(0.25rem * 0); 1705 + width: var(--size); 1706 + height: var(--size); 1707 + } 1708 + .input { 1709 + & > .select { 1710 + height: auto; 1711 + border-style: var(--tw-border-style); 1712 + border-width: 0px; 1713 + &:focus, &:focus-within { 1714 + --tw-shadow: 0 0 #0000; 1715 + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); 1716 + outline-style: var(--tw-outline-style); 1717 + outline-width: 0px; 1718 + } 1719 + } 1720 + } 1721 + .h-\[30px\] { 1722 + height: 30px; 1723 + } 1724 + .h-\[60px\] { 1725 + height: 60px; 1726 + } 1727 + .max-h-\[18px\] { 1728 + max-height: 18px; 1729 + } 42 1730 .max-h-\[20px\] { 43 1731 max-height: 20px; 44 1732 } 45 1733 .max-h-\[22px\] { 46 1734 max-height: 22px; 47 1735 } 48 - .max-h-\[24px\] { 49 - max-height: 24px; 50 - } 51 1736 .max-h-\[25px\] { 52 1737 max-height: 25px; 53 1738 } 54 1739 .max-h-\[30px\] { 55 1740 max-height: 30px; 1741 + } 1742 + .max-h-\[60px\] { 1743 + max-height: 60px; 56 1744 } 57 1745 .max-h-\[70px\] { 58 1746 max-height: 70px; ··· 63 1751 .min-h-screen { 64 1752 min-height: 100vh; 65 1753 } 1754 + .advance-select-option { 1755 + width: 100%; 1756 + cursor: pointer; 1757 + border-radius: var(--radius-field); 1758 + padding-inline: calc(0.25rem * 4); 1759 + padding-block: calc(0.25rem * 2.5); 1760 + font-size: var(--text-base); 1761 + line-height: var(--tw-leading, var(--text-base--line-height)); 1762 + --tw-font-weight: var(--font-weight-normal); 1763 + font-weight: var(--font-weight-normal); 1764 + color: var(--color-base-content); 1765 + &:hover { 1766 + @media (hover: hover) { 1767 + background-color: var(--color-neutral); 1768 + @supports (color: color-mix(in lab, red, red)) { 1769 + background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); 1770 + } 1771 + } 1772 + } 1773 + &:focus { 1774 + background-color: var(--color-neutral); 1775 + @supports (color: color-mix(in lab, red, red)) { 1776 + background-color: color-mix(in oklab, var(--color-neutral) 10%, transparent); 1777 + } 1778 + --tw-outline-style: none; 1779 + outline-style: none; 1780 + } 1781 + } 1782 + .w-\[30px\] { 1783 + width: 30px; 1784 + } 1785 + .w-\[60px\] { 1786 + width: 60px; 1787 + } 66 1788 .w-full { 67 1789 width: 100%; 68 1790 } 1791 + .max-w-\[18px\] { 1792 + max-width: 18px; 1793 + } 69 1794 .max-w-\[20px\] { 70 1795 max-width: 20px; 71 1796 } 72 1797 .max-w-\[22px\] { 73 1798 max-width: 22px; 74 1799 } 75 - .max-w-\[24px\] { 76 - max-width: 24px; 77 - } 78 1800 .max-w-\[25px\] { 79 1801 max-width: 25px; 80 1802 } 81 1803 .max-w-\[30px\] { 82 1804 max-width: 30px; 83 1805 } 1806 + .max-w-\[60px\] { 1807 + max-width: 60px; 1808 + } 84 1809 .max-w-\[70px\] { 85 1810 max-width: 70px; 86 1811 } 87 1812 .max-w-\[100px\] { 88 1813 max-width: 100px; 89 1814 } 1815 + .max-w-full { 1816 + max-width: 100%; 1817 + } 1818 + .min-w-\[30px\] { 1819 + min-width: 30px; 1820 + } 1821 + .flex-1 { 1822 + flex: 1; 1823 + } 1824 + .shrink-0 { 1825 + flex-shrink: 0; 1826 + } 1827 + .transform { 1828 + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); 1829 + } 1830 + .cursor-pointer { 1831 + cursor: pointer; 1832 + } 1833 + .resize { 1834 + resize: both; 1835 + } 90 1836 .flex-col { 91 1837 flex-direction: column; 92 1838 } 93 1839 .flex-row { 94 1840 flex-direction: row; 95 1841 } 1842 + .flex-nowrap { 1843 + flex-wrap: nowrap; 1844 + } 96 1845 .items-center { 97 1846 align-items: center; 98 1847 } 99 1848 .items-end { 100 1849 align-items: flex-end; 101 1850 } 1851 + .\!justify-between { 1852 + justify-content: space-between !important; 1853 + } 1854 + .justify-between { 1855 + justify-content: space-between; 1856 + } 102 1857 .justify-center { 103 1858 justify-content: center; 104 1859 } 105 1860 .justify-end { 106 1861 justify-content: flex-end; 107 1862 } 1863 + .accordion { 1864 + &:where(.accordion-bordered) { 1865 + :where(& > :not(:last-child)) { 1866 + --tw-divide-y-reverse: 0; 1867 + border-bottom-style: var(--tw-border-style); 1868 + border-top-style: var(--tw-border-style); 1869 + border-top-width: calc(1px * var(--tw-divide-y-reverse)); 1870 + border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); 1871 + border-color: var(--color-base-content); 1872 + @supports (color: color-mix(in lab, red, red)) { 1873 + border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent); 1874 + } 1875 + } 1876 + border-radius: var(--radius-box); 1877 + border-style: var(--tw-border-style); 1878 + border-width: 1px; 1879 + border-color: var(--color-base-content); 1880 + @supports (color: color-mix(in lab, red, red)) { 1881 + border-color: color-mix(in oklab, var(--color-base-content) 25%, transparent); 1882 + } 1883 + background-color: var(--color-base-100); 1884 + } 1885 + } 1886 + .truncate { 1887 + overflow: hidden; 1888 + text-overflow: ellipsis; 1889 + white-space: nowrap; 1890 + } 1891 + .overflow-x-auto { 1892 + overflow-x: auto; 1893 + } 1894 + .overflow-y-auto { 1895 + overflow-y: auto; 1896 + } 1897 + .collapse { 1898 + :where(.menu-horizontal > li:not(.menu-title) > & > ul) { 1899 + border-radius: var(--radius-box); 1900 + background-color: var(--color-base-100); 1901 + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); 1902 + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); 1903 + --tw-shadow-color: var(--color-base-300); 1904 + @supports (color: color-mix(in lab, red, red)) { 1905 + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); 1906 + } 1907 + } 1908 + } 1909 + .\!rounded-full { 1910 + border-radius: calc(infinity * 1px) !important; 1911 + } 1912 + .rounded-box { 1913 + border-radius: var(--radius-box); 1914 + } 1915 + .rounded-box { 1916 + border-radius: var(--radius-box); 1917 + } 1918 + .rounded-field { 1919 + border-radius: var(--radius-field); 1920 + } 1921 + .rounded-field { 1922 + border-radius: var(--radius-field); 1923 + } 108 1924 .rounded-full { 109 1925 border-radius: calc(infinity * 1px); 110 1926 } 111 - .border-r-2 { 112 - border-right-style: var(--tw-border-style); 113 - border-right-width: 2px; 1927 + .border { 1928 + border-style: var(--tw-border-style); 1929 + border-width: 1px; 1930 + } 1931 + .btn-text { 1932 + --btn-shadow: ""; 1933 + color: var(--btn-color, var(--color-neutral)); 1934 + --btn-bg: ""; 1935 + --btn-border: ""; 1936 + --btn-noise: none; 1937 + border-width: 0; 1938 + outline-color: var(--btn-color, var(--color-neutral)); 1939 + @media (hover: hover) { 1940 + &:hover { 1941 + --btn-bg: var(--btn-color, var(--color-neutral)); 1942 + @supports (color: color-mix(in lab, red, red)) { 1943 + --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); 1944 + } 1945 + } 1946 + } 1947 + &:focus-visible { 1948 + --btn-bg: var(--btn-color, var(--color-neutral)); 1949 + @supports (color: color-mix(in lab, red, red)) { 1950 + --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); 1951 + } 1952 + } 1953 + &.btn-active { 1954 + --btn-bg: var(--btn-color, var(--color-neutral)); 1955 + @supports (color: color-mix(in lab, red, red)) { 1956 + --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, #0000); 1957 + } 1958 + } 1959 + } 1960 + .btn-soft { 1961 + --btn-shadow: ""; 1962 + color: var(--btn-color, var(--color-neutral)); 1963 + --btn-bg: var(--btn-color, var(--color-neutral)); 1964 + @supports (color: color-mix(in lab, red, red)) { 1965 + --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 10%, var(--color-base-100)); 1966 + } 1967 + border-width: 0; 1968 + --btn-noise: none; 1969 + &:focus-visible { 1970 + --btn-bg: var(--btn-color, var(--color-neutral)); 1971 + @supports (color: color-mix(in lab, red, red)) { 1972 + --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100)); 1973 + } 1974 + } 1975 + @media (hover: hover) { 1976 + &:hover { 1977 + --btn-bg: var(--btn-color, var(--color-neutral)); 1978 + @supports (color: color-mix(in lab, red, red)) { 1979 + --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100)); 1980 + } 1981 + } 1982 + } 1983 + &.btn-active { 1984 + --btn-bg: var(--btn-color, var(--color-neutral)); 1985 + @supports (color: color-mix(in lab, red, red)) { 1986 + --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-neutral)) 20%, var(--color-base-100)); 1987 + } 1988 + } 114 1989 } 115 - .border-r-4 { 116 - border-right-style: var(--tw-border-style); 117 - border-right-width: 4px; 1990 + .table-borderless { 1991 + --tw-border-style: none; 1992 + border-style: none; 1993 + :where(thead, tbody) { 1994 + :where(tr:not(:last-child)), :where(tr:first-child:last-child) { 1995 + --tw-border-style: none; 1996 + border-style: none; 1997 + } 1998 + } 1999 + } 2000 + .\!border-none { 2001 + --tw-border-style: none !important; 2002 + border-style: none !important; 2003 + } 2004 + .input { 2005 + &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { 2006 + border-color: var(--color-success); 2007 + &:hover { 2008 + @media (hover: hover) { 2009 + border-color: var(--color-success); 2010 + } 2011 + } 2012 + &:has(:hover):not(:focus, :focus-within) { 2013 + border-color: var(--color-success); 2014 + } 2015 + &:focus, &:focus-within { 2016 + --input-color: var(--color-success); 2017 + } 2018 + } 2019 + &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { 2020 + border-color: var(--color-error); 2021 + &:hover { 2022 + @media (hover: hover) { 2023 + border-color: var(--color-error); 2024 + } 2025 + } 2026 + &:has(:hover):not(:focus, :focus-within) { 2027 + border-color: var(--color-error); 2028 + } 2029 + &:focus, &:focus-within { 2030 + --input-color: var(--color-error); 2031 + } 2032 + } 2033 + &.is-valid::file-selector-button { 2034 + background-color: var(--color-success); 2035 + color: var(--color-success-content); 2036 + --input-color: var(--color-success); 2037 + } 2038 + .validate &:valid::file-selector-button { 2039 + background-color: var(--color-success); 2040 + color: var(--color-success-content); 2041 + --input-color: var(--color-success); 2042 + } 2043 + &.is-invalid::file-selector-button { 2044 + background-color: var(--color-error); 2045 + color: var(--color-error-content); 2046 + --input-color: var(--color-error); 2047 + } 2048 + .validate &:invalid::file-selector-button { 2049 + background-color: var(--color-error); 2050 + color: var(--color-error-content); 2051 + --input-color: var(--color-error); 2052 + } 2053 + .input-floating > &.is-valid::file-selector-button { 2054 + background-color: var(--color-base-100); 2055 + color: var(--color-base-content); 2056 + border-inline-end: var(--border) solid var(--color-success); 2057 + } 2058 + .validate .input-floating > &:valid::file-selector-button { 2059 + background-color: var(--color-base-100); 2060 + color: var(--color-base-content); 2061 + border-inline-end: var(--border) solid var(--color-success); 2062 + } 2063 + .input-floating > &.is-invalid::file-selector-button { 2064 + background-color: var(--color-base-100); 2065 + color: var(--color-base-content); 2066 + border-inline-end: var(--border) solid var(--color-error); 2067 + } 2068 + .validate .input-floating > &:invalid::file-selector-button { 2069 + background-color: var(--color-base-100); 2070 + color: var(--color-base-content); 2071 + border-inline-end: var(--border) solid var(--color-error); 2072 + } 2073 + } 2074 + .is-invalid { 2075 + .input&::file-selector-button { 2076 + background-color: var(--color-error); 2077 + color: var(--color-error-content); 2078 + --input-color: var(--color-error); 2079 + } 2080 + .input-floating > .input&::file-selector-button { 2081 + background-color: var(--color-base-100); 2082 + color: var(--color-base-content); 2083 + border-inline-end: var(--border) solid var(--color-error); 2084 + } 2085 + .label-text:has(~ &) { 2086 + color: var(--color-error); 2087 + } 2088 + .label-text:has(~ * &) { 2089 + color: var(--color-error); 2090 + } 2091 + :is(&) ~ .helper-text { 2092 + color: var(--color-error); 2093 + } 2094 + *:has(&) ~ .helper-text { 2095 + color: var(--color-error); 2096 + } 2097 + :is(&) ~ .label-text { 2098 + color: var(--color-error); 2099 + } 2100 + :is(&) ~ .label-text * { 2101 + color: var(--color-error); 2102 + } 2103 + :is(&) ~ * >.label-text { 2104 + color: var(--color-error); 2105 + } 2106 + select& + .advance-select-toggle { 2107 + --input-color: var(--color-error); 2108 + &:focus, &:focus-within { 2109 + --input-color: var(--color-error); 2110 + } 2111 + } 2112 + .advance-select-tag:has(> &) { 2113 + --input-color: var(--color-error); 2114 + &:focus, &:focus-within { 2115 + --input-color: var(--color-error); 2116 + } 2117 + } 2118 + .input-floating:has(&) { 2119 + &:hover { 2120 + @media (hover: hover) { 2121 + border-color: var(--color-error); 2122 + } 2123 + } 2124 + .input-floating-label { 2125 + color: var(--color-error); 2126 + } 2127 + &:focus-within, &:not(:has(input:placeholder-shown)), &:has(.input:focus) { 2128 + .input-floating-label { 2129 + color: var(--color-error); 2130 + } 2131 + } 2132 + } 2133 + .textarea-floating:has(&) { 2134 + .textarea-floating-label { 2135 + color: var(--color-error); 2136 + } 2137 + &:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.textarea:focus) { 2138 + .textarea-floating-label { 2139 + color: var(--color-error); 2140 + } 2141 + } 2142 + } 2143 + .select-floating:has(&) { 2144 + .select-floating-label { 2145 + color: var(--color-error); 2146 + } 2147 + &:focus-within, &:not(:has(select:placeholder-shown)), &:has(.select:focus) { 2148 + .select-floating-label { 2149 + color: var(--color-error); 2150 + } 2151 + } 2152 + } 2153 + } 2154 + .is-valid { 2155 + .input&::file-selector-button { 2156 + background-color: var(--color-success); 2157 + color: var(--color-success-content); 2158 + --input-color: var(--color-success); 2159 + } 2160 + .input-floating > .input&::file-selector-button { 2161 + background-color: var(--color-base-100); 2162 + color: var(--color-base-content); 2163 + border-inline-end: var(--border) solid var(--color-success); 2164 + } 2165 + .label-text:has(~ &) { 2166 + color: var(--color-success); 2167 + } 2168 + .label-text:has(~ * &) { 2169 + color: var(--color-success); 2170 + } 2171 + :is(&) ~ .helper-text { 2172 + color: var(--color-success); 2173 + } 2174 + *:has(&) ~ .helper-text { 2175 + color: var(--color-success); 2176 + } 2177 + :is(&) ~ .label-text { 2178 + color: var(--color-success); 2179 + } 2180 + :is(&) ~ .label-text * { 2181 + color: var(--color-success); 2182 + } 2183 + :is(&) ~ * >.label-text { 2184 + color: var(--color-success); 2185 + } 2186 + select& + .advance-select-toggle { 2187 + --input-color: var(--color-success); 2188 + &:focus, &:focus-within { 2189 + --input-color: var(--color-success); 2190 + } 2191 + } 2192 + .advance-select-tag:has(> &) { 2193 + --input-color: var(--color-success); 2194 + &:focus, &:focus-within { 2195 + --input-color: var(--color-success); 2196 + } 2197 + } 2198 + .input-floating:has(&) { 2199 + &:hover { 2200 + @media (hover: hover) { 2201 + border-color: var(--color-success); 2202 + } 2203 + } 2204 + .input-floating-label { 2205 + color: var(--color-success); 2206 + } 2207 + &:focus-within, &:not(:has(input:placeholder-shown)), &:has(.input:focus) { 2208 + .input-floating-label { 2209 + color: var(--color-success); 2210 + } 2211 + } 2212 + } 2213 + .textarea-floating:has(&) { 2214 + .textarea-floating-label { 2215 + color: var(--color-success); 2216 + } 2217 + &:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.textarea:focus) { 2218 + .textarea-floating-label { 2219 + color: var(--color-success); 2220 + } 2221 + } 2222 + } 2223 + .select-floating:has(&) { 2224 + .select-floating-label { 2225 + color: var(--color-success); 2226 + } 2227 + &:focus-within, &:not(:has(select:placeholder-shown)), &:has(.select:focus) { 2228 + .select-floating-label { 2229 + color: var(--color-success); 2230 + } 2231 + } 2232 + } 2233 + } 2234 + .checkbox { 2235 + &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { 2236 + --input-color: var(--color-success); 2237 + border-color: var(--input-color); 2238 + &:checked, &[aria-checked="true"], &:has(> input:checked) { 2239 + --input-color: var(--color-success); 2240 + } 2241 + } 2242 + &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { 2243 + --input-color: var(--color-error); 2244 + border-color: var(--input-color); 2245 + &:checked, &[aria-checked="true"], &:has(> input:checked) { 2246 + --input-color: var(--color-error); 2247 + } 2248 + } 2249 + &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { 2250 + color: var(--color-success-content); 2251 + } 2252 + &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { 2253 + color: var(--color-error-content); 2254 + } 2255 + } 2256 + .select { 2257 + &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { 2258 + border-color: var(--color-success); 2259 + &:hover { 2260 + @media (hover: hover) { 2261 + border-color: var(--color-success); 2262 + } 2263 + } 2264 + &:has(:hover):not(:focus, :focus-within) { 2265 + border-color: var(--color-success); 2266 + } 2267 + &:focus, &:focus-within { 2268 + --input-color: var(--color-success); 2269 + } 2270 + } 2271 + &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { 2272 + border-color: var(--color-error); 2273 + &:hover { 2274 + @media (hover: hover) { 2275 + border-color: var(--color-error); 2276 + } 2277 + } 2278 + &:has(:hover):not(:focus, :focus-within) { 2279 + border-color: var(--color-error); 2280 + } 2281 + &:focus, &:focus-within { 2282 + --input-color: var(--color-error); 2283 + } 2284 + } 2285 + } 2286 + .textarea { 2287 + &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { 2288 + border-color: var(--color-success); 2289 + &:hover { 2290 + @media (hover: hover) { 2291 + border-color: var(--color-success); 2292 + } 2293 + } 2294 + &:has(:hover):not(:focus, :focus-within) { 2295 + border-color: var(--color-success); 2296 + } 2297 + &:focus, &:focus-within { 2298 + --input-color: var(--color-success); 2299 + } 2300 + } 2301 + &.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid) { 2302 + border-color: var(--color-error); 2303 + &:hover { 2304 + @media (hover: hover) { 2305 + border-color: var(--color-error); 2306 + } 2307 + } 2308 + &:has(:hover):not(:focus, :focus-within) { 2309 + border-color: var(--color-error); 2310 + } 2311 + &:focus, &:focus-within { 2312 + --input-color: var(--color-error); 2313 + } 2314 + } 2315 + } 2316 + .\!border-base-content\/40 { 2317 + border-color: var(--color-base-content) !important; 2318 + @supports (color: color-mix(in lab, red, red)) { 2319 + border-color: color-mix(in oklab, var(--color-base-content) 40%, transparent) !important; 2320 + } 2321 + } 2322 + .border-base-content\/20 { 2323 + border-color: var(--color-base-content); 2324 + @supports (color: color-mix(in lab, red, red)) { 2325 + border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); 2326 + } 2327 + } 2328 + .border-base-content\/40 { 2329 + border-color: var(--color-base-content); 2330 + @supports (color: color-mix(in lab, red, red)) { 2331 + border-color: color-mix(in oklab, var(--color-base-content) 40%, transparent); 2332 + } 2333 + } 2334 + .progress-primary { 2335 + background-color: var(--color-primary); 2336 + color: var(--color-primary-content); 2337 + } 2338 + .\!bg-base-100 { 2339 + background-color: var(--color-base-100) !important; 2340 + } 2341 + .bg-\[var\(--color-avatar-background\)\] { 2342 + background-color: var(--color-avatar-background); 2343 + } 2344 + .bg-base-100 { 2345 + background-color: var(--color-base-100); 2346 + } 2347 + .bg-base-300\/60 { 2348 + background-color: var(--color-base-300); 2349 + @supports (color: color-mix(in lab, red, red)) { 2350 + background-color: color-mix(in oklab, var(--color-base-300) 60%, transparent); 2351 + } 118 2352 } 119 2353 .bg-gradient-to-br { 120 2354 --tw-gradient-position: to bottom right in oklab; 121 2355 background-image: linear-gradient(var(--tw-gradient-stops)); 122 2356 } 2357 + .loading-spinner { 2358 + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); 2359 + } 123 2360 .p-\[15px\] { 124 2361 padding: 15px; 125 2362 } 126 2363 .pr-\[15px\] { 127 2364 padding-right: 15px; 2365 + } 2366 + .align-bottom { 2367 + vertical-align: bottom; 128 2368 } 129 2369 .font-rockford-light { 130 2370 font-family: var(--font-rockford-light); 131 2371 } 2372 + .btn-sm { 2373 + font-size: var(--text-sm); 2374 + line-height: var(--tw-leading, var(--text-sm--line-height)); 2375 + --btn-p: 0.75rem; 2376 + --size: calc(var(--size-field, 0.25rem) * 7.5); 2377 + } 132 2378 .text-\[12px\] { 133 2379 font-size: 12px; 134 2380 } ··· 138 2384 .text-\[14px\] { 139 2385 font-size: 14px; 140 2386 } 2387 + .text-\[15px\] { 2388 + font-size: 15px; 2389 + } 141 2390 .text-\[18px\] { 142 2391 font-size: 18px; 143 2392 } ··· 147 2396 .text-\[24px\] { 148 2397 font-size: 24px; 149 2398 } 2399 + .whitespace-nowrap { 2400 + white-space: nowrap; 2401 + } 150 2402 .text-\[var\(--color-genre\)\] { 151 2403 color: var(--color-genre); 152 2404 } 153 2405 .text-\[var\(--color-text-muted\)\] { 154 2406 color: var(--color-text-muted); 155 2407 } 2408 + .text-base-content { 2409 + color: var(--color-base-content); 2410 + } 2411 + .text-base-content\/50 { 2412 + color: var(--color-base-content); 2413 + @supports (color: color-mix(in lab, red, red)) { 2414 + color: color-mix(in oklab, var(--color-base-content) 50%, transparent); 2415 + } 2416 + } 2417 + .text-base-content\/80 { 2418 + color: var(--color-base-content); 2419 + @supports (color: color-mix(in lab, red, red)) { 2420 + color: color-mix(in oklab, var(--color-base-content) 80%, transparent); 2421 + } 2422 + } 2423 + .text-error { 2424 + color: var(--color-error); 2425 + } 156 2426 .text-inherit { 157 2427 color: inherit; 158 2428 } 2429 + .text-primary { 2430 + color: var(--color-primary); 2431 + } 2432 + .text-success { 2433 + color: var(--color-success); 2434 + } 2435 + .lowercase { 2436 + text-transform: lowercase; 2437 + } 2438 + .uppercase { 2439 + text-transform: uppercase; 2440 + } 159 2441 .no-underline { 160 2442 text-decoration-line: none; 161 2443 } 2444 + .opacity-0 { 2445 + opacity: 0%; 2446 + } 2447 + .opacity-100 { 2448 + opacity: 100%; 2449 + } 2450 + .shadow-base-300\/20 { 2451 + --tw-shadow-color: var(--color-base-300); 2452 + @supports (color: color-mix(in lab, red, red)) { 2453 + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent); 2454 + } 2455 + } 2456 + .outline { 2457 + outline-style: var(--tw-outline-style); 2458 + outline-width: 1px; 2459 + } 2460 + .filter { 2461 + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); 2462 + } 2463 + .carousel-slide { 2464 + transition-property: transform, translate, scale, rotate; 2465 + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); 2466 + transition-duration: var(--tw-duration, var(--default-transition-duration)); 2467 + transition-duration: 700ms; 2468 + --tw-duration: 700ms; 2469 + } 2470 + .transition { 2471 + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; 2472 + transition-timing-function: var(--tw-ease, ease); 2473 + transition-duration: var(--tw-duration, 0s); 2474 + } 2475 + .transition-all { 2476 + transition-property: all; 2477 + transition-timing-function: var(--tw-ease, ease); 2478 + transition-duration: var(--tw-duration, 0s); 2479 + } 2480 + .duration-300 { 2481 + --tw-duration: 300ms; 2482 + transition-duration: 300ms; 2483 + } 2484 + .duration-500 { 2485 + --tw-duration: 500ms; 2486 + transition-duration: 500ms; 2487 + } 2488 + .btn-primary { 2489 + --btn-color: var(--color-primary); 2490 + --btn-fg: var(--color-primary-content); 2491 + } 2492 + .selected { 2493 + .validate select:has(~ * > &) + .advance-select-toggle { 2494 + --input-color: var(--color-success); 2495 + &:focus, &:focus-within { 2496 + --input-color: var(--color-success); 2497 + } 2498 + } 2499 + } 162 2500 .hover\:underline { 163 2501 &:hover { 164 2502 @media (hover: hover) { ··· 166 2504 } 167 2505 } 168 2506 } 2507 + .focus\:border-primary { 2508 + &:focus { 2509 + border-color: var(--color-primary); 2510 + } 2511 + } 2512 + .focus\:outline-1 { 2513 + &:focus { 2514 + outline-style: var(--tw-outline-style); 2515 + outline-width: 1px; 2516 + } 2517 + } 2518 + .focus\:outline-primary { 2519 + &:focus { 2520 + outline-color: var(--color-primary); 2521 + } 2522 + } 2523 + .combo-box-selected\:block { 2524 + &.selected { 2525 + display: block; 2526 + } 2527 + .selected & { 2528 + display: block; 2529 + } 2530 + } 2531 + .combo-box-selected\:dropdown-active { 2532 + &.selected { 2533 + background-color: var(--color-primary); 2534 + @supports (color: color-mix(in lab, red, red)) { 2535 + background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); 2536 + } 2537 + color: var(--color-primary); 2538 + } 2539 + .selected & { 2540 + background-color: var(--color-primary); 2541 + @supports (color: color-mix(in lab, red, red)) { 2542 + background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); 2543 + } 2544 + color: var(--color-primary); 2545 + } 2546 + } 2547 + .file-upload-complete\:progress-success { 2548 + &.complete { 2549 + background-color: var(--color-success); 2550 + color: var(--color-success-content); 2551 + } 2552 + .complete & { 2553 + background-color: var(--color-success); 2554 + color: var(--color-success-content); 2555 + } 2556 + } 169 2557 @font-face { 170 2558 font-family: "RockfordSansLight"; 171 2559 src: url("/public/fonts/RockfordSans-Light.otf") format("opentype"); ··· 224 2612 --font-rockford-light: "RockfordSansLight"; 225 2613 --color-text-muted: #42576ca6; 226 2614 --color-genre: #3f03fb; 2615 + --color-avatar-background: #f4f0ff; 227 2616 } 228 2617 .dark { 229 2618 --color-text-muted: rgb(191 174 195 / 65%) !important; ··· 232 2621 body { 233 2622 font-family: "RockfordSansRegular"; 234 2623 } 2624 + @layer base { 2625 + :where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] { 2626 + color-scheme: light; 2627 + --color-base-100: oklch(100% 0 0); 2628 + --color-base-200: oklch(97.8% 0.005 297.73); 2629 + --color-base-300: oklch(37.01% 0.0069 297.49); 2630 + --color-base-content: oklch(37.57% 0.022 281.8); 2631 + --color-primary: oklch(57.59% 0.247 287.24); 2632 + --color-primary-content: oklch(96.57% 0.017 289.61); 2633 + --color-secondary: oklch(55.79% 0.022 301.91); 2634 + --color-secondary-content: oklch(97.64% 0.001 286.38); 2635 + --color-accent: oklch(62.31% 0.188 259.81); 2636 + --color-accent-content: oklch(97.05% 0.014 254.6); 2637 + --color-neutral: oklch(37.57% 0.0222 281.8); 2638 + --color-neutral-content: oklch(0.98 0.0013 286.38); 2639 + --color-info: oklch(71.48% 0.126 215.22); 2640 + --color-info-content: oklch(98.41% 0.019 200.87); 2641 + --color-success: oklch(73.11% 0.217 147.04); 2642 + --color-success-content: oklch(98.1% 0.014 174.18); 2643 + --color-warning: oklch(79.87% 0.164 73.09); 2644 + --color-warning-content: oklch(99.34% 0.011 95.16); 2645 + --color-error: oklch(65.39% 0.222 25.86); 2646 + --color-error-content: oklch(98.76% 0.009 67.73); 2647 + --radius-selector: 0.25rem; 2648 + --radius-field: 0.375rem; 2649 + --radius-box: 0.5rem; 2650 + --size-selector: 0.25rem; 2651 + --size-field: 0.25rem; 2652 + --border: 1px; 2653 + --depth: 0; 2654 + --noise: 0; 2655 + } 2656 + } 2657 + @layer base { 2658 + @media (prefers-color-scheme: dark) { 2659 + :root { 2660 + color-scheme: dark; 2661 + --color-base-100: oklch(31.23% 0.026 301.24); 2662 + --color-base-200: oklch(25.39% 0.025 298.72); 2663 + --color-base-300: oklch(23.44% 0.0194 298.63); 2664 + --color-base-content: oklch(84.98% 0.014 295.28); 2665 + --color-primary: oklch(53.93% 0.271 286.75); 2666 + --color-primary-content: oklch(88.22% 0.062 290.17); 2667 + --color-secondary: oklch(49.12% 0.021 303.05); 2668 + --color-secondary-content: oklch(88.83% 0.007 304.23); 2669 + --color-accent: oklch(54.61% 0.215 262.88); 2670 + --color-accent-content: oklch(88.23% 0.057 254.13); 2671 + --color-neutral: oklch(65.75% 0.022 294.95); 2672 + --color-neutral-content: oklch(18.51% 0.017 301.92); 2673 + --color-info: oklch(60.89% 0.111 221.72); 2674 + --color-info-content: oklch(91.67% 0.077 205.04); 2675 + --color-success: oklch(67.35% 0.201 146.84); 2676 + --color-success-content: oklch(91.38% 0.069 168.24); 2677 + --color-warning: oklch(72.59% 0.152 69.05); 2678 + --color-warning-content: oklch(96.07% 0.057 93.2); 2679 + --color-error: oklch(59.54% 0.208 26.28); 2680 + --color-error-content: oklch(93.4% 0.039 54.86); 2681 + --radius-selector: 0.25rem; 2682 + --radius-field: 0.375rem; 2683 + --radius-box: 0.5rem; 2684 + --size-selector: 0.25rem; 2685 + --size-field: 0.25rem; 2686 + --border: 1px; 2687 + --depth: 0; 2688 + --noise: 0; 2689 + } 2690 + } 2691 + } 2692 + @layer base { 2693 + :root:has(input.theme-controller[value=light]:checked),[data-theme=light] { 2694 + color-scheme: light; 2695 + --color-base-100: oklch(100% 0 0); 2696 + --color-base-200: oklch(97.8% 0.005 297.73); 2697 + --color-base-300: oklch(37.01% 0.0069 297.49); 2698 + --color-base-content: oklch(37.57% 0.022 281.8); 2699 + --color-primary: oklch(57.59% 0.247 287.24); 2700 + --color-primary-content: oklch(96.57% 0.017 289.61); 2701 + --color-secondary: oklch(55.79% 0.022 301.91); 2702 + --color-secondary-content: oklch(97.64% 0.001 286.38); 2703 + --color-accent: oklch(62.31% 0.188 259.81); 2704 + --color-accent-content: oklch(97.05% 0.014 254.6); 2705 + --color-neutral: oklch(37.57% 0.0222 281.8); 2706 + --color-neutral-content: oklch(0.98 0.0013 286.38); 2707 + --color-info: oklch(71.48% 0.126 215.22); 2708 + --color-info-content: oklch(98.41% 0.019 200.87); 2709 + --color-success: oklch(73.11% 0.217 147.04); 2710 + --color-success-content: oklch(98.1% 0.014 174.18); 2711 + --color-warning: oklch(79.87% 0.164 73.09); 2712 + --color-warning-content: oklch(99.34% 0.011 95.16); 2713 + --color-error: oklch(65.39% 0.222 25.86); 2714 + --color-error-content: oklch(98.76% 0.009 67.73); 2715 + --radius-selector: 0.25rem; 2716 + --radius-field: 0.375rem; 2717 + --radius-box: 0.5rem; 2718 + --size-selector: 0.25rem; 2719 + --size-field: 0.25rem; 2720 + --border: 1px; 2721 + --depth: 0; 2722 + --noise: 0; 2723 + } 2724 + } 2725 + @layer base { 2726 + :root:has(input.theme-controller[value=dark]:checked),[data-theme=dark] { 2727 + color-scheme: dark; 2728 + --color-base-100: oklch(31.23% 0.026 301.24); 2729 + --color-base-200: oklch(25.39% 0.025 298.72); 2730 + --color-base-300: oklch(23.44% 0.0194 298.63); 2731 + --color-base-content: oklch(84.98% 0.014 295.28); 2732 + --color-primary: oklch(53.93% 0.271 286.75); 2733 + --color-primary-content: oklch(88.22% 0.062 290.17); 2734 + --color-secondary: oklch(49.12% 0.021 303.05); 2735 + --color-secondary-content: oklch(88.83% 0.007 304.23); 2736 + --color-accent: oklch(54.61% 0.215 262.88); 2737 + --color-accent-content: oklch(88.23% 0.057 254.13); 2738 + --color-neutral: oklch(65.75% 0.022 294.95); 2739 + --color-neutral-content: oklch(18.51% 0.017 301.92); 2740 + --color-info: oklch(60.89% 0.111 221.72); 2741 + --color-info-content: oklch(91.67% 0.077 205.04); 2742 + --color-success: oklch(67.35% 0.201 146.84); 2743 + --color-success-content: oklch(91.38% 0.069 168.24); 2744 + --color-warning: oklch(72.59% 0.152 69.05); 2745 + --color-warning-content: oklch(96.07% 0.057 93.2); 2746 + --color-error: oklch(59.54% 0.208 26.28); 2747 + --color-error-content: oklch(93.4% 0.039 54.86); 2748 + --radius-selector: 0.25rem; 2749 + --radius-field: 0.375rem; 2750 + --radius-box: 0.5rem; 2751 + --size-selector: 0.25rem; 2752 + --size-field: 0.25rem; 2753 + --border: 1px; 2754 + --depth: 0; 2755 + --noise: 0; 2756 + } 2757 + } 2758 + @layer base { 2759 + :root { 2760 + --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); 2761 + } 2762 + .chat { 2763 + --mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e"); 2764 + } 2765 + .tooltip { 2766 + --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A"); 2767 + } 2768 + } 2769 + @layer base { 2770 + :root { 2771 + scrollbar-color: currentColor #0000; 2772 + @supports (color: color-mix(in lab, red, red)) { 2773 + scrollbar-color: color-mix(in oklch, currentColor 20%, #0000) #0000; 2774 + } 2775 + } 2776 + } 2777 + @layer base { 2778 + @property --radialprogress { 2779 + syntax: "<percentage>"; 2780 + inherits: true; 2781 + initial-value: 0%; 2782 + } 2783 + } 2784 + @layer base { 2785 + :root, [data-theme] { 2786 + background-color: var(--root-bg, var(--color-base-100)); 2787 + color: var(--color-base-content); 2788 + } 2789 + } 2790 + @layer base { 2791 + button:not(:disabled), [role="button"]:not(:disabled) { 2792 + cursor: pointer; 2793 + } 2794 + } 2795 + @keyframes radio { 2796 + 0% { 2797 + padding: 5px; 2798 + } 2799 + 50% { 2800 + padding: 3px; 2801 + } 2802 + } 2803 + @keyframes radio-inset { 2804 + 0% { 2805 + padding: 1px; 2806 + } 2807 + 50% { 2808 + padding: 4px; 2809 + } 2810 + } 2811 + @keyframes skeleton { 2812 + 0% { 2813 + background-position: 150%; 2814 + } 2815 + 100% { 2816 + background-position: -50%; 2817 + } 2818 + } 2819 + @keyframes indeterminate-progress { 2820 + 0% { 2821 + background-position-x: -75%; 2822 + } 2823 + 50% { 2824 + background-position-x: 125%; 2825 + } 2826 + 100% { 2827 + background-position-x: -75%; 2828 + } 2829 + } 2830 + @keyframes progress-bar-stripes { 2831 + 0% { 2832 + background-position-x: 0.75rem; 2833 + } 2834 + } 2835 + @property --tw-rotate-x { 2836 + syntax: "*"; 2837 + inherits: false; 2838 + } 2839 + @property --tw-rotate-y { 2840 + syntax: "*"; 2841 + inherits: false; 2842 + } 2843 + @property --tw-rotate-z { 2844 + syntax: "*"; 2845 + inherits: false; 2846 + } 2847 + @property --tw-skew-x { 2848 + syntax: "*"; 2849 + inherits: false; 2850 + } 2851 + @property --tw-skew-y { 2852 + syntax: "*"; 2853 + inherits: false; 2854 + } 235 2855 @property --tw-border-style { 236 2856 syntax: "*"; 237 2857 inherits: false; 238 2858 initial-value: solid; 239 2859 } 2860 + @property --tw-shadow { 2861 + syntax: "*"; 2862 + inherits: false; 2863 + initial-value: 0 0 #0000; 2864 + } 2865 + @property --tw-shadow-color { 2866 + syntax: "*"; 2867 + inherits: false; 2868 + } 2869 + @property --tw-shadow-alpha { 2870 + syntax: "<percentage>"; 2871 + inherits: false; 2872 + initial-value: 100%; 2873 + } 2874 + @property --tw-inset-shadow { 2875 + syntax: "*"; 2876 + inherits: false; 2877 + initial-value: 0 0 #0000; 2878 + } 2879 + @property --tw-inset-shadow-color { 2880 + syntax: "*"; 2881 + inherits: false; 2882 + } 2883 + @property --tw-inset-shadow-alpha { 2884 + syntax: "<percentage>"; 2885 + inherits: false; 2886 + initial-value: 100%; 2887 + } 2888 + @property --tw-ring-color { 2889 + syntax: "*"; 2890 + inherits: false; 2891 + } 2892 + @property --tw-ring-shadow { 2893 + syntax: "*"; 2894 + inherits: false; 2895 + initial-value: 0 0 #0000; 2896 + } 2897 + @property --tw-inset-ring-color { 2898 + syntax: "*"; 2899 + inherits: false; 2900 + } 2901 + @property --tw-inset-ring-shadow { 2902 + syntax: "*"; 2903 + inherits: false; 2904 + initial-value: 0 0 #0000; 2905 + } 2906 + @property --tw-ring-inset { 2907 + syntax: "*"; 2908 + inherits: false; 2909 + } 2910 + @property --tw-ring-offset-width { 2911 + syntax: "<length>"; 2912 + inherits: false; 2913 + initial-value: 0px; 2914 + } 2915 + @property --tw-ring-offset-color { 2916 + syntax: "*"; 2917 + inherits: false; 2918 + initial-value: #fff; 2919 + } 2920 + @property --tw-ring-offset-shadow { 2921 + syntax: "*"; 2922 + inherits: false; 2923 + initial-value: 0 0 #0000; 2924 + } 2925 + @property --tw-outline-style { 2926 + syntax: "*"; 2927 + inherits: false; 2928 + initial-value: solid; 2929 + } 2930 + @property --tw-blur { 2931 + syntax: "*"; 2932 + inherits: false; 2933 + } 2934 + @property --tw-brightness { 2935 + syntax: "*"; 2936 + inherits: false; 2937 + } 2938 + @property --tw-contrast { 2939 + syntax: "*"; 2940 + inherits: false; 2941 + } 2942 + @property --tw-grayscale { 2943 + syntax: "*"; 2944 + inherits: false; 2945 + } 2946 + @property --tw-hue-rotate { 2947 + syntax: "*"; 2948 + inherits: false; 2949 + } 2950 + @property --tw-invert { 2951 + syntax: "*"; 2952 + inherits: false; 2953 + } 2954 + @property --tw-opacity { 2955 + syntax: "*"; 2956 + inherits: false; 2957 + } 2958 + @property --tw-saturate { 2959 + syntax: "*"; 2960 + inherits: false; 2961 + } 2962 + @property --tw-sepia { 2963 + syntax: "*"; 2964 + inherits: false; 2965 + } 2966 + @property --tw-drop-shadow { 2967 + syntax: "*"; 2968 + inherits: false; 2969 + } 2970 + @property --tw-drop-shadow-color { 2971 + syntax: "*"; 2972 + inherits: false; 2973 + } 2974 + @property --tw-drop-shadow-alpha { 2975 + syntax: "<percentage>"; 2976 + inherits: false; 2977 + initial-value: 100%; 2978 + } 2979 + @property --tw-drop-shadow-size { 2980 + syntax: "*"; 2981 + inherits: false; 2982 + } 2983 + @property --tw-duration { 2984 + syntax: "*"; 2985 + inherits: false; 2986 + } 240 2987 @layer properties { 241 2988 @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { 242 2989 *, ::before, ::after, ::backdrop { 2990 + --tw-rotate-x: initial; 2991 + --tw-rotate-y: initial; 2992 + --tw-rotate-z: initial; 2993 + --tw-skew-x: initial; 2994 + --tw-skew-y: initial; 243 2995 --tw-border-style: solid; 2996 + --tw-shadow: 0 0 #0000; 2997 + --tw-shadow-color: initial; 2998 + --tw-shadow-alpha: 100%; 2999 + --tw-inset-shadow: 0 0 #0000; 3000 + --tw-inset-shadow-color: initial; 3001 + --tw-inset-shadow-alpha: 100%; 3002 + --tw-ring-color: initial; 3003 + --tw-ring-shadow: 0 0 #0000; 3004 + --tw-inset-ring-color: initial; 3005 + --tw-inset-ring-shadow: 0 0 #0000; 3006 + --tw-ring-inset: initial; 3007 + --tw-ring-offset-width: 0px; 3008 + --tw-ring-offset-color: #fff; 3009 + --tw-ring-offset-shadow: 0 0 #0000; 3010 + --tw-outline-style: solid; 3011 + --tw-blur: initial; 3012 + --tw-brightness: initial; 3013 + --tw-contrast: initial; 3014 + --tw-grayscale: initial; 3015 + --tw-hue-rotate: initial; 3016 + --tw-invert: initial; 3017 + --tw-opacity: initial; 3018 + --tw-saturate: initial; 3019 + --tw-sepia: initial; 3020 + --tw-drop-shadow: initial; 3021 + --tw-drop-shadow-color: initial; 3022 + --tw-drop-shadow-alpha: 100%; 3023 + --tw-drop-shadow-size: initial; 3024 + --tw-duration: initial; 244 3025 } 245 3026 } 246 3027 }
+55
apps/embed/src/components/Header/Header.tsx
··· 1 + import dayjs from "dayjs"; 2 + import type { Profile } from "../../types/profile"; 3 + 4 + export type HeaderProps = { 5 + profile: Profile; 6 + }; 7 + 8 + function Header(props: HeaderProps) { 9 + const end = dayjs(); 10 + const start = end.subtract(7, "day"); 11 + const range = `${start.format("DD MMM YYYY")} — ${end.format("DD MMM YYYY")}`; 12 + 13 + return ( 14 + <> 15 + <div className="flex flex-row items-center mb-[20px]"> 16 + <div className="flex flex-1 items-center"> 17 + <a 18 + href={`https://rocksky.app/profile/${props.profile.handle}`} 19 + target="_blank" 20 + > 21 + <img 22 + className="max-h-[25px] max-w-[25px] rounded-full mr-[10px]" 23 + src={props.profile.avatar} 24 + /> 25 + </a> 26 + <a 27 + href={`https://rocksky.app/profile/${props.profile.handle}`} 28 + target="_blank" 29 + className="no-underline text-inherit" 30 + > 31 + <div className="text-[14px] mt-[-6px]">@{props.profile.handle}</div> 32 + </a> 33 + <span className="text-[14px] mt-[-3px] ml-[5px] mr-[5px]">|</span> 34 + <span className="text-[13px] mt-[-3px]">{range}</span> 35 + </div> 36 + 37 + <a 38 + href="https://rocksky.app" 39 + className="text-inherit no-underline" 40 + target="_blank" 41 + > 42 + <div className="flex flex-row items-center "> 43 + <img 44 + className="max-h-[18px] max-w-[18px] mr-[8px] " 45 + src="/public/logo.png" 46 + /> 47 + <span className="text-[15px]">Rocksky</span> 48 + </div> 49 + </a> 50 + </div> 51 + </> 52 + ); 53 + } 54 + 55 + export default Header;
+3
apps/embed/src/components/Header/index.tsx
··· 1 + import Header from "./Header"; 2 + 3 + export default Header;
+23
apps/embed/src/components/Icons/Artist.tsx
··· 1 + import type { FC } from "react"; 2 + 3 + export type ArtistProps = { 4 + size?: number; 5 + color?: string; 6 + width?: number; 7 + height?: number; 8 + }; 9 + 10 + const Artist: FC<ArtistProps> = ({ size = 24, color = "#000", ...props }) => ( 11 + <svg 12 + xmlns="http://www.w3.org/2000/svg" 13 + viewBox={`0 0 ${size} ${size}`} 14 + {...props} 15 + > 16 + <path 17 + d="M20 4.22a5.67 5.67 0 0 0-9.68 4.57l-8 9.79 3.3 3.3 9.79-8c.18 0 .36.05.55.05a5.7 5.7 0 0 0 4-9.73ZM5.74 19.86l-1.38-1.38 6.44-7.89a5.48 5.48 0 0 0 2.83 2.84Zm13.21-8.65a4.2 4.2 0 1 1 0-5.94 4.17 4.17 0 0 1 0 5.95Z" 18 + fill={color} 19 + /> 20 + </svg> 21 + ); 22 + 23 + export default Artist;
+4 -3
apps/embed/src/embeds/ProfileEmbedPage.tsx
··· 32 32 > 33 33 <div className="absolute top-[0] right-[0] m-[20px] flex flex-row items-center "> 34 34 <img 35 - className="max-h-[22px] max-w-[22px] mr-[8px] " 35 + className="max-h-[18px] max-w-[18px] mr-[8px] " 36 36 src="/public/logo.png" 37 37 /> 38 - <span className="text-[20px]">Rocksky</span> 38 + <span className="text-[15px]">Rocksky</span> 39 39 </div> 40 40 </a> 41 - <div className="flex flex-row items-center mb-[20px] w-full"> 41 + 42 + <div className="flex flex-row items-center mt-[10px] mb-[20px] w-full"> 42 43 <a href={`https://rocksky.app/profile/${props.handle}`} target="_blank"> 43 44 <img 44 45 className="max-h-[100px] max-w-[100px] rounded-full mr-[25px]"
+14 -2
apps/embed/src/embeds/RecentScrobblesEmbedPage.tsx
··· 1 - export function RecentScrobblesEmbedPage() { 2 - return <></>; 1 + import type { Profile } from "../types/profile"; 2 + import type { Scrobble } from "../types/scrobble"; 3 + 4 + export type RecentScrobblesEmbedPageProps = { 5 + profile: Profile; 6 + scrobbles: Scrobble[]; 7 + }; 8 + 9 + export function RecentScrobblesEmbedPage(props: RecentScrobblesEmbedPageProps) { 10 + return ( 11 + <div className="p-[15px]"> 12 + <h2 className="m-[0px]">Recent Listens</h2> 13 + </div> 14 + ); 3 15 }
+14 -2
apps/embed/src/embeds/TopAlbumsEmbedPage.tsx
··· 1 - export function TopAlbumsEmbedPage() { 2 - return <></>; 1 + import type { Album } from "../types/album"; 2 + import type { Profile } from "../types/profile"; 3 + 4 + export type TopAlbumEmbedPageProps = { 5 + profile: Profile; 6 + albums: Album[]; 7 + }; 8 + 9 + export function TopAlbumsEmbedPage(props: TopAlbumEmbedPageProps) { 10 + return ( 11 + <div className="p-[15px]"> 12 + <h2 className="m-[0px]">Top Albums</h2> 13 + </div> 14 + ); 3 15 }
+55 -2
apps/embed/src/embeds/TopArtistsEmbedPage.tsx
··· 1 - export function TopArtistsEmbedPage() { 2 - return <></>; 1 + import { v4 } from "uuid"; 2 + import type { Artist } from "../types/artist"; 3 + import type { Profile } from "../types/profile"; 4 + import ArtistIcon from "../components/Icons/Artist"; 5 + import dayjs from "dayjs"; 6 + import Header from "../components/Header"; 7 + 8 + export type TopArtistsEmbedPageProps = { 9 + profile: Profile; 10 + artists: Artist[]; 11 + }; 12 + 13 + export function TopArtistsEmbedPage(props: TopArtistsEmbedPageProps) { 14 + return ( 15 + <div className="p-[15px]"> 16 + <Header profile={props.profile} /> 17 + <h2 className="m-[0px] mb-[15px]">Top Artists</h2> 18 + 19 + <div className="w-full overflow-x-auto"> 20 + <table className="table-borderless table"> 21 + <tbody> 22 + {props.artists.map((artist, index) => ( 23 + <tr key={v4()}> 24 + <td> 25 + <div className="flex flex-row items-center"> 26 + <div className="mr-[20px] min-w-[30px]">{index + 1}</div> 27 + <a 28 + href={`https://rocksky.app/${artist.uri?.split("at://")[1]?.replace("app.rocksky.", "")}`} 29 + target="_blank" 30 + className="flex flex-row items-center no-underline text-inherit" 31 + > 32 + {artist.picture && ( 33 + <img 34 + className="max-w-[60px] max-h-[60px] rounded-full mr-[20px]" 35 + src={artist.picture!} 36 + /> 37 + )} 38 + {!artist.picture && ( 39 + <div className="w-[60px] h-[60px] rounded-full bg-[var(--color-avatar-background)] flex items-center justify-center mr-[20px]"> 40 + <div className="h-[30px] w-[30px]"> 41 + <ArtistIcon /> 42 + </div> 43 + </div> 44 + )} 45 + <div>{artist.name}</div> 46 + </a> 47 + </div> 48 + </td> 49 + </tr> 50 + ))} 51 + </tbody> 52 + </table> 53 + </div> 54 + </div> 55 + ); 3 56 }
+14 -2
apps/embed/src/embeds/TopTracksEmbedPage.tsx
··· 1 - export function TopTracksEmbedPage() { 2 - return <></>; 1 + import type { Profile } from "../types/profile"; 2 + import type { Track } from "../types/track"; 3 + 4 + export type TopTracksEmbedPageProps = { 5 + profile: Profile; 6 + tracks: Track[]; 7 + }; 8 + 9 + export function TopTracksEmbedPage(props: TopTracksEmbedPageProps) { 10 + return ( 11 + <div className="p-[15px]"> 12 + <h2 className="m-[0px]">Top Tracks</h2> 13 + </div> 14 + ); 3 15 }
+48 -9
apps/embed/src/index.tsx
··· 15 15 import getProfileStats from "./xrpc/getStats"; 16 16 import getTopGenres from "./xrpc/getTopGenres"; 17 17 import getTopTrack from "./xrpc/getTopTrack"; 18 + import getTopArtists from "./xrpc/getTopArtists"; 19 + import getTopAlbums from "./xrpc/getTopAlbums"; 20 + import getTopTracks from "./xrpc/getTopTracks"; 21 + import getRecentScrobbles from "./xrpc/getRecentScrobbles"; 18 22 19 23 const app = new Hono(); 20 24 ··· 22 26 23 27 app.use(renderer); 24 28 25 - app.get("/embed/u/:handle/top/artists", (c) => { 26 - return c.render(<TopArtistsEmbedPage />); 29 + app.get("/embed/u/:handle/top/artists", async (c) => { 30 + const handle = c.req.param("handle"); 31 + const [{ profile, ok: profileOk }, { topArtists, ok: artistsOk }] = 32 + await Promise.all([getProfile(handle), getTopArtists(handle)]); 33 + 34 + if (!profileOk || !artistsOk) { 35 + return c.text("Profile not found", 404); 36 + } 37 + 38 + return c.render( 39 + <TopArtistsEmbedPage profile={profile} artists={topArtists} />, 40 + ); 27 41 }); 28 42 29 - app.get("/embed/u/:handle/top/albums", (c) => { 30 - return c.render(<TopAlbumsEmbedPage />); 43 + app.get("/embed/u/:handle/top/albums", async (c) => { 44 + const handle = c.req.param("handle"); 45 + const [{ profile, ok: profileOk }, { topAlbums, ok: albumsOk }] = 46 + await Promise.all([getProfile(handle), getTopAlbums(handle)]); 47 + if (!profileOk || !albumsOk) { 48 + return c.text("Profile not found", 404); 49 + } 50 + 51 + return c.render(<TopAlbumsEmbedPage profile={profile} albums={topAlbums} />); 31 52 }); 32 53 33 - app.get("/embed/u/:handle/top/tracks", (c) => { 34 - return c.render(<TopTracksEmbedPage />); 54 + app.get("/embed/u/:handle/top/tracks", async (c) => { 55 + const handle = c.req.param("handle"); 56 + const [{ profile, ok: profileOk }, { topTracks, ok: tracksOk }] = 57 + await Promise.all([getProfile(handle), getTopTracks(handle)]); 58 + 59 + if (!profileOk || !tracksOk) { 60 + return c.text("Profile not found", 404); 61 + } 62 + 63 + return c.render(<TopTracksEmbedPage profile={profile} tracks={topTracks} />); 35 64 }); 36 65 37 66 app.get("/embed/song/:id", (c) => { ··· 88 117 return c.render(<NowPlayingEmbedPage />); 89 118 }); 90 119 91 - app.get("/embed/u/:handle/recent", (c) => { 92 - return c.render(<RecentScrobblesEmbedPage />); 120 + app.get("/embed/u/:handle/recent", async (c) => { 121 + const handle = c.req.param("handle"); 122 + const [{ profile, ok: profileOk }, { scrobbles, ok: scrobblesOk }] = 123 + await Promise.all([getProfile(handle), getRecentScrobbles(handle)]); 124 + 125 + if (!profileOk || !scrobblesOk) { 126 + return c.text("Profile not found", 404); 127 + } 128 + 129 + return c.render( 130 + <RecentScrobblesEmbedPage profile={profile} scrobbles={scrobbles} />, 131 + ); 93 132 }); 94 133 95 134 app.get("/embed/u/:handle/summary", (c) => { ··· 101 140 <div className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center"> 102 141 <div className="bg-white p-8 rounded-lg shadow-2xl"> 103 142 <h1 className="text-4xl font-bold text-gray-800 mb-4"> 104 - Hello from Hono + React! 143 + Embed a Rocksky Scrobble 105 144 </h1> 106 145 <p className="text-gray-600"> 107 146 This is server-side rendered with Tailwind CSS
+7
apps/embed/src/styles.css
··· 2 2 @tailwind components; 3 3 @tailwind utilities; 4 4 5 + @plugin "flyonui"; 6 + @plugin "@iconify/tailwind4"; 7 + 8 + @import "../node_modules/flyonui/variants.css"; 9 + @source "../node_modules/flyonui/dist/index.js"; 10 + 5 11 @font-face { 6 12 font-family: "RockfordSansLight"; 7 13 src: url("/public/fonts/RockfordSans-Light.otf") format("opentype"); ··· 69 75 --font-rockford-light: "RockfordSansLight"; 70 76 --color-text-muted: #42576ca6; 71 77 --color-genre: #3f03fb; 78 + --color-avatar-background: #f4f0ff; 72 79 } 73 80 74 81 .dark {
+11
apps/embed/src/types/album.ts
··· 1 + export type Album = { 2 + id: string; 3 + title: string; 4 + artist: string; 5 + albumArt: string; 6 + year: number | null; 7 + uri: string; 8 + artistUri: string; 9 + playCount: number; 10 + uniqueListeners: number; 11 + };
+5 -1
apps/embed/src/types/artist.ts
··· 1 1 export type Artist = { 2 2 id: string; 3 3 name: string; 4 - tags: string[]; 4 + playCount: number; 5 + uniqueListeners: number; 6 + picture: string | null; 7 + uri: string; 8 + tags: string[] | null; 5 9 };
+16
apps/embed/src/types/scrobble.ts
··· 1 + export type Scrobble = { 2 + id: string; 3 + trackId: string; 4 + title: string; 5 + artist: string; 6 + albumArtist: string; 7 + albumArt: string; 8 + album: string; 9 + handle: string; 10 + did: string; 11 + uri: string; 12 + trackUri: string; 13 + artistUri: string; 14 + albumUri: string; 15 + createdAt: string; 16 + };
+9 -4
apps/embed/src/types/track.ts
··· 1 1 export type Track = { 2 2 id: string; 3 3 title: string; 4 - album: string; 5 - albumArt: string; 6 - albumUri: string; 7 4 artist: string; 8 - artistUri: string; 9 5 albumArtist: string; 6 + albumArt: string; 7 + trackNumber: number; 8 + duration: number; 9 + discNumber: number; 10 10 uri: string; 11 + artistUri: string; 12 + albumUri: string; 13 + album: string; 14 + playCount: number; 15 + uniqueListeners: number; 11 16 };
+18
apps/embed/src/xrpc/getRecentScrobbles.ts
··· 1 + import { ROCKSKY_API_URL } from "../consts"; 2 + import type { Scrobble } from "../types/scrobble"; 3 + 4 + export default async function getRecentScrobbles(handle: string) { 5 + const url = new URL( 6 + `${ROCKSKY_API_URL}/xrpc/app.rocksky.actor.getActorScrobbles`, 7 + ); 8 + url.searchParams.append("did", handle); 9 + url.searchParams.append("limit", "20"); 10 + const res = await fetch(url); 11 + 12 + if (!res.ok) { 13 + return { scrobbles: [], ok: res.ok }; 14 + } 15 + 16 + const { scrobbles } = (await res.json()) as { scrobbles: Scrobble[] }; 17 + return { scrobbles, ok: res.ok }; 18 + }
+18
apps/embed/src/xrpc/getTopAlbums.ts
··· 1 + import { ROCKSKY_API_URL } from "../consts"; 2 + import type { Album } from "../types/album"; 3 + 4 + export default async function getTopAlbums(handle: string) { 5 + const url = new URL( 6 + `${ROCKSKY_API_URL}/xrpc/app.rocksky.actor.getActorAlbums`, 7 + ); 8 + url.searchParams.append("did", handle); 9 + url.searchParams.append("limit", "20"); 10 + const res = await fetch(url); 11 + 12 + if (!res.ok) { 13 + return { topAlbums: [], ok: res.ok }; 14 + } 15 + 16 + const { albums } = (await res.json()) as { albums: Album[] }; 17 + return { topAlbums: albums, ok: res.ok }; 18 + }
+23
apps/embed/src/xrpc/getTopArtists.ts
··· 1 + import { ROCKSKY_API_URL } from "../consts"; 2 + import getLastDays from "../lib/getLastDays"; 3 + import type { Artist } from "../types/artist"; 4 + 5 + export default async function getTopArtists(handle: string) { 6 + const [start, end] = getLastDays(7); 7 + const url = new URL( 8 + `${ROCKSKY_API_URL}/xrpc/app.rocksky.actor.getActorArtists`, 9 + ); 10 + url.searchParams.append("did", handle); 11 + url.searchParams.append("startDate", start.toISOString()); 12 + url.searchParams.append("endDate", end.toISOString()); 13 + url.searchParams.append("limit", "20"); 14 + 15 + const res = await fetch(url); 16 + 17 + if (!res.ok) { 18 + return { topArtists: [], ok: res.ok }; 19 + } 20 + 21 + const { artists } = (await res.json()) as { artists: Artist[] }; 22 + return { topArtists: artists, ok: res.ok }; 23 + }
+19
apps/embed/src/xrpc/getTopTracks.ts
··· 1 + import { ROCKSKY_API_URL } from "../consts"; 2 + import type { Track } from "../types/track"; 3 + 4 + export default async function getTopAlbums(handle: string) { 5 + const url = new URL( 6 + `${ROCKSKY_API_URL}/xrpc/app.rocksky.actor.getActorSongs`, 7 + ); 8 + url.searchParams.append("did", handle); 9 + url.searchParams.append("limit", "20"); 10 + 11 + const res = await fetch(url); 12 + 13 + if (!res.ok) { 14 + return { topTracks: [], ok: res.ok }; 15 + } 16 + 17 + const { tracks } = (await res.json()) as { tracks: Track[] }; 18 + return { topTracks: tracks, ok: res.ok }; 19 + }