🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
161 lines
2.9 KiB
CSS
161 lines
2.9 KiB
CSS
/* GM Assistant Styles */
|
|
|
|
.gm-assistant-window {
|
|
min-width: 400px;
|
|
min-height: 300px;
|
|
}
|
|
|
|
.gm-assistant-window .window-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.gm-assistant-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Messages area */
|
|
.gm-assistant-messages {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
border-bottom: 1px solid var(--color-border-light);
|
|
}
|
|
|
|
.gm-assistant-message {
|
|
margin-bottom: 10px;
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
max-width: 90%;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.gm-assistant-message.user {
|
|
background: var(--color-bg-option);
|
|
margin-left: auto;
|
|
text-align: right;
|
|
}
|
|
|
|
.gm-assistant-message.assistant {
|
|
background: var(--color-bg-btn);
|
|
margin-right: auto;
|
|
}
|
|
|
|
.gm-assistant-message.system {
|
|
background: rgba(255, 193, 7, 0.2);
|
|
text-align: center;
|
|
font-style: italic;
|
|
font-size: 0.85em;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.gm-assistant-message.tool {
|
|
background: rgba(100, 100, 255, 0.15);
|
|
font-size: 0.85em;
|
|
font-family: monospace;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Input area */
|
|
.gm-assistant-input-area {
|
|
display: flex;
|
|
gap: 5px;
|
|
padding: 10px;
|
|
background: var(--color-bg);
|
|
border-top: 1px solid var(--color-border-light);
|
|
}
|
|
|
|
.gm-assistant-input-area textarea {
|
|
flex: 1;
|
|
resize: none;
|
|
min-height: 60px;
|
|
max-height: 120px;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.gm-assistant-input-area .button-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.gm-assistant-input-area button {
|
|
padding: 5px 10px;
|
|
min-width: 70px;
|
|
}
|
|
|
|
.gm-assistant-input-area button.send {
|
|
background: var(--color-warm-1);
|
|
}
|
|
|
|
.gm-assistant-input-area button.new-chat {
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
/* Status bar */
|
|
.gm-assistant-status {
|
|
padding: 5px 10px;
|
|
font-size: 0.8em;
|
|
color: var(--color-text-light-secondary);
|
|
background: rgba(0, 0, 0, 0.05);
|
|
border-top: 1px solid var(--color-border-light);
|
|
}
|
|
|
|
.gm-assistant-status.connected {
|
|
color: #4caf50;
|
|
}
|
|
|
|
.gm-assistant-status.error {
|
|
color: #f44336;
|
|
}
|
|
|
|
/* Typing indicator */
|
|
.gm-assistant-typing {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 8px 12px;
|
|
color: var(--color-text-light-secondary);
|
|
}
|
|
|
|
.gm-assistant-typing .dots {
|
|
display: flex;
|
|
gap: 3px;
|
|
}
|
|
|
|
.gm-assistant-typing .dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
background: var(--color-text-light-secondary);
|
|
border-radius: 50%;
|
|
animation: typing 1.4s infinite;
|
|
}
|
|
|
|
.gm-assistant-typing .dot:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.gm-assistant-typing .dot:nth-child(3) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
@keyframes typing {
|
|
0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
|
|
30% { opacity: 1; transform: translateY(-3px); }
|
|
}
|
|
|
|
/* Scene controls button */
|
|
.control-tool[data-tool="gm-assistant"] {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.control-tool[data-tool="gm-assistant"]:hover {
|
|
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
|
|
}
|