diff --git a/code/websites/pokedex.online/src/views/GamemasterExplorer.vue b/code/websites/pokedex.online/src/views/GamemasterExplorer.vue index a83887b..99ce8a1 100644 --- a/code/websites/pokedex.online/src/views/GamemasterExplorer.vue +++ b/code/websites/pokedex.online/src/views/GamemasterExplorer.vue @@ -930,38 +930,43 @@ onMounted(() => { .settings-panel { background: #f8f9fa; border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1.5rem; + border-radius: 6px; + padding: 1rem; margin-bottom: 1rem; + font-size: 0.95rem; } .help-panel h3, .settings-panel h3 { margin-top: 0; + margin-bottom: 1rem; color: #495057; + font-size: 1.1rem; } .help-panel ul { list-style: none; padding: 0; + margin: 0; } .help-panel li { - padding: 0.5rem 0; + padding: 0.4rem 0; } .help-panel kbd { background: #fff; border: 1px solid #ccc; - border-radius: 4px; - padding: 2px 6px; + border-radius: 3px; + padding: 2px 5px; font-family: monospace; - font-size: 0.9em; + font-size: 0.85em; } .settings-panel label { display: block; margin: 0.75rem 0; + font-size: 0.95rem; } /* File Selector */ @@ -1063,14 +1068,19 @@ onMounted(() => { /* Property Filter */ .property-filter { display: flex; - align-items: center; + flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; - flex-wrap: wrap; +} + +.property-filter label { + font-weight: 600; + font-size: 0.95rem; } .property-filter select, .filter-value-input { + width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; @@ -1248,9 +1258,9 @@ onMounted(() => { /* Action Bar */ .action-bar { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; + display: grid; + grid-template-columns: 1fr; + gap: 0.75rem; margin-bottom: 1rem; } @@ -1261,10 +1271,11 @@ onMounted(() => { border: none; border-radius: 6px; cursor: pointer; - font-size: 1rem; + font-size: 0.95rem; font-weight: 600; min-height: 44px; transition: all 0.3s ease; + width: 100%; } .btn-action:hover { @@ -1283,13 +1294,15 @@ onMounted(() => { /* Toast */ .toast { position: fixed; - bottom: 2rem; - right: 2rem; - padding: 1rem 1.5rem; - border-radius: 8px; + bottom: 1rem; + right: 1rem; + left: 1rem; + padding: 1rem; + border-radius: 6px; font-weight: bold; z-index: 1000; animation: slideIn 0.3s ease-out; + font-size: 0.95rem; } .toast.success { @@ -1315,6 +1328,16 @@ onMounted(() => { /* Responsive */ @media (min-width: 769px) { + .gamemaster-explorer { + padding: 2rem 1rem; + } + + .explorer-container { + padding: 2rem; + border-radius: 12px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); + } + .explorer-header { align-items: center; gap: 1rem; @@ -1340,24 +1363,95 @@ onMounted(() => { height: 44px; font-size: 1.25rem; } -} -@media (max-width: 768px) { - .file-selector, + .help-panel, + .settings-panel { + padding: 1.5rem; + border-radius: 8px; + } + + .file-selector { + flex-direction: row; + align-items: center; + gap: 1rem; + flex-wrap: wrap; + } + + .file-selector label { + margin: 0; + } + + .file-selector select { + width: auto; + flex: 1; + min-width: 200px; + } + + .file-info { + color: #666; + font-size: 0.9rem; + white-space: nowrap; + } + + .search-input { + border-radius: 8px; + } + .property-filter { - flex-direction: column; - align-items: stretch; + flex-direction: row; + align-items: center; + gap: 0.5rem; + flex-wrap: wrap; + } + + .property-filter label { + margin: 0; + } + + .property-filter select, + .filter-value-input { + width: auto; } .action-bar { - flex-direction: column; + display: flex; + grid-template-columns: unset; + gap: 0.5rem; + flex-wrap: wrap; } .btn-action { - width: 100%; + width: auto; + font-size: 1rem; + } + + .content-viewer { + max-height: 70vh; + border-radius: 8px; + } + + .scroller { + height: 70vh; + } + + .lines-container { + padding: 1rem; + } + + .line-number { + width: 4rem; + } + + .toast { + bottom: 2rem; + right: 2rem; + left: auto; + width: auto; } } +@media (max-width: 768px) { + /* Primary button styles */ .btn-primary, .btn-retry {