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