styles/styles.css from Hirse/brackets-outline-list

styles/styles.css
Summary

Maintainability

Test Coverage

Issues
@font-face {
    font-family: Ionicons;
    font-style: normal;
    font-weight: normal;
    src: url("fonts/ionicons.eot?v=2.0.0");
    src: url("fonts/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"),
         url("fonts/ionicons.ttf?v=2.0.0") format("truetype"),
         url("fonts/ionicons.woff?v=2.0.0") format("woff"),
         url("fonts/ionicons.svg?v=2.0.0#Ionicons") format("svg");
}


/* ==== Toolbar Icon ==== */

#outline-toolbar-icon {
    background-image: url(icons/icon.svg);
}

#outline-toolbar-icon.enabled {
    background-position: 0 -24px;
}


/* ==== Outline List ==== */

#outline {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: #adb9bd;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.outline-sidebar {
    margin-bottom: 40px;
    max-height: 75%;
}

.outline-main {
    background-color: #47484b;
    bottom: 0;
    max-width: 45%;
    padding-bottom: 40px;
    position: absolute;
    top: 0;
}

#outline-header {
    font-size: 13px;
    padding: 8px 0 9px 12px;
    position: relative;
}

.outline-button {
    background-color: transparent;
    background-origin: content-box;
    background-repeat: no-repeat;
    box-sizing: content-box;
    font-size: 12px;
    height: 13px;
    padding: 4px 6px;
    position: absolute;
    top: 7px;
    width: 13px;
}

.outline-button:focus {
    box-shadow: 0 0 0 1px #94ceff;
    outline: none;
}

.outline-button:active {
    box-shadow: none;
}

#outline-settings {
    background-image: url("icons/settings.svg");
    right: 56px;
}

#outline-move {
    background-image: url("icons/move.svg");
    right: 30px;
}

#outline-close {
    background-image: url("icons/close.svg");
    right: 4px;
}

#outline-list {
    height: 100%;
    overflow: auto;
    white-space: nowrap;
}

#outline-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.outline-message {
    padding-left: 14px;
}


/* === Outline Autohide === */

#outline-autohide-placeholder {
    background-color: #47484b;
    bottom: 0;
    position: absolute;
    top: 0;
    width: 20px;
}

#outline-autohide-placeholder:hover {
    background-color: #858383;
}

.outline-autohide-content {
    -webkit-transition: right 0.2s ease-out;
    transition: right 0.2s ease-out;
}


/* ==== Outline Autohide Delay Dialog ==== */

#outline-delay-slider {
    -moz-appearance: none;
    -webkit-appearance: none;
    margin: 18px 0;
    width: 100%;
}

#outline-delay-slider:focus {
    outline: none;
}

#outline-delay-slider::-webkit-slider-runnable-track {
    background: #47484b;
    border-radius: 1.3px;
    box-shadow: 1px 1px 1px #000000, 0 0 1px #0d0d0d;
    height: 4px;
    width: 100%;
}

#outline-delay-slider::-webkit-slider-thumb {
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #288edf;
    border: 1px solid #1474bf;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    cursor: -webkit-grab;
    cursor: grab;
    height: 22px;
    margin-top: -8px;
    width: 10px;
}

.dark #outline-delay-slider::-webkit-slider-thumb {
    background-color: #016dc4;
    border: 1px solid #202020;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

#outline-delay-slider:active::-webkit-slider-thumb {
    background-color: #0380e8;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.06);
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.dark #outline-delay-slider:active::-webkit-slider-thumb {
    background-color: #00569b;
}

#outline-delay-slider:focus::-webkit-slider-thumb {
    border: 1px solid #1474bf;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12),0 0 0 1px #94ceff;
}

.dark #outline-delay-slider:focus::-webkit-slider-thumb {
    border: 1px solid #202020;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06),0 0 0 1px transparent;
}

#outline-delay-inputbox {
    width: 60px;
}


/* ==== Outline Entries ==== */

.outline-entry {
    color: #ffffff;
    padding-left: 27px;
}

.outline-entry-icon {
    padding-left: 12px;
}

.outline-entry-icon:before {
    display: inline-block;
    font-family: Ionicons;
    font-style: normal;
    margin-right: 3px;
    text-align: center;
    width: 12px;
}

.outline-entry-indent {
    color: #adb9bd;
    font-family: monospace;
}

.outline-entry-arg {
    color: #adb9bd;
}

.outline-hide-args .outline-entry-arg {
    display: none;
}

.outline-hide-indent .outline-entry-indent {
    display: none;
}

.outline-hide-unnamed .outline-entry-unnamed {
    display: none;
}


/* ==== Language Specific Entries ==== */


/* JavaScript */
.outline-entry-js.outline-entry-class:before {
    color: #f4e422;
    content: "\f3a0";
}

.outline-entry-js.outline-entry-private:before {
    color: #229bf4;
    content: "\f200";
}

.outline-entry-js.outline-entry-public:before {
    color: #9bf422;
    content: "\f276";
}

.outline-entry-js.outline-entry-unnamed:before {
    color: #f47b22;
    content: "\3bb";
    font-family: sans-serif;
}

.outline-entry-js.outline-entry-generator:before {
    color: #f4229b;
    content: "\f43d";
    font-family: Ionicons;
}


/* Haxe */
.outline-entry-hx.outline-entry-class:before {
    color: #f4229b;
    content: "\f318";
}

.outline-entry-hx.outline-entry-unnamed:before {
    color: #f47b22;
    content: "\3bb";
    font-family: sans-serif;
}

.outline-entry-hx.outline-entry-private:not(.outline-entry-class):before {
    color: #229bf4;
    content: "\f200";
}

.outline-entry-hx.outline-entry-region:before {
    color: #adb9bd;
    content: " //";
}

.outline-entry-hx.outline-entry-region {
    color: #adb9bd;
}

.outline-entry-hx.outline-entry-public:before {
    color: #9bf422;
    content: "\f276";
}

.outline-entry-hx.outline-entry-static {
    font-style: italic;
}


/* CoffeeScript */
.outline-entry-coffee.outline-entry-private:before {
    color: #229bf4;
    content: "\f200";
}

.outline-entry-coffee.outline-entry-public:before {
    color: #9bf422;
    content: "\f276";
}

.outline-entry-coffee.outline-entry-unnamed:before {
    color: #f47b22;
    content: "\3bb";
    font-family: sans-serif;
}


/* CSS */
.outline-entry-css-tag:before {
    color: #f47b22;
    content: "\f271";
}

.outline-entry-css-id:before {
    color: #9bf422;
    content: "\f219";
}

.outline-entry-css-class:before {
    color: #229bf4;
    content: "\f20b";
}

.outline-entry-css-at-rule:before {
    color: #f4229b;
    content: "\f10f";
}

.outline-entry-css-attribute:before {
    color: #f4e422;
    content: "\f2aa";
}

.outline-entry-css-parent:before {
    color: #8164cc;
    content: "&";
    font-family: sans-serif;
}


/* Stylus */
.outline-entry-stylus-tag:before {
    color: #f47b22;
    content: "\f271";
}

.outline-entry-stylus-id:before {
    color: #9bf422;
    content: "\f219";
}

.outline-entry-stylus-class:before {
    color: #229bf4;
    content: "\f20b";
}

.outline-entry-stylus-at-rules:before {
    color: #f4229b;
    content: "\f10f";
}

.outline-entry-stylus-attribute:before {
    color: #f4e422;
    content: "\f2aa";
}


/* PHP */
.outline-entry-php.outline-entry-class:before {
    color: #f4e422;
    content: "\f3a0";
}

.outline-entry-php.outline-entry-private:before {
    color: #229bf4;
    content: "\f200";
}

.outline-entry-php.outline-entry-protected:before {
    color: #4ab9ae;
    content: "\f219";
}

.outline-entry-php.outline-entry-public:before {
    color: #9bf422;
    content: "\f276";
}

.outline-entry-php.outline-entry-unnamed:before {
    color: #f47b22;
    content: "\3bb";
    font-family: sans-serif;
}

.outline-entry-php.outline-entry-static {
    font-style: italic;
}


/* Python */
.outline-entry-python.outline-entry-class:before {
    color: #f4e422;
    content: "\f3a0";
}

.outline-entry-python.outline-entry-private:before {
    color: #229bf4;
    content: "\f200";
}

.outline-entry-python.outline-entry-protected:before {
    color: #4ab9ae;
    content: "\f219";
}

.outline-entry-python.outline-entry-public:before {
    color: #9bf422;
    content: "\f276";
}


/* Markdown */
.outline-entry-md {
    padding-left: 12px;
}

.outline-entry-md:before {
    color: #b94700;
    display: inline;
    font-family: Ionicons;
    margin-right: 3px;
    text-shadow: none;
}

.outline-entry-md-1:before {
    content: "#";
}

.outline-entry-md-2:before {
    content: "##";
}

.outline-entry-md-3:before {
    content: "###";
}

.outline-entry-md-4:before {
    content: "####";
}

.outline-entry-md-5:before {
    content: "#####";
}

.outline-entry-md-6:before {
    content: "######";
}


/* Ruby */
.outline-entry-ruby.outline-entry-ruby-arg {
    color: #adb9bd;
}

.outline-entry-ruby.outline-entry-private:before {
    color: #f01749;
    content: "\f200";
}

.outline-entry-ruby.outline-entry-false-private:before {
    color: #f5a11a;
    content: "\f200";
}

.outline-entry-ruby.outline-entry-class-method:before {
    color: #229bf4;
    content: "\f276";
}

.outline-entry-ruby.outline-entry-class-method-false-private:before {
    color: #f5a11a;
    content: "\f276";
}

.outline-entry-ruby.outline-entry-private:before {
    color: #229bf4;
    content: "\f200";
}

.outline-entry-ruby.outline-entry-public:before {
    color: #9bf422;
    content: "\f276";
}


/* XML */
.outline-entry-xml-namespace,
.outline-entry-xml-attributes {
    color: #adb9bd;
}