new comments

static/style.css

@@ -1,3 +1,10 @@
+/*
+ * style.css - Core styles for Dereth Tracker Single-Page Application
+ * 
+ * Defines CSS variables for theming, layout rules for sidebar and map,
+ * interactive element styling (buttons, inputs), and responsive considerations.
+ */
+/* CSS Custom Properties for theme colors and sizing */
 :root {
   --sidebar-width: 280px;
   --bg-main: #111;
@@ -7,6 +14,10 @@
   --text:    #eee;
   --accent:  #88f;
 }
+/*
+ * style.css - Styling for Dereth Tracker SPA frontend.
+ * Defines layout, theming variables, and component styles (sidebar, map, controls).
+ */
 /* Placeholder text in chat input should be white */
 .chat-input::placeholder {
   color: #fff;
@@ -29,13 +40,14 @@ body {
   color: var(--text);
 }
 
-/* ---------- sort buttons --------------------------------------- */
 .sort-buttons {
+  /* Container for sorting controls; uses flex layout to distribute buttons equally */
   display: flex;
   gap: 4px;
   margin: 12px 16px 8px;
 }
 .sort-buttons .btn {
+  /* Base styling for each sort button: color, padding, border */
   flex: 1;
   padding: 6px 8px;
   background: #222;
@@ -48,6 +60,7 @@ body {
   font-size: 0.9rem;
 }
 .sort-buttons .btn.active {
+  /* Active sort button highlighted with accent color */
   background: var(--accent);
   color: #111;
   border-color: var(--accent);
@@ -73,6 +86,18 @@ body {
   margin: 0;
   padding: 0;
 }
+/* Filter input in sidebar for player list */
+.player-filter {
+  width: 100%;
+  padding: 6px 8px;
+  margin-bottom: 12px;
+  background: var(--card);
+  color: var(--text);
+  border: 1px solid #555;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  box-sizing: border-box;
+}
 #playerList li {
   margin: 4px 0;
   padding: 6px 8px;