73 行
1.1 KiB
CSS
73 行
1.1 KiB
CSS
:root {
|
|
--blue-light: #5e69f0;
|
|
--blue-dark: #2425ac;
|
|
--orange-light: #3f372f;
|
|
--dark-grey: #1b1b1b;
|
|
--text-light: #838383;
|
|
--text-dark: #fff;
|
|
}
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
gap: 0.5em;
|
|
}
|
|
.toolbar label {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
table {
|
|
background: var(--orange-light);
|
|
color: var(--text-on-light);
|
|
border-spacing: 0;
|
|
margin-block-end: 0.2em;
|
|
}
|
|
th, td {
|
|
position: relative;
|
|
border: 1px solid #1f2042;
|
|
min-inline-size: 2.4em;
|
|
line-height: 1.8;
|
|
text-align: center;
|
|
font-weight: normal;
|
|
}
|
|
th:first-child {
|
|
text-align: right;
|
|
}
|
|
td.disabled {
|
|
background-color: var(--dark-grey);
|
|
}
|
|
|
|
table input {
|
|
appearance: none;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
}
|
|
table input:focus-visible {
|
|
outline: 2px solid;
|
|
z-index: 1;
|
|
}
|
|
.inherit-allow {
|
|
background: var(--blue-light);
|
|
}
|
|
table input:checked {
|
|
background: var(--blue-dark);
|
|
}
|
|
table input ~ span {
|
|
pointer-events: none;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
table input:checked ~ span {
|
|
color: var(--text-on-dark);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
color-scheme: dark;
|
|
}
|
|
}
|