da2el-alandClaude Opus 4.8
98c52299a4
画面に見えているカテゴリ・タブへ即座にプロンプトを追加できるよう、 編集モード時に各カテゴリ末尾・各タブ末尾へ「＋ 追加」ボタンを表示。 クリックで追加ダイアログが該当のタブ／カテゴリを選択済みで開く （TagEditorDialog.openAdd にプリセット引数を追加、不整合は先頭へ フォールバック）。ツールチップを4言語に追加し README 3言語も更新。 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
465 lines
9.4 KiB
CSS
465 lines
9.4 KiB
CSS
@charset "UTF-8";
|
|
.d2ps {
|
|
z-index: 10000;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 50vh;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
padding: 10px;
|
|
background-color: var(--comfy-menu-bg);
|
|
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.d2ps-controller {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
}
|
|
|
|
.d2ps-tag-wrapper {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
padding: 10px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 320px;
|
|
gap: 10px;
|
|
}
|
|
.d2ps-tag-wrapper.d2ps-tag-wrapper--no-sample {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.d2ps-tag-wrapper.d2ps-tag-wrapper--no-sample .d2ps-sample {
|
|
display: none;
|
|
}
|
|
|
|
.d2ps-tag-container {
|
|
display: grid;
|
|
gap: 10px;
|
|
grid-template-rows: 1fr max-content;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
}
|
|
|
|
.d2ps-show-button {
|
|
z-index: 1000;
|
|
position: fixed;
|
|
}
|
|
|
|
.d2ps-sample {
|
|
height: 100%;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-rows: auto max-content 1fr;
|
|
gap: 8px;
|
|
padding: 8px;
|
|
border: solid 1px var(--p-tieredmenu-separator-border-color);
|
|
border-radius: var(--block-radius, 8px);
|
|
transition: 0.2s;
|
|
overflow: hidden;
|
|
}
|
|
.d2ps-sample[data-is-pinned=true] {
|
|
background-image: linear-gradient(to bottom, rgba(9, 140, 233, 0.1294117647), transparent);
|
|
}
|
|
|
|
.d2ps-sample__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.d2ps-sample__spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
.d2ps-sample__btn {
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font-size: 1em;
|
|
line-height: 1;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
}
|
|
.d2ps-sample__btn:hover {
|
|
background-color: var(--secondary-background-hover);
|
|
}
|
|
|
|
.d2ps-sample__image {
|
|
position: relative;
|
|
min-height: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
aspect-ratio: 1/1;
|
|
}
|
|
.d2ps-sample__image img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.d2ps-sample__placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: dashed 1px var(--p-tieredmenu-separator-border-color);
|
|
border-radius: 4px;
|
|
opacity: 0.4;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.d2ps-sample__prompt {
|
|
overflow: auto;
|
|
padding: 6px 8px;
|
|
background-color: var(--p-inputtext-background);
|
|
border-radius: 4px;
|
|
word-break: break-word;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.d2ps-sample__empty {
|
|
color: var(--descrip-text);
|
|
}
|
|
|
|
.d2ps-sample__image--dragover {
|
|
outline: 2px dashed var(--p-primary-color, #098ce9);
|
|
outline-offset: -2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.d2ps-sample__drophint {
|
|
color: var(--descrip-text);
|
|
font-size: 0.85em;
|
|
text-align: center;
|
|
padding: 4px;
|
|
}
|
|
|
|
.d2ps-sample__error {
|
|
color: var(--p-button-danger-background, #e5484d);
|
|
}
|
|
|
|
.d2ps-btn-wrapper {
|
|
display: inline-flex;
|
|
position: relative;
|
|
}
|
|
|
|
.d2ps-btn--pin {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: -7px;
|
|
transform: translateY(-50%);
|
|
z-index: 2;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
padding: 0 2px;
|
|
font-size: 0.85em;
|
|
line-height: 1;
|
|
text-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff;
|
|
opacity: 0;
|
|
transform-origin: left bottom;
|
|
transition: 0.1s;
|
|
}
|
|
.d2ps-btn--pin:hover {
|
|
scale: 1.3;
|
|
}
|
|
|
|
.d2ps-btn-wrapper:hover .d2ps-btn--pin {
|
|
opacity: 1;
|
|
}
|
|
|
|
.d2ps-btn--tag {
|
|
position: relative;
|
|
}
|
|
.d2ps-btn--tag[data-has-image=true]::after {
|
|
position: absolute;
|
|
left: 4px;
|
|
top: 4px;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
content: "";
|
|
}
|
|
|
|
.d2ps-image-delete {
|
|
position: absolute;
|
|
right: 6px;
|
|
bottom: 6px;
|
|
z-index: 3;
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 0;
|
|
border: 1px solid rgba(255, 255, 255, 0.85);
|
|
border-radius: 50%;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
color: #fff;
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.d2ps-image-delete:hover {
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
.d2ps-btn.d2ps-btn--random {
|
|
width: 100%;
|
|
}
|
|
.d2ps-btn.d2ps-btn--add {
|
|
border: 1px dashed var(--border-color, #888);
|
|
opacity: 0.85;
|
|
}
|
|
.d2ps-btn.d2ps-btn--add:hover {
|
|
opacity: 1;
|
|
}
|
|
.d2ps-btn.d2ps-btn--delete {
|
|
display: flex;
|
|
align-self: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2em;
|
|
aspect-ratio: 1/1;
|
|
border-radius: 50%;
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
.d2ps-btn.d2ps-btn--delete:hover {
|
|
background-color: var(--secondary-background-hover);
|
|
}
|
|
|
|
.d2ps-tag-field {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
gap: 0.5em;
|
|
min-width: min(320px, 100%);
|
|
max-width: 100%;
|
|
height: fit-content;
|
|
min-height: 2rem;
|
|
border-radius: var(--block-radius, 8px);
|
|
flex: 1 1 calc(50% - 20px);
|
|
}
|
|
.d2ps-tag-field.d2ps-tag-field--top {
|
|
height: 100%;
|
|
overflow: auto;
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
.d2ps-tag-field {
|
|
/* ランダムボタンも格納する枠 */
|
|
}
|
|
.d2ps-tag-field.d2ps-tag-field--with-random {
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
padding: 8px;
|
|
border: solid 1px var(--p-tieredmenu-separator-border-color);
|
|
}
|
|
|
|
.d2ps-tab {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.3em;
|
|
max-height: calc(6rem + 0.6em);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.d2ps-tab__button {
|
|
background-color: transparent;
|
|
}
|
|
.d2ps-tab__button:hover {
|
|
background-color: var(--interface-menu-component-surface-selected);
|
|
}
|
|
.d2ps-tab__button[data-active=true] {
|
|
background-color: var(--interface-menu-component-surface-selected);
|
|
}
|
|
|
|
.d2ps-search {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.d2ps-search__input {
|
|
width: 100%;
|
|
background-color: var(--p-inputtext-background, #090909);
|
|
color: var(--p-inputtext-color, #fff);
|
|
border: 1px solid var(--p-inputtext-border-color, #666);
|
|
border-radius: 4px;
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
dialog.d2ps-dialog-root {
|
|
min-width: 360px;
|
|
padding: 0;
|
|
background: var(--p-dialog-background, #2a2a2a);
|
|
border: 1px solid var(--p-dialog-border-color);
|
|
border-radius: 8px;
|
|
color: var(--p-dialog-color, #fff);
|
|
box-shadow: none;
|
|
}
|
|
dialog.d2ps-dialog-root::backdrop {
|
|
background: var(--p-mask-background);
|
|
}
|
|
dialog.d2ps-dialog-root .d2ps-dialog {
|
|
padding: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
dialog.d2ps-dialog-root .d2ps-dialog.d2ps-dialog--editor {
|
|
width: 600px;
|
|
}
|
|
dialog.d2ps-dialog-root .d2ps-dialog__title {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
dialog.d2ps-dialog-root .d2ps-dialog__message {
|
|
margin: 0;
|
|
line-height: 1.6;
|
|
font-size: 0.9rem;
|
|
white-space: pre-line;
|
|
}
|
|
dialog.d2ps-dialog-root .d2ps-dialog__label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
font-size: 0.85rem;
|
|
}
|
|
dialog.d2ps-dialog-root .d2ps-dialog__select,
|
|
dialog.d2ps-dialog-root .d2ps-dialog__input {
|
|
background-color: var(--p-inputtext-background, #090909);
|
|
color: var(--p-inputtext-color, #fff);
|
|
border: 1px solid var(--p-inputtext-border-color, #666);
|
|
border-radius: 4px;
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 1rem;
|
|
flex: 1;
|
|
}
|
|
dialog.d2ps-dialog-root .d2ps-dialog__row {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
}
|
|
dialog.d2ps-dialog-root .d2ps-dialog__buttons {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
margin-top: 4px;
|
|
}
|
|
dialog.d2ps-dialog-root .d2ps-dialog__error {
|
|
margin: 0;
|
|
color: #f88;
|
|
font-size: 0.85rem;
|
|
}
|
|
dialog.d2ps-dialog-root button:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
dialog.d2ps-dialog-root .d2ps-image-drop {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100px;
|
|
padding: 8px;
|
|
border: dashed 1px var(--p-tieredmenu-separator-border-color, #555);
|
|
border-radius: 4px;
|
|
}
|
|
dialog.d2ps-dialog-root .d2ps-image-drop--dragover {
|
|
outline: 2px dashed var(--p-primary-color, #098ce9);
|
|
outline-offset: -2px;
|
|
}
|
|
dialog.d2ps-dialog-root .d2ps-image-drop__hint {
|
|
color: var(--descrip-text, #aaa);
|
|
font-size: 0.85rem;
|
|
}
|
|
dialog.d2ps-dialog-root .d2ps-image-thumb {
|
|
position: relative;
|
|
display: inline-flex;
|
|
max-width: 100%;
|
|
}
|
|
dialog.d2ps-dialog-root .d2ps-image-thumb img {
|
|
max-width: 100%;
|
|
max-height: 200px;
|
|
object-fit: contain;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.d2ps-sort-tree {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
max-height: 60vh;
|
|
overflow: auto;
|
|
}
|
|
|
|
.d2ps-sort-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-right: 0.5em;
|
|
align-items: center;
|
|
background-color: rgb(from var(--p-dialog-color) r g b/0.05);
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.d2ps-sort-row:hover {
|
|
background-color: rgb(from var(--p-dialog-color) r g b/0.1);
|
|
}
|
|
.d2ps-sort-row .d2ps-sort-row__label {
|
|
flex: 1;
|
|
text-align: left;
|
|
padding-block: 0.2em;
|
|
}
|
|
.d2ps-sort-row button.d2ps-sort-row__label--clickable {
|
|
appearance: none;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
.d2ps-sort-row button.d2ps-sort-row__label--clickable:hover {
|
|
color: var(--primary-background);
|
|
}
|
|
.d2ps-sort-row .d2ps-sort-row__toggle {
|
|
cursor: pointer;
|
|
appearance: none;
|
|
border: none;
|
|
background: transparent;
|
|
scale: 0.8;
|
|
}
|
|
.d2ps-sort-row .d2ps-sort-row__toggle:hover {
|
|
color: var(--primary-background);
|
|
}
|
|
.d2ps-sort-row .d2ps-sort-row__close {
|
|
cursor: pointer;
|
|
appearance: none;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
.d2ps-sort-row .d2ps-sort-row__close:hover {
|
|
color: var(--primary-background);
|
|
}
|
|
.d2ps-sort-row .d2ps-sort-row__drag-handle {
|
|
margin-left: 0.5em;
|
|
cursor: grab;
|
|
}
|
|
.d2ps-sort-row.d2ps-sort-row--dragging {
|
|
opacity: 0.4;
|
|
cursor: grabbing;
|
|
}
|
|
.d2ps-sort-row.d2ps-sort-row--category {
|
|
padding-left: 1em;
|
|
}
|
|
.d2ps-sort-row.d2ps-sort-row--item {
|
|
padding-left: 2em;
|
|
} |