swadhin / opencodehub public
/ opencodehub / docs-site / src / custom.css
swadhinbiswas fix: resolve E2E test failures - Darken docs accent color (#2dd4bf -> #0d9488) for WCAG AA contrast - Fix theme toggle test to click menu item instead of just button - Fix full-flow test password to meet strength requirements - Add missing frontmatter to deployment docs · 7/15/2026
4fff5fb
74 lines · 1.8 KB
Raw Download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/* OpenCodeHub Docs – Starlight theme polish */

@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&display=swap");

:root {
  /* Prefer Nerd Font if the user has it installed; fall back to Fira Code webfont. */
  --sl-font:
    "FiraCode Nerd Font", "FiraCode NF", "Fira Code", var(--sl-font-system);
  --sl-font-mono:
    "FiraCode Nerd Font", "FiraCode NF", "Fira Code", var(--sl-font-system-mono);
}

:root {
  --och-accent-1: #0d9488;
  --och-accent-2: #38bdf8;
  --och-accent-3: #a78bfa;
  --och-accent-4: #f472b6;

  --och-hero-surface: color-mix(in srgb, var(--sl-color-bg) 92%, transparent);
}

/* Slightly richer accent + nicer gradients */
:root {
  --sl-color-accent: var(--och-accent-1);
  --sl-color-accent-high: color-mix(in srgb, var(--och-accent-1) 70%, white);
}

/* Link polish */
.sl-markdown-content a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.sl-markdown-content a:hover {
  text-decoration-thickness: 2px;
}

/* Card hover polish (home page grids, etc.) */
.sl-card {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.sl-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(
    in srgb,
    var(--och-accent-2) 40%,
    var(--sl-color-gray-5)
  );
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

/* Softer nav background and nicer focus rings */
:root {
  --sl-color-bg-nav: color-mix(in srgb, var(--sl-color-bg) 92%, black);
}

:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--och-accent-2) 65%, white);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}