feat: update share avatar button
This commit is contained in:
Radionic
+68
-49
@@ -113,6 +113,7 @@ async function uploadImage() {
|
||||
}
|
||||
|
||||
const jsonWorkflowLoading = van.state(true);
|
||||
export const sharedAvatarLink = van.state("");
|
||||
|
||||
async function prepareImageFromUrlRedirect(stage) {
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
||||
@@ -130,8 +131,8 @@ async function prepareImageFromUrlRedirect(stage) {
|
||||
graph.change();
|
||||
previewImg.val = api.apiURL(
|
||||
`/view?filename=${encodeURIComponent(
|
||||
imageName,
|
||||
)}&type=input&subfolder=create_avatar_endpoint${app.getPreviewFormatParam()}`,
|
||||
imageName
|
||||
)}&type=input&subfolder=create_avatar_endpoint${app.getPreviewFormatParam()}`
|
||||
);
|
||||
console.log(previewImg);
|
||||
}
|
||||
@@ -176,7 +177,7 @@ export function AvatarPreview() {
|
||||
});
|
||||
|
||||
const loading = van.state(false);
|
||||
const shareLoading = van.state(false);
|
||||
const shareLoading = van.state("share"); // share, loading, shared
|
||||
|
||||
api.addEventListener("execution_start", (evt) => {
|
||||
loading.val = true;
|
||||
@@ -207,14 +208,14 @@ export function AvatarPreview() {
|
||||
class: () =>
|
||||
" bg-gradient-to-b from-black via-[#5F5F5F] via-60% to-white text-transparent bg-clip-text font-gabarito text-4xl",
|
||||
},
|
||||
"Avatech v1",
|
||||
"Avatech v1"
|
||||
),
|
||||
div(
|
||||
{
|
||||
class: () =>
|
||||
" bg-gradient-to-b from-black via-[#5F5F5F] via-50% to-white text-transparent bg-clip-text font-gabarito text-2xl",
|
||||
},
|
||||
"Get your DALLE3 AI Personal Clone",
|
||||
"Get your DALLE3 AI Personal Clone"
|
||||
),
|
||||
div(
|
||||
{
|
||||
@@ -305,7 +306,7 @@ export function AvatarPreview() {
|
||||
},
|
||||
},
|
||||
div({ class: "badge badge-neutral" }, "2"),
|
||||
"Edit Segment",
|
||||
"Edit Segment"
|
||||
),
|
||||
button(
|
||||
{
|
||||
@@ -513,7 +514,7 @@ export function AvatarPreview() {
|
||||
class: () =>
|
||||
"w-full flex justify-center font-bold italic text-gray-500",
|
||||
},
|
||||
span("We are launching OpenAI Assistant API integration soon!"),
|
||||
span("We are launching OpenAI Assistant API integration soon!")
|
||||
),
|
||||
div(
|
||||
{ class: () => "w-[24rem] flex justify-center items-center" },
|
||||
@@ -529,34 +530,52 @@ export function AvatarPreview() {
|
||||
button(
|
||||
{
|
||||
class: () =>
|
||||
"btn rounded rounded-l-none rounded-r-md no-animation bg-neutral hover:bg-neutral-focus text-white border-none normal-case",
|
||||
"btn rounded rounded-l-none rounded-r-md no-animation bg-neutral-800 hover:bg-neutral-950 text-white border-none normal-case",
|
||||
onclick: async () => {
|
||||
shareLoading.val = true;
|
||||
const url = await (await fetch("./get_webhook")).json();
|
||||
await uploadPreview();
|
||||
await fetch(url, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username: "Avabot",
|
||||
avatar_url:
|
||||
"https://avatech-avatar-dev1.nyc3.cdn.digitaloceanspaces.com/avatechai.png",
|
||||
content: "New register! \n" + email.val,
|
||||
}),
|
||||
});
|
||||
shareLoading.val = false;
|
||||
if (shareLoading.val === "share") {
|
||||
shareLoading.val = "loading";
|
||||
const url = await (await fetch("./get_webhook")).json();
|
||||
await uploadPreview();
|
||||
await fetch(url, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username: "Avabot",
|
||||
avatar_url:
|
||||
"https://avatech-avatar-dev1.nyc3.cdn.digitaloceanspaces.com/avatechai.png",
|
||||
content: "New register! \n" + email.val,
|
||||
}),
|
||||
});
|
||||
shareLoading.val = "shared";
|
||||
}
|
||||
if (sharedAvatarLink.val) {
|
||||
await navigator.clipboard.writeText(sharedAvatarLink.val);
|
||||
alertDialog.val = {
|
||||
text: "Avatar link copied to clipboard!",
|
||||
time: 5000,
|
||||
};
|
||||
}
|
||||
},
|
||||
},
|
||||
() =>
|
||||
shareLoading.val
|
||||
? span({
|
||||
class: "loading loading-spinner loading-md",
|
||||
})
|
||||
: "Get Avatar Link",
|
||||
),
|
||||
),
|
||||
() => {
|
||||
switch (shareLoading.val) {
|
||||
case "share":
|
||||
return "Get Avatar Link";
|
||||
case "loading":
|
||||
return span({
|
||||
class: "loading loading-spinner loading-md",
|
||||
});
|
||||
case "shared":
|
||||
return span({
|
||||
class: "iconify text-xl",
|
||||
"data-icon": "lucide:copy-check",
|
||||
});
|
||||
}
|
||||
}
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
@@ -573,7 +592,7 @@ export function AvatarPreview() {
|
||||
class: "iconify text-lg",
|
||||
"data-icon": "ic:round-close",
|
||||
"data-inline": "false",
|
||||
}),
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
@@ -590,7 +609,7 @@ export function AvatarPreview() {
|
||||
class: "iconify text-lg",
|
||||
"data-icon": "mdi:restart",
|
||||
"data-inline": "false",
|
||||
}),
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
@@ -612,8 +631,8 @@ export function AvatarPreview() {
|
||||
"data-inline": "false",
|
||||
}),
|
||||
span({ class: "sm:flex hidden" }, () =>
|
||||
jsonWorkflowLoading.val ? "Loading" : "Change workflow",
|
||||
),
|
||||
jsonWorkflowLoading.val ? "Loading" : "Change workflow"
|
||||
)
|
||||
),
|
||||
ul(
|
||||
{
|
||||
@@ -635,7 +654,7 @@ export function AvatarPreview() {
|
||||
else isGenerateFlow.val = true;
|
||||
},
|
||||
},
|
||||
() => val,
|
||||
() => val
|
||||
);
|
||||
}),
|
||||
div({ class: () => "divider !my-0" }),
|
||||
@@ -661,9 +680,9 @@ export function AvatarPreview() {
|
||||
// document.getElementById("comfy-load-button").click();
|
||||
},
|
||||
},
|
||||
"Import...",
|
||||
),
|
||||
),
|
||||
"Import..."
|
||||
)
|
||||
)
|
||||
);
|
||||
// return button(
|
||||
// {
|
||||
@@ -706,7 +725,7 @@ export function AvatarPreview() {
|
||||
"absolute top-4 right-4 btn sm:w-32 w-20 text-black btn-ghost text-xs z-[200] !px-0 normal-case sm:btn-md btn-sm",
|
||||
onclick: () => window.open("https://twitter.com/avatech_gg", "_blank"),
|
||||
},
|
||||
"Twitter",
|
||||
"Twitter"
|
||||
);
|
||||
};
|
||||
|
||||
@@ -733,7 +752,7 @@ export function AvatarPreview() {
|
||||
},
|
||||
renderCloseButton(),
|
||||
renderRestartButton(),
|
||||
renderChangeWorkflowButton(),
|
||||
renderChangeWorkflowButton()
|
||||
),
|
||||
renderTwitter(),
|
||||
() => {
|
||||
@@ -746,7 +765,7 @@ export function AvatarPreview() {
|
||||
},
|
||||
renderIFrame(),
|
||||
renderSteps(),
|
||||
renderShareLink(),
|
||||
renderShareLink()
|
||||
);
|
||||
} else {
|
||||
return div(
|
||||
@@ -759,12 +778,12 @@ export function AvatarPreview() {
|
||||
div(
|
||||
{ class: () => "flex flex-col" },
|
||||
renderIFrame(),
|
||||
renderShareLink(),
|
||||
),
|
||||
renderShareLink()
|
||||
)
|
||||
);
|
||||
}
|
||||
},
|
||||
),
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -784,8 +803,8 @@ function showImage(name) {
|
||||
}
|
||||
img.src = api.apiURL(
|
||||
`/view?filename=${encodeURIComponent(
|
||||
name,
|
||||
)}&type=input&subfolder=${subfolder}${app.getPreviewFormatParam()}`,
|
||||
name
|
||||
)}&type=input&subfolder=${subfolder}${app.getPreviewFormatParam()}`
|
||||
);
|
||||
node.setSizeForImage?.();
|
||||
}
|
||||
|
||||
+3
-4
@@ -26,6 +26,7 @@ import { initModel, loadNpyTensor } from "./onnx.js";
|
||||
import "https://code.iconify.design/3/3.1.0/iconify.min.js";
|
||||
import { autoSegment, drawSegment, getClicks } from "./LayerEditor.js";
|
||||
import { infoDialog } from "./dialog.js";
|
||||
import { sharedAvatarLink } from "./AvatarPreview.js";
|
||||
|
||||
export const generatedImages = {};
|
||||
|
||||
@@ -713,11 +714,9 @@ export async function uploadPreview() {
|
||||
body: file,
|
||||
}).catch((error) => console.error(error));
|
||||
|
||||
infoDialog.show(
|
||||
`Preview avatar url: <a href='https://editor.avatech.ai/viewer?avatarId=${labData.modelId}' target="_blank">https://editor.avatech.ai/viewer?avatarId=${labData.modelId}</a>` +
|
||||
`\nChat url: <a href='https://labs.avatech.ai?avatarId=${labData.modelId}' target="_blank">https://labs.avatech.ai?avatarId=${labData.modelId}</a>`
|
||||
);
|
||||
sharedAvatarLink.val = `https://editor.avatech.ai/viewer?avatarId=${labData?.modelId}`;
|
||||
previewModelId.val = labData.modelId;
|
||||
return labData;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+27
-470
@@ -726,10 +726,6 @@ html{
|
||||
--tw-text-opacity: 1;
|
||||
color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
|
||||
}
|
||||
|
||||
.tab:hover{
|
||||
--tw-text-opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.btn{
|
||||
@@ -1033,75 +1029,12 @@ html{
|
||||
background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
|
||||
}
|
||||
}
|
||||
|
||||
.tab[disabled],
|
||||
.tab[disabled]:hover{
|
||||
cursor: not-allowed;
|
||||
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
|
||||
--tw-text-opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown:is(details) summary::-webkit-details-marker{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-input{
|
||||
height: 3rem;
|
||||
flex-shrink: 1;
|
||||
-webkit-padding-end: 1rem;
|
||||
padding-inline-end: 1rem;
|
||||
font-size: 1rem;
|
||||
line-height: 2;
|
||||
line-height: 1.5rem;
|
||||
overflow: hidden;
|
||||
border-radius: var(--rounded-btn, 0.5rem);
|
||||
border-width: 1px;
|
||||
border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
|
||||
--tw-border-opacity: 0;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
|
||||
}
|
||||
|
||||
.file-input::file-selector-button{
|
||||
-webkit-margin-end: 1rem;
|
||||
margin-inline-end: 1rem;
|
||||
display: inline-flex;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
line-height: 1em;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
transition-duration: 200ms;
|
||||
border-style: solid;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: var(--fallback-n,oklch(var(--n)/var(--tw-border-opacity)));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
--tw-text-opacity: 1;
|
||||
color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
|
||||
text-decoration-line: none;
|
||||
border-width: var(--border-btn, 1px);
|
||||
animation: button-pop var(--animation-btn, 0.25s) ease-out;
|
||||
}
|
||||
|
||||
.label{
|
||||
display: flex;
|
||||
-webkit-user-select: none;
|
||||
@@ -1336,92 +1269,6 @@ html{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.radio{
|
||||
flex-shrink: 0;
|
||||
--chkbg: var(--bc);
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border-radius: 9999px;
|
||||
border-width: 1px;
|
||||
border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
|
||||
--tw-border-opacity: 0.2;
|
||||
}
|
||||
|
||||
.tabs{
|
||||
display: grid;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(.tab-active),
|
||||
.tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(.tab-active){
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.tab{
|
||||
position: relative;
|
||||
grid-row-start: 1;
|
||||
display: inline-flex;
|
||||
height: 2rem;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
line-height: 2;
|
||||
--tab-padding: 1rem;
|
||||
--tw-text-opacity: 0.5;
|
||||
--tab-color: var(--fallback-bc,oklch(var(--bc)/1));
|
||||
--tab-bg: var(--fallback-b1,oklch(var(--b1)/1));
|
||||
--tab-border-color: var(--fallback-b3,oklch(var(--b3)/1));
|
||||
color: var(--tab-color);
|
||||
-webkit-padding-start: var(--tab-padding, 1rem);
|
||||
padding-inline-start: var(--tab-padding, 1rem);
|
||||
-webkit-padding-end: var(--tab-padding, 1rem);
|
||||
padding-inline-end: var(--tab-padding, 1rem);
|
||||
}
|
||||
|
||||
.tab:is(input[type="radio"]):after{
|
||||
--tw-content: attr(aria-label);
|
||||
content: var(--tw-content);
|
||||
}
|
||||
|
||||
.tab:not(input):empty{
|
||||
cursor: default;
|
||||
grid-column-start: span 9999;
|
||||
}
|
||||
|
||||
.tab-content{
|
||||
grid-column: 1 / -1;
|
||||
grid-column-end: span 9999;
|
||||
grid-row-start: 2;
|
||||
margin-top: calc(var(--tab-border) * -1);
|
||||
display: none;
|
||||
border-color: transparent;
|
||||
border-width: var(--tab-border, 0);
|
||||
}
|
||||
|
||||
:checked + .tab-content:nth-child(2),
|
||||
.tab-active + .tab-content:nth-child(2){
|
||||
border-start-start-radius: 0px;
|
||||
}
|
||||
|
||||
input.tab:checked + .tab-content,
|
||||
.tab-active + .tab-content{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.textarea{
|
||||
min-height: 3rem;
|
||||
flex-shrink: 1;
|
||||
@@ -1684,46 +1531,6 @@ details.collapse summary::-webkit-details-marker{
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.file-input-bordered{
|
||||
--tw-border-opacity: 0.2;
|
||||
}
|
||||
|
||||
.file-input:focus{
|
||||
outline-style: solid;
|
||||
outline-width: 2px;
|
||||
outline-offset: 2px;
|
||||
outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
|
||||
}
|
||||
|
||||
.file-input-disabled,
|
||||
.file-input[disabled]{
|
||||
cursor: not-allowed;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
|
||||
--tw-text-opacity: 0.2;
|
||||
}
|
||||
|
||||
.file-input-disabled::-moz-placeholder, .file-input[disabled]::-moz-placeholder{
|
||||
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
|
||||
--tw-placeholder-opacity: 0.2;
|
||||
}
|
||||
|
||||
.file-input-disabled::placeholder,
|
||||
.file-input[disabled]::placeholder{
|
||||
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
|
||||
--tw-placeholder-opacity: 0.2;
|
||||
}
|
||||
|
||||
.file-input-disabled::file-selector-button, .file-input[disabled]::file-selector-button{
|
||||
--tw-border-opacity: 0;
|
||||
background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
|
||||
--tw-bg-opacity: 0.2;
|
||||
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
|
||||
--tw-text-opacity: 0.2;
|
||||
}
|
||||
|
||||
.input input:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
@@ -1985,32 +1792,6 @@ details.collapse summary::-webkit-details-marker{
|
||||
}
|
||||
}
|
||||
|
||||
.radio:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.radio:focus-visible{
|
||||
outline-style: solid;
|
||||
outline-width: 2px;
|
||||
outline-offset: 2px;
|
||||
outline-color: var(--fallback-bc,oklch(var(--bc)/1));
|
||||
}
|
||||
|
||||
.radio:checked,
|
||||
.radio[aria-checked="true"]{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
|
||||
background-image: none;
|
||||
animation: radiomark var(--animation-input, 0.2s) ease-out;
|
||||
box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset,
|
||||
0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset;
|
||||
}
|
||||
|
||||
.radio:disabled{
|
||||
cursor: not-allowed;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
@keyframes radiomark{
|
||||
0%{
|
||||
box-shadow: 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset,
|
||||
@@ -2052,132 +1833,6 @@ details.collapse summary::-webkit-details-marker{
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-lifted .tab:focus-visible{
|
||||
border-end-end-radius: 0;
|
||||
border-end-start-radius: 0;
|
||||
}
|
||||
|
||||
.tab.tab-active:not(.tab-disabled):not([disabled]),
|
||||
.tab:is(input:checked){
|
||||
border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
|
||||
--tw-border-opacity: 1;
|
||||
--tw-text-opacity: 1;
|
||||
}
|
||||
|
||||
.tab:focus{
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.tab:focus-visible{
|
||||
outline: 2px solid currentColor;
|
||||
outline-offset: -5px;
|
||||
}
|
||||
|
||||
.tab-disabled,
|
||||
.tab[disabled]{
|
||||
cursor: not-allowed;
|
||||
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
|
||||
--tw-text-opacity: 0.2;
|
||||
}
|
||||
|
||||
.tabs-bordered .tab{
|
||||
border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
|
||||
--tw-border-opacity: 0.2;
|
||||
border-style: solid;
|
||||
border-bottom-width: calc(var(--tab-border, 1px) + 1px);
|
||||
}
|
||||
|
||||
.tabs-lifted .tab{
|
||||
border: var(--tab-border, 1px) solid transparent;
|
||||
border-width: 0 0 var(--tab-border, 1px) 0;
|
||||
border-start-start-radius: var(--tab-radius, 0.5rem);
|
||||
border-start-end-radius: var(--tab-radius, 0.5rem);
|
||||
border-bottom-color: var(--tab-border-color);
|
||||
-webkit-padding-start: var(--tab-padding, 1rem);
|
||||
padding-inline-start: var(--tab-padding, 1rem);
|
||||
-webkit-padding-end: var(--tab-padding, 1rem);
|
||||
padding-inline-end: var(--tab-padding, 1rem);
|
||||
padding-top: var(--tab-border, 1px);
|
||||
}
|
||||
|
||||
.tabs-lifted .tab.tab-active:not(.tab-disabled):not([disabled]),
|
||||
.tabs-lifted .tab:is(input:checked){
|
||||
background-color: var(--tab-bg);
|
||||
border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
|
||||
border-inline-start-color: var(--tab-border-color);
|
||||
border-inline-end-color: var(--tab-border-color);
|
||||
border-top-color: var(--tab-border-color);
|
||||
-webkit-padding-start: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
|
||||
padding-inline-start: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
|
||||
-webkit-padding-end: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
|
||||
padding-inline-end: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
|
||||
padding-bottom: var(--tab-border, 1px);
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.tabs-lifted .tab.tab-active:not(.tab-disabled):not([disabled]):before, .tabs-lifted .tab:is(input:checked):before{
|
||||
z-index: 1;
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: calc(100% + var(--tab-radius, 0.5rem) * 2);
|
||||
height: var(--tab-radius, 0.5rem);
|
||||
bottom: 0;
|
||||
background-size: var(--tab-radius, 0.5rem);
|
||||
background-position: top left,
|
||||
top right;
|
||||
background-repeat: no-repeat;
|
||||
--tab-grad: calc(69% - var(--tab-border, 1px));
|
||||
--radius-start: radial-gradient(
|
||||
circle at top left,
|
||||
transparent var(--tab-grad),
|
||||
var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
|
||||
var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
|
||||
var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
|
||||
);
|
||||
--radius-end: radial-gradient(
|
||||
circle at top right,
|
||||
transparent var(--tab-grad),
|
||||
var(--tab-border-color) calc(var(--tab-grad) + 0.25px),
|
||||
var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
|
||||
var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px)
|
||||
);
|
||||
background-image: var(--radius-start), var(--radius-end);
|
||||
}
|
||||
|
||||
.tabs-lifted .tab.tab-active:not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted .tab:is(input:checked):first-child:before{
|
||||
background-image: var(--radius-end);
|
||||
background-position: top right;
|
||||
}
|
||||
|
||||
[dir="rtl"] .tabs-lifted .tab.tab-active:not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted .tab:is(input:checked):first-child:before{
|
||||
background-image: var(--radius-start);
|
||||
background-position: top left;
|
||||
}
|
||||
|
||||
.tabs-lifted .tab.tab-active:not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted .tab:is(input:checked):last-child:before{
|
||||
background-image: var(--radius-start);
|
||||
background-position: top left;
|
||||
}
|
||||
|
||||
[dir="rtl"] .tabs-lifted .tab.tab-active:not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted .tab:is(input:checked):last-child:before{
|
||||
background-image: var(--radius-end);
|
||||
background-position: top right;
|
||||
}
|
||||
|
||||
.tabs-lifted
|
||||
.tab-active:not(.tab-disabled):not([disabled])
|
||||
+ .tabs-lifted
|
||||
.tab-active:not(.tab-disabled):not([disabled]):before, .tabs-lifted .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before{
|
||||
background-image: var(--radius-end);
|
||||
background-position: top right;
|
||||
}
|
||||
|
||||
.tabs-boxed .tab{
|
||||
border-radius: var(--rounded-btn, 0.5rem);
|
||||
}
|
||||
|
||||
.table tr.active,
|
||||
.table tr.active:nth-child(even),
|
||||
.table-zebra tbody tr:nth-child(even){
|
||||
@@ -2376,36 +2031,6 @@ details.collapse summary::-webkit-details-marker{
|
||||
place-items: end;
|
||||
}
|
||||
|
||||
.tabs-md :where(.tab){
|
||||
height: 2rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
line-height: 2;
|
||||
--tab-padding: 1rem;
|
||||
}
|
||||
|
||||
.tabs-lg :where(.tab){
|
||||
height: 3rem;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
line-height: 2;
|
||||
--tab-padding: 1.25rem;
|
||||
}
|
||||
|
||||
.tabs-sm :where(.tab){
|
||||
height: 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: .75rem;
|
||||
--tab-padding: 0.75rem;
|
||||
}
|
||||
|
||||
.tabs-xs :where(.tab){
|
||||
height: 1.25rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: .75rem;
|
||||
--tab-padding: 0.5rem;
|
||||
}
|
||||
|
||||
.avatar.online:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -2529,6 +2154,10 @@ details.collapse summary::-webkit-details-marker{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.-left-\[100px\]{
|
||||
left: -100px;
|
||||
}
|
||||
|
||||
.bottom-0{
|
||||
bottom: 0px;
|
||||
}
|
||||
@@ -2589,10 +2218,6 @@ details.collapse summary::-webkit-details-marker{
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
.-left-\[100px\]{
|
||||
left: -100px;
|
||||
}
|
||||
|
||||
.z-\[1000\]{
|
||||
z-index: 1000;
|
||||
}
|
||||
@@ -2621,16 +2246,16 @@ details.collapse summary::-webkit-details-marker{
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.my-0{
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.\!my-0{
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.my-0{
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.mb-2{
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@@ -2651,10 +2276,6 @@ details.collapse summary::-webkit-details-marker{
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mt-24{
|
||||
margin-top: 6rem;
|
||||
}
|
||||
|
||||
.mt-4{
|
||||
margin-top: 1rem;
|
||||
}
|
||||
@@ -2679,10 +2300,6 @@ details.collapse summary::-webkit-details-marker{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aspect-square{
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.h-3{
|
||||
height: 0.75rem;
|
||||
}
|
||||
@@ -2712,22 +2329,22 @@ details.collapse summary::-webkit-details-marker{
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.w-20{
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.w-3{
|
||||
width: 0.75rem;
|
||||
}
|
||||
|
||||
.w-32{
|
||||
width: 8rem;
|
||||
}
|
||||
|
||||
.w-40{
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
.w-56{
|
||||
width: 14rem;
|
||||
}
|
||||
|
||||
.w-96{
|
||||
width: 24rem;
|
||||
}
|
||||
|
||||
.w-\[24rem\]{
|
||||
width: 24rem;
|
||||
}
|
||||
@@ -2736,10 +2353,6 @@ details.collapse summary::-webkit-details-marker{
|
||||
width: 32rem;
|
||||
}
|
||||
|
||||
.w-\[550px\]{
|
||||
width: 550px;
|
||||
}
|
||||
|
||||
.w-fit{
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
@@ -2749,30 +2362,6 @@ details.collapse summary::-webkit-details-marker{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-10{
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.w-14{
|
||||
width: 3.5rem;
|
||||
}
|
||||
|
||||
.w-24{
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.w-20{
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.w-64{
|
||||
width: 16rem;
|
||||
}
|
||||
|
||||
.w-96{
|
||||
width: 24rem;
|
||||
}
|
||||
|
||||
.min-w-\[300px\]{
|
||||
min-width: 300px;
|
||||
}
|
||||
@@ -2781,10 +2370,6 @@ details.collapse summary::-webkit-details-marker{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.grow{
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.-translate-x-1\/2{
|
||||
--tw-translate-x: -50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
@@ -2799,18 +2384,10 @@ details.collapse summary::-webkit-details-marker{
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.cursor-pointer{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.resize-none{
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.grid-flow-col{
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.grid-cols-2{
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
@@ -2843,10 +2420,6 @@ details.collapse summary::-webkit-details-marker{
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.justify-stretch{
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.gap-2{
|
||||
gap: 0.5rem;
|
||||
}
|
||||
@@ -2974,11 +2547,6 @@ details.collapse summary::-webkit-details-marker{
|
||||
border-color: rgb(168 85 247 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.bg-\[\#f6f6f6\]{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(246 246 246 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-base-200{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
|
||||
@@ -3004,6 +2572,11 @@ details.collapse summary::-webkit-details-marker{
|
||||
background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
|
||||
}
|
||||
|
||||
.bg-neutral-800{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(38 38 38 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-orange-100{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 237 213 / var(--tw-bg-opacity));
|
||||
@@ -3206,17 +2779,6 @@ details.collapse summary::-webkit-details-marker{
|
||||
outline-offset: 2px !important;
|
||||
}
|
||||
|
||||
.ring-1{
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
}
|
||||
|
||||
.ring-black{
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
|
||||
}
|
||||
|
||||
.blur{
|
||||
--tw-blur: blur(8px);
|
||||
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);
|
||||
@@ -3417,6 +2979,11 @@ img[src] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hover\:bg-neutral-950:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(10 10 10 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-red-500:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(239 68 68 / var(--tw-text-opacity));
|
||||
@@ -3432,17 +2999,7 @@ img[src] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sm\:w-10{
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.sm\:w-32{
|
||||
width: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px){
|
||||
.md\:w-full{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user