MediaWiki:Vector.css

/* CSS placed here will affect users of the Vector skin */

/* ================================================== * * CUSTOM HIGHLIGHT CLASS (puts a glow around text)  * * ================================================== */

/* html{ --NOL-burntgold:    #c5a63b; --NOL-gold:         #ffdf8c;  //goldenrod --NOL-blue:         #347cd0;  //steelblue --NOL-lightblue:    #8dcaf7;  //lightsteelblue }

.mw-body-content .highlight { color: #024ea0; /* dark blue */ text-shadow: 0px 0px 2px #024ea0; /* dark blue */

}

.mw-body-content a .highlight, .mw-body-content .highlight a { text-shadow: 0px 0px 2px #0645ad; /* dark blue */ }

.mw-body-content a.new .highlight, .mw-body-content .highlight a.new { text-shadow: 0px 0px 1px crimson; }

.mw-body-content a.external .highlight, .mw-body-content a.extiw .highlight, .mw-body-content a.extiw:active .highlight, .mw-body-content .highlight a.external, .mw-body-content .highlight a.extiw, .mw-body-content .highlight a.extiw:active { text-shadow: 0px 0px 2px #8dcaf7; /* var(--NOL-lightblue) */ }

.mw-body-content a.external:visited .highlight, .mw-body-content a.extiw:visited .highlight, .mw-body-content .highlight a.external:visited, .mw-body-content .highlight a.extiw:visited { text-shadow: 0px 0px 2px #347cd0; /* var(--NOL-blue) */ }

/* =============================== * * CSS for Template:Character_Tabs * * =============================== */ /* CUSTOM TABS */

.NOL-tabs-wrapper { border-bottom-color: lightblue; }

/* unselected tabs */ .NOL-tabs p a, .NOL-tabs li a, .NOL-tabs ul li a { background-color: #eee; border: 1px solid lightblue; } /* current tab */ .NOL-tabs p .mw-selflink, .NOL-tabs li .mw-selflink, .NOL-tabs ul li .mw-selflink { background-color: #ffffff; border-bottom-color: white; color: black; }

/* dropdown colors - main code is in /wiki/MediaWiki:Common.css */ .dropdown div ul, .dropdown ul { background-color: white; border: 1px solid #aaa; text-align: left; }

/* CSS below is a temporary fix until the Extension:Tabs CSS is once again properly applied */

/* Layout styles */

/** * The direct-child selector (a > b) should be used whenever possible, except for elements within .tabs-content, * to prevent styling issues with nested tags. Use >*> whenever necessary, as this doesn't increase specificity. */

/** * Regarding the usage of the body:not(oldbrowser) selector: * * All browsers with support for :not also support :checked * Putting body:not(oldbrowser) as part of the selector will cause only browsers with :checked support to render the styles * IE is not the only browser that lacks :checked support, so conditional comments are not an option here. * :not(oldbrowser) is chosen as selector, since the tag can't also be an tag at the same time. * The only browsers with :checked support, but without :not support are Opera 9.0-9.5 and Safari 3.1.* * Those browsers will have to rely on the JS alternative. If JS is disabled for them, all tabs will show at once. * this needs to be a seperate style, since old browsers will ignore the rule with :not altogether. * Sources: https://developer.mozilla.org/en-US/docs/Web/CSS/:checked#Browser_compatibility, *         https://developer.mozilla.org/en-US/docs/Web/CSS/:not#Browser_compatibility */ body:not(oldbrowser) .tabs-content {display: none;}

/** * This is for testing if the browser supports the :not selector. !important is used to ensure this style doesn't change. * The "sans-serif" ("without-serif") and "serif" fonts are used to indicate :not-support (so also :checked support, since those * selectors gained support in almost every browser at the very same moment). "sans-serif" indicates no support; "serif" indicates :not support. * This form is used as a "testcase" because it is hidden from view anyway, and always present when any or tags are present. * The margin: 0px is to determine whether the browser supports the general sibling selector ~. If it doesn't, there is "no margin" for interactivity, so JS is not activated. */	font-family: sans-serif !important; margin: 0px !important; } head~body #tabs-inputform {margin: 1px !important;} body:not(oldbrowser) #tabs-inputform {font-family: serif !important;}
 * 1) tabs-inputform {

/** * max-height prevents font-boosting on tabs in mobile browsers even when not in mobile skin. * Font-boosting causes weird differences between tab contents and surrounding text (most specifically for inline tabs), so disabling it altogether. * If font-boosting doesn't create difference in size between text and inline tab contents anymore, remove or comment out the next line. */ .tabs, .tabs * { max-height: 1000000px; } .tabs-input, .tabs-close, body.tabs-oldbrowserscript .tabs-content {display: none;} .tabs-tabbox, .tabs-togglebox { margin: 10px 0; } .tabs-label { cursor: pointer; padding: 1px 6px; background-color: #DDD; border: 1px solid #AAA; } .tabs-togglebox.tabs-inline {display: inline-block;}
 * 1) tabs-inputform,

/** * Regarding the * html and *+html selectors * * IE ver. 5.5-7 support no inline-block on divs. * These selectors manage to select the tag in versions 6 and 7 of IE, respectively. * Do not change .tabs-togglebox to a just for supporting these versions of IE though, because block-level elements will be placed within it * 	and it is not allowed to nest block-level elements inside span elements. * Sources: http://blogs.msdn.com/b/ie/archive/2005/09/02/460115.aspx *         http://www.webdevout.net/css-hacks#in_css-selectors *         https://en.wikipedia.org/wiki/CSS_hack#Star_plus_hack */
 * html .tabs-togglebox .tabs-inline {display: inline;}/*IE6 and below*/
 * +html .tabs-togglebox .tabs-inline {display: inline;}/*IE7 only*/

/** * The following is an alternative to the non-IE<9 `:first-of-type` and selects the first tabs-label, * since only the first label is positioned behind 2 inputs in a row. */ .tabs-tabbox > .tabs-input+ .tabs-input+ .tabs-label { margin-left: 10px; } .tabs-tabbox > .tabs-container { margin-top: -1px; padding: 2px 6px; border-radius: 8px; position: relative; border: 1px solid #AAA; width: inherit; /*This will cause the width to be inherited from the main tab, and enables the possibility to use width: inherit within the tab itself too */ max-width: inherit; min-width: inherit; z-index: 1; /* unselected tab is positioned below the content this way */ } .tabs-tabbox > .tabs-label { margin: 0 2px; border-bottom: none; border-radius: 7px 7px 0 0; position: relative; display: inline-block; vertical-align: bottom; } .tabs-tabbox .tabs-content-0 { display: inline-block; } .tabs-tabbox .tabs-block.tabs-content-0 { display: block; } .tabs-tabbox .tabs-inline.tabs-content-0 { display: inline; } .tabs-plain > .tabs-label { border: 1px solid #AAA; border-radius: 8px; margin: 2px; } .tabs-plain > .tabs-container { border-radius: 0; border: none; padding: 0; margin-top: 1px; }

.tabs-togglebox > .tabs-container { display: inline-block; /* this is to make the box the minimal width it needs to be */ width: inherit; min-width: inherit; max-width: inherit; padding: 0; border-radius: 8px; } .tabs-togglebox >*> .tabs-label { display: block; text-align: center; border-radius: 7px; padding: 1px 5px; margin: 0; outline: none; /* prevent :focus outline */ } .tabs-togglebox >*> .tabs-content { padding: 2px 6px; border-radius: 0 0 7px 7px; border: 1px solid #AAA; border-top: none; vertical-align: top; }

.tabs-dropdown .tabs-container { width: inherit; min-width: inherit; max-width: inherit; position: relative; } .tabs-dropdown >*> .tabs-content { border-radius: 0; } .tabs-dropdown p {margin: 0;} .tabs-dropdown >*> .tabs-label { margin-right: -14px; /* This is to align the label with the tabs content correctly: it becomes 2*7px (padding + border-width on tabs-content) wider. */ } .tabs-dropdown { margin-right: 14px; /*Cancel out the -14px margin to prevent clipping problems*/ } .tabs-dropdown >*> .tabs-content { position: absolute; z-index: 100000; cursor: default; margin: 0; padding: 0 6px; display: block; /* tabs-content is display: block by default, but is hidden by moving it off the screen to allow delaying the showing of the contents, via CSS transitions */ left: -1000000px; /*move the menu off the screen. As opposed to display: none, this does allow transition-delay.*/ } .tabs-dropdown >*> .tabs-content, .tabs-dropdown li ul, .tabs-dropdown li ol { width: inherit; min-width: inherit; max-width: inherit; box-shadow: 2px 3px 5px #888; } .tabs-dropdown li { width: inherit; min-width: inherit; max-width: inherit; }

.tabs-dropdown >*> .tabs-label, .tabs-dropdown >*> .tabs-content, .tabs-dropdown ul, .tabs-dropdown ul:before, .tabs-dropdown ol, .tabs-dropdown ol:before { /* Delay opening the togglebox to prevent accidental opening when moving the mouse over it. this should be enough delay to accomplish this. */	-webkit-transition-property: left, margin-left, border-radius; -webkit-transition-delay: 0.2s; -moz-transition-property: left, margin-left, border-radius; -moz-transition-delay: 0.2s; -o-transition-property: left, margin-left, border-radius; -o-transition-delay: 0.2s; transition-property: left, margin-left, border-radius; transition-delay: 0.2s; }

.tabs-dropdown .tabs-dropdown { margin-left: -7px; /* prevent overflowing for nested dropdowns. */ } .tabs-dropdown li li .tabs-dropdown { margin-left: 0; /* this negative margin is not necessary in sub-menus */ }

.tabs-dropdown li, .tabs-dropdown >*> .tabs-content> a, .tabs-dropdown >*> .tabs-content>p> a, .tabs-dropdown ol>li> a { display: list-item; list-style: none; margin: -1px -6px 0 -6px; /*These margins and padding styles cause the  to take up the full width of the dropdown: -6px cancels out the original padding.*/ padding: 2px 6px; border-top: 1px solid #AAA; position: relative; }

.tabs-dropdown ol>li> a { border: none; margin: -2px -6px; padding: 2px 6px; } .tabs-dropdown li li a { margin: -2px 0; } .tabs-dropdown li li, .tabs-dropdown li li:last-child { margin-left: 0; /* cancel out negative margins for the nested s */ margin-right: 0; padding: 2px 0; } .tabs-dropdown >*> .tabs-content ul, .tabs-dropdown >*> .tabs-content ol { margin: 0; /*remove initial margins*/ width: inherit; min-width: inherit; max-width: inherit; } .tabs-dropdown li ul, .tabs-dropdown li ol { position: absolute; border: 1px solid #AAA; top: -1px; left: -1000012px; } .tabs-dropdown li ul ~ ul, .tabs-dropdown li ul ~ ol, .tabs-dropdown li ol ~ ul, .tabs-dropdown li ol ~ ol { display: none; /*This prevents multiple different types of lists from overlapping within sub-menus. Sub-menus should always use the same type of list for all items.*/ } .tabs-dropdown li ul:before, .tabs-dropdown li ol:before { content: ">"; color: #88F; font-weight: bold; position: absolute; left: 100%; margin-left: 1000012px; } .tabs-dropdown li li ul:before, .tabs-dropdown li li ol:before { margin-left: 1000000px; }

/* Interactivity styles */

.tabs-label:hover { background-color: #CCC; } .tabs-label:active, .tabs-label:focus { background-color: #CCE; } .tabs-tabbox > .tabs-input:checked + .tabs-label, .tabs-input-0:checked + .tabs-input-1 + .tabs-label { z-index: 2; background-color: #FFF; } .tabs-togglebox >*> .tabs-input:checked + .tabs-label, .tabs-dropdown >*> .tabs-label:focus, .tabs-dropdown:hover >*> .tabs-label {border-radius: 7px 7px 0 0;}

.tabs-togglebox >*> .tabs-input:checked ~ .tabs-content {display: block;} /* tabs-close is hidden by default, tabs-open is shown by default. Swap this when the tab is opened. */ .tabs-togglebox .tabs-input:checked + * .tabs-close {display: inline;} .tabs-togglebox .tabs-input:checked + * .tabs-open {display: none;}

.tabs-dropdown >*> .tabs-content li:hover { background: #CCC; } .tabs-dropdown a, .tabs-dropdown a:hover, .tabs-dropdown a: visited { color: #15B; } .tabs-dropdown a:active { color: #108; } .tabs-dropdown >*> .tabs-content> a:hover, .tabs-dropdown >*> .tabs-content>p> a:hover, .tabs-dropdown ol>li> a:hover { background: #CCE; text-decoration: none; }

.tabs-dropdown >*> .tabs-label:focus + .tabs-content, .tabs-dropdown:hover >*> .tabs-content {left: 0;} .tabs-dropdown >*> .tabs-content li:hover > ul, .tabs-dropdown >*> .tabs-content li:hover > ol { left: 100%; } .tabs-dropdown >*> .tabs-content li:hover > ul:before, .tabs-dropdown >*> .tabs-content li:hover > ol:before { margin-left: 0; left: -12px; }

/***** The same :checked interactivity styles, but for non-:checked browsers with JS *****/ .tabs-tabbox > .tabs-input.checked + .tabs-label, .tabs-input-0.checked + .tabs-input-1 + .tabs-label { z-index: 2; background-color: #FFF; } .tabs-togglebox >*> .tabs-input.checked ~ .tabs-content {display: block;} .tabs-togglebox >*> .tabs-input.checked + * .tabs-close {display: inline;} .tabs-togglebox >*> .tabs-input.checked + * .tabs-open {display: none;}

/** * The following is an alternative toggle system for Android Browser using and tags * which is based on http://stackoverflow.com/q/21357641/1256925 */

summary::-webkit-details-marker { display: none; } .tabs-togglebox details.tabs-container:not([open]) .tabs-content { display: none; } .tabs-togglebox details.tabs-container[open] .tabs-content { display: block; }

.tabs-togglebox details.tabs-container:not([open]) .tabs-label { border-radius: 7px; } .tabs-togglebox details.tabs-container[open] .tabs-label { border-radius: 7px 7px 0 0; }

.tabs-togglebox details.tabs-container[open] .tabs-close {display: inline;} .tabs-togglebox details.tabs-container[open] .tabs-open {display: none;}