@stackoverflow/stacks 0.71.0 → 0.72.0

package/dist/css/stacks.css

@@ -401,11 +401,33 @@ template {
 }
 .s-activity-indicator {
   display: inline-block;
-  width: 12px;
+  min-width: 12px;
   height: 12px;
+  padding-left: 4px;
+  padding-right: 4px;
+  line-height: 1.1;
   background-color: var(--theme-secondary-400);
   box-shadow: 0 0 0 4px var(--focus-ring);
-  border-radius: 100%;
+  border-radius: 1000px;
+  font-size: 11px;
+  font-weight: 600;
+  color: hsl(0, 0%, 100%);
+  text-transform: uppercase;
+}
+body.theme-highcontrast .s-activity-indicator {
+  color: var(--white);
+}
+.s-activity-indicator__success {
+  background-color: var(--green-500);
+  box-shadow: 0 0 0 4px var(--focus-ring-success);
+}
+.s-activity-indicator__warning {
+  background-color: var(--yellow-600);
+  box-shadow: 0 0 0 4px var(--focus-ring-warning);
+}
+.s-activity-indicator__danger {
+  background-color: var(--red-500);
+  box-shadow: 0 0 0 4px var(--focus-ring-error);
 }
 .s-avatar {
   display: inline-block;
@@ -886,17 +908,15 @@ body.theme-highcontrast .s-btn-group .s-btn.is-selected .s-btn--number {
 .s-card p:last-of-type {
   margin-bottom: 0;
 }
-a.s-card:not(.s-card__muted):hover,
-a.s-card:not(.s-card__muted):focus,
-a.s-card:not(.s-card__muted):active {
-  border-color: var(--bc-darker);
-}
 .s-card__muted {
   border-color: var(--bc-light);
 }
 .s-card__muted > * {
   opacity: 0.65;
 }
+a.s-card {
+  text-decoration: none !important;
+}
 pre.s-code-block {
   font-size: 13px;
   font-family: var(--ff-mono);
@@ -1398,6 +1418,16 @@ body.theme-highcontrast .s-label--status {
     background-color: var(--theme-secondary-400);
     background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
   }
+  @media (prefers-color-scheme: dark) {
+    body.theme-highcontrast.theme-system .s-checkbox:checked {
+      border-color: var(--blue-700) !important;
+      background-color: var(--blue-300);
+    }
+  }
+  body.theme-highcontrast.theme-dark .s-checkbox:checked {
+    border-color: var(--blue-700) !important;
+    background-color: var(--blue-300);
+  }
   .s-checkbox:checked:focus {
     border-color: var(--theme-secondary-400);
   }
@@ -1415,6 +1445,16 @@ body.theme-highcontrast .s-label--status {
     border-width: 0.30769231em;
     background-color: hsl(0, 0%, 100%);
   }
+  @media (prefers-color-scheme: dark) {
+    body.theme-highcontrast.theme-system .s-radio:checked {
+      border-color: var(--blue-300);
+      outline: 1px solid var(--black);
+    }
+  }
+  body.theme-highcontrast.theme-dark .s-radio:checked {
+    border-color: var(--blue-300);
+    outline: 1px solid var(--black);
+  }
   .s-radio:focus {
     box-shadow: 0 0 0 4px var(--focus-ring);
   }
@@ -2826,6 +2866,9 @@ body.theme-dark .s-prose kbd,
   background-color: var(--black-075);
   border-radius: 3px;
 }
+.s-prose *:not(.s-code-block) > a code {
+  color: var(--theme-link-color);
+}
 .s-prose pre {
   margin-top: 0;
   margin-bottom: calc(var(--s-prose-spacing) + 0.4em);
@@ -3405,6 +3448,9 @@ body.theme-highcontrast .s-uploader.is-active:before {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+body.theme-highcontrast .s-uploader .s-uploader--preview-thumbnail {
+  border: 1px solid var(--black);
+}
 .s-uploader .s-uploader--preview-thumbnail:is(img) {
   object-fit: scale-down;
   object-position: center;
@@ -4544,11 +4590,11 @@ body.theme-system.theme-highcontrast .theme-light__forced {
   --fc-dark: var(--black-900);
   --fc-medium: var(--black-700);
   --fc-light: var(--black-500);
-  --focus-ring: hsla(206, 100%, 40%, 0.5);
-  --focus-ring-success: hsla(140, 40%, 40%, 0.5);
-  --focus-ring-warning: hsla(47, 76%, 46%, 0.5);
-  --focus-ring-error: hsla(358, 62%, 47%, 0.5);
-  --focus-ring-muted: hsla(210, 8%, 15%, 0.5);
+  --focus-ring: hsla(206, 100%, 40%, 0.9);
+  --focus-ring-success: hsla(140, 40%, 40%, 0.9);
+  --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
+  --focus-ring-error: hsla(358, 62%, 47%, 0.9);
+  --focus-ring-muted: hsla(210, 8%, 55%, 0.95);
   --bs-sm: none;
   --bs-md: none;
   --bs-lg: none;
@@ -4595,10 +4641,10 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
   --orange-700: hsl(27, 100%, 82%);
   --orange-800: hsl(27, 100%, 87%);
   --orange-900: hsl(27, 100%, 91%);
-  --blue-050: hsl(206, 100%, 3%);
-  --blue-100: hsl(206, 100%, 6%);
-  --blue-200: hsl(206, 100%, 12%);
-  --blue-300: hsl(206, 100%, 18%);
+  --blue-050: hsl(206, 100%, 4%);
+  --blue-100: hsl(206, 100%, 11%);
+  --blue-200: hsl(206, 100%, 18%);
+  --blue-300: hsl(206, 100%, 25%);
   --blue-400: hsl(206, 100%, 75%);
   --blue-500: hsl(206, 100%, 80%);
   --blue-600: hsl(206, 100%, 85%);
@@ -4661,11 +4707,11 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
   --bc-medium: var(--black-400);
   --bc-dark: var(--black-700);
   --bc-darker: var(--black-900);
-  --focus-ring: hsla(206, 100%, 40%, 0.5);
-  --focus-ring-success: hsla(140, 40%, 40%, 0.5);
-  --focus-ring-warning: hsla(47, 76%, 46%, 0.5);
-  --focus-ring-error: hsla(358, 62%, 47%, 0.5);
-  --focus-ring-muted: hsla(210, 8%, 15%, 0.5);
+  --focus-ring: hsla(206, 100%, 40%, 0.9);
+  --focus-ring-success: hsla(140, 40%, 40%, 0.9);
+  --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
+  --focus-ring-error: hsla(358, 62%, 47%, 0.9);
+  --focus-ring-muted: hsla(210, 8%, 55%, 0.95);
   --fc-dark: var(--black-900);
   --fc-medium: var(--black-700);
   --fc-light: var(--black-500);
@@ -4715,10 +4761,10 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
     --orange-700: hsl(27, 100%, 82%);
     --orange-800: hsl(27, 100%, 87%);
     --orange-900: hsl(27, 100%, 91%);
-    --blue-050: hsl(206, 100%, 3%);
-    --blue-100: hsl(206, 100%, 6%);
-    --blue-200: hsl(206, 100%, 12%);
-    --blue-300: hsl(206, 100%, 18%);
+    --blue-050: hsl(206, 100%, 4%);
+    --blue-100: hsl(206, 100%, 11%);
+    --blue-200: hsl(206, 100%, 18%);
+    --blue-300: hsl(206, 100%, 25%);
     --blue-400: hsl(206, 100%, 75%);
     --blue-500: hsl(206, 100%, 80%);
     --blue-600: hsl(206, 100%, 85%);
@@ -4781,11 +4827,11 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
     --bc-medium: var(--black-400);
     --bc-dark: var(--black-700);
     --bc-darker: var(--black-900);
-    --focus-ring: hsla(206, 100%, 40%, 0.5);
-    --focus-ring-success: hsla(140, 40%, 40%, 0.5);
-    --focus-ring-warning: hsla(47, 76%, 46%, 0.5);
-    --focus-ring-error: hsla(358, 62%, 47%, 0.5);
-    --focus-ring-muted: hsla(210, 8%, 15%, 0.5);
+    --focus-ring: hsla(206, 100%, 40%, 0.9);
+    --focus-ring-success: hsla(140, 40%, 40%, 0.9);
+    --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
+    --focus-ring-error: hsla(358, 62%, 47%, 0.9);
+    --focus-ring-muted: hsla(210, 8%, 55%, 0.95);
     --fc-dark: var(--black-900);
     --fc-medium: var(--black-700);
     --fc-light: var(--black-500);
@@ -13007,6 +13053,12 @@ p {
 .t-delay-unset {
   transition-delay: 0s !important;
 }
+.tl-fixed {
+  table-layout: fixed !important;
+}
+.tl-auto {
+  table-layout: auto !important;
+}
 .w0 {
   width: 0 !important;
 }
@@ -16651,6 +16703,9 @@ body *:after {
 body.theme-highcontrast .s-btn {
   border-color: currentColor;
 }
+body.theme-highcontrast .s-btn:not(.s-btn__link):not(.s-btn__unset) {
+  text-decoration: none;
+}
 button .s-btn,
 button[type="submit"] .s-btn,
 button[type="reset"] .s-btn {
@@ -16800,6 +16855,9 @@ body.theme-dark .s-btn__filled,
   border-color: var(--theme-button-filled-active-border-color);
   box-shadow: none;
 }
+body.theme-highcontrast .s-btn__filled:focus {
+  box-shadow: 0 0 0 4px var(--focus-ring);
+}
 .s-btn__filled.is-selected {
   color: var(--theme-button-filled-selected-color);
   background-color: var(--theme-button-filled-selected-background-color);
@@ -16873,6 +16931,9 @@ body.theme-highcontrast .s-btn__muted.s-btn__filled .s-btn--number {
 .s-btn__muted.s-btn__filled:focus {
   box-shadow: 0 0 0 4px var(--focus-ring-muted);
 }
+body.theme-highcontrast .s-btn__muted.s-btn__filled:focus {
+  box-shadow: 0 0 0 4px var(--focus-ring-muted);
+}
 .s-btn__muted.s-btn__filled.is-selected {
   color: var(--black-800);
   background-color: var(--black-350);
@@ -16905,6 +16966,9 @@ body.theme-highcontrast .s-btn__danger.s-btn__filled {
 .s-btn__danger:focus {
   box-shadow: 0 0 0 4px var(--focus-ring-error);
 }
+body.theme-highcontrast .s-btn__danger:focus {
+  box-shadow: 0 0 0 4px var(--focus-ring-error);
+}
 .s-btn__danger.is-selected {
   color: var(--red-900);
   background-color: var(--red-200);
@@ -16936,6 +17000,9 @@ body.theme-dark .s-btn__danger.s-btn__filled,
 body.theme-highcontrast .s-btn__danger.s-btn__filled {
   color: var(--white);
 }
+body.theme-highcontrast .s-btn__danger.s-btn__filled:focus {
+  box-shadow: 0 0 0 4px var(--focus-ring-error);
+}
 body.theme-highcontrast .s-btn__danger.s-btn__filled .s-btn--number {
   color: var(--black);
 }
@@ -17001,6 +17068,9 @@ body.theme-highcontrast .s-btn__primary:not(.is-selected) {
   background-color: var(--theme-button-primary-active-background-color);
   box-shadow: none;
 }
+body.theme-highcontrast .s-btn__primary:focus {
+  box-shadow: 0 0 0 4px var(--focus-ring);
+}
 .s-btn__primary.is-selected {
   color: var(--theme-button-primary-selected-color);
   background-color: var(--theme-button-primary-selected-background-color);
@@ -17020,10 +17090,12 @@ body.theme-highcontrast .s-btn__primary:not(.is-selected) {
   color: var(--black-800);
 }
 .s-btn__google:active {
-  border-color: var(--bc-darkest);
   background-color: var(--black-050);
   color: var(--black-900);
 }
+.s-btn__google:focus {
+  box-shadow: 0 0 0 4px var(--focus-ring-muted);
+}
 .s-btn__facebook {
   border-color: transparent;
   background-color: #385499;
@@ -17057,9 +17129,13 @@ body.theme-highcontrast .s-btn__github {
   background-color: var(--black-900);
   color: var(--white);
 }
+.s-btn__github:focus {
+  box-shadow: 0 0 0 4px var(--focus-ring-muted);
+}
 .s-btn__unset,
 .s-btn__unset:hover,
-.s-btn__unset:active {
+.s-btn__unset:active,
+.s-btn__unset:focus {
   padding: 0;
   border: none;
   outline: none;
@@ -17071,9 +17147,6 @@ body.theme-highcontrast .s-btn__github {
   cursor: default;
   user-select: auto;
 }
-.s-btn__unset:focus {
-  color: unset;
-}
 .s-btn__link {
   display: inline;
   padding: 0;
@@ -17089,16 +17162,17 @@ body.theme-highcontrast .s-btn__github {
   cursor: pointer;
   user-select: auto;
 }
+body.theme-highcontrast .s-btn__link {
+  text-decoration: underline;
+}
 .s-btn__link.s-link__visited:visited {
   color: var(--theme-link-color-visited);
-  text-decoration: none;
 }
 .s-btn__link:hover,
 .s-btn__link.s-link__visited:hover,
 .s-btn__link:active,
 .s-btn__link.s-link__visited:active {
   color: var(--theme-link-color-hover);
-  text-decoration: none;
 }
 .s-btn__link.s-link__grayscale {
   color: var(--black-800);
@@ -17147,11 +17221,35 @@ body.theme-highcontrast .s-btn__github {
 .s-btn__link.s-link__underlined {
   text-decoration: underline !important;
 }
+.s-btn__link.s-link__dropdown {
+  position: relative;
+  padding-right: 0.9em;
+}
+.s-btn__link.s-link__dropdown:after {
+  content: "";
+  position: absolute;
+  z-index: 30;
+  top: calc(50% - 2px);
+  right: 0;
+  border-style: solid;
+  border-width: 4px;
+  border-top-width: 4px;
+  border-bottom-width: 0;
+  border-color: currentColor transparent;
+  pointer-events: none;
+}
 .s-btn__link:hover,
 .s-btn__link:active,
 .s-btn__link:focus,
 .s-btn__link[disabled] {
   background: none;
+  box-shadow: none;
+}
+.s-btn__link.s-btn__dropdown {
+  padding-right: 0.9em;
+}
+.s-btn__link.s-btn__dropdown:after {
+  right: 0;
 }
 .s-btn__icon .svg-icon {
   vertical-align: baseline;
@@ -17202,10 +17300,13 @@ a,
   cursor: pointer;
   user-select: auto;
 }
+body.theme-highcontrast a,
+body.theme-highcontrast .s-link {
+  text-decoration: underline;
+}
 a.s-link__visited:visited,
 .s-link.s-link__visited:visited {
   color: var(--theme-link-color-visited);
-  text-decoration: none;
 }
 a:hover,
 .s-link:hover,
@@ -17216,7 +17317,6 @@ a:active,
 a.s-link__visited:active,
 .s-link.s-link__visited:active {
   color: var(--theme-link-color-hover);
-  text-decoration: none;
 }
 a.s-link__grayscale,
 .s-link.s-link__grayscale {
@@ -17288,6 +17388,25 @@ a.s-link__underlined,
 .s-link.s-link__underlined {
   text-decoration: underline !important;
 }
+a.s-link__dropdown,
+.s-link.s-link__dropdown {
+  position: relative;
+  padding-right: 0.9em;
+}
+a.s-link__dropdown:after,
+.s-link.s-link__dropdown:after {
+  content: "";
+  position: absolute;
+  z-index: 30;
+  top: calc(50% - 2px);
+  right: 0;
+  border-style: solid;
+  border-width: 4px;
+  border-top-width: 4px;
+  border-bottom-width: 0;
+  border-color: currentColor transparent;
+  pointer-events: none;
+}
 button.s-link {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -17296,6 +17415,7 @@ button.s-link {
   padding: 0;
   line-height: inherit;
   user-select: auto;
+  font-family: inherit;
 }
 button.s-link:focus {
   outline: none;
@@ -17475,6 +17595,7 @@ button.s-link:focus {
   border-radius: 0;
   text-align: left;
   line-height: inherit;
+  font-family: inherit;
 }
 .s-block-link:hover,
 .s-block-link:active {
@@ -17549,6 +17670,9 @@ a.s-link-preview--title.s-link__visited:visited {
   color: var(--theme-link-color);
   text-decoration: none;
 }
+body.theme-highcontrast a.s-link-preview--title.s-link__visited:visited {
+  text-decoration: underline;
+}
 a.s-link-preview--title:hover,
 a.s-link-preview--title.s-link__visited:hover,
 a.s-link-preview--title:active,
@@ -17556,6 +17680,12 @@ a.s-link-preview--title.s-link__visited:active {
   color: var(--theme-link-color-hover);
   text-decoration: none;
 }
+body.theme-highcontrast a.s-link-preview--title:hover,
+body.theme-highcontrast a.s-link-preview--title.s-link__visited:hover,
+body.theme-highcontrast a.s-link-preview--title:active,
+body.theme-highcontrast a.s-link-preview--title.s-link__visited:active {
+  text-decoration: underline;
+}
 .s-link-preview--details {
   font-size: 12px;
   color: var(--black-500);
@@ -17674,6 +17804,14 @@ body.theme-highcontrast .s-navigation .s-navigation--item:active {
   background: var(--theme-primary-color);
   color: var(--white);
 }
+body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
+  text-decoration: none;
+}
+.s-navigation .s-navigation--item.is-selected:hover,
+.s-navigation .s-navigation--item.is-selected:active {
+  background: var(--theme-primary-600);
+  color: var(--white);
+}
 .s-navigation .s-navigation--item.s-navigation--item__dropdown {
   padding-right: 2em;
 }
@@ -17983,6 +18121,9 @@ body.theme-highcontrast .s-tag {
 body.theme-highcontrast .s-tag .s-tag--dismiss:hover {
   color: var(--white);
 }
+body.theme-highcontrast .s-tag {
+  text-decoration: none;
+}
 .s-tag.is-selected {
   border-color: transparent;
   background-color: var(--powder-300);
@@ -18226,6 +18367,9 @@ body.theme-highcontrast a.s-tag__themed:not(.is-selected):active {
   line-height: 1.92307692;
   color: var(--fc-medium);
 }
+body.theme-highcontrast .s-pagination--item {
+  text-decoration: none;
+}
 .s-pagination--item:hover {
   border-color: var(--bc-darker);
   background-color: var(--black-100);