style.css 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. :root {
  2. --background: white;
  3. --color: black;
  4. }
  5. body {
  6. background: var(--background);
  7. color: var(--color);
  8. font-family: system-ui;
  9. display: flex;
  10. flex-direction: column;
  11. height: 100vh;
  12. margin: initial;
  13. }
  14. .wrapper {
  15. max-width: 1400px;
  16. margin: auto;
  17. padding: 1em;
  18. }
  19. .wrapper > :first-child,
  20. .wrapper div > :first-child,
  21. .wrapper details:first-child summary {
  22. margin-top: 0;
  23. }
  24. .wrapper > :last-child,
  25. .wrapper div > :last-child {
  26. margin-bottom: 0;
  27. }
  28. header {
  29. border-bottom: 1px solid;
  30. }
  31. main {
  32. flex: 1;
  33. overflow: auto;
  34. }
  35. footer {
  36. border-top: 1px solid;
  37. }
  38. header .wrapper,
  39. footer .wrapper {
  40. display: flex;
  41. align-items: center;
  42. gap: 1em;
  43. }
  44. header .wrapper a {
  45. max-width: 50%;
  46. white-space: nowrap;
  47. overflow: hidden;
  48. text-overflow: ellipsis;
  49. }
  50. header .wrapper form,
  51. footer .wrapper span {
  52. flex: 1;
  53. }
  54. header .wrapper input {
  55. background: none;
  56. border: none;
  57. font-family: inherit;
  58. font-size: inherit;
  59. color: inherit;
  60. width: 100%;
  61. }
  62. main .wrapper .page,
  63. main .wrapper .subpage {
  64. display: grid;
  65. align-items: start;
  66. gap: 1em;
  67. }
  68. main .wrapper .page {
  69. grid-template-columns: auto 250px;
  70. }
  71. main .wrapper .subpage {
  72. grid-template-columns: 250px auto 250px;
  73. }
  74. main .wrapper img,
  75. main .wrapper table {
  76. width: 100%;
  77. }
  78. main .wrapper table td {
  79. vertical-align: top;
  80. }
  81. main .wrapper table td[colspan] {
  82. padding: initial !important;
  83. }
  84. main .wrapper table td[colspan] audio {
  85. width: 100%;
  86. margin-top: 4px;
  87. }
  88. main .wrapper table td:not(:nth-child(2)) {
  89. width: 0;
  90. white-space: nowrap;
  91. text-align: right;
  92. }
  93. main .wrapper table td:first-child {
  94. padding-right: 0.5em;
  95. }
  96. main .wrapper table td:last-child {
  97. padding-left: 0.5em;
  98. }
  99. main .wrapper summary {
  100. margin: 1em auto;
  101. font-weight: bold;
  102. cursor: pointer;
  103. }
  104. main .wrapper .results,
  105. main .wrapper .results a {
  106. display: grid;
  107. gap: 1em;
  108. }
  109. main .wrapper .results {
  110. grid-template-columns: repeat(auto-fill, minmax(300px, auto));
  111. }
  112. main .wrapper .results a {
  113. grid-template-columns: 100px auto;
  114. align-items: center;
  115. }
  116. main .wrapper .results img {
  117. width: 100px;
  118. height: 100px;
  119. object-fit: cover;
  120. }
  121. main .wrapper .tracks table a,
  122. main .wrapper .sidebar a {
  123. font-weight: bold;
  124. }
  125. a {
  126. color: inherit;
  127. text-decoration: initial;
  128. }
  129. #icon {
  130. height: 12px;
  131. }
  132. ::selection {
  133. background: var(--color);
  134. color: var(--background);
  135. }
  136. @media (max-width: 1000px) {
  137. main .wrapper .page,
  138. main .wrapper .subpage {
  139. grid-template-columns: auto;
  140. }
  141. }
  142. @media (prefers-color-scheme: dark) {
  143. :root {
  144. --background: black;
  145. --color: white;
  146. }
  147. #icon {
  148. filter: invert(1);
  149. }
  150. }