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