User:弃权者/Template:少女前线信息/styles.css

	.infotemplatebox {
	    display: flex;
	    flex-wrap: wrap;
	    float: right;
	    width: 700px;
	    margin: 0 0 1em 1em;
	    background-color: var(--background-color-neutral-subtle, #f8f9fa);
	    border: 1px solid var(--border-color-subtle, #c8ccd1);
	    padding: 0;
	    font-size: 0.9em;
	    color: var(--color-base, #202122);
	    box-sizing: border-box;
	    overflow: hidden;
	}
	.gf-image-container {
	    flex: 0 0 280px;
	    padding: 15px;
	    box-sizing: border-box;
	    position: relative;
	    text-align: center;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    background-color: var(--background-color-base, #ffffff);
	}
	.gf-slides {
	    position: relative;
	    width: 100%;
	    min-height: 400px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}
	.gf-slide {
	    display: none;
	    width: 100%;
	}
	.gf-slide.active {
	    display: block;
	}
	.gf-slide img {
	    max-width: 100%;
	    height: auto;
	}
	.gf-tabs {
	    display: flex;
	    justify-content: center;
	    margin-top: 12px;
	    gap: 6px;
	}
	.gf-tab {
	    padding: 4px 10px;
	    background-color: var(--background-color-neutral-subtle, #f8f9fa);
	    border: 1px solid var(--border-color-subtle, #c8ccd1);
	    cursor: pointer;
	    border-radius: 3px;
	    font-size: 0.9em;
	    transition: all 0.2s;
	    user-select: none;
	}
	.gf-tab:hover {
	    background-color: var(--border-color-subtle, #eaecf0);
	}
	.gf-tab.active {
	    background-color: var(--color-base, #202122);
	    color: #ffffff;
	    border-color: var(--color-base, #202122);
	}
	.gf-caption {
	    margin-top: 8px;
	    font-size: 0.9em;
	    color: var(--color-base, #202122);
	}
	.gf-info-container {
	    flex: 1;
	    min-width: 300px;
	    border-left: 1px solid var(--border-color-subtle, #c8ccd1);
	}
	.gf-infobox {
	    width: 100%;
	    border-collapse: collapse;
	    background-color: var(--background-color-base, #ffffff);
	    margin: 0;
	    table-layout: auto;
	}
	.gf-infobox > tbody > tr:first-child td, 
	.gf-infobox > tbody > tr:first-child th {
	    background-color: var(--background-color-neutral-subtle, #f8f9fa);
	    color: var(--color-emphasized, #000000);
	    font-weight: bold;
	    font-size: 1.1em;
	    padding: 10px;
	    text-align: center;
	    border-bottom: 1px solid var(--border-color-subtle, #c8ccd1);
	}
	.gf-infobox b, 
	.gf-infobox strong {
	    display: block;
	    text-align: center;
	    padding: 4px 0;
	    color: var(--color-base, #202122);
	}
	.gf-infobox th {
	    background-color: var(--background-color-neutral-subtle, #f8f9fa);
	    color: var(--color-base, #202122);
	    text-align: left;
	    padding: 6px 10px;
	    white-space: nowrap;
	    border-bottom: 1px solid var(--border-color-subtle, #eaecf0);
	    font-weight: bold;
	    width: 1px;
	}
	.gf-infobox td {
	    padding: 6px 10px;
	    border-bottom: 1px solid var(--border-color-subtle, #eaecf0);
	    color: var(--color-base, #202122);
	    vertical-align: middle;
	    word-break: break-all;
	}
	.gf-infobox a {
	    color: var(--color-link, #202122);
	    text-decoration: none;
	}
	.gf-infobox a:hover {
	    text-decoration: underline;
	}
	@media screen and (max-width: 768px) {
	    .infotemplatebox {
	        float: none;
	        width: 100%;
	        margin: 1em 0;
	        flex-direction: column;
	    }
	    .gf-image-container {
	        flex: none;
	        width: 100%;
	        border-left: none;
	        border-bottom: 1px solid var(--border-color-subtle, #c8ccd1);
	        padding: 10px 0;
	    }
	    .gf-info-container {
	        border-left: none;
	        width: 100%;
	    }
	    .gf-infobox th, 
	    .gf-infobox td {
	        padding: 10px;
	        font-size: 1.1em;
	    }
	}