4949  --color-scheme: var(--md-sys-color-scheme); */ 
5050
5151  --top-app-bar-height :  4.5rem  ;
52+   --top-app-bar-padding-vertical :  .5rem  ;
53+   --top-app-bar-table-cell-gutter :  1.5rem  ;
54+   --top-app-bar-search-icon-width :  4rem  ;
55+   --top-app-bar-search-padding-inset :  1.5rem  ;
56+   --top-app-bar-search-padding-inset-mobile :  1rem  ;
57+   --top-app-bar-search-font-size :  1.125rem  ;
58+   --top-app-bar-search-font-size-mobile :  1rem  ;
5259  --footer-height :  3.5rem  ;
60+ 
61+   --safe-area-inset-top :  env (safe-area-inset-top);
5362}
5463
5564body  {
@@ -64,15 +73,33 @@ img {
6473  max-width :  100%  ;
6574}
6675
67- * -webkit-scrollbar  {
68-   width :  8px  ;
69-   height :  8px  ;
70- }
71- * -webkit-scrollbar-track  {
72-   background :  none;
76+ @supports  not  selector(::-webkit-scrollbar ) {
77+   * 
78+     scrollbar-width :  thin;
79+     scrollbar-color :  var (--color-accent ) transparent;
80+   }
7381}
74- * -webkit-scrollbar-thumb  {
75-   border :  none;
82+ 
83+ @supports  selector(::-webkit-scrollbar ) {
84+   * -webkit-scrollbar  {
85+     width :  8px  ;
86+     height :  8px  ;
87+   }
88+   * -webkit-scrollbar-track  {
89+     background :  none;
90+     margin :  4px  ;
91+   }
92+   * -webkit-scrollbar-thumb  {
93+     border :  none;
94+   }
95+   * -webkit-scrollbar-thumb : hover , 
96+   * -webkit-scrollbar-thumb : active  {
97+     background-color :  var (--md-sys-color-secondary );
98+   }
99+   * 
100+     scrollbar-width :  unset;
101+     scrollbar-color :  unset;
102+   }
76103}
77104
78105.container-main  {
@@ -96,16 +123,17 @@ img {
96123  position :  relative;
97124}
98125.title  {
99-   display :  block;
100-   max-width :  calc (100%   -  5rem  );
126+   display :  inline-block;
101127  white-space :  nowrap;
102128  overflow :  hidden;
103129  text-overflow :  ellipsis;
104130  font-size :  22px  ;
105131}
106- 
132+ .tsd-page-title  {
133+   word-break :  break-all;
134+ }
107135.tsd-page-toolbar  {
108-   padding :  8 px 0 ;
136+   padding :  var ( --top-app-bar-padding-vertical )  0 ;
109137  height :  calc (var (--top-app-bar-height ) -  16px  );
110138  background-color :  var (--color-background );
111139  border-bottom :  none;
@@ -115,18 +143,68 @@ img {
115143}
116144.tsd-page-toolbar  .table-cell  {
117145  height :  56px  ;
118-   margin -left:  1.5 rem 
146+   padding -left:  var ( --top-app-bar-table-cell-gutter ) ;
119147}
120148.tsd-page-toolbar  .tsd-toolbar-icon  {
121149  padding :  20px   0 ;
122150}
123151# tsd-search  {
152+   display :  flex;
153+   flex-direction :  row-reverse;
154+   justify-content :  space-between;
124155  line-height :  56px  ;
125156  border-radius :  22px  ;
157+   padding-right :  var (--top-app-bar-search-icon-width );
158+   box-sizing :  border-box;
159+   padding-left :  0 ;
160+   margin-left :  var (--top-app-bar-table-cell-gutter );
161+   max-width :  calc (100%   -  var (--top-app-bar-table-cell-gutter ) -  var (--top-app-bar-table-cell-gutter ));
162+ }
163+ # tsd-search  .field , 
164+ # tsd-search  .field  label , 
165+ # tsd-search  .field  # tsd-toolbar-links  {
166+   position :  relative;
167+   top :  unset;
168+   right :  unset;
169+   bottom :  unset;
170+   left :  unset;
171+ }
172+ # tsd-search  .field  {
173+   position :  relative;
174+   flex :  0  0  0 ;
175+ }
176+ # tsd-search  .field : first-child  {
177+   display :  flex;
178+   flex-direction :  row-reverse;
179+   width :  100%  ;
180+   position :  absolute;
181+   left :  0 ;
182+ }
183+ # tsd-search .has-focus  .field : first-child  {
184+   z-index :  2 ;
185+ }
186+ # tsd-search  .field  label , 
187+ # tsd-search  .field  .tsd-toolbar-icon  {
188+   height :  100%  ;
189+   margin :  0  auto;
190+ }
191+ # tsd-search  .field  .tsd-toolbar-icon  {
192+   display :  flex;
193+   justify-content :  center;
194+   flex :  none;
195+ }
196+ # tsd-search  .field  .tsd-widget .no-caption  {
197+   width :  var (--top-app-bar-search-icon-width );
198+ }
199+ # tsd-search  .field  input  {
200+   padding :  var (--top-app-bar-search-padding-inset );
201+   font-size :  var (--top-app-bar-search-font-size );
202+   top :  calc (-100%   -  var (--top-app-bar-padding-vertical ) -  var (--safe-area-inset-top ));
126203}
127204# tsd-search  .results  {
128205  z-index :  -1 ;
129206  top :  calc (56px   -  22px  );
207+   left :  0 ;
130208  padding-top :  22px  ;
131209  box-shadow :  0px   4px   2px   rgba (0 ,  0 ,  0 ,  0.125 );
132210  background-color :  var (--color-background-secondary );
@@ -189,10 +267,10 @@ img {
189267.tsd-navigation  .tsd-accordion-summary  {
190268  width :  100%  ;
191269}
270+ .tsd-accordion  .tsd-accordion-summary  >  svg , 
192271.tsd-index-accordion  .tsd-accordion-summary  >  svg  {
193272  position :  absolute;
194273  right :  1.5rem  ;
195-   margin-top :  1rem  ;
196274}
197275.tsd-accordion-summary  .tsd-kind-icon  ~  span  {
198276  margin-right :  2.5rem  ;
@@ -217,6 +295,13 @@ img {
217295}
218296
219297@media  (max-width :  769px  ) {
298+   # tsd-search  {
299+     max-width :  calc (100%   -  var (--top-app-bar-search-icon-width ) -  var (--top-app-bar-table-cell-gutter ));
300+   }
301+   # tsd-search  .field  input  {
302+     font-size :  var (--top-app-bar-search-font-size );
303+     padding :  var (--top-app-bar-search-padding-inset-mobile );
304+   }
220305  .container  {
221306    padding :  1rem  ;
222307  }
@@ -238,6 +323,9 @@ img {
238323    max-height :  calc (100vh   -  var (--footer-height ) -  var (--top-app-bar-height ));
239324    top :  var (--top-app-bar-height );
240325  }
326+   .site-menu  {
327+     margin-top :  0 ;
328+   }
241329  .page-menu  {
242330    margin-left :  1rem  ;
243331  }
0 commit comments