/* * * Copyright 2016 RIFT.IO Inc * * Licensed 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 "./vendor/css-reset-2.0/css-reset.css";*/ .has-drop-shadow { box-shadow: 2px 2px rgba(0, 0, 0, .15) } em.circle { border: 1px solid #333; border-radius: 50%; display: inline-block; padding: 0 .225rem } @font-face { font-family: roboto-regular; src: url(./fonts/Roboto-Regular-webfont.eot); src: url(./fonts/Roboto-Regular-webfont.eot?#iefix) format('embedded-opentype'), url(./fonts/Roboto-Regular-webfont.woff) format('woff'), url(./fonts/Roboto-Regular-webfont.ttf) format('truetype'), url(./fonts/Roboto-Regular-webfont.svg#robotoregular) format('svg') } @font-face { font-family: roboto-condensed-bold; src: url(./fonts/RobotoCondensed-Bold-webfont.eot); src: url(./fonts/RobotoCondensed-Bold-webfont.eot?#iefix) format('embedded-opentype'), url(./fonts/RobotoCondensed-Bold-webfont.woff) format('woff'), url(./fonts/RobotoCondensed-Bold-webfont.ttf) format('truetype'), url(./fonts/RobotoCondensed-Bold-webfont.svg#roboto_condensedbold) format('svg') } @font-face { font-family: roboto-light; src: url(./fonts/Roboto-Light-webfont.ttf) } body { font-family: roboto-regular, Helvetica, Arial, sans-serif; line-height: 1.2 } h1 { font-size: 1.625rem; font-weight: 400 } h2 { font-size: 1.375rem } em.large { font-size: 1.75rem } .all-caps { font-weight: 700; text-transform: uppercase } .small-caps { font-size: .6875rem; font-weight: 700; text-transform: uppercase } .unit { font-size: .5625rem; font-weight: 700; text-transform: uppercase } .label { font-size: .625rem; font-weight: 700; text-transform: uppercase } body { background: #f1f1f1; margin: 0; padding: 0 } .flex-row { display: flex; flex-direction: row } .flex-center { align-items: center; display: flex; justify-content: center } .header-app { background-color: #f1f1f1; height: 91px; padding: 20px 0; position: relative } .header-app h1 { /*background: url(./img/header-logo.png) no-repeat left center;*/ background: url(./img/svg/osm-logo_color_rgb.svg) no-repeat left center; height: 51px; line-height: 51px; margin-left: 80px; padding-left: 118px; position: absolute; left: 0; text-transform: uppercase } .header-app nav.launchpad-nav { box-sizing: border-box; height: 28px; line-height: 28px; position: absolute; right: 80px; top: 32px } .header-app nav.launchpad-nav:before, .header-app nav.launchpad-nav:after { content: " "; display: block } .header-app nav.launchpad-nav:after { clear: both } .header-app nav.launchpad-nav a { border-left: 1px solid #e5e5e5; display: block; float: left; height: 28px; margin-left: 20px; padding-left: 20px; color:black; text-decoration:none; } .header-app nav.launchpad-nav h4 { display: inline-block; font-size: 11px; margin-right: 8px; text-transform: uppercase } .header-app nav.launchpad-nav img { width: 28px } .header-app nav.viewport-nav { position: absolute; right: 0 } .header-app nav.viewport-nav a { text-decoration: none } .header-app nav.viewport-nav h2 { color: #30baef; font-size: 100%; height: 54px; line-height: 54px; margin-right: 24px; padding-right: 55px; text-transform: uppercase } .header-app nav.viewport-nav.top h2 { background: url(./img/viewport-nav-top.png) no-repeat right center } .header-app nav.viewport-nav.right h2 { background: url(./img/viewport-nav-right.png) no-repeat right center } .header-app nav.viewport-nav.bottom h2 { background: url(./img/viewport-nav-bottom.png) no-repeat right center } .header-app nav.viewport-nav.left h2 { background: url(./img/viewport-nav-left.png) no-repeat right center } .header-app nav.viewport-nav.center h2 { background: url(./img/viewport-nav-center.png) no-repeat right center } .app-body { margin-bottom: 12px } .app-body:before, .app-body:after { content: " "; display: block } .app-body:after { clear: both } .has-corner-accents { position: relative } .corner-accent { border: 1px solid #000; display: block; height: 4px; position: absolute; width: 4px } .corner-accent.top { border-bottom: 0; top: -1px } .corner-accent.right { border-left: 0; right: -1px } .corner-accent.bottom { border-top: 0; bottom: -1px } .corner-accent.left { border-right: 0; left: -1px } .has-diag-corners { position: relative } .has-diag-corners.top:before { border-left: 149px solid #dadada; border-top: 134px solid #ccc; content: ''; position: absolute; left: 0; top: 0; width: 0 } .has-diag-corners.top:after { border-right: 149px solid #dadada; border-top: 134px solid #ccc; content: ''; position: absolute; right: 0; top: 0; width: 0 } .has-diag-corners.bottom:before { border-right: 149px solid #ccc; border-top: 134px solid #dadada; content: ''; position: absolute; left: 0; top: 0; width: 0 } .has-diag-corners.bottom:after { border-left: 149px solid #ccc; border-top: 134px solid #dadada; content: ''; position: absolute; right: 0; top: 0; width: 0 } .active { background-color: #00acee!important; border-color: #00acee!important; color: #fff!important } .active-text { color: #00acee!important } .status-clear { background: #93cb43!important; color: #fff } .status-clear-text { color: #93cb43 } .status-info { background: #30baef!important; color: #fff } .status-info-text { color: #30baef } .dropdown-set { align-items: center; display: flex; justify-content: center } .dropdown { position: relative } .dropdown>a { background-color: #00acee; color: #fff; display: block; margin: 0 .875rem; padding: .625rem; position: relative; width: 16rem; box-shadow: 2px 2px rgba(0, 0, 0, .15) } .dropdown>a i { font-size: 1.375rem; position: absolute; right: .5rem; top: .5rem } .dropdown>ul { display: none; position: absolute; left: 0; top: 0 } .fleet-card { background-color: rgba(203, 209, 209, .5); flex: 0 1 48%; height: 403px; margin: 12px 0 12px 20px } .fleet-card .layout-col.left { flex: 0 1 69% } .fleet-card .layout-col.right { flex: 0 1 31% } .fleet-card-header { color: #fff } .fleet-card-pwr-status { background-color: #93cb43; position: relative } .fleet-card-pwr-status:before, .fleet-card-pwr-status:after { content: " "; display: block } .fleet-card-pwr-status:after { clear: both } .fleet-card-pwr-status a[href] { display: inline-block; height: 53px; width: 89% } .fleet-card-pwr-status h2 { color: #fff; float: left; font-size: 16px; font-weight: 400; margin: 21px 0 0 24px; text-transform: uppercase } .fleet-card-pwr-status .button-open-viewport { position: absolute; right: 12px; top: 19px; width: 20px } .fleet-card-pwr-btn { background-color: #333; box-shadow: 2px 2px rgba(0, 0, 0, .35); color: #93cb43; cursor: pointer; display: inline-block; float: left; padding: 12px } .fleet-card-env-status { align-items: center; background-color: #7cc118; font-size: 10px; height: 75px; display: flex; justify-content: flex-start } .fleet-card-env-status h3 { font-size: 12px; text-transform: uppercase } .fleet-card-env-status i { float: left; font-size: 30px; margin: 12px } .fleet-card-env-status>div { float: left; margin-left: 22px } .fleet-card-graph { border: 2px solid rgba(252, 252, 252, .5); border-right: 0; border-bottom: 0; flex: 0 1 50%; padding: 24px 0; text-align: center } .fleet-card-graph:first-child { border-left: 0 } .fleet-card-graph h3 { font-size: 12px; font-weight: 700; text-transform: uppercase } .fleet-card-graph img { margin-top: 18px; width: 75% } .fleet-card-graph-container { height: 271px } .fleet-card-params { background-color: #e5e5e5; border-left: 2px solid rgba(252, 252, 252, .5); font-size: 11px; text-align: center } .fleet-card-params dt { background-color: #ccc; padding: 8px 0 4px; text-transform: uppercase } .fleet-card-params dd { background-color: #ccc; border-bottom: 2px solid #f1f1f1; padding: 4px 0 8px } .fleet-card-params-detail { background: #fff; box-sizing: border-box; font-size: 11px; text-align: center } .fleet-card-params-detail.sla-panel, .fleet-card-params-detail.nfvi-panel { cursor: pointer; height: 403px; padding: 0 20px } .fleet-card-params-detail h4 { padding-top: 24px; text-transform: uppercase } .fleet-card-params-detail h4 i { font-size: 16px; margin-left: 18px } .fleet-card-params-detail li { border-top: 1px solid #e5e5e5; margin-top: 20px; padding-top: 20px } .fleet-card-params-detail li:first-child { border: 0 } .fleet-card-params-detail.trafgen-panel { height: 403px; position: relative } .fleet-card-params-detail.trafgen-panel h4 { padding-top: 24px; text-transform: uppercase } .fleet-card-params-detail.trafgen-panel h4 i { font-size: 16px; margin-left: 18px } .fleet-card-params-detail.trafgen-panel .slider-container { font-size: 12px; padding: 0 50px; margin-top: 48px; justify-content: space-between } .fleet-card-params-detail.trafgen-panel .slider-vert { flex: 0 1 25%; margin: 0 } .fleet-card-params-detail.trafgen-panel .slider-vert-track { width: 30px } .fleet-card-params-detail.trafgen-panel .slider-vert-header { font-size: 10px; margin-bottom: 6px } .fleet-card-params-detail.trafgen-panel .slider-vert-start-val { margin-bottom: 3px } .fleet-card-params-detail.trafgen-panel .slider-vert-end-val { margin-top: 3px } .fleet-card-params-detail.trafgen-panel .packet-size-slider .slider-vert-header { margin-left: -16px } .fleet-card-params-detail.trafgen-panel .packet-size-slider .slider-vert-position { top: 130px } .fleet-card-params-detail.trafgen-panel .packet-size-slider .slider-vert-position.left { width: 69p } .fleet-card-params-detail.trafgen-panel .rate-slider .slider-vert-position { top: 40px } .fleet-card-toggle-set { border-bottom: 2px solid #f1f1f1; padding: 18px } .fleet-card-toggle-set a[role=button] { box-shadow: 2px 2px rgba(0, 0, 0, .15) } .fleet-card-toggle-set a:last-child { margin-bottom: 0 } .fleet-card-actions { background-color: #ccc; padding: 22px 18px } .fleet-card-actions .button-set { margin-top: 6px } .fleet-card-actions a[role=button] { display: block; float: left; text-align: center; text-transform: uppercase; box-shadow: 2px 2px rgba(0, 0, 0, .15) } .fleet-card-actions .trafgen-start { background-color: #333; color: #fff; flex: 0 1 80%; margin-right: 2px; padding: 8px 0 } .fleet-card-actions .trafgen-start i { margin-right: 6px } .fleet-card-actions .trafgen-toggle { background-color: #fff; color: #333; flex: 0 1 20%; padding: 2px 8px 2px 11px; font-size: 21px } .fleet-card-toggle { background-color: #fff; box-shadow: 4px 4px #e5e5e5; color: #30baef; cursor: pointer; display: block; margin-bottom: 12px; padding: 20px } .fleet-card-toggle h4 { color: #000; margin-bottom: 6px; text-transform: uppercase } .fleet-card.empty-card { font-size: 12px; text-align: center; text-transform: uppercase } .fleet-card.empty-card a { color: #000; display: block; font-weight: 700; height: 100%; text-decoration: none; width: 100% } .fleet-card.empty-card a img { margin-top: 130px } .fleet-card.empty-card a p { margin-top: 24px } .navpanel-container { background-color: #dadada; box-sizing: border-box; display: flex; flex-flow: row wrap } .navpanel { background-color: #ccc; box-sizing: border-box; color: #000; padding: 1.5rem 0; text-align: center; text-decoration: none } .navpanel.top { flex: 1 0 100%; order: 1 } .navpanel.right { order: 4 } .navpanel.bottom { align-self: baseline; flex: 0 1 100%; order: 5 } .navpanel.left { order: 2 } .navpanel.left, .navpanel.right { background-color: #dadada; flex: 0 1 auto; padding: 0 1.5rem; width: 148px } .mainpanel { flex: 2 1; order: 3 } .progress-bar { background: #fff; height: 30px; line-height: 30px; padding-right: 12px; position: relative; text-align: right } .progress-bar span { background: #30baef; color: #fff; display: block; font-size: .75rem; height: 30px; padding: 0 .75em; position: absolute; left: 0; top: 0 } .config-parent { cursor: pointer } .config-list { display: block; margin-left: 10px } .config-list.closed { display: none } .slider-container { text-align: center } .slider-vert { float: left; width: 42px; margin-left: 47px!important } .slider-vert-header { font-size: 11px; margin-bottom: 4px; text-transform: uppercase; white-space: nowrap } .slider-vert-start-val, .slider-vert-end-val { font-size: 14px } .slider-vert-track { border-left: 1px solid #ccc; border-right: 1px solid #ccc; height: 200px; position: relative; width: 30px } .slider-vert-handle { background-color: #00acee; box-shadow: 2px 2px rgba(0, 0, 0, .2); display: inline-block; height: 16px; width: 34px } .slider-vert-position { color: #30baef; font-size: 12px; position: absolute; white-space: nowrap!important } .slider-vert-position.left { left: -38px } .slider-vert-position.left .slider-vert-handle { float: right; margin-left: 6px } .slider-vert-position.right { left: -3px } .slider-vert-position.right .slider-vert-handle { float: left; margin-right: 6px } .slider-toggle { float: left; margin: 12px 27px 12px 0; white-space: nowrap; width: 43% } .slider-toggle:before, .slider-toggle:after { content: " "; display: block } .slider-toggle:after { clear: both } .slider-toggle label { display: block; font-size: 13px; margin-bottom: 8px; text-transform: uppercase } .slider-toggle-track { box-shadow: 2px 2px rgba(0, 0, 0, .15) } .slider-toggle-track:before, .slider-toggle-track:after { content: " "; display: block } .slider-toggle-track:after { clear: both } .slider-toggle-option { background-color: #fff; color: #dadada; float: left; font-size: 12px; margin-top: -4px; padding: 8px; text-align: center; width: 50% } a[role=button] { cursor: pointer } .button-action-toggle { background-color: #333; box-shadow: 4px 4px #e5e5e5; color: #fff; cursor: pointer; display: block; padding: 12px 0; text-align: center; text-transform: uppercase } .button-action-toggle i { margin-right: 6px } .button-half-border { border: 2px solid #000; border-top: 0; box-shadow: 2px 2px rgba(0, 0, 0, .35); padding: 4px 24px; position: relative; font-size: .6875rem; font-weight: 700; text-transform: uppercase } .button-half-border:before, .button-half-border:after { background: #ccc; content: ''; display: block; height: 10px; position: absolute; top: 0; width: 4px } .button-half-border:before { left: -4px } .button-half-border:after { right: -4px } .step-control { position: relative; text-align: center } .step-control .step { cursor: pointer; display: block; position: absolute; top: 0 } .step-control .step.decrease { left: 0 } .step-control .step.increase { right: 0 } .toggle-set { align-items: center; display: flex; justify-content: center } .toggle-control { align-content: center; display: flex; width: 18.75rem; box-shadow: 2px 2px rgba(0, 0, 0, .15) } .toggle-control>a { background-color: #fff; color: #333; flex: 0 1 9.375rem; padding: .625rem 0; align-items: center; display: flex; justify-content: center } .toggle-control>a.selected { background-color: #00acee; color: #fff } .splitterContainer { -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .splitterContainer .content { margin-right: 60px } .splitterContainer #handle { z-index: 3; position: relative; cursor: row-resize; min-height: 20px } .splitterContainer .splitter { height: 32px; width: 100%; box-shadow: none; background-image: none; align-items: center; padding: 4px; border-top: 1px solid #121212; border-bottom: 1px solid #121212; background-color: #454545; z-index: 999 } .splitterContainer .splitter .adjust { position: absolute; right: 0; top: 0; margin-top: 5px } .splitterContainer .splitter .adjust .splitterButtons { position: relative; float: left; border: 1px solid #fff; border-radius: 8px; fill: #fff; height: 15px; width: 15px; cursor: pointer; color: #fff } .splitterContainer .vpane-top { flex: 1; overflow-y: scroll } .splitterContainer .vpane-bottom { display: block; overflow-y: scroll; padding: 10px; position: relative } .launchpad { flex-wrap: wrap } .create-fleet-header { color: #00acee; display: inline-block; margin: 0 0 20px 24px; position: relative } .create-fleet-header img { position: absolute; right: -24px; bottom: 0; width: 16px } .create-fleet-services, .create-fleet-pool { background-color: #e5e5e5 } .create-fleet>.flex-row { justify-content: space-around } .create-fleet>.flex-row>li { flex: 0 1 30% } .create-fleet>.flex-row>li h3 { background-color: #fff; padding: 12px 18px; text-transform: uppercase } .create-fleet .list-fleet-services { flex-wrap: wrap; text-align: center; margin: 24px auto; width: 90% } .create-fleet .list-fleet-services a { background-color: #fff; flex: 0 1 32%; margin: 0 4px 4px 0; padding: 4px; box-shadow: 2px 2px rgba(0, 0, 0, .15) } .create-fleet .list-fleet-services a h5 { font-size: 10px; margin: 5px 0 0 5px; text-align: left } .create-fleet .list-fleet-services a img { margin-top: 10px; width: 70% } .create-fleet .list-pools { padding: 24px } .create-fleet .list-pools li a { background-color: #fff; display: block; font-size: 12px; margin-bottom: 24px; padding: 12px; text-align: center; box-shadow: 2px 2px rgba(0, 0, 0, .15) } .create-fleet .list-pools li h4 { text-align: left } .create-fleet .list-pools li img { margin-top: 24px; width: 65% } .create-fleet .parameter-controls { background-color: #e5e5e5; padding: 18px 0 18px 24px } .create-fleet .parameter-controls:before, .create-fleet .parameter-controls:after { content: " "; display: block } .create-fleet .parameter-controls:after { clear: both } .create-fleet .parameter-controls.epa label { display: block; float: left; margin: 6px 0 0 } .create-fleet .parameter-controls.epa .slider-toggle { width: 100% } .create-fleet .parameter-controls.epa .slider-toggle-track { float: right; margin-right: 27px; width: 43% } .create-fleet .parameter-controls.epa .slider-toggle-option { color: #333 } .create-fleet .parameter-controls.vmf li { font-size: 13px; margin-bottom: 12px } .create-fleet .parameter-controls.vmf li:before, .create-fleet .parameter-controls.vmf li:after { content: " "; display: block } .create-fleet .parameter-controls.vmf li:after { clear: both } .create-fleet .parameter-controls.vmf label { display: block; float: left; padding: 10px 0 6px; text-transform: uppercase } .create-fleet .parameter-controls.vmf .step-control { background-color: #fff; color: #30baef; float: right; margin-right: 27px; padding: 10px 0 6px; text-align: center; width: 175px } .create-fleet .parameter-controls.vmf .step-control .step { font-size: 16px; height: 31px; width: 31px; align-items: center; display: flex; justify-content: center } .create-fleet .parameter-controls.vmf .step-control .step.decrease { background-color: #ccc; border-right: 2px solid #e5e5e5; color: #666 } .create-fleet .parameter-controls.vmf .step-control .step.increase { background-color: #fff; border-left: 2px solid #e5e5e5; color: #333; box-shadow: 2px 2px rgba(0, 0, 0, .15) } .create-fleet .adv-toggle h4 { background-color: #fff; color: #333 } .create-fleet-params h4 { background-color: #00acee; color: #fff; font-size: 12px; padding: 6px 22px; position: relative; text-transform: uppercase; box-shadow: 2px 2px rgba(0, 0, 0, .15) } .create-fleet-params h4 i { font-size: 18px; position: absolute; right: 12px; top: 6px } .create-fleet-actions { clear: both; margin-top: 36px; text-align: center } .create-fleet-actions a { color: #000; display: inline-block; font-size: 12px; padding: 8px 64px; text-decoration: none; text-transform: uppercase; box-shadow: 2px 2px rgba(0, 0, 0, .15) } .create-fleet-actions a.save { background-color: #fff; border: 1px solid #ccc; border-top: 0; cursor: pointer; margin-right: 48px } .create-fleet-actions a.launch { background-color: #333; border: 1px solid #000; border-top: 0; color: #fff } .create-fleet-actions a.launch:hover, .create-fleet-actions a.launch:active { background: #00acee; color: #fff } .viewport-dash { font-size: .75rem } .viewport-dash .mainpanel { background: #f1f1f1; border-left: .1875rem solid #c2c2c2; border-right: .1875rem solid #c2c2c2; box-sizing: border-box; padding: 2.25rem } .viewport-dash .mainpanel.flex-row { align-items: flex-start; flex-wrap: wrap } .viewport-dash .mainpanel.flex-row .flex-left { flex: 0 1 45% } .viewport-dash .mainpanel.flex-row .flex-right { flex: 0 1 55% } .viewport-dash .mainpanel.flex-row .flex-right .flex-row { align-items: stretch; flex-wrap: wrap } .viewport-dash .mainpanel.flex-row .flex-right .flex-row .sla-container { flex: 0 1 75% } .viewport-dash .mainpanel.flex-row .flex-right .flex-row .network-container { flex: 0 1 25% } .viewport-dash .mainpanel.flex-row .flex-right .flex-row .mgmt-container { flex: 0 1 100% } .viewport-dash .mainpanel h2 { background-color: #fff; margin-bottom: .125rem; font-size: .75rem; padding: 1.125rem; font-weight: 700; text-transform: uppercase } .viewport-dash .mainpanel table { text-align: center } .viewport-dash .mainpanel table th { background: #dadada; padding: .375rem; font-size: .6875rem; font-weight: 700; text-transform: uppercase } .viewport-dash .mainpanel table td { background: #e5e5e5; border-right: .0625rem solid #e5e5e5; padding: .5625rem 1.5rem } .viewport-dash .mainpanel table td .status-clear-text { margin-bottom: .75rem } .viewport-dash .mano { margin-bottom: 1.5rem } .viewport-dash .mano dl { align-items: center; background: #7cc118; color: #fff } .viewport-dash .mano dl:before, .viewport-dash .mano dl:after { content: " "; display: block } .viewport-dash .mano dl:after { clear: both } .viewport-dash .mano dl dt, .viewport-dash .mano dl dd { display: flex; padding: .375rem 1.125rem } .viewport-dash .mano dl dt { float: left; font-size: .6875rem; font-weight: 700; text-transform: uppercase } .viewport-dash .mano dl dd { float: right } .viewport-dash .mano table { width: 100% } .viewport-dash .mano table td:last-child { border: 0 } .viewport-dash .vcs table { border-collapse: separate; border-spacing: .0625rem solid; width: 100% } .viewport-dash .vcs table thead th { background-color: #e5e5e5; border-right: 1px solid #dadada; padding: 1.125rem 0 } .viewport-dash .vcs table thead th:last-child { border: 0 } .viewport-dash .vcs table tbody td { width: 30%; border-bottom: 1px solid #e5e5e5 } .viewport-dash .vcs table tbody th { padding-left: 1.125rem; text-align: left; width: 40% } .viewport-dash .vcs table tbody tr:nth-child(even) th { background-color: #e5e5e5 } .viewport-dash .sla { flex: 1 1 60%; flex-wrap: nowrap; margin: 0 1.5rem } .viewport-dash .sla h3 { font-size: .6875rem; font-weight: 700; text-transform: uppercase } .viewport-dash .sla .wp-pool-manager { flex: 0 1 30% } .viewport-dash .sla .wp { background: #dadada; margin-bottom: .125rem; padding: .75rem; text-align: center } .viewport-dash .sla .wp h3 { text-align: left } .viewport-dash .sla .wp img { margin: .875rem 0; width: 90% } .viewport-dash .sla .pool-manager { background: #dadada; padding: .6875rem } .viewport-dash .sla .pool-manager .progress-bar { margin: .75rem 0 } .viewport-dash .sla table.stats { border-left: 2px solid #f1f1f1; flex: 0 1 70%; text-align: left; width: 70% } .viewport-dash .sla table.stats th, .viewport-dash .sla table.stats td { border-bottom: 1px solid #f1f1f1; border-right: 1px solid #f1f1f1; padding: .375rem; vertical-align: middle; width: 50% } .viewport-dash .sla table.stats td { text-align: right } .viewport-dash .sla table.stats th { background: #dadada } .viewport-dash .sla table.stats th.alt { background: #e5e5e5 } .viewport-dash .network li { background-color: #dadada; font-size: 1.625rem; margin-top: .125rem; padding: 1.125rem .875rem; text-align: center } .viewport-dash .network li:nth-child(even) { background-color: #e5e5e5 } .viewport-dash .network li:last-child { border: 0 } .viewport-dash .network li .label { display: block; margin-bottom: .6rem } .viewport-dash .mgmt { margin: 1.5rem 0 0 1.5rem } .viewport-dash .mgmt:before, .viewport-dash .mgmt:after { content: " "; display: block } .viewport-dash .mgmt:after { clear: both } .viewport-dash .mgmt ul { width: 100% } .viewport-dash .mgmt ul:before, .viewport-dash .mgmt ul:after { content: " "; display: block } .viewport-dash .mgmt ul:after { clear: both } .viewport-dash .mgmt h2 { padding: 0 } .viewport-dash .mgmt li { background: #dadada; flex: 1 1 20.5%; font-size: 1.625rem; height: 5.938rem; margin-left: .125rem; padding: .5rem 0; text-align: center } .viewport-dash .mgmt li:first-child { background-color: #fff; flex: 0 1 10%; align-items: center; display: flex; justify-content: center } .viewport-dash .mgmt li:nth-child(even) { background-color: #e5e5e5 } .viewport-dash .mgmt li .label { display: block; margin-bottom: .875rem } .viewport-dash .mgmt li .unit { display: block } .viewport-dash .navpanel .service-orch { display: flex; align-items: center; margin-left: 11.88rem } .viewport-dash .navpanel .service-orch .button-half-border { float: left; margin-right: 7.75rem } .viewport-dash .navpanel .service-orch li { background: #e5e5e5; float: left; height: 5.313rem; padding: .75rem 1.5rem; position: relative; margin-right: 1.5rem; width: 7.75rem; align-items: center; display: flex; justify-content: center; font-size: .6875rem; font-weight: 700; text-transform: uppercase } .viewport-dash .navpanel .service-orch li:after { border-top: 1px solid #333; content: ''; position: absolute; right: -24px; top: 50%; width: 24px } .viewport-dash .navpanel .service-orch li:last-child { margin: 0 } .viewport-dash .navpanel .service-orch li:last-child:after { border: 0 } .viewport-dash .navpanel .vnf .button-half-border, .viewport-dash .navpanel .analytics .button-half-border { margin: 1rem 0 1.5rem } .viewport-dash .navpanel .vnf .button-half-border:before, .viewport-dash .navpanel .analytics .button-half-border:before, .viewport-dash .navpanel .vnf .button-half-border:after, .viewport-dash .navpanel .analytics .button-half-border:after { background: #dadada } .viewport-dash .navpanel .vnf dt, .viewport-dash .navpanel .analytics dt, .viewport-dash .navpanel .vnf dd, .viewport-dash .navpanel .analytics dd { margin-bottom: .1875rem; padding: .5rem } .viewport-dash .navpanel .vnf dt, .viewport-dash .navpanel .analytics dt { background: #fff; font-size: .6875rem; font-weight: 700; text-transform: uppercase } .viewport-dash .navpanel .vnf dd, .viewport-dash .navpanel .analytics dd { background: #ccc; font-size: 1.375rem } .viewport-dash .navpanel .vnf .unit, .viewport-dash .navpanel .analytics .unit { display: block; margin-top: .5rem } .viewport-dash .navpanel .vim { display: flex; align-items: center; margin-left: 11.88rem } .viewport-dash .navpanel .vim .button-half-border { float: left; margin-right: 2.25rem } .viewport-dash .navpanel .vim table { border-collapse: separate; border-spacing: .125rem; float: left; text-align: center } .viewport-dash .navpanel .vim table:last-child { margin-left: 1.5rem } .viewport-dash .navpanel .vim table th { background: #fff; padding: .5rem .75rem; text-align: left; font-size: .6875rem; font-weight: 700; text-transform: uppercase } .viewport-dash .navpanel .vim table td { background: #e5e5e5; font-size: 1.375rem; padding: .375rem 1rem .375rem } .viewport-dash .navpanel .vim table td .label { display: block; margin-bottom: .5rem } .viewport-so .vpane-bottom { display: flex } .viewport-so .panel-half { padding: 10px } .viewport-vim { font-size: .75rem } .viewport-vim .mainpanel { background: #f1f1f1; padding: 1.5rem } .viewport-vim .mainpanel .vim-controls { margin-bottom: 3rem } .viewport-vim .mainpanel .vim-controls>* { flex: 1 1 auto; justify-content: flex-end } .viewport-vim .mainpanel .vim-controls h2 { margin-top: .375rem } .viewport-vim .switch-table-set { justify-content: space-around; margin-bottom: 3rem } .viewport-vim .switch-table { flex: 0 1 30% } .viewport-vim .switch-table table { width: 100% } .viewport-vim .switch-table th, .viewport-vim .switch-table td { border-bottom: 2px solid #f1f1f1; vertical-align: middle; padding: .5625rem .875rem } .viewport-vim .switch-table th.switch h3 { background: url(./img/icon-switch.png) no-repeat left top; height: 1.7rem; padding-left: 4rem; padding-top: .55rem } .viewport-vim .switch-table th.host { background: #ccc url(./img/icon-host.png) no-repeat 21px center; height: 4rem; padding: 0 1.25rem 0 3.375rem } .viewport-vim .switch-table thead th { background-color: #fff; font-size: .875rem; font-weight: 700 } .viewport-vim .switch-table thead th:last-child { text-align: left } .viewport-vim .switch-table thead th small { display: block; font-size: .75rem; font-weight: 400; margin-top: .375rem } .viewport-vim .switch-table tbody th { background-color: #ccc; color: #fff; padding: .5625rem .875rem .875rem 0 } .viewport-vim .switch-table tbody td { background-color: #e5e5e5; font-size: .625rem } .viewport-vim .switch-table tbody td em { margin-right: .5rem } .viewport-vim .switch-table tbody td i { font-size: .5625rem; margin-right: .125rem } .viewport-vim .switch-table tbody td i.inactive { color: #ccc } .viewport-vim .switch-table tbody tr.selected th { background-color: #00acee } .viewport-vim .switch-table tbody tr.selected td { background-color: #fff } .viewport-vim .switch-table tbody tr.selected td:last-child { background: #fff url(./img/table-cell-bg.png) repeat-y right top } .viewport-vim .vim-legend { display: inline-flex } .viewport-vim .vim-legend div { background-color: #e5e5e5; padding: .75rem 1.5rem; margin-right: .125rem } .viewport-vim .vim-legend div:last-of-type { margin-right: 0 } .viewport-vim .vim-legend ul { float: left } .viewport-vim .vim-legend ul:first-child { margin-right: 2.25rem } .viewport-vim .vim-legend ol li:first-child { align-items: center; background: url(./img/icon-host-sm.png) no-repeat left center; display: flex; height: 2.188rem; margin-bottom: -.5rem; padding-left: 1.75rem } .viewport-vim .vim-legend li { margin: .75rem 0 } .viewport-vim .vim-legend li em, .viewport-vim .vim-legend li i { margin-right: .75rem } .viewport-vim .navpanel.top { background-color: #ccc; height: 30px; padding: 0; align-items: center; display: flex; justify-content: center } .viewport-vim .navpanel.top:before { border-left: 32px solid #dadada; border-top: 30px solid #ccc } .viewport-vim .navpanel.top:after { border-right: 32px solid #dadada; border-top: 30px solid #ccc } .viewport-vim .navpanel.left, .viewport-vim .navpanel.right { background-color: #f1f1f1; padding: 0; position: relative; width: 38px } .viewport-vim .navpanel.left .tilt, .viewport-vim .navpanel.right .tilt { background-color: #dadada; height: 100%; position: absolute; left: 24px; top: -2px; transform: rotate(-2deg); width: 38px } .viewport-vim .navpanel.left .tilt { left: -24px; transform: rotate(2deg) } .viewport-vnf h2 { padding-bottom: 2rem } .viewport-vnf h3 { background: #fff; font-size: .875rem; padding: 1.125rem; font-weight: 700; text-transform: uppercase } .viewport-vnf h4 { font-size: .75rem; margin-bottom: .5625rem; font-weight: 700; text-transform: uppercase } .viewport-vnf.navpanel-container { background-color: #f1f1f1 } .viewport-vnf .flex-row { align-items: flex-start; position: relative; width: 100% } .viewport-vnf .flex-row .link-diagram { position: absolute; bottom: -3.813rem; left: 13.5% } .viewport-vnf .flex-row .link-diagram img { width: 80% } .viewport-vnf .mainpanel { margin: 0 0 5rem 5rem } .viewport-vnf .vnf-card { flex: 0 1 30.5%; margin-right: 2rem; background-color: #e5e5e5 } .viewport-vnf .vnf-card:first-child { margin-left: 0 } .viewport-vnf .vnf-card:last-child { margin-right: 0 } .viewport-vnf .vnf-card table { width: 100% } .viewport-vnf .vnf-card td { border-bottom: 2px solid #f1f1f1; border-right: 2px solid #f1f1f1; padding: 1.125em 0; text-align: center; width: 50% } .viewport-vnf .vnf-card td:last-child { border-right: 0 } .viewport-vnf .vnf-card td img { width: 75% } .viewport-vnf .vnf-card td small { display: block; margin-bottom: 1.5em } .viewport-vnf .vnf-card tr:first-child td { background-color: #e5e5e5 } .viewport-vnf .vnf-card tr:last-child td { background-color: #dadada } .viewport-vnf .vnf-card>ul { display: flex; flex-direction: row; flex-wrap: nowrap; width: 99.8%; border-bottom: 2px solid #f1f1f1 } .viewport-vnf .vnf-card>ul li { background-color: #e5e5e5; flex: 1 1 auto; margin-right: .125rem; padding: 1.5em .75em; text-align: center } .viewport-vnf .vnf-card>ul li:first-child { flex: 0 1 18% } .viewport-vnf .vnf-card>ul li:last-child { margin-right: 0 } .viewport-vnf .vnf-card>div { background-color: #dadada; box-sizing: border-box; margin-top: .125rem; padding: .75rem 1.5rem 1.5rem; text-align: center; width: 99.8% } .viewport-vnf .vnf-card>div .button-action-toggle { font-size: .75rem } .viewport-vnf .vnf-card.vlb .bindings { padding: 1.125rem 1.5rem } .viewport-vnf .vnf-card.vlb .bindings em { display: block; margin: 1.063rem 0 } .viewport-vnf .vnf-card.vlb .bindings img { width: .75rem } .viewport-vnf .navpanel.top, .viewport-vnf .navpanel.bottom { background-color: #f1f1f1; height: 38px; overflow: hidden; padding: 0; position: relative } .viewport-vnf .navpanel.top .tilt, .viewport-vnf .navpanel.bottom .tilt { background-color: #dadada; height: 38px; position: absolute; left: 0; top: -25px; transform: rotate(1.4deg); width: 100% } .viewport-vnf .navpanel.top:before, .viewport-vnf .navpanel.bottom:before { border: 0 } .viewport-vnf .navpanel.top:after { border-right: 48px solid #ccc; border-top: 38px solid #dadada } .viewport-vnf .navpanel.bottom { transform: scaleY(-1) } .viewport-vnf .navpanel.bottom:after { border-left: 48px solid #dadada; border-top: 38px solid #ccc; transform: scaleY(-1) } .viewport-vnf .navpanel.right { background-color: #ccc; width: 48px; align-items: center; display: flex; justify-content: center } .wag-app>h1 { height: 63px; line-height: 51px; margin-left: 80px; padding-left: 118px } .wag h2 { padding-bottom: 2rem } .wag h3 { background: #fff; font-size: .875rem; padding: 1.125rem; font-weight: 700; text-transform: uppercase } .wag h4 { font-size: .75rem; margin-bottom: .5625rem; font-weight: 700; text-transform: uppercase } .wag .slider-container { width: 50%!important; margin: auto } .wag.navpanel-container { background-color: #f1f1f1 } .wag .flex-row { align-items: flex-start; position: relative; width: 100% } .wag .mainpanel { margin: 0 5rem 5rem 5rem } .wag .wag-outer-container { display: flex } .wag .wag-inner-container { flex-direction: column; flex: 3 1 auto } .wag .wag-inner-inner-container { display: flex; flex: 1 1 auto; margin-bottom: 40px } .wag .wag-inner-inner-container .slider-vert-header { margin: 105px 0 0 -16px } .wag .wag-top-row tbody { height: 614px } .wag .wag-top-row-half tbody { height: 307px } .wag .wag-analytics tbody { display: flex; height: 360px } .wag .wag-analytics tr, .wag .wag-top-row tr, .wag .wag-top-row-half tr { flex: 1 1 auto } .wag .wag-analytics tr:last-child { flex: 20 1 auto } .wag .vnf-card { flex: 1 1 auto; margin-right: 2rem } .wag .vnf-card:first-child { margin-left: 0; flex: 1 1 auto } .wag .vnf-card:last-child { margin-right: 0 } .wag .vnf-card table { width: 100% } .wag .vnf-card td { border-bottom: 2px solid #f1f1f1; border-right: 2px solid #f1f1f1; padding: 1.125em 0; text-align: center; width: 50% } .wag .vnf-card td:last-child { border-right: 0 } .wag .vnf-card td img { width: 75% } .wag .vnf-card td small { display: block; margin-bottom: 1.5em } .wag .vnf-card tr:nth-child(even) td { background-color: #e5e5e5 } .wag .vnf-card tr:nth-child(odd) td { background-color: #dadada } .wag .vnf-card tr.lighter td { background-color: #e5e5e5 } .wag .vnf-card>ul { display: flex; flex-direction: row; flex-wrap: nowrap; width: 99.8% } .wag .vnf-card>ul li { background-color: #e5e5e5; flex: 1 1 auto; margin-right: .125rem; padding: 1.5em .75em; text-align: center } .wag .vnf-card>ul li:first-child { flex: 0 1 18% } .wag .vnf-card>ul li:last-child { margin-right: 0 } .wag .vnf-card>div { background-color: #dadada; box-sizing: border-box; margin-top: .125rem; padding: .75rem 1.5rem 1.5rem; text-align: center; width: 99.8% } .wag .vnf-card>div .button-action-toggle { font-size: .75rem } .wag .vnf-card.vlb .bindings { padding: 1.125rem 1.5rem } .wag .vnf-card.vlb .bindings em { display: block; margin: 1.063rem 0 } .wag .vnf-card.vlb .bindings img { width: .75rem } .wag .navpanel.top, .wag .navpanel.bottom { background-color: #f1f1f1; height: 38px; overflow: hidden; padding: 0; position: relative } .wag .navpanel.top .tilt, .wag .navpanel.bottom .tilt { background-color: #dadada; height: 38px; position: absolute; left: 0; top: -25px; transform: rotate(1.4deg); width: 100% } .wag .navpanel.top:before, .wag .navpanel.bottom:before { border: 0 } .wag .navpanel.top:after { border-right: 48px solid #ccc; border-top: 38px solid #dadada } .wag .navpanel.bottom { transform: scaleY(-1) } .wag .navpanel.bottom:after { border-left: 48px solid #dadada; border-top: 38px solid #ccc; transform: scaleY(-1) } .wag .navpanel.right { background-color: #ccc; width: 48px; align-items: center; display: flex; justify-content: center } .wag #map { height: 295px } .wag .wag-marker { width: 20px; height: 20px; border: 1px solid #088; border-radius: 10px; background-color: #0FF; opacity: .5 } .viewport-dash { position: relative } .viewport-dash .vim-link { display: block; height: 133px; position: absolute; bottom: 0; right: 0; width: 100% } .viewport-dash .vnf-link { display: block; height: 100%; position: absolute; left: 0; top: 0; width: 133px } .viewport-dash .so-link { display: block; height: 133px; position: absolute; top: 0; right: 0; width: 100% } .viewport-dash .platform-link { margin-bottom: 20px; flex: 1 100% } .viewport-dash .platform-link .button-half-border:before, .viewport-dash .platform-link .button-half-border:after { background: #f1f1f1; content: ''; display: block; height: 10px; position: absolute; top: 0; width: 4px } .viewport-dash .platform-link a:link { color: #000; text-decoration: none } .viewport-dash .platform-link a:visited { color: #000; text-decoration: none } .viewport-dash .platform-link a:hover { color: #000; text-decoration: none } .viewport-dash .platform-link a:active { color: #000; text-decoration: none } .viewport-vim { position: relative } .viewport-vim .dash-link { height: 40px; position: absolute; left: 0; top: 0; width: 100% } .viewport-vnf { position: relative } .viewport-vnf .dash-link { height: 100%; position: absolute; right: 0; top: 0; width: 40px } .login-cntnr { width: 100%; height: 100%; text-align: center; font-family: roboto-thin, Helvetica, Arial, sans-serif; font-size: 20px } .login-cntnr .logo { width: 154px; height: 102px; margin-left: auto; margin-right: auto; margin-top: 150px; margin-bottom: 20px; background-size: 154px 102px; /*background-image: url(./img/header-logo.png)*/ background-image: url(./img/svg/osm-logo_color_rgb.svg); } .login-cntnr .riftio { margin-bottom: 40px; font-size: 1.625rem; font-weight: 400; } .login-cntnr input { width: 525px; padding-left: 25px } .login-cntnr input, .login-cntnr .sign-in { min-width: 0; width: 550px; height: 65px; min-width: auto; margin-bottom: 40px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .39), 0 -1px 1px #fff, 0 1px 0 #fff; font-size: 20px } .login-cntnr .sign-in { display: inline-block; // height: 45px; // padding-top: 20px; -webkit-box-shadow: 4px 4px 1px 0 #d9d9d9; -moz-box-shadow: 4px 4px 1px 0 #d9d9d9; box-shadow: 4px 4px 1px 0 #d9d9d9; background-color: #333; color: #fff; text-decoration: none } .login-cntnr .create-account { font-size: 18px; color: #393939 } .login-cntnr .create-account a { font-weight: 700 }