Spaces:
Running
Running
Download style.css from thinletter/demo: direct link, hf CLI and curl.
- Browser
- Download file 7.35 kB
-
https://huggingface.co/spaces/thinletter/demo/resolve/main/style.css
- Command line
-
hf download hf://spaces/thinletter/demo/style.css
-
curl -L -o style.css https://huggingface.co/spaces/thinletter/demo/resolve/main/style.css
7.35 kB
| :root { | |
| --bg: #f7f7f5; | |
| --card: #ffffff; | |
| --fg: #1c1c1a; | |
| --muted: #6b6b66; | |
| --line: #dededa; | |
| --accent: #2b5fd9; | |
| --accent-fg: #ffffff; | |
| --warn-bg: #fff4d6; | |
| --warn-fg: #6b4a00; | |
| --notice-bg: #eef0f4; | |
| --bar: #2b5fd9; | |
| --mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --bg: #161615; | |
| --card: #1f1f1d; | |
| --fg: #ececea; | |
| --muted: #a09f9a; | |
| --line: #34342f; | |
| --accent: #7ea0ff; | |
| --accent-fg: #0f1a33; | |
| --warn-bg: #3a2f10; | |
| --warn-fg: #ffd98a; | |
| --notice-bg: #262a33; | |
| --bar: #7ea0ff; | |
| } | |
| } | |
| * { box-sizing: border-box; } | |
| html { font-size: 16px; } | |
| body { | |
| margin: 0; padding: 0 1rem 3rem; | |
| background: var(--bg); color: var(--fg); | |
| font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| line-height: 1.5; | |
| } | |
| header, main, footer { max-width: 56rem; margin: 0 auto; } | |
| header { padding: 2rem 0 1rem; } | |
| h1 { font-size: 1.6rem; margin: 0 0 .75rem; line-height: 1.25; } | |
| h1 .sub { display: block; font-size: 1rem; font-weight: 400; color: var(--muted); margin-top: .25rem; } | |
| h2 { font-size: 1.05rem; margin: 0 0 .75rem; } | |
| .lead { margin: 0; font-size: 1rem; } | |
| code { font-family: var(--mono); font-size: .92em; } | |
| a { color: var(--accent); } | |
| .muted { color: var(--muted); } | |
| .small { font-size: .85rem; } | |
| .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } | |
| .card { | |
| background: var(--card); border: 1px solid var(--line); border-radius: 10px; | |
| padding: 1rem 1.25rem; margin: 1rem 0; | |
| } | |
| .row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; } | |
| #ds-select, #client-select { font: inherit; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--card); color: var(--fg); } | |
| button { | |
| font: inherit; font-size: .95rem; padding: .5rem 1rem; border-radius: 8px; | |
| border: 1px solid var(--accent); background: var(--accent); color: var(--accent-fg); cursor: pointer; | |
| } | |
| button:disabled { opacity: .5; cursor: default; } | |
| button.secondary { background: transparent; color: var(--accent); } | |
| .notice { background: var(--notice-bg); border-radius: 8px; padding: .6rem .8rem; margin: .75rem 0; font-size: .9rem; } | |
| .notice.warn { background: var(--warn-bg); color: var(--warn-fg); } | |
| .bar { height: .6rem; background: var(--line); border-radius: 999px; overflow: hidden; margin: .75rem 0 .25rem; } | |
| .bar > div { height: 100%; width: 0; background: var(--bar); transition: width .15s linear; } | |
| .stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .5rem 1.25rem; margin: 0; } | |
| .stats div { border-bottom: 1px dotted var(--line); padding: .3rem 0; } | |
| .stats dt { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; } | |
| .stats dd { margin: 0; font-variant-numeric: tabular-nums; } | |
| #form-search { display: flex; gap: .5rem; } | |
| #form-search input { | |
| flex: 1; font: inherit; font-size: 1rem; padding: .55rem .8rem; border-radius: 8px; | |
| border: 1px solid var(--line); background: var(--bg); color: var(--fg); min-width: 0; | |
| } | |
| #form-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } | |
| #examples a { margin-right: .5rem; } | |
| .results { list-style: none; padding: 0; margin: 1rem 0 0; } | |
| .results li { border-top: 1px solid var(--line); padding: .6rem 0; } | |
| .results .head { display: flex; gap: .75rem; align-items: baseline; cursor: pointer; } | |
| .results .rank { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 1.5rem; } | |
| .results .title { flex: 1; font-weight: 600; } | |
| .results .score { font-family: var(--mono); font-size: .85rem; color: var(--muted); } | |
| .results .abstract { margin: .4rem 0 0 2.25rem; font-size: .92rem; color: var(--fg); } | |
| .results .docid { font-family: var(--mono); font-size: .78rem; color: var(--muted); margin-left: 2.25rem; } | |
| .results li.rel .title::after { content: " · relevant (qrels)"; color: var(--accent); font-weight: 400; font-size: .8rem; } | |
| details > summary { cursor: pointer; list-style: none; } | |
| details > summary h2 { display: inline; } | |
| details > summary::before { content: "▸ "; color: var(--muted); } | |
| details[open] > summary::before { content: "▾ "; } | |
| table { border-collapse: collapse; width: 100%; margin: .75rem 0; font-size: .92rem; } | |
| th, td { text-align: right; padding: .35rem .6rem; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; } | |
| th:first-child, td:first-child { text-align: left; } | |
| thead th { color: var(--muted); font-weight: 500; font-size: .8rem; } | |
| tbody th { font-weight: 500; } | |
| footer { margin-top: 2rem; font-size: .9rem; } | |
| @media (max-width: 40rem) { | |
| header { padding-top: 1.25rem; } | |
| h1 { font-size: 1.3rem; } | |
| .card { padding: .8rem .9rem; } | |
| #form-search { flex-direction: column; } | |
| } | |
| .warn-text { color: var(--warn-fg); background: var(--warn-bg); padding: .15rem .4rem; border-radius: 4px; } | |
| /* ---- legal.html: Czech legal corpus over the full Elasticsearch index (added classes only; nothing above changes) ---- */ | |
| .lead .en { display: block; margin-top: .5rem; color: var(--muted); font-size: .9rem; } | |
| .controls { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: .6rem; } | |
| .controls .ctl { font: inherit; font-size: .9rem; padding: .3rem .45rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--card); color: var(--fg); } | |
| .facets { display: inline-flex; flex-wrap: wrap; gap: .25rem .9rem; } | |
| .facets label, .controls > label { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; } | |
| .compare { margin: 1rem 0 .25rem; padding: .6rem .8rem; border-radius: 8px; background: var(--notice-bg); } | |
| .cmp-line { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; } | |
| .cmp-item .cmp-k { color: var(--muted); font-size: .85rem; } | |
| .cmp-item strong { font-variant-numeric: tabular-nums; } | |
| .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: .75rem; } | |
| .cols[hidden] { display: none; } | |
| .col { min-width: 0; } | |
| .col h3 { font-size: .98rem; margin: 0 0 .25rem; } | |
| .col h3 .muted { font-weight: 400; font-size: .85rem; } | |
| .hits { list-style: none; padding: 0; margin: .5rem 0 0; } | |
| .hits li { border-top: 1px solid var(--line); padding: .55rem .35rem; } | |
| .hits li.common { background: var(--notice-bg); border-left: 3px solid var(--accent); padding-left: .5rem; border-radius: 0 6px 6px 0; } | |
| .hits .head { display: flex; gap: .6rem; align-items: baseline; } | |
| .hits .rank { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 1.6rem; } | |
| .hits .title { flex: 1; font-weight: 600; font-size: .9rem; overflow-wrap: anywhere; } | |
| .hits .other { color: var(--accent); font-weight: 400; font-size: .8rem; white-space: nowrap; } | |
| .hits .score { font-family: var(--mono); font-size: .82rem; color: var(--muted); } | |
| .hits .text { margin: .35rem 0 0 2.2rem; font-size: .9rem; overflow-wrap: anywhere; } | |
| .hits .text .more { font-size: .82rem; white-space: nowrap; } | |
| .hits .seg { font-family: var(--mono); font-size: .75rem; color: var(--muted); margin: .2rem 0 0 2.2rem; overflow-wrap: anywhere; } | |
| @media (max-width: 48rem) { | |
| .cols { grid-template-columns: 1fr; } | |
| } | |