lg-thumbnail.css 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. .lg-outer .lg-thumb-outer {
  2. background-color: #0d0a0a;
  3. width: 100%;
  4. max-height: 350px;
  5. overflow: hidden;
  6. float: left;
  7. }
  8. .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item {
  9. cursor: -webkit-grab;
  10. cursor: -moz-grab;
  11. cursor: -o-grab;
  12. cursor: -ms-grab;
  13. cursor: grab;
  14. }
  15. .lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item {
  16. cursor: move;
  17. cursor: -webkit-grabbing;
  18. cursor: -moz-grabbing;
  19. cursor: -o-grabbing;
  20. cursor: -ms-grabbing;
  21. cursor: grabbing;
  22. }
  23. .lg-outer .lg-thumb-outer.lg-dragging .lg-thumb {
  24. -webkit-transition-duration: 0s !important;
  25. transition-duration: 0s !important;
  26. }
  27. .lg-outer .lg-thumb-outer.lg-rebuilding-thumbnails .lg-thumb {
  28. -webkit-transition-duration: 0s !important;
  29. transition-duration: 0s !important;
  30. }
  31. .lg-outer .lg-thumb-outer.lg-thumb-align-middle {
  32. text-align: center;
  33. }
  34. .lg-outer .lg-thumb-outer.lg-thumb-align-left {
  35. text-align: left;
  36. }
  37. .lg-outer .lg-thumb-outer.lg-thumb-align-right {
  38. text-align: right;
  39. }
  40. .lg-outer.lg-single-item .lg-thumb-outer {
  41. display: none;
  42. }
  43. .lg-outer .lg-thumb {
  44. padding: 5px 0;
  45. height: 100%;
  46. margin-bottom: -5px;
  47. display: inline-block;
  48. vertical-align: middle;
  49. }
  50. @media (min-width: 768px) {
  51. .lg-outer .lg-thumb {
  52. padding: 10px 0;
  53. }
  54. }
  55. .lg-outer .lg-thumb-item {
  56. cursor: pointer;
  57. float: left;
  58. overflow: hidden;
  59. height: 100%;
  60. border-radius: 2px;
  61. margin-bottom: 5px;
  62. will-change: border-color;
  63. }
  64. @media (min-width: 768px) {
  65. .lg-outer .lg-thumb-item {
  66. border-radius: 4px;
  67. border: 2px solid #fff;
  68. -webkit-transition: border-color 0.25s ease;
  69. -o-transition: border-color 0.25s ease;
  70. transition: border-color 0.25s ease;
  71. }
  72. }
  73. .lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {
  74. border-color: #a90707;
  75. }
  76. .lg-outer .lg-thumb-item img {
  77. width: 100%;
  78. height: 100%;
  79. object-fit: cover;
  80. display: block;
  81. }
  82. .lg-outer.lg-can-toggle .lg-item {
  83. padding-bottom: 0;
  84. }
  85. .lg-outer .lg-toggle-thumb:after {
  86. content: '\e1ff';
  87. }
  88. .lg-outer.lg-animate-thumb .lg-thumb {
  89. -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  90. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  91. }