.body-wrapper .overlay-area-custom .overlay-div.wizard { background:$overlay-bg-color; padding:0 ; width:100%; top:0; left:0; position: relative; color:white; .top { background:$overlay-color-header; height:$bar-menu-height + $bar-submenu-height; position:fixed; left:0; right:0; bottom:auto; top:$header-height; width:100%; z-index:40; .numbers.row { max-width: 100%; padding:0 $header-padding-horizontal; .close { color:$primary-color; &:hover, &:focus { color:white; } } height: $bar-menu-height; line-height: 50px; background:$overlay-color-top; } .menus { height: $bar-submenu-height; .sub-menu { display: none; &.current { display: block; animation: fadeIn 0.7s; -webkit-animation: fadeIn 0.7s; } ul { margin:0; padding:0; list-style: none outside none; font-size:emCalc(12px); li { display: inline; margin-right:10px; line-height: $bar-submenu-height; list-style: none outside none; &.current { text-decoration: underline; a { color: white; } } a { color:$body-font-color; &:hover, &:focus, { color:white; } &.disabled { color: $inactive-color; cursor: default; } } } } } } .nums { text-align: right; list-style:none outside none; margin:0; height: 50px; line-height: 50px; font-size:emCalc(9px); padding-right:120px; color:$secondary-color; li { list-style:none outside none; display: inline; p { display: none; position: relative; top: 1px; font-size:12px; margin-left:12px; strong { margin-right:5px; } } em { display: inline-block; border-radius:50%; border:1px solid $secondary-color; width:20px; height:20px; line-height: 18px; margin:0 3px; text-align: center; font-style: normal; } a { color:$secondary-color; display: block; &:hover { cursor: default; } } &.current{ float: left; animation: fadeIn 0.7s; -webkit-animation: fadeIn 0.7s; p { display: inline-block; } em { font-size:12px; width:30px; height:30px; line-height: 27px; border-color:$secondary-color; * { color:$secondary-color; } } } &.past { display: none; } } } } .middle { padding-top:$bar-height+$bar-submenu-height; .steps { position:relative; width:100%; } .step { &.moveLeft { left: 100%; top: 0 } // background-color: cyan; border: 1px solid white; position: absolute; // top:0; width:100%; display:none; padding:50px 0 50px; &.current { display: block; } h2 { color: white; font-size: 1em; } li { list-style: none outside none; position: relative; } a { color: white; } .vms-list { margin-top: emCalc(16px); &>li { margin-bottom: emCalc(8px); margin-left: emCalc(24px); &:first-child { .img-wrap .snf-font{ color: white; } } &>div, &>a { display: inline-block; margin-right: 15px; } .img-wrap { position: relative; width: emCalc(30px); .snf-font { font-size: emCalc(30px); color: $vm-active-color; line-height: 120% } .os{ @include sprite('../images/os-unknown.png', 14px, 14px); background-size: 14px; top: 5px; left: 18px; } } .name { width: $conf-area-h-width; } } } &.step-2 { // padding-top:30px; .dropdown { margin-bottom:40px; } } &.step-3 { // padding-top: 45px; } .os { li { display: none; list-style: none outside none; font-size:emCalc(12px); @extend .clearfix; padding:15px 0; &:hover, &.hover { background:$gray-0; } &.current { background:white; color:$overlay-bg-color; .name-col { color:$overlay-bg-color; } .btn-col { a { border-color:$overlay-bg-color; color:$overlay-bg-color; &:hover { span { border-color:$overlay-bg-color; } } &.current { color:white; span { background:$overlay-bg-color; } } } } } &.system-images { display: list-item; } .img-col { float:left; width:50px; line-height: $btn-height; } .name-col { float: left; color: $wizard-base-font-color; width:71%; padding-right:10px; line-height: $btn-height; } .size-col { float:left; width:10%; line-height: $btn-height; } .btn-col { float:right; width:10%; margin-left:10px; a { @extend .btn5; font-size:1em; &.current { color:$overlay-bg-color; } } } .details { display: none; background:darken(white,10%); padding:22px 0; margin:20px 6px -9px; color: $body-font-color; h3 { font-size: 1em; font-weight: normal; margin-bottom:1em; padding-left:50px; } dl { margin:0; padding-left:50px; @extend .clearfix; dt { width: 20%; float:left; font-weight:normal; } dd { margin:0 0 5px; } } } } } .flavor { list-style: none outside none; li { list-style:none outside none; margin-bottom:30px; .title { @extend .clearfix; height:40px; overflow:hidden; margin-bottom:emCalc(8px); color:white; vertical-align: top; .snf-font { display: block; width:60px; font-size:38px; float: left; position: relative; bottom: -3px; } h2 { font-size:emCalc(14px); span { font-weight:normal; } float:left; width: 140px; color:white; margin-right:60px; padding-left:emCalc(10px); em { display: block; margin-top:4px; font-size:11px; font-style:normal; font-weight:normal; white-space: nowrap; line-height: 13px; } } p { visibility: hidden; overflow:hidden; min-height:40px; font-size:11px; line-height:11px; } } .options-bar { @extend .clearfix; .bar { width:200px; float:left; margin-right:60px; height: 20px; position: relative; top:10px; .wrap { border:1px solid white; padding:1px; height: 100%; &.disabled-progress-bar { border-color: $disabled-resource-color; .container{ .total { background-color: $disabled-resource-color; } } } .container { height: 100%; .total { background:$primary-color; height: 100%; float:left; position: relative; .current { background:white; height: 100%; float:left; } span { position:absolute; right:10px; font-size: emCalc(9px); top:2px; } &.low { span { right:-30px; color:white; } } } } } } .options { overflow:hidden; list-style: none outside none; li { list-style: none outside none; display: inline-block; margin-right: 10px; margin-bottom:0; a { @extend .btn5; min-width: 60px; &.current { color:$overlay-bg-color; } &.disabled { border-color: $disabled-resource-color; color: $disabled-resource-color; &:hover, &:active { cursor: default; border-width: 1px; line-height: 28px; } } } } } } } } .summary { padding-bottom:40px; .row { .wrap { max-width: $row-small; border-top:1px solid white; padding-top:1em; // margin-top:1em; } &:first-child { .wrap { border-top:0 none; margin-top:0; } dl { dt { font-weight: bold; } } } } h2 { font-size:1em; color:white; margin-bottom:1em; } dl { margin-bottom:0; span { width:40px; display: inline-block; font-size:20px; position: relative; bottom: -2px; } dt { display: inline-block; width: 42%; vertical-align: top; font-weight:600; } dd { display: inline-block; width:45%; margin-bottom:1em; } } } .advanced-conf-step { color: $wizard-base-font-color; h2 { color: $wizard-base-font-color; font-size: 1em; margin-bottom: 10px; line-height: 1; } p { font-size: $wizard-paragraph-font-size; } .snf-checkbox-checked, .snf-checkbox-unchecked { color: $wizard-base-font-color; } .expand-btn { margin: 50px 0 $step-adv-padding; a { color:$wizard-base-font-color; span { padding-left:24px; } } } .adv-main { .vm-name { h2 { color:white; font-size:1em; margin-bottom:0.5em; } } } .btn5 { &:hover { color:white; } &.current, &.current:hover { color:$overlay-bg-color; } } .advanced-conf-options { display: none; .check { font-size: 20px; } .area { padding:$step-adv-padding 0; .row { p{ max-width:340px; margin-bottom: 20px; } } ul { li { position: relative; list-style:none outside none; margin-bottom:7px; &.checkbox { &:hover { cursor: pointer; } } h3 { width: $conf-area-h-width; color:white; font-size:1em; font-weight: normal; margin:0 28px 0 0; display: inline-block; //&.net-name { width: 9.063em } } } } } .ssh-keys-area { background-color: $ssh-opt-area-color; .btn5 { margin-top: 3px; } } .networks-area { background-color: $net-opt-area-color; ul { position: relative; margin-bottom:0; } li { .net-icons { padding-right:30px; display: inline-block; width:145px; text-align: right; font-size:30px; margin-bottom: 0; position: relative; span { position: relative; &.snf-router-outline { top:-1px; } &.snf-www { top:5px; } &.snf-network-full { top:5px; } &.temp-line { position: absolute; height:1px; width:13px; background:white; bottom:15px; &.line1 { right:56px; } &.line2 { right:97px; width:10px; } } } } &.more { background:$net-more-opt-area-color; margin:$step-adv-padding 6px; padding:$step-adv-padding 0; color:#fff; h3 { color:#fff; padding-left: 145px; &:hover { cursor: pointer; } } .btn5 { margin-top:20px; border-color:#fff; color:#fff; margin-left:145px; } .trigger-checkbox { a { span { color: #fff; } } } } } } .tags-area { background-color: $tag-opt-area-color; .snf-color-picker { display: none; } #picker { position: relative; width: 207px; margin: 30px 5px; display: inline-block; } .btns { margin-top: 77px; margin-bottom: 30px; } .btn5 { margin-right:20px; } .tag-demo { @include circle(9px); margin: 0 15px 0 10px; vertical-align: text-bottom; border-color:transparent; color: transparent; // temporary &.tag4 { background-color: $red-1; } &.tag5 { background-color: $yellow-1; } &.tag6 { background-color: $orange-1; } } h3 { width: $conf-area-h-width; color:white; font-size:1em; font-weight: normal; margin:0 28px 0 0; display: inline-block; //&.net-name { width: 9.063em } } .list-header { position: relative; left: -14px; h3 { margin-right: 35px; } } } } } } } .bottom { position: fixed; left:0; right:0; bottom:0; border-top:1px solid $overlay-color-top; background:$overlay-bg-color; .row { height: $bar-submenu-height; line-height: $bar-submenu-height; } .nav { height: $bar-submenu-height; line-height: $bar-submenu-height; color:white; display: inline-block; position: relative; font-size: emCalc(12px); top:($bar-submenu-height - 30px)/2; width: 100px; &:hover, &:focus { @include transition(background, 0ms, ease-out); } span { display: inline-block; height: 30px; line-height:30px; float: left; &:hover, &:focus { @include transition(background, 0ms, linear); } } } .prev { float:left; height:30px; padding-left:18px; background:url('../images/nav-edge-lt.png') no-repeat left top; span { padding-right:10px; background:url('../images/nav-lt.png') no-repeat right top; } &:hover, &.active, &:focus { background-position:left bottom; span { background-position:right bottom; } } } .next { float:right; height:30px; padding-right:18px; background:url('../images/nav-edge-rt.png') no-repeat right top; span { padding-left:10px; background:url('../images/nav-rt.png') no-repeat left top; float: right; } &:hover, &.active, &:focus { background-position:right bottom; span { background-position:left bottom; float:right; } } } } } // end of .wizard // for network creation wizard #network-wizard { a { &.nav:focus { border: none; } &.radiobtn:focus, &.check:focus{ border: 1px solid #aee7cc; padding: 2px; } } .snf-checkbox-checked, .snf-checkbox-unchecked { font-size: 1.3em; } .subnet-options { margin: 0; li { margin-top: 20px; } } .step { a { color: $wizard-base-font-color;} .network-options { position: relative; padding-bottom: 20px; .explanatory { font-size:emCalc(12px); margin-top:20px; margin-bottom:60px; } .check, .radiobtn { position: absolute; right: 0; &:focus { right: -3px; top: -3px; } } .network-name { margin: 40px 0; h2 { color:white; font-size: emCalc(16px); } } li{ display: block; width: 360px; &.manual{ position: relative; .input { position: absolute; right: -170px; width: 150px; bottom: 5px; display: none; } } &.project-selection li { width: 100%; } } } } } // for volume creation wizard #volume-wizard { a { &.nav:focus { border: none; } &.radiobtn:focus, &.check:focus{ border: 1px solid #aee7cc; padding: 2px; } } .snf-checkbox-checked, .snf-checkbox-unchecked { font-size: 1.3em; } .step { a { color: $wizard-base-font-color; } p { font-size: $wizard-paragraph-font-size-custom; line-height: 1; } h2 { color:white; font-size: emCalc(16px); } .volume_options { &>li{ display: block; &.volume-name { //same with network-name and vm-name margin: 40px 0; } list-style: none outside none; margin-bottom:30px; .title { @extend .clearfix; height:40px; overflow:hidden; margin-bottom:emCalc(8px); color:white; vertical-align: top; .snf-font { display: block; width:60px; font-size:38px; float: left; position: relative; bottom: -3px; } h2 { font-size:emCalc(14px); span { font-weight:normal; } float:left; width: 140px; color:white; margin-right:60px; padding-left:emCalc(10px); em { display: block; margin-top:4px; font-size:11px; font-style:normal; font-weight:normal; white-space: nowrap; line-height: 13px; } } p { visibility: hidden; overflow:hidden; min-height:40px; font-size:11px; line-height:11px; } } .options-bar { @extend .clearfix; .bar { width:200px; float:left; margin-right:60px; height: 20px; position: relative; top:10px; .wrap { border:1px solid white; padding:1px; height: 100%; &.disabled-progress-bar { border-color: $disabled-resource-color; .container{ .total { background-color: $disabled-resource-color; } } } .container { height: 100%; .total { background:$primary-color; height: 100%; float:left; position: relative; .current { background:white; height: 100%; float:left; } span { position:absolute; right:10px; font-size: emCalc(9px); top:2px; } &.low { span { right:-30px; color:white; } } } } } } .options { overflow:hidden; list-style: none outside none; li { list-style: none outside none; display: inline-block; margin-right: 10px; margin-bottom:0; a { @extend .btn5; min-width: 60px; &.current { color:$overlay-bg-color; } &.disabled { border-color: $disabled-resource-color; color: $disabled-resource-color; &:hover, &:active { cursor: default; border-width: 1px; line-height: 28px; } } } } } } } } .explain { margin-bottom: 1em; } } }