wenyongda/vhAstro-Theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

正式版1.0✅

Browse Source
This commit is contained in:
Han
2025-03-02 18:38:46 +08:00
parent 60f5296dcb
commit e7117f0903
52 changed files with 794 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/Article.less
+81 -8
View File
@@ -43,6 +43,16 @@ section.vh-container {
&>time {
color: #9A9A9A;
}
&>span {
&.count {
color: #3FA67F;
}
&.time {
color: #E9B740;
}
}
}
}
}
@@ -111,6 +121,7 @@ section.vh-container {
height: max-content;
}
// 文章内容样式开始=========================
h1,
h2,
@@ -169,8 +180,8 @@ section.vh-container {
// p标签样式
// ul标签样式
p,
ul,
ol {
ul:not(.vh-vhMusic ul),
ol:not(.vh-vhMusic ol) {
margin: 0;
padding: 0.618rem 0;
font-size: 0.9375rem;
@@ -200,9 +211,25 @@ section.vh-container {
}
}
ul,
ol {
ul:not(.vh-vhMusic ul),
ol:not(.vh-vhMusic ol) {
box-sizing: border-box;
padding-left: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
blockquote {
padding: 0.188rem 0.58rem;
border-left: 5px solid #eee;
border-left-color: #929292;
background: #f3f5f7;
&>p {
font-size: 0.875rem;
font-weight: 500;
}
}
/* 全局表格样式 */
@@ -223,7 +250,7 @@ section.vh-container {
}
th {
text-align: left;
text-align: center;
background-color: #f8f9fa;
padding: 0.75rem;
border-bottom: solid 1px #EEEEEE;
@@ -281,6 +308,40 @@ section.vh-container {
border-radius: 3px;
background: #f7f7f7;
&.note-success {
border-color: #01C4B6;
border-left: 5px solid #01C4B6;
border-left-color: #01C4B6;
background: #01C4B618;
}
&.note-info {
border-color: #3253b4;
border-left: 5px solid #3253b4;
border-left-color: #3253b4;
background: #3253b418;
}
&.note-warning {
border-color: #DD8636;
border-left: 5px solid #DD8636;
border-left-color: #DD8636;
background: #DD863618;
}
&.note-error {
border-color: #DE3C3D;
border-left: 5px solid #DE3C3D;
border-left-color: #DE3C3D;
background: #DE3C3D18;
}
&.note-import {
border-left: 5px solid #B984DF;
border-left-color: #B984DF;
background: #B984DF18;
}
p {
font-size: 0.875rem;
line-height: 2;
@@ -363,14 +424,14 @@ section.vh-container {
}
&.btn-info {
border-color: #3275B4;
border-color: #3253b4;
&>span {
color: #3275B4;
color: #3253b4;
}
&::before {
background-color: #3275B4;
background-color: #3253b4;
}
}
@@ -397,6 +458,18 @@ section.vh-container {
background-color: #DE3C3D;
}
}
&.btn-import {
border-color: #B984DF;
&>span {
color: #B984DF;
}
&::before {
background-color: #B984DF;
}
}
}
// :::picture
src/styles/Base.less
+162 -41
View File
@@ -1,7 +1,6 @@
@import url('/assets/font/index.css');
:root {
--vh-animation-delay: 0ms;
--vh-padding-top: calc(66px + 1rem);
--vh-main-max-width: 1388px;
--vh-back-top: calc((calc(100vw - 2rem) - min((100vw - 2rem), var(--vh-main-max-width))) / 2 + 1rem);
@@ -18,6 +17,11 @@ blockquote {
margin: 0;
padding: 0;
color: #333;
text-decoration: none;
}
span {
text-decoration: none !important;
}
p {
@@ -41,15 +45,12 @@ code {
font-weight: normal;
}
ul,
ol {
display: flex;
flex-direction: column;
gap: 0.5rem;
img {
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
* {
// IOS 点击阴影
-webkit-tap-highlight-color: transparent;
@@ -103,26 +104,6 @@ html {
}
}
// 动画效果
.vh-animation {
opacity: 0;
animation: 300ms fade-in-up;
animation-fill-mode: forwards;
}
@keyframes fade-in-up {
0% {
transform: translateY(2rem);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
// 设置图片懒加载样式
main>.vh-container {
img[data-vh-lz-src] {
@@ -134,23 +115,163 @@ main>.vh-container {
}
}
// 加载进度条样式
#nprogress {
.bar {
height: 0.28rem !important;
background: #01C4B6 !important;
}
.peg {
box-shadow: 0 0 10px #01C4B6, 0 0 5px #01C4B6 !important;
}
}
@media screen and (max-width: 768px) {
// 手机端 禁止选择
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
// 首次加载效果
.vh-animation.vh-animation-init {
opacity: 0;
animation: 300ms vh-init-show;
animation-fill-mode: forwards;
transition: opacity 0.16s ease-in-out, transform 0.16s ease-in-out;
}
// swup 动画效果
html.swup-enabled,
html.is-changing {
.vh-animation {
&.vh-animation-init {
transform: translateY(0);
opacity: 1;
animation: none;
}
}
}
html.is-animating {
.vh-animation {
&.vh-animation-init {
transform: translateY(0.88rem);
opacity: 0;
}
}
}
// 占位加载
.vh-space-loading {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
grid-column: span 3;
width: 100%;
height: 8.88rem;
overflow: hidden;
&.white {
background: #fff;
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
}
&>span {
background: #000;
position: relative;
width: 5px;
height: 5px;
margin: 3px;
border-radius: 5px;
&:nth-of-type(1) {
-webkit-animation: scale .8s ease infinite;
animation: vh-loading-animation .8s ease infinite
}
&:nth-of-type(2) {
-webkit-animation: scale .8s ease .2s infinite;
animation: vh-loading-animation .8s ease .2s infinite
}
&:nth-of-type(3) {
-webkit-animation: scale .8s ease .4s infinite;
animation: vh-loading-animation .8s ease .4s infinite
}
}
}
// 谷歌广告模块
.vh-ad {
position: relative;
display: block;
width: 100%;
height: max-content;
min-height: 5.88rem;
overflow: hidden !important;
z-index: 1;
&.vh-article-ad {
box-sizing: border-box;
padding: 0.75rem;
margin-top: 1rem;
border-radius: 0.5rem;
background: #fff;
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
overflow: hidden;
&::before {
top: 50%;
}
}
&::before {
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -50%);
content: '广告加载中...';
color: #e3e4e6;
z-index: -1;
}
}
@keyframes vh-init-show {
0% {
transform: translateY(2rem);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes vh-loading-animation {
50% {
height: 25px
}
0% {
height: 5px
}
}
@-webkit-keyframes vh-init-show {
0% {
transform: translateY(2rem);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@-webkit-keyframes vh-loading-animation {
50% {
height: 25px
}
0% {
height: 5px
}
}
src/styles/Talking.less
+12 -9
View File
@@ -108,32 +108,35 @@
}
&>footer {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
gap: 0.58rem;
width: 100%;
&>span {
box-sizing: border-box;
padding: 0 0.5rem;
padding: 0.28rem 0.68rem;
display: flex;
align-items: center;
height: 1.68rem;
width: max-content;
line-height: 1.46rem;
border: 1px solid #49b1f5;
border-radius: 2rem;
color: #49b1f5;
border: 1px solid #3253b4;
border-radius: 0.88rem;
background-color: #fff;
font-size: 0.72rem;
color: #3253b4;
transition: all .2s ease-in-out;
user-select: none;
cursor: pointer;
&:hover {
animation: talking-tag-active 0.16s ease-in-out infinite;
color: #fff;
background-color: #49b1f5;
}
}
}
}
}
}
src/styles/components/ArticleCard.less
+18 -3
View File
@@ -3,7 +3,7 @@ section.article-list {
position: relative;
padding-bottom: 6rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
grid-template-columns: repeat(3, 1fr);
gap: 1.6rem;
width: 100%;
height: max-content;
@@ -12,7 +12,8 @@ section.article-list {
&>.vh-article-item {
box-sizing: border-box;
width: 100%;
height: 100%;
height: initial;
min-height: max-content;
border: solid 1px #eee;
border-radius: 1rem;
background: #fff;
@@ -23,7 +24,8 @@ section.article-list {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
height: max-content;
min-height: 100%;
border-radius: 0.618rem;
overflow: hidden;
transition: background 0.16s;
@@ -53,6 +55,7 @@ section.article-list {
&>.vh-article-desc {
flex: 1;
box-sizing: border-box;
padding: 1.25rem;
display: flex;
@@ -164,4 +167,16 @@ section.article-list {
bottom: 0;
right: 0;
}
}
@media screen and (max-width: 1150px) {
section.article-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 556px) {
section.article-list {
grid-template-columns: repeat(1, 1fr);
}
}
src/styles/components/Aside.less
+54 -81
View File
@@ -1,15 +1,24 @@
aside.vh-aside {
flex-shrink: 0;
position: sticky;
top: var(--vh-padding-top);
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 1rem;
width: 288px;
height: max-content;
height: initial;
&>.vh-aside-item {
&>.sticky-aside {
position: sticky;
top: var(--vh-padding-top);
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
height: max-content;
}
.vh-aside-item {
box-sizing: border-box;
padding: 0.75rem;
display: flex;
@@ -17,6 +26,7 @@ aside.vh-aside {
align-items: center;
gap: 0.75rem;
width: 100%;
max-width: 100%;
height: max-content;
border-radius: 1rem;
background: #fff;
@@ -24,7 +34,6 @@ aside.vh-aside {
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
overflow: hidden;
&>h3 {
padding-bottom: 0.618rem;
display: flex;
@@ -50,45 +59,9 @@ aside.vh-aside {
&>.vh-aside-avatar {
position: relative;
width: 6.36rem;
aspect-ratio: 1/1;
height: 6.36rem;
border-radius: 1rem;
cursor: pointer;
overflow: hidden;
&:hover {
&>img {
opacity: 0;
transform: translate(-50%, -100%);
}
&>svg {
opacity: 1;
transform: translate(-50%, -50%);
}
}
&>img,
&>svg {
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.28s, opacity 0.18s;
}
&>img {
transform: translate(-50%, -50%);
opacity: 1;
}
&>svg {
width: 60%;
height: 60%;
transform: translate(-50%, 100%);
opacity: 0;
}
}
&>.vh-aside-auther {
@@ -211,7 +184,45 @@ aside.vh-aside {
}
}
// 最新文章
// 标签
&.tags {
&>.vh-aside-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
width: 100%;
height: max-content;
overflow: hidden;
&>a {
width: max-content;
height: max-content;
&:hover {
&>span {
background: #EDEEF3;
}
}
&>span {
display: block;
box-sizing: border-box;
padding: 0 0.618rem;
width: max-content;
height: 1.75rem;
border-radius: 0.38rem;
background: #EDEEF388;
font-size: 0.875rem;
font-style: normal;
line-height: 1.75rem;
transition: background 0.16s ease-in-out;
overflow: hidden;
}
}
}
}
// 推荐文章
&.articles {
&>.vh-aside-articles {
display: flex;
@@ -293,44 +304,6 @@ aside.vh-aside {
}
}
}
// 标签
&.tags {
&>.vh-aside-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
width: 100%;
height: max-content;
overflow: hidden;
&>a {
width: max-content;
height: max-content;
&:hover {
&>span {
background: #EDEEF3;
}
}
&>span {
display: block;
box-sizing: border-box;
padding: 0 0.618rem;
width: max-content;
height: 1.75rem;
border-radius: 0.38rem;
background: #EDEEF388;
font-size: 0.875rem;
font-style: normal;
line-height: 1.75rem;
transition: background 0.16s ease-in-out;
overflow: hidden;
}
}
}
}
}
}
src/styles/components/Comment.less
+4 -2
View File
@@ -45,10 +45,10 @@
}
p {
padding: 0.38rem 0;
color: #4c4948;
font-weight: 400;
font-size: 0.875rem;
line-height: 28px;
a {
box-shadow: inset 0 -.12em #60a5fa;
@@ -234,8 +234,10 @@
// 内容
.tk-content {
margin: 0;
p {
margin: 0;
padding: 0.18rem 0;
}
img {