2 files changed, 12 insertions, 8 deletions
diff --git a/frontend/src/app/_elements/playlist/playlist.component.css b/frontend/src/app/_elements/playlist/playlist.component.css
index 7ce320d9..83448e51 100644
--- a/frontend/src/app/_elements/playlist/playlist.component.css
+++ b/frontend/src/app/_elements/playlist/playlist.component.css
@@ -13,7 +13,7 @@
 .ns-cards {
     position: relative;
     width: 300%;
-    height: 36rem;
+    height: 26rem;
     margin-bottom: 20px;
 }
 
@@ -28,6 +28,10 @@
     cursor: pointer;
 }
 
+.ns-card:hover {
+    opacity: 1 !important;
+}
+
 input[type=radio] {
     display: none;
 }
@@ -36,7 +40,7 @@ input[type=radio] {
 #item-2:checked~.ns-cards #view-item-1,
 #item-3:checked~.ns-cards #view-item-2 {
     transform: translatex(-40%) scale(0.8);
-    opacity: 0.4;
+    opacity: 0.5;
     z-index: 0;
 }
 
@@ -44,7 +48,7 @@ input[type=radio] {
 #item-2:checked~.ns-cards #view-item-3,
 #item-3:checked~.ns-cards #view-item-1 {
     transform: translatex(40%) scale(0.8);
-    opacity: 0.4;
+    opacity: 0.5;
     z-index: 0;
 }
 
diff --git a/frontend/src/app/_elements/playlist/playlist.component.html b/frontend/src/app/_elements/playlist/playlist.component.html
index fdb426ed..97ebe6a5 100644
--- a/frontend/src/app/_elements/playlist/playlist.component.html
+++ b/frontend/src/app/_elements/playlist/playlist.component.html
@@ -3,17 +3,17 @@
     <input type="radio" name="slider" id="item-2" value="1" [(ngModel)]="selectedId">
     <input type="radio" name="slider" id="item-3" value="2" [(ngModel)]="selectedId">
     <div class="ns-cards">
-        <label class="ns-card bg-light overflow-auto" for="item-1" id="view-item-1">
+        <label class="ns-card ns-bg-dark-100 overflow-x-auto overflow-y-none" for="item-1" id="view-item-1">
             <app-datatable [tableData]="tableDatas[0]"></app-datatable>
         </label>
-        <label class="ns-card bg-light overflow-auto" for="item-2" id="view-item-2">
+        <label class="ns-card ns-bg-dark-100 overflow-x-auto overflow-y-none" for="item-2" id="view-item-2">
             <app-datatable [tableData]="tableDatas[1]"></app-datatable>
         </label>
-        <label class="ns-card bg-light overflow-auto" for="item-3" id="view-item-3">
+        <label class="ns-card ns-bg-dark-100 overflow-x-auto overflow-y-none" for="item-3" id="view-item-3">
             <app-datatable [tableData]="tableDatas[2]"></app-datatable>
         </label>
     </div>
-    <div class="ns-infobox">
-        <app-item-dataset [dataset]="datasets[getIndex(selectedId)]"></app-item-dataset>
+    <div class="ns-infobox text-offwhite">
+        <h2>{{datasets[getIndex(selectedId)].name}}</h2>
     </div>
 </div>
 \ No newline at end of file