151 lines
4.5 KiB
CSS
151 lines
4.5 KiB
CSS
/* Source module: tabs.css */
|
|
.component-stack { display: flex; flex-direction: column; gap: 12px; }
|
|
.sample-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
|
|
.sample-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
|
|
.sample-grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
|
.sample-cell { min-width: 0; padding: 12px; border: 1px solid #202321; background: rgba(0,0,0,.22); }
|
|
|
|
.tabs-showcase { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
|
|
.game-tabs {
|
|
position:relative;
|
|
width:var(--tab-group-width,max-content);
|
|
max-width:100%;
|
|
height:32px;
|
|
display:flex;
|
|
justify-content:flex-start;
|
|
align-items:flex-start;
|
|
padding:4px 6px;
|
|
overflow:visible;
|
|
border:0;
|
|
border-radius:0;
|
|
background:#090709;
|
|
box-shadow:none;
|
|
}
|
|
.game-tabs::after {
|
|
content:"";
|
|
position:absolute;
|
|
z-index:3;
|
|
left:6px;
|
|
right:6px;
|
|
top:28px;
|
|
height:1px;
|
|
background:#584840;
|
|
pointer-events:none;
|
|
}
|
|
.game-tab {
|
|
--tab-126-glow:linear-gradient(90deg,
|
|
transparent 0%,
|
|
rgba(48,24,8,.18) 10%,
|
|
rgba(48,24,8,.72) 28%,
|
|
#301808 50%,
|
|
rgba(48,24,8,.72) 72%,
|
|
rgba(48,24,8,.18) 90%,
|
|
transparent 100%);
|
|
--tab-667-glow:radial-gradient(ellipse 58% 46% at 50% 100%,
|
|
rgba(114,97,30,.94) 0%,
|
|
rgba(88,74,23,.74) 34%,
|
|
rgba(52,44,14,.38) 66%,
|
|
transparent 100%);
|
|
appearance:none;
|
|
position:relative;
|
|
min-width:0;
|
|
width:var(--tab-item-width,auto);
|
|
flex:0 0 var(--tab-item-width,auto);
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
z-index:auto;
|
|
height:24px;
|
|
padding:0 10px;
|
|
border:0;
|
|
background:#080808;
|
|
color:#9c815a;
|
|
font:14px/1 "DCalc",SimSun,sans-serif;
|
|
text-shadow:1px 1px 0 #000,0 0 2px #000;
|
|
white-space:nowrap;
|
|
cursor:pointer;
|
|
}
|
|
.game-tab:not(:last-of-type)::after {
|
|
content:"";
|
|
position:absolute;
|
|
top:4px;
|
|
right:0;
|
|
width:1px;
|
|
height:15px;
|
|
background:linear-gradient(180deg,
|
|
rgba(52,47,42,.153) 0%,
|
|
rgba(52,47,42,.376) 5.56%,
|
|
rgba(52,47,42,.624) 11.11%,
|
|
rgba(52,47,42,.847) 16.67%,
|
|
#342f2a 22.22%,
|
|
#342f2a 77.78%,
|
|
rgba(52,47,42,.847) 83.33%,
|
|
rgba(52,47,42,.624) 88.89%,
|
|
rgba(52,47,42,.376) 94.44%,
|
|
rgba(52,47,42,.153) 100%);
|
|
pointer-events:none;
|
|
}
|
|
.game-tab:hover {
|
|
color:#e4ca90;
|
|
background-image:var(--tab-126-glow);
|
|
}
|
|
.game-tab.selected,
|
|
.game-tab.selected:hover {
|
|
color:#e4ca90;
|
|
background-image:var(--tab-667-glow),var(--tab-126-glow);
|
|
}
|
|
.game-tab .tab-label { position:relative;z-index:1;display:inline-block; }
|
|
.game-tab:active { transform:none; }
|
|
.game-tab:active .tab-label,
|
|
.game-tab.is-pressed .tab-label { transform:translateY(1px); }
|
|
.game-tabs > .tab-marker { position:absolute;z-index:4;left:0;bottom:0;width:33px;height:4px;opacity:0;transform:translateX(-50%);pointer-events:none; }
|
|
.game-tabs > .tab-marker::before {
|
|
content:"";
|
|
position:absolute;
|
|
inset:0 0 auto;
|
|
height:1px;
|
|
background:linear-gradient(90deg,
|
|
rgba(208,165,106,.024) 0%,
|
|
rgba(208,165,106,.22) 10%,
|
|
rgba(208,165,106,.49) 23%,
|
|
rgba(208,165,106,.82) 36%,
|
|
#9d7a35 44%,
|
|
#9d7a35 56%,
|
|
rgba(208,165,106,.82) 64%,
|
|
rgba(208,165,106,.49) 77%,
|
|
rgba(208,165,106,.22) 90%,
|
|
rgba(208,165,106,.024) 100%);
|
|
}
|
|
.game-tabs > .tab-marker::after {
|
|
content:"";
|
|
position:absolute;
|
|
left:50%;
|
|
top:1px;
|
|
width:7px;
|
|
height:3px;
|
|
background:linear-gradient(180deg,#9d7a35 0%,#a7823f 46%,#d0a56a 100%);
|
|
clip-path:polygon(0 0,100% 0,50% 100%);
|
|
transform:translateX(-50%);
|
|
filter:drop-shadow(0 0 1px rgba(157,122,53,.22));
|
|
}
|
|
.game-tabs > .tab-marker.is-ready { opacity:1;transition:left 300ms cubic-bezier(.22,.61,.36,1); }
|
|
.game-tabs > .tab-marker-line::before {
|
|
background:linear-gradient(90deg,
|
|
rgba(208,165,106,.024) 0%,
|
|
rgba(208,165,106,.286) 15%,
|
|
rgba(208,165,106,.631) 28%,
|
|
rgba(208,165,106,.875) 38%,
|
|
#d0a56a 50%,
|
|
rgba(208,165,106,.875) 62%,
|
|
rgba(208,165,106,.631) 72%,
|
|
rgba(208,165,106,.286) 85%,
|
|
rgba(208,165,106,.024) 100%);
|
|
}
|
|
.game-tabs > .tab-marker-line::after { display:none; }
|
|
@media (prefers-reduced-motion:reduce) { .game-tabs > .tab-marker.is-ready { transition:none; } }
|
|
.tabs-pager-row { display:flex;align-items:center;justify-content:space-between;margin-top:10px; }
|
|
|
|
.pager { height: 34px; display: flex; align-items: center; gap: 8px; color: var(--gold); }
|
|
.pager-btn { width: 27px; height: 25px; display:flex;align-items:center;justify-content:center;border:1px solid #514125;background:#101211;color:#8b8778; }
|
|
.pager-btn.active { background: #1b315c; color: #e3c977; }
|