[ui]: already split ui html code to a stand-alone repo
This commit is contained in:
1 parent
4ca63687a6
commit
efbf75a2da
17 files changed
-2571
No files matched your search
@@ -1,56 +0,0 @@
|
||||
<div class="container" id="container">
|
||||
<!--0Anchor-->
|
||||
<div class="row pinyin">
|
||||
<div class="text">{0}</div>
|
||||
</div>
|
||||
<!--1Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text"><span class="cand-number">1</span> {1}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--2Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">2</span> {2}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--3Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">3</span> {3}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--4Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">4</span> {4}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--5Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">5</span> {5}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--6Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">6</span> {6}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--7Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">7</span> {7}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--8Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">8</span> {8}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--9Anchor-->
|
||||
</div>
|
||||
@@ -1,678 +0,0 @@
|
||||
<html lang="zh-CN" window-frame="transparent">
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
|
||||
<head>
|
||||
<title>Vertical Candidate Window</title>
|
||||
<style>
|
||||
html {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans SC', Arial, sans-serif;
|
||||
font-size: 17px;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
background-color: #202020;
|
||||
padding: 2px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
|
||||
min-width: 4em;
|
||||
width: max-content;
|
||||
user-select: none;
|
||||
border: 0.1em solid #9b9b9b2e;
|
||||
}
|
||||
|
||||
.move-above {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-top: 0.1em;
|
||||
}
|
||||
|
||||
.pinyin {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.cand-number {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.cand {
|
||||
border-radius: 0.33em;
|
||||
}
|
||||
|
||||
.hover-active .cand:hover {
|
||||
background-color: #414141;
|
||||
}
|
||||
|
||||
.row-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.first {
|
||||
background-color: #3e3e3eb9;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding-left: 0.4em;
|
||||
padding-right: 0.3em;
|
||||
/* padding-top: 0.2em;
|
||||
padding-bottom: 0.1em; */
|
||||
color: #e9e8e8;
|
||||
}
|
||||
|
||||
/* TODO: */
|
||||
.first-bar {
|
||||
position: absolute;
|
||||
height: 0.8em;
|
||||
width: 0.18em;
|
||||
left: 0;
|
||||
top: calc(50% - 0.4em);
|
||||
background: #6b69d6;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
/* 27 Han chars at most, not used currently */
|
||||
const dummy_cand_arr = [
|
||||
// "雨",
|
||||
// "杏花",
|
||||
"玄都观",
|
||||
"正日临朝",
|
||||
"少华甘露寺", // 5
|
||||
"桃红复含宿雨",
|
||||
"浮生七十今三十",
|
||||
"巡衣锦军制还乡歌",
|
||||
"疏影横斜暗上书窗敲",
|
||||
"红豆生南国春来发几枝", // 10
|
||||
"不知天上宫阙今夕是何年",
|
||||
"两岸青山相送迎谁知离别情",
|
||||
"年年今夜月华如练长是人千里",
|
||||
"裁翦冰绡轻叠数重淡著燕脂匀注",
|
||||
"画阁魂消高楼目断斜阳只送平波远", // 15
|
||||
"河畔青芜堤上柳为问新愁何事年年有",
|
||||
"度万壑千岩越溪深处怒涛渐息樵风乍起",
|
||||
"对江南千里楼下分流水声中有当日凭高泪",
|
||||
"树底人家朱户北楼闲上疏帘高卷直见街南树",
|
||||
"红叶黄花秋意晚千里念行客飞云过尽归鸿无信", // 20
|
||||
"似花还似非花也无人惜从教坠抛家傍路思量却是",
|
||||
"负佳人几许盟言便忍把从前欢会陡顿翻成忧戚愁极",
|
||||
"绣帘开一点明月窥人人未寝欹枕钗横鬓乱起来携素手",
|
||||
"此去经年应是良辰好景虚设便纵有千种风情更与何人说",
|
||||
"长安古道马迟迟高柳乱蝉嘶夕阳岛外秋风原上目断四天垂", // 25
|
||||
"夜饮东坡醒复醉归来仿佛三更长恨此身非我有何时忘却营营",
|
||||
"月华收云淡霜天曙西征客此时情苦翠娥执手送临歧轧轧开朱户",
|
||||
];
|
||||
|
||||
let a = 0;
|
||||
/* Ready */
|
||||
document.on('ready', function () {
|
||||
/* Mouse move */
|
||||
document.on('mousemove', function (event) {
|
||||
if (a === 4) {
|
||||
const container = document.getElementById('container');
|
||||
container.classList.add('hover-active');
|
||||
}
|
||||
if (a < 10)
|
||||
a += 1;
|
||||
});
|
||||
|
||||
//
|
||||
// Measure container size at different cases
|
||||
//
|
||||
const container01 = document.$("#container");
|
||||
const [width01, height01] = container01.state.box("dimension", "border", "self", true);
|
||||
console.log(width01, height01);
|
||||
console.log(width01, height01);
|
||||
let size_index = 2;
|
||||
for (let i = 0; i < 25; i++) {
|
||||
const cur_container = document.$("#container" + (i + 2));
|
||||
const [cur_width, cur_height] = cur_container.state.box("dimension", "border", "self", true);
|
||||
console.log(cur_width, cur_height);
|
||||
SciterBridgeJs.preserveWindowSize(size_index, cur_width, cur_height);
|
||||
size_index += 1;
|
||||
}
|
||||
SciterBridgeJs.adjustInitialWindowSize(width01, height01);
|
||||
});
|
||||
|
||||
/* ClearState each time when inflating candidate window */
|
||||
window.ClearState = function () {
|
||||
a = 0;
|
||||
}
|
||||
|
||||
//
|
||||
// When candidate window touches the bottom of the screen,
|
||||
// move the container to the bottom, cause win32 already move
|
||||
// window itself above of the text
|
||||
//
|
||||
window.MoveContainerToBodyBottom = function () {
|
||||
const container = document.getElementById('container');
|
||||
container.classList.add('move-above');
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container" id="container">
|
||||
<!--0Anchor-->
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<!--1Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 你</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--2Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">2</span> 笔</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--3Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">3</span> 量</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--4Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">4</span> 牛</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--5Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">5</span> 仙</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--6Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">6</span> 可</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--7Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">7</span> 木</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--8Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">8</span> 无</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--9Anchor-->
|
||||
</div>
|
||||
|
||||
<div class="container" id="container2">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 玄都观</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container3">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 正日临朝</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">2</span> 笔</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container4">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 少华甘露寺</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">2</span> 笔</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">3</span> 量</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container5">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 桃红复含宿雨</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">2</span> 笔</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">3</span> 量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">4</span> 牛</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container6">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 浮生七十今三十</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--2Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">2</span> 笔</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--3Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">3</span> 量</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--4Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">4</span> 牛</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--5Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">5</span> 仙</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container7">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 巡衣锦军制还乡歌</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">2</span> 笔</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">3</span> 量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">4</span> 牛</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">5</span> 仙</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">6</span> 可</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container8">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 疏影横斜暗上书窗敲</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">2</span> 笔</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">3</span> 量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">4</span> 牛</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">5</span> 仙</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">6</span> 可</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">7</span> 木</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container9">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 红豆生南国春来发几枝</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">2</span> 笔</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">3</span> 量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">4</span> 牛</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">5</span> 仙</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">6</span> 可</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">7</span> 木</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text"><span class="cand-number">8</span> 无</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container10">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 不知天上宫阙今夕是何年</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container11">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 两岸青山相送迎谁知离别情</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container12">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 年年今夜月华如练长是人千里</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container13">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 裁翦冰绡轻叠数重淡著燕脂匀注</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container14">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 画阁魂消高楼目断斜阳只送平波远</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container15">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 河畔青芜堤上柳为问新愁何事年年有</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container16">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 度万壑千岩越溪深处怒涛渐息樵风乍起</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container17">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 对江南千里楼下分流水声中有当日凭高泪</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container18">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 树底人家朱户北楼闲上疏帘高卷直见街南树</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container19">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 红叶黄花秋意晚千里念行客飞云过尽归鸿无信</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container20">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 似花还似非花也无人惜从教坠抛家傍路思量却是</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container21">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 负佳人几许盟言便忍把从前欢会陡顿翻成忧戚愁极</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container22">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 绣帘开一点明月窥人人未寝欹枕钗横鬓乱起来携素手</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container23">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 此去经年应是良辰好景虚设便纵有千种风情更与何人说</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container24">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 长安古道马迟迟高柳乱蝉嘶夕阳岛外秋风原上目断四天垂</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container25">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 夜饮东坡醒复醉归来仿佛三更长恨此身非我有何时忘却营营</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container26">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="first-bar"></div>
|
||||
<div class="text" id="cand-first"><span class="cand-number">1</span> 月华收云淡霜天曙西征客此时情苦翠娥执手送临歧轧轧开朱户</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Whitespace-only changes.
@@ -1,60 +0,0 @@
|
||||
<div class="container" id="pinyin-container">
|
||||
<div class="pinyin-row">
|
||||
<div class="row pinyin">
|
||||
<div class="text">{0}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container">
|
||||
<div class="candidates-row">
|
||||
<!--1Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="text">{1}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--2Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">{2}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--3Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">{3}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--4Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">{4}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--5Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">{5}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--6Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">{6}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--7Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">{7}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--8Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">{8}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,57 +0,0 @@
|
||||
<div class="container" id="container">
|
||||
<div class="pinyin-row">
|
||||
<div class="row pinyin">
|
||||
<div class="text">{0}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="candidates-row">
|
||||
<!--1Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="text">{1}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--2Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">{2}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--3Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">{3}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--4Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">{4}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--5Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">{5}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--6Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">{6}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--7Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">{7}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--8Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">{8}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,55 +0,0 @@
|
||||
<div class="container" id="container">
|
||||
<!--0Anchor-->
|
||||
<div class="row pinyin">
|
||||
<div class="text">{0}</div>
|
||||
</div>
|
||||
<!--1Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="text">1 {1}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--2Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">2 {2}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--3Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">3 {3}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--4Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">4 {4}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--5Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">5 {5}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--6Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">6 {6}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--7Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">7 {7}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--8Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">8 {8}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--9Anchor-->
|
||||
</div>
|
||||
@@ -1,55 +0,0 @@
|
||||
<div class="container" id="measureBody">
|
||||
<!--0Anchor-->
|
||||
<div class="row pinyin">
|
||||
<div class="text">{0}</div>
|
||||
</div>
|
||||
<!--1Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="text">1 {1}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--2Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">2 {2}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--3Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">3 {3}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--4Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">4 {4}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--5Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">5 {5}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--6Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">6 {6}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--7Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">7 {7}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--8Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">8 {8}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--9Anchor-->
|
||||
</div>
|
||||
@@ -1,165 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>横向候选框</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
background-color: #202020;
|
||||
padding: 2px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: fit-content;
|
||||
user-select: none;
|
||||
border: 2px solid #9b9b9b2e;
|
||||
}
|
||||
|
||||
.pinyin-row {
|
||||
padding-right: 1px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.candidates-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.row {
|
||||
padding-right: 1px;
|
||||
margin: 0 1px;
|
||||
}
|
||||
|
||||
.cand:hover {
|
||||
border-radius: 6px;
|
||||
background-color: #414141;
|
||||
}
|
||||
|
||||
.row-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.first {
|
||||
background-color: #3e3e3eb9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.first::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 0.8em;
|
||||
width: 0.2em;
|
||||
background: #6b69d6;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
color: #e9e8e8;
|
||||
}
|
||||
|
||||
#pinyin-container {
|
||||
border-radius: 6px 6px 0 0;
|
||||
border-bottom: 0px solid #9b9b9b2e;
|
||||
box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.pinyin {
|
||||
padding-bottom: -4px;
|
||||
}
|
||||
|
||||
#container {
|
||||
border-radius: 0 6px 6px 6px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: -2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container" id="pinyin-container">
|
||||
<div class="pinyin-row">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni'uo</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="container">
|
||||
<div class="candidates-row">
|
||||
<!--1Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="text">1. 你说</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--2Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">2. 笔画</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--3Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">3. 量子</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--4Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">4. 牛魔</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--5Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">5. 仙人</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--6Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">6. 可恨</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--7Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">7. 木槿</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--8Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">8. 无量</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,146 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>横向候选框</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
height: 100vh;
|
||||
width: fit-content;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
background-color: #202020;
|
||||
padding: 0.12px;
|
||||
padding-left: 0.12em;
|
||||
border-radius: 6px;
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: fit-content;
|
||||
user-select: none;
|
||||
border: 2px solid #9b9b9b2e;
|
||||
}
|
||||
|
||||
.pinyin-row {
|
||||
padding-right: 1px;
|
||||
margin-bottom: 2px;
|
||||
/* display: none; */
|
||||
}
|
||||
|
||||
.candidates-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.row {
|
||||
padding-right: 1px;
|
||||
margin: 0.18em 0.12em;
|
||||
}
|
||||
|
||||
.cand:hover {
|
||||
border-radius: 6px;
|
||||
background-color: #414141;
|
||||
}
|
||||
|
||||
.row-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.first {
|
||||
background-color: #3e3e3eb9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.first::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 0.8em;
|
||||
width: 0.2em;
|
||||
background: #6b69d6;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
color: #e9e8e8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container" id="container">
|
||||
<div class="pinyin-row">
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni'uo</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="candidates-row">
|
||||
<!--1Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="text">1. 你说什么</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--2Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">2. 笔画</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--3Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">3. 量子</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--4Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">4. 牛魔</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--5Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">5. 仙人</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--6Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">6. 可恨</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--7Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">7. 木槿</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--8Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">8. 无量</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,215 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>(IME)VCandWnd</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
background: #202020;
|
||||
/* background: url("https://appassets/background.jpg"); */
|
||||
padding: 2px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
|
||||
min-width: 7em;
|
||||
width: fit-content;
|
||||
user-select: none;
|
||||
border: 1.5px solid #9b9b9b2e;
|
||||
}
|
||||
|
||||
.row {
|
||||
justify-content: space-between;
|
||||
padding: 2px;
|
||||
padding-right: 12px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.cand {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.hover-active .cand:hover {
|
||||
background-color: #414141;
|
||||
}
|
||||
|
||||
.row-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.first {
|
||||
background-color: #3e3e3eb9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.first::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 0.8em;
|
||||
width: 0.2em;
|
||||
background: #6b69d6;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding-left: 8px;
|
||||
color: #e9e8e8;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
let a = false;
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
document.addEventListener('mousemove', function () {
|
||||
if (a === true) {
|
||||
const container = document.getElementById('container');
|
||||
container.classList.add('hover-active');
|
||||
}
|
||||
a = true;
|
||||
});
|
||||
});
|
||||
|
||||
window.ClearState = function () {
|
||||
a = false;
|
||||
const container = document.getElementById('container');
|
||||
container.classList.remove('hover-active');
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="justBody">
|
||||
<div class="container" id="container">
|
||||
<!--0Anchor-->
|
||||
<div class="row pinyin">
|
||||
<div class="text">ni</div>
|
||||
</div>
|
||||
<!--1Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="text">1 你你(rX)</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--2Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">2 什么(rP)</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--3Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">3 量(oA)</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--4Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">4 牛(pA)</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--5Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">5 仙(rE)</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--6Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">6 可(dK)</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--7Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">7 木(aN)</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--8Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">8 无(aV)</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--9Anchor-->
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<div id="measure" style="visibility: hidden;">
|
||||
<div class="container" id="measureBody">
|
||||
<!--0Anchor-->
|
||||
<div class="row pinyin">
|
||||
<div class="text">{0}</div>
|
||||
</div>
|
||||
<!--1Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand first">
|
||||
<div class="text">1 {1} 你</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--2Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">2 {2} 我</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--3Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">3 {3} 什么</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--4Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">4 {4} 量子</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--5Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">5 {5} 可恶</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--6Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">6 {6} 不是</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--7Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">7 {7} 那么</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--8Anchor-->
|
||||
<div class="row-wrapper">
|
||||
<div class="row cand">
|
||||
<div class="text">8 {8} 如果</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--9Anchor-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</html>
|
||||
@@ -1,192 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>IME(FTB)</title>
|
||||
<style>
|
||||
body {
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
/* 状态栏整体样式 */
|
||||
.status-bar {
|
||||
position: absolute;
|
||||
height: 35px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #1a1a1a;
|
||||
border-radius: 8px;
|
||||
padding: 0px 10px;
|
||||
padding-left: 8px;
|
||||
padding-right: 4px;
|
||||
gap: 6px;
|
||||
|
||||
border: 1.4px solid rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
/* 拖动条 */
|
||||
.drag-handle {
|
||||
color: ;
|
||||
width: 2.5px;
|
||||
height: 14px;
|
||||
border-radius: 2px;
|
||||
background: #8E8CD8;
|
||||
margin-right: 0px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 分隔线 */
|
||||
.divider {
|
||||
width: 1.2px;
|
||||
align-self: stretch;
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
margin-left: 4px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-family: "Segoe UI Symbol", "Microsoft YaHei", sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 6px;
|
||||
transition: background-color 0.15s ease;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.left-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.right-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="status-bar">
|
||||
<div class="left-section">
|
||||
<div class="drag-handle"></div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="right-section">
|
||||
<div class="icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M3.92 6.78H20.04V16.18H18.5V8.24H5.42V16.28H3.92V6.78ZM4.72 13.56H19.4V15.04H4.72V13.56ZM11.16 3.2H12.74V21.58H11.16V3.2Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M21 14.2894C17.8146 15.1746 14.3993 14.2763 12.0615 11.9385C9.72366 9.60074 8.82541 6.18545 9.71056 3C5.44557 4.18647 2.63796 8.25133 3.03782 12.6602C3.43767 17.069 6.93101 20.5623 11.3399 20.9622C15.7487 21.362 19.8136 18.5544 21 14.2894Z"
|
||||
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="7.5" cy="7.5" r="2.5" stroke="white" />
|
||||
<circle cx="17" cy="15" r="2" fill="white" stroke="white" />
|
||||
<path d="M19 15C19 17 17.7059 18.6765 16 20.5" stroke="white" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M5.78 4.96H11.86V6.22H5.78V4.96ZM13.34 4.98H20.6V6.24H13.34V4.98ZM6.14 3.14L7.56 3.5C7.30667 4.20667 7.00667 4.88667 6.66 5.54C6.31333 6.19333 5.92667 6.80667 5.5 7.38C5.08667 7.94 4.66 8.44 4.22 8.88C4.12667 8.78667 4 8.69333 3.84 8.6C3.69333 8.49333 3.54 8.39333 3.38 8.3C3.23333 8.19333 3.1 8.10667 2.98 8.04C3.64667 7.45333 4.25333 6.72667 4.8 5.86C5.36 4.99333 5.80667 4.08667 6.14 3.14ZM13.92 3.18L15.36 3.5C15.0667 4.47333 14.6733 5.4 14.18 6.28C13.6867 7.14667 13.16 7.88 12.6 8.48C12.52 8.4 12.4067 8.30667 12.26 8.2C12.1133 8.09333 11.96 7.98667 11.8 7.88C11.64 7.77333 11.4933 7.69333 11.36 7.64C11.9333 7.09333 12.44 6.43333 12.88 5.66C13.3333 4.87333 13.68 4.04667 13.92 3.18ZM7.28 5.9L8.52 5.44C8.8 5.85333 9.07333 6.32 9.34 6.84C9.62 7.34667 9.82 7.78 9.94 8.14L8.6 8.68C8.49333 8.30667 8.31333 7.86 8.06 7.34C7.80667 6.80667 7.54667 6.32667 7.28 5.9ZM15.48 5.88L16.72 5.36C17.0533 5.8 17.3867 6.28667 17.72 6.82C18.0533 7.35333 18.3 7.81333 18.46 8.2L17.16 8.78C17.0267 8.39333 16.7933 7.92667 16.46 7.38C16.14 6.82 15.8133 6.32 15.48 5.88ZM9.02 15.1H15.08V16.22H9.02V15.1ZM4.14 10.92H5.6V21.56H4.14V10.92ZM9 9.24H19.2V10.6H9V9.24ZM5.04 9.22L6.14 8.46C6.56667 8.82 7 9.23333 7.44 9.7C7.88 10.1533 8.21333 10.56 8.44 10.92L7.28 11.74C7.06667 11.3933 6.74 10.98 6.3 10.5C5.87333 10.02 5.45333 9.59333 5.04 9.22ZM18.4 9.24H19.88V19.8C19.88 20.2133 19.8267 20.5267 19.72 20.74C19.6133 20.9667 19.4067 21.14 19.1 21.26C18.7933 21.3667 18.3867 21.4267 17.88 21.44C17.3733 21.4667 16.7467 21.48 16 21.48C15.9733 21.28 15.9133 21.0533 15.82 20.8C15.7267 20.56 15.6267 20.3467 15.52 20.16C15.8933 20.16 16.2467 20.1667 16.58 20.18C16.9267 20.1933 17.2267 20.1933 17.48 20.18C17.7333 20.18 17.9067 20.18 18 20.18C18.16 20.1667 18.2667 20.1333 18.32 20.08C18.3733 20.0267 18.4 19.9267 18.4 19.78V9.24ZM9.7 13.42V18.02H14.4V13.42H9.7ZM8.4 12.26H15.76V19.18H8.4V12.26Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
|
||||
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path
|
||||
d="M15.6364 13.625C14.9091 14.8371 13.4546 15.625 12 15.625C10.5455 15.625 9.09092 14.8371 8.36365 13.625"
|
||||
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M9.01 10H9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M15.01 10H15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M5.07699 14.3816L3.59497 13.9054C3.24043 13.7915 3 13.4617 3 13.0894V10.9106C3 10.5383 3.24043 10.2085 3.59497 10.0946L5.07699 9.61845C5.52769 9.47366 5.77568 8.99091 5.63089 8.54021C5.60187 8.44991 5.55808 8.36505 5.50127 8.28908L4.86839 7.44272C4.61323 7.10148 4.64746 6.62461 4.94875 6.32332L6.32332 4.94875C6.62461 4.64746 7.10148 4.61323 7.44272 4.86839L8.28908 5.50127C8.6682 5.78476 9.20535 5.70724 9.48884 5.32812C9.54564 5.25216 9.58944 5.1673 9.61845 5.07699L10.0946 3.59497C10.2085 3.24043 10.5383 3 10.9106 3H13.0894C13.4617 3 13.7915 3.24043 13.9054 3.59497L14.3816 5.07699C14.5263 5.52769 15.0091 5.77568 15.4598 5.63089C15.5501 5.60187 15.635 5.55808 15.7109 5.50127L16.5573 4.86839C16.8985 4.61323 17.3754 4.64746 17.6767 4.94875L19.0512 6.32332C19.3525 6.62461 19.3868 7.10148 19.1316 7.44272L18.4987 8.28908C18.2152 8.6682 18.2928 9.20535 18.6719 9.48884C18.7478 9.54564 18.8327 9.58944 18.923 9.61845L20.405 10.0946C20.7596 10.2085 21 10.5383 21 10.9106V13.0894C21 13.4617 20.7596 13.7915 20.405 13.9054L18.923 14.3816C18.4723 14.5263 18.2243 15.0091 18.3691 15.4598C18.3981 15.5501 18.4419 15.635 18.4987 15.7109L19.1316 16.5573C19.3868 16.8985 19.3525 17.3754 19.0512 17.6767L17.6767 19.0512C17.3754 19.3525 16.8985 19.3868 16.5573 19.1316L15.7109 18.4987C15.3318 18.2152 14.7947 18.2928 14.5112 18.6719C14.4544 18.7478 14.4106 18.8327 14.3816 18.923L13.9054 20.405C13.7915 20.7596 13.4617 21 13.0894 21H10.9106C10.5383 21 10.2085 20.7596 10.0946 20.405L9.61845 18.923C9.47366 18.4723 8.99091 18.2243 8.54021 18.3691C8.44991 18.3981 8.36505 18.4419 8.28908 18.4987L7.44272 19.1316C7.10148 19.3868 6.62461 19.3525 6.32332 19.0512L4.94875 17.6767C4.64746 17.3754 4.61323 16.8985 4.86839 16.5573L5.50127 15.7109C5.78476 15.3318 5.70724 14.7947 5.32812 14.5112C5.25216 14.4544 5.1673 14.4106 5.07699 14.3816Z"
|
||||
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M14.1213 9.87868C12.9497 8.70711 11.0503 8.70711 9.87868 9.87868C8.70711 11.0503 8.70711 12.9497 9.87868 14.1213C11.0503 15.2929 12.9497 15.2929 14.1213 14.1213C15.2929 12.9497 15.2929 11.0503 14.1213 9.87868Z"
|
||||
stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
let dividerX = 0;
|
||||
|
||||
// 初始化时或窗口尺寸变化时更新一次
|
||||
function updateDividerX() {
|
||||
const divider = document.querySelector('.divider');
|
||||
if (divider) {
|
||||
dividerX = divider.getBoundingClientRect().left;
|
||||
}
|
||||
}
|
||||
|
||||
let isDragging = false, startX, startY;
|
||||
|
||||
window.addEventListener('mousedown', e => {
|
||||
if (e.clientX < dividerX) { // 左部区域
|
||||
isDragging = true;
|
||||
startX = e.screenX;
|
||||
startY = e.screenY;
|
||||
window.chrome.webview.postMessage({ type: 'dragStart' });
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('mouseup', () => {
|
||||
isDragging = false;
|
||||
});
|
||||
|
||||
window.addEventListener('mousemove', e => {
|
||||
if (isDragging) {
|
||||
window.chrome.webview.postMessage({
|
||||
type: 'dragMove',
|
||||
dx: e.screenX - startX,
|
||||
dy: e.screenY - startY
|
||||
});
|
||||
startX = e.screenX;
|
||||
startY = e.screenY;
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('resize', updateDividerX);
|
||||
window.addEventListener('load', updateDividerX);
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@@ -1,174 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>(IME)TrayMenu</title>
|
||||
<style>
|
||||
body {
|
||||
background-color: transparent;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu {
|
||||
background-color: #2b2b2b;
|
||||
border: 1px solid #3a3a3a;
|
||||
border-radius: 8px;
|
||||
padding: 0.2em 0;
|
||||
width: 12em;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.4em 0.4em;
|
||||
font-size: 14px;
|
||||
color: #e0e0e0;
|
||||
border-radius: 6px;
|
||||
margin: 1px 6px;
|
||||
transition: background 0.15s ease, color 0.15s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: #3b3b3b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.menu-item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
height: 16px;
|
||||
background: #555;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toggle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.toggle.active {
|
||||
background: #8E8CD8;
|
||||
}
|
||||
|
||||
.toggle.active::after {
|
||||
transform: translateX(16px);
|
||||
}
|
||||
|
||||
.shortcut {
|
||||
font-family: consolas;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="menu" id="measureBody">
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-left">
|
||||
<span>🖲️</span>
|
||||
悬浮工具栏
|
||||
</div>
|
||||
<div class="toggle active" id="floatingToggle"></div>
|
||||
</div>
|
||||
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-left">
|
||||
<span>😊</span>
|
||||
表情面板
|
||||
</div>
|
||||
<span class="shortcut">Win+⇧+.</span>
|
||||
</div>
|
||||
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-left">
|
||||
<span>🔣</span>
|
||||
符号面板
|
||||
</div>
|
||||
<span class="shortcut">Win+⇧+I</span>
|
||||
</div>
|
||||
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-left">
|
||||
<span>✍️</span>
|
||||
手写识别板
|
||||
</div>
|
||||
<span class="shortcut">Win+⇧+P</span>
|
||||
</div>
|
||||
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-left">
|
||||
<span>🖥️</span>
|
||||
屏幕键盘
|
||||
</div>
|
||||
<span class="shortcut">Win+⇧+K</span>
|
||||
</div>
|
||||
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-left">
|
||||
<span>🎙️</span>
|
||||
语音输入
|
||||
</div>
|
||||
<span class="shortcut">Win+⇧+V</span>
|
||||
</div>
|
||||
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-left">
|
||||
<span>⚙️</span>
|
||||
设置
|
||||
</div>
|
||||
<span class="shortcut">Win+⇧+S</span>
|
||||
</div>
|
||||
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-left">
|
||||
<span>ℹ️</span>
|
||||
关于
|
||||
</div>
|
||||
<span class="shortcut"></span>
|
||||
</div>
|
||||
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-left">
|
||||
<span>❓</span>
|
||||
帮助与反馈
|
||||
</div>
|
||||
<span class="shortcut"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const toggle = document.getElementById('floatingToggle');
|
||||
toggle.addEventListener('click', () => {
|
||||
toggle.classList.toggle('active');
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Whitespace-only changes.
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
@@ -1,5 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289L16.7071 8.29289C17.0976 8.68342 17.0976 9.31658 16.7071 9.70711C16.3166 10.0976 15.6834 10.0976 15.2929 9.70711L12 6.41421L8.70711 9.70711C8.31658 10.0976 7.68342 10.0976 7.29289 9.70711C6.90237 9.31658 6.90237 8.68342 7.29289 8.29289L11.2929 4.29289ZM7.29289 14.2929C7.68342 13.9024 8.31658 13.9024 8.70711 14.2929L12 17.5858L15.2929 14.2929C15.6834 13.9024 16.3166 13.9024 16.7071 14.2929C17.0976 14.6834 17.0976 15.3166 16.7071 15.7071L12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071L7.29289 15.7071C6.90237 15.3166 6.90237 14.6834 7.29289 14.2929Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 813 B |
@@ -1,275 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>(IME)Settings</title>
|
||||
<link rel="icon" href="./assets/MetasequoiaIME.ico">
|
||||
<link href="./style.css" rel="stylesheet">
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="main">
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<img src="./assets/MetasequoiaIME.ico" alt="">
|
||||
<span>水杉输入法</span>
|
||||
</div>
|
||||
<div class="item" data-target="general-settings"><span class="icon">⚙️</span> 通用</div>
|
||||
<div class="item active" data-target="appearence-settings"><span class="icon">🎨</span> 外观</div>
|
||||
<div class="item" data-target="input-settings"><span class="icon input-icon">⌨️</span> 输入</div>
|
||||
<div class="item" data-target="helpcode-settings"><span class="icon">🧩</span> 辅助码</div>
|
||||
<div class="item" data-target="shortcut-settings"><span class="icon">⌘</span> 快捷键</div>
|
||||
<div class="item" data-target="dict-settings"><span class="icon">📚</span> 词库</div>
|
||||
<div class="item" data-target="skin-settings"><span class="icon">🖼️</span> 皮肤</div>
|
||||
<div class="item" data-target="voice-settings"><span class="icon">🎙️</span> 语音打字</div>
|
||||
<div class="item" data-target="screenkb-settings"><span class="icon">🖥️</span> 屏幕键盘</div>
|
||||
<div class="item" data-target="tools-settings"><span class="icon">🛠️</span> 实用功能</div>
|
||||
<div class="item" data-target="ai-settings"><span class="icon">🤖</span> AI 辅助</div>
|
||||
<div class="item" data-target="help-settings"><span class="icon">❓</span> 帮助</div>
|
||||
<div class="item" data-target="about-settings"><span class="icon">ℹ️</span> 关于</div>
|
||||
<div class="item" data-target="feedback-settings"><span class="icon">💬</span> 反馈</div>
|
||||
</div>
|
||||
|
||||
<!-- 通用 -->
|
||||
<div class="content" id="general-settings">
|
||||
<div class="content-header"><span>通用</span></div>
|
||||
|
||||
<!-- 悬浮工具栏 toggle -->
|
||||
<div class="section ftb-toggle">
|
||||
<div class="section-header">
|
||||
<div class="section-title">悬浮工具栏</div>
|
||||
<div class="ftb-toggle-btn" id="ftbToggleBtn">
|
||||
<div class="ftb-toggle-knob"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 外观 -->
|
||||
<div class="content active" id="appearence-settings">
|
||||
<div class="content-header"><span>外观</span></div>
|
||||
|
||||
<!-- 候选窗口预览 -->
|
||||
<div class="section candidate-preview">
|
||||
<div class="section-title cand-prev-title">候选窗口预览</div>
|
||||
<div class="candidate-container">
|
||||
<div class="candidate-row">
|
||||
<div class="candidate-text">ni'mf</div>
|
||||
</div>
|
||||
<div class="candidate-row-wrapper">
|
||||
<div class="candidate-row candidate-cand candidate-first">
|
||||
<div class="candidate-text">1 你们(rR)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="candidate-row-wrapper">
|
||||
<div class="candidate-row candidate-cand">
|
||||
<div class="candidate-text">2 你(rX)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="candidate-row-wrapper">
|
||||
<div class="candidate-row candidate-cand">
|
||||
<div class="candidate-text">3 尼(uV)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="candidate-row-wrapper">
|
||||
<div class="candidate-row candidate-cand">
|
||||
<div class="candidate-text">4 妮(nV)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="candidate-row-wrapper">
|
||||
<div class="candidate-row candidate-cand">
|
||||
<div class="candidate-text">5 泥(dV)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="candidate-row-wrapper">
|
||||
<div class="candidate-row candidate-cand">
|
||||
<div class="candidate-text">6 逆(zQ)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="candidate-row-wrapper">
|
||||
<div class="candidate-row candidate-cand">
|
||||
<div class="candidate-text">7 拟(fR)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="candidate-row-wrapper">
|
||||
<div class="candidate-row candidate-cand">
|
||||
<div class="candidate-text">8 腻(oD)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主题模式 -->
|
||||
<div class="section theme">
|
||||
<div class="section-header">
|
||||
<div class="section-title">主题模式(默认)</div>
|
||||
<div class="dropdown">
|
||||
<button class="dropdown-toggle" id="themeBtn">
|
||||
<span>深色</span>
|
||||
<div class="arrow">
|
||||
<img src="./assets/arrow.svg" alt="arrow">
|
||||
</div>
|
||||
</button>
|
||||
<div class="dropdown-menu" id="themeMenu">
|
||||
<div class="dropdown-item" data-value="dark">深色</div>
|
||||
<div class="dropdown-item" data-value="light">浅色</div>
|
||||
<div class="dropdown-item" data-value="system">跟随系统</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="section-header arrange-item">
|
||||
<div class="section-title">候选项排列方式</div>
|
||||
<div class="dropdown">
|
||||
<button class="dropdown-toggle" id="arrangeBtn">
|
||||
<span>竖排</span>
|
||||
<div class="arrow">
|
||||
<img src="./assets/arrow.svg" alt="arrow">
|
||||
</div>
|
||||
</button>
|
||||
<div class="dropdown-menu" id="arrangeMenu">
|
||||
<div class="dropdown-item" data-value="horizontal">横排</div>
|
||||
<div class="dropdown-item" data-value="vertical">竖排</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入 -->
|
||||
<div class="content" id="input-settings">
|
||||
<div class="content-header"><span>输入</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 辅助码 -->
|
||||
<div class="content" id="helpcode-settings">
|
||||
<div class="content-header"><span>辅助码</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 快捷键 -->
|
||||
<div class="content" id="shortcut-settings">
|
||||
<div class="content-header"><span>快捷键</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 词库 -->
|
||||
<div class="content" id="dict-settings">
|
||||
<div class="content-header"><span>词库</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 皮肤 -->
|
||||
<div class="content" id="skin-settings">
|
||||
<div class="content-header"><span>皮肤</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 语音打字 -->
|
||||
<div class="content" id="voice-settings">
|
||||
<div class="content-header"><span>语音打字</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 屏幕键盘 -->
|
||||
<div class="content" id="screenkb-settings">
|
||||
<div class="content-header"><span>屏幕键盘</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 实用功能 -->
|
||||
<div class="content" id="tools-settings">
|
||||
<div class="content-header"><span>实用功能</span></div>
|
||||
</div>
|
||||
|
||||
<!-- AI 辅助 -->
|
||||
<div class="content" id="ai-settings">
|
||||
<div class="content-header"><span>AI 辅助</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 帮助 -->
|
||||
<div class="content" id="help-settings">
|
||||
<div class="content-header"><span>帮助</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 关于 -->
|
||||
<div class="content" id="about-settings">
|
||||
<div class="content-header"><span>关于</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 反馈 -->
|
||||
<div class="content" id="feedback-settings">
|
||||
<div class="content-header"><span>反馈</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
const sidebarItems = document.querySelectorAll('.sidebar .item');
|
||||
|
||||
sidebarItems.forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
document.querySelector('.sidebar .item.active')?.classList.remove('active');
|
||||
item.classList.add('active');
|
||||
|
||||
document.querySelector('.content.active')?.classList.remove('active');
|
||||
const targetId = item.dataset.target;
|
||||
document.getElementById(targetId)?.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
//
|
||||
// 外观 -> 主题模式(默认)
|
||||
//
|
||||
document.querySelectorAll('.dropdown').forEach(dropdown => {
|
||||
const btn = dropdown.querySelector('.dropdown-toggle');
|
||||
const menu = dropdown.querySelector('.dropdown-menu');
|
||||
const textSpan = btn.querySelector('span');
|
||||
|
||||
// 打开/关闭菜单
|
||||
btn.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
dropdown.classList.toggle('open');
|
||||
});
|
||||
|
||||
// 点击菜单项
|
||||
menu.querySelectorAll('.dropdown-item').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
textSpan.textContent = item.textContent;
|
||||
|
||||
// 根据按钮 id 区分动作
|
||||
if (window.chrome?.webview) {
|
||||
if (btn.id === 'themeBtn') {
|
||||
window.chrome.webview.postMessage({ action: "changeTheme", theme: item.dataset.value });
|
||||
} else if (btn.id === 'arrangeBtn') {
|
||||
window.chrome.webview.postMessage({ action: "changeCandidateArrange", arrange: item.dataset.value });
|
||||
}
|
||||
}
|
||||
|
||||
dropdown.classList.remove('open');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 点击空白处关闭所有下拉
|
||||
document.addEventListener('click', () => {
|
||||
document.querySelectorAll('.dropdown').forEach(d => d.classList.remove('open'));
|
||||
});
|
||||
|
||||
//
|
||||
// 外观 -> 候选项排列方式
|
||||
//
|
||||
|
||||
|
||||
//
|
||||
// 通用 -> 悬浮工具栏
|
||||
//
|
||||
const toggle = document.getElementById('ftbToggleBtn');
|
||||
toggle.addEventListener('click', () => {
|
||||
toggle.classList.toggle('active');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,438 +0,0 @@
|
||||
:root {
|
||||
--accent-color: #8E8CD8;
|
||||
--bg-color: rgba(32, 32, 32, 0.65);
|
||||
--sidebar-bg: rgba(25, 25, 25, 0.7);
|
||||
--sidebar-hover: rgba(255, 255, 255, 0.08);
|
||||
--item-active-hover: rgba(255, 255, 255, 0.06);
|
||||
--text-color: #f3f3f3;
|
||||
--border-color: rgba(255, 255, 255, 0.08);
|
||||
--card-bg: rgba(38, 38, 38, 0.5);
|
||||
--titlebar-height: 32px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: "Segoe UI Variable", "Segoe UI", "Noto Sans SC", sans-serif;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
color: var(--text-color);
|
||||
/* background: var(--bg-color); */
|
||||
/* background: #202020; */
|
||||
background: transparent;
|
||||
/* backdrop-filter: blur(20px) saturate(160%); */
|
||||
-webkit-backdrop-filter: blur(20px) saturate(160%);
|
||||
/* overflow: hidden; */
|
||||
}
|
||||
|
||||
/* 主体区域 */
|
||||
.main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px 0;
|
||||
overflow-y: auto;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
/* 整个滚动条宽度 */
|
||||
.sidebar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
/* 滚动条轨道 */
|
||||
.sidebar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 滚动条滑块 */
|
||||
.sidebar::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(120, 120, 120, 0.4);
|
||||
border-radius: 2px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
/* 滚动条在鼠标悬浮时更亮一些 */
|
||||
.sidebar::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(160, 160, 160, 0.6);
|
||||
}
|
||||
|
||||
/* 深色模式下更暗 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.sidebar::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(180, 180, 180, 0.25);
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(220, 220, 220, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px 12px 24px;
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.content-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px 12px 4px;
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.sidebar-header img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.sidebar-header span {
|
||||
font-weight: 500;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.content-header span {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
/* 控制 emoji 大小 */
|
||||
line-height: 1;
|
||||
/* 避免多余行高影响垂直居中 */
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.sidebar .item {
|
||||
padding: 6px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 15px;
|
||||
position: relative;
|
||||
/* transition: background 0.02s, color 0.02s; */
|
||||
transition: none;
|
||||
border-radius: 5px;
|
||||
margin: 2px 8px;
|
||||
color: #e6e6e6;
|
||||
/* font-weight: 450; */
|
||||
}
|
||||
|
||||
.sidebar .item:hover {
|
||||
background: var(--sidebar-hover);
|
||||
}
|
||||
|
||||
.sidebar .item.active {
|
||||
background: var(--item-active-hover);
|
||||
}
|
||||
|
||||
.sidebar .item.active:hover {
|
||||
background: var(--sidebar-hover);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* item 左侧的 bar */
|
||||
.sidebar .item::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
width: 4px;
|
||||
height: 50%;
|
||||
border-radius: 3px;
|
||||
background: var(--accent-color);
|
||||
/* 初始收起 */
|
||||
transform: scaleY(0);
|
||||
/* 从中间往上下展开 */
|
||||
transform-origin: center center;
|
||||
/* 动画过渡 */
|
||||
transition: transform 0.25s ease;
|
||||
/* 初始隐藏 */
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.sidebar .item.active::before {
|
||||
transform: scaleY(1);
|
||||
/* 展开 */
|
||||
opacity: 1;
|
||||
/* 渐显 */
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 12px 12px;
|
||||
overflow-y: auto;
|
||||
display: none;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 20px 24px;
|
||||
margin-bottom: 18px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
|
||||
/* backdrop-filter: blur(10px); */
|
||||
/* z-index: 0; */
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 15px;
|
||||
font-weight: 550;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: rgba(45, 45, 45, 0.8);
|
||||
color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
transition: border 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
outline: none;
|
||||
border: 1px solid var(--accent-color);
|
||||
background-color: rgba(50, 50, 50, 0.9);
|
||||
}
|
||||
|
||||
/* 候选窗口预览 */
|
||||
.candidate-preview h2 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.cand-prev-title {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
accent-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.candidate-container {
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
background-color: #202020;
|
||||
padding: 2px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
|
||||
min-width: 7em;
|
||||
width: fit-content;
|
||||
user-select: none;
|
||||
border: 2px solid #9b9b9b2e;
|
||||
}
|
||||
|
||||
.candidate-row {
|
||||
justify-content: space-between;
|
||||
padding: 2px;
|
||||
padding-right: 12px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-top: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.candidate-cand {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.candidate-row-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.candidate-first {
|
||||
background-color: #3e3e3eb9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.candidate-first::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 0.8em;
|
||||
width: 0.2em;
|
||||
background: #6b69d6;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.candidate-text {
|
||||
padding-left: 8px;
|
||||
color: #e9e8e8;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #908f8f16;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.arrange-item {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* 主题模式 */
|
||||
.theme .ftb-toggle {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
/* 下拉按钮主体 */
|
||||
.theme-toggle-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(45, 45, 45, 0.85);
|
||||
border: 0px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
color: #f3f3f3;
|
||||
font-size: 14px;
|
||||
padding: 4px 12px;
|
||||
padding-right: 6px;
|
||||
transition: all 0.2s ease;
|
||||
text-align: left;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
div.arrow {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.dropdown-toggle img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* 移除悬浮时的高亮效果 */
|
||||
.dropdown-toggle:hover {
|
||||
background: rgba(45, 45, 45, 0.85);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(100% + 2px);
|
||||
background: rgba(40, 40, 40, 0.96);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 10px;
|
||||
min-width: 100px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
|
||||
backdrop-filter: blur(12px);
|
||||
z-index: 999;
|
||||
overflow: hidden;
|
||||
animation: dropdownFade 0.12s ease-out;
|
||||
}
|
||||
|
||||
/* 悬浮时保持圆角和背景,不再加亮 */
|
||||
.dropdown-item {
|
||||
margin: 2px;
|
||||
padding: 4px 8px;
|
||||
color: #eee;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
/* 让每个选项也有圆角 */
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.dropdown.open .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 外观 -> 悬浮工具栏 */
|
||||
.ftb-toggle-btn {
|
||||
position: relative;
|
||||
width: 38px;
|
||||
height: 19px;
|
||||
background: #555;
|
||||
border-radius: 9px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.2s ease, border 0.2s ease;
|
||||
}
|
||||
|
||||
.ftb-toggle-knob {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
transform: translateY(-50%);
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.ftb-toggle-btn.active {
|
||||
background: #8E8CD8;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.ftb-toggle-btn.active .ftb-toggle-knob {
|
||||
/* 38 - 16 - 1 * 2 = 20 */
|
||||
transform: translate(20px, -50%);
|
||||
}
|
||||
Reference in new issue
Block a user