@r74tech/docusaurus-plugin-panzoom
Version:
A plugin to enable the panzoom component on SVG and other elements
49 lines (42 loc) • 757 B
CSS
.panzoom-toolbar {
position: absolute;
z-index: 10;
display: flex;
gap: 5px;
padding: 5px;
background: rgba(255, 255, 255, 0.5);
border-radius: 4px;
transition: opacity 0.2s ease-in-out;
}
*:hover > .panzoom-toolbar {
opacity: 1 ;
}
.panzoom-toolbar-top-right {
top: 10px;
right: 10px;
}
.panzoom-toolbar-top-left {
top: 10px;
left: 10px;
}
.panzoom-toolbar-bottom-right {
bottom: 10px;
right: 10px;
}
.panzoom-toolbar-bottom-left {
bottom: 10px;
left: 10px;
}
.panzoom-toolbar button {
width: 30px;
height: 30px;
cursor: pointer;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #fff;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}