forked from Kieran/zap.stream
fix: profile tab borders
This commit is contained in:
parent
2971815417
commit
4a9fed34f0
@ -119,10 +119,10 @@
|
||||
}
|
||||
|
||||
.tabs-tab {
|
||||
background: black;
|
||||
background: #0A0A0A;
|
||||
background-clip: padding-box;
|
||||
color: white;
|
||||
border: 1px solid black;
|
||||
border: 1px solid #0A0A0A;
|
||||
border-bottom: 1px solid transparent;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
@ -137,18 +137,24 @@
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@media (max-width: 400px){
|
||||
.tabs-tab {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.tabs-tab[data-state='active']:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
z-index: -1;
|
||||
margin: -1px;
|
||||
|
||||
.tab-border {
|
||||
height: 1px;
|
||||
margin-top: 12px;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tabs-tab[data-state='active'] .tab-border {
|
||||
height: 1px;
|
||||
background: linear-gradient(94.73deg, #2BD9FF 0%, #8C8DED 47.4%, #F838D9 100%);
|
||||
}
|
||||
|
||||
|
@ -149,12 +149,15 @@ export function ProfilePage() {
|
||||
>
|
||||
<Tabs.Trigger className="tabs-tab" value="top-zappers">
|
||||
Top Zappers
|
||||
<div className="tab-border"></div>
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger className="tabs-tab" value="past-streams">
|
||||
Past Streams
|
||||
<div className="tab-border"></div>
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger className="tabs-tab" value="schedule">
|
||||
Schedule
|
||||
<div className="tab-border"></div>
|
||||
</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
<Tabs.Content className="tabs-content" value="top-zappers">
|
||||
|
Loading…
Reference in New Issue
Block a user