sigit_design/tabs.css

126 lines
2.5 KiB
CSS
Raw Normal View History

2024-07-25 15:52:20 +00:00
.tabsMain {
width: 100%;
display: flex;
flex-direction: column;
grid-gap: 15px;
}
.tabsMainTop {
width: 100%;
display: flex;
flex-direction: row;
grid-gap: 5px;
border: unset;
}
.nav.nav-tabs.tabsMainBottom {
display: flex;
flex-direction: column;
}
.nav-item.tabsMainTopTab {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.nav-link.tabsMainTopTabLink {
transition: ease 0.4s;
background: rgba(76,130,163,0);
border-radius: 4px;
color: rgba(0,0,0,0.5);
text-align: center;
border-radius: 4px;
border: unset;
padding: 10px;
margin: 0;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 16px;
}
.nav-link.tabsMainTopTabLink:hover {
background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), linear-gradient(#4c82a3, #4c82a3);
color: rgb(255,255,255);
}
.nav-link.active.tabsMainTopTabLink {
transition: ease 0.2s;
background: rgb(76,130,163);
border-radius: 4px;
color: rgb(255,255,255);
border: unset;
}
.tab-pane.tabsMainBottomPane {
width: 100%;
height: 100%;
}
.tabsMainTopTab.tabsMainTopTabNostr {
max-width: 75px;
padding: 0 0 0 10px;
border-left: solid 1px rgba(0,0,0,0.1);
}
.nav-link.tabsMainTopTabLink.tabsMainTopTabLinkAlt {
color: rgba(0,0,0,0.65);
}
.nav-link.tabsMainTopTabLink.tabsMainTopTabLinkAlt:hover {
transition: ease 0.4s;
color: rgba(255,255,255,0.65);
background: #5e8eab;
}
.nav-link.active.tabsMainTopTabLink.tabsMainTopTabLinkAlt {
background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)), linear-gradient(#4c82a3, #4c82a3);
color: white;
}
.nav-link.active.tabsMainTopTabLink.tabsMainTopTabLinkAlt:hover {
background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)), linear-gradient(#4c82a3, #4c82a3);
color: white;
}
.tabsMainBottomPaneLogin {
padding: 0 10px;
display: flex;
flex-direction: column;
grid-gap: 15px;
}
.tabsMainBottomPaneLoginSplitter {
width: 100%;
display: flex;
flex-direction: row;
grid-gap: 10px;
color: rgba(255,255,255,0.5);
font-size: 14px;
font-weight: 400;
text-align: center;
align-items: center;
}
.tabsMainBottomPaneLoginSplitterLine {
flex-grow: 1;
height: 2px;
background: rgba(255,255,255,0.1);
}
.btnMain.tabsMainBottomPaneLoginBtn.tabsMainBottomPaneLoginBtnAlt {
max-width: unset;
}
.tab-content.tabsMainBottom {
height: 100%;
}
.tabsMainTopTabLink.tabsMainTopTabLinkAlt.tabsMainTopTabLinkNostr {
background: #4c82a3;
}