UI improvements

admin/static/edit-track.css

@@ -1,3 +1,5 @@
+@import url("/admin/static/release-list-item.css");
+
 h1 {
     margin: 0 0 .5em 0;
 }
@@ -22,8 +24,8 @@ h1 {
     flex-direction: column;
 }
 
-.track-title-header {
-    margin: 0;
+.attribute-header {
+    margin: 1em 0 .2em 0;
     opacity: .5;
 }
 
@@ -33,45 +35,36 @@ h1 {
 
 #title {
     width: 100%;
-    margin: -.1em -.2em;
     padding: .1em .2em;
-    font-weight: bold;
-    font-size: inherit;
-    border-radius: 4px;
-    border: 1px solid transparent;
-    background: transparent;
-    outline: none;
-}
-
-#title:hover {
-    background: #ffffff;
-    border-color: #80808080;
-}
-
-#title:active,
-#title:focus {
-    background: #ffffff;
-    border-color: #808080;
-}
-
-.track-title small {
-    opacity: .75;
-}
-
-.track-info h2 {
-    margin-bottom: .4em;
 }
 
 .track-info textarea {
-    width: 100%;
+    width: calc(100% - 1em);
     padding: .5em;
+    resize: vertical;
+}
+
+.track-info input[type="text"],
+.track-info textarea {
+    font-weight: inherit;
     font-family: inherit;
     font-size: inherit;
-    color: inherit;
-    border: none;
-    outline: none;
-    resize: vertical;
+    border: 1px solid transparent;
     border-radius: 4px;
+    outline: none;
+    color: inherit;
+}
+
+.track-info input[type="text"]:hover,
+.track-info textarea:hover {
+    border-color: #80808080;
+}
+
+.track-info input[type="text"]:active,
+.track-info textarea:active,
+.track-info input[type="text"]:focus,
+.track-info textarea:focus {
+    border-color: #808080;
 }
 
 button, .button {
@@ -130,90 +123,3 @@ a.delete {
     justify-content: right;
 }
 
-.release {
-    margin-bottom: 1em;
-    padding: 1em;
-    display: flex;
-    flex-direction: row;
-    gap: 1em;
-
-    border-radius: .5em;
-    background: #f8f8f8f8;
-    border: 1px solid #808080;
-}
-
-.release h3,
-.release p {
-    margin: 0;
-}
-
-.release-artwork {
-    width: 96px;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.release-artwork img {
-    width: 100%;
-    aspect-ratio: 1;
-}
-
-.release-title small {
-    opacity: .75;
-}
-
-.release-links {
-    margin: .5em 0;
-    padding: 0;
-    display: flex;
-    flex-direction: row;
-    list-style: none;
-    flex-wrap: wrap;
-    gap: .5em;
-}
-
-.release-links li {
-    flex-grow: 1;
-}
-
-.release-links a {
-    padding: .5em;
-    display: block;
-
-    border-radius: .5em;
-    text-decoration: none;
-    color: #f0f0f0;
-    background: #303030;
-    text-align: center;
-
-    transition: color .1s, background .1s;
-}
-
-.release-links a:hover {
-    color: #303030;
-    background: #f0f0f0;
-}
-
-.release-actions {
-    margin-top: .5em;
-}
-
-.release-actions a {
-    margin-right: .3em;
-    padding: .3em .5em;
-    display: inline-block;
-
-    border-radius: .3em;
-    background: #e0e0e0;
-
-    transition: color .1s, background .1s;
-}
-
-.release-actions a:hover {
-    color: #303030;
-    background: #f0f0f0;
-
-    text-decoration: none;
-}