Comments (2)
https://have.somuch.work/archives/622b0b88-c21f-4777-b491-ef1e97d42613
简单实现了点mac窗口的效果,不过感觉还是挺别扭的。
打算先这样用了,默认为黑色底色。
<style>
html[data-mode="light"] {
--main-bg: #f4f4f4;
--topbar-bg: #f4f4f4;
}
img{
border-radius: 6px;
}
.hljs {
border-radius: 6px; /* 调整圆角的大小 */
background: #282828 !important;
padding: 1.5em !important;
}
html:not([data-mode]) .messageText {
fill: white !important;
}
html:not([data-mode]) .loopText tspan{
fill: white !important;
}
html:not([data-mode]) .messageLine0{
stroke: white !important;
}
/* 基础样式 */
pre {
position: relative; /* 为窗口控制按钮定位 */
border-radius: 10px; /* 圆角 */
box-shadow: 0 0 20px rgb(0 0 0 / 53%);
padding-top: 20px; /* 内边距 */
background: #282828 !important;
}
/* 窗口控制按钮 */
pre::before {
content: ''; /* 伪元素内容 */
position: absolute; /* 绝对定位 */
top: 1em; /* 距顶部位置 */
left: 1em; /* 距左侧位置 */
width: 1em; /* 宽度 */
height: 1em; /* 高度 */
border-radius: 50%; /* 圆形 */
background: #434547; /* 红色按钮 */
box-shadow: 21px 0 0 #434547, 42px 0 0 #434547; /* 使用阴影来模拟其他两个按钮 */
}
}
</style>
from halo-theme-chirpy.
抱歉代码块作为基础功能还拖了一些时间,我会尽快处理代码块相关功能。
#28
from halo-theme-chirpy.
Related Issues (20)
- [改进] 表格显示样式问题 HOT 3
- 请问如何添加友链啊 HOT 1
- 升级1.4.1后前端文章详情中代码块错位 HOT 4
- 左侧的标签归档如何通过主题实现哈。 HOT 1
- 页面的评论数据异常 HOT 1
- 希望能实现图片的灯箱效果 HOT 1
- 博主,请问下怎么更改首页文章全文显示 HOT 6
- magnificPopup JS错误
- 最新版本1.4.3,不支持加入页脚代码 HOT 5
- Version 1.4.3 无法展示Favicon HOT 4
- 全局 head 标签 的代码,却配置到了html body中 HOT 2
- [建议] 增加博文图片点击放大功能的支持 HOT 9
- 代码块收缩功能
- 增加更多站点信息
- 目录显示问题 HOT 1
- 建议加上一个文章总数显示 HOT 1
- 建议加个小图标的功能 HOT 1
- 文章目录过多不显示问题 HOT 2
- `.post-tail-wrapper` 位置错误
- 评论内容对比度太低。。看不清文字 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from halo-theme-chirpy.