3 * Copyright 2016 RIFT.IO Inc
5 * Licensed under the Apache License, Version 2.0 (the "License");
6 * you may not use this file except in compliance with the License.
7 * You may obtain a copy of the License at
9 * http://www.apache.org/licenses/LICENSE-2.0
11 * Unless required by applicable law or agreed to in writing, software
12 * distributed under the License is distributed on an "AS IS" BASIS,
13 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 * See the License for the specific language governing permissions and
15 * limitations under the License.
18 /*@import "./vendor/css-reset-2.0/css-reset.css";*/
19 @import "../../node_modules/reset-css/reset.css";
22 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
25 border: 1px solid
#333;
27 display: inline-block
;
31 font-family: roboto-regular
;
32 src: url
(./fonts
/Roboto-Regular-webfont
.eot
);
33 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')
36 font-family: roboto-condensed-bold
;
37 src: url
(./fonts
/RobotoCondensed-Bold-webfont
.eot
);
38 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')
41 font-family: roboto-light
;
42 src: url
(./fonts
/Roboto-Light-webfont
.ttf
)
45 font-family: roboto-regular
, Helvetica
, Arial
, sans-serif
;
60 text-transform: uppercase
65 text-transform: uppercase
70 text-transform: uppercase
75 text-transform: uppercase
89 justify-content: center
92 background-color: #f1f1f1;
98 /*background: url(./img/header-logo.png) no-repeat left center;*/
99 background: url
(./img
/svg
/osm-logo_color_rgb
.svg
) no-repeat left center
;
106 text-transform: uppercase
108 .header-app nav.launchpad-nav {
109 box-sizing: border-box
;
116 .header-app nav
.launchpad-nav:before
,
117 .header-app nav.launchpad-nav:after {
121 .header-app nav.launchpad-nav:after {
124 .header-app nav.launchpad-nav a {
125 border-left: 1px solid
#e5e5e5;
132 text-decoration:none
;
134 .header-app nav.launchpad-nav h4 {
135 display: inline-block
;
138 text-transform: uppercase
140 .header-app nav.launchpad-nav img {
143 .header-app nav.viewport-nav {
147 .header-app nav.viewport-nav a {
148 text-decoration: none
150 .header-app nav.viewport-nav h2 {
157 text-transform: uppercase
159 .header-app nav.viewport-nav.top h2 {
160 background: url
(./img
/viewport-nav-top
.png
) no-repeat right center
162 .header-app nav.viewport-nav.right h2 {
163 background: url
(./img
/viewport-nav-right
.png
) no-repeat right center
165 .header-app nav.viewport-nav.bottom h2 {
166 background: url
(./img
/viewport-nav-bottom
.png
) no-repeat right center
168 .header-app nav.viewport-nav.left h2 {
169 background: url
(./img
/viewport-nav-left
.png
) no-repeat right center
171 .header-app nav.viewport-nav.center h2 {
172 background: url
(./img
/viewport-nav-center
.png
) no-repeat right center
185 .has-corner-accents {
189 border: 1px solid
#000;
199 .corner-accent.right {
203 .corner-accent.bottom {
207 .corner-accent.left {
214 .has-diag-corners.top:before {
215 border-left: 149px solid
#dadada;
216 border-top: 134px solid
#ccc;
223 .has-diag-corners.top:after {
224 border-right: 149px solid
#dadada;
225 border-top: 134px solid
#ccc;
232 .has-diag-corners.bottom:before {
233 border-right: 149px solid
#ccc;
234 border-top: 134px solid
#dadada;
241 .has-diag-corners.bottom:after {
242 border-left: 149px solid
#ccc;
243 border-top: 134px solid
#dadada;
251 background-color: #00acee!important
;
252 border-color: #00acee!important
;
253 color: #fff!important
256 color: #00acee!important
259 background: #93cb43!important
;
266 background: #30baef!important
;
275 justify-content: center
281 background-color: #00acee;
288 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
303 background-color: rgba
(203, 209, 209, .5);
306 margin: 12px 0 12px 20px
308 .fleet-card .layout-col.left {
311 .fleet-card .layout-col.right {
317 .fleet-card-pwr-status {
318 background-color: #93cb43;
321 .fleet-card-pwr-status:before
,
322 .fleet-card-pwr-status:after {
326 .fleet-card-pwr-status:after {
329 .fleet-card-pwr-status a[href] {
330 display: inline-block
;
334 .fleet-card-pwr-status h2 {
339 margin: 21px 0 0 24px;
340 text-transform: uppercase
342 .fleet-card-pwr-status .button-open-viewport {
348 .fleet-card-pwr-btn {
349 background-color: #333;
350 box-shadow: 2px 2px rgba
(0, 0, 0, .35);
353 display: inline-block
;
357 .fleet-card-env-status {
359 background-color: #7cc118;
363 justify-content: flex-start
365 .fleet-card-env-status h3 {
367 text-transform: uppercase
369 .fleet-card-env-status i {
374 .fleet-card-env-status>div {
379 border: 2px solid rgba
(252, 252, 252, .5);
386 .fleet-card-graph:first-child {
389 .fleet-card-graph h3 {
392 text-transform: uppercase
394 .fleet-card-graph img {
398 .fleet-card-graph-container {
402 background-color: #e5e5e5;
403 border-left: 2px solid rgba
(252, 252, 252, .5);
407 .fleet-card-params dt {
408 background-color: #ccc;
410 text-transform: uppercase
412 .fleet-card-params dd {
413 background-color: #ccc;
414 border-bottom: 2px solid
#f1f1f1;
417 .fleet-card-params-detail {
419 box-sizing: border-box
;
423 .fleet-card-params-detail
.sla-panel
,
424 .fleet-card-params-detail.nfvi-panel {
429 .fleet-card-params-detail h4 {
431 text-transform: uppercase
433 .fleet-card-params-detail h4 i {
437 .fleet-card-params-detail li {
438 border-top: 1px solid
#e5e5e5;
442 .fleet-card-params-detail li:first-child {
445 .fleet-card-params-detail.trafgen-panel {
449 .fleet-card-params-detail.trafgen-panel h4 {
451 text-transform: uppercase
453 .fleet-card-params-detail.trafgen-panel h4 i {
457 .fleet-card-params-detail.trafgen-panel .slider-container {
461 justify-content: space-between
463 .fleet-card-params-detail.trafgen-panel .slider-vert {
467 .fleet-card-params-detail.trafgen-panel .slider-vert-track {
470 .fleet-card-params-detail.trafgen-panel .slider-vert-header {
474 .fleet-card-params-detail.trafgen-panel .slider-vert-start-val {
477 .fleet-card-params-detail.trafgen-panel .slider-vert-end-val {
480 .fleet-card-params-detail.trafgen-panel .packet-size-slider .slider-vert-header {
483 .fleet-card-params-detail.trafgen-panel .packet-size-slider .slider-vert-position {
486 .fleet-card-params-detail.trafgen-panel .packet-size-slider .slider-vert-position.left {
489 .fleet-card-params-detail.trafgen-panel .rate-slider .slider-vert-position {
492 .fleet-card-toggle-set {
493 border-bottom: 2px solid
#f1f1f1;
496 .fleet-card-toggle-set a[role=button] {
497 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
499 .fleet-card-toggle-set a:last-child {
502 .fleet-card-actions {
503 background-color: #ccc;
506 .fleet-card-actions .button-set {
509 .fleet-card-actions a[role=button] {
513 text-transform: uppercase
;
514 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
516 .fleet-card-actions .trafgen-start {
517 background-color: #333;
523 .fleet-card-actions .trafgen-start i {
526 .fleet-card-actions .trafgen-toggle {
527 background-color: #fff;
530 padding: 2px 8px 2px 11px;
534 background-color: #fff;
535 box-shadow: 4px 4px #e5e5e5;
542 .fleet-card-toggle h4 {
545 text-transform: uppercase
547 .fleet-card.empty-card {
550 text-transform: uppercase
552 .fleet-card.empty-card a {
557 text-decoration: none
;
560 .fleet-card.empty-card a img {
563 .fleet-card.empty-card a p {
566 .navpanel-container {
567 background-color: #dadada;
568 box-sizing: border-box
;
573 background-color: #ccc;
574 box-sizing: border-box
;
578 text-decoration: none
588 align-self: baseline
;
597 background-color: #dadada;
632 .config-list.closed {
641 margin-left: 47px!important
643 .slider-vert-header {
646 text-transform: uppercase
;
649 .slider-vert-start-val
,
650 .slider-vert-end-val {
654 border-left: 1px solid
#ccc;
655 border-right: 1px solid
#ccc;
660 .slider-vert-handle {
661 background-color: #00acee;
662 box-shadow: 2px 2px rgba
(0, 0, 0, .2);
663 display: inline-block
;
667 .slider-vert-position {
671 white-space: nowrap
!important
673 .slider-vert-position.left {
676 .slider-vert-position.left .slider-vert-handle {
680 .slider-vert-position.right {
683 .slider-vert-position.right .slider-vert-handle {
689 margin: 12px 27px 12px 0;
693 .slider-toggle:before
,
694 .slider-toggle:after {
698 .slider-toggle:after {
701 .slider-toggle label {
705 text-transform: uppercase
707 .slider-toggle-track {
708 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
710 .slider-toggle-track:before
,
711 .slider-toggle-track:after {
715 .slider-toggle-track:after {
718 .slider-toggle-option {
719 background-color: #fff;
731 .button-action-toggle {
732 background-color: #333;
733 box-shadow: 4px 4px #e5e5e5;
739 text-transform: uppercase
741 .button-action-toggle i {
744 .button-half-border {
745 border: 2px solid
#000;
747 box-shadow: 2px 2px rgba
(0, 0, 0, .35);
752 text-transform: uppercase
754 .button-half-border:before
,
755 .button-half-border:after {
764 .button-half-border:before {
767 .button-half-border:after {
774 .step-control .step {
780 .step-control .step.decrease {
783 .step-control .step.increase {
789 justify-content: center
792 align-content: center
;
795 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
798 background-color: #fff;
804 justify-content: center
806 .toggle-control>a.selected {
807 background-color: #00acee;
816 -webkit-flex-direction: column
;
817 -moz-flex-direction: column
;
818 -ms-flex-direction: column
;
819 flex-direction: column
821 .splitterContainer .content {
824 .splitterContainer #handle {
830 .splitterContainer .splitter {
834 background-image: none
;
837 border-top: 1px solid
#121212;
838 border-bottom: 1px solid
#121212;
839 background-color: #454545;
842 .splitterContainer .splitter .adjust {
848 .splitterContainer .splitter .adjust .splitterButtons {
851 border: 1px solid
#fff;
859 .splitterContainer .vpane-top {
863 .splitterContainer .vpane-bottom {
872 .create-fleet-header {
874 display: inline-block
;
875 margin: 0 0 20px 24px;
878 .create-fleet-header img {
884 .create-fleet-services
,
886 background-color: #e5e5e5
888 .create-fleet>.flex-row {
889 justify-content: space-around
891 .create-fleet>.flex-row>li {
894 .create-fleet>.flex-row>li h3 {
895 background-color: #fff;
897 text-transform: uppercase
899 .create-fleet .list-fleet-services {
905 .create-fleet .list-fleet-services a {
906 background-color: #fff;
910 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
912 .create-fleet .list-fleet-services a h5 {
917 .create-fleet .list-fleet-services a img {
921 .create-fleet .list-pools {
924 .create-fleet .list-pools li a {
925 background-color: #fff;
931 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
933 .create-fleet .list-pools li h4 {
936 .create-fleet .list-pools li img {
940 .create-fleet .parameter-controls {
941 background-color: #e5e5e5;
942 padding: 18px 0 18px 24px
944 .create-fleet
.parameter-controls:before
,
945 .create-fleet .parameter-controls:after {
949 .create-fleet .parameter-controls:after {
952 .create-fleet .parameter-controls.epa label {
957 .create-fleet .parameter-controls.epa .slider-toggle {
960 .create-fleet .parameter-controls.epa .slider-toggle-track {
965 .create-fleet .parameter-controls.epa .slider-toggle-option {
968 .create-fleet .parameter-controls.vmf li {
972 .create-fleet
.parameter-controls
.vmf
li:before
,
973 .create-fleet .parameter-controls.vmf li:after {
977 .create-fleet .parameter-controls.vmf li:after {
980 .create-fleet .parameter-controls.vmf label {
984 text-transform: uppercase
986 .create-fleet .parameter-controls.vmf .step-control {
987 background-color: #fff;
995 .create-fleet .parameter-controls.vmf .step-control .step {
1001 justify-content: center
1003 .create-fleet .parameter-controls.vmf .step-control .step.decrease {
1004 background-color: #ccc;
1005 border-right: 2px solid
#e5e5e5;
1008 .create-fleet .parameter-controls.vmf .step-control .step.increase {
1009 background-color: #fff;
1010 border-left: 2px solid
#e5e5e5;
1012 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
1014 .create-fleet .adv-toggle h4 {
1015 background-color: #fff;
1018 .create-fleet-params h4 {
1019 background-color: #00acee;
1024 text-transform: uppercase
;
1025 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
1027 .create-fleet-params h4 i {
1033 .create-fleet-actions {
1038 .create-fleet-actions a {
1040 display: inline-block
;
1043 text-decoration: none
;
1044 text-transform: uppercase
;
1045 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
1047 .create-fleet-actions a.save {
1048 background-color: #fff;
1049 border: 1px solid
#ccc;
1054 .create-fleet-actions a.launch {
1055 background-color: #333;
1056 border: 1px solid
#000;
1060 .create-fleet-actions a
.launch:hover
,
1061 .create-fleet-actions a.launch:active {
1062 background: #00acee;
1068 .viewport-dash .mainpanel {
1069 background: #f1f1f1;
1070 border-left: .1875rem solid
#c2c2c2;
1071 border-right: .1875rem solid
#c2c2c2;
1072 box-sizing: border-box
;
1075 .viewport-dash .mainpanel.flex-row {
1076 align-items: flex-start
;
1079 .viewport-dash .mainpanel.flex-row .flex-left {
1082 .viewport-dash .mainpanel.flex-row .flex-right {
1085 .viewport-dash .mainpanel.flex-row .flex-right .flex-row {
1086 align-items: stretch
;
1089 .viewport-dash .mainpanel.flex-row .flex-right .flex-row .sla-container {
1092 .viewport-dash .mainpanel.flex-row .flex-right .flex-row .network-container {
1095 .viewport-dash .mainpanel.flex-row .flex-right .flex-row .mgmt-container {
1098 .viewport-dash .mainpanel h2 {
1099 background-color: #fff;
1100 margin-bottom: .125rem;
1104 text-transform: uppercase
1106 .viewport-dash .mainpanel table {
1109 .viewport-dash .mainpanel table th {
1110 background: #dadada;
1112 font-size: .6875rem;
1114 text-transform: uppercase
1116 .viewport-dash .mainpanel table td {
1117 background: #e5e5e5;
1118 border-right: .0625rem solid
#e5e5e5;
1119 padding: .5625rem 1.5rem
1121 .viewport-dash .mainpanel table td .status-clear-text {
1122 margin-bottom: .75rem
1124 .viewport-dash .mano {
1125 margin-bottom: 1.5rem
1127 .viewport-dash .mano dl {
1128 align-items: center
;
1129 background: #7cc118;
1132 .viewport-dash
.mano
dl:before
,
1133 .viewport-dash .mano dl:after {
1137 .viewport-dash .mano dl:after {
1140 .viewport-dash
.mano dl dt
,
1141 .viewport-dash .mano dl dd {
1143 padding: .375rem 1.125rem
1145 .viewport-dash .mano dl dt {
1147 font-size: .6875rem;
1149 text-transform: uppercase
1151 .viewport-dash .mano dl dd {
1154 .viewport-dash .mano table {
1157 .viewport-dash .mano table td:last-child {
1160 .viewport-dash .vcs table {
1161 border-collapse: separate
;
1162 border-spacing: .0625rem solid
;
1165 .viewport-dash .vcs table thead th {
1166 background-color: #e5e5e5;
1167 border-right: 1px solid
#dadada;
1170 .viewport-dash .vcs table thead th:last-child {
1173 .viewport-dash .vcs table tbody td {
1175 border-bottom: 1px solid
#e5e5e5
1177 .viewport-dash .vcs table tbody th {
1178 padding-left: 1.125rem;
1182 .viewport-dash .vcs table tbody tr:nth-child(even) th {
1183 background-color: #e5e5e5
1185 .viewport-dash .sla {
1190 .viewport-dash .sla h3 {
1191 font-size: .6875rem;
1193 text-transform: uppercase
1195 .viewport-dash .sla .wp-pool-manager {
1198 .viewport-dash .sla .wp {
1199 background: #dadada;
1200 margin-bottom: .125rem;
1204 .viewport-dash .sla .wp h3 {
1207 .viewport-dash .sla .wp img {
1211 .viewport-dash .sla .pool-manager {
1212 background: #dadada;
1215 .viewport-dash .sla .pool-manager .progress-bar {
1218 .viewport-dash .sla table.stats {
1219 border-left: 2px solid
#f1f1f1;
1224 .viewport-dash
.sla table
.stats th
,
1225 .viewport-dash .sla table.stats td {
1226 border-bottom: 1px solid
#f1f1f1;
1227 border-right: 1px solid
#f1f1f1;
1229 vertical-align: middle
;
1232 .viewport-dash .sla table.stats td {
1235 .viewport-dash .sla table.stats th {
1238 .viewport-dash .sla table.stats th.alt {
1241 .viewport-dash .network li {
1242 background-color: #dadada;
1243 font-size: 1.625rem;
1244 margin-top: .125rem;
1245 padding: 1.125rem .875rem;
1248 .viewport-dash .network li:nth-child(even) {
1249 background-color: #e5e5e5
1251 .viewport-dash .network li:last-child {
1254 .viewport-dash .network li .label {
1256 margin-bottom: .6rem
1258 .viewport-dash .mgmt {
1259 margin: 1.5rem 0 0 1.5rem
1261 .viewport-dash
.mgmt:before
,
1262 .viewport-dash .mgmt:after {
1266 .viewport-dash .mgmt:after {
1269 .viewport-dash .mgmt ul {
1272 .viewport-dash
.mgmt
ul:before
,
1273 .viewport-dash .mgmt ul:after {
1277 .viewport-dash .mgmt ul:after {
1280 .viewport-dash .mgmt h2 {
1283 .viewport-dash .mgmt li {
1284 background: #dadada;
1286 font-size: 1.625rem;
1288 margin-left: .125rem;
1292 .viewport-dash .mgmt li:first-child {
1293 background-color: #fff;
1295 align-items: center
;
1297 justify-content: center
1299 .viewport-dash .mgmt li:nth-child(even) {
1300 background-color: #e5e5e5
1302 .viewport-dash .mgmt li .label {
1304 margin-bottom: .875rem
1306 .viewport-dash .mgmt li .unit {
1309 .viewport-dash .navpanel .service-orch {
1311 align-items: center
;
1312 margin-left: 11.88rem
1314 .viewport-dash .navpanel .service-orch .button-half-border {
1316 margin-right: 7.75rem
1318 .viewport-dash .navpanel .service-orch li {
1319 background: #e5e5e5;
1322 padding: .75rem 1.5rem;
1324 margin-right: 1.5rem;
1326 align-items: center
;
1328 justify-content: center
;
1329 font-size: .6875rem;
1331 text-transform: uppercase
1333 .viewport-dash .navpanel .service-orch li:after {
1334 border-top: 1px solid
#333;
1341 .viewport-dash .navpanel .service-orch li:last-child {
1344 .viewport-dash .navpanel .service-orch li:last-child:after {
1347 .viewport-dash
.navpanel
.vnf
.button-half-border
,
1348 .viewport-dash .navpanel .analytics .button-half-border {
1349 margin: 1rem 0 1.5rem
1351 .viewport-dash
.navpanel
.vnf
.button-half-border:before
,
1352 .viewport-dash
.navpanel
.analytics
.button-half-border:before
,
1353 .viewport-dash
.navpanel
.vnf
.button-half-border:after
,
1354 .viewport-dash .navpanel .analytics .button-half-border:after {
1357 .viewport-dash
.navpanel
.vnf dt
,
1358 .viewport-dash
.navpanel
.analytics dt
,
1359 .viewport-dash
.navpanel
.vnf dd
,
1360 .viewport-dash .navpanel .analytics dd {
1361 margin-bottom: .1875rem;
1364 .viewport-dash
.navpanel
.vnf dt
,
1365 .viewport-dash .navpanel .analytics dt {
1367 font-size: .6875rem;
1369 text-transform: uppercase
1371 .viewport-dash
.navpanel
.vnf dd
,
1372 .viewport-dash .navpanel .analytics dd {
1376 .viewport-dash
.navpanel
.vnf
.unit
,
1377 .viewport-dash .navpanel .analytics .unit {
1381 .viewport-dash .navpanel .vim {
1383 align-items: center
;
1384 margin-left: 11.88rem
1386 .viewport-dash .navpanel .vim .button-half-border {
1388 margin-right: 2.25rem
1390 .viewport-dash .navpanel .vim table {
1391 border-collapse: separate
;
1392 border-spacing: .125rem;
1396 .viewport-dash .navpanel .vim table:last-child {
1399 .viewport-dash .navpanel .vim table th {
1401 padding: .5rem .75rem;
1403 font-size: .6875rem;
1405 text-transform: uppercase
1407 .viewport-dash .navpanel .vim table td {
1408 background: #e5e5e5;
1409 font-size: 1.375rem;
1410 padding: .375rem 1rem .375rem
1412 .viewport-dash .navpanel .vim table td .label {
1414 margin-bottom: .5rem
1416 .viewport-so .vpane-bottom {
1419 .viewport-so .panel-half {
1425 .viewport-vim .mainpanel {
1426 background: #f1f1f1;
1429 .viewport-vim .mainpanel .vim-controls {
1432 .viewport-vim .mainpanel .vim-controls>* {
1434 justify-content: flex-end
1436 .viewport-vim .mainpanel .vim-controls h2 {
1439 .viewport-vim .switch-table-set {
1440 justify-content: space-around
;
1443 .viewport-vim .switch-table {
1446 .viewport-vim .switch-table table {
1449 .viewport-vim
.switch-table th
,
1450 .viewport-vim .switch-table td {
1451 border-bottom: 2px solid
#f1f1f1;
1452 vertical-align: middle
;
1453 padding: .5625rem .875rem
1455 .viewport-vim .switch-table th.switch h3 {
1456 background: url
(./img
/icon-switch
.png
) no-repeat left top
;
1461 .viewport-vim .switch-table th.host {
1462 background: #ccc url
(./img
/icon-host
.png
) no-repeat
21px center
;
1464 padding: 0 1.25rem 0 3.375rem
1466 .viewport-vim .switch-table thead th {
1467 background-color: #fff;
1471 .viewport-vim .switch-table thead th:last-child {
1474 .viewport-vim .switch-table thead th small {
1480 .viewport-vim .switch-table tbody th {
1481 background-color: #ccc;
1483 padding: .5625rem .875rem .875rem 0
1485 .viewport-vim .switch-table tbody td {
1486 background-color: #e5e5e5;
1489 .viewport-vim .switch-table tbody td em {
1492 .viewport-vim .switch-table tbody td i {
1493 font-size: .5625rem;
1494 margin-right: .125rem
1496 .viewport-vim .switch-table tbody td i.inactive {
1499 .viewport-vim .switch-table tbody tr.selected th {
1500 background-color: #00acee
1502 .viewport-vim .switch-table tbody tr.selected td {
1503 background-color: #fff
1505 .viewport-vim .switch-table tbody tr.selected td:last-child {
1506 background: #fff url
(./img
/table-cell-bg
.png
) repeat-y right top
1508 .viewport-vim .vim-legend {
1509 display: inline-flex
1511 .viewport-vim .vim-legend div {
1512 background-color: #e5e5e5;
1513 padding: .75rem 1.5rem;
1514 margin-right: .125rem
1516 .viewport-vim .vim-legend div:last-of-type {
1519 .viewport-vim .vim-legend ul {
1522 .viewport-vim .vim-legend ul:first-child {
1523 margin-right: 2.25rem
1525 .viewport-vim .vim-legend ol li:first-child {
1526 align-items: center
;
1527 background: url
(./img
/icon-host-sm
.png
) no-repeat left center
;
1530 margin-bottom: -.5rem;
1531 padding-left: 1.75rem
1533 .viewport-vim .vim-legend li {
1536 .viewport-vim
.vim-legend li em
,
1537 .viewport-vim .vim-legend li i {
1538 margin-right: .75rem
1540 .viewport-vim .navpanel.top {
1541 background-color: #ccc;
1544 align-items: center
;
1546 justify-content: center
1548 .viewport-vim .navpanel.top:before {
1549 border-left: 32px solid
#dadada;
1550 border-top: 30px solid
#ccc
1552 .viewport-vim .navpanel.top:after {
1553 border-right: 32px solid
#dadada;
1554 border-top: 30px solid
#ccc
1556 .viewport-vim
.navpanel
.left
,
1557 .viewport-vim .navpanel.right {
1558 background-color: #f1f1f1;
1563 .viewport-vim
.navpanel
.left
.tilt
,
1564 .viewport-vim .navpanel.right .tilt {
1565 background-color: #dadada;
1570 transform: rotate
(-2deg);
1573 .viewport-vim .navpanel.left .tilt {
1575 transform: rotate
(2deg)
1578 padding-bottom: 2rem
1585 text-transform: uppercase
1589 margin-bottom: .5625rem;
1591 text-transform: uppercase
1593 .viewport-vnf.navpanel-container {
1594 background-color: #f1f1f1
1596 .viewport-vnf .flex-row {
1597 align-items: flex-start
;
1601 .viewport-vnf .flex-row .link-diagram {
1606 .viewport-vnf .flex-row .link-diagram img {
1609 .viewport-vnf .mainpanel {
1610 margin: 0 0 5rem 5rem
1612 .viewport-vnf .vnf-card {
1615 background-color: #e5e5e5
1617 .viewport-vnf .vnf-card:first-child {
1620 .viewport-vnf .vnf-card:last-child {
1623 .viewport-vnf .vnf-card table {
1626 .viewport-vnf .vnf-card td {
1627 border-bottom: 2px solid
#f1f1f1;
1628 border-right: 2px solid
#f1f1f1;
1633 .viewport-vnf .vnf-card td:last-child {
1636 .viewport-vnf .vnf-card td img {
1639 .viewport-vnf .vnf-card td small {
1641 margin-bottom: 1.5em
1643 .viewport-vnf .vnf-card tr:first-child td {
1644 background-color: #e5e5e5
1646 .viewport-vnf .vnf-card tr:last-child td {
1647 background-color: #dadada
1649 .viewport-vnf .vnf-card>ul {
1651 flex-direction: row
;
1654 border-bottom: 2px solid
#f1f1f1
1656 .viewport-vnf .vnf-card>ul li {
1657 background-color: #e5e5e5;
1659 margin-right: .125rem;
1660 padding: 1.5em .75em;
1663 .viewport-vnf .vnf-card>ul li:first-child {
1666 .viewport-vnf .vnf-card>ul li:last-child {
1669 .viewport-vnf .vnf-card>div {
1670 background-color: #dadada;
1671 box-sizing: border-box
;
1672 margin-top: .125rem;
1673 padding: .75rem 1.5rem 1.5rem;
1677 .viewport-vnf .vnf-card>div .button-action-toggle {
1680 .viewport-vnf .vnf-card.vlb .bindings {
1681 padding: 1.125rem 1.5rem
1683 .viewport-vnf .vnf-card.vlb .bindings em {
1687 .viewport-vnf .vnf-card.vlb .bindings img {
1690 .viewport-vnf
.navpanel
.top
,
1691 .viewport-vnf .navpanel.bottom {
1692 background-color: #f1f1f1;
1698 .viewport-vnf
.navpanel
.top
.tilt
,
1699 .viewport-vnf .navpanel.bottom .tilt {
1700 background-color: #dadada;
1705 transform: rotate
(1.4deg);
1708 .viewport-vnf
.navpanel
.top:before
,
1709 .viewport-vnf .navpanel.bottom:before {
1712 .viewport-vnf .navpanel.top:after {
1713 border-right: 48px solid
#ccc;
1714 border-top: 38px solid
#dadada
1716 .viewport-vnf .navpanel.bottom {
1717 transform: scaleY
(-1)
1719 .viewport-vnf .navpanel.bottom:after {
1720 border-left: 48px solid
#dadada;
1721 border-top: 38px solid
#ccc;
1722 transform: scaleY
(-1)
1724 .viewport-vnf .navpanel.right {
1725 background-color: #ccc;
1727 align-items: center
;
1729 justify-content: center
1738 padding-bottom: 2rem
1745 text-transform: uppercase
1749 margin-bottom: .5625rem;
1751 text-transform: uppercase
1753 .wag .slider-container {
1754 width: 50%!important
;
1757 .wag.navpanel-container {
1758 background-color: #f1f1f1
1761 align-items: flex-start
;
1766 margin: 0 5rem 5rem 5rem
1768 .wag .wag-outer-container {
1771 .wag .wag-inner-container {
1772 flex-direction: column
;
1775 .wag .wag-inner-inner-container {
1780 .wag .wag-inner-inner-container .slider-vert-header {
1781 margin: 105px 0 0 -16px
1783 .wag .wag-top-row tbody {
1786 .wag .wag-top-row-half tbody {
1789 .wag .wag-analytics tbody {
1793 .wag
.wag-analytics tr
,
1794 .wag
.wag-top-row tr
,
1795 .wag .wag-top-row-half tr {
1798 .wag .wag-analytics tr:last-child {
1805 .wag .vnf-card:first-child {
1809 .wag .vnf-card:last-child {
1812 .wag .vnf-card table {
1816 border-bottom: 2px solid
#f1f1f1;
1817 border-right: 2px solid
#f1f1f1;
1822 .wag .vnf-card td:last-child {
1825 .wag .vnf-card td img {
1828 .wag .vnf-card td small {
1830 margin-bottom: 1.5em
1832 .wag .vnf-card tr:nth-child(even) td {
1833 background-color: #e5e5e5
1835 .wag .vnf-card tr:nth-child(odd) td {
1836 background-color: #dadada
1838 .wag .vnf-card tr.lighter td {
1839 background-color: #e5e5e5
1843 flex-direction: row
;
1847 .wag .vnf-card>ul li {
1848 background-color: #e5e5e5;
1850 margin-right: .125rem;
1851 padding: 1.5em .75em;
1854 .wag .vnf-card>ul li:first-child {
1857 .wag .vnf-card>ul li:last-child {
1860 .wag .vnf-card>div {
1861 background-color: #dadada;
1862 box-sizing: border-box
;
1863 margin-top: .125rem;
1864 padding: .75rem 1.5rem 1.5rem;
1868 .wag .vnf-card>div .button-action-toggle {
1871 .wag .vnf-card.vlb .bindings {
1872 padding: 1.125rem 1.5rem
1874 .wag .vnf-card.vlb .bindings em {
1878 .wag .vnf-card.vlb .bindings img {
1882 .wag .navpanel.bottom {
1883 background-color: #f1f1f1;
1889 .wag
.navpanel
.top
.tilt
,
1890 .wag .navpanel.bottom .tilt {
1891 background-color: #dadada;
1896 transform: rotate
(1.4deg);
1899 .wag
.navpanel
.top:before
,
1900 .wag .navpanel.bottom:before {
1903 .wag .navpanel.top:after {
1904 border-right: 48px solid
#ccc;
1905 border-top: 38px solid
#dadada
1907 .wag .navpanel.bottom {
1908 transform: scaleY
(-1)
1910 .wag .navpanel.bottom:after {
1911 border-left: 48px solid
#dadada;
1912 border-top: 38px solid
#ccc;
1913 transform: scaleY
(-1)
1915 .wag .navpanel.right {
1916 background-color: #ccc;
1918 align-items: center
;
1920 justify-content: center
1928 border: 1px solid
#088;
1929 border-radius: 10px;
1930 background-color: #0FF;
1936 .viewport-dash .vim-link {
1944 .viewport-dash .vnf-link {
1952 .viewport-dash .so-link {
1960 .viewport-dash .platform-link {
1961 margin-bottom: 20px;
1964 .viewport-dash
.platform-link
.button-half-border:before
,
1965 .viewport-dash .platform-link .button-half-border:after {
1966 background: #f1f1f1;
1974 .viewport-dash .platform-link a:link {
1976 text-decoration: none
1978 .viewport-dash .platform-link a:visited {
1980 text-decoration: none
1982 .viewport-dash .platform-link a:hover {
1984 text-decoration: none
1986 .viewport-dash .platform-link a:active {
1988 text-decoration: none
1993 .viewport-vim .dash-link {
2003 .viewport-vnf .dash-link {
2015 font-family: roboto-thin
, Helvetica
, Arial
, sans-serif
;
2018 .login-cntnr .logo {
2024 margin-bottom: 20px;
2025 background-size: 154px 102px;
2026 /*background-image: url(./img/header-logo.png)*/
2027 background-image: url
(./img
/svg
/osm-logo_color_rgb
.svg
);
2029 .login-cntnr .riftio {
2030 margin-bottom: 40px;
2031 font-size: 1.625rem;
2034 .login-cntnr input {
2039 .login-cntnr .sign-in {
2044 margin-bottom: 40px;
2045 box-shadow: inset
0 1px 2px rgba
(0, 0, 0, .39), 0 -1px 1px #fff, 0 1px 0 #fff;
2048 .login-cntnr .sign-in {
2049 display: inline-block
;
2051 // padding-top: 20px;
2052 -webkit-box-shadow: 4px 4px 1px 0 #d9d9d9;
2053 -moz-box-shadow: 4px 4px 1px 0 #d9d9d9;
2054 box-shadow: 4px 4px 1px 0 #d9d9d9;
2055 background-color: #333;
2057 text-decoration: none
2059 .login-cntnr .create-account {
2063 .login-cntnr .create-account a {