rearview 1.0.0.rc1-jruby → 1.0.0.rc2-jruby

data/public/rearview-src/less/primarynav.less

@@ -0,0 +1,151 @@
+/* primary navigation bar */
+.nav-primary .navbar-inner {
+    border-bottom : 1px solid #000;
+    .background-gradient( @noise, #2a2a2a, #2a2a2a, #434343 );
+}
+
+.nav-primary.navbar {
+    margin : 0;
+    .nav > .active > a,
+    .nav > .active > a:hover,
+    .nav > .active > a:focus {
+        .background-gradient( @noise, @rearview-secondary-color, @rearview-secondary-color, @rearview-color );
+        .proxima-bold();
+    }
+
+    .dropdown-menu li > a:hover, 
+    .dropdown-menu li > a:focus, 
+    .dropdown-submenu:hover > a {
+        background : rgba(red(@rearview-secondary-color), green(@rearview-secondary-color), blue(@rearview-secondary-color), 0.75);
+    }
+
+    /* nav bar styles */
+    .nav {
+        li.dropdown.open > .dropdown-toggle,
+        li.dropdown.active > .dropdown-toggle,
+        li.dropdown.open.active > .dropdown-toggle {
+            color : #fff;
+            .background-gradient( @noise, @rearview-secondary-color, @rearview-secondary-color, @rearview-color );
+        }
+
+        li.dropdown > .dropdown-toggle .caret {
+            border-top-color    : #a29f99;
+            border-bottom-color : #a29f99;
+        }
+
+        li.dropdown.open > .dropdown-toggle .caret,
+        li.dropdown.active > .dropdown-toggle .caret,
+        li.dropdown.open.active > .dropdown-toggle .caret {
+            border-top-color    : #b9ced5;
+            border-bottom-color : #b9ced5;
+        }
+    }
+
+    .nav > li > .dropdown-menu:after {
+        top: -8px;
+    }
+
+    .nav > li > .dropdown-menu:before {
+        border : none;
+        content: none;
+        display: none;
+    }
+
+    .nav > li > a {
+        color          : #9d9a94;
+        text-shadow    : none;
+        text-transform : uppercase;
+
+        .proxima-regular();
+    }
+
+    .nav > li.active a {
+        color : #fff;
+    }
+
+    .brand {
+        margin-top     : -5px;
+        padding-bottom : 0;
+        color          : #fff;
+        text-shadow    : none;
+
+        .proxima-bold(20px);
+
+        img {
+            vertical-align : -8px;
+            margin-right   : 8px;
+        }
+    }
+
+    /* primary nav drop down styles */
+    .dropdown-menu {
+        padding            : 0;
+        border             : 2px solid #fff;
+        background         : rgba(0,0,0,0.75);
+
+        -webkit-box-shadow : 0px 0px 7px #333;       
+           -moz-box-shadow : 0px 0px 7px #333;
+                box-shadow : 0px 0px 7px #333;
+
+        a {
+            color          : #fff;
+            line-height    : 30px;
+            text-transform : uppercase;
+        }
+
+        li {
+            background    : none;
+            border-bottom : 1px solid black;
+            border-top    : 1px solid #555;
+        }
+
+        li:first-child {
+            border-top : none;
+        }
+
+        li:last-child {
+            border-bottom : none;
+        }
+
+        li:first-child,
+        li:first-child a {
+            border-top-left-radius  : 5px;
+            border-top-right-radius : 5px;
+        }
+
+        li:last-child,
+        li:last-child a {
+            border-bottom-left-radius  : 5px;
+            border-bottom-right-radius : 5px;
+        }
+    }
+
+    .dropdown-submenu {
+
+        & > .dropdown-menu {
+            border-radius : 6px;
+            margin-left   : 0;
+            margin-top    : -2px;
+
+            li a:hover {
+                border-radius : 0;
+            }
+
+            li:first-child,
+            li:first-child a {
+                border-top-left-radius  : 5px;
+                border-top-right-radius : 5px;
+            }
+
+            li:last-child,
+            li:last-child a {
+                border-bottom-left-radius  : 5px;
+                border-bottom-right-radius : 5px;
+            }
+        }
+
+        & > a:after {
+            margin-top: 10px;
+        }
+    }
+}

data/public/rearview-src/less/rearview.less

@@ -0,0 +1,1207 @@
+@import "elements.less";
+
+html {
+    height : 100%;
+}
+
+body {
+    .background-gradient( @noise-light, #333, #333, #333 );
+    height        : 100%;
+    padding-left  : 0;
+    padding-right : 0;
+}
+
+hr {
+    border-color : #b6b3a6;
+}
+
+input, button, select, textarea {
+    .proxima-regular;
+}
+
+/* structural & schema definitions */
+@top-adjustment           : 8em;     /* adjust for absolute header */
+@rearview-color           : #932b8d; /* #ea3e3c */
+@rearview-secondary-color : darken(@rearview-color, 10%);
+@noise                    : url('../img/noise.png') 0 0 repeat;
+@noise-light              : url('../img/noise-light.png') 0 0 repeat;
+/* font definitions */
+@proxima-bold-base-url    : '../fonts/ProximaNovaSoft-Bold/ProximaNovaSoft-Bold-webfont';
+@proxima-regular-base-url : '../fonts/ProximaNovaSoft-Regular/ProximaNovaSoft-Regular-webfont';
+
+@font-face {
+    font-family    : 'ProximaBold';
+    src            : url('@{proxima-bold-base-url}.eot?') format('eot'),
+                     url('@{proxima-bold-base-url}.woff') format('woff'),
+                     url('@{proxima-bold-base-url}.ttf') format('truetype');
+    font-weight    : normal;
+    text-rendering : optimizelegibility;
+}
+@font-face {
+    font-family    : 'ProximaRegular';
+    src            : url('@{proxima-regular-base-url}.eot?') format('eot'),
+                     url('@{proxima-regular-base-url}.woff') format('woff'),
+                     url('@{proxima-regular-base-url}.ttf') format('truetype');
+    font-weight    : normal;
+    text-rendering : optimizelegibility;
+}
+
+/* mixin helpers */
+.proxima-bold {
+    font-family : 'ProximaBold',
+                  'Trebuchet MS',
+                  Tahoma,
+                  sans-serif;
+
+    font-weight : normal;
+}
+.proxima-bold ( @size ) {
+    font-family : 'ProximaBold',
+                  'Trebuchet MS',
+                  Tahoma,
+                  sans-serif;
+
+    font-weight : normal;
+    font-size   : @size;
+}
+.proxima-regular {
+    font-family : 'ProximaRegular',
+                  'Trebuchet MS',
+                  Tahoma,
+                  sans-serif;
+
+    font-weight : normal;
+}
+.proxima-regular ( @size ) {
+    font-family : 'ProximaRegular',
+                  'Trebuchet MS',
+                  Tahoma,
+                  sans-serif;
+
+    font-weight : normal;
+    font-size   : @size;
+}
+
+
+.transform(@string){
+    -webkit-transform : @string;
+       -moz-transform : @string;
+        -ms-transform : @string;
+         -o-transform : @string;
+            transform : @string;
+}
+
+/* application wrapper */
+.ls-rearview {
+
+    /* primary navigation styles */
+    @import "primarynav.less";
+
+    /* footer nav bar */
+    .footer-action-bar .navbar-inner {
+        background : #f5f4ee;
+        border     : none;
+
+        a {
+            text-transform : uppercase;
+        }
+    }
+
+    @import "header.less";  
+
+    /* alert timeline styles */
+    .alert-timeline {
+        position   : relative;
+        box-shadow : 0 31px 46px -10px #000;
+
+        /* trapazoid technique accordian heading */
+        .polygon,
+        .trapezoid {
+            margin     : 0;
+            padding    : 0;
+            background : none;
+        }
+
+        .polygon {
+            border     : medium none;
+            display    : inline-block;
+            text-align : center;
+            width      : 10em;
+            color      : #F5F4EE;
+        }
+
+        .trapezoid {
+            margin       : 0 auto;
+            display      : inline-block;
+            height       : 0;
+            width        : 1px;
+            border-left  : 5em solid transparent;
+            border-right : 5em solid transparent;
+        }
+
+        .polygon.tab .size {
+            width        : 2.3em;
+            border-width : 1.3em 0.8em;
+        }
+
+        .polygon .size {
+            border-bottom : none;
+            border-top    : 10em solid;
+        }
+
+        /* alert timeline accordian styles */
+        .accordion-group {
+            margin-bottom : 0;
+            border-radius : 0;
+            background    : #000;
+        }
+
+        .accordion-group,
+        .accordion-inner {
+            border : none;
+        }
+
+        .accordion-inner {
+            padding : 2px 0 0 0;
+        }
+
+        .accordion-heading {
+            position : absolute;
+            display  : inline-block;
+            height   : 20px;
+            left     : -61px;
+
+            p {
+                position    : relative;
+                top         : -24px;
+                color       : #444240;
+                text-indent : 3px;
+
+                .proxima-regular();
+            }
+
+            .alert-status {
+                color : #735854;
+            }
+        }
+
+        .accordion-heading .accordion-toggle {
+            margin-top : 2px;
+            padding    : 0;
+            height     : 20px;
+            outline    : none;
+
+            display    : none; /* NOTE : hidden till fixed */
+        }
+
+        .accordion-heading .accordion-toggle:hover {
+            color : #F5F4EE;
+        }
+
+        /* timeline overriding styles */
+        div.timeline-event-content {
+            color : #735854;
+            /* just the monitor name, hiding it
+               by making it the same color as it's background */
+
+            .proxima-regular(82%);
+        }
+
+        div.timeline-event-content {
+            margin: 0 4px;
+        }
+
+        div.timeline-event-box,
+        div.timeline-event-range {
+            background : #735854; /*#373737;*/
+            border : 2px solid #735854 !important;
+            color : #F5F4ED;
+            border-radius : 2px;
+        }
+
+        div.timeline-frame {
+            border     : none;
+            background : #F5F4EE;
+        }
+
+        div.timeline-axis-grid-minor {
+            border-color: #ccc;
+        }
+
+        div.timeline-axis-grid-major {
+            border-color: #999;
+        }
+
+        div.timeline-event {
+            cursor       : pointer;
+            border-color : #999;
+        }
+
+        div.timeline-event-line {
+            border-color: #999;
+            border-left-style: solid;
+            border-left-width: 1px;
+        }
+
+        div.timeline-event-dot {
+            height : 6px !important;
+            width  : 6px !important;
+            background : #fff !important;
+            border-radius : 5px;
+            border-width  : 2px;
+        }
+
+        /* font styles */
+        div.timeline-axis-text {
+            color : #444240;
+
+            .proxima-regular();
+        }
+
+        /* navigation button styles */
+        div.timeline-navigation {
+            background-color : inherit;
+            border           : none;
+            border-radius    : inherit;
+            color            : inherit;
+            font-family      : inherit;
+            font-size        : inherit;
+            font-weight      : inherit;
+            opacity          : 0.6;
+
+            -webkit-transition : opacity 0.3s ease-in-out;
+               -moz-transition : opacity 0.3s ease-in-out;
+                    transition : opacity 0.3s ease-in-out;
+        }
+        div.timeline-navigation:hover {
+            opacity : 1;
+        }
+    }
+
+    /* popover style overides for alert timeline */
+    .popover {
+        width       : 400px !important;
+        margin-left : -200px !important;
+        background  : #000;
+        left        : 50% !important;
+        box-shadow  : 0px 0px 30px #222;
+        z-index     : 1030 !important;
+
+        .popover-title {
+            display : none;
+        }
+
+        .btn {
+            margin : 2px;
+        }
+
+        .alert-meta-data {
+            text-align      : left;
+            border-collapse : separate;
+            border-spacing  : 10px 2px !important; 
+
+            .proxima-regular(inherit);
+
+            th {
+                text-align : right;
+            }
+
+            th, td {
+                font-weight : normal;
+                color       : #fff;
+            }
+        }
+    }
+
+    .popover.bottom .arrow {
+        border-bottom-color: #000;
+    }
+
+    .popover-content {
+        margin  : 0;
+        padding : 2px;
+
+        .small-monitor {
+            margin-bottom : 0 !important;
+
+            .btn-group {
+                display : none !important;
+            }
+        }
+
+        /* overlay styles for popovers in alert timeline */
+        .alert-data-overlay {
+            border-radius : 5px;
+            color         : #999;
+            height        : 100%;
+            top           : 0;
+            left          : 0;
+            background    : rgba(0,0,0,0.3) !important;
+            position      : absolute;
+            text-align    : center;
+            width         : 100%;
+            
+            h1 {
+                margin-top  : 100px;
+                font-weight : normal;
+                .proxima-regular(36px);
+            }
+        }
+    }
+
+    /* add monitor wizard */
+    .modal {
+        width       : 880px;
+        margin-top  : -284px;
+        margin-left : -440px;
+        overflow    : visible;
+
+        .proxima-regular();
+
+        h1 {
+            margin      : -14px;
+            padding     : 12px;
+            color       : #444;
+            background  : #c9c7c3;
+
+            .border-radius(5px, 5px, 0, 0);
+            .proxima-regular(36px);
+        }
+
+        h2 {
+            margin      : 0;
+            color       : #666;
+
+            .proxima-regular(18px);
+        }
+
+        .hero-unit {
+            margin-bottom : 10px;
+            padding       : 16px;
+            background    : #faf9f6;
+            border        : 1px solid #dedddc;
+            border-radius : 2px;
+
+            fieldset.bottom {
+                margin-bottom : 0;
+            }
+        }
+
+        .hero-unit.expressions-metrics,
+        .hero-unit.test-graph {
+            margin-right : 16px;
+            width        : 287px;
+            min-height   : 275px;
+            float        : left;
+
+            .output {
+                display: block;
+                float: none;
+
+                textarea {
+                    width : 100%;
+                }
+            }
+        }
+
+        .test-graph .graph {
+            min-height : auto; 
+        }
+
+        .hero-unit.expressions-metrics {
+            width : 480px;
+        }
+
+        .hero-unit.test-graph {
+            margin-right : 0;
+        }
+
+        .modal-header {
+            padding : 14px;
+
+            .close,
+            .back {
+                margin      : 0;
+                padding     : 0;
+                position    : absolute;
+                top         : -22px;
+                left        : -19px;
+                opacity     : 0.9;
+                z-index     : 10000;
+                border      : none;
+                background  : none;
+                color       : #fff;
+                font-size   : 42px;
+                text-shadow : 0 0 3px #000;
+                outline     : none;
+            }
+
+            .back {
+                display : none;
+            }
+
+            .close:hover,
+            .back:hover {
+                opacity : 1;
+            }
+        }
+
+        .modal-body {
+            position : static;
+            padding-top : 9px;
+            max-height  : 480px;
+        }
+
+        .modal-footer {
+            background : #e4e3e1;
+        }
+
+        /* modal form styles */
+        form {
+            margin : 0;
+        }
+
+        /* name & shcedule styles */
+        fieldset.set-schedule {
+            margin-right  : 16px;
+            margin-bottom : 10px;
+            float         : none;
+            display       : block;
+        }
+
+        fieldset.day-month-picker {
+            margin-right  : 0;
+            margin-bottom : 10px;
+            float         : left;
+            display       : block;
+        }
+
+        fieldset.pager-duty,
+        fieldset.test-in-graph {
+            margin-right : 0;
+        }
+
+        fieldset.description {
+            clear : left;
+        }
+
+        fieldset.pager-duty textarea,
+        fieldset.description textarea,
+        fieldset.monitor-name input {
+            width : 378px;
+        }
+
+        
+
+        fieldset.expressions textarea,
+        fieldset.metrics textarea {
+            width : 458px;
+        }
+    }
+
+    .modal.modal-large {
+        .hero-unit.expressions-metrics {
+            float : left;
+        }
+
+        .hero-unit.test-graph {
+            margin-left : 530px;
+            float : none;
+            width : auto !important;
+        }
+    }
+
+    .graph {
+        margin-bottom : 12px;
+        border-radius : 2px;
+        background    : #333;
+        min-height    : 150px;
+        overflow      : hidden;
+
+        .highcharts-container {
+            top : 0 !important;
+
+            .highcharts-loading {
+                margin     : 0 !important;
+                padding    : 0;
+                position   : absolute;
+                top        : 0 !important;
+                left       : 0 !important;
+                opacity    : 0.8 !important;
+                height     : 100% !important;
+                width      : 100% !important;
+                background : #000 !important;
+
+                span {
+                    top   : 35% !important;
+                    color : #999;
+                    .proxima-regular(36px);
+                }
+            }
+        }
+    }
+
+    /* bootstrap form style overrides */
+    input[type=text],
+    textarea,
+    select {
+        background : #333;
+        border     : 1px solid #b6b3a6;
+        color      : #adabac;
+    }
+
+    input.input-minutes-back {
+        width : 73px;
+    }
+
+    input.date-picker {
+        width : 114px;
+    }
+
+    .previous-errors select {
+        width : 155px;
+    }
+
+    fieldset {
+        margin-right : 16px;
+        float        : left;
+        display      : inline-block;
+    }
+
+    .form-horizontal .controls {
+        margin-left : 76px;
+    }
+
+    .form-horizontal .control-label {
+        float       : left;
+        padding-top : 5px;
+        text-align  : right;
+        width       : 0;
+    }
+
+    /* dashboard styles */
+    @import 'dashboard.less';    
+
+    /* small monitor widget styles */
+    .small-monitor {
+        margin        : 0;
+        border-radius : 4px;
+        box-shadow    : 0 0 35px #111;
+
+        -webkit-transition       : -webkit-transform 1s;
+           -moz-transition       :    -moz-transform 1s;
+             -o-transition       :      -o-transform 1s;
+                transition       :         transform 1s;
+        -webkit-transform-style  : preserve-3d;
+           -moz-transform-style  : preserve-3d;
+             -o-transform-style  : preserve-3d;
+                transform-style  : preserve-3d;
+        -webkit-transform-origin : right center;
+           -moz-transform-origin : right center;
+             -o-transform-origin : right center;
+                transform-origin : right center;
+
+        h1 {
+            margin      : 0 0 0 3px;
+            color       : #fff;
+            line-height : 22px;
+            float       : left;
+            display     : inline-block;
+            cursor      : pointer;
+            width       : 60%;
+            overflow    : hidden;
+
+            .proxima-regular(16px);
+        }
+
+        .btn-group {
+            margin  : 3px auto 0 auto;
+            width   : 180px;
+            display : block;
+        }
+
+        .graph {
+            margin        : 4px -3px -3px -3px;
+            position      : relative;
+            overflow      : hidden;
+            min-height    : 225px;
+            border-radius : 0 0 4px 4px;
+            background    : #000;
+        }
+
+        .btn-group.activate {
+            margin   : 0 auto;
+            display  : inline-block;
+            float    : right;
+            width    : 52px;
+            position : absolute;
+            right    : 3px;
+            top      : 3px;
+        }
+
+        .header-controls {
+            margin   : 0 0 3px 0;
+            overflow : hidden;
+
+            .settings,
+            .drag {
+                margin   : 0px 5px 0px 0px;
+                display  : inline-block;
+                float    : right;
+                width    : auto;
+                position : absolute;
+                right    : 55px;
+                top      : 3px;
+            }
+
+            .header-name {
+                span {
+                    display : block;
+                    width   : 9999999px;
+
+                    p {
+                        margin  : 0;
+                        display : inline;
+                    }
+                }
+            }
+
+            .truncated-text {
+                margin-left : 3px;
+                display     : none;
+                color       : #fff;
+                line-height : 22px;
+                .proxima-regular(16px);
+            }
+
+            .header-name.truncated + .truncated-text {
+                display : inline-block;
+            }
+
+            /* drag handle for small monitor */
+            .drag {
+                right : 83px;
+                top   : 5px;
+                .drag-handle {
+                    background-color : #222222;
+                    border           : medium none;
+                    border-radius    : 4px 4px 4px 4px;
+                    color            : #B6B3A6;
+                    font-size        : 11px;
+                    padding          : 6px 5px 5px 6px;
+                    cursor           : move; 
+                }
+            }
+        }
+
+
+        /* overlay method styles */
+        .overlay {
+            margin     : 0;
+            padding    : 0;
+            position   : absolute;
+            top        : 0;
+            left       : 0;
+            height     : 100%;
+            width      : 100%;
+            background : #000;
+            opacity    : 0.7;
+
+            h1 {
+                margin-top  : 75px;
+                color       : #999;
+                width       : 100%;
+                height      : 100%;
+                text-align  : center;
+                font-weight : normal;
+                line-height : 36px;
+
+                .proxima-regular(36px);
+            }
+        }
+    }
+
+    .small-monitor figure {
+            margin        : 0;
+            display       : block;
+            border-radius : 4px;
+    }
+
+    .small-monitor .back,
+    .small-monitor .front {
+        -webkit-backface-visibility : hidden;
+           -moz-backface-visibility : hidden;
+             -o-backface-visibility : hidden;
+                backface-visibility : hidden;
+    }
+
+    .small-monitor .back {
+        position   : absolute;
+        left       : 0;
+        top        : 0;
+        width      : 100%;
+        background : #f5f4ee;
+
+        -webkit-transform : rotateY( 180deg );
+           -moz-transform : rotateY( 180deg );
+             -o-transform : rotateY( 180deg );
+                transform : rotateY( 180deg );
+
+        fieldset {
+            display : block;
+            height  : 100%;
+            width   : 100%;
+            padding : 0;
+            margin  : 0;
+        }
+
+        .description {
+            border     : 2px solid #999;
+            margin     : 3px 3px 48px 3px;
+            min-height : 200px;
+            overflow   : auto;
+            background : #333;
+        }
+
+        p {
+            margin : 3px 7px;
+            color  : #adabac;
+            .proxima-regular();
+        }
+
+        .btn-wrap {
+            margin   : 4px;
+            position : absolute;
+            right    : 0;
+            bottom   : 0;
+        }
+    }
+
+    .small-monitor .front {
+        padding       : 3px;
+        background : #545954;
+    }
+
+
+    .small-monitor * {
+        -webkit-transform-style : preserve-3d;
+    }
+
+    .small-monitor.flipped {
+        .transform(translateX( -100% ) rotateY( -180deg ));
+    }
+
+    .small-monitor.active .graph,
+    .small-monitor.active .header-controls {
+        visibility : hidden;
+        -webkit-backface-visibility : hidden;
+    }
+
+    /* expanded/edit styles */
+    @import "expandedmonitor.less";
+
+
+    /* tab styles */
+    .nav-tabs {
+        margin-bottom : 0;
+        border-bottom : none;
+        clear         : both;
+
+        li {
+            margin-bottom: 0;
+            margin-left : 10px;
+        }
+
+        a {
+            padding-top    : 4px;
+            padding-bottom : 4px;
+            background     : #656a65;
+            border         : none;
+            color          : #7e8079;
+            text-transform : uppercase;
+        }
+
+        .active a {
+            background : #767a76;
+            border     : none;
+            color      : #b6b3a6;
+        }
+
+        a:hover {
+            background : #767a76;
+            color      : #b6b3a6;
+        }
+    }
+
+    .tab-content {
+        padding       : 10px;
+        background    : #767a76;
+        border-radius : 4px;
+    }
+
+    .tab-content form {
+        margin-bottom : 0;
+    }
+
+    .metrics-test {
+        width : 488px;
+        float : right;
+    }
+
+
+    /* alert status styles */
+    .small-monitor.red .front {
+        border      : none;
+        background  : #735854;
+        text-shadow : none;
+    }
+
+    .expanded-monitor.red {
+        border      : none;
+        background  : #735854;
+        text-shadow : none;
+
+        .data-view,
+        .button-view,
+        .tab-content {
+            background : #8f7976;
+        }
+
+        .nav-tabs a {
+            background : #816965;
+            color      : #917f79;
+        }
+
+        .nav-tabs a:hover,
+        .nav-tabs .active a {
+            background : #8f7976;
+            color      : #b6b3a6;
+        }
+    }
+
+
+
+    .metrics-schedule {
+        .expressions textarea {
+            width      : 396px;
+            min-height : 200px;
+        }
+
+        .metrics-test .metrics textarea {
+            width : 459px;
+        }
+    }
+    /* add monitor code mirrors */
+    .CodeMirror.error {
+        border-color : #B94A48 !important;
+        box-shadow   : 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px rgba(213, 147, 146, 0.8);
+        outline      : 0 none;
+    }
+
+    .expressions-metrics {
+        .metrics.error,
+        .expressions.error {
+            label {
+                color : #b94a48;
+            }
+        }
+
+        .metrics .CodeMirror,
+        .expressions .CodeMirror {
+            width         : 471px;
+            display       : block;
+            visibility    : visible;
+            border        : 1px solid #b6b3a6;
+            border-radius : 3px;
+            transition    : border 0.2s linear 0s, box-shadow 0.2s linear 0s;
+        }
+
+        .metrics .CodeMirror-scroll,
+        .expressions .CodeMirror-scroll {
+            border-radius : 3px;
+            height        : 100px;
+        }
+
+        .metrics .fullscreen .CodeMirror-scroll,
+        .expressions .fullscreen .CodeMirror-scroll {
+            height : 100%;
+        }
+
+        fieldset {
+            margin-bottom : 16px;
+
+            i {
+                font-style  : normal;
+                font-weight : normal;
+                font-size   : 10px;
+            }
+        }
+
+        fieldset.form-horizontal {
+            .control-group {
+                margin-bottom : 0;
+            }
+        }
+
+        .help.label {
+            float  : right;
+            cursor : pointer;
+        }
+
+        .tooltip {
+            text-transform : none;
+            
+            .tooltip-inner {
+                max-width : 500px;
+
+                .proxima-regular(12px);
+
+                table {
+                    margin     : 5px 0;
+                    text-align : left;
+
+                    tr:nth-child(even) {
+                        background : #333
+                    }
+
+                    th {
+                        padding        : 2px;
+                        width          : 280px;
+                        vertical-align : top;
+                        font-weight    : normal;
+                    }
+                    td {
+                        padding        : 2px;
+                        width          : 400px;
+                        vertical-align : top;
+                    }
+                }
+            }
+        }
+        .tooltip.in {
+            opacity : 0.9 !important;
+        }
+    }
+
+    /* edit monitor styles */
+    .metrics-schedule {
+        .metrics .CodeMirror,
+        .expressions .CodeMirror {
+            border-radius : 3px;
+            display       : block;
+            visibility    : visible;
+        }
+
+        .metrics .CodeMirror-scroll {
+            border-radius : 3px;
+            height : 100px;
+        }
+
+        .expressions .CodeMirror-scroll {
+            border-radius : 3px;
+            height : 196px;
+        }
+
+        .metrics .fullscreen .CodeMirror-scroll,
+        .expressions .fullscreen .CodeMirror-scroll {
+            height : 100%;
+        }
+
+        /* bootstrap styling of label/tooltip for expressions help */
+        .help.label {
+            float  : right;
+            cursor : pointer;
+        }
+
+        .tooltip {
+            text-transform : none; 
+
+            .tooltip-inner {
+                max-width : 500px;
+
+                .proxima-regular(12px);
+
+                table {
+                    margin     : 5px 0;
+                    text-align : left;
+
+                    tr:nth-child(even) {
+                        background : #333
+                    }
+
+                    th {
+                        padding        : 2px;
+                        width          : 280px;
+                        vertical-align : top;
+                        font-weight    : normal;
+                    }
+                    td {
+                        padding        : 2px;
+                        width          : 400px;
+                        vertical-align : top;
+                    }
+                }
+            }
+        }
+        .tooltip.in {
+            opacity : 0.9 !important;
+        }
+    }
+
+    /* ecosystem styles (application tiles, etc.) */
+    @import "ecosystem.less";
+
+    /* rearview system alert styles */
+    @import "alert.less";
+
+    /* bootstrap form overrides */
+    textarea:focus,
+    input[type="text"]:focus,
+    input[type="password"]:focus,
+    input[type="datetime"]:focus,
+    input[type="datetime-local"]:focus,
+    input[type="date"]:focus,
+    input[type="month"]:focus,
+    input[type="time"]:focus,
+    input[type="week"]:focus,
+    input[type="number"]:focus,
+    input[type="email"]:focus,
+    input[type="url"]:focus,
+    input[type="search"]:focus,
+    input[type="tel"]:focus,
+    input[type="color"]:focus,
+    .uneditable-input:focus {
+        border-color : rgba(140, 134, 110, 0.8);
+        box-shadow   : 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(75, 75, 75, 0.7);
+        outline      : 0 none;
+    }
+
+
+
+    .control-group.error input,
+    .control-group.error select,
+    .control-group.error textarea {
+        border-color : #B94A48;
+        box-shadow   : 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(185, 74, 74, 0.7);
+    }
+
+    input:focus:required:invalid:focus,
+    textarea:focus:required:invalid:focus,
+    select:focus:required:invalid:focus {
+        border-color : #B94A48;
+        box-shadow   : 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(185, 74, 74, 0.7);
+    }
+    .parsley-error-list {
+        margin : 0;
+
+        li {
+            list-style : none;
+            color      : #B94A48;
+        }
+    }
+
+    .hero-unit {
+        font-size : inherit;
+    }
+
+    .modal.fade.in {
+        top : 50%;
+    }
+
+    .btn-inverse,
+    .btn-inverse.active,
+    .btn-inverse:active {
+        color : #B6B3A6;
+    }
+
+    .btn-large {
+        border-radius : 6px;
+        font-size     : 16px;
+        padding       : 9px 14px;
+    }
+
+    /* glyph icon override - for font awesome */
+    .icon-white,
+    .nav-tabs > .active > a > [class^="icon-"],
+    .nav-tabs > .active > a > [class*=" icon-"],
+    .nav-pills > .active > a > [class^="icon-"],
+    .nav-pills > .active > a > [class*=" icon-"],
+    .nav-list > .active > a > [class^="icon-"],
+    .nav-list > .active > a > [class*=" icon-"],
+    .navbar-inverse .nav > .active > a > [class^="icon-"],
+    .navbar-inverse .nav > .active > a > [class*=" icon-"],
+    .dropdown-menu > li > a:hover > [class^="icon-"],
+    .dropdown-menu > li > a:hover > [class*=" icon-"],
+    .dropdown-menu > .active > a > [class^="icon-"],
+    .dropdown-menu > .active > a > [class*=" icon-"] {
+        background-image : none;
+    }
+
+    /* making icons in tabs a tiny bit larger */
+    .nav-tabs > li > a > [class^="icon-"] {
+        margin         : 0 4px 0 -7px;
+        font-size      : 130%;
+        vertical-align : -2px;
+    }
+
+    /* codemirror styling */
+    .CodeMirror-wrap {
+        border-radius : 3px !important;
+
+        pre {
+            white-space : pre-wrap !important;
+            word-break  : break-all !important;
+            word-wrap   : break-word !important;
+        }
+
+        .CodeMirror-scroll {
+            background : #000;
+        }
+
+        .CodeMirror-gutter {
+            border-top-left-radius    : 3px;
+            border-bottom-left-radius : 3px;
+        }
+    }
+
+    .fullscreen {
+        margin   : 0;
+        padding  : 0;
+        display  : block;
+        position : absolute;
+        top      : 0;
+        left     : 0;
+        width    : 100%;
+        height   : 100%;
+        z-index  : 9999 !important;
+        border   : 0px solid #bbb;
+        opacity  : 1;
+    }
+
+    .small-monitor {
+        .tooltip {
+            .tooltip-arrow {
+                display : none !important;
+            }
+
+            .tooltip-inner {
+                max-width : none !important;
+            }
+        }
+    }
+
+    /* jquery ui style adjustments */
+    .ui-widget {
+        .proxima-regular(12px);
+        background : #000 !important;
+
+
+        .ui-slider {
+            margin-top : 7px;
+        }
+
+        .ui-timepicker-div dt {
+            font-weight : normal !important;
+        }
+    }
+}