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";
20 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
23 border: 1px solid
#333;
25 display: inline-block
;
29 font-family: roboto-regular
;
30 src: url
(./fonts
/Roboto-Regular-webfont
.eot
);
31 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')
34 font-family: roboto-condensed-bold
;
35 src: url
(./fonts
/RobotoCondensed-Bold-webfont
.eot
);
36 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')
39 font-family: roboto-light
;
40 src: url
(./fonts
/Roboto-Light-webfont
.ttf
)
43 font-family: roboto-regular
, Helvetica
, Arial
, sans-serif
;
58 text-transform: uppercase
63 text-transform: uppercase
68 text-transform: uppercase
73 text-transform: uppercase
87 justify-content: center
90 background-color: #f1f1f1;
96 background: url
(./img
/header-logo
.png
) no-repeat left center
;
103 text-transform: uppercase
105 .header-app nav.launchpad-nav {
106 box-sizing: border-box
;
113 .header-app nav
.launchpad-nav:before
,
114 .header-app nav.launchpad-nav:after {
118 .header-app nav.launchpad-nav:after {
121 .header-app nav.launchpad-nav a {
122 border-left: 1px solid
#e5e5e5;
129 text-decoration:none
;
131 .header-app nav.launchpad-nav h4 {
132 display: inline-block
;
135 text-transform: uppercase
137 .header-app nav.launchpad-nav img {
140 .header-app nav.viewport-nav {
144 .header-app nav.viewport-nav a {
145 text-decoration: none
147 .header-app nav.viewport-nav h2 {
154 text-transform: uppercase
156 .header-app nav.viewport-nav.top h2 {
157 background: url
(./img
/viewport-nav-top
.png
) no-repeat right center
159 .header-app nav.viewport-nav.right h2 {
160 background: url
(./img
/viewport-nav-right
.png
) no-repeat right center
162 .header-app nav.viewport-nav.bottom h2 {
163 background: url
(./img
/viewport-nav-bottom
.png
) no-repeat right center
165 .header-app nav.viewport-nav.left h2 {
166 background: url
(./img
/viewport-nav-left
.png
) no-repeat right center
168 .header-app nav.viewport-nav.center h2 {
169 background: url
(./img
/viewport-nav-center
.png
) no-repeat right center
182 .has-corner-accents {
186 border: 1px solid
#000;
196 .corner-accent.right {
200 .corner-accent.bottom {
204 .corner-accent.left {
211 .has-diag-corners.top:before {
212 border-left: 149px solid
#dadada;
213 border-top: 134px solid
#ccc;
220 .has-diag-corners.top:after {
221 border-right: 149px solid
#dadada;
222 border-top: 134px solid
#ccc;
229 .has-diag-corners.bottom:before {
230 border-right: 149px solid
#ccc;
231 border-top: 134px solid
#dadada;
238 .has-diag-corners.bottom:after {
239 border-left: 149px solid
#ccc;
240 border-top: 134px solid
#dadada;
248 background-color: #00acee!important
;
249 border-color: #00acee!important
;
250 color: #fff!important
253 color: #00acee!important
256 background: #93cb43!important
;
263 background: #30baef!important
;
272 justify-content: center
278 background-color: #00acee;
285 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
300 background-color: rgba
(203, 209, 209, .5);
303 margin: 12px 0 12px 20px
305 .fleet-card .layout-col.left {
308 .fleet-card .layout-col.right {
314 .fleet-card-pwr-status {
315 background-color: #93cb43;
318 .fleet-card-pwr-status:before
,
319 .fleet-card-pwr-status:after {
323 .fleet-card-pwr-status:after {
326 .fleet-card-pwr-status a[href] {
327 display: inline-block
;
331 .fleet-card-pwr-status h2 {
336 margin: 21px 0 0 24px;
337 text-transform: uppercase
339 .fleet-card-pwr-status .button-open-viewport {
345 .fleet-card-pwr-btn {
346 background-color: #333;
347 box-shadow: 2px 2px rgba
(0, 0, 0, .35);
350 display: inline-block
;
354 .fleet-card-env-status {
356 background-color: #7cc118;
360 justify-content: flex-start
362 .fleet-card-env-status h3 {
364 text-transform: uppercase
366 .fleet-card-env-status i {
371 .fleet-card-env-status>div {
376 border: 2px solid rgba
(252, 252, 252, .5);
383 .fleet-card-graph:first-child {
386 .fleet-card-graph h3 {
389 text-transform: uppercase
391 .fleet-card-graph img {
395 .fleet-card-graph-container {
399 background-color: #e5e5e5;
400 border-left: 2px solid rgba
(252, 252, 252, .5);
404 .fleet-card-params dt {
405 background-color: #ccc;
407 text-transform: uppercase
409 .fleet-card-params dd {
410 background-color: #ccc;
411 border-bottom: 2px solid
#f1f1f1;
414 .fleet-card-params-detail {
416 box-sizing: border-box
;
420 .fleet-card-params-detail
.sla-panel
,
421 .fleet-card-params-detail.nfvi-panel {
426 .fleet-card-params-detail h4 {
428 text-transform: uppercase
430 .fleet-card-params-detail h4 i {
434 .fleet-card-params-detail li {
435 border-top: 1px solid
#e5e5e5;
439 .fleet-card-params-detail li:first-child {
442 .fleet-card-params-detail.trafgen-panel {
446 .fleet-card-params-detail.trafgen-panel h4 {
448 text-transform: uppercase
450 .fleet-card-params-detail.trafgen-panel h4 i {
454 .fleet-card-params-detail.trafgen-panel .slider-container {
458 justify-content: space-between
460 .fleet-card-params-detail.trafgen-panel .slider-vert {
464 .fleet-card-params-detail.trafgen-panel .slider-vert-track {
467 .fleet-card-params-detail.trafgen-panel .slider-vert-header {
471 .fleet-card-params-detail.trafgen-panel .slider-vert-start-val {
474 .fleet-card-params-detail.trafgen-panel .slider-vert-end-val {
477 .fleet-card-params-detail.trafgen-panel .packet-size-slider .slider-vert-header {
480 .fleet-card-params-detail.trafgen-panel .packet-size-slider .slider-vert-position {
483 .fleet-card-params-detail.trafgen-panel .packet-size-slider .slider-vert-position.left {
486 .fleet-card-params-detail.trafgen-panel .rate-slider .slider-vert-position {
489 .fleet-card-toggle-set {
490 border-bottom: 2px solid
#f1f1f1;
493 .fleet-card-toggle-set a[role=button] {
494 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
496 .fleet-card-toggle-set a:last-child {
499 .fleet-card-actions {
500 background-color: #ccc;
503 .fleet-card-actions .button-set {
506 .fleet-card-actions a[role=button] {
510 text-transform: uppercase
;
511 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
513 .fleet-card-actions .trafgen-start {
514 background-color: #333;
520 .fleet-card-actions .trafgen-start i {
523 .fleet-card-actions .trafgen-toggle {
524 background-color: #fff;
527 padding: 2px 8px 2px 11px;
531 background-color: #fff;
532 box-shadow: 4px 4px #e5e5e5;
539 .fleet-card-toggle h4 {
542 text-transform: uppercase
544 .fleet-card.empty-card {
547 text-transform: uppercase
549 .fleet-card.empty-card a {
554 text-decoration: none
;
557 .fleet-card.empty-card a img {
560 .fleet-card.empty-card a p {
563 .navpanel-container {
564 background-color: #dadada;
565 box-sizing: border-box
;
570 background-color: #ccc;
571 box-sizing: border-box
;
575 text-decoration: none
585 align-self: baseline
;
594 background-color: #dadada;
629 .config-list.closed {
638 margin-left: 47px!important
640 .slider-vert-header {
643 text-transform: uppercase
;
646 .slider-vert-start-val
,
647 .slider-vert-end-val {
651 border-left: 1px solid
#ccc;
652 border-right: 1px solid
#ccc;
657 .slider-vert-handle {
658 background-color: #00acee;
659 box-shadow: 2px 2px rgba
(0, 0, 0, .2);
660 display: inline-block
;
664 .slider-vert-position {
668 white-space: nowrap
!important
670 .slider-vert-position.left {
673 .slider-vert-position.left .slider-vert-handle {
677 .slider-vert-position.right {
680 .slider-vert-position.right .slider-vert-handle {
686 margin: 12px 27px 12px 0;
690 .slider-toggle:before
,
691 .slider-toggle:after {
695 .slider-toggle:after {
698 .slider-toggle label {
702 text-transform: uppercase
704 .slider-toggle-track {
705 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
707 .slider-toggle-track:before
,
708 .slider-toggle-track:after {
712 .slider-toggle-track:after {
715 .slider-toggle-option {
716 background-color: #fff;
728 .button-action-toggle {
729 background-color: #333;
730 box-shadow: 4px 4px #e5e5e5;
736 text-transform: uppercase
738 .button-action-toggle i {
741 .button-half-border {
742 border: 2px solid
#000;
744 box-shadow: 2px 2px rgba
(0, 0, 0, .35);
749 text-transform: uppercase
751 .button-half-border:before
,
752 .button-half-border:after {
761 .button-half-border:before {
764 .button-half-border:after {
771 .step-control .step {
777 .step-control .step.decrease {
780 .step-control .step.increase {
786 justify-content: center
789 align-content: center
;
792 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
795 background-color: #fff;
801 justify-content: center
803 .toggle-control>a.selected {
804 background-color: #00acee;
813 -webkit-flex-direction: column
;
814 -moz-flex-direction: column
;
815 -ms-flex-direction: column
;
816 flex-direction: column
818 .splitterContainer .content {
821 .splitterContainer #handle {
827 .splitterContainer .splitter {
831 background-image: none
;
834 border-top: 1px solid
#121212;
835 border-bottom: 1px solid
#121212;
836 background-color: #454545;
839 .splitterContainer .splitter .adjust {
845 .splitterContainer .splitter .adjust .splitterButtons {
848 border: 1px solid
#fff;
856 .splitterContainer .vpane-top {
860 .splitterContainer .vpane-bottom {
869 .create-fleet-header {
871 display: inline-block
;
872 margin: 0 0 20px 24px;
875 .create-fleet-header img {
881 .create-fleet-services
,
883 background-color: #e5e5e5
885 .create-fleet>.flex-row {
886 justify-content: space-around
888 .create-fleet>.flex-row>li {
891 .create-fleet>.flex-row>li h3 {
892 background-color: #fff;
894 text-transform: uppercase
896 .create-fleet .list-fleet-services {
902 .create-fleet .list-fleet-services a {
903 background-color: #fff;
907 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
909 .create-fleet .list-fleet-services a h5 {
914 .create-fleet .list-fleet-services a img {
918 .create-fleet .list-pools {
921 .create-fleet .list-pools li a {
922 background-color: #fff;
928 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
930 .create-fleet .list-pools li h4 {
933 .create-fleet .list-pools li img {
937 .create-fleet .parameter-controls {
938 background-color: #e5e5e5;
939 padding: 18px 0 18px 24px
941 .create-fleet
.parameter-controls:before
,
942 .create-fleet .parameter-controls:after {
946 .create-fleet .parameter-controls:after {
949 .create-fleet .parameter-controls.epa label {
954 .create-fleet .parameter-controls.epa .slider-toggle {
957 .create-fleet .parameter-controls.epa .slider-toggle-track {
962 .create-fleet .parameter-controls.epa .slider-toggle-option {
965 .create-fleet .parameter-controls.vmf li {
969 .create-fleet
.parameter-controls
.vmf
li:before
,
970 .create-fleet .parameter-controls.vmf li:after {
974 .create-fleet .parameter-controls.vmf li:after {
977 .create-fleet .parameter-controls.vmf label {
981 text-transform: uppercase
983 .create-fleet .parameter-controls.vmf .step-control {
984 background-color: #fff;
992 .create-fleet .parameter-controls.vmf .step-control .step {
998 justify-content: center
1000 .create-fleet .parameter-controls.vmf .step-control .step.decrease {
1001 background-color: #ccc;
1002 border-right: 2px solid
#e5e5e5;
1005 .create-fleet .parameter-controls.vmf .step-control .step.increase {
1006 background-color: #fff;
1007 border-left: 2px solid
#e5e5e5;
1009 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
1011 .create-fleet .adv-toggle h4 {
1012 background-color: #fff;
1015 .create-fleet-params h4 {
1016 background-color: #00acee;
1021 text-transform: uppercase
;
1022 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
1024 .create-fleet-params h4 i {
1030 .create-fleet-actions {
1035 .create-fleet-actions a {
1037 display: inline-block
;
1040 text-decoration: none
;
1041 text-transform: uppercase
;
1042 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
1044 .create-fleet-actions a.save {
1045 background-color: #fff;
1046 border: 1px solid
#ccc;
1051 .create-fleet-actions a.launch {
1052 background-color: #333;
1053 border: 1px solid
#000;
1057 .create-fleet-actions a
.launch:hover
,
1058 .create-fleet-actions a.launch:active {
1059 background: #00acee;
1065 .viewport-dash .mainpanel {
1066 background: #f1f1f1;
1067 border-left: .1875rem solid
#c2c2c2;
1068 border-right: .1875rem solid
#c2c2c2;
1069 box-sizing: border-box
;
1072 .viewport-dash .mainpanel.flex-row {
1073 align-items: flex-start
;
1076 .viewport-dash .mainpanel.flex-row .flex-left {
1079 .viewport-dash .mainpanel.flex-row .flex-right {
1082 .viewport-dash .mainpanel.flex-row .flex-right .flex-row {
1083 align-items: stretch
;
1086 .viewport-dash .mainpanel.flex-row .flex-right .flex-row .sla-container {
1089 .viewport-dash .mainpanel.flex-row .flex-right .flex-row .network-container {
1092 .viewport-dash .mainpanel.flex-row .flex-right .flex-row .mgmt-container {
1095 .viewport-dash .mainpanel h2 {
1096 background-color: #fff;
1097 margin-bottom: .125rem;
1101 text-transform: uppercase
1103 .viewport-dash .mainpanel table {
1106 .viewport-dash .mainpanel table th {
1107 background: #dadada;
1109 font-size: .6875rem;
1111 text-transform: uppercase
1113 .viewport-dash .mainpanel table td {
1114 background: #e5e5e5;
1115 border-right: .0625rem solid
#e5e5e5;
1116 padding: .5625rem 1.5rem
1118 .viewport-dash .mainpanel table td .status-clear-text {
1119 margin-bottom: .75rem
1121 .viewport-dash .mano {
1122 margin-bottom: 1.5rem
1124 .viewport-dash .mano dl {
1125 align-items: center
;
1126 background: #7cc118;
1129 .viewport-dash
.mano
dl:before
,
1130 .viewport-dash .mano dl:after {
1134 .viewport-dash .mano dl:after {
1137 .viewport-dash
.mano dl dt
,
1138 .viewport-dash .mano dl dd {
1140 padding: .375rem 1.125rem
1142 .viewport-dash .mano dl dt {
1144 font-size: .6875rem;
1146 text-transform: uppercase
1148 .viewport-dash .mano dl dd {
1151 .viewport-dash .mano table {
1154 .viewport-dash .mano table td:last-child {
1157 .viewport-dash .vcs table {
1158 border-collapse: separate
;
1159 border-spacing: .0625rem solid
;
1162 .viewport-dash .vcs table thead th {
1163 background-color: #e5e5e5;
1164 border-right: 1px solid
#dadada;
1167 .viewport-dash .vcs table thead th:last-child {
1170 .viewport-dash .vcs table tbody td {
1172 border-bottom: 1px solid
#e5e5e5
1174 .viewport-dash .vcs table tbody th {
1175 padding-left: 1.125rem;
1179 .viewport-dash .vcs table tbody tr:nth-child(even) th {
1180 background-color: #e5e5e5
1182 .viewport-dash .sla {
1187 .viewport-dash .sla h3 {
1188 font-size: .6875rem;
1190 text-transform: uppercase
1192 .viewport-dash .sla .wp-pool-manager {
1195 .viewport-dash .sla .wp {
1196 background: #dadada;
1197 margin-bottom: .125rem;
1201 .viewport-dash .sla .wp h3 {
1204 .viewport-dash .sla .wp img {
1208 .viewport-dash .sla .pool-manager {
1209 background: #dadada;
1212 .viewport-dash .sla .pool-manager .progress-bar {
1215 .viewport-dash .sla table.stats {
1216 border-left: 2px solid
#f1f1f1;
1221 .viewport-dash
.sla table
.stats th
,
1222 .viewport-dash .sla table.stats td {
1223 border-bottom: 1px solid
#f1f1f1;
1224 border-right: 1px solid
#f1f1f1;
1226 vertical-align: middle
;
1229 .viewport-dash .sla table.stats td {
1232 .viewport-dash .sla table.stats th {
1235 .viewport-dash .sla table.stats th.alt {
1238 .viewport-dash .network li {
1239 background-color: #dadada;
1240 font-size: 1.625rem;
1241 margin-top: .125rem;
1242 padding: 1.125rem .875rem;
1245 .viewport-dash .network li:nth-child(even) {
1246 background-color: #e5e5e5
1248 .viewport-dash .network li:last-child {
1251 .viewport-dash .network li .label {
1253 margin-bottom: .6rem
1255 .viewport-dash .mgmt {
1256 margin: 1.5rem 0 0 1.5rem
1258 .viewport-dash
.mgmt:before
,
1259 .viewport-dash .mgmt:after {
1263 .viewport-dash .mgmt:after {
1266 .viewport-dash .mgmt ul {
1269 .viewport-dash
.mgmt
ul:before
,
1270 .viewport-dash .mgmt ul:after {
1274 .viewport-dash .mgmt ul:after {
1277 .viewport-dash .mgmt h2 {
1280 .viewport-dash .mgmt li {
1281 background: #dadada;
1283 font-size: 1.625rem;
1285 margin-left: .125rem;
1289 .viewport-dash .mgmt li:first-child {
1290 background-color: #fff;
1292 align-items: center
;
1294 justify-content: center
1296 .viewport-dash .mgmt li:nth-child(even) {
1297 background-color: #e5e5e5
1299 .viewport-dash .mgmt li .label {
1301 margin-bottom: .875rem
1303 .viewport-dash .mgmt li .unit {
1306 .viewport-dash .navpanel .service-orch {
1308 align-items: center
;
1309 margin-left: 11.88rem
1311 .viewport-dash .navpanel .service-orch .button-half-border {
1313 margin-right: 7.75rem
1315 .viewport-dash .navpanel .service-orch li {
1316 background: #e5e5e5;
1319 padding: .75rem 1.5rem;
1321 margin-right: 1.5rem;
1323 align-items: center
;
1325 justify-content: center
;
1326 font-size: .6875rem;
1328 text-transform: uppercase
1330 .viewport-dash .navpanel .service-orch li:after {
1331 border-top: 1px solid
#333;
1338 .viewport-dash .navpanel .service-orch li:last-child {
1341 .viewport-dash .navpanel .service-orch li:last-child:after {
1344 .viewport-dash
.navpanel
.vnf
.button-half-border
,
1345 .viewport-dash .navpanel .analytics .button-half-border {
1346 margin: 1rem 0 1.5rem
1348 .viewport-dash
.navpanel
.vnf
.button-half-border:before
,
1349 .viewport-dash
.navpanel
.analytics
.button-half-border:before
,
1350 .viewport-dash
.navpanel
.vnf
.button-half-border:after
,
1351 .viewport-dash .navpanel .analytics .button-half-border:after {
1354 .viewport-dash
.navpanel
.vnf dt
,
1355 .viewport-dash
.navpanel
.analytics dt
,
1356 .viewport-dash
.navpanel
.vnf dd
,
1357 .viewport-dash .navpanel .analytics dd {
1358 margin-bottom: .1875rem;
1361 .viewport-dash
.navpanel
.vnf dt
,
1362 .viewport-dash .navpanel .analytics dt {
1364 font-size: .6875rem;
1366 text-transform: uppercase
1368 .viewport-dash
.navpanel
.vnf dd
,
1369 .viewport-dash .navpanel .analytics dd {
1373 .viewport-dash
.navpanel
.vnf
.unit
,
1374 .viewport-dash .navpanel .analytics .unit {
1378 .viewport-dash .navpanel .vim {
1380 align-items: center
;
1381 margin-left: 11.88rem
1383 .viewport-dash .navpanel .vim .button-half-border {
1385 margin-right: 2.25rem
1387 .viewport-dash .navpanel .vim table {
1388 border-collapse: separate
;
1389 border-spacing: .125rem;
1393 .viewport-dash .navpanel .vim table:last-child {
1396 .viewport-dash .navpanel .vim table th {
1398 padding: .5rem .75rem;
1400 font-size: .6875rem;
1402 text-transform: uppercase
1404 .viewport-dash .navpanel .vim table td {
1405 background: #e5e5e5;
1406 font-size: 1.375rem;
1407 padding: .375rem 1rem .375rem
1409 .viewport-dash .navpanel .vim table td .label {
1411 margin-bottom: .5rem
1413 .viewport-so .vpane-bottom {
1416 .viewport-so .panel-half {
1422 .viewport-vim .mainpanel {
1423 background: #f1f1f1;
1426 .viewport-vim .mainpanel .vim-controls {
1429 .viewport-vim .mainpanel .vim-controls>* {
1431 justify-content: flex-end
1433 .viewport-vim .mainpanel .vim-controls h2 {
1436 .viewport-vim .switch-table-set {
1437 justify-content: space-around
;
1440 .viewport-vim .switch-table {
1443 .viewport-vim .switch-table table {
1446 .viewport-vim
.switch-table th
,
1447 .viewport-vim .switch-table td {
1448 border-bottom: 2px solid
#f1f1f1;
1449 vertical-align: middle
;
1450 padding: .5625rem .875rem
1452 .viewport-vim .switch-table th.switch h3 {
1453 background: url
(./img
/icon-switch
.png
) no-repeat left top
;
1458 .viewport-vim .switch-table th.host {
1459 background: #ccc url
(./img
/icon-host
.png
) no-repeat
21px center
;
1461 padding: 0 1.25rem 0 3.375rem
1463 .viewport-vim .switch-table thead th {
1464 background-color: #fff;
1468 .viewport-vim .switch-table thead th:last-child {
1471 .viewport-vim .switch-table thead th small {
1477 .viewport-vim .switch-table tbody th {
1478 background-color: #ccc;
1480 padding: .5625rem .875rem .875rem 0
1482 .viewport-vim .switch-table tbody td {
1483 background-color: #e5e5e5;
1486 .viewport-vim .switch-table tbody td em {
1489 .viewport-vim .switch-table tbody td i {
1490 font-size: .5625rem;
1491 margin-right: .125rem
1493 .viewport-vim .switch-table tbody td i.inactive {
1496 .viewport-vim .switch-table tbody tr.selected th {
1497 background-color: #00acee
1499 .viewport-vim .switch-table tbody tr.selected td {
1500 background-color: #fff
1502 .viewport-vim .switch-table tbody tr.selected td:last-child {
1503 background: #fff url
(./img
/table-cell-bg
.png
) repeat-y right top
1505 .viewport-vim .vim-legend {
1506 display: inline-flex
1508 .viewport-vim .vim-legend div {
1509 background-color: #e5e5e5;
1510 padding: .75rem 1.5rem;
1511 margin-right: .125rem
1513 .viewport-vim .vim-legend div:last-of-type {
1516 .viewport-vim .vim-legend ul {
1519 .viewport-vim .vim-legend ul:first-child {
1520 margin-right: 2.25rem
1522 .viewport-vim .vim-legend ol li:first-child {
1523 align-items: center
;
1524 background: url
(./img
/icon-host-sm
.png
) no-repeat left center
;
1527 margin-bottom: -.5rem;
1528 padding-left: 1.75rem
1530 .viewport-vim .vim-legend li {
1533 .viewport-vim
.vim-legend li em
,
1534 .viewport-vim .vim-legend li i {
1535 margin-right: .75rem
1537 .viewport-vim .navpanel.top {
1538 background-color: #ccc;
1541 align-items: center
;
1543 justify-content: center
1545 .viewport-vim .navpanel.top:before {
1546 border-left: 32px solid
#dadada;
1547 border-top: 30px solid
#ccc
1549 .viewport-vim .navpanel.top:after {
1550 border-right: 32px solid
#dadada;
1551 border-top: 30px solid
#ccc
1553 .viewport-vim
.navpanel
.left
,
1554 .viewport-vim .navpanel.right {
1555 background-color: #f1f1f1;
1560 .viewport-vim
.navpanel
.left
.tilt
,
1561 .viewport-vim .navpanel.right .tilt {
1562 background-color: #dadada;
1567 transform: rotate
(-2deg);
1570 .viewport-vim .navpanel.left .tilt {
1572 transform: rotate
(2deg)
1575 padding-bottom: 2rem
1582 text-transform: uppercase
1586 margin-bottom: .5625rem;
1588 text-transform: uppercase
1590 .viewport-vnf.navpanel-container {
1591 background-color: #f1f1f1
1593 .viewport-vnf .flex-row {
1594 align-items: flex-start
;
1598 .viewport-vnf .flex-row .link-diagram {
1603 .viewport-vnf .flex-row .link-diagram img {
1606 .viewport-vnf .mainpanel {
1607 margin: 0 0 5rem 5rem
1609 .viewport-vnf .vnf-card {
1612 background-color: #e5e5e5
1614 .viewport-vnf .vnf-card:first-child {
1617 .viewport-vnf .vnf-card:last-child {
1620 .viewport-vnf .vnf-card table {
1623 .viewport-vnf .vnf-card td {
1624 border-bottom: 2px solid
#f1f1f1;
1625 border-right: 2px solid
#f1f1f1;
1630 .viewport-vnf .vnf-card td:last-child {
1633 .viewport-vnf .vnf-card td img {
1636 .viewport-vnf .vnf-card td small {
1638 margin-bottom: 1.5em
1640 .viewport-vnf .vnf-card tr:first-child td {
1641 background-color: #e5e5e5
1643 .viewport-vnf .vnf-card tr:last-child td {
1644 background-color: #dadada
1646 .viewport-vnf .vnf-card>ul {
1648 flex-direction: row
;
1651 border-bottom: 2px solid
#f1f1f1
1653 .viewport-vnf .vnf-card>ul li {
1654 background-color: #e5e5e5;
1656 margin-right: .125rem;
1657 padding: 1.5em .75em;
1660 .viewport-vnf .vnf-card>ul li:first-child {
1663 .viewport-vnf .vnf-card>ul li:last-child {
1666 .viewport-vnf .vnf-card>div {
1667 background-color: #dadada;
1668 box-sizing: border-box
;
1669 margin-top: .125rem;
1670 padding: .75rem 1.5rem 1.5rem;
1674 .viewport-vnf .vnf-card>div .button-action-toggle {
1677 .viewport-vnf .vnf-card.vlb .bindings {
1678 padding: 1.125rem 1.5rem
1680 .viewport-vnf .vnf-card.vlb .bindings em {
1684 .viewport-vnf .vnf-card.vlb .bindings img {
1687 .viewport-vnf
.navpanel
.top
,
1688 .viewport-vnf .navpanel.bottom {
1689 background-color: #f1f1f1;
1695 .viewport-vnf
.navpanel
.top
.tilt
,
1696 .viewport-vnf .navpanel.bottom .tilt {
1697 background-color: #dadada;
1702 transform: rotate
(1.4deg);
1705 .viewport-vnf
.navpanel
.top:before
,
1706 .viewport-vnf .navpanel.bottom:before {
1709 .viewport-vnf .navpanel.top:after {
1710 border-right: 48px solid
#ccc;
1711 border-top: 38px solid
#dadada
1713 .viewport-vnf .navpanel.bottom {
1714 transform: scaleY
(-1)
1716 .viewport-vnf .navpanel.bottom:after {
1717 border-left: 48px solid
#dadada;
1718 border-top: 38px solid
#ccc;
1719 transform: scaleY
(-1)
1721 .viewport-vnf .navpanel.right {
1722 background-color: #ccc;
1724 align-items: center
;
1726 justify-content: center
1735 padding-bottom: 2rem
1742 text-transform: uppercase
1746 margin-bottom: .5625rem;
1748 text-transform: uppercase
1750 .wag .slider-container {
1751 width: 50%!important
;
1754 .wag.navpanel-container {
1755 background-color: #f1f1f1
1758 align-items: flex-start
;
1763 margin: 0 5rem 5rem 5rem
1765 .wag .wag-outer-container {
1768 .wag .wag-inner-container {
1769 flex-direction: column
;
1772 .wag .wag-inner-inner-container {
1777 .wag .wag-inner-inner-container .slider-vert-header {
1778 margin: 105px 0 0 -16px
1780 .wag .wag-top-row tbody {
1783 .wag .wag-top-row-half tbody {
1786 .wag .wag-analytics tbody {
1790 .wag
.wag-analytics tr
,
1791 .wag
.wag-top-row tr
,
1792 .wag .wag-top-row-half tr {
1795 .wag .wag-analytics tr:last-child {
1802 .wag .vnf-card:first-child {
1806 .wag .vnf-card:last-child {
1809 .wag .vnf-card table {
1813 border-bottom: 2px solid
#f1f1f1;
1814 border-right: 2px solid
#f1f1f1;
1819 .wag .vnf-card td:last-child {
1822 .wag .vnf-card td img {
1825 .wag .vnf-card td small {
1827 margin-bottom: 1.5em
1829 .wag .vnf-card tr:nth-child(even) td {
1830 background-color: #e5e5e5
1832 .wag .vnf-card tr:nth-child(odd) td {
1833 background-color: #dadada
1835 .wag .vnf-card tr.lighter td {
1836 background-color: #e5e5e5
1840 flex-direction: row
;
1844 .wag .vnf-card>ul li {
1845 background-color: #e5e5e5;
1847 margin-right: .125rem;
1848 padding: 1.5em .75em;
1851 .wag .vnf-card>ul li:first-child {
1854 .wag .vnf-card>ul li:last-child {
1857 .wag .vnf-card>div {
1858 background-color: #dadada;
1859 box-sizing: border-box
;
1860 margin-top: .125rem;
1861 padding: .75rem 1.5rem 1.5rem;
1865 .wag .vnf-card>div .button-action-toggle {
1868 .wag .vnf-card.vlb .bindings {
1869 padding: 1.125rem 1.5rem
1871 .wag .vnf-card.vlb .bindings em {
1875 .wag .vnf-card.vlb .bindings img {
1879 .wag .navpanel.bottom {
1880 background-color: #f1f1f1;
1886 .wag
.navpanel
.top
.tilt
,
1887 .wag .navpanel.bottom .tilt {
1888 background-color: #dadada;
1893 transform: rotate
(1.4deg);
1896 .wag
.navpanel
.top:before
,
1897 .wag .navpanel.bottom:before {
1900 .wag .navpanel.top:after {
1901 border-right: 48px solid
#ccc;
1902 border-top: 38px solid
#dadada
1904 .wag .navpanel.bottom {
1905 transform: scaleY
(-1)
1907 .wag .navpanel.bottom:after {
1908 border-left: 48px solid
#dadada;
1909 border-top: 38px solid
#ccc;
1910 transform: scaleY
(-1)
1912 .wag .navpanel.right {
1913 background-color: #ccc;
1915 align-items: center
;
1917 justify-content: center
1925 border: 1px solid
#088;
1926 border-radius: 10px;
1927 background-color: #0FF;
1933 .viewport-dash .vim-link {
1941 .viewport-dash .vnf-link {
1949 .viewport-dash .so-link {
1957 .viewport-dash .platform-link {
1958 margin-bottom: 20px;
1961 .viewport-dash
.platform-link
.button-half-border:before
,
1962 .viewport-dash .platform-link .button-half-border:after {
1963 background: #f1f1f1;
1971 .viewport-dash .platform-link a:link {
1973 text-decoration: none
1975 .viewport-dash .platform-link a:visited {
1977 text-decoration: none
1979 .viewport-dash .platform-link a:hover {
1981 text-decoration: none
1983 .viewport-dash .platform-link a:active {
1985 text-decoration: none
1990 .viewport-vim .dash-link {
2000 .viewport-vnf .dash-link {
2012 font-family: roboto-thin
, Helvetica
, Arial
, sans-serif
;
2015 .login-cntnr .logo {
2021 margin-bottom: 20px;
2022 background-size: 154px 102px;
2023 background-image: url
(./img
/header-logo
.png
)
2025 .login-cntnr .riftio {
2026 margin-bottom: 40px;
2027 font-size: 1.625rem;
2030 .login-cntnr input {
2035 .login-cntnr .sign-in {
2040 margin-bottom: 40px;
2041 box-shadow: inset
0 1px 2px rgba
(0, 0, 0, .39), 0 -1px 1px #fff, 0 1px 0 #fff;
2044 .login-cntnr .sign-in {
2045 display: inline-block
;
2047 // padding-top: 20px;
2048 -webkit-box-shadow: 4px 4px 1px 0 #d9d9d9;
2049 -moz-box-shadow: 4px 4px 1px 0 #d9d9d9;
2050 box-shadow: 4px 4px 1px 0 #d9d9d9;
2051 background-color: #333;
2053 text-decoration: none
2055 .login-cntnr .create-account {
2059 .login-cntnr .create-account a {