style.css 2.6 KB

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