Fixed SD RPG
This commit is contained in:
+268
-5
@@ -156,6 +156,88 @@ header h1 { font-size: 1.1rem; color: #e94560; }
|
||||
#systemBlobRefresh.spinning { animation: spin 0.6s linear infinite; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.blob-changed { background: rgba(255, 200, 50, 0.15); border-radius: 3px; transition: background 2s ease; }
|
||||
.blob-context-warn { color: #e9a045; }
|
||||
|
||||
.rp-dialogue { color: #e94560; }
|
||||
.rp-action { font-style: italic; color: #a8a8b8; }
|
||||
|
||||
.rp-choice {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
background: rgba(155, 127, 212, 0.15);
|
||||
border: 1px solid rgba(155, 127, 212, 0.35);
|
||||
}
|
||||
.rp-choice-tag {
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: #9b7fd4;
|
||||
font-weight: 600;
|
||||
}
|
||||
.rp-choice-label { color: #d4c8f0; }
|
||||
|
||||
.dice-user-override {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px dashed rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
.dice-user-badge {
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 6px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.dice-user-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.dice-intent-struck {
|
||||
text-decoration: line-through;
|
||||
opacity: 0.55;
|
||||
color: #888;
|
||||
}
|
||||
.dice-intent-arrow { color: #9b7fd4; font-weight: bold; }
|
||||
.dice-intent-resolved { color: #c8e6c9; font-style: italic; }
|
||||
.message.user.has-dice-override .bubble { border-color: rgba(155, 127, 212, 0.4); }
|
||||
|
||||
.quest-panel-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
padding: 8px 10px;
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
.quest-panel-actions button {
|
||||
flex: 1;
|
||||
font-size: 0.75rem;
|
||||
padding: 6px 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #444;
|
||||
background: #2a2a3e;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
.quest-panel-actions button:hover:not(:disabled) { background: #3a3a52; }
|
||||
.quest-panel-actions button:disabled { opacity: 0.4; cursor: default; }
|
||||
.quest-panel-actions .quest-btn-done:hover:not(:disabled) { border-color: #2ecc71; color: #2ecc71; }
|
||||
.quest-panel-actions .quest-btn-fail:hover:not(:disabled) { border-color: #e74c3c; color: #e74c3c; }
|
||||
|
||||
.format-btn {
|
||||
margin-top: 4px;
|
||||
padding: 2px 8px;
|
||||
font-size: 0.75rem;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: #aaa;
|
||||
cursor: pointer;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.format-btn:hover { background: #4a90d9; color: white; border-color: #4a90d9; }
|
||||
.system-blob-content {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
@@ -283,7 +365,16 @@ header h1 { font-size: 1.1rem; color: #e94560; }
|
||||
.translate-btn:hover { background: #4a90d9; color: white; }
|
||||
.translate-btn:disabled { opacity: 0.5; cursor: default; }
|
||||
|
||||
.chat-image { margin-top: 8px; max-width: 100%; border-radius: 8px; border: 1px solid #0f3460; }
|
||||
.chat-image-wrap { margin-top: 8px; }
|
||||
.chat-image-label {
|
||||
font-size: 0.75rem;
|
||||
color: #888;
|
||||
margin-bottom: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.chat-image { max-width: 100%; border-radius: 8px; border: 1px solid #0f3460; display: block; }
|
||||
.image-prompt-blocks .image-prompt-block + .image-prompt-block { margin-top: 8px; }
|
||||
|
||||
.image-generating {
|
||||
display: flex;
|
||||
@@ -312,10 +403,41 @@ header h1 { font-size: 1.1rem; color: #e94560; }
|
||||
.image-error { margin-top: 6px; font-size: 0.75rem; color: #888; }
|
||||
|
||||
.choice-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.choice-section-btns {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.choice-section-label {
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: #c9a227;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.choice-section-label-generic {
|
||||
color: #888;
|
||||
}
|
||||
.choice-section-plot {
|
||||
padding: 8px 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(201, 162, 39, 0.45);
|
||||
background: rgba(201, 162, 39, 0.08);
|
||||
}
|
||||
.choice-beat-teaser {
|
||||
font-size: 0.75rem;
|
||||
color: #b8a888;
|
||||
font-style: italic;
|
||||
line-height: 1.35;
|
||||
margin-bottom: 6px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.choice-btn {
|
||||
background: #16213e;
|
||||
@@ -326,10 +448,20 @@ header h1 { font-size: 1.1rem; color: #e94560; }
|
||||
padding: 6px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.choice-btn-plot {
|
||||
border-color: rgba(201, 162, 39, 0.55);
|
||||
background: rgba(201, 162, 39, 0.12);
|
||||
color: #e8d5a3;
|
||||
}
|
||||
.choice-btn:hover {
|
||||
border-color: #e94560;
|
||||
color: #e94560;
|
||||
}
|
||||
.choice-btn-plot:hover {
|
||||
border-color: #c9a227;
|
||||
color: #f0e0b0;
|
||||
background: rgba(201, 162, 39, 0.2);
|
||||
}
|
||||
|
||||
|
||||
.typing {
|
||||
@@ -499,6 +631,14 @@ textarea:focus { border-color: #e94560; }
|
||||
.outcome-crit-success .dice-outcome { color: #f1c40f; }
|
||||
.narrator-text { white-space: pre-wrap; line-height: 1.5; }
|
||||
|
||||
.narrator-activity-hint {
|
||||
margin-top: 6px;
|
||||
font-size: 0.72rem;
|
||||
color: #9b7fd4;
|
||||
opacity: 0.9;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
/* Affinity display in header */
|
||||
.affinity-display {
|
||||
font-size: 0.8rem; padding: 4px 10px;
|
||||
@@ -508,21 +648,137 @@ textarea:focus { border-color: #e94560; }
|
||||
.affinity-display.affinity-high { border-color: #e94560; color: #e94560; }
|
||||
.affinity-display.affinity-low { border-color: #555; color: #666; }
|
||||
|
||||
.stats-display {
|
||||
font-size: 0.72rem;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #0f3460;
|
||||
border-radius: 10px;
|
||||
color: #9b9bb8;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.stats-display.stats-warn { border-color: #e9a045; color: #e9a045; }
|
||||
.stats-display.stats-critical { border-color: #e74c3c; color: #e74c3c; }
|
||||
|
||||
.rpg-debug-panel {
|
||||
margin-top: 12px;
|
||||
padding: 10px;
|
||||
border: 1px dashed #3a3a52;
|
||||
border-radius: 8px;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.rpg-debug-panel summary {
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
color: #9b7fd4;
|
||||
}
|
||||
.rpg-debug-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.rpg-debug-grid label {
|
||||
font-size: 0.78rem;
|
||||
color: #aaa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.rpg-debug-grid input {
|
||||
background: #1a1a2e;
|
||||
border: 1px solid #0f3460;
|
||||
border-radius: 6px;
|
||||
color: #e0e0e0;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
.rpg-debug-apply {
|
||||
background: #3a3a52;
|
||||
border: 1px solid #9b7fd4;
|
||||
border-radius: 8px;
|
||||
color: #e0e0e0;
|
||||
padding: 6px 14px;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.rpg-debug-apply:hover { background: #4a4a62; }
|
||||
.rpg-debug-status {
|
||||
margin-left: 8px;
|
||||
font-size: 0.75rem;
|
||||
color: #2ecc71;
|
||||
}
|
||||
|
||||
.context-editor-modal { max-width: 640px; }
|
||||
.context-editor-body label {
|
||||
display: block;
|
||||
font-size: 0.78rem;
|
||||
color: #aaa;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.context-editor-body textarea,
|
||||
.context-editor-body input[type="number"] {
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
background: #1a1a2e;
|
||||
border: 1px solid #0f3460;
|
||||
border-radius: 8px;
|
||||
color: #e0e0e0;
|
||||
padding: 8px 10px;
|
||||
font-family: Consolas, 'Segoe UI', monospace;
|
||||
font-size: 0.78rem;
|
||||
resize: vertical;
|
||||
}
|
||||
.context-editor-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
#contextEditorOpen {
|
||||
background: transparent;
|
||||
border: 1px solid #0f3460;
|
||||
border-radius: 8px;
|
||||
color: #888;
|
||||
padding: 2px 8px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
#contextEditorOpen:hover { border-color: #9b7fd4; color: #9b7fd4; }
|
||||
|
||||
/* Quest panel in sidebar */
|
||||
.quest-panel {
|
||||
border-top: 1px solid #0f3460;
|
||||
padding: 10px 14px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: min(42vh, 280px);
|
||||
min-height: 0;
|
||||
}
|
||||
#questList {
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.quest-panel-header {
|
||||
font-size: 0.75rem; color: #888;
|
||||
text-transform: uppercase; letter-spacing: 0.05em;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.quest-panel-hint {
|
||||
font-size: 0.68rem;
|
||||
color: #555;
|
||||
margin: 0 0 6px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.quest-item {
|
||||
font-size: 0.8rem; padding: 4px 0;
|
||||
font-size: 0.8rem; padding: 4px 6px;
|
||||
color: #bbb; line-height: 1.4;
|
||||
border-bottom: 1px solid #0f3460;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.quest-item.quest-selected {
|
||||
background: rgba(233, 69, 96, 0.12);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.quest-item:last-child { border-bottom: none; }
|
||||
.quest-done { color: #555; text-decoration: line-through; }
|
||||
@@ -587,6 +843,11 @@ textarea:focus { border-color: #e94560; }
|
||||
flex-direction: row !important;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.hint-text {
|
||||
font-size: 0.8rem;
|
||||
color: #888;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.chat-settings-meta {
|
||||
margin-top: 12px; padding: 10px;
|
||||
background: #1a1a2e; border-radius: 8px;
|
||||
@@ -610,7 +871,9 @@ textarea:focus { border-color: #e94560; }
|
||||
outline: none; border-bottom: 1px dashed #e94560;
|
||||
}
|
||||
.message-actions {
|
||||
display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap;
|
||||
display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.message-actions button {
|
||||
background: #0f3460; border: none; border-radius: 6px;
|
||||
|
||||
@@ -0,0 +1,209 @@
|
||||
/* app.css sets body { overflow: hidden; height: 100vh } for chat layout */
|
||||
html:has(body.debug-page),
|
||||
body.debug-page {
|
||||
height: auto;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.debug-page {
|
||||
background: #0f0f1a;
|
||||
color: #ddd;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
.debug-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid #1a2744;
|
||||
background: #16213e;
|
||||
}
|
||||
|
||||
.debug-header a {
|
||||
color: #9b7fd4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.debug-header h1 {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.debug-tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 8px 16px;
|
||||
background: #12121f;
|
||||
border-bottom: 1px solid #1a2744;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.debug-tabs button {
|
||||
background: transparent;
|
||||
border: 1px solid #2a3a5c;
|
||||
color: #aaa;
|
||||
padding: 8px 14px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.debug-tabs button.active {
|
||||
background: #1a2744;
|
||||
color: #e94560;
|
||||
border-color: #e94560;
|
||||
}
|
||||
|
||||
.debug-main {
|
||||
padding: 16px 20px 40px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.debug-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.debug-panel.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.debug-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.debug-grid label,
|
||||
.debug-main > label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: 0.85rem;
|
||||
color: #aaa;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.debug-grid input,
|
||||
.debug-grid select,
|
||||
.debug-main textarea,
|
||||
.debug-main input,
|
||||
.debug-main select {
|
||||
background: #1a1a2e;
|
||||
border: 1px solid #0f3460;
|
||||
color: #eee;
|
||||
border-radius: 6px;
|
||||
padding: 8px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.debug-main textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.debug-btn {
|
||||
background: #1a2744;
|
||||
border: 1px solid #3a5080;
|
||||
color: #ccc;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.debug-btn.primary {
|
||||
background: #e94560;
|
||||
border-color: #e94560;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.debug-btn:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.debug-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.debug-out {
|
||||
background: #0a0a14;
|
||||
border: 1px solid #1a2744;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
overflow: auto;
|
||||
max-height: 420px;
|
||||
font-size: 0.8rem;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.debug-out.compact {
|
||||
max-height: 160px;
|
||||
}
|
||||
|
||||
.debug-out.small {
|
||||
max-height: 240px;
|
||||
}
|
||||
|
||||
.debug-split {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.debug-split {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.debug-split h3,
|
||||
.debug-main h3 {
|
||||
font-size: 0.9rem;
|
||||
color: #9b7fd4;
|
||||
margin: 16px 0 8px;
|
||||
}
|
||||
|
||||
.debug-img-wrap {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.debug-img-wrap img {
|
||||
max-width: 100%;
|
||||
max-height: 512px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.debug-img-wrap.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.model-list-block {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.model-list-block summary {
|
||||
cursor: pointer;
|
||||
color: #9b7fd4;
|
||||
}
|
||||
|
||||
.model-list-block ul {
|
||||
margin: 4px 0 0;
|
||||
padding-left: 1.2rem;
|
||||
font-size: 0.8rem;
|
||||
max-height: 120px;
|
||||
overflow: auto;
|
||||
}
|
||||
Reference in New Issue
Block a user