1/* Styles for the demo custom editors — themed exclusively with the same
2 * --vscode-* variables the rest of the workbench uses. */
4.demo-markdown-preview {
5 padding: 20px 32px;
6 max-width: 800px;
7 line-height: 1.6;
8 user-select: text;
9 -webkit-user-select: text;
10}
12.demo-markdown-preview h1,
13.demo-markdown-preview h2 {
14 border-bottom: 1px solid var(--vscode-editorWidget-border, var(--vscode-panel-border));
15 padding-bottom: 0.3em;
16 font-weight: 600;
17}
19.demo-markdown-preview a {
20 color: var(--vscode-textLink-foreground);
21 text-decoration: none;
22}
24.demo-markdown-preview a:hover {
25 text-decoration: underline;
26}
28.demo-markdown-preview code {
29 background-color: var(--vscode-textCodeBlock-background);
30 border-radius: 4px;
31 padding: 1px 4px;
32 font-family: ui-monospace, Menlo, Monaco, monospace;
33 font-size: 0.9em;
34}
36.demo-markdown-preview pre code {
37 display: block;
38 padding: 12px;
39 overflow-x: auto;
40}
42.demo-markdown-preview blockquote {
43 margin: 0;
44 padding-left: 12px;
45 border-left: 4px solid var(--vscode-textBlockQuote-border);
46 background-color: var(--vscode-textBlockQuote-background);
47 color: var(--vscode-descriptionForeground);
48}
50.demo-csv-viewer {
51 padding: 12px;
52}
54.demo-csv-viewer table {
55 border-collapse: collapse;
56 font-size: 13px;
57 user-select: text;
58 -webkit-user-select: text;
59}
61.demo-csv-viewer th,
62.demo-csv-viewer td {
63 padding: 4px 12px;
64 text-align: left;
65 border: 1px solid var(--vscode-editorWidget-border, var(--vscode-panel-border));
66}
68.demo-csv-viewer th {
69 background-color: var(--vscode-keybindingTable-headerBackground, var(--vscode-editorWidget-background));
70 font-weight: 600;
71}
73.demo-csv-viewer tr:nth-child(even) td {
74 background-color: var(--vscode-keybindingTable-rowsBackground, transparent);
75}
77.demo-plots {
78 padding: 10px;
79 display: flex;
80 flex-direction: column;
81 gap: 10px;
82}
84.demo-plot {
85 background-color: var(--vscode-editorWidget-background, transparent);
86 border: 1px solid var(--vscode-editorWidget-border, var(--vscode-panel-border));
87 border-radius: 4px;
88 padding: 8px 10px 6px;
89}
91.demo-plot-title {
92 font-size: 12px;
93 font-weight: 600;
94 margin-bottom: 4px;
95 color: var(--vscode-foreground);
96}
98.demo-plot-area {
99 position: relative;
100}
102.demo-plot-tooltip {
103 position: absolute;
104 pointer-events: none;
105 padding: 2px 6px;
106 font-size: 11px;
107 border-radius: 3px;
108 background-color: var(--vscode-editorHoverWidget-background);
109 color: var(--vscode-editorHoverWidget-foreground, var(--vscode-foreground));
110 border: 1px solid var(--vscode-editorHoverWidget-border);
111 white-space: nowrap;
112}
114.demo-image-viewer {
115 height: 100%;
116 display: flex;
117 flex-direction: column;
118 align-items: center;
119 justify-content: center;
120 gap: 10px;
121}
123.demo-image-viewer img {
124 max-width: calc(100% - 40px);
125 max-height: calc(100% - 60px);
126 object-fit: contain;
127 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
128}
130.demo-image-caption {
131 font-size: 12px;
132 color: var(--vscode-descriptionForeground);
133}