mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
a1c46d7086
## Summary Replace all hardcoded `text-[10px]`, `text-[11px]`, and `font-size: 10px` with a new `text-2xs` Tailwind theme token (0.625rem / 10px). ## Changes - **What**: Add `--text-2xs` custom theme token to design system CSS and replace 14 hardcoded font-size occurrences across 12 files with `text-2xs`. ## Review Focus Consistent use of design tokens instead of arbitrary values for small font sizes. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10604-fix-replace-hardcoded-font-size-10px-11px-with-text-2xs-Tailwind-token-3306d73d365081dfa1ebdc278e0a20b7) by [Unito](https://www.unito.io) Co-authored-by: Amp <amp@ampcode.com>
94 lines
2.4 KiB
Vue
94 lines
2.4 KiB
Vue
<template>
|
|
<div class="model_preview">
|
|
<div class="model_preview_title">
|
|
{{ modelDef.title }}
|
|
</div>
|
|
<div class="model_preview_top_container">
|
|
<div class="model_preview_filename">
|
|
{{ modelDef.file_name }}
|
|
</div>
|
|
<div v-if="modelDef.architecture_id" class="model_preview_architecture">
|
|
<span class="model_preview_prefix">{{ $t('g.architecture') }}: </span>
|
|
{{ modelDef.architecture_id }}
|
|
</div>
|
|
<div v-if="modelDef.author" class="model_preview_author">
|
|
<span class="model_preview_prefix">{{ $t('g.author') }}: </span>
|
|
{{ modelDef.author }}
|
|
</div>
|
|
</div>
|
|
<div v-if="modelDef.image" class="model_preview_image">
|
|
<img :src="modelDef.image" />
|
|
</div>
|
|
<div v-if="modelDef.usage_hint" class="model_preview_usage_hint">
|
|
<span class="model_preview_prefix">{{ $t('g.usageHint') }}: </span>
|
|
{{ modelDef.usage_hint }}
|
|
</div>
|
|
<div v-if="modelDef.trigger_phrase" class="model_preview_trigger_phrase">
|
|
<span class="model_preview_prefix">{{ $t('g.triggerPhrase') }}: </span>
|
|
{{ modelDef.trigger_phrase }}
|
|
</div>
|
|
<div v-if="modelDef.description" class="model_preview_description">
|
|
<span class="model_preview_prefix">{{ $t('g.description') }}: </span>
|
|
{{ modelDef.description }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ComfyModelDef } from '@/stores/modelStore'
|
|
|
|
const props = defineProps({
|
|
modelDef: {
|
|
type: ComfyModelDef,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const modelDef = props.modelDef
|
|
</script>
|
|
<style scoped>
|
|
.model_preview {
|
|
background-color: var(--comfy-menu-bg);
|
|
color: var(--descrip-text);
|
|
border: 1px solid var(--descrip-text);
|
|
min-width: 300px;
|
|
max-width: 500px;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
z-index: 9999;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
font-size: 12px;
|
|
padding: 10px;
|
|
}
|
|
.model_preview_image {
|
|
margin: auto;
|
|
width: fit-content;
|
|
}
|
|
.model_preview_image img {
|
|
max-width: 100%;
|
|
max-height: 150px;
|
|
object-fit: contain;
|
|
}
|
|
.model_preview_title {
|
|
font-weight: 700;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
.model_preview_top_container {
|
|
text-align: center;
|
|
line-height: 0.5;
|
|
}
|
|
.model_preview_filename,
|
|
.model_preview_author,
|
|
.model_preview_architecture {
|
|
display: inline-block;
|
|
text-align: center;
|
|
margin: 5px;
|
|
font-size: var(--text-2xs);
|
|
}
|
|
.model_preview_prefix {
|
|
font-weight: 700;
|
|
}
|
|
</style>
|