UX: Fix user-select regressions (#31129)

…and cases that didn't take webkit into account at all.

app/assets/stylesheets/common/base/modal.scss

@@ -123,7 +123,7 @@
   }
 
   &__backdrop {
-    user-select: none;
+    @include user-select(none);
     position: fixed;
     top: 0;
     right: 0;
@@ -150,7 +150,7 @@
 }
 
 .modal-backdrop {
-  user-select: none;
+  @include user-select(none);
   position: fixed;
   top: 0;
   right: 0;

app/assets/stylesheets/common/base/topic-post.scss

@@ -1285,7 +1285,7 @@ a.mention-group {
   @include mention;
 
   .user-status-message {
-    user-select: none;
+    @include user-select(none);
   }
 }
 

app/assets/stylesheets/common/foundation/mixins.scss

@@ -124,6 +124,7 @@ $hpad: 0.65em;
 // Unselectable (avoids unwanted selections with iPad, touch laptops, etc)
 
 @mixin user-select($mode) {
+  -webkit-user-select: $mode;
   user-select: $mode;
 }
 

app/assets/stylesheets/common/table-builder/table-edit-decorator.scss

@@ -1,6 +1,6 @@
 .btn-edit-table {
   -webkit-touch-callout: none;
-  user-select: none;
+  @include user-select(none);
 }
 
 .fullscreen-table-wrapper:hover .fullscreen-table-wrapper__buttons button {

app/assets/stylesheets/wizard.scss

@@ -253,7 +253,7 @@ body.wizard {
     background: var(--secondary);
     border-radius: 10px;
     cursor: grab;
-    user-select: none;
+    @include user-select(none);
 
     &.dragging {
       cursor: grabbing;

plugins/chat/assets/stylesheets/mixins/chat-reaction.scss

@@ -8,7 +8,7 @@
   border: 1px solid var(--primary-300);
   background: transparent;
   cursor: pointer;
-  user-select: none;
+  @include user-select(none);
   transition: background 0.2s, border-color 0.2s;
 
   &.reacted {

plugins/footnote/assets/stylesheets/footnotes.scss

@@ -1,6 +1,6 @@
 .inline-footnotes {
   a.expand-footnote {
-    user-select: none;
+    @include user-select(none);
     padding: 0 0.5em;
     margin: 0 0 0 0.25em;
     color: var(--primary-low-mid-or-secondary-high);

stylelint.config.mjs

@@ -11,7 +11,10 @@ export default {
     "no-invalid-double-slash-comments": true,
     "no-empty-source": true,
     "at-rule-empty-line-before": null,
-    "rule-empty-line-before": ["always", {except: ["after-single-line-comment", "first-nested"]}],
+    "rule-empty-line-before": [
+      "always",
+      { except: ["after-single-line-comment", "first-nested"] },
+    ],
     "selector-class-pattern": null,
     "custom-property-pattern": null,
     "declaration-empty-line-before": "never",
@@ -40,5 +43,11 @@ export default {
     "function-linear-gradient-no-nonstandard-direction": null,
     "scss/at-mixin-pattern": null,
     "media-feature-range-notation": "prefix",
+    "property-no-vendor-prefix": [
+      true,
+      {
+        ignoreProperties: ["user-select"],
+      },
+    ],
   },
 };