TBNilles/ComfyUI-Model-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pref: optimize styles

Browse Source 
Reduce the possibility of style pollution.
This commit is contained in:
hayden
2024-11-11 14:21:52 +08:00
parent 254ad8c597
commit 4038e240f0
8 changed files with 183 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.vscode/settings.json vendored
View File

@@ -23,7 +23,6 @@
"inputgroup",
"inputgroupaddon",
"iconfield",
"inputicon",
"inputtext",
"overlaybadge",
"usetoast",

2
src/components/DialogCreateTask.vue
View File

@@ -8,7 +8,7 @@
>
<template #suffix>
<span
class="pi pi-search pi-inputicon"
class="pi pi-search text-base opacity-60"
@click="searchModelsByUrl"
></span>
</template>

2
src/components/ModelBaseInfo.vue
View File

@@ -16,7 +16,7 @@
update-trigger="blur"
>
<template #suffix>
<span class="pi-inputicon">
<span class="text-base opacity-60">
{{ extension }}
</span>
</template>

145
src/components/ModelDescription.vue
View File

@@ -26,7 +26,7 @@
<div class="relative">
<div
v-if="renderedDescription"
class="markdown-it"
:class="$style['markdown-body']"
v-html="renderedDescription"
></div>
<div v-else class="flex flex-col items-center gap-2 py-5">
@@ -89,3 +89,146 @@ const exitEditMode = () => {
active.value = false
}
</script>
<style lang="less" module>
.markdown-body {
font-family: theme('fontFamily.sans');
font-size: theme('fontSize.base');
line-height: theme('lineHeight.relaxed');
word-break: break-word;
margin: 0;
&::before {
display: table;
content: '';
}
&::after {
display: table;
content: '';
clear: both;
}
> *:first-child {
margin-top: 0 !important;
}
> *:last-child {
margin-bottom: 0 !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 1.5em;
margin-bottom: 1em;
font-weight: 600;
line-height: 1.25;
}
h1 {
font-size: 2em;
padding-bottom: 0.3em;
border-bottom: 1px solid var(--p-surface-700);
}
h2 {
font-size: 1.5em;
padding-bottom: 0.3em;
border-bottom: 1px solid var(--p-surface-700);
}
h3 {
font-size: 1.25em;
}
h4 {
font-size: 1em;
}
h5 {
font-size: 0.875em;
}
h6 {
font-size: 0.85em;
color: var(--p-surface-500);
}
a {
color: #1e8bc3;
text-decoration: none;
word-break: break-all;
}
a:hover {
text-decoration: underline;
}
p,
blockquote,
ul,
ol,
dl,
table,
pre,
details {
margin-top: 0;
margin-bottom: 1em;
}
p img {
width: 100%;
height: 100%;
object-fit: cover;
}
ul,
ol {
padding-left: 2em;
}
li {
margin: 0.5em 0;
}
blockquote {
padding: 0px 1em;
border-left: 0.25em solid var(--p-surface-500);
color: var(--p-surface-500);
margin: 1em 0;
}
blockquote > *:first-child {
margin-top: 0;
}
blockquote > *:last-child {
margin-bottom: 0;
}
pre {
font-size: 85%;
border-radius: 6px;
padding: 8px 16px;
overflow-x: auto;
background: var(--p-dialog-background);
filter: invert(10%);
}
pre code,
pre tt {
display: inline;
padding: 0;
margin: 0;
overflow: visible;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0;
}
}
</style>

15
src/components/ResponseDialog.vue
View File

@@ -8,7 +8,7 @@
maximizeIcon="pi pi-arrow-up-right-and-arrow-down-left-from-center"
minimizeIcon="pi pi-arrow-down-left-and-arrow-up-right-to-center"
:pt:mask:class="['group', { open: visible }]"
pt:root:class="max-h-full group-[:not(.open)]:!hidden"
:pt:root:class="['max-h-full group-[:not(.open)]:!hidden', $style.dialog]"
pt:content:class="px-0 flex-1"
:base-z-index="1000"
:auto-z-index="isNil(zIndex)"
@@ -333,3 +333,16 @@ defineExpose({
updateContainerPosition,
})
</script>
<style lang="css" module>
@layer tailwind-utilities {
:where(.dialog) {
*,
*::before,
*::after {
box-sizing: border-box;
border: 0 solid var(--p-surface-500);
}
}
}
</style>

34
src/components/ResponseInput.vue
View File

@@ -1,7 +1,15 @@
<template>
<div class="p-component p-inputtext flex items-center gap-2">
<div
:class="[
'p-component p-inputtext flex items-center gap-2 border',
'focus-within:border-[--p-inputtext-focus-border-color]',
]"
>
<slot name="prefix">
<span v-if="prefixIcon" :class="[prefixIcon, 'pi-inputicon']"></span>
<span
v-if="prefixIcon"
:class="[prefixIcon, 'text-base opacity-60']"
></span>
</slot>
<input
@@ -18,11 +26,14 @@
<span
v-if="allowClear"
v-show="content"
class="pi pi-times pi-inputicon"
class="pi pi-times text-base opacity-60"
@click="clearContent"
></span>
<slot name="suffix">
<span v-if="suffixIcon" :class="[suffixIcon, 'pi-inputicon']"></span>
<span
v-if="suffixIcon"
:class="[suffixIcon, 'text-base opacity-60']"
></span>
</slot>
</div>
</template>
@@ -65,18 +76,3 @@ const clearContent = () => {
inputRef.value?.focus()
}
</script>
<style>
.p-inputtext:focus-within {
border-color: var(--p-inputtext-focus-border-color);
box-shadow: var(--p-inputtext-focus-ring-shadow);
outline: var(--p-inputtext-focus-ring-width)
var(--p-inputtext-focus-ring-style) var(--p-inputtext-focus-ring-color);
outline-offset: var(--p-inputtext-focus-ring-offset);
}
.p-inputtext .pi-inputicon {
font-size: 1rem;
opacity: 0.6;
}
</style>

12
src/components/ResponseSelect.vue
View File

@@ -37,8 +37,10 @@
<div
v-show="showControlButton && scrollPosition !== 'left'"
:class="[
'pointer-events-none absolute left-0 top-1/2 z-10',
'-translate-y-1/2 bg-gradient-to-r from-current to-transparent pr-16',
'pointer-events-none absolute z-10 flex h-full items-center',
'top-1/2 [transform:translateY(-50%)]',
'left-0 pr-16',
'[background-image:linear-gradient(to_right,currentColor,transparent)]',
]"
style="color: var(--p-dialog-background)"
>
@@ -67,8 +69,10 @@
<div
v-show="showControlButton && scrollPosition !== 'right'"
:class="[
'pointer-events-none absolute right-0 top-1/2 z-10',
'-translate-y-1/2 bg-gradient-to-l from-current to-transparent pl-16',
'pointer-events-none absolute z-10 flex h-full items-center',
'top-1/2 [transform:translateY(-50%)]',
'right-0 pl-16',
'[background-image:linear-gradient(to_left,currentColor,transparent)]',
]"
style="color: var(--p-dialog-background)"
>

212
src/style.css
View File

@@ -3,220 +3,8 @@
@layer tailwind-utilities {
@tailwind components;
@tailwind utilities;
:root {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
*.border,
*.border-x,
*.border-y,
*.border-l,
*.border-t,
*.border-r,
*.border-b {
border-style: solid;
}
table,
th,
tr,
td {
border-width: 0px;
}
}
.comfy-modal {
z-index: 3000;
}
.markdown-it {
font-family: theme('fontFamily.sans');
font-size: theme('fontSize.base');
line-height: theme('lineHeight.relaxed');
word-break: break-word;
margin: 0;
&::before {
display: table;
content: '';
}
&::after {
display: table;
content: '';
clear: both;
}
> *:first-child {
margin-top: 0 !important;
}
> *:last-child {
margin-bottom: 0 !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 1.5em;
margin-bottom: 1em;
font-weight: 600;
line-height: 1.25;
}
h1 {
font-size: 2em;
padding-bottom: 0.3em;
border-bottom: 1px solid var(--p-surface-700);
}
h2 {
font-size: 1.5em;
padding-bottom: 0.3em;
border-bottom: 1px solid var(--p-surface-700);
}
h3 {
font-size: 1.25em;
}
h4 {
font-size: 1em;
}
h5 {
font-size: 0.875em;
}
h6 {
font-size: 0.85em;
color: var(--p-surface-500);
}
a {
color: #1e8bc3;
text-decoration: none;
word-break: break-all;
}
a:hover {
text-decoration: underline;
}
p,
blockquote,
ul,
ol,
dl,
table,
pre,
details {
margin-top: 0;
margin-bottom: 1em;
}
p img {
width: 100%;
height: 100%;
object-fit: cover;
}
ul,
ol {
padding-left: 2em;
}
li {
margin: 0.5em 0;
}
blockquote {
padding: 0px 1em;
border-left: 0.25em solid var(--p-surface-500);
color: var(--p-surface-500);
margin: 1em 0;
}
blockquote > *:first-child {
margin-top: 0;
}
blockquote > *:last-child {
margin-bottom: 0;
}
pre {
font-size: 85%;
border-radius: 6px;
padding: 8px 16px;
overflow-x: auto;
background: var(--p-dialog-background);
filter: invert(10%);
}
pre code,
pre tt {
display: inline;
padding: 0;
margin: 0;
overflow: visible;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0;
}
}