Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-30 11:11:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clean up widget item styling

Browse Source
This commit is contained in:
Austin Mroz
2025-09-16 18:11:24 -05:00
parent 784ebfe331
commit 02bf937741
1 changed files with 11 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/selectionbar/SubgraphNodeWidget.vue
View File

@@ -19,15 +19,20 @@ function onClick() {
} }
</script> </script>
<template> <template>
<div class="widget-item"> <div class="widget-item items-center gap-1">
<div class="icon"> <div class="size-4">
<i-lucide:grip-vertical v-if="isDraggable" /> <i-lucide:grip-vertical v-if="isDraggable" />
</div> </div>
<div class="widget-title"> <div class="flex-1">
<div class="widget-node">{{ nodeTitle }}</div> <div class="widget-node">{{ nodeTitle }}</div>
<div class="widget-name">{{ widgetName }}</div> <div class="widget-name">{{ widgetName }}</div>
</div> </div>
<Button size="small" text severity="secondary" @click.stop="onClick"> <Button
size="small"
class="shrink-0"
severity="secondary"
@click.stop="onClick"
>
<i-lucide:eye v-if="isShown" /> <i-lucide:eye v-if="isShown" />
<i-lucide:eye-off v-else /> <i-lucide:eye-off v-else />
</Button> </Button>
@@ -35,39 +40,17 @@ function onClick() {
</template> </template>
<style scoped> <style scoped>
.icon {
width: 16px;
height: 16px;
}
.widget-item { .widget-item {
display: flex; display: flex;
padding: 4px 16px 4px 0; padding: 4px 16px 4px 0;
align-items: center; word-break: break-all;
gap: 4px;
width: 100%;
border-radius: 4px;
background: var(--bg-color, #202020);
}
.widget-title {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1 0 0;
} }
.widget-node { .widget-node {
display: flex; color: var(--color-slate-100, #9c9eab);
height: 15px;
flex-direction: column;
justify-content: flex-end;
align-self: stretch;
color: var(--color-text-secondary, #9c9eab);
/* heading-text-nav */ /* heading-text-nav */
font-family: Inter; font-family: Inter;
font-size: 10px; font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: normal;
} }
.widget-name { .widget-name {
color: var(--color-text-primary, #fff); color: var(--color-text-primary, #fff);
@@ -75,8 +58,5 @@ function onClick() {
/* body-text-small */ /* body-text-small */
font-family: Inter; font-family: Inter;
font-size: 12px; font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
} }
</style> </style>