mirror of
https://github.com/gradio-app/gradio.git
synced 2025-01-18 10:44:33 +08:00
fix ci (#6235)
* fix ci * format * add changeset * ignore generated files * delete changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
pngwn
GitHub
parent
4840b4bc29
commit
874005938d
@ -24,4 +24,7 @@
|
||||
sweep.yaml
|
||||
**/.vercel/**
|
||||
**/build/**
|
||||
**/*.md
|
||||
**/*.md
|
||||
**/src/lib/json/**/*
|
||||
**/playwright/.cache/**/*
|
||||
**/theme/src/pollen.css
|
||||
2
.github/workflows/ui.yml
vendored
2
.github/workflows/ui.yml
vendored
@ -30,6 +30,8 @@ jobs:
|
||||
run: pnpm --filter @gradio/client build
|
||||
- name: build the wasm module
|
||||
run: pnpm --filter @gradio/wasm build
|
||||
- name: format check
|
||||
run: pnpm format:check
|
||||
- name: lint
|
||||
run: pnpm lint
|
||||
- name: typecheck
|
||||
|
||||
@ -194,15 +194,14 @@ code.language-bash {
|
||||
@apply rounded-b-md border-2 border-gray-100 -mt-0.5;
|
||||
}
|
||||
|
||||
|
||||
.tip {
|
||||
@apply bg-gradient-to-br from-orange-50 to-white border-orange-50 border-l-2 border-l-orange-300 text-orange-700 p-4 px-6;
|
||||
}
|
||||
|
||||
.tip code {
|
||||
@apply text-orange-700
|
||||
@apply text-orange-700;
|
||||
}
|
||||
|
||||
.tip a {
|
||||
@apply text-orange-700
|
||||
}
|
||||
@apply text-orange-700;
|
||||
}
|
||||
|
||||
@ -57,11 +57,11 @@
|
||||
$: code = demos.find((demo) => demo.name === current_selection)?.code || "";
|
||||
$: requirements =
|
||||
demos.find((demo) => demo.name === current_selection)?.requirements || [];
|
||||
|
||||
|
||||
$: if (mounted) {
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
timeout = setTimeout(() => {
|
||||
update(code, requirements);
|
||||
}, 1000);
|
||||
@ -75,7 +75,6 @@
|
||||
}
|
||||
let preview_width = 100;
|
||||
let lg_breakpoint = false;
|
||||
|
||||
|
||||
$: lg_breakpoint = preview_width - 13 >= 688;
|
||||
</script>
|
||||
@ -121,26 +120,44 @@
|
||||
class:fullscreen
|
||||
bind:clientWidth={preview_width}
|
||||
>
|
||||
<div class="flex justify-between align-middle h-8 border-b pl-4 pr-2 ml-0 sm:ml-2">
|
||||
<div
|
||||
class="flex justify-between align-middle h-8 border-b pl-4 pr-2 ml-0 sm:ml-2"
|
||||
>
|
||||
<div class="flex align-middle">
|
||||
<h3 class="pr-2 pt-1">Preview</h3>
|
||||
<p class="pt-1.5 text-sm text-gray-600 hidden sm:block">{preview_width - 13}px</p>
|
||||
<p
|
||||
class:text-orange-300={lg_breakpoint}
|
||||
class:text-gray-300={!lg_breakpoint}
|
||||
class="pt-2 text-sm pl-2 w-6 hidden sm:block">
|
||||
<p class="pt-1.5 text-sm text-gray-600 hidden sm:block">
|
||||
{preview_width - 13}px
|
||||
</p>
|
||||
<p
|
||||
class:text-orange-300={lg_breakpoint}
|
||||
class:text-gray-300={!lg_breakpoint}
|
||||
class="pt-2 text-sm pl-2 w-6 hidden sm:block"
|
||||
>
|
||||
<svg viewBox="0 0 110 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="50" height="100" rx="15" fill="currentColor"/>
|
||||
<rect x="60" width="50" height="100" rx="15" fill="currentColor" />
|
||||
<rect width="50" height="100" rx="15" fill="currentColor" />
|
||||
<rect
|
||||
x="60"
|
||||
width="50"
|
||||
height="100"
|
||||
rx="15"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</p>
|
||||
<p
|
||||
class:text-orange-300={!lg_breakpoint}
|
||||
class:text-gray-300={lg_breakpoint}
|
||||
class="pt-2 text-sm pl-2 w-6 hidden sm:block">
|
||||
<p
|
||||
class:text-orange-300={!lg_breakpoint}
|
||||
class:text-gray-300={lg_breakpoint}
|
||||
class="pt-2 text-sm pl-2 w-6 hidden sm:block"
|
||||
>
|
||||
<svg viewBox="0 0 110 110" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="110" height="45" rx="15" fill="currentColor"/>
|
||||
<rect y="50" width="110" height="45" rx="15" fill="currentColor" />
|
||||
<rect width="110" height="45" rx="15" fill="currentColor" />
|
||||
<rect
|
||||
y="50"
|
||||
width="110"
|
||||
height="45"
|
||||
rx="15"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
@ -205,7 +222,7 @@
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
position: fixed !important;
|
||||
position: fixed !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
@ -221,5 +238,4 @@
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -42,7 +42,6 @@
|
||||
}
|
||||
|
||||
import DropDown from "$lib/components/VersionDropdown.svelte";
|
||||
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={onKeyDown} />
|
||||
@ -107,17 +106,17 @@
|
||||
/>
|
||||
<DropDown></DropDown>
|
||||
<select
|
||||
bind:value={docs_type} on:change={() => {
|
||||
if (docs_type == "js") {
|
||||
window.location.href = "/main/docs/js/";
|
||||
}
|
||||
}}
|
||||
class="rounded-md border-gray-200 focus:placeholder-transparent focus:shadow-none focus:border-orange-500 focus:ring-0 text-xs mt-2 py-1 pl-2 pr-7 font-mono"
|
||||
bind:value={docs_type}
|
||||
on:change={() => {
|
||||
if (docs_type == "js") {
|
||||
window.location.href = "/main/docs/js/";
|
||||
}
|
||||
}}
|
||||
class="rounded-md border-gray-200 focus:placeholder-transparent focus:shadow-none focus:border-orange-500 focus:ring-0 text-xs mt-2 py-1 pl-2 pr-7 font-mono"
|
||||
>
|
||||
<option value="js">js</option>
|
||||
<option value="python">python</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
|
||||
<p class="font-semibold px-4 my-2 block">Building Demos</p>
|
||||
|
||||
@ -13,110 +13,119 @@
|
||||
|
||||
<!-- 4.0 Launch BANNER -->
|
||||
<div class="flex-row">
|
||||
<div class="relative isolate flex items-center gap-x-6 overflow-hidden bg-gradient-to-r from-white via-yellow-200 to-white px-6 py-2 sm:px-3.5 sm:before:flex-1">
|
||||
<div class="flex flex-wrap items-center gap-x-4 gap-y-2">
|
||||
<p class="text-md leading-6 text-gray-700">
|
||||
<strong class="font-semibold">What's New in Gradio 4.0?</strong>
|
||||
</p>
|
||||
<a href="https://www.youtube.com/watch?v=5MgmKBCOpvU" target="_blank" class="flex-none rounded-full px-3.5 py-1 text-sm font-semibold text-white bg-gradient-to-br from-orange-300 via-orange-500 to-orange-300 hover:drop-shadow-md">Watch <span aria-hidden="true">→</span></a>
|
||||
<p class="text-md leading-6 text-gray-700">
|
||||
<strong class="font-semibold">Custom Components<sup class="text-orange-500">NEW</sup></strong>
|
||||
</p>
|
||||
<a href="https://www.gradio.app/guides/five-minute-guide" target="_blank" class="flex-none rounded-full px-3.5 py-1 text-sm font-semibold text-white bg-gradient-to-br from-orange-300 via-orange-500 to-orange-300 hover:drop-shadow-md">Guides <span aria-hidden="true">→</span></a>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="flex flex-1 justify-end">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="container mx-auto flex flex-wrap justify-between flex-row relative items-center px-4 py-5 gap-6 text-lg z-50"
|
||||
>
|
||||
<a href="/">
|
||||
<img src={gradio_logo} alt="Gradio logo" />
|
||||
</a>
|
||||
<svg
|
||||
class="h-8 w-8 lg:hidden"
|
||||
viewBox="-10 -10 20 20"
|
||||
on:click={() => (click_nav = !click_nav)}
|
||||
<div
|
||||
class="relative isolate flex items-center gap-x-6 overflow-hidden bg-gradient-to-r from-white via-yellow-200 to-white px-6 py-2 sm:px-3.5 sm:before:flex-1"
|
||||
>
|
||||
<rect x="-7" y="-6" width="14" height="2" />
|
||||
<rect x="-7" y="-1" width="14" height="2" />
|
||||
<rect x="-7" y="4" width="14" height="2" />
|
||||
</svg>
|
||||
|
||||
<nav
|
||||
class:hidden={!show_nav}
|
||||
class="w-full flex-col gap-3 lg:flex lg:w-auto lg:flex-row lg:gap-8"
|
||||
>
|
||||
<a class="thin-link flex items-center gap-3" href="/guides/quickstart"
|
||||
><span>⚡</span> <span>Quickstart</span>
|
||||
</a>
|
||||
<a class="thin-link flex items-center gap-3" href="/docs"
|
||||
><span>✍️</span> <span>Docs</span>
|
||||
</a>
|
||||
<a class="thin-link flex items-center gap-3" href="/guides"
|
||||
><span>💡</span> <span>Guides</span></a
|
||||
>
|
||||
<a class="thin-link flex items-center gap-3" href="/playground"
|
||||
><span>🎢</span>
|
||||
<span>Playground<sup class="text-orange-500">NEW</sup></span></a
|
||||
>
|
||||
<div
|
||||
on:mouseenter={() => (show_help_menu = true)}
|
||||
on:mouseleave={() => (show_help_menu = false)}
|
||||
class="group relative flex cursor-pointer items-center gap-3"
|
||||
>
|
||||
<span>🖐</span> <span>Community</span>
|
||||
<svg
|
||||
class="h-4 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
<div class="flex flex-wrap items-center gap-x-4 gap-y-2">
|
||||
<p class="text-md leading-6 text-gray-700">
|
||||
<strong class="font-semibold">What's New in Gradio 4.0?</strong>
|
||||
</p>
|
||||
<a
|
||||
href="https://www.youtube.com/watch?v=5MgmKBCOpvU"
|
||||
target="_blank"
|
||||
class="flex-none rounded-full px-3.5 py-1 text-sm font-semibold text-white bg-gradient-to-br from-orange-300 via-orange-500 to-orange-300 hover:drop-shadow-md"
|
||||
>Watch <span aria-hidden="true">→</span></a
|
||||
>
|
||||
<path
|
||||
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
|
||||
/>
|
||||
</svg>
|
||||
{#if show_help_menu}
|
||||
<div
|
||||
class="help-menu absolute top-6 w-52 flex-col bg-white shadow group-hover:flex sm:right-0"
|
||||
<p class="text-md leading-6 text-gray-700">
|
||||
<strong class="font-semibold"
|
||||
>Custom Components<sup class="text-orange-500">NEW</sup></strong
|
||||
>
|
||||
<a
|
||||
class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
|
||||
href="https://github.com/gradio-app/gradio/issues/new/choose"
|
||||
target="_blank">File an Issue</a
|
||||
>
|
||||
<a
|
||||
class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
|
||||
href="https://discuss.huggingface.co/c/gradio/26"
|
||||
target="_blank">Discuss</a
|
||||
>
|
||||
<a
|
||||
class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
|
||||
target="_blank"
|
||||
href="https://discord.gg/feTf9x3ZSB">Discord</a
|
||||
>
|
||||
<a
|
||||
class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
|
||||
target="_blank"
|
||||
href="https://gradio.curated.co/">Newsletter</a
|
||||
>
|
||||
<a
|
||||
class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
|
||||
href="/brand">Brand</a
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</p>
|
||||
<a
|
||||
href="https://www.gradio.app/guides/five-minute-guide"
|
||||
target="_blank"
|
||||
class="flex-none rounded-full px-3.5 py-1 text-sm font-semibold text-white bg-gradient-to-br from-orange-300 via-orange-500 to-orange-300 hover:drop-shadow-md"
|
||||
>Guides <span aria-hidden="true">→</span></a
|
||||
>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="thin-link flex items-center gap-3"
|
||||
href="https://github.com/gradio-app/gradio"
|
||||
>
|
||||
<img src={github_black} class="w-6" alt="Github logo" />
|
||||
<div class="flex flex-1 justify-end"></div>
|
||||
</div>
|
||||
<div
|
||||
class="container mx-auto flex flex-wrap justify-between flex-row relative items-center px-4 py-5 gap-6 text-lg z-50"
|
||||
>
|
||||
<a href="/">
|
||||
<img src={gradio_logo} alt="Gradio logo" />
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<svg
|
||||
class="h-8 w-8 lg:hidden"
|
||||
viewBox="-10 -10 20 20"
|
||||
on:click={() => (click_nav = !click_nav)}
|
||||
>
|
||||
<rect x="-7" y="-6" width="14" height="2" />
|
||||
<rect x="-7" y="-1" width="14" height="2" />
|
||||
<rect x="-7" y="4" width="14" height="2" />
|
||||
</svg>
|
||||
|
||||
<nav
|
||||
class:hidden={!show_nav}
|
||||
class="w-full flex-col gap-3 lg:flex lg:w-auto lg:flex-row lg:gap-8"
|
||||
>
|
||||
<a class="thin-link flex items-center gap-3" href="/guides/quickstart"
|
||||
><span>⚡</span> <span>Quickstart</span>
|
||||
</a>
|
||||
<a class="thin-link flex items-center gap-3" href="/docs"
|
||||
><span>✍️</span> <span>Docs</span>
|
||||
</a>
|
||||
<a class="thin-link flex items-center gap-3" href="/guides"
|
||||
><span>💡</span> <span>Guides</span></a
|
||||
>
|
||||
<a class="thin-link flex items-center gap-3" href="/playground"
|
||||
><span>🎢</span>
|
||||
<span>Playground<sup class="text-orange-500">NEW</sup></span></a
|
||||
>
|
||||
<div
|
||||
on:mouseenter={() => (show_help_menu = true)}
|
||||
on:mouseleave={() => (show_help_menu = false)}
|
||||
class="group relative flex cursor-pointer items-center gap-3"
|
||||
>
|
||||
<span>🖐</span> <span>Community</span>
|
||||
<svg
|
||||
class="h-4 w-4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
|
||||
/>
|
||||
</svg>
|
||||
{#if show_help_menu}
|
||||
<div
|
||||
class="help-menu absolute top-6 w-52 flex-col bg-white shadow group-hover:flex sm:right-0"
|
||||
>
|
||||
<a
|
||||
class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
|
||||
href="https://github.com/gradio-app/gradio/issues/new/choose"
|
||||
target="_blank">File an Issue</a
|
||||
>
|
||||
<a
|
||||
class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
|
||||
href="https://discuss.huggingface.co/c/gradio/26"
|
||||
target="_blank">Discuss</a
|
||||
>
|
||||
<a
|
||||
class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
|
||||
target="_blank"
|
||||
href="https://discord.gg/feTf9x3ZSB">Discord</a
|
||||
>
|
||||
<a
|
||||
class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
|
||||
target="_blank"
|
||||
href="https://gradio.curated.co/">Newsletter</a
|
||||
>
|
||||
<a
|
||||
class="thin-link inline-block px-4 py-2 hover:bg-gray-100"
|
||||
href="/brand">Brand</a
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="thin-link flex items-center gap-3"
|
||||
href="https://github.com/gradio-app/gradio"
|
||||
>
|
||||
<img src={github_black} class="w-6" alt="Github logo" />
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
export let js_components: any;
|
||||
|
||||
export let current_nav_link = "";
|
||||
export let version_dropdown = false;
|
||||
export let version_dropdown = false;
|
||||
let docs_type = "js";
|
||||
|
||||
let show_nav = false;
|
||||
@ -39,7 +39,6 @@
|
||||
}
|
||||
|
||||
import DropDown from "$lib/components/VersionDropdown.svelte";
|
||||
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={onKeyDown} />
|
||||
@ -102,39 +101,51 @@
|
||||
placeholder="Search ⌘-k / ctrl-k"
|
||||
autocomplete="off"
|
||||
/>
|
||||
{#if version_dropdown}
|
||||
<DropDown docs_type="js"></DropDown>
|
||||
{/if}
|
||||
{#if version_dropdown}
|
||||
<DropDown docs_type="js"></DropDown>
|
||||
{/if}
|
||||
<select
|
||||
bind:value={docs_type} on:change={() => {
|
||||
if (docs_type == "python") {
|
||||
window.location.href = "../../docs/";
|
||||
}
|
||||
}}
|
||||
class="rounded-md border-gray-200 focus:placeholder-transparent focus:shadow-none focus:border-orange-500 focus:ring-0 text-xs mt-2 py-1 pl-2 pr-7 font-mono"
|
||||
bind:value={docs_type}
|
||||
on:change={() => {
|
||||
if (docs_type == "python") {
|
||||
window.location.href = "../../docs/";
|
||||
}
|
||||
}}
|
||||
class="rounded-md border-gray-200 focus:placeholder-transparent focus:shadow-none focus:border-orange-500 focus:ring-0 text-xs mt-2 py-1 pl-2 pr-7 font-mono"
|
||||
>
|
||||
<option value="js">js</option>
|
||||
<option value="python">python</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
|
||||
<p
|
||||
class="mx-4 block bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-0.5 mr-2 rounded-full text-orange-800 mb-1 w-fit hover:shadow-lg "
|
||||
>
|
||||
<a class="inline-block" href="./storybook"
|
||||
>
|
||||
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation" class="w-4 inline-block mb-1">
|
||||
<path d="M.62 18.43 0 1.92A1.006 1.006 0 0 1 .944.88L14.984.002a1.005 1.005 0 0 1 1.069 1.004v17.989a1.006 1.006 0 0 1-1.051 1.004L1.58 19.396a1.006 1.006 0 0 1-.96-.967Z" fill="#FF4785"></path>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="m13.88.071-1.932.12-.094 2.267a.15.15 0 0 0 .24.126l.88-.668.744.586a.15.15 0 0 0 .243-.123l-.08-2.308Zm-1.504 7.59c-.353.275-2.989.462-2.989.071.056-1.493-.612-1.558-.984-1.558-.352 0-.946.106-.946.906 0 .815.868 1.275 1.887 1.815 1.447.767 3.2 1.696 3.2 4.032 0 2.24-1.82 3.476-4.14 3.476-2.395 0-4.488-.969-4.252-4.328.093-.394 3.138-.3 3.138 0-.038 1.386.278 1.794 1.076 1.794.613 0 .891-.338.891-.906 0-.861-.904-1.369-1.945-1.953-1.409-.791-3.067-1.722-3.067-3.859 0-2.132 1.466-3.554 4.084-3.554 2.618 0 4.047 1.4 4.047 4.064Z" fill="#fff"></path>
|
||||
</svg>
|
||||
|
||||
|
||||
Storybook →</a
|
||||
>
|
||||
</p>
|
||||
<p
|
||||
class="mx-4 block bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-0.5 mr-2 rounded-full text-orange-800 mb-1 w-fit hover:shadow-lg"
|
||||
>
|
||||
<a class="inline-block" href="./storybook">
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="presentation"
|
||||
class="w-4 inline-block mb-1"
|
||||
>
|
||||
<path
|
||||
d="M.62 18.43 0 1.92A1.006 1.006 0 0 1 .944.88L14.984.002a1.005 1.005 0 0 1 1.069 1.004v17.989a1.006 1.006 0 0 1-1.051 1.004L1.58 19.396a1.006 1.006 0 0 1-.96-.967Z"
|
||||
fill="#FF4785"
|
||||
></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="m13.88.071-1.932.12-.094 2.267a.15.15 0 0 0 .24.126l.88-.668.744.586a.15.15 0 0 0 .243-.123l-.08-2.308Zm-1.504 7.59c-.353.275-2.989.462-2.989.071.056-1.493-.612-1.558-.984-1.558-.352 0-.946.106-.946.906 0 .815.868 1.275 1.887 1.815 1.447.767 3.2 1.696 3.2 4.032 0 2.24-1.82 3.476-4.14 3.476-2.395 0-4.488-.969-4.252-4.328.093-.394 3.138-.3 3.138 0-.038 1.386.278 1.794 1.076 1.794.613 0 .891-.338.891-.906 0-.861-.904-1.369-1.945-1.953-1.409-.791-3.067-1.722-3.067-3.859 0-2.132 1.466-3.554 4.084-3.554 2.618 0 4.047 1.4 4.047 4.064Z"
|
||||
fill="#fff"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
<p class="font-semibold px-4 my-2 block">Components</p>
|
||||
Storybook →</a
|
||||
>
|
||||
</p>
|
||||
|
||||
<p class="font-semibold px-4 my-2 block">Components</p>
|
||||
|
||||
{#each js_components as name}
|
||||
<a
|
||||
@ -144,9 +155,9 @@
|
||||
>
|
||||
{/each}
|
||||
<p class="font-semibold px-4 my-2 block">Client</p>
|
||||
<a
|
||||
class:current-nav-link={current_nav_link == "js-client"}
|
||||
class="px-4 block thin-link"
|
||||
href="./js-client/">JS Client</a
|
||||
>
|
||||
<a
|
||||
class:current-nav-link={current_nav_link == "js-client"}
|
||||
class="px-4 block thin-link"
|
||||
href="./js-client/">JS Client</a
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -74,8 +74,7 @@
|
||||
role="none"
|
||||
style="transform: translateX({px}px)"
|
||||
>
|
||||
<div hidden={hidden}
|
||||
class="inner">
|
||||
<div {hidden} class="inner">
|
||||
<div class="notches text-gray-400 select-none">||</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -121,7 +120,7 @@
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(1, 2.5);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@ -13,9 +13,10 @@
|
||||
$: is_docs = $page.route.id?.includes("/docs/");
|
||||
|
||||
$: docs_url = `${value === version ? "" : `/${value}`}/docs/${
|
||||
docs_type == "js" ? "js/" : ""
|
||||
docs_type == "js" ? "js/" : ""
|
||||
}${
|
||||
$page.params?.jsdoc || $page.params?.doc ||
|
||||
$page.params?.jsdoc ||
|
||||
$page.params?.doc ||
|
||||
(is_dynamic || path_parts.length !== 4
|
||||
? ""
|
||||
: path_parts[path_parts.length - 1])
|
||||
|
||||
@ -47,7 +47,7 @@ export async function load({ params, url }) {
|
||||
modals,
|
||||
routes,
|
||||
py_client,
|
||||
js,
|
||||
js,
|
||||
js_pages,
|
||||
on_main,
|
||||
wheel,
|
||||
|
||||
@ -67,7 +67,6 @@
|
||||
$: modals = data.modals;
|
||||
$: routes = data.routes;
|
||||
$: py_client = data.py_client;
|
||||
|
||||
</script>
|
||||
|
||||
<MetaTags
|
||||
|
||||
@ -50,7 +50,16 @@ function highlight(code: string, lang: string | undefined) {
|
||||
}
|
||||
|
||||
export async function load({ parent }) {
|
||||
const { components, helpers, modals, py_client, routes, js_client, on_main, wheel } = await parent();
|
||||
const {
|
||||
components,
|
||||
helpers,
|
||||
modals,
|
||||
py_client,
|
||||
routes,
|
||||
js_client,
|
||||
on_main,
|
||||
wheel
|
||||
} = await parent();
|
||||
|
||||
const guide_slug = [];
|
||||
|
||||
@ -114,4 +123,4 @@ export async function load({ parent }) {
|
||||
routes,
|
||||
py_client
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -71,9 +71,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:w-2/12 lg:block">
|
||||
|
||||
</div>
|
||||
<div
|
||||
class="float-right top-8 hidden sticky h-screen overflow-y-auto lg:w-2/12 lg:block"
|
||||
></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -81,4 +81,4 @@
|
||||
code {
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -3,8 +3,7 @@ import { redirect } from "@sveltejs/kit";
|
||||
export const prerender = true;
|
||||
|
||||
export function load({ params }) {
|
||||
if (params?.version)
|
||||
throw redirect(302, `/${params?.version}/docs/js/atoms`);
|
||||
if (params?.version) throw redirect(302, `/${params?.version}/docs/js/atoms`);
|
||||
|
||||
throw redirect(302, `/docs/js/atoms`);
|
||||
}
|
||||
|
||||
@ -51,10 +51,7 @@ function highlight(code: string, lang: string | undefined) {
|
||||
}
|
||||
|
||||
export async function load({ params, parent }) {
|
||||
const {
|
||||
js,
|
||||
js_pages,
|
||||
} = await parent();
|
||||
const { js, js_pages } = await parent();
|
||||
|
||||
let name = params.jsdoc;
|
||||
const guide_slug = [];
|
||||
@ -117,7 +114,7 @@ export async function load({ params, parent }) {
|
||||
highlighter: highlight
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
readme_html = await compiled?.code;
|
||||
}
|
||||
}
|
||||
@ -125,6 +122,6 @@ export async function load({ params, parent }) {
|
||||
return {
|
||||
name,
|
||||
readme_html,
|
||||
js_pages,
|
||||
js_pages
|
||||
};
|
||||
}
|
||||
|
||||
@ -9,9 +9,7 @@
|
||||
let readme_html = data.readme_html;
|
||||
let js_pages = data.js_pages;
|
||||
|
||||
let js_components = js_pages.filter(c => c !== "js-client");
|
||||
|
||||
|
||||
let js_components = js_pages.filter((c) => c !== "js-client");
|
||||
|
||||
$: name = data.name;
|
||||
$: readme_html = data.readme_html;
|
||||
@ -26,10 +24,7 @@
|
||||
|
||||
<main class="container mx-auto px-4 flex flex-col gap-4">
|
||||
<div class="flex w-full">
|
||||
<JSDocsNav
|
||||
current_nav_link={name}
|
||||
{js_components}
|
||||
/>
|
||||
<JSDocsNav current_nav_link={name} {js_components} />
|
||||
|
||||
<div class="flex flex-col w-full min-w-full lg:w-10/12 lg:min-w-0">
|
||||
<div>
|
||||
@ -48,7 +43,7 @@
|
||||
</div>
|
||||
|
||||
<div class="js_readme">
|
||||
<div class="lg:ml-10 mt-5">
|
||||
<div class="lg:ml-10 mt-5">
|
||||
<div class="prose text-lg max-w-full">
|
||||
{@html readme_html}
|
||||
</div>
|
||||
|
||||
@ -49,10 +49,7 @@ function highlight(code: string, lang: string | undefined) {
|
||||
}
|
||||
|
||||
export async function load({ params, parent }) {
|
||||
const {
|
||||
js,
|
||||
js_pages,
|
||||
} = await parent();
|
||||
const { js, js_pages } = await parent();
|
||||
|
||||
let name = params.jsdoc;
|
||||
const guide_slug = [];
|
||||
@ -112,7 +109,7 @@ export async function load({ params, parent }) {
|
||||
highlighter: highlight
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
readme_html = await compiled?.code;
|
||||
}
|
||||
}
|
||||
@ -120,6 +117,6 @@ export async function load({ params, parent }) {
|
||||
return {
|
||||
name,
|
||||
readme_html,
|
||||
js_pages,
|
||||
js_pages
|
||||
};
|
||||
}
|
||||
|
||||
@ -9,9 +9,7 @@
|
||||
let readme_html = data.readme_html;
|
||||
let js_pages = data.js_pages;
|
||||
|
||||
let js_components = js_pages.filter(c => c !== "js-client");
|
||||
|
||||
|
||||
let js_components = js_pages.filter((c) => c !== "js-client");
|
||||
|
||||
$: name = data.name;
|
||||
$: readme_html = data.readme_html;
|
||||
@ -26,11 +24,7 @@
|
||||
|
||||
<main class="container mx-auto px-4 flex flex-col gap-4">
|
||||
<div class="flex w-full">
|
||||
<JSDocsNav
|
||||
current_nav_link={""}
|
||||
{js_components}
|
||||
version_dropdown={false}
|
||||
/>
|
||||
<JSDocsNav current_nav_link={""} {js_components} version_dropdown={false} />
|
||||
|
||||
<div class="flex flex-col w-full min-w-full lg:w-10/12 lg:min-w-0">
|
||||
<div>
|
||||
@ -49,7 +43,11 @@
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row ml-10 mt-5">
|
||||
<iframe id="storybook" src="https://main--649585a46a67480e3074dc75.chromatic.com/" class="grow m-0 p-0 h-[70vh] border border-gray-200 shadow-xl rounded-xl"></iframe>
|
||||
<iframe
|
||||
id="storybook"
|
||||
src="https://main--649585a46a67480e3074dc75.chromatic.com/"
|
||||
class="grow m-0 p-0 h-[70vh] border border-gray-200 shadow-xl rounded-xl"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -63,17 +63,32 @@
|
||||
</div>
|
||||
|
||||
<!-- CUSTOM COMPONENTS HIGHLIGHT -->
|
||||
<div class="category mb-8 p-4 border-orange-300 border rounded-xl">
|
||||
<div class="category mb-8 p-4 border-orange-300 border rounded-xl">
|
||||
<h2 class="mb-4 text-2xl font-thin block">
|
||||
<svg class="inline align-baseline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="18" height="18" viewBox="0 0 256 256" xml:space="preserve">
|
||||
|
||||
<defs>
|
||||
</defs>
|
||||
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)">
|
||||
<path d="M 89.011 87.739 c -0.599 -1.371 -1.294 -2.652 -1.968 -3.891 l -0.186 -0.343 l -15.853 -15.91 c -0.371 -0.375 -0.746 -0.748 -1.12 -1.12 c -0.671 -0.667 -1.342 -1.335 -1.997 -2.018 l -1.459 -1.437 l 23.316 -23.317 l -1.704 -1.704 c -9.111 -9.112 -22.925 -12.518 -35.353 -8.759 l -6.36 -6.359 c 0.769 -7.805 -2.017 -15.69 -7.503 -21.175 L 37.123 0 L 0 37.122 l 1.706 1.704 c 5.487 5.487 13.368 8.271 21.176 7.503 l 6.36 6.36 C 25.484 65.115 28.889 78.93 38 88.041 l 1.703 1.704 l 23.316 -23.316 l 1.438 1.458 c 0.679 0.653 1.344 1.321 2.009 1.989 c 0.373 0.374 0.745 0.748 1.117 1.116 l 15.699 15.7 l 0.566 0.352 c 1.239 0.673 2.52 1.369 3.891 1.968 L 90 90 L 89.011 87.739 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255 124 1); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round"/>
|
||||
<svg
|
||||
class="inline align-baseline"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
version="1.1"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 256 256"
|
||||
xml:space="preserve"
|
||||
>
|
||||
<defs> </defs>
|
||||
<g
|
||||
style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;"
|
||||
transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
|
||||
>
|
||||
<path
|
||||
d="M 89.011 87.739 c -0.599 -1.371 -1.294 -2.652 -1.968 -3.891 l -0.186 -0.343 l -15.853 -15.91 c -0.371 -0.375 -0.746 -0.748 -1.12 -1.12 c -0.671 -0.667 -1.342 -1.335 -1.997 -2.018 l -1.459 -1.437 l 23.316 -23.317 l -1.704 -1.704 c -9.111 -9.112 -22.925 -12.518 -35.353 -8.759 l -6.36 -6.359 c 0.769 -7.805 -2.017 -15.69 -7.503 -21.175 L 37.123 0 L 0 37.122 l 1.706 1.704 c 5.487 5.487 13.368 8.271 21.176 7.503 l 6.36 6.36 C 25.484 65.115 28.889 78.93 38 88.041 l 1.703 1.704 l 23.316 -23.316 l 1.438 1.458 c 0.679 0.653 1.344 1.321 2.009 1.989 c 0.373 0.374 0.745 0.748 1.117 1.116 l 15.699 15.7 l 0.566 0.352 c 1.239 0.673 2.52 1.369 3.891 1.968 L 90 90 L 89.011 87.739 z"
|
||||
style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255 124 1); fill-rule: nonzero; opacity: 1;"
|
||||
transform=" matrix(1 0 0 1 0 0) "
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
||||
Custom Components<sup class="text-orange-500">NEW</sup>
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
@ -81,54 +96,54 @@
|
||||
<a
|
||||
class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
|
||||
.COLOR_SETS[3][0]} {data.COLOR_SETS[3][1]}"
|
||||
href="./guides/{guide.toLowerCase().replace(/ /g, "-")}"
|
||||
href="./guides/{guide.toLowerCase().replace(/ /g, '-')}"
|
||||
>
|
||||
<div class="flex flex-col p-4 h-min">
|
||||
<h2 class="group-hover:underline text-lg">{guide}</h2>
|
||||
<div class="tags-holder">
|
||||
</div>
|
||||
<div class="tags-holder"></div>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{#each data.guides_by_category as { category, guides }, i (category)}
|
||||
{#if !(category == "Custom Components")}
|
||||
<div class="category mb-8 p-4">
|
||||
<h2
|
||||
class:hidden={guides.filter(isNotHidden).length === 0}
|
||||
class="mb-4 text-2xl font-thin block"
|
||||
>
|
||||
{category}
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{#each guides as guide (guide.name)}
|
||||
<a
|
||||
class:hidden={guide.hidden}
|
||||
class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
|
||||
.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
|
||||
href=".{guide.url}"
|
||||
>
|
||||
<div class="flex flex-col p-4 h-min">
|
||||
<h2 class="group-hover:underline text-lg">{guide.pretty_name}</h2>
|
||||
<div class="tags-holder">
|
||||
{#if guide.tags}
|
||||
<p class="text-gray-600">
|
||||
<!--
|
||||
<div class="category mb-8 p-4">
|
||||
<h2
|
||||
class:hidden={guides.filter(isNotHidden).length === 0}
|
||||
class="mb-4 text-2xl font-thin block"
|
||||
>
|
||||
{category}
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{#each guides as guide (guide.name)}
|
||||
<a
|
||||
class:hidden={guide.hidden}
|
||||
class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
|
||||
.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
|
||||
href=".{guide.url}"
|
||||
>
|
||||
<div class="flex flex-col p-4 h-min">
|
||||
<h2 class="group-hover:underline text-lg">
|
||||
{guide.pretty_name}
|
||||
</h2>
|
||||
<div class="tags-holder">
|
||||
{#if guide.tags}
|
||||
<p class="text-gray-600">
|
||||
<!--
|
||||
-->{#each guide.tags as tag, j (tag)}<!--
|
||||
-->{tag}{#if j !== guide.tags.length - 1}, {/if}<!--
|
||||
-->{/each}<!--
|
||||
-->
|
||||
</p>
|
||||
{/if}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
|
||||
@ -14,7 +14,6 @@ import "prismjs/components/prism-csv";
|
||||
import "prismjs/components/prism-markup";
|
||||
import "prismjs/components/prism-javascript";
|
||||
|
||||
|
||||
const langs = {
|
||||
python: "python",
|
||||
py: "python",
|
||||
|
||||
@ -43,28 +43,24 @@
|
||||
>
|
||||
Version History
|
||||
</div>
|
||||
<div
|
||||
class="navigation max-w-full p-2 mx-2 mb-2"
|
||||
>
|
||||
<div class="navigation max-w-full p-2 mx-2 mb-2">
|
||||
{#each slugs as heading}
|
||||
{#if heading.text == "4.0.0"}
|
||||
<div class="flex">
|
||||
<a
|
||||
class="subheading block thin-link mr-1 px-2 rounded-lg w-min border border-orange-500"
|
||||
href={heading.href}
|
||||
on:click={handleAnchorClick}>{heading.text}</a
|
||||
>
|
||||
<p class="inline">🔥</p>
|
||||
</div>
|
||||
{:else}
|
||||
|
||||
<a
|
||||
class="subheading block thin-link mr-2 px-2 rounded-lg"
|
||||
href={heading.href}
|
||||
on:click={handleAnchorClick}>{heading.text}</a
|
||||
>
|
||||
|
||||
{/if}
|
||||
{#if heading.text == "4.0.0"}
|
||||
<div class="flex">
|
||||
<a
|
||||
class="subheading block thin-link mr-1 px-2 rounded-lg w-min border border-orange-500"
|
||||
href={heading.href}
|
||||
on:click={handleAnchorClick}>{heading.text}</a
|
||||
>
|
||||
<p class="inline">🔥</p>
|
||||
</div>
|
||||
{:else}
|
||||
<a
|
||||
class="subheading block thin-link mr-2 px-2 rounded-lg"
|
||||
href={heading.href}
|
||||
on:click={handleAnchorClick}>{heading.text}</a
|
||||
>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -204,7 +204,7 @@
|
||||
message: "",
|
||||
load_status: "pending",
|
||||
status: "sleeping",
|
||||
detail: "SLEEPING",
|
||||
detail: "SLEEPING"
|
||||
};
|
||||
|
||||
let app: Awaited<ReturnType<typeof client>>;
|
||||
@ -231,7 +231,7 @@
|
||||
|
||||
app = await client(api_url, {
|
||||
status_callback: handle_status,
|
||||
normalise_files: false,
|
||||
normalise_files: false
|
||||
});
|
||||
config = app.config;
|
||||
window.__gradio_space__ = config.space_id;
|
||||
@ -240,7 +240,7 @@
|
||||
message: "",
|
||||
load_status: "complete",
|
||||
status: "running",
|
||||
detail: "RUNNING",
|
||||
detail: "RUNNING"
|
||||
};
|
||||
|
||||
await mount_custom_css(wrapper, config.css);
|
||||
@ -257,7 +257,7 @@
|
||||
if (event.data === "CHANGE") {
|
||||
app = await client(api_url, {
|
||||
status_callback: handle_status,
|
||||
normalise_files: false,
|
||||
normalise_files: false
|
||||
});
|
||||
config = app.config;
|
||||
window.__gradio_space__ = config.space_id;
|
||||
@ -319,7 +319,7 @@
|
||||
CONFIG_ERROR: $_("errors.config_error"),
|
||||
BUILD_ERROR: $_("errors.build_error"),
|
||||
RUNTIME_ERROR: $_("errors.runtime_error"),
|
||||
PAUSED: $_("errors.space_paused"),
|
||||
PAUSED: $_("errors.space_paused")
|
||||
} as const,
|
||||
title(error: error_types): string {
|
||||
return encodeURIComponent($_("errors.space_not_working"));
|
||||
@ -330,7 +330,7 @@
|
||||
this.readable_error[error] || "an error"
|
||||
}.\n\nIt would be great if you could take a look at this because this space is being embedded on ${site}.\n\nThanks!`
|
||||
);
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
@ -342,7 +342,7 @@
|
||||
new CustomEvent("render", {
|
||||
bubbles: true,
|
||||
cancelable: false,
|
||||
composed: true,
|
||||
composed: true
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
all_file_data = (await upload(all_file_data, root))?.filter(
|
||||
(x) => x !== null
|
||||
) as FileData[];
|
||||
value = file_count === "single" ? all_file_data?.[0] : all_file_data
|
||||
value = file_count === "single" ? all_file_data?.[0] : all_file_data;
|
||||
dispatch("change", value);
|
||||
dispatch("upload", value);
|
||||
}
|
||||
|
||||
@ -91,7 +91,8 @@
|
||||
position: relative;
|
||||
background-color: var(--border-color-accent-subdued);
|
||||
animation: shadowPulse 2s linear infinite;
|
||||
box-shadow: -24px 0 var(--border-color-accent-subdued),
|
||||
box-shadow:
|
||||
-24px 0 var(--border-color-accent-subdued),
|
||||
24px 0 var(--border-color-accent-subdued);
|
||||
margin: var(--spacing-md);
|
||||
border-radius: 50%;
|
||||
@ -102,15 +103,21 @@
|
||||
|
||||
@keyframes shadowPulse {
|
||||
33% {
|
||||
box-shadow: -24px 0 var(--border-color-accent-subdued), 24px 0 #fff;
|
||||
box-shadow:
|
||||
-24px 0 var(--border-color-accent-subdued),
|
||||
24px 0 #fff;
|
||||
background: #fff;
|
||||
}
|
||||
66% {
|
||||
box-shadow: -24px 0 #fff, 24px 0 #fff;
|
||||
box-shadow:
|
||||
-24px 0 #fff,
|
||||
24px 0 #fff;
|
||||
background: var(--border-color-accent-subdued);
|
||||
}
|
||||
100% {
|
||||
box-shadow: -24px 0 #fff, 24px 0 var(--border-color-accent-subdued);
|
||||
box-shadow:
|
||||
-24px 0 #fff,
|
||||
24px 0 var(--border-color-accent-subdued);
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@ -202,7 +202,8 @@
|
||||
position: relative;
|
||||
background-color: var(--border-color-accent-subdued);
|
||||
animation: shadowPulse 2s linear infinite;
|
||||
box-shadow: -24px 0 var(--border-color-accent-subdued),
|
||||
box-shadow:
|
||||
-24px 0 var(--border-color-accent-subdued),
|
||||
24px 0 var(--border-color-accent-subdued);
|
||||
margin: var(--spacing-md);
|
||||
border-radius: 50%;
|
||||
@ -213,15 +214,21 @@
|
||||
|
||||
@keyframes shadowPulse {
|
||||
33% {
|
||||
box-shadow: -24px 0 var(--border-color-accent-subdued), 24px 0 #fff;
|
||||
box-shadow:
|
||||
-24px 0 var(--border-color-accent-subdued),
|
||||
24px 0 #fff;
|
||||
background: #fff;
|
||||
}
|
||||
66% {
|
||||
box-shadow: -24px 0 #fff, 24px 0 #fff;
|
||||
box-shadow:
|
||||
-24px 0 #fff,
|
||||
24px 0 #fff;
|
||||
background: var(--border-color-accent-subdued);
|
||||
}
|
||||
100% {
|
||||
box-shadow: -24px 0 #fff, 24px 0 var(--border-color-accent-subdued);
|
||||
box-shadow:
|
||||
-24px 0 #fff,
|
||||
24px 0 var(--border-color-accent-subdued);
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user