code.css177 lines · main

1	@reference "./globals.css";
2
3	.Code {
4	width: 100%;
5
6	.prism-code {
7	@apply m-0 p-1;
8	background-color: none;
9	white-space: normal;
10	word-break: break-word;
11
12	/* overflow: auto !important; */
13	}
14
15	.token-line {
16	@apply text-sm;
17	}
18
19	.token.imports,
20	.token.property-access {
21	@apply !text-foreground-lighter;
22	}
23
24	.token.keyword.module,
25	.token.function {
26	font-style: normal !important;
27	@apply !text-foreground-lighter;
28	}
29
30	.token.plain,
31	.token.parameter,
32	.token.punctuation,
33	.token.operator,
34	.token.console.class-name,
35	.token.doc-comment.parameter,
36	.token.doc-comment.optional-parameter,
37	.token.doc-comment.parameter.punctuation,
38	.token.doc-comment.optional-parameter.punctuation {
39	font-style: normal !important;
40	@apply !text-foreground-light;
41	}
42
43	.token.keyword,
44	.token.doc-comment.keyword {
45	font-style: normal !important;
46	@apply !text-blue-900;
47	}
48
49	.token.string {
50	font-style: normal !important;
51	@apply !text-brand;
52	}
53
54	.token.constant {
55	font-style: normal !important;
56	@apply !text-blue-900;
57	}
58
59	.token.comment {
60	font-style: normal !important;
61	@apply !text-foreground-lighter;
62	}
63
64	.token.number {
65	@apply !text-brand;
66	}
67
68	.token.boolean,
69	.token.doc-comment.class-name {
70	@apply text-brand;
71	}
72
73	.codeBlock {
74	margin-bottom: 0;
75	overflow: hidden;
76	overflow-wrap: break-word;
77	white-space: pre-wrap;
78	}
79
80	&.codeBlockWrapper {
81	position: relative;
82	}
83
84	&.codeBlockWrapper:hover .buttonContainer {
85	visibility: visible;
86	opacity: 1;
87	}
88
89	.buttonContainer {
90	right: 5px;
91	top: 5px;
92	opacity: 0;
93	position: absolute;
94	visibility: hidden;
95	transition:
96	opacity 200ms ease-in-out,
97	visibility 200ms ease-in-out,
98	bottom 200ms ease-in-out;
99
100	button {
101	@apply rounded-sm text-xs;
102	background: rgb(1, 22, 39);
103	border: 1px solid rgb(214, 222, 235);
104	color: rgb(214, 222, 235);
105	cursor: pointer;
106	line-height: 12px;
107	outline: none;
108	padding: 4px 8px;
109	}
110	}
111
112	&.codeBlockWrapper .sbui-btn-container {
113	position: absolute;
114	top: 2px;
115	right: 3px;
116
117	visibility: hidden;
118	opacity: 0;
119	}
120
121	&.codeBlockWrapper:hover .sbui-btn-container {
122	visibility: visible;
123	opacity: 1;
124	}
125	}
126
127	.CustomCodeBlock {
128	width: 100%;
129
130	.code-with-header pre {
131	border-radius: 0 0 4px 4px;
132	}
133
134	.code-with-response pre {
135	border-radius: 0;
136	}
137
138	.code-header {
139	/* @apply bg-gray-600; */
140	color: #ccc;
141	padding: 5px 15px;
142	border-radius: 4px 4px 0 0;
143	font-size: 0.8rem;
144	font-weight: bold;
145	border-bottom: 1px solid #444;
146	}
147	}
148
149	.FunctionBlock {
150	h4 {
151	margin-top: 36px;
152	margin-bottom: 12px;
153	}
154
155	p {
156	margin-top: 0px;
157	margin-bottom: 24px;
158	}
159	}
160
161	.panel-form {
162	button {
163	@apply m-4 mr-0;
164	}
165
166	.form {
167	.form-group {
168	@apply border-t border-b m-0 -mt-px text-left py-2;
169
170	input {
171	@apply px-4 text-white;
172	border: none !important;
173	width: 100%;
174	}
175	}
176	}
177	}