src/chrome/tools/test/reference_build/chrome_linux/resources/inspector/dataGrid.css

   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-left: 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-left: 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-left: 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-left: 1px solid #aaa;
 111     -webkit-user-select: text;
 112 }
 113
 114 .data-grid th:first-child,
 115 .data-grid td:first-child {
 116     border-left: none !important;
 117 }
 118
 119 .data-grid td > div,
 120 .data-grid th > div {
 121     white-space: nowrap;
 122     text-overflow: ellipsis;
 123     overflow: hidden;
 124 }
 125
 126 .data-grid td.editing > div {
 127     text-overflow: clip;
 128 }
 129
 130 .data-grid .center div {
 131     text-align: center;
 132 }
 133
 134 .data-grid .right div {
 135     text-align: right;
 136 }
 137
 138 .data-grid th.sortable div {
 139     position: relative;
 140 }
 141
 142 .data-grid th.sortable:active {
 143     background-image: url(Images/glossyHeaderPressed.png);
 144 }
 145 .data-grid th.sort-ascending,
 146 .data-grid th.sort-descending {
 147     border-left: 1px solid rgb(107, 140, 196);
 148     border-bottom: 1px solid rgb(107, 140, 196);
 149     background-image: url(Images/glossyHeaderSelected.png);
 150     background-repeat: repeat-x;
 151 }
 152
 153 .data-grid th.sortable.sort-ascending:active, .data-grid th.sortable.sort-descending:active {
 154     background-image: url(Images/glossyHeaderSelectedPressed.png);
 155 }
 156
 157 .data-grid th.sort-ascending > div::after,
 158 .data-grid th.sort-descending > div::after {
 159     position: absolute;
 160     top: 1px;
 161     right: 0;
 162     background-image: url(Images/statusbarButtonGlyphs.png);
 163     background-size: 320px 144px;
 164     opacity: 0.5;
 165     width: 8px;
 166     height: 10px;
 167     content: "a";
 168     color: transparent;
 169 }
 170
 171 @media (-webkit-min-device-pixel-ratio: 1.5) {
 172 .data-grid th.sort-ascending > div::after,
 173 .data-grid th.sort-descending > div::after {
 174     background-image: url(Images/statusbarButtonGlyphs2x.png);
 175 }
 176 } /* media */
 177
 178 .data-grid th.sort-ascending > div::after {
 179     background-position: -4px -108px;
 180 }
 181
 182 .data-grid th.sort-descending > div::after {
 183     background-position: -20px -96px;
 184 }
 185
 186 .data-grid button {
 187     line-height: 18px;
 188     color: inherit;
 189 }
 190
 191 body.inactive .data-grid th.sort-ascending,
 192 body.inactive .data-grid th.sort-descending {
 193     background-image: url(Images/glossyHeader.png);
 194     border-left: 1px solid rgb(179, 179, 179);
 195     border-bottom: 1px solid rgb(179, 179, 179);
 196 }
 197
 198 .data-grid tr.parent td.disclosure::before {
 199     -webkit-user-select: none;
 200     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
 201     -webkit-mask-size: 320px 144px;
 202     float: left;
 203     width: 8px;
 204     margin-right: 2px;
 205     content: "a";
 206     color: transparent;
 207     position: relative;
 208     top: 1px;
 209 }
 210
 211 .data-grid tr.parent td.disclosure::before {
 212     background-color: rgb(110, 110, 110);
 213     -webkit-mask-position: -4px -96px;
 214 }
 215
 216 @media (-webkit-min-device-pixel-ratio: 1.5) {
 217 .data-grid tr.parent td.disclosure::before {
 218     -webkit-mask-image: url(Images/statusbarButtonGlyphs2x.png);
 219 }
 220 } /* media */
 221
 222 .data-grid tr.expanded td.disclosure::before {
 223     -webkit-mask-position: -20px -96px;
 224 }
 225
 226 .data-grid tr.selected {
 227     background-color: rgb(212, 212, 212);
 228     color: inherit;
 229 }
 230
 231 .data-grid:focus tr.selected {
 232     background-color: rgb(56, 121, 217);
 233     color: white;
 234 }
 235
 236 .data-grid:focus tr.selected a {
 237     color: white;
 238 }
 239
 240 .data-grid:focus tr.parent.selected td.disclosure::before {
 241     background-color: white;
 242     -webkit-mask-position: -4px -96px;
 243 }
 244
 245 .data-grid:focus tr.expanded.selected td.disclosure::before {
 246     background-color: white;
 247     -webkit-mask-position: -20px -96px;
 248 }
 249
 250 .data-grid tr:not(.parent) td.disclosure {
 251     text-indent: 10px;
 252 }
 253
 254 .data-grid-resizer {
 255     position: absolute;
 256     top: 0;
 257     bottom: 0;
 258     width: 5px;
 259     z-index: 500;
 260 }