modal-pic.less 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  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. .image-paging-left {
  30. font-size: 2.2rem;
  31. padding-right: 1.0rem;
  32. }
  33. .image-paging-right {
  34. font-size: 2.2rem;
  35. padding-left: 1.2rem;
  36. }
  37. .image-container::before {
  38. display: block;
  39. min-width: 1.0rem;
  40. max-width: 60.0rem;
  41. min-height: 10.0rem;
  42. height: 30.0rem;
  43. content: "";
  44. }
  45. }
  46. .modal-close {
  47. position:fixed;
  48. top: 0;
  49. left: 0;
  50. height: 100% !important;
  51. width: 100% !important;
  52. z-index: -1;
  53. }