controls.css 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. .btn {
  2. position: relative;
  3. display: block;
  4. padding:8pt;
  5. overflow: hidden;
  6. border-width: 0;
  7. outline: none;
  8. box-shadow: 0 1pt 4pt rgba(0, 0, 0, .6);
  9. background-color: #41cd52;
  10. color: #ecf0f1;
  11. font-size: 12pt;
  12. font-weight: bold;
  13. text-align: center;
  14. transition: background-color .3s;
  15. }
  16. .btn:hover, .btn:focus {
  17. background-color: #3ab849;
  18. cursor: pointer;
  19. }
  20. .btn > * {
  21. position: relative;
  22. }
  23. .btn span {
  24. display: block;
  25. padding: 12px 24px;
  26. }
  27. .btn:before {
  28. content: "";
  29. position: absolute;
  30. top: 50%;
  31. left: 50%;
  32. display: block;
  33. width: 0;
  34. padding-top: 0;
  35. border-radius: 100%;
  36. background-color: rgba(236, 240, 241, .3);
  37. -webkit-transform: translate(-50%, -50%);
  38. -moz-transform: translate(-50%, -50%);
  39. -ms-transform: translate(-50%, -50%);
  40. -o-transform: translate(-50%, -50%);
  41. transform: translate(-50%, -50%);
  42. }
  43. .btn:active:before {
  44. width: 120%;
  45. padding-top: 120%;
  46. transition: width .2s ease-out, padding-top .2s ease-out;
  47. }
  48. .btn img {
  49. margin-left: auto;
  50. margin-right: auto;
  51. display: block;
  52. }
  53. .scrollable {
  54. width: 100%;
  55. height: 100%;
  56. overflow-y: auto;
  57. }
  58. .fadeOut {
  59. background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 100%); /* FF3.6+ */
  60. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0, 0, 0,0)), color-stop(100%,rgba(255, 255, 255, 1))); /* Chrome,Safari4+ */
  61. background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 100%); /* Chrome10+,Safari5.1+ */
  62. background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 100%); /* Opera 11.10+ */
  63. background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 100%); /* IE10+ */
  64. background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 100%); /* W3C */
  65. }
  66. .fadeIn {
  67. background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%); /* FF3.6+ */
  68. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255, 255, 255, 1)), color-stop(100%,rgba(0, 0, 0, 0))); /* Chrome,Safari4+ */
  69. background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%); /* Chrome10+,Safari5.1+ */
  70. background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%); /* Opera 11.10+ */
  71. background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%); /* IE10+ */
  72. background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%); /* W3C */
  73. }