toplist.css

body,
body *::backdrop {
  --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
    "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
    "Helvetica Neue", sans-serif;
  --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  --standard-border-radius: 5px;
  --bg: #ffffff; /* #fff */
  --accent-bg: #f5f5f5; /* #f5f7ff */
  --text: #212121; /* #212121 */
  --text-light: #585858; /* #585858 */
  --border: #8a8a8a; /* #898ea4 */
  --accent: #4b4b4b; /* #0d47a1 */
  --accent-hover: var(--text); /* #1266e2 */
  --accent-text: var(--bg);
  --code: #696969; /* #d81b60 */
  --preformatted: #444444; /* #444 */
  --marked: #cccccc; /* #fd3 */
  --disabled: #efefef; /* #efefef */
}

@media (prefers-color-scheme: dark) {
  body,
  body *::backdrop {
    color-scheme: dark;
    --bg: #121212; /* #212121 adjusted to be darker */
    --accent-bg: #1c1c1c; /* #2b2b2b adjusted to be darker */
    --text: #dcdcdc; /* #dcdcdc */
    --text-light: #ababab; /* #ababab */
    --accent: #b5b5b5; /* #ffb300 */
    --accent-hover: var(--text); /* #ffe099 */
    --accent-text: var(--bg);
    --code: #cccccc; /* #f06292 */
    --preformatted: #cccccc; /* #ccc */
    --disabled: #111111; /* #111 */
  }
}

.subtle {
  font-style: italic;
  opacity: 0.8;
}
body h1 {
  font-size: 2rem;
}

body h2 {
  font-size: 1.2rem;
}

ul {
  list-style-type: none;
  padding: unset;
}

.action,
a.action {
  text-align: center;
  background-color: var(--bg);
  color: var(--text);
}

.action:hover {
  color: var(--bg);
}

.action:hover svg {
  fill: var(--bg);
}

.action svg {
  fill: var(--text);
  height: 1lh;
  vertical-align: middle;
}

dialog {
  min-width: min(45rem, 90%);
}

.notice--assertive {
  --accent-bg: lightpink;
  --border: indianred;
}
.float-right {
  float: right;
}

body:has(dialog[open]) {
  overflow: hidden;
}

.list-item details {
  margin-bottom: 0px;
}

.list-item details:not(:hover) {
  background: none;
  border-color: #00000000;
}

.list-item details > summary {
  list-style: none;
  font-weight: normal;
}

.list-item details > summary::marker, /* Latest Chrome, Edge, Firefox */
.list-item details > summary::-webkit-details-marker /* Safari */ {
  display: none;
}

#qr-code svg path {
  fill: var(--border) !important;
  stroke: var(--border) !important;
}

.list .actions {
  font-size: 0;
}

.list .actions .action,
.list .actions .action {
  font-size: 1.15rem;
  display: inline-block;
  margin: 0 0.2ch 0.2ch 0;
}