Template:少女前线/styles.css:修订间差异
模板页面
更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第19行: | 第19行: | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
gap: | gap: 8px; | ||
} | } | ||
.gfl-item { | .gfl-item { | ||
| 第29行: | 第29行: | ||
display: block; | display: block; | ||
padding: 8px; | padding: 8px; | ||
background | background: transparent; | ||
font-weight: bold; | font-weight: bold; | ||
text-align: center; | text-align: center; | ||
cursor: pointer; | cursor: pointer; | ||
border: 1px solid var(--border-color-base, #ccc); | border: 1px solid var(--border-color-base, #ccc); | ||
transition: all 0. | transition: all 0.3s ease; | ||
} | } | ||
.gfl-content { | .gfl-content { | ||
| 第40行: | 第40行: | ||
position: absolute; | position: absolute; | ||
top: 100%; | top: 100%; | ||
left: | left: 50%; | ||
transform: translateX(-50%); | |||
z-index: 100; | z-index: 100; | ||
min-width: | min-width: 100%; | ||
width: max-content; | |||
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); | ||
box-shadow: 0 | box-shadow: 0 0 10px var(--color-primary, #3366ff); | ||
padding: 5px 0; | padding: 5px 0; | ||
margin-top: 2px; | |||
} | } | ||
.gfl-item:hover .gfl-content { | .gfl-item:hover .gfl-content { | ||
| 第52行: | 第55行: | ||
} | } | ||
.gfl-item:hover .gfl-title { | .gfl-item:hover .gfl-title { | ||
color: var(--color-primary, #3366ff); | |||
border-color: var(--color-primary, #3366ff); | border-color: var(--color-primary, #3366ff); | ||
box-shadow: 0 0 8px var(--color-primary, #3366ff); | |||
background: transparent; | |||
} | } | ||
.gfl-content ul, .gfl-content li { | .gfl-content ul, .gfl-content li { | ||
| 第66行: | 第70行: | ||
color: var(--color-base, #202122) !important; | color: var(--color-base, #202122) !important; | ||
text-decoration: none !important; | text-decoration: none !important; | ||
text-align: center; | |||
} | } | ||
.gfl-content a:hover { | .gfl-content a:hover { | ||
background-color: var(--background-color-primary-subtle, | background-color: var(--background-color-primary-subtle, rgba(51, 102, 255, 0.1)); | ||
color: var(--color-primary, #3366ff) !important; | color: var(--color-primary, #3366ff) !important; | ||
} | } | ||
2026年5月6日 (三) 23:36的版本
.gfl-nav {
border: 1px solid var(--border-color-base, #aaa);
background-color: var(--background-color-neutral-subtle, rgba(128, 128, 128, 0.1));
backdrop-filter: blur(4px);
padding: 10px;
font-size: 14px;
margin-bottom: 1em;
color: var(--color-base, inherit);
}
.gfl-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid var(--color-primary, #3366ff);
padding-bottom: 5px;
margin-bottom: 10px;
}
.gfl-menu {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.gfl-item {
position: relative;
flex: 1;
min-width: 100px;
}
.gfl-title {
display: block;
padding: 8px;
background: transparent;
font-weight: bold;
text-align: center;
cursor: pointer;
border: 1px solid var(--border-color-base, #ccc);
transition: all 0.3s ease;
}
.gfl-content {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
z-index: 100;
min-width: 100%;
width: max-content;
background-color: var(--background-color-base, #fff);
border: 1px solid var(--color-primary, #3366ff);
box-shadow: 0 0 10px var(--color-primary, #3366ff);
padding: 5px 0;
margin-top: 2px;
}
.gfl-item:hover .gfl-content {
display: block;
}
.gfl-item:hover .gfl-title {
color: var(--color-primary, #3366ff);
border-color: var(--color-primary, #3366ff);
box-shadow: 0 0 8px var(--color-primary, #3366ff);
background: transparent;
}
.gfl-content ul, .gfl-content li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.gfl-content a {
display: block;
padding: 8px 15px;
color: var(--color-base, #202122) !important;
text-decoration: none !important;
text-align: center;
}
.gfl-content a:hover {
background-color: var(--background-color-primary-subtle, rgba(51, 102, 255, 0.1));
color: var(--color-primary, #3366ff) !important;
}