diff --git a/code/websites/pokedex.online/src/views/GamemasterExplorer.vue b/code/websites/pokedex.online/src/views/GamemasterExplorer.vue index 29e1347..beac5c2 100644 --- a/code/websites/pokedex.online/src/views/GamemasterExplorer.vue +++ b/code/websites/pokedex.online/src/views/GamemasterExplorer.vue @@ -586,12 +586,13 @@ onMounted(async () => { /* Content Viewer */ .content-viewer { - background: #f8f8f8; + background: #ffffff; border: 1px solid #e0e0e0; border-radius: 6px; margin-bottom: 1rem; max-height: 50vh; overflow: auto; + color: #24292e; } .content-viewer.dark-mode { @@ -614,6 +615,11 @@ onMounted(async () => { padding: 0.25rem 0.5rem; cursor: pointer; min-height: 20px; + background: #ffffff; +} + +.content-viewer.dark-mode .line { + background: #1e1e1e; } @media (max-width: 768px) { @@ -623,24 +629,40 @@ onMounted(async () => { } .line:hover { - background: rgba(0, 123, 255, 0.1); + background: rgba(102, 126, 234, 0.08); +} + +.content-viewer.dark-mode .line:hover { + background: rgba(102, 126, 234, 0.15); } .line.selected { - background: rgba(0, 123, 255, 0.2); + background: rgba(102, 126, 234, 0.15); +} + +.content-viewer.dark-mode .line.selected { + background: rgba(102, 126, 234, 0.25); } .line.highlight-match { - background: rgba(255, 235, 59, 0.4); + background: rgba(255, 235, 59, 0.3); border-left: 3px solid #ffc107; } +.content-viewer.dark-mode .line.highlight-match { + background: rgba(255, 235, 59, 0.15); +} + .line.current-result { - background: rgba(255, 193, 7, 0.6) !important; + background: rgba(255, 193, 7, 0.4) !important; border-left: 5px solid #ff9800 !important; box-shadow: inset 0 0 0 1px #ff9800; } +.content-viewer.dark-mode .line.current-result { + background: rgba(255, 193, 7, 0.25) !important; +} + .line-number { width: 4rem; text-align: right; @@ -650,32 +672,43 @@ onMounted(async () => { user-select: none; } +.content-viewer.dark-mode .line-number { + color: #666; +} + .line pre { margin: 0; flex: 1; white-space: pre; overflow-x: auto; background: transparent; + color: inherit; } .line pre code { background: transparent; + color: inherit; } -/* Light mode syntax highlighting */ +/* Light mode syntax highlighting - high contrast colors */ .content-viewer:not(.dark-mode) .line pre code { background-color: transparent; color: #24292e; } -/* Improve contrast for light mode - darken attribute names and values */ -.content-viewer:not(.dark-mode) .hljs-attr { +.content-viewer:not(.dark-mode) .hljs { + background: #ffffff; + color: #24292e; +} + +.content-viewer:not(.dark-mode) .hljs-attr, +.content-viewer:not(.dark-mode) .hljs-attribute { color: #6f42c1; font-weight: 600; } .content-viewer:not(.dark-mode) .hljs-string { - color: #0a3622; + color: #032f62; font-weight: 500; } @@ -689,12 +722,39 @@ onMounted(async () => { font-weight: 600; } +.content-viewer:not(.dark-mode) .hljs-name { + color: #24292e; + font-weight: 600; +} + /* Dark mode syntax highlighting */ .content-viewer.dark-mode .line pre code { background-color: transparent; color: #e1e4e8; } +.content-viewer.dark-mode .hljs { + background: #1e1e1e; + color: #e1e4e8; +} + +.content-viewer.dark-mode .hljs-attr, +.content-viewer.dark-mode .hljs-attribute { + color: #79b8ff; +} + +.content-viewer.dark-mode .hljs-string { + color: #85e89d; +} + +.content-viewer.dark-mode .hljs-number { + color: #79b8ff; +} + +.content-viewer.dark-mode .hljs-literal { + color: #f97583; +} + .line-wrap .line pre { white-space: pre-wrap; word-break: break-all;