【已解决】自动隐藏 Excalidraw 工具栏 CSS

疑问解答
1

image

image
image1132×159 18 KB

希望能够自动隐藏所有工具栏，只有鼠标移动到上面的时候才显示
自己不是很会写这种复杂css，求助大佬

2

试试看，效果
PixPin_2023-12-14_11-51-02

.Island.App-toolbar.App-toolbar--mobile,
.excalidraw .mobile-misc-tools-container,
.excalidraw .Island
{
    opacity: 0;
    transition: opacity 0.3s ease-out .2s;
}
.Island.App-toolbar.App-toolbar--mobile:hover,
.excalidraw .mobile-misc-tools-container:hover,
.excalidraw .Island:hover
{
    opacity: 1;
}
3 个赞
3

谢谢大佬，我稍微改了一下，把library排除了
.Island.App-toolbar.App-toolbar–mobile,
.excalidraw .mobile-misc-tools-container,
.excalidraw .Island:not(.sidebar–docked)
{
opacity: 0;
transition: opacity 0.3s ease-out .2s;
}
.Island.App-toolbar.App-toolbar–mobile:hover,
.excalidraw .mobile-misc-tools-container:hover,
.excalidraw .Island:hover
{
opacity: 1;
}

4

大佬 我可以把这个片段发布到PKMer吗

5

可以的，可以加个出处就行

1 个赞
6

更新：左下角一起浮现，更方便
PixPin_2023-12-14_13-13-54

.excalidraw .Island.App-toolbar,
.excalidraw .mobile-misc-tools-container,
.excalidraw .App-bottom-bar
{
    opacity: 0;
    transition: opacity 0.3s ease-out .2s;
}
.excalidraw .Island.App-toolbar:hover,
.excalidraw .mobile-misc-tools-container:hover,
.excalidraw .App-bottom-bar:hover
{
    opacity: 1;
}
1 个赞
8

谢谢大佬了，已经给EXcalidraw作者贴了这的地址，希望能够帮到更多人

9

好滴 没问题 谢谢佬

10

想问一下您使用的录屏软件是啥啊 :grin:

11

utools 里面的一个录屏插件

12

我试了里面三个插件，但好像都没有右下角的那些工具栏，不知道怎么设置 :pleading_face:

13

那就是 pixpin 的录屏

14

新增隐藏样式，演示和 css 代码在链接里面

  1. 移动到那一部分，哪一部分就显示，菜单自动隐藏
  2. 同一，只不过不隐藏颜色菜单
  3. 所有按钮均一同显示，菜单不自动隐藏

【FlowUs 息流】Excalidraw 按钮隐藏

15

合并到现有话题中：【css 分享】Excalidraw 按钮隐藏