init
This commit is contained in:
@@ -0,0 +1,149 @@
|
||||
/* 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:100%;
|
||||
height:40px;
|
||||
display:flex;
|
||||
justify-content:flex-start;
|
||||
align-items:flex-start;
|
||||
padding:5px 7px;
|
||||
overflow:visible;
|
||||
border:0;
|
||||
border-radius:0;
|
||||
background:#090709;
|
||||
box-shadow:none;
|
||||
}
|
||||
.game-tabs::after {
|
||||
content:"";
|
||||
position:absolute;
|
||||
z-index:3;
|
||||
left:7px;
|
||||
right:7px;
|
||||
top:35px;
|
||||
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:30px;
|
||||
padding:0 12px;
|
||||
border:0;
|
||||
background:#080808;
|
||||
color:#9c815a;
|
||||
font:16px/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:5px;
|
||||
right:0;
|
||||
width:1px;
|
||||
height:19px;
|
||||
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:39px;height:5px;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:9px;
|
||||
height:4px;
|
||||
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; }
|
||||
Reference in New Issue
Block a user