third_party/WebKit/Source/devtools/front_end/ui/treeoutline.css

   1 /*
   2  * Copyright 2015 The Chromium Authors. All rights reserved.
   3  * Use of this source code is governed by a BSD-style license that can be
   4  * found in the LICENSE file.
   5  */
   6
   7 .tree-outline {
   8     padding: 0 0 4px 4px;
   9     margin: 0;
  10     z-index: 0;
  11     position: relative;
  12 }
  13
  14 .tree-outline li.hovered:not(.selected) .selection {
  15     display: block;
  16     left: 3px;
  17     right: 3px;
  18     background-color: rgba(56, 121, 217, 0.1);
  19     border-radius: 5px;
  20 }
  21
  22 .tree-outline li .selection {
  23     display: none;
  24     position: absolute;
  25     left: 0;
  26     right: 0;
  27     height: 17px;
  28     z-index: -1;
  29     margin-top: -1px;
  30 }
  31
  32 .tree-outline li.selected .selection {
  33     display: block;
  34     background-color: #ddd;
  35 }
  36
  37 .tree-outline li.in-clipboard .highlight {
  38     outline: 1px dotted darkgrey;
  39 }
  40
  41 .tree-outline li.elements-drag-over .selection {
  42     display: block;
  43     margin-top: -2px;
  44     border-top: 2px solid rgb(56, 121, 217);
  45 }
  46
  47 ol.tree-outline:focus li.selected .selection {
  48     background-color: rgb(56, 121, 217);
  49 }
  50
  51 ol.tree-outline:focus li.parent.selected::before {
  52     background-color: white;
  53 }
  54
  55 ol.tree-outline,
  56 .tree-outline ol {
  57     list-style-type: none;
  58 }
  59
  60 .tree-outline-no-padding {
  61     padding: 0;
  62 }
  63
  64 .tree-outline ol {
  65     padding-left: 12px;
  66 }
  67
  68 .tree-outline li {
  69     text-overflow: ellipsis;
  70     white-space: nowrap;
  71     overflow: hidden;
  72     min-height: 17px;
  73     padding-top: 2px;
  74 }
  75
  76 ol.tree-outline:focus li.selected {
  77     color: white;
  78 }
  79
  80 ol.tree-outline:focus li.selected * {
  81     color: inherit;
  82 }
  83
  84 .tree-outline li::before {
  85     float: left;
  86     -webkit-user-select: none;
  87     -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
  88     -webkit-mask-size: 352px 168px;
  89     content: "a";
  90     color: transparent;
  91     text-shadow: none;
  92     position: relative;
  93     margin-right: 1px;
  94     top: 1px;
  95     width: 10px;
  96     height: 10px;
  97 }
  98
  99 .tree-outline li:not(.parent)::before {
 100     background-color: transparent;
 101 }
 102
 103 @media (-webkit-min-device-pixel-ratio: 1.5) {
 104 .tree-outline li::before {
 105     -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
 106 }
 107 } /* media */
 108
 109 .tree-outline li::before {
 110     -webkit-mask-position: -4px -96px;
 111     background-color: rgb(110, 110, 110);
 112 }
 113
 114 .tree-outline li.parent.expanded::before {
 115     -webkit-mask-position: -20px -96px;
 116 }
 117
 118 .tree-outline ol.children {
 119     display: none;
 120 }
 121
 122 .tree-outline ol.children.expanded {
 123     display: block;
 124 }