diff --git a/package.json b/package.json
index 2e94e64..305b508 100644
--- a/package.json
+++ b/package.json
@@ -66,9 +66,9 @@
     "karma-webpack": "^2.0.6",
     "licia": "^1.9.0",
     "node-sass": "^4.13.0",
-    "postcss-class-prefix": "^0.3.0",
     "postcss-clean": "^1.1.0",
     "postcss-loader": "^2.0.9",
+    "postcss-prefixer": "^2.1.2",
     "prettier": "^1.18.2",
     "remap-istanbul": "^0.13.0",
     "sass-loader": "^6.0.6",
diff --git a/script/genIcon.js b/script/genIcon.js
index 5bfa7c4..c12aad9 100644
--- a/script/genIcon.js
+++ b/script/genIcon.js
@@ -32,10 +32,7 @@ function genCssFile(fontData) {
         "') format('woff');"
     )
     data = data.join('\n')
-    data = data.replace(
-      /\.eruda-icon/g,
-      "[class^='eruda-icon-'],\n[class*=' eruda-icon-']"
-    )
+    data = data.replace(/\.eruda-icon/g, "[class^='icon-'],\n[class*=' icon-']")
 
     each(nameMap, (val, key) => {
       data = data.replace('icon-' + key + ':', 'icon-' + val + ':')
diff --git a/script/webpack.base.js b/script/webpack.base.js
index 8885725..822fd7e 100644
--- a/script/webpack.base.js
+++ b/script/webpack.base.js
@@ -1,5 +1,5 @@
 const autoprefixer = require('autoprefixer')
-const classPrefix = require('postcss-class-prefix')
+const prefixer = require('postcss-prefixer')
 const clean = require('postcss-clean')
 const webpack = require('webpack')
 const pkg = require('../package.json')
@@ -14,7 +14,13 @@ const banner = pkg.name + ' v' + pkg.version + ' ' + pkg.homepage
 const postcssLoader = {
   loader: 'postcss-loader',
   options: {
-    plugins: [classPrefix('eruda-'), autoprefixer, clean()]
+    plugins: [
+      prefixer({
+        prefix: 'eruda-'
+      }),
+      autoprefixer,
+      clean()
+    ]
   }
 }
 
diff --git a/src/Console/Console.hbs b/src/Console/Console.hbs
index 52fe124..1714cf6 100644
--- a/src/Console/Console.hbs
+++ b/src/Console/Console.hbs
@@ -1,4 +1,4 @@
-<div {{{class 'console-container'}}}>
+<div id='eruda-console-container'>
   <div {{{class 'control'}}}>
     <span {{{class 'icon-clear clear-console'}}}></span>
     <span {{{class 'filter active'}}} data-filter="all">All</span>
diff --git a/src/Console/Console.scss b/src/Console/Console.scss
index d1b0ac4..ef41ea6 100644
--- a/src/Console/Console.scss
+++ b/src/Console/Console.scss
@@ -1,108 +1,104 @@
 @import '../style/variable';
 @import '../style/mixin';
 
-.dev-tools {
-  .tools {
-    .console-container {
-      width: 100%;
-      height: 100%;
-      padding-top: 40px;
-      padding-bottom: 40px;
-      &.js-input-hidden {
-        padding-bottom: 0;
+#console-container {
+  width: 100%;
+  height: 100%;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  &.js-input-hidden {
+    padding-bottom: 0;
+  }
+  .control {
+    @include absolute(100%, 40px);
+    cursor: default;
+    padding: 10px 10px 10px 40px;
+    background: #fff;
+    line-height: 20px;
+    border-bottom: 1px solid $gray-light;
+    .icon-clear,
+    .icon-search {
+      display: inline-block;
+      color: $gray;
+      padding: 10px;
+      font-size: $font-size-l;
+      position: absolute;
+      top: 1px;
+      cursor: pointer;
+      transition: color $anim-duration;
+      &:active {
+        color: $gray-dark;
       }
-      .control {
-        @include absolute(100%, 40px);
-        cursor: default;
-        padding: 10px 10px 10px 40px;
-        background: #fff;
-        line-height: 20px;
-        border-bottom: 1px solid $gray-light;
-        .icon-clear,
-        .icon-search {
-          display: inline-block;
-          color: $gray;
-          padding: 10px;
-          font-size: $font-size-l;
-          position: absolute;
-          top: 1px;
-          cursor: pointer;
-          transition: color $anim-duration;
-          &:active {
-            color: $gray-dark;
-          }
-        }
-        .icon-clear {
-          left: 0;
-        }
-        .icon-search {
-          right: 0;
-        }
-        .filter {
-          cursor: pointer;
-          color: $gray;
-          margin: 0 1px;
-          font-size: $font-size-s;
-          height: 20px;
-          display: inline-block;
-          padding: 0 4px;
-          line-height: 20px;
-          border-radius: $border-radius;
-          transition: background $anim-duration, color $anim-duration;
-          &.active {
-            background: $gray;
-            color: #fff;
-          }
-        }
-      }
-      .js-input {
-        position: absolute;
-        z-index: 100;
-        left: 0;
-        bottom: 0;
-        width: 100%;
-        background: #fff;
-        height: 40px;
-        .buttons {
-          display: none;
-          position: absolute;
-          left: 0;
-          top: 0;
-          width: 100%;
-          height: 40px;
-          color: $gray;
-          font-size: $font-size-s;
-          border-bottom: 1px solid $gray-light;
-          .button {
-            cursor: pointer;
-            width: 50%;
-            display: inline-block;
-            text-align: center;
-            border-right: 1px solid $gray-light;
-            height: 40px;
-            line-height: 40px;
-            float: left;
-            &:last-child {
-              border-right: none;
-            }
-            transition: background $anim-duration, color $anim-duration;
-            &:active {
-              background: $blue;
-              color: #fff;
-            }
-          }
-        }
-        textarea {
-          padding: 10px;
-          outline: none;
-          border: none;
-          font-size: 14px;
-          width: 100%;
-          height: 100%;
-          user-select: text;
-          resize: none;
-        }
+    }
+    .icon-clear {
+      left: 0;
+    }
+    .icon-search {
+      right: 0;
+    }
+    .filter {
+      cursor: pointer;
+      color: $gray;
+      margin: 0 1px;
+      font-size: $font-size-s;
+      height: 20px;
+      display: inline-block;
+      padding: 0 4px;
+      line-height: 20px;
+      border-radius: $border-radius;
+      transition: background $anim-duration, color $anim-duration;
+      &.active {
+        background: $gray;
+        color: #fff;
       }
     }
   }
+  .js-input {
+    position: absolute;
+    z-index: 100;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background: #fff;
+    height: 40px;
+    .buttons {
+      display: none;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 40px;
+      color: $gray;
+      font-size: $font-size-s;
+      border-bottom: 1px solid $gray-light;
+      .button {
+        cursor: pointer;
+        width: 50%;
+        display: inline-block;
+        text-align: center;
+        border-right: 1px solid $gray-light;
+        height: 40px;
+        line-height: 40px;
+        float: left;
+        &:last-child {
+          border-right: none;
+        }
+        transition: background $anim-duration, color $anim-duration;
+        &:active {
+          background: $blue;
+          color: #fff;
+        }
+      }
+    }
+    textarea {
+      padding: 10px;
+      outline: none;
+      border: none;
+      font-size: 14px;
+      width: 100%;
+      height: 100%;
+      user-select: text;
+      resize: none;
+    }
+  }
 }
diff --git a/src/Console/Logger.scss b/src/Console/Logger.scss
index ff76782..5a941a2 100644
--- a/src/Console/Logger.scss
+++ b/src/Console/Logger.scss
@@ -1,197 +1,193 @@
 @import '../style/variable';
 @import '../style/mixin';
 
-.dev-tools {
-  .tools {
-    .console-container {
-      background: #fff;
-      .logs-container {
-        @include overflow-auto(y);
-        height: 100%;
+#console-container {
+  background: #fff;
+  .logs-container {
+    @include overflow-auto(y);
+    height: 100%;
+    position: relative;
+    will-change: scroll-position;
+  }
+  .fake-logs {
+    position: absolute;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+    visibility: hidden;
+    width: 100%;
+    * {
+      overflow: hidden;
+      color: black;
+      position: static;
+    }
+  }
+  .logs {
+    font-size: $font-size;
+    padding-top: 1px;
+  }
+  .log-container {
+    box-sizing: content-box;
+  }
+  .header {
+    white-space: nowrap;
+    display: flex;
+    font-size: $font-size-s;
+    color: $gray;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid $gray-light;
+    .time-container {
+      @include overflow-auto(x);
+      padding: 3px $padding;
+    }
+  }
+  .nesting-level {
+    width: 14px;
+    flex-shrink: 0;
+    margin-top: -1px;
+    margin-bottom: -1px;
+    position: relative;
+    border-right: 1px solid $gray;
+    &.group-closed::before {
+      content: '';
+    }
+    &::before {
+      border-bottom: 1px solid #a5a5a5;
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin-left: 100%;
+      width: 5px;
+      height: 100%;
+      box-sizing: border-box;
+    }
+  }
+  .log-item {
+    position: relative;
+    display: flex;
+    @include clear-float();
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid $gray-light;
+    margin-top: -1px;
+    min-height: 24px;
+    a {
+      color: $blue !important;
+    }
+    .icon-container {
+      padding-top: 2px;
+      margin: 0 -6px 0 $padding;
+      .icon {
+        line-height: 20px;
+        font-size: 12px;
+        color: $gray-dark;
         position: relative;
-        will-change: scroll-position;
       }
-      .fake-logs {
-        position: absolute;
-        left: 0;
-        top: 0;
-        pointer-events: none;
-        visibility: hidden;
-        width: 100%;
-        * {
-          overflow: hidden;
-          color: black;
-          position: static;
-        }
-      }
-      .logs {
-        font-size: $font-size;
-        padding-top: 1px;
-      }
-      .log-container {
-        box-sizing: content-box;
-      }
-      .header {
-        white-space: nowrap;
-        display: flex;
-        font-size: $font-size-s;
+      .icon-caret-right,
+      .icon-caret-down {
+        left: -2px;
         color: $gray;
-        border-top: 1px solid transparent;
-        border-bottom: 1px solid $gray-light;
-        .time-container {
-          @include overflow-auto(x);
-          padding: 3px $padding;
-        }
       }
-      .nesting-level {
-        width: 14px;
-        flex-shrink: 0;
-        margin-top: -1px;
-        margin-bottom: -1px;
-        position: relative;
-        border-right: 1px solid $gray;
-        &.group-closed::before {
-          content: '';
-        }
-        &::before {
-          border-bottom: 1px solid #a5a5a5;
-          position: absolute;
-          top: 0;
-          left: 0;
-          margin-left: 100%;
-          width: 5px;
-          height: 100%;
-          box-sizing: border-box;
-        }
+      .icon-arrow-right {
+        color: $blue;
       }
-      .log-item {
-        position: relative;
-        display: flex;
-        @include clear-float();
-        border-top: 1px solid transparent;
-        border-bottom: 1px solid $gray-light;
-        margin-top: -1px;
-        min-height: 24px;
-        a {
-          color: $blue !important;
-        }
-        .icon-container {
-          padding-top: 2px;
-          margin: 0 -6px 0 $padding;
-          .icon {
-            line-height: 20px;
-            font-size: 12px;
-            color: $gray-dark;
-            position: relative;
-          }
-          .icon-caret-right,
-          .icon-caret-down {
-            left: -2px;
-            color: $gray;
-          }
-          .icon-arrow-right {
-            color: $blue;
-          }
-          .icon-info {
-            color: $blue;
-          }
-          .icon-error {
-            color: $red;
-          }
-          .icon-warn {
-            top: -1px;
-            color: $yellow-dark;
-          }
-        }
-        .count {
+      .icon-info {
+        color: $blue;
+      }
+      .icon-error {
+        color: $red;
+      }
+      .icon-warn {
+        top: -1px;
+        color: $yellow-dark;
+      }
+    }
+    .count {
+      background: $blue;
+      padding: 2px 4px;
+      color: #fff;
+      border-radius: 10px;
+      float: left;
+      margin: 3px -6px 0 $padding;
+    }
+    .log-content-wrapper {
+      flex: 1;
+      overflow: hidden;
+    }
+    .log-content {
+      padding: 3px 0;
+      margin: 0 $padding;
+      @include overflow-auto(x);
+      white-space: pre-wrap;
+      user-select: text;
+      * {
+        user-select: text;
+      }
+    }
+    &.input {
+      background: #fff;
+    }
+    &.html,
+    &.table {
+      table {
+        width: 100%;
+        background: #fff;
+        border-collapse: collapse;
+        box-shadow: $box-shadow;
+        border-radius: $border-radius;
+        overflow: hidden;
+        th {
           background: $blue;
-          padding: 2px 4px;
           color: #fff;
-          border-radius: 10px;
-          float: left;
-          margin: 3px -6px 0 $padding;
         }
-        .log-content-wrapper {
-          flex: 1;
-          overflow: hidden;
-        }
-        .log-content {
-          padding: 3px 0;
-          margin: 0 $padding;
-          @include overflow-auto(x);
-          white-space: pre-wrap;
-          user-select: text;
-          * {
-            user-select: text;
+        th,
+        td {
+          border-left: 1px solid $gray;
+          padding: 3px $padding;
+          &:first-child {
+            border-left: none !important;
           }
         }
-        &.input {
-          background: #fff;
-        }
-        &.html,
-        &.table {
-          table {
-            width: 100%;
-            background: #fff;
-            border-collapse: collapse;
-            box-shadow: $box-shadow;
-            border-radius: $border-radius;
-            overflow: hidden;
-            th {
-              background: $blue;
-              color: #fff;
-            }
-            th,
-            td {
-              border-left: 1px solid $gray;
-              padding: 3px $padding;
-              &:first-child {
-                border-left: none !important;
-              }
-            }
-            tr:nth-child(even) {
-              background: $gray-light;
-            }
-          }
-          .blue {
-            color: $blue;
-          }
-        }
-        &.error {
-          z-index: 50;
-          background: $red-light;
-          color: $red;
-          border-top: 1px solid $red;
-          border-bottom: 1px solid $red;
-          .stack {
-            padding-left: 1.2em;
-            white-space: nowrap;
-          }
-          .count {
-            background: $red;
-          }
-        }
-        &.debug {
-          z-index: 20;
-        }
-        &.warn {
-          z-index: 40;
-          background: #fffbe6;
-          border-top: 1px solid $yellow;
-          border-bottom: 1px solid $yellow;
-        }
-        &.info {
-          z-index: 30;
-        }
-        &.output {
-          color: $gray-dark;
-        }
-        &.group,
-        &.groupCollapsed {
-          color: #222;
-          font-weight: bold;
+        tr:nth-child(even) {
+          background: $gray-light;
         }
       }
+      .blue {
+        color: $blue;
+      }
+    }
+    &.error {
+      z-index: 50;
+      background: $red-light;
+      color: $red;
+      border-top: 1px solid $red;
+      border-bottom: 1px solid $red;
+      .stack {
+        padding-left: 1.2em;
+        white-space: nowrap;
+      }
+      .count {
+        background: $red;
+      }
+    }
+    &.debug {
+      z-index: 20;
+    }
+    &.warn {
+      z-index: 40;
+      background: #fffbe6;
+      border-top: 1px solid $yellow;
+      border-bottom: 1px solid $yellow;
+    }
+    &.info {
+      z-index: 30;
+    }
+    &.output {
+      color: $gray-dark;
+    }
+    &.group,
+    &.groupCollapsed {
+      color: #222;
+      font-weight: bold;
     }
   }
 }
diff --git a/src/DevTools/DevTools.js b/src/DevTools/DevTools.js
index 772f932..7898cce 100644
--- a/src/DevTools/DevTools.js
+++ b/src/DevTools/DevTools.js
@@ -75,7 +75,9 @@ export default class DevTools extends Emitter {
     name = name.toLowerCase()
     if (this._tools[name]) return logger.warn(`Tool ${name} already exists`)
 
-    this._$tools.prepend(`<div class="eruda-${name} eruda-tool"></div>`)
+    this._$tools.prepend(
+      `<div id="eruda-${name}" class="eruda-${name} eruda-tool"></div>`
+    )
     tool.init(this._$tools.find(`.eruda-${name}.eruda-tool`), this)
     tool.active = false
     this._tools[name] = tool
diff --git a/src/DevTools/NavBar.scss b/src/DevTools/NavBar.scss
index caf92cf..9469db8 100644
--- a/src/DevTools/NavBar.scss
+++ b/src/DevTools/NavBar.scss
@@ -4,43 +4,41 @@
 $height: 55px;
 $item-width: 69px;
 
-.dev-tools {
-  .nav-bar {
-    @include absolute(100%, $height);
-    @include overflow-auto(x);
-    box-shadow: $box-shadow;
-    z-index: 100;
-    background: $blue;
-    font-size: 0;
-    white-space: nowrap;
-    .nav-bar-item {
-      cursor: pointer;
-      display: inline-block;
-      height: $height;
-      line-height: $height;
-      padding: 0 10px;
-      color: #fff;
-      font-size: $font-size-s;
-      text-align: center;
-      text-transform: capitalize;
-      transition: all $anim-duration;
-      &:active {
-        background: $gray-dark;
-        opacity: 0.5;
-      }
-      &.active {
-        background: $gray-light;
-        color: $gray-dark;
-        opacity: 0.5;
-      }
+.nav-bar {
+  @include absolute(100%, $height);
+  @include overflow-auto(x);
+  box-shadow: $box-shadow;
+  z-index: 100;
+  background: $blue;
+  font-size: 0;
+  white-space: nowrap;
+  .nav-bar-item {
+    cursor: pointer;
+    display: inline-block;
+    height: $height;
+    line-height: $height;
+    padding: 0 10px;
+    color: #fff;
+    font-size: $font-size-s;
+    text-align: center;
+    text-transform: capitalize;
+    transition: all $anim-duration;
+    &:active {
+      background: $gray-dark;
+      opacity: 0.5;
     }
-    .bottom-bar {
-      transition: left $anim-duration, width $anim-duration;
-      height: 3px;
-      background: #fff;
-      position: absolute;
-      bottom: 0;
-      left: 0;
+    &.active {
+      background: $gray-light;
+      color: $gray-dark;
+      opacity: 0.5;
     }
   }
+  .bottom-bar {
+    transition: left $anim-duration, width $anim-duration;
+    height: 3px;
+    background: #fff;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
 }
diff --git a/src/Elements/Elements.scss b/src/Elements/Elements.scss
index 2576a4c..f6bcca3 100644
--- a/src/Elements/Elements.scss
+++ b/src/Elements/Elements.scss
@@ -1,288 +1,284 @@
 @import '../style/variable';
 @import '../style/mixin';
 
-.dev-tools {
-  .tools {
-    .elements {
-      padding-bottom: 40px;
-      font-size: 14px;
-      .show-area {
-        @include overflow-auto(y);
-        height: 100%;
-      }
-      .parents {
-        @include overflow-auto(x);
-        background: #fff;
-        padding: $padding;
-        white-space: nowrap;
-        border-bottom: 1px solid $gray-light;
-        cursor: pointer;
-        font-size: $font-size-s;
-        li {
-          display: inline-block;
-          .parent {
-            display: inline-block;
-          }
-          &:last-child {
-            margin-right: 0;
-          }
-        }
-        .icon-arrow-right {
-          font-size: 8px;
-        }
-      }
-      .breadcrumb {
-        @include breadcrumb();
-        cursor: pointer;
-        transition: background $anim-duration, color $anim-duration;
-        &:active {
-          background: $blue;
-          color: #fff;
-          span {
-            color: #fff;
-          }
-        }
-      }
-      .section {
-        h2 {
-          .btn {
-            margin-left: 10px;
-            float: right;
-            text-align: center;
-            width: 18px;
-            height: 18px;
-            line-height: 18px;
-            font-size: 12px;
-          }
-          background: $blue;
-          padding: $padding;
-          color: #fff;
-          font-size: $font-size;
-          transition: background $anim-duration;
-          &.active-effect {
-            cursor: pointer;
-          }
-          &.active-effect:active {
-            background: $blue-dark;
-          }
-        }
-        margin-bottom: 10px;
-      }
-      .children {
-        background: #fff;
-        margin-bottom: 10px !important;
-        border-bottom: 1px solid $gray-light;
-        li {
-          @include overflow-auto(x);
-          cursor: default;
-          padding: $padding;
-          border-top: 1px solid $gray-light;
-          white-space: nowrap;
-          transition: background $anim-duration, color $anim-duration;
-          span {
-            transition: color $anim-duration;
-          }
-          &.active-effect {
-            cursor: pointer;
-          }
-          &.active-effect:active {
-            background: $blue;
-            color: #fff;
-            span {
-              color: #fff;
-            }
-          }
-        }
-      }
-      .attributes {
-        background: #fff;
-        font-size: 12px;
-        a {
-          color: $blue;
-        }
-        .table-wrapper {
-          @include overflow-auto(x);
-        }
-        table {
-          td {
-            padding: 5px 10px;
-          }
-        }
-      }
-      .text-content {
-        background: #fff;
-        .content {
-          @include overflow-auto(x);
-          padding: $padding;
-        }
-      }
-      .style-color {
-        width: 7px;
-        height: 7px;
-        margin-right: 2px;
-        border: 1px solid $gray-dark;
+#elements {
+  padding-bottom: 40px;
+  font-size: 14px;
+  .show-area {
+    @include overflow-auto(y);
+    height: 100%;
+  }
+  .parents {
+    @include overflow-auto(x);
+    background: #fff;
+    padding: $padding;
+    white-space: nowrap;
+    border-bottom: 1px solid $gray-light;
+    cursor: pointer;
+    font-size: $font-size-s;
+    li {
+      display: inline-block;
+      .parent {
         display: inline-block;
       }
-      .box-model {
-        @include overflow-auto(x);
-        background: #fff;
-        font-size: $font-size-s;
-        padding: $padding;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+    .icon-arrow-right {
+      font-size: 8px;
+    }
+  }
+  .breadcrumb {
+    @include breadcrumb();
+    cursor: pointer;
+    transition: background $anim-duration, color $anim-duration;
+    &:active {
+      background: $blue;
+      color: #fff;
+      span {
+        color: #fff;
+      }
+    }
+  }
+  .section {
+    h2 {
+      .btn {
+        margin-left: 10px;
+        float: right;
         text-align: center;
-        white-space: nowrap;
-        border-bottom: 1px solid $gray-light;
-        .label {
-          position: absolute;
-          margin-left: 3px;
-          padding: 0 2px;
-        }
-        .top,
-        .left,
-        .right,
-        .bottom {
-          display: inline-block;
-        }
-        .left,
-        .right {
-          vertical-align: middle;
-        }
-        .position,
-        .margin,
-        .border,
-        .padding,
-        .content {
-          position: relative;
-          background: #fff;
-          display: inline-block;
-          text-align: center;
-          vertical-align: middle;
-          padding: 3px;
-          margin: 3px;
-        }
-        .position {
-          border: 1px grey dotted;
-        }
-        .margin {
-          border: 1px dashed;
-          background: rgba(246, 178, 107, 0.66);
-        }
-        .border {
-          border: 1px #000 solid;
-          background: rgba(255, 229, 153, 0.66);
-        }
-        .padding {
-          border: 1px grey dashed;
-          background: rgba(147, 196, 125, 0.55);
-        }
-        .content {
-          border: 1px grey solid;
-          min-width: 100px;
-          background: rgba(111, 168, 220, 0.66);
-        }
-      }
-      .computed-style {
-        background: #fff;
-        font-size: $font-size-s;
-        a {
-          color: $blue;
-        }
-        .table-wrapper {
-          @include overflow-auto(y);
-          max-height: 200px;
-        }
-        table {
-          td {
-            padding: 5px 10px;
-            &.key {
-              white-space: nowrap;
-              color: $red;
-            }
-          }
-        }
-      }
-      .styles {
-        background: #fff;
+        width: 18px;
+        height: 18px;
+        line-height: 18px;
         font-size: 12px;
-        .style-wrapper {
-          padding: $padding;
-          .style-rules {
-            border-radius: $border-radius;
-            box-shadow: $box-shadow;
-            padding: $padding;
-            background: #fff;
-            margin-bottom: 10px;
-            .rule {
-              padding-left: 2em;
-              word-break: break-all;
-              a {
-                color: $blue;
-              }
-              span {
-                color: $red;
-              }
-            }
-            &:last-child {
-              margin-bottom: 0;
-            }
-          }
+      }
+      background: $blue;
+      padding: $padding;
+      color: #fff;
+      font-size: $font-size;
+      transition: background $anim-duration;
+      &.active-effect {
+        cursor: pointer;
+      }
+      &.active-effect:active {
+        background: $blue-dark;
+      }
+    }
+    margin-bottom: 10px;
+  }
+  .children {
+    background: #fff;
+    margin-bottom: 10px !important;
+    border-bottom: 1px solid $gray-light;
+    li {
+      @include overflow-auto(x);
+      cursor: default;
+      padding: $padding;
+      border-top: 1px solid $gray-light;
+      white-space: nowrap;
+      transition: background $anim-duration, color $anim-duration;
+      span {
+        transition: color $anim-duration;
+      }
+      &.active-effect {
+        cursor: pointer;
+      }
+      &.active-effect:active {
+        background: $blue;
+        color: #fff;
+        span {
+          color: #fff;
         }
       }
-      .listeners {
-        background: #fff;
-        font-size: 12px;
-        .listener-wrapper {
-          padding: $padding;
-          .listener {
-            box-shadow: $box-shadow;
-            margin-bottom: 10px;
-            background: #fff;
-            border-radius: $border-radius;
-            overflow: hidden;
-            .listener-type {
-              padding: $padding;
-              background: $blue;
-              color: #fff;
-            }
-            .listener-content {
-              li {
-                @include overflow-auto(x);
-                padding: $padding;
-                border-top: none;
-                &.capture {
-                  background: $gray-light;
-                }
-              }
-            }
-          }
+    }
+  }
+  .attributes {
+    background: #fff;
+    font-size: 12px;
+    a {
+      color: $blue;
+    }
+    .table-wrapper {
+      @include overflow-auto(x);
+    }
+    table {
+      td {
+        padding: 5px 10px;
+      }
+    }
+  }
+  .text-content {
+    background: #fff;
+    .content {
+      @include overflow-auto(x);
+      padding: $padding;
+    }
+  }
+  .style-color {
+    width: 7px;
+    height: 7px;
+    margin-right: 2px;
+    border: 1px solid $gray-dark;
+    display: inline-block;
+  }
+  .box-model {
+    @include overflow-auto(x);
+    background: #fff;
+    font-size: $font-size-s;
+    padding: $padding;
+    text-align: center;
+    white-space: nowrap;
+    border-bottom: 1px solid $gray-light;
+    .label {
+      position: absolute;
+      margin-left: 3px;
+      padding: 0 2px;
+    }
+    .top,
+    .left,
+    .right,
+    .bottom {
+      display: inline-block;
+    }
+    .left,
+    .right {
+      vertical-align: middle;
+    }
+    .position,
+    .margin,
+    .border,
+    .padding,
+    .content {
+      position: relative;
+      background: #fff;
+      display: inline-block;
+      text-align: center;
+      vertical-align: middle;
+      padding: 3px;
+      margin: 3px;
+    }
+    .position {
+      border: 1px grey dotted;
+    }
+    .margin {
+      border: 1px dashed;
+      background: rgba(246, 178, 107, 0.66);
+    }
+    .border {
+      border: 1px #000 solid;
+      background: rgba(255, 229, 153, 0.66);
+    }
+    .padding {
+      border: 1px grey dashed;
+      background: rgba(147, 196, 125, 0.55);
+    }
+    .content {
+      border: 1px grey solid;
+      min-width: 100px;
+      background: rgba(111, 168, 220, 0.66);
+    }
+  }
+  .computed-style {
+    background: #fff;
+    font-size: $font-size-s;
+    a {
+      color: $blue;
+    }
+    .table-wrapper {
+      @include overflow-auto(y);
+      max-height: 200px;
+    }
+    table {
+      td {
+        padding: 5px 10px;
+        &.key {
+          white-space: nowrap;
+          color: $red;
         }
       }
-      .bottom-bar {
-        height: 40px;
+    }
+  }
+  .styles {
+    background: #fff;
+    font-size: 12px;
+    .style-wrapper {
+      padding: $padding;
+      .style-rules {
+        border-radius: $border-radius;
+        box-shadow: $box-shadow;
+        padding: $padding;
         background: #fff;
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        width: 100%;
-        font-size: 0;
-        border-top: 1px solid $gray-light;
-        .btn {
-          cursor: pointer;
-          text-align: center;
-          color: $gray;
-          font-size: 14px;
-          line-height: 40px;
-          width: 25%;
-          display: inline-block;
-          transition: background $anim-duration, color $anim-duration;
-          &:active {
-            background: $blue;
-            color: #fff;
-          }
-          &.active {
+        margin-bottom: 10px;
+        .rule {
+          padding-left: 2em;
+          word-break: break-all;
+          a {
             color: $blue;
           }
+          span {
+            color: $red;
+          }
+        }
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+  .listeners {
+    background: #fff;
+    font-size: 12px;
+    .listener-wrapper {
+      padding: $padding;
+      .listener {
+        box-shadow: $box-shadow;
+        margin-bottom: 10px;
+        background: #fff;
+        border-radius: $border-radius;
+        overflow: hidden;
+        .listener-type {
+          padding: $padding;
+          background: $blue;
+          color: #fff;
+        }
+        .listener-content {
+          li {
+            @include overflow-auto(x);
+            padding: $padding;
+            border-top: none;
+            &.capture {
+              background: $gray-light;
+            }
+          }
         }
       }
     }
   }
+  .bottom-bar {
+    height: 40px;
+    background: #fff;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    font-size: 0;
+    border-top: 1px solid $gray-light;
+    .btn {
+      cursor: pointer;
+      text-align: center;
+      color: $gray;
+      font-size: 14px;
+      line-height: 40px;
+      width: 25%;
+      display: inline-block;
+      transition: background $anim-duration, color $anim-duration;
+      &:active {
+        background: $blue;
+        color: #fff;
+      }
+      &.active {
+        color: $blue;
+      }
+    }
+  }
 }
diff --git a/src/Info/Info.scss b/src/Info/Info.scss
index f29bc8a..d8edc59 100644
--- a/src/Info/Info.scss
+++ b/src/Info/Info.scss
@@ -1,49 +1,45 @@
 @import '../style/variable';
 @import '../style/mixin';
 
-.dev-tools {
-  .tools {
-    .info.tool {
-      @include overflow-auto(y);
-      li {
-        border-radius: $border-radius;
-        background: #fff;
-        margin: 10px;
-        box-shadow: $box-shadow;
-        .title,
-        .content {
-          padding: $padding;
-        }
-        .title {
-          padding-bottom: 0;
-          font-size: $font-size-l;
-          color: $blue;
-        }
-        .content {
-          margin: 0;
-          user-select: text;
-          word-break: break-all;
-          table {
-            width: 100%;
-            border-collapse: collapse;
-            th,
-            td {
-              border: 1px solid $gray-light;
-              padding: 10px;
-            }
-          }
-          * {
-            user-select: text;
-          }
-          a {
-            color: $blue;
-          }
-        }
-        .device-key,
-        .system-key {
-          width: 100px;
+#info {
+  @include overflow-auto(y);
+  li {
+    border-radius: $border-radius;
+    background: #fff;
+    margin: 10px;
+    box-shadow: $box-shadow;
+    .title,
+    .content {
+      padding: $padding;
+    }
+    .title {
+      padding-bottom: 0;
+      font-size: $font-size-l;
+      color: $blue;
+    }
+    .content {
+      margin: 0;
+      user-select: text;
+      word-break: break-all;
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        th,
+        td {
+          border: 1px solid $gray-light;
+          padding: 10px;
         }
       }
+      * {
+        user-select: text;
+      }
+      a {
+        color: $blue;
+      }
+    }
+    .device-key,
+    .system-key {
+      width: 100px;
     }
   }
 }
diff --git a/src/Network/Network.scss b/src/Network/Network.scss
index 533dbc3..204f3fd 100644
--- a/src/Network/Network.scss
+++ b/src/Network/Network.scss
@@ -1,134 +1,130 @@
 @import '../style/variable';
 @import '../style/mixin';
 
-.dev-tools {
-  .tools {
-    .network {
-      padding-top: 36px;
-      .title {
-        @include absolute(100%, 36px);
-        @include right-btn();
-        background: $gray;
-        padding: $padding;
-        color: #fff;
-        height: 36px;
+#network {
+  padding-top: 36px;
+  .title {
+    @include absolute(100%, 36px);
+    @include right-btn();
+    background: $gray;
+    padding: $padding;
+    color: #fff;
+    height: 36px;
+  }
+  .requests {
+    @include overflow-auto(y);
+    height: 100%;
+    background: #fff;
+    border-bottom: 1px solid $gray-light;
+    margin-bottom: 10px;
+    li {
+      display: flex;
+      width: 100%;
+      cursor: pointer;
+      border-top: 1px solid $gray-light;
+      height: 41px;
+      white-space: nowrap;
+      &.error {
+        span {
+          color: $red;
+        }
       }
-      .requests {
-        @include overflow-auto(y);
-        height: 100%;
+      span {
+        display: block;
+        line-height: 40px;
+        height: 40px;
+        padding: 0 5px;
+        font-size: $font-size-s;
+        vertical-align: top;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .name {
+        flex: 1;
+        padding-left: $padding;
+      }
+      .status {
+        width: 40px;
+      }
+      .method,
+      .type {
+        width: 50px;
+      }
+      .size {
+        width: 70px;
+      }
+      .time {
+        width: 60px;
+        padding-right: $padding;
+      }
+      &:nth-child(even) {
+        background: $gray-light;
+      }
+    }
+  }
+  .detail {
+    @include absolute();
+    z-index: 10;
+    display: none;
+    padding-bottom: 40px;
+    background: #f8f9fa;
+    .http {
+      @include overflow-auto(y);
+      height: 100%;
+      .breadcrumb {
+        @include breadcrumb();
+      }
+      .section {
         background: #fff;
-        border-bottom: 1px solid $gray-light;
+        h2 {
+          background: $blue;
+          padding: $padding;
+          color: #fff;
+          font-size: $font-size;
+        }
         margin-bottom: 10px;
-        li {
-          display: flex;
-          width: 100%;
-          cursor: pointer;
-          border-top: 1px solid $gray-light;
-          height: 41px;
-          white-space: nowrap;
-          &.error {
-            span {
-              color: $red;
-            }
+        table {
+          * {
+            user-select: text;
           }
-          span {
-            display: block;
-            line-height: 40px;
-            height: 40px;
-            padding: 0 5px;
+          td {
             font-size: $font-size-s;
-            vertical-align: top;
-            text-overflow: ellipsis;
-            overflow: hidden;
+            padding: 5px 10px;
+            word-break: break-all;
           }
-          .name {
-            flex: 1;
-            padding-left: $padding;
-          }
-          .status {
-            width: 40px;
-          }
-          .method,
-          .type {
-            width: 50px;
-          }
-          .size {
-            width: 70px;
-          }
-          .time {
-            width: 60px;
-            padding-right: $padding;
-          }
-          &:nth-child(even) {
-            background: $gray-light;
+          .key {
+            white-space: nowrap;
           }
         }
       }
-      .detail {
-        @include absolute();
-        z-index: 10;
-        display: none;
-        padding-bottom: 40px;
-        background: #f8f9fa;
-        .http {
-          @include overflow-auto(y);
-          height: 100%;
-          .breadcrumb {
-            @include breadcrumb();
-          }
-          .section {
-            background: #fff;
-            h2 {
-              background: $blue;
-              padding: $padding;
-              color: #fff;
-              font-size: $font-size;
-            }
-            margin-bottom: 10px;
-            table {
-              * {
-                user-select: text;
-              }
-              td {
-                font-size: $font-size-s;
-                padding: 5px 10px;
-                word-break: break-all;
-              }
-              .key {
-                white-space: nowrap;
-              }
-            }
-          }
-          .response,
-          .data {
-            user-select: text;
-            @include overflow-auto(x);
-            background: #fff;
-            padding: $padding;
-            font-size: $font-size-s;
-            margin-bottom: 10px;
-            white-space: pre-wrap;
-          }
-        }
-        .back {
-          position: absolute;
-          left: 0;
-          bottom: 0;
-          color: #fff;
-          width: 100%;
-          background: $blue;
-          display: block;
-          height: 40px;
-          line-height: 40px;
-          text-decoration: none;
-          text-align: center;
-          margin-top: 10px;
-          transition: background 0.3s;
-          cursor: pointer;
-          &:active {
-            background: $blue-dark;
-          }
-        }
+      .response,
+      .data {
+        user-select: text;
+        @include overflow-auto(x);
+        background: #fff;
+        padding: $padding;
+        font-size: $font-size-s;
+        margin-bottom: 10px;
+        white-space: pre-wrap;
+      }
+    }
+    .back {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      color: #fff;
+      width: 100%;
+      background: $blue;
+      display: block;
+      height: 40px;
+      line-height: 40px;
+      text-decoration: none;
+      text-align: center;
+      margin-top: 10px;
+      transition: background 0.3s;
+      cursor: pointer;
+      &:active {
+        background: $blue-dark;
       }
     }
   }
diff --git a/src/Resources/Resources.scss b/src/Resources/Resources.scss
index e7ff7aa..b6e0ee3 100644
--- a/src/Resources/Resources.scss
+++ b/src/Resources/Resources.scss
@@ -1,100 +1,96 @@
 @import '../style/variable';
 @import '../style/mixin';
 
-.dev-tools {
-  .tools {
-    .resources {
-      @include overflow-auto(y);
+#resources {
+  @include overflow-auto(y);
+  padding: 10px;
+  font-size: 14px;
+  .section {
+    margin-bottom: 10px;
+    border-radius: 4px;
+    box-shadow: $box-shadow;
+    overflow: hidden;
+  }
+  .title {
+    @include right-btn();
+    padding: $padding;
+    color: #fff;
+    background: $blue;
+    &.ok {
+      background: $green;
+    }
+    &.warn {
+      background: $yellow;
+    }
+    &.danger {
+      background: $red;
+    }
+  }
+  .link-list {
+    font-size: $font-size-s;
+    li {
       padding: 10px;
-      font-size: 14px;
-      .section {
-        margin-bottom: 10px;
-        border-radius: 4px;
-        box-shadow: $box-shadow;
-        overflow: hidden;
-      }
-      .title {
-        @include right-btn();
-        padding: $padding;
-        color: #fff;
-        background: $blue;
-        &.ok {
-          background: $green;
-        }
-        &.warn {
-          background: $yellow;
-        }
-        &.danger {
-          background: $red;
-        }
-      }
-      .link-list {
-        font-size: $font-size-s;
-        li {
-          padding: 10px;
-          background: #fff;
-          word-break: break-all;
-          a {
-            color: $blue !important;
-          }
-        }
-      }
-      .image-list {
-        @include clear-float();
-        font-size: $font-size-s;
-        background: #fff;
-        display: flex;
-        flex-wrap: wrap;
-        padding: $padding !important;
-        li {
-          flex-grow: 1;
-          cursor: pointer;
-          &.image {
-            height: 100px;
-            font-size: 0;
-          }
-          overflow-y: hidden;
-          img {
-            height: 100px;
-            min-width: 100%;
-            object-fit: cover;
-          }
-        }
-      }
-      table {
-        border-collapse: collapse;
-        width: 100%;
-        font-size: $font-size-s;
-        td {
-          padding: 10px;
-          word-break: break-all;
-          &.key {
-            @include overflow-auto(x);
-            white-space: nowrap;
-            max-width: 120px;
-          }
-          &.control {
-            padding: 0;
-            font-size: 0;
-            width: 40px;
-            .icon-delete {
-              cursor: pointer;
-              color: $red;
-              font-size: $font-size;
-              display: inline-block;
-              width: 40px;
-              height: 40px;
-              text-align: center;
-              line-height: 40px;
-              transition: color $anim-duration;
-              &:active {
-                color: $red-dark;
-              }
-            }
-          }
-        }
-        background: #fff;
+      background: #fff;
+      word-break: break-all;
+      a {
+        color: $blue !important;
       }
     }
   }
+  .image-list {
+    @include clear-float();
+    font-size: $font-size-s;
+    background: #fff;
+    display: flex;
+    flex-wrap: wrap;
+    padding: $padding !important;
+    li {
+      flex-grow: 1;
+      cursor: pointer;
+      &.image {
+        height: 100px;
+        font-size: 0;
+      }
+      overflow-y: hidden;
+      img {
+        height: 100px;
+        min-width: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    font-size: $font-size-s;
+    td {
+      padding: 10px;
+      word-break: break-all;
+      &.key {
+        @include overflow-auto(x);
+        white-space: nowrap;
+        max-width: 120px;
+      }
+      &.control {
+        padding: 0;
+        font-size: 0;
+        width: 40px;
+        .icon-delete {
+          cursor: pointer;
+          color: $red;
+          font-size: $font-size;
+          display: inline-block;
+          width: 40px;
+          height: 40px;
+          text-align: center;
+          line-height: 40px;
+          transition: color $anim-duration;
+          &:active {
+            color: $red-dark;
+          }
+        }
+      }
+    }
+    background: #fff;
+  }
 }
diff --git a/src/Settings/Settings.scss b/src/Settings/Settings.scss
index 4f37ab0..d68d603 100644
--- a/src/Settings/Settings.scss
+++ b/src/Settings/Settings.scss
@@ -1,221 +1,217 @@
 @import '../style/variable';
 @import '../style/mixin';
 
-.dev-tools {
-  .tools {
-    .settings {
-      @include overflow-auto(y);
-      .separator {
-        height: 10px;
+#settings {
+  @include overflow-auto(y);
+  .separator {
+    height: 10px;
+  }
+  .text {
+    padding: $padding;
+    color: $gray-dark;
+    font-size: 12px;
+  }
+  .select,
+  .range,
+  .color {
+    cursor: pointer;
+  }
+  .select .head,
+  .switch,
+  .range .head,
+  .color .head {
+    padding: $padding;
+    background: #fff;
+    font-size: $font-size;
+    border-bottom: 1px solid $gray-light;
+    border-top: 1px solid $gray-light;
+    margin-top: -1px;
+  }
+  .select .head,
+  .range .head,
+  .color .head {
+    transition: background $anim-duration, color $anim-duration;
+    span {
+      float: right;
+    }
+    &:active {
+      background: $blue;
+      color: #fff;
+    }
+  }
+  .color .head span {
+    display: inline-block;
+    border: 1px solid $gray-dark;
+    width: 15px;
+    height: 15px;
+  }
+  .select ul {
+    display: none;
+    &.open {
+      display: block;
+    }
+    li {
+      padding: $padding;
+      background: $gray-light;
+      transition: background $anim-duration, color $anim-duration;
+      &:active {
+        background: $blue;
+        color: #fff;
       }
-      .text {
-        padding: $padding;
-        color: $gray-dark;
-        font-size: 12px;
-      }
-      .select,
-      .range,
-      .color {
-        cursor: pointer;
-      }
-      .select .head,
-      .switch,
-      .range .head,
-      .color .head {
-        padding: $padding;
-        background: #fff;
-        font-size: $font-size;
-        border-bottom: 1px solid $gray-light;
-        border-top: 1px solid $gray-light;
-        margin-top: -1px;
-      }
-      .select .head,
-      .range .head,
-      .color .head {
-        transition: background $anim-duration, color $anim-duration;
-        span {
-          float: right;
-        }
-        &:active {
-          background: $blue;
-          color: #fff;
+    }
+  }
+  .color ul {
+    display: none;
+    padding: $padding;
+    font-size: 0;
+    background: $gray-light;
+    &.open {
+      display: block;
+    }
+    li {
+      display: inline-block;
+      width: 20px;
+      border: 1px solid $gray-dark;
+      height: 20px;
+      margin-right: 10px;
+    }
+  }
+  .range .input-container {
+    display: none;
+    padding: $padding;
+    background: $gray-light;
+    position: relative;
+    &.open {
+      display: block;
+    }
+    .range-track {
+      height: 4px;
+      width: 100%;
+      padding: 0 $padding;
+      position: absolute;
+      left: 0;
+      top: 16px;
+      .range-track-bar {
+        background: $gray;
+        border-radius: 2px;
+        overflow: hidden;
+        width: 100%;
+        height: 4px;
+        .range-track-progress {
+          height: 100%;
+          background: $gray-dark;
+          width: 50%;
         }
       }
-      .color .head span {
-        display: inline-block;
-        border: 1px solid $gray-dark;
-        width: 15px;
-        height: 15px;
+    }
+    input {
+      -webkit-appearance: none;
+      background: transparent;
+      height: 4px;
+      width: 100%;
+      position: relative;
+      top: -3px;
+      margin: 0 auto;
+      outline: none;
+      border-radius: 2px;
+    }
+    input::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      position: relative;
+      top: 0px;
+      z-index: 1;
+      width: 16px;
+      border: none;
+      height: 16px;
+      border-radius: 10px;
+      background: radial-gradient(
+        circle at center,
+        $gray 0,
+        $gray 15%,
+        #fff 22%,
+        #fff 100%
+      );
+      box-shadow: $box-shadow;
+    }
+  }
+  .switch {
+    .checkbox {
+      float: right;
+      position: relative;
+      vertical-align: top;
+      width: 46px;
+      height: 20px;
+      padding: 3px;
+      border-radius: 18px;
+      box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
+      cursor: pointer;
+      background-image: linear-gradient(to bottom, #eeeeee, white 25px);
+      .input {
+        position: absolute;
+        top: 0;
+        left: 0;
+        opacity: 0;
       }
-      .select ul {
-        display: none;
-        &.open {
-          display: block;
-        }
-        li {
-          padding: $padding;
-          background: $gray-light;
-          transition: background $anim-duration, color $anim-duration;
-          &:active {
-            background: $blue;
-            color: #fff;
-          }
-        }
-      }
-      .color ul {
-        display: none;
-        padding: $padding;
-        font-size: 0;
-        background: $gray-light;
-        &.open {
-          display: block;
-        }
-        li {
-          display: inline-block;
-          width: 20px;
-          border: 1px solid $gray-dark;
-          height: 20px;
-          margin-right: 10px;
-        }
-      }
-      .range .input-container {
-        display: none;
-        padding: $padding;
-        background: $gray-light;
+      .label {
+        pointer-events: none;
         position: relative;
-        &.open {
-          display: block;
-        }
-        .range-track {
-          height: 4px;
-          width: 100%;
-          padding: 0 $padding;
+        display: block;
+        height: 14px;
+        font-size: 10px;
+        text-transform: uppercase;
+        background: #eceeef;
+        border-radius: inherit;
+        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12),
+          inset 0 0 2px rgba(0, 0, 0, 0.15);
+        transition: 0.15s ease-out;
+        transition-property: opacity background;
+        &:before,
+        &:after {
           position: absolute;
-          left: 0;
-          top: 16px;
-          .range-track-bar {
-            background: $gray;
-            border-radius: 2px;
-            overflow: hidden;
-            width: 100%;
-            height: 4px;
-            .range-track-progress {
-              height: 100%;
-              background: $gray-dark;
-              width: 50%;
-            }
-          }
-        }
-        input {
-          -webkit-appearance: none;
-          background: transparent;
-          height: 4px;
-          width: 100%;
-          position: relative;
-          top: -3px;
-          margin: 0 auto;
-          outline: none;
-          border-radius: 2px;
-        }
-        input::-webkit-slider-thumb {
-          -webkit-appearance: none;
-          position: relative;
-          top: 0px;
-          z-index: 1;
-          width: 16px;
-          border: none;
-          height: 16px;
-          border-radius: 10px;
-          background: radial-gradient(
-            circle at center,
-            $gray 0,
-            $gray 15%,
-            #fff 22%,
-            #fff 100%
-          );
-          box-shadow: $box-shadow;
+          top: 50%;
+          margin-top: -0.5em;
+          line-height: 1;
+          transition: inherit;
         }
       }
-      .switch {
-        .checkbox {
-          float: right;
-          position: relative;
-          vertical-align: top;
-          width: 46px;
-          height: 20px;
-          padding: 3px;
-          border-radius: 18px;
-          box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
-          cursor: pointer;
-          background-image: linear-gradient(to bottom, #eeeeee, white 25px);
-          .input {
-            position: absolute;
-            top: 0;
-            left: 0;
-            opacity: 0;
-          }
-          .label {
-            pointer-events: none;
-            position: relative;
-            display: block;
-            height: 14px;
-            font-size: 10px;
-            text-transform: uppercase;
-            background: #eceeef;
-            border-radius: inherit;
-            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12),
-              inset 0 0 2px rgba(0, 0, 0, 0.15);
-            transition: 0.15s ease-out;
-            transition-property: opacity background;
-            &:before,
-            &:after {
-              position: absolute;
-              top: 50%;
-              margin-top: -0.5em;
-              line-height: 1;
-              transition: inherit;
-            }
-          }
-          .input:checked ~ .label {
-            background: $blue;
-            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15),
-              inset 0 0 3px rgba(0, 0, 0, 0.2);
-          }
-          .input:checked ~ .label:before {
-            opacity: 0;
-          }
-          .input:checked ~ .label:after {
-            opacity: 1;
-          }
-          .handle {
-            position: absolute;
-            pointer-events: none;
-            top: 0;
-            left: 0;
-            width: 18px;
-            height: 18px;
-            border-radius: 10px;
-            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
-            background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
-            transition: left 0.15s ease-out;
-          }
-          .handle:before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            margin: -6px 0 0 -6px;
-            width: 12px;
-            height: 12px;
-            border-radius: 6px;
-            box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
-            background-image: linear-gradient(to bottom, #eeeeee, white);
-          }
-          .input:checked ~ .handle {
-            left: 30px;
-            box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
-          }
-        }
+      .input:checked ~ .label {
+        background: $blue;
+        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15),
+          inset 0 0 3px rgba(0, 0, 0, 0.2);
+      }
+      .input:checked ~ .label:before {
+        opacity: 0;
+      }
+      .input:checked ~ .label:after {
+        opacity: 1;
+      }
+      .handle {
+        position: absolute;
+        pointer-events: none;
+        top: 0;
+        left: 0;
+        width: 18px;
+        height: 18px;
+        border-radius: 10px;
+        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
+        background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
+        transition: left 0.15s ease-out;
+      }
+      .handle:before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin: -6px 0 0 -6px;
+        width: 12px;
+        height: 12px;
+        border-radius: 6px;
+        box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
+        background-image: linear-gradient(to bottom, #eeeeee, white);
+      }
+      .input:checked ~ .handle {
+        left: 30px;
+        box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
       }
     }
   }
diff --git a/src/Snippets/Snippets.scss b/src/Snippets/Snippets.scss
index 9bb6370..e9a710e 100644
--- a/src/Snippets/Snippets.scss
+++ b/src/Snippets/Snippets.scss
@@ -1,46 +1,42 @@
 @import '../style/variable';
 @import '../style/mixin';
 
-.dev-tools {
-  .tools {
-    .snippets {
-      @include overflow-auto(y);
-      padding: $padding;
-      .section {
-        margin-bottom: 10px;
-        border-radius: $border-radius;
-        box-shadow: $box-shadow;
-        overflow: hidden;
-        cursor: pointer;
-        &:active {
-          .name {
-            background: $gray-dark;
-          }
-          .description {
-            background: $gray-light;
-          }
-        }
-        .name {
-          padding: $padding;
-          color: #fff;
-          background: $gray;
-          transition: background $anim-duration;
-          .btn {
-            margin-left: 10px;
-            float: right;
-            text-align: center;
-            width: 18px;
-            height: 18px;
-            line-height: 18px;
-            font-size: 12px;
-          }
-        }
-        .description {
-          background: #fff;
-          padding: $padding;
-          transition: background $anim-duration;
-        }
+#snippets {
+  @include overflow-auto(y);
+  padding: $padding;
+  .section {
+    margin-bottom: 10px;
+    border-radius: $border-radius;
+    box-shadow: $box-shadow;
+    overflow: hidden;
+    cursor: pointer;
+    &:active {
+      .name {
+        background: $gray-dark;
       }
+      .description {
+        background: $gray-light;
+      }
+    }
+    .name {
+      padding: $padding;
+      color: #fff;
+      background: $gray;
+      transition: background $anim-duration;
+      .btn {
+        margin-left: 10px;
+        float: right;
+        text-align: center;
+        width: 18px;
+        height: 18px;
+        line-height: 18px;
+        font-size: 12px;
+      }
+    }
+    .description {
+      background: #fff;
+      padding: $padding;
+      transition: background $anim-duration;
     }
   }
 }
diff --git a/src/Sources/Sources.scss b/src/Sources/Sources.scss
index aca5ee5..a38ba87 100644
--- a/src/Sources/Sources.scss
+++ b/src/Sources/Sources.scss
@@ -1,75 +1,71 @@
 @import '../style/variable';
 @import '../style/mixin';
 
-.dev-tools {
-  .tools {
-    .sources {
-      @include overflow-auto(y);
-      .code-wrapper,
-      .raw-wrapper {
-        @include overflow-auto(x);
-        width: 100%;
-        background: #fff;
-        min-height: 100%;
-      }
-      .raw {
-        user-select: text;
-        padding: $padding;
-      }
-      .code {
-        font-family: $font-family-code;
-        font-size: $font-size-s;
-        .content * {
-          user-select: text;
-        }
-      }
-      pre.code {
-        padding: $padding;
-      }
-      table.code {
-        border-collapse: collapse;
-        .gutter {
-          background: $gray-light;
-          color: $gray;
-        }
-        .line-num {
-          border-right: 1px solid $gray;
-          padding: 0 3px 0 5px;
-          text-align: right;
-        }
-        .code-line {
-          padding: 0 4px;
-          white-space: pre;
-        }
-      }
-      .image {
-        .breadcrumb {
-          @include breadcrumb();
-        }
-        .img-container {
-          text-align: center;
-          img {
-            max-width: 100%;
-            box-shadow: $box-shadow;
-          }
-        }
-        .img-info {
-          text-align: center;
-          margin: 20px 0;
-          color: $gray;
-        }
-      }
-      .json {
-        background: #fff;
-        padding: $padding;
-        * {
-          user-select: text;
-        }
-      }
-      iframe {
-        width: 100%;
-        height: 100%;
-      }
+.sources {
+  @include overflow-auto(y);
+  .code-wrapper,
+  .raw-wrapper {
+    @include overflow-auto(x);
+    width: 100%;
+    background: #fff;
+    min-height: 100%;
+  }
+  .raw {
+    user-select: text;
+    padding: $padding;
+  }
+  .code {
+    font-family: $font-family-code;
+    font-size: $font-size-s;
+    .content * {
+      user-select: text;
     }
   }
+  pre.code {
+    padding: $padding;
+  }
+  table.code {
+    border-collapse: collapse;
+    .gutter {
+      background: $gray-light;
+      color: $gray;
+    }
+    .line-num {
+      border-right: 1px solid $gray;
+      padding: 0 3px 0 5px;
+      text-align: right;
+    }
+    .code-line {
+      padding: 0 4px;
+      white-space: pre;
+    }
+  }
+  .image {
+    .breadcrumb {
+      @include breadcrumb();
+    }
+    .img-container {
+      text-align: center;
+      img {
+        max-width: 100%;
+        box-shadow: $box-shadow;
+      }
+    }
+    .img-info {
+      text-align: center;
+      margin: 20px 0;
+      color: $gray;
+    }
+  }
+  .json {
+    background: #fff;
+    padding: $padding;
+    * {
+      user-select: text;
+    }
+  }
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
 }
diff --git a/src/style/icon.css b/src/style/icon.css
index a8c5331..ee78790 100644
--- a/src/style/icon.css
+++ b/src/style/icon.css
@@ -4,8 +4,8 @@
     format('woff');
 }
 
-[class^='eruda-icon-'],
-[class*=' eruda-icon-'] {
+[class^='icon-'],
+[class*=' icon-'] {
   font-family: 'eruda-icon' !important;
   font-size: 16px;
   font-style: normal;