graphiql.module.css104 lines · main

1	@reference "../../../../styles/globals.css";
2
3	.root :global(.graphiql-sidebar) {
4	@apply border-r border-default;
5	overflow-x: hidden;
6	}
7
8	.root :global(.graphiql-sidebar [data-value='settings']),
9	.root :global(.graphiql-sidebar [data-value='short-keys']) {
10	display: none;
11	}
12
13	.root :global(.graphiql-sessions) {
14	@apply m-0;
15	}
16
17	.root :global(#graphiql-session) {
18	@apply p-0;
19	}
20
21	.root :global(.graphiql-session-header) {
22	display: none;
23	}
24
25	.root :global(.graphiql-horizontal-drag-bar) {
26	@apply border-l border-default;
27	}
28
29	.root :global(.graphiql-horizontal-drag-bar:hover::after) {
30	@apply rounded-full;
31	}
32
33	.root :global(.graphiql-plugin) {
34	border-left: 0;
35	}
36
37	/* Lift the response panel above the editor surface so the two read as separate panes.
38	* The token differs per theme because the editor sits at a different baseline lightness
39	* in each (~12% L in dark, ~94% L in light), so a single surface token can't lift it
40	* meaningfully in both directions. */
41	.root :global(.graphiql-response),
42	.root :global(.graphiql-response .monaco-editor),
43	.root :global(.graphiql-response .monaco-editor .margin),
44	.root :global(.graphiql-response .monaco-editor .monaco-editor-background) {
45	background-color: var(--graphiql-response-bg) !important;
46	}
47
48	/* Editor-to-response drag bar: blend it into the response side so it doesn't read as
49	* a third color sandwiched between the two panes. The plugin-to-main drag bar is left
50	* alone — it sits next to the editor surface and our default border there is fine. */
51	.root :global(.graphiql-editors + .graphiql-horizontal-drag-bar) {
52	background-color: var(--graphiql-response-bg);
53	border-left: 0;
54	}
55
56	.root :global(.graphiql-button),
57	.root :global(button.graphiql-button),
58	.root :global(.graphiql-un-styled),
59	.root :global(button.graphiql-un-styled),
60	.root :global(button.graphiql-execute-button) {
61	@apply rounded-md;
62	}
63
64	.root :global(.graphiql-button-group) {
65	@apply rounded-lg;
66	}
67
68	.root :global(.graphiql-doc-explorer-search),
69	.root :global(.graphiql-doc-explorer-search-input) {
70	@apply rounded-md;
71	}
72
73	.root :global(.graphiql-doc-explorer-search [role='listbox']) {
74	@apply rounded-b-md;
75	}
76
77	/* Theme variable overrides */
78
79	.root {
80	--font-family: theme(fontFamily.sans);
81	--font-family-mono: theme(fontFamily.mono);
82	--border-radius-2: 0;
83	--border-radius-4: 0;
84	--border-radius-8: 0;
85	--border-radius-12: 0;
86	--popover-box-shadow: none;
87	}
88
89	:global(body.graphiql-dark) .root {
90	/* HSL form of #1f1f1f, matches the editor.background returned by getTheme('dark') */
91	--color-base: 0, 0%, 12%;
92	--color-primary: 153, 50%, 50%;
93	--graphiql-response-bg: hsl(var(--background-surface-300));
94	}
95
96	:global(body.graphiql-light) .root {
97	/* HSL form of #fcfcfc, matches the dashboard bg-default and the editor.background
98	* we override to in GraphiQLTab.tsx so the editor reads as part of the surrounding UI. */
99	--color-base: 0, 0%, 98.8%;
100	--color-primary: 153, 50%, 50%;
101	/* Drop the response below the editor in light mode (inverse of dark) so it reads as
102	* the lower / "data" surface rather than the lifted one. */
103	--graphiql-response-bg: hsl(var(--background-surface-300));
104	}