|
| 1 | +.codeblock { |
| 2 | + max-width: 100%; |
| 3 | + height: auto; |
| 4 | + object-fit: contain; |
| 5 | + cursor: zoom-in; /* Default cursor for zoomable images */ |
| 6 | + transition: transform 0.3s ease; |
| 7 | + transform-origin: center; |
| 8 | + touch-action: none; /* Prevents default touch behaviors */ |
| 9 | + display: block; /* Ensure proper display in MDBook */ |
| 10 | + margin: 0 auto; /* Center images by default */ |
| 11 | +} |
| 12 | + |
| 13 | +.codeblock-container { |
| 14 | + position: relative; |
| 15 | + overflow: visible; /* Allow image to overflow slightly */ |
| 16 | + margin: 0.5em auto; /* Keep margin on container instead of image */ |
| 17 | + max-width: 100%; |
| 18 | + line-height: 0; /* Remove extra space below image */ |
| 19 | + transition: height 0.3s ease; /* Smooth transition for height changes */ |
| 20 | + padding: 2px 0; /* Add small vertical padding to prevent cropping */ |
| 21 | + text-align: center; /* Center containers by default */ |
| 22 | +} |
| 23 | + |
| 24 | +.codeblock.zoomed { |
| 25 | + position: absolute; |
| 26 | + top: 0; |
| 27 | + left: 0; |
| 28 | + right: 0; |
| 29 | + bottom: 0; |
| 30 | + margin: 0; |
| 31 | + cursor: grab; |
| 32 | + transform-origin: center; |
| 33 | + transition: none; /* Disable transition for smooth panning */ |
| 34 | + width: 100%; |
| 35 | + height: 100%; |
| 36 | + object-fit: contain; |
| 37 | +} |
| 38 | + |
| 39 | +/* When an image is zoomed, ensure the container adjusts accordingly */ |
| 40 | +.codeblock-container:has(.zoomed) { |
| 41 | + overflow: hidden; /* Hide overflow only when zoomed */ |
| 42 | + height: auto !important; /* Override any inline height */ |
| 43 | + min-height: 600px !important; /* Provide enough space for zoomed content */ |
| 44 | +} |
| 45 | + |
| 46 | +/* .codeblock:hover { |
| 47 | + transform: scale(1.1); |
| 48 | +} */ |
| 49 | + |
| 50 | +/* Prevent zooming for simple code blocks and align left */ |
| 51 | +.codeblock.no-zoom { |
| 52 | + cursor: default !important; |
| 53 | + pointer-events: none !important; |
| 54 | + transform: none !important; |
| 55 | + transition: none !important; |
| 56 | + margin: 0; /* Remove auto margins to allow left alignment */ |
| 57 | +} |
| 58 | + |
| 59 | +.codeblock-container:has(.no-zoom) { |
| 60 | + overflow: hidden; |
| 61 | + pointer-events: none; |
| 62 | + text-align: left; /* Left align container for non-zoomable images */ |
| 63 | + margin-left: 0; /* Remove left margin for left alignment */ |
| 64 | +} |
| 65 | + |
0 commit comments