style.css 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. body {
  2. --background: white;
  3. --color: black;
  4. background: var(--background);
  5. color: var(--color);
  6. accent-color: var(--color);
  7. font-family: system-ui;
  8. display: flex;
  9. flex-direction: column;
  10. height: 100vh;
  11. margin: initial;
  12. }
  13. body.theme-dark {
  14. --background: black;
  15. --color: white;
  16. }
  17. .wrapper {
  18. max-width: 1400px;
  19. margin: auto;
  20. padding: 1em;
  21. }
  22. .wrapper > :first-child,
  23. .wrapper > style:first-child + *,
  24. .wrapper div > :first-child,
  25. .wrapper details:first-child summary {
  26. margin-top: 0;
  27. }
  28. .wrapper > :last-child,
  29. .wrapper div > :last-child {
  30. margin-bottom: 0;
  31. }
  32. .wrapper p a,
  33. .wrapper span a {
  34. font-weight: bold;
  35. }
  36. header {
  37. border-bottom: 1px solid;
  38. }
  39. main {
  40. flex: 1;
  41. overflow: auto;
  42. }
  43. footer {
  44. border-top: 1px solid;
  45. }
  46. header .wrapper,
  47. footer .wrapper {
  48. display: flex;
  49. align-items: center;
  50. gap: 1em;
  51. }
  52. header .wrapper form {
  53. flex: 1;
  54. }
  55. header .wrapper input {
  56. background: none;
  57. border: none;
  58. font-family: inherit;
  59. font-size: inherit;
  60. color: inherit;
  61. width: 100%;
  62. }
  63. main .wrapper .page,
  64. main .wrapper .subpage {
  65. display: grid;
  66. align-items: start;
  67. gap: 1em;
  68. }
  69. main .wrapper .page {
  70. grid-template-columns: auto 250px;
  71. }
  72. main .wrapper .subpage {
  73. grid-template-columns: 250px auto 250px;
  74. }
  75. main .wrapper form div {
  76. margin-bottom: 2em;
  77. }
  78. main .wrapper h1,
  79. main .wrapper h2 {
  80. font-weight: initial;
  81. }
  82. main .wrapper h1 a,
  83. main .wrapper h2 a {
  84. font-weight: bolder;
  85. }
  86. main .wrapper img,
  87. main .wrapper table {
  88. width: 100%;
  89. }
  90. main .wrapper table td {
  91. vertical-align: top;
  92. }
  93. main .wrapper table td[colspan] {
  94. padding: initial !important;
  95. }
  96. main .wrapper table td[colspan] audio,
  97. main .wrapper video {
  98. width: 100%;
  99. margin-top: 4px;
  100. }
  101. main .wrapper table td:not(:nth-child(2)) {
  102. width: 0;
  103. white-space: nowrap;
  104. text-align: right;
  105. }
  106. main .wrapper table td:first-child {
  107. padding-right: 0.5em;
  108. }
  109. main .wrapper table td:last-child {
  110. padding-left: 0.5em;
  111. }
  112. main .wrapper summary {
  113. margin: 1em auto;
  114. font-weight: bold;
  115. cursor: pointer;
  116. }
  117. main .wrapper .results,
  118. main .wrapper .results a {
  119. display: grid;
  120. gap: 1em;
  121. }
  122. main .wrapper .results {
  123. grid-template-columns: repeat(auto-fill, minmax(300px, auto));
  124. }
  125. main .wrapper .results a {
  126. grid-template-columns: 100px auto;
  127. align-items: center;
  128. }
  129. main .wrapper .results img {
  130. width: 100px;
  131. height: 100px;
  132. object-fit: cover;
  133. }
  134. main .wrapper .sidebar {
  135. overflow-wrap: anywhere;
  136. }
  137. main .wrapper .tracks table a,
  138. main .wrapper .sidebar a {
  139. font-weight: bold;
  140. }
  141. main .wrapper .sidebar img {
  142. display: block;
  143. }
  144. @media (min-width: 1001px) {
  145. body.overflow main .wrapper:has(.page, .subpage) {
  146. display: flex;
  147. flex-direction: column;
  148. height: 100%;
  149. padding-bottom: 0;
  150. box-sizing: border-box;
  151. }
  152. body.overflow main .wrapper .page,
  153. body.overflow main .wrapper .subpage {
  154. min-height: 0;
  155. }
  156. body.overflow main .wrapper .page > *,
  157. body.overflow main .wrapper .subpage > * {
  158. max-height: 100%;
  159. padding-bottom: 1em;
  160. overflow: auto;
  161. box-sizing: border-box;
  162. scrollbar-width: none;
  163. }
  164. body.overflow main .wrapper .page > *::-webkit-scrollbar,
  165. body.overflow main .wrapper .subpage > *::-webkit-scrollbar {
  166. display: none;
  167. }
  168. }
  169. a {
  170. color: inherit;
  171. text-decoration: initial;
  172. }
  173. ::selection {
  174. background: var(--color);
  175. color: var(--background);
  176. }
  177. @media (max-width: 1000px) {
  178. main .wrapper .page,
  179. main .wrapper .subpage {
  180. grid-template-columns: auto;
  181. }
  182. }
  183. @media (prefers-color-scheme: dark) {
  184. body:not(.theme-light) {
  185. --background: black;
  186. --color: white;
  187. }
  188. }