Template:少女前线/styles.css:修订间差异
模板页面
更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第33行: | 第33行: | ||
text-align: center; | text-align: center; | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
| 第46行: | 第39行: | ||
position: absolute; | position: absolute; | ||
top: 100%; | top: 100%; | ||
left: -1px; | left: -1px; | ||
right: -1px; | right: -1px; | ||
background-color: var(--background-color-base, #fff); | background-color: var(--background-color-base, #fff); | ||
| 第56行: | 第49行: | ||
} | } | ||
/* 兼容点击与悬停 */ | |||
.gfl-item:hover .gfl-content, | .gfl-item:hover .gfl-content, | ||
.gfl-item:focus .gfl-content { | .gfl-item:focus .gfl-content { | ||
| 第61行: | 第55行: | ||
} | } | ||
.gfl-links-wrap { | .gfl-links-wrap { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
gap: 8px; | gap: 8px; | ||
line-height: 1; | line-height: 1.5; | ||
} | } | ||
/* 链接样式 */ | |||
.gfl-links-wrap a { | .gfl-links-wrap a { | ||
display: inline-block; | display: inline-block; | ||
padding: | padding: 4px 12px; | ||
background-color: var(--background-color-interactive-subtle, #eee); | background-color: var(--background-color-interactive-subtle, #eee); | ||
color: var(--color-base, inherit) !important; | color: var(--color-base, inherit) !important; | ||
| 第77行: | 第71行: | ||
border-radius: 2px; | border-radius: 2px; | ||
font-size: 12px; | font-size: 12px; | ||
border: 1px solid | border: 1px solid var(--border-color-base, #ccc); | ||
transition: all 0. | transition: all 0.1s ease-in-out; | ||
} | } | ||
.gfl-links-wrap a:hover { | .gfl-links-wrap a:hover { | ||
border-color: var(--color-primary, #3366ff); | border-color: var(--color-primary, #3366ff); | ||
color: var(--color-primary, #3366ff) !important; | color: var(--color-primary, #3366ff) !important; | ||
background-color: var(--background-color-primary-subtle, rgba(51,102,255,0.1)); | |||
} | } | ||
| 第93行: | 第87行: | ||
} | } | ||
.gfl-logo-box { width: 100%; justify-content: center; } | .gfl-logo-box { width: 100%; justify-content: center; } | ||
} | } | ||
2026年5月7日 (四) 07:10的版本
.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);
border: 1px solid var(--border-color-base, #ddd);
}
.gfl-logo-box {
padding: 6px 12px;
background-color: var(--color-primary, #3366ff);
color: #fff;
font-weight: bold;
display: flex;
align-items: center;
flex-shrink: 0;
}
.gfl-item {
flex: 1;
min-width: 80px;
outline: none;
}
.gfl-title {
display: block;
padding: 8px 4px;
background-color: rgba(0,0,0,0.02);
border-bottom: 2px solid var(--border-color-base, #ccc);
text-align: center;
cursor: pointer;
}
.gfl-content {
display: none;
position: absolute;
top: 100%;
left: -1px;
right: -1px;
background-color: var(--background-color-base, #fff);
border: 1px solid var(--color-primary, #3366ff);
padding: 12px;
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;
line-height: 1.5;
}
/* 链接样式 */
.gfl-links-wrap a {
display: inline-block;
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;
border: 1px solid var(--border-color-base, #ccc);
transition: all 0.1s ease-in-out;
}
.gfl-links-wrap a:hover {
border-color: var(--color-primary, #3366ff);
color: var(--color-primary, #3366ff) !important;
background-color: var(--background-color-primary-subtle, rgba(51,102,255,0.1));
}
@media (max-width: 768px) {
.gfl-item {
flex: none;
width: calc(33.33% - 4px);
}
.gfl-logo-box { width: 100%; justify-content: center; }
}