35 lines
1.6 KiB
HTML
35 lines
1.6 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<!-- 悬浮球 (W-SNP-02): 半圆形贴边图标, 圆弧朝屏幕内侧, 由 Rust 控制位置与主题 -->
|
|
<style>
|
|
html, body {
|
|
margin: 0; padding: 0; width: 100%; height: 100%;
|
|
background: transparent; overflow: hidden; user-select: none;
|
|
}
|
|
#ball { position: fixed; inset: 0; cursor: pointer; transition: transform .12s ease; }
|
|
/* 半圆: 直边贴屏幕边缘, 圆弧朝内 (四边方向) */
|
|
.dock-left #ball { border-radius: 0 28px 28px 0; } /* 左缘 → 凸向右 */
|
|
.dock-right #ball { border-radius: 28px 0 0 28px; } /* 右缘 → 凸向左 */
|
|
.dock-top #ball { border-radius: 0 0 28px 28px; } /* 上缘 → 凸向下 */
|
|
.dock-bottom #ball { border-radius: 28px 28px 0 0; } /* 下缘 → 凸向上 */
|
|
/* 深浅色 (W-THE-01): 跟随系统应用模式 */
|
|
.theme-light #ball { background: rgba(28, 28, 30, 0.92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
|
|
.theme-dark #ball { background: rgba(245, 245, 245, 0.95); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
|
|
#ball::after {
|
|
content: ""; position: absolute; left: 50%; top: 50%;
|
|
width: 8px; height: 8px; border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.theme-light #ball::after { background: rgba(255, 255, 255, 0.85); }
|
|
.theme-dark #ball::after { background: rgba(30, 30, 30, 0.75); }
|
|
#ball:hover { transform: scale(1.06); }
|
|
</style>
|
|
</head>
|
|
<body class="dock-left theme-light">
|
|
<div id="ball"></div>
|
|
<script src="./dock.js"></script>
|
|
</body>
|
|
</html>
|