glide.theme.css 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. .glide__arrow {
  2. position: absolute;
  3. display: block;
  4. top: 50%;
  5. z-index: 2;
  6. color: white;
  7. text-transform: uppercase;
  8. padding: 9px 12px;
  9. background-color: transparent;
  10. border: 2px solid rgba(255, 255, 255, 0.5);
  11. border-radius: 4px;
  12. box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1);
  13. text-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
  14. opacity: 1;
  15. cursor: pointer;
  16. transition: opacity 150ms ease, border 300ms ease-in-out;
  17. transform: translateY(-50%);
  18. line-height: 1; }
  19. .glide__arrow:focus {
  20. outline: none; }
  21. .glide__arrow:hover {
  22. border-color: white; }
  23. .glide__arrow--left {
  24. left: 2em; }
  25. .glide__arrow--right {
  26. right: 2em; }
  27. .glide__arrow--disabled {
  28. opacity: 0.33; }
  29. .glide__bullets {
  30. position: absolute;
  31. z-index: 2;
  32. bottom: 2em;
  33. left: 50%;
  34. display: inline-flex;
  35. list-style: none;
  36. transform: translateX(-50%); }
  37. .glide__bullet {
  38. background-color: rgba(255, 255, 255, 0.5);
  39. width: 9px;
  40. height: 9px;
  41. padding: 0;
  42. border-radius: 50%;
  43. border: 2px solid transparent;
  44. transition: all 300ms ease-in-out;
  45. cursor: pointer;
  46. line-height: 0;
  47. box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1);
  48. margin: 0 0.25em; }
  49. .glide__bullet:focus {
  50. outline: none; }
  51. .glide__bullet:hover, .glide__bullet:focus {
  52. border: 2px solid white;
  53. background-color: rgba(255, 255, 255, 0.5); }
  54. .glide__bullet--active {
  55. background-color: white; }
  56. .glide--swipeable {
  57. cursor: grab;
  58. cursor: -moz-grab;
  59. cursor: -webkit-grab; }
  60. .glide--dragging {
  61. cursor: grabbing;
  62. cursor: -moz-grabbing;
  63. cursor: -webkit-grabbing; }