@stackoverflow/stacks 0.71.0 → 0.74.0

package/lib/css/atomic/_stacks-typography.less

@@ -194,11 +194,6 @@ p {
 .wb-unset { word-break: unset !important; }
 
 //  --  Overflow Wrap
-//      This property will create a line break only if an entire word cannot be
-//      placed on its own line without overflowing. This was formerly called
-//      word-wrap, which was an unprefixed Microsoft vendor property implemented
-//      by most browsers. Word-wrap is still a supported alias, but can be removed
-//      once we no longer support IE11.
 .ow-normal {
     overflow-wrap: normal !important;
     word-wrap: normal !important;
@@ -224,8 +219,6 @@ p {
     word-wrap: unset !important;
 }
 
-.ww-break-word { word-wrap: break-word !important; }
-
 //  --  Hyphenation
 .hyphens-none { hyphens: none !important; }
 .hyphens-auto {
@@ -235,9 +228,34 @@ p {
 }
 .hyphens-unset { hyphens: unset !important; }
 
+//  --  Break word
+.break-word {
+    word-break: break-word !important;
+    word-wrap: break-word !important;
+    overflow-wrap: break-word !important;
+    -webkit-hyphens: auto !important;
+    -moz-hyphens: auto !important;
+    -ms-hyphens: auto !important;
+    hyphens: auto !important;
+}
+
 //  ============================================================================
 //  $   LISTS
 //  ----------------------------------------------------------------------------
+ul,
+ol {
+    padding: 0;
+    margin-left: 2.8em;
+
+    ul,
+    ol {
+        margin-bottom: 0;
+    }
+}
+
+ul { list-style-type: disc; }
+ol { list-style-type: decimal; }
+
 .list-reset {
     list-style: none;
     margin: 0;

package/lib/css/base/_stacks-configuration-dynamic.less

@@ -74,22 +74,12 @@
 
     // DEPRECATED will be removed in a future release
     //  Tags
-    @tags-border:                                    transparent;
-    @tags-background:                                var(--powder-100);
-    @tags-color:                                     var(--powder-700);
-    @tags-hover-border:                              transparent;
-    @tags-hover-background:                          var(--powder-200);
-    @tags-hover-color:                               var(--powder-800);
-    @tags-selected-border:                           transparent;
-    @tags-selected-background:                       var(--powder-300);
-    @tags-selected-color:                            var(--powder-900);
-
-    @tags-moderator-border:                          var(--red-100);
+    @tags-moderator-border:                          var(--red-200);
     @tags-moderator-background:                      var(--red-050);
-    @tags-moderator-color:                           var(--red-600);
-    @tags-moderator-hover-border:                    var(--red-200);
+    @tags-moderator-color:                           var(--red-800);
+    @tags-moderator-hover-border:                    var(--red-300);
     @tags-moderator-hover-background:                var(--red-100);
-    @tags-moderator-hover-color:                     var(--red-700);
+    @tags-moderator-hover-color:                     var(--red-900);
     @tags-moderator-selected-border:                 var(--red-400);
     @tags-moderator-selected-background:             var(--red-200);
     @tags-moderator-selected-color:                  var(--red-800);

package/lib/css/components/_stacks-activity-indicator.less

@@ -13,9 +13,33 @@
 
 .s-activity-indicator {
     display: inline-block;
-    width: @su12;
+    min-width: @su12;
     height: @su12;
+    padding-left: @su4;
+    padding-right: @su4;
+    line-height: 1.1; // Custom line-height to satisfy 1x screens
     background-color: var(--theme-secondary-400);
     box-shadow: 0 0 0 @su4 var(--focus-ring);
-    border-radius: 100%;
+    border-radius: 1000px;
+    font-size: @fs-fine;
+    font-weight: 600;
+    color: @white;
+    text-transform: uppercase;
+
+    .highcontrast-mode({ color: var(--white); });
+}
+
+.s-activity-indicator__success {
+    background-color: var(--green-500);
+    box-shadow: 0 0 0 @su4 var(--focus-ring-success);
+}
+
+.s-activity-indicator__warning {
+    background-color: var(--yellow-600);
+    box-shadow: 0 0 0 @su4 var(--focus-ring-warning);
+}
+
+.s-activity-indicator__danger {
+    background-color: var(--red-500);
+    box-shadow: 0 0 0 @su4 var(--focus-ring-error);
 }

package/lib/css/components/_stacks-badges.less

@@ -20,10 +20,6 @@
     border-color: @border;
     background-color: @background;
     color: @color;
-
-    .s-tag--dismiss {
-        background-color: transparent;
-    }
 }
 
 //  ===========================================================================
@@ -171,6 +167,7 @@
         margin-top: 0;
     }
 }
+
 .s-badge__staff {
     // Staff badges are always "Stack Overflow Orange"
     .badge-styles(var(--orange-300), var(--orange-100), var(--orange-900));

package/lib/css/components/_stacks-buttons.less

@@ -34,7 +34,13 @@
         cursor: pointer;
         user-select: none;
 
-        .highcontrast-mode({ border-color: currentColor; });
+        .highcontrast-mode({
+            border-color: currentColor;
+
+            &:not(.s-btn__link):not(.s-btn__unset) {
+                text-decoration: none;
+            }
+        });
 
         button &,
         button[type="submit"] &,
@@ -206,6 +212,12 @@
             box-shadow: none;
         }
 
+        &:focus {
+            .highcontrast-mode({
+                box-shadow: 0 0 0 @su4 var(--focus-ring);
+            });
+        }
+
         &.is-selected {
             color: var(--theme-button-filled-selected-color);
             background-color: var(--theme-button-filled-selected-background-color);
@@ -293,6 +305,7 @@
 
             &:focus {
                 box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+                .highcontrast-mode({ box-shadow: 0 0 0 @su4 var(--focus-ring-muted); });
             }
 
             &.is-selected {
@@ -341,6 +354,7 @@
 
         &:focus {
             box-shadow: 0 0 0 @su4 var(--focus-ring-error);
+            .highcontrast-mode({ box-shadow: 0 0 0 @su4 var(--focus-ring-error); });
         }
 
         &.is-selected {
@@ -373,6 +387,10 @@
             .highcontrast-mode({
                 color: var(--white);
 
+                &:focus {
+                    box-shadow: 0 0 0 @su4 var(--focus-ring-error);
+                }
+
                 .s-btn--number {
                     color: var(--black);
                 }
@@ -437,7 +455,6 @@
             }
         });
 
-
         &:hover,
         &:focus,
         &:active {
@@ -450,6 +467,12 @@
             box-shadow: none;
         }
 
+        &:focus {
+            .highcontrast-mode({
+                box-shadow: 0 0 0 @su4 var(--focus-ring);
+            });
+        }
+
         &.is-selected {
             color: var(--theme-button-primary-selected-color);
             background-color: var(--theme-button-primary-selected-background-color);
@@ -476,10 +499,13 @@
         }
 
         &:active {
-            border-color: var(--bc-darkest);
             background-color: var(--black-050);
             color: var(--black-900);
         }
+
+        &:focus {
+            box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+        }
     }
 
     .s-btn__facebook {
@@ -517,11 +543,16 @@
             background-color: var(--black-900);
             color: var(--white);
         }
+
+        &:focus {
+            box-shadow: 0 0 0 @su4 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;
@@ -534,10 +565,6 @@
         user-select: auto;
     }
 
-    .s-btn__unset:focus {
-        color: unset;
-    }
-
     .s-btn__link {
         display: inline;
         padding: 0;
@@ -556,6 +583,15 @@
         &:focus,
         &[disabled] {
             background: none;
+            box-shadow: none;
+        }
+
+        &.s-btn__dropdown {
+            padding-right: 0.9em;
+
+            &:after {
+                right: 0;
+            }
         }
     }
 

package/lib/css/components/_stacks-cards.less

@@ -24,17 +24,6 @@
     }
 }
 
-//  ============================================================================
-//  $   LINKED CARDS
-//  ----------------------------------------------------------------------------
-a.s-card:not(.s-card__muted) {
-    &:hover,
-    &:focus,
-    &:active {
-        border-color: var(--bc-darker);
-    }
-}
-
 //  ============================================================================
 //  $   MODIFIERS
 //  ----------------------------------------------------------------------------
@@ -46,3 +35,10 @@ a.s-card:not(.s-card__muted) {
         opacity: 0.65;
     }
 }
+
+//  ============================================================================
+//  $   LINKED CARDS
+//  ----------------------------------------------------------------------------
+a.s-card {
+    text-decoration: none !important;
+}

package/lib/css/components/_stacks-inputs.less

@@ -181,6 +181,10 @@ fieldset {
     &.s-label--status__required {
         background-color: var(--red-100);
         color: var(--red-600);
+
+        .dark-mode({
+            color: var(--red-800);
+        });
     }
 
     &.s-label--status__new {
@@ -378,6 +382,11 @@ fieldset {
             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");
 
+            .highcontrast-dark-mode({
+                border-color: var(--blue-700) !important;
+                background-color: var(--blue-300);
+            });
+
             &:focus {
                 border-color: var(--theme-secondary-400);
             }
@@ -400,6 +409,11 @@ fieldset {
             border-color: var(--theme-secondary-400);
             border-width: 0.30769231em;
             background-color: @white; // This should always be white regardless of dark mode
+
+            .highcontrast-dark-mode({
+                border-color: var(--blue-300);
+                outline: 1px solid var(--black);
+            });
         }
 
         &:focus {
@@ -680,6 +694,11 @@ fieldset {
     border-radius: @br-sm + 1;
 }
 
+.s-textarea__md {
+    padding-top: 0.72em;
+    padding-bottom: 0.72em;
+}
+
 .s-input__lg,
 .s-textarea__lg,
 .s-select__lg > select {

package/lib/css/components/_stacks-link-previews.less

@@ -44,6 +44,8 @@ a.s-link-preview--title {
     &.s-link__visited:visited {
         color: var(--theme-link-color);
         text-decoration: none;
+
+        .highcontrast-mode({ text-decoration: underline; });
     }
 
     &:hover,
@@ -52,6 +54,8 @@ a.s-link-preview--title {
     &.s-link__visited:active {
         color: var(--theme-link-color-hover);
         text-decoration: none;
+
+        .highcontrast-mode({ text-decoration: underline; });
     }
 }
 

package/lib/css/components/_stacks-links.less

@@ -21,9 +21,12 @@ a,
     cursor: pointer;
     user-select: auto;
 
+    .highcontrast-mode({
+        text-decoration: underline;
+    });
+
     &.s-link__visited:visited {
         color: var(--theme-link-color-visited);
-        text-decoration: none;
     }
 
     &:hover,
@@ -31,7 +34,6 @@ a,
     &:active,
     &.s-link__visited:active {
         color: var(--theme-link-color-hover);
-        text-decoration: none;
     }
 
     &.s-link__grayscale {
@@ -92,6 +94,25 @@ a,
     &.s-link__underlined {
         text-decoration: underline !important;
     }
+
+    &.s-link__dropdown {
+        position: relative;
+        padding-right: 0.9em;
+
+        &:after {
+            content: "";
+            position: absolute;
+            z-index: @zi-active;
+            top: calc(50% - 2px);
+            right: 0;
+            border-style: solid;
+            border-width: @su4;
+            border-top-width: @su4;
+            border-bottom-width: 0;
+            border-color: currentColor transparent;
+            pointer-events: none;
+        }
+    }
 }
 
 button.s-link {
@@ -102,6 +123,7 @@ button.s-link {
     padding: 0;
     line-height: inherit;
     user-select: auto;
+    font-family: inherit;
 
     &:focus {
         outline: none;
@@ -158,6 +180,7 @@ button.s-link {
     border-radius: 0;
     text-align: left;
     line-height: inherit;
+    font-family: inherit;
 
     &:hover,
     &:active {

package/lib/css/components/_stacks-navigation.less

@@ -56,6 +56,14 @@
         &.is-selected {
             background: var(--theme-primary-color);
             color: var(--white);
+
+            &:hover,
+            &:active {
+                background: var(--theme-primary-600);
+                color: var(--white);
+            }
+
+            .highcontrast-mode({ text-decoration: none; });
         }
 
         &.s-navigation--item__dropdown {

package/lib/css/components/_stacks-pagination.less

@@ -30,6 +30,8 @@
     line-height: @lh-xl;
     color: var(--fc-medium);
 
+    .highcontrast-mode({ text-decoration: none; });
+
     &:hover {
         border-color: var(--bc-darker);
         background-color: var(--black-100);

package/lib/css/components/_stacks-popovers.less

@@ -30,6 +30,10 @@
     min-width: 12rem;
     width: 100%;
 
+    // Guard against popovers being in a container with white-space: nowrap
+    // Without this, the content pops *out* of the popover.
+    white-space: normal; 
+
     .dark-mode({
         background-color: var(--black-075);
         border-color: var(--bc-light);

package/lib/css/components/_stacks-post-summary.less

@@ -19,12 +19,10 @@
 
     #stacks-internals #screen-md({
         flex-direction: column;
-        align-items: flex-start;
     });
 
     &.s-post-summary__minimal {
         flex-direction: column;
-        align-items: flex-start;
 
         .s-post-summary--stats {
             width: auto;
@@ -54,34 +52,52 @@
     --s-post-summary-stats-gap: @su6; // Replace with gap property as soon as browser support makes sense.
     margin-right: @su8;
     margin-bottom: -@su2;
-    width: @su96;
+    width: @su96 + @su12;
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
     flex-wrap: wrap;
     align-items: flex-end;
-    font-size: @fs-caption;
+    font-size: @fs-body1;
     color: var(--fc-light);
 
     .s-post-summary--stats-item {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
         margin-right: var(--s-post-summary-stats-gap);
         margin-bottom: var(--s-post-summary-stats-gap);
         white-space: nowrap;
         border: 1px solid transparent;
 
+        .svg-icon {
+            margin-right: @su4;
+        }
+
+        &.s-post-summary--stats-item__emphasized {
+            color: var(--fc-dark);
+        }
+
         &.has-answers,
-        &.has-bounty {
+        &.has-bounty,
+        &.is-deleted,
+        &.is-published,
+        &.is-draft,
+        &.is-review,
+        &.is-closed,
+        &.is-archived {
             border-radius: @br-sm;
             padding: @su2 @su4;
         }
 
         &.has-answers {
-            color: var(--green-500);
-            border: 1px solid var(--green-500);
+            color: var(--green-600);
+            border: 1px solid var(--green-600);
 
             &.has-accepted-answer {
                 color: @white;
                 background-color: var(--green-500);
+                border-color: var(--green-500);
 
                 .highcontrast-mode({
                     color: var(--white);
@@ -105,6 +121,35 @@
         &.is-supernova {
             color: var(--orange-400);
         }
+
+        &.is-published {
+            color: var(--black-800);
+            background-color: var(--black-050);
+        }
+
+        &.is-draft {
+            color: var(--blue-900);
+            background-color: var(--blue-100);
+            border-color: var(--blue-600);
+        }
+
+        &.is-review {
+            color: var(--yellow-900);
+            background-color: var(--yellow-100);
+            border-color: var(--yellow-600);
+        }
+
+        &.is-closed {
+            color: var(--red-900);
+            background-color: var(--red-100);
+            border-color: var(--red-600);
+        }
+
+        &.is-archived {
+            color: var(--black-900);
+            background-color: var(--black-100);
+            border-color: var(--black-600);
+        }
     }
 
     #stacks-internals #screen-md({
@@ -119,8 +164,9 @@
     max-width: 100%;
 
     .s-post-summary--content-title {
-        display: inline-block;
-        font-size: @fs-subheading;
+        display: block;
+        font-size: @fs-body3;
+        margin-top: -0.15rem; // Optical alignment to compensate for title's containing block
         margin-bottom: @su6;
         overflow-wrap: break-word;
         word-wrap: break-word;
@@ -141,7 +187,7 @@
 
     .s-post-summary--content-type {
         color: var(--fc-medium);
-        margin-bottom: @su2;
+        margin-bottom: @su4;
 
         .svg-icon {
             margin-left: -@su2;
@@ -152,7 +198,20 @@
     .s-post-summary--content-excerpt {
         margin-top: -@su2;
         margin-bottom: @su8;
+        color: var(--fc-medium);
         .v-truncate2;
+
+        &.s-post-summary--content-excerpt__sm {
+            .v-truncate1;
+        }
+
+        &.s-post-summary--content-excerpt__md {
+            .v-truncate3;
+        }
+
+        &.s-post-summary--content-excerpt__lg {
+            .v-truncate4;
+        }
     }
 }
 
@@ -180,5 +239,92 @@
         flex-wrap: wrap;
         margin-bottom: var(--s-post-summary-tags-gap);
         margin-left: auto;
+        justify-content: flex-end;
+    }
+}
+
+.s-post-summary--answer {
+    position: relative;
+    margin: @su16 1em 0 1em;
+    padding: 0.5em 0 0.5em calc(1em + @su4);
+
+    + .s-post-summary--answer {
+        margin-top: @su16;
+    }
+
+    &:before {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: @su4;
+        border-radius: @su8;
+        background: var(--black-150);
+
+        .highcontrast-mode({
+            background: var(--black-600);
+        });
+    }
+
+    .s-post-summary--stats {
+        width: auto;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: @su4;
+    }
+
+    .s-post-summary--answer-excerpt {
+        color: var(--black-600);
+        margin-bottom: @su8;
+        .v-truncate4;
+    }
+}
+
+.s-post-summary__watched {
+    background-color: var(--yellow-050);
+}
+
+.s-post-summary__deleted {
+    background-color: var(--red-050);
+
+    .is-deleted {
+        color: @white;
+        background-color: var(--red-500);
+    }
+}
+
+.s-post-summary__ignored,
+.s-post-summary__deleted {
+    .s-post-summary--content {
+        opacity: 0.6;
+    }
+
+    .s-post-summary--stats-item:not(.is-deleted) {
+        opacity: 0.6;
+        filter: grayscale(100%);
+    }
+
+    .s-post-summary--content-title {
+        &, & .s-link {
+            color: var(--black-600);
+
+            &:hover {
+                color: var(--black-500);
+            }
+
+            &:visited {
+                color: var(--black-700);
+            }
+        }
+    }
+
+    .s-post-summary--content-excerpt {
+        color: var(--black-500);
+    }
+
+    .s-post-summary--meta {
+        filter: grayscale(100%);
     }
 }