Template:少女前线/styles.css:修订间差异
模板页面
更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第1行: | 第1行: | ||
.gfl-nav-compact { | .gfl-nav-compact { | ||
margin: | margin: 1em 0; | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
| 第7行: | 第6行: | ||
font-size: 13px; | font-size: 13px; | ||
position: relative; | position: relative; | ||
color: var(--color- | background-color: var(--background-color-neutral-subtle, #f8f9fa); | ||
} | } | ||
| 第17行: | 第16行: | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
} | } | ||
| 第23行: | 第21行: | ||
flex: 1; | flex: 1; | ||
min-width: 80px; | min-width: 80px; | ||
} | } | ||
| 第29行: | 第26行: | ||
display: block; | display: block; | ||
padding: 8px 4px; | padding: 8px 4px; | ||
background-color: | background-color: rgba(0,0,0,0.03); | ||
border-bottom: 2px solid var(--border-color-base, #ccc); | border-bottom: 2px solid var(--border-color-base, #ccc); | ||
text-align: center; | text-align: center; | ||
| 第44行: | 第41行: | ||
background-color: var(--background-color-base, #fff); | background-color: var(--background-color-base, #fff); | ||
border: 1px solid var(--color-primary, #3366ff); | border: 1px solid var(--color-primary, #3366ff); | ||
padding: | padding: 10px; | ||
z-index: 1000; | z-index: 1000; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
box-shadow: 0 4px 12px rgba(0,0,0,0. | box-shadow: 0 4px 12px rgba(0,0,0,0.1); | ||
} | } | ||
/* 悬停与点击触发 */ | |||
.gfl-item:hover .gfl-content, | .gfl-item:hover .gfl-content, | ||
.gfl-item:focus .gfl-content { | .gfl-item:focus .gfl-content { | ||
| 第55行: | 第53行: | ||
} | } | ||
/* | /* 链接标签化逻辑 */ | ||
.gfl-links-wrap { | |||
display: flex; | |||
.gfl-links-wrap | flex-wrap: wrap; | ||
display: flex | gap: 8px; | ||
flex-wrap: wrap | |||
} | } | ||
/* | /* 关键:强制处理 preprocess 生成的所有链接 */ | ||
.gfl-links-wrap a { | .gfl-links-wrap a { | ||
display: inline-block; | display: inline-block !important; | ||
padding: 4px 12px; | padding: 4px 12px; | ||
background-color: var(--background-color-interactive-subtle, #eee); | |||
background-color: var(--background-color-interactive-subtle, | |||
color: var(--color-base, inherit) !important; | color: var(--color-base, inherit) !important; | ||
text-decoration: none !important; | text-decoration: none !important; | ||
border-radius: 2px; | border-radius: 2px; | ||
font-size: 12px; | |||
transition: all 0.2s; | transition: all 0.2s; | ||
border: 1px solid transparent; | |||
} | } | ||
.gfl-links-wrap a:hover { | .gfl-links-wrap a:hover { | ||
background-color: var(--background-color-primary-subtle, rgba(51,102,255,0.1)); | |||
color: var(--color-primary, #3366ff) !important; | |||
border-color: var(--color-primary, #3366ff); | border-color: var(--color-primary, #3366ff); | ||
} | } | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.gfl-item { | .gfl-item { | ||
2026年5月7日 (四) 07:07的版本
.gfl-nav-compact {
margin: 1em 0;
display: flex;
flex-wrap: wrap;
gap: 4px;
font-size: 13px;
position: relative;
background-color: var(--background-color-neutral-subtle, #f8f9fa);
}
.gfl-logo-box {
padding: 6px 12px;
background-color: var(--color-primary, #3366ff);
color: #fff;
font-weight: bold;
display: flex;
align-items: center;
}
.gfl-item {
flex: 1;
min-width: 80px;
}
.gfl-title {
display: block;
padding: 8px 4px;
background-color: rgba(0,0,0,0.03);
border-bottom: 2px solid var(--border-color-base, #ccc);
text-align: center;
cursor: pointer;
}
.gfl-content {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
background-color: var(--background-color-base, #fff);
border: 1px solid var(--color-primary, #3366ff);
padding: 10px;
z-index: 1000;
box-sizing: border-box;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* 悬停与点击触发 */
.gfl-item:hover .gfl-content,
.gfl-item:focus .gfl-content {
display: block;
}
/* 链接标签化逻辑 */
.gfl-links-wrap {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* 关键:强制处理 preprocess 生成的所有链接 */
.gfl-links-wrap a {
display: inline-block !important;
padding: 4px 12px;
background-color: var(--background-color-interactive-subtle, #eee);
color: var(--color-base, inherit) !important;
text-decoration: none !important;
border-radius: 2px;
font-size: 12px;
transition: all 0.2s;
border: 1px solid transparent;
}
.gfl-links-wrap a:hover {
background-color: var(--background-color-primary-subtle, rgba(51,102,255,0.1));
color: var(--color-primary, #3366ff) !important;
border-color: var(--color-primary, #3366ff);
}
@media (max-width: 768px) {
.gfl-item {
flex: none;
width: calc(33.33% - 4px);
}
.gfl-logo-box { width: 100%; justify-content: center; }
}