Anyone thats using using Brians tabs: <a href="https://app.roll20.net/forum/post/882997/css-wizar" rel="nofollow">https://app.roll20.net/forum/post/882997/css-wizar</a>... I made some animated ones, I'm sure all the css wizards in here could do it without the 3 hours it took me to figure it out, but I thought it was amazing :) If you want to add them to your sheet, CSS is included (html is the same). div.sheet-tab-content {
display: none;
}
div.sheet-tab-relative_main {
position: relative;
}
input.sheet-tab1:checked~div.sheet-tab1,
input.sheet-tab2:checked~div.sheet-tab2,
input.sheet-tab3:checked~div.sheet-tab3,
input.sheet-tab4:checked~div.sheet-tab4,
input.sheet-tab5:checked~div.sheet-tab5 {
display: block;
}
input.sheet-tab {
width: 150px;
height: 20px;
position: relative;
cursor: pointer;
z-index: 1;
opacity: 0;
background:blue;
}
input.sheet-tab+span::before {
content: attr(title);
border: solid 1px black;
text-align: center;
display: inline-block;
color: #eee;
width: 149px;
height: 25px;
font-weight: bold;
font-size: 18px;
text-shadow: -1px -1px 0 #222, 1px -1px 0 #222, -1px 1px 0 #222, 1px 1px 0 #222;
position: absolute;
top: auto;
left: 10px;
background-color: #4f82af;
transition: height 1s;
}
input.sheet-tab:checked+span::before {
background: -webkit-linear-gradient(top, #fefcea 0%, #f1da36 100%);
color: #000000;
height:34px;
background-color: #f1da36;
text-shadow: 0px 0px 0 #fff;
}
input.sheet-tab:not(:checked)+span::before {
transition: height 1s, background-color 5s ease;
}
input.sheet-tab2+span::before {
left: 160px;
}
input.sheet-tab3+span::before {
left: 310px;
}
input.sheet-tab4+span::before {
left: 460px;
}
input.sheet-tab5+span::before {
left: 610px;
}
div.sheet-tab-content {
border: 1px solid #bcbcbc;
margin: 2px 2px 2px 2px;
padding: 2px;
}
