后台样式、支持主题备份、支持 CDN 加速静态资源、个性化设置

BigCoke233 · Jul 21, 2019 · 1fc5a93 · 1fc5a93
1 parent 0b4a6fa
commit 1fc5a93
Show file tree

Hide file tree

Showing 8 changed files with 385 additions and 20 deletions.
diff --git a/assets/css/dark.miracles.css b/assets/css/dark.miracles.css
@@ -173,7 +173,8 @@
 	filter: brightness(90%);
 }
 .body-dark .post-banner,
-.body-dark iframe {
+.body-dark iframe,
+.body-dark .aplayer-pic {
 	filter: brightness(75%);
 }
 /* Need Transparent dark background */
@@ -192,4 +193,40 @@
 }
 .body-dark .pio-action span {
 	background-color: rgba(90,90,90,.9)
+}
+/* Meting Plugin in dark theme */
+.body-dark .aplayer,
+.body-dark .aplayer-list-index,
+.body-dark .aplayer-list-author,
+.body-dark .aplayer .aplayer-icon,
+.body-dark .aplayer .aplayer-lrc-contents p,
+.body-dark .aplayer .aplayer-controller,
+.body-dark .aplayer .aplayer-info,
+.body-dark .aplayer .aplayer-author {
+    color: rgb(240,240,240)!important;
+}
+.body-dark .aplayer {
+	background: rgb(100,100,100);
+}
+.body-dark .aplayer-list-light,
+.body-dark .aplayer .aplayer-list ol li:hover {
+    background: rgb(140,140,140)!important;
+}
+.body-dark .aplayer .aplayer-lrc:before,
+.body-dark .aplayer .aplayer-lrc:after {
+    background: transparent;
+    background: transparent;
+    filter: none;
+}
+.body-dark .aplayer .aplayer-list ol li {
+	border-color: rgb(120,120,120);
+}
+.body-dark .aplayer-list::-webkit-scrollbar {
+	background: rgb(110,110,110)!important;
+}
+.body-dark .aplayer-list::-webkit-scrollbar-thumb {
+	background: rgb(80,80,80);
+}
+.body-dark .aplayer-info {
+	border: none;
 }
diff --git a/assets/css/miracles.min.css b/assets/css/miracles.min.css
@@ -28,6 +28,9 @@ body,html {
 	transition: background 0.2s;
 	width: 100%;
 }
+body {
+	font-family: 'Noto Sans SC',sans-serif
+}
 hr {
 	border: none;
 	border-bottom: 1px solid #ccc;
@@ -62,9 +65,6 @@ hr {
 	filter: grayscale(100%);
 	-webkit-filter: grayscale(100%);
 }
-.body-sans-serif {
-	font-family: 'Noto Sans SC',sans-serif
-}
 .body-serif {
 	font-family: 'Noto Serif SC',serif
 }
@@ -764,7 +764,7 @@ hr {
 }
 .comment-content p {
 	color: #000;
-	font-size: 22px;
+	font-size: 16px;
 	word-break: break-all;
 	vertical-align: center;
 	padding: 10px 16px;
@@ -1002,6 +1002,10 @@ iframe[src*="//player.bilibili.com/player.html"] {
 }
 /* > Pad and up */
 @media (min-width:768px) {
+	.comment-content p {
+		font-size: 18px;
+	}
+
 	.nav-content a {
 		font-size: 19px;
 		padding: 27.5px 8px
@@ -1078,6 +1082,10 @@ iframe[src*="//player.bilibili.com/player.html"] {
 }
 /* Desktop and up */
 @media (min-width:992px) {
+	.comment-content p {
+		font-size: 19px;
+	}
+
 	.nav-content a {
 		font-size: 20px;
 		padding: 28px 8px
@@ -1159,6 +1167,10 @@ iframe[src*="//player.bilibili.com/player.html"] {
 }
 /* Computer screen and up */
 @media (min-width:1200px) {
+	.comment-content p {
+		font-size: 21px;
+	}
+
 	.nav-content a {
 		font-size: 20px;
 		padding: 28px 8px

diff --git a/assets/css/setting.miracles.css b/assets/css/setting.miracles.css
@@ -0,0 +1,183 @@
+@charset 'utf-8';
+
+/*
+ * Setting style for Miracles
+ * Author:  Eltrac
+ * Lisence: MIT
+ */
+
+/* 全局样式 */
+:root {
+	--theme-color: #4D90FE;
+}
+
+body {
+	width: 100%;
+	background: rgb(252,252,252);
+	font-family: 'Noto Sans SC',sans-serif
+}
+
+hr {
+	border: none;
+	border-bottom: 1px solid rgb(220,220,220);
+	margin: 30px 0;
+}
+
+/* 面板 */
+.miracles-pannel {
+	background: rgba(90,90,90,0.8);
+	border-radius: 5px;
+	padding: 28px 30px;
+	margin: 40px 0;
+	margin-top: 10px;
+	color: #fff;
+	box-shadow: 0 2px 8px #ddd;
+	-moz-box-shadow: 0 2px 8px #ddd;
+    -webkit-box-shadow: 0 2px 8px #ddd;
+}
+.miracles-pannel a {
+	color: rgb(250,250,250);
+	position: relative;
+}
+.miracles-pannel a:hover {
+	text-decoration: none;
+}
+.miracles-pannel a::before {
+	content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background-color: rgb(250,250,250);
+    transform-origin: bottom right;
+    transform: scaleX(0);
+    transition: transform 0.5s ease;
+}
+.miracles-pannel a:hover::before {
+	transform-origin: bottom left;
+    transform: scaleX(1);
+}
+
+/* Backup */
+.miracles-backup-alert {
+	transition: all .2s;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	padding: 15px 0;
+	background: #4D90FE;
+	text-align: center;
+}
+.miracles-backup-alert,
+.miracles-backup-alert a {
+	color: #fff;
+}
+.miracles-backup-button {
+	margin: 15px 0;
+	margin-bottom: 0;
+	padding: 6px 10px;
+	border-radius: 2px;
+	color: #fff;
+	background: rgb(100,100,100);
+	box-shadow: 0 1px 1px #000;
+	-moz-box-shadow: 0 1px 1px #000;
+    -webkit-box-shadow: 0 1px 1px #000;
+	border: none;
+}
+
+/* Para */
+.miracles-para-attention {
+	padding: 10px 12px;
+	background: red;
+	color: #fff;
+	border-radius: 3px;
+}
+
+/* 滚动条 */
+::-webkit-scrollbar {
+	width: 6px;
+	height: 5px
+}
+::-webkit-scrollbar-button {
+	display: none
+}
+::-webkit-scrollbar-thumb {
+	background: gray;
+}
+
+/* 覆盖原有样式 */
+.typecho-head-nav {
+	box-shadow: 0 0 30px #ddd;
+	-moz-box-shadow: 0 0 30px #ddd;
+	-webkit-box-shadow: 0 0 30px #ddd;
+	padding: 15px 0;
+	font-size: 15px;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+}
+
+.typecho-page-title {
+	visibility: hidden;
+	margin-top: 90px;
+}
+
+.typecho-option li input,
+.typecho-option li textarea,
+.typecho-option li select,
+.typecho-option .btn {
+	border-radius: 4px;
+	background: #fff;
+	padding: 10px 12px;
+	box-shadow: 0 1px 5px #ddd;
+	-moz-box-shadow: 0 1px 5px #ddd;
+    -webkit-box-shadow: 0 1px 5px #ddd;
+	border-color: #ddd;
+}
+
+.typecho-option li select {
+	padding: 0 4px;
+	min-width: 100px;
+}
+
+.typecho-option li textarea {
+	resize: none;
+	height: 160px!important;
+}
+
+.typecho-option li .typecho-label {
+	font-size: 15px;
+	letter-spacing: 1px;
+	margin: 15px 0;
+	margin-top: 20px;
+}
+
+.typecho-option .btn {
+	display: block;
+	width: 100%;
+	margin: 25px 0;
+	height: 50px;
+	text-align: center;
+	background: var(--theme-color);;
+	font-size: 18px;
+}	
+
+/* Media */
+@media (min-width:768px) {
+    .typecho-option-tabs {
+		margin-left: 122px;
+	}
+}
+@media (min-width:992px) {
+	.typecho-option-tabs {
+		margin-left: 160px;
+	}
+}
+@media (min-width:1200px) {
+	.typecho-option-tabs {
+		margin-left: 194px;
+	}
+}
diff --git a/assets/js/miracles.min.js b/assets/js/miracles.min.js
@@ -68,7 +68,7 @@ function owoLoad() {
 }
 //pjax-loader
 if(loadPjax = true) {
-  $(document).pjax('a[href^="'+siteurl+'"]:not(a[target="_blank"], a[no-pjax])', {
+  $(document).pjax('a[href^="'+siteurl+'"]:not(a[target="_blank"], a[no-pjax], .comment-reply a, .cancel-comment-reply a)', {
     container: '#pjax-container',fragment: '#pjax-container',timeout: 8000
   }).on('pjax:send', function () {
 	GoTop();

diff --git a/includes/comments.php b/includes/comments.php
@@ -26,7 +26,9 @@
       </div>
 	  <div class="comment-main comment-author-info col-md-11">
 		<div class="comment-content bubble">
-		  <span class="comment-reply"><?php $comments->reply('<i class="iconfont icon-return"></i>'); ?></span>
+		  <span class="comment-reply">
+		    <?php $comments->reply('<i class="iconfont icon-return"></i>'); ?>
+		  </span>
 	      <?php $comments->content(); ?>
 	    </div>
 		<p class="comment-meta">
@@ -82,7 +84,7 @@
 <!-- 如果当前用户已经登录 -->
             <?php if($this->user->hasLogin()): ?>
 <!-- 显示当前登录用户的用户名以及登出连接 -->
-            <p><?php _e('登录身份: '); ?><a href="<?php $this->options->profileUrl(); ?>"><?php $this->user->screenName(); ?></a>. <a href="<?php $this->options->logoutUrl(); ?>" title="Logout"><?php _e('退出'); ?> &raquo;</a></p>
+            <p class="col-md-12"><?php _e('登录身份: '); ?><a href="<?php $this->options->profileUrl(); ?>"><?php $this->user->screenName(); ?></a>. <a href="<?php $this->options->logoutUrl(); ?>" title="Logout"><?php _e('退出'); ?> &raquo;</a></p>
 <!-- 若当前用户未登录 -->
             <?php else: ?>
 <!-- 要求输入名字、邮箱、网址 -->

diff --git a/includes/footer.php b/includes/footer.php
@@ -14,13 +14,23 @@
 	  <button onclick="Dark()" title="护眼模式" class="dark-button"><i class="iconfont icon-envira"></i></button>
 	</div>
 	<!-- JavaScript -->
+	<?php if($this->options->CDN && $this->options->CDN=1): ?>
+	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/js/jquery.js"></script>
+	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/js/pjax.jquery.js"></script>
+	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/js/jquery.fancybox.js"></script>
+	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/js/jquery.lazyload.js"></script>
+	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/js/nprogress.js"></script>
+	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/js/OwO.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/gh/BigCoke233/miracles@<?php themeVersion(); ?>/assets/js/prism.js"></script>
+	<?php else: ?>
     <script src="<?php Utils::indexTheme('assets/js/jquery.js'); ?>"></script>
 	<script src="<?php Utils::indexTheme('assets/js/pjax.jquery.js'); ?>"></script>
 	<script src="<?php Utils::indexTheme('assets/js/jquery.fancybox.js'); ?>"></script>
 	<script src="<?php Utils::indexTheme('assets/js/jquery.lazyload.min.js'); ?>"></script>
 	<script src="<?php Utils::indexTheme('assets/js/nprogress.js'); ?>"></script>
 	<script src="<?php Utils::indexTheme('assets/js/OwO.min.js'); ?>"></script>
 	<script src="<?php Utils::indexTheme('assets/js/prism.js'); ?>"></script>
+	<?php endif; ?>
 	<script>var siteurl = '<?php $this->options->SiteUrl() ;?>';
 	var owoJson = '<?php Utils::indexTheme('assets/OwO.json'); ?>';
 	<?php if($this->options->pjax && $this->options->pjax!=0) :?>
@@ -30,5 +40,6 @@
 	<?php endif; ?></script>
 	<script src="<?php Utils::indexTheme('assets/js/miracles.min.js'); ?>"></script>
 	<script>LazyLoad();PrismLoad();owoLoad();<?php $this->options->jsEcho(); ?></script>
+	<?php $this->footer(); ?>
   </body>
 </html>