Mobile.css

Revisión del 17:05 26 feb 2019

/* For the mobile frontend only. Add ?useformat=mobile to any URL to test */

/* Section to address missing new mobile skin  elements */
#mw-mf-viewport,
body {
    background: none repeat scroll 0 0 #101010;
}

#content_wrapper {
    background: none repeat scroll 0 0 #202020;
    color: #e0e0e0;
}

a,
a.external,
#footer a,
#footer h2  {
    color: #3674b3;
}

.content table td,
.content table th {
    background-color: #181818;
    border: medium none;
    padding: 3px;
}

h1, 
h2 {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-bottom: 1px solid #303030;
    color: #e0e0e0;
}

h3, h4, h5, h6 {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #e0e0e0;
}

/* Original css follows */
h2#section_footer, #mw-mf-last-modified {display: none}
#content_wrapper {margin: 1ex 1em}
.content {margin: 0}
#content_footer {border: none; background: transparent}
#footer {background: #101010; margin-bottom: 0 !important; padding-bottom: 62px; border-top-color: #303030; color: #e0e0e0;}
#content_wrapper #footer {margin: 1em -1em 0}
#mw-mf-search {font-size: 16px}
.thumb {display: inline-block; padding: 5px}
ul.settings li {margin-bottom: 1ex}

@media (max-width: 400px) {
 table.infobox {float: none !important; margin: 0 auto 1em auto !important;}
 #mw-content-text > div.wtooltip {float: none !important; margin: 0 2em 1em 2em !important; width: auto;}
 #mw-content-text > div.wtooltip.ach-tt {margin-left: 60px !important;}
 table.break-400, table.break-400 > *, table.break-400 > * > tr, table.break-400 > * > tr > * {display: block; margin: 0; padding: 0}
 table.break-400 > * > tr > * {width: 100% !important; margin: 2px 0; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box}
 div.disambig-for dd {margin-left: 1em}
}
@media (min-width: 480px) {
 .tright {float: right; clear: right; margin: 0 0 1em 1em}
}

.mpcontentbox-table, .mpcontentbox-table td {border: none}
.mpcontentbox-table td p, .mpcontentbox-btable p {margin: 0.3em 0}
.mpcontentbox-table td p:first-child, .mpcontentbox-btable > div > div >p:first-child {margin-top: 0}
.mpcontentbox-table td ul, .mpcontentbox-btable ul {margin: 0.3em 0 1em 0; padding-left: 2em}
#mf-news dt {font-weight: bold}
#mf-news dd {margin: 0 0 1.5em 0}

.infobox .above-header th {background-color: #BFD9FF}
.infobox .below-header > *, .darktable th {background-color: #e8e8e8}
.infobox .above-header img {vertical-align: -60%}
table.infobox td {border: 1px solid #d8d8d8}
.infobox .label, .infobox .above-header + .mid-header {background-color: #f0f0f0}
.infobox .mid-header, .infobox .mid-header th, table.navbox th.navbox-title {background-color: #D9E9FF}
.navbox td {border-color: transparent}
table.navbox {border-collapse: separate !important; border: 1px solid #d8d8d8; padding: 0}
.navbox-title .navbar.mini {display: none}
table.navbox .navbox-group, table.navbox .navbox-abovebelow { background-color: #e8e8e8; padding: 0.25em 1em; line-height: 1.2em; text-align: center;}

.darktable {background: white}
.darktable > caption {font-weight: bold; margin: 0.5em 0.2em}

/* --- TOOLTIP --- */ 

 /* WoW Style Tooltip */
 .wtooltip {
  width: 18em;
  min-width: 15em;
  padding: 0.3em;
  margin: 5px;
  background-color: #101010;
  border: 1px #b0b0b0 solid;
  border-radius: 0.75ex;
  text-align: left;
 }
 .wtooltip ul {margin: 0; padding: 0; list-style: none; list-style-type: none; list-style-image: none;}
 .wtooltip, .wtooltip li, .wtooltip li > a {color: #f0f0f0;}
 .wtooltip .outericon {position: absolute; left: -38px; top: 0}
 .wtooltip table, .wtooltip table td, .wtooltip table th {border: none}

 /* itemtooltip and others MUST be used in conjunction with wtooltip */
 .itemtooltip { width: 18em; margin-top: 0; }
 .proftip {width: 22em}

 .htt .tooltip-content ul {margin: 0; padding: 0; list-style: none; list-style-type: none; list-style-image: none;}
 .htt .tooltip-content, .htt .tooltip-content li, .htt .tooltip-content li > a {color: #f0f0f0;}
 li.socket, li.socket a, .htt .tooltip-content li.socket, .htt .tooltip-content li.socket a {color: #999;}
 li.glyph, li.glyph a, .htt .tooltip-content li.glyph, .htt .tooltip-content li.glyph a {color:#71d5ff;}
 li.req, li.req a, .htt .tooltip-content li.req, .htt .tooltip-content li.req a {color: #999;}
 li.locked, li.locked a, .htt .tooltip-content li.locked, .htt .tooltip-content li.locked a {color: #d22;}
 li.bonus, li.bonus a, .htt .tooltip-content li.bonus, .htt .tooltip-content li.bonus a {color: #0f0;}
 li.flavor, li.flavor a, .htt .tooltip-content li.flavor, .htt .tooltip-content li.flavor a, .wtooltip li.description, .wtooltip li.description a {color: #ffd517;}
 li.detail, li.detail a, .htt .tooltip-content li.detail, .htt .tooltip-content li.detail a {color: #66c;}
 li.set, li.set a, .htt .tooltip-content li.set, .htt .tooltip-content li.set a {color: #ffd100;}
 li.setbonus, li.setbonus a, .htt .tooltip-content li.setbonus, .htt .tooltip-content li.setbonus a {color: #999;}
 div.htt .setdesc { display:none; }
 .setdesc .linkicon { display: none; }
 .setdesc strong.selflink {font-weight: normal}
 .tooltip, .htt .tooltip-content {
  font-size: 1em;
  float: left;
  width: auto;
  min-width: 15em;
  padding: 0.3em;
  margin: 5px;
  color: #fff;
  background-color: #111;
  border: 1px #bbb solid;
  border-radius: 0.75ex;
 }
.htt .tooltip-content table {color: white}
  .tooltip ul, .htt .tooltip-content ul {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-type: none;
  list-style-image: none;
 }
 
 .htt .tooltip-content {
  background-color: #070A1A
 }
 .htt .tooltip-content {
 max-width: 22em;
 background-color: rgba(11, 16, 41, 0.9)
 }

 .htt .ach-tt {
 max-width: 35em !important;
 }

 #templatetfb .tooltip-content {
 max-width: 300px !important;
 }
 .htt .tooltip-content .tooltip-hide { display:none; }

 .tooltip-ready {
  visibility:hidden;
  display:block;
  z-index:999;
 }

/* Template:itemtip and co. */
.tt-icon {float: right; position: relative; margin-left: 4px}
.tt-icon-stack {text-shadow: #202020 1px 1px, #202020 0px 0px 3px; position: absolute; bottom: 1px; right: 2px}
.hometip > ul > .awayline, .awaytip > ul > .homeline {display: none}
.wtooltip.awaytip {font-size: 0.85em}
.hometip {float: right}
.awaytip {float: left}
.createline > .itemtooltip {background: transparent; border: none; font-size: 0.90em; margin: 0.75em 0; padding: 0}
.awaytip > ul > .createline > .itemtooltip {margin: 0.90em 0}

.ajaxttlink > img, .linkicon img {vertical-align: text-bottom}

/* Achievementtip */
.wtooltip.ach-tt {position:relative; margin-left: 60px; width: auto; min-width: -webkit-min-content; min-width: -moz-min-content; min-width: min-content}
.ach-tt .achievementcriteria li > .nobreak {white-space: normal}
.ach-tt .tt-icon {position: absolute; left: -58px; top: -1px; float: none}
.achievementpoints { clear:both; float:right; white-space:nowrap; margin-left:1em }
.achievementtitle strong, .achievementcriteria strong, .achievementrewards strong { color:gold }
.achievementtitle.account-ach strong {color: #00aeff}
.wtooltip.ach-tt > ul {min-width: 16em}

/* Lootbox */
ul.side-by-side, .side-by-side-recursive ul {margin: 0; padding: 0; list-style: none; list-style-type: none; list-style-image: none;}
ul.side-by-side > li, .side-by-side-recursive ul > li {padding: 0.2em; display: inline-block; vertical-align: top}
.lootbox.side-by-side > li {padding: 0 2px}

/* --- COLORS --- */
 
 /* Blizz text color */ 
 .blizztext, .text-blizz { color:#0070af; }
 
 /* text colors: say, yell, emote, whisper */
 .text-say {color:#CC9900;}
 .text-yell {color:#FF4040;}
 .text-emote {color:#F87431;}
 .text-whisper {color:#F8B0DE;}
 .text-bossemote {color:#f0d000;}

 /* Item Quality Colors */ 
 .qc-poor, .qc-poor a { color: #9D9D9D; }
 .qc-common, .qc-common a { color: #000000; } /* common is normally white, but white on white is bad */
 .wtooltip .qc-common, .wtooltip .qc-common a, .tooltip-content .qc-common {color:#fff} /* but we want it white inside tooltips. */
 .qc-uncommon, .qc-uncommon a { color: #27BF13 }
 .wtooltip .qc-uncommon, .wtooltip .qc-uncommon a {color: #1EFF00}
 .qc-rare, .qc-rare a { color: #0070FF; }
 .qc-epic, .qc-epic a { color: #a335ee; }
 .qc-legendary, .qc-legendary a { color: #ff8000; }
 .qc-artifact, .qc-artifact a, .qc-heirloom, .qc-heirloom a { color: #BFA760; }
.qc-enchant, .qc-enchant a {color: #E6BB00}

.abilitylink {color: #2BA2D9}
.talentlink {color: #4e96f7}
.currencylink {color:#00AA00}

 /* Class Colors */
 .cc-druid, .cc-druid a { color: #FF7D0A; }
 .cc-hunter, .cc-hunter a { color: #ABD473; }
 .cc-mage, .cc-mage a { color: #69CCF0; }
 .cc-paladin, .cc-paladin a { color: #F58CBA; }
 .cc-priest, .cc-priest a { color: gray; } /* priest is white, but not on light skins... see darkvector.css */
 .cc-rogue, .cc-rogue a { color: #CC9900; }
 .cc-shaman, .cc-shaman a { color: #2459FF; }
 .cc-warlock, .cc-warlock a { color: #9482CA; }
 .cc-warrior, .cc-warrior a { color: #C79C6E; }
 .cc-deathknight, .cc-deathknight a { color: #C41E3A; }
 .cc-monk, .cc-monk a { color: #008467; } /* proper color in darkvector */

 .druid, .druidalt { color: white; }
 .druid { background-color: #7f3e05; }
 .druidalt { background-color: #663300; }
 .druid a, .druidalt a { color: #ff7f0a; }
 
 .hunter, .hunteralt { color: white; }
 .hunter { background-color: #445533; }
 .hunteralt { background-color: #334422; }
 .hunter a, .hunteralt a { color: #ABD473; }
 
 .mage, .magealt { color: white; }
 .mage { background-color: #4488aa; }
 .magealt { background-color: #336677; }
 .mage a, .magealt a { color: #66ccff; }
 
 .paladin, .paladinalt { color: white; }
 .paladin { background-color: #883355; }
 .paladinalt { background-color: #662244; } 
 .paladin a, .paladinalt a { color: #ff99cc; }
 
 .priest, .priestalt { color: white; }
 .priest { background-color: #777777; }
 .priestalt { background-color: #444444; }
 .priest a, .priestalt a { color: #bbbbbb; }
 
 .rogue, .roguealt { color: white; }
 .rogue { background-color: #555500; }
 .roguealt { background-color: #444400; }
 .rogue a, .roguealt a { color: #fff569; }
 
 .shaman, .shamanalt { color: white; }
 .shaman { background-color: #112277; }
 .shamanalt { background-color: #112255; }
 .shaman a, .shamanalt a { color: #2459FF; }
 
 .warlock, .warlockalt { color: white; }
 .warlock { background-color: #331155; }
 .warlockalt { background-color: #220044; }
 .warlock a, .warlockalt a { color: #cc99ff; }
 
 .warrior, .warrioralt { color: white; }
 .warrior { background-color: #775533; }
 .warrioralt { background-color: #443322; }
 .warrior a, .warrioralt a { color: #C79C6E; }

 .deathknight, .deathknightalt { color: white; }
/* .deathknight { background-color: #; } */
/* .deathknightalt { background-color: #; } */
 .deathknight a, .deathknightalt a { color: #C41E3A; }

 .monk, .monkalt { color: white; }
/* .monk { background-color: #; } */
/* .monkalt { background-color: #; } */
 .monk a, .monkalt a { color: #008467; }

/* Template: Reputation */
.rep-hated {color: #ac1d1d}
.rep-hostile {color: #ac0000}
.rep-unfriendly {color: #AB4918}
.rep-neutral {color: #acac00}
.rep-friendly {color: #00ac00}
.rep-honored {color: #00AB5B}
.rep-revered {color: #00AB89}
.rep-exalted {color: #00acac}

 /* Buffs & Debuffs */
 div.bufftip {border-width: 1px; border-style: solid; border-color: #aaaaaa;}
 div.debuff {border-color: #cc0000;}
 div.debuffmagic {border-color: #3399ff;}
 div.debuffcurse, div.buffweapon {border-color: #9900ff;}
 div.debuffdisease {border-color: #996600;}
 div.debuffpoison {border-color: #009900;}

.achievementlink {color: #CC9900;}

/* elinks */
ul.elinks { list-style-type: none; padding: 0px; margin: 0px; overflow:hidden }
ul.elinks li {
 list-style: none;
 background-repeat: no-repeat;
 background-position: 0px 0px;
 padding-left: 25px;
 min-height: 25px;
 vertical-align: middle;
}
ul.elinks li.wowhead { background-image: url('/media/6/6e/Icon-wowhead-22x22.png'); }
ul.elinks li.wowus { background-image: url('/media/9/9c/Icon-wowus-22x22.png'); }
ul.elinks li.sigrie { background-image: url('/media/b/ba/Icon-mmochampion-22x22.png'); }
span.alliance-link, span.horde-link, span.neutral-link {
 background-repeat: no-repeat;
 background-position: 0px 0px;
 padding-left: 17px;
 min-height: 15px;
 vertical-align: middle;
}

span.alliance-link { background-image: url('/media/2/21/Alliance_15.png'); }
span.horde-link { background-image: url('/media/c/c4/Horde_15.png'); }
span.neutral-link { background-image: url('/media/c/cb/Neutral_15.png'); }

.alliance-link-big, .horde-link-big, .neutral-link-big, .combat-link-big {
 background-repeat: no-repeat;
 background-position: 1px 3px;
 padding-left: 39px;
 min-height: 36px;
 vertical-align: middle;
}

.alliance-link-big { background-image: url('/media/2/25/Alliance_32.png'); }
.horde-link-big { background-image: url('/media/4/4f/Horde_32.png'); }
.neutral-link-big { background-image: url('/media/3/38/Neutral_32-square.gif'); }
.combat-link-big { background-image: url('/media/6/6c/Combat_32.gif'); }


span.socketlink-red { background-image: url('/media/0/02/UI-EmptySocket-Red.png'); }
span.socketlink-blue { background-image: url('/media/f/fc/UI-EmptySocket-Blue.png'); }
span.socketlink-yellow { background-image: url('/media/8/87/UI-EmptySocket-Yellow.png'); }
span.socketlink-prismatic { background-image: url('/media/4/48/UI-EmptySocket-Prismatic.png'); }
span.socketlink-meta { background-image: url('/media/7/75/UI-EmptySocket-Meta.png'); }

span.socketlink {
 background-repeat: no-repeat;
 background-position: 0px 0px;
 padding-left: 18px;
 min-height: 16px;
 vertical-align: middle;
}
span.socketlink a {
 color:#999;
}

.itemlink {white-space: nowrap}
.itemtooltip .itemlink {white-space: normal !important;}
.questshort .questlong-prefix {display: none}
.questbox .questshort > .nobreak {white-space: normal}

/* Other-faction links on quest-disambiguated pages */
.fswitched .qfordisambig {display: none}

.coords-link {line-height: 1em}
.broken.coords-link sup {background-color: #FFB0B0}

/* Versions */
body.versions-active .versions-cv {display: none}
body.versions-active table.elinks-many {border: none; padding: 0; background: transparent; margin: 0; font-size: 100%}
body.versions-active table.elinks-many td {border: none}
#versions-header-tabs {display: block; font-size: 0.60em; line-height: 1.5em; padding: 1px 0; border-width: 1px 0; border-style: solid; border-color: #e2e2e2; margin-top: 4px}
#versions-header-tabs a {margin-left: 0.6em}
#versions-header-tabs:before {content: 'Versions: '; font-weight: normal}
#versions-header-tabs .inactivetab {color: #0088CC; font-weight: normal}
#versions-header-tabs .activetab {color: black}
#versions-header-tabs .activetab.alliancetab {color: #214DA6}
#versions-header-tabs .activetab.hordetab {color: #A63721}
#versions-header-tabs.fswitch .inactivetab {color: #666666}
body.versions-active-inline .qfordisambig {display: none}

/* Style for horizontal lists (separator following item).
   IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].
   @source mediawiki.org/wiki/Snippets/Horizontal_lists
   @revision 4.3 (2014-01-06)
   @author [[User:Edokter]]
 */
.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
    padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
    margin: 0;
    display: inline;
}
/* Display nested lists inline */
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
    display: inline;
}
/* Generate interpuncts */
.hlist dt:after {
    content: ": ";
}
.hlist dd:after,
.hlist li:after {
    content: " · ";
    font-weight: bold;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
    content: none;
}
/* For IE8 */
.hlist dd.hlist-last-child:after,
.hlist dt.hlist-last-child:after,
.hlist li.hlist-last-child:after {
    content: none;
}
/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
    content: " (";
    font-weight: normal;
}
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
    content: ") ";
    font-weight: normal;
}
/* For IE8 */
.hlist dd dd.hlist-last-child:after, .hlist dd dt.hlist-last-child:after, .hlist dd li.hlist-last-child:after,
.hlist dt dd.hlist-last-child:after, .hlist dt dt.hlist-last-child:after, .hlist dt li.hlist-last-child:after,
.hlist li dd.hlist-last-child:after, .hlist li dt.hlist-last-child:after, .hlist li li.hlist-last-child:after {
    content: ") ";
    font-weight: normal;
}
/* Put ordinals in front of ordered list items */
.hlist ol {
    counter-reset: listitem;
}
.hlist ol > li {
    counter-increment: listitem;
}
.hlist ol > li:before {
    content: " " counter(listitem) " ";
}
.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
    content: " (" counter(listitem) " ";
}
 
/* Unbulleted lists */
.plainlist ul {
    line-height: inherit;
    list-style: none none;
    margin: 0;
}
.plainlist ul li {
    margin-bottom: 0;
}


/* VideoLink */
.vplink:before {content: '\25B6'; margin-right: 4px; color: #bc0000; vertical-align: 1px; font-size: 75%;}