blueimp-gallery-indicator.css 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  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. -webkit-user-select: none;
  25. -khtml-user-select: none;
  26. -moz-user-select: none;
  27. -ms-user-select: none;
  28. user-select: none;
  29. }
  30. .blueimp-gallery > .indicator > li {
  31. display: inline-block;
  32. width: 9px;
  33. height: 9px;
  34. margin: 6px 3px 0 3px;
  35. -webkit-box-sizing: content-box;
  36. -moz-box-sizing: content-box;
  37. box-sizing: content-box;
  38. border: 1px solid transparent;
  39. background: #ccc;
  40. background: rgba(255, 255, 255, 0.25) center no-repeat;
  41. border-radius: 5px;
  42. box-shadow: 0 0 2px #000;
  43. opacity: 0.5;
  44. cursor: pointer;
  45. }
  46. /* IE7 fixes */
  47. * + html .blueimp-gallery > .indicator > li {
  48. display: inline;
  49. }
  50. .blueimp-gallery > .indicator > li:hover,
  51. .blueimp-gallery > .indicator > .active {
  52. background-color: #fff;
  53. border-color: #fff;
  54. opacity: 1;
  55. }
  56. .blueimp-gallery > .indicator > li:after {
  57. opacity: 0;
  58. display: block;
  59. position: absolute;
  60. content: '';
  61. top: -5em;
  62. width: 75px;
  63. height: 75px;
  64. transition: transform 600ms ease-out, opacity 400ms ease-out;
  65. transform: translateX(-50%) translateY(0) translateZ(0px);
  66. pointer-events: none;
  67. }
  68. .blueimp-gallery > .indicator > li:hover:after {
  69. opacity: 1;
  70. border-radius: 50%;
  71. background: inherit;
  72. transform: translateX(-50%) translateY(-5px) translateZ(0px);
  73. }
  74. .blueimp-gallery > .indicator > .active:after {
  75. display: none;
  76. }
  77. .blueimp-gallery-controls > .indicator {
  78. display: block;
  79. /* Fix z-index issues (controls behind slide element) on Android: */
  80. -webkit-transform: translateZ(0);
  81. -moz-transform: translateZ(0);
  82. -ms-transform: translateZ(0);
  83. -o-transform: translateZ(0);
  84. transform: translateZ(0);
  85. }
  86. .blueimp-gallery-single > .indicator {
  87. display: none;
  88. }