Module:FunctionGraph/style.css

/* Module:FunctionGraph/style.css */

/* 混合渲染外層定位容器：固定與底層 SVG 1:1 像素鎖定，防止百分比縮水跑版 */
.function-graph-hybrid {
	position: relative;
	display: inline-block;
	max-width: none;
	line-height: 1;
	vertical-align: middle;
	margin: 0;
	padding: 0;
}

/* 底層 SVG 影像基礎樣式 */
img.function-graph-svg,
img.complex-graph-svg {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* HTML 繁簡轉換文字疊加層共用基礎類別 */
.fg-ov {
	position: absolute;
	white-space: nowrap;
	font-family: sans-serif;
	color: #2b2b2b;
	line-height: 1.15;
}

/* 居中錨點 (用於標題與 X 軸標籤) */
.fg-c {
	transform: translate(-50%, -50%);
}

/* 垂直居中錨點 (用於圖例標題與圖例項目) */
.fg-v {
	transform: translateY(-50%);
}

/* 逆時針旋轉 90 度錨點 (用於 Y 軸與虛軸標籤) */
.fg-rot-y {
	transform: translate(-50%, -50%) rotate(-90deg);
	transform-origin: center center;
}

/* 字級與粗細修飾類別 */
.fg-ttl {
	font-size: 16px;
	font-weight: bold;
}

.fg-cttl {
	font-size: 13px;
	font-weight: bold;
}

.fg-lhdr {
	font-size: 11px;
	font-weight: bold;
}

.fg-fs11 {
	font-size: 11px;
}

.fg-fs12 {
	font-size: 12px;
}

.fg-fs14 {
	font-size: 14px;
}

/* 動態滾動視窗模式 (用於週期波移動動畫，預設暫停、滑鼠移入 :hover 時播放) */
.fg-anim-viewport {
	position: relative;
	display: inline-block;
	overflow: hidden;
	vertical-align: middle;
}

.fg-anim-track {
	display: inline-block;
	/*will-change: transform;*/
	animation: fg-wave-scroll 6s linear infinite;
	animation-play-state: paused;
}

.fg-anim-viewport:hover .fg-anim-track,
.fg-anim-auto .fg-anim-track {
	animation-play-state: running;
}

@keyframes fg-wave-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* 打點互動感應區 (父子包裹結構，無須使用 pointer-events) */
.fg-hb {
	position: absolute;
	width: 14px;
	height: 14px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	cursor: pointer;
	z-index: 3;
}

.fg-hb:hover {
	z-index: 25;
}

/* 滑鼠移入時包裹曲線或資料點的清晰邊框與半透明光暈環 */
.fg-hb-ring {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 13px;
	height: 13px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 2px solid #1f77b4;
	background-color: rgba(255, 255, 255, 0.35);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
	opacity: 0.88;
	box-sizing: border-box;
}

.fg-hb:hover .fg-hb-ring {
	display: block;
}

/* Tooltip 浮動白底氣泡框 */
.fg-tt {
	display: none;
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translate(-50%, -8px);
	background-color: #ffffff;
	color: #222222;
	border: 1px solid #cccccc;
	border-radius: 5px;
	padding: 4px 8px;
	font-family: sans-serif;
	font-size: 11.5px;
	line-height: 1.25;
	white-space: nowrap;
	box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18);
}

.fg-hb:hover .fg-tt {
	display: block;
}

/* 頂部與左右邊界防裁切自動轉向類別 */
.fg-tt-bot {
	bottom: auto;
	top: 100%;
	transform: translate(-50%, 8px);
}

.fg-tt-l {
	left: 0;
	transform: translate(-4px, -8px);
}

.fg-tt-l.fg-tt-bot {
	transform: translate(-4px, 8px);
}

.fg-tt-r {
	left: auto;
	right: 0;
	transform: translate(4px, -8px);
}

.fg-tt-r.fg-tt-bot {
	transform: translate(4px, 8px);
}

/* Tooltip 內部系列代表色圖示 (支援實心圓點與空心圓環) */
.fg-tt-ico {
	display: inline-block;
	width: 9px;
	height: 9px;
	border: 2px solid #1f77b4;
	border-radius: 50%;
	margin-right: 5px;
	vertical-align: -1px;
	box-sizing: border-box;
}

/* Tooltip 內部 <math> 公式對齊與緊湊化樣式 */
.fg-tt .mwe-math-element {
	display: inline-block;
	vertical-align: middle;
	margin: 0 1px;
}

.fg-tt .mwe-math-element img {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	height: auto;
	max-height: 2.1em;
	margin: 0;
	padding: 0;
}