react-data-grid-logs.css123 lines · main

1	@reference "./globals.css";
2
3	.data-grid--simple-logs {
4	.rdg {
5	overflow-x: auto;
6	min-width: 0;
7	}
8
9	.rdg-cell,
10	.rdg-cell span {
11	@apply text-foreground-light font-normal;
12	border-left: none;
13	border-right: none;
14	overflow: visible;
15	text-overflow: clip;
16	}
17
18	.rdg-cell {
19	display: flex;
20	align-items: center;
21	}
22
23	.rdg-cell:first-child {
24	@apply pl-5;
25	}
26	.rdg-cell:last-child {
27	@apply pr-5;
28	}
29
30	.rdg-row {
31	&.rdg-row--focused {
32	@apply border-r border-brand;
33	border-right-width: 4px;
34	}
35
36	&.rdg-row--focused .rdg-cell,
37	&.rdg-row--focused .rdg-cell span {
38	@apply !text-foreground;
39	}
40	}
41	}
42
43	.data-grid--logs-explorer {
44	@apply pb-12;
45
46	.rdg {
47	overflow-x: auto;
48	min-width: 0;
49	}
50
51	.rdg-cell,
52	.rdg-cell span {
53	@apply !text-foreground-light !font-normal;
54	border-left: none;
55	border-right: none;
56	overflow: visible;
57	text-overflow: clip;
58	}
59
60	.rdg-cell {
61	display: flex;
62	align-items: center;
63	}
64
65	.rdg-cell:first-child {
66	@apply pl-5;
67	}
68	.rdg-cell:last-child {
69	@apply pr-5;
70	}
71
72	.rdg-row {
73	&.rdg-row--focused {
74	@apply border-r border-brand;
75	border-right-width: 4px;
76	}
77
78	&.rdg-row--focused .rdg-cell,
79	&.rdg-row--focused .rdg-cell span {
80	@apply !text-foreground-light !font-semibold;
81	}
82	}
83	}
84
85	.syntax-highlight {
86	counter-reset: line-numbering;
87	font-family: Menlo, Monaco, monospace;
88	color: hsl(var(--foreground-lighter));
89	word-break: break-word;
90	}
91
92	.syntax-highlight .line::before {
93	content: counter(line-numbering);
94	counter-increment: line-numbering;
95	padding-right: 0px;
96	display: inline-block;
97	color: hsl(var(--border-stronger));
98	/* space after numbers */
99	width: 2rem;
100	text-align: left;
101	}
102
103	.logs-shimmering-loader {
104	animation: shimmer 1.5s infinite linear;
105	background: linear-gradient(
106	to right,
107	hsl(var(--background-default)) 0%,
108	hsl(var(--brand-default)) 25%,
109	hsl(var(--brand-300)) 35%,
110	hsl(var(--background-default)) 45%,
111	hsl(var(--background-surface-100)) 75%
112	);
113	background-size: 3000px 100%;
114	}
115
116	@keyframes logsShimmer {
117	0% {
118	background-position: -1000px 0;
119	}
120	50% {
121	background-position: 1000px 0;
122	}
123	}