input[type="text"] { font-size: inherit; font-family: inherit; color: inherit; } #release { margin-bottom: 1em; padding: 1.5em; display: flex; flex-direction: row; gap: 1.2em; border-radius: .5em; background: #f8f8f8f8; border: 1px solid #808080; } .release-artwork { width: 200px; text-align: center; } .release-artwork img { width: 100%; aspect-ratio: 1; } .release-artwork img:hover { outline: 1px solid #808080; cursor: pointer; } .release-artwork #remove-artwork { padding: .3em .4em; } .release-info { width: 0; margin: 0; flex-grow: 1; display: flex; flex-direction: column; } .release-title { margin: 0; } #title { width: 100%; margin: 0 -.2em; padding: 0 .2em; font-weight: bold; border-radius: 4px; border: 1px solid transparent; background: transparent; outline: none; cursor: pointer; } #title:hover { background: #ffffff; border-color: #80808080; } #title:active, #title:focus { background: #ffffff; border-color: #808080; } .release-title small { opacity: .75; } .release-info table { width: 100%; margin: .5em 0; border-collapse: collapse; } .release-info table td { padding: .2em; border-bottom: 1px solid #d0d0d0; } .release-info table tr td:first-child { vertical-align: top; opacity: .66; } .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; cursor: pointer; } .release-info table td select, .release-info table td input, .release-info table td textarea { width: 100%; padding: .2em; font-family: inherit; font-size: inherit; color: inherit; border: none; background: none; outline: none; resize: vertical; } .release-info table td:has(select), .release-info table td:has(input), .release-info table td:has(textarea) { padding: 0; } 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.new { background: #c4ff6a; border-color: #84b141; } 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; } .release-actions { margin-top: auto; display: flex; gap: .5em; flex-direction: row; justify-content: right; } 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; } .card-title a.button { text-decoration: none; } /* * RELEASE CREDITS */ .card.credits .credit { margin-bottom: .5em; padding: .5em; display: flex; flex-direction: row; align-items: center; gap: 1em; border-radius: .5em; background: #f8f8f8f8; border: 1px solid #808080; } .card.credits .credit p { margin: 0; } .card.credits .credit .artist-avatar { border-radius: .5em; } .card.credits .credit .artist-name { font-weight: bold; } .card.credits .credit .artist-role small { font-size: inherit; opacity: .66; } #editcredits ul { margin: 0; padding: 0; list-style: none; } #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; } #editcredits .credit { transition: transform .2s ease-out, opacity .2s; } #editcredits .credit.moving { transform: scale(1.05); opacity: .5; } #editcredits .credit p { margin: 0; } #editcredits .credit .artist-avatar { border-radius: .5em; } #editcredits .credit .credit-info { width: 100%; } #editcredits .credit .credit-info .credit-attribute { width: 100%; display: flex; } #editcredits .credit .credit-info .credit-attribute label { display: flex; align-items: center; } #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; } #editcredits .credit .artist-name { font-weight: bold; } #editcredits .credit .artist-role small { font-size: inherit; opacity: .66; } #editcredits .credit button.delete { margin-left: auto; } #addcredit ul { padding: 0; list-style: none; background: #f8f8f8; } #addcredit ul li.new-artist { padding: .5em; display: flex; gap: .5em; cursor: pointer; } #addcredit ul li.new-artist:nth-child(even) { background: #f0f0f0; } #addcredit ul li.new-artist:hover { background: #e0e0e0; } #addcredit .new-artist .artist-id { opacity: .5; } /* * RELEASE LINKS */ .card.links { display: flex; gap: .2em; } .card.links a.button[data-name="spotify"] { background-color: #8cff83 } .card.links a.button[data-name="apple music"] { background-color: #8cd9ff } .card.links a.button[data-name="soundcloud"] { background-color: #fdaa6d } .card.links a.button[data-name="youtube"] { background-color: #ff6e6e } #editlinks table { width: 100%; } #editlinks tr { display: flex; } #editlinks th { padding: 0 .1em; display: flex; align-items: center; text-align: left; } #editlinks tr:nth-child(odd) { background: #f8f8f8; } #editlinks tr th, #editlinks tr td { height: 2em; } #editlinks tr td { padding: 0; } #editlinks tr.link { transition: transform .2s ease-out, opacity .2s; } #editlinks tr.link.moving { transform: scale(1.05); opacity: .5; } #editlinks tr .grabber { width: 2em; display: flex; justify-content: center; cursor: pointer; } #editlinks tr .grabber img { width: 1em; pointer-events: none; } #editlinks tr .link-name { width: 8em; } #editlinks tr .link-url { flex-grow: 1; } #editlinks td a.delete { display: flex; height: 100%; align-items: center; padding: 0 .5em; } #editlinks td input[type="text"] { width: calc(100% - .6em); height: 100%; padding: 0 .3em; border: none; outline: none; cursor: pointer; background: none; } #editlinks td input[type="text"]:hover { background: #0001; } #editlinks td input[type="text"]:focus { outline: 1px solid #808080; } /* * RELEASE TRACKS */ .card.tracks .track { margin-bottom: 1em; padding: 1em; display: flex; flex-direction: column; gap: .5em; border-radius: .5em; background: #f8f8f8f8; border: 1px solid #808080; } .card.tracks .track h3, .card.tracks .track p { margin: 0; } .card.tracks h2.track-title { margin: 0; display: flex; gap: .5em; } .card.tracks h2.track-title .track-number { opacity: .5; } .card.tracks .track-album { margin-left: auto; font-style: italic; font-size: .75em; opacity: .5; } .card.tracks .track-album.empty { color: #ff2020; opacity: 1; } .card.tracks .track-description { font-style: italic; } .card.tracks .track-lyrics { max-height: 10em; overflow-y: scroll; } .card.tracks .track .empty { opacity: 0.75; } #edittracks ul { padding: 0; list-style: none; } #edittracks .track { transition: transform .2s ease-out, opacity .2s; } #edittracks .track.moving { transform: scale(1.05); opacity: .5; } #edittracks .track div { padding: .5em; display: flex; flex-direction: row; justify-content: space-between; align-items: center; cursor: pointer; } #edittracks .track div:active { cursor: move; } #edittracks .track:nth-child(even) { background: #f0f0f0; } #edittracks .track-number { min-width: 1em; display: inline-block; opacity: .5; } #edittracks .track-name { margin: 0; } #addtrack ul { padding: 0; list-style: none; background: #f8f8f8; } #addtrack ul li.new-track { padding: .5em; display: flex; gap: .5em; cursor: pointer; } #addtrack ul li.new-track:nth-child(even) { background: #f0f0f0; } #addtrack ul li.new-track:hover { background: #e0e0e0; } @media only screen and (max-width: 1105px) { #release { flex-direction: column; align-items: center; } .release-info { width: auto; } }