Zmiany w wyglądzie listy pociągów

src/styles/global.scss

@@ -16,6 +16,50 @@
   }
 }
 
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+
+  z-index: 5;
+  
+  & > .content {
+    visibility: hidden;
+    width: 120px;
+    background-color: #830000;
+    color: #fff;
+    text-align: center;
+    padding: 5px 0;
+    border-radius: 6px;
+
+    font-size: 1rem;
+
+    position: absolute;
+    bottom: 155%;
+    left: 50%;
+    margin-left: -60px;
+
+    opacity: 0;
+    transition: opacity 0.3s;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: -5px;
+      border-width: 5px;
+      border-style: solid;
+      border-color: #aa0000 transparent transparent transparent;
+    }
+  }
+
+  &:hover > .content {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
 html {
   scroll-behavior: smooth;
 }

src/styles/user_badge.scss

@@ -0,0 +1,48 @@
+$no-timetable: #aaa;
+$departed: lime;
+$stopped: #ffa600;
+$online: gold;
+$terminated: red;
+
+.user-badge {
+    border: 1px solid white;
+    z-index: 4;
+
+    margin-top: 0.3rem;
+    margin-right: 0.3rem;
+
+    border-radius: 0.7em;
+    padding: 0.2em 0.5em;
+    font-size: 0.95em;
+
+    &.borderless {
+        border: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    &.no-timetable {
+        border: 1px solid $no-timetable;
+
+        a {
+            color: $no-timetable;
+            pointer-events: none;
+        }
+    }
+
+    &.departed {
+        border: 1px solid $departed;
+    }
+
+    &.stopped {
+        border: 1px solid $stopped;
+    }
+
+    &.online {
+        border: 1px solid $online;
+    }
+
+    &.terminated {
+        border: 1px solid $terminated;
+    }
+}