docs/style.css at main · controlplane-docs/docs · GitHub

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
75
76
77
78
79
80
81
/* ------------------------------------------------------------------ *
 * MCP sidebar icon: theme-aware coloring via CSS filter                *
 *                                                                      *
 * Mintlify renders local SVG icons as <img> tags, so we can't use      *
 * mask (img content shows through). Instead we use CSS filter chains   *
 * to recolor the rendered black SVG.                                   *
 *                                                                      *
 * The MCP brand mark stays in /icons/mcp.svg (rendered as-is on Cards) *
 * and /icons/mcp-sidebar.svg is the source we recolor for the sidebar. *
 * The sidebar SVG must have a solid black fill so the filter chain     *
 * can transform it.                                                    *
 *                                                                      *
 * Filter values generated via codepen.io/sosuke/pen/Pjoqqp.            *
 * Targets:                                                             *
 *   inactive light = #71717a (zinc-500)                                *
 *   active   light = #1563ff (primary)                                 *
 *   inactive dark  = #d4d4d8 (zinc-300)                                *
 *   active   dark  = #64a5ef (primary-light)                           *
 * ------------------------------------------------------------------ */

/* Inactive (light mode): black -> Tailwind gray-400 #9ca3af (matches siblings) */
img[src*="/icons/mcp-sidebar.svg"] {
  filter: brightness(0) saturate(100%) invert(69%) sepia(9%) saturate(309%) hue-rotate(176deg) brightness(95%) contrast(87%) !important;
}

/* Active (light mode): black -> primary blue #1563ff */
a[aria-current="page"] img[src*="/icons/mcp-sidebar.svg"] {
  filter: brightness(0) saturate(100%) invert(28%) sepia(98%) saturate(3000%) hue-rotate(213deg) brightness(102%) contrast(101%) !important;
}

/* Inactive (dark mode): black -> Tailwind gray-500 #6b7280 (matches siblings) */
.dark img[src*="/icons/mcp-sidebar.svg"] {
  filter: brightness(0) saturate(100%) invert(47%) sepia(8%) saturate(420%) hue-rotate(177deg) brightness(94%) contrast(85%) !important;
}

/* Active (dark mode): black -> primary-light #64a5ef */
.dark a[aria-current="page"] img[src*="/icons/mcp-sidebar.svg"] {
  filter: brightness(0) saturate(100%) invert(63%) sepia(74%) saturate(380%) hue-rotate(186deg) brightness(98%) contrast(91%) !important;
}

/* Group header icon — match the group title text color (gray-900 light, gray-200 dark) */
img.sidebar-group-icon[src*="/icons/mcp-sidebar.svg"] {
  filter: brightness(0) !important; /* pure black */
}

.dark img.sidebar-group-icon[src*="/icons/mcp-sidebar.svg"] {
  filter: brightness(0) invert(1) !important; /* pure white in dark mode */
}

/* ------------------------------------------------------------------ *
 * MCP Card icon — match Mintlify's bg-primary / dark:bg-primary-light *
 * The card SVG /icons/mcp.svg uses fill="#000000" so we filter to     *
 * color it in both modes.                                             *
 *                                                                      *
 * Use *= (contains), NOT $= (ends-with): in production Mintlify serves *
 * card icons through its image optimizer, so the src becomes           *
 * .../icons/mcp.svg?fit=max&auto=format&... — the query string breaks  *
 * an ends-with match (works locally where the raw path is served).     *
 * ------------------------------------------------------------------ */

/* Light mode: black -> primary blue #1563ff */
img[src*="/icons/mcp.svg"] {
  filter: brightness(0) saturate(100%) invert(28%) sepia(98%) saturate(3000%) hue-rotate(213deg) brightness(102%) contrast(101%) !important;
}

/* Dark mode: black -> primary-light #64a5ef */
.dark img[src*="/icons/mcp.svg"] {
  filter: brightness(0) saturate(100%) invert(63%) sepia(74%) saturate(380%) hue-rotate(186deg) brightness(98%) contrast(91%) !important;
}

/* ------------------------------------------------------------------ *
 * Dark-mode visibility fix for tool brand icons that bake in a dark   *
 * fill and become invisible on a dark sidebar/card background. We     *
 * invert them in dark mode to flip their dark pixels to light.        *
 * *= (contains) for the same image-optimizer query-string reason.     *
 * ------------------------------------------------------------------ */
.dark img[src*="/icons/codex.svg"],
.dark img[src*="/icons/cursor.svg"],
.dark img[src*="/icons/opencode.svg"] {
  filter: invert(1) !important;
}