modal-pic.less 1.1KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. .modal-image {
  2. position: fixed;
  3. top: 0;
  4. right: 0;
  5. bottom: 0;
  6. left: 0;
  7. background: rgba(0,0,0,0.8);
  8. z-index: 1000000001;
  9. opacity:0 !important;
  10. pointer-events: none;
  11. button {
  12. display: none;
  13. }
  14. &:target {
  15. opacity: 1 !important;
  16. pointer-events: auto;
  17. }
  18. & > div {
  19. margin: 2% auto;
  20. width: 97%;
  21. background: @dim-gray;
  22. border: @gray 0.1rem solid;
  23. }
  24. @media (min-width: 769px) {
  25. & > div {
  26. max-width: 60.0rem;
  27. }
  28. }
  29. @media (max-width: 7680px) {
  30. & > div {
  31. position: relative;
  32. }
  33. }
  34. .image-paging-left {
  35. font-size: 2.2rem;
  36. padding-right: 1.0rem;
  37. }
  38. .image-paging-right {
  39. font-size: 2.2rem;
  40. padding-left: 1.2rem;
  41. }
  42. .image-container::before {
  43. display: block;
  44. min-width: 1.0rem;
  45. max-width: 60.0rem;
  46. min-height: 10.0rem;
  47. height: 30.0rem;
  48. content: "";
  49. }
  50. }
  51. .modal-close {
  52. position:fixed;
  53. top: 0;
  54. left: 0;
  55. height: 100% !important;
  56. width: 100% !important;
  57. z-index: -1;
  58. }