From 82071bb18d55070392913164c62854984aaa1e08 Mon Sep 17 00:00:00 2001
From: Luis Pereira <luispereira.tkd@gmail.com>
Date: Sun, 5 Oct 2025 23:07:36 +0100
Subject: [PATCH] fix: pseudo selectors on lass are now working

---
 static/asteroid.css  |  90 ++++++---
 static/asteroid.lass | 446 +++++++++++++++++++++++--------------------
 2 files changed, 298 insertions(+), 238 deletions(-)

diff --git a/static/asteroid.css b/static/asteroid.css
index 338af75..9d63414 100644
--- a/static/asteroid.css
+++ b/static/asteroid.css
@@ -8,6 +8,7 @@ body{
     color: #00ffff;
     margin: 0;
     padding: 20px;
+    box-sizing: boder-box;
 }
 
 body .container{
@@ -47,14 +48,19 @@ body .nav{
 body .nav a{
     color: #00ffff;
     text-decoration: none;
-    margin: 0 15px;
+    margin: 0 10px;
     padding: 10px 20px;
     border: 1px solid #2a3441;
     background: #1a2332;
+    cursor: pointer;
     display: inline-block;
 }
 
-body .nav a :hover{
+body .nav a:first-child{
+    margin-left: 0;
+}
+
+body .nav a:hover{
     background: #2a3441;
 }
 
@@ -71,7 +77,7 @@ body .controls button{
     cursor: pointer;
 }
 
-body .controls button :hover{
+body .controls button:hover{
     background: #2a3441;
 }
 
@@ -84,7 +90,7 @@ body button{
     cursor: pointer;
 }
 
-body button :hover{
+body button:hover{
     background: #3a4551;
 }
 
@@ -95,6 +101,7 @@ body .now-playing{
     margin: 20px 0;
     font-size: 1.5em;
     color: #4488ff;
+    overflow: scroll;
 }
 
 body .back{
@@ -104,7 +111,7 @@ body .back{
     display: inline-block;
 }
 
-body .back :hover{
+body .back:hover{
     text-decoration: underline;
 }
 
@@ -132,6 +139,27 @@ body .player-section{
     border-radius: 5px;
 }
 
+body .player-section .live-stream{
+    overflow: scroll;
+}
+
+
+
+
+
+body .live-stream .live-stream-quality label,
+body .live-stream .live-stream-quality select{
+    margin: 10px 0;
+}
+
+body .live-stream .live-stream-quality label{
+    margin-right: 10px;
+}
+
+body .live-stream .live-stream-quality select{
+    padding: 5px;
+}
+
 body .track-browser{
     margin: 15px 0;
 }
@@ -145,6 +173,12 @@ body .search-input{
     font-family: Courier New, monospace;
     font-size: 14px;
     margin-bottom: 15px;
+    box-sizing: border-box;
+}
+
+body .sort-select{
+    padding: 0.25rem;
+    margin-right: 10px;
 }
 
 body .track-list{
@@ -167,10 +201,6 @@ body .track-item{
     transition: background-color 0.2s;
 }
 
-body .track-item :hover{
-    background: #1a2332;
-}
-
 body .track-info{
     flex: 1;
 }
@@ -278,17 +308,19 @@ body .btn{
     transition: all 0.2s;
 }
 
-body .btn :hover{
+body .btn:hover{
     background: #3a4551;
     border-color: #3a4551;
 }
 
+
+
 body .btn .btn-primary{
     background: #0066cc;
     border-color: #0088ff;
 }
 
-body .btn .btn-primary :hover{
+body .btn .btn-primary:hover{
     background: #0088ff;
 }
 
@@ -297,7 +329,7 @@ body .btn .btn-secondary{
     border-color: #2a3441;
 }
 
-body .btn .btn-secondary :hover{
+body .btn .btn-secondary:hover{
     background: #666;
 }
 
@@ -359,7 +391,7 @@ body .queue-item{
     margin-bottom: 5px;
 }
 
-body .queue-item :last-child{
+body .queue-item:last-child{
     border-bottom: none;
     margin-bottom: 0;
 }
@@ -480,10 +512,6 @@ body .upload-interface .upload-area{
     transition: border-color 0.3s ease;
 }
 
-body .upload-interface .upload-area &:hover{
-    border-color: #00ffff;
-}
-
 body .upload-interface .upload-area .upload-icon{
     font-size: 3rem;
     color: #666;
@@ -499,6 +527,10 @@ body .upload-interface .upload-area .btn{
     margin-top: 1rem;
 }
 
+body .upload-interface .upload-area:hover{
+    border-color: #00ffff;
+}
+
 body .auth-container{
     display: flex;
     justify-content: center;
@@ -556,7 +588,7 @@ body .form-group input{
     box-sizing: border-box;
 }
 
-body .form-group input &:focus{
+body .form-group input:focus{
     border-color: #00ffff;
     outline: none;
     -moz-box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2);
@@ -580,13 +612,13 @@ body .message{
     font-weight: bold;
 }
 
-body .message &.success{
+body .message.success{
     background-color: rgba(0, 255, 0, 0.1);
     border: 1px solid #00ffff;
     color: #00ffff;
 }
 
-body .message &.error{
+body .message.error{
     background-color: rgba(255, 0, 0, 0.1);
     border: 1px solid #ff0000;
     color: #ff0000;
@@ -603,7 +635,7 @@ body .auth-link a{
     text-decoration: none;
 }
 
-body .auth-link a &:hover{
+body .auth-link a:hover{
     text-decoration: underline;
 }
 
@@ -639,10 +671,6 @@ body .info-group{
     border-bottom: 1px solid #2a3441;
 }
 
-body .info-group &:last-child{
-    border-bottom: none;
-}
-
 body .info-group label{
     color: #ccc;
     font-weight: bold;
@@ -652,6 +680,10 @@ body .info-group span{
     color: #fff;
 }
 
+body .info-group:last-child{
+    border-bottom: none;
+}
+
 body .role-badge{
     background-color: #00ffff;
     color: #000;
@@ -698,16 +730,16 @@ body .users-table tbody tr{
     border-bottom: 1px solid #2a3441;
 }
 
-body .users-table tbody tr &:hover{
-    background-color: #222;
-}
-
 body .users-table tbody tr td{
     padding: 1rem;
     color: #fff;
     vertical-align: middle;
 }
 
+body .users-table tbody tr:hover{
+    background-color: #222;
+}
+
 body .users-table tbody .user-actions{
     display: flex;
     gap: 0.5rem;
diff --git a/static/asteroid.lass b/static/asteroid.lass
index 1142d5c..60b8566 100644
--- a/static/asteroid.lass
+++ b/static/asteroid.lass
@@ -12,6 +12,7 @@
     :color "#00ffff"
     :margin 0
     :padding "20px"
+    :box-sizing "boder-box"
 
     (.container
      :max-width "1200px"
@@ -43,13 +44,18 @@
      (a
       :color "#00ffff"
       :text-decoration none
-      :margin "0 15px"
+      :margin "0 10px"
       :padding "10px 20px"
       :border "1px solid #2a3441"
       :background "#1a2332"
-      :display inline-block
-      (:hover
-          :background "#2a3441")))
+      :cursor pointer
+      :display inline-block)
+
+      ((:and a :first-child)
+       :margin-left "0")
+
+      ((:and a :hover)
+          :background "#2a3441"))
 
     (.controls
      :margin "20px 0"
@@ -59,9 +65,9 @@
       :border "1px solid #2a3441"
       :padding "10px 20px"
       :margin "5px"
-      :cursor pointer
-      (:hover
-          :background "#2a3441")))
+      :cursor pointer)
+     ((:and button :hover)
+          :background "#2a3441"))
 
     (button
      :background "#2a3441"
@@ -69,9 +75,10 @@
      :border "1px solid #3a4551"
      :padding "10px 20px"
      :margin "5px"
-     :cursor pointer
-     (:hover
-      :background "#3a4551"))
+     :cursor pointer)
+
+     ((:and button :hover)
+      :background "#3a4551")
 
     (.now-playing
      :background "#1a2332"
@@ -79,15 +86,16 @@
      :border "1px solid #2a3441"
      :margin "20px 0"
      :font-size "1.5em"
-     :color "#4488ff")
+     :color "#4488ff"
+     :overflow "scroll")
 
     (.back
      :color "#00ffff"
      :text-decoration none
      :margin-bottom "20px"
-     :display inline-block
-     (:hover
-      :text-decoration underline))
+     :display inline-block)
+     ((:and .back :hover)
+      :text-decoration underline)
 
     ;; Player-specific styles
     (.player
@@ -108,7 +116,20 @@
      :padding "25px"
      :border "1px solid #2a3441"
      :margin "20px 0"
-     :border-radius "5px")
+     :border-radius "5px"
+     (.live-stream
+      :overflow "scroll") )
+
+    (.live-stream
+     (.live-stream-quality
+
+      ((:or label select) :margin "10px 0")
+
+      (label
+       :margin-right "10px")
+
+      (select
+       :padding "5px")))
 
     (.track-browser
      :margin "15px 0")
@@ -121,7 +142,12 @@
      :border "1px solid #2a3441"
      :font-family "Courier New, monospace"
      :font-size "14px"
-     :margin-bottom "15px")
+     :margin-bottom "15px"
+     :box-sizing "border-box")
+
+    (.sort-select
+     :padding "0.25rem"
+     :margin-right "10px")
 
     (.track-list
      :max-height "400px"
@@ -135,9 +161,7 @@
      :align-items center
      :padding "12px 15px"
      :border-bottom "1px solid #2a3441"
-     :transition "background-color 0.2s"
-     (:hover
-      :background "#1a2332"))
+     :transition "background-color 0.2s")
 
     (.track-info
      :flex 1
@@ -219,22 +243,23 @@
      :font-family "Courier New, monospace"
      :font-size "14px"
      :border-radius "3px"
-     :transition "all 0.2s"
-     (:hover
-      :background "#3a4551"
-      :border-color "#3a4551")
+     :transition "all 0.2s")
+    ((:and .btn :hover)
+     :background "#3a4551"
+     :border-color "#3a4551")
 
+    (.btn
      (.btn-primary
       :background "#0066cc"
-      :border-color "#0088ff"
-      (:hover
-       :background "#0088ff"))
+      :border-color "#0088ff")
+     ((:and .btn-primary :hover)
+      :background "#0088ff")
 
      (.btn-secondary
       :background "#444"
-      :border-color "#2a3441"
-      (:hover
-       :background "#666"))
+      :border-color "#2a3441")
+     ((:and .btn-secondary :hover)
+      :background "#666")
 
      (.btn-sm
       :padding "4px 8px"
@@ -247,199 +272,201 @@
 
     ;; Playlist and Queue styles
     (.playlist-controls
-    :margin-bottom "15px"
-    :display flex
-    :gap "10px"
-    :align-items center)
+     :margin-bottom "15px"
+     :display flex
+     :gap "10px"
+     :align-items center)
 
     (.playlist-input
-    :flex 1
-    :padding "8px 12px"
-    :background "#0a0a0a"
-    :color "#00ffff"
-    :border "1px solid #2a3441"
-    :font-family "Courier New, monospace")
+     :flex 1
+     :padding "8px 12px"
+     :background "#0a0a0a"
+     :color "#00ffff"
+     :border "1px solid #2a3441"
+     :font-family "Courier New, monospace")
 
     (.playlist-list
-    :border "1px solid #2a3441"
-    :background "#0a0a0a"
-    :min-height "100px"
-    :padding "10px")
+     :border "1px solid #2a3441"
+     :background "#0a0a0a"
+     :min-height "100px"
+     :padding "10px")
 
     (.queue-controls
-    :margin-bottom "15px"
-    :display flex
-    :gap "10px")
+     :margin-bottom "15px"
+     :display flex
+     :gap "10px")
 
     (.play-queue
-    :border "1px solid #2a3441"
-    :background "#0a0a0a"
-    :min-height "150px"
-    :max-height "300px"
-    :overflow-y auto
-    :padding "10px")
+     :border "1px solid #2a3441"
+     :background "#0a0a0a"
+     :min-height "150px"
+     :max-height "300px"
+     :overflow-y auto
+     :padding "10px")
 
     (.queue-item
-    :display flex
-    :justify-content space-between
-    :align-items center
-    :padding "8px 10px"
-    :border-bottom "1px solid #2a3441"
-    :margin-bottom "5px"
-    (:last-child
-    :border-bottom none
-    :margin-bottom 0))
+     :display flex
+     :justify-content space-between
+     :align-items center
+     :padding "8px 10px"
+     :border-bottom "1px solid #2a3441"
+     :margin-bottom "5px")
+    ((:and .queue-item :last-child)
+     :border-bottom none
+     :margin-bottom 0)
 
     (.empty-queue
-    :text-align center
-    :color "#666"
-    :padding "20px"
-    :font-style italic)
+     :text-align center
+     :color "#666"
+     :padding "20px"
+     :font-style italic)
 
     (.no-tracks
-    :text-align center
-    :color "#666"
-    :padding "20px"
-    :font-style italic)
+     :text-align center
+     :color "#666"
+     :padding "20px"
+     :font-style italic)
 
     (.no-playlists
-    :text-align center
-    :color "#666"
-    :padding "20px"
-    :font-style italic)
+     :text-align center
+     :color "#666"
+     :padding "20px"
+     :font-style italic)
 
     (.loading
-    :text-align center
-    :color "#4488ff"
-    :padding "20px")
+     :text-align center
+     :color "#4488ff"
+     :padding "20px")
 
     (.error
-    :text-align center
-    :color "#ff0000"
-    :padding "20px"
-    :font-weight bold)
+     :text-align center
+     :color "#ff0000"
+     :padding "20px"
+     :font-weight bold)
 
     ;; Upload interface styles
     (.upload-section
-    :margin "20px 0"
-    :padding "20px"
-    :background "#0a0a0a"
-    :border "1px solid #2a3441"
-    :border-radius "5px")
+     :margin "20px 0"
+     :padding "20px"
+     :background "#0a0a0a"
+     :border "1px solid #2a3441"
+     :border-radius "5px")
 
     (.upload-controls
-    :display flex
-    :gap "15px"
-    :align-items center
-    :margin-bottom "15px")
+     :display flex
+     :gap "15px"
+     :align-items center
+     :margin-bottom "15px")
 
     (.upload-info
-    :color "#888"
-    :font-size "0.9em")
+     :color "#888"
+     :font-size "0.9em")
 
     (.upload-progress
-    :margin-top "10px"
-    :padding "10px"
-    :background "#1a2332"
-    :border "1px solid #2a3441"
-    :border-radius "3px")
+     :margin-top "10px"
+     :padding "10px"
+     :background "#1a2332"
+     :border "1px solid #2a3441"
+     :border-radius "3px")
 
     (.progress-bar
-    :height "20px"
-    :background "#4488ff"
-    :border-radius "3px"
-    :transition "width 0.3s ease"
-    :width "0%")
+     :height "20px"
+     :background "#4488ff"
+     :border-radius "3px"
+     :transition "width 0.3s ease"
+     :width "0%")
 
     (.progress-text
-    :display block
-    :margin-top "5px"
-    :color "#00ffff"
-    :font-size "0.9em")
+     :display block
+     :margin-top "5px"
+     :color "#00ffff"
+     :font-size "0.9em")
 
     (input
-    :padding "8px 12px"
-    :background "#1a2332"
-    :color "#00ffff"
-    :border "1px solid #2a3441"
-    :border-radius "3px"
-    :font-family "Courier New, monospace")
+     :padding "8px 12px"
+     :background "#1a2332"
+     :color "#00ffff"
+     :border "1px solid #2a3441"
+     :border-radius "3px"
+     :font-family "Courier New, monospace")
 
     (.upload-interface
-    :margin-top 2rem
-    :padding 1.5rem
-    :background-color "#1a2332"
-    :border-radius 8px
-    :border "1px solid #2a3441"
+     :margin-top 2rem
+     :padding 1.5rem
+     :background-color "#1a2332"
+     :border-radius 8px
+     :border "1px solid #2a3441"
 
-        (h3 :color "#00ffff"
-            :margin-bottom 1rem)
+     (h3 :color "#00ffff"
+         :margin-bottom 1rem)
 
-        (.upload-area
-            :border "2px dashed #2a3441"
-            :border-radius 8px
-            :padding 2rem
-            :text-align center
-            :background-color "#0f0f0f"
-            :transition "border-color 0.3s ease"
+     (.upload-area
+      :border "2px dashed #2a3441"
+      :border-radius 8px
+      :padding 2rem
+      :text-align center
+      :background-color "#0f0f0f"
+      :transition "border-color 0.3s ease"
         
-            ("&:hover" :border-color "#00ffff")
+      (.upload-icon :font-size 3rem
+                    :color "#666"
+                    :margin-bottom 1rem)
         
-            (.upload-icon :font-size 3rem
-                        :color "#666"
-                        :margin-bottom 1rem)
+      (p :color "#999"
+         :margin-bottom 1rem)
         
-            (p :color "#999"
-            :margin-bottom 1rem)
-        
-            (.btn :margin-top 1rem)))
+      (.btn :margin-top 1rem))
+
+     ((:and .upload-area :hover)
+      :border-color "#00ffff"))
 
     ;; Authentication Styles
     (.auth-container
-    :display flex
-    :justify-content center
-    :align-items center
-    :min-height "60vh"
-    :padding 2rem)
+     :display flex
+     :justify-content center
+     :align-items center
+     :min-height "60vh"
+     :padding 2rem)
 
     (.auth-form
-    :background-color "#1a2332"
-    :border "1px solid #2a3441"
-    :border-radius 8px
-    :padding 2rem
-    :width "100%"
-    :max-width 400px
-    :box-shadow "0 4px 6px rgba(0, 0, 0, 0.3)"
+     :background-color "#1a2332"
+     :border "1px solid #2a3441"
+     :border-radius 8px
+     :padding 2rem
+     :width "100%"
+     :max-width 400px
+     :box-shadow "0 4px 6px rgba(0, 0, 0, 0.3)"
     
-      (h2 :color "#00ffff"
-          :text-align center
-          :margin-bottom 1.5rem
-          :font-size 1.5rem)
+     (h2 :color "#00ffff"
+         :text-align center
+         :margin-bottom 1.5rem
+         :font-size 1.5rem)
     
-      (h3 :color "#00ffff"
-          :margin-bottom 1rem
-          :font-size 1.2rem))
+     (h3 :color "#00ffff"
+         :margin-bottom 1rem
+         :font-size 1.2rem))
 
     (.form-group
-      :margin-bottom 3rem
+     :margin-bottom 3rem
     
-      (label :display block
-              :color "#ccc"
-              :margin-bottom 0.5rem
-              :font-weight bold)
+     (label :display block
+            :color "#ccc"
+            :margin-bottom 0.5rem
+            :font-weight bold)
     
-      (input :width "100%"
-              :padding 0.75rem
-              :background-color "#0f0f0f"
-              :border "1px solid #2a3441"
-              :border-radius 4px
-              :color "#fff"
-              :font-size 1rem
-              :box-sizing border-box
+     (input :width "100%"
+            :padding 0.75rem
+            :background-color "#0f0f0f"
+            :border "1px solid #2a3441"
+            :border-radius 4px
+            :color "#fff"
+            :font-size 1rem
+            :box-sizing border-box)
             
-              ("&:focus" :border-color "#00ffff"
-                          :outline none
-                          :box-shadow "0 0 0 2px rgba(0, 255, 0, 0.2)")))
+     ((:and input :focus)
+      :border-color "#00ffff"
+      :outline none
+      :box-shadow "0 0 0 2px rgba(0, 255, 0, 0.2)"))
 
     (.form-actions
       :display flex
@@ -453,13 +480,15 @@
       :text-align center
       :font-weight bold
 
-      ("&.success" :background-color "rgba(0, 255, 0, 0.1)"
-                      :border "1px solid #00ffff"
-                      :color "#00ffff")
+      ((:parent .success)
+       :background-color "rgba(0, 255, 0, 0.1)"
+       :border "1px solid #00ffff"
+       :color "#00ffff")
 
-      ("&.error" :background-color "rgba(255, 0, 0, 0.1)"
-                  :border "1px solid #ff0000"
-                  :color "#ff0000"))
+      ((:parent .error)
+       :background-color "rgba(255, 0, 0, 0.1)"
+       :border "1px solid #ff0000"
+       :color "#ff0000"))
 
     (.auth-link
       :text-align center
@@ -467,9 +496,9 @@
       :color "#999"
 
       (a :color "#00ffff"
-          :text-decoration none
+         :text-decoration none)
 
-          ("&:hover" :text-decoration underline)))
+      ((:and a :hover) :text-decoration underline))
 
     ;; Profile Styles
     (.profile-container
@@ -498,13 +527,13 @@
       :padding 0.75rem 0
       :border-bottom "1px solid #2a3441"
 
-      ("&:last-child" :border-bottom none)
-
       (label :color "#ccc"
-              :font-weight bold)
+             :font-weight bold)
 
       (span :color "#fff"))
 
+    ((:and .info-group :last-child) :border-bottom none)
+
     (.role-badge
       :background-color "#00ffff"
       :color "#000"
@@ -519,8 +548,7 @@
       :justify-content center)
 
     ;; User Management Styles
-    (.user-management
-      :margin-top 2rem)
+    (.user-management :margin-top 2rem)
 
     (.users-table
       :width "100%"
@@ -540,46 +568,46 @@
               :border-bottom "1px solid #2a3441"))
 
       (tbody
-          (tr :border-bottom "1px solid #2a3441"
+       (tr :border-bottom "1px solid #2a3441"
 
-              ("&:hover" :background-color "#222")
+           (td :padding 1rem
+               :color "#fff"
+               :vertical-align middle))
+       ((:and tr :hover) :background-color "#222")
 
-              (td :padding 1rem
-                  :color "#fff"
-                  :vertical-align middle))
 
-          (.user-actions
-           :display flex
-           :gap 0.5rem
+       (.user-actions
+        :display flex
+        :gap 0.5rem
 
-           (.btn :padding "0.25rem 0.5rem"
-               :font-size 0.875rem))))
+        (.btn :padding "0.25rem 0.5rem"
+              :font-size 0.875rem))))
 
     (.user-stats
-      :display grid
-      :grid-template-columns "repeat(auto-fit, minmax(150px, 1fr))"
-      :gap 1rem
-      :margin-bottom 2rem)
+     :display grid
+     :grid-template-columns "repeat(auto-fit, minmax(150px, 1fr))"
+     :gap 1rem
+     :margin-bottom 2rem)
 
     (.stat-card
-      :background-color "#1a2332"
-      :border "1px solid #2a3441"
-      :border-radius 8px
-      :padding 1rem
-      :text-align center
+     :background-color "#1a2332"
+     :border "1px solid #2a3441"
+     :border-radius 8px
+     :padding 1rem
+     :text-align center
 
-      (.stat-number :font-size 2rem
-                      :font-weight bold
-                      :color "#00ffff"
-                      :display block)
+     (.stat-number :font-size 2rem
+                   :font-weight bold
+                   :color "#00ffff"
+                   :display block)
 
-      (.stat-label :color "#ccc"
-                      :font-size 0.875rem
-                      :margin-top 0.5rem))
+     (.stat-label :color "#ccc"
+                  :font-size 0.875rem
+                  :margin-top 0.5rem))
 
     ;; Center alignment for player page
     ;; (body.player-page
     ;;  :text-align center)
 
-    )) ;; Close main body block
-
+  ) ;; Close main body block
+) ;; End of let block