113 行
2.8 KiB
CSS
113 行
2.8 KiB
CSS
.counts-grid > tbody > tr > td {
|
|
@apply h-6;
|
|
}
|
|
|
|
.counts-summary > tbody > tr > td,
|
|
.counts-summary > thead > tr > th {
|
|
padding: 0.5rem 0.75rem;
|
|
}
|
|
|
|
.counts-grid > tbody > tr > td[data-counts-text] {
|
|
position: relative;
|
|
outline: 1px solid #64748b;
|
|
outline-offset: -1px;
|
|
user-select: text;
|
|
-webkit-user-select: text;
|
|
-webkit-touch-callout: default;
|
|
cursor: text;
|
|
}
|
|
|
|
.dark .counts-grid > tbody > tr > td[data-counts-text] {
|
|
outline-color: #94a3b8;
|
|
}
|
|
|
|
.counts-text-caret {
|
|
position: absolute;
|
|
width: 1px;
|
|
background-color: currentColor;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
animation: counts-caret-blink 1s step-end infinite;
|
|
}
|
|
|
|
@keyframes counts-caret-blink {
|
|
0%, 49% { opacity: 1; }
|
|
50%, 100% { opacity: 0; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.counts-text-caret { animation: none; }
|
|
}
|
|
|
|
.counts-grid > tbody > tr:nth-child(odd) > td:not([data-counts-selected]) {
|
|
@apply bg-white text-slate-900;
|
|
}
|
|
|
|
.counts-grid > tbody > tr:nth-child(even) > td:not([data-counts-selected]) {
|
|
@apply bg-slate-50 text-slate-900;
|
|
}
|
|
|
|
.dark .counts-grid > tbody > tr:nth-child(odd) > td:not([data-counts-selected]) {
|
|
@apply bg-slate-950 text-slate-100;
|
|
}
|
|
|
|
.dark .counts-grid > tbody > tr:nth-child(even) > td:not([data-counts-selected]) {
|
|
@apply bg-slate-900 text-slate-100;
|
|
}
|
|
|
|
.counts-grid > thead {
|
|
@apply bg-slate-200 text-slate-950;
|
|
}
|
|
|
|
.counts-grid > thead > tr > th {
|
|
@apply border-b border-r border-slate-300 bg-slate-200 text-slate-950;
|
|
}
|
|
|
|
.dark .counts-grid > thead,
|
|
.dark .counts-grid > thead > tr > th {
|
|
@apply border-slate-600 bg-slate-800 text-slate-50;
|
|
}
|
|
|
|
.counts-grid > tbody > tr > td {
|
|
@apply border-r border-slate-200 dark:border-slate-700;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
.counts-grid > tbody > tr > td:has(> .counts-nested) {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.counts-nested .counts-grid > thead > tr > th,
|
|
.counts-nested .counts-grid > tbody > tr > td {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.counts-nested {
|
|
@apply border-l-2 border-slate-300 dark:border-slate-600;
|
|
}
|
|
|
|
/* Aggregate kind is semantic; only aggregate rows receive a background. */
|
|
.counts-grid > tbody > tr > td[data-counts-total],
|
|
.counts-grid > thead > tr > th[data-counts-total] {
|
|
@apply border-l border-l-slate-400 font-semibold dark:border-l-slate-500;
|
|
}
|
|
|
|
.counts-grid > tbody > tr > td[data-counts-row-total='subtotal']:not([data-counts-selected]) {
|
|
background-color: #e2e8f0;
|
|
color: #0f172a;
|
|
font-weight: 600;
|
|
}
|
|
.counts-grid > tbody > tr > td[data-counts-row-total='grand_total']:not([data-counts-selected]) {
|
|
background-color: #cbd5e1;
|
|
color: #0f172a;
|
|
font-weight: 700;
|
|
}
|
|
.dark .counts-grid > tbody > tr > td[data-counts-row-total='subtotal']:not([data-counts-selected]) {
|
|
background-color: #334155;
|
|
color: #f1f5f9;
|
|
}
|
|
.dark .counts-grid > tbody > tr > td[data-counts-row-total='grand_total']:not([data-counts-selected]) {
|
|
background-color: #475569;
|
|
color: #fff;
|
|
}
|