@infinite-table/infinite-react
Version:
Infinite Table for React
170 lines (169 loc) • 11.6 kB
CSS
/* vanilla-extract-css-ns:src/components/InfiniteTable/theme-ocean.css.ts.vanilla.css?source=#H4sIAAAAAAAAA+3Z3Y7iIBQA4HufgsRsMpPIxGrtuN2bfRUKp0qmhQZwNNn47pt2zVj7Q6tlZi6WCxMjhwOlcPgSX7hIueAGsNlDDliQHDCWFIiIlZRmgV76I9CfGUIYfwTsgTBQmEKW4USq8rviu72JUVCckJYZZ4jKTCqc89MTF0irXbJARhGhC6JAmAV6J+qplrIKf0bh8sfzr6HB4lbna1uzd8ozAwoD40YqnBD6tlPyIFgrh5JHLBmrhfRNpJxpewrV/Lt7WEatP9xevt8EN7NVQXeMnmZE77nY2cYnlIIwA/0PhS2FPlAKWg/kYPIobFlAKam6c+QgDn3P/bEknZ1GLnz/kldZuIEcM65JkgGz5WyM2Z+MUMPfYWg3Du2Ha75Cgdb2ufWnySRhOCf6DRs4mak57n1P5YM+NGT5a1HuLCNllhDrKevPci11MapKXWd7LhnEKCtLXKO9fn5iNN8mG5pGjZj6xOYsgG1Kmyf70n0ZrtZr1mi8OV8xmkchhShsBNWOT4zmKY020cZWR+tTemVs3ZqSrTDFaL7eJizddhWoy31gZDH9Ngjat0F9jAxSEyMhBViCLhfTQNSRM7OP0bI4tV5wdVSrWC4Yp6S8R7jQYGK0Kk7VM14+HVv79kaJu9ah4+TX9usCHffcAFq1l6KrRjxY58pUGjKgxl5F7rmubnK25zluJTomZVuSqiRqKIiqXtPlPEzZfOdZ00VlMcC4KgZ3NNU0ZWlqK6yW0iY0a0dnOesktCR9uKNtop6gnqCeoJ6gnqCeoJ6gnqCeoIyot/Et0wBaZnRtxSqnZ51nnWedZ91/zbqyEk5V3XK9omHao7qfEVkSMqC64DUKg1er6jYQhEETfr2q67TkgOqWqyBdN93oUHXX7eJpV3OMl93giriBXWv/nWe/c2CcoKdCQQrqch6xpmWB+FcbnismWYQ18i/cL6bWVGw55dYj4HJNrvvRNZ1dbuDlhl4P4ssVvxwDzD3BnCHMDcOmQGwCxVxhbJhjgyAbR7IxKBtg2UiYjaLZvTh7jGdfCLSRRBuLtJFMmwS1T6eaU6x9Dte+BWxfQTaEzrPzX0lMGv1RJwAA */
@layer infinite-table {
.infinite-theme-name--ocean:root,
.infinite-theme-name--ocean {
--infinite-header-cell-border-right: 1px solid color-mix(in srgb, transparent, var(--infinite-color) 40%);
--infinite-header-cell-border: var(--infinite-cell-border);
--infinite-filter-editor-background: var(--infinite-row-odd-background);
--infinite-header-color: var(--infinite-color);
--infinite-header-background: var(--infinite-header-cell-hover-background);
--infinite-cell-color: var(--infinite-color);
--infinite-flashing-background: var(--infinite-accent-color);
--infinite-flashing-up-background: var(--infinite-success-color);
--infinite-flashing-down-background: var(--infinite-error-color);
--infinite-menu-color: var(--infinite-cell-color);
--infinite-menu-background: var(--infinite-header-cell-background);
--infinite-menu-item-disabled-background: var(--infinite-menu-background);
--infinite-menu-item-active-background: var(--infinite-row-hover-background);
--infinite-menu-item-pressed-background: var(--infinite-background);
--infinite-load-mask-text-background: var(--infinite-background);
--infinite-load-mask-color: var(--infinite-cell-color);
--infinite-row-background: var(--infinite-background);
--infinite-grouping-toolbar-background: var(--infinite-background);
--infinite-theme-name: ocean;
--infinite-theme-mode: light;
--infinite-accent-color: #8b5cf6;
--infinite-background: #d1e8fc;
--infinite-color: #04233d;
--infinite-success-color: #64ce64;
--infinite-error-color: #fc6565;
--infinite-header-cell-background: #7dd3fc;
--infinite-header-cell-hover-background: #38bdf8;
--infinite-cell-border-top: 1px solid color-mix(in srgb, transparent, var(--infinite-color) 10%);
--infinite-cell-border-left: none;
--infinite-cell-border-right: none;
--infinite-cell-border-width: 0px;
--infinite-active-cell-indicator-inset: 2px 1px 1px 1px;
--infinite-row-odd-background: color-mix(in srgb, var(--infinite-row-background), white 20%);
--infinite-row-hover-background: var(--infinite-header-cell-background);
--infinite-row-selected-background: var(--infinite-header-cell-hover-background);
--infinite-row-selected-hover-background: color-mix(in srgb, var(--infinite-row-selected-background), white 20%);
--infinite-menu-separator-color: color-mix(in srgb, transparent, var(--infinite-color) 10%);
}
.infinite-theme-mode--light.infinite-theme-mode--light.infinite-theme-name--ocean.infinite-theme-name--ocean,
.infinite-theme-mode--light .infinite-theme-name--ocean,
.infinite-theme-mode--light.infinite-theme-mode--light .infinite-theme-name--ocean,
.infinite-theme-name--ocean .infinite-theme-mode--light,
.infinite-theme-name--ocean .infinite-theme-mode--light.infinite-theme-mode--light {
--infinite-header-cell-border-right: 1px solid color-mix(in srgb, transparent, var(--infinite-color) 40%);
--infinite-header-cell-border: var(--infinite-cell-border);
--infinite-filter-editor-background: var(--infinite-row-odd-background);
--infinite-header-color: var(--infinite-color);
--infinite-header-background: var(--infinite-header-cell-hover-background);
--infinite-cell-color: var(--infinite-color);
--infinite-flashing-background: var(--infinite-accent-color);
--infinite-flashing-up-background: var(--infinite-success-color);
--infinite-flashing-down-background: var(--infinite-error-color);
--infinite-menu-color: var(--infinite-cell-color);
--infinite-menu-background: var(--infinite-header-cell-background);
--infinite-menu-item-disabled-background: var(--infinite-menu-background);
--infinite-menu-item-active-background: var(--infinite-row-hover-background);
--infinite-menu-item-pressed-background: var(--infinite-background);
--infinite-load-mask-text-background: var(--infinite-background);
--infinite-load-mask-color: var(--infinite-cell-color);
--infinite-row-background: var(--infinite-background);
--infinite-grouping-toolbar-background: var(--infinite-background);
--infinite-theme-name: ocean;
--infinite-theme-mode: light;
--infinite-accent-color: #8b5cf6;
--infinite-background: #d1e8fc;
--infinite-color: #04233d;
--infinite-success-color: #64ce64;
--infinite-error-color: #fc6565;
--infinite-header-cell-background: #7dd3fc;
--infinite-header-cell-hover-background: #38bdf8;
--infinite-cell-border-top: 1px solid color-mix(in srgb, transparent, var(--infinite-color) 10%);
--infinite-cell-border-left: none;
--infinite-cell-border-right: none;
--infinite-cell-border-width: 0px;
--infinite-active-cell-indicator-inset: 2px 1px 1px 1px;
--infinite-row-odd-background: color-mix(in srgb, var(--infinite-row-background), white 20%);
--infinite-row-hover-background: var(--infinite-header-cell-background);
--infinite-row-selected-background: var(--infinite-header-cell-hover-background);
--infinite-row-selected-hover-background: color-mix(in srgb, var(--infinite-row-selected-background), white 20%);
--infinite-menu-separator-color: color-mix(in srgb, transparent, var(--infinite-color) 10%);
}
.infinite-theme-mode--dark.infinite-theme-mode--dark.infinite-theme-name--ocean.infinite-theme-name--ocean,
.infinite-theme-mode--dark .infinite-theme-name--ocean,
.infinite-theme-name--ocean .infinite-theme-mode--dark {
--infinite-header-cell-border-right: 1px solid color-mix(in srgb, transparent, var(--infinite-color) 40%);
--infinite-header-cell-border: var(--infinite-cell-border);
--infinite-filter-editor-background: var(--infinite-row-odd-background);
--infinite-header-color: var(--infinite-color);
--infinite-header-background: var(--infinite-header-cell-hover-background);
--infinite-cell-color: var(--infinite-color);
--infinite-flashing-background: var(--infinite-accent-color);
--infinite-flashing-up-background: var(--infinite-success-color);
--infinite-flashing-down-background: var(--infinite-error-color);
--infinite-menu-color: var(--infinite-cell-color);
--infinite-menu-background: var(--infinite-header-cell-background);
--infinite-menu-item-disabled-background: var(--infinite-menu-background);
--infinite-menu-item-active-background: var(--infinite-row-hover-background);
--infinite-menu-item-pressed-background: var(--infinite-background);
--infinite-load-mask-text-background: var(--infinite-background);
--infinite-load-mask-color: var(--infinite-cell-color);
--infinite-row-background: var(--infinite-background);
--infinite-grouping-toolbar-background: var(--infinite-background);
--infinite-theme-name: ocean;
--infinite-theme-mode: dark;
--infinite-accent-color: #8b5cf6;
--infinite-background: #032c4f;
--infinite-color: #96a0aa;
--infinite-success-color: #176417;
--infinite-error-color: #5e1414;
--infinite-header-cell-background: #04233d;
--infinite-header-cell-hover-background: #021f35;
--infinite-cell-border-top: 1px solid color-mix(in srgb, transparent, var(--infinite-cell-color) 10%);
--infinite-cell-border-left: none;
--infinite-cell-border-right: none;
--infinite-cell-border-width: 0px;
--infinite-active-cell-indicator-inset: 2px 1px 1px 1px;
--infinite-row-odd-background: color-mix(in srgb, var(--infinite-row-background), white 2%);
--infinite-row-hover-background: var(--infinite-header-cell-background);
--infinite-row-selected-background: var(--infinite-header-cell-hover-background);
--infinite-row-selected-hover-background: color-mix(in srgb, var(--infinite-row-selected-background), white 2%);
--infinite-menu-separator-color: color-mix(in srgb, transparent, var(--infinite-cell-color) 10%);
}
@media (prefers-color-scheme: dark) {
.infinite-theme-name--ocean:root,
.infinite-theme-name--ocean {
--infinite-header-cell-border-right: 1px solid color-mix(in srgb, transparent, var(--infinite-color) 40%);
--infinite-header-cell-border: var(--infinite-cell-border);
--infinite-filter-editor-background: var(--infinite-row-odd-background);
--infinite-header-color: var(--infinite-color);
--infinite-header-background: var(--infinite-header-cell-hover-background);
--infinite-cell-color: var(--infinite-color);
--infinite-flashing-background: var(--infinite-accent-color);
--infinite-flashing-up-background: var(--infinite-success-color);
--infinite-flashing-down-background: var(--infinite-error-color);
--infinite-menu-color: var(--infinite-cell-color);
--infinite-menu-background: var(--infinite-header-cell-background);
--infinite-menu-item-disabled-background: var(--infinite-menu-background);
--infinite-menu-item-active-background: var(--infinite-row-hover-background);
--infinite-menu-item-pressed-background: var(--infinite-background);
--infinite-load-mask-text-background: var(--infinite-background);
--infinite-load-mask-color: var(--infinite-cell-color);
--infinite-row-background: var(--infinite-background);
--infinite-grouping-toolbar-background: var(--infinite-background);
--infinite-theme-name: ocean;
--infinite-theme-mode: dark;
--infinite-accent-color: #8b5cf6;
--infinite-background: #032c4f;
--infinite-color: #96a0aa;
--infinite-success-color: #176417;
--infinite-error-color: #5e1414;
--infinite-header-cell-background: #04233d;
--infinite-header-cell-hover-background: #021f35;
--infinite-cell-border-top: 1px solid color-mix(in srgb, transparent, var(--infinite-cell-color) 10%);
--infinite-cell-border-left: none;
--infinite-cell-border-right: none;
--infinite-cell-border-width: 0px;
--infinite-active-cell-indicator-inset: 2px 1px 1px 1px;
--infinite-row-odd-background: color-mix(in srgb, var(--infinite-row-background), white 2%);
--infinite-row-hover-background: var(--infinite-header-cell-background);
--infinite-row-selected-background: var(--infinite-header-cell-hover-background);
--infinite-row-selected-hover-background: color-mix(in srgb, var(--infinite-row-selected-background), white 2%);
--infinite-menu-separator-color: color-mix(in srgb, transparent, var(--infinite-cell-color) 10%);
}
}
}