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

package/dist/css/stacks.css

@@ -1412,6 +1412,7 @@ body.theme-highcontrast .s-btn.s-btn__danger.s-btn__clear {
   --_bu-bg: var(--black-150);
   --_bu-bg-disabled: var(--black-100);
   --_bu-bg-hover: var(--black-200);
+  --_bu-bg-selected: var(--black-200);
   --_bu-fc: var(--black);
   --_bu-fc-disabled: var(--black-300);
   --_bu-fc-selected: var(--_bu-fc);
@@ -1591,8 +1592,8 @@ p .s-btn.s-btn__link {
 .s-btn--radio:checked + .s-btn {
   --_bu-bg-selected-overlay-o: 20%;
   --_bu-bg-selected-overlay: color-mix(in srgb, var(--_bu-bg-selected, var(--_bu-bg)), var(--white) var(--_bu-bg-selected-overlay-o));
-  --_bu-bg-gradient-top: var(--_bu-bg-selected, var(--_bu-bg));
-  --_bu-bg-gradient-bottom: var(--_bu-bg-selected-overlay, var(--_bu-bg));
+  --_bu-bg-gradient-top: var(--_bu-bg-selected-overlay, var(--_bu-bg));
+  --_bu-bg-gradient-bottom: var(--_bu-bg-selected, var(--_bu-bg));
   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;
   color: var(--_bu-fc-selected, var(--_bu-fc));
 }
@@ -5020,285 +5021,122 @@ body.theme-highcontrast .is-readonly .s-select > select {
   right: var(--su32);
 }
 .s-sidebarwidget {
-  --_sw-bc: var(--bc-medium);
-  background-color: var(--white);
-  border: var(--su-static1) solid var(--_sw-bc);
-  border-radius: var(--br-md);
   font-size: var(--fs-body1);
 }
-.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),
-.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 {
-  color: var(--black-600);
-}
-.s-sidebarwidget.s-sidebarwidget__blue {
-  --_sw-bc: var(--blue-300);
-  background-color: var(--blue-100);
-  border-color: var(--_sw-bc);
-}
-body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__blue {
-  --_sw-bc: var(--blue-500);
-}
-.s-sidebarwidget.s-sidebarwidget__blue:after,
-.s-sidebarwidget.s-sidebarwidget__blue .s-sidebarwidget--content + .s-sidebarwidget--content,
-.s-sidebarwidget.s-sidebarwidget__blue .s-sidebarwidget--header {
-  border-color: var(--_sw-bc);
-}
-.s-sidebarwidget.s-sidebarwidget__blue .s-sidebarwidget--header {
-  color: var(--fc-medium);
-}
-.s-sidebarwidget.s-sidebarwidget__yellow {
-  --_sw-bc: var(--yellow-300);
-  background-color: var(--yellow-100);
-  border-color: var(--_sw-bc);
-}
-body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__yellow {
-  --_sw-bc: var(--yellow-500);
-}
-.s-sidebarwidget.s-sidebarwidget__yellow:after,
-.s-sidebarwidget.s-sidebarwidget__yellow .s-sidebarwidget--content + .s-sidebarwidget--content,
-.s-sidebarwidget.s-sidebarwidget__yellow .s-sidebarwidget--header {
-  border-color: var(--_sw-bc);
-}
-.s-sidebarwidget.s-sidebarwidget__yellow .s-sidebarwidget--header {
-  color: var(--fc-medium);
-}
-.s-sidebarwidget.s-sidebarwidget__green {
-  --_sw-bc: var(--green-300);
-  background-color: var(--green-100);
-  border-color: var(--_sw-bc);
-}
-body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
-  --_sw-bc: var(--green-500);
-}
-.s-sidebarwidget.s-sidebarwidget__green:after,
-.s-sidebarwidget.s-sidebarwidget__green .s-sidebarwidget--content + .s-sidebarwidget--content,
-.s-sidebarwidget.s-sidebarwidget__green .s-sidebarwidget--header {
-  border-color: var(--_sw-bc);
-}
-.s-sidebarwidget.s-sidebarwidget__green .s-sidebarwidget--header {
-  color: var(--fc-medium);
-}
-.s-sidebarwidget .s-sidebarwidget--action {
-  color: var(--blue-400);
-  font-size: var(--fs-body1);
-  font-weight: normal;
-  margin-left: auto;
-}
 .s-sidebarwidget .s-sidebarwidget--content {
-  margin: 0;
-  padding: var(--su16);
-}
-.s-sidebarwidget .s-sidebarwidget--content:not(table):not(.s-sidebarwidget__items),
-.s-sidebarwidget .s-sidebarwidget--content:not(table):not(.s-sidebarwidget__block-items) .s-sidebarwidget--item {
   display: flex;
+  padding: var(--su12) 0 var(--su16) 0;
+  font-size: var(--fs-body2);
 }
-.s-sidebarwidget .s-sidebarwidget--content + .s-sidebarwidget--content {
-  border-top: var(--su-static1) solid var(--bc-light);
-}
-.s-sidebarwidget .s-sidebarwidget--content.s-sidebarwidget__items {
-  padding: var(--su6) var(--su16);
-}
-.s-sidebarwidget .s-sidebarwidget--content.s-sidebarwidget__items,
-.s-sidebarwidget .s-sidebarwidget--content.s-sidebarwidget__items.s-sidebarwidget__block-items .s-sidebarwidget--item {
-  display: block;
-}
-.s-sidebarwidget .s-sidebarwidget--content:active {
-  outline: none;
+.s-sidebarwidget .s-sidebarwidget--content .s-sidebarwidget--action {
+  font-size: var(--fs-fine);
+  margin-left: var(--su16);
+  align-self: flex-start;
 }
 .s-sidebarwidget .s-sidebarwidget--header {
   align-items: center;
-  border-top: var(--su-static1) solid var(--bc-light);
-  color: var(--black-600);
   display: flex;
-  font-size: var(--fs-body2);
-  font-weight: bold;
-  justify-content: flex-start;
-  line-height: var(--lh-xs);
+  padding: var(--su4) 0;
+}
+.s-sidebarwidget .s-sidebarwidget--header > h1,
+.s-sidebarwidget .s-sidebarwidget--header h2,
+.s-sidebarwidget .s-sidebarwidget--header h3,
+.s-sidebarwidget .s-sidebarwidget--header h4,
+.s-sidebarwidget .s-sidebarwidget--header h5,
+.s-sidebarwidget .s-sidebarwidget--header h6 {
   margin: 0;
-  padding: var(--su16) var(--su16) 0;
-}
-.s-sidebarwidget .s-sidebarwidget--header:first-child {
-  border-top: none;
-}
-.s-sidebarwidget .s-sidebarwidget--header + .s-expandable:not(.is-expanded) {
-  margin-bottom: var(--su16);
-}
-.s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__expanding-control {
-  cursor: pointer;
-}
-.s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__expanding-control:before {
-  border: calc(var(--su-static4) + var(--su-static1)) solid transparent;
-  border-left-color: var(--black-400);
-  border-right-width: 0;
-  content: '';
-  float: left;
-  margin-right: var(--su12);
-  margin-top: calc(calc(var(--lh-base) * 1em) / 2 - 5px);
-  transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
-}
-.s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__expanding-control[aria-expanded='true']:before {
-  transform: rotate(90deg);
-}
-.s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__small-bold-text {
-  font-size: var(--fs-caption);
-  font-weight: bold;
-}
-.s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__small-bold-text .s-sidebarwidget--action {
-  font-weight: normal;
-  line-height: calc(var(--lh-base) * var(--fs-caption));
-}
-.s-sidebarwidget .s-sidebarwidget--header:active {
-  outline: none;
-}
-.s-sidebarwidget .s-sidebarwidget--item {
-  margin: var(--su12) 0;
-}
-.s-sidebarwidget .s-sidebarwidget--item[aria-current="true"],
-.s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="true"],
-.s-sidebarwidget .s-sidebarwidget--item[aria-current="page"],
-.s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="page"] {
-  color: var(--black);
-  font-weight: bold;
-  position: relative;
-}
-.s-sidebarwidget .s-sidebarwidget--item[aria-current="true"]:before,
-.s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="true"]:before,
-.s-sidebarwidget .s-sidebarwidget--item[aria-current="page"]:before,
-.s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="page"]:before {
-  border-left-color: var(--theme-primary);
-  border-left-style: solid;
-  border-left-width: calc(var(--su-static1) * 3);
-  content: '';
-  height: calc(100% + var(--su16));
-  left: 0;
-  margin-left: var(--sun16);
-  margin-top: var(--sun8);
-  position: absolute;
-}
-.s-sidebarwidget .s-sidebarwidget--item[aria-current="true"] a,
-.s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="true"] a,
-.s-sidebarwidget .s-sidebarwidget--item[aria-current="page"] a,
-.s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="page"] a,
-.s-sidebarwidget .s-sidebarwidget--item[aria-current="true"] a:visited,
-.s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="true"] a:visited,
-.s-sidebarwidget .s-sidebarwidget--item[aria-current="page"] a:visited,
-.s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="page"] a:visited {
-  color: inherit;
-}
-.s-sidebarwidget .s-sidebarwidget--subnav {
-  list-style-type: none;
-  margin-left: var(--su8);
-  padding-left: 0;
-}
-.s-sidebarwidget .s-sidebarwidget--subnav li {
-  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");
-  background-position: 0 calc((1.2em - calc(var(--su-static8) + var(--su-static2))) / 2);
-  background-repeat: no-repeat;
-  background-size: auto calc(var(--su-static8) + var(--su-static2));
-  margin-top: var(--su-static12);
-  padding-left: var(--su-static16);
-}
-.s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="page"],
-.s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="true"] {
-  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");
-  color: var(--black);
-  font-weight: bold;
-}
-.s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="page"] a,
-.s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="true"] a,
-.s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="page"] a:visited,
-.s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="true"] a:visited {
-  color: inherit;
-}
-.s-sidebarwidget table.s-sidebarwidget--content.s-sidebarwidget__items {
-  border-collapse: separate;
-  border-spacing: var(--su16) var(--su12);
-  padding: var(--su6) 0 0;
-}
-.s-sidebarwidget table.s-sidebarwidget--content.s-sidebarwidget__items tr.s-sidebarwidget--item {
-  display: table-row;
-}
-.s-sidebarwidget table.s-sidebarwidget--content.s-sidebarwidget__items tr.s-sidebarwidget--item td {
-  padding: 0;
+  padding-right: var(--su6);
+  font-size: var(--fs-body1);
+  font-weight: 500;
 }
-.s-spinner {
-  --_sp-baw: calc(var(--su-static1) * 3);
-  --_sp-size: var(--su-static24);
-  height: var(--_sp-size);
-  width: var(--_sp-size);
-  position: relative;
-  text-align: left;
+.s-sidebarwidget .s-sidebarwidget--header .s-sidebarwidget--action {
+  margin-left: auto;
 }
-.s-spinner.s-spinner__xs {
-  --_sp-baw: var(--su-static1);
-  --_sp-size: var(--su-static12);
+.s-sidebarwidget .s-sidebarwidget--footer {
+  display: flex;
+  font-size: var(--fs-body2);
 }
-.s-spinner.s-spinner__sm {
-  --_sp-baw: var(--su-static2);
-  --_sp-size: var(--su-static16);
+.s-sidebarwidget .s-sidebarwidget--footer .s-sidebarwidget--action {
+  flex: 1;
 }
-.s-spinner.s-spinner__md {
-  --_sp-baw: var(--su-static4);
-  --_sp-size: var(--su-static32);
+.s-sidebarwidget .s-sidebarwidget--action:is(a, button) {
+  white-space: nowrap;
 }
-.s-spinner.s-spinner__lg {
-  --_sp-baw: var(--su-static6);
-  --_sp-size: var(--su-static48);
+.s-loader {
+  --_ld-color: var(--black-600);
+  --_ld-gap: calc(var(--_ld-size) / 2);
+  --_ld-size: calc(var(--su4) + var(--su1));
+  --_ld-offset: calc(calc(var(--_ld-size) / 8) * -5);
+  display: flex;
+  gap: var(--_ld-gap);
+  margin-top: var(--_ld-gap);
 }
-.s-spinner:after,
-.s-spinner:before {
-  border: var(--_sp-baw) solid currentColor;
-  border-radius: var(--br-circle);
-  content: '';
-  height: 100%;
-  position: absolute;
-  width: 100%;
+.s-loader__sm {
+  --_ld-size: calc(calc(var(--su8) - var(--su1)) / 2);
+  margin-left: var(--su1);
+  margin-right: var(--su1);
 }
-.s-spinner:after {
-  border-top-color: transparent;
-  border-right-color: transparent;
-  border-bottom-color: transparent;
-  animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
+.s-loader__lg {
+  --_ld-size: var(--su8);
 }
-.s-spinner:before {
-  opacity: 0.25;
-  transform: rotate(90deg);
+.s-loader:before,
+.s-loader .s-loader--sr-text:before,
+.s-loader:after {
+  background-color: currentColor;
+  content: "";
+  display: block;
+  height: var(--_ld-size);
+  width: var(--_ld-size);
+  animation: loader-animation 0.8s cubic-bezier(1, 1, 0, 1) infinite;
 }
-.is-loading {
-  --_li-offset: 0.6em;
-  --_il-size: 1.23076923em;
-  padding-left: 2.2em;
-  position: relative;
+.s-loader .s-loader--sr-text {
+  display: block;
+  flex-shrink: 0;
+  height: var(--_ld-size);
+  width: var(--_ld-size);
+  font-size: 0;
+  overflow: visible;
 }
-.is-loading:after,
-.is-loading:before {
-  border-radius: var(--br-circle);
-  border-style: solid;
-  border-width: var(--su-static2);
-  content: "";
-  height: var(--_il-size);
-  left: var(--_li-offset);
-  position: absolute;
-  top: calc(50% - var(--_li-offset));
-  width: var(--_il-size);
+.s-loader .s-loader--sr-text:before {
+  animation-delay: 0.25s;
 }
-.is-loading:after {
-  animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
-  border-color: transparent;
-  border-left-color: currentColor;
-  filter: invert(0);
-  transform-origin: 50% 50% var(--su-static1);
+.s-loader:after {
+  animation-delay: 0.5s;
 }
-.is-loading:before {
-  border-color: currentColor;
-  opacity: 0.3;
+@media (prefers-reduced-motion: reduce) {
+  .s-loader:before,
+  .s-loader .s-loader--sr-text:before,
+  .s-loader:after {
+    animation: loader-animation-reduced-motion 2s ease-in-out infinite;
+  }
 }
-@keyframes s-spinner-rotate {
-  from {
-    transform: rotate(0deg);
+@keyframes loader-animation {
+  0%,
+  1%,
+  99%,
+  to {
+    opacity: 0.2;
+    transform: translateY(0);
   }
+  49%,
+  50% {
+    opacity: 1;
+    transform: translateY(var(--_ld-offset));
+  }
+  51% {
+    opacity: 0.2;
+    transform: translateY(var(--_ld-offset));
+  }
+}
+@keyframes loader-animation-reduced-motion {
+  0%,
   to {
-    transform: rotate(360deg);
+    opacity: 0.3;
+    transform: none;
+  }
+  50% {
+    opacity: 1;
+    transform: none;
   }
 }
 .s-table {