<|start_filename|>src/resources/elements/property-view.css<|end_filename|>
property-view {
  margin-top: 2px;
  display: block;
}

property-view .arrow {
  font-size: 10px;
  color: dimgray;
  cursor: default;
}

property-view .arrow .right {
  margin-right: 1px;
}

property-view .property-line {
  white-space: nowrap;
}

property-view .property-name {
  font-size: 12px;
  color: purple;
  font-family: monospace;
  margin-left: 1px;
}

.dark property-view .property-name {
  color: #34c7bb;
}
property-view .value-container {
  position: relative;
}

property-view .property-editor {
  font-family: monospace;
  font-size: 12px;
  margin: 0;
  height: 12px;
  outline: none;
  border: 1px solid darkgray;
  box-shadow: 0 0 5px rgba(0,0,0,.5);
  position: absolute;
  top: 4px;
  left: 2px;
  padding: 0 0 0 2px;
}

property-view .property-value, property-view .token-colon {
  font-size: 12px;
  color: dimgray;
  font-family: monospace;
}

property-view .property-value.null, property-view .property-value.undefined {
  color: dimgray;
}

property-view .property-value.boolean {
  color: deeppink;
}

property-view .property-value.string {
  color: red;
  white-space: nowrap;
}
.dark property-view .property-value.string {
  color:#cbcbcb;
}

property-view .property-value.number {
  color: blue;
}

.dark property-view .property-value.number {
  color: #59a6ca;
}

property-view .property-value.array {
  color: black;
}

.dark property-view .property-value.array {
  color: #cbcbcb;
}

property-view .property-value.object, property-view .property-value.node {
  color: black;
}

.dark property-view .property-value.object, property-view .property-value.node {
  color: #cbcbcb;
}

property-view ul.properties {
  margin-left: 16px;
}

property-view .no-properties {
  margin-top: 4px;
  font-size: 10px;
}

.dark property-view .no-properties {
  color: #989898;
}


<|start_filename|>src/resources/elements/controller-view.css<|end_filename|>
controller-view .category-name {
  font-size: 10px;
  margin-bottom: 2px;
  margin-top: 2px;
}


<|start_filename|>manifest.json<|end_filename|>
{
  "manifest_version": 2,
  "name": "Aurelia Inspector",
  "version": "1.4.0",
  "description": "A Chrome plugin adding a new inspector pane to the Elements panel, providing Aurelia-specific information about selected elements.",
  "devtools_page": "devtools.html",
  "icons": {
    "16": "images/Aurelia_Icon_Color_RGB_16x16.png",
    "48": "images/Aurelia_Icon_Color_RGB_48x48.png",
    "128": "images/Aurelia_Icon_Color_RGB_128x128.png"
  }
}


<|start_filename|>src/app.css<|end_filename|>
.app-header {
  background: #f4f4f4;
  padding: 0;
  padding: 5px 0 0 0;
  text-align: center;
}

.dark .app-header {
  background: #2a2a2a;
}

.logo-badge {
  position: relative;
  top: -7px;
  font-weight: 100;
  font-size: 16px;
  color: #BB79A8;
}

.not-found {
  font-style: italic;
  font-size: 10px;
}

.dark .not-found {
  color: #989898;
}

.custom-attribute {
  margin-bottom: 4px;
}

.custom-attribute .attribute-name {
  color: saddlebrown;
}
.dark .custom-attribute .attribute-name {
  color: #ef9565;
}

.custom-attribute .block-token {
  color: gray;
}

.custom-attribute .attribute-name, .custom-attribute .block-token {
  font-size: 12px;
  display: inline;
  font-family: monospace;
}

.custom-attribute controller-view {
  margin-left: 8px;
  display: block;
}


<|start_filename|>devtools.js<|end_filename|>
chrome.devtools.panels.elements.createSidebarPane(
  "Aurelia",
  function(sidebar) {
    sidebar.setPage('index.html');
  }
);
