diff --git a/core/css/tabbed-container.css b/core/css/tabbed-container.css index 8a87d22..938d276 100644 --- a/core/css/tabbed-container.css +++ b/core/css/tabbed-container.css @@ -6,8 +6,8 @@ flex-direction: column; } -.tabbed-page .tablist, -.tabbed-container .tablist { +.tabbed-page > .tablist, +.tabbed-container > .tablist { position: relative; bottom: -2px; display: flex; @@ -17,21 +17,15 @@ overflow-y: hidden; } -.tabbed-page .tablist .tab, -.tabbed-container .tablist .tab, -.tabbed-container .tablist .faketab { - cursor: pointer; +.tabbed-page > .tablist.fulltabs > .tab, +.tabbed-container > .tablist.fulltabs > .tab, +.tabbed-container > .tablist.fulltabs > .faketab { + flex-grow: 1; } -.tablist a, -.tablist a:link, .tablist a:visited { - color: var(--main-text); - text-decoration: none; -} - -.tabbed-page .tablist .tab, -.tabbed-container .tablist .tab, -.tabbed-container .tablist .faketab { +.tabbed-page > .tablist > .tab, +.tabbed-container > .tablist > .tab, +.tabbed-container > .tablist > .faketab { background-color: var(--tab-inactive); border: var(--tab-border); display: inline-block; @@ -41,6 +35,13 @@ bottom: -2px; text-align: center; font-family: var(--primary-font); + cursor: pointer; +} + +.tablist a, +.tablist a:link, .tablist a:visited { + color: var(--main-text); + text-decoration: none; } .tabbed-container .tablist .tab *:not(.userlink) img, @@ -48,9 +49,9 @@ vertical-align: middle; } -.tabbed-page .tablist .tab.selected, -.tabbed-container .tablist .tab.selected, -.tabbed-container .tablist .faketab.selected { +.tabbed-page > .tablist > .tab.selected, +.tabbed-container > .tablist > .tab.selected, +.tabbed-container > .tablist > .faketab.selected { background: var(--tab-selected, #d3d3d3); background: -moz-linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%); background: -webkit-linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%); @@ -59,15 +60,15 @@ /*border-bottom: none;*/ } -.tabbed-page .box:not(table), -.tabbed-container .box:not(table), -.tabbed-container .dropdown { +.tabbed-page > .box:not(table), +.tabbed-container > .box:not(table), +.tabbed-container > .dropdown { display: block; } -.tabbed-page .box, -.tabbed-container .box, -.tabbed-container .dropdown { +.tabbed-page > .box, +.tabbed-container > .box, +.tabbed-container > .dropdown { background-color: var(--tab-selected); border: var(--tab-border); padding: 4px; @@ -75,7 +76,7 @@ } /* JS should handle positions and shit */ -.tabbed-container .dropdown { +.tabbed-container > .dropdown { position: absolute; border-top: none; } @@ -105,15 +106,15 @@ flex-shrink: 0; } - .tabbed-container.vertical > .tablist .tab, - .tabbed-container.vertical > .tablist .faketab { + .tabbed-container.vertical > .tablist > .tab, + .tabbed-container.vertical > .tablist > .faketab { margin: 2px 0px; right: -1px; bottom: 0px; } - .tabbed-container.vertical > .tablist .tab.selected, - .tabbed-container.vertical > .tablist .faketab.selected { + .tabbed-container.vertical > .tablist > .tab.selected, + .tabbed-container.vertical > .tablist > .faketab.selected { background: var(--tab-selected, #d3d3d3); background: -moz-linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%); background: -webkit-linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);