Disallow selecting the text of buttons (#19330)

Introduce a CSS class `.unselectable`

Author: delvh

web_src/less/_base.less

@@ -255,6 +255,16 @@ a.commit-statuses-trigger {
   text-decoration: none !important;
 }
 
+.unselectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.button {
+  &:extend(.unselectable);
+}
+
 .ui.breadcrumb a:hover {
   text-decoration: underline !important;
 }
@@ -810,7 +820,6 @@ a.ui.card:hover,
     float: right;
   }
 
-  &.button,
   &.menu .item {
     user-select: auto;
   }
@@ -1526,12 +1535,12 @@ a.ui.label:hover {
 }
 
 .lines-num {
+  &:extend(.unselectable);
   padding-left: 10px;
   padding-right: 10px;
   text-align: right !important;
   color: rgba(27, 31, 35, .3);
   width: 1%;
-  user-select: none;
   font-family: var(--fonts-monospace);
 
   span {
@@ -1616,21 +1625,18 @@ a.ui.label:hover {
 }
 
 .lines-commit {
+  &:extend(.unselectable);
   vertical-align: top;
   color: #999999;
   padding: 0 !important;
   background: var(--color-code-sidebar-bg);
   width: 1%;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
 
   .blame-info {
+    &:extend(.unselectable);
     width: 350px;
     max-width: 350px;
     display: block;
-    user-select: none;
     padding: 0 0 0 10px;
     line-height: 20px;
     box-sizing: content-box;
@@ -2159,9 +2165,9 @@ table th[data-sortt-desc] {
 }
 
 .ellipsis-button {
+  &:extend(.unselectable);
   padding: 0 5px 8px !important;
   display: inline-block !important;
-  user-select: none !important;
   font-weight: 600 !important;
   line-height: 6px !important;
   vertical-align: middle !important;

web_src/less/_repository.less

@@ -1583,6 +1583,7 @@
     }
 
     .line-num {
+      &:extend(.unselectable);
       width: 1%;
       min-width: 50px;
       font-family: monospace;
@@ -1591,7 +1592,6 @@
       white-space: nowrap;
       vertical-align: top;
       cursor: pointer;
-      user-select: none;
       text-align: right;
       background: var(--color-body);
       border: 0;
@@ -1727,11 +1727,11 @@
       background: var(--color-code-bg);
 
       .lines-num {
+        &:extend(.unselectable);
         text-align: right;
         color: var(--color-text-light);
         width: 1%;
         min-width: 50px;
-        user-select: none;
 
         span.fold {
           display: block;
@@ -1774,9 +1774,9 @@
           }
 
           .lines-type-marker {
+            &:extend(.unselectable);
             width: 10px;
             min-width: 10px;
-            user-select: none;
           }
 
           [data-type-marker]::before {
@@ -2450,13 +2450,13 @@
     }
 
     .segment.language-stats {
+      &:extend(.unselectable);
       padding: 0;
       height: 11px;
       display: flex;
       white-space: nowrap;
       width: 100%;
       border-radius: 0;
-      user-select: none;
 
       @media @mediaSm {
         display: none;

web_src/less/_review.less

@@ -50,8 +50,8 @@
 
 .show-outdated,
 .hide-outdated {
+  &:extend(.unselectable);
   display: block !important;
-  user-select: none !important;
 
   &:hover {
     text-decoration: underline;

web_src/less/markup/content.less

@@ -527,12 +527,7 @@
   margin-right: 10px !important;
 
   i {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+    &:extend(.unselectable);
   }
 }