stylesheet.css (16952B)
1 @import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,greek-ext,vietnamese); 2 html, body { 3 height: 100%; 4 margin: 0; 5 padding: 0; 6 font-family: 'Open Sans', sans-serif; 7 color: #545454; 8 text-rendering: optimizeLegibility; 9 } 10 h1, h2, h3, h4, h5, h6, p { 11 margin-top: 0; 12 } 13 .page-header { 14 vertical-align: middle; 15 margin: 20px 0 15px 0; 16 padding: 0; 17 border-bottom: 1px solid #e9e9e9; 18 } 19 .page-header h1 { 20 font-family: 'Open Sans', sans-serif; 21 font-weight: 300; 22 font-size: 30px; 23 color: #4c4d5a; 24 display: inline-block; 25 margin-bottom: 15px; 26 text-shadow: 0 1px #fff; 27 } 28 .breadcrumb { 29 display: inline-block; 30 background: none; 31 margin: 8px 0 19px 0; 32 padding: 0 10px; 33 border-radius: 0; 34 } 35 .breadcrumb li a { 36 color: #999999; 37 font-size: 14px; 38 padding: 0px; 39 margin: 0px; 40 } 41 .breadcrumb li a:hover { 42 text-decoration: none; 43 } 44 .breadcrumb li + li:before { 45 content: "\f105"; 46 font-family: FontAwesome; 47 color: #BBBBBB; 48 padding: 0 5px; 49 font-size: 10px; 50 } 51 a:hover, a:focus { 52 text-decoration: none; 53 } 54 #container { 55 min-height: 100%; 56 width: 100%; 57 position: relative; 58 background: #f6f6f6; 59 overflow: hidden; 60 } 61 .container-fluid { 62 padding: 0 20px; 63 } 64 #header { 65 min-height: 0px; 66 background: #FFFFFF; 67 border-bottom: 1px solid #d8d8d8; 68 margin: 0; 69 padding: 0; 70 box-shadow: 0px 0px 3px #ccc; 71 } 72 #header .container-fluid { 73 padding: 0; 74 } 75 #header .navbar-header { 76 transition: 0.3s all; 77 border-right: 1px solid #eee; 78 width: 235px; 79 display: none; 80 } 81 #header .navbar-brand { 82 margin-left: 8px; 83 } 84 85 #header .navbar-nav > li { 86 display: inline-block; 87 } 88 #header .navbar-right > li { 89 border-left: 1px solid #eee; 90 } 91 92 #header .navbar-right { 93 margin-right: 0; 94 margin: 0px 0px 0px 0px; 95 float: right; 96 } 97 #header #user-profile { 98 max-width: 30px; 99 margin-right: 15px; 100 } 101 102 #header .nav > li > a { 103 padding: 0px 21px; 104 line-height: 45px; 105 cursor: pointer; 106 color: #6D6D6D; 107 border-left: 0px solid #E1E1E1; 108 } 109 110 #header .nav > li.dropdown > a { 111 padding-left: 10px; 112 padding-right: 10px; 113 } 114 #header .nav > li.dropdown > a { 115 padding-left: 10px; 116 padding-right: 10px; 117 } 118 /* Desktop */ 119 @media (min-width: 768px){ 120 #header .navbar-header { 121 display: inline-block; 122 } 123 124 #header #user-profile { 125 max-width: none; 126 } 127 128 #header .nav > li > a { 129 line-height: 60px; 130 } 131 } 132 133 #button-menu { 134 line-height: 30px; 135 font-size: 24px; 136 float: left; 137 padding: 10px 16px; 138 line-height: 25px; 139 display: inline-block; 140 cursor: pointer; 141 color: #6D6D6D; 142 border-right: 1px solid #eee; 143 } 144 /* Desktop */ 145 @media (min-width: 768px){ 146 #button-menu { 147 display: none; 148 } 149 } 150 #column-left { 151 width: 235px; 152 height: 100%; 153 overflow: auto; 154 background-color: #242d37; 155 position: absolute; 156 top: 0px; 157 left: -235px; 158 padding-top: 60px; 159 z-index: 10; 160 } 161 #column-left::-webkit-scrollbar { 162 width: 10px; 163 background-color: rgba(200,200,200,0); 164 } 165 #column-left::-webkit-scrollbar-thumb { 166 border-radius: 4px; 167 background-color: rgba(128,139,156,0.2); 168 } 169 #content { 170 padding-bottom: 40px; 171 } 172 #column-left, #content, #footer { 173 transition: all 0.3s; 174 } 175 #column-left + #content, #column-left + #content + #footer { 176 position: relative; 177 left: 0px; 178 } 179 #column-left.active { 180 left: 0px; 181 } 182 #column-left.active + #content, #column-left.active + #content + #footer { 183 left: 235px; 184 } 185 /* Desktop */ 186 @media (min-width: 768px){ 187 #column-left { 188 left: 0px; 189 } 190 #column-left + #content, #column-left + #content + #footer { 191 left: 0px; 192 margin-left: 235px; 193 } 194 #column-left.active + #content, #column-left.active + #content + #footer { 195 left: 0px; 196 margin-left: 235px; 197 } 198 } 199 200 /* Navigation */ 201 #navigation { 202 text-transform: uppercase; 203 padding: 15px 15px 15px 15px; 204 color: #FFFFFF; 205 background: #19222E; 206 display: block; 207 } 208 209 /* Menu */ 210 #menu, #menu ul, #menu li { 211 padding: 0; 212 margin: 0; 213 list-style: none; 214 } 215 #menu { 216 margin-bottom: 25px; 217 } 218 #menu li a { 219 text-decoration: none; 220 display: block; 221 padding: 10px; 222 cursor: pointer; 223 border-bottom: 0px solid #515151; 224 } 225 #menu li a.parent:after { 226 font-family: FontAwesome; 227 float: right; 228 margin-right: 8px; 229 } 230 #menu li a.parent:after { 231 content: "\f107"; 232 } 233 #menu li a.collapsed:after { 234 content: "\f105"; 235 } 236 /* 1st lvl */ 237 #menu > li { 238 position: relative; 239 border-bottom: 1px solid #2b3642; 240 } 241 #menu > li > a { 242 font-size: 14px; 243 color: #b3cbdd; 244 padding-left: 20px; 245 border-bottom: 0px solid #585858; 246 } 247 #menu > li > a:hover { 248 background-color: #444444; 249 } 250 #menu > li > a > i { 251 font-size: 16px; 252 width: 18px; 253 margin-right: 5px; 254 } 255 #menu > li.active > a { 256 color: #0b91d2; 257 background-color: #171b21; 258 } 259 #menu > li > ul { 260 background-color: #293141; 261 } 262 /* 2nd lvl */ 263 #menu li li a { 264 color: #7f8a9b; 265 } 266 #menu li li a:before { 267 content: "\f101"; 268 font-size: 13px; 269 font-family: FontAwesome; 270 margin-left: 10px; 271 margin-right: 10px; 272 transition: margin ease 0.5s; 273 } 274 #menu li li a:hover:before { 275 margin-right: 20px; 276 } 277 #menu li li a:hover { 278 color: #FFFFFF; 279 background-color: #242d37; 280 } 281 #menu li li.active > a { 282 color: #0b91d2; 283 background-color: #242d37; 284 } 285 #menu li ul a { 286 padding-left: 20px; 287 } 288 #menu li li ul a { 289 padding-left: 40px; 290 } 291 #menu li li li ul a { 292 padding-left: 60px; 293 } 294 #menu li li li li ul a { 295 padding-left: 80px; 296 } 297 298 /* footer */ 299 #footer { 300 height: 100px; 301 text-align: center; 302 } 303 /* Navs 304 /* Tabs */ 305 .nav-tabs > li > a { 306 color: #a5a5a5; 307 border-radius: 2px 2px 0 0; 308 } 309 .nav-tabs > li > a:hover { 310 border-color: #eee #eee #ddd; 311 } 312 .nav-tabs { 313 margin-bottom: 25px; 314 } 315 .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { 316 font-weight: bold; 317 color: #333; 318 } 319 .form-control:hover { 320 border: 1px solid #b9b9b9; 321 border-top-color: #a0a0a0; 322 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); 323 box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); 324 } 325 div.required .control-label:not(span):before, td.required:before { 326 content: '* '; 327 color: #F00; 328 font-weight: bold; 329 } 330 .btn-group { 331 white-space: nowrap; 332 } 333 .table thead td span[data-toggle="tooltip"]:after, label.control-label span:after { 334 font-family: FontAwesome; 335 color: #1E91CF; 336 content: "\f059"; 337 margin-left: 4px; 338 } 339 fieldset legend { 340 padding-bottom: 5px; 341 } 342 input[type="radio"], input[type="checkbox"] { 343 margin: 2px 0 0; 344 } 345 .radio, .checkbox { 346 min-height: 18px; 347 } 348 input[type="radio"], .radio input[type="radio"], .radio-inline input[type="radio"], input[type="checkbox"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] { 349 position: relative; 350 width: 13px; 351 width: 16px \0; 352 height: 13px; 353 height: 16px \0; 354 -webkit-appearance: none; 355 background: white; 356 border: 1px solid #dcdcdc; 357 border: 1px solid transparent \0; 358 border-radius: 1px; 359 } 360 input[type="radio"]:focus, .radio input[type="radio"]:focus, .radio-inline input[type="radio"]:focus, input[type="checkbox"]:focus, .checkbox input[type="checkbox"]:focus, .checkbox-inline input[type="checkbox"]:focus { 361 border-color: #4d90fe; 362 outline: 0; 363 } 364 input[type="radio"]:active, .radio input[type="radio"]:active, .radio-inline input[type="radio"]:active, input[type="checkbox"]:active, .checkbox input[type="checkbox"]:active, .checkbox-inline input[type="checkbox"]:active { 365 background-color: #ebebeb; 366 border-color: #c6c6c6; 367 } 368 input[type="radio"]:checked, .radio input[type="radio"]:checked, .radio-inline input[type="radio"]:checked, input[type="checkbox"]:checked, .checkbox input[type="checkbox"]:checked, .checkbox-inline input[type="checkbox"]:checked { 369 background: #fff; 370 } 371 input[type="radio"], .radio input[type="radio"], .radio-inline input[type="radio"] { 372 width: 15px; 373 width: 18px \0; 374 height: 15px; 375 height: 18px \0; 376 border-radius: 1em; 377 } 378 input[type="radio"]:checked::after, .radio input[type="radio"]:checked::after, .radio-inline input[type="radio"]:checked::after { 379 position: relative; 380 top: 3px; 381 left: 3px; 382 display: block; 383 width: 7px; 384 height: 7px; 385 content: ''; 386 background: #666; 387 border-radius: 1em; 388 } 389 input[type="checkbox"]:hover, .checkbox input[type="checkbox"]:hover, .checkbox-inline input[type="checkbox"]:hover { 390 border-color: #c6c6c6; 391 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); 392 -webkit-box-shadow: none \9; 393 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); 394 box-shadow: none \9; 395 } 396 input[type="checkbox"]:checked::after, .checkbox input[type="checkbox"]:checked::after, .checkbox-inline input[type="checkbox"]:checked::after { 397 position: absolute; 398 top: -6px; 399 left: -5px; 400 display: block; 401 content: url('../image/checkmark.png'); 402 } 403 .table thead td { 404 font-weight: bold; 405 } 406 .table thead > tr > td, .table tbody > tr > td { 407 vertical-align: middle; 408 } 409 .table a.asc:after { 410 content: " \f106"; 411 font-family: FontAwesome; 412 } 413 .table a.desc:after { 414 content: " \f107"; 415 font-family: FontAwesome; 416 } 417 .pagination { 418 margin: 0; 419 } 420 .form-group { 421 padding-top: 15px; 422 padding-bottom: 15px; 423 margin-bottom: 0; 424 } 425 .form-group + .form-group { 426 border-top: 1px solid #ededed; 427 } 428 /* Panels */ 429 .panel { 430 border-radius: 0px; 431 } 432 .panel .panel-heading { 433 position: relative; 434 } 435 .panel-heading h3 i { 436 margin-right: 5px; 437 -webkit-tap-highlight-color: rgba(0,0,0,0); 438 } 439 .panel-heading h3 { 440 font-weight: 500; 441 display: inline-block; 442 } 443 /* Primary Panel */ 444 .panel-primary { 445 border: 1px solid #c3e4f6; 446 border-top: 2px solid #5cb7e7; 447 } 448 .panel-primary .panel-heading { 449 color: #1e91cf; 450 border-color: #96d0f0; 451 background: white; 452 } 453 /* Default Panel */ 454 .panel-default { 455 border: 1px solid #dcdcdc; 456 border-top: 1px solid #dcdcdc; 457 } 458 .panel-default .panel-heading { 459 color: #4c4d5a; 460 border-color: #dcdcdc; 461 background: #f6f6f6; 462 text-shadow: 0 -1px 0 rgba(50,50,50,0); 463 } 464 .img-thumbnail i { 465 color: #FFFFFF; 466 background-color: #EEEEEE; 467 text-align: center; 468 vertical-align: middle; 469 width: 100px; 470 height: 100px; 471 padding-top: 20px; 472 vertical-align: middle; 473 display: inline-block; 474 } 475 .img-thumbnail.list i { 476 width: 40px; 477 height: 40px; 478 padding-top: 10px; 479 } 480 /* Tiles */ 481 .tile { 482 margin-bottom: 15px; 483 border-radius: 3px; 484 color: #FFFFFF; 485 transition: all 1s; 486 } 487 .tile-primary { 488 background-color: #1b80c2; 489 } 490 .tile-success { 491 background-color: #53b953; 492 } 493 .tile-warning { 494 background-color: #f3aa41; 495 } 496 .tile-danger { 497 background-color: #e45847; 498 } 499 .tile:hover { 500 opacity: 0.95; 501 } 502 .tile a { 503 color: #FFFFFF; 504 } 505 .tile-heading { 506 padding: 5px 8px; 507 text-transform: uppercase; 508 color: #FFF; 509 text-shadow: 0 -1px 0 rgba(0,0,0,.4); 510 background-color: rgba(255,255,255,0.1); 511 } 512 .tile .tile-heading .pull-right { 513 transition: all 1s; 514 opacity: 0.7; 515 } 516 .tile:hover .tile-heading .pull-right { 517 opacity: 1; 518 } 519 .tile-body { 520 padding: 15px; 521 color: #FFFFFF; 522 line-height: 48px; 523 text-shadow: 0 -1px 0 rgba(0,0,0,.4); 524 } 525 .tile .tile-body i { 526 font-size: 50px; 527 opacity: 0.3; 528 transition: all 1s; 529 } 530 .tile:hover .tile-body i { 531 color: #FFFFFF; 532 opacity: 1; 533 } 534 .tile .tile-body h2 { 535 font-size: 42px; 536 } 537 .tile-footer { 538 padding: 5px 8px; 539 background-color: rgba(0,0,0,0.1); 540 } 541 #stats { 542 border-radius: 2px; 543 color: #808b9c; 544 background: #2e3a47; 545 margin: 15px 20px; 546 padding: 5px 0; 547 } 548 #stats ul, #stats li { 549 padding: 0; 550 margin: 0; 551 list-style: none; 552 } 553 #stats li { 554 font-size: 11px; 555 color: #9d9d9d; 556 padding: 5px 10px; 557 border-bottom: 1px dotted #373737; 558 } 559 #stats div:first-child { 560 margin-bottom: 4px; 561 } 562 #stats .progress { 563 height: 3px; 564 margin-bottom: 0; 565 } 566 .jqvmap-label { 567 z-index: 999; 568 } 569 .alert { 570 overflow: auto; 571 } 572 573 /* Fix form-group margin inside the modal */ 574 .modal-body .form-group { 575 margin: 0; 576 } 577 /* Fixed Sumernote Button Height */ 578 .note-toolbar.panel-heading i { 579 font-size: 14px; 580 } 581 /* Filemanager Folder Size */ 582 #filemanager .fa-folder.fa-5x { 583 font-size: 10.5em; 584 } 585 #extension-list { 586 color: #4b525d; 587 } 588 #extension-list h2 { 589 margin-top: 54px; 590 margin-bottom: 44px; 591 } 592 #extension-list section { 593 border: 1px solid #ddd; 594 } 595 #extension-list section > div { 596 position: relative; 597 } 598 #extension-list section > div + div { 599 border-top: 1px solid #ddd; 600 padding: 10px; 601 } 602 #extension-list section:hover { 603 border: 1px solid #1b80c2; 604 } 605 #extension-list > .row { 606 margin-top: 40px; 607 } 608 #extension-list > .row > * { 609 margin-bottom: 30px; 610 } 611 612 #extension-list .extension-preview { 613 min-height: 150px; 614 } 615 #extension-list .extension-preview .extension-description { 616 position: absolute; 617 background-color: rgba(36, 45, 55, 0.9); 618 color: #fff; 619 padding: 10px; 620 font-size: 14px; 621 line-height: 16px; 622 opacity: 0; 623 height: 100%; 624 width: 100%; 625 } 626 #extension-list .extension-preview .extension-description:hover { 627 opacity: 1; 628 } 629 @media screen and (min-width: 992px) and (max-width: 1199px) { 630 #extension-list .extension-preview { 631 min-height: 123px; 632 } 633 #extension-list .extension-preview .extension-description { 634 font-size: 12.5px; 635 padding: 6px; 636 } 637 } 638 #extension-list .extension-preview img { 639 margin: 0 auto; 640 } 641 #extension-list .extension-name { 642 min-height: 100px; 643 } 644 #extension-list .extension-name p { 645 color: #000; 646 margin-bottom: 0; 647 font-weight: 600; 648 } 649 #extension-list .extension-name p:first-child { 650 font-size: 17px; 651 } 652 #extension-list .extension-name p span { 653 color: #4b525d; 654 font-weight: 400; 655 } 656 #extension-list .extension-name h4 a, #extension-list .extension-name p a { 657 color: #000; 658 } 659 #extension-list .extension-name + div > .row { 660 margin-top: 0; 661 } 662 @media screen and (min-width: 992px) and (max-width: 1199px) { 663 #extension-list .extension-name + div > .row { 664 font-size: 14px; 665 } 666 } 667 #extension-list i { 668 color: #10b4e9; 669 } 670 #extension-list span { 671 font-weight: 600; 672 } 673 674 } 675 #marketplace-extension-info #banner img { 676 margin-left: auto; 677 margin-right: auto; 678 } 679 #marketplace-extension-info .extension-review { 680 border-top: 5px solid #1b80c2; 681 padding-top: 50px; 682 margin-top: 50px; 683 margin-bottom: 50px; 684 } 685 #marketplace-extension-info .nav-tabs { 686 font-size: 14px; 687 } 688 #marketplace-extension-info .nav-tabs + .tab-content { 689 margin-top: 30px; 690 margin-bottom: 30px; 691 } 692 #marketplace-extension-info iframe { 693 width: 100%; 694 height: 500px; 695 } 696 @media screen and (max-width: 767px) { 697 #marketplace-extension-info iframe { 698 height: 350px; 699 } 700 } 701 #marketplace-extension-info #buy { 702 color: #4b525d; 703 } 704 #marketplace-extension-info #buy #price { 705 color: #000; 706 font-size: 20px; 707 padding-top: 15px; 708 padding-bottom: 5px; 709 } 710 #marketplace-extension-info #buy i { 711 color: #10b4e9; 712 } 713 #marketplace-extension-info #buy hr { 714 border-color: #ddd; 715 margin: 10px 0; 716 } 717 #marketplace-extension-info #sales { 718 color: #4b525d; 719 } 720 #marketplace-extension-info #sales i { 721 color: #7ec239; 722 margin-right: 10px; 723 font-size: 24px; 724 } 725 #marketplace-extension-info #sales strong { 726 font-size: 24px; 727 } 728 #marketplace-extension-info #comment { 729 color: #4b525d; 730 } 731 #marketplace-extension-info #comment i { 732 margin-right: 10px; 733 font-size: 22px; 734 } 735 #marketplace-extension-info #comment strong { 736 font-size: 22px; 737 } 738 #marketplace-extension-info .reply > div { 739 margin-top: 15px; 740 } 741 742 #marketplace-extension-info .well .media { 743 line-height: 1.2; 744 } 745 #marketplace-extension-info .well .media .media-body { 746 padding-top: 6px; 747 } 748 #marketplace-extension-info .well .media .media-body span { 749 font-size: 24px; 750 font-weight: 600; 751 } 752 #marketplace-extension-info .well .media .media-body small { 753 color: #878f9a; 754 } 755 @media screen and (max-width: 992px) { 756 #marketplace-extension-info .container-fluid { 757 padding-bottom: 30px; 758 } 759 } 760 .list-check { 761 list-style: none; 762 } 763 .list-check li::before { 764 font-family: 'FontAwesome'; 765 content: '\f00c'; 766 margin-left: -30px; 767 width: 29px; 768 display: inline-block; 769 color: #7ebd38; 770 } 771 .list-check.list-color-blue li::before { 772 color: #02afe9; 773 } 774 775 .well.filter { 776 background-color: #ffffff; 777 } 778 779 780 @font-face { 781 font-family: 'opencart'; 782 src: url('fonts/opencart.eot?h4wsna'); 783 src: url('fonts/opencart.eot?h4wsna#iefix') format('embedded-opentype'), url('fonts/opencart.ttf?h4wsna') format('truetype'), url('fonts/opencart.woff?h4wsna') format('woff'), url('fonts/opencart.svg?h4wsna#opencart') format('svg'); 784 font-weight: normal; 785 font-style: normal; 786 } 787 [class^="opencart-icon-"], [class*=" opencart-icon-"] { 788 font-family: 'opencart' !important; 789 speak: none; 790 font-style: normal; 791 font-weight: normal; 792 font-variant: normal; 793 text-transform: none; 794 /* Better Font Rendering =========== */ 795 line-height: 1; 796 -webkit-font-smoothing: antialiased; 797 -moz-osx-font-smoothing: grayscale; 798 } 799 .opencart-icon-comment:before { 800 content: "\e91b"; 801 } 802 .opencart-icon-cart-mini:before { 803 content: "\e91c"; 804 }