@stackoverflow/stacks 3.0.0-beta.21 → 3.0.0-beta.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1339,15 +1339,18 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
1339
1339
  }
1340
1340
  .s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-btn__tonal):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google) {
1341
1341
  --_bu-bg: var(--theme-button-color, var(--theme-secondary));
1342
- --_bu-bg-disabled: var(--black-350);
1342
+ --_bu-bg-disabled: var(--theme-secondary-300);
1343
1343
  --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-500));
1344
1344
  --_bu-fc: var(--white);
1345
- --_bu-fc-disabled: var(--black-050);
1345
+ --_bu-fc-disabled: var(--theme-secondary-100);
1346
1346
  --_bu-fc-hover: var(--theme-button-hover-color, var(--white));
1347
1347
  --_bu-badge-bg: var(--theme-secondary-500);
1348
1348
  --_bu-badge-fc: var(--white);
1349
- --_bu-badge-bg-disabled: var(--black-250);
1350
- --_bu-badge-fc-disabled: var(--black-050);
1349
+ --_bu-badge-bg-disabled: var(--theme-secondary-300);
1350
+ --_bu-badge-fc-disabled: var(--theme-secondary-100);
1351
+ }
1352
+ body.theme-highcontrast .s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-btn__tonal):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google) {
1353
+ --_bu-bg-disabled: var(--theme-secondary-300);
1351
1354
  }
1352
1355
  .s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-btn__tonal):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google).s-btn__clear {
1353
1356
  --_bu-bg: transparent;
@@ -1359,11 +1362,15 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
1359
1362
  --_bu-fc-hover: var(--_bu-fc);
1360
1363
  --_bu-badge-bg: var(--theme-secondary-100);
1361
1364
  --_bu-badge-fc: var(--theme-secondary-500);
1362
- --_bu-badge-bg-disabled: var(--black-100);
1363
- --_bu-badge-fc-disabled: var(--black-350);
1365
+ --_bu-badge-bg-disabled: var(--theme-secondary-100);
1366
+ --_bu-badge-fc-disabled: var(--theme-secondary-300);
1364
1367
  }
1365
1368
  body.theme-highcontrast .s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-btn__tonal):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google).s-btn__clear {
1366
- --_bu-bc: var(--theme-secondary-600);
1369
+ --_bu-bc: var(--theme-secondary-400);
1370
+ --_bu-bc-disabled: var(--theme-secondary-300);
1371
+ --_bu-bg-disabled: var(--white);
1372
+ --_bu-badge-bg-disabled: var(--theme-secondary-100);
1373
+ --_bu-badge-fc-disabled: var(--theme-secondary-300);
1367
1374
  }
1368
1375
  .s-btn.s-btn__danger {
1369
1376
  --_bu-bg: var(--red-400);
@@ -1378,6 +1385,39 @@ body.theme-highcontrast .s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-
1378
1385
  --_bu-badge-bg-disabled: var(--red-300);
1379
1386
  --_bu-badge-fc-disabled: var(--black-100);
1380
1387
  }
1388
+ @media (prefers-color-scheme: dark) {
1389
+ body.theme-system .s-btn.s-btn__danger {
1390
+ --_bu-bg-disabled: var(--red-300);
1391
+ --_bu-badge-fc-disabled: var(--black-050);
1392
+ --_bu-badge-bg-disabled: var(--red-400);
1393
+ }
1394
+ }
1395
+ body.theme-dark .s-btn.s-btn__danger,
1396
+ .theme-dark__forced .s-btn.s-btn__danger,
1397
+ body.theme-system .theme-dark__forced .s-btn.s-btn__danger {
1398
+ --_bu-bg-disabled: var(--red-300);
1399
+ --_bu-badge-fc-disabled: var(--black-050);
1400
+ --_bu-badge-bg-disabled: var(--red-400);
1401
+ }
1402
+ body.theme-highcontrast .s-btn.s-btn__danger {
1403
+ --_bu-fc-disabled: var(--black-300);
1404
+ --_bu-badge-bg-disabled: var(--red-100);
1405
+ --_bu-badge-fc-disabled: var(--black-300);
1406
+ }
1407
+ @media (prefers-color-scheme: dark) {
1408
+ body.theme-highcontrast.theme-system .s-btn.s-btn__danger {
1409
+ --_bu-bg-disabled: var(--red-300);
1410
+ --_bu-fc-disabled: var(--black-050);
1411
+ --_bu-badge-fc-disabled: var(--black-050);
1412
+ --_bu-badge-bg-disabled: var(--red-400);
1413
+ }
1414
+ }
1415
+ body.theme-highcontrast.theme-dark .s-btn.s-btn__danger {
1416
+ --_bu-bg-disabled: var(--red-300);
1417
+ --_bu-fc-disabled: var(--black-050);
1418
+ --_bu-badge-fc-disabled: var(--black-050);
1419
+ --_bu-badge-bg-disabled: var(--red-400);
1420
+ }
1381
1421
  .s-btn.s-btn__danger.s-btn__clear {
1382
1422
  --_bu-bg: transparent;
1383
1423
  --_bu-bg-disabled: var(--_bu-bg);
@@ -1392,9 +1432,39 @@ body.theme-highcontrast .s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-
1392
1432
  --_bu-badge-bg-disabled: var(--red-100);
1393
1433
  --_bu-badge-fc-disabled: var(--red-300);
1394
1434
  }
1435
+ @media (prefers-color-scheme: dark) {
1436
+ body.theme-system .s-btn.s-btn__danger.s-btn__clear {
1437
+ --_bu-bg-disabled: var(--_bu-bg);
1438
+ --_bu-fc-disabled: var(--red-300);
1439
+ --_bu-badge-bg-disabled: var(--red-100);
1440
+ --_bu-badge-fc-disabled: var(--red-400);
1441
+ }
1442
+ }
1443
+ body.theme-dark .s-btn.s-btn__danger.s-btn__clear,
1444
+ .theme-dark__forced .s-btn.s-btn__danger.s-btn__clear,
1445
+ body.theme-system .theme-dark__forced .s-btn.s-btn__danger.s-btn__clear {
1446
+ --_bu-bg-disabled: var(--_bu-bg);
1447
+ --_bu-fc-disabled: var(--red-300);
1448
+ --_bu-badge-bg-disabled: var(--red-100);
1449
+ --_bu-badge-fc-disabled: var(--red-400);
1450
+ }
1395
1451
  body.theme-highcontrast .s-btn.s-btn__danger.s-btn__clear {
1396
1452
  --_bu-bc: var(--red-600);
1397
- --_bu-bc-disabled: var(--red-300);
1453
+ --_bu-bc-disabled: var(--black-300);
1454
+ }
1455
+ @media (prefers-color-scheme: dark) {
1456
+ body.theme-highcontrast.theme-system .s-btn.s-btn__danger.s-btn__clear {
1457
+ --_bu-bg-disabled: var(--black-050);
1458
+ --_bu-fc-disabled: var(--red-300);
1459
+ --_bu-badge-bg-disabled: var(--red-100);
1460
+ --_bu-badge-fc-disabled: var(--red-300);
1461
+ }
1462
+ }
1463
+ body.theme-highcontrast.theme-dark .s-btn.s-btn__danger.s-btn__clear {
1464
+ --_bu-bg-disabled: var(--black-050);
1465
+ --_bu-fc-disabled: var(--red-300);
1466
+ --_bu-badge-bg-disabled: var(--red-100);
1467
+ --_bu-badge-fc-disabled: var(--red-300);
1398
1468
  }
1399
1469
  .s-btn.s-btn__featured {
1400
1470
  --_bu-bg: var(--purple-400);
@@ -1408,20 +1478,55 @@ body.theme-highcontrast .s-btn.s-btn__danger.s-btn__clear {
1408
1478
  --_bu-badge-bg-disabled: var(--purple-300);
1409
1479
  --_bu-badge-fc-disabled: var(--black-100);
1410
1480
  }
1481
+ @media (prefers-color-scheme: dark) {
1482
+ body.theme-system .s-btn.s-btn__featured {
1483
+ --_bu-bg-disabled: var(--purple-100);
1484
+ --_bu-fc-disabled: var(--purple-400);
1485
+ --_bu-badge-fc-disabled: var(--purple-400);
1486
+ --_bu-badge-bg-disabled: var(--purple-200);
1487
+ }
1488
+ }
1489
+ body.theme-dark .s-btn.s-btn__featured,
1490
+ .theme-dark__forced .s-btn.s-btn__featured,
1491
+ body.theme-system .theme-dark__forced .s-btn.s-btn__featured {
1492
+ --_bu-bg-disabled: var(--purple-100);
1493
+ --_bu-fc-disabled: var(--purple-400);
1494
+ --_bu-badge-fc-disabled: var(--purple-400);
1495
+ --_bu-badge-bg-disabled: var(--purple-200);
1496
+ }
1497
+ body.theme-highcontrast .s-btn.s-btn__featured {
1498
+ --_bu-fc-disabled: var(--black-300);
1499
+ --_bu-badge-fc-disabled: var(--black-300);
1500
+ --_bu-badge-bg-disabled: var(--purple-200);
1501
+ }
1502
+ @media (prefers-color-scheme: dark) {
1503
+ body.theme-highcontrast.theme-system .s-btn.s-btn__featured {
1504
+ --_bu-fc-disabled: var(--purple-400);
1505
+ --_bu-badge-bg-disabled: var(--purple-200);
1506
+ --_bu-badge-fc-disabled: var(--purple-400);
1507
+ }
1508
+ }
1509
+ body.theme-highcontrast.theme-dark .s-btn.s-btn__featured {
1510
+ --_bu-fc-disabled: var(--purple-400);
1511
+ --_bu-badge-bg-disabled: var(--purple-200);
1512
+ --_bu-badge-fc-disabled: var(--purple-400);
1513
+ }
1411
1514
  .s-btn.s-btn__tonal {
1412
1515
  --_bu-bg: var(--black-150);
1413
1516
  --_bu-bg-disabled: var(--black-100);
1414
1517
  --_bu-bg-hover: var(--black-200);
1518
+ --_bu-bg-selected: var(--black-200);
1415
1519
  --_bu-fc: var(--black);
1416
1520
  --_bu-fc-disabled: var(--black-300);
1417
1521
  --_bu-fc-selected: var(--_bu-fc);
1418
1522
  --_bu-badge-bg: var(--black-200);
1419
1523
  --_bu-badge-fc: var(--black-600);
1420
1524
  --_bu-badge-bg-disabled: var(--black-100);
1421
- --_bu-badge-fc-disabled: var(--black-350);
1525
+ --_bu-badge-fc-disabled: var(--black-300);
1422
1526
  }
1423
1527
  body.theme-highcontrast .s-btn.s-btn__tonal {
1424
- --_bu-bc: var(--black-300);
1528
+ --_bu-bc: var(--black-400);
1529
+ --_bu-bc-disabled: var(--black-300);
1425
1530
  }
1426
1531
  .s-btn.s-btn__facebook {
1427
1532
  --_bu-bg: #1877F2;
@@ -1591,8 +1696,8 @@ p .s-btn.s-btn__link {
1591
1696
  .s-btn--radio:checked + .s-btn {
1592
1697
  --_bu-bg-selected-overlay-o: 20%;
1593
1698
  --_bu-bg-selected-overlay: color-mix(in srgb, var(--_bu-bg-selected, var(--_bu-bg)), var(--white) var(--_bu-bg-selected-overlay-o));
1594
- --_bu-bg-gradient-top: var(--_bu-bg-selected, var(--_bu-bg));
1595
- --_bu-bg-gradient-bottom: var(--_bu-bg-selected-overlay, var(--_bu-bg));
1699
+ --_bu-bg-gradient-top: var(--_bu-bg-selected-overlay, var(--_bu-bg));
1700
+ --_bu-bg-gradient-bottom: var(--_bu-bg-selected, var(--_bu-bg));
1596
1701
  background: linear-gradient(0deg, var(--_bu-bg-gradient-top) 50%, var(--_bu-bg-gradient-bottom) 50%) padding-box, linear-gradient(0deg, var(--_bu-bg-gradient-top) 50%, var(--_bu-bg-gradient-bottom) 50%) border-box;
1597
1702
  color: var(--_bu-fc-selected, var(--_bu-fc));
1598
1703
  }
@@ -3717,469 +3822,248 @@ body.theme-system .theme-dark__forced .s-popover {
3717
3822
  padding: var(--su12);
3718
3823
  }
3719
3824
  .s-post-summary {
3720
- --_ps-bb: var(--su1) solid var(--bc-light);
3721
- --_ps-bg: unset;
3722
- --_ps-o: unset;
3723
- --_ps-content-excerpt-fc: var(--_ps-state-fc, var(--fc-medium));
3724
- --_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary))));
3725
- --_ps-content-title-a-fc-hover: var(--_ps-state-fc, var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500))));
3726
- --_ps-content-title-a-fc-visited: var(--_ps-state-fc, var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--purple-500))));
3727
- --_ps-content-title-a-fc-hover-visited: var(--_ps-state-fc, var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--purple-600))));
3728
- --_ps-stats-ai: flex-end;
3729
- --_ps-stats-fc: var(--_ps-state-fc, var(--fc-light));
3730
- --_ps-stats-fd: column;
3731
- --_ps-stats-w: calc(var(--su96) + var(--su12));
3732
- --_ps-has-answers-bc: var(--green-400);
3733
- --_ps-has-answers-bg: unset;
3734
- --_ps-has-answers-fc: var(--green-400);
3735
- --_ps-has-accepted-answers-bc: var(--green-400);
3736
- --_ps-has-accepted-answers-bg: var(--green-400);
3737
- --_ps-has-accepted-answers-fc: var(--white);
3738
- --_ps-stats-item-emphasized-fc: var(--_ps-state-fc, var(--fc-dark));
3739
- background-color: var(--_ps-bg);
3740
- border-bottom: var(--_ps-bb);
3825
+ --_ps-answer-icon-fc: unset;
3826
+ --_ps-content-type-bc: var(--black-200);
3827
+ --_ps-content-type-bg: var(--black-050);
3828
+ --_ps-content-type-fc: var(--black-600);
3829
+ --_ps-stats-answers-bg: unset;
3830
+ --_ps-stats-answers-fc: var(--black-400);
3831
+ --_ps-stats-answers-fw: unset;
3832
+ --_ps-stats-answers-icon-fc: unset;
3833
+ --_ps-title-link-fc: var(--theme-secondary-600);
3834
+ container-type: inline-size;
3835
+ container-name: post-summary;
3836
+ color: var(--black-500);
3741
3837
  display: flex;
3742
- padding: var(--su16);
3838
+ gap: var(--su16);
3743
3839
  position: relative;
3744
- }
3745
- @media (max-width: 71.875rem) {
3746
- .s-post-summary {
3747
- --_ps-stats-ai: center;
3748
- --_ps-stats-fd: row;
3749
- --_ps-stats-w: auto;
3750
- flex-direction: column;
3751
- }
3752
- }
3753
- .s-post-summary.s-post-summary__minimal,
3754
- .s-post-summary .s-post-summary--answer {
3755
- --_ps-stats-ai: center;
3756
- --_ps-stats-fd: row;
3757
- --_ps-stats-w: auto;
3758
- }
3759
- .s-post-summary.s-post-summary__minimal {
3760
- flex-direction: column;
3761
- }
3762
- .s-post-summary.s-post-summary__minimal .s-post-summary--content {
3763
3840
  width: 100%;
3764
3841
  }
3765
- .s-post-summary.s-post-summary__deleted,
3766
- .s-post-summary.s-post-summary__ignored {
3767
- --_ps-o: 0.75;
3768
- --_ps-has-answers-bc: var(--black-350);
3769
- --_ps-has-answers-bg: transparent;
3770
- --_ps-has-answers-fc: var(--_ps-state-fc);
3771
- --_ps-has-accepted-answers-bc: transparent;
3772
- --_ps-has-accepted-answers-bg: var(--black-150);
3773
- --_ps-has-accepted-answers-fc: var(--_ps-state-fc);
3774
- --_ps-meta-tags-tag-bg: var(--black-150);
3775
- --_ps-meta-tags-tag-fc: var(--_ps-state-fc);
3776
- --_ps-state-fc: var(--black-400);
3777
- }
3778
- .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags a,
3779
- .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags a,
3780
- .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .post-tag,
3781
- .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .post-tag,
3782
- .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .s-tag,
3783
- .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .s-tag,
3784
- .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags a:active,
3785
- .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags a:active,
3786
- .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .post-tag:active,
3787
- .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .post-tag:active,
3788
- .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .s-tag:active,
3789
- .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .s-tag:active,
3790
- .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags a:hover,
3791
- .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags a:hover,
3792
- .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .post-tag:hover,
3793
- .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .post-tag:hover,
3794
- .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .s-tag:hover,
3795
- .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .s-tag:hover,
3796
- .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags a:focus,
3797
- .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags a:focus,
3798
- .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .post-tag:focus,
3799
- .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .post-tag:focus,
3800
- .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .s-tag:focus,
3801
- .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .s-tag:focus,
3802
- .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags a .focus-bordered,
3803
- .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags a .focus-bordered,
3804
- .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .post-tag .focus-bordered,
3805
- .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .post-tag .focus-bordered,
3806
- .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .s-tag .focus-bordered,
3807
- .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .s-tag .focus-bordered {
3808
- background-color: var(--_ps-meta-tags-tag-bg);
3809
- color: var(--black-500);
3810
- border-color: var(--black-300);
3811
- }
3812
- body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags a,
3813
- body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags a,
3814
- body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .post-tag,
3815
- body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .post-tag,
3816
- body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .s-tag,
3817
- body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .s-tag,
3818
- body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags a:active,
3819
- body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags a:active,
3820
- body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .post-tag:active,
3821
- body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .post-tag:active,
3822
- body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .s-tag:active,
3823
- body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .s-tag:active,
3824
- body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags a:hover,
3825
- body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags a:hover,
3826
- body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .post-tag:hover,
3827
- body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .post-tag:hover,
3828
- body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .s-tag:hover,
3829
- body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .s-tag:hover,
3830
- body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags a:focus,
3831
- body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags a:focus,
3832
- body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .post-tag:focus,
3833
- body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .post-tag:focus,
3834
- body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .s-tag:focus,
3835
- body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .s-tag:focus,
3836
- body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags a .focus-bordered,
3837
- body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags a .focus-bordered,
3838
- body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .post-tag .focus-bordered,
3839
- body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .post-tag .focus-bordered,
3840
- body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .s-tag .focus-bordered,
3841
- body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .s-tag .focus-bordered {
3842
- border-color: currentColor;
3842
+ body.theme-highcontrast .s-post-summary__deleted * {
3843
+ --_ps-ignored-fc: var(--black-500);
3843
3844
  }
3844
- .s-post-summary.s-post-summary__deleted .s-user-card a,
3845
- .s-post-summary.s-post-summary__ignored .s-user-card a,
3846
- .s-post-summary.s-post-summary__deleted .s-user-card .s-user-card--link,
3847
- .s-post-summary.s-post-summary__ignored .s-user-card .s-user-card--link,
3848
- .s-post-summary.s-post-summary__deleted .s-user-card .s-user-card--rep,
3849
- .s-post-summary.s-post-summary__ignored .s-user-card .s-user-card--rep,
3850
- .s-post-summary.s-post-summary__deleted .s-user-card .s-user-card--time,
3851
- .s-post-summary.s-post-summary__ignored .s-user-card .s-user-card--time {
3852
- color: var(--_ps-state-fc);
3845
+ @container post-summary (width <= 28rem) {
3846
+ .s-post-summary .s-post-summary--sm-hide {
3847
+ display: none !important;
3848
+ }
3849
+ .s-post-summary .s-post-summary--sm-show {
3850
+ display: flex !important;
3851
+ }
3853
3852
  }
3854
- .s-post-summary.s-post-summary__deleted .s-user-card .s-badge,
3855
- .s-post-summary.s-post-summary__ignored .s-user-card .s-badge {
3856
- filter: grayscale(100%);
3853
+ @container post-summary (width > 28rem) {
3854
+ .s-post-summary .s-post-summary--sm-hide {
3855
+ display: flex !important;
3856
+ }
3857
+ .s-post-summary .s-post-summary--sm-show {
3858
+ display: none !important;
3859
+ }
3860
+ }
3861
+ .s-post-summary.s-post-summary__answered {
3862
+ --_ps-stats-answers-bg: var(--green-400);
3863
+ --_ps-stats-answers-fc: var(--white);
3864
+ --_ps-stats-answers-fw: 600;
3865
+ --_ps-stats-answers-icon-fc: var(--green-400);
3857
3866
  }
3858
3867
  .s-post-summary.s-post-summary__deleted,
3859
- .s-post-summary.s-post-summary__watched {
3860
- background-color: var(--_ps-bg);
3868
+ .s-post-summary:has(.s-tag.s-tag__ignored) {
3869
+ --_ps-ignored-bg: var(--black-100);
3870
+ --_ps-ignored-fc: var(--black-400);
3871
+ }
3872
+ .s-post-summary.s-post-summary__deleted.s-post-summary__answered,
3873
+ .s-post-summary:has(.s-tag.s-tag__ignored).s-post-summary__answered {
3874
+ --_ps-stats-answers-bg: var(--_ps-ignored-bg);
3875
+ --_ps-stats-answers-fc: var(--_ps-ignored-fc);
3876
+ --_ps-stats-answers-icon-fc: var(--black-350);
3877
+ }
3878
+ .s-post-summary.s-post-summary__deleted *,
3879
+ .s-post-summary:has(.s-tag.s-tag__ignored) * {
3880
+ color: var(--_ps-ignored-fc) !important;
3881
+ }
3882
+ .s-post-summary.s-post-summary__deleted .s-avatar,
3883
+ .s-post-summary:has(.s-tag.s-tag__ignored) .s-avatar {
3884
+ opacity: 0.5;
3885
+ }
3886
+ .s-post-summary.s-post-summary__deleted .s-user-card--rep .s-bling:before,
3887
+ .s-post-summary:has(.s-tag.s-tag__ignored) .s-user-card--rep .s-bling:before {
3888
+ background-color: var(--_ps-ignored-fc) !important;
3889
+ }
3890
+ .s-post-summary.s-post-summary__deleted .s-badge,
3891
+ .s-post-summary:has(.s-tag.s-tag__ignored) .s-badge,
3892
+ .s-post-summary.s-post-summary__deleted .s-tag,
3893
+ .s-post-summary:has(.s-tag.s-tag__ignored) .s-tag,
3894
+ .s-post-summary.s-post-summary__deleted .s-post-summary--stats-bounty,
3895
+ .s-post-summary:has(.s-tag.s-tag__ignored) .s-post-summary--stats-bounty {
3896
+ background-color: var(--_ps-ignored-bg) !important;
3897
+ border-color: var(--_ps-ignored-bg) !important;
3898
+ color: var(--_ps-ignored-fc) !important;
3861
3899
  }
3862
3900
  .s-post-summary.s-post-summary__deleted {
3863
- --_ps-bg: var(--red-100);
3864
- --_ps-has-accepted-answers-bg: var(--black-200);
3865
- --_ps-has-accepted-answers-fc: var(--black-500);
3866
- --_ps-meta-tags-tag-bg: var(--black-200);
3867
- }
3868
- .s-post-summary.s-post-summary__deleted .is-deleted,
3869
- .s-post-summary.s-post-summary__deleted .s-badge__danger.s-badge__filled {
3870
- background-color: var(--red-500);
3871
- }
3872
- @media (prefers-color-scheme: dark) {
3873
- body.theme-system .s-post-summary.s-post-summary__deleted .is-deleted,
3874
- body.theme-system .s-post-summary.s-post-summary__deleted .s-badge__danger.s-badge__filled {
3875
- background-color: var(--red-600);
3876
- color: var(--white);
3877
- }
3878
- }
3879
- body.theme-dark .s-post-summary.s-post-summary__deleted .is-deleted,
3880
- body.theme-dark .s-post-summary.s-post-summary__deleted .s-badge__danger.s-badge__filled,
3881
- .theme-dark__forced .s-post-summary.s-post-summary__deleted .is-deleted,
3882
- .theme-dark__forced .s-post-summary.s-post-summary__deleted .s-badge__danger.s-badge__filled,
3883
- body.theme-system .theme-dark__forced .s-post-summary.s-post-summary__deleted .is-deleted,
3884
- body.theme-system .theme-dark__forced .s-post-summary.s-post-summary__deleted .s-badge__danger.s-badge__filled {
3885
- background-color: var(--red-600);
3886
- color: var(--white);
3887
- }
3888
- .s-post-summary.s-post-summary__watched:not(.s-post-summary__deleted):not(.s-post-summary__ignored) {
3889
- --_ps-bg: var(--yellow-100);
3890
- --_ps-stats-fc: var(--black-400);
3891
- --_ps-content-title-a-fc: var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary)));
3892
- --_ps-content-title-a-fc-hover: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500)));
3893
- --_ps-content-title-a-fc-visited: var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--purple-500)));
3894
- --_ps-content-title-a-fc-hover-visited: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--purple-600)));
3895
- }
3896
- .s-post-summary.s-post-summary__watched:not(.s-post-summary__deleted):not(.s-post-summary__ignored) .s-user-card a {
3897
- color: var(--_ps-content-title-a-fc);
3898
- }
3899
- .s-post-summary.s-post-summary__watched:not(.s-post-summary__deleted):not(.s-post-summary__ignored) .s-user-card a:active,
3900
- .s-post-summary.s-post-summary__watched:not(.s-post-summary__deleted):not(.s-post-summary__ignored) .s-user-card a:hover {
3901
- color: var(--_ps-content-title-a-fc-hover);
3902
- }
3903
- .s-post-summary.s-post-summary__watched:not(.s-post-summary__deleted):not(.s-post-summary__ignored) .s-user-card a:visited {
3904
- color: var(--_ps-content-title-a-fc-visited);
3901
+ background-color: var(--red-100);
3902
+ border: var(--su8) solid var(--red-100);
3905
3903
  }
3906
- .s-post-summary.s-post-summary__watched:not(.s-post-summary__deleted):not(.s-post-summary__ignored) .s-user-card a:visited:hover {
3907
- color: var(--_ps-content-title-a-fc-hover-visited);
3904
+ .s-post-summary .s-tag.s-tag__watched {
3905
+ --_ta-bc: var(--yellow-200);
3906
+ --_ta-bg: var(--yellow-200);
3907
+ --_ta-fc: var(--yellow-600);
3908
+ --_ta-bc-hover: var(--yellow-200);
3909
+ --_ta-bg-hover: var(--yellow-200);
3908
3910
  }
3909
- .s-post-summary.s-post-summary__watched:not(.s-post-summary__deleted):not(.s-post-summary__ignored) .s-user-card .s-user-card--rep,
3910
- .s-post-summary.s-post-summary__watched:not(.s-post-summary__deleted):not(.s-post-summary__ignored) .s-user-card .s-user-card--time {
3911
- color: var(--black-500);
3912
- }
3913
- .s-post-summary:last-child {
3914
- --_ps-bb: none;
3911
+ .s-post-summary .s-post-summary--answers {
3912
+ display: flex;
3913
+ flex-direction: column;
3914
+ gap: var(--su16);
3915
+ padding-top: calc(var(--su8) + var(--su2));
3915
3916
  }
3916
3917
  .s-post-summary .s-post-summary--answer {
3917
- margin: var(--su16) 1em 0 1em;
3918
- padding: 0.5em 0 0.5em calc(1em + var(--su4));
3919
- position: relative;
3920
- }
3921
- .s-post-summary .s-post-summary--answer + .s-post-summary .s-post-summary--answer {
3922
- margin-top: var(--su16);
3923
- }
3924
- .s-post-summary .s-post-summary--answer:before {
3925
- background: var(--black-250);
3926
- border-radius: var(--su8);
3927
- bottom: 0;
3928
- content: "";
3929
- display: block;
3930
- left: 0;
3931
- position: absolute;
3932
- top: 0;
3933
- width: var(--su4);
3918
+ border-left: var(--su4) solid var(--black-200);
3919
+ display: flex;
3920
+ flex-direction: column;
3921
+ gap: var(--su6);
3922
+ padding-left: var(--su8);
3934
3923
  }
3935
- body.theme-highcontrast .s-post-summary .s-post-summary--answer:before {
3936
- background: var(--black-500);
3924
+ .s-post-summary .s-post-summary--answer__accepted {
3925
+ --_ps-answer-icon-fc: var(--green-400);
3937
3926
  }
3938
- .s-post-summary .s-post-summary--answer-excerpt {
3939
- display: -webkit-box;
3940
- -webkit-line-clamp: 4;
3941
- -webkit-box-orient: vertical;
3942
- overflow: hidden;
3943
- color: var(--black-500);
3944
- margin-bottom: var(--su8);
3927
+ .s-post-summary .s-post-summary--answer .s-post-summary--stats-answers--icon {
3928
+ color: var(--_ps-answer-icon-fc);
3945
3929
  }
3946
3930
  .s-post-summary .s-post-summary--content {
3947
- flex-grow: 1;
3948
- max-width: 100%;
3949
- }
3950
- .s-post-summary .s-post-summary--content > *:not(.s-post-summary--content-menu-button):not(.s-post-summary--meta):not(.s-popover) {
3951
- opacity: var(--_ps-o);
3952
- }
3953
- .s-post-summary .s-post-summary--content-excerpt {
3954
- /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
3955
- word-break: break-word !important;
3956
- overflow-wrap: break-word !important;
3957
- -webkit-hyphens: auto !important;
3958
- -moz-hyphens: auto !important;
3959
- -ms-hyphens: auto !important;
3960
- hyphens: auto !important;
3961
- display: -webkit-box;
3962
- -webkit-line-clamp: 2;
3963
- -webkit-box-orient: vertical;
3964
- overflow: hidden;
3965
- color: var(--_ps-content-excerpt-fc);
3966
- font-family: var(--theme-post-body-font-family, var(--theme-body-font-family));
3967
- margin-top: var(--sun2);
3968
- margin-bottom: var(--su8);
3969
- }
3970
- .s-post-summary .s-post-summary--content-excerpt.s-post-summary--content-excerpt__sm {
3971
- display: -webkit-box;
3972
- -webkit-line-clamp: 1;
3973
- -webkit-box-orient: vertical;
3974
- overflow: hidden;
3975
- }
3976
- .s-post-summary .s-post-summary--content-excerpt.s-post-summary--content-excerpt__md {
3977
- display: -webkit-box;
3978
- -webkit-line-clamp: 3;
3979
- -webkit-box-orient: vertical;
3980
- overflow: hidden;
3981
- }
3982
- .s-post-summary .s-post-summary--content-excerpt.s-post-summary--content-excerpt__lg {
3983
- display: -webkit-box;
3984
- -webkit-line-clamp: 4;
3985
- -webkit-box-orient: vertical;
3986
- overflow: hidden;
3987
- }
3988
- .s-post-summary .s-post-summary--content-menu-button {
3989
- right: var(--su8);
3990
- top: var(--su8);
3991
- }
3992
- .s-post-summary .s-post-summary--content-menu-button .svg-icon {
3993
- margin: 0 !important;
3994
- }
3995
- .s-post-summary .s-post-summary--content-menu-button,
3996
- .s-post-summary .s-post-summary--content-menu-button.s-btn {
3997
- padding: var(--su8);
3998
- position: absolute;
3999
- }
4000
- .s-post-summary .s-post-summary--content-title {
4001
- /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
4002
- word-break: break-word !important;
4003
- overflow-wrap: break-word !important;
4004
- -webkit-hyphens: auto !important;
4005
- -moz-hyphens: auto !important;
4006
- -ms-hyphens: auto !important;
4007
- hyphens: auto !important;
4008
- display: block;
4009
- font-size: var(--fs-body3);
4010
- font-weight: normal;
4011
- line-height: var(--lh-md);
4012
- margin-bottom: 0.3365rem;
4013
- margin-top: -0.125rem;
4014
- padding-right: var(--su24);
4015
- }
4016
- .s-post-summary .s-post-summary--content-title a {
4017
- /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
4018
- word-break: break-word !important;
4019
- overflow-wrap: break-word !important;
4020
- -webkit-hyphens: auto !important;
4021
- -moz-hyphens: auto !important;
4022
- -ms-hyphens: auto !important;
4023
- hyphens: auto !important;
4024
- color: var(--_ps-content-title-a-fc);
4025
- font-family: var(--theme-post-title-font-family, var(--theme-body-font-family));
4026
- }
4027
- .s-post-summary .s-post-summary--content-title a:active,
4028
- .s-post-summary .s-post-summary--content-title a:hover {
4029
- color: var(--_ps-content-title-a-fc-hover);
4030
- }
4031
- .s-post-summary .s-post-summary--content-title a:visited {
4032
- color: var(--_ps-content-title-a-fc-visited);
4033
- }
4034
- .s-post-summary .s-post-summary--content-title a:visited:hover {
4035
- color: var(--_ps-content-title-a-fc-hover-visited);
4036
- }
4037
- .s-post-summary .s-post-summary--content-title .iconShield {
4038
- color: var(--fc-light);
4039
- }
4040
- .s-post-summary .s-post-summary--content-title .svg-icon {
4041
- position: relative;
4042
- top: var(--sun1);
4043
- vertical-align: text-bottom;
4044
- }
4045
- .s-post-summary .s-post-summary--content-type {
4046
- color: var(--fc-medium);
4047
- margin-bottom: var(--su4);
4048
- }
4049
- .s-post-summary .s-post-summary--content-type .svg-icon {
4050
- color: var(--fc-light);
4051
- margin-left: var(--sun2);
3931
+ display: flex;
3932
+ flex-direction: column;
3933
+ gap: var(--su4);
3934
+ width: 100%;
4052
3935
  }
4053
- .s-post-summary .s-post-summary--meta {
3936
+ .s-post-summary .s-post-summary--content-meta {
4054
3937
  align-items: center;
4055
- column-gap: var(--su6);
3938
+ color: var(--black-400);
4056
3939
  display: flex;
4057
3940
  flex-wrap: wrap;
4058
- justify-content: space-between;
4059
- row-gap: var(--su8);
4060
- }
4061
- .s-post-summary .s-post-summary--meta > *:not(.s-post-summary--meta-tags):not(.s-user-card) > * {
4062
- opacity: var(--_ps-o);
4063
- }
4064
- .s-post-summary .s-post-summary--meta .s-user-card {
4065
- flex-wrap: wrap;
4066
- justify-content: flex-end;
4067
- margin-left: auto;
4068
- }
4069
- .s-post-summary .s-post-summary--meta .s-user-card > *:not(.magic-popup) {
4070
- opacity: var(--_ps-o);
3941
+ font-size: var(--fs-caption);
3942
+ gap: var(--su6);
3943
+ margin-bottom: var(--su4);
4071
3944
  }
4072
- .s-post-summary .s-post-summary--meta-tags {
3945
+ .s-post-summary .s-post-summary--content-type {
3946
+ border: var(--su-static1) solid var(--_ps-content-type-bc);
3947
+ background-color: var(--_ps-content-type-bg);
3948
+ color: var(--_ps-content-type-fc);
4073
3949
  display: flex;
4074
- flex-wrap: wrap;
3950
+ align-items: center;
4075
3951
  gap: var(--su4);
3952
+ padding: 0 var(--su4);
3953
+ font-size: var(--fs-caption);
3954
+ }
3955
+ .s-post-summary .s-post-summary--content-type:focus-visible {
3956
+ box-shadow: 0 0 0 var(--su-static2) var(--focus-neutral), 0 0 0 var(--su-static4) var(--focus-theme);
3957
+ outline: var(--su-static2) solid transparent !important;
4076
3958
  }
4077
- .s-post-summary .s-post-summary--meta-tags > ul > li > a,
4078
- .s-post-summary .s-post-summary--meta-tags > a,
4079
- .s-post-summary .s-post-summary--meta-tags .post-tag,
4080
- .s-post-summary .s-post-summary--meta-tags .s-tag {
4081
- opacity: var(--_ps-o);
3959
+ .s-post-summary .s-post-summary--content-type:hover {
3960
+ --_ps-content-type-bc: var(--black-150);
3961
+ --_ps-content-type-bg: var(--black-100);
3962
+ --_ps-content-type-fc: var(--black-600);
3963
+ }
3964
+ .s-post-summary .s-post-summary--excerpt {
3965
+ line-height: 1.25rem;
3966
+ margin-bottom: 0;
4082
3967
  }
4083
3968
  .s-post-summary .s-post-summary--stats {
4084
- align-items: var(--_ps-stats-ai);
4085
- color: var(--_ps-stats-fc);
4086
- flex-direction: var(--_ps-stats-fd);
4087
- width: var(--_ps-stats-w);
4088
3969
  display: flex;
4089
- flex-shrink: 0;
4090
- flex-wrap: wrap;
4091
- font-size: var(--fs-body1);
4092
3970
  gap: var(--su6);
4093
- margin-bottom: var(--su4);
4094
- margin-right: var(--su16);
3971
+ font-size: var(--fs-caption);
4095
3972
  }
4096
- .s-post-summary .s-post-summary--stats > *:not(.s-badge__danger) {
4097
- opacity: var(--_ps-o);
3973
+ .s-post-summary .s-post-summary--stats.s-post-summary--sm-hide {
3974
+ flex-direction: column;
4098
3975
  }
4099
- .s-post-summary .s-post-summary--stats-item:not(.s-badge) {
3976
+ .s-post-summary .s-post-summary--stats.s-post-summary--sm-hide .s-post-summary--stats-answers {
3977
+ background-color: var(--_ps-stats-answers-bg);
3978
+ color: var(--_ps-stats-answers-fc);
3979
+ font-weight: var(--_ps-stats-answers-fw);
4100
3980
  align-items: center;
4101
- border: var(--su1) solid transparent;
4102
- display: inline-flex;
4103
- gap: 0.3em;
3981
+ display: flex;
3982
+ gap: var(--su4);
4104
3983
  justify-content: center;
4105
- white-space: nowrap;
3984
+ padding: var(--su4);
4106
3985
  }
4107
- .s-post-summary .s-post-summary--stats-item:not(.s-badge).is-deleted {
3986
+ .s-post-summary .s-post-summary--stats.s-post-summary--sm-hide .s-post-summary--stats-bounty {
3987
+ align-items: center;
3988
+ background-color: var(--blue-400);
4108
3989
  color: var(--white);
3990
+ display: flex;
3991
+ gap: var(--su2);
3992
+ font-weight: 600;
3993
+ justify-content: center;
3994
+ padding: var(--su4);
4109
3995
  }
4110
- .s-post-summary .s-post-summary--stats-item.s-badge {
4111
- font-size: var(--fs-body1);
4112
- line-height: var(--lh-md);
4113
- padding: var(--su2) var(--su4);
4114
- }
4115
- .s-post-summary .s-post-summary--stats-item.has-answers,
4116
- .s-post-summary .s-post-summary--stats-item.has-bounty,
4117
- .s-post-summary .s-post-summary--stats-item.is-archived,
4118
- .s-post-summary .s-post-summary--stats-item.is-closed,
4119
- .s-post-summary .s-post-summary--stats-item.is-deleted,
4120
- .s-post-summary .s-post-summary--stats-item.is-draft,
4121
- .s-post-summary .s-post-summary--stats-item.is-pinned,
4122
- .s-post-summary .s-post-summary--stats-item.is-published,
4123
- .s-post-summary .s-post-summary--stats-item.is-review {
4124
- border-radius: var(--br-md);
4125
- padding: var(--su2) var(--su4);
3996
+ .s-post-summary .s-post-summary--stats.s-post-summary--sm-hide .s-post-summary--stats-votes {
3997
+ align-items: center;
3998
+ aspect-ratio: 1/1;
3999
+ border: var(--su1) solid var(--black-200);
4000
+ display: flex;
4001
+ justify-content: center;
4002
+ font-size: var(--fs-body2);
4003
+ font-weight: 600;
4004
+ margin-bottom: var(--su2);
4005
+ padding: var(--su4);
4006
+ width: calc(var(--su48) + var(--su8));
4126
4007
  }
4127
- .s-post-summary .s-post-summary--stats-item.has-answers {
4128
- background-color: var(--_ps-has-answers-bg);
4129
- border: var(--su1) solid var(--_ps-has-answers-bc);
4130
- color: var(--_ps-has-answers-fc);
4008
+ .s-post-summary .s-post-summary--stats.s-post-summary--sm-show {
4009
+ align-items: center;
4010
+ justify-content: center;
4011
+ padding: var(--su4);
4131
4012
  }
4132
- .s-post-summary .s-post-summary--stats-item.has-answers.has-accepted-answer {
4133
- background-color: var(--_ps-has-accepted-answers-bg);
4134
- border-color: var(--_ps-has-accepted-answers-bc);
4135
- color: var(--_ps-has-accepted-answers-fc);
4013
+ .s-post-summary .s-post-summary--stats.s-post-summary--sm-show .s-post-summary--stats-answers--icon {
4014
+ color: var(--_ps-stats-answers-icon-fc);
4136
4015
  }
4137
- .s-post-summary .s-post-summary--stats-item.has-bounty {
4138
- background-color: var(--blue-500);
4016
+ .s-post-summary .s-post-summary--stats .s-post-summary--stats-bounty {
4017
+ align-items: center;
4018
+ justify-content: center;
4019
+ background-color: var(--blue-400);
4139
4020
  color: var(--white);
4021
+ display: flex;
4022
+ gap: var(--su1);
4023
+ padding: 0 calc(var(--su4) - var(--su1));
4140
4024
  }
4141
- .s-post-summary .s-post-summary--stats-item.is-warm {
4142
- color: var(--_ps-state-fc, var(--yellow-500));
4143
- }
4144
- .s-post-summary .s-post-summary--stats-item.is-hot {
4145
- color: var(--_ps-state-fc, var(--orange-500));
4146
- }
4147
- .s-post-summary .s-post-summary--stats-item.is-supernova {
4148
- color: var(--_ps-state-fc, var(--red-500));
4025
+ .s-post-summary .s-post-summary--stats-item {
4026
+ align-items: center;
4027
+ display: flex;
4028
+ gap: var(--su6);
4149
4029
  }
4150
- .s-post-summary .s-post-summary--stats-item.is-archived {
4151
- background-color: var(--black-225);
4152
- border-color: var(--black-500);
4153
- color: var(--black-600);
4030
+ .s-post-summary .s-post-summary--stats-item:before {
4031
+ aspect-ratio: 1/1;
4032
+ background-color: var(--black-300);
4033
+ content: "";
4034
+ display: block;
4035
+ height: var(--su4);
4154
4036
  }
4155
- .s-post-summary .s-post-summary--stats-item.is-closed {
4156
- background-color: var(--red-300);
4157
- border-color: var(--red-500);
4158
- color: var(--red-600);
4037
+ .s-post-summary .s-post-summary--tags {
4038
+ display: flex;
4039
+ flex-wrap: wrap;
4040
+ gap: var(--su8);
4041
+ margin-top: var(--su6);
4159
4042
  }
4160
- .s-post-summary .s-post-summary--stats-item.is-draft {
4161
- background-color: var(--blue-300);
4162
- border-color: var(--blue-500);
4163
- color: var(--blue-600);
4043
+ .s-post-summary .s-post-summary--title {
4044
+ display: flex;
4045
+ gap: var(--su6);
4046
+ line-height: 1.563rem;
4164
4047
  }
4165
- .s-post-summary .s-post-summary--stats-item.is-pinned {
4166
- background-color: var(--black-500);
4167
- color: var(--white);
4048
+ .s-post-summary .s-post-summary--title-link {
4049
+ color: var(--_ps-title-link-fc);
4050
+ display: flex;
4051
+ font-size: var(--fs-body3);
4052
+ font-weight: 600;
4053
+ gap: var(--su4);
4054
+ margin-top: var(--su2);
4168
4055
  }
4169
- .s-post-summary .s-post-summary--stats-item.is-published {
4170
- background-color: var(--black-150);
4171
- color: var(--black-600);
4056
+ .s-post-summary .s-post-summary--title-link:hover {
4057
+ --_ps-title-link-fc: var(--theme-secondary-500);
4172
4058
  }
4173
- .s-post-summary .s-post-summary--stats-item.is-review {
4174
- background-color: var(--yellow-300);
4175
- border-color: var(--yellow-500);
4176
- color: var(--yellow-600);
4059
+ .s-post-summary .s-post-summary--title-link:hover:visited {
4060
+ color: var(--theme-secondary-600);
4177
4061
  }
4178
- .s-post-summary .s-post-summary--stats-item__emphasized {
4179
- color: var(--_ps-stats-item-emphasized-fc);
4062
+ .s-post-summary .s-post-summary--title-link:visited {
4063
+ color: var(--theme-secondary-400);
4180
4064
  }
4181
- .s-post-summary .s-post-summary--stats-item-number {
4182
- font-weight: 500;
4065
+ .s-post-summary .s-post-summary--title-icon {
4066
+ flex-shrink: 0;
4183
4067
  }
4184
4068
  .s-progress {
4185
4069
  --_pr-bar: var(--br-md);
@@ -5020,285 +4904,122 @@ body.theme-highcontrast .is-readonly .s-select > select {
5020
4904
  right: var(--su32);
5021
4905
  }
5022
4906
  .s-sidebarwidget {
5023
- --_sw-bc: var(--bc-medium);
5024
- background-color: var(--white);
5025
- border: var(--su-static1) solid var(--_sw-bc);
5026
- border-radius: var(--br-md);
5027
4907
  font-size: var(--fs-body1);
5028
4908
  }
5029
- .s-sidebarwidget:not(.s-anchors) a:not(.button):not(.s-tag):not(.post-tag):not(.s-btn):not(.s-sidebarwidget--action):not(.s-user-card--link),
5030
- .s-sidebarwidget:not(.s-anchors) a:not(.button):not(.s-tag):not(.post-tag):not(.s-btn):not(.s-sidebarwidget--action):not(.s-user-card--link):visited {
5031
- color: var(--black-600);
5032
- }
5033
- .s-sidebarwidget.s-sidebarwidget__blue {
5034
- --_sw-bc: var(--blue-300);
5035
- background-color: var(--blue-100);
5036
- border-color: var(--_sw-bc);
5037
- }
5038
- body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__blue {
5039
- --_sw-bc: var(--blue-500);
5040
- }
5041
- .s-sidebarwidget.s-sidebarwidget__blue:after,
5042
- .s-sidebarwidget.s-sidebarwidget__blue .s-sidebarwidget--content + .s-sidebarwidget--content,
5043
- .s-sidebarwidget.s-sidebarwidget__blue .s-sidebarwidget--header {
5044
- border-color: var(--_sw-bc);
5045
- }
5046
- .s-sidebarwidget.s-sidebarwidget__blue .s-sidebarwidget--header {
5047
- color: var(--fc-medium);
5048
- }
5049
- .s-sidebarwidget.s-sidebarwidget__yellow {
5050
- --_sw-bc: var(--yellow-300);
5051
- background-color: var(--yellow-100);
5052
- border-color: var(--_sw-bc);
5053
- }
5054
- body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__yellow {
5055
- --_sw-bc: var(--yellow-500);
5056
- }
5057
- .s-sidebarwidget.s-sidebarwidget__yellow:after,
5058
- .s-sidebarwidget.s-sidebarwidget__yellow .s-sidebarwidget--content + .s-sidebarwidget--content,
5059
- .s-sidebarwidget.s-sidebarwidget__yellow .s-sidebarwidget--header {
5060
- border-color: var(--_sw-bc);
5061
- }
5062
- .s-sidebarwidget.s-sidebarwidget__yellow .s-sidebarwidget--header {
5063
- color: var(--fc-medium);
5064
- }
5065
- .s-sidebarwidget.s-sidebarwidget__green {
5066
- --_sw-bc: var(--green-300);
5067
- background-color: var(--green-100);
5068
- border-color: var(--_sw-bc);
5069
- }
5070
- body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
5071
- --_sw-bc: var(--green-500);
5072
- }
5073
- .s-sidebarwidget.s-sidebarwidget__green:after,
5074
- .s-sidebarwidget.s-sidebarwidget__green .s-sidebarwidget--content + .s-sidebarwidget--content,
5075
- .s-sidebarwidget.s-sidebarwidget__green .s-sidebarwidget--header {
5076
- border-color: var(--_sw-bc);
5077
- }
5078
- .s-sidebarwidget.s-sidebarwidget__green .s-sidebarwidget--header {
5079
- color: var(--fc-medium);
5080
- }
5081
- .s-sidebarwidget .s-sidebarwidget--action {
5082
- color: var(--blue-400);
5083
- font-size: var(--fs-body1);
5084
- font-weight: normal;
5085
- margin-left: auto;
5086
- }
5087
4909
  .s-sidebarwidget .s-sidebarwidget--content {
5088
- margin: 0;
5089
- padding: var(--su16);
5090
- }
5091
- .s-sidebarwidget .s-sidebarwidget--content:not(table):not(.s-sidebarwidget__items),
5092
- .s-sidebarwidget .s-sidebarwidget--content:not(table):not(.s-sidebarwidget__block-items) .s-sidebarwidget--item {
5093
4910
  display: flex;
4911
+ padding: var(--su12) 0 var(--su16) 0;
4912
+ font-size: var(--fs-body2);
5094
4913
  }
5095
- .s-sidebarwidget .s-sidebarwidget--content + .s-sidebarwidget--content {
5096
- border-top: var(--su-static1) solid var(--bc-light);
5097
- }
5098
- .s-sidebarwidget .s-sidebarwidget--content.s-sidebarwidget__items {
5099
- padding: var(--su6) var(--su16);
5100
- }
5101
- .s-sidebarwidget .s-sidebarwidget--content.s-sidebarwidget__items,
5102
- .s-sidebarwidget .s-sidebarwidget--content.s-sidebarwidget__items.s-sidebarwidget__block-items .s-sidebarwidget--item {
5103
- display: block;
5104
- }
5105
- .s-sidebarwidget .s-sidebarwidget--content:active {
5106
- outline: none;
4914
+ .s-sidebarwidget .s-sidebarwidget--content .s-sidebarwidget--action {
4915
+ font-size: var(--fs-fine);
4916
+ margin-left: var(--su16);
4917
+ align-self: flex-start;
5107
4918
  }
5108
4919
  .s-sidebarwidget .s-sidebarwidget--header {
5109
4920
  align-items: center;
5110
- border-top: var(--su-static1) solid var(--bc-light);
5111
- color: var(--black-600);
5112
4921
  display: flex;
5113
- font-size: var(--fs-body2);
5114
- font-weight: bold;
5115
- justify-content: flex-start;
5116
- line-height: var(--lh-xs);
4922
+ padding: var(--su4) 0;
4923
+ }
4924
+ .s-sidebarwidget .s-sidebarwidget--header > h1,
4925
+ .s-sidebarwidget .s-sidebarwidget--header h2,
4926
+ .s-sidebarwidget .s-sidebarwidget--header h3,
4927
+ .s-sidebarwidget .s-sidebarwidget--header h4,
4928
+ .s-sidebarwidget .s-sidebarwidget--header h5,
4929
+ .s-sidebarwidget .s-sidebarwidget--header h6 {
5117
4930
  margin: 0;
5118
- padding: var(--su16) var(--su16) 0;
5119
- }
5120
- .s-sidebarwidget .s-sidebarwidget--header:first-child {
5121
- border-top: none;
5122
- }
5123
- .s-sidebarwidget .s-sidebarwidget--header + .s-expandable:not(.is-expanded) {
5124
- margin-bottom: var(--su16);
5125
- }
5126
- .s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__expanding-control {
5127
- cursor: pointer;
5128
- }
5129
- .s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__expanding-control:before {
5130
- border: calc(var(--su-static4) + var(--su-static1)) solid transparent;
5131
- border-left-color: var(--black-400);
5132
- border-right-width: 0;
5133
- content: '';
5134
- float: left;
5135
- margin-right: var(--su12);
5136
- margin-top: calc(calc(var(--lh-base) * 1em) / 2 - 5px);
5137
- transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
5138
- }
5139
- .s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__expanding-control[aria-expanded='true']:before {
5140
- transform: rotate(90deg);
5141
- }
5142
- .s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__small-bold-text {
5143
- font-size: var(--fs-caption);
5144
- font-weight: bold;
5145
- }
5146
- .s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__small-bold-text .s-sidebarwidget--action {
5147
- font-weight: normal;
5148
- line-height: calc(var(--lh-base) * var(--fs-caption));
5149
- }
5150
- .s-sidebarwidget .s-sidebarwidget--header:active {
5151
- outline: none;
5152
- }
5153
- .s-sidebarwidget .s-sidebarwidget--item {
5154
- margin: var(--su12) 0;
5155
- }
5156
- .s-sidebarwidget .s-sidebarwidget--item[aria-current="true"],
5157
- .s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="true"],
5158
- .s-sidebarwidget .s-sidebarwidget--item[aria-current="page"],
5159
- .s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="page"] {
5160
- color: var(--black);
5161
- font-weight: bold;
5162
- position: relative;
5163
- }
5164
- .s-sidebarwidget .s-sidebarwidget--item[aria-current="true"]:before,
5165
- .s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="true"]:before,
5166
- .s-sidebarwidget .s-sidebarwidget--item[aria-current="page"]:before,
5167
- .s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="page"]:before {
5168
- border-left-color: var(--theme-primary);
5169
- border-left-style: solid;
5170
- border-left-width: calc(var(--su-static1) * 3);
5171
- content: '';
5172
- height: calc(100% + var(--su16));
5173
- left: 0;
5174
- margin-left: var(--sun16);
5175
- margin-top: var(--sun8);
5176
- position: absolute;
5177
- }
5178
- .s-sidebarwidget .s-sidebarwidget--item[aria-current="true"] a,
5179
- .s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="true"] a,
5180
- .s-sidebarwidget .s-sidebarwidget--item[aria-current="page"] a,
5181
- .s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="page"] a,
5182
- .s-sidebarwidget .s-sidebarwidget--item[aria-current="true"] a:visited,
5183
- .s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="true"] a:visited,
5184
- .s-sidebarwidget .s-sidebarwidget--item[aria-current="page"] a:visited,
5185
- .s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="page"] a:visited {
5186
- color: inherit;
5187
- }
5188
- .s-sidebarwidget .s-sidebarwidget--subnav {
5189
- list-style-type: none;
5190
- margin-left: var(--su8);
5191
- padding-left: 0;
5192
- }
5193
- .s-sidebarwidget .s-sidebarwidget--subnav li {
5194
- background-image: url("data:image/svg+xml;,%3C?xml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22?%3E%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%207%2010%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22m0.72153%200.68446%204.1336%204.3077-4.1336%204.3077%22%20fill%3D%22none%22%20stroke%3D%22var%28--black-225%29%22%20stroke-width%3D%222%22/%3E%3C/svg%3E");
5195
- background-position: 0 calc((1.2em - calc(var(--su-static8) + var(--su-static2))) / 2);
5196
- background-repeat: no-repeat;
5197
- background-size: auto calc(var(--su-static8) + var(--su-static2));
5198
- margin-top: var(--su-static12);
5199
- padding-left: var(--su-static16);
5200
- }
5201
- .s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="page"],
5202
- .s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="true"] {
5203
- background-image: url("data:image/svg+xml;,%3C?xml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22?%3E%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%207%2010%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22m0.72153%200.68446%204.1336%204.3077-4.1336%204.3077%22%20fill%3D%22none%22%20stroke%3D%22var%28--theme-primary%29%22%20stroke-width%3D%222%22/%3E%3C/svg%3E");
5204
- color: var(--black);
5205
- font-weight: bold;
5206
- }
5207
- .s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="page"] a,
5208
- .s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="true"] a,
5209
- .s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="page"] a:visited,
5210
- .s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="true"] a:visited {
5211
- color: inherit;
5212
- }
5213
- .s-sidebarwidget table.s-sidebarwidget--content.s-sidebarwidget__items {
5214
- border-collapse: separate;
5215
- border-spacing: var(--su16) var(--su12);
5216
- padding: var(--su6) 0 0;
5217
- }
5218
- .s-sidebarwidget table.s-sidebarwidget--content.s-sidebarwidget__items tr.s-sidebarwidget--item {
5219
- display: table-row;
5220
- }
5221
- .s-sidebarwidget table.s-sidebarwidget--content.s-sidebarwidget__items tr.s-sidebarwidget--item td {
5222
- padding: 0;
4931
+ padding-right: var(--su6);
4932
+ font-size: var(--fs-body1);
4933
+ font-weight: 500;
5223
4934
  }
5224
- .s-spinner {
5225
- --_sp-baw: calc(var(--su-static1) * 3);
5226
- --_sp-size: var(--su-static24);
5227
- height: var(--_sp-size);
5228
- width: var(--_sp-size);
5229
- position: relative;
5230
- text-align: left;
4935
+ .s-sidebarwidget .s-sidebarwidget--header .s-sidebarwidget--action {
4936
+ margin-left: auto;
5231
4937
  }
5232
- .s-spinner.s-spinner__xs {
5233
- --_sp-baw: var(--su-static1);
5234
- --_sp-size: var(--su-static12);
4938
+ .s-sidebarwidget .s-sidebarwidget--footer {
4939
+ display: flex;
4940
+ font-size: var(--fs-body2);
5235
4941
  }
5236
- .s-spinner.s-spinner__sm {
5237
- --_sp-baw: var(--su-static2);
5238
- --_sp-size: var(--su-static16);
4942
+ .s-sidebarwidget .s-sidebarwidget--footer .s-sidebarwidget--action {
4943
+ flex: 1;
5239
4944
  }
5240
- .s-spinner.s-spinner__md {
5241
- --_sp-baw: var(--su-static4);
5242
- --_sp-size: var(--su-static32);
4945
+ .s-sidebarwidget .s-sidebarwidget--action:is(a, button) {
4946
+ white-space: nowrap;
5243
4947
  }
5244
- .s-spinner.s-spinner__lg {
5245
- --_sp-baw: var(--su-static6);
5246
- --_sp-size: var(--su-static48);
4948
+ .s-loader {
4949
+ --_ld-color: var(--black-600);
4950
+ --_ld-gap: calc(var(--_ld-size) / 2);
4951
+ --_ld-size: calc(var(--su4) + var(--su1));
4952
+ --_ld-offset: calc(calc(var(--_ld-size) / 8) * -5);
4953
+ display: flex;
4954
+ gap: var(--_ld-gap);
4955
+ margin-top: var(--_ld-gap);
5247
4956
  }
5248
- .s-spinner:after,
5249
- .s-spinner:before {
5250
- border: var(--_sp-baw) solid currentColor;
5251
- border-radius: var(--br-circle);
5252
- content: '';
5253
- height: 100%;
5254
- position: absolute;
5255
- width: 100%;
4957
+ .s-loader__sm {
4958
+ --_ld-size: calc(calc(var(--su8) - var(--su1)) / 2);
4959
+ margin-left: var(--su1);
4960
+ margin-right: var(--su1);
5256
4961
  }
5257
- .s-spinner:after {
5258
- border-top-color: transparent;
5259
- border-right-color: transparent;
5260
- border-bottom-color: transparent;
5261
- animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
4962
+ .s-loader__lg {
4963
+ --_ld-size: var(--su8);
5262
4964
  }
5263
- .s-spinner:before {
5264
- opacity: 0.25;
5265
- transform: rotate(90deg);
4965
+ .s-loader:before,
4966
+ .s-loader .s-loader--sr-text:before,
4967
+ .s-loader:after {
4968
+ background-color: currentColor;
4969
+ content: "";
4970
+ display: block;
4971
+ height: var(--_ld-size);
4972
+ width: var(--_ld-size);
4973
+ animation: loader-animation 0.8s cubic-bezier(1, 1, 0, 1) infinite;
5266
4974
  }
5267
- .is-loading {
5268
- --_li-offset: 0.6em;
5269
- --_il-size: 1.23076923em;
5270
- padding-left: 2.2em;
5271
- position: relative;
4975
+ .s-loader .s-loader--sr-text {
4976
+ display: block;
4977
+ flex-shrink: 0;
4978
+ height: var(--_ld-size);
4979
+ width: var(--_ld-size);
4980
+ font-size: 0;
4981
+ overflow: visible;
5272
4982
  }
5273
- .is-loading:after,
5274
- .is-loading:before {
5275
- border-radius: var(--br-circle);
5276
- border-style: solid;
5277
- border-width: var(--su-static2);
5278
- content: "";
5279
- height: var(--_il-size);
5280
- left: var(--_li-offset);
5281
- position: absolute;
5282
- top: calc(50% - var(--_li-offset));
5283
- width: var(--_il-size);
4983
+ .s-loader .s-loader--sr-text:before {
4984
+ animation-delay: 0.25s;
5284
4985
  }
5285
- .is-loading:after {
5286
- animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
5287
- border-color: transparent;
5288
- border-left-color: currentColor;
5289
- filter: invert(0);
5290
- transform-origin: 50% 50% var(--su-static1);
4986
+ .s-loader:after {
4987
+ animation-delay: 0.5s;
5291
4988
  }
5292
- .is-loading:before {
5293
- border-color: currentColor;
5294
- opacity: 0.3;
4989
+ @media (prefers-reduced-motion: reduce) {
4990
+ .s-loader:before,
4991
+ .s-loader .s-loader--sr-text:before,
4992
+ .s-loader:after {
4993
+ animation: loader-animation-reduced-motion 2s ease-in-out infinite;
4994
+ }
5295
4995
  }
5296
- @keyframes s-spinner-rotate {
5297
- from {
5298
- transform: rotate(0deg);
4996
+ @keyframes loader-animation {
4997
+ 0%,
4998
+ 1%,
4999
+ 99%,
5000
+ to {
5001
+ opacity: 0.2;
5002
+ transform: translateY(0);
5003
+ }
5004
+ 49%,
5005
+ 50% {
5006
+ opacity: 1;
5007
+ transform: translateY(var(--_ld-offset));
5299
5008
  }
5009
+ 51% {
5010
+ opacity: 0.2;
5011
+ transform: translateY(var(--_ld-offset));
5012
+ }
5013
+ }
5014
+ @keyframes loader-animation-reduced-motion {
5015
+ 0%,
5300
5016
  to {
5301
- transform: rotate(360deg);
5017
+ opacity: 0.3;
5018
+ transform: none;
5019
+ }
5020
+ 50% {
5021
+ opacity: 1;
5022
+ transform: none;
5302
5023
  }
5303
5024
  }
5304
5025
  .s-table {