fix(dashboard): icone Material rese come testo + JSON keys invisibili
Due bug visivi distinti:
1) Icone Material rotte ("arrow_drop_down" come testo nel selector):
Il selettore CSS '*' applicava font Inter a tutti gli elementi inclusi
gli .material-icons che richiedono il loro proprio font ligature.
Sostituito '*' con whitelist esplicita di elementi UI; aggiunto override
esplicito per .material-icons / .q-icon che forza font 'Material Icons'.
2) JSON keys invisibili nel code block config:
NiceGUI ui.code usa Prism.js (non highlight.js) per il syntax highlighting.
Aggiunti selettori .token.* coordinati con la palette neon:
- .token.property / .token.attr-name → cyan (chiavi JSON)
- .token.string → green (valori string)
- .token.number / .token.boolean / .token.null → pink
- .token.punctuation / .token.operator → muted
- .token.keyword / .token.builtin → amber
Più reset text-shadow per pre[class*=language-].
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -62,8 +62,16 @@ _CUSTOM_CSS = f"""
|
|||||||
<style>
|
<style>
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||||
|
|
||||||
* {{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.01em; }}
|
html, body, .q-page, .q-card, .q-btn, .q-field, .q-table, .text-h4, .text-h6, .text-subtitle1, .text-caption, .text-body1, .nav-link, .brand, label, p, span, div {{
|
||||||
code, pre, .q-code {{ font-family: 'JetBrains Mono', 'Fira Code', monospace !important; font-size: 12.5px !important; }}
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}}
|
||||||
|
.material-icons, .material-icons-outlined, .material-symbols-outlined, .q-icon, i.q-icon, i[class*="material"] {{
|
||||||
|
font-family: 'Material Icons' !important;
|
||||||
|
font-feature-settings: 'liga';
|
||||||
|
letter-spacing: normal !important;
|
||||||
|
}}
|
||||||
|
code, pre, .q-code, .nicegui-code {{ font-family: 'JetBrains Mono', 'Fira Code', monospace !important; font-size: 13.5px !important; }}
|
||||||
|
|
||||||
body, .q-page-container, .q-page {{
|
body, .q-page-container, .q-page {{
|
||||||
background: {COLOR_BG} !important;
|
background: {COLOR_BG} !important;
|
||||||
@@ -247,6 +255,19 @@ code, pre, .nicegui-code {{
|
|||||||
.hljs-comment {{ color: {COLOR_TEXT_MUTED} !important; font-style: italic; }}
|
.hljs-comment {{ color: {COLOR_TEXT_MUTED} !important; font-style: italic; }}
|
||||||
.hljs-name, .hljs-title {{ color: {COLOR_PRIMARY} !important; }}
|
.hljs-name, .hljs-title {{ color: {COLOR_PRIMARY} !important; }}
|
||||||
|
|
||||||
|
/* Prism.js tokens (NiceGUI usa Prism per ui.code) */
|
||||||
|
.token.property, .token.attr-name, .token.tag {{ color: {COLOR_SECONDARY} !important; font-weight: 500; }}
|
||||||
|
.token.string, .token.url {{ color: {COLOR_SUCCESS} !important; }}
|
||||||
|
.token.number, .token.boolean, .token.null, .token.symbol {{ color: {COLOR_PRIMARY} !important; font-weight: 500; }}
|
||||||
|
.token.keyword, .token.constant, .token.builtin, .token.atrule {{ color: {COLOR_ACCENT} !important; }}
|
||||||
|
.token.punctuation, .token.operator {{ color: {COLOR_TEXT_MUTED} !important; }}
|
||||||
|
.token.comment {{ color: {COLOR_TEXT_MUTED} !important; font-style: italic; }}
|
||||||
|
.token.function, .token.class-name {{ color: {COLOR_PRIMARY} !important; }}
|
||||||
|
pre[class*="language-"], code[class*="language-"] {{
|
||||||
|
color: {COLOR_TEXT} !important;
|
||||||
|
text-shadow: none !important;
|
||||||
|
}}
|
||||||
|
|
||||||
.q-badge {{ border-radius: 6px !important; font-weight: 500 !important; padding: 4px 10px !important; font-size: 12px !important; }}
|
.q-badge {{ border-radius: 6px !important; font-weight: 500 !important; padding: 4px 10px !important; font-size: 12px !important; }}
|
||||||
</style>
|
</style>
|
||||||
"""
|
"""
|
||||||
|
|||||||
Reference in New Issue
Block a user