1/* Copyright 2014 The Chromium Authors. All rights reserved. 2 * Use of this source code is governed by a BSD-style license that can be 3 * found in the LICENSE file. 4 */ 5 6body { 7 background-color: rgba(0, 0, 0, 0.05); 8 font-family: sans-serif; 9 font-size: 14px; 10 margin: 20px; 11} 12 13#fileSystems, 14#requestEvents, 15#requestTimeline { 16 background-color: white; 17 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); 18 margin-bottom: 20px; 19} 20 21#fileSystems table, 22#requestEvents table { 23 border-collapse: collapse; 24 width: 100%; 25} 26 27#fileSystems th, 28#requestEvents th { 29 height: 30px; 30} 31 32#fileSystems .message { 33 border-top: 1px solid #eee; 34} 35 36#fileSystems td { 37 border-top: 1px solid #eee; 38 height: 40px; 39 line-height: 24px; 40 text-align: center; 41} 42 43#fileSystems td .icon { 44 display: inline-block; 45 height: 24px; 46 vertical-align: middle; 47 width: 24px; 48} 49 50#fileSystems tbody tr { 51 cursor: pointer; 52} 53 54#fileSystems tbody tr:active td { 55 background-color: #eee; 56} 57 58#requestEvents { 59 font-size: 12px; 60} 61 62#requestEvents td { 63 padding: 8px; 64 text-align: center; 65 vertical-align: top; 66} 67 68#requestEvents td { 69 border-top: 1px solid #eee; 70} 71 72#requestEvents td span { 73 border-radius: 5px; 74 padding: 3px; 75} 76 77#requestTimeline { 78 min-height: 30px; 79 position: relative; 80 width: 100%; 81} 82 83#requestTimeline .request-timeline-scroller { 84 overflow-x: auto; 85 overflow-y: hidden; 86 width: 100%; 87} 88 89#requestTimeline .request-timeline-padding { 90 margin: 20px 10px; 91 position: relative; 92} 93 94#requestTimeline .request-timeline-request { 95 border: none; 96 border-radius: 4px; 97 height: 8px; 98 margin: 3px 0; 99 min-width: 1px; 100 padding: 0; 101 position: absolute; 102 text-align: start; 103} 104 105#requestTimeline .request-timeline-request.selected { 106 box-shadow: 0 0 3px 1px deepskyblue; 107} 108 109#requestTimeline .request-timeline-request-overhead { 110 background-image: -webkit-canvas(dashedPattern); 111 border-radius: 4px; 112 height: 100%; 113 width: 50%; 114} 115 116#requestTimeline .request-timeline-request-value-size { 117 background-color: ivory; 118 box-shadow: 0 1px 1px 0 silver; 119 color: black; 120 display: inline-block; 121 font-size: 10px; 122 padding: 2px; 123 position: relative; 124 top: -30px; 125 z-index: 2; 126} 127 128#requestTimeline .request-timeline-toolbar { 129 display: flex; 130 justify-content: flex-end; 131 left: 0; 132 opacity: 0.75; 133 padding: 5px; 134 pointer-events: none; 135 position: absolute; 136 right: 0; 137 z-index: 3; 138} 139 140#requestTimeline .request-timeline-toolbar button { 141 background-color: #aaa; 142 border: none; 143 border-radius: 100%; 144 color: white; 145 min-height: 20px; 146 min-width: 20px; 147 pointer-events: auto; 148} 149 150#requestTimeline [data-request-type='REQUEST_UNMOUNT'], 151#requestEvents [data-request-type='REQUEST_UNMOUNT'] span { 152 background-color: cadetblue; 153 color: white; 154} 155 156#requestTimeline [data-request-type='GET_METADATA'], 157#requestEvents [data-request-type='GET_METADATA'] span { 158 background-color: orange; 159 color: white; 160} 161 162#requestTimeline [data-request-type='READ_DIRECTORY'], 163#requestEvents [data-request-type='READ_DIRECTORY'] span { 164 background-color: hotpink; 165 color: white; 166} 167 168#requestTimeline [data-request-type='OPEN_FILE'], 169#requestEvents [data-request-type='OPEN_FILE'] span { 170 background-color: darkturquoise; 171 color: white; 172} 173 174#requestTimeline [data-request-type='CLOSE_FILE'], 175#requestEvents [data-request-type='CLOSE_FILE'] span { 176 background-color: mediumspringgreen; 177} 178 179#requestTimeline [data-request-type='READ_FILE'], 180#requestEvents [data-request-type='READ_FILE'] span { 181 background-color: royalblue; 182 color: white; 183} 184 185#requestTimeline [data-state='rejected'], 186#requestEvents [data-error]:not([data-error='']) span { 187 background-color: tomato; 188 color: white; 189} 190