/*========颜色设置===========*/
/*文章或页面的正文颜色*/
body{
color:#364863
}
/*引文属性设置*/
blockquote {
/*添加弱主题色为背景色*/
background: rgba(var(--themecolor-rgbstr), 0.1) !important;
width: 100%
}
/*引文颜色 建议用主题色*/
:root {
/*也可以用类似于--color-border-on-foreground-deeper: #009688;这样的命令*/
--color-border-on-foreground-deeper: rgba(var(--themecolor-rgbstr));
}
/*左侧菜单栏突出颜色修改*/
.leftbar-menu-item > a:hover, .leftbar-menu-item.current > a{
background-color: #f9f9f980;
}
/*站点概览分隔线颜色修改*/
.site-state-item{
border-left: 1px solid #aaa;
}
.site-friend-links-title {
border-top: 1px dotted #aaa;
}
#leftbar_tab_tools ul li {
padding-top: 3px;
padding-bottom: 3px;
border-bottom:none;
}
html.darkmode #leftbar_tab_tools ul li {
border-bottom:none;
}
/*左侧栏搜索框的颜色*/
button#leftbar_search_container {
background-color: transparent;
}
/*========透明设置===========*/
/*白天卡片背景透明*/
.card{
background-color:rgba(255, 255, 255, 0.8) !important;
/*backdrop-filter:blur(6px);*//*毛玻璃效果主要属性*/
-webkit-backdrop-filter:blur(6px);
}
/*小工具栏背景完全透明*/
/*小工具栏是card的子元素,如果用同一个透明度会叠加变色,故改为完全透明*/
.card .widget,.darkmode .card .widget,#post_content > div > div > div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title{
background-color:#ffffff00 !important;
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
.emotion-keyboard,#fabtn_blog_settings_popup{
background-color:rgba(255, 255, 255, 0.95) !important;
}
/*分类卡片透明*/
.bg-gradient-secondary{
background:rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter:blur(10px);
}
/*夜间透明*/
html.darkmode.bg-white,html.darkmode .card,html.darkmode #footer{
background:rgba(66, 66, 66, 0.9) !important;
}
html.darkmode #fabtn_blog_settings_popup{
background:rgba(66, 66, 66, 0.95) !important;
}
/*标签背景
.post-meta-detail-tag {
background:rgba(255, 255, 255, 0.5)!important;
}*/
/*全局字体*/
*{font-family:LXGW WenKai}
*{font-weight:bold}
body {font-family: LXGW WenKai;}
/*背景*/
body::before {
z-index: -1;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.6;
position: fixed;
background: center/cover no-repeat;
background-image: url(https://alist.shnva.com/d/aliyun/压缩webp/233.webp);
}
<script>
function hexToRgb(hex,op){
let str = hex.slice(1);
let arr;
if (str.length === 3) arr = str.split('').map(d => parseInt(d.repeat(2), 16));
else arr = [parseInt(str.slice(0, 2), 16), parseInt(str.slice(2, 4), 16), parseInt(str.slice(4, 6), 16)];
return `rgb(${arr.join(', ')}, ${op})`;
};
let themeColorHex = getComputedStyle(document.documentElement).getPropertyValue('--themecolor').trim();
let op1 = 0.6
let themeColorRgb = hexToRgb(themeColorHex,op1);
let themecolorGradient = getComputedStyle(document.documentElement).getPropertyValue('--themecolor-gradient')*
document.documentElement.style.setProperty('--themecolor-gradient',themeColorRgb)
let op2 = 0.8
// 方法一:
let colorTint92 = getComputedStyle(document.documentElement).getPropertyValue('--color-tint-92').trim();
colorTint92 += ', '+op2;
document.documentElement.style.setProperty('--color-tint-92',colorTint92)
// 方法二:(无效)
// let colorForegroundHex = getComputedStyle(document.documentElement).getPropertyValue('--color-foreground').trim();
// let colorForeground = hexToRgb(colorForegroundHex,op2)
// 无效的原因是博客里的--color-fpreground是局部变量,不是:root里的全局变量,所以最好的办法是修改--color-tint-92,这个是全局的
// document.documentElement.style.setPrope。rty('--color-fpreground',colorForeground)
// 不要用下面这种cssText这种写法,会导致上面--themecolor-gradient的样式修改失效!
// document.documentElement.style.cssText = '--color-tint-92:'+colorTint92
let op3 = 0.65
let colorShade90 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-90').trim();
colorShade90 += ', ' + op3;
document.documentElement.style.setProperty('--color-shade-90',colorShade90)
let op4 = 0.8
let colorShade86 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-86').trim();
colorShade86 += ', ' + op4;
document.documentElement.style.setProperty('--color-shade-86',colorShade86)
</script>
<!--延迟加载-->
<!--如果要写自定义内容建议都加到这个延迟加载的范围内-->
<div id="customize" style="display: none;">
<div>
<!--一言API-->
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
<!--延迟加载范围到这里结束-->
</div>
<!--延迟加载配套使用JS-->
<script>
let interval = setInterval(() => {
if (document.querySelector(".footer")) {
document.querySelector("#customize").style.display = "";
clearInterval(interval);
}
}, 200);
</script>
<!--引入字体,全局字体使用-->
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-webfont@1.1.0/lxgwwenkai-regular.css" />
<footer id="footer" class="bg-white p-4 text-center mt-4">
<!-- PC -->
<span class="pcxs">
<p class="small" style="font-size:15px; font-family="Verdana,Geneva,DejaVu Sans,sans-serif">© 2022 - <?php echo date('Y'); ?> <a target="_blank" class="d-md-inline-flex nav-link" href="/index.php/Copyright.html" title="本站申明">🌸</a> Toki - blog</p>
<span>
<span style="color: rgb(13, 109, 252); font-weight: bold; font-size:13px;" id="hitokoto">
<a href="#" id="hitokoto_text">
"人生最大的遗憾,就是在最无能为力的时候遇到一个想要保护一生的人."
</a>
</span>
</span>
<script language="javascript">
var now = new Date();
function createtime(){
var grt= new Date("4/30/2023 00:00:00");/*---这里是网站的启用时间--*/
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24;
dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;}
minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes);
if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds);
if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "本站已稳定运行:"+dnum +" 天 ";
document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒🏄";
}
setInterval("createtime()",250);
<!--一言API-->
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
<!--延迟加载范围到这里结束-->
</div>
<!--延迟加载配套使用JS-->
<script>
let interval = setInterval(() => {
if (document.querySelector(".footer")) {
document.querySelector("#customize").style.display = "";
clearInterval(interval);
}
}, 200);
</script>
<br><a target="_blank" class="d-md-inline-flex nav-link" href="https://typecho.org" title="博客驱动为 Typecho"><img src="https://img.shields.io/badge/Powered-Typecho-d42328?style=flat&logo=Analogue"></a>
 <a target="_blank" class="d-md-inline-flex nav-link" href="https://blog.zwying.com" title="主题采用 Cuteen"><img src="https://img.shields.io/badge/Theme-Cuteen-9561cd?style=flat&logo=Pinterest"></a>
 <a target="_blank" class="d-md-inline-flex nav-link" href="https://beian.miit.gov.cn/#/Integrated/index" title="沪ICP备2021005514号-1"><img src="https://img.shields.io/badge/沪ICP备-2021005514号-4bc51d?style=flat&logo=Octane Render"></a>
 <a target="_blank" class="d-md-inline-flex nav-link" href="https://www.rainyun.com/?ref=MjQyNTc=" title="由 腾讯云 提供云计算服务"><img src="https://img.shields.io/badge/TxCloud-腾讯云-f42187?style=flat&logo=Git Extensions"></a>
 <a target="_blank" class="d-md-inline-flex nav-link" href="https://www.dogecloud.com/" title="由 多吉云 提供CDN加速服务"><img src="https://img.shields.io/badge/CDN-DogeCloud-148EFF?style=flat&logo=ONLYOFFICE"></a>
</span>
2023年04月30日 17:32