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