Files
gm-assistant/styles/gm-assistant.css
kavren a1d32379c0 Initial commit: GM Assistant
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-07 22:28:11 -05:00

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%);
}