夜间模式
This commit is contained in:
结发受长生
parent
18f8ee7580
commit
95592cc081
@ -98,13 +98,6 @@ valine:
|
||||
appId: 40jq6uO51rpVT4PEEcayYkda-gzGzoHsz
|
||||
appKey: nBOoOEDP4EBUfgpSJAF6idKi
|
||||
|
||||
# 样式定制 - 一般不需要修改，除非有很强的定制欲望…
|
||||
style:
|
||||
# 头像上面的背景颜色
|
||||
header: '#4d4d4d'
|
||||
# 右滑板块背景
|
||||
slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'
|
||||
|
||||
# 智能菜单
|
||||
# 如不需要，将该对应项置为false
|
||||
# 比如
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
|
||||
<i class="icon-font icon-back"></i>
|
||||
</a>
|
||||
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
|
||||
<div id="js-jump-plan-container" class="jump-plan-container">
|
||||
<i class="icon-font icon-plane jump-plane"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -30,11 +30,6 @@
|
||||
<link rel="icon" href="<%- theme.favicon %>">
|
||||
<% } %>
|
||||
<%- partial('css') %>
|
||||
<style type="text/css">
|
||||
#container.show {
|
||||
background: <%= theme.style && theme.style.slider ? theme.style.slider : 'linear-gradient(200deg,#a0cfe4,#e8c37e)' %>;
|
||||
}
|
||||
</style>
|
||||
<%- partial('google-analytics') %>
|
||||
<%- partial('baidu-analytics') %>
|
||||
</head>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<% var defaultBg = '#4d4d4d'; %>
|
||||
<div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"></div>
|
||||
<div class="overlay" ></div>
|
||||
<div class="intrude-less">
|
||||
<header id="header" class="inner">
|
||||
<a href="<%=config.root%>" @mouseover="linkMouseover('home')" class="profilepic">
|
||||
|
||||
@ -81,8 +81,6 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
blockquote {
|
||||
background: #ddd;
|
||||
border-left: 5px solid #ccc;
|
||||
padding: 15px 20px;
|
||||
margin-top: 10px;
|
||||
border-left: 5px solid #657b83;
|
||||
|
||||
@ -57,9 +57,9 @@
|
||||
.article {
|
||||
margin: 30px;
|
||||
position: relative;
|
||||
border: 1px solid #ddd;
|
||||
border-top: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #fff #ddd;
|
||||
background: $colorBg;
|
||||
transition: all 0.2s ease-in;
|
||||
img{
|
||||
|
||||
@ -24,6 +24,7 @@ html, body, #container {
|
||||
display: none;
|
||||
}
|
||||
&.show {
|
||||
background: linear-gradient(200deg,#a0cfe4,#e8c37e);
|
||||
.anm-canvas {
|
||||
display: block;
|
||||
position: fixed;
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
background: #4d4d4d;
|
||||
}
|
||||
|
||||
.intrude-less {
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
@import "./tooltip";
|
||||
@import "./footer";
|
||||
@import "./waifu";
|
||||
@import "./night";
|
||||
@media screen and (max-width: 800px) {
|
||||
@import "./mobile";
|
||||
@import "./mobile-slider";
|
||||
|
||||
@ -145,7 +145,6 @@ html, body, #container {
|
||||
margin: 10px 0;
|
||||
border: 0;
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
.article-more-link {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
54
themes/yilia/source-src/css/night.scss
Normal file
54
themes/yilia/source-src/css/night.scss
Normal file
@ -0,0 +1,54 @@
|
||||
/*
|
||||
* 夜间模式配色
|
||||
*/
|
||||
$mainBg_night: #1f2e3c; // 主背景色
|
||||
$articleBg_night: #15202b; // 文章背景色
|
||||
$textColor_night: #d5d5d5; // 文字颜色
|
||||
|
||||
body.night {
|
||||
background: $mainBg_night;
|
||||
// 展开菜单之后的背景
|
||||
#container.show {
|
||||
background: none;
|
||||
}
|
||||
// 主背景
|
||||
.mid-col {
|
||||
background: $mainBg_night;
|
||||
}
|
||||
// 文章区域
|
||||
.article{
|
||||
background: $articleBg_night;
|
||||
border-color: rgb(56, 68, 77);
|
||||
color: $textColor_night;
|
||||
.article-title { // 主标题
|
||||
color: $colorF;
|
||||
}
|
||||
.article-entry blockquote{ // 引用
|
||||
background: #2c2c2c;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 { // 章节标题
|
||||
color: #b8a7a7;
|
||||
}
|
||||
}
|
||||
// 左侧栏
|
||||
.left-col {
|
||||
background: $articleBg_night;
|
||||
.overlay {
|
||||
background: none;
|
||||
}
|
||||
.profilepic { // 头像
|
||||
filter: brightness(30%);
|
||||
}
|
||||
}
|
||||
// 看板娘
|
||||
.waifu {
|
||||
filter: brightness(30%);
|
||||
}
|
||||
// 评论
|
||||
#comments {
|
||||
background: none;
|
||||
}
|
||||
#footer {
|
||||
color: $textColor_night;
|
||||
}
|
||||
}
|
||||
@ -109,8 +109,15 @@ new Vue({
|
||||
})
|
||||
this.showMessage(welcomeMessage(), 6000)
|
||||
document.addEventListener('copy', () => {
|
||||
this.showMessage('你都复制了些什么呀，转载要记得加上出处哦');
|
||||
this.showMessage('你都复制了些什么呀，转载要记得加上出处哦')
|
||||
})
|
||||
},
|
||||
created() {
|
||||
// 夜间模式
|
||||
let night = localStorage.getItem('night')
|
||||
try {
|
||||
if(night && eval(night)) document.querySelector('body').classList.add('night')
|
||||
} catch (e){}
|
||||
}
|
||||
})
|
||||
|
||||
@ -171,16 +178,20 @@ function welcomeMessage() {
|
||||
|
||||
const waifuTools = {
|
||||
"tools.photo"() {
|
||||
// 生成canvas快照
|
||||
window.Live2D.captureName = 'Kesshouban.png'
|
||||
window.Live2D.captureFrame = true
|
||||
},
|
||||
"tools.close"() {
|
||||
// 隐藏看板娘
|
||||
setTimeout(function() {
|
||||
document.querySelector('.waifu').style.display = 'none';
|
||||
document.querySelector('.waifu').style.display = 'none'
|
||||
}, 1300);
|
||||
},
|
||||
"tools.eye"() {
|
||||
//TODO 切换到夜间模式
|
||||
// 切换到夜间模式
|
||||
let night = document.querySelector('body').classList.toggle('night')
|
||||
localStorage.setItem('night', night)
|
||||
},
|
||||
"tools.chart"() {
|
||||
// 一言
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user