diff options
| -rw-r--r-- | assets/css/main/post.css | 20 | ||||
| -rw-r--r-- | assets/css/main/themes.css | 60 | ||||
| -rw-r--r-- | assets/js/miracles.min.js | 54 | ||||
| -rw-r--r-- | includes/head.php | 2 | ||||
| -rw-r--r-- | includes/header.php | 7 |
5 files changed, 113 insertions, 30 deletions
diff --git a/assets/css/main/post.css b/assets/css/main/post.css index fecd7d7..f45354d 100644 --- a/assets/css/main/post.css +++ b/assets/css/main/post.css @@ -8,7 +8,7 @@ .post-list,
.post-body,
.saying-body {
- margin-top: -110px;
+ margin-top: -70px!important;
transition: .8s;
}
.post-item {
@@ -195,8 +195,12 @@ }
.post-content a:not(.no-line) {
position: relative;
- color: #000;
+ color: rgb(40,40,40);
border-bottom: 2px solid #f0f0f0;
+ transition: .2s
+}
+.post-content a:not(.no-line):hover {
+ opacity: 0.85
}
.post-content a:not(.no-line)::before {
content: '';
@@ -354,14 +358,14 @@ .post-pagenav a,
.comment-pagenav a {
border-radius: 10000px;
- box-shadow: 0 0 15px #ccc;
- -moz-box-shadow: 0 0 15px #ccc;
- -webkit-box-shadow: 0 0 15px #ccc
+ box-shadow: 0 0 10px #ccc;
+ -moz-box-shadow: 0 0 10px #ccc;
+ -webkit-box-shadow: 0 0 10px #ccc
}
.post-pagenav a:hover {
- box-shadow: 0 0 15px #ccc;
- -moz-box-shadow: 0 0 15px #ccc;
- -webkit-box-shadow: 0 0 15px #ccc
+ box-shadow: 0 0 25px #ccc;
+ -moz-box-shadow: 0 0 25px #ccc;
+ -webkit-box-shadow: 0 0 25px #ccc
}
.post-pagenav-left {
float: left
diff --git a/assets/css/main/themes.css b/assets/css/main/themes.css index c54cc01..affe752 100644 --- a/assets/css/main/themes.css +++ b/assets/css/main/themes.css @@ -340,4 +340,62 @@ */
.body-sepia {
background: rgb(248,241,228)
-}
\ No newline at end of file +}
+.body-sepia .nav {
+ background: rgba(250,241,228,0.86);
+}
+.body-sepia .post-body,
+.body-sepia .post-item,
+.body-sepia #comment-form {
+ background: rgb(245,238,218)
+}
+.body-sepia .banner-mask {
+ background: rgba(164,120,114,0.3)
+}
+.body-sepia img {
+ filter: sepia(20%);
+}
+.body-sepia .nav-icon-button {
+ background: rgba(248,241,228,0.9);
+}
+.body-sepia .nav-icon-button:hover {
+ background: rgba(248,241,228,0.7);
+}
+.body-sepia .search,
+.body-sepia .login,
+.body-sepia .mobile-menu {
+ background-color: rgba(248,241,228,0.98);
+}
+.body-sepia .search-form input {
+ background-color: rgba(245,241,228)
+}
+.body-sepia .footer-info,
+.body-sepia .index-banner,
+.body-sepia .links-item,
+.body-sepia .comment-meta span {
+ background-color: rgb(246,240,220)!important
+}
+.body-sepia .post-content h3 {
+ border-color: #DD4B39
+}
+.body-sepia .archives-list li a:hover,
+.body-sepia .tags-item a {
+ background: rgb(250,246,224)
+}
+.body-sepia .OwO-logo {
+ background: transparent
+}
+.body-sepia .OwO-logo:hover {
+ opacity: 0.9;
+ background: transparent
+}
+.body-sepia .fixed-button,
+.body-sepia .post-pagenav a {
+ background: rgb(250,246,224)!important
+}
+.body-sepia .comment-content {
+ background-color: rgb(250,230,220)
+}
+.body-sepia .comment-content.bubble::before {
+ border-right-color: rgb(250,230,220)
+}
diff --git a/assets/js/miracles.min.js b/assets/js/miracles.min.js index 05c301a..f497979 100644 --- a/assets/js/miracles.min.js +++ b/assets/js/miracles.min.js @@ -69,32 +69,54 @@ function gotoPosition(e){ * Dark theme
*/
//toggleDark
+var theme = 0;
function Dark() {
- //Add classs to use dark theme
- $("body").toggleClass("body-dark");
+ theme++;
//Add cookie to record
- if ($("body").hasClass("body-dark")) {
- addCookie("darkTheme", "on", 9);
- $("#toggle-dark-button").html('<i class="iconfont icon-sun"></i>');
- $("#toggle-dark-mobile").html('<i class="iconfont icon-sun"></i>');
- alertSend("已切换夜间模式");
- } else {
- addCookie("darkTheme", "off", 9);
+ if(theme==2){
+ addCookie("theme", "2", 9);
$("#toggle-dark-button").html('<i class="iconfont icon-moon"></i>');
$("#toggle-dark-mobile").html('<i class="iconfont icon-moon"></i>');
- alertSend("已切换日间模式")
- }
+ $("body").removeClass("body-sepia");
+ $("body").addClass("body-dark");
+ alertSend("已切换夜间模式");
+ }
+ else if(theme==1){
+ addCookie("theme", "1", 9);
+ $("#toggle-dark-button").html('<i class="iconfont icon-sunset"></i>');
+ $("#toggle-dark-mobile").html('<i class="iconfont icon-sunset"></i>');
+ $("body").removeClass("body-dark");
+ $("body").addClass("body-sepia");
+ alertSend("已切换日落模式");
+ }
+ else {
+ addCookie("theme", "3", 9);
+ theme = 0;
+ $("#toggle-dark-button").html('<i class="iconfont icon-sun"></i>');
+ $("#toggle-dark-mobile").html('<i class="iconfont icon-sun"></i>');
+ $("body").removeClass("body-dark");
+ $("body").removeClass("body-sepia");
+ alertSend("已切换日间模式");
+ }
}
//auto dark theme
-var whetherDark = getCookie("darkTheme");
+var whatTheme = getCookie("theme");
var schemeGeter = window.matchMedia ("(prefers-color-scheme: dark)");
-if (whetherDark == "on" || schemeGeter.matches) {
+if (whatTheme == "2" || schemeGeter.matches) {
$("body").addClass("body-dark");
- $("#toggle-dark-button").html('<i class="iconfont icon-sun"></i>');
- $("#toggle-dark-mobile").html('<i class="iconfont icon-sun"></i>');
- alertSend("检测到您上次使用深色模式，已自动切换");
+ $("#toggle-dark-button").html('<i class="iconfont icon-moon"></i>');
+ $("#toggle-dark-mobile").html('<i class="iconfont icon-moon"></i>');
+ alertSend("检测到您使用深色模式，已自动切换");
+ theme="2";
}
+else if (whatTheme == "1") {
+ $("#toggle-dark-button").html('<i class="iconfont icon-sunset"></i>');
+ $("#toggle-dark-mobile").html('<i class="iconfont icon-sunset"></i>');
+ $("body").addClass("body-sepia");
+ alertSend("检测到您使用日落模式，已自动切换");
+ theme="1";
+}
//支持系统深色模式
function swDarkMode(scheme){
if(scheme.matches) {
diff --git a/includes/head.php b/includes/head.php index 3451eb1..f82c4c6 100644 --- a/includes/head.php +++ b/includes/head.php @@ -48,7 +48,7 @@ generate_require($css_files,"css",$this->options->CDN?"https://cdn.jsdelivr.net/gh/BigCoke233/miracles@":""); ?> <!-- icon font --> - <link rel="stylesheet" href="//at.alicdn.com/t/font_1165190_4ff54hxh485.css" /> + <link rel="stylesheet" href="//at.alicdn.com/t/font_1165190_7yb5y6gsyc.css" /> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:300|Noto+Serif+SC&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 7fd9976..75cdb2f 100644 --- a/includes/header.php +++ b/includes/header.php @@ -84,7 +84,7 @@ </p> <button class="nav-icon-button search-button" id="search-open-button"><i class="iconfont icon-chaxun"></i></button> <button class="nav-icon-button login-button" id="login-open"><i class="iconfont icon-user"></i></button> - <button class="nav-icon-button setting-button" id="toggle-dark-button"><i class="iconfont icon-moon"></i></button> + <button class="nav-icon-button setting-button" id="toggle-dark-button"><i class="iconfont icon-sun"></i></button> </div> </nav> <?php elseif($this->options->navStyle==1): ?> @@ -113,7 +113,7 @@ <div class="drawer-footer"> <button class="drawer-icon" id="search-open-button"><i class="iconfont icon-chaxun"></i></button> <button class="drawer-icon" id="login-open"><i class="iconfont icon-user"></i></button> - <button class="drawer-icon" id="toggle-dark-button"><i class="iconfont icon-moon"></i></button> + <button class="drawer-icon" id="toggle-dark-button"><i class="iconfont icon-sun"></i></button> </div> </div></nav> <?php endif;?> @@ -164,5 +164,4 @@ </div> </div> </div> - </header> - <br><br><br>
\ No newline at end of file + </header>
\ No newline at end of file |