Make certain controls non-selectable / non-draggable (#3947)

* Make settings heading text unselectable

I often encounter the issue of accidentally selecting/highlighting the settings heading text, which ends up highlighting all of the text inside of that settings tab. This is an unpleasant appearance that I have to click to remove. This change removes this issue altogether.

* Switch all instances of user-select to be only user-select and -webkit-user-select

* Make side-nav labels unselectable

* Make side-nav and channels un-draggable

* Remove selection from ft-flex-box, ft-input placeholders, and profile icons

src/renderer/App.css

@@ -26,6 +26,8 @@
 
 .flexBox {
   display: block;
+  user-select: all;
+  -webkit-user-select: all;
 }
 
 #changeLogText {

src/renderer/components/ft-flex-box/ft-flex-box.css

@@ -2,4 +2,6 @@
   display: flex;
   flex-flow: row wrap;
   justify-content: space-evenly;
+  user-select: none;
+  -webkit-user-select: none;
 }

src/renderer/components/ft-icon-button/ft-icon-button.scss

@@ -3,6 +3,8 @@
   flex-flow: row wrap;
   justify-content: space-evenly;
   position: relative;
+
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -84,6 +86,7 @@
   list-style-type: none;
   position: absolute;
   text-align: center;
+  -webkit-user-select: none;
   user-select: none;
   z-index: 3;
 

src/renderer/components/ft-input/ft-input.css

@@ -97,6 +97,8 @@
 
 .ft-input-component ::-webkit-input-placeholder {
   color: var(--tertiary-text-color);
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .forceTextColor .ft-input {

src/renderer/components/ft-profile-bubble/ft-profile-bubble.css

@@ -29,6 +29,8 @@
   line-height: 1em;
   text-align: center;
   padding: 17.5px 0;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .profileName {

src/renderer/components/ft-profile-edit/ft-profile-edit.css

@@ -36,6 +36,8 @@
   line-height: 1em;
   text-align: center;
   padding: 25px 0;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 @media only screen and (max-width: 680px) {

src/renderer/components/ft-profile-selector/ft-profile-selector.css

@@ -17,6 +17,8 @@
   font-size: 20px;
   line-height: 1em;
   text-align: center;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .profileList {

src/renderer/components/ft-radio-button/ft-radio-button.css

@@ -19,6 +19,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   position: relative;
   padding-left: 2em;
   vertical-align: middle;
+  -webkit-user-select: none;
   user-select: none;
   cursor: pointer;
   display: block;

src/renderer/components/ft-settings-section/ft-settings-section.scss

@@ -39,6 +39,8 @@
 }
 
 .sectionTitle {
+  -webkit-user-select: none;
+  user-select: none;
   margin-left: 2%;
 }
 

src/renderer/components/side-nav/side-nav.css

@@ -12,6 +12,8 @@
   transition-property: width;
   transition-duration: 150ms;
   transition-timing-function: ease-in-out;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .inner {
@@ -41,6 +43,7 @@
   position: relative;
   padding: 5px;
   min-height: 35px;
+  -webkit-user-drag: none;
 }
 
 .moreOption {

src/renderer/components/top-nav/top-nav.scss

@@ -61,6 +61,7 @@
     color: gray;
     opacity: 0.5;
     pointer-events: none;
+    -webkit-user-select: none;
     user-select: none;
   }
 

src/renderer/videoJS.css

@@ -1090,17 +1090,10 @@ body.vjs-full-window {
   cursor: pointer;
   padding: 0;
   margin: 0 0.45em 0 0.45em;
-  /* iOS Safari */
-  -webkit-touch-callout: none;
-  /* Safari */
+
   -webkit-user-select: none;
-  /* Konqueror HTML */
-  /* Firefox */
-  -moz-user-select: none;
-  /* Internet Explorer/Edge */
-  -ms-user-select: none;
-  /* Non-prefixed version, currently supported by Chrome and Opera */
   user-select: none;
+
   background-color: #73859f;
   background-color: rgba(115, 133, 159, 0.5);
 }