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

package/dist/css/stacks.css

@@ -630,29 +630,6 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
   position: absolute;
   transform: translate(-50%, 60%);
 }
-.s-award-bling {
-  --_ab-before-bg: unset;
-  align-items: center;
-  color: inherit;
-  display: flex;
-}
-.s-award-bling.s-award-bling__gold {
-  --_ab-before-bg: var(--yellow-300);
-}
-.s-award-bling.s-award-bling__silver {
-  --_ab-before-bg: var(--blue-300);
-}
-.s-award-bling.s-award-bling__bronze {
-  --_ab-before-bg: var(--orange-300);
-}
-.s-award-bling:before {
-  background-color: var(--_ab-before-bg);
-  border-radius: 100%;
-  content: "";
-  margin-right: var(--su4);
-  height: var(--su8);
-  width: var(--su8);
-}
 .s-badge {
   --_ba-as: unset;
   --_ba-bc: var(--bc-medium);
@@ -1083,6 +1060,78 @@ body.theme-highcontrast .s-banner__warning.s-banner__important {
   position: relative;
   width: 100%;
 }
+.s-bling {
+  --_bl-bg: unset;
+  --_bl-size: calc(var(--su8) + var(--su2));
+  --_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>");
+  --_bl-icon-bg: var(--black-500);
+  --_bl-icon-size: var(--su8);
+  background-color: var(--_bl-bg);
+  height: var(--_bl-size);
+  width: var(--_bl-size);
+  align-items: center;
+  color: inherit;
+  display: inline-flex;
+  justify-content: center;
+}
+.s-bling.s-bling__gold,
+.s-bling.s-bling__silver {
+  --_bl-icon-size: calc(var(--su8) + var(--su2));
+}
+.s-bling.s-bling__activity {
+  --_bl-icon-bg: var(--pink-400);
+}
+.s-bling.s-bling__gold {
+  --_bl-icon-bg: var(--yellow-400);
+  --_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>");
+}
+.s-bling.s-bling__silver {
+  --_bl-icon-bg: var(--blue-400);
+  --_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>");
+}
+.s-bling.s-bling__bronze {
+  --_bl-icon-bg: var(--orange-400);
+  --_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>");
+}
+.s-bling.s-bling__filled {
+  --_bl-bg: var(--black-225);
+  --_bl-icon-bg: var(--black-600);
+  --_bl-size: var(--su24);
+}
+.s-bling.s-bling__filled.s-bling__rep {
+  --_bl-bg: var(--black-300);
+}
+.s-bling.s-bling__filled.s-bling__activity {
+  --_bl-bg: var(--pink-300);
+  --_bl-icon-bg: var(--pink-600);
+}
+.s-bling.s-bling__filled.s-bling__gold {
+  --_bl-bg: var(--yellow-300);
+  --_bl-icon-bg: var(--yellow-600);
+}
+.s-bling.s-bling__filled.s-bling__silver {
+  --_bl-bg: var(--blue-300);
+  --_bl-icon-bg: var(--blue-600);
+}
+.s-bling.s-bling__filled.s-bling__bronze {
+  --_bl-bg: var(--orange-300);
+  --_bl-icon-bg: var(--orange-600);
+}
+.s-bling.s-bling__sm {
+  --_bl-icon-size: var(--su6);
+  --_bl-size: var(--su16);
+}
+.s-bling.s-bling__lg {
+  --_bl-size: calc(var(--su24) + var(--su4));
+}
+.s-bling:before {
+  -webkit-mask: var(--_bl-icon) no-repeat center;
+  mask: var(--_bl-icon) no-repeat center;
+  background-color: var(--_bl-icon-bg);
+  content: "";
+  height: var(--_bl-icon-size);
+  width: var(--_bl-icon-size);
+}
 a.s-block-link,
 .s-block-link {
   --_bl-bs-color: var(--theme-primary);
@@ -3664,6 +3713,7 @@ body.theme-system .theme-dark__forced .s-popover {
 .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .s-tag .focus-bordered {
   background-color: var(--_ps-meta-tags-tag-bg);
   color: var(--black-500);
+  border-color: var(--black-300);
 }
 body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags a,
 body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags a,
@@ -5517,87 +5567,80 @@ body.theme-highcontrast .s-skeleton {
 .s-tag {
   --_ta-bc: var(--theme-tag-border-color, var(--_ta-bg));
   --_ta-bg: var(--theme-tag-background-color, var(--black-150));
-  --_ta-fc: var(--theme-tag-color, var(--black-500));
+  --_ta-fc: var(--theme-tag-color, var(--black-600));
   --_ta-bc-hover: var(--theme-tag-hover-border-color, var(--_ta-bg-hover));
   --_ta-bg-hover: var(--theme-tag-hover-background-color, var(--black-200));
   --_ta-fc-hover: var(--theme-tag-hover-color, var(--black-600));
-  --_ta-br: var(--br-md);
   --_ta-fs: var(--fs-caption);
-  --_ta-lh: 1.84615385;
-  --_ta-pl: var(--_ta-px);
-  --_ta-pr: var(--_ta-px);
-  --_ta-px: var(--su4);
-  --_ta-dismiss-padding: calc(var(--_ta-px) - var(--su-static1));
+  --_ta-pb: calc(var(--_ta-pt) + var(--su1));
+  --_ta-pl: var(--su8);
+  --_ta-pr: var(--su8);
+  --_ta-pt: var(--su4);
   background-color: var(--_ta-bg);
   border: var(--su-static1) solid var(--_ta-bc);
-  border-radius: var(--_ta-br);
   color: var(--_ta-fc);
   font-size: var(--_ta-fs);
-  line-height: var(--_ta-lh);
-  padding-left: var(--_ta-pl);
-  padding-right: var(--_ta-pr);
+  padding: var(--_ta-pt) var(--_ta-pr) var(--_ta-pb) var(--_ta-pl);
   align-items: center;
   display: inline-flex;
-  font-weight: 700;
+  gap: var(--su4);
   justify-content: center;
-  min-width: 0;
+  line-height: var(--lh-xs);
   text-decoration: none;
-  vertical-align: middle;
   white-space: nowrap;
 }
 body.theme-highcontrast .s-tag:not(body.theme-highcontrast .s-tag__moderator):not(body.theme-highcontrast .s-tag__required) {
   --_ta-bc: var(--theme-tag-border-color, var(--black-300));
   --_ta-bc-hover: var(--theme-tag-hover-border-color, var(--black-300));
 }
-.s-tag.s-tag__xs {
-  --_ta-fs: var(--fs-fine);
-  --_ta-lh: 1.4;
-  --_ta-px: var(--su2);
+body.theme-highcontrast .s-tag:not(body.theme-highcontrast .s-tag__moderator):not(body.theme-highcontrast .s-tag__required).s-tag__ignored {
+  --_ta-fc: var(--black-500);
 }
 .s-tag.s-tag__sm {
-  --_ta-fs: var(--fs-caption);
-  --_ta-lh: 1.5;
-}
-.s-tag.s-tag__md {
-  --_ta-px: var(--su6);
-  --_ta-fs: var(--fs-body2);
-  --_ta-lh: 1.73333333;
+  --_ta-pl: var(--su4);
+  --_ta-pr: var(--su4);
+  --_ta-pt: var(--su1);
 }
 .s-tag.s-tag__lg {
-  --_ta-br: calc(var(--br-md) + var(--su-static1));
-  --_ta-fs: var(--fs-subheading);
-  --_ta-lh: 1.68421053;
-  --_ta-px: var(--su6);
-}
-.s-tag__ignored,
-.s-tag.s-tag__ignored,
-.s-tag__watched,
-.s-tag.s-tag__watched {
-  --_ta-pl: calc(var(--su-static24) - var(--su-static2));
-  --_ta-before-size: calc(var(--su-static16) - var(--su-static2));
-  position: relative;
+  --_ta-fs: var(--fs-body1);
+  --_ta-pt: var(--su4);
 }
-.s-tag__ignored:before,
 .s-tag.s-tag__ignored:before,
-.s-tag__watched:before,
 .s-tag.s-tag__watched:before {
-  height: var(--_ta-before-size);
-  width: var(--_ta-before-size);
   -webkit-mask: var(--_ta-before-icon) no-repeat center;
   mask: var(--_ta-before-icon) no-repeat center;
   background-color: currentColor;
   content: "";
   display: block;
-  left: var(--su-static4);
-  margin-right: var(--su2);
-  position: absolute;
-  top: calc(50% - calc(var(--su-static8) - var(--su-static1)));
+  height: calc(var(--su-static16) - var(--su-static2));
   -webkit-mask-size: contain;
   mask-size: contain;
+  width: calc(var(--su-static16) - var(--su-static2));
+}
+.s-tag.s-tag__deleted,
+.s-tag.s-tag__ignored,
+.s-tag.s-tag__deleted.s-tag__required:not(.s-tag.s-tag__deleted__moderator),
+.s-tag.s-tag__ignored.s-tag__required:not(.s-tag.s-tag__deleted__moderator),
+.s-tag.s-tag__deleted.s-tag__required:not(.s-tag.s-tag__ignored__moderator),
+.s-tag.s-tag__ignored.s-tag__required:not(.s-tag.s-tag__ignored__moderator),
+.s-tag.s-tag__deleted.s-tag__moderator,
+.s-tag.s-tag__ignored.s-tag__moderator {
+  --_ta-bc-hover: var(--_ta-bc);
+  --_ta-bg-hover: var(--_ta-bg);
+  --_ta-fc-hover: var(--_ta-fc);
+}
+.s-tag.s-tag__deleted {
+  --_ta-fc: var(--black-500);
+}
+.s-tag.s-tag__deleted.s-tag__required:not(.s-tag.s-tag__deleted__moderator) {
+  --_ta-bc: var(--black-300);
+  --_ta-fc: var(--black-400);
 }
-.s-tag__ignored,
 .s-tag.s-tag__ignored {
+  --_ta-bg-hover: var(--_ta-bg);
   --_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");
+  --_ta-fc: var(--black-400);
+  --_ta-fc-hover: var(--black-400);
 }
 .s-tag.s-tag__moderator {
   --_ta-bc: var(--orange-300);
@@ -5608,53 +5651,40 @@ body.theme-highcontrast .s-tag:not(body.theme-highcontrast .s-tag__moderator):no
   --_ta-fc-hover: var(--orange-600);
 }
 .s-tag.s-tag__required:not(.s-tag__moderator) {
-  --_ta-bc: var(--theme-tag-required-border-color, var(--theme-tag-border-color, var(--black-400)));
-  --_ta-bg: var(--theme-tag-required-background-color, var(--theme-tag-background-color, var(--black-150)));
-  --_ta-fc: var(--theme-tag-required-color, var(--theme-tag-color, var(--black-500)));
+  --_ta-bc: var(--theme-tag-required-border-color, var(--theme-tag-border-color, var(--black-500)));
   --_ta-bc-hover: var(--theme-tag-required-hover-border-color, var(--theme-tag-hover-border-color, var(--black-600)));
-  --_ta-bg-hover: var(--theme-tag-required-hover-background-color, var(--theme-tag-hover-background-color, var(--black-200)));
-  --_ta-fc-hover: var(--theme-tag-required-hover-color, var(--theme-tag-hover-color, var(--black-600)));
 }
-.s-tag__watched,
 .s-tag.s-tag__watched {
-  --_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");
+  --_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");
 }
-.s-tag button.s-tag--dismiss:not(.s-btn) {
-  all: unset;
+.s-tag:has( > .s-tag--dismiss) {
+  --_ta-pr: var(--su2);
 }
-.s-tag .s-tag--dismiss,
-.s-tag button.s-tag--dismiss:not(.s-btn) {
+.s-tag .s-tag--dismiss {
+  all: unset;
   align-items: center;
-  align-self: stretch;
   background-color: transparent;
-  border-radius: var(--br-md);
   color: inherit;
   cursor: pointer;
   display: flex;
   justify-content: center;
-  margin: var(--su-static1) calc(var(--_ta-dismiss-padding) * -1) var(--su-static1) var(--_ta-dismiss-padding);
-  padding: var(--_ta-dismiss-padding);
+  margin: calc(var(--_ta-pt) * -1) 0 calc(var(--_ta-pb) * -1);
+  padding: var(--su2);
 }
-.s-tag .s-tag--dismiss:focus-visible,
-.s-tag button.s-tag--dismiss:not(.s-btn):focus-visible {
+.s-tag .s-tag--dismiss:focus-visible {
   box-shadow: 0 0 0 var(--su-static2) var(--focus-neutral), 0 0 0 var(--su-static4) var(--focus-theme);
   outline: var(--su-static2) solid transparent !important;
 }
-.s-tag .s-tag--dismiss:hover,
-.s-tag button.s-tag--dismiss:not(.s-btn):hover {
+.s-tag .s-tag--dismiss:hover {
   background-color: var(--_ta-fc);
   color: var(--_ta-bg);
 }
-body.theme-highcontrast .s-tag .s-tag--dismiss:hover,
-body.theme-highcontrast .s-tag button.s-tag--dismiss:not(.s-btn):hover {
-  color: var(--white);
+.s-tag:has( > .s-tag--sponsor) {
+  --_ta-pl: var(--su2);
 }
 .s-tag .s-tag--sponsor {
-  align-self: center;
-  border-radius: calc(var(--br-md) - var(--su-static1));
-  display: inline-flex;
-  margin: calc(var(--su1) * -1) var(--su4) calc(var(--su2) * -1) calc(var(--su2) * -1);
   max-width: calc(var(--su-static16) + var(--su-static2));
+  margin: calc(var(--_ta-pt) * -1) 0 calc(var(--_ta-pb) * -1) 0;
 }
 .s-tag .s-tag--sponsor img,
 .s-tag .s-tag--sponsor .svg-icon {