blueimp-gallery-indicator.css 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. @charset "UTF-8";
  2. /*
  3. * blueimp Gallery Indicator CSS
  4. * https://github.com/blueimp/Gallery
  5. *
  6. * Copyright 2013, Sebastian Tschan
  7. * https://blueimp.net
  8. *
  9. * Licensed under the MIT license:
  10. * https://opensource.org/licenses/MIT
  11. */
  12. .blueimp-gallery > .indicator {
  13. position: absolute;
  14. top: auto;
  15. right: 15px;
  16. bottom: 15px;
  17. left: 15px;
  18. margin: 0 40px;
  19. padding: 0;
  20. list-style: none;
  21. text-align: center;
  22. line-height: 10px;
  23. display: none;
  24. }
  25. .blueimp-gallery > .indicator > li {
  26. display: inline-block;
  27. width: 9px;
  28. height: 9px;
  29. margin: 6px 3px 0 3px;
  30. -webkit-box-sizing: content-box;
  31. -moz-box-sizing: content-box;
  32. box-sizing: content-box;
  33. border: 1px solid transparent;
  34. background: #ccc;
  35. background: rgba(255, 255, 255, 0.25) center no-repeat;
  36. border-radius: 5px;
  37. box-shadow: 0 0 2px #000;
  38. opacity: 0.5;
  39. cursor: pointer;
  40. }
  41. .blueimp-gallery > .indicator > li:hover,
  42. .blueimp-gallery > .indicator > .active {
  43. background-color: #fff;
  44. border-color: #fff;
  45. opacity: 1;
  46. }
  47. .blueimp-gallery > .indicator > li:after {
  48. opacity: 0;
  49. display: block;
  50. position: absolute;
  51. content: '';
  52. top: -5em;
  53. width: 75px;
  54. height: 75px;
  55. transition: transform 600ms ease-out, opacity 400ms ease-out;
  56. transform: translateX(-50%) translateY(0) translateZ(0px);
  57. pointer-events:none;
  58. }
  59. .blueimp-gallery > .indicator > li:hover:after {
  60. opacity: 1;
  61. border-radius: 50%;
  62. background: inherit;
  63. transform: translateX(-50%) translateY(-5px) translateZ(0px);
  64. }
  65. .blueimp-gallery > .indicator > .active:after {
  66. display: none;
  67. }
  68. .blueimp-gallery-controls > .indicator {
  69. display: block;
  70. /* Fix z-index issues (controls behind slide element) on Android: */
  71. -webkit-transform: translateZ(0);
  72. -moz-transform: translateZ(0);
  73. -ms-transform: translateZ(0);
  74. -o-transform: translateZ(0);
  75. transform: translateZ(0);
  76. }
  77. .blueimp-gallery-single > .indicator {
  78. display: none;
  79. }
  80. .blueimp-gallery > .indicator {
  81. -webkit-user-select: none;
  82. -khtml-user-select: none;
  83. -moz-user-select: none;
  84. -ms-user-select: none;
  85. user-select: none;
  86. }
  87. /* IE7 fixes */
  88. *+html .blueimp-gallery > .indicator > li {
  89. display: inline;
  90. }