Browse Source

fix(frontend): Fix global player styles

Miguel Ángel Moreno 1 year ago
parent
commit
1a1d04ae1d
2 changed files with 6 additions and 6 deletions
  1. 5 5
      src/frontend/tubo/components/player.cljs
  2. 1 1
      src/frontend/tubo/views/stream.cljs

+ 5 - 5
src/frontend/tubo/components/player.cljs

@@ -15,18 +15,18 @@
       (let [{:keys [uploader-name uploader-url name stream url service-color]} @(rf/subscribe [:global-stream])
             show-global-player? @(rf/subscribe [:show-global-player])]
         (when show-global-player?
-          [:div.sticky.bottom-0.z-50.bg-neutral-900.p-5.absolute.box-border.m-0
+          [:div.sticky.bottom-0.z-50.bg-white.dark:bg-neutral-900.p-5.absolute.box-border.m-0
            {:style {:borderColor service-color :borderTopWidth "2px" :borderStyle "solid"}}
            [:div.flex.items-center.justify-between
-            [:div.flex.flex-wrap.items-center
+            [:div.flex.items-center
              [:div.flex.flex-col
-              [:a.text-xs
+              [:a.text-xs.line-clamp-1
                {:href (rfe/href :tubo.routes/stream nil {:url url})} name]
-              [:a.text-xs.text-gray-300
+              [:a.text-xs.pt-2.text-neutral-600.dark:text-neutral-300
                {:href (rfe/href :tubo.routes/channel nil {:url uploader-url})} uploader-name]]
              [:div.px-2.py-0.md:pt-4
               [:audio {:src stream :ref #(reset! !player %) :loop @!loop?}]]
-             [:div.mx-2
+             [:div.mx-2.flex
               [:button.focus:ring-transparent.mx-2
                {:on-click (fn [] (swap! !loop? #(not %)))}
                [:i.fa-solid.fa-repeat

+ 1 - 1
src/frontend/tubo/views/stream.cljs

@@ -37,7 +37,7 @@
                                   "responsive" true
                                   "fill" true}
             content])]
-        [:div.px-4.ml:p-0
+        [:div.px-4.ml:p-0.overflow-x-hidden
          [:div.flex.flex.w-full.mt-3
           (when stream-format
             [:div.relative.flex.dark:bg-stone-800.flex-col.items-center.justify-center.z-10.mr-2.border.rounded.border-black