Something went wrong. Try again.
home to your local SPACEGIRL 💫 arimelody.space
Something went wrong. Try again.
9.6 kB · 535 lines
CSS
at dev
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536input[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: 8px; background-color: var(--bg-2); box-shadow: var(--shadow-md);
transition: background .1s ease-out, color .1s ease-out;}
.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 { margin-top: .5em; padding: .3em .6em; background-color: var(--bg-3);}
.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; transition: background .1s ease-out, border-color .1s ease-out;}
#title:hover { background-color: var(--bg-3); border-color: var(--fg-0);}
#title:active,#title:focus { background-color: var(--bg-3);}
.release-title small { opacity: .75;}
.release-info table { width: 100%; margin: .5em 0; border-collapse: collapse; color: var(--fg-2);}.release-info table td { padding: .2em; 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: .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-color: var(--bg-3); 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;}
.release-actions { margin-top: auto; display: flex; gap: .5em; flex-direction: row; justify-content: right; color: var(--fg-3);}
.release-actions button,.release-actions .button { color: var(--fg-2); background-color: var(--bg-3);}
dialog { width: min(720px, calc(100% - 2em)); padding: 2em; border: none; border-radius: 16px; color: var(--fg-0); background-color: var(--bg-0); box-shadow: var(--shadow-lg);
transition: color .1s ease-out, background-color .1s ease-out;}
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-header a.button { text-decoration: none;}
/* * RELEASE CREDITS */
#credits .credit { margin-bottom: .5em; padding: .5em; display: flex; flex-direction: row; align-items: center; gap: 1em;
border-radius: 16px; background-color: var(--bg-2); box-shadow: var(--shadow-md);
cursor: pointer; transition: background .1s ease-out;}#credits .credit:hover { background-color: var(--bg-1);}
#credits .credit p { margin: 0;}
#credits .credit .artist-avatar { border-radius: 12px;}
#credits .credit .artist-name { color: var(--fg-3); font-weight: bold;}
#credits .credit .artist-role small { font-size: inherit; opacity: .66;}
#credits .credit .credit-info { overflow: hidden;}
#credits .credit .credit-info :is(h3, p) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#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: 8px; background-color: var(--bg-2); box-shadow: var(--shadow-md);}
#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: 8px;}
#editcredits .credit .credit-info { width: 100%;}
#editcredits .credit .credit-info .credit-attribute { width: 100%; display: flex;}
#editcredits .credit .credit-info .credit-attribute label { width: auto; margin: 0; display: flex; align-items: center; color: inherit;}
#editcredits .credit .credit-info .credit-attribute input[type="text"] { margin: 0 0 0 .25em; padding: .2em .4em; flex-grow: 1; font-family: inherit; border: none; border-radius: 4px; color: var(--fg-2); background-color: 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;}
#editcredits .credit .artist-role small { font-size: inherit; opacity: .66;}
#editcredits .credit .delete { margin-right: .5em; cursor: pointer; overflow: visible;}#editcredits .credit .delete:hover { text-decoration: underline;}
#addcredit ul { padding: 0; list-style: none; background: #f8f8f8;}
#addcredit ul li.new-artist { padding: .5em; display: flex; gap: .5em; cursor: pointer; background-color: var(--bg-2);}
#addcredit ul li.new-artist:nth-child(even) { background: #f0f0f0; background-color: var(--bg-1);}
#addcredit ul li.new-artist:hover { background: #e0e0e0; background-color: var(--bg-2);}
#addcredit .new-artist .artist-id { opacity: .5;}
/* * RELEASE LINKS */
#links ul { padding: 0; display: flex; gap: .2em;}
#links a img.icon { -webkit-filter: none; filter: none;}
#links a.button:hover { color: var(--bg-3) !important; background-color: var(--fg-3) !important;}
#links a.button[data-name="spotify"] { color: #101010; background-color: #8cff83}
#links a.button[data-name="apple music"] { color: #101010; background-color: #8cd9ff}
#links a.button[data-name="soundcloud"] { color: #101010; background-color: #fdaa6d}
#links a.button[data-name="youtube"] { color: #101010; background-color: #ff6e6e}
#editlinks table { width: 100%;}
#editlinks tr { display: flex; background-color: var(--bg-1); transition: background-color .1s ease-out;}
#editlinks th { padding: 0 .1em; display: flex; align-items: center; text-align: left;}
#editlinks tr:nth-child(odd) { background-color: var(--bg-2);}
#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;}@media (prefers-color-scheme: dark) { #editlinks tr .grabber img { filter: invert(); }}#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%; margin: 0; padding: 0 .3em; border: none; border-radius: 0; outline: none; cursor: pointer; background: none;}#editlinks td input[type="text"]:hover { background: #0001;}#editlinks td input[type="text"]:focus { outline: 1px solid #808080;}
#edittracks ul { padding: 0; list-style: none;}
#edittracks .track { background-color: var(--bg-2); 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-color: var(--bg-1);}
#edittracks .track-number { min-width: 1em; display: inline-block; opacity: .5;}
#edittracks .track-name { margin: 0;}
#addtrack ul { padding: 0; list-style: none;}
#addtrack ul li.new-track { padding: .5em; display: flex; gap: .5em; background-color: var(--bg-0); cursor: pointer; transition: background-color .1s ease-out, color .1s ease-out;}
#addtrack ul li.new-track:nth-child(even) { background: color-mix(in srgb, var(--bg-0) 95%, #fff);}
#addtrack ul li.new-track:hover { background: color-mix(in srgb, var(--bg-0) 90%, #fff);}
@media only screen and (max-width: 1105px) { #release { flex-direction: column; align-items: center; } .release-info { width: auto; }}