Download app.css from HuggingFaceBio/carbon-a-database-explorer: direct link, hf CLI and curl.
- Browser
- Download file 5.85 kB
-
https://huggingface.co/spaces/HuggingFaceBio/carbon-a-database-explorer/resolve/refs%2Fpr%2F2/app.css
- Command line
-
hf download hf://spaces/HuggingFaceBio/carbon-a-database-explorer@refs/pr/2/app.css
-
curl -L -o app.css https://huggingface.co/spaces/HuggingFaceBio/carbon-a-database-explorer/resolve/refs%2Fpr%2F2/app.css
5.85 kB
| /* Global component styling, paired with the landing graphic's scoped atlas.css. */ | |
| .gradio-container { max-width:1280px; margin:auto; padding:24px 20px 40px; color-scheme:light; } | |
| #eukaryotic-atlas { padding:0; border:0; background:transparent; } | |
| .gradio-container .atlas-panel { background:#f7f8f0; border:1px solid #e0e6d8; border-radius:24px; padding:26px 30px; box-shadow:0 8px 32px #234b2908; gap:18px; margin-top:6px; } | |
| .workspace-heading { display:flex; align-items:flex-start; gap:14px; padding:0 0 4px; } | |
| .workspace-step { width:32px; height:32px; border:1px solid #cdddc8; background:#eaf1e2; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font:500 11px Arial,sans-serif; color:#527261; margin-top:4px; } | |
| .workspace-heading h2 { margin:0 0 8px; font:400 32px/1.15 Georgia,'Times New Roman',serif; letter-spacing:-.7px; color:#173c30; } | |
| .workspace-heading p { margin:0; color:#647467; font:13px/1.6 Arial,Helvetica,sans-serif; } | |
| .gradio-container .quiet-note { color:#647467; font-size:12px; line-height:1.7; } | |
| .gradio-container .quiet-note p { color:#647467; font-size:12px; line-height:1.7; } | |
| .gradio-container .scope-note { padding:11px 15px; border:1px solid #e0e6d8; border-radius:12px; background:#edf3e7; } | |
| .gradio-container .scope-note p { margin:0; } | |
| .gradio-container .action-button { align-self:flex-end; min-height:46px; } | |
| .gradio-container .atlas-panel > .form { border:0; background:transparent; box-shadow:none; } | |
| .gradio-container .atlas-panel .form { border-radius:14px; } | |
| .gradio-container .atlas-panel button { transition:background-color .15s, border-color .15s; } | |
| .gradio-container button:focus-visible,.gradio-container a:focus-visible { outline:2px solid #327555; outline-offset:3px; } | |
| .gradio-container .prose a { text-underline-offset:3px; } | |
| .gradio-container .prose code { color:#315641; } | |
| .gradio-container .atlas-disclosure { border:1px solid #e0e6d8; border-radius:14px; box-shadow:none; } | |
| .gradio-container .atlas-disclosure > button { padding:15px 18px; } | |
| #annotation-plot { border:1px solid #e0e6d8; background:#fffefa; border-radius:16px; overflow:hidden; } | |
| #annotation-plot .plot-container { background:#fffefa; } | |
| #annotation-examples { font-size:12px; } | |
| #annotation-examples .label { color:#647467; } | |
| #annotation-results { border-radius:14px; } | |
| .workspace-footer { border-top:1px solid #e0e6d8; padding-top:18px; margin-top:6px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font:11px/1.6 Arial,sans-serif; color:#75836f; } | |
| .workspace-footer a { color:#315641; text-decoration:none; } | |
| .workspace-footer a:hover { text-decoration:underline; } | |
| @media(max-width:700px) { | |
| .gradio-container { padding:12px 10px 24px; } | |
| .gradio-container .atlas-panel { border-radius:18px; padding:20px 15px; } | |
| .workspace-heading h2 { font-size:28px; } | |
| .workspace-heading { gap:10px; } | |
| .gradio-container .action-button { width:100%; } | |
| } | |
| @media(prefers-reduced-motion:reduce) { .gradio-container .atlas-panel button { transition:none; } } | |
| /* Full-width navigation: one equal segment for each view. */ | |
| .gradio-container { width:100%; min-width:0; box-sizing:border-box; } | |
| #atlas-navigation { border:0; background:transparent; min-width:0; max-width:100%; } | |
| #atlas-navigation > .tab-wrapper { width:100%; height:auto; min-height:0; border:0; box-shadow:none; margin:0 0 18px; padding:0; } | |
| #atlas-navigation > .tab-wrapper > .tab-container { display:flex; justify-content:flex-start; gap:26px; width:100%; height:auto; box-sizing:border-box; border:0; border-bottom:1px solid #dbe3d3; border-radius:0; padding:0; margin:0; background:transparent; box-shadow:none; } | |
| #atlas-navigation > .tab-wrapper > .tab-container > button { display:inline-flex; align-items:center; justify-content:flex-start; width:auto; min-width:0; min-height:0; height:auto; box-sizing:border-box; padding:0 2px 11px; margin:0; border:0; border-bottom:2px solid transparent; border-radius:0; box-shadow:none; background:transparent; color:#6c7d6a; font:600 14px/1.4 Arial,Helvetica,sans-serif; white-space:nowrap; text-align:left; text-decoration:none; transition:color .15s; } | |
| #atlas-navigation > .tab-wrapper > .tab-container > button:hover { background:transparent; color:#173c30; } | |
| #atlas-navigation > .tab-wrapper > .tab-container > button[aria-selected="true"] { background:transparent; color:#173c30; border-bottom-color:#245d45; } | |
| #atlas-navigation > .tab-wrapper::before, #atlas-navigation > .tab-wrapper::after, | |
| #atlas-navigation > .tab-wrapper > .tab-container::before, #atlas-navigation > .tab-wrapper > .tab-container::after, | |
| #atlas-navigation > .tab-wrapper > .tab-container > button::before, #atlas-navigation > .tab-wrapper > .tab-container > button::after { content:none; display:none; } | |
| #atlas-navigation > .tab-wrapper > .overflow-menu { display:none; } | |
| #atlas-overview, #atlas-database { border:0; background:transparent; padding:0; min-width:0; max-width:100%; } | |
| .database-heading { padding:14px 4px 12px; } | |
| .database-heading .database-eyebrow { color:#647467; font:11px/1.4 Arial,Helvetica,sans-serif; letter-spacing:2px; margin:0 0 12px; } | |
| .database-heading h1 { color:#173c30; font:400 clamp(32px,5vw,48px)/1.1 Georgia,'Times New Roman',serif; letter-spacing:-1px; margin:0 0 12px; } | |
| .database-heading p { color:#647467; font:14px/1.6 Arial,Helvetica,sans-serif; margin:0; } | |
| @media(max-width:700px) { | |
| #atlas-navigation > .tab-wrapper > .tab-container { gap:18px; } | |
| #atlas-navigation > .tab-wrapper > .tab-container > button { font-size:13px; padding:0 1px 9px; } | |
| } | |