123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230 |
- body {
- --background: white;
- --color: black;
- background: var(--background);
- color: var(--color);
- accent-color: var(--color);
- font-family: system-ui;
- display: flex;
- flex-direction: column;
- height: 100vh;
- margin: initial;
- }
- body.theme-dark {
- --background: black;
- --color: white;
- }
- .wrapper {
- max-width: 1400px;
- margin: auto;
- padding: 1em;
- }
- .wrapper > :first-child,
- .wrapper > style:first-child + *,
- .wrapper div > :first-child,
- .wrapper details:first-child summary {
- margin-top: 0;
- }
- .wrapper > :last-child,
- .wrapper div > :last-child {
- margin-bottom: 0;
- }
- .wrapper p a,
- .wrapper span a {
- font-weight: bold;
- }
- header {
- border-bottom: 1px solid;
- }
- main {
- flex: 1;
- overflow: auto;
- }
- footer {
- border-top: 1px solid;
- }
- header .wrapper,
- footer .wrapper {
- display: flex;
- align-items: center;
- gap: 1em;
- }
- header .wrapper form {
- flex: 1;
- }
- header .wrapper input {
- background: none;
- border: none;
- font-family: inherit;
- font-size: inherit;
- color: inherit;
- width: 100%;
- }
- main .wrapper .page,
- main .wrapper .subpage {
- display: grid;
- align-items: start;
- gap: 1em;
- }
- main .wrapper .page {
- grid-template-columns: auto 250px;
- }
- main .wrapper .subpage {
- grid-template-columns: 250px auto 250px;
- }
- main .wrapper form div {
- margin-bottom: 2em;
- }
- main .wrapper h1,
- main .wrapper h2 {
- font-weight: initial;
- }
- main .wrapper h1 a,
- main .wrapper h2 a {
- font-weight: bolder;
- }
- main .wrapper img,
- main .wrapper table {
- width: 100%;
- }
- main .wrapper table td {
- vertical-align: top;
- }
- main .wrapper table td[colspan] {
- padding: initial !important;
- }
- main .wrapper table td[colspan] audio,
- main .wrapper video {
- width: 100%;
- margin-top: 4px;
- }
- main .wrapper table td:not(:nth-child(2)) {
- width: 0;
- white-space: nowrap;
- text-align: right;
- }
- main .wrapper table td:first-child {
- padding-right: 0.5em;
- }
- main .wrapper table td:last-child {
- padding-left: 0.5em;
- }
- main .wrapper summary {
- margin: 1em auto;
- font-weight: bold;
- cursor: pointer;
- }
- main .wrapper .results,
- main .wrapper .results a {
- display: grid;
- gap: 1em;
- }
- main .wrapper .results {
- grid-template-columns: repeat(auto-fill, minmax(300px, auto));
- }
- main .wrapper .results a {
- grid-template-columns: 100px auto;
- align-items: center;
- }
- main .wrapper .results img {
- width: 100px;
- height: 100px;
- object-fit: cover;
- }
- main .wrapper .sidebar {
- overflow-wrap: anywhere;
- }
- main .wrapper .tracks table a,
- main .wrapper .sidebar a {
- font-weight: bold;
- }
- main .wrapper .sidebar img {
- display: block;
- }
- @media (min-width: 1001px) {
- body.overflow main .wrapper:has(.page, .subpage) {
- display: flex;
- flex-direction: column;
- height: 100%;
- padding-bottom: 0;
- box-sizing: border-box;
- }
- body.overflow main .wrapper .page,
- body.overflow main .wrapper .subpage {
- min-height: 0;
- }
- body.overflow main .wrapper .page > *,
- body.overflow main .wrapper .subpage > * {
- max-height: 100%;
- padding-bottom: 1em;
- overflow: auto;
- box-sizing: border-box;
- scrollbar-width: none;
- }
- body.overflow main .wrapper .page > *::-webkit-scrollbar,
- body.overflow main .wrapper .subpage > *::-webkit-scrollbar {
- display: none;
- }
- }
- a {
- color: inherit;
- text-decoration: initial;
- }
- ::selection {
- background: var(--color);
- color: var(--background);
- }
- @media (max-width: 1000px) {
- main .wrapper .page,
- main .wrapper .subpage {
- grid-template-columns: auto;
- }
- }
- @media (prefers-color-scheme: dark) {
- body:not(.theme-light) {
- --background: black;
- --color: white;
- }
- }
|