| /* |
| 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. |
| */ |
| |
| #root { |
| height: 100vh; |
| } |
| .pf-c-check__input { |
| --pf-c-check__input--MarginTop: 0.5em; |
| } |
| |
| .App { |
| text-align: center; |
| height: 100%; |
| } |
| |
| .pf-c-avatar { |
| --pf-c-avatar--Width: initial !important; |
| } |
| |
| .topo-middle { |
| margin: auto; |
| } |
| |
| .topo-name { |
| padding-top: 30px; |
| padding-bottom: 30px; |
| } |
| |
| .force-graph { |
| min-height: 480px; |
| height: 800px; |
| } |
| |
| .node.interior path { |
| fill: green; |
| stroke-width: 1; |
| stroke: green; |
| } |
| |
| .node circle { |
| fill: #fff; |
| stroke: #000; |
| stroke-width: 2px; |
| } |
| |
| .node.selected circle, |
| .node.edgeClass.selected circle { |
| stroke-width: 4px; |
| stroke: green; |
| fill: #eaeaea; |
| } |
| |
| .node text { |
| fill: #000; |
| stroke: none; |
| font-size: 0.8em; |
| } |
| |
| g.over line { |
| stroke: #000; |
| stroke-width: 4; |
| } |
| |
| g.selected line { |
| stroke: green; |
| stroke-width: 4; |
| } |
| |
| .link { |
| stroke: #000; |
| } |
| .link.dropped { |
| stroke: #888888; |
| opacity: 0.25; |
| } |
| .topology-header path.link { |
| stroke: #fff; |
| } |
| .topology-header ul.context-menu.layout-dropdown { |
| right: 0; |
| } |
| |
| #topologyPage, |
| #messageFlowPage { |
| padding: 0; |
| } |
| |
| #topologyPage .pf-l-stack__item, |
| #messageFlowPage .pf-l-stack__item { |
| border-bottom: 1px solid #aaa; |
| } |
| .node.client rect { |
| stroke: black; |
| fill: white; |
| } |
| |
| .node.edgeClass circle { |
| stroke: black; |
| fill: white; |
| stroke-width: 2; |
| stroke-dasharray: 4; |
| } |
| |
| .tag-line { |
| font-size: 0.8em; |
| color: #888888; |
| } |
| |
| .deployment-donut.table-cell button { |
| padding-top: 0; |
| padding-bottom: 0; |
| } |
| |
| .deployment-donut.table-cell .scaling-controls { |
| font-size: 14px; |
| } |
| |
| .address-table-container { |
| width: 31em; |
| } |
| |
| .no-addresses { |
| margin-top: 1em; |
| } |
| |
| .form-sub-group { |
| margin-left: 3em; |
| } |
| |
| .sm-input { |
| width: 6em !important; |
| } |
| |
| .incdec-label { |
| padding-left: 1em; |
| } |
| |
| .incdec-label.disabled { |
| color: #555555; |
| } |
| |
| .messages-receivers { |
| display: none !important; |
| } |
| |
| .topology-header line { |
| stroke: white; |
| } |
| |
| .network-name { |
| width: 48em; |
| margin: auto !important; |
| } |
| |
| .not-editing-cancel { |
| display: none !important; |
| } |
| |
| .not-editing { |
| border: 0 0 1px 0 !important; |
| } |
| |
| path.cloud-outline { |
| stroke-width: 3px; |
| stroke: #ccc; |
| fill: white; |
| } |
| .cluster.selected path.cloud-outline { |
| stroke-width: 4px; |
| stroke: #cfc; |
| fill: #fcfcfc; |
| } |
| |
| .network-toolbar { |
| padding-bottom: 1em; |
| border-bottom: 1px solid #cccccc; |
| } |
| |
| .context-form { |
| text-align: left; |
| min-width: 34em; |
| padding-left: 2em; |
| margin-right: 0; |
| border-left: 1px solid lightgray; |
| } |
| |
| .context-form .pf-c-form__group.pf-m-action { |
| margin-top: 0; |
| } |
| |
| .enter-prompt { |
| padding-top: 0.25em; |
| } |
| |
| table.edge-table td[data-label="State"] svg { |
| position: relative; |
| top: 10px; |
| } |
| |
| .edge-table-actions { |
| position: absolute; |
| right: 1em; |
| } |
| |
| .empty-selection { |
| max-width: 30em; |
| } |
| |
| .link-label { |
| margin-left: 1em; |
| font-weight: bold; |
| } |
| |
| .logo-text { |
| text-decoration: none; |
| color: white; |
| font-weight: bold; |
| letter-spacing: 0.2em; |
| font-size: 18px; |
| } |
| |
| .state-copy input { |
| display: none; |
| } |
| |
| .state-copy { |
| display: inline-block; |
| } |
| .state-container svg { |
| position: relative; |
| top: 0.5em; |
| } |
| |
| .state-placeholder { |
| width: 16px; |
| height: 24px; |
| display: inline-block; |
| } |
| |
| .state-text { |
| display: inline-block; |
| } |
| |
| div.state-container button.pf-c-clipboard-copy__group-copy { |
| display: inline-block; |
| padding: 0; |
| margin: 0; |
| position: relative; |
| top: -0.5em; |
| } |
| |
| .pf-c-clipboard-copy__group input { |
| border: 0; |
| } |
| |
| .pf-c-clipboard-copy { |
| --pf-c-clipboard-copy__group-copy--PaddingRight: 0; |
| --pf-c-clipboard-copy__group-copy--PaddingLeft: 0; |
| --pf-c-clipboard-copy__group-copy--BorderWidth: 0; |
| } |
| |
| .over-alert { |
| position: absolute; |
| width: 95%; |
| z-index: 1; |
| } |
| |
| .force-right { |
| position: absolute; |
| right: 1em; |
| } |
| |
| .connect-modal { |
| width: 40em !important; |
| position: absolute !important; |
| right: 0; |
| top: 4.5em; |
| padding: 2em; |
| background-color: #fafafa; |
| border: 1px solid #d1d1d1; |
| box-shadow: 0 6px 12px rgba(3, 3, 3, 0.175); |
| z-index: 2; |
| } |
| |
| .connect-modal * { |
| color: black !important; |
| } |
| |
| .connect-modal .pf-m-primary { |
| background-color: #06c !important; |
| color: white !important; |
| } |
| |
| .qdr-sidebar { |
| text-align: left; |
| height: 100vh; |
| } |
| |
| .connect-page { |
| background-image: url(/assets/images/pfbg_1200.jpg); |
| background-size: cover; |
| } |
| |
| .connect-page * { |
| color: white; |
| } |
| |
| .connect-page p { |
| margin-top: 4em; |
| } |
| .left-content { |
| width: 60%; |
| padding: 6em; |
| text-align: left; |
| } |
| |
| .console-banner { |
| text-transform: uppercase; |
| letter-spacing: 0.3em; |
| } |
| |
| .pf-c-content h2.connect-description { |
| font-size: 16px; |
| margin-top: 2em; |
| margin-bottom: 0; |
| padding: 0; |
| } |
| |
| .overview-title::first-letter { |
| text-transform: uppercase; |
| } |
| |
| .overview-charts-page { |
| background-color: #eaeaea !important; |
| padding: 1.5em; |
| } |
| |
| .overview-table { |
| height: 100%; |
| background-color: #eaeaea; |
| } |
| .overview-table .pf-c-card__body { |
| padding-left: 1em; |
| } |
| .overview-table-page { |
| padding-left: 0 !important; |
| padding-right: 0 !important; |
| } |
| .overview-header { |
| padding: 2em; |
| text-align: left; |
| border-bottom: 1px solid #eaeaea; |
| } |
| .overview-header.details { |
| padding: 1em 2em; |
| } |
| .overview-header.details .pf-c-breadcrumb__item { |
| font-size: 1.125em; |
| margin-bottom: 1em; |
| } |
| |
| /* |
| #delayedDeliveries { |
| width: 80%; |
| } |
| */ |
| #activeAddresses { |
| min-width: 28%; |
| } |
| |
| .qdrTopology, |
| .qdrChord { |
| width: 100%; |
| height: 100%; |
| background-color: white; |
| } |
| .qdrTopology dl.pf-c-accordion, |
| .qdrChord dl.pf-c-accordion { |
| padding-top: 0; |
| padding-bottom: 0; |
| margin-top: 1em; |
| } |
| |
| .qdrTopology dl.pf-c-accordion *, |
| .qdrChord dl.pf-c-accordion * { |
| border-left-color: transparent; |
| } |
| |
| .qdrTopology dl.pf-c-accordion dt, |
| .qdrChord dl.pf-c-accordion dt { |
| background-image: linear-gradient(to bottom, #fafafa 0, #ededed 100%); |
| background-repeat: repeat-x; |
| } |
| |
| .qdrTopology dl.pf-c-accordion h3, |
| .qdrChord dl.pf-c-accordion h3 { |
| margin-top: 0; |
| margin-bottom: 0; |
| } |
| |
| .pf-c-page { |
| background-color: white !important; |
| } |
| .topology-header { |
| background-color: #0e0e0e; |
| } |
| |
| g text { |
| pointer-events: none; |
| } |
| |
| svg.address-svg g text { |
| cursor: pointer; |
| pointer-events: auto; |
| } |
| |
| svg { |
| background-color: transparent; |
| cursor: default; |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| -o-user-select: none; |
| user-select: none; |
| } |
| |
| svg:not(.active):not(.ctrl) { |
| cursor: crosshair; |
| } |
| |
| svg.address-svg { |
| cursor: pointer; |
| } |
| svg.address-svg { |
| margin-left: 1.5em; |
| } |
| .qdrChord svg.address-svg { |
| margin-left: 0; |
| } |
| |
| path.link.selected:not(.traffic) { |
| /* stroke-dasharray: 10,2; */ |
| stroke: #33f !important; |
| } |
| |
| path.link { |
| fill: #000; |
| /* stroke: #000; */ |
| stroke-width: 2.5px; |
| cursor: default; |
| } |
| |
| path.link.unknown { |
| stroke-dasharray: 4 3; |
| stroke: #888888; |
| } |
| path:not(.traffic) { |
| stroke: #000; |
| } |
| svg:not(.active):not(.ctrl) path.link { |
| cursor: pointer; |
| } |
| |
| path.hittarget { |
| stroke-width: 15px; |
| stroke: transparent; |
| } |
| path.hittarget.highlighted { |
| stroke: #6f6; |
| opacity: 0.5; |
| } |
| |
| path.link.small { |
| stroke-width: 2.5; |
| } |
| path.link.small:not(.traffic) { |
| stroke: #000; |
| } |
| path.link.highlighted:not(.traffic) { |
| stroke: #6f6 !important; |
| } |
| marker { |
| fill: #000; |
| stroke-width: 0; |
| } |
| path.link.dragline { |
| pointer-events: none; |
| } |
| |
| path.link.hidden { |
| stroke-width: 0; |
| } |
| |
| circle.node { |
| stroke-width: 1.5px; |
| cursor: pointer; |
| stroke: darkgray; |
| } |
| |
| circle.node.reflexive { |
| stroke: #f00 !important; |
| stroke-width: 2.5px; |
| } |
| circle.node.selected { |
| stroke: #6f6 !important; |
| stroke-width: 2px; |
| } |
| circle.node.highlighted { |
| stroke: #6f6; |
| } |
| circle.node.inter-router { |
| fill: #eaeaea; |
| } |
| circle.node.normal.in { |
| fill: #f0f000; |
| } |
| circle.node.normal.out { |
| fill: #c0f0c0; |
| } |
| circle.node.edge { |
| fill: #efefff; |
| } |
| circle.node.on-demand { |
| fill: #c0ffc0; |
| } |
| circle.node.on-demand.artemis { |
| fill: #fcc; |
| /*opacity: 0.2; */ |
| } |
| circle.node.normal.console { |
| fill: lightcyan; |
| } |
| circle.node.artemis { |
| fill: lightgreen; |
| } |
| circle.node.route-container { |
| fill: orange; |
| } |
| circle.node.edge.multiple { |
| fill: #e0e0ff; |
| } |
| circle.node.dropped, |
| circle.node.normal.in.dropped, |
| circle.node.normal.out.dropped { |
| fill: #f0f0f0; |
| stroke: #dddddd; |
| stroke-dasharray: 5 5; |
| } |
| circle.node.inter-router.dropped { |
| fill: #f0f0f0; |
| } |
| |
| circle.node.dropped + text { |
| stroke: #dddddd; |
| } |
| text.console, |
| text.on-demand, |
| text.normal, |
| text.address-checkbox { |
| font-family: FontAwesome !important; |
| font-weight: normal; |
| font-size: 16px; |
| } |
| |
| text.address-checkbox { |
| fill: white; |
| cursor: pointer; |
| } |
| text.id { |
| text-anchor: middle; |
| font-weight: bold; |
| } |
| |
| text.label { |
| text-anchor: middle; |
| font-weight: bold; |
| } |
| |
| text.label.long { |
| text-anchor: start; |
| } |
| |
| @font-face { |
| font-family: "Brokers"; |
| src: url("./assets/brokers.ttf"); /* TTF file for CSS3 browsers */ |
| } |
| |
| text.artemis { |
| font-family: Brokers; |
| font-size: 20px; |
| font-weight: bold; |
| } |
| |
| text.qpid-cpp { |
| font-family: Brokers; |
| font-size: 18px; |
| font-weight: bold; |
| } |
| |
| svg#svglegend { |
| max-width: 280px; |
| } |
| #svglegend text.label { |
| text-anchor: start; |
| font-weight: normal; |
| } |
| #legend-expand, |
| #traffic-expand, |
| #map-expand, |
| #arrows-expand { |
| max-height: 23em; |
| } |
| |
| #arrows-expand { |
| padding-bottom: 1em; |
| } |
| div.qdrTopology, |
| div.qdrChord { |
| text-align: center; |
| } |
| |
| #traffic-congestion-svg text { |
| text-anchor: start; |
| } |
| #arrows-expand label, |
| #traffic-dots label, |
| #traffic-congestion label, |
| #options-expand label, |
| #map-expand label { |
| position: relative; |
| top: 4px; |
| padding-left: 0.25em; |
| } |
| |
| #map-expand .map-legend { |
| margin-left: 1.5em; |
| margin-top: 0.5em; |
| } |
| #arrows-expand .pf-c-check { |
| padding-top: 0.5em; |
| } |
| .map-legend label { |
| padding-left: 1em; |
| } |
| |
| #traffic-address .pf-c-check { |
| padding-bottom: 0.5em; |
| } |
| |
| .popup-info table.popupTable td { |
| font-size: 14px; |
| } |
| |
| circle.flow { |
| pointer-events: none; |
| } |
| /* for message flow chord diagram */ |
| path.chord { |
| fill-opacity: 0.67; |
| } |
| #circle circle { |
| fill: none; |
| pointer-events: all; |
| } |
| path.fade { |
| opacity: 0.1; |
| } |
| |
| .routers rect { |
| fill: white; |
| } |
| |
| g.arc text { |
| fill: black; |
| stroke-width: 0; |
| } |
| |
| path.empty { |
| fill: rgb(31, 119, 180); |
| fill-opacity: 0.67; |
| } |
| |
| .addresses .btn { |
| padding: 0px 4px !important; |
| background-image: none; |
| box-shadow: 0 0 0; |
| border-color: black; |
| } |
| |
| .topology-toolbar-item .pf-c-popover__content > button, |
| .topology-toolbar-item .pf-c-popover__content .pf-c-title.pf-m-xl { |
| display: none; |
| } |
| |
| .topology-toolbar-item .pf-c-popover__content { |
| padding: 2em 2em 0.5em; |
| } |
| .qdrPopup { |
| position: absolute; |
| z-index: 200; |
| border-radius: 4px; |
| border: 1px solid gray; |
| background-color: white; |
| color: black; |
| opacity: 1; |
| padding: 12px; |
| font-size: 14px; |
| display: none; |
| } |
| |
| #popover-div { |
| position: fixed; |
| z-index: 200; |
| border-radius: 4px; |
| border: 1px solid gray; |
| background-color: white; |
| color: black; |
| opacity: 1; |
| padding: 12px; |
| font-size: 16px; |
| box-shadow: var(--pf-global--BoxShadow--md); |
| } |
| |
| #popover-div h5 { |
| background-color: #eaeaea; |
| padding: 0.25em 0.125em; |
| } |
| |
| table.popupTable td { |
| padding-right: 5px; |
| font-size: 10px; |
| } |
| |
| table.popupTable tr.header { |
| font-weight: bold; |
| } |
| #chord { |
| height: 100%; |
| } |
| |
| #chord text { |
| pointer-events: all; |
| } |
| |
| #noTraffic { |
| position: relative; |
| top: 3em; |
| } |
| |
| .page-menu { |
| position: absolute; |
| right: 1em; |
| top: 1em; |
| left: auto; |
| width: auto; |
| } |
| |
| ul.pf-c-nav__list * { |
| text-align: left; |
| } |
| |
| @media (max-width: 768px) { |
| .navbar-collapse.page-menu { |
| left: 0; |
| top: 0; |
| right: auto; |
| } |
| } |
| |
| .navbar-collapse { |
| padding-right: 0; |
| } |
| |
| .panel-group { |
| margin-bottom: 0; |
| } |
| |
| span.legend-color { |
| width: 20px; |
| height: 20px; |
| display: inline-block; |
| margin-right: 0.5em; |
| } |
| |
| span.legend-router { |
| white-space: nowrap; |
| position: relative; |
| top: -5px; |
| } |
| |
| div.qdrChord .legend-text { |
| color: black; |
| font-size: 16px; |
| } |
| |
| .qdrChord .legend { |
| position: absolute; |
| right: 1em; |
| } |
| .legend ul { |
| margin-bottom: 0; |
| } |
| |
| .colored-dot { |
| display: inline-block; |
| margin-bottom: 4px; |
| } |
| |
| .colored-dot span.colored-dot-dot { |
| width: 24px; |
| height: 24px; |
| border: 1px solid black; |
| border-radius: 12px; |
| display: inline-block; |
| color: white; |
| padding-left: 4px; |
| font-weight: bold; |
| } |
| |
| /* |
| .colored-dot span.colored-dot-dot > span { |
| padding-top: 5px; |
| } |
| */ |
| |
| .colored-dot span.colored-dot-text { |
| margin-left: 0.5em; |
| color: black; |
| font-size: 16px; |
| } |
| |
| .qdrTopology .addresses .legend-line, |
| #traffic-congestion-svg { |
| margin-left: 1.5em; |
| } |
| |
| @media (min-width: 768px) { |
| div.qdrTopology .pf-topology-side-bar.shown { |
| width: calc(100% - 330px); |
| max-width: 330px; |
| } |
| div.qdrTopology .pf-topology-container__with-sidebar .pf-topology-content { |
| width: 100%; |
| height: 100%; |
| background-color: white; |
| } |
| } |
| |
| .diagram { |
| width: 100%; |
| position: absolute; |
| top: 0; |
| height: 100%; |
| } |
| |
| .context-menu { |
| position: fixed; |
| background-color: white; |
| border-top: 1px solid #888; |
| border-left: 1px solid #888; |
| border-right: 1px solid #888; |
| text-align: left; |
| box-shadow: rgba(3, 3, 3, 0.05) 0px 1px 1px 0px, rgba(3, 3, 3, 0.06) 0px 4px 8px 4px; |
| } |
| |
| .context-menu.layout-dropdown li { |
| color: black; |
| } |
| |
| .context-menu .menu-item { |
| padding: 0.25em 1em; |
| } |
| .context-menu .menu-item.separator { |
| border-bottom: 1px solid #888; |
| } |
| |
| .context-menu .menu-item:hover { |
| background-color: #eaeaea; |
| cursor: default; |
| } |
| |
| .context-menu .menu-item.disabled { |
| color: #777; |
| } |
| |
| .context-menu .menu-item.disabled:hover { |
| background-color: white; |
| } |
| |
| .overview-charts-page .pf-c-card__header.pf-c-title { |
| font-size: 22px; |
| } |
| |
| .dashboard-header { |
| display: flex; |
| } |
| .overview-charts-page div.time-period { |
| font-size: 18px; |
| color: #888; |
| text-align: left; |
| } |
| |
| .chart-container { |
| display: flex; |
| } |
| |
| .dashboard-chart { |
| flex-grow: 1; |
| padding: 1em 2em 1em 0; |
| } |
| |
| .dashboard-stat { |
| width: 10em; |
| margin-top: auto; |
| text-align: left; |
| margin-right: 2em; |
| padding: 1em 1em 1em 0; |
| } |
| |
| .deliveries-stat { |
| font-size: 30px; |
| } |
| |
| .deliveries-title { |
| /* white-space: nowrap; */ |
| font-size: 20px; |
| color: #888; |
| min-width: 9em; |
| } |
| |
| .duration-tabs { |
| margin-left: auto; |
| } |
| |
| .duration-tabs li { |
| font-weight: bold; |
| padding-bottom: 0.25em; |
| } |
| |
| .duration-tabs li.selected { |
| border-bottom: 4px solid #0066cc; |
| color: #0066cc; |
| } |
| |
| .overview-charts-page .pf-c-table caption { |
| border-bottom: 1px solid #eaeaea; |
| } |
| .overview-charts-page .pf-c-table caption .caption { |
| display: inline-block; |
| font-size: 22px; |
| color: black; |
| } |
| |
| .overview-charts-page .pf-c-table caption .updated { |
| font-size: 18px; |
| color: #888; |
| white-space: nowrap; |
| padding-right: 2em; |
| max-width: 12em; |
| min-width: 12em; |
| } |
| |
| .toolbar-pagination { |
| margin-left: auto; |
| } |
| |
| .overview-table .pf-m-footer { |
| padding-right: 2em; |
| } |
| |
| .table-toolbar .pf-l-toolbar__item { |
| margin-right: 0 !important; |
| } |
| |
| .overview-header .pf-c-content { |
| display: flex; |
| } |
| |
| .overview-loading { |
| margin-left: auto; |
| color: #999; |
| border: 0; |
| font-size: 14px; |
| padding: 0; |
| background-color: white; |
| overflow: hidden; |
| } |
| |
| .pf-c-button.pf-m-primary.link-button, |
| .overview-header.details .pf-c-breadcrumb__item.link-button { |
| border: 0; |
| background-color: transparent; |
| color: #0066cc; |
| font-weight: bold; |
| white-space: nowrap; |
| padding-left: 0; |
| } |
| |
| .pf-c-button.pf-m-primary.link-button:hover, |
| .overview-header.details .pf-c-breadcrumb__item.link-button:hover { |
| text-decoration: underline; |
| } |
| .pf-c-button.pf-m-link.link-button:hover { |
| text-decoration: underline; |
| } |
| .noWrap { |
| white-space: nowrap; |
| } |
| |
| .link-dir-in, |
| .link-dir-out { |
| padding-right: 0.5em; |
| font-size: 16px; |
| } |
| .link-dir-in { |
| color: red; |
| } |
| |
| .link-dir-out { |
| color: #0066cc; |
| } |
| |
| .overview-table tr { |
| border-bottom-color: #eaeaea !important; |
| } |
| |
| .log-record { |
| display: flex; |
| flex-wrap: wrap; |
| flex-direction: column; |
| align-items: flex-start; |
| } |
| |
| .log-message { |
| background-color: #eaeaea; |
| width: 100%; |
| } |
| |
| div#topologyLegend { |
| position: absolute; |
| bottom: 2em; |
| right: 1em; |
| padding: 0; |
| width: 14em; |
| } |
| |
| div#topologyLegend header { |
| padding: 0.5em 1em; |
| background-color: #efefef; |
| display: flex; |
| justify-content: space-between; |
| } |
| |
| div#topologyLegend .pf-c-modal-box__body { |
| padding: 1em; |
| } |
| |
| div#topologyLegend .pf-c-title { |
| font-size: unset; |
| padding-top: 0.25em; |
| } |
| |
| div.qdrTopology .topology-toolbar-button { |
| position: relative; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| color: black; |
| |
| background-color: rgba(0, 0, 0, 0); |
| border: 1px solid #eaeaea; |
| border-bottom: 1px solid #212121; |
| } |
| |
| div.qdrTopology .topology-toolbar-button i { |
| margin-left: 16px; |
| margin-right: 8px; |
| } |
| |
| .topology-toolbar-item .pf-c-popover__content { |
| padding-bottom: 1em; |
| } |
| |
| /* entities/details pages */ |
| .details-table-page { |
| padding-left: 0 !important; |
| } |
| |
| div.details-table ul.entities-list { |
| list-style: none; |
| text-align: left; |
| padding-left: 0; |
| border-right: 1px solid #eaeaea; |
| overflow-y: auto; |
| max-height: 100%; |
| } |
| |
| .entities-list li { |
| padding: 0.25em 2em; |
| border-left: 2px solid white; |
| margin-top: 8px; |
| } |
| .entities-list li:hover { |
| background-color: #eaeaea; |
| } |
| |
| .entities-list li.selected { |
| border-left: 2px solid #0066cc; |
| background-color: #eaeaea; |
| } |
| |
| /* |
| #entityList { |
| max-height: calc(100vh - 140px); |
| padding-top: 0.5em; |
| } |
| */ |
| |
| .split-left { |
| text-align: left; |
| padding-left: 2em; |
| padding-bottom: 0.5em; |
| } |
| |
| .prompt { |
| font-weight: bold; |
| } |
| span.entity-type i { |
| padding-right: 1em; |
| font-style: normal; |
| font-family: FontAwesome; |
| } |
| span.entity-type i.address-local:before { |
| content: "\f0ac"; |
| } |
| span.entity-type i.address-mobile:before { |
| content: "\f109"; |
| } |
| span.entity-type i.address-router:before { |
| content: "\f047"; |
| } |
| span.entity-type i.address-topo:before { |
| content: "\f126"; |
| } |
| |
| span.entity-type i.link-type-endpoint:before { |
| content: "\f109"; |
| } |
| span.entity-type i.link-type-inter-router:before { |
| content: "\f07e"; |
| } |
| span.entity-type i.link-type-router-control:before { |
| content: "\f013"; |
| } |
| |
| .details-table .pf-l-toolbar { |
| margin: 0 !important; |
| padding: 1em 1em; |
| border-bottom: 1px solid #eaeaea; |
| } |
| |
| .details-table table { |
| margin-left: 0.25em; |
| } |
| .details-header { |
| border-bottom: 1px solid #eaeaea; |
| } |
| |
| #NotificationDrawer { |
| position: absolute; |
| top: 4.8em; |
| color: black; |
| right: 0em; |
| max-height: calc(100vh - 80px); |
| } |
| |
| .drawer-pf-title { |
| display: flex; |
| border: 1px solid lightgray; |
| background-color: #f3f3f3; |
| height: 2em; |
| justify-content: space-between; |
| position: unset; |
| } |
| |
| #NotificationDrawer.compact { |
| transition: width 0.25s ease; |
| width: 20em; |
| } |
| |
| #NotificationDrawer.expanded { |
| transition: width 0.25s ease; |
| width: 50em; |
| } |
| |
| .drawer-pf-title h3 { |
| margin: 0.5em 0; |
| } |
| |
| .drawer-pf-title svg { |
| fill: #333333; |
| } |
| |
| .notification-button dl.pf-c-accordion { |
| padding-top: 0; |
| padding-bottom: 0; |
| } |
| |
| .notification-button dl.pf-c-accordion * { |
| border-left-color: transparent; |
| } |
| |
| .notification-button dl.pf-c-accordion dt { |
| background-image: linear-gradient(to bottom, #fafafa 0, #ededed 100%); |
| background-repeat: repeat-x; |
| } |
| |
| .notification-button dl.pf-c-accordion h3 { |
| margin-top: 0; |
| margin-bottom: 0; |
| } |
| |
| .notification-button button.pf-c-accordion__toggle span { |
| font-weight: normal; |
| display: block; |
| font-size: 14px; |
| line-height: normal; |
| } |
| |
| .notification-button button.pf-c-accordion__toggle { |
| display: flex; |
| } |
| |
| .notification-button .pf-c-accordion__toggle svg { |
| position: absolute; |
| left: 0.5em; |
| } |
| |
| .notification-button button.pf-c-accordion__toggle { |
| text-align: center; |
| } |
| |
| .notification-button .pf-c-accordion__toggle-text { |
| margin: auto; |
| } |
| |
| .drawer-pf-notification { |
| display: flex; |
| justify-content: space-between; |
| } |
| |
| .drawer-pf-notification-info, |
| .drawer-pf-notification-message { |
| padding-left: 0; |
| padding-right: 0; |
| } |
| |
| .drawer-pf-notification-content { |
| display: flex; |
| flex-direction: column; |
| margin: auto; |
| } |
| |
| #NotificationDrawer .pf-c-accordion__expanded-content-body { |
| padding: 0; |
| } |
| |
| #NotificationDrawer .drawer-pf-action-link { |
| border-left: 1px solid #d1d1d1; |
| } |
| |
| #NotificationDrawer button.pf-m-expanded, |
| #NotificationDrawer dd.pf-m-expanded { |
| border-left-color: #0066cc; |
| } |
| |
| #NotificationDrawer .panel-body { |
| padding-left: 0; |
| } |
| |
| #NotificationDrawer .drawer-pf-notification { |
| padding-left: 15px; |
| font-size: 16px; |
| } |
| |
| #NotificationDrawer .drawer-pf-notification.unread { |
| font-weight: bold; |
| color: black; |
| } |
| |
| .details-table-header { |
| display: flex; |
| justify-content: space-between; |
| } |
| |
| .detail-action-button { |
| margin-right: 1em; |
| } |
| |
| #update-form .pf-c-form__helper-text { |
| text-align: left; |
| } |
| |
| #alert-list-container { |
| position: absolute; |
| right: 6em; |
| top: 3em; |
| } |
| |
| /* login form */ |
| .spinning-clockwise { |
| -webkit-animation: spinc 4s linear infinite; |
| -moz-animation: spinc 4s linear infinite; |
| animation: spinc 4s linear infinite; |
| } |
| @-moz-keyframes spinc { |
| 100% { |
| -moz-transform: rotate(360deg); |
| } |
| } |
| @-webkit-keyframes spinc { |
| 100% { |
| -webkit-transform: rotate(360deg); |
| } |
| } |
| @keyframes spinc { |
| 100% { |
| -webkit-transform: rotate(360deg); |
| transform: rotate(360deg); |
| } |
| } |
| .spinning-cclockwise { |
| -webkit-animation: spincc 4s linear infinite; |
| -moz-animation: spincc 4s linear infinite; |
| animation: spincc 4s linear infinite; |
| } |
| @-moz-keyframes spincc { |
| 100% { |
| -moz-transform: rotate(-360deg); |
| } |
| } |
| @-webkit-keyframes spincc { |
| 100% { |
| -webkit-transform: rotate(-360deg); |
| } |
| } |
| @keyframes spincc { |
| 100% { |
| -webkit-transform: rotate(-360deg); |
| transform: rotate(-360deg); |
| } |
| } |
| |
| .alert-in { |
| animation: fadeIn 0.25s linear; |
| } |
| .alert-out { |
| animation: fadeOut 1s linear; |
| } |
| @keyframes fadeIn { |
| 0% { |
| opacity: 0; |
| } |
| |
| 100% { |
| opacity: 1; |
| } |
| } |
| @keyframes fadeOut { |
| 0% { |
| opacity: 1; |
| } |
| |
| 100% { |
| opacity: 0; |
| } |
| } |
| |
| #topicCogWrapper { |
| position: relative; |
| margin: auto; |
| width: 5.5em; |
| height: 5em; |
| } |
| #topicCogMain { |
| width: 4em; |
| height: 4em; |
| position: absolute; |
| top: 0.5em; |
| left: 0; |
| } |
| |
| #topicCogUpper { |
| position: absolute; |
| top: 0; |
| right: 0; |
| width: 2em; |
| height: 2em; |
| } |
| #topicCogLower { |
| position: absolute; |
| bottom: 0; |
| right: 0; |
| width: 2em; |
| height: 2em; |
| } |
| |
| .topic-creating-wrapper { |
| text-align: center; |
| position: absolute; |
| top: 10em; |
| right: 10em; |
| } |
| |
| .topic-creating-message { |
| margin-top: 2em; |
| } |
| |
| div.connecting { |
| opacity: 0; |
| } |
| |
| .connect-error p { |
| color: red !important; |
| } |
| |
| /* schema page */ |
| |
| .list-group-item-heading { |
| text-align: left; |
| } |
| |
| .list-group-item-text { |
| text-align: left; |
| } |
| |
| .list-view-pf-description { |
| display: block; |
| } |
| |
| .list-group-item-fqt { |
| font-weight: bold; |
| font-size: 14px; |
| } |
| |
| #schema-page .pficon.list-view-pf-icon-sm { |
| border: 0; |
| } |
| |
| /* other */ |
| .options-panel { |
| min-width: 8.7em; |
| max-width: 25em; |
| padding: 0.5em 1em 0.25em; |
| text-align: left; |
| margin-top: 0.5em; |
| } |
| |
| .chord-addresses { |
| text-align: left; |
| } |
| |
| .chord-addresses ul { |
| margin-top: 0.5em; |
| } |
| |
| .qdrTopology .pf-c-accordion__expanded-content-body { |
| position: absolute; |
| z-index: 100; |
| background: white; |
| padding: 0; |
| } |
| |
| .pf-c-accordion__expanded-content.pf-m-expanded { |
| --pf-c-accordion__expanded-content--BorderLeftColor: white !important; |
| } |
| |
| button.dropdown-panel-toggle.pf-c-accordion__toggle { |
| padding: 0.5em 1em; |
| } |
| |
| button.dropdown-panel-toggle.pf-c-accordion__toggle span.pf-c-accordion__toggle-text { |
| max-width: 10em; |
| padding-right: 1em; |
| } |
| |
| .qdrTopology dl.pf-c-accordion dt { |
| background-image: none; |
| } |
| |
| #NotificationDrawer .pf-c-accordion__expanded-content.pf-m-fixed { |
| max-height: none; |
| } |
| |
| .dropdown-panel-accordion.pf-c-accordion { |
| box-shadow: none; |
| border: 1px solid #eaeaea; |
| border-bottom: 1px solid black; |
| } |
| |
| .pf-c-modal-box.pf-m-sm *:not(.fas) { |
| font-family: RedHatDisplay; |
| } |
| |
| .form-error { |
| color: red; |
| } |
| |
| #emptyResults { |
| height: auto; |
| } |
| |
| .node-name-underline { |
| stroke: black; |
| stroke-width: 0.8px; |
| } |
| |
| .node-name { |
| text-decoration: underline; |
| } |
| |
| .menu-item-icon { |
| padding-right: 0.5em; |
| } |