Something went wrong. Try again.
home to your local SPACEGIRL 💫 arimelody.space
Something went wrong. Try again.
9.1 kB · 482 lines
CSS
at dev
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483@import url("/style/prideflag.css");@import url("/font/inter/inter.css");
:root { --bg-0: #101010; --bg-1: #181818; --bg-2: #282828; --bg-3: #404040;
--fg-0: #b0b0b0; --fg-1: #c0c0c0; --fg-2: #d0d0d0; --fg-3: #e0e0e0;
--col-shadow-0: #0002; --col-shadow-1: #0004; --col-shadow-2: #0006; --col-highlight-0: #ffffff08; --col-highlight-1: #fff1; --col-highlight-2: #fff2;
--col-new: #b3ee5b; --col-on-new: #1b2013; --col-save: #6fd7ff; --col-on-save: #283f48; --col-delete: #ff7171; --col-on-delete: #371919;
--col-warn: #ffe86a; --col-on-warn: var(--bg-0); --col-warn-hover: #ffec81;
--shadow-sm: 0 1px 2px var(--col-shadow-2), inset 0 1px 1px var(--col-highlight-2); --shadow-md: 0 2px 4px var(--col-shadow-1), inset 0 2px 2px var(--col-highlight-1); --shadow-lg: 0 4px 8px var(--col-shadow-0), inset 0 4px 4px var(--col-highlight-0);}
@media (prefers-color-scheme: light) { :root { --bg-0: #e8e8e8; --bg-1: #f0f0f0; --bg-2: #f8f8f8; --bg-3: #ffffff;
--fg-0: #606060; --fg-1: #404040; --fg-2: #303030; --fg-3: #202020;
--col-shadow-0: #0002; --col-shadow-1: #0004; --col-shadow-2: #0008; --col-highlight-0: #fff2; --col-highlight-1: #fff4; --col-highlight-2: #fff8;
--col-warn: #ffe86a; --col-on-warn: var(--fg-3); --col-warn-hover: #ffec81; }}
@media (prefers-color-scheme: green) { :root { --bg-0: #d0d9c7; --bg-1: #e2e5de; --bg-2: #f1f1f1; --bg-3: #ffffff; --fg-0: #626f54; --fg-1: #505c43; --fg-2: #49523e; --fg-3: #2c3522; }}
@media (prefers-color-scheme: purple) { :root { --bg-0: #15121c; --bg-1: #1e1a27; --bg-2: #302a3d; --bg-3: #4a4358; --fg-0: #9e8fbf; --fg-1: #a29bb3; --fg-2: #b9b0cd; --fg-3: #dcd5ec; }}
@media (prefers-color-scheme: dark) { img.icon { -webkit-filter: invert(.9); filter: invert(.9); }}
body { width: calc(100% - 180px); height: calc(100vh - 1em);
margin: 0 0 0 180px; padding: 0; display: flex; flex-direction: row;
font-family: "Inter", sans-serif; font-size: 16px; color: var(--fg-0); background-color: var(--bg-0);
transition: background .1s ease-out, color .1s ease-out;}
h1, h2, h3, h4, h5, h6 { color: var(--fg-3);}
header { display: flex; justify-content: space-between; align-items: center;}nav { position: fixed; top: 0; left: 0; width: 180px; height: calc(100vh - 2em); margin: 0; padding: 1em 0; display: flex; flex-direction: column; justify-content: left;
background-color: var(--bg-1); box-shadow: var(--shadow-md); transition: background .1s ease-out, color .1s ease-out;
user-select: none;}nav .icon { width: fit-content; height: fit-content; padding: 0; margin: 0 auto 1em auto; display: flex;
border-radius: 100%; box-shadow: var(--shadow-sm); overflow: clip;}nav .icon img { width: 3em; height: 3em;}.nav-item { display: flex; color: var(--fg-2); line-height: 2em; font-weight: 500; transition: color .1s ease-out, background-color .1s ease-out;}.nav-item:hover { color: var(--bg-2); background-color: var(--fg-2); text-decoration: none;}.nav-item.active { border-left: 4px solid var(--fg-2);}.nav-item.active a { padding-left: calc(1em - 3.5px);}nav a { padding: .2em 1em; text-decoration: none; color: inherit; width: 100%;}nav a.active { border-left: 5px solid var(--fg-0); padding-left: calc(1em - 5px);}nav hr { width: calc(100% - 2em); margin: .5em auto; border: none; border-bottom: 1px solid var(--fg-0);}nav .section-label { margin: .6em 0 .1em 1.6em; font-size: .6em; text-transform: uppercase; font-weight: 600;}#toggle-nav { position: fixed; top: 16px; left: 16px; padding: 8px; width: 48px; height: 48px; display: none; justify-content: center; align-items: center; z-index: 1;}#toggle-nav img { width: 100%; height: 100%; object-fit: cover; transform: translate(1px, 1px);}#toggle-nav img:hover { -webkit-filter: invert(.9); filter: invert(.9);}@media (prefers-color-scheme: dark) { #toggle-nav img { -webkit-filter: invert(.9); filter: invert(.9); } #toggle-nav img:hover { -webkit-filter: none; filter: none; }}
main { width: 720px; max-width: calc(100% - 2em); height: fit-content; min-height: calc(100vh - 2em); margin: 0 auto; padding: 1em;}main.dashboard { width: 100%;}
a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .1s ease-out, background-color .1s ease-out;}
img.icon { height: .8em; transition: filter .1s ease-out;}
code { background: #303030; color: #f0f0f0; padding: .23em .3em; border-radius: 4px;}
.cards { width: 100%; height: fit-content; display: flex; gap: 2em; flex-wrap: wrap;}
.card { flex-basis: 40em; padding: 1em; background-color: var(--bg-1); border-radius: 16px; box-shadow: var(--shadow-lg);
transition: background .1s ease-out, color .1s ease-out;}main:not(.dashboard) .card { margin-bottom: 1em;}
.card h2 { margin: 0 0 .5em 0;}
.card-header { margin-bottom: 1em; display: flex; gap: 1em; flex-direction: row; align-items: center; justify-content: space-between;}.card-header h1,.card-header h2,.card-header h3 { margin: 0;}.card-header a:hover { text-decoration: underline;}
header :is(h1, h2, h3) small,.card-header :is(h1, h2, h3) small { display: inline-block; font-size: .6em; transform: translateY(-0.1em); color: var(--fg-0);}
.flex-fill { flex-grow: 1;}
.artists-group { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1em;}
#message,#error { margin: 0 0 1em 0; padding: 1em; border-radius: 8px; color: #101010; background: #ffffff;}#message { background: #a9dfff;}#error { background: #ffa9b8;}
a.delete:not(.button) { color: #d22828;}
.button, button { padding: .5em .8em; font-family: inherit; font-size: inherit;
color: inherit; background-color: var(--bg-2); border: none; border-radius: 10em; box-shadow: var(--shadow-sm); font-weight: 500; transition: background .1s ease-out, color .1s ease-out;
cursor: pointer; user-select: none;}button:hover, .button:hover { background: #fff;}button:active, .button:active { background: #d0d0d0;}
.button.new, button.new { color: var(--col-on-new); background-color: var(--col-new);}.button.save, button.save { color: var(--col-on-save); background-color: var(--col-save);}.button.delete, button.delete { color: var(--col-on-delete); background-color: var(--col-delete);}.button:hover, button:hover { color: var(--bg-3); background-color: var(--fg-3);}.button:active, button:active { color: var(--bg-2); background-color: var(--fg-0);}.button[disabled], button[disabled] { color: var(--fg-0) !important; background-color: var(--bg-3) !important; opacity: .5; cursor: default !important;}
form { width: 100%; display: block; color: var(--fg-0);}form label { width: 100%; margin: 1rem 0 .5rem 0; display: block;}form input[type="text"],form input[type="password"] { width: 16em; max-width: 100%; margin: .5em 0; padding: .3em .5em; display: block; border-radius: 4px; border: 1px solid #808080; font-size: inherit; font-family: inherit; color: inherit; background-color: var(--bg-0);}input[disabled] { opacity: .5; cursor: not-allowed;}
@media screen and (max-width: 720px) { main { padding-top: 0; }
body { width: 100%; margin: 0; font-size: 16px; }
nav { width: 100%; left: -100%; font-size: 24px; z-index: 1; transition: transform .2s cubic-bezier(.2,0,.5,1); } nav.open { transform: translateX(100%); }
#toggle-nav { display: flex; }
main > h1:first-of-type { margin-left: 68px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } main > header { margin-left: 68px; } main > header h1 { display: flex; flex-direction: column; font-size: 1.5em; }
.card { flex-basis: 100%; max-width: calc(100vw - 4em); }
.artists-group { grid-template-columns: repeat(3, 1fr); }}