openo-portal/portal-catalog/src/main/webapp/catalog/css/vnfm.css

   1 /**\r
   2  * Copyright 2016-2017 ZTE Corporation.\r
   3  *\r
   4  * Licensed under the Apache License, Version 2.0 (the "License");\r
   5  * you may not use this file except in compliance with the License.\r
   6  * You may obtain a copy of the License at\r
   7  *\r
   8  *     http://www.apache.org/licenses/LICENSE-2.0\r
   9  *\r
  10  * Unless required by applicable law or agreed to in writing, software\r
  11  * distributed under the License is distributed on an "AS IS" BASIS,\r
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
  13  * See the License for the specific language governing permissions and\r
  14  * limitations under the License.\r
  15  */\r
  16 body {\r
  17         font-family: microsoft yahei !important;\r
  18 }\r
  19 \r
  20 /* blue pill (inspired by iTunes)\r
  21 *******************************************************************************/\r
  22 \r
  23 .grey {\r
  24   background-color: #e5e5e5;\r
  25   color: #333;\r
  26 }\r
  27 \r
  28 .blue {\r
  29 \r
  30         background-color: #5b9bd1;\r
  31         border-radius: 20px;\r
  32         color: #fff;\r
  33         font-weight: bold;\r
  34         padding: 8px 0;\r
  35         text-align: center;\r
  36         width: 100px;\r
  37 }\r
  38 \r
  39 .blue:hover {\r
  40         background-color: #e8f3fd;\r
  41         color: #5b9bd1;\r
  42 }\r
  43 \r
  44 .blue.selected {\r
  45         border: 0;\r
  46         background-color: #5b9bd1;\r
  47         color: #fff;\r
  48 }\r
  49 \r
  50 .blue.selected:hover {\r
  51         border: 0;\r
  52         background-color: #5b9bd1;\r
  53         color: #fff;\r
  54 }\r
  55 \r
  56 p {\r
  57         color: #444;\r
  58         font-size: 14px;\r
  59         font-weight: normal;\r
  60         line-height: 21px;\r
  61         margin: 0 0 12px 0;\r
  62 }\r
  63 \r
  64 p.credit {\r
  65         border-top: 1px solid #ccc;\r
  66         font-size: 14px;\r
  67         line-height: 140%;\r
  68         margin: 36px 0 12px 0;\r
  69         padding: 8px 0 0 0;\r
  70         text-align: center;\r
  71 }\r
  72 \r
  73 ul.column {\r
  74         float: left;\r
  75         list-style: none;\r
  76         width: 675px;\r
  77 }\r
  78 \r
  79 ul.column li {\r
  80         background: #eee;\r
  81         -webkit-border-radius: 5px;\r
  82         border-radius: 5px;\r
  83         -webkit-box-shadow: inset 0 1px 1px 0 #c7c7c7;\r
  84         box-shadow: inset 0 1px 1px 0 #c7c7c7;\r
  85         float: left;\r
  86         margin: 10px 0 0 10px;\r
  87         display: block;\r
  88         height: 150px;\r
  89         text-align: center;\r
  90         width: 215px;\r
  91 }\r
  92 \r
  93 /* Clear Floated Elements\r
  94 ------------------------------------------------------------------------------*/\r
  95 .column:after,.button-collection:after,.clearfix:after,div.project-info:after\r
  96         {\r
  97         clear: both;\r
  98         content: ' ';\r
  99         display: block;\r
 100         font-size: 0;\r
 101         line-height: 0;\r
 102         visibility: hidden;\r
 103         width: 0;\r
 104         height: 0;\r
 105 }\r
 106 \r
 107 .container-fluid {\r
 108         background-color:white !important;\r
 109         min-height:500px;\r
 110 }\r
 111 \r
 112 .nav-tabs {\r
 113         border: 0;\r
 114 }\r
 115 \r
 116 .nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus\r
 117         {\r
 118         border: 0;\r
 119         border-top: 3px solid #F3565D;\r
 120 }\r
 121 \r
 122 .nav-tabs>li>a {\r
 123         border-radius: 0;\r
 124 }\r
 125 \r
 126 .nav-tabs>li>a:hover {\r
 127         background-color: #f1f3fa;\r
 128         border: 1Px solid #f1f3fa;\r
 129 }\r
 130 \r
 131 .c3 {\r
 132         margin-top: 120px;\r
 133 }\r
 134 \r
 135 .skills-chart-breadcrumb {\r
 136         \r
 137 }\r
 138 \r
 139 .blue:selected {\r
 140         border: 0;\r
 141         background-color: #5b9bd1;\r
 142 }\r
 143 \r
 144 .btn {\r
 145         /* border-width: 0; */\r
 146         /* padding: 7px 14px; */\r
 147         /* font-size: 14px; */\r
 148         /* outline: none !important; */\r
 149         /* background-image: none !important; */\r
 150         /* filter: none; */\r
 151         /* -webkit-box-shadow: none; */\r
 152         -moz-box-shadow: none;\r
 153         /* box-shadow: none; */\r
 154         /* text-shadow: none; */\r
 155 }\r
 156 \r
 157 select {\r
 158         border-width: 1px;\r
 159         padding: 4px 1px;\r
 160         border-radius: 4px;\r
 161 }\r
 162 \r
 163 .input-sm {\r
 164         padding: 4px 10px;\r
 165 }\r
 166 \r
 167 .btn-block {\r
 168         display: block;\r
 169         width: 100%;\r
 170         padding-left: 0;\r
 171         padding-right: 0;\r
 172 }\r
 173 \r
 174 /* Bootstrap buttons */\r
 175 \r
 176 \r
 177 .btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active\r
 178         {\r
 179         color: #333;\r
 180         background-color: #ededed;\r
 181         border-color: #b3b3b3;\r
 182 }\r
 183 \r
 184 .open .btn-default.dropdown-toggle {\r
 185         color: #333;\r
 186         background-color: #ededed;\r
 187         border-color: #b3b3b3;\r
 188 }\r
 189 \r
 190 .btn-default:active,.btn-default.active {\r
 191         background-image: none;\r
 192         background-color: #e0e0e0;\r
 193         font-weight: bold;\r
 194 }\r
 195 \r
 196 .btn-default:active:hover,.btn-default.active:hover {\r
 197         background-color: #e6e6e6;\r
 198 }\r
 199 \r
 200 .open .btn-default.dropdown-toggle {\r
 201         background-image: none;\r
 202 }\r
 203 \r
 204 .btn-default.disabled,.btn-default.disabled:hover,.btn-default.disabled:focus,.btn-default.disabled:active,.btn-default.disabled.active,.btn-default[disabled],.btn-default[disabled]:hover,.btn-default[disabled]:focus,.btn-default[disabled]:active,.btn-default[disabled].active,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default:hover,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default.active\r
 205         {\r
 206         background-color: #fff;\r
 207         border-color: #ccc;\r
 208 }\r
 209 \r
 210 .btn-default .badge {\r
 211         color: #fff;\r
 212         background-color: #333;\r
 213 }\r
 214 \r
 215 \r
 216 .btn-default>i[class^="icon-"],.btn-default>i[class*="icon-"] {\r
 217         color: #8c8c8c;\r
 218 }\r
 219 \r
 220 div[data-name="tab_zone"] div {\r
 221         background-color: #f1f3fa;\r
 222         padding: 0px;\r
 223 }\r
 224 \r
 225 div[data-name="cond_zone"] div {\r
 226         background-color: #fff;\r
 227         margin-top: 15px;\r
 228         margin-bottom: 15px;\r
 229 }\r
 230 \r
 231 div[data-name="res-conds-zone"] {\r
 232         display: inline;\r
 233 }\r
 234 \r
 235 div[data-name="res-conds-zone"] select,div[data-name="res-conds-zone"] span\r
 236         {\r
 237         /**height:33px;*/\r
 238         margin-left: 15px;\r
 239         color: #5b9bd1;\r
 240         border-color: #ccc;\r
 241         font-weight: bold;\r
 242 }\r
 243 \r
 244 .input{\r
 245         width:250px;\r
 246   height: 34px;\r
 247   padding: 6px 12px;\r
 248   font-size: 14px;\r
 249   line-height: 1.42857143;\r
 250   color: #555;\r
 251   background-color: #fff;\r
 252   background-image: none;\r
 253   border: 1px solid #ccc;\r
 254   border-radius: 4px;\r
 255   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);\r
 256   box-shadow: inset 0 1px 1px rgba(0,0,0,.075);\r
 257   -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;\r
 258   transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;\r
 259 }\r
 260 \r
 261 div.separator {\r
 262         margin: 20px;\r
 263 }\r
 264 \r
 265 div.separator div {\r
 266         text-align: center;\r
 267         line-height: 0;\r
 268 }\r
 269 \r
 270 div.separator-line {\r
 271         height: 1px !important;\r
 272         width: 100%;\r
 273         background: #ddd;\r
 274         overflow: hidden;\r
 275 }\r
 276 \r
 277 .dropdown-toggle {\r
 278         color: #5b9bd1;\r
 279 }\r
 280 \r
 281 .calendar-date {\r
 282         color: #5b9bd1;\r
 283 }\r
 284 \r
 285 .range_inputs {\r
 286         color: #5b9bd1;\r
 287 }\r
 288 \r
 289 .btn.dropdown-toggle,.btn-group .btn.dropdown-toggle,.btn:hover,.btn:disabled,.btn[disabled],.btn:focus,.btn:active,.btn.active\r
 290         {\r
 291         outline: none !important;\r
 292         background-image: none !important;\r
 293         filter: none;\r
 294         -webkit-box-shadow: none;\r
 295         -moz-box-shadow: none;\r
 296         box-shadow: none;\r
 297         text-shadow: none;\r
 298 }\r
 299 \r
 300 #skills-chart-breadcrumb {\r
 301         margin-bottom: 10px\r
 302 }\r
 303 \r
 304 /*increase daterangepicker's css*/\r
 305 input[name="daterange"] {\r
 306         width: 220px;\r
 307         line-height: 0;\r
 308         height: 31px;\r
 309         vertical-align: top;\r
 310         margin-top: 2px;\r
 311 }\r
 312 \r
 313 .daterangepicker .ranges {\r
 314         width: 205px;\r
 315 }\r
 316 \r
 317 .daterangepicker .ranges input {\r
 318         width: 95px !important;\r
 319 }\r
 320 \r
 321 td.details-control {\r
 322         background: url('../image/details_open.png') no-repeat center center;\r
 323         cursor: pointer;\r
 324 }\r
 325 \r
 326 tr.shown td.details-control {\r
 327         background: url('../image/details_close.png') no-repeat center center;\r
 328 }\r
 329 \r
 330 .details table td {\r
 331         word-wrap: break-word;\r
 332         word-break: normal;\r
 333         border-top: 1px solid #dddddd;\r
 334 }\r
 335 \r
 336 .details table  tr:first-child td {\r
 337         border-top: none;\r
 338 }\r
 339 \r
 340 .details table {\r
 341         table-layout: fixed;\r
 342         width: 100%;\r
 343 }\r
 344 \r
 345 td.title {\r
 346         width: 10%;\r
 347 }\r
 348 \r
 349 table.dataTable tbody th,table.dataTable tbody td {\r
 350         padding: 8px 10px;\r
 351 }\r
 352 \r
 353 div.dataTables_length,div.dataTables_info {\r
 354         display: inline;\r
 355 }\r
 356 \r
 357 div.dataTables_paginate {\r
 358         display: inline;\r
 359         float: right;\r
 360 }\r
 361 \r
 362 div.pagination-panel {\r
 363         margin-right: 10px;\r
 364 }\r
 365 \r
 366 input.pagination-panel-input {\r
 367         width: 50px;\r
 368 }\r
 369 \r
 370 #ict_res_table_div {\r
 371         margin-top: 15px;\r
 372 }\r
 373 \r
 374 #ict_res_table_div label {\r
 375         font-weight: 100;\r
 376 }\r
 377 \r
 378 .daterangepicker .daterangepicker_start_input label,.daterangepicker .daterangepicker_end_input label\r
 379         {\r
 380         color: #5b9bd1;\r
 381 }\r
 382 \r
 383 .daterangepicker .ranges .input-mini {\r
 384         color: #5b9bd1;\r
 385 }\r
 386 \r
 387 .cancelBtn {\r
 388         padding: 5px 10px 5px 10px;\r
 389 }\r
 390 \r
 391 .btn:focus,.btn:active:focus,.btn.active:focus {\r
 392         outline: 0;\r
 393 }\r
 394 \r
 395 #ict_res_table_div  table {\r
 396         width: 100% !important;\r
 397 }\r
 398 \r
 399 .control-label .required {\r
 400   color: #e02222;\r
 401   font-size: 12px;\r
 402   padding-left: 2px;\r
 403 }\r
 404 \r
 405 #ict_vim_table tbody tr{\r
 406         cursor:pointer;\r
 407 }\r
 408 \r
 409 \r
 410 .animated-panel {\r
 411   -webkit-animation-duration: .5s;\r
 412   animation-duration: .5s;\r
 413   -webkit-animation-fill-mode: both;\r
 414   animation-fill-mode: both;\r
 415 }\r
 416 \r
 417 .hpanel {\r
 418   background-color: none;\r
 419   border: none;\r
 420   box-shadow: none;\r
 421   margin-bottom: 25px;\r
 422     \r
 423 }\r
 424 \r
 425 .hpanel .panel-body {\r
 426   border: 1px solid #e4e5e7;\r
 427   border-radius: 2px;\r
 428   padding: 20px;\r
 429   position: relative;\r
 430 }\r
 431 .h-200 {\r
 432   min-height: 220px;\r
 433 }\r
 434 \r
 435 .m-t-xl {\r
 436   margin-top: 40px;\r
 437 }\r
 438 \r
 439 .m-t-xl div {\r
 440   margin-bottom: 15px;\r
 441 }\r
 442 \r
 443 .text-success {\r
 444   color: #0d638f;\r
 445 }\r
 446 .hpanel > .panel-footer {\r
 447   color: inherit;\r
 448   border: 1px solid #e4e5e7;\r
 449   border-top: none;\r
 450   font-size: 90%;\r
 451   background: #f7f9fa;\r
 452   height:40px;\r
 453   padding: 5px 15px;\r
 454 }\r
 455 .color_cloud{\r
 456         color:#ccc;\r
 457 }\r
 458 .stats-title{\r
 459 \r
 460 }\r
 461 \r
 462 h3{\r
 463   margin-top: 10px;\r
 464   margin-bottom: 40px;\r
 465   font-weight: 200;\r
 466 }\r
 467 \r
 468 .blue-font{\r
 469         color:#428bca;\r
 470 }\r
 471 \r
 472 .hpanel > .panel-footer .pull-right a{\r
 473         margin-left: 5px;\r
 474 }\r
 475 \r
 476 .hpanel > .panel-footer .pull-right .btn{\r
 477         min-width: 30px !important;\r
 478 }\r
 479 \r
 480 .font-bold {\r
 481   font-weight: 600;\r
 482   margin-bottom: 15px;\r
 483 }\r
 484 \r
 485 .hpanel_show{\r
 486         background-color: #f7f9fa;\r
 487 }\r
 488 \r
 489 .vnfm-padding {\r
 490         padding-left: 0;\r
 491 }