File: /www/wwwroot/www.waciwang.com/wp-content/themes/miragev-main/assets/css/style.css
:root {
--vt-color-primary: #007aff;
--vt-color-success: #4cd964;
--vt-color-warning: #f0ad4e;
--vt-color-error: #dd524d;
--vt-font-size-sm: 13px;
--vt-font-size-base:17px;
--vt-font-size-lg: 22px;
--vt-text-color: #333;
--vt-text-color-inverse: #fff;
--vt-text-color-grey: #999;
--vt-text-color-placeholder: #8c8c8c;
--vt-text-color-disable: #e2e4eb;
--vt-bg-color: #f3f3f3;
--vt-bg-color-grey: #f1f1f1;
--vt-bg-color-hover: #f2f2f2;
--vt-bg-color-mask: rgba(50, 50, 50, 0.5);
--vt-bg-color-card: #ffffff;
--vt-border-radius: 4px;
--vt-border-color: #e5ebeb;
--vt-shadow-color: #d1d2d3;
}
body.dark-mode {
--vt-text-color: #b9b9b9;
--vt-text-color-inverse: #333;
--vt-text-color-grey: #999;
--vt-text-color-placeholder: #808080;
--vt-text-color-disable: #404244;
--vt-bg-color: #2e2e2e;
--vt-bg-color-grey: #5a5a5a;
--vt-bg-color-hover: #979797;
--vt-bg-color-mask: rgba(50, 50, 50, 0.5);
--vt-bg-color-card: #272727;
--vt-border-color: #303030;
--vt-shadow-color: #181818;
}
body.dark-mode img {
filter: brightness(70%);
}
body.dark-mode .logo {
filter: brightness(200%);
}
@media (prefers-color-scheme: dark) {
body.dark-mode-auto {
--vt-text-color: #b9b9b9;
--vt-text-color-inverse: #333;
--vt-text-color-grey: #999;
--vt-text-color-placeholder: #808080;
--vt-text-color-disable: #404244;
--vt-bg-color: #2e2e2e;
--vt-bg-color-grey: #5a5a5a;
--vt-bg-color-hover: #979797;
--vt-bg-color-mask: rgba(50, 50, 50, 0.5);
--vt-bg-color-card: #272727;
--vt-border-color: #303030;
--vt-shadow-color: #181818;
}
body.dark-mode-auto img {
filter: brightness(70%);
}
body.dark-mode-auto .logo {
filter: brightness(200%);
}
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type=checkbox],
[type=radio] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=search] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
@charset "UTF-8";
/* logo 闪烁 */
.flash.logo {
position: relative;
overflow: hidden;
}
.flash.logo::before {
content: "";
position: absolute;
width: 150px;
height: 10px;
background-color: rgba(255, 255, 255, 0.5);
transform: rotate(-45deg);
opacity: 0.7;
animation: logoLights 2s ease-in 1s infinite;
}
@keyframes logoLights {
0% {
left: -160px;
top: 0;
}
to {
left: 160px;
top: 0;
}
}
.flash.logo::after {
content: "";
position: absolute;
width: 150px;
height: 6px;
background-color: rgba(255, 255, 255, 0.5);
transform: rotate(-45deg);
opacity: 0.8;
animation: logoLights2 2s ease-in 1s infinite;
}
@keyframes logoLights2 {
0% {
left: -130px;
top: 0;
}
to {
left: 190px;
top: 0;
}
}
.dark-mode .flash.logo::after, .dark-mode .logo::before {
display: none;
}
@charset "UTF-8";
/*
* 默认的样式
*/
html {
-webkit-text-size-adjust: none;
}
* {
margin: 0;
padding: 0;
}
ol,
ul {
list-style: none;
}
img {
border: 0;
height: auto;
width: auto;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: var(--vt-font-size-base);
color: var(--vt-text-color);
letter-spacing: 0.8px;
position: relative;
letter-spacing: 1px;
background-color: var(--vt-bg-color);
overflow-x: hidden;
}
body:before {
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.3;
z-index: -1;
display: block;
position: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
content: "";
}
a {
color: var(--vt-text-color);
font-size: var(--vt-font-size-base);
text-decoration: none;
letter-spacing: 1px;
}
a:hover {
color: var(--vt-color-primary);
}
/**
* 文章页，文档页等 公共的点赞，收藏 模块
*/
/**
* 面包屑
*/
.breadcrumbs {
width: auto;
height: 35px;
line-height: 35px;
font-size: var(--vt-font-size-sm);
color: var(--vt-text-color-grey);
}
.breadcrumbs i {
font-size: var(--vt-font-size-lg);
vertical-align: -5px;
}
.breadcrumbs a {
font-size: var(--vt-font-size-sm);
color: var(--vt-text-color-grey);
}
/**
* 404
*/
.page-no-found {
width: 100%;
max-width: 350px;
margin: 60px auto 250px auto;
color: var(--vt-text-color);
}
.page-no-found img {
width: 100%;
}
.page-no-found p {
font-size: 30px;
text-align: center;
}
.page-no-found a {
display: block;
width: 100px;
height: 30px;
color: var(--vt-text-color-inverse);
font-size: 13px;
margin: 50px auto 0px auto;
line-height: 30px;
text-align: center;
background-color: var(--vt-color-primary);
border-radius: 3px;
}
.page-no-found a:hover {
color: var(--vt-text-color-inverse);
}
/**
* 没有内容
*/
.no-content {
text-align: center;
padding: 100px 0px;
font-size: var(--vt-font-size-base);
user-select: none;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.no-content img {
max-width: 150px;
margin: 20px auto;
}
.no-content p {
margin-top: 10px;
color: var(--vt-text-color-grey);
}
.search-title {
margin-top: 10px;
color: var(--vt-text-color);
}
.field {
margin: 20px 0 0 0;
position: relative;
}
.field .btn {
padding: 0 15px;
}
.field-text label {
display: block;
font-size: 15px;
line-height: 22px;
margin-bottom: 3px;
}
.field-text label,
.field-text input,
.field-text .form-help,
.field-text textarea {
width: 100%;
box-sizing: border-box;
font-size: 14px;
}
.field-text input,
.field-text textarea {
padding: 8px 30px 8px 8px;
border: 1px solid var(--vt-border-color);
border-radius: 3px;
}
.field-text :focus {
outline: 0;
box-shadow: 0 0 5px rgba(93, 162, 248, 0.5);
border-color: var(--vt-color-primary);
}
.field-text :invalid {
border-color: var(--vt-color-danger);
box-shadow: 0 0 5px rgba(229, 43, 37, 0.5);
}
.form-help {
display: block;
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
clip: rect(0, 0, 0, 0);
transition: all 0.05s linear;
}
input:focus + .form-help {
padding: 8px;
margin-top: 5px;
border: 1px solid var(--vt-color-warning);
border-radius: 3px;
font-style: italic;
font-size: 13px;
color: var(--vt-text-color);
background-color: var(--vt-bg-color-grey);
position: relative;
width: auto;
height: auto;
crop: none;
}
input:disabled, textarea:disabled {
background-color: var(--vt-bg-color-grey);
}
@media only screen and (min-width: 900px) {
.field {
width: 500px;
}
}
@charset "UTF-8";
/*
* 公共按钮
*/
.btn {
display: inline-block;
width: 100%;
height: 32px;
line-height: 32px;
box-sizing: border-box;
border: 1px solid var(--vt-border-color);
border-radius: var(--vt-border-radius);
color: var(--vt-text-color);
cursor: pointer;
font-size: var(--vt-font-size-sm);
text-align: center;
padding: 0 8px;
font-size: 13px;
}
.btn:hover {
color: var(--vt-text-color);
}
.btn.btn-sm {
height: 22px;
line-height: 22px;
font-size: 12px;
width: auto;
padding: 0 8px;
}
.btn.btn-primary {
background-color: var(--vt-color-primary);
color: var(--vt-text-color-inverse);
}
.btn.btn-success {
background-color: var(--vt-color-success);
color: var(--vt-text-color-inverse);
}
.btn.btn-danger {
background-color: var(--vt-color-danger);
color: var(--vt-text-color-inverse);
}
.btn.btn-error {
background-color: var(--vt-color-error);
color: var(--vt-text-color-inverse);
}
.btn.btn-primary-sec {
border: 1px solid var(--vt-color-primary);
color: var(--vt-color-primary);
}
.btn.btn-success-sec {
border: 1px solid var(--vt-color-success);
color: var(--vt-color-success);
}
.btn.btn-danger-sec {
border: 1px solid var(--vt-color-danger);
color: var(--vt-color-danger);
}
.btn.btn-error-sec {
border: 1px solid var(--vt-color-error);
color: var(--vt-color-error);
}
@media only screen and (min-width: 900px) {
.btn, .btn-primary {
width: auto;
}
}
@charset "UTF-8";
/* 分页 */
nav.pagination {
font-size: 20px;
border-top: 0px;
border-bottom: 0px;
margin: 8px 0 0 0;
}
nav.pagination .nav-links {
align-items: baseline;
display: flex;
justify-content: center;
flex-wrap: wrap;
font-size: 1.8em;
font-weight: 100;
width: 100%;
}
nav.pagination .pagination-separator {
margin: 5em 0;
}
nav.pagination .nav-links > * {
min-width: 2em;
height: 2em;
line-height: 2.1em;
text-align: center;
font-size: 0.4em;
border: 1px solid var(--vt-border-color);
margin: 0px 7px 0px 0;
display: block;
background-color: var(--vt-bg-color-card);
box-shadow: 0 1px 3px var(--vt-shadow-color);
padding: 1px 1px;
}
nav.pagination .nav-links > .current {
background-color: var(--vt-color-primary);
border-color: var(--vt-color-primary);
color: #fff;
border-radius: 3px;
box-shadow: 0 1px 3px var(--vt-shadow-color);
}
nav.pagination .nav-links .placeholder {
display: none;
visibility: hidden;
}
nav.pagination a {
text-decoration: none;
border-radius: 3px;
}
nav.pagination a:hover {
color: var(--vt-color-primary);
border-color: var(--vt-color-primary);
}
@media only screen and (min-width: 900px) {
nav.pagination {
margin: 20px 0 0 0;
}
}
.m-pagination {
font-size: 13px;
color: var(--vt-text-color);
line-height: 28px;
}
.m-pagination .m-pager {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
.m-pagination .m-pagination-total {
margin-right: 5px;
vertical-align: middle;
}
.m-pagination .m-pagination-prev,
.m-pagination .m-pagination-next,
.m-pagination .m-pager-number {
display: inline-block;
cursor: pointer;
min-width: 30px;
height: 28px;
text-align: center;
vertical-align: middle;
}
.m-pagination .m-pagination-prev:hover, .m-pagination .m-pagination-prev.active,
.m-pagination .m-pagination-next:hover,
.m-pagination .m-pagination-next.active,
.m-pagination .m-pager-number:hover,
.m-pagination .m-pager-number.active {
color: var(--vt-color-primary);
}
.m-pagination .m-pagination-prev a,
.m-pagination .m-pagination-next a,
.m-pagination .m-pager-number a {
color: inherit;
text-decoration: none;
display: block;
height: 100%;
width: 100%;
font-size: 14px;
}
.m-pagination .m-pagination-prev.disabled, .m-pagination .m-pagination-prev:disabled,
.m-pagination .m-pagination-next.disabled,
.m-pagination .m-pagination-next:disabled,
.m-pagination .m-pager-number.disabled,
.m-pagination .m-pager-number:disabled {
cursor: not-allowed;
color: var(--vt-text-color-disable);
}
.m-pagination .m-pagination-prev,
.m-pagination .m-pagination-next {
background: none;
outline: none;
border: none;
padding: 0 10px;
}
.m-pagination .m-pagination-sizes {
height: 29px;
border-radius: 3px;
border: solid 1px #DCDFE6;
outline: none;
margin: 0 4px;
font-size: 12px;
padding: 0 10px;
vertical-align: middle;
}
.m-pagination .m-pagination-sizes:hover {
border-color: var(--vt-color-primary);
}
.m-pagination .m-pagination-sizes:focus {
box-shadow: 0 0 2px 0 var(--vt-text-color-grey);
}
.m-pagination.is-background .m-pagination-prev,
.m-pagination.is-background .m-pagination-next,
.m-pagination.is-background .m-pager-number {
background: var(--vt-bg-color-grey);
margin: 0 5px;
border-radius: 2px;
}
.m-pagination.is-background .m-pager-number.active {
background: var(--vt-color-primary);
color: #fff;
}
.m-pagination.is-background .m-pager-number.disabled {
filter: grayscale(1);
}
.m-pagination.text-center {
text-align: center;
}
.m-pagination.text-right {
text-align: right;
}
.article-content,
.item-content,
.page-content {
font-size: var(--vt-font-size-base);
line-height: 30px;
}
.article-content a,
.item-content a,
.page-content a {
font-size: var(--vt-font-size-base);
color: var(--vt-color-primary);
}
.article-content img,
.item-content img,
.page-content img {
max-width: 100%;
margin: 5px 0px;
}
.article-content pre,
.item-content pre,
.page-content pre {
line-height: 18px;
font-size: 13px !important;
background-color: #f0f0f0;
border-color: #f0f0f0;
padding: 12px;
margin: 5px 0;
border-radius: var(--vt-border-radius);
}
.article-content p,
.item-content p,
.page-content p {
margin-top: 20px;
overflow: hidden;
}
.article-content p:first-child,
.item-content p:first-child,
.page-content p:first-child {
margin-top: 0px;
}
.article-content h1, .article-content h2, .article-content h3, .article-content h4, .article-content h5,
.item-content h1,
.item-content h2,
.item-content h3,
.item-content h4,
.item-content h5,
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5 {
margin-top: 20px;
margin-bottom: 10px;
}
.article-content h1,
.item-content h1,
.page-content h1 {
font-size: 25px;
}
.article-content h2,
.item-content h2,
.page-content h2 {
font-size: 22px;
}
.article-content h3,
.item-content h3,
.page-content h3 {
font-size: 18px;
}
.article-content h4,
.item-content h4,
.page-content h4 {
font-size: 16px;
}
.article-content h5,
.item-content h5,
.page-content h5 {
font-size: 10px;
}
.article-content ul,
.item-content ul,
.page-content ul {
list-style: inherit;
padding-left: 25px;
margin-bottom: 5px;
}
.article-content ol,
.item-content ol,
.page-content ol {
list-style: decimal;
padding-left: 25px;
margin-bottom: 5px;
}
.article-content blockquote,
.item-content blockquote,
.page-content blockquote {
padding: 15px;
background-color: var(--vt-bg-color);
margin-top: 20px;
color: var(--vt-text-color-grey);
border-radius: var(--vt-border-radius);
}
.article-content blockquote::before,
.item-content blockquote::before,
.page-content blockquote::before {
content: "\e669";
font-family: "iconfont";
font-size: 38px;
color: var(--vt-color-primary);
}
.article-content .content-excerpt,
.item-content .content-excerpt,
.page-content .content-excerpt {
padding: 15px;
background-color: var(--vt-bg-color);
margin-top: 20px;
color: var(--vt-text-color-grey);
border-radius: var(--vt-border-radius);
}
.article-content table,
.item-content table,
.page-content table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
border: 1px solid var(--vt-border-color);
margin-top: 10px;
}
.article-content table caption,
.item-content table caption,
.page-content table caption {
color: var(--vt-text-color);
font: italic 85%/1 arial, sans-serif;
padding: 1em 0;
text-align: center;
}
.article-content table td, .article-content table th,
.item-content table td,
.item-content table th,
.page-content table td,
.page-content table th {
border-left: 1px solid var(--vt-border-color);
border-width: 0 0 0 1px;
font-size: inherit;
margin: 0;
overflow: visible;
padding: 0.5em 1em;
}
.article-content table thead,
.item-content table thead,
.page-content table thead {
background-color: var(--vt-bg-color-grey);
color: var(--vt-text-color);
text-align: left;
vertical-align: bottom;
}
.article-content table td, .article-content table th,
.item-content table td,
.item-content table th,
.page-content table td,
.page-content table th {
background-color: transparent;
border-bottom: 1px solid var(--vt-border-color);
}
.article-content .hljs,
.item-content .hljs,
.page-content .hljs {
/*background-color: transparent !important;*/
white-space: pre-wrap;
}
.article-content .wp-caption {
max-width: 100% !important;
}
.article-content .wp-caption img {
margin-bottom: 0px !important;
}
.article-content .wp-caption .wp-caption-text {
margin-top: 0px !important;
font-size: var(--vt-font-size-sm) !important;
color: var(--vt-text-color-grey);
line-height: 15px !important;
}
@charset "UTF-8";
/**
* 文章页，文档页等 公共的点赞，收藏 模块
*/
.content-action {
display: flex;
margin-top: 20px;
color: var(--vt-text-color-grey);
}
.content-action a {
color: var(--vt-text-color-grey);
}
.widget-action {
font-size: 13px;
display: flex;
justify-content: flex-start;
align-items: center;
margin-right: 20px;
cursor: pointer;
user-select: none;
}
.widget-action.active {
color: var(--vt-color-primary);
}
.widget-action i {
font-size: 16px;
position: relative;
right: 2px;
}
.widget-action.share-poster i {
font-size: 20px;
}
/**
* 分享卡片
*/
.share-dialog-widget {
box-sizing: border-box;
font-size: 18px;
max-width: 100%;
width: 400px;
padding: 10px;
border-radius: var(--vt-border-radius);
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 20px var(--vt-shadow-color);
position: relative;
color: var(--vt-text-color);
}
.share-dialog-widget .close-button {
width: 30px;
height: 30px;
position: absolute;
top: 5px;
right: 5px;
text-align: center;
color: var(--vt-text-color-grey);
}
/* .share-dialog-widget .close-button i {
font-size: 23px;
font-weight: bold;
} */
.share-dialog-widget .share-card {
margin: 15px 0 0 0;
position: relative;
padding: 10px;
z-index: -1;
}
.share-card .thumbnail {
width: 100%;
height: 0;
padding: 0 0 61% 0;
position: relative;
}
.share-card .thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
.share-card .share-card-body h3 {
font-size: 20px;
font-weight: 400;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin: 10px 0 0 0;
text-align: justify;
line-height: 28px;
}
.share-card .share-card-body p {
font-size: 16px;
font-weight: 400;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
margin: 10px 0 0 0;
text-align: justify;
line-height: 25px;
color: var(--vt-text-color-grey);
}
.share-card .share-card-footer {
display: flex;
padding: 30px 0 0 0;
}
.share-card-footer .info {
font-size: 13px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.share-card-footer .info img {
font-size: 13px;
width: 160px;
margin: 0 0 0px 0;
position: relative;
}
.share-card-footer #qrcode {
width: 80px;
height: 80px;
margin-left: auto;
}
.share-card-footer #qrcode img {
width: 100%;
height: 100%;
}
.share-dialog-widget .top-layer {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
color: var(--vt-text-color-grey);
}
.share-dialog-widget #poster {
height: auto;
width: auto;
position: absolute;
top: 25px;
left: 10px;
}
/**
* 投币
*/
.coin i {}
.coin-dialog-widget {
box-sizing: border-box;
font-size: 18px;
max-width: 100%;
padding: 10px;
border-radius: var(--vt-border-radius);
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 20px var(--vt-shadow-color);
position: relative;
color: var(--vt-text-color);
}
.coin-dialog-widget .coin-widget {
display: flex;
margin: 20px 0 0 0;
}
.coin-dialog-widget .coin-widget img {
width: 160px;
height: 160px;
}
.coin-dialog-widget .coin-info {
font-size: 14px;
text-align: center;
line-height: 30px;
}
.toast-box {
width: auto;
max-width: 90%;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 14px;
padding: 10px 20px;
position: fixed;
bottom: 200px;
left: 50%;
border-radius: 5px;
transform: translateX(-50%);
user-select: none;
animation: 0.3s layui-m-anim-up;
z-index: 9999;
}
@keyframes layui-m-anim-up {
0% {
opacity: 0;
transform: translateY(200px) translateX(-50%);
}
100% {
opacity: 1;
transform: translateY(0) translateX(-50%);
}
}
.mobile-nav {
width: 100%;
height: 45px;
border-top: 1px solid var(--vt-border-color);
position: fixed;
bottom: 0px;
background-color: var(--vt-bg-color-card);
z-index: 999999;
}
.mobile-nav .mobile-nav-container {
width: 100%;
max-width: 650px;
display: flex;
justify-content: space-between;
margin: 0px auto;
}
.mobile-nav .mobile-nav-container a.nav-button {
width: 70px;
height: 45px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 12px;
color: var(--vt-text-color-grey);
border-radius: var(--vt-border-radius);
}
.mobile-nav .mobile-nav-container a.nav-button i {
font-size: 20px;
}
@media only screen and (min-width: 900px) {
.mobile-nav {
display: none;
}
}
@charset "UTF-8";
/*
* 底部按钮 回到顶部
*/
.float-widget {
width: 45px;
min-height: 50px;
position: fixed;
right: 5px;
bottom: 120px;
display: flex;
flex-direction: column;
justify-content: flex-end;
z-index: 999;
display: none;
}
.float-widget .tool-widget {
width: 45px;
height: 45px;
margin-top: 15px;
position: relative;
}
.float-widget a.tool-button {
width: 100%;
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
overflow: hidden;
box-shadow: 0 0 5px 0 var(--vt-shadow-color);
border-radius: 50%;
background-color: var(--vt-bg-color-card);
cursor: pointer;
}
.float-widget a.tool-button i {
z-index: 1;
font-size: 20px;
color: var(--vt-text-color);
user-select: none;
}
@media only screen and (min-width: 900px) {
.float-widget {
position: fixed;
right: 20px;
bottom: 120px;
display: block;
}
}
@media only screen and (min-width: 1200px) {
.float-widget {
right: calc(50% - 680px);
}
}
.vt-dialog {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 99;
display: none;
}
.vt-dialog[open] {
display: flex !important;
}
.vt-dialog[modal] {
position: fixed;
left: 0;
top: 0;
transform: translate(0, 0);
z-index: 99;
width: 100vw;
height: 100vh;
display: none;
align-items: center;
justify-content: center;
}
.vt-dialog[modal]::before {
content: "";
display: block;
width: 100vw;
height: 100vh;
background-color: var(--vt-bg-color-mask);
position: fixed;
top: 0;
left: 0;
}
.no-scroll {
overflow-y: hidden;
}
.dialog-widget {
box-sizing: border-box;
font-size: 18px;
padding: 10px;
border-radius: var(--vt-border-radius);
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 20px var(--vt-shadow-color);
position: relative;
user-select: none;
}
.dialog-widget .close-button {
width: 30px;
height: 30px;
position: absolute;
top: 5px;
right: 5px;
text-align: center;
color: var(--vt-text-color-grey);
z-index: 9;
}
.dialog-widget .close-button i {
font-size: 22px;
font-weight: bold;
}
.dialog-header {
height: 25px;
font-size: 16px;
}
.dialog-header .title {
float: left;
}
.dialog-header .close {
float: right;
font-size: 25px;
position: relative;
top: -5px;
}
.dialog-body {
padding: 10px 0;
}
.dialog-body label {
cursor: pointer;
font-size: 14px;
}
.dialog-action-group {
display: flex;
justify-content: flex-end;
}
.dialog-action-group .btn {
margin: 0 0 0 10px;
}
@charset "UTF-8";
/**
* 模态对话框样式
*/
.modal {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background-color: var(--vt-bg-color-mask);
backdrop-filter: saturate(97%) blur(20px);
z-index: 999;
display: none;
justify-content: center;
align-items: center;
}
.modal.modal-show {
display: flex;
}
@charset "UTF-8";
/* 加载更多按钮 */
.main-widget button.posts-more-button {
display: block;
width: calc(100% - 30px);
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
background-color: var(--vt-bg-color-card);
color: var(--vt-color-primary);
border-radius: var(--vt-border-radius);
border: 1px solid var(--vt-color-primary);
margin: 10px auto;
cursor: pointer;
}
/* 防止子元素响应 */
.main-widget button.posts-more-button > * {
pointer-events: none;
}
.main-widget button.posts-more-button i {
display: none;
}
.main-widget button.posts-more-button.loading i {
display: inline-block;
animation: rotation-load 1.5s linear infinite;
}
@media only screen and (min-width: 900px) {
.main-widget button.posts-more-button {
width: 120px;
margin: 20px auto 20px auto;
}
}
@keyframes rotation-load {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
}
}
@charset "UTF-8";
/* 幻灯样式 */
.swiper-container {
width: 100%;
height: 50vw;
overflow: hidden;
box-sizing: border-box;
margin: 0px auto;
overflow: hidden;
border-radius: var(--vt-border-radius);
}
.swiper-container .swiper-slide {
background: var(--vt-bg-color);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.swiper-container .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
user-select: none;
}
.swiper-container .swiper-pagination-bullet-active {
background-color: var(--vt-color-primary);
}
.swiper-container .swiper-button-next,
.swiper-container .swiper-button-prev {
visibility: hidden;
opacity: 0;
display: flex;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.3);
left: 20px;
transition: opacity 0.2s ease-in-out;
z-index: 99;
}
.swiper-container .swiper-button-next::after,
.swiper-container .swiper-button-prev::after {
color: #fff;
font-size: 18px;
}
.swiper-container .swiper-button-next.swiper-button-disabled,
.swiper-container .swiper-button-prev.swiper-button-disabled {
opacity: 0.3;
pointer-events: auto;
}
.swiper-container .swiper-button-next {
left: auto;
right: 20px;
}
.swiper-container:hover .swiper-button-next,
.swiper-container:hover .swiper-button-prev {
visibility: visible;
}
.swiper-container:hover .swiper-button-next:not(.swiper-button-disabled),
.swiper-container:hover .swiper-button-prev:not(.swiper-button-disabled) {
opacity: 1;
}
/**
* home - project list
*/
.hot-widget {
margin: 10px 0px 0 0px;
box-sizing: border-box;
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 2px 0 var(--vt-shadow-color);
border-radius: var(--vt-border-radius);
}
.hot-widget .header {
padding: 15px 15px 15px 15px;
font-size: var(--vt-font-size-base);
font-weight: bold;
margin: 0 !important;
}
.hot-widget .header .title {
font-size: var(--vt-font-size-base);
font-weight: 900;
}
.hot-widget .header a {
font-weight: normal;
}
.hot-widget .body {
width: 100%;
overflow: scroll;
padding: 0 10px 10px 10px;
box-sizing: border-box;
}
.hot-widget .body::-webkit-scrollbar {
display: none;
}
.hot-widget .body .hot-list {
margin-right: -10px;
margin-top: 0px;
display: flex;
padding: 0 2px;
}
.hot-list .hot-item {
width: calc(45% - 10px);
margin-right: 10px;
flex: 0 0 auto;
position: relative;
border-radius: var(--vt-border-radius);
overflow: hidden;
cursor: pointer;
display: block;
}
.hot-item .hot-thumbnail {
display: block;
width: 100%;
height: 0;
padding-bottom: 70%;
position: relative;
background-color: var(--vt-bg-color-grey);
}
.hot-item .hot-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
border-radius: var(--vt-border-radius);
}
.hot-item .hot-title {
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
}
@media only screen and (min-width: 900px) {
.hot-widget {
width: 100%;
margin: 20px auto 0 auto;
}
.hot-list .hot-item {
width: calc(25% - 15px);
margin-right: 15px;
}
}
.media-widget {
margin-top: 10px;
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 2px 0 var(--vt-shadow-color);
border-radius: var(--vt-border-radius);
padding: 15px;
}
@media only screen and (min-width: 900px) {
.media-widget {
margin-top: 20px;
}
}
.articles-widget {
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 2px 0 var(--vt-shadow-color);
border-radius: var(--vt-border-radius);
overflow: hidden;
margin: 10px 0 0 0;
}
.articles-widget::after {
content: "";
display: block;
clear: both;
}
.articles-widget .articles-header {
padding: 15px 15px 15px 15px;
font-size: var(--vt-font-size-base);
font-weight: bold;
}
.articles-list .media-item:nth-child(1) {
border-top: 1px solid var(--vt-border-color);
}
@media only screen and (min-width: 900px) {
.articles-widget {
margin: 20px 0 0 0;
}
}
.links-list {
padding: 15px;
}
.links-list a {
margin-right: 20px;
line-height: 30px;
font-size: 14px;
}
@media only screen and (min-width: 900px) {
.links.widget-container {
width: 100%;
}
}
@charset "UTF-8";
/* 文章页 singular.php */
.article-widget {
padding: 15px;
box-sizing: border-box;
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 2px 0 var(--vt-shadow-color);
border-radius: var(--vt-border-radius);
}
.article-widget .article-title {
line-height: 28px;
font-size: var(--vt-font-size-lg);
font-weight: 600;
color: var(--vt-text-color);
}
.article-widget .article-meta {
display: flex;
align-items: center;
justify-content: flex-start;
color: var(--vt-text-color-grey);
margin: 10px 0 10px 0;
height: 60px;
border-bottom: 1px solid var(--vt-border-color);
}
.article-meta a {
color: var(--vt-text-color-grey);
font-size: 13px;
}
.article-meta i {
font-size: 16px;
margin: 0 2px 0 0;
}
.article-meta .meta {
display: flex;
font-size: 13px;
align-items: center;
line-height: 20px;
margin-left: 0px;
margin-right: 20px;
}
.article-meta .meta.author {
display: flex;
align-items: center;
margin-left: 0;
}
.article-meta .meta.author img {
width: 23px;
height: 23px;
border-radius: 50%;
box-shadow: 0 1px 3px var(--vt-shadow-color);
object-fit: cover;
position: relative;
top: -1px;
}
.article-meta .meta.author span {
padding-left: 5px;
}
.copyright-content {
padding: 10px;
font-size: var(--vt-font-size-sm);
color: var(--vt-text-color-grey);
border-radius: var(--vt-border-radius);
margin-top: 20px;
background-color: var(--vt-bg-color);
}
.copyright-content i {
display: inline-block;
transform: scale(1.35);
position: relative;
/* top: 1px; */
}
.dark-mode pre {
line-height: 18px;
font-size: 13px !important;
background-color: var(--vt-bg-color) !important;
border-color: var(--vt-bg-color) !important;
padding: 12px;
margin: 5px 0;
color: var(--vt-text-color);
border-radius: var(--vt-border-radius);
}
/**
* 文章内页分类和标签
*/
.tags-widget{
margin: 20px 0 0px 0;
display: flex;
flex-wrap: wrap;
}
.tags-widget .icon{
font-size:18px;
color: var(--vt-text-color-grey);
margin-right: 8px;
position: relative;
/* top: -2px; */
}
.tags-widget .tag-item{
margin: 0 8px 8px 0;
}
.tags-widget .tag-item a{
display: block;
padding: 0px 10px;
line-height: 25px;
background-color: var(--vt-bg-color-grey);
color: var(--vt-text-color-grey);
font-size: var(--vt-font-size-sm);
border-radius: 10px;
}
/**
* 文章上一篇和下一篇导航
*/
.article-prev-next-nav {
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: space-between;
font-size: var(--vt-font-size-sm);
color: var(--vt-text-color-grey);
margin: 10px 0px;
}
.article-prev-next-nav .article-nav {
flex: 0 0 calc(50% - 5px);
display: block;
padding: 10px;
box-sizing: border-box;
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 2px 0 var(--vt-shadow-color);
border-radius: var(--vt-border-radius);
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.article-nav.next-nav .arrow-icon {
text-align: right;
}
.article-nav .arrow-icon i {
position: relative;
top: 1px;
}
.article-nav .article-link {
height: 40px;
line-height: 20px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin: 0px 0px 10px;
font-size: 15px;
}
.article-nav .article-link a {
font-size: 15px;
cursor: pointer;
}
.article-nav.next-nav {
text-align: right;
}
@media only screen and (min-width: 900px) {
.article-prev-next-nav {
margin: 20px 0px;
}
.article-prev-next-nav .article-nav {
flex: 0 0 calc(50% - 10px);
}
}
@charset "UTF-8";
/**
* 单页
*/
.singular-page-container {
margin-top: 10px;
padding: 15px;
box-sizing: border-box;
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 2px 0 var(--vt-shadow-color);
border-radius: var(--vt-border-radius);
}
.page-title {
line-height: 30px;
font-size: var(--vt-font-size-lg);
font-weight: 600;
color: var(--vt-text-color);
}
.page-meta {
margin: 2rem 0rem 5rem 0rem;
}
.page-content {
margin-top: 30px;
}
/******************************************************************************
* 评论表单
*/
.comments-area {
background-color: var(--vt-bg-color-card);
padding: 15px;
box-shadow: 0px 0px 3px 0 var(--vt-shadow-color);
border-radius: var(--vt-border-radius);
}
.screen-reader-text,
.comment-reply-title {
font-size: var(--vt-font-size-base);
}
.comment-reply-title small a {
font-size: var(--vt-font-size-sm);
font-weight: 400;
color: var(--vt-color-primary);
margin-left: 10px;
}
.top-info {
margin: 10px 0 5px 0;
font-size: 15px;
color: var(--vt-text-color-grey);
}
.top-info a {
font-size: var(--vt-font-size-sm);
color: var(--vt-color-primary);
}
.comment-form {
font-size: var(--vt-font-size-base);
}
.comment-form .comment-form-comment {
margin: 15px 0 0px 0;
}
.comment-form .comment-form-comment textarea {
box-sizing: border-box;
width: 100%;
height: 120px;
padding: 10px;
border-radius: var(--vt-border-radius);
outline: none;
border: 1px solid var(--vt-border-color);
background-color: var(--vt-bg-color-card);
font-size: 14px;
line-height: 25px;
color: var(--vt-text-color);
}
.comment-form .comment-input-widget .input-field {
box-sizing: border-box;
width: 100%;
height: 40px;
padding: 0px 8px;
margin: 10px 0 0 0;
border-radius: var(--vt-border-radius);
outline: none;
border: 1px solid var(--vt-border-color);
color: var(--vt-text-color-grey);
font-size: 14px;
background-color: var(--vt-bg-color-card);
}
.comment-form .comment-form-cookies-consent {
margin: 10px 0 0 0;
font-size: var(--vt-font-size-sm);
line-height: 20px;
color: var(--vt-text-color-grey);
overflow: hidden;
padding: 1px;
display: block;
}
.comment-form .comment-form-cookies-consent #wp-comment-cookies-consent {
width: 16px;
height: 16px;
position: relative;
top: 3px;
}
.comment-form .input-field::placeholder,
.comment-form .comment-form-comment textarea::placeholder {
color: var(--vt-text-color-grey);
}
.comment-form .input-field:focus,
.comment-form .comment-form-comment textarea:focus {
border: 1px solid var(--vt-color-primary);
}
.comment-form .form-submit {
margin-top: 10px;
padding: 1px 0;
}
.comment-form .form-submit .submit {
min-width: 60px;
display: block;
height: 35px;
line-height: 35px;
padding: 0px 10px;
margin: 0;
font-size: 15px;
border: none;
border-radius: var(--vt-border-radius);
background: var(--vt-color-primary);
color: var(--vt-text-color-inverse);
cursor: pointer;
}
@media only screen and (min-width: 900px) {
.comment-form .form-submit {
margin-top: 13px;
}
.comment-input-widget {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.comment-form .comment-input-widget .input-field {
width: calc(33.33% - 10px);
margin: 0;
}
}
/******************************************************************************
* 评论列表
*/
.comments-title {
font-size: var(--vt-font-size-base);
margin-top: 20px;
}
.comment-list {
padding: 0px;
font-size: var(--vt-font-size-sm);
}
.comment-list li.comment .children {
padding-left: 50px;
}
.comment-list .comment:last-child .comment-item { border-bottom: 0; }
.comment-item {
padding: 20px 0;
border-bottom: 1px solid var(--vt-border-color);
}
.comment-item .comment-header {
display: flex;
justify-content: space-between;
align-items: top;
}
.comment-header .comment-author {
display: flex;
justify-content: flex-start;
align-items: center;
clear: both;
font-size: var(--vt-font-size-base);
}
.comment-author img {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--vt-border-color);
}
.comment-author span.nickname {
margin-left: 10px;
}
.comment-author a {
font-size: var(--vt-font-size-base);
}
.comment-author i {
font-size: 14px;
position: relative;
top: -1px;
left: -4px;
color: var(--vt-color-warning);
}
.comment-header .comment-meta {
font-size: 10px;
color: var(--vt-text-color-grey);
clear: both;
}
.comment-header .comment-meta a {
color: var(--vt-text-color-grey);
}
.comment-item .comment-content {
padding: 0 0 0 50px;
line-height: 28px;
font-size: 15px;
}
.comment-item .comment-status {
padding: 0 0 0 50px;
line-height: 28px;
font-size: var(--vt-font-size-sm);
color: var(--vt-color-warning);
}
.comment-item .reply {
padding: 0 0 0 50px;
}
.comment-item .reply a {
font-size: var(--vt-font-size-sm);
color: var(--vt-color-primary);
line-height: 28px;
}
.no-comments {
margin-top: 10px;
}
/******************************************************************************
* 评论分页
*/
.comment-nav-widget{
display: flex;
justify-content: center;
padding: 0 0 30px 0;
}
.comment-nav-widget a {
border: 1px solid var(--vt-color-primary);
width: 35px;
height: 30px;
margin: 0 5px;
border-radius: var(--vt-border-radius);
color: var(--vt-color-primary);
/* background-color: var(--vt-color-primary);*/
display: flex;
justify-content: center;
align-items: center;
}
@charset "UTF-8";
/**
* header 移动端菜单
*/
.no-scroll {
overflow-y: hidden;
}
.header.mobile {
width: 100%;
height: 50px;
background-color: var(--vt-bg-color-card);
}
.header.mobile .header-nav {
box-sizing: border-box;
padding: 0px 5px;
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 2;
box-shadow: 0px 0px 3px var(--vt-shadow-color);
}
.header.mobile .header-nav a.logo {
display: block;
height: 30px;
}
.header.mobile .header-nav a.logo img {
height: 30px;
}
.header.mobile .header-nav a.top-nav-button {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
}
.header.mobile .header-nav a.top-nav-button i {
font-size: 20px;
}
.header.mobile .mobile-menu-modal {
width: 100vw;
height: 100vh;
z-index: 80;
position: fixed;
top: 0;
left: 0;
background-color: var(--vt-bg-color-mask);
display: none;
}
.header.mobile .mobile-menu-modal.show {
display: flex;
}
.header.mobile .mobile-menu {
box-sizing: content-box;
background-color: var(--vt-bg-color-card);
position: fixed;
top: 0;
left: 0;
width: 80vw;
height: 100vh;
flex-direction: column;
align-items: center;
z-index: 6;
}
.header.mobile .mobile-menu .action-widget {
height: 60px;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0 20px;
box-sizing: border-box;
}
.header.mobile .action-widget .action-button {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
margin-left: 10px;
color: var(--vt-text-color);
cursor: pointer;
}
.header.mobile .action-widget .action-button i {
font-size: 20px;
}
.header.mobile .action-widget .action-button.dark-mode-button .moon {
display: block;
}
.header.mobile .action-widget .action-button.dark-mode-button .sun {
display: none;
}
.header.mobile .action-widget .action-button.dark-mode-button.dark .moon {
display: none;
}
.header.mobile .action-widget .action-button.dark-mode-button.dark .sun {
display: block;
}
.header.mobile .mobile-menu .site-logo {
display: flex;
justify-content: center;
}
.header.mobile .mobile-menu .site-logo img {
width: 50%;
}
.header.mobile .mobile-menu .mobile-ul {
width: 100%;
height: 80%;
margin-top: 0px;
box-sizing: border-box;
padding: 10px 30px;
overflow-y: scroll;
scrollbar-width: none;
}
.header.mobile .mobile-menu .mobile-ul::-webkit-scrollbar {
display: none;
width: 0;
}
.header.mobile .mobile-ul li {
width: 100%;
height: auto;
line-height: 30px;
color: var(--vt-text-color);
position: relative;
margin: 15px auto;
}
.header.mobile .mobile-ul li > i {
font-size: 22px;
position: relative;
top: 2px;
}
.header.mobile .mobile-ul li:after {
content: "";
clear: both;
}
.header.mobile .mobile-ul li a {
font-size: 16px;
}
.header.mobile .mobile-ul li.menu-item-has-children i {
position: absolute;
font-size: 14px;
top: 6px;
right: 0px;
}
.header.mobile .mobile-ul .child-menu {
margin-left: 20px;
display: none;
}
.header.mobile .mobile-ul .menu-item-has-children.active > .child-menu {
display: block;
}
.header.mobile .mobile-ul .menu-item-has-children.active > i {
transform: rotate(180deg);
}
.header.mobile .mobile-search-modal.modal {
width: 100vw;
height: 100vh;
z-index: 80;
position: fixed;
top: 0;
left: 0;
background-color: var(--vt-bg-color-mask);
display: none;
justify-content: center;
align-items: center;
}
.header.mobile .mobile-search-modal.modal.show {
display: flex;
}
.header.mobile .mobile-search-modal.modal .modal-dialog {
position: relative;
font-size: 18px;
width: 90%;
max-width: 300px;
padding: 20px;
border-radius: var(--vt-border-radius);
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 3px var(--vt-shadow-color);
}
.header.mobile .mobile-search-modal.modal .modal-dialog .modal-close-button {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
position: absolute;
right: 0;
top: 0;
}
.header.mobile .mobile-search-modal.modal .modal-dialog .modal-close-button i {
font-size: 20px;
}
.header.mobile .mobile-search-modal.modal .modal-dialog .modal-header {
text-align: center;
margin-bottom: 20px;
color: var(--vt-text-color);
}
.header.mobile .mobile-search-modal.modal .modal-dialog .field {
width: 100%;
height: 35px;
box-sizing: border-box;
margin-bottom: 20px;
position: relative;
font-size: 14px;
color: var(--vt-text-color);
}
.header.mobile .mobile-search-modal.modal .modal-dialog .field-text input {
width: 100%;
height: 35px;
box-sizing: border-box;
color: var(--vt-text-color);
border: 1px solid var(--vt-border-color);
border-radius: var(--vt-border-radius);
background-color: var(--vt-bg-color-card);
text-indent: 10px;
}
.header.mobile .mobile-search-modal.modal .modal-dialog .field-button {
margin-bottom: 0px;
}
.header.mobile .mobile-search-modal.modal .modal-dialog .field-button button {
width: 100px;
height: 35px;
border: 1px solid transparent;
background-color: var(--vt-color-primary);
border-radius: var(--vt-border-radius);
color: var(--vt-text-color-inverse);
display: block;
margin: 0px auto;
}
.header.pc {
display: none;
}
/**
* header 900px+
*/
@media only screen and (min-width: 900px) {
.header.mobile {
display: none;
}
.header.pc {
display: block;
width: 100%;
height: 60px;
background-color: var(--vt-bg-color-card);
box-shadow: 0px 0px 3px 0 var(--vt-shadow-color);
z-index: 9;
position: relative;
}
.header.pc .header-nav {
width: 1200px;
height: 60px;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: flex-start;
position: relative;
}
.header.pc .header-nav a.logo {
display: flex;
height: 60px;
min-width: 120px;
width: auto;
align-items: center;
justify-content: flex-start;
font-size: var(--vt-font-size-lg);
float: left;
}
.header.pc .header-nav a.logo img {
display: block;
max-height: 70%;
}
/**
* PC 菜单样式
*/
.header.pc .pc-nav {
list-style: none;
height: 60px;
width: 820px;
float: left;
margin-left: 30px;
padding: 0px;
display: flex;
flex-direction: row;
overflow: visible;
}
.pc-nav li {
display: flex;
align-items: center;
position: relative;
z-index: 9;
height: 60px;
min-width: 60px;
box-sizing: border-box;
padding: 0px 15px;
flex: 0 0 auto;
}
.pc-nav li a {
font-size: var(--vt-font-size-base);
display: block;
white-space: nowrap;
height: 60px;
line-height: 60px;
box-sizing: border-box;
font-weight: normal;
}
/* .pc-nav .menu-item.fa-solid { font-weight: normal; } */
.pc-nav .menu-item.fa-solid::before {
font-size: 17px !important;
margin: 0 3px 0 0;
position: relative;
top: -1px;
}
.pc-nav li a i.fa-solid { font-size: 14px; font-weight: bold; }
.child-menu {
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 3px 0 var(--vt-shadow-color);
border-radius: var(--vt-border-radius);
position: absolute;
top: 60px;
left: 0;
display: none;
flex-direction: column;
}
.child-menu li {
height: auto;
}
.child-menu li a {
height: 45px;
line-height: 45px;
}
.child-menu li a i {
font-size: 16px;
font-weight: 600;
position: absolute;
top: 0px;
right: 3px;
}
.menu-item-has-children .menu-item-has-children {
box-sizing: border-box;
padding-right: 20px;
}
.menu-item-has-children .menu-item-has-children .child-menu {
top: 0px;
left: 100%;
}
.menu-item-has-children.active > .child-menu {
display: flex;
}
.menu-item-has-children .menu-item-has-children i{
top: 15px;
}
.menu-item-has-children.active > a i {
display: inline-block;
transform: rotate(180deg);
}
.menu-item-has-children .menu-item-has-children.active > a i {
display: inline-block;
transform: rotate(-90deg);
}
/* 登录注册等按钮 */
.header.pc .header-button-group {
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 10px;
margin-left: auto;
flex: 0 0 auto;
}
.header.pc .header-button-group .button {
height: 30px;
line-height: 30px;
padding: 0px 10px;
display: block;
font-size: 15px;
margin-left: 12px;
border-radius: var(--vt-border-radius);
border: 1px solid var(--vt-border-color);
}
.header.pc .header-button-group a.nav-button {
width: 40px;
/* height: 30px;
line-height: 30px; */
text-align: center;
vertical-align: middle;
cursor: pointer;
user-select: none;
}
.header.pc .header-button-group a.nav-button i {
font-size: 20px;
font-weight: 300;
}
.header.pc .header-button-group a.nav-button.dark-mode-button {
transition: 0.3s all linear;
}
.header.pc .header-button-group .dark-mode-button .moon {
display: block;
}
.header.pc .header-button-group .dark-mode-button .sun {
display: none;
}
.header.pc .header-button-group .dark-mode-button.dark .moon {
display: none;
}
.header.pc .header-button-group .dark-mode-button.dark .sun {
display: block;
}
.header.pc .search-toggle-button.active {
color: var(--vt-color-primary);
}
.header.pc .header-top-avatar {
width: 30px;
height: 30px;
margin-left: 10px;
}
.header.pc .header-top-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.header-nav::after {
content: "";
width: 0px;
height: 0px;
clear: both;
}
/* 搜索框 */
.search-widget {
width: 100%;
min-height: 160px;
display: none;
position: absolute;
top: 60px;
left: 0;
background-color: var(--vt-bg-color-card);
box-shadow: 0 5px 5px 0 var(--vt-shadow-color);
justify-content: flex-start;
flex-direction: column;
align-items: center;
border-top: 1px solid var(--vt-border-color);
}
.search-widget.show {
display: flex;
}
.search-widget .close-widget {
width: 600px;
display: flex;
justify-content: flex-end;
padding-top: 15px;
}
.search-widget .close-widget a i {
font-size: 25px;
}
.search-widget .search {
display: flex;
width: 500px;
height: 40px;
margin-top: 20px;
justify-content: space-between;
}
.search-widget .search input {
width: 410px;
outline: none;
border: 1px solid var(--vt-border-color);
border-radius: var(--vt-border-radius);
text-indent: 10px;
}
.search-widget .search input:focus {
box-shadow: 0 0 3px 0 var(--vt-color-primary);
}
.search-widget .search .search-button {
width: 80px;
border: 1px solid var(--vt-color-primary);
background-color: var(--vt-color-primary);
border-radius: var(--vt-border-radius);
}
.search-widget .search-button i {
font-size: 18px;
color: var(--vt-text-color-inverse);
}
/* 用户中心弹窗 */
.header.pc .user-widget {
position: absolute;
right: 0;
top: 60px;
width: 200px;
min-height: 100px;
padding: 15px;
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 5px 0 var(--vt-shadow-color);
border-radius: var(--vt-border-radius);
overflow: hidden;
display: none;
}
.header.pc .user-widget.show {
display: block;
}
.user-widget .user-header {
display: flex;
}
.user-widget .user-header .avatar {
width: 45px;
height: 45px;
object-fit: cover;
border-radius: 50%;
border: 1px solid var(--vt-border-color);
margin-right: 10px;
}
.user-widget .user-header .user-meta {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: var(--vt-font-size-sm);
}
.user-widget .user-header .user-nickname {
color: var(--vt-text-color);
font-size: var(--vt-font-size-base);
font-weight: bold;
}
.user-widget .user-header .user-more {
margin-top: 7px;
color: var(--vt-text-color-grey);
}
.user-widget .links-widget {
display: flex;
flex-direction: column;
margin-top: 15px;
}
.user-widget .links-widget a {
font-size: 15px;
margin: 5px 0;
}
.user-widget .links-widget i {
color: var(--vt-color-primary);
display: inline-block;
position: relative;
top: 1px;
font-size: 20px;
margin-right: 7px;
}
}
@charset "UTF-8";
/**
* footer
*
* @author: vtheme <mail@vtheme.cn>
* @link: https://vtheme.cn
*/
.footer {
width: 100%;
height: auto;
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 1px 0 var(--vt-shadow-color);
color: var(--vt-text-color);
font-size: var(--vt-font-size-sm);
padding: 25px 0;
}
.footer a {
font-size: var(--vt-font-size-sm);
color: var(--vt-text-color);
}
.footer-container {
border-top: 0px;
line-height: 23px;
padding: 0 15px;
text-align: center;
}
.footer-container a:hover {
color: var(--vt-color-primary);
}
.footer-container span {
text-align: center;
align-items: center;
margin-top: 20px;
padding: 0px 4px;
}
.footer-container span:nth-child(1) {
margin-top: 0px;
}
/**
* 颜色重写
*/
footer[darkness]{
background-color: #333;
color: #999 !important;
}
footer[darkness] div,
footer[darkness] span,
footer[darkness] p,
footer[darkness] a {
color: #999 !important;
}
.widget-container {
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 2px 0 var(--vt-shadow-color);
border-radius: var(--vt-border-radius);
}
.widget-container .widget-header {
padding: 15px 15px;
}
.widget-container .widget-header .widget-title {
font-size: var(--vt-font-size-base);
font-weight: 900;
color: var(--vt-text-color);
}
.widget-container:first-child {
margin-top: 0;
}
.widget-header.type-1 .widget-title {
position: relative;
padding-left: 15px;
}
.widget-header.type-1 .widget-title::after {
content: "";
width: 5px;
height: 14px;
background-color: var(--vt-color-primary);
border-radius: 2px;
display: block;
position: absolute;
top: 2px;
left: 0;
}
.widget-header.type-2 .widget-title {
position: relative;
padding-left: 15px;
}
.widget-header.type-2 .widget-title::after {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--vt-color-primary);
display: block;
position: absolute;
top: 6px;
left: 0;
}
.widget-header.type-3 .widget-title {
display: inline-block;
position: relative;
z-index: 99;
}
.widget-header.type-3 .widget-title::after {
content: "";
width: 100%;
height: 12px;
background-color: var(--vt-color-primary);
background-image: linear-gradient(90deg, var(--vt-color-primary), var(--vt-color-primary));
opacity: 0.5;
transform: scale(105%);
display: block;
position: absolute;
top: 6px;
left: 0;
z-index: -1;
}
.wp-block-search {
box-sizing: border-box;
padding: 15px;
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 2px 0 var(--vt-shadow-color);
border-radius: var(--vt-border-radius);
display: flex;
flex-direction: column;
}
.wp-block-search .wp-block-search__label {
font-size: var(--vt-font-size-base);
font-weight: 900;
color: var(--vt-text-color);
}
.wp-block-search .wp-block-search__inside-wrapper {
margin-top: 10px;
display: flex;
justify-content: space-between;
}
.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__input {
width: 92%;
height: 35px;
box-sizing: border-box;
padding: 0 10px;
background: var(--vt-bg-color);
color: var(--vt-text-color);
border: 1px solid var(--vt-border-color);
border-radius: var(--vt-border-radius);
font-size: var(--vt-font-size-sm);
}
.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button {
width: 100px;
margin-left: 10px;
background-color: var(--vt-bg-color-card);
border-radius: 3px;
border: 1px solid var(--vt-border-color);
font-size: var(--vt-font-size-sm);
color: var(--vt-text-color);
}
.image-title.widget-container {
box-sizing: border-box;
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 2px var(--vt-shadow-color);
border-radius: var(--vt-border-radius);
}
/**
* 图文列表
*/
.image-title.widget-container .item-list-wrapper {
padding: 0 15px 15px 15px;
box-sizing: border-box;
}
.image-title.widget-container ul.item-list {
width: auto;
display: flex;
justify-content: normal;
flex-wrap: wrap;
}
.image-title.widget-container ul.item-list .item-widget {
width: 100%;
margin: 7px 15px 7px 0;
box-sizing: border-box;
overflow: hidden;
}
.image-title.widget-container ul.item-list .item-widget a {
display: flex;
width: 100%;
height: 65px;
justify-content: flex-start;
font-size: var(--vt-font-size-sm);
}
.image-title.widget-container ul.item-list .item-widget a img {
width: 90px;
height: 65px;
border-radius: 3px;
flex-basis: auto;
flex-shrink: 0;
object-fit: cover;
}
.image-title.widget-container ul.item-list .item-widget a .item-title {
padding: 0px 0 3px 10px;
display: flex;
justify-content: space-between;
flex-direction: column;
flex-shrink: 1;
}
.image-title.widget-container ul.item-list .item-widget a .item-title div {
font-size: 15px;
line-height: 18px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.image-title.widget-container ul.item-list .item-widget a .item-title span {
font-size: 10px;
color: var(--vt-text-color-grey);
}
/**
* 文章列表 文章模块
*/
.article.widget-container .article-list {
counter-reset: num1 0;
padding: 0 15px 15px 15px;
}
.article.widget-container .article-list .article-item {
height: 38px;
line-height: 38px;
}
.article.widget-container .article-list .article-item a {
font-size: var(--vt-font-size-base);
display: block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.article.widget-container .article-list .article-item a:hover {
color: var(--vt-color-primary);
}
.article.widget-container .article-list .article-item a::before {
counter-increment: num1 1;
content: counter(num1) ". ";
}
.article.widget-container .article-list .article-item:first-child {
margin-top: 0px;
}
/**
* 热门文章
*/
.hot-list {
margin-top: 0px;
counter-reset: num1 0;
}
.hot-list li {
display: flex;
padding: 15px 0;
}
.hot-list li .hot-order {
width: 25px;
height: 18px;
background-color: var(--vt-bg-color-grey);
border-radius: 0 11px 11px 0;
position: relative;
font-size: 12px;
font-weight: 900;
text-align: center;
line-height: 18px;
flex: 0 0 auto;
}
.hot-list li .hot-order::before {
content: "";
display: block;
width: 0;
height: 0;
border: 3px solid var(--vt-bg-color-grey);
border-bottom: 3px solid transparent;
border-left: 3px solid transparent;
position: absolute;
bottom: -5px;
display: none;
}
.hot-list li .hot-order::after {
counter-increment: num1 1;
content: counter(num1);
}
.hot-list li .item {
padding-left: 10px;
}
.hot-list li .item a {
font-size: var(--vt-font-size-base);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.hot-list li .item .time {
font-size: var(--vt-font-size-sm);
color: var(--vt-text-color-grey);
margin-top: 15px;
}
.hot-list > li:nth-child(1) .hot-order {
background-color: #f35;
color: #fff;
}
.hot-list > li:nth-child(1) .hot-order::before {
border: 3px solid #f35;
border-bottom: 3px solid transparent;
border-left: 3px solid transparent;
}
.hot-list > li:nth-child(2) .hot-order {
background-color: #ffa41b;
color: #fff;
}
.hot-list > li:nth-child(2) .hot-order::before {
border: 3px solid #ffa41b;
border-bottom: 3px solid transparent;
border-left: 3px solid transparent;
}
.hot-list > li:nth-child(3) .hot-order {
background-color: #1a85ff;
color: #fff;
}
.hot-list > li:nth-child(3) .hot-order::before {
border: 3px solid #1a85ff;
border-bottom: 3px solid transparent;
border-left: 3px solid transparent;
}
.hot-list > li:nth-child(4) .hot-order {
background-color: #4cd964;
color: #fff;
}
.hot-list > li:nth-child(4) .hot-order::before {
border: 3px solid #4cd964;
border-bottom: 3px solid transparent;
border-left: 3px solid transparent;
}
/**
* 图片列表
*/
.images-list-container {
box-sizing: border-box;
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 2px 0 var(--vt-shadow-color);
border-radius: var(--vt-border-radius);
}
.images-list-container .item-list-wrapper {
padding: 0 15px 15px 15px;
box-sizing: border-box;
}
.images-list-container ul.item-list {
width: auto;
margin-right: -15px;
display: flex;
justify-content: normal;
flex-wrap: wrap;
}
.images-list-container ul.item-list .item-widget {
width: auto;
flex: 0 0 calc(50% - 15px);
margin: 0px 15px 15px 0;
box-sizing: border-box;
}
.images-list-container ul.item-list .item-widget a {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
font-size: var(--vt-font-size-base);
}
.images-list-container ul.item-list .item-widget a img {
width: 100%;
height: 100px;
object-fit: cover;
border-radius: var(--vt-border-radius);
}
.images-list-container ul.item-list .item-widget a .item-title {
margin-top: 5px;
font-size: 15px;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 18px;
text-align: justify;
}
.images-list-container ul.item-list .item-widget a .item-price {
margin-top: 5px;
color: #f44336;
}
/**
* 分类列表
*/
.category.widget-container .category-list {
counter-reset: num1 0;
padding: 0 15px 15px 15px;
}
.side-menu-widget{}
.side-menu-widget .title{
font-size: 28px;
font-weight: bold;
color: var(--vt-color-primary);
}
.side-menu{
margin: 12px 0 0 0;
color: var(--vt-color-primary);
}
.side-menu a{
padding: 7px 0;
margin: 0px 0;
}
.side-menu .menu-item{ flex-direction: row; }
.side-menu .menu-item > a{ display: flex; justify-content:space-between; }
.side-menu .menu-item > a .arrow{
font-size: 15px;
position: relative;
top: -1px;
display: inline-block;
width: 18px;
height: 18px;
text-align: center;
line-height: 18px;
vertical-align: middle;
transition: all 0.06s linear;
}
.side-menu .menu-item .side-child-menu{ display: block; }
.side-menu .menu-item.hide-children .side-child-menu{ display: none; }
.side-menu .menu-item.hide-children .arrow{ transform:rotate(180deg); }
.side-menu .menu-item .current-menu-item a{ color: var(--vt-color-primary); }
.side-child-menu{ padding: 0 0 0 30px; }
.fa-solid.menu-item::before{ display: inline-block; }
.fa-solid.menu-item > a{ display: inline-block; }
.side-menu .menu-item.fa-solid::before{ display:none }
/**
* 作者卡片
*/
.user-card-container {
box-sizing: border-box;
border-radius: var(--vt-border-radius);
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 2px 0 var(--vt-shadow-color);
border-radius: var(--vt-border-radius);
margin: 0px 0 0 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.user-header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 15px;
}
.user-header .user-avatar {
width: 80px;
height: 80px;
}
.user-header .user-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.user-header .nickname {
margin: 15px 0 0 0;
font-size: 22px;
font-weight: bold;
}
.user-header .description {
margin: 10px 0 0 0;
padding: 0 45px;
line-height: 20px;
font-size: var(--vt-font-size-sm);
color: var(--vt-text-color-grey);
}
.user-meta {
display: flex;
justify-content: center;
margin: 12px 0 15px 0;
color: var(--vt-text-color-grey);
}
.user-meta .meta-item {
min-width: 20px;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 15px;
font-size: 12px;
}
.user-meta .meta-item span {
margin-top: 3px;
}
.user-meta .meta-item span:first-child {
margin-top: 5px;
font-size: 16px;
font-weight: bold;
}
body.dark-mode .user-card {
background-color: var(--vt-bg-color-card);
}
/**
* HTML 卡片
*/
.html-card-container {
box-shadow: 0 0 2px 0 var(--vt-shadow-color);
overflow: hidden;
/* padding: 15px; */
}
.html-card-container img {
/* width: 100%; */
height: auto;
/* border-radius: var(--vt-border-radius); */
display: block;
}
/**
* Tags
*/
.tag-container {
margin-top: 10px;
overflow: hidden;
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 2px 0 var(--vt-shadow-color);
border-radius: var(--vt-border-radius);
box-sizing: border-box;
}
.tag-container .tag-list {
clear: both;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin-right: -10px;
padding: 15px;
}
.tag-container .tag-list .tag-item {
overflow: hidden;
border-radius: 3px;
margin: 0 10px 10px 0;
padding: 3px 5px;
text-align: center;
cursor: pointer;
font-size: 13px;
display: block;
color: var(--vt-text-color);
border: 1px solid var(--vt-border-color);
}
.tag-container .tag-list .tag-item:hover {
color: var(--vt-color-primary);
border: 1px solid var(--vt-color-primary);
}
.tag-container .tag-list .tag-item span {
font-size: 16px;
font-weight: bold;
}
@media only screen and (min-width: 900px) {
.tag-container {
margin-top: 20px;
}
}
@charset "UTF-8";
.main-container {
width: 100%;
margin: 0 auto;
padding: 0 8px 8px 8px;
box-sizing: border-box;
}
.main-container::after {
content: "";
display: block;
clear: both;
}
.main-container .main-widget {
width: 100%;
margin-bottom: 8px;
}
.main-container .main-widget .header {
font-size: var(--vt-font-size-base);
margin-bottom: 15px;
}
.main-container .main-widget .posts-widget {
width: 100%;
margin-right: -8px;
margin-bottom: -8px;
display: flex;
justify-content: normal;
flex-wrap: wrap;
}
.main-container .media-widget {
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 2px 0 var(--vt-shadow-color);
border-radius: var(--vt-border-radius);
}
.header + .main-container {
padding-top: 8px;
}
@media only screen and (min-width: 900px) {
.main-container {
width: 1200px;
margin: 0 auto;
padding: 0 0 20px 0;
display: flex;
justify-content: flex-start;
}
.main-container::after {
content: "";
display: block;
clear: both;
}
.main-container .main-widget {
width: 880px;
margin-bottom: 0;
}
.main-container .main-widget > *:nth-child(1){
margin-top: 0;
}
.main-container .main-widget .posts-widget {
width: auto;
margin-right: -20px;
margin-bottom: -20px;
display: flex;
justify-content: normal;
flex-wrap: wrap;
}
.header + .main-container {
padding-top: 20px;
}
.main-container .main-widget .posts-widget .card-item {
width: calc(25% - 20px);
flex: 0 0 calc(25% - 20px);
margin-right: 20px;
margin-bottom: 20px;
}
.main-container .main-widget .posts-widget.col-num-3 .card-item {
width: calc(33.33% - 20px);
width: 280px;
flex: 0 0 auto;
}
.main-container .main-widget .posts-widget.col-num-4 .card-item {
width: calc(25% - 20px);
flex: 0 0 auto;
}
.main-container .main-widget .posts-widget.col-num-5 .card-item {
width: calc(20% - 20px);
flex: 0 0 auto;
}
.main-container .main-widget .posts-widget.col-num-6 .card-item {
width: calc(16.66% - 20px);
flex: 0 0 auto;
}
}
.sider > div {
margin-bottom: 10px;
}
.sider > div:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 900px) {
.sider {
width: 300px;
flex: 0 0 300px;
margin-left: 20px;
position: relative;
}
/* 最后一个模块粘性定位 */
.sider .widget-container:last-child {
position: sticky;
top: 20px;
}
.sider > div {
margin-bottom: 20px;
}
}
@media only screen and (min-width: 900px) {
.main-container[full-width] .main-widget {
width: 100%;
}
.main-container[full-width] .sider {
display: none;
}
}
/**
* 侧边栏居左覆盖
* body[sidebar-position="left"]
*/
[sidebar-position="left"] .main-container{
flex-direction: row-reverse;
}
[sidebar-position="left"] .main-container .sider{
margin-left: 0px;
}
@media only screen and (min-width: 900px) {
[sidebar-position="left"] .main-container .sider{
margin-right: 20px;
}
}
.card-item {
width: calc(50% - 8px);
flex: 0 0 calc(50% - 8px);
margin: 0 8px 8px 0;
box-sizing: border-box;
box-shadow: 0 0 2px 0 var(--vt-shadow-color);
border-radius: var(--vt-border-radius);
background-color: var(--vt-bg-color-card);
position: relative;
}
.card-item a.card-image {
display: block;
width: 100%;
height: 0;
padding-bottom: 100%;
position: relative;
}
.card-item a.card-image img {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: var(--vt-border-radius) var(--vt-border-radius) 0 0;
object-fit: cover;
}
.card-item .item-info {
padding: 10px 10px;
box-sizing: border-box;
font-size: 13px;
}
.card-item .item-info a.title {
display: block;
font-size: var(--vt-font-size-base);
font-weight: 500;
line-height: 20px;
min-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
}
.card-item .item-info .description {
margin-top: 3px;
font-size: var(--vt-font-size-sm);
color: #666;
max-height: 40px;
line-height: 20px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.card-item .item-price {
display: flex;
justify-content: flex-start;
align-items: flex-end;
width: 100%;
height: 30px;
}
.item-price .price {
padding: 3px 0px;
color: #f44336;
font-size: 15px;
}
.item-price .item-delete {
color: var(--vt-text-color-grey) !important;
text-decoration: line-through;
font-size: 10px;
margin-left: 10px;
}
.card-meta {
box-sizing: border-box;
padding: 5px 5px;
color: var(--vt-text-color-grey);
font-size: var(--vt-font-size-sm);
}
.card-meta .meta i {
position: relative;
top: 1px;
}
.media-item {
width: 100%;
padding: 15px 15px;
box-sizing: border-box;
font-size: var(--vt-font-size-base);
display: flex;
border-bottom: 1px solid var(--vt-border-color);
}
.media-item:hover .media-thumbnail img {
transition: all 0.2s linear;
transform: scale(1.03);
}
.media-item .media-thumbnail {
flex-shrink: 0;
width: 30%;
margin-right: 15px;
}
.media-item .media-thumbnail a {
display: block;
overflow: hidden;
width: 100%;
height: 0px;
padding-bottom: 70%;
border-radius: 5px;
position: relative;
}
.media-item .media-thumbnail img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
.media-item .media-main {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.media-main .media-title {
display: flex;
justify-content: flex-start;
}
.media-main .media-title .sticky {
height: 20px;
line-height: 20px;
margin-right: 10px;
padding: 2px 4px;
border-radius: 3px;
font-size: 14px;
background-color: var(--vt-color-primary);
color: #fff;
flex: 0 0 auto;
}
.media-main .media-title a {
font-size: var(--vt-font-size-base);
font-weight: bold;
line-height: 25px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
color: var(--vt-text-color);
word-break: break-all;
}
.media-main .media-title a:hover {
color: var(--vt-color-primary);
}
.media-main .media-description {
word-break: break-all;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 25px;
font-size: 15px;
color: var(--vt-text-color-grey);
margin-top: 0;
margin-right: 5px;
display: none;
}
.media-main .media-meta {
margin-top: 3px;
color: var(--vt-text-color-grey);
font-size: var(--vt-font-size-sm);
}
.media-main .media-meta i {
font-size: 16px;
vertical-align: -1px;
margin: 0 2px 0 0;
}
.media-main .media-meta span {
margin-right: 10px;
}
.media-main .media-meta .author img {
width: 23px;
height: 23px;
border-radius: 50%;
margin-bottom: -5px;
margin-right: 3px;
box-shadow: 0 1px 3px var(--vt-shadow-color);
object-fit: cover;
position: relative;
top: 1px;
}
.media-main .media-meta .author {
color: var(--vt-text-color-grey);
font-size: 14px;
}
.media-main .media-meta span.date {
display: none;
}
@media only screen and (min-width: 900px) {
.media-item .media-thumbnail {
width: 200px;
height: 138px;
}
.media-item .media-main {
height: 140px;
justify-content: flex-start;
}
.media-main .media-description {
margin-top: 10px;
line-height: 25px;
display: -webkit-box;
}
.media-main .media-meta {
margin-top: auto;
}
.media-main .media-meta span.date {
display: inline-block;
}
}
@charset "UTF-8";
/**
* 分类栏目顶部
*/
.banner {
box-sizing: border-box;
width: 100%;
min-height: 20vw;
color: #f8f8f8;
font-size: var(--vt-font-size-sm);
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
background-position: center;
background-repeat: no-repeat;
background-size: 100% auto;
}
.banner::after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.banner .banner-container {
width: 100%;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 15px;
text-align: center;
}
.banner .banner-container .title {
font-size: var(--vt-font-size-base);
font-weight: 900;
}
.banner .banner-container .description {
margin-top: 10px;
font-size: var(--vt-font-size-sm);
line-height: 18px;
}
@media screen and (min-width: 900px) {
.banner {
min-height: 80px;
padding: 10px 0;
}
.banner .banner-container {
width: 1200px;
height: 100%;
margin: 0 auto;
}
.banner .banner-container .title {
font-size: var(--vt-font-size-lg);
font-weight: 900;
}
.banner .banner-container .description {
width: 500px;
margin-top: 10px;
font-size: var(--vt-font-size-base);
line-height: 25px;
}
}
.banner ~ .main-container {
margin-top: 20px;
}
@charset "UTF-8";
/*
* 文章列表样式
*/
.media-list {
box-sizing: border-box;
margin: 0px 0px 0px 0;
background-color: var(--vt-bg-color-card);
box-shadow: 0 0 2px 0 var(--vt-shadow-color);
border-radius: var(--vt-border-radius);
}
@media only screen and (min-width: 900px) {
.media-item {
padding: 15px !important;
}
.media-item .media-widget .media-widget-right {
width: 160px;
}
.media-item .media-widget .media-widget-right img {
width: 160px;
height: 100px;
margin-top: 5px;
border-radius: 3px;
object-fit: cover;
}
.media-item .media-widget .media-thumbnail {
flex-shrink: 0;
width: 160px !important;
height: 85px !important;
}
.media-item .media-widget .media-thumbnail img {
width: 100%;
height: 100%;
}
}
.cards-section {
width: 100%;
box-sizing: border-box;
margin: 20px auto;
padding: 0px;
}
.cards-section::after {
content: "";
display: block;
clear: both;
}
.cards-section .cards-list {
width: auto;
margin-right: -8px;
display: flex;
justify-content: normal;
flex-wrap: wrap;
}
.cards-section .cards-list::after {
content: "";
display: block;
clear: both;
}
@media only screen and (min-width: 900px) {
.cards-section {
width: 100%;
padding: 0;
margin: 11px auto;
}
.cards-section .cards-list {
margin-right: -20px;
padding: 0;
}
.cards-section .cards-list .card-item {
width: auto;
margin: 0 20px 20px 0;
flex: 0 0 calc(33.33% - 20px);
}
}
.user-item {
padding: 10px 0;
display: flex;
font-size: 15px;
line-height: 25px;
}
.user-item:first-child {
margin-top: 20px;
}
.user-item .user-item-header {
width: 70px;
flex: 0 0 70px;
color: var(--vt-text-color-grey);
}
.user-item-body.description {
text-align: justify;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.achievement {
display: flex;
}
.achievement .achievement-widget {
width: 33.33%;
box-sizing: border-box;
outline: 1px solid green;
padding: 20px;
display: flex;
flex-direction: column;
flex: 0 0 calc(33.33% - 0px);
align-items: center;
}
@charset "UTF-8";
/*
* 用户中心
*/
.user-center-container {
width: calc(100% - 16px);
margin: 10px auto 0px auto;
}
.user-center-container::after {
content: "";
width: 0;
height: 0;
display: block;
clear: both;
}
.user-center-sidebar {
width: calc(100% - 40px);
width: 100%;
float: left;
}
.user-center-sidebar > * {
margin-top: 10px;
}
.user-center-sidebar > *:nth-child(1) {
margin-top: 0;
}
/* user profile */
.user-profile {
width: 100%;
height: 200px;
color: var(--vt-text-color);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--vt-bg-color-card);
border-radius: var(--vt-border-radius);
box-shadow: 0 0 2px 0 var(--vt-shadow-color);
}
.user-profile .user-avatar {
width: 70px;
height: 70px;
border-radius: 50%;
border: 4px solid var(--vt-bg-color);
cursor: pointer;
}
.user-profile .user-avatar a.update-avatar-button {
display: none;
}
.user-profile .user-avatar img.avatar {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.user-profile .user-info {
width: auto;
height: auto;
}
.user-profile .user-info .nickname {
font-size: 16px;
margin-top: 10px;
}
/* user center nav */
.user-center-sidebar .user-nav {
background-color: var(--vt-bg-color-card);
border-radius: var(--vt-border-radius);
padding: 20px;
box-shadow: 0 0 2px 0 var(--vt-shadow-color);
display: flex;
flex-wrap: wrap;
}
.user-nav a.sidebar-action {
width: 25%;
height: 0;
padding-bottom: 25%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
font-size: var(--vt-font-size-sm);
}
.user-nav a.sidebar-action i {
font-size: 40px;
}
.user-nav a.sidebar-action i:last-child {
display: none;
}
.user-nav a.sidebar-action.active {
color: var(--vt-color-primary);
}
.user-center-panel {
width: calc(100% - 40px);
min-height: 500px;
padding: 20px;
margin-top: 10px;
margin-bottom: 20px;
float: right;
background-color: var(--vt-bg-color-card);
border-radius: var(--vt-border-radius);
box-shadow: 0 0 2px 0 var(--vt-shadow-color);
color: var(--vt-text-color);
}
.user-center-panel h3 {
font-size: var(--vt-font-size-base);
margin-top: 0px;
}
.user-no-content {
font-size: 13px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: var(--vt-text-color-grey);
margin-top: 100px;
}
.user-no-content img {
width: 100px;
}
.user-no-content span {
margin-top: 10px;
}
/*
* 900px宽度 用户中心 样式
*/
@media only screen and (min-width: 900px) {
.user-center-container {
width: 1200px;
margin: 20px auto 0px auto;
}
.user-center-sidebar {
width: 300px;
float: left;
margin-top: 0px;
}
.user-center-sidebar > * {
margin-top: 20px;
}
.user-center-sidebar > *:nth-child(1) {
margin-top: 0;
}
.user-center-panel {
width: 840px;
margin-top: 0;
margin-bottom: 30px;
}
.user-nav a.sidebar-action {
width: 100%;
height: 50px;
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
font-size: var(--vt-font-size-base);
padding-bottom: 0;
}
.user-nav a.sidebar-action i {
font-size: 30px;
}
.user-nav a.sidebar-action i:last-child {
font-size: 20px;
margin-left: auto;
display: block;
}
.user-nav a.sidebar-action span {
margin-left: 10px;
}
}
.user-center-panel .media-item {
padding: 15px 0 !important;
}
.dark-mode input, .dark-mode textarea {
color: var(--vt-text-color);
background-color: var(--vt-bg-color-card);
}
.dark-mode input:focus-visible, .dark-mode textarea:focus-visible {
outline: 1px solid var(--vt-color-primary);
}
/**
*
* @LightTip.css
* @author xinxuzhang
* @create 15-06-25
* @edit 17-06-19
* @edit 19-09-13 @ziven27 [去jQuery]
* @edit 20-05-19 @popeyesailorman [add custom element support]
**/
/*
* 结构如下：
* <ui-lighttip></ui-lighttip>
*
*/
/* lighttip基础变量 */
:root {
--ui-lighttip-width: 25em;
--ui-loading-lighttip: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M512 1024q-104 0-199-40-92-39-163-110T40 711Q0 616 0 512q0-15 10.5-25.5T36 476t25.5 10.5T72 512q0 90 35 171 33 79 94 140t140 95q81 34 171 34t171-35q79-33 140-94t95-140q34-81 34-171t-35-171q-33-79-94-140t-140-95q-81-34-171-34-15 0-25.5-10.5T476 36t10.5-25.5T512 0q104 0 199 40 92 39 163 110t110 163q40 95 40 199t-40 199q-39 92-110 163T711 984q-95 40-199 40z' fill='%232a80eb'/%3E%3C/svg%3E") no-repeat;
}
ui-lighttip {
display: flex;
justify-content: center;
width: var(--ui-lighttip-width, 25em);
font-size: var(--ui-font, 14px);
text-align: left;
line-height: 20px;
color: var(--ui-white, #ffffff);
background-color: var(--ui-dark, #4c5161);
border-radius: calc(var(--ui-radius, 4px) - 2px);
padding: 15px 10px;
position: fixed;
top: calc(var(--ui-sort-index, 0) * 60px + 10px);
left: 50%;
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
z-index: 19;
outline: none;
cursor: default;
transition: top var(--ui-animate-time, .2s);
animation: fadeIn .25s both;
}
ui-lighttip:not([open]) {
display: none;
}
ui-lighttip[type="success"] {
background-color: var(--ui-green, #1cad70);
}
ui-lighttip[type="error"] {
background-color: var(--ui-red, #eb4646);
}
ui-lighttip[type="warning"] {
background-color: var(--ui-orange, #f59b00);
}
ui-lighttip[type="success"]::before,
ui-lighttip[type="error"]::before,
ui-lighttip[type="warning"]::before {
content: '';
width: 20px;
height: 20px;
flex-shrink: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='%23FFF' d='M163.038 57.226c-5.217-4.162-5.713-4.289-11.674-7.244-2.683-1.344-6.633 2.113-8.569 4.67l-52.648 67.042-34.301-43.387c-1.94-2.558-5.516-3.499-8.2-2.293-6.11 3.095-5.496 2.992-10.715 7.029-2.386 1.883-2.535 5.245-.597 7.793 0 0 36.97 46.917 41.44 52.565 6.557 8.068 18.483 7.669 24.744 0 4.62-5.781 61.117-78.506 61.117-78.506 1.937-2.559 1.788-5.918-.597-7.669z'/%3E%3C/svg%3E") no-repeat;
background-size: contain;
transform: translate(-5px, 0);
}
ui-lighttip[type="error"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='%23FFF' d='M116.153 99.999l36.484-36.486a7.369 7.369 0 0 0 0-10.423l-5.212-5.213a7.375 7.375 0 0 0-10.425 0l-36.484 36.485-36.485-36.485a7.374 7.374 0 0 0-10.424 0l-5.211 5.213a7.365 7.365 0 0 0 0 10.423L84.88 99.999l-36.483 36.485a7.369 7.369 0 0 0 0 10.426l5.211 5.213a7.38 7.38 0 0 0 10.424 0l36.485-36.486L137 152.122a7.38 7.38 0 0 0 10.425 0l5.212-5.213a7.372 7.372 0 0 0 0-10.426l-36.484-36.484z'/%3E%3C/svg%3E");
}
ui-lighttip[type="warning"]::before {
background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiPjxwYXRoIGQ9Ik00MTMgMTc4YzUuNSAwIDEwLjEgNC42IDEwLjEgMTAuMVY0MTNjMCA1LjUtNC42IDEwLjEtMTAuMSAxMC4xSDE4OC4xYy01LjUgMC0xMC4xLTQuNi0xMC4xLTEwLjFWMTg4LjFjMC01LjUgNC42LTEwLjEgMTAuMS0xMC4xSDQxM20wLTUwSDE4OC4xYy0zMy4xIDAtNjAuMSAyNy02MC4xIDYwLjFWNDEzYzAgMzMuMSAyNyA2MC4xIDYwLjEgNjAuMUg0MTNjMzMuMSAwIDYwLjEtMjcgNjAuMS02MC4xVjE4OC4xYzAtMzMuMS0yNy02MC4xLTYwLjEtNjAuMXptNDIzLjEgMzQ1LjFINjExLjJjLTMzLjEgMC02MC4xLTI3LTYwLjEtNjAuMVYxODguMWMwLTMzLjEgMjctNjAuMSA2MC4xLTYwLjFoMjI0LjljMzMuMSAwIDYwLjEgMjcgNjAuMSA2MC4xVjQxM2MwIDMzLTI3LjEgNjAuMS02MC4xIDYwLjF6TTQxMyA2MDEuM2M1LjUgMCAxMC4xIDQuNiAxMC4xIDEwLjF2MjI0LjljMCA1LjUtNC42IDEwLjEtMTAuMSAxMC4xSDE4OC4xYy01LjUgMC0xMC4xLTQuNi0xMC4xLTEwLjFWNjExLjRjMC01LjUgNC42LTEwLjEgMTAuMS0xMC4xSDQxM20wLTUwSDE4OC4xYy0zMy4xIDAtNjAuMSAyNy02MC4xIDYwLjF2MjI0LjljMCAzMy4xIDI3IDYwLjEgNjAuMSA2MC4xSDQxM2MzMy4xIDAgNjAuMS0yNyA2MC4xLTYwLjFWNjExLjRjMC0zMy0yNy02MC4xLTYwLjEtNjAuMXptNDIzLjEgNTBjNS41IDAgMTAuMSA0LjYgMTAuMSAxMC4xdjIyNC45YzAgNS41LTQuNiAxMC4xLTEwLjEgMTAuMUg2MTEuMmMtNS41IDAtMTAuMS00LjYtMTAuMS0xMC4xVjYxMS40YzAtNS41IDQuNi0xMC4xIDEwLjEtMTAuMWgyMjQuOW0wLTUwSDYxMS4yYy0zMy4xIDAtNjAuMSAyNy02MC4xIDYwLjF2MjI0LjljMCAzMy4xIDI3IDYwLjEgNjAuMSA2MC4xaDIyNC45YzMzLjEgMCA2MC4xLTI3IDYwLjEtNjAuMVY2MTEuNGMwLTMzLTI3LjEtNjAuMS02MC4xLTYwLjF6IiBmaWxsPSIjZmZmIi8+PC9zdmc+");
}
/* 移动端居中呈现 */
@media (max-width: 640px) {
ui-lighttip {
width: auto;
padding-left: 1rem; padding-right: 1rem;
max-width: calc(100% - 2rem - 2em);
}
}
/* 全局loading */
ui-lighttip[type="loading"] {
top: 50%;
left: 50%;
width: auto;
padding-right: calc(10px + .5em);
max-width: calc(100% - 2rem - 2em);
transform: translate(-50%, -50%);
border-radius: var(--ui-radius, 4px);
background-color: rgba(25, 28, 34, 0.88);
visibility: hidden;
opacity: 0;
}
ui-lighttip[type="loading"][open]::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
margin: 0 .5em;
background: var(--ui-loading-lighttip) no-repeat center / 100%;
animation: spin 1s linear infinite;
filter: brightness(100);
}
ui-lighttip[type="loading"][open]{
visibility: visible;
opacity: 1;
}
ui-lighttip[type="loading"]::before{
display: none;
}
@media (prefers-reduced-motion: reduce) {
ui-lighttip {
animation: none;
}
}