ari/arimelody-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

admin dashboard early UI refresh

Browse source
This commit is contained in:
ari melody 2025-10-19 05:01:55 +01:00
parent 028ed60293
commit 13a84f7f25
Signed by: ari
GPG key ID: CF99829C92678188
12 changed files with 249 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

67
admin/static/edit-release.css
View file

@ -12,8 +12,8 @@ input[type="text"] {
gap: 1.2em;
border-radius: 8px;
background: #f8f8f8f8;
border: 1px solid #808080;
background: var(--bg-2);
box-shadow: var(--shadow-md);
}
.release-artwork {
@ -29,7 +29,8 @@ input[type="text"] {
cursor: pointer;
}
.release-artwork #remove-artwork {
padding: .3em .4em;
margin-top: .5em;
padding: .3em .6em;
}
.release-info {
@ -54,17 +55,17 @@ input[type="text"] {
background: transparent;
outline: none;
cursor: pointer;
transition: background .1s ease-out, border-color .1s ease-out;
}
#title:hover {
background: #ffffff;
border-color: #80808080;
background: var(--bg-3);
border-color: var(--fg-0);
}
#title:active,
#title:focus {
background: #ffffff;
border-color: #808080;
background: var(--bg-3);
}
.release-title small {
@ -75,19 +76,21 @@ input[type="text"] {
width: 100%;
margin: .5em 0;
border-collapse: collapse;
color: var(--fg-2);
}
.release-info table td {
padding: .2em;
border-bottom: 1px solid #d0d0d0;
border-bottom: 1px solid color-mix(in srgb, var(--fg-0) 25%, transparent);
transition: background .1s ease-out, border-color .1s ease-out;
}
.release-info table tr td:first-child {
vertical-align: top;
opacity: .66;
opacity: .5;
}
.release-info table tr td:not(:first-child) select:hover,
.release-info table tr td:not(:first-child) input:hover,
.release-info table tr td:not(:first-child) textarea:hover {
background: #e8e8e8;
background: var(--bg-3);
cursor: pointer;
}
.release-info table td select,
@ -117,11 +120,19 @@ input[type="text"] {
justify-content: right;
}
.release-actions button,
.release-actions .button {
color: var(--fg-2);
background: var(--bg-3);
}
dialog {
width: min(720px, calc(100% - 2em));
padding: 2em;
border: 1px solid #101010;
border-radius: 8px;
border-radius: 16px;
color: var(--fg-0);
background: var(--bg-0);
}
dialog header {
@ -160,9 +171,9 @@ dialog div.dialog-actions {
align-items: center;
gap: 1em;
border-radius: 8px;
background: #f8f8f8f8;
border: 1px solid #808080;
border-radius: 16px;
background: var(--bg-2);
box-shadow: var(--shadow-md);
}
.card.credits .credit p {
@ -170,10 +181,11 @@ dialog div.dialog-actions {
}
.card.credits .credit .artist-avatar {
border-radius: 8px;
border-radius: 12px;
}
.card.credits .credit .artist-name {
color: var(--fg-3);
font-weight: bold;
}
@ -197,8 +209,8 @@ dialog div.dialog-actions {
gap: 1em;
border-radius: 8px;
background: #f8f8f8f8;
border: 1px solid #808080;
background: var(--bg-2);
box-shadow: var(--shadow-md);
}
#editcredits .credit {
@ -232,6 +244,7 @@ dialog div.dialog-actions {
margin: 0;
display: flex;
align-items: center;
color: inherit;
}
#editcredits .credit .credit-info .credit-attribute input[type="text"] {
@ -239,15 +252,17 @@ dialog div.dialog-actions {
padding: .2em .4em;
flex-grow: 1;
font-family: inherit;
border: 1px solid #8888;
border: none;
border-radius: 4px;
color: inherit;
color: var(--fg-2);
background: var(--bg-0);
}
#editcredits .credit .credit-info .credit-attribute input[type="checkbox"] {
margin: 0 .3em;
}
#editcredits .credit .artist-name {
color: var(--fg-2);
font-weight: bold;
}
@ -256,8 +271,12 @@ dialog div.dialog-actions {
opacity: .66;
}
#editcredits .credit button.delete {
margin-left: auto;
#editcredits .credit .delete {
margin-right: .5em;
cursor: pointer;
}
#editcredits .credit .delete:hover {
text-decoration: underline;
}
#addcredit ul {
@ -400,9 +419,9 @@ dialog div.dialog-actions {
flex-direction: column;
gap: .5em;
border-radius: 8px;
background: #f8f8f8f8;
border: 1px solid #808080;
border-radius: 16px;
background: var(--bg-2);
box-shadow: var(--shadow-md);
}
.card.tracks .track h3,