nodes/avatechai-avatar-graph-comfyui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: preview display

Browse Source
This commit is contained in:
EdwinWong
2024-01-24 11:53:03 +08:00
parent 10d93e0823
commit 82e3f4dbec
3 changed files with 111 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/AvatarPreview.js
+1 -1
View File
@@ -706,7 +706,7 @@ export function AvatarPreview() {
console.log(showPreview);
return (
(showPreview.val ? "" : "hidden ") +
(showPreview.val && !showEditor.val ? "" : "hidden ") +
"absolute w-[360px] h-[360px] rounded-xl overflow-hidden right-0 top-0 z-[99] pointer-events-auto flex border-none bg-transparent"
);
},
js/state.js
+4 -2
View File
@@ -19,11 +19,13 @@
*/
import { van } from "./van.js";
export const iframeSrc = van.state("https://editor.avatech.ai?comfyui=true");
export const showEditor = van.state(false);
// localStorage.getItem("showPreview") == 'true'
export const showPreview = van.state(true);
console.log(localStorage.getItem("showPreview"));
if (localStorage.getItem("showPreview") == null)
localStorage.setItem("showPreview", 'true')
export const showPreview = van.state(localStorage.getItem("showPreview") == 'true');
export const previewUrl = van.state(
"https://editor.avatech.ai/viewer?avatarId=default&debug=true&width=350&height=350&hideTrigger=true&voiceSelection=true&hideUI=true"
);
js/tw-styles.css
+106 -116
View File
@@ -1,7 +1,7 @@
@import url('https://fonts.googleapis.com/css2?family=Gabarito&display=swap');
/*
! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com
! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
*/
/*
@@ -34,11 +34,9 @@
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
html {
line-height: 1.5;
/* 1 */
-webkit-text-size-adjust: 100%;
@@ -48,14 +46,12 @@ html,
-o-tab-size: 4;
tab-size: 4;
/* 3 */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* 4 */
font-feature-settings: normal;
/* 5 */
font-variation-settings: normal;
/* 6 */
-webkit-tap-highlight-color: transparent;
/* 7 */
}
/*
@@ -127,10 +123,8 @@ strong {
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
@@ -139,12 +133,8 @@ samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 1 */
font-feature-settings: normal;
/* 2 */
font-variation-settings: normal;
/* 3 */
font-size: 1em;
/* 4 */
/* 2 */
}
/*
@@ -1023,50 +1013,85 @@ html{
.btn-outline.btn-primary:hover{
--tw-text-opacity: 1;
color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
}
@supports (color: color-mix(in oklab, black, black)){
.btn-outline.btn-primary:hover{
background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
}
}
.btn-outline.btn-secondary:hover{
--tw-text-opacity: 1;
color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
}
@supports (color: color-mix(in oklab, black, black)){
.btn-outline.btn-secondary:hover{
background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
}
}
.btn-outline.btn-accent:hover{
--tw-text-opacity: 1;
color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
}
@supports (color: color-mix(in oklab, black, black)){
.btn-outline.btn-accent:hover{
background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
}
}
.btn-outline.btn-success:hover{
--tw-text-opacity: 1;
color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
}
@supports (color: color-mix(in oklab, black, black)){
.btn-outline.btn-success:hover{
background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
}
}
.btn-outline.btn-info:hover{
--tw-text-opacity: 1;
color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
}
@supports (color: color-mix(in oklab, black, black)){
.btn-outline.btn-info:hover{
background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
}
}
.btn-outline.btn-warning:hover{
--tw-text-opacity: 1;
color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
}
@supports (color: color-mix(in oklab, black, black)){
.btn-outline.btn-warning:hover{
background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
}
}
.btn-outline.btn-error:hover{
--tw-text-opacity: 1;
color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
}
@supports (color: color-mix(in oklab, black, black)){
.btn-outline.btn-error:hover{
background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
}
}
.btn-disabled:hover,
@@ -1411,6 +1436,43 @@ html{
}
}
@supports (color: color-mix(in oklab, black, black)){
.btn-outline.btn-primary.btn-active{
background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
}
.btn-outline.btn-secondary.btn-active{
background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
}
.btn-outline.btn-accent.btn-active{
background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
}
.btn-outline.btn-success.btn-active{
background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
}
.btn-outline.btn-info.btn-active{
background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
}
.btn-outline.btn-warning.btn-active{
background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
}
.btn-outline.btn-error.btn-active{
background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
}
}
.btn:focus-visible{
outline-style: solid;
outline-width: 2px;
@@ -1484,8 +1546,6 @@ html{
.btn-outline.btn-primary.btn-active{
--tw-text-opacity: 1;
color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
}
.btn-outline.btn-secondary{
@@ -1496,8 +1556,6 @@ html{
.btn-outline.btn-secondary.btn-active{
--tw-text-opacity: 1;
color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
}
.btn-outline.btn-accent{
@@ -1508,8 +1566,6 @@ html{
.btn-outline.btn-accent.btn-active{
--tw-text-opacity: 1;
color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
}
.btn-outline.btn-success{
@@ -1520,8 +1576,6 @@ html{
.btn-outline.btn-success.btn-active{
--tw-text-opacity: 1;
color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
}
.btn-outline.btn-info{
@@ -1532,8 +1586,6 @@ html{
.btn-outline.btn-info.btn-active{
--tw-text-opacity: 1;
color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
}
.btn-outline.btn-warning{
@@ -1544,8 +1596,6 @@ html{
.btn-outline.btn-warning.btn-active{
--tw-text-opacity: 1;
color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
}
.btn-outline.btn-error{
@@ -1556,8 +1606,6 @@ html{
.btn-outline.btn-error.btn-active{
--tw-text-opacity: 1;
color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
}
.btn.btn-disabled,
@@ -2421,6 +2469,10 @@ details.collapse summary::-webkit-details-marker{
z-index: 200;
}
.z-\[999\]{
z-index: 999;
}
.z-\[99\]{
z-index: 99;
}
@@ -2487,6 +2539,10 @@ details.collapse summary::-webkit-details-marker{
height: 24rem;
}
.h-\[360px\]{
height: 360px;
}
.h-\[394px\]{
height: 394px;
}
@@ -2495,35 +2551,6 @@ details.collapse summary::-webkit-details-marker{
height: 100%;
}
.h-fit{
height: -moz-fit-content;
height: fit-content;
}
.h-\[400px\]{
height: 400px;
}
.h-\[420px\]{
height: 420px;
}
.h-\[410px\]{
height: 410px;
}
.h-\[360px\]{
height: 360px;
}
.min-h-\[400px\]{
min-height: 400px;
}
.min-h-\[380px\]{
min-height: 380px;
}
.min-h-\[350px\]{
min-height: 350px;
}
@@ -2552,6 +2579,10 @@ details.collapse summary::-webkit-details-marker{
width: 32rem;
}
.w-\[360px\]{
width: 360px;
}
.w-fit{
width: -moz-fit-content;
width: fit-content;
@@ -2561,38 +2592,6 @@ details.collapse summary::-webkit-details-marker{
width: 100%;
}
.w-\[\]{
width: ;
}
.w-\[400px\]{
width: 400px;
}
.w-\[420px\]{
width: 420px;
}
.w-\[410px\]{
width: 410px;
}
.w-\[360px\]{
width: 360px;
}
.min-w-\[400px\]{
min-width: 400px;
}
.min-w-\[380\]{
min-width: 380;
}
.min-w-\[380px\]{
min-width: 380px;
}
.min-w-\[350px\]{
min-width: 350px;
}
@@ -2687,10 +2686,6 @@ details.collapse summary::-webkit-details-marker{
border-radius: 0.125rem;
}
.rounded-2xl{
border-radius: 1rem;
}
.rounded-xl{
border-radius: 0.75rem;
}
@@ -2912,10 +2907,6 @@ details.collapse summary::-webkit-details-marker{
padding: 1rem;
}
.p-24{
padding: 6rem;
}
.\!px-0{
padding-left: 0px !important;
padding-right: 0px !important;
@@ -2936,9 +2927,8 @@ details.collapse summary::-webkit-details-marker{
padding-bottom: 0.5rem;
}
.py-16{
padding-top: 4rem;
padding-bottom: 4rem;
.pr-2{
padding-right: 0.5rem;
}
.text-start{