重写目录样式；适配新域名
This commit is contained in:
anian
+157
-46
@@ -313,6 +313,40 @@ header#masthead {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.toc_nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.toc-ready .toc_nav[aria-hidden="false"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.toc_nav .listree-btn {
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
transition: transform .22s ease;
|
||||
}
|
||||
|
||||
.toc_nav .listree-btn:hover,
|
||||
.toc_nav .listree-btn.is-active {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.toc_nav .listree-btn:active {
|
||||
transform: scale(.94);
|
||||
}
|
||||
|
||||
.toc_nav .listree-btn i {
|
||||
font-size: 20px;
|
||||
transition: transform .22s ease;
|
||||
}
|
||||
|
||||
.toc_nav .listree-btn.is-active i {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.uk-modal-close-full.uk-close {
|
||||
bottom: 5%;
|
||||
top: auto;
|
||||
@@ -1334,6 +1368,7 @@ a.close_local {
|
||||
.moment_cat_nav,
|
||||
.posts_cat_nav,
|
||||
.photos_cat_nav,
|
||||
.douban_cat_nav,
|
||||
.friends_cat_nav {
|
||||
padding: 25px 40px;
|
||||
border-bottom: 1px solid var(--pix-background);
|
||||
@@ -1342,6 +1377,7 @@ a.close_local {
|
||||
.moment_cat_nav ul,
|
||||
.posts_cat_nav ul,
|
||||
.photos_cat_nav ul,
|
||||
.douban_cat_nav ul,
|
||||
.friends_cat_nav ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1356,6 +1392,7 @@ a.close_local {
|
||||
.moment_cat_nav ul li,
|
||||
.posts_cat_nav ul li,
|
||||
.photos_cat_nav ul li,
|
||||
.douban_cat_nav ul li,
|
||||
.friends_cat_nav ul li {
|
||||
list-style: none;
|
||||
flex: none;
|
||||
@@ -1364,6 +1401,7 @@ a.close_local {
|
||||
.moment_cat_nav ul::-webkit-scrollbar,
|
||||
.posts_cat_nav ul::-webkit-scrollbar,
|
||||
.photos_cat_nav ul::-webkit-scrollbar,
|
||||
.douban_cat_nav ul::-webkit-scrollbar,
|
||||
.friends_cat_nav ul::-webkit-scrollbar {
|
||||
|
||||
display: none;
|
||||
@@ -1374,6 +1412,7 @@ a.close_local {
|
||||
.moment_cat_nav ul li a,
|
||||
.posts_cat_nav ul li a,
|
||||
.photos_cat_nav ul li a,
|
||||
.douban_cat_nav ul li a,
|
||||
.friends_cat_nav ul li a {
|
||||
padding: 5px 10px;
|
||||
background: #e1e9e5;
|
||||
@@ -1388,6 +1427,7 @@ a.close_local {
|
||||
.moment_cat_nav ul li a:hover,
|
||||
.posts_cat_nav ul li a:hover,
|
||||
.photos_cat_nav ul li a:hover,
|
||||
.douban_cat_nav ul li a:hover,
|
||||
.friends_cat_nav ul li a:hover {
|
||||
background-color: var(--pix-theme);
|
||||
color: #fff !important;
|
||||
@@ -1396,6 +1436,7 @@ a.close_local {
|
||||
.moment_cat_nav ul li a.active,
|
||||
.posts_cat_nav ul li a.active,
|
||||
.photos_cat_nav ul li a.active,
|
||||
.douban_cat_nav ul li a.active,
|
||||
.friends_cat_nav ul li a.active {
|
||||
background: var(--pix-theme);
|
||||
color: #fff !important;
|
||||
@@ -2268,21 +2309,20 @@ a.go_top.show {
|
||||
|
||||
/* 手机端顶部导航栏回到顶部按钮 */
|
||||
.tool_top {
|
||||
position: fixed;
|
||||
bottom: 10%;
|
||||
opacity: 0;
|
||||
transition: all 0.15s;
|
||||
font-size: 26px;
|
||||
transform: translateY(20px);
|
||||
transform: translateY(8px);
|
||||
transition: opacity 0.15s, transform 0.15s;
|
||||
pointer-events: none;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.tool_top.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.tool_top .tool_top_icon {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.footer_nav_box .left_inner {
|
||||
@@ -5974,76 +6014,147 @@ a.change i.ri-refresh-line {
|
||||
|
||||
/*toc*/
|
||||
.listree-box {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
background-color: var(--toc-color);
|
||||
color: #fff;
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
h3.listree-titles {
|
||||
float: right;
|
||||
cursor: default;
|
||||
padding: 20px 8px 9px 6px;
|
||||
font-size: 1.01rem;
|
||||
}
|
||||
|
||||
h3.listree-titles a.listree-btn {
|
||||
color: #fff;
|
||||
top: 10px;
|
||||
left: 15px;
|
||||
display: block;
|
||||
width: 22px;
|
||||
text-align: center;
|
||||
width: 290px;
|
||||
max-width: calc(100vw - 32px);
|
||||
max-height: calc(100vh - 124px);
|
||||
overflow: hidden;
|
||||
color: #29372f;
|
||||
background: rgb(255 255 255 / 92%);
|
||||
border: 1px solid rgb(34 187 109 / 16%);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 18px 48px rgb(23 45 31 / 16%);
|
||||
backdrop-filter: blur(.7rem);
|
||||
-webkit-backdrop-filter: blur(.7rem);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transform: translate3d(-12px, 8px, 0) scale(.98);
|
||||
transform-origin: top left;
|
||||
transition: opacity .24s ease, visibility .24s ease, transform .24s ease;
|
||||
}
|
||||
|
||||
.listree-box.is-open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
|
||||
#listree-ol {
|
||||
max-height: 230px;
|
||||
overflow: scroll;
|
||||
display: block;
|
||||
max-height: min(58vh, 420px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
float: left;
|
||||
height: 100%;
|
||||
min-height: 100px;
|
||||
line-height: 1.5;
|
||||
margin: 20px 0px 20px -10px;
|
||||
padding-right: 20px;
|
||||
align-items: center;
|
||||
border-right: 1px solid #eeeeef;
|
||||
float: none;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
line-height: 1.45;
|
||||
margin: 0;
|
||||
padding: 12px 10px 14px;
|
||||
list-style: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#listree-ol li {
|
||||
line-height: 1.8;
|
||||
margin-bottom: 6px;
|
||||
line-height: inherit;
|
||||
margin: 2px 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#listree-ol li a {
|
||||
color: #fff;
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 7px 10px 7px 12px;
|
||||
color: #52685b;
|
||||
border-left: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
|
||||
}
|
||||
|
||||
#listree-ol li a:hover {
|
||||
color: #15251c;
|
||||
background: rgb(34 187 109 / 8%);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
#listree-ol ul {
|
||||
margin-top: 0px;
|
||||
margin: 3px 0 3px 12px;
|
||||
padding-left: 10px;
|
||||
border-left: 1px solid rgb(34 54 41 / 10%);
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#listree-ol a.node-name--H1,
|
||||
#listree-ol a.node-name--H2 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#listree-ol a.node-name--H4,
|
||||
#listree-ol a.node-name--H5,
|
||||
#listree-ol a.node-name--H6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
a#listree-click.current,
|
||||
#listree-ol>li.current>a,
|
||||
#listree-ol>li ul li.current>a {
|
||||
color: #f2ff2c;
|
||||
color: var(--toc-color);
|
||||
border-left-color: var(--toc-color);
|
||||
background: rgb(34 187 109 / 10%);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.listree-box.is-open #listree-ol li {
|
||||
animation: listreeItemIn .26s ease both;
|
||||
}
|
||||
|
||||
#listree-ol::-webkit-scrollbar-track {
|
||||
background-color: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#listree-ol::-webkit-scrollbar-thumb {
|
||||
background: rgb(199, 201, 204);
|
||||
background: rgb(34 187 109 / 26%);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
#listree-ol::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
@keyframes listreeItemIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-6px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.toc_nav .listree-btn,
|
||||
.toc_nav .listree-btn i,
|
||||
.listree-box,
|
||||
#listree-ol li a {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.listree-box.is-open #listree-ol li {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dark .db--container {
|
||||
@@ -6872,4 +6983,4 @@ a#listree-click.current,
|
||||
font-family: 'MuYao';
|
||||
src: url('/upload/mu-yao-sui-xin-shou-xie-ti.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user