shenjianZ/QuickReference
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix theme...

Browse Source
This commit is contained in:
shenjianZ
2024-08-01 08:43:15 +08:00
parent 192ef21b12
commit 02130fba76
371 changed files with 28176 additions and 3285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
themes/anzhiyu/source/css/_extra/album/album.css Normal file
View File

@@ -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;
}
}

309
themes/anzhiyu/source/css/_extra/album/album_detail.css Normal file
View File

@@ -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;
}

216
themes/anzhiyu/source/css/_extra/anzhiyu/custom.css Normal file
View File

@@ -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;
}
}

53
themes/anzhiyu/source/css/_extra/aside_weixin/aside_weixin.css Normal file
View File

@@ -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);
}

61
themes/anzhiyu/source/css/_extra/catalog_list/catalog_list.css Normal file
View File

@@ -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);
}

105
themes/anzhiyu/source/css/_extra/categoryBar/categoryBar.css Normal file
View File

@@ -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;
}
}

137
themes/anzhiyu/source/css/_extra/clock/clock.css Normal file
View File

@@ -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;
}
}

83
themes/anzhiyu/source/css/_extra/code/code.css Normal file
View File

@@ -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;
}

70
themes/anzhiyu/source/css/_extra/code/details_summary.css Normal file
View File

@@ -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;
}

136
themes/anzhiyu/source/css/_extra/commentBarrage/commentBarrage.css Normal file
View File

@@ -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;
}

976
themes/anzhiyu/source/css/_extra/console/console.css Normal file
View File

@@ -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%);
}
}

309
themes/anzhiyu/source/css/_extra/essay_page/essay_page.css Normal file
View File

@@ -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;
}

101
themes/anzhiyu/source/css/_extra/essay_page/home_essay_bar.css Normal file
View File

@@ -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);
}
}

323
themes/anzhiyu/source/css/_extra/fix/aplayer.css Normal file
View File

@@ -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;
}

46
themes/anzhiyu/source/css/_extra/fix/bilibili-bangumi.css Normal file
View File

@@ -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;
}

16
themes/anzhiyu/source/css/_extra/fix/bilibili-ratio.css Normal file
View File

@@ -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;
}

15
themes/anzhiyu/source/css/_extra/fix/categories.css Normal file
View File

@@ -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;
}
}

7
themes/anzhiyu/source/css/_extra/fix/clock.css Normal file
View File

@@ -0,0 +1,7 @@
.card-glass .card-background {
box-shadow: none;
margin: 0 15px;
}
[data-theme="dark"] .card-glass .card-background {
background-color: transparent;
}

9
themes/anzhiyu/source/css/_extra/fix/comments.css Normal file
View File

@@ -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;
}

17
themes/anzhiyu/source/css/_extra/fix/dark.css Normal file
View File

@@ -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;
}

7
themes/anzhiyu/source/css/_extra/fix/fcircle_page.css Normal file
View File

@@ -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;
}
}

6
themes/anzhiyu/source/css/_extra/fix/gitcalendar.css Normal file
View File

@@ -0,0 +1,6 @@
#gitcalendar #git_container ul li {
margin: 0 !important;
}
#gitcalendar #git_container ul li::before{
content: none !important;
}

4
themes/anzhiyu/source/css/_extra/fix/hexo-tag-dplayer.css Normal file
View File

@@ -0,0 +1,4 @@
.dplayer-video-wrap,
.dplayer {
border-radius: 12px;
}

6
themes/anzhiyu/source/css/_extra/fix/hide-block.css Normal file
View File

@@ -0,0 +1,6 @@
.note .hide-block {
margin: 0;
}
.note .hide-block button {
border-radius: 30px;
}

14
themes/anzhiyu/source/css/_extra/fix/link_page.css Normal file
View File

@@ -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;
}

15
themes/anzhiyu/source/css/_extra/fix/overflow.css Normal file
View File

@@ -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;
}
}

8
themes/anzhiyu/source/css/_extra/fix/radius.css Normal file
View File

@@ -0,0 +1,8 @@
.relatedPosts > .relatedPosts-list > div {
border-radius: var(--anzhiyu-border-radius);
}
/* 侧边栏按钮圆角 */
#rightside > div > button {
border-radius: 5px;
}

15
themes/anzhiyu/source/css/_extra/fix/site-card.css Normal file
View File

@@ -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;
}

34
themes/anzhiyu/source/css/_extra/footer/footer.css Normal file
View File

@@ -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);
}
}

95
themes/anzhiyu/source/css/_extra/friends/friends.css Normal file
View File

@@ -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;
}

33
themes/anzhiyu/source/css/_extra/greeting_box/greeting_box.css Normal file
View File

@@ -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;
}

118
themes/anzhiyu/source/css/_extra/home_top/categorygroup.css Normal file
View File

@@ -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%;
}

11
themes/anzhiyu/source/css/_extra/home_top/home_top.css Normal file
View File

@@ -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;
}

103
themes/anzhiyu/source/css/_extra/home_top/home_top_post_group.css Normal file
View File

@@ -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
themes/anzhiyu/source/css/_extra/home_top/random-banner.css Normal file
View File

439
themes/anzhiyu/source/css/_extra/home_top/swiperstyle.css Normal file
View File

@@ -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;
}

268
themes/anzhiyu/source/css/_extra/home_top/top_group_banner.css Normal file
View File

@@ -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);
}

42
themes/anzhiyu/source/css/_extra/local_search/local_search.css Normal file
View File

@@ -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);
}

3
themes/anzhiyu/source/css/_extra/reset/reset.css Normal file
View File

@@ -0,0 +1,3 @@
b, strong {
color: var(--anzhiyu-lighttext);
}

13
themes/anzhiyu/source/css/_extra/reward/about-reward.css Normal file
View File

@@ -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;
}
}

2871
themes/anzhiyu/source/css/_extra/room/room.css Normal file
View File

File diff suppressed because it is too large Load Diff

59
themes/anzhiyu/source/css/_extra/runtime/runtime.css Normal file
View File

@@ -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;
}
}

13
themes/anzhiyu/source/css/_extra/single_card/single_card.css Normal file
View File

@@ -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;
}

51
themes/anzhiyu/source/css/_extra/skills/skills.css Normal file
View File

@@ -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%);
}
}

77
themes/anzhiyu/source/css/_extra/tag/link.css Normal file
View File

@@ -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;
}

151
themes/anzhiyu/source/css/_extra/tag/site.css Normal file
View File

@@ -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%);
}

422
themes/anzhiyu/source/css/_global/function.styl Normal file
View File

@@ -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);

3
themes/anzhiyu/source/css/_global/icon.styl Normal file
View File

@@ -0,0 +1,3 @@
i.anzhiyu-icon-hashtag
opacity: .6
font-size: 13px

457
themes/anzhiyu/source/css/_global/index.styl Normal file
View File

@@ -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

50
themes/anzhiyu/source/css/_global/loading.styl Normal file
View File

@@ -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;
}

248
themes/anzhiyu/source/css/_highlight/highlight.styl Normal file
View File

@@ -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

79
themes/anzhiyu/source/css/_highlight/highlight/diff.styl Normal file
View File

@@ -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

46
themes/anzhiyu/source/css/_highlight/highlight/index.styl Normal file
View File

@@ -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%

302
themes/anzhiyu/source/css/_highlight/prismjs/diff.styl Normal file
View File

@@ -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

24
themes/anzhiyu/source/css/_highlight/prismjs/index.styl Normal file
View File

@@ -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;

41
themes/anzhiyu/source/css/_highlight/prismjs/line-number.styl Normal file
View File

@@ -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

119
themes/anzhiyu/source/css/_highlight/theme.styl Normal file
View File

@@ -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)

156
themes/anzhiyu/source/css/_layout/404.styl Normal file
View File

@@ -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

603
themes/anzhiyu/source/css/_layout/aside.styl Normal file
View File

@@ -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%

37
themes/anzhiyu/source/css/_layout/banner.styl Normal file
View File

@@ -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);

8
themes/anzhiyu/source/css/_layout/chat.styl Normal file
View File

@@ -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

97
themes/anzhiyu/source/css/_layout/comments.styl Normal file
View File

@@ -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

170
themes/anzhiyu/source/css/_layout/footer.styl Normal file
View File

@@ -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%);

803
themes/anzhiyu/source/css/_layout/head.styl Normal file
View File

@@ -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));

57
themes/anzhiyu/source/css/_layout/home_top.styl Normal file
View File

@@ -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;

743
themes/anzhiyu/source/css/_layout/nav.styl Normal file
View File

@@ -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)

18
themes/anzhiyu/source/css/_layout/oneGraphFlow.styl Normal file
View File

@@ -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;

350
themes/anzhiyu/source/css/_layout/pagination.styl Normal file
View File

@@ -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

547
themes/anzhiyu/source/css/_layout/post.styl Normal file
View File

@@ -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%;

110
themes/anzhiyu/source/css/_layout/ptool.styl Normal file
View File

@@ -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;

43
themes/anzhiyu/source/css/_layout/relatedposts.styl Normal file
View File

@@ -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

145
themes/anzhiyu/source/css/_layout/reward.styl Normal file
View File

@@ -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;

89
themes/anzhiyu/source/css/_layout/rightmenu.styl Normal file
View File

@@ -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);
}
}

55
themes/anzhiyu/source/css/_layout/rightside.styl Normal file
View File

@@ -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

57
themes/anzhiyu/source/css/_layout/shortcutKey.styl Normal file
View File

@@ -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;

412
themes/anzhiyu/source/css/_layout/sidebar.styl Normal file
View File

@@ -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

109
themes/anzhiyu/source/css/_layout/third-party.styl Normal file
View File

@@ -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

123
themes/anzhiyu/source/css/_mode/darkmode.styl Normal file
View File

@@ -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)

197
themes/anzhiyu/source/css/_mode/readmode.styl Normal file
View File

@@ -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)

69
themes/anzhiyu/source/css/_page/404.styl Normal file
View File

@@ -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/source/css/_page/about.styl Normal file
View File

File diff suppressed because it is too large Load Diff

113
themes/anzhiyu/source/css/_page/archives.styl Normal file
View File

@@ -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;

37
themes/anzhiyu/source/css/_page/categories.styl Normal file
View File

@@ -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

81
themes/anzhiyu/source/css/_page/common.styl Normal file
View File

@@ -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)

105
themes/anzhiyu/source/css/_page/equipment.styl Normal file
View File

@@ -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;

478
themes/anzhiyu/source/css/_page/flink.styl Normal file
View File

@@ -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%;

407
themes/anzhiyu/source/css/_page/homepage.styl Normal file
View File

@@ -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);

377
themes/anzhiyu/source/css/_page/music.styl Normal file
View File

@@ -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

135
themes/anzhiyu/source/css/_page/reward.styl Normal file
View File

@@ -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

168
themes/anzhiyu/source/css/_page/tag_page.styl Normal file
View File

@@ -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;

23
themes/anzhiyu/source/css/_page/tags.styl Normal file
View File

@@ -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

156
themes/anzhiyu/source/css/_search/algolia.styl Normal file
View File

@@ -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;

65
themes/anzhiyu/source/css/_search/index.styl Normal file
View File

@@ -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)

67
themes/anzhiyu/source/css/_search/local-search.styl Normal file
View File

@@ -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

116
themes/anzhiyu/source/css/_tags/Introduction-card.styl Normal file
View File

@@ -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;

108
themes/anzhiyu/source/css/_tags/bilbili.styl Normal file
View File

@@ -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

211
themes/anzhiyu/source/css/_tags/btns.styl Normal file
View File

@@ -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

56
themes/anzhiyu/source/css/_tags/button.styl Normal file
View File

@@ -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

193
themes/anzhiyu/source/css/_tags/checkbox.styl Normal file
View File

@@ -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

141
themes/anzhiyu/source/css/_tags/folding.styl Normal file
View File

@@ -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