ketle-manandClaude Sonnet 4.6
a9f35e75cc
PSD files with interactive rigging, pose mode, library, and i18n support (Japanese / English / Simplified Chinese). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
501 lines
8.9 KiB
CSS
501 lines
8.9 KiB
CSS
/* ================================================
|
||
PSD Loader - Modal & UI Styles
|
||
================================================ */
|
||
|
||
/* ---------- Overlay ---------- */
|
||
.psd-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.65);
|
||
z-index: 10000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* ---------- Modal ---------- */
|
||
.psd-modal {
|
||
background: #1e1e2e;
|
||
border: 1px solid #45475a;
|
||
border-radius: 8px;
|
||
width: 850px;
|
||
max-height: 90vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #cdd6f4;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
font-size: 13px;
|
||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ---------- Modal Body（2カラム） ---------- */
|
||
.psd-modal-body {
|
||
display: flex;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
min-height: 0;
|
||
}
|
||
|
||
/* ---------- プレビューパネル（左） ---------- */
|
||
.psd-preview-panel {
|
||
width: 390px;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
padding: 10px 12px;
|
||
border-right: 1px solid #313244;
|
||
background: #181825;
|
||
}
|
||
|
||
.psd-preview-label {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: #6c7086;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.psd-preview-canvas {
|
||
width: 100%;
|
||
border-radius: 4px;
|
||
border: 1px solid #313244;
|
||
background: #111;
|
||
display: block;
|
||
min-height: 60px;
|
||
cursor: grab;
|
||
}
|
||
|
||
.psd-preview-canvas:active {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
.psd-preview-status {
|
||
font-size: 11px;
|
||
color: #6c7086;
|
||
min-height: 16px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* ---------- 右パネル ---------- */
|
||
.psd-right-panel {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
min-height: 0;
|
||
}
|
||
|
||
/* ---------- Header ---------- */
|
||
.psd-modal-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid #313244;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.psd-modal-header .psd-close-btn {
|
||
background: none;
|
||
border: none;
|
||
color: #6c7086;
|
||
cursor: pointer;
|
||
font-size: 18px;
|
||
line-height: 1;
|
||
padding: 0 4px;
|
||
border-radius: 3px;
|
||
transition: color 0.15s;
|
||
}
|
||
|
||
.psd-modal-header .psd-close-btn:hover {
|
||
color: #f38ba8;
|
||
}
|
||
|
||
/* ---------- Rig Mode Bar ---------- */
|
||
.psd-rig-setup-bar {
|
||
display: flex;
|
||
gap: 6px;
|
||
align-items: center;
|
||
padding: 4px 8px;
|
||
background: #1a2a3a;
|
||
border-bottom: 1px solid #313244;
|
||
flex-wrap: wrap;
|
||
font-size: 11px;
|
||
color: #aaa;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ---------- Layer List ---------- */
|
||
.psd-layer-list {
|
||
overflow-y: auto;
|
||
flex: 1;
|
||
padding: 6px 0;
|
||
min-height: 100px;
|
||
}
|
||
|
||
.psd-layer-list::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
.psd-layer-list::-webkit-scrollbar-track {
|
||
background: #181825;
|
||
}
|
||
.psd-layer-list::-webkit-scrollbar-thumb {
|
||
background: #45475a;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
/* ---------- Layer Item ---------- */
|
||
.psd-layer-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 4px 12px;
|
||
gap: 6px;
|
||
cursor: default;
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
transition: background 0.1s;
|
||
border-left: 2px solid transparent;
|
||
}
|
||
|
||
.psd-layer-item:hover {
|
||
background: #25253a;
|
||
}
|
||
|
||
.psd-layer-item.selected {
|
||
background: #313244;
|
||
border-left-color: #89b4fa;
|
||
}
|
||
|
||
.psd-layer-item.drag-over {
|
||
outline: 1px dashed #89b4fa;
|
||
}
|
||
|
||
.psd-layer-item .handle {
|
||
color: #45475a;
|
||
cursor: grab;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.psd-layer-item .eye-btn {
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
flex-shrink: 0;
|
||
opacity: 1;
|
||
transition: opacity 0.15s;
|
||
}
|
||
|
||
.psd-layer-item.hidden-layer .eye-btn {
|
||
opacity: 0.35;
|
||
}
|
||
|
||
.psd-layer-item .toggle-btn {
|
||
cursor: pointer;
|
||
font-size: 10px;
|
||
color: #89b4fa;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.psd-layer-item .kind-icon {
|
||
font-size: 13px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.psd-layer-item .layer-name {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
color: #cdd6f4;
|
||
}
|
||
|
||
.psd-layer-item.hidden-layer .layer-name {
|
||
color: #45475a;
|
||
}
|
||
|
||
.psd-layer-item .layer-name input {
|
||
background: #313244;
|
||
border: 1px solid #89b4fa;
|
||
border-radius: 3px;
|
||
color: #cdd6f4;
|
||
padding: 1px 6px;
|
||
font-size: 13px;
|
||
width: 100%;
|
||
outline: none;
|
||
}
|
||
|
||
/* ---------- Custom Group Item ---------- */
|
||
.psd-custom-group {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 5px 12px;
|
||
gap: 6px;
|
||
background: #1a1a2e;
|
||
border-left: 2px solid #f38ba8;
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
cursor: default;
|
||
transition: background 0.1s;
|
||
}
|
||
|
||
.psd-custom-group:hover {
|
||
background: #231a2e;
|
||
}
|
||
|
||
.psd-custom-group.selected {
|
||
background: #2e1a2e;
|
||
border-left-color: #f38ba8;
|
||
outline: 1px solid #f38ba844;
|
||
}
|
||
|
||
.psd-custom-group.drag-over {
|
||
outline: 2px dashed #f38ba8;
|
||
background: #2e1a2e;
|
||
}
|
||
|
||
.psd-custom-group.hidden-layer .cg-name {
|
||
color: #6c7086;
|
||
}
|
||
|
||
.psd-custom-group .handle {
|
||
color: #6c7086;
|
||
cursor: grab;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.psd-custom-group .eye-btn {
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
flex-shrink: 0;
|
||
opacity: 1;
|
||
transition: opacity 0.15s;
|
||
}
|
||
|
||
.psd-custom-group.hidden-layer .eye-btn {
|
||
opacity: 0.35;
|
||
}
|
||
|
||
.psd-custom-group .toggle-btn {
|
||
cursor: pointer;
|
||
font-size: 10px;
|
||
color: #f38ba8;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.psd-custom-group .cg-name {
|
||
color: #f38ba8;
|
||
flex: 1;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.psd-custom-group .cg-badge {
|
||
background: #f38ba833;
|
||
color: #f38ba8;
|
||
border-radius: 10px;
|
||
padding: 0 6px;
|
||
font-size: 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* グループ内レイヤー（左ラインを引く） */
|
||
.psd-layer-item.in-custom-group {
|
||
border-left-color: #f38ba844;
|
||
background: #1d1625;
|
||
}
|
||
|
||
.psd-layer-item.in-custom-group:hover {
|
||
background: #271a30;
|
||
}
|
||
|
||
/* 空グループのドロップヒント */
|
||
.psd-group-empty {
|
||
padding: 6px 28px;
|
||
color: #6c7086;
|
||
font-size: 11px;
|
||
font-style: italic;
|
||
border-left: 2px solid #f38ba822;
|
||
background: #1a1a2e;
|
||
border-bottom: 1px dashed #313244;
|
||
}
|
||
|
||
.psd-group-empty.drag-over {
|
||
background: #2e1a2e;
|
||
color: #f38ba8;
|
||
border-left-color: #f38ba8;
|
||
}
|
||
|
||
/* ---------- Toolbar (group bar) ---------- */
|
||
.psd-group-bar {
|
||
display: flex;
|
||
gap: 8px;
|
||
padding: 8px 16px;
|
||
border-top: 1px solid #313244;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ---------- Footer ---------- */
|
||
.psd-modal-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
padding: 10px 16px;
|
||
border-top: 1px solid #313244;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ---------- Buttons ---------- */
|
||
.psd-btn {
|
||
background: #313244;
|
||
border: 1px solid #45475a;
|
||
border-radius: 4px;
|
||
color: #cdd6f4;
|
||
padding: 5px 14px;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
transition: background 0.15s, border-color 0.15s;
|
||
}
|
||
|
||
.psd-btn:hover {
|
||
background: #45475a;
|
||
border-color: #6c7086;
|
||
}
|
||
|
||
.psd-btn.primary {
|
||
background: #89b4fa;
|
||
border-color: #89b4fa;
|
||
color: #1e1e2e;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.psd-btn.primary:hover {
|
||
background: #b4d0fb;
|
||
border-color: #b4d0fb;
|
||
}
|
||
|
||
/* ---------- Help Dialog ---------- */
|
||
.psd-help-dialog {
|
||
background: #1e1e2e;
|
||
border: 1px solid #45475a;
|
||
border-radius: 8px;
|
||
width: 620px;
|
||
max-height: 80vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #cdd6f4;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
font-size: 13px;
|
||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.psd-help-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 16px;
|
||
border-bottom: 1px solid #313244;
|
||
flex-shrink: 0;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.psd-help-body {
|
||
overflow-y: auto;
|
||
padding: 12px 16px 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.psd-help-section {}
|
||
|
||
.psd-help-section-title {
|
||
margin: 0 0 6px;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
color: #89b4fa;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
border-bottom: 1px solid #313244;
|
||
padding-bottom: 4px;
|
||
}
|
||
|
||
.psd-help-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.psd-help-table tr + tr td {
|
||
border-top: 1px solid #2a2a3e;
|
||
}
|
||
|
||
.psd-help-term {
|
||
padding: 4px 10px 4px 2px;
|
||
white-space: nowrap;
|
||
font-weight: 600;
|
||
color: #cba6f7;
|
||
vertical-align: top;
|
||
width: 1%;
|
||
}
|
||
|
||
.psd-help-desc {
|
||
padding: 4px 2px;
|
||
color: #bac2de;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* ---------- Drop Zone ---------- */
|
||
.psd-drop-zone {
|
||
width: 100%;
|
||
min-height: 62px;
|
||
border: 2px dashed #45475a;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 3px;
|
||
cursor: pointer;
|
||
background: #181825;
|
||
transition: border-color 0.15s, background 0.15s;
|
||
padding: 8px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.psd-drop-zone:hover,
|
||
.psd-drop-zone.drag-active {
|
||
border-color: #89b4fa;
|
||
background: #1e2140;
|
||
}
|
||
|
||
.psd-drop-zone .dz-icon {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.psd-drop-zone .dz-label {
|
||
color: #6c7086;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.psd-drop-zone .dz-filename {
|
||
color: #a6e3a1;
|
||
font-size: 11px;
|
||
word-break: break-all;
|
||
text-align: center;
|
||
}
|
||
|
||
.psd-drop-zone .dz-filename.uploading {
|
||
color: #f9e2af;
|
||
}
|
||
|
||
.psd-drop-zone .dz-filename.error {
|
||
color: #f38ba8;
|
||
}
|