| @import 'variables.scss'; |
| @import 'layout.scss'; |
| @import 'yarn-app.scss'; |
| @import './compose-box.scss'; |
| @import 'em-table.scss'; |
| @import './yarn-queues.scss'; |
| |
| /** |
| * 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; |
| background: $yarn-bg; |
| color: $yarn-primary-color; |
| 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-size: 14px; |
| 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-size: 18px; |
| font-weight: 400; |
| fill: #4b5052; |
| } |
| |
| path.queue { |
| stroke: "red"; |
| fill: none; |
| } |
| |
| /* |
| background style |
| */ |
| line.grid { |
| stroke: WhiteSmoke; |
| } |
| |
| line.chart { |
| stroke: Gray; |
| } |
| |
| /* |
| charts styles |
| */ |
| text.chart-title { |
| font-size: 30px; |
| text-anchor: middle; |
| fill: #4b5052; |
| } |
| |
| 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: 10px; |
| font-size: 16px; |
| background: black; |
| color: white; |
| 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: none; |
| } |
| |
| .navbar-default .navbar-nav > li > a { |
| color: #337ab7; |
| } |
| |
| /* |
| * Queue selector |
| */ |
| .node { |
| cursor: pointer; |
| } |
| |
| .node circle { |
| fill: $yarn-panel-bg; |
| 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: $yarn-panel-bg; |
| color: $yarn-primary-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-radius: 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: $yarn-panel-bg; |
| border: 1px solid $yarn-border-color; |
| border-radius: 3px; |
| -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: $yarn-header-bg !important; |
| border-color: $yarn-border-color; |
| border-radius: 3px; |
| } |
| |
| |
| .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: $yarn-panel-bg; |
| } |
| |
| #chart { |
| position: relative; |
| } |
| |
| #chart path { |
| stroke: $yarn-panel-bg; |
| } |
| |
| #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; |
| } |
| |
| .yarn-cluster-status i, |
| .em-table-simple-status-cell i{ |
| display: inline-block; |
| border-radius: 100%; |
| border: 1px solid; |
| } |
| |
| .yarn-cluster-status i { |
| width: 12px; |
| height: 12px; |
| margin: 3px; |
| vertical-align: bottom; |
| } |
| |
| .em-table-simple-status-cell i { |
| width: 10px; |
| height: 10px; |
| margin: 3px 3px 3px 0; |
| vertical-align: text-bottom; |
| } |
| |
| .yarn-cluster-status i.started, |
| .em-table-simple-status-cell i.finished { |
| border-color: $yarn-success-border; |
| background-color: $yarn-success-bg; |
| } |
| |
| .yarn-cluster-status i.stopped, |
| .em-table-simple-status-cell i.killed, |
| .em-table-simple-status-cell i.failed { |
| border-color: $yarn-error-border; |
| background-color: $yarn-error-bg; |
| } |
| .yarn-cluster-status i.inited, |
| .em-table-simple-status-cell i.running { |
| border-color: $yarn-info-border; |
| background-color: $yarn-info-bg; |
| } |
| .yarn-cluster-status i.notinited, |
| .em-table-simple-status-cell i.accepted { |
| border-color: $yarn-warn-border; |
| background-color: $yarn-warn-bg; |
| } |
| .yarn-cluster-info { |
| display: flex; |
| margin-left: auto; |
| margin-top: -7px; |
| } |
| |
| .yarn-ui-footer { |
| display: flex; |
| padding: 10px 25px; |
| } |
| |
| .deploy-service textarea { |
| border-radius: 5px !important; |
| resize: none; |
| word-wrap: break-word; |
| } |
| |
| .deploy-service .loading-state { |
| opacity: 0.5; |
| } |
| |
| .deploy-service .loading-state img { |
| width: 80px; |
| height: 80px; |
| margin: 40px auto; |
| left: 50% !important; |
| position: absolute; |
| z-index: 9999; |
| } |
| |
| .align-center { |
| text-align: center !important; |
| } |
| .align-right { |
| text-align: right; |
| } |
| |
| .bold-text { |
| font-weight: bold !important; |
| } |
| |
| .deploy-service .saved-list { |
| min-height: 600px; |
| } |
| |
| .deploy-service .glyphicon { |
| cursor: pointer; |
| } |
| |
| .deploy-service .remove-icon:hover { |
| color: #d9534f; |
| } |
| |
| .deploy-service .savedlist-column { |
| padding-top: 10px; |
| } |
| |
| .deploy-service .definition-column { |
| padding-top: 10px; |
| border-left: 1px solid #ddd; |
| } |
| |
| .deploy-service .content-area { |
| padding: 15px 0px; |
| border-top: 1px solid #ddd; |
| } |
| |
| .deploy-service .custom-json-area { |
| padding: 10px 0; |
| margin-top: -26px; |
| } |
| |
| .deploy-service-modal .modal-dialog { |
| width: 400px; |
| } |
| |
| .deploy-service-modal .form-group { |
| margin-bottom: 5px; |
| } |
| |
| .deploy-service .action-btns { |
| text-align: right; |
| padding-bottom: 15px; |
| padding-right: 0; |
| } |
| |
| table.table-custom-action > thead > tr > th:last-of-type, table.table-custom-action > tbody > tr > td:last-of-type { |
| width: 50px !important; |
| } |
| |
| .deploy-service .toggle-btn.active { |
| color: $yarn-panel-bg; |
| background-color: #337ab7; |
| border-color: #337ab7; |
| text-shadow: none; |
| } |
| |
| .deploy-service .service-resp { |
| word-wrap: break-word; |
| } |
| |
| table.table-custom-bordered { |
| border: 1px solid #ddd !important; |
| border-radius: 4px !important; |
| } |
| |
| table.table-custom-bordered > thead > tr > th, table.table-custom-bordered > tbody > tr > td { |
| border-bottom: 1px solid #ddd !important; |
| border-right: 1px solid #ddd !important; |
| } |
| |
| table.table-custom-striped > thead > tr, .table-custom-striped > tbody > tr:nth-of-type(even) { |
| background-color: #f9f9f9 !important; |
| } |
| |
| table.table-custom-header > thead > tr > th { |
| background-color: #f5f5f5 !important; |
| } |
| |
| table.table-radius-none { |
| border-radius: 0 !important; |
| } |
| |
| table.table-border-none { |
| border: none !important; |
| } |
| |
| .deploy-service label.required:after, .deploy-service-modal label.required:after { |
| content: '*'; |
| color: #d9534f; |
| } |
| |
| .deploy-service .form-group.shrink-height { |
| margin-bottom: -8px; |
| } |
| |
| table.fix-table-overflow { |
| table-layout: fixed; |
| } |
| |
| table.fix-table-overflow > tbody > tr > td:last-of-type { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| div.tooltip.info-tooltip { |
| font: 14px sans-serif !important; |
| background: lightsteelblue; |
| word-wrap: break-word; |
| position: absolute; |
| text-align: justify; |
| border-radius: 3px; |
| z-index: 9999; |
| padding: 10px; |
| display: none; |
| min-width: 200px; |
| max-width: 500px; |
| opacity: 1; |
| top: 10px; |
| left: 0; |
| } |
| |
| div.tooltip.info-tooltip > span.top-arrow { |
| color: lightsteelblue; |
| position: absolute; |
| top: -10px; |
| left: 10px; |
| } |
| |
| span.info-icon { |
| color: #337ab7 !important; |
| } |
| |
| div.service-action-mask { |
| position: absolute; |
| opacity: 0.5; |
| z-index: 9999; |
| width: 100%; |
| height: 100%; |
| } |
| |
| div.service-action-mask img { |
| position: absolute; |
| width: 80px; |
| height: 80px; |
| margin: 40px auto; |
| left: 45% !important; |
| z-index: 9999; |
| } |
| |
| .muted-text { |
| color: $yarn-muted-text; |
| } |
| |
| .glyphicon-gray { |
| color: $yarn-gray-icon; |
| } |
| |
| .btn.btn-unstyled { |
| padding: 5px; |
| background: none; |
| border: none; |
| box-shadow: none; |
| } |
| |
| .queue-page-breadcrumb, |
| #tree-selector-container { |
| width: calc(100% - #{$compose-box-width}); |
| } |
| |
| #tree-selector-container { |
| overflow: scroll; |
| } |
| |
| .yarn-label { |
| border-radius: 3px; |
| margin-bottom: 5px; |
| border: 1px solid $yarn-panel-bg; |
| font-size: 12px; |
| > span { |
| padding: 5px; |
| } |
| &.primary { |
| display: inline-grid; |
| .label-key { |
| color: $yarn-panel-bg; |
| background: #666; |
| } |
| .label-value { |
| color: $yarn-panel-bg; |
| background: $yarn-success-border; |
| } |
| } |
| &.secondary { |
| display: inline-table; |
| .label-key { |
| color: $yarn-panel-bg; |
| background: #999; |
| } |
| |
| .label-value { |
| color: $yarn-panel-bg; |
| background: yellowgreen; |
| } |
| } |
| } |
| |
| .yarn-queues-container { |
| padding: 15px; |
| h3 { |
| margin-top: 0; |
| } |
| } |
| |
| .yarn-metrics-json { |
| white-space: pre-wrap; |
| word-wrap: nowrap; |
| overflow: scroll; |
| } |
| |
| div.loggedin-user { |
| float: right; |
| padding: 15px 5px; |
| color: #555; |
| .username { |
| font-weight: bold; |
| } |
| } |
| |
| .no-border-bottom { |
| border-bottom: none; |
| } |
| |
| .margin-bottom-20 { |
| margin-bottom: 20px; |
| } |
| |
| .diagnostic-info { |
| pre { |
| margin-bottom: 0; |
| white-space: pre-wrap; |
| border: none; |
| border-radius: 2px; |
| } |
| } |
| |
| /** |
| * Active User Info table styles |
| */ |
| .active-user-panel { |
| margin-top: 10px; |
| } |
| |
| table.active-user-table { |
| border: 1px solid #ddd; |
| > thead > tr > th { |
| background-color: #f7f7f7; |
| } |
| &.table-bordered > thead > tr > th, |
| &.table-bordered > tbody > tr > td { |
| border: 1px solid #dcdcdc !important; |
| } |
| } |