more dashboard css fixes

admin/static/admin.css

@@ -66,6 +66,13 @@
     }
 }
 
+@media (prefers-color-scheme: dark) {
+    img.icon {
+        -webkit-filter: invert(1);
+        filter: invert(1);
+    }
+}
+
 body {
     width: calc(100% - 180px);
     height: calc(100vh - 1em);
@@ -184,8 +191,9 @@ a:hover {
 }
 */
 
-a img.icon {
+img.icon {
     height: .8em;
+    transition: filter .1s ease-out;
 }
 
 code {

admin/static/edit-artist.js

@@ -81,7 +81,7 @@ removeAvatarBtn.addEventListener("click", () => {
 });
 
 document.addEventListener('readystatechange', () => {
-    document.querySelectorAll('.card#releases .credit').forEach(el => {
+    document.querySelectorAll('#releases .credit').forEach(el => {
         hijackClickEvent(el, el.querySelector('.credit-name a'));
     });
 });

admin/static/edit-release.css

@@ -14,6 +14,8 @@ input[type="text"] {
     border-radius: 8px;
     background: var(--bg-2);
     box-shadow: var(--shadow-md);
+
+    transition: background .1s ease-out, color .1s ease-out;
 }
 
 .release-artwork {
@@ -31,6 +33,7 @@ input[type="text"] {
 .release-artwork #remove-artwork {
     margin-top: .5em;
     padding: .3em .6em;
+    background: var(--bg-3);
 }
 
 .release-info {
@@ -118,6 +121,7 @@ input[type="text"] {
     gap: .5em;
     flex-direction: row;
     justify-content: right;
+    color: var(--fg-3);
 }
 
 .release-actions button,
@@ -163,7 +167,7 @@ dialog div.dialog-actions {
  * RELEASE CREDITS
  */
 
-.card#credits .credit {
+#credits .credit {
     margin-bottom: .5em;
     padding: .5em;
     display: flex;
@@ -178,24 +182,24 @@ dialog div.dialog-actions {
     cursor: pointer;
     transition: background .1s ease-out;
 }
-.card#credits .credit:hover {
+#credits .credit:hover {
     background-color: var(--bg-1);
 }
 
-.card#credits .credit p {
+#credits .credit p {
     margin: 0;
 }
 
-.card#credits .credit .artist-avatar {
+#credits .credit .artist-avatar {
     border-radius: 12px;
 }
 
-.card#credits .credit .artist-name {
+#credits .credit .artist-name {
     color: var(--fg-3);
     font-weight: bold;
 }
 
-.card#credits .credit .artist-role small {
+#credits .credit .artist-role small {
     font-size: inherit;
     opacity: .66;
 }
@@ -314,33 +318,38 @@ dialog div.dialog-actions {
  * RELEASE LINKS
  */
 
-.card#links ul {
+#links ul {
     padding: 0;
     display: flex;
     gap: .2em;
 }
 
-.card#links a.button:hover {
+#links a img.icon {
+    -webkit-filter: none;
+    filter: none;
+}
+
+#links a.button:hover {
     color: var(--bg-3) !important;
     background-color: var(--fg-3) !important;
 }
 
-.card#links a.button[data-name="spotify"] {
+#links a.button[data-name="spotify"] {
     color: #101010;
     background-color: #8cff83
 }
 
-.card#links a.button[data-name="apple music"] {
+#links a.button[data-name="apple music"] {
     color: #101010;
     background-color: #8cd9ff
 }
 
-.card#links a.button[data-name="soundcloud"] {
+#links a.button[data-name="soundcloud"] {
     color: #101010;
     background-color: #fdaa6d
 }
 
-.card#links a.button[data-name="youtube"] {
+#links a.button[data-name="youtube"] {
     color: #101010;
     background-color: #ff6e6e
 }
@@ -428,7 +437,7 @@ dialog div.dialog-actions {
  * RELEASE TRACKS
  */
 
-.card#tracks .track {
+#tracks .track {
     margin-bottom: 1em;
     padding: 1em;
     display: flex;
@@ -438,49 +447,51 @@ dialog div.dialog-actions {
     border-radius: 16px;
     background: var(--bg-2);
     box-shadow: var(--shadow-md);
+
+    transition: background .1s ease-out, color .1s ease-out;
 }
 
-.card#tracks .track h3,
+#tracks .track h3,
-.card#tracks .track p {
+#tracks .track p {
     margin: 0;
 }
 
-.card#tracks h2.track-title {
+#tracks h2.track-title {
     margin: 0;
     display: flex;
     gap: .5em;
 }
 
-.card#tracks h2.track-title .track-number {
+#tracks h2.track-title .track-number {
     opacity: .5;
 }
 
-.card#tracks a:hover {
+#tracks a:hover {
     text-decoration: underline;
 }
 
-.card#tracks .track-album {
+#tracks .track-album {
     margin-left: auto;
     font-style: italic;
     font-size: .75em;
     opacity: .5;
 }
 
-.card#tracks .track-album.empty {
+#tracks .track-album.empty {
     color: #ff2020;
     opacity: 1;
 }
 
-.card#tracks .track-description {
+#tracks .track-description {
     font-style: italic;
 }
 
-.card#tracks .track-lyrics {
+#tracks .track-lyrics {
     max-height: 10em;
     overflow-y: scroll;
 }
 
-.card#tracks .track .empty {
+#tracks .track .empty {
     opacity: 0.75;
 }
 

admin/static/edit-release.js

@@ -100,7 +100,7 @@ removeArtworkBtn.addEventListener("click", () => {
 });
 
 document.addEventListener("readystatechange", () => {
-    document.querySelectorAll(".card#credits .credit").forEach(el => {
+    document.querySelectorAll("#credits .credit").forEach(el => {
         hijackClickEvent(el, el.querySelector(".artist-name a"));
     });
 });

admin/static/release-list-item.css

@@ -51,6 +51,7 @@
 .release-actions {
     margin-top: .5em;
     user-select: none;
+    color: var(--fg-3);
 }
 
 .release-actions a {

admin/templates/html/edit-release.html

@@ -99,7 +99,7 @@
 
     <div class="card" id="credits">
         <div class="card-header">
-            <h2>Credits ({{len .Release.Credits}})</h2>
+            <h2>Credits <small>({{len .Release.Credits}} total)</small></h2>
             <a class="button edit"
                href="/admin/release/{{.Release.ID}}/editcredits"
                hx-get="/admin/release/{{.Release.ID}}/editcredits"