/* ============================================ ____ _ _ _ | \ | | |_| | | | | | ____ | | _ | |___ ___ ___ | \ / | | | | | | _ \ | | | | | | | / /| | | | | | | | | | | | | | | | |_____/ \____/ |_| |_| |_| |_| |___| |___| -------------------------------------------- Created by Balihoo Inc. 2013 ============================================ ==REMINDER== Before edits are made ensure that you are running the SASS watcher. $ cd ~/pathToProject/app/sass $ sass --watch style.scss:../css/style.css */ /* VARIABLES =============================== */ /* Colors */ /* Typography */ /* Links */ /* Layout Elements */ /* Buttons $btn-default-color: $darkgray !default; $btn-default-bg: $lightgray !default; $btn-default-border: $darkgray !default; $btn-success-color: $white; $btn-success-bg: $darkcyan; $btn-success-border: darken($btn-success-bg, 5%) !default; */ /* States $state-success-text: $darkgray !default; $state-success-bg: $green !default; $state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default; */ /* ========================================= */ /* SELECTORS =============================== */ body, html { height: 100%; } body { font-family: "Lato", sans-serif; color: #59595b; } a { color: #333333; font-weight: 700; text-decoration: none; cursor:pointer; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } a:hover, a:focus { color: #333333; text-decoration: none; } i { font-style: normal; } hr { clear: both; height: 1px; margin: 20px -20px; padding: 0; border: none; border-bottom: solid 1px #dddcdc; } ul { margin-left: 20px; padding-left: 0; list-style-type: none; } /* ========================================= */ /* TYPOGRAPHY ============================== */ h1, h2, h3, h4, h5, h6 { font-family: "Open Sans Condensed", sans-serif !important; font-weight: 700 !important; } h1 { margin: 0 0 30px; font-size: 30px; color: white; } h2 { font-size: 24px; } h3 { margin-top: 0; font-size: 18px; } .label { cursor: default; } .geography .well { padding-bottom: 0; min-height: 60px; } .geography .custom-select { float: left; margin-top: -5px; } .geography .custom-input { float: left; margin: -5px 0 0 10px; width: 40px; } .geography h3 { float: left; margin: 0 0 0 5px; display: block; } .note h3 { color: #BBB; margin: 0; padding: 0; font-weight: normal; } .img-mini { height: 50px !important; padding: 0 !important; } img.constrained { max-width:360px; } /* ========================================= */ /* GENERAL LAYOUT ========================== */ #wrap > .container-fluid { padding: 100px 10px 30px; } #wrap { min-height: 100%; height: auto !important; height: 100%; /* Negative top margin equals footer height */ margin: 0 auto -25px; /* Pad bottom equals footer height */ padding: 0 0 25px; background: #dddcdc; } .container-fluid { padding: 0; } @media (min-width: 1080px) { /*.container {*/ /*width: 1060px;*/ /*max-width: 1060px;*/ /*}*/ } td .fa { margin-right: 5px; } .caption { text-align: center; } a .caption { font-weight: 300; } .col-md-6 { width: 499px; margin-right: 20px; padding: 0; } .last { margin-right: 0; } .pad-right { padding-right: 20px; } /* Panels */ .panel { border-radius: 0; border-top-left-radius: 10px; border-bottom-right-radius: 10px; } .panel-heading { padding: 15px 20px; border-top-left-radius: 10px; border-top-right-radius: 0; color:white; } .panel-heading-small { padding: 8px; border-top-left-radius: 10px; border-top-right-radius: 0; } .panel-heading-micro { padding: 5px; border-top-left-radius: 6px; border-top-right-radius: 0; } .panel-heading h1 { margin: 0 40px 0 0; } .panel-heading .well { margin: 20px 0 0; padding: 20px; font-size: 18px; } .panel-heading-stripe { background-image: url("../img/back_stripe.png") !important; } .panel-default { border-color: #cccccc; } .panel-default > .panel-heading { background: #59595b; border-bottom: none; color:white; } .panel-default > .panel-heading-small { background: #59595b; border-bottom: none; font-size:16px; color:white; } .panel-default > .panel-heading-micro { background: #59595b; border-bottom: none; font-size:12px; color: #3b3b3b; font-weight:bolder; } .panel-body { padding: 8px; background: #f3f3f3; border-bottom-right-radius: 11px; } .panel-body-small { padding: 10px; background: #f3f3f3; border-bottom-right-radius: 11px; } .panel-body.panel-gray { padding-top: 0; background: #59595b; } h2.panel-title { font-size: 24px; } .panel-inset { border-color: #cccccc; padding:0; } .panel-inset > .panel-heading { background: #59595b; border-bottom: none; color:white; } .panel-inset > .panel-heading-small { background: #59595b; border-bottom: none; font-size:16px; color:white; } /**/ /* Wells */ .well { background-color: #f3f3f3; border: 1px solid #dddcdc; border-radius: 4px; -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.05); } .well h1 { margin: 0; } .well-lg { border-radius: 0; border-top-left-radius: 10px; border-bottom-right-radius: 10px; } /**/ /* Jumobtrons */ .container .jumbotron { margin: 0 auto; padding: 40px; background-color: white; border: solid 1px #cccccc; border-radius: 0; border-top-left-radius: 10px; border-bottom-right-radius: 10px; font-size: 15px; } .container .jumbotron.box-login { width: 400px; } .container .jumbotron.box-login h2 { padding-bottom: 1em; } .container .jumbotron.box-login .btn-bar { margin: 40px -40px -40px; } .container .jumbotron label { font-size: 16px; } /**/ /* Pills w/ Content*/ .nav-pills { /*margin: 0 0 20px 0;*/ } .nav-pills > li > a { margin-right: 5px; padding: 6px 12px; background: white; border: 1px solid #dddcdc; border-radius: 4px; color: #59595b; text-decoration: none; } .nav-pills > li > a.multi { background-color: #59595b; color:white; } .nav-pills > li > a.multi:hover, .nav-pills > li > a.multi:focus { background-color: #59595b; color:white; text-shadow: 0 0 3px #46b8da; } .nav-pills > li.active > a.multi { background-color: #434347; color:white; } .nav-pills > li.active > a.multi:hover, .nav-pills > li.active > a.multi:focus { background-color: #59595b; color:white; text-shadow: 0 0 3px #46b8da; } .nav-pills > li > a.multi_child { margin-left:10px; } .nav-pills > li > a:hover, .nav-pills > li > a:focus { background-color: #f3f3f3; color: #59595b; } .nav-pills > li.active > a { background-color: #dddcdc; border: 2px solid #cccccc; border-radius: 4px; color: #333333; } .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background-color: #dddcdc; color: #59595b; } .tab-pane .well { background-color: #dddcdc; } /**/ /* List Groups */ ul.list-group { margin-left: 0; } .modal-content ul.list-group { margin-bottom: 0; } /**/ /* Alerts */ .alert { border-radius: 10px; } .alert-neutral { background-color: #f3f3f3; border-color: #cccccc; color: #59595b; } /**/ /* Loading Spinner */ .loading { position: absolute; z-index: 9999; top: 25%; left: 50%; margin-left: -160px; /* Should be half the width */ padding: 20px; background: #dddcdc; background-color: rgba(88, 88, 91, 0.1); border-radius: 10px; color: #fff; } .loading .spinner-container { padding: 40px 75px 50px; background: white; border-radius: 11px; } .loading .spinner { float: left; background: url("../img/spinner.gif"); width: 75px; height: 15px; } /* ========================================= */ /* TABLES ================================== */ .table { font-size: 18px; } .table > tbody > tr > td, .table > thead > tr > th { padding: 6px 15px; /*line-height: 1.2em;*/ vertical-align: middle; } .table > thead > tr > th { padding: 15px; } /* ========================================= */ /* HEADER BAR ========================== */ /* Top Navigation */ .brand-logo { float: left; width: 200px; } .navbar a { color: #59595b; text-decoration: none; } .navbar a:hover { color: #333333; } .navbar-collapse { padding-left: 0; } .navbar-default { background-color: white; } .navbar-default .container-fluid { background: transparent; } /* Right Links */ .navbar-default .navbar-text { float: none; color: #cccccc; text-align: right; } /**/ /* Main Navigation */ .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color: transparent; border-color: #dddcdc; color: #333333; } .navbar-default .navbar-nav > li > a.disabled { color: #AAA; } .navbar-nav { position: relative; top: 20px; float: left; margin-left: 40px; border-right: solid 1px #dddcdc; font-size: 18px; } .navbar-nav li { border-right: none; } .navbar-nav li > a { float: left; } .navbar-nav li li { border-right: none; } .navbar-nav a { border-left: solid 1px #dddcdc; } /**/ /* Dropdown Menu */ .dropdown-menu { top: 0; min-width: 135px; margin-left: -1px; /*padding: 50px 0 0;*/ /*background: transparent;*/ border-top: none; } .dropdown-menu > li > a { display: block; width: 100%; padding: 6px 16px; background: white; } .dropdown-menu > li > a:hover { background-color: #dddcdc; color: #333333; } /**/ /* Color Bar */ .color-bar { height: 5px; background: #f79532; } .color-bar div { float: left; width: 25%; height: 5px; } .color-bar div.bar-cyan { background: #658c8b; } .color-bar div.bar-gray { background: #59595b; } .color-bar div.bar-green { background: #bfb672; } .color-bar div.bar-orange { background: #f79532; } /**/ /* ========================================= */ /* FORM ELEMENTS =========================== */ .form-group, .form-inline .form-group { margin-bottom: 15px; } .form-horizontal .control-label { color: #f3f3f3; text-align: left; } .panel-heading .form-horizontal { margin-top: 10px; } fieldset { clear: both; margin-bottom: 25px; padding: 15px 25px; background: white; border: solid 1px #dddcdc; border-radius: 11px; border-top-right-radius: 0; border-bottom-left-radius: 0; } fieldset.col-md-4 { width: 338px; margin-right: 20px; } legend { display: inline; width: auto; margin: 0 0 10px; padding: 0; border: none; font-family: "Open Sans", sans-serif; font-size: 16px; } .label { /*padding-right: 5px;*/ display : inline-block; } label.label-lg { font-size: 16px; } .form-control:focus { border-color: #cccccc; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.4); } .input-xxs { width: 50px; height: 30px; line-height: 30px; } .input-xs { width: 100px; height: 30px; line-height: 30px; } .input-sm { width: 150px; font-size: 14px; } .input-md { width: 300px; height: 30px; line-height: 30px; } /* Buttons */ .btn { font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 700; color: #333333; text-transform: uppercase; text-decoration: none; } .btn:hover, .btn:focus { outline: none; text-decoration: none; } .btn-default:hover { background: #dddcdc; } .btn-lg { font-size: 14px; } .btn-red { background-color: white; border-color: #dddcdc; color: #cd0000; } .btn-link { color: #333333; font-weight: normal; text-transform: none; text-decoration: underline; } .btn-link:hover, .btn-link:focus { text-decoration: none; color: #333333; } .panel-heading .btn-link { color: #f3f3f3; } .panel-heading .btn-link:hover { color: white; } .btn-bar { padding: 20px; background: #f3f3f3; border-bottom-right-radius: 11px; } .box-login .btn-bar { padding: 20px 60px; } /**/ /* ========================================= */ /* MODALS ================================== */ .modal-content { border-radius: 0; border-top-left-radius: 10px; border-bottom-right-radius: 10px; } .modal-header { padding: 20px; background: #f3f3f3; border-top-left-radius: 6px; } .modal-body { font-size: 16px; } .modal-footer { padding: 20px; background: #f3f3f3; border-bottom-right-radius: 10px; } .close { opacity: 0.5; filter: alpha(opacity=50); } .close:hover { opacity: 0.75; filter: alpha(opacity=75); } .modal-tactic h2 { margin: 0; padding: 0; color: #658c8b; } /* ========================================= */ /* FOOTER ================================== */ footer { height: 25px; /* Set the fixed height of the footer here */ background-color: white; color: #59595b; line-height: 59px; } footer .container-fluid { background: transparent; } .logo-pbb { float: left; width: 126px; height: 25px; margin-top: 20px; background: url("../img/layout.png") left -35px; } .footer-right { float: right; width: auto; font-size: 12px; text-align: right; } /* ========================================= */ .accordion { margin-bottom: 20px; } .accordion-group { margin-bottom: 2px; border: 1px solid #e5e5e5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .accordion-heading { border-bottom: 0; } .accordion-heading .accordion-toggle { display: block; padding: 8px 15px; } .accordion-toggle { cursor: pointer; } .accordion-inner { padding: 9px 15px; border-top: 1px solid #e5e5e5; } .collapse { position: relative; height: 0; overflow: hidden; -webkit-transition: height 0.35s ease; -moz-transition: height 0.35s ease; -o-transition: height 0.35s ease; transition: height 0.35s ease; } .collapse.in { height: auto; } .f20 { font-size:20px; } .f30 { font-size:30px; } .fixed-height { height: 160px; overflow-y: scroll; } .fixed-height2 { height: 180px; overflow-y: scroll; } .margin-top { margin-top: 90px; } .alert-md { width: 300px; height: 30px; line-height: 30px; border: 1px solid transparent; border-radius: 4px; margin-top: 8px; margin-bottom: 12px; padding-left: 4px } .json { vertical-align:top; font-family: "Ubuntu Mono", monospace; margin-left:5px; } .block { margin-left:20px; } .blob { display:inline-block; vertical-align: top; } .table.params { font-size:14px; } table { font-size: inherit; } .lightbox { margin:6px; padding:4px; border:1px solid #BBBBBB; min-width:270px; min-height:30px; } .shadow { border-radius: 0; border-top-left-radius: 6px; border-bottom-right-radius: 6px; box-shadow: 3px 3px 3px #888888; } .muted { color: #BBBBBB; } .muted:hover { color: #59595B; } .muted.red:hover { color: #aa1111; } .muted.blue:hover { color: #428bca; } .muted.green:hover { color: #11aa11; } .timeline { color:#428bca; } .timeline-ERROR { color:#D9534F; font-weight:bold; } .timeline-SUCCESS { color:#5CB85C; font-weight:bold; } .timeline-WARNING { color:#f0ad4e; font-weight:bold; } .initiallyHidden { display: none; } .action { cursor: pointer; } .editable { cursor: text; } .status-edited { border:3px solid #46b8da; box-shadow:0 0 12px #46b8da; } .form-inline { display:inline-block; } .bottom-dialog { position:fixed; padding:14px; bottom:15px; left:15px; } .jsonvalue:hover { color:black; } .paramJson { margin:2px 2px 2px 20px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; } .paramJson:hover { background-color: rgba(247, 149, 50, .1); } .schemaJson { margin:2px 2px 2px 10px; padding:3px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; } .schemaJson:hover { background-color: rgba(1, 223, 215, .06); } .schemaObject { margin:2px 2px 2px 2px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-left:4px solid #428bca; padding-left:2px; } .schemaArray { margin:2px 2px 2px 2px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-left:4px solid #f79532; padding-left:2px; } .code { margin:2px 2px 2px 20px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-left:4px solid #f0ad4e; font-family: "Ubuntu Mono", monospace; padding-left:4px; } .code:hover { background-color: rgba(247, 149, 50, .2); } .wide { width: 600px; } .example { font-size:10px; font-weight:bolder; margin-top:3px; } .formArray { width:100%; margin:2px 2px 2px 20px; padding:3px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; background-color:#f1f1f1; min-height:40px; border-left: 4px solid #dfdfdf; } .formObject { width:100%; margin:2px 2px 2px 20px; padding:3px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; background-color:#f1f1f1; min-height:40px; border-left: 4px solid #f8981d; } .childSection { background-color: #8a8a90; } .setBox { background-color:#FFF; border: 1px solid #DDDCDC; border-radius: 4px; padding:4px; } .tagContainerInert { margin:1px; color:white; background: #658c8b; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border: 1px solid #658c8b; border-right: 0px; display: inline-block; font-size:13px; } .tagContainer { margin:1px; color:white; background: #658c8b; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border: 1px solid #658c8b; border-right: 0px; display: inline-block; font-size:13px; } .tagContainer:hover { background: #bfb672; border: 1px solid #bfb672; border-right: 0px; } .tagLabel { font-weight: bold; margin:3px; } .tagLabel a { color:white; text-decoration: none; font-weight: bold; margin:3px; } .tagLabel a:hover { color:yellow; margin:3px; } .tagValue { padding-left:3px; padding-right:3px; background-color: white; border-bottom-right-radius: 4px; color: #333; border: 1px solid #658c8b; white-space: nowrap; } .matchedTag { background-color: #ffb900; } .matchedTag:hover { border:2px solid #ffb900; box-shadow:0 0 8px #ffb900; } .excludedTag { background-color: rgb(217, 83, 79); color:white; } .excludedTag:hover { border:2px solid rgb(217, 83, 79); box-shadow:0 0 8px rgb(217, 83, 79); } .invalidTag { border:3px solid red; box-shadow:0 0 12px red; } textarea.ng-invalid { border:3px solid red; box-shadow:0 0 12px red; } input.ng-invalid { border:3px solid red; box-shadow:0 0 12px red; } .dimmed { position:relative; } .dimmed:after { content: " "; z-index: 10; /*display: block;*/ position: absolute; /*height: 100%;*/ top:-10px; left: -10px; right: -10px; background: rgba(255, 255, 255, 0.4); pointer-events: none; } .loadingOverlay { position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: #fff; z-index: 1001; opacity: 0.5; filter: alpha(opacity=50); } .loadingSpinner { width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; z-index: 1000; margin: -28px 0 0 -25px; } .tooManyResults, .tooManyResults:hover { color: red; } .ace_search { color:#59595B; } .activityResponse { margin-top: 4px; border-left: 4px solid #dddcdc; padding-left: 2px; } .trace { background: #ffbbbb; color:darkred; border: 1px dotted red; border-left: 3px solid red; padding:4px; } .vis.timeline .item.range { background: #658c8b; border-radius: 0; border: 1px solid #658c8b; color:white; padding:1px; padding-left: 5px; padding-right: 5px; } .vis.timeline .item.range.timelineScheduled { color: #59595B; background-color: #f5f8cb; } .vis.timeline .item.range.timelineScheduledInProgress { color: #59595B; background: repeating-linear-gradient( 45deg, rgba(245, 248, 203, .6), rgba(245, 248, 203, .6) 10px, rgba(208, 211, 156, .6) 10px, rgba(208, 211, 156, .6) 20px ); } .vis.timeline .item.range.timelineFailed { color: #59595B; background: #ffb900; } .vis.timeline .item.range.timelineCanceled { color: #59595B; background: #ffb900; } .vis.timeline .item.range.timelineCompleted { background: #5CB85C; } .vis.timeline .item.range.timelineStartedTimedOut { background: #ff0000; } .vis.timeline .item.range.timelineScheduledTimedOut { background: #ff5555; } .vis.timeline .item.range.timelineTimer { background: #428bca; } .vis.timeline .item.range.timelineTimerInProgress { background: repeating-linear-gradient( 45deg, rgba(66, 139, 202, .6), rgba(66, 139, 202, .6) 10px, rgba(66, 139, 202, .8) 10px, rgba(66, 139, 202, .8) 20px ); } .vis.timeline .item.range.timelineTimerCanceled { background: repeating-linear-gradient( 45deg, rgba(166, 39, 20, .6), rgba(166, 39, 20, .6) 10px, rgba(166, 39, 20, .8) 10px, rgba(166, 39, 20, .8) 20px ); } .vis.timeline .item.background.decisionScheduled { background-color: rgba(1, 223, 215, .2); } .vis.timeline .item.background.decisionScheduledTimedOut { background-color: rgba(253, 1, 1, .6); } .vis.timeline .item.background.decisionStartedTimedOut { background-color: rgba(243, 1, 55, .6); } .vis.timeline .item.background.decisionInProgress { background: repeating-linear-gradient( 45deg, rgba(1, 223, 215, .6), rgba(1, 223, 215, .6) 10px, rgba(1, 223, 215, .4) 10px, rgba(1, 223, 215, .4) 20px ); } .vis.timeline .item.background.decisionCompleted { background-color: rgba(1, 223, 215, .6); } .vis.timeline .item.box.CachedResponse { background: #5CB85C; color: white; } .vis.timeline .item.box.ping { background: orange; color: black; } .vis.timeline .item.box.sectionUpdates { background: orange; color: black; } .vis.timeline .item.box.unknownSignal { background: yellow; color: black; } .vis.timeline .labelset .vlabel .inner { font-weight: bold; } .instanceCrew { background: #59595b; padding:2px; color:white; border-top-left-radius: 6px; border-bottom-right-radius: 6px; } .activeInstance { background-color:#ffb900; color:white; padding:2px; border-top-left-radius: 4px; border-bottom-right-radius: 4px; } .small { font-size:0.8em; } .cacheValue { padding:4px; margin:2px; border:1px solid #ddd; background-color:#eee; } .sectionOut { margin-right: 3px; padding: 2px 4px; background: white; border: 1px solid #dddcdc; border-radius: 2px; color: #59595b; text-decoration: none; display:inline-block; } .logMessage { margin-right: 3px; padding: 2px 4px; background: white; border: 1px solid #dddcdc; border-radius: 2px; color: #59595b; text-decoration: none; } .triageSection { margin:2px 0px 2px 8px; padding:6px 0px 3px 3px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; background-color:#f1f1f1; min-height:40px; border-left: 2px solid #999; background-color: rgba(200, 200, 200, .3); } .sectionName { background:white; color:#59595b; border: 1px solid #dddcdc; border-radius:4px; font-weight:bold; margin:0 4 0 4px; padding:2px; } .rangePicker { background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; margin-right:8px; color: #59595b; vertical-align: middle; height: 30px; } .today { font-weight: bolder; }