mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-08-06 22:10:14 -03:00
fix(widgets): allow text selection in LoraInfoWidget description tab
This commit is contained in:
@@ -470,6 +470,10 @@ onMounted(() => {
|
|||||||
color: var(--fg-color, #fff);
|
color: var(--fg-color, #fff);
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
|
/* Override node-level grab cursor and user-select:none from .lg-node.cursor-grab */
|
||||||
|
cursor: auto;
|
||||||
|
user-select: text;
|
||||||
|
-webkit-user-select: text;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notes-field {
|
.notes-field {
|
||||||
@@ -568,6 +572,10 @@ onMounted(() => {
|
|||||||
color: var(--fg-color, #fff);
|
color: var(--fg-color, #fff);
|
||||||
opacity: 0.85;
|
opacity: 0.85;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
|
/* Override node-level grab cursor and user-select:none from .lg-node.cursor-grab */
|
||||||
|
cursor: auto;
|
||||||
|
user-select: text;
|
||||||
|
-webkit-user-select: text;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description-text :deep(p) {
|
.description-text :deep(p) {
|
||||||
|
|||||||
@@ -2224,7 +2224,7 @@ to { transform: rotate(360deg);
|
|||||||
resize: vertical !important;
|
resize: vertical !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lora-info-widget[data-v-41af3987] {
|
.lora-info-widget[data-v-a99cc1ab] {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
background: rgba(40, 44, 52, 0.6);
|
background: rgba(40, 44, 52, 0.6);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
@@ -2240,45 +2240,45 @@ to { transform: rotate(360deg);
|
|||||||
determined solely by CSS — not by descendant content. This breaks the
|
determined solely by CSS — not by descendant content. This breaks the
|
||||||
feedback loop where content grows → ResizeObserver resizes → content
|
feedback loop where content grows → ResizeObserver resizes → content
|
||||||
reflows → repeat. Same technique used by tags_widget.js + lm_styles.css. */
|
reflows → repeat. Same technique used by tags_widget.js + lm_styles.css. */
|
||||||
.lora-info-widget.lm-vue-node[data-v-41af3987] {
|
.lora-info-widget.lm-vue-node[data-v-a99cc1ab] {
|
||||||
contain: layout size;
|
contain: layout size;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Tab bar ── */
|
/* ── Tab bar ── */
|
||||||
.lora-info-tabs[data-v-41af3987] {
|
.lora-info-tabs[data-v-a99cc1ab] {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
border-bottom: 1px solid var(--border-color, #444);
|
border-bottom: 1px solid var(--border-color, #444);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
.lora-info-tab[data-v-41af3987] {
|
.lora-info-tab[data-v-a99cc1ab] {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 6px 0;
|
padding: 6px 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.lora-info-tab-input[data-v-41af3987] {
|
.lora-info-tab-input[data-v-a99cc1ab] {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
.lora-info-tab-label[data-v-41af3987] {
|
.lora-info-tab-label[data-v-a99cc1ab] {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: var(--fg-color, #fff);
|
color: var(--fg-color, #fff);
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity 0.15s;
|
transition: opacity 0.15s;
|
||||||
}
|
}
|
||||||
.lora-info-tab:hover .lora-info-tab-label[data-v-41af3987] {
|
.lora-info-tab:hover .lora-info-tab-label[data-v-a99cc1ab] {
|
||||||
opacity: 0.75;
|
opacity: 0.75;
|
||||||
}
|
}
|
||||||
.lora-info-tab.active .lora-info-tab-label[data-v-41af3987] {
|
.lora-info-tab.active .lora-info-tab-label[data-v-a99cc1ab] {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.lora-info-tab.active[data-v-41af3987]::after {
|
.lora-info-tab.active[data-v-a99cc1ab]::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -1px;
|
bottom: -1px;
|
||||||
@@ -2290,16 +2290,16 @@ to { transform: rotate(360deg);
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ── Tab content ── */
|
/* ── Tab content ── */
|
||||||
.tab-content[data-v-41af3987] {
|
.tab-content[data-v-a99cc1ab] {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.notes-tab[data-v-41af3987] {
|
.notes-tab[data-v-a99cc1ab] {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.description-tab[data-v-41af3987] {
|
.description-tab[data-v-a99cc1ab] {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
@@ -2307,12 +2307,12 @@ to { transform: rotate(360deg);
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ── Info fields (shared) ── */
|
/* ── Info fields (shared) ── */
|
||||||
.info-field[data-v-41af3987] {
|
.info-field[data-v-a99cc1ab] {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
}
|
}
|
||||||
.info-label[data-v-41af3987] {
|
.info-label[data-v-a99cc1ab] {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@@ -2320,18 +2320,22 @@ to { transform: rotate(360deg);
|
|||||||
color: var(--fg-color, #fff);
|
color: var(--fg-color, #fff);
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
.lora-filename[data-v-41af3987] {
|
.lora-filename[data-v-a99cc1ab] {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: var(--fg-color, #fff);
|
color: var(--fg-color, #fff);
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
|
/* Override node-level grab cursor and user-select:none from .lg-node.cursor-grab */
|
||||||
|
cursor: auto;
|
||||||
|
user-select: text;
|
||||||
|
-webkit-user-select: text;
|
||||||
}
|
}
|
||||||
.notes-field[data-v-41af3987] {
|
.notes-field[data-v-a99cc1ab] {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
.lora-notes[data-v-41af3987] {
|
.lora-notes[data-v-a99cc1ab] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 60px;
|
min-height: 60px;
|
||||||
@@ -2346,14 +2350,14 @@ to { transform: rotate(360deg);
|
|||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.lora-notes[data-v-41af3987]:focus {
|
.lora-notes[data-v-a99cc1ab]:focus {
|
||||||
border-color: var(--comfy-input-border, #444);
|
border-color: var(--comfy-input-border, #444);
|
||||||
}
|
}
|
||||||
.lora-notes[data-v-41af3987]:disabled {
|
.lora-notes[data-v-a99cc1ab]:disabled {
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
.save-btn[data-v-41af3987] {
|
.save-btn[data-v-a99cc1ab] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
@@ -2367,11 +2371,11 @@ to { transform: rotate(360deg);
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
.save-btn[data-v-41af3987]:hover:not(:disabled) {
|
.save-btn[data-v-a99cc1ab]:hover:not(:disabled) {
|
||||||
background: rgba(66, 153, 225, 0.25);
|
background: rgba(66, 153, 225, 0.25);
|
||||||
border-color: rgba(66, 153, 225, 0.6);
|
border-color: rgba(66, 153, 225, 0.6);
|
||||||
}
|
}
|
||||||
.save-btn[data-v-41af3987]:disabled {
|
.save-btn[data-v-a99cc1ab]:disabled {
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
background: rgba(66, 153, 225, 0.05);
|
background: rgba(66, 153, 225, 0.05);
|
||||||
@@ -2379,7 +2383,7 @@ to { transform: rotate(360deg);
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ── Description states ── */
|
/* ── Description states ── */
|
||||||
.description-state[data-v-41af3987] {
|
.description-state[data-v-a99cc1ab] {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -2391,64 +2395,68 @@ to { transform: rotate(360deg);
|
|||||||
min-height: 0;
|
min-height: 0;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
.description-state.error[data-v-41af3987] {
|
.description-state.error[data-v-a99cc1ab] {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
color: #f87171;
|
color: #f87171;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Description content ── */
|
/* ── Description content ── */
|
||||||
.description-content[data-v-41af3987] {
|
.description-content[data-v-a99cc1ab] {
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
.description-section[data-v-41af3987] {
|
.description-section[data-v-a99cc1ab] {
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
.description-section[data-v-41af3987]:last-child {
|
.description-section[data-v-a99cc1ab]:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
.description-text[data-v-41af3987] {
|
.description-text[data-v-a99cc1ab] {
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
color: var(--fg-color, #fff);
|
color: var(--fg-color, #fff);
|
||||||
opacity: 0.85;
|
opacity: 0.85;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
|
/* Override node-level grab cursor and user-select:none from .lg-node.cursor-grab */
|
||||||
|
cursor: auto;
|
||||||
|
user-select: text;
|
||||||
|
-webkit-user-select: text;
|
||||||
}
|
}
|
||||||
.description-text[data-v-41af3987] p {
|
.description-text[data-v-a99cc1ab] p {
|
||||||
margin: 0 0 8px 0;
|
margin: 0 0 8px 0;
|
||||||
}
|
}
|
||||||
.description-text[data-v-41af3987] p:last-child {
|
.description-text[data-v-a99cc1ab] p:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
.description-text[data-v-41af3987] a {
|
.description-text[data-v-a99cc1ab] a {
|
||||||
color: rgba(66, 153, 225, 0.9);
|
color: rgba(66, 153, 225, 0.9);
|
||||||
}
|
}
|
||||||
.description-text[data-v-41af3987] ul,
|
.description-text[data-v-a99cc1ab] ul,
|
||||||
.description-text[data-v-41af3987] ol {
|
.description-text[data-v-a99cc1ab] ol {
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
margin: 4px 0;
|
margin: 4px 0;
|
||||||
}
|
}
|
||||||
.description-text[data-v-41af3987] h1,
|
.description-text[data-v-a99cc1ab] h1,
|
||||||
.description-text[data-v-41af3987] h2,
|
.description-text[data-v-a99cc1ab] h2,
|
||||||
.description-text[data-v-41af3987] h3 {
|
.description-text[data-v-a99cc1ab] h3 {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
margin: 10px 0 4px 0;
|
margin: 10px 0 4px 0;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
opacity: 0.95;
|
opacity: 0.95;
|
||||||
}
|
}
|
||||||
.description-text[data-v-41af3987] code {
|
.description-text[data-v-a99cc1ab] code {
|
||||||
background: rgba(255, 255, 255, 0.08);
|
background: rgba(255, 255, 255, 0.08);
|
||||||
padding: 1px 4px;
|
padding: 1px 4px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
.description-text[data-v-41af3987] img {
|
.description-text[data-v-a99cc1ab] img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Placeholder (shared) ── */
|
/* ── Placeholder (shared) ── */
|
||||||
.placeholder[data-v-41af3987] {
|
.placeholder[data-v-a99cc1ab] {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
color: rgba(226, 232, 240, 0.5);
|
color: rgba(226, 232, 240, 0.5);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -2457,10 +2465,10 @@ to { transform: rotate(360deg);
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ── Spinner (Font Awesome) ── */
|
/* ── Spinner (Font Awesome) ── */
|
||||||
.fa-spinner[data-v-41af3987] {
|
.fa-spinner[data-v-a99cc1ab] {
|
||||||
animation: fa-spin-41af3987 1s linear infinite;
|
animation: fa-spin-a99cc1ab 1s linear infinite;
|
||||||
}
|
}
|
||||||
@keyframes fa-spin-41af3987 {
|
@keyframes fa-spin-a99cc1ab {
|
||||||
0% { transform: rotate(0deg);
|
0% { transform: rotate(0deg);
|
||||||
}
|
}
|
||||||
100% { transform: rotate(360deg);
|
100% { transform: rotate(360deg);
|
||||||
@@ -15633,7 +15641,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
const LoraInfoWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-41af3987"]]);
|
const LoraInfoWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a99cc1ab"]]);
|
||||||
function createVueWidgetCleanup(vueApp, onCleanup) {
|
function createVueWidgetCleanup(vueApp, onCleanup) {
|
||||||
let didUnmount = false;
|
let didUnmount = false;
|
||||||
return () => {
|
return () => {
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user