ari/arimelody.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add release credits update UI

Browse source 
Signed-off-by: ari melody <ari@arimelody.me>
This commit is contained in:
ari melody 2024-08-23 23:08:28 +01:00
parent 7914fba52a
commit 34cddcfdb2
27 changed files with 630 additions and 340 deletions
Download patch file Download diff file Expand all files Collapse all files

122
admin/static/release.css
View file

@ -1,6 +1,6 @@
#release {
margin-bottom: 1em;
padding: 1em;
padding: 1.5em;
display: flex;
flex-direction: row;
gap: 1.2em;
@ -28,7 +28,7 @@
}
.release-info {
margin: .5em 0;
margin: 0;
flex-grow: 1;
display: flex;
flex-direction: column;
@ -96,29 +96,26 @@ button:active, .button:active {
border-color: #808080;
}
button.edit {
button {
color: inherit;
}
button.new {
background: #c4ff6a;
border-color: #84b141;
}
button.edit:hover {
background: #fff;
border-color: #d0d0d0;
}
button.edit:active {
background: #d0d0d0;
border-color: #808080;
}
button.save {
background: #6fd7ff;
border-color: #6f9eb0;
}
button.save:hover {
button.delete {
background: #ff7171;
border-color: #7d3535;
}
button:hover {
background: #fff;
border-color: #d0d0d0;
}
button.save:active {
button:active {
background: #d0d0d0;
border-color: #808080;
}
@ -137,7 +134,7 @@ button[disabled] {
justify-content: right;
}
.credit {
.card.credits .credit {
margin-bottom: .5em;
padding: .5em;
display: flex;
@ -150,15 +147,15 @@ button[disabled] {
border: 1px solid #808080;
}
.credit .artist-avatar {
.card.credits .credit .artist-avatar {
border-radius: .5em;
}
.credit .artist-name {
.card.credits .credit .artist-name {
font-weight: bold;
}
.credit .artist-role small {
.card.credits .credit .artist-role small {
font-size: inherit;
opacity: .66;
}
@ -182,6 +179,10 @@ button[disabled] {
justify-content: space-between;
}
.card-title a.button {
text-decoration: none;
}
.track-id {
width: fit-content;
font-family: "Monaspace Argon", monospace;
@ -217,3 +218,88 @@ button[disabled] {
opacity: 0.75;
}
dialog {
width: min(720px, calc(100% - 2em));
padding: 2em;
border: 1px solid #101010;
border-radius: 8px;
}
dialog header {
margin-bottom: 1em;
background: none;
display: flex;
flex-direction: row;
justify-content: space-between;
}
dialog header h2 {
margin: 0;
}
dialog div.dialog-actions {
margin-top: 1em;
display: flex;
flex-direction: row;
justify-content: end;
gap: .5em;
}
dialog#editcredits ul {
margin: 0;
padding: 0;
list-style: none;
}
dialog#editcredits .credit>div {
margin-bottom: .5em;
padding: .5em;
display: flex;
flex-direction: row;
align-items: center;
gap: 1em;
border-radius: .5em;
background: #f8f8f8f8;
border: 1px solid #808080;
}
dialog#editcredits .credit p {
margin: 0;
}
dialog#editcredits .credit .artist-avatar {
border-radius: .5em;
}
dialog#editcredits .credit .credit-info {
width: 100%;
}
dialog#editcredits .credit .credit-info .credit-attribute {
width: 100%;
display: flex;
}
dialog#editcredits .credit .credit-info .credit-attribute input[type="text"] {
margin-left: .25em;
padding: .2em .4em;
flex-grow: 1;
font-family: inherit;
border: 1px solid #8888;
border-radius: 4px;
color: inherit;
}
dialog#editcredits .credit .artist-name {
font-weight: bold;
}
dialog#editcredits .credit .artist-role small {
font-size: inherit;
opacity: .66;
}
dialog#editcredits .credit button.delete {
margin-left: auto;
}