【开发者自荐】键谱：一个记录、展示快捷键的本机网页应用（V3啦）

[CallieLari]

我也认为已经 没什么可以修改的了 感觉已经可以用好久好久了 只要未来还是HTML 感觉可以传代 哈哈 非常感谢大佬

[这你是爷爷当年用过的键盘快捷键记录图谱
现在传给你,得此键谱者可称霸互联网]

等公众号们看到了宣传一波的话估计github 还能涨星星

[LinkLi]

大佬，扩展热键能自定义按键宽度吗？？比如1.25倍、1.5倍、2.0倍这样定义参数，这样离真实键盘又近了一步

[CallieLari]

哈哈 再按钮能圆角 从方形变成圆形 哈哈旋钮也可以了 还能再细点 滚轮也有了

[CataeroGong]

给你个扩展键帽尺寸单独自定义吧

[CataeroGong]

用 v2.5.0 去吧

[LinkLi]

多谢大佬的更新啊，其实我是想要这样的效果
自定义的按键也能模拟标准按键的长度

我找到这个位置的加上css代码就搞定了，这样就实现了扩展按键自定义大小了

[CataeroGong]

理解出现了偏差

好，我试试哦

想起来了，你那就是一个标准键盘扣掉了键啊 你直接用上面的标准键盘不就好了

[LinkLi]

毕竟是物理屏蔽了按键，所以才用自定义扩展按键的，看得舒服一些。
我发现只要按键那里能自定义类名，就能控制按键的宽度，比如自定义按键K1，给于类名space，它就能变成空格键的长度

[LinkLi]

能不能加一个style.css的外链嵌入，这样用户可以写自己的界面样式

[CataeroGong]

[CataeroGong]

@LinkLi

能不能加一个style.css的外链嵌入

好想法，记下了

[CataeroGong]

高级自定义：

custom.css

/* XK2 键宽度 5 */
k[data-k="XK2"] {
    width: calc(var(--kw) * 5 + 3px * (5 - 1));
}
k[data-k="XK2"].set {
    background-color: greenyellow;
}

效果：

[CataeroGong]

v2.6.0 已发，支持 custom.css 和 custom.js，请尽情地折腾

[LinkLi]

不错，就是计算公式有点复杂

[CataeroGong]

为了表示清楚“键宽 * n + gap * (n - 1)”

直接写 calc(var(--kw) * 5 + 12px); 也行的，但计算还是不能省，因为 --kw 这个变量在大小键帽下是不一样的

[LinkLi]

说的也是

[CallieLari]

越来越高级了。。。。 这个东西要怎么用？
有没有个说明教程？ 已经发展到我不会用了哈哈

[CallieLari]

哈哈圆形按钮也可以了

旋钮也可以模拟出来了

虽然我是一点不懂 但是可以问GPT4

这里文字要怎么改成居中显示？
笑死 搞出来2个

[CataeroGong]

以下 css 可以让小键帽圆形居中，不过大键帽还要显示修饰键和映射信息呢，不能居中吧？

k[data-k="XK1"] {
    border-radius: 50%;
    justify-content: center;
    .ktn {
        text-align: center;
    }
}

[CataeroGong]

k[data-k="XK1"] {
    width: calc(var(--kw) * 2 + 3px);
    height: calc(var(--kw) * 2 + 3px);
    border-radius: 50%;
    justify-content: center;
    .ktn, .modkeys, .mk, .ktm {
        text-align: center;
    }
}
[data-kbhint="true"] k[data-k="XK1"] .ktr {
    position: relative;
    display: flex;
    flex-flow: column;
    .cnt {
        position: absolute;
        top: 50%;
        right: 3px;
    }
    .modkeys, .mk {
        flex: 1;
    }
}

k[data-k="XK1"].set {
    background-color: greenyellow;
}