Kittymmeow (talk | contribs) No edit summary |
Kittymmeow (talk | contribs) No edit summary |
||
Line 66: | Line 66: | ||
flex-wrap:wrap; |
flex-wrap:wrap; |
||
white-space:nowrap; |
white-space:nowrap; |
||
⚫ | |||
} |
} |
||
Line 75: | Line 74: | ||
font-size: 90%; |
font-size: 90%; |
||
line-height: 1em; |
line-height: 1em; |
||
− | + | margin: 3px 0 0 0.4em; |
|
− | /* border size mismatch between active/inactive tabs causes bad things and this is the easiest solution */ |
||
border-bottom: 1px solid var(--tabheader-border); |
border-bottom: 1px solid var(--tabheader-border); |
||
− | margin: 3px 0 0 0.4em; |
||
} |
} |
||
.tabheader-tab:last-of-type { |
.tabheader-tab:last-of-type { |
||
Line 86: | Line 83: | ||
.tabheader-active { |
.tabheader-active { |
||
font-weight: bold; |
font-weight: bold; |
||
⚫ | |||
⚫ | |||
⚫ | |||
− | /* once again gotta have the border match, solution sucks but works */ |
||
} |
} |
||
Line 96: | Line 91: | ||
background-color: var(--tabheader-tab); |
background-color: var(--tabheader-tab); |
||
width:auto; |
width:auto; |
||
+ | border: 1px solid transparent; |
||
⚫ | |||
} |
} |
||
.tabheader-active .tabheader-content { |
.tabheader-active .tabheader-content { |
||
background-color: var(--content-bg-color); |
background-color: var(--content-bg-color); |
||
+ | border-color: var(--tabheader-border); |
||
} |
} |
||
Line 110: | Line 108: | ||
position:absolute; |
position:absolute; |
||
bottom:-1px; |
bottom:-1px; |
||
− | left:calc(- |
+ | left:calc(-1px - .4em); |
content:""; |
content:""; |
||
+ | } |
||
+ | |||
+ | /** last tab spacer **/ |
||
+ | .tabheader-tab.tabheader-active:last-of-type::after { |
||
+ | display: inline-block; |
||
⚫ | |||
+ | flex-grow: 1; |
||
+ | content: ""; |
||
} |
} |
||
Revision as of 22:14, 3 June 2020
/* dynamictabs */
div.tabs-dynamic,
div.tabs-static {
overflow-x: hidden;
min-width: calc(320px - 2em);
}
ul.tabs {
margin: 0;
padding: 0;
}
ul.tabs > li {
background-color: var(--interface-background);
border: 1px solid var(--interface-border);
border-bottom: 0;
border-radius: 2px 2px 0 0;
cursor: pointer;
display: inline-block;
font-size: 90%;
margin: 4px 0 0;
padding: 1px 0.35em;
}
ul.tabs > li.active {
background-color: var(--content-bg-color);
border: 2px solid var(--wiki-color);
margin-bottom: -2px;
padding-bottom: 3px;
border-bottom: 0;
}
.frontpage-inner ul.tabs > li.active {
background-color:var(--fpbox-background);
}
div.tabs-content {
background-color: var(--content-bg-color);
border: 2px solid var(--wiki-color);
border-right: 0;
border-bottom: 0;
padding: 0.5em;
}
.frontpage-inner div.tabs-content {
background-color:var(--fpbox-background);
}
div.tabs-content > div:not(.active) {
display: none;
}
div.tabs-content > div {
overflow-x: auto;
overflow-y: hidden;
}
ul.tabs > li + li {
margin-left:0.35em;
}
/* start Module:TabsHeader styles */
/** main tab box **/
.tabheader-top {
display:flex;
flex-wrap:wrap;
white-space:nowrap;
}
/** individual tabs **/
.tabheader-tab {
position:relative;
display: inline-block;
font-size: 90%;
line-height: 1em;
margin: 3px 0 0 0.4em;
border-bottom: 1px solid var(--tabheader-border);
}
.tabheader-tab:last-of-type {
display:flex;
flex-grow:1;
}
.tabheader-active {
font-weight: bold;
border-color:transparent;
}
/** tab content **/
.tabheader-content {
padding: 0.4em 0.5em 0.2em;
background-color: var(--tabheader-tab);
width:auto;
border: 1px solid transparent;
border-bottom:0;
}
.tabheader-active .tabheader-content {
background-color: var(--content-bg-color);
border-color: var(--tabheader-border);
}
/** between-tab spacers **/
.tabheader-tab::before{
display:inline-block;
border-bottom: 1px solid var(--tabheader-border);
width:calc(2px + .4em);
/* ok i hate this but its width of gap + total width of left/right border on the tab */
height:1em;
position:absolute;
bottom:-1px;
left:calc(-1px - .4em);
content:"";
}
/** last tab spacer **/
.tabheader-tab.tabheader-active:last-of-type::after {
display: inline-block;
border-bottom: 1px solid var(--tabheader-border);
flex-grow: 1;
content: "";
}
.correspondingpagebox {
margin: -0.4em 0 0;
border: 1px dashed var(--tabheader-border);
float: right;
padding: 0.3em 0.5em 0.25em;
font-size: 90%;
line-height: 0.95em;
}
/* end Module:TabsHeader styles */
/* start titletabs */
.titletabs-tabs {
width: 100%;
line-height: normal;
text-align: center;
padding: 0 0 4px;
background-color: var(--titletabs-background);
}
.titletabs-row2 {
background-color: transparent;
}
.titletabs-tab {
display: inline-block;
padding: 5px;
background-color: transparent;
}
.titletabs-tabs .titletabs-tab,
.titletabs-tabs .titletabs-tab a:visited,
.titletabs-tabs .titletabs-tab a {
color: var(--body-text-color);
font-size: 100%;
text-decoration: none;
}
.titletabs-tab.active,
.titletabs-active {
background-color: var(--wiki-accent);
}
.titletabs-tabs .optionfromlist-toggler-lazy.active,
.titletabs-tabs .optionfromlist-toggler.active,
.titletabs-tabs .titletabs-active a,
.titletabs-tab.active,
.titletabs-tab.active a:visited,
.titletabs-tab.active a,
.titletabs-active a:visited,
.titletabs-active a {
color: var(--accent-text-color);
font-size: 110%;
}
/* end titletabs */