AdithyaSK HF Staff commited on
Commit
119621d
·
1 Parent(s): e5d80d4

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.

Files changed (1) hide show
  1. 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: #f1f3f5;
4
- --border: #e5e7eb; --border-strong: #d4d7dd;
5
- --text: #1b1b1f; --muted: #5b6270; --faint: #99a0ad;
6
- --accent: #e88b00; --accent-soft: rgba(255,157,0,.12);
7
  --hf-yellow: #ffd21e; --hf-orange: #ff9d00;
8
  --ok: #16a34a; --warn: #d97706; --err: #dc2626;
9
- --hover: #f1f3f5;
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: #2c3245; --border-strong: #424a63;
16
- --text: #f6f7fa; --muted: #b8bdc9; --faint: #7e8597;
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: #1f2433;
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; }