| /** |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the |
| * "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| |
| body, html, body > .ember-view { |
| height: 100%; |
| overflow: visible; |
| color: @text-color; |
| background: #f6f6f8; |
| font-family: "Open Sans","Helvetica Neue", sans-serif!important; |
| } |
| body, html { |
| min-width: 1024px; |
| } |
| |
| /* |
| Over all style |
| */ |
| text { |
| font-size: 14px; |
| } |
| |
| text.small { |
| font-size: 8px; |
| } |
| |
| html, body |
| { |
| margin: 0px; |
| padding: 0px; |
| height: 100%; |
| width: 100%; |
| } |
| |
| |
| /* |
| queue's style (left banner of queues) |
| */ |
| |
| text.queue { |
| font-family : sans-serif; |
| font-size : 15px; |
| fill : gray; |
| } |
| |
| text.heatmap-cell { |
| font: 14px sans-serif; |
| font-weight: bold; |
| text-anchor: middle; |
| fill: Azure; |
| text-align: center; |
| } |
| |
| .hyperlink { |
| cursor: pointer; |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| } |
| |
| .heatmap-clear { |
| fill: #337ab7; |
| } |
| |
| text.heatmap-cell-notselected { |
| font: 14px sans-serif; |
| font-weight: bold; |
| text-anchor: middle; |
| fill: Silver; |
| text-align: center; |
| } |
| |
| text.heatmap-rack { |
| font: 20px sans-serif; |
| fill: DimGray; |
| } |
| |
| path.queue { |
| stroke: "red"; |
| fill: none; |
| } |
| |
| /* |
| background style |
| */ |
| line.grid { |
| stroke: WhiteSmoke; |
| } |
| |
| line.chart { |
| stroke: Gray; |
| } |
| |
| /* |
| charts styles |
| */ |
| text.chart-title { |
| font-size: 30px; |
| font-family: sans-serif; |
| text-anchor: middle; |
| fill: Gray; |
| } |
| |
| text.donut-highlight-text, text.donut-highlight-sub { |
| font-size: 15px; |
| font-family: sans-serif; |
| text-anchor: middle; |
| fill: Gray; |
| vertical-align: middle; |
| } |
| |
| text.donut-highlight-sub { |
| font-size: 23px; |
| margin-top: 10px; |
| } |
| |
| rect.chart-frame { |
| fill: none; |
| } |
| |
| text.bar-chart-text { |
| font-size: 8px; |
| font-family: sans-serif; |
| vertical-align: middle; |
| fill: Gray;; |
| } |
| |
| div.tooltip { |
| position: absolute; |
| text-align: center; |
| padding: 2px; |
| font: 24px sans-serif; |
| background: lightsteelblue; |
| border: 0px; |
| border-radius: 8px; |
| pointer-events: none; |
| } |
| |
| /* |
| * Loading icon styles |
| */ |
| .loading-mask > img { |
| display: block; |
| margin: 0 auto; |
| } |
| |
| /* |
| * Data table |
| */ |
| |
| table.dataTable thead .sorting { |
| background-image: url("/assets/images/datatables/sort_both.png"); |
| } |
| table.dataTable thead .sorting_asc { |
| background-image: url("/assets/images/datatables/sort_asc.png"); |
| } |
| table.dataTable thead .sorting_desc { |
| background-image: url("/assets/images/datatables/sort_desc.png"); |
| } |
| table.dataTable thead .sorting_asc_disabled { |
| background-image: url("/assets/images/datatables/sort_asc_disabled.png"); |
| } |
| table.dataTable thead .sorting_desc_disabled { |
| background-image: url("/assets/images/datatables/sort_desc_disabled.png"); |
| } |
| |
| .add-ellipsis { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .breadcrumb { |
| padding-bottom: 3px; |
| background-color: #f6f6f8; |
| } |
| |
| .navbar-default .navbar-nav > li > a { |
| color: #337ab7; |
| } |
| |
| /* |
| * Queue selector |
| */ |
| .node { |
| cursor: pointer; |
| } |
| |
| .node circle { |
| fill: #fff; |
| stroke: steelblue; |
| stroke-width: 3px; |
| } |
| |
| .node text { |
| font: 12px sans-serif; |
| } |
| |
| .link { |
| fill: none; |
| stroke: #ccc; |
| stroke-width: 2px; |
| } |
| |
| .lr-margin { |
| margin: 0px 30px; |
| } |
| |
| .footer { |
| background-color: @white; |
| color: @text-color; |
| |
| padding: 10px 0px; |
| margin: 0px; |
| |
| border-top: 1px lightgrey solid; |
| |
| font-size: .9em; |
| } |
| |
| .table { |
| margin-bottom: 0px; |
| border: none; |
| |
| overflow: hidden; |
| } |
| |
| .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { |
| border: none !important; |
| } |
| |
| .dataTables_wrapper .table { |
| border: 1px solid lightgrey; |
| border-bottom: 1px solid lightgrey !important; |
| border-radious: 5px; |
| } |
| |
| .dataTables_wrapper .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { |
| border: 1px solid lightgrey; |
| } |
| |
| td { |
| padding: 8px 15px 8px 15px !important; |
| } |
| |
| .footer-frame { |
| height: 60px; |
| } |
| .footer { |
| height: 40px; |
| } |
| |
| .footer-pusher { |
| min-height: 100%; |
| height: auto !important; |
| height: 100%; |
| margin: 0 auto -40px; // Must be same as footer & footer-frame |
| } |
| |
| .panel { |
| background-color: #fff; |
| border: 1px solid #ddd; |
| border-radius: 15px; |
| -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); |
| box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); |
| overflow: hidden; |
| } |
| |
| .panel-default .container-fluid { |
| margin-top: -45px !important; |
| margin-bottom: -10px !important; |
| } |
| |
| .panel-default > .panel-heading { |
| background-image: none; |
| background-color: #f5f5f5 !important; |
| border-radius: 15px 15px 0px 0px; |
| } |
| |
| |
| .panel-heading { |
| background-color: rgba(0, 0, 0, 0) !important; |
| font-weight: bold; |
| } |
| |
| .hadoop-brand-image { |
| margin-top: -10px; |
| width: auto; |
| height: 45px; |
| } |
| |
| li a.navigation-link.ember-view { |
| color: #2196f3; |
| font-weight: bold; |
| } |
| |
| .breadcrumb-bar .refresh { |
| position: absolute; |
| right: 20px; |
| top: 3px; |
| } |
| |
| .x-scroll { |
| overflow-x: scroll; |
| } |
| |
| .donut-chart { |
| padding: 0px !important; |
| } |
| |
| .donut-chart svg { |
| width: 100%; |
| } |
| |
| div.attempt-info-panel table { |
| table-layout: fixed; |
| } |
| |
| div.attempt-info-panel table > tbody > tr > td:last-of-type { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| #main { |
| float: left; |
| width: 750px; |
| } |
| |
| #sidebar { |
| float: right; |
| width: 100px; |
| } |
| |
| #sequence { |
| width: 600px; |
| height: 70px; |
| } |
| |
| #legend { |
| padding: 10px 0 0 3px; |
| } |
| |
| #sequence text, #legend text { |
| font-weight: 600; |
| fill: #fff; |
| } |
| |
| #chart { |
| position: relative; |
| } |
| |
| #chart path { |
| stroke: #fff; |
| } |
| |
| #explanation { |
| position: absolute; |
| top: 360px; |
| left: 385px; |
| width: 230px; |
| text-align: center; |
| color: #666; |
| z-index: -1; |
| } |
| |
| .simple-bar-chart .axis text { |
| font: 10px sans-serif; |
| } |
| |
| .simple-bar-chart .axis path, .simple-bar-chart .axis line { |
| fill: none; |
| stroke: #000; |
| stroke-width: 1px; |
| } |
| |
| .simple-bar-chart rect { |
| fill: steelblue; |
| } |
| |
| .simple-bar-chart rect:hover { |
| fill: brown; |
| cursor: pointer; |
| } |
| |
| .yarn-flow-runs .chart-panel, .yarn-flow-runinfo .chart-panel { |
| overflow: auto; |
| } |
| |
| .yarn-flow-runs .glyphicon-remove, .yarn-flow-runinfo .glyphicon-remove { |
| cursor: pointer; |
| } |
| |
| .yarn-flow-runs .glyphicon-remove:hover, .yarn-flow-runinfo .glyphicon-remove:hover { |
| color: #c9302c; |
| } |
| |
| .yarn-flow-runs .dropdown-menu .item-text, .yarn-flow-runinfo .dropdown-menu .item-text { |
| width: auto; |
| display: inline-block; |
| } |
| |
| .yarn-flow-runs .dropdown-menu .item-icon, .yarn-flow-runinfo .dropdown-menu .item-icon { |
| width: 14px; |
| display: inline-block; |
| } |