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

tracks can be edited! + major template overhaul

Browse source
This commit is contained in:
ari melody 2024-08-31 15:25:44 +01:00
parent 99b6a21179
commit 63122eb428
Signed by: ari
GPG key ID: CF99829C92678188
21 changed files with 674 additions and 221 deletions
Download patch file Download diff file Expand all files Collapse all files

219
admin/static/edit-track.css Normal file
View file

@ -0,0 +1,219 @@
h1 {
margin: 0 0 .5em 0;
}
#track {
margin-bottom: 1em;
padding: 1.5em;
display: flex;
flex-direction: row;
gap: 1.2em;
border-radius: .5em;
background: #f8f8f8f8;
border: 1px solid #808080;
}
.track-info {
width: 100%;
margin: 0;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.track-title-header {
margin: 0;
opacity: .5;
}
.track-title {
margin: 0;
}
#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%;
padding: .5em;
font-family: inherit;
font-size: inherit;
color: inherit;
border: none;
outline: none;
resize: vertical;
border-radius: 4px;
}
button, .button {
padding: .5em .8em;
font-family: inherit;
font-size: inherit;
border-radius: .5em;
border: 1px solid #a0a0a0;
background: #f0f0f0;
color: inherit;
}
button:hover, .button:hover {
background: #fff;
border-color: #d0d0d0;
}
button:active, .button:active {
background: #d0d0d0;
border-color: #808080;
}
button {
color: inherit;
}
button.save {
background: #6fd7ff;
border-color: #6f9eb0;
}
button.delete {
background: #ff7171;
border-color: #7d3535;
}
button:hover {
background: #fff;
border-color: #d0d0d0;
}
button:active {
background: #d0d0d0;
border-color: #808080;
}
button[disabled] {
background: #d0d0d0 !important;
border-color: #808080 !important;
opacity: .5;
cursor: not-allowed !important;
}
a.delete {
color: #d22828;
}
.track-actions {
margin-top: 1em;
display: flex;
gap: .5em;
flex-direction: row;
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;
}