|
|
| Line 40: |
Line 40: |
|
| |
|
| li { line-height:1.2em; margin:0.8em 0 } /* spacing of bullet points */ | | li { line-height:1.2em; margin:0.8em 0 } /* spacing of bullet points */ |
|
| |
|
| |
| /*==Tabs extension workaround==*/
| |
|
| |
| /* Since the "Tabs" extension wasn't working in mobile mode, I decided to do the following as a workaround: Copy-paste the entire file "ext.tabs.css" into here. It's a long file and it sucks to have it all here, but at least it works - even without also copy-pasting the "ext.tabs.js" file into [[MediaWiki:Mobile.js]]. So here it is: */
| |
| /* 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 <body> tag can't also be an <oldbrowser> 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 <tab> or <tabs> 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.
| |
| */
| |
| #tabs-inputform {
| |
| font-family: sans-serif !important;
| |
| margin: 0px !important;
| |
| }
| |
| head~body #tabs-inputform {margin: 1px !important;}
| |
| body:not(oldbrowser) #tabs-inputform {font-family: serif !important;}
| |
|
| |
| /**
| |
| * 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,
| |
| #tabs-inputform,
| |
| 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;}
| |
|
| |
| /**
| |
| * Regarding the * html and *+html selectors
| |
| *
| |
| * IE ver. 5.5-7 support no inline-block on divs.
| |
| * These selectors manage to select the <html> tag in versions 6 and 7 of IE, respectively.
| |
| * Do not change .tabs-togglebox to a <span> 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 <li> 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 <li>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 <detail> and <summary> 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;}
| |