8,282
edits
(Blanked the page) Tags: Blanking Reverted |
No edit summary Tags: Manual revert Reverted |
||
Line 1: | Line 1: | ||
/** | |||
You are editing the global css file for all mobile site users. | |||
With Great Power Comes Great Responsibility. | |||
Some words of caution: | |||
* Avoid any changes which impact layout on a mobile device. | |||
** Please be careful not to introduce any margin / padding rules. These should be done inside the template itself via an inline style. | |||
** Be especially cautious when a template is likely to be used within the top 480px of the screen (the content that the user will see first on a mobile device). | |||
* Do not use display:none. Instead edit the template and markup the element you want to hide with the `nomobile` class. | |||
* Try to keep rules as generic and minimal as possible. Do not have 2 selectors doing the same thing. Introduce a common class and use that instead. | |||
* For big changes consult the [https://grafana.wikimedia.org/dashboard/db/mobile-2g grafana dashboard] to ensure you don't introduce any performance regressions. | |||
* Group common css rules together where possible. | |||
If you are looking for .mobile-float-reset (see [[:phab:T56176]]), use TemplateStyles instead. | |||
.mobile-float-reset { | |||
float: none !important; | |||
width: 100% !important; | |||
} | |||
*/ | |||
/* Fix dumb default styling */ | |||
.content code, | |||
.content pre { | |||
background-color: #f9f9f9; | |||
border: 1px solid #ddd; | |||
color: black; | |||
} | |||
.content code { | |||
border-radius: 2px; | |||
} | |||
@media all and (max-width: 768px) { | |||
.gallerybox .thumb > div { | |||
margin: 15px !important; | |||
width: auto !important; | |||
} | |||
} | |||
td { | |||
background-color: #FFF; | |||
} | |||
/* Use black bullet points, instead of blue circles: [[File:List bullet.svg]] */ | |||
.content ul { | |||
list-style-image: url('filepath://List_bullet.svg'); | |||
} | |||
/* Fix footer hlist separator colour */ | |||
.footer-content .hlist-separated li:after { | |||
color: #FFF; | |||
} | |||
/* Fix changes autocollapsing in recent changes */ | |||
.mw-changeslist-edit, .mw-changeslist-line { | |||
display: table-row !important; | |||
} | |||
.mw-changeslist-line-inner { | |||
padding-top: 1.5em; | |||
} | |||
.mw-enhanced-rc-nested { | |||
padding-top: 0.5em; | |||
} | |||
/* Alternating cell background */ | |||
.alternatecells:nth-child(odd) { | |||
background-color: #F9F9F9; | |||
} | |||
/* Alternating table rows, primarily used with [[Template:Infobox row]] */ | |||
.alternaterows tr:nth-child(even), | |||
.infobox-rows tr:nth-child(even), | |||
.alternaterows tr:nth-child(even) td, | |||
.infobox-rows tr:nth-child(even) td { | |||
background-color: #F9F9F9; | |||
} | |||
/* Show TOC */ | |||
@media (max-width: 512px) { | |||
.skin-minerva .toc-mobile { | |||
display: block; | |||
} | |||
} | |||
/* Turn a list into a tree view style (See [[.minecraft]]) */ | |||
.treeview { | |||
margin-top: 0.3em; | |||
} | |||
.treeview .treeview-header { | |||
padding-left: 3px; | |||
font-weight: bold; | |||
} | |||
.treeview .treeview-header:last-child { | |||
border-color: #636363 !important; | |||
border-left-style: dotted; | |||
} | |||
.treeview .treeview-header:not(:last-child):before { | |||
content: none; | |||
} | |||
.treeview .treeview-header:last-child:before { | |||
border-bottom: 0; | |||
} | |||
.treeview ul, | |||
.treeview li { | |||
margin: 0; | |||
padding: 0; | |||
list-style-type: none; | |||
list-style-image: none; | |||
} | |||
.treeview li li { | |||
position: relative; | |||
padding-left: 13px; | |||
margin-left: 7px; | |||
border-left: 1px solid #636363; | |||
} | |||
.treeview li li:before { | |||
content: ""; | |||
position: absolute; | |||
top: 0; | |||
left: -1px; | |||
width: 11px; | |||
height: 11px; | |||
border-bottom: 1px solid #636363; | |||
} | |||
.treeview li li:last-child:not(.treeview-continue) { | |||
border-color: transparent; | |||
} | |||
.treeview li li:last-child:not(.treeview-continue):before { | |||
border-left: 1px solid #636363; | |||
width: 10px; | |||
} | |||
.nbttree-inherited { | |||
background-color: #E6E6FA; | |||
} | |||
/* Try to use nearest neighbour scaling for pixelated images */ | |||
.pixel-image, | |||
.invslot-item-image, | |||
.sprite { | |||
image-rendering: optimizeSpeed; | |||
image-rendering: -webkit-optimize-contrast; | |||
image-rendering: optimize-contrast; | |||
image-rendering: -moz-crisp-edges; | |||
image-rendering: -o-crisp-edges; | |||
image-rendering: crisp-edges; | |||
image-rendering: pixelated; | |||
-ms-interpolation-mode: nearest-neighbor; | |||
} | |||
/* Simulate link styling for JS only links */ | |||
.jslink { | |||
color: #0645AD; | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
-ms-user-select: none; | |||
user-select: none; | |||
} | |||
.jslink:hover { | |||
text-decoration: underline; | |||
cursor: pointer; | |||
} | |||
.jslink:active { | |||
color: #FAA700; | |||
} | |||
/* Hatnotes and disambiguation notices */ | |||
.hatnote { | |||
font-style: italic; | |||
} | |||
.hatnote i { | |||
font-style: normal; | |||
} | |||
div.hatnote { | |||
padding-left: 1.6em; | |||
margin-bottom: 0.5em; | |||
} | |||
div.hatnote + div.hatnote { | |||
margin-top: -0.5em; | |||
} | |||
/* Fix animated infobox images shifting the screen when images have different dimensions */ | |||
.content span.animated a > img, | |||
.content span.animated a > .lazy-image-placeholder, | |||
.content noscript span.animated > img { | |||
max-width: initial !important; | |||
} | |||
body.page-Main_Page #firstHeading { | |||
display: none; | |||
} | |||
/* Hide nomobile */ | |||
.nomobile { | |||
display: none; | |||
} | |||
/* Try to use nearest neighbour scaling for pixelated images */ | |||
.pixel-image, | |||
.invslot-item-image, | |||
.sprite { | |||
image-rendering: optimizeSpeed; | |||
image-rendering: -webkit-optimize-contrast; | |||
image-rendering: optimize-contrast; | |||
image-rendering: -moz-crisp-edges; | |||
image-rendering: -o-crisp-edges; | |||
image-rendering: crisp-edges; | |||
image-rendering: pixelated; | |||
-ms-interpolation-mode: nearest-neighbor; | |||
} | |||
/* Classes corresponding to Minecraft formatting codes */ | |||
.format-0 { | |||
color: #000; | |||
text-shadow: 0.125em 0.125em 0 #000; | |||
} | |||
.format-1 { | |||
color: #00A; | |||
text-shadow: 0.125em 0.125em 0 #00002A; | |||
} | |||
.format-2 { | |||
color: #0A0; | |||
text-shadow: 0.125em 0.125em 0 #002A00; | |||
} | |||
.format-3 { | |||
color: #0AA; | |||
text-shadow: 0.125em 0.125em 0 #002A2A; | |||
} | |||
.format-4 { | |||
color: #A00; | |||
text-shadow: 0.125em 0.125em 0 #2A0000; | |||
} | |||
.format-5 { | |||
color: #A0A; | |||
text-shadow: 0.125em 0.125em 0 #2A002A; | |||
} | |||
.format-6 { | |||
color: #FA0; | |||
text-shadow: 0.125em 0.125em 0 #2A2A00; | |||
} | |||
.format-7 { | |||
color: #AAA; | |||
text-shadow: 0.125em 0.125em 0 #2A2A2A; | |||
} | |||
.format-8 { | |||
color: #555; | |||
text-shadow: 0.125em 0.125em 0 #151515; | |||
} | |||
.format-9 { | |||
color: #55F; | |||
text-shadow: 0.125em 0.125em 0 #15153F; | |||
} | |||
.format-a { | |||
color: #5F5; | |||
text-shadow: 0.125em 0.125em 0 #153F15; | |||
} | |||
.format-b { | |||
color: #5FF; | |||
text-shadow: 0.125em 0.125em 0 #153F3F; | |||
} | |||
.format-c { | |||
color: #F55; | |||
text-shadow: 0.125em 0.125em 0 #3F1515; | |||
} | |||
.format-d { | |||
color: #F5F; | |||
text-shadow: 0.125em 0.125em 0 #3F153F; | |||
} | |||
.format-e { | |||
color: #FF5; | |||
text-shadow: 0.125em 0.125em 0 #3F3F15; | |||
} | |||
.format-f, | |||
#minetip-tooltip { | |||
color: #FFF; | |||
text-shadow: 0.125em 0.125em 0 #3F3F3F; | |||
} | |||
.format-l { | |||
font-weight: bold; | |||
letter-spacing: 0.125em; | |||
} | |||
.format-m { | |||
text-decoration: line-through; | |||
} | |||
.format-n { | |||
text-decoration: underline; | |||
} | |||
.format-o { | |||
font-style: italic; | |||
} | |||
/* Styling for minecraft style tooltip */ | |||
#minetip-tooltip { | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
background-color: #100010; | |||
background-color: rgba(16, 0, 16, 0.94); | |||
padding: 0.375em; | |||
font-family: Minecraft, sans-serif; | |||
font-size: 16px; | |||
word-spacing: 4px; | |||
white-space: nowrap; | |||
line-height: 1.25em; | |||
margin: 0.125em 0.25em; | |||
pointer-events: none; | |||
z-index: 9999; | |||
} | |||
#minetip-tooltip::before { | |||
content: ""; | |||
position: absolute; | |||
top: 0.125em; | |||
right: -0.125em; | |||
bottom: 0.125em; | |||
left: -0.125em; | |||
border: 0.125em solid #100010; | |||
border-style: none solid; | |||
border-color: rgba(16, 0, 16, 0.94); | |||
} | |||
#minetip-tooltip::after { | |||
content: ""; | |||
position: absolute; | |||
top: 0.125em; | |||
right: 0; | |||
bottom: 0.125em; | |||
left: 0; | |||
border: 0.125em solid #2D0A63; | |||
border-image: -webkit-linear-gradient(rgba(80, 0, 255, 0.31), rgba(40, 0, 127, 0.31)) 1; | |||
border-image: linear-gradient(rgba(80, 0, 255, 0.31), rgba(40, 0, 127, 0.31)) 1; | |||
} | |||
#minetip-tooltip > .description, | |||
#minetip-tooltip > .minetip-description { | |||
display: block; | |||
margin-top: 0.25em; | |||
} | |||
/* Styling for tooltip */ | |||
.explain { | |||
border-bottom: 0; | |||
text-decoration: underline dotted; | |||
cursor: help; | |||
} | |||
/* Show help cursor when an abbr element has a title attribute */ | |||
abbr[title] { | |||
cursor: help; | |||
} |