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
;
105 text-transform: uppercase
107 .header-app nav.launchpad-nav {
108 box-sizing: border-box
;
115 .header-app nav
.launchpad-nav:before
,
116 .header-app nav.launchpad-nav:after {
120 .header-app nav.launchpad-nav:after {
123 .header-app nav.launchpad-nav a {
124 border-left: 1px solid
#e5e5e5;
131 text-decoration:none
;
133 .header-app nav.launchpad-nav h4 {
134 display: inline-block
;
137 text-transform: uppercase
139 .header-app nav.launchpad-nav img {
142 .header-app nav.viewport-nav {
146 .header-app nav.viewport-nav a {
147 text-decoration: none
149 .header-app nav.viewport-nav h2 {
156 text-transform: uppercase
158 .header-app nav.viewport-nav.top h2 {
159 background: url
(./img
/viewport-nav-top
.png
) no-repeat right center
161 .header-app nav.viewport-nav.right h2 {
162 background: url
(./img
/viewport-nav-right
.png
) no-repeat right center
164 .header-app nav.viewport-nav.bottom h2 {
165 background: url
(./img
/viewport-nav-bottom
.png
) no-repeat right center
167 .header-app nav.viewport-nav.left h2 {
168 background: url
(./img
/viewport-nav-left
.png
) no-repeat right center
170 .header-app nav.viewport-nav.center h2 {
171 background: url
(./img
/viewport-nav-center
.png
) no-repeat right center
184 .has-corner-accents {
188 border: 1px solid
#000;
198 .corner-accent.right {
202 .corner-accent.bottom {
206 .corner-accent.left {
213 .has-diag-corners.top:before {
214 border-left: 149px solid
#dadada;
215 border-top: 134px solid
#ccc;
222 .has-diag-corners.top:after {
223 border-right: 149px solid
#dadada;
224 border-top: 134px solid
#ccc;
231 .has-diag-corners.bottom:before {
232 border-right: 149px solid
#ccc;
233 border-top: 134px solid
#dadada;
240 .has-diag-corners.bottom:after {
241 border-left: 149px solid
#ccc;
242 border-top: 134px solid
#dadada;
250 background-color: #00acee!important
;
251 border-color: #00acee!important
;
252 color: #fff!important
255 color: #00acee!important
258 background: #93cb43!important
;
265 background: #30baef!important
;
274 justify-content: center
280 background-color: #00acee;
287 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
302 background-color: rgba
(203, 209, 209, .5);
305 margin: 12px 0 12px 20px
307 .fleet-card .layout-col.left {
310 .fleet-card .layout-col.right {
316 .fleet-card-pwr-status {
317 background-color: #93cb43;
320 .fleet-card-pwr-status:before
,
321 .fleet-card-pwr-status:after {
325 .fleet-card-pwr-status:after {
328 .fleet-card-pwr-status a[href] {
329 display: inline-block
;
333 .fleet-card-pwr-status h2 {
338 margin: 21px 0 0 24px;
339 text-transform: uppercase
341 .fleet-card-pwr-status .button-open-viewport {
347 .fleet-card-pwr-btn {
348 background-color: #333;
349 box-shadow: 2px 2px rgba
(0, 0, 0, .35);
352 display: inline-block
;
356 .fleet-card-env-status {
358 background-color: #7cc118;
362 justify-content: flex-start
364 .fleet-card-env-status h3 {
366 text-transform: uppercase
368 .fleet-card-env-status i {
373 .fleet-card-env-status>div {
378 border: 2px solid rgba
(252, 252, 252, .5);
385 .fleet-card-graph:first-child {
388 .fleet-card-graph h3 {
391 text-transform: uppercase
393 .fleet-card-graph img {
397 .fleet-card-graph-container {
401 background-color: #e5e5e5;
402 border-left: 2px solid rgba
(252, 252, 252, .5);
406 .fleet-card-params dt {
407 background-color: #ccc;
409 text-transform: uppercase
411 .fleet-card-params dd {
412 background-color: #ccc;
413 border-bottom: 2px solid
#f1f1f1;
416 .fleet-card-params-detail {
418 box-sizing: border-box
;
422 .fleet-card-params-detail
.sla-panel
,
423 .fleet-card-params-detail.nfvi-panel {
428 .fleet-card-params-detail h4 {
430 text-transform: uppercase
432 .fleet-card-params-detail h4 i {
436 .fleet-card-params-detail li {
437 border-top: 1px solid
#e5e5e5;
441 .fleet-card-params-detail li:first-child {
444 .fleet-card-params-detail.trafgen-panel {
448 .fleet-card-params-detail.trafgen-panel h4 {
450 text-transform: uppercase
452 .fleet-card-params-detail.trafgen-panel h4 i {
456 .fleet-card-params-detail.trafgen-panel .slider-container {
460 justify-content: space-between
462 .fleet-card-params-detail.trafgen-panel .slider-vert {
466 .fleet-card-params-detail.trafgen-panel .slider-vert-track {
469 .fleet-card-params-detail.trafgen-panel .slider-vert-header {
473 .fleet-card-params-detail.trafgen-panel .slider-vert-start-val {
476 .fleet-card-params-detail.trafgen-panel .slider-vert-end-val {
479 .fleet-card-params-detail.trafgen-panel .packet-size-slider .slider-vert-header {
482 .fleet-card-params-detail.trafgen-panel .packet-size-slider .slider-vert-position {
485 .fleet-card-params-detail.trafgen-panel .packet-size-slider .slider-vert-position.left {
488 .fleet-card-params-detail.trafgen-panel .rate-slider .slider-vert-position {
491 .fleet-card-toggle-set {
492 border-bottom: 2px solid
#f1f1f1;
495 .fleet-card-toggle-set a[role=button] {
496 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
498 .fleet-card-toggle-set a:last-child {
501 .fleet-card-actions {
502 background-color: #ccc;
505 .fleet-card-actions .button-set {
508 .fleet-card-actions a[role=button] {
512 text-transform: uppercase
;
513 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
515 .fleet-card-actions .trafgen-start {
516 background-color: #333;
522 .fleet-card-actions .trafgen-start i {
525 .fleet-card-actions .trafgen-toggle {
526 background-color: #fff;
529 padding: 2px 8px 2px 11px;
533 background-color: #fff;
534 box-shadow: 4px 4px #e5e5e5;
541 .fleet-card-toggle h4 {
544 text-transform: uppercase
546 .fleet-card.empty-card {
549 text-transform: uppercase
551 .fleet-card.empty-card a {
556 text-decoration: none
;
559 .fleet-card.empty-card a img {
562 .fleet-card.empty-card a p {
565 .navpanel-container {
566 background-color: #dadada;
567 box-sizing: border-box
;
572 background-color: #ccc;
573 box-sizing: border-box
;
577 text-decoration: none
587 align-self: baseline
;
596 background-color: #dadada;
631 .config-list.closed {
640 margin-left: 47px!important
642 .slider-vert-header {
645 text-transform: uppercase
;
648 .slider-vert-start-val
,
649 .slider-vert-end-val {
653 border-left: 1px solid
#ccc;
654 border-right: 1px solid
#ccc;
659 .slider-vert-handle {
660 background-color: #00acee;
661 box-shadow: 2px 2px rgba
(0, 0, 0, .2);
662 display: inline-block
;
666 .slider-vert-position {
670 white-space: nowrap
!important
672 .slider-vert-position.left {
675 .slider-vert-position.left .slider-vert-handle {
679 .slider-vert-position.right {
682 .slider-vert-position.right .slider-vert-handle {
688 margin: 12px 27px 12px 0;
692 .slider-toggle:before
,
693 .slider-toggle:after {
697 .slider-toggle:after {
700 .slider-toggle label {
704 text-transform: uppercase
706 .slider-toggle-track {
707 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
709 .slider-toggle-track:before
,
710 .slider-toggle-track:after {
714 .slider-toggle-track:after {
717 .slider-toggle-option {
718 background-color: #fff;
730 .button-action-toggle {
731 background-color: #333;
732 box-shadow: 4px 4px #e5e5e5;
738 text-transform: uppercase
740 .button-action-toggle i {
743 .button-half-border {
744 border: 2px solid
#000;
746 box-shadow: 2px 2px rgba
(0, 0, 0, .35);
751 text-transform: uppercase
753 .button-half-border:before
,
754 .button-half-border:after {
763 .button-half-border:before {
766 .button-half-border:after {
773 .step-control .step {
779 .step-control .step.decrease {
782 .step-control .step.increase {
788 justify-content: center
791 align-content: center
;
794 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
797 background-color: #fff;
803 justify-content: center
805 .toggle-control>a.selected {
806 background-color: #00acee;
815 -webkit-flex-direction: column
;
816 -moz-flex-direction: column
;
817 -ms-flex-direction: column
;
818 flex-direction: column
820 .splitterContainer .content {
823 .splitterContainer #handle {
829 .splitterContainer .splitter {
833 background-image: none
;
836 border-top: 1px solid
#121212;
837 border-bottom: 1px solid
#121212;
838 background-color: #454545;
841 .splitterContainer .splitter .adjust {
847 .splitterContainer .splitter .adjust .splitterButtons {
850 border: 1px solid
#fff;
858 .splitterContainer .vpane-top {
862 .splitterContainer .vpane-bottom {
871 .create-fleet-header {
873 display: inline-block
;
874 margin: 0 0 20px 24px;
877 .create-fleet-header img {
883 .create-fleet-services
,
885 background-color: #e5e5e5
887 .create-fleet>.flex-row {
888 justify-content: space-around
890 .create-fleet>.flex-row>li {
893 .create-fleet>.flex-row>li h3 {
894 background-color: #fff;
896 text-transform: uppercase
898 .create-fleet .list-fleet-services {
904 .create-fleet .list-fleet-services a {
905 background-color: #fff;
909 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
911 .create-fleet .list-fleet-services a h5 {
916 .create-fleet .list-fleet-services a img {
920 .create-fleet .list-pools {
923 .create-fleet .list-pools li a {
924 background-color: #fff;
930 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
932 .create-fleet .list-pools li h4 {
935 .create-fleet .list-pools li img {
939 .create-fleet .parameter-controls {
940 background-color: #e5e5e5;
941 padding: 18px 0 18px 24px
943 .create-fleet
.parameter-controls:before
,
944 .create-fleet .parameter-controls:after {
948 .create-fleet .parameter-controls:after {
951 .create-fleet .parameter-controls.epa label {
956 .create-fleet .parameter-controls.epa .slider-toggle {
959 .create-fleet .parameter-controls.epa .slider-toggle-track {
964 .create-fleet .parameter-controls.epa .slider-toggle-option {
967 .create-fleet .parameter-controls.vmf li {
971 .create-fleet
.parameter-controls
.vmf
li:before
,
972 .create-fleet .parameter-controls.vmf li:after {
976 .create-fleet .parameter-controls.vmf li:after {
979 .create-fleet .parameter-controls.vmf label {
983 text-transform: uppercase
985 .create-fleet .parameter-controls.vmf .step-control {
986 background-color: #fff;
994 .create-fleet .parameter-controls.vmf .step-control .step {
1000 justify-content: center
1002 .create-fleet .parameter-controls.vmf .step-control .step.decrease {
1003 background-color: #ccc;
1004 border-right: 2px solid
#e5e5e5;
1007 .create-fleet .parameter-controls.vmf .step-control .step.increase {
1008 background-color: #fff;
1009 border-left: 2px solid
#e5e5e5;
1011 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
1013 .create-fleet .adv-toggle h4 {
1014 background-color: #fff;
1017 .create-fleet-params h4 {
1018 background-color: #00acee;
1023 text-transform: uppercase
;
1024 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
1026 .create-fleet-params h4 i {
1032 .create-fleet-actions {
1037 .create-fleet-actions a {
1039 display: inline-block
;
1042 text-decoration: none
;
1043 text-transform: uppercase
;
1044 box-shadow: 2px 2px rgba
(0, 0, 0, .15)
1046 .create-fleet-actions a.save {
1047 background-color: #fff;
1048 border: 1px solid
#ccc;
1053 .create-fleet-actions a.launch {
1054 background-color: #333;
1055 border: 1px solid
#000;
1059 .create-fleet-actions a
.launch:hover
,
1060 .create-fleet-actions a.launch:active {
1061 background: #00acee;
1067 .viewport-dash .mainpanel {
1068 background: #f1f1f1;
1069 border-left: .1875rem solid
#c2c2c2;
1070 border-right: .1875rem solid
#c2c2c2;
1071 box-sizing: border-box
;
1074 .viewport-dash .mainpanel.flex-row {
1075 align-items: flex-start
;
1078 .viewport-dash .mainpanel.flex-row .flex-left {
1081 .viewport-dash .mainpanel.flex-row .flex-right {
1084 .viewport-dash .mainpanel.flex-row .flex-right .flex-row {
1085 align-items: stretch
;
1088 .viewport-dash .mainpanel.flex-row .flex-right .flex-row .sla-container {
1091 .viewport-dash .mainpanel.flex-row .flex-right .flex-row .network-container {
1094 .viewport-dash .mainpanel.flex-row .flex-right .flex-row .mgmt-container {
1097 .viewport-dash .mainpanel h2 {
1098 background-color: #fff;
1099 margin-bottom: .125rem;
1103 text-transform: uppercase
1105 .viewport-dash .mainpanel table {
1108 .viewport-dash .mainpanel table th {
1109 background: #dadada;
1111 font-size: .6875rem;
1113 text-transform: uppercase
1115 .viewport-dash .mainpanel table td {
1116 background: #e5e5e5;
1117 border-right: .0625rem solid
#e5e5e5;
1118 padding: .5625rem 1.5rem
1120 .viewport-dash .mainpanel table td .status-clear-text {
1121 margin-bottom: .75rem
1123 .viewport-dash .mano {
1124 margin-bottom: 1.5rem
1126 .viewport-dash .mano dl {
1127 align-items: center
;
1128 background: #7cc118;
1131 .viewport-dash
.mano
dl:before
,
1132 .viewport-dash .mano dl:after {
1136 .viewport-dash .mano dl:after {
1139 .viewport-dash
.mano dl dt
,
1140 .viewport-dash .mano dl dd {
1142 padding: .375rem 1.125rem
1144 .viewport-dash .mano dl dt {
1146 font-size: .6875rem;
1148 text-transform: uppercase
1150 .viewport-dash .mano dl dd {
1153 .viewport-dash .mano table {
1156 .viewport-dash .mano table td:last-child {
1159 .viewport-dash .vcs table {
1160 border-collapse: separate
;
1161 border-spacing: .0625rem solid
;
1164 .viewport-dash .vcs table thead th {
1165 background-color: #e5e5e5;
1166 border-right: 1px solid
#dadada;
1169 .viewport-dash .vcs table thead th:last-child {
1172 .viewport-dash .vcs table tbody td {
1174 border-bottom: 1px solid
#e5e5e5
1176 .viewport-dash .vcs table tbody th {
1177 padding-left: 1.125rem;
1181 .viewport-dash .vcs table tbody tr:nth-child(even) th {
1182 background-color: #e5e5e5
1184 .viewport-dash .sla {
1189 .viewport-dash .sla h3 {
1190 font-size: .6875rem;
1192 text-transform: uppercase
1194 .viewport-dash .sla .wp-pool-manager {
1197 .viewport-dash .sla .wp {
1198 background: #dadada;
1199 margin-bottom: .125rem;
1203 .viewport-dash .sla .wp h3 {
1206 .viewport-dash .sla .wp img {
1210 .viewport-dash .sla .pool-manager {
1211 background: #dadada;
1214 .viewport-dash .sla .pool-manager .progress-bar {
1217 .viewport-dash .sla table.stats {
1218 border-left: 2px solid
#f1f1f1;
1223 .viewport-dash
.sla table
.stats th
,
1224 .viewport-dash .sla table.stats td {
1225 border-bottom: 1px solid
#f1f1f1;
1226 border-right: 1px solid
#f1f1f1;
1228 vertical-align: middle
;
1231 .viewport-dash .sla table.stats td {
1234 .viewport-dash .sla table.stats th {
1237 .viewport-dash .sla table.stats th.alt {
1240 .viewport-dash .network li {
1241 background-color: #dadada;
1242 font-size: 1.625rem;
1243 margin-top: .125rem;
1244 padding: 1.125rem .875rem;
1247 .viewport-dash .network li:nth-child(even) {
1248 background-color: #e5e5e5
1250 .viewport-dash .network li:last-child {
1253 .viewport-dash .network li .label {
1255 margin-bottom: .6rem
1257 .viewport-dash .mgmt {
1258 margin: 1.5rem 0 0 1.5rem
1260 .viewport-dash
.mgmt:before
,
1261 .viewport-dash .mgmt:after {
1265 .viewport-dash .mgmt:after {
1268 .viewport-dash .mgmt ul {
1271 .viewport-dash
.mgmt
ul:before
,
1272 .viewport-dash .mgmt ul:after {
1276 .viewport-dash .mgmt ul:after {
1279 .viewport-dash .mgmt h2 {
1282 .viewport-dash .mgmt li {
1283 background: #dadada;
1285 font-size: 1.625rem;
1287 margin-left: .125rem;
1291 .viewport-dash .mgmt li:first-child {
1292 background-color: #fff;
1294 align-items: center
;
1296 justify-content: center
1298 .viewport-dash .mgmt li:nth-child(even) {
1299 background-color: #e5e5e5
1301 .viewport-dash .mgmt li .label {
1303 margin-bottom: .875rem
1305 .viewport-dash .mgmt li .unit {
1308 .viewport-dash .navpanel .service-orch {
1310 align-items: center
;
1311 margin-left: 11.88rem
1313 .viewport-dash .navpanel .service-orch .button-half-border {
1315 margin-right: 7.75rem
1317 .viewport-dash .navpanel .service-orch li {
1318 background: #e5e5e5;
1321 padding: .75rem 1.5rem;
1323 margin-right: 1.5rem;
1325 align-items: center
;
1327 justify-content: center
;
1328 font-size: .6875rem;
1330 text-transform: uppercase
1332 .viewport-dash .navpanel .service-orch li:after {
1333 border-top: 1px solid
#333;
1340 .viewport-dash .navpanel .service-orch li:last-child {
1343 .viewport-dash .navpanel .service-orch li:last-child:after {
1346 .viewport-dash
.navpanel
.vnf
.button-half-border
,
1347 .viewport-dash .navpanel .analytics .button-half-border {
1348 margin: 1rem 0 1.5rem
1350 .viewport-dash
.navpanel
.vnf
.button-half-border:before
,
1351 .viewport-dash
.navpanel
.analytics
.button-half-border:before
,
1352 .viewport-dash
.navpanel
.vnf
.button-half-border:after
,
1353 .viewport-dash .navpanel .analytics .button-half-border:after {
1356 .viewport-dash
.navpanel
.vnf dt
,
1357 .viewport-dash
.navpanel
.analytics dt
,
1358 .viewport-dash
.navpanel
.vnf dd
,
1359 .viewport-dash .navpanel .analytics dd {
1360 margin-bottom: .1875rem;
1363 .viewport-dash
.navpanel
.vnf dt
,
1364 .viewport-dash .navpanel .analytics dt {
1366 font-size: .6875rem;
1368 text-transform: uppercase
1370 .viewport-dash
.navpanel
.vnf dd
,
1371 .viewport-dash .navpanel .analytics dd {
1375 .viewport-dash
.navpanel
.vnf
.unit
,
1376 .viewport-dash .navpanel .analytics .unit {
1380 .viewport-dash .navpanel .vim {
1382 align-items: center
;
1383 margin-left: 11.88rem
1385 .viewport-dash .navpanel .vim .button-half-border {
1387 margin-right: 2.25rem
1389 .viewport-dash .navpanel .vim table {
1390 border-collapse: separate
;
1391 border-spacing: .125rem;
1395 .viewport-dash .navpanel .vim table:last-child {
1398 .viewport-dash .navpanel .vim table th {
1400 padding: .5rem .75rem;
1402 font-size: .6875rem;
1404 text-transform: uppercase
1406 .viewport-dash .navpanel .vim table td {
1407 background: #e5e5e5;
1408 font-size: 1.375rem;
1409 padding: .375rem 1rem .375rem
1411 .viewport-dash .navpanel .vim table td .label {
1413 margin-bottom: .5rem
1415 .viewport-so .vpane-bottom {
1418 .viewport-so .panel-half {
1424 .viewport-vim .mainpanel {
1425 background: #f1f1f1;
1428 .viewport-vim .mainpanel .vim-controls {
1431 .viewport-vim .mainpanel .vim-controls>* {
1433 justify-content: flex-end
1435 .viewport-vim .mainpanel .vim-controls h2 {
1438 .viewport-vim .switch-table-set {
1439 justify-content: space-around
;
1442 .viewport-vim .switch-table {
1445 .viewport-vim .switch-table table {
1448 .viewport-vim
.switch-table th
,
1449 .viewport-vim .switch-table td {
1450 border-bottom: 2px solid
#f1f1f1;
1451 vertical-align: middle
;
1452 padding: .5625rem .875rem
1454 .viewport-vim .switch-table th.switch h3 {
1455 background: url
(./img
/icon-switch
.png
) no-repeat left top
;
1460 .viewport-vim .switch-table th.host {
1461 background: #ccc url
(./img
/icon-host
.png
) no-repeat
21px center
;
1463 padding: 0 1.25rem 0 3.375rem
1465 .viewport-vim .switch-table thead th {
1466 background-color: #fff;
1470 .viewport-vim .switch-table thead th:last-child {
1473 .viewport-vim .switch-table thead th small {
1479 .viewport-vim .switch-table tbody th {
1480 background-color: #ccc;
1482 padding: .5625rem .875rem .875rem 0
1484 .viewport-vim .switch-table tbody td {
1485 background-color: #e5e5e5;
1488 .viewport-vim .switch-table tbody td em {
1491 .viewport-vim .switch-table tbody td i {
1492 font-size: .5625rem;
1493 margin-right: .125rem
1495 .viewport-vim .switch-table tbody td i.inactive {
1498 .viewport-vim .switch-table tbody tr.selected th {
1499 background-color: #00acee
1501 .viewport-vim .switch-table tbody tr.selected td {
1502 background-color: #fff
1504 .viewport-vim .switch-table tbody tr.selected td:last-child {
1505 background: #fff url
(./img
/table-cell-bg
.png
) repeat-y right top
1507 .viewport-vim .vim-legend {
1508 display: inline-flex
1510 .viewport-vim .vim-legend div {
1511 background-color: #e5e5e5;
1512 padding: .75rem 1.5rem;
1513 margin-right: .125rem
1515 .viewport-vim .vim-legend div:last-of-type {
1518 .viewport-vim .vim-legend ul {
1521 .viewport-vim .vim-legend ul:first-child {
1522 margin-right: 2.25rem
1524 .viewport-vim .vim-legend ol li:first-child {
1525 align-items: center
;
1526 background: url
(./img
/icon-host-sm
.png
) no-repeat left center
;
1529 margin-bottom: -.5rem;
1530 padding-left: 1.75rem
1532 .viewport-vim .vim-legend li {
1535 .viewport-vim
.vim-legend li em
,
1536 .viewport-vim .vim-legend li i {
1537 margin-right: .75rem
1539 .viewport-vim .navpanel.top {
1540 background-color: #ccc;
1543 align-items: center
;
1545 justify-content: center
1547 .viewport-vim .navpanel.top:before {
1548 border-left: 32px solid
#dadada;
1549 border-top: 30px solid
#ccc
1551 .viewport-vim .navpanel.top:after {
1552 border-right: 32px solid
#dadada;
1553 border-top: 30px solid
#ccc
1555 .viewport-vim
.navpanel
.left
,
1556 .viewport-vim .navpanel.right {
1557 background-color: #f1f1f1;
1562 .viewport-vim
.navpanel
.left
.tilt
,
1563 .viewport-vim .navpanel.right .tilt {
1564 background-color: #dadada;
1569 transform: rotate
(-2deg);
1572 .viewport-vim .navpanel.left .tilt {
1574 transform: rotate
(2deg)
1577 padding-bottom: 2rem
1584 text-transform: uppercase
1588 margin-bottom: .5625rem;
1590 text-transform: uppercase
1592 .viewport-vnf.navpanel-container {
1593 background-color: #f1f1f1
1595 .viewport-vnf .flex-row {
1596 align-items: flex-start
;
1600 .viewport-vnf .flex-row .link-diagram {
1605 .viewport-vnf .flex-row .link-diagram img {
1608 .viewport-vnf .mainpanel {
1609 margin: 0 0 5rem 5rem
1611 .viewport-vnf .vnf-card {
1614 background-color: #e5e5e5
1616 .viewport-vnf .vnf-card:first-child {
1619 .viewport-vnf .vnf-card:last-child {
1622 .viewport-vnf .vnf-card table {
1625 .viewport-vnf .vnf-card td {
1626 border-bottom: 2px solid
#f1f1f1;
1627 border-right: 2px solid
#f1f1f1;
1632 .viewport-vnf .vnf-card td:last-child {
1635 .viewport-vnf .vnf-card td img {
1638 .viewport-vnf .vnf-card td small {
1640 margin-bottom: 1.5em
1642 .viewport-vnf .vnf-card tr:first-child td {
1643 background-color: #e5e5e5
1645 .viewport-vnf .vnf-card tr:last-child td {
1646 background-color: #dadada
1648 .viewport-vnf .vnf-card>ul {
1650 flex-direction: row
;
1653 border-bottom: 2px solid
#f1f1f1
1655 .viewport-vnf .vnf-card>ul li {
1656 background-color: #e5e5e5;
1658 margin-right: .125rem;
1659 padding: 1.5em .75em;
1662 .viewport-vnf .vnf-card>ul li:first-child {
1665 .viewport-vnf .vnf-card>ul li:last-child {
1668 .viewport-vnf .vnf-card>div {
1669 background-color: #dadada;
1670 box-sizing: border-box
;
1671 margin-top: .125rem;
1672 padding: .75rem 1.5rem 1.5rem;
1676 .viewport-vnf .vnf-card>div .button-action-toggle {
1679 .viewport-vnf .vnf-card.vlb .bindings {
1680 padding: 1.125rem 1.5rem
1682 .viewport-vnf .vnf-card.vlb .bindings em {
1686 .viewport-vnf .vnf-card.vlb .bindings img {
1689 .viewport-vnf
.navpanel
.top
,
1690 .viewport-vnf .navpanel.bottom {
1691 background-color: #f1f1f1;
1697 .viewport-vnf
.navpanel
.top
.tilt
,
1698 .viewport-vnf .navpanel.bottom .tilt {
1699 background-color: #dadada;
1704 transform: rotate
(1.4deg);
1707 .viewport-vnf
.navpanel
.top:before
,
1708 .viewport-vnf .navpanel.bottom:before {
1711 .viewport-vnf .navpanel.top:after {
1712 border-right: 48px solid
#ccc;
1713 border-top: 38px solid
#dadada
1715 .viewport-vnf .navpanel.bottom {
1716 transform: scaleY
(-1)
1718 .viewport-vnf .navpanel.bottom:after {
1719 border-left: 48px solid
#dadada;
1720 border-top: 38px solid
#ccc;
1721 transform: scaleY
(-1)
1723 .viewport-vnf .navpanel.right {
1724 background-color: #ccc;
1726 align-items: center
;
1728 justify-content: center
1737 padding-bottom: 2rem
1744 text-transform: uppercase
1748 margin-bottom: .5625rem;
1750 text-transform: uppercase
1752 .wag .slider-container {
1753 width: 50%!important
;
1756 .wag.navpanel-container {
1757 background-color: #f1f1f1
1760 align-items: flex-start
;
1765 margin: 0 5rem 5rem 5rem
1767 .wag .wag-outer-container {
1770 .wag .wag-inner-container {
1771 flex-direction: column
;
1774 .wag .wag-inner-inner-container {
1779 .wag .wag-inner-inner-container .slider-vert-header {
1780 margin: 105px 0 0 -16px
1782 .wag .wag-top-row tbody {
1785 .wag .wag-top-row-half tbody {
1788 .wag .wag-analytics tbody {
1792 .wag
.wag-analytics tr
,
1793 .wag
.wag-top-row tr
,
1794 .wag .wag-top-row-half tr {
1797 .wag .wag-analytics tr:last-child {
1804 .wag .vnf-card:first-child {
1808 .wag .vnf-card:last-child {
1811 .wag .vnf-card table {
1815 border-bottom: 2px solid
#f1f1f1;
1816 border-right: 2px solid
#f1f1f1;
1821 .wag .vnf-card td:last-child {
1824 .wag .vnf-card td img {
1827 .wag .vnf-card td small {
1829 margin-bottom: 1.5em
1831 .wag .vnf-card tr:nth-child(even) td {
1832 background-color: #e5e5e5
1834 .wag .vnf-card tr:nth-child(odd) td {
1835 background-color: #dadada
1837 .wag .vnf-card tr.lighter td {
1838 background-color: #e5e5e5
1842 flex-direction: row
;
1846 .wag .vnf-card>ul li {
1847 background-color: #e5e5e5;
1849 margin-right: .125rem;
1850 padding: 1.5em .75em;
1853 .wag .vnf-card>ul li:first-child {
1856 .wag .vnf-card>ul li:last-child {
1859 .wag .vnf-card>div {
1860 background-color: #dadada;
1861 box-sizing: border-box
;
1862 margin-top: .125rem;
1863 padding: .75rem 1.5rem 1.5rem;
1867 .wag .vnf-card>div .button-action-toggle {
1870 .wag .vnf-card.vlb .bindings {
1871 padding: 1.125rem 1.5rem
1873 .wag .vnf-card.vlb .bindings em {
1877 .wag .vnf-card.vlb .bindings img {
1881 .wag .navpanel.bottom {
1882 background-color: #f1f1f1;
1888 .wag
.navpanel
.top
.tilt
,
1889 .wag .navpanel.bottom .tilt {
1890 background-color: #dadada;
1895 transform: rotate
(1.4deg);
1898 .wag
.navpanel
.top:before
,
1899 .wag .navpanel.bottom:before {
1902 .wag .navpanel.top:after {
1903 border-right: 48px solid
#ccc;
1904 border-top: 38px solid
#dadada
1906 .wag .navpanel.bottom {
1907 transform: scaleY
(-1)
1909 .wag .navpanel.bottom:after {
1910 border-left: 48px solid
#dadada;
1911 border-top: 38px solid
#ccc;
1912 transform: scaleY
(-1)
1914 .wag .navpanel.right {
1915 background-color: #ccc;
1917 align-items: center
;
1919 justify-content: center
1927 border: 1px solid
#088;
1928 border-radius: 10px;
1929 background-color: #0FF;
1935 .viewport-dash .vim-link {
1943 .viewport-dash .vnf-link {
1951 .viewport-dash .so-link {
1959 .viewport-dash .platform-link {
1960 margin-bottom: 20px;
1963 .viewport-dash
.platform-link
.button-half-border:before
,
1964 .viewport-dash .platform-link .button-half-border:after {
1965 background: #f1f1f1;
1973 .viewport-dash .platform-link a:link {
1975 text-decoration: none
1977 .viewport-dash .platform-link a:visited {
1979 text-decoration: none
1981 .viewport-dash .platform-link a:hover {
1983 text-decoration: none
1985 .viewport-dash .platform-link a:active {
1987 text-decoration: none
1992 .viewport-vim .dash-link {
2002 .viewport-vnf .dash-link {
2014 font-family: roboto-thin
, Helvetica
, Arial
, sans-serif
;
2017 .login-cntnr .logo {
2023 margin-bottom: 20px;
2024 background-size: 154px 102px;
2025 background-image: url
(./img
/header-logo
.png
)
2027 .login-cntnr .riftio {
2028 margin-bottom: 40px;
2029 font-size: 1.625rem;
2032 .login-cntnr input {
2037 .login-cntnr .sign-in {
2042 margin-bottom: 40px;
2043 box-shadow: inset
0 1px 2px rgba
(0, 0, 0, .39), 0 -1px 1px #fff, 0 1px 0 #fff;
2046 .login-cntnr .sign-in {
2047 display: inline-block
;
2049 // padding-top: 20px;
2050 -webkit-box-shadow: 4px 4px 1px 0 #d9d9d9;
2051 -moz-box-shadow: 4px 4px 1px 0 #d9d9d9;
2052 box-shadow: 4px 4px 1px 0 #d9d9d9;
2053 background-color: #333;
2055 text-decoration: none
2057 .login-cntnr .create-account {
2061 .login-cntnr .create-account a {