diff --git a/css/styles.css b/css/styles.css index da80375..ccdbb64 100644 --- a/css/styles.css +++ b/css/styles.css @@ -2593,32 +2593,80 @@ input:checked + .slider:before { /* ========================================== GM Command Dispatcher & Live Log Console ========================================== */ -.console-quick-pills { +.console-suggestions { + margin-top: -0.45rem; + border: 1px solid rgba(56, 189, 248, 0.25); + border-radius: 7px; + overflow: hidden; + background: #080c13; + box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42); + font-family: 'Consolas', 'Monaco', 'Courier New', monospace; +} + +.console-suggestions[hidden] { + display: none; +} + +.console-suggestions-header { display: flex; - gap: 0.4rem; - flex-wrap: wrap; + justify-content: space-between; + padding: 0.32rem 0.65rem; + color: #94a3b8; + background: rgba(255, 255, 255, 0.035); + border-bottom: 1px solid rgba(255, 255, 255, 0.07); + font-size: 0.7rem; } -.console-pill-btn { - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.1); - color: #e2e8f0; - padding: 0.3rem 0.65rem; - border-radius: 9999px; - font-size: 0.775rem; - font-weight: 600; - cursor: pointer; - transition: all 0.15s ease; - display: inline-flex; +.console-suggestion-count { + color: #fbbf24; +} + +.console-suggestion-option { + display: flex; + width: 100%; align-items: center; - gap: 0.3rem; + gap: 0.75rem; + padding: 0.35rem 0.65rem; + color: #38e8f2; + text-align: left; + background: transparent; + border: 0; + cursor: pointer; + font: inherit; } -.console-pill-btn:hover { - background: rgba(56, 189, 248, 0.15); - border-color: rgba(56, 189, 248, 0.4); - color: var(--accent-cyan); - transform: translateY(-1px); +.console-suggestion-option:hover, +.console-suggestion-option[aria-selected="true"] { + color: #fff; + background: rgba(56, 189, 248, 0.13); +} + +.console-suggestion-option::before { + content: ">"; + color: #34d399; + font-weight: 800; +} + +.console-suggestion-command { + font-size: 0.8rem; +} + +.console-suggestion-description { + margin-left: auto; + color: #64748b; + font-family: inherit; + font-size: 0.68rem; +} + +.console-suggestion-option:hover .console-suggestion-description, +.console-suggestion-option[aria-selected="true"] .console-suggestion-description { + color: #94a3b8; +} + +@media (max-width: 640px) { + .console-suggestion-description { + display: none; + } } .console-terminal-wrapper { diff --git a/index.html b/index.html index 7c2ec47..8f08fdc 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,8 @@
-