Template:少女前线/styles.css

.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;
}