[分享] 文件树缩进线(Cliff-Dark 主题中的部分 CSS 片段)

本贴最后更新于 292 天前,其中的信息可能已经时过境迁

关联:【求代码片段】如何为文件树添加引导线

为了回答问题,我研究半天,最后从 Cliff-Dark 主题 上把对应的 CSS 片段扒下来了:


/*文件树缩进线*/
.sy__file .b3-list-item__toggle {
   padding-left:1px !important;
   padding-right:1px;
   color:var(--b3-theme-primary);
   opacity:0.6;
}
.sy__file .b3-list-item__icon {
   margin-left:0px;
   margin-right:0px;
   padding:0px 0px;
   transform:scale(0.6);
}
.sy__file .b3-list.b3-list--background ul {
   border-left:2px solid var(--b3-theme-background-light);
   margin:0px 0px 0px 10px;
}
.sy__file .fn__flex-1 {
   margin:0px;
   padding-right:5px;
}
.layout--float .file-tree {
   margin-right:5px;
}
.fn__flex-1.fn__flex-column.file-tree.sy__file .b3-list-item {
   margin-left:0px !important;
}

如果你想改一改样式,可以参考以下 GPT 的回答。如果看不懂是什么意思,随便改一改数值,重新加载之后看看样式变化就知道了。

--GPT 回答分界线--

在这段代码中,每个模块的作用如下:

  1. .sy__file .b3-list-item__toggle 模块:
    • padding-left:1px !important;:设置列表项的左内边距为 1 像素。
    • padding-right:1px;:设置列表项的右内边距为 1 像素。
    • color:var(--b3-theme-primary);:设置列表项的文本颜色为预定义的主题主色。
    • opacity:0.6;:设置列表项的透明度为 0.6。
  2. .sy__file .b3-list-item__icon 模块:
    • margin-left:0px;:将列表项图标的左外边距设置为 0 像素。
    • margin-right:0px;:将列表项图标的右外边距设置为 0 像素。
    • padding:0px 0px;:将列表项图标的内边距设置为 0 像素。
    • transform:scale(0.6);:将列表项图标进行缩放,缩放比例为 0.6。
  3. .sy__file .b3-list.b3-list--background ul 模块:
    • border-left:2px solid var(--b3-theme-background-light);:在文件列表的左侧添加一个宽度为 2 像素、颜色为预定义的背景亮色的实线边框。
    • margin:0px 0px 0px 10px;:设置文件列表的外边距,上、右、下边距为 0 像素,左边距为 10 像素。
  4. .sy__file .fn__flex-1 模块:
    • margin:0px;:将元素的外边距设置为 0 像素。
    • padding-right:5px;:将元素的右内边距设置为 5 像素。
  5. .layout--float .file-tree 模块:
    • margin-right:5px;:将浮动布局中的文件树元素的右外边距设置为 5 像素。
  6. .fn__flex-1.fn__flex-column.file-tree.sy__file .b3-list-item 模块:
    • margin-left:0px !important;:将文件树中的列表项的左外边距设置为 0 像素,并使用 !important 关键字强制应用此样式,覆盖其他可能存在的样式。

以上是对每个模块的简要解释,它们主要用于调整文件列表中的元素的样式,包括列表项的内边距、图标的外边距和缩放、文件列表的边框和外边距,以及文件树中的列表项的外边距。

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    19629 引用 • 74912 回帖
  • 主题
    17 引用 • 134 回帖 • 4 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    184 引用 • 458 回帖 • 5 关注
  • 代码
    460 引用 • 591 回帖 • 8 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • GloR

    搞定了,谢谢啦~~🌸

    1 回复
  • 可以到原帖子下 采纳 我的回帖,这样我就有 20 积分了,如果想给多点积分还可以点个 ❤️ 感谢

  • GloR 1 1 赞同 2 评论

    自己改了下,把缩进线间距调大了,加了笔记本区隔:

    
    .sy__file .b3-list-item__toggle {
       padding-left:8px !important;
       padding-right:1px;
       color:#899fad; 
    }
    
    .sy__file .b3-list.b3-list--background ul {
       border-left:1px dotted #c5d2db;
       margin:0px 0px 0px 16.5px;
    }
    
    .sy__file .fn__flex-1 {
       margin:0px;
       padding-right:5px;
    }
    .layout--float .file-tree {
       margin-right:5px;
    }
    .fn__flex-1.fn__flex-column.file-tree.sy__file .b3-list-item {
       margin-left:0px !important;
    }
    
    /* 笔记本 区隔 */
    .sy__file ul.b3-list.b3-list--background {
        border-radius: 0.3em;
        margin: 6px 10px 6px 12px;
        outline: 1.5px double #d2dfe8;
        overflow: hidden;
    }
    
    
    1 回复
    1 操作
    GloR 在 2023-09-02 15:10:47 更新了该回帖
    这个代码的缺陷就是 存在不必要的缩进线,导致观感不够好,理想状况下,笔记本下的第一条缩进线应该是不需要的
    GloR
    @GloR 哈哈,我反而比较需要
    JeffreyChen
  • Kidus

    感谢分享!

  • 我实现了!下面这段代码原来是 ul ,我改成 ul>ul 之后就可以去掉第一条线了。

    .sy__file .b3-list.b3-list--background ul>ul {
       border-left:1px dotted #c5d2db;
       margin:0px 0px 0px 16.5px;
    }
    

    现在我个人使用的完整代码片段是:

    /* 文件树缩进线&笔记本区隔 CSS片段*/
    .sy__file .b3-list-item__toggle {
       padding-left:8px !important;
       padding-right:1px;
       color:#899fad; 
    }
    
    .sy__file .b3-list-item__icon {
    margin-left:0px;
    margin-right:0px;
    padding:0px 0px;
    transform:scale(0.7);
    }
    
    .sy__file .b3-list.b3-list--background ul>ul {
       border-left:1px dotted #c5d2db;
       margin:0px 0px 0px 16.5px;
    }
    
    .sy__file .fn__flex-1 {
       margin:0px;
       padding-right:5px;
    }
    .layout--float .file-tree {
       margin-right:5px;
    }
    .fn__flex-1.fn__flex-column.file-tree.sy__file .b3-list-item {
       margin-left:0px !important;
    }
    
    /* 笔记本 区隔 */
    .sy__file ul.b3-list.b3-list--background {
        border-radius: 0.3em;
        margin: 6px 10px 6px 12px;
        outline: 1.5px double #5f7a8c;
        overflow: hidden;
    }
    
  • micromiku

    又收藏大佬的一个样式 感谢 🙏

请输入回帖内容 ...

推荐标签 标签

  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    262 引用 • 664 回帖 • 1 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    51 引用 • 226 回帖
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    215 引用 • 463 回帖
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    26 引用 • 222 回帖 • 164 关注
  • 电影

    这是一个不能说的秘密。

    120 引用 • 597 回帖 • 1 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    713 引用 • 1174 回帖 • 131 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    138 引用 • 268 回帖 • 152 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 310 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 29 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    675 引用 • 535 回帖
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 4 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 17 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    84 引用 • 139 回帖 • 1 关注
  • 导航

    各种网址链接、内容导航。

    37 引用 • 168 回帖
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    170 引用 • 813 回帖
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 610 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    184 引用 • 458 回帖 • 5 关注
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 2 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖 • 3 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    19 引用 • 23 回帖 • 698 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    7 引用 • 26 回帖 • 1 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    327 引用 • 1702 回帖
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 404 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 1 关注