dark skin for lt

dark.css

/**********************************************************
* Vars
***********************************************************/

:root {
  var-bg: #202020;
  var-fg: #ccc;
  var-border: #444;
  var-shadow: black;

  var-placeholder-fg: #aaa;
  var-dim-fg: #bbb;
  var-bright-fg: #ddd;
  var-blinding-fg: #fff;
  var-hidden-fg: #999;

  var-hidden-bg: #404040;

  var-highlight-bg: #222;
  var-highlight-fg: #eee;

  var-dark-highlight-bg: #666;
  var-medium-highlight-bg: #999;

  var-button-bg: #707070;
  var-button-fg: #d0d0d0;
  var-button-active-bg: #ccc;
  var-button-active-fg: #555;

  var-pane-bg: #555;
  var-pane-scrollbar: #7c7c7c;
  var-dark-pane-bg: #444;
  var-dark-pane-border: #606060;
  var-pane-border: #888;

  var-error-bg: #8A1C3B;
  var-error-fg: #FFADAD;
  var-error-highlight-fg: #FFCDCD;
  var-error-border: #aF5D5D;

  var-usage-bg: #5C0087;
  var-usage-fg: #E8B5FF;

  var-result-bg: #0B525E;
  var-result-fg: #96FAFF;

  var-overlay-dimmer: rgba(0,0,0,0.5);

  var-accent-foreground: #96FAFF;
  var-accent-background: #13879C;
  var-light-accent-background: #18B1CC;
  var-light-accent-foreground: #CCFCFF;
  var-dark-accent-background: #0B525E;

  var-secondary-accent-fg: #03FFc0;
  var-secondary-accent-dim-fg: #5EBDA5;
  var-secondary-accent-desat-fg: #9BC2B8;
}

/**********************************************************
* Default editor theme
***********************************************************/

.cm-s-default { background: var(bg); color:var(fg); }

.cm-s-default span.cm-bracket {color: #aaa;}
.cm-s-default span.cm-bracket1 {color: #aaa; }
.cm-s-default span.cm-bracket2 {color: #0f0;}
.cm-s-default span.cm-bracket3 {color: #00ff7f;}
.cm-s-default span.cm-bracket4 {color: #00ffff;}
.cm-s-default span.cm-bracket5 {color: #836FFF;}
.cm-s-default span.cm-bracket6 {color: #FF00FF;}
.cm-s-default span.cm-bracket7 {color: #9B30FF;}
.cm-s-default span.cm-bracket8 {color: #00ff7f;}
.cm-s-default span.cm-bracket9 {color: #00ffff;}
.cm-s-default span.cm-bracket10 {color: #836FFF;}
.cm-s-default span.cm-bracket11 {color: #FF00FF;}
.cm-s-default span.cm-bracket12 {color: #9B30FF;}
.cm-s-default span.cm-bracket0, .cm-s-default span.cm-bracket-mismatched { color:#f88; background:#733; }

.cm-s-default span.cm-symbol {color: #ccc;}
.cm-s-default span.cm-variable {color: #ccc;}
.cm-s-default span.cm-variable-2 {color: #acf}
.cm-s-default span.cm-string {color: #add}
.cm-s-default span.cm-string-2 {color: #add;}
.cm-s-default span.cm-number {color: #ccc;}
.cm-s-default span.cm-def {color:#acf;}
.cm-s-default span.cm-builtin {color: #aec;}
.cm-s-default span.cm-property {color: #aaa; }
.cm-s-default span.cm-operator {color: #aaa; }
.cm-s-default span.cm-keyword {color: #aec; }
.cm-s-default span.cm-qualifier {color: #aec; }
.cm-s-default span.cm-attribute {color: #aec; }
.cm-s-default span.cm-meta {color: #aec; }
.cm-s-default span.cm-atom { color: #caf; }
.cm-s-default span.cm-tag {color: #acf;}
.cm-s-default span.cm-comment { color:#9ac; }
.cm-s-default span.CodeMirror-searching { background: #aaa; color:black; }
.cm-s-default span.CodeMirror-searching-active { background: #afa; color:black; }

.cm-s-default .CodeMirror-selected { background: #555; }
.cm-s-default .CodeMirror-focused .CodeMirror-selected { background: #444; }

.cm-s-default .CodeMirror-activeline { background:#303030; }
.cm-s-default span.CodeMirror-matchingbracket {box-sizing:border-box; background:transparent; border-bottom:1px solid #3FF; font-weight:normal;}
.cm-s-default span.CodeMirror-nonmatchingbracket {color: #F33; border-bottom:1px solid #F33; background:none;}

.cm-s-default .cm-searching { background:#5f5f5f; border-radius:2px; color:#eee !important; }
.cm-s-default .searching-current { background:#13879C; color:#BFFCFF !important; }

.CodeMirror div.CodeMirror-cursor { border-left: 1px solid white; }
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor { border-left: 1px solid silver; }
.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor { width: auto; border: none !important; background: rgba(0, 200, 200, .4); }

.CodeMirror-gutters { background: var(bg); }

.CodeMirror-hints { position: absolute; z-index: 1000000000000000; overflow: hidden; list-style: none;  margin: 0; padding: 2px;  border-radius: 2px; border: 1px solid var(pane-bg);  background: var(pane-bg); font-size: 90%; font-family: inherit;  max-height: 20em; overflow-y: auto; }
.CodeMirror-hints ul li { margin: 0; padding: 0 4px; border-radius: 2px; max-width: 19em; overflow: hidden; white-space: pre; color: #ccc; cursor: pointer; }
.CodeMirror-hints input { display:none; }
.CodeMirror-hints .selected { background: var(highlight-bg); color: var(highlight-fg); }
.CodeMirror-hints::-webkit-scrollbar-thumb { background: var(pane-scrollbar); border-color: var(pane-scrollbar); }

/**********************************************************
* Shared
***********************************************************/

html { background: var(bg); }
body { background: var(bg); color: var(fg); }
a {text-decoration:none; color: var(fg); }
button { background:var(button-bg); color:var(button-fg); }
button:hover, button:focus { background:var(button-active-bg); color: var(button-active-fg); }
input { color: var(highlight-fg); background:var(highlight-bg); }

::-webkit-input-placeholder { color: var(placeholder-fg); }
::-webkit-scrollbar {background: transparent;}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(dark-highlight-bg); border:1px solid var(dark-highlight-bg); }
::-webkit-scrollbar-thumb:hover { background: var(medium-highlight-bg); border:1px solid var(medium-highlight-bg); }
::-webkit-scrollbar-corner { background:transparent; }
::selection { background: var(placeholder-fg); }

.inline-result { background:none; }
.inline-result .truncated { background: var(dark-accent-background); color:var(accent-foreground); }
.inline-result .inline { background: var(dark-accent-background); color:var(accent-foreground); }
.inline-result.open .full { background: var(dark-accent-background); color:var(accent-foreground); }

.inline-exception pre { background: var(error-bg); color: var(error-fg); }

.underline-result pre { background: transparent; color: var(accent-foreground)}

.inspector-object h2:before { color:var(hidden-fg); }
.inspector-object em { color:var(accent-foreground); }
.inspector-object { color: var(fg); }

.inline-result .inspector-object { color: var(light-accent-foreground); }
.inline-result .inspector-object h2:before { color: var(light-accent-foreground); }

#multi-container { background: var(bg); }
#multi { background:var(bg); }
#multi .list { background:transparent; }
#multi .list li { color:var(fg); box-sizing:border-box; height:29px;}
#multi .list .active, #multi .list li:hover { background:var(dark-highlight-bg); color:var(highlight-fg); }
#multi .list .dirty { color:var(accent-foreground); }
#multi .list .dirty:after { content: "*"; }
#multi .list.dragging li { background:transparent !important; }
#multi .dirty.ui-sortable-placeholder:after { content:"" !important; }
#multi .tabset + .tabset { border-left:2px solid var(border); }

#bottombar .content { background:var(bg); border-top:2px solid var(border); }
.console > li, .console td { color:var(light-accent-foreground); }
.console > li + li { border-top:1px solid var(border); }
.console > li.error + li { border-color:var(error-border);}
.console li.error { color:var(error-fg); background:var(error-bg); border-color:var(error-border);}
.console li.error table td { color:var(error-fg); }
.console li.error tr:hover td { color:var(error-highlight-fg); }
.console li .file { color: var(dim-fg); }
.console li .line { color: var(hidden-fg); padding-left:5px; }

#instarepl .error { color:var(error-fg); background:var(error-bg); }
#instarepl .livetoggler { background:var(accent-background); color:var(accent-foreground); }
#instarepl .livetoggler.off {color:var(button-fg); background:var(button-bg);}
#instarepl .livetoggler.off:hover {color:var(button-active-fg); background:var(button-active-bg);}
#instarepl .use-result { background:var(usage-bg); color:var(usage-fg); }
#instarepl .result-result { background:var(result-bg); color:var(result-fg); }
#instarepl .exception-result { background:var(error-bg); color:var(error-fg); }

.popup { background:var(overlay-dimmer); }
.popup > div > div { background:var(accent-background); color:var(accent-foreground); }
.popup .button { background: transparent; border:2px solid var(accent-foreground); }
.popup .button:hover, .popup .button.active { background:var(accent-foreground); color:var(accent-background); }
.popup ::-webkit-scrollbar-thumb { background: var(accent-foreground); border:1px solid var(accent-foreground); }

#version-info .info dt { color:var(hidden-fg); }
#version-info .button { background:var(button-bg); color:var(button-fg); border:none; }
#version-info .button:hover { background: var(button-active-bg); color:var(button-active-fg); }

.filter-list { color: var(fg); }
.filter-list em { color:var(accent-foreground); }
.filter-list .selected, .filter-list li:hover { color:var(highlight-fg); background: var(highlight-bg);}
.filter-list .selected em, .filter-list li:hover em { color:var(accent-foreground); }

#side .content { background:var(pane-bg); box-shadow: 0 0 10px var(shadow); }
#side ::-webkit-scrollbar-thumb { background: var(pane-scrollbar); border:1px solid var(pane-scrollbar); }

#side .workspace ul.buttons li:hover:not(.sep) { color:var(highlight-fg); background:var(highlight-bg); }
#side .workspace li:hover > div > p { color: var(accent-foreground); }
#side .workspace li p:hover { background: var(highlight-bg); color:var(highlight-fg); }
#side .workspace .recent > div > ul > li + li { border-top:1px solid var(pane-border); }
#side .workspace .recent > div > ul > li:hover { border-color: var(pane-border); background:var(highlight-bg); color: var(highlight-fg); }
#side .workspace .recent > div > ul > li:hover + li { border-top-color: var(pane-border); }
#side .workspace .recent h2:hover { background: var(highlight-bg); color:var(highlight-fg); }

#right-bar .content { background:var(dark-pane-bg); }
#right-bar .command h2:hover { background:var(highlight-bg); color:var(highlight-fg); }
#right-bar .command input { background:var(highlight-bg); color:var(highlight-fg); }
#right-bar .command li + li { border-top:1px solid var(dark-pane-border); }

#right-bar .filter-list .selected, .filter-list li:hover { color:var(highlight-fg); background: var(highlight-bg); }
#right-bar .navigate p { color:var(placeholder-fg);  }
#right-bar .filter-list input { border:1px solid var(pane-border); background:transparent; }
#right-bar .command p.binding { color:var(placeholder-fg); }

#right-bar .navigate li + li { border-top:1px solid var(dark-pane-border); }

#right-bar .clients h2 { color:var(bright-fg); }
#right-bar .clients td { color:var(dim-fg); }
#right-bar .clients .button { background:var(button-bg); color:var(button-fg); }
#right-bar .clients .button:hover { background:var(button-active-bg); color:var(button-active-fg); }
#right-bar .clients .list > ul > li + li { background:transparent; border-top:1px solid var(pane-border); }
#right-bar .clients .list .active {background:var(highlight-bg); color: inherit; border-color: var(pane-border); }
#right-bar .clients .list .active * {color: inherit; }
#right-bar .clients .list .active h2 {color:  var(highlight-fg); }
#right-bar .clients .connector li { border-top:1px solid var(pane-border); border-bottom:1px solid var(pane-border); }
#right-bar .clients .connector li:first-child {border:none;}
#right-bar .clients .connector li:last-child {border-bottom:none;}
#right-bar .clients .connector li + li {border-bottom:none;}
#right-bar .clients .connector li h2 {color: var(highlight-fg); }
#right-bar .clients .connector li:hover h2 {color: var(highlight-fg); }
#right-bar .clients .connector li:hover {background: var(highlight-bg); color: var(fg); border-color: var(pane-border); }
#right-bar .clients .toggle:hover { background: var(highlight-bg); border-radius:2px; color:var(highlight-fg); }

#statusbar { color: var(hidden-fg); }
#statusbar .console-toggle { cursor:default; background:var(hidden-bg); color:var(fg); min-width:12px; padding:0 4px; width:auto; display:none; text-align:center; margin-left:0px; border-radius:2px; }
#statusbar .console-toggle:hover { background:var(dark-highlight-bg); color:var(highlight-fg); }
#statusbar .console-toggle.dirty { background:var(accent-background); color:var(accent-foreground); display: inline-block; }
#statusbar .console-toggle.error { color:var(error-fg); background:var(error-bg); }
#statusbar .log .error { color:var(error-fg); background:var(error-bg); }
#statusbar .log .tip { color: var(accent-foreground); }

#find-bar input { border-top:2px solid var(border); }
#find-bar ::-webkit-input-placeholder { color:var(hidden-fg); }

#browser input { background:var(hidden-bg); color:var(fg); }
#browser button {  }
#browser iframe { background:white; }
#browser ::-webkit-scrollbar { background: var(bg) !important; }
#browser ::-webkit-scrollbar-track { background: var(bg) !important; }
#browser ::-webkit-scrollbar-corner { background: var(bg) !important; }
#browser ::-webkit-scrollbar-thumb { background: var(dark-highlight-bg); border:1px solid var(dark-highlight-bg);  }

.docs ::-webkit-scrollbar { background: var(bg) !important; }
.docs ::-webkit-scrollbar-track { background: var(bg) !important; }
.docs ::-webkit-scrollbar-corner { background: var(bg) !important; }
.docs ::-webkit-scrollbar-thumb { background: var(dark-highlight-bg); border:1px solid var(dark-highlight-bg);  }

.search-results .path, .search-results .line { color:var(hidden-fg); }
.search-results .line { color:var(secondary-accent-desat-fg); }
.search-results .entry { color: var(placeholder-fg); }
.search-results .entry em { color:var(blinding-fg); }
.search-results .entry:hover { background:var(hidden-bg); }
.search-results .entry:hover .line { background:var(medium-highlight-bg); color:var(bg); }
.search-results .path { color:var(secondary-accent-dim-fg); }
.search-results .file { color:var(secondary-accent-fg); }
.search-results input { background:var(dark-highlight-bg); }

.watch-result { display:inline-block; padding-left:2px; vertical-align:top; background:var(usage-bg); color:var(usage-fg); border-radius:2px; }
.CodeMirror .watched { border-bottom:1px solid var(usage-fg); }

.hintwrapper { padding:2px 0; padding-bottom:5px; padding-left:12px; box-sizing:border-box; }
.jshinterrors  { display:inline-block; box-sizing:border-box; padding:2px 10px; border-radius:2px; background:var(error-bg); color:var(error-fg); }
.hintwrapper .spacer { display:inline-block; white-space:pre; }

/**********************************************************
* Theme specific
***********************************************************/

.cm-visible-space { background:url("../../img/visible-space11.png"); background-size:100%; background-position:center;  background-repeat: no-repeat;}
.cm-visible-tab { background:url("../../img/visible-tab7.png"); background-size:100% 1em; background-position:center;  background-repeat: no-repeat;}

#right-bar .clients .load-wrapper .img { width:20px; height:20px; background:url("../../img/connectingloader.gif") }

.load-wrapper .img { background:url("../../img/loaderdark.gif"); }