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