打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

Template:少女前线/styles.css:修订间差异

模板页面
弃权者留言 | 贡献
无编辑摘要
弃权者留言 | 贡献
无编辑摘要
第1行: 第1行:
.gfl-nav-container {
    margin: 1em 0;
    padding: 1px;
    background-color: var(--color-primary, #3366ff);
    clip-path: polygon(0 0, 98% 0, 100% 20%, 100% 100%, 2% 100%, 0 80%);
}
.gfl-nav {
.gfl-nav {
     border: 1px solid var(--border-color-base, #aaa);
     background-color: var(--background-color-base, #fff);
     background-color: var(--background-color-neutral-subtle, rgba(128, 128, 128, 0.1));
     padding: 15px;
    backdrop-filter: blur(4px);
    clip-path: polygon(0 0, 98% 0, 100% 20%, 100% 100%, 2% 100%, 0 80%);
    padding: 10px;
    font-size: 14px;
    margin-bottom: 1em;
     color: var(--color-base, inherit);
     color: var(--color-base, inherit);
    display: flex;
    flex-direction: column;
    gap: 15px;
}
}
.gfl-header {
.gfl-header {
     display: flex;
     display: flex;
    justify-content: space-between;
     align-items: center;
     align-items: center;
     border-bottom: 2px solid var(--color-primary, #3366ff);
    gap: 15px;
     padding-bottom: 5px;
    border-bottom-width: 1px;
    margin-bottom: 10px;
    border-bottom-style: dashed;
     border-bottom-color: var(--border-color-base, #ccc);
     padding-bottom: 10px;
}
}
.gfl-menu {
 
     display: flex;
.gfl-welcome {
     flex-wrap: wrap;
    font-family: monospace;
     gap: 8px;
    font-weight: bold;
    color: var(--color-primary, #3366ff);
}
 
.gfl-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     gap: 12px;
}
 
.gfl-card {
    border-width: 1px;
    border-style: solid;
    border-color: var(--border-color-base, #ddd);
    padding: 10px;
    transition: border-color 0.3s;
    background-color: var(--background-color-neutral-subtle, transparent);
}
}
.gfl-item {
 
     position: relative;
.gfl-card:hover {
    flex: 1;
     border-color: var(--color-primary, #3366ff);
    min-width: 100px;
}
}
.gfl-title {
 
     display: block;
.gfl-card-title {
    padding: 8px;
     font-size: 12px;
    background: transparent;
     font-weight: bold;
     font-weight: bold;
     text-align: center;
     color: var(--color-primary, #3366ff);
     cursor: pointer;
    margin-bottom: 8px;
     border: 1px solid var(--border-color-base, #ccc);
     display: flex;
    transition: all 0.3s ease;
    justify-content: space-between;
     border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--border-color-base);
}
}
.gfl-content {
 
     display: none;
.gfl-links {
    position: absolute;
     display: flex;
     top: 100%;
     flex-wrap: wrap;
    left: 50%;
     gap: 6px;
    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-links a {
    font-size: 13px;
    padding: 2px 6px;
    background-color: var(--background-color-interactive-subtle, #eee);
    color: var(--color-base) !important;
     text-decoration: none !important;
}
}
.gfl-item:hover .gfl-title {
 
     color: var(--color-primary, #3366ff);
.gfl-links a:hover {
     border-color: var(--color-primary, #3366ff);
     background-color: var(--background-color-primary, #3366ff);
    box-shadow: 0 0 8px var(--color-primary, #3366ff);
     color: var(--color-inverted, #fff) !important;
    background: transparent;
}
}
.gfl-content ul, .gfl-content li {
 
     list-style: none !important;
.gfl-links ul, .gfl-links li {
     list-style-type: none !important;
     margin: 0 !important;
     margin: 0 !important;
     padding: 0 !important;
     padding: 0 !important;
}
     display: inline;
.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;
}
}

2026年5月7日 (四) 06:40的版本

.gfl-nav-container {
    margin: 1em 0;
    padding: 1px;
    background-color: var(--color-primary, #3366ff);
    clip-path: polygon(0 0, 98% 0, 100% 20%, 100% 100%, 2% 100%, 0 80%);
}

.gfl-nav {
    background-color: var(--background-color-base, #fff);
    padding: 15px;
    clip-path: polygon(0 0, 98% 0, 100% 20%, 100% 100%, 2% 100%, 0 80%);
    color: var(--color-base, inherit);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.gfl-header {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: var(--border-color-base, #ccc);
    padding-bottom: 10px;
}

.gfl-welcome {
    font-family: monospace;
    font-weight: bold;
    color: var(--color-primary, #3366ff);
}

.gfl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.gfl-card {
    border-width: 1px;
    border-style: solid;
    border-color: var(--border-color-base, #ddd);
    padding: 10px;
    transition: border-color 0.3s;
    background-color: var(--background-color-neutral-subtle, transparent);
}

.gfl-card:hover {
    border-color: var(--color-primary, #3366ff);
}

.gfl-card-title {
    font-size: 12px;
    font-weight: bold;
    color: var(--color-primary, #3366ff);
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--border-color-base);
}

.gfl-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gfl-links a {
    font-size: 13px;
    padding: 2px 6px;
    background-color: var(--background-color-interactive-subtle, #eee);
    color: var(--color-base) !important;
    text-decoration: none !important;
}

.gfl-links a:hover {
    background-color: var(--background-color-primary, #3366ff);
    color: var(--color-inverted, #fff) !important;
}

.gfl-links ul, .gfl-links li {
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline;
}