OGAS数据中枢 - 用户贡献 [zh]

User:弃权者/首页/styles.css

2026-06-21T03:26:14Z

弃权者：

#gf-homepage {
width: 100%;
margin: 0 auto;
margin-top: -1rem;
}

#gf-hero-wrap {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}

.gf-hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.5s ease;
}

.gf-hero-slide.active {
opacity: 1;
}

.gf-hero-bg {
display: none;
}

.gf-hero-fg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}

@media ( min-width: 1201px ) {
.gf-hero-bg {
display: block;
position: absolute;
inset: 0;
background-size: cover;
background-position: center top;
filter: blur( 18px );
transform: scale( 1.08 );
}

.gf-hero-fg {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1200px;
transform: translateX( -50% );
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
}

#gf-hero-fade-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 120px;
pointer-events: none;
z-index: 8;
}

#gf-switcher-wrap {
position: absolute;
bottom: 16px;
left: 0;
right: 0;
display: flex;
justify-content: center;
z-index: 20;
}

#gf-switcher {
position: relative;
display: inline-flex;
background: rgba( 20, 22, 26, 0.82 );
border-radius: 14px;
border: 1px solid rgba( 255, 255, 255, 0.08 );
padding: 0 8px;
}

#gf-tab-indicator {
position: absolute;
top: 4px;
left: 0;
height: calc( 100% - 8px );
background: var(--color-progressive);
border-radius: 10px;
transition: transform 0.3s cubic-bezier( 0.4, 0, 0.2, 1 ),
width 0.3s cubic-bezier( 0.4, 0, 0.2, 1 );
z-index: 0;
pointer-events: none;
}

.gf-tab {
position: relative;
z-index: 1;
display: inline-block;
padding: 0.4rem 1.2rem;
font-size: 0.88rem;
font-weight: 500;
cursor: pointer;
border-radius: 10px;
border: none;
background: transparent;
color: rgba( 255, 255, 255, 0.6 );
transition: color 0.25s;
outline: none;
user-select: none;
white-space: nowrap;
}

.gf-tab:hover {
color: rgba( 255, 255, 255, 0.9 );
}

.gf-tab.active {
color: #fff;
}

#gf-content-wrap {
position: relative;
min-height: 200px;
margin-top: .5rem;
}

.gf-content-panel {
display: none;
animation: gfFadeIn 0.35s ease;
}

.gf-content-panel.active {
display: block;
}

@keyframes gfFadeIn {
from {
opacity: 0;
transform: translateY( 10px );
}
to {
opacity: 1;
transform: translateY( 0 );
}
}

.gf-cards {
display: grid;
grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
gap: 8px;
padding: 1rem 0;
}

.gf-card {
border: 1px solid var(--color-progressive);
overflow: hidden;
transition: background 0.2s;
padding: .8rem;
}

.gf-card__img img {
width: 100%;
display: block;
}

.gf-card__body {
padding: 0.75rem 1rem;
}

.gf-card--span2 {
grid-column: span 2;
}

.gf-card--span3 {
grid-column: span 3;
}

.gf-card--full {
grid-column: 1 / -1;
}

@media ( max-width: 720px ) {
#gf-hero-wrap {
height: 240px;
}

.gf-tab {
font-size: 0.78rem;
padding: 0.35rem 0.7rem;
}

.gf-card--span2,
.gf-card--span3 {
grid-column: span 1;
}
}

弃权者：

#gf-homepage {
width: 100%;
margin: 0 auto;
margin-top: -1rem;
}

/* ── 头图容器 ── */
#gf-hero-wrap {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}

/* ── slide层 ── */
.gf-hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.7s ease;
}

.gf-hero-slide.active {
opacity: 1;
}

/* ── 模糊背景层（仅超过1200px时显示） ── */
.gf-hero-bg {
display: none;
}

/* ── 清晰前景层 ── */
.gf-hero-fg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
/* Ken Burns：缓慢放大 */
transform: scale( 1.06 );
transition: transform 8s ease-out, opacity 0.7s ease;
}

.gf-hero-slide.active .gf-hero-fg {
transform: scale( 1 );
}

@media ( min-width: 1201px ) {
.gf-hero-bg {
display: block;
position: absolute;
inset: 0;
background-size: cover;
background-position: center top;
filter: blur( 18px );
transform: scale( 1.08 );
}

.gf-hero-fg {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1200px;
transform: translateX( -50% ) scale( 1.06 );
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
transition: transform 8s ease-out, opacity 0.7s ease;
}

.gf-hero-slide.active .gf-hero-fg {
transform: translateX( -50% ) scale( 1 );
}
}

/* ── 底部渐变遮罩 ── */
#gf-hero-fade-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 120px;
pointer-events: none;
z-index: 8;
}

/* ── 导航外层（定位到Banner底部） ── */
#gf-switcher-wrap {
position: absolute;
bottom: 16px;
left: 0;
right: 0;
display: flex;
justify-content: center;
z-index: 20;
}

/* ── Segmented Control整体 ── */
#gf-switcher {
position: relative;
display: inline-flex;
padding: 4px;
background: rgba( 20, 22, 26, 0.82 );
border-radius: 14px;
border: 1px solid rgba( 255, 255, 255, 0.08 );
}

/* ── 滑动指示器 ── */
#gf-tab-indicator {
position: absolute;
top: 4px;
left: 4px;
height: calc( 100% - 8px );
background: #3d78c4;
border-radius: 10px;
transition: transform 0.3s cubic-bezier( 0.4, 0, 0.2, 1 ),
width 0.3s cubic-bezier( 0.4, 0, 0.2, 1 );
z-index: 0;
pointer-events: none;
}

/* ── 单个tab ── */
.gf-tab {
position: relative;
z-index: 1;
display: inline-block;
padding: 0.4rem 1.2rem;
font-size: 0.88rem;
font-weight: 500;
cursor: pointer;
border-radius: 10px;
border: none;
background: transparent;
color: rgba( 255, 255, 255, 0.6 );
transition: color 0.25s;
outline: none;
user-select: none;
white-space: nowrap;
}

.gf-tab:hover {
color: rgba( 255, 255, 255, 0.9 );
}

.gf-tab.active {
color: #fff;
font-weight: 500;
}

.gf-tab:focus {
box-shadow: 0 0 0 2px rgba( 61, 120, 196, 0.5 );
}

/* ── 内容区 ── */
#gf-content-wrap {
position: relative;
min-height: 200px;
}

.gf-content-panel {
display: none;
animation: gfFadeIn 0.35s ease;
}

.gf-content-panel.active {
display: block;
}

@keyframes gfFadeIn {
from {
opacity: 0;
transform: translateY( 10px );
}
to {
opacity: 1;
transform: translateY( 0 );
}
}

@media ( max-width: 720px ) {
#gf-hero-wrap {
height: 240px;
}

.gf-tab {
font-size: 0.78rem;
padding: 0.35rem 0.7rem;
}
}

User:弃权者/首页

2026-06-20T14:12:17Z

弃权者：

User:弃权者/首页

2026-06-20T09:04:33Z

弃权者：

User:弃权者/首页/styles.css

2026-06-20T09:02:00Z

弃权者：

#gf-homepage {
width: 100%;
margin: 0 auto;
margin-top: -1rem;
}

#gf-hero-wrap {
position: relative;
width: 100%;
height: clamp( 220px, 38vw, 520px );
overflow: hidden;
}

.gf-hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center top;
opacity: 0;
transition: opacity 0.6s ease;
}

.gf-hero-slide.active {
opacity: 1;
}

#gf-hero-fade-bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 55%;
pointer-events: none;
z-index: 2;
}

#gf-hero-fade-left {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 20%;
pointer-events: none;
z-index: 2;
}

#gf-hero-fade-right {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 20%;
pointer-events: none;
z-index: 2;
}

#gf-switcher {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem;
padding: 1rem 0 1.25rem;
position: relative;
z-index: 5;
margin-top: -2.5rem;
}

.gf-tab {
display: inline-block;
padding: 0.45rem 1.4rem;
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.03em;
cursor: pointer;
border-radius: 2em;
border: 1.5px solid rgba( 255, 255, 255, 0.25 );
background: rgba( 30, 32, 38, 0.72 );
color: #e8e8e8;
transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.15s;
outline: none;
user-select: none;
}

.gf-tab:hover {
background: rgba( 60, 65, 80, 0.85 );
border-color: #6ea7e0;
}

.gf-tab.active {
background: #3d78c4;
border-color: #3d78c4;
color: #fff;
transform: scale( 1.04 );
}

.gf-tab:focus {
box-shadow: 0 0 0 3px rgba( 61, 120, 196, 0.45 );
}

#gf-content-wrap {
position: relative;
min-height: 200px;
}

.gf-content-panel {
display: none;
animation: gfFadeIn 0.35s ease;
}

.gf-content-panel.active {
display: block;
}

@keyframes gfFadeIn {
from {
opacity: 0;
transform: translateY( 10px );
}
to {
opacity: 1;
transform: translateY( 0 );
}
}

@media ( max-width: 720px ) {
#gf-hero-wrap {
height: clamp( 160px, 52vw, 280px );
}

.gf-tab {
font-size: 0.78rem;
padding: 0.35rem 0.9rem;
}

#gf-switcher {
gap: 0.35rem;
padding: 0.75rem 0 1rem;
margin-top: -1.8rem;
}
}

2026-06-20T08:41:01Z

弃权者：

<templatestyles src="User:弃权者/首页/styles.css" /><div class="game-switcher">
<div class="game-switcher">
<div id="gs-hero-wrap"></div>
<div class="gs-tabs">
<div class="gs-tab-btn" tabindex="0" role="tab"
data-panel="panel-dst"
data-hero="{{filepath:index_gf_hero.jpg}}"
data-page="User:弃权者/首页/少女前线">少女前线</div>
<div class="gs-tab-btn" tabindex="0" role="tab"
data-panel="panel-dse"
data-hero="{{filepath:index_gf2_hero.jpg}}"
data-page="User:弃权者/首页/追放">追放</div>
<div class="gs-tab-btn" tabindex="0" role="tab"
data-panel="panel-ds"
data-hero="{{filepath:index_gfnc_hero.jpg}}"
data-page="User:弃权者/首页/云图计划">云图计划</div>
<div class="gs-tab-btn" tabindex="0" role="tab"
data-panel="panel-ds"
data-hero="{{filepath:index_gfb_hero.jpg}}"
data-page="User:弃权者/首页/面包房行动">面包房行动</div>
</div>

<div class="gs-content">
<div class="gs-content-panel gs-active" id="panel-dst">{{:User:弃权者/首页/少女前线}}</div>
</div>

</div>

{{#widget:GameSwitcher}}