Skip to content

Commit dc9158f

Browse files
severosevero
authored
adapt styles to source.coop (#19)
fixes #17
1 parent a6d6355 commit dc9158f

File tree

5 files changed

+132
-85
lines changed

5 files changed

+132
-85
lines changed

‎package-lock.json‎

Lines changed: 22 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
"typecheck": "tsc -b --noEmit"
1212
},
1313
"dependencies": {
14-
"hightable": "0.20.2",
15-
"hyparquet": "1.20.0",
14+
"hightable": "0.25.0",
15+
"hyparquet": "1.23.3",
1616
"hyparquet-compressors": "1.1.1",
17-
"hyperparam": "0.3.25",
17+
"hyperparam": "0.4.2",
1818
"react": "19.2.3",
1919
"react-dom": "19.2.3"
2020
},

‎src/styles/colors.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414
--gray-10: #838383;
1515
--gray-11: #646464;
1616
--gray-12: #202020;
17+
18+
--gray-a11: #0000009b;
19+
20+
--accent-2: #ffffff;
1721
}
1822
@media (prefers-color-scheme: dark) {
1923
:root {
@@ -31,5 +35,9 @@
3135
--gray-10: #7b7b7b;
3236
--gray-11: #b4b4b4;
3337
--gray-12: #eeeeee;
38+
39+
--gray-a11: #ffffffaf;
40+
41+
--accent-2: #191919;
3442
}
3543
}

‎src/styles/hightable.css‎

Lines changed: 80 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,89 @@
11
/* Theme for hightable */
22
.hightable {
3-
--hy-color-1: var(--black);
4-
--hy-color-2: var(--gray-12);
5-
--hy-color-3: var(--gray-11);
6-
--hy-color-5: var(--gray-10);
7-
--hy-color-7: var(--gray-9);
8-
--hy-color-8: var(--gray-7);
9-
--hy-color-9: var(--gray-2);
10-
--hy-color-10: var(--gray-1);
11-
12-
--hy-accent-1: var(--gray-12);
13-
--hy-accent-2: var(--gray-11);
14-
--hy-accent-3: var(--gray-8);
15-
--hy-accent-4: var(--gray-4);
16-
--hy-accent-5: var(--gray-3);
17-
18-
--hy-highlight-1: var(--gray-3);
19-
--hy-highlight-2: var(--gray-2);
20-
3+
/* texts */
4+
--menu-color: var(--gray-12);
5+
--menu-item-color: var(--gray-12);
6+
--menu-button-color: var(--gray-12);
7+
--primary-sort-icon-color: inherit;
8+
--header-color: var(--gray-12);
9+
10+
--row-number-color: var(--gray-a11);
11+
--text-color: var(--gray-a11);
12+
13+
--secondary-sort-icon-color: var(--gray-5);
14+
15+
/* backgrounds */
16+
--background-color: var(--accent-2);
17+
--menu-item-background-color: var(--accent-2);
18+
19+
--header-background-color: var(--gray-3);
20+
--focusable-background-color: var(--gray-3);
21+
--menu-button-hovered-background-color: var(--gray-3);
22+
--menu-button-focused-background-color: var(--gray-3);
23+
--row-hovered-background-color: var(--gray-3);
24+
25+
--menu-background-color: var(--gray-3);
26+
--menu-button-background-color: var(--gray-3);
27+
--menu-item-hovered-background-color: var(--gray-3);
28+
--row-number-background-color: var(--gray-3);
29+
--corner-cell-background-color: var(--gray-3);
30+
--row-selected-background-color: var(--gray-3);
31+
32+
--focus-background-color: var(--gray-5);
33+
--row-number-hovered-background-color: var(--gray-5);
34+
--row-number-selected-background-color: var(--gray-5);
35+
36+
--resize-indicator-background-color: var(--gray-12);
37+
38+
/* borders */
39+
--cell-border-color: var(--gray-5);
40+
--cell-hovered-right-border-color: var(--gray-5);
41+
--header-bottom-border-color: var(--gray-5);
42+
--menu-border-color: var(--gray-5);
43+
--menu-inner-border-color: var(--gray-5);
44+
--row-number-hovered-right-border-color: var(--gray-5);
45+
--corner-cell-right-border-color: var(--gray-5);
46+
--row-number-right-border-color: var(--gray-5);
47+
--top-border-color: var(--gray-5);
48+
49+
--focus-border-color: var(--gray-12);
50+
--focusable-border-color: var(--gray-12);
51+
--resizer-hovered-right-border-color: var(--gray-12);
52+
53+
--top-border-height: 1px;
54+
--focus-border-width: 1px;
55+
56+
/* other tweaks */
57+
th,
58+
td {
59+
font-family: var(--code-font-family);
60+
}
61+
thead {
62+
th {
63+
font-weight: normal;
64+
border-bottom-width: 1px;
65+
[role="spinbutton"]:focus,
66+
[role="spinbutton"]:hover {
67+
margin: 0;
68+
}
69+
}
70+
td:first-child {
71+
box-shadow: none;
72+
}
73+
}
74+
2175
tbody {
2276
[role="rowheader"] {
2377
text-align: right;
24-
padding-right: 8px;
25-
font-size: 0.625rem; /* column width computation is not optimal in hightable, reducing the font size to avoid cutting the numbers */
26-
font-family: var(--code-font-family);
78+
padding-right: 0.5em;
2779
}
28-
[role="cell"] {
29-
font-family: var(--code-font-family);
80+
}
81+
82+
/* fix bug in hightable CSS */
83+
thead td:first-child,
84+
tbody [role="rowheader"] {
85+
&:focus {
86+
background-color: var(--focus-background-color);
3087
}
3188
}
3289
}

‎src/styles/index.css‎

Lines changed: 19 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,6 @@ code {
3333
white-space: pre-wrap;
3434
word-break: break-all;
3535
}
36-
sub {
37-
align-items: center;
38-
display: flex;
39-
gap: 5px;
40-
}
41-
sub img {
42-
cursor: pointer;
43-
}
4436

4537
/* dropzone */
4638
.dropzone {
@@ -53,7 +45,8 @@ sub img {
5345
}
5446
.overlay {
5547
font-size: 125%;
56-
position: fixed;
48+
justify-content: center;
49+
position: absolute;
5750
top: 0;
5851
bottom: 0;
5952
right: 0;
@@ -75,12 +68,19 @@ sub img {
7568
width: 100%;
7669
}
7770

71+
/* file upload */
72+
input[type="file"] {
73+
display: none;
74+
}
75+
7876
/* content area */
7977
main {
8078
display: flex;
8179
flex-direction: column;
8280
flex: 1;
8381
min-width: 0;
82+
color: var(--gray-12);
83+
background-color: var(--accent-2);
8484
}
8585

8686
#app {
@@ -107,8 +107,7 @@ main {
107107

108108
.top-header {
109109
align-items: center;
110-
border-bottom: 1px solid #ddd;
111-
background: #eee;
110+
border-bottom: 1px solid var(--gray-5);
112111
display: flex;
113112
font-family: var(--code-font-family);
114113
font-size: 16px;
@@ -123,8 +122,7 @@ main {
123122

124123
.view-header {
125124
align-items: center;
126-
background-color: #f2f2f2;
127-
color: #444;
125+
color: var(--gray-11);
128126
display: flex;
129127
gap: 16px;
130128
height: 24px;
@@ -133,13 +131,6 @@ main {
133131
text-overflow: ellipsis;
134132
white-space: nowrap;
135133
}
136-
.viewer {
137-
display: flex;
138-
flex: 1;
139-
flex-direction: column;
140-
white-space: pre-wrap;
141-
overflow-y: auto;
142-
}
143134

144135
/* welcome */
145136
#welcome {
@@ -181,7 +172,7 @@ main {
181172
}
182173
}
183174
.quick-links a {
184-
color: var(--accent-11);
175+
color: var(--gray-12);
185176
overflow: hidden;
186177
padding: 12px;
187178
padding-left: 36px;
@@ -190,37 +181,22 @@ main {
190181
width: 100%;
191182
}
192183

193-
/* file upload */
194-
input[type="file"] {
195-
display: none;
196-
}
197-
.overlay {
198-
font-size: 125%;
199-
justify-content: center;
200-
position: absolute;
201-
top: 0;
202-
bottom: 0;
203-
right: 0;
204-
left: 0;
205-
background-color: rgba(240, 240, 240, 0.6);
206-
backdrop-filter: blur(4px);
207-
display: none;
208-
padding: 12px;
209-
z-index: 40;
210-
}
211-
.over .overlay {
184+
/* layout */
185+
.viewer {
212186
display: flex;
187+
flex: 1;
188+
flex-direction: column;
189+
white-space: pre-wrap;
190+
overflow-y: auto;
213191
}
214-
215-
/* layout */
216192
.layout {
217193
margin: 10px;
218194
max-width: 480px;
219195
}
220196
.layout .group,
221197
.layout .cell {
222198
background-color: rgba(100, 100, 100, 0.05);
223-
border: 1px solid #ccc;
199+
border: 1px solid var(--gray-5);
224200
font-size: 12px;
225201
padding: 4px 20px;
226202
margin-top: 8px;
@@ -266,4 +242,3 @@ input[type="file"] {
266242
background-color: #22222b;
267243
padding-left: 20px;
268244
}
269-

0 commit comments

Comments
 (0)