Foundry VTT MCP Bridge

/* Foundry MCP Bridge Module Styles */ .mcp-bridge-settings { padding: 10px; } .mcp-bridge-settings .form-group { margin-bottom: 15px; } .mcp-bridge-status { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 4px; font-size: 14px; font-weight: 500; } .mcp-bridge-status.connected { background-color: rgba(0, 128, 0, 0.1); color: #008000; border: 1px solid rgba(0, 128, 0, 0.3); } .mcp-bridge-status.disconnected { background-color: rgba(255, 0, 0, 0.1); color: #ff0000; border: 1px solid rgba(255, 0, 0, 0.3); } .mcp-bridge-status.connecting { background-color: rgba(255, 165, 0, 0.1); color: #ff8c00; border: 1px solid rgba(255, 165, 0, 0.3); } .mcp-bridge-status-indicator { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .mcp-bridge-status.connected .mcp-bridge-status-indicator { background-color: #008000; } .mcp-bridge-status.disconnected .mcp-bridge-status-indicator { background-color: #ff0000; } .mcp-bridge-status.connecting .mcp-bridge-status-indicator { background-color: #ff8c00; animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } /* Settings form styling */ .mcp-bridge-settings label { font-weight: bold; margin-bottom: 5px; display: block; } .mcp-bridge-settings input[type="text"], .mcp-bridge-settings input[type="number"] { width: 100%; padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; } .mcp-bridge-settings input[type="checkbox"] { margin-right: 8px; } .mcp-bridge-settings .notes { font-size: 12px; color: #666; font-style: italic; margin-top: 4px; } /* Permission settings */ .mcp-permissions { background-color: rgba(255, 255, 0, 0.05); border: 1px solid rgba(255, 255, 0, 0.2); border-radius: 4px; padding: 12px; margin-top: 10px; } .mcp-permissions h4 { margin: 0 0 10px 0; color: #cc6600; font-size: 14px; } .mcp-permissions .form-group { margin-bottom: 8px; } /* Roll Button Styles */ .mcp-roll-button { display: inline-block; padding: 12px 20px; min-height: 40px; min-width: 120px; border: 2px solid transparent; border-radius: 6px; font-weight: bold; text-align: center; cursor: pointer; transition: all 0.2s ease; text-decoration: none; font-size: 14px; margin: 4px; word-wrap: break-word; white-space: normal; line-height: 1.3; box-sizing: border-box; } /* Active roll button (clickable) */ .mcp-roll-button.mcp-button-active { background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } .mcp-roll-button:not(.mcp-button-rolled):not(:disabled) { background: #4CAF50; color: white; border-color: #45a049; } .mcp-roll-button:not(.mcp-button-rolled):not(:disabled):hover { background: #45a049; border-color: #3d8b40; transform: translateY(-1px); } /* Disabled roll button (cannot click) */ .mcp-roll-button:disabled:not(.mcp-button-rolled) { background: #9E9E9E; color: white; border-color: #8d8d8d; cursor: not-allowed; opacity: 0.7; } /* Rolled state button */ .mcp-roll-button.mcp-button-rolled { background: #6c757d !important; color: #ffffff !important; border-color: #6c757d !important; cursor: not-allowed !important; opacity: 0.8 !important; } .mcp-roll-button.mcp-button-rolled:hover { transform: none !important; } /* Override for any conflicting styles */ .mcp-roll-button.mcp-button-rolled:disabled { background: #6c757d !important; color: #ffffff !important; border-color: #6c757d !important; } /* ============================================================================ */ /* Enhanced Creature Index (ECI) Style Overrides for Map Generation Settings */ /* ============================================================================ */ .eci-settings { min-width: 500px; width: 100%; } .eci-block { width: 100%; margin-bottom: 1.5rem; } .eci-title { font-size: 1.4rem; font-weight: bold; margin-bottom: 0.5rem; color: #ffffff; } .eci-subtitle { font-size: 1.1rem; font-weight: bold; margin-bottom: 0.75rem; color: #ffffff; } .eci-note { color: #cccccc; font-size: 0.9rem; line-height: 1.4; margin-bottom: 1rem; } .eci-divider { border: none; border-top: 1px solid var(--color-border-dark, #444); margin: 1.5rem 0; } .eci-form-group { margin-bottom: 1rem; width: 100%; overflow: visible !important; /* Prevents text clipping */ } .eci-label { display: block; font-weight: bold; margin-bottom: 0.25rem; color: #ffffff; } .eci-hint { font-size: 0.8rem; color: #aaaaaa; margin-top: 0.25rem; line-height: 1.3; } /* Critical Fix for Text Clipping */ .eci-settings select, .eci-settings input[type="text"], .eci-settings input[type="number"] { line-height: normal !important; /* Prevents clipping */ height: auto !important; min-height: 2.25rem !important; /* Gives room (≈36px) */ padding: 0.4rem 0.6rem !important; box-sizing: border-box !important; color: #ffffff !important; background: var(--color-bg-option, #2a2a2a) !important; border: 1px solid var(--color-border-light, #555) !important; width: 100% !important; min-width: 250px !important; border-radius: 4px; } .eci-select, .eci-input { font-family: inherit; font-size: inherit; } .eci-settings select:focus, .eci-settings input:focus { outline: none; border-color: var(--color-border-highlight, #0078d4) !important; box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.3); } /* Service Status Container */ .eci-status-container { display: flex; flex-direction: column; gap: 1rem; } .eci-status { padding: 0.75rem 1rem; border-radius: 4px; font-weight: bold; text-align: center; transition: all 0.3s ease; } .eci-status.running { background-color: rgba(0, 255, 0, 0.1); color: #4CAF50; border: 1px solid rgba(76, 175, 80, 0.3); } .eci-status.stopped { background-color: rgba(255, 0, 0, 0.1); color: #f44336; border: 1px solid rgba(244, 67, 54, 0.3); } .eci-status.starting { background-color: rgba(255, 165, 0, 0.1); color: #ff9800; border: 1px solid rgba(255, 152, 0, 0.3); } .eci-status.error { background-color: rgba(255, 0, 0, 0.2); color: #f44336; border: 1px solid rgba(244, 67, 54, 0.5); } .eci-status.unknown { background-color: rgba(128, 128, 128, 0.1); color: #888888; border: 1px solid rgba(136, 136, 136, 0.3); } /* Control Buttons */ .eci-controls { display: flex; gap: 0.5rem; flex-wrap: wrap; } .eci-btn { padding: 0.6rem 1.2rem; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.2s ease; font-size: 0.9rem; color: white; } .eci-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .eci-btn:active { transform: translateY(0); } .eci-btn.start { background: #4CAF50; } .eci-btn.start:hover { background: #45a049; } .eci-btn.stop { background: #f44336; } .eci-btn.stop:hover { background: #da190b; } .eci-btn.check { background: #2196F3; } .eci-btn.check:hover { background: #0b7dda; } .eci-btn:not(.start):not(.stop):not(.check) { background: var(--color-bg-option, #4a4a4a); border: 1px solid var(--color-border-light, #666); } .eci-btn:not(.start):not(.stop):not(.check):hover { background: var(--color-bg-option-hover, #555); } /* Checkbox Settings */ .eci-settings-block { padding: 1rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.1); } .eci-check { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; padding: 0.5rem 0; } .eci-check input[type="checkbox"] { margin: 0; flex-shrink: 0; width: 1.2rem; height: 1.2rem; margin-top: 0.1rem; } .eci-check span { color: #ffffff; line-height: 1.4; } /* Form Footer */ .form-footer { display: flex; justify-content: flex-end; padding-top: 1rem; border-top: 1px solid var(--color-border-dark, #444); margin-top: 1.5rem; } /* Dynamic visibility for service type fields */ [data-service-type] { display: block; } [data-service-type].hidden { display: none; }