Template:少女前线/styles.css:修订间差异
模板页面
更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第1行: | 第1行: | ||
.gfl-nav-compact { | .gfl-nav-compact { | ||
margin: 0.5em 0; | margin: 0.5em 0; | ||
display: flex; | display: flex; | ||
gap: 4px; | |||
font-size: 13px; | font-size: 13px; | ||
position: relative; | |||
z-index: 100; | |||
} | } | ||
.gfl-logo-box { | .gfl-logo-box { | ||
padding: | padding: 4px 8px; | ||
background-color: var(--color-primary, #3366ff); | background-color: var(--color-primary, #3366ff); | ||
color: var(--color-inverted, #fff); | |||
font-weight: bold; | |||
clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%); | |||
padding-right: 15px; | |||
} | |||
.gfl-item { | |||
flex: 1; | |||
} | } | ||
.gfl- | .gfl-title { | ||
display: | display: block; | ||
padding: 4px 10px; | |||
background-color: var(--background-color-neutral-subtle, rgba(0,0,0,0.05)); | |||
border-bottom: 2px solid var(--border-color-base, #ccc); | |||
border- | text-align: center; | ||
cursor: pointer; | |||
transition: all 0.2s; | |||
} | } | ||
.gfl- | .gfl-item:hover .gfl-title { | ||
border-bottom-color: var(--color-primary, #3366ff); | |||
color: var(--color-primary, #3366ff); | color: var(--color-primary, #3366ff); | ||
background-color: var(--background-color-interactive-subtle, rgba(51,102,255,0.05)); | |||
} | } | ||
.gfl- | .gfl-content { | ||
display: none; | |||
position: absolute; | |||
top: 100%; | |||
left: 0; | |||
right: 0; | |||
background-color: var(--background-color-base, #fff); | |||
border: 1px solid var(--color-primary, #3366ff); | |||
box-shadow: 0 4px 12px rgba(0,0,0,0.15); | |||
padding: 12px; | |||
margin-top: 2px; | |||
backdrop-filter: blur(8px); | |||
} | |||
.gfl-item:hover .gfl-content { | |||
display: block; | |||
} | |||
.gfl-links-wrap { | |||
display: flex; | display: flex; | ||
gap: | flex-wrap: wrap; | ||
gap: 10px 20px; | |||
} | } | ||
.gfl- | .gfl-links-wrap ul, .gfl-links-wrap li { | ||
list-style: none !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
display: contents; | |||
} | |||
.gfl-links-wrap a { | |||
color: var(--color-base, inherit) !important; | color: var(--color-base, inherit) !important; | ||
text-decoration: none !important; | text-decoration: none !important; | ||
white-space: nowrap; | |||
} | } | ||
.gfl- | .gfl-links-wrap a:hover { | ||
color: var(--color-primary, #3366ff) !important; | color: var(--color-primary, #3366ff) !important; | ||
font-weight: bold; | |||
} | } | ||
2026年5月7日 (四) 06:47的版本
.gfl-nav-compact {
margin: 0.5em 0;
display: flex;
gap: 4px;
font-size: 13px;
position: relative;
z-index: 100;
}
.gfl-logo-box {
padding: 4px 8px;
background-color: var(--color-primary, #3366ff);
color: var(--color-inverted, #fff);
font-weight: bold;
clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
padding-right: 15px;
}
.gfl-item {
flex: 1;
}
.gfl-title {
display: block;
padding: 4px 10px;
background-color: var(--background-color-neutral-subtle, rgba(0,0,0,0.05));
border-bottom: 2px solid var(--border-color-base, #ccc);
text-align: center;
cursor: pointer;
transition: all 0.2s;
}
.gfl-item:hover .gfl-title {
border-bottom-color: var(--color-primary, #3366ff);
color: var(--color-primary, #3366ff);
background-color: var(--background-color-interactive-subtle, rgba(51,102,255,0.05));
}
.gfl-content {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--background-color-base, #fff);
border: 1px solid var(--color-primary, #3366ff);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
padding: 12px;
margin-top: 2px;
backdrop-filter: blur(8px);
}
.gfl-item:hover .gfl-content {
display: block;
}
.gfl-links-wrap {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
}
.gfl-links-wrap ul, .gfl-links-wrap li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: contents;
}
.gfl-links-wrap a {
color: var(--color-base, inherit) !important;
text-decoration: none !important;
white-space: nowrap;
}
.gfl-links-wrap a:hover {
color: var(--color-primary, #3366ff) !important;
font-weight: bold;
}