PageRenderTime 38ms CodeModel.GetById 8ms RepoModel.GetById 0ms app.codeStats 0ms

/src/qt/qtwebkit/Source/WebCore/inspector/front-end/networkLogView.css

https://gitlab.com/x33n/phantomjs
CSS | 540 lines | 427 code | 106 blank | 7 comment | 0 complexity | a658cd89d2f237d77b9ba1954dd75a5b MD5 | raw file
  1. .network-log-grid.data-grid {
  2. border: none;
  3. position: absolute;
  4. top: 0;
  5. left: 0;
  6. right: 0;
  7. bottom: 0;
  8. }
  9. .network-log-grid.data-grid table.data {
  10. -webkit-background-size: 1px 82px;
  11. background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.05)));
  12. }
  13. .network-log-grid.data-grid.small table.data {
  14. -webkit-background-size: 1px 42px;
  15. }
  16. .network-log-grid.data-grid td {
  17. line-height: 17px;
  18. height: 41px;
  19. border-right: 1px solid rgb(210, 210, 210);
  20. vertical-align: middle;
  21. }
  22. .network-log-grid.data-grid.small td {
  23. height: 21px;
  24. }
  25. .network-log-grid.data-grid th {
  26. border-bottom: 1px solid rgb(64%, 64%, 64%);
  27. height: 30px;
  28. }
  29. .network-log-grid.data-grid.small th {
  30. height: 22px;
  31. }
  32. .network-log-grid.data-grid th, .network-log-grid.data-grid th.sort-descending, .network-log-grid.data-grid th.sort-ascending {
  33. background: -webkit-gradient(linear, left top, left bottom, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
  34. }
  35. .network-log-grid.data-grid .data-container {
  36. top: 31px;
  37. }
  38. .network-log-grid.data-grid.small .data-container {
  39. top: 23px;
  40. }
  41. .network-log-grid.data-grid select {
  42. -webkit-appearance: none;
  43. background-color: transparent;
  44. border: none;
  45. width: 100%;
  46. font-size: inherit;
  47. color: inherit;
  48. }
  49. .network-log-grid.data-grid.small tr.offscreen {
  50. height: 21px;
  51. }
  52. .network-log-grid.data-grid tr.offscreen {
  53. height: 41px;
  54. }
  55. .network-log-grid.data-grid tr.offscreen > td > div {
  56. display: none;
  57. }
  58. .network-log-grid.data-grid tr.filler {
  59. background-color: white;
  60. }
  61. .network-log-grid.data-grid tr:not(.filler) td.name-column {
  62. cursor: pointer;
  63. }
  64. #network-container:not(.brief-mode) .network-log-grid.data-grid td.name-column:hover {
  65. text-decoration: underline;
  66. }
  67. .network-log-grid.data-grid.small .network-graph-side {
  68. height: 14px;
  69. }
  70. .network-log-grid.data-grid th.sortable:active {
  71. background-image: none !important;
  72. }
  73. .network-cell-subtitle {
  74. font-weight: normal;
  75. color: gray;
  76. }
  77. .network-error-row, .network-error-row .network-cell-subtitle {
  78. color: rgb(230, 0, 0);
  79. }
  80. .initiator-column a {
  81. color: inherit;
  82. }
  83. .network-log-grid.data-grid tr.selected .network-cell-subtitle {
  84. color: white;
  85. }
  86. .network-log-grid tr.highlighted-row {
  87. -webkit-animation: "network-row-highlight-fadeout" 2s 0s;
  88. }
  89. @-webkit-keyframes network-row-highlight-fadeout {
  90. from {background-color: rgba(56, 121, 217, 1); }
  91. to { background-color: rgba(56, 121, 217, 0); }
  92. }
  93. .network-header-subtitle {
  94. color: gray;
  95. }
  96. .network-log-grid.data-grid.small .network-cell-subtitle,
  97. .network-log-grid.data-grid.small .network-header-subtitle
  98. {
  99. display: none;
  100. }
  101. /* Resource preview icons */
  102. .network-log-grid.data-grid .icon {
  103. content: url(Images/resourcePlainIcon.png);
  104. }
  105. .network-log-grid.data-grid.small .icon {
  106. content: url(Images/resourcePlainIconSmall.png);
  107. }
  108. .network-log-grid.data-grid .network-type-script .icon {
  109. content: url(Images/resourceJSIcon.png);
  110. }
  111. .network-log-grid.data-grid.small .network-type-script .icon {
  112. content: url(Images/resourceDocumentIconSmall.png);
  113. }
  114. .network-log-grid.data-grid .network-type-document .icon {
  115. content: url(Images/resourceDocumentIcon.png);
  116. }
  117. .network-log-grid.data-grid.small .network-type-document .icon {
  118. content: url(Images/resourceDocumentIconSmall.png);
  119. }
  120. .network-log-grid.data-grid .network-type-stylesheet .icon {
  121. content: url(Images/resourceCSSIcon.png);
  122. }
  123. .network-log-grid.data-grid.small .network-type-stylesheet .icon {
  124. content: url(Images/resourceDocumentIconSmall.png);
  125. }
  126. .network-log-grid.data-grid .network-type-image .icon {
  127. position: relative;
  128. background-image: url(Images/resourcePlainIcon.png);
  129. background-repeat: no-repeat;
  130. content: "";
  131. }
  132. .network-log-grid.data-grid.small .network-type-image .icon {
  133. background-image: url(Images/resourcePlainIconSmall.png);
  134. content: "";
  135. }
  136. .network-log-grid.data-grid .icon {
  137. float: left;
  138. width: 32px;
  139. height: 32px;
  140. margin-top: 1px;
  141. margin-right: 3px;
  142. }
  143. .network-log-grid.data-grid.small .icon {
  144. width: 16px;
  145. height: 16px;
  146. }
  147. .network-log-grid.data-grid .image-network-icon-preview {
  148. position: absolute;
  149. margin: auto;
  150. top: 3px;
  151. bottom: 4px;
  152. left: 5px;
  153. right: 5px;
  154. max-width: 18px;
  155. max-height: 21px;
  156. min-width: 1px;
  157. min-height: 1px;
  158. }
  159. .network-log-grid.data-grid.small .image-network-icon-preview {
  160. top: 2px;
  161. bottom: 1px;
  162. left: 3px;
  163. right: 3px;
  164. max-width: 8px;
  165. max-height: 11px;
  166. }
  167. /* Graph styles */
  168. .network-graph-side {
  169. position: relative;
  170. height: 36px;
  171. padding: 0;
  172. white-space: nowrap;
  173. margin-top: 1px;
  174. border-top: 1px solid transparent;
  175. overflow: hidden;
  176. }
  177. .network-graph-bar-area {
  178. position: absolute;
  179. top: 0;
  180. bottom: 0;
  181. }
  182. .network-graph-bar-area,
  183. .network-timeline-grid .resources-dividers,
  184. .network-timeline-grid .resources-event-dividers,
  185. .network-timeline-grid .resources-dividers-label-bar {
  186. right: 12px;
  187. left: 12px;
  188. }
  189. .network-graph-label {
  190. position: absolute;
  191. top: 0;
  192. bottom: 0;
  193. margin: auto -7px;
  194. height: 13px;
  195. line-height: 13px;
  196. font-size: 90%;
  197. color: rgba(0, 0, 0, 0.75);
  198. text-shadow: rgba(255, 255, 255, 0.25) 1px 0 0, rgba(255, 255, 255, 0.25) -1px 0 0, rgba(255, 255, 255, 0.333) 0 1px 0, rgba(255, 255, 255, 0.25) 0 -1px 0;
  199. z-index: 150;
  200. overflow: hidden;
  201. text-align: center;
  202. opacity: 0;
  203. -webkit-transition: opacity 250ms ease-in-out;
  204. }
  205. .network-graph-side:hover .network-graph-label {
  206. opacity: 1;
  207. }
  208. .network-graph-label:empty {
  209. display: none;
  210. }
  211. .network-graph-label.waiting {
  212. margin-right: 5px;
  213. }
  214. .network-graph-label.waiting-right {
  215. margin-left: 5px;
  216. }
  217. .network-graph-label.before {
  218. color: rgba(0, 0, 0, 0.7);
  219. text-shadow: none;
  220. text-align: right;
  221. margin-right: 2px;
  222. }
  223. .network-graph-label.before::after {
  224. padding-left: 2px;
  225. height: 6px;
  226. content: url(Images/graphLabelCalloutLeft.png);
  227. }
  228. .network-graph-label.after {
  229. color: rgba(0, 0, 0, 0.7);
  230. text-shadow: none;
  231. text-align: left;
  232. margin-left: 2px;
  233. }
  234. .network-graph-label.after::before {
  235. padding-right: 2px;
  236. height: 6px;
  237. content: url(Images/graphLabelCalloutRight.png);
  238. }
  239. .network-graph-bar {
  240. position: absolute;
  241. top: 0;
  242. bottom: 0;
  243. margin: auto -7px;
  244. border-width: 6px 7px;
  245. height: 0;
  246. min-width: 14px;
  247. opacity: 0.65;
  248. -webkit-border-image: url(Images/timelinePillGray.png) 7 7 7 7;
  249. }
  250. .network-graph-bar.waiting, .network-graph-bar.waiting-right {
  251. opacity: 0.35;
  252. }
  253. /* Resource categories */
  254. .resource-cached .network-graph-bar {
  255. -webkit-border-image: url(Images/timelineHollowPillGray.png) 7 7 7 7;
  256. }
  257. .network-type-document .network-graph-bar {
  258. -webkit-border-image: url(Images/timelinePillBlue.png) 7 7 7 7;
  259. }
  260. .network-type-document.resource-cached .network-graph-bar {
  261. -webkit-border-image: url(Images/timelineHollowPillBlue.png) 7 7 7 7;
  262. }
  263. .network-type-stylesheet .network-graph-bar {
  264. -webkit-border-image: url(Images/timelinePillGreen.png) 7 7 7 7;
  265. }
  266. .network-type-stylesheet.resource-cached .network-graph-bar {
  267. -webkit-border-image: url(Images/timelineHollowPillGreen.png) 7 7 7 7;
  268. }
  269. .network-type-image .network-graph-bar {
  270. -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7;
  271. }
  272. .network-type-image.resource-cached .network-graph-bar {
  273. border-image: url(Images/timelineHollowPillPurple.png) 7 7 7 7;
  274. }
  275. .network-type-font .network-graph-bar {
  276. -webkit-border-image: url(Images/timelinePillRed.png) 7 7 7 7;
  277. }
  278. .network-type-font.resource-cached .network-graph-bar {
  279. -webkit-border-image: url(Images/timelineHollowPillRed.png) 7 7 7 7;
  280. }
  281. .network-type-script .network-graph-bar {
  282. -webkit-border-image: url(Images/timelinePillOrange.png) 7 7 7 7;
  283. }
  284. .network-type-script.resource-cached .network-graph-bar {
  285. -webkit-border-image: url(Images/timelineHollowPillOrange.png) 7 7 7 7;
  286. }
  287. .network-type-xhr .network-graph-bar {
  288. -webkit-border-image: url(Images/timelinePillYellow.png) 7 7 7 7;
  289. }
  290. .network-type-xhr.resource-cached .network-graph-bar {
  291. -webkit-border-image: url(Images/timelineHollowPillYellow.png) 7 7 7 7;
  292. }
  293. .network-type-websocket .network-graph-bar {
  294. -webkit-border-image: url(Images/timelinePillGray.png) 7 7 7 7;
  295. }
  296. .network-type-websocket.resource-cached .network-graph-bar {
  297. -webkit-border-image: url(Images/timelineHollowPillGray.png) 7 7 7 7;
  298. }
  299. .network-dim-cell {
  300. color: grey;
  301. }
  302. /* Dividers */
  303. .network-timeline-grid {
  304. position: absolute;
  305. top: 0;
  306. bottom: 0;
  307. left: 0;
  308. right: 14px; /* Keep in sync with td.corner width */
  309. pointer-events: none;
  310. }
  311. .network-log-grid.data-grid .timeline-column,
  312. .network.panel .data-grid th.timeline-column {
  313. border-right: none;
  314. }
  315. .data-grid td.timeline-column {
  316. padding-left: 0;
  317. padding-right: 0;
  318. }
  319. .network-event-divider-padding {
  320. position: absolute;
  321. width: 8px;
  322. top: 0;
  323. bottom: 0;
  324. pointer-events: auto;
  325. }
  326. .network-event-divider {
  327. position: absolute;
  328. width: 2px;
  329. top: 31px;
  330. bottom: 0;
  331. z-index: 300;
  332. }
  333. .network-timeline-grid.small .network-event-divider {
  334. top: 23px;
  335. }
  336. .network-red-divider {
  337. background-color: rgba(255, 0, 0, 0.5);
  338. }
  339. .network-blue-divider {
  340. background-color: rgba(0, 0, 255, 0.5);
  341. }
  342. .network-log-grid.data-grid .resources-dividers {
  343. z-index: 0;
  344. }
  345. .network-log-grid.data-grid .resources-dividers-label-bar {
  346. background-color: transparent;
  347. border: none;
  348. height: 30px;
  349. pointer-events: none;
  350. }
  351. .network-timeline-grid.small .resources-dividers-label-bar {
  352. height: 23px;
  353. }
  354. .network-timeline-grid .resources-divider-label {
  355. top: 0;
  356. margin-top: -5px;
  357. }
  358. .network-timeline-grid .resources-dividers-label-bar .resources-divider {
  359. top: 23px;
  360. }
  361. .network-timeline-grid.small .resources-dividers-label-bar .resources-divider {
  362. top: 15px;
  363. }
  364. .network-timeline-grid .resources-divider.first .resources-divider-label {
  365. display: none;
  366. }
  367. .network-timeline-grid .resources-dividers-label-bar .resources-divider.first {
  368. background-color: transparent;
  369. }
  370. /* Filters */
  371. .network-log-grid.data-grid table.data tr.revealed.network-item {
  372. display: none;
  373. }
  374. /* Summary */
  375. .network-log-grid.data-grid tr.filler td {
  376. padding-bottom: 20px !important;
  377. }
  378. .network-log-grid.data-grid .network-summary-bar {
  379. position: absolute;
  380. left: 0;
  381. right: 0;
  382. bottom: 0;
  383. background-color: rgb(101, 111, 130);
  384. }
  385. .network-log-grid.data-grid .network-summary-bar td {
  386. color: white;
  387. height: 20px !important;
  388. border: none;
  389. font-size: 110%;
  390. padding: 0 0 0 8px;
  391. white-space: pre;
  392. overflow : hidden;
  393. text-overflow : ellipsis;
  394. }
  395. .network-log-grid.data-grid .network-summary-bar img {
  396. vertical-align: middle;
  397. padding-right: 8px;
  398. }
  399. #network-container {
  400. position: absolute;
  401. top: 0;
  402. left: 0;
  403. bottom: 0;
  404. right: 0;
  405. width: 100%;
  406. height: 100%;
  407. border-right: 0 none transparent;
  408. overflow-y: auto;
  409. overflow-x: hidden;
  410. }
  411. // Brief mode peculiarities.
  412. #network-container.brief-mode .network-timeline-grid {
  413. display: none;
  414. }
  415. #network-container.brief-mode td,
  416. #network-container.brief-mode th {
  417. border-right: none;
  418. }
  419. #network-container.brief-mode th.corner {
  420. display: none;
  421. }
  422. #network-container.brief-mode .network-log-grid.data-grid .data-grid-resizer {
  423. display: none;
  424. }
  425. #network-container.brief-mode .network-timeline-grid {
  426. display: none;
  427. }
  428. #network-container:not(.brief-mode) .data-grid tr.selected {
  429. background-color: transparent;
  430. color: black;
  431. }
  432. #network-container.brief-mode .data-grid .data-container {
  433. padding-right: 0;
  434. }