🎁 Perf: 细节调整 + 新的样式（←好草率的日志）

7 files changed, 83 insertions, 38 deletions

diff --git a/assets/css/main/component.css b/assets/css/main/component.css
index 7385789..6cca92c 100644
--- a/assets/css/main/component.css
+++ b/assets/css/main/component.css
@@ -106,10 +106,6 @@ button {
 	bottom: 8px;

 	background: #fff!important;

 	color: rgb(80,80,80)!important;

-	opacity: 1;

-}

-.gotop-button.invisible {

-	opacity: 0;

 }

 /* Bubble */

 .bubble {

diff --git a/assets/css/main/dark.css b/assets/css/main/dark.css
index a6fbc34..05422f5 100644
--- a/assets/css/main/dark.css
+++ b/assets/css/main/dark.css
@@ -28,7 +28,7 @@
 	background:#6e6e6e

 }

 .body-dark .post-content hr {

-	background:#787878

+	border: 3px dashed #787878!important

 }

 /* Pio Plugin */

 .body-dark .pio-container .pio-dialog {

@@ -79,7 +79,7 @@
 }

 /* Nav/Search/login */

 .body-dark .nav {

-	background:rgba(50,50,50,.9)!important;

+	background:rgba(50,50,50,.86)!important;

 	box-shadow:0 0 20px #000;

 	-webkit-box-shadow:0 0 20px #000;

 	-moz-box-shadow:0 0 30px #000

@@ -198,8 +198,9 @@
 }

 /* Need #6e6e6e bg */

 .body-dark .OwO-bar,

-.body-dark .OwO-item {

-	background:#6e6e6e!important

+.body-dark .OwO-item,

+.body-dark .index-banner {

+	background-color:#6e6e6e!important

 }

 /* Need white fonts */

 .body-dark .OwO-bar,

@@ -236,7 +237,8 @@
 .body-dark .search-close,

 .body-dark .search-form button,

 .body-darl .login a,

-.body-dark .alert {

+.body-dark .alert,

+.body-dark .banner-content.banner-font-black {

 	color:#fafafa!important

 }

 .body-dark .options-theme-label {

diff --git a/assets/css/main/miracles.min.css b/assets/css/main/miracles.min.css
index bea8c27..b93573f 100644
--- a/assets/css/main/miracles.min.css
+++ b/assets/css/main/miracles.min.css
@@ -19,7 +19,7 @@
 /* Varriable */

 :root {

 	--theme-color: #4D90FE;

-	--shadow-color: rgb(150,150,150);

+	--shadow-color: rgb(180,180,180);

 }

 

 /* ScrollBar */

diff --git a/assets/css/main/nav.css b/assets/css/main/nav.css
index 4304a44..64e5321 100644
--- a/assets/css/main/nav.css
+++ b/assets/css/main/nav.css
@@ -6,7 +6,9 @@
  */

 /* Top Nav */

 .nav {

-	background: rgba(255,255,255,0.96);

+	background: rgba(255,255,255,0.86);

+	backdrop-filter: blur(18px);

+	-webkit-backdrop-filter: blur(10px);

 	width: 100%;

 	position: absolute;

 	box-shadow: 0 0 20px #ddd;

@@ -39,7 +41,9 @@
 .nav-mobile-content a:hover,

 .nav-mobile-content button:hover,

 .nav-sorts-content {

-	background: #f0f0f0

+	background: rgba(200,200,200,0.15);

+	backdrop-filter: blur(18px);

+	-webkit-backdrop-filter: blur(18px);

 }

 .nav-title {

 	color: #000;

@@ -93,7 +97,7 @@
 	top: 0;

 	bottom: 0;

 	z-index: 30;

-	transition: all 0.8s;

+	transition: all 0.4s!important;

 	box-shadow: 0 0 30px #646464;

 	-moz-box-shadow: 0 0 30px #646464;

 	-webkit-box-shadow: 0 0 30px #646464;

diff --git a/assets/css/main/page.css b/assets/css/main/page.css
index 390e480..8d3bb64 100644
--- a/assets/css/main/page.css
+++ b/assets/css/main/page.css
@@ -52,7 +52,8 @@
 }

 .tags-item {

 	position: relative;

-	display: inline-block

+	display: inline-block;

+    margin-top: 10px;

 }

 /* Archives 归档 */

 .archives-list {

@@ -63,7 +64,12 @@
 	display: block;

 	border-radius: 3px;

 	transition: background .2s;

-	padding: 6px 10px

+	padding: 6px 10px;

+	white-space:nowrap;

+	width: 100%;

+	overflow: hidden;

+    text-overflow:ellipsis;

+    white-space: nowrap;

 }

 .archives-list a:hover {

 	background: #e6e6e6

diff --git a/assets/css/main/post.css b/assets/css/main/post.css
index 3e01e38..0eab08a 100644
--- a/assets/css/main/post.css
+++ b/assets/css/main/post.css
@@ -10,6 +10,9 @@
 	margin-top: -110px;

 	transition: .8s;

 }

+.post-item {

+	margin-bottom: 10px;

+}

 .post-body,.post-item {

 	background: #fff;

 	box-shadow: 0 0 36px var(--shadow-color);

@@ -19,13 +22,12 @@
 }

 .post-banner-box {

 	margin-left: -15px;

-	margin-bottom: -2px;

-	height: 280px;

+	height: 100%;

 	overflow: hidden

 }

 .post-banner img {

 	width: 100%;

-	height: 280px;

+	height: 100%;

 	margin-right: -40px

 }

 .post-title {

@@ -68,18 +70,24 @@
 /* >文章内容 */

 .post-content {

 	padding: 26px;

-	font-size: 18px;

 	line-height: 28px;

 	letter-spacing: 2px;

 	word-break: break-all

 }

+.post-content h2 {

+	margin: 60px 0;

+	margin-bottom: 10px;

+}

+.post-content h3:before {

+	content: '# ';

+	color: var(--theme-color);

+	font-weight: bold;

+}

 .post-content hr {

 	display: block;

-	margin: 80px auto;

-	width: 150px;

-	background: #f0f0f0;

-	height: 5px;

-	border: none

+	margin: 65px auto;

+	width: 250px;

+	border: 3px dashed #f0f0f0

 }

 .post-content code {

 	font-size: 0.8em;

@@ -96,12 +104,9 @@
 }

 .post-content img {

 	display: block;

-	margin: 20px auto;

+	margin: 25px auto;

 	border-radius: 3px;

-	box-shadow: 0 4px 20px #ccc;

-	-moz-box-shadow: 0 4px 20px #ccc;

-	-webkit-box-shadow: 0 4px 20px #ccc;

-	max-width: 90%

+	max-width: 100%

 }

 .post-content blockquote p {

 	margin: 0

@@ -131,12 +136,13 @@
 }

 .post-content a:not(.no-line) {

 	position: relative;

-	color: var(--theme-color)

+	color: var(--theme-color);

+	border-bottom: 2px solid #f0f0f0;

 }

 .post-content a:not(.no-line)::before {

 	content: '';

 	position: absolute;

-	bottom: 0;

+	bottom: -2px;

 	left: 0;

 	right: 0;

 	height: 2px;

@@ -147,14 +153,16 @@
 }

 .post-content a:not(.no-line):hover::before {

 	transform-origin: bottom left;

-	transform: scaleX(1)

+	transform: scaleX(1);

 }

 .post-content p {

 	vertical-align: middle;

 }

 .post-content ul ul,

-.post-content ol ol {

-	margin-top: 0;

+.post-content ol ol,

+.post-content ol ul,

+.post-content ul ol {

+	margin-top: -15px;

 }

 .post-content .owo-img {

 	box-shadow: 0 0 0 #fff;

@@ -209,7 +217,7 @@
 

 /* >短代码 */

 .tip {

-	border: 1px solid rgb(240,240,240);

+	border: 1px solid rgb(235,235,235);

 	border-radius: 3px;

 	padding: 15px;

 	border-left: 5px solid var(--theme-color);

@@ -241,9 +249,24 @@
 .tip.yellow .tip-icon {

 	color: #FFDD11;

 }

+.tip-group {

+	margin: 15px 0;

+}

+.tip-group .tip {

+	margin: 0;

+	margin-top: -1px;

+	border-radius: 0;

+}

+.tip-group br {

+	display: none;

+}

+.tip-group .tip br {

+	display: block;

+}

 .post-bubble .saying-content p {

 	padding: 0 20px!important;

 }

+

 /* >文章分页 */

 .post-pagenav,

 .comment-pagenav {

diff --git a/assets/css/main/special.css b/assets/css/main/special.css
index 4f1c393..6b3c342 100644
--- a/assets/css/main/special.css
+++ b/assets/css/main/special.css
@@ -7,6 +7,7 @@
 /* Index Banner */

 .index-banner {

 	width: 100%;

+	min-height: 50vh;

 	text-align: center;

 	background-size: cover;

     background-repeat: no-repeat;

@@ -33,9 +34,16 @@
 .banner-content p {

 	margin-top: 10px

 }

+.banner-font-black,

+.banner-font-black a {

+	color: black!important;

+}

 

 /* Options Pannel */

 .options {

+	backdrop-filter: blur(18px);

+	-webkit-backdrop-filter: blur(18px);

+	background: rgba(255,255,255,0.86);

 	transition: all 0.3s;

 	background: #fff;

 	border-radius: 2px;

@@ -152,12 +160,12 @@
 }

 /* - For Footer */

 .body-contentsize-small .footer-info {

-	font-size: 14px;

+	font-size: 15px;

 	line-height: 18px;

 }

 

 .body-contentsize-normal .footer-info {

-	font-size: 16px;

+	font-size: 17px;

 }

 

 .body-contentsize-big .footer-info {

@@ -191,6 +199,12 @@
 .footer-info a:hover {

 	opacity: .9

 }

+/* Shadow */

+.no-shadow {

+	box-shadow: 0 0 0 #000!important;

+	-webkit-box-shadow: 0 0 0 #000!important;

+	-moz-box-shadow: 0 0 0 #000!important;

+}

 /* Header Meta */

 .header-meta a {

 	color: #fff;

@@ -229,4 +243,4 @@ iframe[src*="//player.bilibili.com/player.html"] {
 }

 .fadein {

 	opacity: 1;

-}

+}
\ No newline at end of file