@stackoverflow/stacks 3.0.0-beta.2 → 3.0.0-beta.4

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.
@@ -630,29 +630,6 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
630
630
  position: absolute;
631
631
  transform: translate(-50%, 60%);
632
632
  }
633
- .s-award-bling {
634
- --_ab-before-bg: unset;
635
- align-items: center;
636
- color: inherit;
637
- display: flex;
638
- }
639
- .s-award-bling.s-award-bling__gold {
640
- --_ab-before-bg: var(--yellow-300);
641
- }
642
- .s-award-bling.s-award-bling__silver {
643
- --_ab-before-bg: var(--blue-300);
644
- }
645
- .s-award-bling.s-award-bling__bronze {
646
- --_ab-before-bg: var(--orange-300);
647
- }
648
- .s-award-bling:before {
649
- background-color: var(--_ab-before-bg);
650
- border-radius: 100%;
651
- content: "";
652
- margin-right: var(--su4);
653
- height: var(--su8);
654
- width: var(--su8);
655
- }
656
633
  .s-badge {
657
634
  --_ba-as: unset;
658
635
  --_ba-bc: var(--bc-medium);
@@ -1083,6 +1060,78 @@ body.theme-highcontrast .s-banner__warning.s-banner__important {
1083
1060
  position: relative;
1084
1061
  width: 100%;
1085
1062
  }
1063
+ .s-bling {
1064
+ --_bl-bg: unset;
1065
+ --_bl-size: calc(var(--su8) + var(--su2));
1066
+ --_bl-icon: url("data:image/svg+xml;utf8,<svg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><circle cx='4' cy='4' r='4'/></svg>");
1067
+ --_bl-icon-bg: var(--black-500);
1068
+ --_bl-icon-size: var(--su8);
1069
+ background-color: var(--_bl-bg);
1070
+ height: var(--_bl-size);
1071
+ width: var(--_bl-size);
1072
+ align-items: center;
1073
+ color: inherit;
1074
+ display: inline-flex;
1075
+ justify-content: center;
1076
+ }
1077
+ .s-bling.s-bling__gold,
1078
+ .s-bling.s-bling__silver {
1079
+ --_bl-icon-size: calc(var(--su8) + var(--su2));
1080
+ }
1081
+ .s-bling.s-bling__activity {
1082
+ --_bl-icon-bg: var(--pink-400);
1083
+ }
1084
+ .s-bling.s-bling__gold {
1085
+ --_bl-icon-bg: var(--yellow-400);
1086
+ --_bl-icon: url("data:image/svg+xml;,<svg viewBox='0 0 8 9' xmlns='http://www.w3.org/2000/svg'><path d='M3.89709 0L7.79421 2.25V6.75L3.89709 9L-1.95503e-05 6.75V2.25L3.89709 0Z'/></svg>");
1087
+ }
1088
+ .s-bling.s-bling__silver {
1089
+ --_bl-icon-bg: var(--blue-400);
1090
+ --_bl-icon: url("data:image/svg+xml;,<svg viewBox='0 0 9 9' xmlns='http://www.w3.org/2000/svg'><path d='M4.27979 0L8.55954 3.10942L6.92482 8.14058H1.63475L3.09944e-05 3.10942L4.27979 0Z'/></svg>");
1091
+ }
1092
+ .s-bling.s-bling__bronze {
1093
+ --_bl-icon-bg: var(--orange-400);
1094
+ --_bl-icon: url("data:image/svg+xml;,<svg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><rect width='8' height='8'/></svg>");
1095
+ }
1096
+ .s-bling.s-bling__filled {
1097
+ --_bl-bg: var(--black-225);
1098
+ --_bl-icon-bg: var(--black-600);
1099
+ --_bl-size: var(--su24);
1100
+ }
1101
+ .s-bling.s-bling__filled.s-bling__rep {
1102
+ --_bl-bg: var(--black-300);
1103
+ }
1104
+ .s-bling.s-bling__filled.s-bling__activity {
1105
+ --_bl-bg: var(--pink-300);
1106
+ --_bl-icon-bg: var(--pink-600);
1107
+ }
1108
+ .s-bling.s-bling__filled.s-bling__gold {
1109
+ --_bl-bg: var(--yellow-300);
1110
+ --_bl-icon-bg: var(--yellow-600);
1111
+ }
1112
+ .s-bling.s-bling__filled.s-bling__silver {
1113
+ --_bl-bg: var(--blue-300);
1114
+ --_bl-icon-bg: var(--blue-600);
1115
+ }
1116
+ .s-bling.s-bling__filled.s-bling__bronze {
1117
+ --_bl-bg: var(--orange-300);
1118
+ --_bl-icon-bg: var(--orange-600);
1119
+ }
1120
+ .s-bling.s-bling__sm {
1121
+ --_bl-icon-size: var(--su6);
1122
+ --_bl-size: var(--su16);
1123
+ }
1124
+ .s-bling.s-bling__lg {
1125
+ --_bl-size: calc(var(--su24) + var(--su4));
1126
+ }
1127
+ .s-bling:before {
1128
+ -webkit-mask: var(--_bl-icon) no-repeat center;
1129
+ mask: var(--_bl-icon) no-repeat center;
1130
+ background-color: var(--_bl-icon-bg);
1131
+ content: "";
1132
+ height: var(--_bl-icon-size);
1133
+ width: var(--_bl-icon-size);
1134
+ }
1086
1135
  a.s-block-link,
1087
1136
  .s-block-link {
1088
1137
  --_bl-bs-color: var(--theme-primary);
@@ -2884,45 +2933,100 @@ body.theme-highcontrast .s-link-preview a.s-link-preview--title.s-link__visited:
2884
2933
  white-space: nowrap;
2885
2934
  }
2886
2935
  .s-menu {
2887
- --_me-divider-bg: var(--bc-light);
2888
- --_me-label-btc: var(--bc-light);
2889
- --_me-label-cursor: pointer;
2936
+ --_me-action-bg: unset;
2937
+ --_me-action-fc: var(--black-500);
2938
+ --_me-item-p: var(--su8);
2939
+ --_me-after-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m14 3.88-.44.44-7.34 7.35-.44.44-.44-.44-2.9-2.9L2 8.34l.89-.88.44.44 2.45 2.45 6.9-6.9.44-.44z'/%3E%3C/svg%3E");
2890
2940
  list-style: none;
2891
2941
  margin: 0;
2892
2942
  padding: 0;
2893
2943
  }
2894
- @media (prefers-color-scheme: dark) {
2895
- body.theme-system .s-menu {
2896
- --_me-divider-bg: var(--bc-light);
2897
- --_me-label-btc: var(--bc-light);
2898
- }
2899
- }
2900
- body.theme-dark .s-menu,
2901
- .theme-dark__forced .s-menu,
2902
- body.theme-system .theme-dark__forced .s-menu {
2903
- --_me-divider-bg: var(--bc-light);
2904
- --_me-label-btc: var(--bc-light);
2905
- }
2906
2944
  .s-menu .s-menu--divider {
2907
- background-color: var(--_me-divider-bg);
2945
+ background-color: var(--black-200);
2908
2946
  height: var(--su-static1);
2909
2947
  margin: var(--su8) 0;
2910
2948
  }
2911
- .s-menu .s-menu--label {
2912
- border-top: var(--su-static1) solid var(--_me-label-btc);
2913
- cursor: var(--_me-label-cursor);
2914
- padding: var(--su12);
2949
+ .s-menu .s-menu--icon {
2950
+ color: inherit;
2951
+ margin-right: var(--su8);
2952
+ }
2953
+ .s-menu .s-menu--item {
2954
+ color: var(--_me-action-fc);
2955
+ padding: var(--_me-item-p);
2956
+ align-items: center;
2957
+ display: flex;
2958
+ width: 100%;
2915
2959
  }
2916
- .s-menu .s-menu--label.is-disabled {
2917
- --_me-label-cursor: not-allowed;
2960
+ .s-menu .s-menu--item:has(> .s-menu--action) {
2961
+ --_me-item-p: 0;
2962
+ }
2963
+ .s-menu .s-menu--item.s-check-control {
2964
+ --_me-item-p: var(--su6) var(--su8);
2965
+ align-items: flex-start;
2966
+ }
2967
+ .s-menu .s-menu--item.s-check-control .s-radio,
2968
+ .s-menu .s-menu--item.s-check-control .s-checkbox {
2969
+ margin-top: var(--su4);
2970
+ }
2971
+ .s-menu .s-menu--item:not(.s-check-control) .s-radio,
2972
+ .s-menu .s-menu--item:not(.s-check-control) .s-checkbox {
2973
+ height: 0;
2974
+ pointer-events: none;
2975
+ position: absolute;
2976
+ opacity: 0;
2977
+ width: 0;
2978
+ }
2979
+ .s-menu .s-menu--action {
2980
+ background-color: var(--_me-action-bg);
2981
+ color: var(--_me-action-fc);
2982
+ align-items: center;
2983
+ border-radius: var(--br-md);
2984
+ cursor: pointer;
2985
+ display: flex;
2986
+ padding: var(--su8);
2987
+ width: 100%;
2988
+ }
2989
+ .s-menu .s-menu--action:focus-visible,
2990
+ .s-menu .s-menu--action:has(> input:focus-visible) {
2991
+ box-shadow: inset 0 0 0 var(--su-static2) var(--focus-theme), inset 0 0 0 var(--su-static4) var(--focus-neutral);
2992
+ outline: var(--su-static2) solid transparent !important;
2993
+ }
2994
+ .s-menu .s-menu--action:focus-visible,
2995
+ .s-menu .s-menu--action:has(> input:focus-visible),
2996
+ .s-menu .s-menu--action:hover {
2997
+ --_me-action-bg: var(--black-150);
2998
+ --_me-action-fc: var(--black-600);
2999
+ }
3000
+ .s-menu .s-menu--action__danger {
3001
+ --_me-action-fc: var(--red-400);
3002
+ }
3003
+ .s-menu .s-menu--action__danger:focus-visible,
3004
+ .s-menu .s-menu--action__danger:hover {
3005
+ --_me-action-fc: var(--red-500);
3006
+ }
3007
+ .s-menu .s-menu--action.is-selected:after,
3008
+ .s-menu .s-menu--action:has(input:checked):after {
3009
+ background-color: var(--_me-action-fc);
3010
+ content: "";
3011
+ height: var(--su16);
3012
+ margin-left: auto;
3013
+ width: var(--su16);
3014
+ mask-image: var(--_me-after-mask);
3015
+ mask-size: contain;
3016
+ mask-repeat: no-repeat;
3017
+ }
3018
+ .s-menu button.s-menu--action {
3019
+ border: none;
3020
+ font-family: inherit;
3021
+ line-height: inherit;
3022
+ text-align: left;
2918
3023
  }
2919
3024
  .s-menu .s-menu--title {
2920
- color: var(--black-500);
2921
- font-size: var(--fs-fine);
2922
- padding: var(--su8) var(--su12);
2923
- text-transform: uppercase;
3025
+ color: var(--black-600);
3026
+ font-weight: 700;
3027
+ padding: var(--su6) var(--su8);
2924
3028
  }
2925
- .s-menu li + .s-menu--title {
3029
+ .s-menu .s-menu--item + .s-menu--title {
2926
3030
  margin-top: var(--su12);
2927
3031
  }
2928
3032
  .s-modal {
@@ -3458,63 +3562,64 @@ ul.s-pagination {
3458
3562
  padding: 0;
3459
3563
  }
3460
3564
  .s-pagination .s-pagination--item {
3461
- --_pa-item-bg: transparent;
3462
- --_pa-item-bc: var(--bc-darker);
3463
- --_pa-item-fc: var(--fc-medium);
3464
- --_pa-item-bg-focus: var(--black-400);
3465
- --_pa-item-fc-focus: var(--white);
3466
- --_pa-item-bg-hover: var(--black-225);
3467
- --_pa-item-bc-hover: var(--bc-darker);
3468
- --_pa-item-fc-hover: var(--fc-dark);
3565
+ --_pa-item-bg: unset;
3566
+ --_pa-item-br: unset;
3567
+ --_pa-item-fc: var(--black-400);
3568
+ --_pa-item-p: var(--su-static4);
3469
3569
  background-color: var(--_pa-item-bg);
3470
- border: 1px solid var(--_pa-item-bc);
3570
+ border-radius: var(--_pa-item-br);
3471
3571
  color: var(--_pa-item-fc);
3472
- border-radius: var(--br-md);
3473
- display: inline-block;
3474
- font-size: var(--fs-body1);
3475
- line-height: var(--lh-xl);
3476
- padding: 0 var(--su8);
3477
- }
3478
- body.theme-highcontrast .s-pagination .s-pagination--item {
3479
- text-decoration: none;
3572
+ padding: var(--_pa-item-p);
3573
+ display: inline-flex;
3574
+ align-items: center;
3575
+ justify-content: center;
3576
+ margin: var(--su-static1);
3577
+ position: relative;
3480
3578
  }
3481
3579
  .s-pagination .s-pagination--item.is-selected {
3482
- --_pa-item-bg: var(--theme-primary);
3483
- --_pa-item-bc: transparent;
3484
- --_pa-item-fc: var(--white);
3485
- --_pa-item-bg-focus: var(--theme-primary-400);
3486
- }
3487
- .s-pagination .s-pagination--item.s-pagination--item__clear {
3488
- --_pa-item-bg: transparent;
3489
- --_pa-item-bc: transparent;
3490
- --_pa-item-fc: inherit;
3491
- }
3492
- .s-pagination .s-pagination--item.is-selected,
3493
- .s-pagination .s-pagination--item.s-pagination--item__clear {
3494
- --_pa-item-bc-hover: var(--_pa-item-bc);
3495
- --_pa-item-bg-hover: var(--_pa-item-bg);
3496
- --_pa-item-fc-hover: var(--_pa-item-fc);
3497
- }
3498
- .s-pagination .s-pagination--item:hover {
3499
- background-color: var(--_pa-item-bg-hover);
3500
- border-color: var(--_pa-item-bc-hover);
3501
- color: var(--_pa-item-fc-hover);
3580
+ --_pa-item-fc: var(--black-600);
3581
+ }
3582
+ .s-pagination .s-pagination--item.is-selected:not(:hover):not(:focus-visible):before {
3583
+ background-color: var(--black-600);
3584
+ content: "";
3585
+ height: var(--su-static2);
3586
+ left: 0;
3587
+ position: absolute;
3588
+ right: 0;
3589
+ top: 100%;
3590
+ }
3591
+ .s-pagination .s-pagination--item.s-pagination--item__nav {
3592
+ --_pa-item-bg: var(--black-150);
3593
+ --_pa-item-br: var(--br-circle);
3594
+ --_pa-item-fc: var(--black-600);
3595
+ --_pa-item-p: var(--su-static6);
3596
+ aspect-ratio: 1 / 1;
3597
+ }
3598
+ .s-pagination .s-pagination--item.s-pagination--item__nav:hover {
3599
+ --_pa-item-bg: var(--black-200);
3600
+ }
3601
+ .s-pagination .s-pagination--item[href]:hover:not(.s-pagination .s-pagination--item__nav) {
3602
+ --_pa-item-bg: var(--black-150);
3603
+ --_pa-item-br: var(--br-pill);
3604
+ --_pa-item-fc: var(--black-600);
3502
3605
  }
3503
3606
  .s-pagination .s-pagination--item:focus-visible {
3504
- border-color: var(--focus-theme) !important;
3505
- box-shadow: inset 0 0 0 var(--su-static1) var(--focus-theme), inset 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-neutral);
3607
+ --_pa-item-bg: var(--black-150);
3608
+ --_pa-item-fc: var(--black-600);
3609
+ border-color: var(--focus-neutral) !important;
3610
+ box-shadow: 0 0 0 var(--su-static1) var(--focus-neutral), 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-theme);
3506
3611
  outline: var(--su-static2) solid transparent !important;
3507
3612
  }
3508
- .s-pagination .s-pagination--item:focus-visible,
3613
+ .s-pagination .s-pagination--item:focus-visible:not(.s-pagination .s-pagination--item__nav),
3509
3614
  .s-pagination .s-pagination--item.focus-inset-bordered {
3510
- background-color: var(--_pa-item-bg-focus);
3511
- color: var(--_pa-item-fc-focus);
3615
+ --_pa-item-br: var(--br-md);
3512
3616
  }
3513
3617
  .s-pagination,
3514
3618
  .s-pagination ul {
3515
3619
  display: flex;
3620
+ align-items: center;
3516
3621
  flex-wrap: wrap;
3517
- gap: var(--su4);
3622
+ gap: var(--su2);
3518
3623
  }
3519
3624
  .s-popover {
3520
3625
  --_po-bg: var(--white);
@@ -3526,7 +3631,7 @@ body.theme-highcontrast .s-pagination .s-pagination--item {
3526
3631
  --_po-topbar-height: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
3527
3632
  --_po-content-mxh: calc(100vh - var(--_po-topbar-height) - var(--su48));
3528
3633
  background-color: var(--_po-bg);
3529
- border: 1px solid var(--_po-bc);
3634
+ border: var(--su-static1) solid var(--_po-bc);
3530
3635
  box-shadow: var(--_po-bs);
3531
3636
  display: var(--_po-d);
3532
3637
  min-width: var(--_po-wmn);
@@ -3542,17 +3647,13 @@ body.theme-highcontrast .s-pagination .s-pagination--item {
3542
3647
  }
3543
3648
  @media (prefers-color-scheme: dark) {
3544
3649
  body.theme-system .s-popover {
3545
- --_po-bg: var(--black-200);
3546
- --_po-bc: var(--bc-light);
3547
- --_po-bs: var(--bs-lg);
3650
+ --_po-bg: var(--black-100);
3548
3651
  }
3549
3652
  }
3550
3653
  body.theme-dark .s-popover,
3551
3654
  .theme-dark__forced .s-popover,
3552
3655
  body.theme-system .theme-dark__forced .s-popover {
3553
- --_po-bg: var(--black-200);
3554
- --_po-bc: var(--bc-light);
3555
- --_po-bs: var(--bs-lg);
3656
+ --_po-bg: var(--black-100);
3556
3657
  }
3557
3658
  .s-popover.is-visible {
3558
3659
  --_po-d: block;
@@ -3664,6 +3765,7 @@ body.theme-system .theme-dark__forced .s-popover {
3664
3765
  .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .s-tag .focus-bordered {
3665
3766
  background-color: var(--_ps-meta-tags-tag-bg);
3666
3767
  color: var(--black-500);
3768
+ border-color: var(--black-300);
3667
3769
  }
3668
3770
  body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags a,
3669
3771
  body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags a,
@@ -5517,87 +5619,80 @@ body.theme-highcontrast .s-skeleton {
5517
5619
  .s-tag {
5518
5620
  --_ta-bc: var(--theme-tag-border-color, var(--_ta-bg));
5519
5621
  --_ta-bg: var(--theme-tag-background-color, var(--black-150));
5520
- --_ta-fc: var(--theme-tag-color, var(--black-500));
5622
+ --_ta-fc: var(--theme-tag-color, var(--black-600));
5521
5623
  --_ta-bc-hover: var(--theme-tag-hover-border-color, var(--_ta-bg-hover));
5522
5624
  --_ta-bg-hover: var(--theme-tag-hover-background-color, var(--black-200));
5523
5625
  --_ta-fc-hover: var(--theme-tag-hover-color, var(--black-600));
5524
- --_ta-br: var(--br-md);
5525
5626
  --_ta-fs: var(--fs-caption);
5526
- --_ta-lh: 1.84615385;
5527
- --_ta-pl: var(--_ta-px);
5528
- --_ta-pr: var(--_ta-px);
5529
- --_ta-px: var(--su4);
5530
- --_ta-dismiss-padding: calc(var(--_ta-px) - var(--su-static1));
5627
+ --_ta-pb: calc(var(--_ta-pt) + var(--su1));
5628
+ --_ta-pl: var(--su8);
5629
+ --_ta-pr: var(--su8);
5630
+ --_ta-pt: var(--su4);
5531
5631
  background-color: var(--_ta-bg);
5532
5632
  border: var(--su-static1) solid var(--_ta-bc);
5533
- border-radius: var(--_ta-br);
5534
5633
  color: var(--_ta-fc);
5535
5634
  font-size: var(--_ta-fs);
5536
- line-height: var(--_ta-lh);
5537
- padding-left: var(--_ta-pl);
5538
- padding-right: var(--_ta-pr);
5635
+ padding: var(--_ta-pt) var(--_ta-pr) var(--_ta-pb) var(--_ta-pl);
5539
5636
  align-items: center;
5540
5637
  display: inline-flex;
5541
- font-weight: 700;
5638
+ gap: var(--su4);
5542
5639
  justify-content: center;
5543
- min-width: 0;
5640
+ line-height: var(--lh-xs);
5544
5641
  text-decoration: none;
5545
- vertical-align: middle;
5546
5642
  white-space: nowrap;
5547
5643
  }
5548
5644
  body.theme-highcontrast .s-tag:not(body.theme-highcontrast .s-tag__moderator):not(body.theme-highcontrast .s-tag__required) {
5549
5645
  --_ta-bc: var(--theme-tag-border-color, var(--black-300));
5550
5646
  --_ta-bc-hover: var(--theme-tag-hover-border-color, var(--black-300));
5551
5647
  }
5552
- .s-tag.s-tag__xs {
5553
- --_ta-fs: var(--fs-fine);
5554
- --_ta-lh: 1.4;
5555
- --_ta-px: var(--su2);
5648
+ body.theme-highcontrast .s-tag:not(body.theme-highcontrast .s-tag__moderator):not(body.theme-highcontrast .s-tag__required).s-tag__ignored {
5649
+ --_ta-fc: var(--black-500);
5556
5650
  }
5557
5651
  .s-tag.s-tag__sm {
5558
- --_ta-fs: var(--fs-caption);
5559
- --_ta-lh: 1.5;
5560
- }
5561
- .s-tag.s-tag__md {
5562
- --_ta-px: var(--su6);
5563
- --_ta-fs: var(--fs-body2);
5564
- --_ta-lh: 1.73333333;
5652
+ --_ta-pl: var(--su4);
5653
+ --_ta-pr: var(--su4);
5654
+ --_ta-pt: var(--su1);
5565
5655
  }
5566
5656
  .s-tag.s-tag__lg {
5567
- --_ta-br: calc(var(--br-md) + var(--su-static1));
5568
- --_ta-fs: var(--fs-subheading);
5569
- --_ta-lh: 1.68421053;
5570
- --_ta-px: var(--su6);
5571
- }
5572
- .s-tag__ignored,
5573
- .s-tag.s-tag__ignored,
5574
- .s-tag__watched,
5575
- .s-tag.s-tag__watched {
5576
- --_ta-pl: calc(var(--su-static24) - var(--su-static2));
5577
- --_ta-before-size: calc(var(--su-static16) - var(--su-static2));
5578
- position: relative;
5657
+ --_ta-fs: var(--fs-body1);
5658
+ --_ta-pt: var(--su4);
5579
5659
  }
5580
- .s-tag__ignored:before,
5581
5660
  .s-tag.s-tag__ignored:before,
5582
- .s-tag__watched:before,
5583
5661
  .s-tag.s-tag__watched:before {
5584
- height: var(--_ta-before-size);
5585
- width: var(--_ta-before-size);
5586
5662
  -webkit-mask: var(--_ta-before-icon) no-repeat center;
5587
5663
  mask: var(--_ta-before-icon) no-repeat center;
5588
5664
  background-color: currentColor;
5589
5665
  content: "";
5590
5666
  display: block;
5591
- left: var(--su-static4);
5592
- margin-right: var(--su2);
5593
- position: absolute;
5594
- top: calc(50% - calc(var(--su-static8) - var(--su-static1)));
5667
+ height: calc(var(--su-static16) - var(--su-static2));
5595
5668
  -webkit-mask-size: contain;
5596
5669
  mask-size: contain;
5670
+ width: calc(var(--su-static16) - var(--su-static2));
5671
+ }
5672
+ .s-tag.s-tag__deleted,
5673
+ .s-tag.s-tag__ignored,
5674
+ .s-tag.s-tag__deleted.s-tag__required:not(.s-tag.s-tag__deleted__moderator),
5675
+ .s-tag.s-tag__ignored.s-tag__required:not(.s-tag.s-tag__deleted__moderator),
5676
+ .s-tag.s-tag__deleted.s-tag__required:not(.s-tag.s-tag__ignored__moderator),
5677
+ .s-tag.s-tag__ignored.s-tag__required:not(.s-tag.s-tag__ignored__moderator),
5678
+ .s-tag.s-tag__deleted.s-tag__moderator,
5679
+ .s-tag.s-tag__ignored.s-tag__moderator {
5680
+ --_ta-bc-hover: var(--_ta-bc);
5681
+ --_ta-bg-hover: var(--_ta-bg);
5682
+ --_ta-fc-hover: var(--_ta-fc);
5683
+ }
5684
+ .s-tag.s-tag__deleted {
5685
+ --_ta-fc: var(--black-500);
5686
+ }
5687
+ .s-tag.s-tag__deleted.s-tag__required:not(.s-tag.s-tag__deleted__moderator) {
5688
+ --_ta-bc: var(--black-300);
5689
+ --_ta-fc: var(--black-400);
5597
5690
  }
5598
- .s-tag__ignored,
5599
5691
  .s-tag.s-tag__ignored {
5692
+ --_ta-bg-hover: var(--_ta-bg);
5600
5693
  --_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.52 7.38 1.58 9.26A12.38 12.38 0 0 1 0 7s2.63-5.14 7.05-5.14c.66 0 1.28.12 1.86.32L7.44 3.6a3.48 3.48 0 0 0-3.92 3.78ZM5.3 9.99c.5.28 1.1.44 1.71.44 1.94 0 3.5-1.53 3.5-3.43 0-.62-.17-1.21-.47-1.72L8.7 6.6a1.73 1.73 0 0 1-2.08 2.07L5.29 10Zm6.23-6.19A12.7 12.7 0 0 1 14 7s-2.63 5.14-6.95 5.14A6.1 6.1 0 0 1 4 11.3L2.27 13l-1.4-1.36L11.9 1l1.23 1.2-1.6 1.6Z'/%3E%3C/svg%3E");
5694
+ --_ta-fc: var(--black-400);
5695
+ --_ta-fc-hover: var(--black-400);
5601
5696
  }
5602
5697
  .s-tag.s-tag__moderator {
5603
5698
  --_ta-bc: var(--orange-300);
@@ -5608,53 +5703,40 @@ body.theme-highcontrast .s-tag:not(body.theme-highcontrast .s-tag__moderator):no
5608
5703
  --_ta-fc-hover: var(--orange-600);
5609
5704
  }
5610
5705
  .s-tag.s-tag__required:not(.s-tag__moderator) {
5611
- --_ta-bc: var(--theme-tag-required-border-color, var(--theme-tag-border-color, var(--black-400)));
5612
- --_ta-bg: var(--theme-tag-required-background-color, var(--theme-tag-background-color, var(--black-150)));
5613
- --_ta-fc: var(--theme-tag-required-color, var(--theme-tag-color, var(--black-500)));
5706
+ --_ta-bc: var(--theme-tag-required-border-color, var(--theme-tag-border-color, var(--black-500)));
5614
5707
  --_ta-bc-hover: var(--theme-tag-required-hover-border-color, var(--theme-tag-hover-border-color, var(--black-600)));
5615
- --_ta-bg-hover: var(--theme-tag-required-hover-background-color, var(--theme-tag-hover-background-color, var(--black-200)));
5616
- --_ta-fc-hover: var(--theme-tag-required-hover-color, var(--theme-tag-hover-color, var(--black-600)));
5617
5708
  }
5618
- .s-tag__watched,
5619
5709
  .s-tag.s-tag__watched {
5620
- --_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7.05 1C2.63 1 0 6.5 0 6.5S2.63 12 7.05 12C11.38 12 14 6.5 14 6.5S11.37 1 7.05 1ZM7 10.17A3.59 3.59 0 0 1 3.5 6.5 3.6 3.6 0 0 1 7 2.83c1.94 0 3.5 1.65 3.5 3.67A3.57 3.57 0 0 1 7 10.17Zm0-1.84c.97 0 1.75-.81 1.75-1.83S7.97 4.67 7 4.67s-1.75.81-1.75 1.83S6.03 8.33 7 8.33Z'/%3E%3C/svg%3E");
5710
+ --_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpath d='M7.05 1C2.63 1 0 6.5 0 6.5S2.63 12 7.05 12C11.38 12 14 6.5 14 6.5S11.37 1 7.05 1ZM7 10.17A3.59 3.59 0 0 1 3.5 6.5 3.6 3.6 0 0 1 7 2.83c1.94 0 3.5 1.65 3.5 3.67A3.57 3.57 0 0 1 7 10.17Zm0-1.84c.97 0 1.75-.81 1.75-1.83S7.97 4.67 7 4.67s-1.75.81-1.75 1.83S6.03 8.33 7 8.33Z'/%3E%3C/svg%3E");
5621
5711
  }
5622
- .s-tag button.s-tag--dismiss:not(.s-btn) {
5623
- all: unset;
5712
+ .s-tag:has( > .s-tag--dismiss) {
5713
+ --_ta-pr: var(--su2);
5624
5714
  }
5625
- .s-tag .s-tag--dismiss,
5626
- .s-tag button.s-tag--dismiss:not(.s-btn) {
5715
+ .s-tag .s-tag--dismiss {
5716
+ all: unset;
5627
5717
  align-items: center;
5628
- align-self: stretch;
5629
5718
  background-color: transparent;
5630
- border-radius: var(--br-md);
5631
5719
  color: inherit;
5632
5720
  cursor: pointer;
5633
5721
  display: flex;
5634
5722
  justify-content: center;
5635
- margin: var(--su-static1) calc(var(--_ta-dismiss-padding) * -1) var(--su-static1) var(--_ta-dismiss-padding);
5636
- padding: var(--_ta-dismiss-padding);
5723
+ margin: calc(var(--_ta-pt) * -1) 0 calc(var(--_ta-pb) * -1);
5724
+ padding: var(--su2);
5637
5725
  }
5638
- .s-tag .s-tag--dismiss:focus-visible,
5639
- .s-tag button.s-tag--dismiss:not(.s-btn):focus-visible {
5726
+ .s-tag .s-tag--dismiss:focus-visible {
5640
5727
  box-shadow: 0 0 0 var(--su-static2) var(--focus-neutral), 0 0 0 var(--su-static4) var(--focus-theme);
5641
5728
  outline: var(--su-static2) solid transparent !important;
5642
5729
  }
5643
- .s-tag .s-tag--dismiss:hover,
5644
- .s-tag button.s-tag--dismiss:not(.s-btn):hover {
5730
+ .s-tag .s-tag--dismiss:hover {
5645
5731
  background-color: var(--_ta-fc);
5646
5732
  color: var(--_ta-bg);
5647
5733
  }
5648
- body.theme-highcontrast .s-tag .s-tag--dismiss:hover,
5649
- body.theme-highcontrast .s-tag button.s-tag--dismiss:not(.s-btn):hover {
5650
- color: var(--white);
5734
+ .s-tag:has( > .s-tag--sponsor) {
5735
+ --_ta-pl: var(--su2);
5651
5736
  }
5652
5737
  .s-tag .s-tag--sponsor {
5653
- align-self: center;
5654
- border-radius: calc(var(--br-md) - var(--su-static1));
5655
- display: inline-flex;
5656
- margin: calc(var(--su1) * -1) var(--su4) calc(var(--su2) * -1) calc(var(--su2) * -1);
5657
5738
  max-width: calc(var(--su-static16) + var(--su-static2));
5739
+ margin: calc(var(--_ta-pt) * -1) 0 calc(var(--_ta-pb) * -1) 0;
5658
5740
  }
5659
5741
  .s-tag .s-tag--sponsor img,
5660
5742
  .s-tag .s-tag--sponsor .svg-icon {
@@ -6877,12 +6959,12 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
6877
6959
  --black-500: #f2ede9;
6878
6960
  --black-600: #ffffff;
6879
6961
  --black: #ffffff;
6880
- --orange-100: hsl(22, 80%, 25%);
6881
- --orange-200: hsl(22, 75%, 45%);
6882
- --orange-300: hsl(22, 47%, 78%);
6883
- --orange-400: hsl(22, 40%, 90%);
6884
- --orange-500: hsl(22, 30%, 99%);
6885
- --orange-600: hsl(22, 20%, 98%);
6962
+ --orange-100: #401f0d;
6963
+ --orange-200: #733c1d;
6964
+ --orange-300: #c78c69;
6965
+ --orange-400: #e6ab8a;
6966
+ --orange-500: #fcccb1;
6967
+ --orange-600: #fadac8;
6886
6968
  --blue-100: #22304d;
6887
6969
  --blue-200: #4d6699;
6888
6970
  --blue-300: #7b93e0;
@@ -7015,12 +7097,12 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
7015
7097
  --black-500: #f2ede9;
7016
7098
  --black-600: #ffffff;
7017
7099
  --black: #ffffff;
7018
- --orange-100: hsl(22, 80%, 25%);
7019
- --orange-200: hsl(22, 75%, 45%);
7020
- --orange-300: hsl(22, 47%, 78%);
7021
- --orange-400: hsl(22, 40%, 90%);
7022
- --orange-500: hsl(22, 30%, 99%);
7023
- --orange-600: hsl(22, 20%, 98%);
7100
+ --orange-100: #401f0d;
7101
+ --orange-200: #733c1d;
7102
+ --orange-300: #c78c69;
7103
+ --orange-400: #e6ab8a;
7104
+ --orange-500: #fcccb1;
7105
+ --orange-600: #fadac8;
7024
7106
  --blue-100: #22304d;
7025
7107
  --blue-200: #4d6699;
7026
7108
  --blue-300: #7b93e0;