This repository has been archived on 2025-03-28. You can view files and clone it, but cannot push or open issues or pull requests.
coryd.dev-eleventy/src/assets/styles/components/tab-buttons.css

40 lines
No EOL
1.1 KiB
CSS

#tracks-recent,
#tracks-chart,
#tracks-recent ~ .tracks-recent,
#tracks-chart ~ .tracks-chart {
display: none;
}
#tracks-recent:checked ~ .tracks-recent,
#tracks-chart:checked ~ .tracks-chart {
display: block;
}
input[id="tracks-recent"] ~ .tracks-recent,
input[id="tracks-chart"] ~ .tracks-chart {
margin-top: var(--spacing-base);
}
input[id="tracks-recent"] ~ [for="tracks-recent"]:has(+ [for="tracks-chart"]) {
margin-right: var(--spacing-xs);
}
#tracks-recent:checked ~ [for="tracks-recent"],
#tracks-chart:checked ~ [for="tracks-chart"] {
cursor: not-allowed;
border-color: var(--accent-color);
background-color: var(--accent-color);
}
#tracks-recent:not(:checked) ~ [for="tracks-recent"],
#tracks-chart:not(:checked) ~ [for="tracks-chart"] {
color: var(--accent-color);
background: transparent;
}
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:hover,
#tracks-recent:not(:checked) ~ [for="tracks-recent"]:active,
#tracks-chart:not(:checked) ~ [for="tracks-chart"]:hover,
#tracks-chart:not(:checked) ~ [for="tracks-chart"]:active {
color: var(--accent-color-hover);
}