/*------------------------------------------------

How to Install 怎麼安裝
1. Download Custom.css
2. Replace the Custom.css file in your "User Stylesheets" folder. Here is how to find Custom.css:

Windows:
%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

Linux:
~/.config/chromium/Default/User StyleSheets/Custom.css

Mac:
~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

------------------------------------------------*/

/*  Inspect Triangle Style
------------------------------------------------*/
#console-messages .console-group-messages .section .header::before,
#console-messages .properties-tree li.parent::before
{
    content: url(chrome-devtools://devtools/Images/treeRightTriangleBlack.png) !important;
}

#console-messages .console-group-messages .section.expanded .header::before,
#console-messages .properties-tree li.parent.expanded::before
{
    content: url(chrome-devtools://devtools/Images/treeDownTriangleBlack.png) !important;
}

/*  Globe Typography
------------------------------------------------*/
#-blink-dev-tools .outline-disclosure ol li,
#-blink-dev-tools .text-editor .inner-container .webkit-line-content,
#-blink-dev-tools .text-editor-lines .inner-container .webkit-line-number,
#-blink-dev-tools .CodeMirror-lines,
#-blink-dev-tools #search-results-pane-file-based .search-match,
#-blink-dev-tools #console-view .console-message {
    font-size: 10px !important;
    line-height: 14px !important;
    font-family: Menlo, "Consolas", monospace !important;
}


/*  Html inspect area
------------------------------------------------*/
#elements-content * {

}

/* animation settings */
#elements-content .parent,
#elements-content .parent * {
            box-sizing: border-box;
            transition: background 150ms cubic-bezier(0.470, 0.000, 0.745, 0.715); /* easeInSine */
            transition-timing-function: cubic-bezier(0.470, 0.000, 0.745, 0.715); /* easeInSine */
}

/* style of line */
#elements-content.source-code {
    background: #fcfcfc !important;
}

#elements-content .parent {
    border: 1px solid transparent;
}

#elements-content .parent::before {
    content: url(chrome-devtools://devtools/Images/treeRightTriangleBlack.png) !important;
    position: relative;
    z-index: 999;
}

/* expand style */
#elements-content .parent.expanded {
    background: #f1f1f1;
}

#elements-content .parent.expanded::before {
    content: url(chrome-devtools://devtools/Images/treeDownTriangleBlack.png) !important;
    
}

/* select style */
#elements-content .parent.selected {
    background: #D0F3F3;
    border-left: 1px solid #000;
    border-radius: 3px;
}

#elements-content .highlight {
  color: #d4d4d4;
}

/* current select line style */
#-blink-dev-tools .elements .selected {
    background: #FAD165 !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
    color: #000 !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    margin-bottom: 0 !important;
}

/* wrap expanded style */
#elements-content .parent.selected + *.expanded
{
    background: #f1f1f1 !important;
    border-left: 1px dashed #aaa;
    border-bottom: 1px dashed #aaa;
    border-right: 1px dashed #aaa;
    border-radius: 0 0 3px 3px;
    margin-bottom: 10px !important;
}

/*  ------------------------------------------------
 *  End of Html inspect area /


/*  CSS Inspect
------------------------------------------------*/
.webkit-css-selector {
    color: #BD3E4D !important;
}

.webkit-css-comment {
    color: #4DA95F !important;
    font-style: italic !important;
    line-height: 1.6em !important;
}

.webkit-css-url, .webkit-css-color, .webkit-css-string, .webkit-css-keyword,
.webkit-css-selector {
    color: #389 !important;
}

.webkit-css-number {
    color: #3F8EBB !important;
}

.webkit-css-important {
    color: #0000FF !important;
}

.webkit-css-property,
.webkit-css-at-rule {
    color: #C84252 !important;
}

#-blink-dev-tools .selector-matches {
    color: #333 !important;
    font-weight: bold;
    background: #FAD165 !important;
}

/*  Inspect HTML style
------------------------------------------------*/
.webkit-html-comment {
    color: #4DA95F !important;
    font-style: italic !important;
}

.webkit-html-tag,
.webkit-html-doctype {
    color: #6B4E32 !important;
}

.webkit-html-text-node,
.webkit-html-css-node,
.webkit-html-js-node {
    color: #333 !important;
}
.webkit-html-attribute-name {
    color: #BD3E4D !important;
}

.webkit-html-attribute-value {
    color: #0049B8 !important;
}

/*  JavaScript Style
------------------------------------------------*/
[class^="webkit-javascript"] {

}

.webkit-javascript-string {
    color: #3F8EBB !important;
}

.webkit-javascript-comment {
    color: #4DA95F !important;
    font-style: italic !important;
    line-height: 1.6em !important;
}

.webkit-javascript-number {
    color: #429694 !important;
}

.webkit-javascript-ident {
    color: #333 !important;
}

.webkit-javascript-keyword {
    color: #C84252 !important;
}

/*  Console Style
------------------------------------------------*/
#-blink-dev-tools .console-user-command > .console-message-text {
    color: #333 !important;
}

#-blink-dev-tools #console-messages a {
    color: #389 !important;
}

#-blink-dev-tools #console-messages a:hover {
    color: blue !important;
}

#-blink-dev-tools .console-formatted-boolean {
    color: #CC6600 !important;
}

#-blink-dev-tools .console-error-level .console-message-text,
#-blink-dev-tools .console-error-level .section .header .title {

}

#-blink-dev-tools .console-error-level .children .source-code {

}

#-blink-dev-tools .console-error-level .properties-tree {
    font-weight: normal !important;
}

#-blink-dev-tools .console-message,
#-blink-dev-tools .console-user-command {
    border: 0px !important;
    border-bottom:1px dashed #ddd !important;
    padding: 3px 0 !important;
    line-height: 1.2em !important;
}

#-blink-dev-tools .console-message {
}

#-blink-dev-tools .console .console-formatted-object {
}

#-blink-dev-tools .console .console-formatted-string {
    color: #007cbb !important;
}

#-blink-dev-tools .console .name {
    color: #BD3E4D !important;
}


/*  Source Code - Pane
------------------------------------------------*/

/* Generic */

#-blink-dev-tools #main-panels .pane > .title,
#-blink-dev-tools #main-panels .sidebar-separator,
#-blink-dev-tools #main-panels .sidebar-pane-subtitle {

}

#-blink-dev-tools .split-view-sidebar-right .webkit-css-property {
}


/* =================================
   SCROLLBARS */
/* ================================= */
    

#-blink-dev-tools ::-webkit-scrollbar {
    height: 4px !important;
    width: 4px !important;
}

#-blink-dev-tools ::-webkit-scrollbar-track {
    background-color: #E9E9E9 !important;
}

#-blink-dev-tools ::-webkit-scrollbar-thumb {
    background-color: #8A8A8A !important;
    border-radius: 2px;
}