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