Home | History | Annotate | Download | only in front_end 
      1 .data-grid {
      2     position: relative;
      3     border: 1px solid #aaa;
      4     font-size: 11px;
      5     line-height: 120%;
      6 }
      7 
      8 .data-grid .highlight {
      9     background-color: rgb(255, 230, 179);
     10 }
     11 
     12 .data-grid tr.selected .highlight {
     13     background-color: transparent;
     14 }
     15 
     16 .data-grid table {
     17     table-layout: fixed;
     18     border-spacing: 0;
     19     border-collapse: collapse;
     20     width: 100%;
     21 }
     22 
     23 .data-grid .data-container {
     24     position: absolute;
     25     top: 16px;
     26     bottom: 0;
     27     left: 0;
     28     right: 0;
     29     overflow-x: hidden;
     30     overflow-y: overlay;
     31 }
     32 
     33 .data-grid.inline {
     34     border-right: none;
     35 }
     36 
     37 .data-grid.inline .data-container {
     38     position: static;
     39 }
     40 
     41 .data-grid.inline th.corner,
     42 .data-grid.inline td.corner {
     43     display: none;
     44 }
     45 
     46 .data-grid th {
     47     text-align: left;
     48     background-image: url(Images/glossyHeader.png);
     49     background-repeat: repeat-x;
     50     border-right: 1px solid rgb(179, 179, 179);
     51     border-bottom: 1px solid rgb(179, 179, 179);
     52     height: 15px;
     53     font-weight: normal;
     54     vertical-align: middle;
     55     padding: 0 4px;
     56     white-space: nowrap;
     57 }
     58 
     59 .data-grid th.corner,
     60 .data-grid td.corner,
     61 .data-grid col.corner {
     62     width: 14px;
     63     padding-right: 0;
     64     padding-left: 0;
     65     border-right: 0 none transparent !important;
     66 }
     67 
     68 .data-grid tr.filler {
     69     display: table-row !important;
     70     height: auto !important;
     71 }
     72 
     73 .data-grid tr.filler td {
     74     height: auto !important;
     75     padding: 0 !important;
     76 }
     77 
     78 .data-grid table.data {
     79     position: absolute;
     80     left: 0;
     81     top: 0;
     82     right: 0;
     83     bottom: 0;
     84     height: 100%;
     85     border-top: 0 none transparent;
     86     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)));
     87     background-size: 1px 32px;
     88     table-layout: fixed;
     89 }
     90 
     91 .data-grid.inline table.data {
     92     position: static;
     93 }
     94 
     95 .data-grid table.data tr {
     96     display: none;
     97 }
     98 
     99 .data-grid table.data tr.revealed {
    100     display: table-row;
    101 }
    102 
    103 .data-grid td {
    104     vertical-align: top;
    105     height: 16px; /* Keep in sync with .data-grid table.data @ background-size */
    106     line-height: 13px;
    107     padding: 1px 4px;
    108     white-space: nowrap;
    109     overflow: hidden;
    110     border-right: 1px solid #aaa;
    111     -webkit-user-select: text;
    112 }
    113 
    114 .data-grid td > div,
    115 .data-grid th > div {
    116     white-space: nowrap;
    117     text-overflow: ellipsis;
    118     overflow: hidden;
    119 }
    120 
    121 .data-grid td.editing > div {
    122     text-overflow: clip;
    123 }
    124 
    125 .data-grid .center div {
    126     text-align: center;
    127 }
    128 
    129 .data-grid .right div {
    130     text-align: right;
    131 }
    132 
    133 .data-grid th.sortable div {
    134     position: relative;
    135 }
    136 
    137 .data-grid th.sortable:active {
    138     background-image: url(Images/glossyHeaderPressed.png);
    139 }
    140 .data-grid th.sort-ascending,
    141 .data-grid th.sort-descending {
    142     border-right: 1px solid rgb(107, 140, 196);
    143     border-bottom: 1px solid rgb(107, 140, 196);
    144     background-image: url(Images/glossyHeaderSelected.png);
    145     background-repeat: repeat-x;
    146 }
    147 
    148 .data-grid th.sortable.sort-ascending:active, .data-grid th.sortable.sort-descending:active {
    149     background-image: url(Images/glossyHeaderSelectedPressed.png);
    150 }
    151 
    152 .data-grid th.sort-ascending > div::after,
    153 .data-grid th.sort-descending > div::after {
    154     position: absolute;
    155     top: 1px;
    156     right: 0;
    157     background-image: url(Images/statusbarButtonGlyphs.png);
    158     background-size: 320px 120px;
    159     opacity: 0.5;
    160     width: 8px;
    161     height: 10px;
    162     content: "a";
    163     color: transparent;
    164 }
    165 
    166 @media (-webkit-min-device-pixel-ratio: 1.5) {
    167 .data-grid th.sort-ascending > div::after,
    168 .data-grid th.sort-descending > div::after {
    169     background-image: url(Images/statusbarButtonGlyphs2x.png);
    170 }
    171 } /* media */
    172 
    173 .data-grid th.sort-ascending > div::after {
    174     background-position: -4px -108px;
    175 }
    176 
    177 .data-grid th.sort-descending > div::after {
    178     background-position: -20px -96px;
    179 }
    180 
    181 .data-grid button {
    182     line-height: 18px;
    183     color: inherit;
    184 }
    185 
    186 body.inactive .data-grid th.sort-ascending,
    187 body.inactive .data-grid th.sort-descending {
    188     background-image: url(Images/glossyHeader.png);
    189     border-right: 1px solid rgb(179, 179, 179);
    190     border-bottom: 1px solid rgb(179, 179, 179);
    191 }
    192 
    193 .data-grid tr.parent td.disclosure::before {
    194     -webkit-user-select: none;
    195     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
    196     -webkit-mask-size: 320px 120px;
    197     float: left;
    198     width: 8px;
    199     margin-right: 2px;
    200     content: "a";
    201     color: transparent;
    202     position: relative;
    203     top: 1px;
    204 }
    205 
    206 .data-grid tr.parent td.disclosure::before {
    207     background-color: rgb(110, 110, 110);
    208     -webkit-mask-position: -4px -96px;
    209 }
    210 
    211 @media (-webkit-min-device-pixel-ratio: 1.5) {
    212 .data-grid tr.parent td.disclosure::before {
    213     -webkit-mask-image: url(Images/statusbarButtonGlyphs2x.png);
    214 }
    215 } /* media */
    216 
    217 .data-grid tr.expanded td.disclosure::before {
    218     -webkit-mask-position: -20px -96px;
    219 }
    220 
    221 .data-grid tr.selected {
    222     background-color: rgb(212, 212, 212);
    223     color: inherit;
    224 }
    225 
    226 .data-grid:focus tr.selected {
    227     background-color: rgb(56, 121, 217);
    228     color: white;
    229 }
    230 
    231 .data-grid:focus tr.selected a {
    232     color: white;
    233 }
    234 
    235 .data-grid:focus tr.parent.selected td.disclosure::before {
    236     background-color: white;
    237     -webkit-mask-position: -4px -96px;
    238 }
    239 
    240 .data-grid:focus tr.expanded.selected td.disclosure::before {
    241     background-color: white;
    242     -webkit-mask-position: -20px -96px;
    243 }
    244 
    245 .data-grid tr:not(.parent) td.disclosure {
    246     text-indent: 10px;
    247 }
    248 
    249 .data-grid-resizer {
    250     position: absolute;
    251     top: 0;
    252     bottom: 0;
    253     width: 5px;
    254     z-index: 500;
    255     cursor: col-resize;
    256 }
    257