Spaces:
Running
Running
More evident borders + sharper light-mode text
Browse files- Bump --border + --border-strong in both themes so the workspace columns
read as distinct panels, not one bleed.
- Use --border-strong explicitly for the 3-pane workspace outer + column
dividers (tasks-panel | tree | content).
- Light: muted #5b6270 → #3f4655 (darker), border #e5e7eb → #d3d8e0 so file
tree and breadcrumb text isn't washed out.
- Dark: muted/faint bumped a notch for legibility; hover #1f2433 → #232938.
- static/style.css +12 -11
static/style.css
CHANGED
|
@@ -1,23 +1,23 @@
|
|
| 1 |
/* Hugging Face Harbor Visualiser — Hugging Face themed dark/light. */
|
| 2 |
:root {
|
| 3 |
-
--bg: #ffffff; --panel: #f9fafb; --panel-2: #
|
| 4 |
-
--border: #
|
| 5 |
-
--text: #1b1b1f; --muted: #
|
| 6 |
-
--accent: #e88b00; --accent-soft: rgba(255,157,0,.
|
| 7 |
--hf-yellow: #ffd21e; --hf-orange: #ff9d00;
|
| 8 |
--ok: #16a34a; --warn: #d97706; --err: #dc2626;
|
| 9 |
-
--hover: #
|
| 10 |
--mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
|
| 11 |
--radius: 10px; --nav-h: 56px; --maxw: 1500px;
|
| 12 |
}
|
| 13 |
:root[data-theme="dark"] {
|
| 14 |
--bg: #0a0c14; --panel: #14171f; --panel-2: #1e2230;
|
| 15 |
-
--border: #
|
| 16 |
-
--text: #f6f7fa; --muted: #
|
| 17 |
--accent: #ffc266; --accent-soft: rgba(255,194,102,.18);
|
| 18 |
--hf-yellow: #ffd21e; --hf-orange: #ffa320;
|
| 19 |
--ok: #5af08a; --warn: #ffc94a; --err: #ff7a7a;
|
| 20 |
-
--hover: #
|
| 21 |
}
|
| 22 |
* { box-sizing: border-box; }
|
| 23 |
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; }
|
|
@@ -184,13 +184,14 @@ h2 { font-size: 18px; font-weight: 600; margin: 0 0 12px; }
|
|
| 184 |
.tnode.active svg { color: var(--accent); }
|
| 185 |
|
| 186 |
/* task master-detail: [tasks panel | file tree | content] */
|
| 187 |
-
.taskview { display: grid; grid-template-columns: 250px 230px 1fr; border: 1px solid var(--border);
|
| 188 |
border-radius: var(--radius); overflow: hidden; height: calc(100vh - 200px); min-height: 460px;
|
| 189 |
-
transition: grid-template-columns .18s ease; }
|
| 190 |
.taskview.collapsed { grid-template-columns: 0 230px 1fr; }
|
| 191 |
.taskview.collapsed .tasks-panel { opacity: 0; pointer-events: none; }
|
| 192 |
-
.tasks-panel { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--border);
|
| 193 |
background: var(--panel-2); overflow: hidden; transition: opacity .15s ease; }
|
|
|
|
| 194 |
.tasks-panel .tp-head { padding: 11px 14px; font-size: 11px; letter-spacing: .8px; text-transform: uppercase;
|
| 195 |
color: var(--muted); border-bottom: 1px solid var(--border); flex: none; font-weight: 600; }
|
| 196 |
.tasks-panel .tp-head .faint { color: var(--faint); font-weight: 400; }
|
|
|
|
| 1 |
/* Hugging Face Harbor Visualiser — Hugging Face themed dark/light. */
|
| 2 |
:root {
|
| 3 |
+
--bg: #ffffff; --panel: #f9fafb; --panel-2: #eef0f3;
|
| 4 |
+
--border: #d3d8e0; --border-strong: #aeb5c0;
|
| 5 |
+
--text: #1b1b1f; --muted: #3f4655; --faint: #7d8493;
|
| 6 |
+
--accent: #e88b00; --accent-soft: rgba(255,157,0,.14);
|
| 7 |
--hf-yellow: #ffd21e; --hf-orange: #ff9d00;
|
| 8 |
--ok: #16a34a; --warn: #d97706; --err: #dc2626;
|
| 9 |
+
--hover: #eef0f3;
|
| 10 |
--mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
|
| 11 |
--radius: 10px; --nav-h: 56px; --maxw: 1500px;
|
| 12 |
}
|
| 13 |
:root[data-theme="dark"] {
|
| 14 |
--bg: #0a0c14; --panel: #14171f; --panel-2: #1e2230;
|
| 15 |
+
--border: #3a4258; --border-strong: #525a73;
|
| 16 |
+
--text: #f6f7fa; --muted: #c6cbd6; --faint: #8a91a2;
|
| 17 |
--accent: #ffc266; --accent-soft: rgba(255,194,102,.18);
|
| 18 |
--hf-yellow: #ffd21e; --hf-orange: #ffa320;
|
| 19 |
--ok: #5af08a; --warn: #ffc94a; --err: #ff7a7a;
|
| 20 |
+
--hover: #232938;
|
| 21 |
}
|
| 22 |
* { box-sizing: border-box; }
|
| 23 |
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; }
|
|
|
|
| 184 |
.tnode.active svg { color: var(--accent); }
|
| 185 |
|
| 186 |
/* task master-detail: [tasks panel | file tree | content] */
|
| 187 |
+
.taskview { display: grid; grid-template-columns: 250px 230px 1fr; border: 1px solid var(--border-strong);
|
| 188 |
border-radius: var(--radius); overflow: hidden; height: calc(100vh - 200px); min-height: 460px;
|
| 189 |
+
transition: grid-template-columns .18s ease; box-shadow: 0 0 0 1px transparent; }
|
| 190 |
.taskview.collapsed { grid-template-columns: 0 230px 1fr; }
|
| 191 |
.taskview.collapsed .tasks-panel { opacity: 0; pointer-events: none; }
|
| 192 |
+
.tasks-panel { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--border-strong);
|
| 193 |
background: var(--panel-2); overflow: hidden; transition: opacity .15s ease; }
|
| 194 |
+
.taskview .tree { border-right: 1px solid var(--border-strong); }
|
| 195 |
.tasks-panel .tp-head { padding: 11px 14px; font-size: 11px; letter-spacing: .8px; text-transform: uppercase;
|
| 196 |
color: var(--muted); border-bottom: 1px solid var(--border); flex: none; font-weight: 600; }
|
| 197 |
.tasks-panel .tp-head .faint { color: var(--faint); font-weight: 400; }
|