DataDash/html/main.css
2024-06-14 13:28:22 +02:00

102 lines
1.9 KiB
CSS

:root {
--bg-color: #222;
--fg-color: #555;
--text-color: #dbdbdb;
--pad-datasets: 1rem;
--pad-main: 2rem;
--min-card-size: 60ch;
--corner-radius: 1rem;
font-size: 12pt;
}
body {
background-color: var(--bg-color, black);
color: var(--text-color, white);
}
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;
}
#tool-bar {
display: flex;
flex-direction: row;
}
#search-bar {
background-color: var(--fg-color, darkgrey);
padding: .5rem 1rem;
width: 100%;
}
#search-entry {
background: none;
border: none;
color: var(--text-color);
}
.datasets {
padding-inline: var(--pad-datasets);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--min-card-size), 1fr));
gap: 1rem;
}
@container (width < 80ch) {
.datasets {
grid-template-columns: 1fr;
}
}
.dataset {
padding: 1rem 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;
}
.upvote-btn, .downvote-btn {
background: url(triangle.svg) no-repeat;
background-size: contain;
border: none;
width: 2em;
height: 2em;
padding: 0;
overflow: hidden;
color: transparent;
cursor: pointer;
}
.downvote-btn {
transform: rotate(180deg);
}
:is(.upvote-btn, .downvote-btn):is(:hover, :focus-visible) {
filter: brightness(1.5);
}
:is(.upvote-btn, .downvote-btn):active {
filter: brightness(1.75);
}