584 lines
14 KiB
Plaintext
584 lines
14 KiB
Plaintext
section.vh-container {
|
|
&>article.vh-article-main {
|
|
flex: 1;
|
|
padding: 1rem 0;
|
|
min-width: 0;
|
|
|
|
// 文章内容样式开始=========================
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
box-sizing: border-box;
|
|
margin: 1.188rem 0 0.36rem;
|
|
font-size: 1rem;
|
|
width: max-content;
|
|
max-width: 100%;
|
|
word-break: break-all;
|
|
|
|
&:hover {
|
|
&::before {
|
|
color: #60a5fa7f;
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
padding-right: 0.56rem;
|
|
content: "#";
|
|
color: #33333388;
|
|
transition: color 0.16s ease-in-out;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
padding-bottom: 1rem;
|
|
font-size: 1.58rem;
|
|
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
// p标签样式
|
|
// ul标签样式
|
|
p,
|
|
ul,
|
|
ol {
|
|
margin: 0.618rem 0;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
|
|
li {
|
|
color: #33333388;
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
// 其下面的 a 标签样式
|
|
a {
|
|
box-shadow: inset 0 -.12em #60a5fa;
|
|
transition: box-shadow .2s ease-in-out, color .2s ease-in-out;
|
|
|
|
&:hover {
|
|
box-shadow: inset 0 -1.5em #60a5fa7f
|
|
}
|
|
}
|
|
|
|
// 其下面的code标签样式
|
|
code {
|
|
background-color: #edeef3;
|
|
padding: .125rem .375rem;
|
|
font-size: 0.8125rem;
|
|
}
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
padding-left: 1.25rem;
|
|
}
|
|
|
|
/* 全局表格样式 */
|
|
table {
|
|
box-sizing: border-box;
|
|
margin: 1rem 0;
|
|
width: 100%;
|
|
// border-collapse: collapse;
|
|
border-spacing: 0;
|
|
font-size: 0.9rem;
|
|
background: #fff;
|
|
border: 1px solid #EEEEEE;
|
|
border-radius: 0.38rem;
|
|
overflow: hidden;
|
|
|
|
a {
|
|
color: #49B1F5;
|
|
}
|
|
|
|
th {
|
|
text-align: left;
|
|
background-color: #f8f9fa;
|
|
padding: 0.75rem;
|
|
border-bottom: solid 1px #EEEEEE;
|
|
border-right: solid 1px #EEEEEE;
|
|
|
|
&:nth-last-of-type(1) {
|
|
border-right: none;
|
|
}
|
|
}
|
|
|
|
td {
|
|
padding: 0.618rem 0.75rem;
|
|
vertical-align: top;
|
|
border-bottom: solid 1px #EEEEEE;
|
|
border-right: solid 1px #EEEEEE;
|
|
|
|
&:nth-last-of-type(1) {
|
|
border-right: none;
|
|
}
|
|
}
|
|
|
|
tr {
|
|
transition: background-color 0.16s ease-in-out;
|
|
|
|
&:nth-last-of-type(1) {
|
|
td {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: #f2f2f2;
|
|
}
|
|
}
|
|
}
|
|
|
|
&>header {
|
|
padding: 2rem 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
|
|
&>h1 {
|
|
width: 100%;
|
|
font-weight: 700;
|
|
}
|
|
|
|
&>.article-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.18rem;
|
|
font-size: 0.88rem;
|
|
|
|
&>.article-meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.56rem;
|
|
|
|
&>svg {
|
|
height: 0.86rem;
|
|
width: 0.86rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 自定义组件样式
|
|
.vh-node {
|
|
margin: 0.618rem 0;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: max-content;
|
|
overflow: hidden;
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
// :::note
|
|
&.vh-note {
|
|
padding: 0.888rem;
|
|
border-left: 5px solid #eee;
|
|
border-left-color: #777;
|
|
border-radius: 3px;
|
|
background: #f7f7f7;
|
|
|
|
p {
|
|
font-size: 0.875rem;
|
|
line-height: 2;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
// ::btn
|
|
&.vh-btn {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.618rem;
|
|
padding: 0 1.18rem;
|
|
width: max-content;
|
|
max-width: 100%;
|
|
height: 2.28rem;
|
|
border: solid 1px #333;
|
|
border-radius: 0.28rem;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
transition: background-color 0.18s ease-in-out;
|
|
z-index: 1;
|
|
user-select: none;
|
|
overflow: hidden;
|
|
|
|
&:hover {
|
|
&::after {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
&::before {
|
|
flex-shrink: 0;
|
|
content: '';
|
|
background-color: #000;
|
|
mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M364.2%2083.8c-24.4-24.4-64-24.4-88.4%200l-184%20184c-42.1%2042.1-42.1%20110.3%200%20152.4s110.3%2042.1%20152.4%200l152-152c10.9-10.9%2028.7-10.9%2039.6%200s10.9%2028.7%200%2039.6l-152%20152c-64%2064-167.6%2064-231.6%200s-64-167.6%200-231.6l184-184c46.3-46.3%20121.3-46.3%20167.6%200s46.3%20121.3%200%20167.6l-176%20176c-28.6%2028.6-75%2028.6-103.6%200s-28.6-75%200-103.6l144-144c10.9-10.9%2028.7-10.9%2039.6%200s10.9%2028.7%200%2039.6l-144%20144c-6.7%206.7-6.7%2017.7%200%2024.4s17.7%206.7%2024.4%200l176-176c24.4-24.4%2024.4-64%200-88.4z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
|
|
background-size: contain;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 0;
|
|
background: #EDEEF366;
|
|
transition: height 0.16s ease-in-out;
|
|
z-index: -1;
|
|
}
|
|
|
|
|
|
&>span {
|
|
box-sizing: border-box;
|
|
color: #000;
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
|
|
&.success {
|
|
border-color: #01C4B6;
|
|
|
|
&>span {
|
|
color: #01C4B6;
|
|
}
|
|
|
|
&::before {
|
|
background-color: #01C4B6;
|
|
}
|
|
}
|
|
|
|
&.info {
|
|
border-color: #3275B4;
|
|
|
|
&>span {
|
|
color: #3275B4;
|
|
}
|
|
|
|
&::before {
|
|
background-color: #3275B4;
|
|
}
|
|
}
|
|
|
|
&.warning {
|
|
border-color: #DD8636;
|
|
|
|
&>span {
|
|
color: #DD8636;
|
|
}
|
|
|
|
&::before {
|
|
background-color: #DD8636;
|
|
}
|
|
}
|
|
|
|
&.error {
|
|
border-color: #DE3C3D;
|
|
|
|
&>span {
|
|
color: #DE3C3D;
|
|
}
|
|
|
|
&::before {
|
|
background-color: #DE3C3D;
|
|
}
|
|
}
|
|
}
|
|
|
|
// :::picture
|
|
&.vh-picture {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
|
|
gap: .36rem;
|
|
|
|
// 其下面的图片
|
|
&>img.vh-article-img {
|
|
width: 100%;
|
|
aspect-ratio: 3 / 2;
|
|
border: solid 1px #E8E8E8;
|
|
border-radius: 5px;
|
|
object-fit: cover;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
// ::vhVideo
|
|
&.vh-vhVideo {
|
|
margin: 1.188rem 0;
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
border: solid 1px #E8E8E8;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// ::vhMusic
|
|
&.vh-vhMusic {
|
|
margin: 1.188rem 0;
|
|
width: 100%;
|
|
height: max-content;
|
|
min-height: 1rem;
|
|
|
|
&:not(.aplayer) {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
|
|
&::before {
|
|
content: '';
|
|
width: 1.66rem;
|
|
height: 1.66rem;
|
|
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M304%2048a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200zm0%20416a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200zM48%20304a48%2048%200%201%200%200-96%2048%2048%200%201%200%200%2096zm464-48a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200zM142.9%20437A48%2048%200%201%200%2075%20369.1%2048%2048%200%201%200%20142.9%20437zm0-294.2A48%2048%200%201%200%2075%2075a48%2048%200%201%200%2067.9%2067.9zM369.1%20437A48%2048%200%201%200%20437%20369.1%2048%2048%200%201%200%20369.1%20437z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
|
|
background-size: cover;
|
|
animation: vhRotate 1.66s linear infinite;
|
|
}
|
|
}
|
|
|
|
|
|
.aplayer-body {
|
|
.aplayer-info {
|
|
.aplayer-lrc {
|
|
.aplayer-lrc-contents {
|
|
p {
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 页面图片样式
|
|
img.vh-article-img {
|
|
box-sizing: border-box;
|
|
padding: .36rem;
|
|
width: max-content;
|
|
max-width: 100%;
|
|
max-height: 36rem;
|
|
border: solid 1px #E8E8E8;
|
|
border-radius: 5px;
|
|
cursor: zoom-in;
|
|
cursor: -moz-zoom-in;
|
|
cursor: -webkit-zoom-in;
|
|
|
|
&:not(.loaded) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// 文章内代码块
|
|
section.vh-code-box {
|
|
margin: 1.188rem 0;
|
|
position: relative;
|
|
|
|
&>span.vh-code-copy {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
right: 0.66rem;
|
|
top: 0.6rem;
|
|
width: 1.8rem;
|
|
height: 1.8rem;
|
|
border: solid 1px rgba(125, 125, 125, .2);
|
|
border-radius: 0.5rem;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
opacity: 0.66;
|
|
transition: all .16s;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
&::before,
|
|
&::after {
|
|
position: absolute;
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(125, 125, 125, .2) url('data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20fill%3D%22%23808080%22%20d%3D%22M368.37-237.37q-34.48%200-58.74-24.26-24.26-24.26-24.26-58.74v-474.26q0-34.48%2024.26-58.74%2024.26-24.26%2058.74-24.26h378.26q34.48%200%2058.74%2024.26%2024.26%2024.26%2024.26%2058.74v474.26q0%2034.48-24.26%2058.74-24.26%2024.26-58.74%2024.26H368.37Zm0-83h378.26v-474.26H368.37v474.26Zm-155%20238q-34.48%200-58.74-24.26-24.26-24.26-24.26-58.74v-515.76q0-17.45%2011.96-29.48%2011.97-12.02%2029.33-12.02t29.54%2012.02q12.17%2012.03%2012.17%2029.48v515.76h419.76q17.45%200%2029.48%2011.96%2012.02%2011.97%2012.02%2029.33t-12.02%2029.54q-12.03%2012.17-29.48%2012.17H213.37Zm155-238v-474.26%20474.26Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
|
|
background-size: 1.16rem 1.16rem;
|
|
opacity: 0;
|
|
transition: opacity 0.16s;
|
|
}
|
|
|
|
&::after {
|
|
background: #01C4B6 url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m389-377.13%20294.7-294.7q12.58-12.67%2029.52-12.67%2016.93%200%2029.61%2012.67%2012.67%2012.68%2012.67%2029.53%200%2016.86-12.28%2029.14L419.07-288.41q-12.59%2012.67-29.52%2012.67-16.94%200-29.62-12.67L217.41-430.93q-12.67-12.68-12.79-29.45-.12-16.77%2012.55-29.45%2012.68-12.67%2029.62-12.67%2016.93%200%2029.28%2012.67L389-377.13Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
|
|
background-size: 1.16rem 1.16rem;
|
|
}
|
|
|
|
&::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
&.success {
|
|
opacity: 1;
|
|
|
|
&::before {
|
|
opacity: 0;
|
|
}
|
|
|
|
&::after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
&>pre.astro-code {
|
|
box-sizing: border-box;
|
|
padding: 0.888rem;
|
|
border-radius: 0.618rem;
|
|
height: max-content;
|
|
max-height: 888px;
|
|
background: #EDEEF399 !important;
|
|
|
|
code {
|
|
box-sizing: border-box;
|
|
counter-reset: line;
|
|
|
|
&>span {
|
|
box-sizing: border-box;
|
|
font-size: 0.875rem;
|
|
line-height: 1.66;
|
|
|
|
&::before {
|
|
counter-increment: line;
|
|
content: counter(line);
|
|
display: inline-block;
|
|
width: 1rem;
|
|
padding-right: 0.618rem;
|
|
margin-right: 0.888rem;
|
|
border-right: 1px solid #e2e2e3;
|
|
color: #939296;
|
|
text-align: center;
|
|
user-select: none;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 文章内容样式结束=========================
|
|
|
|
}
|
|
}
|
|
|
|
// 滚动条样式
|
|
.os-theme-dark.os-scrollbar {
|
|
&>.os-scrollbar-track {
|
|
&>.os-scrollbar-handle {
|
|
background: #A3A8AF88;
|
|
|
|
&:hover {
|
|
background: #A3A8AF66;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 右侧滚动条
|
|
&.os-scrollbar-vertical {
|
|
&>.os-scrollbar-track {
|
|
&>.os-scrollbar-handle {
|
|
&:hover {
|
|
width: 0.56rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 底部滚动条
|
|
&.os-scrollbar-horizontal {
|
|
&>.os-scrollbar-track {
|
|
&>.os-scrollbar-handle {
|
|
&:hover {
|
|
height: 0.56rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 999px) {
|
|
section.vh-container {
|
|
&>article.vh-article-main {
|
|
&>header {
|
|
padding-top: 0;
|
|
|
|
&>h1 {
|
|
font-size: 1.36rem;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.36rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.26rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.18rem;
|
|
}
|
|
|
|
|
|
.vh-node {
|
|
&.vh-picture {
|
|
grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 旋转动画
|
|
@keyframes vhRotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
/* 起始角度 */
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
/* 结束角度 */
|
|
}
|
|
} |