Template:少女前线/styles.css:修订间差异
模板页面
更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第5行: | 第5行: | ||
gap: 4px; | gap: 4px; | ||
font-size: 13px; | font-size: 13px; | ||
position: relative; | |||
} | } | ||
.gfl-logo-box { | .gfl-logo-box { | ||
padding: 6px 12px; | padding: 6px 12px; | ||
color: #E6A23C; | color: #E6A23C; | ||
font-weight: bold; | font-weight: bold; | ||
| 第23行: | 第22行: | ||
position: relative; | position: relative; | ||
outline: none; | outline: none; | ||
z-index: 1; | |||
} | } | ||
| 第28行: | 第28行: | ||
display: block; | display: block; | ||
padding: 8px 4px; | padding: 8px 4px; | ||
background-color: rgba( | background-color: rgba(128, 128, 128, 0.1); | ||
border-bottom: 2px solid | border-bottom: 2px solid rgba(128, 128, 128, 0.3); | ||
text-align: center; | text-align: center; | ||
cursor: pointer; | cursor: pointer; | ||
transition: border-color 0.2s; | transition: border-color 0.2s; | ||
} | } | ||
| 第50行: | 第48行: | ||
left: 0; | left: 0; | ||
width: 100%; | width: 100%; | ||
border: 1px solid #E6A23C; | border: 1px solid #E6A23C; | ||
border-top: none; | border-top: none; | ||
overflow: hidden; | overflow: hidden; | ||
/* 不再强制背景色,适配暗色模式 */ | |||
background-color: inherit; | |||
backdrop-filter: blur(4px); | |||
} | } | ||
| 第80行: | 第78行: | ||
padding: 6px 8px; | padding: 6px 8px; | ||
margin: 2px 0; | margin: 2px 0; | ||
background-color: | background-color: rgba(128, 128, 128, 0.1); | ||
color: | color: inherit !important; | ||
text-decoration: none !important; | text-decoration: none !important; | ||
border-radius: 2px; | border-radius: 2px; | ||
font-size: 12px; | font-size: 12px; | ||
border: 1px solid transparent; | border: 1px solid transparent; | ||
transition: | transition: all 0.2s; | ||
text-align: center; | text-align: center; | ||
} | } | ||
| 第94行: | 第92行: | ||
background-color: rgba(230, 162, 60, 0.1); | background-color: rgba(230, 162, 60, 0.1); | ||
border-color: #E6A23C; | border-color: #E6A23C; | ||
} | |||
/* 核心:解决重叠的灵魂代码 */ | |||
.gfl-item:hover, | |||
.gfl-item:focus { | |||
z-index: 999; | |||
} | } | ||
| 第101行: | 第105行: | ||
width: calc(33.33% - 4px); | width: calc(33.33% - 4px); | ||
} | } | ||
.gfl-logo-box { | .gfl-logo-box { | ||
width: 100%; | width: 100%; | ||
| 第108行: | 第111行: | ||
border-bottom: 1px solid #E6A23C; | border-bottom: 1px solid #E6A23C; | ||
margin-bottom: 2px; | margin-bottom: 2px; | ||
} | } | ||
} | } | ||
2026年5月7日 (四) 07:39的版本
.gfl-nav-compact {
margin: 1em 0;
display: flex;
flex-wrap: wrap;
gap: 4px;
font-size: 13px;
position: relative;
}
.gfl-logo-box {
padding: 6px 12px;
color: #E6A23C;
font-weight: bold;
display: flex;
align-items: center;
border-right: 1px solid #E6A23C;
}
.gfl-item {
flex: 1;
min-width: 80px;
position: relative;
outline: none;
z-index: 1;
}
.gfl-title {
display: block;
padding: 8px 4px;
background-color: rgba(128, 128, 128, 0.1);
border-bottom: 2px solid rgba(128, 128, 128, 0.3);
text-align: center;
cursor: pointer;
transition: border-color 0.2s;
}
.gfl-item:hover .gfl-title,
.gfl-item:focus .gfl-title {
border-bottom-color: #E6A23C !important;
}
.gfl-content {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease-out;
position: absolute;
top: 100%;
left: 0;
width: 100%;
border: 1px solid #E6A23C;
border-top: none;
overflow: hidden;
/* 不再强制背景色,适配暗色模式 */
background-color: inherit;
backdrop-filter: blur(4px);
}
.gfl-item:hover .gfl-content,
.gfl-item:focus .gfl-content {
grid-template-rows: 1fr;
}
.gfl-links-wrap {
min-height: 0;
padding: 0 8px;
transition: padding 0.3s;
display: flex;
flex-direction: column;
}
.gfl-item:hover .gfl-links-wrap,
.gfl-item:focus .gfl-links-wrap {
padding: 8px;
}
.gfl-links-wrap a {
display: block;
padding: 6px 8px;
margin: 2px 0;
background-color: rgba(128, 128, 128, 0.1);
color: inherit !important;
text-decoration: none !important;
border-radius: 2px;
font-size: 12px;
border: 1px solid transparent;
transition: all 0.2s;
text-align: center;
}
.gfl-links-wrap a:hover {
color: #E6A23C !important;
background-color: rgba(230, 162, 60, 0.1);
border-color: #E6A23C;
}
/* 核心:解决重叠的灵魂代码 */
.gfl-item:hover,
.gfl-item:focus {
z-index: 999;
}
@media (max-width: 768px) {
.gfl-item {
flex: none;
width: calc(33.33% - 4px);
}
.gfl-logo-box {
width: 100%;
justify-content: center;
border-right: none;
border-bottom: 1px solid #E6A23C;
margin-bottom: 2px;
}
}