LibreTunes/LibreTunes
LibreTunes/LibreTunes
7
1
Fork 0
Code Issues 38 Pull Requests Actions Packages Releases Activity

Adjusted units, redundant prefixes, and other things
Some checks failed
Push Workflows / docs (push) Has been cancelled
Details
Push Workflows / build (push) Has been cancelled
Details
Push Workflows / docker-build (push) Has been cancelled
Details
Push Workflows / test (push) Has been cancelled
Details
Push Workflows / leptos-test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Daniel Miller 2024-12-11 04:54:15 +00:00
parent 1c13d0534a
commit a2ae5f78a7
1 changed files with 95 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
style/song_list.scss
View File

@ -1,124 +1,115 @@
table.song-list { table.song-list {
width: 100%; width: 100%;
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 {
color: $text-controls-color;
td { white-space: nowrap;
color: $text-controls-color; padding: 0.6rem; /* Adjusted padding for consistency */
white-space: nowrap;
padding-left: 10px; a {
padding-right: 10px; text-decoration: none;
color: $text-controls-color;
a {
text-decoration: none;
color: $text-controls-color;
}
} }
}
a:hover {
text-decoration: underline $controls-hover-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 */
} }
td.song-image { svg.song-image-overlay {
width: 35px; position: absolute;
display: flex; top: 50%;
transform: translateY(-50%);
img.song-image { width: 2.2rem; /* Adjusted to rem */
position: absolute; height: 2.2rem; /* Adjusted to rem */
top: 50%; border-radius: 0.3rem; /* Adjusted radius */
-ms-transform: translateY(-50%); fill: $text-controls-color;
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:hover {
width: 20%; fill: $controls-hover-color;
} }
td.song-list-spacer-big { svg.song-image-overlay:active {
width: 40%; fill: $controls-click-color;
} }
}
button {
svg.hmirror { td.song-list-spacer {
-moz-transform: scale(-1, 1); width: 20%;
-webkit-transform: scale(-1, 1); }
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1); td.song-list-spacer-big {
transform: scale(-1, 1); width: 40%;
} }
.controlbtn { button {
color: $text-controls-color; svg.hmirror {
} transform: scale(-1, 1); /* Removed redundant prefixes */
.controlbtn:hover {
color: $controls-hover-color;
}
.controlbtn:active {
color: $controls-click-color;
}
background-color: transparent;
border: transparent;
} }
.hide-until-hover { .controlbtn {
visibility: hidden; color: $text-controls-color;
} }
.song-playing-overlay { .controlbtn:hover {
background-color: rgba(0, 0, 0, 0.8); 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 { 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);
}
} }
}
} }
} }