Leaguepedia | League of Legends Esports Wiki
Register
No edit summary
No edit summary
Line 66: Line 66:
 
flex-wrap:wrap;
 
flex-wrap:wrap;
 
white-space:nowrap;
 
white-space:nowrap;
margin-bottom:3px;
 
 
}
 
}
   
Line 75: Line 74:
 
font-size: 90%;
 
font-size: 90%;
 
line-height: 1em;
 
line-height: 1em;
border: 1px solid transparent;
+
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;
 
border-color:transparent;
border: solid 1px var(--tabheader-border);
 
border-bottom:1px solid transparent;
 
/* 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;
 
border-bottom:0;
 
}
 
}
 
.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(-2px - .4em);
+
left:calc(-1px - .4em);
 
content:"";
 
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: "";
 
}
 
}
   

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 */