Adjusted units, redundant prefixes, and other things

This commit is contained in:
Daniel Miller 2024-12-11 04:54:15 +00:00
parent 1c13d0534a
commit a2ae5f78a7

View File

@ -3,122 +3,113 @@ table.song-list {
border-collapse: collapse; border-collapse: collapse;
tr.song-list-item { tr.song-list-item {
border: solid; border: 1px solid #303030; /* Simplified border shorthand */
border-width: 1px 0; position: relative;
border-color: #303030;
position: relative;
td { td {
color: $text-controls-color; color: $text-controls-color;
white-space: nowrap; white-space: nowrap;
padding-left: 10px; padding: 0.6rem; /* Adjusted padding for consistency */
padding-right: 10px;
a { a {
text-decoration: none; text-decoration: none;
color: $text-controls-color; 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 */
} }
a:hover { svg.song-image-overlay {
text-decoration: underline $controls-hover-color; 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;
} }
td.song-image { svg.song-image-overlay:hover {
width: 35px; fill: $controls-hover-color;
display: flex;
img.song-image {
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 35px;
height: 35px;
border-radius: 5px;
}
svg.song-image-overlay {
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 35px;
height: 35px;
border-radius: 5px;
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 { svg.song-image-overlay:active {
width: 20%; 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 */
} }
td.song-list-spacer-big { .controlbtn {
width: 40%; color: $text-controls-color;
} }
button { .controlbtn:hover {
svg.hmirror { color: $controls-hover-color;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.controlbtn {
color: $text-controls-color;
}
.controlbtn:hover {
color: $controls-hover-color;
}
.controlbtn:active {
color: $controls-click-color;
}
background-color: transparent;
border: transparent;
} }
.hide-until-hover { .controlbtn:active {
visibility: hidden; color: $controls-click-color;
} }
.song-playing-overlay { background-color: transparent;
background-color: rgba(0, 0, 0, 0.8); 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 { tr.song-list-item:first-child {
border-top: none; border-top: none;
} }
tr.song-list-item:last-child { tr.song-list-item:last-child {
border-bottom: none; border-bottom: none;
} }
tr.song-list-item:hover { tr.song-list-item:hover {
background-color: #303030; background-color: #303030;
.hide-until-hover { .hide-until-hover {
visibility: visible; visibility: visible;
} }
td.song-image { td.song-image {
svg.song-image-overlay { svg.song-image-overlay {
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
}
} }
}
} }
} }