src/third_party/WebKit/Source/devtools/front_end/resourcesPanel.css

   1 /*
   2  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
   3  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
   4  *
   5  * Redistribution and use in source and binary forms, with or without
   6  * modification, are permitted provided that the following conditions
   7  * are met:
   8  *
   9  * 1.  Redistributions of source code must retain the above copyright
  10  *     notice, this list of conditions and the following disclaimer.
  11  * 2.  Redistributions in binary form must reproduce the above copyright
  12  *     notice, this list of conditions and the following disclaimer in the
  13  *     documentation and/or other materials provided with the distribution.
  14  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  15  *     its contributors may be used to endorse or promote products derived
  16  *     from this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  19  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  20  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  21  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  22  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  23  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  24  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  25  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  26  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  27  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  28  */
  29
  30 .resources.panel .sidebar {
  31     padding-left: 0;
  32     z-index: 10;
  33     display: block;
  34 }
  35
  36 .resources.panel .sidebar li {
  37     height: 18px;
  38     white-space: nowrap;
  39 }
  40
  41 .resources.panel .sidebar li.selected {
  42     color: white;
  43     text-shadow: rgba(0, 0, 0, 0.33) 1px 1px 0;
  44 }
  45
  46 .resources.panel .sidebar li.selected .selection {
  47     background-image: linear-gradient(to bottom, rgb(162, 177, 207), rgb(120, 138, 177));
  48     border-top: 1px solid #979797;
  49     height: 18px;
  50 }
  51
  52 .resources.panel .sidebar :focus li.selected .selection {
  53     background-image: linear-gradient(to bottom, rgb(92, 147, 213), rgb(21, 83, 170));
  54     border-top: 1px solid rgb(68, 128, 200);
  55 }
  56
  57 body.inactive .resources.panel .sidebar li.selected .selection {
  58     background-image: linear-gradient(to bottom, rgb(180, 180, 180), rgb(138, 138, 138));
  59     border-top: 1px solid rgb(151, 151, 151);
  60 }
  61
  62 .resources.panel .sidebar .icon {
  63     width: 16px;
  64     height: 16px;
  65     float: left;
  66 }
  67
  68 .resources.panel .base-storage-tree-element-title {
  69     overflow: hidden;
  70     position: relative;
  71     text-overflow: ellipsis;
  72     padding-left: 2px;
  73     top: 1px;
  74 }
  75
  76 .resources-main {
  77     position: absolute;
  78     top: 0;
  79     bottom: 23px;
  80     left: 0;
  81     right: 0;
  82     display: flex;
  83 }
  84
  85 .resources-status-bar {
  86     position: absolute;
  87     bottom: 0;
  88     left: 0;
  89     right: 0;
  90     height: 23px;
  91     background-color: rgb(236, 236, 236);
  92 }
  93
  94 li.selected .base-storage-tree-element-subtitle {
  95     color: white;
  96 }
  97
  98 .base-storage-tree-element-subtitle {
  99     padding-left: 2px;
 100     color: rgb(80, 80, 80);
 101     text-shadow: none;
 102 }
 103
 104 .resources.panel .status {
 105     float: right;
 106     height: 16px;
 107     margin-top: 1px;
 108     margin-left: 4px;
 109     line-height: 1em;
 110 }
 111
 112 .resources.panel li .status .bubble-repeat-count {
 113     height: 13px;
 114     padding-top: 0;
 115 }
 116
 117 .storage-view {
 118     display: none;
 119     overflow: hidden;
 120     position: absolute;
 121     top: 0;
 122     left: 0;
 123     right: 0;
 124     bottom: 0;
 125 }
 126
 127 .storage-view.visible {
 128     display: flex;
 129 }
 130
 131 .storage-view {
 132     overflow: hidden;
 133 }
 134
 135 .storage-view .data-grid:not(.inline) {
 136     border: none;
 137     flex: auto;
 138 }
 139
 140 .storage-view .storage-table-error {
 141     color: rgb(66%, 33%, 33%);
 142 }
 143
 144 .storage-view.query {
 145     padding: 2px 0;
 146     overflow-y: overlay;
 147     overflow-x: hidden;
 148 }
 149
 150 .database-query-prompt {
 151     position: relative;
 152     padding: 1px 22px 1px 24px;
 153     min-height: 16px;
 154     white-space: pre-wrap;
 155     -webkit-user-modify: read-write-plaintext-only;
 156     -webkit-user-select: text;
 157 }
 158
 159 .database-user-query::before,
 160 .database-query-prompt::before,
 161 .database-query-result::before {
 162     position: absolute;
 163     display: block;
 164     content: "";
 165     left: 7px;
 166     top: 0.8em;
 167     width: 10px;
 168     height: 10px;
 169     margin-top: -7px;
 170     -webkit-user-select: none;
 171     background-image: url(Images/statusbarButtonGlyphs.png);
 172     background-size: 320px 144px;
 173 }
 174
 175 @media (-webkit-min-device-pixel-ratio: 1.5) {
 176 .database-user-query::before,
 177 .database-query-prompt::before,
 178 .database-query-result::before {
 179     background-image: url(Images/statusbarButtonGlyphs_2x.png);
 180 }
 181 } /* media */
 182
 183 .database-query-prompt::before {
 184     background-position: -192px -96px;
 185 }
 186
 187 .database-user-query {
 188     position: relative;
 189     border-bottom: 1px solid rgb(245, 245, 245);
 190     padding: 1px 22px 1px 24px;
 191     min-height: 16px;
 192     flex-shrink: 0;
 193 }
 194
 195 .database-user-query::before {
 196     background-position: -192px -107px;
 197 }
 198
 199 .database-query-text {
 200     color: rgb(0, 128, 255);
 201     -webkit-user-select: text;
 202 }
 203
 204 .database-query-result {
 205     position: relative;
 206     padding: 1px 22px 1px 24px;
 207     min-height: 16px;
 208     margin-left: -24px;
 209     padding-right: 0;
 210 }
 211
 212 .database-query-result.error {
 213     color: red;
 214     -webkit-user-select: text;
 215 }
 216
 217 .database-query-result.error::before {
 218     background-position: -213px -96px;
 219 }
 220
 221 .resource-sidebar-tree-item .icon {
 222     content: url(Images/resourcePlainIcon.png);
 223 }
 224
 225 .children.small .resource-sidebar-tree-item .icon {
 226     content: url(Images/resourcePlainIconSmall.png);
 227 }
 228
 229 .resource-sidebar-tree-item.resources-type-image .icon {
 230     position: relative;
 231     background-image: url(Images/resourcePlainIcon.png);
 232     background-repeat: no-repeat;
 233     content: "";
 234 }
 235
 236 .resources-type-image .image-resource-icon-preview {
 237     position: absolute;
 238     margin: auto;
 239     top: 3px;
 240     bottom: 4px;
 241     left: 5px;
 242     right: 5px;
 243     max-width: 18px;
 244     max-height: 21px;
 245     min-width: 1px;
 246     min-height: 1px;
 247 }
 248
 249 .children.small .resource-sidebar-tree-item.resources-type-image .icon {
 250     background-image: url(Images/resourcePlainIconSmall.png);
 251     content: "";
 252 }
 253
 254 .children.small .resources-type-image .image-resource-icon-preview {
 255     top: 2px;
 256     bottom: 1px;
 257     left: 3px;
 258     right: 3px;
 259     max-width: 8px;
 260     max-height: 11px;
 261 }
 262
 263 .resource-sidebar-tree-item.resources-type-document .icon {
 264     content: url(Images/resourceDocumentIcon.png);
 265 }
 266
 267 .children.small .resource-sidebar-tree-item.resources-type-document .icon {
 268     content: url(Images/resourceDocumentIconSmall.png);
 269 }
 270
 271 .resource-sidebar-tree-item.resources-type-stylesheet .icon {
 272     content: url(Images/resourceCSSIcon.png);
 273 }
 274
 275 .children.small .resource-sidebar-tree-item.resources-type-stylesheet .icon {
 276     content: url(Images/resourceDocumentIconSmall.png);
 277 }
 278
 279 .resource-sidebar-tree-item.resources-type-image .icon {
 280     position: relative;
 281     background-image: url(Images/resourcePlainIcon.png);
 282     background-repeat: no-repeat;
 283     content: "";
 284 }
 285
 286 .children.small .resource-sidebar-tree-item.resources-type-image .icon {
 287     background-image: url(Images/resourcePlainIconSmall.png);
 288     content: "";
 289 }
 290
 291 .resource-sidebar-tree-item.resources-type-font .icon {
 292     content: url(Images/resourcePlainIcon.png);
 293 }
 294
 295 .children.small .resource-sidebar-tree-item.resources-type-font .icon {
 296     content: url(Images/resourcePlainIconSmall.png);
 297 }
 298
 299 .resource-sidebar-tree-item.resources-type-script .icon {
 300     content: url(Images/resourceJSIcon.png);
 301 }
 302
 303 .children.small .resource-sidebar-tree-item.resources-type-script .icon {
 304     content: url(Images/resourceDocumentIconSmall.png);
 305 }
 306
 307 .resource-sidebar-tree-item.resources-type-xhr .icon {
 308     content: url(Images/resourcePlainIcon.png);
 309 }
 310
 311 .children.small .resource-sidebar-tree-item.resources-type-xhr .icon {
 312     content: url(Images/resourceDocumentIconSmall.png);
 313 }
 314
 315 .frame-storage-tree-item .icon {
 316     content: url(Images/frame.png);
 317 }
 318
 319 .database-storage-tree-item .icon {
 320     content: url(Images/database.png);
 321 }
 322
 323 .database-table-storage-tree-item .icon {
 324     content: url(Images/databaseTable.png);
 325 }
 326
 327 .indexed-db-storage-tree-item .icon {
 328     content: url(Images/indexedDB.png);
 329 }
 330
 331 .indexed-db-object-store-storage-tree-item .icon {
 332     content: url(Images/indexedDBObjectStore.png);
 333 }
 334
 335 .indexed-db-index-storage-tree-item .icon {
 336     content: url(Images/indexedDBIndex.png);
 337 }
 338
 339 .domstorage-storage-tree-item.local-storage .icon {
 340     content: url(Images/localStorage.png);
 341 }
 342
 343 .domstorage-storage-tree-item.session-storage .icon {
 344     content: url(Images/sessionStorage.png);
 345 }
 346
 347 .cookie-storage-tree-item .icon {
 348     content: url(Images/cookie.png);
 349 }
 350
 351 .application-cache-storage-tree-item .icon {
 352     content: url(Images/applicationCache.png);
 353 }
 354
 355 .file-system-storage-tree-item .icon {
 356     content: url(Images/fileSystem.png);
 357 }