@@ -225,22 +225,32 @@ button {
225
225
--body-font-size : 13px ;
226
226
--body-font-weight : 400 ;
227
227
--body-line-height : 16px ;
228
+ --label-font-size : 13px ;
229
+ --label-font-weight : 510 ;
230
+ --label-line-height : 13px ;
228
231
--title-3-em-font-size : 15px ;
229
232
--title-3-em-font-weight : 590 ;
230
233
--title-3-em-line-height : 20px ;
231
234
}
232
- : root : has (body [data-platform-name = windows ]) {
235
+ : root : has ([data-platform = windows ]) {
236
+ --title-font-size : 24px ;
237
+ --title-font-weight : 600 ;
238
+ --title-line-height : 32px ;
233
239
--body-font-size : 14px ;
234
240
--body-font-weight : 400 ;
235
241
--body-line-height : 20px ;
236
242
--title-3-em-font-size : 16px ;
237
243
--title-3-em-font-weight : 600 ;
238
244
--title-3-em-line-height : 20px ;
245
+ --label-font-size : 14px ;
246
+ --label-font-weight : 400 ;
247
+ --label-line-height : normal;
239
248
}
240
249
[data-theme = light ] {
241
250
--history-background-color : var (--default-light-bg );
242
251
--history-surface-background-color : var (--color-white-at-30 );
243
252
--history-surface-border-color : var (--color-black-at-9 );
253
+ --history-scrollbar-controls-color : var (--color-black-at-18 );
244
254
--history-text-normal : var (--color-black-at-84 );
245
255
--history-text-invert : var (--color-white-at-84 );
246
256
--history-text-muted : var (--color-black-at-60 );
@@ -249,6 +259,7 @@ button {
249
259
--history-background-color : var (--default-dark-bg );
250
260
--history-surface-background-color : var (--color-black-at-18 );
251
261
--history-surface-border-color : var (--color-white-at-12 );
262
+ --history-scrollbar-controls-color : var (--color-white-at-18 );
252
263
--history-surface-color : var (--color-white-at-12 );
253
264
--history-text-normal : var (--color-white-at-84 );
254
265
--history-text-invert : var (--color-black-at-84 );
@@ -261,12 +272,13 @@ body {
261
272
font-weight : var (--body-font-weight );
262
273
line-height : var (--body-line-height );
263
274
background-color : var (--history-background-color );
275
+ color : var (--history-text-normal );
264
276
}
265
277
.App_layout {
266
278
--sidebar-width : 250px ;
267
279
--main-padding-left : 48px ;
268
280
--main-padding-right : 76px ;
269
- --windows- scrollbar : 15 px ;
281
+ --scrollbar-width : 18 px ;
270
282
display : grid;
271
283
grid-template-columns : var (--sidebar-width ) 1fr ;
272
284
grid-template-rows : max-content 1fr ;
@@ -278,7 +290,10 @@ body {
278
290
.App_layout [data-layout-mode = reduced ] {
279
291
--sidebar-width : 230px ;
280
292
--main-padding-left : 28px ;
281
- --main-padding-right : 56px ;
293
+ --main-padding-right : 36px ;
294
+ }
295
+ [data-platform = windows ] .App_layout {
296
+ --scrollbar-width : 15px ;
282
297
}
283
298
.App_header {
284
299
grid-area : header;
@@ -302,15 +317,37 @@ body {
302
317
}
303
318
.App_customScroller {
304
319
overflow-y : scroll;
305
- scrollbar-gutter : stable ;
320
+ padding-right : calc ( var ( --main-padding-right ) - var ( --scrollbar-width )) ;
306
321
}
307
322
[data-platform = windows ] .App_customScroller {
308
- padding-right : calc (var (--main-padding-right ) - var (--windows-scrollbar ));
323
+ scrollbar-gutter : stable;
324
+ scrollbar-width : var (--scrollbar-width );
325
+ scrollbar-color : var (--history-scrollbar-controls-color ) var (--history-background-color );
326
+ }
327
+ [data-platform = macos ] .App_customScroller {
328
+ --webkit-thumb-color : rgba (136 , 136 , 136 , 0.8 );
329
+ }
330
+ [data-platform = macos ] .App_customScroller ::-webkit-scrollbar {
331
+ width : var (--scrollbar-width );
332
+ }
333
+ [data-platform = macos ] .App_customScroller ::-webkit-scrollbar-track {
334
+ background-color : var (--history-background-color );
335
+ }
336
+ [data-platform = macos ] .App_customScroller ::-webkit-scrollbar-thumb {
337
+ background-color : var (--webkit-thumb-color );
338
+ border-radius : calc (var (--scrollbar-width ) / 2 );
339
+ border : 4px solid var (--history-background-color );
340
+ }
341
+ [data-platform = macos ] .App_customScroller ::-webkit-scrollbar-button {
342
+ display : block;
343
+ background-color : var (--history-background-color );
344
+ height : 2px ;
309
345
}
310
346
311
347
/* pages/history/app/components/Header.module.css */
312
348
.Header_root {
313
349
display : flex;
350
+ justify-content : space-between;
314
351
align-items : center;
315
352
gap : 8px ;
316
353
color : var (--history-text-normal );
@@ -320,6 +357,7 @@ body {
320
357
.Header_controls {
321
358
display : flex;
322
359
gap : 8px ;
360
+ flex-shrink : 0 ;
323
361
}
324
362
.Header_largeButton {
325
363
background : transparent;
@@ -353,7 +391,13 @@ body {
353
391
opacity : .3 ;
354
392
}
355
393
.Header_search {
356
- margin-left : auto;
394
+ max-width : 238px ;
395
+ width : 100% ;
396
+ flex-shrink : 1 ;
397
+ display : flex;
398
+ }
399
+ .Header_form {
400
+ width : 100% ;
357
401
}
358
402
.Header_label {
359
403
color : inherit;
@@ -374,7 +418,7 @@ body {
374
418
color : white;
375
419
}
376
420
.Header_searchInput {
377
- width : 238 px ;
421
+ width : 100 % ;
378
422
height : 28px ;
379
423
border-radius : 6px ;
380
424
border : 0.5px solid var (--history-surface-border-color );
@@ -487,15 +531,17 @@ body {
487
531
min-width : 0 ;
488
532
}
489
533
.Item_entryLink {
534
+ font-size : var (--label-font-size );
535
+ font-weight : var (--label-font-weight );
536
+ line-height : var (--row-height );
490
537
white-space : nowrap;
491
- font-weight : 510 ;
492
538
flex-shrink : 1 ;
493
539
min-width : 0 ;
494
540
overflow : hidden;
495
541
text-overflow : ellipsis;
496
542
text-decoration : none;
497
543
color : inherit;
498
- line-height : var ( --row-height ) ;
544
+ pointer-events : none ;
499
545
}
500
546
.Item_domain {
501
547
font-weight : 400 ;
@@ -676,21 +722,24 @@ body {
676
722
background : var (--color-white-at-12 );
677
723
}
678
724
.Sidebar_link {
725
+ font-size : var (--label-font-size );
726
+ font-weight : var (--label-font-weight );
727
+ line-height : var (--label-line-height );
728
+ color : var (--history-text-normal );
679
729
height : 40px ;
680
730
display : flex;
681
731
align-items : center;
682
732
border-radius : 8px ;
683
733
padding-left : 16px ;
684
734
text-decoration : none;
685
- font-weight : 510 ;
686
- color : var (--history-text-normal );
687
735
gap : 6px ;
688
736
border : 0 ;
689
737
box-shadow : none;
690
738
background : transparent;
691
739
flex : 1 ;
692
740
white-space : normal;
693
741
text-align : left;
742
+ text-transform : capitalize;
694
743
}
695
744
.Sidebar_delete {
696
745
height : 40px ;
0 commit comments