@@ -1209,8 +1209,90 @@ html {
12091209 padding-block : 40px 0 ;
12101210}
12111211.onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-main .main-content .action-buttons .primary {
1212- min-width : 96px ;
1213- padding-block : 8px ;
1212+ min-width : 71px ;
1213+ padding-block : 7px ;
1214+ }
1215+ .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-main .main-content .tile-title {
1216+ font-size : 18px ;
1217+ }
1218+ .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-secondary {
1219+ background : var (--pinnable-sites-bkg );
1220+ }
1221+ .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-secondary .hero-text h1 {
1222+ font-size : 26px ;
1223+ }
1224+ .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-secondary .hero-text h2 {
1225+ margin-block-end : 370px ;
1226+ }
1227+ @media only screen and (width <= 800px) {
1228+ .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-main .main-content .main-content-inner {
1229+ align-items : stretch;
1230+ margin-block-start : -30px ;
1231+ }
1232+ .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-main .main-content .action-buttons {
1233+ text-align : start;
1234+ justify-content : flex-start;
1235+ }
1236+ .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-main .main-content .pinnable-sites-list {
1237+ max-width : none;
1238+ }
1239+ .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-main .main-content .pinnable-sites-list .pinnable-sites-pin-button {
1240+ min-width : 62px ;
1241+ }
1242+ .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-main .main-content .tile-title {
1243+ font-size : 13px ;
1244+ }
1245+ .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-secondary {
1246+ background : linear-gradient (0deg , light-dark (rgb (252 , 245 , 240 ), # 210340 ) 0% , light-dark (rgb (250 , 236 , 241 ), # 210340 ) 57% , light-dark (rgb (245 , 212 , 245 ), # 210340 ) 100% );
1247+ height : auto;
1248+ min-height : 100px ;
1249+ }
1250+ .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-secondary .message-text {
1251+ margin-inline : 0 ;
1252+ }
1253+ .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-secondary .hero-text h1 {
1254+ text-align : start;
1255+ margin-inline : 0 ;
1256+ padding-inline : 40px ;
1257+ font-size : 17px ;
1258+ }
1259+ .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-secondary .hero-text h2 {
1260+ margin-block-end : 0 ;
1261+ }
1262+ }
1263+ [narrow ] .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-main .main-content .main-content-inner {
1264+ align-items : stretch;
1265+ margin-block-start : -30px ;
1266+ }
1267+ [narrow ] .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-main .main-content .action-buttons {
1268+ text-align : start;
1269+ justify-content : flex-start;
1270+ }
1271+ [narrow ] .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-main .main-content .pinnable-sites-list {
1272+ max-width : none;
1273+ }
1274+ [narrow ] .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-main .main-content .pinnable-sites-list .pinnable-sites-pin-button {
1275+ min-width : 62px ;
1276+ }
1277+ [narrow ] .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-main .main-content .tile-title {
1278+ font-size : 13px ;
1279+ }
1280+ [narrow ] .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-secondary {
1281+ background : linear-gradient (0deg , light-dark (rgb (252 , 245 , 240 ), # 210340 ) 0% , light-dark (rgb (250 , 236 , 241 ), # 210340 ) 57% , light-dark (rgb (245 , 212 , 245 ), # 210340 ) 100% );
1282+ height : auto;
1283+ min-height : 100px ;
1284+ }
1285+ [narrow ] .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-secondary .message-text {
1286+ margin-inline : 0 ;
1287+ }
1288+ [narrow ] .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-secondary .hero-text h1 {
1289+ text-align : start;
1290+ margin-inline : 0 ;
1291+ padding-inline : 40px ;
1292+ font-size : 17px ;
1293+ }
1294+ [narrow ] .onboardingContainer : has (.pinnable-sites-list ) .screen [pos = split ] .section-secondary .hero-text h2 {
1295+ margin-block-end : 0 ;
12141296}
12151297
12161298.onboardingContainer : has (.embedded-backup-restore-container ) .screen [pos = split ][fullscreen ] .section-main .main-content {
@@ -3467,14 +3549,14 @@ html {
34673549 display : flex;
34683550 flex-direction : column;
34693551 padding : 0 ;
3470- gap : var ( --space-medium ) ;
3552+ gap : 16 px ;
34713553 max-width : 300px ;
34723554}
34733555.onboardingContainer .pinnable-sites-list .pinnable-sites-item {
34743556 display : flex;
34753557 flex-direction : row;
34763558 align-items : center;
3477- padding : 4 px ;
3559+ padding-inline : 8 px ;
34783560 list-style : none;
34793561 border : 1px solid var (--border-color );
34803562 border-radius : var (--border-radius-medium );
@@ -3512,7 +3594,7 @@ html {
35123594 opacity : 0 ;
35133595 pointer-events : none;
35143596 min-width : 62px ;
3515- padding-block : 8 px ;
3597+ padding-block : 7 px ;
35163598 transition : opacity 100ms ;
35173599}
35183600@starting-style {
0 commit comments