/* TABDIV.....css /* v-1 Nov'25 // //Put in of pages with a tab section /* --- Single-row classic tabs with native scrollbar (only if needed) --- */ /* The scrolling row */ .tabheading{ /* your original feel */ font-size:11pt; font-weight:400; width:100%; margin:0; padding:2px 0 6px 0; /* 2px top = rounded corners visible; 6px bottom = room for scrollbar */ /* behaviour */ display:flex; flex-wrap:nowrap; /* never wrap to 2 lines */ overflow-x:auto; /* show scrollbar only when overflowing */ overflow-y:visible; /* don’t clip rounded tops */ -webkit-overflow-scrolling:touch; scrollbar-gutter:stable; /* reserve space so the bar doesn’t steal height */ } /* Tabs: your classic look */ .tabheading a{ display:inline-block; text-decoration:none; font-weight:400; white-space:nowrap; /* label stays on one line */ word-break:normal; hyphens:none; flex:0 0 auto; /* don’t shrink */ padding:5px 10px 10px; /* your original padding controls height */ margin:0 -2px 0 0; /* butted borders, no gaps */ border:1px solid #bbb; border-top-left-radius:5px; border-top-right-radius:5px; color:inherit; position:relative; } /* Inactive (locked across states to beat :visited etc.) */ .tabtopdisable, .tabtopdisable:link, .tabtopdisable:visited, .tabtopdisable:active, .tabtopdisable:focus{ background:#ddd; color:#000; border-color:#bbb; } /* Active */ .tabtopenable, .tabtopenable:link, .tabtopenable:visited, .tabtopenable:active, .tabtopenable:focus{ background:#666; color:#fff; border-color:#666; z-index:1; } .tabheading{ padding: var(--tab-pad-top) 0 var(--tab-pad-bottom); } /* Hover accent (both states) */ .tabheading a:hover{ background:#bbb; color:#fff; } /* Safety: neutralise any lingering old inline styles */ .tabheading a{ margin-top:0 !important; } .tabheading a[style*="color"]{ color:inherit !important; } /* Positioning wrapper */ .tabbar-wrap{ --tab-pad-top: 2px; /* same as .tabheading padding-top */ --tab-pad-bottom: 6px; /* same as .tabheading padding-bottom */ --chev-width: 25px; /* tweak to taste (22–28px works well) */ position: relative; overflow: hidden; /* <- stops tabs flowing under/ past chevrons */ } /* Hide native scrollbar inside the wrapper; scrolling still works by touch/trackpad/JS */ .tabbar-wrap .tabheading{ scrollbar-width:none; -ms-overflow-style:none; } .tabbar-wrap .tabheading::-webkit-scrollbar{ display:none; } /* Chevrons (visibility controlled by the HTML [hidden] attribute) */ .tabchev{ position:absolute; top:0; bottom:0; font-size:20px; width:38px; display:flex; align-items:center; justify-content:center; padding:0; margin:0; border:2px solid #bbb; background:#fff; color:#333; cursor:pointer; user-select:none; opacity:.95; z-index:5; } .tabchev.left{ left:0; border-top-left-radius:3px; border-bottom-left-radius:3px; height:37px; margin-top:2px} .tabchev.right{ right:0; border-top-right-radius:3px; border-bottom-right-radius:3px; height:37px; margin-top:2px} .tabchev:hover{ background:#eee; } .tabchev:focus-visible{ outline:2px solid #0050ff; outline-offset:2px; } /* make sure the hidden attribute always wins */ .tabchev[hidden]{ display:none !important; }