:root { --bg-color: #222; --fg-color: #555; --text-color: #dbdbdb; --pad-datasets: 1rem; --pad-main: 2rem; --min-card-size: min(60ch, 33vw); --corner-radius: 1rem; font-size: 12pt; font-family: sans-serif; } body { background-color: var(--bg-color, black); color: var(--text-color, white); margin: 0; } main { max-width: calc(2 * var(--min-card-size) + var(--pad-main) + var(--pad-datasets)); padding-inline: var(--pad-main); margin-inline: auto; container-type: inline-size; } header { text-align: center; margin-inline: .75rem; } #add-btn { width: 7rem; height: 7rem; content: url("add-button-mask.svg"); background: linear-gradient(135deg, pink, darkblue); clip-path: polygon(0% 0%, 100% 0%, 0% 100%); cursor: pointer; position: fixed; top: 0; left: 0; z-index: 1; } #tool-bar { display: flex; flex-direction: row; float: right; gap: .5rem; background-color: var(--fg-color, darkgrey); padding: .5rem 1rem; margin-bottom: var(--pad-datasets); margin-left: var(--pad-datasets); margin-right: var(--pad-datasets); border-radius: 1.5rem; } #search-entry { background: none; border: none; color: var(--text-color); } #search-entry:focus-visible { outline: none; } .datasets { padding-inline: var(--pad-datasets); display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--min-card-size), 1fr)); gap: 1rem; } @container (width < 60ch) { .datasets { grid-template-columns: 1fr; } } .dataset { padding: var(--pad-datasets) 2rem; background-color: var(--fg-color, darkgrey); border-radius: var(--corner-radius); list-style: none; display: inline-flex; align-items: center; justify-content: space-between; box-sizing: border-box; } .upvote { margin-left: 1rem; margin-block: 1rem; display: flex; flex-direction: column; align-items: center; gap: .5em; } /* Buttons */ .upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn { background: var(--icon-url) no-repeat; background-size: contain; border: none; width: var(--icon-size); height: var(--icon-size); padding: 0; overflow: hidden; color: transparent; cursor: pointer; } .downvote-btn, .upvote-btn{ --icon-url: url(triangle.svg); --icon-size: 2rem; } .downvote-btn { transform: rotate(180deg); } #search-btn { --icon-url: url(looking-glass.svg); --icon-size: 1rem; } #filter-btn { --icon-url: url(filter.svg); --icon-size: 1rem; } #sort-btn { --icon-url: url(sort.svg); --icon-size: 1rem; } .divider { width: .05rem; height: 1rem; background-color: var(--bg-color); } #add-btn:is(:hover, :focus-visible) { filter: brightness(1.2); } #add-btn:active { filter: brightness(1.3); } .btn.flat { transition: filter ease-out 50ms; } .btn.flat:is(:hover, :focus-visible) { filter: brightness(1.5); } .btn.flat:active { filter: brightness(1.75); }