@@ -254,6 +254,7 @@ button {
254254 --ntp-focus-outline-color : black;
255255 --focus-ring : 0px 0px 0px 1px var (--color-white ), 0px 0px 0px 3px var (--ntp-focus-outline-color );
256256 --focus-ring-thin : 0px 0px 0px 1px var (--ntp-focus-outline-color ), 0px 0px 0px 1px var (--color-white );
257+ --focus-ring-primary : 0px 0px 0px 1px var (--color-white ), 0px 0px 0px 3px var (--ntp-color-primary );
257258}
258259[data-theme = dark ] {
259260 --ntp-background-color : var (--default-dark-bg );
@@ -267,6 +268,7 @@ button {
267268 --ntp-focus-outline-color : white;
268269 --focus-ring : 0px 0px 0px 1px var (--ntp-focus-outline-color ), 0px 0px 0px 3px var (--color-white );
269270 --focus-ring-thin : 0px 0px 0px 1px var (--color-white ), 0px 0px 0px 1px var (--ntp-focus-outline-color );
271+ --focus-ring-primary : 0px 0px 0px 1px var (--default-dark-bg ), 0px 0px 0px 3px var (--ntp-color-primary );
270272}
271273: root : has (body [data-platform-name = windows ]) {
272274 --body-font-size : 14px ;
@@ -303,28 +305,29 @@ body:has([data-reset-layout=true]) .App_tube {
303305 max-width : calc (504 * var (--px-in-rem ));
304306}
305307.vertical-space {
306- padding-block : 1rem ;
308+ padding-top : 1rem ;
309+ padding-bottom : 1rem ;
307310}
308311.layout-centered : empty {
309312 display : contents;
310313}
311314.App_layout {
312- display : grid;
313- grid-template-columns : auto 0 0 ;
314- grid-template-areas : "main gap aside" ;
315- transition : all .3s ease-in-out;
316315 position : relative;
317316 z-index : 1 ;
318317}
319- .App_layout [data-drawer-visibility = visible ] {
320- grid-template-columns : auto 4px var (--ntp-combined-width );
321- }
322318.App_main {
323319 height : 100vh ;
324320 overflow : auto;
325321 grid-area : main;
326322 color : var (--ntp-text-normal );
327323}
324+ .App_mainLayout {
325+ padding-right : 0 ;
326+ transition : padding-right .3s ;
327+ }
328+ [data-drawer-visibility = visible ] .App_mainLayout {
329+ padding-right : var (--ntp-combined-width );
330+ }
328331.App_mainScroller ::-webkit-scrollbar {
329332 width : 4px ;
330333}
@@ -345,6 +348,7 @@ body:has([data-reset-layout=true]) .App_tube {
345348 height : 100vh ;
346349 z-index : 1 ;
347350 overflow : auto;
351+ width : var (--ntp-combined-width );
348352 box-shadow :
349353 0px 0px 1px 0px # FFF inset,
350354 0px 0px 2px 0px rgba (0 , 0 , 0 , 0.08 ),
@@ -363,6 +367,17 @@ body:has([data-reset-layout=true]) .App_tube {
363367 visibility : hidden;
364368 opacity : 0 ;
365369}
370+ .App_asideLayout {
371+ position : absolute;
372+ right : 0 ;
373+ top : 0 ;
374+ z-index : 1 ;
375+ transform : translateX (100% );
376+ transition : transform .3s ;
377+ }
378+ [data-drawer-visibility = visible ] .App_asideLayout {
379+ transform : translateX (0 );
380+ }
366381.App_asideContent {
367382 opacity : 1 ;
368383 width : var (--ntp-drawer-width );
@@ -934,15 +949,13 @@ body:has([data-reset-layout=true]) .App_tube {
934949
935950/* pages/new-tab/app/favorites/components/Tile.module.css */
936951.Tile_item {
937- display : grid;
938- grid-row-gap : calc (6 * var (--px-in-rem ));
939- align-content : center;
940- justify-content : center;
952+ display : block;
941953 position : relative;
942954 text-decoration : none;
943955 color : currentColor;
944- padding-inline : var (--sp-3 );
945956 outline : none;
957+ padding-left : var (--sp-3 );
958+ padding-right : var (--sp-3 );
946959}
947960.Tile_item : focus-visible .Tile_icon {
948961 box-shadow : var (--focus-ring );
@@ -970,6 +983,7 @@ body:has([data-reset-layout=true]) .App_tube {
970983 justify-items : center;
971984 width : 4rem ;
972985 height : 4rem ;
986+ margin-bottom : 4px ;
973987 border-radius : var (--border-radius-lg );
974988}
975989.Tile_draggable {
@@ -1017,9 +1031,8 @@ body:has([data-reset-layout=true]) .App_tube {
10171031.Tile_text {
10181032 text-align : center;
10191033 font-size : calc (10 * var (--px-in-rem ));
1020- line-height : calc ( 13 * var ( --px-in-rem )) ;
1034+ line-height : 1.1 ;
10211035 font-weight : 400 ;
1022- min-height : 2.8em ;
10231036 overflow : hidden;
10241037 text-overflow : ellipsis;
10251038 line-clamp : 2 ;
@@ -1267,7 +1280,8 @@ body:not([data-platform-name]) .Button_button:active {
12671280 border-radius : var (--border-radius-sm );
12681281 height : var (--sp-8 );
12691282 border-width : 0 ;
1270- padding-inline : var (--sp-3 );
1283+ padding-left : var (--sp-3 );
1284+ padding-right : var (--sp-3 );
12711285}
12721286[data-platform-name = windows ] .Button_button : focus-visible {
12731287 outline : none;
@@ -1654,10 +1668,6 @@ body:not([data-platform-name]) .Button_button:active {
16541668 grid-template-columns : 1.5rem auto 2rem ;
16551669 grid-column-gap : var (--sp-2 );
16561670 grid-row-gap : var (--sp-1 );
1657- grid-template-rows : auto;
1658- grid-template-areas : "icon title expander" ;
1659- }
1660- .PrivacyStats_heading : has (.PrivacyStats_subtitle ) {
16611671 grid-template-rows : auto auto;
16621672 grid-template-areas : "icon title expander" "empty label label" ;
16631673}
@@ -1918,7 +1928,8 @@ body:not([data-platform-name]) .Button_button:active {
19181928 position : relative;
19191929 text-align : center;
19201930 width : 100% ;
1921- padding-block : var (--sp-6 );
1931+ padding-top : var (--sp-6 );
1932+ padding-bottom : var (--sp-6 );
19221933}
19231934.UpdateNotification_details {
19241935 width : 100% ;
@@ -2070,7 +2081,8 @@ body:not([data-platform-name]) .Button_button:active {
20702081}
20712082.CustomizerDrawerInner_bgPanel {
20722083 display : grid;
2073- aspect-ratio : 16 / 10.6 ;
2084+ width : 100% ;
2085+ height : 4rem ;
20742086 border-radius : 4px ;
20752087 align-items : center;
20762088 justify-content : center;
@@ -2079,12 +2091,10 @@ body:not([data-platform-name]) .Button_button:active {
20792091 box-shadow : 0 0 0 1px var (--ntp-surface-border-color ) inset;
20802092}
20812093.CustomizerDrawerInner_bgPanel [aria-checked = true ] {
2082- outline : 2px solid var (--ntp-color-primary );
2083- outline-offset : 2px ;
2094+ box-shadow : var (--focus-ring-primary );
20842095}
20852096.CustomizerDrawerInner_bgPanel : focus-visible {
2086- outline : 2px solid var (--ntp-focus-outline-color );
2087- outline-offset : 2px ;
2097+ box-shadow : var (--focus-ring-primary );
20882098}
20892099.CustomizerDrawerInner_bgPanel : active {
20902100 opacity : .9 ;
@@ -2231,12 +2241,10 @@ body:not([data-platform-name]) .Button_button:active {
22312241 border-radius : 50% ;
22322242}
22332243.BrowserThemeSection_themeButton [aria-checked = true ] {
2234- outline : 2px solid var (--ntp-color-primary );
2235- outline-offset : 2px ;
2244+ box-shadow : var (--focus-ring-primary );
22362245}
22372246.BrowserThemeSection_themeButton : focus-visible {
2238- outline : 2px solid var (--ntp-focus-outline-color );
2239- outline-offset : 2px ;
2247+ box-shadow : var (--focus-ring-primary );
22402248}
22412249.BrowserThemeSection_themeButton : active {
22422250 opacity : .9 ;
0 commit comments