openo-portal/portal-catalog/src/main/webapp/catalog/css/templateDetail.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 .redFont{\r
  23         color:red;\r
  24 }\r
  25 .blue {\r
  26 \r
  27         background-color: #5b9bd1;\r
  28         border-radius: 20px;\r
  29         color: #fff;\r
  30         font-weight: bold;\r
  31         padding: 8px 0;\r
  32         text-align: center;\r
  33         width: 100px;\r
  34 }\r
  35 \r
  36 .blue:hover {\r
  37         background-color: #e8f3fd;\r
  38         color: #5b9bd1;\r
  39 }\r
  40 \r
  41 .blue.selected {\r
  42         border: 0;\r
  43         background-color: #5b9bd1;\r
  44         color: #fff;\r
  45 }\r
  46 \r
  47 .blue.selected:hover {\r
  48         border: 0;\r
  49         background-color: #5b9bd1;\r
  50         color: #fff;\r
  51 }\r
  52 \r
  53 a {\r
  54         text-decoration: none !important;\r
  55 }\r
  56 \r
  57 p {\r
  58         color: #444;\r
  59         font-size: 14px;\r
  60         font-weight: normal;\r
  61         line-height: 21px;\r
  62         margin: 0 0 12px 0;\r
  63 }\r
  64 \r
  65 p.credit {\r
  66         border-top: 1px solid #ccc;\r
  67         font-size: 14px;\r
  68         line-height: 140%;\r
  69         margin: 36px 0 12px 0;\r
  70         padding: 8px 0 0 0;\r
  71         text-align: center;\r
  72 }\r
  73 \r
  74 ul.column {\r
  75         float: left;\r
  76         list-style: none;\r
  77         width: 675px;\r
  78 }\r
  79 \r
  80 ul.column li {\r
  81         background: #eee;\r
  82         -webkit-border-radius: 5px;\r
  83         border-radius: 5px;\r
  84         -webkit-box-shadow: inset 0 1px 1px 0 #c7c7c7;\r
  85         box-shadow: inset 0 1px 1px 0 #c7c7c7;\r
  86         float: left;\r
  87         margin: 10px 0 0 10px;\r
  88         display: block;\r
  89         height: 150px;\r
  90         text-align: center;\r
  91         width: 215px;\r
  92 }\r
  93 \r
  94 /* Clear Floated Elements\r
  95 ------------------------------------------------------------------------------*/\r
  96 .column:after,.button-collection:after,.clearfix:after,div.project-info:after\r
  97         {\r
  98         clear: both;\r
  99         content: ' ';\r
 100         display: block;\r
 101         font-size: 0;\r
 102         line-height: 0;\r
 103         visibility: hidden;\r
 104         width: 0;\r
 105         height: 0;\r
 106 }\r
 107 \r
 108 .container-fluid {\r
 109         background-color:white !important;\r
 110         min-height:800px;\r
 111 }\r
 112 \r
 113 .nav-tabs {\r
 114         border: 0;\r
 115 }\r
 116 \r
 117 .nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus\r
 118         {\r
 119         border: 0;\r
 120         border-top: 3px solid #F3565D;\r
 121 }\r
 122 \r
 123 .nav-tabs>li>a {\r
 124         border-radius: 0;\r
 125 }\r
 126 \r
 127 .nav-tabs>li>a:hover {\r
 128         background-color: #f1f3fa;\r
 129         border: 1Px solid #f1f3fa;\r
 130 }\r
 131 \r
 132 .c3 {\r
 133         margin-top: 120px;\r
 134 }\r
 135 \r
 136 .skills-chart-breadcrumb {\r
 137         \r
 138 }\r
 139 \r
 140 .blue:selected {\r
 141         border: 0;\r
 142         background-color: #5b9bd1;\r
 143 }\r
 144 \r
 145 .btn {\r
 146         /* border-width: 0; */\r
 147         /* padding: 7px 14px; */\r
 148         /* font-size: 14px; */\r
 149         /* outline: none !important; */\r
 150         /* background-image: none !important; */\r
 151         /* filter: none; */\r
 152         /* -webkit-box-shadow: none; */\r
 153         -moz-box-shadow: none;\r
 154         /* box-shadow: none; */\r
 155         /* text-shadow: none; */\r
 156 }\r
 157 \r
 158 select {\r
 159         border-width: 1px;\r
 160         padding: 4px 1px;\r
 161         border-radius: 4px;\r
 162 }\r
 163 \r
 164 .input-sm {\r
 165         padding: 4px 10px;\r
 166 }\r
 167 \r
 168 .btn-block {\r
 169         display: block;\r
 170         width: 100%;\r
 171         padding-left: 0;\r
 172         padding-right: 0;\r
 173 }\r
 174 \r
 175 /* Bootstrap buttons */\r
 176 .btn-default {\r
 177         color: #5b9bd1;\r
 178         background-color: #fff;\r
 179         border-color: #ccc;\r
 180 }\r
 181 \r
 182 .btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active\r
 183         {\r
 184         color: #333;\r
 185         background-color: #ededed;\r
 186         border-color: #b3b3b3;\r
 187 }\r
 188 \r
 189 .open .btn-default.dropdown-toggle {\r
 190         color: #333;\r
 191         background-color: #ededed;\r
 192         border-color: #b3b3b3;\r
 193 }\r
 194 \r
 195 .btn-default:active,.btn-default.active {\r
 196         background-image: none;\r
 197         background-color: #e0e0e0;\r
 198         font-weight: bold;\r
 199 }\r
 200 \r
 201 .btn-default:active:hover,.btn-default.active:hover {\r
 202         background-color: #e6e6e6;\r
 203 }\r
 204 \r
 205 .open .btn-default.dropdown-toggle {\r
 206         background-image: none;\r
 207 }\r
 208 \r
 209 .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
 210         {\r
 211         background-color: #fff;\r
 212         border-color: #ccc;\r
 213 }\r
 214 \r
 215 .btn-default .badge {\r
 216         color: #fff;\r
 217         background-color: #333;\r
 218 }\r
 219 \r
 220 .btn-default>i {\r
 221         color: #aaa;\r
 222 }\r
 223 \r
 224 .btn-default>i[class^="icon-"],.btn-default>i[class*="icon-"] {\r
 225         color: #8c8c8c;\r
 226 }\r
 227 \r
 228 div[data-name="tab_zone"] div {\r
 229         background-color: #f1f3fa;\r
 230         padding: 0px;\r
 231 }\r
 232 \r
 233 div[data-name="cond_zone"] div {\r
 234         background-color: #fff;\r
 235         margin-top: 15px;\r
 236         margin-bottom: 15px;\r
 237 }\r
 238 \r
 239 div[data-name="detail-conds-zone"] {\r
 240         display: inline;\r
 241 }\r
 242 \r
 243 div[data-name="detail-conds-zone"] select,div[data-name="detail-conds-zone"] span\r
 244         {\r
 245         /**height:33px;*/\r
 246         margin-left: 15px;\r
 247         color: #5b9bd1;\r
 248         border-color: #ccc;\r
 249         font-weight: bold;\r
 250 }\r
 251 \r
 252 .input{\r
 253         width:250px;\r
 254   height: 34px;\r
 255   padding: 6px 12px;\r
 256   font-size: 14px;\r
 257   line-height: 1.42857143;\r
 258   color: #555;\r
 259   background-color: #fff;\r
 260   background-image: none;\r
 261   border: 1px solid #ccc;\r
 262   border-radius: 4px;\r
 263   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);\r
 264   box-shadow: inset 0 1px 1px rgba(0,0,0,.075);\r
 265   -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;\r
 266   transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;\r
 267 }\r
 268 \r
 269 div.separator {\r
 270         margin: 20px;\r
 271 }\r
 272 \r
 273 div.separator div {\r
 274         text-align: center;\r
 275         line-height: 0;\r
 276 }\r
 277 \r
 278 div.separator-line {\r
 279         height: 1px !important;\r
 280         width: 100%;\r
 281         background: #ddd;\r
 282         overflow: hidden;\r
 283 }\r
 284 \r
 285 .dropdown-toggle {\r
 286         color: #5b9bd1;\r
 287 }\r
 288 \r
 289 .calendar-date {\r
 290         color: #5b9bd1;\r
 291 }\r
 292 \r
 293 .range_inputs {\r
 294         color: #5b9bd1;\r
 295 }\r
 296 \r
 297 .btn.dropdown-toggle,.btn-group .btn.dropdown-toggle,.btn:hover,.btn:disabled,.btn[disabled],.btn:focus,.btn:active,.btn.active\r
 298         {\r
 299         outline: none !important;\r
 300         background-image: none !important;\r
 301         filter: none;\r
 302         -webkit-box-shadow: none;\r
 303         -moz-box-shadow: none;\r
 304         box-shadow: none;\r
 305         text-shadow: none;\r
 306 }\r
 307 \r
 308 #skills-chart-breadcrumb {\r
 309         margin-bottom: 10px\r
 310 }\r
 311 \r
 312 /*increase daterangepicker's css*/\r
 313 input[name="daterange"] {\r
 314         width: 220px;\r
 315         line-height: 0;\r
 316         height: 31px;\r
 317         vertical-align: top;\r
 318         margin-top: 2px;\r
 319 }\r
 320 \r
 321 .daterangepicker .ranges {\r
 322         width: 205px;\r
 323 }\r
 324 \r
 325 .daterangepicker .ranges input {\r
 326         width: 95px !important;\r
 327 }\r
 328 \r
 329 td.details-control {\r
 330         background: url('../image/details_open.png') no-repeat center center;\r
 331         cursor: pointer;\r
 332 }\r
 333 \r
 334 tr.shown td.details-control {\r
 335         background: url('../image/details_close.png') no-repeat center center;\r
 336 }\r
 337 \r
 338 .details table td {\r
 339         word-wrap: break-word;\r
 340         word-break: normal;\r
 341         border-top: 1px solid #dddddd;\r
 342 }\r
 343 \r
 344 .details table  tr:first-child td {\r
 345         border-top: none;\r
 346 }\r
 347 \r
 348 .details table {\r
 349         table-layout: fixed;\r
 350         width: 100%;\r
 351 }\r
 352 \r
 353 td.title {\r
 354         width: 10%;\r
 355 }\r
 356 \r
 357 table.dataTable tbody th,table.dataTable tbody td {\r
 358         padding: 8px 10px;\r
 359 }\r
 360 \r
 361 div.dataTables_length,div.dataTables_info {\r
 362         display: inline;\r
 363 }\r
 364 \r
 365 div.dataTables_paginate {\r
 366         display: inline;\r
 367         float: right;\r
 368 }\r
 369 \r
 370 div.pagination-panel {\r
 371         margin-right: 10px;\r
 372 }\r
 373 \r
 374 input.pagination-panel-input {\r
 375         width: 50px;\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 #right-menu {\r
 396         position:absolute;\r
 397         top:0;\r
 398         right:0;\r
 399         width:420px;\r
 400         height:100%;\r
 401         border-left:4px solid rgb(58,174,218);\r
 402         background-color:rgba(255,255,255,.95);\r
 403         padding-left:19px;\r
 404         padding-right:15px;\r
 405         padding-top:20px;\r
 406         z-index:9999;\r
 407         overflow-y: auto;\r
 408 }\r
 409 \r
 410 #right-menu .btn{\r
 411         min-width: 30px !important;\r
 412         letter-spacing :normal !important;\r
 413 }\r
 414 \r
 415 .rigth {\r
 416         float: right;\r
 417 }\r
 418 .right-button-pointer {\r
 419         display:inline-block;\r
 420         cursor:pointer\r
 421 }\r
 422 .floating-panel {\r
 423         width:400px;\r
 424         display:none\r
 425 }\r
 426 \r
 427 title{height:25px;position:relative;top:20px;font-size:15px}\r
 428 \r
 429 #ict_nodes_table_div {\r
 430         margin-top: 15px;\r
 431 }\r
 432 \r
 433 #ict_nodes_table_div label {\r
 434         font-weight: 100;\r
 435 }\r
 436 \r
 437 #ict_nodes_table_div  table {\r
 438         width: 100% !important;\r
 439 }\r
 440 \r
 441 .nodesDetail {\r
 442         margin-top: 15px;\r
 443 }\r
 444 \r
 445 .nodesDetail label {\r
 446         font-weight: 100;\r
 447 }\r
 448 \r
 449 .nodesDetail table {\r
 450         width:100%;\r
 451         table-layout: fixed;\r
 452         word-wrap:break-word;\r
 453 }\r
 454 \r
 455 .step {\r
 456         text-align: center;\r
 457         padding-top: 60px;\r
 458 }\r
 459 \r
 460 .step div {\r
 461         text-align: left;\r
 462 }\r
 463 \r
 464 div.separator-sline {\r
 465         height:28px ;\r
 466         width:3px;\r
 467 }\r
 468 \r
 469 .titlefont {\r
 470         font-size:16px;\r
 471 }\r
 472 \r
 473 .td_nodeId {\r
 474         font-size: small;\r
 475 }\r
 476 \r
 477 .iconBtn {\r
 478         margin-left:15px;\r
 479         min-width:30px;\r
 480 }