kate522
48f7436030
Split related style/source settings, add subtitle/meta/allow-view helpers, align cover/author/tags/pay shell markup and CSS with Zibll single.
107 lines
2.1 KiB
CSS
107 lines
2.1 KiB
CSS
/* ========== 面包屑导航 — 对齐 zibll breadcrumb ========== */
|
|
.breadcrumb-nav,
|
|
ul.breadcrumb,
|
|
.breadcrumbs-wrap {
|
|
font-size: 13px;
|
|
padding: 0 8px;
|
|
margin-bottom: 12px;
|
|
opacity: 0.6;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.breadcrumb-nav ol,
|
|
.breadcrumb-nav ul,
|
|
ul.breadcrumb,
|
|
.breadcrumbs.breadcrumb {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0;
|
|
}
|
|
|
|
.breadcrumb-nav li,
|
|
ul.breadcrumb > li,
|
|
.breadcrumbs.breadcrumb > li {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Zibll flat ul.breadcrumb inserts parents with " </li><li> " — separators via content */
|
|
.breadcrumb-nav li + li::before,
|
|
ul.breadcrumb > li + li::before {
|
|
content: '/';
|
|
padding: 0 6px 0 6px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.breadcrumbs.breadcrumb .breadcrumbs__sep {
|
|
padding: 0 6px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.breadcrumb-nav a,
|
|
ul.breadcrumb a,
|
|
.breadcrumbs a {
|
|
color: var(--color-ink-4, #999);
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.breadcrumb-nav a:hover,
|
|
ul.breadcrumb a:hover,
|
|
.breadcrumbs a:hover {
|
|
color: var(--color-primary, #f04494);
|
|
}
|
|
|
|
.breadcrumb-nav .current,
|
|
ul.breadcrumb > li:last-child,
|
|
.breadcrumbs__item.is-current {
|
|
color: var(--color-ink-2, #4e5358);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.single-cover-con .breadcrumb-nav,
|
|
.single-cover-con .breadcrumb,
|
|
.single-cover-con ul.breadcrumb,
|
|
.post-breadcrumbs .breadcrumb {
|
|
font-size: 13px;
|
|
margin: 5px 0 0 -6px;
|
|
opacity: unset;
|
|
padding: 0;
|
|
}
|
|
|
|
/* 封面内面包屑 */
|
|
.single-cover-con .breadcrumb-nav,
|
|
.single-cover-con ul.breadcrumb,
|
|
.single-cover-con .breadcrumb {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
}
|
|
|
|
.single-cover-con .breadcrumb-nav a,
|
|
.single-cover-con ul.breadcrumb a,
|
|
.single-cover-con .breadcrumb a {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
}
|
|
|
|
.single-cover-con .breadcrumb-nav a:hover,
|
|
.single-cover-con ul.breadcrumb a:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.single-cover-con .breadcrumb-nav .current,
|
|
.single-cover-con ul.breadcrumb > li:last-child {
|
|
color: #fff;
|
|
}
|
|
|
|
/* 移动端 */
|
|
@media (max-width: 767px) {
|
|
.breadcrumb-nav,
|
|
ul.breadcrumb,
|
|
.breadcrumbs-wrap {
|
|
font-size: 12px;
|
|
}
|
|
}
|