mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-19 22:09:37 +00:00
5139e0564e
## Summary Reduce lower level font definitions in most places. Default to Inter. See #6912 ## Review Focus Comic Sans is still an option... ## Screenshots (if applicable) <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7220-Style-Font-Consistency-2c26d73d365081348f2dd8909dd9bb8f) by [Unito](https://www.unito.io) --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: github-actions <github-actions@github.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: 10px;
|
|
}
|
|
.model_preview_prefix {
|
|
font-weight: 700;
|
|
}
|
|
</style>
|