No select.

src/snek/static/base.css

@@ -63,7 +63,12 @@ header nav a {
   font-size: 1em;
   transition: color 0.3s;
 }
-
+.no-select {
+      -webkit-user-select: none;  /* Chrome, Safari, Opera */
+      -moz-user-select: none;     /* Firefox */
+      -ms-user-select: none;      /* Internet Explorer/Edge */
+      user-select: none;          /* Standard syntax */
+    }
 
 header nav a:hover {
   color: #fff;

src/snek/static/message-list.js

@@ -74,6 +74,7 @@ class MessageListElement extends HTMLElement {
 
         const avatar = document.createElement("div");
         avatar.classList.add("avatar");
+        avatar.classList.add("no-select");
         avatar.style.backgroundColor = message.color;
         avatar.style.color = "black";
         avatar.innerText = message.user_nick[0];
@@ -166,4 +167,4 @@ class MessageListElement extends HTMLElement {
     }
 }
 
-customElements.define('message-list', MessageListElement);
+customElements.define('message-list', MessageListElement);

src/snek/templates/app.html

@@ -25,23 +25,23 @@
   <header>
     <div class="logo">Snek</div>
     <nav>
-      <a href="/web.html">🏠</a>
+      <a class="no-select" href="/web.html">🏠</a>
-      <a href="/search-user.html">🔍</a>
+      <a class="no-select" href="/search-user.html">🔍</a>
-      <a style="display:none" id="install-button" href="#">📥</a>
+      <a class="no-select" style="display:none" id="install-button" href="#">📥</a>
-      <a href="/web.html">👥</a>
+      <a class="no-select" href="/web.html">👥</a>
-      <a href="#">⚙️</a>
+      <a class="no-select" href="#">⚙️</a>
-      <a href="/logout.html">🔒</a>
+      <a class="no-select" href="/logout.html">🔒</a>
     </nav>
   </header>
   <main>
     {% block sidebar %}
     <aside class="sidebar">
-      <h2>Chat Rooms</h2>
+      <h2 class="no-select">Chat Rooms</h2>
       <ul>
-        <li><a href="#">General</a></li>
+        <li><a class="no-select" href="#">General</a></li>
-        <li><a href="#">Development</a></li>
+        <li><a class="no-select" href="#">Development</a></li>
-        <li><a href="#">Support</a></li>
+        <li><a class="no-select" href="#">Support</a></li>
-        <li><a href="#">Random</a></li>
+        <li><a class="no-select" href="#">Random</a></li>
        
       </ul>
     </aside>