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

17
admin/static/admin.css
View file

@ -15,7 +15,7 @@ body {
background: #f0f0f0;
}
header {
nav {
width: min(720px, calc(100% - 2em));
height: 2em;
margin: 1em auto;
@ -27,10 +27,10 @@ header {
border-radius: .5em;
border: 1px solid #808080;
}
header .icon {
nav .icon {
height: 100%;
}
header .title {
nav .title {
width: auto;
height: 100%;
@ -43,7 +43,7 @@ header .title {
color: inherit;
}
header a {
nav a {
width: auto;
height: 100%;
@ -57,11 +57,11 @@ header a {
color: inherit;
}
header a:hover {
nav a:hover {
background: #00000010;
text-decoration: none;
}
header #logout {
nav #logout {
margin-left: auto;
}
@ -80,6 +80,11 @@ a:hover {
text-decoration: underline;
}
a img {
height: .9em;
transform: translateY(.1em);
}
.card {
margin-bottom: 2em;
}

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;
}