| """Arayüz teması: TestAjanı ile aynı görsel dil (koyu lacivert zemin, çerçeveli kartlar, indigo vurgu, üst gezinme). |
| |
| Renkler hem Streamlit temasına (bileşenler) hem de CSS'e (özel parçalar) verilir. Açık ve koyu iki palet vardır. |
| """ |
| from __future__ import annotations |
|
|
| from pathlib import Path |
|
|
| ROOT = Path(__file__).resolve().parent |
| FONT = "Plus Jakarta Sans" |
| FONT_URL = "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" |
| MONO = "JetBrains Mono" |
| MONO_URL = "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" |
|
|
| PALETTE = { |
| "dark": { |
| "bg": "#12161f", "header": "#161b26", "surface": "#1a1f2b", "surface2": "#202636", "input": "#151a24", |
| "line": "#2d3445", "line_soft": "#252b3a", "ink": "#e7e9f0", "ink2": "#b6bccb", "muted": "#8a92a6", |
| "acc": "#7d8ff0", "acc_ink": "#ffffff", "acc_soft": "#262d52", "acc_text": "#a9b5ff", |
| "ok": "#4cc59f", "ok_bg": "#173a31", "warn": "#f0b429", "warn_bg": "#3a2f14", "bad": "#f47067", |
| "bad_bg": "#3d1f22", "code_bg": "#1e1e1e", |
| }, |
| "light": { |
| "bg": "#f4f5f9", "header": "#ffffff", "surface": "#ffffff", "surface2": "#f7f8fc", "input": "#ffffff", |
| "line": "#e1e4ee", "line_soft": "#eceef5", "ink": "#151925", "ink2": "#3d4456", "muted": "#687086", |
| "acc": "#5b6ee8", "acc_ink": "#ffffff", "acc_soft": "#e9ecfd", "acc_text": "#4152c9", |
| "ok": "#178a65", "ok_bg": "#def4ec", "warn": "#9a6700", "warn_bg": "#fdf1d6", "bad": "#c4362b", |
| "bad_bg": "#fde8e6", "code_bg": "#f6f7fb", |
| }, |
| } |
|
|
|
|
| def palette(theme: str) -> dict: |
| return PALETTE["dark" if theme == "dark" else "light"] |
|
|
|
|
| def streamlit_theme(theme: str) -> dict: |
| """st._config.set_option ile verilecek tema ayarları.""" |
| P = palette(theme) |
| return { |
| "base": "dark" if theme == "dark" else "light", |
| "primaryColor": P["acc"], "backgroundColor": P["bg"], "secondaryBackgroundColor": P["surface2"], |
| "textColor": P["ink"], "borderColor": P["line"], "linkColor": P["acc_text"], |
| "codeBackgroundColor": P["code_bg"], "dataframeHeaderBackgroundColor": P["surface2"], |
| "dataframeBorderColor": P["line"], "showWidgetBorder": True, "baseRadius": "10px", "buttonRadius": "9px", |
| "font": f"{FONT}:{FONT_URL}", "codeFont": f"{MONO}:{MONO_URL}", "headingFontWeights": [700, 650], |
| "greenColor": P["ok"], "redColor": P["bad"], "orangeColor": P["warn"], "violetColor": P["acc"], |
| "blueColor": P["acc"], |
| "chartCategoricalColors": ["#7d8ff0", "#4cc59f", "#f0b429", "#f47067", "#a78bfa", "#38bdf8", "#94a3b8"] |
| if theme == "dark" else ["#5b6ee8", "#178a65", "#d08f00", "#c4362b", "#8b5cf6", "#0ea5e9", "#64748b"], |
| } |
|
|
|
|
| def logo_svg(theme: str, small: bool = False) -> str: |
| """Marka: indigo kare içinde tablo simgesi + 'Tablo2SQL' yazısı (TestAjanı'ndaki gibi).""" |
| P = palette(theme) |
| mark = (f"<rect x='0' y='2' width='28' height='28' rx='7' fill='{P['acc']}'/>" |
| "<g fill='none' stroke='#fff' stroke-width='2.1' stroke-linecap='round'>" |
| "<rect x='6.5' y='8.5' width='15' height='15' rx='2.2'/><path d='M6.5 13.5h15M12 13.5v10'/></g>") |
| if small: |
| return f"<svg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32'>{mark}</svg>" |
| return (f"<svg xmlns='http://www.w3.org/2000/svg' width='150' height='32' viewBox='0 0 150 32'>{mark}" |
| f"<text x='38' y='22.5' font-family='{FONT}, Segoe UI, system-ui, sans-serif' font-size='17.5' " |
| f"font-weight='800' letter-spacing='-.2' fill='{P['ink']}'>Tablo2SQL</text></svg>") |
|
|
|
|
| def write_logos(out_dir: Path, theme: str) -> tuple[Path, Path]: |
| out_dir.mkdir(parents=True, exist_ok=True) |
| big, small = out_dir / f"logo_{theme}.svg", out_dir / f"logo_{theme}_ikon.svg" |
| for p, s in ((big, logo_svg(theme)), (small, logo_svg(theme, small=True))): |
| if not p.exists() or p.read_text(encoding="utf-8") != s: |
| p.write_text(s, encoding="utf-8") |
| return big, small |
|
|
|
|
| def css(theme: str, lang: str) -> str: |
| P = palette(theme) |
| dark = theme == "dark" |
| return f""" |
| <style> |
| @import url('{FONT_URL}'); |
| @import url('{MONO_URL}'); |
| :root{{--t2s-acc:{P['acc']};--t2s-line:{P['line']};--t2s-surface:{P['surface']};--t2s-muted:{P['muted']}}} |
| .mono{{font-family:'{MONO}',ui-monospace,Consolas,monospace}} |
| |
| /* ---------------- üst çubuk (Streamlit başlığı) */ |
| header[data-testid="stHeader"]{{background:{P['header']};border-bottom:1px solid {P['line']};height:3.6rem}} |
| [data-testid="stToolbar"]{{height:3.6rem}} |
| [data-testid="stAppDeployButton"],[data-testid="stMainMenu"],[data-testid="stToolbarActions"]{{display:none!important}} |
| [data-testid="stHeaderLogo"]{{height:1.9rem!important;max-height:1.9rem}} |
| [data-testid="stTopNavLink"]{{border-radius:8px;padding:.32rem .7rem!important;transition:background .15s ease}} |
| [data-testid="stTopNavLink"] p{{font-size:.95rem;font-weight:500;color:{P['ink2']}}} |
| [data-testid="stTopNavLink"]:hover{{background:{P['surface2']}}} |
| [data-testid="stTopNavLink"][aria-current="page"]{{background:{P['acc_soft'] if dark else P['acc_soft']}; |
| box-shadow:inset 0 -2px 0 {P['acc']}}} |
| [data-testid="stTopNavLink"][aria-current="page"] p{{color:{P['ink']};font-weight:650}} |
| |
| /* sağdaki durum kümesi: geniş ekranda başlığın içine sabitlenir, darda sayfanın üstünde akar */ |
| .st-key-t2s_topbar{{gap:.45rem!important}} |
| .st-key-t2s_topbar [data-testid="stMarkdownContainer"] p{{margin:0}} |
| .st-key-t2s_topbar button{{min-height:2.15rem;padding:.2rem .7rem;font-size:.86rem}} |
| .st-key-t2s_topbar [data-testid="stButtonGroup"] button{{min-height:2.15rem;padding:.15rem .6rem}} |
| @media (min-width:1181px){{ |
| .st-key-t2s_topbar{{position:fixed;top:0;right:1rem;height:3.6rem;z-index:999991;width:auto!important; |
| display:flex;align-items:center}} |
| header[data-testid="stHeader"] .rc-overflow{{max-width:calc(100vw - 490px)}} |
| }} |
| @media (max-width:1180px){{ |
| .st-key-t2s_topbar{{justify-content:flex-end;flex-wrap:wrap;margin:-.4rem 0 .6rem}} |
| }} |
| .t2s-chip{{display:inline-flex;align-items:center;gap:.4rem;height:2.15rem;padding:0 .75rem;border-radius:9px; |
| border:1px solid {P['line']};background:{P['surface']};font-size:.84rem;color:{P['ink2']};white-space:nowrap}} |
| .t2s-chip .d{{width:.5rem;height:.5rem;border-radius:50%;background:{P['ok']};display:inline-block}} |
| .t2s-chip .d.off{{background:{P['muted']}}}.t2s-chip .d.bad{{background:{P['bad']}}} |
| .t2s-chip b{{color:{P['ink']};font-weight:600}}.t2s-chip .m{{font-family:'{MONO}',monospace;font-size:.78rem}} |
| .t2s-chip .bar{{width:52px;height:5px;border-radius:3px;background:{P['line']};overflow:hidden}} |
| .t2s-chip .bar i{{display:block;height:100%;background:{P['acc']}}} |
| |
| /* ---------------- sayfa */ |
| .stApp{{background:{P['bg']}}} |
| .block-container{{max-width:1360px;padding-top:4.6rem!important;padding-bottom:3rem}} |
| @media (max-width:1180px){{.block-container{{padding-top:4.2rem!important}}}} |
| @media (max-width:640px){{.block-container{{padding-left:.9rem!important;padding-right:.9rem!important}}}} |
| .t2s-page{{margin:.2rem 0 1.15rem}} |
| .t2s-page h1{{font-size:1.85rem;font-weight:750;letter-spacing:-.015em;margin:0 0 .3rem;padding:0;color:{P['ink']}}} |
| .t2s-page p{{margin:0;color:{P['muted']};max-width:52rem;font-size:.97rem;line-height:1.55}} |
| h4{{font-weight:700!important;letter-spacing:-.005em}} |
| [data-testid="stCaptionContainer"],.stCaption{{color:{P['muted']}!important}} |
| |
| /* kartlar: st.container(border=True, key="card_...") */ |
| [class*="st-key-card_"]{{background:{P['surface']};border:1px solid {P['line']}!important;border-radius:14px!important; |
| padding:1rem 1.1rem 1.1rem!important}} |
| [class*="st-key-card_"] [class*="st-key-card_"]{{background:{P['surface2']}}} |
| .t2s-card-title{{font-size:.98rem;font-weight:700;color:{P['ink']};margin:0 0 .15rem}} |
| .t2s-card-sub{{font-size:.84rem;color:{P['muted']};margin:0 0 .4rem}} |
| |
| .t2s-empty{{min-height:16rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; |
| gap:.45rem;padding:2rem 1rem}} |
| .t2s-empty b{{font-size:1.05rem;color:{P['ink']}}} |
| .t2s-empty span{{color:{P['muted']};max-width:30rem;font-size:.92rem;line-height:1.55}} |
| |
| /* bileşenler */ |
| [data-testid="stExpander"] details{{background:{P['surface']};border:1px solid {P['line']}!important;border-radius:12px}} |
| [data-testid="stExpander"] summary{{font-weight:600}} |
| [data-testid="stMetric"]{{background:{P['surface']};border:1px solid {P['line']};border-radius:12px;padding:.75rem .9rem}} |
| [data-testid="stMetricLabel"] p{{color:{P['muted']}!important;font-size:.82rem}} |
| [data-testid="stMetricValue"]{{font-weight:700}} |
| [data-testid="stDataFrame"],[data-testid="stTable"]{{border-radius:10px;overflow:hidden}} |
| .stButton button,.stDownloadButton button,[data-testid="stPopoverButton"]{{font-weight:600;border-radius:9px}} |
| .stButton button[kind="primary"],.stDownloadButton button[kind="primary"]{{background:{P['acc']};border-color:{P['acc']}; |
| color:{P['acc_ink']}}} |
| .stButton button[kind="primary"]:hover{{filter:brightness(1.07);border-color:{P['acc']}}} |
| .stButton button[kind="secondary"],.stDownloadButton button[kind="secondary"],[data-testid="stPopoverButton"]{{ |
| background:{P['surface']};border:1px solid {P['line']}}} |
| [data-baseweb="input"],[data-baseweb="select"]>div,[data-baseweb="textarea"],[data-testid="stFileUploaderDropzone"]{{ |
| background:{P['input']}!important}} |
| [data-testid="stFileUploaderDropzone"]{{border:1px dashed {P['line']}!important;border-radius:12px}} |
| [data-testid="stAlert"]{{border-radius:12px}} |
| [data-testid="stChatMessage"]{{background:{P['surface']};border:1px solid {P['line']};border-radius:14px;padding:.8rem 1rem}} |
| [data-testid="stChatInput"]>div{{border-radius:12px;border-color:{P['line']}}} |
| [data-testid="stTabs"] [role="tab"] p{{font-weight:600}} |
| [data-testid="stDialog"] [role="dialog"]{{background:{P['surface']};border:1px solid {P['line']};border-radius:16px}} |
| hr{{border-color:{P['line']}!important}} |
| |
| /* uygulamaya özgü parçalar */ |
| .pill{{display:inline-block;padding:1px 9px;border-radius:999px;font-size:.76rem;font-weight:600;margin:0 6px 4px 0; |
| border:1px solid {P['line']};background:{P['surface2']};color:{P['ink2']}}} |
| .pill.ok{{background:{P['ok_bg']};color:{P['ok']};border-color:transparent}} |
| .pill.warn{{background:{P['warn_bg']};color:{P['warn']};border-color:transparent}} |
| .pill.bad{{background:{P['bad_bg']};color:{P['bad']};border-color:transparent}} |
| .pill.ai{{background:{P['acc_soft']};color:{P['acc_text']};border-color:transparent}} |
| .answer{{font-size:1.1rem;font-weight:650;margin:.25rem 0 .5rem}} |
| .answer-sub{{font-size:.86rem;color:{P['muted']};margin:-.3rem 0 .5rem}} |
| .step{{border-left:3px solid {P['line']};padding:.15rem 0 .35rem .8rem;margin:.1rem 0}} |
| .step.hata{{border-color:{P['bad']}}}.step.uyari,.step.geridusme{{border-color:{P['warn']}}} |
| .step.sonuc,.step.cevap{{border-color:{P['ok']}}}.step.ai{{border-color:{P['acc']}}} |
| .step b{{font-size:.9rem}}.step div{{font-size:.86rem;opacity:.88;white-space:pre-wrap}} |
| .gridwrap{{overflow-x:auto;max-width:100%}} |
| table.grid{{border-collapse:collapse;font-size:.8rem;margin:.3rem 0 1rem}} |
| table.grid td{{border:1px solid {P['line']};padding:3px 7px;white-space:nowrap}} |
| table.grid tr.h td{{background:{P['surface2']};font-weight:600}} |
| table.grid tr td.m,table.grid tr.h td.m{{background:{'rgba(125,143,240,.30)' if dark else 'rgba(91,110,232,.18)'};font-weight:600}} |
| .card{{background:{P['surface']};border:1px solid {P['line']};border-radius:14px;padding:.85rem 1rem;height:100%}} |
| .card h4{{margin:0 0 .3rem;font-size:.98rem}}.card p{{margin:.15rem 0;font-size:.86rem;color:{P['ink2']}}} |
| .card code{{font-size:.78rem}} |
| .aibox{{border:1px solid {P['acc']};background:{P['acc_soft']};border-radius:12px;padding:.65rem .9rem;margin:.3rem 0 .6rem}} |
| .aibox .lbl{{font-size:.75rem;font-weight:700;color:{P['acc_text']};letter-spacing:.02em}} |
| .status{{border:1px solid {P['line']};border-radius:10px;padding:.5rem .7rem;font-size:.85rem;margin:.3rem 0}} |
| .status b{{display:block}} |
| |
| /* ---------------- dar ekran: sütunlar sıkışmak yerine alt alta geçer */ |
| @media (max-width:1100px){{ |
| [data-testid="stMain"] [data-testid="stHorizontalBlock"]{{flex-wrap:wrap!important}} |
| [data-testid="stMain"] [data-testid="stHorizontalBlock"]>[data-testid="stColumn"]{{min-width:min(100%,15rem)!important; |
| flex:1 1 15rem!important}} |
| }} |
| @media (max-width:640px){{ |
| .t2s-page h1{{font-size:1.5rem}} |
| [data-testid="stMain"] [data-testid="stHorizontalBlock"]>[data-testid="stColumn"]{{min-width:100%!important}} |
| }} |
| </style>""" |
|
|
