init...
This commit is contained in:
@@ -0,0 +1,121 @@
|
||||
/* 处理单页背景 */
|
||||
body[data-type="album"] #web_bg {
|
||||
background: var(--anzhiyu-background);
|
||||
}
|
||||
body[data-type="album"] #page {
|
||||
border: 0;
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
background: 0 0 !important;
|
||||
}
|
||||
body[data-type="album"] #page .page-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 变量定义 */
|
||||
:root {
|
||||
--album-background-dark: #2d3548;
|
||||
--album-text-light: rgba(255, 255, 255, 0.6);
|
||||
--album-text-lighter: rgba(255, 255, 255, 0.9);
|
||||
--album-spacing-s: 8px;
|
||||
--album-spacing-m: 16px;
|
||||
--album-spacing-l: 24px;
|
||||
--album-spacing-xl: 32px;
|
||||
--album-spacing-xxl: 64px;
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
#album .card-album {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
margin: var(--album-spacing-xxl) 0 0;
|
||||
}
|
||||
#album .card-album .album-content-nocover {
|
||||
width: calc(100% / 4 - 40px);
|
||||
}
|
||||
|
||||
#album .card-album .card {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: calc(100% / 4 - 10px);
|
||||
padding: 10px;
|
||||
}
|
||||
#album .card-album .card:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#album .card_cover {
|
||||
border-radius: var(--album-spacing-l);
|
||||
filter: brightness(0.75) saturate(1.2) contrast(0.85);
|
||||
transform-origin: center;
|
||||
transform: scale(1) translateZ(0);
|
||||
transition: filter 200ms linear, transform 200ms linear;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
height: 550px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: var(--album-spacing-l);
|
||||
}
|
||||
|
||||
#album .card:hover .card_cover {
|
||||
transform: scale(1.05) translateZ(0);
|
||||
filter: brightness(0.9) saturate(1.2) contrast(1);
|
||||
}
|
||||
|
||||
#album .card-album:hover > .card:not(:hover) .card_cover {
|
||||
filter: brightness(0.5) saturate(0.9) contrast(1.2) blur(20px);
|
||||
}
|
||||
|
||||
#album .card__content {
|
||||
left: 0;
|
||||
padding: var(--album-spacing-l);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#album .card__category {
|
||||
color: var(--album-text-light);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: var(--album-spacing-s);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#album .card__heading {
|
||||
color: var(--album-text-lighter);
|
||||
font-size: 1.9rem;
|
||||
text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
|
||||
line-height: 1.4;
|
||||
word-spacing: 100vw;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
#album img.card_cover {
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
#album .card-album .card {
|
||||
width: calc(100% / 2 - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 540px) {
|
||||
#album .card-album .card {
|
||||
width: calc(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#album .card-album {
|
||||
margin-top: 10px;
|
||||
}
|
||||
#album .card-album .card {
|
||||
padding: 10px 0px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,309 @@
|
||||
/* 处理单页背景 */
|
||||
body[data-type="album_detail"] #web_bg {
|
||||
background: var(--anzhiyu-background);
|
||||
}
|
||||
body[data-type="album_detail"] #page {
|
||||
border: 0;
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
background: 0 0 !important;
|
||||
}
|
||||
body[data-type="album_detail"] #page .page-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 处理页面样式 */
|
||||
#album_detail .album-container-img {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
#album_detail .album-container-img .album-content-noimg {
|
||||
width: calc(100% / 2 - 5px);
|
||||
}
|
||||
|
||||
#album_detail .album-content-img img {
|
||||
object-fit: cover;
|
||||
max-width: 100%;
|
||||
border-radius: 12px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
#album_detail .album-content-img {
|
||||
height: 100%;
|
||||
max-height: 300px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#album_detail .album-content .datacont {
|
||||
order: 0;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
width: 100%;
|
||||
line-height: 1.38;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: justify;
|
||||
}
|
||||
#album_detail p {
|
||||
margin: 0px;
|
||||
}
|
||||
#album_detail div.album-content {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#album_detail .timeline ul li.album-item {
|
||||
position: relative;
|
||||
width: 32%;
|
||||
border: var(--style-border-always);
|
||||
border-radius: 12px;
|
||||
padding: 1rem 1rem 0.5rem;
|
||||
transition: all 0.3s ease 0s;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
background: var(--anzhiyu-card-bg);
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
margin-right: 2%;
|
||||
}
|
||||
#album_detail .timeline #waterfall.show {
|
||||
opacity: 1;
|
||||
}
|
||||
#album_detail .timeline #waterfall {
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease 0s;
|
||||
}
|
||||
#album_detail ul.list {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#album_detail {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
#album_detail > section > ul > li.album-item {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#album-tips {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#album_detail .timeline ul li.album-item hr {
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin: 8px 0px;
|
||||
border: 1px dashed var(--anzhiyu-theme-op);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#album_detail .album-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
#album_detail > section > ul > li > div .album-info-time,
|
||||
#album_detail > section > ul > li > div .album-info-address,
|
||||
#album_detail > section > ul > li > div .album-info-from {
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
font-size: 0.7rem;
|
||||
background-color: var(--anzhiyu-gray-op);
|
||||
padding: 0px 8px;
|
||||
border-radius: 20px;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
margin: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#album_detail > section > ul > li > div .album-info-time time {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#album_detail > section > ul > li > div .album-info-address,
|
||||
#album_detail > section > ul > li > div .album-info-from {
|
||||
margin-left: 4px;
|
||||
}
|
||||
#album_detail > section > ul > li > div .album-info-address span,
|
||||
#album_detail > section > ul > li > div .album-info-from span {
|
||||
margin-left: 4px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#album_detail .album-info .anzhiyufont.anzhiyu-icon-instagram {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
#album_detail .album-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#album_detail .album-bottom .album-reply {
|
||||
cursor: pointer;
|
||||
width: 5%;
|
||||
}
|
||||
|
||||
#album_detail .timeline ul li.album-item:hover {
|
||||
border: var(--style-border-hover);
|
||||
}
|
||||
|
||||
#album_detail .album-content-link {
|
||||
display: flex;
|
||||
margin-left: 0.5rem;
|
||||
font-size: 0.7rem;
|
||||
align-items: center;
|
||||
background-color: rgba(245, 108, 108, 0.13);
|
||||
color: rgb(245, 108, 108);
|
||||
padding: 0px 8px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
#album_detail .album-content-link i {
|
||||
margin-right: 3px;
|
||||
}
|
||||
#album_detail .album-content-link:hover {
|
||||
background-color: var(--anzhiyu-main);
|
||||
color: var(--anzhiyu-white);
|
||||
}
|
||||
#album_detail .album-music {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
margin: 0.5rem 0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: var(--style-border-always);
|
||||
background: var(--anzhiyu-secondbg);
|
||||
}
|
||||
#album_detail .aplayer {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#album_detail .aplayer.aplayer-withlrc .aplayer-pic {
|
||||
height: 82px;
|
||||
width: 82px;
|
||||
margin: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.album-music .aplayer.aplayer-withlrc .aplayer-info {
|
||||
padding: 5px 7px 0;
|
||||
}
|
||||
#album_detail .aplayer .aplayer-info .aplayer-music {
|
||||
height: 23px;
|
||||
}
|
||||
#album_detail .aplayer .aplayer-info .aplayer-music .aplayer-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
}
|
||||
|
||||
#album_detail .aplayer .aplayer-info .aplayer-controller {
|
||||
align-items: center;
|
||||
}
|
||||
#album_detail .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
|
||||
padding: 0;
|
||||
}
|
||||
#album_detail .aplayer .aplayer-info .aplayer-controller .aplayer-time {
|
||||
position: initial;
|
||||
}
|
||||
#album_detail .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
|
||||
background: var(--anzhiyu-gray);
|
||||
height: 8px;
|
||||
border-radius: 12px;
|
||||
transition: 0.3s;
|
||||
overflow: hidden;
|
||||
}
|
||||
#album_detail .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
}
|
||||
#album_detail .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
}
|
||||
#album_detail .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
|
||||
display: none;
|
||||
}
|
||||
#album_detail .aplayer .aplayer-info .aplayer-controller .aplayer-time {
|
||||
position: initial;
|
||||
}
|
||||
|
||||
body[data-type="album_detail"] #page .author-content-item .card-content .banner-button-group .banner-button:hover {
|
||||
color: var(--anzhiyu-white);
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media screen and (max-width: 1200px) {
|
||||
#album_detail .timeline ul li.album-item {
|
||||
width: 49%;
|
||||
margin-right: 1%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#album_detail .timeline ul li.album-item {
|
||||
width: 100%;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
[data-theme="dark"] #album_detail .album-music .aplayer,
|
||||
[data-theme="dark"] #album_detail .aplayer .aplayer-lrc:before,
|
||||
[data-theme="dark"] #album_detail .aplayer .aplayer-lrc:after {
|
||||
background: var(--anzhiyu-card-bg);
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
}
|
||||
#album_detail .aplayer .aplayer-lrc p {
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
}
|
||||
|
||||
#album_detail .type-gallery {
|
||||
overflow: hidden;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
#album_detail_gallery_load_more {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#album_detail .tag-address {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
padding: 4px 6px;
|
||||
border-radius: 8px;
|
||||
background: var(--anzhiyu-black-op);
|
||||
font-size: 12px;
|
||||
color: var(--anzhiyu-white);
|
||||
transition: 0.3s;
|
||||
z-index: 1;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
h1#site-title {
|
||||
font-size: 3em !important;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 3em;
|
||||
/* 可以定义图标大小 */
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* 时间轴生肖icon */
|
||||
svg.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
/* width和height定义图标的默认宽度和高度*/
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon-zhongbiao::before {
|
||||
color: #f7c768;
|
||||
}
|
||||
|
||||
/* 解决artitalk的图标问题 */
|
||||
#uploadSource > svg {
|
||||
width: 1.19em;
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
/*top-img黑色透明玻璃效果移除，不建议加，除非你执着于完全一图流或者背景图对比色明显 */
|
||||
/* #page-header:not(.not-top-img):before {
|
||||
background-color: transparent !important;
|
||||
} */
|
||||
|
||||
/* 文章页面正文背景 */
|
||||
div#post {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
#recent-posts > .recent-post-item:not(:first-child):active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
/* 分页页面 */
|
||||
div#page {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* 归档页面 */
|
||||
div#archive {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* 标签页面 */
|
||||
div#tag {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* 分类页面 */
|
||||
div#category {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/*夜间模式伪类遮罩层透明*/
|
||||
[data-theme="dark"] #recent-posts > .recent-post-item {
|
||||
background: #121212;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .card-widget {
|
||||
background: var(--anzhiyu-card-bg);
|
||||
}
|
||||
|
||||
[data-theme="dark"] div#post {
|
||||
background: var(--anzhiyu-card-bg);
|
||||
}
|
||||
|
||||
[data-theme="dark"] div#tag {
|
||||
background: var(--anzhiyu-card-bg);
|
||||
}
|
||||
|
||||
[data-theme="dark"] div#archive {
|
||||
background: var(--anzhiyu-card-bg);
|
||||
}
|
||||
|
||||
[data-theme="dark"] div#page {
|
||||
background: var(--anzhiyu-card-bg);
|
||||
}
|
||||
|
||||
[data-theme="dark"] div#category {
|
||||
background: var(--anzhiyu-card-bg);
|
||||
}
|
||||
|
||||
[data-theme="dark"] div#category {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* md网站下划线 */
|
||||
#article-container a:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
#article-container #hpp_talk p img {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* 宽屏适配 */
|
||||
.page .layout,
|
||||
.post .layout {
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
.card-widget.card-clock {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#article-container
|
||||
a:not([data-fancybox="gallery"]):not(.headerlink):not(.cf-friends-link):not(.tag-Link):not(.btn-anzhiyu):not(
|
||||
.no-text-decoration
|
||||
) {
|
||||
font-weight: 500;
|
||||
border-bottom: solid 2px var(--anzhiyu-lighttext);
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
padding: 0 0.2em;
|
||||
text-decoration: none;
|
||||
font-family: auto;
|
||||
}
|
||||
#article-container
|
||||
a:not([data-fancybox="gallery"]):not(.headerlink):not(.cf-friends-link):not(.btn-anzhiyu):not(
|
||||
.no-text-decoration
|
||||
):hover {
|
||||
color: var(--anzhiyu-white);
|
||||
background: var(--anzhiyu-main);
|
||||
box-shadow: var(--anzhiyu-shadow-lightblack);
|
||||
border-radius: 0.25em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
html.hide-aside .layout > div:first-child {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 动画wowjs兼容调整 */
|
||||
.animate__animated {
|
||||
-webkit-animation-fill-mode: backwards !important;
|
||||
animation-fill-mode: backwards !important;
|
||||
}
|
||||
|
||||
/* 文章hover边框 */
|
||||
#recent-posts .recent-post-item:hover {
|
||||
border: var(--style-border-hover);
|
||||
}
|
||||
#recent-posts .recent-post-item:hover .recent-post-info .article-title {
|
||||
color: var(--anzhiyu-theme);
|
||||
}
|
||||
#recent-posts .recent-post-item {
|
||||
height: fit-content;
|
||||
background: var(--anzhiyu-card-bg);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
border: var(--style-border);
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
user-select: none;
|
||||
}
|
||||
/* 移动端容器padding */
|
||||
@media screen and (max-width: 768px) {
|
||||
#body-wrap .layout #page {
|
||||
padding: 20px 15px !important;
|
||||
}
|
||||
}
|
||||
/* 首页文章宽度 */
|
||||
@media screen and (max-width: 1200px) {
|
||||
.layout > div:first-child {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] #footer:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.layout > div:first-child:not(.recent-posts) {
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.banners-title {
|
||||
animation: slide-in 0.6s 0.3s backwards;
|
||||
}
|
||||
#algolia-search .search-dialog {
|
||||
animation: slide-in 0.6s ease 0s 1 normal none running;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
#page > div:not(.author-content-item) {
|
||||
animation: slide-in 0.6s 0.2s backwards;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
.author-content-item {
|
||||
animation: slide-in 0.6s 0s backwards;
|
||||
}
|
||||
}
|
||||
|
||||
/* 元素透明度改变 */
|
||||
@keyframes slide-in-op {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
#aside-content .card-widget#card-wechat {
|
||||
background: #57bd6a;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
height: 110px;
|
||||
}
|
||||
[data-theme="dark"] #aside-content .card-widget#card-wechat {
|
||||
background-color: #121121;
|
||||
border: var(--style-border);
|
||||
}
|
||||
|
||||
#flip-wrapper {
|
||||
-webkit-perspective: 1000;
|
||||
perspective: 1000;
|
||||
}
|
||||
|
||||
#flip-wrapper {
|
||||
position: relative;
|
||||
width: 235px;
|
||||
height: 110px;
|
||||
z-index: 1;
|
||||
}
|
||||
#flip-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
transition: cubic-bezier(0, 0, 0, 1.29) 0.3s;
|
||||
}
|
||||
#aside-content #flip-wrapper #flip-content .face {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
#aside-content #flip-wrapper #flip-content .back.face {
|
||||
display: block;
|
||||
-webkit-transform: rotateY(180deg);
|
||||
transform: rotateY(180deg);
|
||||
box-sizing: border-box;
|
||||
background-size: 100%;
|
||||
}
|
||||
#flip-wrapper:hover #flip-content {
|
||||
-webkit-transform: rotateY(180deg);
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
/* 分类目录条、标签目录条 */
|
||||
#catalog-bar {
|
||||
border-radius: var(--anzhiyu-border-radius);
|
||||
display: flex;
|
||||
border: var(--anzhiyu-border-radius);
|
||||
margin-bottom: 1rem;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#catalog-bar:hover {
|
||||
border-color: var(--anzhiyu-theme);
|
||||
}
|
||||
|
||||
#catalog-bar i {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
#catalog-list {
|
||||
/* 分类/标签较少时，可以选择不设置 width，居中显示 catalog-list-item */
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
#catalog-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.catalog-list-item a {
|
||||
margin-right: 0.3rem;
|
||||
font-weight: bold;
|
||||
color: var(--font-color);
|
||||
transition: all 0.3s ease-in-out;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.1rem 0.5rem;
|
||||
border-radius: 8px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.catalog-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.catalog-list-item.selected a {
|
||||
background: var(--anzhiyu-lighttext);
|
||||
color: var(--anzhiyu-white);
|
||||
}
|
||||
|
||||
a.catalog-more {
|
||||
min-width: fit-content;
|
||||
font-weight: bold;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
a.catalog-more:hover {
|
||||
color: var(--anzhiyu-theme);
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
#categoryBar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#category-bar {
|
||||
padding: 0.5rem 10px;
|
||||
background: var(--anzhiyu-card-bg);
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
border: var(--style-border);
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s ease 0s;
|
||||
animation: slide-in 0.6s 0.3s backwards;
|
||||
}
|
||||
|
||||
.category-bar-next {
|
||||
margin-left: 16px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.category-bar-next:hover {
|
||||
color: var(--anzhiyu-lighttext);
|
||||
}
|
||||
|
||||
#category-bar #catalog-bar {
|
||||
margin-bottom: 0;
|
||||
overflow-y: hidden;
|
||||
margin: -0.2rem 0;
|
||||
}
|
||||
|
||||
#category-bar.category-bar:hover {
|
||||
border: var(--style-border-hover);
|
||||
box-shadow: var(--anzhiyu-shadow-main);
|
||||
}
|
||||
|
||||
#category #category-bar {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#category a.catalog-list-item.select a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#category #catalog-list .catalog-list-item:first-child {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.catalog-list-item:hover a {
|
||||
background: var(--anzhiyu-main);
|
||||
color: var(--anzhiyu-white);
|
||||
}
|
||||
|
||||
.catalog-list-item.select a {
|
||||
background: var(--anzhiyu-main);
|
||||
color: var(--anzhiyu-white);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.category-bar-more {
|
||||
margin-left: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
[data-theme="dark"] #category-bar.category-bar {
|
||||
background: var(--anzhiyu-background);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#catalog-bar i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
#categoryBar {
|
||||
margin-bottom: 0;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 60px;
|
||||
z-index: 2;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
#category-bar.category-bar {
|
||||
width: 100%;
|
||||
}
|
||||
#category-bar.category-bar {
|
||||
background: var(--anzhiyu-background);
|
||||
}
|
||||
[data-theme="dark"] #category-bar.category-bar {
|
||||
background: var(--anzhiyu-black);
|
||||
}
|
||||
#category-bar.category-bar:hover {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
#category-bar {
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
padding: 0.5rem 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
/*和风天气 */
|
||||
#he-plugin-simple {
|
||||
z-index: 92;
|
||||
transition: 0.3s;
|
||||
position: fixed !important;
|
||||
}
|
||||
|
||||
#he-plugin-simple.shown {
|
||||
opacity: 0.5;
|
||||
pointer-events: unset;
|
||||
}
|
||||
|
||||
#he-plugin-simple .sticker-important {
|
||||
color: var(--anzhiyu-white) !important;
|
||||
}
|
||||
|
||||
.s-sticker div[data-v-41ba7e2c]:not(:first-child):not(:last-child) {
|
||||
padding: 0 0.07em !important;
|
||||
}
|
||||
|
||||
body:has(#sidebar-menus.open) #he-plugin-simple {
|
||||
z-index: 104;
|
||||
left: 95px !important;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
div.s-sticker {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.s-sticker div {
|
||||
color: var(--font-color) !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
body:has(.post-bg.nav-fixed) #he-plugin-simple .s-sticker div {
|
||||
color: var(--font-color) !important;
|
||||
}
|
||||
body:has(.post-bg) #he-plugin-simple .s-sticker div {
|
||||
color: var(--anzhiyu-white) !important;
|
||||
}
|
||||
[data-theme="dark"] body:has(.post-bg) #he-plugin-simple .s-sticker div {
|
||||
color: var(--font-color) !important;
|
||||
}
|
||||
|
||||
#weather-view-he {
|
||||
height: 285px !important;
|
||||
padding: 10px !important;
|
||||
border-radius: 10px !important;
|
||||
background-color: var(--anzhiyu-card-bg) !important;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px;
|
||||
margin-top: 20px !important;
|
||||
transform: 0.3s;
|
||||
opacity: 1;
|
||||
}
|
||||
.s-sticker ~ [data-v-41ba7e2c] {
|
||||
opacity: 0;
|
||||
}
|
||||
[data-v-41ba7e2c]:has([data-v-db6ccf64][data-v-41ba7e2c]) {
|
||||
opacity: 1;
|
||||
}
|
||||
[data-v-db6ccf64][data-v-41ba7e2c] {
|
||||
top: 38px !important;
|
||||
}
|
||||
.wv-lt-location,
|
||||
.wv-lt-refresh {
|
||||
display: inline-block;
|
||||
}
|
||||
.wv-lt-location a {
|
||||
padding: 0 5px;
|
||||
border-radius: 3px;
|
||||
color: var(--anzhiyu-blue) !important;
|
||||
background-color: var(--anzhiyu-blue-tint);
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.wv-lt-col-5 {
|
||||
text-align: right;
|
||||
}
|
||||
.wv-lt-refresh a {
|
||||
font-size: 0 !important;
|
||||
}
|
||||
.wv-lt-refresh a::after {
|
||||
content: "\5b89\77e5\9c7c\548c\98ce";
|
||||
font-size: small !important;
|
||||
}
|
||||
.vw-f-cell a,
|
||||
.wv-n-h-now-rain-text,
|
||||
.wv-n-h-now-tmp span,
|
||||
.wv-n-h-now-txt span,
|
||||
.wv-n-h-now-txt-t {
|
||||
color: var(--anzhiyu-fontcolor) !important;
|
||||
}
|
||||
.wv-f-table div .vw-f-cell:nth-child(1) a {
|
||||
color: #9b9b9b !important;
|
||||
}
|
||||
.wv-top-backdrop {
|
||||
height: 285px !important;
|
||||
padding-top: 50px !important;
|
||||
}
|
||||
.wv-top-backdrop::after {
|
||||
content: "\8BF7\4F7F\7528\952E\76D8\2191\2193\9009\62E9\FF0C\56DE\8F66\9009\5B9A" !important;
|
||||
padding-left: 5%;
|
||||
}
|
||||
.wv-top-button,
|
||||
.wv-top-select {
|
||||
height: 36px !important;
|
||||
border: none !important;
|
||||
border-radius: 5px !important;
|
||||
cursor: pointer;
|
||||
transition: 0.25s;
|
||||
}
|
||||
.wv-top-select {
|
||||
padding-left: 10px !important;
|
||||
}
|
||||
.wv-top-button {
|
||||
background-color: var(--anzhiyu-blue) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.wv-top-button:hover {
|
||||
background-color: var(--anzhiyu-blue-hover) !important;
|
||||
}
|
||||
.wv-top-button:active {
|
||||
background-color: var(--anzhiyu-blue-hover) !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
#he-plugin-simple {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1400px) and (max-width: 1690px) {
|
||||
#he-plugin-simple {
|
||||
left: 262px !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
#article-container ol,
|
||||
#article-container ul {
|
||||
margin-top: 0.4rem;
|
||||
padding: 0px 0px 0px 0.8rem;
|
||||
list-style: none;
|
||||
counter-reset: li 0;
|
||||
}
|
||||
#article-container code {
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
margin: 0 4px;
|
||||
line-height: 2;
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
}
|
||||
#article-container.post-content li::marker {
|
||||
content: none;
|
||||
}
|
||||
#article-container ol li:not(.tab),
|
||||
#article-container ul li:not(.tab) {
|
||||
position: relative;
|
||||
margin: 0.2rem 0px;
|
||||
}
|
||||
#article-container ul > li:not(.tab) {
|
||||
padding: 0.2em 0.2em 0.2em 1.4em;
|
||||
}
|
||||
#article-container ul > li:not(.tab):before {
|
||||
border: 0.21em solid var(--anzhiyu-lighttext);
|
||||
background: var(--anzhiyu-lighttext);
|
||||
}
|
||||
#article-container ul > li:not(.tab)::before {
|
||||
top: 0.78em;
|
||||
width: 0.42em;
|
||||
height: 0.42em;
|
||||
border-radius: 0.42em;
|
||||
content: "";
|
||||
line-height: 0.42em;
|
||||
}
|
||||
|
||||
#article-container ol li::before,
|
||||
#article-container ul li::before {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background: var(--anzhiyu-main);
|
||||
color: rgb(255, 255, 255);
|
||||
transition: all 0.3s ease-out 0s;
|
||||
}
|
||||
#article-container ol > li::before {
|
||||
margin-top: 0.65em;
|
||||
width: 1.45em;
|
||||
height: 1.45em;
|
||||
border-radius: 0.725em;
|
||||
content: counter(li);
|
||||
counter-increment: li 1;
|
||||
text-align: center;
|
||||
font-size: 0.85em;
|
||||
line-height: 1.45em;
|
||||
}
|
||||
#article-container ol[start] {
|
||||
counter-reset: unset;
|
||||
}
|
||||
#article-container ol li:not(.tab),
|
||||
#article-container ul li:not(.tab) {
|
||||
position: relative;
|
||||
margin: 0.2rem 0px;
|
||||
}
|
||||
#article-container ol > li:not(.tab) {
|
||||
padding: 0.2em 0.2em 0.2em 1.8em;
|
||||
}
|
||||
|
||||
/* 代码框主题 */
|
||||
#article-container figure.highlight {
|
||||
border-radius: 10px;
|
||||
}
|
||||
#post-comment blockquote {
|
||||
background: var(--anzhiyu-secondbg);
|
||||
border: var(--style-border);
|
||||
box-shadow: none;
|
||||
margin: 0px 0px 0.5rem;
|
||||
font-size: 12px;
|
||||
color: var(--anzhiyu-secondtext);
|
||||
border-radius: 8px;
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
details.folding-tag[open] {
|
||||
border-radius: 15px !important;
|
||||
border-color: var(--anzhiyu-main) !important;
|
||||
border: 1px solid var(--anzhiyu-main) !important;
|
||||
}
|
||||
|
||||
li details.folding-tag {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
li details.folding-tag summary {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
details.folding-tag {
|
||||
transition: border 0s ease !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
details.folding-tag[open] > summary {
|
||||
color: var(--anzhiyu-white) !important;
|
||||
background: var(--anzhiyu-main) !important;
|
||||
border: 1px solid var(--anzhiyu-main) !important;
|
||||
border-top: none !important;
|
||||
border-left: none !important;
|
||||
border-right: none !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
details.folding-tag > summary {
|
||||
border: var(--style-border) !important;
|
||||
background: var(--anzhiyu-card-bg);
|
||||
border-radius: 14px !important;
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
color: var(--font-color) !important;
|
||||
user-select: none;
|
||||
}
|
||||
details.folding-tag > summary::marker {
|
||||
color: var(--anzhiyu-main);
|
||||
font-size: 16px;
|
||||
}
|
||||
details.folding-tag > summary::before {
|
||||
content: " ";
|
||||
margin-right: 2px;
|
||||
}
|
||||
details.folding-tag[open] > div.content {
|
||||
border-radius: 0 0 16px 16px;
|
||||
}
|
||||
details.folding-tag summary:hover::marker {
|
||||
color: var(--anzhiyu-white);
|
||||
}
|
||||
details.folding-tag[open] > summary::marker {
|
||||
color: var(--anzhiyu-white);
|
||||
}
|
||||
details.folding-tag summary:hover {
|
||||
cursor: pointer;
|
||||
background: var(--anzhiyu-main) !important;
|
||||
color: var(--anzhiyu-white) !important;
|
||||
transition: 0.3s;
|
||||
box-shadow: var(--anzhiyu-shadow-main);
|
||||
}
|
||||
details .content > *:nth-child(1) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.flink details.folding-tag[open] > div.content {
|
||||
padding: 20px;
|
||||
margin: 0px;
|
||||
margin-top: 0;
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
.comment-barrage {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 60px;
|
||||
padding: 0 0 20px 10px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
align-items: flex-end;
|
||||
z-index: 999;
|
||||
transition: 0.3s;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.comment-barrage {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.comment-barrage-item {
|
||||
min-width: 300px;
|
||||
max-width: 300px;
|
||||
width: fit-content;
|
||||
min-height: 80px;
|
||||
max-height: 150px;
|
||||
margin: 4px;
|
||||
padding: 8px 14px;
|
||||
background: var(--anzhiyu-maskbgdeep);
|
||||
border-radius: 8px;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
animation: barrageIn 0.6s cubic-bezier(0.42, 0, 0.3, 1.11);
|
||||
transition: 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: var(--style-border);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
transform: translateZ(0);
|
||||
position: fixed;
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
}
|
||||
.comment-barrage-item:hover {
|
||||
border: var(--style-border-hover);
|
||||
box-shadow: var(--anzhiyu-shadow-main);
|
||||
}
|
||||
.comment-barrage-item.out {
|
||||
opacity: 0;
|
||||
animation: barrageOut 0.6s cubic-bezier(0.42, 0, 0.3, 1.11);
|
||||
}
|
||||
.comment-barrage-item a.barrageContent:hover {
|
||||
color: var(--anzhiyu-main);
|
||||
}
|
||||
.comment-barrage-item.hovered {
|
||||
opacity: 0;
|
||||
}
|
||||
.comment-barrage-item .comment-barrage-close {
|
||||
color: var(--anzhiyu-secondtext);
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
padding: 4px;
|
||||
}
|
||||
.comment-barrage-item .comment-barrage-close:hover {
|
||||
color: var(--anzhiyu-main);
|
||||
}
|
||||
.comment-barrage-item pre {
|
||||
display: none;
|
||||
}
|
||||
.comment-barrage-item p img:not(.tk-owo-emotion) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.comment-barrage-item .barrageHead {
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
border-bottom: var(--style-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
.comment-barrage-item .barrageHead .barrageTitle {
|
||||
color: var(--anzhiyu-card-bg);
|
||||
margin-right: 8px;
|
||||
background: var(--anzhiyu-fontcolor);
|
||||
line-height: 1;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.comment-barrage-item .barrageHead .barrageTitle.barrageBloggerTitle {
|
||||
background: var(--anzhiyu-orange);
|
||||
}
|
||||
.comment-barrage-item .barrageAvatar {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0;
|
||||
margin-left: auto;
|
||||
margin-right: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--anzhiyu-secondbg);
|
||||
}
|
||||
.comment-barrage-item .barrageContent {
|
||||
font-size: 14px !important;
|
||||
font-weight: 400 !important;
|
||||
height: calc(100% - 30px);
|
||||
overflow: scroll;
|
||||
cursor: pointer;
|
||||
}
|
||||
.comment-barrage-item .barrageContent::-webkit-scrollbar {
|
||||
height: 0;
|
||||
width: 4px;
|
||||
}
|
||||
.comment-barrage-item .barrageContent::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
.comment-barrage-item .barrageContent p {
|
||||
margin: 8px 0;
|
||||
line-height: 1.3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.comment-barrage-item .barrageContent blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
.comment-barrage-item .barrageContent h1,
|
||||
.comment-barrage-item .barrageContent h2,
|
||||
.comment-barrage-item .barrageContent h3,
|
||||
.comment-barrage-item .barrageContent h4 {
|
||||
font-size: 14px !important;
|
||||
font-weight: 400 !important;
|
||||
margin: 8px 0 !important;
|
||||
}
|
||||
@@ -0,0 +1,976 @@
|
||||
/* 中控台 */
|
||||
#console {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: 0.3s ease-out, color 0s;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
margin: 0 !important;
|
||||
z-index: 2;
|
||||
}
|
||||
#console-music-bg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#console.show,
|
||||
#console.reward-show {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
#console.reward-show .console-card-group {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#console .console-card-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 30px;
|
||||
transform: translateY(20px);
|
||||
transition: 0.3s;
|
||||
opacity: 0;
|
||||
max-width: 80%;
|
||||
max-height: 70%;
|
||||
}
|
||||
|
||||
#console.show .console-card-group {
|
||||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
|
||||
#console .console-card-group-left {
|
||||
margin-right: 0.5rem;
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#console .console-card-group-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
width: 60%;
|
||||
overflow: hidden;
|
||||
min-width: 575px;
|
||||
}
|
||||
|
||||
#console .console-card {
|
||||
background: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
border: var(--style-border);
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
#console .console-card.tags {
|
||||
height: calc(100% - 172px);
|
||||
}
|
||||
|
||||
#console .console-mask {
|
||||
background: var(--anzhiyu-maskbgdeep);
|
||||
backdrop-filter: saturate(100%) blur(0px);
|
||||
-webkit-backdrop-filter: blur(0px);
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
transition: 0.3s;
|
||||
margin: 0px !important;
|
||||
}
|
||||
|
||||
#console.show .console-mask,
|
||||
#console.reward-show .console-mask {
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
#card-newest-comments .aside-list-item .thumbnail img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
#card-newest-comments .aside-list-item {
|
||||
background: var(--anzhiyu-card-bg);
|
||||
border-radius: 12px;
|
||||
border: var(--style-border);
|
||||
padding: 12px 16px;
|
||||
width: 49%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 150px;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#card-newest-comments .aside-list-item:not(:last-child) {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
#card-newest-comments .aside-list-item .name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 130px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#console .author-content-item-tips {
|
||||
opacity: 0.8;
|
||||
font-size: 12px;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--font-color);
|
||||
}
|
||||
|
||||
#console .author-content-item-title {
|
||||
font-size: 27px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: var(--font-color);
|
||||
}
|
||||
|
||||
#console .aside-list-item .thumbnail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
#console .aside-list-item .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
#card-newest-comments .aside-list-item:hover {
|
||||
background: var(--anzhiyu-main);
|
||||
color: var(--anzhiyu-white);
|
||||
}
|
||||
|
||||
#console .aside-list-item .content .comment {
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
#console .aside-list-item:hover .thumbnail,
|
||||
#console .aside-list-item:hover .content .comment,
|
||||
#console .aside-list-item:hover .content time {
|
||||
color: var(--anzhiyu-white);
|
||||
}
|
||||
|
||||
#console .aside-list-item .content time {
|
||||
font-size: 12px;
|
||||
margin-top: auto;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
}
|
||||
|
||||
#console .aside-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
#console .button-group {
|
||||
display: flex;
|
||||
margin: 1rem auto 0 auto;
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
#console .button-group .console-btn-item {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#console .button-group .console-btn-item:not(:last-child) {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
#console .button-group .console-btn-item a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--card-bg);
|
||||
border: var(--style-border);
|
||||
border-radius: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
}
|
||||
|
||||
#console .button-group .console-btn-item.on a {
|
||||
background: var(--anzhiyu-orange);
|
||||
color: var(--anzhiyu-white);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.console-card.tags .card-tag-cloud {
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-height: 230px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.console-card.tags .card-tag-cloud a {
|
||||
color: var(--anzhiyu-fontcolor) !important;
|
||||
margin: 6px 4px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
background: var(--anzhiyu-secondbg);
|
||||
border: var(--style-border);
|
||||
font-size: 14px !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.console-card.tags .card-tag-cloud a:hover {
|
||||
background: var(--anzhiyu-main);
|
||||
color: var(--anzhiyu-white) !important;
|
||||
}
|
||||
|
||||
.console-card.tags .card-tag-cloud a sup {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
#console .console-card.history {
|
||||
margin-top: 8px;
|
||||
padding: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
min-width: 575px;
|
||||
}
|
||||
|
||||
#console .console-card.history .item-headline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#console .console-card.history .card-archive-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#console .console-card.history .card-archive-list li.card-archive-list-item {
|
||||
flex: 0 0 25%;
|
||||
}
|
||||
|
||||
#console .console-card.history .card-archive-list .card-archive-list-link {
|
||||
border-radius: 8px;
|
||||
margin: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: space-between;
|
||||
border: var(--style-border);
|
||||
background: var(--card-bg);
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
#console .console-card.history .card-archive-list .card-archive-list-link:hover {
|
||||
background: var(--anzhiyu-main);
|
||||
color: var(--anzhiyu-white);
|
||||
}
|
||||
|
||||
#console #card-newest-comments {
|
||||
height: 100%;
|
||||
min-height: 580px;
|
||||
}
|
||||
|
||||
#console .button-group i {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#console hr {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#console ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
#console ul li {
|
||||
list-style: none;
|
||||
}
|
||||
#console .console-card.history ul.card-archive-list {
|
||||
margin: -4px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] #console .button-group .console-btn-item a.darkmode_switchbutton {
|
||||
background: var(--anzhiyu-orange);
|
||||
color: var(--anzhiyu-white);
|
||||
}
|
||||
|
||||
/* 控制台音乐css */
|
||||
body:has(#console.show)
|
||||
#nav-music
|
||||
.aplayer
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-bar-wrap:hover
|
||||
.aplayer-bar
|
||||
.aplayer-played
|
||||
.aplayer-thumb {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
body:has(#console.show) .aplayer.aplayer-arrow .aplayer-icon-loop,
|
||||
.aplayer.aplayer-arrow .aplayer-icon-order {
|
||||
display: inline;
|
||||
}
|
||||
body:has(#console.show) .aplayer-volume-wrap {
|
||||
display: none;
|
||||
}
|
||||
body:has(#console.show) #nav-music {
|
||||
z-index: 10000;
|
||||
left: 45%;
|
||||
top: 23%;
|
||||
box-shadow: none;
|
||||
align-items: flex-start;
|
||||
transition: 0s;
|
||||
height: 35%;
|
||||
width: 42%;
|
||||
opacity: 1 !important;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
body:has(#console.show) #nav-music:active {
|
||||
transform: scale(1);
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer.aplayer-withlrc .aplayer-lrc {
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-lrc p.aplayer-lrc-current,
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-lrc p {
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
}
|
||||
body:has(#console.show) #nav-music #nav-music-hoverTips {
|
||||
opacity: 0;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
margin-left: 0px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 14px #ffffffa6;
|
||||
transform: rotate(0deg) scale(1.1);
|
||||
border: var(--style-border-always);
|
||||
animation: changeright 24s linear infinite;
|
||||
margin-top: 10px;
|
||||
left: auto;
|
||||
}
|
||||
body:has(#console.show)
|
||||
#nav-music
|
||||
.aplayer
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-bar-wrap
|
||||
.aplayer-bar
|
||||
.aplayer-loaded {
|
||||
display: block;
|
||||
border-radius: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
body:has(#console.show) meting-js {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-body {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
cursor: auto;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 10px 10px 0;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
body:has(#console.show) #nav-music.playing {
|
||||
animation: none;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-music {
|
||||
height: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer.aplayer-withlrc .aplayer-info {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body:has(#console.show) .aplayer .aplayer-pic .aplayer-play {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
body:has(#console.show) .aplayer .aplayer-pic .aplayer-play svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-44%, -50%);
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer.aplayer-withlrc .aplayer-pic {
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
margin-left: 0px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-music .aplayer-author {
|
||||
display: inline;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-music .aplayer-title {
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
cursor: auto;
|
||||
line-height: 2;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: 0.3s;
|
||||
user-select: none;
|
||||
margin-right: 3px;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-controller {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
top: 26px;
|
||||
align-items: center;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
|
||||
height: 10px;
|
||||
border-radius: 10px;
|
||||
background: #cdcdcd;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-time {
|
||||
display: block;
|
||||
bottom: 0;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body:has(#console.show)
|
||||
#nav-music
|
||||
.aplayer.aplayer-withlist
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-time
|
||||
.aplayer-icon.aplayer-icon-menu {
|
||||
display: none;
|
||||
}
|
||||
body:has(#console.show)
|
||||
#nav-music
|
||||
.aplayer
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-bar-wrap
|
||||
.aplayer-bar
|
||||
.aplayer-played {
|
||||
background: var(--anzhiyu-main) !important;
|
||||
opacity: 0.8;
|
||||
animation: none;
|
||||
border-radius: 10px;
|
||||
}
|
||||
body:has(#console.show)
|
||||
#nav-music
|
||||
.aplayer
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-bar-wrap
|
||||
.aplayer-bar
|
||||
.aplayer-played
|
||||
.aplayer-thumb {
|
||||
margin-top: -2px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-lrc .aplayer-lrc-contents {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) and (max-width: 1450px) {
|
||||
body:has(#console.show) #nav-music {
|
||||
left: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 赞赏部分控制台css */
|
||||
.console-card-group-reward {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
.reward-show .console-card-group-reward {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
.console-card-group-reward .reward-all {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.console-card-group-reward .reward-all .reward-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 0.625rem;
|
||||
}
|
||||
.console-card-group-reward .reward-all .reward-item img {
|
||||
width: 230px;
|
||||
height: 230px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
/* 移动端音乐列表 */
|
||||
body:has(#console.show) #nav-music .aplayer-list {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: white;
|
||||
left: 0;
|
||||
}
|
||||
body:has(#console.show) .aplayer-list {
|
||||
max-height: none !important;
|
||||
}
|
||||
body:has(#console.show) .aplayer-list {
|
||||
position: fixed;
|
||||
display: none;
|
||||
width: 100%;
|
||||
bottom: -76%;
|
||||
left: 0;
|
||||
background: var(--sidebar-bg);
|
||||
height: auto;
|
||||
border-radius: 15px 15px 0px 0px;
|
||||
padding: 15px 0px;
|
||||
}
|
||||
body:has(#console.show) .aplayer-list.aplayer-list-hide {
|
||||
bottom: 0% !important;
|
||||
}
|
||||
body:has(#console.show) ol > li {
|
||||
display: flex;
|
||||
margin: 0 10px;
|
||||
}
|
||||
body:has(#console.show) ol > li span.aplayer-list-title {
|
||||
width: 30%;
|
||||
}
|
||||
body:has(#console.show) ol > li.aplayer-list-light {
|
||||
background: #33a673;
|
||||
padding: 5px 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
body:has(#console.show) ol > li.aplayer-list-light span {
|
||||
color: #fff;
|
||||
}
|
||||
body:has(#console.show) ol > li span.aplayer-list-title {
|
||||
max-width: 55%;
|
||||
width: auto;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
body:has(#console.show) ol > li span.aplayer-list-author {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
width: auto;
|
||||
max-width: 35%;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
body:has(#console.show) ol > li.aplayer-list-light span.aplayer-list-author {
|
||||
right: 15px;
|
||||
}
|
||||
/* 移动端音乐 */
|
||||
body:has(#console.show) meting-js {
|
||||
position: relative;
|
||||
}
|
||||
#console .console-card-group {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#console .console-card-group {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#console .console-card-group-right {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#consoleCommentBarrage {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#console .button-group {
|
||||
position: absolute;
|
||||
bottom: 70px;
|
||||
}
|
||||
body:has(#console.show) #nav-music #nav-music-hoverTips {
|
||||
display: none;
|
||||
}
|
||||
body:has(#console.show) #nav-music {
|
||||
position: fixed;
|
||||
display: block !important;
|
||||
left: 5.2%;
|
||||
top: 3.9rem !important;
|
||||
height: 70%;
|
||||
width: 85%;
|
||||
}
|
||||
body:has(#console.show) #console-music-bg {
|
||||
display: block;
|
||||
filter: blur(33px);
|
||||
display: block;
|
||||
background: #000000;
|
||||
opacity: 0.58;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
[data-theme="dark"] body:has(#console.show) #console-music-bg {
|
||||
background: var(--anzhiyu-white);
|
||||
}
|
||||
body:has(#console.show) #console-music-bg::after {
|
||||
box-shadow: inset 0 0px 10px 116px #000000;
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
[data-theme="dark"] body:has(#console.show) #console-music-bg::after {
|
||||
box-shadow: inset 0 0px 10px 116px var(--anzhiyu-white);
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer.aplayer-withlrc .aplayer-pic {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
border-radius: 50%;
|
||||
animation: none;
|
||||
border: none;
|
||||
transform: none !important;
|
||||
box-shadow: none;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
body:has(#console.show) #nav-music .aplayer {
|
||||
padding: 30px;
|
||||
border-radius: 0;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-music .aplayer-title,
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-music .aplayer-author {
|
||||
color: var(--anzhiyu-white);
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer.aplayer-withlrc .aplayer-info {
|
||||
width: 100%;
|
||||
height: 45%;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-body {
|
||||
justify-content: space-between;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer.aplayer-withlrc .aplayer-info::after {
|
||||
position: absolute;
|
||||
content: "iPhone";
|
||||
top: -20px;
|
||||
left: 0;
|
||||
color: #b5b8bc;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-music {
|
||||
padding: 25px 0 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer.aplayer-withlrc .aplayer-lrc {
|
||||
height: 25px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-lrc p.aplayer-lrc-current {
|
||||
color: var(--anzhiyu-white);
|
||||
font-size: 20px;
|
||||
line-height: 25px !important;
|
||||
float: left;
|
||||
white-space: nowrap;
|
||||
animation: an-text-roll 4s cubic-bezier(0.6, 0, 0.5, 1) alternate infinite;
|
||||
min-width: 100%;
|
||||
/* margin: 0; */
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-lrc p {
|
||||
color: var(--anzhiyu-white);
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-lrc .aplayer-lrc-contents {
|
||||
margin: -40px 0px 0;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-time {
|
||||
color: var(--anzhiyu-white);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 15px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-controller {
|
||||
top: 58px;
|
||||
}
|
||||
body:has(#console.show) .aplayer .aplayer-icon-back,
|
||||
body:has(#console.show) .aplayer .aplayer-icon-forward,
|
||||
body:has(#console.show) .aplayer .aplayer-icon-order,
|
||||
body:has(#console.show) .aplayer .aplayer-icon-play,
|
||||
body:has(#console.show)
|
||||
#nav-music
|
||||
.aplayer.aplayer-withlist
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-time
|
||||
.aplayer-icon.aplayer-icon-menu,
|
||||
body:has(#console.show) .aplayer.aplayer-mobile .aplayer-icon-volume-down {
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
}
|
||||
body:has(#console.show) .aplayer .aplayer-icon-volume-down {
|
||||
width: 36px;
|
||||
height: 30px;
|
||||
}
|
||||
body:has(#console.show) .aplayer-volume-wrap {
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 75px;
|
||||
}
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
|
||||
height: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
body:has(#console.show)
|
||||
#nav-music
|
||||
.aplayer
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-bar-wrap
|
||||
.aplayer-bar
|
||||
.aplayer-loaded {
|
||||
display: block;
|
||||
height: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
body:has(#console.show) .aplayer .aplayer-icon-back {
|
||||
left: 0;
|
||||
}
|
||||
body:has(#console.show) .aplayer .aplayer-icon-forward {
|
||||
right: 0;
|
||||
}
|
||||
body:has(#console.show) .aplayer .aplayer-icon-forward,
|
||||
body:has(#console.show) .aplayer .aplayer-icon-back {
|
||||
height: 40px;
|
||||
width: 33%;
|
||||
margin: 15px 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
body:has(#console.show) .aplayer .aplayer-pic .aplayer-play {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
body:has(#console.show) .aplayer .aplayer-pic .aplayer-pause {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
body:has(#console.show) .aplayer .aplayer-pic .aplayer-play svg {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
body:has(#console.show) .aplayer .aplayer-pic .aplayer-pause svg {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
body:has(#console.show) .aplayer .aplayer-icon-play {
|
||||
height: 50px;
|
||||
width: 33%;
|
||||
margin: 10px 0;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
body:has(#console.show)
|
||||
.aplayer.aplayer-withlist
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-time
|
||||
.aplayer-icon.aplayer-icon-menu {
|
||||
right: 0;
|
||||
}
|
||||
body:has(#console.show) .aplayer.aplayer-arrow .aplayer-icon-order {
|
||||
left: 0;
|
||||
}
|
||||
body:has(#console.show)
|
||||
.aplayer.aplayer-withlist
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-time
|
||||
.aplayer-icon.aplayer-icon-menu,
|
||||
body:has(#console.show) .aplayer.aplayer-arrow .aplayer-icon-order {
|
||||
height: 40px;
|
||||
width: 33%;
|
||||
top: 80px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
body:has(#console.show) .aplayer.aplayer-arrow .aplayer-icon-loop {
|
||||
height: 40px;
|
||||
width: 33%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 80px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
body:has(#console.show) #nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body:has(#console.show) .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
body:has(#console.show) .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
|
||||
fill: var(--anzhiyu-white);
|
||||
}
|
||||
body:has(#console.show) .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap {
|
||||
overflow: visible;
|
||||
bottom: 0px;
|
||||
left: 45px;
|
||||
right: auto;
|
||||
}
|
||||
body:has(#console.show)
|
||||
.aplayer
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-volume-wrap
|
||||
.aplayer-volume-bar-wrap
|
||||
.aplayer-volume-bar,
|
||||
body:has(#console.show)
|
||||
.aplayer
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-volume-wrap
|
||||
.aplayer-volume-bar-wrap
|
||||
.aplayer-volume-bar
|
||||
.aplayer-volume {
|
||||
width: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 867px) {
|
||||
#center-console:checked + label {
|
||||
display: none;
|
||||
}
|
||||
#console .console-card-group {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#consoleHideAside {
|
||||
display: none;
|
||||
}
|
||||
.console-card-group-reward .reward-all .reward-item img {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
}
|
||||
#console #consoleKeyboard {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 800px) {
|
||||
#console .console-card-group {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#consoleMusic {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#consoleCommentBarrage {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body:has(#console.show) #nav-music {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
#console .button-group .console-btn-item a:hover {
|
||||
background: var(--anzhiyu-main) !important;
|
||||
}
|
||||
#console .button-group .console-btn-item:hover a {
|
||||
background: var(--anzhiyu-main);
|
||||
color: var(--anzhiyu-white);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
body:has(#console.show) #nav-music {
|
||||
width: 90%;
|
||||
}
|
||||
#center-console + label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* 歌词超出文本滚动动画 */
|
||||
@keyframes an-text-roll {
|
||||
from {
|
||||
margin-left: 0;
|
||||
}
|
||||
to {
|
||||
margin-left: 100%;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,309 @@
|
||||
body[data-type="essay"] #page {
|
||||
border: 0;
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
body[data-type="essay"] #page .page-title {
|
||||
display: none;
|
||||
}
|
||||
body[data-type="essay"] #web_bg {
|
||||
background: var(--anzhiyu-background);
|
||||
}
|
||||
#bber .bber-container-img {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
#bber .bber-container-img .bber-content-noimg {
|
||||
width: calc(100% / 4 - 5px);
|
||||
}
|
||||
|
||||
#bber .bber-content-img img {
|
||||
object-fit: cover;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
#bber .bber-content-img,
|
||||
#bber .bber-content-video {
|
||||
height: 100px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: calc(100% / 4 - 5px);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#bber .bber-content-video video {
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
max-height: 100%;
|
||||
}
|
||||
#bber .bber-content-video::after {
|
||||
content: "视频";
|
||||
display: inline-block;
|
||||
padding: 1px 6px;
|
||||
background: var(--anzhiyu-black-op);
|
||||
border-radius: 8px;
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--anzhiyu-white);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
transform: translateZ(0);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#bber .bber-content .datacont {
|
||||
order: 0;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
width: 100%;
|
||||
line-height: 1.38;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: justify;
|
||||
}
|
||||
#bber p {
|
||||
margin: 0px;
|
||||
}
|
||||
#bber div.bber-content {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#bber .timeline ul li.bber-item {
|
||||
position: relative;
|
||||
width: 32%;
|
||||
border: var(--style-border-always);
|
||||
border-radius: 12px;
|
||||
padding: 1rem 1rem 0.5rem;
|
||||
transition: all 0.3s ease 0s;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
background: var(--anzhiyu-card-bg);
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
margin-right: 2%;
|
||||
}
|
||||
#bber .timeline #waterfall.show {
|
||||
opacity: 1;
|
||||
}
|
||||
#bber .timeline #waterfall {
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease 0s;
|
||||
}
|
||||
#bber ul.list {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#bber {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
#bber > section > ul > li.bber-item {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#bber-tips {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#bber .timeline ul li.bber-item hr {
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin: 8px 0px;
|
||||
border: 1px dashed var(--anzhiyu-theme-op);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#bber .bber-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#bber > section > ul > li > div .bber-info-time,
|
||||
#bber > section > ul > li > div .bber-info-from {
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
font-size: 0.7rem;
|
||||
background-color: var(--anzhiyu-gray-op);
|
||||
padding: 0px 8px;
|
||||
border-radius: 20px;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#bber .bber-info .anzhiyufont.anzhiyu-icon-clock {
|
||||
margin-right: 4px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
#bber > section > ul > li > div .bber-info-from span,
|
||||
#bber > section > ul > li > div .bber-info-from {
|
||||
margin-left: 4px;
|
||||
}
|
||||
#bber > section > ul > li > div .bber-info-from i {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
#bber .bber-item hr::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#bber .bber-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.bber-reply {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.bber-reply:hover {
|
||||
color: var(--anzhiyu-main);
|
||||
max-height: 35px;
|
||||
}
|
||||
|
||||
#bber .timeline ul li.bber-item:hover {
|
||||
border: var(--style-border-hover);
|
||||
}
|
||||
|
||||
#bber .bber-content-link {
|
||||
display: flex;
|
||||
margin-left: 0.5rem;
|
||||
font-size: 0.7rem;
|
||||
align-items: center;
|
||||
background-color: rgba(245, 108, 108, 0.13);
|
||||
color: rgb(245, 108, 108);
|
||||
padding: 0px 8px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
#bber .bber-content-link i {
|
||||
margin-right: 3px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
#bber .bber-content-link:hover {
|
||||
background-color: var(--anzhiyu-main);
|
||||
color: var(--anzhiyu-white);
|
||||
}
|
||||
#bber .bber-music {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
margin: 0.5rem 0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: var(--style-border-always);
|
||||
background: var(--anzhiyu-secondbg);
|
||||
}
|
||||
#bber .aplayer {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#bber .aplayer.aplayer-withlrc .aplayer-pic {
|
||||
height: 82px;
|
||||
width: 82px;
|
||||
margin: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bber-music .aplayer.aplayer-withlrc .aplayer-info {
|
||||
padding: 5px 7px 0;
|
||||
}
|
||||
#bber .aplayer .aplayer-info .aplayer-music {
|
||||
height: 23px;
|
||||
}
|
||||
#bber .aplayer .aplayer-info .aplayer-music .aplayer-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
}
|
||||
|
||||
#bber .aplayer .aplayer-info .aplayer-controller {
|
||||
align-items: center;
|
||||
}
|
||||
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
|
||||
padding: 0;
|
||||
}
|
||||
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-time {
|
||||
position: initial;
|
||||
}
|
||||
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
|
||||
background: var(--anzhiyu-gray);
|
||||
height: 8px;
|
||||
border-radius: 12px;
|
||||
transition: 0.3s;
|
||||
overflow: hidden;
|
||||
}
|
||||
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
}
|
||||
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
}
|
||||
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
|
||||
display: none;
|
||||
}
|
||||
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-time {
|
||||
position: initial;
|
||||
}
|
||||
|
||||
/* 顶部样式 */
|
||||
.author-content.author-content-item.essayPage {
|
||||
height: 19rem;
|
||||
color: var(--anzhiyu-white);
|
||||
overflow: hidden;
|
||||
margin-top: 0px;
|
||||
}
|
||||
body[data-type="essay"] #page .author-content-item .card-content .banner-button-group .banner-button:hover {
|
||||
color: var(--anzhiyu-white);
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media screen and (max-width: 1200px) {
|
||||
#bber .timeline ul li.bber-item {
|
||||
width: 49%;
|
||||
margin-right: 1%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#bber .timeline ul li.bber-item {
|
||||
width: 100%;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
[data-theme="dark"] #bber .bber-music .aplayer,
|
||||
[data-theme="dark"] #bber .aplayer .aplayer-lrc:before,
|
||||
[data-theme="dark"] #bber .aplayer .aplayer-lrc:after {
|
||||
background: var(--anzhiyu-card-bg);
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
}
|
||||
#bber .aplayer .aplayer-lrc p {
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
min-height: 40px;
|
||||
line-height: 30px !important;
|
||||
height: 40px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
#bbTimeList {
|
||||
background: var(--anzhiyu-white);
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--anzhiyu-shadow-lightblack);
|
||||
display: flex;
|
||||
transition: all 0.3s ease 0s;
|
||||
margin: 1rem auto 0;
|
||||
border: var(--style-border);
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
max-width: calc(1400px - 3rem);
|
||||
animation: slide-in .6s 0s backwards;
|
||||
}
|
||||
@media screen and (max-width: 1400px) {
|
||||
#bbTimeList {
|
||||
max-width: calc(100% - 3rem);
|
||||
animation: slide-in 0.6s 0s backwards;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
div#bbTimeList {
|
||||
margin: 0 20px 15px;
|
||||
}
|
||||
}
|
||||
[data-theme="dark"] #bbTimeList {
|
||||
background: #000 !important;
|
||||
}
|
||||
#bbtalk {
|
||||
width: 100%;
|
||||
}
|
||||
#bber-talk {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
i.bber-logo {
|
||||
font-size: 2rem;
|
||||
line-height: 22px;
|
||||
margin-right: 1rem;
|
||||
transition: all 0.3s ease 0s;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
i.bber-logo:hover,
|
||||
i.bber-gotobb:hover {
|
||||
color: var(--anzhiyu-main);
|
||||
}
|
||||
|
||||
i.bber-gotobb {
|
||||
line-height: 30px;
|
||||
margin-left: 1rem;
|
||||
transition: all 0.3s ease 0s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#bber-talk .li-style {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: 0.3s;
|
||||
font-weight: 700;
|
||||
margin: auto;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#bber-talk .li-style:hover {
|
||||
color: var(--anzhiyu-main);
|
||||
}
|
||||
|
||||
#bbTimeList:hover {
|
||||
border: var(--style-border-hover);
|
||||
box-shadow: var(--anzhiyu-shadow-main);
|
||||
}
|
||||
|
||||
/* 文章页H1-H6图标样式效果 */
|
||||
@-webkit-keyframes rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn);
|
||||
}
|
||||
}
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,323 @@
|
||||
/* 音乐播放器 */
|
||||
|
||||
.aplayer.aplayer-narrow .aplayer-body,
|
||||
.aplayer.aplayer-narrow .aplayer-pic {
|
||||
height: 66px;
|
||||
width: 66px;
|
||||
}
|
||||
|
||||
/* 导航栏音乐 */
|
||||
@media screen and (max-width: 1200px) {
|
||||
#nav-music {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
#nav-music {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 9;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s, left 0s;
|
||||
transform-origin: left bottom;
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
border-radius: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#nav-music:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
#nav-music.playing {
|
||||
border: var(--style-border);
|
||||
box-shadow: 0 0px 12px -3px var(--anzhiyu-none);
|
||||
animation: playingShadow 5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes playingShadow {
|
||||
0% {
|
||||
box-shadow: 0 0px 12px -3px var(--anzhiyu-none);
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 0px 12px 0px var(--anzhiyu-main);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0px 12px -3px var(--anzhiyu-none);
|
||||
}
|
||||
}
|
||||
|
||||
#nav-music .aplayer.aplayer-withlrc .aplayer-pic {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
border-radius: 40px;
|
||||
z-index: 1;
|
||||
transition: 0.3s;
|
||||
transform: rotate(0deg) scale(1);
|
||||
border: var(--style-border-always);
|
||||
animation: changeright 24s linear infinite;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
#nav-music.playing .aplayer.aplayer-withlrc .aplayer-pic {
|
||||
box-shadow: 0 0 14px #ffffffa6;
|
||||
transform: rotate(0deg) scale(1.1);
|
||||
border-color: var(--anzhiyu-white);
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes changeright {
|
||||
0% {
|
||||
transform: rotate(0deg) scale(1.1);
|
||||
box-shadow: 0 0 2px #ffffff00;
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: rotate(90deg) scale(1.1);
|
||||
box-shadow: 0 0 14px #ffffff;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(180deg) scale(1.1);
|
||||
box-shadow: 0 0 2px #ffffff00;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: rotate(270deg) scale(1.1);
|
||||
box-shadow: 0 0 14px #ffffff;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg) scale(1.1);
|
||||
box-shadow: 0 0 2px #ffffff00;
|
||||
}
|
||||
}
|
||||
|
||||
#nav-music .aplayer.aplayer-withlrc .aplayer-info {
|
||||
height: 100%;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#nav-music.playing .aplayer.aplayer-withlrc .aplayer-info {
|
||||
color: var(--anzhiyu-white);
|
||||
}
|
||||
|
||||
#nav-music.playing #nav-music-hoverTips {
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
#nav-music #nav-music-hoverTips {
|
||||
color: var(--anzhiyu-white);
|
||||
background: var(--anzhiyu-main);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
border-radius: 40px;
|
||||
opacity: 0;
|
||||
font-size: 12px;
|
||||
z-index: 2;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
#nav-music:hover:not(.playing) #nav-music-hoverTips {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#nav-music
|
||||
.aplayer
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-bar-wrap:hover
|
||||
.aplayer-bar
|
||||
.aplayer-played
|
||||
.aplayer-thumb {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#nav-music .aplayer {
|
||||
background: var(--card-bg);
|
||||
border-radius: 60px;
|
||||
height: 41px;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
transition: 0.3s;
|
||||
border: var(--style-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#nav-music.playing .aplayer {
|
||||
background: var(--anzhiyu-main);
|
||||
border: var(--style-border-hover);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
backdrop-filter: blur(20px);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
#nav-music .aplayer .aplayer-notice {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#nav-music .aplayer .aplayer-miniswitcher {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#nav-music .aplayer .aplayer-body {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#nav-music .aplayer-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#nav-music .aplayer .aplayer-info .aplayer-music {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px 0 8px;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-time {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#nav-music .aplayer .aplayer-info .aplayer-music .aplayer-author {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#nav-music .aplayer.aplayer-withlist .aplayer-info {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#nav-music .aplayer .aplayer-pic .aplayer-button {
|
||||
bottom: 50%;
|
||||
right: 50%;
|
||||
transform: translate(50%, 50%);
|
||||
margin: 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
#nav-music .aplayer .aplayer-pic:has(.aplayer-button.aplayer-play) {
|
||||
animation-play-state: paused;
|
||||
transform: rotate(0deg) scale(1) !important;
|
||||
}
|
||||
#nav-music .aplayer.aplayer-withlrc .aplayer-pic {
|
||||
margin-left: 8px;
|
||||
}
|
||||
#nav-music .aplayer .aplayer-info .aplayer-music .aplayer-title {
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: 0.3s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#nav-music .aplayer .aplayer-info .aplayer-controller {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
|
||||
height: 100%;
|
||||
background: 0 0;
|
||||
}
|
||||
|
||||
#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
|
||||
height: 100%;
|
||||
opacity: 0.1;
|
||||
background-color: var(--anzhiyu-white) !important;
|
||||
animation: lightBar 5s ease infinite;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
#nav-music.playing .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes lightBar {
|
||||
0% {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 歌词 */
|
||||
#nav-music .aplayer.aplayer-withlrc .aplayer-lrc {
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
transition: 0.3s;
|
||||
margin-top: -2px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
#nav-music.stretch .aplayer.aplayer-withlrc .aplayer-lrc {
|
||||
width: 200px;
|
||||
margin-left: 8px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#nav-music .aplayer .aplayer-lrc p.aplayer-lrc-current {
|
||||
color: var(--anzhiyu-white);
|
||||
border: none;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
#nav-music .aplayer .aplayer-lrc:after,
|
||||
#nav-music .aplayer .aplayer-lrc:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#nav-music .aplayer .aplayer-lrc p {
|
||||
color: #ffffffb3;
|
||||
line-height: 40px !important;
|
||||
height: 40px !important;
|
||||
margin: 0px 0;
|
||||
vertical-align: top;
|
||||
/* display: inline-block; */
|
||||
}
|
||||
|
||||
#nav-music .aplayer .aplayer-pic {
|
||||
pointer-events: none;
|
||||
}
|
||||
#nav-music .aplayer .aplayer-pic .aplayer-button {
|
||||
pointer-events: all;
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
/* bilibli番剧插件 */
|
||||
#page #article-container .bangumi-tab.bangumi-active {
|
||||
background: var(--anzhiyu-theme);
|
||||
color: var(--anzhiyu-ahoverbg);
|
||||
border-radius: 10px;
|
||||
}
|
||||
#page #article-container .bangumi-tabs .bangumi-tab {
|
||||
border-bottom: none;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#page #article-container .bangumi-tabs a.bangumi-tab:hover {
|
||||
text-decoration: none !important;
|
||||
border-radius: 10px;
|
||||
column-gap: var(--anzhiyu-ahoverbg);
|
||||
}
|
||||
#page #article-container .bangumi-pagination a.bangumi-button {
|
||||
border-bottom: none;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.bangumi-button:hover {
|
||||
background: var(--anzhiyu-theme) !important;
|
||||
border-radius: 10px !important;
|
||||
color: var(--anzhiyu-ahoverbg) !important;
|
||||
}
|
||||
a.bangumi-button.bangumi-nextpage:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.bangumi-button {
|
||||
padding: 5px 10px !important;
|
||||
}
|
||||
|
||||
a.bangumi-tab {
|
||||
padding: 5px 10px !important;
|
||||
}
|
||||
svg.icon.faa-tada {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.bangumi-info-item {
|
||||
border-right: 1px solid #f2b94b;
|
||||
}
|
||||
.bangumi-info-item span {
|
||||
color: #f2b94b;
|
||||
}
|
||||
.bangumi-info-item em {
|
||||
color: #f2b94b;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
/*哔哩哔哩视频适配*/
|
||||
.aspect-ratio {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 75%;
|
||||
margin: 3% auto;
|
||||
text-align: center;
|
||||
}
|
||||
.aspect-ratio iframe {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
#page:has(#lib-cards):has(#libCategories) #post-comment .tk-comments-container > .tk-comment {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#libCategories {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
#page:has(#lib-cards):has(#libCategories) h1.page-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
body[data-type="categories"] #body-wrap #category {
|
||||
padding: 20px 15px 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.card-glass .card-background {
|
||||
box-shadow: none;
|
||||
margin: 0 15px;
|
||||
}
|
||||
[data-theme="dark"] .card-glass .card-background {
|
||||
background-color: transparent;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
/* 留言板样式补丁 */
|
||||
#maincontent #form-wrap .formmain .comments-main h3.title3 {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
body[data-type="envelope"] #page #post-comment .tk-comments-container > .tk-comment {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
[data-theme="dark"] #universe {
|
||||
display: block;
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
canvas#universe {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@media screen and (max-width: 768px) {
|
||||
#page .fcircle_page .author-content-item .card-content .banner-button-group .banner-button i,
|
||||
#page .fcircle_page .author-content-item .card-content .banner-button-group .banner-button svg {
|
||||
margin-left: 140px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
#gitcalendar #git_container ul li {
|
||||
margin: 0 !important;
|
||||
}
|
||||
#gitcalendar #git_container ul li::before{
|
||||
content: none !important;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
.dplayer-video-wrap,
|
||||
.dplayer {
|
||||
border-radius: 12px;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
.note .hide-block {
|
||||
margin: 0;
|
||||
}
|
||||
.note .hide-block button {
|
||||
border-radius: 30px;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
body[data-type="link"] main #page {
|
||||
border: 0;
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
[data-theme="dark"] body[data-type="link"] #page {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.flink .anzhiyu-flink-list {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
/* 修复时间轴wowjs超出盒子 */
|
||||
div#archive {
|
||||
overflow: hidden;
|
||||
padding: 22px;
|
||||
}
|
||||
/* 修复加载时图片太大超出范围 */
|
||||
.aplayer.aplayer-fixed {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#page .fcircle_page .author-content-item .card-content .banner-button-group .banner-button {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.relatedPosts > .relatedPosts-list > div {
|
||||
border-radius: var(--anzhiyu-border-radius);
|
||||
}
|
||||
|
||||
/* 侧边栏按钮圆角 */
|
||||
#rightside > div > button {
|
||||
border-radius: 5px;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
/* site-card样式修复 */
|
||||
#article-container .site-card-group a {
|
||||
padding: 0;
|
||||
border-bottom: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
#article-container .site-card-group .site-card {
|
||||
background: #fff !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
#article-container .site-card-group a:hover {
|
||||
padding: 0;
|
||||
border-bottom: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
[data-theme="light"] #footer-wrap {
|
||||
color: var(--font-color);
|
||||
}
|
||||
#footer-wrap .anzhiyufont.anzhiyu-icon-heartbeat {
|
||||
transition: 0.3s;
|
||||
animation: heartbeat-bounce 2s ease-in-out infinite;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: var(--fa-display, inline-block);
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
line-height: 1;
|
||||
text-rendering: auto;
|
||||
}
|
||||
@keyframes heartbeat-bounce {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
10%,
|
||||
30% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
50%,
|
||||
70% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
/* 顶部样式 */
|
||||
.fcircle_page .author-content.fcirclePage {
|
||||
height: 19rem;
|
||||
color: var(--anzhiyu-white);
|
||||
overflow: hidden;
|
||||
margin-top: 0px;
|
||||
}
|
||||
body[data-type="fcircle"] #web_bg {
|
||||
background-color: #f7f9fe;
|
||||
}
|
||||
|
||||
[data-theme="dark"] body[data-type="fcircle"] #web_bg {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
body[data-type="fcircle"] #page .page-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body[data-type="fcircle"] #page {
|
||||
border: 0;
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
.fcircle_page a {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
.fcircle_page .cf-article-avatar a:hover {
|
||||
background: none !important;
|
||||
color: var(--anzhiyu-fontcolor) !important;
|
||||
}
|
||||
/* 随机文章样式 */
|
||||
|
||||
.title-h2-a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.title-h2-a-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.title-h2-a-left h2 {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.title-h2-a a {
|
||||
margin-left: 0.5rem;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
font-weight: 700;
|
||||
}
|
||||
#random-post {
|
||||
min-height: 32px;
|
||||
background: var(--card-bg);
|
||||
border: var(--style-border-always);
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
padding: 20px 30px;
|
||||
border-radius: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
#random-post .random-friends-post {
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid var(--anzhiyu-lighttext) !important;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
font-weight: 700;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
#random-post .random-friends-post:hover {
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid var(--anzhiyu-none) !important;
|
||||
color: var(--anzhiyu-white) !important;
|
||||
background: var(--anzhiyu-main) !important;
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--anzhiyu-shadow-main);
|
||||
}
|
||||
#article-container .title-h2-a a:hover {
|
||||
color: var(--anzhiyu-hovertext) !important;
|
||||
}
|
||||
.fcircle_page .title-h2-a-right a.random-post-all {
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
}
|
||||
#cf-overshow.cf-show-now p a.cf-article-title:hover,
|
||||
.fcircle_page #fcircleContainer .cf-article a.cf-article-title:hover,
|
||||
.fcircle_page .title-h2-a-right a.random-post-all:hover,
|
||||
.fcircle_page .title-h2-a-left a.random-post-start:hover {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
color: var(--anzhiyu-theme);
|
||||
}
|
||||
.fcircle_page .fish-pond-item .cf-article .cf-article-title {
|
||||
line-height: 2;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
#greetingBox {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 15%;
|
||||
width: 400px;
|
||||
text-align: center;
|
||||
z-index: 999;
|
||||
pointer-events: none;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#greetingBox {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#greeting {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
top: -110px;
|
||||
padding: 5px 40px;
|
||||
border-radius: 50px;
|
||||
background-color: white;
|
||||
color: black;
|
||||
font-size: small;
|
||||
transition: 0.5s;
|
||||
box-shadow: rgb(0 0 0 / 5%) 0 10px 20px;
|
||||
}
|
||||
|
||||
#greeting.shown {
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
/* 首页分类框展示 */
|
||||
.categoryGroup {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-width: 200px;
|
||||
height: 24%;
|
||||
width: 100%;
|
||||
|
||||
animation: slide-in 0.6s 0.2s backwards;
|
||||
}
|
||||
.categoryItem:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.categoryItem {
|
||||
width: calc(100% / 3 - 0.33rem);
|
||||
height: 100%;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.categoryItem {
|
||||
overflow: hidden;
|
||||
transform: scale(1);
|
||||
transition: all 0.8s cubic-bezier(0.65, 0.15, 0.37, 1.19);
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
a.categoryButton {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: var(--anzhiyu-card-bg);
|
||||
border-radius: 12px;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
line-height: 4em;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
color: var(--anzhiyu-white);
|
||||
transition: all 0.8s cubic-bezier(0.39, 0.575, 0.565, 1);
|
||||
transform: scale(1);
|
||||
overflow: hidden;
|
||||
font-family: inherit;
|
||||
}
|
||||
.categoryButtonText {
|
||||
padding-left: 21px;
|
||||
}
|
||||
a.categoryButton svg,
|
||||
a.categoryButton i {
|
||||
font-size: 5rem;
|
||||
opacity: 0.2;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 20%;
|
||||
transition: 0.3s;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
filter: blur(2px);
|
||||
transform: scale(1) rotate(15deg);
|
||||
}
|
||||
|
||||
a.categoryButton.blue {
|
||||
background: linear-gradient(to right, #358bff, #15c6ff);
|
||||
background-size: 200%;
|
||||
}
|
||||
a.categoryButton.red {
|
||||
background: linear-gradient(to right, #f65, #ffbf37);
|
||||
background-size: 200%;
|
||||
}
|
||||
a.categoryButton.green {
|
||||
background: linear-gradient(to right, #18e7ae, #1eebeb);
|
||||
background-size: 200%;
|
||||
}
|
||||
|
||||
.categoryItem:hover {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.categoryItem:hover svg,
|
||||
.categoryItem:hover i {
|
||||
opacity: 0.8;
|
||||
transition: 0.8s;
|
||||
transition-delay: 0.15s;
|
||||
transform: scale(1.03);
|
||||
font-size: 2.5rem;
|
||||
filter: blur(0);
|
||||
top: 15%;
|
||||
}
|
||||
a.categoryButton:after {
|
||||
top: 47px;
|
||||
width: 1rem;
|
||||
left: 21px;
|
||||
height: 2px;
|
||||
background: var(--anzhiyu-white);
|
||||
content: "";
|
||||
border-radius: 1px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.categoryGroup {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] a.categoryButton.blue {
|
||||
background: linear-gradient(to right, #0653b8, #2fcbff);
|
||||
background-size: 200%;
|
||||
}
|
||||
[data-theme="dark"] a.categoryButton.red {
|
||||
background: linear-gradient(to right, #e22a16, #da980c);
|
||||
background-size: 200%;
|
||||
}
|
||||
[data-theme="dark"] a.categoryButton.green {
|
||||
background: linear-gradient(to right, #099e74, #0ea4a4);
|
||||
background-size: 200%;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
a span.top-group-text {
|
||||
border-radius: 0px 0 12px 0;
|
||||
}
|
||||
|
||||
div#bannerGroup {
|
||||
width: calc(100% - 600px - 2rem);
|
||||
height: 340px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
#topPostGroup .top-group-list-item {
|
||||
display: flex;
|
||||
width: calc(100% / 4 - 5px);
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
background: var(--anzhiyu-card-bg);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
height: 128px;
|
||||
max-height: 128px;
|
||||
border: var(--style-border-always);
|
||||
transition: 0.3s;
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
}
|
||||
#topPostGroup .post_cover {
|
||||
width: 100%;
|
||||
}
|
||||
#topPostGroup .post_cover img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: var(--anzhiyu-secondbg);
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
|
||||
#topPostGroup .top-group-list-item .post_cover a {
|
||||
height: 80px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
span.top-group-text {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -40px;
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
background: var(--anzhiyu-theme);
|
||||
color: var(--anzhiyu-white);
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
border-radius: 12px 0 12px 0;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.top-group-list-item:hover span.top-group-text {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#topPostGroup .top-group-list-item .top-group-info {
|
||||
padding: 0.3rem 0.5rem 0.3rem 0.5rem !important;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
#topPostGroup .top-group-list-item .top-group-info .article-title {
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
line-height: 1.5;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
align-content: center;
|
||||
padding-top: 0.5rem;
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
#topPostGroup .top-group-list-item:hover {
|
||||
border: var(--style-border-hover);
|
||||
box-shadow: var(--anzhiyu-shadow-main);
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
#topPostGroup .top-group-list-item:hover .article-title {
|
||||
color: var(--anzhiyu-theme);
|
||||
}
|
||||
|
||||
.top-group-list-none {
|
||||
width: calc(100% / 4 - 5px);
|
||||
}
|
||||
#topPostGroup .topPostGroupTime {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1450px) {
|
||||
#topPostGroup .top-group-list-item {
|
||||
width: calc(100% / 4 - 20px) !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#topPostGroup .top-group-list-item {
|
||||
width: calc(100% / 2 - 5px) !important;
|
||||
margin: 2px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#topGroup {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,439 @@
|
||||
#swiper_container_blog {
|
||||
width: 49%;
|
||||
transition: all 0.3s, width 0s;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.swiper-wrapper {
|
||||
align-items: center;
|
||||
}
|
||||
div#swiper_container {
|
||||
transition: 0.3s;
|
||||
}
|
||||
/* 防止轮播图css未加载完时的超度横行滚动条 */
|
||||
#swiper_container {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
div.swiper_container_card {
|
||||
margin: 1rem auto 0;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
div.swiper_container_card {
|
||||
margin: 0.2rem auto 0;
|
||||
}
|
||||
}
|
||||
div#swiper_container {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
overflow: initial;
|
||||
background: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
border: var(--style-border);
|
||||
}
|
||||
div#swiper_container:hover {
|
||||
border: var(--style-border-hover);
|
||||
box-shadow: var(--anzhiyu-shadow-main);
|
||||
}
|
||||
.blog-slider {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border-radius: 12px 8px 8px 12px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.blog-slider__item {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: box;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-moz-box-align: center;
|
||||
-o-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__img img {
|
||||
opacity: 1;
|
||||
-ms-filter: none;
|
||||
filter: none;
|
||||
-webkit-transition-delay: 0.3s;
|
||||
-moz-transition-delay: 0.3s;
|
||||
-o-transition-delay: 0.3s;
|
||||
-ms-transition-delay: 0.3s;
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > * {
|
||||
opacity: 1;
|
||||
-ms-filter: none;
|
||||
filter: none;
|
||||
-webkit-transform: none;
|
||||
-moz-transform: none;
|
||||
-o-transform: none;
|
||||
-ms-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(1) {
|
||||
-webkit-transition-delay: 0.3s;
|
||||
-moz-transition-delay: 0.3s;
|
||||
-o-transition-delay: 0.3s;
|
||||
-ms-transition-delay: 0.3s;
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(2) {
|
||||
-webkit-transition-delay: 0.4s;
|
||||
-moz-transition-delay: 0.4s;
|
||||
-o-transition-delay: 0.4s;
|
||||
-ms-transition-delay: 0.4s;
|
||||
transition-delay: 0.4s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(3) {
|
||||
-webkit-transition-delay: 0.5s;
|
||||
-moz-transition-delay: 0.5s;
|
||||
-o-transition-delay: 0.5s;
|
||||
-ms-transition-delay: 0.5s;
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(4) {
|
||||
-webkit-transition-delay: 0.6s;
|
||||
-moz-transition-delay: 0.6s;
|
||||
-o-transition-delay: 0.6s;
|
||||
-ms-transition-delay: 0.6s;
|
||||
transition-delay: 0.6s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(5) {
|
||||
-webkit-transition-delay: 0.7s;
|
||||
-moz-transition-delay: 0.7s;
|
||||
-o-transition-delay: 0.7s;
|
||||
-ms-transition-delay: 0.7s;
|
||||
transition-delay: 0.7s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(6) {
|
||||
-webkit-transition-delay: 0.8s;
|
||||
-moz-transition-delay: 0.8s;
|
||||
-o-transition-delay: 0.8s;
|
||||
-ms-transition-delay: 0.8s;
|
||||
transition-delay: 0.8s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(7) {
|
||||
-webkit-transition-delay: 0.9s;
|
||||
-moz-transition-delay: 0.9s;
|
||||
-o-transition-delay: 0.9s;
|
||||
-ms-transition-delay: 0.9s;
|
||||
transition-delay: 0.9s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(8) {
|
||||
-webkit-transition-delay: 1s;
|
||||
-moz-transition-delay: 1s;
|
||||
-o-transition-delay: 1s;
|
||||
-ms-transition-delay: 1s;
|
||||
transition-delay: 1s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(9) {
|
||||
-webkit-transition-delay: 1.1s;
|
||||
-moz-transition-delay: 1.1s;
|
||||
-o-transition-delay: 1.1s;
|
||||
-ms-transition-delay: 1.1s;
|
||||
transition-delay: 1.1s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(10) {
|
||||
-webkit-transition-delay: 1.2s;
|
||||
-moz-transition-delay: 1.2s;
|
||||
-o-transition-delay: 1.2s;
|
||||
-ms-transition-delay: 1.2s;
|
||||
transition-delay: 1.2s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(11) {
|
||||
-webkit-transition-delay: 1.3s;
|
||||
-moz-transition-delay: 1.3s;
|
||||
-o-transition-delay: 1.3s;
|
||||
-ms-transition-delay: 1.3s;
|
||||
transition-delay: 1.3s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(12) {
|
||||
-webkit-transition-delay: 1.4s;
|
||||
-moz-transition-delay: 1.4s;
|
||||
-o-transition-delay: 1.4s;
|
||||
-ms-transition-delay: 1.4s;
|
||||
transition-delay: 1.4s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(13) {
|
||||
-webkit-transition-delay: 1.5s;
|
||||
-moz-transition-delay: 1.5s;
|
||||
-o-transition-delay: 1.5s;
|
||||
-ms-transition-delay: 1.5s;
|
||||
transition-delay: 1.5s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(14) {
|
||||
-webkit-transition-delay: 1.6s;
|
||||
-moz-transition-delay: 1.6s;
|
||||
-o-transition-delay: 1.6s;
|
||||
-ms-transition-delay: 1.6s;
|
||||
transition-delay: 1.6s;
|
||||
}
|
||||
.blog-slider__item.swiper-slide-active .blog-slider__content > :nth-child(15) {
|
||||
-webkit-transition-delay: 1.7s;
|
||||
-moz-transition-delay: 1.7s;
|
||||
-o-transition-delay: 1.7s;
|
||||
-ms-transition-delay: 1.7s;
|
||||
transition-delay: 1.7s;
|
||||
}
|
||||
.blog-slider__img {
|
||||
width: 290px;
|
||||
-webkit-flex-shrink: 0;
|
||||
flex-shrink: 0;
|
||||
height: 200px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
transform: translateX(0);
|
||||
overflow: hidden;
|
||||
}
|
||||
.blog-slider__img:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.blog-slider__img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
opacity: 0;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.blog-slider__content {
|
||||
padding-right: 50px;
|
||||
padding-left: 50px;
|
||||
}
|
||||
.blog-slider__content > * {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(25px);
|
||||
-moz-transform: translateY(25px);
|
||||
-o-transform: translateY(25px);
|
||||
-ms-transform: translateY(25px);
|
||||
transform: translateY(25px);
|
||||
-webkit-transition: all 0.4s;
|
||||
-moz-transition: all 0.4s;
|
||||
-o-transition: all 0.4s;
|
||||
-ms-transition: all 0.4s;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
.blog-slider__code {
|
||||
color: var(--font-color);
|
||||
margin-bottom: 0;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
}
|
||||
.blog-slider__title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--font-color);
|
||||
margin-bottom: 15px;
|
||||
-webkit-line-clamp: 1;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.blog-slider__text {
|
||||
color: var(--font-color);
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.5em;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.blog-slider__button {
|
||||
display: -webkit-inline-box;
|
||||
display: -moz-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-box;
|
||||
display: inline-flex;
|
||||
background-color: var(--btn-bg);
|
||||
padding: 4px 14px;
|
||||
border-radius: 8px;
|
||||
color: var(--btn-color);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
-webkit-box-pack: center;
|
||||
-moz-box-pack: center;
|
||||
-o-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
display: none;
|
||||
}
|
||||
.blog-slider__button:hover {
|
||||
background-color: var(--btn-hover-color);
|
||||
color: var(--btn-color);
|
||||
}
|
||||
.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets,
|
||||
.blog-slider .swiper-pagination-custom,
|
||||
.blog-slider .swiper-pagination-fraction {
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.blog-slider__pagination {
|
||||
position: absolute;
|
||||
z-index: 21;
|
||||
right: 20px;
|
||||
width: 11px !important;
|
||||
text-align: center;
|
||||
left: auto !important;
|
||||
top: 50%;
|
||||
bottom: auto !important;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-moz-transform: translateY(-50%);
|
||||
-o-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.blog-slider .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin: 8px 0;
|
||||
}
|
||||
.blog-slider__pagination .swiper-pagination-bullet {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
display: block;
|
||||
border-radius: 10px;
|
||||
background: #858585;
|
||||
opacity: 0.2;
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
-o-transition: all 0.3s;
|
||||
-ms-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.blog-slider__pagination .swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
-ms-filter: none;
|
||||
filter: none;
|
||||
background: var(--btn-bg);
|
||||
height: 30px;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.blog-slider__pagination {
|
||||
-webkit-transform: translateX(-50%);
|
||||
-moz-transform: translateX(-50%);
|
||||
-o-transform: translateX(-50%);
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
left: 50% !important;
|
||||
top: 320px;
|
||||
width: 100% !important;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: box;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-moz-box-pack: center;
|
||||
-o-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-moz-box-align: center;
|
||||
-o-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.blog-slider .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
|
||||
margin: 0 5px;
|
||||
}
|
||||
.blog-slider__pagination .swiper-pagination-bullet-active {
|
||||
height: 11px;
|
||||
width: 30px;
|
||||
}
|
||||
.blog-slider__button {
|
||||
display: -webkit-inline-box;
|
||||
display: -moz-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-box;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
}
|
||||
.blog-slider {
|
||||
min-height: 350px;
|
||||
height: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.blog-slider__content {
|
||||
text-align: center;
|
||||
padding: 0 30px;
|
||||
}
|
||||
.blog-slider__item {
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
-o-box-orient: vertical;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.blog-slider__img {
|
||||
width: 100%;
|
||||
padding-top: 0;
|
||||
}
|
||||
.blog-slider__content {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.blog-slider__pagination.swiper-pagination-clickable.swiper-pagination-bullets {
|
||||
top: 218px;
|
||||
}
|
||||
|
||||
.swiper_container_card #swiper_container_blog div#swiper_container.blog-slider {
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.blog-slider__item .blog-slider__content .blog-slider__code {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.blog-slider__title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.blog-slider {
|
||||
height: 200px;
|
||||
}
|
||||
.blog-slider__img {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
div#swiper_container {
|
||||
width: 100%;
|
||||
}
|
||||
#swiper_container_blog {
|
||||
width: 99%;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper_container_card {
|
||||
display: flex !important;
|
||||
justify-content: space-around;
|
||||
flex-direction: row !important;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -0,0 +1,268 @@
|
||||
.todayCard-title,
|
||||
.todayCard-tips,
|
||||
.topGroup .banner-button {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.topGroup {
|
||||
height: 340px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: calc(600px + 1.5rem);
|
||||
position: relative;
|
||||
align-content: space-between;
|
||||
}
|
||||
.topGroup .todayCard {
|
||||
position: absolute;
|
||||
width: calc(600px + 1rem);
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: var(--anzhiyu-card-bg);
|
||||
border-radius: 12px;
|
||||
margin-left: 0.5rem;
|
||||
overflow: hidden;
|
||||
transition: 0.3s;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.topGroup .todayCard .todayCard-info {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
left: 2rem;
|
||||
z-index: 2;
|
||||
color: var(--anzhiyu-white);
|
||||
max-width: 60%;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.topGroup .todayCard .todayCard-info .todayCard-tips {
|
||||
opacity: 0.8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.topGroup .todayCard .todayCard-info .todayCard-title {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
line-height: 36px;
|
||||
}
|
||||
.topGroup .todayCard .todayCard-cover {
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-size: cover;
|
||||
z-index: -1;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.topGroup .banner-button-group {
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
bottom: 2rem;
|
||||
display: flex;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.topGroup .todayCard.hide .todayCard-cover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.topGroup .banner-button {
|
||||
background: var(--anzhiyu-white-op);
|
||||
border-radius: 20px;
|
||||
color: var(--anzhiyu-white);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
transform: translateZ(0);
|
||||
height: 40px;
|
||||
width: 125px;
|
||||
justify-content: center;
|
||||
}
|
||||
.topGroup .banner-button-group .banner-button .banner-button-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.topGroup .banner-button i,
|
||||
.topGroup .banner-button svg {
|
||||
margin-right: 8px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.topGroup .todayCard::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-shadow: 0 -109px 133px -9px #000000 inset;
|
||||
}
|
||||
|
||||
.topGroup .todayCard.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.topGroup .todayCard img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: var(--anzhiyu-secondbg);
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
.topGroup .recent-post-item:nth-child(4),
|
||||
.topGroup .recent-post-item:nth-child(5),
|
||||
.topGroup .recent-post-item:nth-child(6) {
|
||||
margin-bottom: 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.topGroup .recent-post-item {
|
||||
display: none;
|
||||
width: 200px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
background: var(--anzhiyu-card-bg);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
min-width: 200px;
|
||||
height: 164px !important;
|
||||
max-height: 164px;
|
||||
border: var(--style-border-always);
|
||||
transition: 0.3s;
|
||||
position: relative;
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0px;
|
||||
margin-bottom: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.topGroup .recent-post-item:hover .recent-post-info .article-title {
|
||||
color: var(--anzhiyu-main);
|
||||
}
|
||||
.topGroup .recent-post-item .post_cover {
|
||||
width: 100%;
|
||||
}
|
||||
.topGroup .recent-post-item .post_cover a {
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
}
|
||||
.topGroup span.recent-post-top-text {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -40px;
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
background: var(--anzhiyu-theme);
|
||||
color: var(--anzhiyu-white);
|
||||
padding: 2px 8px;
|
||||
font-size: 12px;
|
||||
border-radius: 12px 0 12px 0;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.topGroup .recent-post-item .post_cover img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
background: var(--anzhiyu-secondbg);
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
.topGroup .recent-post-item .recent-post-info {
|
||||
padding: 0.3rem 0.5rem 0.3rem 0.5rem;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.topGroup .recent-post-item .recent-post-info .article-title {
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
line-height: 1.5;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
align-content: center;
|
||||
padding-top: 0.5rem;
|
||||
font-weight: bold;
|
||||
font-size: 1rem !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.topGroup .recent-post-item:hover .recent-post-top-text {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.topGroup .todayCard {
|
||||
background: #0e57d5;
|
||||
}
|
||||
|
||||
div#bannerGroup {
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.topGroup .recent-post-item {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.categoryGroup .categoryItem:nth-child(3) {
|
||||
display: none;
|
||||
}
|
||||
.categoryGroup {
|
||||
flex-direction: column;
|
||||
height: 95%;
|
||||
}
|
||||
.topGroup {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.topGroup .todayCard {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.swiper_container_card {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
justify-content: flex-start !important;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.categoryItem {
|
||||
height: 48%;
|
||||
min-width: 200px;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.categoryGroup {
|
||||
display: flex !important;
|
||||
}
|
||||
#bbTimeList {
|
||||
margin: 0 1.5rem;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper_container_card::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topGroup .banner-button:hover {
|
||||
background: var(--anzhiyu-theme);
|
||||
color: var(--anzhiyu-white);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
#local-search .search-dialog .local-search__hit-item:before {
|
||||
content: none !important;
|
||||
}
|
||||
#local-search .search-dialog .local-search__hit-item {
|
||||
padding: 10px !important;
|
||||
border-radius: 8px;
|
||||
border: var(--style-border);
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
#local-search .search-dialog .local-search__hit-item .search-left {
|
||||
width: 35%;
|
||||
}
|
||||
#local-search .search-dialog .local-search__hit-item .search-right {
|
||||
width: 60%;
|
||||
}
|
||||
#local-search .search-dialog .local-search__hit-item .search-left img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
background: var(--anzhiyu-secondbg);
|
||||
border-radius: 8px;
|
||||
}
|
||||
#local-search .search-dialog .local-search__hit-item .search-result {
|
||||
cursor: pointer;
|
||||
}
|
||||
#local-search .tag-list {
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
margin-right: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
border: var(--style-border);
|
||||
cursor: pointer;
|
||||
}
|
||||
#local-search .search-dialog .local-search__hit-item .tag-list {
|
||||
display: inline;
|
||||
}
|
||||
#local-search .search-dialog .local-search__hit-item .tag-list:hover {
|
||||
background: var(--anzhiyu-main);
|
||||
color: var(--anzhiyu-white);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
b, strong {
|
||||
color: var(--anzhiyu-lighttext);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.about-reward {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 2rem;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.reward .about-reward #con {
|
||||
width: 170px;
|
||||
}
|
||||
.reward #tube-con {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,59 @@
|
||||
div#runtime {
|
||||
width: 180px;
|
||||
margin: auto;
|
||||
color: #fff;
|
||||
padding-inline: 5px;
|
||||
border-radius: 10px;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
#workboard {
|
||||
font-size: 12px;
|
||||
}
|
||||
[data-theme="dark"] div#runtime {
|
||||
color: #28b4c8;
|
||||
box-shadow: 0 0 5px rgba(28, 69, 218, 0.71);
|
||||
animation: flashlight 1s linear infinite alternate;
|
||||
}
|
||||
#ghbdages .github-badge img {
|
||||
height: 20px;
|
||||
max-width: 150px;
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
#workboard img.boardsign {
|
||||
width: 100%;
|
||||
max-width: 130px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
@-moz-keyframes flashlight {
|
||||
from {
|
||||
box-shadow: 0 0 5px #1478d2;
|
||||
}
|
||||
to {
|
||||
box-shadow: 0 0 2px #1478d2;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes flashlight {
|
||||
from {
|
||||
box-shadow: 0 0 5px #1478d2;
|
||||
}
|
||||
to {
|
||||
box-shadow: 0 0 2px #1478d2;
|
||||
}
|
||||
}
|
||||
@-o-keyframes flashlight {
|
||||
from {
|
||||
box-shadow: 0 0 5px #1478d2;
|
||||
}
|
||||
to {
|
||||
box-shadow: 0 0 2px #1478d2;
|
||||
}
|
||||
}
|
||||
@keyframes flashlight {
|
||||
from {
|
||||
box-shadow: 0 0 5px #1478d2;
|
||||
}
|
||||
to {
|
||||
box-shadow: 0 0 2px #1478d2;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.author-content.author-content-item {
|
||||
height: 19rem;
|
||||
background-color: var(--anzhiyu-main);
|
||||
background-position: left 28%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
color: var(--anzhiyu-white);
|
||||
overflow: hidden;
|
||||
margin-top: 0;
|
||||
background-image: linear-gradient(-45deg, var(--anzhiyu-main), #0f4667, #2a6973 150%, #67044d);
|
||||
background-size: 400%;
|
||||
animation: gradient 15s ease infinite;
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
#skills-tags-group-all {
|
||||
display: flex;
|
||||
transform: rotate(0);
|
||||
transition: 0.3s;
|
||||
}
|
||||
#skills-tags-group-all .tags-group-wrapper {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
animation: rowup 60s linear infinite;
|
||||
}
|
||||
#skills-tags-group-all .tags-group-icon-pair {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
#skills-tags-group-all .tags-group-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 66px;
|
||||
font-weight: 700;
|
||||
box-shadow: var(--anzhiyu-shadow-blackdeep);
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
#skills-tags-group-all .tags-group-icon img {
|
||||
width: 60px;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
[data-theme="dark"] #skills-tags-group-all .tags-group-icon img {
|
||||
filter: none;
|
||||
}
|
||||
#skills-tags-group-all .tags-group-icon-pair .tags-group-icon:nth-child(even) {
|
||||
margin-top: 1rem;
|
||||
transform: translate(-60px);
|
||||
}
|
||||
|
||||
#skills-tags-group-all .etc {
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@keyframes rowup {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
#article-container .tag-Link {
|
||||
background: var(--anzhiyu-secondbg);
|
||||
border-radius: 8px !important;
|
||||
display: flex;
|
||||
border: var(--style-border);
|
||||
flex-direction: column;
|
||||
padding: 0.5rem 1rem !important;
|
||||
border-width: 1px !important;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
#article-container .tag-Link:hover {
|
||||
border: var(--style-border-hover);
|
||||
}
|
||||
|
||||
#article-container .tag-Link .tag-link-tips {
|
||||
border-bottom: var(--style-border);
|
||||
padding-bottom: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--anzhiyu-gray);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#article-container .tag-Link:hover .tag-link-tips {
|
||||
color: var(--anzhiyu-white);
|
||||
}
|
||||
|
||||
#article-container .tag-Link .tag-link-bottom {
|
||||
display: flex;
|
||||
margin-top: 0.5rem;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
#article-container .tag-Link .tag-link-bottom .tag-link-left {
|
||||
width: 60px;
|
||||
min-width: 60px;
|
||||
height: 60px;
|
||||
background-size: cover;
|
||||
border-radius: var(--anzhiyu-border-radius);
|
||||
background-color: var(--anzhiyu-card-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#article-container .tag-Link .tag-link-bottom .tag-link-left i {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
font-size: 24px;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
}
|
||||
|
||||
#article-container .tag-Link .tag-link-bottom .tag-link-right {
|
||||
margin-left: 1rem;
|
||||
max-width: calc(100% - 76px - 1rem);
|
||||
}
|
||||
|
||||
#article-container .tag-Link .tag-link-bottom .tag-link-right .tag-link-title {
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
#article-container .tag-Link .tag-link-bottom .tag-link-right .tag-link-sitename {
|
||||
font-size: 0.7rem;
|
||||
color: var(--anzhiyu-gray);
|
||||
font-weight: normal;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
#article-container .tag-Link:hover .tag-link-bottom .tag-link-right .tag-link-sitename {
|
||||
color: var(--anzhiyu-white);
|
||||
}
|
||||
|
||||
#article-container .tag-Link .tag-link-bottom i {
|
||||
margin-left: auto;
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
.site-card-group .site-card .info {
|
||||
margin-top: 0;
|
||||
}
|
||||
.site-card-group > a {
|
||||
width: calc(100% / 4 - 0.5rem);
|
||||
height: 150px;
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0.5rem 0.25rem;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease 0s, transform cubic-bezier(0.71, 0.15, 0.16, 1.15) 0.6s;
|
||||
box-shadow: none;
|
||||
border: var(--style-border) !important;
|
||||
}
|
||||
|
||||
.site-card-group > a .wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.site-card-group > a .cover {
|
||||
width: 100%;
|
||||
-webkit-transition: -webkit-transform 0.5s ease-out;
|
||||
-moz-transition: -moz-transform 0.5s ease-out;
|
||||
-o-transition: -o-transform 0.5s ease-out;
|
||||
-ms-transition: -ms-transform 0.5s ease-out;
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
.site-card-group > a .info,
|
||||
.site-card-group > a .wrapper .cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.site-card-group > a .info {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: box;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
-o-box-orient: vertical;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: center;
|
||||
-moz-box-pack: center;
|
||||
-o-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-moz-box-align: center;
|
||||
-o-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
|
||||
-moz-transition: -moz-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
|
||||
-o-transition: -o-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
|
||||
-ms-transition: -ms-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
|
||||
transition: transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s;
|
||||
}
|
||||
|
||||
.site-card-group > a .info img {
|
||||
position: relative;
|
||||
top: 19px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
-webkit-box-shadow: 0 0 10px rgb(0 0 0 / 30%);
|
||||
box-shadow: 0 0 10px rgb(0 0 0 / 30%);
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.site-card-group > a .info span {
|
||||
padding: 20px 10% 60px 10%;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
-webkit-box-shadow: 0 0 10px rgb(0 0 0 / 30%);
|
||||
box-shadow: 0 0 10px rgb(0 0 0 / 30%);
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
color: var(--font-color);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.site-card-group .site-card:hover {
|
||||
border-color: var(--anzhiyu-main) !important;
|
||||
background-color: var(--anzhiyu-main) !important;
|
||||
-webkit-box-shadow: var(--anzhiyu-shadow-theme) !important;
|
||||
box-shadow: var(--anzhiyu-shadow-theme) !important;
|
||||
}
|
||||
.site-card-group > a:hover .wrapper img {
|
||||
-webkit-transform: scale(1.2);
|
||||
-moz-transform: scale(1.2);
|
||||
-o-transform: scale(1.2);
|
||||
-ms-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.site-card-group > a .cover {
|
||||
width: 100%;
|
||||
-webkit-transition: -webkit-transform 0.5s ease-out;
|
||||
-moz-transition: -moz-transform 0.5s ease-out;
|
||||
-o-transition: -o-transform 0.5s ease-out;
|
||||
-ms-transition: -ms-transform 0.5s ease-out;
|
||||
transition: transform 0.5s ease-out;
|
||||
}
|
||||
.site-card-group > a .wrapper img {
|
||||
height: 150px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.site-card-group .site-card .wrapper img {
|
||||
-webkit-transition: -webkit-transform 0.5s ease-out !important;
|
||||
-moz-transition: -moz-transform 0.5s ease-out !important;
|
||||
-o-transition: -o-transform 0.5s ease-out !important;
|
||||
-ms-transition: -ms-transform 0.5s ease-out !important;
|
||||
transition: transform 0.5s ease-out !important;
|
||||
}
|
||||
.site-card-group > a .wrapper .fadeIn {
|
||||
-webkit-animation: coverIn 0.8s ease-out forwards;
|
||||
-moz-animation: coverIn 0.8s ease-out forwards;
|
||||
-o-animation: coverIn 0.8s ease-out forwards;
|
||||
-ms-animation: coverIn 0.8s ease-out forwards;
|
||||
animation: coverIn 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
.site-card-group > a:hover .info {
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-o-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
@@ -0,0 +1,422 @@
|
||||
.limit-one-line
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
|
||||
.limit-more-line
|
||||
display: -webkit-box
|
||||
overflow: hidden
|
||||
-webkit-box-orient: vertical
|
||||
|
||||
.fontbold
|
||||
font-weight: bold
|
||||
|
||||
.anzhiyu-icon-spinner
|
||||
margin: 0
|
||||
width: 16px;
|
||||
line-height: 16px;
|
||||
height: 16px;
|
||||
if hexo-config('icons.fontawesome')
|
||||
.fontawesomeIcon
|
||||
display: inline-block
|
||||
font-weight: 600
|
||||
font-family: 'Font Awesome 6 Free'
|
||||
text-rendering: auto
|
||||
-webkit-font-smoothing: antialiased
|
||||
|
||||
.anzhiyufont
|
||||
font-family: "anzhiyufont";
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
.anzhiyufont::before
|
||||
font-family: "anzhiyufont" !important;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
// card hover
|
||||
.cardHover
|
||||
border-radius: 8px
|
||||
background: var(--card-bg)
|
||||
box-shadow: var(--card-box-shadow)
|
||||
transition: all .3s
|
||||
|
||||
.imgHover
|
||||
width: 100%
|
||||
height: 100%
|
||||
transition: filter 375ms ease-in .2s, transform .6s
|
||||
object-fit: cover
|
||||
|
||||
&:hover
|
||||
transform: scale(1.1)
|
||||
|
||||
.postImgHover
|
||||
&:hover
|
||||
img
|
||||
opacity: .8
|
||||
transform: scale(1.1)
|
||||
|
||||
img
|
||||
position: absolute
|
||||
width: 100%
|
||||
height: 100%
|
||||
opacity: .4
|
||||
transition: all .6s, filter 375ms ease-in .2s
|
||||
object-fit: cover
|
||||
border-radius: 0;
|
||||
|
||||
.list-beauty
|
||||
list-style: none
|
||||
|
||||
li
|
||||
position: relative
|
||||
padding: .12em .4em .12em 1.4em
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: var(--pseudo-hover)
|
||||
|
||||
&:before
|
||||
position: absolute
|
||||
top: .67em
|
||||
left: 0
|
||||
width: w = .43em
|
||||
height: h = w
|
||||
border: .5 * w solid $light-blue
|
||||
border-radius: w
|
||||
background: transparent
|
||||
content: ''
|
||||
cursor: pointer
|
||||
transition: all .3s ease-out
|
||||
|
||||
schemeDark()
|
||||
@media (prefers-color-scheme: dark)
|
||||
{block}
|
||||
schemeLight()
|
||||
@media (prefers-color-scheme: light)
|
||||
{block}
|
||||
maxWidth500()
|
||||
@media screen and (max-width: 500px)
|
||||
{block}
|
||||
|
||||
maxWidth600()
|
||||
@media screen and (max-width: 600px)
|
||||
{block}
|
||||
|
||||
maxWidth768()
|
||||
@media screen and (max-width: 768px)
|
||||
{block}
|
||||
|
||||
minWidth768()
|
||||
@media screen and (min-width: 768px)
|
||||
{block}
|
||||
|
||||
maxWidth1200()
|
||||
@media screen and (max-width: 1200px)
|
||||
{block}
|
||||
|
||||
maxWidth1400()
|
||||
@media screen and (max-width: 1400px)
|
||||
{block}
|
||||
|
||||
maxWidth900()
|
||||
@media screen and (max-width: 900px)
|
||||
{block}
|
||||
|
||||
minWidth901()
|
||||
@media screen and (min-width: 901px)
|
||||
{block}
|
||||
|
||||
minWidth900()
|
||||
@media screen and (min-width: 900px)
|
||||
{block}
|
||||
|
||||
minWidth1200()
|
||||
@media screen and (min-width: 1200px)
|
||||
{block}
|
||||
minWidth2000()
|
||||
@media screen and (min-width: 2000px)
|
||||
{block}
|
||||
maxHeight680()
|
||||
@media screen and (max-height: 680px)
|
||||
{block}
|
||||
maxHeight580()
|
||||
@media screen and (max-height: 580px)
|
||||
{block}
|
||||
|
||||
.scroll-down-effects
|
||||
animation: scroll-down-effect 1.5s infinite
|
||||
.anzhiyu-spin
|
||||
display: inline-block
|
||||
transform-origin: 50% 50%;
|
||||
animation-name: anzhiyu-spin;
|
||||
animation-duration: var(--anzhiyu-animation-duration,2s);
|
||||
animation-iteration-count: var(--anzhiyu-animation-iteration-count,infinite);
|
||||
animation-timing-function: var(--anzhiyu-animation-timing,linear);
|
||||
|
||||
|
||||
.anzhiyu-pulse-icon
|
||||
animation: anzhiyu-pulse-animation 1s infinite linear;
|
||||
|
||||
.anzhiyu-shake:hover {
|
||||
animation: shake 0.8s;
|
||||
}
|
||||
|
||||
if hexo-config('avatar.effect') == true
|
||||
.avatar-img
|
||||
animation: avatar_turn_around 2s linear infinite
|
||||
|
||||
.reward-main
|
||||
animation: donate_effcet .3s .1s ease both
|
||||
|
||||
@keyframes anzhiyu-shake {
|
||||
0% { transform: translate(1px, 1px) rotate(0deg); }
|
||||
10% { transform: translate(-1px, -2px) rotate(-1deg); }
|
||||
20% { transform: translate(-3px, 0px) rotate(1deg); }
|
||||
30% { transform: translate(3px, 2px) rotate(0deg); }
|
||||
40% { transform: translate(1px, -1px) rotate(1deg); }
|
||||
50% { transform: translate(-1px, 2px) rotate(-1deg); }
|
||||
60% { transform: translate(-3px, 1px) rotate(0deg); }
|
||||
70% { transform: translate(3px, 1px) rotate(-1deg); }
|
||||
80% { transform: translate(-1px, -1px) rotate(1deg); }
|
||||
90% { transform: translate(1px, 2px) rotate(0deg); }
|
||||
100% { transform: translate(1px, -2px) rotate(-1deg); }
|
||||
}
|
||||
|
||||
@keyframes anzhiyu-pulse-animation {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes anzhiyu-spin
|
||||
0%
|
||||
transform: rotate(0deg);
|
||||
100%
|
||||
transform: rotate(1turn);
|
||||
|
||||
@keyframes scroll-down-effect
|
||||
0%
|
||||
top: 0
|
||||
opacity: .4
|
||||
|
||||
50%
|
||||
top: -16px
|
||||
opacity: 1
|
||||
|
||||
100%
|
||||
top: 0
|
||||
opacity: .4
|
||||
|
||||
@keyframes header-effect
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(-50px)
|
||||
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes headerNoOpacity
|
||||
0%
|
||||
transform: translateY(-50px)
|
||||
|
||||
100%
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes bottom-top
|
||||
0%
|
||||
margin-top: 50px
|
||||
opacity: 0
|
||||
|
||||
100%
|
||||
margin-top: 0
|
||||
opacity: 1
|
||||
|
||||
@keyframes titleScale
|
||||
0%
|
||||
opacity: 0
|
||||
transform: scale(.7)
|
||||
|
||||
100%
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes search_close
|
||||
0%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
100%
|
||||
opacity: 0
|
||||
transform: translateY(20px)
|
||||
|
||||
@keyframes to_show
|
||||
0%
|
||||
opacity: 0
|
||||
|
||||
100%
|
||||
opacity: 1
|
||||
|
||||
@keyframes to_hide
|
||||
0%
|
||||
opacity: 1
|
||||
|
||||
100%
|
||||
opacity: 0
|
||||
|
||||
@keyframes ribbon_to_show
|
||||
0%
|
||||
opacity: 0
|
||||
|
||||
100%
|
||||
opacity: hexo-config('canvas_ribbon.alpha')
|
||||
|
||||
@keyframes avatar_turn_around
|
||||
from
|
||||
transform: rotate(0)
|
||||
|
||||
to
|
||||
transform: rotate(360deg)
|
||||
|
||||
@keyframes donate_effcet
|
||||
0%
|
||||
opacity: 0
|
||||
transform: translateY(-20px)
|
||||
|
||||
100%
|
||||
opacity: 1
|
||||
transform: translateY(0)
|
||||
|
||||
@keyframes sidebarItem
|
||||
0%
|
||||
transform: translateX(200px)
|
||||
|
||||
100%
|
||||
transform: translateX(0)
|
||||
|
||||
@keyframes sidebarItem
|
||||
0%
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
100%
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
|
||||
@keyframes barrageIn {
|
||||
0% {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes barrageOut {
|
||||
0% {
|
||||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes toLeftFull
|
||||
0%
|
||||
transform: translateX(200%)
|
||||
|
||||
100%
|
||||
transform: translateX(0)
|
||||
|
||||
@keyframes toRightFull
|
||||
0%
|
||||
transform: translateX(0)
|
||||
|
||||
100%
|
||||
transform: translateX(200%)
|
||||
|
||||
@keyframes breathe
|
||||
0%
|
||||
transform: scale(.97);
|
||||
50%
|
||||
transform: scale(1.1);
|
||||
100%
|
||||
transform: scale(.97);
|
||||
|
||||
@keyframes animate-in-and-out
|
||||
entry 0%
|
||||
opacity: 0.5;
|
||||
transform: scaleX(0.9);
|
||||
|
||||
entry 100%
|
||||
opacity: 1;
|
||||
transform: scaleX(1);
|
||||
|
||||
@keyframes header
|
||||
entry 0% {
|
||||
--anzhiyu-header-translateY: 160px
|
||||
--anzhiyu-header-info-scale: 0.7
|
||||
--anzhiyu-header-cover-scale: 1
|
||||
}
|
||||
|
||||
entry 100% {
|
||||
--anzhiyu-header-translateY: 0px
|
||||
--anzhiyu-header-info-scale: 1
|
||||
--anzhiyu-header-cover-scale: 2
|
||||
}
|
||||
exit 100% {
|
||||
--anzhiyu-header-translateY: 160px
|
||||
--anzhiyu-header-info-scale: 0.7
|
||||
--anzhiyu-header-cover-scale: 1
|
||||
}
|
||||
|
||||
exit 0% {
|
||||
--anzhiyu-header-translateY: 0px
|
||||
--anzhiyu-header-info-scale: 1
|
||||
--anzhiyu-header-cover-scale: 2
|
||||
}
|
||||
|
||||
@keyframes post-info-slide-in
|
||||
0%
|
||||
transform: scale(var(--anzhiyu-header-info-scale)) translateY(20px);
|
||||
opacity: 0;
|
||||
100%
|
||||
transform: scale(var(--anzhiyu-header-info-scale)) translateY(0);
|
||||
opacity: 1;
|
||||
|
||||
@property --anzhiyu-header-translateY
|
||||
syntax: "<length-percentage>";
|
||||
inherits: true;
|
||||
initial-value: 0px;
|
||||
|
||||
@property --anzhiyu-header-info-scale
|
||||
syntax: "<number>";
|
||||
inherits: true;
|
||||
initial-value: 1;
|
||||
|
||||
@property --anzhiyu-header-cover-scale
|
||||
syntax: "<number>";
|
||||
inherits: true;
|
||||
initial-value: 2;
|
||||
|
||||
@keyframes slide-in
|
||||
0%
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
100%
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
|
||||
@keyframes floating
|
||||
0%
|
||||
transform: translate(0,-4px);
|
||||
50%
|
||||
transform: translate(0,4px);
|
||||
100%
|
||||
transform: translate(0,-4px);
|
||||
@@ -0,0 +1,3 @@
|
||||
i.anzhiyu-icon-hashtag
|
||||
opacity: .6
|
||||
font-size: 13px
|
||||
@@ -0,0 +1,457 @@
|
||||
:root
|
||||
--animation-on: cubic-bezier(.6, .1, 0, 1);
|
||||
--animation-in: cubic-bezier(.6, .2, .25, 1);
|
||||
--animation-ot: opacity .5s var(--animation-in) backwards, transform 1s var(--animation-in) backwards;
|
||||
--animation-otf: opacity .5s var(--animation-in) backwards, transform 1s var(--animation-in) backwards, filter .7s var(--animation-in) backwards;
|
||||
--global-font-size: $font-size
|
||||
--global-bg: $body-bg
|
||||
--font-color: $font-black
|
||||
--hr-border: lighten($theme-hr-color, 50%)
|
||||
--hr-before-color: lighten($theme-hr-color, 30%)
|
||||
--search-bg: $search-bg
|
||||
--search-input-color: $search-input-color
|
||||
--search-result-title: $search-result-title
|
||||
--preloader-bg: $preloader-bg
|
||||
--preloader-color: $preloader-word-color
|
||||
--tab-border-color: $tab-border-color
|
||||
--tab-botton-bg: $tab-botton-bg
|
||||
--tab-botton-color: $tab-botton-color
|
||||
--tab-button-hover-bg: $tab-button-hover-bg
|
||||
--tab-button-active-bg: $tab-button-active-bg
|
||||
--card-bg: $card-bg
|
||||
--sidebar-bg: $sidebar-background
|
||||
--btn-hover-color: $button-hover-color
|
||||
--btn-color: $button-color
|
||||
--btn-bg: $button-bg
|
||||
--text-bg-hover: rgba($text-bg-hover, .7)
|
||||
--light-grey: $light-grey
|
||||
--dark-grey: $dark-grey
|
||||
--white: $white
|
||||
--text-highlight-color: $text-highlight-color
|
||||
--blockquote-color: $blockquote-color
|
||||
--blockquote-bg: $blockquote-background-color
|
||||
--reward-pop: $reward-pop-up-bg
|
||||
--toc-link-color: $toc-link-color
|
||||
--card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .05)
|
||||
--card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, .09)
|
||||
--pseudo-hover: $pseudo-hover
|
||||
--headline-presudo: var(--anzhiyu-fontcolor)
|
||||
--scrollbar-color: $scrollbar-color
|
||||
--anzhiyu-snackbar-time: 2000ms;
|
||||
--anzhiyu-deep-purple: #405589;
|
||||
--anzhiyu-meta-theme-color: #f7f9fe;
|
||||
--anzhiyu-bar-background: var(--anzhiyu-main);
|
||||
--anzhiyu-theme-op: #4259ef23;
|
||||
--anzhiyu-card-bg-none: rgba(255, 255, 255, 0);
|
||||
--anzhiyu-main-op-deep: var(--anzhiyu-theme-op-deep) !important;
|
||||
--anzhiyu-gray-op: #9999992b;
|
||||
--anzhiyu-theme-top: var(--anzhiyu-theme);
|
||||
--anzhiyu-white: #fff;
|
||||
--anzhiyu-white-op: rgba(255, 255, 255, 0.2);
|
||||
--anzhiyu-black: #000;
|
||||
--anzhiyu-black-op: rgba(0, 0, 0, 0.2);
|
||||
--anzhiyu-none: rgba(0, 0, 0, 0);
|
||||
--anzhiyu-gray: #999999;
|
||||
--anzhiyu-yellow: #ffc93e;
|
||||
--anzhiyu-orange: #e38100;
|
||||
--anzhiyu-blue-hover: #5390e6;
|
||||
--anzhiyu-radius-full: 50px;
|
||||
--anzhiyu-radius: 8px;
|
||||
--anzhiyu-border-radius: 8px;
|
||||
--anzhiyu-main: var(--anzhiyu-theme);
|
||||
--anzhiyu-main-op: var(--anzhiyu-theme-op);
|
||||
--anzhiyu-shadow-theme: 0 8px 12px -3px var(--anzhiyu-theme-op);
|
||||
--anzhiyu-shadow-main: 0 8px 12px -3px var(--anzhiyu-main-op);
|
||||
--anzhiyu-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234, 0.2);
|
||||
--anzhiyu-shadow-white: 0 8px 12px -3px rgba(255, 255, 255, 0.2);
|
||||
--anzhiyu-shadow-black: 0 0 12px 4px rgba(0, 0, 0, 0.05);
|
||||
--anzhiyu-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62, 0.12);
|
||||
--anzhiyu-shadow-red: 0 8px 12px -3px #ee7d7936;
|
||||
--anzhiyu-shadow-green: 0 8px 12px -3px #87ee7936;
|
||||
--anzhiyu-shadow-border: 0 8px 16px -4px #2c2d300c;
|
||||
--anzhiyu-shadow-blackdeep: 0 2px 16px -3px rgba(0, 0, 0, 0.15);
|
||||
--anzhiyu-logo-color: linear-gradient(215deg, #4584ff 0%, #cf0db9 100%);
|
||||
--anzhiyu-code-stress: var(--anzhiyu-main);
|
||||
--style-border: 1px solid var(--anzhiyu-card-border);
|
||||
--anzhiyu-blue-main: #425AEF;
|
||||
--style-border-hover: 1px solid var(--anzhiyu-main);
|
||||
--style-border-dashed: 1px dashed var(--anzhiyu-theme-op);
|
||||
--style-border-avatar: 5px solid var(--anzhiyu-white);
|
||||
--style-border-always: 1px solid var(--anzhiyu-card-border);
|
||||
--style-border-none: 1px solid transparent;
|
||||
--style-border-deep-ash: 1px solid #d0d7de;
|
||||
--style-border-hover-always: 1px solid var(--anzhiyu-main);
|
||||
--anzhiyu-main-none: #b8b8b800 !important;
|
||||
--anzhiyu-wihite-font: #fff
|
||||
|
||||
+schemeLight()
|
||||
--anzhiyu-meta-theme-post-color: #fff;
|
||||
--anzhiyu-meta-theme-color: #f7f9fe;
|
||||
--anzhiyu-theme-op-deep: #4259efdd;
|
||||
--global-bg: #f7f9fe;
|
||||
--anzhiyu-theme: $theme-color;
|
||||
--anzhiyu-theme-deep: #1856fb;
|
||||
--anzhiyu-theme-op: #4259ef23;
|
||||
--anzhiyu-blue: #5ca1ff;
|
||||
--anzhiyu-blue-tint: rgba(92, 161, 255, 0.1);
|
||||
--anzhiyu-red: #d8213c;
|
||||
--anzhiyu-pink: #ff7c7c;
|
||||
--anzhiyu-green: #57bd6a;
|
||||
--anzhiyu-fontcolor: #363636;
|
||||
--anzhiyu-background: #f7f9fe;
|
||||
--anzhiyu-reverse: #000;
|
||||
--anzhiyu-maskbg: rgba(255, 255, 255, 0.6);
|
||||
--anzhiyu-maskbgdeep: rgba(255, 255, 255, 0.85);
|
||||
--anzhiyu-scrollbar: rgba(60, 60, 67, 0.4);
|
||||
--anzhiyu-hovertext: var(--anzhiyu-theme);
|
||||
--anzhiyu-ahoverbg: #f7f7fa;
|
||||
--anzhiyu-lighttext: var(--anzhiyu-main);
|
||||
--anzhiyu-secondtext: rgba(60, 60, 67, 0.8);
|
||||
--anzhiyu-scrollbar: rgba(60, 60, 67, 0.4);
|
||||
--anzhiyu-card-btn-bg: #edf0f7;
|
||||
--anzhiyu-post-blockquote-bg: #fafcff;
|
||||
--anzhiyu-post-tabs-bg: #f2f5f8;
|
||||
--anzhiyu-secondbg: #f7f7f9;
|
||||
--anzhiyu-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);
|
||||
--anzhiyu-card-bg: #fff;
|
||||
--anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
|
||||
--anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
|
||||
--anzhiyu-card-border: #e3e8f7;
|
||||
--anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
|
||||
--anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
|
||||
--anzhiyu-wihite-font: #fff
|
||||
|
||||
[data-theme="light"]
|
||||
--anzhiyu-meta-theme-post-color: #fff;
|
||||
--anzhiyu-meta-theme-color: #f7f9fe;
|
||||
--anzhiyu-theme-op-deep: #4259efdd;
|
||||
--global-bg: #f7f9fe;
|
||||
--anzhiyu-theme: $theme-color;
|
||||
--anzhiyu-theme-deep: #1856fb;
|
||||
--anzhiyu-theme-op: #4259ef23;
|
||||
--anzhiyu-blue: #5ca1ff;
|
||||
--anzhiyu-blue-tint: rgba(92, 161, 255, 0.1);
|
||||
--anzhiyu-red: #d8213c;
|
||||
--anzhiyu-pink: #ff7c7c;
|
||||
--anzhiyu-green: #57bd6a;
|
||||
--anzhiyu-fontcolor: #363636;
|
||||
--anzhiyu-background: #f7f9fe;
|
||||
--anzhiyu-reverse: #000;
|
||||
--anzhiyu-maskbg: rgba(255, 255, 255, 0.6);
|
||||
--anzhiyu-maskbgdeep: rgba(255, 255, 255, 0.85);
|
||||
--anzhiyu-scrollbar: rgba(60, 60, 67, 0.4);
|
||||
--anzhiyu-hovertext: var(--anzhiyu-theme);
|
||||
--anzhiyu-ahoverbg: #f7f7fa;
|
||||
--anzhiyu-lighttext: var(--anzhiyu-main);
|
||||
--anzhiyu-secondtext: rgba(60, 60, 67, 0.8);
|
||||
--anzhiyu-scrollbar: rgba(60, 60, 67, 0.4);
|
||||
--anzhiyu-card-btn-bg: #edf0f7;
|
||||
--anzhiyu-post-blockquote-bg: #fafcff;
|
||||
--anzhiyu-post-tabs-bg: #f2f5f8;
|
||||
--anzhiyu-secondbg: #f7f7f9;
|
||||
--anzhiyu-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);
|
||||
--anzhiyu-card-bg: #fff;
|
||||
--anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
|
||||
--anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
|
||||
--anzhiyu-card-border: #e3e8f7;
|
||||
--anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
|
||||
--anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
|
||||
--anzhiyu-wihite-font: #fff
|
||||
|
||||
+schemeDark()
|
||||
--anzhiyu-meta-theme-post-color: #1d1e22;
|
||||
--anzhiyu-meta-theme-color: #000;
|
||||
--anzhiyu-blue: #5ca1ff;
|
||||
--anzhiyu-blue-tint: rgba(92, 161, 255, 0.1);
|
||||
--anzhiyu-theme-op-deep: #0084ffdd;
|
||||
--global-bg: #18171d;
|
||||
--anzhiyu-theme: $theme-dark-color;
|
||||
--anzhiyu-theme-deep: #0076e5;
|
||||
--anzhiyu-theme-op: #f2b94b23;
|
||||
--anzhiyu-blue: #0084ff;
|
||||
--anzhiyu-red: #ff3842;
|
||||
--anzhiyu-pink: #ff7c7c;
|
||||
--anzhiyu-green: #57bd6a;
|
||||
--anzhiyu-fontcolor: #f7f7fa;
|
||||
--anzhiyu-background: #18171d;
|
||||
--anzhiyu-reverse: #fff;
|
||||
--anzhiyu-maskbg: rgba(0, 0, 0, 0.6);
|
||||
--anzhiyu-maskbgdeep: rgba(0, 0, 0, 0.85);
|
||||
--anzhiyu-hovertext: #0a84ff;
|
||||
--anzhiyu-ahoverbg: #fff;
|
||||
--anzhiyu-scrollbar: rgba(200, 200, 223, 0.4);
|
||||
--anzhiyu-lighttext: #f2b94b;
|
||||
--anzhiyu-secondtext: #a1a2b8;
|
||||
--anzhiyu-scrollbar: rgba(200, 200, 223, 0.4);
|
||||
--anzhiyu-card-btn-bg: #30343f;
|
||||
--anzhiyu-post-blockquote-bg: #000;
|
||||
--anzhiyu-post-tabs-bg: #121212;
|
||||
--anzhiyu-secondbg: #21232a;
|
||||
--anzhiyu-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
|
||||
--anzhiyu-card-bg: #1d1e22;
|
||||
--anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
|
||||
--anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
|
||||
--anzhiyu-card-border: #42444a;
|
||||
--anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0.0);
|
||||
--anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0.0);
|
||||
--anzhiyu-wihite-font: #f6f6f6
|
||||
|
||||
[data-theme="dark"]
|
||||
--anzhiyu-meta-theme-post-color: #1d1e22;
|
||||
--anzhiyu-meta-theme-color: #000;
|
||||
--anzhiyu-blue: #5ca1ff;
|
||||
--anzhiyu-blue-tint: rgba(92, 161, 255, 0.1);
|
||||
--anzhiyu-theme-op-deep: #0084ffdd;
|
||||
--global-bg: #18171d;
|
||||
--anzhiyu-theme: $theme-dark-color;
|
||||
--anzhiyu-theme-deep: #0076e5;
|
||||
--anzhiyu-theme-op: #f2b94b23;
|
||||
--anzhiyu-blue: #0084ff;
|
||||
--anzhiyu-red: #ff3842;
|
||||
--anzhiyu-pink: #ff7c7c;
|
||||
--anzhiyu-green: #57bd6a;
|
||||
--anzhiyu-fontcolor: #f7f7fa;
|
||||
--anzhiyu-background: #18171d;
|
||||
--anzhiyu-reverse: #fff;
|
||||
--anzhiyu-maskbg: rgba(0, 0, 0, 0.6);
|
||||
--anzhiyu-maskbgdeep: rgba(0, 0, 0, 0.85);
|
||||
--anzhiyu-hovertext: #0a84ff;
|
||||
--anzhiyu-ahoverbg: #fff;
|
||||
--anzhiyu-scrollbar: rgba(200, 200, 223, 0.4);
|
||||
--anzhiyu-lighttext: #f2b94b;
|
||||
--anzhiyu-secondtext: #a1a2b8;
|
||||
--anzhiyu-scrollbar: rgba(200, 200, 223, 0.4);
|
||||
--anzhiyu-card-btn-bg: #30343f;
|
||||
--anzhiyu-post-blockquote-bg: #000;
|
||||
--anzhiyu-post-tabs-bg: #121212;
|
||||
--anzhiyu-secondbg: #21232a;
|
||||
--anzhiyu-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
|
||||
--anzhiyu-card-bg: #1d1e22;
|
||||
--anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
|
||||
--anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
|
||||
--anzhiyu-card-border: #42444a;
|
||||
--anzhiyu-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0.0);
|
||||
--anzhiyu-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0.0);
|
||||
--anzhiyu-wihite-font: #f6f6f6
|
||||
|
||||
body
|
||||
position: relative
|
||||
min-height: 100%
|
||||
background: var(--global-bg)
|
||||
color: var(--font-color)
|
||||
font-size: var(--global-font-size)
|
||||
font-family: $font-family
|
||||
line-height: $text-line-height
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
|
||||
|
||||
if !hexo-config('copy.enable')
|
||||
user-select: none
|
||||
|
||||
// scrollbar - chrome/safari
|
||||
*::-webkit-scrollbar
|
||||
width: 6px
|
||||
height: 6px
|
||||
|
||||
*::-webkit-scrollbar-thumb
|
||||
background: var(--scrollbar-color)
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
*::-webkit-scrollbar-track
|
||||
background-color: transparent
|
||||
|
||||
::-webkit-scrollbar-corner
|
||||
background-color: transparent;
|
||||
|
||||
|
||||
// scrollbar - firefox
|
||||
*
|
||||
scrollbar-width: thin
|
||||
scrollbar-color: var(--scrollbar-color) transparent
|
||||
|
||||
input::placeholder
|
||||
color: var(--font-color)
|
||||
|
||||
#web_bg
|
||||
position: fixed
|
||||
z-index: -999
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
transform: rotate(-1deg);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: var(--anzhiyu-background)
|
||||
background-attachment: local
|
||||
background-position: center
|
||||
background-size: cover
|
||||
background-repeat: no-repeat
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
position: relative
|
||||
margin: 20px 0 14px
|
||||
color: var(--text-highlight-color)
|
||||
font-weight: bold
|
||||
|
||||
code
|
||||
font-size: inherit !important
|
||||
|
||||
*
|
||||
box-sizing: border-box
|
||||
|
||||
hr
|
||||
position: relative
|
||||
margin: 40px auto
|
||||
border: 2px dashed var(--hr-border)
|
||||
|
||||
if hexo-config('hr_icon.enable')
|
||||
width: calc(100% - 4px)
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
left: calc(95% - 20px)
|
||||
|
||||
&:before
|
||||
position: absolute
|
||||
top: $hr-icon-top
|
||||
left: 5%
|
||||
z-index: 1
|
||||
color: var(--hr-before-color)
|
||||
content: $hr-icon
|
||||
font-size: 16px
|
||||
line-height: 1
|
||||
transition: all 1s ease-in-out
|
||||
if hexo-config('icons.fontawesome')
|
||||
@extend .fontawesomeIcon
|
||||
else
|
||||
@extend .anzhiyufont
|
||||
|
||||
html
|
||||
overflow-y: overlay;
|
||||
.table-wrap
|
||||
overflow-x: scroll
|
||||
margin: 1rem 0;
|
||||
border-radius: 8px;
|
||||
|
||||
table
|
||||
display: table
|
||||
width: 100%
|
||||
border-spacing: 0
|
||||
border-collapse: collapse
|
||||
empty-cells: show
|
||||
if hexo-config('table_interlaced_discoloration')
|
||||
tr:nth-child(even)
|
||||
background-color: var(--anzhiyu-secondbg);
|
||||
thead
|
||||
background: var(--anzhiyu-secondbg);
|
||||
|
||||
th,
|
||||
td
|
||||
padding: 0.3rem 0.6rem;
|
||||
vertical-align: middle
|
||||
border: var(--style-border-always);
|
||||
|
||||
*::selection
|
||||
background: $theme-text-selection-color
|
||||
color: #F7F7F7
|
||||
|
||||
button
|
||||
padding: 0
|
||||
outline: 0
|
||||
border: none
|
||||
background: none
|
||||
cursor: pointer
|
||||
touch-action: manipulation
|
||||
|
||||
a
|
||||
color: $a-link-color
|
||||
text-decoration: none
|
||||
word-wrap: break-word
|
||||
transition: all 0.2s ease 0s;
|
||||
overflow-wrap: break-word
|
||||
|
||||
&:hover
|
||||
color: $light-blue
|
||||
|
||||
// font
|
||||
if $site-name-font
|
||||
#site-title,
|
||||
#site-subtitle,
|
||||
#site-name,
|
||||
#aside-content .author-info__name,
|
||||
#aside-content .author-info__description
|
||||
font-family: $site-name-font
|
||||
|
||||
.is-center
|
||||
text-align: center
|
||||
|
||||
.copy-true
|
||||
user-select: all
|
||||
|
||||
.pull-left
|
||||
float: left
|
||||
|
||||
.pull-right
|
||||
float: right
|
||||
|
||||
img
|
||||
&[src=''],
|
||||
&:not([src])
|
||||
opacity: 0
|
||||
|
||||
// lazyload blur
|
||||
if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder')
|
||||
img
|
||||
&[data-lazy-src]:not(.loaded)
|
||||
filter: blur(8px) brightness(1)
|
||||
|
||||
&[data-lazy-src].error
|
||||
filter: none
|
||||
opacity 1 !important
|
||||
|
||||
// lazyload progressive
|
||||
if hexo-config('lazyload.enable') && hexo-config('lazyload.progressive') && !hexo-config('lazyload.placeholder')
|
||||
img
|
||||
&[data-lazy-src]:not(.loaded)
|
||||
opacity: 0;
|
||||
img[src=''], img:not([src])
|
||||
opacity 0
|
||||
.img-alt
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
margin-top: 8px;
|
||||
color: var(--anzhiyu-secondtext);
|
||||
|
||||
&:hover
|
||||
text-decoration: none !important
|
||||
|
||||
blockquote
|
||||
margin: 0 0 20px
|
||||
padding: 12px 15px
|
||||
border-left: 3px solid $blockquote-padding-color
|
||||
background-color: var(--blockquote-bg)
|
||||
color: var(--blockquote-color)
|
||||
|
||||
footer
|
||||
cite
|
||||
&:before
|
||||
padding: 0 5px
|
||||
content: '—'
|
||||
|
||||
& > :last-child
|
||||
margin-bottom: 0 !important
|
||||
.time_hidden
|
||||
display: none!important
|
||||
#single_top
|
||||
padding: 1.875rem 1.5rem 0
|
||||
max-width: 1400px
|
||||
width 100%
|
||||
margin 0 auto
|
||||
& + #content-inner
|
||||
+maxWidth768()
|
||||
padding:1.875rem 0rem 0
|
||||
@@ -0,0 +1,50 @@
|
||||
if hexo-config('preloader')
|
||||
.loading-bg
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
background: var(--anzhiyu-card-bg);
|
||||
z-index: 1001;
|
||||
opacity: 1;
|
||||
overflow hidden
|
||||
transition: 0.2s;
|
||||
animation: showLoading 0.3s 0s backwards;
|
||||
&::-webkit-scrollbar
|
||||
display: none
|
||||
|
||||
#loading-box
|
||||
user-select none
|
||||
.loading-img
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
margin: auto;
|
||||
border: 4px solid #f0f0f2;
|
||||
animation-duration: 0.2s;
|
||||
animation-name: loadingAction;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
.loading-image-dot
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: #6bdf8f;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 6px solid #fff;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(18px, 24px);
|
||||
&.loaded
|
||||
.loading-bg
|
||||
opacity: 0;
|
||||
z-index: -1000;
|
||||
|
||||
@keyframes loadingAction
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: .4;
|
||||
}
|
||||
@@ -0,0 +1,248 @@
|
||||
$highlight_theme = hexo-config('highlight_theme')
|
||||
wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_word_wrap')
|
||||
wordWrapPrismjs = $prismjs_enable && !$prismjs_line_number && hexo-config('code_word_wrap')
|
||||
|
||||
@require 'theme'
|
||||
|
||||
:root
|
||||
--hl-color: $highlight-foreground
|
||||
--hl-bg: $highlight-background
|
||||
--hltools-bg: $highlight-tools.bg-color
|
||||
--hltools-color: $highlight-tools.color
|
||||
--hlnumber-bg: $highlight-gutter.bg-color
|
||||
--hlnumber-color: $highlight-gutter.color
|
||||
--hlscrollbar-bg: $highlight-scrollbar
|
||||
--hlexpand-bg: linear-gradient(180deg, rgba($highlight-background, .6), rgba($highlight-background, .9))
|
||||
[data-theme='dark']
|
||||
--hl-color: alpha(#FFFFFF, .7)
|
||||
--hl-bg: lighten(#121212, 2)
|
||||
--hltools-bg: lighten(#121212, 3)
|
||||
--hltools-color: #90a4ae
|
||||
--hlnumber-bg: lighten(#121212, 2)
|
||||
--hlnumber-color: alpha(#FFFFFF, .4)
|
||||
--hlscrollbar-bg: lighten(#121212, 5)
|
||||
--hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
|
||||
|
||||
if $highlight_enable
|
||||
@require 'highlight/index'
|
||||
|
||||
if $prismjs_enable
|
||||
@require 'prismjs/index'
|
||||
|
||||
$code-block
|
||||
overflow: auto
|
||||
margin: 0 0 20px
|
||||
padding: 0
|
||||
if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
|
||||
background: var(--anzhiyu-card-bg)
|
||||
border: var(--style-border-always);
|
||||
else
|
||||
background: var(--hl-bg)
|
||||
color: var(--hl-color)
|
||||
line-height: $line-height-code-block
|
||||
|
||||
if (wordWrap || wordWrapPrismjs)
|
||||
counter-reset: line
|
||||
white-space: pre-wrap
|
||||
|
||||
#article-container
|
||||
pre,
|
||||
code
|
||||
font-size: $code-font-size
|
||||
font-family: $code-font-family !important
|
||||
|
||||
code
|
||||
padding: 2px 4px
|
||||
background: $code-background
|
||||
color: $code-foreground
|
||||
|
||||
pre
|
||||
@extend $code-block
|
||||
padding: 10px 20px
|
||||
|
||||
code
|
||||
padding: 0
|
||||
background: none
|
||||
color: var(--hl-color)
|
||||
text-shadow: none
|
||||
|
||||
figure.highlight
|
||||
@extend $code-block
|
||||
position: relative
|
||||
|
||||
pre
|
||||
margin: 0
|
||||
padding: 8px 0
|
||||
border: none
|
||||
|
||||
figcaption,
|
||||
.caption
|
||||
padding: 6px 0 2px 14px
|
||||
font-size: $code-font-size
|
||||
line-height: 1em
|
||||
|
||||
a
|
||||
float: right
|
||||
padding-right: 10px
|
||||
color: var(--hl-color)
|
||||
|
||||
&:hover
|
||||
border-bottom-color: var(--hl-color)
|
||||
|
||||
.highlight-tools
|
||||
position: relative
|
||||
display: flex
|
||||
align-items: center
|
||||
overflow: hidden
|
||||
min-height: 24px
|
||||
height: 2.15em
|
||||
background: var(--hltools-bg)
|
||||
color: var(--hltools-color)
|
||||
font-size: $code-font-size
|
||||
if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
|
||||
border-bottom: var(--style-border-always);
|
||||
|
||||
&.closed
|
||||
if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
|
||||
border-bottom: 1px solid transparent;
|
||||
height: calc(2.15em - 1px);
|
||||
& ~ *
|
||||
display: none
|
||||
|
||||
.expand
|
||||
transition: all .3s
|
||||
transform: rotate(-90deg) !important
|
||||
|
||||
.expand
|
||||
position: absolute
|
||||
padding: .57em .7em
|
||||
cursor: pointer
|
||||
transition: transform .3s
|
||||
|
||||
& + .code-lang
|
||||
left: 1.7em
|
||||
|
||||
.code-lang
|
||||
position: absolute
|
||||
left: 14px
|
||||
text-transform: uppercase
|
||||
font-weight: bold
|
||||
font-size: 1.15em
|
||||
user-select: none
|
||||
|
||||
.copy-notice
|
||||
position: absolute
|
||||
right: 2.4em
|
||||
opacity: 0
|
||||
transition: opacity .4s
|
||||
|
||||
.copy-button
|
||||
position: absolute
|
||||
right: 14px
|
||||
cursor: pointer
|
||||
transition: color .2s
|
||||
|
||||
&:hover
|
||||
color: var(--anzhiyu-main)
|
||||
|
||||
.gutter
|
||||
user-select: none
|
||||
|
||||
.gist table
|
||||
width: auto
|
||||
|
||||
td
|
||||
border: none
|
||||
|
||||
if $highlight_theme == 'mac' || ($highlight_theme == 'mac light')
|
||||
figure.highlight
|
||||
margin: 0 0 24px
|
||||
border-radius: 7px
|
||||
box-shadow: 0 5px 10px 0 $highlight-mac-border
|
||||
-webkit-transform: translateZ(0)
|
||||
|
||||
.highlight-tools
|
||||
&:after
|
||||
position: absolute
|
||||
left: 14px
|
||||
width: 12px
|
||||
height: 12px
|
||||
border-radius: 50%
|
||||
background: #fc625d
|
||||
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
|
||||
content: ' '
|
||||
|
||||
.expand
|
||||
right: 0
|
||||
|
||||
&.closed
|
||||
transition: all .3s
|
||||
transform: rotate(90deg) !important
|
||||
|
||||
& ~ .copy-notice
|
||||
right: 3.45em
|
||||
|
||||
& ~ .copy-button
|
||||
right: 2.1em
|
||||
|
||||
.code-lang
|
||||
left: 75px
|
||||
|
||||
if hexo-config('highlight_height_limit')
|
||||
.code-expand-btn
|
||||
position: absolute
|
||||
bottom: 0px
|
||||
z-index: 10
|
||||
width: 100%
|
||||
transition: all 0.3s
|
||||
font-size: 20px;
|
||||
if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
|
||||
background: var(--anzhiyu-secondbg)
|
||||
else
|
||||
background: var(--hlexpand-bg)
|
||||
text-align: center
|
||||
font-size: $code-font-size
|
||||
cursor: pointer
|
||||
transform: translateZ(0);
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
font-size: 16px
|
||||
if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
|
||||
&:hover
|
||||
background: var(--anzhiyu-main);
|
||||
i
|
||||
color: var(--anzhiyu-white);
|
||||
|
||||
i
|
||||
if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
|
||||
color: var(--anzhiyu-fontcolor)
|
||||
else
|
||||
color: var(--hlnumber-color)
|
||||
animation: 1.2s ease 0s infinite normal none running code-expand-key
|
||||
|
||||
&.expand-done
|
||||
transform: rotate(180deg)
|
||||
transition: all 0s, background 0.3s;
|
||||
|
||||
& + table,
|
||||
& + pre
|
||||
margin-bottom: 1.8em
|
||||
|
||||
&:not(.expand-done)
|
||||
& ~ table,
|
||||
& ~ pre
|
||||
overflow: hidden
|
||||
height: unit(hexo-config('highlight_height_limit'), px)
|
||||
|
||||
@keyframes code-expand-key
|
||||
0%
|
||||
opacity: .6
|
||||
|
||||
50%
|
||||
opacity: .1
|
||||
|
||||
100%
|
||||
opacity: .6
|
||||
@@ -0,0 +1,79 @@
|
||||
figure.highlight
|
||||
table
|
||||
scrollbar-color: var(--hlscrollbar-bg) transparent
|
||||
|
||||
&::-webkit-scrollbar-thumb
|
||||
background: var(--hlscrollbar-bg)
|
||||
|
||||
pre .deletion
|
||||
color: $highlight-deletion
|
||||
|
||||
pre .addition
|
||||
color: $highlight-addition
|
||||
|
||||
pre .meta
|
||||
color: $highlight-purple
|
||||
|
||||
pre
|
||||
.comment
|
||||
color: $highlight-comment
|
||||
|
||||
.variable,
|
||||
.attribute,
|
||||
.regexp,
|
||||
.ruby .constant,
|
||||
.xml .tag .title,
|
||||
.xml .pi,
|
||||
.xml .doctype,
|
||||
.html .doctype,
|
||||
.css .id,
|
||||
.tag .name,
|
||||
.css .class,
|
||||
.css .pseudo
|
||||
color: $highlight-red
|
||||
|
||||
.tag
|
||||
color: $highlight-aqua
|
||||
|
||||
.number,
|
||||
.preprocessor,
|
||||
.literal,
|
||||
.params,
|
||||
.constant,
|
||||
.command
|
||||
color: $highlight-orange
|
||||
|
||||
.built_in
|
||||
color: $highlight-yellow
|
||||
|
||||
.ruby .class .title,
|
||||
.css .rules .attribute,
|
||||
.string,
|
||||
.value,
|
||||
.inheritance,
|
||||
.header,
|
||||
.ruby .symbol,
|
||||
.xml .cdata,
|
||||
.special,
|
||||
.number,
|
||||
.formula
|
||||
color: $highlight-green
|
||||
|
||||
.keyword,
|
||||
.title,
|
||||
.css .hexcolor
|
||||
color: $highlight-aqua
|
||||
|
||||
.function,
|
||||
.python .decorator,
|
||||
.python .title,
|
||||
.ruby .function .title,
|
||||
.ruby .title .keyword,
|
||||
.perl .sub,
|
||||
.javascript .title,
|
||||
.coffeescript .title
|
||||
color: $highlight-blue
|
||||
|
||||
.tag .attr,
|
||||
.javascript .function
|
||||
color: $highlight-purple
|
||||
@@ -0,0 +1,46 @@
|
||||
if $highlight_theme != false
|
||||
@require 'diff'
|
||||
|
||||
#article-container
|
||||
figure.highlight
|
||||
.line
|
||||
if wordWrap
|
||||
&:before
|
||||
display: inline-block
|
||||
padding: 0 6px 0 0
|
||||
min-width: 30px
|
||||
color: var(--hlnumber-color)
|
||||
content: counter(line)
|
||||
counter-increment: line
|
||||
text-align: left
|
||||
|
||||
&.marked
|
||||
background-color: $highlight-selection
|
||||
|
||||
table
|
||||
display: block
|
||||
overflow: auto
|
||||
border: none
|
||||
|
||||
td
|
||||
padding: 0
|
||||
border: none
|
||||
|
||||
.gutter pre
|
||||
padding-right: .625rem
|
||||
padding-left: 1.25rem
|
||||
if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
|
||||
background: var(--anzhiyu-secondbg)
|
||||
background-color: var(--anzhiyu-secondbg)
|
||||
border-right: var(--style-border-always);
|
||||
padding-right: .5rem
|
||||
padding-left: .5rem
|
||||
else
|
||||
background: var(--hlexpand-bg)
|
||||
color: var(--hlnumber-color)
|
||||
text-align: right
|
||||
|
||||
.code pre
|
||||
padding-right: 10px
|
||||
padding-left: 10px
|
||||
width: 100%
|
||||
@@ -0,0 +1,302 @@
|
||||
if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
|
||||
// prism-base16-ateliersulphurpool.light
|
||||
pre[class*='language-']
|
||||
.token.function
|
||||
color: #ffb62c
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata
|
||||
color: rgba(149, 165, 166, .8)
|
||||
|
||||
.token.punctuation
|
||||
color: #5e6687
|
||||
|
||||
.token.namespace
|
||||
opacity: .7
|
||||
|
||||
.token.operator,
|
||||
.token.boolean,
|
||||
.token.number
|
||||
color: #c76b29
|
||||
|
||||
.token.property
|
||||
color: #c08b30
|
||||
|
||||
.token.tag
|
||||
color: #3d8fd1
|
||||
|
||||
.token.string
|
||||
color: #22a2c9
|
||||
|
||||
.token.selector
|
||||
color: #6679cc
|
||||
|
||||
.token.attr-name
|
||||
color: #c76b29
|
||||
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string
|
||||
color: #22a2c9
|
||||
|
||||
.token.attr-value,
|
||||
.token.keyword,
|
||||
.token.control,
|
||||
.token.directive,
|
||||
.token.unit
|
||||
color: #ac9739
|
||||
|
||||
.token.statement,
|
||||
.token.regex,
|
||||
.token.atrule
|
||||
color: #22a2c9
|
||||
|
||||
.token.placeholder,
|
||||
.token.variable
|
||||
color: #3d8fd1
|
||||
|
||||
.token.deleted
|
||||
text-decoration: line-through
|
||||
|
||||
.token.inserted
|
||||
border-bottom: 1px dotted #202746
|
||||
text-decoration: none
|
||||
|
||||
.token.italic
|
||||
font-style: italic
|
||||
|
||||
.token.important,
|
||||
.token.bold
|
||||
font-weight: bold
|
||||
|
||||
.token.important
|
||||
color: #c94922
|
||||
|
||||
.token.entity
|
||||
cursor: help
|
||||
|
||||
pre > code.highlight
|
||||
outline: .4em solid #c94922
|
||||
outline-offset: .4em
|
||||
|
||||
if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
|
||||
// prism-atom-dark
|
||||
pre[class*='language-']
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata
|
||||
color: #7C7C7C
|
||||
|
||||
.token.punctuation
|
||||
color: #c5c8c6
|
||||
|
||||
.namespace
|
||||
opacity: .7
|
||||
|
||||
.token.property,
|
||||
.token.keyword,
|
||||
.token.tag
|
||||
color: #96CBFE
|
||||
|
||||
.token.class-name
|
||||
color: #FFFFB6
|
||||
|
||||
.token.boolean,
|
||||
.token.constant
|
||||
color: #99CC99
|
||||
|
||||
.token.symbol,
|
||||
.token.deleted
|
||||
color: #f92672
|
||||
|
||||
.token.number
|
||||
color: #FF73FD
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted
|
||||
color: #A8FF60
|
||||
|
||||
.token.variable
|
||||
color: #C6C5FE
|
||||
|
||||
.token.operator
|
||||
color: #EDEDED
|
||||
|
||||
.token.entity
|
||||
color: #FFFFB6
|
||||
cursor: help
|
||||
|
||||
.token.url
|
||||
color: #96CBFE
|
||||
|
||||
.language-css .token.string,
|
||||
.style .token.string
|
||||
color: #87C38A
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value
|
||||
color: #F9EE98
|
||||
|
||||
.token.function
|
||||
color: #DAD085
|
||||
|
||||
.token.regex
|
||||
color: #E9C062
|
||||
|
||||
.token.important
|
||||
color: #fd971f
|
||||
|
||||
.token.important,
|
||||
.token.bold
|
||||
font-weight: bold
|
||||
|
||||
.token.italic
|
||||
font-style: italic
|
||||
|
||||
if $highlight_theme == 'pale night'
|
||||
// prism-dracula
|
||||
pre[class*='language-']
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata
|
||||
color: #6272a4
|
||||
|
||||
.token.punctuation
|
||||
color: #f8f8f2
|
||||
|
||||
.namespace
|
||||
opacity: .7
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted
|
||||
color: #ff79c6
|
||||
|
||||
.token.boolean,
|
||||
.token.number
|
||||
color: #bd93f9
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted
|
||||
color: #50fa7b
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable
|
||||
color: #f8f8f2
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
.token.class-name
|
||||
color: #f1fa8c
|
||||
|
||||
.token.keyword
|
||||
color: #8be9fd
|
||||
|
||||
.token.regex,
|
||||
.token.important
|
||||
color: #ffb86c
|
||||
|
||||
.token.important,
|
||||
.token.bold
|
||||
font-weight: bold
|
||||
|
||||
.token.italic
|
||||
font-style: italic
|
||||
|
||||
.token.entity
|
||||
cursor: help
|
||||
|
||||
if $highlight_theme == 'ocean'
|
||||
// prism-material-oceanic
|
||||
pre[class*='language-']
|
||||
&.language-css > code,
|
||||
&.language-sass > code,
|
||||
&.language-scss > code
|
||||
color: #fd9170 !important
|
||||
|
||||
.namespace
|
||||
opacity: .7
|
||||
|
||||
.token.atrule,
|
||||
.token.symbol,
|
||||
.token.constant,
|
||||
.token.boolean,
|
||||
.token.function
|
||||
color: #c792ea
|
||||
|
||||
.token.attr-name,
|
||||
.token.builtin,
|
||||
.token.class
|
||||
color: #ffcb6b
|
||||
|
||||
.token.attr-value,
|
||||
.token.attribute,
|
||||
.token.pseudo-class,
|
||||
.token.pseudo-element,
|
||||
.token.string
|
||||
color: #c3e88d
|
||||
|
||||
.token.cdata,
|
||||
.token.property,
|
||||
.token.char,
|
||||
.token.inserted
|
||||
color: #80cbc4
|
||||
|
||||
.token.class-name,
|
||||
.token.color,
|
||||
.token.hexcode,
|
||||
.token.regex
|
||||
color: #f2ff00
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype
|
||||
color: #546e7a
|
||||
|
||||
.token.deleted,
|
||||
.token.variable,
|
||||
.token.entity,
|
||||
.token.selector,
|
||||
.token.tag,
|
||||
.token.unit
|
||||
color: #f07178
|
||||
|
||||
.token.id
|
||||
color: #c792ea
|
||||
font-weight: bold
|
||||
|
||||
.token.important
|
||||
color: #c792ea
|
||||
font-weight: bold
|
||||
|
||||
.token.keyword
|
||||
color: #c792ea
|
||||
font-style: italic
|
||||
|
||||
.token.number,
|
||||
.token.url
|
||||
color: #fd9170
|
||||
|
||||
.token.operator,
|
||||
.token.punctuation
|
||||
color: #89ddff
|
||||
@@ -0,0 +1,24 @@
|
||||
if $prismjs_line_number
|
||||
@require 'line-number'
|
||||
|
||||
if $highlight_theme != false
|
||||
@require 'diff'
|
||||
|
||||
#article-container
|
||||
pre[class*='language-']
|
||||
scrollbar-color: var(--hlscrollbar-bg) transparent
|
||||
|
||||
&::-webkit-scrollbar-thumb
|
||||
background: var(--hlscrollbar-bg)
|
||||
|
||||
&:not(.line-numbers)
|
||||
padding: 10px 20px
|
||||
|
||||
.caption
|
||||
margin-left: -3.8em
|
||||
padding: 4px 16px !important
|
||||
|
||||
a
|
||||
padding: 0 !important
|
||||
*:first-child
|
||||
margin-left: -1px;
|
||||
@@ -0,0 +1,41 @@
|
||||
#article-container
|
||||
pre[class*='language-']
|
||||
&.line-numbers
|
||||
position: relative
|
||||
padding-left: 3.8em
|
||||
counter-reset: linenumber
|
||||
line-height: $line-height-code-block
|
||||
|
||||
> code
|
||||
position: relative
|
||||
line-height: $line-height-code-block
|
||||
|
||||
if hexo-config('code_word_wrap')
|
||||
white-space: pre-wrap
|
||||
else
|
||||
white-space: inherit
|
||||
word-wrap: normal
|
||||
word-break: normal
|
||||
overflow-wrap: normal
|
||||
|
||||
.line-numbers-rows
|
||||
position: absolute
|
||||
top: 0
|
||||
left: -3.8em
|
||||
width: 3em
|
||||
letter-spacing: -1px
|
||||
font-size: 100%
|
||||
pointer-events: none
|
||||
user-select: none
|
||||
|
||||
& > span
|
||||
display: block
|
||||
counter-increment: linenumber
|
||||
pointer-events: none
|
||||
|
||||
&:before
|
||||
display: block
|
||||
padding-right: .8em
|
||||
color: var(--hlnumber-color)
|
||||
content: counter(linenumber)
|
||||
text-align: right
|
||||
@@ -0,0 +1,119 @@
|
||||
if $highlight_theme == 'darker' || ($highlight_theme == 'mac')
|
||||
$highlight-background = #212121
|
||||
$highlight-selection = #61616150
|
||||
$highlight-foreground = #EEFFFF
|
||||
$highlight-mac-border = rgba(0, 0, 0, .4)
|
||||
$highlight-gutter = {
|
||||
color: alpha($highlight-foreground, .5),
|
||||
bg-color: $highlight-background
|
||||
}
|
||||
$highlight-tools = {
|
||||
color: alpha($highlight-foreground, .8),
|
||||
bg-color: darken($highlight-background, 2)
|
||||
}
|
||||
$highlight-scrollbar = lighten($highlight-background, 8)
|
||||
|
||||
if $highlight_enable
|
||||
$highlight-comment = #969896
|
||||
$highlight-red = #FF5370
|
||||
$highlight-orange = #F78C6C
|
||||
$highlight-yellow = #FFCB6B
|
||||
$highlight-green = #C3E88D
|
||||
$highlight-aqua = #89DDFF
|
||||
$highlight-blue = #82AAFF
|
||||
$highlight-purple = #C792EA
|
||||
$highlight-deletion = #BF42BF
|
||||
$highlight-addition = #105EDE
|
||||
|
||||
if $highlight_theme == 'pale night'
|
||||
$highlight-background = #292D3E
|
||||
$highlight-selection = #717CB450
|
||||
$highlight-foreground = #A6ACCD
|
||||
$highlight-gutter = {
|
||||
color: alpha($highlight-foreground, .5),
|
||||
bg-color: $highlight-background
|
||||
}
|
||||
$highlight-tools = {
|
||||
color: $highlight-foreground,
|
||||
bg-color: darken($highlight-background, 2)
|
||||
}
|
||||
$highlight-scrollbar = lighten($highlight-background, 8)
|
||||
|
||||
if $highlight_enable
|
||||
$highlight-comment = #676E95
|
||||
$highlight-red = #FF5370
|
||||
$highlight-orange = #F78C6C
|
||||
$highlight-yellow = #FFCB6B
|
||||
$highlight-green = #C3E88D
|
||||
$highlight-aqua = #89DDFF
|
||||
$highlight-blue = #82AAFF
|
||||
$highlight-purple = #C792EA
|
||||
$highlight-deletion = #BF42BF
|
||||
$highlight-addition = #105EDE
|
||||
|
||||
if $highlight_theme == 'ocean'
|
||||
$highlight-background = #0F111A
|
||||
$highlight-selection = #717CB450
|
||||
$highlight-foreground = #8F93A2
|
||||
$highlight-gutter = {
|
||||
color: alpha($highlight-foreground, .5),
|
||||
bg-color: $highlight-background
|
||||
}
|
||||
$highlight-tools = {
|
||||
color: $highlight-foreground,
|
||||
bg-color: darken($highlight-background, 2)
|
||||
}
|
||||
$highlight-scrollbar = lighten($highlight-background, 8)
|
||||
|
||||
if $highlight_enable
|
||||
$highlight-comment = rgba(101, 115, 126, .8)
|
||||
$highlight-red = #FF5370
|
||||
$highlight-orange = #F78C6C
|
||||
$highlight-yellow = #FFCB6B
|
||||
$highlight-green = #C3E88D
|
||||
$highlight-aqua = #89DDFF
|
||||
$highlight-blue = #82AAFF
|
||||
$highlight-purple = #C792EA
|
||||
$highlight-deletion = #BF42BF
|
||||
$highlight-addition = #105EDE
|
||||
|
||||
if $highlight_theme == 'light' || ($highlight_theme == 'mac light')
|
||||
$highlight-background = #F6F8FA
|
||||
$highlight-selection = #80CBC440
|
||||
$highlight-foreground = #90A4AE
|
||||
$highlight-mac-border = rgba(144, 164, 174, .4)
|
||||
$highlight-tools = {
|
||||
color: var(--anzhiyu-fontcolor)
|
||||
bg-color: var(--anzhiyu-secondbg)
|
||||
}
|
||||
$highlight-gutter = {
|
||||
color: alpha($highlight-foreground, .5),
|
||||
bg-color: $highlight-background
|
||||
}
|
||||
$highlight-scrollbar = darken($highlight-background, 8)
|
||||
|
||||
if $highlight_enable
|
||||
$highlight-comment = #969896
|
||||
$highlight-red = #E53935
|
||||
$highlight-orange = #F76D47
|
||||
$highlight-yellow = #FFB62C
|
||||
$highlight-green = #91B859
|
||||
$highlight-aqua = #39ADB5
|
||||
$highlight-blue = #6182B8
|
||||
$highlight-purple = #7C4DFF
|
||||
$highlight-deletion = #BF42BF
|
||||
$highlight-addition = #105EDE
|
||||
|
||||
if $highlight_theme == false
|
||||
$highlight-background = #F6F8FA
|
||||
$highlight-foreground = #90A4AE
|
||||
$highlight-selection = #80CBC440
|
||||
$highlight-gutter = {
|
||||
color: alpha($highlight-foreground, .5),
|
||||
bg-color: $highlight-background
|
||||
}
|
||||
$highlight-tools = {
|
||||
color: $highlight-foreground,
|
||||
bg-color: darken($highlight-background, 5)
|
||||
}
|
||||
$highlight-scrollbar = darken($highlight-background, 8)
|
||||
@@ -0,0 +1,156 @@
|
||||
#error-wrap
|
||||
display: flex
|
||||
justify-content: center
|
||||
width: 100%
|
||||
margin-top: 1rem
|
||||
position: relative
|
||||
+maxWidth768()
|
||||
margin-top: 0
|
||||
|
||||
.error-content
|
||||
box-shadow: none !important
|
||||
border-radius: 12px
|
||||
background: var(--anzhiyu-card-bg) !important
|
||||
display: flex
|
||||
flex-direction: row
|
||||
justify-content: center
|
||||
align-items: center
|
||||
margin: 0px 1rem
|
||||
height: 22rem
|
||||
max-width: 800px
|
||||
border-radius: 5px
|
||||
background: var(--anzhiyu-card-bg)
|
||||
box-shadow: var(--card-box-shadow)
|
||||
transition: all 0.3s ease 0s
|
||||
border: var(--style-border-always)
|
||||
position: relative
|
||||
width: 100%
|
||||
+maxWidth768()
|
||||
-webkit-box-orient: vertical;
|
||||
flex-direction: column;
|
||||
margin: 0px;
|
||||
height: 25rem;
|
||||
width: 100%;
|
||||
|
||||
.error-img
|
||||
flex: 1 1 0%
|
||||
height: 90%
|
||||
width: 600px
|
||||
border-top-left-radius: 8px
|
||||
border-bottom-left-radius: 8px
|
||||
background-color: rgb(48, 122, 246)
|
||||
background-position: center center
|
||||
background-size: cover
|
||||
height: 100%;
|
||||
+maxWidth768()
|
||||
-webkit-box-flex: 1;
|
||||
flex: 1 1 0%;
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
|
||||
|
||||
.error-info
|
||||
flex: 1 1 0%
|
||||
padding: 0.5rem
|
||||
text-align: center
|
||||
font-size: 14px
|
||||
font-family: $font-family
|
||||
+maxWidth768()
|
||||
-webkit-box-flex: 1.1;
|
||||
flex: 1.1 1 0%;
|
||||
width: 100%;
|
||||
padding-bottom: 2rem;
|
||||
|
||||
.error_title
|
||||
font-size: 9em
|
||||
line-height: 1
|
||||
+maxWidth768()
|
||||
font-size: 4rem;
|
||||
|
||||
.error_subtitle
|
||||
word-break: break-word
|
||||
font-size: 1.6em
|
||||
-webkit-line-clamp: 2
|
||||
|
||||
a
|
||||
display: inline-block
|
||||
margin-top: 0.5rem
|
||||
padding: 0.3rem 1.5rem
|
||||
background: var(--btn-bg)
|
||||
color: var(--btn-color)
|
||||
i
|
||||
padding-right: 0.3rem
|
||||
|
||||
.button--animated
|
||||
border-radius: 8px !important
|
||||
transition: 0.3s
|
||||
position: relative
|
||||
z-index: 1
|
||||
transition: color 1s ease 0s
|
||||
|
||||
#body-wrap
|
||||
.error-box
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
padding-top: 0px;
|
||||
position: relative;
|
||||
.aside-list
|
||||
display: flex
|
||||
flex-direction: row
|
||||
flex-wrap: nowrap
|
||||
margin: 1rem
|
||||
max-width: 100%
|
||||
+maxWidth768()
|
||||
margin: 0;
|
||||
|
||||
.aside-list-group
|
||||
display: flex
|
||||
flex-direction: row
|
||||
flex-wrap: wrap
|
||||
max-width: 800px
|
||||
margin: 0 auto
|
||||
justify-content: space-between
|
||||
|
||||
.aside-list-item
|
||||
padding: 0.5rem 0
|
||||
width: 49%
|
||||
|
||||
.thumbnail
|
||||
overflow: hidden
|
||||
width: 100%
|
||||
height: 200px
|
||||
background: var(--anzhiyu-card-bg)
|
||||
display: flex
|
||||
border-radius: 12px
|
||||
+maxWidth768()
|
||||
height: 100px;
|
||||
|
||||
img
|
||||
width: 100%
|
||||
object-fit: cover
|
||||
border-radius: 12px
|
||||
transition: 0.3s
|
||||
transition: filter 300ms ease-in 0.2s, transform 0.6s
|
||||
|
||||
&:hover img
|
||||
transform: scale(1.1)
|
||||
filter: brightness(0.82)
|
||||
|
||||
.content .title
|
||||
-webkit-line-clamp: 2
|
||||
overflow: hidden
|
||||
display: -webkit-box
|
||||
-webkit-box-orient: vertical
|
||||
line-height: 1.5
|
||||
justify-content: center
|
||||
align-items: flex-end
|
||||
align-content: center
|
||||
padding-top: 0.5rem
|
||||
font-size: 16px
|
||||
font-weight: bold
|
||||
|
||||
.content time
|
||||
display: none
|
||||
@@ -0,0 +1,603 @@
|
||||
.post
|
||||
+maxWidth768()
|
||||
#aside-content
|
||||
background: var(--anzhiyu-background);
|
||||
border: none;
|
||||
z-index 99
|
||||
margin-top: -1px
|
||||
#aside-content
|
||||
width: 300px
|
||||
animation: slide-in 0.6s 0.3s backwards;
|
||||
|
||||
+minWidth1200()
|
||||
if hexo-config('aside.position') == 'right'
|
||||
padding-left: 15px
|
||||
else
|
||||
padding-right: 15px
|
||||
|
||||
+maxWidth1200()
|
||||
width: 100%
|
||||
padding: 20px;
|
||||
|
||||
+maxWidth768()
|
||||
padding: 0 20px 20px
|
||||
|
||||
> .card-widget:first-child
|
||||
margin-top: 0
|
||||
|
||||
+maxWidth1200()
|
||||
margin-top: 20px
|
||||
+maxWidth768()
|
||||
margin-top: 0px
|
||||
|
||||
.card-widget
|
||||
@extend .cardHover
|
||||
position: relative
|
||||
overflow: hidden
|
||||
margin-top: 20px
|
||||
padding: 20px 24px
|
||||
|
||||
if hexo-config('aside.mobile') == false
|
||||
+maxWidth768()
|
||||
&:not(#card-toc)
|
||||
display: none
|
||||
.author-info__bottom-group
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
.author-info__name
|
||||
text-align: left;
|
||||
font-weight: 700;
|
||||
color: var(--anzhiyu-white);
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 0
|
||||
.author-info__desc
|
||||
font-size: 12px;
|
||||
color: var(--anzhiyu-white);
|
||||
opacity: .6;
|
||||
line-height: 1;
|
||||
|
||||
.author-info__description
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
padding: 1rem 1.2rem;
|
||||
opacity: 0;
|
||||
transition: .3s;
|
||||
color: var(--anzhiyu-white);
|
||||
|
||||
.banner-button-group .banner-button
|
||||
padding: 20px 12px;
|
||||
color: var(--anzhiyu-white);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
transition: all 0.3s ease 0s;
|
||||
cursor: pointer;
|
||||
.anzhiyufont .anzhiyu-icon-arrow-circle-right
|
||||
font-size: 1.3rem;
|
||||
margin-right: 10px;
|
||||
|
||||
.author-info-avatar
|
||||
user-select: none
|
||||
img
|
||||
filter: blur(0) brightness(1);
|
||||
.author-status
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
right 2px
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
border-radius: 2em;
|
||||
background-color: var(--anzhiyu-white);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: .3s .2s;
|
||||
transform: scale(1);
|
||||
img
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 0px;
|
||||
transition: 0s
|
||||
|
||||
.card-info-social-icons
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
cursor: pointer;
|
||||
|
||||
.social-icon
|
||||
margin: 0 0 0 10px
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
font-size: 1.4em;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
i, svg
|
||||
background: var(--anzhiyu-white-op);
|
||||
color: var(--anzhiyu-white);
|
||||
font-size: 1rem;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all .3s ease 0s;
|
||||
padding: 8px;
|
||||
border-radius: 32px;
|
||||
&:hover
|
||||
background: var(--anzhiyu-secondbg);
|
||||
transform: scale(1.1);
|
||||
color: var(--anzhiyu-main);
|
||||
box-shadow: none;
|
||||
|
||||
#card-info-btn
|
||||
display: block
|
||||
margin-top: 14px
|
||||
background-color: var(--btn-bg)
|
||||
color: var(--btn-color)
|
||||
text-align: center
|
||||
line-height: 2.4
|
||||
|
||||
&:hover
|
||||
background-color: var(--btn-hover-color)
|
||||
|
||||
span
|
||||
padding-left: 10px
|
||||
|
||||
.item-headline
|
||||
padding-bottom: 0;
|
||||
margin-left: 8px;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span
|
||||
margin-left: 6px
|
||||
|
||||
.sticky_layout
|
||||
+minWidth1200()
|
||||
position: sticky
|
||||
position: -webkit-sticky
|
||||
top: 20px
|
||||
transition: top .3s
|
||||
|
||||
.card-tag-cloud
|
||||
a
|
||||
display: inline-block
|
||||
padding: 0 4px
|
||||
|
||||
&:hover
|
||||
color: $text-hover !important
|
||||
|
||||
.aside-list
|
||||
& > span
|
||||
display: block
|
||||
margin-bottom: 10px
|
||||
text-align: center
|
||||
|
||||
& > .aside-list-item
|
||||
display: flex
|
||||
align-items: center
|
||||
padding: 6px 0
|
||||
|
||||
&:first-child
|
||||
padding-top: 0
|
||||
|
||||
&:not(:last-child)
|
||||
border-bottom: 1px dashed #f5f5f5
|
||||
|
||||
&:last-child
|
||||
padding-bottom: 0
|
||||
|
||||
.thumbnail
|
||||
overflow: hidden
|
||||
width: w = 4.2em
|
||||
height: w
|
||||
|
||||
& > img
|
||||
@extend .imgHover
|
||||
|
||||
.content
|
||||
flex: 1
|
||||
padding-left: 10px
|
||||
word-break: break-all
|
||||
width: 4.2em;
|
||||
height: 4.2em;
|
||||
|
||||
& > .name
|
||||
@extend .limit-more-line
|
||||
-webkit-line-clamp: 1
|
||||
|
||||
& > time,
|
||||
& > .name
|
||||
display: block
|
||||
color: $theme-meta-color
|
||||
font-size: 85%
|
||||
|
||||
& > .title,
|
||||
& > .comment
|
||||
@extend .limit-more-line
|
||||
color: var(--font-color)
|
||||
font-size: 95%
|
||||
line-height: 1.5
|
||||
-webkit-line-clamp: 2
|
||||
|
||||
&:hover
|
||||
color: $text-hover
|
||||
|
||||
&.no-cover
|
||||
min-height: 4.4em
|
||||
|
||||
.card-archives ul.card-archive-list,
|
||||
.card-categories ul.card-category-list
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style: none
|
||||
.card-archives .item-headline
|
||||
display: none
|
||||
|
||||
.card-archives ul.card-archive-list > .card-archive-list-item,
|
||||
.card-categories ul.card-category-list > .card-category-list-item
|
||||
a
|
||||
display: flex
|
||||
flex-direction: row
|
||||
padding: 3px 10px
|
||||
color: var(--font-color)
|
||||
transition: all .2s
|
||||
|
||||
&:hover
|
||||
background-color: var(--text-bg-hover)
|
||||
|
||||
span
|
||||
@extend .limit-one-line
|
||||
|
||||
&:first-child
|
||||
flex: 1
|
||||
|
||||
.card-categories
|
||||
.card-category-list
|
||||
&.child
|
||||
padding: 0 0 0 16px
|
||||
|
||||
> .parent
|
||||
> a
|
||||
&.expand
|
||||
i
|
||||
transform: rotate(-90deg)
|
||||
|
||||
& + .child
|
||||
display: block
|
||||
.card-category-list
|
||||
&-name
|
||||
width: 70% !important
|
||||
|
||||
&-count
|
||||
width: calc(100% - 70% - 20px)
|
||||
text-align: right
|
||||
|
||||
i
|
||||
float: right
|
||||
margin-right: -.5em
|
||||
padding: .5em
|
||||
transition: transform .3s
|
||||
transform: rotate(0)
|
||||
|
||||
if hexo-config('aside.card_categories.expand') == false
|
||||
> .child
|
||||
display: none
|
||||
|
||||
.card-webinfo
|
||||
.item-headline
|
||||
display: none
|
||||
.webinfo
|
||||
.webinfo-item
|
||||
display: flex
|
||||
align-items: center
|
||||
padding: 2px 10px 0
|
||||
justify-content: space-between;
|
||||
.webinfo-item-title
|
||||
display: flex;
|
||||
i
|
||||
line-height: 2;
|
||||
margin-right: 6px;
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
|
||||
div
|
||||
&:first-child
|
||||
flex: 1
|
||||
padding-right: 20px
|
||||
|
||||
// toc
|
||||
#card-toc
|
||||
+minWidth901()
|
||||
right: 0 !important
|
||||
max-height: calc(100vh - 100px);
|
||||
|
||||
+maxWidth1200()
|
||||
position: fixed
|
||||
right: 55px
|
||||
bottom: 30px
|
||||
z-index: 100
|
||||
max-width: $toc-mobile-maxWidth
|
||||
max-height: calc(100% - 60px)
|
||||
width: $toc-mobile-width
|
||||
transition: transform .3s
|
||||
transform: scale(0)
|
||||
transform-origin: right bottom
|
||||
&.open
|
||||
transform: scale(1)
|
||||
|
||||
.toc-percentage
|
||||
display: none
|
||||
float: right
|
||||
margin-top: -9px
|
||||
color: #a9a9a9
|
||||
font-style: italic
|
||||
font-size: 140%
|
||||
|
||||
.toc-content
|
||||
overflow-y: scroll
|
||||
overflow-y: overlay
|
||||
margin: 0 -24px
|
||||
max-height: calc(100vh - 120px)
|
||||
width: calc(100% + 48px)
|
||||
|
||||
+maxWidth1200()
|
||||
max-height: calc(100vh - 140px)
|
||||
|
||||
& > *
|
||||
margin: 0 20px !important
|
||||
|
||||
& > .toc-item > .toc-child
|
||||
margin-left: 10px
|
||||
padding-left: 10px
|
||||
// border-left: 1px solid var(--dark-grey)
|
||||
|
||||
&:not(.is-expand)
|
||||
.toc-child
|
||||
display: none
|
||||
|
||||
+maxWidth1200()
|
||||
display: block !important
|
||||
|
||||
.toc-item
|
||||
&.active
|
||||
.toc-child
|
||||
display: block
|
||||
|
||||
ol,
|
||||
li
|
||||
list-style: none
|
||||
|
||||
> ol
|
||||
padding: 0 !important
|
||||
|
||||
ol
|
||||
margin: 0
|
||||
padding-left: 18px
|
||||
|
||||
.toc-link
|
||||
display: block
|
||||
margin: 4px 0
|
||||
padding: 1px 6px
|
||||
color: var(--toc-link-color)
|
||||
transition: all .2s ease-in-out
|
||||
|
||||
&:hover
|
||||
color: var(--anzhiyu-lighttext)
|
||||
|
||||
&.active
|
||||
background: $theme-toc-color
|
||||
color: $toc-active-color
|
||||
|
||||
:only-child
|
||||
> .card-widget
|
||||
margin-top: 0
|
||||
|
||||
.card-more-btn
|
||||
float: right
|
||||
color: inherit
|
||||
|
||||
&:hover
|
||||
animation: more-btn-move 1s infinite
|
||||
|
||||
.card-announcement
|
||||
.item-headline
|
||||
i
|
||||
color: #FF0000
|
||||
|
||||
.avatar-img
|
||||
width: 118px;
|
||||
height 118px
|
||||
right: 0;
|
||||
top: 0;
|
||||
border-radius: 500px;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
opacity: 1;
|
||||
transition: .3s;
|
||||
border: var(--style-border-avatar);
|
||||
|
||||
img
|
||||
width: 100%
|
||||
height: 100%
|
||||
transition: filter 375ms ease-in .2s, transform .3s
|
||||
object-fit: cover
|
||||
|
||||
.site-data
|
||||
display: table
|
||||
width: 100%
|
||||
table-layout: fixed
|
||||
|
||||
& > a
|
||||
display: table-cell
|
||||
|
||||
div
|
||||
transition: all .3s
|
||||
|
||||
&:hover
|
||||
div
|
||||
color: $theme-color !important
|
||||
|
||||
.headline
|
||||
@extend .limit-one-line
|
||||
color: var(--font-color)
|
||||
|
||||
.length-num
|
||||
margin-top: -.32em
|
||||
color: var(--text-highlight-color)
|
||||
font-size: 1.2em
|
||||
|
||||
@keyframes more-btn-move
|
||||
0%,
|
||||
100%
|
||||
transform: translateX(0)
|
||||
|
||||
50%
|
||||
transform: translateX(3px)
|
||||
|
||||
@keyframes toc-open
|
||||
0%
|
||||
transform: scale(.7)
|
||||
|
||||
100%
|
||||
transform: scale(1)
|
||||
|
||||
@keyframes toc-close
|
||||
0%
|
||||
transform: scale(1)
|
||||
|
||||
100%
|
||||
transform: scale(.7)
|
||||
|
||||
+minWidth1200()
|
||||
html.hide-aside
|
||||
.layout
|
||||
justify-content: center
|
||||
|
||||
> .aside-content
|
||||
display: none
|
||||
|
||||
> div:first-child
|
||||
width: 80%
|
||||
+maxWidth1200()
|
||||
.aside-content
|
||||
max-width: none !important;
|
||||
display: none
|
||||
+maxWidth768()
|
||||
.aside-content
|
||||
display: block
|
||||
.page
|
||||
.sticky_layout
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
if hexo-config('aside.card_recent_post.sort_order')
|
||||
.card-recent-post
|
||||
order: hexo-config('aside.card_recent_post.sort_order')
|
||||
|
||||
if hexo-config('newest_comments.sort_order')
|
||||
#card-newest-comments
|
||||
order: hexo-config('newest_comments.sort_order')
|
||||
|
||||
if hexo-config('aside.card_categories.sort_order')
|
||||
.card-categories
|
||||
order: hexo-config('aside.card_categories.sort_order')
|
||||
|
||||
if hexo-config('aside.card_tags.sort_order')
|
||||
.card-tags
|
||||
order: hexo-config('aside.card_tags.sort_order')
|
||||
|
||||
if hexo-config('aside.card_archives.sort_order')
|
||||
.card-archives
|
||||
order: hexo-config('aside.card_archives.sort_order')
|
||||
|
||||
if hexo-config('aside.card_webinfo.sort_order')
|
||||
.card-webinfo
|
||||
order: hexo-config('aside.card_webinfo.sort_order')
|
||||
|
||||
if hexo-config('aside.enable')
|
||||
#aside-content
|
||||
>.card-widget.card-info
|
||||
background: var(--anzhiyu-card-bg);
|
||||
box-shadow: var(--anzhiyu-shadow-black);
|
||||
position: relative;
|
||||
padding: 0;
|
||||
+maxWidth768()
|
||||
display: none;
|
||||
> .card-content
|
||||
padding: 1rem 1.2rem;
|
||||
min-height: 320px;
|
||||
position: relative;
|
||||
&::before
|
||||
background: linear-gradient(-25deg,var(--anzhiyu-main),var(--anzhiyu-main-op-deep),var(--anzhiyu-main),var(--anzhiyu-main-op-deep));
|
||||
background-size: 400%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
content: '';
|
||||
animation: gradient 15s ease infinite;
|
||||
.card-info
|
||||
&:hover
|
||||
.author-info-avatar
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
.author-info__description
|
||||
opacity: 1;
|
||||
.author-status
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
|
||||
.author-info-avatar
|
||||
margin: 45px auto
|
||||
display: flex
|
||||
justify-content: center
|
||||
width: 118px;
|
||||
height: 118px;
|
||||
transition: cubic-bezier(.69,.39,0,1.21) .3s;
|
||||
transform-origin: bottom;
|
||||
position: relative
|
||||
+maxWidth768()
|
||||
display: none
|
||||
#author-info__sayhi
|
||||
text-align: left;
|
||||
color: var(--anzhiyu-white);
|
||||
background: var(--anzhiyu-white-op);
|
||||
font-size: 12px;
|
||||
margin: auto;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
width: fit-content;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
user-select: none
|
||||
&:hover
|
||||
background: var(--anzhiyu-card-bg);
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
transform: scale(1.1);
|
||||
|
||||
.banner-button-group .banner-button
|
||||
border-radius: 35px;
|
||||
background: var(--anzhiyu-white-op);
|
||||
&:hover
|
||||
background: var(--anzhiyu-white);
|
||||
color: var(--anzhiyu-black);
|
||||
|
||||
[data-theme="dark"] #aside-content > .card-info
|
||||
background: var(--anzhiyu-card-bg)
|
||||
|
||||
@media screen and (max-width: 992px)
|
||||
#aside-content > .card-info
|
||||
background-size: 100% 70%
|
||||
@@ -0,0 +1,37 @@
|
||||
.banners-title
|
||||
top: 2.9rem;
|
||||
left: 3rem;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.banners-title-big
|
||||
font-size: 36px;
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.banners-title-small
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
color: var(--anzhiyu-secondtext);
|
||||
margin-top: 8px;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
.banner-button
|
||||
padding: 8px 12px;
|
||||
background: var(--anzhiyu-fontcolor);
|
||||
border-radius: 12px;
|
||||
color: var(--anzhiyu-card-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--anzhiyu-shadow-black);
|
||||
&.secondary
|
||||
background: var(--anzhiyu-secondbg);
|
||||
border: var(--style-border-always);
|
||||
color: var(--anzhiyu-lighttext);
|
||||
margin-right: 1rem;
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
@@ -0,0 +1,8 @@
|
||||
// chat
|
||||
if hexo-config('chat_btn') == true && hexo-config('chatra.enable')
|
||||
#chatra:not(.chatra--expanded)
|
||||
visibility: hidden !important
|
||||
width: 1px !important
|
||||
height: 1px !important
|
||||
opacity: 0 !important
|
||||
pointer-events: none
|
||||
@@ -0,0 +1,97 @@
|
||||
#article-container
|
||||
> header
|
||||
height 0
|
||||
text-indent:-9999px;
|
||||
time, span
|
||||
height: 0;
|
||||
display: block;
|
||||
h1
|
||||
z-index: -1
|
||||
pointer-events: none
|
||||
a
|
||||
background: none !important
|
||||
border-bottom: none !important
|
||||
#post-comment
|
||||
.comment-head
|
||||
margin-bottom: 20px
|
||||
font-size: 0.8em !important;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.comment-headline
|
||||
display: inline-block
|
||||
vertical-align: middle
|
||||
font-weight: 700
|
||||
font-size: 1.43em
|
||||
.comment-randomInfo
|
||||
margin-left: auto;
|
||||
font-size: 13px;
|
||||
|
||||
.comment-switch
|
||||
display: inline-block
|
||||
|
||||
if hexo-config('comments.text')
|
||||
float: right
|
||||
margin: 2px auto 0
|
||||
padding: 4px 16px
|
||||
width: max-content
|
||||
border-radius: 8px
|
||||
background: $comments-switch-bg
|
||||
else
|
||||
vertical-align: middle
|
||||
|
||||
> span
|
||||
display: none
|
||||
|
||||
.first-comment
|
||||
color: $comments-switch-first-text
|
||||
|
||||
.second-comment
|
||||
color: $comments-switch-second-text
|
||||
|
||||
#switch-btn
|
||||
position: relative
|
||||
display: inline-block
|
||||
margin: -4px 8px 0
|
||||
width: 42px
|
||||
height: 22px
|
||||
border-radius: 34px
|
||||
background-color: $comments-switch-first-text
|
||||
vertical-align: middle
|
||||
cursor: pointer
|
||||
transition: .4s
|
||||
|
||||
&:before
|
||||
position: absolute
|
||||
bottom: 4px
|
||||
left: 4px
|
||||
width: 14px
|
||||
height: 14px
|
||||
border-radius: 50%
|
||||
background-color: $comments-switch-round
|
||||
content: ''
|
||||
transition: .4s
|
||||
|
||||
.comment-wrap
|
||||
> div
|
||||
animation: tabshow .5s
|
||||
|
||||
&:nth-child(2)
|
||||
display: none
|
||||
|
||||
&.move
|
||||
#switch-btn
|
||||
background-color: $comments-switch-second-text
|
||||
|
||||
&:before
|
||||
transform: translateX(20px)
|
||||
|
||||
.comment-wrap
|
||||
> div
|
||||
&:first-child
|
||||
display: none
|
||||
|
||||
&:last-child
|
||||
display: block
|
||||
@@ -0,0 +1,170 @@
|
||||
#footer
|
||||
position: relative
|
||||
background: linear-gradient(180deg, var(--anzhiyu-card-bg-none) 0%, var(--anzhiyu-card-bg) 25%);
|
||||
background-attachment: scroll
|
||||
background-position: bottom
|
||||
background-size: cover
|
||||
+maxWidth768()
|
||||
z-index: 3
|
||||
margin-top: -1px;
|
||||
|
||||
if hexo-config('footer_bg') != false
|
||||
&:before
|
||||
position: absolute
|
||||
width: 100%
|
||||
height: 100%
|
||||
background-color: alpha($dark-black, .5)
|
||||
content: ''
|
||||
|
||||
#footer-bar
|
||||
padding: 1rem;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
margin-top: 1rem;
|
||||
background: var(--anzhiyu-secondbg);
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
z-index: 1002;
|
||||
transition: 0.3s;
|
||||
a
|
||||
&:hover
|
||||
color: var(--anzhiyu-lighttext);
|
||||
.footer-bar-link
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
margin-right: 1rem;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
&.cc i
|
||||
margin-right: 0.7rem;
|
||||
font-size: 18px;
|
||||
.footer-bar-links
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: 1400px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
|
||||
.footer-bar-left
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
min-height: 32px;
|
||||
align-items: center;
|
||||
.footer-bar-right
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
#footer-wrap
|
||||
position: relative
|
||||
if hexo-config('footer.footerBar') && hexo-config('footer.footerBar.enable')
|
||||
padding: 40px 20px 0
|
||||
else
|
||||
padding: 40px 20px
|
||||
color: var(--light-grey)
|
||||
text-align: center
|
||||
+maxWidth768()
|
||||
padding: 0
|
||||
#footer_deal
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
+maxWidth768()
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
.deal_link
|
||||
display: flex;
|
||||
margin: 1rem 27px;
|
||||
color: var(--anzhiyu-card-bg);
|
||||
border-radius: 3rem;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: var(--anzhiyu-fontcolor);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: 0.3s;
|
||||
&:hover
|
||||
color: var(--anzhiyu-white);
|
||||
background: var(--anzhiyu-main);
|
||||
|
||||
.footer_mini_logo
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
margin: 0 1rem;
|
||||
cursor: pointer;
|
||||
transition: cubic-bezier(0, 0, 0, 1.29) 0.5s;
|
||||
-webkit-user-select: none;
|
||||
+maxWidth768()
|
||||
display: none;
|
||||
#anzhiyu-footer
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 1rem auto;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 2rem;
|
||||
.footer-group
|
||||
min-width: 120px;
|
||||
.footer-title-group
|
||||
display: flex;
|
||||
align-items: center;
|
||||
a
|
||||
margin-left: 8px
|
||||
line-height: 32px;
|
||||
i
|
||||
line-height: 1;
|
||||
color: var(--anzhiyu-secondtext);
|
||||
transition: 0.3s;
|
||||
font-size: 16px;
|
||||
opacity: 0.6;
|
||||
.footer-title
|
||||
color: var(--anzhiyu-secondtext);
|
||||
font-size: 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
margin: 1rem 0;
|
||||
.footer-links
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.footer-item
|
||||
font-size: 1rem;
|
||||
line-height: 1rem;
|
||||
margin: 8px 0;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
margin-right: auto;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 120px;
|
||||
cursor: pointer;
|
||||
padding: 2px 0;
|
||||
text-decoration: none
|
||||
&:hover
|
||||
color: var(--anzhiyu-theme);
|
||||
a
|
||||
color: var(--light-grey)
|
||||
i
|
||||
font-size: 1rem;
|
||||
line-height: 1rem;
|
||||
height: 1rem;
|
||||
|
||||
.footer-separator
|
||||
margin: 0 4px
|
||||
|
||||
.icp-icon
|
||||
padding: 0 4px
|
||||
max-height: 1.4em
|
||||
width: auto
|
||||
vertical-align: text-bottom
|
||||
[data-theme=light] .post #footer
|
||||
+maxWidth768()
|
||||
background: linear-gradient(180deg, var(--anzhiyu-background) 0%, var(--anzhiyu-card-bg) 25%);
|
||||
@@ -0,0 +1,803 @@
|
||||
#page-header
|
||||
position: relative
|
||||
width: 100%
|
||||
transition: all 0.5s ease 0s;
|
||||
#nav
|
||||
box-shadow: none;
|
||||
transition: 0.3s;
|
||||
|
||||
// index
|
||||
&.full_page
|
||||
height: $index_top_img_height
|
||||
background-attachment: fixed
|
||||
border-radius: 0
|
||||
if hexo-config('index_img')
|
||||
+maxWidth768()
|
||||
#center-console + label
|
||||
i
|
||||
background: var(--font-color)
|
||||
|
||||
#site-info
|
||||
position: absolute
|
||||
top: $index_site_info_top
|
||||
padding: 0 10px
|
||||
width: 100%
|
||||
|
||||
#site-title,
|
||||
#site-subtitle,
|
||||
#scroll-down .scroll-down-effects
|
||||
text-align: center
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, .15)
|
||||
line-height: 1.5
|
||||
|
||||
#site-title
|
||||
margin: 0
|
||||
color: var(--white)
|
||||
font-size: 1.85em
|
||||
|
||||
+minWidth768()
|
||||
font-size: 2.85em
|
||||
|
||||
#site-subtitle
|
||||
color: var(--light-grey)
|
||||
font-size: 1.15em
|
||||
|
||||
+minWidth768()
|
||||
font-size: 1.72em
|
||||
|
||||
#site_social_icons
|
||||
display: none
|
||||
margin: 0 auto
|
||||
width: 300px
|
||||
text-align: center
|
||||
|
||||
+maxWidth768()
|
||||
display: block
|
||||
|
||||
.social-icon
|
||||
margin: 0 10px
|
||||
color: var(--light-grey)
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, .15)
|
||||
font-size: 1.43em
|
||||
|
||||
#scroll-down
|
||||
position: absolute
|
||||
bottom: 0
|
||||
width: 100%
|
||||
cursor: pointer
|
||||
z-index: 11;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.scroll-down-effects
|
||||
position: relative
|
||||
width: 100%
|
||||
color: var(--light-grey)
|
||||
font-size: 30px
|
||||
|
||||
// page
|
||||
&.not-home-page
|
||||
height: 400px
|
||||
|
||||
+maxWidth768()
|
||||
height: 280px
|
||||
|
||||
#page-site-info
|
||||
position: absolute
|
||||
top: 200px
|
||||
padding: 0 10px
|
||||
width: 100%
|
||||
|
||||
+maxWidth768()
|
||||
top: 140px
|
||||
|
||||
// post
|
||||
&.post-bg
|
||||
height: 31.25rem
|
||||
transition: 0.6s
|
||||
overflow: hidden
|
||||
if hexo-config('dynamicEffect') && hexo-config('dynamicEffect.postTopRollZoomInfo')
|
||||
animation: header 5s linear forwards;
|
||||
animation-timeline: view();
|
||||
if hexo-config('mainTone.enable')
|
||||
background-color: var(--anzhiyu-bar-background)
|
||||
else
|
||||
background-color: transparent
|
||||
|
||||
// #nav
|
||||
#nav
|
||||
transition: all 0.5s, border 0.3s
|
||||
|
||||
// .post-meta
|
||||
.post-meta:has(.bldbanner),
|
||||
.post-meta:has(.bili-banner),
|
||||
.post-meta:has(.blqbanner)
|
||||
pointer-events: all
|
||||
.bili-banner
|
||||
margin-top: 0 !important
|
||||
|
||||
// #post-info
|
||||
#post-info:has(.bldbanner),
|
||||
#post-info:has(.bili-banner),
|
||||
#post-info:has(.blqbanner)
|
||||
pointer-events: none
|
||||
|
||||
&:has(.bldbanner),
|
||||
&:has(.blqbanner)
|
||||
height: 15rem
|
||||
img
|
||||
border-radius: 0px
|
||||
&:has(.bili-banner)
|
||||
height: 11rem
|
||||
img
|
||||
border-radius: 0px
|
||||
|
||||
#post-top-cover
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
margin: 0 -20% 0 auto;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0;
|
||||
user-select: none
|
||||
transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale));
|
||||
will-change: transform
|
||||
if !hexo-config('mainTone.enable')
|
||||
filter: blur(10px) brightness(60%);
|
||||
animation: none;
|
||||
transition: filter 0s
|
||||
margin: auto
|
||||
width: auto
|
||||
&::after
|
||||
display: none
|
||||
img
|
||||
border-radius: 0
|
||||
else
|
||||
filter: blur(10px);
|
||||
+minWidth768()
|
||||
animation: showCover 1s 0.3s backwards;
|
||||
opacity 0.5
|
||||
|
||||
+maxWidth768()
|
||||
margin: 0 0 0 auto;
|
||||
transform: rotate(0deg) translateY(0) scale(1);
|
||||
filter: blur(0px);
|
||||
width: 100%;
|
||||
if hexo-config('mainTone.enable')
|
||||
position: fixed;
|
||||
height: 30rem;
|
||||
else
|
||||
position: absolute;
|
||||
height: 100vh;
|
||||
z-index: 1;
|
||||
&::after
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-shadow: 110px -130px 300px 60px var(--anzhiyu-bar-background) inset;
|
||||
+maxWidth768()
|
||||
box-shadow: 0 0 205px 59px var(--anzhiyu-main) inset
|
||||
|
||||
#post-top-bg
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
min-width: 50vw;
|
||||
min-height: 20rem;
|
||||
+minWidth768()
|
||||
animation: slide-in 0.6s 0.3s backwards;
|
||||
+maxWidth768()
|
||||
min-height: 15rem !important;
|
||||
if hexo-config('mainTone.enable')
|
||||
height: 70% !important;
|
||||
else
|
||||
height: 100% !important;
|
||||
opacity: 1 !important;
|
||||
|
||||
#nav
|
||||
backdrop-filter: none;
|
||||
background: transparent;
|
||||
border-bottom: none;
|
||||
&.nav-fixed
|
||||
#nav
|
||||
background: var(--anzhiyu-card-bg);
|
||||
outline: 1px solid var(--anzhiyu-card-border);
|
||||
transform: translateZ(0);
|
||||
+maxWidth768()
|
||||
#nav
|
||||
border-bottom: none
|
||||
+maxWidth768()
|
||||
margin-bottom: -12px;
|
||||
transition: 0s !important
|
||||
min-height: 450px;
|
||||
&.nav-fixed
|
||||
#nav
|
||||
background: var(--anzhiyu-card-bg);
|
||||
outline: 1px solid var(--anzhiyu-card-border);
|
||||
if hexo-config('mainTone.enable')
|
||||
&:before
|
||||
position: absolute
|
||||
width: 100%
|
||||
height: 100%
|
||||
content: ''
|
||||
transition: 0s;
|
||||
background-color: var(--anzhiyu-bar-background);
|
||||
animation: slide-in-op 0.6s 0s forwards;
|
||||
|
||||
#post-info
|
||||
position: absolute
|
||||
top: 0
|
||||
left: calc((100% - 1400px + 3rem) / 2);
|
||||
width: calc(100% - (100% - 1400px + 3rem));
|
||||
height 100%
|
||||
display: flex
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
z-index: 3
|
||||
+minWidth768()
|
||||
--anzhiyu-header-translateY: 0
|
||||
animation: post-info-slide-in 0.6s 0.3s backwards;
|
||||
transform: scale(var(--anzhiyu-header-info-scale)) translateY(var(--anzhiyu-header-translateY));
|
||||
transform-origin: left top
|
||||
will-change: transform;
|
||||
+maxWidth1400()
|
||||
padding: 0 3.5rem
|
||||
width 100%
|
||||
left: 0
|
||||
|
||||
+maxWidth768()
|
||||
padding: 11rem 6% 0;
|
||||
align-items: center;
|
||||
if hexo-config('mainTone.enable')
|
||||
&:after
|
||||
display: block
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-shadow: 0px -265px 287px 45px var(--anzhiyu-bar-background) inset;
|
||||
z-index: 0;
|
||||
animation: none
|
||||
|
||||
&.not-top-img
|
||||
margin-bottom: 10px
|
||||
height: 60px
|
||||
background: 0
|
||||
#nav #menus .menus_item:hover > a
|
||||
background: var(--anzhiyu-main);
|
||||
#travellings_button::after
|
||||
background: var(--anzhiyu-main) !important;
|
||||
#nav
|
||||
#blog_name .back-home-button,
|
||||
#blog_name #site-name,
|
||||
#nav-right .nav-button a,
|
||||
#nav-right #toggle-menu
|
||||
&:hover
|
||||
color: var(--anzhiyu-white);
|
||||
background: var(--anzhiyu-main);
|
||||
box-shadow: var(--anzhiyu-shadow-main);
|
||||
.post-meta-categories
|
||||
background: rgba(0, 0, 0, 0.2)
|
||||
|
||||
#nav
|
||||
#blog_name,
|
||||
.mask-name-container,
|
||||
#menus,
|
||||
#nav-right .nav-button,
|
||||
#nav-right #toggle-menu
|
||||
a
|
||||
color: var(--font-color)
|
||||
text-shadow: none
|
||||
#center-console + label
|
||||
i
|
||||
background: var(--font-color)
|
||||
|
||||
&.nav-fixed
|
||||
#nav
|
||||
position: fixed
|
||||
z-index: 91
|
||||
background: var(--anzhiyu-card-bg);
|
||||
outline: 1px solid var(--anzhiyu-card-border);
|
||||
transform: translateZ(0);
|
||||
top: 0
|
||||
#toggle-menu
|
||||
color: var(--font-color)
|
||||
text-shadow: none
|
||||
transition: background .3s ease-in-out,color 0s ease-in-out
|
||||
#blog_name,
|
||||
.mask-name-container,
|
||||
#menus,
|
||||
#nav-right .nav-button,
|
||||
#nav-right #toggle-menu
|
||||
a
|
||||
color: var(--font-color)
|
||||
text-shadow: none
|
||||
transition: background .3s ease-in-out,color 0s ease-in-out
|
||||
|
||||
&.nav-fixed
|
||||
#name-container
|
||||
z-index: 101;
|
||||
transition: 0.3s;
|
||||
top: 10px;
|
||||
#page-name
|
||||
display: inline;
|
||||
opacity: 1;
|
||||
transition: 0.3s;
|
||||
line-height: 2;
|
||||
+minWidth768()
|
||||
max-width: 15.5rem
|
||||
+minWidth900()
|
||||
max-width: 25.5rem
|
||||
+minWidth1200()
|
||||
max-width: 35.5rem
|
||||
+minWidth2000()
|
||||
max-width: 45.5rem
|
||||
#nav
|
||||
#menus
|
||||
z-index: 100;
|
||||
div.menus_items
|
||||
transition: 0.3s;
|
||||
height: 40px;
|
||||
margin: auto 0;
|
||||
// position: relative;
|
||||
// top: -60px;
|
||||
transform: translateY(-60px)
|
||||
will-change: transform
|
||||
&.nav-fixed.nav-visible
|
||||
#page-name
|
||||
z-index: 100;
|
||||
top: 60px;
|
||||
transition: 0.3s;
|
||||
#nav
|
||||
#menus
|
||||
div.menus_items
|
||||
opacity: 1;
|
||||
transition: 0.3s;
|
||||
// position: relative;
|
||||
// top: 0px;
|
||||
transform: translateY(0px)
|
||||
will-change: transform
|
||||
|
||||
#page
|
||||
h1.page-title
|
||||
margin: 8px 0 20px
|
||||
|
||||
// for not top_img
|
||||
#post
|
||||
& > #post-info
|
||||
margin-bottom: 30px
|
||||
|
||||
.post-title
|
||||
border-bottom: 1px solid var(--light-grey)
|
||||
color: var(--text-highlight-color)
|
||||
|
||||
.post-edit-link
|
||||
float: right
|
||||
|
||||
#post-meta,
|
||||
#post-meta a
|
||||
color: #78818a
|
||||
|
||||
#post-info
|
||||
+maxWidth768()
|
||||
&:after
|
||||
display: none
|
||||
transition: 0
|
||||
.post-title
|
||||
@extend .limit-more-line
|
||||
color: var(--white)
|
||||
line-height: 1.5
|
||||
font-weight: 700;
|
||||
font-size: 3.3rem;
|
||||
text-align: left;
|
||||
margin: 1rem 0 1rem 0;
|
||||
-webkit-line-clamp: 2;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
+maxWidth768()
|
||||
font-size: 1.5rem
|
||||
-webkit-line-clamp: 3;
|
||||
margin: 0.2rem auto !important;
|
||||
text-align: center;
|
||||
z-index: 4
|
||||
|
||||
.post-edit-link
|
||||
padding-left: 10px
|
||||
|
||||
#post-meta
|
||||
color: var(--light-grey)
|
||||
font-size: 95%
|
||||
display: flex;
|
||||
width: 50rem;
|
||||
max-width: 100%;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
+minWidth768()
|
||||
> .meta-secondline
|
||||
> span:first-child
|
||||
display: none
|
||||
|
||||
+maxWidth768()
|
||||
font-size: 90%
|
||||
z-index: 4
|
||||
align-items: center;
|
||||
|
||||
> .meta-firstline,
|
||||
> .meta-secondline
|
||||
display: flex;
|
||||
font-size: 90%;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.post-meta
|
||||
&-separator
|
||||
margin: 0 8px
|
||||
|
||||
&-icon
|
||||
margin-right: 4px
|
||||
|
||||
&-label
|
||||
if hexo-config('post_meta.post.label')
|
||||
margin-right: 4px
|
||||
else
|
||||
display: none
|
||||
&-categories
|
||||
a:not([data-fancybox="gallery"])
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
padding: 0 0.2em;
|
||||
&:hover
|
||||
color: var(--anzhiyu-white);
|
||||
background-color: var(--anzhiyu-main);
|
||||
border-radius: 4px;
|
||||
|
||||
a
|
||||
color: var(--light-grey)
|
||||
transition: all .3s ease-out
|
||||
|
||||
&:hover
|
||||
color: $text-hover
|
||||
text-decoration: underline
|
||||
|
||||
if hexo-config('post_meta.post.date_format') == 'relative'
|
||||
time
|
||||
display: none
|
||||
|
||||
#nav
|
||||
position: fixed
|
||||
transition: .3s
|
||||
top: 0
|
||||
z-index: 90
|
||||
display: flex
|
||||
align-items: center
|
||||
padding 0 calc((100% - 1400px + 3rem) / 2)
|
||||
width: 100%
|
||||
height: 60px
|
||||
opacity: 1
|
||||
justify-content: space-between;
|
||||
outline: 1px solid var(--anzhiyu-none);
|
||||
i
|
||||
font-size: 1.2rem
|
||||
font-weight: bold
|
||||
|
||||
+maxWidth768()
|
||||
padding: 0 16px
|
||||
|
||||
#toggle-menu
|
||||
display: none
|
||||
padding: 2px 0 0 6px
|
||||
vertical-align: top
|
||||
border-radius: 50px;
|
||||
|
||||
&:hover
|
||||
color: var(--white) !important
|
||||
#blog_name,
|
||||
.mask-name-container,
|
||||
#menus,
|
||||
#nav-right .nav-button,
|
||||
#nav-right #toggle-menu
|
||||
a
|
||||
color: var(--light-grey)
|
||||
&:hover
|
||||
color: var(--white)
|
||||
|
||||
#site-name
|
||||
font-weight: bold
|
||||
cursor: pointer
|
||||
transition: .3s !important
|
||||
|
||||
.menus_items
|
||||
display: inline
|
||||
font-size: 1.3em
|
||||
|
||||
.menus_item
|
||||
padding 0 0.4rem
|
||||
display flex
|
||||
flex-direction column
|
||||
align-items center
|
||||
margin auto
|
||||
position relative
|
||||
border-radius: 30px;
|
||||
&:first-child .menus_item_child::after
|
||||
position: absolute;
|
||||
top: -60px;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
height: 60px;
|
||||
content: "";
|
||||
&:last-child .menus_item_child::after
|
||||
position: absolute;
|
||||
top: -60px;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
height: 60px;
|
||||
content: "";
|
||||
&:hover
|
||||
.menus_item_child
|
||||
border: var(--style-border-hover);
|
||||
box-shadow: var(--anzhiyu-shadow-main);
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
transform: translateY(0) scale(1);
|
||||
|
||||
& > a > i:last-child
|
||||
transform: rotate(180deg)
|
||||
|
||||
& > a > i:last-child
|
||||
padding: 4px
|
||||
transition: transform .2s
|
||||
|
||||
.menus_item_child
|
||||
position: absolute
|
||||
opacity 0
|
||||
width: max-content
|
||||
border-radius 5px
|
||||
top 35px
|
||||
box-shadow var(--anzhiyu-shadow-black)
|
||||
border var(--style-border)
|
||||
transition 0.2s
|
||||
background-color var(--anzhiyu-card-bg)
|
||||
border-radius 50px
|
||||
right auto
|
||||
left auto
|
||||
padding 6px 4px
|
||||
box-sizing content-box
|
||||
line-height 35px
|
||||
transform: translateY(-10px) scale(0);
|
||||
transform-origin: top;
|
||||
pointer-events: none
|
||||
margin-top: 8px
|
||||
&:before
|
||||
position: absolute
|
||||
top: -12px
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 16px
|
||||
content: ''
|
||||
|
||||
li
|
||||
list-style: none
|
||||
|
||||
&:hover
|
||||
background: var(--text-bg-hover)
|
||||
|
||||
&:first-child
|
||||
border-top-left-radius: 50px
|
||||
border-top-right-radius: 50px
|
||||
|
||||
&:last-child
|
||||
border-bottom-right-radius: 50px
|
||||
border-bottom-left-radius: 50px
|
||||
|
||||
a
|
||||
display: inline-block
|
||||
padding: .5625rem 1rem
|
||||
width: 100%
|
||||
color: var(--font-color) !important
|
||||
text-shadow: none !important
|
||||
&:hover
|
||||
color: var(--anzhiyu-white) !important
|
||||
padding: .125rem 1.25rem;
|
||||
transform: scale(1) !important;
|
||||
background: var(--anzhiyu-main)!important;
|
||||
box-shadow: var(--anzhiyu-shadow-main);
|
||||
transform: scale(1)!important;
|
||||
|
||||
&.hide-menu
|
||||
#toggle-menu
|
||||
display: inline-block !important
|
||||
|
||||
.site-page
|
||||
font-size: inherit
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
i
|
||||
font-size: 1.35rem;
|
||||
|
||||
.menus_items
|
||||
display: none
|
||||
|
||||
#search-button span
|
||||
display: none
|
||||
|
||||
#search-button
|
||||
display: inline
|
||||
padding: 0 0 0 14px
|
||||
|
||||
.site-page
|
||||
position: relative
|
||||
padding-bottom: 6px
|
||||
font-size: .78em
|
||||
cursor: pointer
|
||||
&:hover
|
||||
color: var(--anzhiyu-white) !important
|
||||
|
||||
@keyframes move-forever
|
||||
0%
|
||||
transform: translate3d(-90px, 0, 0);
|
||||
100%
|
||||
transform: translate3d(85px, 0, 0)
|
||||
|
||||
//波浪css
|
||||
if hexo-config('dynamicEffect') && hexo-config('dynamicEffect.postTopWave')
|
||||
.main-hero-waves-area
|
||||
width: 100%
|
||||
position: absolute
|
||||
left: 0
|
||||
bottom: -11px
|
||||
z-index: 5
|
||||
pointer-events: none
|
||||
|
||||
.waves-area .waves-svg
|
||||
width: 100%
|
||||
height: 3.75rem
|
||||
|
||||
//Animation
|
||||
.parallax > use
|
||||
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite
|
||||
will-change: transform;
|
||||
|
||||
.parallax > use:nth-child(1)
|
||||
animation-delay: -2s
|
||||
animation-duration: 7s
|
||||
fill: #f7f9febd
|
||||
|
||||
.parallax > use:nth-child(2)
|
||||
animation-delay: -3s
|
||||
animation-duration: 10s
|
||||
fill: #f7f9fe82
|
||||
|
||||
.parallax > use:nth-child(3)
|
||||
animation-delay: -4s
|
||||
animation-duration: 13s
|
||||
fill: #f7f9fe36
|
||||
|
||||
.parallax > use:nth-child(4)
|
||||
animation-delay: -5s
|
||||
animation-duration: 20s
|
||||
fill: #f7f9fe
|
||||
|
||||
//黑色模式背景
|
||||
[data-theme="dark"] .parallax
|
||||
& > use:nth-child(1)
|
||||
fill: #18171dc8
|
||||
& > use:nth-child(2)
|
||||
fill: #18171d80
|
||||
& > use:nth-child(3)
|
||||
fill: #18171d3e
|
||||
& > use:nth-child(4)
|
||||
fill: rgb(0 0 0 / 39%)
|
||||
|
||||
#post-firstinfo
|
||||
text-align: left;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
-webkit-user-select: none;
|
||||
+maxWidth768()
|
||||
z-index 4
|
||||
|
||||
.meta-firstline
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
|
||||
a.post-meta-original
|
||||
background: var(--anzhiyu-white-op);
|
||||
color: var(--anzhiyu-white);
|
||||
padding: 0 0.7rem;
|
||||
font-size: 0.9rem;
|
||||
margin: auto;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
span.post-meta-categories
|
||||
color: var(--anzhiyu-white);
|
||||
|
||||
font-size: 0.9rem;
|
||||
margin: auto;
|
||||
font-weight: bold;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
i
|
||||
display: none
|
||||
|
||||
a.post-meta-categories
|
||||
border-radius: 8px;
|
||||
padding: 0 0.7rem;
|
||||
background: var(--anzhiyu-white-op);
|
||||
color: var(--anzhiyu-white);
|
||||
font-size: 0.9rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
margin-left: .4rem
|
||||
.article-meta.tags
|
||||
margin-left: 1.2rem;
|
||||
+maxWidth768()
|
||||
display: none
|
||||
.article-meta__tags
|
||||
color: var(--anzhiyu-white);
|
||||
opacity: 0.8;
|
||||
margin-right: 8px;
|
||||
.anzhiyu-icon-hashtag:before
|
||||
font-size: 17px;
|
||||
.anzhiyu-icon-location-dot
|
||||
margin-right: 4px
|
||||
#post
|
||||
#post-info
|
||||
#post-firstinfo
|
||||
.meta-firstline
|
||||
a.post-meta-original
|
||||
background: var(--anzhiyu-black)
|
||||
.article-meta__tags
|
||||
color: var(--anzhiyu-black)
|
||||
+maxWidth768()
|
||||
.layout > div:first-child:not(.recent-posts)
|
||||
z-index: 10;
|
||||
if hexo-config('mainTone.enable')
|
||||
#page-header.post-bg #nav
|
||||
background: linear-gradient(to top, var(--anzhiyu-main-none) 0%, var(--anzhiyu-bar-background) 100%);
|
||||
transition: 0s
|
||||
.post-bg:has(.bldbanner) #post-info:after,
|
||||
.post-bg:has(.bili-banner) #post-info:after,
|
||||
.post-bg:has(.blqbanner) #post-info:after
|
||||
box-shadow: 0px -214px 287px 45px var(--anzhiyu-black-op) inset;
|
||||
/*Shrinking for mobile*/
|
||||
.waves-area .waves-svg
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
.main-hero-waves-area
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
|
||||
@keyframes showCover
|
||||
0%
|
||||
opacity: 0;
|
||||
transform: rotate(10deg) translateY(-8%) scale(var(--anzhiyu-header-cover-scale));
|
||||
|
||||
100%
|
||||
opacity: 0.5;
|
||||
transform: rotate(10deg) translateY(-10%) scale(var(--anzhiyu-header-cover-scale));
|
||||
@@ -0,0 +1,57 @@
|
||||
#random-banner
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 76%;
|
||||
background: var(--anzhiyu-card-bg);
|
||||
margin-bottom: 0.5rem;
|
||||
border: var(--style-border);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
transition: 0.3s;
|
||||
will-change: transform;
|
||||
&:hover
|
||||
box-shadow: var(--anzhiyu-shadow-main);
|
||||
#random-hover
|
||||
opacity: 1;
|
||||
padding-left: 2rem;
|
||||
background: var(--anzhiyu-theme-op-deep);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
transform-style: preserve-3d;
|
||||
transition: 0.3s;
|
||||
background-size: 200%;
|
||||
cursor: pointer;
|
||||
#skills-tags-group-all .tags-group-wrapper
|
||||
margin-top: 7rem;
|
||||
#skills-tags-group-all
|
||||
transform: rotate(-30deg);
|
||||
#random-hover
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: var(--anzhiyu-theme);
|
||||
color: var(--anzhiyu-white);
|
||||
padding-left: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: cubic-bezier(0.71, 0.15, 0.16, 1.15) 0.6s;
|
||||
font-size: 60px;
|
||||
.bannerText
|
||||
display: flex
|
||||
align-items: center
|
||||
i
|
||||
font-size: 80px;
|
||||
margin-left: 10px;
|
||||
line-height: 1;
|
||||
+maxWidth1200()
|
||||
display: none;
|
||||
@@ -0,0 +1,743 @@
|
||||
#sidebar #sidebar-menus .menus_items .menus_item_child
|
||||
margin: 0px
|
||||
list-style: none
|
||||
display: flex
|
||||
flex-direction: row
|
||||
flex-wrap: wrap
|
||||
|
||||
#sidebar #sidebar-menus .menus_item_child li
|
||||
width: calc(50% - 8px)
|
||||
margin: 4px
|
||||
|
||||
#sidebar #sidebar-menus .menus_item_child .site-page.child
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
padding: 8px
|
||||
border-radius: 12px
|
||||
border: var(--style-border-always)
|
||||
background: var(--anzhiyu-card-bg)
|
||||
font-size: 14px
|
||||
height: 4.2rem;
|
||||
width: 7rem;
|
||||
justify-content: space-between;
|
||||
|
||||
#sidebar .menus_item ul
|
||||
padding-left: 0px
|
||||
|
||||
#nav-group
|
||||
max-width: 1400px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
|
||||
#page-header.nav-fixed #center-console
|
||||
& + label i
|
||||
background: var(--font-color);
|
||||
#center-console
|
||||
display: none
|
||||
& + label
|
||||
--icon-size: 1.375rem;
|
||||
position: relative;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: var(--icon-size);
|
||||
width: var(--icon-size);
|
||||
cursor: pointer;
|
||||
transition: 1s;
|
||||
margin-left: 1rem
|
||||
&:hover
|
||||
i
|
||||
&.left
|
||||
width: calc(var(--icon-size)/2.5);
|
||||
&.center
|
||||
opacity: 0.5
|
||||
width: calc(var(--icon-size)/2.5);
|
||||
&.right
|
||||
width: calc(var(--icon-size)/2.5);
|
||||
height: calc(var(--icon-size)/1.15);
|
||||
transform: none;
|
||||
i
|
||||
background: var(--light-grey);
|
||||
position: absolute;
|
||||
border-radius: calc(var(--icon-size)*.15);
|
||||
transition: .5s var(--animation-on);
|
||||
inset: 0;
|
||||
margin: auto;
|
||||
right: auto;
|
||||
width: calc(var(--icon-size)/3);
|
||||
height: calc(var(--icon-size)/3);
|
||||
transform: translateY(calc(var(--icon-size)/4));
|
||||
&.left
|
||||
width: 100%;
|
||||
transform: translateY(calc(var(--icon-size)/-4));
|
||||
&.right
|
||||
left: auto;
|
||||
right: 0;
|
||||
width: calc(var(--icon-size)/2);
|
||||
&:checked + label
|
||||
right: 0
|
||||
top: 0.5rem;
|
||||
z-index: 31;
|
||||
&:hover
|
||||
&::after
|
||||
background: var(--anzhiyu-main) !important;
|
||||
&::after
|
||||
content: "";
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: -6px;
|
||||
left: -6.3px;
|
||||
background: var(--anzhiyu-fontcolor) !important;
|
||||
border-radius: 50px;
|
||||
&:is(.widget, .widget:hover) i
|
||||
height: calc(var(--icon-size)/4.5);
|
||||
background: var(--anzhiyu-white) !important;
|
||||
i.left
|
||||
width: 100% !important;
|
||||
transform: rotate(-45deg) !important;
|
||||
i.center
|
||||
width: 0 !important;
|
||||
i.right
|
||||
width: 100% !important;
|
||||
transform: rotate(45deg) !important;
|
||||
[data-theme="dark"] #center-console:checked + label:is(.widget, #center-console:checked + label .widget:hover) i
|
||||
background: var(--anzhiyu-black) !important;
|
||||
#body-wrap
|
||||
.nav-fixed #travellings_button
|
||||
&::after
|
||||
background: var(--anzhiyu-main) !important;
|
||||
|
||||
#travellings_button
|
||||
display: flex
|
||||
&:hover::after
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
visibility: visible;
|
||||
&:hover
|
||||
a
|
||||
background: var(--anzhiyu-main);
|
||||
-webkit-box-shadow: var(--anzhiyu-shadow-main);
|
||||
box-shadow: var(--anzhiyu-shadow-main);
|
||||
i
|
||||
color: var(--anzhiyu-white);
|
||||
&::after
|
||||
--height: 2rem;
|
||||
content: attr(title);
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--anzhiyu-white);
|
||||
background: var(--anzhiyu-white-op) !important;
|
||||
box-shadow: var(--anzhiyu-shadow-nav);
|
||||
border-radius: var(--anzhiyu-radius-full);
|
||||
width: fit-content;
|
||||
height: var(--height);
|
||||
font-size: var(--global-font-size);
|
||||
white-space: nowrap;
|
||||
margin: auto;
|
||||
padding: 0 4em;
|
||||
top: calc((60px - var(--height)) / 2);
|
||||
right: 0;
|
||||
left: 0;
|
||||
line-height: 0;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
visibility: hidden;
|
||||
transform: scaleX(1.1);
|
||||
pointer-events: none;
|
||||
transition: .5s;
|
||||
+maxWidth900()
|
||||
padding: 0 2em;
|
||||
|
||||
#body-wrap:has(#travellings_button:hover)
|
||||
#page-name,
|
||||
#nav #menus
|
||||
display: none
|
||||
#body-wrap .page #travellings_button:hover
|
||||
&::after
|
||||
background: var(--anzhiyu-main) !important;
|
||||
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
#page-header #nav
|
||||
padding: 20px
|
||||
|
||||
.cardHover,
|
||||
.error404 #error-wrap .error-content,
|
||||
.layout > div:first-child:not(.recent-posts),
|
||||
#recent-posts > .recent-post-item,
|
||||
#aside-content .card-widget,
|
||||
.layout > .recent-posts .pagination > *:not(.space)
|
||||
box-shadow: none !important
|
||||
|
||||
#sidebar #sidebar-menus .menus_items .site-page:hover
|
||||
background: none
|
||||
|
||||
div#travellings_button
|
||||
display: none !important
|
||||
|
||||
#nav
|
||||
#blog_name,
|
||||
.mask-name-container,
|
||||
#menus,
|
||||
#nav-right .nav-button,
|
||||
#nav-right #toggle-menu
|
||||
a:hover
|
||||
background var(--anzhiyu-main)
|
||||
transition 0.3s
|
||||
|
||||
#page-header.not-top-img
|
||||
margin-bottom 0px
|
||||
#page-header:not(.nav-fixed) #percent
|
||||
transition 0.3s
|
||||
|
||||
#page-header #nav #nav-right > div
|
||||
margin-left 1rem
|
||||
padding 0
|
||||
|
||||
.nav-button
|
||||
cursor pointer
|
||||
|
||||
#nav #menus
|
||||
padding 0 calc((100% - 1400px + 3rem) / 2)
|
||||
display flex
|
||||
justify-content center
|
||||
width 100%
|
||||
position absolute
|
||||
height 60px
|
||||
left 0
|
||||
margin 0
|
||||
transform: translateZ(0);
|
||||
will-change: auto
|
||||
|
||||
#nav .site-page
|
||||
padding-bottom 0px
|
||||
#nav *::after
|
||||
background-color transparent !important
|
||||
|
||||
/* 顶栏修改 */
|
||||
#nav .menus_items .menus_item a
|
||||
border-radius 50px
|
||||
#nav .menus_items .menus_item .menus_item_child li a
|
||||
padding 2px 16px
|
||||
border-radius 50px
|
||||
transition: .3s !important
|
||||
#nav .menus_items .menus_item .menus_item_child li:hover a
|
||||
color white !important
|
||||
|
||||
#nav .menus_items .menus_item .menus_item_child li
|
||||
border-radius 50px
|
||||
transition all 0.3s
|
||||
display inline-block
|
||||
margin 0 3px
|
||||
|
||||
#site-name, .shuoshuo
|
||||
white-space nowrap
|
||||
overflow hidden
|
||||
#site-name
|
||||
padding 0 2px
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
position relative
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
transition 0.3s
|
||||
|
||||
/* 一级菜单居中 */
|
||||
#nav .menus_items
|
||||
position relative
|
||||
width fit-content
|
||||
text-align center
|
||||
left 0px
|
||||
right 0px
|
||||
top 0px
|
||||
display flex
|
||||
flex-direction row
|
||||
justify-content center
|
||||
|
||||
#nav
|
||||
#blog_name,
|
||||
.mask-name-container,
|
||||
#menus,
|
||||
#nav-right .nav-button,
|
||||
#nav-right #toggle-menu
|
||||
a
|
||||
border-radius 50px;
|
||||
.page #nav
|
||||
#blog_name,
|
||||
.mask-name-container,
|
||||
#menus,
|
||||
#nav-right .nav-button,
|
||||
#nav-right #toggle-menu
|
||||
a:hover
|
||||
color var(--anzhiyu-white)
|
||||
background var(--anzhiyu-main)
|
||||
transition 0.3s
|
||||
box-shadow var(--anzhiyu-shadow-main)
|
||||
.post #nav
|
||||
#blog_name .back-home-button,
|
||||
#blog_name #site-name,
|
||||
#nav-right .nav-button a,
|
||||
#nav-right #toggle-menu
|
||||
&:hover
|
||||
color var(--anzhiyu-white)
|
||||
background var(--anzhiyu-white-op)
|
||||
transition 0.3s
|
||||
.post #nav
|
||||
#menus .menus_item
|
||||
&:hover > a
|
||||
color var(--anzhiyu-white)
|
||||
background var(--anzhiyu-white-op)
|
||||
transition 0.3s
|
||||
|
||||
.post .nav-fixed #nav
|
||||
#menus .menus_item
|
||||
&:hover
|
||||
> a.site-page
|
||||
color var(--anzhiyu-white)
|
||||
background var(--anzhiyu-main)
|
||||
transition 0.3s
|
||||
box-shadow var(--anzhiyu-shadow-main)
|
||||
#blog_name #site-name,
|
||||
#blog_name .back-home-button,
|
||||
#nav-right .nav-button a,
|
||||
#nav-right #toggle-menu
|
||||
&:hover
|
||||
color var(--anzhiyu-white)
|
||||
background var(--anzhiyu-main)
|
||||
transition 0.3s
|
||||
box-shadow var(--anzhiyu-shadow-main)
|
||||
|
||||
#page-header.nav-fixed #nav #page-name
|
||||
background none
|
||||
text-shadow none
|
||||
box-shadow none
|
||||
font-weight bold
|
||||
border-radius 100px
|
||||
min-width 100px
|
||||
line-height: 1.5rem;
|
||||
|
||||
#name-container
|
||||
align-items center
|
||||
display flex
|
||||
border-radius 12px
|
||||
height 40px
|
||||
position absolute
|
||||
top 62px
|
||||
left 0px
|
||||
right 0px
|
||||
margin auto
|
||||
justify-content center
|
||||
animation-timing-function ease-out
|
||||
-webkit-animation-timing-function ease-out
|
||||
#page-header.nav-fixed.nav-visible #name-container
|
||||
z-index 100
|
||||
top 60px
|
||||
transition 0.3s
|
||||
|
||||
#page-header.nav-fixed #nav #page-name:hover
|
||||
color var(--anzhiyu-main)
|
||||
@media screen and (min-width: 900px)
|
||||
#page-header.nav-fixed #nav #page-name::after
|
||||
opacity 0
|
||||
transform scale(1)
|
||||
content "回到顶部"
|
||||
transition 0.2s
|
||||
position absolute
|
||||
left 0
|
||||
right 0
|
||||
top 50%
|
||||
transform translateY(-50%)
|
||||
margin auto
|
||||
color var(--anzhiyu-white) !important
|
||||
font-weight 700
|
||||
line-height 2
|
||||
@media screen and (min-width: 1200px)
|
||||
#page-header.nav-fixed #nav #page-name:hover:after
|
||||
opacity 1
|
||||
#page-header.nav-fixed #nav #page-name:hover
|
||||
background var(--anzhiyu-main)
|
||||
|
||||
#page-header #nav #page-name
|
||||
display inline
|
||||
font-weight bold
|
||||
padding 4px 8px
|
||||
opacity 0
|
||||
transition 0.1s
|
||||
text-overflow ellipsis
|
||||
overflow hidden
|
||||
white-space nowrap
|
||||
position relative
|
||||
text-align center
|
||||
cursor pointer
|
||||
top 0
|
||||
font-size 1.1rem
|
||||
animation-timing-function ease-in
|
||||
-webkit-animation-timing-function ease-in
|
||||
|
||||
#menus > div.menus_items > div > a
|
||||
letter-spacing 0.3rem
|
||||
font-weight 700
|
||||
padding 0em 0.8em 0em 1em
|
||||
height 35px
|
||||
line-height 35px
|
||||
transition: color 0s !important
|
||||
|
||||
#nav div#toggle-menu
|
||||
padding 2px 0 4px 6px
|
||||
|
||||
#page-name:hover:before
|
||||
opacity 1
|
||||
|
||||
::backdrop
|
||||
display block
|
||||
position fixed
|
||||
top 0px
|
||||
|
||||
.mask-name-container
|
||||
width 100%
|
||||
height 100%
|
||||
position absolute
|
||||
overflow hidden
|
||||
left 0
|
||||
|
||||
#nav .menus_items .menus_item > a > i:last-child
|
||||
display none
|
||||
|
||||
#nav #search-button
|
||||
font-size 1.3em
|
||||
|
||||
.back-home-button:hover
|
||||
background var(--anzhiyu-main)
|
||||
color var(--anzhiyu-white) !important
|
||||
|
||||
.back-home-button
|
||||
display flex
|
||||
width 35px
|
||||
height 35px
|
||||
padding 0 !important
|
||||
align-items center
|
||||
justify-content center
|
||||
margin-right 4px
|
||||
transition 0.3s
|
||||
border-radius 8px
|
||||
|
||||
.back-home-button:hover .back-menu-list-groups
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
transition: .3s;
|
||||
top: 55px;
|
||||
pointer-events: auto;
|
||||
left: 0rem;
|
||||
transform: scale(1);
|
||||
|
||||
.back-home-button .back-menu-list-groups
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
transform: scale(.8);
|
||||
transform-origin: top left;
|
||||
left: 0rem;
|
||||
background-color: var(--anzhiyu-maskbgdeep);
|
||||
border-radius: 12px;
|
||||
border: var(--style-border);
|
||||
flex-direction: column;
|
||||
font-size: 12px;
|
||||
color: var(--anzhiyu-secondtext);
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
transition: .1s;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
backdrop-filter: blur(20px);
|
||||
|
||||
.back-home-button .back-menu-list-group
|
||||
display flex
|
||||
flex-direction column
|
||||
|
||||
.back-home-button .back-menu-list-group .back-menu-list-title
|
||||
margin 8px 0 0 16px
|
||||
transition 0.3s
|
||||
|
||||
.back-home-button .back-menu-list
|
||||
display flex
|
||||
flex-direction row
|
||||
flex-wrap wrap
|
||||
width 340px
|
||||
justify-content space-between
|
||||
|
||||
.back-home-button .back-menu-list::before
|
||||
position absolute
|
||||
top -24px
|
||||
left 0px
|
||||
width 100%
|
||||
height 25px
|
||||
content ""
|
||||
transition: 0s
|
||||
|
||||
.back-home-button .back-menu-list-groups .back-menu-list-group:last-child .back-menu-list
|
||||
margin 0 0 8px
|
||||
|
||||
.back-home-button .back-menu-list-group:hover .back-menu-list-title
|
||||
color var(--anzhiyu-main)
|
||||
|
||||
.back-home-button .back-menu-list-groups:hover
|
||||
border var(--style-border-hover)
|
||||
|
||||
.back-home-button .back-menu-list .back-menu-item
|
||||
display flex
|
||||
align-items center
|
||||
margin 4px 8px
|
||||
padding 4px 8px !important
|
||||
transition 0.3s
|
||||
width 150px
|
||||
border-radius 8px !important
|
||||
transition 0.2s !important
|
||||
|
||||
.back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-text
|
||||
font-size var(--global-font-size)
|
||||
margin-left 0.5rem
|
||||
color var(--anzhiyu-fontcolor)
|
||||
white-space nowrap
|
||||
+maxWidth768()
|
||||
font-size: 14px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
.back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-icon
|
||||
width 24px
|
||||
height 24px
|
||||
border-radius 24px
|
||||
background var(--anzhiyu-secondbg)
|
||||
|
||||
#page-header #nav .back-home-button
|
||||
cursor pointer
|
||||
position relative
|
||||
|
||||
#page-header:not(.not-top-img) #nav .back-home-button
|
||||
color var(--light-grey)
|
||||
|
||||
#page-header.nav-fixed:not(.not-top-img) #nav .back-home-button
|
||||
color var(--font-color)
|
||||
|
||||
.back-home-button .back-menu-list .back-menu-item:hover .back-menu-item-text
|
||||
color var(--anzhiyu-white)
|
||||
|
||||
.back-menu-item-icon.loading img
|
||||
width 25px
|
||||
|
||||
#page-header #nav #menus .nav-button.long a.totopbtn span
|
||||
border-radius 35px
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
transition 0.3s
|
||||
white-space nowrap
|
||||
|
||||
#page-header #nav #menus .nav-button.long a.totopbtn:hover
|
||||
border-radius 35px
|
||||
height 30px
|
||||
|
||||
#nav #search-button
|
||||
padding-left 0
|
||||
|
||||
#search-button a.site-page.social-icon.search span
|
||||
display none
|
||||
|
||||
#nav .nav-button a:hover
|
||||
color var(--anzhiyu-white) !important
|
||||
|
||||
#menus > div.menus_items a
|
||||
font-weight bold
|
||||
|
||||
#menus .menus_item .menus_item_child .site-page.child.faa-parent.animated-hover .anzhiyu-icon-fan.faa-tada
|
||||
animation rotate 1.6s linear infinite
|
||||
|
||||
#nav-right
|
||||
z-index 102
|
||||
position absolute
|
||||
right 0
|
||||
display flex
|
||||
flex-direction row
|
||||
height 100%
|
||||
align-items center
|
||||
|
||||
/* nav left */
|
||||
#nav #blog_name
|
||||
flex-wrap nowrap
|
||||
height 60px
|
||||
display flex
|
||||
align-items center
|
||||
transition 0.3s
|
||||
z-index 102
|
||||
|
||||
#blog_name #site-name i
|
||||
position absolute
|
||||
transition 0.3s
|
||||
font-size: 1rem
|
||||
opacity 0
|
||||
|
||||
#blog_name #site-name:hover .title
|
||||
opacity 0
|
||||
|
||||
#blog_name #site-name .title
|
||||
transition 0.3s
|
||||
letter-spacing normal
|
||||
font-size: 1.2rem;
|
||||
padding: 0 5px;
|
||||
line-height: 2rem;
|
||||
transition: color 0s;
|
||||
|
||||
.post #blog_name #site-name .title
|
||||
transition 0s
|
||||
|
||||
#blog_name #site-name:hover i
|
||||
color white
|
||||
opacity 1
|
||||
|
||||
#page-header #nav #nav-right .nav-button a i,
|
||||
#page-header #nav #nav-left .nav-button a i
|
||||
line-height 1
|
||||
transition .3s
|
||||
|
||||
#page-header #nav #nav-right .nav-button a:hover i,
|
||||
#page-header #nav #nav-left .nav-button a:hover i
|
||||
color var(--anzhiyu-white)
|
||||
transition background 0.35s ease-in-out, color 0.2s ease-in-out
|
||||
|
||||
[data-theme="dark"] #page-header #nav #nav-right .nav-button a i,
|
||||
[data-theme="dark"] #page-header #nav #nav-left .nav-button a i,
|
||||
[data-theme="dark"] #page-header #nav #nav-right .nav-button a i,
|
||||
[data-theme="dark"] #page-header #nav #nav-left .nav-button a i,
|
||||
[data-theme="dark"] #page-header.nav-fixed:not(.not-top-img) #nav .back-home-button
|
||||
+maxWidth768()
|
||||
color: #c9c9c9 !important
|
||||
|
||||
/* 返回顶部按钮样式 */
|
||||
#nav-totop
|
||||
width 35px
|
||||
height 35px
|
||||
transition 0.3s
|
||||
display flex
|
||||
border-radius 50px
|
||||
align-items center
|
||||
justify-content space-around
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
#page-header #nav #nav-right .nav-button a.totopbtn
|
||||
width 25px
|
||||
height 25px
|
||||
border-radius 40px
|
||||
background var(--font-color)
|
||||
color var(--card-bg)
|
||||
transition all 0.3s ease-in-out
|
||||
|
||||
#page-header #nav #nav-right .nav-button:not(.long) a.totopbtn:hover
|
||||
height 35px
|
||||
width 35px
|
||||
|
||||
#page-header #nav #nav-right .nav-button:not(.long):hover a.totopbtn
|
||||
width 35px
|
||||
height 35px
|
||||
top 0
|
||||
right 0
|
||||
|
||||
#page-header #nav .nav-button a
|
||||
height 35px
|
||||
width 35px
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
transition: background 0.3s ease-in-out, color 0s ease-in-out;
|
||||
|
||||
.nav-fixed #nav-totop #percent,
|
||||
.page #nav-totop #percent
|
||||
font-size 13px
|
||||
border-radius 35px
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
white-space nowrap
|
||||
color var(--card-bg)
|
||||
width 25px
|
||||
height 25px
|
||||
|
||||
#nav-totop #percent
|
||||
font-weight 700
|
||||
|
||||
#page-header #nav #nav-right .nav-button:hover a.totopbtn
|
||||
background var(--anzhiyu-main)
|
||||
|
||||
#nav-totop:hover .totopbtn i
|
||||
opacity 1
|
||||
color var(--anzhiyu-white)
|
||||
transition 0.3s
|
||||
|
||||
#nav-totop .totopbtn i
|
||||
position absolute
|
||||
display flex
|
||||
opacity 0
|
||||
|
||||
#nav-totop.long .totopbtn i
|
||||
font-size 1rem
|
||||
|
||||
#nav-totop:hover #percent
|
||||
opacity 0
|
||||
transform scale(1.5)
|
||||
font-weight 700
|
||||
|
||||
#page-header:not(.nav-fixed) #nav-totop
|
||||
width 0
|
||||
transform scale(0)
|
||||
transition 0.3s
|
||||
margin-left 0 !important
|
||||
overflow hidden
|
||||
transition 0.3s ease-in
|
||||
|
||||
#page-header #nav #nav-right .nav-button.long,
|
||||
#page-header #nav #nav-right .nav-button.long a.totopbtn,
|
||||
#page-header #nav #nav-right .nav-button.long a.totopbtn span
|
||||
width 70px
|
||||
|
||||
#page-header #nav #nav-right .long#nav-totop:hover
|
||||
background-color transparent
|
||||
|
||||
/* 媒体查询适配 */
|
||||
@media screen and (max-width: 1390px)
|
||||
#nav
|
||||
padding 0 1.5rem
|
||||
#nav .mask-name-container
|
||||
padding 0 1.5rem
|
||||
div#menus
|
||||
padding 0 1.5rem
|
||||
|
||||
@media screen and (min-width: 900px)
|
||||
#nav .back-home-button:hover
|
||||
box-shadow var(--anzhiyu-shadow-main)
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
.mask-name-container
|
||||
display none
|
||||
#menus
|
||||
padding 20px
|
||||
#page-header.not-top-img
|
||||
margin-bottom 10px
|
||||
#nav
|
||||
border-bottom none
|
||||
background var(--anzhiyu-background)
|
||||
#page-header #nav #nav-right div
|
||||
margin-left .5rem
|
||||
|
||||
@media screen and (min-width: 768px)
|
||||
.menus_item:hover > a.site-page
|
||||
color var(--anzhiyu-white) !important
|
||||
background var(--anzhiyu-main)
|
||||
transition 0.3s
|
||||
box-shadow var(--anzhiyu-shadow-main)
|
||||
@@ -0,0 +1,18 @@
|
||||
if hexo-config('index_img')
|
||||
#nav
|
||||
+maxWidth768()
|
||||
background: var(--anzhiyu-card-bg) !important;
|
||||
#page-header #nav #site-name, #page-header #nav #toggle-menu,#page-header:not(.not-top-img) #nav .back-home-button
|
||||
+maxWidth768()
|
||||
color: var(--font-color) !important;
|
||||
#blog_name,
|
||||
.mask-name-container,
|
||||
#menus,
|
||||
#nav-right .nav-button,
|
||||
#nav-right #toggle-menu
|
||||
a
|
||||
+maxWidth768()
|
||||
color: var(--font-color) !important;
|
||||
div#bbTimeList
|
||||
+maxWidth768()
|
||||
margin: 20px 15px !important;
|
||||
@@ -0,0 +1,350 @@
|
||||
#pagination
|
||||
.toPageGroup
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
width: auto;
|
||||
&:hover
|
||||
background: none;
|
||||
.pagination
|
||||
text-align: center
|
||||
.extend.next
|
||||
.pagination_tips_next
|
||||
margin-left: -32px;
|
||||
transition: 0.3s;
|
||||
opacity: 0;
|
||||
|
||||
.page-number
|
||||
&.current
|
||||
background: $theme-paginator-color
|
||||
color: var(--white)
|
||||
|
||||
.pagination-info
|
||||
position: absolute
|
||||
if hexo-config("post_pagination") == '3' && hexo-config("post_pagination") == '4'
|
||||
top: auto
|
||||
else
|
||||
top: 50%
|
||||
padding: 20px 40px
|
||||
width: 100%
|
||||
transform: translate(0, -50%)
|
||||
|
||||
.prev_info,
|
||||
.next_info
|
||||
@extend .limit-one-line
|
||||
color: var(--white)
|
||||
font-weight: 500
|
||||
|
||||
.next-post
|
||||
.pagination-info
|
||||
text-align: right
|
||||
|
||||
.pull-full
|
||||
width: 100% !important
|
||||
|
||||
.prev-post .label,
|
||||
.next-post .label
|
||||
color: var(--light-grey)
|
||||
text-transform: uppercase
|
||||
font-size: 90%
|
||||
|
||||
.prev-post,
|
||||
.next-post
|
||||
@extend .postImgHover
|
||||
width: 50%
|
||||
|
||||
+maxWidth768()
|
||||
width: 100%
|
||||
|
||||
a
|
||||
position: relative
|
||||
display: block
|
||||
overflow: hidden
|
||||
height: 150px
|
||||
|
||||
&.pagination-post
|
||||
overflow: hidden
|
||||
margin-top: 1.25rem
|
||||
width: 100%
|
||||
background: $dark-black
|
||||
border-radius: 10px;
|
||||
if hexo-config("post_pagination") == '3' || hexo-config("post_pagination") == '4'
|
||||
+minWidth1200()
|
||||
position: fixed;
|
||||
width: 300px;
|
||||
bottom: -100px;
|
||||
right: 60px;
|
||||
z-index: 1000;
|
||||
height: fit-content;
|
||||
transition: cubic-bezier(.42,0,.3,1.11) .3s;
|
||||
border: var(--style-border);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
z-index: 1002;
|
||||
background: 0 0;
|
||||
border-radius: 10px;
|
||||
.prev-post.pull-left
|
||||
display: none
|
||||
&:hover
|
||||
border: var(--style-border-hover);
|
||||
.next-post > a,
|
||||
.prev-post > a
|
||||
background: var(--anzhiyu-main);
|
||||
.pagination-info
|
||||
.label,
|
||||
.next_info,
|
||||
.prev_info
|
||||
color: var(--anzhiyu-white)
|
||||
&.show-window
|
||||
bottom: 20px;
|
||||
opacity: 1;
|
||||
.prev-post.pull-left,
|
||||
.prev-post.pull-full,
|
||||
.next-post.pull-right,
|
||||
.next-post.pull-full
|
||||
background: var(--anzhiyu-maskbgdeep);
|
||||
backdrop-filter: blur(5px);
|
||||
transform: translateZ(0);
|
||||
width: 100%;
|
||||
> a
|
||||
border: none;
|
||||
height: fit-content;
|
||||
padding: 0.5rem 0;
|
||||
img
|
||||
if hexo-config("post_pagination") == '3'
|
||||
display: none
|
||||
top: 0;
|
||||
.pagination-info
|
||||
text-align: left;
|
||||
position: relative;
|
||||
padding: 0.5rem 1rem;
|
||||
transform: none;
|
||||
display: flex;
|
||||
top: 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
.label
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
margin-bottom: 0.5rem;
|
||||
border-bottom: var(--style-border);
|
||||
line-height: 1;
|
||||
padding-bottom: 0.5rem;
|
||||
.next_info,
|
||||
.prev_info
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
-webkit-line-clamp: 2;
|
||||
white-space: normal;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 0;
|
||||
|
||||
+maxWidth768()
|
||||
.toPageGroup
|
||||
display: none
|
||||
.page-number
|
||||
display: none !important
|
||||
.space
|
||||
display: none !important
|
||||
.pagination
|
||||
.extend.next
|
||||
width: 100%;
|
||||
height: 3rem
|
||||
margin: 0;
|
||||
border-radius: 12px;
|
||||
line-height: 3rem
|
||||
background: var(--anzhiyu-card-bg);
|
||||
border: var(--style-border-always);
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
margin: 0 20px
|
||||
&:hover
|
||||
background: var(--anzhiyu-theme);
|
||||
color: var(--anzhiyu-white);
|
||||
i
|
||||
display: none
|
||||
.pagination_tips_next
|
||||
opacity: 1;
|
||||
margin-left: 0;
|
||||
|
||||
.extend.prev
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
border-radius: 12px;
|
||||
line-height: 3rem;
|
||||
background: var(--anzhiyu-card-bg);
|
||||
border: var(--style-border-always);
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
margin: 0 20px
|
||||
i
|
||||
display: none
|
||||
.pagination_tips_prev
|
||||
opacity: 1;
|
||||
margin-right: 0
|
||||
.layout
|
||||
& > .recent-posts
|
||||
.pagination
|
||||
& > *:not(pangu)
|
||||
display: inline-block
|
||||
width: w = 2.5em
|
||||
height: w
|
||||
line-height: w
|
||||
|
||||
& > *:not(.space):not(pangu)
|
||||
@extend .cardHover
|
||||
transition: 0s;
|
||||
|
||||
& > div:not(.recent-posts)
|
||||
.pagination
|
||||
.page-number
|
||||
display: inline-block
|
||||
margin: 0 4px
|
||||
min-width: w = 2.5em
|
||||
height: w
|
||||
text-align: center
|
||||
line-height: w
|
||||
cursor: pointer
|
||||
|
||||
// 分页样式
|
||||
@media screen and (min-width: 1200px)
|
||||
#pagination a.extend.next:hover,
|
||||
#pagination a.extend.prev:hover
|
||||
transform: scale(1.03)
|
||||
|
||||
+minWidth768()
|
||||
#pagination .page-number.current:hover
|
||||
background: var(--anzhiyu-theme)
|
||||
box-shadow: var(--anzhiyu-shadow-theme)
|
||||
color: var(--anzhiyu-white)
|
||||
|
||||
#pagination a.extend.next:hover,
|
||||
#pagination a.extend.prev:hover
|
||||
color: var(--anzhiyu-theme)
|
||||
border: var(--style-border-hover)
|
||||
transform: scale(1.03)
|
||||
|
||||
nav#pagination
|
||||
overflow: visible
|
||||
|
||||
#pagination .page-number.current
|
||||
background: var(--anzhiyu-theme)
|
||||
border: var(--style-border-hover)
|
||||
box-shadow: var(--anzhiyu-shadow-theme)
|
||||
|
||||
#pagination a.extend.next
|
||||
overflow: hidden
|
||||
height: 2.5em
|
||||
line-height: 2.5em
|
||||
|
||||
#pagination a.extend.next,
|
||||
#pagination a.extend.prev
|
||||
width: 5rem !important
|
||||
line-height: 1.9rem !important
|
||||
border-radius: 8px !important
|
||||
background: var(--anzhiyu-card-bg)
|
||||
box-shadow: var(--anzhiyu-shadow-border)
|
||||
border: var(--style-border)
|
||||
display: flex !important
|
||||
align-items: center
|
||||
justify-content: center
|
||||
overflow: hidden
|
||||
transition: all 0.3s, color 0s
|
||||
position: absolute
|
||||
|
||||
#pagination .page-number
|
||||
background: var(--anzhiyu-card-bg)
|
||||
border-radius: 8px !important
|
||||
margin: 0 0.3rem
|
||||
box-shadow: var(--anzhiyu-shadow-border)
|
||||
border: var(--style-border)
|
||||
transition: 0.3s
|
||||
|
||||
#pagination .page-number:hover
|
||||
color: var(--anzhiyu-theme)
|
||||
border: var(--style-border-hover)
|
||||
box-shadow: var(--anzhiyu-shadow-main)
|
||||
|
||||
#pagination .pagination
|
||||
position: relative
|
||||
display: flex
|
||||
justify-content: center
|
||||
|
||||
#pagination a.extend.next:hover .pagination_tips_next
|
||||
margin-left: 2px
|
||||
opacity: 1
|
||||
white-space: nowrap
|
||||
|
||||
#pagination a.extend.prev .pagination_tips_prev
|
||||
margin-right: -32px
|
||||
transition: 0.3s
|
||||
opacity: 0
|
||||
|
||||
#pagination a.extend.prev:hover .pagination_tips_prev
|
||||
margin-right: 2px
|
||||
opacity: 1
|
||||
white-space: nowrap
|
||||
|
||||
a.extend.prev
|
||||
left: 0
|
||||
|
||||
a.extend.next
|
||||
right: 0
|
||||
|
||||
#pagination
|
||||
overflow: hidden
|
||||
margin-top: 1rem
|
||||
width: 100%
|
||||
|
||||
+maxWidth768()
|
||||
#site-name
|
||||
padding: 0 !important
|
||||
|
||||
#pagination .pagination input
|
||||
width: 2.5em
|
||||
height: 2.5em
|
||||
border-radius: 8px
|
||||
border: var(--style-border-always)
|
||||
transition: 0.3s
|
||||
outline-style: none
|
||||
font-size: 16px
|
||||
padding-left: 12px
|
||||
|
||||
a#toPageButton
|
||||
display: flex
|
||||
position: absolute
|
||||
width: 2.5em
|
||||
height: 2.5em
|
||||
right: 0px
|
||||
top: 0px
|
||||
border-radius: 8px
|
||||
justify-content: center
|
||||
align-items: center
|
||||
transition: 0.3s
|
||||
background: var(--anzhiyu-card-bg)
|
||||
border: var(--style-border-always)
|
||||
cursor: pointer
|
||||
|
||||
#pagination .pagination .toPageGroup:hover input,
|
||||
#pagination .pagination .toPageGroup input:focus
|
||||
border: var(--style-border-hover-always)
|
||||
outline-style: none
|
||||
width: 100px
|
||||
|
||||
#pagination .toPageGroup:hover a#toPageButton,
|
||||
#pagination .toPageGroup:focus-within a#toPageButton
|
||||
width: 30px
|
||||
height: 30px
|
||||
right: 4px
|
||||
top: 5px
|
||||
background: var(--anzhiyu-secondbg)
|
||||
border: 1px solid var(--anzhiyu-none)
|
||||
border-radius: 4px
|
||||
@@ -0,0 +1,547 @@
|
||||
beautify()
|
||||
headStyle(fontsize)
|
||||
&:before
|
||||
margin-left: unit((-(fontsize + 6)), 'px')
|
||||
font-size: unit(fontsize, 'px')
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
color: $light-blue
|
||||
|
||||
h1
|
||||
headStyle(20)
|
||||
|
||||
h2
|
||||
headStyle(18)
|
||||
|
||||
h3
|
||||
headStyle(16)
|
||||
|
||||
h4
|
||||
headStyle(14)
|
||||
|
||||
h5
|
||||
headStyle(12)
|
||||
|
||||
h6
|
||||
headStyle(12)
|
||||
|
||||
ol,
|
||||
ul
|
||||
p
|
||||
margin: 0 0 8px
|
||||
|
||||
li
|
||||
&::marker
|
||||
color: $light-blue
|
||||
font-weight: 600
|
||||
font-size: 1.05em
|
||||
|
||||
&:hover
|
||||
&::marker
|
||||
color: var(--pseudo-hover)
|
||||
|
||||
blockquote {
|
||||
border: var(--style-border-always);
|
||||
background-color: var(--anzhiyu-secondbg);
|
||||
color: var(--anzhiyu-secondtext);
|
||||
border-radius: 8px;
|
||||
margin: 1rem 0;
|
||||
padding: 0.5rem 0.8rem;
|
||||
}
|
||||
|
||||
#article-container
|
||||
word-wrap: break-word
|
||||
overflow-wrap: break-word
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
.post-content
|
||||
line-height: 1.6;
|
||||
border-top: 1px dashed var(--anzhiyu-theme-op);
|
||||
padding-top: 1.5rem;
|
||||
padding-left: 0;
|
||||
|
||||
a
|
||||
color: $theme-link-color
|
||||
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
|
||||
img
|
||||
display: block
|
||||
margin: 0 auto 20px
|
||||
max-width: 100%
|
||||
transition: .3s
|
||||
border-radius: 8px
|
||||
|
||||
p
|
||||
margin: 0 0 16px
|
||||
|
||||
iframe
|
||||
margin: 0 0 20px
|
||||
border-radius: 12px
|
||||
|
||||
kbd
|
||||
margin: 0 3px
|
||||
padding: 3px 5px
|
||||
border: 1px solid #b4b4b4
|
||||
border-radius: 3px
|
||||
background-color: #f8f8f8
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 2px 1px 0 rgba(255, 255, 255, .6) inset
|
||||
color: #34495e
|
||||
white-space: nowrap
|
||||
font-weight: 600
|
||||
font-size: .9em
|
||||
font-family: Monaco, 'Ubuntu Mono', monospace
|
||||
line-height: 1em
|
||||
h1
|
||||
.headerlink
|
||||
float: right;
|
||||
opacity: 0.08;
|
||||
position: relative;
|
||||
padding: 0px;
|
||||
border: none;
|
||||
line-height: 2;
|
||||
font-size: 2rem;
|
||||
border-radius: 8px !important;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
&::before
|
||||
font-size: 2rem;
|
||||
> :first-child:is(h2)
|
||||
border-top: none;
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
h2
|
||||
.headerlink
|
||||
float: right;
|
||||
opacity: 0.08;
|
||||
position: relative;
|
||||
padding: 0px;
|
||||
border: none;
|
||||
line-height: 2;
|
||||
font-size: 1.8rem;
|
||||
border-radius: 8px !important;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
&::before
|
||||
font-size: 1.8rem;
|
||||
h3,h4,h5,h6
|
||||
.headerlink
|
||||
float: right;
|
||||
opacity: 0.08;
|
||||
position: relative;
|
||||
padding: 0px;
|
||||
border: none;
|
||||
line-height: 2;
|
||||
font-size: 1.3rem;
|
||||
border-radius: 8px !important;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
&::before
|
||||
font-size: 1.3rem;
|
||||
a.headerlink
|
||||
&::before
|
||||
if hexo-config('icons.fontawesome')
|
||||
@extend .fontawesomeIcon
|
||||
else
|
||||
@extend .anzhiyufont
|
||||
content: '\f0c1'
|
||||
float: right
|
||||
color: var(--headline-presudo)
|
||||
transition: all .3s
|
||||
|
||||
&:hover
|
||||
&:after
|
||||
color: var(--pseudo-hover)
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
&:hover
|
||||
a.headerlink
|
||||
&:after
|
||||
opacity: 1
|
||||
|
||||
ol,
|
||||
ul
|
||||
ol,
|
||||
ul
|
||||
padding-left: 20px
|
||||
|
||||
li
|
||||
margin: 4px 0
|
||||
|
||||
p
|
||||
margin: 0 0 8px
|
||||
|
||||
if hexo-config('beautify.enable')
|
||||
if hexo-config('beautify.field') == 'site'
|
||||
beautify()
|
||||
else if hexo-config('beautify.field') == 'post'
|
||||
&.post-content
|
||||
beautify()
|
||||
|
||||
> :last-child
|
||||
margin-bottom: 0 !important
|
||||
|
||||
#post
|
||||
+maxWidth768()
|
||||
background: var(--anzhiyu-background) !important;
|
||||
border: none;
|
||||
#article-container
|
||||
h2
|
||||
if hexo-config("h2Divider")
|
||||
border-top: 1px dashed var(--anzhiyu-theme-op);
|
||||
padding-top: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
.post_share
|
||||
margin: 8px 0 0
|
||||
width: fit-content
|
||||
min-width 205px
|
||||
.tag_share
|
||||
display: flex
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
.post-meta
|
||||
&__box
|
||||
display: flex
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
&__tag-list,&__category-list
|
||||
display: flex
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__tags,&__categoryes
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
padding: 4px 12px
|
||||
width: fit-content
|
||||
border-radius: 8px
|
||||
font-size: .85em
|
||||
transition: all .2s ease-in-out
|
||||
+maxWidth768()
|
||||
margin: 4px 8px 4px 0 !important
|
||||
&__tags
|
||||
margin: 0px 8px 0px 0
|
||||
&__categoryes
|
||||
margin: 0px 8px 4px 0
|
||||
&:hover
|
||||
background: $light-blue
|
||||
color: var(--white)
|
||||
|
||||
|
||||
|
||||
.social-share
|
||||
font-size: .85em
|
||||
|
||||
.social-share-icon
|
||||
margin: 0 4px
|
||||
width: w = 1.85em
|
||||
height: w
|
||||
font-size: 1.2em
|
||||
line-height: w
|
||||
|
||||
.post-copyright
|
||||
background: var(--anzhiyu-secondbg);
|
||||
padding: 1rem 1.3rem;
|
||||
border: var(--style-border);
|
||||
border-width: 1px;
|
||||
transition: 0.3s;
|
||||
position: relative;
|
||||
margin: 80px 0 30px;
|
||||
border-radius: 12px;
|
||||
.copyright-cc-box
|
||||
position: absolute;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
pointer-events: none;
|
||||
&__author_box
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-top: 1.5rem;
|
||||
.post-copyright__author_img
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
margin: auto;
|
||||
border-radius: 66px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: calc(50% - 33px);
|
||||
top: -33px;
|
||||
border: var(--style-border-always);
|
||||
box-shadow: var(--anzhiyu-shadow-main);
|
||||
&:hover
|
||||
img.post-copyright__author_img_back
|
||||
z-index: 21;
|
||||
transform: translateY(0px);
|
||||
if hexo-config('post_copyright.avatarSinks')
|
||||
img.post-copyright__author_img_front
|
||||
transform: translateY(3px);
|
||||
|
||||
img.post-copyright__author_img_front
|
||||
z-index: 20;
|
||||
transition: .3s
|
||||
|
||||
img.post-copyright__author_img_back
|
||||
border-radius: 66px;
|
||||
z-index: 10;
|
||||
transition: .3s
|
||||
img
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
.post-copyright__author_name
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
line-height: 1;
|
||||
.post-copyright__author_desc
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: var(--anzhiyu-secondtext);
|
||||
margin-top: 4px;
|
||||
|
||||
&__post__info
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 0.2rem;
|
||||
&__original,&__reprint
|
||||
background: var(--anzhiyu-main);
|
||||
color: var(--anzhiyu-wihite-font);
|
||||
padding: 0.2rem 1rem;
|
||||
font-size: .8rem;
|
||||
border-radius: 8px;
|
||||
margin-right: 0.5rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
|
||||
.anzhiyufont.anzhiyu-icon-copyright
|
||||
position: absolute
|
||||
font-size: 1.3em
|
||||
top: -71px;
|
||||
right: -20px;
|
||||
font-size: 8.3em;
|
||||
z-index: -1;
|
||||
color: var(--anzhiyu-main)
|
||||
@media screen and (min-width: 1365px)
|
||||
z-index: 0;
|
||||
|
||||
&-title
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 500
|
||||
max-width: 70%;
|
||||
span
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
color: var(--anzhiyu-fontcolor)
|
||||
.post-copyright__notice
|
||||
font-size: 12px;
|
||||
.post-copyright-info
|
||||
padding-left: 0;
|
||||
color: var(--anzhiyu-secondtext);
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
text-align: center;
|
||||
+maxWidth768()
|
||||
-webkit-line-clamp: 2;
|
||||
a
|
||||
&:hover
|
||||
color: var(--anzhiyu-main)
|
||||
|
||||
.post-outdate-notice
|
||||
position: relative
|
||||
margin: 0 0 20px
|
||||
padding: .5em 1.2em
|
||||
border-radius: 3px
|
||||
background-color: $noticeOutdate-bg
|
||||
color: $noticeOutdate-color
|
||||
|
||||
if hexo-config('noticeOutdate.style') == 'flat'
|
||||
padding: .5em 1em .5em 2.6em
|
||||
border-left: 5px solid $noticeOutdate-border
|
||||
|
||||
&:before
|
||||
if hexo-config('icons.fontawesome')
|
||||
@extend .fontawesomeIcon
|
||||
content: '\f071'
|
||||
else
|
||||
@extend .anzhiyufont
|
||||
content: '\e66f'
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: .9em
|
||||
color: $noticeOutdate-border
|
||||
transform: translateY(-50%)
|
||||
|
||||
.ads-wrap
|
||||
margin: 40px 0
|
||||
|
||||
#content-inner.layout #article-container
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
padding-left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row-reverse;
|
||||
.post-ai-description
|
||||
background: var(--anzhiyu-secondbg);
|
||||
border-radius: 12px;
|
||||
padding: 12px 16px;
|
||||
line-height: 1.3;
|
||||
border: var(--style-border-always);
|
||||
margin-bottom: 10px;
|
||||
|
||||
.ai-title
|
||||
display: flex;
|
||||
color: var(--font-color);
|
||||
border-radius: 8px;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
i
|
||||
font-weight: 800;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
height 20px
|
||||
.anzhiyufont.anzhiyu-icon-circle-dot
|
||||
margin-left: auto;
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
opacity: 0;
|
||||
&:active
|
||||
transform: scale(0.97);
|
||||
.anzhiyufont.anzhiyu-icon-arrow-rotate-right
|
||||
font-size: 14px;
|
||||
margin-left: 4px
|
||||
cursor pointer
|
||||
|
||||
.ai-title-text
|
||||
font-weight: bold;
|
||||
margin-left: 8px;
|
||||
|
||||
#ai-tag
|
||||
font-size: 12px;
|
||||
background-color: var(--anzhiyu-lighttext);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 4px;
|
||||
line-height: 1;
|
||||
padding: 4px 5px;
|
||||
cursor pointer
|
||||
#ai-Toggle
|
||||
font-size: 12px;
|
||||
background: var(--anzhiyu-lighttext);
|
||||
color: var(--anzhiyu-card-bg);
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
margin-left: 6px;
|
||||
transform: scale(0.8);
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
font-weight: bold;
|
||||
&:hover
|
||||
background: var(--anzhiyu-fontcolor);
|
||||
color: var(--anzhiyu-card-bg);
|
||||
|
||||
|
||||
#go-tianli-blog
|
||||
display: none
|
||||
.ai-explanation
|
||||
margin-top: 12px;
|
||||
padding: 8px 12px;
|
||||
background: var(--anzhiyu-card-bg);
|
||||
border-radius: 8px;
|
||||
border: var(--style-border-always);
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
|
||||
.ai-cursor
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
background: #333;
|
||||
height: 16px;
|
||||
margin-bottom: -2px;
|
||||
opacity: 0.95;
|
||||
margin-left: 3px;
|
||||
transition: all 0.3s;
|
||||
|
||||
[data-theme="dark"] .ai-cursor
|
||||
background: rgb(255, 255, 255, 0.9);
|
||||
|
||||
.ai-btn-box
|
||||
font-size: 15.5px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.ai-btn-item
|
||||
padding: 5px 10px;
|
||||
margin: 10px 16px 0px 5px;
|
||||
width: fit-content;
|
||||
line-height: 1;
|
||||
background: var(--anzhiyu-main)
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
user-select: none;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
&:hover
|
||||
background: var(--anzhiyu-theme);
|
||||
|
||||
.ai-recommend
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
.ai-recommend-item
|
||||
width: calc(50% - 20px);
|
||||
margin: 10px;
|
||||
background: var(--anzhiyu-secondbg);
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
cursor pointer
|
||||
transition: .3s;
|
||||
animation: slide-in 0.6s 0.1s backwards;
|
||||
span.index
|
||||
padding: 4px
|
||||
&:hover
|
||||
color: var(--anzhiyu-white);
|
||||
background: var(--anzhiyu-theme);
|
||||
a
|
||||
color: var(--anzhiyu-white);
|
||||
|
||||
+maxWidth768()
|
||||
.ai-btn-box
|
||||
justify-content: center;
|
||||
.ai-recommend .ai-recommend-item
|
||||
width: 100%;
|
||||
@@ -0,0 +1,110 @@
|
||||
if hexo-config('ptool.enable') == true
|
||||
.post-tools
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
-webkit-user-select: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.post-tools-left
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
text-overflow: ellipsis;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.5rem;
|
||||
justify-content: center;
|
||||
.rewardLeftButton, .shareRight
|
||||
display: flex
|
||||
margin: 10px
|
||||
+maxWidth768()
|
||||
margin-top: 1rem;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
> div
|
||||
margin: 8px;
|
||||
|
||||
.post-tools-right
|
||||
padding-right: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
+maxWidth768()
|
||||
flex-direction: column;
|
||||
.share-link
|
||||
margin-left: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
&.mobile:hover
|
||||
.share-button
|
||||
background: var(--anzhiyu-green);
|
||||
border-color: var(--anzhiyu-green);
|
||||
box-shadow: var(--anzhiyu-shadow-green);
|
||||
color: var(--anzhiyu-white);
|
||||
.share-main
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
|
||||
|
||||
.share-qrcode
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.share-button
|
||||
background: var(--anzhiyu-card-bg);
|
||||
border: var(--style-border);
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
width: 56px;
|
||||
height: 40px;
|
||||
&:hover
|
||||
background: var(--anzhiyu-main);
|
||||
border-color: var(--anzhiyu-main);
|
||||
color: var(--anzhiyu-white);
|
||||
transition: 0.3s;
|
||||
box-shadow: var(--anzhiyu-shadow-blue);
|
||||
|
||||
i
|
||||
line-height: 38px;
|
||||
font-size: 1.1rem;
|
||||
.share-main
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
z-index: 100;
|
||||
padding-bottom: 15px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: 0.3s;
|
||||
transform: translateY(8px);
|
||||
.share-main-all
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
background: var(--anzhiyu-background);
|
||||
animation: donate_effcet 0.3s 0.1s ease both;
|
||||
flex-direction: column;
|
||||
border: var(--style-border-always);
|
||||
#qrcode
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
min-width: 150px;
|
||||
min-height: 150px;
|
||||
background: var(--anzhiyu-white);
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
border: var(--style-border-always);
|
||||
.reward-dec
|
||||
font-size: 12px;
|
||||
|
||||
if hexo-config('ptool.enable') == true && !hexo-config('ptool.mode')
|
||||
.post-tools .post-tools-left > div
|
||||
margin: 0
|
||||
.post-tools .post-tools-left
|
||||
width auto
|
||||
if hexo-config('ptool.enable') == true && hexo-config('ptool.categories')
|
||||
#post .tag_share
|
||||
margin-bottom: 2rem
|
||||
flex-direction: column;
|
||||
@@ -0,0 +1,43 @@
|
||||
.relatedPosts
|
||||
margin-top: 1.25rem
|
||||
|
||||
& > .headline
|
||||
margin-bottom: 5px
|
||||
font-weight: 700
|
||||
font-size: 1.43em
|
||||
|
||||
& > .relatedPosts-list
|
||||
& > div
|
||||
position: relative
|
||||
display: inline-block
|
||||
overflow: hidden
|
||||
margin: 3px
|
||||
width: calc(33.333% - 6px)
|
||||
height: 200px
|
||||
background: $dark-black
|
||||
vertical-align: bottom
|
||||
@extend .postImgHover
|
||||
|
||||
+maxWidth768()
|
||||
margin: 2px
|
||||
width: calc(50% - 4px)
|
||||
height: 150px
|
||||
|
||||
+maxWidth600()
|
||||
width: calc(100% - 4px)
|
||||
|
||||
.content
|
||||
position: absolute
|
||||
top: 50%
|
||||
padding: 0 20px
|
||||
width: 100%
|
||||
transform: translate(0, -50%)
|
||||
|
||||
.date
|
||||
color: var(--light-grey)
|
||||
font-size: 90%
|
||||
|
||||
.title
|
||||
@extend .limit-more-line
|
||||
color: var(--white)
|
||||
-webkit-line-clamp: 2
|
||||
@@ -0,0 +1,145 @@
|
||||
.post-reward
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin-top: 0rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
&:hover
|
||||
.reward-button
|
||||
color: var(--anzhiyu-white);
|
||||
background: var(--anzhiyu-theme);
|
||||
box-shadow: none;
|
||||
|
||||
.reward-main
|
||||
display: flex !important;
|
||||
justify-content: left;
|
||||
|
||||
|
||||
& > *
|
||||
pointer-events: auto
|
||||
|
||||
.reward-button
|
||||
border-radius: 8px
|
||||
background: var(--anzhiyu-red);
|
||||
color: var(--anzhiyu-white);
|
||||
padding: 0;
|
||||
margin-right: 0.5rem;
|
||||
width: 126px;
|
||||
height: 40px;
|
||||
line-height: 39px;
|
||||
box-shadow: var(--anzhiyu-shadow-red);
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
transition: all 0.4s ease 0s;
|
||||
|
||||
.reward-main
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
if hexo-config('ptool.enable') == true && hexo-config('ptool.mode')
|
||||
left: 0;
|
||||
else
|
||||
left: -70%;
|
||||
z-index: 90;
|
||||
display: none;
|
||||
padding: 0px 0px 15px;
|
||||
width: 100%;
|
||||
.reward-all
|
||||
border-radius: 12px;
|
||||
background: var(--anzhiyu-background);
|
||||
border: var(--style-border-always);
|
||||
padding: 0.8rem;
|
||||
display: flex;
|
||||
margin: 0px;
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
&::before
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
content: "";
|
||||
|
||||
.reward-title
|
||||
font-weight: bold;
|
||||
color: var(--anzhiyu-red);
|
||||
.reward-group
|
||||
display: flex;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0;
|
||||
.reward-item
|
||||
display: inline-block;
|
||||
padding: 0px 8px;
|
||||
list-style-type: none;
|
||||
vertical-align: top;
|
||||
.post-qr-code-img
|
||||
box-shadow: var(--anzhiyu-shadow-lightblack);
|
||||
border-radius: 12px;
|
||||
border: var(--style-border-always);
|
||||
.post-qr-code-desc
|
||||
padding-top: 0rem;
|
||||
margin-top: -8px;
|
||||
margin-bottom: 8px;
|
||||
img
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
max-width: fit-content
|
||||
&:first-child img
|
||||
border-color: var(--anzhiyu-green);
|
||||
&:last-child img
|
||||
border-color: var(--anzhiyu-blue);
|
||||
|
||||
.reward-main-btn
|
||||
background: var(--anzhiyu-secondbg);
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 12px;
|
||||
padding: 4px 0;
|
||||
border: var(--style-border-always);
|
||||
margin: 8px;
|
||||
width: 100%;
|
||||
&:hover
|
||||
color: var(--anzhiyu-white);
|
||||
background: var(--anzhiyu-red);
|
||||
box-shadow: var(--anzhiyu-shadow-red);
|
||||
.reward-text
|
||||
margin-bottom: 0rem;
|
||||
font-weight: bold;
|
||||
.reward-dec
|
||||
font-size: 12px;
|
||||
.reward-link.mode
|
||||
background: var(--anzhiyu-green);
|
||||
color: var(--anzhiyu-white);
|
||||
padding: 0;
|
||||
width: 173px;
|
||||
height: 40px;
|
||||
line-height: 39px;
|
||||
box-shadow: var(--anzhiyu-shadow-green);
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
transition: 0.3s;
|
||||
&:hover
|
||||
background: var(--anzhiyu-theme);
|
||||
box-shadow: none;
|
||||
a
|
||||
color: var(--anzhiyu-white);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
i
|
||||
margin-right: 4px;
|
||||
|
||||
#quit-box
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
z-index: 101;
|
||||
margin: 0;
|
||||
@@ -0,0 +1,89 @@
|
||||
/* rightMenu右键菜单 */
|
||||
#rightMenu {
|
||||
display: none;
|
||||
position: fixed;
|
||||
padding: 0 0.25rem;
|
||||
width: 11rem;
|
||||
height: fit-content;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
background-color: var(--anzhiyu-card-bg);
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
border-radius: 12px;
|
||||
z-index: 10002;
|
||||
border: var(--style-border);
|
||||
user-select: none;
|
||||
}
|
||||
#rightMenu a {
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
}
|
||||
#rightMenu:hover {
|
||||
border: var(--style-border-hover);
|
||||
box-shadow: var(--anzhiyu-shadow-theme);
|
||||
}
|
||||
#rightMenu .rightMenu-group {
|
||||
padding: 0.35rem 0.3rem;
|
||||
}
|
||||
#rightMenu .rightMenu-group:not(:nth-last-child(1)) {
|
||||
border-bottom: 2px dashed var(--anzhiyu-theme-op);
|
||||
}
|
||||
#rightMenu .rightMenu-group.rightMenu-small {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#rightMenu .rightMenu-group .rightMenu-item {
|
||||
border-radius: 8px;
|
||||
transition: 0.1s;
|
||||
cursor: pointer;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
#rightMenu .rightMenu-line .rightMenu-item {
|
||||
margin: 0.25rem 0;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#rightMenu .rightMenu-group .rightMenu-item:hover {
|
||||
background-color: var(--anzhiyu-main);
|
||||
color: var(--anzhiyu-white);
|
||||
box-shadow: var(--anzhiyu-shadow-theme);
|
||||
}
|
||||
|
||||
#rightMenu .rightMenu-group .rightMenu-item i {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
padding: 0 0.25rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
#rightMenu .rightMenu-line .rightMenu-item i {
|
||||
margin: 0 0.5rem 0 0.25rem;
|
||||
}
|
||||
#rightMenu .rightMenu-group .rightMenu-item span {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
#rightmenu-mask {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: none;
|
||||
/* background: var(--anzhiyu-maskbg); */
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
z-index: 10001;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
:root {
|
||||
--style-border: 1px solid var(--anzhiyu-card-border);
|
||||
--style-border-hover: 1px solid var(--anzhiyu-theme);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
#rightside
|
||||
position: fixed
|
||||
right: -48px
|
||||
bottom: $rightside-bottom
|
||||
z-index: 100
|
||||
opacity: 0
|
||||
transition: all .5s
|
||||
+maxWidth768()
|
||||
#switch-commentBarrage
|
||||
display: none
|
||||
|
||||
i
|
||||
font-size: 1rem
|
||||
|
||||
#rightside-config-hide
|
||||
height: 0
|
||||
opacity: 0
|
||||
transition: transform .4s
|
||||
transform: translate(45px, 0)
|
||||
|
||||
&.show
|
||||
height: auto
|
||||
opacity: 1
|
||||
transform: translate(0, 0)
|
||||
|
||||
&.status
|
||||
height: auto
|
||||
opacity: 1
|
||||
|
||||
& > div
|
||||
& > button,
|
||||
& > a
|
||||
display: block
|
||||
margin-bottom: 5px
|
||||
width: w = 35px
|
||||
height: w
|
||||
border-radius: 5px
|
||||
background-color: var(--btn-bg)
|
||||
color: var(--btn-color)
|
||||
text-align: center
|
||||
font-size: 16px
|
||||
line-height: w
|
||||
|
||||
&:hover
|
||||
background-color: var(--btn-hover-color)
|
||||
|
||||
#mobile-toc-button
|
||||
display: none
|
||||
|
||||
+maxWidth900()
|
||||
display: block
|
||||
|
||||
+maxWidth900()
|
||||
#hide-aside-btn
|
||||
display: none
|
||||
@@ -0,0 +1,57 @@
|
||||
#keyboard-tips
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
left: 20px;
|
||||
z-index: 999;
|
||||
background: var(--anzhiyu-maskbgdeep);
|
||||
border-radius: 12px;
|
||||
border: var(--style-border);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
transform: translateZ(0);
|
||||
pointer-events: none;
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
opacity: 0;
|
||||
transition: 0.3s;
|
||||
+maxWidth768()
|
||||
display: none !important
|
||||
&.show
|
||||
opacity: 1;
|
||||
transition: 0.1s;
|
||||
.keyboardTitle
|
||||
font-size: 12px;
|
||||
color: var(--anzhiyu-secondtext);
|
||||
line-height: 1;
|
||||
.keybordList
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 8px;
|
||||
.keybordItem
|
||||
display: flex;
|
||||
margin-top: 4px;
|
||||
.keyGroup
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 90px;
|
||||
.key
|
||||
padding: 0.2em 0.4em;
|
||||
font-family: inherit;
|
||||
background-color: var(--anzhiyu-card-bg);
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
border: var(--style-border);
|
||||
border-color: var(--anzhiyu-secondtext);
|
||||
border-bottom: 2px solid var(--anzhiyu-secondtext);
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
border-radius: 0.25rem;
|
||||
overflow-wrap: break-word;
|
||||
overflow-x: auto;
|
||||
font-weight: 500;
|
||||
font-size: .875em;
|
||||
margin-right: 4px;
|
||||
vertical-align: baseline;
|
||||
line-height: 1;
|
||||
height: 24px;
|
||||
|
||||
@@ -0,0 +1,412 @@
|
||||
#menu-mask
|
||||
position: fixed
|
||||
z-index: 102
|
||||
display: none
|
||||
width: 100%
|
||||
height: 100%
|
||||
background: var(--anzhiyu-maskbg);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
transform: translateZ(0);
|
||||
animation: .6s ease 0s 1 normal none running to_show;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
|
||||
#sidebar
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
#sidebar-menus
|
||||
position: fixed
|
||||
top: 0;
|
||||
right: -300px;
|
||||
z-index: 103;
|
||||
overflow: hidden auto;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
background: var(--anzhiyu-background);
|
||||
transition: all .5s ease 0s;
|
||||
padding-top: 30px;
|
||||
border-left: var(--style-border-always);
|
||||
.sidebar-menu-item a.menu-child span
|
||||
margin-left: 10px;
|
||||
.back-menu-list-groups
|
||||
padding: 0 16px;
|
||||
.back-menu-list-title
|
||||
font-size: 12px;
|
||||
color: var(--anzhiyu-secondtext);
|
||||
.back-menu-list
|
||||
width: calc(100% + 16px);
|
||||
justify-content: flex-start;
|
||||
margin: 0 -8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
.back-menu-item
|
||||
width: calc(50% - 16px);
|
||||
background: var(--anzhiyu-card-bg);
|
||||
border: var(--style-border-always);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 4px 8px;
|
||||
padding: 4px 8px;
|
||||
transition: .3s;
|
||||
|
||||
.sidebar-menu-item
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 16px;
|
||||
margin-bottom: 6px;
|
||||
a.darkmode_switchbutton
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
font-size: .9rem;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
width: 100%;
|
||||
background: var(--anzhiyu-card-bg);
|
||||
border-radius: 8px;
|
||||
border: var(--style-border-always);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
|
||||
span.sidebar-menu-item-title
|
||||
font-size: 12px;
|
||||
color: var(--anzhiyu-secondtext);
|
||||
margin-left: 16px;
|
||||
.card-tag-cloud
|
||||
padding: 0 11px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 60px;
|
||||
a
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
padding: 2px 8px 2px 12px;
|
||||
margin: 4px;
|
||||
border-radius: 8px;
|
||||
border: var(--style-border-always);
|
||||
background: var(--anzhiyu-card-bg);
|
||||
sup
|
||||
opacity: .6;
|
||||
margin-left: 4px;
|
||||
|
||||
|
||||
&.open
|
||||
transform: translate3d(-100%,0,0);
|
||||
|
||||
.sidebar-site-data
|
||||
padding: 0 10px
|
||||
|
||||
hr
|
||||
margin: 20px auto
|
||||
|
||||
.menus_items
|
||||
padding: 0 10px
|
||||
|
||||
.site-page
|
||||
@extend .limit-one-line
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
position: relative
|
||||
padding-left: .3rem
|
||||
color: var(--anzhiyu-fontcolor)
|
||||
|
||||
i:first-child
|
||||
width: 15%
|
||||
text-align: left
|
||||
max-height: 20px;
|
||||
font-size: 16px;
|
||||
|
||||
&.group
|
||||
& > i:last-child
|
||||
position: absolute
|
||||
top: .78em
|
||||
right: 18px
|
||||
transition: transform .3s
|
||||
|
||||
&.hide
|
||||
& > i:last-child
|
||||
transform: rotate(90deg)
|
||||
|
||||
& + .menus_item_child
|
||||
display: none
|
||||
.menus_item_child
|
||||
margin: 0
|
||||
list-style: none
|
||||
.site-page.child
|
||||
background: var(--anzhiyu-card-bg);
|
||||
|
||||
/* tags样式 */
|
||||
#aside-content .card-tag-cloud a {
|
||||
border-radius: var(--anzhiyu-border-radius);
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
#aside-content .card-tag-cloud a:hover {
|
||||
background: var(--anzhiyu-theme);
|
||||
color: var(--anzhiyu-white) !important;
|
||||
box-shadow: var(--anzhiyu-shadow-theme);
|
||||
}
|
||||
@media screen and (min-width: 1200px) {
|
||||
#aside-content .card-tag-cloud a:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
}
|
||||
#aside-content .card-tag-cloud a sup {
|
||||
opacity: 0.4;
|
||||
margin-left: 2px;
|
||||
}
|
||||
/* 归档样式 */
|
||||
span.card-archive-list-count {
|
||||
width: auto;
|
||||
text-align: left;
|
||||
font-size: 1.5rem;
|
||||
line-height: 0.9;
|
||||
font-weight: 700;
|
||||
}
|
||||
.card-archive-list-count-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
}
|
||||
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child,
|
||||
#aside-content .card-categories ul.card-category-list > .card-category-list-item a span:last-child {
|
||||
width: fit-content;
|
||||
margin-left: 4px;
|
||||
}
|
||||
span.card-archive-list-count {
|
||||
width: auto;
|
||||
text-align: left;
|
||||
font-size: 1.1rem;
|
||||
line-height: 0.9;
|
||||
font-weight: 700;
|
||||
}
|
||||
.card-archive-list-date,
|
||||
span.card-category-list-name {
|
||||
font-size: 13px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
li.card-archive-list-item,
|
||||
li.card-category-list-item {
|
||||
width: 100%;
|
||||
flex: 0 0 48%;
|
||||
}
|
||||
|
||||
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover,
|
||||
#aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
|
||||
color: var(--anzhiyu-white);
|
||||
background-color: var(--anzhiyu-theme);
|
||||
border-radius: var(--anzhiyu-border-radius);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:active,
|
||||
#aside-content .card-categories ul.card-category-list > .card-category-list-item a:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
}
|
||||
|
||||
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a,
|
||||
#aside-content .card-categories ul.card-category-list > .card-category-list-item a {
|
||||
border-radius: var(--anzhiyu-border-radius);
|
||||
margin: 4px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: space-between;
|
||||
border: var(--style-border);
|
||||
}
|
||||
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child,
|
||||
#aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child {
|
||||
width: auto;
|
||||
flex: inherit;
|
||||
}
|
||||
#aside-content .card-archives ul.card-archive-list,
|
||||
#aside-content .card-categories ul.card-category-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
/* 个人card */
|
||||
#aside-content .card-info #card-info-btn {
|
||||
border-radius: var(--anzhiyu-border-radius);
|
||||
}
|
||||
|
||||
/* 最近文章样式修改 */
|
||||
#aside-content .aside-list > .aside-list-item .content > time {
|
||||
display: none;
|
||||
}
|
||||
#aside-content .aside-list > .aside-list-item .content > .title {
|
||||
-webkit-line-clamp: 3;
|
||||
font-weight: 700;
|
||||
padding: 2px 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
}
|
||||
#aside-content .aside-list > .aside-list-item {
|
||||
padding: 8px;
|
||||
padding-top: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
border-radius: 12px;
|
||||
transition: 0.3s;
|
||||
margin: 6px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media screen and (min-width: 1200px) {
|
||||
#aside-content .aside-list > .aside-list-item:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
#aside-content .aside-list > .aside-list-item:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
}
|
||||
#aside-content .aside-list > .aside-list-item:hover .thumbnail > img {
|
||||
transform: scale(1);
|
||||
}
|
||||
#aside-content .aside-list > .aside-list-item:not(:last-child) {
|
||||
border-bottom: 0 dashed var(--anzhiyu-background) !important;
|
||||
}
|
||||
#aside-content .aside-list > .aside-list-item .thumbnail {
|
||||
border-radius: var(--anzhiyu-border-radius);
|
||||
border: var(--style-border);
|
||||
}
|
||||
#aside-content .aside-list > .aside-list-item:hover {
|
||||
background: var(--anzhiyu-main);
|
||||
color: var(--anzhiyu-white);
|
||||
transition: 0.3s;
|
||||
box-shadow: var(--anzhiyu-shadow-main);
|
||||
}
|
||||
#aside-content .aside-list > .aside-list-item:hover a {
|
||||
color: var(--anzhiyu-white) !important;
|
||||
}
|
||||
.card-widget.card-recent-post {
|
||||
padding: 0.4rem 1rem !important;
|
||||
}
|
||||
|
||||
/* 文章toc */
|
||||
#aside-content #card-toc .toc-content .toc-link.active {
|
||||
border-radius: var(--anzhiyu-border-radius);
|
||||
}
|
||||
#aside-content #card-toc .toc-content {
|
||||
overflow-y: auto;
|
||||
}
|
||||
#aside-content #card-toc span.toc-number {
|
||||
display: none;
|
||||
}
|
||||
#aside-content #card-toc .toc-content .toc-link.active {
|
||||
line-height: 1.2;
|
||||
border-radius: 12px;
|
||||
border-left-color: var(--anzhiyu-hovertext);
|
||||
background-color: var(--anzhiyu-card-bg);
|
||||
color: var(--anzhiyu-lighttext);
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
}
|
||||
[data-theme="dark"].toc .toc-item.active .toc-link .toc-text {
|
||||
color: var(--anzhiyu-white);
|
||||
}
|
||||
#aside-content #card-toc .toc-content .toc-item.active .toc-link {
|
||||
opacity: 1;
|
||||
border-radius: 8px;
|
||||
}
|
||||
#aside-content #card-toc .toc-content .toc-link {
|
||||
line-height: 1.2;
|
||||
padding: 8px;
|
||||
border-left: 0 solid transparent;
|
||||
border-radius: 12px;
|
||||
color: var(--anzhiyu-secondtext);
|
||||
cursor: default;
|
||||
}
|
||||
#aside-content #card-toc .toc-content .toc-link:not(.active) span {
|
||||
opacity: 0.6;
|
||||
cursor: pointer;
|
||||
filter: blur(1px);
|
||||
transition: 0.3s;
|
||||
}
|
||||
#aside-content #card-toc:hover .toc-content .toc-link:not(.active) span {
|
||||
filter: blur(0);
|
||||
opacity: 1;
|
||||
}
|
||||
#aside-content #card-toc .toc-content .toc-link:not(.active) span:hover {
|
||||
color: var(--anzhiyu-lighttext);
|
||||
}
|
||||
|
||||
.site-data > a .headline,
|
||||
.site-data > a .length-num {
|
||||
color: var(--anzhiyu-white);
|
||||
}
|
||||
|
||||
#sidebar-menus.open .site-data > a .headline,
|
||||
#sidebar-menus.open .site-data > a .length-num {
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
#aside-content .sticky_layout {
|
||||
top: 60px;
|
||||
}
|
||||
.post #aside-content .sticky_layout {
|
||||
top: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 侧边栏归档 */
|
||||
@media screen and (min-width: 900px) {
|
||||
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a,
|
||||
#aside-content .card-categories ul.card-category-list > .card-category-list-item a {
|
||||
padding: 3px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#aside-content .card-widget {
|
||||
border-radius: 12px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
#aside-content .card-widget {
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
background: var(--anzhiyu-card-bg);
|
||||
border: var(--style-border);
|
||||
transition: 0.3s;
|
||||
}
|
||||
#aside-content hr {
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin: 1rem 0;
|
||||
border: 1px dashed var(--anzhiyu-theme-op);
|
||||
}
|
||||
#aside-content hr:before {
|
||||
content: none;
|
||||
}
|
||||
#article-container hr:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
#anMusic-page-meting
|
||||
+maxWidth768()
|
||||
.aplayer.aplayer-withlist .aplayer-list
|
||||
opacity: 0
|
||||
|
||||
#body-wrap
|
||||
&.open
|
||||
transition-property: transform, border-radius;
|
||||
transition-duration: 0ms;
|
||||
transform-origin: 0 46%;
|
||||
transform: translate3d(300px, 0px, 0px) scale3d(0.86, 0.86, 1);
|
||||
border-radius: 12px
|
||||
transition: 0.3s ease-out;
|
||||
z-index 2
|
||||
#menu-mask
|
||||
display: block
|
||||
#post-top-cover
|
||||
display: none
|
||||
overflow-y: overlay;
|
||||
transition: 0s
|
||||
border-radius: 12px;
|
||||
#anMusic-page-meting .aplayer.aplayer-withlist .aplayer-list
|
||||
display: none
|
||||
@@ -0,0 +1,109 @@
|
||||
#vcomment
|
||||
font-size: 1.1em
|
||||
|
||||
.vbtn
|
||||
border: none
|
||||
background: var(--btn-bg)
|
||||
color: var(--btn-color)
|
||||
|
||||
&:hover
|
||||
background: var(--btn-hover-color)
|
||||
|
||||
.vimg
|
||||
transition: all .3s
|
||||
|
||||
&:hover
|
||||
transform: rotate(360deg)
|
||||
|
||||
.vcards .vcard .vcontent.expand
|
||||
&:before,
|
||||
&:after
|
||||
z-index: 22
|
||||
|
||||
#waline-wrap
|
||||
--waline-font-size: 1.1em
|
||||
--waline-theme-color: $button-bg
|
||||
--waline-active-color: $button-hover-color
|
||||
|
||||
.vuser
|
||||
transition: all .5s
|
||||
|
||||
&:hover
|
||||
transform: rotate(360deg)
|
||||
|
||||
if hexo-config('valine.bg')
|
||||
#vcomment
|
||||
textarea
|
||||
background: url(hexo-config('valine.bg')) 100% 100% no-repeat
|
||||
|
||||
&:focus
|
||||
background-image: none
|
||||
|
||||
if hexo-config('waline.bg')
|
||||
#waline-wrap
|
||||
textarea
|
||||
background: url(hexo-config('waline.bg')) 100% 100% no-repeat
|
||||
|
||||
&:focus
|
||||
background-image: none
|
||||
|
||||
.fireworks
|
||||
position: fixed
|
||||
top: 0
|
||||
left: 0
|
||||
z-index: $fireworks-zIndex
|
||||
pointer-events: none
|
||||
|
||||
.medium-zoom-image--opened
|
||||
z-index: 99999 !important
|
||||
margin: 0 !important
|
||||
|
||||
.medium-zoom-overlay
|
||||
z-index: 99999 !important
|
||||
|
||||
.mermaid-wrap
|
||||
margin: 0 0 20px
|
||||
text-align: center
|
||||
|
||||
& > svg
|
||||
height: 100%
|
||||
|
||||
.fb-comments iframe
|
||||
width: 100% !important
|
||||
|
||||
.katex-wrap
|
||||
overflow: auto
|
||||
|
||||
if hexo-config('katex') && hexo-config('katex.hide_scrollbar')
|
||||
&::-webkit-scrollbar
|
||||
display: none
|
||||
|
||||
// mathjax
|
||||
mjx-container[display],
|
||||
.has-jax
|
||||
overflow-x: auto
|
||||
overflow-y: hidden
|
||||
line-height: normal !important
|
||||
|
||||
.aplayer
|
||||
color: $font-black
|
||||
|
||||
#article-container
|
||||
.aplayer
|
||||
margin: 0 0 20px
|
||||
|
||||
if hexo-config('beautify.enable')
|
||||
ol,
|
||||
ul
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
li
|
||||
margin: 0
|
||||
padding: 0 15px
|
||||
|
||||
&:before
|
||||
content: none
|
||||
|
||||
.snackbar-css
|
||||
border-radius: 5px !important
|
||||
@@ -0,0 +1,123 @@
|
||||
if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
|
||||
[data-theme='dark']
|
||||
--global-bg: darken(#121212, 2)
|
||||
--font-color: alpha(#FFFFFF, .7)
|
||||
--hr-border: alpha(#FFFFFF, .4)
|
||||
--hr-before-color: alpha(#FFFFFF, .7)
|
||||
--search-bg: #121212
|
||||
--search-input-color: alpha(#FFFFFF, .7)
|
||||
--search-result-title: alpha(#FFFFFF, .9)
|
||||
--preloader-bg: darken(#121212, 2)
|
||||
--preloader-color: alpha(#FFFFFF, .7)
|
||||
--tab-border-color: #2c2c2c
|
||||
--tab-botton-bg: #2c2c2c
|
||||
--tab-botton-color: alpha(#FFFFFF, .7)
|
||||
--tab-button-hover-bg: lighten(#121212, 15)
|
||||
--tab-button-active-bg: #121212
|
||||
--card-bg: #121212
|
||||
--sidebar-bg: #121212
|
||||
--btn-hover-color: lighten(#121212, 40)
|
||||
--btn-color: alpha(#FFFFFF, .7)
|
||||
--btn-bg: lighten(#121212, 5)
|
||||
--text-bg-hover: lighten(#121212, 15)
|
||||
--light-grey: alpha(#FFFFFF, .7)
|
||||
--dark-grey: alpha(#FFFFFF, .2)
|
||||
--white: alpha(#FFFFFF, .9)
|
||||
--text-highlight-color: alpha(#FFFFFF, .9)
|
||||
--blockquote-color: alpha(#FFFFFF, .7)
|
||||
--blockquote-bg: lighten(#121212, 10)
|
||||
--reward-pop: lighten(#121212, 10)
|
||||
--toc-link-color: alpha(#FFFFFF, .6)
|
||||
--scrollbar-color: lighten(#121212, 5)
|
||||
--timeline-bg: lighten(#121212, 5)
|
||||
|
||||
#web_bg:before,
|
||||
#footer:before,
|
||||
#page-header:before
|
||||
position: absolute
|
||||
width: 100%
|
||||
height: 100%
|
||||
background-color: alpha($dark-black, .3)
|
||||
content: ''
|
||||
z-index: 2
|
||||
pointer-events: none
|
||||
|
||||
#footer
|
||||
background-color: var(--anzhiyu-card-bg);
|
||||
|
||||
#article-container
|
||||
pre > code
|
||||
background: lighten(#121212, 2)
|
||||
|
||||
figure.highlight
|
||||
box-shadow: none
|
||||
|
||||
.note
|
||||
code
|
||||
background: $code-background
|
||||
|
||||
.aplayer
|
||||
filter: brightness(.8)
|
||||
|
||||
kbd
|
||||
border-color: #696969
|
||||
background-color: #525252
|
||||
color: #e2f1ff
|
||||
|
||||
// 頭部
|
||||
#page-header
|
||||
&.nav-fixed > #nav,
|
||||
&.not-top-img > #nav
|
||||
background: var(--anzhiyu-black);
|
||||
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
|
||||
.post
|
||||
#page-header
|
||||
&.nav-fixed > #nav
|
||||
background: var(--anzhiyu-card-bg);
|
||||
box-shadow: none
|
||||
#post-comment
|
||||
.comment-switch
|
||||
if hexo-config('comments.text')
|
||||
background: #2c2c2c !important
|
||||
|
||||
#switch-btn
|
||||
filter: brightness(.8)
|
||||
|
||||
// note
|
||||
if hexo-config('note.style') == 'modern' || hexo-config('note.style') == 'flat'
|
||||
.note
|
||||
filter: brightness(.8)
|
||||
|
||||
// hide-tags
|
||||
.hide-button,
|
||||
.btn-anzhiyu,
|
||||
.hl-label,
|
||||
.post-outdate-notice,
|
||||
.error-img,
|
||||
#article-container iframe,
|
||||
.gist,
|
||||
.ads-wrap
|
||||
filter: brightness(.8)
|
||||
|
||||
img
|
||||
if hexo-config('lazyload.enable') && hexo-config('lazyload.blur') && !hexo-config('lazyload.placeholder')
|
||||
filter: blur(0) brightness(.8)
|
||||
else
|
||||
filter: brightness(.8)
|
||||
|
||||
#aside-content .aside-list > .aside-list-item:not(:last-child)
|
||||
border-bottom: 1px dashed alpha(#FFFFFF, .1)
|
||||
.post
|
||||
#aside-content
|
||||
+maxWidth768()
|
||||
background: var(--anzhiyu-card-bg);
|
||||
|
||||
#artitalk_main #lazy
|
||||
background: #121212
|
||||
|
||||
#operare_artitalk .c2
|
||||
background: #121212
|
||||
|
||||
#card-toc
|
||||
+maxWidth900()
|
||||
background: lighten(#121212, 5)
|
||||
@@ -0,0 +1,197 @@
|
||||
if hexo-config('readmode')
|
||||
.read-mode
|
||||
--font-color: #4c4948
|
||||
--readmode-light-color: #fff
|
||||
--white: var(--anzhiyu-white)
|
||||
--light-grey: #4c4948
|
||||
--gray: #d6dbdf
|
||||
--hr-border: #d6dbdf
|
||||
--hr-before-color: darken(#d6dbdf, 10)
|
||||
--highlight-bg: #f7f7f7
|
||||
--exit-btn-bg: #C0C0C0
|
||||
--exit-btn-color: #fff
|
||||
--exit-btn-hover: darken(#C0C0C0, 20)
|
||||
--pseudo-hover: none
|
||||
|
||||
[data-theme='dark']
|
||||
.read-mode
|
||||
--font-color: rgba(255, 255, 255, .7)
|
||||
--readmode-light-color: #0d0d0d
|
||||
--white: rgba(255, 255, 255, .9)
|
||||
--light-grey: rgba(255, 255, 255, .7)
|
||||
--gray: rgba(255, 255, 255, .7)
|
||||
--hr-border: rgba(255, 255, 255, .5)
|
||||
--hr-before-color: rgba(255, 255, 255, .7)
|
||||
--highlight-bg: #171717
|
||||
--exit-btn-bg: #1f1f1f
|
||||
--exit-btn-color: rgba(255, 255, 255, .9)
|
||||
--exit-btn-hover: lighten(#1f1f1f, 20)
|
||||
|
||||
.read-mode
|
||||
background: var(--readmode-light-color)
|
||||
|
||||
.exit-readmode
|
||||
position: fixed
|
||||
top: 30px
|
||||
right: 30px
|
||||
z-index: 100
|
||||
width: 40px
|
||||
height: 40px
|
||||
border-radius: 8px
|
||||
background: var(--exit-btn-bg)
|
||||
color: var(--exit-btn-color)
|
||||
font-size: 16px
|
||||
transition: background .3s
|
||||
|
||||
+maxWidth768()
|
||||
top: initial
|
||||
bottom: 30px
|
||||
|
||||
&:hover
|
||||
background: var(--exit-btn-hover)
|
||||
|
||||
#aside-content
|
||||
display: none
|
||||
|
||||
#post-firstinfo .meta-firstline
|
||||
a.post-meta-original
|
||||
color: var(--white) !important
|
||||
a.post-meta-categories
|
||||
color: var(--white) !important
|
||||
a.article-meta__tags
|
||||
color: var(--white) !important
|
||||
|
||||
#post-info #post-meta
|
||||
color: var(--white) !important
|
||||
|
||||
#page-header.post-bg
|
||||
background-color: transparent
|
||||
background-image: none !important
|
||||
|
||||
&:before
|
||||
opacity: 0
|
||||
|
||||
& > #post-info
|
||||
text-align: center
|
||||
|
||||
#post
|
||||
margin: 0 auto
|
||||
background: transparent
|
||||
box-shadow: none
|
||||
|
||||
&:hover
|
||||
box-shadow: none
|
||||
|
||||
& > canvas
|
||||
display: none !important
|
||||
|
||||
.highlight-tools,
|
||||
#footer,
|
||||
#post > *:not(#post-info):not(.post-content),
|
||||
#nav,
|
||||
.post-outdate-notice,
|
||||
#web_bg,
|
||||
#rightside,
|
||||
.not-top-img
|
||||
display: none !important
|
||||
|
||||
#article-container
|
||||
a
|
||||
color: #99a9bf
|
||||
|
||||
pre,
|
||||
.highlight:not(.js-file-line-container)
|
||||
background: var(--highlight-bg) !important
|
||||
|
||||
*
|
||||
color: var(--font-color) !important
|
||||
|
||||
figure.highlight
|
||||
border-radius: 0 !important
|
||||
box-shadow: none !important
|
||||
|
||||
& > :not(.highlight-tools)
|
||||
display: block !important
|
||||
|
||||
.line:before
|
||||
color: var(--font-color) !important
|
||||
|
||||
.hljs
|
||||
background: var(-highlight-bg) !important
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
padding: 0
|
||||
|
||||
&:before
|
||||
content: ''
|
||||
|
||||
&:hover
|
||||
padding: 0
|
||||
|
||||
ul,
|
||||
li,
|
||||
ol
|
||||
&:hover:before
|
||||
transform: none !important
|
||||
|
||||
ol,
|
||||
li
|
||||
&:before
|
||||
background: transparent !important
|
||||
color: var(--font-color) !important
|
||||
|
||||
ul
|
||||
>li
|
||||
&:before
|
||||
border-color: var(--gray) !important
|
||||
|
||||
.tabs
|
||||
border: 2px solid var(--tab-border-color)
|
||||
|
||||
> .nav-tabs
|
||||
background: transparent
|
||||
|
||||
> .tab
|
||||
border-top: none !important
|
||||
|
||||
> .tab-contents .tab-item-content.active
|
||||
animation: none
|
||||
|
||||
code
|
||||
color: var(--font-color)
|
||||
|
||||
blockquote
|
||||
border-color: var(--gray)
|
||||
background-color: var(--readmode-light-color)
|
||||
|
||||
kbd
|
||||
border: 1px solid var(--gray)
|
||||
background-color: transparent
|
||||
box-shadow: none
|
||||
color: var(--font-color)
|
||||
|
||||
.hide-toggle
|
||||
border: 1px solid var(--gray) !important
|
||||
|
||||
.hide-button,
|
||||
.btn-anzhiyu,
|
||||
.hl-label
|
||||
border: 1px solid var(--gray) !important
|
||||
background: var(--readmode-light-color) !important
|
||||
color: var(--font-color) !important
|
||||
|
||||
.note
|
||||
border: 2px solid var(--gray)
|
||||
border-left-color: var(--gray) !important
|
||||
filter: none
|
||||
background-color: var(--readmode-light-color) !important
|
||||
color: var(--font-color)
|
||||
|
||||
&:before,
|
||||
.note-icon
|
||||
color: var(--font-color)
|
||||
@@ -0,0 +1,69 @@
|
||||
if hexo-config('error_404.enable')
|
||||
.error404
|
||||
#error-wrap
|
||||
position: absolute
|
||||
top: 50%
|
||||
right: 0
|
||||
left: 0
|
||||
margin: 0 auto
|
||||
padding: 60px 20px 0
|
||||
max-width: 1000px
|
||||
transform: translate(0, -50%)
|
||||
|
||||
.error-content
|
||||
@extend .cardHover
|
||||
overflow: hidden
|
||||
margin: 0 20px
|
||||
height: 360px
|
||||
|
||||
+maxWidth768()
|
||||
margin: 0
|
||||
height: 500px
|
||||
|
||||
.error-img
|
||||
display: inline-block
|
||||
overflow: hidden
|
||||
width: 50%
|
||||
height: 100%
|
||||
|
||||
+maxWidth768()
|
||||
width: 100%
|
||||
height: 45%
|
||||
|
||||
img
|
||||
@extend .imgHover
|
||||
background-color: $theme-color
|
||||
|
||||
.error-info
|
||||
display: inline-flex
|
||||
flex-direction: column
|
||||
justify-content: center
|
||||
align-content: center
|
||||
width: 50%
|
||||
height: 100%
|
||||
vertical-align: top
|
||||
text-align: center
|
||||
|
||||
if $site-name-font
|
||||
font-family: $site-name-font
|
||||
|
||||
+maxWidth768()
|
||||
width: 100%
|
||||
height: 55%
|
||||
|
||||
.error_title
|
||||
margin-top: -.6em
|
||||
font-size: 9em
|
||||
|
||||
+maxWidth768()
|
||||
font-size: 8em
|
||||
|
||||
.error_subtitle
|
||||
@extend .limit-more-line
|
||||
margin-top: -3em
|
||||
word-break: break-word
|
||||
font-size: 1.6em
|
||||
-webkit-line-clamp: 2
|
||||
|
||||
& + #rightside
|
||||
display: none
|
||||
1276
themes/anzhiyu/hexo-theme-anzhiyu-main/source/css/_page/about.styl
Normal file
1276
themes/anzhiyu/hexo-theme-anzhiyu-main/source/css/_page/about.styl
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,113 @@
|
||||
.article-sort
|
||||
margin: .25rem
|
||||
&-title
|
||||
margin: 0.25rem;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
font-size: 2em;
|
||||
|
||||
&-item
|
||||
position: relative
|
||||
display: flex
|
||||
align-items: center
|
||||
transition: all 0.2s ease-in-out 0s;
|
||||
border: none;
|
||||
margin: 0 0 1rem 0rem;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
|
||||
&.no-article-cover
|
||||
height: 80px
|
||||
|
||||
.article-sort-item-info
|
||||
padding: 0
|
||||
|
||||
&.year
|
||||
font-size: 1rem;
|
||||
color: var(--anzhiyu-secondtext);
|
||||
margin-bottom: 0.25rem;
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: $light-blue
|
||||
|
||||
&:before
|
||||
border-color: var(--pseudo-hover)
|
||||
|
||||
&-time
|
||||
color: $theme-meta-color
|
||||
font-size: 95%
|
||||
|
||||
time
|
||||
padding-left: 6px
|
||||
cursor: default
|
||||
|
||||
&-title
|
||||
@extend .limit-more-line
|
||||
color: var(--font-color)
|
||||
font-size: 1.1em
|
||||
transition: all .3s
|
||||
-webkit-line-clamp: 1
|
||||
margin-right: auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
order: 0;
|
||||
font-weight: bold;
|
||||
line-height: 1.3;
|
||||
|
||||
&:hover
|
||||
color: var(--anzhiyu-lighttext)
|
||||
&-index
|
||||
opacity: .5
|
||||
position: absolute
|
||||
top: .5rem
|
||||
right: .5rem
|
||||
font-style: italic
|
||||
font-size: 2.5rem
|
||||
line-height: 1.5rem
|
||||
|
||||
&-img
|
||||
overflow: hidden
|
||||
width: 151px
|
||||
height: 80px
|
||||
border-radius: 12px;
|
||||
min-width: 151px;
|
||||
min-height: 80px;
|
||||
background: var(--anzhiyu-secondbg);
|
||||
-webkit-mask-image: -webkit-radial-gradient(center, rgb(255, 255, 255), rgb(0, 0, 0));
|
||||
|
||||
img
|
||||
@extend .imgHover
|
||||
|
||||
&-info
|
||||
padding: 0 0.8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 80px;
|
||||
height: 80px;
|
||||
justify-content: space-between;
|
||||
.article-sort-item-index
|
||||
+maxWidth768()
|
||||
display: none
|
||||
.article-sort-item-title
|
||||
height: 30%;
|
||||
+maxWidth768()
|
||||
font-size: .9em;
|
||||
height: 25%;
|
||||
.article-meta-wrap
|
||||
height: 35%;
|
||||
.article-sort-item-tags a
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
transition: 0.3s;
|
||||
margin-right: auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 0.2rem;
|
||||
padding-left: 0;
|
||||
span
|
||||
font-size: 12px;
|
||||
margin-right: 1px;
|
||||
pointer-events: none
|
||||
.article-sort-item-time
|
||||
font-size: 12px;
|
||||
@@ -0,0 +1,37 @@
|
||||
.category-lists
|
||||
.category-title
|
||||
font-size: 2.57em
|
||||
|
||||
+maxWidth768()
|
||||
font-size: 2em
|
||||
|
||||
.category-list
|
||||
margin-bottom: 0
|
||||
|
||||
a
|
||||
color: var(--font-color)
|
||||
|
||||
&:hover
|
||||
color: $text-hover
|
||||
|
||||
.category-list-count
|
||||
margin-left: 8px
|
||||
color: $theme-meta-color
|
||||
|
||||
&:before
|
||||
content: '('
|
||||
|
||||
&:after
|
||||
content: ')'
|
||||
|
||||
ul
|
||||
padding: 0 0 0 20px
|
||||
@extend .list-beauty
|
||||
|
||||
ul
|
||||
padding-left: 4px
|
||||
|
||||
li
|
||||
position: relative
|
||||
margin: 6px 0
|
||||
padding: .12em .4em .12em 1.4em
|
||||
@@ -0,0 +1,81 @@
|
||||
.post .layout#content-inner
|
||||
+maxWidth768()
|
||||
background: var(--anzhiyu-main);
|
||||
#body-wrap
|
||||
display: flex
|
||||
flex-direction: column
|
||||
min-height: 100vh
|
||||
justify-content: space-between;
|
||||
+maxWidth768()
|
||||
.layout
|
||||
padding: 0;
|
||||
#archive
|
||||
background: var(--anzhiyu-background)
|
||||
border: none
|
||||
padding-top: 0px
|
||||
|
||||
.layout
|
||||
display: flex
|
||||
flex: 1 auto
|
||||
margin: 0 auto
|
||||
padding: 1.25rem 1.5rem
|
||||
max-width: 1200px
|
||||
width: 100%
|
||||
justify-content: center;
|
||||
|
||||
+maxWidth1200()
|
||||
flex-direction: column
|
||||
padding-top: 10px
|
||||
|
||||
+maxWidth768()
|
||||
padding: 20px 15px;
|
||||
z-index: 3
|
||||
|
||||
+minWidth2000()
|
||||
max-width: 1700px
|
||||
|
||||
& > div:first-child:not(.recent-posts)
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
padding: 2rem 2.5rem;
|
||||
border-radius: 12px;
|
||||
background: var(--anzhiyu-card-bg);
|
||||
border: var(--style-border);
|
||||
width: calc(100% - 300px);
|
||||
align-self: flex-start;
|
||||
animation: slide-in 0.6s 0.1s backwards;
|
||||
|
||||
+maxWidth768()
|
||||
padding: 1rem 1rem;
|
||||
box-shadow: none;
|
||||
background: var(--anzhiyu-background);
|
||||
|
||||
& > div:first-child
|
||||
width: calc(100% - 300px)
|
||||
transition: all .3s ease 0s
|
||||
|
||||
+maxWidth900()
|
||||
width: 100% !important
|
||||
|
||||
if hexo-config('aside.position') == 'left'
|
||||
+minWidth900()
|
||||
order: 2
|
||||
|
||||
// 隱藏aside
|
||||
&.hide-aside
|
||||
max-width: 1000px
|
||||
|
||||
+minWidth2000()
|
||||
max-width: 1200px
|
||||
|
||||
& > div
|
||||
width: 100% !important
|
||||
|
||||
// for apple device
|
||||
.apple
|
||||
#page-header.full_page
|
||||
background-attachment: scroll !important
|
||||
|
||||
.recent-post-item,
|
||||
.avatar-img,
|
||||
.flink-item-icon
|
||||
transform: translateZ(0)
|
||||
@@ -0,0 +1,105 @@
|
||||
// 我的装备
|
||||
.goodthings-title
|
||||
margin: 1rem 0
|
||||
line-height: 1;
|
||||
.equipment-item
|
||||
.equipment-item-content
|
||||
display: flex
|
||||
flex-direction: row
|
||||
flex-wrap: wrap
|
||||
margin: 0 -8px
|
||||
.equipment-item-content-item
|
||||
width: calc(25% - 12px)
|
||||
border-radius: 12px
|
||||
border: var(--style-border-always)
|
||||
overflow: hidden
|
||||
margin: 8px 6px
|
||||
background: var(--anzhiyu-card-bg)
|
||||
box-shadow: var(--anzhiyu-shadow-border)
|
||||
min-height: 400px
|
||||
position: relative
|
||||
+maxWidth1200()
|
||||
width: calc(50% - 12px)
|
||||
+maxWidth768()
|
||||
width: 100%
|
||||
|
||||
.equipment-item-content-item-info
|
||||
padding: 8px 16px 16px 16px
|
||||
margin-top: 12px
|
||||
|
||||
.equipment-item-content-item-name
|
||||
font-size: 18px
|
||||
font-weight: bold
|
||||
line-height: 1
|
||||
margin-bottom: 8px
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
width: fit-content
|
||||
cursor pointer
|
||||
&:hover
|
||||
color: var(--anzhiyu-main)
|
||||
|
||||
.equipment-item-content-item-specification
|
||||
font-size: 12px
|
||||
color: var(--anzhiyu-secondtext)
|
||||
line-height: 16px
|
||||
margin-bottom: 5px
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
|
||||
.equipment-item-content-item-description
|
||||
line-height: 20px
|
||||
color: var(--anzhiyu-secondtext)
|
||||
height: 60px
|
||||
display: -webkit-box
|
||||
overflow: hidden
|
||||
-webkit-line-clamp: 3
|
||||
-webkit-box-orient: vertical
|
||||
font-size: 14px
|
||||
|
||||
a.equipment-item-content-item-link
|
||||
font-size: 12px
|
||||
background: var(--anzhiyu-gray-op)
|
||||
padding: 4px 8px
|
||||
border-radius: 8px
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
background: var(--anzhiyu-main)
|
||||
color: var(--anzhiyu-white)
|
||||
|
||||
.equipment-item-content-item-cover
|
||||
width: 100%
|
||||
height: 200px
|
||||
background: var(--anzhiyu-secondbg)
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center;
|
||||
|
||||
img.equipment-item-content-item-image
|
||||
object-fit: contain
|
||||
height: 80%
|
||||
width 260px
|
||||
|
||||
.equipment-item-content-item-toolbar
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
position: absolute
|
||||
bottom: 12px
|
||||
left: 0
|
||||
width: 100%
|
||||
padding: 0 16px
|
||||
|
||||
body[data-type="equipment"] #web_bg
|
||||
background: var(--anzhiyu-background);
|
||||
body[data-type="equipment"] #page
|
||||
border: 0;
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
background: 0 0 !important;
|
||||
body[data-type="equipment"] #page .page-title
|
||||
display: none;
|
||||
|
||||
|
||||
@@ -0,0 +1,478 @@
|
||||
body[data-type="link"]
|
||||
#page
|
||||
.page-title
|
||||
display: none
|
||||
#flink-banners
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 76%;
|
||||
background: var(--anzhiyu-card-bg);
|
||||
padding: 1.5rem;
|
||||
border: var(--style-border);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
transition: 0.3s;
|
||||
will-change: transform;
|
||||
animation: slide-in 0.6s 0.2s backwards;
|
||||
.flink .banners-title
|
||||
top: 1.5rem;
|
||||
.banner-top-box
|
||||
display: flex
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.banner-button-group
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
top: 2.5rem;
|
||||
display: flex;
|
||||
+maxWidth768()
|
||||
display: none
|
||||
.banner-button
|
||||
color: var(--anzhiyu-card-bg);
|
||||
&.secondary
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
&:hover
|
||||
background: var(--anzhiyu-theme);
|
||||
color: var(--anzhiyu-white);
|
||||
i
|
||||
margin-right: 8px;
|
||||
font-size: 1rem;
|
||||
#skills-tags-group-all
|
||||
.img-alt
|
||||
display: none
|
||||
.tags-group-wrapper
|
||||
animation: rowup 120s linear infinite;
|
||||
.tags-group-icon
|
||||
border-radius: 50%;
|
||||
img
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
|
||||
.flink-desc
|
||||
margin: .2rem 0 .5rem
|
||||
|
||||
#article-container
|
||||
.anzhiyu-flink-list
|
||||
overflow: auto
|
||||
margin: -6px
|
||||
text-align: center
|
||||
.img-alt
|
||||
display: none
|
||||
&.cf-friends-lost-contact
|
||||
.flink-list-item
|
||||
height 60px
|
||||
&:hover
|
||||
.cf-friends-link img
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
margin: 0.5rem;
|
||||
min-width: 0px;
|
||||
min-height: 0px;
|
||||
.cf-friends-link img
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
|
||||
.flink-list-item
|
||||
margin: 6px 6px;
|
||||
transition: 0.3s;
|
||||
border-radius: 12px;
|
||||
transition-timing-function: ease-in-out;
|
||||
position: relative;
|
||||
width: calc(20% - 12px);
|
||||
border: var(--style-border);
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
background: var(--anzhiyu-card-bg);
|
||||
display: flex;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
height: 90px;
|
||||
line-height: 17px;
|
||||
transform: translateZ(0px);
|
||||
.cf-friends-link
|
||||
display: flex;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
padding: 0 4px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
img
|
||||
border-radius: 32px;
|
||||
margin: 15px 20px 15px 15px;
|
||||
transition: 0.3s;
|
||||
background: var(--anzhiyu-background);
|
||||
min-width: 60px;
|
||||
min-height: 60px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
float: left;
|
||||
object-fit: cover;
|
||||
|
||||
|
||||
+maxWidth1200()
|
||||
width: calc(50% - 15px) !important
|
||||
|
||||
+maxWidth600()
|
||||
width: calc(100% - 15px) !important
|
||||
|
||||
|
||||
&:hover:before,
|
||||
&:focus:before,
|
||||
&:active:before
|
||||
transform: scale(1)
|
||||
|
||||
.flink-item-info
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: calc(100% - 90px);
|
||||
height: fit-content;
|
||||
|
||||
.flink-item-name
|
||||
@extend .limit-one-line
|
||||
text-align: left;
|
||||
line-height: 20px;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
display: block;
|
||||
padding: 0px 10px 0px 0px;
|
||||
font-weight: 700;
|
||||
font-size: 19px;
|
||||
max-width: calc(100% - 12px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.flink-item-desc
|
||||
@extend .limit-one-line
|
||||
white-space: normal;
|
||||
padding: 5px 10px 16px 0;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
text-align: left;
|
||||
font-size: 0.93em;
|
||||
height: 40px;
|
||||
text-overflow: ellipsis;
|
||||
opacity: 0.7;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
&:hover
|
||||
transform: scale(1);
|
||||
background: var(--anzhiyu-theme);
|
||||
border: var(--style-border-hover);
|
||||
box-shadow: var(--anzhiyu-shadow-main);
|
||||
.site-card-tag
|
||||
left: -70px;
|
||||
a
|
||||
img
|
||||
transition: 0.6s;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
margin: 0.5rem;
|
||||
min-width: 0px;
|
||||
min-height: 0px;
|
||||
.flink-item-info
|
||||
min-width: calc(100% - 20px);
|
||||
.flink-item-name
|
||||
color: var(--anzhiyu-white);
|
||||
.flink-item-desc
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
color: var(--anzhiyu-white);
|
||||
|
||||
.flink-name
|
||||
margin-bottom: 5px
|
||||
font-weight: bold
|
||||
font-size: 1.5em
|
||||
|
||||
#article-container img
|
||||
margin-bottom: 0.5rem;
|
||||
object-fit: cover;
|
||||
max-height: 900px;
|
||||
.flexcard-flink-list
|
||||
overflow hidden
|
||||
.flink-list-card
|
||||
.wrapper img
|
||||
transition: transform .5s ease-out !important;
|
||||
&:hover
|
||||
border-color: var(--anzhiyu-main)!important;
|
||||
background-color: var(--anzhiyu-main)!important;
|
||||
box-shadow: var(--anzhiyu-shadow-theme)!important;
|
||||
|
||||
& > a
|
||||
width: calc(100% / 5 - 0.5rem);
|
||||
height 150px
|
||||
position relative
|
||||
display block
|
||||
margin: 0.5rem 0.25rem;
|
||||
float left
|
||||
overflow hidden
|
||||
padding: 0;
|
||||
border-radius: 8px;
|
||||
transition all .3s ease 0s, transform .6s cubic-bezier(.6, .2, .1, 1) 0s
|
||||
box-shadow none
|
||||
border: var(--style-border)!important;
|
||||
&:hover
|
||||
.info
|
||||
transform translateY(-100%)
|
||||
.wrapper
|
||||
img
|
||||
transform scale(1.2)
|
||||
&::before
|
||||
position: fixed
|
||||
width:inherit
|
||||
margin:auto
|
||||
left:0
|
||||
right:0
|
||||
top:10%
|
||||
border-radius: 10px
|
||||
text-align: center
|
||||
z-index: 100
|
||||
content: attr(data-title)
|
||||
font-size: 20px
|
||||
color: #fff
|
||||
padding: 10px
|
||||
background-color: rgba($theme-color,0.8)
|
||||
|
||||
.cover
|
||||
width 100%
|
||||
transition transform .5s ease-out
|
||||
.wrapper
|
||||
position relative
|
||||
.fadeIn
|
||||
animation coverIn .8s ease-out forwards
|
||||
img
|
||||
height 150px
|
||||
pointer-events none
|
||||
.info
|
||||
display flex
|
||||
flex-direction column
|
||||
justify-content center
|
||||
align-items center
|
||||
width 100%
|
||||
height 100%
|
||||
overflow hidden
|
||||
border-radius 3px
|
||||
background-color hsla(0, 0%, 100%, .7)
|
||||
transition transform .5s cubic-bezier(.6, .2, .1, 1) 0s
|
||||
img
|
||||
position relative
|
||||
top 45px
|
||||
width 80px
|
||||
height 80px
|
||||
border-radius 50% !important
|
||||
box-shadow 0 0 10px rgba(0, 0, 0, .3)
|
||||
z-index 1
|
||||
text-align center
|
||||
pointer-events none
|
||||
span
|
||||
padding 20px 10% 60px 10%
|
||||
font-size 16px
|
||||
width 100%
|
||||
text-align center
|
||||
box-shadow 0 0 10px rgba(0, 0, 0, .3)
|
||||
background-color hsla(0, 0%, 100%, .7)
|
||||
color var(--font-color)
|
||||
white-space nowrap
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
.flexcard-flink-list>a .info,
|
||||
.flexcard-flink-list>a .wrapper .cover
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
|
||||
@media screen and (max-width:1024px)
|
||||
.flexcard-flink-list
|
||||
& > a
|
||||
width calc(33.33333% - 15px)
|
||||
|
||||
@media screen and (max-width:600px)
|
||||
.flexcard-flink-list
|
||||
& > a
|
||||
width calc(50% - 15px)
|
||||
|
||||
[data-theme=dark]
|
||||
.flexcard-flink-list a .info,
|
||||
.flexcard-flink-list a .info span
|
||||
background-color rgba(0, 0, 0, .6)
|
||||
.flexcard-flink-list
|
||||
& > a
|
||||
&:hover
|
||||
&:before
|
||||
background-color: rgba(#121212,0.8);
|
||||
.justified-gallery > div > img,
|
||||
.justified-gallery > figure > img,
|
||||
.justified-gallery > a > a > img,
|
||||
.justified-gallery > div > a > img,
|
||||
.justified-gallery > figure > a > img,
|
||||
.justified-gallery > a > svg,
|
||||
.justified-gallery > div > svg,
|
||||
.justified-gallery > figure > svg,
|
||||
.justified-gallery > a > a > svg,
|
||||
.justified-gallery > div > a > svg,
|
||||
.justified-gallery > figure > a > svg
|
||||
position static!important
|
||||
|
||||
.site-card-tag
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 4px 8px;
|
||||
background-color: var(--anzhiyu-theme);
|
||||
box-shadow: var(--anzhiyu-shadow-blue);
|
||||
color: var(--anzhiyu-white);
|
||||
z-index: 1;
|
||||
border-radius: 11px 0 12px 0;
|
||||
transition: 0.3s;
|
||||
font-size: 12px;
|
||||
&.speed
|
||||
background: var(--anzhiyu-green);
|
||||
box-shadow: var(--anzhiyu-shadow-green);
|
||||
&.vip
|
||||
background: linear-gradient(38deg, rgba(229, 176, 133, 1) 0%, rgba(212, 143, 22, 1) 100%);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--anzhiyu-shadow-yellow);
|
||||
i.light
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0))
|
||||
animation: light_tag 4s both infinite;
|
||||
will-change: transform;
|
||||
|
||||
@keyframes light_tag
|
||||
0%
|
||||
transform: skewx(0) translateX(-150px);
|
||||
99%
|
||||
transform: skewx(-25deg) translateX(50px);
|
||||
#article-container
|
||||
.telescopic-site-card-group
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-pack: start;
|
||||
justify-content: flex-start;
|
||||
margin: -8px;
|
||||
-webkit-box-align: stretch;
|
||||
align-items: stretch;
|
||||
.site-card
|
||||
border: var(--style-border);
|
||||
border-radius: 12px;
|
||||
transition: 0.3s;
|
||||
transition-timing-function: ease-in-out;
|
||||
overflow: hidden;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
width: calc(100% / 7 - 16px);
|
||||
background: var(--anzhiyu-card-bg);
|
||||
box-shadow: var(--anzhiyu-shadow-border);
|
||||
.img-alt
|
||||
display: none
|
||||
+maxWidth1200()
|
||||
width: calc(20% - 16px) !important;
|
||||
+maxWidth900()
|
||||
width: calc(25% - 16px) !important;
|
||||
+maxWidth768()
|
||||
width: calc(33.3333% - 16px) !important;
|
||||
+maxWidth600()
|
||||
width: calc(50% - 16px) !important;
|
||||
&:hover
|
||||
border: var(--style-border-hover);
|
||||
box-shadow: var(--anzhiyu-shadow-main);
|
||||
.info
|
||||
background: var(--anzhiyu-theme);
|
||||
height: 120px;
|
||||
.site-card-text
|
||||
.title
|
||||
color: var(--anzhiyu-white);
|
||||
.desc
|
||||
transition: 0.3s;
|
||||
color: var(--anzhiyu-white);
|
||||
width: 100%;
|
||||
+minWidth768()
|
||||
.desc
|
||||
-webkit-line-clamp: 4;
|
||||
|
||||
.site-card-tag
|
||||
left: -50px;
|
||||
.img
|
||||
height: 80px;
|
||||
img
|
||||
transform: scale(1.1);
|
||||
filter: brightness(0.3);
|
||||
.info
|
||||
display: flex;
|
||||
border: none;
|
||||
padding: 0.7rem;
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
margin: 0;
|
||||
border-radius: 0 0 12px 12px;
|
||||
.site-card-text
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
.title
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
transition: all 0.3s ease 0s;
|
||||
.desc
|
||||
font-size: 0.9rem;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
opacity: 0.7;
|
||||
transition: 0.3s;
|
||||
text-align: left;
|
||||
overflow-wrap: break-word;
|
||||
line-height: 1.2;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
.img-alt
|
||||
display: none;
|
||||
img
|
||||
border-radius: 32px;
|
||||
transition: 0.3s !important;
|
||||
margin: 2px 8px 0 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
background: var(--anzhiyu-secondbg);
|
||||
.img
|
||||
-webkit-mask-image: -webkit-radial-gradient(center, rgb(255, 255, 255), rgb(0, 0, 0));
|
||||
border-radius: 0;
|
||||
height: 120px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
border: none;
|
||||
padding: 0 !important;
|
||||
transition: all 0.3s ease 0s;
|
||||
img
|
||||
border-radius: 0;
|
||||
transform: scale(1.03);
|
||||
transition: 0.3s;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
|
||||
@@ -0,0 +1,407 @@
|
||||
#recent-posts
|
||||
& > .recent-post-item:not(:first-child)
|
||||
margin-top: 20px
|
||||
animation: slide-in 0.6s 0.4s backwards;
|
||||
will-change: transform;
|
||||
+maxWidth768()
|
||||
margin: 20px 20px 0
|
||||
& > .recent-post-item
|
||||
@extend .cardHover
|
||||
display: flex
|
||||
flex-direction: row
|
||||
align-items: center
|
||||
overflow: hidden
|
||||
height: 18em
|
||||
position: relative
|
||||
border-radius: 12px;
|
||||
box-shadow: none;
|
||||
transition: all 0.3s ease 0s;
|
||||
.recent-post-info-top-tips
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
|
||||
.unvisited-post
|
||||
display: flex;
|
||||
color: var(--anzhiyu-secondtext);
|
||||
font-size: .75rem;;
|
||||
position: relative;
|
||||
&:visited
|
||||
color: var(--anzhiyu-card-bg);
|
||||
.recent-post-info
|
||||
margin-top: 0px;
|
||||
position: relative;
|
||||
.recent-post-info-top
|
||||
position: relative;
|
||||
transition: .3s;
|
||||
padding: 0 32px;
|
||||
width: 100%;
|
||||
.article-categories-original
|
||||
display: flex;
|
||||
color: var(--anzhiyu-secondtext);
|
||||
font-size: .75rem;;
|
||||
position: relative;
|
||||
margin-right: 8px;
|
||||
.newPost
|
||||
display: flex;
|
||||
color: var(--anzhiyu-secondtext);
|
||||
font-size: .75rem;;
|
||||
position: relative;
|
||||
margin-right: 8px;
|
||||
.article-title
|
||||
font-size: 20px;
|
||||
-webkit-line-clamp: 2;
|
||||
line-height: 30px;
|
||||
margin-top: 0;
|
||||
font-weight: 700;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
transition: .3s;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
+maxWidth768()
|
||||
if hexo-config("post_meta.page.date_type") == 'both'
|
||||
// -webkit-line-clamp: 1 !important;
|
||||
line-height: 23px;
|
||||
font-size: 19px;
|
||||
|
||||
+maxWidth768()
|
||||
flex-direction: column
|
||||
height: auto
|
||||
&.lastestpost-item
|
||||
margin-top: 10px !important;
|
||||
|
||||
&:hover
|
||||
img.post_bg
|
||||
filter: brightness(0.82) !important;
|
||||
transform: scale(1.03) !important
|
||||
transition: 0.3s ease-in-out;
|
||||
|
||||
&.ads-wrap
|
||||
display: block !important
|
||||
height: auto !important
|
||||
|
||||
.post_cover
|
||||
overflow: hidden
|
||||
width: 70%
|
||||
height: 200px;
|
||||
|
||||
+maxWidth768()
|
||||
width: 100%
|
||||
height: 200px
|
||||
|
||||
img.post_bg
|
||||
border-radius: 0px
|
||||
height 100%
|
||||
width 100%
|
||||
transition: all 0.6s ease 0s;
|
||||
object-fit: cover;
|
||||
|
||||
&.right
|
||||
order: 1
|
||||
|
||||
+maxWidth768()
|
||||
order: 0
|
||||
& >.recent-post-info
|
||||
height: 174px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
.sticky-warp
|
||||
line-height: 23px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 8px
|
||||
|
||||
.sticky
|
||||
color: $sticky-color
|
||||
font-size: 12px;
|
||||
+maxWidth768()
|
||||
width: 100%
|
||||
min-height: 140px;
|
||||
&.no-cover
|
||||
width: 100%
|
||||
|
||||
+maxWidth768()
|
||||
padding: 30px 20px
|
||||
&:hover
|
||||
color: $text-hover
|
||||
|
||||
& > .article-meta-wrap
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
font-size: .7rem;
|
||||
position: absolute;
|
||||
padding: 0 32px;
|
||||
transition: .3s;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
|
||||
if hexo-config("post_meta.page.date_type") == 'both'
|
||||
flex-direction: column;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
bottom: 0px;
|
||||
+maxWidth768()
|
||||
bottom: 20px;
|
||||
else
|
||||
flex-direction: row-reverse
|
||||
align-items: center
|
||||
bottom: 30px;
|
||||
.article-meta
|
||||
if hexo-config("post_meta.page.date_type") != 'both'
|
||||
margin: 0 8px 0 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
& > .post-meta-date
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
font-size: .875rem;
|
||||
white-space: nowrap;
|
||||
if hexo-config("post_meta.page.date_type") == 'both'
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
+maxWidth500()
|
||||
font-size: 13px
|
||||
|
||||
i
|
||||
margin: 0 4px 0 0
|
||||
|
||||
.article-meta-label
|
||||
if hexo-config('post_meta.page.label')
|
||||
padding-right: 4px
|
||||
else
|
||||
display: none
|
||||
|
||||
.article-meta-separator
|
||||
margin: 0 6px
|
||||
|
||||
.article-meta-link
|
||||
margin: 0 4px
|
||||
|
||||
if hexo-config('post_meta.page.date_format') == 'relative'
|
||||
time
|
||||
display: none
|
||||
|
||||
a
|
||||
color: $theme-meta-color
|
||||
font-size: 14px
|
||||
margin-right: 4px
|
||||
span
|
||||
pointer-events: none
|
||||
|
||||
&:hover
|
||||
color: $text-hover
|
||||
|
||||
& > .content
|
||||
@extend .limit-more-line
|
||||
-webkit-line-clamp: 2
|
||||
|
||||
#topPostGroup
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
height: 128px;
|
||||
align-content: space-between;
|
||||
width: 100%;
|
||||
#home_top
|
||||
margin: 0 auto 0;
|
||||
padding: 0px 1.5rem 0px;
|
||||
max-width: 1400px;
|
||||
width: 100%;
|
||||
animation: slide-in 0.6s 0.1s backwards;
|
||||
overflow: hidden;
|
||||
|
||||
+maxWidth768()
|
||||
#topPostGroup
|
||||
height: 240px;
|
||||
#swiper_container_blog
|
||||
padding: 10px;
|
||||
#home_top
|
||||
padding: 0px 20px 0px;
|
||||
|
||||
|
||||
if hexo-config('home_top.swiper.enable') == true
|
||||
div#bannerGroup
|
||||
margin-right: 10px;
|
||||
width: calc(51% - 10px) !important;
|
||||
+maxWidth768()
|
||||
#home_top
|
||||
padding: 0px 15px;
|
||||
#topPostGroup
|
||||
height: 280px;
|
||||
#swiper_container_blog
|
||||
padding: 0 10px;
|
||||
+maxWidth1200()
|
||||
div#bannerGroup {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
if hexo-config('article_double_row') == true
|
||||
#content-inner #recent-posts > .recent-post-item > .recent-post-info > .content
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
+maxWidth1200()
|
||||
#recent-posts > .recent-post-item >.recent-post-info > .article-title
|
||||
line-height: 30px;
|
||||
font-weight: bold;
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
width: 100%;
|
||||
transition: .3s;
|
||||
font-size: 1.2rem;
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
+maxWidth768()
|
||||
#content-inner #recent-posts > .recent-post-item > .recent-post-info > .content
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
@media screen and (min-width: 1201px)
|
||||
#recent-posts
|
||||
align-content: flex-start
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: space-between
|
||||
|
||||
&>.recent-post-item
|
||||
margin-top: 1rem
|
||||
display: flex
|
||||
height: auto
|
||||
width: 49%
|
||||
.recent-post-info
|
||||
.content
|
||||
display: none
|
||||
.post_cover
|
||||
width: 100%
|
||||
height: 225px
|
||||
transition: 1s !important;
|
||||
|
||||
img.post_bg
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
-webkit-flex-direction: column
|
||||
-ms-flex-direction: column
|
||||
flex-direction: column
|
||||
|
||||
.left_radius
|
||||
border-radius: 8px 8px 0 0
|
||||
|
||||
.right_radius
|
||||
border-radius: 8px 8px 0 0
|
||||
|
||||
height: auto !important
|
||||
|
||||
@media screen and (max-width:768px)
|
||||
#recent-posts>.recent-post-item
|
||||
width: 100%
|
||||
|
||||
#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap > .tags > .article-meta__separator
|
||||
display: none
|
||||
|
||||
|
||||
|
||||
#content-inner #recent-posts > .recent-post-item > .recent-post-info > .content
|
||||
transition: all 0.3s ease 0s;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-height: 1.4;
|
||||
color: var(--anzhiyu-secondtext);
|
||||
margin-top: 0.5rem;
|
||||
font-size: 14px;
|
||||
opacity 0
|
||||
height 0
|
||||
|
||||
#popup-window
|
||||
min-width: 300px;
|
||||
background: var(--anzhiyu-maskbgdeep);
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
position: fixed;
|
||||
border-radius: 12px;
|
||||
transition: .3s;
|
||||
z-index: 1002;
|
||||
user-select: none;
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
transform: translateZ(0);
|
||||
border: var(--style-border);
|
||||
opacity 0
|
||||
pointer-events: none
|
||||
&.show-popup-window
|
||||
animation: barrageIn .6s cubic-bezier(.42,0,.3,1.11);
|
||||
opacity 1
|
||||
pointer-events: all
|
||||
cursor pointer
|
||||
&.no-url:hover
|
||||
background: var(--anzhiyu-maskbgdeep);
|
||||
color: var(--anzhiyu-fontcolor);
|
||||
border: var(--style-border);
|
||||
cursor: pointer
|
||||
&.no-url
|
||||
.popup-window-content .popup-link
|
||||
display: none
|
||||
&:hover
|
||||
background: var(--anzhiyu-main)
|
||||
color: var(--anzhiyu-white)
|
||||
border: var(--style-border-hover);
|
||||
.popup-window-content .popup-link i
|
||||
color: var(--anzhiyu-white)
|
||||
&.popup-hide
|
||||
opacity: 0;
|
||||
animation: barrageOut .6s cubic-bezier(.42,0,.3,1.11);
|
||||
.popup-window-title
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--anzhiyu-card-bg);
|
||||
margin-right: 8px;
|
||||
background: var(--anzhiyu-fontcolor);
|
||||
line-height: 1;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
width: fit-content;
|
||||
.popup-window-divider
|
||||
width 100%
|
||||
border-bottom: var(--style-border);
|
||||
margin-top: 6px;
|
||||
.popup-window-content
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.popup-link
|
||||
margin-left: auto;
|
||||
font-size: 16px;
|
||||
i
|
||||
font-size: 16px;
|
||||
body[data-type="post"]
|
||||
#popup-window
|
||||
top: 70px;
|
||||
bottom: auto;
|
||||
&.show-popup-window
|
||||
animation: toLeftFull .6s cubic-bezier(.42,0,.3,1.11);
|
||||
opacity 1
|
||||
&.popup-hide
|
||||
opacity: 0;
|
||||
animation: toRightFull .6s cubic-bezier(.42,0,.3,1.11);
|
||||
@@ -0,0 +1,377 @@
|
||||
body[data-type="music"]
|
||||
background rgb(13, 13, 13)
|
||||
#body-wrap
|
||||
justify-content: flex-start;
|
||||
#center-console + label i
|
||||
background: var(--anzhiyu-white) !important
|
||||
.layout
|
||||
flex-direction: row;
|
||||
#page
|
||||
border 0
|
||||
box-shadow none !important
|
||||
padding 0 !important
|
||||
background transparent !important
|
||||
.page-title
|
||||
display: none
|
||||
#page-header
|
||||
#nav
|
||||
backdrop-filter none !important
|
||||
background 0 0 !important
|
||||
border-bottom none !important
|
||||
#blog_name,
|
||||
.mask-name-container,
|
||||
#menus,
|
||||
#nav-right .nav-button,
|
||||
#nav-right #toggle-menu
|
||||
a, .back-home-button
|
||||
color var(--anzhiyu-white)
|
||||
#footer, #nav-music
|
||||
display none
|
||||
#an_music_bg
|
||||
display block
|
||||
#web_bg
|
||||
display none
|
||||
.s-sticker
|
||||
div
|
||||
color var(--anzhiyu-white) !important
|
||||
|
||||
[data-theme="dark"]
|
||||
body[data-type="music"]
|
||||
.page
|
||||
#page-header
|
||||
&:before
|
||||
background-color transparent
|
||||
|
||||
|
||||
#an_music_bg
|
||||
display none
|
||||
filter blur(63px)
|
||||
opacity 0.6
|
||||
position fixed
|
||||
z-index -999
|
||||
background-attachment local
|
||||
background-position center center
|
||||
background-size cover
|
||||
background-repeat no-repeat
|
||||
width 200%
|
||||
height 200%
|
||||
top -50%
|
||||
left -50%
|
||||
transform rotate(0deg)
|
||||
transition .3s
|
||||
|
||||
if hexo-config('nav_music.console_widescreen_music') == false
|
||||
body
|
||||
&:has(#console.show)
|
||||
#nav-music
|
||||
display: none !important
|
||||
if hexo-config('nav_music.enable') == false
|
||||
#nav-music
|
||||
display: none !important
|
||||
body
|
||||
&:has(#console.show)
|
||||
#nav-music
|
||||
display: flex !important;
|
||||
|
||||
@media screen and (max-width: 1400px)
|
||||
body
|
||||
#anMusic-page
|
||||
#anMusicSwitching, #anMusicRefreshBtn, #anMusicBtnGetSong
|
||||
right 7vw
|
||||
#anMusicSwitching
|
||||
bottom: 100px
|
||||
#anMusicRefreshBtn
|
||||
bottom: 160px
|
||||
#anMusicBtnGetSong
|
||||
bottom: 220px
|
||||
|
||||
#anMusic-page
|
||||
#anMusicRefreshBtn, #anMusicBtnGetSong, #anMusicSwitching
|
||||
position: fixed;
|
||||
display: flex;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
bottom: 100px;
|
||||
padding: 5px;
|
||||
background: var(--anzhiyu-white-op);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
z-index 2
|
||||
#anMusicBtnGetSong
|
||||
right: 11vw;
|
||||
#anMusicRefreshBtn
|
||||
right: 7vw;
|
||||
#anMusicSwitching
|
||||
right: 15vw;
|
||||
+maxWidth768()
|
||||
div#anMusicBtnGetSong
|
||||
right: 80px;
|
||||
bottom: 150px;
|
||||
div#anMusicRefreshBtn
|
||||
right: 20px;
|
||||
bottom: 150px;
|
||||
div#anMusicSwitching
|
||||
right: 140px;
|
||||
bottom: 150px;
|
||||
meting-js
|
||||
.aplayer
|
||||
display flex
|
||||
flex-direction row-reverse
|
||||
background rgba(0, 0, 0, 0)
|
||||
border none
|
||||
box-shadow none
|
||||
.aplayer-body
|
||||
width 40%
|
||||
height calc(100vh - 169px)
|
||||
.aplayer-pic
|
||||
float none
|
||||
width 180px
|
||||
height 180px
|
||||
border-radius 12px
|
||||
margin auto
|
||||
left 0
|
||||
right 0
|
||||
transition: background-image 0.5s ease-in-out;
|
||||
background-size: cover;
|
||||
background-color: transparent !important;
|
||||
.aplayer-info
|
||||
margin 0 20px 0 20px
|
||||
border-bottom none
|
||||
.aplayer-music
|
||||
text-align center
|
||||
height auto
|
||||
margin 15px
|
||||
.aplayer-author, .aplayer-title
|
||||
font-size 2rem
|
||||
font-weight 700
|
||||
color #fff
|
||||
|
||||
.aplayer-lrc
|
||||
height 800%
|
||||
margin-top 10px
|
||||
mask-image linear-gradient(to bottom, #000, #000, #000, #000, #000, #000, #000, #000, #000, #000, #0000, #0000)
|
||||
p
|
||||
font-size 20px
|
||||
line-height: 20px !important;
|
||||
height: 20px !important;
|
||||
margin: 20px 0 !important;
|
||||
color #fff
|
||||
&.aplayer-lrc-current {
|
||||
min-height: 20px;
|
||||
}
|
||||
&::after, &::before
|
||||
display none
|
||||
.aplayer-controller
|
||||
position fixed
|
||||
max-width 1500px
|
||||
margin auto
|
||||
left 0
|
||||
right 0
|
||||
bottom 50px
|
||||
.aplayer-bar-wrap
|
||||
margin 0 160px 0 150px
|
||||
.aplayer-bar
|
||||
height: 6px;
|
||||
border-radius: 4px;
|
||||
.aplayer-played
|
||||
height: 6px;
|
||||
border-radius: 4px;
|
||||
background var(--anzhiyu-white) !important
|
||||
.aplayer-thumb
|
||||
width 20px
|
||||
height 20px
|
||||
margin-top: -7px
|
||||
transform none
|
||||
background #fff !important
|
||||
.aplayer-loaded
|
||||
height: 6px;
|
||||
border-radius: 4px;
|
||||
.aplayer-time
|
||||
position absolute
|
||||
width 100%
|
||||
bottom 21px
|
||||
height 0
|
||||
display flex
|
||||
justify-content flex-end
|
||||
.aplayer-volume-wrap
|
||||
.aplayer-volume-bar-wrap
|
||||
bottom: 0;
|
||||
right: -5px;
|
||||
.aplayer-icon
|
||||
width 2rem
|
||||
height 2rem
|
||||
margin-left 15px
|
||||
path
|
||||
fill var(--anzhiyu-white)
|
||||
opacity 0.8
|
||||
&.aplayer-icon-loop
|
||||
margin-right 15px
|
||||
.aplayer-time-inner
|
||||
margin-right 18px
|
||||
margin-top -8px
|
||||
.aplayer-icon-back
|
||||
position absolute
|
||||
left 0
|
||||
display inline
|
||||
.aplayer-icon-play
|
||||
position absolute
|
||||
left 40px
|
||||
display inline
|
||||
.aplayer-icon-forward
|
||||
position absolute
|
||||
left 80px
|
||||
display inline
|
||||
|
||||
.aplayer-icon-menu
|
||||
display none
|
||||
|
||||
.aplayer-list
|
||||
width 60%
|
||||
height 100%
|
||||
ol
|
||||
padding-right 25px
|
||||
& > li
|
||||
border-top 1px solid transparent
|
||||
font-size 14px
|
||||
&:hover
|
||||
background #ffffff33
|
||||
border-radius 6px
|
||||
&.aplayer-list-light
|
||||
background #ffffff33
|
||||
border-radius 6px
|
||||
padding 20px 15px
|
||||
span.aplayer-list-title
|
||||
font-weight: bolder;
|
||||
.aplayer-list-cur
|
||||
display none
|
||||
span
|
||||
color var(--anzhiyu-white)
|
||||
&.aplayer-list-author
|
||||
opacity 0.6
|
||||
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
body[data-type="music"]
|
||||
#rightside
|
||||
display none
|
||||
#content-inner,#page
|
||||
z-index auto
|
||||
#anMusic-page
|
||||
meting-js
|
||||
.aplayer
|
||||
.aplayer-list
|
||||
position fixed
|
||||
z-index 1002
|
||||
width 100%
|
||||
bottom -88%
|
||||
left 0
|
||||
background var(--sidebar-bg)
|
||||
height auto
|
||||
border-radius 15px 15px 0px 0px
|
||||
padding 15px 0px
|
||||
&.aplayer-list-hide
|
||||
bottom 0% !important
|
||||
ol
|
||||
max-height 60vh !important
|
||||
padding-right 0px
|
||||
& > li
|
||||
display flex
|
||||
margin 0 10px
|
||||
span
|
||||
color var(--font-color)
|
||||
&.aplayer-list-title
|
||||
width 30%
|
||||
max-width 55%
|
||||
width auto
|
||||
display -webkit-box
|
||||
-webkit-line-clamp 1
|
||||
overflow hidden
|
||||
-webkit-box-orient vertical
|
||||
&.aplayer-list-author
|
||||
position absolute
|
||||
right 10px
|
||||
width auto
|
||||
max-width 35%
|
||||
display -webkit-box
|
||||
-webkit-line-clamp 1
|
||||
overflow hidden
|
||||
-webkit-box-orient vertical
|
||||
&.aplayer-list-light
|
||||
background #33a673
|
||||
padding 5px 20px
|
||||
border-radius 10px
|
||||
span
|
||||
color #fff
|
||||
&.aplayer-list-author
|
||||
right 15px
|
||||
.aplayer-body
|
||||
width 100%
|
||||
position fixed
|
||||
margin auto
|
||||
left 0
|
||||
right 0
|
||||
top 100px
|
||||
.aplayer-info
|
||||
.aplayer-lrc
|
||||
margin-top 40px
|
||||
height auto
|
||||
max-height 200%
|
||||
min-height 100%
|
||||
mask-image linear-gradient(to bottom, #000, #000, #000, #000, #0000, #0000)
|
||||
p
|
||||
&.aplayer-lrc-current
|
||||
color #33a673
|
||||
.aplayer-controller
|
||||
width 100%
|
||||
bottom 100px
|
||||
.aplayer-volume-wrap
|
||||
left -66px
|
||||
.aplayer-volume-bar-wrap
|
||||
bottom 0px
|
||||
right 7px
|
||||
.aplayer-bar-wrap
|
||||
margin 0 30px
|
||||
.aplayer-controller
|
||||
.aplayer-time
|
||||
bottom -40px
|
||||
.aplayer-time-inner
|
||||
position absolute
|
||||
width 100%
|
||||
margin-right 0
|
||||
margin-top -33px
|
||||
.aplayer-dtime
|
||||
position absolute
|
||||
right 30px
|
||||
.aplayer-ptime
|
||||
position absolute
|
||||
left 35px
|
||||
.aplayer-icon-back
|
||||
margin auto
|
||||
right 110px
|
||||
.aplayer-icon-play
|
||||
margin auto
|
||||
right 0
|
||||
left 0
|
||||
.aplayer-icon-forward
|
||||
margin auto
|
||||
left 110px
|
||||
right 0
|
||||
.aplayer-icon-order
|
||||
position absolute
|
||||
left 22px
|
||||
.aplayer-icon-loop
|
||||
position absolute
|
||||
right 25px
|
||||
.aplayer-icon-menu
|
||||
display inline
|
||||
position absolute
|
||||
right 25px
|
||||
top -90px
|
||||
|
||||
|
||||
@@ -0,0 +1,135 @@
|
||||
.reward
|
||||
& #con
|
||||
width 350px
|
||||
height 85px
|
||||
position relative
|
||||
border-radius 4px
|
||||
|
||||
& #TA-con
|
||||
width 157px
|
||||
height 50px
|
||||
background-color #f25d8e
|
||||
box-shadow 0 4px 4px rgba(255, 112, 159, 0.3)
|
||||
position absolute
|
||||
top 50%
|
||||
left 10%
|
||||
transform translateY(-50%)
|
||||
border-radius 4px
|
||||
cursor pointer
|
||||
+maxWidth768()
|
||||
width: 125px;
|
||||
left: 54px;
|
||||
|
||||
&:hover
|
||||
background-color #ff6b9a
|
||||
|
||||
& #text-con
|
||||
width 100px
|
||||
height 100%
|
||||
margin 0 auto
|
||||
position relative
|
||||
|
||||
|
||||
& #linght
|
||||
width 0
|
||||
height 0
|
||||
position absolute
|
||||
top 36%
|
||||
left 4px
|
||||
border-color transparent
|
||||
border-style solid
|
||||
border-width 10px
|
||||
border-top 10px solid #fff
|
||||
border-radius 4px
|
||||
transform rotate(-55deg)
|
||||
|
||||
&::after
|
||||
position absolute
|
||||
top -13px
|
||||
left -11px
|
||||
content ""
|
||||
width 0
|
||||
height 0
|
||||
border-color transparent
|
||||
border-style solid
|
||||
border-width 10px
|
||||
border-top 10px solid #fff
|
||||
transform rotate(180deg)
|
||||
border-radius 4px
|
||||
|
||||
& #TA
|
||||
float right
|
||||
line-height 50px
|
||||
font-size 15px
|
||||
color #fff
|
||||
|
||||
& #tube-con
|
||||
width 157px
|
||||
height 55px
|
||||
position absolute
|
||||
right -5px
|
||||
top 15px
|
||||
|
||||
& svg
|
||||
width 100%
|
||||
height 100%
|
||||
|
||||
& #mask
|
||||
width 0px
|
||||
height 100%
|
||||
overflow hidden
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
transition all 0.5s
|
||||
|
||||
& #mask svg
|
||||
width 157px
|
||||
height 55px
|
||||
|
||||
& #TA-con:hover + #tube-con > #mask
|
||||
width 157px
|
||||
|
||||
& #TA-con:hover + #tube-con > #orange-mask
|
||||
animation move1 0.5s linear 0.2s infinite
|
||||
|
||||
& #TA-con:hover + #tube-con > #orange-mask svg
|
||||
animation movetwo 0.5s linear 0.2s infinite
|
||||
|
||||
& #orange-mask
|
||||
width 18px
|
||||
height 100%
|
||||
overflow hidden
|
||||
position absolute
|
||||
left -15px
|
||||
top 0px
|
||||
|
||||
& #orange-mask svg
|
||||
position absolute
|
||||
top 0
|
||||
left 15px
|
||||
width 157px
|
||||
height 55px
|
||||
|
||||
@keyframes move1
|
||||
0%
|
||||
transform: translateX(-15px);
|
||||
100%
|
||||
transform: translateX(140px);
|
||||
|
||||
@keyframes movetwo
|
||||
0%
|
||||
transform: translateX(15px);
|
||||
100%
|
||||
transform: translateX(-140px);
|
||||
|
||||
.reward #people
|
||||
position absolute
|
||||
right 10px
|
||||
top 4px
|
||||
font-size 12px
|
||||
font-family "雅黑"
|
||||
color #aaa
|
||||
|
||||
& > b
|
||||
color #777
|
||||
@@ -0,0 +1,168 @@
|
||||
#tag #tag-page-tags
|
||||
display: flex
|
||||
flex-flow: row wrap
|
||||
|
||||
#tag #tag-page-tags a
|
||||
line-height: 1.6
|
||||
display: flex
|
||||
align-items: center
|
||||
color: var(--anzhiyu-fontcolor) !important
|
||||
padding: 0.1rem 0.5rem
|
||||
margin: 0.25rem
|
||||
border-radius: 8px
|
||||
border: var(--style-border-always)
|
||||
|
||||
&.selected
|
||||
box-shadow: var(--anzhiyu-shadow-theme)
|
||||
color: var(--anzhiyu-white) !important
|
||||
background: var(--anzhiyu-theme)
|
||||
border: var(--style-border-none)
|
||||
|
||||
&.select .tagsPageCount
|
||||
background: var(--anzhiyu-card-bg)
|
||||
color: var(--anzhiyu-lighttext)
|
||||
|
||||
#post .tag_share .post-meta__box__tags span.tagsPageCount,
|
||||
#tag-page-tags .tagsPageCount
|
||||
padding: 4px 6px
|
||||
background: var(--anzhiyu-secondbg)
|
||||
border: var(--style-border-always)
|
||||
min-width: 22.5px
|
||||
display: inline-block
|
||||
border-radius: 4px
|
||||
line-height: 0.6rem
|
||||
text-align: center
|
||||
font-size: 0.7rem
|
||||
color: var(--anzhiyu-fontcolor)
|
||||
margin-left: 4px
|
||||
|
||||
#tag #tag-page-tags a:hover .tagsPageCount,
|
||||
#post .tag_share .post-meta__box__tags:hover span.tagsPageCount
|
||||
background: var(--anzhiyu-card-bg)
|
||||
color: var(--anzhiyu-lighttext)
|
||||
|
||||
#tag #tag-page-tags a
|
||||
font-family: $font-family
|
||||
font-size: 0.9em
|
||||
|
||||
#tag #tag-page-tags a:hover
|
||||
box-shadow: var(--anzhiyu-shadow-theme)
|
||||
color: var(--anzhiyu-white) !important
|
||||
background: var(--anzhiyu-theme)
|
||||
border: var(--style-border-none)
|
||||
|
||||
span.tags-punctuation,
|
||||
span.categoryes-punctuation
|
||||
margin-right: 4px
|
||||
|
||||
span.tags-punctuation .icon-biaoqian,
|
||||
span.categoryes-punctuation .icon-biaoqian
|
||||
font-size: 13px
|
||||
|
||||
.tagsPageCount
|
||||
font-family: $font-family
|
||||
|
||||
[data-theme="light"] #post .tag_share .post-meta__box__tags span.tagsPageCount
|
||||
background-color: transparent
|
||||
color: white
|
||||
|
||||
[data-theme="light"] #post .tag_share .post-meta__box__categoryes span.categoryesPageCount
|
||||
background-color: transparent
|
||||
color: white
|
||||
|
||||
#post .tag_share .post-meta__box__categoryes span.categoryesPageCount
|
||||
padding: 4px 6px
|
||||
background: var(--anzhiyu-secondbg)
|
||||
border: var(--style-border-always)
|
||||
min-width: 22.5px
|
||||
display: inline-block
|
||||
border-radius: 4px
|
||||
line-height: 0.6rem
|
||||
text-align: center
|
||||
font-size: 0.7rem
|
||||
color: var(--anzhiyu-fontcolor)
|
||||
margin-left: 4px
|
||||
|
||||
.post-meta__box__categories
|
||||
border-radius: 12px
|
||||
|
||||
/* 文章彩色标签 */
|
||||
/*文章随机彩色标签*/
|
||||
.post-meta__box a
|
||||
color: var(--anzhiyu-white)
|
||||
border: none
|
||||
|
||||
[data-theme="dark"] .post-meta__box a
|
||||
opacity: 0.5
|
||||
|
||||
[data-theme="dark"] .post-reward .reward-button,
|
||||
[data-theme="dark"] .reward-link.mode
|
||||
opacity: 0.5
|
||||
|
||||
.post-meta__box__tag-list a:nth-child(5n)
|
||||
background-color: #4a4a4a
|
||||
color: #fff
|
||||
|
||||
.post-meta__box__tag-list a:nth-child(5n + 1)
|
||||
background-color: #ff5e5c
|
||||
color: #fff
|
||||
|
||||
.post-meta__box__tag-list a:nth-child(5n + 2)
|
||||
background-color: #ffbb50
|
||||
color: #fff
|
||||
|
||||
.post-meta__box__tag-list a:nth-child(5n + 3)
|
||||
background-color: #1ac756
|
||||
color: #fff
|
||||
|
||||
.post-meta__box__tag-list a:nth-child(5n + 4)
|
||||
background-color: #19b5fe
|
||||
color: #fff
|
||||
|
||||
.post-meta__box__tag-list a:hover
|
||||
background-color: var(--anzhiyu-main)
|
||||
color: #fff
|
||||
[data-theme="dark"] .post-meta__box__tag-list a:hover
|
||||
color: #fff
|
||||
/* 文章分类颜色背景 */
|
||||
.post-meta__box__category-list a:nth-child(5n)
|
||||
background-color: #4a4a4a
|
||||
color: #fff
|
||||
|
||||
.post-meta__box__category-list a:nth-child(5n + 1)
|
||||
background-color: #1ac756
|
||||
color: #fff
|
||||
|
||||
.post-meta__box__category-list a:nth-child(5n + 2)
|
||||
background-color: #ffbb50
|
||||
color: #fff
|
||||
|
||||
.post-meta__box__category-list a:nth-child(5n + 3)
|
||||
background-color: #19b5fe
|
||||
color: #fff
|
||||
|
||||
.post-meta__box__category-list a:nth-child(5n + 4)
|
||||
background-color: #ff5e5c
|
||||
color: #fff
|
||||
|
||||
|
||||
|
||||
body[data-type="tags"],body[data-type="categories"]
|
||||
#page
|
||||
border-radius: 12px
|
||||
+maxWidth768()
|
||||
#tag
|
||||
padding: 0px 15px 20px
|
||||
.page-title
|
||||
margin: 8px 0 0px
|
||||
+maxWidth768()
|
||||
#body-wrap .layout
|
||||
padding: 0 20px 15px
|
||||
#tag #tag-page-tags
|
||||
justify-content: center;
|
||||
a
|
||||
font-size: 1.4rem;
|
||||
margin: 0.3rem 0.65rem;
|
||||
+maxWidth768()
|
||||
font-size: 1.8rem;
|
||||
margin: 0.6rem 0.8rem;
|
||||
@@ -0,0 +1,23 @@
|
||||
.tag-cloud
|
||||
&-list
|
||||
a
|
||||
display: inline-block
|
||||
padding: 0 8px
|
||||
transition: all .3s
|
||||
|
||||
&:hover
|
||||
color: $text-hover !important
|
||||
transform: scale(1.1)
|
||||
|
||||
+maxWidth768()
|
||||
zoom: .85
|
||||
|
||||
&-title
|
||||
font-size: 2.57em
|
||||
|
||||
+maxWidth768()
|
||||
font-size: 2em
|
||||
|
||||
h1.page-title
|
||||
& + .tag-cloud-list
|
||||
text-align: left
|
||||
@@ -0,0 +1,156 @@
|
||||
#algolia-search
|
||||
.search-dialog
|
||||
.ais-SearchBox
|
||||
input
|
||||
padding: .5rem 1rem
|
||||
width: 100%
|
||||
outline: none
|
||||
border: var(--style-border)
|
||||
border-radius: var(--anzhiyu-radius)
|
||||
background: var(--anzhiyu-secondbg)
|
||||
color: var(--search-input-color)
|
||||
&:focus
|
||||
border: var(--style-border-hover)
|
||||
.search-dialog-title
|
||||
font-weight: 700;
|
||||
color: var(--anzhiyu-main);
|
||||
|
||||
|
||||
.ais-Hits-list
|
||||
margin: 0
|
||||
padding: 0
|
||||
@extend .list-beauty
|
||||
|
||||
.ais-Hits-item
|
||||
&:hover
|
||||
background: var(--anzhiyu-main)
|
||||
cursor pointer
|
||||
transition: all .2s;
|
||||
a
|
||||
color: var(--anzhiyu-white)
|
||||
mark
|
||||
background: transparent
|
||||
color: $search-keyword-highlight
|
||||
font-weight: bold
|
||||
|
||||
.algolia-hit-item-content
|
||||
margin: 0 0 8px
|
||||
word-break: break-all
|
||||
|
||||
.ais-Pagination
|
||||
margin: 20px 0 0
|
||||
padding: 0
|
||||
text-align: center
|
||||
|
||||
.ais-Pagination-list
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style: none
|
||||
|
||||
.ais-Pagination-item
|
||||
display: inline
|
||||
margin: 0 4px
|
||||
padding: 0
|
||||
|
||||
.ais-Pagination-link
|
||||
display: inline-block
|
||||
min-width: 24px
|
||||
height: 24px
|
||||
text-align: center
|
||||
line-height: 24px
|
||||
|
||||
.ais-Pagination-item--selected
|
||||
a
|
||||
background: $theme-paginator-color
|
||||
color: #eee
|
||||
cursor: default
|
||||
|
||||
.ais-Pagination-item--disabled
|
||||
visibility: hidden
|
||||
|
||||
.algolia-logo
|
||||
padding-top: 2px
|
||||
width: 80px
|
||||
height: 30px
|
||||
|
||||
#algolia-hits
|
||||
overflow-y: scroll
|
||||
min-height: 20px
|
||||
.tag-list
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
margin-right: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
border: var(--style-border-always);
|
||||
cursor: pointer;
|
||||
|
||||
#algolia-info
|
||||
div
|
||||
display: inline
|
||||
|
||||
.algolia-poweredBy
|
||||
float: right
|
||||
#algolia-search #search-mask
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
background: var(--anzhiyu-maskbg);
|
||||
|
||||
#algolia-search .search-dialog
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--anzhiyu-shadow-lightblack);
|
||||
background: var(--anzhiyu-card-bg);
|
||||
border: var(--style-border);
|
||||
transition: 0.3s;
|
||||
|
||||
#algolia-search .search-dialog .ais-Pagination .ais-Pagination-item--selected a
|
||||
border-radius: 4px;
|
||||
background: var(--anzhiyu-main);
|
||||
color: var(--anzhiyu-white);
|
||||
|
||||
#algolia-search .search-dialog:hover
|
||||
border: var(--style-border-hover);
|
||||
box-shadow: var(--anzhiyu-shadow-theme);
|
||||
+maxWidth768()
|
||||
border: var(--style-border)
|
||||
|
||||
#algolia-search .list-beauty li,
|
||||
#algolia-search .category-lists ul li,
|
||||
#algolia-search .search-dialog .ais-Hits-list li
|
||||
padding: 0;
|
||||
|
||||
#algolia-search .list-beauty li:before,
|
||||
#algolia-search .category-lists ul li:before,
|
||||
#algolia-search .search-dialog .ais-Hits-list li:before
|
||||
display: none;
|
||||
|
||||
#algolia-search .list-beauty li,
|
||||
#algolia-search .category-lists ul li,
|
||||
#algolia-search .search-dialog .ais-Hits-list li
|
||||
border-radius: 8px;
|
||||
border: var(--style-border);
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
#algolia-search .search-dialog .ais-Hits-list a
|
||||
color: var(--search-result-title);
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
padding: 5px 10px;
|
||||
width: 100%;
|
||||
transition: all .2s;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
#algolia-search .search-dialog .ais-Hits-list .search-result-tags a
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
margin-right: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
border: var(--style-border);
|
||||
display: inline;
|
||||
|
||||
#algolia-search .ais-SearchBox-loadingIndicator
|
||||
display: none;
|
||||
@@ -0,0 +1,65 @@
|
||||
.search-dialog
|
||||
position: fixed
|
||||
top: 5rem
|
||||
left: 50%
|
||||
z-index: 1001
|
||||
display: none
|
||||
margin-left: -18.75rem;
|
||||
padding: 1.25rem;
|
||||
width: 37.5rem;
|
||||
border-radius: 8px
|
||||
background: var(--search-bg)
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--anzhiyu-shadow-lightblack);
|
||||
background: var(--anzhiyu-card-bg);
|
||||
border: var(--style-border);
|
||||
transition: .3s;
|
||||
|
||||
+maxWidth768()
|
||||
top: 0
|
||||
left: 0
|
||||
margin: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
border-radius: 0 !important
|
||||
|
||||
+maxHeight680()
|
||||
top: 2rem;
|
||||
|
||||
+maxHeight580()
|
||||
top: 0
|
||||
left: 0
|
||||
margin: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
border-radius: 0 !important
|
||||
|
||||
hr
|
||||
margin: 20px auto
|
||||
|
||||
.search-nav
|
||||
margin: 0 0 14px
|
||||
color: $search-color
|
||||
font-size: 1.4em
|
||||
line-height: 1
|
||||
|
||||
.search-dialog-title
|
||||
margin-right: 10px
|
||||
|
||||
.search-close-button
|
||||
float: right
|
||||
color: $grey
|
||||
transition: color .2s ease-in-out
|
||||
|
||||
&:hover
|
||||
color: $search-color
|
||||
|
||||
#search-mask
|
||||
position: fixed
|
||||
top: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
z-index: 1000
|
||||
display: none
|
||||
background: rgba($dark-black, .6)
|
||||
@@ -0,0 +1,67 @@
|
||||
#local-search
|
||||
.search-dialog
|
||||
.local-search-box
|
||||
margin: 0 auto
|
||||
max-width: 100%
|
||||
width: 100%
|
||||
|
||||
input
|
||||
padding: 5px 14px
|
||||
width: 100%
|
||||
outline: none
|
||||
border: 2px solid $search-color
|
||||
border-radius: 40px
|
||||
background: var(--search-bg)
|
||||
color: var(--search-input-color)
|
||||
-webkit-appearance: none
|
||||
|
||||
.search-wrap
|
||||
display: none
|
||||
|
||||
.local-search__hit-item
|
||||
position: relative
|
||||
padding-left: 24px
|
||||
line-height: 1.7
|
||||
|
||||
&:hover
|
||||
&:before
|
||||
border-color: var(--pseudo-hover)
|
||||
|
||||
&:before
|
||||
$w = .5em
|
||||
position: absolute
|
||||
top: .45em
|
||||
left: 0
|
||||
width: w = $w
|
||||
height: h = w
|
||||
border: 3px solid $search-color
|
||||
border-radius: w
|
||||
background: transparent
|
||||
content: ''
|
||||
line-height: h
|
||||
transition: all .2s ease-in-out
|
||||
|
||||
a
|
||||
display: block
|
||||
color: var(--search-result-title)
|
||||
font-weight: 600
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
color: $search-color
|
||||
|
||||
.search-result
|
||||
margin: 0 8px 8px 0
|
||||
word-break: break-all
|
||||
|
||||
.search-keyword
|
||||
color: $search-keyword-highlight
|
||||
font-weight: bold
|
||||
|
||||
.search-result-list
|
||||
overflow-y: auto
|
||||
max-height: calc(80vh - 130px)
|
||||
|
||||
+maxWidth768()
|
||||
padding-bottom: 40px
|
||||
max-height: 75vh !important
|
||||
@@ -0,0 +1,116 @@
|
||||
.introduction-card
|
||||
position: relative;
|
||||
.img-alt
|
||||
display: none
|
||||
|
||||
.introduction-card-bottom {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.introduction-card:active .introduction-card-bottom {
|
||||
background-color: var(--anzhiyu-main);
|
||||
color: white;
|
||||
}
|
||||
.introduction-card:active .introduction-card-bottom .left .info .subTitle {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
@keyframes resetAnimation {
|
||||
0% {
|
||||
background-color: var(--anzhiyu-main);
|
||||
color: white;
|
||||
}
|
||||
100% {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.introduction-card:active .introduction-card-bottom {
|
||||
animation: resetAnimation 3s 1s forwards;
|
||||
}
|
||||
|
||||
.introduction-card
|
||||
display: flex
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
border-radius: 15px
|
||||
box-shadow: var(--anzhiyu-shadow-blackdeep)
|
||||
height: 520px;
|
||||
transition: all 0.3s ease 0s;
|
||||
cursor pointer
|
||||
+maxWidth1200()
|
||||
width 80%
|
||||
+maxWidth768()
|
||||
width 100%
|
||||
&:active
|
||||
transform: scale(0.97);
|
||||
.introduction-card-top
|
||||
height 80%
|
||||
width: 100%;
|
||||
overflow hidden
|
||||
border-radius: 15px 15px 0 0;
|
||||
position relative
|
||||
.int-card-info
|
||||
position absolute
|
||||
padding: 20px;
|
||||
.int-tip
|
||||
opacity: .8;
|
||||
font-size: .6rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--anzhiyu-white);
|
||||
.int-cardTitle
|
||||
font-size: 36px;
|
||||
color: var(--anzhiyu-white);
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
img
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0px !important;
|
||||
margin: 0 !important
|
||||
|
||||
.introduction-card-bottom
|
||||
height 20%
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-radius: 0 0 15px 15px;
|
||||
.left
|
||||
width 70%
|
||||
display: flex
|
||||
align-items: center;
|
||||
.info
|
||||
user-select: none
|
||||
.title
|
||||
font-weight: 600;
|
||||
line-height: 26px;
|
||||
.subTitle
|
||||
line-height: 14px;
|
||||
font-size: 14px;
|
||||
color: var(--anzhiyu-gray);
|
||||
opacity: .8;
|
||||
img
|
||||
width 2.875rem
|
||||
height 2.875rem
|
||||
margin: 0 20px !important;
|
||||
border-radius: 12px !important
|
||||
.right
|
||||
width 30%
|
||||
display: flex;
|
||||
align-items: center;
|
||||
a
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background: #EFEEF2
|
||||
color: var(--anzhiyu-main)!important;
|
||||
border-radius: 50px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
margin-right: 20px;
|
||||
&:hover
|
||||
background: var(--anzhiyu-main);
|
||||
color: var(--anzhiyu-white) !important;
|
||||
@@ -0,0 +1,108 @@
|
||||
.bilibili_box
|
||||
display: flex
|
||||
background: var(--card-bg)
|
||||
border: var(--style-border)
|
||||
border-radius: 12px !important
|
||||
overflow: hidden
|
||||
color: var(--font-color) !important
|
||||
text-decoration: none !important
|
||||
transition: .3s
|
||||
border-bottom: var(--style-border) !important
|
||||
padding: 0 !important
|
||||
height 143px
|
||||
&:hover
|
||||
border-color: var(--anzhiyu-main) !important
|
||||
color: var(--anzhiyu-white) !important
|
||||
.bilibili_info .stat svg path
|
||||
fill: var(--anzhiyu-white) !important
|
||||
+maxWidth768()
|
||||
flex-direction: column
|
||||
.bilibili_cover
|
||||
width: 234px
|
||||
position relative
|
||||
+maxWidth768()
|
||||
width: 100%
|
||||
img
|
||||
width: 100%
|
||||
filter: none
|
||||
margin: 0 !important
|
||||
border-radius: 0 !important
|
||||
.play_icon
|
||||
position: absolute
|
||||
width 45px
|
||||
height 45px
|
||||
opacity .8
|
||||
top: 50%
|
||||
left 50%
|
||||
transform: translate(-50%,-50%)
|
||||
span
|
||||
position: absolute
|
||||
bottom: 0px
|
||||
right: 5px
|
||||
color: var(--anzhiyu-white)
|
||||
.bilibili_info
|
||||
padding: 10px 10px 10px 18px
|
||||
line-height: 1
|
||||
width: calc(100% - 200px)
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: space-around
|
||||
+maxWidth768()
|
||||
width: 100%
|
||||
padding-bottom: 25px
|
||||
line-height: 1.5
|
||||
.title
|
||||
font-size: 1.2rem
|
||||
font-weight: bold
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
line-height: 1.5
|
||||
.desc
|
||||
font-size: 15px
|
||||
margin: 2px 0 4px
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
+maxWidth768()
|
||||
white-space: normal
|
||||
display:-webkit-box;
|
||||
-webkit-box-orient:vertical;
|
||||
-webkit-line-clamp:2;
|
||||
.stat
|
||||
font-size: 15px
|
||||
svg
|
||||
margin-right: 3px
|
||||
font-size: 18px
|
||||
width: 1em
|
||||
height: 1em
|
||||
path
|
||||
fill: var(--font-color)
|
||||
span
|
||||
margin-right: 10px
|
||||
display: inline-flex
|
||||
align-items: center
|
||||
.owner
|
||||
display: flex
|
||||
align-items: center
|
||||
line-height: 1
|
||||
font-size: 15px
|
||||
.tip
|
||||
color: #f69
|
||||
border: 1px solid
|
||||
padding: 3px 6px
|
||||
font-size: 12px
|
||||
border-radius: 5px
|
||||
margin: 0 10px 0 0
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
img
|
||||
width 22px
|
||||
height: 22px
|
||||
border-radius: 50% !important
|
||||
object-fit: cover
|
||||
margin 0 5px 0 0 !important
|
||||
|
||||
[data-theme='light'] .bilibili_box .bilibili_info .stat svg,
|
||||
[data-theme='dark'] .bilibili_cover
|
||||
opacity .8
|
||||
@@ -0,0 +1,211 @@
|
||||
[data-theme="dark"]
|
||||
div
|
||||
&.btns
|
||||
filter brightness(0.7)
|
||||
a
|
||||
background 0 0
|
||||
div
|
||||
&.btns
|
||||
margin 0 -8px
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
align-items flex-start
|
||||
overflow visible
|
||||
line-height 1.8
|
||||
b
|
||||
font-size 0.875rem
|
||||
&.wide
|
||||
& > a
|
||||
padding-left 32px
|
||||
padding-right 32px
|
||||
&.fill
|
||||
& > a
|
||||
flex-grow 1
|
||||
width auto
|
||||
&.around
|
||||
justify-content space-around
|
||||
&.center
|
||||
justify-content center
|
||||
&.grid2
|
||||
& > a
|
||||
width calc(100% / 2 - 16px)
|
||||
&.grid3
|
||||
& > a
|
||||
width calc(100% / 3 - 16px)
|
||||
&.grid4
|
||||
& > a
|
||||
width calc(100% / 4 - 16px)
|
||||
&.grid5
|
||||
& > a
|
||||
width calc(100% / 5 - 16px)
|
||||
a
|
||||
transition all 0.28s ease
|
||||
-moz-transition all 0.28s ease
|
||||
-webkit-transition all 0.28s ease
|
||||
-o-transition all 0.28s ease
|
||||
margin 8px
|
||||
margin-top calc(1.25 * 16px + 32px)
|
||||
min-width 120px
|
||||
font-weight bold
|
||||
display flex
|
||||
justify-content flex-start
|
||||
align-content center
|
||||
align-items center
|
||||
flex-direction column
|
||||
padding 8px
|
||||
text-align center
|
||||
background #f6f6f6
|
||||
border-radius 4px
|
||||
& > i
|
||||
background #2196f3!important
|
||||
&:first-child
|
||||
color #fff
|
||||
background #2196f3
|
||||
b
|
||||
font-weight bold
|
||||
line-height 1.3
|
||||
img
|
||||
margin 0.4em auto !important
|
||||
&:not([href])
|
||||
cursor default
|
||||
color inherit
|
||||
a[href]:hover
|
||||
background: var(--anzhiyu-main)
|
||||
color: var(--anzhiyu-white) !important
|
||||
& > i
|
||||
&:first-child
|
||||
background: var(--anzhiyu-main)
|
||||
|
||||
div.btns,
|
||||
div.btns p,
|
||||
div.btns a
|
||||
font-size 0.8125rem
|
||||
color #555
|
||||
|
||||
@media screen and (max-width: 1200px)
|
||||
div
|
||||
&.btns
|
||||
&.grid2
|
||||
& > a
|
||||
width calc(100% / 2 - 16px)
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
div
|
||||
&.btns
|
||||
&.grid2
|
||||
& > a
|
||||
width calc(100% / 2 - 16px)
|
||||
|
||||
@media screen and (max-width: 500px)
|
||||
div
|
||||
&.btns
|
||||
&.grid2
|
||||
& > a
|
||||
width calc(100% / 1 - 16px)
|
||||
|
||||
@media screen and (max-width: 1200px)
|
||||
div
|
||||
&.btns
|
||||
&.grid3
|
||||
& > a
|
||||
width calc(100% / 3 - 16px)
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
div
|
||||
&.btns
|
||||
&.grid3
|
||||
& > a
|
||||
width calc(100% / 3 - 16px)
|
||||
|
||||
@media screen and (max-width: 500px)
|
||||
div
|
||||
&.btns
|
||||
&.grid3
|
||||
& > a
|
||||
width calc(100% / 1 - 16px)
|
||||
|
||||
@media screen and (max-width: 1200px)
|
||||
div
|
||||
&.btns
|
||||
&.grid4
|
||||
& > a
|
||||
width calc(100% / 3 - 16px)
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
div
|
||||
&.btns
|
||||
&.grid4
|
||||
& > a
|
||||
width calc(100% / 3 - 16px)
|
||||
|
||||
@media screen and (max-width: 500px)
|
||||
div
|
||||
&.btns
|
||||
&.grid4
|
||||
& > a
|
||||
width calc(100% / 2 - 16px)
|
||||
|
||||
@media screen and (max-width: 1200px)
|
||||
div
|
||||
&.btns
|
||||
&.grid5
|
||||
& > a
|
||||
width calc(100% / 4 - 16px)
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
div
|
||||
&.btns
|
||||
&.grid5
|
||||
& > a
|
||||
width calc(100% / 3 - 16px)
|
||||
|
||||
@media screen and (max-width: 500px)
|
||||
div
|
||||
&.btns
|
||||
&.grid5
|
||||
& > a
|
||||
width calc(100% / 2 - 16px)
|
||||
|
||||
div.btns a > img:first-child,
|
||||
div.btns a > i:first-child
|
||||
transition all 0.28s ease
|
||||
-moz-transition all 0.28s ease
|
||||
-webkit-transition all 0.28s ease
|
||||
-o-transition all 0.28s ease
|
||||
height 64px
|
||||
width 64px
|
||||
box-shadow 0 1px 2px 0 rgba(0, 0, 0, 0.1)
|
||||
margin 16px 8px 4px 8px
|
||||
margin-top calc(-1.25 * 16px - 32px)
|
||||
border 2px solid #fff
|
||||
background #fff
|
||||
line-height 60px
|
||||
font-size 28px
|
||||
|
||||
div.btns a > img:first-child.auto,
|
||||
div.btns a > i:first-child.auto
|
||||
width auto
|
||||
|
||||
div.btns a p,
|
||||
div.btns a b
|
||||
margin 0.25em
|
||||
font-weight normal
|
||||
line-height 1.25
|
||||
word-wrap break-word
|
||||
|
||||
div.btns a[href]:hover,
|
||||
div.btns a[href]:hover b
|
||||
color #ff5722
|
||||
|
||||
div.btns a[href]:hover > img:first-child,
|
||||
div.btns a[href]:hover > i:first-child
|
||||
transform scale(1.1) translateY(-8px)
|
||||
box-shadow 0 4px 8px 0 rgba(0, 0, 0, 0.1)
|
||||
|
||||
div.btns.circle a > img:first-child,
|
||||
div.btns.circle a > i:first-child
|
||||
border-radius 32px
|
||||
|
||||
div.btns.rounded a > img:first-child,
|
||||
div.btns.rounded a > i:first-child
|
||||
border-radius 16px
|
||||
@@ -0,0 +1,56 @@
|
||||
#article-container
|
||||
.btn-center
|
||||
margin: 0 0 20px
|
||||
text-align: center
|
||||
|
||||
.btn-anzhiyu
|
||||
display: inline-block
|
||||
margin: 0 4px 6px
|
||||
padding: 0 15px
|
||||
background-color: var(--btn-anzhiyu-color, $btn-default-color)
|
||||
color: $btn-color
|
||||
line-height: 2
|
||||
border-radius: 8px
|
||||
|
||||
for $type in $color-types
|
||||
&.{$type}
|
||||
--btn-anzhiyu-color: lookup('$tagsP-' + $type + '-color')
|
||||
|
||||
&:hover
|
||||
background-color: var(--btn-hover-color)
|
||||
|
||||
i + span
|
||||
margin-left: 6px
|
||||
|
||||
&:not(.block) + .btn-anzhiyu:not(.block)
|
||||
margin: 0 4px 20px
|
||||
|
||||
&.block
|
||||
display: block
|
||||
margin: 0 0 20px
|
||||
width: fit-content
|
||||
width: -moz-fit-content
|
||||
|
||||
&.center
|
||||
margin: 0 auto 20px
|
||||
|
||||
&.right
|
||||
margin: 0 0 20px auto
|
||||
|
||||
&.larger
|
||||
padding: 6px 15px
|
||||
|
||||
&:hover
|
||||
text-decoration: none
|
||||
|
||||
&.outline
|
||||
border: 1px solid transparent
|
||||
border-color: var(--btn-anzhiyu-color, $btn-default-color)
|
||||
background-color: transparent
|
||||
color: var(--btn-anzhiyu-color, $btn-default-color)
|
||||
|
||||
&:hover
|
||||
background-color: var(--btn-anzhiyu-color, $btn-default-color)
|
||||
|
||||
&:hover
|
||||
color: white !important
|
||||
@@ -0,0 +1,193 @@
|
||||
.checkbox
|
||||
display flex
|
||||
align-items center
|
||||
input
|
||||
-webkit-appearance none
|
||||
-moz-appearance none
|
||||
-ms-appearance none
|
||||
-o-appearance none
|
||||
appearance none
|
||||
position relative
|
||||
height 16px
|
||||
width 16px
|
||||
transition all 0.15s ease-out 0s
|
||||
cursor pointer
|
||||
display inline-block
|
||||
outline none
|
||||
border-radius 2px
|
||||
flex-shrink 0
|
||||
margin-right 8px
|
||||
border 2px solid #2196f3
|
||||
pointer-events: none
|
||||
input[type="checkbox"]:before
|
||||
left 1px
|
||||
top 5px
|
||||
width 0
|
||||
height 2px
|
||||
transition all 0.2s ease-in
|
||||
transform rotate(45deg)
|
||||
-webkit-transform rotate(45deg)
|
||||
-moz-transform rotate(45deg)
|
||||
-ms-transform rotate(45deg)
|
||||
-o-transform rotate(45deg)
|
||||
input[type="checkbox"]:after
|
||||
right 7px
|
||||
bottom 3px
|
||||
width 2px
|
||||
height 0
|
||||
transition all 0.2s ease-out
|
||||
transform rotate(40deg)
|
||||
-webkit-transform rotate(40deg)
|
||||
-moz-transform rotate(40deg)
|
||||
-ms-transform rotate(40deg)
|
||||
-o-transform rotate(40deg)
|
||||
transition-delay 0.25s
|
||||
input[type="checkbox"]:checked
|
||||
background #2196f3
|
||||
&:before
|
||||
left 0
|
||||
top 7px
|
||||
width 6px
|
||||
height 2px
|
||||
&:after
|
||||
right 3px
|
||||
bottom 1px
|
||||
width 2px
|
||||
height 10px
|
||||
&.minus
|
||||
input[type="checkbox"]:before
|
||||
transform rotate(0)
|
||||
left 1px
|
||||
top 5px
|
||||
width 0
|
||||
height 2px
|
||||
input[type="checkbox"]:after
|
||||
transform rotate(0)
|
||||
left 1px
|
||||
top 5px
|
||||
width 0
|
||||
height 2px
|
||||
input[type="checkbox"]:checked
|
||||
&:before
|
||||
left 1px
|
||||
top 5px
|
||||
width 10px
|
||||
height 2px
|
||||
&:after
|
||||
left 1px
|
||||
top 5px
|
||||
width 10px
|
||||
height 2px
|
||||
&.plus
|
||||
input[type="checkbox"]:before
|
||||
transform rotate(0)
|
||||
left 1px
|
||||
top 5px
|
||||
width 0
|
||||
height 2px
|
||||
input[type="checkbox"]:after
|
||||
transform rotate(0)
|
||||
left 5px
|
||||
top 1px
|
||||
width 2px
|
||||
height 0
|
||||
input[type="checkbox"]:checked
|
||||
&:before
|
||||
left 1px
|
||||
top 5px
|
||||
width 10px
|
||||
height 2px
|
||||
&:after
|
||||
left 5px
|
||||
top 1px
|
||||
width 2px
|
||||
height 10px
|
||||
&.times
|
||||
input[type="checkbox"]:before
|
||||
transform rotate(45deg)
|
||||
left 3px
|
||||
top 1px
|
||||
width 0
|
||||
height 2px
|
||||
input[type="checkbox"]:after
|
||||
transform rotate(135deg)
|
||||
right 3px
|
||||
top 1px
|
||||
width 0
|
||||
height 2px
|
||||
input[type="checkbox"]:checked
|
||||
&:before
|
||||
left 1px
|
||||
top 5px
|
||||
width 10px
|
||||
height 2px
|
||||
&:after
|
||||
right 1px
|
||||
top 5px
|
||||
width 10px
|
||||
height 2px
|
||||
input[type="radio"]
|
||||
border-radius 50%
|
||||
input[type="radio"]:before
|
||||
content ""
|
||||
display block
|
||||
width 8px
|
||||
height 8px
|
||||
border-radius 50%
|
||||
margin 2px
|
||||
transform scale(0)
|
||||
transition all 0.25s ease-out
|
||||
input[type="radio"]:checked
|
||||
&:before
|
||||
transform scale(1)
|
||||
background var(--text-bg-hover)
|
||||
&.red
|
||||
input
|
||||
border-color #fe5f58
|
||||
input[type="checkbox"]:checked
|
||||
background #fe5f58
|
||||
input[type="radio"]:checked
|
||||
&:before
|
||||
background #fe5f58
|
||||
&.green
|
||||
input
|
||||
border-color #3dc550
|
||||
input[type="checkbox"]:checked
|
||||
background #3dc550
|
||||
input[type="radio"]:checked
|
||||
&:before
|
||||
background #3dc550
|
||||
&.yellow
|
||||
input
|
||||
border-color #ffbd2b
|
||||
input[type="checkbox"]:checked
|
||||
background #ffbd2b
|
||||
input[type="radio"]:checked
|
||||
&:before
|
||||
background #ffbd2b
|
||||
&.cyan
|
||||
input
|
||||
border-color #1bcdfc
|
||||
input[type="checkbox"]:checked
|
||||
background #1bcdfc
|
||||
input[type="radio"]:checked
|
||||
&:before
|
||||
background #1bcdfc
|
||||
&.blue
|
||||
input
|
||||
border-color #2196f3
|
||||
input[type="checkbox"]:checked
|
||||
background #2196f3
|
||||
input[type="radio"]:checked
|
||||
&:before
|
||||
background #2196f3
|
||||
p
|
||||
display inline-block
|
||||
margin-top 2px !important
|
||||
margin-bottom 0 !important
|
||||
|
||||
.checkbox input[type="checkbox"]:before,
|
||||
.checkbox input[type="checkbox"]:after
|
||||
position absolute
|
||||
content ""
|
||||
background #fff
|
||||
@@ -0,0 +1,141 @@
|
||||
trans($time = 0.28s)
|
||||
transition: all $time ease
|
||||
-moz-transition: all $time ease
|
||||
-webkit-transition: all $time ease
|
||||
-o-transition: all $time ease
|
||||
bgcolor($c, $mix = 10)
|
||||
return mix($c, #fff, $mix)
|
||||
details[open]:not(.tk-admin-config-group) {
|
||||
background: var(--anzhiyu-card-bg);
|
||||
}
|
||||
[data-theme="dark"]
|
||||
details.folding-tag
|
||||
background: transparent
|
||||
details.folding-tag
|
||||
display: block
|
||||
padding: 16px
|
||||
margin: 1em 0
|
||||
border-radius: 4px
|
||||
font-size: var(--global-font-size)
|
||||
trans()
|
||||
summary
|
||||
cursor: pointer
|
||||
padding: 16px
|
||||
margin: 0 - 16px
|
||||
border-radius: 4px
|
||||
color: alpha(#444, .7)
|
||||
font-size: .875rem!important
|
||||
font-weight: bold
|
||||
position: relative
|
||||
line-height: normal
|
||||
>
|
||||
p,h1,h2,h3,h4,h5,h6
|
||||
display: inline
|
||||
border-bottom: none !important
|
||||
&:hover
|
||||
color: #444
|
||||
&:after
|
||||
position: absolute
|
||||
content: '+'
|
||||
text-align: center
|
||||
top: 50%
|
||||
transform: translateY(-50%)
|
||||
right: 16px
|
||||
|
||||
border: 1px solid #f6f6f6
|
||||
>summary
|
||||
background: var(--anzhiyu-card-bg)
|
||||
&[purple]
|
||||
border-color: bgcolor(#d017ee)
|
||||
>summary
|
||||
background: bgcolor(#d017ee)
|
||||
&[blue]
|
||||
border-color: bgcolor(#2196f3)
|
||||
>summary
|
||||
background: bgcolor(#2196f3)
|
||||
&[cyan]
|
||||
border-color: bgcolor(#1BCDFC)
|
||||
>summary
|
||||
background: bgcolor(#1BCDFC)
|
||||
&[green]
|
||||
border-color: bgcolor(#3DC550)
|
||||
>summary
|
||||
background: bgcolor(#3DC550)
|
||||
&[yellow]
|
||||
border-color: bgcolor(#FFBD2B)
|
||||
>summary
|
||||
background: bgcolor(#FFBD2B)
|
||||
&[orange]
|
||||
border-color: bgcolor(#ec7616)
|
||||
>summary
|
||||
background: bgcolor(#ec7616)
|
||||
&[red]
|
||||
border-color: bgcolor(#FE5F58)
|
||||
>summary
|
||||
background: bgcolor(#FE5F58)
|
||||
|
||||
details.folding-tag[open]
|
||||
border-color: alpha(#444, .2)
|
||||
>summary
|
||||
border-bottom: 1px solid alpha(#444, .2)
|
||||
border-bottom-left-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
&[purple]
|
||||
border-color: alpha(#d017ee, .3)
|
||||
>summary
|
||||
border-bottom-color: alpha(#d017ee, .3)
|
||||
&[blue]
|
||||
border-color: alpha(#2196f3, .3)
|
||||
>summary
|
||||
border-bottom-color: alpha(#2196f3, .3)
|
||||
&[cyan]
|
||||
border-color: alpha(#1BCDFC, .3)
|
||||
>summary
|
||||
border-bottom-color: alpha(#1BCDFC, .3)
|
||||
&[green]
|
||||
border-color: alpha(#3DC550, .3)
|
||||
>summary
|
||||
border-bottom-color: alpha(#3DC550, .3)
|
||||
&[yellow]
|
||||
border-color: alpha(#FFBD2B, .3)
|
||||
>summary
|
||||
border-bottom-color: alpha(#FFBD2B, .3)
|
||||
&[orange]
|
||||
border-color: alpha(#ec7616, .3)
|
||||
>summary
|
||||
border-bottom-color: alpha(#ec7616, .3)
|
||||
&[red]
|
||||
border-color: alpha(#FE5F58, .3)
|
||||
>summary
|
||||
border-bottom-color: alpha(#FE5F58, .3)
|
||||
>summary
|
||||
color: #444
|
||||
margin-bottom: 0
|
||||
&:hover
|
||||
&:after
|
||||
content: '-'
|
||||
>div.content
|
||||
padding: 16px
|
||||
margin: 0 - 16px
|
||||
margin-top: 0
|
||||
p>a:hover
|
||||
text-decoration: underline
|
||||
>
|
||||
p,.tabs,ul,ol,.highlight,.note,details
|
||||
&:first-child
|
||||
margin-top: 0
|
||||
&:last-child
|
||||
margin-bottom: 0
|
||||
[data-theme="dark"]
|
||||
details[open]
|
||||
& > div
|
||||
&.content
|
||||
padding 16px
|
||||
margin -16px
|
||||
margin-top 0
|
||||
background: transparent;
|
||||
color rgba(255, 255, 255, 0.6)
|
||||
details
|
||||
& > summary
|
||||
filter brightness(1)
|
||||
background: var(--anzhiyu-card-bg) !important;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user