102 lines
2.6 KiB
CSS
102 lines
2.6 KiB
CSS
:root {
|
|
--body-background-color: hsl(0, 0%, 100%);
|
|
--body-color: hsl(0, 0%, 25%);
|
|
--table-sticky-background-color: hsl(0, 0%, 92%);
|
|
--link-color: hsl(210, 90%, 50%);
|
|
--completion-complete-color: hsl(125, 60%, 35%);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--body-background-color: hsl(180, 5%, 15%);
|
|
--body-color: hsl(0, 0%, 80%);
|
|
--table-sticky-background-color: hsl(180, 5%, 15%);
|
|
--link-color: hsl(200, 50%, 60%);
|
|
--completion-complete-color: hsl(125, 50%, 65%);
|
|
}
|
|
}
|
|
|
|
body {
|
|
background-color: var(--body-background-color);
|
|
color: var(--body-color);
|
|
/* Use a modern font stack inspired by Bootstrap 4. */
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
}
|
|
|
|
h1,
|
|
p {
|
|
text-align: center;
|
|
}
|
|
|
|
a {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
margin: 2rem auto 0 auto;
|
|
}
|
|
|
|
td {
|
|
border: 1px solid hsla(0, 0%, 50%, 50%);
|
|
padding: 0.25rem 0.5rem;
|
|
/* Prefer horizontal scrolling to wrapping over several lines. */
|
|
white-space: nowrap;
|
|
}
|
|
|
|
tr:hover {
|
|
background-color: hsla(210, 90%, 50%, 12.5%);
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color: hsla(0, 0%, 50%, 10%);
|
|
}
|
|
|
|
tr:nth-child(even):hover {
|
|
background-color: hsla(210, 90%, 50%, 15%);
|
|
}
|
|
|
|
/* Align class names to the right for better readability and highlight them. */
|
|
td:first-child {
|
|
font-weight: bold;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Sticky header for the table. */
|
|
th {
|
|
background: var(--table-sticky-background-color);
|
|
box-shadow: 0px 2px 2px 0px rgb(0, 0, 0, 25%);
|
|
padding: 4px 2px;
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
z-index: 1; /* Show on top of table cells. */
|
|
top: 0; /* Stick to the top of the screen. */
|
|
cursor: pointer; /* Visually hint that headers can be interacted with. */
|
|
}
|
|
th:first-child {
|
|
border-left: 1px solid var(--table-sticky-background-color); /* Fixes left border during scroll; must have a valid color, transparent doesn't work. */
|
|
}
|
|
|
|
.completion-complete {
|
|
color: var(--completion-complete-color);
|
|
}
|
|
|
|
/* Dynamic coloring depending on the completion percentage. */
|
|
/* Will be fully red at (roughly) 50% completion, and black/white (depending on the theme) at 99%. */
|
|
.completion-incomplete {
|
|
font-weight: bold;
|
|
color: rgb(calc(320 - calc(var(--percentage) * 3.2)), 64, 64);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.completion-incomplete {
|
|
--green-blue: calc(80 + calc(var(--percentage) * 2));
|
|
color: rgb(255, var(--green-blue), var(--green-blue));
|
|
}
|
|
}
|