diff options
Diffstat (limited to 'usecaseui-portal/src/app/ccvpn-creation')
| -rw-r--r-- | usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css | 141 |
1 files changed, 65 insertions, 76 deletions
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css index 78cf3134..99095ec3 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css @@ -94,41 +94,47 @@ hr { color: #000; } /* SOTN VPN */ -.model .creation .sotnvpn ul li { - display: inline-block; - height: 40px; - width: 24.5%; - margin-bottom: 40px; +.model .creation .sotnvpn .service-title{ + margin-bottom: 35px; } -.model .creation .sotnvpn ul li span { +.model .creation .sotnvpn .service-title .lable { display: inline-block; - width: 110px; + width: 90px; font: 700 14px "Arial"; color: #3C4F8C; vertical-align: middle; + margin-left: 5px; } -.model .creation .sotnvpn ul li input { +.model .creation .sotnvpn .service-title input { width: 234px; height: 40px; border-radius:4px; outline: none; + margin-right: 50px; } /* Site List */ /* addsite model */ -.model .sitemodel { +.model .sitemodel,.model .sotnnpnmodel{ position: absolute; z-index: 1001; left: 50px; top: 60px; background-color: #fff; /*box-shadow: 0px 0px 20px #000;*/ - width:1300px; + width:1500px; /*width:1300px;px*/ - max-height: 90%; + height: 81%; border-radius:2px; - overflow-y: auto; + overflow:auto; +} +.model .sotnnpnmodel{ + width: 1000px; + height: 53%; + top:200px; + left: 50%; + margin-left: -500px; } -.model .sitemodel h3,.sitegroupmodal>h3{ +.model .sitemodel h3,.model .sotnnpnmodel h3{ width: 96%; height: 40px; line-height: 35px; @@ -145,17 +151,20 @@ hr { border-image: linear-gradient(#07A9E1,#30D9C4) 100 100; border-radius:2px; } -.model .sitemodel .inputs { +.model .sitemodel .inputs,.model .sotnnpnmodel .inputs { padding: 10px 20px 0; } -.model .sitemodel .inputs ul li { +.model .sitemodel .inputs ul li,.model .sotnnpnmodel .inputs ul li { display: inline-block; height: 35px; line-height: 35px; width: 24.5%; margin-bottom: 20px; } -.model .sitemodel .inputs ul li span { +.model .sotnnpnmodel .inputs ul li{ + width: 31%; +} +.model .sitemodel .inputs ul li span,.model .sotnnpnmodel .inputs ul li span { display: inline-block; line-height: 35px; font-size: 14px; @@ -170,13 +179,21 @@ hr { float: right; margin-right: 25px; } -.model .sitemodel .action { +.model .sotnnpnmodel .inputs input{ + width: 186px; + float: left; + margin-left: 20px; +} +.model .sitemodel .action,.model .sotnnpnmodel .action { text-align: center; margin-top: 30px; margin-bottom: 20px; + cursor: pointer } - -.model .sitemodel .action button{ +.model .sotnnpnmodel .action{ + margin-top: 70px; +} +.model .sitemodel .action button,.model .sotnnpnmodel .action button{ width: 126px; height:40px; background:#EEEEEE; @@ -186,12 +203,12 @@ hr { font-size: 16px; margin: 0 15px; } -.model .sitemodel .action button:nth-child(2){ +.model .sitemodel .action button:nth-child(2),.model .sotnnpnmodel .action button:nth-child(2){ /*background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%);*/ background: #0DA9E2; color: #fff; } -.model .sitemodel .action button:nth-child(2):hover{ +.model .sitemodel .action button:nth-child(2):hover,.model .sotnnpnmodel .action button:nth-child(2):hover{ /*background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;*/ background:#09C6E2; } @@ -202,7 +219,7 @@ hr { } /* site table */ -.model .site>button,.model .sitegroup>button,.sitemodel h3 button{ +.sitemodel h3 button,.sotnnpnmodel h3 button{ color: #D7D7D7; width:32px; height:32px; @@ -210,12 +227,12 @@ hr { border-radius:4px; border:1px solid #D7D7D7; } -.model .site>button:hover,.model .sitegroup>button:hover,.sitemodel h3 button:hover,.model .back:hover{ +.sitemodel h3 button:hover,.model .back:hover,.sotnnpnmodel h3 button:hover{ background:#ffffff; color: #0DA9E2; border:1px solid #0DA9E2; } -.sitemodel h3>button{ +.sitemodel h3>button,.sotnnpnmodel h3>button{ float: right; width: 30px; height: 30px; @@ -231,57 +248,6 @@ hr { } /* WAN Port */ -/* Site Group List */ - -.model .sitegroupmodal { - position: absolute; - z-index: 1001; - width: 360px!important; - height: 450px!important; - left:35%; - top:40%; - margin-top: -188px; - margin-left: -180px; - background: #ffffff; -} - -.sitegroupmodal .list-div{ - width: 100%; - height: 32px !important; - line-height: 32px; - margin-bottom: 10px; -} -.sitegroupmodal .list-div > span { - line-height: 32px !important; - color: #3C4F8C; - margin-left: 30px; -} -.sitegroupmodal .list-div input, .sitegroupmodal .list-div nz-select { - margin-right: 50px; -} -.sitegroupmodal .action{ - text-align: center; - margin-top: 30px; -} -.sitegroupmodal .action button{ - width: 126px; - height:40px; - background:#EEEEEE; - border-radius:2px; - border: none!important; - color: #9DA7C5; - font-size: 16px; - margin: 0 8px; -} -.sitegroupmodal .action button:nth-child(2){ - /*background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%);*/ - background:#0DA9E2; - color: #fff; -} -.sitegroupmodal .action button:nth-child(2):hover{ - /*background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;*/ - background:#09C6E2; -} .mask{ width: 100%; height: 100%; @@ -323,7 +289,30 @@ hr { overflow: hidden; text-overflow: ellipsis; } -.model .creation .sotnvpn,.model .creation .site,.model .creation .sitegroup{ +.model .creation .sotnvpn,.model .creation .site{ background: #fff; padding: 30px 30px 0 30px; } +.siteWanTab{ + width: 96%; + margin: 0 auto; + margin-top: 10px; +} +.siteWanTab th{ + padding: 10px 8px; + color: #3C4F8C; + font-size: 16px; +} +.siteWanTab tr td{ + padding: 10px 5px; +} +.siteWanTab .tr-border{ + border-bottom: 1px solid #EDEDED; +} +.addListBtn{ + margin-right: 30px; + color: #06A7E2; + border: none; + background: rgba(229,238,252,0.8); + cursor: pointer; +}
\ No newline at end of file |