table.song-list { width: 100%; border-collapse: collapse; tr.song-list-item { border: 1px solid #303030; /* Simplified border shorthand */ position: relative; td { color: $text-controls-color; white-space: nowrap; padding: 0.6rem; /* Adjusted padding for consistency */ a { text-decoration: none; color: $text-controls-color; } } a:hover { text-decoration: underline $controls-hover-color; } td.song-image { width: 2.2rem; /* Replaced static px with rem */ display: flex; img.song-image { position: absolute; top: 50%; transform: translateY(-50%); width: 2.2rem; /* Adjusted to rem */ height: 2.2rem; /* Adjusted to rem */ border-radius: 0.3rem; /* Adjusted radius */ } svg.song-image-overlay { position: absolute; top: 50%; transform: translateY(-50%); width: 2.2rem; /* Adjusted to rem */ height: 2.2rem; /* Adjusted to rem */ border-radius: 0.3rem; /* Adjusted radius */ fill: $text-controls-color; } svg.song-image-overlay:hover { fill: $controls-hover-color; } svg.song-image-overlay:active { fill: $controls-click-color; } } td.song-list-spacer { width: 20%; } td.song-list-spacer-big { width: 40%; } button { svg.hmirror { transform: scale(-1, 1); /* Removed redundant prefixes */ } .controlbtn { color: $text-controls-color; } .controlbtn:hover { color: $controls-hover-color; } .controlbtn:active { color: $controls-click-color; } background-color: transparent; border: none; /* Simplified border */ } .hide-until-hover { visibility: hidden; } .song-playing-overlay { background-color: rgba(0, 0, 0, 0.8); } } tr.song-list-item:first-child { border-top: none; } tr.song-list-item:last-child { border-bottom: none; } tr.song-list-item:hover { background-color: #303030; .hide-until-hover { visibility: visible; } td.song-image { svg.song-image-overlay { background-color: rgba(0, 0, 0, 0.8); } } } }