Worlio/worlio-themes
4
0
Fork 0
Code Issues Pull Requests Wiki Activity

Add full-width tabs, optimize stylesheet

Browse Source
This commit is contained in:
Kouya Heika
2025-08-06 03:12:05 -05:00
parent 7b644f0169
commit f58a0be4ef
1 changed files with 30 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
core/css/tabbed-container.css
View File

@@ -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%);