[備忘] cytoscape-panzoom を Boostrap5 のダークモードに対応させる、また大きさや表示位置を容易に変更できるようにする

[MITSUHIRO-KURIKI]

デフォルトだと絶対位置固定のため、位置に関わる部分をすべて修正

:root {
	--panzoom-color:        var(--bs-body-color);
	--panzoom-border-color: var(--bs-border-color);
	--panzoom-margin-top:   .5rem;
	--panzoom-margin-left:  .5rem;
	/* item */
	--panzoom-item-icon-size:       .8rem;
	--panzoom-item-bg-color:        var(--bs-body-bg);
	--panzoom-item-active-bg-color: var(--bs-primary-bg-subtle);
	--panzoom-item-margin-bottom:   .4rem;
	/* panner */
	--panner-diameter:           2.5rem;
	--panner-indicator-diameter: 2rem;
	--panner-button-width:       .25rem;
	--panner-button-height:      .25rem;
	/* zoom-button */
	--panzoom-zoom-button-size: 1.5rem;
	/* slider */
	--panzoom-slider-line-width:  4px;
	--panzoom-slider-line-height: 5rem;
}
.cy-panzoom {
	position:    absolute;
	color:       var(--panzoom-color);
	font-size:   var(--base-font-size);
	font-family: var(--font-family-base);
	line-height: 1;
	z-index:     1030;
	box-sizing:  content-box;
}
/* panner */
.cy-panzoom-panner {
	position:      absolute;
	left:          var(--panzoom-margin-left);
	top:           var(--panzoom-margin-top);
	height:        var(--panner-diameter);
	width:         var(--panner-diameter);
	background:    var(--panzoom-item-bg-color);
	border:        1px solid var(--panzoom-border-color);
	border-radius: var(--panner-diameter);
	box-sizing:    content-box;
}
.cy-panzoom-panner-handle {
	position:   absolute;
	left:       0;
	top:        0;
	height:     var(--panner-diameter);
	width:      var(--panner-diameter);
	outline:    none;
	z-index:    1030;
	box-sizing: content-box;
}
.cy-panzoom-pan-button {
	position:   absolute;
	z-index:    1;
	box-sizing: content-box;
}
.cy-panzoom-pan-up {
	top:           0;
	left:          50%;
	margin-left:   calc( var(--panner-button-width) * -1 );
	width:         0;
	height:        0;
	border-left:   var(--panner-button-width)  solid transparent;
	border-right:  var(--panner-button-width)  solid transparent;
	border-bottom: var(--panner-button-height) solid var(--panzoom-color);
	box-sizing:    content-box;
}
.cy-panzoom-pan-down {
	bottom:       0;
	left:         50%;
	margin-left:  calc( var(--panner-button-width) * -1 );
	width:        0;
	height:       0;
	border-left:  var(--panner-button-width)  solid transparent;
	border-right: var(--panner-button-width)  solid transparent;
	border-top:   var(--panner-button-height) solid var(--panzoom-color);
	box-sizing:   content-box;
}
.cy-panzoom-pan-left {
	top:           50%;
	left:          0;
	margin-top:    calc( var(--panner-button-width) * -1 );
	width:         0;
	height:        0;
	border-top:    var(--panner-button-width)  solid transparent;
	border-bottom: var(--panner-button-width)  solid transparent;
	border-right:  var(--panner-button-height) solid var(--panzoom-color);
	box-sizing:    content-box;
}
.cy-panzoom-pan-right {
	top:           50%;
	right:         0;
	margin-top:    calc( var(--panner-button-width) * -1 );
	width:         0;
	height:        0;
	border-top:    var(--panner-button-width)  solid transparent;
	border-bottom: var(--panner-button-width)  solid transparent;
	border-left:   var(--panner-button-height) solid var(--panzoom-color);
	box-sizing:    content-box;
}
.cy-panzoom-pan-indicator {
	display:       none;
	position:      absolute;
	left:          0;
	top:           0;
	margin-left:   calc( ( var(--panzoom-margin-left) * -1 ) + var(--panzoom-margin-left) - ( var(--panner-indicator-diameter) / 2 ) );
	margin-top:    calc( ( var(--panzoom-margin-top)  * -1 ) + var(--panzoom-margin-top)  - ( var(--panner-indicator-diameter) / 2 ) );
	width:         var(--panner-indicator-diameter);
	height:        var(--panner-indicator-diameter);
	background:    var(--bs-highlight-color);
	border-radius: var(--panner-indicator-diameter);
	opacity:       0.3;
	z-index:       1030;
	box-sizing:    content-box;
}
/* reset */
/* size -> .cy-panzoom-zoom-button */
.cy-panzoom-reset {
	top:        calc( var(--panzoom-margin-top) + var(--panner-diameter) + var(--panzoom-item-margin-bottom) );
	box-sizing: content-box;
}
/* zoom-button */
.cy-panzoom-zoom-button {
	position:      absolute;
	left:          calc( var(--panzoom-margin-left) + ( var(--panner-diameter) - var(--panzoom-zoom-button-size) ) / 2  );
	width:         var(--panzoom-zoom-button-size);
	height:        var(--panzoom-zoom-button-size);
	border-radius: calc( var(--panzoom-zoom-button-size) * 0.3 );
	background:    var(--panzoom-item-bg-color);
	border:        1px solid var(--panzoom-border-color);
	cursor:        pointer;
	z-index:       1;
	box-sizing:    content-box;
}
.cy-panzoom-zoom-button > span {
	font-size:   var(--panzoom-item-icon-size);
	width:       100%;
	height:      100%;
	line-height: var(--panzoom-zoom-button-size);
	text-align:  center;
}
.cy-panzoom-zoom-button:active {
	background: var(--panzoom-item-active-bg-color);
	box-sizing: content-box;
}
.cy-panzoom-zoom-in {
	top:        calc( var(--panzoom-margin-top) + var(--panner-diameter) + var(--panzoom-zoom-button-size) + ( var(--panzoom-item-margin-bottom) * 2 ) );
	box-sizing: content-box;
}
.cy-panzoom-zoom-out {
	top:        calc( var(--panzoom-margin-top) + var(--panner-diameter) + ( var(--panzoom-zoom-button-size) * 2 ) + ( var(--panzoom-item-margin-bottom) * 2 ) + var(--panzoom-slider-line-height) );
	box-sizing: content-box;
}
/* slider */
.cy-panzoom-slider {
	position:   absolute;
	top:        calc( var(--panzoom-margin-top) + var(--panner-diameter) + ( var(--panzoom-zoom-button-size) * 2 ) + ( var(--panzoom-item-margin-bottom) * 2 ) );
	left:       calc( var(--panzoom-margin-left) + ( var(--panner-diameter) - var(--panzoom-zoom-button-size) ) / 2  );
	height:     var(--panzoom-slider-line-height);
	width:      calc( var(--panzoom-zoom-button-size) + 2px ); /* consider button border */
	box-sizing: content-box;
}
.cy-panzoom-slider-background {
	position:     absolute;
	top:          0;
	left:         calc( ( var(--panzoom-zoom-button-size) - var(--panzoom-slider-line-width) ) / 2 );
	width:        var(--panzoom-slider-line-width);
	height:       var(--panzoom-slider-line-height);
	background: var(--panzoom-item-bg-color);
	border-left:  1px solid var(--panzoom-border-color);
	border-right: 1px solid var(--panzoom-border-color);
	box-sizing:   content-box;
}
.cy-panzoom-slider-handle {
	position:      absolute;
	left:          calc( ( var(--panzoom-zoom-button-size) - ( var(--panzoom-zoom-button-size) * .8 ) ) / 2 );
	width:         calc( var(--panzoom-zoom-button-size) * .8 );
	height:        calc( var(--panzoom-zoom-button-size) * .2 );
	background:    var(--panzoom-item-bg-color);
	border:        1px solid var(--panzoom-color);
	border-radius: calc( var(--panzoom-zoom-button-size) * .2 );
	line-height:   0px;
	cursor:        default;
	z-index:       1030;
	box-sizing:    content-box;
}
.cy-panzoom-slider-handle .icon {
	display:     none;
	width:       100%;
	text-align:  center;
	line-height: calc( var(--panzoom-zoom-button-size) * .2 );
	box-sizing:  content-box;
}
.cy-panzoom-no-zoom-tick {
	position:      absolute;
	left:          calc( ( var(--panzoom-zoom-button-size) - ( var(--panzoom-zoom-button-size) * .8 * .5 ) ) / 2 );
	width:         calc( var(--panzoom-zoom-button-size) * .8 * .5 );
	height:        1px;
	background:    var(--panzoom-color);
	border:        1px solid var(--bs-body-bg);
	border-radius: 2px;
	z-index:       1;
	box-sizing:    content-box;
}
.cy-panzoom-slider-handle:active,
.cy-panzoom-slider-handle.active {
	background: var(--panzoom-item-active-bg-color);
	box-sizing: content-box;
}
/* panzoom-zoom-only */
.cy-panzoom-zoom-only .cy-panzoom-slider,
.cy-panzoom-zoom-only .cy-panzoom-panner {
	display: none;
}
.cy-panzoom-zoom-only .cy-panzoom-reset {
	top: var(--panzoom-margin-top);
}
.cy-panzoom-zoom-only .cy-panzoom-zoom-in {
	top: calc( var(--panzoom-margin-top) + var(--panzoom-zoom-button-size) + var(--panzoom-item-margin-bottom) )
}
.cy-panzoom-zoom-only .cy-panzoom-zoom-out {
	top: calc( var(--panzoom-margin-top) + ( var(--panzoom-zoom-button-size) + var(--panzoom-item-margin-bottom) ) * 2 )
}

^{https://github.com/MITSUHIRO-KURIKI/DjangoTemplate/blob/main/static/templates/common/lib/cytoscape-extensions/cytoscape-panzoom/cytoscape-panzoom.css}