| /** |
| * 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. |
| */ |
| |
| @import '../../modules/shared/mixins'; |
| |
| :host { |
| |
| .service-logs-table-controls { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: flex-end; |
| .layout-btn-group { |
| display: flex; |
| align-items: center; |
| .btn { |
| padding: .2em; |
| display: flex; |
| align-items: center; |
| i { |
| cursor: pointer; |
| margin: 0 .25em; |
| &.active { |
| color: @submit-color; |
| } |
| } |
| } |
| } |
| } |
| |
| .panel-body { |
| width: 100%; |
| } |
| .log-list-table-container { |
| width: 100%; |
| overflow-x: hidden; |
| } |
| table { |
| min-width: 100%; |
| table-layout: fixed; |
| width: 100%; |
| empty-cells: hide; |
| /deep/ col { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| &.log-action { |
| overflow: visible; |
| padding-left: .25em; |
| padding-right: 0; |
| width: 1em; |
| } |
| &.log-time { |
| width: 7em; |
| padding-left: 0; |
| text-align: right; |
| } |
| &.log-level { |
| text-transform: uppercase; |
| width: 8em; |
| } |
| &.log-type { |
| color: @link-color; |
| width: 12em; |
| } |
| &.log-path { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| width: 20em; |
| } |
| &.log-message { |
| width: 100%; |
| } |
| &.col-default-fixed { |
| width: 8em; |
| } |
| &.log-event_count { |
| width: 3em !important; |
| } |
| &.col-checkpoint { |
| padding: 0; |
| width: 1px; |
| } |
| } |
| tfoot td { |
| overflow: visible; |
| } |
| } |
| |
| tr.log-date-row, tr.log-date-row:hover { |
| background: @list-header-background-color; |
| border: none transparent; |
| th { |
| border: none transparent; |
| } |
| } |
| tr.log-item-row td { |
| background: none transparent; |
| } |
| |
| table { |
| thead th { |
| text-transform: uppercase; |
| } |
| td { |
| text-overflow: ellipsis; |
| overflow: hidden; |
| word-wrap: break-word; |
| &.log-action { |
| overflow: visible; |
| padding-left: .25em; |
| padding-right: 0; |
| width: 1em; |
| /deep/ .btn, /deep/ .filter-label { |
| font-size: 1em; |
| height: auto; |
| line-height: 1em; |
| padding: 0; |
| } |
| } |
| &.log-time { |
| min-width: 7em; |
| padding-left: 0; |
| text-align: right; |
| } |
| &.log-level { |
| text-transform: uppercase; |
| min-width: 8em; |
| .log-colors; |
| } |
| &.log-type { |
| color: @link-color; |
| } |
| &.log-message { |
| width: 100%; |
| } |
| &.log-event_count { |
| width: 3em; |
| } |
| } |
| } |
| |
| tr:hover td.log-action { |
| /deep/ .btn { |
| display: inline-block; |
| } |
| } |
| |
| .table.table-hover > tbody > tr { |
| box-sizing: border-box; |
| border-width: 1px; |
| > td { |
| border-top: 0 none; |
| } |
| &:first-of-type { |
| border-top-color: transparent; |
| } |
| &:last-of-type { |
| border-bottom-color: transparent; |
| } |
| } |
| |
| .list-layout-warning { |
| align-items: center; |
| color: @warning-color; |
| display: flex; |
| flex: 1; |
| font-size: .7em; |
| i { |
| margin-right: .6em; |
| } |
| } |
| |
| /deep/ .tooltip { |
| font-size: .75em; |
| .tooltip-inner { |
| background-color: rgba(50, 50, 50, 1); |
| } |
| .tooltip-arrow { |
| border-top-color: rgba(50, 50, 50, 1); |
| } |
| } |
| |
| .layout-flex { |
| .log-list { |
| color: @base-font-color; |
| border-bottom: 1px solid @log-list-border-color; |
| font-size: @table-font-size; |
| .log-date-row { |
| background: @list-header-background-color; |
| padding: @log-list-row-data-padding; |
| } |
| .log-row { |
| border: 1px solid transparent; |
| border-bottom: 1px solid @log-list-border-color; |
| display: block; |
| padding-bottom: .5em; |
| transition: all 100ms; |
| &:hover { |
| background: @log-list-row-hover-background-color; |
| border-color: @log-list-row-hover-border-color; |
| > div.log-header .log-action /deep/ .btn { |
| opacity: 1; |
| } |
| } |
| &:first-of-type { |
| border-top-color: transparent; |
| } |
| &:last-of-type { |
| border-bottom-color: transparent; |
| } |
| div { |
| padding: (@log-list-row-data-padding / 2) @log-list-row-data-padding; |
| } |
| > div.log-header, > div.details { |
| padding: 0; |
| } |
| > div.log-header { |
| display: flex; |
| > div { |
| height: 2em; |
| text-overflow: ellipsis; |
| overflow: hidden; |
| } |
| .log-level { |
| align-items: center; |
| display: flex; |
| padding-right: 0; |
| text-transform: uppercase; |
| width: 7em; |
| .log-colors; |
| } |
| .log-type { |
| color: @link-color; |
| } |
| .log-time { |
| flex: 1 0 auto; |
| max-width: none; |
| min-width: 6em; |
| text-align: right; |
| } |
| .log-action { |
| display: flex; |
| justify-content: flex-end; |
| max-width: none; |
| overflow: visible; |
| padding-left: 5px; |
| padding-right: 0; |
| > * { |
| display: inline-block; |
| } |
| /deep/ .btn { |
| opacity: 0; |
| overflow: hidden; |
| transition: opacity 50ms; |
| } |
| /deep/ .btn, /deep/ .filter-label { |
| font-size: 1em; |
| height: auto; |
| line-height: 1em; |
| padding: 0; |
| } |
| } |
| } |
| .log-message { |
| flex: 1 1 auto; |
| max-width: none; |
| overflow: hidden; |
| padding: .25em 0; |
| width: 100%; |
| } |
| .log-path { |
| max-width: none; |
| } |
| label { |
| color: lighten(@base-font-color, 25%); |
| display: block; |
| font-size: .7em; |
| margin: 0; |
| padding: 0; |
| } |
| } |
| &.show-labels > .log-row > div.log-header > div { |
| height: 2.5em; |
| } |
| } |
| } |
| |
| .context-menu { |
| position: fixed; |
| } |
| |
| } |
