From 4038e240f0aac161ac7c6e0cabbaaf17b89c5245 Mon Sep 17 00:00:00 2001
From: hayden <hayden.mike.zhang@gmail.com>
Date: Mon, 11 Nov 2024 14:21:52 +0800
Subject: [PATCH] pref: optimize styles

Reduce the possibility of style pollution.
---
 .vscode/settings.json               |   1 -
 src/components/DialogCreateTask.vue |   2 +-
 src/components/ModelBaseInfo.vue    |   2 +-
 src/components/ModelDescription.vue | 145 ++++++++++++++++++-
 src/components/ResponseDialog.vue   |  15 +-
 src/components/ResponseInput.vue    |  34 ++---
 src/components/ResponseSelect.vue   |  12 +-
 src/style.css                       | 212 ----------------------------
 8 files changed, 183 insertions(+), 240 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index e1f1e4a..790dde8 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -23,7 +23,6 @@
     "inputgroup",
     "inputgroupaddon",
     "iconfield",
-    "inputicon",
     "inputtext",
     "overlaybadge",
     "usetoast",
diff --git a/src/components/DialogCreateTask.vue b/src/components/DialogCreateTask.vue
index b3d7a17..e7dcef7 100644
--- a/src/components/DialogCreateTask.vue
+++ b/src/components/DialogCreateTask.vue
@@ -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>
diff --git a/src/components/ModelBaseInfo.vue b/src/components/ModelBaseInfo.vue
index 32e16c5..98b23a1 100644
--- a/src/components/ModelBaseInfo.vue
+++ b/src/components/ModelBaseInfo.vue
@@ -16,7 +16,7 @@
         update-trigger="blur"
       >
         <template #suffix>
-          <span class="pi-inputicon">
+          <span class="text-base opacity-60">
             {{ extension }}
           </span>
         </template>
diff --git a/src/components/ModelDescription.vue b/src/components/ModelDescription.vue
index 266d20b..7323452 100644
--- a/src/components/ModelDescription.vue
+++ b/src/components/ModelDescription.vue
@@ -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>
diff --git a/src/components/ResponseDialog.vue b/src/components/ResponseDialog.vue
index 1060b90..0da16e6 100644
--- a/src/components/ResponseDialog.vue
+++ b/src/components/ResponseDialog.vue
@@ -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>
diff --git a/src/components/ResponseInput.vue b/src/components/ResponseInput.vue
index ceba602..b6f01f5 100644
--- a/src/components/ResponseInput.vue
+++ b/src/components/ResponseInput.vue
@@ -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>
diff --git a/src/components/ResponseSelect.vue b/src/components/ResponseSelect.vue
index 30ce0b5..b51ebd6 100644
--- a/src/components/ResponseSelect.vue
+++ b/src/components/ResponseSelect.vue
@@ -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)"
         >
diff --git a/src/style.css b/src/style.css
index 0e8980d..723a48c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -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;
-  }
-}