summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/css/dark.miracles.css22
-rw-r--r--assets/css/miracles.min.css157
-rw-r--r--assets/js/miracles.min.js23
-rw-r--r--includes/footer.php5
-rw-r--r--includes/head.php2
-rw-r--r--includes/header.php44
6 files changed, 215 insertions, 38 deletions
diff --git a/assets/css/dark.miracles.css b/assets/css/dark.miracles.css
index fb4dd7a..dcccd58 100644
--- a/assets/css/dark.miracles.css
+++ b/assets/css/dark.miracles.css
@@ -44,7 +44,8 @@
.body-dark .bubble.saying-body:hover,
.body-dark .OwO-body,
.body-dark .OwO-open .OwO-logo,
-.body-dark .OwO .OwO-body .OwO-items .OwO-item:hover {
+.body-dark .OwO .OwO-body .OwO-items .OwO-item:hover,
+.body-dark .options {
box-shadow: 0 0 36px #323232!important;
-moz-box-shadow: 0 0 36px #323232!important;
-webkit-box-shadow: 0 0 36px #323232!important
@@ -62,7 +63,8 @@
.body-dark .bubble.comment-content,
.body-dark .comment-author,
.body-dark .bubble.saying-body,
-.body-dark .tags-item a {
+.body-dark .tags-item a,
+.body-dark .options-button-active {
background: #646464
}
/* Need #5a5a5a bg */
@@ -81,9 +83,17 @@
.body-dark .OwO-body,
.body-dark .OwO-package-active,
.body-dark .OwO-packages li:hover,
-.body-dark .saying-textarea {
+.body-dark .saying-textarea,
+.body-dark .dialog,
+.body-dark .options,
+.body-dark .options-theme-label,
+.body-dark .options-family-button {
background: #5a5a5a!important
}
+/* Need #5a5a5a color */
+.body-dark .options-theme-label {
+ color: #5a5a5a!important;
+}
/* OwO */
.body-dark .OwO-item,
.body-dark .OwO-bar {
@@ -116,7 +126,8 @@
.body-dark .mobile-menu,
.body-dark .mobile-menu a,
.body-dark .mobile-menu-close,
-.body-dark .mobile-menu-footer {
+.body-dark .mobile-menu-footer,
+.body-dark .options-family-button {
color: #fafafa!important
}
/* Need dark border-color */
@@ -131,7 +142,8 @@
.body-dark .OwO-body,
.body-dark .mobile-menu-title,
.body-dark .mobile-menu-footer,
-.body-dark .saying-textarea {
+.body-dark .saying-textarea,
+.body-dark .options hr {
border-color: #6e6e6e!important;
}
.body-dark .comment-by-author .bubble.comment-content:before,
diff --git a/assets/css/miracles.min.css b/assets/css/miracles.min.css
index 9c9606e..d296beb 100644
--- a/assets/css/miracles.min.css
+++ b/assets/css/miracles.min.css
@@ -65,9 +65,16 @@ hr {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
+.body-sepia {
+ filter: sepia(35%);
+ -webkit-filter: sepia(35%);
+}
.body-serif {
font-family: 'Noto Serif SC',serif
}
+.body-noscroll {
+ overflow: hidden;
+}
/* 组件 */
/* > 按钮 */
@@ -166,7 +173,11 @@ hr {
.login-button {
right: 65px;
}
+.setting-button {
+ right: 110px;
+}
.nav-icon-button:hover,.search-close {
+ display: block;
background: rgb(230,230,230);
cursor: pointer
}
@@ -227,9 +238,6 @@ hr {
white-space: nowrap;
text-overflow: ellipsis
}
-.post-item:hover .post-title {
- color: var(--theme-color)
-}
.post-excerpt {
overflow: hidden;
text-overflow: ellipsis
@@ -542,6 +550,7 @@ hr {
bottom: 0;
right: 0;
left: 0;
+ max-height: 100vh;
background-color: rgba(255,255,255,0.96);
transition: all .2s;
z-index: 1000;
@@ -662,28 +671,37 @@ hr {
}
/* 悬浮按钮 */
-.dark-button,.gotop-button {
+.fixed-button {
background: #fdfdfd;
- font-size: 22px;
- padding: 10px 15px;
+ font-size: 16px;
+ height: 60px;
+ width: 60px;
+ display: flex;
+ justify-content:center;
+ align-items:center;
border: none;
border-radius: 10000px;
- box-shadow: 0 0 15px #bababa;
- -webkit-box-shadow: 0 0 15px #bababa;
- -moz-box-shadow: 0 0 15px #bababa;
+ box-shadow: 0 1px 5px #bababa;
+ -webkit-box-shadow: 0 1px 5px #bababa;
+ -moz-box-shadow: 0 1px 5px #bababa;
position: fixed;
cursor: pointer;
outline: 0;
- right: 12px
+ right: 6px;
+ transition: all 0.3s;
}
-.gotop-button {
- bottom: 30px;
- background: var(--theme-color)!important;
- color: #fff!important
+.fixed-button:hover {
+ box-shadow: 0 3px 25px #bababa;
+ -webkit-box-shadow: 0 3px 25px #bababa;
+ -moz-box-shadow: 0 3px 25px #bababa;
+ background: rgb(248,248,248)!important;
}
-.dark-button {
- bottom: 80px
+.gotop-button {
+ bottom: 8px;
+ background: #fff!important;
+ color: rgb(80,80,80)!important;
}
+
/* 页脚 */
.footer-info {
background: #f0f0f0;
@@ -971,6 +989,95 @@ hr {
transform: translateY(-6px);
box-shadow: 2px 8px 17px #bababa;
}
+
+/* Options Pannel */
+.options {
+ transition: all 0.3s;
+ background: #fff;
+ border-radius: 2px;
+ box-shadow: 0 1px 8px #bababa;
+ -moz-box-shadow: 0 1px 8px #bababa;
+ -webkit-box-shadow: 0 1px 8px #bababa;
+ position: fixed;
+ top: 90px;
+ right: 10px;
+ left: 10px;
+ z-index: 20;
+ width: 100%;
+}
+.options hr {
+ border-color: rgb(245,245,245);
+ margin: 0;
+}
+.options.ready {
+ display: none;
+ top: 40px;
+}
+.options-content {
+ padding: 8px;
+ font-size: 15px;
+}
+.options-content h4 {
+ margin: 0;
+ margin-bottom: 8px;
+}
+.options-family {
+ text-align: center;
+}
+.options-family button {
+ display: block;
+ width: 100%;
+ border: none;
+ background: #fff;
+ font-size: 20px;
+ padding: 8px 0;
+ transition: all 0.3s;
+ outline: none;
+ cursor: pointer;
+ border-radius: 3px;
+}
+.options-family button:hover {
+ background: rgb(242,242,242);
+}
+.options-family-button.options-button-active {
+ color: #fff;
+ background: var(--theme-color)!important;
+}
+.options-theme-button.options-button-active {
+ border: 2px solid var(-theme-color);
+}
+.options-themes {
+ text-align: center;
+ margin-top: 20px;
+}
+.options-theme-label {
+ color: #fff;
+ font-size: 12px;
+ transition: color 0.3s;
+}
+.options-theme-item:hover .options-theme-label {
+ color: #bababa;
+}
+.options-theme-button {
+ height: 50px;
+ width: 50px;
+ border-radius: 100%;
+ border: none;
+ outline: none;
+ display: block;
+ margin: 0 auto;
+ cursor: pointer
+}
+.options-theme-normal {
+ background: rgb(240,240,240);
+}
+.options-theme-dark {
+ background: rgb(80,80,80)
+}
+.options-theme-sepia {
+ background: rgb(255,255,200)
+}
+
/* Pio Plugin */
.pio-container .pio-dialog {
margin-bottom: -60px;
@@ -996,12 +1103,16 @@ iframe[src*="//player.bilibili.com/player.html"] {
.large-screen {
display: none
}
-
.small-screen {
display: block
}
/* > Pad and up */
@media (min-width:768px) {
+ .options {
+ width: 400px!important;
+ left: auto!important;
+ }
+
.comment-content p {
font-size: 18px;
}
@@ -1047,7 +1158,7 @@ iframe[src*="//player.bilibili.com/player.html"] {
letter-spacing: 2px
}
- .dark-button,.gotop-button {
+ .fixed-button {
padding: 15px 20px;
right: 28px
}
@@ -1056,7 +1167,7 @@ iframe[src*="//player.bilibili.com/player.html"] {
bottom: 20px
}
- .dark-button {
+ .options-button {
bottom: 90px
}
@@ -1131,7 +1242,7 @@ iframe[src*="//player.bilibili.com/player.html"] {
letter-spacing: 2px
}
- .dark-button,.gotop-button {
+ .fixed-button {
padding: 18px 23px;
right: 38px
}
@@ -1140,7 +1251,7 @@ iframe[src*="//player.bilibili.com/player.html"] {
bottom: 40px
}
- .dark-button {
+ .options-button {
bottom: 120px
}
@@ -1215,7 +1326,7 @@ iframe[src*="//player.bilibili.com/player.html"] {
line-height: 30px;
letter-spacing: 2px
}
- .dark-button,.gotop-button {
+ .fixed-button {
padding: 18px 23px;
right: 38px
}
@@ -1224,7 +1335,7 @@ iframe[src*="//player.bilibili.com/player.html"] {
bottom: 40px
}
- .dark-button {
+ .options-button {
bottom: 120px
}
diff --git a/assets/js/miracles.min.js b/assets/js/miracles.min.js
index d07c5f3..2606bcc 100644
--- a/assets/js/miracles.min.js
+++ b/assets/js/miracles.min.js
@@ -8,6 +8,14 @@
function Dark() {
$("body").toggleClass("body-dark");
}
+//toggleGray
+function Gray() {
+ $("body").toggleClass("body-gray");
+}
+//toggleSepia
+function Sepia() {
+ $("body").toggleClass("body-sepia");
+}
//GoTop
function GoTop() {
$('body,html').animate({scrollTop:0},500);
@@ -54,6 +62,21 @@ function Login() {
$(".login").toggleClass("ready");
$(".login-close").toggleClass("ready");
}
+//FrontOptions
+function toggleOptions() {
+ $(".options").toggleClass("ready");
+}
+//FontFamily
+function ChangeToSerif() {
+ $('body').addClass('body-serif');
+ $('.options-serif-button').addClass('options-button-active');
+ $('.options-sans-button').removeClass('options-button-active');
+}
+function ChangeToSansSerif() {
+ $('body').removeClass('body-serif');
+ $('.options-serif-button').removeClass('options-button-active');
+ $('.options-sans-button').addClass('options-button-active');
+}
//owo
function owoLoad() {
var OwO_demo = new OwO({
diff --git a/includes/footer.php b/includes/footer.php
index 671ee49..b7f5ec4 100644
--- a/includes/footer.php
+++ b/includes/footer.php
@@ -10,8 +10,7 @@
</footer>
<!-- 悬浮按钮 -->
<div class="fixed-tools">
- <button onclick="GoTop()" title="返回顶部" class="gotop-button" style="color:white;"><i class="iconfont icon-chevron-up"></i></button>
- <button onclick="Dark()" title="护眼模式" class="dark-button"><i class="iconfont icon-envira"></i></button>
+ <button onclick="GoTop()" title="返回顶部" class="fixed-button gotop-button" style="color:white;"><i class="iconfont icon-chevron-up"></i></button>
</div>
<!-- JavaScript -->
<?php if($this->options->CDN && $this->options->CDN=1): ?>
@@ -42,4 +41,4 @@
<script>LazyLoad();PrismLoad();owoLoad();<?php $this->options->jsEcho(); ?></script>
<?php $this->footer(); ?>
</body>
-</html>
+</html> \ No newline at end of file
diff --git a/includes/head.php b/includes/head.php
index 725841a..34d2ece 100644
--- a/includes/head.php
+++ b/includes/head.php
@@ -62,7 +62,7 @@ if (isset($_POST['action'])) {
<link rel="stylesheet" href="<?php Utils::indexTheme('assets/css/dark.miracles.css'); ?>" />
<?php endif; ?>
<!-- icon font -->
- <link rel="stylesheet" href="//at.alicdn.com/t/font_1165190_q4ccniy74h.css" />
+ <link rel="stylesheet" href="//at.alicdn.com/t/font_1165190_oo2f2wsibld.css" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:300|Noto+Serif+SC:300&display=swap" rel="stylesheet">
<style>.body-dark .pio-action .pio-home{background-image: url(<?php Utils::indexTheme('images/icons/home.png'); ?>);}.body-dark .pio-action .pio-close{background-image: url(<?php Utils::indexTheme('images/icons/remove.png'); ?>);}.body-dark .pio-action .pio-skin{background-image: url(<?php Utils::indexTheme('images/icons/skin.png'); ?>);}.body-dark .pio-action .pio-info{background-image: url(<?php Utils::indexTheme('images/icons/info.png'); ?>);}.body-dark .pio-action .pio-night{background-image: url(<?php Utils::indexTheme('images/icons/night.png'); ?>);}@media (min-width:992px) {.search{background-image:url(<?php Utils::indexTheme('images/search.png'); ?>);}.login{background-image:url(<?php Utils::indexTheme('images/login.png'); ?>)}}.search {background-position: bottom right;background-repeat: no-repeat}.login {background-position: bottom left;background-repeat:no-repeat}<?php $this->options->cssEcho(); ?></style>
diff --git a/includes/header.php b/includes/header.php
index 2fca1a0..0c1adc3 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -41,9 +41,42 @@
<p>&copy; <?php echo date('Y'); ?> <a href="<?php $this->options->SiteUrl(); ?>"><?php $this->options->title(); ?></a> | Theme <a href="https://github.com/BigCoke233/miracles">Miracles</a></p>
</div>
</div>
-
+ <!-- 前台设置 -->
+ <div class="options ready">
+ <div class="options-content">
+ <div class="options-family container-fluid">
+ <div class="row">
+ <div class="col-6 options-family-serif">
+ <button onclick="ChangeToSerif()" class="<?php if($this->options->bodyFonts && $this->options->bodyFonts=1): ?>options-button-active <?php endif; ?>options-family-button options-serif-button body-serif">Serif</button>
+ </div>
+ <div class="col-6 options-family-sans">
+ <button onclick="ChangeToSansSerif()" class="<?php if($this->options->bodyFonts && $this->options->bodyFonts=1): ?><?php else: ?>options-button-active <?php endif; ?>options-family-button options-sans-button" style="font-family: 'Noto Sans SC',sans-serif">Sans Serif</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <hr>
+ <div class="options-content">
+ <div class="options-themes container-fluid">
+ <div class="row">
+ <div class="col-4 options-theme-item">
+ <button class="options-theme-button options-theme-dark" onclick="Dark()"></button>
+ <span class="options-theme-label">黑夜模式</span>
+ </div>
+ <div class="col-4 options-theme-item">
+ <button class="options-theme-button options-theme-sepia" onclick="Sepia()"></button>
+ <span class="options-theme-label">日落模式</span>
+ </div>
+ <div class="col-4 options-theme-item">
+ <button class="options-theme-button options-theme-normal" onclick="Gray()"></button>
+ <span class="options-theme-label">黑白滤镜</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
<!-- 导航 -->
- <!-- > 大屏幕导航 -->
+ <!-- -大屏幕导航 -->
<nav class="large-screen nav<?php if($this->options->nav_position && $this->options->nav_position=1): ?> nav-fixed<?php endif; ?>">
<div class="container">
<p class="nav-content">
@@ -55,9 +88,10 @@
</p>
<button class="nav-icon-button search-button" onclick="Search()"><i class="iconfont icon-chaxun"></i></button>
<button class="nav-icon-button login-button" onclick="Login()"><i class="iconfont icon-user"></i></button>
+ <button class="nav-icon-button setting-button" onclick="toggleOptions()"><i class="iconfont icon-settings"></i></button>
</div>
</nav>
- <!--> 小屏幕导航 -->
+ <!-- -小屏幕导航 -->
<nav class="small-screen nav nav-mobile<?php if($this->options->nav_position && $this->options->nav_position=1): ?> nav-fixed<?php endif; ?>">
<div class="nav-mobile-content">
<a href="<?php $this->options->SiteUrl(); ?>" style="float:left"><i class="iconfont icon-xuanzhongshangcheng"></i></a>
@@ -83,9 +117,7 @@
<?php elseif($this->is('post') || $this->is('page')): ?>
<h1><?php $this->title(); ?></h1>
<p class="header-meta"><?php if($this->is('post')): ?><i class="iconfont icon-block"></i> <?php $this->category(','); ?>&emsp;<?php endif; ?><i class="iconfont icon-comments"></i> <?php $this->commentsNum('None', 'Only 1', '%d'); ?>&emsp;<i class="iconfont icon-clock"></i> <?php $this->date(); ?></p>
- <?php else: ?>
-
- <?php endif; ?>
+ <?php else: ?><?php endif; ?>
</div>
</div>
</div>