modal-pic.less 2.0KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  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. margin-right: 1.0rem;
  31. margin-top: 0.5rem;
  32. width:15px;
  33. height:15px;
  34. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI
  35. WXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AweDQoOuikqUQAAAB1pVFh0Q29tbWVudAAAAAAAQ3Jl
  36. YXRlZCB3aXRoIEdJTVBkLmUHAAAAiElEQVQoz6XTrQ0CQRCG4SesQHI5g6EAqIEewNLSVUACzfAT
  37. BApDDSgSBAaJORKyauf2czOZdybzl5SpxR5j3H/OUQHYoMMMNwE1fcUT5hFwUgPuenAxBDxHwRZb
  38. HKMgbPDCuiQ4ZfYDU6xwxTNafXDP1dOu3nP1heUJDnmCVAB/cMES7/+v+gIq0Bs3k6NL9AAAAABJ
  39. RU5ErkJggg==) 96% no-repeat;
  40. }
  41. .image-paging-right {
  42. margin-left: 1.2rem;
  43. margin-top: 0.5rem;
  44. width:15px;
  45. height:15px;
  46. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI
  47. WXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AweDQon+JuyPQAAAB1pVFh0Q29tbWVudAAAAAAAQ3Jl
  48. YXRlZCB3aXRoIEdJTVBkLmUHAAAAaklEQVQoz73TsQ2DUAxF0SMWAFEzwGcaWhgpEyAlbQYJMACj
  49. sAINTaiIf8Tt3FzL9jPfDHijdoHiVK9o8EAlQMKM1z8EZUTQHoJnjmDJFUwYr17hTIcN/W2dwzOH
  50. tx2+czhhCZ9oNH/6qh1F2RaYgWxrQwAAAABJRU5ErkJggg==);
  51. }
  52. .image-container::before {
  53. display: block;
  54. min-width: 1.0rem;
  55. max-width: 60.0rem;
  56. min-height: 10.0rem;
  57. height: 30.0rem;
  58. content: "";
  59. }
  60. }
  61. .modal-close {
  62. position:fixed;
  63. top: 0;
  64. left: 0;
  65. height: 100% !important;
  66. width: 100% !important;
  67. z-index: -1;
  68. }