| .data-grid { |
| position: relative; |
| border: 1px solid #aaa; |
| font-size: 11px; |
| line-height: 120%; |
| } |
| |
| .data-grid .highlight { |
| background-color: rgb(255, 230, 179); |
| } |
| |
| .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: 16px; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| overflow-x: hidden; |
| overflow-y: overlay; |
| } |
| |
| .data-grid.inline { |
| border-right: none; |
| } |
| |
| .data-grid.inline .data-container { |
| position: static; |
| } |
| |
| .data-grid.inline th.corner, |
| .data-grid.inline td.corner { |
| display: none; |
| } |
| |
| .data-grid th { |
| text-align: left; |
| background-image: url(Images/glossyHeader.png); |
| background-repeat: repeat-x; |
| border-right: 1px solid rgb(179, 179, 179); |
| border-bottom: 1px solid rgb(179, 179, 179); |
| height: 15px; |
| font-weight: normal; |
| vertical-align: middle; |
| padding: 0 4px; |
| white-space: nowrap; |
| } |
| |
| .data-grid th.corner, |
| .data-grid td.corner, |
| .data-grid col.corner { |
| width: 14px; |
| padding-right: 0px; |
| padding-left: 0px; |
| border-right: 0 none transparent !important; |
| } |
| |
| .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: absolute; |
| left: 0; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| height: 100%; |
| border-top: 0 none transparent; |
| background-image: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(0.5, white), color-stop(0.5, rgb(234, 243, 255)), to(rgb(234, 243, 255))); |
| -webkit-background-size: 1px 32px; |
| table-layout: fixed; |
| } |
| |
| .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 td { |
| vertical-align: top; |
| height: 16px; /* Keep in sync with .data-grid table.data @ -webkit-background-size */ |
| line-height: 13px; |
| padding: 1px 4px; |
| white-space: nowrap; |
| overflow: hidden; |
| border-right: 1px solid #aaa; |
| -webkit-user-select: text; |
| } |
| |
| .data-grid td > div, .data-grid th > div { |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| overflow: hidden; |
| } |
| |
| .data-grid td.editing > div { |
| text-overflow: clip; |
| } |
| |
| .data-grid .center div { |
| text-align: center; |
| } |
| |
| .data-grid .right div { |
| text-align: right; |
| } |
| |
| .data-grid th.sortable div { |
| position: relative; |
| } |
| |
| .data-grid th.sortable:active { |
| background-image: url(Images/glossyHeaderPressed.png); |
| } |
| .data-grid th.sort-ascending, .data-grid th.sort-descending { |
| border-right: 1px solid rgb(107, 140, 196); |
| border-bottom: 1px solid rgb(107, 140, 196); |
| background-image: url(Images/glossyHeaderSelected.png); |
| background-repeat: repeat-x; |
| } |
| |
| .data-grid th.sortable.sort-ascending:active, .data-grid th.sortable.sort-descending:active { |
| background-image: url(Images/glossyHeaderSelectedPressed.png); |
| } |
| |
| .data-grid th.sort-ascending > div::after, |
| .data-grid th.sort-descending > div::after { |
| position: absolute; |
| top: 1px; |
| right: 0; |
| background-image: url(Images/statusbarButtonGlyphs.png); |
| background-size: 320px 120px; |
| opacity: 0.5; |
| width: 8px; |
| height: 10px; |
| content: "a"; |
| color: transparent; |
| } |
| |
| @media (-webkit-min-device-pixel-ratio: 1.5) { |
| .data-grid th.sort-ascending > div::after, |
| .data-grid th.sort-descending > div::after { |
| background-image: url(Images/statusbarButtonGlyphs2x.png); |
| } |
| } |
| |
| .data-grid th.sort-ascending > div::after { |
| background-position: -4px -108px; |
| } |
| |
| .data-grid th.sort-descending > div::after { |
| background-position: -20px -96px; |
| } |
| |
| .data-grid button { |
| line-height: 18px; |
| color: inherit; |
| } |
| |
| body.inactive .data-grid th.sort-ascending, body.inactive .data-grid th.sort-descending { |
| background-image: url(Images/glossyHeader.png); |
| border-right: 1px solid rgb(179, 179, 179); |
| border-bottom: 1px solid rgb(179, 179, 179); |
| } |
| |
| .data-grid tr.parent td.disclosure::before { |
| -webkit-user-select: none; |
| -webkit-mask-image: url(Images/statusbarButtonGlyphs.png); |
| -webkit-mask-size: 320px 120px; |
| float: left; |
| width: 8px; |
| margin-right: 2px; |
| content: "a"; |
| color: transparent; |
| position: relative; |
| top: 1px; |
| } |
| |
| .data-grid tr.parent td.disclosure::before { |
| background-color: rgb(110, 110, 110); |
| -webkit-mask-position: -4px -96px; |
| } |
| |
| @media (-webkit-min-device-pixel-ratio: 1.5) { |
| .data-grid tr.parent td.disclosure::before { |
| -webkit-mask-image: url(Images/statusbarButtonGlyphs2x.png); |
| } |
| } |
| |
| .data-grid tr.expanded td.disclosure::before { |
| -webkit-mask-position: -20px -96px; |
| } |
| |
| .data-grid tr.selected { |
| background-color: rgb(212, 212, 212); |
| color: inherit; |
| } |
| |
| .data-grid:focus tr.selected { |
| background-color: rgb(56, 121, 217); |
| color: white; |
| } |
| |
| .data-grid:focus tr.selected a { |
| color: white; |
| } |
| |
| .data-grid:focus tr.parent.selected td.disclosure::before { |
| background-color: white; |
| -webkit-mask-position: -4px -96px; |
| } |
| |
| .data-grid:focus tr.expanded.selected td.disclosure::before { |
| background-color: white; |
| -webkit-mask-position: -20px -96px; |
| } |
| |
| .data-grid tr:not(.parent) td.disclosure { |
| text-indent: 10px; |
| } |
| |
| .data-grid-resizer { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| width: 5px; |
| z-index: 500; |
| cursor: col-resize; |
| } |