web/public_php/ams/css/charisma-app.css

   1 @import url(https://fonts.googleapis.com/css?family=Shojumaru);
   2
   3 select {
   4     background-color: #fff;
   5 }
   6
   7 .ch-container {
   8     padding: 0 15px;
   9 }
  10
  11 .top-block {
  12     border-radius: 20px;
  13     font-size: 14px;
  14     text-align: center;
  15     padding: 5px;
  16     margin-bottom: 10px;
  17     font-weight: bold;
  18     position: relative;
  19     display: block;
  20     line-height: 22px;
  21     text-shadow: 0 0 1px #DDD;
  22     text-decoration: none;
  23     -webkit-box-shadow: inset 0 0 0 1px #FAFAFA;
  24     -moz-box-shadow: inset 0 0 0 1px #FAFAFA;
  25     box-shadow: inset 0 0 0 1px #FAFAFA;
  26     background: -moz-linear-gradient(top, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
  27     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153, 0.2)), color-stop(100%, rgba(125, 185, 232, 0)));
  28     background: -webkit-linear-gradient(top, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
  29     background: -o-linear-gradient(top, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
  30     background: -ms-linear-gradient(top, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
  31     background: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
  32     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#331e5799', endColorstr='#007db9e8', GradientType=0);
  33 }
  34
  35 .top-block span {
  36     clear: both;
  37 }
  38
  39 .top-block i {
  40     font-size: 25px;
  41 }
  42
  43 .top-block:hover {
  44     text-decoration: none;
  45 }
  46
  47 .notification {
  48     display: block;
  49     position: absolute;
  50     top: -10px;
  51     right: -5px;
  52     line-height: 16px;
  53     height: 16px;
  54     padding: 0 5px;
  55     font-family: Arial, sans-serif;
  56     color: white !important;
  57     text-shadow: 0 1px hsla(0, 0%, 0%, 0.25);
  58     border-width: 1px;
  59     border-style: solid;
  60     border-radius: 10px;
  61     -webkit-border-radius: 10px;
  62     -moz-border-radius: 10px;
  63     -webkit-box-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.08), inset 0 1px hsla(0, 100%, 100%, 0.3);
  64     -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), inset 0 1px rgba(255, 255, 255, 0.3);
  65     box-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.08), inset 0 1px hsla(0, 100%, 100%, 0.3);
  66 }
  67
  68 .notification {
  69     border-color: #2FABE9;
  70     background-color: #67C2EF;
  71     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsl(200, 80%, 82%)), color-stop(100%, hsl(200, 81%, 67%)));
  72     background-image: -webkit-linear-gradient(top, hsl(200, 80%, 82%), hsl(200, 81%, 67%));
  73     background-image: -moz-linear-gradient(top, hsl(200, 80%, 82%), hsl(200, 81%, 67%));
  74     background-image: -ms-linear-gradient(top, hsl(200, 80%, 82%), hsl(200, 81%, 67%));
  75     background-image: -o-linear-gradient(top, hsl(200, 80%, 82%), hsl(200, 81%, 67%));
  76     background-image: linear-gradient(top, hsl(200, 80%, 82%), hsl(200, 81%, 67%));
  77 }
  78
  79 .notification.green {
  80     border-color: #5AAD34;
  81     background-color: #78CD51;
  82     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsl(101, 54%, 71%)), color-stop(100%, hsl(101, 55%, 56%)));
  83     background-image: -webkit-linear-gradient(top, hsl(101, 54%, 71%), hsl(101, 55%, 56%));
  84     background-image: -moz-linear-gradient(top, hsl(101, 54%, 71%), hsl(101, 55%, 56%));
  85     background-image: -ms-linear-gradient(top, hsl(101, 54%, 71%), hsl(101, 55%, 56%));
  86     background-image: -o-linear-gradient(top, hsl(101, 54%, 71%), hsl(101, 55%, 56%));
  87     background-image: linear-gradient(top, hsl(101, 54%, 71%), hsl(101, 55%, 56%));
  88 }
  89
  90 .notification.yellow {
  91     border-color: #F4A506;
  92     background-color: #FABB3D;
  93     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsl(40, 95%, 76%)), color-stop(100%, hsl(40, 95%, 61%)));
  94     background-image: -webkit-linear-gradient(top, hsl(40, 95%, 76%), hsl(40, 95%, 61%));
  95     background-image: -moz-linear-gradient(top, hsl(40, 95%, 76%), hsl(40, 95%, 61%));
  96     background-image: -ms-linear-gradient(top, hsl(40, 95%, 76%), hsl(40, 95%, 61%));
  97     background-image: -o-linear-gradient(top, hsl(40, 95%, 76%), hsl(40, 95%, 61%));
  98     background-image: linear-gradient(top, hsl(40, 95%, 76%), hsl(40, 95%, 61%));
  99 }
 100
 101 .notification.red {
 102     border-color: #FA5833;
 103     background-color: #FA603D;
 104     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsl(11, 95%, 76%)), color-stop(100%, hsl(11, 95%, 61%)));
 105     background-image: -webkit-linear-gradient(top, hsl(11, 95%, 76%), hsl(11, 95%, 61%));
 106     background-image: -moz-linear-gradient(top, hsl(11, 95%, 76%), hsl(11, 95%, 61%));
 107     background-image: -ms-linear-gradient(top, hsl(11, 95%, 76%), hsl(11, 95%, 61%));
 108     background-image: -o-linear-gradient(top, hsl(11, 95%, 76%), hsl(11, 95%, 61%));
 109     background-image: linear-gradient(top, hsl(11, 95%, 76%), hsl(11, 95%, 61%));
 110 }
 111
 112 .box {
 113     margin-top: 10px;
 114     margin-bottom: 10px;
 115 }
 116
 117 .box-inner {
 118     border: 1px solid #DEDEDE;
 119     border-radius: 3px;
 120     -webkit-border-radius: 3px;
 121     -moz-border-radius: 3px;
 122     box-shadow: 0 0 10px rgba(189, 189, 189, 0.4);
 123     -webkit-box-shadow: 0 0 10px rgba(189, 189, 189, 0.4);
 124     -moz-box-shadow: 0 0 10px rgba(189, 189, 189, 0.4);
 125 }
 126
 127 .box-header {
 128     border: none;
 129     padding-top: 5px;
 130     border-bottom: 1px solid #DEDEDE;
 131     border-radius: 3px 3px 0 0;
 132     -webkit-border-radius: 3px 3px 0 0;
 133     -moz-border-radius: 3px 3px 0 0;
 134     height: 35px;
 135     min-height: 35px !important;
 136     margin-bottom: 0;
 137     font-weight: bold;
 138     font-size: 16px;
 139     background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
 140     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
 141     background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
 142     background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
 143     background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
 144     background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
 145     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#1a000000', GradientType=0);
 146
 147 }
 148
 149 .box-header h2 {
 150     font-size: 15px;
 151     width: auto;
 152     clear: none;
 153     float: left;
 154     line-height: 25px;
 155     white-space: nowrap;
 156     font-weight: bold;
 157     margin-top: 0;
 158     margin-bottom: 0;
 159 }
 160
 161 .box-header h3 {
 162     font-size: 13px;
 163     width: auto;
 164     clear: none;
 165     float: left;
 166     line-height: 25px;
 167     white-space: nowrap;
 168 }
 169
 170 .box-header h2 > i {
 171     margin-top: 1px;
 172 }
 173
 174 .box-icon {
 175     float: right;
 176 }
 177
 178 .box-icon a {
 179     clear: none;
 180     float: left;
 181     margin: 0 2px;
 182     height: 20px;
 183     width: 5px;
 184     margin-top: 1px;
 185 }
 186
 187 .box-icon a i {
 188     margin-left: -6px;
 189     top: -1px;
 190 }
 191
 192 .box-content {
 193     padding: 10px;
 194 }
 195
 196 .btn-round {
 197     border-radius: 40px;
 198     -webkit-border-radius: 40px;
 199     -moz-border-radius: 40px;
 200     font-size: 12px;
 201     padding-top: 4px;
 202 }
 203
 204 ul.dashboard-list li {
 205     padding: 7px 0;
 206     list-style: none;
 207     border-bottom: 1px solid #EBEBEB;
 208     border-top: 1px solid white;
 209 }
 210
 211 ul.dashboard-list a:hover {
 212     text-decoration: none;
 213 }
 214
 215 ul.dashboard-list {
 216     margin: 0;
 217 }
 218
 219 ul.dashboard-list li a span {
 220     display: inline-block;
 221     font-size: 18px;
 222     font-weight: bold;
 223     margin-right: 10px;
 224     text-align: right;
 225     width: 70px;
 226     zoom: 1;
 227 }
 228
 229 .dashboard-avatar {
 230     height: 50px;
 231     width: 50px;
 232     padding: 1px;
 233     float: left;
 234     margin-left: 15px;
 235     margin-right: 15px;
 236     border: 1px solid #EBEBEB;
 237     border-radius: 50%;
 238 }
 239
 240 .thumbnail {
 241     background-color: white;
 242     z-index: 2;
 243     position: relative;
 244     margin-bottom: 40px !important;
 245 }
 246
 247 .thumbnails > li {
 248     display: inline-block;
 249     margin-left: 15px;
 250 }
 251
 252 .thumbnail img, .thumbnail > a {
 253     z-index: 2;
 254     height: 100px;
 255     width: 100px;
 256     position: relative;
 257     display: block;
 258 }
 259
 260 img.grayscale {
 261     -webkit-filter: grayscale(1);
 262     -webkit-filter: grayscale(100%);
 263     -moz-filter: grayscale(100%);
 264     -ms-filter: grayscale(100%);
 265     -o-filter: grayscale(100%);
 266 }
 267
 268 .thumbnail .gallery-controls {
 269     position: absolute;
 270     z-index: 1;
 271     margin-top: -30px;
 272     height: 30px;
 273     min-height: 30px;
 274     padding: 0 6.5px;
 275 }
 276
 277 .thumbnail .gallery-controls p {
 278     display: block;
 279     margin: auto;
 280     width: 100%;
 281 }
 282
 283 div.uploader {
 284     border-radius: 14px;
 285     -webkit-border-radius: 14px;
 286     -moz-border-radius: 14px;
 287 }
 288
 289 footer {
 290     clear: both;
 291 }
 292
 293 div.center, p.center, img.center {
 294     margin-left: auto !important;
 295     margin-right: auto !important;
 296     float: none !important;
 297     display: block;
 298     text-align: center;
 299 }
 300
 301 .stackControls {
 302     padding: 5px;
 303 }
 304
 305
 306 .sidebar-nav {
 307     min-height: 0;
 308     box-shadow: 0 0 10px #BDBDBD;
 309     border-radius: 5px;
 310     margin-bottom: 0;
 311     padding-bottom: 0;
 312     max-height: none;
 313 }
 314
 315 .sidebar-nav > ul > li:not(.nav-header) {
 316     margin-right: -2px;
 317     margin-left: -2px;
 318 }
 319
 320 .navbar-brand {
 321     font-family: 'Shojumaru', cursive, Arial, serif;
 322     letter-spacing: 2px;
 323     text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
 324     width: 183px;
 325     font-size: 17px;
 326 }
 327
 328 .navbar-brand img {
 329     float: left;
 330     height: 20px;
 331     width: 20px;
 332     margin-right: 5px;
 333 }
 334
 335 .navbar-brand span {
 336     float: left;
 337 }
 338
 339 .theme-container {
 340     z-index: 5;
 341 }
 342
 343 .navbar-search {
 344     margin-left: 10px;
 345     margin-top: 7px;
 346 }
 347
 348 .navbar-inner {
 349     padding-top: 5px;
 350     padding-bottom: 5px;
 351     line-height: 30px;
 352     height: 60px;
 353 }
 354
 355
 356
 357 .navbar-inner .btn-group {
 358     margin: 7px 5px 0 5px;
 359 }
 360
 361 ul.ajax-loaders li {
 362     display: inline-block;
 363     list-style: none;
 364     padding: 10px;
 365 }
 366
 367 ul.ajax-loaders {
 368     min-height: 80px;
 369 }
 370
 371 .bs-icons li {
 372     list-style: none;
 373 }
 374
 375 #for-is-ajax {
 376     padding-left: 12px;
 377     cursor: pointer;
 378 }
 379
 380 #loading {
 381     margin-top: 20px;
 382     width: 128px;
 383     font-weight: bold;
 384 }
 385
 386 #loading div.center {
 387     margin-top: 10px;
 388     height: 15px;
 389     width: 128px;
 390     background: url(../img/ajax-loaders/ajax-loader-6.gif);
 391 }
 392
 393 .box-content .nav-tabs {
 394     margin-right: -10px;
 395     margin-left: -10px;
 396 }
 397
 398
 399 .login-header {
 400     padding-top: 30px;
 401     height: 120px;
 402 }
 403
 404 .pull-left {
 405     float: left !important;
 406 }
 407
 408 .pull-right {
 409     float: right !important;
 410 }
 411
 412 .remember {
 413     margin-top: 3px;
 414 }
 415
 416 .green {
 417     color: #458746;
 418 }
 419
 420 .red {
 421     color: #B94846;
 422 }
 423
 424 .blue {
 425     color: #3986AC;
 426 }
 427
 428 .yellow {
 429     color: #F99406;
 430 }
 431
 432 .login-box .input-prepend {
 433     margin-bottom: 10px;
 434 }
 435
 436 .login-box .btn {
 437     margin-top: 15px;
 438     width: 100%
 439 }
 440
 441 .box-content.buttons {
 442     min-height: 297px;
 443 }
 444
 445 .main-menu > li > a {
 446     border: 1px solid rgba(221, 221, 221, 0.46);
 447 }
 448
 449 .main-menu > li {
 450     margin-top: 0 !important;
 451 }
 452
 453 .sidebar-nav .nav-header {
 454     display: block;
 455     padding: 3px 15px;
 456     font-size: 11px;
 457     font-weight: bold;
 458     line-height: 18px;
 459     color: #999999;
 460     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 461     text-transform: uppercase;
 462 }
 463
 464 .navbar {
 465     border-radius: 0;
 466 }
 467
 468 ul.main-menu li:hover {
 469     margin-left: 8px;
 470 }
 471
 472 ul.main-menu li.active {
 473     margin-left: 8px;
 474 }
 475
 476 ul.main-menu li.nav-header:hover {
 477     margin-left: 0;
 478 }
 479
 480 ul.main-menu li:not(.nav-header) {
 481     -webkit-transition: .3s;
 482     -moz-transition: .3s;
 483     -ms-transition: .3s;
 484     -o-transition: .3s;
 485     transition: .3s;
 486 }
 487
 488 .accordion > ul {
 489     display: none;
 490     margin-left: 10px;
 491 }
 492
 493 .nav-sm {
 494     display: none;
 495 }
 496
 497 .donate a {
 498     font-weight: bold;
 499     font-size: 16px;
 500     letter-spacing: 1px;
 501 }
 502
 503 .donate {
 504     padding: 20px 0 0 20px;
 505     text-align: center;
 506 }
 507
 508 .preview-on-phone {
 509     height: 380px;
 510
 511 }
 512
 513 .powered-by {
 514     text-align: right;
 515 }
 516
 517 .whitespace:before {
 518     content: "\2122";
 519     color: transparent !important;
 520 }
 521
 522 .center-block {
 523     float: none !important;
 524     text-align: center;
 525 }
 526
 527 ul.github-buttons li {
 528     display: inline;
 529 }
 530
 531 .homepage-box {
 532     height: 380px;
 533 }
 534
 535 .download-buttons a {
 536     margin: 5px;
 537 }
 538
 539 .center-text {
 540     text-align: center;
 541 }
 542
 543 /* Mobile */
 544 @media only screen and (max-width: 767px) {
 545
 546     .navbar-brand {
 547         font-family: 'Shojumaru', cursive, Arial, serif;
 548         letter-spacing: 2px;
 549         text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
 550         width: 40%;
 551         font-size: 14px;
 552     }
 553
 554     .nav-sm {
 555         display: block;
 556         margin-bottom: 10px;
 557         border-bottom: solid white 1px;
 558         padding-bottom: 10px;
 559     }
 560
 561     .sidebar-nav .nav-canvas {
 562         top: -20px;
 563         left: -90%;
 564         position: absolute;
 565         width: 80%;
 566         z-index: 2;
 567         background: rgba(0, 0, 0, 0.8);
 568         margin: 0 !important;
 569         border-radius: 0 0 20px 0;
 570         padding-bottom: 10px;
 571         will-change: left;
 572     }
 573
 574     .sidebar-nav.active .nav-canvas {
 575         left: -20px;
 576         border-right: solid 1px white;
 577         border-bottom: solid 1px white;
 578     }
 579
 580     .sidebar-nav {
 581         position: relative;
 582         z-index: 3;
 583         margin: 0 !important;
 584         padding: 0;
 585     }
 586
 587     .nav-canvas {
 588         -webkit-transition: .2s;
 589         -moz-transition: .2s;
 590         -ms-transition: .2s;
 591         -o-transition: .2s;
 592         transition: .2s;
 593     }
 594
 595     .sidebar-nav a {
 596         border: none !important;
 597         color: white;
 598     }
 599
 600     #for-is-ajax {
 601         color: white;
 602         margin-top: 15px;
 603     }
 604
 605     .main-menu .nav-header {
 606         color: white;
 607     }
 608
 609     ul.main-menu li:hover {
 610         margin-left: inherit;
 611     }
 612
 613     ul.main-menu li.active {
 614         margin-left: inherit;
 615     }
 616
 617     ul.main-menu a:hover, .nav-sm a:hover {
 618         background: none !important;
 619         color: grey;
 620     }
 621
 622     .navbar-default .navbar-toggle:focus {
 623         background-color: inherit;
 624     }
 625
 626     .navbar-default .navbar-toggle.active {
 627         box-shadow: 0 0 7px rgb(0, 255, 40);
 628         border: solid 1px white;
 629     }
 630
 631     .navbar-toggle {
 632         margin-left: 5px;
 633         margin-right: 0;
 634     }
 635
 636     .powered-by {
 637         text-align: center;
 638     }
 639
 640     .copyright {
 641         text-align: center;
 642     }
 643
 644     .table-wrapper .pinned {
 645         box-shadow: 0 0 20px black;
 646     }
 647 }
 648
 649 /* Tablet */
 650 @media only screen and (min-width: 768px) and (max-width: 979px) {
 651     .box-icon {
 652         display: none;
 653     }
 654
 655     .box-header h2 {
 656         font-size: 13px !important;
 657     }
 658
 659     .box-header h3 {
 660         font-size: 11px !important;
 661     }
 662
 663     .main-menu-span {
 664         width: 6.2% !important;
 665         margin-right: 20px;
 666                 min-width: 200px;
 667     }
 668
 669     .top-menu > li i {
 670         display: none;
 671     }
 672
 673     .sidebar-nav li span {
 674         display: block !important;
 675     }
 676
 677     .sidebar-nav li a, .sidebar-nav .nav-header {
 678         text-align: center
 679     }
 680
 681     .sidebar-nav {
 682         padding: 0;
 683         margin-bottom: 0;
 684     }
 685 }
 686
 687 /* Computer */
 688 @media only screen and (min-width: 980px) {
 689     a, button, input[type=submit], input[type=button], .product-img {
 690         -webkit-transition: .5s;
 691         -moz-transition: .5s;
 692         -ms-transition: .5s;
 693         -o-transition: .5s;
 694         transition: .5s;
 695     }
 696
 697     .ch-container {
 698         padding: 0 20px;
 699     }
 700 }