| /* |
| * Copyright (C) 2013 Apple Inc. All rights reserved. |
| * |
| * Redistribution and use in source and binary forms, with or without |
| * modification, are permitted provided that the following conditions |
| * are met: |
| * 1. Redistributions of source code must retain the above copyright |
| * notice, this list of conditions and the following disclaimer. |
| * 2. Redistributions in binary form must reproduce the above copyright |
| * notice, this list of conditions and the following disclaimer in the |
| * documentation and/or other materials provided with the distribution. |
| * |
| * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS'' |
| * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, |
| * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR |
| * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS |
| * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR |
| * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF |
| * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS |
| * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN |
| * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) |
| * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF |
| * THE POSSIBILITY OF SUCH DAMAGE. |
| */ |
| |
| .data-grid { |
| position: relative; |
| outline: none; |
| |
| --data-grid-column-border-start: 1px solid transparent; |
| --data-grid-column-border-end: 0.5px solid var(--border-color); |
| } |
| |
| .data-grid .highlight { |
| background-color: hsl(40, 100%, 85%); |
| } |
| |
| .data-grid tr.selected .highlight { |
| background-color: transparent; |
| } |
| |
| .data-grid table { |
| table-layout: fixed; |
| border-spacing: 0; |
| border-collapse: collapse; |
| width: 100%; |
| } |
| |
| .data-grid .data-container { |
| position: absolute; |
| top: 23px; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| overflow-x: hidden; |
| overflow-y: scroll; |
| } |
| |
| .data-grid.inline .data-container { |
| position: static; |
| overflow-y: auto; |
| } |
| |
| .data-grid.inline { |
| border: 0.5px solid var(--border-color); |
| } |
| |
| .data-grid > .header-wrapper { |
| border-bottom: 1px solid var(--border-color); |
| } |
| |
| .data-grid.no-header > .header-wrapper { |
| display: none; |
| } |
| |
| .data-grid.no-header .data-container { |
| top: 0; |
| } |
| |
| .data-grid th { |
| height: 22px; |
| padding: 0 6px; |
| text-align: start; |
| vertical-align: middle; |
| font-weight: normal; |
| white-space: nowrap; |
| background-color: var(--background-color); |
| overflow: hidden; |
| } |
| |
| body[dir=ltr] .data-grid :matches(th, td):not(:last-child) { |
| border-right: var(--data-grid-column-border-end); |
| } |
| |
| body[dir=rtl] .data-grid :matches(th, td):not(:last-child) { |
| border-left: var(--data-grid-column-border-end); |
| } |
| |
| .data-grid th.sortable:active { |
| background-color: hsl(0, 0%, 70%); |
| } |
| |
| .data-grid th:matches(.sort-ascending, .sort-descending) { |
| background-color: hsl(0, 0%, 90%); |
| } |
| |
| .data-grid tr.filler { |
| display: table-row !important; |
| height: auto !important; |
| } |
| |
| .data-grid tr.filler td { |
| height: auto !important; |
| padding: 0 !important; |
| } |
| |
| .data-grid table.data { |
| position: relative; |
| left: 0; |
| right: 0; |
| height: 100%; |
| border-top: 0 none transparent; |
| table-layout: fixed; |
| } |
| |
| .data-grid:not(.variable-height-rows) table.data { |
| background-image: linear-gradient(to bottom, var(--odd-zebra-stripe-row-background-color), var(--odd-zebra-stripe-row-background-color) 50%, var(--even-zebra-stripe-row-background-color) 50%, var(--even-zebra-stripe-row-background-color)); |
| background-size: 100% 40px; |
| } |
| |
| .data-grid:not(.variable-height-rows) > .data-container > table.data > tbody > tr > td > .cell-content { |
| height: 16px; |
| } |
| |
| .data-grid:not(.variable-height-rows) table.data.even-first-zebra-stripe { |
| background-image: linear-gradient(to bottom, var(--even-zebra-stripe-row-background-color), var(--even-zebra-stripe-row-background-color) 50%, var(--odd-zebra-stripe-row-background-color) 50%, var(--odd-zebra-stripe-row-background-color)); |
| } |
| |
| .data-grid.inline table.data { |
| position: static; |
| } |
| |
| .data-grid table.data tr { |
| display: none; |
| } |
| |
| .data-grid table.data tr.revealed { |
| display: table-row; |
| } |
| |
| .data-grid.variable-height-rows table.data tr:nth-child(odd) { |
| background-color: var(--odd-zebra-stripe-row-background-color); |
| } |
| |
| .data-grid.variable-height-rows table.data tr:nth-child(even) { |
| background-color: var(--even-zebra-stripe-row-background-color); |
| } |
| |
| .data-grid.variable-height-rows.even-first-zebra-stripe table.data tr:nth-child(odd) { |
| background-color: var(--even-zebra-stripe-row-background-color); |
| } |
| |
| .data-grid.variable-height-rows.even-first-zebra-stripe table.data tr:nth-child(even) { |
| background-color: var(--odd-zebra-stripe-row-background-color); |
| } |
| |
| .data-grid.variable-height-rows table.data tr.filler { |
| /* FIXME: This should show an alternating stripe, but it needs to know if the last row is even or odd. */ |
| background-color: var(--even-zebra-stripe-row-background-color); |
| } |
| |
| .data-grid td { |
| vertical-align: top; |
| height: 16px; |
| line-height: 16px; |
| padding: 2px 6px; |
| white-space: nowrap; |
| overflow: hidden; |
| font-family: -webkit-system-font, sans-serif; |
| font-variant-numeric: tabular-nums; |
| } |
| |
| .data-grid td.spanning { |
| text-align: center; |
| color: hsl(0, 0%, 30%); |
| background-color: hsl(0, 0%, 95%); |
| pointer-events: none; |
| } |
| |
| .data-grid:focus tr.selected td:not(:last-child) { |
| --border-end-color: hsla(0, 0%, var(--foreground-lightness), 0.05); |
| } |
| |
| body[dir=ltr] .data-grid:focus tr.selected td:not(:last-child) { |
| border-right-color: var(--border-end-color); |
| } |
| |
| body[dir=rtl] .data-grid:focus tr.selected td:not(:last-child) { |
| border-left-color: var(--border-end-color); |
| } |
| |
| .data-grid :matches(th, td) > div { |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| overflow: hidden; |
| } |
| |
| /* FIXME: Remove this once <https://webkit.org/b/169972> is fixed. */ |
| .data-grid td.editing > div { |
| text-overflow: clip; |
| } |
| |
| .data-grid .centered div { |
| text-align: center; |
| } |
| |
| .data-grid .right div { |
| text-align: end; |
| } |
| |
| .data-grid th.sortable div { |
| position: relative; |
| } |
| |
| .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child { |
| -webkit-padding-end: 12px; |
| } |
| |
| .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after { |
| position: absolute; |
| top: 1px; |
| bottom: 0; |
| width: 9px; |
| height: 8px; |
| margin-bottom: auto; |
| margin-top: auto; |
| content: ""; |
| background-size: 9px 8px; |
| background-repeat: no-repeat; |
| } |
| |
| body[dir=ltr] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after { |
| right: 0; |
| } |
| |
| body[dir=rtl] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after { |
| left: 0; |
| } |
| |
| .data-grid th.sort-ascending > div:first-child::after { |
| background-image: url(../Images/SortIndicatorArrows.svg#up-arrow-normal); |
| } |
| |
| .data-grid th.sort-descending > div:first-child::after { |
| background-image: url(../Images/SortIndicatorArrows.svg#down-arrow-normal); |
| } |
| |
| .data-grid button { |
| line-height: 19px; |
| } |
| |
| .data-grid tr.parent td.disclosure::before { |
| width: 13px; |
| height: 100%; |
| content: ""; |
| background-image: url(../Images/DisclosureTriangles.svg#closed-normal); |
| background-position-y: center; |
| background-size: 13px 13px; |
| background-repeat: no-repeat; |
| } |
| |
| body[dir=rtl] .data-grid tr.parent td.disclosure::before { |
| transform: scaleX(-1); |
| } |
| |
| body[dir=ltr] .data-grid tr.parent td.disclosure::before { |
| float: left; |
| } |
| |
| body[dir=rtl] .data-grid tr.parent td.disclosure::before { |
| float: right; |
| } |
| |
| .data-grid tr.parent.expanded td.disclosure::before { |
| background-image: url(../Images/DisclosureTriangles.svg#open-normal); |
| } |
| |
| .data-grid:focus tr.parent.selected td.disclosure::before { |
| background-image: url(../Images/DisclosureTriangles.svg#closed-selected); |
| } |
| |
| .data-grid:focus tr.parent.expanded.selected td.disclosure::before { |
| background-image: url(../Images/DisclosureTriangles.svg#open-selected); |
| } |
| |
| .data-grid tr.selected { |
| background-color: var(--selected-background-color-unfocused) !important; |
| color: inherit !important; |
| } |
| |
| .data-grid:focus tr.selected { |
| background-color: var(--selected-background-color) !important; |
| color: var(--selected-foreground-color) !important; |
| } |
| |
| .data-grid tr:not(.parent) td.disclosure { |
| text-indent: 13px; |
| } |
| |
| .data-grid td .subtitle { |
| color: hsla(0, 0%, 0%, 0.7); |
| } |
| |
| .data-grid td .subtitle::before { |
| content: "\00A0\2014\00A0"; /* — */; |
| } |
| |
| .data-grid:focus tr.selected td .subtitle { |
| color: hsla(0, 0%, 100%, 0.9); |
| } |
| |
| .data-grid td.error { |
| color: var(--error-text-color); |
| } |
| |
| .data-grid tr.selected td.error { |
| color: inherit; |
| } |
| |
| .data-grid td .icon { |
| display: inline-block; |
| width: 16px; |
| height: 16px; |
| -webkit-margin-end: 2px; |
| vertical-align: top; |
| } |
| |
| .data-grid td .go-to-arrow { |
| display: none; |
| -webkit-margin-start: 2px; |
| } |
| |
| body[dir=ltr] .data-grid td .go-to-arrow { |
| float: right; |
| } |
| |
| body[dir=rtl] .data-grid td .go-to-arrow { |
| float: left; |
| } |
| |
| .data-grid tr:matches(.selected, :hover) .go-to-arrow { |
| display: block; |
| } |
| |
| .data-grid .resizer { |
| z-index: var(--z-index-resizer); |
| |
| --data-grid-resizer-translateX: -2.5px; |
| } |
| |
| body[dir=ltr] .data-grid .resizer { |
| transform: translateX(var(--data-grid-resizer-translateX)); |
| } |
| |
| body[dir=rtl] .data-grid .resizer { |
| transform: translateX(calc(-1 * var(--data-grid-resizer-translateX))); |
| } |
| |
| .data-grid table:matches(.header, .data) { |
| /* Hide starting border from first hidden columns. */ |
| width: calc(100% + 1px); |
| -webkit-margin-start: -1px; |
| } |
| |
| body[dir=ltr] .data-grid :matches(th, td):first-child { |
| border-left: var(--data-grid-column-border-start); |
| } |
| |
| body[dir=rtl] .data-grid :matches(th, td):first-child { |
| border-right: var(--data-grid-column-border-start); |
| } |
| |
| @media (-webkit-min-device-pixel-ratio: 2) { |
| .data-grid table:matches(.header, .data) { |
| width: calc(100% + 0.5px); |
| -webkit-margin-start: -0.5px; |
| } |
| |
| .data-grid :matches(th, td):first-child { |
| border-width: 0.5px; |
| } |
| } |
| |
| .data-grid tr.editable .cell-content > input { |
| width: 100%; |
| height: 100%; |
| margin: 0; |
| padding: 0; |
| background: none; |
| border: none; |
| outline: none; |
| } |
| |
| body:not(.window-inactive, .window-docked-inactive) .data-grid:focus tr.editable.selected .cell-content > input { |
| color: var(--selected-foreground-color); |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| .data-grid td .subtitle { |
| color: var(--selected-secondary-text-color); |
| } |
| |
| .data-grid:focus tr.selected td .subtitle { |
| color: hsla(0, 0%, var(--foreground-lightness), 0.9); |
| } |
| |
| .data-grid tr.editable .cell-content > input { |
| color: inherit; |
| } |
| |
| .data-grid td.spanning { |
| color: var(--text-color-secondary); |
| background-color: unset; |
| } |
| |
| .data-grid th.sortable:active { |
| background-color: hsl(0, 0%, 40%); |
| } |
| |
| .data-grid th.sort-ascending > div:first-child::after, |
| .data-grid th.sort-descending > div:first-child::after { |
| filter: invert(); |
| } |
| } |