src/third_party/WebKit/Source/devtools/front_end/elements/elementsTreeOutline.css

   1 /*
   2  * Copyright (c) 2014 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 .outline-disclosure {
   8     width: 100%;
   9     display: inline-block;
  10     line-height: normal;
  11 }
  12
  13 .outline-disclosure li {
  14     padding: 0 0 0 14px;
  15     margin-top: 1px;
  16     margin-left: -2px;
  17     word-wrap: break-word;
  18 }
  19
  20 .outline-disclosure li.parent {
  21     margin-left: -12px
  22 }
  23
  24 .outline-disclosure li.parent::before {
  25     float: left;
  26     width: 10px;
  27     padding-right: 2px;
  28     box-sizing: border-box;
  29 }
  30
  31 .outline-disclosure li.parent::before {
  32     -webkit-user-select: none;
  33     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
  34     -webkit-mask-size: 320px 144px;
  35     content: "a";
  36     color: transparent;
  37     text-shadow: none;
  38     margin-right: 1px;
  39 }
  40
  41 @media (-webkit-min-device-pixel-ratio: 1.5) {
  42 .outline-disclosure li.parent::before {
  43     -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png);
  44 }
  45 } /* media */
  46
  47 .outline-disclosure li.parent::before {
  48     -webkit-mask-position: -4px -96px;
  49     background-color: rgb(110, 110, 110);
  50 }
  51
  52 .outline-disclosure li .selection {
  53     display: none;
  54     position: absolute;
  55     left: 0;
  56     right: 0;
  57     height: 15px;
  58     z-index: -1;
  59 }
  60
  61 .outline-disclosure li.hovered:not(.selected) .selection {
  62     display: block;
  63     left: 3px;
  64     right: 3px;
  65     background-color: rgba(56, 121, 217, 0.1);
  66     border-radius: 5px;
  67 }
  68
  69 .outline-disclosure li.parent.expanded::before {
  70     -webkit-mask-position: -20px -96px;
  71 }
  72
  73 .outline-disclosure li.selected .selection {
  74     display: block;
  75     background-color: rgb(212, 212, 212);
  76 }
  77
  78 .outline-disclosure ol {
  79     list-style-type: none;
  80     -webkit-padding-start: 12px;
  81     margin: 0;
  82 }
  83
  84 .outline-disclosure ol.children {
  85     display: none;
  86 }
  87
  88 .outline-disclosure ol.children.expanded {
  89     display: block;
  90 }
  91
  92 .outline-disclosure li .webkit-html-tag.close {
  93     margin-left: -12px;
  94 }
  95
  96 .outline-disclosure > ol {
  97     position: relative;
  98     margin: 0;
  99     cursor: default;
 100     min-width: 100%;
 101     min-height: 100%;
 102     -webkit-transform: translateZ(0);
 103     padding-left: 2px;
 104 }
 105
 106 .outline-disclosure ol:focus li.selected {
 107     color: white;
 108 }
 109
 110 .outline-disclosure ol:focus li.parent.selected::before {
 111     background-color: white;
 112 }
 113
 114 .outline-disclosure ol:focus li.selected * {
 115     color: inherit;
 116 }
 117
 118 .outline-disclosure ol:focus li.selected .selection {
 119     background-color: rgb(56, 121, 217);
 120 }
 121
 122 .elements-tree-outline li.shadow-root + ol {
 123     margin-left: 5px;
 124     padding-left: 5px;
 125     border-left: 1px solid gray;
 126 }
 127
 128 .elements-tree-editor {
 129     -webkit-user-select: text;
 130     -webkit-user-modify: read-write-plaintext-only;
 131 }
 132
 133 .outline-disclosure li.elements-drag-over .selection {
 134     display: block;
 135     margin-top: -2px;
 136     border-top: 2px solid rgb(56, 121, 217);
 137 }
 138
 139 .outline-disclosure li.in-clipboard .highlight {
 140     outline: 1px dotted darkgrey;
 141 }
 142
 143 .CodeMirror {
 144     /* Consistent with the .editing class in inspector.css */
 145     box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
 146     outline: 1px solid rgb(66%, 66%, 66%) !important;
 147     background-color: white;
 148 }
 149
 150 .CodeMirror-lines {
 151     padding: 0;
 152 }
 153
 154 .CodeMirror pre {
 155     padding: 0;
 156 }
 157
 158 button, input, select {
 159   font-family: inherit;
 160   font-size: inherit;
 161 }
 162
 163 .text-button {
 164     background-image: linear-gradient(hsl(0, 0%, 93%), hsl(0, 0%, 93%) 38%, hsl(0, 0%, 87%));
 165     border: 1px solid hsla(0, 0%, 0%, 0.25);
 166     border-radius: 2px;
 167     box-shadow: 0 1px 0 hsla(0, 0%, 0%, 0.08), inset 0 1px 2px hsla(0, 100%, 100%, 0.75);
 168     color: hsl(0, 0%, 27%);
 169     font-size: 12px;
 170     margin: 0 1px 0 0;
 171     text-shadow: 0 1px 0 hsl(0, 0%, 94%);
 172     min-height: 2em;
 173     padding-left: 10px;
 174     padding-right: 10px;
 175 }
 176
 177 .text-button:not(:disabled):hover {
 178     background-image: linear-gradient(hsl(0, 0%, 94%), hsl(0, 0%, 94%) 38%, hsl(0, 0%, 88%));
 179     border-color: hsla(0, 0%, 0%, 0.3);
 180     box-shadow: 0 1px 0 hsla(0, 0%, 0%, 0.12), inset 0 1px 2px hsla(0, 100%, 100%, 0.95);
 181     color: hsl(0, 0%, 0%);
 182 }
 183
 184 body.inactive button.text-button, .text-button:disabled {
 185     background-image: linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
 186     border-color: rgba(80, 80, 80, 0.2);
 187     box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
 188     color: #aaa;
 189 }
 190
 191 .editing {
 192     -webkit-user-select: text;
 193     box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
 194     outline: 1px solid rgb(66%, 66%, 66%) !important;
 195     background-color: white;
 196     -webkit-user-modify: read-write-plaintext-only;
 197     text-overflow: clip !important;
 198     padding-left: 2px;
 199     margin-left: -2px;
 200     padding-right: 2px;
 201     margin-right: -2px;
 202     margin-bottom: -1px;
 203     padding-bottom: 1px;
 204     opacity: 1.0 !important;
 205 }
 206
 207 .editing,
 208 .editing * {
 209     color: #222 !important;
 210     text-decoration: none !important;
 211 }
 212
 213 .editing br {
 214     display: none;
 215 }
 216
 217 .elements-gutter-decoration {
 218     position: absolute;
 219     left: 1px;
 220     margin-top: 2px;
 221     height: 8px;
 222     width: 8px;
 223     border-radius: 4px;
 224     border: 1px solid orange;
 225     background-color: orange;
 226 }
 227
 228 .elements-gutter-decoration.elements-has-decorated-children {
 229     opacity: 0.5;
 230 }
 231
 232 .add-attribute {
 233     margin-left: 1px;
 234     margin-right: 1px;
 235     white-space: nowrap;
 236 }
 237
 238 .elements-tree-element-pick-node-1 {
 239     border-radius: 3px;
 240     padding: 1px 0 1px 0;
 241     -webkit-animation: elements-tree-element-pick-node-animation-1 0.5s 1;
 242 }
 243
 244 .elements-tree-element-pick-node-2 {
 245     border-radius: 3px;
 246     padding: 1px 0 1px 0;
 247     -webkit-animation: elements-tree-element-pick-node-animation-2 0.5s 1;
 248 }
 249
 250 @-webkit-keyframes elements-tree-element-pick-node-animation-1 {
 251     from { background-color: rgb(255, 210, 126); }
 252     to { background-color: inherit; }
 253 }
 254
 255 @-webkit-keyframes elements-tree-element-pick-node-animation-2 {
 256     from { background-color: rgb(255, 210, 126); }
 257     to { background-color: inherit; }
 258 }
 259
 260 .pick-node-mode {
 261     cursor: pointer;
 262 }
 263
 264 .webkit-html-attribute-value a {
 265     cursor: default !important;
 266 }
 267
 268 .nowrap, .nowrap .li {
 269     white-space: pre !important;
 270 }
 271
 272 .outline-disclosure .nowrap li {
 273     word-wrap: normal;
 274 }
 275
 276 .outline-disclosure.single-node li {
 277     padding-left: 2px;
 278 }
 279